Parkland College > CSIT Dept > Digital Media  > CIS 152 >
Calendar > Lesson 4


CIS 152 WEB DESIGN I
Lesson 4: Introduction to Dreamweaver and HTML
 Instructor: Paul Young

 

 
 

Objectives

 

  

To be introduced to HTML/XHTML coding. To become comfortable in the Dreamweaver environment by building a simple text-only web site (which can be used for client approval of the site architecture).

See sample site
Download site map (PDF)

 

 
 

Discussion

 

  

The best way to learn any software package is to simply start working in it. Dreamweaver is designed to do two things: (1) write code for web pages so you don't have to, and (2) help manage the files of your site. In this lesson, we will be building a 5-page web site from scratch without using templates.

Hints: (1) Use the HELP menu to get answers and to access tutorials. (2) Google your software questions (someone most likely has already posted an answer).

Also read the Wikipedia article on XML.

 

 
 

Procedure

 

  

Overview: Tell Dreamweaver the location of the files for your site. Make one web page. Copy the first page to make the other pages of your site.

Creating the home page

  1. download starter files (location: cis152/prep/lesson4)
  2. launch Dreamweaver
  3. define a new site (site > manage sites > new site): name=lesson4,
    local root folder=jsmith/cis152/upload/lesson4_html
  4. create a new file (file > new: basic HTML page): "index.html"
  5. edit > preferences: invisible elements: all items=yes
  6. edit > preferences: preview in browser: choose your primary/secondary browsers; preview with temp file=no
  7. view > head content
  8. type "digital media" followed by ENTER
  9. view > code and design: study the HTML code
  10. add the following extrernal links: "parkland college | computer science & information technology"
  11. insert > HTML > horizonal rule
  12. change title of document to "Parkland College Digital Media"
  13. save, file > preview in browser (F12)

Creating the inside pages

  1. window > site: duplicate "index.html", rename "curriculum.html"
  2. open "curriculum.html"
  3. add the following internal links: "Program | Curriculum | Job Market | Student Gallery | Contact Us" (use sample site as reference)
  4. link each item to a new page (i.e. "curriculum.html")
  5. add the following bread crumb links: "Parkland College > CSIT > Digital Media > Curriculum" (use sample site as reference)
  6. duplicate "curriculum.html" and make the other pages
  7. insert appropriate text into each HTML file
  8. insert named anchor "top" at top of each page
  9. link "back to top" to named anchor ("#top")
  10. format heads, unordered list (use sample site as reference)
  11. add tables from excel files
  12. save, file > preview in browser (F12)
  13. test and troubleshoot your site
  14. grading: publish this site later and make a link from your personal web site (see Project 1)

 

 

BACK TO TOP

______________________________

Last updated: 9/15/06 • Webmaster: Paul Young

 
 

Student
Exhibition

Influential
Designers

Internet
Resources

Tips, Tricks
& Handouts