Introduction to Expression Web 4

1. Introduction to Expression Web 4 Supplemental Material

2. What is Expression Web? • Expression Web is a professional Web development environment • It can be used as part of the integrated Microsoft Expression Studio • Expression Web will support work with HTML and CSS, JavaScript and ASP.Net • Expression Web is available at no charge to students as part of the MSDNAA license

3. Expression Web Views • Expression Web allows the developer to rapidly change between views • The Design View is a graphical WYSIWYG interface – (what you see is what you get). • A Code View is also provided which allows for direct code manipulation. • A Split View divides the screen between the Design View and Code View.

4. Expression Web Environment

5. Toolbars in Expression Web • You can add or delete items from the Toolbar. • The Common Toolbar options allow for creating new page, new folder, viewing in a browser, setting text font, size and alignment. • The Standard Toolbar adds icons for some HTML elements like tables, layers, images, and hyperlinks. • You can dock or undock toolbars and add or delete individual items on a toolbar.

6. Expression Web Toolbar • Open a Toolbar using the View=>Toolbars menu. • The Common and Standard Toolbar docked together. • You can choose how may toolbars are visible at any one time. Dock Or Undock

7. Page Tabs: Allows for working with multiple pages at once Editing Area:Design View is the WYSIWYG viewCode View is the code view View Toggle:Choose the Design or Source View Page Development Area

8. UsingTask Panes • Four Task Panes appear by default when you start Expression Web • Folder List • Tag Properties/CSS Properties • Toolbox • Apply Styles/Manage Styles • You can open any of the 18 possible Task Panes • Like Toolbars, these can be docked and undocked

9. Task Panes • Folder List: Allows for viewing of Website folders, pages or images • Tag/CSSProperties:Tag and CSS Properties are available to help when adding new elements to the page

10. Task Panes cont. • Toolbox: Provides list of frequently used tags • Apply/Manage Styles:Used to apply or manage existing CSS style rules

11. Setting Up a Websitefor Expression Web • Create a Project/Practice folder on your computer as we have done all semester • Copy any other existing files needed to the Project folder • Create an Images folder inside the Project folder to hold project images • Copy any needed images to the Images folder • Open the Website index file using File=> Site=>Open Site choose Project Folder

12. Using the Folder List • The website folders and files will be shown in the Folder List task pane • Click on a file to open it for modification • You can drag files or folders or delete them via the Folder List

13. Setting Up Defaults for New HTML Pages • You will need to make sure new HTML pages added to your project have the proper DOCTYPE and your preferred file extension • Use the Tools=>Page Editor Options • Select the Authoring tab • Set the Default extention - .htm • Uncheck the BOM for your extension • Make sure the DOCTYPE and Secondary Schema to XHTML 1.0 Transitional

14. Page Editor Options Dialog • Default Document – HTML • Default File Extension - .htm • Uncheck BOM • Document Type and Secondary Schema - XHTML 1.0 Transitional • CSS Schema – CSS 2.1

15. Adding a New HTML Page • Create a new HTML file using the File=>New=>HTML option • The new page will be named Untitled_1.htm • It is based on the default HTML options you have set • You can change the filename through the File=> Save option

16. Setting Page Properties • You can use the Page Properties dialog to set some of the following: • Page Title • Page backgound color or background image • link, visited link, active link and hover link colors • Page margins or padding • You can also do this on the page in Code View or in CSS with a stylesheet

17. Using Page Properties Dialog • Open the dialog with Format=>Properties • On the General tab set the Title • Expression Web uses a combination of inline and embedded CSS to do these: • Use the Formatting tab • Browse to find a background image • Choose a background color and text color • Set link, visited, active, and hover colors • Use Advanced tab to set page margins

18. Page Properties Dialog

19. IntelliSense • The Expression Web development environment supports IntelliSense in the Code View • IntelliSense generates an automated autocomplete pop up list as the user begins to type characters of an HTML tag, attribute, or CSS property • The user can click on the item in the list and complete their element.

20. IntelliSense = Productivity • IntelliSense speeds up software development by reducing the amount of keyboard input required. • It also allows less reference to external documentation as documentation on many functions appears with the function name. • Think of it as just-in-time documentation.

21. Intellisense – Pop Up List

22. Using the Tag Properties Task Pane • Tag Properties show the available properties of the selected tag • In this case, the <img> tag is selected so all the image properties are shown • You can set values for these properties

23. Using the CSS Properties Task Pane • CSS Properties show the available properties of the selected tag • In this case, the <h3> tag has a selector styles set in the embedded style sheet • You can view its styles or change their values

24. HTML Compatibility Checker • Expression Web provides built-in validation of your code through HTML Compatibility Checker • The <!DOCTYPE> tag in your source code is used to determine the validation standard • To test your validation, choose the Tools=>Compatibility Reports • Make sure the Compatibility Checker has the correct <!Doctype> selected

25. Compatibility Checker • You can choose to check all, or some pages of your site

26. Validation Errors and Warnings

27. Viewing Pages in a Browser • There are many ways to view your pages in a browser • File=>Preview in Browser • Standard Menu, Preview in Browser Icon • File=>SuperPreview to get ultra preview control • Remember because of inconsistencies between major browsers, you should always view in at least in IE and Firefox

28. Preview in Browser

29. Closing a Web Site • When you are finished with editing your site in Expression Web • Use File=>Site=>Close • This method is preferred rather than closing one file at a time • Each time you open Expression Web, the last site used will automatically open

30. Final Comment • Many web development environments allow for management of complex web sites, creation of templates and full support of CSS • Why Microsoft Expression Web? • Expression Web is available through MSDNAA license • Expression Web environment is similar to the Microsoft Visual Studio environment used in future courses. • Hope you will enjoy the additional environment support and capability of this environment