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

2. Chapter 1 Lessons Introduction Explore the Dreamweaver workspace
View a web page and use Help
Plan and set up a website
Add a folder and pages

3. Getting Started with Dreamweaver
Introduction
Getting Started with Dreamweaver
What is Dreamweaver?
Web design software for creating a web page or a complex website
What is a website?
A group of related web pages that are linked together and share a common interface and design

4. Using Dreamweaver Tools
Introduction
Using Dreamweaver Tools
What does Dreamweaver CS6 offer?
Design tools that can create dynamic and interactive web page without writing HTML code
Organizational tools
Site management tools
Graphic site maps

5. Dreamweaver CS6 Workspace
Lesson 1: Explore the Dreamweaver Workspace
Dreamweaver CS6 Workspace
Menu bar (Win)
Workspace switcher
Insert panel
Related files toolbar
Drag the panel border up or down to resize insert panel
Document toolbar
Document window
Tag selector
Files panel
Select tool
Hand tool
Zoom tool
Property inspector

6. Dreamweaver CS6 Workspace – cont.
Lesson 1: Explore the Dreamweaver Workspace
Dreamweaver CS6 Workspace – cont.
Document Window
Area where you create and edit web pages
Menu (or Application) Bar
Above Document Window, includes menu names, a Workspace switcher, and other application commands
Panel
A window that displays information on a particular topic or contains related commands
Insert Panel
Categories of buttons that contain popular Dreamweaver Commands (Common, Layout, Forms, Data, Spry, etc.)

7. Dreamweaver CS6 Workspace – cont.
Lesson 1: Explore the Dreamweaver Workspace
Dreamweaver CS6 Workspace – cont.
Document Toolbar
Contains buttons and drop-down menus you can use to change the current work mode, preview web pages, view file-management option
Related Files Toolbar
Files that are linked to a document and are necessary for the document to display correctly (ex. External CSS style sheet)
Property Inspector
Located at the bottom of the Dreamweaver window, lets you view and change the properties of the selected object.
Context sensitive – will change based on you selection

8. Dreamweaver CS6 Workspace – cont.
Lesson 1: Explore the Dreamweaver Workspace
Dreamweaver CS6 Workspace – cont.
Live View
Displays an open document as if you were viewing it in a browser
Standard Toolbar
Contains buttons you can use to execute frequently used commands (also available in File and Edit Menus)
Style Rendering Toolbar
Contains buttons that you can use to display data for different platforms (ie telephones and televisions)
Tag Selector
Shows the HTML tag used at the Insertion Point location

9. Working with Dreamweaver Views
Lesson 1: Explore the Dreamweaver Workspace
Working with Dreamweaver Views
Design view
Shows a page as it would appear in a browser
Primarily used for designing and creating a web page
Code view
Shows HTML code for the page
Code and Design view (Split View)
Combination of Code and Design Views
Best view for correcting errors because you can see how code changes affect the appearance of pages

10. Code View for New Document
Lesson 1: Explore the Dreamweaver Workspace
Code View for New Document
Show Code and Design view button
Switch Design View to Live View button
Show Design view button
Show Code view button
Click to collapse all panels to icons
Coding toolbar
Some options may differ depending on what was last selected

11. Opening a Web Page Lesson 2: View a Web Page and Use Help
Create new or open existing
Website
Web page
Homepage
First web page that appears when viewers go to a website
Sets the look and feel of the website and directs viewers to the rest of the pages in the website

12. Basic Web Page Elements
Lesson 2: View a Web Page and Use Help
Basic Web Page Elements
Text
Hyperlinks (links)
Graphics (LESS IS MORE)
Banners – Images that display at the top of the screen
Navigation bars
Bars that contain multiple links that are usually organized in rows or columns
Image map – Image that has been divided into sections, each of which containing a link
Rich media content
Engaging images, interactive elements, video, or animations

13. Using Dreamweaver Help
Lesson 2: View a Web Page and Use Help
Using Dreamweaver Help
Clicking the Dreamweaver Help command opens the Dreamweaver Help page that contains a list of topics and subtopics by category

14. Phases of a Website Development Project
Lesson 3: Plan and Define a Website
Phases of a Website Development Project

15. Planning a Website Lesson 3: Plan and Define a Website
Planning a website is a complex process that requires careful planning including:
Developing a plan
Creating the basic structure
Creating the content
Testing
Modifying (if necessary)
Publishing

16. Setting Up the Basic Structure
Lesson 3: Plan and Define a Website
Setting Up the Basic Structure
Storyboard (or wireboard) is a small sketch that represents each page
Allow you to visualize how each page is linked to one another
Parent pages: home page
Child pages: pages linked below it
Contains root folders and assets
Root folder: stores all the pages or HTML files for the site
Assets: subfolder used to store all of the files that are not pages

17. Striped Umbrella Website Storyboard
Lesson 3: Plan and Define a Website
Striped Umbrella Website Storyboard

18. Creating and Collecting the Page Content
Lesson 3: Plan and Define a Website
Creating and Collecting the Page Content
Gather the files that will be used
Some will come from other software
Some will be done in Dreamweaver

19. Testing the Pages Lesson 3: Plan and Define a Website
Browsers and browser versions
Screen sizes
Connection download time
Testing is a continuous process

20. Modifying the Pages Lesson 3: Plan and Define a Website
Changes are constantly needed
Test page after each change
Modifying and testing is an ongoing process

21. Publishing the Site Lesson 3: Plan and Define a Website
Transfer all the files to a web server
Web server: a computer that is connected to the Internet with an IP address (ie Go Daddy, Fat Cow, blue host)
A website must be published to the web server before it can be viewed by others

22. Publishing the Site IP: Internet Protocol
Lesson 3: Plan and Define a Website
Publishing the Site
IP: Internet Protocol
IP address
Example:
ISP: Internet Service Provider
Hosts website
FTP: File Transfer Protocol
Host, host directory, login, password

23. Publishing the Site Create a root folder Define the website
Lesson 3: Plan and Define a Website
Publishing the Site
Create a root folder
Define the website
Set up web server access

24. Creating a Root Folder Using the Files Panel
Lesson 4: Add a Folder and Pages
Creating a Root Folder Using the Files Panel
Your drive or folder may differ
If you just see a drive or folder name here you do not currently have a website open
Striped_umbrella root folder

25. Site Definition Striped_Umbrella Dialog Box
Lesson 4: Add a Folder and Pages
Site Definition Striped_Umbrella Dialog Box
Advanced tab
Website name
Local root folder text box – your drive may differ
Browse for file icon

26. Adding a Folder to a Website
Lesson 4: Add a Folder and Pages
Adding a Folder to a Website
After defining a website, you need to create folders to organize the files that will make up the site
You can use the assets folder to store all non-HTML files, such as images or sound files

27. The Assets Folder Lesson 4: Add a Folder and Pages
Stores all non-HTML (media) files:
Image files
Sound files
Video files
Set it as the default location to store the website images
You might want to create subfolders for each type of file

28. Creating the Home Page Lesson 4: Add a Folder and Pages
Starting point for a site map
Tells Dreamweaver which page you have designated to be your home page
Usually index.html (.htm), or default.html (.htm)

29. Adding Pages to a Website
Lesson 4: Add a Folder and Pages
Adding Pages to a Website
Once you add and name pages to your website, you can add content to each page (text and graphics)
You have a choice of several default document types you can generate when you create new HTML pages
XHTML 1.0 Transitional is the default document type when you install Dreamweaver
The default document type is designated in the Preferences dialog box