Microsoft Expression: Web Design

Unit A

Understanding Web Design Software

Using Microsoft Expression Web you can:› Create Web pages and Web sites› Set what you site will look like as you design it › Add text, images, multimedia files, and scripts

to your Web pages› Create Web sites that adhere to Web

standards› Create Cascading Style Sheets to format and

lay out your pages› Manage your Web site› Publish you Web Site

Create Web pages & Websites

Web page- text file, usually written in a language called HTML.

HTML- (Hypertext Markup Language)- code that references formats, images, and other multimedia files.

Web Site- collection of related Web pages, linked together

Web browser- software that interprets HTML code and displays it as the text and images you see on a Web page.› Microsoft Internet Explorer, Mozilla Firefox,

Google Chrome, Apple Safari

See what your site will look like as you design it

WYSIWYG (pronounced WEZ-EE-WIG) › What You See Is What You Get

Allows you to see what you page will look like in a browser as you build it

Allows you to create Web pages without knowing any HTML code.

Create Web sites that adhere to Web Standards

Web Standards- guidelines for creating a web page. › Just like when writing papers you have to

follow grammar and spelling, you have to follow HTML codes to create a website.

› If an HTML code is incorrect the website will not work.

Create Cascading Style Sheets

Cascading Style Sheets (CSS), often just called style sheets› CSS are rules that describe the

presentation and visual design of a page, including fonts, colors, and often the layout and positioning of elements on a page.

Managing the Web site

Expression Web organizes the files to ensure you keep track of:› HTML files, › CSS files, › Images and multimedia files, › Scripts, › Hyperlink files

Publish your Web site Web server- computer connected to the

Internet that stores Web pages and other Web content and displays it to a Web browser.

Publish- copying your Web pages and related files from your computer to a Web server.

(Starting Expression Web- Page 4)

Expression Web Workspace Title Bar- appears at the very top of the

program window› Shows the title of the current Web site (if a

site is open) or Web page (if only a page is open)

Menu Bar- located under the title bar› Includes all Expression Web commands

organized into menu such as File and Edit

Expression Web Workspace Common Toolbar- located under the

menu bar, provides access to common tasks in Expression Web › Tasks Include: creating a new page, saving

and opening files, and common text formatting options.

Expression Web Workspace Task panes- small, resizable windows that

provide access to tools for specific tasks. › They appear on either side of the Expression

Web window› Four task panes are displayed by default:

Folder List- Top Left Tag Properties- bottom left Toolbox- top right Apply Styles- bottom right

Many task panes have more than one tab.

Expression Web Workspace Editing Window- large area under the

Common Toolbar where you do most of your design work.

A tab appears at the top of the editing window to indicate the Web Page open. › If you open additional web pages,

additional tabs appear

Expression Web Workspace

Quick Tab Selector Bar- located just below the tag area› Allows you to easily select and edit specific

HTML tags on your Web page

Different view options are located on Bottom left corner› Show Design View, Show Split View, Show

Code View

Expression Web Workspace Status Bar- located along the bottom of

the program window.› Provides helpful information such as:

Current location of the insertion point Instructions for getting help Current settings

› For the page currently working on: Indicated file size Page dimensions Which versions of HTML & CSS are being

used

TITLE BAR

MENU

BAR

QUICK TAG SELECTOR BAR

WEB PAGETAB

STATUS BAR

EDITING WINDO

W

TASK PANES

COMMON

TOOLBAR

Opening a Web Page & Previewing it in a Browser

Web pages and Web sites can be viewed in the browser

They may not always look the same in a browser, we need to preview to be sure.

› (Steps on page 8)

Working with Views & Task Panes

Viewing Options› Design View- shows what a page will look

like when viewed in a browser. › Code View- displays the HTML code that

the page is written in› Split View- combination of design and code

view Task panes appear in all views and can

be opened, closed, expanded, collapsed, and rearranged› (page 10)

Viewing Web Page Elements by Visual Aids

When designing a site you will be using different elements.

You can use the Visual Aids to help you separate the elements so you do not need to use Code View. › (Page 12)

Getting Help- Page 14

Printing and Closing a Page and Exiting Expression Web – Page 16

Complete Concept Review- Page 18-19

Complete Skills Review- Page 19-20

Real-Life Challenge- page 21