Transcript Creating an Expression Web Site

Microsoft Expression Web 3
Chapter 1
Creating an Expression Web Site
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
Chapter 1: Creating an Expression Web Site
2
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!
Double click
on the
default.html
file.
Check out
the design,
split, code
buttons on
bottome of
page
Chapter 1: Creating an Expression Web Site
7
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