dreamweaver introduction -- creating web pages...

Dreamweaver Introduction -- Creating Web Pages with Dreamweaver – RIT Libraries pg: 1

Dreamweaver Introduction -- Creating Web Pages with Dreamweaver

This workshop covers the basics of web authoring with Dreamweaver. Learn how to create and format a

webpage including creating tables, inserting images, creating links, and publishing your pages.

Participants will:

• Start Dreamweaver and define a "local site"

• Navigate Dreamweaver

• Create and format web pages

• Create and modify tables

• Link to images

• Create hyperlinks in text and images to other webpages

• Create "image maps"

• Define a remote site and "publish" to it

What are web pages?

Web pages are nothing more than text documents that have special tags controlling appearance, linking, and

layout. You can see the code behind a webpage by viewing a page’s source. In Internet Explorer, chose View >

Source and you will something that looks like this:

<h1>Research Guides, Tutorials and more...</h1>

<center>

<a href="#course">Course-Specific Guides</a> || <a href="#subject">Subject

Guides</a> || <a href="#career">Career Guides 

</a><a href="#software">Software Tutorials</a> ||

<a href="#database">Database Tutorials</a> || <a href="#research">Doing

Library Research</a> 



</center>

Why use Dreamweaver?

The power of Dreamweaver (and similar) web page editors is that it allows users to create web pages without

having to know the tags that make up HTML.

Dreamweaver is an especially good web page editor because it is accessible for the novice user, yet is powerful

enough to grow with users as they gain experience and demand more complex features.

Dreamweaver MX 2004 is available from the macromedia website for a 30 day free trial. In addition, it is the

installed on many labs throughout campus, and is available for a substantial educational discount in the college

bookstore.

Although this workshop specifically addresses Dreamweaver MX 2004, the concepts, ideas, and topics covered

in this workshop are applicable to earlier versions too.

This workshop is conducted on Windows XP workstations, but all concepts, ideas, and topics are applicable to

Macintosh users too.


Site Organization Each web site (a collection of web pages, images, and other files) is housed on a server in a directory which is

readable by a web browser. Files are linked together in a hierarchical structure that allows users to navigate

through the available files.

Organizing your site from the outset and maintaining the structure for your site on your local drive could save

many hours of debugging broken links and missing files. When you go to publish your site by moving your

files to a web server, you will replicate not only the files, but also the hierarchical structure that you have

created.

The default webpage of any web site

directory is called index.html.

To prevent users from browsing the files

and subdirectories in a website, simply

name the lead document in every

directory index.html.

If there is no document named

index.html in a directory (as is the case

with the directory shown to the left) the

web browser will create one for the user

which will be nothing more than an

alphabetical list of the files and sub

directories.

Think of index.html as the table of

contents of your website. Everything

you want your users of your site to see

will be linked to this document to guide

them through your content.

Step 1: Create a folder locally.

If you are at your own computer, feel free to create the folder wherever you are comfortable storing files.

In this lab, click the My Documents icon from the desktop and add a www folder.


Step 2: Set up the Dreamweaver site editor for editing

See also, the step by step instructions for setting up a site at:

https://people.rit.edu/people/tutorials/dreamweaver.php

When Dreamweaver MX opens, it looks like this:

Click Create New Dreamweaver Site to walk through a wizard, setting up a new site.


Name your site something meaningful

Leave the default answer “no” to the server technology question.

Leave the default option to work locally with your files, and specify the location of the local “www” directory

you created:

Specify the remote settings for your website. If your website will be at www.rit.edu, use the following settings,

exactly as shown.

Choose FTP and the connection type.

Type gibson.rit.edu as the host name.

Type www/ for the remote folder.

Type your RIT User ID.

In a public lab like this one,

leave password blank and don’t save it.

Check off Use Secure FTP


Complete the wizard, answering Next or Done, until you are back to the main program.

Your site is now available

in the

Files window.

Choose “Local View” to

the right.

Finally click, Create New

HTML, from the menu in

the center.

When your blank

document is created, save

it as index.html

The next time that you open Dreamweaver, your site will be already defined and ready to use. Simply select it

from the drop down menu on the right hand side.


Application Workspace Title Bar

The title bar gives the filename,

and the local location of the file

Menu Bar

Like all windows applications,

all functions can be reached from

the Menu Bar

Insert Toolbar Dreamweaver includes several

toolbars with shortcuts to insert

common objects.

Main workspace

Where you type and manipulate

objects in Dreamweaver

Site Panel

Shows all the files and

subdirectories of your website

Properties Inspector A panel to control settings for

the type of object you are

working with. As you work with

different types of object (text,

images, tables, etc…), the

properties inspector changes.

Like all Windows programs, you can customize the look and feel of the workspace.

The View… Toolbars menu option and the Window menu give you many options on customizing the

application. Experiment with these to find what works best for you. If any part of the program should be closed

accidentally, try toggling one of these options to see if it reappears.


Creating a New Page:

There are a numerous ways to start a new document.

• Choose File > New…. OR

• From the Site Panel chose File > New File OR

• Ctrl + N OR

• In the Site Panel find the place the new document will reside, and with a right mouse button click,

choose New File. Name the file immediately, being sure to use “.htm” or “html” as the file extension,

then double click the new file to open it.

Of the four choices, the later is the preferred method, because it forces you to save the file in the proper place. If

you choose the other options, you will have to save the document by choosing File > Save or File > Save As.

Once you have created a new page, the first thing you should do is set the Page Properties.

Page properties are settings that control the look and feel of the entire page.

From the Modify menu, choose Page Properties, the following dialog box will appear:

Of all the categories, Appearance, Links, and Title are the most useful.

Headings, and Tracing Image are beyond the scope of this workshop.

These settings control the

default font, colors, and

margins of a web page.

These setting control the

appearance and color of fonts.

The Title controls what the user sees in her browser’s title

bar and bookmark file.


All of these settings are optional. If you do not choose to set a color or font, you are passing the choice of color

or font to your users’ browsers. Unless specified, the user’s browser will use whatever color or font it normally

uses.

Since web pages are meant to be displayed on your users’ computers, designing for them can be tricky.

Graphic design and traditional printing professionals are used to having total control of their documents –

setting up exactly how they want the document to appear. Web pages do not allow total control of appearance.

This is first apparent to most novice web page authors when setting fonts or colors for the page properties.

Notice that you can not specify a single font. Instead, you specify a

“font list.” A font list, is asking the user’s browser to first try

rendering the text in Arial. If the user’s PC does not have Arial, then

try Helvetica, and if Helvetica is not available, then use whatever font

is set up to be the default “sans-serif” font.

If you leave the choice “default” font, then the text will be whatever

font is specified as the default font in the user’s browser.

Colors are chosen in Dreamweaver by specifying a hexadecimal number.

Although you can specify one of several million different colors, you should

be careful doing so. You user may have a monitor that will be unable to

display the color you have chosen.

Dreamweaver’s color picker gives you a choice of 216 “web safe colors”

that almost all computer displays can render. Of course, there is nothing

stopping you from choosing a more obscure color, as long as you are willing

to live with the fact that some of your users may not be able to display it.


Working with Text

Working with text in Dreamweaver is similar to working with text in a word processor.

From the properties inspector, you can set the font family, font color, font style (bold, italics) justification, and

create bulleted or numbered lists.

Previous versions of Dreamweaver did not preserve formatting when you pasted in text from a word processing

program. Dreamweaver MX 2004, fixes this problem, and now text is properly formated.

Besides the font family and color selections already noted above, there are several additional differences

between standard word processing and authoring HTML in Dreamweaver.

• Tabs don’t work: The tab key does not work in web page editors. Use the indent and outdent arrows on

the Property Inspector for a similar effect.

• Multiple spaces are treated as one: The HTML treats multiple spaces as a single space. So, pressing

down the space key to line up text is not possible. (If absolutely necessary, you can place multiple

spaces into HTML, but it requires you to go into the HTML code view and add the HTML code for a

space - ).

• Paragraph Breaks: In HTML all paragraphs have a blank line between them. Using the ENTER key

(or RETURN Key) will create paragraph breaks. When typing text, let the processor wrap lines for you.

Unlike the Desktop publishing world, your output is not controlled by you. You user may have different

monitor settings and if you do not let the text wrap for you, you could end up with strange results.

• Line Breaks: If you want a line break, use SHIFT+ENTER (or SHIFT+RETURN).

• Spell checking: Available in the Text Menu.

It is best to type all your text first, letting the lines wrap for you, and then go back and do your formatting.

It is best to use a dark colored font on a light background.


Links, Anchors, & Mailtos What are Links? Links are clickable items that connect to other documents on the web. (other web pages,

media files such as video, audio, PDF files, etc…) Commonly, underlined text or image buttons are used as

links. Links draw the users eye to the navigable sections of the page.

There are 4 types of links:

1) External Links: Used to connect to an external web page. Also called Absolute Links because you must

use the fully qualified URL in order to create the link.

Creating an External Link 1. Type your text and highlight it.

2. In the properties inspector, type the complete URL of the site including the http:// part and

the full web address. For example: http://wally.rit.edu/electronic/electronic.html.

2) Internal Links – used for links to another page at your site. Also called a Relative Link because the user

provides the relative path from the current document to the one you wish to link to. They should not include

the http:// part of a URL.

Creating an Internal Link 1. Type your text and highlight it.

2. In the properties inspector, use the folder icon, to select the document on your site that you

want to link to. The address that appears in the relative path to the your file.


3) Links to an Anchor – These are links to a section on another web page. It requires one to first insert a

“named anchor” into the text.

Inserting a Named Anchor 1. Position your cursor exactly where you want the named anchor to be.

2. From the Insert Menu choose Insert Named Anchor.

3. When naming the anchor, avoid spaces, special characters, and don’t forget that

capitalization matters.

Linking to a Named Anchor 1. To link to a named anchor, simply use a pound sign “#” before the name of the anchor.

For example, if you are linking to the named anchor “section1” and:

a. The anchor is on the current page, simply type #section1 into the link box.

b. If the anchor is on another page in your site, simply type the name of that page, then

it’s named anchor: page2.html#section1

c. The anchor is on another page outside of your site, type the complete URL, with the

http:// part, the filename, and the named anchor. For example,

http://wally.rit.edu/electronic/electronic.html#section1

4) Mailto Links – These are special links that when clicked launch the user’s email program.

Creating a Mailto Link 1. Type your email address and highlight it.

2. In the properties inspector link box, type mailto: followed by an email address.

For example, mailto:[email protected]

Checking Links – Once you have created a page with links, it’s a good idea to check them. There are several

ways to do that:

• File > Preview in Browser will open your document in a web browser so that you can manually check

the links.

• File > Check Page > Check Links will check all the links in your document for you.

To edit a broken link, select it and make corrections in the Properties Inspector link box.

To remove a link, select the text and delete the contents of the link box of the Properties Inspector.


Images and Image Maps

Images are displayed on HTML pages by linking to them in a similar manner to page linking. You can either

link to an image on your site, or link to an image on another site. Although it is considered bad form to link to

images from other sites, there is nothing technologically stopping you from doing so.

When working with images for the web, you should prepare all your images outside of Dreamweaver in a

program such as Photoshop, Fireworks, or paint or graphics program.

Copyright is a serious issue. You should not under any circumstances use someone else’s images without

getting permission. But if you wanted to, you can download existing images from Internet Explorer, by right

clicking and choosing “Save Image As….”

Two basic file formats are supported in HTML – JPG and GIF.

Image formats used on the web

Image

Format

General Use Considerations File name convention

GIF Icons, graphics,

animated gifs

The 216 web-safe colors will show well

on vast majority of 256 (8-bit) color

monitors.

Example: icon.gif

JPEG Photographic

images

Balance between compression and

image quality. Has 8 bit adaptive-24 bit

color (millions) but not necessarily web

safe.

Example: photo.jpg

All image files you plan to use should be named and organized in your local web site folder before you link

them in your documents. When you “insert” an image into an HTML document, you are merely referencing the

image file. If you move or delete your images outside of Dreamweaver, your webpage’s will have broken image

links.


Inserting an Image

1. Place your courser where you want to image to appear.

2. Select INSERT > IMAGE or click the image icon on the insert toolbar.

3. Locate the image in your local site directory and click the OK button.

4. Click on the newly inserted image, and the properties inspector changes so that you see and can control

the image’s properties.

5. Fill in the properties as you see fit. (see description below)

Name box (unlabeled box below the text Image, 3K) is for naming the image to refer to later from scripts.

W and H options set the pixel width and height sizes. When you insert and image in Dreamweaver, these are set

automatically for you. You should not adjust the image size using these setting. It could distort the image. If you

need to change the size of image, do it outside of Dreamweaver and re-insert.

Src specifies the name and location of the image gif or jpg image file. This too is filled in automatically by

Dreamweaver when you insert an image.

Alt allows you to enter a short text description of what the image is illustrating. When users hold their mouse

over the image, this text will pop-up. It assists users who use voice readers on their web pages and this text will

display if the user has turned off images on their web browser.

Link allows you to make the image a clickable hyperlink. Just like text links, it can either be an absolute URL,

a relative URL, a link to a named anchor, or an email link.

Border specifies the thickness in pixels or a border around the image. By default it is left blank which means no

border.

will left justify, center, or right justify the image.

Align sets the alignment options for text near an image. By default, text is set to align with the baseline of the

image. Use the drop down box to experiment with the setting for your page.

Map defines the clickable parts of an image.


Making an Image Map

1. Highlight your image.

2. Choose the shape that will best create the hotspot you want (rectangle, circle, or polygon). When you

begin drawing your hotspot, properties inspector will change so that you can set the properties for your

hotspot.

3. Fill in the Link Box with the link for that hotspot. Just like text links, it can either be an absolute URL, a

relative URL, a link to a named anchor, or an email link.

4. Optionally repeat for each hot spot you want to create.


Tables Tables are used to either layout data in a spreadsheet format, or to create nicely organized, sometimes complex,

web pages. A cell can hold anything: formatted text, images, links, headings, horizontal rules, lists, or another

table (nested tables).

This webpage uses a very simple table to layout data in a spreadsheet like

format.

The cell borders are visible, so you can easily see the columns and row.

This web page makes extensive use of tables to organize content.

The borders of the tables are invisible, but if you study the page long enough,

you can tell that there are at least 20 rows and 4 columns.

Inserting a Table

1. Select Insert > Table or choose the table icon on the Inert Toolbar.

2. Fill in the properties as described below.

Rows and Columns specifies the number of rows and columns.

Table Width is a two part setting. The drop down box lets you

specify if the table should be an absolute size in pixels (so that the

size of the table remains the same) or a relative size in percent of

screen.

Border Thickness sets the thickness of the border around cells. To

make this table use an invisible border, set the border to zero.

Cell Padding sets the space around the cells’ border and the content

of the cells.

Cell Spacing controls how much space exists between cells.

Header will apply a pre-formatted style – bolding the contents – of

the top row, the left-most column, or both.

Accessibility optionally allow you to specify a caption to include

with your table.


When you have selected the entire table, by clicking the corner of it, a solid black box appears the entire table,

and the Properties Inspector can be used to modify the settings of the entire table.

Any of the settings specified when first creating the table can be modified here. In addition, you can set the

background color, the border color, and align the table on the page. Any of the settings you set here will effect

the entire table.

You can also select just parts of a table – a single cell, several cells, one or more rows, one or more columns,

etc… The little green drop down arrows at the base the table, make it easy to select exactly what you want to.

Notice that when you

select just part of a table

(a single column for

example) the properties

inspector changes back to

the text mode.

Any text settings such as

font, style, etc… will only

be applied to the contents

of that cell.

If you change any settings for a cell or a selection of cells, it overrides the settings for a table as a whole. For

example, if you set up the table’s background color to be blue, but select and change the first row’s background

color to be red, your entire table will have a blue background expect for the first row, which will be red.

Merge cells

together or

split one

apart

Set the

horizontal

or vertical

alignment.

Set the

cell(s)’

width and

height

Set the

cell(s)’

background

color

Set the

cell(s)’

border size

and color


Publishing your site at RIT

To publish your site on the RIT web server you have to first set up your RIT account for the web.

Check to make sure that your RIT personal website is set up and permissions have been set by reviewing the

tutorial at https://people.rit.edu/people/tutorials/putty.php

If you have already set up the site editor (see the site

organization section) then all you have to do is click the

connection icon from the files window:

A password dialog box will appear:

Once you connect, change the view of the files by clicking the

drop down menu in the far right hand corner of the Files Panel and

choose View, Expand Files Panel.

Click and drag each of the files, index.html (your lead document) and other affiliated files (jpg’s, gif’s etc…)

from the panel on the right hand side, to the panel on the left hand side dropping them into the www directory.


If Dreamweaver asks you if you want to include dependent files, click Yes to automatically include all linked

gif’s, jpeg’s, and pages. Clicking No will require you to manually move them separately.

Congratulations, you have a website. The web address (URL) to reach your site is:

http://people.rit.edu/abc1234 (where abc1234 is replaced with your RIT username).