Introduction To Dreamweaver

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
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 Dreamweavers site-management capabilities.
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
oNot complete replacements for
understanding XHTML code
Dreamweaver is one popular tool
3
MACROMEDIA DREAMWEAVER
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
4
5
Dreamweaver editing environment.
Insert menu
Hyperlink Table Image Media
Templates Tag chooser
Insert bar
Document toolbar
Panels
Tag selector
Font
Text size
Text style
Text color
Text alignment
Property
Inspector
Document window
Files panel
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)

6
Creating new document, cont.
Make document XHTML compliant checkbox
Create button
7
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

8
9
Page Properties dialog.
Category list
Page font
Text Size
Text color
Background color
Background image
10
Example in Dreamweaver.
Code View
Document toolbar
Code is colored
Customizable by Edit > Preferences > Code Coloring
11
12
Document toolbar.
File name
Code view
Code and Design
view
Design
view
Page Title
File management View in browser
Refresh
design view
View options
13
Code view.
Saving your work
File > Save
Create new folder
File name field
HTML Documents file type

14
15
Save As dialog.
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

16
STYLES SAMPLE
(1 OF 1)
17
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>

TEXT STYLES
18
Applying header tags and centering using Dreamweaver.
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
<dl> for definition lists
<dt> definition term
<dd> definition data
19
TEXT STYLES
20
List creation in Dreamweaver.
DEFINITION LIST
(1 OF 1)
21
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>

TEXT STYLES
22
Definition list inserted using the Text menu.
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

23
IMAGES AND LINKS
24
Image source selection in Dreamweaver.
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

25
IMAGES AND LINKS
26
Image properties in the Property inspector.
Width Height Image source
Image name
(for scripting)
Hyperlink
Align
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

27
SYMBOLS AND LINES
28
Insert Other Characters dialog.
SYMBOLS AND LINES
Representing an equation
Use special characters for any symbols
Insert > HTML > Horizontal Rule
Adds an <hr> tag
Width
Height
Align
29
SYMBOLS AND LINES
30
Using the Insert menu to alter the Insert bars appearance.
Insert menu Horizontal rule
SYMBOLS AND LINES
31
Horizontal rule properties.
Width Height
Percent or pixels
Alignment
SYMBOLS AND LINES
32
Special characters and hr elements in Dreamweaver.
TABLES
Creating tables
Often confusing process
Possible to create graphically in Dreamweaver
Insert > Table
Specify rows, columns and appearance
33
TABLES
34
Insert Table dialog.
Rows
Table width
Cell padding
Header options
Columns
Border thickness
Cell spacing
Accessibility
options
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
35
TABLES
36
Table with two rows and two columns.
Tag selector
TABLES
37
Table Property inspector.
Background color Merge cells Split cells
Alignment
Border color
Split Cell dialog.
TABLES
38
Table Property inspector.
TABLES
39
Almost completed table.
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

40
FORMS
41
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
FORMS
42
Text field Property inspector.
Width
Name and id Maximum
characters
Text field type
Initial value
FORMS
Form elements, cont.
Textareas
Scrollable text fields
Numlines
Wrap
List/Menu
Drop-down selection menu
List Values
Items and values
Initially selected property
43
FORMS
44
List Values dialog box.
Name and id
List Values
Item Label Item Value
FORMS
Creating a feedback form
Text fields
List/Value menu
Textarea
Radio group
Radio buttons
Buttons
action and method fields
45
FORMS
46
Completed form.
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
47
48
Behaviors panel and add behaviors menu.
Event Action
Add behavior
Remove behavior
Behaviors tab
Other supported languages
ASP
ColdFusion
PHP
JSP
Also found in Window menu
49
SITE MANAGEMENT
Dreamweaver site management tools
Window > Files
Manage Sites dialog
Create new site
Manage existing site
Site Definition Wizard
Assets panel
50

Introduction To Dreamweaver

Uploaded by

Copyright:

Available Formats

Introduction To Dreamweaver

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Introduction To Dreamweaver

Uploaded by

Copyright:

Available Formats

What are some of the main features of Dreamweaver?

How can you create and style tables in Dreamweaver?

1

You might also like