1. Getting Started with DreamWeaver
Chapter 1

2. Objectives Students will be able to: Explore the DreamWeaver workspace
View a web page and use Help
Plan and set up a website
Add a folder and pages

3. Introduction
Adobe DreamWeaver CS6 is a web development tool that lets you create dynamic web pages
Contains
Text
Images
Hyperlinks
Animation
Sounds
video
Interactive elements
Create individual web pages or complex websites

4. Introduction Website Web Browser
A group of related web pages that are linked together and share a common interface and design
Web Browser
Program which displays web pages
Internet Explorer
Google Chrome
Apple Safari
Mozilla Firefox

5. Using DreamWeaver Tools
Create dynamic and interactive web pages
Easy to enter and edit the code directly
See the visual results of the code instantly
Organization tools
Help you work with a team to create a website
Management tools
Help manage the site
Files panel
Create folders to organize and store the various files for your website
Add pages to your website

6. Explore The DreamWeaver Workspace
The screen that includes all the menus, panels, buttons, inspectors, and panes that you use to create and maintain websites.
Designed to give you easy access to all the tools you need to create web pages
See page DreamWeaver 1-5 of the book

7. Explore The DreamWeaver Workspace
Document Window
Large area in the DreamWeaver program where you create and edit web pages.
Menu Bar (Application Bar)
Located above the Document Window
Includes:
Menu names
Workspace switcher
Other application commands
Appears as one or two bars depending on screen size and resolution

8. Explore The DreamWeaver Workspace
Insert Panel (Insert Bar)
Includes nine categories of buttons displayed through a drop-down menu
Common
Layout
Forms
Data
Spry
jQuery Mobile
InContext Editing
Text
Favorites
Displays the buttons and menus for inserting objects associated with that object

9. Explore The DreamWeaver Workspace
Document Toolbar
Contains buttons and drop-down menus
Change current work mode
Check browser compatibility
Preview web pages
Debug web pages
Choose visual aids
View file-management options
Live View
Displays an open document as if you were viewing it in a browser, interactive elements active and functioning
Navigation buttons are added to the Document toolbar

10. Explore The DreamWeaver Workspace
Standard Toolbar
Contains buttons you can use to execute frequently used commands that are also available on the File and Edit menus
Style Rendering Toolbar
Contains buttons that you can use to display data for different platforms, such as a cell phone or television
Related Files Toolbar
Located below an open document’s filename tab and displays the names of any related files
Related files
Files linked to a document and are necessary for the document to display and function correctly
Coding Toolbar
Contains buttons you can use when working directly in the code and is not visible unless you are in Code view

11. Explore The DreamWeaver Workspace
Property Inspector (Properties Pane)
Located at the bottom of the DreamWeaver window
Lets you view and change the properties (characteristics) or a selected object.
Context sensitive
Changes according to what is selected in the Document window
Status Bar
Located below the Document window
Left side displays the tag selector
Shows the HTML tags used at the insertion point location
Right side displays the Select Tool
Used for page editing
Hand Tool (panning)
Zoom Tool (magnifying)
Set Magnification Menu (change percentage of magnification)

12. Explore The DreamWeaver Workspace
Panel
Tabbed window that displays information on a particular topic or contains related commands
Panels Groups
Sets of related panels that are grouped together
Dock
Collection of panels or panel groups

13. Working With DreamWeaver Views
Particular way of displaying page content
Three working views
Design View
Shows the page as it would appear in a browser
Primarily used for designing and creating a web page
Code View
Shows the underlying HTML code for the page
Used for reading or editing the underlying code
Show Code and Design Views (Split View)
Combination of Code View and Design View
Best for debugging (correcting) errors
Immediately see how code modifications change the appearance of the page
View buttons are located on Document toolbar

14. Lesson 1 Practice
Complete exercise on pages Dreamweaver 1-7 thru 1-11 of book

15. View a Web Page and Use Help
Opening a Web Page
After starting DreamWeaver you can create
New web page/website
Open an existing web page/website
Home Page
First page to appear when users go to a website
Sets the look and feel of the website and directs users to the rest of the pages in the site.

16. View a Web Page and Use Help
Viewing Basic Web Page Elements
Text
Type directly onto a web page
Import from other programs
Use Property Inspector to format
Should be short and to the point to engage users and prevent them from losing interest

17. View a Web Page and Use Help
Viewing Basic Web Page Elements
Hyperlinks (links)
Images or text elements on a web page that users click to display another location on the page, another web page on the same website, or a web page on a different website
Images
Add visual interest to a web page
Banners
Images that appear across the top or down the side of the screen that can incorporate a company’s logo, contact information, and links to the other pages in the site

18. View a Web Page and Use Help
Viewing Basic Web Page Elements
Menu Bars (Navigation Bars)
Bars that contain multiple links that are usually organized in rows or columns
Image maps
An image that has been divided into sections, each which serves as a link
Navigational Structure
The way that menu bars and other internal links are used on your pages

19. View a Web Page and Use Help
Viewing Basic Web Page Elements
Rich Media Content
Refers to the attractive and engaging images, interactive elements, video or animations
Most created using Adobe Flash, Fireworks, Photoshop, or Illustrator

20. View a Web Page and Use Help
Getting Help
When questions or problems arise, use the commands on the Help menu to find the answers you need.
DreamWeaver Help page contains a list of topics and subtopics by category
Based on Adobe Air technology
Adobe product used for developing content that can be delivered with a browser or as a desktop application
Use the Search text box to enter a keyword to search for a specific topic

21. Lesson 2 Practice
Complete exercise on pages DreamWeaver 1-14 thru 1-17

22. Plan And Set Up A Website
Understanding the Website Development Process
Develop A Plan
Create The Basic Structure
Create the Content
Test
Modify
Publish

23. Plan And Set Up A Website
Planning a Website
Create a checklist of questions and answers about the site
What are your goals for the site?
Who is the audience you want to target?
How can you design the site to appeal to the target audience?
What content is appropriate for the target audience?
What content is relevant to the purpose of the website?
From the checklist, create
Statement of purpose and scope
Timeline for all due dates
Budget
Task list with work assignments
List of resources needed

24. Plan And Set Up A Website
Website Planning Checklist
Question
Examples
1. Who is the target audience?
Seniors, teens, children
2. How can I tailor the site to reach that audience?
Specify an appropriate reading level, decide the optimal amount of media content, use formal or casual language
3. What are the goals for the site?
Sell a product, provide information
4. How will I gather the information?
Recruit other employees, write it myself, use content from in-house documents
5. What are my sources for media content?
Internal product department, outside production company, my own photographs
6. What is my budget?
Very limited, well financed
7. What is the timeline?
Two weeks, one month, six months
8. Who is on my project team?
Just me, a complete staff of designers
9. How often should the site be updated?
Every 10 mins, once a month
10. Who will update the site?
Me, other team members

25. Plan And Set Up A Website
Planning the Basic Structure
Create a wireframe (storyboard)
An illustration that represents every page in a website
Shows the relationship of each page in the site to all other pages
Show how each page element is to be placed on each page

26. Plan And Set Up A Website
Wire Frame Example
Home
About Us
Cafe
Spa
Activities
Cruises
Fishing

27. Plan And Set Up A Website
Planning the Basic Structure
Parent Page
Higher level in the web hierarchy and has pages linked to it
Child Pages
Pages linked below the parent page
Use wireframe as a guide to develop the site to make sure you follow the planned site structure

28. Plan And Set Up A Website
Planning the Basic Structure
Create a folder hierarchy on your computer for all of the files that will be used in the site
Local Site Folder
Store all the pages or HTML files for the site
Root folder
Create subfolders called assets or images to store all of the files that are not pages, such as images and sound files

29. Plan And Set Up A Website
Planning the Basic Structure
Set up
Use DreamWeaver Site Setup dialog box to assign your site a name and specify the local site folder
Site name then appears in the Files Panel
Files Panel
Panel used to manage your website’s files and folders
Ensures that the site links work correctly when the website is published
Used to add or delete pages

30. Plan And Set Up A Website
Creating the Web Pages and Collecting the Page Content
Gather the files you’ll need to create the pages
Text
Images
Buttons
Video
Animations

31. Plan And Set Up A Website
Testing The Pages
Test the site to make sure all the links work and that everything looks good
Use different browser software
Use different screen sizes
Modify The Pages
Each time you make a change you should test the site again
Modifying and testing pages in a website is an ongoing process

32. Plan And Set Up A Website
Publishing The Site
Publishing
Refers to the process of transferring all the files for the site to a web server
Web Server
A computer that is connected to the Internet with an IP address, so that it is available for viewing on the Internet
Internet Service Providers (ISPs)
Provide space on their servers for customers to publish websites
File Transfer Protocol (FTP)
Process of uploading and downloading files to and from a remote site

33. Lesson 3 Practice
Complete exercise on pages DreamWeaver 1-22 thru 1-25

34. Add a Folder and Pages Adding a folder to a website
1st create a folder called assets (images)
Store all non-HTML files
Images
Sound files
Set as default location to store the website images
Saves a step when you import new images into the website

35. Add a Folder and Pages Creating the Home page
The first page that users see when they visit your site
Adding Pages to a Website
One method is to add as many blank pages as you think you will use in the beginning
Enables you to set up the navigation structure of the website at the beginning of the development process
View how each page is linked to others
Then add content to each page

36. Lesson 4 Practice
Complete exercise on pages DreamWeaver 1-28 thru 1-33

37. Skills Review
Complete Skills Review on pages DreamWeaver 1-34 thru 1-35

38. Test
Study for test on Chapter 1