1 Macromedia Dreamweaver Outline Introduction Macromedia Dreamweaver Text Styles Images and Links Symbols and Lines Tables Forms Scripting in Dreamweaver

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


• 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


• 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


• Creating new document, cont. (using basic page category)

– Make document XHTML compliant checkbox– Create button

8


• 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

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


• 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


• 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>






17 </body>

18 </html>

19

Text Styles

• Other styles– Text > Style

– <code> for formulas and code– 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>FTP</dt>

3 <dd>File Transfer Protocol</dd>

4 <dt>GIF</dt>

5 <dd>Graphics Interchange Format</dd>

6 <dt>XHTML</dt>

7 <dd>HyperText Markup Language</dd>

8 <dt>PNG</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