Exercise 7: CSS : Using DIVs for Layout Creating Navigation Using Lists
CSS allows us to take more control over positioning and styles on our pages.Use DIVs for layout and unordered lists to create navigation.
Use Exercise 7 to test out some possible page layouts for Project 2. Try several different pages, experiment with your navigation, photo positioning, text size, padding, margin and borders.
CSS: Page Layout Utilizing DIVs
Use Divs to break pages up into sections and IDs to define the areas more precisely.
HTML Elements
- #idname {property: value;}
- <div id="x">
CSS: Style Unordered Lists into Navigation
Use IDs to further style unordered lists. Create horizontal or vertical navigation or a combination of both.
HTML Elements
- <ul>
- <li>
Design Process
- Create a project folder named "Ex7"
- Name your first page named index.html.
- Save all HTML docs and images in your project folder.
- Review your work in a browser before uploading to the server, view source in FireFox to see HTML errors and correct
- Submit your Ex6 folder with your HTML documents and image folder
Adding Developer Tools to FireFox
- You can add developer tools to your FireFox Browser
- Be sure to include the Outline option - as this allows you to highlight the outline of your Block Level Elements among other items
Exercise Requirements
- This is a 6 page exercise! All pages must link together.
- CONTENT: Write your content in natural flow (the order that can be read with no formatting and make sense). Format your pages using the steps listed below. Link all pages together.
- Index page: Create content that can break into individual areas including a Banner, Navigation, left and right column and footer. Use this content on all pages. On the index page don't add any formatting - allow the content to be seen in "Natural Flow"
- Page 2: Use the same content you have written for you index page and begin adding formatting to give your page some shape. Be sure to use an overall wrapper div.
- Page 3: Resave the page as a new name and add more CSS styles
- Page 4: Resave the page again as a new name and work on your navigation. Add lists to build out the horozontal navigation
- Page 5: Resave the page again and center your navigation that you made using lists. Try adding a background image for the hover state
- Page 6: Resave the page again. Add sidebar navigation that is either your main navigation or use as sub navigation.