Creating Accessible Web Pages Using Dreamweaver Mx 2004

7,968 views

Published on

Creating Accessible Web Pages Using Dreamweaver Mx 2004

Published in: Technology, Design
  • Be the first to like this

Creating Accessible Web Pages Using Dreamweaver Mx 2004

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

×