Transcript Chapter 3

Macromedia Dreamweaver 8
Revealed
WORKING WITH TEXT
AND GRAPHICS
Chapter Lessons
Create unordered and ordered lists
Create, apply, and edit Cascading
Style Sheets
Add styles and attach Cascading
Style Sheets
Macromedia Dreamweaver 8 Revealed
Chapter 3
2
Chapter Lessons
Insert and align graphics
Enhance an image and use alternate
text
Insert a background image and
perform site maintenance
Macromedia Dreamweaver 8 Revealed
Chapter 3
3
Text as Lists
Breaks up text
Increases readability
Three types of lists:
– Unordered
– Ordered
– Definitions
Macromedia Dreamweaver 8 Revealed
Chapter 3
4
Cascading Style Sheets
Save you time
Ensure consistency
Apply formatting attributes to an
entire site
Macromedia Dreamweaver 8 Revealed
Chapter 3
5
Graphics
Use graphics sparingly
Can complement content of pages
Store in assets folder
Three Web graphic file formats:
– GIF
– JPEG
– PNG
Macromedia Dreamweaver 8 Revealed
Chapter 3
6
Creating Unordered and
Ordered Lists
Unordered or bulleted
– This slide is an example of an
unordered list
Ordered or numbered
Select paragraphs of text to be
included in list
Click the (Un)Ordered List button in
Property inspector
Macromedia Dreamweaver 8 Revealed
Chapter 3
7
Creating Definition Lists
Definition lists do not have bullets
Select paragraphs of text to be
included in list
Click Text  List  Definition List
Macromedia Dreamweaver 8 Revealed
Chapter 3
8
FIGURE 1
Expanded Property inspector
Click to
collapse
Property
inspector
Unordered list
button
Ordered list
button
Macromedia Dreamweaver 8 Revealed
Click to open
List properties
dialog box
Chapter 3
9
FIGURE 2
Choosing a numbered list style in the List Properties dialog box
List type list
arrow
Numbered list
styles
Macromedia Dreamweaver 8 Revealed
Chapter 3
10
FIGURE 4
List Properties dialog box
List type list
arrow
Style list arrow
Macromedia Dreamweaver 8 Revealed
Chapter 3
11
HTML Tags
<ul>
<li>
FIGURE 5
HTML tags in Code view for unordered list
Macromedia Dreamweaver 8 Revealed
Chapter 3
12
Cascading Style Sheets
Sets of rules
– Style or rule: formatting attribute that
can be applied to page elements
Can be created, edited or applied
– New CSS Rule dialog box
– CSS Rule definition dialog box
– CSS Styles panel
Macromedia Dreamweaver 8 Revealed
Chapter 3
13
Types of CSS
External CSS
– Saved as a separate file (.css)
– Stored in the directory structure of a
Web site
Internal CSS
– Embedded in the code on an individual
page
Macromedia Dreamweaver 8 Revealed
Chapter 3
14
FIGURE 9
su_style.css style sheet file
selector
declaration
property
Macromedia Dreamweaver 8 Revealed
value
Chapter 3
15
Working with CSS
Create a CSS and a style
Apply a CSS
Edit a CSS
Macromedia Dreamweaver 8 Revealed
Chapter 3
16
FIGURE 11
New CSS Rule dialog box
New style
name
Class option
button
External
Internal
Macromedia Dreamweaver 8 Revealed
Chapter 3
17
FIGURE 12
CSS Rule Definition for .bullets in su_styles.css dialog box
Type
category
selected
Macromedia Dreamweaver 8 Revealed
Chapter 3
18
FIGURE 15
Applying a CSS style to selected text
Toggle
Displaying of
CSS Styles
button
Selected text
Click to set font
of selected text
to Default Font
Macromedia Dreamweaver 8 Revealed
Click to set size
of selected text
to None
Chapter 3
Click to apply
bullets style to
selected text
19
FIGURE 17
Editing a CSS style
Properties of
the bullets
style
Macromedia Dreamweaver 8 Revealed
Chapter 3
20
Add Styles and Attach CSS
.css files created by Web designer
Embedded style sheets created
automatically by Dreamweaver
– Set preference to Use CSS instead of
HTML
– Formatting in Property inspector
– Code in Head content of file
– Named style1, style2, etc.
Macromedia Dreamweaver 8 Revealed
Chapter 3
21
FIGURE 19
Code for embedded styles shown in Code view
Macromedia Dreamweaver 8 Revealed
Chapter 3
22
New style
name
FIGURE 20
Adding a style to a CSS style sheet
Macromedia Dreamweaver 8 Revealed
Chapter 3
23
FIGURE 23
Attaching a style sheet to a page
su_styles.css
Link option
button
Macromedia Dreamweaver 8 Revealed
Chapter 3
24
FIGURE 24
Viewing the code to link the CSS style sheet file
Code linking external
style sheet file to the
index page
Macromedia Dreamweaver 8 Revealed
Chapter 3
Code that applies the
body_text style to the
paragraph
25
Insert and Align Graphics
File formats
Assets panel
Image alignment
Macromedia Dreamweaver 8 Revealed
Chapter 3
26
Understanding Graphic
Formats
The three primary graphic file
formats are:
– GIF
– JPEG
– PNG
Macromedia Dreamweaver 8 Revealed
Chapter 3
27
GIF
Graphic Interchange Format
Downloads very quickly
Limited in color
Can show transparent areas
Macromedia Dreamweaver 8 Revealed
Chapter 3
28
JPEG
Joint Photographic Experts Groups
Can display many colors
Photographs are often saved in this
format
Macromedia Dreamweaver 8 Revealed
Chapter 3
29
PNG
Portable Network Graphics
Shares advantages of GIFs and
JPEGs
Not universally recognizable by older
browsers
Macromedia Dreamweaver 8 Revealed
Chapter 3
30
The Assets Panel
Located in the Files panel group
Displays all the assets in a Web site
Has Favorites button
Contains nine categories
Macromedia Dreamweaver 8 Revealed
Chapter 3
31
The Assets Panel
Categories include:
– Images
– Colors
– URLs
– Flash
Macromedia Dreamweaver 8 Revealed
Chapter 3
32
The Assets Panel
Categories include:
– Shockwave
– Movies
– Scripts
– Templates
– Library
Macromedia Dreamweaver 8 Revealed
Chapter 3
33
FIGURE 25
The Assets panel
Drag gripper
to undock
Site option
button
Images button
Favorites
option button
Thumbnail of
selected image
Category
buttons
List of
graphics in
Web site
Click to
refresh file list
Drag panel
border to resize
Macromedia Dreamweaver 8 Revealed
Chapter 3
34
FIGURE 26
The Striped Umbrella about us page with inserted image
Inserted
image
Image path
Macromedia Dreamweaver 8 Revealed
Inserted file listed
in assets folder
Chapter 3
35
FIGURE 29
Left-aligned club house image
Left-aligned
image
Text wrappedaround image
Macromedia Dreamweaver 8 Revealed
Chapter 3
Left-aligned
option set
36
Enhancing Images
Borders
Add horizontal space
Brightness/Contrast
Alternate text
Modify the image and image size
using an image editing program
Macromedia Dreamweaver 8 Revealed
Chapter 3
37
FIGURE 32
Using the Property inspector to add a border
Selected
image with
1-pixel
border
V Space text
box
H Space text
box
Macromedia Dreamweaver 8 Revealed
Chapter 3
Border text
box
38
FIGURE 33
Comparing images with and without horizontal and vertical space
Image with
horizontal and
vertical space
Image without
horizontal and
vertical space
Macromedia Dreamweaver 8 Revealed
Chapter 3
39
FIGURE 34
Brightness and contrast settings for the boardwalk image
Drag slider to
adjust brightness
Macromedia Dreamweaver 8 Revealed
Chapter 3
40
Alternate Text
Descriptive text that appears in place
of an image when the image is
downloading or when the mouse
pointer is placed over it
Makes your Web page viewerfriendly and handicapped accessible
Macromedia Dreamweaver 8 Revealed
Chapter 3
41
Alt text box
FIGURE 35
Alternate text setting in the Property inspector
Macromedia Dreamweaver 8 Revealed
Chapter 3
42
FIGURE 36
Alternate text displayed in browser
Alternate text
displayed on
top of image
Macromedia Dreamweaver 8 Revealed
Chapter 3
43
FIGURE 37
Preferences dialog box with Accessibility category selected
Accessibility
category
Check boxes for
Form objects,
Frames, Media,
and Images
Macromedia Dreamweaver 8 Revealed
Chapter 3
44
Background Images
Keep file size small
Use a tiled image
– Small graphic that repeats across or
down a page
Or a larger non-tiled image
Use either a background color or a
background image, but not both
Macromedia Dreamweaver 8 Revealed
Chapter 3
45
Working with Background
Images
Adding and removing background
images
Delete files from Web site
Remove non-Websafe colors from
Web site
Macromedia Dreamweaver 8 Revealed
Chapter 3
46
Selected
filename
FIGURE 41
Macromedia Dreamweaver 8 Revealed
Removing a background image
Chapter 3
47
FIGURE 42
Images listed in Assets panel
Images file list
after removing
umbrella_back.gif
and stripes_back.gif
Macromedia Dreamweaver 8 Revealed
Chapter 3
48
FIGURE 43
Colors listed in Assets panel
Non-Websafe color
Drag the border to
the left
to expand panel
width
Macromedia Dreamweaver 8 Revealed
Chapter 3
49
Chapter 3 Tasks
Create unordered and ordered lists
Create/apply/edit Cascading Style
Sheets
Add styles and attach Cascading
Style Sheets
Macromedia Dreamweaver 8 Revealed
Chapter 3
50
Chapter 3 Tasks
Insert and align graphics
Enhance an image and use
alternate text
Insert a background image and
perform site maintenance
Macromedia Dreamweaver 8 Revealed
Chapter 3
51