Tutorial 1 Getting Started with Expression Web 3
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 New Perspectives on Microsoft Expression Web 3. 0 Tutorial 1 2
Objectives • Session 1. 2 – Use the Expression Web editing tools – Cut and paste text – Enter page properties for search engines – Use the Super. Preview feature New Perspectives on Microsoft Expression Web 3. 0 Tutorial 1 3
Visual Overview The Expression Web Workspace New Perspectives on Microsoft Expression Web 3. 0 Tutorial 1 4
How Web Pages Are Created • 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 New Perspectives on Microsoft Expression Web 3. 0 Tutorial 1 5
How Web Pages Are Created • 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 New Perspectives on Microsoft Expression Web 3. 0 Tutorial 1 6
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 7
Starting Expression Web New Perspectives on Microsoft Expression Web Tutorial 1 8
Starting Expression Web • 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 New Perspectives on Microsoft Expression Web 3. 0 Tutorial 1 9
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 10
Starting Expression Web New Perspectives on Microsoft Expression Web 3. 0 Tutorial 1 11
Starting Expression Web • 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 New Perspectives on Microsoft Expression Web 3. 0 Tutorial 1 12
Starting Expression Web New Perspectives on Microsoft Expression Web 3. 0 Tutorial 1 13
Starting Expression Web New Perspectives on Microsoft Expression Web Tutorial 1 14
Starting Expression Web • Working with Web Page Code – World Wide Web Consortium (W 3 C) • International organization that controls HTML and CSS standards – DOCTYPE • Document Type declaration • Instruction that identifies the version of HTML used in the web page New Perspectives on Microsoft Expression Web 3. 0 Tutorial 1 15
Starting Expression Web – 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> New Perspectives on Microsoft Expression Web 3. 0 Tutorial 1 16
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 17
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 18
Starting Expression Web New Perspectives on Microsoft Expression Web 3. 0 Tutorial 1 19
Working with Panels • 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 New Perspectives on Microsoft Expression Web 3. 0 Tutorial 1 20
Starting Expression Web • 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 New Perspectives on Microsoft Expression Web 3. 0 Tutorial 1 21
Working with Panels • Using the Status Bar – Located at the bottom of the Workspace – Options HTML Incompatibility Code Errors Doc. Type and Schema Download Size New Perspectives on Microsoft Expression Web 3. 0 Tutorial 1 Visual Aids CSS Mode CSS Schema Page Size 22
Working with Panels New Perspectives on Microsoft Expression Web 3. 0 Tutorial 1 23
Visual Overview The Super. Preview Window New Perspectives on Microsoft Expression Web 3. 0 Tutorial 1 24
Entering Text • 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 New Perspectives on Microsoft Expression Web 3. 0 Tutorial 1 25
Entering Text – Code Tab (Design view) • Indicates what HTML tag is in effect New Perspectives on Microsoft Expression Web 3. 0 Tutorial 1 26
Entering Text – Body Tag (Code view) • Begins the content of the web page – (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 27
Entering Text – ' (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 28
Using the Editing Tools • Using the Thesaurus Feature – Shows a list of synonyms – Press Shift + F 7 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 29
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 30
Using the Editing Tools New Perspectives on Microsoft Expression Web 3. 0 Tutorial 1 31
Viewing the File in the Browser • Default browser – The one selected to preview a web page • Press F 12 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 32
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 33
Using Snapshot View New Perspectives on Microsoft Expression Web 3. 0 Tutorial 1 34
Using Super. Preview • Super. Preview 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 35
Using Super. Preview • Super. Preview 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 36
Using Super. Preview – 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 37
Using Super. Preview New Perspectives on Microsoft Expression Web 3. 0 Tutorial 1 38
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 39
Accessing the Help Feature New Perspectives on Microsoft Expression Web 3. 0 Tutorial 1 40
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 41
- Slides: 41