Current Article All Articles About the Author Q&A Podcasts Teachnology Blog

As the Web becomes the publishing medium of choice and efficiency for educational works, teachers and students will be called upon more and more to build their own Web pages. This week's article gets you started building your own Web pages, using one of the most popular and easy-to-use software tools, Macromedia Dreamweaver. If you don't own a copy, you can download a trial version from the Macromedia Web site. Dreamweaver is used widely in schools and businesses around the world, and can be used by beginners as well as experts to create Web pages and sites. I'm using Dreamweaver right now as I prepare this article for the Web. Macromedia offers a site license that allows Dreamweaver to be used on all of a school's computers at a very reasonable cost. So it's a good choice for Web publishing.

This article is adapted from Chapter 1 of The Web Wizard's Guide to Dreamweaver, just off the presses at Addison-Wesley. It shows you how to build a simple Web page with text, images, multimedia, and links. Before you start building your page, you might want to locate some multimedia files: an image, a sound, a video clip, and a Flash animation. If you don't have these readily at hand, you can download some samples from my Web site at http://www.lengel.net/dwsamples/

Open Dreamweaver

Open Dreamweaver and close any windows other than the Document and Properties windows. Use the Window Size box at the bottom of the document window to set the size to 760 x 420 pixels. Choose View - Design from the menubar to get the WYSIWYG (What You See Is What You Get) view -- this is an important feature of Dreamweaver, letting you see exactly what your Web page will look like as you build it.

Insert Text
You will see the cursor flashing in the upper left corner of the page. Enter some text from the keyboard, or copy it from another source and paste it in. The text will appear in Dreamweaver's default font style and size. To change the appearance of the text, select it, and then use the items under the Text menu to modify the size, style, alignment, or color. To start a new paragraph, press the return key. To start a new line, but not a new paragraph, press Shift+return.

To make a headline, put the text on a line by itself, then set it to bold and to a larger size such as 5. To make a bulleted list, enter each bullet item as a new paragraph. Then select all the bullets, and choose Text - List - Unordered List from the menubar. To indent a paragraph, select it and then choose Text - Indent from the menubar.

As you can see, Dreamweaver here is working much like a word processor. The controls over text style, and the means of modifying it, are similar to those in Microsoft Word.

To see what this page would look like to your audience, choose File - Preview in Browser - Internet Explorer (or Netscape Navigator).

No Browser? Select One!
Before you can preview your Web page in a browser, you need to tell Dreamweaver where your browsers are located. Choose File - Preview in Browser - Edit Browser List. Then use the "+" button to add a browser to the list. If you have both Internet Explorer and Netscape on your computer, add both of them to the list.

Notice that your page does not look exactly the same in the browser as it does in Dreamweaver. That's because the browser will interpret the page a bit differently then than both Dreamweaver, and from other browsers. Your text may appear a little larger, or in a different font.

Insert enough text to make a simple Web page, perhaps two paragraphs. Then save the page. Create a new folder called samplesite, and save the file there.

Warning: Filenames
Whenever you save a file that will be used in a Web site, you must take care to use a filename that will work well on the Web. Such filenames should contain only letters and numbers - no special characters and no spaces. And they also must end with an appropriate filename extension - in this case, .html or .htm.

Insert Images
Next, you'll add an image to your Web page. Before doing that, you need first to prepare an the image in the proper format. The images on my Web site - boat.jpg and logo.gif -are all set, but if you prepare your own image, you must make sure that it's saved in a proper form for the Web. If you are not sure of the format of your image, open it in a program like Photoshop or PaintShop Pro, and choose Save for Web from the File menu. Save it with a proper filename into your samplesite folder. For guidance in preparing images for a Web page, see the article on Using Digital Images.

Changing Filenames
An image's filename must match its file type: Aa GIF image must end in .gif, and a JPEG in .jpg. But you can't change the file type simply by changing the filename extension. For instance, to change an image from JPEG to GIF format, you need to open it in an image-editing program, and then choose the new format in the Save As dialog box.

Click the mouse to place the cursor at the point where you want the image to appear. Then choose Insert - Image from the menubar. Navigate to the image, click Open, and watch your image appear on the Web page.

Your page might be more useful if the image were aligned to the left, with the text next to it on the right. To align the image to the left of the text, first select the image, then choose Align - Left from the popup menu at the lower right of the Properties window.

Save the page that now contains text and a picture, by choosing Save As from the File menu, and saving the page into your samplesite folder.

Insert Multimedia
Most Web sites rely on text and images to carry the message to the audience. But in some cases, the user needs to hear a sound, see an animation, or watch a video clip to fully understand the content. These kinds of media are more difficult to prepare, and more difficult to receive over the Web, than their static counterparts. Multimedia may be used sparingly, and Dreamweaver can handle these media well.

Inserting a video, sound, or animation into a Web page works very similarly to inserting an image. First, place your cursor at the point where you want the media to appear. Choose Insert - Media from the menubar, and then choose the type of media you want to insert.

To insert a Flash animation, for instance, choose Insert - Media - Flash from the menubar, and select a Flash .(swf) file. The animation will appear as a gray box in the Dreamweaver document window – you won't see the animation playing in Dreamweaver unless you click the green arrow in its Properties window.

Preparing Media Files
Each type of media that you want to import into Dreamweaver - animation, video, and sound - must be prepared and saved in a format that works with Dreamweaver as well as the browsers of your audience. You may use the files already prepared for you at the Web Wizard Web site.

To see the page with its animation, you must choose File - Preview in Browser - Internet Explorer (or Netscape Navigator) from the menubar.

Plug-Ins
All of the multimedia types require browser plug-ins in order to work. For instance, without the Flash Player, your browser will not be able to display the sample animation that's that is part of this exercise. Text and images require no browser plug-ins, while animation, sound, and video do. Make sure you have the latest Flash and QuickTime plug-ins installed in your browser, so that you can try out these samples. You may can download these for free at http://www.macromedia.com, and http://www.apple.com/quicktime.

To insert a sound on this page, place the cursor where you want the sound controller to appear. Then choose Insert - Media - Plugin from the menubar. Select the sound file, click Open, and watch as a small square gray plug-in icon appears.

To make the sound easier to control, stretch this icon out so that it's about 200 pixels wide. When the page displays in the browser, the icon will be replaced by a standard sound controller bar.

Before you add a video to your Web site, you should save the page you are working on and create a new page. It would be confusing to the viewer to see an animation, hear a sound, and watch a video all on the same page. To create a new page, choose File - New from Dreamweaver's menubar, make sure Basic HTML page is selected, and then click the Create button. You will see a new Dreamweaver document window appear, with the text cursor blinking in the upper left corner. Enter a heading for this page, and add some text that explains the video.

To insert the video, place the cursor where you want the video to appear. Then choose Insert - Media - Plugin from the menubar. Select the video file, click Open, and watch as a small square gray plug-in icon appears. Stretch this icon out to fit the size of the video plus 16 pixels. The extra 16 pixels are for the controller bar. If you are using the sample shark video from my Web site, set the size of the plug-in icon to 160 pixels wide and 136 pixels high. It's easiest to enter these numbers directly into the Properties window for the video.

Preview this page in the browser. The video should play automatically, with a standard controller bar at the bottom. Save this second Web page with a proper filename. In this example, we'll call it shoal.html. Make sure you save it in the same folder as the other Web page.

Link the Pages
Your Web site now consists of two pages. You need to provide a way for the viewer to get from one page to another, with a hyperlink. Open the first page in Dreamweaver. Select a word or phrase to link from. Then choose Modify - Make Link from the menubar.

In the Select File dialog box, choose the file you want to link to. We are linking to the second page we made, that which we named shoal.html, so we choose that file.

When the dialog box disappears, you will notice that the words you selected have turned blue. When clicked by the viewer in the browser, these words will link to the other Web page. Preview the page in your browser and try it.
You now have a Web site with two multimedia pages and a link. And you are finding your way around Dreamweaver, learning the ropes as you take this vessel on an introductory sail.

Dreamweaver can take you on a much longer voyage as a Web author, past the shores of formatting tools, colors, forms, flashy buttons, templates, style sheets, site management, and many other Web features. Future articles in this series will cover some of these more advanced aspects.