1 / 30

Introduction to Expression Web 4

Introduction to Expression Web 4. Supplemental Material. 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

pillan
Télécharger la présentation

Introduction to Expression Web 4

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related