Expression Web

Review and First Look

Quirks

Learning to use Expression Web will be simple compared to understanding and learning to implement CSS and XHTML, especially if you develop for more than one browser.

And even if you only develop one site, having a basic understanding of CSS and XHTML will make your life a little easier. To start learning try the first link on the links page. If you are experienced you might want to check out the last link just before the Expression Web links on the links page.

For all users here are a few quirks in the program that I saw. All I can say is I only spent an evening going through the program so there are lots of areas that I did not even touch. But this will help out.

Layers

I'm not sure why Microsoft added a Layers Task Pane. Layers are bound to confuse some people. In essence a layer is an absolute positioned CSS div tag so it would seem better not to confuse people and bring them in line with the other CSS rules.

Pictures

Why does Microsoft prefer to use the word pictures for images in this program?

Change Case

A rather simple item that is not included. How could they overlook this? 

Extra Coding

I hit the caps key while typing and then went back to change the case of the text only to not find that command. So I highlight, copy and paste the text into MS Word 2003 and then back. Well it brought along all of the extra coding, I don't want this in the page. Again who were they making this program for?

extra coding in code view screen shot

Paragraph Tags

I cut a sentence and moved it to a new paragraph and noticed it did not have the same style as the rest of the text. Looking in the code view I noticed it did not have the paragraph tags. So I highlighted the sentence and clicked on the Paragraph in the Style drop down menu of the Common Tool Bar, resulting in...nothing.

So I moved the cursor directly after the preceding sentence, hit delete a few times to delete the white space and the hit the Enter key, resulting in....nothing.

Easy solution, move to the code view and inset the paragraph tags!.

This is just one example of why you need to know HTML and how to enter tags in the page.

Automatic or Manual Styles

Using the Styles Application Tool Bar you can place EW into automatic or manual CSS editing. The what tool bar? I did not know either, so I had to refer to the help files. You can find out a little about it on the Tool Bars page.

Now then automatic or manual CSS editing? Well here is what the help file had to say - " if you select a paragraph of plain text in your web page and apply color to the text by using the Font Color button in the Common toolbar, Expression Web creates a new style and applies it to the text to format its color. If you then format another property of that same paragraph of text, such as the paragraph's font-family, Expression Web adds a new property declaration to the generated style it just created.

In Manual mode, you have additional control provided by the Style Application toolbar. You can have the new property declaration added to a different style instead, including a new style, a different generated style, or a style that you created."

Interestingly enough when you select manual mode you can not select text and click on the bold, italics or underline tool bar items and have EW insert the corresponding tags just for the selected text, it places the tags for the entire paragraph! Go figure.

Another gotcha in automatic mode is that EW will make new tags for you and place them in the head of the document. And they come with such wonderful names as .style 1, style 2 and so on. If you are in automatic mode be careful how you format your document.

So how do you set automatic or manual mode style application?

You can do any of the following:

In either Design view or Code view, on the status bar at the bottom of the program window, right-click Style Application, point to Mode, and then select Auto or Manual.

On the Style Application toolbar, click the Style Application drop-down box, and then select Auto or Manual.

To use the Page Editor Options dialog box - on the Tools menu, select Page Editor Options. On the CSS tab, select Auto Style Application or Manual Style Application.

Dynamic Web Templates

I used a web site template from EW that included several pre-made pages and used a dwt. Surprisingly enough when I opened the master dynamic web template the dialog to the left popped up.

So if you are want to use DWTs to the best benefit then you need allow the use of metadata files. and to do this you have to have .NET Framework 2.0 installed!

I had initially uninstalled the 2.0 Framework before loading EW Beta to see how it would work without the framework. This gave me quick clue that Microsoft .NET Framework 2.0 was needed. Note: Jim Cheshire of Jimco Software and Books tells me that Net Framework is only needed for .net development and is not related to the metadata. Makes sense to me.

I shut  down EW and installed the 2.0 Framework then went to enable the metadata. EW crashed - and it took me a while to get it to reopen only this web site. It had tried on several occasions to open the directory above this site as the web site. Maybe just a glitch, I did not going to try and see if I can get to repeat.

FTP

When publishing web pages to an FTP server you are asked every time for your user name and password. Another nuisance!

The FTP is slow and seems to have problems syncing with some servers such as the server this web site resides on. I've uploaded the web site several times and every time EW comes up with a list of files conflict thus not uploading the changed files. Back to using another FTP program.

It Could Be Easier to

Make Hyperlinks. Maybe in a property bar or maybe another tool bar.

Access the Page Title, seems to be only be available way from the Page Properties.

Remove a style, could be a little easier. Any place where you can select a class or ID should also have a none selection. That makes it pretty easy.

Hyperlinks

Since I  mentioned hyperlinks above, that brings up another quirk. When accessing the hyperlinks dialog to make a bookmark link you need to be able to see which web page you want for the book mark. In the dialog, and with pretty normal directory path it is hard to select the exact page you want. The image demonstrates this.hyperlinks dialog box

 

Design View

The design view is fairly good and accurate. I've yet to find a design view in any program that 100% accurately reflects what you'll see in browsers. EWs design view is as goo as any other.

But on one the items I noticed while placing an image into the main column of the Tools Bar page is that the  copyright line from the footer had crept up into the page. This quirk was also in the beta version and the image from that first look is the one above and to the right.

image of foote line item in the wrong location in desgin view

 

Positives

Updating many pages 

At one point I had to  update all of the pages with the master template. You can do this with selected pages all at once.

To do so, select all of the pages you want to update in the Folder List, click Format, Dynamic Web Template, Update Selected Pages. And walla, your pages are updated and any changes made in the master template will automatically update all child pages or you have just attached the dwt to all of the pages.

The Reports

I just can't say enough about the reports available from the Web Site Tab and then by clicking the Reports item on the bottom bar. They have always been a tremendous time saver for me.

An example is linking or changing many style sheet references in web pages. See this section on how do it.

The items below with the light yellow background were some of the quirks I noticed in the beta version of EW. I believe they have all been fixed.

Find and Replace

The find and replace function is great. This becomes a major helper when converting old web sites to new standards. And if you learn some basic Regular Expression you can increase 10 fold your abilities to strip or replace tags and content. One great tool.