Dreamweaver

1
Dreamweaver

• A Quick Tour

2
The 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
3
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 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.

4
The 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

5
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!
6
(No Transcript)
7
The 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.

8
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 youre someday going to work with
  external data such as databases, that wen youll
  use the Data set

9
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 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.

10
The 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

11
The 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.
  

12
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 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.

13
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, 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.

14
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.

15
To create a new page from the New Document dialog

1. Choose File gt 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.

16
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. Youll enter this text
  in
• the Dreamweaver document window.
• Click in the Title field at the top of the pages
• document window

17
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.

18
Adding 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

19
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 )

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.

22
Links

• 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

25
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

26
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 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.