tutorial 1: getting started with adobe dreamweaver cs4
TRANSCRIPT
![Page 1: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/1.jpg)
Tutorial 1: Getting Started with Adobe Dreamweaver CS4
![Page 2: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/2.jpg)
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
![Page 3: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/3.jpg)
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 3
Dreamweaver and the Internet (1.1)• What is Dreamweaver?
![Page 4: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/4.jpg)
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
![Page 5: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/5.jpg)
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)
![Page 6: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/6.jpg)
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
![Page 7: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/7.jpg)
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
![Page 8: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/8.jpg)
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 8
Common Web Page Elements• ________________• ________________• ________________
![Page 9: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/9.jpg)
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 9
Web Address• Called a ________________________________• Used to open Web pages• ________________
![Page 10: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/10.jpg)
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 10
Hyperlinks• Can be _______________________________that
when clicked, take you to:– ____________________________________– ____________________________________– ____________________________________
• Give the Web its nonlinear nature
![Page 11: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/11.jpg)
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 11
Content• Information presented in a Web page• __________________________________________
____________________________________________________________________________________
• Note: ______________________________________________________________________________________________________________________________
![Page 12: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/12.jpg)
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
![Page 13: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/13.jpg)
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
![Page 14: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/14.jpg)
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 14
The Designer Workspace Configuration• Dreamweaver in the Designer workspace configuration
![Page 15: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/15.jpg)
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 ______________________________________________________________________________________________________________________________
![Page 16: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/16.jpg)
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:
![Page 17: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/17.jpg)
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 17
Creating a Local Site Definition• Site Definition dialog box
![Page 18: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/18.jpg)
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 18
Creating a Local Site Definition• Advanced tab
![Page 19: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/19.jpg)
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)
![Page 20: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/20.jpg)
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• ______________________
![Page 21: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/21.jpg)
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 21
Files Panel• Files panel with the files list
![Page 22: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/22.jpg)
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 22
Using the Files Panel• Web pages open in Dreamweaver
![Page 23: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/23.jpg)
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 23
Document Window• __________________________________________
_______________• ______________________________________• _______________
![Page 24: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/24.jpg)
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 24
Document Window: Split View• Home page in Split View
![Page 25: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/25.jpg)
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 25
Document Window: Design View• Home page in Design View
![Page 26: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/26.jpg)
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 26
Document Window: Code View• Home page in Code View
![Page 27: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/27.jpg)
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 27
Document Window: Status Bar• _______________• _______________• _______________• _______________• _______________• _______________• _______________
![Page 28: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/28.jpg)
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 28
Document Window: Status Bar Items• Status bar items
![Page 29: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/29.jpg)
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 29
Property Inspector• __________________________________________
__________________________________________• __________________________________________
__________________________________________
![Page 30: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/30.jpg)
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 30
Property Inspector• Property Inspector with HTML text attributes
![Page 31: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/31.jpg)
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 31
Property Inspector• Property Inspector with HTML text link attributes
![Page 32: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/32.jpg)
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 32
Property Inspector• Property Inspector with CSS attributes
![Page 33: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/33.jpg)
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 33
Insert Panel• Insert panel categories
![Page 34: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/34.jpg)
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 34
Insert Panel• Common category in the Insert panel
![Page 35: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/35.jpg)
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 – _____________________________
• _____________________________________– __________
• __________________________________________________________________________
![Page 36: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/36.jpg)
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 36
Getting Help in Dreamweaver• Adobe Dreamweaver CS4 online help
![Page 37: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/37.jpg)
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 37
Getting Help in Dreamweaver• Context-sensitive help
![Page 38: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/38.jpg)
Tutorial 1: Getting Started with Adobe Dreamweaver CS4 38
Getting Help in Dreamweaver• Dreamweaver Help search
![Page 39: Tutorial 1: Getting Started with Adobe Dreamweaver CS4](https://reader035.vdocuments.mx/reader035/viewer/2022081513/56649e4a5503460f94b3e442/html5/thumbnails/39.jpg)
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