Dreamweaver CS3


Published on

Introduction to Adobe Dreamweaver CS3 - A hands-on exercise

Published in: Technology, Education
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Dreamweaver CS3

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