ptg 236 Chapter 9 Formatting CSS Code Set CSS Code Formatting Preferences Click the Dreamweaver (Mac) or Edit (Win) menu, and then click Preferences. Click the Code Format category. Click the CSS button. Select from the following CSS source code format options: ◆ Indent Properties With. Sets the indent number and type (Tabs or Spaces) for properties within a rule. ◆ Each Property On Separate Line. Places each property within a rule on a separate line. ◆ Opening Brace On Separate Line. Places the opening brace for a rule on a separate line from the selector. ◆ Only If More Than One Property. Places the single- property rules on the same line as the selector. ◆ All Selectors For A Rule On Same Line. Places all selectors for the rule on the same line. ◆ Blank Line Between Rules. Inserts a blank line between each rule. Click OK. Click OK. 6 5 4 3 2 1 You can use the Code Format section of the Preferences dialog box to access CSS source formatting options. You can set options to indent properties, and insert separator lines to make it easier to work with CSS code. As you make formatting option changes, a preview of the CSS code appears in the dialog box. If you like the preview results, you can accept the options. Otherwise, you can continue to make option changes. After you set CSS code formatting preferences, you can apply them to an entire document (in a CSS style sheet) or the head of the document only (embedded CSS code). 3 2 6 4 5 From the Library of Wow! eBook ptg Chapter 9 Working with Cascading Style Sheets 237 Format CSS Code in a CSS Style Sheet Manually Display the CSS style sheet you want to format. Click the CSS style sheet name on the Related Files toolbar. Click the Commands menu, and then click Apply Source Formatting. The formatting options set in CSS code formatting preferences are applied to the entire document. Format Embedded CSS Code Manually Display the HTML page that contains CSS embedded in the head of the document. Click Source Code on the Related Files toolbar. Select any part of the CSS code. Click the Commands menu, and then click Apply Source Formatting To Selection. The formatting options set in CSS code formatting preferences are applied to all CSS rules in the head of the document only. 3 2 1 2 1 1 2 1 3 2 From the Library of Wow! eBook ptg 238 Chapter 9 Setting CSS Styles Preferences Set CSS Styles Preferences Click the Dreamweaver (Mac) or Edit (Win) menu, and then click Preferences. Click the CSS Styles category. Select from the following CSS style options: ◆ When Creating CSS Rules Use Shorthand For. Select the check boxes for the properties you want Dreamweaver to write in shorthand. ◆ When Editing CSS Rules Use Shorthand. Select the font and size you want to use to display text within pre, code, and tt tags. ◆ When Double-clicking In CSS Panel. Select the option with the editing preference you want to use: CSS dialog, Properties panel, or Code view. Click OK. 4 3 2 1 You can use the CSS Styles section of the Preferences dialog box to control the way Dreamweaver writes the code that defines CSS styles. You can specify the properties—including font, background, margin and padding, border and border width, or list-style—you want Dreamweaver to write in shorthand, determine whether Dreamweaver edits existing styles in shorthand, and select the editing tool you want to use to modify CSS rules. Shorthand CSS is an abbreviated syntax that allows you to create styles. 4 2 3 From the Library of Wow! eBook ptg Chapter 9 Working with Cascading Style Sheets 239 Using Design-Time Style Sheets Use Design-Time Style Sheets Open the Web page you want to create a CSS style. Click the Format menu, point to CSS Styles, and then click Design- Time. Select from the following CSS style options: ◆ Show. Click the Plus (+) button above Show Only At Design- Time, select the CSS style sheet you want to show, and then click OK. ◆ Hide. Click the Plus (+) button above Hide At Design-Time, select the CSS style sheet you want to hide, and then click OK. ◆ Remove. Click the style sheet you want to remove, and then click the appropriate Minus (-) button. Click OK. The CSS Styles panel displays an indicator, either “hidden” or “design” that reflects the current status of the style sheet. 4 3 2 1 In Dreamweaver, you can use design-time style sheets to show or hide designs applied by a CSS style sheet as you work on a Web page. This is useful when you want to include or exclude the effect of a style sheet as you design a page. Design-Time style sheets only apply while you are working on a page. When the page displays in a browser, only the styles that are actually attached to or embedded in the page appear. 4 3 Show in design-time Hide in design-time From the Library of Wow! eBook ptg 240 Chapter 9 ◆ Remove inessential elements of your pages. This is especially true of sound and video files, but also extends to unnecessary graphics and even extraneous text. ◆ Avoid frames. Not only do framed pages load more slowly, some search engines still do not index framed pages correctly. ◆ Avoid nested tables. Inexperienced Web designers will often utilize tables inside of tables in order to get the page layout just right. This can be avoided by using a single, well-thought-out table for page layout. ◆ Compress your images. Uncompressed JPEGs and GIFs often contain extra data not necessary for their correct display. ◆ Remove extra "whitespace" in your code. Every space, tab, and "newline" character in your HTML code requires extra data in the page. Thus, limit their use and pay attention to what extra space is inserted by your design software. ◆ Break up long copy. While long copy can often be an effective means of marketing your products or services, long-copy pages taken to the extreme may take so long to load that they will lose visitors during the wait. Consider breaking up very long copy to multiple pages. ◆ Clean up your code with tools. A number of free and commercial tools are available online that will clean up your website code, reducing page weight without affecting how your page is displayed. Page weight is a measurement of the file size of a Web page that includes the combined size of all the elements of the page. The ele- ments images, audio or video files, associated style sheets, multiple HTML files loaded within frames, and so on. Page weight can be used to determine the download time for a given page on a variety of Internet connection speeds. At high speeds (DSL and cable connections), most reasonably sized pages will download relatively quickly. However, at slower speeds (including faster dial-up speeds), even medium-sized pages can take ten seconds or more to download. You can reduce page weight by doing some things and not doing others. Here is a brief list of different ways to reduce page weight: ◆ Use CSS (Cascading Style Sheets). CSS can be a very effective way to reduce the load time of your overall site. CSS reduces file size because it decreases the amount of markup in the HTML. CSS eliminates the need for page elements such as one-pixel spacer images, multiple font tags, nested tables, and similar items. Using an external style sheet also allows for the caching of the styles so that the browser doesn't have to reload it with each new page, thus reducing the time for subsequent pages (after the first) to load. Change a single property in the external file and it changes the appearance of that element for the entire website. Optimizing Web Pages From the Library of Wow! eBook ptg Creating Page Layouts Using CSS-P Introduction Cascading Style Sheets-Positioning (CSS-P) is more than the perfect positioning of words and objects on a Web page, in addition, layers technology lets you create movable contain- ers (called AP elements , formerly known as layers) that allow you to precisely position Web text and objects, even going so far as to stack one AP element on top of another, or to use JavaScript to show or hide AP elements. For example, you could have several AP elements containing thumbnails of images and when you hover over a particular AP element, a JavaScript would show a previously hidden AP element with information about the image. The incorporation of AP ele- ments into a Web page gives the designer, for the first time, the use of all three dimensions: width, height, and even depth (stackable AP elements). There is, of course, in all things a good news/bad news scenario. The good news is that AP elements and CSS-P are awesome tools for the creative designer to use. The bad news is that they do not work in earlier browsers (pre 4.0). Fortunately, Dreamweaver turns that bad news on its head by giving you the ability to convert AP elements into a more compatible tables document and vise versa. This chapter covers the use of AP elements and CSS-P for the creation and implementation and total control of the design of Web pages. We'll focus in on how to create CSS-P design, and why you might want to use it. 10 10 What You’ll Do Introduce CSS Layouts and AP Elements Create AP Elements Nest AP Elements Set AP Element Preferences Use CSS Positioning Apply a CSS-P Style Modify CSS-P Properties Work with AP Elements Create a Rollover Using AP Elements Convert AP Elements to Tables 241 From the Library of Wow! eBook ptg 242 Chapter 10 In the beginning, support for Cascading Style Sheets (CSS) was a bit sketchy; however, as time when on, and CSS caught on, more and more browsers came on board. In response, Dreamweaver began giving Cascading Style Sheets complete support. Cascading Style Sheets is all about the control of the Web page, and are a designer's dream come true. Not only do you have the ability to specify and apply specific font char- acteristics; in addition you can precisely place elements on the page. Basically CSS are a set of rules encased within a style sheet. The rules are customized styles, or modified HTML tags that define the look, position, and feel of the Web page. In the previous chapter, you learned about the syntax of CSS. In this chapter you’ll learn how to use CSS to control and format Web pages, using AP elements, formally known as layers. An AP element is a movable container that allows you to pre- cisely position Web text and objects Web designers have always wanted the type of control over text and graphic elements that page designers have had, and with the advent of CSS, and the incorporation of AP elements, that day has finally arrived. CSS and AP elements give you the ability to precisely position elements on a Web page, and let you stack AP elements over each other. This addition of the third dimension is not only a new concept in Web design, but it is exactly why CSS absolute position is called AP elements. Not only can Web designers position elements using x and y (width and height) positioning, they now have z indexing (depth)… and that's what I call control. The Code When you use Dreamweaver to create an AP element, the HTML code looks something like the following: <div id="Layer4" style="position:absolute; visibil- ity:inherit; width:200px; height:175 px; z-index:6"> </div> Although it's not the only way to create the code, AP elements are usually placed between <div> …</div> or <span>… </span> tags. Creating AP elements in Dreamweaver's design window (the most common method) is as simple as a drag and release. The visible result is the creation of a square or rectangle, which becomes a floating element on the Web page. This element can be populated with text, images or any combination thereof. Think of an AP element as a floating, inde- pendent table cell, and you have the picture. To mov e a n AP el em ent t o a diff e r e n t posit i o n on the Web page, the designer has only to click and drag. In addition to creating and moving the AP elements about the Web page, you have the ability to stack AP elements in the third dimension. By default every AP element is assigned a z-index, or stacking order. The first AP element is assigned the stacking order of 1, and each new AP element follows the pro- gression 2, 3, 4, etc. Therefore, when two AP elements interact, they can actually slide over each other; creating Web designs that would have been impossible in straight HTML. If you've ever used AP element-intensive applications, such as Adobe Photoshop, Illustrator, or InDesign, you're ready to get started designing CSS AP elements in Dreamweaver. Introducing CSS Layouts and AP Elements From the Library of Wow! eBook . and so on. Page weight can be used to determine the download time for a given page on a variety of Internet connection speeds. At high speeds (DSL and cable connections), most reasonably sized. This addition of the third dimension is not only a new concept in Web design, but it is exactly why CSS absolute position is called AP elements. Not only can Web designers position elements. when on, and CSS caught on, more and more browsers came on board. In response, Dreamweaver began giving Cascading Style Sheets complete support. Cascading Style Sheets is all about the control