Download
1 / 50
500 likes | 504 Views
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.
E N D
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
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.
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
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
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.
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)
19.2 Macromedia Dreamweaver 2004 MX • Creating new document, cont. • Make document XHTML compliant checkbox • Create button
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
Page font Text Size Text color Category list Background color Background image 19.2 Macromedia Dreamweaver 2004 MX Fig. 19.2 Page Properties dialog.
19.2 Macromedia Dreamweaver 2004 MX Fig. 19.3 Example of Fig 4.1 in Dreamweaver.
19.2 Macromedia Dreamweaver 2004 MX • Code View • Document toolbar • Code is colored • Customizable by Edit > Preferences > Code Coloring
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.
19.2 Macromedia Dreamweaver 2004 MX Fig. 19.5 Code view.
19.2 Macromedia Dreamweaver 2004 MX • Saving your work • File > Save • Create new folder • File name field • HTML Documents file type
19.2 Macromedia Dreamweaver 2004 MX Fig. 19.6 Save As dialog.
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
19.3 Text Styles Fig. 19.7 Applying header tags and centering using Dreamweaver.
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
19.3 Text Styles Fig. 19.8 List creation in Dreamweaver.
19.3 Text Styles Fig. 19.9 Definition list inserted using the Text menu.
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
19.4 Images and Links Fig. 19.10 Image source selection in Dreamweaver.
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
Width Height Image source Hyperlink Align Image name(for scripting) 19.4 Images and Links Fig. 19.11 Image properties in the Property inspector.
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
19.5 Symbols and Lines Fig. 19.12 Insert Other Characters dialog.
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
Insert menu Horizontal rule 19.5 Symbols and Lines Fig. 19.13 Using the Insert menu to alter the Insert bar’s appearance.
Width Height Percent or pixels Alignment 19.5 Symbols and Lines Fig. 19.14 Horizontal rule properties.
19.5 Symbols and Lines Fig. 19.15 Special characters and hr elements in Dreamweaver.
19.6 Tables • Creating tables • Often confusing process • Possible to create graphically in Dreamweaver • Insert > Table • Specify rows, columns and appearance
Rows Columns Table width Cell padding Header options Border thickness Cell spacing Accessibility options 19.6 Tables Fig. 19.16 Insert Table dialog.
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
Tag selector 19.6 Tables Fig. 19.17 Table with two rows and two columns.
Background color Merge cells Split cells Alignment Border color 19.6 Tables Fig. 19.18 Table Property inspector. Fig. 19.19 Split Cell dialog.
19.6 Tables Fig. 19.20 Table Property inspector.
19.6 Tables Fig. 19.21 Almost completed table.
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
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.
Text field type Width Name and id Maximum characters Initial value 19.7 Forms Fig. 19.23 Text field Property inspector.
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
Name and id List Values Item Label Item Value 19.7 Forms Fig. 19.24 List Values dialog box.
19.7 Forms • Creating a feedback form • Text fields • List/Value menu • Textarea • Radio group • Radio buttons • Buttons • action and method fields
19.7 Forms Fig. 19.25 Completed form.
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
Behaviors tab Remove behavior Add behavior Event Action 19.8 Scripting in Dreamweaver Fig. 19.26 Behaviors panel and add behaviors menu.
19.8 Scripting in Dreamweaver • Other supported languages • ASP • ColdFusion • PHP • JSP • Also found in Window menu
19.9 Site Management • Dreamweaver site management tools • Window > Files • Manage Sites dialog • Create new site • Manage existing site • Site Definition Wizard • Assets panel
