Download Dreamweaver

UCL
EDUCATION & INFORMATION SUPPORT DIVISION
INFORMATION SYSTEMS
Dreamweaver MX
2004
Creating and
Maintaining
Websites
Part one
Document No. IS-105
Contents
What is Dreamweaver? ................................................................................................................................ 1
Terminology
2
Getting Started ............................................................................................................................................ 3
The Dreamweaver MX 2004 environment
3
Websites and the Site Panel ........................................................................................................................ 6
What is a Website?
6
Local and remote sites
6
Setting up your sites in Dreamweaver – site definition
7
Planning Your Website ............................................................................................................................. 10
Site structure
10
Maintenance needs
10
Common Web page features
10
Creating Web Pages .................................................................................................................................. 11
Creating a new Web page
11
Opening an existing Web page
11
Saving a Web page
12
Document window toolbar
12
Page Properties
13
Text ........................................................................................................................................................... 14
Properties Inspector
14
Paragraph formatting
15
Styles
15
Text formatting
15
Spell-checking
17
Bulleted and numbered lists
17
Horizontal rules
17
Hyperlinks ................................................................................................................................................. 18
Linking to another page
18
Linking to a page on the Internet
19
E-mail links
20
Creating links from thumbnail images
20
Removing a link
20
Images ....................................................................................................................................................... 21
Inserting an image
21
Tables ........................................................................................................................................................ 22
Tables for data
22
Inserting a table
22
Adding table data
23
Inserting images into a table
23
Selecting
23
Merging and splitting cells
24
Tables for layout
25
Nested tables
26
Managing Your Website ........................................................................................................................... 27
Uploading and downloading
27
Site map
28
Accessibility .............................................................................................................................................. 30
Text and colour schemes
30
Links
30
Images
32
Tables
32
Appendix 1 ................................................................................................................................................. 33
Document No IS-105
06/07/2006
Setting up your remote folder at UCL
33
Connection settings
34
Accessing personal homepages
34
Learning More........................................................................................................................................... 35
Getting help with Dreamweaver
35
Introduction
This workbook has been prepared to help anyone wishing to create or maintain a Website using
Dreamweaver. It is recommended that anyone working with websites using Dreamweaver should
attend both Part One and Part Two in order to produce and maintain professional looking websites.
This guide can be used as a reference or tutorial document. You can download the tasks and
accompanying files and the example files used in this manual from the IS web site at:
www.ucl.ac.uk/is/documents/
Document No IS-105
06/07/2006
What is Dreamweaver?
Macromedia Dreamweaver MX 2004 is a powerful WYSIWYG1 tool for constructing Websites. It
offers an intuitive working environment for building cross-platform Websites. Although Dreamweaver
generates the necessary HTML code for you, it doesn’t alter existing HTML code by inserting irrelevant
tags that do nothing but increase the file size. It is part of the Macromedia suite of Web design
products which includes Director, Flash, Fireworks and Authorware. In addition to basic Web page
design, Dreamweaver provides a number of other features including the ability to:

Manage your Website(s) and links effectively.

Incorporate text and graphics easily.

Set up and use templates.

Take advantage of cascading style sheets.

Add rollover images and tables.

Integrate Flash and other Macromedia products smoothly.

Add and modify behaviours.

Insert and manipulate layers.

Create timelines which allow you to have moving objects on your page.

Create framesets and navigation bars.

Create dynamic Web pages, with content extracted from data in databases.
In this course you will learn how to:

Set up and manage a local and remote Website.

Change and control Web page settings.

Use the Properties Inspector and Insert Bar.

Insert images and text.

Create tables.

Create links.
Also covered are the basic principles of good Web page design.
1
What You See Is What You Get
UCL Information Systems
1
What is Dreamweaver?
Terminology
This is a list of some of the most common abbreviations and terms you may come across when starting
to use Dreamweaver and working on Web pages:
Abbreviation/Term Longhand
WWW
World Wide Web
Internet
Browser
URL
HTTP
FTP
Broadband
ADSL
Webpage
Website
Homepage
HTML
XML
CSS
Jpg / Jpeg
Definition
A collection of sites that offers various resources
available through the HyperText Transfer Protocol.
A collection of sites and resources available through
various network protocols – more wide-ranging than
the WWW.
A program used to access Websites and resources on
the Internet.
Uniform Resource Locator
An address to a Website or resource on the World
Wide Web.
HyperText Transfer Protocol A means of transferring data across the Internet –
most often used by browsers.
File Transfer Protocol
A means of transferring data across the Internet –
generally used for uploading files to Websites
A transmission facility having a bandwidth sufficient
to carry multiple voice, video or data channels
simultaneously.
Asymmetric Digital Subscriber Broadband Internet connection.
Line
A Web page is an HTML file that has a specific URL
and is accessible via the WWW.
A collection of related Web pages and files linked
together on a computer connected to the Internet.
The main page or first page of a Web site.
HyperText Markup Language The main language used to write Web pages.
eXtensible Markup Language Another more advanced language used on Web
pages.
Cascading Style Sheets
A method of applying consistent styling and
formatting to Web pages and sites.
Joint Photographic Experts
A format for compressing images (usually
Group (pronounced j-peg)
photographic).
Gif
Graphic Interchange Format
Bmp
BitMap
Mpg / Mpeg
Moving Picture Experts
Group (pronounced m-peg)
-
Frames
Frames divide Web pages into multiple, scrollable
regions (these are no longer recommended).
Web pages whose content is derived from a linked
database.
Non-static Web pages - i.e. those that change
depending on user input, may also be databasedriven.
database driven pages dynamic Web pages
What is Dreamweaver?
Another format for compressing images (usually
images with flat areas of colour).
A Windows image format which should not be used
on the Web.
A standard for digital video and audio compression.
-
2
UCL Information Systems
Getting Started
1. From the Start menu, select Programs. (On WTS, select Software A-H. (This range of letters may vary
in future.)
2. From the submenu choose Dreamweaver, then Dreamweaver MX 2004.
Helpful hint:
The first time you open Dreamweaver, you may be prompted to choose whether you want to work in the old
Dreamweaver 4/MX or the new Dreamweaver MX 2004 environment. This workbook is written for the
Dreamweaver MX 2004 environment.
The Dreamweaver MX 2004 environment
When entering
Dreamweaver
MX 2004 the
screen should be
similar to the one
shown here.
Select HTML to
create a new
HTML page.
Choose to create a
new HTML page
from the New
Window
Tick this box if you
would not like to see
this screen on
startup again.
You should now see the following screen:
Insert Bar
Panel
group
s
Document
toolbar
Files Panel
Document
window
Properties
Inspector
UCL Information Systems
3
Getting Started
The Insert Bar and the Properties Inspector should be displayed. If they are not shown, do the following:
1. From the Window menu, choose Insert and/or Properties.
2. The Insert bar and the Properties Inspector should then be displayed.
Insert Bar
The Insert Bar displays the most common objects you are likely to place on your Web page such as
images and tables. If you cannot see the Insert Bar go to Window | Insert. The buttons available are:
E-mail Link
You can change the
bar view from here.
Image
Media
Tables
Template
Date
By clicking on the Common drop-down list on the Insert Bar, you can change the contents of the bar or
choose Show Tabs to have some of the other bars listed along the top. Some other available bars are
detailed below:
Bar/Tab
Common
Forms
Text
HTML
Buttons
Images, e-mail links, date, tables, templates etc.
Form controls such as radio buttons, check boxes, lists, etc.
Characters not found on the keyboard such as em-dash, euro sign, copyright etc. as
well as line breaks and non-breaking spaces.
Shortcuts for entering data in the head section of the page, such as keywords and a
description (meta tags). You can also insert a horizontal rule (line) from this bar.
Document window
The Document window shows the current document. You can choose any of the following views:
 Code view, a hand-coding environment for writing and editing HTML, JavaScript, server-language
code —such as PHP, Microsoft Active Server Pages (ASP) or ColdFusion Markup Language — and
any other kind of code.
 Split view allows you to see both Code view and Design view for the same document in a single
window.
 Design view, a design environment for visual page layout, visual editing, and rapid application
development. In this view, Dreamweaver displays a fully editable, visual representation of the
document, similar to what you would see viewing the page in a browser.
For more information on views see page 12.
Properties Inspector
The Properties Inspector changes appearance according to what is selected within the Dreamweaver
window. It is used to change the properties of text and other objects on the page such as tables or
images. It can be expanded to show more property options by using the Expander Button. Examples
of the Properties Inspector are shown below:
Contracted view:
Expand Button
Expanded view:
Contract
Button
Getting Started
4
UCL Information Systems
Panel groups
Panels provide a range of tools to aid site design. The Properties Inspector and Insert Bar are both
examples of panels, as is the Site Panel is explained below. Other panels will not be covered in this
course but include the Design, Code and Application Panels which are all displayed by default in the
panel groups on the right-hand side of the workspace.
All panel groups can be expanded or collapsed by clicking on the panel group title, and can also be
docked or undocked with other panel groups. They can also be opened and closed from the Window
menu.
UCL Information Systems
5
Getting Started
Websites and the Site Panel
Sites are fundamental to Web design, and Dreamweaver makes things easy for you by allowing you to
manage your sites via an interface similar to Windows Explorer (the file management program in
Microsoft Windows).
What is a Website?
You may know how to access various Websites – the UCL Website or the BBC Website, for example –
but for the purposes of Web design we need to know what a site physically is.
In fact, it's fundamentally just a folder of files, stored on a computer connected to the Internet. When
you browse the Web, your Web browser sends messages across the Internet, requesting files from a
computer. For example, if you type the URL
http://www.ucl.ac.uk/is/training/index.htm your browser knows which
computer to ask because of the domain name (www.ucl.ac.uk), which is associated with a specific
computer at UCL – the Web server. It knows which file to request from that computer, because the
rest of the URL specifies the file's path and name (index.htm, in the training folder, which itself is in
the IS folder).
Browser
1. HTTP request for
http://www.ucl.ac.uk/is/training/index.htm
2. index.htm file is sent to browser
Normally a Website contains Web pages and files with some common theme – for example UCL’s
Website contains files relating to UCL. Within the UCL site there are other, smaller sites, for individual
departments etc. Files for the smaller sites are organised in subfolders of the main UCL site folder.
Local and remote sites
When designing and editing Web pages it’s a good idea to use a local copy of the site to make changes
so the live site remains unaffected until you are satisfied with your results. Your changes can then be
sent across to the Web server where they will be accessible by all. The figure below illustrates this
process. The local computer contains a copy of the files and folders which make up the Website, and
we can transfer files in either direction between the local computer and the Web server. The local copy
of the Website is simply called the local site, and the copy on the Web server is called the remote site.
You can see that the local site is effectively a mirror image of the remote site.
Local Site
Remote Site
“Get”/”Download” a file
from the web server
“Put”/”Upload” a file
to the web server
Make changes to the files on
your computer
The standard method for sending files from one computer to another like this is called File Transfer
Protocol, or FTP. Dreamweaver takes care of the FTP procedure, as well as allowing you to edit your
local files. This means that the entire process of creating and maintaining your Website can be managed
within one application.
The folder which contains the entire site is called the root folder. In our example the local root folder
is called copy of www.ucl.ac.uk. This folder can be stored anywhere on your computer, and called
anything you like. When you add Web pages and files to your site, you will need to save them into the
local root folder, as only files inside this folder will be uploaded to the remote site.
Websites and the Site Panel
6
UCL Information Systems
So where is my remote site?
If you are working on departmental Web pages, then you’ll need to speak to your departmental Web
co-ordinator (or the UCL Web team) to find out where the departmental Web pages are stored. They
will either be stored on the UCL Web server (as a site within the main UCL site), or on a Web server run
within your department.
If you are intending to work on personal Web pages, you can use space provided by UCL. Every
member of staff, and every student, may use a special folder within their UCL account named
html.pub as their remote site (see Appendix 1 for further details).
If you are using an alternative (such as a commercial Webspace provider) your pages will be stored on a
Web server run by whoever provides the Webspace. They will be able to provide you with details of
how to connect to their Web server.
Setting up your sites in Dreamweaver – site definition
Create the local root folder
Since the local site is simply the contents of a specific folder on your computer, you can use Windows
Explorer to create your local root folder. (Open Windows Explorer and select the drive on which you
want to create your local root folder, e.g. C:, R: or N:. Select New from the File menu, then select
Folder, and give the folder an appropriate name.) Alternatively you can create the local folder through
Dreamweaver, as will be described shortly.
Site definition
The site definition specifies a local site and a remote site. If you are working on several Websites you
will need to create a new definition for each site.
1. From the Site menu, select Manage Sites, and then click the New button and choose Site. The
Site Definition dialog box should appear as below:
Advanced tab
Browse icon
2. In the Category list make sure that Local Info is selected. In the Site Name text box type in an
appropriate name for your site, for example, Training Site.
3. Your Local Root Folder can be located by clicking on the Browse icon. Locate the folder that is to be
the root of your site (the one which you created in Windows Explorer). If you have not already
created your local root folder, you can do this by clicking on the Create New Folder icon in
Dreamweaver's file chooser.
4. Once you have found and opened the folder, click on the Select button to return to the Site
Definition dialog box.
UCL Information Systems
7
Websites and the Site Panel
5. From the list of categories on the left choose Remote Info. Select FTP from the Access box and
you should now see the following options:
Choose Remote
Info.
When you choose FTP
from the Access dropdown box you will now
see these options.
6. To access the remote site of a departmental Website on the UCL server enter details as follows:
Server Access:
Choose FTP from the list
FTP Host:
ftp.ucl.ac.uk
Host Directory:
www
Login:
[Your departmental Web account Login]
Password:
[Your departmental Web account Password]
If you are working in your WTS account, or on a secure computer, you can check the Save box next
to the Password box so that you don’t have to enter the password anew each time you use
Dreamweaver. If you are using a public or shared computer, do not check the Save box. When you
have entered the above information, you can click the Test button to check that you have entered
the details correctly.
Helpful hint:
If you are using the UCL personal Web page server see Appendix 1 for connection details.
7. Click on OK to finish setting up your site definition.
To return to the Site Definition window at any time, choose Define Sites from the Site menu, and then
click on Edit in the dialog box which appears.
Websites and the Site Panel
8
UCL Information Systems
Site Panel
The site is now shown in the Site Panel, which is in the Files panel group. This lets you choose
between viewing the local site or the remote site (switch between the two using the drop down), or if
you would like to see both sites side by side, click the Expand Panel button (press the same button
again to revert to the more compact view).
Expand Panel button
Connect button
The local view shows any files and folders which you have within the local root folder. At first, the
remote site is blank, because we need to connect to the remote site. You can do this by clicking the
Connect button on the panel’s toolbar, or alternatively by selecting Connect from the Site menu.
Dreamweaver will attempt to connect to the remote site. If it is successful, the remote site will appear –
either replacing the local files view or appearing in the left-hand panel of the expanded Site Panel. (If it is
unsuccessful, a message will appear to tell you why it could not connect. Mistyping the settings or
password problems for the remote site can often cause Dreamweaver to fail to connect.)
You are now ready to start work on creating your Web pages. We will return to the Site Panel later,
when we are ready to upload the Web pages we have created to the remote site.
Helpful hint:
Take a note of the local and remote settings which you have entered into the site definition in case you ever
need to input them again. (Do not leave your site password lying around.)
UCL Information Systems
9
Websites and the Site Panel
Planning Your Website
Site structure
The structure of your site, in terms of the different folders and filenames you use, is important. As we
saw earlier, the folder structure is reflected in the URL people will need to type in order to access your
pages. Also bear in mind the following:





Ordinary Web pages have filenames ending in .htm or .html (it doesn't matter which; but it’s a good
idea to be consistent). File and folder names must not contain spaces or symbols (except hyphens
and underscores) and it is recommended to avoid using upper case letters. It is also a good idea to use
short, meaningful names, so that the URLs will be easy to type and to pass on to others (e.g. over the
phone).
http://www.ucl.ac.uk/admissions/postgrad.htm
is much better than http://www.ucl.ac.uk/SECTION_TWO/Page-3.htm
A Web page called index.htm or index.html has a special role as the index page in a folder. If
someone types the URL to access a folder on your Website without specifying the filename,
for example: http://www.ucl.ac.uk/admissions/
the page their browser will display is the index page: http://www.ucl.ac.uk/admissions/index.htm
A useful way to arrange a Website is in a hierarchy according to themes. For example, a departmental
Website could have an admissions folder, containing two folders called undergraduate and
postgraduate, as well as a research folder, which might contain a folder for each research group in
the department.
It is a good idea to have a folder called images in your root directory. In this folder you will store the
images which are to be displayed on your Web pages.
In any significant Website project, there will come a point in the future when new sections need to be
added, or old sections enlarged. It is important that you plan a site’s structure before you create it. If
you create a site, and then later decide to change the names of the folders and the locations of the
files, any links which have been created to your pages (from other Websites) will need to be changed.
Similarly, bookmarks to your pages stored in people's browsers will no longer work. Therefore it's
advisable to create a good folder structure for your Website at the outset, and then to stick with it.
Maintenance needs
The bigger a Website is, the more maintenance it will need. If you're not expecting to have much time
available for keeping your Website up-to-date, it is safest to create a relatively small site, and not to put
information on it which will rapidly go out of date (e.g. “My next public lecture will be on the 13th...”).
Similarly, it is probably unwise to create a News section on your site unless the section is going to be
updated at least weekly with new items.
Common Web page features
You will probably have noticed, while browsing the Internet, that there are some features which are
common to a set of Web pages. An institution or company often has a common format for all of their
pages, and certain pieces of information may be present on each page. Consider what your Website
should have on every page – remembering that people might not see your page in the context you
expect. They may follow a link from someone else's Website, or a bookmark in their Internet browser,
and so might not go via your Website's homepage. Some things you may want to include are:

A link to your homepage

Contact information (your e-mail address – possibly also your telephone/postal address)

The date the page was last updated (though only if you’re likely to be updating pages often!)

A copyright notice

A link to your institution (i.e. UCL)'s homepage.
Planning Your Website
10
UCL Information Systems
Creating Web Pages
Once you have defined the site and planned its structure, you can start to create the Web pages.
Creating a new Web page
To create a new Web page:
1. From the File menu choose New.
2. In the New Document dialog box, select the General tab, then choose HTML under category Basic
Page:
3. Click Create.
4. A new, empty window appears ready for you to create the content. This is a Document window, and it
functions much like a word processor window. You are presented with a blank Web page into
which you can type text, add images, etc.
Opening an existing Web page
1. From the File menu choose Open.
2. Select the file that you wish to edit.
3. Click on Open.
4. The file then opens in the document window.
OR
You can open a page directly from the Files panel, on the right, by double-clicking on it.
Helpful hint:
You can view and switch between all of your open Web pages by using the file
tabs at the top of the screen.
UCL Information Systems
11
Click on the file name to switch
between open pages.
Creating Web Pages
Saving a Web page
1. From the File menu choose Save.
2. Type in a filename in the File Name box, making sure you are saving it in the correct folder.
3. Click on Save.
OR
You can save all of your open Web pages at the same time from the File menu and Save All.
Helpful hint:
If your Web page has not been saved you should see a small asterisk on the
file name tab at the top of the screen. In this example the index.htm page has
not been saved.
un-saved file
Document window toolbar
The Document window should display a toolbar at the top, underneath the menus. If it is not visible,
select Toolbars from the View menu, then choose Document.
File management
Document view options
Page title
Document title
Browser preview/debug
The page title is displayed in a text box which you can edit simply by clicking on the box and typing.
There are no restrictions to what you can input here – you can use capitals, symbols etc. The title is an
important aspect of a Web page; it is distinct from the filename, and from any title or heading text on
the page. The page title appears in the following situations:

At the top of your browser window while browsing the page, and also on the Taskbar in Windows.

In the results lists of most search engines – therefore it is often the first encounter people will have
with your Web page. (In fact it can affect the ranking of your page in search engines.)

In browser Bookmarks or Favourites lists.
The page title should be short and descriptive, and include the name of the institution to which it
belongs – for example “Graduate Prospectus at UCL”. The default page title in Dreamweaver is
“Untitled Document”, which is not very useful, so be sure to give each of your pages an appropriate
title!
Design view and Code view
The document window ordinarily shows your Web page graphically (the Design view) – but we can
switch between this and the underlying HTML code (Code view). HTML stands for HyperText
Markup Language and is a page layout code that browsers such as Internet Explorer can interpret.
Dreamweaver automatically generates the HTML code while you are creating the Web page. If you are
familiar with HTML, you can edit existing code or add to it in the Code view.
There are three display options for any Web page you are working on – ,Code
view, Split view and Design view. At the top-left of the Dreamweaver screen
are the three buttons used to change between these displays.
HTML is outside the scope of this course, and we will be using the Design view. If you are interested in
learning more about HTML, contact the Open Learning Centre http://www.ucl.ac.uk/is/olc/
Creating Web Pages
12
UCL Information Systems
Browser view
To see your page as it is going to be viewed by others on the Internet, you need to view the page
through a Web browser. A Web browser interprets the HTML code and displays the page. There are
several different types of Web browser available; the most popular is Internet Explorer. To view your
page in a browser:
1. Select File | Preview in Browser, and from the submenu choose the required browser.
2. The page should load up in the browser of your choice.
3. To return to your Dreamweaver page select File | Exit from the browser menu, or select
Dreamweaver on the Taskbar.
Helpful hint: F12 is a useful shortcut key to display a page in the default browser.
Page Properties
The background colour of your Web page, and the default colour of text and links displayed, are best
specified using a stylesheet. These are introduced in part 2 of this course. It is also possible to set page
colours etc. in Page Properties:
From the Modify menu choose Page Properties.
The following window is displayed:
 Appearance – Change the font
appearance or background colour.
 Links – Change the appearance
of links and specify active and
visited link colours.
 Headings – You can change the
properties of the in-built heading
styles here (see Page 14 for more
information on heading styles).
 Title/Encoding – Change the title
or encoding of the page.
 Tracing Image – You can use a tracing image as a guide to re-create a page design that was created
in a graphics application such as Macromedia Freehand or Fireworks. A tracing image is a image that
is placed in the background of the Document window. You can hide the image, set its opacity, and
change its position (we will not be covering tracing Images in this course).
Background image
If you wish to have an image as a background to your page you can enter the filename, or you can use
the Browse button to locate it from the Appearance category. Graphics are tiled across the Web page.
Helpful hint: Having an image as a background is not recommended – it may mean slower loading
speeds for your Web page. It can also make your page more difficult to read, particularly if the
background image contains too much contrasting detail.
Colours
You can set the default colours for text and links by either clicking on the colour button and choosing a
colour from the colour palette that is displayed, or by typing in the hexadecimal code for the colour1. If
you leave any of the colour boxes blank, browsers will use their default colours – for example, black
text, white backgrounds, blue links, and purple visited links.
Text and link colours should be chosen carefully to avoid clashing with the background colour.
1
All colours on a PC can be represented by a hexadecimal (Hex) code. The code is a six-digit
alphanumeric code preceded by a hash (#). For example, the Hex code for yellow is #FFFF99 and the
Hex code for red is #FF6666. You do not need to know Hex codes to use Dreamweaver, as choosing
the colour from the colour palette inserts the correct Hex code into your text box.
13
UCL Information Systems
Creating Web Pages
Text
Entering text is as straightforward as typing it on the screen. Text attributes can be changed with the
menus or through the Properties Inspector as shown below. Most of the properties you would expect from
a word processing application are available. You can use the Properties Inspector to change the font, size,
colour, style (bold, italic) and alignment. You can also create numbered and bulleted lists.
Properties Inspector
Format text
Alignment options
Style box
Font size
Font colour
Link box
Browse for file
Bulleted/Numbered list
Special characters
When entering text into a Web page you may notice that you cannot use the spacebar on the keyboard
for entering extra space. You will also find that when you use the Enter button on the keyboard that
this will give you a paragraph break (HTML code <P>) which gives you double-spacing rather than the
single-spacing you may be used to in Microsoft Word.
There are some special characters on the toolbar for entering line breaks for single-spacing, nonbreaking spaces, which are equivalent to the spacebar, and other characters that you may wish to use
that cannot be found on a standard keyboard.
To enter special characters:
1. Click on the Common drop-down arrow on the Insert Bar and choose Text.
2. You should now see the following options on the Text bar.
Block Quote
Insert Characters
List options (bulleted, numbered)
3. Click on the Insert Characters button and choose your desired character.
Note: The last option Other Characters has a wider range. Once you have chosen a character it will be
added to the toolbar as the Characters menu.
Foreign characters
You may need to enter foreign or other special characters that are not displayed on the Characters
menu or on the keyboard. The easiest way of entering is to find out the associated ASCII1/HTML code
and enter it in the page coding. You can find out HTML codes for other characters using a search
engine. For example if I wanted to find out the HTML codes for accented characters in Polish, I might
search for “HTML characters Polish” in the search engine.
Symbol HTML Code
Capital O-acute
Ó
&#211;
Lowercase o-acute ó
&#243;
To enter the symbol onto the Web page go to the Code view of the page and enter the HTML code
(don’t forget the semi-colon at the end).
If you use copy and paste to copy text containing special charaters, e.g., from Word, check in
Dreamweaver Code view that Dreamweaver has coded the special charater correctly, e.g. &#243; or
&oacute; NOT ó.
ASCII is a way of defining a set of characters which can be displayed by a computer on a screen, as well as
some control characters which have special functions.
Text
UCL Information Systems
14
1
Paragraph formatting
Each individual paragraph can be set to one of the following formats:
Paragraph
Heading 3
Heading 6
Heading 1
Heading 4
Preformatted
Heading 2
Heading 5
None
Paragraph is the default format. Use this style for ordinary paragraphs of text.
The heading formats, Heading 1- Heading 6 (often abbreviated to h1 - h6), are used to create
headings of different size and precedence. Heading 1 is normally the largest type of paragraph and
used for the main headings in a Web page, while Heading 6 is very small (often smaller than ordinary
paragraph text!).
Preformatted text is displayed slightly differently to other text on a Web page. It is ordinarily displayed
in a fixed-width font such as Courier, and allows you to include as much whitespace in your text as
you wish. (You may have noticed that, ordinarily, Dreamweaver only allows one space between words –
pressing the spacebar multiple times has no effect.)
To select a format for a paragraph:
1. Ensure that the cursor is positioned within the paragraph.
2. In the Properties Inspector select one of the options in the Paragraph Format box (the first box next to
the Format label).
Paragraph formats become important in the next course when we use stylesheets to specify appearances
for h1 headings, h2 headings, paragraphs, etc.
Styles
Styles are a way of saving and assigning text formats to particular parts of the page text. If you would
like to use styles you are advised to use Cascading Style Sheets (CSS), which will be covered in the next
course –Dreamweaver Part 2.
Some styles are automatically created in Dreamweaver MX 2004 when you assign any text formatting
properties to text. For example if you were to select some text and make it Arial font and Blue,
Deamweaver automatically creates a style called Style1 with those properties. You can use this style
again and any other subsequent manual formatting that you apply to text will be saved again as a style
and will be called Style 2. However, this is not the best way of managing styles. You should use CSS.
Text formatting
Bold/italic
1. To embolden or italicise text, select the text.
2. In the Properties Inspector click on the Bold or Italics icon.
Helpful hint:
Although it is possible to underline text, there is a convention on Web pages that links are shown underlined.
Therefore, it is not usual to underline text for formatting purposes.
Size
To change the text size:
1. Select the text.
2. From the menu choose Text then Size.
3. Choose a size.
Alternatively, use the Properties Inspector.
UCL Information Systems
15
Text
Colour
To change the text colour from the menu:
1. Select the text.
2. From the menu choose Text then Color...
3. A window is displayed as shown.
4. Select the desired colour and click on OK.
To change text colour from the Properties Inspector:
1. Select the text.
2. In the Properties Inspector, click on the button to display the colour palette and select a colour.
3. This second method is preferable, since all the colours in the colour palette are Web-safe – they
will appear the same in all browsers.
Alignment
Text can be aligned left, right or centre. To align text:
1. Select the text.
2. In the Properties Inspector click on the required Align button:
Left
Centre
Right
Justify
Font Lists
The font describes the physical shapes of the characters. If no font is specified, the text will be
displayed in the user's default font. A problem arises when you specify a font the user does not have
installed. With Dreamweaver you not only specify a font, but also a second one in case the first one is
not available in the user's browser, and if that is not available you can specify a third, and so on.
Dreamweaver brings fonts together in font lists. There are a number of combinations already set up. For
example: Verdana, Arial, Helvetica, sans-serif.
If this font combination was applied to text, Verdana would be the first choice of display. If Verdana
was not available in the user's browser, the text would be displayed in Arial. If Arial was not available, it
would be displayed in Helvetica, and so on1.
To change the font:
1. Select the text.
2. From the Text menu select Font, and choose the required font group:
The font can also be changed in the Properties Inspector. It is possible to create
your own customised font lists via the Edit Font List.
To create a font list:
1. Go to the Font drop-down list in the Properties Inspector.
2. Choose Edit Font List.
3. From the Available fonts area choose a font and use the
double arrows to move the font into the Chosen fonts area.
4. Once you have selected and moved all of the required
fonts for your chosen fonts group click on OK.
5. You should now see your own font group listed in the
Font drop down arrow on the Properties Inspector.
Sans-serif in the example is not the name of a specific font, but of a generic type of font – a font whose
characters don't have serifs. Putting a generic font type at the end of the list is equivalent to saying to the user's
browser, “If you don't have Verdana, Arial, or Helvetica, any sans-serif font will do”. Generic font types include
serif, sans-serif, cursive, fantasy, and monotype.
1
Text
16
UCL Information Systems
Spell-checking
To spell-check your pages:
1. Go to the Text menu | Check Spelling.
2. You can choose to Ignore, Change, Change all or Add to Personal so that a particular
spelling is stored to your dictionary.
Helpful hint:
Shift+F7 is a useful shortcut key for spell-checking a page.
Bulleted and numbered lists
Numbered and bulleted lists (known as ordered and unordered lists) can be created from existing or
new text.
To create a bulleted (unordered) or numbered (ordered) list:
1. Select the set of paragraphs that is to become a list.
2. From the Text menu select List.
3. From the submenu choose Unordered (or Ordered) List, as required.
Unordered list
Alternatively you can use the toolbar
Ordered list
shortcuts:
Horizontal rules
A horizontal rule is a line that runs across the screen providing a division on the page. To insert a
horizontal rule from the menu:
1. Position the cursor where the line is to be drawn.
2. From the menu choose Insert and then HTML and Horizontal Rule.
To insert a horizontal rule from the Insert Bar:
1. Position the cursor where the line is to be drawn.
2. Click on the Insert Horizontal Rule button:
The line is then inserted, occupying the width of the screen.
Horizontal rule properties
When a horizontal rule is selected the Properties Inspector changes to:
Using the Properties Inspector you can change the width, height and alignment, and choose whether to
apply a three-dimensional shaded effect. The width can be entered either as a fixed size in pixels, or as
a proportion of the screen width as a percentage.
UCL Information Systems
17
Text
Hyperlinks
A hyperlink is a graphic or piece of text within a Web page that leads to another place within the same
document or to another Web page. Hyperlinked text is usually shown as underlined or in a different
colour. Essentially, there are four types of link:

a link to your own files on your Website

a link to a page on another site

a link to other areas on the same Web page

an e-mail link, which initiates an e-mail to a specified address.
Both text and images can be used as links. Note that the page you are working on should be saved
before you create hyperlinks.
Linking to another page
1. Select the text or image that you want to become the link. The Properties Inspectors for text and
images are shown below:
Link box
Text:
Browse
Images:
Link box
Browse
2. If you know the path of the page to link to, it’s possible to type in the full path in the Link box.
However, to do this you will need to know how accurately to reference folders above and below
the current page, and any typing errors will mean the link won’t work. A safer method is to click on
the Browse button to search for the file.
Once you have created a link it will by default appear underlined.
Any file that you try to link to that is not held within the root folder of your site will prompt a message
box as shown below.
Click Yes – you will then be prompted to copy the file into your local root folder so that it is available
in your live site: just select an appropriate folder for the file within your site root and click Save.
Hyperlinks
18
UCL Information Systems
Using the target icon
A convenient alternative for creating a link is to use the target icon on the Properties Inspector
use the target icon:
. To
1. Arrange your windows so that the target of the link is visible (e.g. in the Site Panel on the right).
2. Select the text or image that you want to become the link.
3. Click-and-drag from the target icon on the Properties Inspector, to the link target (as shown
below).
Linking to a page on the Internet
1. Select the text or image that you want to become the link.
2. Click in the Link text box within the Properties Inspector.
3. Enter the full address of the Website that you want to link to. Make sure you include the http:// in
front and the www. as well, if necessary. For example:
http://www.ucl.ac.uk/
UCL
http://www.bbc.co.uk/
BBC
http://www.google.com/
Google search engine
As with other links, any typing errors will mean the link won’t work – it’s often a good idea to open the
page to which you want to link to in a Web browser and copy and paste the full URL into
Dreamweaver.
UCL Information Systems
19
Hyperlinks
E-mail links
E-mail links (also referred to as mailto links) are a useful way of setting up a contact link should a visitor
to your Website wish to communicate with you. When the link is viewed in a browser the user clicks on
the link and the e-mail program should open with a new message window containing your e-mail
address. To create an e-mail link:
1. In the document, position the insertion point where you want the e-mail link to appear, or select
the text you want to appear as the e-mail link. Then either:
2. Choose Insert from the menu bar then E-mail Link, or, in the Common Bar, select the Insert Email
Link icon:
3. The Insert E-mail Link dialog box is displayed. In the Text field, type or edit the text to appear on
the page.
4.
In the E-mail field, type the e-mail address.
5. Click on OK.
Creating links from thumbnail images
1. Select the thumbnail image to be linked from.
2. In the Link box in the Properties Inspector type the path and filename for the page or image that it is
to be linked to.
Removing a link
1. Click anywhere in the text or the image with the link.
2. Within the Properties Inspector, select the link address displayed in the Link box.
3. Press the Delete key on the keyboard. The link formatting (the underline and colour) should
disappear from your text.
Hyperlinks
20
UCL Information Systems
Images
Images that can be incorporated into a Web page include JPG files (normally photos) and GIF files
(often logos, images with large areas of flat colour or images with very few colours such as line-art).
Inserting an image
1. To insert an image, position the cursor at the point where you wish the image to be placed.
2. From the Insert menu choose Image.
The Select Image Source dialog box is
displayed:
3. Locate the image that you wish to insert
and click on OK.
As with any linked file the image file should
be located within your local root folder so
that it can be referenced properly. If it isn’t
Dreamweaver will helpfully prompt you,
asking whether the file should be copied into
your local site. Choose Yes when faced with
this, and a file chooser window will appear.
It is recommended that you save the image
within the images folder in your local root folder.
Inserting an image from the Insert Bar
1. Position the cursor at the point where you wish the image to be placed.
2. Click on the Insert Image icon
on the Insert Bar. The Select Image Source dialog box is displayed.
3. Locate the image that you wish to insert and click on OK.
Supplying alternative text
Some browsers are not capable of displaying images, while others have the facility turned off in order
to speed up the downloading of Web pages. To overcome this you should always supply text as an
alternative to an image. Alternative text can also be used to provide the user with further information.
To supply alternative text:
1. Select the image.
2. Click in the Alt box within the Properties Inspector and type in the text that you wish to have
displayed.
Alternative text is displayed in a browser in one of two ways:
1. If the picture is not downloaded, the text is displayed instead. (Speaking browsers, e.g. for the
visually impaired, will read out the alternative text.)
2. If the picture is downloaded, some browsers will display the text when the user holds the cursor
over the image.
UCL Information Systems
21
Images
Tables
Tables allow you to line up text and graphics easily and quickly. Tables are simply grids divided into
rows and columns. A simple table is shown below:
Name
P Smith
L Whittle
Location
IT
Sales
Extension
4553
7669
In the above example, the table is made up of three columns and three rows. Each piece of data is
contained within a cell. By default the table lines are displayed, but they can be removed.
Tables for data
For informational tables, the advice is to make sure that clear table headings are given. It is good
practice to give a textual summary of the information shown in the table – for example, “The following
table shows that heart disease in women has been increasing at a greater rate, over the past twenty
years, than in men...”.
Inserting a table
1. Position the cursor where you want the table to be
inserted.
2. From the Insert Bar click on the Insert
Table icon
Alternatively, select Table from the Insert menu.
3. The following dialog box is displayed:
4. Specify the number of rows and columns in your
table.
5. Choose a width for your table, either by typing in the
percentage of the page width or by typing in the
number of pixels the table width should be.
6. Specify whether the table is to have a border; 0 (zero)
means no border. The higher the number, the thicker
the border.
7. For information on header and accessibility options
see below.
8. Click on OK.
Header
You can use a header to specify a certain area of the table as a header for the table. This area will then
be formatted bold and aligned centered. You can choose one the following headers:
None does not enable column or row headings for the table.
Left makes the first column of the table a column for headings, so that you can enter a heading for
each row of the table.
Top makes the first row of the table a row for headings, so that you can enter a heading for each
column of the table.
Both enables you to enter column and row headings in the table.
Helpful hint:
It’s a good idea to use headers in case any of your Website visitors use screen readers. Screen readers read
table headings and help users keep track of table information.
Tables
22
UCL Information Systems
Accessibility
In the Accessibility section you can specify the following options to make your table more accessible
and to give more information, particulary for users with screen readers:
Caption provides a table title which displays outside of the table.
Align Caption specifies where the table caption appears in relation to the table.
Summary provides a table description. Screen readers read the summary text, but the text does not
appear in the user’s browser.
Adding table data
To add text to the table, position the cursor in the cell where you wish to start and then type the text.
Helpful hint:



To move from one cell to another press the Tab key.
To move back a cell press Shift+Tab.
To move up or down a line use the cursor keys.
Inserting images into a table
Inserting images into tables is similar to inserting images elsewhere on a Web page. Position the cursor
at the point in the table where the image is to go, and click on the Insert Image icon on the Insert Bar.
Selecting
Table visual aid
Once you have inserted your table you may be presented with the table visual aid (green lines beneath
the table) which you can use to select and specify widths and heights of columns in the table.
Table visual aid
Selecting a table
To select a table, click once on the drop-down arrow on the lower green line of the table visual aid.
From here you can choose Select Table.
Alternatively right-click anywhere inside the table and choose Table | Select Table. The table should
have a thick black line around it and handles in the bottom, right and bottom right-hand corner:
The Properties Inspector should look similar to that shown below:
UCL Information Systems
23
Tables
Selecting a column
To select a column, click once on the drop-down arrow on the first green line of the table visual aid.
From here you can choose Select Column.
Selecting a row
Move the mouse to the left of the row you wish to select, until the mouse pointer becomes an arrow
pointing along the row. Then click once to select the entire row/column.
The Properties Inspector will look similar to that shown below.
expand arrow
Deleting a column or row
1. Select the column or row to be deleted.
2. Press the Delete key on the keyboard.
Merging and splitting cells
Merging is the process of combining two or more cells together. It can be used, for example, where you
want titles to span columns. Splitting cells is the opposite of merging, creating two or more cells out of
one.
Merging cells
1. Select the cells you wish to merge.
2. In the Properties Inspector click on the Merge Cells button (Note that you might need
to click on the expand arrow as shown above to view the merge options).
3. The selected cells are then merged.
Merge Cells
Split Cells
Splitting cells
1. Select the cell to split.
2. Click on the Split Cells button.
3. In the Split Cells dialog box, specify whether to split the cell into
rows or columns, and the number of rows/columns you want it split into.
Tables
24
UCL Information Systems
Tables for layout
Tables are a powerful tool for positioning the content and managing the layout of a Web page, the
major advantage being that you can position elements (graphics, text, etc.) very precisely.
Have a look at the page below:
This page has a well-defined structure, and contains at least four separate sections:
1. A header row – containing a logo, banner etc.
2. The left column – which contains the site’s main navigation.
3. The middle column – which contains the main content of the page.
4. The right column – which contains additional links.
These four sections are actually divided up using a table that takes up the entire page. Section 1 is a
row that spans the entire width of the table. The next row is split into three columns. The columns on
the left and right are smaller columns, while the one in the middle is a larger column. Section 1 in fact
contains a second table used to control the layout of the logos, title and search box.
The use of tables to lay out a Web page is widespread, but increasingly frowned upon. Advanced
techniques using stylesheets are gradually replacing the use of tables, and if you are designing a large
and important Website it may be wise to read up on these techniques.
If you do use tables for layout purposes, pay attention to the order in which your elements would
appear if presented linearly. Figure 1 illustrates one possible layout achieved with a table.
Title
Menu Option 1
Menu Option 2
Main Content of Webpage
Menu Option 3
Figure 1 – A problematic layout
UCL Information Systems
25
Tables
The Web page in Figure 1 would be rendered linearly as Title, Menu Option 1, Main Content of
Webpage, Menu Option 2, Menu Option 3. The menu is split up in an odd fashion.
There are a number of ways of getting round this problem. Figure 2 shows one – the menu is now
contained within a second inner table. The page would thus be rendered linearly as Title, Menu Option
1, Menu Option 2, Menu Option 3, Main Content of Webpage; this is perhaps the best linear order for
the elements.
Title
Menu Option 1
Menu Option 2
Main Content of Webpage
Menu Option 3
Figure 2 – One possible improvement to the layout
Nested tables
Tables can be inserted within table cells (creating a ‘nested table’) and used to layout content within that
cell. Further tables can be inserted within the cells of these nested tables, potentially allowing content
to be positioned very precisely within the page.
This should however be approached with caution as it can be problematic on two levels: It can make it
difficult to work out which table a cell belongs to, which can lead to difficulties when adjusting
formatting such as cell padding, spacing etc. The underlying HTML code also becomes incredibly
complex (making it difficult to work with) and this has a knock-on effect for users of screen readers –
the order of things as they appear to sighted users on screen may not be how they are read out by the
screen-reader, potentially leading to great confusion and making the page unusable.
Given these limitations it pays to use nested tables with restraint, avoiding excessive numbers of nested
tables and perhaps compromising on layout if this will simplify things. In fact compromise and
simplicity are a good approach when dealing with design. It’s important to remember that most Web
sites are created to present information, and it pays to do so in a form that is accessible and usable by
all, rather than worrying about the intricacies of design.
Tables
26
UCL Information Systems
Managing Your Website
Having designed one or more Web pages and saved them in appropriate locations in your local site, we
can now return to the Site Panel to manage your local and remote sites – in particular, to publish your
pages to the remote site (i.e. the World Wide Web).
If the Site Panel is not visible, it can be displayed by selecting Site Files from the Site menu (or by
pressing F8). You can choose between different views of the site by using the Select site view pulldown menu, or you can see a split window by clicking the Expand site panel button. Pressing this
button again will revert to the more compact layout.
The right-hand panel of the Expanded Site Panel displays your local site files. The left-hand panel can
either display the remote site files, or a site map of the local site. Buttons on the toolbar enable you to
change between these two views.
Site Files
Testing Server
Site Map
Uploading and downloading
Make sure that the Site Files view rather than the Site Map view is enabled. If Dreamweaver is not
already connected to the remote site then the left-hand pane will be blank, and you will need to click on
the Connect button on the toolbar.
Not connected (click to
connect)
UCL Information Systems
Connected (click
to disconnect)
27
Managing Your Website
Uploading a file
1. Select the file/folder in your local site which you want to upload to the remote site. You can select
multiple files/folders by holding down the Ctrl or Shift keys while clicking. As in other Windows
applications, clicking with the Ctrl key held down selects multiple files, and with the Shift key held
down selects a range of files.
2. Click the Put button on the Site Panel’s toolbar, which looks like an blue arrow pointing upwards.
Alternatively, choose Put from the Site menu.
3. If Dreamweaver is not already connected to the remote site, it will attempt to connect. It will then
attempt to upload the file(s) to the remote site. If any of the files being uploaded have been edited
and not yet saved you will be prompted to save them before uploading. If you have the root folder
selected you will be asked if you want to Put the entire site – this is just a precaution as very large
sites can take a long time to upload.
Using this method, files and folders will be transferred from their position in the local site, to the
exactly equivalent position in the remote site.
Downloading a file
1. Select the file/folder in your remote site which you want to download to the local site. You can
select multiple files/folders by holding down the Ctrl or Shift keys while clicking.
2. Click the Get button on the Site Panel’s toolbar, which looks like an green arrow pointing
downwards. Alternatively, choose Get from the Site menu.
3. If Dreamweaver is not already connected to the remote site then it will attempt to connect. It will
then attempt to download the file(s) from the remote site.
Using this method, files and folders will be transferred from their position in the remote site, to the
equivalent position in the local site.
As an alternative to the Get and Put buttons, you can click-and-drag to move files between the local
and the remote site; but this is not advisable because you run the risk of dragging them to the wrong
location in the remote site.
Site map
Dreamweaver can display a site map which shows graphically the links and relationships between files
on your sites.
Setting the Homepage
In order that the site map can be constructed, one of your pages must be designated as the homepage.
The homepage is the first page that a user sees when they log into your Website and is normally called
index.htm or index.html. The following steps are carried out once the site has been defined and you have
created and saved the page that is to be set as your homepage.
To define a page as the homepage:
1. In the local site view of the Site Panel click on the file you wish to define as the homepage.
2. From the Site menu select Set as Home Page.
This page is then defined as your homepage, for the purpose of building the site map.
Managing Your Website
28
UCL Information Systems
Viewing the site map
To view the site map, use the Site Map button on the toolbar to switch to Site Map view. Note that
you must have chosen one file to be your site's homepage, otherwise Dreamweaver will display an error
message to tell you that it cannot build the site map.
Site files
Site map
The top file is your homepage (usually index.htm). Beneath this are displayed all files linked to from the
homepage. Any of these are pages which themselves include links will have a + sign alongside them.
This can be clicked to display all the files to which this page links. Be warned that this can become
confusing as you can potentially keep opening up these links forever if pages link back to the
homepage!
One useful feature of the site map is that it colour-codes all the displayed filenames to indicate the
status of links within the site. Black indicates a link to an existing file (you can double-click the file to
open it). Blue indicates an external link (i.e. to another Website) which Dreamweaver can't check
automatically. Red indicates a broken link – either the link is incorrect or the file linked to does not
exist. In this case you should find the link in the parent page and correct it - or ensure the file linked to
does indeed exist but isn't in your local site.
Exporting the site map
You cannot print out the site map from Dreamweaver but you can export the map as a bitmap file.
You can then import that file into a wordprocessor or graphics package to print.
1. From the Site Map window choose File.
2. Select Save Site Map.
3. Give the file a name and save it as a bitmap (BMP) file.
4. Click on Save.
UCL Information Systems
29
Managing Your Website
Accessibility
Web pages are available for all to view over the Internet, but not everyone accesses the Internet in the
same way. There are many varieties of browser (you may be familiar with Internet Explorer and
Firefox, but there are others including Camino, Lynx, Mozilla, Netscape and Opera) – which can run
on many kinds of computer (for example PC, Mac and UNIX). These platforms all have vastly
different possibilities for the amount of screen space available (some monitors only display 640 x 480
pixels, while some are much larger). Remember that not all computers will necessarily display a Web
page exactly as yours does.

Visually impaired people may navigate the Web via Internet browsers which read out the content of
a Web page, or alternatively may have problems if text is very small or low-contrast.

People with motor difficulties may find it difficult to click on a small link.

Those reading a Web page which is not written in their first language, or those with learning
difficulties, may have problems understanding over-complicated text.
Often, making your Website useable by all will lead to general improvements, such as in the clarity of
your online writing. Here are some specific suggestions for improving the accessibility of your pages:
Text and colour schemes
One of the most general recommendations about page design is to make text easy to read. Dark (e.g.
black) text on a very light (e.g. white) background is proven to be the easiest colour scheme to read on
a computer screen, especially if there are large amounts of text to read.
Text should never be made so small that it could be difficult to read, especially for those with eyesight
problems. Text sizes on the Web range between 1 and 7, where 3 represents the ordinary text size (12pt
or 14pt on most people's browsers). Size 1 should only be used rarely.
Background images can often make text more difficult to read. If you are sure you want to use a
background image, ensure that its colours contrast well with text laid over it. It is often best to use a
graphics package to convert a background image into a watermark by reducing the contrast, and
increasing the brightness, of the image.
Links
Links should normally be made to stand out. Underlining links often distinguishes them from
surrounding text, but it also helps if they are a different colour – ordinarily links are coloured blue in
contrast to black for ordinary text.
It is also important that the text of a link describes what users will find if they follow the link. The
following is a common mistake:
Click here if you'd like to view my CV.
This looks fine to many users. However, certain text-based browsers and speech-browsers list the links
on a page, without reference to the text which surrounds them – the above link “Click here” is
meaningless out of context. Much better would be:
You can view my CV.
or:
You can view my CV.
If a link is based on an image rather than text, it is a good idea to ensure that the image's “alternative
text” indicates the link destination.
Accessibility
UCL Information Systems
30
UCL Information Systems
31
Accessibility
Images
As already described in the Images section, it is important that every image you include in your Web
pages has alternative text (also called alt text). Otherwise those browsing without images may be
unable to use your site as effectively as those able to view the images. As a guide, there are various uses
of images, and various corresponding needs for the alt text:

Illustration. If an image is used to illustrate a Web page, a short textual description is a good idea
for the alt text: e.g. “Photograph of students in a laboratory class”, “Dr E. Penney”.

Links. If an image is used as a link, make sure the alt text provides a useful description of the link's
function: e.g. “View RAE results”, “E-mail Dr E. Penney”.

Icons and logos. Icons and logos are ordinarily given a descriptive alt text, as with illustrations, e.g.
UCL logo, Haematology at UCL. If no description is needed, follow the advice for structural
images, below.

Structural. Structural images, such as ones which are used to give the impression of a border around
a page element, do not carry information and don't need to be presented to the text-only browser.
The alt text should be a simple space.
Considering that many users are not able to make use of images which might be associated with a Web
page, no vital information should be encoded in an image. For example, if it is impossible to tell where
one should click to access the various sections of your site unless certain images are loaded, this can
cause problems.
Also remember that images take a long time to download compared with text. If your Web pages are
full of high-quality, large images, then the slow speed of downloading may be intolerable for many
users. At UCL a very fast Internet connection is available, but your Web pages should also be useable
by those in far-off countries, or those accessing your pages via a modem, for whom UCL Web pages
will take much longer to download.
Tables
Tables are commonly used in two situations in Web pages: to display an actual table, i.e. tabular data;
and to control the layout of page elements. In both cases it pays to remember that not all browsers are
able to render tables properly. Text-only browsers, speaking browsers, and very old browsers all render
the contents of a table linearly: imagine reading out the contents of a table row-by-row, left-to-right –
would your table's contents make sense?
Accessibility
32
UCL Information Systems
Appendix 1
Setting up your remote folder at UCL
WTS users
If we were creating a Website to be hosted by a Web hosting company, then this company would
create the root folder on the remote site for us. At UCL there is a program available via WTS called
Publish Web Pages which establishes the remote site for you.
To use Publish Web Pages on WTS:
1. From the Start menu choose Programs and Software O-Z.
2. Run the Publish Web Pages program.
This program will ask for your user ID and password, and then establish your local site for you. Take
care when entering your password, as nothing is echoed on the screen. If you do not have access to the
Publish Web Pages feature see the instructions below.
Non-WTS users
If you don't have access to the Publish Web Pages program available through WTS, then follow one of
these sets of instructions to set up your remote folder at UCL. In each case the process will create a
folder called html.pub in your home directory, and then ensure that it is world-readable (i.e. that it
can be accessed by anyone using a Web browser).
Using UNIX on Socrates or a cluster Sun workstation
To create your html.pub directory in the root of drive R:, use the UNIX mkdir command:
mkdir html.pub
To publish your pages, use the Unix reveal command. This will automatically make your html.pub
and home directories world-readable. You can do this for a single file or a number of files:
reveal index.html
reveal *
Non-Managed computers
To create and make world-readable your html.pub directory from a non-UCL-Managed computer,
you will need to use Telnet. (Users of Windows 95 and later will find Telnet in Start | Programs |
Accessories.) Using Telnet, connect to socrates.ucl.ac.uk, login with your normal username
and password, and enter the following UNIX commands:
mkdir html.pub
chmod og+x $home html.pub
Don’t forget to logout to end your Unix session.
UCL Information Systems
33
Appendix 1
Connection settings
These are similar to those used to access departmental pages except that the host directory should point
to the folder you created in the process above (i.e. html.pub) and you use your personal UCL login and
password:
Server Access:
Choose FTP from the list.
FTP Host:
ftp.ucl.ac.uk
Host Directory:
html.pub
Login:
[Your login name]
Password:
[Your password]
Accessing personal homepages
To view your uploaded pages from a browser use the following address:
http://www.homepages.ucl.ac.uk/~yourlogin
To get the ~ (tilde) use: Shift+#
‘yourlogin’ is the login you used in your site definition.
Appendix 1
34
UCL Information Systems
Learning More
Central IT Training
Information Systems run courses for UCL staff, and publish documents for staff and students.
Dreamweaver documents include:
Creating and Maintaining
Webpages Part one
Creating and Maintaining
Webpages Part two
Using forms in Dreamweaver
UCL Templates
This course is for those new to web page authoring or to
Dreamweaver who wish to explore the basic features of the
software.
This 3.5hr course is aimed at users familiar with Dreamweaver
who want to use templates and stylesheets, and find out more
about Dreamweaver.
Additional workbook only, currently no course in this area.
This course is aimed at users who need to make use of the UCL
templates in their web pages
Open Learning Centre

Dreamweaver Workshop – This training is delivered in the Open Learning Centre and is intended
for those who wish to obtain training on specific features in Dreamweaver on a individual or small
group basis. Please let us know your previous levels of experience, and what areas you would like to
cover, when arranging to attend.
You will need to book a session in advance at: www.ucl.ac.uk/is/olc/bookspecial.htm and sessions
will last for an hour or possibly longer depending on availability.

See the OLC web pages for more details at www.ucl.ac.uk/is/olc.
On-line learning
There is also a comprehensive range of online training available via TheLearningZone at
www.ucl.ac.uk/elearning.
Getting help with Dreamweaver


Dreamweaver has a help system which you can call upon at any time while you are working on a
Website. Select Using Dreamweaver from the Help menu to open Dreamweaver help.
For WebCT users there are additional Dreamweaver courses. Details can be found at:
www.ucl.ac.uk/learningtechnology/training



There is an option on Dreamweaver's Help menu called Tutorials, which takes you through some
of the more advanced Dreamweaver features in an interactive fashion.
A Web search using a search engine such as Google (www.google.co.uk) can also retrieve helpful
Web pages. For example, a search for CSS “style sheet” tutorial would return a useful selection of
tutorials.
The following faculties have a dedicated Faculty Information Support Officer (FISO) who work
with faculty staff on one-to-one help as well as group training, and general advice tailored to your
subject discipline.

Arts and Humanities

Life Sciences

Engineering

Social and Historical Sciences

Maths & Physical Sciences

Barlett
See the Faculty based support section of the www.ucl.ac.uk/is/fiso webpage for more details.
UCL Information Systems
35
Learning More