Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: daixieit

CS 112

Hands-On Assignment

Enrich your web site with CSS

Overview

In this assignment, you will build upon your simple web page you created so far, both expanding and enhancing upon what you have done so far and implement your initial web page design.

Please do this exercise after you did your Internet Research as well as the video review!

In the course of this exercise, you will go through following steps:

· Lay out and implement your main page

· Design and implement two content pages

· Link the content pages with your main page

· Style up your pages

· Submit your assignment

Step 1: Lay out and implement your main page

Building on what you have learned so far about CSS, especially in the video tutorial, layout and implement your "landing page" or home page, i.e. the page that visitors see first when they get onto your site. The file for this page should be called index.html or index.htm.

Try to be close to your design, but it is okay to deviate a bit, if your design is too hard to implement. After all, you are not a professional web developer (yet :). If your design is overly simple, you need to have at least four sections:

· Header - this should be self-explaining.

· Menu - here you need to have at least two links, see content pages further down.

· Welcome area - here you will welcome your visitors on your site or introduce yourself or showcase your business ...

· Footer - address information, name of business, copyright information etc.

Step 2: Design and implement two content pages

Design another two pages, which may be of any complexity and any content. Each page:

· Needs to contain at least one picture.

· Either one needs to contain a bulleted list, e.g. telling about your interests.

· Has a link at its end linking back to the main page.

Step 3: Link the content pages with your main page

Make sure to create two links in the menu area of your landing page to link to each one of the content pages.

Step 4: Style-up your pages

Now "style-up" your pages using CSS properties:

· Have a specific background color for at least two of the sections from step one.

· Text color - e.g. you could have all of your headlines be of a specific color; or all of your paragraphs.

· Text properties - have all of your text paragraphs have a specific type face (e.g. Helvetica) and size (e.g. 15px)

Step 5: Assignment Submission

Upload your HTML files, pictures and possibly style sheet documents onto our HTML playground.

As a signal that you are done with your website, also submit a screenshot of your main page on BBL.

Grading Guide

The assignment will be graded according to this table: