CIS 3630 Test 1a.txt

    • Extensible Hypertext Markup Language
    • A language used to build Web pages
  2. CSS
    • Cascading Style Sheets
    • Separates the content of the Web page from the formatting of the page
    • Style sheet language that separates format from content
  3. XHTML and CSS
    • The two languages use in our textbook
    • Are used together to create and format Web pages
    • Are markup languages, not programming languages
  4. Markup language
    • Strictly a means to render (prepare the display of) Web page content
    • A computer language that renders Web page content
  5. XHTML element
    • A structure that creates content, such as heading, a paragraph, or a list
    • Any structural part of an HTML document
    • Ex.: strong - is used to display text as bold in the browser
  6. Render
    To display a page for the Web
  7. Tag
    • An element marker that shows the start and end of an HTML element
    • Tags usually appear in pairs; there is a start tag, some Web page content, and then a corresponding end tag
    • Start tags are proceded and followed by angle brackets, like so: [strong]
    • [ ] = < >
    • End tags also have angle brackets, but they also contain a slash character, like so: [/strong]
    • Ex.: [strong]Club House[/strong]
  8. Start tag
    A marker that indicates the start of a formatting instruction
  9. End tag
    A marker preceded by a forward slash that indicates the end of a formatting instruction
  10. Expression Web
    • Simplifies the process of Web page creation and formatting because it enters all of the XHTML and CSS code for you
    • It allows you to use code
    • You can create your Web pages as they will appear in the browser
  11. To restore the default window layout
    • Click Task Panes on the menu bar
    • Then click Reset Workspace Layout

    Resetting the Workspace layout applies only to the appearance and placement of the task panes. If you added or removed toolbars, those changes would not be restored.
  12. What is the Workspace composed of?
    • Menu bar
    • Common toolbar
    • Editing window
    • Task panes
    • Status bar
  13. Common toolbar
    • The toolbar that contains the most commonly used Expression Web tasks
    • Combines the most common features of the Formatting and Standard toolbars
    • Has buttons for many of the same features found in Microsoft Office

    Toolbars can be docked (positioned) and resized
  14. Document tab
    • A tab that indicates an open file
    • Indicates the name of the Web page and shows whether revisions have been saved to the page
    • By default, an Expression Web file is given the name Untitled_1.htm
  15. Editing window
    • The largest window in Expression Web, & it appears in the center of the Workspace
    • Use it to create, revise, & format the content for your Web pages
    • It has 3 "views": Design view, Code view, & Split view
  16. Design view
    • Lets you design a page wihout seeing underlying XHTML and CSS code
    • Offers only an approximation of how the page will appear in the browser
    • Your browser, browser version, monitor size, & screen resolution all affect how a Web page appears in the browser
  17. Code view
    Displays only XHTML & CSS code for the Web page
  18. Split view
    Compromise: it splits the screen horizontally, with a window for the code on top and a window for design on the bottom
  19. How to change view?
    • Change views by clicking a View button
    • Also press Ctrl+Page Up to cycle backward through views
    • Ctrl+Page Down keys to cycle forward through views
    • Double-click the resize window bar in Split view to return to Design view
  20. Code tab
    • The tab that appears above an element or style in Expression Web
    • Indicates what XHTML tag or CSS style code is in effect
    • Because you haven't created any content for the Web page yet, the insertion point is within the [body] tag
    • The [body] tag begins the content for your Web page
  21. Body tag
    • A container for all of the XHTML code on the page
    • The tag that controls the formatting for the page itself
  22. World Wide Web Consortium (W3C)
    • Organization that controls the XHTML and CSS standards
    • Makes recommendations regarding computer languages used for the Web
  23. Document Type Declaration (DOCTYPE)
    • Instruction that identifies this Web page as using a particular version of the XHTML standard
    • [ ] = < >
    • The start [html] tag appears below the Document Type Declaration. The document ends with the end [/html] tag.
    • The title of the Web page, some CSS code, and some XHTML code to identify the Web page to browsers are written between the start [head] and the end [/head] tags.
    • The [title] and [/title] tags are used to identfy what appears in the title bar above the document window.
    • All content for the Web page that appears in the browser is placed between the start [body] and end [/body] tags.
  24. Vertical & horizontal ruler
    Using them, you can precisely position a design element a certain distance from the top or the left of the screen

    To display: click View on the menu bar, point to Ruler and Grid, and then click Show Ruler
  25. Vertical ruler
    The ruler that displays the height of the screen in pixels
  26. Horizontal ruler
    The ruler that displays the width of the screen in pixels
  27. Task panes
    • Windows that are used to group related tasks together
    • Can be opened, closed, moved, and resized
  28. Folder List task pane
    • Appears in the upper-left corner of the Workspace
    • Lists all of the files and folders that have been created in your Web site
  29. Tag Properties task pane
    • Is directly below the Folder List task pane
    • Lists all of the ways you can modify an XHTML tag at the current location of the insertion point
    • The task pane in Expression Web that lists attributes and values for elements
    • Has 2 tabs: Tag Properties & CSS Properties
    • Clicking the CSS Properties tab displays the CSS Properties task pane
  30. CSS Properties task pane
    A task pane in Expression Web that lists CSS properties and values
  31. Toolbox task pane
    • The task pane to the right of the Editing window
    • Group some of the more commonly used XHTML elements
    • 3 Task groups: Tags, Form Controls, and ASP.NET control
    • The same options for inserting XHTML code in the Toolbox task pane are available when you click Insert on the menu bar and point to HTML
  32. Apply Styles task pane
    • The task pane to the right of the Editing window
    • Below the Toolbox task pane
    • Contains 2 tabs: Apply Styles task pane and Manage Styles task pane
    • Apply Styles task pane - create, modify, or apply a style
  33. Manage Styles task pane
    • Use to organize and move CSS styles
    • A task pane that lists styles without showing their appearance
  34. Status bar
    • Appears at the bottom of the Workspace
    • The information area at the bottom of the Editing window
    • Divided into several sections, each of which shows information about the current state of the window or the Web page: Visual Aids, Style Application, Download statistics, Rendering Mode, Page Size, Schema Indicator, CSS Indicator
  35. Style
    A rule or collection of rules
  36. Visul Aids
    • A status bar indicator that controls whether margins and padding are visible in the Editing window
    • Useful to display "white space" - margins and padding - that you would not see on the design page
    • You should work with Visual Aids on
    • You can also press the Ctrl and forward slash keys (/) to enable or disable Visual Aids
  37. Style Application
    • Set to auto, Expression Web automatically creates styles for you
    • A toolbar often used to apply styles to a completed document
  38. Download statistics
    • A status bar indicator that shows the size of the page in bytes (characters)
    • The byte size of the Web page at this point should be very small (usually about 317 bytes)
  39. Rendering mode
    • "Standard" should appear to the right of the byte size, indicating that Expression Web is using standard XHTML/CSS code
    • A status bar indicator that displays whether standard XHTML/CSS code is being used
  40. Page size
    • A status bar indicator that controls the size of the Editing window
    • The numbers correspond to the physical number of rows of pixels (picture elements) that create the display in the Editing window
    • Today most users have their page size (the screen resolution) set to 1024 x 780 or 1280 x 1024 pixels (usually for monitors that are 19 inches or larger)
    • The default setting is Current Page Size, which is a good choice; it causes text to wrap as you type paragraph text in the Editing window in Design view
    • The page size value has no effect on how the document appears in the browser
  41. Schema indicator
    • XHTML 1.0 Transitional, current code standard
    • A status bar indicator that displays which version of XHTML is being used
  42. CSS indicator
    • CSS version 2.1, current code standard
    • A status bar indicator that shows which CSS version is being used
  43. "p" Code tab
    • Indicates paragraph
    • [ ] = < >
    • [p] and [/p] tags
  44. & n b s p ; (don't use space)
    If you space more than once, Expression Web will insert some extra (unnecessary) XHTML code
  45. & # 3 9 ; (don't use space)
    apostrophe character (') such as don't
  46. & q u o t ; (don't use space)
    quote character ("")
  47. To enter some page properties
    • To give Web page a title and add other identifying information
    • In Design view, right-click anywhere on the page
    • From the shortcut menu, click Page Properties
  48. Ctrl+S keys
    Save file
  49. Press F12 key
    View the file in the browser

    • You can also click the Preview in Browser button on the Common toolbar
    • You can also click File on the menu bar, point to Preview in Browser, and then select which browser you want to view the file
  50. Ctrl+P keys
    To print
  51. Element
    Any structural part of an HTML document
  52. Style sheet
    A collection of styles, either internal or external to the document
  53. View button
    A button that you click to change view in Expression Web
Card Set
CIS 3630 Test 1a.txt
Chapter 1