Download DWCS5 Tutorial 01

Tutorial 1
Getting Started with
Adobe Dreamweaver CS5
Objectives
• Session 1.1
– Explore the structure and history of the Internet
and the Web
– Become familiar with the role of Web servers and
Web clients
– Learn the basic components of a Web page
– Review the history of Web design software
– Open a Web page in a browser
New Perspectives on Adobe Dreamweaver CS5
2
Objectives
• Session 1.2
– Start Dreamweaver and select a workspace layout
– Create a local site definition
– Explore the Dreamweaver tool set
– Investigate the Dreamweaver Help features
– Exit Dreamweaver
New Perspectives on Adobe Dreamweaver CS5
3
Session 1.1 Visual Overview
Illustration of the World Wide Web
New Perspectives on Adobe Dreamweaver CS5
4
Dreamweaver and the Internet
• The Internet and the World Wide Web
– Internet
• Global network of millions of small computer
networks that are all connected
– Network
• A series of connected computers that share
information and resources
– Server
• A computer that stores and distributes
information to other computers in the network
New Perspectives on Adobe Dreamweaver CS5
5
Dreamweaver and the Internet
– Protocol
• A set of technical specifications that defines a
format for sharing information
–Simple Mail Transfer Protocol (SMTP)
–File Transfer Protocol (FTP)
– World Wide Web (WWW)
• Developed in 1989 by Timothy Berners-Lee and
his team of scientists at CERN
• Designed to help scientists locate and share
data more easily
New Perspectives on Adobe Dreamweaver CS5
6
Dreamweaver and the Internet
– The WWW is a subset of the Internet with its own:
• Protocol – HTTP (Hypertext Transfer Protocol)
–Controls transfer of Web pages over the
Internet
• Document structure – HTML (Hypertext
Markup Language)
–Provides instructions on how to format Web
pages for display
New Perspectives on Adobe Dreamweaver CS5
7
Dreamweaver and the Internet
– Web Page
• An electronic document of information on the
Web
– Web Site
• A group of interconnected Web pages
– Hyperlink
• Node that provides a user the ability to crossreference information within a document and
to move from one document or Web page to
another
New Perspectives on Adobe Dreamweaver CS5
8
Dreamweaver and the Internet
New Perspectives on Adobe Dreamweaver CS5
9
Dreamweaver and the Internet
• Web Servers and Clients
– Web Server
• Specialized computer that stores and
distributes information to computers that are
connected to the Internet
– Web Client
• Computer used by an individual to access
information via the Internet
–Ex: A home computer with Internet access
New Perspectives on Adobe Dreamweaver CS5
10
Dreamweaver and the Internet
– Internet Service Provider (ISP)
• Company that has direct access to the Internet
and sells access to smaller entities
– Web Browser
• Software that interprets and displays Web
pages
New Perspectives on Adobe Dreamweaver CS5
11
Dreamweaver and the Internet
• Common Web Elements
– Web Address
– Hyperlinks
– Content
• Encryption (HTTPS protocol)
– Process of encoding and decoding data so that
only the sender and/or receiver can read it
– Important for information such as social security
or credit card numbers
New Perspectives on Adobe Dreamweaver CS5
12
Dreamweaver and the Internet
• Web Address
– Uniform Resource Locator
• A unique address for every Web page
• Protocol
–First part of URL
–HTTP or HTTPS followed by ://
New Perspectives on Adobe Dreamweaver CS5
13
Dreamweaver and the Internet
• Machine Name
–Second part of URL
–Series of characters that the server
administrator assigns to the Web server
–Often is www but can be any word, phrase,
or acronym
–Can be omitted entirely
New Perspectives on Adobe Dreamweaver CS5
14
Dreamweaver and the Internet
• Domain Name
– Third part of URL
– Identifies a Web site
– Chosen by the site owner
– Combined with a top-level domain
.com
.biz
.org .net
.edu .gov
– The folder name, file name, and extension
follow the domain name
New Perspectives on Adobe Dreamweaver CS5
15
Dreamweaver and the Internet
New Perspectives on Adobe Dreamweaver CS5
16
Dreamweaver and the Internet
• Hyperlinks
– Can be text, graphics, or buttons
– Provide navigation to a related section of the
same Web page, another Web page in the same
Web site, or a completely new Web site
• Content
– Information presented in a Web page
– Contains text, graphics, and perhaps multimedia
elements
New Perspectives on Adobe Dreamweaver CS5
17
Session 1.2 Visual Overview
Designer Workspace Configuration
New Perspectives on Adobe Dreamweaver CS5
18
Evolving Web Design Tools
• Early Days
– Web pages contained only text and were created
by typing HTML code into text editor programs
such as Notepad or Simple Text
– The more graphically complex Web pages became,
the more hand coding became impractical for
many people
• WYSIWYG
– People who were not programmers could not use
HTML to design Web pages
New Perspectives on Adobe Dreamweaver CS5
19
Evolving Web Design Tools
– “What You See Is What You Get” software
packages became popular
– WYSIWYG software programs automatically write
the HTML code
– WYSIWYG acronym is not used much now
• Dreamweaver is one of the most widely used site
development and management tools available today
– Knowledge of HTML is not required
– Familiarity with HTML can be helpful for
troubleshooting purposes
New Perspectives on Adobe Dreamweaver CS5
20
Starting Dreamweaver and
Selecting a Workspace Configuration
• Dreamweaver contains eight preset workspace
configurations
– App Developer
– Coder Plus
– App Developer Plus
– *Designer
– Classic
– Compact
– Coder
– Dual Screen
*The Designer configuration will be used in class
• Dreamweaver opens in the same configuration it was
in when it closed
New Perspectives on Adobe Dreamweaver CS5
21
Starting Dreamweaver and
Selecting a Workspace Configuration
• Basic Elements of Designer Workspace Configuration
– Application bar
• Provides a set of menus that gives access to all
tools and features available in Dreamweaver
– Panel Groups
• Each panel contains related commands,
controls, and information about working with
Dreamweaver
New Perspectives on Adobe Dreamweaver CS5
22
Setting Up a New Site
• Local Version
– Original Web site stored on a local computer
• Remote Version
– Copy of the Web site that Dreamweaver posts on
a server
• Site Definition
– Tells Dreamweaver where to find the local and
remote files for the Web site
New Perspectives on Adobe Dreamweaver CS5
23
Setting Up a New Site
– Site definition main categories
• Local information
• Remote information
• Configuring a Local Site Definition
– Information stored in a local computer that tells
Dreamweaver where the local site files are located
– Local site folder
• Location where all files used by the local
version of the Web site are stored
New Perspectives on Adobe Dreamweaver CS5
24
Setting Up a New Site
– Site name
• An internal name given to the Web site for your
reference
• Appears on the Site menu and in the Files panel
• Not used outside Dreamweaver
– Default images folder
• Folder in which site’s graphic images are stored
– Links relative to
• Sets the path of the hyperlinks
New Perspectives on Adobe Dreamweaver CS5
25
Setting Up a New Site
– HTTP address
• URL of the Web site
– Case-sensitive links
• Option that makes all hyperlinks case sensitive
– Cache
• Option that allows Dreamweaver to use a
temporary local storage space (cache) to speed
up the processing time needed to update links
New Perspectives on Adobe Dreamweaver CS5
26
Setting Up a New Site
New Perspectives on Adobe Dreamweaver CS5
27
Exploring the Dreamweaver
Environment
• Files Panel
– Located in the Files panel group
– Used to manage local and remote site files and
folders
– Includes an integrated file browser
• Can browse files located outside the site
• Document Window
– Main workspace used to create and edit Web
pages
New Perspectives on Adobe Dreamweaver CS5
28
Exploring the Dreamweaver
Environment
– Document toolbar located below page tabs
• Includes buttons for the most commonly used
commands in the Document window
– Views
• Design view
–Displays page as it will appear in a browser
–All HTML code is hidden
• Code view
–Displays underlying HTML and CSS code
New Perspectives on Adobe Dreamweaver CS5
29
Exploring the Dreamweaver
Environment
• Split view
–Divides Document window into two vertical
panes
–Left pane shows underlying code
–Right pane shows how page will appear in
the browser
New Perspectives on Adobe Dreamweaver CS5
30
Exploring the Dreamweaver
Environment
New Perspectives on Adobe Dreamweaver CS5
31
Exploring the Dreamweaver
Environment
– Status Bar
• Displays details about the content in the Document
window
• Options on Status bar include:
Tag selector
Select tool
Hand tool
Zoom tool
Set magnification
Window size
Document size& Download time
• Property Inspector
– Toolbar with buttons
– Used to examine or edit the attributes of any element
that is currently selected on the active page
New Perspectives on Adobe Dreamweaver CS5
32
Exploring the Dreamweaver
Environment
– Page element
• An object or text
New Perspectives on Adobe Dreamweaver CS5
33
Exploring the Dreamweaver
Environment
• Insert Panel
– Used to create and insert objects
– An object is anything inserted into or created in a
page
New Perspectives on Adobe Dreamweaver CS5
34
Getting Help in Dreamweaver
• Dreamweaver Help Command
– Starts browser and opens Adobe Community
Help – Adobe Dreamweaver CS5 window
– Dreamweaver help (Web) link opens Adobe
Dreamweaver CS5 online help
New Perspectives on Adobe Dreamweaver CS5
35
Getting Help in Dreamweaver
New Perspectives on Adobe Dreamweaver CS5
36
Exiting Dreamweaver
• Procedure
– Close the Web site
– Exit Dreamweaver program
• Exit command on File menu exits Dreamweaver
and closes all open windows
New Perspectives on Adobe Dreamweaver CS5
37