171dreamweaver

Guide 171
Version 1.5
Introduction to Dreamweaver
This document provides an introduction on using Dreamweaver to create
WWW pages. It covers creating a site with site management tools, producing a
number of pages with images, links and tables and using some basic HTML.
80p

Document code: Guide 171
Title: Introduction to Dreamweaver
Version: 1.5
Date: February 2006
Produced by: University of Durham Information Technology Service
Copyright © 2006 University of Durham Information Technology Service
Conventions:
In this document, the following conventions are used:
• A typewriter font is used for what you see on the screen.
• A bold typewriter font is used to represent the actual characters you type at
the keyboard.
• A slanted typewriter font is used for items such as filenames which you should
replace with particular instances.
• A bold font is used to indicate named keys on the keyboard, for example,
Esc and Enter, represent the keys marked Esc and Enter, respectively.
• A bold font is also used where a technical term or command name is used in
the text.
• Where two keys are separated by a forward slash (as in Ctrl/B, for example),
press and hold down the first key (Ctrl), tap the second (B), and then release
the first key.

Contents
1 Getting started ...................................................................................................1
2 Site management ...............................................................................................2
2.1 Restricting access to your pages...................................................................3
3 Creating a new folder ........................................................................................4
4 Creating a new page..........................................................................................5
4.1 Entering text...................................................................................................5
4.2 Adding objects ...............................................................................................6
4.3 Page Title.......................................................................................................7
4.4 Saving and testing your page ........................................................................8
5 Inserting images ................................................................................................8
5.1 Editing images ...............................................................................................9
6 Adding links within the page, to other pages and to files ...........................10
6.1 Linking within the page ................................................................................11
7 Tables................................................................................................................13
7.1 Sorting tables...............................................................................................14
8 Linking to other resources..............................................................................14
9 HTML – editing in Code View..........................................................................15
9.1 Adding text...................................................................................................16
9.2 Creating lists ................................................................................................16
9.3 Linking to sites .............................................................................................17
9.4 Adding comments ........................................................................................17
9.5 Roundtrip HTML overview ...........................................................................18
9.6 Cleaning up HTML.......................................................................................19
9.7 Clean up Word HTML ..................................................................................19
10 Putting mathematical formulae on the WWW ...............................................19
11 Spelling.............................................................................................................19
12 Using Help in Dreamweaver............................................................................19
13 Closing Dreamweaver .....................................................................................19
14 Further information..........................................................................................20
15 Testing your website for accessibility...........................................................21
15.1 To run an accessibility report on a current document ..................................21
15.2 Inserting accessible media objects to a new document...............................21
Guide 171: Introduction to Dreamweaver i

Throughout this guide whenever you see a boxed area like this with the
following symbol this means that there is an activity to carry out
relating to the topic you have just read about.
This guide works so that you read information and practice what you have
learnt by carrying out the activity.
1 Getting started
This section describes the workspace in Dreamweaver MX.
1 Click on the Start button, then select Programs | Web Tools |
Macromedia MX | Dreamweaver MX.
If you wish try out the online tutorial – From the Help menu select
Tutorials| Dreamweaver Basics | Exploring the Workspace
The Dreamweaver workspace is made up of the Document window and
various panels and toolbars. You will use three main panels/toolbars when
you are creating your web pages called the Insert Bar, the Property
Inspector and the Site Panel.
Note: if the Insert Bar and Property Inspector are not visible when you
open Dreamweaver they can be opened by selecting them from the
Window Menu.
The Document window displays the current document as you create and
edit it. When the Document window is maximized, tabs appear at the
bottom of the Document window area showing the file names of all open
documents. Clicking these tabs makes it easy to switch between
documents.
The Insert Bar contains different icons for inserting various types of objects
such as images, layers and tables. It consists of a series of overlapping
tabbed pages (like worksheets in Excel). If you place your mouse over an
icon a description of that icon appears. For the majority of time you will use
the icons in the ‘Common’ tab.
The Property Inspector shows the properties for a selected object that you
have added to your page, such as the width and height properties of
images:
Note the small arrow in the bottom right hand corner which allows you to
expand this box to see extra options or properties of an object.
Guide 171: Introduction to Dreamweaver 1

The Site panel allows you to manage the files and folders that make up
your site, and provides a view of all the files contained in your site.
Dreamweaver can display a document in three ways: in Design view, in
Code view, and in a split view that shows both the design and code. (To
change the view in which you are working, click on a view in the
Dreamweaver toolbar). By default, Dreamweaver displays the Document
Window in Design view.
Design view in this view, Dreamweaver displays a fully editable, visual
representation of the document, similar to what you would see viewing the
page in a browser.
Code view is an hand-coding environment for writing and editing HTML,
JavaScript, server-language code—such as Microsoft Active Server Pages
(ASP) or ColdFusion Markup Language—and any other kind of code. It is
not necessary to work in code view to create pages, most of the
functionality you will need for your pages can be generated in Design View.
Code and Design view allows you to see both Code view and Design view
for the same document in a single window.
2 Site management
A Web site is a set of linked documents, which are about related topics or
have a shared purpose. Dreamweaver is a site creation and management
tool as well as a document creation and editing tool. Documents are the
pages users see when they visit your Web site. They can contain text and
images, as well as sound, animation, and links to other documents.
To help you manage your site, Dreamweaver displays the files in the site as
a list of files. Sites can be seen from the Site panel. If you cannot see the
site panel, go to the Window menu and select Site.
By default on the Networked PC Service (NPCS) a site has already been
set up called ‘my durham site’. If you wish to change the name of this site
in the Site panel select Site | Edit Sites, click Edit and change the name.
By default you have access to a public_html folder on your J: drive, this is
where you will store the files and folders associated with your web site.
Notice that ‘my durham site’ automatically points to the files located in
J:public_html.
When you begin to build the design for your web site it is advisable to do
this using the Site panel window. Here you can create files and folders to
begin to add structure to your site. All the files that you will create will have
a .htm extension, this is the file format that is required in order for them to
be visible on the web. It is advisable that you create separate folders for
different elements of your page for example, images (to include all the
pictures used in your site) and resources (to include for example, word
documents). Below is an example of how your site may be constructed.
Guide 171: Introduction to Dreamweaver2

Your site is live from the moment you create a .htm file in your public_html
folder, and it can be accessed by anyone from anywhere in the world. The
URL of the site will be:
http://www.dur.ac.uk/f.a.bloggs
with f.a.bloggs being substituted by your own mailname.
You should also note that your web site is listed in the online phone book.
When you create an index.htm page in your public_html folder on your
J:drive, by default your page will be visible when you type the web address
(as above) in a browser using your mailname. If you do not create an
index.htm page visitors will be able to view a list of the directories in your
public_html folder, therefore it is advisable to create an index.htm page.
2.1 Restricting access to your pages
You will notice that when you look in your public_html directory on your
J:drive you automatically have two sub-directories called local and
password. Do not delete these as you may wish to use them if you would
like to restrict access to your pages.
Local directory
If you only want members of the University to access a particular document
or web page e.g. notes.pdf, save the file in the subdirectory local located in
your public_html directory. The URL for these pages will then be as
follows:
http://www.dur.ac.uk/f.a.bloggs/local/notes.pdf

Because this file is in the local subdirectory, the WWW page will be
accessible if a browser is running on a computer which is attached to the
University’s network. If the browser is running on a computer that is outside
the University, a login box will appear, and unless the user can provide and
ITS username and password, they will be denied access.
Password directory
If you want to force users to Authenticate as an ITS user (the browser will
ask them for their ITS username and password) then place web pages in
your password subdirectory. This provides additional security. Only put files
in the password directory if you really need a person to authenticate: if you
just want to restrict access to a member of the University put files into the
local subdirectory instead.
3 Creating a new folder
Dreamweaver offers a visual representation of your Web site through its
Site panel. Sites are much easier to manage if you organise your files in
folders. You will now create two folders in your public_html directory —
one for images (pictures) and one for resources and create several files
which you will later link together.
The Site window enables you to quickly review the structure of a site, to
add folders and files and to add, move or modify links.
CREATING NEW FOLDERS
1 Ensure the Site panel is visible on the right hand side of the
work area
2 Click on the site folder at the top of the Site panel window
(Site – my durham site (J:public_html)) if it is not already
highlighted
3 In the Site panel window click File | New Folder from the
drop down menu.
4 Type pictures
5 Press the Enter key on the keyboard.
6 Repeat steps 1 – 4 to create a second folder named
resources.
CREATING NEW PAGES
1 Click on the site folder at the top of the Site panel window
(Site – my durham site (J:public_html))
2 Click File | New File from the drop down menu.
3 Type index.htm

4 Repeat steps 1-3 and create another page called
interests.htm
5 Double click the icon next to the file index.htm to open it.
Note that index.htm has appeared as a tab in the bottom left
hand corner of the Document window.
COPYING RESOURCES
1 From the Start menu open Mozilla.
2 Go to the following page:
http://www.dur.ac.uk/its/info/guides/files/www/
3 Right click on the words Lecture 1
4 In the menu that appears select the Save Link Target As
option, select the resources folder in your public_html
folder on your J:drive, and click Save.
5 Right click on the words outside.jpg and inside.jpg and
save the images to your pictures folder too.
4 Creating a new page
In this section you will start to create your WWW page in your site by
entering text, adding bullet points and horizontal lines, and choosing
colours.
4.1 Entering text
When you enter text on your page, any formatting you do to the text is done
in the Property Inspector. In order for you to format the text you first need
to select it using the mouse.

ADDING TEXT
1 In the Document window in you index.htm page type
<Your Name>’s Homepage then press Enter
2 Highlight this line of text with the mouse. Select Heading 1
from the Format drop down menu in the Property Inspector
3 Put the cursor on the next line, enter some general information
about yourself, and the press Enter
4 Underneath this type the name ‘Experience’ and press Enter
5 Highlight this line of text with the mouse. Select Heading 2
from the Format drop down menu in the Property Inspect
6 Click File | Save
7 In the Site panel double click on the icon next to interests.htm
to open it. Add a title
Interests
to the top of this page and format the text by following the
instructions above.
8 Click File| Save.
4.2 Adding objects
For the majority of the time when working with the Insert bar you will be
adding objects under the Common category (this is the default tab that will
be visible when you open Dreamweaver). If you click on another tab, you
will notice other sets of icons. You may wish to use these when you
develop your pages further and need to work with something more specific,
for example frames. However for the majority of time you will be working
under the Common category.
Whenever you add an object to your page from the Insert bar, information
about that object will appear in the Property Inspector, where the
properties/attributes of that object can be changed.
You are going to add various objects and modify them in the Property
Inspector.
You can create bulleted (unordered) and numbered (ordered) lists from
new text or existing text.

ADDING LISTS
1 On your index.htm page underneath the text you have already
added click the Bullets (Unordered list) button in the Property
Inspector.
2 List your skills or experience, pressing Enter after each line:
3 Press Enter 3 times.
4 Numbered lists (Ordered lists) can be added in the same way
using the numbered list button (next to the Bullets button).
4.3 Page Title
ADDING A HORIZONTAL RULE
1 Click between your bulleted and numbered list in your index.htm
page and click the Insert Horizontal Rule icon on the Insert bar
(Common tab).
2 In the Property Inspector click on the drop down menu next to
pixels and select %. This adjusts the width of the line as a
percentage of the page size.
3 Enter 75 by the W (Width box).
4 Click in the Document window to view your changes.
When you first start Dreamweaver, your default Web page is untitled. To
add a title, enter some text in the ‘title’ field in the document toolbar at the
top of the screen.
ADDING A TITLE
1 Give your index.htm page a Title e.g. Joe Bloggs
Homepage
2 Click File | Save to save your page
3 Open your interests.htm page by clicking on the tab in the
bottom of the Document window
4 Modify the title of this page and save the changes.

Specifying a title for your page is important as this is what appears in the
title bar in the browser window. It will also be used by search engines to
locate your pages.
4.4 Saving and testing your page
You have created a file called index.htm, when viewing your pages in a
browser this file opens by default using your mailname if no other file is
specified. You can view your file on the Internet using Mozilla.
When testing your page, it is important to Reload the page in the browser
to view your most recent changes.
TESTING YOUR PAGE
1 From the Start menu open Mozilla.
2 Type the URL of your page in the Location bar
http://www.dur.ac.uk/mailname
5 Inserting images
You are going to add your photo to your index.htm page (if you are
attending an ITS training session, you will have your photo taken.
Otherwise, use any image you have available).
When you add images to your pages ensure that you add a description of
the image in the Alt field in the Property inspector. This is the text that will
be read by people who have text-only browsers or who have graphics
turned off. This is important given the new Accessibility Legislation brought
out in September 2002 - certain elements of your pages may need
modifications to make them more usable and accessible (for more details
see Appendix 1).
ADDING IMAGES
First you will copy the photograph to the pictures folder you created
earlier on your J: drive.
1 Go to the page:
http://www.dur.ac.uk/dreamweaver.train/photos/
You can either save the size of photo as you see it on this page or if
you click on the image you will see a larger sized photo.
2 Either way right-click on your photo and select Save Image
As.

3 Select the pictures folder in the public_html folder on your J:
drive, enter the filename photo.jpg, and click Save.
4 Return to Dreamweaver.
5 Place the cursor where you want the image to appear on the
index.htm page then click the Insert Image icon in the Insert
bar.
6 In the dialogue box that opens select photo.jpg (from your
pictures folder) and click Select.
7 In the Image Tag Accessibility Attribute window type in the
Alternate Text Box
a photo of me
8 Click OK
9 Save your page.
5.1 Editing images
You will notice that if you click on your image in Dreamweaver handles
appear around the edges of it which enable you to resize it. This only
affects the appearance of the image on screen - it does not alter the file
size of the image. Therefore it is not advisable to resize your images in this
way, you need to alter the actual image file using a graphics package. It
should be noted that Dreamweaver is a good Web authoring tool, but it is
not a graphics editor.
When you insert an image into Dreamweaver you can click the Edit button
in the Property inspector and a graphics package will be launched
automatically. This is Macromedia Fireworks. Use it to edit your image.
When you save it the changes are automatically updated in Dreamweaver.
The main editing that you will do within Fireworks will be resizing an image,
you do not need detailed knowledge of the package. By clicking
Modify|image size you can alter the pixel size of the image and whichever
value you change the other value changes relative to this to maintain the
dimensions of the image. (If you wish to learn more about creating images
for the WWW an ITS course is available for this or you can refer to Guide
135).
You must be aware also that you can easily copy images (and text) from
other web pages, but you need to make sure that you are not infringing
someone else’s copyright. If you wish to use images from other sites you
will need to contact them and gain their permission before doing so. A
useful site for images that is available for your use is:
http://www.freefoto.com. This has a large database of pictures for you to
include copyright free into your web pages, as long as you make a
reference to them.

RESIZING AN IMAGE
1 Go to the website www.freefoto.com
2 In the search field type
Durham cathedral
3 Choose an image and click on it to view the full image
4 Follow steps 2-8 in the ADDING AN IMAGE activity
above to add this image to your interests.htm page in
Dreamweaver
5 With the image selected in Dreaweaver, click the Edit
button in the Property inspector this launches the
graphics package Fireworks
6 When asked to find the source click No
7 Select Modify |Canvas| Image size
8 Click the dropdown menus next to the width and height
dimension and change pixels to percent
9 Change the width percentage value to half the existing
size, notice how the height value automatically changes
10 Click Done
This will take you back into Dreamweaver
11 Click the Reset size button in the Property inspector to
view your changes in Dreamweaver.
12 Save your page.
(Note: if the Done button is not visible above the image in Fireworks
when you edit it, close the package, return to Dreamweaver and redo
steps 6-11)
You may wish to add further images to your page.
6 Adding links within the page, to other pages and to files
In this section, you will create links within your web page and to other web
pages. You will also link to a Word document.
You can create links within Dreaweaver using one of the following 2
methods, either linking to an existing web page or linking to a document
e.g. Word document:
1 Select the text, image or object you want to establish as a link
2 Do one of the following:
• Type the URL directly into the Link text box (include http://)

• Select the Browse for file icon to the right of the Link text box to
open the Select File dialogue box, where you can browse for the file
(these files must be saved in your public_html folder, if they are
contained elsewhere you will be prompted to copy them to your
public_html folder when you create the link)
LINKING TO A WEB PAGE
1 On your index.htm page highlight the text at the top that states
your department e.g. Geography Department
2 In the Link field in the Property inspector type the URL of
your department e.g.
http://www.geography.dur.ac.uk
If you do not know the URL, then in Mozilla click Home, then
Academic departments. Click on your department and the URL will
be displayed for you to copy.
3 In Dreamweaver, click anywhere in the Document window, the
words Geography Department should be underlined and
blue.
4 If you wish to change the colour of the link to something other
than blue, click Modify | Page properties, select a new colour
next to Links and click OK.
5 Save and test your page.
LINKING TO A FILE
1 Under Third Year, type Lecture 1
2 Select the words Lecture 1 and click the Browse for File icon
in the Property Inspector
3 If necessary, change to the J: drive and select the resources
folder in the public_html folder and change Files of type to
All Files, then select the file lecture1.doc and click Select.
6.1 Linking within the page
If you have a long web page which may involve a large amount of scrolling
you can use the Property inspector to link to a particular section of the page
(e.g. the top or the bottom) by creating Named Anchors.
Creating a link to a named anchor is a two-step process. First, create a
named anchor, then create a link to the named anchor.

INSERTING AN ANCHOR
1 On your index.htm page click to the left of your name at the
top of the page.
2 From the Menu bar, select Insert | Named Anchor or click on
the Insert Named Anchor icon in the Insert bar.
3 The Insert Named Anchor dialog box will appear. Type:
top
as the Anchor Name and click OK.
Note a yellow anchor has appeared in your page, this will not
be visible in the Browser.
4 At the bottom of your page underneath all your text, type the
words:
top of page
5 Select the words top of page that you have just typed.
6 In the Link field of the Property Inspector, type
#top

7 Tables
Tables are used for the display of tabular data.
You can control almost all of a table’s features through the Property
inspector. To insert a table select the icon from the Insert Bar. An Insert
table dialogue box will open where you can specify various parameters:
ADDING A TABLE
1 On your index.htm page click return underneath your name
and department at the top.
2 Click the Table icon in the Insert bar
3 In the Insert Table dialogue box, enter 4 Row and 2
Columns and change the Width to 80 percent and the
Border to 1, then click OK.
4 An Accessibility Options for Tables window will open, in
the Caption field type Education
5 In the Header box select Column, click OK
The table will be selected automatically and information about the
table will appear in the Property inspector.
6 Click the drop down menu next to the Align field and select
Center
ADDING TEXT TO THE TABLE
1 In the table cells, enter information about your education
history.
Notice the text will automatically wrap to the next line when it
reaches the edge of the cell.

2 Save your changes
7.1 Sorting tables
Tables can be sorted by one or two columns provided they do not contain
merged cells.
To sort a table select Commands then Sort Table. You can sort your
table by column either alphabetically or numerically.
8 Linking to other resources
You can create links to resources such as lecture notes (which could be a
Word document, an Adobe pdf (portable document format) file or a
PostScript file), a PowerPoint presentation, and reading lists. Note: you can
view pdf files using a plug-in to a web browser, but to create them you need
Adobe Acrobat. An advantage of using pdf files is that you do not need
access to the original program (e.g. Microsoft Office) to view them. The
Acrobat Reader is already available on the Networked PC service and the
UNIX service at Durham and can be obtained for free from the Adobe
section of the UK Mirror service.
For this section you are going to link to a library catalogue and to video and
audio files.

LINKING TO THE LIBRARY CATALOGUE
1 On the interests.htm web page add a heading of Reading list
and edit this text as you wish in the Property Inspector.
2 Underneath the heading type the following text:
Laurillard, D. Rethinking university teaching: a framework for th
effective use of educational technology
3 In Mozilla go to the University Library page
http://www.dur.ac.uk/library
4 In the Search list select Author and type Laurillard
5 Click the Search button. Select the first edition – 1993.
The OPAC reference for this book should appear.
6 Select and copy the URL using Edit|Copy (Ctrl/C) which begins:
http://library.dur.ac.uk/search/a?SEARCH=laurillard
7 On the interests.htm page in Dreamweaver, select the text
Laurillard, D. Rethinking university teaching: a framework
for the effective use of educational technology. Click in the
Link field in the Property inspector and paste the URL using
Ctrl/V.
8 Add further books to your reading list if you wish.
9 Save your page and test your link.
If you get strange results when you test your link, it might be because
Dreamweaver has subtly changed the address of the link. Any links which
involve a plus character (+) will not work without some editing. Switch to
Code view and re-paste the OPAC URL into the document.
9 HTML – editing in Code View
Hypertext Markup Language (HTML) is the native language of the WWW.
As you create and work with documents, Dreamweaver automatically
generates the underlying HTML. The HTML Source inspector is used to
create or edit the HTML source code.
To view the HTML in your page click the Show Code View icon in the top
left corner of your page.
The Code view displays the source code for the current document. You will
see the text that you have typed in as well as some HTML tags, which are
colour coded and appear in angle brackets e.g. <title>.

The document starts with the <html> tag and if you scroll to the end you
will see that it finishes with the </html> tag.
Also near the top is the <head> tag which encloses information about the
document. The page title appears within the <title> and </title> tags.
The contents of the document appear between the <body> tag near the top
of the page and the </body> tag near the end of the document.
9.1 Adding text
Text can be added in Code view. Paragraphs are defined by the and
 tags. Tags are case insensitive so it does not matter if you type 
or . HTML treats multiple spaces as one and ignores any line breaks
you might add by pressing the return key.
ADDING TEXT IN CODE VIEW
1 In your index.htm page click the Show Code View icon
2 Click Return after Line 10 (approx) which ends with </h2>
3 Type
This is my first web page
Note: Dreamweaver will automatically create the closing tag
() for you.
4 Click in the Document window to see the text displayed.
Any HTML that you type in Code view is not rewritten by Dreamweaver. If
you type invalid HTML then Dreamweaver highlights the tags as invalid
markup items when you return to Design View.
9.2 Creating lists
You can add extra items to bulleted (unordered) and numbered (ordered)
lists from new text or existing text in the HTML Inspector window.
The tags <ul> and </ul> are used to start and end a bulleted (unordered)
list and the tags <ol> and </ol> are used to start and end a numbered
(ordered) list. The tags <li> and <li> are used to start and end items on the
list.

CREATING LISTS
1 Click at the end of the line <li>research</li> (approx Line 26)
and press Enter.
2 Type
<li>other</li>
and press Enter.
Note again: Dreamweaver will automatically create the closing tag
(</li>) for you.
3 Click in the Document window and you should see “other” has
been added to the list.
9.3 Linking to sites
Links are created using the <A> anchor tag. You are going to create a link
to the University of Durham home page.
CREATING AN HTML LINK
1 Find the link you created to you department (approx Line 10)
E.g.
<a href="http://www.dur.ac.uk/Geography/">Geography Department</a
Click at the end of the line and press Enter.
2 Type
<a href="http://www.dur.ac.uk/">University of Durham</a>
3 Click on the Show Design view icon to see your changes in the
Document window
4 Save the file and test the link.
9.4 Adding comments
Comments may be used in HTML to explain the HTML code or provide
other information. The comments will not appear in Design View.

ADDING COMMENTS
1 Return to Dreamweaver, and click in front of Lecture 1 in Design
view.
2 Select Insert | Text Objects | Comment from the Menu bar.
3 Type
Lecture notes last updated October 2000
and click OK.
4 Click on the Show Code View icon.
You will see the following HTML code in the HTML window.

5 To edit the comment, select the Comments icon in the Document
window and edit the text in the Property Inspector.
A comment is normally invisible when you view a page with a web browser.
Comments can only be seen outside Dreamweaver if you look at the
source code of the page in your browser.
If you look at a page in Dreamweaver in Design View, comments are
shown with a little marker. Click on this to see the text displayed in the
Properties Inspector.
9.5 Roundtrip HTML overview
Roundtrip HTML allows you move your documents between Dreamweaver
and a text-based HTML editor, such as Notepad, with little or no impact on
the content and structure of the document’s HTML source code.
The main features of roundtrip HTML are:
• By default, Dreamweaver rewrites overlapping tags, closes open tags
that aren't allowed to remain open, and removes extra closing tags
when you open an existing HTML document.
• Dreamweaver highlights invalid tags for HTML that it does not support
in the document window. If the invalid tag is selected, the error and
how to correct it are shown in the Property inspector.
• Dreamweaver does not change tags that it does not recognize, for
example XML tags, because it has no criteria by which to judge them
valid or invalid.

9.6 Cleaning up HTML
The Clean Up HTML command (in the Commands menu) can be used on
existing HTML documents to remove empty tags and change invalid HTML
code.
9.7 Clean up Word HTML
The Clean Up Word HTML command (in the Commands menu) can be
used to remove the extraneous HTML code created when Word documents
are saved as HTML files. The code that Dreamweaver removes is primarily
used by Word to format and display documents as they appeared in Word,
and is not needed to display the HTML file. It is important to keep a copy of
your original Word (.doc) file as you may not be able to reopen the HTML
document in Word.
10 Putting mathematical formulae on the WWW
See http://www.dur.ac.uk/its/services/web/publishing/software/maths/
for information on this subject.
11 Spelling
You can now check the spelling of your document.
1 From the Menu bar, click Text|Check Spelling.
You can change or ignore any incorrect spellings.
2 From the Menu bar, click File and then Save.
12 Using Help in Dreamweaver
The Dreamweaver help pages contain Contents, an Index and a Search
facility. The Contents is organised by topic and includes a guided tour and
a tutorial.
1 Select Help, then Using Dreamweaver or press the F1 key.
2 Select Help | Tutorials. You may want to look at this later.
13 Closing Dreamweaver
F1 From the Menu bar choose ile then Save.
F2 Then choose ile then Exit.

14 Further information
Further information about all aspects of creating and publishing WWW
pages, including links to online tutorials and useful tools may be found in
the ITS WWW pages at
http://www.dur.ac.uk/its/services/web/publishing/
Examples of using the WWW in teaching and learning may be found at
http://www.dur.ac.uk/its/lt/projects/
Information for books on MX
Dreamweaver MX Bible (2002), Joseph W. Lowery, Hungry Minds, ISBN:
0764549316
Sams Teach Yourself Macromedia Dreamweaver MX in 24 Hours
(2002), Bruce B, Sams, ISBN: 067232346X

Appendix 1 – Accessibility
15 Testing your website for accessibility
Dreamweaver assists you in creating accessible pages that contain useful
content for screen readers and comply with government guidelines. You will
have noticed that Dreamweaver prompts you to enter accessibility
attributes whenever you insert page elements.Reporting to determine if
sites meet U.S. law and international standards using compliance checker
and reference content. An accessible environment has been created in
Dreamweaver including using the keyboard to create shortcuts, large fonts
and screen reader support to work easily with assistive technology.
The best way to ensure that your site is accessible to all users is to design
your site according to the W3C (Web Content Accessibility) guidelines
(http://www.w3.org/TR/WCAG10/). Then, either use the Dreamweaver
reports feature to check that you have implemented the guidelines correctly
or use a Accessibility Checking Assistant e.g. LIFT (for further information
please refer to the ITS Accessibility web pages
http://www.dur.ac.uk/its/services/web/accessibility/
15.1 To run an accessibility report on a current document
1 Open the document you want to check in Dreamweaver
2 Choose File | Check page | Check Accessibility
The report results appear in the Site Reports panel
3 Select any line in the report, and click the More Info button on the
left side of the Site Reports panel for a description of the problem
and suggestions for fixing the problem.
The information appears in the Reference panel
4 Double click any line in the report to view the corresponding code in
the Document window.
In the Document window, in Code View, edit or add attributes to the
appropriate tags to make your content comply with accessibility guidelines.
To use the tag editor to assist in coding, select code, right-click and choose
tag editor.
15.2 Inserting accessible media objects to a new document
For Dreamweaver to prompt you to add the necessary information to
make your pages accessible you need to select the relevant
information in your Preferences.
Select Edit | Preferences | Accessibility
Here you can select the objects and be shown the attributes of that
particular object. The objects where accessibility guidance is

applicable are when inserting form objects, frames, media, images and
tables. It is useful to select all of these so that you are prompted each
time you add one. You also have the option to select Large Fonts for
your pages. By default these are already selected on NPCS.
Dreamweaver help provides further help with adding accessible media
objects for each of the ones listed above.
The accessibility validation feature in Dreamweaver MX uses
technology from UsableNet. UsableNet includes fix wizards for
complex tables, forms and images. To check your page is accessible
you can enter the URL of your web page here and gain a full
accessibility report of your page by going to
http://www.usablenet.com
Other useful information is available from the Techdis web site
http://www.techdis.ac.uk/seven/

171dreamweaver

More Related Content

What's hot (20)

Similar to 171dreamweaver (20)

171dreamweaver