Transcript Exercise 10 - Skills

Exercise 10 - Skills
You can create an external cascading
style sheet that includes styles you
can use with any page in your Web
site. You can also attach external
style sheets to multiple sites.
Dreamweaver offers sample style
sheets and CSS layouts you can use
as they are or customize to fit your
own site.
Exercise 10 - Skills
The great thing about creating and
using external style sheets is that you
can create a set of styles you like to
use on your pages and then apply
them to multiple projects. This adds
consistency to your pages and then
apply them to multiple projects. This
adds consistency to your styles and
can save you a lot of design time.
Exercise 10 - Terms
• External style sheet – A CSS in a
text file you can attach to a web page
you are creating that includes the
style definitions for the elements on
the page.
•
•
•
•
If you want to apply styles to several Web
pages in a site, you need to create an
external style sheet. An external style sheet
is a separate, or external, file that provides
the definitions of all the styles used in a
Web site.
External style sheets have the file extension
.css.
After you have created an external style
sheet, you can attach it to existing or new
documents in the site. This allows you to
use the same styles on all pages to ensure
consistency throughout your site.
For most cases, choose the Link option in
the Attach External Style Sheet dialog box.
If you select the Import option, the styles
are directly imported into the document
rather than linked to the external file.
4
Working with Text Using CSS Styles and HTML: Lesson 2, Exercise 10
Copyright © 2010 Pearson Education, Inc.
Publishing as Prentice Hall
Attach External Style Sheet to
Existing or New Web Documents
• After you have created an external style
sheet, you can attach it to existing or new
documents in the site.
• To attach a style sheet to an existing
document, open the Web page you want to
attach the style sheet to and click the
Attach Style Sheet button at the bottom of
the CSS Styles panel.
• Or, use the Format>CSS Styles>Attach
External Style Sheet command.
• Read Pages 62 – 63 for more details.
Dreamweaver CSS Layouts
and Samples
• The New Documents dialog box offers
several options for creating documents
with CSS formatting.
• Use Dreamweaver CSS layout or sample
style sheets to quickly create a page that
already contains CSS styles.
• The columns of these layouts can be
fixed, liquid, elastic, or a hybrid of
several of these options.
About Inline Styles
• You have learned the two preferred
methods of supplying styles for a Web
page: creating internal styles on a
single page or external styles that can
link to many pages.
• Dreamweaver CS4 provides a handy
utility for converting inline CSS to a
rule.
• In a code view, right-click the inline
style, click CSS Styles, and then click
Convert Inline CSS to Rule.
Manage Styles
• One of the great benefits of creating
an external style sheet is that it can
be used in any number of Web sites.
• You simply link to the style sheet from
any site, saving it in your current
site’s root folder when prompted.
• If you have defined internal styles on a
page and want to add them to a style
sheet, you can easily do so using a
new feature, Move CSS Rules.
Reading
• Take your time and read
lesson 10 before going
over the procedures to be
certain you understand
what you will do before
starting the exercises.
ASSIGNEMENT
• PAGES 67 – 68
GARDENSCAPE
• PAGE 68
YARDART