Creating Site Navigation and External CSS File

Externally Linked CSS and Site Navigation

Overview

Imagine that you have to change the font size for a headline in your Web site. No problem, right? Just go in and change the font size property on that page. But, what if you had a site with a hundred such titles that you had to change one by one? It would be both time consuming and inefficient. That is where CSS come in. They allow developers and designers to make wholesale changes to a Web site by changing code in only one file. In fact, with HTML5, formatting must all be done using CSS.

In this assignment, you will create your site navigation and a single external CSS file that controls text elements on each of your Web pages.

Directions

Complete the following:

• Create and save an externally linked, CSS3-compliant style sheet to control all your Web pages (see page list below). It should define properties (such as position, margin, padding, font family, color, size, et cetera) for each of the following:
  • Headlines
  • Header
  • Body text.
  • Background (image or color).
  • Navigation (use an unordered list to format the list items for navigation).
  • Footer (location/font size and color).
  • Anchor links (current, hover, visited).
• Update the code in your homepage and template to link to the new style sheet.
• Use your page template to create the other four pages for the site and title each appropriately.
  • About Us.
  • Services
  • Gallery.
  • Contact Us.
• Create functional page navigation using CSS. Use textual links using either a horizontal navigation across the top or vertical navigation down the left side. 
• Define text and background properties for all page elements using CSS.
• Make sure to enter context appropriate text in the content sections for each of the pages to demonstrate that the formatting and design are consistent across the site.

Make sure you do the following:

• Submit error-free HTML5 and CSS code.
• Create functioning site navigation using CSS.
• Create a functioning external CSS file linked to a Web site.
• Use CSS to effectively manipulate properties of Web page elements.
• Write developer comments to describe and explain code.

Notes

Make a note of the following as you complete this assignment:

• Use the same CSS formatting that references a single external style sheet for all pages. 
• Use Web fonts such as those available on Google Fonts Web site.
• Use

  tags only when there is no better element for the job to describe the content that it is containing. Use the semantic layout elements such as header, article, section, nav, and footer instead.

Hint: Consider building your entire layout interface first. It can help you plan your development of your pages to figure out where you want your content to go.

Once completed, view your pages in your selected Web browsers to see if the content renders appropriately and consistently within each. Next, ensure that your HTML code is HTML5 compliant and your CSS code is valid. You may use the Markup Validation Service for testing the former and CSS Validation Service for testing the latter, both from W3C. Important: Take a screen capture of each of your validation results and save it for submission.

Note: Errors from the validation should be fixed. However, warnings do not need to be fixed but should be reviewed. Fix the issues from the top down as one error can cascade into 20 other errors.

Submission Requirements

Submit your work in the courseroom using a single zip file containing the following:

• index.html
• template.html.
• image_and_url.doc. Include a Word document with:
  • The URLs for each of your pages.
  • The names of the browsers you used to view the pages.
  • Pasted images from your validation screen capture.
• Any ancillary files such as graphic or photos you may have decided to include.

Upload your Web site files to a hosting service of your choice. Two free sites to consider are Freehosting.com and 2FreeHosting.com.

Resources

• Externally Linked CSS and Site Navigation Scoring Guide.

• Freehosting.com

• CSS Validation Service.
  
  
• Google Fonts.

• 2FreeHostingcom.

• Markup Validation Service.

• Toggle Drawer

Web Site Navigation

A Web site's navigation is one of the most important aspects of a Web page as users need to be able to use your site and find what they are looking for. Users need to be able to find the information they are looking for as quickly as possible.

In your post, address the following:

• What are some of the best practices when it comes to navigating a Web site?
• Should a Web site deviate from the standard horizontal navigation across the top or vertical navigation down the left side?
• How does the use of the HTML5

Response Guidelines

Comment on the posts of at least two other learners. Offer insights, solutions, examples, or opinions that add depth and value to the conversation.

Learning Components

This activity will help you achieve the following learning components:

• Examine examples of navigation and lists and their associated code.