Scribd
Upload
67 views

University of Mauritius Computer Science and Engineering Department CSE2026Y Information Systems Innovations and Web Technologies Lab Exercise Week 8

This document provides instructions for a lab exercise involving web technologies. Students will learn to apply CSS selectors, float images, configure margins and fonts. The exercises involve recreating a web page with navigation links that adjust based on scrolling. Students are expected to complete all exercises in the lab and save their work, as the lab exercises may be examined by their lecturer.

Uploaded by

sarah smith
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
67 views

University of Mauritius Computer Science and Engineering Department CSE2026Y Information Systems Innovations and Web Technologies Lab Exercise Week 8

This document provides instructions for a lab exercise involving web technologies. Students will learn to apply CSS selectors, float images, configure margins and fonts. The exercises involve recreating a web page with navigation links that adjust based on scrolling. Students are expected to complete all exercises in the lab and save their work, as the lab exercises may be examined by their lecturer.

Uploaded by

sarah smith
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

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  

You might also like