macromedia dreamweaver 8 revealed and graphics working with text
TRANSCRIPT
![Page 1: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/1.jpg)
Macromedia Dreamweaver 8 Revealed
AND GRAPHICSWORKING WITH TEXT
![Page 2: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/2.jpg)
2Macromedia Dreamweaver 8 Revealed Chapter 3
Create unordered and ordered lists
Create, apply, and edit Cascading Style Sheets
Add styles and attach Cascading Style Sheets
Chapter Lessons
![Page 3: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/3.jpg)
3Macromedia Dreamweaver 8 Revealed Chapter 3
Chapter LessonsInsert and align graphics
Enhance an image and use alternate text
Insert a background image and perform site maintenance
![Page 4: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/4.jpg)
4Macromedia Dreamweaver 8 Revealed Chapter 3
Breaks up text
Increases readability
Three types of lists:– Unordered– Ordered– Definitions
Text as Lists
![Page 5: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/5.jpg)
5Macromedia Dreamweaver 8 Revealed Chapter 3
Cascading Style SheetsSave you time
Ensure consistency
Apply formatting attributes to an entire site
![Page 6: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/6.jpg)
6Macromedia Dreamweaver 8 Revealed Chapter 3
GraphicsUse graphics sparingly
Can complement content of pages
Store in assets folder
Three Web graphic file formats:– GIF– JPEG– PNG
![Page 7: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/7.jpg)
7Macromedia Dreamweaver 8 Revealed Chapter 3
Creating Unordered and Ordered Lists
Unordered or bulleted– This slide is an example of an
unordered list
Ordered or numberedSelect paragraphs of text to be included in listClick the (Un)Ordered List button in Property inspector
![Page 8: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/8.jpg)
8Macromedia Dreamweaver 8 Revealed Chapter 3
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: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/9.jpg)
9Macromedia Dreamweaver 8 Revealed Chapter 3
FIGURE 1 Expanded Property inspector
Unordered list button
Ordered list button Click to open
List properties dialog box
Click to collapse Property inspector
![Page 10: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/10.jpg)
10Macromedia Dreamweaver 8 Revealed Chapter 3
FIGURE 2 Choosing a numbered list style in the List Properties dialog box
List type list arrow
Numbered list styles
![Page 11: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/11.jpg)
11Macromedia Dreamweaver 8 Revealed Chapter 3
FIGURE 4 List Properties dialog box
Style list arrow
List type list arrow
![Page 12: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/12.jpg)
12Macromedia Dreamweaver 8 Revealed Chapter 3
HTML Tags
FIGURE 5 HTML tags in Code view for unordered list
<ul>
<li>
![Page 13: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/13.jpg)
13Macromedia Dreamweaver 8 Revealed Chapter 3
Cascading Style SheetsSets 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 14: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/14.jpg)
14Macromedia Dreamweaver 8 Revealed Chapter 3
Types of CSSExternal 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 15: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/15.jpg)
15Macromedia Dreamweaver 8 Revealed Chapter 3
FIGURE 9 su_style.css style sheet file
selector
declaration
property value
![Page 16: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/16.jpg)
16Macromedia Dreamweaver 8 Revealed Chapter 3
Working with CSSCreate a CSS and a style
Apply a CSS
Edit a CSS
![Page 17: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/17.jpg)
17Macromedia Dreamweaver 8 Revealed Chapter 3
FIGURE 11 New CSS Rule dialog box
New style name
Class option button
External
Internal
![Page 18: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/18.jpg)
18Macromedia Dreamweaver 8 Revealed Chapter 3
FIGURE 12 CSS Rule Definition for .bullets in su_styles.css dialog box
Type category selected
![Page 19: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/19.jpg)
19Macromedia Dreamweaver 8 Revealed Chapter 3
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
Click to set size of selected text
to None
Click to apply bullets style to selected text
![Page 20: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/20.jpg)
20Macromedia Dreamweaver 8 Revealed Chapter 3
FIGURE 17 Editing a CSS style
Properties of the bullets
style
![Page 21: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/21.jpg)
21Macromedia Dreamweaver 8 Revealed Chapter 3
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 22: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/22.jpg)
22Macromedia Dreamweaver 8 Revealed Chapter 3
FIGURE 19 Code for embedded styles shown in Code view
![Page 23: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/23.jpg)
23Macromedia Dreamweaver 8 Revealed Chapter 3
FIGURE 20 Adding a style to a CSS style sheet
New style name
![Page 24: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/24.jpg)
24Macromedia Dreamweaver 8 Revealed Chapter 3
FIGURE 23 Attaching a style sheet to a page
Link option button
su_styles.css
![Page 25: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/25.jpg)
25Macromedia Dreamweaver 8 Revealed Chapter 3
FIGURE 24 Viewing the code to link the CSS style sheet file
Code linking external style sheet file to the
index page
Code that applies the body_text style to the
paragraph
![Page 26: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/26.jpg)
26Macromedia Dreamweaver 8 Revealed Chapter 3
Insert and Align GraphicsFile formats
Assets panel
Image alignment
![Page 27: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/27.jpg)
27Macromedia Dreamweaver 8 Revealed Chapter 3
Understanding Graphic Formats
The three primary graphic file formats are:– GIF– JPEG– PNG
![Page 28: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/28.jpg)
28Macromedia Dreamweaver 8 Revealed Chapter 3
GIFGraphic Interchange Format
Downloads very quickly
Limited in color
Can show transparent areas
![Page 29: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/29.jpg)
29Macromedia Dreamweaver 8 Revealed Chapter 3
JPEGJoint Photographic Experts Groups
Can display many colors
Photographs are often saved in this format
![Page 30: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/30.jpg)
30Macromedia Dreamweaver 8 Revealed Chapter 3
PNGPortable Network Graphics
Shares advantages of GIFs and JPEGs
Not universally recognizable by older browsers
![Page 31: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/31.jpg)
31Macromedia Dreamweaver 8 Revealed Chapter 3
The Assets PanelLocated in the Files panel group
Displays all the assets in a Web site
Has Favorites button
Contains nine categories
![Page 32: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/32.jpg)
32Macromedia Dreamweaver 8 Revealed Chapter 3
The Assets Panel
Categories include:– Images– Colors– URLs– Flash
![Page 33: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/33.jpg)
33Macromedia Dreamweaver 8 Revealed Chapter 3
The Assets Panel
Categories include:– Shockwave– Movies– Scripts– Templates– Library
![Page 34: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/34.jpg)
34Macromedia Dreamweaver 8 Revealed Chapter 3
FIGURE 25 The Assets panel
Drag gripper to undock
Images button
Category buttons
Drag panel border to resize
List of graphics in
Web site
Site option button
Favorites option button
Thumbnail of selected image
Click to refresh file list
![Page 35: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/35.jpg)
35Macromedia Dreamweaver 8 Revealed Chapter 3
FIGURE 26 The Striped Umbrella about us page with inserted image
Inserted image
Image path Inserted file listed in assets folder
![Page 36: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/36.jpg)
36Macromedia Dreamweaver 8 Revealed Chapter 3
FIGURE 29 Left-aligned club house image
Left-aligned image
Text wrapped-around image
Left-aligned option set
![Page 37: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/37.jpg)
37Macromedia Dreamweaver 8 Revealed Chapter 3
Enhancing ImagesBordersAdd horizontal spaceBrightness/ContrastAlternate textModify the image and image size using an image editing program
![Page 38: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/38.jpg)
38Macromedia Dreamweaver 8 Revealed Chapter 3
FIGURE 32 Using the Property inspector to add a border
Selected image with
1-pixel border
V Space text box
H Space text box Border text
box
![Page 39: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/39.jpg)
39Macromedia Dreamweaver 8 Revealed Chapter 3
FIGURE 33 Comparing images with and without horizontal and vertical space
Image with horizontal and vertical space
Image without horizontal and vertical space
![Page 40: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/40.jpg)
40Macromedia Dreamweaver 8 Revealed Chapter 3
FIGURE 34 Brightness and contrast settings for the boardwalk image
Drag slider to adjust brightness
![Page 41: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/41.jpg)
41Macromedia Dreamweaver 8 Revealed Chapter 3
Alternate TextDescriptive 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
![Page 42: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/42.jpg)
42Macromedia Dreamweaver 8 Revealed Chapter 3
Alt text box
FIGURE 35 Alternate text setting in the Property inspector
![Page 43: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/43.jpg)
43Macromedia Dreamweaver 8 Revealed Chapter 3
FIGURE 36 Alternate text displayed in browser
Alternate textdisplayed ontop of image
![Page 44: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/44.jpg)
44Macromedia Dreamweaver 8 Revealed Chapter 3
FIGURE 37 Preferences dialog box with Accessibility category selected
Accessibility category
Check boxes forForm objects,
Frames, Media,and Images
![Page 45: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/45.jpg)
45Macromedia Dreamweaver 8 Revealed Chapter 3
Background ImagesKeep 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 46: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/46.jpg)
46Macromedia Dreamweaver 8 Revealed Chapter 3
Working with Background Images
Adding and removing background images
Delete files from Web site
Remove non-Websafe colors from Web site
![Page 47: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/47.jpg)
47Macromedia Dreamweaver 8 Revealed Chapter 3
FIGURE 41 Removing a background imageSelected filename
![Page 48: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/48.jpg)
48Macromedia Dreamweaver 8 Revealed Chapter 3
FIGURE 42 Images listed in Assets panel
Images file listafter removing
umbrella_back.gifand stripes_back.gif
![Page 49: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/49.jpg)
49Macromedia Dreamweaver 8 Revealed Chapter 3
FIGURE 43 Colors listed in Assets panel
Drag the border to the left
to expand panel width
Non-Websafe color
![Page 50: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/50.jpg)
50Macromedia Dreamweaver 8 Revealed Chapter 3
Chapter 3 TasksCreate unordered and ordered lists
Create/apply/edit Cascading Style Sheets
Add styles and attach Cascading Style Sheets
![Page 51: Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT](https://reader035.vdocuments.site/reader035/viewer/2022062409/5697bf7c1a28abf838c8403e/html5/thumbnails/51.jpg)
51Macromedia Dreamweaver 8 Revealed Chapter 3
Chapter 3 TasksInsert and align graphics
Enhance an image and use alternate text
Insert a background image and perform site maintenance