Xem mẫu
Formatting CSS Code
Set CSS Code Formatting Preferences
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).
2
1 Click the Dreamweaver (Mac) or Edit (Win) menu, and then click Preferences.
2 Click the Code Format category.
3 Click the CSS button.
4 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.
5 Click OK.
6 Click OK.
3 6
5
4
236 Chapter 9
Format CSS Code in a CSS Style
Sheet Manually 1 2
1 Display the CSS style sheet you want to format. Click the CSS style sheet name on the Related Files toolbar.
2 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 1 2 3
1 Display the HTML page that contains CSS embedded in the head of the document. Click Source Code on the Related Files toolbar.
2 Select any part of the CSS code.
3 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.
Chapter 9 Working with Cascading Style Sheets 237
Setting CSS Styles Preferences
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.
Set CSS Styles Preferences
1 Click the Dreamweaver (Mac) or 2 Edit (Win) menu, and then click
Preferences.
2 Click the CSS Styles category.
3 Select from the following CSS style options:
When Creating CSS Rules Use 3 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. 4
When Double-clicking In CSS Panel. Select the option with the editing preference you want to use: CSS dialog, Properties panel, or Code view.
4 Click OK.
238 Chapter 9
Using Design-Time Style Sheets
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.
Use Design-Time Style Sheets
1 Open the Web page you want to create a CSS style.
2 Click the Format menu, point to CSS Styles, and then click Design-Time.
3 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.
4 Click OK.
The CSS Styles panel displays an indicator, either “hidden” or “design” that reflects the current status of the style sheet.
4
3
Show in design-time
Hide in design-time
Chapter 9 Working with Cascading Style Sheets 239
Optimizing Web Pages
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.
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.
240 Chapter 9
...
- tailieumienphi.vn
nguon tai.lieu . vn