Creating Accessible Web Pages Using Dreamweaver Mx 2004

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

Words in bold Will need to be typed or chosen from a menu 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

Choose Insert – Picture Show menu commands – in this case, choose the option Picture from the Insert menu at the top of the screen

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/

CREATING ACCESSIBLE WEB PAGES WITH DREAMWEAVER MX 2004

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 ("the Owner") 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 Email: [email protected]

2Phone: UK 020 7631 6543


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


2. Starting Dreamweaver MX 2004 Objectives To open Dreamweaver and if used before, to restore the default

workspace. Method You will open Dreamweaver and may use the Preferences window. 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


3. Preferences for Accessibility Objectives To switch on the accessibility features in Dreamweaver. Method You will use the Preferences window. 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

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.


4. Creating a Web Site Objectives To create a Dreamweaver web site. Method You will use the Site panel and the Site Definition window. 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:

Figure 4-1 Panel group

The

7

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.

Panel groupFiles panel

s: Design, Code, Application, Tag Inspector and Files


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


5. The Document Toolbar and Document Window Objectives To explore the main page editing features of Dreamweaver. Method You will use the Document toolbar and the Document window. 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

Figure 5-2 The Document window

Note that the Document window is initially open in Design view as

indicated by the button in the Document toolbar:

Figure 5-3 The Document toolbar

5.2 Code View

Document toolbar

Document window

Properties panel

• 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


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

Note

The Context menu is a generic term and is now supported by many software 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


• 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.

Accessibility

The Page Properties window offers many other options relating to the visual 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:

Figure 5-8 The Document window

File name Page title

11


6. The Property Inspector Objectives To change the properties of text in your page. Method You will use the Property inspector. 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


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

Accessibility

When writing web pages, focus on structure, using the header tags as in this task. This will help ensure that your pages are accessible.

6.4 • In the Document window, highlight the text on the bottom line: a

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.

Accessibility

Dreamweaver MX 2004 uses the logical tags <strong> and <em> instead of the physical tags <b> and <i>. While these logical tags also render text as bold

13


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:


Accessibility

Breaking up content into chunks and using lists enhances the usability of your online materials, particularly useful for dyslexic users.

6.6 • From the main menu, select File – Save to save your page.

14


7. The Insert Bar and Tables Objectives To add a table to your page. Method You will use the Insert bar. 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


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.

16

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


Accessibility

The information contained in the summary is read out by a screen reader and 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: Design-for-All

HTML

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


In the Property inspector, click on the BgColor palette button:

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:

Palette icon


7.6 Save your file as netskills.htm

18


8. Creating Hypertext Links Objectives To make hypertext links in your page. Method You will use the Property inspector and the Insert bar. 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

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

Browse for File

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

Figure 8-2 The Property inspector

Point to File

19


• 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


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:


• 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


9. The Insert Bar and Images Objectives To add images to your page. Method You will use the Insert bar. 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.

Accessibility

All images must have text descriptions, which are read out by screen readers. The description should briefly convey the meaning or purpose of the image

22


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.

Accessibility

In addition to the simple text description, more complicated images such as this 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


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:


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

button and from the drop-down menu select Keywords: • 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


• 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

Technology

Creating Accessible Web Pages Using Dreamweaver Mx 2004