Inside Expression Web

If you are opening a web in Expression Web for the first time, you may be a bit overwhelmed by the vast number of task panes that sit on the left and right sides of the screen. Don't panic. You can easily turn these off and on as you need them. Click on Task Panes. Uncheck any task panes that you do not want open. Easy! For my own personal working habits, I keep only two task panes open and docked on the left side of my screen (Folder List and Apply Styles). This gives me plenty of working room.

1. Item 1 in the screenshot above is called the Common toolbar. There are some pitfalls located in this area, but we'll cover them in another lesson.
2. Item 2 is the Style toolbar. Since you will work with a lot of CSS, it is handy to dock this toolbar near the top of your screen.
3. Item 3 is the Folder List task pane. (You can locate various Task Panes by clicking on Task Panes at the top of the screen.) Since you can expand and collapse folders, it is handy to have open. I keep mine docked on the left side of the screen.
4. Item 4 is the Apply Styles task pane.
5. Item 5 is the Workspace. This is where you will see your actual web page when one is open.
6. If your web page uses a .dwt (dynamic web template), editable regions will look something like Item 6.
7. At the bottom of the screen, you will find the controls to switch from Design View to Code View or Split View.
8. Item 8 is the Status Bar. This one is very important and we will cover the Status Bar in more detail in another lesson.
9. Item 9 is where you can access the Expression Web help files. Just type the keywords to describe what you are looking for and you will get choices to investigate further. (Yes, it's a novel concept, but the Help Files are your friends!)

The Status Bar:

The Status Bar sits in the lower right portion of the program window. This little bar offers you a wealth of information.

If you have set your Page Editor Options, and if you see a small yellow triangle with an exclamation point inside, this is your visual clue that you have some coding error.

You can mouse over the warning icon and get a pop-up that will give you more details. It is very important that you fix any coding errors. The good news is that Expression Web will tell you what is wrong.

Double-click on the warning icon. Expression Web will change to Split View and the error will be highlighted. Mouse-over the highlighted code and a "hint" will appear that explains the problem. In this case, the closing forward-slash was omitted in one of the meta tags. Once you fix the issue, the error message will go away and you know your coding is now error free.

Also in the Status Bar, you can turn Visual Aids off or on. If you are new, I recommend you keep visual aids turned on. This puts "borders" around editable regions so they can be easily seen.

Quick Menu Links

Expression Web Basics:

Choose a Topic Downloading Your New Template Unzipping Your Template Files Opening Your New Web Template Tour - What's Inside FrontPage vs. Expression Web Tables vs. CSS Positioning

Expression Web Tutorials:

Choose a Topic Setting Up Expression Web Inside Expression Web Web Site Settings The Formatting Toolbar Editing Dynamic Web Templates Editing Include Pages Changing Page Title and File Names Adding and Deleting Pages Meta Tags Hyperlinks and Bookmarks Preview in Browser Before You Publish - A Checklist Publishing Your Web

Learning More:

Choose a Topic Let Expression Web Teach You Expression Web .Style1, .Style2, etc. Removing Unwanted Formatting How to Add or Modify Styles Keeping XHTML Error Free Information on Validation Ecommerce and Shopping Carts From Web-Bots to Better Navigation Search Engines Build a Better Web Site

Solving Problems:

Choose a Topic Receiving Form Results by Email Form Errors - Troubleshooting Cleaning Up Old Files and Folders Page Display and Image Issues SWF Object Detection Script Design View Quirks

ProStores Tutorials:

Choose a Topic Your ProStores Template Package Adding a New Store Version Installing New Template Files Store Logo File Uploading Your Design Images Activating Your New Store Version Editing the Header Image Editing/Tweaking Template Files Your ProStores Product Images Images and Security Warnings ProStores - Learning More

About CSS:

Choose a Topic Preface CSS Rules Background Rules Font Rules Text Controls The Box Model Margin, Border,  and Padding Lists About Hyperlinks Styling Forms with CSS About Divs The DocType Resources