Upload
charleen-kelley
View
228
Download
0
Tags:
Embed Size (px)
Citation preview
Adobe Dreamweaver CS3 Revealed
CHAPTER THREE: WORKING WITH TEXT AND IMAGES
Chapter 3 Lessons
1. Create unordered and ordered lists
2. Create, apply, and edit Cascading Style Sheets
3. Add styles and attach Cascading Style Sheets
4. Insert and align images
5. Enhance an image and use alternate text
6. Insert a background image and perform site maintenance
Breaks up text
Increases readability
Three types of lists:
Unordered
Ordered
Definitions
Text as Lists
Cascading Style Sheets
Saves you time
Ensures consistency
Applies formatting attributes to an entire site
Using Images to Enhance Web Pages
Use graphics sparingly
Can complement content of pages
Store in assets folder
Three Web graphic file formats:
GIF
JPEG
PNG
Creating 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
Creating Ordered Lists
Called numbered lists
Preceded by numbers or letters in a sequence
Creating Definition Lists
Definition lists do not have bullets
Select paragraphs of text to be included in list
Click Text List Definition List
Unordered list button
Ordered list button
List item button
Click to collapse Property inspector
Fig. 1: Expanded Property Inspector
List type list arrow
Numbered list styles
Fig. 2: Choosing a Numbered List Style
Style list arrow
List type list arrow
Fig. 4: List Properties Dialog Box
Fig. 5: HTML Tags in Code View for Unordered List
Beginning tag for unordered list First pair of tags for
first list item
Text color button
Formatted heading
Fig. 7: Spa Page with Ordered List
Formatted body text
Bold button
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
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
CSS Style Sheet Codes
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
selector
declaration
property
value
Fig. 9: Cascading Style Sheet File
Working with CSS
Create a CSS and a style
Apply a CSS
Edit a CSS
New style name
Class option for Selector
Define in list arrow
Fig. 11: New CSS Rule Dialog Box
Type category selected
Fig. 12: CSS Rule Definition for .bullets in su_styles.css Dialog Box
Toggle Displaying of CSS Styles button
Selected text
Click to set font of selected text to Default Font
Click to set size of selected text
to None
Click to apply bullets style to selected text
Fig. 15: Applying a CSS Style
Properties of the bullets style
Fig. 17: Editing a CSS Style
Font size list arrow
Properties pane
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.
Fig. 19: Code for Embedded Styles
New style name
Fig. 20: Adding a Style to a CSS Style Sheet
Fig. 21: Formatting Options for Heading Style
Link option button
su_styles.css
Fig. 24: Attaching a Style Sheet to a Page
Code linking external style sheet file to the
index page
Code that applies the body_text style to the
paragraph
Fig. 25: Viewing the Code to Link the CSS Style Sheet File
Understanding Graphic Formats
Three primary graphic file formats:
GIF
JPEG
PNG
GIF
Graphic Interchange Format
Downloads very quickly
Limited in color
Can show transparent areas
JPEG
Joint Photographic Experts Groups
Can display many colors
Photographs are often saved in this format
PNG
Portable Network Graphics
Shares advantages of GIFs and JPEGs
Not universally recognizable by older browsers
The Assets Panel
Located in the Files panel group
Displays all the assets in a Web site
Has Favorites button
Contains nine categories
The Assets Panel
Categories include: Images
Colors
URLs
Flash
The Assets Panel
Categories include: Shockwave
Movies
Scripts
Templates
Library
Inserting Files with Adobe Bridge
Bridge is an easy way to view files outside the Web site before bringing them into the Web site
Integrated application
Works with other Adobe programs such as Photoshop and Illustrator
Use Bridge to add meta tags and search text to your files
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
Drag gripper to undock
Images button
Category buttons
List of images in Web site
Site option button
Favorites option button
Thumbnail of selected image
Fig. 26: The Assets Panel
club_house.jpeg inserted
Image path(should begin with assets) Inserted file listed
in assets folder
Fig. 26: The Striped Umbrella About Us Page with Inserted Image
boardwalk.jpeg image is selected
Fig. 29: Using Adobe Bridge
Left-aligned image
Text wrapped around image Left-aligned
option selected
Fig. 31: Left-aligned Club House Image
Enhancing Images
Borders
Add horizontal space
Brightness/Contrast
Modify the image and image size using an image editing program
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
Selected image with 1-pixel
border
V Space text box
H Space text box
Border text box
Fig. 34: Using Property Inspector to Add a Border
Image with horizontal and vertical space
Image without horizontal and vertical space
Fig. 35: Comparing Images with Horizontal and Vertical Space
Drag slider to adjust brightness
Fig. 36: Brightness and Contrast Settings
Alternate text box
Fig. 37: Alternate Text Setting
Alternate textdisplayed ontop of image
Fig. 38: Alternate Text Displayed in Browser
Accessibility category
Check boxes forForm objects,
Frames, Media,and Images
Fig. 39: Preferences Dialog Box with Accessibility Category Selected
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
Managing Images
Adding and removing background images
Delete files from Web site
Remove non-Websafe colors from Web site
Selected filename
Fig. 43: Removing a Background Image
Drag the border to the left
to expand panel width
Both colors are websafe
Fig. 45: Colors Listed in Assets Panel
Chapter 3 Tasks
Create unordered and ordered lists
Create/apply/edit Cascading Style Sheets
Add styles and attach Cascading Style Sheets
Insert and align graphics
Enhance an image and use alternate text
Insert a background image and perform site maintenance