Project 1 - East Mississippi Community College

Download Report

Transcript Project 1 - East Mississippi Community College 

CHAPTER 4
CREATING STYLES AND LAYOUTS WITH CSS
CHAPTER OBJECTIVES
•
•
•
•
•
•
•
•
•
•
•
•
•
Create ID-based styles
Position content with CSS
Format text with CSS
Identify CSS syntax
Use the CSS Properties panel
Create a font family
Create an external style sheet
Modify a style sheet using code
Attach a style sheet
Add a Web page using CSS layouts
Copy and paste elements among pages
Organize style sheets
Create a CSS report
Chapter 4: Creating Styles and Layouts with CSS
2
HOUSEKEEPING
• If you don’t have a Ch. 4 directory, create one.
• Read the project on pg 242
Chapter 4: Creating Styles and Layouts with CSS
3
WHAT ARE STYLE SHEETS?
• Rules used to control the formatting and layout of
pages as well as individual elements and text in a web
page.
• Creates consistency.
• Style sheets that are attached to web pages allows all
elements to be formatted in the same way.
• CSS is the W3C preferred method for page layout and
font.
Chapter 4: Creating Styles and Layouts with CSS
4
PLAN AHEAD
• Define formatting and layout using styles – style
sheets allow you to do both
• Create your own styles and style sheets – When saving
these, you have to specify if it is an
• INLINE – in the <body> section of the code
• INTERNAL - in the <head> section of the code
• EXTERNAL – a separate .css file that contains CSS code
• Evaluate style sheets – Run a CSS report that will show
you conflicting rules with your style sheets.
Chapter 4: Creating Styles and Layouts with CSS
5
CSS SYNTAX
• 3 parts
• Selector – What? Such as h1
• Property – How? Such as font-size
• Value – How much? Such as xx-large
• 3 selectors
• Element – paragraph, lists, heading, body text, etc.
• Class – Repeats several times such as to format
headings within a block of code (resume)
• ID – Single instance..once per page.. Footer or
header..etc.
Chapter 4: Creating Styles and Layouts with CSS
6
PRIORITY
• Style rules are ordered by specificity:
• Inline styles – 1st priority
• Internal styles – 2nd priority
• External styles – 3rd priority
Chapter 4: Creating Styles and Layouts with CSS
7
GETTING STARTED
• Do pages 246-248 to open the site we are going to be working
on.
Chapter 4: Creating Styles and Layouts with CSS
8
DEFINING AN ID-BASED STYLE
• Before you can create an ID-based style, you must first create
the ID.
• (masthead, top_nav, page_content, & footer)
• If you will notice, these styles were created when the page was
created.
• They are listed in the Apply Styles panel, but with no
formatting.
• So, let’s go fix that by doing pages 249-253
• Notice as you are modifying the style, look at the bottom of the
dialog box and you will see the changes being made!
• SAVE these often, just in case!
Chapter 4: Creating Styles and Layouts with CSS
9
DEFINING AN ID-BASED STYLE
Chapter 4: Creating Styles and Layouts with CSS
10
CLASS-BASED STYLE
• Positioning elements is easy with a class-based style.
• Do pages 254-256
Chapter 4: Creating Styles and Layouts with CSS
11
USING THE CSS PROPERTIES PANEL
•
You can modify styles using the CSS properties panel instead of opening the modify style dialog
box.
•
These changes are applied automatically. Do pages 256-259
Chapter 4: Creating Styles and Layouts with CSS
12
CREATING AN EXTERNAL STYLE SHEET
• CSS allows you to store the style rules for an element is
a CSS file and the content inthe HTML files.
• The separation of these two gives you greater
flexibility when making changes.
• Purpose driven style sheets –
• Layout guidelines for web sites
• General page guidelines
• You can then attach the style sheets to a web page or
an entire web site.
• Do pages 260-261.
Chapter 4: Creating Styles and Layouts with CSS
13
CREATING AN EXTERNAL STYLE SHEET
Chapter 4: Creating Styles and Layouts with CSS
14
CREATING A FONT FAMILY
• Using a consistent font family provides visitors to your
site a common experience.
• Font Family – collection of similar font styles that a
browser can apply to a web site.
• 3 types of fonts are preferred
• Serif – have strokes at the end of the letter’s lines
• Sans-serif – DO NOT have strokes
• Monospace – resemble old-style computer fonts...Not
commonly used
• Do pages 262-265
Chapter 4: Creating Styles and Layouts with CSS
15
CREATING A FONT FAMILY
Chapter 4: Creating Styles and Layouts with CSS
16
ENTERING CSS CODE
• Include headings and comments that explain the sheet and its rules.
• Intellisense – prompts you with shortcut menus of suggested selectors and
options based on what you are typing.
• Do pages 266-270. See next slide for what your pages look like now!
Chapter 4: Creating Styles and Layouts with CSS
17
ATTACHING A STYLE SHEET
Your pages should look like this now!
Chapter 4: Creating Styles and Layouts with CSS
18
USING PRE-BUILT CSS LAYOUTS
• Expression Web will provide blank pages that use
a CSS layout that includes DIVS for all page
elements that are defined by ID-based styles.
• When you use CSS to create a new page, two files
wil open, an HTML page and a style sheet that
includes the ID-based styles, which are blank.
• Do pages 271-280
Chapter 4: Creating Styles and Layouts with CSS
19
ATTACHING MULTIPLE STYLE SHEETS
• We want the artist.html page to be consistent with
the other site pages, right?
• We have to attach multiple style sheets, the
galisteo_styles.css, page_styles.css and
artist_styles.css.
• Do pages 280-282.
• See next slide for what the artist page should look
like.
Chapter 4: Creating Styles and Layouts with CSS
20
ATTACHING MULTIPLE STYLE SHEETS
Chapter 4: Creating Styles and Layouts with CSS
21
ADDING A HYPERLINK
• Do pages 283-286
Chapter 4: Creating Styles and Layouts with CSS
22
ORGANIZING STYLE SHEETS
• ORGANIZATION is
very important!
• Keeping all style
sheets in one
folder (as we do
images) makes
them easy to
locate.
• Do pages 284-286
Chapter 4: Creating Styles and Layouts with CSS
23
CREATING A CSS REPORT
• Creating a CSS report shows you errors, etc.
• DO NOT FIX the errors you see here that relate to
unused styles...they may be used for future pages
and content.
• Do pages 286-289
Chapter 4: Creating Styles and Layouts with CSS
24
CREATING A CSS REPORT
Chapter 4: Creating Styles and Layouts with CSS
25
PREVIEWING THE SITE
Chapter 4: Creating Styles and Layouts with CSS
26
CH 4 IS DONE!!
Homework
Labs
• Who wants to be a Computer • Create an EXTREME SPORTS
web site that has at least 3
Genius?
pages, and 3 different style
• www.scsite.com/ew3/learn
sheets.
• Style sheets
• 1 for layout of pages
• 1 for main division (header,
body, nav, footer)
• 1 for anything else (certain
page, etc.)
Chapter 4: Creating Styles and Layouts with CSS
• Be creative !!
27