CIS363 Web Interface Design With Lab

iLab 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.

Submit Deliverables

1.  Copy files from the Citrix server (if necessary).

2.  Zip all of the files from Parts A, B, and C into a single zip file.

3.  Submit your zip file to the Dropbox.

Course Project- Week 3: Page Layout and Site Navigation

Extend the Week 2 Project Proposal/Design and create a detailed page layout design in Visio that you will use as a template for all the web pages in your site. The template should include

1.  a header area;

2.  a link area;

3.  a main content area; and

4.  a footer area.

In the diagramming application, use the Save As option to create an image file (jpg, gif, or png) of your site. Copy this image file into your Project Proposal document.

Create blank content pages as per your site diagram. To do this, you must have the filenames of major site pages determined. You should have a home page (index.htm) and all of the subpages created, but content information is not required.Create the navigation links between the site pages. The pages do not need to have much content, but they must be created and contain the navigation elements and placeholder elements for your content. Begin to implement the box model with <div> tags and CSS.

Grading Rubric

Category / Points / % / Description /
Page design template / 15 / 34 / Design template includes all the listed items (header, link, main content, and footer)
Website pages created / 10 / 22 / All pages created following the template and with navigation
All page links visible / 10 / 22 / Links are clear and obvious
All page links functional / 10 / 22 / Links allow full navigation
Total / 45 / 100 / A quality project will meet or exceed all of the above requirements