Download Document

CIS 205—Web Design &
Development
Dreamweaver
Chapter 3
Working With Text and Images
Chapter 3: Working With Text and Images
• Introduction
– When adding text and images to Web pages, you need
a consistent look from page to page within your site
• Formatting Text as Lists
– Large amounts of text should be broken into smaller
paragraphs or lists (unordered, ordered, and definition)
• Using Cascading Style Sheets (CSS)
– Formatting Web pages with special instructions in a CSS
file provides a consistent look and saves time
• Using Images to Enhance Web Pages
– Images add interest but should be used sparingly
Lesson 1: Create Unordered and Ordered Lists
• Creating Unordered Lists
– Unordered lists have items in no specific order
– Items in an unordered list are usually preceded by a bullet (small
raised dot), forming a bulleted list
– Use the Unordered List button in the PI
• Creating Ordered Lists
– Ordered lists (or numbered lists) have a specific order
– Items are preceded by numbers or letters
– Use the Ordered List button in the PI
• Formatting Lists
– Use the List Item button in the PI to format lists
• Creating Definition Lists
– Click Text, List to create terms and definitions, as in a glossary
Lesson 1: Create Unordered and Ordered Lists (2)
• Create an unordered list
1. Start Dreamweaver, click the Site list arrow in the
Files panel, click The Striped Umbrella (if necessary)
2. Double-click spa.html in the Files panel
3. Select the three items between the Skin Care
Treatments and the Body Treatments headings
4. Click the Unordered List button in the PI
5. Repeat Steps 3 and 4 for the remaining lists on the
page
•
Do not include the contact information at the bottom of the
page in a list
Lesson 1: Create Unordered and Ordered Lists (3)
• Format an unordered list
1. Click on any single item in the first unordered list
2. Click the List Item button in the PI
3. Click the Style list arrow in the dialog box, click
Square, click OK
4. Repeat Step 2 for the remaining lists on the page
5. Position the insertion point to the left of the first item
in the first unordered list, click the Code view button
on the toolbar
•
•
If the Code view button isn’t visible, click View, Toolbars,
Document on the menu bar
Note the tags <ul> and <li> (for unordered list and list item)
6. Click the Design view button on the toolbar
Lesson 1: Create Unordered and Ordered Lists (4)
• Create an ordered list
1. In spa.html, place the insertion point immediately
after the text “5:00 p.m.”, and press [Enter]
2. In the menu bar, click File, Import, Word Document,
navigate to your Data Files for this chapter, and open
questions.doc
3. With the insertion point to the left of the text
“Questions you may have”, click Insert on the menu
bar, point to HTML, click Horizontal Rule
4. Select all the text below “Questions you may have”
5. Click the Ordered List button in the PI
6. Deselect the text
Lesson 1: Create Unordered and Ordered Lists (5)
• Format an ordered list
1. Select all the text below the horizontal rule, then
change the font to Arial, Helvetica, sans-serif, size 3
(using the PI)
2. Select the heading “Questions you may have” and
click the Bold button in the PI
3. Click the Text color button in the PI and click the first
dark blue color in the third row, #000066
4. Deselect the text
5. Save your work
Lesson 2: Create, Apply, and Edit CSS
• Understanding Cascading Style Sheets (CSS)
– CSS consist of rules that define formatting of HTML
elements in a Web page
•
•
•
An external style sheet is a file separate from the Web page
An internal (embedded) style sheet is in the head content of
the Web page to which it applies
An inline style sheet is contained within individual HTML
elements that make up the body of the Web page
• Using the CSS Styles Panel
– The CSS Styles panel provides many options for creating
and applying styles to a single page or all pages in a site
Lesson 2: Create, Apply, and Edit CSS (2)
• Comparing the Advantages of Using Style Sheets
– Using CSS can save enormous amounts of time by
creating or changing styles to all page in a Web site
– CSS can make a Web site look more uniform
– CSS separates form from substance making
maintenance easier
• Understanding CSS Style Sheet Code
– CSS code exists in a style sheet file
– A CSS style (rule) has two parts:
• A selector is the name of the tag to which the style applies
• The declaration is the property and value
Lesson 2: Create, Apply, and Edit CSS (3)
• Create a CSS and a style
1. While in the spa.html page, click Edit on the menu
bar, click Preferences, click the General category
2. Select the Use CSS instead of HTML tags check box,
click OK
3. Expand the CSS panel group and click the CSS Styles
panel tab
4. Click the All button near the top of the CSS panel and
click the New CSS Rule button near the lower right of
the CSS panel
5. Click the Class option button and type bullets in the
Name text box
Lesson 2: Create, Apply, and Edit CSS (4)
• Create a CSS and a style (continued)
6. Click the Define in: list arrow, click (New Style Sheet
File), click OK
7. Type su_styles in the File name text box, click Save
8. Click Type in the Category list
9. Select Arial, Helvetica, sans-serif from the Font list
10. Set Size to 12 pixels, Weight to bold, Style to normal,
Color to #000066, click OK
11. Click the + sign next to su_styles.css in the CSS Styles
panel, then click the bullets style
• Also note that the file su_styles.css is listed in the Files
panel—this file contains code for the style called bullets
Lesson 2: Create, Apply, and Edit CSS (4)
• Apply a Cascading Style Sheet
1. Click View on the menu bar, point to Toolbars, click
Style Rendering
2. Verify that the Toggle Displaying of CSS Styles button
in the Style Rendering toolbar is active
1. A button is active if it has an outline around it
3. Select the text “Revitalizing Facial”
4. In the PI, select bullets from the Style list
• You may need to remove all previous formatting from a
selection before applying a style
5. Repeat Steps 3 and 4 to the remaining bulleted items
Lesson 2: Create, Apply, and Edit CSS (5)
• Edit a Cascading Style Sheet
1. Click .bullets in the CSS Styles panel
1. The properties for the style are displayed in the panel
2. You can also click the Edit Styles button near the bottom of
the CSS Styles panel to edit styles
2. Click 12px in the CSS Styles panel, click the font-size
list arrow, click 14
3. Save your work
Lesson 3: Add Styles and Attach CSS
• Understanding External and Embedded Style
Sheets
– An external style sheet is a separate file with a .css
extension
• Separate file created by the Web designer (you)
– An embedded style sheet is included in the head
content of a Web page
• Done automatically by Dreamweaver when the Preference is
set to Use CSS instead of HTML tags
• Named style1, style2, style2, etc. within a <style> tag
– Use the same style sheet for all pages for consistency
• Use the Attach Style Sheet button on the CSS Styles panel
Lesson 3: Add Styles and Attach CSS (2)
• Add a style to a CSS
1. While in the spa.html page, click the New CSS Rule
button in the CSS Styles panel (lower right corner)
2. Type heading in the Name text box, click OK
3. Set Font to Arial, Helvetica, sans-serif, Size to 16,
Style to normal, Weight to bold, and Color to
#000066, click OK
4. Click the Edit style button in the panel (lower right)
5. Click Block in the Category list, click center in the Text
align list
Lesson 3: Add Styles and Attach CSS (3)
• Add a style to a CSS (continued)
6. Select the heading text “Spa Services”
7. In the PI, select heading from the Style list
8. Repeat Steps 1 through 3 to add another style called
body_text with Arial, Helvetica, sans-serif font, size
14, and normal style
9. Repeat Steps 6 and 7 to apply the body_text style to
just the ordinary text (not the bulleted items or the
heading text “Questions you may have”)
10. Click File on the menu bar, click Save All to save
spa.html and su_styles.css
• You must save a .css file after editing or you will lose changes
Lesson 3: Add Styles and Attach CSS (4)
• Attach a style sheet
1. Close the spa.html page and open index.html (expand
the Files panel if necessary to view files in the site)
2. Click the Attach Style Sheet button in the CSS Styles
panel
3. In the dialog box, click Browse and select
su_styles.css, click OK, click OK again
4. Select the opening paragraph text and select
body_text in the Style list of the PI
5. Click the Code view button in the Document toolbar
to view the HTML code, then click Design view
• Note the following code around line 8: <link
href="su_styles.css" rel="stylesheet" type="text/css" />
Lesson 4: Insert and Align Graphics
• Understanding Graphics File Formats
– There are three primary graphic file formats for the
Web
• GIF (Graphics Interchange Format)
– Limited colors, allow transparent areas
– Subject to licensing restrictions
• JPEG (Joint Photographic Experts Group)
– Millions of colors available, best for photographs
• PNG (Portable Network Graphics)
– Millions of colors, various degrees of transparency (opacity)
– Free to use, but not all browsers support
– The lower right corner of the document in
Dreamweaver displays the file size and download time
• Click Edit, Preferences, Status Bar to select Connection speed
Lesson 4: Insert and Align Graphics (2)
• Understanding the Assets Panel
– The Assets panel is in the Files panel group
– Graphics are automatically added to the Assets panel
– There are 9 category buttons
• Images, Colors, URLs, Flash, Shockwave, Movies, etc.
– The Assets panel has an upper and lower pane
• The upper pane shows a thumbnail of a selected image
• The lower pane lists the assets in a given category
– At the top of the Assets panel are two buttons
• The Site button shows all assets in a given category
• The Favorites button shows only the favorite assets (right
click an asset in the list and click Add to Favorites)
Lesson 4: Insert and Align Graphics (3)
• Inserting Files with Adobe Bridge
– Adobe Bridge is a file management tool
– Adobe Bridge integrates with other Adobe programs
such as Photoshop and Illustrator
– On the menu bar, click File, Browse in Bridge
• Aligning Images
– Aligning means positioning an image relative to other
elements on a Web page
– After selecting an image on a page, click the Align list
arrow in the PI
Lesson 4: Insert and Align Graphics (4)
• Insert a graphic
1. Open dw3_1.html from your Data Files and save as
about_us.html in the striped_umbrella root folder
2. Click Yes to overwrite the existing file, click No to
update links
3. Place the insertion point before “When” in the first
paragraph, click the Common tab on the Insert bar,
click the Images list arrow, then click Image
4. Navigate to the assets folder where you store your
Data Files, double-click club_house.jpg, type Club
House for alternate text, click OK
5. Click the Assets panel tab in the Files panel, click the
Images button on the Assets panel, click the Refresh
Site List button (near the bottom), save the page
Lesson 4: Insert and Align Graphics (5)
• Use Adobe Bridge
1. Place the insertion point before “After” at the
beginning of the second paragraph
2. Click File on the menu bar, click Browse in Bridge,
navigate to your Data Files, then click the thumbnail
image boardwalk.jpg in the assets folder
• You can also click the Browse in Bridge button on the
Standard toolbar
3. Click File on the menu bar, point to Place, click In
Dreamweaver
4. Repeat Steps 1-3 to place the pool.jpg,
sago_palm.jpg, and sports_club.jpg files at the
beginning of the succeeding paragraphs, adding
appropriate alternate text when prompted
Lesson 4: Insert and Align Graphics (6)
• Align an image
1. Click the club house image at the bottom of the page
2. In the PI, click the Align list arrow, then click Left
3. Click the boardwalk image, click the Align list arrow in
the PI, then click Right
4. Align the pool image using the Left Align option
5. Align the sago palm image using the Right Align
option
6. Align the sports club image using the Left Align
option
7. Save you work and preview in your browser
8. Close Adobe Bridge
Lesson 5: Enhance an Image and Use Alternate Text
• Enhancing an image
– To enhance (improve) an image, you need an image
editor such as Adobe Fireworks
– Select an image on a Web page and click Edit in the PI,
opening the image in Fireworks (to be studied later)
– When finished editing the image, click Done to return
– You can use Dreamweaver directly to enhance an image
by adding borders or white space around it
• Using Alternate Text
– Alternate text appears in the image’s placeholder while
it is loading or when the mouse pointer hovers over it
– Alternate text can be “read” by a screen reader to help
the visually impaired
Lesson 5: Enhance an Image and Use Alternate Text
(2)
• Add a border
1. Open the about_us.html page and select the club
house image
2. In the PI, type 1 in the Border text box, press [Tab]
• The border is not visible until you preview in a browser
3. Repeat Step 2 to add borders to the other images
• Add horizontal space
1. Select the club house image, type 7 in the V Space
(vertical space) text box and type 7 in the H Space
(horizontal space) text box
2. Repeat Step 1 for the other four images
Lesson 5: Enhance an Image and Use Alternate Text
(3)
• Apply the Brightness/Contrast feature to graphics
1. Select the boardwalk image
2. Click the Brightness and Contrast button in the PI
3. Drag the Brightness slider to the right until 15
appears in the text box, click OK
• Edit alternate text
1. Select the club house image
2. Click the text in the Alt text box in the PI, type The
Striped Umbrella Club House, press [Enter]
3. Change the alternate text for the other images to be
more descriptive, save your work, preview in browser
Lesson 5: Enhance an Image and Use Alternate Text
(4)
• Set the alternate text accessibility option
1. Click Edit on the menu bar, click Preferences, and click
the Accessibility in the Category list
2. Make sure that all four checkboxes are checked, click
OK
• As a result, you will always be prompted to supply alternate
text when adding graphics to a Web page
Lesson 6: Insert a Background Image and
Perform Maintenance
• Inserting a Background Image
– You can use a background image on a page instead of a
background color to provide additional interest
• A background image should not interfere with text or other
elements on a page—white backgrounds are usually best
– A background image is usually a tiled (repeated) image
going across and down a page
• Managing Images
– You should remove unused images in the assets folder
• Removing Colors from a Web Site
– You should remove Non-Websafe colors (not uniform in
different browsers) using the Assets panel
Lesson 6: Insert a Background Image and
Perform Maintenance (2)
• Insert a background image
1. In about_us.html, click Modify on the menu bar, click
Page Properties, click Appearance in the Category list
2. Click Browse next to the Background Image text box,
navigate to the assets folder in your Data Files, and
double-click umbrella_back.gif, click OK
3. Click the Refresh button in the Files panel
• Note that this is not a good background image, too busy
4. Repeat Steps 1-3 and use stripes_back.gif instead
• Remove a background image from a page
1. Click an open area of the page and click the Page
Properties button in the PI
2. Delete the text for the Background image, click OK
Lesson 6: Insert a Background Image and
Perform Maintenance (3)
• Delete files from a Web site
1. Click the Assets panel tab (in the Files panel group),
click the Images button (upper left), and click the
Refresh Site List button (near the bottom)
2. Right-click stripes_back.gif in the Assets, click Locate
in Site, press [Delete], click Yes
3. Repeat Steps 1-2 to remove umbrella_back.gif
• Check for Non-Websafe colors
1. Click the Assets panel tab, click the Colors button
2. Colors are listed as either Websafe or Non-Websafe
3. Consider replacing colors that are Non-Websafe