1 / 50

Chapter 19 – Macromedia Dreamweaver MX 2004

Chapter 19 – Macromedia Dreamweaver MX 2004. Outline 19.1 Introduction 19.2 Macromedia Dreamweaver MX 2004 19.3 Text Styles 19.4 Images and Links 19.5 Symbols and Lines 19.6 Tables 19.7 Forms 19.8 Scripting in Dreamweaver 19.9 Site Management 19.10 Web Resources.

estesm
Download Presentation

Chapter 19 – Macromedia Dreamweaver MX 2004

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Chapter 19 – Macromedia Dreamweaver MX 2004 Outline 19.1 Introduction 19.2 Macromedia Dreamweaver MX 2004 19.3 Text Styles 19.4 Images and Links19.5 Symbols and Lines 19.6 Tables 19.7 Forms 19.8 Scripting in Dreamweaver 19.9 Site Management 19.10 Web Resources

  2. Objectives • In this tutorial, you will learn: • To be able to use Dreamweaver MX 2004 effectively. • To develop Web pages in a visual environment. • To insert images and links into Web pages. • To use Dreamweaver to create advanced XHTML elements such as tables and forms. • To be able to insert scripts into Dreamweaver pages. • To be able to use Dreamweaver’s site-management capabilities.

  3. 19.1 Introduction • Designing successful sites is a huge job • Constantly require updates and maintenance • Must be visually appealing • New tools designed to help build and maintain sites • Not complete replacements for understanding XHTML code • Dreamweaver MX 2004 is one popular tool

  4. 19.2 Macromedia Dreamweaver 2004 MX • Workspace Setup • Design vs. code view • Start page • Offers helpful options • Create new HTML document • WYSIWYG • What you see is what you get • Displays XHTML as browser would

  5. Hyperlink Templates Table Image Media Font Insert menu Tag chooser Insert bar Panels Text alignment Document toolbar Files panel Text size Text style Text color Tag selector Document window Property Inspector 19.2 Macromedia Dreamweaver 2004 MX Fig. 19.1 Dreamweaver editing environment.

  6. 19.2 Macromedia Dreamweaver 2004 MX • Creating new document • File > New • Categories • Basic page • Dynamic page • Template page • Other • CSS Style Sheets • Framesets • Page Designs (CSS) • Page Designs • Page Designs (Accessible)

  7. 19.2 Macromedia Dreamweaver 2004 MX • Creating new document, cont. • Make document XHTML compliant checkbox • Create button

  8. 19.2 Macromedia Dreamweaver 2004 MX • Adding text • Type in Document window • Automatically enclosed in <p> tag • Changing page title • Right-click in Document window • Select Page Properties • Title/Encoding • File > Preview in browser

  9. Page font Text Size Text color Category list Background color Background image 19.2 Macromedia Dreamweaver 2004 MX Fig. 19.2 Page Properties dialog.

  10. 19.2 Macromedia Dreamweaver 2004 MX Fig. 19.3 Example of Fig 4.1 in Dreamweaver.

  11. 19.2 Macromedia Dreamweaver 2004 MX • Code View • Document toolbar • Code is colored • Customizable by Edit > Preferences > Code Coloring

  12. View in browser Code and Design view File management File name View options Page Title Code view Design view Refresh design view 19.2 Macromedia Dreamweaver 2004 MX Fig. 19.4 Document toolbar.

  13. 19.2 Macromedia Dreamweaver 2004 MX Fig. 19.5 Code view.

  14. 19.2 Macromedia Dreamweaver 2004 MX • Saving your work • File > Save • Create new folder • File name field • HTML Documents file type

  15. 19.2 Macromedia Dreamweaver 2004 MX Fig. 19.6 Save As dialog.

  16. 19.3 Text Styles • Possible to apply styles to text in design view • Similar to using word processor • Highlight portion of text • Select style or formatting to apply • Header tags • List tags • Alignment tags (center, left, right, justified) • Changes reflected in code view

  17. Styles sample(1 of 1)

  18. 19.3 Text Styles Fig. 19.7 Applying header tags and centering using Dreamweaver.

  19. 19.3 Text Styles • Other styles • Text > Style • <code> for formulas and code • <sup> for superscript • Exponents • Lists can be created in design mode • <ul> for unordered lists • <dl> for definition lists • <dt> definition term • <dd> definition data

  20. 19.3 Text Styles Fig. 19.8 List creation in Dreamweaver.

  21. Definition list (1 of 1)

  22. 19.3 Text Styles Fig. 19.9 Definition list inserted using the Text menu.

  23. 19.4 Images and Links • Inserting images • Insert > Image or Image button on Insert bar • Select Image Source dialog • Browse to desired image • URL generated by Dreamweaver

  24. 19.4 Images and Links Fig. 19.10 Image source selection in Dreamweaver.

  25. 19.4 Images and Links • Adding links • Highlight text or image • Enter destination URL into Link field of Property inspector • Other properties available to change • Height • Width • Alignment

  26. Width Height Image source Hyperlink Align Image name(for scripting) 19.4 Images and Links Fig. 19.11 Image properties in the Property inspector.

  27. 19.5 Symbols and Lines • Special symbols • Possible to add characters not on keyboard • Insert > HTML > Special Characters > Other… • Insert Other Character dialog • Useful for equations or characters not part of English alphabet

  28. 19.5 Symbols and Lines Fig. 19.12 Insert Other Characters dialog.

  29. 19.5 Symbols and Lines • Representing an equation • Use special characters for any symbols • Insert > HTML > Horizontal Rule • Adds an <hr> tag • Width • Height • Align

  30. Insert menu Horizontal rule 19.5 Symbols and Lines Fig. 19.13 Using the Insert menu to alter the Insert bar’s appearance.

  31. Width Height Percent or pixels Alignment 19.5 Symbols and Lines Fig. 19.14 Horizontal rule properties.

  32. 19.5 Symbols and Lines Fig. 19.15 Special characters and hr elements in Dreamweaver.

  33. 19.6 Tables • Creating tables • Often confusing process • Possible to create graphically in Dreamweaver • Insert > Table • Specify rows, columns and appearance

  34. Rows Columns Table width Cell padding Header options Border thickness Cell spacing Accessibility options 19.6 Tables Fig. 19.16 Insert Table dialog.

  35. 19.6 Tables • Manipulating tables • Drag borders to resize • Change background or border color • Delete, split, merge cells • Tag selector • <td> tag • Merge button • Alternatively, right-click, Table > Merge Cells

  36. Tag selector 19.6 Tables Fig. 19.17 Table with two rows and two columns.

  37. Background color Merge cells Split cells Alignment Border color 19.6 Tables Fig. 19.18 Table Property inspector. Fig. 19.19 Split Cell dialog.

  38. 19.6 Tables Fig. 19.20 Table Property inspector.

  39. 19.6 Tables Fig. 19.21 Almost completed table.

  40. 19.7 Forms • Forms in Dreamweaver • Represented by dotted line • Anything inside lines belongs to that form • Insert > Form or Forms on Insert bar • Form elements • Insert bar • Property inspector

  41. Radio button List/Menu Image field Text field Textarea Button Field set Hidden field Checkbox Radio group Jump menu Form Label File field 19.7 Forms Fig. 19.22 Forms Insert bar.

  42. Text field type Width Name and id Maximum characters Initial value 19.7 Forms Fig. 19.23 Text field Property inspector.

  43. 19.7 Forms • Form elements, cont. • Textareas • Scrollable text fields • Numlines • Wrap • List/Menu • Drop-down selection menu • List Values • Items and values • Initially selected property

  44. Name and id List Values Item Label Item Value 19.7 Forms Fig. 19.24 List Values dialog box.

  45. 19.7 Forms • Creating a feedback form • Text fields • List/Value menu • Textarea • Radio group • Radio buttons • Buttons • action and method fields

  46. 19.7 Forms Fig. 19.25 Completed form.

  47. 19.8 Scripting in Dreamweaver • Adding JavaScript to a Web page • Window > Behaviors • Select element • Click + button • Select action • Editing events • Select element • Change event or action in Behaviors window

  48. Behaviors tab Remove behavior Add behavior Event Action 19.8 Scripting in Dreamweaver Fig. 19.26 Behaviors panel and add behaviors menu.

  49. 19.8 Scripting in Dreamweaver • Other supported languages • ASP • ColdFusion • PHP • JSP • Also found in Window menu

  50. 19.9 Site Management • Dreamweaver site management tools • Window > Files • Manage Sites dialog • Create new site • Manage existing site • Site Definition Wizard • Assets panel

More Related