Dreamweaver Tutorial

In This Document:



 

Download Tutorial Files

Before you start the tutorial, you will need to download some documents onto your hard drive. Make a directory on your hard drive called zoology_web. The folder can be anywhere but remember where you created it. Download the files into the new zoology_web folder. Click here to download these files. You will need to extract them to the same directory.

Publish on the Web

Use this document to create and publish a web site using Dreamweaver.

The Web is a communications medium with unique properties. As with any method of communication, it is important to determine your goal (what is the purpose of your site), your audience (who are they, what do they know, what do they need to know), and your objectives (what information will your site convey and how). The Web differs from other media in that it allows for interactivity: users can click on linked text and images to move non-linearly through the material, focusing on the content that appeals to them. The Web also allows publishers to add images, sound, video, and animations to their pages.

In this lesson you will learn how to plan and design your page to take advantage of the characteristics of the Web, use Dreamweaver web publishing software to create your page, and then put your pages on the Web.

There are three main steps in the web publishing process:

The tools you will use are:

 

Plan Content and Design

The content and design of a site work together, but the content should drive the design: you have to know what you want to say before you can present it. In this section, you’ll think about the content of your site and then you’ll look at other web pages to learn how to effectively organize and present your material.

Plan Content

The following questions will help you determine your content. Answer them and note any other information that might be important.

  1. What is the purpose of your site?
  2. Who is your audience? What do they know? What do they need to know? What kind of network connection do they have (modem or Ethernet)?
  3. What do you want your audience to learn from your web site?
  4. What subsections would you divide your content into so the flow of information is clear, logical, and useful to your audience?

The answers to these questions will help you determine and organize your content.

Plan Design

You’ve already visited a number of web sites, and you’ve probably formed opinions about each site: what you liked; what you didn’t like; how easy or difficult it was to find the information you wanted. Web sites can be evaluated using three criteria of effective design: unity, readability, and control.

In this section you’ll look at different web sites and evaluate their design based on the above criteria. Look at each site as both a producer and consumer of web information. Here are some questions you might answer about the sites:

Unity:

Readability:

Control:

These issues will be addressed throughout the second step of web publishing: Create a Web site.

 

Create a Web Site

Web publishing is evolving the same way that word processing evolved. In the early days of word processing, users typed codes when they wanted special formatting. To create bold text, for example, the writer had to provide codes to tell the printer when to start bolding text and when to stop. Then the software became sophisticated enough that writers didn’t need to know any special codes to format text—they just needed to know which buttons to click.

Many web publishers use code to create their web pages, but there are sophisticated programs that allow you to write web pages without knowing these codes, or tags. In this lesson, you will use Dreamweaver, a sophisticated web publishing application, to write your pages and learn a little about the behind-the-scenes code, called Hypertext Markup Language (HTML).

As you create your site in Dreamweaver, you will preview your work in Internet Explorer to see how your pages will look once you put them on the Web. You’ll gain a foundation for building more advanced pages as you learn the basics by creating a web site for the fictional Zoology Department.

Launch Dreamweaver

The first step is to launch Dreamweaver.

  1. Locate and start Dreamweaver. Dreamweaver should be found undern All Programs or the Network Applications folder in the Start Menu. If a windows showing different create options appears, click File, New. Accept the default selection and click Create. An untitled Dreamweaver document window appears with two Dreamweaver panes open: the Properties Bar and the Site Manager.

    2. You won’t need the Site Manager (below), so you can minimize it.

  2. Minimize the Site Manager pane by click the right-pointing arrow in the middle of its border.

Title and Save Your Web Page

Give your page a descriptive title. The clearer the title, the more likely people will find your page when they are searching the Web for the kind of information you are presenting.

  1. From the Modify menu, choose Page Properties… The Page Properties dialog box appears.

  2. In the Title field, type the title of your document: NU Zoology Department

The title is what appears in Internet Explorer’s title bar when your page is viewed on the Web. You’ll see it in a moment. Leave the rest of the fields blank. You’ll return to this window later to change text and background colors.

  1. Click OK to close the Page Properties dialog box.

    2. On your hard disk is a folder called Zoology_Web. You’ll save all of your web files, including this document, to that folder.

  2. From the File menu, choose Save. A Save As dialog box appears.
  3. Using the dialog box, locate and open the Zoology_Web folder on your hard disk.

    4. Now you need to name the file that you’re working on. This name is different than the title; it won’t appear on your web page, but you’ll see it as you organize and link your web files.

  4. Name your page index.htm

    5. The main page in a web site is often called index.htm or index.html. This naming scheme makes it easy for your visitors to find your page. You’ll learn about the reasons in the third step of the web publishing process: Transfer Files to the Web.

  5. Click Save.
  6. From the File Menu, Preview in Browser submenu, choose iexplore. Your page appears in Internet Explorer, with the title in the title bar.

Format Text

You are now ready to start writing your web page. The first thing you’ll do is format the first words of your text to appear as large, bold text, called a header.

  1. Switch back to Dreamweaver.
  2. In the main document window, type: Northwestern University Zoology Department

    3. In this section you’ll use Dreamweaver’s Properties Bar. Among other things, the Properties Bar allows you to change the font and formatting. If the Properties Bar is not visible on your screen, from the Window menu choose Properties.

  3. Select (highlight) the text you typed. Using the Properties Bar, click the down arrow in the Format field to reveal the dropdown menu, and choose Heading 1.

    4. There are different sizes of headings used on the Web. Heading 1 is the biggest, Heading 6 is the smallest. For comparison, create a smaller heading for the next line of text.

  4. In the Document window, click under the heading to deselect it.
  5. Press Enter and type a second line of text, like a subtitle (for example: Your complete zoological guide from Aardvark to Zebra).
  6. Select (highlight) the second line of text and from the Format dropdown menu in the Properties Bar choose Heading 3.

    7. Next you’ll write introductory text about this site.

  7. Click at the end of your subtitle to deselect it. Press Enter and change the format to Paragraph, to indicate that you’re starting a paragraph.
  8. Type a short paragraph about the Zoology Department.

    9. You can change the appearance of your text by using the Properties Bar.

  9. Select some text in the paragraph and click the Bold icon in the Properties Bar. The selected text appears bold.
  10. To revert back to normal, non-bold text, click the Bold icon again, or from the Edit menu choose Undo.
  11. To change the font size, select some text and from the Size dropdown menu in the Properties Bar choose a different font size. Scroll to see the range of values and sizes for fonts.
    12.  

    Just like heading sizes, there is a range of font sizes. Font sizes are listed in numerous measuring schemes. The numbers are listed in the box immediately right of Size. The unit scheme is listed in the box immediately right of the number. This allows you to select font sizes by pixel count, by point coint and various other methods in addition to relative sizing. Font point size 16 is the standard, or default, font size.

  12. To change the text color, select text and click the gray square to the right of the Size dropdown menu in the Properties Bar. A grid of colored squares appears, and the cursor changes to an eye dropper.
  13. Click the eyedropper on the desired color. The field to the right of the color swatch reflects the code web browsers need to correctly display the color you’ve chosen.
  14. Click off of the text to deselect it. The previously selected text appears in the new color.

Check Spelling

All the formatting in the world can’t hide spelling errors.

  1. From the Text menu choose Check Spelling. The Check Spelling dialog box appears.
  2. Use the dialog box to correct any errors. If you have no spelling errors, a dialog box appears telling you that spell check is complete.

     

View the HTML Source Code

 

    You can create an entire web site in Dreamweaver without seeing the behind-the-scenes code, or HTML. But if you understand HTML, you can copy the code from one page to another, which allows you to make changes more quickly than if you used Dreamweaver’s other features. You can also view the code of pages on the web to learn techniques that other publishers use to lay out their content. You can then copy that code and use it in your own site. Later in the exercise, you’ll copy code from your own site; on the last page of this document are instructions on how to view the HTML of other web pages.

    Now that you’ve made formatting changes, you can compare the way your page looks in Internet Explorer with the behind-the-scenes code, or HTML. First, save your document and preview it in Internet Explorer.

  1. Save your work.
  2. From the File menu, Preview in Browser submenu, choose iexplore, or press F12. Internet Explorer reloads your page.
  3. Look at the different formatting on your page.
  4. Switch back to Dreamweaver.
  5. To view the HTML code click on the Code tab shown below.

    6. The text you wrote appears in black text, and the code, or HTML tags, appear in blue. Dreamweaver uses these tags to tell the web browser how to display the contents of your page. For example, your first heading is enclosed by the opening tag <h1> and the closing tag </h1>; these tags tell the browser to display the enclosed text as a Heading 1, a style with a large, bold font.

    If you understand tags, you can easily edit your document in the HTML Source window and use the code behind other pages on the Web. You’ll edit the source code later in the exercise.

  6. Click the Design tab to switch out of the HTML code view.

    7.  

     

Lay Out Text

    Lists and alignment can help visitors quickly find the information they want. In this section you’ll learn how to make lists and align text.

  1. After your paragraph, press Enter and type a list of three items. These items could be job responsibilities, services provided by a department, or the name of three animals studied by the Zoology Department.

  2. Select the three lines and click the Unordered List button in the Properties Bar. The items appear in a bulleted list.
  3. With the items still selected, click the Ordered List icon, which is to the right of the Unordered List button. The items appear in a numbered list.

    4. You can also lay out text by aligning it .

  4. Select the headings at the top of your page and click the Align Center button in the Properties Bar. The headers are centered on your page.
  5. Preview your work in Internet Explorer. From the File menu, Preview in Browser submenu, choose iexplore; or press F12.
  6. Switch back to Dreamweaver.
  7. To view the HTML tags click the Code tab at the top left; OR press F10.

    8. The list is enclosed by <ul> and </ul>, for a bulleted, or unordered list, or <ol> and </ol> for ordered, or numbered, list. Each item in the list is enclosed by <li> and </li> tags, which designate each list item.

  8. Click on the Design tab to switch out of Code view.

    9.  

     

Add an Image

    To add an image to a Web document, you need to point to where that image is located. In this section you’ll add an image that’s located on your hard disk in your Zoology_Web folder (pbear.jpg).

  1. Click below your list and press Enter.
  2. From the Insert menu, choose Image. A Select Image Source dialog box appears.
  3. Using the dialog box, locate and select the image Pbear.jpg in the Zoology_Web folder on your hard disk. The image appears on your web page.
  4. Preview your work in Internet Explorer.
  5. Switch back to Dreamweaver and view the HTML Source code for images.

    6. The image tag looks like this:
    <img src="Pbear.jpg" width="266" height="151">
    The tag tells the browser the image’s name (Pbear.jpg), location (in the same directory as the page that displays it, index.htm), and size (266 pixels wide by 151 pixels tall). (A pixel is one dot on the computer screen.

Delete an Image

    In the next section you’ll learn how to use tables to align text and images. The polar bear might look even better in the table layout. So go ahead and delete the image.

  1. In the Document window, click the image. The image is selected in the Document window and the <img> tag appears in highlighted in the lower left corner of the document window.
  2. Press the Delete key. The image and its tag disappear.

    3.  

Lay Out with Tables: Create a Table

    Another way to lay out text and images is to use tables, grids with rows and columns. In this section you’ll make a table that provides visual and textual information about different animals.

  1. Click your cursor below your list or anywhere you’d like to insert a table.
  2. From the Insert menu, choose Table. An Insert Table dialog box appears.

    3. Make a table with two columns and two rows.

  3. In the Rows: field enter 2. In the Columns: field enter 2.
  4. In the Width field, enter 400, and from the Width pop-up menu, choose Pixels.

    5. You can leave the other settings as they are.

  5. Click OK. A table with the specified number of rows and columns appears.

Lay Out with Tables: Add Images

    You can add images to a table by clicking in the cell where you want the image to appear and locating the image you want to add, as you did earlier in this lesson.

  1. Click in the upper-right cell.
  2. If the Insert Bar is not visible, from the Window menu, choose Insert.

  3. Click the Insert Image icon in the middle of the Insert Bar. A Select Image Source dialog box appears.
  4. Locate and select Pbear.jpg in the Zoology_Web folder. An image of a polar bear appears in the cell.

    5. The cell sizes are skewed, but you’ll adjust them in a moment. First, insert another image in the cell below the polar bear image.

  5. Click in the cell below the cell with the polar bear image. Using the Insert menu or the Insert Bar, locate and select Tigers.jpg in the Zoology_Web folder. An image of tigers appears in the cell.

    6.  

     

Lay Out with Tables: Edit Table

    The cells with the images are wider than necessary. You can change the cell size to get rid of excess white space inside the images’ cells.

  1. Place the cursor over the line dividing the columns. The cursor turns into a two-headed arrow.

  2. Click and drag the two-headed arrow to the right to the middle of the table. The cells adjust so that the images just fit the width of the second column.

    3. It’s easy to adjust the number of rows and columns in a table. Add a new row to your table and insert another image.

  3. Click in one of the rows of your table.
  4. From the Modify menu, Table submenu, choose Insert Row. A new row appears above the row you selected.
  5. Click in the second column of the new row and insert Rhinos.jpg, which is in the Zoology_Web folder. The image appears in the cell.
  6. Save your work and preview in Internet Explorer.

    7.  

Lay Out with Tables: Add Text

    The cells next to your three images are blank. Fill them with fascinating information about your specimens. To do this:

  1. Switch back to Dreamweaver.
  2. Click in each blank cell and type some text about the respective animal.
  3. Format the text. Try the Horz and Vert alignment options in the Properties Bar. Change the text size, color or style. If you don’t see the Horz and Vert alignment options, you may not be seeing the entire Properties Inspector. Click on the triangle in the lower right corner of the Properties Inspector to display all of your options.
  4. To single space text, hold down the Shift key and press Enter before you type the text you want to single-space.
  5. Save your work and preview in Internet Explorer.

    6.  

Change Text and Background Colors

    You know how to change the color of selected text, but in this section you’ll learn how to set up your page’s standard text color as well as background and link colors. You’ll use the Page Properties dialog box, which you used earlier to title your page.

  1. Switch back to Dreamweaver.
  2. From the Modify menu, choose Page Properties. The Page Properties dialog box appears.

  3. To change the text color, click the square next to the Text color: field. A grid of colored squares appears, and the cursor changes to an eye dropper.
  4. Use the eye dropper to pick the text color.

    5. Design Note: Readability and Control: Colored text can be mistaken for links. Choose your color scheme so that links stand out from rest of text and both text and links stand out from the background.

  5. Use the same procedure in steps 1 and 2 to change the background color.

    6. You can also change the color of links, active links, and visited links. An active link is a link just when the user clicks it. A color change provides the user with a visual indication that the browser has received the command. A visited link is one that the user has followed. A color change provides a visual reminder to the user that he or she has already visited the linked page.

  6. To change the color of links, active links and visited links, click on the Links category and folow the procedure in steps 1 and 2.
  7. When you have selected the desired text and link colors, click OK. The text and background appear in the colors you selected.

    8. You haven’t made any links yet. You’ll see what the link color looks like in the "Link to Other Pages" section.

    If you changed the color for any text using the Properties Bar, those changes will override general page color choices.

  8. Save your work. If you like, preview in Internet Explorer.

    9.  

     

Create a Page from a Word Document

    Web publishers often modify existing documents for use on the Web. On your hard disk in the Zoology_Web folder is a document that lists fascinating zoological facts. You’ll import it into Dreamweaver and format it for the Web.

  1. From the Windows Start button, find and launch Microsoft Word.
  2. From the File menu, choose Open.
  3. In the Files of type pulldown menu, select All Files (*.*). Find the file zoofacts.txt on your hard disk and open it.
  4. Copy the contents of zoofacts.txt: From the Edit menu choose Select All, and then from the Edit menu choose Copy.
  5. Switch to Dreamweaver and from the File menu, choose New to open a new document window.
  6. From the Edit menu, choose Paste as Text. The text appears in the new document window.

    7. You lose formatting when you import a word processing document into Dreamweaver. When you Paste Formatted the text retains all of its formatting. When you Paste Text you lose all of your formatting. When you simply Paste (Right-Click, Paste or Ctrl-V) the text retains its bold and italics as well as the line breaks. You can select Paste Formatted and Paste Text through the Edit menu.

    You’ll want to give your new document a clear and descriptive title so your viewers can find it in a search for related information. You can title your page using the Page Properties dialog box or the HTML Source window.

  7. Title your page. From the Modify menu, choose Page Properties and type the title of the page (e.g., "Fascinating Zoological Facts"). OR in the Code view tab replace the current title, "Untitled Document" (on line 3), with your new title.
  8. Save your work in Dreamweaver. A Save dialog box appears.
  9. Using the dialog box, name your document zoofacts.htm and save it in the Zoology_Web folder on your hard disk.

    10. Word processing documents often contain hidden formatting characters that interfere with the way the imported text appears on the Web. To eliminate these characters, the document you copied, zoofacts.txt, was saved as Plain Text before it was put on your disk.

    In the future, to save your own Word document as Plain Text, from the File menu, choose Save As… A Save dialog box appears. From the dropdown menu in the Save File as Type: field, choose Plain Text. An alert box lets you know that you may lose some formatting, but you’ll lose it when you import it into Dreamweaver anyway, so that’s nothing to worry about. Just click OK.

     

     

Copy HTML Code

    Good web publishers visually connect the pages within a site by using the same color scheme and layout. The visual similarity, or unity, among the pages makes it easier for the user to know when he or she has left the site.

    You have just created a second page for your site, but it doesn’t have the same color scheme as the first page. As you did earlier, you can use Dreamweaver’s features to select the same colors for the background, text, and links. Or you can save time by copying the HTML code from the formatted page to the new page.

  1. Switch to index.htm: From the topleft of the edit window, select the tab labeled index.htm.
  2. Open the HTML Code view.

    3. The color choices for background, text, and links are contained in the opening body tag. You’ll copy that tag and paste it into zoofacts.htm.

  3. Scroll to the top of the HTML Source window and select the body tag . (The body tag is on line 9 and looks something like this: <body bgcolor="#FFFFFF" text="#336633" link="#6600FF" vlink="#CCCCFF" alink="#6666FF">) Make sure to include the angle brackets (<>) in the selected text.

    4. The colors appear in a code that the browser can understand, called a hexadecimal number. The different colors are for the background color (bgcolor), the text color (text), the link color (link) the visited link color (vlink), and the active link color (alink).

  4. Switch to zoofacts.htm by selecting the tab labeled zoofacts.htm.
  5. In HTML code view for zoofacts.htm, scroll to the top and select the tag <body bgcolor="#FFFFFF"> on line 9.
  6. To paste the selected text, use the keyboard combination: Ctrl+V. Or from the Edit menu, choose Paste - make sure it overwrites the previous body tag.
  7. Save zoofacts.htm to see the pasted formatting.
  8. Format the rest of the page as you desire. To change formatting from one line to the next, insert paragraphs as needed.
  9. Save your work.

    10.  

     

Create a Link

    Now that you have two pages, you can link them. You’ll link to zoofacts.htm from your main page, index.htm.

  1. In Dreamweaver, switch to index.htm.
  2. Type some text about zoos to use as your link.
  3. Select the text that you want to link to zoofacts.htm.

    4. Design Note: Control. The text you use for your link should be brief but descriptive, giving your visitors an idea of where the link will take them even before they click it. To link to a page that provides the locations of zoos, the link click here for more information lacks detail; the link zoo locations is clear and concise.

    You’ll use the Properties Bar to make the link. If you can’t see it, switch to the Design view by clicking the Design tab at the top left..

  4. In the Properties Bar, click on the Browse for File icon (the yellow folder). A Select HTML File dialog box appears.

  5. Using the dialog box, locate and select the file zoofacts. The selected text is underlined and appears in the link color you chose. In the Properties Bar, the Link field reads: "zoofacts.htm."

    6. To check if the link works properly, you have to view it in Internet Explorer.

  6. Save your work and preview in Internet Explorer.
  7. Click your link. The link briefly appears in your chosen active link color, and then zoofacts.htm appears.
  8. Click the Back button. The link appears in the color you chose for visited links.

    9. If zoofacts.htm doesn’t appear, repeat the steps in this section. You can also check your HTML Source to determine the problem.

    Your code should look like the following line:
    <a href="zoofacts.htm">zoological facts</a>.
    This code tells Internet Explorer that when a user clicks on the link zoological facts it should find and display zoofacts.htm, which is in the same directory as index.htm. This link is called a relative link because the location of the linked document, zoofacts.htm, is given in relation to the linking document, index.htm.

  9. Switch back to Dreamweaver for final additions to your pages.

    10.  

     

Create a Footer

    Many web publishers put contact information in a footer at the end of their page. This footer provides users with control: they have a person to contact in case they can’t find what they’re seeking. The footer also contains the date the page was last updated, letting visitors know how current the information is. In this section, you’ll create a footer for index.htm.

    The first thing you’ll do is add a line, a horizontal rule, to separate the footer from the rest of your page.

  1. In Dreamweaver, scroll to the bottom of index.htm and click your cursor.
  2. Press enter to give yourself a line of space and from the Insert menu, choose Horizontal Rule. A selected Horizontal Rule appears on your page.
  3. Click on the line under the Horizontal Rule. Your cursor appears on the first line of the footer.
  4. Type your name.
  5. To single-space the footer text, hold down the Shift key and press Enter. The cursor appears on the line just below your name.
  6. Type your e-mail address and your phone number, separating the two with a comma or other punctuation. Press Shift and Enter.
  7. Type: Zoology Department, Northwestern University. Press Shift and Enter.
  8. Type: Last Modified: followed by today’s date (i.e. Last Modified: 9-9-99).

    9.  

     

Create a Footer: Add Links

    Now you’ll link some of the text in your footer. First, you’ll make your e-mail address a link so that visitors can click it and send mail to you.

  1. Select your e-mail address.
  2. In the Properties Bar, in the Link field, type: mailto:email@northwestern.edu where email@northwestern.edu is your e-mail address.

  3. Press Enter. Your e-mail address appears as a link.

    4. Next you’ll link to Northwestern’s home page so your visitors can easily access other NU web resources. To do this, you need to know the address for the home page: http://www.northwestern.edu.

  4. In the footer, select the text, "Northwestern University."

    5. Since the Northwestern home page is on the Web, not on your hard drive, you can’t use Dreamweaver to browse for the page. You’ll have to provide its full, or absolute, address to make an absolute link.

  5. In the Link field in the Properties Bar, type:
    http://www.northwestern.edu and press Enter. "Northwestern University" becomes a link.
  6. Test your links in Internet Explorer.

    7. If your links don’t work, repeat the steps above. Double-check the information in the Link field.

     

Add Footer to Another Page

    To provide unity to your site and control to your visitors, you should include the footer on every page in your site. Instead of retyping the footer, you can copy its code and paste it into the other pages.

  1. Switch back to Dreamweaver.
  2. In the HTML code view for index.htm, select the code for the footer from the horizontal rule (<hr>) through the Northwestern link. Do not include "Last Modified" line.

    3. The purpose of the last modified date is to give the actual date when a page was last updated. That date will vary from page to page, depending on when you modify each page of your site. After you paste the footer onto another page, add the correct last modified date.

  3. From the Edit menu, choose Copy to copy the code.
  4. With zoofacts.htm active, scroll to the bottom of the HTML Source window. Click the cursor before the closing body tag (</body>) at the end of the page.
  5. From the Edit menu, choose Paste.
  6. Save zoofacts.htm. The footer appears on zoofacts.htm.
  7. On a last line of the footer, add the last modified date.

    8.  

     

Link to Your Home Page

    To provide greater control to your visitors, you should make it easy for them to navigate among the pages in your site. One way to facilitate navigation is to link each supporting page to the home page. In this section, you’ll link zoofacts.htm to index.htm.

  1. In the Document window for zoofacts.htm, select "Zoology Department" in the footer.
  2. In the Properties Bar, in the Link field type index.htm and press Enter. "Zoology Department" appears as a link.
  3. Save your work and test your link in Internet Explorer.

Now that you've finished building your page its time to Publish your Web Page!

Last update: October 19, 2005