List of Figures

Chapter 1: Creating a Web Site with Expression Web

Figure 1-1: Expression Web as it appears the first time you launch the program.

Figure 1-2: Each separate Web site has its own workspace window with the path and title of the Web site.

Figure 1-3: This Web site has two pages open in the editing window: default. htm and about. htm.

Figure 1-4: Task panes can be combined into groups.

Figure 1-5: The New dialog box.

Figure 1-6: Drag files from your computer into the Expression Web Folder List task pane.

Chapter 2: Working with Web Pages

Figure 2-1: Add the Save All command to the Common toolbar.

Figure 2-2: Add new pages to your Web site quickly in the Folder List task pane.

Figure 2-3: The Preview in Browser menu.

Figure 2-4: Click to select the browser you want to add.

Chapter 3: Just the Text, Ma'am

Figure 3-1: Text formatting buttons.

Figure 3-2: Enter text in the editing window.

Figure 3-3: The Quick Tag Selector bar shows the tags for the element selected in Design view.

Figure 3-4: Choose the type of font as your last selection in a new font family.

Figure 3-5: Split view shows a font family applied to a sentence.

Figure 3-6: Choosing a font color.

Figure 3-7: The More Colors dialog box.

Figure 3-8: Paragraph styles.

Figure 3-9: The Borders and Shading dialog box.

Figure 3-10: A number-bullet combo list.

Chapter 4: Getting Around with Hyperlinks

Figure 4-1: The Insert Hyperlink dialog box.

Figure 4-2: The Formatting tab in the Page Properties dialog box.

Figure 4-3: The Hyperlinks report.

Figure 4-4: The Edit Hyperlink dialog box shows a broken hyperlink.

Figure 4-5: Viewing bookmark flag icons in Design view.

Figure 4-6: This navigation bar uses the vertical line character to separate hyperlinks.

Figure 4-7: The main navigation bar on this page uses an unordered list with styles applied for formatting and positioning.

Figure 4-8: An interactive button.

Figure 4-9: The Button tab in the Interactive Buttons dialog box.

Figure 4-10: The Font tab in the Interactive Buttons dialog box.

Figure 4-11: The Image tab in the Interactive Buttons dialog box.

Figure 4-12: The "buttons" show visitors where to click to activate a hyperlink.

Chapter 5: Graphically Speaking

Figure 5-1: The Import dialog box with pictures ready to be imported.

Figure 5-2: The Picture dialog box.

Figure 5-3: The Save Embedded Files dialog box.

Figure 5-4: The Configure Editors tab in the Application Options dialog box.

Figure 5-5: A regular and a transparent GIF.

Figure 5-6: Cropping a picture.

Figure 5-7: The Appearance tab in the Picture Properties dialog box.

Figure 5-8: The results of the Left and Right alignment options.

Figure 5-9: A Web page with a tiled background image.

Chapter 6: Forms for Any Purpose

Figure 6-1: A typical Web page form.

Figure 6-2: The Toolbox task pane, with Form selected.

Figure 6-3: A text box field.

Figure 6-4: A gang of check boxes.

Figure 6-5: A gathering of option buttons.

Figure 6-6: A drop-down box.

Figure 6-7: The Drop-Down Box Properties dialog box.

Figure 6-8: The Add Choice dialog box.

Figure 6-9: Options for e-mail subject line and confirmation page.

Figure 6-10: E-mail results from a form.

Chapter 7: Using Styles to Gussy Up Your Content

Figure 7-1: The CSS Zen Garden HTML content page with no style sheet attached.

Figure 7-2: The same HTML content page styled with CSS.

Figure 7-3: The same HTML content page styled with the Mozart style sheet.

Figure 7-4: A paragraph with an internal style rule applied.

Figure 7-5: Quick Tag Selector bar.

Figure 7-6: A paragraph with a style rule from an external style sheet applied to it.

Figure 7-7: The sample paragraph with an inline style rule applied.

Figure 7-8: The Apply Styles task pane.

Figure 7-9: The Manage Styles task pane.

Figure 7-10: The CSS Properties task pane.

Figure 7-11: Set individual properties for border width in the CSS Properties task pane.

Figure 7-12: The Style toolbar.

Figure 7-13: The Style Application toolbar.

Figure 7-14: The Rename Class dialog box.

Figure 7-15: The Quick Tag Selector bar shows you exactly which element is selected.

Figure 7-16: The New Style dialog box.

Figure 7-17: Categories with defined properties appear in bold.

Figure 7-18: The Modify Style dialog box.

Chapter 8: Putting Page Elements in Their Place

Figure 8-1: The CSS box model.

Figure 8-2: A non-formatted Web page with four main parts.

Figure 8-3: The Quick Tag Selector bar menu.

Figure 8-4: A selected <div> element in Design view.

Figure 8-5: Starting position for the <div> tag.

Figure 8-6: A <div> element without content, in Design and Code views.

Figure 8-7: The id value in the Quick Tag Editor.

Figure 8-8: The Tag Properties task pane.

Figure 8-9: In Design view, select an item to see its box.

Figure 8-10: Vertically stacked boxes make margins collapse.

Figure 8-11: Set padding and margin properties in the Box category.

Figure 8-12: Drag a side to change margin and padding width.

Figure 8-13: Each <div> element follows the natural document flow.

Figure 8-14: Set a proportional width for the container in the Position category.

Figure 8-15: Our sample page container, as it appears in a browser.

Figure 8-16: Our page with some content areas styled.

Figure 8-17: A two-column layout with floated navigation and content <div> elements.

Chapter 9: External Style Sheets and CSS Code

Figure 9-1: New, blank style sheet file.

Figure 9-2: The Attach Style Sheet dialog box.

Figure 9-3: Overriding a style property.

Figure 9-4: The Link Style Sheet dialog box.

Figure 9-5: The CSS area on the Code Formatting tab.

Figure 9-6: The CSS tab in the Page Editor Options dialog box.

Figure 9-7: IntelliSense for CSS style rules.

Figure 9-8: Comments in a CSS style sheet.

Figure 9-9: The Errors tab.

Figure 9-10: The CSS Errors report.

Figure 9-11: The CSS Usage report.

Figure 9-12: The Style Sheet Links report.

Figure 9-13: The Organization 4 Expression Web template home page.

Figure 9-14: The Manage Styles task pane.

Figure 9-15: Page and masthead background images.

Figure 9-16: The picture with 5 pixels for padding and a border around it.

Chapter 10: Tables for Data (And Layout, If You Must)

Figure 10-1: Data table in Design view.

Figure 10-2: Using the Insert Table button.

Figure 10-3: The Table Properties dialog box.

Figure 10-4: The difference that cell padding makes.

Figure 10-5: The difference that cell spacing makes.

Figure 10-6: A borderless table in a browser.

Figure 10-7: The Cell Properties dialog box.

Figure 10-8: The Tables toolbar.

Figure 10-9: This page uses a layout table to give it structure.

Figure 10-10: The Layout Tables task pane.

Chapter 11: Streamlining Sites with Dynamic Web Templates

Figure 11-1: The beginning of a typical Dynamic Web Template.

Figure 11-2: The Editable Regions dialog box.

Figure 11-3: Adding an editable region to a Dynamic Web Template.

Figure 11-4: A typical content page.

Figure 11-5: The Match Editable Regions dialog box.

Figure 11-6: How the content page looks with the Dynamic Web Template attached.

Chapter 12: Making Your Worldwide Debut

Figure 12-1: Suggestions and changes based on accessibility guidelines.

Figure 12-2: Identifying problems in your pages' HTML and CSS code.

Figure 12-3: Remote Web Site view.

Chapter 13: Web Site Management

Figure 13-1: The contents of the Web Site tab.

Figure 13-2: Site Summary report in Reports view.

Figure 13-3: Hyperlinks view.

Figure 13-4: A parent Web site with a single subsite, named plants.

Figure 13-5: Backing up a Web site.

Figure 13-6: The Export Web Package dialog box.

Chapter 14: Getting Cozy with Code

Figure 14-1: Nesting HTML tags in Design view and Code view.

Figure 14-2: Code view for a new, blank page.

Figure 14-3: Structure your page's content so that it makes logical sense.

Figure 14-4: Code view of the page shown in Figure 14-3.

Figure 14-5: Code view shows only the code for the page.

Figure 14-6: The Quick Tag Selector bar.

Figure 14-7: The Quick Tag Editor.