dream weaver training

8/8/2019 Dream Weaver Training

1/14

Dreamweaver

Dreamweaver is an HTML editor, authoring tool, and Web site

management toll all rolled into one. The following are the Dreamweaver

interface seen when the application is opened:

this is the default Dreamweaver

MX interface. However, the

interface is quite complicated and

not very intuitive, so we would be

using the Dreamweaver 4.0

interface which is much simpler.

this is the Dreamweaver 4.0

interface, this can be activated by

click on EditPreferences. In the

popup dialog box, click General tap

in the category field. Then click on

the Change Workplace button in the

General field. In the Workplace

Setup dialog box that appears,

select the Dreamweaver 4.0 radio

button.

We would be using the Dreamweaver 4.0 on the Dreamweaver MX

platform and the following topics would be touched:

Creating Site and directory

Text, links and Images

Multimedia Table

Layers

CSS

Frames


2/14

Creating Site and directory

Before any creation of web pages can be done, we must first set up the

directory to store all the files. Dreamweaver enables mirroring this folder to

a remote folder on the remote server (e.g. ftp server) so that instant upload of

files to that remote folder is possible. To do so, following the steps below:

1. create a local folder in your computer (e.g. F:\Documents and

Settings\Chen Xianshun\My Documents\Pracitces\Training Notes

on Dreamweaver\MyRootFolder).

2. After the folder MyRootFolder is created, open Dreamweaver MX

and click on SiteNew Site. A Site Definition dialog box appears,click on the Advanced tab:

3. With the Local Info in the category

field of the dialog box selected,

click on the folder icon next to

Local Root Folder input box and

navigate to MyRootFolder and

select its path. Create a folder

called Images and set its path in

the Default Image folder input box.

Leave the rest as default and click

on the Remote Info in the category

field.

4. Enter the ftp server name, host directory,

password and username, click the Test

button, and connected, Dreamweaver will

let you know. Now click on OK to close

the Site Definition dialog box.

After the above operations, the Site Map

window will open (which can be accessed by

SiteSite Map as well), click on the button, to ask Dreamweaver to list


3/14

files in the remote folder, now you have the remote folder on the left hand

side and local folder(MyRootFolder) on the right hand side of the Site Map

window shown below:

Now with your local folder set up, you can copy the images used into

the Images folder in the MyRootFolder folder and save the web page in the

MyRootFolder, when you save files outside the MyRootFolder, the

Dreamweaver will prompt you to save into the MyRootFolder which act as a

reflection of the remote server folder where you would final files to be in.

When a web page is created and saved, click FilePreviews in

Browsersiexplorer or simply press F12 to test the web page.

Text, Links and Images


4/14

Dreamweaver have many of its functions grouped in the Object Panel

which appears by default to the right of Document Panel and have the

following looks:

Notice that there are

more than one groups of

objects that can be used to

create HTML doc, such as

Frames, Media and so on,

These can be accessed by

selecting from the popup menu

of the Object Panel.

1. TEXTText can be directly entered on the document area by simply clicking

on the document area and type, notice that the Property Panel (below the

Document Panel) reflects the current element properties.

To change the properties of a portion of the text, select the text and

adjust Font family, color, size, alignment in the Property Panel (which

reflect the current selected element: text).

To create link using text on the document (which is saved as html web

page), type URL address in Links input box in the Property Panel of text, or

click on the folder icon to browse for the file that is linked to.

Seperator can be inserted by clicking on the Object Panel

(Common) and adjustment of its dimension be made in the Property Panel.

2. LINKS


5/14

To create a link from scratch, click an insertion point on the

document, and then with Common group in the Object Panel select the text,

click on links button on the Object Panel. In the popup HyperLink

dialog box, fill in text and link input box (text is what appears to be the link

when web page is displayed). The target allow the link to open a newwindow (_blank option) and display the linked page in the current window

(_self and default).

To create an email contact link, click an insertion on the document or

select contact info text and then click on Mailto box on the Object Panel

(Common). In the popup Email Link box, fill in text and email address and

click ok.

To use a link to jump from one part of a web page to another part, an

anchor can be used. Firstly click an insertion at the destination part of the

web page, and then click the Anchor box in the Object Panel (Common),and in the popup Anchor dialog box, enter the name of the anchor.

Now go back to the original point where the link to the anchor is to be

created, selection some text as anchor link holder and in the text Property

Panel, type anchor name preceded by the pound symbol # into the links

input box. When the anchor link is clicked you will be brought to the anchor

in the web page.

3. Images


6/14

To Insert an image, place the cursor at where you want to insert the

image and click Image box on the Object Panel (Common). In the Select

Image Source dialog box that pop up, select an image in the Image

folder(located under the MyRootFolder) and click OK, the image will beinserted, and the Property Panel also changes to reflect the properties of the

image, image dimension and alignment can be set in this Panel:

To create an image with links, fill in the Links and Target in the

Image Property Panel.

To add a background picture, click ModifyPage Properties, then

select an image in the Image folder for background in the Page Properties

dialog box, Page Properties also allow us to set background color, text color,

links color, visited link color and so on.

To create a rollover (that is picture that changes image when the

mouse is rolled over it), place an insertion point at where to insert the

rollover, and then select Rollover box in the Object Panel to open the

Insert Rollover Image dialog box. In this dialog box, check Preload Rollover

Image check box, select both the original image and rollover image file b

clicking the folder icon and add an url link to the image to create a linked

image. Click ok button to close the dialog box and the rollover picture is

inserted into the web page with Property Panel setting similar to that of

normal image.

4. Image Map

Image map is image on which several dozen location links to different

URL To create an image map, Insert an image into web page, as shown:


7/14

in this figure, the

document window is

shown in maximized mode

and the other panels are

hidden by pressing F4.

(They can be shown by

pressing F4 again).

Give the image a name in the Map Name text box which must beunique from other map names if any in the page. Select the drawing tool

located below the Map Name text box including rectangle, oval, and

irregular shape (which is done by clicking points to be joined together).

With the newly drawn hotspot selected, type in the Property Panel, a

URL in the link box or an anchor link and select the Target (either _blank

for new window or self for original window). Alt text can also associate with

each hotspot using the Property Panel.


8/14

Multimedia

1. Add a Sound file

To add a sound file, place the insertion point at where to insert the

sound plugin, Selection the Media group for the Object Panel, and click on

plugin box in the Object Panel. Then select the sound file in the popup

Select File dialog box (suggesting that you first copy the sound file under

the MyRootFolder directory).

The sound control will appear on the web page once this is done and

Property Panel show the properties of the plugin where the dimension of

plugin shown can be resized.

To control further behavior of the sound control such as loop, hidden,

play count, autostart and so on, Click at the parameters button, and click +

sign to add parameters and their values. For example:

Parameter Value

Hidden true

Autostart true

Loop true

This creates a background sound which automatically start when page

loaded and loop infinitely.

2. Add Flash Text

Dreamweaver allow directly adding of flash text without editing

through Flash MX.

To insert Flash Text, Set the Object Panel to the Media group, place

an insertion point on the web page, and then select Flash Text box in the

Object Panel.

The Insert Flash Text box popup showing the following options:


9/14

Flash Text is able to create

fantastic text effect, including

blanking (text color and a

different rollover color), it also

can include a URL link.

3. Create Flash button

Dreamweaver is also capable to generate flash button, to create a flash

button, first the Object Panel is set at Media group, then place an insertion

point on the document. After that, select Flash button box in the Object

Panel, the Insert Flash Button dialog box would then come up:

Button Style allow

you to choose among a

set of buttons, Button

Text is the caption of thebutton, Font and size

also refer to Button

caption, Link and Target

hold the url and window

after the button is

clicked, Bg Color is the

background color of the

button, Save as option

allows you to save theflash with different

name. (must be in the

current folder of

MyRootFolder).Click

applied to view the effect

and Click OK when done.


10/14

Table

Create a table

To create a table, place an insertion point on the page, then select

Table box in the Object Panel (Common). And just press InsertTable. The

Insert Table dialog pop up:

Notice that the width can be

specified as the percentage of the

window width or the number of

pixels.

Fill in the required number of rows and columns and press ok.

The table would be inserted on the page so Table cell can be enter

Tabular data.

Sort a Table

To sort a table, select the table, then click CommandsSort Table,

the Sort Table dialog box appears which allow you to special according to

which column to sort the table and in what sort of orders, uncheck the Sort

Includes First Rows if the first row is the Header row:


11/14

Add and Remove Rows and Columns

To Add and Remove rows and columns, right-click a cell locate at the

required column or row, and select the proper commands from the Table

submenu in the popup context menu:

Merge and split Cells

To merge cells in a row or column, Ctrl+click the cells (drag), then

click the Merge button in the Property Panel:


12/14

To split cell, select the cell by Ctrl+click the cell and click the Split

button on the Property Panel, notice that merge button disable in this case.

Use a Dreamweaver Pre-Set Table Format

To use one of the Pre-set Table formats, select the table, and then

click CommandsFormat Table, choose one of the format from the list box

in the popup Format Table dialog box and click Apply or OK.


13/14

Layers

Layers allow the random positioning of element on the web page.

Those elements can be placed on the different layers which can be dragged

around and place as one wishes.

To create a layer, place an insertion point on the web page, then click

InsertLayer, or with Object Panel set to Common group, select the

Layer box in the Object Panel, the layer created is shown below together

with various properties of layer in the Property Panel:

HTML can be place on the layer and move together with the layer

when the layer is being dragged. And by clearing the check of Prevents

Overlap in the Layer Panel, layer can overlapped each other.


14/14