Some times, while coding your web pages, you must have observed red squiggly lines in your code. This is how Expression Web points out invalid or incompatible HTML in your code. It is advisable that you check your code for compatibility and validity before you publish it.

Expression Web has different tools that offer to check the code at different levels. Two such options are available on the General tab of Page Editor Options.

Go to Tools > Page Editor Options… > General tab > Code View Options section.

a. Highlight invalid HTML: emphasizes invalid HTML in a specific color. The default color of the text is red with yellow background. But you can change this color scheme in the Color Coding tab of the Page Editor Options dialog box.

Hover over the highlighted code to view more information about the incompatible code.

b. Highlight incompatible HTML: displays a squiggly line under the code that does not match the HTML compatibility standards.

The basic formatting techniques like Line breaks, white spaces and indentation make your web content stand out and look clean and neat. The HTML <br> tag is used to add line breaks in your page. See below:

marks denote line breaks. To view line breaks or other Formatting marks in Expression Web, go to View menu > Formatting Marks > Show and then from the same menu choose ‘Line Breaks’.

Tip: Use the same menu to view other formatting marks. The screenshots in this article are taken in Expression Web 3.

To add line breaks; in Design view, place the cursor at the point where you want to insert a line break and do either of the following:

a. In the Toolbox, under the Tags heading, double click or drag the .

b. Insert > HTML > Break.

c. Hit Shift + Enter.

NOTE: Hitting Shift + Enter will add a line break whereas hitting only the enter key adds a paragraph break.

To format a line break, select the line break in the design view, go to the Format menu and choose Properties. The Break dialog box will be prompted as follows:

a. Normal line break: create a default line break.

b. Clear left margin: clears left margin and begins the next line at the nearest line below the content in the left margin.

c. Clear right margin: clears right margin and begins the next line at the nearest line below the content in the right margin.

d. Clear both margins: clears both the margins and begins the next line at the nearest line below the contents in both the margins.

You must have come across websites that play sound (some music) while you are visiting it. Some design sites, personal sites of stylists or e-cards and gift sites usually have such background sound, sometimes on the home page or to all the pages. Personally, I find it irritating. Though you can actually specify how many times the sound should be played after the page is loaded or should it be continuously played in a loop. But if you would like to add some music to your website, here is how you can do that.

To add a background sound

1. Open the website and then open the web page in Design View.
2. Right click the page and choose Page Properties.
3. In the ‘Page Properties’ dialog box (see image below), under the General tab, in the Background Sound section, browse to the location of the sound file and choose the file and click Open.



4. In the same window, to choose the duration of the sound, do either of the following:
   • Check the Forever checkbox, to play the sound continuously unless the window is closed.
   • Uncheck the above checkbox and enter/choose an integer to play the sound for a fixed number of times.

NOTES:

• The background sound would be added only on the page you are configuring on. To add it on other pages, follow the same steps on the other pages.
• The <bgsound /> tag is added when you add a sound to the page. This featureis not supported in Mozilla Firefox browsers.

To remove a background sound, in the General tab of the Page Properties window, delete the location under the Background sound.

TIP: As a good practice, provide the users with an option to turn off the sound.

We often use the Find and Replace tool (CTRL + F) to search for words, in our context, tags, elements, properties and so on in our page. But the same dialog box offers a cool feature of setting HTML rules in your search. These HTML rules let you add conditions as to where in your code to search. Let us take a look at how that can be done.

Follow these steps to set HTML rules for searching -

1. Do either of the following
   • To search within a single page, open the page.
   • To search the entire site, open the site.
   • To search more than one page in a website, open the site and in the Folder List panel or the Site View, select the pages. Else open all those pages you want to search.
2. Go to the Edit menu and choose Find… to find text, and Replace… to replace text. Both would launch the same Find and Replace dialog box, with different tabs selected by default.



3. Click on the ‘HTML Rules…’ button. The HTML Rules dialog box would be prompted.



4. Click on ‘New rule…’ In the drop down box (left bottom corner of the window, choose to set the rule ‘Inside tag’ or ‘Not inside tag’. In either case, select a tag, from the other drop down. The rule would be created.



5. To configure the rule, click on the ‘New rule…’ (appears as a child under the rule we created above, in the tree view). Choose the options in the bottom left corner for the rule. They are as follows:
   a.       With attribute: to search inside a tag with the given attribute. For example, inside tag <p>, search for only those tags that have attribute class = content_text.
   b.      Without attribute: to search inside a tag without the given attribute. For example, inside tag <p>, search for all other tags except for the ones with attribute class = content_text.
   c.       Containing: to search only if it is in another text or tag that you specify.
   d.      Not Containing: to search only if it is not another text or tag that you specify.
   e.      Inside Tag: to search only if it is in a tag that you specify.
   f.        Not Inside Tag: to search only if it is not in a tag that you specify. 
6. To delete a rule, choose ‘Delete rule’ and to delete all the rules, choose ‘Delete all’.

Here are some websites and blogs that offer very informative tutorials, articles, tips, tricks, trainings, ebooks and other resources for Microsoft Expression Web.

1. http://expression.microsoft.com/en-us/cc197140.aspx for tutorials, videos, free Expression Web templates.
2. http://any-expression.com - is owned by Tina Clarke, who is a fellow Expression Web MVP. The site features plenty of tutorials, tips, ebooks on Expression Web and FrontPage.
   Her blog http://www.expression-web.net/ also offers useful Expression Web resources.
3. http://by-expression.com features excellent Tutorials and Sample Sites by Expression Web MVP, Cheryl D. Wise. She also conducts trainings for EW.
4. http://www.expression-web-designer-help.com/ is a great site to seek help in MS Expression Web, run by Jim Davidson, MVP Expression Web.
5. http://www.expression-web-tutorials.com/ and http://www.expression-web-tips.com/
   Owned by Expression Web MVP, Patricia Ann Geary, these sites include EW tutorials, templates, tips and news on EW as well as FrontPage tutorials.

There are two ways to do this with CSS;

1. By assigning a line height to all the paragraphs:

In the Apply Styles or Manage Styles panel (task pane in earlier versions of Expression Web) click on ‘New Style’. In the selector box, type in ‘p’ and in the Block category, enter a value for line-height, say 20px.

  

Now all the paragraphs will have a same line height of 20px. 

2. If you do not want a same line-height for all the paragraphs, define a class selector and assign a line-height value. The class selector could be generic (.line_ht) or specific to paragraph element (p.line_ht). (Both these concepts are explained later in the article.) To define these styles follow the same steps given above in pt. 1. Then apply the styles to the paragraphs. 

Difference between Generic Class Selectors and Specific Class Selectors

A generic class selector could be assigned to any element like <div class=” line_ht”></div>. Unlike this kind of class selector, the specific class selector will be applied only to those paragraph elements that have a class attribute containing the word ‘line_ht’, and no other elements. 

Take a look at these examples to make things more clear;

/*Element Selector */

p { line-height : 20px;}

<p>This paragraph will have a line-height of 20px</p>

<div> This paragraph will have the default line-height </div>

/* Generic Class Selector */

.line_ht { line-height : 20px;}

<p class=” line_ht”>This paragraph will have a line-height of 20px</p>

<span class=” line_ht”>This paragraph will also have a line-height of 20px</span>

<div class=” line_ht”>This paragraph too will have a line-height of 20px</div>

/*Specific Class Selector */

p.line_ht { line-height : 20px;}

<p class=” line_ht”>This paragraph will have a line-height of 20px</p>

<p> This paragraph will have the default line-height <p/> 

As you create a new page and start adding content to it, or when you open an existing page, the way it appears in Code view or Design view is laid down by Expression Web. For instance, in Code view normal text appears in black, HTML comment appears in gray, in Design View Layout table border is green in color and so on .This is so that you can differentiate between the different elements and content on your page. But you can always customize them according to your liking.  

To customize colors and font in Code and Design View

1. Go to Tools menu > Page Editor Options.
2. In the Page Editor Options dialog box, switch to Color Coding tab.
3. The default selection is Code View unless you changed it. Choose the view you want to customize.
4. Choose an item from under the Display items box and select Item Foreground, Item Background and Font style.

 

5. Click OK.

Microsoft Expression Web has some pre-defined set of style sheets which you can directly use in your document. There are in all 13 style sheets that are written for different purposes like Bars, Blocks, Capsules, Expedition, Highway, Poetic, Sweets and such others. Each of these style sheets has a unique style, with headings, background, font styles, etc.

How to add a style sheet to your page?

1. Go to File menu > New > Page.

 

2. The ‘New Page’ window would then be prompted.

 

In the leftmost column of the window, choose Style Sheets. The center column would then list down all the available predefined style sheets. As you select a style sheet from the list, the top portion in the right most column, gives a brief description of that style.

3. You can choose one that may suit your page requirements and click OK.
4. A style sheet will now be opened in your main workspace with a name ‘Untitiled_1.css’.
5. Now you need to save this css file in the same location of your document. Give an appropriate name to it.
6. Link this file in your page by following these instructions:
   • In Apply Styles or Manage Styles panel (task panes in versions earlier than 3) click on ‘Attach Style Sheet…’.

    

   • In the Attach Style Sheet window browse to the location of css file. You can choose attach it as a link or import it into your current page, selected page or all HTML pages. In this case choose ‘Current Page’ and as ‘Link’.

    

   • Click OK. The css file will now be attached to your page.
7. Now see your page being styled as per the styles defined in the attached style sheet.

We learnt what ‘Element Selectors’ are and how to group declarations and selectors, in our tutorial Element Selectors in CSS. But as you advance in HTML and CSS, you will need more specialized rules to style an element.  Apart from document elements (element selectors) there are two other types of selectors you can define on your own. They are Class selectors and ID selectors.

What are class selectors?

A class selector is set of styles that you can apply to one or more elements. See these examples:

<p class=”desc_text” >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor </p>

<h3> Lorem ipsum dolor <span class=”desc_text”> sit amet, consectetur adipisicing elit, sed </span> do eiusmod tempor </h3>

A class ‘desc_text’ when applied to the paragraph element stylizes the entire paragraph whereas when applied to the span element stylizes only the spanned text.

Though we will learn more about the ID selector later, the main difference between the two is that class selectors can be used for multiple selectors and ID selector can style a single element in the entire document.

Defining class selector in CSS

In CSS the class selector is preceded by a period ‘.’ followed by the class name and style definition. See below:

.desc_text {font-size: 10px; color: #cccccc; }

This kind of class selector could be applied to any element that matches the class attribute value ‘desc_text’.

You can also use the universal selector ‘*’ to define the class that matches any element in the document.

*.desc_text {font-size: 10px; color: #cccccc;}

But this one;

p.desc_text {font-size: 10px; color: #cccccc; }

will match any paragraph elements that have the class attribute containing the word ‘desc_text’. In the above example the span element would not match this class and hence the styles would not be applied. So this kind of rule applies only to a specific type of element.

Combination of general class selector and element-specific class selector

.desc_text { font-size: 10px; }

span.desc_text { color: #cccccc ;}

First declaration is an example of general class selector and the second one is of element specific class selector. You can declare both and use them together. The output of the above example would be as shown below:

A drop down box can be created as a form object. But when you want it to be independent, without a form, you could do it with a ‘Jump Menu’. Here is how to create a jump menu, follow these steps:

1. Go to the Behaviors task pane, which should be visible besides the Apply and Manage Styles task pane. If it is not visible, go to Task Panes menu and choose Behaviors.
2. Place you cursor at the location where you want to add the drop down menu.
3. In the Behaviors task pane, click the ‘Insert’ button and choose ‘Jump Menu’.

 

4. This will launch the Jump Menu dialog box.

 

5. Click on Add button and the Add Choice dialog box will be prompted.

 

Add the choice and their value. You can also browse to the URL. When done, , click on OK.

6. Similarly add all the choices and click OK in the Jump Menu dialog box.

  

The choices will be displayed the way they are added. But you can always use the Move Up and Move Down buttons to rearrange the items.

7. ‘Open URLs in:’ lets you choose if you would like to open the URL in the same window or a new window. ‘Select first item after URL change’ checkbox when checked will always highlight the first option in the drop down after every URL change.
8. The drop down won’t work in Design view, but when previewed in the browser, it would look like: