University of Mauritius

Computer Science and Engineering Department

CSE2026Y Information Systems Innovations and Web Technologies
Lab exercise

Week 8

At the end of this lab session, you should be able to

• Apply id and class selectors

• Configure image to float in a web document
• Configure margins in a web page
• Apply styles to change the font property of a web page
• Create a navigation which stays in the same position when scrolling a web page

As far as possible, you should aim at completing all lab exercises in the lab itself. Students should
note that all lab works may be examinable and your lecturer will verify satisfactory completion of
each lab work every week. In this respect, save all completed work.

Exercise 1

In this exercise you are to reproduce a web page that looks exactly or at least the same as the web
page shown in melvil.png.

• Use background color: 800000 and text color #C11B17

• Use background-image:url() property to display melvilDewey.jpg at the top of the page
• Each navigation link at the top of the page should link to appropriate sections in the web
page whereas the green arrow image should link back to the top of the page. Resize all
images as required.

Links to be used are as follows:

• “http://www.gutenberg.org/author/Melvil+Dewey” for Works by Melvil Dewey

• “http://www.straightdope.com/mailbag/mdeweydecimal.html for What’s so great about
the Dewey Decimal System?
• “http://www.nytimes.com/learning/general/onthisday/bday/1210.html” for Melvil Dewey
dead in Florida
• “http://www.librarybureau.com/aboutlegacy.html” for Library Bureau
• “http://worldcat.org/identities/lccn-n79-91588” for Works by or about Melvil Dewey

Use materials available as practice3.zip from LCMS for your web page.

Exercise 2
Redesign your web page so that instead of having a top navigation, a user will be able to have a
set of navigation links on the left of the web page. This new navigation should follow the
scrolling position of the web page.

|End of lab exercise – week 8

Lab  sheet  prepared  by  Dr.  M.  Y.  Chuttur.  Document  can  be  shared  and  used  for  educational  purpose  only.   1