EW 4: Page Editor Options

When Microsoft set up the defaults in Page Editor Options for the most part they did a good job particularly when you consider that creating sites that comply with web standards was their primary goal. However, even with that in mind there are several setting which I would have chosen different. Web browsers and servers don’t always implement recommended standards the same way. This is because what we call standards are really just recommendations and not always detailed ones at that. For example the CSS specification recognizes four ways of defining a style. The first is to define the HTML element. The second is to use an ID which can be used only once per web page. The third is a class that can be used as many times as you like and finally an inline style.

Using external stylesheets is the easiest way to maintain a consistent look and feel on your website. Using inline styles makes a site as difficult to maintain as the outdated method of using HTML attributes. Yet Microsoft chose to make the default for certain CSS properties and the HTML body element inline styles. This is an example of why I change some of the default settings Microsoft chose to use.

Getting Started

tools-page-editorWith Expression Web open use your mouse to expand the Tools Menu. Then select Page Editor Options which will open.

General Tab

On the General tab, defaults that I change are under Code View Options. I like Word wrap but that’s an individual choice.

 

general

I also recommend leaving the “allow unsigned Active X controls to be run and prompt for permission to run them. While this will allow Internet Explorer to run JavaScript on the page it will also allow script access to your file system. There is a better way of allowing JavaScript to run when you are using preview in browser that does not compromise your system. That is to change the Preview in Browser settings to use the testing server for all pages. How to do that will be in another video.

AutoThumbnail Tab

Since I recommend that you use a real graphics editor for creating your thumbnails I the defaults here are fine. If you intend to use auto thumbnails then you would change the height and width to the size you consider appropriate. See my tutorial on Configuring External Editors in Expression Web for how to set Expression Web to use something other than Microsoft Paint such as Expression Design, Paint.NET or Adobe Fireworks for your web graphics editor.

default-foontDefault Fonts Tab

The Language section controls the character set used by Expression Web and should be left at the default UTF-8 unless you are using a non-western character set such as Chinese.

Contrary to what many might think this has nothing to do with how your web page will display. That is controlled by the CSS you use on your site. This only controls the text as displayed inside the Expression Web interface.

For many people the default 9pt code view text is smaller than they are comfortable with. Since I use a high resolution screen I’m changing mine to 11pt using the Code View Size dropdown. If you have a preferred font you may also change the font family.

code-formattingCode Formatting

For most people the defaults are fine but if you have a particular format style you prefer you can adjust line wrap, tabs and other code view display.

I strongly recommend that you leave all tag and attribute names set to lowercase. XHTML is case sensitive so you want to be consistent.

Whether you want your attributes to be in alphabetical order or in the order created is up to you whether to leave the alphabetized checked or not.

Personally, I like my code to wrap in code view which sometimes means that a single HTML element or script code needs to display on more than one line. By using the “allow line breaks within tags” this happens but if you use a scripting language that is picky about formatting leave this unchecked.

cssCSS Tab

Here is where I recommend making changes from the default. I am only going to discuss the changes that I recommend making. The real benefit of using external stylesheets is to maintain a consistent look and feel. The Expression Web default of putting <body> properties in the page works against the goal of making a site easy to maintain by having all of the presentation layer in an external stylesheet. By the same token putting size, positioning and whether or not an element floats inline is also contrary to the goal of making a site easy to maintain.

For that reason I recommend setting all of the CSS properties to classes.

I know I said I was only going to discuss the changes I recommend but I wanted to explain Microsoft made a change from earlier versions and has “Use width and height attributes for images instead of CSS” and has that box checked by default. In the first version or two of Expression Web Microsoft would put the height and width into the CSS for each image. With the default setting of Size, position and floating set to “inline” that was somewhat okay but once you change those properties to be in a class you can quickly end up with an extremely bloated stylesheet with a class on every image.

However, that’s not the primary reason you want height and width in the HTML. Every image will have a specific height and width so that information should “travel” with the image not clutter up CSS. Plus if your visitor is on a slow internet connection having the height and width in the image HTML means that the browser can reserve the space needed for the image as it downloads while continuing to layout the page with faster loading content. If you have ever visited a web page that suddenly rearranged itself when all the images finished downloading it is because the image height and width were not specified in the HTML.

Color Coding

This is where you can customize colors used for various Expression Web items such as html elements, attributes in Code view or outlines in Design View depending on which radio button you selected. In theory this will give you granular control over design and code view display. The defaults don’t bother me enough to change it.

authoringAuthoring Tab

This is another tab where I recommend making a few changes. First is that I recommend removing the checkmark to use byte order marks for everything. By default only PHP is unchecked because the standards bodies recommend using a BOM whenever you use UTF-8 as your character encoding. However, PHP has an issue where it will cause three characters to appear at the top left of your page when you use a BOM on a PHP page. Some older versions of Firefox would also display the characters even in HTML pages. Because of the potential issues it is better not use a BOM on your web pages there is absolutely no benefit in the real world to using a BOM on any of the page types listed.

Unless you plan on creating cutting edge websites with HTML 5 and CSS 3, neither of which has reached the final publication stage as a standard leave the Doctype, Secondary Schema and CSS Schema alone. If there was an option for a later version than Internet Explorer 8 I would have changed it. Since I am creating the occasional HTML 5 website I am switching my secondary schema to HTML 5.

Pictures Tab

Use a real graphics program for converting images from one format to another. You will get much better results so you can ignore this tab.

Ruler and Grid

This isn’t a feature that I use but it allows you to configure the spacing of grid you can overlay in design view to help you line up images and other content. The default is 50px squares.

Intellisense

I am a big fan of using Intellisense or as it is sometimes called code completion. Intellisense operates in code view and everything is checked by default. If you prefer to type quotes and closing elements yourself uncheck those boxes but I recommend that unless you are interested in typing every element, attribute and property yourself you leave them checked. After all that is one of the reasons you are using a web editor not a text editor for your web site.

Font Families

This is the last tab in the Page Editor Options dialog  because it is so important that you use font family groups I’m going to address this tab in its own tutorial



Outstanding Hosting