What is an Expression Web Community Toolbar?

The Expression Web Community Toolbar is a tool which makes it very easy to access all important Expression Web related links and resources. This toolbar is created by fellow MVPs Tina Clarke and Pat Geary and is free for download.

The toolbar includes all of the  Expression Web versions 1, 2, 3 and 4 as well as these Expression applications;

- Expression Design
- Expression Blend
- Expression Encoder

The toolbar has different categories in which chosen Expression Web sites (sites that provide you with quality information about Expression Web) are grouped and organized into:

- Expression Web links
- Expression Web Blogs
- Expression Web Tweets
- Web Design Links

Each of these sections will expand to show sub-categories and links within them.

What is included in the Expression Web Community Toolbar?

Expression Web Links:

Expression Web Blogs:

Expression Web Tweets:

Tweets from the Twitter id expressionweb where 3rd party links to tutorials are posted and you might find them helpful.

Web Design Resource Links:

help you with Web Design in general.

It also includes links for  Contests, Giveaways and special offers for Expression Web 3.0 and 4.0. If you want to know what Expression Web Communities, Webcasts and Live Events might be available? Those are included too.

NOTE: A ticker will display latest breaking news or special offers.

There are some additional options on the toolbar which will allow you to add other applications to the toolbar. Click on the black arrow next to Expression Web and choose ‘Toolbar options’. Then choose ‘Useful Components’ tab. Check the applications you’d like to show on toolbar and click OK.

How will the toolbar benefit me?

What do you do when you need information or tutorials about Expression Web? You either search them on various search engines or scan your bookmarks for any sites you visited earlier and have bookmarked them. What if you have not bookmarked them? Then you will have to spend good amount of time in searching for the resources. Here the toolbar would come to your rescue.

What could be more convenient than having everything in one place so everyone can freely access latest news, articles and tutorials. The Expression Web Community toolbar is updated regularly with the latest tutorials, links, news, updates. Look for “NEW LINKS – LOOK HERE FIRST” with a date for the newest offerings.

How do I download and install this toolbar?

You can download the toolbar over here.

Then run the executable file, follow the wizard and the toolbar would get installed on your default browser (that’s what it did on my Windows 7 machine).

Can I also add a resource to the toolbar?

Of course you can. Read more about the Expression Web Community Toolbar.

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.

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 Dynamic Web Template toolbar provides a quick means to navigate and manage editable regions in a DWT. To open the toolbar, right click on any toolbar and choose Dynamic Web Template.

The Dynamic Web Template consists of following tools and buttons:

1.    Region box – lets you choose a region, like body. 

2.    Manage Editable Regions button – takes you to the Editable Regions window where you can add/remove any editable region.

3.    Update Attached Pages button – updates all the pages that are attached to your dynamic web template.

 4.    Show Template Region Labels button – shows label for each region.

To create a new toolbar in Microsoft Expression Web 2, follow these steps:

1.       Right click anywhere on any toolbar and choose Customize or click on the down arrow on any toolbar, select Add or Remove buttons and then choose Customize.

2.       This would launch the Customize dialog box as shown below:

3.       Click on New… and in the New Toolbar dialog box enter a name for your toolbar and click on OK.

4.       Your toolbar would now be listed on the Toolbars tab. Plus a small floating toolbar would appear besides this window which would look like this:

5.       Go to the Commands tab (on the Customize dialog box), in the categories box choose a category that contains different buttons or commands. Then choose the button or command and then drag it onto the new toolbar.

6.       To modify the buttons or commands you have added on your toolbar, right click on them and choose an action from the menu. See image below:

7.       Lastly click on Close when you are done.

8.       Dock the toolbar with other toolbars or keep it floating.

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.

A hotspot is a clickable portion or a hyperlinked area in a picture that works as a hyperlink. You can have one or more hotspots in a picture. A hotspot can be rectangular, circular or polygonal is shape.

Create a hotspot?

1.       In the Design view, click on the picture to which you want to add hotspot to.

2.       To launch the Pictures Toolbar, right click on any toolbar and choose Pictures from the list.

3.       Click the Rectangular hotspot button, Circular hotspot button or Polygonal hotspot button.

4.       To draw a rectangular or circular hotspot, place the pointer on the picture where you want to create the hotspot and drag it.

5.       To create a polygonal hotspot, click on the picture to create each vertex and then complete the shape by joining the starting and ending vertices, or double click on the last vertex to let Expression Web complete the polygon for you.

6.       As soon as your hotspot shape is complete, you are prompted with the Insert Hyperlink dialog box. Locate the file you want to link to and then click OK.

Edit a hotspot

Click on the picture that contains your hotspots. On the Pictures toolbar, make sure the Select button is selected. Then choose to do any of the following:

1.       Move: Click inside the hotspot and drag it to move the hotspot around.

2.       Resize: Drag the arrows on the vertices to resize the hotspot.

3.       Edit Link: Double click the hotspot to open the Edit Hyperlink window. You can change the link reference over here.

4.       Delete: Click the hotspot and hit Delete key.

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.