Dreamweaver MX 2004 phần 4 potx

4306c08.qxd 3/18/04 8:32 PM Page 187 hands on: create an image map ■ 187 4. When Dreamweaver has compared the local and remote files and indicated the documents that need updating, uncheck any files you don’t want updated and then click OK (Figure 8.19). 5. When the synchronization is complete, click the Save Log but- ton if you wish to keep a record of the update. Figure 8.18 Hands On: Create an Image Map Update corrected links to your remote Now you can try out an image map yourself and discover how easy this is to do in site with the Syn- Dreamweaver! Hand-coding an image map involves using a graphics program to define chronize Files areas and find coordinates and then writing a block of code to define the map. Dreamweaver dialog box enables you to do all that without leaving Dreamweaver itself, and it’s easy and fast! In the Chapter 8 folder on the accompanying CD, find the page named header_nomap.html. This page is used in the top frame in the One Tech site, and contains the header graphic. Create Hotspots You will create two hotspots for links to the LogIn page and the Search page: 1. Open Dreamweaver. 2. Open header_nomap.html from the CD. 3. Select the graphic ( header.jpg). 4. Open the Property inspector if it’s not already visible in the Dreamweaver window (Window ➔ Properties). Figure 8.19 5. Click on the downward-arrow in the bottom-right corner for the expanded view of The Synchronize the Property inspector. command makes you preview the 6. Choose the rectangular selection map tool. intended changes so you have a 7. In the upper-right corner of the graphic, click and drag with the rectangular selection chance to verify the files to upload map tool to create a rectangular hotspot around the word Login. before proceeding. 8. Change the size of the rectangle, if needed, by using the Pointer Hotspot tool (the arrow on the left) on any of the four highlighted spots in the corners of the rectangle. 9. Repeat step 7 to create a rectangular hotspot around the word Search. 10. By default, Dreamweaver names the map and puts this name in the Map text box. To change it from the default Map, just select the text and replace with a name of your choice. 4306c08.qxd 3/18/04 8:32 PM Page 188 188 ■ chapter 8: Making and Maintaining Hyperlinks Link the Hotspots Now the map is complete except for putting in the links: 1. Select the LogIn hotspot. 2. In the Property inspector, type in login.html in the Link text box. (Be sure to delete the # that appears there by default.). 3. Type LogIn page in the Alt text box. 4. Repeat for the Search hotspot. Link to search.html and type Search in the Alt text box. It’s that easy! And it doesn’t matter if you’re creating two hotspots or 20 hotspots, it’s still easy. To view the completed map page, open header.html from the Chapter 8 folder on the CD. To view the completed map page within the frameset, open Map_8.htm. Separating Content from Presentation Now you know how to create and manage the links that make your website an intercon- nected part of the Web and not a series of disconnected web pages. In the next chapter, we’ll take an in-depth look at Cascading Style Sheets (CSS) and all the new features Dreamweaver MX 2004 has added for using CSS in Dreamweaver. Or, if you prefer to continue with links and navigation, skip ahead to Chapter 13, where we discuss jump menus and other navigation objects. 4306c09.qxd 3/18/04 8:32 PM Page 189 CHAPTER 9 Cascading Style Sheets In the ongoing effort to separate content from presentation on the Web, CSS (Cascad- ing Style Sheets) is a powerful weapon. It’s also, in some ways, a well-kept secret. Although CSS has been available since 1996, browser support in the past has been partial and inconsis- tent. With the advent of CSS 2.0 and the appearance of the Level 6 browsers (IE 6, Netscape 6+, Opera 6+), it has become more practical to use style sheets in recent years. After explaining a little bit about how style sheets work and what they can do, we’ll show you how Dreamweaver MX 2004 makes working with CSS easier than ever. Here are the topics we’ll discuss: ■ Using style sheets ■ Internal and external style sheets ■ Understanding the box model ■ Working with the CSS Styles panel ■ Making, attaching, editing, and viewing a style sheet ■ Coding CSS on the fly ■ Validating CSS code ■ Using external CSS editors and importing external style sheets 4306c09.qxd 3/18/04 8:32 PM Page 190 190 ■ chapter 9: Cascading Style Sheets What to Use Style Sheets For Style sheets separate style (presentation) from content for anything from a single docu- ment to an entire site. Using them makes it easier to update, correct, or otherwise change the look-and-feel of a page or site without individually recoding all the formatting tags. OK, so style sheets control “style,” but what does that mean? For many people, previ- ous experience with Microsoft Word provides one example of how styles can be defined and then applied to the contents of a document, but Word’s styles are primarily focused on text formatting, which is only one of the applications of CSS. Style sheets can also define how links will appear in different circumstances, set background colors for an entire page or individual elements, control tiling of a background image, add borders, and set page layout—allowing you to control almost every aspect of the look of your page. And you can update the look of the site in one place—the style sheet—and it’s immediately applied to every HTML page that’s linked to that style sheet! With CSS, you can apply style definitions to existing tags or create new subclasses of existing tags, each with their own style. You can also define freestanding styles that can be applied to any number of different tags. Formatting with Styles Text formatting options include font (typeface, size, color, weight, and so on), alignment, indentation, and paragraph spacing. Link formatting options allow you to specify how links will look when unclicked, when hovered over, when being clicked, and after having been clicked. OTHER APPROACHES You can also separate style and content in other ways. For example, you can use a database to assemble documents on-the-fly using a single web boilerplate file that can be changed once to affect an entire dynamic site (see Chapter 19, “Database Connectivity,” for more on developing database-driven sites). You can also use Dreamweaver templates to establish the look-and-feel for a site (as discussed in Chapter 4, “Saving Labor with Templates and Libraries”). We recommend using CSS for setting the look of your pages. (And, of course, you can add CSS to database-assembled pages and templates.) It’s not only a web-standards-compliant method for page presentation, but you’ll find that using CSS can save you enormous amounts of time and effort in designing, maintaining, and updating your pages. Dreamweaver MX 2004 makes it easier than ever to use CSS in your sites. 4306c09.qxd 3/18/04 8:32 PM Page 191 what to use style sheets for ■ 191 Layout with Styles (The CSS Box Model) Page layout options are governed by something called the CSS box model (see Figure 9.1, which shows the CSS box model diagram from the W3C CSS specification at www.w3.org/ TR/CSS2/box.html#box-dimensions). In CSS layout, a box is defined as a series of nested rec- tangular frames around a content rectangle. The outermost frame is the margin and is always transparent, next comes the border, then the padding (which gets the same back- ground as the content area), and finally the content box. These areas can be styled the Figure 9.1 CSS box model diagram (from the W3C CSS specifica- tion at www.w3.org/ TR/CSS2/box.html #box-dimensions ) same on all four sides or with different styles for top, bottom, left, and right. Positioning Positioning, which is a CSS2 feature, lets you specify where you place certain elements, such as a graphic within a block of text. (If you’ve ever worked with a desktop publishing program for any length of time, the concept of positioning will be familiar.) Dreamweaver MX 2004 gives you the ability to place a particular element in one of three ways. We’ll take a look at how to apply these position- ing features in the hands-on tutorial later in this chapter. Normal Flow CSS2 has two different “flavors” of normal flow depending on how you want your text laid out on the page: • Block formatting lays out boxes vertically, one after another, at the top of a contain- ing box. You can set margins between each box using the margin property. Every positioned element has a containing block, but exactly what constitutes a containing block depends on the type of positioning you’re using. For relative positioning, the contain- ing block is defined by the box the element would have occupied in the normal flow of the document. For absolute positioning, it’s the closest ancestor element that has a defined posi- tion different from the default. 4306c09.qxd 3/18/04 8:32 PM Page 192 192 ■ chapter 9: Cascading Style Sheets • Inline formatting lays out boxes horizontally, one after another, beginning at the top-left of the containing box. When horizontal inline boxes exceed the width of the containing box, the boxes perform something similar to word wrap in a word processor—the box that doesn’t fit moves down vertically just below the first row of inline boxes. You can also shift the position of your box relative to its default position. Relative posi- tioning lets you move the box above, below, or to the right and left of its default position. Floating and Clearing Within a box, you can create another box and apply the float style that makes the second box appear as if it’s “floating” on top of the containing box. Elements in the containing box either appear behind the floating box or wrap around the floating box. For example, you can have the floating box contain a picture and the original box contain text that appears to wrap around the picture. If you don’t want elements in the original box to appear on one or more sides of a floating box, you can apply the clear style to those elements. For example, if you want a block of text in the containing box to appear below the floating box, you apply the clear style to that block of text. It then displays below the floating box. For a tutorial on the basics of using floating elements, see http://css.maxdesign.com.au/ floatutorial/. Absolute Positioning The third type of positioning is absolute. As the name implies, the box is placed in an absolute position outside of its containing box. This absolute box cannot overlap its con- taining box or any other box, and is completely separate from the normal flow. How Styles Are Applied Styles are applied by using style rules. Each rule specifies an individual CSS style, and can also specify the tags that can use this style. A group of style rules can be embedded in a single document or can be combined to create an external style sheet. An external style sheet can be applied to any document by adding a link to the style sheet from the HTML document. Selectors and Classes CSS styles are applied to content using selectors. If you’ve redefined a tag entirely, then the ordinary HTML tag functions as the CSS style selector. When you need to apply multiple styles to variants of the same tag (for example, when you are defining different types of paragraph tags for different design elements), and when you want to be able to apply a 4306c09.qxd 3/18/04 8:32 PM Page 193 css tools in dreamweaver ■ 193 style to many different tags, then you define the style as a class or ID. (Classes can be speci- fied for one specific tag or defined individually and applied to any tag or selection of text. IDs are unique, and should be used only once in the same document.) CSS also provides for pseudo-classes, which are distinctions applied to text and links that the browser—what the W3C calls the user agent (UA)— determines when displaying the document. The most common application of pseudo-classes is for link formatting. They are called pseudo-classes because you don’t actually apply the classes manually: you can’t! There’s no way to know when building a page whether the link will ultimately have been clicked or not. It doesn’t make any sense to apply that determination in advance. This is something only the browser can do. Similarly, the other common use of a pseudo-class is paragraph formatting applied to the first line of a paragraph. Until the page is rendered in a browser window, there’s no way to know which words will end up on the first line, but the UA can make this determi- nation on-the-fly and apply small caps (for example) to the first line when displaying the page. Types of Style Sheets There are essentially two different types of styles: external and internal. You apply external style sheets to documents by either linking to them or importing them. Dreamweaver supports both approaches. Internal styles, also called embedded styles, are defined directly within the document (in its <head> area). We recommend using external style sheets because the same style sheet can be applied to several documents, and several documents can be updated at one time just by updating the style sheet. That’s the power of CSS. CSS also permits styles to be defined and applied inline by using style as an attribute. This type of style only applies to the element where it’s defined, and can’t be reused without being defined again. CSS Tools in Dreamweaver You create and apply CSS styles in Dreamweaver using the CSS Styles panel, which is part of the Design panel group (see Fig- ure 9.2). The buttons at the bottom of the panel allow you to attach an external style sheet to your HTML page, add a new style, edit an existing style, or delete the selected style in the list. Whenever you create or edit a style in Dreamweaver itself you end up at the CSS Style Definition dialog box (see Figure 9.3). You can also use an external CSS editor with Dreamweaver—see “Using an External Editor” later in this chapter. Figure 9.2 The CSS Styles panel has one mode for applying styles and another for editing them. 4306c09.qxd 3/18/04 8:32 PM Page 194 194 ■ chapter 9: Cascading Style Sheets Figure 9.3 The CSS Style Defi- nition dialog box compactly offers a wealth of CSS defini- tion options organ- ized into eight categories. Working with Styles Working with styles boils down to three things: • Making new styles • Applying existing styles • Editing existing styles The hard part of all of this is not Dreamweaver. The program’s interface enables you to develop CSS styles relatively quickly, but you still have to have some idea of how CSS works, because there’s little visual feedback as you’re working your way through multiple categories in dialog boxes. Making a Style To make a new style, start with these steps: 1. Open an existing HTML document in Dreamweaver, or create a new HTML docu- ment (File ➔ New ➔ Basic page ➔ HTML). 2. Open the Property inspector or open the Design panel group to access the CSS Styles panel. 3. Choose New CSS Style in the Property inspector or click the New CSS Style button at the bottom of the CSS Styles panel (Figure 9.1). If the new style you’re making is largely similar to an existing style, then skip ahead to “Edit- ing a Style” so that you can base the new style on a duplicate of the existing one and save some effort. 4306c09.qxd 3/18/04 8:32 PM Page 195 working with styles ■ 195 4. After you have done this, the New CSS Style dialog box will appear (see Figure 9.4). Now choose one of the three Selector types from the New CSS Style dialog box: Figure 9.4 The New CSS Class: Style dialog box 1. Click the Class radio button to make a style that can be applied to multiple tags. 2. In the Name field above the radio buttons, Dreamweaver will suggest a name such as .unnamed1 to remind you to start your class name with a dot. Give the selector any name that makes sense to you, but be sure to include a . before the name. Tag: 1. Click the Tag radio button to make a style for a specific tag. 2. In the Tag field above the radio buttons, select an HTML tag from the drop-down menu. Advanced: 1. Click the Advanced radio button to make a pseudo-class style, add an ID, or use con- textual selectors. 2. In the Selector field above the radio buttons, you can choose a link pseudo-style ( a:link, a:visited, a:hover, or a:active) from the drop-down menu or you can enter text for an ID or contextual selector. To finish creating your new style: 1. Use the “Define in” radio buttons to indicate if this style should be saved to a new or existing external style sheet or applied only to the current document. If you choose to create a new style sheet at this point (as discussed later in this chapter), you won’t be prompted to name and save the new style sheet until you click OK. 2. Click OK. The CSS Style Definition dialog box will appear (refer back to Figure 9.2). See the hands-on tutorial at the end of this chapter to work with creating new styles. Now you’re ready to define your style in the CSS Style Definition dialog box. The set- tings you wish to apply may well be scattered over five or six of the categories, so we rec- ommend checking each category to determine whether its options are applicable. Following is some context to understand the purpose of the options for each category. You’ll learn how to apply a style later in this chapter. [...]... sheet in the CSS Styles panel, right-clicking it, and then choosing Use External Editor from the con­ text menu Coding CSS on the Fly The new features of Dreamweaver MX 20 04 are numerous, but nowhere did Macromedia pay more attention to detail than with Dreamweaver s CSS tools There are four new fea­ tures for coding CSS that let you set CSS styles on the fly as you work on your site rather than having... enter that new value directly in place of the old one Text Style Properties Now Dreamweaver MX 20 04 lets you select and change text styles on-the-fly in the Style drop-down menu, located within the Property inspector (see Figure 9.13) When you click the style menu, a list appears with all the CSS text styles you have defined Dreamweaver represents the styles by how they will appear on your page, not the... Rename Then you can enter the new name in the Rename Style dialog box Dreamweaver MX 20 04 automatically creates embedded styles in your HTML page when you apply font face, color, or size properties to text You can access these styles via the Property inspector or the CSS Styles panel and apply them to other selections on the same page Dreamweaver also automatically creates styles for page properties such... a book or look through the online help? Dreamweaver MX 20 04 now has code hints available at a keystroke Actu­ ally, you press a keystroke combination—Ctrl-Space in Windows, or Command-Space on the Macintosh—when the cursor is located on a particular line in your CSS code After you summon the code hints, a pop-up list of possible values appears (see Figure 9. 14) You can select from one of the code values,... or aligning left and right without having to go to the drop-down list Edit In Dreamweaver s preferences (Edit ➔ Preferences ➔ File Types/Editors), you can associate the Edit button with an image editor By default, clicking it will open Fireworks, but you can set it to open whatever application you prefer In Dreamweaver MX 20 04, additional image editing options are available in the Property inspector... engines that use keyword frequency as a ranking item (Of course, this should be in addition to the description of the image.) Image Class The class attribute, new to the Property inspector in Dreamweaver MX 20 04, is used to apply a style class to your image You can use any styles defined for your page, or you can also choose to create a new style (New), edit an existing style (Edit), rename an existing... Code view 202 ■ chapter 9: Cascading Style Sheets The CSS Properties Tab Figure 9.12 The CSS Properties tab Previously we discussed setting CSS style rules using the New CSS Style dialog box Dreamweaver MX 20 04 makes it easier to establish style rules on-the-fly using the CSS Properties tab The CSS Properties tab is part of the Tag Inspector, and appears when you select a CSS style in the CSS Styles... once you click on the code value, Dreamweaver automatically places that information in your code For example, if you don’t know what text alignment options are available, you can enter text-align and then click Ctrl-Space or Command-Space The list of possible values displays so you can choose the value you’re looking for Figure 9. 14 The list of CSS code hints ■ 203 2 04 ■ chapter 9: Cascading Style Sheets... css-validator/ Using an External Editor Figure 9.19 The Attach External Style Sheet dialog box Editing your CSS in Dreamweaver is nice, but you may prefer to edit your CSS in an exter­ nal editor Fortunately, Dreamweaver doesn’t make you choose between it and the CSS editing program you already know and love Dreamweaver lets you attach style sheets from another program or a location on the Web, or edit your style... the error on the page, Dreamweaver highlights the offending code block Figure 9.16 The Design Time Style Sheets window Figure 9.17 The Target Browser Check button 206 ■ chapter 9: Cascading Style Sheets Figure 9.18 The Results panel The Target Browser Check menu also lets you determine the target browsers and ver­ sions against which you want to check your CSS code By default, Dreamweaver checks your . designing, maintaining, and updating your pages. Dreamweaver MX 20 04 makes it easier than ever to use CSS in your sites. 43 06c09.qxd 3/18/ 04 8:32 PM Page 191 what to use style sheets for ■. in-depth look at Cascading Style Sheets (CSS) and all the new features Dreamweaver MX 20 04 has added for using CSS in Dreamweaver. Or, if you prefer to continue with links and navigation, skip. menu. Coding CSS on the Fly The new features of Dreamweaver MX 20 04 are numerous, but nowhere did Macromedia pay more attention to detail than with Dreamweaver s CSS tools. There are four new fea- tures