Macromedia Dreamweaver MX - ITC

jellytrickInternet and Web Development

Nov 10, 2013 (3 years and 10 months ago)

101 views



MACROMEDIA DREAMWEAVER MX
Instructional Technology Center

















Dreamweaver
MX

Dreamweaver
MX
Macrom
edia Dre
a
m
w
ea
ve
r
MX

Table of Contents
Table of Contents
................................................................................................................1
The Dreamweaver Environment
.........................................................................................4
Text Properties Pane
...........................................................................................................4
Elements of the Properties Pane
.................................................................................4
Image Properties Pane
.........................................................................................................6
Elements of the Properties Pane
.................................................................................6
The Tables Properties Pane
.................................................................................................8
To display the Table Properties pane:
.........................................................................8
Elements of the Table Properties Pane
.......................................................................8
The Table Row Properties and Cell Properties Pane
..........................................................9
Elements of the Table Row Properties and Cell Properties Pane
...............................9
The Insert Pane
.................................................................................................................10
Creating a New Web Page
................................................................................................11
Creating a New Web Page: Toolbar Option
.............................................................11
Creating a New Web Page: Menu Option
.................................................................11
Adding or Modifying a Title
.............................................................................................11
Adding or Modifying a Title: Toolbar Option
..........................................................11
Adding or Modifying a Title: Dialog Box Option
....................................................12
Saving a Web Page
...........................................................................................................12
Exiting Dreamweaver
.......................................................................................................12
Formatting Text
................................................................................................................13
Making Formatting Accessible for the Vision-Impaired
..........................................13
Using Fonts
...............................................................................................................13
Using Color
...............................................................................................................13
Using Lists
................................................................................................................13
Applying Paragraph Styles
.......................................................................................14
Applying Text Styles
................................................................................................14
Applying Text Styles: Properties Pane
.....................................................................14
Applying Text Styles: Text Menu
.............................................................................14
Start a New Line
.......................................................................................................15
Checking Spelling
.............................................................................................................15
Additional Formatting
.......................................................................................................15
Adjusting Paragraph Alignment
...............................................................................15
Adjusting Paragraph Alignment: Menu Option
........................................................15
Adjusting Paragraph Alignment: Properties Pane
....................................................16
Applying Paragraph Indents (Blockquotes)
..............................................................16
Inserting Line Breaks
................................................................................................16
Inserting Line Breaks: Keyboard Option
..................................................................16
Inserting Line Breaks: Menu Option
........................................................................16
Applying Special Characters
.....................................................................................16
Making Characters Subscript/Superscript
.................................................................17
Making Characters Subscript/Superscript: Design View
.........................................17
Previewing Pages in Netscape and Internet Explorer
.......................................................17
Preview in Browser Options
.....................................................................................17
1
Instru
ctional Tech
nolo
g
y Cente
r


Adding a Browser to the Preview in Browser List
...................................................17
Cutting, Copying & Pasting
..............................................................................................18
Creating Lists
....................................................................................................................19
Creating a List of Items: Text Already Typed
..........................................................19
Creating a List of Items: Text to be Typed
...............................................................19
Making Lists Accessible for the Vision-Impaired
....................................................19
Indicating the Number of List Items
.........................................................................20
Numbering the List Items
.........................................................................................20
Using Bullets
.............................................................................................................20
Removing Bullets or Numbers
..................................................................................20
Using Sublists
...........................................................................................................21
Creating a Sublist: Text Already Typed
...................................................................21
Creating a Sublist: Text to be Typed
........................................................................21
Creating Hyperlinks
..........................................................................................................22
Adding Links Using the Properties Pane
..................................................................22
Adding Links Using the Hyperlink Dialog Box
.......................................................22
Creating Email Links
................................................................................................22
Creating Tables
.................................................................................................................23
To Creatie Tables
......................................................................................................23
Adding the Table ID
.................................................................................................24
Adding and Formatting Table Text
...........................................................................24
Adding Table Text
....................................................................................................24
Aligning Text within a Cell
......................................................................................25
Inserting Images
........................................................................................................25
Selecting a Table or Table Parts
...............................................................................25
Selecting a Cell
.........................................................................................................25
Selecting a Row
........................................................................................................25
Selecting a Column
...................................................................................................25
Selecting an Entire Table: Quick Menu Option
........................................................25
Selecting an Entire Table: Mouse Option
.................................................................26
Adding Rows and Columns
......................................................................................26
Deleting Rows and Columns
....................................................................................26
Using the Mouse to Adjust Table Elements
.............................................................26
Adjusting Row Height
..............................................................................................26
Adjusting Column Width
..........................................................................................27
Combining ("Merging") Cells
...................................................................................27
Splitting Cells
............................................................................................................27
Adjusting Cell Spacing and Padding
........................................................................27
Adjusting Cell Spacing
.............................................................................................28
Adjusting Cell Padding
.............................................................................................28
Adding Images
..................................................................................................................29
Inserting an Image from a File
..................................................................................29
Creating a Link to an Image on the Web
..................................................................29
Assigning Alternate Text for Images
........................................................................29
Deleting Images
........................................................................................................30
Moving Images
.........................................................................................................30
2

Macrom
edia Dre
a
m
w
ea
ve
r
MX

Moving Images: Drag-and-Drop
...............................................................................30
Moving Images: Cut and Paste
.................................................................................30
Linking with Images
.................................................................................................30
Accessing the Page Properties Dialog Box
.......................................................................32
Setting Page Colors
...................................................................................................32
Setting Page Colors: Color Box Option
....................................................................32

3
Instru
ctional Tech
nolo
g
y Cente
r


The Dreamweaver Environment
Macromedia Dreamweaver MX is a professional HTML editor for designing, coding, and
developing websites, web pages, and web applications. Whether you enjoy the control of hand-
coding HTML or prefer to work in a visual editing environment, Dreamweaver provides you with
helpful tools to enhance your web creation experience.
The visual editing features in Dreamweaver let you quickly create pages without writing a line of
code. If you prefer to code by hand, however, Dreamweaver also includes many coding-related
tools and features. And Dreamweaver helps you to build dynamic database-backed web
applications using server languages such as ASP, ASP.NET, ColdFusion Markup Language
(CFML), JSP, and PHP.
Text Properties Pane
The Text Properties pane is used to control the formatting for the text and is displayed when you
are working with text.

Elements of the Properties Pane
Section

Purpose


Specify the HTML style for text formatting (e.g., Heading 1).

Specify the fonts for the text.

Indicate the relative size for the text.

Indicate the color for the text.

Bold and/or italicize the text.

Control the alignment of the text.

Identifies the document location or the web address that the text
links to. You can identify the link by using the folder icon to
browse for a file.

Target is used to identify where the linked document will open
(default is same window).
4

Macrom
edia Dre
a
m
w
ea
ve
r
MX


Create a bulleted or numbered list for selected text.

Increase or decrease the paragraph indent for the text.

5
Instru
ctional Tech
nolo
g
y Cente
r


Image Properties Pane
The Image Properties pane is used to control the settings for images including the size and
alternate text and can be used to create an image map.
The Image Properties pane will be displayed when an image is selected.

Elements of the Properties Pane
Section

Purpose


Displays a thumbnail (miniature) of the image and indicates the
image file size. The text box is used for the name of the image
with JavaScript programming (and other web languages) to
reference the image.

Identifies the width and height of the image. This information is
automatically completed by Dreamweaver but you can override
the information by typing in the text boxes.

Identifies the location of the image. You can identify a new source
using BROWSE FOR FILE
to browse for the image.

Identifies the file or web address that the image links to. You can
identify the file or web address by using BROWSE FOR FILE
.

Identifies the alternate text for the image. The alternate text is
displayed as the web page is loading or when images are not
displayed. In addition, the alternate text is read to users that
"read" the pages with screen readers.

Opens the image in an external image editing program to
physically modify the image. The specific program opened is
based on your computer's configuration.

Restores the image size to the original size.

Converts the image into an image map, one image that has
multiple links.
6

Macrom
edia Dre
a
m
w
ea
ve
r
MX


Adds space around the image. VSpace adds vertical space
above and below the image. HSpace adds horizontal space to
the left and right of the image.

Identifies where the linked document will open (default is same
window).

Identifies an image to load initially while the actual image
appears. This can be used when high quality images are used
that have a large file size.

Adds a line around the image. The larger the number entered in
the text box, the thicker the border.

Controls the horizontal placement of the image (treats the image
like a character).

Aligns placement of image relative to the text.
NOTE: This can result in text wrapping around an image.

7
Instru
ctional Tech
nolo
g
y Cente
r


The Tables Properties Pane
To display the Table Properties pane:
1. Right click within the table, select Table » Select Table
The entire table is selected and the Table Properties pane appears.

Elements of the Table Properties Pane
Section

Purpose


Identifies the table name. Required to be completed for
accessibility and Section 508 requirements.

Indicates the number of columns and rows in the table. You
can modify the numbers to add or delete rows and columns.
WARNING: Decreasing the numbers can result in a loss of
content.

Indicates the width and height of the table in either
percentages or pixels.

Specifies the amount of cell padding and/or spacing for the
table.

Specifies the table alignment, relative to text around the
table (not the text within the table).

Specifies the size of the table border.

Adjusts table size by clearing settings or converting to
pixels or percenta
ges.

Specifies the background color for the table.

Specifies the border color for the table.

Specifies the background image for the table.
8

Macrom
edia Dre
a
m
w
ea
ve
r
MX

The Table Row Properties and Cell Properties Pane
The Table Row Properties and Table Cell Properties panes look almost identical to the Table
Properties pane (the only change is specifying row or cell or in the first section). The main
difference is the impact of the changes on the selected cells or selected rows.
Elements of the Table Row Properties and Cell Properties Pane

Section

Purpose


Combines or splits cells.

Adjusts the horizontal (right to left) alignment and the vertical (top to
bottom) alignment of the cell.

Specifies the width and height of the row or cell.

Specifies that the text in the cell should not wrap around.

Indicates a cell or group of cells as heading cells. This improves the
comprehensibility of tables for those using a screen reader.

Specifies the background image for the table.

Specifies the background color for the table.

Specifies the border color for the table.

9
Instru
ctional Tech
nolo
g
y Cente
r


The Insert Pane
This page provides an overview of the options available through the
Insert
pane. The pane
contains several tabs providing quick access to buttons for frequently used commands. The
buttons for each tab are described on individual pages.
The
Common
tab contains buttons for the most frequently used web publishing tasks.

The
Layout
tab contains buttons involved with the design modes for web publishing.

The
Text
tab contains buttons for text formatting.

The
Frames
tab contains buttons involved with creating web pages with frames.

The
Forms
tab contains buttons involved with web page forms.

The
Templates
tab contains buttons relating to templates.

The
Character
tab contains shortcuts to special symbols.

The
Media
tab contains buttons for integrating advanced web page features (e.g., Flash animation).

The
Head
tab contains buttons for adding meta tags to the Head element of your web page. Meta tags can
increase the success of your page being located via search engines.

10

Macrom
edia Dre
a
m
w
ea
ve
r
MX

The
Script
tab contains buttons for adding scripts (e.g., JavaScript) to your web pages.

The
Application
tab contains buttons relating to dynamic data applications.

The
Learning
tab is created when the
CourseBuilder
extension is installed.


Creating a New Web Page
To create a new, blank web page when Dreamweaver is running, use the following instructions.
You have two options:
Creating a New Web Page: Toolbar Option
1. From the
Standard
toolbar, click
NEW

NOTE:
If the
Standard
toolbar is not visible, from the
View
menu, select
Toolbars

»

Standard

Creating a New Web Page: Menu Option
1. From the
File
menu, select
New...

2. To create a new blank document:
a. From the
Category
list, select
Basic Page

b. From the
Basic Page
list, select
HTML

c. Click
CREATE

Adding or Modifying a Title

The title of the page is used to identify bookmarks and is used by search engines to locate pages.
It is important to have a descriptive title. If you are developing pages for a course, you may want
to include the course number and UWEC along with a description of the page (e.g., Syllabus,
English 110, UWEC).
Adding or Modifying a Title: Toolbar Option
1. From the
Document
toolbar, in the
Title
text box type the title

11
Instru
ctional Tech
nolo
g
y Cente
r


2. Press [
Enter
]
Adding or Modifying a Title: Dialog Box Option
1. From the
Modify
menu, select
Page Properties...

The
Page Properties
dialog box appears.

2. In the
Title
text box, type the page title
3. To accept the changes, click
OK

Saving a Web Page
To save a web page, you must give the page a filename. The filename is the name of the page as
it appears in your operating system. Web pages require an
.htm
or
.html
file extension. This is
essential for the web browser to identify your file as an HTML file.
1. From the
File
menu, select
Save As...

The
Save As
dialog box appears.
2. If necessary, change the location where the file will be saved
3. In the
File name
text box, type the filename
The filename must have an
.htm
or
.html
extension (e.g., mydoc.html).
4. Click
SAVE

Exiting Dreamweaver
When you are through using Dreamweaver, simply exit the program. If you have not saved
recently, you may be prompted regarding whether or not to save before closing.
12

Macrom
edia Dre
a
m
w
ea
ve
r
MX

1. From the
File
menu, select
Exit

OR

Click the
X
in the upper right corner
A prompt may appear asking if you want to save.
2. Click the desired option:
YES
,
NO,
or
CANCEL

Formatting Text
Formatting text and paragraphs in Dreamweaver is similar to formatting them in Word and this is
one most efficiently with styles.
A style is a preformatted definition of how selected text will appear on the web page. For
example, a style called Heading 1 applies a large font size, bold, and an indent to the selected
text. Dreamweaver styles are those that are supported by HTML codes. These include styles
from Heading 1 (largest) to Heading 6 (smallest), along with others for formatting lists and so on.
Most styles affect the entire paragraph rather than a portion of the paragraph. Use text formatting
for words or individual characters.
Many of the paragraph and heading style options are found in the Format pull-down list. Individual
text formatting options are listed in the Text menu or accessed by using toolbar buttons or
keyboard shortcuts.
Making Formatting Accessible for the Vision-Impaired
When applying any styles (e.g., color, font, or size), it is important to remember the usability of the
web page. A large number of people throughout the United States and the world have vision
impairments. Simple things can be done to your text in order for the vision impaired to be able to
read your web page with ease.
Using Fonts
When the designer of a web page applies font size, it will not always remain that size for the user.
Many browsers have different settings that allow the user to change the font size to his/her
comfortable reading level. If the designer uses font markups, the browser will be able to open the
page and show the text without distorting any of the margins or columns. If the designer specifies
type sizes, many browsers can only open the site using the specific fonts and sizes. This can
make it extremely difficult for a person with limited vision to read the page.
Using Color
As a web designer, it is critical to know how something so simple as color decisions can make
your web page go from colorful to unreadable. Web users who have vision impairments, such as
color blindness, struggle with web pages that are not designed correctly. For example, users with
a color deficiency are often unable to differentiate between colors of a similar hue when those
colors are of the same lightness and saturation, like the colors red and green.
Using Lists
For the vision-impaired, bulleted and numbered lists can be very hard to understand if not created
properly. For people with vision impairments, a screen reader is the way they get information off
13
Instru
ctional Tech
nolo
g
y Cente
r


of the Web. Bulleted and numbered lists created the right way can be read to the user without any
complication.
Applying Paragraph Styles
Applying paragraph styles will enhance your document. Paragraph styles are a good way to make
your page more navigable with the use of bigger font sizes and bold headings.
1. Select the text to be formatted
OR
Place the cursor within the paragraph to be formatted
HINT: Remember that styles apply to the entire paragraph.
2. In the Properties pane, from the Format pull-down list, select the appropriate
option

Applying Text Styles
Applying text styles enhances your web page by creating words or characters with a variation of
design.
Applying Text Styles: Properties Pane
1. Select the text to be formatted
2. In the Properties pane, click the appropriate button(s)

Applying Text Styles: Text Menu
The Text menu is used to adjust font style, weight (e.g., bold), and relative size, as well as to
apply effects (e.g., underlining) and font color.
1. Select the text to be formatted
14

Macrom
edia Dre
a
m
w
ea
ve
r
MX

2. From the Text menu, select the appropriate options

Start a New Line
If you want to start a new line but not have a bullet or number, insert a line break
1. After the list item, press [Shift] + [Enter]
Checking Spelling
It is easy to check the spelling in your document using Dreamweaver.
1. From the Text menu, select Check Spelling
The Check Spelling dialog box appears and displays the words that
Dreamweaver thinks are misspelled and offers suggestions for correction.
2. Complete the Check Spelling dialog box on each word not found in the dictionary
until the document is finished
3. Click OK
Additional Formatting
Adjusting Paragraph Alignment
Dreamweaver offers four alignment options for paragraphs: left, right, center, and justify.
Choosing a paragraph alignment will align selected paragraphs to the left, right, or center of the
page. The justify alignment justifies both the left and right borders of a paragraph.
Adjusting Paragraph Alignment: Menu Option
1. Place your cursor in the paragraph you want formatted
2. From the Text menu, select Align » appropriate selection (Left, Center, Right, or
Justify)
15
Instru
ctional Tech
nolo
g
y Cente
r


Adjusting Paragraph Alignment: Properties Pane
1. Place your cursor in the paragraph you are formatting
2. In the Properties pane, click the appropriate alignment button

Applying Paragraph Indents (Blockquotes)
Dreamweaver provides a standard paragraph indent approximately equal to one half inch. This
indent is also called a blockquote.
1. Place your cursor in the paragraph you are formatting
2. On the Properties pane, click TEXT INDENT

3. To further indent the paragraph, repeat step 2
NOTE: To reduce or eliminate a paragraph indent, click TEXT OUTDENT

Inserting Line Breaks
If you want to begin a new line, but not a new paragraph, you can insert a line break. Inserting a
line break will move the cursor from the line on which you are working to the very next line on the
page without leaving a blank line between the two.
Inserting Line Breaks: Keyboard Option
1. Place the cursor where you would like to insert the line break
2. Press [Shift] + [Enter]
Inserting Line Breaks: Menu Option
1. Place the cursor where you would like to insert the line break
2. From the Insert menu, select Special Characters » Line Break
Applying Special Characters
With Dreamweaver, you can insert special characters that are supported by HTML code.
Examples include the copyright symbol ©, registered symbol ®, and characters unique to other
languages (e.g., the ñ used in many Spanish words).
1. From the Insert menu, select Special Characters » appropriate selection
2. If the desired option is not listed
a. Select Other...
The Insert Other Character dialog box appears.
b. Select the desired character
c. Click OK
Depending on settings, a warning may appear.
d. Click OK
16

Macrom
edia Dre
a
m
w
ea
ve
r
MX

Making Characters Subscript/Superscript
Dreamweaver allows you to make text either subscript or superscript. One method is by going
into the
code
and inserting the appropriate HTML tags to make the text subscript or superscript. A
less intimidating method, if you are unfamiliar with HTML code, is to use the
design view
to insert
the appropriate HTML tags without having to work directly in the code.
Code View
Design View
This is regular text. <sub>This
text is in Subscript.</sub>
This is regular text.
This text is in Subscript
.
This is regular text. <sup>This
text is in Superscript.</sup>
This is regular text.
This text is in Superscript
.
Making Characters Subscript/Superscript: Design View
HINT: This method is recommended if you are unfamiliar with working with HTML code.
1. Select the text you want to make subscript or superscript
2. From the Insert menu, select Tag...
The Tag Chooser dialog box appears.
3. Select HTML Tags
4. From the list of tags on the right, select sub for subscript or sup for superscript
5. Click INSERT
The Tag Editor dialog box appears.
6. Click OK
7. In the Tag Chooser dialog box, click CLOSE
The text is now subscript or superscript.
Previewing Pages in Netscape and Internet Explorer
Preview in Browser Options
When previewing your web page in a browser, you have the choice of which browser to use. With
Dreamweaver, you do not have to save your file before previewing it in a browser.
1. Once ready to preview your file, from the File menu, select Preview in Browser
»
browser name

HINTS:

You can preview in your
primary
browser by pressing [
F12
] and in your
secondary
browser by pressing [
Ctrl
]+[
F12
].
Adding a Browser to the Preview in Browser List
Previewing in multiple browsers may help reveal formatting problems unique to different
browsers.
17
Instru
ctional Tech
nolo
g
y Cente
r


1. Once ready to preview your file, from the File menu, select Preview in Browser
»
Edit Browser List...


2. To add a browser, click
+

The
Add Browser
dialog box appears.
3. To locate the browser, click
BROWSE...

4. Use the dialog box options to locate your file
HINT:
Most programs are located on your
C:
drive in the
Program Files
folder.
You want to locate the .EXE (executable) file for the program.
5. Click
OPEN

6. In the
Defaults
section, select
Primary Browser
or
Secondary Browser

7. Click
OK

8. To prevent Dreamweaver from previewing your document using a temporary file,
deselect
Preview Using Temporary File

This allows you to preview the document directly in a browser.
9. Click
OK

Cutting, Copying & Pasting
When developing a page in Dreamweaver, you may find it necessary to cut and copy text and
images. The following document will assist you.
NOTES:
Once text or an image is cut, it no longer appears in its original location.
When text or an image is copied, it is not erased from its original location but appears
simultaneously in its new and original locations.
1. Select the text or image you wish to cut or copy
2. On the Standard toolbar, click CUT
or COPY

OR
Press [Ctrl] + [X] or [Ctrl] + [C], respectively
NOTE: If cutting text or an image, it will disappear.
3. On your page, place the cursor where you would like the text or image to appear
18

Macrom
edia Dre
a
m
w
ea
ve
r
MX

4. On the Standard toolbar, click PASTE

OR
Press [Ctrl] + [V]
The text or image appears in the new location.
NOTE: The text or image will stay on your
Clipboard
until it is replaced or until
the program is exited.
Creating Lists
When creating a list, you can either type the list and then make it bulleted/numbered or make the
bulleted/numbered items as you type.
Creating a List of Items: Text Already Typed
1. Select the items to be in the list
NOTE: Items must be separated by paragraph breaks, not line breaks.
Paragraph breaks leave a blank line between lines of text, whereas line breaks
do not.
2. From the Insert menu, select Text Objects » Unordered List or Ordered List
OR
In the Text Properties pane, click the appropriate button

NOTE: These actions act like toggle switches—selecting or clicking once turns
them on, selecting or clicking a second time turns them off.
Creating a List of Items: Text to be Typed
1. Set your insertion point where the list will begin (this must be on a blank line)
2. From the Insert menu, select Text Objects » Unordered List or Ordered List
OR
In the Text Properties pane, click the appropriate button

3. Type the first entry in the list
4. Press [Enter]
5. Type the next entry
6. Repeat steps 4 and 5 until the list is complete
7. Press [Enter] twice to create a blank line
Making Lists Accessible for the Vision-Impaired
For people with vision impairments, trying to get clear information from a list can be difficult. A
screen reader is essential for the vision-impaired to receive information on a website. Numbered
or bulleted lists not created correctly can be confusing and difficult to understand when read by
the screen reader. There are some things you can do as a web developer to help ensure that
your site can be used by all types of users.
19
Instru
ctional Tech
nolo
g
y Cente
r


Indicating the Number of List Items
Before making the list, indicate how many list items are going to appear. This will help the visually
impaired know how many items there are going to be. Making sure you introduce your list with an
explanation will help clarify the information and orient the impaired user.
Numbering the List Items
The best way to make lists clear is to number the items. When a number is placed before each
list item, the screen reader will read that number first before going on to the actual item. The user
will then know exactly what item he/she is listening to.
Example:
1. Item one
2. Item two
3. Item three
Using Bullets
Bullets should rarely be used. When list items have bullets placed before them, the screen reader
will ignore them and only incorporate a short pause between each list item. The user is able to
distinguish the pause but may get confused between a pause used before list items and a pause
used before sentences. If you must use bullets, try to use a lower case "o" in place of the bullet.
The screen reader will then read them as the letter "o" and not a pause. This will help get rid of
confusion.
Example:
o Item one
o Item two
o Item three
You could also insert a blank line between each list item, or place a period at the end of each
item.
Removing Bullets or Numbers
Sometimes, bullets or numbers are more distracting than simple lines of text would be. To
remove a bullet or number, follow these instructions.
1. To remove bullets or numbers from a single item in the list, place the cursor
within that item
To remove bullets or numbers from an entire list, select the entire list
2. From the Insert menu, select Text Objects » Unordered List or Ordered List
OR
In the Text Properties pane, click the appropriate button

NOTES:
These actions act like toggle switches—selecting or clicking once turns them on,
selecting or clicking a second time turns them off.
20

Macrom
edia Dre
a
m
w
ea
ve
r
MX

If you remove a bullet or number from an item in the middle of a list, you will
create two separate lists: one before and one after the item.
Using Sublists
Sublists show logical connections between the items of the sublist and the main list. The example
below involves a numbered list; however, bulleted lists can have sublists as well. By placing
Tutoring Needs and Job Placement Needs in a sublist below Student Needs, the author of the list
shows these items to be especially applicable to students. See the following example:
1. Student Needs
1. Tutoring Needs
2. Job Placement Needs
2. Faculty/Staff Needs
3. Community Needs
Creating a Sublist: Text Already Typed
1. Select the list item(s) to be made into a sublist
2. In the Text Properties pane, click TEXT INDENT

The sublist numbers or bullets will appear.

Creating a Sublist: Text to be Typed
These directions assume that you are typing a list and want to create a sublist.
1. If the cursor is not on a blank line, press [Enter]
2. In the Text Properties pane, click TEXT INDENT

The sublist number or bullet will appear.
NOTE: If you would like the sublist to have a different number style (e.g., a., b.,
c.), see
Changing the List Item Style
within Bulleted and Numbered List Options.
3. Type the next entry in the sublist
4. Press [Enter]
5. Repeat steps 3 and 4 until the sublist is complete
6. Press [Enter]
The cursor should be on a blank bulleted line.
7. To return to the main list, in the Text Properties pane, click TEXT OUTDENT

8. Continue typing the main list
21
Instru
ctional Tech
nolo
g
y Cente
r


Creating Hyperlinks
Adding Links Using the Properties Pane
When a link is added the URL should look similar to http://www.uwec.edu. If you see: file:///, the
link will not work for your users.
1. Select the text that you want to become the link
2. In the
Properties
pane, in the
Link
text box, type the
URL

NOTE:
Be sure to include
http://

in the URL.
3. Press [
Enter
]
Adding Links Using the Hyperlink Dialog Box
When a link is added the URL should look similar to http://www.uwec.edu. If you see: file:///, the
link will not work for your users.
NOTE:
Use this method only when linking text or images that have not yet been created.
1. From the
Insert
menu, select
Hyperlink

OR

In the
Insert
pane, from the
Common
tab, click
HYPERLINK

The
Hyperlink
dialog box appears.

2. In the
Text
text box, type the text that will become the link
3. In the
Link
text box, type the
URL

NOTE:
Be sure to include
http://

in the URL.


4. Click
OK

Creating Email Links
You can also add a link that allows Web users to send email to a specific address. Web users
viewing your web page with a browser that supports this ability can click a Mailto link to open a
blank pre-addressed email form. Additionally, you can
specify a subject line
for email received
from these links.
22

Macrom
edia Dre
a
m
w
ea
ve
r
MX

1. Place your cursor in the document where the link should appear
OR
Select the text that will become the email link
NOTE: This is often the person's name or email address.
2. From the Insert menu, select Email Link
OR
From the Insert pane, on the Common tab, click EMAIL LINK

The Email Link dialog box appears.

3. In the Text text box, type the text that should be linked
If you selected text, it appears here.
4. In the E-Mail text box, type the complete email address
EXAMPLE: username@uwec.edu
5. Click OK
Creating Tables
Tables are useful tools for arranging text, links, and images in a readable format. Tables are
composed of horizontal rows and vertical columns. When creating tables, you have the option of
using the Insert menu or INSERT TABLE from either the Common or Tables tab.
To Creatie Tables
1. Place your insertion point where the table should appear
2. From the Insert menu, select Table
OR
From the Insert toolbar, in the Common or Tables tab, click INSERT TABLE

The Insert Table dialog box appears.

3. In the Rows text box, type the desired number of rows
4. In the Columns text box, type the desired number of columns
23
Instru
ctional Tech
nolo
g
y Cente
r


5. OPTIONAL: To adjust the cell padding and cell spacing, in the Cell Padding and
Cell Spacing text boxes, type the desired numbers
NOTE: Cell spacing is the space between adjacent cells. Cell padding is the
amount of blank space surrounding text or images in a cell. Adjusting either of
these options affects the entire table.
6. OPTIONAL: To alter the width of the table,
a. In the Width text box, type the desired numbers
b. From the pull-down list to the right of the Width text box, select Percent
or Pixels
NOTES:
The Percent option controls the percent of the screen the table will take
up. Your control over the size is relative because the table will adjust to
fit the size of the user's browser.
With the Pixels option, however, you are allowed more control over the
exact size of the table because it is an absolute measurement.
7. OPTIONAL: To add a border around the cells of the table, in the Border text box,
type a number
HINT: For no border, type 0 (zero).
8. Click OK
A blank table appears.
Adding the Table ID
For widest accessibility, it is recommended that you add a table ID. The table ID is similar to
alternate text of an image, identifying the object to devices that read browser screens.
1. Select the entire table
2. In the Properties pane, in the Table Id text box, type the appropriate text to
identify your table

3. Press [Enter]
Adding and Formatting Table Text
Now that you have created a table, you can add text by typing in the cells. Once the text has
been added, you can format it as you do other text in your document. You can also insert images
and use colored text in a table.
Adding Table Text
1. With the insertion point in the desired cell, type the text
HINT: To move between table cells, press [Tab]
2. Repeat as necessary
24

Macrom
edia Dre
a
m
w
ea
ve
r
MX

Aligning Text within a Cell
You can align text horizontally or vertically within a cell. The horizontal alignment options are left,
right, center, and default, which is the alignment of the text when the cell was created. The
vertical alignment options are default, top, bottom, middle, and baseline, which aligns all the text
in the row along the imaginary line created by the bottoms of the letters.
1. Place the insertion point in the desired cell
2. To adjust the horizontal alignment, in the Properties pane, click the appropriate
text alignment button

OR
From the Horz pull-down list, select the desired option
3. To adjust the vertical alignment, from the Vert pull-down list, select the desired
option
Inserting Images
Images are inserted into tables just as they are inserted anywhere else in your web page.
Selecting a Table or Table Parts
A table or parts of a table can be selected so that you can edit or delete the table or certain cells,
rows, or columns within a table.
Selecting a Cell
1. [Ctrl] + click in the desired cell
Selecting a Row
1. Move the insertion point to the left of the row
A dark arrow appears.
2. Click the mouse
3. OPTIONAL: To select multiple rows, drag the arrow past the rows you wish to
select
Selecting a Column
1. Move the insertion point to the top of the column
A dark arrow appears.
2. Click the mouse
3. OPTIONAL: To select multiple columns, drag the arrow past the columns you
wish to select
Selecting an Entire Table: Quick Menu Option
1. Right click within the table » select Table » Select Table
25
Instru
ctional Tech
nolo
g
y Cente
r


Selecting an Entire Table: Mouse Option
1. Place the pointer over any border of the table
The pointer becomes a 2 headed arrow with two vertical or horizontal lines
(depending on which border you have your insertion point over) between the
arrows.
2. Click the border
The entire table is selected.
Adding Rows and Columns
You may add a row or column to a table you have already created. This can be accomplished
through the Modify menu; however, pressing [Tab] in the last cell of the table will also add a new
row.
1. Place the insertion point in a cell adjacent to the row/column to be inserted
2. From the Modify menu, select Table » Insert Row or Insert Column
If you insert a row, it will appear above the selected row; if you insert a column, it
will appear to the left of the selected column.
Deleting Rows and Columns
When you delete a row or column, all cells (and their contents) in the group are deleted.
1. Place the insertion point within the row or column to be deleted
2. From the Modify menu, select the Table » Delete Row or Delete Column
Using the Mouse to Adjust Table Elements
WARNING: If you use the mouse to adjust row height or column width, Dreamweaver assigns a
fixed pixel height/width to the cells, which can ultimately affect the table height and width.
If table width becomes fixed at greater than 600 pixels, it may cause the following:
• On some monitors, users may have to scroll horizontally to view all of your
information.
• Table content may be cut off when printing.
• Fixed column width for one or more columns may force awkward spacing that is
not intended in other columns.
Fixed row height may cause awkward or uneven spacing between rows. It is better to set and
maintain a relative height and width by adjusting rows and columns using the Table Properties
Pane.
Adjusting Row Height
You can adjust row height either by clicking and dragging the border or by typing a value in the
Table Properties pane. Typing the row height rather than dragging the border is recommended to
ensure uniform formatting throughout browsers.
26

Macrom
edia Dre
a
m
w
ea
ve
r
MX

1. Point to the left of the row you wish to adjust
Your pointer turns into a black arrow.
2. Click to select the row
3. In the Table Properties pane, in the H text box, type the desired row height
4. Press [Enter]
The row is adjusted to the specified height.
Adjusting Column Width
You can adjust column width either by clicking and dragging or by typing a value in the Table
Properties pane. Typing the column width is recommended to ensure an exact value.
1. Point above the column you wish to adjust
Your pointer turns into a black arrow.
2. Click to select the column
3. In the Table Properties pane, in the W text box, type the desired column width
4. Press [Enter]
The column is adjusted to the specified width.
Combining ("Merging") Cells
1. Select the cells to be combined
2. From the Modify menu, select Table » Merge Cells
OR
In the Table Properties pane, click MERGE CELLS

Splitting Cells
1. Select the cell(s) to be split
2. From the Modify menu, select Table » Split Cell...
OR
In the Table Properties pane, click SPLIT CELL

The Split Cell dialog box appears.
3. From Split Cell Into, select Rows or Columns
4. In the Number of Rows or Number of Columns text box, type the desired number
5. Click OK
Adjusting Cell Spacing and Padding
Cell spacing is the space between adjacent cells. Cell padding is the amount of blank space
surrounding text or images in a cell. Adjusting either of these options affects the entire table.
27
Instru
ctional Tech
nolo
g
y Cente
r


The following graphics are examples of tables that use cell spacing and cell padding:
Table with Cell
spacing of 10
Cell 1
Cell 2
Cell 3
Cell 4



Table with Cell
Padding of 10
Cell 1
Cell 2
Cell 3
Cell 4

Adjusting Cell Spacing
1. Place the insertion point in the table
2. From the Modify menu, select Table » Select Table
OR
Right click the cell » select Table » Select Table
The Table Properties pane appears.

3. In the CellSpace text box, type the desired number
4. Press [Enter]
Adjusting Cell Padding
1. Place the insertion point in the table
2. From the Modify menu, select Table » Select Table
OR
Right click the cell » select Table » Select Table
The Table Properties pane appears.
3. In the CellPad text box, type the desired number
4. Press [Enter]

28

Macrom
edia Dre
a
m
w
ea
ve
r
MX

Adding Images
Inserting an Image from a File
If the image is already part of your website collection, you can insert the image as a file. If you
have the image saved electronically but it is not saved with your website, copy or move the image
into the collection before completing the following steps.
1. Set your insertion point where you want the image to appear
2. From the Insert menu, select Image
OR
From the Insert pane, in the Common tab, click IMAGE

The Select Image Source dialog box appears.
3. Using the Look in pull-down list, locate and select the image to insert
4. Click OK
The image appears in the document.
5. Continue with
Assigning Alternate Text for Images

Creating a Link to an Image on the Web
In most cases it is not advisable to create a link to an image on the web. Most sites will require
you to save a copy of the image in your collection. Not only does this give you more control of the
image (you do not have to worry about the image being renamed, moved, deleted, or physically
changed in appearance), it will decrease the load time of your page. However, in some cases it is
appropriate to link to the image. Either the site will require it or it is a core graphic for the website
1. Set your insertion point where you want the image to appear
2. From the Insert menu, select Image
OR
From the Insert pane, in the Common tab, click IMAGE

The Select Image Source dialog box will appear.
3. In the URL text box, type the complete URL of the image
HINT: To ensure the image is displayed properly within Dreamweaver, use an
absolute URL.
NOTE: If the URL is relative, the image will appear broken in Dreamweaver. If
you set the height and width attributes of the image, this shouldn't present a
problem. However, if they are not set, the image may appear in Dreamweaver
smaller than its actual size, which may distort your page layout.
4. Click OK
NOTE: Since the image is not a part of your collection, it may not display
properly in Dreamweaver. You can test your page using Netscape or Internet
Explorer to verify that the image is appearing correctly.
5. Continue with
Assigning Alternate Text for Images

Assigning Alternate Text for Images
Alternate text for images is what appears when the image is not loaded (generally due to
customized browser settings but also for text-based browsers). Image alternate text is also
essential for the sight-impaired. Instead of "seeing" the screen, it is read to them.
1. Select the image by clicking it
29
Instru
ctional Tech
nolo
g
y Cente
r


2. From the Properties pane, in the Alt text box, type the appropriate alternate text

3. Press [Enter]
Deleting Images
If you no longer want an image to appear on your page, you can remove it by following these
steps:
1. Select the image by clicking it
2. Press [Delete]
Moving Images
Image placement may need to be adjusted for a variety of reasons: the content has been
rearranged, flow of the images is no longer appropriate, etc. If the image is moving a short
distance, you can use the drag-and-drop method. If it is moving a large distance down the page
or to another web page, you will need to use the cut and paste method.
Moving Images: Drag-and-Drop
1. Select the image by clicking it
2. Click and hold the mouse within the graphic
3. Drag to the new location
4. Release the mouse button
Moving Images: Cut and Paste
1. Select the image by clicking it
2. From the Edit menu, select Cut
OR
Press [Ctrl] + X
3. Place the insertion point where you want the image to appear
4. From the Edit menu, select Paste
OR
Press [Ctrl] + V
Linking with Images
You can create a hyperlink for images just as you did for text. You can also establish a link for the
image using the Image Properties dialog box.
1. Select the image by clicking it
2. From the Properties pane, in the Link text box, type the complete URL of the
page you wish to link to
30

Macrom
edia Dre
a
m
w
ea
ve
r
MX

3. Press [Enter]
31
Instru
ctional Tech
nolo
g
y Cente
r


Accessing the Page Properties Dialog Box
The Page Properties dialog box allows you to adjust page elements such as the title, background
image, colors, and margins.

1. From the Modify menu, select Page Properties...
The Page Properties dialog box appears.

Setting Page Colors
Page colors include background color, text color, link color, visited link color, and active link color.
Setting these colors can be done using the same steps.
Setting Page Colors: Color Box Option
The color box option gives you a color palette where you can select colors from.
1.
Access the Page Properties dialog box

2. Click the Background color box

A color palette appears.
3. Select the desired color
4. Repeat steps 2-3 to set the colors for your text and hyperlinks by using the Text,
Links, Visited Links, and Active Links color boxes.
32

Macrom
edia Dre
a
m
w
ea
ve
r
MX

5. To test the results, click APPLY
To cancel the changes, click CANCEL
To accept the changes, click OK
NOTE: Remember to test the compatibility of the color of your background with
the color of your text and hyperlinks. Though the colors individually may look
great, when you place them all together on one page you may find some colors
more difficult to read than others.
33