Microsoft expression web 4 step by step

1 2 3 4 5 6 7 8 9 WC 5 4 3 2 1 0 Microsoft, Microsoft Press, the Microsoft Press brand, Access, ASP.NET, DirectX, DreamSpark, Deep Zoom, Excel, Expression Blend, Expression Design, Expre

Microsoft Expression Web 4 Step by Step

Chris Leeds

O’Reilly Media, Inc

1005 Gravenstein Highway North

Sebastopol, CA 95472

Copyright © 2010 by MediaCarbon, Inc

All rights reserved No part of the contents of this book may be reproduced or transmitted in any form or by any means without the written permission of the publisher

Unless otherwise noted, the example companies, organizations, products, domain names, email addresses, logos, people, places, and events depicted herein are fictitious No association with any real company, organization, product, domain name, e-mail address, logo, person, place, or event is intended or should be inferred

Microsoft Press titles may be purchased for educational, business, or sales promotional use Online editions are also available

for most titles (http://my.safaribooksonline.com) For more information, contact our corporate/institutional sales department: (800) 998-9938 or corporate@oreilly.com.

Complying with all applicable copyright laws is the responsibility of the user Without limiting the rights under copyright,

no part of this document may be reproduced, stored in or introduced into a retrieval system, or transmitted in any form or

by any means (electronic, mechanical, photocopying, recording, or otherwise), or for any purpose, without express written permission of O’Reilly Media, Inc

1 2 3 4 5 6 7 8 9 WC 5 4 3 2 1 0

Microsoft, Microsoft Press, the Microsoft Press brand, Access, ASP.NET, DirectX, DreamSpark, Deep Zoom, Excel, Expression Blend, Expression Design, Expression Encoder, Expression Studio, Expression Web, FrontPage, NET, Office, Silverlight, SQL Server, Visual Basic, Visual C++, Visual C#, Visual Studio, Visual Web Developer, Web Platform, WebsiteSpark, and Windows are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries

This book expresses the author’s views and opinions The information contained in this book is provided without any express, statutory, or implied warranties Neither the author, O’Reilly Media, Inc., Microsoft Corporation, nor their respective resellers,

or distributors will be held liable for any damages caused or alleged to be caused either directly or indirectly by this book

Acquisitions and Developmental Editor: Russell Jones

Production Editor: Teresa Elsey

Editorial Production: Online Training Solutions, Inc.

Technical Reviewers: Kathleen Anderson and Gerry Tiegrob

Illustrator: Robert Romano

Indexer: Ellen Troutman Zaig

Cover: Karen Montgomery

978-0-735-63902-7

Contents at a Glance

Introduction xi

1 Understanding How Expression Web 4 Works 1

2 Capitalizing on Expression Web 4 Functionality 47

3 Capitalizing on the Template Options in Expression Web 4 107

4 It’s All About Content 157

5 Understanding Validity and Accessibility 231

6 Creating a Web Site from Scratch 257

7 Adding Client-Side Functionality 323

8 Adding Functionality with jQuery and PHP 351

9 Adding Functionality with ASP NET and AJAX 381

10 Managing and Publishing Your Work 435

Table of Contents

Acknowledgments ix

Introduction xi

1 Understanding How Expression Web 4 Works 1

Understanding the Expression Web 4 Interface 2

Opening a Site 9

Using Site Views 14

Opening a Page 20

Using Page Views 22

Using the Snapshot Panel 29

Using Visual Aids 33

Using Browser Preview 36

Using SuperPreview 41

Key Points 46

2 Capitalizing on Expression Web 4 Functionality 47

Changing Site Settings 48

Changing Application Options 54

Changing Page Editor Options 61

Using the Expression Development Server 65

Using PHP with the Expression Development Server 71

Creating a New Site with Expression Web 80

Creating a New Site from an Expression Web Template 80

Creating an Empty Site and Importing Files and Folders 91

Using the Import Site Wizard 96

Configuring Add-ins 101

Key Points 105

3 Capitalizing on the Template Options in Expression Web 4 107

Understanding Template Concepts 108

Using Dynamic Web Templates 109

Using the Include Page Feature 128

Using ASP NET Master Pages 136

Using ASP NET Web User Controls 145

Using PHP Include Files 150

4 It’s All About Content 157

Using Tables Properly 158

Using Lists to Group Information 163

Using Semantic Markup 173

Styling the Presentation of Your Content 177

Adding Images to a Web Page 188

Editing Images with Expression Design 198

Using Photoshop Files in a Web Page 209

Using Silverlight Video in a Web Page 213

Using Deep Zoom Composer Projects in a Web Page 222

Key Points 229

5 Understanding Validity and Accessibility 231

Understanding and Changing a DOCTYPE 232

Verifying and Addressing W3C Validity 238

Verifying and Addressing Accessibility 244

Styling Text with Cascading Style Sheets 247

Key Points 256

6 Creating a Web Site from Scratch 257

Working with a Graphics Template 257

Creating an HTML Layout 272

Styling Major HTML Elements 284

Designing the Site Architecture and Navigation 297

Styling for Alternative Media 316

Key Points 322

7 Adding Client-Side Functionality 323

Understanding Server-Side vs Client-Side Scripting 323

Using Layers and Behaviors 324

Using Data View in an HTML Page 332

Creating and Using HTML Forms 343

Key Points 349

8 Adding Functionality with jQuery and PHP 351

Using jQuery in Expression Web 351

Using the Expression Web PHP Tools 362

Microsoft is interested in hearing your feedback so we can continually improve our books and

learning resources for you To participate in a brief online survey, please visit:

What do you think of this book? We want to hear from you!

9 Adding Functionality with ASP NET and AJAX 381

Using ASP NET Tools in Expression Web 382

The ASP NET Segment of the Toolbox 382

Converting a DWT to a Master Page 383

Using Site Navigation Controls 400

Using the AdRotator Control 411

Linking to Data Sources and Using Data Controls 415

Using ASP NET Ajax Features 430

Key Points 434

10 Managing and Publishing Your Work 435

Considering Hosting Requirements 436

Reseller Accounts 437

Finding and Registering a Domain Name 437

Using Microsoft Office Live Small Business 439

Understanding the Publishing Protocols Available in Expression Web 439

Considering Security Requirements 441

Publishing with FTP 441

Publishing Using HTTP (FrontPage Server Extensions) 449

File System Publishing 454

Managing a Web Site 459

Backing Up Server-Based Sites 459

Editing Server-Based Sites 465

Using Site Settings 472

Publishing Selectively 478

Using Subsites 485

Import and Export Web Packages 489

Use SEO Reports 493

Key Points 497

Index 499

About the Author 521

I want to thank the readers of my previous edition of this book, and the visitors to my port site (www expressionwebstepbystep com) I’d like to include a special thanks to Russell Jones (O’Reilly Media, project editor), Kathleen Anderson and Gerry Tiegrob (technical reviewers), and all the people at Microsoft Press and O’Reilly Media who really had more to

.sup-do with the physical manifestation of this book than I did Last but not least, I’d like to thank the people on the Expression Web product team for their commitment to deliver a truly technology-agnostic Web design tool that makes modern, standards-based Web authoring

so much easier than it used to be Thank you all!

—Chris Leeds

Microsoft Expression Web 4 is the newest Web editing and management application from Microsoft It is a professional design tool used to create modern, standards-based sites that deliver superior quality on the Web

From the perspective of a designer or developer, the modern Web bears only a slight resemblance to the Web of even as little as five years ago Expression Web 4 is an effort by Microsoft to provide a tool that helps designers attain modern Web design standards and practices

Expression Web 4 includes features that help ensure your output adheres to World Wide Web Consortium (W3C) validity standards, and that help you to cleanly separate content from presentation by taking advantage of the functionality and capabilities of cascading style sheets (CSS)

As you drill deeper into Expression Web 4, you will find tools to make working with Microsoft ASP NET much more comfortable than ever before, such as the ASP NET Development Server that installs with Expression Web and the ASP NET Controls group in the Toolbox panel

In addition, Expression Web helps you to easily use some of the features that ASP NET offers, specifically, ASP NET Master Pages, Navigation Controls, and Data Controls It’s refreshing that tools with this type of power are available in a user-friendly designer-centric application like Expression Web 4 as opposed to being limited to programmer-oriented tools such as Microsoft Visual Web Developer or Microsoft Visual Studio

System Requirements

To perform the exercises in this book, your computer should meet the following requirements:

n Windows XP with Service Pack 3, Windows Vista, Windows 7, or Windows Server 2008 operating system

n PC with 1 GHz or faster processor

n 1 GB of RAM or more

n 2 GB or more of available hard disk space

n Microsoft NET Framework 4

n Microsoft Silverlight 4

n A monitor capable of 1024×768 or higher resolution with 24-bit color

n Support for Microsoft DirectX 9 graphics with Windows Vista Display Driver Model (WDDM), 128 MB of graphics RAM or more, Pixel Shader 3 0 in hardware, 32 bits per pixel

n Internet access (additional fees may apply)

n Some product features require Firefox 3 0 or later and Internet Explorer 8

Actual requirements and product functionality may vary based on your system configuration and operating system

Information for Readers Running Windows XP or Vista

The graphics and the operating system-related instructions in this book reflect the

Windows 7 user interface, but you can also use a computer running Windows Vista or Windows XP with Service Pack 3 (SP3) installed

Most of the differences you will encounter when working through the exercises in this book

on a computer running Windows Vista or Windows XP relate to appearance rather than functionality For example, the Windows 7 and Windows Vista Start buttons are round rather than rectangular and are not labeled with the word Start; window frames and window-management buttons look different; and if your system supports Windows Aero, the window frames might be transparent

For the most part, differences in navigating to or through menus and dialog boxes in Windows Vista or Windows XP are small enough that you will have no difficulty in complet-ing the exercises

Who Is This Book For?

This book is intended for existing or new Web designers Although the book intends to provide lessons to new Web designers, experienced practitioners will be able to quickly gain familiarity with the Expression Web 4 user interface and features Former Microsoft FrontPage users should also find this book helpful in making a transition from FrontPage to Expression Web

Assumptions

This book expects that you have at least a minimal understanding of basic computer use and file operations with your chosen operating system No experience in Web design or develop-

n SuperPreview Online Service The Microsoft Expression Web SuperPreview online vice is a beta service that extends the capability of SuperPreview to include support for additional browsers and operating systems For example, you can preview your pages

.ser-in Apple Safari runn.ser-ing on an OSX system “.ser-in the cloud ”

n SEO Checker The SEO Checker feature of Expression Web analyzes your site against the best practices for getting the highest possible search engine rankings for your site You can choose SEO options, display an SEO report, filter the results in the SEO report, and step forward and back through the list of results in the SEO report to see more detail for individual list items

Acquiring Expression Web 4

You can purchase Expression Web 4 as part of Microsoft Expression Studio 4 Web

Professional, which is an integrated group of applications that includes:

n Expression Web 4 and SuperPreview Expression Web is a professional design tool used to create engaging, Web-connected multimedia experiences for Windows SuperPreview speeds browser compatibility testing by not only showing a high-fidelity rendering of how pages will look on different browsers, but it also identifies the ele-ment’s tag, size, and position; applied styles; and location in the Document Object Model (DOM) tree so you can quickly fix the error

n Expression Design 4 Microsoft Expression Design 4 is the perfect companion to Microsoft Expression Blend or Expression Web Use existing artwork or intuitive vec-tor drawing tools to quickly build sophisticated vector and image assets Seamlessly transfer them to your Expression Blend or Expression Web projects knowing that their fidelity and live effects will be maintained throughout the entire designer-developer workflow

n Expression Encoder 4 Microsoft Expression Encoder simplifies publishing video to Silverlight Encode a wide array of video file formats, stream live from Web cams and camcorders, and screen capture on your computer Make simple edits to video files and enhance your media with overlays and advertising Choose encoding settings, select from a range of player templates, and publish rich media experiences with Silverlight

You can also purchase Expression Web 4 as a component of Microsoft Expression Studio 4 Ultimate, which includes all that the professional version contains, plus these additional products:

n Expression Blend 4 Utilizing the industry-proven technologies in Silverlight, WPF, XAML, Microsoft Visual C# and Microsoft Visual Basic, Expression Blend enables you

to deliver applications that are stable, scalable, accessible, reliable, and highly secure, while maintaining optimum performance SketchFlow, a feature of Expression Studio Ultimate, revolutionizes how quickly and efficiently you can demonstrate your vision for

an application It provides an informal and quick way to explore, iterate, and prototype user interface scenarios, allowing you to evolve your concepts from a series of rough ideas into a living and breathing prototype that can be made as real as a particular cli-ent or project demands

n Expression Encoder 4 Professional The professional version of Expression Encoder contains more import and export codecs and unlimited screen recording duration, where-

as the basic version of Expression Encoder is limited to 10-minute screen recordings Additionally, you can purchase both versions of Expression Studio as an upgrade—and the upgrade isn’t limited to users of just Expression Web 3, but is available to owners of any previous Microsoft Expression product as well as any version of Adobe Creative Suite or Microsoft Visual Studio 2005 or later

Beyond that, you can get Expression Studio as part of the Microsoft Partner program, at

https://partner.microsoft.com/40043420, and through the Microsoft WebsiteSpark program at http://websitespark.com

Finally, if you’re a student, you can get Expression Studio 4 and a huge collection of other

Microsoft development software through Microsoft DreamSpark, at http://www.dreamspark

.com With DreamSpark, students can download Microsoft developer and design tools at no

charge, making it easier for them to learn the skills they need to excel both during school and after graduation

Code Samples

Most of the chapters in this book include exercises that let you interactively try out new material learned in the main text All sample projects are available for download from the book’s page on the Web site for the Microsoft publishing partner, O’Reilly Media:

http://oreilly.com/catalog/9780735639027

Click the Companion Content link on that page under the book cover image When a list of

files appears, locate and download the examples zip file

Installing the Code Samples

Unzip the examples zip file that you downloaded from the book’s Web site to a location on your hard drive In order for your screen to match the images in this book, we recommend that you unzip the folder to \User\Documents\Microsoft Press\Expression Web 4 SBS\

What’s in the Sample Code?

This book’s sample code contains the main site called “SampleSite” with a page for each chapter of this book, several Deep Zoom Composer projects, videos, an Expression Design graphics template, and all the other assets required to complete the chapter exercises you will encounter

Organization of This Book

n Chapter 1, Understanding How Expression Web 4 Works

o Identify and use the Expression Web 4 user interface elements

o Open a site

o Use Site Views

o Open a page

o Use page views

o Use the Snapshot Panel

o Use Visual Aids

o Use browser preview

o Use SuperPreview

n Chapter 2, Capitalizing on Expression Web 4 Functionality

o Change site settings

o Change Application Options

o Change Page Editor Options

o Use the Expression Development Server

o Use PHP with the Expression Development Server

o Create a new site with Expression Web

o Use the Import Site Wizard

o Configure add-ins

n Chapter 3, Capitalizing on the Template Options in Expression Web 4

o Understand template concepts

o Use Dynamic Web Templates

o Use the Include Page feature

o Use ASP NET master pages

o Use ASP NET Web user controls

o Use PHP include files

n Chapter 4, It’s All About Content

o Use tables properly

o Use lists to group information

o Use semantic markup

o Style the presentation of your content

o Add images to a Web page

o Edit images with Expression Design

o Use Photoshop files in a Web page

o Use Silverlight Video in a Web page

o Use Deep Zoom Composer projects in a Web page

n Chapter 5, Understanding Validity and Accessibility

o Understand and change a DOCTYPE

o Verify and address W3C validity

o Verify and address accessibility

o Address problems within HTML/XHTML code

o Style text with cascading style sheets

n Chapter 6, Creating a Web Site from Scratch

o Work with a graphics template

o Create an HTML layout

o Style major HTML elements

o Design the site architecture and navigation

o Style for alternative media

n Chapter 7, Adding Client-Side Functionality

o Understand server-side versus client-side scripting

o Use layers and behaviors

o Use Data View in an HTML page

o Create and use HTML forms

n Chapter 8, Adding Functionality with jQuery and PHP

o Use jQuery in Expression Web

o Use the Expression Web PHP tools

n Chapter 9, Adding Functionality with ASP NET and AJAX

o Use ASP NET tools in Expression Web

o Convert a DWT to a master page

o Use site navigation controls

o Use the AdRotator control

o Link to data sources and use data controls

o Use ASP NET Ajax features

n Chapter 10, Managing and Publishing Your Work

o Understand hosting requirements and publishing protocols

o Find and register a domain name

o Use Microsoft Office Live Small Business

o Understand the publishing protocols available in Expression Web

o Understand and evaluate security requirements

o Publish with FTP, HTTP, or File System

o Create a subsite

o Import and export Web packages

o Use SEO reports

This book has been designed to lead you step by step through all the tasks you are most likely to want to perform in Microsoft Expression Web 4 If you start at the beginning and work your way through all the exercises, you will gain enough proficiency to be able to create complex Web sites and pages However, each topic is self-contained If you have worked with another HTML or Web page editor, such as FrontPage, and simply need a quick guide to per-forming a task in Expression Web, or if after you complete all the exercises, you need a fast way to find the information to perform a procedure, the following features of this book will help you locate specific information:

n Detailed table of contents Scan this listing of the topics and sidebars within each chapter to quickly find the information you want

n Detailed index Look up specific tasks, features, and general concepts in the index, which has been carefully crafted with the reader in mind

n Companion content Install the practice files needed for the step-by-step exercises through this book’s Web site See the “Code Samples” section of this Introduction for instructions on getting and installing the practice files

In addition, this book presents information using conventions designed to make the tion readable and easy to follow

.informa-n Most chapters include step-by-step exercises that you can follow to get guided sure and practice to completing tasks

.expo-n Each exercise consists of a series of tasks, presented as numbered steps (1, 2, and so on) listing each action you must take to complete the exercise

n Boxed elements with labels such as “Note,” “Tip,” “Important,” and so on provide tional information, directions for starting or ending the step-by-step exercises, or alter-native methods for completing a step successfully

.addi-n Text that you are supposed to type (apart from code blocks) appears in bold

n A plus sign (+) between two key names means that you must press those keys at the same time For example, “Press Alt+Tab” means that you hold down the Alt key while pressing Tab

We’ve made every effort to ensure the accuracy of this book and its companion content If

you do find an error, please report it on our Microsoft Press site at oreilly.com:

1 Go to http://microsoftpress.oreilly.com

2 In the Search box, enter the book’s ISBN or title

3 Select your book from the search results

4 On your book’s catalog page, under the cover image, you’ll see a list of links

5 Click View/Submit Errata

You’ll find additional information and services for your book on its catalog page If you need

additional support, please email Microsoft Press Book Support at mspinput@microsoft.com

Please note that product support for Microsoft software is not offered through the addresses above

The author also maintains a support site for this book and Expression Web in general Visit

www.expressionwebstepbystep.com Visit the site for links to this book’s Facebook Fan Page,

Live com group, additional content, and contact information for the author As a long-term member of the Microsoft MVP Community, Chris has been personally helping users with Microsoft Web design and development software for more than 10 years

Chapter 1

Understanding How

Expression Web 4 Works

After completing this chapter, you will be able to:

n Identify and use the Expression Web 4 user interface elements

n Open a site

n Use Site Views

n Open a page

n Use page views

n Use the Snapshot Panel

n Use Visual Aids

n Use browser preview

n Use SuperPreview

Microsoft Expression Web is an incredibly versatile tool Almost anything you could imagine doing with a Web page or Web site is possible with Expression Web 4 Due to its broad ver-satility, there are hundreds of menu items, buttons, and other interface objects

The Expression Web software developers have grouped all these interface objects into three

basic types, which are menus, toolbars, and panels

Menus are logical groupings of commands; there are 12 menus on the menu bar and they are always present in the Expression Web 4 interface

Toolbars are composed of button elements There are 11 different toolbars available in the interface Some toolbars, such as the Common or Standard toolbars, are appropriate for almost any working scenario, whereas some are intended for very specific tasks such as the Dynamic Web Template or Master Page toolbars

Panels are interface objects for which neither a button nor a menu would be sufficient There are no less than 20 different panels available in Expression Web 4

In addition, you can apply several Views to either a page or a site Finally, there are also more than 100 keyboard shortcuts available!

To use an application with such broad use scenarios and such a vast collection of interface elements effectively, it is imperative that you learn not only what features are available but

where to find the tools to deploy those features from within Expression Web 4 After you derstand the logic behind how Expression Web groups these various interface objects, you’ll

.un-be able to find what you are looking for quickly In addition, your comfort level will improve with much less effort than if you tried to memorize the interface objects’ locations

This chapter focuses on how to adjust the Expression Web user interface (UI) to suit your personal preferences and to simplify how you perform specific tasks Expression Web 4 has

a default layout that appeals to a maximum number of users in the widest range of work scenarios This type of generalized layout means that it’ll most likely work for you no matter what type of task you’re performing However, when you customize the interface to your workflow processes, you’ll increase your efficiency, speed, and comfort

Important Before you can use the practice files in this chapter, you need to download and install them from the book’s companion content Web site to their default location For more in- formation about downloading and installing the practice files, see the “Code Samples” section at the beginning of this book

Troubleshooting Graphics and operating system-related instructions in this book reflect the Windows 7 user interface If your computer is running Windows XP or Windows Vista and you experience trouble following the instructions as written, please refer to the “Information for Readers Running Windows XP or Vista” section at the beginning of this book

Understanding the Expression Web 4 Interface

This section walks you through the Expression Web 4 default screen layouts so you can iarize yourself with the various parts of the user interface

.famil-Important Be sure to install Expression Web 4 before beginning this exercise

Take a clockwise tour of the Expression Web 4 default layout

1 Click the Start button, click All Programs, click Microsoft Expression, and then click

Microsoft Expression Web 4

A page named Untitled_1.htm opens when you start Expression Web 4 for the first

time You may also be prompted as to whether you want to make Expression Web 4 your default HTML editor

Troubleshooting By default, Expression Web will automatically display the last site you opened To close that site and open another site, select Close from the Site menu, choose Exit from the File menu, and then restart Expression Web 4

At this point, Expression Web 4 is open and a page is displayed without a site It’s ally a rare instance that you’ll use the interface in this way Think about it What’s a Web page without a “site,” or at the very least without folders containing images and other assets that the page uses? Such an arrangement would be considered a “one-page site ”

.actu-Tip This topic of an open page without a site or an open page that is part of a site is very important Not understanding the page/site concept will result in unnecessary confusion

Even without an open site, take the opportunity to explore the default workspace layout

In the center of the user interface is the editing window This is where you will do most

of your work The editing window can display a page, or it can display information about

a Web site, as you will see later in this chapter

The menus and toolbars let you perform tasks such as saving files and sites, ing reports, and changing how you view a page Panels let you perform common tasks, such as managing files in a site, adding tags to a page, and managing styles The editing window lets you visually edit pages or directly edit page markup The status bar shows you important information about sites and pages

.generat-3 2

4

2 1

Across the top of the workspace is the menus and toolbars area It’s probably the most important part of the interface for many reasons

The menu bar interacts with Expression Web 4, individual files in Expression Web, and Web sites as collections of files Having an idea of where to find things on this bar is helpful for building familiarity before frustration occurs Fortunately, commands are grouped logically

2 Click File The File menu opens You can see that all the available menu entries are

Notice that the Import menu option is unavailable Because you don’t have a site open, you can’t import anything into it The reason for this is due to the site/page concept There’s a huge difference between having an open page, as you do now, and an open site

3 Click Edit The Edit menu opens Similar to the logical arrangement of the File menu,

the Edit menu has entries for cutting, pasting, searching, and other operations related

to editing a file

4 Click View The View menu is full of options that affect the editing window and what

you see in the user interface You’ll find options for every aspect and feature available for viewing work in the editing window

5 Click Insert The Insert menu items are associated with elements such as HTML,

ASP NET, or PHP code as well as images and media that a designer may want to insert into a page

6 From the Insert menu, choose Media The Media menu expands From the Media

menu, you can insert Flash movies, Microsoft Silverlight applications, Silverlight videos, Deep Zoom Composer images, and also a Windows Media Player file

Note A right-pointing navigational arrow on a menu item in Expression Web indicates that multiple submenu items are associated with that menu entry

7 Continue exploring the menu items in each of the Format, Tools, Table, and Site menus

Notice that each menu contains items grouped logically as tasks associated with their parent menu label

8 Click Data View Because you don’t have a Web site open, all the Data View menu items

9 Click Panels The Panels menu opens

Because panels are so important in the UI, take a moment to look at the various panels available Expression Web 4 contains 20 separate panels

10 Complete your exploration of the menu bar by clicking and examining the Window and

Help menus

11 Below the menu bar, you will find the Common toolbar Point to each button on the

Common toolbar to reveal its tooltip Each toolbar will show you tooltips for its buttons and interface elements

Whereas the Common toolbar is the only toolbar visible by default in Expression Web

4, there are a total of 11 toolbars available in Expression Web

12 From the View menu, choose Toolbars You will see all the toolbars that you can use

Notice that Common has a check mark beside it That’s because it is currently active

beside it when you revisit the Toolbars menu A user can have as many toolbars open simultaneously as they like

13 On the upper-right side of the UI, you will find the Toolbox panel

The Toolbox panel contains HTML tags, Form Controls, Media Elements, and ASP NET Controls The designer can drag items from this panel onto the page

14 Click the thumbtack icon on the upper-right corner of the Toolbox panel to enable

AutoHide When you apply AutoHide to a panel, it minimizes off the screen, but when you hold your cursor over the panel’s tab it reappears

AutoHide is a great way to get more screen space for your work area, yet you don’t lose quick access to the panels you use most often

The Apply Styles panel now uses all the space to the right of the editing window that it previously shared with the Toolbox panel

Notice the tab to the right of the active tab

15 Click the Manage Styles tab The Manage Styles panel now becomes the active panel

in this workspace area The panels are grouped together because they both pertain to cascading style sheets

16 Drag the Manage Styles tab to the left of the Apply Styles tab In this way, you can

.or-der the panels within a group to suit your preference

17 Click the thumbtack icon on the upper-right corner of the panel to enable AutoHide

18 You will find the status bar across the bottom of the user interface Hold your cursor

over each item on the status bar to see its associated tooltip

The status bar contains context-sensitive messages on the left, such as line and umn numbers when the cursor is in Code view On the right side, it contains warnings and tools for Compatibility issues and HTML errors based on the DOCTYPE of the ac-tive page in the editing window as well as information about the page’s file size, Style Application Mode, Visual Aids, CSS Schema, and lastly, the size of the editing window The status bar is a useful tool and shouldn’t be overlooked Consider it as a quick visual overview of the technical aspects of the active document

.col-Above the status bar on the lower-left side of the UI, you will find the Tag Properties panel Through the tag properties panel, the designer can quickly change the attri-butes of any selected tag in the Design or Code view Like the Apply Styles and Manage Styles panels, this user interface area contains an additional panel as well—the CSS Properties panel, which works similarly to the Tag Properties panel, except it allows for quick modification of the CSS properties applied to the selected tag

Tip Notice that of the six default panels, three are CSS-oriented That’s not a coincidence Expression Web 4 leans toward modern Web design using cascading style sheets for text appearance as well as structural page layout

19 Click the thumbtack icon on the upper-right corner of the Tag Properties panel to

.en-able AutoHide

20 The final panel on the left side of the editing window is the Folder List Click and drag

the Folder List tab to the center of the editing window Any panel can be undocked and either floated over the workspace or docked to another area

21 Click the close icon on the right side of the floating Folder List panel The Folder List

panel closes

22 From the Panels menu, select Reset Workspace Layout The workspace returns to its

default state

23 From the File menu, select Exit Expression Web 4 closes

You’ve completed a brief overview of the default Expression Web 4 layout You will use most,

if not all, of the interface objects you viewed during this exercise throughout the remainder

of this book As you become more familiar with Expression Web 4, you will develop your own preferences for which elements of the user interface you prefer to use and how you like your workspace laid out Knowing the tools that are available to you and how you can customize the user interface is a necessary step in mastering Expression Web 4

Note Leave the SampleSite site open if you are proceeding directly to the next section

Opening a Site

An Expression Web 4 site consists of a logical grouping of folders that contain all the pages, images, and other files that make up the site In most cases, the site also contains metadata that Expression Web uses to recognize when files were changed, to update references to files you might have renamed or replaced, the locations to which the site has been published, and

an array of other data the program can use for behind-the-scenes management

Troubleshooting There is a significant difference between choosing Open from the File menu and selecting Open Site from the Site menu Open Site opens an entire Web site within Expression Web 4, thereby enabling automatic hyperlink updates, publishing capabilities, and so forth In con- trast, choosing Open on the File menu opens only a single page or file Any changes made to this file do not affect any other files In most cases, clicking Open Site will be the preferred action

Open and examine an entire site

Note For this exercise, use the sample site located at Documents\Microsoft Press\Expression Web 4 SBS

1 Click the Start button, click All Programs, click Microsoft Expression, and then click

Microsoft Expression Web 4

When you start Expression Web 4 without a site open, it creates a page named

Untitled_1.htm When you open a site, though, that page closes automatically

Expression Web 4 may also prompt you as to whether you want to make Expression Web 4 your default HTML editor

Troubleshooting If you previously had a site open with Expression Web 4, that site will open automatically by default when you launch Expression Web 4 If that’s the case, choose Close from the Site menu

2 From the Site menu, select Open Site In the Open Site dialog box, browse to Documents\

Microsoft Press\Expression Web 4 SBS, click SampleSite, and then click Open

3 From the Open Site dialog box, select the Add To Managed List check box, type

Expression Web 4 Step by Step Examples in the Name field, and then click Open

to open the site in Expression Web 4

Tip If the check box beside Add To Managed List in the Open Site dialog box is selected, the site you open will be added to Expression Web’s Managed Sites List and will appear in the Open Site dialog box You can also add and remove sites from the Managed Sites List

by selecting Manage Sites List from the Site menu

Notice that the workspace with an open site in Folders view looks very different pared to the Folders view in the previous exercise where you examined the user inter-face with only a page opened

.com-Troubleshooting It is possible for Expression Web 4 to automatically open the default page of a site during the Open Site process If this is the case, close the page by clicking the close icon on its tab at the top of the editing window

4 In the Folder List panel, click Images The entire content of the Images folder now

appears in the editing window

5 Click each of the folders in the Folder List panel to see the content in the editing

.win-dow, and then click the root folder (SampleSite) at the top of the Folder List panel to return the editing window to its default view of the Site’s root folder

6 Right-click Chapter1 html in the editing window to open the context menu The menu

items you’ll see are identical, whether you right-click a file in the Folder List panel or the editing window

Through the Folder List panel and the editing window, you can quickly view all the folders and files in a site in a hierarchical view You can also copy, paste, rename, and otherwise modify them through the context menu This is a useful way to work with the files and folders of a site as opposed to editing individual pages

Warning When you delete a file or folder in Expression Web 4, that file is not sent to your

computer’s Recycle Bin It’s deleted permanently You should also consider this warning in junction with the fact that if you select Open from the File menu, the default Expression Web 4 behavior opens the file along with the entire contents of its containing folder For example, if you wanted to edit an HTML file in My Documents, and you select Open from the File menu, browse

.con-to the file and open it, the entire contents of your My Documents folder would be visible in the Folder List panel and the editing window—and could then be permanently deleted

Note Leave the SampleSite site open if you are proceeding directly to the next section

Expression Web 4 provides four basic views of a site They’re designed to help you work with

a site in efficient ways These site views are helpful for designing a new site or understanding

an existing site that you have opened with Expression Web Folders view, the view used in the previous exercise, is the default view that Expression Web applies when the user opens a site

Use Site Views

Note Open the SampleSite if it isn’t already open

1 Open the Site menu, and select Site Settings Make sure the Maintain The Site Using

Hidden Metadata Files check box is selected

Expression Web uses these hidden metadata files to manage the site For many

of Expression Web’s site management features to work, this metadata setting must

be enabled You will learn more about the Site Settings and Expression Web’s site management features in Chapter 2, “Capitalizing on Expression Web 4 Functionality ”

2 Click OK on the Site Settings dialog box

Expression Web will open an alert that it needs to add hidden files and folders This

is necessary for the metadata to be added to your site Click OK on the Alert to allow Expression Web to add the required metadata

3 At the bottom of the editing window, you will see four views listed: Folders (which is the

default view), Publishing, Reports, and Hyperlinks Click Publishing

After you have set up one or more publishing destinations, as you will learn about in Chapter 10, “Managing and Publishing Your Work,” these destinations will be available

in the Publishing view of your local site

4 At the bottom of the editing window, click Reports

Reports view, by default, shows the Site Summary Each item in the list of reports is hyperlinked to its respective report

Troubleshooting The images in this section are intended to illustrate the general appearance of specific reports and views Your results will be different from those pictured here

5 In the Site Summary report, click the link for Unlinked Files A full list of all the unlinked

files in the site is shown

Although they’re in the Problems menu of the reports, unlinked files aren’t necessarily a problem In many cases, designers may keep files that they either used or will use in the future within the Web site folder structure

6 Click the Type column heading The unlinked files list groups the files by item type

By clicking the column headings, users can sort the file list by file name, folder name, file type, last modified date, or by the user who modified them

7 At the top of the editing window, click the Unlinked Files tab, point to Files, and then

click All Files to view the All Files report

Similar sort options are available in this report as well

8 At the top of the editing window, click the All Files tab, and then click Site Summary to

return to the original summary view of the site

The Reports view options cover a very broad scope of site information, and they can greatly ease Web site maintenance and management

9 At the bottom of the editing window, click the Hyperlinks tab, and then click the

default html file in the Folder List panel to select the sample site’s home page

Hyperlinks view provides a diagram of all files that link to or from a selected file and helps you verify and identify broken hyperlinks

10 Click the plus (+) sign on one of the pages linked to default html to expand it

When expanded, the diagram shows all the pages that link to the expanded page, which links to the default html file

11 Right-click the workspace and select Show Page Titles from the context menu The

.dia-gram now contains titles to each page, which is often more helpful than only seeing the page’s file name

The diagram represents broken hyperlinks and file references by an arrow with a ken shaft, and links that aren't broken by an arrow with a solid shaft