West Visayas State University

Janiuay Campus
SCHOOL OF INFORMATION AND COMMUNICATIONS TECHNOLOGY
Janiuay, Iloilo
The Dreamweaver Workspace

The Dreamweaver workspace features a number of windows, panels, and inspectors. Learning what each does will help
you become proficient with the Dreamweaver Program. The first time you start Dreamweaver, a dialog box asks you to
select a workspace layout using either the Designer or the Coder layout.

You build your web pages by inserting and arranging Web page elements including text and graphics in the Document
window. The other windows, toolbars, and panels, help you to format and stylize the Web page elements.
Standard Toolbar - The toolbar contains shortcuts to preview and display features, and a text field where you can specify
the title of a page. It allows you to change between Code view, Design view, and Split view. You can also preview your
Web page in various browsers, and change various view options.

Menu Bar - Menus contain the commands for using Dreamweaver. Many of the menu commands are duplicated in other
locations within the windows, panels, and inspectors in Dreamweaver. Like many applications, the menu bar provides
access to program commands such as file saving and closing.

Insert Bar - The Insert Bar is where you will insert most of the content and objects such as text and images on your web
page. There are several different Insert Bars that you can select depending on the type of element you want to place on
your web page.

Properties Inspector also called the Tag Inspector- The Property Inspector is used to display and edit attributes or
properties of any element that is selected in the Document Window. Click the Property Inspector's Hide button to hide
the panel temporarily.

Panels and Panel Groups - Panels are windows that provide access to the Design, Code, Application, Tag, Files, Layers,
and History panels. Panels can be grouped together to form Panel Groups, and they can be easily hidden, expanded, or
moved.

IT 211: Programming for the Internet

1
 West Visayas State University
Janiuay Campus
SCHOOL OF INFORMATION AND COMMUNICATIONS TECHNOLOGY
Janiuay, Iloilo

Document Window- The Document Window is the main workspace where you insert and arrange the elements on your
web page. Most of your work inserting text and images on your web page is done in the Document Window.

Using the Insert Toolbar

The Insert toolbar can be formatted with a button that displays a menu of categories or with tabs across the top of the
tool bar that display the categories. To display the buttons from a particular category, click on a category from the drop-
down menu. When you click a category, the button display changes to the selected category.
You can change the toolbar format from buttons to tabs by clicking on the categories drop-down menu and selecting
Show as Tabs.
The buttons will change to tabs across the top of the Insert Toolbar.

You can insert elements into your Web page by clicking buttons or by dragging the buttons into the Document window.
When the Insert toolbar is formatted with tabs for each category, as it is in the figure below, it behaves like a panel. You
can collapse and expand it by clicking on the panel name.

You can also float the Insert toolbar by grabbing it in the upper left corner and dragging it to a new location on the
screen. The cursor will change to two crossed lines with arrows indicating that it can be moved.
IT 211: Programming for the Internet
2
 West Visayas State University
Janiuay Campus
SCHOOL OF INFORMATION AND COMMUNICATIONS TECHNOLOGY
Janiuay, Iloilo
 Common - This set of objects contains those that are most commonly used such as links and images.
 Layout - This set includes tables, divs, layers, and frames: all objects that let you describe how you want to
layout your page.
 Forms - The forms set includes form elements such as text fields, buttons, and check boxes.
 Text - The text set lets you style text that's on the page. The Property Inspector at the bottom of the
Dreamweaver workspace, however, is a better place to do this.
 HTML - The HTML set allows you to insert HTML objects such as tables, frames and scripts.
 Application - If you using external data sources with middleware software such as PHP, ASP, or ColdFusion, you'll
use the Application set. For normal static Web page development, you won't use this.
 Flash Elements - This set holy holds one object, the Flash image viewer.
 Favorites - The Favorites category begins empty. You can customize it by adding your own button to the features
you use most frequently. Switching between different panels. The Files Panel for example, has tabs for Files,
Assets, and Snippets.
A panel group opens from the Window menu. You have several panel groups open at the same time and panels can be
expanded or collapsed by clicking the name in the blue panel bar at the top of each panel group.
The Properties Inspector, located at the bottom of the Dreamweaver workspace, enables you to view the properties
associated with the object or text that is currently selected in the Document Window. You can use the Properties
Inspector to display and edit the properties of the object selected in the Document Window.

IT 211: Programming for the Internet

3
 West Visayas State University
Janiuay Campus
SCHOOL OF INFORMATION AND COMMUNICATIONS TECHNOLOGY
Janiuay, Iloilo

Panels open in the location they were last used. The default layout for Dreamweaver is to place tall panels on the side
and wide panels on the bottom of the workspace. You can move panel groups by dragging the gripper on the left side of
the panel group bar and placing the panel anywhere on your screen.
Using the Dreamweaver Properties Inspector
Property Inspector: Format Text
In the figure below, text is selected in the Document Window and the Property Inspector provides information about

Format a Table

In the figure below, the Property Inspector is for a table what was selected in the Document Window. In this view, notice
that the properties have changed from those associated with text to those associated with tables. Now you can edit
table properties such as number of rows or columns, cell padding, background colors, etc.
Any changes made to the table in the Properties Inspector will be applied to the selected table in the Document
Window.

Format an Image

In the figure below, an image is selected in the Document Window, and the Property Inspector changes to show the
properties associated with the selected image. When the image is selected in the Document Window, the image
properties appear in the Properties Inspector.
You can change many image properties such as dimensions, filename, alignment, links, and more.

IT 211: Programming for the Internet

4
 West Visayas State University
Janiuay Campus
SCHOOL OF INFORMATION AND COMMUNICATIONS TECHNOLOGY
Janiuay, Iloilo

Customize the Document Toolbar

You can use the drop-down menus in the Insert Bar to change the insert options. The status bar displays the file size and
estimated download time for your Web page. When you aren't using them you can close the document panels.

The figure below shows the Document Window with the Insert Toolbar shown as tabs.

The Insert Drop-down window can be shown as tabs across the top by clicking on Show As Tabs from the Insert drop-
down menu.

Customize the Document Window

You can click on the black triangles on the divider bars between the Document Window and the Panels and Property
Inspector to make them close. You can also click and drag the black triangles between the Document Window and the
Panels or the Property Inspector to close them.

IT 211: Programming for the Internet

5
 West Visayas State University
Janiuay Campus
SCHOOL OF INFORMATION AND COMMUNICATIONS TECHNOLOGY
Janiuay, Iloilo

Here is the Document Window with the Panels and the Properties Inspector closed. You have more room to work in the
Document Window with the other panels closed.

Create a Web Page

Click and choose New. The New Document dialog box will appear. Click the Basic Page and then click HTML. Click the
Create button.

A new blank page opens. Type a title for the page. The filename will be Untitled-1 until you save the page and give it a
name. Giving every page a title is an important part of web development. When your audience locates your web page
in a search engine, it's the title that will be linked to the URL for your page and is what your users will see first in a list of
search results.
Documents properties
It is necessary to design and to plan the Web Site before
creating the Pages that are going to be contained in this Web
Site.
In Appearance category, as you saw in the previous image,
we find the properties:
 Background image: Allows to specify a background
image for the document. This image appears
repeated. At the moment of selecting a background
image it's important to notice that according to the
image colors it will be necessary to establish some
specific color for the text. It is not recommendable to
have an animated gif as a background.
 Background color: Allows to specify a background
color for the document, but this color will only show
up in the case the background color was not
IT 211: Programming for the Internet
6
 West Visayas State University
Janiuay Campus
SCHOOL OF INFORMATION AND COMMUNICATIONS TECHNOLOGY
Janiuay, Iloilo
established.
 Size: is used to define the font size.
 Text color: is the font color.
 Margins: Allow us to establish margins in the document. Left and top margins only work with Microsoft Internet
Explorer, while the margin width and height only work with Netscape Navigator. None of those margins are in
Dreamweaver document window, they are only shown in the browser. The properties are organized by
categories, in the Title/Codification category we find the properties:
 Title: This is the document's title. It's in the browser's title and in the Dreamweaver document window.

Changing the image size  

Inside Dreamweaver the size of the images can be modified. This size change isn't directly applied to the image file, but
the view changes inside the page.
It's very probable for the quality of the resulting image to be lower than if we modify it in an external editor, such as
Fireworks.
For example, we'll see what happens if we insert an image that represents the Dreamweaver icon and we modify its size
in many ways:

original Image modified size image

The other way is through the properties inspector, by changing the fields W (wide) or H (height). These fields will be
shown in the inspector when an image is selected.
 
Inserting Rollover Image.  
A rollover is an image replace by another when the mouse is over it. This kind of image is used on menus and buttons.
Here, there is an example of a rollover. Point at it to see what happens.

If you want to insert a rollover, you need to go to Insert menu, Image objects, and then Rollover Image. In the new
window specify the original image and the one that will substitute the former.

It's preferable to activate the Preload rollover image option. If it's active, the rollover image loads when the page loads,
so we avoid a download delay when we're over the image.
The Alternate Text is the text you will see when you place the mouse over the image, or the text that will show up
when of the image cannot be shown in the browser.
Alternate text can be assigned to all images, not only to rollovers. You can do this through the Alt field in the Properties
inspector of the selected image.
 
To insert a flash button you need to go to the Insert menu, Media, and Flash Button option, and you will see this
dialogue box:

IT 211: Programming for the Internet

7
 West Visayas State University
Janiuay Campus
SCHOOL OF INFORMATION AND COMMUNICATIONS TECHNOLOGY
Janiuay, Iloilo
 

IT 211: Programming for the Internet

8