Day 2

1
Day 2

• Introduction to Dreamweaver MX 2004

2

• Intro to Dreamweaver MX 2004
• Creating Your First Website
• Creating Links
• Adding Content to Your Site
• Formatting Text
• Working with Graphics
• Designing Page Layout
• Working with Templates and Libraries

3
Intro to Dreamweaver MX 2004

• What is Dreamweaver MX 2004?
• It is a powerful but easy-to-use web site
  development program that bridges the gap between
  designer and developer.
• Exploring Dreamweaver
• Dreamweaver's interface makes it easy to design
  and manage both simple and complex web sites by
  providing a point-and-click interface that
  simplifies most tasks. Designers can drag and
  drop page elements in Design view, while
  developers can work directly with the page's
  code, making use of the various tools Dreamweaver
  provides for ensuring correct syntax.

ltlt back
4

• Document Window and Toolbars
• The main workspace in Dreamweaver is the Document
  window.

ltlt back
5
Dreamweaver offers three document views

• Design view, Code view, and Split view

ltlt back
6
ltlt back
7
                               N
ltlt back
8
Document Toolbar

• Use the buttons on the Document toolbar, located
  just above the Document window, to switch between
  Code, Split, and Design views.

The Document toolbar also contains commands for
naming, previewing, and publishing the current
document
ltlt back
9

• Standard Toolbar
• The Standard toolbar, located just below the
  Document toolbar, contains the same commands
  you'd find on most standard Windows toolbars

ltlt back
10
Insert Bar

• The Insert bar contains most of the commands
  you'll use to add elements to your pages. These
  include images, hyperlinks, tables, forms, and
  multimedia objects.

Common The default category, which contains
commands for adding hyperlinks, tables, images,
and multimedia objects. Layout - Used for
designing the layout of your page, with commands
for tables, layers, and framesets. Forms
Contains commands for adding form elements to
your page. Text Contains commands for applying
various formatting to the text on your page, as
well as for inserting special characters. HTML
Lets you select various HTML tags to insert into
your page. Application Contains commands for
adding database elements to your page. Flash
Elements Lets you insert a Macromedia Flash
movie into your page. Favorites Lets you
customize your own toolbar by grouping your
favorite commands. You'll be introduced to many
of these commands in subsequent sections of this
tutorial. To show or hide the Insert toolbar,
open the View menu and select Toolbars, and then
Insert.
ltlt back
11
Property Inspector

• The Property Inspector lets you specify the
  properties of the text or object that's currently
  selected on your page.

Status Bar
The status bar is the small row at the bottom of
the Document window containing the Tag Selector.
ltlt back
12
Creating Your First Web Site

• Creating a Local Site

ltlt back
13
Creating an HTML Page

• 1. Open the File menu and select New.

ltlt back
14

• 2. In the General tab, select the Basic Page
  category and HTML.
• 3. Click Create.
• A new HTML page opens in the Document window.
• 4. To save the file, click the Save button on the
• Document toolbar, or open the File menu and
  select Save.
• In the Save As dialog, browse to the location of
  your site folder (if necessary), enter a file
  name, and click Save.

15
The file now appears in the Files panel.
16
Defining Document Properties

• Use the Page Properties dialog box to apply page
  settings such as title (which appears in the
  viewer's browser window), background color, and
  default font.
• Open the Modify menu and select Page Properties,
  or click the Page Properties button in the
  Property Inspector.
• The Page Properties dialog box opens.
• By default, the Appearance category is selected.
  Here, define the appearance of the default text
  on your page by selecting a font, size and text
  color. You can also choose a background color and
  image, and set the page margins.
• Highlight the Links category to define the
  default appearance of hyperlinks.
• The Headings category lets you specify the
  appearance of various heading styles on your
  page. Later, when you enter text, you can apply
  these styles to create headings and subheadings.
  If you decide to change the appearance of your
  headings, you need only make the changes to the
  styles in this dialog.
• Use the Title category to enter a title for the
  page. This is the text that appears in the title
  bar of the viewer's browser window.

17
Uploading a Web Page
Use the Files panel to upload web pages to your
web server. If you haven't yet defined the remote
information (the information that Dreamweaver
needs to access your web server), do it now by
selecting Manage Sites from the drop-down menu in
the Files panel, and then highlighting your site
and clicking Edit in the Manage Sites dialog.
ltlt back
18
Creating Links
Dreamweaver provides a number of ways to insert
hyperlinks into your web pages.

• Type them directly into the Property Inspector.
• Use the Point to File button in the Property
  Inspector.
• Use the Browse for File button in the Property
  Inspector.
• Use the Hyperlink button on the Insert bar.

ltlt back
19
Using the Hyperlink Dialog
The Hyperlink dialog offers additional options
when creating a link

• On your page, position your cursor where you want
  to insert they hyperlink.
• On the Insert bar, make sure the Common category
  is selected, and then click the Hyperlink button.
  
• In the Text field, enter the text that will
  appear as a hyperlink on the web page.
• In the Link field, enter the path to the file you
  want to link to, or click the Browse to File
  button to select a file.
• The remaining fields are optional
• Target specifies the window or frame the linked
  file should be opened in by default, the new
  page will replace the old one in the same
  window. This is the same as selecting _self. If
  you want the file to be opened in a new
  window, select _blank.
• The text you enter in the Title field is
  displayed in a yellow pop- up when the user
  moves the mouse over the link.
• The Access key is a one-character keyboard
  shortcut that users can press to access the
  link.
• The Tab index specifies the order in which users
  can tab from link to link, just as they might
  use the Tab key to move from one text field to
  another.
• 6. Click OK to close the dialog and create the
  link.

ltlt back
20
Linking to Named Anchors
Named anchors are essentially bookmarks within a
page. You create the anchors at specific
locations on the page (usually subheadings), and
then you create links to the anchors that allow
users to jump to those places in the page.
ltlt back
21
To create a named anchor

• Position the insertion point at the location
  where you want to create an anchor. Often, this
  is at the beginning of the text of a subheading.
  
• On the Insert bar, make sure Common is selected
  and then click the Named Anchor button.
• Enter a name for the anchor and click OK.
• Note Anchor names are case-sensitive.

ltlt back
22
To create a link to the anchor

• With the cursor positioned where you want the
  link to appear, click the Hyperlink button on the
  Insert bar.
• In the Hyperlink dialog, enter the text for the
  link.
• Select the named anchor from the Link menu.
• Click OK.

Links to named anchors are prefaced with a pound
sign (). You can use this format to enter a link
to a named anchor directly into the Link field in
the Property Inspector (for example,
young_picasso). To create a link to a named
anchor on another page in your site, simply
include the file name before the pound sign
picasso.htmyoung_picasso. You can also use the
Point to File feature to link to a named anchor
click the Point to File button in the Property
Inspector and drag the mouse to the anchor icon
in the document.
ltlt back
23
(No Transcript)
24
Linking to E-mail Addresses

• You insert e-mail addresses in much the same way
  that you insert other types of links. To enter an
  address directly into the Links field in the
  Property Inspector, type mailto and then the
  complete e-mail address (for example,
  mailtoartmaster_at_brushstrokes.com). Then press
  Enter to create the link.
• You can also use the Email Link button on the
  Insert bar
• Position the cursor where you want the link.
• Click the Email Link button.
• Enter the text for the link, and then the e-mail
  address. You do not have to include mailto
  before the address.
• Click OK.

25
Formatting Text
26
Working with Graphics

• Inserting Graphics
• To insert a graphic, use the Images button on the
  Insert bar
• Position your cursor where you want the graphic
  to appear.
• On the Insert toolbar, click the Images button
  and select Image from the drop-down menu.
• Navigate to the image you want to insert and
  click OK.
• You can also apply image map to your images.

27
Inserting a Flash Movie

• Inserting a Flash movie in Dreamweaver is as
  simple as inserting a graphic
• 1. On the Insert bar, click the Media button and
  select Flash from the drop-down menu.
• The Select File dialog opens.
• 2. Navigate to the movie file and click OK.
• The Flash movie is placed in the document and
  appears as a gray box with a Flash icon in the
  middle. In order to view the Flash movie, you
  must either access it through the Property
  Inspector or view it in a browser.
• 3. To view the Flash movie using the Property
  Inspector, make sure the movie is selected and,
  in the Property Inspector, click the Play button.
  

28
Designing Page Layout

• Layout Using Tables
• Tables let you precisely control the position of
  elements in your web pages. For example, you may
  use the first column in a table for your
  navigation elements, the second column for text
  and the third column for notes, ads, or
  additional links. Frequently, the first row of a
  table contains the site's name and logo.
• To design a page using a table, you insert the
  table first, adjusting it as necessary to define
  the layout of the page. Then you insert text,
  images, and other elements into the individual
  table cells.

29
Inserting a Table

• On the Insert bar, click the Table button.
• 2. Enter the number of rows and columns you want
  in the table.
• 3. For the table width, you can enter a fixed
  width of a specific number of pixels, or a
  percent of the width of the page. If you use a
  fixed width, the table will not be resized when
  the browser window is resized.
• 4. If you want borders to appear around the
  cells, enter a border thickness.
• 5. Cell padding refers to the amount of space (in
  pixels) between the contents and the edges of the
  table cells cell spacing refers to the amount of
  space between the individual cells of the table.
  Enter the values you want into these fields.
• 6. Use the Header section to specify the location
  of the header contents in your table. Headers are
  used by screen readers so users with disabilities
  can keep track of table information.
• 7. Click OK.

30
(No Transcript)