Lesson 1

Create and Use Embedded Styles


In this lesson, you will replace your Striped Umbrella files by importing a revised website.  Next, you will create and apply an embedded style to the home page.


Sample Solution


Import the Revised Striped Umbrella website

  1. Open Windows Explorer, then navigate to the Data Files for this chapter on the server, so that the files appear in the right pane
  2. If you still have your files from last year then in the left pane, navigate to your striped_umbrella folder on the server, right-click it, then click Delete—confirm
    the deletion if a confirmation dialog box opens
  3. Copy the striped_umbrella folder from the Chapter 7 Data Files folder in the right pane to the folder where you save your files on the server in the left pane—the redesigned pages in the new folder replace your previous root folder
  4. Close Windows Explorer, then start Dreamweaver
  5. Click Site (on the Application bar), click Manage Sites, verify that The Striped Umbrella website is selected, click Remove, then click Yes in the warning dialog box—it is better to remove the previous site, because the site you will be importing has the same name—remember that deleting a website in the Manage Sites dialog box does not actually delete the files, it just deletes the site definition
  6. Click Import—the Import Site dialog box opens
  7. Click the Look in list arrow to navigate to the Chapter 7 Data Files folder, click ‘The Striped Umbrella.ste’, then click Open—the .ste file is an XML file that contains information about the website, including any information entered in the Manage Sites dialog box
  8. Navigate to the striped_umbrella folder that you moved in Step 3, click the folder, click Open, then  click Select—the Choose local images folder for site The Striped Umbrella dialog box opens
  9. Click the assets folder in the striped_umbrella folder, click Open, then click Select—this sets the Default Images Folder path to the assets folder located in the striped_umbrella folder
  10. Verify that The Striped Umbrella site is selected in the Manage Sites dialog box, then click Edit
  11. Verify that the striped_umbrella folder is the root folder for the website and the assets folder under the  striped_umbrella folder is the default location for images
  12. Click OK, then click  Done
    [TIP:  If you do not see the files listed in the Files panel, click the plus sign next to the root folder]

Summary:  You copied the striped_umbrella folder from the Chapter 7 Data Files folder to a different drive or folder on your computer or external drive.  You then imported the revised Striped Umbrella site and verified that the root folder was set to the striped_umbrella folder that you copied.  You also verified that the default images folder is still the assets folder of the striped_umbrella folder.


Create a custom style

  1. Open the index page in The Striped Umbrella website, expand the CSS Styles panel, then click the Switch to All (Document) Mode button—the new, redesigned home page is now based on a CSS layout—the CSS block elements are outlined with dotted borders
  2. Click the New CSS Rule button in the CSS Styles panel to open the New CSS Rule dialog box
  3. Click the Selector Type list arrow, click Class (can apply to any HTML element), click in the Selector Name text box, type contact_info click the Rule Definition list arrow, click (This document only)
  4. Click OK to open the CSS Rule definition for .contact_info dialog box, and verify that the Type category is selected
  5. Set the Font-family to Arial, Helvetica, sans-serif
    Set the Font-size to small
    Set the Font-style to italic
    Set the Color to #033
  6. Click OK—the contact_info style appears in the CSS Styles panel
    [TIP:  If you do not see the contact_info style, click the plus sign next to in the CSS Styles panel]

Summary:  You created a new custom style named contact_info and set the properties for it.


Apply a custom style

  1. Select the paragraph with The Striped Umbrella contact information
  2. Click the Italic button in the HTML Property inspector to remove the italic formatting—you must remove manual formatting before applying a CSS style
  3. Click the Class list arrow in the Property inspector, click contact_info, then deselect the text—the selected text is now
    a dark gray, the color specified by the contact_info rule
  4. Scroll down in the CSS Styles panel if necessary to view the contact _info rule—the contact_info rule is displayed in the CSS Styles panel, but not as a part of the su_styles.css style sheet—the contact_info rule is an embedded rule, along with the rules that are used to define the CSS layout and the other rule created to format text—the bold_blue,
    heading, and paragraph_text rules are external styles that reside in the su-styles.css file
  5. Save your work to your server folder

Summary:  You used the Property inspector to apply the contact_info rule to selected text.