-
XHTML / HTML
- Extensible Hypertext Markup Language
- A language used to build Web pages
-
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
-
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
-
Markup language
- Strictly a means to render (prepare the display of) Web page content
- A computer language that renders Web page content
-
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
-
Render
To display a page for the Web
-
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]
-
Start tag
A marker that indicates the start of a formatting instruction
-
End tag
A marker preceded by a forward slash that indicates the end of a formatting instruction
-
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
-
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.
-
What is the Workspace composed of?
- Menu bar
- Common toolbar
- Editing window
- Task panes
- Status bar
-
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
-
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
-
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
-
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
-
Code view
Displays only XHTML & CSS code for the Web page
-
Split view
Compromise: it splits the screen horizontally, with a window for the code on top and a window for design on the bottom
-
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
-
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
-
Body tag
- A container for all of the XHTML code on the page
- The tag that controls the formatting for the page itself
-
World Wide Web Consortium (W3C)
- Organization that controls the XHTML and CSS standards
- Makes recommendations regarding computer languages used for the Web
-
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.
-
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
-
Vertical ruler
The ruler that displays the height of the screen in pixels
-
Horizontal ruler
The ruler that displays the width of the screen in pixels
-
Task panes
- Windows that are used to group related tasks together
- Can be opened, closed, moved, and resized
-
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
-
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
-
CSS Properties task pane
A task pane in Expression Web that lists CSS properties and values
-
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
-
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
-
Manage Styles task pane
- Use to organize and move CSS styles
- A task pane that lists styles without showing their appearance
-
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
-
Style
A rule or collection of rules
-
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
-
Style Application
- Set to auto, Expression Web automatically creates styles for you
- A toolbar often used to apply styles to a completed document
-
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)
-
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
-
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
-
Schema indicator
- XHTML 1.0 Transitional, current code standard
- A status bar indicator that displays which version of XHTML is being used
-
CSS indicator
- CSS version 2.1, current code standard
- A status bar indicator that shows which CSS version is being used
-
"p" Code tab
- Indicates paragraph
- [ ] = < >
- [p] and [/p] tags
-
& n b s p ; (don't use space)
If you space more than once, Expression Web will insert some extra (unnecessary) XHTML code
-
& # 3 9 ; (don't use space)
apostrophe character (') such as don't
-
& q u o t ; (don't use space)
quote character ("")
-
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
-
-
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
-
-
Element
Any structural part of an HTML document
-
Style sheet
A collection of styles, either internal or external to the document
-
View button
A button that you click to change view in Expression Web
|
|