1. Getting Started with Dreamweaver
Chapter 1
Getting Started with Dreamweaver

2. © 2011 Delmar Cengage Learning
Chapter 1 Lessons
Explore the Dreamweaver workspace
View a web page and use Help
Plan and set up a website
Add a folder and pages
© 2011 Delmar Cengage Learning

3. © 2011 Delmar Cengage Learning
Getting Started with Dreamweaver
What is Adobe Dreamweaver CS5?
A web development tool that lets you create dynamic websites
What is a website?
A group of related web pages that are linked together and share a common interface and design
© 2011 Delmar Cengage Learning

4. © 2011 Delmar Cengage Learning
Getting Started with Dreamweaver
What does Dreamweaver CS5 offer?
Design tools that can create dynamic and interactive web pages without writing HTML code
Organizational tools
Site management tools
© 2011 Delmar Cengage Learning

5. © 2011 Delmar Cengage Learning
Getting Started with Dreamweaver
Tools You’ll Use
© 2011 Delmar Cengage Learning

6. © 2011 Delmar Cengage Learning
Explore the Dreamweaver Workspace
The Dreamweaver workspace includes:
Menus
Panels
Buttons
Inspectors
Panes
© 2011 Delmar Cengage Learning

7. Explore the Dreamweaver Workspace
Application bar (Win) shown as one bar
Workspace switcher
Insert panel
Document toolbar
Browser Navigation toolbar
Drag the panel border up or down to resize Insert pane;
Menu names
Document window
Files panel
Status bar
Property inspector
Tag selector
Select tool
Hand tool
Zoom tool
Dreamweaver CS5 workspace
© 2011 Delmar Cengage Learning

8. © 2011 Delmar Cengage Learning
Explore the Dreamweaver Workspace
The Insert panel (Insert bar) includes eight categories:
Common
Layout
Forms
Data
Spry
InContext Editing
Text
Favorites
© 2011 Delmar Cengage Learning

9. © 2011 Delmar Cengage Learning
Explore the Dreamweaver Workspace
The Browser Navigation toolbar contains navigation buttons you use when you are on your Live view.
Live view displays an open document as if you were viewing it in your browser.
© 2011 Delmar Cengage Learning

10. © 2011 Delmar Cengage Learning
Explore the Dreamweaver Workspace
The Standard tool contains buttons you can use to execute frequently used commands.
The Style Rendering toolbar contains buttons you can use to display data for different platforms.
© 2011 Delmar Cengage Learning

11. © 2011 Delmar Cengage Learning
Explore the Dreamweaver Workspace
The Related toolbar displays the names of any related files.
Related files are files that are linked to a document and are necessary for the document to display and function correctly.
The Coding toolbar contains buttons you use when working directly in the code.
© 2011 Delmar Cengage Learning

12. © 2011 Delmar Cengage Learning
Explore the Dreamweaver Workspace
Active panel tab
Panel groups are sets of related panels that are grouped together.
Your drive may differ
Double-click to collapse or expand panel group
Collapse to Icons button
Panels in panel group
© 2011 Delmar Cengage Learning

13. © 2011 Delmar Cengage Learning
Explore the Dreamweaver Workspace
A panel is a tabbed window that displays information on a particular topic or contains related commands.
A dock is a collection of panels or panel groups.
In Dreamweaver CS5, Business Catalyst, Files, and Assets panel appear by default.
© 2011 Delmar Cengage Learning

14. © 2011 Delmar Cengage Learning
Explore the Dreamweaver Workspace
The Property inspector (Properties pane) lets you view and change the properties of a selected object.
The status bar:
The left side displays the tag selector, which shows HTML tags
The right side displays the Select tool, used for page editing
© 2011 Delmar Cengage Learning

15. © 2011 Delmar Cengage Learning
View a Web Page and Use Help
The home page is the first page that appears when you go to a website.
Web pages can be primarily text or media-rich with images, sound, and movies.
© 2011 Delmar Cengage Learning

16. View a Web Page and Use Help
Search Feature
Banner
Image
Links to main
pages in the
website
Contact
information
Image
Common web page elements
© 2011 Delmar Cengage Learning

17. © 2011 Delmar Cengage Learning
View a Web Page and Use Help
Basic Web Page Elements:
Hyperlinks (links) are images or text elements on a web page that users click to display another location on the page
Images can add visual interest to a web page
Banners are images that display logos, contact information, or links to other sites
© 2011 Delmar Cengage Learning

18. © 2011 Delmar Cengage Learning
View a Web Page and Use Help
Basic Web Page Elements (continued):
Menu bars (navigation bars) are bars that contain multiple links that are usually organized in rows or columns
An image map is an image that has been divided into sections, each of which serves as a link
© 2011 Delmar Cengage Learning

19. © 2011 Delmar Cengage Learning
View a Web Page and Use Help
Basic Web Page Elements (continued):
The navigation structure of the site refers to the way the menu bars and other internal links are used on web pages
Rich media content is a comprehensive term that refers to attractive and engaging images, interactive elements, video, or animations
© 2011 Delmar Cengage Learning

20. View a Web Page and Use Help
Banner
Text
Links to the main pages in the website
Image
Viewing web page elements
© 2011 Delmar Cengage Learning

21. Plan and Set Up a Website
Phases of a website development project
© 2011 Delmar Cengage Learning

22. © 2011 Delmar Cengage Learning
Plan and Set Up a Website
A checklist of questions for a website:
Who is the target audience?
How can I tailor the site to reach that audience?
What are the goals for the website?
How will I gather the information?
What is my budget?
© 2011 Delmar Cengage Learning

23. © 2011 Delmar Cengage Learning
Plan and Set Up a Website
A checklist of questions (continued):
What is the timeline?
Who is on my project team?
How often should the site be updated?
Who will update the site?
© 2011 Delmar Cengage Learning

24. © 2011 Delmar Cengage Learning
Plan and Set Up a Website
Wireframes
Also referred to as a storyboard, is an illustration that represents every page in a website
Shows the relationship of each page in the site to all other pages
Allows you to visualize how each page in the site links to others
© 2011 Delmar Cengage Learning

25. © 2011 Delmar Cengage Learning
Plan and Set Up a Website
Wireframes (continued):
They help the client see how the pages will look and work together
Range from very simple to interactive and multidimensional
© 2011 Delmar Cengage Learning

26. Plan and Set Up a Website
The parent page
The child pages
The Striped Umbrella website wireframe
© 2011 Delmar Cengage Learning

27. © 2011 Delmar Cengage Learning
Plan and Set Up a Website
Once you create a wireframe for your site, you should create a folder hierarchy on your computer for all the files you use in the site.
The local site folder (root folder) should contain assets or images.
© 2011 Delmar Cengage Learning

28. © 2011 Delmar Cengage Learning
Plan and Set Up a Website
You can set up a website using the Dreamweaver Site Setup dialog box and assign a name and specify the local site folder.
After the site is setup, the folders will appear in the Files panel.
© 2011 Delmar Cengage Learning

29. © 2011 Delmar Cengage Learning
Plan and Set Up a Website
Site category
Site name
Local Site Folder text box-your drive may differ
Browse for folder icon
© 2011 Delmar Cengage Learning

30. © 2011 Delmar Cengage Learning
Plan and Set Up a Website
When you create a web page, images, colors, tables, and horizontal rules all contribute to making a page attractive and interesting.
You should consider the size of each web page; if it takes too long to load, visitors may leave your site.
© 2011 Delmar Cengage Learning

31. © 2011 Delmar Cengage Learning
Plan and Set Up a Website
Test the site to make sure all the links work and that everything looks good.
Test your web page on several different browsers.
Internet Explorer
Mozilla Firefox
Google chrome
Safari
© 2011 Delmar Cengage Learning

32. © 2011 Delmar Cengage Learning
Plan and Set Up a Website
A web server is a computer that is connected to the Internet with an IP (Internet Protocol) address.
Publishing a website:
Internet service Providers (ISPs) provide space on their servers for customers to publish websites
The Files panel can be used to transfer files using the Dreamweaver FTP (File Transfer Protocol) capability
© 2011 Delmar Cengage Learning

33. © 2011 Delmar Cengage Learning
Add a Folder and Pages
You can use asset folders to store all non-HTML files, such as images or sound files.
You should set this as the default location to store the website images.
© 2011 Delmar Cengage Learning

34. Add a Folder and Pages
Local site folder for
The Striped Umbrella
website
New assets folder
The Striped Umbrella site in Files panel with assets folder created
© 2011 Delmar Cengage Learning

35. © 2011 Delmar Cengage Learning
Add a Folder and Pages
The home page of a website is the first page that a viewer sees when they visit your site.
Websites can be as simple as one page or contain hundreds of pages.
© 2011 Delmar Cengage Learning

36. © 2011 Delmar Cengage Learning
Add a Folder and Pages
Adding web pages to a website:
You can add several blank pages when the site is first created and then add content as you go
You can add and link pages as you create them
© 2011 Delmar Cengage Learning

37. Add a Folder and Pages New pages added to The Striped Umbrella website
su_banner.gif in the assets folder
New pages added
in the striped_umbrella local site folder
New pages added to The Striped Umbrella website
© 2011 Delmar Cengage Learning