1 / 41

Tutorial 1:

Tutorial 1:. Getting Started with Expression Web 3. Objectives. Session 1.1 Identify the purpose of XHTML and CSS Change views in the editing window Position, close, and open task panes Describe the function of the status bar. Objectives. Session 1.2

thiery
Télécharger la présentation

Tutorial 1:

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. Tutorial 1: Getting Started with Expression Web 3

  2. Objectives New Perspectives on Microsoft Expression Web 3.0 Tutorial 1 • Session 1.1 • Identify the purpose of XHTML and CSS • Change views in the editing window • Position, close, and open task panes • Describe the function of the status bar

  3. Objectives • Session 1.2 • Use the Expression Web editing tools • Cut and paste text • Enter page properties for search engines • Use the SuperPreview feature New Perspectives on Microsoft Expression Web 3.0 Tutorial 1

  4. Visual Overview The Expression Web Workspace New Perspectives on Microsoft Expression Web 3.0 Tutorial 1

  5. How Web Pages Are Created New Perspectives on Microsoft Expression Web 3.0 Tutorial 1 • Computer Languages • XHTML (HTML) • Extensible Hypertext Markup Language • Stricter method of writing HTML code • Cascading Style Sheets - CSS • Separates structure of a web page from the appearance of the page • XHTML and CSS are markup languages • Not programming languages • Renders (prepares the display of) page content

  6. How Web Pages Are Created New Perspectives on Microsoft Expression Web 3.0 Tutorial 1 • Working with Expression Web • Creates all XHTML and CSS code for you • Creates Web pages as they will appear in browser • Contains Expression Encoder and Expression Design • Creates links to Web pages and updates the XHTML code • Contains powerful file management tools • Contains full range of editing tools

  7. Starting Expression Web • Open Expression Web • Maximize window • Only Common toolbar is displayed (default) • Reset Workspace Layout • Toolbars are arranged exactly as they appeared during the last session • Resetting restores workspace to its default settings New Perspectives on Microsoft Expression Web 3.0 Tutorial 1

  8. Starting Expression Web New Perspectives on Microsoft Expression Web Tutorial 1

  9. Starting Expression Web New Perspectives on Microsoft Expression Web 3.0 Tutorial 1 • Navigating the Expression Web Workspace • Establishes the overall interface for the Expression Web program • Provides menu bar and 11 toolbars • Customizable workspace • Can dock and resize toolbars

  10. Starting Expression Web • Saving and Renaming a File • Asterisk to right of file name on document tab • File needs to be saved • Expression gives each new page a default name • Untitled_1.html • Several documents can be open at the same time • Click File menu then click Save As to change the name • Type new name • Click Save New Perspectives on Microsoft Expression Web 3.0 Tutorial 1

  11. Starting Expression Web New Perspectives on Microsoft Expression Web 3.0 Tutorial 1

  12. Starting Expression Web New Perspectives on Microsoft Expression Web 3.0 Tutorial 1 • Using the Editing Window • Design view • Displays no XHTML or CSS code • Displays Web page the way it might look in a browser • Code view • Displays only XHTML and CSS code • Code is automatically created by Expression Web • Split view • Code pane on top; Design pane on bottom

  13. Starting Expression Web New Perspectives on Microsoft Expression Web 3.0 Tutorial 1

  14. Starting Expression Web New Perspectives on Microsoft Expression Web Tutorial 1

  15. Starting Expression Web New Perspectives on Microsoft Expression Web 3.0 Tutorial 1 • Working with Web Page Code • World Wide Web Consortium (W3C) • International organization that controls HTML and CSS standards • DOCTYPE • Document Type declaration • Instruction that identifies the version of HTML used in the web page

  16. Starting Expression Web New Perspectives on Microsoft Expression Web 3.0 Tutorial 1 • Element • Creates content - heading, paragraph, or list • Tags • Show beginning and ending of an element • Usually appear in pairs • Start Tag: <p> • End Tag: </p> • Start <html> tag appears below the document type declaration and ends with an end tag: </html>

  17. Starting Expression Web • Start <title> and end </title> tags identify what appears in the browser’s title bar • All content displayed in the browser is contained within the start <body> and end </end> tags • Just content for the web page appears in the browser • No HTML or CSS code New Perspectives on Microsoft Expression Web 3.0 Tutorial 1

  18. Starting Expression Web • Using the Design Guides • Vertical ruler • Indicates measurements down the editing window • Horizontal ruler • Indicates measurements across the editing window • Grids • Arrangement of horizontal and vertical lines • Used to position and align objects in the editing window New Perspectives on Microsoft Expression Web 3.0 Tutorial 1

  19. Starting Expression Web New Perspectives on Microsoft Expression Web 3.0 Tutorial 1

  20. Working with Panels New Perspectives on Microsoft Expression Web 3.0 Tutorial 1 • Folder List Panel • Lists all files and folders in a Web site • Tag Properties Panel • Lists all ways an HTML tag at its current location can be modified at the current location of the insertion point • CSS Properties Panel • Lists the CSS code in effect on the current page where the insertion point is currently positioned

  21. Starting Expression Web New Perspectives on Microsoft Expression Web 3.0 Tutorial 1 • Toolbox Panel • HTML group • ASP.NET Controls • Apply Styles Panel • Use to create and modify CSS styles • Manage Styles Panel • Use to manage and organize CSS styles

  22. Working with Panels New Perspectives on Microsoft Expression Web 3.0 Tutorial 1 • Using the Status Bar • Located at the bottom of the Workspace • Options

  23. Working with Panels New Perspectives on Microsoft Expression Web 3.0 Tutorial 1

  24. Visual OverviewThe SuperPreview Window New Perspectives on Microsoft Expression Web 3.0 Tutorial 1

  25. Entering Text New Perspectives on Microsoft Expression Web 3.0 Tutorial 1 • Entering Text • Type normally • Let text wrap • Press Enter to create a blank line between paragraphs • Press Shift + Enter to end a line short of the right margin • Enter only one space after any punctuation that ends a sentence

  26. Entering Text New Perspectives on Microsoft Expression Web 3.0 Tutorial 1 • Code Tab (Design view) • Indicates what HTML tag is in effect

  27. Entering Text • Body Tag (Code view) • Begins the content of the web page • &nbsp; (Code view) • Nonbreaking space • Entered by Expression Web whenever more than one space is entered at a time while typing • Extra space shows up in browser New Perspectives on Microsoft Expression Web 3.0 Tutorial 1

  28. Entering Text • &#39 (Code view) • HTML code for an apostrophe • Appears in code view when an apostrophe is typed in Design view • Using Editing Tools • Checking the spelling • Red wavy line appears under a word that is misspelled • Spell check icon is on the Standard toolbar New Perspectives on Microsoft Expression Web 3.0 Tutorial 1

  29. Using the Editing Tools • Using the Thesaurus Feature • Shows a list of synonyms • Press Shift + F7 keys to open the Thesaurus • Using Find and Replace • Search for text and/or HTML code • Using Copy, Cut, and Paste • Select not only the text but the surrounding HTML code that provide the formatting the text New Perspectives on Microsoft Expression Web 3.0 Tutorial 1

  30. Using the Editing Tools • Changing Page Properties • Page Properties dialog box • Web page title • Appears in browser title bar • Keywords • A description • Used by Web page search engines to locate web pages New Perspectives on Microsoft Expression Web 3.0 Tutorial 1

  31. Using the Editing Tools New Perspectives on Microsoft Expression Web 3.0 Tutorial 1

  32. Viewing the File in the Browser • Default browser • The one selected to preview a web page • Press F12 to view the page in the browser • Browser List • List of browsers and browser versions installed on your computer • View the Web Page • With the default browser only • In all the versions installed on the computer • Save the file first New Perspectives on Microsoft Expression Web 3.0 Tutorial 1

  33. Using Snapshot View • Using Snapshot View • Displays web page in the default browser using a split screen • Top pane • Shows document in Design view • Bottom pane • Shows document as it would appear in the default browser New Perspectives on Microsoft Expression Web Tutorial 1

  34. Using Snapshot View New Perspectives on Microsoft Expression Web 3.0 Tutorial 1

  35. Using SuperPreview • SuperPreview can display the same page in two ways • Using different browsers • Using different versions of the same browser in a split screen • Baseline browser is the default browser • Comparison browser is the browser against which the presently opened file is compared New Perspectives on Microsoft Expression Web Tutorial 1

  36. Using SuperPreview • SuperPreview toolbar is divided into four groups of buttons • Group one buttons control selection • Selection Mode • Panning Mode • Group two buttons control highlighting • Box Highlighting Mode • Lights Out Highlighting Mode New Perspectives on Microsoft Expression Web 3.0 Tutorial 1

  37. Using SuperPreview • Group three buttons are toggle buttons • Activates and deactivates a function • Group Four buttons control the split and layout • Vertical Split Layout • Horizontal Split Layout • Overlay Layout • Single Layout New Perspectives on Microsoft Expression Web 3.0 Tutorial 1

  38. Using SuperPreview New Perspectives on Microsoft Expression Web 3.0 Tutorial 1

  39. Accessing the Help Feature • Help feature contains three tabs • Contents • Displays folders that can be expanded to see greater details • Index • Displays all available topics • Search • Displays a search box where keywords can be entered New Perspectives on Microsoft Expression Web Tutorial 1

  40. Accessing the Help Feature New Perspectives on Microsoft Expression Web 3.0 Tutorial 1

  41. Printing a File • Print as you would in many other Windows programs • Use the File menu • Use the shortcut Ctrl + P New Perspectives on Microsoft Expression Web Tutorial 1

More Related