MACROMEDIA DREAMWEAVER MX 2004-USING DREAMWEAVER Spezifikationen PDF herunterladen (Seite 30)

ITS - Technology & Learning Services Page 28

Dr. Luanne Eris Fose Revised July 30, 2004

6. Notice that when you go to File >Preview in Browser now, you have the choice of

Internet Explorer (F12) or Netscape (Control-F12). You can continue to set up other

browsers for previewing in this manner (e.g., Macintosh users may wish to set up a

preview choice for the Safari browser, which has become quite popular in the Mac

community). F12 and Control-F12 are two commands that are worth memorizing since

by using them you can preview your pages without navigating to the File menu first or

without having to click on the globe icon.

CREATING AN EXTERNAL CASCADING STYLE SHEET (CSS)

Since Dreamweaver MX 2004 defaults to using internal cascading style sheets (providing a list

of all the rules for a single page in CSS), we might as well take advantage of this feature by

changing the internal cascading style sheet (CSS) into an external CSS. An external style sheet

is a file containing the CSS rules, which links to one or more web pages. The biggest advantage

of using an external style sheet is that you can customize and change the appearance of an

entire web site from just one file! For example, let’s say you decided that you wanted to change

the color of your body text in every one of your web pages. Make the change in your external

style sheet and attach it to the web pages you want it to effect and “walah,” it will effect every

page automatically. Follow the instructions below to export the styles and re-attach them to

pages:

1. First, let’s click on the Code button and scroll near the top of the page. Note that the

code for internal style sheets appears in the head tag area starting with the code text

that says something like: <style type=”text/css”… and ends with the </style> tag.

This is referred to as an “embedded” or “internal” style sheet and this style of CSS can

only be used within this one page

. However, we can export this information to act as an

“external style sheet” and then relink it to affect several pages at once within a web site.

2. To export this style information, go to File>Export>CSS Styles… and navigate to the

root folder of your web site. Save the file in the root folder with a name that makes

sense to you and make sure that you add a .css extension to the file name (e.g.,

simpsonstyles.css).

3. Note: When you export the code it does not remove the style from the page, you must

do this manually. To remove the internal style sheet, go to Design Panels>CSS Styles.

Highlight <style> and click on the little Trash icon or right-click on <style> and select

Delete. The CSS internal style code will be removed from the page.

4. To attach the exported external style sheet, go to the CSS tab, click on the first icon that

says Attach Style Sheet. This will open the Attach External Style Sheet dialog box

(Figure 23).

1 2 ... 25 26 27 28 29 30 31 32 33 34 35 ... 47 48

Keine Kommentare

MACROMEDIA DREAMWEAVER MX 2004-USING DREAMWEAVER Spezifikationen Seite 30