Tutorial 1 Getting Started with Adobe Dreamweaver CS3

Tutorial 1

Getting Started with Adobe Dreamweaver

CS3

XPXPObjectives• Explore the structure and history of the Internet

and the World Wide 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• Use hyperlinks

Dreamweaver CS3 Tutorial 1 2

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


XPXPDreamweaver and the Internet• The Dreamweaver software allows you to create and

manage Web sites.• A network:

– Is a series of computers connected together to share information and resources

– Allows information to be exchanged between computers– Has a server that controls the information sharing

• The Internet is a global network containing many smaller interconnected computer networks.


XPXPDreamweaver and the Internet


Illustration of the Internet

XPXPDreamweaver and the Internet• When connecting to the Internet, information is

shared using a set of technical specifications that define a format for sharing information called a protocol.

• Simple Mail Transfer Protocol (SMTP) is the standard format for most e-mail software, which allows people with different e-mail services to communicate.

• The World Wide Web (WWW or Web) is a portion of the Internet with its own protocol.


XPXPDreamweaver and the Internet• The Web uses HTTP protocol and an HTML

document structure.• The Hypertext Transfer Protocol (HTTP) controls

the transfer of Web pages over the Internet.• The Hypertext Markup Language (HTML) defines

how to format Web pages for display.


XPXPDreamweaver and the Internet• Web pages are the electronic documents of

information on the Web.• A group of related and interconnected Web

pages is a Web site.• Hyperlinks provide the connections enabling the

user to move from one Web page to another.




Illustration of the World Wide Web

XPXPDreamweaver and the Internet• Web servers store and distribute information to

computers that are connected to the Internet.• Web clients are the computers used to access the

information.• One common option for accessing the Internet and

viewing Web sites is through an Internet Service Provider (ISP).

• A Web browser is the software that interprets and displays Web pages.

• Every Web page has unique address called a URL.




Parts of a URL

XPXPDreamweaver and the Internet• You may also want to view local Web pages not posted

to the Web by typing the file path name instead of the URL.

• The home page is the main page of a Web site.• Information branches out from the home page to many

different sites through hyperlinks.• The left side of the status bar displays the URL of the

hyperlink.• You can move between two or more open Web pages

by using buttons on the browser toolbar.




Cosmatic Home Page

XPXPDreamweaver and the Internet• The main purpose of most Web sites is to

provide information, which is conveyed through the content.

• A Web page usually contains a combination of:– Text– Graphics– Multimedia elements (i.e., video, animation, or

interactive content)


XPXPEvolving Web Design Tools• The original Web pages only consisted of text

written as HTML. • The complexity and syntax of HTML eventually

led to software packages that created HTML for non-programmers.

• Dreamweaver grew out of this need for easy-to-use, visual tools that enable Web authors to rapidly develop reliable and well-coded Web pages.


XPXPStarting Dreamweaver and Selecting a Workspace Layout Configuration• Dreamweaver has three preset workspace environments:

– Designer: Recommended for most users, it is an integrated workspace that uses multiple document interface (MDI). In this environment, the Document window shows Design view by default.

– Coder (HomeSite): This environment uses the same integrated workspace as the Designer workspace layout, but the panels are arranged similarly to Adobe HomeSite and ColdFusion. The Document window shows the Code view by default.

– Dual: If you are working with two monitors, you can display the Document window in your primary monitor and display all the panels on your secondary monitor.


XPXPStarting Dreamweaver and Selecting a Workspace Layout Configuration• Once a work environment is selected, you can

move windows and adjust the workspace.• Dreamweaver opens in the same state it was in

when it was last closed.• In the Designer environment, the menu bar is at

the top of the work area and each panel group is on the right side of the screen.

• A panel contains related commands, controls, and information about different aspects of Dreamweaver.


XPXPStarting Dreamweaver and Selecting a Workspace Layout Configuration


Dreamweaver in Designer Workspace Environment

XPXPCreating a Site Definition• You must set up a site definition for

Dreamweaver, telling it where to locate the local files (where changes and corrections are made) and the remote files for the Web site (where others can view the Web site).

• The site definition also defines parameters on how the site is set up.

• Dreamweaver stores a local Web site in the same format as it will be posted on the Web.


XPXPCreating a Site Definition• The Local site definition tells Dreamweaver

where the local root folder is located.• Dreamweaver has a Site Definition Wizard on the

Basic tab in the Site Definition dialog box that will walk you through the process of setting up a site.

• You can also use the Advanced tab and input the information manually.


XPXPCreating a Site Definition


Site Definition for Unnamed Site

1 Dialog Box

XPXPCreating a Site Definition• The parts of a Local Site Definition that must be

entered are:– Site Name – an internal name– Local Root Folder – the location of all the files to

create the local version of the Web site– Default Images Folder – it is a good practice to create

a graphics folder within the local root folder to store all the graphics files that are used in the site


XPXPCreating a Site Definition• Local Site Definition parts continued:

– Links Relative To – types of relative hyperlinks: Document Relative links and Site Root Relative links

– HTTP Address – the Web site URL– Case-sensitive Links – checking the check box can

help you to avoid problems with case when you upload your site to the Web

– Cache: Enable Cache – if checked, allows Dreamweaver to update links when necessary


XPXPExploring the Dreamweaver Environment• To manage local and remote site files and

folders, you will use the Files panel.• Once you open the root folder for the Web site

you can:– Find a list of the folders and files in the local site– Perform any editing function on the files/folders such

as move, copy, delete, etc.– Transfer files to the remote site– Browse files outside of the site


XPXPExploring the Dreamweaver Environment


Files Panel with the Site Map

XPXPExploring the Dreamweaver Environment• You can view your Web site using the site map.• The site map is a visual representation of how the pages

in a Web site are interrelated.• The site map can be viewed in the Files panel by

selecting Map view from the View list.• You can open any page in the Web site by double-

clicking its filename in the file list or the site map.• You can open multiple pages at one time, moving

between them by clicking the page name.




Files Panel with Site Map



Files Panel with File List and Site Map



Open Web Pages

XPXPExploring the Dreamweaver Environment• The Document window is the main workspace where

you can create and edit Web pages.• The Web page can be manipulated using the Document

toolbar.• The title bar information includes the page title and the

filename of the selected Web page.• There are three different ways to display the

information in the Document window: – Design view– Code view– Split view




Home Page in Design View



Home Page in Code View



Home Page in Split View

XPXPExploring the Dreamweaver Environment• The status bar is located at the bottom of the Document

window showing:– Tag Selector– Select Tool– Hand Tool– Zoom Tool– Set Magnification– Window Size– Document Size/Estimated Download Time




Status Bar Items

XPXPExploring the Dreamweaver Environment• The Property inspector is a toolbar with buttons

that examine or edit the attributes of any selected element.

• A page element is either an object or text.• The Property inspector buttons and options

change to reflect the attributes of the selected element.




Property Inspector with Text Attributes



Property Inspector with Text Link Attributes



Property Inspector with Image Attributes

XPXPExploring the Dreamweaver Environment• In Dreamweaver, anything created or inserted

into a page is an object (i.e., tables, images, and links).

• The Insert bar contains buttons used to create and insert objects.

• The Insert bar is broken down into tabbed categories.




Insert Bar Categories



Insert Bar

XPXPGetting Help in Dreamweaver• There are several ways to get help when using

Dreamweaver. • The Dreamweaver Help command opens the Adobe

Help Viewer window.• Links on the Adobe Help Viewer window:

– Contents– Index– Search

• Adobe provides additional Dreamweaver product support and Help features on its Web site (www.adobe.com).


XPXPGetting Help in Dreamweaver


Adobe Dreamweaver Help Contents



Adobe Dreamweaver Help Index



Adobe Dreamweaver Help Search

XPXPExiting Dreamweaver• To Exit the program:

– Use the Exit command on the File menu – Use the Close command or Close button on any open

windows• Dreamweaver will prompt you to save any Web

pages that you haven’t yet saved.


XPXPTutorial Summary• The Internet and the World Wide Web• Relationship between Web servers and Web

clients• Components of a basic Web page. • Dreamweaver work environment and local site

definition• Dreamweaver tool set, including the Files panel,

the Document window, the Property inspector, and the Insert bar

• Help systemDreamweaver CS3 Tutorial 1 48

Documents

Tutorial 1 Getting Started with Adobe Dreamweaver CS3