Intro to Web Design!

[The SEO Rapper]

[Quick Tour of Dreamweaver]

[Setting up your Website Files]

  1. In your Shared Drive, create a folder called “Tutorial Site”.
  2. In that folder create another folder called “Images”.
  3. Start Dreamweaver.
  4. Set up a new site by going to Site -> New Site
  5. Enter your site name, browse to the folder “Tutorial Site” for the root folder, and browse to the “Images” folder for the images folder.

[Inserting Text & Images]

  1. Use Dreamweaver in “Design” mode. (Click “Design” where it says “code” & “split” & “design”)
    • Type some text on the page and insert a picture.
    • You can insert a picture by going to “Insert -> Image” or by finding the file in the files panel and dragging & dropping
  2. Change the title from “Untitled Document” to “Text & Images”. This will change the header in the web browser as well.
    • The title is located at the top of the main window, underneath the quick buttons.
  3. Save the file in the “Tutorial Site” folder called “Text.html”

[Layout Paragraphs & Images Layout]

  1. Create a new blank html file by going to “New -> File
  2. Copy the Lorem Ipsum text from
  3. Paste it on your html file.
  4. Insert an image
  5. Select the image thenĀ  Under the “Align” drop down in the properties panel choose “Left” in order to align the image to the left of the paragraph text.
  6. Change the title bar title to “Paragraphs & Image Layout”
  7. Save the file in the “Tutorial Site” folder called “paragraph.html”

[Linking to files and websites]

  1. At the top of paragraph.html type the text “Go to Text & Images”.
  2. Highlight this text and link it to text.html by dragging the circle beside the “link” box to the file you would like to link to.

  3. Highlight any word in the paragraph and in the link box in the properties panel type the full url of your favorite website. Eg. “”
  4. Save the file and preview it in a web browser. File -> Preview in Browser
  5. Test the links.
  6. Go back to “text.html”
  7. Add “Go to Paragraph Layout” to the top of the page and link it to “paragraph.html”.
  8. Link the image on “text.html” to another one of your favourite websites.

[Creating Tables]

  1. Create a table at the bottom of “text.html” by going to “Insert -> Table
  2. Create a table, with 5 rows and 3 columns.
  3. Merge two of the cells together, highlight two cells, then right click on the selection and find the merge cells option.
  4. Split a cell into 3 columns, right click on a cell and find the split cell dialog.
  5. Resize the table so that it fills up most of the screen. Select the table by clicking on a cell border. Grab the black box in the bottom right of the table, click and drag until the table is bigger.
  6. Change some of the cell’s colours by selecting a cell and changing the Bg option on the properties bar
  7. Change the table’s border colour by selecting the table and changing Brdr color on the properties bar.
  8. Change the table border’s thickness by changing the number in Border from 0 to 2 or 3.
  9. Center the table by changing the alignment on the properties bar.
  10. Insert some text into one of the cells.
  11. Change the vertical alignment of this cell to top.
  12. Change the horizontal alignment of this cell to centre
  13. Drag an image from the files panel into one of the cells.
  14. Link the image to the “paragraph.html” file.

[Today’s Task]

Must haves:

  1. Create a mini website with 3 pages about you or about anything you want.
  2. Each page is one html file.
  3. Have the same menu on every page that allows you to link back and forth between pages.
  4. Use a main table for the layout of the menu and content.
  5. Each page must have a header title, at least one image, and some text (doesn’t need to be alot).

This entry was posted on Wednesday, December 17th, 2008 at 4:27 am and is filed under Tasks. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.


Leave a Reply