CIS 205 Web Design Development Dreamweaver Chapter 3

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, 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 12 px 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 style 1, style 2, 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 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 dw 3_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