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:

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.

Why is CSS preferred by all the designers? Well that is because of its ability to separate presentation from the content and most importantly its power to edit the document style by changing a single line of code. Don’t believe me? Find it yourself!

An element selector is an HTML element. There are other types of selectors too, which we will explore later. So the element selectors are the most basic selectors in your document structure. html, body, p, div, span, headings, etc are all different types of element selectors of a document. We can apply certain rules to them to stylize these selectors. For example, if we want all the paragraphs to be displayed in red color, we can do that by;

p { color: red}

Or if we want the heading 2 to appear with a gray background;

h2 { background-color: gray}

Grouping multiple declarations

We saw how to apply a single declaration to an element selector. But you can have multiple declarations in the same rule. See this example:

p { color: red; background-color: gray;}

In this rule, we have combined two declarations; (i) the font-color in all paragraphs to be red (ii) background color of all paragraphs to be gray. Semicolon is used as a separator between these declarations. If you notice, the last declaration is also followed by a semicolon. It is rather important to do so since browsers ignore the whitespaces in the style sheet. To make this clear see following example:

p { color: red; background-color: gray font-size: 10px; }

Since there is no ‘;’ after the value ‘gray’ for background-color, browsers check if the property has multiple values. But since font-size is not a valid value and background-color does not take multiple values, both the properties will be ignored. But note that the last declaration of the group need not end with a semicolon. For instance;

p { color: red; background-color: gray}

This will work absolutely fine in most of the browsers. But at a later stage, if you want to add some more declarations to the group, you must add a semicolon after this declaration, else it would ignored as shown in above example.

Grouping Element Selectors

We saw techniques to apply one or more styles to a single selector. But what if, you want to apply same style to more than one element selector. For instance, if you want heading 2 and paragraph both to be in red. It would be stupid of us if we write the same style for another element. There is a better way to do that;

h2, p { color: red}

In this example, we are using a comma to group two selectors, viz. ‘h3′ and ‘p’. Similarly you can group multiple selectors. This way you generate fewer lines of styles in your style sheet which in turn makes it easier for you to find out selectors and styles at a later stage when your style sheet has numerous rules defined in it.

Grouping multiple declarations with multiple selectors

By now we grouped multiple declarations for a single selector and we also grouped multiple selectors with a single declaration. Now it’s turn to group multiple declarations, with multiple selectors. Confusing enough isn’t it! Well this example would make it clear;

h2, p {

                color: red;

                background-color: gray;

                font-size: 10px;

}

These were some powerful and effective techniques of CSS. We will learn more in our coming articles, but for now I hope you enjoyed reading this.

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.

A Horizontal rule or line can be used to divide or separate your content and organize it well. IT could be used to separate pieces of text or images. To get an idea of how a horizontal rule would look, take a look at this image:

To add a Horizontal rule (<hr> tag in HTML), do one of the following:

1. Go to Insert menu > HTML and choose Horizontal Line.

2. The line will be immediately placed into your page. If you want to edit the horizontal line then double click on it to launch its properties as shown below:

3. Following properties can be edited:

• Width can be either as percentage of the window’s width or in pixels. The default width is 100% of the window’s width.
• Height must be in pixels.
• Choose the alignment of the rule as left, center or right.
• Select a color from the drop down. Also choose if the line should be a solid line without shading or use the default shaded one.

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:

‘em’ and ‘ex’ units are both relative units; viz. they are measured in relation to other values.

In CSS, one ‘em’ is defined to be the value of font-size of a given element. For example, if the font-size of a paragraph element is 12 pixels then 1em = 12 px.

But as I already mentioned ‘em’ value depends on the element with which it is used. Consider following example.

p {font-size: 12px; padding-left: 1em;}

h1 {font-size: 22px; padding-left: 1em;}

The output would be: 

This is because; the value of ‘em’ is relative to its parent. So the left padding for the paragraph was 12px whereas left padding for Heading 1 was 22px.

‘ex’ on the other hand refers to the height of the lowercase letter ‘x’ in the font that is assigned for a given element. Different fonts have different heights for ‘x’ even if their font-size is same. Hence the value of ‘ex’ differs from font to font. Take a look at these fonts:

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.

The Expression Web 2 status bar displays information about your current editing modes like visual aids mode, Style Application mode, Rendering mode and Page size mode along with some information about the file your are working with such as file size, HTML and CSS Schema.

To view status bar, go to Tools > Application Options > General tab and check the box: Show status bar

The status bar looks as shown in image below:

The information shown on the status bar is explained below:

·         HTML Incompatibility Detected icon – Depicts that there is an incompatibility in the HTML code, double click on the icon to go to the HTML schema incompatibility in your code.

·         Code Error Detected icon – Illustrates an error in the code and when you double click on the icon it takes you to the error in the code.

·         Visual Aids: On – Lets you change the Visual Aids mode. Double click to switch.

·         Style Application: Auto – Displays the current Style Application mode and lets you change the same. Double click to open the Style Application toolbar.

·         329 bytes – Displays the current size of the file.

·         Standard – Is the Rendering mode in which Microsoft Expression Web displays the files. The rendering mode is determined by the DocType you have declared in the page. Double to open the Page Editor Options dialog box.

·         707 x 206 – Displays the current size of the page. Click to choose a page size from the available list of sizes.

·         XHTML 1.0 T – Is the HTML Schema Expression Web has applied to current page. Double click to open Page Editor Options and change the schema.

·         CSS 2.1 – Displays the CSS Schema Expression Web has applied to current page. Double click to open Page Editor Options and change the schema.

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.