Your SlideShare is downloading. ×
  • Like
  • Save
Dreamweaver CS3
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Dreamweaver CS3


Introduction to Adobe Dreamweaver CS3 - A hands-on exercise

Introduction to Adobe Dreamweaver CS3 - A hands-on exercise

Published in Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Ana Thompson Instructional Technology Resource Center Idaho State University Adobe Dreamweaver CS3
  • 2. Topics
    • Introduction to Adobe Dreamweaver Creative Suite 3
      • HTML Basic Concepts
      • HTML vs. XHTML
      • Definition and Description
    • The Dreamweaver Workspace
      • Overview
      • Basic Settings
      • Creating a Web Page
  • 3. HTML Basics
  • 4. What is HTML?
    • Hypertext Markup Language
    • Structure of text-based documents
    • Uses “tags”, or code definitions
    • Used in the World Wide Web (WWW)
    • World Wide Web Consortium
  • 5. HTML vs. XHTML
    • HTML - Older technology
      • Not case-sensitive
      • Static
    • XHTML - New and improved
      • Has levels of strictness
        • Case-sensitive
      • Dynamic
        • Supports XML (Extensible Markup Language)
  • 6. HTML vs. XHTML Comparison
    • HTML
    • XHTML
    • <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;;>
    • <html xmlns=&quot;;>
    • <head>
    • <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; />
    • <title> XHTML Sample Web Page </title>
    • </head>
    • <body>
    • <p>
    • Here is my content!!
    • <p>
    • </body>
    • </html>
    • <html>
    • <header>
    • <title> My Web Page
    • </title>
    • </header>
    • <body>
    • <p>
    • Hello to my page!!
    • </p>
    • </body>
    • </html>
  • 7. Introduction to Dreamweaver CS3
  • 8. What is Dreamweaver?
    • An HTML editing program
    • Formerly owned by Macromedia
    • Create webpages
    • Visual vs. hand-coding
    • Technologies supported:
      • HTML, XHTML, XML
      • JavaScript, ASP, CSS
  • 9. The Dreamweaver Workspace
  • 10.  
  • 11.  
  • 12. Parts of the Workspace
    • The Insert Bar contains buttons for inserting various types of &quot;objects,&quot; such as images, tables, and layers, into a document
    • The Document Toolbar contains buttons and pop-up menus that provide different views of the Document window and some common operations such as previewing in a browser.
  • 13.
    • The Code Window displays the HTML code for the current document
    • The Design Window displays the current document as it should look in a browser
    • Panel Groups are sets of related panels grouped together under one heading
    • The Tag Selector shows you the HTML tags relevant to whatever is selected in the Document window
    Parts of the Workspace (cont.)
  • 14.
    • The Properties Panel lets you view and change a variety of properties for the selected object or text. The Properties Panel, by default, is located below the design and includes options to edit font, text size/color, background color attributes such as bold and italic, text alignment, etc., in a similar manner as a word processor. Also, this panel displays the hyperlink information associated with the selected text
    Parts of the Workspace (cont.)
  • 15.
    • The Files Panel enables you to manage your files and folders, whether they are part of a Dreamweaver site or on a remote server
    • The View selector allows you to change the view settings. The Code view displays the actual HTML code associated with a page. The Design view allows you to create a web page without worrying about the HTML code. The Split view allows you to view both the HTML code and the design of the page simultaneously
    Parts of the Workspace (cont.)
  • 16. Parts of the Workspace
    • Adobe Live Docs site Dreamweaver Manual:
  • 17. Checking Settings
    • Edit>Preferences
  • 18. Setting up the Workspace
    • Go to View>Toolbars
      • Click on Document and Standard Styles (if unchecked)
    • Go to Window
      • Click on Properties and CSS Styles (if unchecked)
      • Workspace Layout>Save Current Layout
      • Enter “My Workspace”
      • Click OK
  • 19. Special Folders
    • Root Folder (Local) : The main folder for your site in your computer
    • Local Site : The copy of your web site that is saved in your computer. You can have several local sites within your root folder.
    • Remote Site : The live site that resides on the Internet
  • 20. Site Settings
    • Needed to save files locally and upload to site
    • Site>New Site
    • Enter the name of your site (i.e., Tutorial)
    • Leave URL blank
    • Click Next
  • 21. Site Settings (cont.)
    • Select “No” for server technology
    • Click Next
  • 22. Site Settings (cont.)
    • Select “Edit local copies…”
    • Browse to the Desktop for a new location for your Root folder
  • 23.
    • Click on “Create new folder” icon
    • Name the folder “Tutorial”
    • Click Select
    • Click Next
    Site Settings (cont.)
  • 24.
    • Select “None”
    • Click Next
    Site Settings (cont.)
  • 25. Site Settings (Types of Connections)
    • Connecting to a remote server options
    • None Keep this default setting if you do not plan to upload your site to a server.
    • FTP Use this setting if you connect to your web server using FTP.
    • Local/Network Use this setting to access a network folder, or if you are storing files or running your testing server on your local computer.
    • RDS (Remote Development Services) For this access method, your remote folder must be on a computer running ColdFusion.
    • Microsoft Visual SourceSafe Use if you connect to your web server using Microsoft Visual SourceSafe.
    • WebDAV (Web-based Distributed Authoring and Versioning) Use if you connect to your web server using the WebDAV protocol.
  • 26.
    • Review settings
    • Click Done
    Site Settings (cont.)
  • 27. Create a Web Page
    • Save open document
      • File>Save
      • Save in has “Tutorial” selected
      • Under File Name enter “index.html”
      • Click Save
  • 28. Open Workshop Files
    • Locate the Workshop Files folder on the Desktop
    • Copy the Workshop Files>images folder and final.html file to your site folder
    • Double-click on the final.html file to view the page we will create during this presentation
  • 29. Web Naming Conventions
    • Eliminate spaces between words
    • Type file names in lower case
    • Name the start page index.html
    • Use short well-defined names
    • Keep images in an “images” folder
  • 30. Edit Your Web Page (Title)
    • Edit the document title using the property inspector:
      • Click on Page Properties
  • 31.
    • Click on Title/Encoding
    • In the Title field, enter “My Web Page”
    • Leave the Page Properties open
    Edit Your Web Page (cont.)
  • 32. Edit Your Web Page
    • Change view (if you do not see the HTML code)
    • View>Code and Design
    • Or click on the Split icon on the Document toolbar
  • 33.
    • In the HTML code view, locate <title>
    • Highlight “Untitled Document”
    • Type “My Web Page” in the space between the <title> and </title> Continue
    Edit Your Web Page (Document Title)
  • 34.
    • Page font = “Verdana, Arial, Helvetica, sans-serif”
    • Text color = From the pop-color palette, select white or “#FFFFFF”
    • Background color = White or “#FFFFFF”
    Edit Your Web Page (Font and Colors) Color Box
  • 35.
    • Link color = Type “#CCCC99”
    • Visited links = Type “#CCCC99”
    • Rollover links = Type “#326565”
    • Active links = Type “#FFFFCC”
    • Underline style = Select “Show underline on rollover”. Click OK
    Edit Your Web Page (Links)
  • 36.
    • File>Save
    • In the Properties Panel (PP), center-align the content
    • Go to Insert>Table
    Add Elements (Tables)
  • 37. Add Elements (cont.)
    • Rows and Columns = 1
    • Table width = 70 percent
    • Border thickness = 2
    • Cell padding = (leave blank)
    • Cell spacing = 0
    • Header = None
    • Caption = (leave blank)
    • Click OK
  • 38.
    • File>Save
    • Click on the edge of the new table to select
    • In the PP, enter “#326565” in the Brdr (Border Color of Cell ) field
    Add Elements (cont.)
  • 39.
    • File>Save
    • Click inside the table so you can see a cursor blinking
    • Repeat the Insert>Table steps as before
    • Use the same settings except:
      • Rows and Columns = 3
      • Table width = 100 percent
      • Border thickness = 0
      • Click OK
    Add Elements (cont.)
  • 40.
    • Click inside the first row
    • Change the Background color ( Bg) to #CCCC99
    • Select the bottom row (drag across the three cells)
    • Go to the PP
    • Merge the cells by clicking on the icon located below Cell
    Edit Content
  • 41.
    • File>Save
    • Hold down the CRTL key
    • Click to select the two middle cells on the first and last column (one-at-a-time)
    • Release the CTRL key
    • In the PP, enter #326565 in the Bg field
    • Press Enter or click on the document white space
    • File>Save
    Edit Content (cont.)
  • 42.
    • Open the “Web Page Text” file in the Workshop Files folder located on the Desktop
    • Copy and paste the text from the file onto the corresponding sections of the web page
    • Center-align the text on the top (title) and bottom rows
    • Title text (top row)
      • Change font color to black (#000000)
      • Increase font size to xx-large
      • Make the font bold
      • Add an extra line above and below the title
    Edit Content (cont.)
  • 43.
    • File>Save
    • Copyright message (bottom row)
      • Center-align text
      • Change font color to black (#000000)
      • Add an extra line above the text
      • Reduce font-size to x-small
    • Apply bullets to text in middle right and left rows
      • Apply extra indentation to match the final page
    Edit Content (cont.)
  • 44.
    • File>Save
    • Select both center cells and merge
    • Change background to white (#FFFFFF)
    • Click inside the merged cell to select
    • Insert “recycle.jpg” image located in your “images” folder
    • Center-align image
    • File>Save
    Edit Content (cont.)
  • 45. Dreamweaver View
  • 46. Preview Web Page in Browser
    • In the Document toolbar, click on the Preview/Debug in Browser icon and select a browser
  • 47. Preview Web Page in Browser (cont.)
  • 48. Final Comments
    • Adobe Dreamweaver is a very powerful program that can create very dynamic web sites using a technologies such as Cold Fusion, data validation, templates, XML, to name a few
    • There is much more to explore….
  • 49. Sample Webpages
    • Created with Dreamweaver
    • Google Pages
    • Geocities
  • 50. Thank you!!!!