Harmonic Website Instructions

Part 1: Setup

For this next project, we're going to create a more advanced website from scratch. I'm assuming you will be working in Dreamweaver, and some of the more advanced features will require Dreamweaver.

Tips for students doing handcoding will appear like this.

Creating the project folder

Download the folder Harmonic_Folder.zip.

Un-zip it and place the Harmonic_Folder in your www folder

Setting up the project using Dreamweaver

Open Dreamweaver, go to Site>Manage Sites and click on your Design for the WWW site. Then click "Done".

Go to the Local Files in the upper-left of your screen; you should see the Site folder with a "Harmonic_Folder" and an "images" folder inside it.

Where to click for options for Dreamweaver's Files pallet

Click on the Harmonic_Folder in Dreamweaver, then go to the top-right of the Files pallet and click the "stack of papers" (the options for the pallet — see image above) and go to File>New Folder, and a new folder will be created. Title it "css"; it should appear in your Harmonic_Folder, and we'll keep our css files in here. (If not, then drag the folder into your Harmonic_Folder.) Then create another folder inside Harmonic_Folder and call it "js"; we'll place our javascript files in here later.

That completes our folder structure for the site.

Viewing the design in InDesign

First we're going to start with a design created in InDesign. We've designed this project in InDesign because it's easier to manipulate multiple images and type in InDesign and, once a design is created in InDesign, it's pretty easy to get document measurements from your design to use in our css.

So leave Dreamweaver and go back to the Finder and open the file "Harmonic" in the folder "Harmonic Folder." The file should look like the screen grab above.

Make sure the ruler measurements are set to pixels; either control-click where the two rulers meet at the upper left, or go to Indesign>Preferences>Units & Increments, go to Ruler Units, and change Horizontal and Vertical to "pixels".

You'll see from the top ruler that the site design is 1200px wide. Now we'll start to build the structure of the document.

Final Validation

If you are using Dreamweaver, look through the code for line numbers that are in red, indicating there is a problem. Click the red numbers and they should give you an idea what the problem is.

If Dreamweaver that you have unclosed elements and aren't sure what they are, you can insert your cursor before the </body> element at the bottom of your page, type </ and hit return, and it will auto complete whatever hasn't been closed. Look for those unclosed elements, close them, and try again until you get </body> right before </body>, and then you'll know all the unclosed elements. (Working on these instructions I had as many as six unclosed <p> elements I had to go back and find.)

Once you've fixed all the line number errors, go to File>Validate>Current Document (W3C) and your document will be validated.