Date post: | 20-Jan-2016 |
Category: |
Documents |
Upload: | tamsyn-gibbs |
View: | 224 times |
Download: | 0 times |
Macromedia Dreamweaver 8 Revealed
AND GRAPHICSWORKING WITH TEXT
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
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
4Macromedia Dreamweaver 8 Revealed Chapter 3
Breaks up text
Increases readability
Three types of lists:– Unordered– Ordered– Definitions
Text as Lists
5Macromedia Dreamweaver 8 Revealed Chapter 3
Cascading Style SheetsSave you time
Ensure consistency
Apply formatting attributes to an entire site
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
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
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
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
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
11Macromedia Dreamweaver 8 Revealed Chapter 3
FIGURE 4 List Properties dialog box
Style list arrow
List type list arrow
12Macromedia Dreamweaver 8 Revealed Chapter 3
HTML Tags
FIGURE 5 HTML tags in Code view for unordered list
<ul>
<li>
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
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
15Macromedia Dreamweaver 8 Revealed Chapter 3
FIGURE 9 su_style.css style sheet file
selector
declaration
property value
16Macromedia Dreamweaver 8 Revealed Chapter 3
Working with CSSCreate a CSS and a style
Apply a CSS
Edit a CSS
17Macromedia Dreamweaver 8 Revealed Chapter 3
FIGURE 11 New CSS Rule dialog box
New style name
Class option button
External
Internal
18Macromedia Dreamweaver 8 Revealed Chapter 3
FIGURE 12 CSS Rule Definition for .bullets in su_styles.css dialog box
Type category selected
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
20Macromedia Dreamweaver 8 Revealed Chapter 3
FIGURE 17 Editing a CSS style
Properties of the bullets
style
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.
22Macromedia Dreamweaver 8 Revealed Chapter 3
FIGURE 19 Code for embedded styles shown in Code view
23Macromedia Dreamweaver 8 Revealed Chapter 3
FIGURE 20 Adding a style to a CSS style sheet
New style name
24Macromedia Dreamweaver 8 Revealed Chapter 3
FIGURE 23 Attaching a style sheet to a page
Link option button
su_styles.css
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
26Macromedia Dreamweaver 8 Revealed Chapter 3
Insert and Align GraphicsFile formats
Assets panel
Image alignment
27Macromedia Dreamweaver 8 Revealed Chapter 3
Understanding Graphic Formats
The three primary graphic file formats are:– GIF– JPEG– PNG
28Macromedia Dreamweaver 8 Revealed Chapter 3
GIFGraphic Interchange Format
Downloads very quickly
Limited in color
Can show transparent areas
29Macromedia Dreamweaver 8 Revealed Chapter 3
JPEGJoint Photographic Experts Groups
Can display many colors
Photographs are often saved in this format
30Macromedia Dreamweaver 8 Revealed Chapter 3
PNGPortable Network Graphics
Shares advantages of GIFs and JPEGs
Not universally recognizable by older browsers
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
32Macromedia Dreamweaver 8 Revealed Chapter 3
The Assets Panel
Categories include:– Images– Colors– URLs– Flash
33Macromedia Dreamweaver 8 Revealed Chapter 3
The Assets Panel
Categories include:– Shockwave– Movies– Scripts– Templates– Library
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
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
36Macromedia Dreamweaver 8 Revealed Chapter 3
FIGURE 29 Left-aligned club house image
Left-aligned image
Text wrapped-around image
Left-aligned option set
37Macromedia Dreamweaver 8 Revealed Chapter 3
Enhancing ImagesBordersAdd horizontal spaceBrightness/ContrastAlternate textModify the image and image size using an image editing program
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
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
40Macromedia Dreamweaver 8 Revealed Chapter 3
FIGURE 34 Brightness and contrast settings for the boardwalk image
Drag slider to adjust brightness
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
42Macromedia Dreamweaver 8 Revealed Chapter 3
Alt text box
FIGURE 35 Alternate text setting in the Property inspector
43Macromedia Dreamweaver 8 Revealed Chapter 3
FIGURE 36 Alternate text displayed in browser
Alternate textdisplayed ontop of image
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
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
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
47Macromedia Dreamweaver 8 Revealed Chapter 3
FIGURE 41 Removing a background imageSelected filename
48Macromedia Dreamweaver 8 Revealed Chapter 3
FIGURE 42 Images listed in Assets panel
Images file listafter removing
umbrella_back.gifand stripes_back.gif
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
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
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