CIS 363B Devry Week 3 lab



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.

 

 

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.


 

Powered by