Introduction to Dreamweaver MX 2004:
This guide is designed to introduce you to using Macromedia Dreamweaver
MX if you’re unfamiliar with any major aspect of it. The lessons
in this guide lead you through the process of creating a simple
but functional website.
Macromedia Dreamweaver MX is a professioal HTML editor for designing,
coding, and developing websites, web pages, and web applications.
Whether you enjoy the control of hand-coding HTML or prefer to work
in a visual editing environment, Dreamweaver provides you with helpful
tools to enhance your web creation experience.
The visual editing features in Dreamweaver let you quickly create
pages without writing a line of code. If you prefer to code by hand,
however, Dreamweaver also includes many coding-related tools and
features. And Dreamweaver helps you to build dynamic database-backed
web applications using server languages such as ASP, ASP.NET, ColdFusion
Markup Language (CFML), JSP, and PHP.
Note: This guide is not a comprehensive manual
for all of the features of Dreamweaver MX, nor is it an introduction
to web design.
Where to start:
Dreamweaver Help includes information for readers from a variety
of backgrounds. To get the most out of the documentation, start
by reading the parts that are most appropriate for you.
For web-design novices:
1. Introduction and Creating Your First Website in Dreamweaver.
If any section in those chapters seems too advanced or too complex,
skip that section and come back to it later.
2. In Dreamweaver Help, read Exploring the Workspace, Planning and
Setting Up Your Site, Managing Your Site, and Setting Up a Document.
3. Learn about page layout by reading Laying Out Pages in Layout
View.
4. To learn about formatting text and including images in your pages,
read Inserting and Formatting Text and Inserting Images.
5. That’s all you really need to begin producing high-quality
websites, but when you’re ready to learn how to use more advanced
tools, you can proceed through the rest of the static-page chapters
in order. You may want to wait to read the dynamic-page chapters
until you’re more familiar with creating web pages.
For experienced web designers who are new to Dreamweaver:
1. Begin by reading the first two chapters of the Getting Started
guide: Introduction and Creating Your First Website in Dreamweaver.
2. In Dreamweaver Help, read Exploring the Workspace to learn more
about the Dreamweaver user interface.
3. Although much of the material in Planning and Setting Up Your
Site and Managing Your Site is probably familiar to you, skim those
chapters to see how these familiar concepts are implemented in Dreamweaver.
Pay particular attention to the sections on using Dreamweaver to
set up a new site.
4. Follow the steps in any tutorials that interest you, to learn
more about using Dreamweaver to perform specific tasks. To view
the tutorials in the help system, choose Help > Tutorials.
5. Inserting and Formatting Text and Inserting Images provide useful
information on the details of using Dreamweaver to create basic
HTML pages.
6. Read the overview at the beginning of each of the other chapters
to determine whether its topics are of interest to you.
For experienced hand-coders:
1. Begin by reading the first and third chapters of the Getting
Started guide: Introduction and Editing code in Dreamweaver.
2. In Dreamweaver Help, read Exploring the Workspace to learn more
about the Dreamweaver user interface.
3. Although much of the material in Planning and Setting Up Your
Site and Managing Your Site is probably familiar to you, skim those
chapters to see how these familiar concepts are implemented in Dreamweaver.
Pay particular attention to the sections on using Dreamweaver to
set up a new site.
4. Read more about coding with Dreamweaver in Setting Up Your Coding
Environment, Coding in Dreamweaver, Optimizing and Debugging Your
Code, and Editing Code in Design View.
5. Read the overview at the beginning of each of the other chapters
to determine whether its topics are of interest to you.
For experienced web designers, familiar with Dreamweaver, who want
to learn about creating dynamic pages:
1. Begin by reading the first, fourth, and fifth chapters of the
Getting Started guide: Introduction, Understanding Web Applications,
and Developing a Web Application in Dreamweaver MX.
2. In Dreamweaver Help, skim Exploring the Workspace to learn about
new aspects of the Dreamweaver user interface.
3. Set up a web server and application server; see Setting Up a
Web Application.
4. Connect to a database. Depending on the server technology your
application server uses, see Database Connections for ColdFusion
Developers, Database Connections for ASP.NET Developers, Database
Connections for ASP Developers, Database Connections for JSP Developers,
or Database Connections for PHP Developers.
5. Read the overview at the beginning of each of the other chapters
to determine whether its topics are of interest to you.
6. If you’re interested in customizing Dreamweaver by hand,
read “Customizing Dreamweaver” on the Macromedia Support
Center. If you want to write extensions for Dreamweaver, read Extending
Dreamweaver (Help > Extending Dreamweaver).
For experienced web application developers who have not
used Dreamweaver or UltraDev:
1. Begin by quickly reading the Getting Started guide to familiarize
yourself with the basics of using Dreamweaver.
2. In Dreamweaver Help, read Exploring the Workspace to learn more
about the Dreamweaver user interface.
3. Although much of the material in Planning and Setting Up Your
Site and Managing Your Site is probably familiar to you, skim those
chapters to see how these familiar concepts are implemented in Dreamweaver.
Pay particular attention to the sections on using Dreamweaver to
set up a new site.
4. Follow the steps in any tutorials that interest you, to learn
more about using Dreamweaver to perform specific tasks. To view
the tutorials in the help system, choose Help > Tutorials.
5. Set up a web server and application server using Dreamweaver;
see Setting Up a Web Application.
6. Connect to a database. Depending on the server technology your
application server uses, see Database Connections for ColdFusion
Developers, Database Connections for ASP.NET Developers, Database
Connections for ASP Developers, Database Connections for JSP Developers,
or Database Connections for PHP Developers.
7. Read the overview at the beginning of each of the other chapters
to determine whether its topics are of interest to you.
For experienced web application developers who have used UltraDev
4:
1. Begin by reading What’s new in Dreamweaver MX.
2. In Dreamweaver Help, skim Exploring the Workspace to learn about
new aspects of the Dreamweaver user interface.
3. If you’re interested in customizing Dreamweaver by hand,
read “Customizing Dreamweaver” on the Macromedia Support
Center. If you want to write extensions for Dreamweaver, read Extending
Dreamweaver (Help > Extending Dreamweaver)
Defining a Dreamweaver Site:
After configuring your system to develop web applications, define
a Dreamweaver site to manage your files.
Note: Macromedia HomeSite and ColdFusion Studio
users can think of a Dreamweaver site as a HomeSite or Studio project.
Before you start, make sure you meet the following requirements:
You have access to a web server. The web server can be running
on your local computer, on a remote computer
such as a development server, or on a server maintained by a web
hosting company.
Setting up a web server:
To run web applications, you need a web server. A web server is
software that serves files in response to requests from web browsers.
A web server is sometimes called an HTTP server. Common web servers
include IIS, Netscape Enterprise Server, iPlanet Web Server, and
Apache HTTP Server.
If you’re not using a web hosting service, choose a web server
and install it on your local computer or on a remote computer.
Windows users can get a web server up and running quickly on their
local computer by installing either PWS or IIS. The web server may
already be installed. Check your folder structure to see if it contains
a C:\Inetpub or D:\Inetpub folder. PWS and IIS create this folder
during installation. If you want to install PWS or IIS,
ASP.NET pages only work with one web server: Microsoft IIS 5 or
higher. PWS is not supported. Also, because IIS 5 is a service of
the Windows 2000 and Windows XP Professional operating systems,
you can only use these two versions of Windows to run ASP.NET applications.
Windows 98, ME, or NT are not supported. Note, however, that you
can develop (as opposed to run) ASP.NET applications on any computer
running Dreamweaver MX, including the Macintosh.
You created a root folder for your web application on the system
running your web server.
Creating a root folder for the application:
After the server software is installed, create a root folder for
your web application on the computer running the web server.
Make sure the folder is published by the web server—in other
words, the web server can serve any file in this folder or in any
of its subfolders in response to an HTTP request from a web browser.
For example, on a computer running PWS or IIS, any file in the Inetpub\wwwroot
folder or in any of its subfolders can be served to a web browser.
Defining a Dreamweaver site for your web application consists
of three steps:
- Define a folder located on your hard disk as a Dreamweaver local
folder to store working copies of your site files...
Defining a local folder:
You can define a Dreamweaver local folder for each new web application
you create. The local folder is the folder you use to store working
copies of site files on your hard disk. If you don’t define
a local folder, Dreamweaver will not work properly.
Defining a local folder also gives you the ability to manage your
files and to transfer files to and from your web server at the click
of a button. Create a folder on your local disk to store working
copies of your files. You may want to create subfolders to store
image files and other assets. (recommended)
In Dreamweaver, choose
- Site > New Site. The Site Definition dialog
box appears.
- If the wizard is showing, click Advanced then
select Local Info from the Category list (it
should be the default).
- In the Site Name box, enter a descriptive
name for your Dreamweaver site.
- In the Local Root Folder box, specify the
folder you created.
- You can enter a path or click the folder icon to browse
to and select the folder.
If you want, complete the other options to follow in the Local
Info category (they are not required to make the site work). However
they will be ask for.
2. Define a folder located on the computer running
your web server as a Dreamweaver remote folder...
Defining a remote folder:
After defining a local folder, you can define a remote folder for
your Dreamweaver site. The remote folder is the folder you created
for your web application on the web server (see Defining a root
folder for the application).
You don’t need to define a remote folder if the folder you
defined in Defining a local folder can double as the root folder
for your web application. (This implies that the web server is running
on your local computer.)
To define a Dreamweaver remote folder:
In Dreamweaver, choose
- Site > Edit Sites,
- selecting your site, and clicking Edit.
The Site Definition dialog box appears.
- If the wizard is showing, click Advanced then
select Remote Info from the Category list.
The Remote Info dialog box appears.
- In the Access pop-up menu, choose one of the
following options: Local/Network, FTP, or RDS.
Your choice tells Dreamweaver how you want to transfer files between
your local folder and remote folder.
Note: To use RDS, the remote folder must be on
a computer running ColdFusion.
You can also send your files to a SourceSafe application by choosing
SourceSafe Database. (SourceSafe is used by developers for file
version control.) If you choose this option, you need to define
a separate folder. For instructions, see Specifying where dynamic
pages can be processed below.
After choosing an access method, set the access options as appropriate.
3. Specify where Dreamweaver should send dynamic pages
to be processed while you work...
Specifying where dynamic pages can be processed:
After defining the remote folder in Dreamweaver, specify a folder
where dynamic pages can be processed. Dreamweaver uses this folder
to generate dynamic content and connect to databases while you work.
Typically, you specify the root folder you created on the web server
(see Creating a root folder for the application) because a web server
and application server work together.
Note: The root folder can be local or remote,
depending on where your web server is running.
To specify where Dreamweaver can get dynamic pages processed:
- If the Site Definition dialog box is not open,
open it by choosing Site > Edit Sites, selecting
your site, and clicking Edit.
The Site Definition dialog box appears.
- If the wizard is showing, click Advanced then
select Testing Server from the Category list.
- The Testing Server dialog box appears.
- Complete the dialog box and click OK.
Dreamweaver needs the services of a testing server to generate
and display dynamic content while you work. The testing server can
be your local computer, a development server, a staging server,
or a production server. As long as it can process the kind of dynamic
pages you plan to develop, the choice doesn’t matter.
After the Dreamweaver site is defined, you can start building your
web application.
Creating
a New HTML Page:
You can use the New Document dialog box to select the type of document
you want to create.
If you typically work with a specific document type, you can set
a default document and automatically open a new document based on
the default document you’ve defined. For information, see
Setting New Document preferences.
To create a new blank document:
- In Dreamweaver, choose File > New.
The New Document dialog box appears. The General
tab is already selected.
- In the Category list select the category 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 document, and so on.
- In the Document list, select the page type
you want to create, then do one of the following:
- Click Create.
- Double-click on the item in the document list.
- Press Enter.
The dialog box closes and a new document appears in the Document
window.
Using Development Views- Standard View and
Layout View:
Switching into and out of Layout view:
Before you can draw layout tables or layout cells, you
must switch from Standard view into Layout view.
Tip: If you create a table in Standard view, then switch into Layout
view, the resulting layout table may contain empty layout cells.
You may need to delete these empty layout cells before you can create
new layout cells or move layout cells around. When you create a
new layout that you’re going to edit in Layout view, it’s
easier to create the table in Layout view than to create it in Standard
view.
To switch into Layout view:
- If Design view isn’t visible, choose View >
Design or View > Code and Design.
Layout view cannot be enabled or disabled in Code view.
- Choose View > Table View > Layout View
or click the Layout View button in the Insert
bar’s Layout category.
(In the Dreamweaver 4-style floating workspace, with a vertical
Insert bar, the layout-related items appear at the bottom of the
panel, rather than in a separate category.)
A gray bar labeled Layout View appears across the
top of Design view, to indicate that you’re
in Layout view. If there are tables on your page,
they appear as layout tables.
To switch out of Layout view:
- If Design view isn’t visible, choose View >
Design or View > Code and Design.
Layout view cannot be enabled or disabled in Code view.
- Choose View > Table View > Standard View
or click the Standard View button in the Insert
bar’s Layout category.
Previewing Pages:
Next, you’ll need to save the pages, then view them to see
how the application you developed works. To view pages as they would
look from your local Hard Drive and then when processed by the server,
preview your page in a browser as follows...
View on local Hard Drive:
Open the Document you want to view in dreamweaver.
- select File > Save to save your work.
- Select F12 on your keyboard to view the page
in your current browser.
View
from Server:
Open the Document you want to view in dreamweaver.
- select File > Save to save your work.
- In the Site panel, select the locationDetail
document, then click the Put Files button (blue
up arrow) to copy the local file you want to view to your server.
- With the locationMaster document still selected, press F12
to view the page in a browser.
Setting document properties:
Page titles, background images and colors, text and link colors,
and margins are basic properties of every HTML document. The page
title identifies and names the document. A background image or color
sets the overall appearance of the document. Text and link colors
help site visitors distinguish regular text from hypertext and to
see which links have been visited and which have not.
Changing the
document title:
The title of an HTML page helps site visitors keep track of what
they’re viewing as they browse, and it identifies the page
in the visitor’s history and bookmark lists. If you don’t
title a page, the page will appear in the browser window, bookmark
lists, and history lists as Untitled Document. Note that giving
the document a filename (by saving it) is not the same as giving
the page a title.
With the document open, do one of the following:
- ChooseModify > Page Properties.
- Choose View > Toolbar (if it isn’t
already selected).
- Right-click (Windows) or Control-click (Macintosh)
in an empty area in the document, then select Page Properties.
- In the Title text box, enter the title for
the page, the press Enter or Return.
- If you’re editing the title in the Page Properties
dialog box, click OK.
The title appears in the title bar of the Document window (and
in the toolbar, if it’s showing). The filename of the page
and the folder the file is saved and appears in parentheses next
to the title in the title bar. An asterisk indicates the document
contains changes that have not yet been saved.
Setting
a background image or background page color:
To define an image or color for the page background, use the Page
Properties dialog box. If you use both a background image and a
background color, the color appears while the image downloads, and
then the image covers up the color. If the background image contains
any transparent pixels, the background color shows through.
To define a background image:
- Choose Modify > Page Properties, or select
Page Properties from the context menu in the
Design view of the Document window.
- To set a background image, click the Browse button,
then browse to and select the image. Alternatively, enter the
path to the background image in the Background Image
box.
Dreamweaver tiles (repeats) the background image if it does not
fill the entire window, just as browsers do. (To prevent the background
image from tiling, use Cascading Style Sheets to
disable image tiling.
To set a background color:
- Choose Modify > Page Properties, or select
Page Properties from the context menu in the
Design view of the Document window.
- To set background color, click the Background color
box and select a color from the color
picker.
[back
to top] |
