Dreamweaver workshop– Web Design Summer 2004

Hope to . . .

• discuss web page design
• experience working in the environment
• create and use templates
• inserting text and images
• creating hyperlinks
• choosing a file structure for the web (cascading style sheet-css)
• demonstrate using tables wisely
• easily update hyperlinks on multiple pages (with the template)
• discuss site rules share tutorial links and web quests

Links for Dreamweaver and Fireworks Tutorials

http://www.daviess.k12.ky.us/technology/webrules.htm

http://www.dw-fw-beginners.com/tutorials/drmwvr/

http://www.learnthat.com/courses/viewlets/dreamweaver/

http://www.developingwebs.net/dreamweaver/

http://www.cbtcafe.com/dreamweaver/

http://www.dreamweaver-templates.org/dreamweaver-tutorials.html

http://www.iboost.com/build/software/dw/

http://webdesign.about.com/od/dreamweavertips/

http://www.atomiclearning.com/

http://www.macromedia.com/devnet/mx/dreamweaver/

For More, Google “Dreamweaver Tutorials”

Build Your Site In 9 Steps

So, you are thinking of doing a site? Great! But do you want to know how to create a site where visitors will say WOW! Read On.

1. Think of a topic, idea.

What do you want to make your site about? When you do this, also think as a visitor and why would you come to your site? You have to offer something that people want and need. When you'll be clear about what you want to do, proceed to the next step.

2. You got an idea of your future site, right.

Is that enough for a site? The answer is NO. Now you have to think of a layout, colors, and content. Colors are very important, because if you'll mix the wrong ones, it might be hard for visitor to read your content, which is the heart of your site, and then he'll leave, because he knows that there are hundreds of sites like this on the web. It's recommended to draw your content on a sheet of paper or in an image file.

3. Connect to a host.

Daviess County Schools has web servers space provided for you and your students to use. Connect your school tech for the method of connection. Each school will probably handle this differently. For home/non-school sites: If you don't want to spend any money, there are lost of sites that will host your site for free. Although most of them place a banner or a pop up on your page, which sometimes might look unprofessional. After all, it's completely free. But if you run a business, you should get your own http://www.you.com domain. It costs only 70 dollars for two years, so it's not really that expensive, and it really worth it.

4. Start writing your first page.

You HAVE to know at least basics of HTML to create a quality site. You don't need to remember all the tags and formats but you got to know how and what is HTML. Although there are hundreds WYSIWYG ( What You See Is What You Get) editors, you'll be able to create a better site with the basic knowledge of HTML. To learn the basics please visit our tutorial section. I'm telling you to do it, because it's the only way you'll be able to fix the errors in your site, and trust me you'll have plenty. Everybody does.

5. Take a look at your page.

Never forget the following factors: 1. Does it loads fast? 2. Does your site has an easy navigation? 3. Is you grammar and spelling is correct? 4. Do you have something that people need or find useful? These are few of the most important factors in each site. A lot of people forget about them, and their site becomes... a shame. Even though your page is one the web, it doesn't mean that you can spell wrong or provide poor content.

6. Redo your page!

90% of people after they look at their first draft find many mistakes. Redo your page and then look at it again. Follow the step 5. It would be very useful if you would show your page to some friends or family. They can notice something that you didn't find. There are some clubs on Yahoo which specialize on critiquing page. Here's an example: Web Judges. After you'll do it ask yourself: Do you like what you see?

7. Start creating all other pages.

Don't get confused in them, and follow the principle of a tree. It's recommended that all of you page should follow some basic pattern or format. For example, Echo Web's every single page looks somewhat similar, right? All of the pages have red bars and black background with the yellow text.

8. Take a look at your site.

Repeat step 5. Looks good? Great. Upload it to your host. Now it's the time for you to start promoting your site. Otherwise, how will people are going to be able to find it? Visit our tutorials section for a special two-part tutorial on how to promote your web site. It got many tips and tricks that you won't find anywhere else.

9. You finished with all 8 steps.

Now you are waiting for visitors to come. Does it means that you are done with the web site? That you can forget about it? Once again, NO. The web site is a cycle. It's not a newspaper, which you publish once and then forget it. People will start coming to your site for a while, but the point is to keep them coming back. How to do that? Update your site at least once in two weeks, have something useful and interesting on your site.

Before you build, Plan!

Determining your goals

Deciding what your site goals are is the very first step you should take when you create a website. Ask yourself or your client questions about the site. What do you hope to accomplish by having a website? Write down your goals so that you remember them as you go through the design process. Goals help you focus and target your website to your particular needs.

A website that provides news about a specific subject should have a very different look and navigation than that of a website that sells products. The complexity of your goals will affect the navigation, the authoring tools that you use (Flash, Director, and so on), and even the look and feel of your site.

Choosing a target audience

After you have decided what you want to accomplish with your website, you need to decide who you want to visit your site. This may seem to be a silly question, since most people want everyone to visit their website. However, it is difficult to create a website that every single person in the world will be able to use. People use different browsers, connect at different speeds, and may or may not have media plug-ins. All of these factors can affect the use of your site. That is why you need to determine a target audience.

Think about the people who will be attracted to your website, or who you hope to attract. What kinds of computers do you think they will be using? What platform might be the dominant one (Macintosh, Windows, Linux, and so on)? What is the average connection speed (33.6 Kbps modem or DSL)? What kinds of browsers and monitor sizes will they be using? Are you creating an intranet site where everyone will be using the same computer OS and browser? All of these factors can greatly affect the way your web page appears to visitors.

Once you choose the audience and have determined what types of computers, connection speeds, and browsers they will be using, you can target your design.

For example, say your target audience is predominantly made up of Windows users with 17-inch monitors, using Microsoft Internet Explorer 3.0 or above. As you design your web page, you should test that your site works best in Internet Explorer on a Windows computer with a screen size of 800 x 600 pixels. Fewer viewers may use Netscape Navigator on a Macintosh platform, but you should still make sure your site works on those machines, although it may not display as precisely as it does for your target audience.

Creating sites for browser compatibility

As you create your site, you should be aware of the variety of web browsers your visitors are likely to use. Where possible, design sites for maximum browser compatibility, given other design constraints.

There are over two dozen different web browsers in use, most of which have been released in more than one version. Even if you target only Netscape Navigator and Microsoft Internet Explorer, which are used by the majority of web users, be aware that not everyone uses the very latest versions of those browsers. If your site is on the web, sooner or later someone will visit it using Netscape Navigator 2.0, or the browser that AOL provides its customers, or a text-only browser such as Lynx.

There are some circumstances under which there’s no need to create sites that are cross-browser-compatible. For example, if your site is available only on your company’s intranet, and you know that all of your company’s employees use the same browser, you can optimize your site to rely on features of that browser. Similarly, if you’re creating HTML content to be distributed on CD-ROM, and you distribute a browser on the CD, you can assume that all of your customers have access to that particular browser.

Under most circumstances, for websites designed for public viewing, it’s a good idea to make your site viewable in as many browsers as possible. Pick one or two browsers as your target browsers, and design the site for those browsers, but try exploring the site in other browsers now and then to avoid including too much incompatible content. You can also post a message on a discussion board to ask others to view your site. This can be a good way to get feedback from a wide audience.

The more sophisticated your site is—in terms of layout, animation, multimedia content, and interaction—the less likely it is to be cross-browser-compatible. Not all browsers can run JavaScript, for example. A page of plain text that uses no special characters will probably display well in any browser, but such a page may have much less aesthetic appeal than one that uses graphics, layout, and interaction effectively. Try to strike a balance between designing for maximum effect and designing for maximum browser compatibility.

One useful approach is to provide multiple versions of certain important pages, such as your site’s home page. For example, you can design both a framed version and a frameless version of such a page. You can then include in your web page a behavior that automatically shifts visitors without frame-capable browsers to the frameless version.

Organizing the site structure

Organizing your site carefully from the beginning can save you frustration and time later on. If you begin creating documents without thinking about where in your folder hierarchy they should go, you may end up with a huge, unwieldy folder full of files, or with related files scattered through a lot of similarly named folders.

The usual way to set up a site is to create a folder on your local disk that contains all the files for your site (referred to as the local site), and to create and edit documents within that folder. You then copy those files to a web server when you are ready to publish your site and allow the public to view it. This approach is better than creating and editing files on the live public website itself, because it allows you to test changes in the local site before making them publicly viewable, and then when you’re finished, you can upload the local site files and update the entire public site at once.

Once you set up the local site with Dreamweaver, you can more easily manage your site files, track links, update pages, and more.

Break down your site into categories  Put related pages in the same folder. For example, your company press releases, contact information, and job postings might go all in one folder, and your online catalog pages in another folder. Use subfolders where necessary. This type of organization will make your site easier to maintain and navigate.

Decide where to put items such as images and sound files  It’s convenient to place all your images, for example, in one location, so that when you want to insert an image into a page you know where to find it. Designers sometimes place all of the non-HTML items to be used on a site in a folder called Assets. That folder may contain other folders—for example, an Images folder, a Shockwave folder, and a Sound folder. Or you might have a separate Assets folder for each group of related pages on your site, if there aren’t many assets shared among such groups.

Creating your design look

You save a lot of time later in the process if you plan your design and layout before you actually begin working in Dreamweaver. It can be as simple as creating a mock-up drawing of how you want the site layout to look on a piece of paper. A more advanced approach would be to create a composite drawing of your site using software such as Macromedia FreeHand or Fireworks. The important thing is to have a mock-up of your layout and design so you can follow it later as you build your site.

It is important to maintain consistency in your page layout and design. You want users to be able to click through the pages in your site without getting confused because all the pages have a different look, or the navigation is in a different place on each page.

Designing the navigation scheme

Another area where planning pays off is navigation. As you design your site, think about the experience you want your visitors to have. Think about how a visitor to your site will be able to move from one area to another. Consider the following points:

“You are here” information enables visitors to easily know where they are in your site and how to return to your top-level page.

Searching and indexes make it easy for visitors to find any information they are looking for.

Feedback provides a way for visitors to contact the webmaster (if appropriate) if something is wrong with the site, and to contact other relevant people associated with the company or the site.

Design the way your navigation will look. Navigation should be consistent throughout your site. If you place a navigation bar across the top of your home page, try to keep it there for all the linked pages. Dreamweaver has two navigation tools that you can use to create your navigation scheme.

Planning and gathering assets

Once you know what your design and layout will look like, you can create and gather the assets that you will need. Assets can be items such as images, text, or media (Flash, Shockwave, and more). Make sure you have all of these items gathered and ready to go before you begin developing your site. Otherwise, you’ll have to continually stop development to find an image or to create a button.

If you are using images and graphics from a clip-art site or someone else is creating them, make sure you collect them and put them in a folder on your site. If you are creating the assets yourself, make sure you create them all before you start development, including any images you need if you are using rollovers. Then organize your assets so you can access them easily while creating your site in Dreamweaver.

Getting Started

Developing a sketchbook - Draw screen layouts for every screen you are going to have in your site. Complete this in two formats.

1. Develop a thumbnail Sketch of the “Site Map”. Example:

2. Draw detail sketches for each page of the site. Include all text, graphics (in thumbnail format) and navigational control.

Top 14 Web-Design Basics

1. Keep each page's file size under 40K. This will ensure that your pages load reasonably quickly. If they don't, no one will stick around.

2. Include plenty of "white space" -- open areas that don't contain graphics or text. Not enough white space means visual noise and clutter, which can be confusing to the visitor.

3. Use colors that complement each other in the overall layout, and make sure there's enough contrast between the text and the background color/image. Too little contrast makes the text difficult to read.

4. Full-page background images that are too "busy" tend to interfere with the text. If you have one you really like, just place it on pages that don't have a lot of text (like photo galleries), or use a table with a complementary background color.

5. Don't use too much animation. Unless the animated images are your content, they will only distract from whatever you want your viewers to focus on. The visual noise produced by excessive animation is tiring to the eyes, and if you don't make your own, it's all been seen before anyway.

6. Break up long passages. Strings of text that are too long become visually tiring, and readers tend to give up on such content more quickly. One way to break up your text is to include headers. While people will skim right over long passages, they'll see the headers. And if you word them right, your visitors may stop to read the text beneath. Think of your headers as ad headlines; use them to create interest and draw your readers' attention to the message. You can also make a long passage more readable by breaking it into shorter paragraphs. Surfers are more likely to look at a short paragraph (containing one key point) than a long paragraph (in which all of the information is strung together). Important points are often lost in lengthy paragraphs. Make each point stand on its own.

7. Speaking of text, don't overuse capital letters or oversized fonts. It's acceptable to employ them for emphasis every now and again, but they shouldn't make up entire paragraphs. Passages in all caps are harder to read, and the style is considered rude because it looks as though you're "shouting" at the reader. And in general, oversized text will make your site appear amateurish and pushy.

8. Speaking of text (again), it's best not to use the full width of your page for long passages. Doing so makes it more difficult for viewers to pick up the next line as they read, and lends to that cluttered look you're trying to avoid. Studies have shown that the best line length for text is between 5.5 and 6.5 inches -- about 400 to 480 pixels wide. To accomplish that, place your text inside a table and set the table's width to 400 - 480 pixels.

9. Speaking of text (again and again), don't center it! You can center headlines, but centered paragraphs are the first sign of a newbie website. Most places use left-justified text (because it's the default), but I prefer full-justified text. While many people don't know you can do that in a browser (as far as I know, it's an undocumented HTML command) it looks very professional. I discovered it while playing around. Simply use a paragraph tag with an ALIGN attribute of "justify": <P ALIGN="justify"> I use this on most of my pages and highly recommend it. The only drawback is that you may have to reword a line here and there to keep some sentences from...looking too...strung.........out.

10. After you spell-check your pages, proofread them yourself. Spell-checking is good for catching words you think you know how to spell, but don't (don't feel bad, it happens to everyone). Proofreading, on the other hand, catches spelling and grammatical mistakes the spell-checker won't. For instance: Eye doesn't think a smell check her wood help hear.

11. Keep the size of your graphics down, not only in terms of bytes, but actual dimensions as well. Graphics should complement a website, not overwhelm it. And of course, if they take too long to load, people will just leave.

12. Don't overdo the banner ads. If I see a site with too many banners I'll hit my back button faster than one ad can load. Like most people, I don't mind an ad or two per page if there is good content, but if you try and shove them down my throat I will rebel and vote with my back button.

13. Keep a consistent navigational structure throughout your site. Make it easy to go back and forth between pages or, on a large site like mine, between content areas. Visitors will surf more of your site if you do.

14. If you're trying to earn money from your website, keep its look consistent. Changing the background on every page may be okay for home pages, but doing so on a business site will make you look like an amateur who's trying to play at business.