CIS 3630 -Test 3c

• A developed/predefined Web site that you can customize for your own purposes
• If you need to get a Web site up and running quickly, choose an Expression Web site template to create the entire Web site

• For many years, XHTML tables were used for page layout. Modern Web sites, however, are designed using CSS. Expression Web makes it easy to create the layout for a Web page or an entire Web site very quickly.
• Expression Web has 19 Web site templates from which to choose.

• An existing/predefined Web page layout that you can use (or modify) to create new Web pages from the same design
• If your site is already established and you want to add new pages using CSS layouts, then choose a page template to create the CSS layout for that page

An already-created/predefined CSS style sheet that is ready for you to attach to a Web page

• CSS box model establishes a Web page layout by creating rectangular or square regions (boxes) in which to place and position content
• You create a Web page layout by placing several boxes on the page and then determining the placement and alignment of each box
• The XHTML [div] element is used to create the boxes (divisions) on your Web page
• The [div] element has no formatting of its own; it merely serves as a container
• Although there is no standard for naming the different divisions of a Web page, designers frequently refer to the top portion of a Web page as the "banner," the "header," or the "masthead" (banner or logo goes here). The horizontal nagivation bar, if there is one, is usually called "navigation" or the "nav bar." The boxes that contain the page content are called "content," "main," or "sidebar" (main page content goes in div content and other links & additional content go in div sidebar). The bottom portion of the page is commonly called the "footer" (copyright and contact information go here). Expression Web refers to these page divisions as the "header," "navigation," "page_content," "content," and "footer." It is common to contain the entire Web page itself in a box. This box is usually called the "container" or "wrapper." The purpose of the container division is to set the page margins and allow the page to be positioned (usually centered) in the browser.

The box is further defined by its internal padding, border, and external margin

• Are used to create a consistent appearance to Web pages
• You created external style sheets, which are used to apply consistent formatting to one, many, or all the pages of a Web site
• Every page of a Web site has sections that need to remain unchanged, such as the logo or banner at the top of the page, a navigation bar, or a footer area at the bottom of the page

• Click File on the menu bar, point to New, and then click Web Site
• In the New dialog box, click Templates
• Click a style from the list box of template styles
• Click in the "Specify the location on the new Web site" text box
• Type the complete path of the new Web site's storage location (for example, f:\karter)

• XHTML-based master copy of a Web page that you can use to create settings, formatting, and page elements, and to specify which sections of the site's Web pages can be modified
• Used not only to provide a consistent format for recurring content areas and consistent layout for your Web pages, but to prevent the content of those areas from being changed
• The template has one or more editable regions - areas where the content can be changed
• All of the code for creating the page layout is contained in the DWT
• You can easily make global changes to all the pages of your Web site
• Two most important files in a Web site are the default.htm file and the master.dwt file
• The default.htm file is the home page for the Web site; it's often named index.htm
• The master.dwt file is the DWT file
• DWT comprises several style sheets

To detach a DWT, click Format on the menu bar, click DWT, and then click Detach from DWT

• Expression Web automatically created a new folder for you (it's a good idea to do this). If you create a Web site within another folder, make sure that the folder has no content. When you create a Web site in an existing forlder that has content, all content in the folder will be listed in the Folder List task pane (which be listed as being part of the Web site), which probably is not desirable.
• Always specify a folder name when creating the Web site. If you enter just the drive letter in the "Specify the location on the new Web site" text box, the contents of the entire drive will become the new Web site, which is not desirable. Use lowercase letters for the folder name, and limit the Web site folder name to one or two words. If you use more than one word, use underscores.
• When you created the Web site, Expression Web automatically named the site as well. By default, the site name is the same as the new folder's name. You can change the site name and can be several words to better describe the purpose of the Web site. The site name is part of the site settings.
• In Expression Web 2.0, you can set either .htm or .html as the default filename extension in the Page Editor Options dialog box. You go to Tools -> Page Editor Options -> Authoring (tab).

• Close all open files for the Web site
• Open the master.dwt file
• To make a change to the page layout (the margins, padding, and positioning), edit a style in the layout.css file
• To make a change to the element or ID selectors: (1) Open the Manage Styles task pane; (2) Right-click a style; (3) Click Modify Style from the shortcut menu; and (4) Edit the style in the Modify Style dialog box

All Web site files and Web pages should be closed whenever you edit the master.dwt file; otherwise, you changes may not be reflected in any pages that are open

• This character is the CSS @import rule which allows users to import style rules from other style sheets
• It should be the first instruction in the style sheet
• Additional formatting for the Web site is controlled by 3 other style sheets - style1.css, style2.css, and style3.css
• In a CSS style sheet, list the @import rule at the top of the list of styles

The layout (the margins, padding, and positioning) for this site is controlled by the layout.css style sheet

A Master page is a special type of ASP.NET page that allows you to share content and ASP.NET controls across pages. Both Master pages and Dynamic Web Templates create a consistent layout that can make it easy to update some or all of the pages at a Web site. Master pages, however, are used with .aspx files; Dynamic Web Templates are used with .htm or .html files. Master pages use content controls and special ASP placeholder elements, rather than editable regions. If you have a server that is running ASP.NET, you can take advantage of Master pages.

• Predefined page layouts that will create page divisions for you (using the [div][/div] tags)
• Once the divisions have been created, you can add content to each division
• Alternatively, you can create the page content, and then insert the divisions by selecting the content for the divisions, right-clicking the [div] tag button in the Toolbox task pane, and clicking Wrap from the shortcut menu

The [div] element is a block-level element

• Click File on the menu bar, point to New, and then click Page
• In the New dialog box, click CSS Layouts
• Click a template from one of the template layouts in the list box
• Click the OK button
• Enter content into each of the divisions
• Optionally, style an ID class selector for each division

• Has created 3 divisions on the page
• The names for the divisions are the ID selector names container, page_content, and right_col, respectively
• In Code view, you may not be able to see the underscores in the style names, but the Apply Styles task pane shows underscores in the style names for page_content and right_col

• The divisions are outlined in Design view
• The div#page_content division is on the left and the div#right_col division is on the right
• For this layout, it's important that content be entered only into the page_content or right_col division

Process of inserting a file into the Web site from an outside storage location

Use the Import Web Site Wizard to import an entire Web site or a folder

• Enter the content for the division
• Select the text for the division
• Click the [div] button in the Toolbox task pane; right-click and then click Wrap

You can place (nest) one division within another

• The upcoming HTML 5 introduces new elements for representing page divisions. The 6 new elements are [header], [nav], [article], [section], [aside], and [footer]. The body element will no longer be the sole container for the page content. A broad outline of the page markup would be similar to the following:
• [body]
• [header] banner content and logo would be here [/header]
• [nav] navigation bar content would go here [/nav]
• [article]
• content for the main article would be here
• [section]
• this would be a section within the article
• [/section]
• remainder of article content would be here
• [/article]
• [aside] sidebar content [/aside]
• [footer] contact and copyright information [/footer]
• [/body]
• Web page designers would benefit from these new elements because they would provide a standard means of marking up page divisions. The section at the top of the page would no longer be called the header, the banner, or the masthead, depending on the designer. All designers would refer to this section as the header section. All content for a section would fall between the start and end tags for that section. There would be no need for div tags and id or class selectors to format sections, which would make markup easier and make the code easier to understand. The new [aside] element would be used for information that typically is now contained in sidebar divs. The [article] and [section] elements would be useful to nest one or more articles within one or more sections.

• On the page that will become the DWT, delete all text that will be in the editable regions
• Click File on the menu bar, and then click Save As - (1) Click the Save as type list arrow; (2) Click DWT
• Click the Save button

• Right-click in the area of the Dynamic Web Template (DWT) page where you want an editable region; click Manage Editable Regions
• In the Editable Regions dialog box, enter a name for the editable region in the Region name text box
• Click the Add button
• Repeat the preceding 3 steps for each editable region
• Click the Close button in the Editable Regions dialog box

• You can have more than one editable region of a DWT
• You can also use the DWT toolbar to manage editable regions

• The Web pages you create in Expression Web on your local computer can be transferred to a server, where the pages can then be viewed on the Web
• This file transfer is called publishing a Web site
• In addition to transferring files, Expression Web keeps track of which files have been published, where they have been published, and the dates the files were published
• You don't have to publish an entire Web site; Expression Web lets you choose which files to publish

• 1. Microsoft Office FrontPage Server Extensions: These extensions require programs installed on the server that were used by FrontPage, which was the predecessor to Microsoft Expression Web. FrontPage Server Extensions provider greater security during the file transfer, but use this option only if you are converting a Web site designed in FrontPage to Expression Web.
• 2. WebDAV publishing: WebDAV (Web-based Distributed Authoring and Versioning) is a set of extensions to the HTTP protocol that allows users to collaboratively edit and manage files on remote Web servers. WebDAV included a Document check-in and check-out feature that was available in Expression Web 1.0, but it is not in Expression Web 2.0. To publish using WebDAV, you need to have the software installed on the server. You also need a username and password, and you need to know the URL where you will publish your files.
• 3. FTP publishing: FTP (File Transfer Protocol) is one of the most commonly used methods for file transfer. FTP software needs to be installed on the client and server computers. To use FTP, you need a username and password, and you need to know the URL of the server where you will publish your files.
• 4. File System publishing: File Ssytem publishing allows you to transfer some or all of your Web site files to a folder on your local computer or to a network server. File System publishing functions much like FTP file transfer, but it is used primarily to back up a Web site prior to publishing the Web site using another method, such as FTP. File System publishing doesn't require security setup or hosting.

• 1. Local to remote: files on your local computer are published to a remote computer
• 2. Remote to local: copies files from the remote (host) computer to your desktop or laptop computer; this option can be a lifesaver if files on your local computer have been lost, corrupted, or damaged
• 3. Synchronize: transfers only the most recent version on the Web site files on the local computer to the remote computer; the result should be a matching set of files, locally and remotely

An area in a template file in which you can edit the content

The process of transferring Web pages and related files from a local computer to a server, where the pages can then be viewed on the Web

• The Editing window is the largest window in Expression Web, and it appears in the center of the Workspace
• You use the Editing window to create, revise, and format the content for your Web pages
• The window has 3 views: (1) Design view lets you design a page without seeing any of the underlying XHMTL and CSS code, offers only an approximation of how the page will appear in the browser (browser version, monitor size, and screen resolution will affect how a Web page appears in the browser); (2) Code view displays only the XHMTL and CSS code for the Web page; and (3) Split view is a compromise, it splits the screen horizontally, with a window for the code on top and a window for design on the bottom
• You change views by clicking a View button; the 3 View buttons appear at the bottom of the Editing window
• To change views, you can also press the Ctrl+Page Up or Ctrl+Page Down keys

• The Expression Web status bar appears at the bottom of the Workspace; it's divided into several sections, each of which shows information about the current state of the window or the Web page:
• (1) Visual Aids are useful to display "white space" - margins and padding - that you ordinarily would not see on the design page (default choice is on), toggle on/off; you can also press the Ctrl and forward slash keys (/) to enable or disable Visual Aids
• (2) Style Application's default choice is Auto which automatically creates styles for you
• (3) Download statistics indicates the size of the page in bytes (characters), which at this point should be very small (usually about 317 bytes)
• (4) Rendering mode of "Standard" should appear to the right of the byte size, indicating that Expression Web is using standard XHTML/CSS code
• (5) Measurement for page size, such as 955 x 600, 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 that 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; if you choose a higher resolution, the text will wrap in Design view, but unless you have a wide-screen monitor or have closed several task panes, you will not see the entire line of text in the Editing window; you're not limited to the list of screen resolutions you see in the shortcut menu, but can create a custom screen size by clicking View on the menu bar, point to Page size, and then clicking Modify Page Sizes
• (6) & (7) The last 2 settings in the status bar (XHTML 1.0 T and CSS 2.1) are the schema indicator and the CSS indicator, which indicate that Expression Web is creating code based on the current code standards, XHTML 1.0 Transitional and CSS version 2.1

• The screen is now divided horizontally into 2 sections from Split view; the top section shows the XHTML and CSS code. All code that appears between the start [head] and the end [/head] tag does not appear in the browser. In the lower-right corner of the screen, the Styles pane indicates the creation of an inline style. Inline styles generally are the formatting changes that apply to just a particular section of one document. However, because this style for the background color has been used with the [body] tag, the style affects the entire page.
• Note that a [p] tag was entered as soon as the first character was typed. The [p][/p] tags create a blank line above and below a paragraph. Recall that a paragraph in XHTML need not be a complete paragraph composed of several sentences. With Visual Aids on, the blank lines above and below the text are indicated in Design view by a shaded area both above and below the paragraph.
• Alternatively, you can change the page background by clicking Format on the menu bar, and then clicking Background. You can also press the Alt+Enter keys.
• The Quick Tag Selector bar ("breadcrumb bar") keeps track of the most recent tags you have used. The Quick Tag Selector bar is fixed at the top of the Editing window. Now that you have entered some text on the page, you'll see a [p] tag to the right of the [body] tag.

• The hexadecimal system is based on the number 16. After the number 9, the letters A, B, C, D, E, and F are used to represent the numbers 10, 11, 12, 13, 14, and 15.
• The hexadecimal values for color are based upon the intensity of red, green, and blue.
• In hexadecimal representation, 00 is the lowest intensity, FF is the highest.
• The hexadecimal number is preceded by a flag character (#) that has special significance in XHTML or CSS code. The numbers that follow the # flag character will be treated as code, not as numbers.
• The flag character is followed by 3 (2-digit or 2-letter) groups of hexadecimal numbers representing the intensity of red, green, and blue. For example, the hexadecimal notation for the color navy is #000080, yellow is #FFFF00.
• Most Web developers simply refer to hexadecimal numbers as hex code.
• Repeating values can also be put into code using a shorthand notation called short hex; yellow is #FF0.
• Three ways you can describe Web colors in HTML or CSS code - (1) by a name; (2) by an RGB triplet; or (3) by a hexadecimal value.
• The color values in the list are often referred to as the Web Safe colors, because all monitors should be able to display them correctly.

• The simplest type of selector is the element selector, in which you redefine the appearance of an XHTML element, such as h1, p, em, and so forth. When you style an element selector, recall that because of heritance, you don't have to assign a style for a characteristic the element already has. For example, by default, h1 headings appear as black, bold, and in 24-point type. You don't have to specify properties and values for those characteristics; they are that way by default.
• Although Expression Web refers to headings as "styles," headings should not be considered as styles. These styles are really the styles that are inherent to XHTML or to a particular browser, not to CSS.

• Dependent classes style only one element. In this case, the class is styling the paragraph element and therefore is a dependent class.
• Independent classes style any XHTML element, no matter whether the information was in a paragraph, a table, or a heading. The syntax for an independent class is very similar to that of the dependent class, except this time you do not specify an XHTML element selector.
• Don't enter spaces either before or after period in either a dependent class name or an independent class name.

• Now that the image is inserted, you need to change some of the Picture Properties to have the image wrap left and to have some margin space for the image. You don't have to concern yourself with the image size because the image will be made into an Auto Thumbnail image.
• To make an Auto Thumbnail a normal image again, right-click the image, click Hyperlink Properties from the shortcut menu, and then click the Remove Link button.

• When you insert an image in a page, the image might sometimes interfere with an h2 or h3 heading. Recall that when you float an image, the text will wrap beside the image. Sometimes, the image and the heading compete for the same space, and instead of the heading beginning on its own line at the left edge of the screen, the heading appears beside the image. You will show Renee how to have a heading (or any other element) begin on a new line after an image. The CSS Clear property is used to position one element past another element.
• The Clear property takes several values, including left, which clears an element at the left margin; right, which clears an element at the right margin; and both, which clears an element either left or right.
• You can insert this value automatically in Expression Web. Click Insert on the menu bar, point to HTML, and then click Break.

• Images such as arrows and pointers are commonly used as navigational icons. A graphic image, such as an upward-pointing or left-pointing arrow, often appears at the bottom of a Web page to serve as a link back to the top of the page, the previous page, or the home page. If you use an image as a link, it's always a good idea to have some link text, jsut in case the user has set preferences in the browser to not display images.
• Earlier, you showed Trevor how to link the words "Back to Top" to a Bookmark at the top of the page. You will show Trevor how to insert an image of an upward-pointing arrow that also will link to the top of the image. Because the Bookmark was created earlier, the only task is to complete the link to the "top" Bookmark.
• Images that guide the reader from one place to another on Web sites are called navigational icons.

• By default, most browsers indicate links by underlining the link text and displaying the text in blue. After you click a link, it becomes a visited link, and the text and underline appear in purple. The CSS pseudo-class selectors allow you more variety in choosing the appearance of links and visited links. In addition, CSS can add "mouse over" (rollover) effects so that when the user passes the mouse pointer over a link, the link text can appear, for example, in a different color, background color, or font. The order of the pseudo-classes does matter. The a:hover pseudo-class selector must be placed after the a:link and a:visited rules; otherwise, specificity will hide the color property of the a:hover rule. The a:active pseudo-class selector must be placed after a:hover; otherwise, the active color will appear when the user clicks a link or hovers the pointer over the link. You do not have to use all of these pseudo-class selectors. ("Little Victor hates apples")
• The pseudo-class selectors can partially be styled as part of the page properties. However, the only option in the page properties is to change the link color.

Recall that you can use an image as a link. An image map is an image that is divided into sections, so that the same image serves as the location for several links. A hotspot is an area on the image that, when clicked, will display the target page or Web site.

• Creating a Hotspot:
• In Design view, drag the image that will be the source of the image map to the desired place in the Editing window. Insert alternate text for the image, and then click the OK button.
• Click View on the menu bar, point to Toolbars, and click Pictures to display the Pictures toolbar.
• Click the image.
• On the Pictures toolbar, click either the Rectangular Hotspot button, the Circular Hotspot button, or the Polygonal Hotspot button.
• On the image map - (1) To draw a rectangle, click in the upper-left corner and drag the pointer to create the hotspot; (2) To draw a circle, click in the center of the circle and drag the pointer down to expand the circle to create the hotspot; (3) To draw a polygon, click to create each vertex of the polygon shape. To complete the shape, click the first vertex you created or double-click the mouse.
• In the Insert Hyperlink dialog box, locate the file to which you want to link. Click the filename.
• Click the OK button.

The image used as the image map can be any image - it doesn't have to be an image of a map, although it commonly is. You create the image map by using the Pictures toolbar.

In Design view, a hotspot (a blue border with sizing handles) has been created to surround the Appliances and Furniture shape. If the hotpsot is not correct, click the Select button on the Pictures toolbar. Click anywhere inside the rectangle, and then press the Delete key. Click anywhere outside the hotspot but within the range. The sizing handles no longer appear. Click anywhere outside the image. The hotspot rectangle no longer appears around the Appliances and Furniture section.

The map is created using the XHTML [map] tag.