The Design
Below is the design we will be using as the basis of this tutorial. Our mission is to slice this puppy up using nothing but XHTML, CSS, and a few images:
First we need to identify the main structural elements of the design, so that we know how to structure our HTML document.
The web is very heavily based around rectangles, and we need to remember that when dividing up our design. These main divisions we make will end up being <div> tags. A <div> is basically a rectangular container that we can position using CSS.
The diagram below shows how we will divide the design.
We have identified 5 major elements:
- Main Navigation
The primary navigation for this website. The images will change on hover (when the mouse cursor is on top of it).
Width: 760px
Height: 50px - Header
The website header includes a background image (purely for aesthetics), and the company name.
Width: 760px
Height: 150px - Content
The bulk of the website’s content will go here.
Width: 480px
Height: Changes depending on content - Sidebar
This will have second-tier content that isn’t as important as the main content.
Width: 280px
Height: Changes depending on content - Footer
Copyright information, credits, and an alternative text navigation.
Width: 760px
Height: 66px
This site will also be centered in the browser window. We now have all the info we need to start.
0 comments :
Post a Comment
Write some thing Good for us...........
Note: only a member of this blog may post a comment.