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
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.
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.
W3C HTML Validator
If you don't have Dreamweaver, copy the code from your page, go to the HTML Validator at https://validator.w3.org/, paste your code in, and it will tell you on which lines your html has errors. Fix the code and repeat the process until you don't have any errors.
If you are having problems with your css, they also have a CSS Validator at https://jigsaw.w3.org/css-validator/.