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 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 5 Do 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

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

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

PREVIEWING THE SITE Chapter 3: Working with Templates and Styles 15

WHAT TO DO? HOMEWORK  Who wants to be a Computer  Due next class 8am LABS  In the Lab:  Lab 3: Garcia’s Coffee Shop- pg. 213 Chapter 1: Introduction to HTML 16