You may want to redirect to a web page from another for some reason. Say your site is down for maintenance and you do not want the readers to see an error or a blank page. In such case, you can redirect them to a meaningful web page, for instance another web site or a page that displays a message for the readers. Behaviors let you achieve this in simple way.

1. Go to Panels menu and choose ‘Behaviors’. The Behaviors panel would be pinned next to the Apply and Manage Styles panels.

NOTE: In earlier versions of EW these panels were known as task panes.

2. Click on Insert and choose ‘Go to URL’ from the drop menu.

 

3. The Go To URL dialog box would be prompted as shown below:

 

Enter the URL or browse to the file and click OK.

4. The behavior would then be visible in the Behaviors panel as shown here:

 

The Events list lets you set the event on which the action (Go To URL) should occur. Choose an event. For our example, where we want to redirect to different page since our site is down for maintenance, we would choose ‘onload event’.

5. Save your page and preview in the browser.

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.

As designers we always prefer to define a font family for different elements of a page instead of defining a single the font. A font family is a set of three or more fonts for displaying text. If a single font defined in the page is not installed on the viewers system, then the default serif or sans serif font will be shown. Well but in case of a font family, if the first font in the family is unavailable, the second font is checked. If that font too is not available then only the system will go in for serif or sans serif fonts.

You can always open the Code view and include a <font-family> tag, but Expression Web 2 has made this easier. All you have to do is follow these simple steps:

1. Go to Tools menu > Page Editor Options…
2. In the Page Editor Options dialog box, switch to Font Families tab. See image below:

1. As shown in the above image, click on (New Font Family) under the section ‘Select font family:’
2. Then start adding fonts in the Add font box. Either choose the font from the list, or type it manually in the box. Once you do that the Add button will be enabled. As soon as you choose the font from the list, click Add and the font will be added to a new font family. To add fonts to this family, choose it from the list and click Add. It will get appended to the list. You can add as many fonts as you like.
3. The ‘Move Up’ and ‘Move Down’ buttons let you organize the font family list. This list would appear in the intellisense in the same order as it is displayed over here. Click OK when your options are set.

TIP:

To make sure that your viewers would always be able to see some text, it is better to include a serif or monospace font in your font family.

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:

Long back in 1990s it was a challenge to embed videos into your web pages. But now most third party gadgets have made it quite simple to add a video into your page.

Similarly you can have a You Tube video embedded into your Microsoft Expression Web web page. All you have to do is copy the You Tube code and add it into the Code view in Expression Web. Just follow these steps:

1. Visit You Tube and open the video you wish to embed.
2. Copy the code (Embed code).
3. Open your website/web page in Microsoft Expression Web.
4. Either open Code view or Split view and place your cursor where the video is to be added.
5. Paste the code.
6. Save and Preview in the browser.

      7. You can make any adjustments to video (object) size, etc in the code.

NOTE: The Design view would not display the video. It would display an error that says ‘A control of the specified type could not be found’.

This is because the Design Pane is just to preview window for your markup. Video is an Active content and hence it will not be played in Design view. Just ignore the error and preview it in the browser. The video will run fine.

CSS property float is used to position (float) a block level element within another element. You can float block level elements like divisions <div>, paragraphs <p>, images <img /> and lists <ul> to left or right of the page. Float is widely used to align image and wrap text around it in a same container. Let us see how.

Float an image to the left in a paragraph and wrap text around it

Set a style for the image by creating a New Style in Apply/Manage Styles task pane. In the New Style dialog box given below; choose Layout and set float: left.

Then in Box category, set margins as top: 5px, right: 10px, bottom: 5px and left: 0px. Also set a border for the image in Border category. Click on OK to generate below mentioned style;

<style type=”text/css”>

img{

                float: left;

                margin:5px 10px 5px 0px;

                border: thin black dotted;

}

</style>

In the main body of the page, add a paragraph, enter the text and embed the image into it. Go to the Design view and type in the text. To insert the image, go to Insert menu > Picture > From File… Then browse to the path of the image and click on Insert. In the Code view the code looks as follows:

<body>

       <p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

<img src=”arrow_right_green.png” style=”float:left”/>

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris  nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  

</p>

</body>

</html>

Save the file and preview it in the browser. The output will be as follows:

What makes Layers so popular is their ability to overlap each other and create certain effects. You can have images and text that could be placed over each other.

 The z-index property is used to set the stack order of an element. So an element with a greater stack order (higher z-index value) is always positioned in front of the element with lower stack order (a lower z-index value). Z-index can be negative. But z-index works for only those elements that are positioned (absolute or relative).

Let me take you through an example to make things simpler. Look at the image below:

I have added three layers in following order: layer 1, layer 2 and layer 3. Therefore their default z-index values are as shown below in the Layers task pane:

Since z-index for layer 1 is the lowest among all, viz. 1 it below layer 2 and 3. Again layer 2 has a lower z-index of ‘2’ than that of layer 3; layer 3 is above layer 2. When no z-index property is specified, elements are rendered on the default rendering layer 0 or 1.

Change the z-index property

Now if you want to change the order in which the layers are displayed, double click on the z-index displayed against the layer id in the Layers task pane, and enter the new value. In above example, if you have to overlap layer 3 with layer 2 as shown below:

All you have to do is set z-index for layer 2 to ‘4’.  Since z-index for layer 3 is ‘3’ which is lower than 4, a lower z-index value would put it below the element with higher z-index value. In this example you could also swap the z-indexes of layer 2 and 3 to achieve the same result. Similarly you can adjust the z-indexes to arrange your layers.

NOTE: If multiple elements share the same z-index value, they are placed on the same layer level.

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.

Incremental search is a user interface interaction method to progressively search for and filter through text. In Expression Web, Incremental Search, searches the text as you type, and as soon as a match is found it immediately presents it to you. Incremental Search gives you an advantage, to stop short of typing the entire word or phrase you are looking for.

How to search incrementally?

1.       Open the page or CSS file you want to search and place the cursor where you want to begin your search.

2.       Go to Edit > Incremental Search. Your cursor would now change to .

3.       Now just type in the characters you want to search. The status bar would display the characters as you type them, and the first occurrence of the letters you have typed, would be highlighted in the page.

4.       To locate and move to the next occurrence of the characters press F3 and to go to the previous instance press SHIFT + F3.

To stop the incremental search either press Esc, or Enter or just click somewhere in your page.

A simple and elegant design. This template is suitable for a clinic, hospital or any other medical setup.

Hospital/Clinic Template

This template can be downloaded here.