Here is the example I showed today of a page with the HTML and layout CSS: Wireframe2HTML.zip
Today we are going to go over the process for converting your wireframes to HTML documents.
First, a note on the Project Proposal Assignment. I didn’t make it live on Blackboard so it is now due today and you can go to Bb and upload it.
Step 1: B2B – Boxes to Blocks
In this step we convert the boxes you drew in your wireframes to block elements. To keep things simple for now we are going to use only the following block elements for this step:
For Styling the nav you can use this site to help you with the HTML and CSS.: http://css.maxdesign.com.au/listamatic/index.htm The only catch is you have to change the outer <div id=”navcontainer”> to <nav id=”navcontainer”> and then the </div> at the end to a </nav> to match.
Tip: to get blank conent with filler text go to http://html-ipsum.com and you can copy elements from there (they also have a good example of a nav element).
Step 2: Layout with WFM+C
This stands for
You may be able to remember it as:
Webdesign is Freakin’ Money plus Cash up front
The “up front” may help you remember that the clear goes up front on the first element in a row. More on that later.
This is easiest to see and understand in action but the basic idea is that for every element that you don’t want to be the full width of the page you give it a width, float and margin.
- Width defines the width of the element
- Float allows other elements to move next to it
- Margin separates it from other elements.
Note on determining widths
To help you determine the width if you used the 960 12 column template visit this link: http://bit.ly/960gridwidths
and look at the bottom for the widths.
The clear is applied to two elements
- First in a Row: elements where you want the left edge to be on the left side of the page.
- First after Floated: after a bunch of floated elements, the next element that is not floated needs a clear. A good example is the <footer> element. This is at the bottom of the page and usually full width so most of the time it needs a clear because there will be floated elements before it.
margin:0; /*don’t need one because all the way to right*/
Sometimes you have elements that contain floated elements. Here is an exampel from above with the div class=”content” as the containing element because it contains the main and sidebar divs.
If you want those to have a background color or border you will find that they have a height of 0 and it doesn’t work. The simple fix is to apply an overflow:hidden style to them like below:
/* then you can add things like margin or background color */
border: 1px solid #000;
Here is a full example with a simple layout:blankpage.zip