Dreamweaver - PowerPoint PPT Presentation

About This Presentation
Title:

Dreamweaver

Description:

Dreamweaver ~ A Quick Tour ~ * * * * * * * * Have students close the document and have them open up under File, New * * Let students know that they now have a choice ... – PowerPoint PPT presentation

Number of Views:103
Avg rating:3.0/5.0
Slides: 28
Provided by: PollyG1
Category:

less

Transcript and Presenter's Notes

Title: 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.
Write a Comment
User Comments (0)
About PowerShow.com