Introduction to Dreamweaver How to Use Dreamweavers Editing Features

1
Introduction to DreamweaverHow to Use
Dreamweavers Editing Features

• Dreamweaver 4.0
• Guthrie Soe

2
Objectives

• In this chapter you will
• Learn about the evolution of Web authoring tools
• Learn about the capabilities of Dreamweaver and
  how they can assist you in Web development
• Refresh your knowledge of HTML
• Become familiar with the primary editing windows
  where you can access the Objects panel, the
  Property inspector, and the Launcher, and see
  different views (Design, Code, and shared Code
  and Design views) of HTML documents in Dreamweaver

3
Objectives

• In this chapter you will
• Manipulate the attributes of different types of
  content (text, images, tables) using the Property
  inspector
• Develop and preview a simple Web page with varied
  text styles
• Insert hyperlinks and links to electronic mail
• Insert and resize images and tables

4
Evolution of Web Development Tools

• As Web content evolved, more advanced sites
  incorporated graphics, forms, layers, and
  JavaScript to incorporate active elements
• JavaScript is an object-oriented programming
  language that is the default for Netscape
  Navigator and Internet Explorer browsers
• The first tools were text editors in which
  developers typed HTML tags before uploading them
  to the Web or viewing them in Web browsers

5
Macromedia Dreamweaver and Fireworks

• Macromedia Dreamweaver is a WYSIWYG HTML and
  JavaScript code generator
• Instead of spending hours writing HTML tags to
  code a complex table, the developer can build the
  table, resize it, and preview it in a Web browser
• Dreamweaver offers site management features that
  allow you to manage site files, generate a site
  map, and transmit files or an entire site to the
  Internet using File Transmission Protocol (FTP),
  a transmission protocol used to transfer files
  from local computers to the Internet

6
Macromedia Dreamweaver and Fireworks

• Dreamweaver is a comprehensive Web authoring tool
  that
• Generates HTML and JavaScript source code while
  providing the user with a WYSIWYG workspace
• Provides error-checking capabilities to ensure
  that simple mistakes do not occur
• Allows the user to perform site management
  functions such as shared development logs, site
  maps, and FTP
• Generates robust code that you can view in both
  Netscape Navigator and Internet Explorer, and
  that can be compatible with 3.0 level browsers

7
Macromedia Dreamweaver and Fireworks

• Offers a comprehensive development environment in
  that it integrates with other Web development
  tools such as
• Macromedia Fireworks for development of Web
  graphics. They now offer Visual Roundtrip
  Editing, which lets you launch, edit, and
  optimize graphics files, and share file libraries
  between the two applications
• Macromedia Flash for creating Web animation.
  Dreamweaver 4.0 generates Flash rollover text
  hyperlinks and animated, rollover Flash buttons
  from a variety of preset button images and styles
• Macromedia Dreamweaver UltraDev for integrated
  database applications
• Macromedia Aria for Web site management techniques

8
A Brief Overview of HTML

• HTML is a very simple language for formatting Web
  pages
• Some examples of other intuitive and commonly
  used tags are
• to begin italicized text, to end
  italicized text
• to center text on the page, to
  stop centering text
• to indicate the beginning of a header 1 (a
  top-level header), to return to normal text
• to indicate the beginning of a paragraph,
  to end the paragraph

9
A Brief Overview of HTML

• There are two types of hyperlinks, absolute and
  relative
• Absolute hyperlinks give the entire address of
  the linked Web site, while relative hyperlinks
  only give a portion of the address relative to
  the page with the hyperlink

10
A Brief Overview of HTML

• The tag is called the anchor
• It contains the address of the hyperlink in
  brackets
• You can create a relative hyperlink if you want
  to link to a file located on the same Web site as
  the file you are editing
• You can nest and combine many HTML tags to create
  beautifully laid-out Web pages
• HTML is a very forgiving language in that if you
  do not nest tags logically, your code is still
  likely to load in a Web browser, though perhaps
  not as you expect

11
A Brief Overview of HTML
12
A Brief Overview of HTML
13
A Brief Overview of HTML
14
Dreamweavers Primary Editing Windows

• Dreamweaver provides a WYSIWYG workspace, called
  Design View, for building a Web site
• Design View enables you to create a Web page that
  looks, for the most part, identical to the page
  that later appears in a browser
• Common objects panel, the Property inspector, and
  the Launcher are the primary tools you use to
  create basic Web pages

15
Dreamweavers Primary Editing Windows

• The Property inspector displays the attributes
  that you can set for text formatting, which are
  similar to those found in word-processing and
  desktop publishing applications
• The Objects panel allows you to insert objects,
  such as images, tables, rollovers, and e-mail
  links in a Web page
• The Launcher provides access to panels, the site
  map, and a view of the HTML code
• The panels on the right provide quick access to a
  number of important workflow and productivity
  tools, such as assets (images Shockwave Flash
  movies, libraries), HTML and Cascading Style
  Sheet (CSS) styles, and views of layers and frames

16
Dreamweavers Primary Editing Windows
17
The Workspace

• The Objects panel and the Property inspector open
  by default when you start Dreamweaver
• You can open any of these windows or panels by
  clicking Window on the menu bar
• The Objects panel, Property inspector, and
  Launcher are the first three commands on the
  Window menu

18
The Workspace

• At the bottom of the work area, the status bar
  displays the window size and the estimated
  download time, and the mini-launcher duplicates
  the Launcher functions

19
The Property Inspector

• The Property inspector for text is the primary
  tool for formatting text and managing hyperlinks
  in Dreamweaver
• You can relocate the Property inspector to
  anywhere on the screen you wish

20
The Property Inspector
21
The Objects Panel

• The Objects panel is a window containing a long
  menu of icons
• Notice the list arrow, labeled Common, at the top
  of the Objects panel

22
The Objects Panel
23
The Objects Panel
24
The Launcher

• The Launcher gives access to panels and views
  that can speed workflow and productivity
• Using the Launcher, you can open site maps,
  assets, HTML styles, CSS styles, behaviors, the
  page editing history, and the Code inspector for
  your Web page
• The last option on the Launcher menu, Code
  Inspector, allows you to see the HTML code being
  generated by Dreamweaver

25
The Launcher
26
The Launcher
27
Text and Page Properties

• Page properties are the elements defined in the
  header and body tags of the HTML code that change
  the look of the document, even though they do not
  actually display text or code in the browser
  window
• Specifically, you can embed a page title in the
  header of the document
• You can also use the Page Properties dialog box
  to modify an existing title and to select color
  options for text, and active and visited links

28
Text and Page Properties
29
Hexadecimal Color Codes

• You may remember coding your first Web page and
  testing different hexadecimal color codes
• Hexadecimal color codes are important when using
  the Web safe color palette
• The Web safe color palette contains 216
  hexadecimal colors that display the same in both
  Netscape Navigator and Internet Explorer
• A hexadecimal code designates a color on a Web
  page
• A hexadecimal number is characterized by the
  integers 0, 1, 2, 3, 4, 5, 6, 7, 8, and 9, and
  the letters A, B, C, D, E, and F

30
Selecting a Color Scheme

• Dreamweaver provides the user with several set
  color schemes that enable you to select a
  predetermined set of colors for background, text,
  and links for your entire page

31
Saving and Previewing the Page

• To save your Dreamweaver files, click File on the
  menu bar, then click Save or SaveAs, just as you
  do in most desktop applications
• You should save your file as an HTM or HTML file
  type, though the list includes several other types

32
Creating a Store Front Web Page

• To create this Web site, you must first enter
  text in the blank workspace in Dreamweaver, then
  use the Property inspector to format it
• Specifically, you make the text stand out and
  look appealing by adding different header styles,
  fonts, and colors to the text, and by centering
  it on the page
• Figure 1-15 shows how your page should look once
  you complete the steps outlined on pages 23 and
  24 of the textbook

33
Creating a Store Front Web Page
34
Creating a Store Front Web Page
35
Creating Hyperlinks

• Hyperlinks make the Web fun and easy to navigate
• To implement hyperlinks in Dreamweaver, you type
  the address in the Link text box, in the Property
  inspector
• Every file on the Internet has a Universal
  Resource Locator (URL), a unique address
  consisting of a protocol, domain name, and
  extension

36
Creating Hyperlinks
37
Creating Hyperlinks

• To create a link to electronic mail, you can
  insert the command mailto emailname_at_emailaddress.
  com in the Hyperlink address text box in the
  Property inspector
• Dreamweaver also has an Insert E-mail Link icon
  in the Objects panel that prompts you for the
  e-mail text and address and creates the code for
  you

38
Creating Hyperlinks
39
Adding Hyperlinks to the Storefront Page

• At the very least, a Web storefront should
  include contact information and an e-mail address
  so that potential or existing customers can make
  inquiries electronically
• You should select hyperlinks to external sites
  with care, since a business does not want to send
  its customers to its competitors
• To add hyperlinks to the LaBonne Cuisine Web
  site, follow the steps listed on pages 27 and 28
  of the textbook

40
Adding Hyperlinks to the Storefront Page
41
Using the Objects Panel to Insert Images, Tables,
and Rules

• This section introduces three of the options on
  the Common Objects panel
• These options enable you to insert the types of
  images, tables, horizontal rules or lines
• After you insert each element on the page, a
  Property inspector appears so you can change the
  elements attributes

42
Using the Objects Panel to Insert Images, Tables,
and Rules

• If you choose to insert a horizontal rule across
  the center of a page, you can modify attributes
  such as its width and thickness
• Dreamweaver generates the code necessary to
  implement these elements
• The Design view WYSIWYG workspace is especially
  useful when you work with images and tables

43
Inserting Images

• To insert images on a page, you can use the
  Insert Image icon on the Common Objects panel
• You can also insert an image by selecting image
  from the Insert menu or by using the shortcut key
  sequence, CtrlAltI
• Each option allows you to browse your local drive
  and select an image via the Select Image Source
  dialog box

44
Inserting Images
45
Inserting Images

• Using a relative address usually makes more sense
• In the index.html file, you could use this
  command to insert the cat.gif image
• Using the Insert Image option generates code that
  does this for you
• The image Property inspector displays the image
  size in kilobytes (KB) and in terms of width and
  height

46
Inserting Images

• Use the blank text box for adding a name
  identifier to the image, useful if you create an
  image map

47
Inserting Images
48
Inserting Images
49
Creating Simple Tables

• To set up the Standard view, click View on the
  menu bar, point to Table View, then click
  Standard View or use the keyboard shortcut,
  CtrlShiftF6
• To insert tables on a Web page in the Standard
  view, use the Insert Table icon on the Common
  Objects panel
• Each of these options allows you to create a
  table using the Insert Table dialog box

50
Creating Simple Tables

• In this dialog box, you enter the number of rows
  and columns that your table will contain

51
Creating Simple Tables

• Figure 1-25 shows a simple two-by-two table and
  the Property inspector that appears when you
  select the entire table

52
Creating Simple Tables
53
Horizontal Rules

• To insert a horizontal rule or line on a Web
  page, you can use the Insert Horizontal Rule icon
  on the Common Objects panel
• You can also insert a rule using the Horizontal
  Rule command on the Insert menu
• A horizontal rule is inserted automatically on
  the Web page at the insertion point
• To change the attributes of the rule, click to
  select it and examine the rule Property inspector

54
Working with Images and Tables

• To align everything properly, you need to insert
  graphics and text in a table with a border
  thickness equal to 0
• Your completed page should look like Figure 1-27
  if you refer to the procedures shown on pages 34
  and 35 of the textbook

55
Summary

• Dreamweaver is a WYSIWYG authoring tool that
  generates HTML and JavaScript code
• The three windows commonly used to develop a Web
  site are the Property inspector, the Common
  Objects panel, and the Launcher
• You use the Property inspector for text for basic
  text manipulation such as changing fonts, sizes,
  justification, and text color
• The Objects panel inserts elements on a Web page
• Using the Common Objects panel, you can insert
  images, rollovers, tables, and horizontal rules

56
Summary

• The Launcher gives you easy access to source
  code, Web site assets, styles sheets, and site
  management features
• In Dreamweaver you can choose a predefined color
  scheme for a page
• To change a page title and page attributes, use
  the Page Properties dialog box, which is
  available from the Modify menu
• Dreamweaver 4.0 provides easy access to Code and
  Design Views of the Web document as well as a
  split-screen shared Code and Design Views