Applications Software - Web Design. worksheet.

GCSE – Section A – Tools, Techniques and Systems www.ict-teacher.com

<Type your name in here>
APPLICATIONS SOFTWARE
Web design
Over the past ten years the growth of the Internet has led to a vast expansion in the
number of websites available. For example, a web search for the word ‘computer’ using
Google showed that there were about 712,000,000 websites registered with Google that
contained that word – and the search for the letter ‘a’ threw up about 8,500,000,000
websites.
Web design has become big business, and often companies have moved part or all of
their operations onto the web. For example, many people buy their car or home insurance
via a website. This saves both the customer and the company money because the
insurance company does not have to spend money on expensive high street locations
where they can sell their products, and they get the customer to do some of the
administration tasks such as entering their details into the company’s database online.
These savings are passed on to the customer, who in turn gets cheaper insurance.

Individuals have also begun to develop their own websites. These usually relate to their
hobby or interests. For example, genealogy – researching into one’s own family history –
is one of the major non-commercial uses of the Internet, and many genealogists share
their research by creating their own websites.

APPLICATIONS SOFTWARE - Page 1

The earliest websites were designed using html (Hypertext Mark-up Language). These
were a series of commands that had to be typed in exactly in order to work. The following
are some examples of html commands:
<html> Must ALWAYS go at the beginning of the
website program
<body> Should ALWAYS go immediately after<html>
</body> Should ALWAYS go just immediately before
</html>
</html> Must ALWAYS go at the end of the website
program
 Sets the font for the website
 Sets the font size (The largest size is 7, the
smallest is 1)
 Sets the font colour (The choice of colours is
limited to black, silver, gray, white, maroon, red,
purple, fuchsia, green, lime, olive, yellow, navy, blue,
teal, aqua)
<body bgcolor= > Sets the website’s background colour (The choice of
colours is limited to black, silver, gray, white,
maroon, red, purple, fuchsia, green, lime, olive,
yellow, navy, blue, teal, aqua)
 Makes the font BOLD
 Makes the font italic
 Underlines the text
 Starts a new paragraph
 Starts a new line
<hr> Draws a horizontal line across the website
<center> Centre justifies the text
<img src=”(name of file)”> Imports the named image file on to the website
<body background=”(name of file)”> Imports the named file image as a repeated
background image to the website
<a href=(name of file).htm”> Links pages within a website to one another
<a href=http//:(url of website)> Links one website to another
</a> Turns the link ‘off’
A web page could be created using these commands. For example, the following html will
create a very simple three page website1:
index.htm
<html>
<head>

1
Each web page (index.htm, navbar.htm, page1.htm, page2.htm, and page3.htm) has
to be saved as a separate file for the website to work.


It is still possible to design websites just using html, but most modern web designers prefer
to use a web authoring tool or web page design applications program. They are quicker to
use and are very similar to many desk top publishing and word processing programs.
Some of the most common web page design applications programs are Microsoft
FrontPage and Macromedia Dreamweaver. They use html commands to create web
pages but the user does not need to understand html to use the program. The programs
automatically convert the web page the user creates into html. When opened, Microsoft
FrontPage and Macromedia Dreamweaver look like this:

Microsoft
FrontPage

Macromedia
Dreamweaver

Even a relatively unskilled user can create a website using either of these programs.


The html these programs use to create just a simple, one sentence web page is almost as
much as was needed to create the three page website shown earlier.
As you can see for the following example, most of the html has been necessary because
the user has made use of three different font types, three different font sizes, and three
different font colours.
This web page required …

… this much html.

What are the three font styles that are used in this <Type in the name of a font style>
example? <Type in the name of a font style>
<Type in the name of a font style>

The size of the fonts used is shown as a number. What Font size (Number) Font size (pt)
size fonts (in pts) can a web designer use?
1 <Type in the font
size>

2 <Type in the font
size>

3 <Type in the font
size>

4 <Type in the font
size>

5 <Type in the font
size>

6 <Type in the font
size>

7 <Type in the font
size>

The colours are not shown by name but by a Colour Hexadecimal code
combination of symbols and letters (e.g. ‘#FF00FF#’).
These are hexadecimal codes which allow very precise White <Type in the code>
colours to be ‘mixed’ by the web designer. What are the
hexadecimal codes for these colours? Black <Type in the code>

Red <Type in the code>

Green <Type in the code>

Blue <Type in the code>

Before moving on to look at an example of a web page that shows various design
techniques and tools that web designers can use, there is some terminology that you must
understand.
Using a search engine (like Google) and the Internet, find definitions for the following
terms:

Dynamic html <Type your definition here>

Hotlink <Type your definition here>

Hotspot <Type your definition here>

Scrolling text <Type your definition here>

Marquee effect <Type your definition here>

Animated GIF <Type your definition here>


Here is an example of a web page from a website that was created using Microsoft
FrontPage:

This is what the same page looks like in design view:



This web page shows some of the most common web design tools in use.
The first thing to notice is the use of Tables to position the text and graphics exactly where
the designer wants them. This means that when someone views the website, what
appears on screen is exactly what the web designer wanted them to see. It will not be
distorted by the screen resolution of the viewer’s computer or by the web browser they are
using.

Site navigation was made possible by the creation of a navigation bar that contained
hotlinks to the websites other pages. These were created in separate cells in a table. Each
cell contained text that was made into a hotlink.
The scrolling text information …

… were created by the use of the ‘Marquee’ tool.

The ‘Special offers!’ graphic was created in Microsoft
Publisher using WordArt and Autoshapes. It was then
imported into Microsoft Paint, where it was converted into
a GIF image. This was then imported into the web page.
In addition, this graphic changes when the mouse is
moved over it to display the following graphic:



This was also created using
WordArt in Microsoft Publisher
and then converting it into a
GIF image in Microsoft Paint.
The change was achieved by
the use of dynamic html.

The two blocks of text are also animated.

The first … The second …

… flys out to the bottom right corner when it
is clicked on.

… drops in word by word.

Finally, copyright free animated GIFs have been downloaded from the Internet and
inserted into the web page.
If you have completed all the work correctly you should now know the following:
• That html is used to create web pages.
• That web authoring tools can be used to create web pages very quickly.
• That text and images can be imported into web pages.
• That tables can be used by a web designer to position text and graphics exactly
where they want them on a web page.
• That hyperlinks can be created from text and graphics
• That hotspots can be placed over graphics
• That animation can be included on a web page.
You may now print this work off and store it in your user area so that you can use it to
revise from at a later date.

Extension Task:
Using a web authoring tool or web page design applications program, create a single web
page that includes:
• Text.
• At least one imported image.
• At least one hotlink.



• At least one hotspot.
• At least one example of graphic animation, text animation, or dynamic html.


Applications Software - Web Design. worksheet.

Recommandé

Recommandé

Contenu connexe

Similaire à Applications Software - Web Design. worksheet.

Similaire à Applications Software - Web Design. worksheet. (20)

Plus de butest

Plus de butest (20)

Applications Software - Web Design. worksheet.