Project 2 - Styling your My Favorites Web Site

Topic:

In this project you will update your original My Favorites website to create a Layered layout using CSS, and improve the navigation and appearace using CSS styling.

Task 1: Investigate CSS layout possibilities

1. Visit the following website: http://www.csszengarden.com/
2. Click on the various links at the right to observe and study the amazing possiblities for layout changes using only CSS.
3. You can view the HTML source code that is the same for all pages to see the various divisions they have created.
4. For each different CSS layout, you can download and examine the CSS stylesheet coding if you wish.
5. Displaimer - These are for study and to get ideas, not to copy directly as your own work. (If you can copy and look, so can I...and see that you did...)

Inside your WebDesign folder, create a new folder named My Favorites Layout site. Copy the contents of your My Favorites Site to this new folder. Now you have a new copy to make the changes to, while still preserving a copy of your original formatting.

Task 2: Plan a Layered Layout

1. Plan a new Layout for your site using division layers:
   1. Examine the pages of your site and decide how you might be able to position your divisions to control different sections of the pages.
   2. Think how you could inprove your navigation division layer.
   3. Do any additional online research if you like, to get more styling ideas that use divisions and layers.
   4. Plan whether you want a fixed or flexible layout. You may want to consider fixed positioning for links, and a flexible layout for content layers.
   5. Use a container layer - you can now center your entire page using a container layer, if you wish, or set a specific width for the page content.
   6. Plan also for span sections to have special formatting for sections within larger elements.
   7. Plan background colors, and/or background images for small and large elements
      
      
2. Plan for focused styles
1. Think about how to address the formatting of content with in your layers.
   For example, the links within the navigation layer can have combination selectors, so that any other links will not automatically be formatted in the same way.
2. Use combination selectors wherever possible, to fine-tune your formatting.
   
   
3. Create your new layout.
   1. Your content should not change appreciably, but only get rearranged by formatting with layers, as with the CSS Zen Garden page.
   2. Be sure you include:
      1. Consistent navigation throughout the site
      2. Background coloring of a division layer on each page
      3. Using a background image, not repeated, placed at the left, to create mock bullets in a list
      4. At least three uses of the span element somewhere throughout your site
      5. At least three different versions of combination selectors for styling specific types of layer elements
         

Task 3: Consolidate Styling in an External Stylesheet

1. Examine the styles and attributes on your pages:
   1. Begin a Word document to keep track of what you will find. Make a 'section' for each page, to record the style details you find
   2. Look through each of your pages, and record in your style list document which elements have inline style rules or formatting attributes. List the attributes for each.
   3. Look through your style document to identify where there are similar styling across all the pages. These are styles that will be created on an external style sheet.
      
   4. Look again to see where there might be small changes or additions to a style for a particular page or part of a page. To handle these, you will create internal styles for the page that needs them.
   5. Once you have recorded all the styles and formatting, delete all formatting from each page.
      
      
2. Create external style sheet:
   1. Create a new external stylesheet, named appropriately, and saved at the root of your new site folder.
   2. Create styles format all elements, such as the body, p, headers, links, etc., that should look the same on all pages.
   3. Any style declarations that are used wtih exactly the same values on more than one page should be placed on the external style sheet.
   4. Create ID selectors for your layout div styles.
   5. Link each page of your site to this external style sheet.
   6. In each page, add classes to your elements where needed to apply the styles you have created.
   7. Apply the ID classes to the layout divs.
      
      
3. Test the pages to see that the stylesheet is correctly controlling the appearance of your pages.

Task 4: Add Specific Styling to Individual Pages

1. Create internal style sheets:
   1. Just after the link to the external style sheet, create a style section for your internal styles.
   2. Create styles to recreate any 'local' styling for that particular page, such as a color change for text on this page, or other 'updates' to the external styles.
   3. Styles that are needed only on a particular page (for example for a table or list that is only used on one page, or individual images on pages that need focused styles) should be created as an internal style and not be included on the external sheet.
   4. Save and test each page as you complete it.
      
      
2. When you are satisfied with your site, save everything and close the files. Publish to the Common drive.