Transcript Ch. 3 - Working with Templates and Styles

CHAPTER 3
Working with Templates and Styles

Create an Expression Web site from a template

Rename a page

Rename a folder

Add and delete pages

Add and delete folders

Replace content in the template

Copy and paste text from an external document

Edit the editable regions

Make global changes with templates

Define styles and style sheets

Modify a style

Create a style

Apply a style
CHAPTER OBJECTIVES
2
Chapter 3: Working with Templates and Styles

If you haven’t already, make a Ch. 3 folder under your webex
folder.

Read the project on pg. 152.
HOUSKEEPING
3
Chapter 1: Introduction to HTML
 Consider
the purpose of the site = choose a template
that meets your needs.
 Determine
the structure of the site – How many
pages do you need? How long will each page be?
etc.
 Determine,
accumulate, and organize the content
that you will use. For small amounts of information,
just type directly in the site. For larger amounts, copy
and paste data from other sources. Gather all
images and files you need prior to beginning work.
 Distinguish
the sites and CSS using styles Using CSS
and style sheets ensure consistency in your site.
Makes the site look more professional.
PLAN AHEAD
4
Chapter 3: Working with Templates and Styles
CREATING A NEW WEB SITE
FROM A TEMPLATE
Do pages 156 – 159
Chapter 3: Working with Templates and Styles
5

Information about styles and structure are stored in these
files as part of your website.

They are NOT viewable in Expression, but are from
Explorer... Or My computer..

The files are hidden and should NEVER be deleted, moved
or edited!
METADATA – BE CAREFUL!
6
Chapter 3: Working with Templates and Styles
MODIFYING WEB SITE STRUCTURE.
Do pages 161-168
7
Chapter 3: Working with Templates and Styles
When adding a web
page in a site created
with a template, you
must attach the
dynamic Web template
to it; otherwise the
page will be blank.
Do pages 169-171
ADDING A WEB PAGE
8
Chapter 3: Working with Templates and Styles

All web pages contain editable regions. These are simply
content that you can easily change to reflect what you want
your site to say.

Headers – usually indicated with h1, h2, etc.

Body – indicated with Latin text.

These regions have styles attached to them, which can also
be edited if desired.

Do pages 172-189.
REPLACING TEMPLATE
PLACEHOLDER TEXT
9
Chapter 3: Working with Templates and Styles

Some things in a template are NOT editable except on
the MASTER.dwt file. This page has information that is
contained on all pages and any changes will be
reflected on all pages that use it.

To make any changes, you have to edit the master.dwt
file.

BEFORE DOING THIS... Make sure you CLOSE all open
pages prior to opening the master.dwt. Once you
make changes here, and save it, those changes will be
reflected on the pages that use it.

Do pages 190-193. It should look like the next slide when
you are finished!
GLOBAL CHANGES TO A
TEMPLATE
10
Chapter 3: Working with Templates and Styles
MAKING GLOBAL CHANGES TO
A TEMPLATE
11
Chapter 3: Working with Templates and Styles

CSS – Cascading style sheets

Allows you to create styles to customize the look of your
site and to create consistency across your pages.

Style sheet – a collection of style rules that are applied
to specific elements.

Lists properties, such as formatting and layout, that
apply to an element. (change all bulleted list from round
to square bullets, change the style sheet!)

Priority of the style is determined by specificity.. Which
means the rule that is higher in priority is used if there is a
conflict.

Several style sheets can exist for a web site.
STYLE SHEETS
12
Chapter 3: Working with Templates and Styles

Internal – embedded into the code, can only be used on the
page they are in.

External – controls the entire site and other pages or other sites
cause they are stored externally and can be used anywhere.

Inline style – only applies to the exact text or element that you
apply it to. Cannot be reused for other elements or pages.

Inline – first priority, internal – second priority, external – third
priority.
STYLE SHEETS
13
Chapter 1: Introduction to HTML


Syntax – 3 parts

Selector (the element you are changing)

Property (how it will be changed)

Value (specific change to be made)
Do pages 195-204
STYLE SHEETS
14
Chapter 3: Working with Templates and Styles
PREVIEWING THE SITE
15
Chapter 3: Working with Templates and Styles
HOMEWORK


Who wants to be a
Computer Genius? @
www.scsite.com/ew3/learn
LABS

In the Lab:

Lab 3: Garcia’s Coffee
Shop- pg. 213
Due next class meeting @
8am
WHAT TO DO?
16
Chapter 1: Introduction to HTML