Microsoft Expression Web 3 – Illustrated Unit A: Getting Started with Microsoft Expression Web 3.0

1. Microsoft Expression Web 3 – IllustratedUnit A: Getting Started with Microsoft Expression Web 3.0

2. Objectives • Understand Web design software • Start Microsoft Expression Web • Explore the Expression Web workspace • Open a Web page and preview it in a browser • Work with views and panels Expression Web 3 - Illustrated

3. Objectives (continued) • View Web page elements and visual aids • Get help • Print and close a page and exit Expression Web Expression Web 3 - Illustrated

4. Understanding Web Design Software • HTML (Hypertext Markup Language) – universal language for Web pages. • Web page – a text file written in HTML. • Web site – a collection of related Web pages linked together. • Web browser – software that interprets HTML code and displays it as text and images. Expression Web 3 - Illustrated

5. Understanding Web Design Software (continued) • WYSIWYG (pronounce wiz-ee-wig) – what you see is what you get. • Web design program that shows you what your Web page will look like in a Web browser. • No knowledge of HTML is necessary when using a WYSIWYG program. • Web standards – recommendations for creating Web pages. Expression Web 3 - Illustrated

6. Understanding Web Design Software (continued) • CSS (Cascading Style Sheets) – or stylesheets, rules that describe the presentation and visual design of a page. • Stylesheets can define fonts, colors, layouts, and positioning of elements on page. • Web server – computer connected to the Internet that stores Web pages and displays to your Web browser. • Publishing – copying Web pages from your computer to a Web server. Expression Web 3 - Illustrated

7. Starting Microsoft Expression Web • Start from desktop or Start Menu Programs. Expression Web 3 - Illustrated

8. Exploring the Expression Web Workspace • Title bar – appears at top of program window; shows title of current Web site or Web page. • Menu bar – located under title bar; includes all commands organized into menus. • Common toolbar – located under menu bar; provides access to common tasks. Expression Web 3 - Illustrated

9. Exploring the Expression Web Workspace (continued) • Panels – small moveable windows that provide access to tools for specific tasks. • Merged panels – panels that occupy the same space and appear one in front of the other. • Editing window – large area under the Common toolbar where most of the design work is done. Expression Web 3 - Illustrated

10. Exploring the Expression Web Workspace (continued) • Quick tag selector bar – located below tab area; allows you to easily select and edit HTML tags on Web page. • Status bar – located along bottom of program window; provides helpful information about code and settings. Expression Web 3 - Illustrated

11. Exploring the Expression Web Workspace (continued) Expression Web 3 - Illustrated

12. Exploring the Expression Web Workspace (continued) Expression Web 3 - Illustrated

13. Opening a Web Page and Previewing it in a Browser • Opening a Web page opens a single page and displays it in the editing window. • Open a Web site displays list of files in the Folder List panel and opens a Web site tab in the editing window. • Preview – allows you to check your pages in various browsers as you work. • Must save Web page before you can preview it. Expression Web 3 - Illustrated

14. Opening a Web Page and Previewing it in a Browser (continued) Expression Web 3 - Illustrated

15. Working with Views and Panels • Three views for working with a page: • Design view – shows what page will look like when viewed in browser; default view. • Code view – displays HTML. • Split view – combination view, displays a code pane and a design pane. • Workspace can be reset to return panels to default locations. Expression Web 3 - Illustrated

16. Working with Views and Panels (continued) Expression Web 3 - Illustrated

17. Viewing Web Page Elements and Visual Aids • Web pages are made up of elements such as images, tables, and text. • Many elements only show up in code view. • Visual aids allow you to see and modify empty or invisible elements in design view. • Table – grid-like container element with rows and columns; used to lay out elements on a page. Expression Web 3 - Illustrated

18. Viewing Web Page Elements and Visual Aids (continued) • Headings • Six levels • H1 – highest level; largest. • H6 – least important; smallest. • Form – HTML element that allows visitors to send information from a Web site. • Hyperlink – text or image that visitors click to open another Web page, Web site, or file; also called a link. Expression Web 3 - Illustrated

19. Getting Help • Expression Web has a User Guide to refer to for questions or problems. Expression Web 3 - Illustrated

20. Printing and Closing a Page and Exiting Expression Web • In Expression Web, background colors and images do not print. • When launched, Expression Web opens the last Web page you were working on, so close your Web page or site before exiting. • In the Print Page Setup dialog box, variables are used in header and footer: • &T – means title • &P – means page number Expression Web 3 - Illustrated

21. Printing and Closing a Page and Exiting Expression Web (continued) Expression Web 3 - Illustrated

22. Summary • Microsoft Expression Web 3 allows you to design, publish, and manage professional-looking, standards-compliant Web sites. • The workspace is where you create and edit Web pages. • The program window consists of a title bar, menu bar, Common toolbar, editing window, panels, and a status bar. • You can open either individual Web pages or an entire Web site at once. Expression Web 3 - Illustrated

23. Summary (continued) • There are three views for working with a page: design, code, and split. • Most Web pages are made up of many different elements such as HTML, images, tables, and text. • The User Guide can provide assistance if you have questions or problems. • Background colors and images do not print. • When started, the last Web page or site that you were working on opens. Expression Web 3 - Illustrated