You must be familiar with the Apply Styles and Manage Styles panels (earlier known as Task Panes). The Style toolbar has fewer but similar functions. The Style toolbar enables you to quickly use class and ID selectors, create new styles and attach existing ones.

But if you have been using the Apply Styles and Manage Styles panel, I would not suggest you to continue using it. Since the panel has lots of functions and options than the toolbar, in addition to a visual illustration of the styles. If you do not want your panels to eat up most of your workspace or want to use only primary functions of the Style toolbar, then it is one handy toolbar.

To launch the Styles toolbar

Right click on any toolbar and select ‘Style’. The toolbar looks like;

The toolbar has four functions –

1.       Class drop down:

Lists all class selectors that are defined in the internal CSS, linked or imported external style sheets. Use to assign, remove, change, or add an undefined class.

2.       ID drop down:

Lists all the ID selectors defined in the internal CSS, linked or imported external style sheets. Use to assign existing ID, create unique ID or remove any ID.

3.       New Style button:

Launches the ‘New Style’ dialog box.

4.       Attach Style Sheet button:

Launches the Attach Style Sheet dialog box as shown here:

NOTE: The Class and ID drop down boxes display the selectors only when your current selection in the page uses a class and/or ID selector. Else the boxes appear blank. Click on the drop down arrow to view the defined or create new selectors.

CSS2 had introduced a new selector, the universal selector to match any element in your page. The selector is indicated as an asterisk ‘*’. The universal selector could be used to list every element in your page.
For example,

* {font-size: 12px}

This declaration would set the font size of all the elements used in your document to 12px.

NOTE: Even though the universal selector is one handy option, consider the specificity of other selectors for it to work properly.

Jump Menu Go behavior lets you associate a button (Go button) with a jump menu. In that case a jump menu should already exist in the document. Though a jump menu does not need a go button to execute, selecting an item from the jump menu causes a URL to load on its own. But a go button may be required if you want to re-select the already chosen item, which may not be registered just by choosing it from the jump menu.

When you add a jump menu go behavior, your go button will perform the “jump” action to take to the associated URL. Selecting a menu item from the jump menu will no longer direct the user to the related page then.

To create a Jump Menu Go button, follow these steps:

1. If a jump menu is not already created create one. How do I create a jump menu?
2. Add a button object near the jump menu.

 

3. In the Behaviors task pane, choose Insert and from the menu select ‘Jump Menu Go’.

 

4. You would be prompted with ‘Jump Menu Go’ dialog box, as shown below:

 

5. Choose the menu for Go button to activate and click OK.

What does recalculating hyperlinks do?

The Recalculate Hyperlinks command checks and repairs all the pointers in your website within Expression Web. In other words it synchronizes the website metadata which maintains the cross-page links.

When should I recalculate hyperlinks?

It will be a best practice, to recalculate hyperlinks before you each publish or FTP of your website. Expression Web then won’t have to spend time in locating the files during publishing resulting in faster process and low risk of timeout during publishing.

How do I use Recalculate Hyperlinks command?

1. Open your website.
2. Go to Site menu > choose Recalculate Hyperlinks.
3. The Recalculate Hyperlinks dialog box gives a description of actions it would take. 
4. Click Yes.

Expression Web may take several minutes to complete the process.

A scrollable area is where content can be presented and can be scrolled through. When you have a lot of content to be presented in a particular section, it is beneficial to add a scrollable area, without occupying much space on the page and keeping it organized. You can always add a textarea or use iframe tags to do the same. But through HTML and CSS you can do the same for any page element.

This is done by using the CSS property – overflow. The overflow property takes any of the following values as its input:

1. overflow: auto – This will create a horizontal and/or vertical scrollbars only when needed, i.e. when the text exceeds the display area of the element.
2. overflow: scroll – This will create horizontal and vertical scrollbars, even if the text inside the element fits into its display area. The scrollbars will always reside.
3. overflow: visible – This will cause the element area to expand to make space for the content.
4. overflow: hidden – This will force the block to only show the text that fits the in it. Rest of the content will be hidden and would not be visible.

Let us create a scrollable area into a <div>as shown in the image below:

Follow these steps:

1. In the Design View, drag the <div> from the Toolbox and drop onto the page. Else in the Code View, manually type the <div></div> tags.
2. Then enter your content into the div.
3. In the Apply/Manage Styles task pane, click New Style… to launch the New Style dialog box.
4. In the New Style dialog box, name the selector as ‘scroll’ and choose following properties:

.scroll {

        font-family: “Courier New”, Courier, monospace;

        font-size: 14px;

        color: #FFFFFF;

        background-color: #000000;

        border: 1px solid #4A4A4A;

        padding: 5px;

        overflow: auto;

}

See image below for more details.

Toolbars are quite handy if used intelligently. Instead of browsing through the long menus and submenus before you find the right command, if you often use a command then why not add it on the toolbar.

To add commands to toolbars

 Right click on the toolbar and choose ‘Customize’. In the Customize window, switch to ‘Commands tab’ and click ‘Rearrange Commands’.

In the Rearrange Commands window choose the radio button next to ‘Toolbar’. Choose the ‘Common’ Toolbar and then ‘Add’.

In the ‘Add Command’ dialog box, choose the ‘Category’ (browse each if you do not know where you can find the command) and then the command to be added and then click OK. In this example we will add the ‘File…’ command to the Common Toolbar.

Click ‘Close’, to exit the ‘Rearrange Commands’ window and again, to close the ‘Customize’ window.

To add commands to menu bars

In Rearrange Commands window (see above), choose the radio next to Menu bar. From the drop down menu choose the menu bar you want to edit. Then click on Add to launch the Add Command dialog box. Now browse the categories to find the command to be added to the menu bar and click OK. For instance choose to add the File… command. The new menu bar would look as follows:

Rearrange Commands tool lets you do all possible actions to customize your toolbars and menus the way you want them. You can rearrange the commands on the toolbar to:

·         Add, remove, reorder the commands on the menu bar and toolbar.

·         Modify the name, image and keyboard shortcut associated with a menu command or button on the toolbar.

To launch the Rearrange Commands dialog box, go to Tools > Customize. In the Customize dialog box, go to the Commands tab and click Rearrange Commands.

Use the Rearrange Commands dialog box to do the following:

1.       Choose a menu or toolbar to rearrange: Select the Menu Bar or Toolbar you want to change.

2.       Controls: Select the controls you want to change.

3.       Add: Click the button to add a new control.

4.       Delete:  Click the button to delete a control.

5.       Move Up: Click the button to move the control up in a menu bar or towards left on a toolbar.

6.       Move Down: Click the button to move the control down in a menu bar or towards right on a toolbar.

7.       Modify Selection: The drop down menu has a number of options like;

·         Reset – resets the control

·         Delete – deletes the control

·         Name – You can enter a name for the control along with its keyboard shortcut. In the above image; &File… denotes ALT + N is the keyboard shortcut to access File menu.

·         Copy Button Image – lets you copy the button image associated with this control.

·         Paste Button Image – lets you paste a button image.

·         Reset Button Image – resets the button image to its default.

·         Edit Button Image – lets you edit the button image.

·         Change Button Image… – lets you choose a new button image from the menu.

·         Default Style – set the style of the button to its default.

·         Text Only (Always) – sets to always display only text for the control.

·         Text Only (in Menus) – sets to always display only text for control only when it appears in a menu.

·         Image and Text – lets you always display an image and text for the control.

·         Begin a Group – adds a group separator bar.

·         Assign Macro… – lets you link a control to a macro.

8.       Reset: Resets any and all the actions you carried out on the menu bar and toolbar.

A Quick Tag Selector bar is located at the top of the editing window in your Expression Web workspace. It makes it easier for you to select, edit and remove tags while working in Design or Code view of a web page. To view the Quick Tag Selector bar, go to View > choose Quick Tag Selector. See image below:

The Quick Tag Selector is to be read from left to right to follow the order of the hierarchy of tags. For instance; in the image above, <body> contains <div> which in turn contains <p>. Place your cursor inside the tag in Design view or Code view and that particular tag will be selected in the Quick Tag Selector bar at the top. The drop down arrow besides each tag in the Quick Tag Selector bar displays a menu as shown above. Let us see what each option does:

1.       Select Tag selects the start and end tags along with the content of those tags.

2.       Select Tag Contents selects only the content inside the tags.

3.       Edit Tag… displays the Quick Tag Editor window, which enables you to add, modify or wrap tags.

4.       Remove Tag removes the start and ends tags, leaving the content intact.

5.       Insert HTML… displays the Quick Tag Editor window that lets you insert HTML into your web page.

6.       Wrap Tag… displays the Quick Tag Editor window that lets you insert nested tags into a selected tag.

7.       Tag Properties… opens the Tag Properties dialog box or task pane related to the tag.

Go to Site menu > choose Site Settings… This will launch the Site Settings dialog box (see image below)

Choose the Preview tab and various options available are explained below:

1.       Preview using website URL – Choose this to preview the site using the website URL.

2.       Use Microsoft Expression Development Server – Check this box and select ‘For only PHP and ASP.NET web pages’ if you want to use Expression Development Server to preview ‘.aspx’ pages only. Expression Development Server supports only server side languages such as ASP.NET and PHP. Choose For all web pages for ‘.htm’, ’.html’ and ‘.aspx’ pages.

3.       Preview using custom URL for this website – Enter a path or browse to the location of the website.

A page transition is a visual effect with which a page opens or closes. For example, fading, wiping out. You can add a page transition to multiple pages in a website.

Adding a page transition

Go to Format menu > Page Transition to launch the Page Transition dialog box (shown below).

Choose following options in the Page Transitions dialog box:

Event: Select the event for which the page transition should occur. You have four events to choose from;

1.       Page Enter – when a page opens in a browser.

2.       Page Exit – when a page loses its focus.

3.       Site Enter – when a web site is opened for the first time.

4.       Site Exit – when the web site loses its focus.

Duration (seconds):  Enter the duration in seconds, for which the page transition effect should last.

Transition effect: Choose the type of transition effect you want to apply.

NOTE: You can add transitions to more than one event, but be careful as to not create too many flashy effects as it may lead nuisance to the viewer and may not visit your web site again.