Adobe Dreamweaver CS3 Revealed CHAPTER SIX: MANAGING A WEB SERVER AND FILES.
Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.
-
Upload
charleen-kelley -
Category
Documents
-
view
220 -
download
0
Transcript of Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.
![Page 1: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/1.jpg)
Adobe Dreamweaver CS3 Revealed
CHAPTER THREE: WORKING WITH TEXT AND IMAGES
![Page 2: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/2.jpg)
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
![Page 3: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/3.jpg)
Breaks up text
Increases readability
Three types of lists:
Unordered
Ordered
Definitions
Text as Lists
![Page 4: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/4.jpg)
Cascading Style Sheets
Saves you time
Ensures consistency
Applies formatting attributes to an entire site
![Page 5: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/5.jpg)
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
![Page 6: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/6.jpg)
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
![Page 7: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/7.jpg)
Creating Ordered Lists
Called numbered lists
Preceded by numbers or letters in a sequence
![Page 8: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/8.jpg)
Creating Definition Lists
Definition lists do not have bullets
Select paragraphs of text to be included in list
Click Text List Definition List
![Page 9: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/9.jpg)
Unordered list button
Ordered list button
List item button
Click to collapse Property inspector
Fig. 1: Expanded Property Inspector
![Page 10: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/10.jpg)
List type list arrow
Numbered list styles
Fig. 2: Choosing a Numbered List Style
![Page 11: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/11.jpg)
Style list arrow
List type list arrow
Fig. 4: List Properties Dialog Box
![Page 12: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/12.jpg)
Fig. 5: HTML Tags in Code View for Unordered List
Beginning tag for unordered list First pair of tags for
first list item
![Page 13: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/13.jpg)
Text color button
Formatted heading
Fig. 7: Spa Page with Ordered List
Formatted body text
Bold button
![Page 14: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/14.jpg)
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
![Page 15: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/15.jpg)
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
![Page 16: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/16.jpg)
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
![Page 17: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/17.jpg)
selector
declaration
property
value
Fig. 9: Cascading Style Sheet File
![Page 18: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/18.jpg)
Working with CSS
Create a CSS and a style
Apply a CSS
Edit a CSS
![Page 19: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/19.jpg)
New style name
Class option for Selector
Define in list arrow
Fig. 11: New CSS Rule Dialog Box
![Page 20: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/20.jpg)
Type category selected
Fig. 12: CSS Rule Definition for .bullets in su_styles.css Dialog Box
![Page 21: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/21.jpg)
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
![Page 22: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/22.jpg)
Properties of the bullets style
Fig. 17: Editing a CSS Style
Font size list arrow
Properties pane
![Page 23: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/23.jpg)
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.
![Page 24: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/24.jpg)
Fig. 19: Code for Embedded Styles
![Page 25: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/25.jpg)
New style name
Fig. 20: Adding a Style to a CSS Style Sheet
![Page 26: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/26.jpg)
Fig. 21: Formatting Options for Heading Style
![Page 27: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/27.jpg)
Link option button
su_styles.css
Fig. 24: Attaching a Style Sheet to a Page
![Page 28: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/28.jpg)
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
![Page 29: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/29.jpg)
Understanding Graphic Formats
Three primary graphic file formats:
GIF
JPEG
PNG
![Page 30: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/30.jpg)
GIF
Graphic Interchange Format
Downloads very quickly
Limited in color
Can show transparent areas
![Page 31: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/31.jpg)
JPEG
Joint Photographic Experts Groups
Can display many colors
Photographs are often saved in this format
![Page 32: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/32.jpg)
PNG
Portable Network Graphics
Shares advantages of GIFs and JPEGs
Not universally recognizable by older browsers
![Page 33: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/33.jpg)
The Assets Panel
Located in the Files panel group
Displays all the assets in a Web site
Has Favorites button
Contains nine categories
![Page 34: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/34.jpg)
The Assets Panel
Categories include: Images
Colors
URLs
Flash
![Page 35: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/35.jpg)
The Assets Panel
Categories include: Shockwave
Movies
Scripts
Templates
Library
![Page 36: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/36.jpg)
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
![Page 37: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/37.jpg)
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
![Page 38: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/38.jpg)
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
![Page 39: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/39.jpg)
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
![Page 40: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/40.jpg)
boardwalk.jpeg image is selected
Fig. 29: Using Adobe Bridge
![Page 41: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/41.jpg)
Left-aligned image
Text wrapped around image Left-aligned
option selected
Fig. 31: Left-aligned Club House Image
![Page 42: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/42.jpg)
Enhancing Images
Borders
Add horizontal space
Brightness/Contrast
Modify the image and image size using an image editing program
![Page 43: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/43.jpg)
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
![Page 44: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/44.jpg)
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
![Page 45: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/45.jpg)
Image with horizontal and vertical space
Image without horizontal and vertical space
Fig. 35: Comparing Images with Horizontal and Vertical Space
![Page 46: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/46.jpg)
Drag slider to adjust brightness
Fig. 36: Brightness and Contrast Settings
![Page 47: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/47.jpg)
Alternate text box
Fig. 37: Alternate Text Setting
![Page 48: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/48.jpg)
Alternate textdisplayed ontop of image
Fig. 38: Alternate Text Displayed in Browser
![Page 49: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/49.jpg)
Accessibility category
Check boxes forForm objects,
Frames, Media,and Images
Fig. 39: Preferences Dialog Box with Accessibility Category Selected
![Page 50: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/50.jpg)
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
![Page 51: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/51.jpg)
Managing Images
Adding and removing background images
Delete files from Web site
Remove non-Websafe colors from Web site
![Page 52: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/52.jpg)
Selected filename
Fig. 43: Removing a Background Image
![Page 53: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/53.jpg)
Drag the border to the left
to expand panel width
Both colors are websafe
Fig. 45: Colors Listed in Assets Panel
![Page 54: Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.](https://reader035.fdocuments.in/reader035/viewer/2022062321/56649ed95503460f94be765a/html5/thumbnails/54.jpg)
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