CREATING ACCESSIBLE WEB PAGES

Transcription

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 Blackboard ( the college s online learning environment. You may enrol yourself onto the required course, IT Fitness, with the Birkbeck Self Enrolled courses link. To purchase the software, see the CHEST Macromedia Educational Purchase Plan details, by searching on dreamweaver at Contents 1. Getting Started 3 2. Starting Dreamweaver MX Preferences for Accessibility 5 4. Creating a Web Site 7 5. The Document Toolbar and Document Window 9 6. The Property Inspector The Insert Bar and Tables Creating Hypertext Links The Insert Bar and Images The Insert Bar: Head Category 24 About this Document Words in bold Small capitals e.g. ALT Press KEY1 + KEY2 Press KEY1, KEY2 Will need to be typed or chosen from a menu or window Indicate keys that you press Press both keys together 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

2 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 ITS-helpdesk@bbk.ac.uk Phone: UK

3 1. Getting Started Objectives Method To download files required for the training materials and then open Dreamweaver MX 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 once 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: Login to Blackboard using your ITS username and password If you are not already enrolled on the IT fitness module, follow the link to Birkbeck self-enrolled courses (below your list of modules) and follow the links to sign up to the course Within IT fitness, follow the link to Materials for workshops Click on Dreamweaver 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 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

5 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: Creating web pages with accessibility in mind from the outset is more effective than retrospectively attempting to fix bad web pages. 6

7 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: The Files panel Panel groups: 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 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 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 Document toolbar Document window Properties panel 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 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 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 e 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

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

13 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 sibility 6.4 When writing web pages, focus on structure, using the header tags as in this task. This will help ensure that your pages are accessible. 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. Acces sibility 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

14 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: Highlight the following text: Figure 6-6 The Document toolbar 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 Acces sibility 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

15 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

16 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: Click OK This 3D table shows different Netskills workshops in the leftmost column, followed by pre-requisites and any supplementary information. Your page should look as follows: Fig 7-4 netskills.htm 16

17 Accessi bility 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

18 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 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 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 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 Click OK Figure 8-5 Named Anchor 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 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 F Save netskills.htm 21

22 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). Click OK Figure 9-2 Select Image Source window 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 sibility 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

23 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: Click OK Types of disability amongst students Your image should appear in the table cell. Acces sibility 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: Save netskills.htm and test your new link in the browser. [Hint: F12 is the shortcut to preview in browser]. 23

24 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 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: 10.3 Add Keywords Figure 10-2 Selecting the HTML category from the Insert Bar 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

25 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) 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 4 May 2009