Ten Ton Dreamweaver [Electronic resources] نسخه متنی

Using External Style Sheets

I hope you and CSS have been getting along and having fun together. But up until this point, all the CSS work you've been doing has been within an embedded style sheetthat is, all your styles are being stored in a style sheet that resides within your current page.

Chapter 4 we talked about uploading your site, along with any other files that are needed, to your remote site folder). To have the style sheet control multiple pages, you'll have to connect your pages to it, a process that you'll learn about shortly. Because your pages will be linked to the style sheet file, you'll need to make any formatting changes there, not in your web pages. Then, like magic, you'll be able to update the formatting right across your site in seconds! External style sheets are by far the most powerful tools for harnessing the capabilities of CSS.

Giv89 the Heave-HoUse CSS to Control Lists!

Just like the formatting of tables, headings, and other page elements, the formatting of lists is determined by HTML tags. But rather than being content with this vanilla formatting, consider using CSS to give your lists a makeover. Try dressing up your lists with custom bullets, using tiny graphics or symbols saved as JPG, GIF, or PNG files in your local root folder.

In this example, you'll set up an unordered list as you normally would, but then you'll use CSS to change the rules of the unordered list formatting. The process works the same for ordered lists as well.

Here's how to use CSS to control your lists:

Select the text on your page that you want to convert to a list.

In the Property Inspector, click the ordered or unordered list button. We're working with a bulleted list in this example, so click the Unordered List button.

At the bottom of the CSS Styles panel (Window > CSS Styles), click the New CSS Rule button.

In the New CSS Rule dialog box, set the Selector Type to Tag, and from the Tag pull-down menu, choose ul.

I98, ul is the code that controls an unordered list.

Set Define In to This Document Only; then click OK.

In the CSS Rule Definition dialog box, select the List category.

Choose your bullet style either through the Type menu (for a predefined bullet character) or the Bullet image field, where you can browse to a custom graphic image.

I recommend that you choose one of the first three bullet choices if you use the Type menu. Although you could choose a numeric (decimal), roman, or alphabetic value as your bullet character, this might cause confusion. If you're making ordered lists, it would make more sense to redefine the ordered list (ol) tag instead.

If your bulleted text is long enough to break onto another line, use the Position menu to specify whether the wrapped text aligns with the bullet's indent or with the page margin.

Inside aligns the wrapped text to the page margin, and Outside aligns the text to the bullet's indent.

Before finishing, you can use any other category in the CSS Rule Definition dialog box to further control the look of your text. For example, to adjust the amount of space your bullets indent, select the Block category and enter a value in the Text Indent field. You can also set other formatting, such as font, color, and so on, at this point.

10.

When you're done, click OK.

The bulleted items on your page reformat to reflect your new formatting, and ul appears in the CSS Styles panel.

[View full size image]

If you want to make changes to your formatting, use the Properties pane in the lower half of the CSS Styles panel, or double-click ul in the rules list to return to the CSS Rule Definition dialog box.

Geek's Delight

Web browsers store external style sheets in their browser cache, meaning that your site will load faster where bandwidth is a concern. Usually, a CSS file's size is next to nothing, but sometimes those folks with antique browsers also have antique computers with matching antique Internet access. Caching your external style sheet will help speed up load time for those old-timers.

If you use an external style sheet for your site, you can connect an unlimited number of web pages to it. This means that you can control your entire site from a single file. Killer!

Exporting Embedded Sheets

You've seen how to create custom class styles, and you redefined som89 tags. Only problem is that all your lovely styles have been created in an embedded style sheetthey're all trapped in your page and can be used only there. That's no good. As they say, if you truly love something, set it free.

Unfortunately, the CSS styles applied here are available only to this page, because they're being stored in an embedded style sheet. They need to be exported to an external style sheet so they can be used throughout the site.

Chapter 13.

So how do you get your embedded styles out of your page so that you can use them in other pages throughout your site? No problem. You simply export your styles as an external style sheet.

Here's how it goes:

Choose File > Export > CSS Styles.

You can always export your embedded styles as an external style sheet.

Save yourself tons of heartache and agonyuse external style sheets whenever possible.

In the Export Styles as CSS File dialog box, navigate to where you want to save your styles and give your new style sheet a name.

[View full size image]

Make sure to save your style sheet inside your local root folder.

Click OK when you're done.

Dreamweaver saves the new style sheet file. The only bummer is that the embedded style sheet is left in your pageand your page doesn't link to your new style sheet automaticallyso you'll have to delete your embedded style sheet from your page and link to your new external style sheet manually.

In the CSS Styles panel, click the <style> expander heading at the top of the upper panel (this header represents your embedded style sheet); then click the Delete Embedded Style Sheet button at the bottom of the panel.

The embedded style sheet is deleted, and all your text reverts to its original vanilla formatting. Don't freak, though. In the next section, you'll see how to attach your new external style sheet to your page.

Creating an External Style Sheet from Scratch

Rather than creating styles in an embedded style sheet and then going through the process of exporting them, you can create your styles in an external style sheet right away and then attach your style sheet to your web pages later (this is my preferred methodjust makes more sense to me). When working this way, it doesn't matter if you have any pages open in Dreamweaver, because the style sheet that you create won't be attached to any of your files just yet.

Here's how to build an external style sheet from scratch:

Choose File > New.

In the New Document dialog box that appears, select Basic from the Category column at the left, and select CSS from the Basic column in the middle; then click Create.

Connecting your pages to an external style sheet is where the CSS juice really kicks in.

Dreamweaver opens an empty style sheet file in Code view, ready for your new styles. Now, you could code your CSS styles by hand, but why do that when Dreamweaver's on the case? Instead, use the CSS Styles panel to build your styles, as you did earlier in this chapter. The process is exactly the sameonly thing is, you'll have to look at that gnarly code as you work, because CSS files always are displayed in Code view only.

Create any Redefine88 or Class styles that you want in your style sheet.

[View full size image]

Save your style sheet by choosing File > Save As. Give your file a name, and make sure to save it in your site's root folder.

Now that you've created an external style sheet and loaded it full of styles to use throughout your site, what do you do with it? See the next section to find out how to link your pages to your external style sheet.

Linking to an External Style Sheet

Now that you've successfully created an external style sheet, you'll want to connect it to your pages in your site. Connecting to an external style sheet is where the juice really kicks in. You're about to see how to link an unlimited number o90 files to a single text file that then controls all the text formatting in your site. It's time to go after that CSS flame!

Here's how to link to an external style sheet:

Choose File > Open, and navigate to the web page that you want to connect to your external style sheet.

Once the web page is open, you're ready to link it to your external style sheet.

At the bottom of the CSS Styles panel, click Attach Style Sheet.

In the Link External Style Sheet dialog box, click Browse and navigate to the external style sheet you want to link to.

Set the Add As option to Link.

Link is Dreamweaver's default. This will create a reference to the style sheet from your page. The Import setting is best used for importing styles from one style sheet into another style sheet, not for linking styles to your page as you're doing here.

Click Preview to see how the style sheet will affect your page. If you're happy with the results, click OK.

The styles in the external sheet are added to the CSS Styles panel, and the formatting of your page's content (if it's being controlled by a style in the style sheet) updates to reflect the new formatting.

Noteworthy

If you ever want to unlink a page from an external style sheet, select the style sheet name in the CSS Styles panel (it will end in .css) and click the Unlink CSS Style Sheet button at the bottom of the panel.

Now repeat these steps for each of the web pages in your site. Once all the pages in your site have been linked to your style sheet, you can exercise supreme power over all your text formatting from a single teeny-tiny text file: the external style sheet!

Making Sitewide Changes via CSS

Are you on cloud nine? Well, you should be, because you're about to see how to make formatting changes within your style sheet that will then instantaneously update right across your siteor at least across the pages that are linked to your external style sheet. The processing for making changes to your external style sheet is almost the same as that for making changes to your embedded style sheet, which you saw earlier. There are just a few extra steps.

When you make changes to your external style sheet, all pages that are linked to it instantaneously update.

Follow these steps to edit an external style sheet in Dreamweaver:

At the top of the CSS Style panel, make sure All is selected as the panel's mode.

In the All Rules pane at the top of the panel, double-click the name of the style sheet you want to edit.

External style sheet names end in .css and are displayed as expandable and collapsible headings.

When your edits are complete, save your style sheet as you would any other file: choose File > Save.

Now here's the interesting part: Any page in your site that's linked to your style sheet updates to reflect your changes. The pages don't even have to be open in Dreamweaver! How's that for formatting bliss? That's what CSS is all about!

Unfortunately, learning CSS will not increase your chances of getting a date. Try a shower and a breath mint.

[View full size image]

Noteworthy

Here's a neat way to work: In Dreamweaver, open both an external style sheet and a page that uses that style sheet. As you make changes to your styles in the style sheet, save the file, and you'll see your changes reflected immediately. Even better, keep your web page running in a web browser in the background to preview changes you make to your style sheet.

Setting Design-Time Style Sheets

As you're building your pages, sometimes it's nice to get some space from CSS. With Dreamweaver's Design Time command, you can temporarily turn off the CSS formatting in your pages. Perhaps you just want to rough out raw pages, or maybe you're finding the CSS formatting distracting as you work.

With this command, you can set which external style sheets are visible, and which ones are hidden as you develop your page. Unfortunately, you can control only entire external style sheets. You cannot control the visibility of embedded style sheets and individual styles, which would be really handy to do.

If you want to use the Design Time feature, here are the steps:

Choose Text > CSS Styles > Design Time.

In the Design Time Style Sheets dialog box that appears, specify which style sheets you want to show and hide:

To display a style sheet only during development, click the plus sign button above the Show Only at Design Time list.

To disable a style sheet during development, click the plus sign button above the Hide at Design Time list.

[View full size image]

Click OK.

The CSS Styles panel displays "design" beside any style sheets that you've set to Show Only at Design Time, and "hidden" beside any style sheets that you've set to Hide at Design Time.

Keep in mind that the display of styles is controlled only in Dreamweaver. When you preview your pages in a web browser, all the styles will be visiblehence, the name design time.

Just the Gist

Using CSS Styles

CSS is a set of technologies that enhances ordinary HTML so that you can easily control the formatting of your web pages.

When you apply a CSS style, Dreamweaver creates a reference from the text to the style. The text then simply follows the formatting rules for the style.

When you edit a CSS style, all text that uses the style is automatically updated throughout your page.

Creating New Styles

Although you can create styles with the Property Inspector, not all CSS options are available here. Instead, the Property inspector is much better suited for applying styles.

Using the CSS Styles panel to create CSS styles gives you access to all available CSS properties in a single dialog box.

To get started, click the New CSS Rule button at the bottom of the CSS Styles panel.

Use the CSS Rule Definition dialog box's Category list to set attributes for your text.

Redefinin91 Tags

You can specify new CSS rules for any HTML tags on your page. The new rules override your visitor's web browser preferences and display your page using the redefined style.

To begin redefining a98 tag, set Selector Type to Tag and choose the tag from the pull-down menu in the New CSS Rule dialog box.

Using External Style Sheets

An external style sheet is a container of styles that's saved as a separate text file. It can be used to control the formatting of an unlimited number of pages.

By default, Dreamweaver stores your styles in an embedded style sheet, which is a container of styles that resides in your current page. An embedded style sheet can control only the page that contains it.

You can export embedded styles to an external style sheet so you can use them in your other pages. Choose File > Export > CS Styles.

To use an external style sheet, you have to link to the style sheet from your page. Click the Attach Style Sheet button at the bottom of the CSS Styles panel.

When you make changes to styles in your external style sheet, all pages linked to that style sheet update automatically throughout your site.

To edit an external style sheet, double-click it in the top pane of the CSS Styles panel and then edit it as you normally would.

Ten Ton Dreamweaver [Electronic resources] نسخه متنی

فارسی

کردی

العربیه

اردو

Türkçe

Русский

English

Français

کانال فیلم من

تبیان من

فایلهای من

کتابخانه من

پنل پیامکی

وبلاگ من

اینجــــا یک کتابخانه دیجیتالی است

با بیش از 100000 منبع الکترونیکی رایگان به زبان فارسی ، عربی و انگلیسی