Create a Web Folder

1. On your network folder, create a new folder just for web stuff. This is where you will be saving all of your work.
   
   It’s very important when you are working on Web pages to collect together all of the files that will become part of your Web site, including Web pages, images, and other multimedia, into a single folder on your hard drive before you start working with them.

Launch Dreamweaver
The next step is to launch Dreamweaver.

1. Locate and start Dreamweaver. An untitled Dreamweaver document window appears with (up to) five other Dreamweaver windows: Object Palette, Property Inspector, Style Palette, History Palette, and Launcher.
   
   
2. For now, close all the windows except the Object Palette and the Property Inspector.

Title and Save Your Web Page
Give your page a descriptive title. The title is what appears in Netscape’s title bar when your page is viewed on the Web. Leave the rest of the fields blank for right now..

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: Tammy Thiem's Personal Homepage (or whatever).
   
   
3. Click OK to close the Page Properties dialog box.
   
   
4. From the File menu, choose Save. A Save As... dialog box appears.
   
   
5. Using the dialog box, locate and open your web folder on your network drive (see above).
   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.
   Note: The way you name your Web pages can affect how well they work once you place them on the Web.
   
   Here are some rules of thumb to follow that will help you avoid problems later on:
   
   • Don't use spaces or special characters, such as those found above the number keys on the keyboard, in your file names. You can use dashes and underscores.
   • Always use a 3- or 4-character file extension for every file you use on the Web. In the case of a regular Web page, always use .htm or .html.
   • We recommend you use all lower-case letters; most Web servers are case-sensitive.
   
   
6. Name this page index.html
   The main page in a web site is often called index.html, home.html or default.html. This naming scheme makes it easy for your visitors to find your page.
   
   
7. Click Save.
   

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. In the document window, type: My Web Page
   In this section you’ll use Dreamweaver’s Property Inspector. Among other things, the Property Inspector allows you to change the font and formatting. If the Property Inspector is not visible on your screen, from the Window menu choose Properties.
   
   
   
   
2. Select the text you typed by dragging over it to highlight it. Using the Property Inspector, click the down arrow (on the PC) or the double-arrow (on the Mac) in the Format field to reveal the popup menu, and choose Heading 1.
   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.
   
   
3. In the Document window, click under the heading to deselect it.
   
   
4. Press Enter and type a second line of text, like a subtitle (for example: Cool Stuff About Me)
   
   
5. Highlight the second line of text and from the Format popup menu choose Heading 3.
   Next you’ll write introductory text about this site.
   
   
6. Click at the end of your subtitle to deselect it. Press Enter and check the Property Inspector to see that the format is set to Paragraph, to indicate that you’re starting a paragraph.
   
   
7. Type a short paragraph about who you are and what you do.
   You can change the appearance of your text by using the Property Inspector.
   
   
8. Highlight some text in the paragraph and click the Bold icon in the Property Inspector. The selected text appears bold.
   
   
9. To revert back to normal, non-bold text, click the Bold icon again, or from the Edit menu choose Undo.
   
   
10. To change the font size, highlight some text and from the Size popup menu choose a different font size. Scroll to see the range of values and sizes for fonts.
    
    
    
    Just like heading sizes, there is a range of font sizes. Font sizes range from 1 to 7, but this time 1 is the smallest and 7 is the largest (the reverse of heading sizing scheme). Font size 3 is the standard, or default, font size. You can also change the size relative to the default size: +1 increases the standard font by one increment; and –6 decreases the standard font by six increments.
    
    
11. To change the text color, highlight text and click the gray square to the right of the Size popup menu in the Property Inspector. A grid of colored squares appears, and the cursor changes to an eye dropper.
    
    
12. 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.
    
    
13. Click off of the text to deselect it. The previously selected text appears in the new color.
    Note: All the above text formatting commands are available under the Text menu.

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, making changes faster 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.

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

1. Save your work.
   
   
2. From the File menu, Preview in Browser submenu, choose Netscape.
   Netscape opens and reloads your page.
   
   Note: If you do not see "Netscape" in your list of browsers, you will have to configure Dreamweaver to include your preferred browser in the list. Under the Edit menu, see Preferences -- Preview in Browser.
   
   
3. Look at the different formatting on your page.
   
   
4. Switch back to Dreamweaver.
   
   
5. From the Window menu, choose HTML Source. The HTML Source window appears displaying the source code for your page.
   
   
   
   The text you wrote appears in black text, and the code, or HTML tags, appear in another color. 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.
   
   
6. Click the close box (at the top left on the Mac, or at the top right on the PC) to close the HTML Source window.

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, each separated by a Return. These items could be job responsibilities, services provided by a department, or the names of your three cats.
   
   
2. Highlight the three lines and click the Unordered List button in the Property Inspector. The items appear in a bulleted list.
   
   
   
   
3. With the items still highlighted, click the Ordered List icon, which is to the right of the Unordered List button. The items appear in a numbered list.
   You can also lay out text by aligning it.
   
   
4. Highlight the headings at the top of your page and click the Align Center button in the Property Inspector. The headers are centered on your page.
   
   
5. Save your work and Preview it in Netscape. From the File menu, Preview in Browser submenu, choose Netscape.
   
   
6. Switch back to Dreamweaver.
   To view your HTML code, you can use the mini-launcher, which is in the lower right corner of your document window. The mini-launcher has the same icons as the Launcher, which you closed at the beginning of this lesson.
   
   
7. To view the HTML tags, from the Window menu choose HTML Source; OR click the HTML icon (it looks like this: < >) in the mini-launcher in the bottom-right of the Document window.
   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. Close the HTML Source window.

Use the History Palette
The History Palette in Dreamweaver gives you the ability to back up as far as you like in the creation of your page; in essence, it gives you "unlimited undo". This feature is very useful if you get far along in your page development and decide you didn't really want to make a whole series of changes.

1. If you don't see your History palette, bring it to the front by selecting History from the Window menu.
   
   
   
   
2. Scroll through the list of items in the History palette. All of the actions that you've done so far are recorded here, even down to Backspaces you've made when typing.
   
   
3. At the bottom of the list, find the small slider on the left side (indicated by the arrow above) and drag it up slowly, one item at a time. As you scroll up past a step, the step will gray out and your page
   will revert to the way it was before you performed the step.
   Note that if you back up one or more steps, then perform other operations, you will lose all the history after that point, and you will not be able to recover those steps.

Add an Image
To add an image to a Web document, you need to point to where that image is located. Be sure to save your page before adding an image.

1. First you need an image to insert. If you don't already have one in your web folder, go to: http://www.ripon.edu/faculty/thiemt/classpage/images.htm and save one of the images there to your web folder.
   
   
2. Click on the page where you'd like to insert an image.
   
   
3. From the Insert menu, choose Image. A Select Image Source dialog box appears.
   
   
4. Using the dialog box, locate and select an image from the web folder on your local hard drive. The image appears on your web page.
   
   
5. Save your work and Preview it in Netscape.
   
   
6. Switch back to Dreamweaver and view the HTML Source code for images.
   The image tag looks like this:
   <img src="filename.jpg" width="266" height="151">
   The tag tells the browser the image’s name (filename.jpg), location (in the same directory as the page that displays it, index.html), and size (266 pixels wide by 151 pixels tall). (A pixel is one dot on the computer screen. Its size is roughly 1/72 of an inch.)

Delete an Image
Sometimes you want to get rid of an image.

1. In the Document window, click the image. The image is highlighted in the Document window and the <img> tag appears in bold in the lower left corner of the document window.
   Note: Instead of clicking on the image to select it, you can also click the tag <img> found in the lower left corner of the Document window.
   
   
2. Press the Delete key. The image and its tag disappear.

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: 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.
   Design Note: 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 3 and 4 to change the background color.
   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. Use the procedure in steps 3 and 4 to change the color of links, active links and visited links.
   
   
7. When you have selected the desired text and link colors, click Apply to see your changes. Without dismissing the dialog, the text and background of your page appear in the colors you selected. Make further color changes, or click OK to accept the colors you've chosen. If you changed the color for any text using the Property Inspector, those changes will override general page color choices.
   
   
8. Save your work. If you like, preview in Netscape.
   Dreamweaver 3 provides a number of preset color schemes that use "Web-safe" colors, or colors that will appear the same on all types of platforms and browsers.
   
   
9. Under the Commands menu, choose Set Color Scheme… You will see the following dialog box.
   
   
   
   
10. Select a background color from the left list, and select text and link color combinations from the right list. A sample of the color scheme will appear in the right-hand side of the dialog. When you have a combination you like, click OK to apply the color scheme to your page.

Create a Page from a Word Document
Web publishers often modify existing documents for use on the Web.

1. Find and launch Microsoft Word.
   
   
2. Open a Word document.
   
   
3. Copy the contents of contents of the document: From the Edit menu choose Select All, and then from the Edit menu choose Copy.
   
   
4. Switch to Dreamweaver and from the File menu, choose New to open a new document window.
   
   
5. From the Edit menu, choose “Paste as Text”. The text appears in the new document window.
   You lose formatting when you import a word processing document into Dreamweaver. When you Paste as Text, you lose most of your document’s formatting but retain the line breaks. When you just Paste, you lose all formatting, including line breaks.
   
   
6. Title your page. From the Modify menu, choose Page Properties and type the title of the page (e.g., “More Fascinating Facts About Me”). OR in the HTML Source window replace the current title, “Untitled Document” (on line 3), with your new title.
   
   
7. Save your work in Dreamweaver. A Save dialog box appears.
   
   
8. Using the dialog box, name your document (remember the naming rules from the top of this page) and save it in your web folder on your local drive.
   
   
9. Another way to make a web page from a Word document is to Save as HTML. Not all versions of Word include this feature. Under the File menu, look for Save as HTML...
   
   
10. If you can save your Word document as HTML, you can then open it in Dreamweaver and make changes. One thing to note is that Word tends to add lots of extraneous HTML code when it saves a document. Fortunately Dreamweaver 3 has a Clean Up Word HTML feature.
    
    
11. In the Commands menu, select Clean Up Word HTML. You'll be prompted for the correct version of Word and you'll be given a list of changes that will be made to the document. In most cases, you should accept these changes. Dreamweaver writes much better HTML than Word.
    
    
12. Save your file.
    

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.html: From the Window menu, choose index (PC) or index.html (Mac).
   
   
2. Open the HTML Source window.
   The color choices for background, text, and links are contained in the opening body tag. You’ll copy that tag and paste it into your second page.
   
   
3. Scroll to the top of the HTML Source window and highlight the body tag . (The body tag looks something like this: <body bgcolor="#FFFFFF" text="#336633" link="#6600FF"
   vlink="#CCCCFF" alink="#6666FF">) Make sure to include the angle brackets (<>) in the highlighted text.
   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. To copy the code, type Ctrl+C on a PC or Command-C on a Macintosh.
   
   
5. Switch to your second page from the Window menu.
   
   
6. In the HTML Source window for your second page, scroll to the top and highlight the tag <body bgcolor="#FFFFFF">.
   
   
7. To paste the highlighted text, use the keyboard combination: Ctrl+V on a PC, or Command-V on a Mac.
   
   
8. Switch back to the document window to see the new formatting.
   
   
9. Save your work.

Create a Link
Now that you have two pages, you can link them. You’ll link to your second page from your main page, index.html.

1. In Dreamweaver, switch to index.html.
   
   
2. Type some text about the content of the second page to use as your link.
   
   
3. Highlight the text that you want to link to your second page.
   Design Note: 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 reading list for your class, the link click here for more information is not helpful; the link Course Reading List is clear and concise.
   
   You’ll use the Property Inspector to make the link. If you can’t see it, choose Properties from the Window menu to bring it to the front.
   
   
4. In the Property Inspector, 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 to which you wish to link. The selected text is underlined and appears in the link color you chose. In the Property Inspector, the Link field shows the name of the file you chose.
   
   To check if the link works properly, you have to view it in Netscape.
   
   
6. Save your work and preview in Netscape.
   
   
7. Click your link. The link briefly appears in your chosen active link color, and then the linked file appears.
   
   
8. Click the Back button. The link appears in the color you chose for visited links.
   If the second page doesn’t appear, repeat the steps in this section. You can also check your HTML Source to determine the problem. Your code should look (something) like the following line:
   <a href="secondpage.html">My Second Page</a>.
   This code tells Netscape that when a user clicks on the link My Second Page, it should find and display secondpage.html, which is in the same directory as index.html. This link is called a relative link because the location of the linked document, secondpage.html, is given in relation to the linking document, index.html.
   
   
9. Switch back to Dreamweaver for final additions to your pages.

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.html.
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.html and click your cursor.
   
   
2. Press return to give yourself a line of space and from the Insert menu, choose Horizontal Rule. A highlighted Horizontal Rule appears on your page.
   
   
3. Click at the end of the Horizontal Rule and press Return. Your cursor appears on the first line of the footer.
   
   
4. Type your name (and your title, if you wish).
   
   
5. To single-space the footer text, hold down the Shift key and press Enter. Holding down Shift puts in a line break instead of a paragraph break. The cursor appears on the line just below your name.
   
   
6. Type your e-mail address and other contact information. Press Shift and Enter.
   
   
7. Type: Department name, or other address information. Press Shift and Enter.
   
   
8. Type: Last Modified: followed by today’s date (i.e. Last Modified: January 22, 2002).
   
   
9. You should end up with something that looks like this:
   
   

   ---

   Tammy Thiem, Web Page Editor
   ThiemT@ripon.edu
   Information Technology Services
   Last modified: January 22, 2002
   
   

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. This is a handy feature, but it only works for visitors who are using a browser that contains e-mail software, such as Netscape Communicator.

1. Highlight your e-mail address.
   
   
2. In the Property Inspector, in the Link field, type: mailto:username@ripon.edu where username@ripon.edu is your e-mail address. Or, select E-Mail Link from the Insert menu. In that case, just type the address, not the mailto:
   
   
3. Press Enter. Your e-mail address appears as a link.
   
   
4. Next you’ll link to Ripon’s home page so your visitors can easily access other cool Ripon web resources. To do this, you need to know the address for the home page: http://www.ripon.edu/.
   
   
5. In the footer, highlight the text, “Ripon College.”
   Since the Ripon 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.
   
   
6. In the Link field in the Property Inspector, type: http://www.ripon.edu/ and press Enter. “Ripon College” becomes a link.
   
   
7. Save your work and test your links in Netscape.
   If your links don’t work, repeat the steps above. Double-check the information in the Link field. If the e-mail link doesn’t work, it might be because your Web browser is not configured to send e-mail.

Add Footer to Another Page
To give your site a consistent look and navigational scheme, 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 Source window for index.html, highlight the code for the footer from the horizontal rule <hr> through the Ripon link. Do not include “Last Modified” line.
   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 your second page 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 your work. The footer appears on your second page.
   
   
7. In the main window, on the last line of the footer, add the last modified date.

Link to Your Home Page
To provide greater ease of use for 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 your second page to your home page (i.e., index.html).

1. In the Document window for your second page, type "Return to my home page." This text may appear in the footer, or elsewhere on the page. Highlight "Return to my home page."
   
   
2. In the Property Inspector, in the Link field type index.html and press Enter. "Return to my home page." appears as a link.
   
   
3. Save your work and test your link in Netscape.

Back to the Index