Creating Accessible Web Pages Using Dreamweaver Mx 2004

1. CREATING ACCESSIBLE WEB PAGES
WITH DREAMWEAVER MX 2004
Introduction
This document assumes that you are familiar with the use of a computer keyboard and
mouse, have a working knowledge of Microsoft Windows and are familiar with using the
World Wide Web.
The files required to complete the exercises in these notes are available from WebCT
(vle.bbk.ac.uk), the college’s online learning environment. If you are following these
notes in a ITS workshop, you will have been subscribed to the necessary course. For
access for self-teaching, please contact ITS reception, room 151.
To purchase the software, see the CHEST Macromedia Educational Purchase Plan details,
by searching on dreamweaver at http://www.eduserv.org.uk/chest/
Contents
1. Getting Started 3
2. Starting Dreamweaver MX 2004 4
3. Preferences for Accessibility 5
4. Creating a Web Site 7
5. The Document Toolbar and Document Window 9
6. The Property Inspector 12
7. The Insert Bar and Tables 15
8. Creating Hypertext Links 19
9. The Insert Bar and Images 22
10. The Insert Bar: Head Category 24
About this Document
Will need to be typed or chosen from a menu
Words in bold
or window
Small capitals – e.g. ALT Indicate keys that you press
Press KEY1 + KEY2 Press both keys together
Press KEY1, KEY2 Press each key consecutively
• Bulleted lists Are guidelines on how to perform a task
Show menu commands – in this case, choose the option
Choose Insert – Picture Picture from the Insert menu at the top of the screen

2. Dreamweaver MX 2004 Doc. 9.75 Ver 3
Aims & Objectives
The aim of this document is to create a basic accessible web page
written in XHTML using Dreamweaver MX 2004
When you have completed these exercises you should be able to:
• Create accessible web pages written in XHTML
• Add tables, images and other objects to your page
• Change the properties of your objects
• Add metadata to your pages
• Use the Document window in Design view and Code view, use the Insert bar
and the Property inspector.
Pre-requisites
This document assumes that you are familiar with the use of a computer
keyboard and mouse, and Microsoft Windows-based products. All participants
should be familiar with the basic HTML structure of a web page.
Copyright
© Netskills, University of Newcastle
Copyright in the whole and every part of this
Courseware whether in the form of a written
manual, document, software program, service or otherwise belongs to the
University of Newcastle upon Tyne (quot;the Ownerquot;) and may not be used, sold,
licensed, transferred, copied or reproduced in whole or in part in any manner
or form or in or on any media to any person other than in accordance with
the terms of the Owner's Licence Agreement or otherwise without the prior
written consent of the Owner.
All use of this material is governed by the Owner's Standard Licence
Agreement together with the appropriate Schedule. The following are
available:
• A Standard Licence Schedule to cover all use including all for-profit use by
any type of organisation and all use by non-educational establishments
• An Educational Licence Schedule for not-for-profit internal use only by a
recognised educational establishment
The Netskills logo and this copyright notice must be included in any copy or
adaptation.
Netskills is a trademark of Netskills, University of Newcastle
Contact Information
Central Computing Services, Birkbeck, Malet Street WC1E 7HX
ITS-helpdesk@bbk.ac.uk
Email:
UK 020 7631 6543
Phone:
2

3. Dreamweaver MX 2004 Doc. 9.75 Ver 3
1. Getting Started
Objectives To download files required for the training materials and then open
Dreamweaver MX 2004.
Method You will access WebCT and locate the appropriate resource area for
these hands-on tasks. First you will create a folder in your working area
within which you will save the files you will download and create using
Dreamweaver.
1.1 Open Windows Explorer
Locate the Windows key on your keyboard – it looks like this:
• Hold down the Windows key and press the letter E at the same time
This will open up Windows Explorer, similar to Figure 1-1.
• Browse to the drive and file area where you wish to save your files. (Typically
this will be N:/My Documents).
• Choose File – New – Folder
A folder is created called New Folder:
• The name of the folder is currently
highlighted – type YournameSite,
replacing Yourname with your own
name
• Press ENTER to finalise the name
change. Figure 1-1 Windows Explorer
1.2 Downloading files
• In your web browser go to the following
address:
http://vle.bbk.ac.uk/
• Click on the link Log in to WebCT; login to
WebCT using your ITS username and password
• Follow the link to the IT Skills module
• Click on Software Guides
• Click on Dreamweaver
• Click on Supporting Materials for ITS workshops
• Click on 9.75 – Creating Accessible Web Pages…
• Download the four files listed by right-clicking each link in turn and from the
menu that appears selecting Save Target As (or Save Link As)
• Save each file to the folder you just created on your N: drive
xml.htm
access.htm
explore.gif
disabled.gif
3

4. Dreamweaver MX 2004 Doc. 9.75 Ver 3
2. Starting Dreamweaver MX 2004
Objectives
To open Dreamweaver and if used before, to restore the default
workspace.
You will open Dreamweaver and may use the Preferences window.
Method
Comments Dreamweaver remembers the settings from the last user. This is a useful
feature when using the package on your own machine but causes a
problem when using it on a machine shared with someone else.
2.1 Start Dreamweaver MX 2004
In ITS workstation rooms it is found under Web Applications
• Click the Start button
• Select Programs – Web Applications – Dreamweaver MX 2004
If this is the first time you have used it, Dreamweaver will ask which “workspace
layout” you want.
• Choose Designer
• Click OK
Figure 2-1 Dreamweaver MX 2004 Default Workspace
4

5. Dreamweaver MX 2004 Doc. 9.75 Ver 3
3. Preferences for Accessibility
Objectives To switch on the accessibility features in Dreamweaver.
You will use the Preferences window.
Method
Comments Dreamweaver MX 2004 can be configured to prompt for accessibility
attributes when working in Design view.
3.1 Preferences
• From the main menu-bar, select Edit – Preferences
In the Preferences window choose the Category: New Document and
ensure the Make Document XHTML Compliant option is checked, as shown
below:
Figure 3-1 New Document options
XHTML
XHTML is the reformulation of HTML, adhering to the rules of XML (the
extensible Mark-up Language). Future browsers and applications will be written
in XML, and writing web pages now in XHTML ensures preparedness for the
future. XHTML also incorporates many accessibility features and is the current
W3C recommended version of HTML.
3.2 Accessibility
• Still in the Preferences window, select the Category Accessibility
• Select all the options under the title Show Attributes when Inserting: as
shown below
• Click OK
Figure 3-2 Accessibility preferences
5

6. Dreamweaver MX 2004 Doc. 9.75 Ver 3
Note The Disabilities Discrimination Act (DDA, 1995) and the Special Educational
Needs and Disability Act (SENDA, 2002) state that discrimination due to
disability is unlawful, reasonable adjustment should be made and such
adjustments should be anticipatory. Web sites therefore need to be accessible
and the W3C have established guidelines:
http://www.w3.org/TR/WCAG10/
Creating web pages with accessibility in mind from the outset is more effective
than retrospectively attempting to fix bad web pages.
6

7. Dreamweaver MX 2004 Doc. 9.75 Ver 3
4. Creating a Web Site
Objectives To create a Dreamweaver web site.
You will use the Site panel and the Site Definition window.
Method
Comments Dreamweaver wants users to work in ‘web sites’. Once a user has
created a web site, Dreamweaver will try and default to saving documents
in that web site until an alternative is defined. Site management functions
such as tracking files, library items and templates are only available once a
web site has been defined.
4.1 Panel Groups
Locate the five panel groups and from the Files group, select the Files panel:
The
Files
Panel groups:
panel
Design,
Code,
Application,
Tag Inspector
and
Files
Figure 4-1 Panel group
Note The panel groups provide access to the main areas of functionality of
Dreamweaver. These will be covered in the appropriate sections of the training
materials.
7

8. Dreamweaver MX 2004 Doc. 9.75 Ver 3
4.2 Manage Site
• In the Files Panel, click on the drop-down menu under the Files tab and
select the Manage Sites option
• Choose New – Site
• The Site Definition window will open, as shown below. Click on the
Advanced tab if this is not already selected
Figure 4-2 Site Definition panel
• In the text box labelled Site Name, enter YournameSite, replacing
Yourname with your own name
• To the right of the text box labelled Local Root Folder is a browse button,
. Click on the browse button, browse to the folder you created in Task 1
and click Select
• You will return to the Site Definition panel, click OK
• In the Manage Sites prompt box, click Done.
Figure 4-3 Edit Sites
Your new site is now listed in the Files panel:
Figure 4-4 Site files panel
The Files panel will be explored in more detail in a later section.
8

9. Dreamweaver MX 2004 Doc. 9.75 Ver 3
5. The Document Toolbar and Document Window
Objectives To explore the main page editing features of Dreamweaver.
You will use the Document toolbar and the Document window.
Method
Comments The Document window is viewed in two ways. The Design view is
the WYSIWYG view and opens by default. The Properties Panel is also
enabled with easy manipulation of the properties of the selected item.
The Code View is the HTML view.
5.1 Create a New File
Dreamweaver’s main window is at present displaying the Start page.
• Under Create New, click on HTML to create a new HTML page
Figure 5-1
Document
toolbar
Document
window
Properties
panel
Figure 5-2 The Document window
Note that the Document window is initially open in Design view as
button in the Document toolbar:
indicated by the
Figure 5-3 The Document toolbar
5.2 Code View
• In the Document toolbar, click on the Show Code View button:
Figure 5-4 The Document toolbar (Code view)
You should now see the HTML code behind the Basic Page:
9

10. Dreamweaver MX 2004 Doc. 9.75 Ver 3
Figure 5-5 Code view of Basic Page
Note Dreamweaver automatically generates the HTML code for the type of page
specified in the preferences; in this case an XHTML page.
5.3 Design View
• Return to the Design View of your page
• With the cursor in the Document window, right-click the mouse button
to open the Context menu
Figure 5-6 The Context menu
Not The Context menu is a generic term and is now supported by many software
e manufacturers. Always accessed by right clicking with the mouse, it brings up a
menu that is appropriate, or in context, with where you happen to be.
5.4 Context Menu
• In the Context menu, click on Page Properties
• In the Page Properties window, select Category: Title/Encoding.
Figure 5-7 Page Properties window
10

11. Dreamweaver MX 2004 Doc. 9.75 Ver 3
• In the Title/Encoding window, in text box labelled Title, add
Introduction to Netskills, as shown below:
Figure 5-7 Adding a page title
Note A page title is an essential component of a web page. Search engine results list
pages by their page titles.
The Page Properties window offers many other options relating to the visual
Acces
sibility presentation of the web page. Changes here are implemented as attributes in
the HTML. This is not the best way of changing the presentation of a web page.
A better method is to use style sheets (discussed in a later section).
5.5 Save your file
• From the main menu, select File – Save As
• In the pop-up window, type netskills.htm in the box labelled File name
and click Save
• Note where the page title and the file name are shown in the Document
window:
File name Page title
Figure 5-8 The Document window
11

12. Dreamweaver MX 2004 Doc. 9.75 Ver 3
6. The Property Inspector
Objectives To change the properties of text in your page.
You will use the Property inspector.
Method
Comments The Property inspector is the WYSIWYG method of changing
attributes in your HTML.
6.1 Ensure that the Document window is in the Design View:
Figure 6-1 The Document toolbar
In the Document window, add the following text pressing <return> at the
end of each line:
Netskills
Bringing Internet Skills to the Community
WebCT - an online learning environment
Training Support – support services for internet training
Workshops – face to face
Workshops
ITS offer workshops on a variety of topics
6.2 The Property Inspector
Locate the Property inspector below the Design View window:
Figure 6-2 The Property inspector
6.3 Using Headings
• In the Document window, highlight the text Netskills
• In the Property inspector, click on the arrow beside the Format box and
12

13. Dreamweaver MX 2004 Doc. 9.75 Ver 3
change to Heading 1, as shown in Figure 6-3:
Figure 6-3 Changing the text Format
• Highlight the text: Bringing Internet Skills to the Community
• Use the Property inspector to format this as Heading 2. Also format
the text Workshops as Heading 2
Your page should look as follows:
Figure 6-4 netskills.htm
Acces When writing web pages, focus on structure, using the header tags as in this task.
sibility
This will help ensure that your pages are accessible.
• In the Document window, highlight the text on the bottom line: a
6.4 variety
• In the Property inspector, click on the button, and notice the text is
now displayed in bold
• Change to the Code View:
Figure 6-5 The Document toolbar
Notice the changes to the HTML that have been made. Spot the <h1> tags for
heading 1, <h2> tags for heading 2 and <strong> tags for making text appear
bold.
Acces
Dreamweaver MX 2004 uses the logical tags <strong> and <em> instead of
sibility
the physical tags <b> and <i>. While these logical tags also render text as bold
13

14. Dreamweaver MX 2004 Doc. 9.75 Ver 3
and italic respectively in a graphical browser such as Internet Explorer, they also
have meaning in a screen reader. For instance text will be read with increased
strength or emphasis.
6.5 Return to the Design view:
Figure 6-6 The Document toolbar
• Highlight the following text:
WebCT – an online learning environment
Training Support – support services for internet training
Workshops – face to face
• In the Property inspector, click on the button to make your text into
an unordered (bulleted) list
Your page should look as follows:
Figure 6-7 netskills.htm
Breaking up content into chunks and using lists enhances the usability of your
Acces
sibility
online materials, particularly useful for dyslexic users.
• From the main menu, select File – Save to save your page.
6.6
14

15. Dreamweaver MX 2004 Doc. 9.75 Ver 3
7. The Insert Bar and Tables
Objectives To add a table to your page.
You will use the Insert bar.
Method
Comments The Insert bar has eight categories, selected from a drop-down menu,
providing easy access to the more commonly used elements of web page
design.
7.1 The Insert Bar
Locate the Insert bar:
Figure 7-1 The Insert bar
The Insert Bar displays the Common category by default. Clicking on the
menu button will display a list from which the other categories may be selected.
Figure 7-2 The Insert bar categories menu
Ensure that the Common category is selected.
15

16. Dreamweaver MX 2004 Doc. 9.75 Ver 3
7.2 • In the Document window, place your cursor on a new line after the last
piece of text:
Workshops
ITS offer workshops on a variety of topics
• On the Insert bar, click on the Insert Table button:
• In the Insert Table window, set the Rows: to 3, Columns: to 3, Width:
to 100 and ensure the units are Percent. Make the Cell Padding: 5.
Figure 7-3 Insert Table
• In the Accessibility section of the Table window, enter the following text
shown in bold, in the appropriate text boxes:
Caption:
Selection of Netskills Workshops
Summary:
This 3D table shows different Netskills workshops in the left-
most column, followed by pre-requisites and any
supplementary information.
• Click OK
Your page should look as follows:
Fig 7-4 netskills.htm
16

17. Dreamweaver MX 2004 Doc. 9.75 Ver 3
Accessi The information contained in the summary is read out by a screen reader and
bility
helps present the information contained within the table in context. It is not
used in a graphical browser.
7.3 • Click in the appropriate cell and add the following text, shown in bold, to
your table in the cells indicated:
Topic Pre-requisites Supplementary
Information
Exploring XML HTML and CSS
Web Accessibility: HTML
Design-for-All
7.4 • In the Document window, place the mouse at the top of the first table
column
• When the cursor changes to an arrow: , click to select the column. You
will see the selected area outlined in bold when it is selected:
Figure 7-5 Selecting a table column
Note that the Property inspector now displays a set of attributes appropriate
to the selected object, a table column:
Icon displaying
table row
properties
Figure 7-6 Property inspector for a table column
• Use the Property inspector to change the column text so that it displays
as italic
7.5 In the Document window place the mouse at the top left corner of the table.
When the cursor changes to a , click to select the table. You will see the
selected table surrounded by a bold line:
Figure 7-7 Selecting a table
17

18. Dreamweaver MX 2004 Doc. 9.75 Ver 3
In the Property inspector, click on the BgColor palette button:
Palette icon
Figure 7-8 Property inspector for a table
This will open up the colour palette and the cursor will change to a dropper .
Use the dropper to select a colour.
Your page should look as follows:
Figure 7-9 netskills.htm
7.6 Save your file as netskills.htm
18

19. Dreamweaver MX 2004 Doc. 9.75 Ver 3
8. Creating Hypertext Links
Objectives To make hypertext links in your page.
You will use the Property inspector and the Insert bar.
Method
Comments As with many things in Dreamweaver, there are several different ways to
create hypertext links.
8.1 Create a link by Browsing
• With Netskills.htm open in the Document window, highlight the text in the
table:
Exploring XML
• In the Property Inspector, click on the Browse for File button , found
next to the Link box
Browse for File
Figure 8-1 The Property inspector
• In the Select File window, choose the file xml.htm and click OK
• Note that the filename will appear in the Property inspector, in the Link
box
This has created a hypertext link from the text to the named file.
Note You can also create links to URLs by typing the web address in the Link box of
the Property inspector.
8.2 Create a link with Point to File
• In the Document window, highlight the following text in the table:
Web Accessibility: Design-for-All
• In the Property Inspector, click and hold on the Point to File button ,
found next to the Link box
Point to File
Figure 8-2 The Property inspector
19

20. Dreamweaver MX 2004 Doc. 9.75 Ver 3
• With the mouse button held down, drag the pointer to the file access.htm
as listed in the Site files panel:
Figure 8-3 Creating hypertext links using Point to File
• Release the mouse and again note the filename has appeared in the Link box
of the Property inspector
This is an alternative way of creating a hypertext link to a local file.
8.3 Link within a Page
• Highlight the text at the top of the page:
Netskills
Go to the Insert bar (see below):
Figure 8-4 The Insert bar (Common category)
• Click on the Named Anchor button . In the pop-up window, enter the
Anchor Name: Top
Figure 8-5 Named Anchor
• Click OK
Note the appearance of an open book icon to indicate that your text is now an
anchor – this symbol only appears in Dreamweaver (i.e. it will not be seen within
a web browser)
Figure 8-6 Open book (anchor) icon
20

21. Dreamweaver MX 2004 Doc. 9.75 Ver 3
8.4 Create an Internal Link
• In the Document window, place the cursor at the end of your page, after
the table
• On a new line, type the following text:
Back to top of page
• Highlight the words top of page
• From the Property inspector, drag the Point to File icon to the
Document window and the anchor Top
Figure 8-7 Using Point to File to create an internal link
Note that the name of the anchor (preceded by a #) has appeared in the Link
box in the Property inspector.
You have now created an internal link between two parts of the same document.
8.5 Go to the Document toolbar:
Figure 8-8 The Document toolbar
• Click on the Preview/Debug in Browser button:
• From the drop down menu options, click to preview the page in your default
browser, as shown below:
Figure 8-9 Preview in Browser
Your page will open in a new browser window.
• Test the three links that you have created (you may have to reduce the size
of your browser window to prove that the internal link is actually working)
Note The shortcut key to Preview in Browser is F12
8.6 Save netskills.htm
21

22. Dreamweaver MX 2004 Doc. 9.75 Ver 3
9. The Insert Bar and Images
Objectives To add images to your page.
You will use the Insert bar.
Method
Comments Any non-text items in a web page must have an accompanying text
description, in order for the page to be accessible to visually impaired
users.
9.1 Insert Image
• With Netskills.htm open in the Document window, click in the uppermost
of the two empty table cells (under the heading Supplementary
Information)
• Go to the Insert bar:
Figure 9-1 The Insert bar (Common category)
• With the Insert bar displaying the Common category, click on the Image
button:
• From the drop-down menu, select Image. The Select Image Source
window will open listing all the image files in your web site
• Select explore.gif (note the image is previewed in the window).
Figure 9-2 Select Image Source window
• Click OK
• In the Image Tag Accessibility Attributes window, add Alternate Text:
Man Exploring
Figure 9-3 Accessibility attributes for a simple image
• Click OK
Your image should now appear in the table cell.
Acces All images must have text descriptions, which are read out by screen readers.
sibility
The description should briefly convey the meaning or purpose of the image
22

23. Dreamweaver MX 2004 Doc. 9.75 Ver 3
9.2 • In the Document window, click in the remaining empty cell in the table
• On the Insert bar, click on the Image button
• In the Select Image Source window, click on disabled.gif
• In the Image Tag Accessibility Attributes window, add the alternate
text:
Types of disability amongst students
• Click OK
Your image should appear in the table cell.
Acces In addition to the simple text description, more complicated images such as this
sibility
graph should have a fuller description contained in a separate web page. This can
then be linked using the Long Description attribute, from the Image Tag
Accessibility Attributes window.
9.3 Width and Height
• In the Document window, click on the following image:
Figure 9-4 Man exploring image
• Use the Property inspector to change both the width (W) and height (H)
of the image to be 100
• Use the Link box to create a hypertext link to the following website:
http://www.netskills.ac.uk/
9.4 Save netskills.htm and test your new link in the browser. [Hint: F12 is the
shortcut to preview in browser].
23

24. Dreamweaver MX 2004 Doc. 9.75 Ver 3
10. The Insert Bar: Head Category
Objectives To add metadata to your page.
Method You will add the metadata elements, keywords and description to your
web page using the Insert bar.
Comments Search engines use metadata in order to locate and categorise web pages.
10.1 • Use the Document toolbar to change to Design View if necessary:
Figure 10-1 The Document toolbar
10.2 • From the Insert Bar menu, select the HTML Category:
Figure 10-2 Selecting the HTML category from the Insert Bar
10.3 Add Keywords
• With the Insert Bar displaying the HTML Category, click on the Head
and from the drop-down menu select Keywords:
button
• In the Keywords window, add the following text, shown in bold and click
OK
Netskills, WebCT, Internet, Training, Workshops
WebCT
Figure 10-3 Keywords window
10.4 • On the Insert bar, click on the Head button
• Select Description from the drop-down menu:
Figure 10-4 Selecting the Description option
24

25. Dreamweaver MX 2004 Doc. 9.75 Ver 3
• In the Description window, add the following text shown in bold and click
OK
Services offered by Netskills
Figure 10-5 Description window
Note Search engines use metadata descriptions for finding pages and return the
description in the search findings (after the page title).
10.5 • Use the Document toolbar to change to the Code view:
Figure 10-6 The Document toolbar
Examine the code in the <head> section of the web page to see the HTML
meta tags that you have added.
25
Document 9.75 Version 3 February 2007