How to go from design to web page?
First notice the parts of your content and wrap those parts in divs with ids that describe the content. Most designs will have a Header, Navigation, Content, and Footer. Just as your id’s will reflect this and have #header, #nav, #content, #footer- we also need a #wrapper to keep everything in line.
sections of a design
Its good to begin by thinking of your page as a linear layout- like a word doc. You will wrap each section of content in a div with an id name which describes that content.
A linearlayout of a page's content
The steps that are not shown in the following video clips are:
- Open a neew HTML document
- Paste all text
- Create blank id’s in your CSS
- #wrapper
- #header
- #nav
- #content
- #footer
- Select content. Ex) select header text
- Wrap div around content
- Label div with the appropriate id. Ex) selected text is labeled with the id “#header”
That’s about where the video begins. Sorry about the quality and lack of audio- Im working on it…
Part 1:
Part 2:
Part 3:
