1. Art 128 Interface Programming 1 In-class Presentation Week 11B

2. Art 128 :: Interface Programming 1 :: Week 11 :: B In-class Presentation :: today’s lesson  How to begin strategizing how to begin building your site. PRE-CODING:  Clean up your Photoshop document  Make several sketches  Take notes & measurements EARLY CODING:  Create a folder structure  Create a site in dreamweaver (optional)  Create your html files first.  Once your html files are done and tested, then add your css.

3. Art 128 :: Interface Programming 1 :: Week 11 :: B In-class Presentation :: today’s lesson  PRE-CODING: 1.Start by cleaning up your Photoshop document  use folders (& colors if helpful) 2.Make a nested div tag sketch  Start with your background & container  What is the background graphic? Do you need a wrapper?  Then draw out your header, nav, main content, & footer  Then draw out the nested div’s that go inside of that 3.Make a mark-up sketch, labeling each piece of content on the site (where will my go? ? tags? ?) 4.Note your ID’s & classes  How many may need ID’s will I need? Classes?

4. Art 128 :: Interface Programming 1 :: Week 11 :: B In-class Presentation :: today’s lesson  PRE-CODING: 1.Measure everything  Width of your container  Height of your header  Width & height of your nav & each element?  If you will be using absolute positioning for any elements, note the top & left from the 0,0 of the container. 2.Note all colors that will be html (in hex format #000000)  body background color and all div background colors  a, a:hover, a:visited colors

5. Art 128 :: Interface Programming 1 :: Week 11 :: B In-class Presentation :: today’s lesson  CODING: 1.Create a folder structure inside of your Art128 folder  art128  final  css  images 2.Optional: create a new site in dreamweaver 3.Create your html files first, starting with the home page.  The splash page can come later.  You may want to label your home page home.html if you are using a splash page. 4.Test your site out without any styling. 5.Create your CSS files last