Chapter 1: Inserting HTML

Goals for this Lesson

  • Insert frequently used HTML tag
  • How to insert special characters
  • What semantic web design is and why it’s important
  • How to write HTML code in a text editor
  • How to construct the basic structure of a webpage, including the root, head, and body elements
  • How to preview HTML in a browser and in Dreamweaver’s Live view
  • Setup a Dreamweaver root folder

Exercise

Objective

  • Create a Dreamweaver site by setting up a root folder using Dreamweaver’s site setup features.
  • Use semantic and common HTML tags to create a website.

Instructions

  1. Create a new folder on the desktop and name it Web Design.
  2. Create a new folder within the Web Design root folder and name it images.
  3. Define a new site:
    • Name the new site Web Design and Interactive Media.
    • Designate the Web Design folder on the desktop as the Local Site Folder.
  4. Save the site definition.
  5. Edit the newly defined site, designating the “images” folder you created in step 2 as the Default Images Folder for the site.
  6. Save the edited site setup.
  7. Create a new html document and save it as: index.html
  8. Title the new index.html document: Web Design and Interactive Media
  9. Download the text you will need for the site here.
  10. Create the website according to the image below.  Use the semantic tags and proper html tags that are shown on the image. 
  11. Submit the root folder that you named: Web Design into the shared drive.

Dreamweaver Exercise 1 Sample

Video Resource