64
Web design 1: Introduction to creating a website
Web design 1: Introduction to creating a website (web-t3)
15
¾
Open your index.html page and in the second paragraph create the following
links:
Text
Relative URL
about me
aboutme.html
favourite hobbies
hobbies.html
contact information
contact.html
¾
Save, preview and try your links – notice that at the moment only your link to
aboutme.html works, as the other two files do not exist yet.
6.3 At the moment, the only way you can come back to your homepage (index.html) is
by clicking the Back button on the browser.
¾
Create a link back from your aboutme.html page to your index.html page.
¾
Save, preview and try the links; you should now be able to navigate between your
two pages without relying on the browser's Back button.
Linking to an 'anchor' within a page
6.4 Linking to a specific anchor within a page is particularly useful when you have long
pages that don't display on a single screen. Forcing your users to scroll up and down the
page is an option but you can make life easier for them by providing links that will
enable them to jump to specific sections in your page.
There are two stages when creating this type of link:
1. creating an anchor, that is naming the specific location on your page where you
want users to jump to,
2. creating a link to that anchor.
First of all you need to add some content to your aboutme.html page, in order to
make the page long enough to see the effect properly:
¾
Open the following page in a browser:
www.bristol.ac.uk/is/learning/websupport/resources/
.
¾
Follow the link:
Web design 1: Introduction to creating a Website using
Dreamweaver MX
.
¾
Scroll down to the Sample content for 'About me' page section.
¾
Select and copy the sample code and text.
¾
Paste it between the <body> and </body> tags of your aboutme.html page
after deleting the current content.
¾
Replace Joe Bloggs with your own name in the <h1> tag if you want.
¾
Save your file and preview it to see the changes.
You are going to link the items of the table of contents (numbered list) at the top of the
page to the relevant section further down the page.
Note
You will be able to change/edit the content of this page later on.
6.5 First you are going to name the anchors where you want to link to, in this case, all the
level 3 headings, by using the id attribute in the <h3> tags. The id attribute defines a
unique name (in other words, no two elements can be named with the same id).
¾
Modify the first <h3> section head as follows:
57
Web design 1: Introduction to creating a website
Web design 1: Introduction to creating a website (web-t3)
16
<h3 id="bio_info">Biographical information:</h3>.
¾
In the same way, give a unique id to the other three <h3> section heads using the
names in the table below:
Section heading
id
My three favourite books
fav_books
My three favourite films
fav_films
My three favourite websites
fav_websites
Note
While the id="name" attribute may be added to most (X)HTML structural elements
(eg h1, h2, p, etc), they are particularly useful with the <div>…</div> and
<span>…</span> elements. This is covered in Web Design 3.
6.6 Now that you have defined your anchors, you can create links to them. The syntax for
linking to an anchor is similar to other links, except that (X)HTML uses the # sign to tell
browsers to look for an anchor rather than a file:
<a href="#anchor_name">Link name</a>.
¾
Create a link from the first list item in the table of content to the corresponding
section as follows:
<li><a href="#bio_info">Biographical
information</a></li>
¾
Create the links from the remaining list items in the table of content to the
corresponding section – be careful to use the same anchor name that you used to
name the ids in task 6.5.
¾
Save, preview and try your links (you may need to decrease the size of the browser
to see the full effect).
Linking to an e-mail address
Another useful type of link is the mailto:email@address which causes the
default e-mail client application of users to open and makes it possible for users to send
emails to the address specified.
6.7 You will add such a link at the bottom of your two pages. First, go to your
index.html file and add the following just above the closing </body> tag:
Maintained by:
<a href="mailto:your.name@bristol.ac.uk">
your.name@Bristol.ac.uk</a>
<br />
Last updated: <em>30th September 2003</em>
6.8 Save and view in your browser.
TIP
Similarly, you can easily create links that will take your visitors back to the top of the page.
All you need to do is to add the following line where you want a link back up to the top of
your page to appear.
1. Create an anchor at the top of your pages by adding the following line immediately
below the <body> tag:
<a name="top"></a>
2. Then create a link to this anchor by adding the following line wherever you want a
"back to top" link (for example, at the end of each section):
<a href="#top">Top</a>
38
Web design 1: Introduction to creating a website
Web design 1: Introduction to creating a website (web-t3)
17
6.9 Finally, select, copy and paste this block of code into your aboutme.html file.
Note
You have created a simple signature giving valuable information to users of your site:
who is in charge of this site? How up-to-date is the information it contains?
Review task - creating a simple navigation bar
6.10 Now that you know how to create links you are going to create a simple navigation bar
that you can re-use in all your pages.
Write the code to insert a navigation bar at the bottom of your index.html page as
illustrated in figure 12 below:
Figure 12 - a simple navigation bar
Tips:
Make the links as follows:
Text
Relative URL
UoB home
http://www.bristol.ac.uk
Home
index.html
About me
aboutme.html
Hobbies
hobbies.html
Contact
contact.html
¾
To obtain the vertical bar (|) that separates the links, press <Shift+\> the
backward slash key, to the left of the Z key on the keyboard.
¾
Frame your navigation bar between two horizontal rules.
¾
Copy and paste the navigation bar into your other page(s) (aboutme.html).
The correct code is available at:
www.bristol.ac.uk/is/learning/websupport/resources/
and follow the link to Web design 1: Introduction to creating a
website using Dreamweaver MX
59
Web design 1: Introduction to creating a website
Web design 1: Introduction to creating a website (web-t3)
18
Task 7 Using images
Objectives
To add images to your web pages.
Method
You will use the <img src="image_filename" /> syntax to include an image.
Comments
The src attribute of the <img> tag specifies the source (that is, name and location) of
an image. The image can either be located on a remote server or on your computer's hard
disk. You will normally use gif (used for simple illustrations, logos, cartoons etc.) or
jpeg (used for photographs and complex illustrations) image formats in your (X)HTML
documents.
Creating an images folder
7.1 First you are going to create a new folder in your local directory called images:
¾
Go to Start/Programs/Accessories/Windows Explorer. Find your
local directory (C:\USER\WWW\Web design 1).
¾
Then go to File/New/Folder and type in images.
Note
It is good practice to keep your images in a separate folder. This will make it easier to
maintain your site as it grows.
Inserting an image on a page
7.2 There are two ways to obtain images: either you create an image yourself (based on a
scanned photograph or from scratch) using a graphics package (for example, Adobe
Illustrator, PhotoShop etc), or you use an existing image already optimised for
the web (that is, gif or jpeg format). Since it is not within the scope of the present
course to teach you how to create images, we'll go for the second option.
¾
Re-open the page
www.bristol.ac.uk/is/selfhelp/websupport/resources
in a browser (you may still have it opened on your desktop).
¾
Click on Web Design 1: Introduction to creating a Website using Dreamweaver MX
¾
Download the University logo (uob-logo-tr.gif) into the images folder you
have just created. Repeat for the image of the watch (watch.jpg).
7.3 The basic syntax for inserting an image is:
<img src="image_file_name" />
The image element has a number of attributes, three of which you should always include:
the width (width), the height (height) and alternative text (alt):
Attribute
Values
width
x – eg width="150"
height
y – eg height="100"
alt
Brief and meaningful description of the image
¾
Go back to your index.html file and insert the following code just below the
<body> tag:
<img src="images/uob-logo-tr.gif" width="141"
height="41" alt="University of Bristol logo" />
¾
In the same way, insert the image watch.jpg just below the line
<h2>Welcome!</h2>.
34
Web design 1: Introduction to creating a website
Web design 1: Introduction to creating a website (web-t3)
19
¾
Save and preview in a browser. You should see something like this:
Figure 13 - adding an image
Note
Providing alternative text for images is one of the basic requirements to ensure that your
pages are accessible to people with disabilities.
Controlling the position of images
7.4 You can use the align attribute in the <img /> tag to make images float left or right
of your page, with text wrapping around.
¾
Add an align attribute to your two images, and experiment with the values left
and right.
For example:
<img src="/images/uob-logo-tr.jpg" width="141"
height="41" alt="University of Bristol logo"
align="left" />.
Don't forget to save and preview after each change.
Once you've finished experimenting, align the University logo to the right and the
image of the watch to the left.
¾
Save
7.5 You can also add space around your images by using the hspace (and vspace
attributes. hspace="x" will add space on both the left and right sides of the image
while vspace="y" will add space above and below the image (x and y are the
number of pixels of space).
¾
Add some space around your images and experiment with different values.
For example:
<img src="/images/watch.jpg" width="141" height="41"
alt="close up image of pocket watch" align="right"
hspace="10" vspace="5" />
35
Web design 1: Introduction to creating a website
Web design 1: Introduction to creating a website (web-t3)
20
Don't forget to save and preview after each change.
Once you've tried a few things, remove the hspace and vspace from the
University logo.
¾
Save.
Your page should now look something like this:
Figure 14 - floating images around text
Note
The align, hspace and vspace attributes are deprecated; ideally you should use
styles in a style sheet to control the alignment of and space around images. Styles give
you more flexibility. For example with hspace and vspace you cannot add space just
to one side, whereas in CSS you can.
Making an image a link
7.6 Finally, you can use an image as a link to another page. To illustrate this, we will link the
University logo to the University home page.
All you need to do is enclose the image of the University logo between the <a
href="url">…</a> tags as follows :
<a href="http://www.bristol.ac.uk"><img src="/images/ uob-
logo-tr.jpg " alt="University of Bristol home" width="84"
height="100" align="right" /></a>
Note
Since we've made the University of Bristol logo a link, it is appropriate to change the
alternative text to alt="University of Bristol home", which conveys the
function of the image (link to the University of Bristol homepage). It is more meaningful
in this context than alt="University of Bristol logo", which merely
describes the content of the image (University of Bristol logo).
7.7 Save and view in your browser. Notice that an ugly frame has appeared around your
image now that it is a link. To get rid of it you need to add the border="0" attribute to
the <img /> tag:
<a href="http://www.bris.ac.uk"><img src="/images/uob-logo-
tr.jpg " alt="University of Bristol home" width="141"
height="41" align="right" border="0" /></a>.
56
Web design 1: Introduction to creating a website
Web design 1: Introduction to creating a website (web-t3)
21
Task 8 Using tables
Objectives
To create a table for displaying tabular data.
Method
You will create a standard table to present data.
Comments
You will use the following tags:
table:
<table>…</table>
table row:
<tr>…</tr>
table data (cell):
<td>…</td>
table head (cell):
<th>…</th>
Displaying tabular data in a standard table
Creating a table in (X)HTML is a relatively simple task, based largely on the 'containing'
and 'nesting' principles that apply to most tags or elements. A table is defined with the
<table> element. Each table has a set of rows, and each row has several cells
containing the table data. They are represented using the <tr> and <td> elements.
A simple, three-cell, three-column table (see Figure 11) would be coded as follows:
<h3>A simple table:</h3>
<table border="1"> <!-- table opens -->
<!-- first row -->
<tr>
<th></th>
<th>Col 1</th>
<th>col 2</th>
</tr>
<!-- second row -->
<tr>
<th>Row 1</th>
<td>cell 1 1</td>
<td>cell 1 2</td>
</tr>
<!-- third row -->
<tr>
<th>Row 2</th>
<td>cell 2 1</td>
<td>cell 2 2</td>
</tr>
</table> <!-- table ends -->
… and look like Figure 15 (on the following page) in a browser.
Hint: a line such as <!-- first
row --> is called a comment.
Comments can be inserted anywhere in
your page to document it. Although
they appear in the source code,
browsers ignore them. They must be
contained between the special <!--
and --> markup elements and there
must be a space after the opening <!--
and before the closing -->.
33
Web design 1: Introduction to creating a website
Web design 1: Introduction to creating a website (web-t3)
22
Figure 15 - a simple table
Notice that:
•
the attribute border in the opening <table> tag creates a border around the table
(default is no border);
•
the table header tags <th> centre-align the cell content and render the text bold.
•
none of the tags - bar <table> - include attributes; this is the default table
layout: the table is aligned to the left of the browser window, cell content is
aligned to the left and cells stretch to accommodate the largest item in the cell.
¾
Open your aboutme.html file and replace the unordered list of the My three
favourite films section with a table. Follow the example code above to create
a four row, three column table as illustrated in Figure 16:
Figure 16 - favourite films table
Table attributes
Attributes can be applied to all table tags; in general, those applied to
<tr>
tags override
those applied to the
<table>
tag. In the same way,
<td>
and
<th>
attributes
supersede
<tr>
attributes.
56
Web design 1: Introduction to creating a website
Web design 1: Introduction to creating a website (web-t3)
23
<table> tag attributes - apply to the table as a whole:
Attribute
What it does
Values
width
specifies the width of the
table
pixel value or percentage
align
aligns the table horizontally left (default), center or
right
border
sets a border between cells
and the thickness of the
external border
pixel value - default is 0 or 1
cellpadding
controls amount of space
between the edge of a cell
and its content
pixel value - default is 1
cellspacing
controls the amount of space
between adjacent cells
pixel value - default is 2
For example:
<table align="center" width="80%" border="0" cellpadding="5"
cellspacing="0">
will create a borderless, centred table occupying 80% of the browser window width, 5
pixels space around the content of every cell and no space between cells.
Note that the align attribute in <table> is used to position the table within the
browser window. In all other cases, align refers to the cell content.
<tr> tag attributes – apply to a row of cells
Attribute
What it does
Values
align
sets the horizontal alignment of
content within the row cells
left (default), center or
right
valign
sets vertical alignment of
content within the row cells
top, middle (default) or
bottom
For example:
<tr align="right" valign="bottom">
appearing within the table above, will render the row blue (overriding the pink table
background colour), and align the content of each cell in this row to the right and at the
bottom. Any other attribute is inherited from the
<table>
attributes.
Documents you may be interested
Documents you may be interested
