Dreamweaver
~ A Quick Tour ~
QuickTime™ and a
TIFF (Uncompressed) decompressor
are needed to see this picture.
The Welcome Screen
The first time you launch Dreamweaver, you’ll see the Welcome screen. This
page (which changes based on what you’ve recently done in Dreamweaver) is
your starting point for both creating and modifying pages and sites. If you
close all your open Dreamweaver windows, the Welcome screen reappears
The Welcome Screen
Open a Recent Item
This section contains a list of the ten most recently opened items in
Dreamweaver
Create New
If you want to create a new page or site, this is the column for
you. Choosing one of these options creates a new HTML, Coldfusion,
PHP, ASP, XSLT, CSS, JavaScript, or XML file. You can calso create a
new Dreamweaver site.
Create from Samples
If you’re just learning about building Web sites, these are the choices for
you. This section contains sample documents, each of which contains
many beautiful laid-out pages ready for your content. Clicking any one of
these open up the New Document dialog again, but with a different
category chosen.
The Welcome Screen
Getting Started
Choosing this option gives you, as it says, a quick tour of
Dreamweaver’s functionality. You’ll see a short online tutorial on
Adobe’s Web site
New Features
This opens the online new features documentation using your default
Browser
Resources
You can follow this link to find additional resources on Adobe’s site.
Don’t show Again
Adobe knows that while some people love the welcome screen, other
people don’t. Here, your can choose to never see the Welcome screen
again
The Document Window
In your Dreamweaver “Welcome Screen” window, choose
HTML, under “Create New.”
You will see a new page, ready for you to design. This is
where it begins!
QuickTime™ and a
TIFF (Uncompressed) decompressor
are needed to see this picture.
The Insert Bar
Directly under the menu bar is what’s
called the Insert Bar. The Insert Bar is
used to insert content and object into your
page. It has seven different tabs, and you
get different tools on each tab.
The Insert Bar
Common: This set of object contains most
commonly used objects, such as links and
Images
Layout: This tab include tables, divs, and
frames: all objects that let you describe you
you want to lay out your page
Forms: The Forms set includes form elements such
as text fields, buttons, and check boxes.
Data: If you’re someday going to work with external
data such as databases, that wen you’ll use the
Data set
The Insert Bar
Spry: New to Dreamweaver, Spry is a JavaScript
library for designers and developers that allows them
to add rich page functionality using Ajax widgets,
such as menus, form validation, and tabbed panels,
The spry tab allows you to insert Spry widgets onto
your pages, with no coding required.
Text: The text tab doesn’t actually contain objects to
insert on the page; instead, it lets you style text that’s
already on the page. It’s better, though, to just use
the Property Inspector (see later) to do this instead.
The Insert Bar
Favorites: This starts off empty, but you can
modify it to contain just what you’d like it to
have. To do this, choose the Favorites set, and
then right-click (or Control-click, for Macs).
You’ll be presented with a dialog that allows you
to add your most commonly used objects
The Document Toolbar
Underneath the Insert Bar, and below any document
tabs you have open, you’ll find the Document toolbar.
It consists of three parts:
View mode buttons: These let you choose between
Design, Code, and Split views of your document.
The page title: Every page needs a descriptive title,
and here’s where you’ll change yours.
Miscellaneous buttons: These contain everything
from a “preview in browser” button, to a button to
validate content, to a button to show additional
visual aids inside Dreamweaver itself.
The Property Inspector
• At the bottom of the screen is the Property Inspector.
Based on what is selected in the document window,
different options appear in this inspector: that is, if you’ve
selected some text, you’ll see text options, while if you’ve
selected an image, image options appear. The Property
Inspector can be used to both view and modify the
displayed options. The many uses of the property
Inspector will be covered later.
• In the lower-right corner of the inspector is an
expand/collapse triangle. Depending on its current state,
this either expands or collapses the inspector. This lets
you choose whether you want to display the extra
information shown in the bottom half.
Starting Your First Site!
• Just as in HTML, you will need to create a local root folder.
This folder will contain all of the files and folders that make
up the site. For example, let’s say that you are building a
company site that has two section in it, one for product
information (called products), and the other for information
about the company (called companyinfo). Each of the two
sections gets its own folder. These folders are located
inside the local root folder (which in this example we’re
calling MyCompany). Because each sections shares
some of the same graphic images, there is also an images
folder in the local root folder. With one exception, each of
the Web pages that you build for the site will go into either
the products or companyinfo folder. The exception is the
main site page (the one that people see when they load
your site in their browsers). That’s called the index page,
and it usually just goes in the local root folder.
Building Your First Page
Using the New Document dialog
The New Document dialog gives you a bit
more flexibility than the Welcome screen when
creating new documents. Like the Welcome
screen, you can create several different types
of new documents, plus it allows you to
choose the doctype of the new document.
To create a new page from
the New Document dialog:
1. Choose File > New, or press Ctrl-N (Cmd-N).
The New document dialog appears - set to the
Blank page tab
2. Click to choose one of the tabs in the leftmost
column. The second column changes to show
the available items for the tab you selected. The
name of these column also changes to match
the name of the tab.
3. Click the item you want in the second column.
Dreamweaver has a preview image of the item
you selected available, with a description below
4. Click Create.
Titling Your Page
The first thing you should do with your new
page is to add a title. The title is the text that
appears in the title bar of Web browser windows
at the top of the window. You’ll enter this text in
the Dreamweaver document window.
Click in the Title field at the top of the page’s
document window
Adding Text to Your Page
The blinking insertion point is where you
begin to add your text. Click on your
page and you should see the insertion
point blink.
To format the text:
You can use the Insert Bar - click the Text tab
or you can use the Property Inspector - at the
bottom of your page. Apply any formatting you want
- just as you would if you were using a word
processor.
Adding Images
To add an image to your page:
1. In your document, click where you want the
image to appear.
2. On the Common tab of the Insert Bar, click the
Image button. You can also use the menu at
the top of your page and choose Insert and
scroll down to Image.
3. The Select Image Source dialog appears
4. Navigate to the image file you want, and select
it. Dreamweaver shows you a preview of the
iamge in the Select Image Source dialog
Using Page Properties
The Appearance category of the Page Properties dialog has
the following options:
Page font: specifies the default font family your Web pages
will use. Dreamweaver uses the font family you specify
unless the font is overridden by a CSS style sheet. You can
also set the font to be bold or italic
Size: sets the default font size. Dreamweaver uses this font
size unless the size is overridden by a CSS style sheet. You
can choose an absolute size (such as 9, 10, 12, and so forth)
or relative sizes, (such as small, medium, large, x-large, and
so on). Choosing an absolute size allows you to pick any of
the measurement units (pixels, points, inches, cm, mm, picas,
ems, exs, and %)
Text Color: lets you set the default color for text.
Click the color well to bring up a color picker to
help you set the color
Background color: lets you set the default color for
the page background. Click the color well to bring
up a color picker to help you set the color.
Background image: allows you to set an image that
will appear behind all the text and images on the
page. Click the Browse button to bring up the
Select Image source dialog, navigate to the image,
then click OK (Choose). If you set a background
image, it overrides the background colour.
Repeat: sets how the background image will
be displayed if it doesn’t fill the whole page.
You can choose repeat to tile the image
horizontally and vertically; repeat-x to tile the
image horizontally; repeat-y to tile the image
vertically; or no-repeat to display the image
only once.
Margins: allows you to set the Left, Right,
Top, and Bottom margins of the page. You
can use any of the measurement systems as
units, as you an with text size.
Links
You will find the following options in the Links
category - unsurprisingly all affecting how links are
Displayed
Link font:specifies the default font family your Web pages use
to display links. Dreamweaver uses the font family you
specify unless the font is overridden by a CSS style sheet.
You can also set the fond to be fold or italic
Size: sets the default font size for link text. Dreamweaver uses
this font size unless the size is overridden by a CSS style
sheet. You can choose an absolute size or a relative size.
Choosing an absolute size allows you to pick any of the
measurement units (pixels, points, inches, cm, mm, picas,
ems, exs, and %).
Link color: sets the color to apply to link text.
Click the color well to bring up a color
picker to help you set the color.
Visited links: sets the color to apply to
visited link text. Click the color well to bring
up a color picker to help you set the color.
Rollover links: sets the color to apply to link
text when you place the mouse cursor over
the text. Click the color well to bring up a
color picker to help you set the color.
Active links: sets the color to apply to link
when you click the text. Click the color well to
bring up a color picker to help you set the
color
Underline style: sets the way links are
underlined. Your choices are Always
underline. Never underline. Show underline
only on rollover, and Hide underline on
rollover
Headings
Heading font: specifies the default font family used
for headings. Dreamweaver uses the font family you specify
unless the font is overridden by a CSS style sheet. You can
also set the font to be bold or italic.
Heading 1 through Heading 6: allows you to set size and
color options for each heading size. The size pop-up menus
allow you to set absolute sizes 9sized with numbers, such
as 9, 12, 18, and so on) or relative sizes (such as
small,medium, or large), and for absolute sizes, you can
choose from any of the available measurement units. Click
The color well to bring up a color picker to help you set the
heading color
Tracing Image
Some people prefer to design their pages in a
graphics tools such as Adobe Photoshop or
Adobe Fireworks. They can then export that image
and bring it into Dreamweaver as a background
image. It isn’t a background image for the page;
rather, it is a guide that you can use as a reference
to re-create the same look in Dreamweaver. This
guide is called a tracing image. The tracing image
only appears in Dreamweaver; it doesn’t show up
when you preview the page in a browser.
Tracing image: has a Browse button that,
when click, brings up the Select Image
Source dialog. Navigate to the image, then
click OK (Choose).
Transparency: is a slider that controls the
opacity of the tracing image. You can set the
image from zero to 100% opacity.