Dreamweaver MX

1
Tutorial 1 Introducing Dreamweaver MX
2
Introducing Dreamweaver MX

• In this tutorial, you will
• Explore the structure and history of the Internet
  and the World Wide Web
• Become familiar with the roles of Web servers and
  Web clients
• Learn the basic components of a Web page
• Open a Web page in a browser
• Use Hyperlinks

3
Introducing Dreamweaver MX

• In this Chapter, you will (cont)
• Review the history and design approaches of Web
  design software
• Start Dreamweaver and select a layout
• Create a Local Site Definition
• Explore the Dreamweaver tool set
• Investigate the Dreamweaver help features
• Exit Dreamweaver

4
Dreamweaver and the Internet

• The Dreamweaver software allows you to create and
  maintain Web sites.
• A network
• Is computers connected together with shared
  resources
• Allows information to be exchanged between
  computers
• Has a server that controls the information
  sharing
• The Internet is a global network containing many
  smaller interconnected networks

5
Dreamweaver and the Internet
The Internet as a series of interconnected
roadways
6
Dreamweaver and the Internet

• When connecting to the Internet, information is
  shared using a predefined format or set of
  technical specifications called a protocol.
• Simple Mail Transfer Protocol (SMTP) is the
  format used by all e-mail software which allows
  people with different e-mail services to
  communicate.
• The World Wide Web (WWW or Web) is a portion of
  the Internet with its own protocol.

7
Dreamweaver and the Internet

• The Web uses HTTP protocol and an HTML document
  structure.
• The Hypertext Transfer Protocol (HTTP) defines
  how to format Web pages for transfers on the
  Internet.
• The Hypertext Markup Language (HTML) defines how
  to format Web pages for display.

8
Dreamweaver and the Internet

• Web pages are a set of electronic information on
  the Web.
• A group of related and joined Web pages is a Web
  site.
• Hyperlinks provide the connections enabling the
  user to move from one Web page or Web site to
  another.

9
Dreamweaver and the Internet
An Illustration of the Web
10
Dreamweaver and the Internet

• One option for accessing the Internet and viewing
  Web sites is through an Internet Service Provider
  (ISP).
• Web servers store and distribute information
• Web clients are the computers used to access the
  information.
• Web browsers are the software used to view Web
  pages.
• Every Web page has unique address called a URL.

11
Dreamweaver and the Internet
Parts of a URL
12
Dreamweaver and the Internet
Finding the Course Technology Home Page
13
Dreamweaver and the Internet

• You may also want to view local Web pages not
  posted to the Web by typing the path name instead
  of the URL.
• The home page is the main page of a Web site.
• Information branches out from the home page to
  many different sites through hyperlinks.
• The status bar displays the URL of the hyperlink.

14
Dreamweaver and the Internet
Opening a local Web page (Catalyst)
15
Dreamweaver and the Internet

• The Home page consists of some or all of the
  following elements
• Hyperlinks for navigation, which can be graphics,
  text or buttons with hot spots
• Graphics for information and interest
• Logos for recognition
• Content to convey message

16
Evolving Web Design Tools

• The original Web pages consisted of text written
  directly into HTML code.
• The complexity and syntax of HTML eventually led
  to software packages that created HTML for the
  normal user.
• Dreamweaver was designed as an easy to use
  package for non programmers to design Web pages.

17
Evolving Web Design Tools

• There are two main types of Web page design
  software
• Page-centric design which concentrates on the
  pages and links them afterward and
• Site-centric design that requires designing the
  overall site before working on the individual
  pages.
• Dreamweaver is a site-centric design package
  which allows changes at the site level and is
  more comprehensive.

18
Starting Dreamweaver and selecting a Workspace
Layout Configuration

• Dreamweaver has three preset workspace
  configurations
• Dreamweaver MX Workspace one large integrated
  application window with docked panels
• HomeSite/Coder-Style looks like the layout of
  HomeSite and Cold Fusion for people familiar with
  those products
• Dreamweaver 4 This layout reverts back to the
  previous Dreamweaver layout with separate windows
  and no integration to one large application
  window.

19
Starting Dreamweaver and selecting a Workspace
Layout Configuration

• The workspace option can be set using the
  Preferences dialog box under Edit on the main
  menu.
• Configuration changes can be removed by changing
  out of the MX workspace option and then back.
• In the MX configuration, Panels (or related
  commands and controls) are docked on the right
  hand side.

20
Starting Dreamweaver and selecting a Workspace
Layout Configuration
The Default Dreamweaver Workspace layout
21
Creating a Site Definition

• You must set up a site definition for
  Dreamweaver, telling it where to locate the local
  copy (where changes and corrections are made) and
  the remote published version (where others can
  view the Website).
• The site definition also defines parameters on
  how the site is set up.

22
Creating a Site Definition

• The Local site definition tells Dreamweaver where
  the local root folder is located.
• Dreamweaver has a Site Definition Wizard on the
  basic tab in the New Site dialog box that will
  work you through the process of creating the
  local site definition.
• You can also use the Advanced tab and input the
  information directly.

23
Creating a Site Definition
Advanced tab in the Site Definition Dialog Box
24
Creating a Site Definition

• The parts of a Local Site Definition that must be
  entered are
• Site Name an internal name
• Local Root Folder the location of all the files
  to create the local version of the Website
• Refresh Local File List Automatically If
  checked, Dreamweaver automatically updates the
  file list when necessary.
• HTTP Address the Web site URL
• Cache Enable Cache If checked allows
  Dreamweaver to use a cache to speed up processing

25
Exploring the Dreamweaver Environment

• To manage local and remote site files, you will
  use the Site panel in the files panel group.
  Once you open the root folder for the web site
  you can
• Find a list of the folders and files in the local
  site an internal name
• Create new Web pages
• Perform any editing function on the files/folders
  such as move, copy, delete, etc.
• Transfer files to the remote site
• Browse files outside of your site

26
Exploring the Dreamweaver Environment
Site panel with site file list
27
Exploring the Dreamweaver Environment

• You can view your Web site using the site map.
• The site map is a hierarchy chart showing the
  relationships between the pages in the site.
• The site map can be viewed by selecting Map view
  from the View menu.
• You can also view both the site map and the file
  list at the same time.
• Double-clicking a file name opens that Web page
  in its own window for viewing and editing.

28
Exploring the Dreamweaver Environment
Site panel with Site Map
29
Exploring the Dreamweaver Environment
Site Panel with File List and Site Map
30
Exploring the Dreamweaver Environment
Web Pages Opened from Site Panel
31
Exploring the Dreamweaver Environment

• Each Web page opened is in its own Document
  window.
• The Web page can be manipulated using the
  Document toolbar.
• There are three different ways to display the
  Document window Design view, Code view, or Code
  and Design view.

32
Exploring the Dreamweaver Environment
Home Page Document Window in Design View
33
Exploring the Dreamweaver Environment
Home Page in Code View with HTML code showing
34
Exploring the Dreamweaver Environment
Home Page in Code and Design View where both
views show
35
Exploring the Dreamweaver Environment

• At the bottom of the Document window is the
  status bar showing
• The Tag selector which displays all HTML tags
  around the current selection in the work area.
• The Window size menu which shows the size of the
  current window in pixels.
• The document size/estimated download time which
  shows the size of the current page and the
  approximate time to download it over a 28Kbps
  modem.

36
Exploring the Dreamweaver Environment
Status Bar items
37
Exploring the Dreamweaver Environment

• The Properties inspector is a toolbar with
  buttons that allow you to examine or edit the
  attributes of any selected element.
• A page element is any object or text set open the
  page.
• For selected text, the inspector has two modes,
  HTML mode and CSS mode.

38
Exploring the Dreamweaver Environment
Properties Inspector Attributes for selected
text
39
Exploring the Dreamweaver Environment
Properties Inspector - attributes for selected
link text
40
Exploring the Dreamweaver Environment
Properties Inspector attributes for selected
image
41
Exploring the Dreamweaver Environment

• Anything created or inserted into a page is an
  object.
• The Insert bar is used to create a new object.
• The Insert bar is broken down into tabs
  reflecting categories of objects.

42
Exploring the Dreamweaver Environment
Insert bar categories
43
Exploring the Dreamweaver Environment
The Common Tab on the Insert Bar
44
Getting Help in Dreamweaver

• There are several ways to get help when using
  Dreamweaver.
• The Using Dreamweaver Help command includes
  information about all of the features available.
  You can get information using the Contents, Index
  or Search Tab.
• Dreamweaver also has a Welcome tour and
  Tutorials.
• Further support can be gotten from the Web site.

45
Getting Help in Dreamweaver
Contents tab in Help
46
Getting Help in Dreamweaver
Index tab in Help
47
Getting Help in Dreamweaver
Search tab in Help
48
Exiting Dreamweaver

• To Exit the program
• Use the Exit command on the File menu. This
  exits the program and closes any open windows.
• Use the Close command or Close button on any open
  windows. This will also prompt you to save any
  unsaved work before closing.

49
Tutorial Summary

• You should now be able to
• Understand the basic parts of Websites on the
  Internet and how to get to them
• Know the basics about browsers and opening Web
  pages
• Open Dreamweaver
• Understand the basics about Dreamweaver layout
  and tools
• Define, view and edit a web page
• Get help in Dreamweaver