Documente Academic
Documente Profesional
Documente Cultură
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
Definitions........................................................................................................................................5
Document Window..................................................................................................................5
Menu bar..................................................................................................................................6
Mini-launcher ..........................................................................................................................7
Palettes.....................................................................................................................................7
Headings ..................................................................................................................................9
Horizontal Rule......................................................................................................................11
Lists .......................................................................................................................................11
Introduction ...........................................................................................................................16
Editing a table........................................................................................................................17
Selecting a table.....................................................................................................................18
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.
Objectives
Create, format and publish a document ready for the World Wide Web. After today’s
workshop, participants will be able to:
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.
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.
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).
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.
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.
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
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."
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:
If these items do not open when you launch Dreamweaver, they can be opened by name
from the Window menu of your Dreamweaver document.
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.
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.
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
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.
Right-click on the in the HTML Tag Inspector and choose Remove Tag (with left
mouse button) as shown below:
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.
• 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:
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:
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
Use an ordered list when the sequence in which the items are presented is important to
the comprehension of the content.
Item one
Item two
Item three
Select all of the the items in the list and do one of the following:
Choose Ordered list from the List sub-menu under Text on the Menu Bar as shown:
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.
Use an unordered list when the sequence in which the items are presented is not
important to the comprehension of the content.
• Red
• Purple
• Yellow
Select all of the the items in the list and do one of the following:
Choose Unordered list from the List sub-menu under Text on the Menu Bar as shown
• 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.
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.
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:
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.
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
1. Create a standard list as described in Ordered lists, Unordered lists, or Definition lists
above. For example,
Colors
Shapes
Numbers
Colors
Red
Green
Shapes
Numbers
Select the sub-items (in this case Red and Green) as shown:
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.
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:
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."
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.
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
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.
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.
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.
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.
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,
Drag the mouse in the direction of the cells you want to include in the merge as shown in the
picture below.
2. From the Modify menu on the Menu bar, choose Table > Merge Cells.
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.
Place your cursor at the point at which you want an image inserted.
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.
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
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.
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).
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.
OR
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.
Because such links refer to other saved documents on your computer, you should always
save a new document before creating internal links.
OR
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:
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.
Identify the location (on the page) to which you want to be able to link (called the anchor
or target).
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:
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):
Drag the mouse pointer to the yellow anchor icon that corresponds to your desired target and
release the mouse button.
Email links
"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.
Editing links
Select the text or image that currently contains the hyperlink information.
Change the URL shown in the Link field on the Property Inspector:
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 with Dreamweaver is very similar to saving any other type of
document.
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).
Click Save.
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.
Floating palette behaviors (i.e., whether or not they always remain on top of the
Dreamweaver window)
Available browsers (for use with the Preview in Browser tool, under the File menu)
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.
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,
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:
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
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.
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.
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.
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.
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
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/
A chart illustrating the suggested sequence in which to attend Web Authoring Training at
ACS is available at: www.ukans.edu/acs/training/chart
785/864-0200
question@ukans.edu
http://www.ukans.edu/acs/help/
Address: .....................................listproc@ukans.edu
Note: Substitute your real name above for your name, i.e., Jane Smith, not your
login name.
DOCUMENT TITLE
785/864-0414
jrlewis@ku.edu
3/15/2001