CHAPTER 3

Working with Templates and Styles

CHAPTER OBJECTIVES

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 3: Working with Templates and Styles

2

HOUSKEEPING

If you haven’t already, make a Ch. 3 folder under your webex folder.

Read the project on pg. 152.

Chapter 1: Introduction to HTML

3

PLAN AHEAD

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.

Chapter 3: Working with Templates and Styles

4

CREATING A NEW WEB SITE FROM A TEMPLATE

Chapter 3: Working with Templates and Styles

5Do pages 156 – 159

METADATA – BE CAREFUL!

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!

Chapter 3: Working with Templates and Styles

6

MODIFYING WEB SITE STRUCTURE.

Chapter 3: Working with Templates and Styles

7

Do pages 161-168

ADDING A WEB PAGE

Chapter 3: Working with Templates and Styles

8

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

REPLACING TEMPLATE PLACEHOLDER TEXT

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.

Chapter 3: Working with Templates and Styles

9

GLOBAL CHANGES TO A TEMPLATE

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!

Chapter 3: Working with Templates and Styles

10

MAKING GLOBAL CHANGES TO A TEMPLATE

Chapter 3: Working with Templates and Styles

11

STYLE SHEETS

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.

Chapter 3: Working with Templates and Styles

12

STYLE SHEETS

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.

Chapter 1: Introduction to HTML

13

STYLE SHEETS

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

Chapter 3: Working with Templates and Styles

14

PREVIEWING THE SITEChapter 3: Working with Templates and Styles

15

WHAT TO DO?

HOMEWORK Who wants to be a

Computer Genius? @ www.scsite.com/ew3/learn

Due next class meeting @ 8am

LABS In the Lab:

Lab 3: Garcia’s Coffee Shop- pg. 213

Chapter 1: Introduction to HTML

16