• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Preparing to Work

To prepare for this project, you will need to do the following:

Copy the Projects/01 folder from the CD to your hard drive.

Define a new site using the 01 copy as your site root.

Take a look at the files that came with the project as well as the markup inside them. Rather than have you type in a lot of filler text, I’ve provided the XHTML document called index.htm. In addition to the extension you just installed, the 01 folder contains index.htm, indexfinal.htm, skater.css, and an assets folder which contains images.

The skater.css file is the completed CSS document that you may want to use for reference. It styles the indexfinal.htm document. The CSS Snippets will be used as code snippets throughout the project. You will need to download Andrew Clover’s fixed.js document. It is already linked in the head of both index.htm and indexfinal.htm. Due to a bug in IE6, you won’t be able to view the project properly without it in that browser (www.dwmagic.com/go/13).

Open the Extensions folder and install the extension Project 01 Snippets.mxp. See Appendix A, “Installing Extensions,” for instructions.

Open the index.htm file and look at each section of the document so that you’ll be familiar with what you’ve got and where you’re going.

Preview the index page in a browser and notice the structure of the page. Although the page is unstyled and plain, all information is available and easy to access.

The page begins with an XHTML Transitional doctype. This comprises the first two lines of the document and comes before the <html> tag. Nothing should come before the doctype (including the XML Prologue) or you will put IE6 into quirks mode. Quirks mode means it will render your page according to older, less standard methods. (See www.dwmagic.com/go/14 to learn more about doctypes and quirks mode.)

Familiarize yourself with the structure of the document by viewing this page in Dreamweaver’s Code view.

If you’d like to view the final project before you get started, open the indexfinal.htm document in your browser either from your local drive or upload it to your web site (along with the associated images, fixed.js, and CSS file) and view it there. Increase the text size using the controls in your specific browser and make the browser window different sizes to view the effect.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint