1. Tutorial 1 Getting Started with Adobe Dreamweaver CS3

2. Objectives
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

3. Objectives 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 CS3 Tutorial 1

4. Dreamweaver 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.
Dreamweaver CS3 Tutorial 1

5. Dreamweaver and the Internet
Illustration of the Internet
Dreamweaver CS3 Tutorial 1

6. Dreamweaver 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 software, which allows people with different services to communicate.
The World Wide Web (WWW or Web) is a portion of the Internet with its own protocol.
Dreamweaver CS3 Tutorial 1

7. Dreamweaver 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.
Dreamweaver CS3 Tutorial 1

8. Dreamweaver 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.
Dreamweaver CS3 Tutorial 1

9. Dreamweaver and the Internet
Illustration of the World Wide Web
Dreamweaver CS3 Tutorial 1

10. Dreamweaver 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.
Dreamweaver CS3 Tutorial 1

11. Dreamweaver and the Internet
Parts of a URL
Dreamweaver CS3 Tutorial 1

12. Dreamweaver 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.
Dreamweaver CS3 Tutorial 1

13. Dreamweaver and the Internet
Cosmatic Home Page
Dreamweaver CS3 Tutorial 1

14. Dreamweaver 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)
Dreamweaver CS3 Tutorial 1

15. Evolving 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.
Dreamweaver CS3 Tutorial 1

16. Starting 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.
Dreamweaver CS3 Tutorial 1

17. Starting 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.
Dreamweaver CS3 Tutorial 1

18. Starting Dreamweaver and Selecting a Workspace Layout Configuration
Dreamweaver in Designer Workspace Environment
Dreamweaver CS3 Tutorial 1

19. Creating 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.
Dreamweaver CS3 Tutorial 1

20. Creating 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.
Dreamweaver CS3 Tutorial 1

21. Creating a Site Definition
Site Definition for Unnamed Site 1 Dialog Box
Dreamweaver CS3 Tutorial 1

22. Creating 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
Dreamweaver CS3 Tutorial 1

23. Creating 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
Dreamweaver CS3 Tutorial 1

24. Exploring 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
Dreamweaver CS3 Tutorial 1

25. Exploring the Dreamweaver Environment
Files Panel with the Site Map
Dreamweaver CS3 Tutorial 1

26. Exploring 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.
Dreamweaver CS3 Tutorial 1

27. Exploring the Dreamweaver Environment
Files Panel with Site Map
Dreamweaver CS3 Tutorial 1

28. Exploring the Dreamweaver Environment
Files Panel with File List and Site Map
Dreamweaver CS3 Tutorial 1

29. Exploring the Dreamweaver Environment
Open Web Pages
Dreamweaver CS3 Tutorial 1

30. Exploring 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
Dreamweaver CS3 Tutorial 1

31. Exploring the Dreamweaver Environment
Home Page in Design View
Dreamweaver CS3 Tutorial 1

32. Exploring the Dreamweaver Environment
Home Page in Code View
Dreamweaver CS3 Tutorial 1

33. Exploring the Dreamweaver Environment
Home Page in Split View
Dreamweaver CS3 Tutorial 1

34. Exploring 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
Dreamweaver CS3 Tutorial 1

35. Exploring the Dreamweaver Environment
Status Bar Items
Dreamweaver CS3 Tutorial 1

36. Exploring 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.
Dreamweaver CS3 Tutorial 1

37. Exploring the Dreamweaver Environment
Property Inspector with Text Attributes
Dreamweaver CS3 Tutorial 1

38. Exploring the Dreamweaver Environment
Property Inspector with Text Link Attributes
Dreamweaver CS3 Tutorial 1

39. Exploring the Dreamweaver Environment
Property Inspector with Image Attributes
Dreamweaver CS3 Tutorial 1

40. Exploring 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.
Dreamweaver CS3 Tutorial 1

41. Exploring the Dreamweaver Environment
Insert Bar Categories
Dreamweaver CS3 Tutorial 1

42. Exploring the Dreamweaver Environment
Insert Bar
Dreamweaver CS3 Tutorial 1

43. Getting 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 (
Dreamweaver CS3 Tutorial 1

44. Getting Help in Dreamweaver
Adobe Dreamweaver Help Contents
Dreamweaver CS3 Tutorial 1

45. Getting Help in Dreamweaver
Adobe Dreamweaver Help Index
Dreamweaver CS3 Tutorial 1

46. Getting Help in Dreamweaver
Adobe Dreamweaver Help Search
Dreamweaver CS3 Tutorial 1

47. Exiting 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.
Dreamweaver CS3 Tutorial 1

48. Tutorial 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 system
Dreamweaver CS3 Tutorial 1