Docstoc

Dreamweaver

Document Sample
Dreamweaver Powered By Docstoc
					Dreamweaver
 ~ A Quick Tour ~
                                  QuickTime™ and a
                        TIFF (Un compressed) decompressor
                           are neede d 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™ an d a
TIFF (Uncompressed) decompressor
   are need ed to see this p icture .
          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.

				
DOCUMENT INFO