Sunteți pe pagina 1din 33

Dreamweaver: Introduction

Academic Computing Services

www.ku.edu/acs

Abstract: Learn how to create basic content for publishing to the World
Wide Web using Dreamweaver’s easy to use graphical user
interface. Add text, images and files to your web pages quickly
and easily and then format the layout to your personal
preference. You can also use Dreamweaver to copy your pages
to the proper location for public distribution of your content via
the internet.

Contents
Introduction ......................................................................................................................................4

Objectives.........................................................................................................................................4

Prerequisites .....................................................................................................................................4

Related Training Available from ACS .............................................................................................4

Definitions........................................................................................................................................5

Anatomy of a Web Page...................................................................................................................5

Dreamweaver Work Area.................................................................................................................5

Document Window..................................................................................................................5

Menu bar..................................................................................................................................6

Status bar .................................................................................................................................6

HTML tags ..............................................................................................................................7

Window size ............................................................................................................................7

File size/upload time................................................................................................................7

Mini-launcher ..........................................................................................................................7

© 2000 University of Kansas. All rights reserved


ACS Computer Training
Dreamweaver Introduction

Palettes.....................................................................................................................................7

Creating a Web page with Dreamweaver ................................................................................8

Headings ..................................................................................................................................9

Paragraphs and line breaks ........................................................................................................10

Create a paragraph .................................................................................................................10

Remove a paragraph designation...........................................................................................10

Insert a line break ..................................................................................................................11

Horizontal Rule......................................................................................................................11

Lists .......................................................................................................................................11

Ordered (numbered) lists .......................................................................................................11

Unordered (bulleted) lists ......................................................................................................13

Definition lists .......................................................................................................................14

Nesting lists ...........................................................................................................................15

Take Control Of Layout With Tables.............................................................................................16

Introduction ...........................................................................................................................16

Inserting a table .....................................................................................................................17

Editing a table........................................................................................................................17

Selecting a table.....................................................................................................................18

Re-sizing a table ....................................................................................................................18

Re-sizing rows or columns ....................................................................................................18

Selecting rows or columns.....................................................................................................19

Adding rows or columns........................................................................................................19

Merging and splitting cells ....................................................................................................19

Working With Images ....................................................................................................................20

Academic Computing Services -2- © 2001 The University of Kansas.


ACS Computer Training
Dreamweaver Introduction

Get Connected - Hyperlinks ...........................................................................................................22

Publishing a Web page with Dreamweaver....................................................................................29

Introduction to URLs ................................................................................................................32

Additional sites and resources........................................................................................................32

ACS training schedule: www.ukans.edu/acs/training ....................................................................33

Getting Additional Help .................................................................................................................33

Academic Computing Services -3- © 2001 The University of Kansas.


ACS Computer Training
Dreamweaver Introduction

Introduction
Dreamweaver includes powerful tools to create and modify Web pages as well as
organize them into a professional-quality Web site. Dreamweaver’s Windows or Mac
OS based development environment, relieves you of the burden of creating Web content
using HyperText Markup Language (HTML) source code.

Note: Although it is not necessary to know HTML code to use


Dreamweaver, you can take full advantage of the program’s
capabilities with a good working knowledge of the HTML document
structure and layout syntax. Academic Computing Services offers a
series of classes for learning HTML.

Objectives
Create, format and publish a document ready for the World Wide Web. After today’s
workshop, participants will be able to:

• Basic understanding of developing content for the World Wide Web


• Navigate the Dreamweaver’s development environment.
• Insert and format text, including creating lists
• Control the layout of your document using Tables
• Incorporate graphical images into Web documents
• Use links to other pages or documents
• Upload your completed documents to a server on the Web

Prerequisites
It is assumed that the participants in this workshop know how to use the mouse and the
Mac OS or Windows operating system to maintain files, folders, and subfolders.

Related Training Available from ACS


Check the current issue of ACSess or the ACS online training schedule
(http://www.ukans.edu/cgiwrap/acs/training/schedule.cgi) for a list of class offerings and
their availability.

Academic Computing Services -4- © 2001 The University of Kansas.


ACS Computer Training
Dreamweaver Introduction

Definitions
Term Definition
Server The computer that sends your browser the web page content is called the
server, and it has special software (Web server software) giving it the
ability to listen and respond to such requests

WYSISYG WYSIWYG stands for "What You See Is What You Get." The content you add
to your Web pages in Dreamweaver will appear very similarly as when those
pages are being viewed by a Web browser such as Netscape Navigator or
Internet Explorer.
FTP File Transfer Protocol
HTML HyperText Markup Language. The source code of a document on the
World Wide Web.

Anatomy of a Web Page


Most often Web pages are created in a desktop environment using a text editor or Web
authoring tool. The document content is encoded with HTML. HTML identifies the
structural elements present on a page, such as paragraphs, lists, heading, and tables. The
encoded document is saved as a plain text (ASCII or DOS-text) file format. Generally
speaking, the file name must end in .html or .htm, although there are exceptions (such as
.shtml, .cgi, and .asp). Once ready to be made available on the Web, the pages are
published (uploaded) to a Web server. The pages must be stored on a Web server in order
to be viewable by others.

Dreamweaver Work Area


The Dreamweaver work area is flexible, to accommodate different working styles and
levels of expertise. It has many components, some of which you will use constantly. The
work area has two main components, the Document Window, and the Palettes.

Document Window

The document window displays the current document as you create and edit it. It consists of
the menu bar (at the top) and the status bar (at the bottom).

Academic Computing Services -5- © 2001 The University of Kansas.


ACS Computer Training
Dreamweaver Introduction

Path & File Name

HTML Tag Mini Launcher


File Size &
Window Size (Pixels) Download Time

Menu bar

The features available in Dreamweaver are all accessed via drop-down menus from the
Menu bar. You will learn more about the Menu bar as the features are introduced. In
addition to the Menu bar, most Dreamweaver features can be accessed via the palettes
that can also be a part of the Dreamweaver work area.

Status bar

The status bar provides current information about the status of your document.

Academic Computing Services -6- © 2001 The University of Kansas.


ACS Computer Training
Dreamweaver Introduction

HTML tags

The HTML tags currently in use (on whatever text or object you currently have selected)
display along the left end of the status bar. You can edit the HTML of your Web page
directly at any time by choosing HTML Source from the Window menu.

Window size

The "window size in pixels" lets you know the window size you are currently using and
thus, how much of the content visitors to your site would see if they used a
monitor/browser with similar dimensions. This is useful if you want to design your
page/site with a certain window size in mind. More information about changing these
dimensions is included in Setting Dreamweaver preferences.

File size/upload time

This displays the current size of your page (including images) and the estimated time it
will take to load your page. The load time is initially based on the Dreamweaver default
setting that assumes that a visitor to your site is using a 28.8Kbps modem. Information
about changing this default setting is included in Setting Dreamweaver preferences.

Mini-launcher

See Launcher under Palettes.

Palettes

When Dreamweaver is launched, a blank Document Window appears along with one or
more of the Toolbars and Palettes discussed below. To the beginner, the work area can
seem very "busy" and confusing. While these items offer welcome shortcuts to the
seasoned Dreamweaver user, most are not essential for mastering the basics. If you
choose to remove some of them from the work area (as suggested below), Dreamweaver
retains those choices when you exit the program and presents them to you the next time
you open it. In addition, you can return any toolbar or palette to the work area at any time
by opening it from the Window menu.

Launcher Contains buttons for opening and closing your most frequently used
toolbars and palettes:

Only the Site and HTML Source buttons are discussed in this document. As its
name implies, the HTML Source button opens a new window, revealing the
HTML source code created by Dreamweaver "behind the scenes."

Academic Computing Services -7- © 2001 The University of Kansas.


ACS Computer Training
Dreamweaver Introduction

Objects palette Contains buttons for inserting various types of objects,


such as images, tables, and scripts. By default, the Objects
palette displays the Common objects (those you are most
likely to use). Several other groups of buttons are also
available as shown below. Access the pop-up menu shown
by clicking on the .

Describing each of the buttons on the Objects palette is


beyond the scope of this document. All of the options
presented on the Objects palette are also available from the
Menu bar.

Property Inspector The Property inspector displays properties for the selected object or text, and allows you
to modify those properties. The contents of the Property Inspector palette change
depending on what type of item you have selected for modification.

Shown below are the ways the Property Inspector looks for modifying text and images.
This version of the Property Inspector is for modifying the properties of text on the
page:

This Property Inspector allows you to modify the properties of an image:

If these items do not open when you launch Dreamweaver, they can be opened by name
from the Window menu of your Dreamweaver document.

Creating a Web page with Dreamweaver

Every item on your Web page is some type of structural element, such as a paragraph, a
list, or a table. Use Dreamweaver to identify those elements. The following explanations
assume that the Property Inspector is displayed on your work area.

Academic Computing Services -8- © 2001 The University of Kansas.


ACS Computer Training
Dreamweaver Introduction

Headings

Web documents can have up to six levels of headings. Level one indicates the most
important heading while level six designates the lowest level heading. Heading levels
should be used in hierarchical order. That is, a document should have only one most
prominent heading (level 1) and it should be the first heading designation on a page. It is
not necessary for a page to have any headings. However, if headings are designated, the
first heading is level one. The words Web Authoring: Dreamweaver at the top of this
document is the level one heading. After designating the most level one heading, a page
can have multiple headings in all other levels, as long as they are designated in
hierarchical order. For example a page may have two level 2 headings and each of these
may have 2 level 3 headings below it. The headings on this page are an example of
multiple heading levels used hierarchically.

Add a heading

To mark text as a heading, select the text and choose the desired heading level from the
Format field (click on the to reveal the pop-up menu) in the Property Inspector as
shown below:

Note that the HTML Tag Inspector (in the Status Bar) now looks something like this:
. Dreamweaver inserts these HTML tags in the document: <h1> at the
beginning and </h1> at the end of the text designated as a level 1 heading.

Change a heading level

To change a heading level, select the heading and choose the desired heading level from
the Format field (click on the to reveal the pop-up menu) in the Property Inspector.

Remove a heading

The heading designation can be removed in several ways:

Place your cursor at the beginning of the heading (before the first character on the first
line) and type Backspace.

Place the cursor anywhere in the heading and choose None from the Format field in the
Property Inspector.

Academic Computing Services -9- © 2001 The University of Kansas.


ACS Computer Training
Dreamweaver Introduction

Right-click on the in the HTML Tag Inspector and choose Remove Tag (with left
mouse button) as shown below:

Paragraphs and line breaks

A paragraph can be as little as one word, or even one character, or as much as a page full
of text. Designating a given piece of text as a paragraph has the effect of setting that text
apart from surrounding items on the page by inserting one blank line between the
paragraph and the element below it.

Create a paragraph

To mark text as a paragraph, select the text and choose Paragraph from the Format field
(click on the to reveal the pop-up menu) in the Property Inspector as shown below:

Note that the HTML Tag Inspector now looks something like this: .
Dreamweaver inserts these HTML tags in the document: <p> at the beginning and </p>
at the end of the text designated as a paragraph.

Remove a paragraph designation

The paragraph designation can be removed in several ways:

• Place your cursor at the beginning of the paragraph (before the first character on
the first line) and type Backspace.
• Place the cursor anywhere in the paragraph and choose None from the Format
field in the Property Inspector.
• Right-click on the in the HTML Tag Inspector and choose Remove Tag (with
left mouse button) as shown below:

Academic Computing Services - 10 - © 2001 The University of Kansas.


ACS Computer Training
Dreamweaver Introduction

Insert a line break

A line break causes the browser to display all text that follows the line break designation
on the next line. A line break is sometimes referred to as a carriage return or line feed.
Place your cursor at the location at which you want the line break. Insert a line break
using one of these methods:

• Type Shift + Enter.


• Chose Line Break from the Insert menu on the Menu Bar.

Dreamweaver inserts a <br> HTML tag at the point at which you designated a line break.

Horizontal Rule

A horizontal rule is simply a horizontal line across the page. Determining how wide the
line is, or its width or color is handled with Cascading Style Sheets (not covered in this
document). Place your cursor at the location at which you want the horizontal rule.
Choose Horizontal Rule from the Insert menu on the Menu Bar.

Dreamweaver inserts an <hr> HTML tag at the point at which you designated a
horizontal rule.

Lists

HTML, and therefore Dreamweaver, allows for three types of lists: ordered (sequenced or
numbered), unordered (bulleted), and definition. In addition, these list types can be nested
to create lists within lists (sublists). Lists come under the category of block-level
elements. Among other things, block-level elements generally are set off from items
before and after it on the page by a blank line.

Creating lists with a Web authoring tool such as Dreamweaver can be tricky. Knowing a
little HTML can be very helpful at this point. To create any type of list, it is important
that each of the items on the list be designated as a paragraph first, before applying the
list formatting. Do not separate list items from one another using a line break. This will
not achieve the desired effect when list formatting is applied.

Designating the sequencing method for ordered lists (numeric, alphabetic, etc.) and
determining the bullet type (circle, square, etc.) is done with Cascading Style Sheets

Ordered (numbered) lists

Use an ordered list when the sequence in which the items are presented is important to
the comprehension of the content.

To create an ordered list:

Academic Computing Services - 11 - © 2001 The University of Kansas.


ACS Computer Training
Dreamweaver Introduction

Arrange the items in your list as sequential paragraphs as shown below:

Item one
Item two
Item three

Select all of the the items in the list and do one of the following:

• Click the numbered list button on the Property Inspector as shown:

Choose Ordered list from the List sub-menu under Text on the Menu Bar as shown:

This produces a list that looks something like:

1. Item one
2. Item two
3. Item three

Note that the HTML Tag Inspector now looks something like this: .
Dreamweaver inserts these HTML tags in the document: <ol> at the beginning and </ol>
at the end of the text designated as a list, and <li> at the beginning and </li> at the end of
each item in the list.

Academic Computing Services - 12 - © 2001 The University of Kansas.


ACS Computer Training
Dreamweaver Introduction

Unordered (bulleted) lists

Use an unordered list when the sequence in which the items are presented is not
important to the comprehension of the content.

To create an unordered list:

Arrange the items in your list as sequential paragraphs as shown below:

• Red
• Purple
• Yellow

Select all of the the items in the list and do one of the following:

Click the bulleted list button on the Property Inspector as shown:

Choose Unordered list from the List sub-menu under Text on the Menu Bar as shown

This produces a list that looks something like:

• Red
• Purple
• Yellow

Note that the HTML Tag Inspector now looks something like this: .
Dreamweaver inserts these HTML tags in the document: <ul> at the beginning and
</UL> at the end of the text designated as a list, and <li> at the beginning and </li> at
the end of each list item.

Academic Computing Services - 13 - © 2001 The University of Kansas.


ACS Computer Training
Dreamweaver Introduction

Definition lists

Use a definition list to list and define terms. A definition list consists of alternating
"terms" and "definitions." Most browsers render a definition list with the "terms" left
aligned and the "definitions" indented on a new line following the term.

To create an unordered list:

Arrange the items in your list as a series of paragraphs as shown below:

Term One
Definition of Term One

Term Two
Definition of Term Two

Select all of the the items in the list and choose Definition list from the List sub-menu
under Text on the Menu Bar as shown:

This produces a list that looks something like:

Term One
Definition of Term One

Term Two
Definition of Term Two

Note that the HTML Tag Inspector now looks something like this: or
. Dreamweaver inserts these HTML tags in the document: <dl> at the
beginning and </dl> at the end of the text designated as a list, and <dt> at the beginning
and </DT> at the end of each term in the list and <dd> at the beginning and </DD> at the
end of every definition in the list. Every term should have a description and every
description should have a term.

Academic Computing Services - 14 - © 2001 The University of Kansas.


ACS Computer Training
Dreamweaver Introduction

Nesting lists

Any type of list can have a list as a list item. That is, a list can consist of sub-lists (also
called nested lists) such as in this example:

• Colors
• Red
• Blue
• Green
• Shapes
• Circle
• Square
• Triangle
• Numbers
• One
• Two
• Three

To create a nested list:

1. Create a standard list as described in Ordered lists, Unordered lists, or Definition lists
above. For example,

Colors
Shapes
Numbers

2. Add the sub-items below the main items. For example,

Colors
Red
Green
Shapes
Numbers

3. Demote the sub-items (make them sub-lists) as follows:

Select the sub-items (in this case Red and Green) as shown:

Click the Text Indent button on the Property Inspector as shown:

Academic Computing Services - 15 - © 2001 The University of Kansas.


ACS Computer Training
Dreamweaver Introduction

Repeat steps 1 and 2 for all sub-items.

Note that the HTML Tag Inspector (on the status bar) now looks something like
this: representing a list within a list. This will vary depending on the list
types you are combining.

Take Control Of Layout With Tables


Introduction

Tables consist of one or more rows and columns. The rows and columns together create
cells into which you can put text, images, or even other tables! Tables on Web pages
should be used to represent tabular data. Further, to increase the likelihood that the
information in a table is comprehensible using a variety of browsers, including speech-
browsers, the data should be organized linearly. That is, it should make sense when read
from left to right. Consider the following examples:

Event Tuesday Wednesday


Breakfast 8:00 a.m. 8:30 a.m.
Session
9:00 a.m. 10:00 a.m.
One

Because the table will be read from left to right in linear fashion, in order to find out the
schedule for Tuesday, a listener to this page would have to listen to "Event, Tuesday,
Wednesday, Breakfast, 8:00 a.m., 8:30 a.m., Session One, 9:00 a.m., 10:00 a.m."

Day Breakfast Session One


Tuesday 8:00 a.m. 9:00 a.m.
Wednesday 8:30 a.m. 10:00 a.m.

By contrast, this table lists the events of the day (Breakfast followed by Session One) first
and then the name of the day (Tuesday) and the times for the events in order (8:00 a.m.
followed by 9:00 a.m.). For additional information about improving the accessibility of
tables and of Web sites in general, please attend Web Authoring: Improving Accessibility
offered as a regular part of the ACS training series.

Academic Computing Services - 16 - © 2001 The University of Kansas.


ACS Computer Training
Dreamweaver Introduction

Inserting a table

To insert a table, select Table from the Insert menu on the Menu bar. The Insert Table
dialog box shown below appears.

Change the number of rows and columns to reflect what you need for your table. You can
add and delete rows and columns after the table is created, if necessary. The Width field
refers to the percentage of the available space in the window that you want the table to
occupy. This too can be changed after the table is created. The illustration below explains
which parts of the table layout are affected by the Border, Cell Padding and Cell Spacing
fields. All of these fields can be left blank or set to a 0 value.

Border

Cell Spacing

Cell Paddi

Editing a table

Many table properties can be changed from the Property Inspector, once the table is
selected. For example, all of the original choices (rows, columns, width, border, cell
padding, and cell spacing) made in the Insert Table dialog box can be altered using the

Academic Computing Services - 17 - © 2001 The University of Kansas.


ACS Computer Training
Dreamweaver Introduction

Property Inspector. However,other alterations such as table height, width of cells, and
height of rows cannot be made via this method. See below for details.

Selecting a table

In order to edit a table, the entire table or some portion of it (one or more cells, one or
more rows, or one or more columns) must be selected, just as text must be selected prior
to changing its properties. To select the entire table, hold the Shift key and click
anywhere on the table. When the entire table is selected, a dark line will appear around
the table.

Re-sizing a table

A table can be re-sized horizontally, vertically, or both. Select the table as described
above.

Place the cursor over one of the handlebars until the cursor image changes to a double-
headed arrow. Click and hold the left mouse button. Drag the mouse in the direction for
which you want to change the table size (left/right for changing the width of the table,
up/down for changing the height of the table). Release the mouse button when the table
reaches the desired size.

Re-sizing rows or columns

Place the cursor over the dividing line between the rows or columns whose size you want
to alter. The cursor changes as show in the image below. Click and hold the left mouse
button. Drag the mouse in the direction for which you want to change the row or column
size. Release the mouse when the row or column is the desired size.

Academic Computing Services - 18 - © 2001 The University of Kansas.


ACS Computer Training
Dreamweaver Introduction

Selecting rows or columns

Select a column or row by placing your mouse just above (for columns) or just to the left
of (for rows) the table at the column/row you want to select. The cursor changes to a
black, solid arrow. Click the left mouse button once (and release) to select the row or
column. The example below shows a selected column.

Adding rows or columns

1. Select the column to the right of (or the row below) the one you want inserted.
(See instructions for selecting rows or columns above.)
2. From the Modify menu on the Menu bar, choose Table > Insert Row or Insert
Column.

Columns are inserted to the left of the selected column. Rows are inserted above the
selected row.

Merging and splitting cells

You may want a table in which the number of columns per row or rows per column is not
consistent throughout the table. In this case you will need to merge one or more cells or
split two cells.

To merge cells,

1. Select the cells:

Place the cursor in one of the cells.

Click and hold.

Drag the mouse in the direction of the cells you want to include in the merge as shown in the
picture below.

Academic Computing Services - 19 - © 2001 The University of Kansas.


ACS Computer Training
Dreamweaver Introduction

2. From the Modify menu on the Menu bar, choose Table > Merge Cells.

To split a cell into 2 or more rows or columns,

1. Place the cursor in the cell to be split.


2. From the Modify menu on the Menu bar, choose Table > Split
Cell....
3. Complete the Split Cell dialog box, indicating the number of rows or
columns into which you want to divide the cell.
4. Click OK.

Working With Images


Introduction

Two types of file formats are almost universally supported by visual browsers: GIF
and JPEG. Any image in one of these formats can be placed on a Web page. If you have a
graphic you would like to use and it is in some other format (e.g., BMP, TIFF, PICT, etc.),
convert the image to GIF or JPEG using a graphic converter program (several shareware
programs are available for download from graphics Web sites) or a graphics program (e.g.,
PhotoShop, Image Composer, PhotoHouse, PaintShop Pro, etc.).

Inserting images

Unlike with other software applications such as Word and PowerPoint, images inserted in
Web pages are not stored with the document when the file is saved. They remain separate
from the HTML document and must be independently published to the Web server. As
separate files, they are referenced by file name in your Web document. Because of these
references, it is always a good rule of thumb to save a new document before adding any
images to it.

For more information on uploading files to a Web server, see the section entitled
Publishing a Page with Dreamweaver.

Insert an image as follows:

Academic Computing Services - 20 - © 2001 The University of Kansas.


ACS Computer Training
Dreamweaver Introduction

Place your cursor at the point at which you want an image inserted.

Choose Image from the Insert menu on the Menu bar.

Select the image file you want to insert. (If the file is not shown, browse to the proper
folder to find the image.)

Click Select.

The image appears immediately. Again, the image is not stored as part of the page but
remains a separate file that must be uploaded to the Web server separately.

Every image must have an alternative text associated with it for use by non-graphical
browsers. The text should provide meaningful information about the purpose of the
image on the page. If the image is purely decorative, enter an "empty" value of " " for the
alternative text as described below.

Select the image by clicking on it once (a black outline appears).

Add the alternative text in the Alt field of the Property Inspector as shown here:

Positioning images

When working with images on the Web, it is important to understand that images are
aligned relative to the text next to which they are placed. That is, an image can be aligned
relative to the baseline, middle, or top of text as shown in the following examples:

Baseline alignment

Middle alignment

Top alignment

Academic Computing Services - 21 - © 2001 The University of Kansas.


ACS Computer Training
Dreamweaver Introduction

In addition, an image can float along the left or right of the box element in which it is
placed. In other words, if you put an image inside a table cell, in a paragraph or simply
inside the body of your document, it can float to either the right or left edge of it's
containing box. The examples below are images inside of paragraph elements. The X
marks the actual location of the image tag (<img>) in the paragraph.

This image has an alignment value of "left." That means that the browser will
fit as much text in the window as possible while leaving room for the image
and will align the image to the left of the associated text as shown here.
Experiment with this by making your browser window narrower. Watch how
that affects the image/text relationship.

This image has an alignment value of "right." That means that the
browser will fit as much text in the window as possible while leaving
room for the image and will align the image to the right of the
associated text as shown here. Because this particular image tag is not
located at the very beginning of the paragraph, the first line of text fills
the width of the browser window. Experiment with this by making your
browser window narrower. Watch how that affects the image/text relationship.

Get Connected - Hyperlinks


Hyperlinks connect Web pages. Hyperlinks can connect pages that are part of the same Web
site, or they can link to other Web sites. A hyperlink can consist of text or images that have
been encoded such that when a site visitor invokes the text or image (usually by clicking) a
new page of material is presented by the browser.

Types of links

External link

A link to a Web page outside of your Web site. An "off-site" link. This type of link
requires an absolute URL.

Internal link

A link to another page within your site. While not required, internal links should use
relative URLs. Dreamweaver will create relative URLs by default.

Targeted link

A link to a specific location on a page (other than the top of a page, which is the browser
default).

Academic Computing Services - 22 - © 2001 The University of Kansas.


ACS Computer Training
Dreamweaver Introduction

Email link

While not technically a hyperlink in that invoking an email link does not cause a new
page of information to be opened in a browser, an email link causes the default email
program on the viewer's computer to open and inserts the email address specified in the
link in the To: field of the compose window in the email program.

Making links

Regardless of the type of link, making links involves two main steps:

Identify the text or image that is to serve as the link. For text links, choose the wording
for the link carefully. "Click here" is not a useful phrase for those who listen to a list of
available links on a page.

Identify the location of the page that is to open in the browser when the link is invoked.

External links

Use an external link to link to a Web page that is not part of your own site. That is, to link
to another Web site.

Select the text or image to serve as the link:

Highlight the text by clicking and dragging:


"... Web development tool. Visit the Macromedia Web site for additional information..."

OR

• Click on the image:

Insert the Web address (URL) of the site to which you want to link in the Link field of
the Property Inspector as shown:

Internal links

Use an internal link to link pages of your own site together. The pages can be in sub-
directories of the current page, or the current page can be in a subdirectory below the
page to which you want to link. Just be sure to include proper path information when
linking between pages within your site.

Academic Computing Services - 23 - © 2001 The University of Kansas.


ACS Computer Training
Dreamweaver Introduction

Because such links refer to other saved documents on your computer, you should always
save a new document before creating internal links.

Select the text or image that is to serve as the link:

Highlight the text by clicking and dragging:


"... Web development tool. Visit the Macromedia Web site for additional information..."

OR

Click on the image:

Insert the Web address (URL) of the page to which you want to link in the Link field of
the Property Inspector in one of the following ways:

Browse to the file:

Locate the file by clicking on the yellow folder icon as shown:

Navigate your way to the file to which you want to link.

Select the file name.

Click Select.

Type the path, if any, and filename directly into the Link field.

Targeted links

Use this type of link to connect parts of the same Web page, or to link to a specific point
on another Web page (rather than having the page display begin at the top of the page,
which is the browser default). Targeted links are very useful for creating cross references
on a page. This Dreamweaver document has many such internal targeted links.

Creating targeted links is a two step process:

Identify the location (on the page) to which you want to be able to link (called the anchor
or target).

Create the link.

Academic Computing Services - 24 - © 2001 The University of Kansas.


ACS Computer Training
Dreamweaver Introduction

Identify the target (anchor)

Bring the portion of your page to which you want to be able to link into view in your
browser window.

Place your cursor at the location you would like to link to.

Choose Named Anchor from the Insert menu on the Menu bar.

Type a name for this location on the page on the Anchor Name: field. The name can be
any word or words you choose, but for best results choose something meaningful. The
name may not contain any spaces:

Click OK as shown above.


This inserts an invisible element icon on the page similar to this: .
This icon will not appear on your published page on the Web. It merely serves as a place holder
while you're working on your page.

Create the targeted link

Select the text that will serve as the link.

Enter the URL in the Link field of the Property Inspector in one of these ways:

Type # followed by the name of the anchor used in Step 4 above (no spaces allowed, case
sensitive):

Use the point-to-file icon in the Property Inspector:

Click-and-hold on the point-to-file icon.

Academic Computing Services - 25 - © 2001 The University of Kansas.


ACS Computer Training
Dreamweaver Introduction

Drag the mouse pointer to the yellow anchor icon that corresponds to your desired target and
release the mouse button.

Email links

Select the text or image to serve as the link:

"If you have questions, send me email." OR "If you have questions, send email to
imajhawk@ukans.edu."

OR

Insert the URL for the email address to which you want to link in the Link field of the
Property Inspector as shown:

Note that the URL begins with mailto: and, like all URLs, it does not contain spaces.

Removing links

Regardless of the type of link (external, internal, targeted, or email), the method for
removing a link is the same:

Select the text or image that currently contains the hyperlink information.

Delete the URL shown in the Link field on the Property Inspector.

Press Enter (or Return).

Editing links

To change the URL associated with a hyperlink:

Select the text or image that currently contains the hyperlink information.

Academic Computing Services - 26 - © 2001 The University of Kansas.


ACS Computer Training
Dreamweaver Introduction

Change the URL shown in the Link field on the Property Inspector:

Edit the address "by hand"

Browse to a different file name by clicking the yellow folder icon.

Press Enter (or Return).

To change the text associated with a hyperlink simply use standard word processing
techniques to change the words that serve as the clickable text for the link.

Saving a Web page

Saving a Web page with Dreamweaver is very similar to saving any other type of
document.

Choose Save from the File menu on the Menu Bar.

Navigate to the folder into which you want to save your document.

Type a name for your document in the File name: field. Web document names must not
contain spaces. If you are saving your home page (first page of the site), you can simplify
the Web address for your site by naming this document index. See What is my URL? for
further information. (This convention is KU specific and may not work on other Web
servers).

Choose HTML Documents from the Save as type: menu.

Click Save.

Setting your preferences

Dreamweaver's work environment is highly customizable. In addition to remembering


your choice of window and palette arrangements each time you exit from the program,

Academic Computing Services - 27 - © 2001 The University of Kansas.


ACS Computer Training
Dreamweaver Introduction

you can also set very wide variety of preferences concerning the way Dreamweaver
works.

Although the options are too many to describe here, listed below are a few of the choices
available. To open the Preferences window, choose Preferences from the Edit menu on
the menu bar.

Your preferred CSS style notation

External text and HTML editors for use with Dreamweaver

Floating palette behaviors (i.e., whether or not they always remain on top of the
Dreamweaver window)

Display colors in Dreamweaver's WYSIWYG display and HTML source windows

Available browsers (for use with the Preview in Browser tool, under the File menu)

Academic Computing Services - 28 - © 2001 The University of Kansas.


ACS Computer Training
Dreamweaver Introduction

Publishing a Web page with Dreamweaver


Publishing is the term used to describe the process of copying Web documents from the
local development environment to a Web server. This requires software that uses the File
Transfer Protocol (FTP). Dreamweaver has this capability built-in. However, it is not
required that you used Dreamweaver to publish Web pages created with Dreamweaver.
You can use other FTP programs such as WS_FTP and Fetch, if desired.

Define a site

Before the publishing features of Dreamweaver can be used you must provide
Dreamweaver with information about the location to which you want to publish your
files. This is known as defining site. If you have already defined your site, proceed to
Copy files below.

Choose Define Sites... from the Site menu.

Click New....

In the Site Name: field type a name for this collection of Web pages. This is merely for
your own use in identifying your projects. Choose any name you like. It will appear in
your list of defined sites.

The Local Root Folder: field specifies the local folder in which the pages for this site are
(or will be) stored. The folder can have sub-folders but no part of your Web site
(images, other html files) should be stored outside of this folder.

If you do not know the precise path (drive letter and directories) to your Web documents,

Academic Computing Services - 29 - © 2001 The University of Kansas.


ACS Computer Training
Dreamweaver Introduction

click the yellow folder icon (as shown above) to navigate your way to the desired folder.

If you have not yet created a local folder for your Web site, you can do so by clicking on
the yellow folder icon (as shown above) and then click the Create Folder icon ( ).

Once you have located the folder in which your Web pages are (will be) stored, click
Select. The folder name appears in the Local Root Folder: field as shown:

Next choose Web Server Info from the Category list on the left:

From the Server Access: drop-down menu, choose FTP:

Complete the remaining fields as follows:

FTP Host: Type the name of the server on which you will store your Web pages. If you
are publishing to an ACS central computer system, the FTP Host will be one of the
following:

www.people.ukans.edu

falcon.cc.ukans.edu

eagle.cc.ukans.edu

raven.cc.ukans.edu

lark.cc.ukans.edu

heron.cc.ukans.edu

Academic Computing Services - 30 - © 2001 The University of Kansas.


ACS Computer Training
Dreamweaver Introduction

Note: You must have an account on a server in order to publish Web pages on it. If you
do not have an account, please go to the account sign-up site at
www.ukans.edu/account.htm.

Host Directory: Again, for publishing to an ACS central computer system, this will be
public_html. If you are publishing to another server, contact the system administrator for
that server to find out what directory your Web pages will be stored in.

Login: Type your account name for the server listed under FTP Host:.

Password: Leave this blank. You will be prompted for your password when you begin
publishing files.

Click OK and click Done.


This concludes the process of defining a site. This process needs to be completed only
once. After you define the site, you can publish pages to the site as often as you like.

Copy files

In the Site window, your newly defined site is the selected site. You may have a number
of different sites defined, or only one.

To copy your locally saved files to your remote server:

Click the Connect button to login to your account. If you did not save your password,
you will be prompted for it.

Once, connected, the Connect button displays a green light and the button now displays
Disconnect.

Click to select either a single file under Local Folders, or select groups of files by
selecting an entire folder, or use Shift-click or Ctrl-click to select multiple files.

Click the Put button at the top of the Site window to publish these files to your Web site.

Academic Computing Services - 31 - © 2001 The University of Kansas.


ACS Computer Training
Dreamweaver Introduction

To download Web pages that already exist off your remote server:

Click the Connect button to login to your account. If you did not save your password,
you will be prompted for it.

Once, connected, the Connect button displays a green light and the button now displays
Disconnect.

Click to select either a single file under Remote Site, or select groups of files by
selecting an entire folder, or use Shift-click or Ctrl-click to select multiple files.

Click the Get button at the top of the Site window to copy (i.e., download) these files to
your computer's hard drive.

What is the URL of my home page?

Introduction to URLs

In its most basic form, a Uniform Resource Locator (URL) takes the following form:

http://servername/~directory/sub-directory/filename where:
servername= people.cc.ukans.edu or raven.cc.ukans.edu or some other
server at KU. directory = your login name
sub-directory = the folder (directory) in which the Web page is stored
filename = the name of the file you want to display (usually ends in .shtml, .html,
or .htm)

For example, if your Web site is on KU's central computer system called Falcon, your
login name is histdept, your document is project1.html, and is stored in a sub-directory
called projects, the absolute URL for that document is:
http://falcon.cc.ukans.edu/~histdept/projects/project1.html

Additional sites and resources


HTML Info & Tutorials

www.kumc.edu/webdev/html/

www.w3.org/

www.webmonkey.com/

www.mcli.dist.maricopa.edu/tut/

www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html

www.htmlgoodies.com/tutors/

Academic Computing Services - 32 - © 2001 The University of Kansas.


ACS Computer Training
Dreamweaver Introduction

A chart illustrating the suggested sequence in which to attend Web Authoring Training at
ACS is available at: www.ukans.edu/acs/training/chart

ACS training schedule: www.ukans.edu/acs/training

Getting Additional Help


Academic Computing Services provides consulting and Q&A help in a variety of ways:

785/864-0200

question@ukans.edu

http://www.ukans.edu/acs/help/

To receive automatic announcements of upcoming computer training, send the following


message to the e-mail address below:

Address: .....................................listproc@ukans.edu

Message: .................................... SUB COMPUTER-TRAINING your name

Note: Substitute your real name above for your name, i.e., Jane Smith, not your
login name.

©2001 The University of Kansas

Academic Computing Services

DOCUMENT TITLE

Prepared by Jeff Lewis

785/864-0414

jrlewis@ku.edu

3/15/2001

Academic Computing Services - 33 - © 2001 The University of Kansas.

S-ar putea să vă placă și