Overview
You have created your Web pages, navigation, and text that
use CSS. Now it is time to concentrate on how CSS can control page layout to
ensure consistency across all pages. It is also time to customize the layout of
each page to appropriately accommodate content using CSS.
In this assignment, you will create a liquid layout for your
site and add the final text copy to your pages while ensuring the same level of
consistency across all of the pages through CSS. Liquid layouts are designed to
resize the page components as the page width changes. Regardless of the browser
width or device width, the user will not have to do any horizontal scrolling as
all of the page components will be resized to fit the elements within the page
width.
Directions
Complete the following:
Amend the content section of each of the following pages
using CSS as described below:
About Us: Create a CSS-formatted table with a header, rows,
columns, and cells, and populate it with content.
Services: Add at least two dynamic-width columns.
Contact Us: Create multiple rows.
Homepage: Create both rows and columns.
Use CSS to format how elements in the HTML document (such as
the header, navigation, and footer) are rendered in the Web browser. Make sure
they are formatted and aligned professionally.
Make sure you do the following:
Create a table that properly
displays data.
Submit code that is error free,
well documented, and appropriately constructed.
Use CSS to define how HTML
elements are displayed on a Web page per specifications.
Create custom layouts for
individual page content areas.
Write developer comments to
describe and explain code.
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, linked in the Resources under the Suggested Resources heading.
Important: Take a screen capture
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.
Additional Requirements:
Submit your work using a single
zip file containing the following:
All page files.
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 image 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
your Web host.