working with text - cengage

AD

OB

E

DR

EA

MW

EA

VE

R

CS

3

3-1

WORKING WITH TEXT AND IMAGES3chapter

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

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:29 PM

3-2

IntroductionMost Web pages contain a combination oftext and images. Dreamweaver providesmany tools for working with text and imagesthat you can use to make your Web pagesattractive and easy to read. Dreamweaveralso has tools that help you format textquickly and ensure a consistent appearanceof text elements across all your Web pages.

Formatting Text as ListsIf a Web page contains a large amountof text, it can be difficult for viewers todigest it all. You can break up the monot-ony of large blocks of text by breakingthem up into smaller paragraphs or organ-izing them as lists. You can create threetypes of lists in Dreamweaver: unorderedlists, ordered lists, and definition lists.

Using Cascading Style SheetsYou can save time and ensure that all yourpage elements have a consistent appearanceby using Cascading Style Sheets (CSS).CSS are sets of formatting instructions,usually stored in a separate file, that controlthe appearance of content on a Web pageor throughout a Web site. You can use CSS to

define consistent formatting attributes forpage elements such as text and tablesthroughout your Web site. You can thenapply the formatting attributes you define toany element in a single document or to all ofthe pages in a Web site.

Using Images to Enhance WebPagesImages make Web pages visually stimulatingand more exciting than pages that containonly text. However, you should use imagessparingly. If you think of text as the meat andpotatoes of a Web site, the images would bethe seasoning. You should add images to apage just as you would add seasoning to food.A little seasoning enhances the flavor andbrings out the quality of the dish. Too muchseasoning overwhelms the dish and masksthe flavor of the main ingredients. Too littleseasoning results in a bland dish. There aremany ways to work with images so that theycomplement the content of pages in a Website. There are specific file formats used tosave images for Web sites to ensure maximumquality with minimum file size. You shouldstore images in a separate folder in anorganized fashion.

WORKING WITH TEXTAND IMAGES

chapter31-4283-1964-6_03_Rev5.qxd 6/22/07 5:29 PM

Tools You’ll Use

3-3

Alt text boxH Space text box Border text box Align list arrow

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:29 PM

L E S S O N 1

What You’ll Do

DREAMWEAVER 3-4 Working with Text and Images

Creating Unordered ListsUnordered lists are lists of items that donot need to be placed in a specific order. Agrocery list that lists items in a randomorder is a good example of an unorderedlist. Items in unordered lists are usuallypreceded by a bullet, or a small raised dotor similar icon. Unordered lists that containbullets are sometimes called bulletedlists. Although you can use paragraphindentations to create an unordered list,bullets can often make lists easier to read.To create an unordered list, first select thetext you want to format as an unorderedlist, then use the Unordered List button inthe Property inspector to insert bulletsat the beginning of each paragraph of theselected text.

Formatting Unordered ListsIn Dreamweaver, the default bullet style isa round dot. To change the bullet style toa square, expand the Property inspector toits full size, as shown in Figure 1, clickList Item in the Property inspector toopen the List Properties dialog box, andthen set the style for bulleted lists toSquare. Be aware, however, that not allbrowsers display square bullets correctly,in which case the bullets will appeardifferently.

Creating Ordered ListsOrdered lists, which are sometimescalled numbered lists, are lists of itemsthat are presented in a specific order andthat are preceded by numbers or letters

In this lesson, you will create an unorderedlist of spa services on the spa page. Youwill also import text with questions andformat them as an ordered list.

▼

CREATE UNORDERED AND ORDERED LISTS

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:29 PM

in sequence. An ordered list is appropri-ate for a list in which each item must beexecuted according to its specified order.A list that provides numbered directionsfor driving from Point A to Point B ora list that provides instructions forassembling a bicycle are both examplesof ordered lists.

Formatting Ordered ListsYou can format an ordered list to showdifferent styles of numbers or letters byusing the List Properties dialog box,as shown in Figure 2. You can applynumbers, Roman numerals, lowercaseletters, or uppercase letters to anordered list.

Creating Definition ListsDefinition lists are similar to unorderedlists but do not have bullets. They are oftenused with terms and definitions, such asin a dictionary or glossary. To create adefinition list, select the text to use for thelist, click Text on the menu bar, point toList, and then click Definition List.

FIGURE 1 Expanded Property inspector

Lesson 1 Create Unordered and Ordered Lists DREAMWEAVER 3-5

FIGURE 2 Choosing a numbered list style in the List Properties dialog box

Propertyinspectorexpanded toits full size

List Item buttonUnordered list buttonOrdered list button

List type list arrow

Numbered liststyles

Click arrow to collapseProperty inspector

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:29 PM


Create an unordered list

1. Open the spa page in The Striped UmbrellaWeb site.

2. Select the three items under the Skin CareTreatments heading.

3. Click the Unordered List button in theProperty inspector to format the selectedtext as an unordered list, click anywhere todeselect the text, then compare your screento Figure 3.

Each spa service item and its description isseparated by a line break. That is whyeach description is indented under itscorresponding item, rather than formattedas a new list item. You must enter aparagraph break to create a new list item.

4. Repeat Step 3 to create unordered lists ofthe items under the Body Treatments,Massages, and Spa Packages headings,being careful not to include the contactinformation in the last sentence on the pageas part of your last list.

TIP Pressing [Enter] (Win) or [return](Mac) once at the end of an unordered listcreates another bulleted item. To end anunordered list, press [Enter] (Win) or[return] (Mac) twice.

You opened the spa page in Design view andformatted four spa services lists as unorderedlists.

FIGURE 3 Creating an unordered list

A paragraph break doescreate a new list item.

A line break does notcreate a new list item

Unordered list

Unordered List button

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:29 PM


Format an unordered list

1. Click any of the items in the first unorderedlist to place the insertion point in the list.

2. Expand the Property inspector (if necessary),click List Item in the Property inspector toopen the List Properties dialog box, click theStyle list arrow, click Square, as shown inFigure 4, then click OK.

The bullets in the unordered list now have asquare shape.

3. Repeat Step 2 to format the next threeunordered lists.

4. Position the insertion point to the left of thefirst item in the first unordered list, then clickthe Show Code view buttontoolbar to view the code for the unorderedlist, as shown in Figure 5.

Notice that there is a pair of HTML codes, ortags, surrounding each type of element on thepage. The first tag in each pair begins the codefor a particular element, and the last tag endsthe code for the element. For instance, the tags<ul></ul> surround the unordered list. The tags<li> and </li> surround each item in the list.

5. Click the Show Design view buttonon the toolbar.

You used the List Properties dialog box to applythe Square bullet style to the unordered lists. Youthen viewed the HTML code for the unordered listsin Code view.

FIGURE 4 List Properties dialog box

FIGURE 5 HTML tags in Code view for unordered list

Style list arrow

In Step 2, click toopen the ListProperties dialog box

Beginning tag forunordered list

First pair of tags for thefirst list item in the list

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:29 PM


Create an ordered list

1. Place the insertion point at the end ofthe page, after the word “5:00 p.m.”

2. Use the Import Word Document commandto import questions.doc from where youstore your Data Files (Win) or openquestions.doc from where you store yourData Files, select all, copy, then paste thecopied text on the page (Mac).

The inserted text appears on the same lineas the existing text.

TIP Remember to remove the check mark inthe Use CSS instead of HTML tags checkbox in the General section of the Preferencesdialog box before importing Word text.

3. Place the insertion point to the left of thetext “Questions you may have,” click Inserton the menu bar, point to HTML, then clickHorizontal Rule.

A horizontal rule appears and helps to sepa-rate the unordered list from the text youjust imported.

4. Select the text beginning with “How do Ischedule” and ending with the last sentenceon the page.

5. Click the Ordered List button in theProperty inspector to format the selectedtext as an ordered list.

6. Deselect the text, then compare your screento Figure 6.

You imported text on the spa page. You also addeda horizontal rule to help organize the page. Finally,you formatted selected text as an ordered list.

FIGURE 6 Creating an ordered list

Orderedlist items

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:29 PM


Format an ordered list

1. Select all the text below the horizontal rule,then change the font to Arial, Helvetica,sans-serif, size 3.

2. Select the heading “Questions you mayhave,” then click the Bold button in theProperty inspector.

3. Click the Text Color button in theProperty inspector to open the color picker,click the first dark blue color in the thirdrow, color #000066, deselect the text, thencompare your screen to Figure 7.

TIP If you want to see more of your Webpage in the Document window, you can col-lapse the Property inspector.

5. Save your work.

You applied a new font and font size to the orderedlist. You also formatted the “Questions you mayhave” heading.

FIGURE 7 Spa page with ordered list

Formattedbody text

Text Color button Bold button

Formattedheading

Click arrow to collapseProperty inspector

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:29 PM

L E S S O N 2

What You’ll Do


CREATE, APPLY, AND EDIT

Understanding CascadingStyle SheetsCSS are made up of sets of formatting attributes called rules, which define theformatting attributes for individual styles,and are classified by where the code is stored.Sometimes the terms “style” and “rule” seemto be used interchangeably to refer to a rulein a style sheet. The code can be saved in aseparate file (external style sheets), as partof the head content of an individual Webpage (internal or embedded styles) or aspart of the body of the HTML code (inlinestyles). External CSS style sheets are savedas files with the .css extension and are storedin the directory structure of a Web site, asshown in Figure 8. They are the preferredmethod for creating and using styles.

CSS are also classified by their function. AClass style can be used to format any pageelement. An HTML style is used to redefinean HTML tag. An Advanced style is used toformat combinations of page elements. In thischapter, we will use class styles stored in exter-nal style sheet files.

Using the CSS Styles PanelYou use the buttons on the CSS Styles panel tocreate, edit, and apply styles. To add a style, usethe New CSS Rule dialog box to name the styleand specify whether to add it to a new or exist-ing style sheet. You then use the CSS Rule defi-nition dialog box to set the formattingattributes for the style. Once you add a newstyle to a style sheet, it appears in a list in theCSS Styles panel. To apply a style, you selectthe text to which you want to apply the style,and then choose a style from the Style listin the Property inspector. You can apply CSSstyles to elements on a single Web page or toall of the pages in a Web site. When you make achange to a style, all page elements formattedwith that style are automatically updated. Onceyou create a CSS style sheet, you can attach itto the remaining pages in your Web site.

The CSS Styles panel is used for managingyour styles. The Properties pane displays prop-erties for a selected style at the bottom of thepanel. You can easily change a property’s valueby clicking an option from a drop-down list.

In this lesson, you will create aCascading Style Sheet file forThe Striped Umbrella Web site.You will also create styles namedbullets and heading and applythem to the spa page.

▼

CASCADING STYLE SHEETS

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:29 PM

Lesson 2 Create, Apply, and Edit Cascading Style Sheets DREAMWEAVER 3-11

Comparing the Advantages ofUsing Style SheetsYou can use CSS styles to save an enor-mous amount of time. Being able to definea rule and then apply it to page elementson all the pages of your Web site meansthat you can make hundreds of formattingchanges in a few minutes. In addition,style sheets create a more uniform lookfrom page to page and they generatecleaner code. Using style sheets separatesthe development of content from the waythe content is presented. Pages formattedwith CSS styles are much more compliantwith current accessibility standards thanthose with manual formatting.

QUICKTIP For more information about Cascading Style Sheets, visitwww.w3.org or view a tutorial at www.adobe.com/go/vid0152.

Understanding CSS StyleSheet CodeYou can see the code for a CSS style byopening a style sheet file. A CSS style con-sists of two parts: the selector and the dec-laration. The selector is the name of thetag to which the style declarations havebeen assigned. The declaration consistsof the property and the value. For example,Figure 9 shows the code for thesu_styles.css style sheet. In this example,

the first property listed for the .bullets styleis font-family. The value for this propertyis Arial, Helvetica, sans-serif. When youcreate a new CSS, you will see it as an opendocument in the Document window. Savethis file as you make changes to it.

FIGURE 8

Cascading Style Sheet filecreated in striped_umbrellaroot folder

FIGURE 9 su_styles.css style sheet file

New CascadingStyle Sheet file

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:29 PM


Create a Cascading StyleSheet and a style

1. Click Edit (Win) or Dreamweaver (Mac) onthe menu bar, click Preferences, click theGeneral category, if necessary, click theUse CSS instead of HTML tags check box,then click OK to turn this default optionback on.

From this point forward, we will use CSSrather than HTML tags to format text. TheProperty inspector font sizes will be shown inpixels rather than HTML text sizes, as shownin Figure 10. You can also set font sizes usingvalues such as “small” or “medium.”

2. Expand the CSS panel group, then click theCSS Styles panel tab (if necessary).

3. Click the Switch to All (Document) Mode button, click the New CSS Rule button in

the CSS Styles panel to open the New CSS Ruledialog box, verify that the Class option button isselected, then type bullets in the Name text box.

TIP Class names are preceded by a period.If you don’t enter a period when you typethe name, Dreamweaver will add the periodfor you.

4. Click the Define in list arrow, click (NewStyle Sheet File) (if necessary), compareyour screen with Figure 11, then click OK.

5. Type su_styles in the File name text box(Win) or the Save As text box (Mac), thenclick Save to open the CSS Rule Definitionfor .bullets in su_styles.css dialog box.

The .bullets rule will be stored within thesu_styles.css file.

(continued)

FIGURE 10 Property inspector after choosing Use CSSrather than HTML tags option

FIGURE 11 New CSS Rule dialog box

Sizes are measured inpixels instead of HTMLtext sizes

Class option forSelector Type

Define in list arrowNew style name

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:29 PM


6. Verify that Type is selected in the Categorylist, set the Font to Arial, Helvetica, sans-serif,set the Size to 12 pixels, set the Weight to bold,set the Style to normal, set the Color to#000066, compare your screen to Figure 12,then click OK.

7. Click the plus sign (Win) or the expanderarrow (Mac) next to su_styles.css in theCSS Styles panel and expand the panel (ifnecessary) to list the .bullets style, thenselect the bullets style.

The CSS style named .bullets and the styleproperties appear in the CSS Styles panel, asshown in Figure 13.

You created a Cascading Style Sheet file namedsu_styles.css and a style called .bullets.

FIGURE 13 CSS Styles panel with bullets style added

Type categoryselected

bullets style

FIGURE 12 CSS Rule Definition for .bullets in su_styles.css dialog box

Properties forbullets style

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:29 PM


Apply a CascadingStyle Sheet

1. Click View on the menu bar, point to Toolbars,then click Style Rendering.

2. Verify that the Toggle Displaying of CSS Stylesbutton on the Style Rendering toolbar isactive, as shown in Figure 14.

TIP You can determine if the ToggleDisplaying of CSS Styles button is active if ithas an outline around the button. As long asthis button is active, you do not have to dis-play the toolbar on the screen.

You can use the Toggle Displaying of CSSStyles button to see how styles affectyour page.

3. Select the text “Revitalizing Facial,” as shown inFigure 15, then use the Property inspector toset the Font to Default Font, the Size to None,and the Style to bullets.

TIP Before you apply a style to selectedtext, you need to remove all formattingattributes such as font and color from thattext, or the style will not be applied correctly.

4. Repeat Step 1 to apply the bullets style to eachof the spa services bulleted items in theunordered lists, then compare your screen toFigure 16.

The font size is too small, which you will fix inthe next lesson.

You applied the bullets style to each item in theSpa Services category lists.

Using the Style Rendering toolbarThe Style Rendering toolbar allows you to render your page as different media types, such asprint, TV, or handheld. To display it when a page is open, click View on the menu bar, point toToolbars, and then click Style Rendering. The buttons on the Style Rendering toolbar allowyou to see how your page will look as you select different media types. The next to the lastbutton on the toolbar is the Toggle Displaying of CSS Styles button, which you can use to viewhow a page looks with styles applied. It works independently of the other buttons. The lastbutton is the Design-time Style Sheets button, which you can use to show or hide particularcombinations of styles while you are working in the Document window.

FIGURE 15 Applying a CSS style to selected text

Styleapplied

ToggleDisplaying ofCSS Stylesbutton

FIGURE 16 Unordered list with bullets style applied

bullets styleapplied to eachof the SpaServices items

FIGURE 14Style Rendering toolbar

Toggle Displaying ofCSS Styles button

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:29 PM


Edit a Cascading StyleSheet

1. Click .bullets in the CSS Styles panel.

The style’s properties and values are dis-played in the Properties pane, the bottompart of the CSS Styles panel, as shown inFigure 17. You can also click the Edit Stylebutton in the CSS Styles panel toopen the CSS Rule Definition for .bulletsdialog box.

TIP Click the plus sign (Win) or expanderarrow (Mac) to the left of su_styles.css inthe CSS Styles panel if you do not see .bul-lets. Click the plus sign (Win) or expanderarrow (Mac) to the left of <style> if you donot see su_styles.css.

2. Click 12px in the CSS Styles panel, click thefont-size list arrow, click 14, then compareyour screen to Figure 18.

The text is larger, reflecting the changes youmade to the bullets style.

TIP If you position the insertion point in textthat has a CSS style applied to it, that styleis displayed in the Style text box on theProperty inspector.

You edited the bullets style to change the font sizeto 14 pixels. You then viewed the results of theedited style in the unordered list.

FIGURE 17 Editing a style

FIGURE 18 Viewing the changes made to the bullets style

Text that hasthe bullets styleapplied to it isnow larger

Properties ofthe bulletsstyle

Font size listarrow

Propertiespane

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:29 PM

L E S S O N 3

What You’ll Do


Understanding External andEmbedded Style SheetsWhen you are first learning about CSS, theterminology can be very confusing. In thelast lesson, you learned that external stylesheets are a separate file in a Web sitesaved with the .css file extension. You alsolearned that CSS can be part of an htmlfile, rather than a separate file. These arecalled internal, or embedded, style sheets.External CSS files are created by the Webdesigner. Embedded style sheets are cre-ated automatically by Dreamweaver whenthe Preference is set to Use CSS instead ofHTML tags. When this preference is set,any formatting choices you make usingthe Property inspector will automaticallycreate a style. The code for these styles will

reside in the head content for that page.These styles will be automatically namedstyle1, style2, and so on. You can renamethe styles as they are created to makethem more recognizable for you to use, forexample, body_text, subheading, oraddress. Embedded style sheets apply onlyto a single page, although you can copythem into the code in other pages.Remember that style sheets can be used toformat much more than text objects. Theycan be used to set the page background,link properties, tables, or determine theappearance of almost any object on thepage. Figure 19 shows the code for someembedded styles. The code resides in thehead content of the Web page.

In this lesson, you will add a style to aCascading Style Sheet. You will then attachthe style sheet file to the index page andapply one of the styles to text on the page.

▼

ADD STYLES AND ATTACH CASCADING STYLE SHEETS

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:29 PM

Lesson 3 Add Styles and Attach Cascading Style Sheets DREAMWEAVER 3-17

When you have several pages in a Web site,you will probably want to use the same CSSstyle sheet for each page to ensure that allyour elements have a consistent appearance.To attach a style sheet to another document,click the Attach Style Sheet button on the

CSS Styles panel to open the Attach ExternalStyle Sheet dialog box, make sure the Add asLink option is selected, browse to locate thefile you want to attach, and then click OK.The styles contained in the attached stylesheet will appear in the CSS Styles panel,

and you can use them to apply styles to texton the page. External style sheets can beattached, or linked, to any page. This is anextremely powerful tool. If you decide tomake a change in a style, it will automati-cally be made to every object that it formats.

FIGURE 19 Code for embedded styles shown in Code view

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:29 PM


Add a style to a CascadingStyle Sheet

1. Click the New CSS Rule button in theCSS Styles panel.

2. Type heading in the Name text box, asshown in Figure 20, then click OK.

3. Set the Font to Arial, Helvetica, sans-serif, setthe Size to 16, set the Style to normal, set theWeight to bold, set the Color to #000066, com-pare your screen to Figure 21, then click OK.

4. Click the Edit Style button .

5. Click the Block category in the CSS RuleDefinition for .heading in su_styles.css dialogbox, click the Text align list arrow, click cen-ter, as shown in Figure 22, then click OK.

6. Select the heading text “Spa Services,” thenuse the Property inspector to set the Formatto None and the Font to Default Font.

7. With the heading still selected, click theText Color button to open the color picker,then click the Default Color button .

8. Click the Style list arrow in the Propertyinspector, then click heading to apply it tothe Spa Services heading.

9. Repeat Steps 1 through 3 to add another stylecalled body_text with the Arial, Helvetica,sans-serif font, size 14, and normal style.

10. Repeat Steps 6 through 8 to apply thebody_text style to the all the text on the pageexcept for the blue text that already has thebullets style applied to it and the heading text“Questions you may have.”

FIGURE 20Adding a style to a CSS Style sheet

FIGURE 21 Formatting options for heading style

FIGURE 22 Setting text alignment for heading style

New style name

Block category selected

Text align list arrow

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:29 PM

Lesson 3 Add Styles and Attach Cascading Style Sheets DREAMWEAVER 3-19

su_styles.css

Code linking external stylesheet file to the index page

Code that applies the body_textstyle to the paragraph

Link optionbutton

body_textstyle applied

headingstyle applied

FIGURE 24 Attaching a style sheet to a page

FIGURE 25 Viewing the code to link the CSS style sheet file

FIGURE 23 Spa page with styles applied

11.Click File on the menu bar, then click SaveAll, to save both the spa page and thesu_styles.css file.

The styles are saved and applied to the text,as shown in Figure 23.

TIP You must save the open su_styles.cssfile after editing it, or you will lose yourchanges.

You added two new styles called heading andbody_text to the su_styles.css file. You thenapplied the two styles to selected text.

Attach a style sheet

1. Close the spa page and open the index page.

2. Click the Attach Style Sheet button onthe CSS Styles panel.

3. Browse to select the file su_styles.css (ifnecessary), click Choose (Mac) verify thatthe Link option button is selected, as shownin Figure 24, then click OK.

4. Select the opening paragraph text, then setthe Font to Default Font and the Size toNone to clear prior formatting.

5. Click the Style list arrow, then clickbody_text.

6. Click the Show Code view buttonand view the code that links the su_styles.cssfile to the index page, as shown in Figure 25.

7. Click the Show Design view button, save your work, then close the

index page.

You attached the su_styles.css file to theindex.html page.

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:29 PM

L E S S O N 4

What You’ll Do


INSERT AND ALIGNGRAPHICS

Understanding Graphic FileFormatsWhen you add graphics to a Web page, it’simportant to choose the appropriategraphic file format. The three primary graphicfile formats used in Web pages are GIF(Graphics Interchange Format), JPEG(Joint Photographic Experts Group), andPNG (Portable Network Graphics). GIF filesdownload very quickly, making them ideal touse on Web pages. Though limited in thenumber of colors they can represent, GIF fileshave the ability to show transparent areas.JPEG files can display many colors. Becausethey often contain many shades of the samecolor, photographs are often saved in JPEGformat. Files saved with the PNG format candisplay many colors and use various degrees oftransparency, called opacity. While the GIFformat is subject to licensing restrictions, thePNG format is free to use. However, not allbrowsers support the PNG format.

QUICKTIPThe status bar displays the download time for the page. Eachtime you add a new graphic to the page, you can see howmuch additional time is added to the total download time.

Understanding theAssets PanelWhen you add a graphic to a Web site, it isautomatically added to the Assets panel.The Assets panel, located in the Filespanel group, displays all the assets in aWeb site. The Assets panel contains ninecategory buttons that you use to view yourassets by category. These include Images,Colors, URLs, Flash, Shockwave, Movies,Scripts, Templates, and Library. To view aparticular type of asset, click the appropri-ate category button. The Assets panel issplit into two panes. When you click theImages button, as shown in Figure 26,the lower pane displays a list of all theimages in your site and contains fourcolumns. The top pane displays a thumb-nail of the selected image in the list. Youcan view assets in each category in twoways. You can use the Site option buttonto view all the assets in a Web site, or youcan use the Favorites option button toview those assets that you have designatedas favorites, or assets that you expect touse repeatedly while you work on the site.You can use the Assets panel to add an

In this lesson, you will insert five graphicson the about us page in The StripedUmbrella Web site. You will then staggerthe alignment of the images on the page tomake the page more visually appealing.

▼

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:30 PM

Lesson 4 Insert and Align Graphics DREAMWEAVER 3-21

asset to a Web page by dragging the assetfrom the Assets panel to the page or byusing the Insert button on the Assets panel.

QUICKTIPYou might need to resize the Assets panel to see all fourcolumns when it is docked. To resize the Assets panel,undock the Files panel group and drag a side or corner ofthe panel border.

Inserting Files with AdobeBridge

You can manage project files, includingvideo and Camera Raw files, with a file-management tool called Adobe Bridge.Bridge is an easy way to view files outsidethe Web site before bringing them into theWeb site. It is an integrated application,working with other Adobe programs suchas Photoshop and Illustrator. You can alsouse Bridge to add meta tags and search textto your files. To open Bridge, click theBrowse in Bridge command on the Filemenu or click the Browse In Bridge buttonon the Standard toolbar.

Aligning ImagesWhen you insert an image on a Web page,you need to position it in relation to otherelements on the page. Positioning animage is referred to as aligning an image.By default, when you insert an image in aparagraph, its bottom edge aligns withthe baseline of the first line of text or anyother element in the same paragraph.When you select an image, the Align textbox in the Property inspector displays the

alignment setting for the image. You canchange the alignment setting using theoptions in the Align menu in the Propertyinspector.

QUICKTIPThe Align menu options function differently from the Alignbuttons in the Property inspector. You use the Align buttonsto center, left-align, or right-align an element without regardto how the element is aligned in relation to other elements.

FIGURE 26The Assets panel

Drag gripper to undock

Images button

Category buttons

Drag any corner or border toresize panel

Thumbnail ofselected image

List of images inWeb site

Favorites option button

Site option button

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:30 PM


Insert a graphic

1. Open dw3_1.htmI from where you store yourData Files, then save it as about_us.html inthe striped_umbrella root folder.

2. Click Yes (Win) or Replace (Mac) to overwritethe existing file, then click No to Update Links.

3. Click the Attach Style Sheet button in theCSS Styles panel, attach the su_styles.cssstyle sheet, then apply the body_text style toall of the paragraph text on the page.

4. Place the insertion point before “When” in thefirst paragraph, click the Common tab on theInsert bar (if necessary), click the Imageslist arrow, then click Image to open theSelect Image Source dialog box.

5. Navigate to the assets folder where you storeyour Data Files, double-click club_house.jpg,type the alternate text Club House if prompted,click OK, then verify that the file was copied toyour assets folder in the striped_umbrella rootfolder.

Compare your screen to Figure 27.

6. Click the Assets panel tab in the Files panelgroup, click the Images button on theAssets panel (if necessary), then click theRefresh Site List button on the Assetspanel to update the list of images in TheStriped Umbrella Web site.

The Assets panel displays a list of all theimages in The Striped Umbrella Web site, asshown in Figure 28.

You inserted one image on the about_us page andcopied it to the assets folder of the Web site.

FIGURE 27The Striped Umbrella about us page with inserted image

FIGURE 28 Image files for The Striped Umbrella Web site listed in Assets panel

Inserted filelisted in theassets folder

club_house.jpg file inserted Path should begin with the word “assets”

Images button

Thumbnail ofselected graphic

Refresh SiteList button

List of images in TheStriped UmbrellaWeb site

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:30 PM


FIGURE 29 Using Adobe Bridge

Click Refresh Site List button to refresh file list

boardwalk.jpgimage is selected

Seven image filescontained in TheStriped UmbrellaWeb site

Use Adobe Bridge

1. Click to place the insertion point before theword “After” at the beginning of the secondparagraph.

2. Click File on the menu bar, click Browse inBridge, navigate to where you store yourData Files, then click the thumbnail imageboardwalk.jpg in the assets folder, asshown in Figure 29.

Bridge is divided into several panels; files andfolders are listed in the Folders Panel. The files inthe selected folder appear in the Content Panel.A picture of the file appears in the Preview Panel.The Metadata and Keywords Panels list any tagsthat have been added to the file.

3. Click File on the menu bar, point to Place,then click In Dreamweaver.

4. Type the alternate text Boardwalk to thebeach, if prompted.

The image appears on the page.

TIP: You can also click the Browse in Bridgebutton on the Standard toolbar to openBridge.

5. Repeat Steps 1–4 to place the pool.jpg,sago_palm.jpg, and sports_club.jpg files atthe beginning of each of the succeedingparagraphs, adding appropriate alternate textif prompted for the pool, sago palm, andsports club images.

After refreshing, your Assets panel shouldresemble Figure 30.

You inserted four images using Adobe Bridge onthe about_us page and copied each image to theassets folder of The Striped Umbrella Web site.

FIGURE 30 Assets panel with seven images

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:30 PM


Align an image

1. Scroll to the top of the page, click the clubhouse image, then expand the Propertyinspector (if necessary).

Because an image is selected, the Propertyinspector displays tools for setting the prop-erties of an image.

2. Click the Align list arrow in the Propertyinspector, then click Left.

The club house photo is now left-aligned withthe text and the paragraph text flows aroundits right edge, as shown in Figure 31.

(continued)

FIGURE 31Left-aligned club house image

Text wrapped aroundclub house image

Left-aligned clubhouse image

Left-aligned option selected

Using Favorites in the Assets panel The assets in the Assets panel can be listed two ways: Site and Favorites. The Site optionlists all of the assets in the Web site in the selected category in alphabetical order. As yourlist of assets grows, you can designate some of the assets that are used more frequentlyas Favorites for quicker access. To add an asset to the Favorites list, right-click (Win) or[control]-click (Mac) the asset name in the Site list, and then click Add to Favorites.When an asset is placed in the Favorites list, it is still included in the Site list. To delete anasset from the Favorites list, select the asset you want to delete, and then press [Delete] orthe Remove from Favorites button on the Assets panel. You can further organize yourFavorites list by creating folders for similar assets and grouping them inside the folders.

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:30 PM


3. Select the boardwalk image, click the Alignlist arrow in the Property inspector, thenclick Right.

4. Align the pool image, using the LeftAlign option.

5. Align the sago palm image, using the RightAlign option.

6. Align the sports club image, using theLeft Align option.

7. Save your work.

8. Preview the Web page in your browser, com-pare your screen to Figure 32, then closeyour browser.

9. Close Adobe Bridge.

You used the Property inspector to set the align-ment for the five images. You then previewed thepage in your browser.

FIGURE 32Aligned images on the about us page

Graphics versus imagesTwo terms that sometimes seem to be used interchangeably are graphics and images.For the purposes of discussion in this text, we will use the term graphics to refer tothe appearance of most non-text items on a Web page such as photographs, logos,navigation bars, Flash animations, graphs, background images, and drawings. A filethat produces any of these page elements is called a graphic file. Files that produceimages on a page are referred to by their file type, or graphic file format, such asJPEG (Joint Photographic Experts Group), GIF (Graphics Interchange Format), orPNG (Portable Network Graphics). We will refer to the actual pictures that you see onthe pages as images. Don’t worry about which term to use. Many people use one termor the other according to habit or region, or use them interchangeably.

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:30 PM

L E S S O N 5

What You’ll Do


Enhancing an ImageAfter you place an image on a Web page,you have several options for enhancing it,or improving its appearance. To makechanges to the image itself, such as remov-ing scratches from it, or erasing parts of it,you need to use an image editor such asAdobe Fireworks or Adobe Photoshop.To edit an image directly in Fireworks fromDreamweaver, first select the image, andthen click Edit on the Property inspector.This will open the Fireworks program.

Complete your editing, and then clickDone to return to Dreamweaver.

QUICKTIPYou can copy a Photoshop PSD file directly intoDreamweaver. After inserting the image, Dreamweaverwill prompt you to optimize the image for the Web.

You can use Dreamweaver to enhance cer-tain aspects of how images appear on apage. For example, you can add bordersaround an image or add horizontal and

In this lesson, you will add borders toimages, add horizontal and vertical space toset them apart from the text, and then addalternate text to each image on the page.

▼

DESIGNTIP Resizing graphics using an external editorEach image on a Web page takes a specific number of seconds to download, dependingon the size of the file. Larger files (in kilobytes, not width and height) take longer todownload than smaller files. It’s important to determine the smallest acceptable sizefor an image on your Web page. Then, if you need to resize an image to reduce thefile size, use an external image editor to do so, instead of resizing it in Dreamweaver.Although you can adjust the width and height settings of an image in the Propertyinspector to change the size of the image as it appears on your screen, these settingsdo not affect the file size. Decreasing the size of an image using the H (height) andW (width) settings in the Property inspector does not reduce the time it will take thefile to download. Ideally you should use images that have the smallest file size andthe highest quality possible, so that each page downloads as quickly as possible.

ENHANCE AN IMAGE ANDUSE ALTERNATE TEXT

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:30 PM

Lesson 5 Enhance an Image and Use Alternate Text DREAMWEAVER 3-27

vertical space. Borders are frames thatsurround an image. Horizontal and verticalspace is blank space above, below, and onthe sides of an image that separates theimage from text or other elements on thepage. Adding horizontal or vertical space isthe same as adding white space, and helpsimages stand out on a page. In the Webpage shown in Figure 33, the horizontaland vertical space around the images in thecenter column helps make these imagesmore prominent. Adding horizontal orvertical space does not affect the widthor height of the image. Spacing aroundWeb page objects can also be created byusing “spacer” images, or clear images thatact as placeholders.

Using Alternate TextOne of the easiest ways to make your Webpage viewer-friendly and accessible to peopleof all abilities is to use alternate text.Alternate text is descriptive text thatappears in place of an image while the imageis downloading or when the mouse pointeris placed over it. You can program somebrowsers to display only alternate text andto download images manually. Alternate textcan be “read” by a screen reader, a deviceused by persons with visual impairments toconvert written text on a computer monitorto spoken words. Screen readers and alter-nate text make it possible for viewers whohave visual impairments to have an imagedescribed to them in detail. One of the

default preferences in Dreamweaver is toprompt you to enter alternate text wheneveryou insert an image on a page.

The use of alternate text is the firstcheckpoint listed in the World Wide WebConsortium (W3C) list of Priority 1checkpoints. The Priority 1 checkpoints

dictate the most basic level of accessibilitystandards to be used by Web developerstoday. The complete list of these and theother priority-level checkpoints are listedon the W3C Web site, www.w3.org. Youshould always strive to meet these criteriafor all Web pages.

FIGURE 33 Lands’ End Web site

Lands’ End Web site used with permission from Lands’ End, Inc. - www.landsend.com

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:30 PM


FIGURE 34 Using the Property inspector to add a border

FIGURE 35 Comparing images with and without horizontal and vertical space

Add a border

1. Select the club house image, then expand theProperty inspector (if necessary).

2. Type 1 in the Border text box, then press[Tab] to apply the border to the club houseimage, as shown in Figure 34.

The border setting is not visible until youpreview the page in a browser.

3. Repeat Step 2 to add borders to the otherfour images.

You added a 1-pixel border to each image on theabout_us page.

Add horizontal space

1. Select the club house image, type 7 in theV Space text box in the Property inspector,press [Tab], type 7 in the H Space text box,then compare your screen to Figure 35.

The text is more evenly wrapped around theimage and is easier to read, because it is notso close to the edge of the image.

2. Repeat Step 1 to set the V Space andH Space to 7 for the other four images.

The spacing under each picture differsbecause of the difference in the lengths ofthe paragraphs.

You added horizontal spacing and vertical spacingaround each image on the about_us page.

Selected imagewith 1-pixel border

H Space text box Border text box

Image with horizontaland vertical space

Image withouthorizontal andvertical space

V Space text box

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:30 PM


Apply the Brightness/Contrastfeature to graphics

1. Select the boardwalk image.

2. Click the Brightness and Contrast buttonin the Property inspector, then click OK

to close the warning dialog box to open theBrightness/Contrast dialog box.

3. Drag the Brightness slider to the right until15 appears in the text box, as shown inFigure 36, then click OK.

The image is now lighter.

4. Repeat Step 3 to adjust any of the otherimages if desired.

TIP In addition to using brightness and con-trast features, you can also scale an image.First, select the image, then drag one of theborders toward the center of the image toreduce it, or drag away from the center of theimage to enlarge it.

You used the Brightness/Contrast dialog box tolighten an image.

FIGURE 36 Brightness and contrast settings for the boardwalk image

Drag slider slightlyto the right

Integrating Photoshop CS3 with DreamweaverDreamweaver has many functions integrated with Photoshop CS3. This new partner-ship includes the ability to copy and paste a Photoshop PSD file directly fromPhotoshop into Dreamweaver. After using the Paste command, Dreamweaver willprompt you to optimize the image by choosing a file format and settings for the Web.After optimization, Dreamweaver will then paste the image on the page. If you wantto edit the image later, simply double-click the image in Dreamweaver and it willopen in Photoshop.

Photoshop users can set Photoshop as the default image editor in Dreamweaver.Click Edit on the menu bar, click Preferences, click Dreamweaver (Mac), click FileTypes/Editors, click the Editors plus sign button to add Photoshop, (if you don’t seeit listed already) and then click Make Primary. You can view a tutorial for Photoshopand Dreamweaver integration on the Adobe Web site at www.adobe.com/go/vid0200.

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:30 PM


Edit alternate text

1. Select the club house image, select anyexisting text in the Alt text box in theProperty inspector (if necessary), type TheStriped Umbrella Club House as shown inFigure 37, then press [Enter] (Win) or[return] (Mac).

2. Save your work, preview the page in yourbrowser, then point to the club house imageuntil the alternate text appears, as shown inFigure 38.

3. Close your browser.

4. Select the boardwalk image, type The board-walk to the beach in the Alt text box, replac-ing any existing text, then press [Enter](Win) or [return] (Mac).

5. Repeat Step 4 to add the alternate text Thepool area to the pool image.

6. Repeat Step 4 to add the alternate text Sagopalm to the sago palm image.

7. Repeat Step 4 to add the alternate text TheSports Club to the sports club image.

8. Save your work.

9. Preview the page in your browser, view thealternate text for each image, then closeyour browser.

You edited the alternate text for five images on thepage, then you viewed the alternate text in yourbrowser.

FIGURE 37Alternate text setting in the Property inspector

FIGURE 38Alternate text displayed in browser

Alt text box

Alternate text appearswhen triggered by themouse pointer

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:30 PM


Set the alternate text accessibility option

1. Click Edit (Win) or Dreamweaver (Mac)on the menu bar, click Preferences to openthe Preferences dialog box, then click theAccessibility category.

2. Verify that the four check boxes are checked,as shown in Figure 39, check them if theyare not checked, then click OK.

TIP Once you set the Accessibility prefer-ences, they will be in effect for all Web sitesthat you develop, not just the one that’sopen when you set them.

You set the Accessibility preferences to promptyou to enter alternate text each time you insert aform object, frame, media, image, or object ona Web page.

FIGURE 39 Preferences dialog box with Accessibility category selected

Check boxes forForm objects,Frames, Media,and Images

Accessibilitycategory

This option is not available in Mac OS X

POWER USER SHORTCUTS

To do this: Use this shortcut:

Switch views [Ctrl][`] (Win) or [control][`] (Mac)

Insert image [Ctrl][Alt][I] (Win) or [ ][option][I] (Mac)

Indent text [Ctrl][Alt][]] (Win) or [ ][option][]] (Mac)

Outdent text [Ctrl][Alt][[] (Win) or [ ][option][[] (Mac)

Align Left [Ctrl][Alt][Shift][L] (Win) or [ ][option][shift][L] (Mac)

Align Center [Ctrl][Alt][Shift][C] (Win) or [ ][option][shift][C] (Mac)

Align Right [Ctrl][Alt][Shift][R] (Win) or [ ][option][shift][R] (Mac)

Align Justify [Ctrl][Alt][Shift][J] (Win) or [ ][option][shift][J] (Mac)

Bold [Ctrl][B] (Win) or [ ][B] (Mac)

Italic [Ctrl][I] (Win) or [ ][I] (Mac)

Refresh [F5]

Browse in Bridge [Ctrl][At][O] (Win) or [ ][option][O] (Mac)

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:30 PM

L E S S O N 6

What You’ll Do


INSERT A BACKGROUND IMAGE

Inserting a Background ImageYou can insert a background image on a Webpage to provide depth and visual interest tothe page, or to communicate a message ormood. Background images are image filesused in place of background colors.Although you can use background images tocreate a dramatic effect, you should avoidinserting them on Web pages where theywould not provide the contrast necessary forreading a well-designed page. Even thoughthey might seem too plain, standard whitebackgrounds are usually the best choice forWeb pages. If you choose to use a back-ground image on a Web page, it should besmall in file size. You can insert either asmall image file that is tiled, or repeated,across the page or a larger image that is notrepeated across the page. A tiled image willdownload much faster than a large image.A tiled image is a small image that repeatsacross and down a Web page, appearing asindividual squares or rectangles. When youcreate a Web page, you can use either a back-ground color or a background image, but

not both, unless you have a need for thebackground color to be displayed while thebackground image finishes downloading.The background in the Web page shown inFigure 40 is a gray-green color, along withan image faded to become the backgroundfor a large portion of the page.

Managing ImagesAs you work on a Web site, you might findthat you accumulate files in your assetsfolder that the Web site does not use. Toavoid accumulating unnecessary files, it’sa good idea to look at an image first, beforeyou place it on the page and copy it to theassets folder. If you inadvertently copy anunwanted file to the assets folder, youshould delete it or move it to another loca-tion. This is a good Web-site managementpractice that will prevent the assets folderfrom filling up with unwanted image files.

Removing an image from a Web page doesnot remove it from the assets folder in thelocal root folder of the Web site. To remove

In this lesson, you will insert two types ofbackground images. You will then use theAssets panel to delete them both fromthe Web site. You will also check forNon-Websafe colors in the Assets panel.

▼

MAINTENANCEAND PERFORM SITE

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:30 PM

Lesson 6 Insert a Background Image and Perform Site Maintenance DREAMWEAVER 3-33

an asset from a Web site, you first locatethe file you want to remove in the Assetspanel. You then use the Locate in Sitecommand to open the Files panel withthe unwanted file selected. You can thenuse the Delete command to remove the filefrom the site.

QUICKTIPYou cannot use the Assets panel to delete a file. You mustuse the Files panel to delete files and perform all file-management tasks.

Removing Colors from aWeb SiteYou can use the Assets panel to locateNon-Websafe colors in a Web site.Non-Websafe colors are colors that maynot be displayed uniformly acrosscomputer platforms. After you replace aNon-Websafe color with another color,you should use the Refresh Site Listbutton on the Assets panel to verify thatthe color has been removed. Sometimesit’s necessary to press [Ctrl] (Win) or (Mac) while you click the Refresh Site Listbutton. If refreshing the Assets panel doesnot work, try re-creating the site cache,and then refreshing the Assets panelagain.

QUICKTIPTo re-create the site cache, click Site on the menu bar, pointto Advanced, then click Recreate Site Cache.

FIGURE 40The Mansion on Turtle Creek

The Mansion on Turtle Creek Web site used with permission from The Mansion on Turtle Creek, A Rosewood Hotel - www.mansiononturtlecreek.com

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:30 PM


Insert a background image

1. Click Modify on the menu bar, then clickPage Properties to open the Page Propertiesdialog box.

2. Click the Appearance category, if necessary.

3. Click Browse next to the Background imagetext box, navigate to the assets folder whereyou store your Data Files, then double-clickumbrella_back.gif.

The umbrella_back.gif file is automaticallycopied to The Striped Umbrella assets folder.

4. Click OK to close the Page Propertiesdialog box, then click the Refresh Site Listbutton to refresh the file list in theAssets panel.

A file with a single umbrella forms a back-ground made up of individual squares,replacing the white background, as shown inFigure 41. It is much too busy and makes itdifficult to read the page.

5. Repeat Steps 1–4 to replace theumbrella_back.gif background image withstripes_back.gif, located in the chapter_3assets folder.

As shown in Figure 42, the striped backgroundis also tiled, but with vertical stripes, so youaren’t aware of the small squares making upthe pattern. It is still too busy, though.

You applied a tiled background to the about uspage. Then you replaced the tiled background withanother tiled background that was not as busy.

FIGURE 41 The about_us page with a busy tiled background

FIGURE 42The about_us page with a more subtle tiled background

Each umbrella isa small squarethat forms a tiledbackground

It is harder totell where eachsquare ends

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:30 PM


Remove a background imagefrom a page

1. Click Modify on the menu bar, click PageProperties, then click Appearance.

2. Select the text in the Background image textbox, as shown in Figure 43, press [Delete],then click OK.

The background of the about us page iswhite again.

You deleted the link to the background image file tochange the about us page background back towhite.

FIGURE 43Removing a background image

Selected filename

Understanding HTML body tagsWhen you are setting page preferences, it is helpful to understand the HTML tagsthat are being generated. Sometimes it’s much easier to make changes to the code,rather than use menus and dialog boxes. The <body> </body> tags define the begin-ning and end of the body section of a Web page. The page content falls between thesetwo tags. If you want to change the page properties, additional codes must be addedto the <body> tag. The tag to add a color to the page background is bgcolor, so thetag will read <body bgcolor=“#000000”>, where the numbers following the poundsign indicate a color. If you insert an image for a background, the code will read<body background=“assets/stripes.gif”>. The filename between the quotation marksis the name of the image file used for the background.

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:30 PM


Delete files from a Web site

1. Click the Assets panel tab, then click theImages button (if necessary).

2. Right-click (Win) or [control]-click (Mac)stripes_back.gif in the Assets panel, clickLocate in Site to open the Files panel, selectstripes_back.gif in the Files panel (if necessary),press [Delete], then click Yes in the dialog boxthat appears.

TIP Refresh the Assets panel if you still seethe file listed.

3. Repeat Step 2 to remove umbrella_back.giffrom the Web site, open the Assets panel,then refresh the Assets panel.

TIP If you delete a file in the Files panel thathas an active link to it, you will receive awarning message. If you rename a file in theFiles panel that has a link to it, the Filespanel will update the links to correctly link tothe renamed file. To rename a file, right-click(Win) or [control]-click (Mac) the file youwant to rename, point to Edit, click Rename,then type the new name.

Your Assets panel should resemble Figure 44.

You removed two image files from The StripedUmbrella Web site, then refreshed the Assets panel.

Managing image files It is a good idea to store original unedited copies of your Web site image files in a sep-arate folder, outside the assets folder of your Web site. If you edit the original files,save them again using different names. Doing this ensures that you will be able to finda file in its original, unaltered state. You may have files on your computer that you arecurrently not using at all, however, you may need to use them in the future. Storingcurrently unused files also helps keep your assets folder free of clutter. Storing copiesof original Web site image files in a separate location also ensures that you have back-up copies in the event that you accidentally delete a file from the Web site.

FIGURE 44Images listed in Assets panel

Images file listafter removingumbrella_back.gifand stripes_back.gif

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:30 PM


Check for Non-Websafe colors

1. Click the Colors button in the Assetspanel to display the colors used in theWeb site, then drag the left border of theAssets panel (if necessary) to displaythe second column, as shown in Figure 45.

The Assets panel does not list any Non-Websafe colors.

2. Save your work, preview the page in yourbrowser, close your browser, then close allopen files.

TIP If previewing the page in InternetExplorer 7, click the Information bar whenprompted to allow blocked content.

You checked for Non-Websafe colors in the Assetspanel list of colors.

FIGURE 45Colors listed in Assets panel

Drag the border to the leftto expand panel width

Both colorsare Websafe

Using color in compliance with accessibility guidelinesThe second guideline listed in the World Wide Web Consortium (W3C) list of Priority 1Checkpoints is to not rely on the use of color alone. This means that if your Web sitecontent is dependent on your viewer correctly seeing a color, then you are not provid-ing for those people who cannot distinguish between certain colors or do not havemonitors that display color.

Be especially careful when choosing color used with text to provide a goodcontrast between the text and the background. It is better to reference colors asnumbers, rather than names. For example, use “#FFFFFF” instead of “white.” Usingstyle sheets for specifying color formats is the preferred method for coding. For moreinformation, see the complete list of priority level checkpoints listed on the W3CWeb site, www.w3.org.

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:30 PM


S K I L L S R E V I E W

Create unordered and ordered lists.

1. Open the blooms & bulbs Web site.2. Open the tips page.3. Select the four lines of text below the

Seasonal Gardening Checklist headingand format them as an unordered list. (Hint :If each line does not become a separate listitem, enter a paragraph break between eachline, then remove any extra spaces.)

4. Select the lines of text below the BasicGardening Tips heading and format themas an ordered list.

5. Save your work.

Create, apply, and edit CascadingStyle Sheets.

1. Create a new CSS rule named seasons,making sure that the Class option button isselected in the Selector Type section andthat the (New Style Sheet File) option buttonis selected in the Define in section of theNew CSS Rule dialog box.

2. Click OK, name the style sheet fileblooms_styles in the Save Style Sheet FileAs dialog box, then click Save.

3. Choose the following settings for theseasons style: Font = Arial, Helvetica,sans-serif, Size = medium,Style = normal, Weight = bold, and Color = #003366.

4. Change the Font setting to Default Font andthe Size setting to None for the followingwords in the Seasonal Gardening Checklist:“Fall,” “Winter,” “Spring,” and “Summer.”

Apply the seasons style to Fall, Winter,Spring, and Summer.

5. Edit the seasons style by changing the fontsize to 16 pixels.

Add styles and attach cascading stylesheets.

1. Add an additional style called headings inthe blooms_styles.css file and define thisstyle choosing the following type settings:Font = Arial, Helvetica, sans-serif, Size =large Style = normal, Weight = bold, andColor = #003366.

2. Apply the headings style to the two sub-headings on the page: Seasonal GardeningChecklist and Basic Gardening Tips. (Hint:Make sure you remove any manual format-ting before applying the style.)

3. Click File on the menu bar, click Save All,then view the page in the browser. (Hint: Ifpreviewing the page in Internet Explorer 7,click the Information bar when prompted toallow blocked content.)

4. Close the browser and all open pages.

Insert and align graphics.

1. Open dw3_2.html from where you storeyour Data Files, then save it as plants.htmlin the blooms & bulbs Web site, overwritingthe existing plants.html. Do not update links.

2. Verify that the path of the blooms & bulbsbanner is set correctly to the assets folder inthe blooms root folder.

3. Set the Accessibility preferences to prompt you

to add alternate text to images (if necessary).4. Use Adobe Bridge to insert the petunias.jpg

file from the assets folder where you storeyour Data Files to the left of the words“Pretty petunias” and add Petunias asalternate text.

5. Insert the verbena.jpg file from assets folderwhere you store your Data Files in front of thewords “Verbena is one” and add Verbena asalternate text.

6. Insert the lantana.jpg file from the assetsfolder where you store your Data Files infront of the words “Dramatic masses” andadd Lantana as alternate text.

7. Refresh the Files panel to verify that all threeimages were copied to the assets folder.

8. Left-align the petunias image.9. Right-align the verbena image.10. Left-align the lantana image.11. Save your work.

Enhance an image and editalternate text.

1. Apply a 1-pixel border and horizontal spacingof 20 pixels around the verbana image.

2. Apply a 1-pixel border and horizontal spacingof 20 pixels around the verbana image.

3. Apply a 1-pixel border and horizontal spacingof 20 pixels around the lantana image.

4. Save your work, preview it in the browser,then compare your screen to Figure 46.

5. Close the browser and open the tips pageand add H Space of 10 and V Space of 10 tothe garden_tips.jpg image.

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:30 PM

6. Left-align the garden tips image, then com-pare your screen to Figure 47.

7. Save your work.

Insert a background image andmanage graphics.

1. Switch to the plants page, then insert thedaisies.jpg file as a background image fromthe assets folder where you store your DataFiles.

2. Save your work.3. Preview the Web page in your browser, then

close your browser.4. Remove the daisies.jpg file from the

background. 5. Open the Assets panel, then refresh the

Files list. 6. Use the Files panel to delete the daisies.jpg

file from the list of images.7. Refresh the Assets panel, then verify that

the daisies.jpg file has been removed fromthe Web site.

8. View the colors used in the site in the Assetspanel, then verify that all are Websafe.

9. Save your work, then close all open pages.

S K I L L S R E V I E W ( C O N T I N U E D )

Working with Text and Images DREAMWEAVER 3-39

FIGURE 46Completed Skills Review

FIGURE 47Completed Skills Review

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:30 PM

P R O J E C T B U I L D E R 1

Use Figures 48 and 49 as guides to con-tinue your work on the TripSmart Web sitethat you began in Project Builder 1 in Chapter 1, and continued to work on inChapter 2. You are now ready to formattext on the newsletter page and begin workon the destinations page that showcasesone of the featured tours to Kenya. Youwant to include some colorful pictures andattractively formatted text on the page.

1. Open the TripSmart Web site.2. Open dw3_3.html from where you store

your Data Files and save it in the tripsmartroot folder as newsletter.html, overwritingthe existing newsletter.html file and notupdating the links.

3. Verify that the path for the banner iscorrectly set to the assets folder of theTripSmart Web site. Create an unorderedlist from the text beginning “Expandableclothesline” to the end of the page.

4. Create a new CSS rule called body_textmaking sure that the Class option button isselected in the Selector Type section and that

the (New Style Sheet File) option button isselected in the Define in section of the NewCSS Rule dialog box.

5. Save the style sheet file as tripsmart_styles.cssin the TripSmart Web site root folder.

6. Choose a font, size, style, color, and weightof your choice for the body_text style.

7. Apply the body_text style to all of the text onthe page except the “Ten Packing Essentials”heading on the newsletter page.

8. Create another style called heading with afont, size, style, color, and weight of yourchoice and apply it to the “Ten PackingEssentials” heading.

9. Type Travel Tidbits in the Title text box onthe Document toolbar, then save and closethe newsletter page.

10. Open dw3_4.html from where you storeyour Data Files and save it in the tripsmartroot folder as destinations.html, overwrit-ing the existing destinations.html file. Donot update links.

11. Insert zebra_mothers.jpg from the assetsfolder where you store your Data Files to the

left of the sentence beginning “Our next,”then add appropriate alternate text.

12. Insert lion.jpg from the assets folder whereyou store your Data Files to the left of thesentence beginning “This lion,” then addappropriate alternate text.

13. Align both images using the Align list arrow inthe Property inspector with alignments of yourchoice, then add horizontal spacing, verticalspacing, or borders if desired.

14. Apply the heading style to the “Destination:Kenya” heading and the body_text style tothe rest of the text on the page.

15. Apply any additional formatting to enhancethe page appearance, then add the page titleDestination: Kenya.

16. Verify that the Accessibility Preferenceoption is turned on.

17. Save your work, then preview the destina-tions page in your browser. (Hint: If pre-viewing the page in Internet Explorer 7, clickInformation bar when prompted to allowblocked content.)

18. Close your browser, then close all open files.


1-4283-1964-6_03_Rev5.qxd 6/22/07 5:30 PM

P R O J E C T B U I L D E R 1 ( C O N T I N U E D )


FIGURE 48Sample Project Builder 1

FIGURE 49Sample Project Builder 2

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:31 PM

P R O J E C T B U I L D E R 2

In this exercise, you continue your workon the Carolyne’s Creations Web site thatyou started in Project Builder 2 inChapter 1, and continued to build inChapter 2. You are now ready to add twonew pages to the Web site. One pagewill display featured items in the kitchenstore and one will be used to showcase arecipe. Figures 50 and 51 show possiblesolutions for this exercise. Your finishedpages will look different if you choose dif-ferent formatting options.

1. Open the Carolyne’s Creations Web site.2. Open dw3_5.html from where you store your

Data Files, save it to the Web site root folderas recipes.html, overwriting the existing fileand not updating the links.

3. Format the list of ingredients as anunordered list.

4. Create a CSS rule named body_text andsave the style sheet file as cc_styles.css in

the Web site root folder. Use any formattingoptions that you like, and then apply thebody_text style to all text except the text“Cranberry Ice” and “Directions.”

5. Create another style called headings usingappropriate formatting options and apply itto the text “Cranberry Ice” and “Directions.”

6. Insert the file cranberry_ice.jpg from whereyou store your Data Files, then place it on thepage, using alignment, horizontal space, andvertical space settings. (Hint : In Figure 50the align setting is set to left, H space is setto 30, and V space is set to 10.

7. Add appropriate alternate text to the banner,then save and close the file.

8. Open dw3_6.html from where you storeyour Data Files and save it as shop.html,overwriting the existing file and not updatingthe links.

9. Attach the cc_styles.css style sheet andcreate a new style named sub_head to usein formatting the text “January Specials -Multifunctional Pot and Cutlery Set.” Useany formatting options that you like. Applythe body_text style to the rest of the text onthe page.

10. Insert the pot_knives.jpg image from theassets folder where you store your Data Filesnext to the paragraph beginning “We try,”choosing your own alignment and spacingsettings and adding appropriate alternate text.

11. Save all pages, then preview both newpages in the browser, (Hint: If previewingthe page in Internet Explorer 7, click theInformation bar when prompted to allowblocked content.)

12. Close your browser, then close all openpages.


1-4283-1964-6_03_Rev5.qxd 6/22/07 5:31 PM

P R O J E C T B U I L D E R 2 ( C O N T I N U E D )


FIGURE 50Completed Project Builder 2

FIGURE 51Completed Project Builder 2

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:31 PM

D E S I G N P R O J E C T

Don Chappell is a new sixth-grade historyteacher. He is reviewing educational Websites for information he can use in hisclassroom.

1. Connect to the Internet, then navigate tothe Library of Congress Web site atwww.loc.gov. The Library of Congress Website is shown in Figure 52.

2. Which fonts are used for the main contenton the home—serif or sans-serif? Are thesame fonts used consistently on the otherpages in the Web site?

3. Do you see ordered or unordered lists onany pages in the Web site? If so, how arethey used?

4. Use the Source command on the View menuto view the source code to see if a stylesheet was used.

5. Do you see the use of Cascading StyleSheets noted in the source code?

6. Select another site from the list andcompare the use of text on the two sites.


FIGURE 52Design Project

Library of Congress Web site - www.loc.gov

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:31 PM

P O R T F O L I O P R O J E C T

In this assignment, you will continue towork on the Web site that you started inChapter 1, and continued to build inChapter 2. No Data Files are supplied.You are building this Web site from chap-ter to chapter, so you must do eachPortfolio Project assignment in eachchapter to complete your Web site.

You continue building your Web site bydesigning and completing a page thatcontains a list, headings, body text,images, and a background. During thisprocess, you will develop a style sheet andadd several styles to it. You will insertappropriate images on your page andenhance them for maximum effect. Youwill also check for Non-Websafe colorsand remove any that you find.

1. Consult your storyboard and decide whichpage to create and develop for this chapter.

2. Plan the page content for the page and makea sketch of the layout. Your sketch shouldinclude at least one ordered or unorderedlist, appropriate headings, body text, severalimages, and a background color or image.Your sketch should also show where thebody text and headings should be placed onthe page and what styles should be used foreach type of text. You should plan on creat-ing at least two styles.

3. Create the page using your sketch forguidance.

4. Create a Cascading Style Sheet for the Website and add to it the styles you decided to use.Apply the styles to the appropriate content.

5. Access the images you gathered inChapter 2, and place them on the page sothat the page matches the sketch you cre-ated in Step 2. Add a background image ifyou want, and appropriate alternate textfor each image.

6. Remove any Non-Websafe colors.7. Identify any files in the Assets panel that are

currently not used in the Web site. Decidewhich of these assets should be removed,then delete these files.

8. Preview the new page in a browser, thencheck for page layout problems andbroken links. Make any necessarycorrections in Dreamweaver, then previewthe page again in the browser. Repeat thisprocess until you are satisfied with the waythe page looks in the browser. (Hint: If pre-viewing the page in Internet Explorer 7, clickthe Information bar when prompted to allowblocked content.)

9. Use the checklist in Figure 53 to check allthe pages in your site.

10. Close the browser, then close the openpages.

Web Site Checklist1. Does each page have a page title?2. Does the home page have a description and keywords?3. Does the home page contain contact information?4. Does every page in the Web site have consistent navigation links?5. Does the home page have a last updated statement that will

automatically update when the page is saved?6. Do all paths for links and images work correctly?7. Do all images have alternate text?8. Are all colors Websafe?9. Are there any unnecessary files you can delete from the assets folder?10. Is there a style sheet with at least two styles?11. Did you apply the styles to all text blocks?12. Do all pages view well using at least two different browsers?

FIGURE 53 Portfolio Project check list


1-4283-1964-6_03_Rev5.qxd 6/22/07 5:31 PM

1-4283-1964-6_03_Rev5.qxd 6/22/07 5:31 PM

working with text - cengage

Documents