Download pptx - Tutorial 1: Getting Started with Adobe Dreamweaver CS4

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


Dreamweaver and the Internet (1.1)• What is Dreamweaver?


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


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)


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


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


Common Web Page Elements• ________________• ________________• ________________


Web Address• Called a ________________________________• Used to open Web pages• ________________


Hyperlinks• Can be _______________________________that

when clicked, take you to:– ____________________________________– ____________________________________– ____________________________________

• Give the Web its nonlinear nature


Content• Information presented in a Web page• __________________________________________

____________________________________________________________________________________

• Note: ______________________________________________________________________________________________________________________________


Evolving Web Design Tools (1.2)• Early days of Web design

• As the Web evolved

• Dreamweaver


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


The Designer Workspace Configuration• Dreamweaver in the Designer workspace configuration


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 ______________________________________________________________________________________________________________________________


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:


Creating a Local Site Definition• Site Definition dialog box


Creating a Local Site Definition• Advanced tab


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)


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• ______________________


Files Panel• Files panel with the files list


Using the Files Panel• Web pages open in Dreamweaver


Document Window• __________________________________________

_______________• ______________________________________• _______________


Document Window: Split View• Home page in Split View


Document Window: Design View• Home page in Design View


Document Window: Code View• Home page in Code View


Document Window: Status Bar• _______________• _______________• _______________• _______________• _______________• _______________• _______________


Document Window: Status Bar Items• Status bar items


Property Inspector• __________________________________________

__________________________________________• __________________________________________

__________________________________________


Property Inspector• Property Inspector with HTML text attributes


Property Inspector• Property Inspector with HTML text link attributes


Property Inspector• Property Inspector with CSS attributes


Insert Panel• Insert panel categories


Insert Panel• Common category in the Insert panel


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 – _____________________________

• _____________________________________– __________

• __________________________________________________________________________


Getting Help in Dreamweaver• Adobe Dreamweaver CS4 online help


Getting Help in Dreamweaver• Context-sensitive help


Getting Help in Dreamweaver• Dreamweaver Help search


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