Introduction to Dreamweaver MX

1
Introduction to Dreamweaver MX
1

• Macromedia Dreamweaver MX

2
In this chapter, you will
1

• Learn about the evolution of Web authoring tools
• Learn about the capabilities of Dreamweaver MX
  and how they can assist you in Web development
• Refresh your knowledge of HTML
• Learn about the Dreamweaver MX workspace and how
  to create and save Web pages
• Learn to use text and page properties to compose
  a Web page
• Insert hyperlinks and links to electronic mail
• Learn to use the Common tab of the Insert bar to
  insert images, tables, rules, and rollovers

3
Introduction to Dreamweaver MX
1

• Allows you to develop professional Web sites
  quickly and easily
• One environment for developing graphics, site
  layout, content, and interactivity

4
Evolution of Web Development Tools
1

• In the past developers used word processors to
  create HTML
• WYSIWYG editors emerged to make text
  manipulation, the use of color, and layout much
  more visual
• As Web content evolved, graphics, forms, layers,
  and JavaScript were incorporated
• Dreamweaver is the next step in this evolution,
  providing an integrated tool for Web site
  development and management

5
Dreamweaver MX Overview
1

• Web developers need tools that do more than just
  build Web pages
• They need tools to
• Generate code
• Troubleshoot errors
• Offer Web site management utilities

6
Generating Code
1

• Dreamweaver MX is a comprehensive Web authoring
  tool that can
• Generate HTML and JavaScript in a WYSIWYG
  environment that both Netscape Navigator and
  Internet Explorer can interpret
• Provide error checking capabilities
• Allow the user to perform site management
  functions including using FTP
• Integrate with other Web development tools such
  as Fireworks MX and Flash MX

7
Working with Fireworks MX
1

• Fireworks MX is a graphics tool that complements
  Dreamweaver MX
• Allows you to generate JavaScript to create
  rollover effects and other behaviors
• Is specifically designed to optimize Web graphics

8
Brief Overview of HTML
1

• Familiarity with HTML helps you to understand how
  Dreamweaver MX works
• HTML is a simple tag based language
• Most tags are container tags
• Segment of text will be contained between two
  tags, i.e. lttaggt text lt/taggt
• / before second tag name indicates it is a
  closing tag

9
Brief Overview of HTML
1

• Tag examples
• ltbgt - bolding
• ltemgt - italicized
• ltcentergt - center text
• lth1gt - beginning of a level 1 heading
• ltpgt - paragraph

10
Structure of an HTML Document
1
11
Inserting Images
1

• To insert an image, use either of the these tag
  formats
• ltimg srcfilename.gifgt
• ltimg srcdirectory/filename.gifgt
• Only GIF and JPG file formats can be used

12
Inserting Hyperlinks
1

• There are two types of hyperlinks
• Absolute gives the entire address of the site to
  be linked to
• Formatlta hrefhttp//www.domain.ext/filename.ht
  mgthyperlink textlt/agt
• Relative gives a portion of the address relative
  to the page that is currently being displayed in
  the browser window
• Formatlta hreffilename.htmgthyperlink
  textlt/agt

13
Viewing a Simple Web Page
1
14
Dreamweaver MX Workspace
1

• Provides a WYSIWYG workspace, called the Design
  View, for building a Web site

15
Dreamweaver MX Workspace
1

• Features of the workspace include
• Menu bar contains drop-down menus to perform file
  commands and control site features
• Insert bar contains 12 panels that allow you to
  add objects to the Web page
• Document toolbar lets you name document and view
  it in design view, code view, or both
• Document window is where you can specify Web site
  content
• Property inspector displays attributes you can
  set for Web page objects
• Tag selector lets you select precisely the tag
  you want to edit
• Site panel lets you manage the files and assets
  related to the Web site

16
Dreamweaver MX Workspace
1

• Most of the time you will work in the Standard
  view
• In this view you insert elements via dialog boxes
• With the Layout view you can draw tables on the
  document
• Chapter 4 reviews the Layout view

17
Dreamweaver MX Workspace
1

• The Dreamweaver MX menu options include
• File commands to manage Web page files
• Edit commands to cut, paste, select, and search
  text
• View commands to help you view and manage in
  Design view
• Insert commands to insert layers, forms,
  tables, rollovers, and images
• Modify commands that allow you to set
  properties of a Web page

18
Dreamweaver MX Workspace
1

• Text commands to change text attributes
• Commands commands to record command sequences
  for batch processing
• Site commands to manage your site contents
• Window commands to select various windows and
  panels
• Help command to access the Dreamweaver MX help

19
Opening, Previewing, Saving
1

• Create a new document by selecting File, New
• Save a file by selecting File, Save or Save As

20
Opening, Previewing, Saving
1

• To see how your Web pages will look in a
  particular browser, use the File, Preview in
  Browser command

21
Design and Code Views
1

• Design view shows the WYSIWYG view
• Code view shows the HTML source code
• Click on the Show Code and Design view to see
  both views at once

22
Property Inspector
1

• The Property inspector is the primary tool for
  formatting and controlling attributes of
  Dreamweaver MX objects

23
1
24
Property Inspector
1
25
Insert Bar Common Tab
1

• Common tab of the Insert bar is the default when
  you open Dreamweaver MX

26
Panel Groups
1

• Panel groups can be used to control design, code,
  and file aspects
• The following panel groups are provided
• Design contains CSS styles, HTML styles, and
  behaviors
• Code contains Tag inspector, Snippets, and
  Reference panels
• Application contains Database, Bindings, Server
  behaviors, and Components panels
• Files contains Site and Assets panels
• Answers contains help resources

27
Text and Page Properties
1

• Adding and editing text in Dreamweaver MX is much
  like using a word processor
• To alter text, you click and drag to select it
• Change text format by using the Property
  inspector

28
Modifying Page Properties
1

• You can modify page properties using the Page
  properties dialog box
• Contains some of the elements defined in the head
  and body tags of the HTML code
• Page properties affects the entire document

29
Modifying Page Properties
1
30
Using Hexadecimal Color Codes
1

• Dreamweaver MX allows you to select colors from a
  palette instead of using hexadecimal color codes
• Hexadecimal color codes are important if you wish
  to match colors on your Web site
• Hexadecimal color codes are also important when
  you wish to use Web safe colors
• Web safe color palette contains 216 hexadecimal
  colors that display the same in both Internet
  Explorer and Netscape Navigator

31
Selecting a Color Scheme
1

• Using the Property inspector you can easily
  change the color scheme of text objects on a page
• For a large Web site you can also change the
  color scheme for all the pages it contains

32
Creating Hyperlinks
1

• To implement hyperlinks in Dreamweaver MX, type
  the link address in the Link text box in the
  Property inspector
• Components of a URL (Uniform Resource Locator)

33
How Site Organization Affects Hyperlink Usage
1

• When you create a large Web site containing many
  files, you must create a directory structure for
  the site so that you can find and maintain files
  easily

34
Other Hyperlinks
1

• To create a link to electronic mail, type
  mailtousername_at_domain in the Link text box of
  the Property inspector

35
Point-to-file Method for Creating Hyperlinks
1
36
Using the Insert Bar
1

• After you insert each element on the page, the
  Property inspector can be used to change the
  elements attributes
• The Common Tab of the Insert Bar allows you to
  insert images, tables, horizontal rules, and
  create rollovers

37
Inserting Images
1

• To insert images on a page
• Use the Image button on the Common Tab
• Or select Image from the Insert menu
• Or use CtrlAltI
• Once inserted you can resize the image by holding
  the mouse button down on the squares and dragging
  it to the desired size

38
Inserting Images
1
39
Property Inspector for Images
1
40
Property Inspector for Images
1
41
Image Placeholder
1

• Another feature of Dreamweaver MX is inserting an
  image placeholder
• An image placeholder lets you set aside space in
  your page layout, where you can later add an
  image

42
Creating Simple Tables
1

• To insert tables on a Web page in Standard view,
  use the Insert Table button on the Common or
  Layout tab on the Insert bar

43
Resizing Tables
1

• Resizing a table is similar to resizing images
  click on the handles to resize the table

44
Property Inspector Rows, Columns, Cells
1

• The Property inspector for a table is modified if
  you select a row, column, or single cell

45
Using Horizontal Rules
1
46
Creating Rollovers
1

• Rollovers are images or text that change when the
  mouse crosses over the rollover image
• Comprised of two images, controlled with
  JavaScript code that call a hidden image when the
  mouse crosses over it
• Dreamweaver MX assists you in creating rollovers
  by allowing you to select the rollover images and
  automatically generating the necessary JavaScript
  code

47
Creating Rollovers
1
48
Summary
1

• Dreamweaver MX is a WYSIWYG authoring tool that
  generates HTML and JavaScript code
• The panels commonly used to develop a Web site
  are the Property inspector and Insert bar
• The Property inspector is used for basic text
  manipulation
• The Insert bar is used to insert various elements
  into a Web site
• Using the Common tab in the Insert bar you can
  insert images, rollovers, tables, and horizontal
  rules