Uploaded byUniversity of Washington, Bothell
Dreamweaver CS3
The document provides an overview of creating a basic web page using Adobe Dreamweaver. It discusses HTML and XHTML basics and the Dreamweaver workspace. It then demonstrates how to set up a Dreamweaver site, insert tables and images, and edit content and properties to design a sample web page.
More Related Content
Dreamweaver CS3
- 1. Ana Thompson InstructionalTechnology Resource Center Idaho State University Adobe Dreamweaver CS3
- 2. Topics Introduction toAdobe Dreamweaver Creative Suite 3 HTML Basic Concepts HTML vs. XHTML Definition and Description The Dreamweaver Workspace Overview Basic Settings Creating a Web Page
- 3.
- 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 http://www.w3c.org
- 5. HTML vs. XHTMLHTML - 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. XHTMLComparison HTML XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <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.
- 8. What is Dreamweaver?An HTML editing program Formerly owned by Macromedia WYSIWYG Create webpages Visual vs. hand-coding Technologies supported: HTML, XHTML, XML JavaScript, ASP, CSS
- 9.
- 10.
- 11.
- 12. Parts of theWorkspace The Insert Bar contains buttons for inserting various types of "objects," 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 theWorkspace Adobe Live Docs site Dreamweaver Manual: http://livedocs.adobe.com/en_US/Dreamweaver/9.0/help.html?content=WScbb6b82af5544594822510a94ae8d65-7fa8.html
- 17.
- 18. Setting up theWorkspace 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 RootFolder (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 Neededto 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 “Createnew folder” icon Name the folder “Tutorial” Click Select Click Next Site Settings (cont.)
- 24. Select “None” Click Next Site Settings (cont.)
- 25. Site Settings (Typesof 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 WebPage Save open document File>Save Save in has “Tutorial” selected Under File Name enter “index.html” Click Save
- 28. Open Workshop FilesLocate 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 ConventionsEliminate spaces between words http://www.mysite.com/my20%web20%page.html http://www.mysite.com/my_web_page.html Type file names in lower case Name the start page index.html Use short well-defined names http://www.mysite.com/index.html http://www.mysite.com/about.htm Keep images in an “images” folder
- 30. Edit Your WebPage (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 WebPage 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 HTMLcode 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 theProperties 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 onthe 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 insidethe 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 thefirst 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 downthe 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 “WebPage 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 bothcenter 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.
- 46. Preview Web Pagein Browser In the Document toolbar, click on the Preview/Debug in Browser icon and select a browser
- 47. Preview Web Pagein Browser (cont.)
- 48. Final Comments AdobeDreamweaver 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 Createdwith Dreamweaver http://xceltech.webs.com/ePortfolio/samples.html Google Pages http://anarider.googlepages.com/daysofrenewall Geocities http://www.geocities.com/to_excel/index.htm
- 50.