Setting Up Web Browsers for Previews
Creating and Organizing a Web Site
Navigating the document window.
Define view options, Working with panels,
Using the Insert bar, Setting page properties,
Define link pane.
adings, Title/encoding design,
Using Draw Layer Box in your page layout.
nging background and tex
Aligning and formatting.
Special Characters Object Palette
Adding Line Breaks and Defining Page Properties
Inserting a Horizontal Rule
Creating Ordered and Unordered Lists
Creating a link, Link creates through hotspots,
Using image place holder, Insert image,
Control image size.
Creating a basic table, Adding column and row shapes,
Adding color and formatting
to tables, Using tabular data
Working with Roll over,
Using Navigation options.
ple button rollover effects
Setting Relative and Absolute Links
Line break verses paragraph break.
Working with macromedia flash file.
Creating a basic form.
Adding elements and editing a framesets.
Reusing Elements with t
he Library Feature
Adding a Library Item to a Page
The Properties of Library Items
Changing a Library Item
Adding Multimedia Files
Designing for All of Your Viewers
Checking for Plug
Working with Medias,
ublishing your website with FTP,
Introduction to Dreamweaver
Macromedia Dreamweaver is a professional HTML editor for designing, coding, and developing websites, web pages, and
. Whether you enjoy the control of hand
r prefer to work in a visual editing environment,
The workspace layout
, Dreamweaver provides an all
window integrated layout. In the integrated workspace, all windows and
panels are integrated into a single larger application window.
The Document window
The Document window shows the current document. You can select any of the following views:
Design view is a design environment for visual page layout, visual editing, and rapid application development. In this view,
a fully editable, visual representation of the document, similar to what you would see viewing the
page in a browser
is a hand
such as PHP or
ColdFusion Markup L
and any other kind of code.
Code and Design view
lets you view both Code view and Design view for the same document in a single window.
When the Document window has a title bar, the title bar displays the page title and, in parentheses, th
file’s path and filename.
After the filename, Dreamweaver displays an asterisk if you’ve made changes that you
haven’t saved yet.
The Document toolbar
The Document toolbar contains buttons that let you toggle between different views of your document qu
Design, and a split view that shows both Code and Design view.
toolbar also contains some common commands and options related to viewing the document and transferring it
between the local and remote sites.
The following options appear i
n the Document toolbar:
Show Code View
displays only the Code view in the Document window.
Show Code and Design Views
displays Code view in part of the Document window and Design view in another part.
When you select this combined view, the option Design V
iew on Top becomes available in the View Options menu. Use
this option to specify which view appears
at the top of your Document window.
Show Design View
displays only the Design view in the Document window.
displays a report to help you debug
the current ColdFusion page. The report includes errors, if any, in your
allows you to enter a title for your document, to be displayed in the browser’s title bar. If your document
already has a title, it appears in this field.
Errors enables you to check cross
lets you validate the current document or a selected tag.
displays the File Management pop
in Browser allows you to preview or debug
your document in a browser. Select a browser from the pop
View refreshes the document’s Design view after you make changes in Code view. Changes you make in
Code view don’t automatically appear in Design view until you perform certa
in actions, such as saving the file or clicking
allows you to set options for Code view and Design view, including which view should appear above the
other. Options in the menu are for
the current view: Design view, Code view, or
lets you use different visual aids to design your pages.
The status bar
The status bar
at the bottom of the Document window provides additional information about the document you are creating
The tag selector shows the hierarchy of ta
gs surrounding the current selection. Click any tag in the hierarchy to select that
tag and all its contents. Click
to select the entire body of the document. To set the
attributes for a
tag in the tag selector, right
click (Windows) or
click (Macintosh) the tag and select a class or ID from the context
menu. The tag selector is the preferable method for selecting tags because it ensures that you are always selecting the tag
The Insert bar
The Insert bar contains bu
ttons for creating and inserting objects such as tables, layers, and images. When you roll the
pointer over a button, a tooltip appears with the name of the button.
The buttons are organized into several categories, which you can switch on the left side of
the Insert bar. Additional
categories appear when the current document contains server code, such as ASP or CFML documents. When you start
Dreamweaver, the category you were last working in
Some categories have buttons with pop
up menus. When yo
u select an option from a pop
up menu, it becomes the default
action for the button. For example, if you select Image Placeholder from the Image button’s pop
up menu, the next time
you click the Image button, Dreamweaver inserts an image placeholder. Anyti
me you select a new option from the pop
the default action for the button changes
bar is organized in the following categories:
The Common category
enables you to create and insert the most commonly used objects, such as images and tabl
The Layout category
enables you to insert tables,
tags, layers, and frames. You can also you choose among three
views of tables: Standard (default), Expanded Tables, and Layout. When Layout mode is selected, you can use the
Dreamweaver layout tools
: Draw Layout Cell and Draw Layout Table.
The Forms category
contains buttons for creating forms and inserting form
The Text category
enables you to insert a variety of text
formatting tags, such as
The HTML cat
enables you to insert HTML tags for horizontal rules, head content, tables, frames, and scripts.
are available only for pages that use a particular server language, including ASP, ASP.NET,
CFML Basic, CFML Flow, CFML Advanced,
JSP, and PHP. Each of these categories provides server
code objects that
you can insert in Code view.
The Application category
enables you to insert dynamic elements such as recordsets, repeated regions, and record
insertion and update forms.
The Flash e
enables you to insert Macromedia Flash elements.
The Favorites category
enables you to group and organize the Insert bar buttons you use the most in one common place.
The Coding toolbar
The Coding toolbar contains buttons that let you per
form many standard coding operations, such as collapsing and
expanding code selections, highlighting invalid code, applying and removing comments, indenting code, and inserting
recently used code snippets. The Coding toolbar is visible only in Code view an
d appears vertically on the left side of the
The Property inspector
The Property inspector lets you examine and edit the most common properties for the currently selected page element, such
as text or an inserted object. The contents of
the Property inspector vary depending on the element selected. For example, if
you select an image on your page, the Property inspector changes to show properties for the image (such as the file path to
the image, the width and height of the image, the bor
der around the image, if any, and so on).
The Files panel
You use the Files panel to view and manage the files in your Dreamweaver site.
About Dreamweaver files
You can work with a variety of file types in Dreamweaver. The primary kind of file you w
ill work with is the HTML file.
or Hypertext Markup Language files
contain the tag
based language responsible for displaying a web page
in a browser. You can save HTML files with either the .html or .htm extension. Dreamweaver saves files usin
g the .html
extension by default.
Following are some of the other common file types you might use when working in Dreamweaver:
, or Cascading Style Sheet files, have a .css extension. They are used to format HTML content and control the
positioning of v
arious page elements. For more information on working with these types of files, see
Cascading Style Sheets
, or Graphics Interchange Format files, have a .gif extension. GIF format is a popular web graphic format for cartoons,
logos, graphics with transparent areas, and animations. GIFs contain a maximum of 256 colors.
, or Joint Photograph
ic Experts Group files (named after the organization that created the format), have a .jpg
extension, and are usually photographs or high
color images. The JPEG format is best for digital or scanned photographs,
images using textures, images with gradient
color transitions, and any images that require more than 256 colors.
, or Extensible Markup Language files, have a .xml extension. They contain data in a raw form that can be formatted
using XSL (Extensible Stylesheet Language). For more information on
working with these types of files, see
XML Data in Web
, or Extensible Stylesheet Language
files, have a .xsl or .xslt extension. They are used to style XML data that you want
to display on a web page. For more information on working with these types of files, see
Displaying XML Data in
, or ColdFusion Markup Language files, have a .cfm extension. They are used to process dynamic pages. For more
information on working with these types of
Building ColdFusion Applications Rapidly
, or ASP.NET files, have a .aspx extension. They are
used to process dynamic pages. For more information on
working with these types of files, see
Building ASP.NET Applications Rapid
, or PHP: Hypertext Preprocessor files, have a .php extension. They are used to process dynamic pages. For more
information on working with these types of files, see
Building PHP Applications Rapidly
Creating new files in Dreamweaver
This section tells you how to create a new blank document in Dreamweaver.
You can also create new doc
uments in Dreamweaver that are based on a Dreamweaver design file or on an existing
To create a new blank document:
Select File > New. The New Document dialog box appears. The General tab is already selected.
From the Category list, select Basic
Page, Dynamic Page, Template Page, Other, or Framesets; then, from the list
on the right, select the type of document you want to create. For example, select Basic Page to create an HTML
document, or select Dynamic page to create a ColdFusion or ASP docume
nt, and so on. For more information
about options in this dialog box, click the Help button in the dialog
Click the Create button.
The new document opens in the Document window.
Save the document).
Saving files in Dreamweaver
When you create a new
document, you need to save it.
To save a new document:
Select File > Save.
In the dialog box that appears, navigate to the folder where you want to save the file.
In the File Name text box, type a name for the file. Avoid using spaces and special charact
ers in file and folder
names and do not begin a filename with a numeral. In particular, do not use special characters (such as é, ç, or ¥)
or punctuation (such as colons, slashes, or periods) in the names of files you intend to put on a remote server;
servers change these characters during upload, which will cause any links to the
Opening files in Dreamweaver
In Dreamweaver, you can easily open and edit your documents.
1. To open a file:
2. Select File > Open.
3. In the
pen dialog box, select the file and click Open.
Next you’ll add a table that will hold text, graphics, and Macromedia Flash assets.
Click once on the page to place the insertion point in the upper
left corner of the page.
Select Insert >
In the Insert Table dialog box, do the following:
in the Rows text box.
in the Columns text box.
in the Table Width text box.
Select Pixels from the Table Width pop
in the Border Thickness text box.
in the Cell Padding text box.
in the Cell Spacing text box
After you create your page layout, you are ready to add assets to the page. You’ll start by adding images. You can use
several methods to add images to a web page in
Dreamweaver. In this section, you’ll add four different images to the index
Cafe Townsend, using various methods.
Now you’ll add
some text to the page. You can type text directly in the Dreamweaver Document window, or you can copy
paste text from other sources (such as Microsoft Word or plain text files). Later, you’ll use Cascading Style Sheets
(CSS) to format the text.
Next you’ll add layers to the page. A layer is an absolutely positioned element that you can use
to hold images, text, Flash
Add more layers
Now you’ll add more layers to the page. You’ll use the first layer (banner_graphic) as a reference point for positioning the
other layers. You’ll also use the CSS Layer Backgrounds featu
re to help you position and distinguish between layers.
About web applications
A web application is a website that contains pages with partly or entirely undetermined content. The final content of a page
is determined only when the visitor requests a page
from the web server. Because the final content of the page varies from
request to request based on the visitor’s actions, this kind of page is called a dynamic page.
How a web application works
A web application is a collection of static and dynamic web pa
static web page
is one that does not change when a
site visitor requests it: The web server sends the page to the requesting web browser without modifying it. In contrast, a
dynamic web page
is modified by the server before it is sent to the request
ing browser. The changing nature of the page is
why it’s called dynamic.
Processing static web pages
A static website comprises a set of related HTML pages and files hosted on a computer running a web server. A web server
is software that serves web pages
in response to requests from web browsers. A page request is generated when a visitor
clicks a link on a web page, selects a bookmark in a browser, or enters a URL in a browser’s address text box. The final
content of a static web page is determined by th
e page designer and doesn’t change when the page is requested. Here’s an
<title>Trio Motors Information Page</title>
<h1>About Trio Motors</h1>
<p>Trio Motors is a leading automobile manufact
Every line of the page’s HTML code is written by the designer before the page is placed on the server. Because the HTML
doesn’t change once it’s on the server, this kind of page is called a static page.
When the web server rece
ives a request for a static page, the server reads the request, finds the page, and sends it to the
requesting browser, as shown in the following figure:
In the case of web applications, certain lines of code are undetermined when the visitor requests t
he page. These lines must
be determined by some mechanism before the page can be sent to the browser. The mechanism is discussed in the
Processing dynamic pages
When a web server receives a request for a static web page, the server sends
the page directly to the requesting browser.
When the web server receives a request for a dynamic page, however, it reacts differently: It passes the page to a special
piece of software responsible for finishing the page. This special software is called a
n application server.
The application server reads the code on the page, finishes the page according to the instructions in the code, and then
removes the code from the page. The result is a static page that the application server passes back to the web s
then sends the page to the requesting browser. All the browser gets when the page arrives is pure HTML. Here’s a view of
Accessing a database
An application server lets you work with server
side resources such as databases. For
example, a dynamic page may
the application server to extract data from a database and insert it into the page’s HTML. The instruction to extract
data from a database is called a database query. A query consists of search criteria expressed in a d
atabase language called
SQL (Structured Query Language). The SQL query is written into the page’s server
side scripts or tags. An application
server cannot communicate directly with a database because the database’s proprietary format renders the data
ecipherable in much the same way that a Microsoft Word document opened in Notepad or BBEdit may be
undecipherable. The application server can communicate with the database only through the intermediary of a database
driver: software that acts like an inter
preter between the application server and the database.
After the driver establishes communication, the query is executed against the database and a recordset is created. A
recordset is a set of data extracted from one or more tables in a database. The re
cordset is returned to the application server,
which uses the data to complete the page.
Here’s a simple database query
written in SQL:
SELECT lastname, firstname, fitpoints
This statement creates a three
column recordset and fills it with r
ows containing the last name, first name, and fitness
points of all employees in the database
Here’s an illustration of the process of querying a database and returning data to the browser:
You can use almost any database with your web application, as lo
ng as the appropriate database driver for it is installed on
If you plan to build small low
cost applications, you can use a file
based database, such as one created in Microsoft
Access. If you plan to build robust, business
ns, you can use a server
based database, such as one created
in Microsoft SQL Server, Oracle 9i, or MySQL.
If your database is located on a system other than your web server, make sure you have a fast
connection between the two
systems so that your web ap
plication can operate quickly and