1 Macromedia Dreamweaver Outline Introduction Macromedia Dreamweaver Text Styles Images and Links Symbols and Lines Tables Forms Scripting in Dreamweaver Site Management Web Resources
1
Macromedia Dreamweaver
OutlineIntroductionMacromedia DreamweaverText StylesImages and LinksSymbols and LinesTablesFormsScripting in DreamweaverSite ManagementWeb Resources
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
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
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
Macromedia Dreamweaver Fig. 19.1 Dreamweaver editing environment.Insert menuHyperlinkTableImageMediaTemplatesTag chooser Insert bar
Document toolbar
Panels
Tag selector
FontText sizeText styleText color
Text alignment
Property Inspector
Document window
Files panel
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
Macromedia Dreamweaver
• Creating new document, cont. (using basic page category)
– Make document XHTML compliant checkbox– Create button
8
Macromedia Dreamweaver
• 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
Macromedia Dreamweaver Fig. 19.2 Page Properties dialog.
Category listPage font
Text Size
Text colorBackground color
Background image
10
Macromedia Dreamweaver Fig. 19.3 Example of Fig 4.1 in Dreamweaver.
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
Macromedia Dreamweaver Fig. 19.4 Document toolbar.
File name
Code view
Code and Design view
Design view
Page Title
File managementView in browser
Refresh design view
View options
13
Macromedia Dreamweaver Fig. 19.5 Code view.
14
Macromedia Dreamweaver
• Saving your work– File > Save
– Create new folder– File name field– HTML Documents file type
15
Macromedia Dreamweaver Fig. 19.6 Save As dialog.
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
Text StylesFig. 19.7 Applying header tags and centering using Dreamweaver.
2003 Prentice Hall, Inc.All rights reserved.
Outline18
Styles sample(1 of 1)
1 <?xml version="1.0" encoding="iso-8859-1"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
3 www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <head>
5 <html xmlns="http://www.w3.org/1999/xhtml">
6 <head>
7 <title>Untitled Document</title>
8 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
9 </head>
10 <body>
11 <h1 align="center">Level 1 Header</h1>
12 <h2 align="center">Level 2 Header</h2>
13 <h3 align="center">Level 3 Header</h3>
14 <h4 align="center">Level 4 Header</h4>
15 <h5 align="center">Level 5 Header</h5>
16 <h6 align="center">Level 6 Header</h6>
17 </body>
18 </html>
19
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
• <li> for each list item
– <dl> for definition lists• <dt> definition term• <dd> definition data
20
Text StylesFig. 19.8 List creation in Dreamweaver.
2003 Prentice Hall, Inc.All rights reserved.
Outline21
Definition list (1 of 1)
1 <dl>
2 <dt><strong>FTP</strong></dt>
3 <dd>File Transfer Protocol</dd>
4 <dt><strong>GIF</strong></dt>
5 <dd>Graphics Interchange Format</dd>
6 <dt><strong>XHTML</strong></dt>
7 <dd>HyperText Markup Language</dd>
8 <dt><strong>PNG</strong></dt>
9 <dd>Portable Network Graphics</dd>
10 </dl>
22
Text StylesFig. 19.9 Definition list inserted using the Text menu.
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
Images and LinksFig. 19.10 Image source selection in Dreamweaver.
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
Images and LinksFig. 19.11 Image properties in the Property inspector.
Width Height Image source
Image name(for scripting)
Hyperlink
Align
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
Symbols and LinesFig. 19.12 Insert Other Characters dialog.
29
Symbols and Lines
• Representing an equation– Use special characters for any symbols– Insert > HTML > Horizontal Rule
• Adds an <hr> tag• Width
• Height
• Align
30
Symbols and LinesFig. 19.13 Using the Insert menu to alter the Insert bar’s appearance.
Insert menu Horizontal rule
31
Symbols and LinesFig. 19.14 Horizontal rule properties.
Width Height
Percent or pixels Alignment
32
Symbols and LinesFig. 19.15 Special characters and hr elements in Dreamweaver.
33
Tables
• Creating tables– Often confusing process
– Possible to create graphically in Dreamweaver– Insert > Table
• Specify rows, columns and appearance
34
TablesFig. 19.16 Insert Table dialog.
RowsTable width
Cell padding
Header options
Columns
Border thickness
Cell spacing
Accessibility options
35
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
TablesFig. 19.17 Table with two rows and two columns.
Tag selector
37
TablesFig. 19.18 Table Property inspector.
Background colorMerge cellsSplit cells Alignment Border color
Fig. 19.19 Split Cell dialog.
38
TablesFig. 19.20 Table Property inspector.
39
TablesFig. 19.21 Almost completed table.
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
FormsFig. 19.22 Forms Insert bar.
Text field
Form Hidden field
Textarea
Checkbox
Radio button
Radio group
List/Menu
Jump menu
Image field
File field
Button
Label
Field set
42
FormsFig. 19.23 Text field Property inspector.
Width
Name and id Maximum characters
Text field type
Initial value
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
FormsFig. 19.24 List Values dialog box.
Name and id
List Values
Item Label Item Value
45
Forms
• Creating a feedback form– Text fields
– List/Value menu
– Textarea
– Radio group• Radio buttons
– Buttons– action and method fields
46
FormsFig. 19.25 Completed form.
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
Scripting in DreamweaverFig. 19.26 Behaviors panel and add behaviors menu.
Event Action
Add behaviorRemove behavior
Behaviors tab
49
Scripting in Dreamweaver
• Some of other supported languages– ASP
– ColdFusion
– PHP
– JSP
– Also found in Window menu
50
Site Management
• Dreamweaver site management tools– Window > Files
– Manage Sites dialog• Create new site
• Manage existing site
– Site Definition Wizard
– Assets panel