You've got your big idea. You've collected your content. You've planned your Web site structure. Now it's time to put it all together. But wait! Just how are you going to do this?

If you don't know HTML, don't despair. There are plenty of Web design tools available to create your site. You've got a lot of choices:

• Nvu : This freeware program is an easy-to-use, intuitive tool for beginners. What it lacks in features and functionality, it makes up for in cost and ease of use. Perfect for a beginner and a simple Web site.
• Microsoft FrontPage : A complete copy of the popular Microsoft FrontPage Web site development program is included with Microsoft® Office Developer Suite. Or, you can purchase FrontPage separately for less than $200. FrontPage is a complete development tool for creating simple or complex Web sites.
• Macromedia Dreamweaver from Adobe : Another Web design product that experienced users swear by is Macromedia Dreamweaver®. It's a little pricey at $399 for a new copy, but it produces very clean HTML markup and is easy to use.

If you've used a word processor or desktop publishing software, adapting to a Web design tool won't be too difficult for you. For instance, to insert a table, you just click Table (or a similar command) in the top toolbar. Same for images. Whichever tool you end up using, take the tutorial to understand the basics.

Although your desktop publishing and word processing software often offer a way to convert from document format to Web format, don't use these tools for creating Web pages. The HTML code generated by this software tends to be full of random characters specific to the type of document it was saved as originally and wreaks havoc with a variety of browsers.

Do some research, download free trials to give you a chance to get to know each of the different tools, examine your budget, and then decide on a Web design tool and start using it. Your next step is to select a graphics editing tool, and begin laying out your Web site template. That's coming up next.

The Web is nothing if not visual. In Lesson 2, you learned how to select appropriate images for your site. Now you'll learn a number of ways you can create a visually pleasing Web site using a combination of images and powerful tools.

Select a Graphics Tool

A number of graphics tools are available that are geared specifically for Web site development. This is good news because more sophisticated programs such as Adobe Photoshop are rather expensive. Two relatively low-cost Web-oriented graphics tools are:

• Macromedia Fireworks® from Adobe : From the creators of Dreamweaver and Flash, this product is heavily oriented toward Web site development, and makes it easy to create animations and image maps. It even allows you to "slice" your design into Web page components, generating HTML automatically.
• Corel® Paint Shop Pro® X : This image-editing software's Web-specific tools include one that optimizes your image in a particular format and a "slicing" tool.

Both of these products have a wide range of capabilities, including controlling brush size, applying special effects such as textures and lighting effects, and font control. The more capabilities a graphics program has, the more it costs (for example, Photoshop costs $650 retail) and the longer it takes to learn. If you decide to make your career in the Web business, by all means take the professional route. For the rest of us, an easier, cheaper tool might be more what the doctor ordered. As with your Web design tool, try out some free trial versions to figure out which graphics tool you like best.

Are Your Images Web Friendly?

Preparing images for the Web is quite different from preparing images for print. So, if you've done print publishing before, you may need to "unlearn what you have learned," as Yoda told Luke Skywalker.

The Web has rules for handling images. Basically, they are:

• You should only use JPEG (Joint Photographic Experts Group) and GIF (Graphic Interchange Format) images.
• Your image should be as small (in bytes) as possible. The smaller the file, the faster it loads.
• The resolution of your images should be 72 dpi (dots per inch).

Follow these simple rules and you shouldn't have any problems with download and pageload times.

Smaller Is Better

Both JPEG and GIF are compressed formats. This means that when you save anything in either format, the resulting file is smaller than it would be if you had saved the same image in uncompressed formats. By contrast, TIFF (Tagged Image File Format, which use the .tif extension) is among the highest-quality image formats. This format is typically used to save images that ultimately wind up in a printed publication.

GIF and JPEG are examples of two ways images can be compressed. The GIF format is excellent for compressing images with relatively few colors or no gradations in color, because it reduces the size of images by limiting the number of colors. The JPEG format reduces the quality of the image by selectively discarding information about the image that the viewer is unlikely to notice. That's why JPEG is best for compressing images with lots of colors. Drawings and clip art images make great GIFs, whereas color photographs look best as JPEGs.

What does all this mean for you? You're going to have to spend a lot of time manipulating your images. It's safe to say that you're probably going to spend more time fooling around with your images than working on the formatting of associated text.

What's Your DPI?

You'll find that a digitized image is often quite large -- so large, in fact, that it barely fits on your monitor's screen. This is a good thing! When you shrink the image in your graphics application, you also decrease its file size without compromising its quality. Most graphics software enable you to choose new dimensions for an image.

When reviewing Web development sites, you might come across the term ppi (pixels per inch). For the purposes of this course, you can assume ppi and dpi mean roughly the same thing.

As mentioned earlier, images for the Web should be saved at a resolution of 72 dpi. If you create images with a higher dpi, they may appear larger onscreen than you intend.

Nice Proportions

Notice as you move around the Web that images are usually proportional to the Web design -- no image is too big or too small. You might want to copy some of these images to your own computer. Open some in your graphics software and note their dimensions. Pretty soon you'll have a good sense of good image sizing parameters.

Take some time to play around with resizing your own images. Always resize them proportionally so that when you change one dimension, the other is changed by the same percentage. You can use HTML to choose size attributes for an image after you've placed it on a Web page you're working on, but the full-size image must still be downloaded when someone accesses your page. If you size the image file itself before you add it to the page, it will be smaller to start with, and will download more quickly.

Images add pizzazz to your Web site but also provide a good way to link pages to each other. In the next section, learn about these links and how to connect pages to each other and other pages on the Web.

There would be no World Wide Web were it not for hyperlinks. In fact, hyperlinks (or just links) are what make the Web what it is: a worldwide network of interconnected documents.

Link within Your Web Site

Links within your Web site are called internal links. For instance, all of your navigation items should be internal links. You may want to link words or phrases in a text block to pages that have more information on that word or phrase. You also may want to link an image displayed on a page to a larger version of that image so users can see more detail if they choose.

Adding an internal link to a Web page using a Web design tool is pretty much the same procedure no matter which program you've chosen. You'll need to highlight the text to be linked, or select the image to be linked, and click the program's linking function. Then, you can use the tool to navigate to the HTML file or image that the link should go to. The Web design tool will create the proper link automatically.

Be sure to read your Web design tool's manual and take any tutorials to make sure that you understand how to use your specific Web design tool's linking function.

Create a Web Site Map

Another way that internal links are used is in the creation of a site map. A site map, as you learned in Lesson 1, is a listing of all of the pages or (for larger sites) all of the sections of your Web site. Each page or section listed on the site map is linked to the actual page or section. It's usually presented hierarchically, such as on the Apple Web site.

Site maps are helpful when having your site added to a search engine. You'll learn more about this in Lesson 6.

For a better sense of how pages are linked together on other sites, look for site map sections of some of your favorite Web sites while you're browsing the Web.

Link to Other Web Sites

The spirit of the Web is one of interconnectedness. As the title of this page says, "Links make the Web go 'round." And in that spirit, you should have links on your site to other Web sites. Some ways to use external links on your site are:

• Linking words or phrases in your site's text to Web sites with more information on that topic.
• Adding a list of resources on other Web sites related to a particular topic or topics covered on your Web site (and linking the items in the list, of course!).
• Creating a special Web page on your site that lists related Web sites. If you're creating a personal site, it may just be a list of "Web Sites That I Like."

Adding an external link to your site is pretty similar to adding an internal link. In your Web design tool, highlight or select the text or image to be linked, and click the program's linking function. In the text box provided, type the entire URL (Uniform Resource Locator, or Web address) of the page you're linking to, such as http://www.google.com or something more specific, such as http://autos.netscape.com/?gname=uglycar.

Use links to lay out how your Web site is going to flow. Be sure to think about how a visitor is going to want to intuitively go through the site gathering information, making decisions about which product makes the most sense for them, and then moving on to make a purchase. If you link your pages together intuitively, visitors will be more likely to feel good about your site and come back for more. In the next section, you'll learn how to preview your Web site to make sure everything is working and the visitor's path through the site makes sense.

As you develop your Web site, take a look at your Web pages in a Web browser to make sure they're looking good. It's best to do this locally (in other words, on your own computer) before uploading to the Internet.

To make sure you're on the right track, all you need is your browser. Then follow these steps:

1. Create a new directory on your computer and name it something relevant to this project (for example, newweb or My First Web Site ).
2. Save your Web files to this directory, including all HTML files and graphics.
3. Once you have at least one file in this directory, open a Web browser, such as Microsoft® Internet Explorer or Mozilla Firefox, and type the path and directory name in the browser's address field. No need to add http://. Just type c:\newweb , or, if you're using a Mac, your hard drive's name, a forward slash (/), and the directory name ( newweb ). You can also use the Browse feature to find your directory. You'll get a listing of what's in that directory, as shown in Figure 3-1.

Enlarge image

4. Double-click any of the HTML files to display it in your browser.

Most Web design programs help you develop your Web site structure automatically. They also typically have a Preview tool that shows your Web pages in a browser.

That's all there is to using your own computer and browser to test your Web designs.

How'd They Do That?

Like most Web developers, you've probably spent a lot of time browsing other people's Web sites, and getting ideas of what you like, and don't like, and what you want to do on your own site. But sometimes you may not know how to do what you want.

There are a few ways to find out. First, you can contact the Web site owner and ask them. Second, you can use the View > Source option in your browser to take a look at the HTML. Or, third, you can download the Web page to your local computer and take a look at in your Web design tool.

You need to get permission to use someone else's proprietary Web program. However, grabbing HTML or JavaScript code that you aren't yet familiar with is not a problem.

Save Pages from the Web

Log on to the Internet and go to any Web site. Save that page in your Web design directory or folder using the browser's File > Save As command. Now point your Web browser to your Web design directory and open the HTML file you just saved. What happens? Does the page display as it did when you opened the page from its http address? Are things missing?

Unless you've downloaded a very plain Web page, the page will be missing images and maybe its font styles. To download every file associated with a Web page, select File > Save As and then select Web Page, complete (or something similar) in the Save as type drop-down list to save the entire Web page, including all graphics. Internet Explorer creates a series of subdirectories within the directory you created to store these images and other Web page items. Select File > Save As and then select Web Page, HTML only to save only the text.

Save Images from the Web

Just want to save a Web site's images? Taking and using anything from other people's Web sites, including images, might be in violation of copyright laws. However, if you just want to copy an image from another Web site to view it, or if you're sure there are no copyright issues, place your cursor over the image and right-click the mouse button. Select Save Picture As from the shortcut menu. In the Save Picture dialog, save the image into your Web design directory. Mac users can click and hold the graphic, and then select Download image to disk from the menu.

Next Up

Now that you've learned how to put it all together, in Lesson 4, you learn how to give your Web site a home on the Web (no, not on the range). But first, complete this lesson's quiz and assignment to solidify your new knowledge. After that, pop in at the Message Board to see what your classmates are saying about their Web design tools.