Title: Dreamweaver
1Dreamweaver
2The Welcome Screen The first time you launch
Dreamweaver, youll see the Welcome screen. This
page (which changes based on what youve
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
3The 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 youre 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.
4The Welcome Screen
- Getting Started
- Choosing this option gives you, as it says, a
quick tour of - Dreamweavers functionality. Youll see a short
online tutorial on - Adobes 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 Adobes site. - Dont show Again
- Adobe knows that while some people love the
welcome screen, other - people dont. Here, your can choose to never see
the Welcome screen - again
5The 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!
6(No Transcript)
7The Insert Bar
- Directly under the menu bar is whats
- 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.
8The 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 youre someday going to work with
external data such as databases, that wen youll
use the Data set
9The 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 doesnt actually contain
objects to - insert on the page instead, it lets you style
text thats - already on the page. Its better, though, to
just use - the Property Inspector (see later) to do this
instead.
10The Insert Bar
- Favorites This starts off empty, but you can
- modify it to contain just what youd like it to
- have. To do this, choose the Favorites set, and
- then right-click (or Control-click, for Macs).
- Youll be presented with a dialog that allows you
- to add your most commonly used objects
11The Document Toolbar
- Underneath the Insert Bar, and below any document
- tabs you have open, youll 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 heres where youll 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.
12The 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 youve selected some text,
youll see text options, while if youve 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.
13Starting 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, lets 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 were
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). Thats called the
index page, and it usually just goes in the local
root folder.
14Building 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.
15To create a new page from the New Document dialog
- Choose File gt New, or press Ctrl-N (Cmd-N). The
New document dialog appears - set to the Blank
page tab - 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. - Click the item you want in the second column.
Dreamweaver has a preview image of the item you
selected available, with a description below - Click Create.
16Titling 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. Youll enter this text
in - the Dreamweaver document window.
- Click in the Title field at the top of the pages
- document window
17Adding 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.
18Adding Images
- To add an image to your page
- In your document, click where you want the image
to appear. - 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. - The Select Image Source dialog appears
- Navigate to the image file you want, and select
it. Dreamweaver shows you a preview of the image
in the Select Image Source dialog
19Using 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 )
20- 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.
21- Repeat sets how the background image will be
displayed if it doesnt 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.
22Links
- You will find the following options in the Links
- category - unsurprisingly all affecting how links
are - Displayed
- Link fontspecifies 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 ).
23- 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.
24- 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
25Headings
- 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
26Tracing 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 isnt 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 doesnt show up
- when you preview the page in a browser.
27- 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.