Adobe GoLive 6.0- P15

Adobe GoLive 6.0- P15: This book, as well as the software described in it, is furnished under license and may be used or copied only in accordance with theterms of such license. The content of this book is furnished for informational use only, is subject to change without notice, andshould not be construed as a commitment by Adobe Systems Incorporated. Adobe Systems Incorporated assumes no responsibilityor liability for any errors or inaccuracies that may appear in this book
Nội dung trích xuất từ tài liệu:
Adobe GoLive 6.0- P15438 LESSON 12 Using Cascading Style Sheets 4 Enter 5% in the side margin text boxes, and press Enter or Return to indent the margins proportionally. Side margins indented proportionally Block panel settings Notice how the left and right margins around all body text adjusts in the document window. As you can see, properties can control the font, text (including the indentation, spacing, and alignment), box or document boundaries, positioning, border, background, and list elements. Values specify measurements or colors. Note: Browsers continue to add support for style sheet properties. For best results, test the properties that you want to use in the latest versions of the most popular browsers. ADOBE GOLIVE 6.0 439 Classroom in a BookAdding a styleNow you’ll create a new element-based style to alter the way the hypertext links appearthroughout this document, removing the standard HTML underline, changing the color,and applying a boldface font. The standard HTML tags for formatting hypertext links are. Whenever you create a hypertext link using the link command, GoLiveautomatically writes the source code for you, tagging the element with .1 To add a new style to the style sheet, click the New Element Style button ( ) at thebottom of the CSS Editor window. A new item labeled “element” appears in the CSSEditor window under the Internal folder.2 Click the Basic button in the CSS Style Inspector, and name the style a to match theHTML link element. Press Enter or Return.Whenever you create an element style, the element names must match those of the HTMLcode. Style definitions don’t use brackets, so don’t include them as part of the name.The table “Common HTML elements” on page 441 lists common HTML elements anddescribes the GoLive commands used to apply them.3 Click the Font button ( ) in the CSS Style Inspector.4 Below the Decoration options, select None to remove the underline beneath hypertext.Notice that the underlines are removed from the existing links in the document. You mayhave to scroll down the page to see the links “Benjamin Lucas” and “TW Tarwater.”Now you’ll change the color of the hypertext font.5 Choose a color from the Color menu and a weight from the Weight menu. (We choseOlive and a Bolder weight.)440 LESSON 12 Using Cascading Style Sheets GoLive features numerous ways to change the color of links. However, when you use an element-based style to change the appearance of hypertext, you can then update all links on your site globally simply by editing the style. Later in this lesson, you’ll use a similar technique to update the page’s background color. Note: In Windows, to delete an element or class style from a style sheet, select the item in the CSS Editor window, and choose Edit > Delete. 6 Make the index.html document window active. 7 Choose File > Save to save the index.html document. Saving this document also saves the internal style sheet. 8 Close the document. To create hypertext links that change color when the mouse pointer hovers over the link, use a contextual element style named after the link tag. In the CSS Editor choose New Style > a:hover from the context or CSS Editor menu. In the Font set of the CSS Inspector, choose a new color for the style. ADOBE GOLIVE 6.0 441 Classroom in a Book Common HTML elements Here are some common HTML elements that you can use when creating element-based styles in a cascading style sheet. Abbreviation GoLive toolbar or Element name for menu command Block or inline Description a Link or anchor New link Inline Highlighted blockquote Alignment commands Block-level Indented body Block-level Inside canvas br Break Shift+Return Block-level Breaks the line em Emphasis Emphasis or Italic Inline Italic h1, h2... h6 Heading levels Header 1, Header 2, and Block-level Large fonts ...