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

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