Chapter 3
Working with Text and Images
© 2010 Delmar, Cengage Learning
Chapter 3 Lessons
1.
2.
3.
4.
5.
6.
Create unordered and ordered lists.
Create, apply, and edit Cascading Style Sheets.
Add rules and attach Cascading Style Sheets.
Insert and align graphics.
Enhance an image and use alternate text.
Insert a background image and perform site
maintenance.
© 2010 Delmar Cengage Learning
Formatting Text as Lists
• Breaks up text
• Increases readability
• Three types of lists:
– Unordered
– Ordered
– Definitions
© 2010 Delmar Cengage Learning
Cascading Style Sheets
• Saves you time
• Ensures consistency
• Applies formatting attributes to an entire site
© 2010 Delmar Cengage Learning
Using Images to Enhance Web
Pages
•
•
•
•
Use graphics sparingly
Can complement content of pages
Store images in separate folder
Three web graphic file formats:
– GIF
– JPEG
– PNG
© 2010 Delmar Cengage Learning
Creating and Formatting
Unordered Lists
• Unordered or bulleted
– This slide is an example of an unordered
list
• Select paragraphs of text to be included in
list
• Click the Unordered List button in Property
inspector
• Default bullet style is a round dot
© 2010 Delmar Cengage Learning
Creating and Formatting
Ordered Lists
• Called numbered lists
• Preceded by numbers or letters in a
sequence
• You can apply numbers, Roman numerals,
lowercase letters, or uppercase letters to an
ordered list.
© 2010 Delmar Cengage Learning
Creating Definition Lists
•
•
•
Definition lists do not have bullets
Select paragraphs of text to be included in
list
Click Text  List  Definition List
© 2010 Delmar Cengage Learning
Fig. 1: Expanded Property
Inspector
Property
Inspector
expanded to
full size
Unordered
list button
Ordered
list button
© 2010 Delmar Cengage Learning
List item
button
Click arrow
to collapse
Property
inspector
Fig. 2: Choosing a Numbered
List Style
List type list box
Numbered
list styles
© 2010 Delmar Cengage Learning
Fig. 4: List Properties Dialog
Box
Style list arrow
© 2010 Delmar Cengage Learning
Fig. 5: HTML Tags in Code View
for Unordered List
Beginning and
ending tags for
unordered list
First pair of tags
for the first list
item in the list
In Step 2, click to
open the List
Properties dialog box
© 2010 Delmar Cengage Learning
Fig. 7: Spa Page with Ordered
Formatted
List
heading
Indented text
Bold
button
Text indent
button
© 2010 Delmar Cengage Learning
Click to collapse
Property Inspector
Cascading Style Sheets
• CSS made up of rules
– Define the formatting attributes for
individual styles
• CSS also classified by type
– ID
– Tag
– Compound
© 2010 Delmar Cengage Learning
Types of CSS
• Saved as a separate file (external style
sheet)
• Head content (internal or embedded)
• Part of the body of HTML code (inline
styles)
• External saved as .css
© 2010 Delmar Cengage Learning
Using the CSS Styles Panel
• To create, edit, and apply
• Apply CSS styles to a single page or all
pages in a website
• Used for managing your styles
© 2010 Delmar Cengage Learning
Advantages of Style Sheets
•
•
•
•
Save an enormous amount of time
Uniform look
Cleaner code
Separates development of content from
presentation
• Compliant with current accessibility
standards
© 2010 Delmar Cengage Learning
Understanding CSS Style
Sheet Code
• The selector is the name of the tag to which
the style declarations have been assigned.
• The declaration consists of the property
and the value.
© 2010 Delmar Cengage Learning
Fig. 8: Cascading Style Sheet
File
New Cascading Style
Sheet file
© 2010 Delmar Cengage Learning
Fig. 11: New CSS Rule Dialog
Box
Class option for
Selector Type
New style name
Rule Definition
list arrow
© 2010 Delmar Cengage Learning
Fig. 15: Applying a CSS Rule
Toggle Displaying of CSS Styles
button
Rule applied
Click to apply
bold_blue rule to
selected text
© 2010 Delmar Cengage Learning
Fig. 17: Editing a Rule
Properties of
the bold_blue
rule
Font-size list
arrow
Click 14
on this
menu
© 2010 Delmar Cengage Learning
The Style Rendering Toolbar
• Render your page as different media type
– Print
– T.V.
– Handheld
© 2010 Delmar Cengage Learning
Fig. 23: Using Code and Design
Views to Edit a Rule
Replace color “006”
with “306”
You can also edit the
color in the CSS
Styles panel
© 2010 Delmar Cengage Learning
Add Rules and Attach Style Sheets
• External .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.
© 2010 Delmar Cengage Learning
Fig. 25: Adding a Rule to a CSS
Style Sheet
New rule name
© 2010 Delmar Cengage Learning
Fig. 26: Formatting Options for
Heading Style
© 2010 Delmar Cengage Learning
Fig. 29: Attaching a Style Sheet to
a Page
su_styles.css style sheet selected
Link option
button
© 2010 Delmar Cengage Learning
Understanding Graphic File
Formats
• Three primary graphic file formats:
– GIF
– JPEG
– PNG
© 2010 Delmar Cengage Learning
GIF
•
•
•
•
Graphic Interchange Format
Downloads very quickly
Limited in color
Can show transparent areas
© 2010 Delmar Cengage Learning
JPEG
• Joint Photographic Experts Groups
• Can display many colors
• Photographs are often saved in this format
© 2010 Delmar Cengage Learning
PNG
• Portable Network Graphics
• Shares advantages of GIFs and JPEGs
• Not universally recognizable by older
browsers
© 2010 Delmar Cengage Learning
The Assets Panel
•
•
•
•
Located in the Files panel group
Displays all the assets in a website
Has Favorites button
Contains nine categories
© 2010 Delmar Cengage Learning
The Assets Panel
•
•
•
•
•
Images
Colors
URLs
SWF
Shockwave
•
•
•
•
Movies
Scripts
Templates
Library
© 2010 Delmar Cengage Learning
Inserting Files with Adobe
Bridge
• Bridge is an easy way to view files outside
the website before bringing them into the
website
• Integrated application
• Works with other Adobe programs such as
Photoshop and Illustrator
• Use Bridge to add meta tags and search
text to your files
© 2010 Delmar Cengage Learning
Aligning Images
• Aligning images means to position them in
relation to other elements
• Default:
– bottom edge aligns with the baseline of
the first line of text or any other element
in the same paragraph
© 2010 Delmar Cengage Learning
Fig. 31: The Assets Panel
Drag title bar to
undock tab group
Site option button
Images button
Favorites option button
Thumbnail of selected
image
List of images in
website
Category buttons
Drag any panel border
or corner to resize
© 2010 Delmar Cengage Learning
Fig. 32: Striped Umbrella about_us
Page with Inserted Image
Click Image to
insert an image
club_house jpg
file inserted
Style sheet is
attached
Inserted file
listed in the
assets folder
Path should
begin with the
word “assets”
© 2010 Delmar Cengage Learning
Fig. 36: Left-aligned Club
House Image
Left-aligned club
house image
Text wrapped
around club
house image
Left-aligned option selected
© 2010 Delmar Cengage Learning
Enhancing Images
• Borders
• Add horizontal and vertical space
• Add alternate text
© 2010 Delmar Cengage Learning
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 viewer-friendly and
handicapped accessible
• Priority 1 Checkpoint
© 2010 Delmar Cengage Learning
Fig. 39: Using Property Inspector
to Add a Border
Selected image
with 1-pixel border
V Space text box
H Space text box
© 2010 Delmar Cengage Learning
Border text box
Fig. 42: Alternate Text Setting
Alt text box
© 2010 Delmar Cengage Learning
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
© 2010 Delmar Cengage Learning
Managing Images
• Adding and removing background images
• Delete files from website
© 2010 Delmar Cengage Learning
Removing Colors from a
Website
• You can use the Assets panel to locate nonweb-safe colors in a website.
• Non-web-safe colors are colors that may not
be displayed uniformly across computer
platforms.
© 2010 Delmar Cengage Learning
Fig. 49: Images Listed in
Assets Panel
Images file list after
removing
umbrella_back.gif and
stripes_back.gif
© 2010 Delmar Cengage Learning
Fig. 50: Colors Listed in
Assets Panel
All colors are
web-safe
Drag the border to the
left to expand panel
width
© 2010 Delmar Cengage Learning