Adobe Web Tech Curriculum

Unit 6: Hyperlinks, Lists, and CSS

Lesson 6.5: Cascading Style Sheets 3

 !  Lesson Goal:
Create styles for lists using the GoLive Style Editor and explore the CSS Box Model and how it is applied in GoLive.

In this lesson, you will build upon the knowledge learned in the Lists lesson in order to style lists using the GoLive Style Editor, including the integration of images as list bullets. In addition, the CSS Box Model, used to place empty space around elements, will also be discussed.

Introduction to Styles for Lists

CSS Review

This section addresses how to create styles to format numbered lists. You learned about creating internal and external styles in the Cascading Style Sheets 1 lesson. Let's do a brief review and then jump into creating a numbered list using styles.

You should recall the first step in creating an internal style sheet in GoLive is to open the CSS Editor (see Figure 6.5-1). The CSS Editor button GoLive CSS Editor Button is located in the upper right corner of the Document Window.

GoLive CSS Editor
Figure 6.5-1: CSS Editor

The next step involves creating an element style. These steps can be reviewed by going to the Creating Element Styles section of the CSS1 lesson. When you create an element style, it affects the formatting of every occurrence of that element within the page(s) linked to that style sheet. For example, if you create an h1 element style that specifies large, green, Arial text, then all h1 headers will appear in large, green, Arial text unless you override the style for a specific occurrence. The specifics of applying element styles to numbered lists are given below.

List and Other Properties Tab

Once the CSS Editor is open and the element for which a style will be created is identified, the next step is to define the new style in the CSS Style Inspector. We explored the CSS Style Inspector's Font and Text buttons previously; now let's see what options are available for lists.

The CSS Style Inspector List and Other Properties Tab (see Figure 6.5-2) appears when you click the List Item and Others Properties button CSS Inspector List and Others button. Notice the two drop-down boxes labeled Style and Position.

GoLive CSS Style Inspector
Figure 6.5-2: CSS Style Inspector List and Other Properties Tab

The Style drop-down box includes the following generic list options:

  • Unchanged
  • None

It also includes the following numbered list options:

  • Decimal
  • Lower Roman
  • Upper Roman
  • Decimal
  • Lower Alpha
  • Upper Alpha

The Position drop-down box offers three options:

  • Unchanged
  • Inside — List item type is flush with text lines.
  • Outside — List item type includes a first line indent.

Styles for Numbered Lists

To create numbered list element styles, follow these steps:

  1. Open the CSS Editor.
  2. Select the Create a Style that Applies to Markup Elements button New Element Style button at the bottom of the CSS Editor.
  3. Select the default text (i.e., "element") and replace it with the name of the element you wish to style. Because this is a numbered list element style, enter "ol li" as the name for the style in order to reset the default numbered list item type.
  4. Select the List Item and Other Properties button CSS Inspector List and Others button of the CSS Style Inspector.
  5. Select the desired numbered list style from the Style drop-down box. Changes will be seen immediately if the Layout Editor for the page is visible and if the page contains ordered lists that aren't already set to be a specific list type.
  6. Select the desired list position from the Position drop-down box. Changes will be seen immediately if the Layout Editor for the page is visible and if the page contains ordered lists that aren't already set to have a specific position.

Demonstration or Practice Activity

For this activity, you will create a numbered list element style.

  1. Open your "practice" GoLive site created in the Creating a GoLive Site section of the GoLive Basics lesson.
  2. Open a new Document Window.
  3. Create a numbered list with three items.
  4. Open the CSS Editor.
  5. Create a new element style for the ol li element.
  6. Select the Style drop-down box from the Inspector and change the list item type to something other than the default (Arabic). In the Document Window Layout Editor, the numbered list type should change from the default to the selected option.

Styles for Unnumbered Lists

Creating unnumbered list styles utilizes the same steps involved in creating numbered lists. The only differences are in the way you name the element style and in the chosen list item type.

To create unnumbered list element styles, follow these steps:

  1. Open the CSS Editor.
  2. Select the Create a Style that Applies to Markup Elements button New Element Style button at the bottom of the CSS Editor.
  3. Select the default text (i.e., "element") and replace it with the name of the element you wish to style. Because this is an unnumbered list element style, enter "ul li" as the name for the style in order to reset the default unnumbered list item type.
  4. Select the List Item and Other Properties button CSS Inspector List and Others button of the CSS Style Inspector.
  5. Select the desired unnumbered list style from the Style drop-down box. Changes will be seen immediately if the Layout Editor for the page is visible and if the page contains unordered lists that aren't already set to be a specific list type.
  6. Select the desired list position from the Position drop-down box. Changes will be seen immediately if the Layout Editor for the page is visible and if the page contains unordered lists that aren't already set to have a specific position.

Demonstration or Practice Activity

For this activity, you will create an unnumbered element style.

  1. Open your "practice" GoLive site created in the Creating a GoLive Site section of the GoLive Basics lesson.
  2. Open a new Document Window.
  3. Create an unnumbered list with four items.
  4. Open the CSS Editor.
  5. Create a new element style for the ul li element.
  6. Select the Style drop-down box from the Inspector and change the list item type to something other than the default (solid, round bullets). In the Document Window Layout Editor, the unnumbered list type should change from the default to the selected option.

Styles for Nested Lists

You learned about nested lists in the List Levels section of the Lists lesson. Now it's time to learn how to save some time by creating styles for nested lists.

Creating element styles for nested lists follows the same steps referred to previously for numbered and unnumbered lists; however, it requires close attention to the style names used. Notice the style names referred to in the CSS Editor in Figure 6.5-3:

  • ul li — Resets the first level unnumbered list item type.
  • ol li — Resets the first level numbered list time type.
  • ol ol li — Resets the second level numbered list type.

Each successive list level requires either an additional ol or ul depending on the type of list.

GoLive CSS Editor
Figure 6.5-3: CSS Editor

Demonstration or Practice Activity

For this activity, you will create some nested element styles.

  1. Open your "practice" GoLive site created in the Creating a GoLive Site section of the GoLive Basics lesson.
  2. Open a new Document Window.
  3. Create a numbered list with four first-level items, three second-level items, and two third-level items.
  4. Open the CSS Editor.
  5. Create new element styles for each of the following elements:
    1. ol li set to Upper Roman
    2. ol ol li set to Upper Alpha
    3. ol ol ol li set to Lower Roman

NOTE: You may have to click the Document Window's Preview tab in order to see some of the changes; the list may not display as expected in the Layout Editor.


It's
time!

Practice Activity 6.5-A

For this activity, you will create element styles for a nested ordered list to produce an outline study aid for this lesson.

  1. Create a new, blank GoLive document named css3_outline.
  2. Create a title for the page:
    1. Enter the following title: "CSS3 Outline — Study Aid."
    2. Format the title as a Header 1.
    3. Press the Enter key to move to the next line.
    4. Format the new line as a paragraph.
  3. Create the first level of the outline:
    1. Click the Numbered Lists button on the Toolbar.
    2. Enter the following list items. Be sure to press the Enter key after each item.

      Introduction to Styles for Lists
      Styles for Numbered Lists
      Styles for Unnumbered Lists
      Styles for Nested Lists

  4. Create the second level of the outline:
    1. Click at the end of the first list item ("Introduction to Styles for Lists").
    2. Press the Enter key to add another list item.
    3. Click the Increase List Level button in the Toolbar.
    4. Enter the following level-two list items:

      CSS Review
      List and Other Properties Tab

  5. Create the third level of the outline.
    1. Click at the end of the second list item on the second level of the outline ("List and Other Properties Tab").
    2. Press the Enter key to add another list item.
    3. Click the Increase List Level button in the toolbar.
    4. Enter the following level-three list items:

      Style drop-down menu
      Position drop-down menu

  6. Complete the remainder of the outline based on the important concepts in this lesson using the steps described above.
  7. Create element styles to override the default numbered list item types:
    1. Open the CSS Editor.
    2. Create a separate element style for each level of the outline (i.e., ol li, ol ol li, ol ol ol li).
    3. Set the first level of the outline to Upper Roman.
    4. Set the second level of the outline to Upper Alpha.
    5. Set the third level of the outline to Arabic.
  8. Save the document.

Styles for Lists Using Images as Bullets

The CSS Style Inspector List Item and Other Properties tab includes a checkbox for using an image as a list item marker (see Figure 6.5-4).

  1. Open the CSS Editor.
  2. Select the Create a Style that Applies to Markup Elements button New Element Style button at the bottom of the CSS Editor.
  3. Select the default text (i.e., "element") and replace it with the name of the element you wish to style (e.g., ol li or ul li). Remember, if you choose to use an image as an item marker, it will replace the default.
  4. Select the List Item and Other Properties button CSS Inspector List and Others button of the CSS Style Inspector.
  5. Select URL from the drop-down list associated with the Image field.
  6. Click the Browse button to open and navigate to the desired image. Make sure the image is appropriate for this use (e.g., it should be very small).
  7. Click Open. The image will appear in the Layout Editor view.

GoLive CSS Style Inspector
Figure 6.5-4: CSS Style Inspector List and Other Properties Tab

Demonstration or Practice Activity

For this activity, you will create an unordered list style that uses images as bullets.

  1. Place the following images on your Desktop or another location where you can find them easily:
    blue diamond-shaped bullet
    bullet_bluediamond.gif    		 lavender square-shaped bullet
    bullet_lavsquare.gif    		 teal arrowhead-shaped bullet
    bullet_tealarrow.gif
  2. Open your "practice" GoLive site created in the Creating a GoLive Site section of the GoLive Basics lesson.
  3. Open a new Document Window.
  4. Create a unnumbered list with two first-level items, two second-level items, and two third-level items.
  5. Open the CSS Editor.
  6. Create new element styles for each of the following elements:
    1. ul li set to use the teal arrowhead as a bullet
    2. ul ul li set to use the lavender square as a bullet
    3. ul ul ul li set to use the blue diamond as a bullet

NOTE: Remember to view the page in the Document Window's Preview tab in order to see the bullet images.


Class Styles for Lists

Element Styles or Class Styles?

You know how to create element styles for lists; now it's time to learn how to create and apply class styles to lists. Creating and applying class styles to lists is similar to creating and applying class styles to text (see the Type-Related Styles in GoLive section of the CSS1 lesson). This will be a good review and give you an idea of other ways class styles can be used.

But first, let's address a more fundamental question: When should you use element styles versus class styles? Here are some general guidelines:

  • Use element styles when you wish to set the default appearance of an element. For example, if you want a site's h1 and h2 headers or numbered lists or unnumbered lists to look a certain way most of the time, then set the default appearance for that element by creating an element class.
  • Use class styles for variations or exceptions. For example, if you only want particular unnumbered lists within the site to use a certain image as a bullet, then create a class for the ul element. That way, you can call upon the class only in those cases when you wish to use it, but it won't become the default (as it would if you were to create an element style instead).

Creating Class Styles for Use with Lists

As you should recall, class styles don't get applied until you specify where the class is to be used within the HTML document (explained below).

To create class styles for use with lists, follow these steps:

  1. Open the CSS Editor.
  2. Select the Create a New Class Style button GoLive CSS Editor New Class button at the bottom of the CSS Editor.
  3. Select the default text (i.e., ".class") and replace it with the name you wish to give the new class.
  4. Click the List Item and Other Properties button CSS Inspector List and Others button of the CSS Style Inspector.
  5. Select the desired list styles.

Demonstration or Practice Activity

For this activity, you will create a class that will change the selected list item type to an image of your choice.

  1. Place the following images on your Desktop or another location where you can find them easily:
    blue diamond-shaped bullet
    bullet_bluediamond.gif    		 lavender square-shaped bullet
    bullet_lavsquare.gif    		 teal arrowhead-shaped bullet
    bullet_tealarrow.gif
  2. Open your "practice" GoLive site created in the Creating a GoLive Site section of the GoLive Basics lesson.
  3. Open a new Document Window.
  4. Create two separate unnumbered lists, each with three first-level items.
  5. Create three new list-related class styles as follows:
    • .bulletlavender (set to use the lavender square as a bullet)
    • .bulletblue (set to use the blue diamond as a bullet)
    • .bulletteal (set to use the teal arrowhead as a bullet)
  6. Leave this Document Window open; you will use it in the next activity.

Applying Class Styles to Lists

As you learned previously, applying classes requires the use of either the Apply CSS Style button or the CSS Palette. To apply class styles to list items, follow these steps (these steps assume that the class has already been created):

  1. Click the Apply CSS Style button in the Document Window Toolbar or open the CSS Palette:

    Window > CSS

  2. Within the Layout Editor, select the list item(s) to which the desired style should be applied.
  3. Within the Apply CSS Style button or the CSS Palette, click the appropriate checkbox corresponding to the desired style or styles. Typically, changes will be seen immediately if the Layout Editor for the page is visible. However, if the style includes the use of an image for a list item, the image will not be visible until the Preview tab is selected.

Demonstration or Practice Activity

For this activity, you will apply the new class styles to the lists.

  1. Use the document from the previous activity.
  2. Steps relating to the top three-item list:
    1. In Layout view, select the first list on the page (i.e., select the entire list).
    2. Within the CSS Palette, click the Block Style checkbox on the line corresponding to the .bulletlavender class style.
    3. View the page in Preview mode.
    4. View the source code to see how the class was specified for the whole list.
  3. Steps relating to the bottom three-item list:
    1. In Layout view, select the first of the three list items.
    2. Within the CSS Palette, click the Inline Style checkbox on the line corresponding to the .bulletlavender class style.
    3. In Layout view, select the second of the three list items.
    4. Within the CSS Palette, click the Inline Style checkbox on the line corresponding to the .bulletblue class style.
    5. In Layout view, select the third of the three list items.
    6. Within the CSS Palette, click the Inline Style checkbox on the line corresponding to the .bulletteal class style.
    7. View the page in Preview mode.
    8. View the source code to see how the class was specified for each list item.

It's
time!

6.5.1: Individual Assignment

This individual assignment requires you to use two different applications in order to resize an image and use it as a bullet on the concerts.html page of the "Gage_Guitars" site in GoLive.

  • Using Photoshop, resize one of the guitar images available on the Thumbnail page (i.e., acoustic.gif, guitar.gif, or electric.gif) for use as a bullet marker for the concerts.html page of the "Gage_Guitars" site.
  • In GoLive, create a class style that will display the resized guitar image as an image item type in an unnumbered list.

Here are the necessary steps:

  1. Open the desired guitar image in Photoshop:
    1. Open the Photoshop application.
    2. Select Open.
    3. Navigate to the desired guitar image and double-click.
  2. Change the selected image's image size and save it for use as a bullet marker:
    1. Choose Image > Image Size.
    2. Check the Constrain Proportions box.
    3. Enter the desired width and/or height size in the appropriate fields; in this case, don't make the height less than 40-45 pixels, or the image won't look like a guitar anymore.
    4. Click OK.
    5. Save the new image as guitar_bullet.gif.
  3. Close Photoshop.
  4. Open the concerts.html page of the "Gage_Guitars" Web site:
    1. Open the "Gage_Guitars" site file in GoLive.
    2. Open the concerts.html page.
    3. Create an unnumbered list with three items, each item representing one of your favorite performers. Each item should contain three lines separated by br elements: the performer's name on one line, the day, date and time of concert on a second line, and ticket price on a third line. Refer to Individual Assignment 3.4.3 for the thumbnail sketch of the concerts.html page. Your information for each performer should look something like this:

      The Pretenders
      Saturday, November 8, 8:00-10:00
      $50

  5. Create a class style for the guitar image:
    1. Open the CSS Editor.
    2. Select the Create New Class Style button.
    3. Name the new class style name ".guitarlist."
    4. Select the List Item and Others Properties button of the CSS Style Inspector.
    5. Place a check in the Image checkbox.
    6. Click the Browse button to open and navigate to the guitar_bullet.gif image.
    7. Click Open.
  6. Apply the "guitarlist" class style to the unnumbered list of your favorite performers:
    1. Open the CSS Palette or click the Apply CSS Style button.
    2. Select the Layout Editor of the concerts.html page.
    3. Select the list of your three favorite performers.
    4. Select the CSS Palette or click the Apply CSS Style button.
    5. Click the Div checkbox next to the "guitarlist" style.
    6. Select the Preview tab to see the applied style.

6.5.2: Web Team Assignment

Review your team's ideas for the client Web site. Determine whether it would be appropriate to create any classes for lists or to incorporate any images as list bullets. If any such changes are appropriate, integrate them into the Web site's content and style sheet.

CSS Box Model

Although the CSS Box Model doesn't apply specifically or exclusively to lists, it is a very important aspect of cascading style sheets and needs to be discussed before we get further into the curriculum. A good example of how the box model can be applied on a Web page relates to setting a page's margin to accommodate an image on the side of the page. Let's learn a bit about the box model in general and then how to apply it in GoLive.

  1. Properties and Values
  2. Examples

*** Begin section copyright © 2000-2003 ID 4 the Web ***

Properties and Values

The CSS Box Model provides for a way to place empty space around elements. The box consists of space set aside for padding, borders, and margins. Some of the properties and associated values used by the CSS Box Model include:

width Top of Properties and Values section

The width property is used to define the horizontal width of the box. The values associated with the width property can be expressed in absolute terms (e.g., 100px) or in percentage terms (e.g., 20%). You may also use the preset values auto or inherit.

p {width: 50px}

height Top of Properties and Values section

The height property is used to define how tall the box is. The values associated with the height property can be expressed in absolute terms (e.g., 100px) or in percentage terms (e.g., 20%). You may also use the preset values auto or inherit.

p {height: 50px}

margin Top of Properties and Values section

The margin property identifies the margins for the sides of the box. If you want all four margins to be equal, you can simply use the margin property as shown in Example 1 below. Otherwise, you can specify the four sides separately, using properties margin-top, margin-right, margin-bottom, and margin-left as shown in Example 2 below.

Example 1:

body {margin: 20px}

Example 2:

body {margin-top: 20px;
      margin-right: 25px;
      margin-bottom: 30px;
      margin-left: 35px;
      }

border Top of Properties and Values section

The border property is used to surround an element with style, color, etc. The various border properties include border-width (e.g., thin, medium, or thick), border-style (e.g., none, dotted, dashed, solid, double, groove, ridge, inset, or outset) and border-color.

h1 {border-width: medium;
   border-style: solid;
   border-color: blue;
   }

padding Top of Properties and Values section

The padding property is used to identify the white-space between the content and the box border. If you want padding on all sides to be equal, you can simply use the padding property as shown in the example below. You can also specify the padding of each side separately, using properties padding-top, padding-right, padding-bottom, and padding-left.

h1 {padding: 20px}

Examples

To help you understand the relationships among margin, border, and padding, study the CSS Box Model diagram in Figure 6.5-5. As the figure shows, the content (which could be any element, e.g., p or body) is in the center. The content is surrounded by the padding (if any). Outside the padding is the border (if any). Outside the border is the margin (if any).

In the three examples below, we use a paragraph as the content. In each case, the settings of margin, border, and padding are different:

 CSS Box Model

Figure 6.5-5: CSS Box Model

Example Browser Rendering
p {border-width: thin;
   border-style: solid;
   border-color: black;
   padding: 0px;
   margin: 0px;
   }

This paragraph has a thin-width, solid, black border, with no padding on the inside (between paragraph and border) and a 0-pixel margin on the outside (between border and whatever is outside the whole element — in this case, the border of the table cell holding the paragraph).
p {border-width: medium;
   border-style: double;
   border-color: red;
   padding: 10px;
   margin: 15px;
   }

This paragraph has a medium-width, double, red border, with 10 pixels padding on the inside (between paragraph and border) and a 15-pixel margin on the outside (between border and whatever is outside the whole element — in this case, the border of the table cell holding the paragraph).
p {border-width: thick;
   border-style: dashed;
   border-color: black;
   padding: 5px;
   margin: 30px;
   }

This paragraph has a thick-width, dashed, blue border, with 5 pixels padding on the inside (between paragraph and border) and a 30-pixel margin on the outside (between border and whatever is outside the whole element — in this case, the border of the table cell holding the paragraph).

The W3C mentions several ways in which cascading style sheets benefit accessibility:

  • They separate document structure from document presentation. They put much formatting information outside the HTML document, thus simplifying and cleaning up the HTML code, which, in turn, increases accessibility by making the code easier for assistive technologies to understand.
  • They allow precise control over spacing, alignment, positioning, and font size, color, and style.
  • They allow users to override author styles.
  • They support automatically generated numbers and markers to help users stay oriented within a document.
  • They support aural style sheets (ACSS), which specify how documents will sound when rendered as speech.

However, if you choose to use style sheets (and you are encouraged to do so to control layout and presentation), it is critical that your pages are still readable without style sheets. Always check your pages with style sheets turned off to make sure that they remain accessible to those with browsers that don't understand style sheets.

Additional Resources
If you'd like more information about cascading style sheets, see Web Design Group's Cascading Style Sheets page; it has multiple links to many interesting and helpful sites in both informational and tutorial formats. Of course, the ultimate resource is the W3C's CSS page.

*** End section copyright © 2000-2003 ID 4 the Web ***

CSS Box Model Applied in GoLive

External CSS Review

Creating external style sheets was originally addressed in the Cascading Style Sheets 2 lesson. Let's do a brief review before we talk about utilizing the CSS Box Model in GoLive. As mentioned previously, GoLive creates a basic.css external style sheet by default.

To create an external style sheet in GoLive, follow these steps:

  1. Make the following menu selections:

    File > Web > CSS > Basic CSS

    This opens the External CSS Editor (see Figure 6.5-6).

  2. Note the default element styles referenced in the CSS Editor (e.g., body, p, td, etc.).
  3. Save the new external style sheet in the site's site or root folder. The style sheet should have a .css extension.
  4. Add the desired, new style types.
  5. Save the external style again after adding the styles.
  6. Close the CSS Editor.

GoLive CSS Editor
Figure 6.5-6: External CSS Editor

To link an external style sheet to an HTML document, follow these steps:

  1. Open the page to be linked to the external CSS file.
  2. Click the CSS Editor button in the page's Layout Editor.
  3. Click the Create a Reference to an External Style Sheet File button.
  4. Click the CSS Style Inspector's Browse button associated with the Reference field.
  5. Navigate to and select the desired .css file. Once a CSS file has been linked to a page within your site, external .css files will appear within the External folder of the CSS Editor.

CSS Editor Block Tab

The CSS Box Model's margin and padding properties are represented in the CSS Style Inspector Margin and Padding Properties Tab (see Figure 6.5-7). The Block Tab is accessed via the Margin and Padding Properties button GoLive CSS Inspector Block Button. It provides multiple fields for the following sections:

  • Margin — Sets the margins based on the desired unit of measurement
  • Padding — Sets the space between the block border and the style item
  • Block — Sets width and height properties for the current style

The unit of measurement can be selected and/or changed by selecting the pop-up arrow to the right of the desired box field.

GoLive CSS Style Inspector Block Tab
Figure 6.5-7: CSS Style Inspector Block Tab

CSS Editor Border Tab

The CSS Box Model's border property is represented in the CSS Style Inspector Border and Outline Properties tab (see Figure 6.5-8). The Border tab is accessed via the Border and Outline Properties button GoLive CSS Inspector Border Button:

  • The left column is used to set the thickness of the border based on the desired unit of measurement.
  • The middle column is used to set the color of the border.
  • The right column is used to set the style of the border (e.g., solid, double, dashed, etc.).

The unit of measurement (for column one) or the color (for column two) can be selected and/or changed by selecting the pop-up arrow to the right of the desired box field.

GoLive CSS Style Inspector Border Tab
Figure 6.5-8: CSS Style Inspector Border Tab

Demonstration or Practice Activity

For this activity, you will create an external style sheet and link it to the index.html file of your "practice" site.

  1. Open your "practice" GoLive site created in the Creating a GoLive Site section of the GoLive Basics lesson.
  2. Create an external style sheet and save it as practicestyle.css.
  3. In the External CSS Editor, select the body element.
  4. Select the Margin and Padding Properties Tab.
  5. Set the top margin to 40 pixels.
  6. Save the style sheet again.
  7. Open the index.html page of the "practice" site.
  8. Link the practicestyle.css file to the index.html file.
  9. View the index.html file. If there is no text on the page, enter some text to see the application of the external style.

It's
time!

6.5.3: Individual Assignment

This individual assignment requires you edit the existing gage.css external style sheet, apply page margins using the box model, and then link gage.css to the pages in the "Gage_Guitars" site.

  1. Open the gage.css file from the "Gage_Guitars" site:
    1. Open the GoLive application.
    2. Open the "Gage_Guitars" site.
    3. Navigate to and open the gage.css file.
  2. Edit the gage.css file as follows:
    1. Select the body element from the external CSS Editor.
    2. Select the Margin and Padding Properties button in the CSS Inspector.
    3. Set the right margin to 220 pixels.
    4. Set the left margin to 20 pixels.
    5. Select the Background Properties button of the CSS Inspector to verify the logo.gif file is set as the background image.
    6. Save the gage.css file.
  3. Link the gage.css external style sheet to the concerts.html page:
    1. Open the concerts.html page.
    2. Click the CSS Editor button from the page's Layout Editor.
    3. Click the Create a Reference to an External Style Sheet File option.
    4. Click the CSS Style Inspector's Browse button.
    5. Navigate to and select the gage.css file from the site's root folder. The logo should appear in the concerts.html file in the upper left corner. In addition, the unnumbered list and text previously entered on this page should be moved 220 pixels from the left. (If the logo isn't visible in the Layout Editor, click the Preview tab to see the results.)
  4. In similar fashion, link the gage.css file to the Home, Guitars, and Lessons pages of the site.

6.5.4: Individual Assignment

After submitting your pages to the client for review, the client has indicated several issues they would like resolved regarding the Web site:

  1. The current Web site colors do not coincide with the Gage Guitars logo. Based on the color scheme created in Individual Assignment 5.5.1, make adjustments to the site style sheet, button colors, text colors, etc.
  2. The heading levels should integrate the color scheme; adjust them in the site style sheet.
  3. The navigation buttons are too large. Recreate them in a smaller size with appropriate colors.

6.5.5: Web Team Assignment

Create an external style sheet for your client team's site. Apply the style sheet to the Web pages within the site. Meet with your client team to review the styles and identify any issues the client team might have with the color scheme, buttons, text, etc. Establish a timeline for edits and schedule a follow-up meeting with your client team.

Course Home

Copyright © 2002-2005 Adobe Systems Incorporated, except those portions marked copyright © 2000-2005 ID 4 the Web. All rights reserved.