1. 1 Macromedia Dreamweaver Outline Introduction Macromedia Dreamweaver Text Styles Images and Links Symbols and Lines Tables Forms Scripting in Dreamweaver Site Management Web Resources

2. 2 Objectives In this tutorial, you will learn: –To be able to use Dreamweaver 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. 3 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 is one popular tool

4. 4 Macromedia Dreamweaver Workspace Setup (upon starting will be asked for the first time) –Design vs. code view (choose designer) Start page (will be displayed by default) –Offers helpful options –Create new HTML document (inorder to open a blank page ) WYSIWYG –What you see is what you get –Displays XHTML as browser would

5. 5 Macromedia Dreamweaver Fig. 19.1Dreamweaver editing environment. Insert menuHyperlinkTableImageMediaTemplatesTag chooser Insert bar Document toolbarPanelsTag selectorFontText sizeText styleText colorText alignment Property Inspector Document windowFiles panel

6. 6 Macromedia Dreamweaver 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. 7 Macromedia Dreamweaver Creating new document, cont. (using basic page category) –Make document XHTML compliant checkbox –Create button

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

9. 9 Macromedia Dreamweaver Fig. 19.2Page Properties dialog. Category list Page font Text SizeText colorBackground colorBackground image

10. 10 Macromedia Dreamweaver Fig. 19.3Example of Fig 4.1 in Dreamweaver.

11. 11 Macromedia Dreamweaver Code View (inorder to check the source code leftmost button in insert bar) –Document toolbar –Code is colored Customizable by Edit > Preferences > Code Coloring

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

13. 13 Macromedia Dreamweaver Fig. 19.5Code view.

14. 14 Macromedia Dreamweaver Saving your work –File > Save –Create new folder –File name field –HTML Documents file type

15. 15 Macromedia Dreamweaver Fig. 19.6Save As dialog.

16. 16 Text Styles Possible to apply styles to text in design view (text menu or property inspector could be used) –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. 17 Text Styles Fig. 19.7Applying header tags and centering using Dreamweaver.

18.  2003 Prentice Hall, Inc. All rights reserved. Outline 18 Styles sample (1 of 1)

19. 19 Text Styles Other styles –Text > Style – for formulas and code – for superscript Exponents Lists can be created in design mode – for unordered lists for each list item – for definition lists definition term definition data

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

21.  2003 Prentice Hall, Inc. All rights reserved. Outline 21 Definition list (1 of 1)

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

23. 23 Images and Links Inserting images –Insert > Image or Image button on Insert bar (comman menu) –Select Image Source dialog Browse to desired image URL generated by Dreamweaver

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

25. 25 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. 26 Images and Links Fig. 19.11Image properties in the Property inspector. WidthHeightImage source Image name (for scripting) Hyperlink Align

27. 27 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. 28 Symbols and Lines Fig. 19.12Insert Other Characters dialog.

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

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

31. 31 Symbols and Lines Fig. 19.14Horizontal rule properties. WidthHeight Percent or pixelsAlignment

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

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

34. 34 Tables Fig. 19.16Insert Table dialog. RowsTable widthCell padding Header options Columns Border thickness Cell spacing Accessibility options

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

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

37. 37 Tables Fig. 19.18Table Property inspector. Background colorMerge cellsSplit cellsAlignmentBorder color Fig. 19.19Split Cell dialog.

38. 38 Tables Fig. 19.20Table Property inspector.

39. 39 Tables Fig. 19.21Almost completed table.

40. 40 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. 41 Forms Fig. 19.22Forms Insert bar. Text field FormHidden field Textarea Checkbox Radio button Radio group List/Menu Jump menu Image field File field Button Label Field set

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

43. 43 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. 44 Forms Fig. 19.24List Values dialog box. Name and id List ValuesItem Label Item Value

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

46. 46 Forms Fig. 19.25Completed form.

47. 47 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. 48 Scripting in Dreamweaver Fig. 19.26Behaviors panel and add behaviors menu. EventAction Add behaviorRemove behavior Behaviors tab

49. 49 Scripting in Dreamweaver Some of other supported languages –ASP –ColdFusion –PHP –JSP –Also found in Window menu

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