DreamweaverDreamweaver~ A Quick Tour ~

QuickTime™ and aTIFF (Uncompressed) decompressor

are needed to see this picture.

The Welcome ScreenThe 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 youclose all your open Dreamweaver windows, the Welcome screen reappears

The Welcome ScreenOpen a Recent ItemThis section contains a list of the ten most recently opened items inDreamweaver

Create NewIf you want to create a new page or site, this is the column foryou. Choosing one of these options creates a new HTML, Coldfusion,PHP, ASP, XSLT, CSS, JavaScript, or XML file. You can calso create anew Dreamweaver site.

Create from SamplesIf you’re just learning about building Web sites, these are the choices foryou. This section contains sample documents, each of which containsmany beautiful laid-out pages ready for your content. Clicking any one ofthese open up the New Document dialog again, but with a differentcategory chosen.

Getting StartedChoosing this option gives you, as it says, a quick tour of Dreamweaver’s functionality. You’ll see a short online tutorial onAdobe’s Web site

New FeaturesThis opens the online new features documentation using your defaultBrowser

ResourcesYou can follow this link to find additional resources on Adobe’s site.

Don’t show AgainAdobe knows that while some people love the welcome screen, otherpeople don’t. Here, your can choose to never see the Welcome screenagain

The Welcome Screen

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 aTIFF (Uncompressed) decompressor

are needed to see this picture.

The Insert BarThe 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.

Common: This set of object contains mostcommonly used objects, such as links andImagesLayout: This tab include tables, divs, andframes: all objects that let you describe youyou want to lay out your pageForms: 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

The Insert BarSpry: New to Dreamweaver, Spry is a JavaScriptlibrary for designers and developers that allows themto add rich page functionality using Ajax widgets,such as menus, form validation, and tabbed panels,The spry tab allows you to insert Spry widgets ontoyour pages, with no coding required.

Text: The text tab doesn’t actually contain objects toinsert on the page; instead, it lets you style text that’salready on the page. It’s better, though, to just usethe 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 ToolbarUnderneath the Insert Bar, and below any documenttabs 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 InspectorThe 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!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 PageBuilding 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: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 PageTitling 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 PageAdding Text to Your PageThe 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 ImagesAdding ImagesTo 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 appears4. 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 PropertiesUsing Page PropertiesThe Appearance category of the Page Properties dialog hasthe following options:

Page font: specifies the default font family your Web pageswill use. Dreamweaver uses the font family you specifyunless the font is overridden by a CSS style sheet. You canalso set the font to be bold or italic

Size: sets the default font size. Dreamweaver uses this fontsize unless the size is overridden by a CSS style sheet. Youcan choose an absolute size (such as 9, 10, 12, and so forth)or relative sizes, (such as small, medium, large, x-large, andso on). Choosing an absolute size allows you to pick any ofthe 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.

LinksLinksYou will find the following options in the Linkscategory - unsurprisingly all affecting how links areDisplayed

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

HeadingsHeadingsHeading font: specifies the default font family usedfor headings. Dreamweaver uses the font family you specifyunless the font is overridden by a CSS style sheet. You canalso set the font to be bold or italic.

Heading 1 through Heading 6: allows you to set size andcolor options for each heading size. The size pop-up menusallow you to set absolute sizes 9sized with numbers, suchas 9, 12, 18, and so on) or relative sizes (such assmall,medium, or large), and for absolute sizes, you canchoose from any of the available measurement units. ClickThe color well to bring up a color picker to help you set theheading color

Tracing ImageTracing ImageSome 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.