Transcript Slides

Microsoft Expression Web 3 –
Illustrated
Unit F: Enhancing a Design with CSS
Objectives
Understand CSS layouts
Add background images
Set a background color using the
Eyedropper
Set a background color using a swatch
Add a border
Expression Web 3 - Illustrated
2
Objectives (continued)
Add a font family
Style headings
Style the footer
Set padding and margins
Expression Web 3 - Illustrated
3
Understanding CSS Layouts
CSS box model – every element on a page
is a rectangular box.
 Core component – content area
 Optional components – borders, padding,
margins
Expression Web 3 - Illustrated
4
Understanding CSS Layouts
(continued)
Content area – innermost box, contains
text, images, or other content.
Padding area – creates space between
content and border.
Border – encloses the padding and content
areas.
Margin area – creates space surrounding
the other three components
Expression Web 3 - Illustrated
5
Understanding CSS Layouts
(continued)
div – html container element often used for
layout and positioning.
id attribute – unique and specific name,
can only be used once on a page.
class-base rules are indicated with a “.”
id-based rules are indicated with a “#”
Expression Web 3 - Illustrated
6
Adding Background Images
CSS background images are used to create
a consistent look across all pages of a site.
Background images are applied through a
style rule instead of being directly inserted
in an HTML page.
Expression Web 3 - Illustrated
7
Adding Background Images
(continued)
background-repeat – controls whether and
how the image repeats across the element.
background-attachment – controls whether
the image scrolls with the element’s content
or stays fixed as the content scrolls over it.
(x) background-position – controls where
the image is placed relative to the left edge.
(y) background position – controls where
the image is placed relative to the top edge.
Expression Web 3 - Illustrated
8
Adding Background Images
(continued)
Limitation of background images:
 Cannot include a link.
Images that include links must be inserted
on each page individually.
Expression Web 3 - Illustrated
9
Adding Background Images
(continued)
Expression Web 3 - Illustrated
10
Setting a Background Color Using
the Eyedropper
Background color can add color to a page
without images.
Background color displays across entire
element, including margins.
Ways to choose a color:
 Enter hex value
 Using Select tool
 Using Eyedropper tool
Expression Web 3 - Illustrated
11
Setting a Background Color Using
the Eyedropper (continued)
To sample a color, use the eyedropper tool
and click the color anywhere on your screen
to select that exact shade for your use.
Web-safe colors – colors that display
reliably on all computer monitors.
Expression Web 3 - Illustrated
12
Setting a Background Color Using
the Eyedropper (continued)
Expression Web 3 - Illustrated
13
Setting a Background Color Using
a Swatch
Color swatches provide access to basic
colors such as red, yellow, and gray.
Background color should contrast with the
foreground colors.
Expression Web 3 - Illustrated
14
Setting a Background Color Using
a Swatch (continued)
Expression Web 3 - Illustrated
15
Adding a Border
Borders can:
 Enhance visual design
 Draw attention to particular areas or content
 Act as visual separators
CSS border properties
 Border-style
 Border-width
 Border-color
Expression Web 3 - Illustrated
16
Adding a Border (continued)
Expression Web 3 - Illustrated
17
Adding a Font Family
Font family – prioritized list of fonts used in
case the visitor’s computer doesn’t have a
particular font installed.
Guidelines for creating a font family
 Start with the font you prefer.
 Then list Web-safe fonts for Windows and
Mac systems.
 End with a generic font family.
Expression Web 3 - Illustrated
18
Adding a Font Family (continued)
Web-safe fonts are likely to be available on
Windows, Mac, and Linux-based computer
systems.
Generic font families are displayed if no
other fonts in list are available.
 Three generic font families are consistently
understood
• Serif
• Sans-serif
• Monospace
Expression Web 3 - Illustrated
19
Adding a Font Family (continued)
Serif – has visible strokes at the ends of the
character, such as Times New Roman.
Sans-serif – has no strokes a the end of
the character, such as Arial.
Monospace – has equal space between
characters, such as Courier.
Limit font usage to two fonts per design.
Expression Web 3 - Illustrated
20
Adding a Font Family (continued)
Expression Web 3 - Illustrated
21
Styling Headings
Creating interesting heading styles is a
great way to make your site more readable
and more visually pleasing.
By default, browsers display HTML
headings bolder than paragraph text.
Expression Web 3 - Illustrated
22
Styling the Footer
General footer content
 Text-only navigation
 Copyright notice
 Links to reference areas such as privacy
policy or contact information
De-emphasize the footer by making text
smaller and less noticeable so it doesn’t
distract from more important content on
page.
Expression Web 3 - Illustrated
23
Setting Padding and Margins
Adding white space in margins and padding
can improve appearance and readability of
your site.
Expression Web 3 - Illustrated
24
Summary
Design details make the difference between
a site that is merely acceptable and one that
captures attention of the audience.
Adding background colors, background
images, borders, and appropriate white
space can create a pleasing and cohesive
visual identity to your site.
Font families provide a prioritized list of
fonts in case a visitor’s computer doesn’t
have the font used in your site.
Expression Web 3 - Illustrated
25
Summary (continued)
Headings can make your site more
readable and visually pleasing.
Footers contain content such as text-only
navigation, copyright notice, privacy
policies, and contact information.
Margins and padding add white space to
your pages.
Expression Web 3 - Illustrated
26