Upload
tyrone-reynard-hampton
View
240
Download
0
Tags:
Embed Size (px)
Citation preview
Tutorial 1: Getting Started with Adobe Dreamweaver CS4
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 2
ObjectivesSession 1.1• Explore the structure and
history of the Internet and the 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
Session 1.2• Review the history of Web
design software• Start Dreamweaver and
select a workspace layout• Create a local site
definition• Explore the Dreamweaver
tool set• Investigate the
Dreamweaver Help features
• Exit Dreamweaver
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 3
Dreamweaver and the Internet (1.1)• What is Dreamweaver?
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 4
The Internet and the World Wide Web• ______________
– Global network of smaller computer networks that are all connected
• ______________– Series of computers that are connected to share
information and resources• ______________
– Computer that stores and distributes information to other computers in the network
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 5
The Internet and the World Wide Web (cont’d.)• _____________
– Set of technical specifications that defines a format for sharing information• _______________________________• ___________________________
• _________________________________– Subset of the Internet that has its own protocol
(HTTP) and its own document structure (HTML)
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 6
The Internet and the World Wide Web (cont’d.)• Web page
– _______________________________• Web site
– ____________________________________• __________________
– Node that provides a user the ability to cross-reference information within a document or a Web page and to move from one document or Web page to another
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 7
Web Servers and Clients• __________________
– Specialized server that stores/distributes information to computers that are connected to the Internet
• __________________– Computer an individual uses to access
information (via the Internet) that is stored on Web servers throughout the world
• _______________________________– Company that has direct access to the Internet
and sells that access • ________________
– Software that interprets and displays Web pages
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 8
Common Web Page Elements• ________________• ________________• ________________
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 9
Web Address• Called a ________________________________• Used to open Web pages• ________________
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 10
Hyperlinks• Can be _______________________________that
when clicked, take you to:– ____________________________________– ____________________________________– ____________________________________
• Give the Web its nonlinear nature
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 11
Content• Information presented in a Web page• __________________________________________
____________________________________________________________________________________
• Note: ______________________________________________________________________________________________________________________________
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 12
Evolving Web Design Tools (1.2)• Early days of Web design
• As the Web evolved
• Dreamweaver
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 13
Starting Dreamweaver and Selecting a Workspace Configuration• Choose one of eight preset workspace
______________________________________________________________________________________________________________________________
• Each configuration optimizes the panels display to help focus on working in a different way
• Dreamweaver opens in the same workspace configuration it was in when it was closed
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 14
The Designer Workspace Configuration• Dreamweaver in the Designer workspace configuration
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 15
Creating a Site Definition• Two main categories in a site definition
– ________________: original site stored on your computer
– ________________: the copy that Dreamweaver posts
• Dreamweaver stores the local Web site in same format as it will be posted on the Web
• Before working on a Web site, create the local site definition ______________________________________________________________________________________________________________________________
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 16
Configuring a Local Site Definition• Create local site definition in Site Definition dialog
box or enter the information manually on the Advanced tab
• Parts of a local site definition:
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 17
Creating a Local Site Definition• Site Definition dialog box
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 18
Creating a Local Site Definition• Advanced tab
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 19
Exploring the Dreamweaver Environment• _____________
– Manages local and remote site files and folders• ________________
– Main workspace for creating and editing Web pages
• ________________– Toolbar with buttons for examining/editing
attributes of any element currently selected on active page in Document window
• _____________– Used to create and insert objects (e.g., tables,
images, links)
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 20
Files Panel• __________________________________________
___________________________________• Transfer files to a remote site when you are ready to
post the site to the Web• Includes an integrated file browser that enables you
to browse files located outside of the site• ______________________
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 21
Files Panel• Files panel with the files list
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 22
Using the Files Panel• Web pages open in Dreamweaver
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 23
Document Window• __________________________________________
_______________• ______________________________________• _______________
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 24
Document Window: Split View• Home page in Split View
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 25
Document Window: Design View• Home page in Design View
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 26
Document Window: Code View• Home page in Code View
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 27
Document Window: Status Bar• _______________• _______________• _______________• _______________• _______________• _______________• _______________
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 28
Document Window: Status Bar Items• Status bar items
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 29
Property Inspector• __________________________________________
__________________________________________• __________________________________________
__________________________________________
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 30
Property Inspector• Property Inspector with HTML text attributes
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 31
Property Inspector• Property Inspector with HTML text link attributes
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 32
Property Inspector• Property Inspector with CSS attributes
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 33
Insert Panel• Insert panel categories
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 34
Insert Panel• Common category in the Insert panel
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 35
Getting Help in Dreamweaver• Dreamweaver Help command starts your Web
browser and opens the Adobe Dreamweaver Support Center – Help and Support window
• Dreamweaver help (web) link near upper-right corner of the page opens Adobe Dreamweaver CS4 online help
• Two ways to access information about Dreamweaver – _____________________________
• _____________________________________– __________
• __________________________________________________________________________
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 36
Getting Help in Dreamweaver• Adobe Dreamweaver CS4 online help
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 37
Getting Help in Dreamweaver• Context-sensitive help
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 38
Getting Help in Dreamweaver• Dreamweaver Help search
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 39
Exiting Dreamweaver• Close the home page
– On the index.html page tab, click the Close button• Exit Dreamweaver
– On the Application bar, click File, and then click Exit
• Dreamweaver prompts you to save unsaved Web pages