12.1. Exporting Embedded Styles There are two ways to get Cascading Style Sheets into a web page: embedding and linking. Embedding means writing the CSS code directly into the HTML file, either as a separate block in the head section: <html> <head> <title>Hello!</title> <style type="text/css"> p { font-family: Arial, Helvetica, sans-serif; } </style> </head> <body> <p>Hello, everybody.</p> </body> </html> or in the style attribute of a specific HTML tag: <html> <head> <title>Hello!</title> </head> <body> <p >Hello, everybody.</p> </body> </html> Linking means writing the CSS code into a separate file and then pointing to this file from the HTML document: | TECHTALK | Embedding CSS code means writing it directly into the HTML page. |
<html> <head> <title>Hello!</title> <link href="hellostyles.css" rel="stylesheet" type="text/css"> </head> <body> <p>Hello, everybody.</p> </body> </html> | TECHTALK | Linking to an external CSS file means pointing to the CSS file from an HTML page. |
Embedding and linking produce identical results: the ones that you see in Figure 12-1. So which method is better? Figure 12-1. External and embedded CSS looks the same Embedding may seem like the better pick here, because the web page is more self-contained this way, but linking to an external file is usually smarter for the same reason that creating new pages from a Dreamweaver template is usually smarter. Instead of duplicating the same old block of CSS code on every page of your site, you put all the style rules in a centralized location. Then, when you want to make changes to your styles, you simply edit your CSS document, and all the pages that link to the external stylesheet automatically update themselves. However, by default, Dreamweaver chooses to embed CSS, because embedding is a little easier to automate. The first step toward creating your stylesheet, then, is to export the currently embedded CSS code in your template as an external CSS file. First you delete the embedded block of code, and then you link the template document to the CSS file. | BEST BET | Linking to an external CSS file is almost always better than embedding CSS code directly into the HTML page. |
Here's what to do: From Dreamweaver, go to the Files panel, look in the Templates folder for the current site, and double-click the Dreamweaver template that you created in Chapter 11. Dreamweaver opens the template in a new document window. | TIP | If you didn't set page margins and you built your layout with tables instead of layers, you probably won't have any embedded style rules, in which case you can skip this procedure. |
Open the CSS Styles panel by choosing Window CSS Styles from the main menu or pressing Shift-F11. The CSS Styles panel helps you to navigate the various style rules on the page. You have a few of these already; e.g., Dreamweaver created a style rule when you set the margin values of the page in Chapter 8. And if you designed your layout with layers, each layer has a corresponding style rule. To export the template's currently embedded CSS code as an external file, choose Text CSS Styles Export from the main menu. The Export Styles As CSS File dialog box appears. Navigate to the top level of your local root folder, so that you see all the subfolders for the site. This is a good location for your CSS file. In the File Name field, type something brief but descriptive, like bill or billstyles for the Bill Z. Bub Marketing Associates site, and click Save. Dreamweaver creates the external stylesheet but doesn't yet link the template to this stylesheet. Now remove the existing embedded code. Click the All button in the CSS Styles panel. Then select the <style> item in the panel's list of style rules, and click the trashcan icon in the lower-right corner of the panel. The CSS Styles panel reports that there are no styles defined. Finally, link to the external CSS file. Click the Attach Style Sheet button at the bottom of the CSS Styles panel. (This is the button with the linked-chain icon.) The Attach External Style Sheet dialog box appears, as Figure 12-2 shows. Figure 12-2. Link to a CSS file with the Attach External Style Sheet dialog box | BEHIND THE SCENES | From the Media menu in the Attach External Style Sheet dialog box, you may specify the target medium (or multiple target media), in which case you get a media-dependent stylesheet. As you might suspect, a media-dependent stylesheet applies only to the selected medium or media. For instance, to attach a stylesheet that applies only when the visitor prints out your page, choose Print from the Media menu. If you want the stylesheet to apply to both print and screen, type print, screen in the Media field. If you want the stylesheet to apply to all media, leave the Media field blank. To learn more about media-dependent stylesheets, point your browser to http://www.w3.org/TR/CSS21/media.html/. |
Click the Browse button, and navigate to the CSS file that you created in Step 3. Double-click this file, and then click OK in the Attach External Style Sheet dialog box. Dreamweaver links to this file and adds its style rules to the list in the CSS Styles panel. Choose File Save from the main menu. The Update Template Files dialog box in Figure 12-3 appears, showing a list of all the HTML pages that Dreamweaver will modify based on your changes to the template. Figure 12-3. These web pages will be modified Click Update. Dreamweaver closes the Update Template Files dialog box and opens the Update Pages dialog box to give you a brief summary of the results, as shown in Figure 12-4. Click Close. Figure 12-4. A quick status report in the Update Pages dialog box Congratulations! You have successfully switched from embedded to linked styles. (You have also witnessed the glory of templates for the first time. Each of your existing pages has changed on the basis of a single set of corrections.) You're ready now to begin creating new style rules.
|