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
8/8/2019 Dream Weaver Training
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
8/8/2019 Dream Weaver Training
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
8/8/2019 Dream Weaver Training
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
8/8/2019 Dream Weaver Training
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
8/8/2019 Dream Weaver Training
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:
8/8/2019 Dream Weaver Training
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/8/2019 Dream Weaver Training
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:
8/8/2019 Dream Weaver Training
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.
8/8/2019 Dream Weaver Training
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:
8/8/2019 Dream Weaver Training
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:
8/8/2019 Dream Weaver Training
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.
8/8/2019 Dream Weaver Training
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.
8/8/2019 Dream Weaver Training
14/14
Top Related