Introduction to HTML using Dreamweaver
by Leigh Jay Temple, Revised by K. Mapson, 2006
Adapted for Dreamweaver by Steven L. Goode, 2001
Adapted for Dreamweaver MX 2004 by Jason A. Wilson, 2004

Today's session will introduce participants to Dreamweaver, a WYSIWYG HTML editor. At the end of this session, participants should be able to:

  • Exhibit a basic understanding of Dreamweaver
  • Modify an existing HTML document (web page)
    • Modify page properties and text
    • Make Links -- email, absolute, and relative
    • Insert Tables
    • Insert Images
  • Create a simple HTML (HyperText Markup Language) web page
  • Know who to contact for help

Please Download the zip file containing the html and graphics files mentioned in this tutorial here. Unzip the file using WinZip or Windows XP's built-in Extraction Wizard before you begin the tutorial.

BEGINNING TIPS

  • Create a website folder for each website you create.
  • This folder houses all images and documents related to your website.
  • ORGANIZING FILES FIRST eliminates broken images and errors from appearing on your site when it's being viewed.
Gaining a basic understanding of Dreamweaver

WYSIWYG : "What you see is what you get"--the page will display approximately as it will appear in the web browser (aka Netscape or Internet Explorer)

  • Open Dreamweaver
    • Dreamweaver begins by opening a blank web page (HTML document)
    • If a blank page does not automatically open use the menu command
      File >> New... A New Document window will open. Under the General tab, Basic Page and HTML should be highlighted. Click Create
  • Notice the top toolbar (Insert, Modify, Text, etc.)
  • Notice the Properties toolbar probably towards the bottom of the screen (if not hit Ctrl+F3 to display it)

TOP

Modify a Simple web page

1. Open an existing webpage

  • File >> Open
  • Browse to the Floppy Drive (or the location on your computer where you unzipped the "tutorial.zip" folder) and select the file named syllabus.html
  • Click Open

2. Page Properties

  • Modify >> Page Properties
  • At Title: type in "your course name - Syllabus" (minus the quotation marks)
  • Click on the box beside "Background:" and select the white square in the color pallette
  • Click OK

3. Modify text in the page.

  • Highlight the text from "History and Culture of China" to "7:30pm"
  • Text >> Align >> Center
  • Highlight the line of text under "Book Required"
  • Text >> Style >> Italic or this can also be done on the Properties toolbar
  • Highlight "Course Requirements" -- make it a heading
  • Text >> Paragraph Format >> Heading 4 or find the drop-down menu next to Format on the Properties toolbar
  • Do the same for "Important Dates" and "Schedule"
  • Save your page! File >> Save or ( Ctrl+S )

4. Preview the modifications

  • Hit F12 to preview in your default browser. Notice how similar it looks!
  • Close the browser window by clicking on the X in the top right corner of the browser's window

5. Add an Email link

Replace "Leigh Jay Temple" with your name, and beside your name, type in your email address in parentheses (ljtemple@unity.ncsu.edu)

  • Highlight the email address but not the parentheses
  • On the Properties toolbar in the box next to Link
    type: mailto:your_email_address@anyISP.com (no spaces)
  • Hit Enter
  • Save your page! ( Ctrl+S )

6. Insert and modify a table

  • Place your blinking cursor under "Important Dates"
  • Insert >> Table
  • An insert table box will appear
  • In the Insert Table window, type in 4 rows and 2 columns
  • Type 50 in the Width box and select Percent selected
  • (Optional) Type 1 for the Border size 0 for Cell Padding and Cell Spacing . These can be changed later on the Properties toolbar after you click on the table's border to select the entire table.
  • Click OK
  • In the first cell of the first row type Assignment and make it bold, press the TAB key to change to the next cell.
  • In the second cell of the first row type Due Date and make it bold, press the TAB key to change to the next cell. Clicking inside a cell is another way to move the cursor to enter text and/or graphics.
  • Type in text for the remaining cells
  • Change the color of the first row and the text in it
    • Select the first row of the the table. Do this by placing the mouse over the left edge of the first row of the table until a solid black arrow appears. With the arrow pointing at the first row, click the left mouse button once. Notice that the entire row is now highlighted.
    • Look on the Properties toolbar and find Bg
    • Click on the grey box beside Bg and choose a dark color. Notice that it is hard to see the text you typed earlier.
    • Highlight the text in the first row of the table
    • Text >> Color and select a light color (white or grey)
    • Click OK
  • Center the text in the table
    • Select all the text in the table
    • Text >> Align >> Center or use the center button on the Properties toolbar
  • Save your page! ( Ctrl+S )
  • Hit F12 to preview your page in a browser.
  • Close the browser window.
  • Close syllabus.html

    TIPS
    • Tables can be used to present data on a web page or to create elaborate layouts.
    • Each cell of the table can be used to hold web page content in place. This creates white space and alignment options.
    • Table borders can be visible or invisible.

 

7. Insert image into page

  • Open an existing webpage
    • File >> Open
    • Browse to the Floppy Drive (or the location on your computer where you unzipped the "tutorial.zip" folder) and select the file named china.html
    • Click Open

  • Page Properties
    • Modify >> Page Properties
    • At Title: type in "your course name - Syllabus" (minus the quotation marks)
    • Click on the box beside Background: and select a pastel square in the color pallette
    • Click OK

  • Insert an Image
    • Position your cursor to just before the word "Welcome!"
    • Insert >> Image
    • In the Select Image Source window browse to china_logo.gif.
      • The URL: field should say "GRAPHICS/china_logo.gif "
    • Click Select
    • With the image selected, go to the Property inspector and look for a blank field next to the word Alt . In the blank field type a short description of the picture. This will help make your Web page accessible to people with vision impairments.
    • Use your mouse to place the cursor between the picture and "Welcome!". Press ENTER to put "Welcome!" on a different line. (Tip: Press SHIFT+ENTER to move items down one line at a time instead of two.

      TIPS
    • Create an IMAGES ONLY folder within your site folder.
    • This elimiates broken images from appearing on your webpage.
    • Modify Text in page
    • Select "Welcome!" and change its Format to Heading 1 as we did earlier
    • Underline "Useful Websites"
    • Text >> Style >> Underline

Difference between relative and absolute links:

Relative links are within your website. These links are based on the files' relationships with each other. The use of relative links allows files to call each other without using their exact location on the hard drive or floppy drive.

  • Example: graphics/china_logo.gif rather than A://dreamweaver_tut/graphics/china_logo.gif
  • The use of relative links keeps your site portable (imagine a server trying to look for something on your floppy drive!).

Absolute links should only be used to link to sites that are not part of your site.

8. Make a relative link (within your local site).

  • Highlight "Syllabus".
  • On the Properties toolbar in the box next to Link type: syllabus.html
  • Hit Enter
    (This process tells the current page [i.e., china.html] to look for a file named syllabus.html at a particular location, such as a floppy disk, in a folder on your hard drive, or on the Web server if it's been uploaded. Because the link is relative, the search location for "syllabus.html" will never change in relation to china.html. even if the physical location of "china.html" does change.)
  • Save your page! ( Ctrl+S )
  • Hit F12 to preview the page in a browser
  • When the browser window comes up, click on Syllabus .
    This is a new page--the file we just modified! So you've created a relative link to a new page (file) in the same location as your original file.
  • Close the browser window.

9. Make an absolute link (to a remote site)

  • Highlight the URL (web address) under "A History of China"
  • On the Properties toolbar in the box next to Link
    type in the entire URL minus the ( )! Be sure there are no spaces in the URL...especially at the end. Spaces may result in a link not working or not properly directing the user to the intended file or page.
    http://www.nationalgeographic.com/
  • Hit Enter
  • Repeat, add absolute links for The China Experience and Annotated Directory of Internet Resources
  • Save your page! ( Ctrl+S )
  • Hit F12 to preview the page in a browser
  • When the browser window comes up, test the link you just made.
    It's another website about the history of China.
  • Close the browser window.
  • Repeat this process for the URL under "China -- History in General"

10. Create a page from scratch!

  • File >> New
    • Start typing!
    • Refer to the above exercies about how to
      • modify page properties,
      • modify text, and
      • insert an image, link, or table
      • and remember to save often!
  • Know who to contact for help TOP

TIPS

  • Create a website folder for each website you create.
  • This folder houses all images and documents related to your website.
  • ORGANIZING FILES FIRST eliminates broken images and errors from appearing on your site when it's being viewed.
  • All files should be named using lower case lettering and without spaces between words.
  • Files that are .pdf, .doc, .xls, .ppt can be used in Dreamweaver just remember to have the file in the webstie folder.
What do you DO with this website once you've created it on disk?

FIRST , make a copy on your hard drive.

Teachers: Then make another copy either on a floppy or CD-ROM to give to your school's Systems Administrator for uploading to your campus Web site.

NC State Users: please visit the Learning Technologies online workshops webpage at http://ced.ncsu.edu/ltrc/studio/workshops/ and go to the SITE MANAGER TUTORIAL.

There are also other sites where you can create and post a website! Here are a few:

The Internet for Educator's Web Design Resources
http://www.fno.org/webdesign.html

The Teachers.Net Website Handbook
http://teachers.net/manual/

PBS' Online guide to HTML:
http://stars.com/Authoring/HTML/Tutorial/toc.html

Big Chalk & NPR's site (now ProQuest K-12 Information and Learning:
http://www.proquestk12.com

Filamentality:
where you can design and post a WebQuest activity
http://www.kn.pacbell.com/wired/fil

TOP

College of Education  |  NC State


Page maintained by Learning Technologies Resource Center
URL: http://ced.ncsu.edu/ltrc/studio/workshops/dreamweaver_tut/index.html
July 26, 2005
Best Viewed with Netscape 6 or Internet Explorer 6