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.
Top Related