Tutorial 1 - Solano Community College

Tutorial 1 - Solano Community College

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 SuperPreview 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 (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 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:

End Tag:

Start tag appears below the document type declaration and ends with an end tag: New Perspectives on Microsoft Expression Web 3.0 Tutorial 1

16 Starting Expression Web Start and end tags identify what appears in the browsers title bar All content displayed in the browser is contained within the start and 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 DocType 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 SuperPreview 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 + 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 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 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 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 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 35 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 36 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 37

Using SuperPreview 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

Recently Viewed Presentations

  • INTERIOR DESIGN PRACTICE and OFFICE MANAGEMENT - I

    INTERIOR DESIGN PRACTICE and OFFICE MANAGEMENT - I

    MKS. or the Meter- kilogram -second system. MTS. ... do not recreate the original sound, yet convey the meaning. A . graphical representation . stands for the original in . a restricted sense • Nominally . graphical representations . are...
  • Malware Reverse Engineering - SJSU Computer Science Department

    Malware Reverse Engineering - SJSU Computer Science Department

    Malware Reverse Engineering. Though 'spams' have decreased, 'malicious attacks' have increased! Use of more and more web-toolkits
  • 1 WHAT IS PUBLISHER? Things you can do

    1 WHAT IS PUBLISHER? Things you can do

    WHAT IS PUBLISHER? * Things you can do with Publisher: Greeting Cards / Party Invitations Banners Flyers / Handouts Posters Business Cards Calendars Brochures Newsletters & Other Publications MICROSOFT PUBLISHER FEATURES * Quick Publications Web Sites and E-mail Clipart Gallery...
  • Literatura: Gêneros e Modos de Leitura

    Literatura: Gêneros e Modos de Leitura

    Em Verso e em Prosa. Prosa e Poesia: qual a diferença? A . diferença. entre . prosa. e . poesia. é mais simples do que se imagina. A maior dificuldade que as pessoas enfrentam ao tentar diferenciar os textos literários...
  • ASEN 1400 - University of Colorado Boulder

    ASEN 1400 - University of Colorado Boulder

    Mission Statement Jaevyn Faulk . Collect Ultraviolet Radiation. Compare data we collect to past data on sun's activity. Study how solar activity has changed throughout an eleven-year sunspot cycle and how it has changed recently.
  • Hemoglobin: Structure - Language Log

    Hemoglobin: Structure - Language Log

    The Basis for Human Variation Human Variation The Nature of Variation The study of human variability: Description and process Populations vs individuals Nature vs nurture Stochastic vs adaptive Variability in form and function in adults is the result of the...
  • Advanced Computer Networks Course Objectives

    Advanced Computer Networks Course Objectives

    CS513/ECE506 Computer Networks Spring 2006 Professor Bob Kinicki Course Objectives To clarify networking terminology. To introduce the student to the major concepts involved in wide-area networks (WANs), local area networks (LANs) and Wireless LANs (WLANs).
  • Security Audits, Standards & Inspections

    Security Audits, Standards & Inspections

    Security Audits, Standards, & Inspections. ... SOX §404 uses COSO - see next section of these slides & §54.4 of text. See pro/cons of SAS 70 (Exhibit 54.2 in CSH6) Reformulated on following page ** Committee of Sponsoring Organizationsof the...