Microsoft Expression Web 3

Chapter 1

Creating an Expression Web Site

Chapter 1: Creating an Expression Web Site 2

Chapter Objectives

• Start and quit Expression Web• Describe the features of Expression Web’s main window• Create a new Expression Web site• Set page properties• Enter and format text• Create headings and lists• Switch views• Spell check a page• Save a page• Show and hide visual aids• Use Quick Tag Selectors• Display a page in a browser• Close an Expression Web site

What is Expression Web?

• It is a WYSIWYG web site authoring tool• You can create or edit HTML files that contain all

types of content, including CSS files.

• Before we begin… read the Project on pages 2-3• Once you have done this, go to your home

directory and create a Webex directory. Underneath that create a Ch1 subdirectory.

Chapter 1: Creating an Expression Web Site 3

Plan Ahead

• 1. Choose a website structure to use as a starting point. – What is the purpose of the site? How many pages will you need? How will users navigate the pages?

• 2. Determine folder structure and file naming conventions. All files have to be in the same location.

• 3. Determine page property settings that will apply to all pages.

• Decide on the page layout. Text, pictures, video, etc.• Determine the text content of the pages. Use as feww

words as possible.• Determine the format for the text elements of the

page. (headings, fonts, lists, colors)

Chapter 1: Creating an Expression Web Site 4

Start Expression Web

Chapter 1: Creating an Expression Web Site 5

Resetting Workspace Layout

• Click Panels on the menu bar to open the Panels menu and then point to Reset Workspace Layout

• Click Reset Workspace Layout to restore the panels to their default layout

• If a site is open, click Site on the menu bar to open the Site menu, and then click Close to close the site

Chapter 1: Creating an Expression Web Site 6

Creating a Web Site• Do pages 10-13• Be careful! You aren’t using a USB drive, but saving this

to your Ch1 folder in your home directory that you just created!

Chapter 1: Creating an Expression Web Site 7

Double click on the default.html file.Check out the design, split, code buttons on bottome of page

Setting Page Properties

• Here we will set properties that apply to the website, such as:– Page descriptions

– Keywords

– Titles

– Etc

• Do pages 15-19 and the result will look like the following slide …

Chapter 1: Creating an Expression Web Site 8

Setting Page Properties

Chapter 1: Creating an Expression Web Site 9

Adding a <Div> Tag

• Why use <DIV> tags – makes pages download faster and allows you to formation sections of the page at a time with similar formatting options.

• 4 Divisions– Masthead

– Navigation

– Content

– Footer

• Many of the following commands should look familiar.• Do pages 20-30.

Chapter 1: Creating an Expression Web Site 10

Completing Page Content

Chapter 1: Creating an Expression Web Site 11

Saving a Web Page

Chapter 1: Creating an Expression Web Site 12

Formatting and Styles• Formatting – the combination of design

characteristics that are applied to text, specifying a hierarchy of headings and text levels.– Fonts & font sizes

– Bold, italics, underline, etc.

– Alignment

– Indentation

– Headings, subheadings

• Do pages 31-45. • Let me see it when you are finished! See next

slide!

Chapter 1: Creating an Expression Web Site 13

Should look similar to this!

Chapter 1: Creating an Expression Web Site 14

Spell Check a Page

• Do pages 46-47, just to humor me

Chapter 1: Creating an Expression Web Site 15

Showing Codes and Splitting Views

• Click the Show Code View button at the bottom of the editing window to see the HTML tags and the assigned styles

• Click the Show Split View button at the bottom of the Editing window to show both Code and Design views simultaneously. In Code view, drag the scroll box up to show the head area of the code.

• Drag the separator that divides the two sections up to display more of the Design view window

• Select the words, Natural Beauty, in the Design view window. Expression Web will also select them in the Code view window

• Click anywhere in the Design view window to deselect the text

• Click the Show Design View button to close Code view

Chapter 1: Creating an Expression Web Site 16

Showing Codes and Splitting Views

Chapter 1: Creating an Expression Web Site 17

Viewing the Page in the Snapshot Panel

• Click Snapshot on the Panels menu to open the Snapshot panel

• Drag the Snapshot panel scroll box down to see the rest of the default.html page

• Click the Close button to close the Snapshot panel

• This will show you how your page looks in Internet Explorer!

Chapter 1: Creating an Expression Web Site 18

Hiding and Displaying Visual Aids

• Do pages 52-55

• Look at the Printing section on page 56. Typically we WILL NOT print the items we work on as a class project thru the chapter, but you will print your labs so that I will have something to write on when I hand them back to you.

• You need to know how to print!

Chapter 1: Creating an Expression Web Site 19

Closing a Web Page

Chapter 1: Creating an Expression Web Site 20

Quitting Expression Web

Chapter 1: Creating an Expression Web Site 21

Whatever shall we do now?

Homework• Wheel of terms @

www.scsite.com/ew3/learn• Due next class meeting at the

beginning of class.• 5 points deducted for each day

late or if turned in after the beginning of class.

Labs• In the Lab Lab2: Sweet Tooth

Bakery – pg. 65-66• Cases and Places #4 – Make it

Personal• Print out a copy of both when

finished. Hand them in together. Make sure your name is in the footer of each website.

• The files you need are on public/WEB Expression data files/Chapter 01

Chapter 1: Creating an Expression Web Site 22