Dreamweaver

Introduction (Unit A: Adobe Dreamweaver CS6 : Illustrated Series)

Download the Introduction to Dreamweaver Notes. (Google Classroom login required to view embedded files and classroom Google Drive files)

Adobe Dreamweaver is a Web Design Program that allows you to do the following:

• Create complex individual web pages or web sites that are at a professional level
• The components that Dreamweaver can insert:
  • Images
  • Tables
  • Forms
  • Videos
  • Objects made in other Adobe software (Fireworks, Flash, and Photoshop)
• There are two places to insert the different components
  • Insert Panel
    
  • Menu Bar --> Insert
    
• Dreamweaver displays the web pages as they appear. This is known as WYSIWYG ("What You See Is What You Get").
  • When you design with Dreamweaver, you will see the page exactly how it will look in a browser.
  • If the CSS property does not render in the Dreamweaver Design View, press the "Live" button, which is located in the "Document toolbar"
    

---

• Starting Dreamweaver CS6

• When you open Dreamweaver, a "Welcome Screen" will appear.
• 
• Click on "HTML" under "Create New"
• A new HTML file will be created. It will be a blank page.
• 

  ---

  
  

• To view the code select the "Code" or "Split" button at the top of the menu
• 
• "Code View" shows only the code
• "Split View" will show both the "Design" and "Code" View
• 
  
  
• Previewing your HTML page:
  

---

TASK:

1. Dreamweaver Assignment # 1 : Dreamweaver Workspace and Assignment #1
2. Dreamweaver Assignment #2: Textbook Page 20 - 21: Answer the Practice questions 1 - 21 & Skills Review on page 21 #1 & #2
   
   

---

Creating a Website (Unit B Adobe Dreamweaver CS6)

• Planning a Website (Page 26 - 27)
  
  • 
    
    
  • More Notes on website design
• Creating a Website (pages 26 - 39)
  • A new Dreamweaver Site needs to be created for each brand new website project.
  • Defining a new Site for your Web Site (PDF)
• Assignment #3 Page 40 - 41; answer 1 - 20
• Assignment #4 Page 41- 42; Skills Review: 1 - 6 (see Figure B-17 on page 42)
• Assignment #5 Page 43: Independent Challenge 1

---

• Change Dreamweaver's Preference settings.
  • PDF File
• Creating a new HTML file with Dreamweaver
• Opening a HTML file with Dreamweaver and Previewing the file (PDF)
• Saving your HTML files in Dreamweaver (PDF)
• Previewing your HTML
• Inserting a hyperlink with Dreamweaver
• Inserting an image with Dreamweaver

---

• Using the correct Dreamweaver Site Project (PDF)
  • For each new web site project create a new Dreamweaver Site Project
• By default, Dreamweaver creates a new file using the OLD HTML 4 Settings.
  • These options will allow Dreamweaver to use the HTML5 version only.
  • Click here to view the tutorial : Changing the Settings in Dreamweaver (PDF)
• If your panels do not match what is in the book or in the demos, you will need to reset the workspace layout.
  • Reseting the Dreamweaver Workspace layout (Designer Layout)