R E V I E W I T ! D O I T ! AND

BTT_Chapter_10
3/8/07
10:46 PM
Page 283
REVIEW IT! AND DO IT!
1. What does hierarchical mean in web design?
2. What is a breadcrumb trail? Why is it important?
3. In addition to the three principles of graphic design, there are two
concepts of web design. Explain these two concepts.
4. What is one of the best ways to organize and display information on
web pages?
5. Discuss your favourite websites with a partner. Now, pick just one of
these sites for the following activity:
(a) Make a list of the type of information on the site’s home page.
(b) Explain how the site uses or does not use each of the principles
of graphic design and the concepts of web design.
(c) Create a usability rating scale from one to five. Make a legend
that explains what each of the five ratings means. For example,
a rating of five out of five could mean all information is easily
accessible and navigation structure is easy to use, whereas a
rating of one out of five could mean this website is very
confusing, and I could not find anything. Once you have created
your rating system, rate the site’s usability out of five, and
then write a short review justifying your rating.
How to Make a Website
Implementation is the part of the website-design process that most
people associate with making websites. This stage involves everything
from preparing graphic elements such as buttons and pictures, to
putting text and images into pages, and adding hyperlinks.
Figure 10.12 Creating graphic elements, such as buttons,
is part of the website design process.
NEL
A P P L I C A T I O N S T H A T G E T Y O U N O T I C E D—W E B D E S I G N
283
BTT_Chapter_10
3/8/07
10:46 PM
Page 284
File Management
Before starting to create a website, you should always create a
folder that will hold all of your website’s files or assets. These assets
will include all of your site’s HTML files, images, animations, and
so on. This is important because if your files are not all held in an
appropriate, central place, you may run into problems when
inserting images and links. If your viewers experience missing
images and broken links, this will damage your credibility.
The first web page that you create will be your home page. It
should usually be named index.htm or index.html because if a user
types in your URL without a file name specified, the web server
automatically looks for a default file. This default file name is set by
the web server’s administrator, and is usually index, although it could
also be default or something else. If the web server looks for a page
but cannot find one with the default name, you risk an error message
being displayed on your user’s screen or, more worrisome, the entire
contents of your website being displayed as a list of files that can be
downloaded and taken by the website’s user.
Remember that web servers often enforce case sensitivity, which
means that Index.htm is not the same as INDEX.htm, which is not
the same as index.htm. As a rule, you should always name your pages
in lowercase letters without spaces. If you are tempted to put a space
in a file name, use an underscore or hyphen instead.
Figure 10.13 WYSIWYG
web-editing software allows
you to create a web page
quickly and easily.
WYSIWYG
GET ON IT! PROJECT UPDATE
Using your hierarchy diagram, go through each of the pages and decide
on an appropriate file name for each. Start with your home page. This
should be called index.htm, as discussed above. All your other pages
should be given names that are relevant to their content. For example, a
page about motivation could be called motivation.htm. Add these file
names to your hierarchy diagram.
Creating Pages
Websites are most often created using a coding language called
HyperText Markup Language (HTML). This code determines how a
page of text will look when it is displayed in a web browser. The
good news is that with today’s powerful What You See Is What You
Get (WYSIWYG) web editors such as Macromedia Dreamweaver
and Microsoft FrontPage, you may never have to see HTML, let
284
B U S I N E S S T E C H N O L O G Y TO D AY
NEL
BTT_Chapter_10
3/8/07
10:46 PM
Page 285
alone understand it. WYSIWYG web-editing software allows you
to create a web page while it does the more complicated work of
generating HTML behind the scenes. However, you no longer even
have to have a web editor to make web pages. In fact, you can now
create web pages from just about any software by using the Save As
command on the File menu. For example, when you have created
a document in most versions of Microsoft Word, you can go to
Save As, and then select HTML from Save As Type, as shown in
Figure 10.14 below.
Figure 10.14 Using the
Save As command, you can
create web pages without
a web editor.
When using Corel WordPerfect, use the Publish to HTML
command on the File menu. Another option is to use one of the
website wizards in a desktop-publishing program like Microsoft
Publisher. These will create your full website, including navigation,
so that all you have to do is edit the content.
Figure 10.15 A typical HTML
page created in Macromedia
Dreamweaver
NEL
A P P L I C A T I O N S T H A T G E T Y O U N O T I C E D—W E B D E S I G N
285
BTT_Chapter_10
3/8/07
10:46 PM
QUICK BYTE
CLOSING TAGS—HTML
AND XHTML
In HTML, closing tags are not
required for the <br>, <hr>,
and <img> tags. However, in
Extensible Hypertext Markup
Language (XHTML), they are.
XHTML is a stricter and
cleaner version of HTML, and
it is emerging as the new
standard for writing web
pages. This does not mean
that you would use <br></br>
to create an opening and
closing tag for a line break. In
fact, both opening and closing
are combined into one tag.
Therefore, the correct tags for
those without a closing tag in
HTML are as follows:
HTML
<br>
<hr>
<img>
XHMTL
<br />
<hr />
<img />
In addition to requiring
closing tags, XHTML requires
that all tags be typed using
lowercase letters. To learn
more about the differences
between HTML and XHTML,
and about writing HTML files,
go to www.nelson.com/btt.
Page 286
HTML files are just text files with special instructions, called
tags, within them. These tags can be identified by their angle brackets
(< and >). They tell a web browser what to do with the information
that they hold. The HTML in Figure 10.15 on the previous page
would be translated by the browser as follows:
Line
Tag
What the HTML Tag Tells the Browser
1
<html>
The following text should be interpreted as HTML.
2
<head>
The following text should not be shown in the browser.
3
<title>
The text between <title> and </title> should be interpreted as the
title of the page and displayed in the browser’s title bar.
4
</head>
The head of this document is ending.
5
<body>
The text that follows should be considered the body of the page. The
body contains the page’s content and should be displayed to users.
6
<p>
The text between <p> and </p> should be interpreted as a paragraph.
7
</body>
The page’s content ends here.
8
</html>
Stop interpreting text as HTML.
Figure 10.16 What the HTML tag tells the browser
The three tags that all HTML documents must have are <html>,
<head>, and <body>. Beyond that, you are free to use whatever you
would like. Figure 10.17 below shows a summary of basic tags.
Tag
What It Does
Closing Tag
<p>
Defines a paragraph
</p>
<br>
Forces a line break
Not required
<h1>
Creates a level-one heading
</h1>
<h2>
Creates a level-two heading
</h2>
<hr>
Creates a horizontal rule or line across the page
Not required
<a>
Anchor used to define a hyperlink
</a>
<ul>
Creates an unordered or bulleted list
</ul>
<ol>
Creates an ordered or numbered list
</ol>
<li>
Defines an item in an unordered or ordered list
</li>
<table>
Creates a table
</table>
<tr>
Defines a table row
</tr>
<td>
Defines table data or a table cell
</td>
<img>
Inserts an image
Not required
Figure 10.17 What HTML tags do
286
B U S I N E S S T E C H N O L O G Y TO D AY
NEL
BTT_Chapter_10
3/8/07
10:46 PM
Page 287
REVIEW IT! AND DO IT!
QUICK BYTE
1. Why should all of a website’s files be in one folder?
2. What should the file name of a website’s home page be? Why?
3. Explain what case sensitivity means.
4. Explain what HTML tags do.
5. What three tags must be included in all HTML pages?
6. Open a text editor like Notepad. Key in the HTML-page text shown in
Figure 10.15. When you have finished, select the Save command from the
File menu. Enter test.htm as the file name. Change Save As Type: to All
Files. Click Save. Now go to the place on your computer where you saved
test.htm using Windows Explorer. Double-click the file, and it should open
in your computer’s default web browser. Take a look at the browser’s title
bar. Does it say My First Web Page? Go back to your Notepad file and
change what the paragraph text says (text after the <body> tag). Save
your file in Notepad again, and then refresh your browser. Did the text
change? Try out some of the other tags.
7. Go to www.nelson.com/btt. Work through some of the examples
provided. You will get to try out all kinds of tags, including those
for creating tables.
GET ON IT! PROJECT UPDATE
CASCADING STYLE
SHEETS (CSS)
Chances are that you
will want to change the
appearance of the default
heading and paragraph
text in your web editor.
You can always do this using
the associated properties;
however, this is not the
best way to make things
look good and consistent.
The most efficient and
professional way to achieve
consistent formatting is
through the use of Cascading
Style Sheets (CSS). CSS
define how to display HTML
elements. You can set
everything from fonts and
colours to line spacing
and alignment. To learn
how to use styles, go to
www.nelson.com/btt.
Earlier in this chapter, you created sketches for your website’s pages.
If you used a table structure as was suggested, it will be easy to create
your home page’s structure using a web editor. Open a new file, and
save it immediately as index.htm. Now use your web editor’s tools to
create tables that are the same as in your design. You can now add text
to the appropriate table cells. You will add images as you work through
the next section of the text.
Preparing Images
As you will recall from Chapter 9, there are certain types of files
that can be used on the Web and others that cannot. To use images
on the Web, you need to resize them and export them in JPEG, GIF,
or—in cases where image quality is very important—PNG format.
NEL
A P P L I C A T I O N S T H A T G E T Y O U N O T I C E D—W E B D E S I G N
287
BTT_Chapter_10
12/2/07
5:22 PM
Page 288
Other image formats are not compatible with web-browser software.
Note that PNG files are much larger than JPEG or GIF files, and,
therefore, they will take longer to download. Remember, anything
that increases the loading time of your web page reduces its usability,
and so reduces the likelihood that people will read it.
When resizing images, you should do so in a graphics editor
instead of a web editor. This is because if you resize an image in a
web editor, it retains its original file size, which is often very large.
In addition, image quality suffers. However, if you resize in a graphics
editor, the file size is dramatically reduced, and the image retains
its quality. Often, you can perform two tasks at once by using the
Export Preview or Save for Web command in your graphics editor.
You will then be able to resize your image and export it as a websupported format.
When saving images for your website, it is a good idea to keep
them organized in a folder. This folder can be called whatever you
like, but images is probably the most obvious and appropriate name.
Ensure that you keep your images folder inside your website folder,
and that you save in it only images that are for use on your web
pages. It should not contain any HTML pages or original graphic files
in native bitmap or vector formats from programs such as Adobe
Photoshop or Macromedia Freehand. These original files should be
kept safe elsewhere in case you need to go back to them later.
GIF
JPEG
Figure 10.18 Images on
websites are usually one of two
different formats: GIF or JPEG.
288
B U S I N E S S T E C H N O L O G Y TO D AY
NEL
BTT_Chapter_10
3/8/07
10:46 PM
Page 289
GET ON IT! PROJECT UPDATE
Get out your hierarchy diagram for your Chapter Project
website. Look at Figure 10.19 below. This table has
Page
File Name
Images Required
Exercise
home
index.htm
• banner
• site logo
• buttons
Weight
training
weight-training.htm
•
•
•
•
banner
site logo
buttons
photograph of teen
lifting weights
Figure 10.19 Keeping track of assets for website pages
been created to keep track of all of the resources
needed for each of the pages in the exercise site for
teenage boys. You can see that the page’s subject is
placed in the first column, the file name (also found
on your hierarchy diagram) is in the second column,
and the images that will be required for the page
are placed in the third column. Now, use your own
hierarchy diagram to create a similar table for your
own website. Ensure that you include all of the
pages in your site.
Once you have completed your table, collect all
of the images that you require for your home page, and
use your web editor to place them onto your page.
Adding Hyperlinks
As you learned in Chapter 3, the wonderful thing about the
Internet is that you can move from document to document easily
using hyperlinks. These are very simple to create, whether you
are using a web editor, word-processing software, or desktoppublishing software:
• Macromedia Dreamweaver—Select the text or image that you
want to convert to a link. Then key or paste the URL into the
Link property box on the Properties panel or browse for a file
in your web folder on your computer.
• Microsoft FrontPage, Word, Publisher—Select the text or image
that you want to convert to a link, and then select the Hyperlink
command from the Insert menu. Select a document in your web
folder on your computer, or type or paste a URL.
• Corel WordPerfect—Select the text or image that you want to
convert to a link, and then select the Hyperlink command from
the Tools menu. Select a document in your web folder on your
computer, or key or paste a URL.
When you are entering a URL for your hyperlink, you must
ensure that it starts with http://, which tells the browser to use
HyperText Transfer Protocol to access the web page.
Figure 10.20 You can use many
different kinds of application
software to create hyperlinks.
NEL
A P P L I C A T I O N S T H A T G E T Y O U N O T I C E D—W E B D E S I G N
289
BTT_Chapter_10
3/8/07
10:46 PM
Page 290
GET ON IT! PROJECT UPDATE
So far, you have saved your home page, created the structure using
HTML tables, entered text, and added images. Now you must put some
text-based hyperlinks into your page. Ensure that you use the instructions
from this chapter to incorporate at least five different hyperlinks to
sites that are related to the content on your home page.
Getting It Online
In order to get your website online, you need two things: a domain
name and space on a web server. If you want to register a dot-ca
domain name, you must find a registrar that is certified by the Canadian
Internet Registration Authority (CIRA). A registrar is a company that
specializes in registering domain names. Most of the CIRA-certified
registrars also offer dot-com, dot-net, and dot-org addresses. However,
be aware that prices range dramatically from company to company.
It is a good idea to shop around for the best deal.
Figure 10.21 All dot-ca
domain names must be registered
with a CIRA-certified registrar.
BIZTEK DVD
E-Commerce
Shopping on the Internet is
the latest trend for retailers,
but is the high cost of startup worth the investment?
After viewing the clip, make a
list of things a web designer
should consider and/or do in
order to make an e-commerce
site more effective. Explore
the world of Internet shopping,
and discuss how it reflects
the design of websites.
290
B U S I N E S S T E C H N O L O G Y TO D AY
Once you have secured your domain name, you will require a
host that will supply space on a web server. Although you can find
various hosts that cost money, there are also many free hosting
services out there. Some allow you to have open File Transfer
Protocol (FTP) access so that you can upload your pages using an
application like GlobalSCAPE’s CuteFTP, SmartFTP, or Fetch (for
Mac users). Others will restrict your FTP usage by making you
employ their web-based applications to upload your files. It is the
hosting service’s responsibility to administer the web servers and
ensure that your website is online.
NEL