Web Design Notes

1. Web Design
1. Introduction
The World Wide Web (or simply Web) is the most popular service on the Internet. The
development of the web was partly responsible for the rapid increase in the number of people
who used the Internet in the late 1990s. The World Wide Web consists of millions of
different sites, each of which contains information. Each site is identified by a unique address
called a Uniform Resource Locator or URL.
The information at a site is stored in the form of pages which can contain text, pictures, sound
and video. Because web pages can contain so many different types of information they can be
designed to be attractive, informative and interesting.
The different pages at a site can be linked together so that the user can move easily between
them. A hyperlink is placed on a page to create a link to another page. Clicking on a
hyperlink will move you to the page that the link joins to. Links can be made between pages
at the same site and pages at different sites.
To view the information at a web site you must use a browser package. Web pages are stored
in a special code called Hypertext Markup Language or HTML. To create a page you must
either :
1. Write the HTML code yourself. This can be very complicated. You need to know
all of the valid codes that can be used and type them exactly.
2. Use a web design package. The package will work like a desktop publisher. You
will be able to use a range of tools to design the page on screen. The package will
produce the HTML code required for the page from your design.
For must users the best option is to use a web design package. This will do most of the
technical work for you. You simply design your page on the screen and the web design
package creates the HTML code for the page you have made.
Whilst you are developing a web site you will probably store it on the hard disk of your
computer. When it is complete you will need to upload it onto a web server so that other
people can access it.
2. Site Structure
A web site is usually made up of many pages. The first steps in designing a web site are to
decide :
1. What the purpose of the web site is.
2. What individual pages will be needed to build the site.
3. What information will appear on each page.

2. You will then need to decide how the pages will be linked together. You can use hyperlinks
so that a person viewing the web site can move between the individual pages. You can also
link your web site to other sites.
One way to show how your web site will be organised is to draw a diagram showing what
will be on each page and how the pages will be linked. The diagram below shows how a web
site for a football club could be organised.
The main page that the user starts at is the home page. The web site has been divided into five
different sections which are club history, player statistics, team news, chat area and fixtures.
In each section there are a number of pages. The arrows indicate links between the pages. The
club will also make links to the web sites of other clubs that it will be playing. It hopes that in
return these other clubs will create links to its web site.
Once the structure of the web site has been decided, you can start to create the individual
pages. If there are a lot of pages to make then different people could work on each one. It is a
good idea to make all of the pages on a site look similar. You can do this by using a standard
page layout for each page.
3. Page Layout
Most web sites are made up of many pages. It is a good idea to make all of the pages at a site
look similar. This means that a person viewing the pages can tell that they are part of the
same site.
You can make a page look consistent by using the same colours and styles for the text and the
same background on each page. This diagram shows an example layout for a web page :

3. The designer of the web page has made these decisions about its layout :
·The background colour will be pale blue.
·Headings will be green and in the middle of the line.
·Normal text will be black.
·Pictures will be displayed with a thick black border around them.
·Options available to the user will be displayed at the bottom of the page.
·All options will be displayed as pink icons with labels on.
The basic layout of each web page on the site will be the same as this. Some pages will have
more or less pictures. Some may have more options and some will have several headings, but
they will all conform to the design points listed above.
Every time you create a web page you can specify what the background will be like, what the
title will be and what normal text and hyperlinks will look like.
Background
You can choose a background colour for a page or you can put an image in the background.
If you choose to use an image in the background then it should be a small one. If the
background image is too large it will take a long time to load the page. Many web users will
not be prepared to wait. The image should also be simple so that it does not interfere with the
text that appears in front of it.
The background image is repeated up and down the page to fill up the whole screen. This is
called tiling.

4. Page Title
A web page needs a title. This does not appear on the page itself. Instead it is displayed in the
title bar of the web browser when the page is viewed.
Default Colours
You can set the default colours that should be used on a page. As well as the colour of the
background you can also specify :
·The default colour for normal text.
·The default colour for a visited hyperlink.
·The default colour for an unvisited hyperlink.
4. Text Style
When you produce a word processed document you can choose what fonts and sizes to use
from a list of fonts that are installed on your computer. You can get your document to look
exactly how you want it to.
Designing a web page is more difficult. This is because different computers have different
fonts installed. If you use a particular font on a page you can not be sure that a person reading
the page will have the same font. Web design packages use two different approaches to
overcome this problem.
Styles
A range of pre-defined styles which each have a name can be selected. As
well as normal text there are six types of heading and several other styles.
When you design a web page you use these styles. You do not know
exactly how the text will appear when it is looked at but you know that
heading style one will stand out more than heading style two and so on.
Font
Matching
Using font matching you can pick the font and font size that you want to
use for your text from the fonts that are installed on your computer. If a
person who looks at your web page does not have the same font his web
browser will use the most similar font that is available. To increase the
probability that another person has the same font as you it is a good idea
to only use common fonts such as Times New Roman or Arial. Font
matching only works with newer web browsers.
Font Style
Each font can have a range of extra styles applied to it. The three common styles that can be
used on a web page are :
·Normal : No special style is applied to the font.

5. ·Italic : The font will be displayed as if it is leaning slightly to the right.
·Bold : The lines used to draw the font will be drawn extra thick to make the text stand
out.
Underline style can also be used on web pages but this is not normally done. This is because
hyperlinks are underlined so underlined text could easily be mistaken for a hyperlink.
Alignment
Alignment describes the position at which text appears on a line on the page. On a web page,
text can be aligned to the left, center or right of the page.
Font Colour
The colour of text can be specified. Most web pages make use of lots of colour because they
are displayed on monitors which can easily show colour. If it is likely that your page will be
printed out then you should check how the colours you have chosen look on a black and
white printout as some colours do not show up very well.
5. Graphics
Web design packages do not usually include a facility to let you create images. Instead you
must obtain an image from another piece of software and bring this into the web design
package. This is known as importing. The three most likely sources of images are :
·Images can be created from scratch in a graphics package.
·Images can selected from a clipart library.
·Photographs can be taken with a digital camera or scanned using a scanner.
Images take up a lot more storage space than text does. When a person looks at a web page
the files that make up the page must be transferred over the Internet to his computer. If a
web page contains an image it will take a lot longer to access than a text only page.
To speed up page loading, images on a web page must be stored in one of two special
formats. These formats are GIF and JPEG. Both formats compress the image data so that it
can be loaded more quickly.
GIF
A GIF file is a compressed graphics file. GIF files store information about
sequences of pixels. An image saved as a GIF file will look exactly the same
as the original image. GIF files usually take up more space than JPEG files.
GIF files are often used for banners and icons.
JPEG JPEG files are highly compressed graphics files. JPEG files can store an image
in a very small space. However some detail can be lost from an image when it

6. is stored as a JPEG file. For this reason photographs are usually stored as
image files but icons and banners can not be stored in this format.
Images in other formats such as bitmaps must be converted to one of these formats before
they are put on a web page. A web design package will probably do this automatically.
6. Hyperlinks
A hyperlink is a connection between two web pages. If you select a hyperlink on a page then
you will be taken to the page that the hyperlink joins to. Hyperlinks can be represented as
either text or a small image known as an icon.
A Text Hyperlink An Icon Hyperlink
This diagram shows three web pages which are part of a site about the North West of
England.
Clicking on the Manchester hyperlink on the main North West page would take you to the
page about Manchester. Clicking on the cotton hyperlink would tke you to the page about
cotton.
Most web browsers display links that you have visited in a different colour to links that you
have not visited. Unvisited links are normally blue.
To create a hyperlink on a web page you normally type the text that you want the user to
click on or import the image for the icon. Then you select the text or icon and identify which
page the link goes to.

7. Sometimes when you click on a hyperlink it does not work because the page that it should
link to does not exist. Most web design packages will automatically test the web site that you
create to make sure that all of the links work.
7. Hot Spots
A hot spot is an area of an image which acts as a hyperlink. When a person clicks on a hot
spot a hyperlink is followed to another page. The person viewing the web page can not see
where the hot spots are but when the mouse pointer moves over a hot spot it will change
shape.
This image of a computer could be used on a web site about computers. It contains five hot
spots but they are invisible.
This is the same image but with the hot spots highlighted in colour. They would not normally
be visible.
If the user clicked on the image over the light blue hot spot he would be taken to a page about
monitors. Clicking over the yellow hot spot would take the user to a page about keyboards.
Hot spots are either rectangular or elliptical in shape. To create a hot spot on an image you
simply need to select the area that the hot spot should cover and then specify what page
should be loaded when the mouse is clicked in this area. You can create any number of hot
spots on an image but they should not overlap with each other.
8. Tables
Tables can be used to set data out neatly like this :
ModelProcessor SpeedRAM CapacityHDD Capacity

8. Fasta1000Mhz 256Mb 18Gb
Moderata500Mhz 64Mb 6Gb
Slowa66Mhz 8Mb 2Gb
When you create a table you specify :
·How many rows and columns the table should have.
·How wide each column should be.
·What colour the cells in the table should be.
·What style of border should be drawn around each cell (or if no border is required).
The height of each cell will automatically adjust so that the information that you type into it
will fit. It is also possible to merge adjacent cells in a table together to form merged cells
which cover more than one row or column.
Merged
Cells


Merged Cells
Using Tables For Page Layout
Tables can also be used for a second purpose. When you create a web page you can not
simply position text and pictures wherever you want on the page as you could with a
desktop publisher. If you want to create complicated page layouts with multiple columns of
text then you can use tables to achieve this effect.
Suppose that you wanted to create a page like this :
This can be achieved by creating a table and merging the cells in the table together to form
the shapes required for the different sections of the page.

9. The information that is to appear on the page can be typed into the cells of the table. You can
place any type of information, including pictures and other tables in a cell.
9. Frames
Frames are used to create web pages where one section of the page can be changed
independently of another section.
This is often done when web sites have a navigation panel at the side or bottom of the page.
The panel contains icons which can be used to switch between the pages on the site. Selecting
one of the icons will change the page that is displayed on the main part of the screen, but the
navigation panel will remain the same.
Each frame is identified by a name. When a hyperlink is created the web designer can
specify which of the frames to load the link page into when it is selected.
10. Forms
A form is used to obtain feedback from the people who use a website. Forms can be used to
gather people's opinions about a site or to gather information that a company or organisation
might want.
Forms can be built up from several different types of controls. Some of the most important
ones are shown in this table.

10. Short
Text
Entry
A short text entry box lets the user type in
information. The web designer can specify
the maximum number of characters that can
be typed.
What is your surname ?
Long
Text
Entry
A long text entry box lets the user type in
information. The text input area can be
scrolled to allow a lot of text to be entered.
Please enter your comments
on this site :
Radio
Button
Radio buttons let the user select one or more
options from a list. The web designer
chooses how many options can be picked at
once.
Are you male or female ?
Male
Female
List Box
A list box lets the user choose one option
from a list.
Please select your age
group :
Push
Buttons
Buttons are used to start actions such as
sending the contents of the form or clearing
the form.
When a form has been completed the data that the user has entered must be sent to the person
who runs the website. This can be done by transmission by email or by saving the form
contents to a file on a web server.
11. Advanced Design Tools
There are many different technologies which can be used to enhanced a web page. Some of
these will only work with newer web browsers. Others require an extra piece of software
called a plug-in to be installed in addition to the browser. Some of these additional
technologies are listed below.
Javascript
Javascript is a simple programming language. Programs (or scripts)
written in this language are often used to validate data entered onto a
form before it is sent.
Java
Java is a complete programming language. Programs written in Java can
be used in a web browser on any type of computer.
Animated
GIFs
An animated GIF is a sequence of images which are displayed one after
the other in rapid succession. This has the effect of displaying an
animation.
Sound
Sound can be added to web pages. This can be in the form of music
playing in the background whilst a page is displayed or noises which are
made when options are selected.
Video There are many different systems which can be used to display video

11. over the Internet. Videos require a lot of storage space and take a long
time to transmit. Therefore video over the Internet is usually poor quality
with a small image size and just a few frames per second.
12. Uploading
Whilst you are developing a web site you will probably store it on the hard disk of your
computer. When it is complete you will need to upload it onto a web server so that other
people can access it.
A web server is a computer which stores web pages. It responds to requests to view pages
from other computers by sending the required pages to them. Many web servers are
connected to the Internet.
Some web servers are not connected to the Internet but are connected to a private network
that is owned by a company. If this is the case then only people within the company will be
able to view the pages on the server. This is known as an Intranet.
The process of transferring your web site onto a web server is known as uploading. A service
called File Transfer Protocol (FTP) is used for this purpose.