Writers Den

CIS363
Web Interface Design With Lab

Lab
3: Intermediate CSS, Box Model and Page Layout

Instructions

Scenario

Make a website about your major, computer information systems, and
the opportunities in this major. This website should have four pages. The main
page should have information about the field of information technology and the
courses you would take in a typical CIS program. Also, add reasons why you
decided to major in CIS. Finally, the main page should have three links. Each
link will link to a page that will have information about a position that you
may want to obtain after graduating with your CIS degree. Some examples are web
programmer, system analyst, and database administrator. It is left up to you
which positions you would like to pursue and hence, create three different
pages to describe. The pages that describe the position should have duties of
the position, expected growth, outlook, salaries, working conditions, major
companies that hire for that particular position, related images (at least 3),
and so forth.

Each page must have at least three graphical elements. You must
implement the CSS features listed below.

Box
Model

Floating
Elements

Borders

Remember that this website should be well-organized, informative,
and attractive. Use colors and great graphics to make this web page interesting
so that you can attract more business.

Rubric

Deliverable	Points
Site Diagram – Four pages included and named appropriately	4
Site Diagram – All pages connected in the diagram	4
Website – Includes four pages as indicated in the site diagram	4
Website – Pages named appropriately; home page named index.html	4
Website – All pages connected with working hyperlinks	5
Website – Text formatted using at least three different tags	4
Website – Images included and displaying correctly	5
Website – Content complete on all pages	4
Lab Report – All sections complete	6
Total	40

Lab Steps

Part A: Create
the Website

1.
Create the home page.

• Create an index.html page using the
  following:

i. Box model
using div tags and classes to control the positioning to control those div

ii. Set up at
least 4 sections (header, footer, navigation, and main are possible choices)
with div tags and class

iii. Set div
tags for the layout using the div tag properties

• Add some
  general information about your major, CIS.
• Add pictures.
  Be sure that you have permission to use the picture.
• Include at
  least three text formatting tags, such as heading level, bold (strong),
  italics (emphasis), and so forth.
• Create three
  hyperlinks that link to the three pages that have information about the
  positions you would like to obtain.

2.
Create
the three position pages.

• Create pages
  named after the positions you choose (i.e., programmer.html,
  analyst.html, databaseadmin.html).
• Add pictures
  (at least three) related to the specific job position. Be sure that you
  have permission to use the pictures.
• Include at
  least three text formatting tags, such as heading level, bold (strong),
  italics (emphasis), and so forth.

Part B: Complete
the Lab Report

1.
Download the CIS363 Lab Report document from
Doc Sharing.

2.
The lab report must be completed for all
labs. The key parts of the report include the following:

• Objectives: A one-paragraph
  explanation of the purpose of the lab.
• Results:
  Include a screenshot of the working website or page.
• Conclusions: A
  one-paragraph explanation of what you learned while completing the lab,
  any challenges you had to work through, and how you can use what you
  learned going forward.