Dreamweaver 8 Colorado Project 3 Instructions

Colorado State University, with campuses in Fort Collins, Denver and Pueblo, as well as an online college, developed a "structure-first" approach for website design that addresses the need for content that has been "marked up with structural HTML tags." The university developed this approach to employing Dreamweaver 8 software in an effort to help students, faculty and others create flexible websites that will be easily accessible on handheld devices, screen readers and other technologies.

Things You'll Need

  • Dreamweaver MX (8) software
  • Microsoft Word software
Show More

Instructions

    • 1

      Create a new page in Dreamweaver 8. Under "category," select "Basic page" and Basic page HTML. Double-check to make certain that this new page is "XHTML 1.0 Traditional" and click "Create." Next, title the page with a succinct description, with specific information coming first. For example: "Student profile --- Computer Information Department --- Colorado State University." Now save the page as "design.html."

    • 2

      Produce the four key "divisions" of the page, which are the header, navigation, content and footer. Each will be created by using the division tag <div> for designation. As "markup language," HTML offers structure. For example, the <p> designation or tag divides the text into paragraphs while the <h1> tag indicates a first-level heading. After inserting the four tags, your page will show four stacked boxes. In descending order they will be "content for id header," "content for id navigation," "content for id content" and "content for id footer."

    • 3

      Generate five new pages from the template, which will be tagged as "services.html," "staff.html," "training.html," "FAQ.html" and "index.html." On each page you will insert the appropriate name --- for example, Services or Staff. However, for the home page or index.html, leave the tag the way it is and substitute the home page title for Header 1 and save as "index.html." Rather than close the page, view it in the browser, and double-check your various links. If everything is working, close the home page.

    • 4

      Change and modify individual pages. Open your Word document containing the content for the webpages and copy the desired text for an individual page. In the CSU example, select "home page content," copy the appropriate text and, in Dreamweaver, paste the copied information into the page's content area. Follow this procedure for the other pages you have created.

    • 5

      Insert photos or images to enhance the appearance of your pages. For example, the CSU practice page has the name "David Greene." To insert his photo, place the cursor in front of the name, choose "Insert > Image" and select "david_thumbnail.jpg." You can then label the image with his name.

Learnify Hub © www.0685.com All Rights Reserved