Scribd
Upload
430 views5 pages

Web Design Basics for IT Students

This document provides instructions for styling and designing a web form using CSS. It outlines 14 steps to change various style properties like colors, margins and inserting images. Key points include changing background and text colors for different page elements like the header, sidebar and links. It also describes adding a class to style the product table and inserting a company logo image in the header. The goal is to enhance and beautify the basic user interface created previously with CSS formatting and design elements.

Uploaded by

Finaz Jamil
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
430 views5 pages

Web Design Basics for IT Students

This document provides instructions for styling and designing a web form using CSS. It outlines 14 steps to change various style properties like colors, margins and inserting images. Key points include changing background and text colors for different page elements like the header, sidebar and links. It also describes adding a class to style the product table and inserting a company logo image in the header. The goal is to enhance and beautify the basic user interface created previously with CSS formatting and design elements.

Uploaded by

Finaz Jamil
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Centre for Diploma Studies Page 1/5

Department of Information Technology Session 2012/2013


Experiment’s Title: Creating User Interface (Form) Semester 1

WEB PROGRAMMING

LABORATORY INSTRUCTION SHEET

Course Code

Experiment’s Title Style & Design With CSS

No. of Experiment

Name

Matric Number

Section
FORM IN PHP

1. Open your Dreamweaver.

2. Open your [Link] file earlier that you had created in “Lab 2 – Creating User
Interface”. Now it’s time to enhance, design and style your webpage.

3. Open your CSS file by selecting “[Link]” tab, on top left handside (see Figure1).

Figure 1 : [Link] file

4. Change the background colour : #42413C of your web pages to the one you prefered.
As for this tutorial it will be change to #84596B.

5. Change the background colour of your content to #CECFCE based on class id


“container”.

6. Change the background colour of your header to # C7AFBD based on class id


“header”.

7. Change the background colour of your sidebar to #B58AA5 based on class id


“sidebar1”.

8. Change the background colour of your footer to #C7AFBD based on class id “footer”.

9. Change the background colour of your link while in “view condition” to #B58AA5
based on tag id “nav”.

10. Change the colour of your link while in “view condition” to #FFFFFF based on tag id
“link”.
11. Change the background colour of your link while in “navigation condition” to #
#CECFCE based on tag id “hover”.

12. Change the colour of your link while in “navigation condition” to #000000 based on
tag id “hover”.

13. Create a new class id name .table to be used for the design of your product table on the
web page with value stated below ;

a. margin: 20px;

14. Select your product table.

15. Select class id .table under PROPERTIES window on class menu box (see Figure 2).

Figure 2 : class id attribute selection

16. Select box Insert_logo (180 x 90). (see Figure 3)

Figure 3 : Logo Box Placeholder


17. Open PROPERTIES windows and click “browse for file” button (see Figure 4).

Figure 4 : “browse for file” button.

18. Select image for your company logo to be place on the top of your webpage with a size
of 180x90. Please make sure the image should be place inside your root folder (see
Figure 5).

Figure 5 : Location of logo image.


19. Lastly decorate your header with image or text so that you webpages design included
with a proper information. If all the tutorial has been completed your web pages style
and design should look like figure 6.

Figure 6 : Final Interface of Web pages with CSS Design.


Figure 6 : Final design of your webpages.

You might also like