1 / 50

19.1 introduction

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

jacob
Download Presentation

19.1 introduction

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

    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. 19.2 Macromedia Dreamweaver 2004 MX

    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. 19.2 Macromedia Dreamweaver 2004 MX

    10. 19.2 Macromedia Dreamweaver 2004 MX

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

    12. 19.2 Macromedia Dreamweaver 2004 MX

    13. 19.2 Macromedia Dreamweaver 2004 MX

    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

    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

    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

    21. Definition list (1 of 1)

    22. 19.3 Text Styles

    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

    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. 19.4 Images and Links

    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

    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. 19.5 Symbols and Lines

    31. 19.5 Symbols and Lines

    32. 19.5 Symbols and Lines

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

    34. 19.6 Tables

    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. 19.6 Tables

    37. 19.6 Tables

    38. 19.6 Tables

    39. 19.6 Tables

    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. 19.7 Forms

    42. 19.7 Forms

    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. 19.7 Forms

    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

    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. 19.8 Scripting in Dreamweaver

    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