第 62 页

or absolute position, the fl oat setting, the z - index, and the padding and margin widths.

fiGure 20-9

410 .

chaPter 20 ASp.neT Web FormS

Fortunately, you don’t need to learn the exact syntax and

names of all of these attributes and manually type them

into the markup. As with most things in Visual Studio, the

IDE is there to assist with the specifics. Begin by selecting

the control or element that you want to position in Design

view. Then choose Format .

Position from the menu to

bring up the Position window shown in Figure 20-10.

After you click OK, the wrapping and positioning style

you have chosen and any values you have entered for

location and size are saved to a style attribute on the

HTML element.

If an element has relative or absolute positioning, you

will be able to reposition it in the Design view. Beware,

though, of how you drag elements around the HTML

Designer, because you may be doing something you

didn’t intend! Whenever you select an element or control

in Design view, a white tag appears at the top-left corner of the element. This displays the type of

element, as well as the ID and class name if they are defined.

If you want to reposition an element with relative or absolute positioning, drag it to the new position

using the white control tag. If you drag the element using the control itself, it does not modify the

HTML positioning, but instead moves it to a new line of code in the source.

Figure 20-11 shows a button that has relative positioning and has been repositioned. The actual

location of the element in the normal flow of the document is shown with an empty blue rectangle.

However, this control has been repositioned 45px down

and 225px to the right of its original position. The actual

control is shown in its new position, and blue horizontal

and vertical guidelines are displayed, which indicate that

the control is relatively positioned. The guidelines and

original position of the element are shown only while

fiGure 20-11

it is selected.

fiGure 20-10

If a control uses absolute positioning, the positioning container is highlighted,

and two additional guidelines are displayed that extend from the bottom and

right of the control to the edge of the container.

The final layout technique discussed here is setting the padding and margins of an HTML element.

Many web developers are initially confused about the difference between these display attributes —

which is not helped by the fact that different browsers render elements with these attributes differently.

Though not all HTML elements display a border, you can generally think of padding as the space

inside the border, and of margins as the space outside.

Designing Web forms .

411

If you look very closely within the HTML

Designer, you may notice some gray lines

extending a short way horizontally and

vertically from all four corners of a control.

These are only visible when the element is

selected in the Design view. These are called

margin handles and they allow you to set the

width of the margins. Hover the mouse over

the handle until it changes to a resize cursor,

and then drag it to increase or decrease the

margin width (see Figure 20-12).

Finally, within the HTML Designer you can set the padding around an element. If you select an element

and then hold down the Shift key, the margin handles become padding handles. Keeping the Shift key

pressed, you can drag the handles to increase or decrease the padding width. When you release the Shift

key they revert to margin handles again. Figure 20-12 shows how an HTML image element looks in the

HTML Designer when the margin and padding widths have been set on all four sides.

At first, this means of setting the margins and padding can feel counterintuitive, because it does not

behave very consistently. To increase the top and left margins you must drag the handlers into the

element, and to increase the top and left padding you must drag the handlers away. However, just

to confuse things, dragging the bottom and right handlers away from the element increases both

margin and padding widths.

Once you have your HTML layout and positioning the way you want them, you can follow good

practices by using the new CSS tools to move the layout off the page and into an external style sheet.

These tools are discussed in the section after next.

formatting controls and htMl elements

In addition to the Position dialog window discussed in the previous section, Visual Studio 2010

provides a toolbar and a range of additional dialog windows that enable you to edit the formatting

of controls and HTML elements on a web page.

The Formatting toolbar, shown in Figure 20-13, provides easy access to most of the formatting

options. The leftmost drop-down list lets you control how the formatting options are applied

and includes options for inline styling or new CSS rules. The next drop-down list includes all

the common HTML elements that can be applied to text, including the <h1>

through <h6>

headers,

<ul>, <ol>, and <blockquote>.

fiGure 20-12

fiGure 20-13

Most of the other formatting dialog windows are listed as entries on the Format menu. These

include windows for setting the foreground and background colors, font, alignment, bullets,

and numbering. These dialog windows are similar to those available in any word processor or

WYSIWYG interface and their uses are immediately obvious.

412 .

chaPter 20 ASp.neT Web FormS

The Insert Table dialog window, shown in Figure 20-14, provides a way for you to easily define the

layout and design of a new HTML table. Open it by positioning the cursor on the design surface

where you want the new table to be placed and selecting Table . Insert Table.

One final and quite useful feature on the Insert Table and Font dialog windows is under the color

selector. In addition to the list of Standard Colors, there is also the Document Colors list, shown in

Figure 20-15. This lists all the colors that have been applied in some way or another to the current page,

for example as foreground, background, or border colors. This saves you from having to remember

custom RGB values for the color scheme that you have chosen to apply to a page.

fiGure 20-14 fiGure 20-15

css tools

Once upon a time, the HTML within a typical web page consisted of a mishmash of both content

and presentation markup. Web pages made liberal use of HTML tags that defined how the content

should be rendered, such as <font>, <center>, and <big>. Nowadays, designs of this nature are

frowned upon — best practice dictates that HTML documents should specify only the content of

the web page, wrapped in semantic tags such as <h1>, <ul>, and <div>. Elements requiring special

presentation rules should be assigned a class attribute, and all style information should be stored

in external CSS.

Visual Studio 2010 has several features that provide a rich CSS editing experience in an integrated

fashion. As you saw in the previous section, you can do much of the work of designing the layout

and styling the content in Design view. This is supplemented by the Manage Styles window, the

Apply Styles window, and the CSS Properties window, which are all accessible from the View menu

when the HTML Designer is open.

Designing Web forms .

413

The Manage Styles window lists all the CSS styles that are internal,

inline, or in an external CSS file linked through to the current page.

The objective of this tool window is to provide you with an overall

view of the CSS rules for a particular page, and to enable you to edit

and manage those CSS classes.

All the styles are listed in a TreeView with the style sheet forming the

top-level nodes, as shown in Figure 20-16. The styles are listed in

the order in which they appear in the style sheet file, and you can drag

and drop to rearrange the styles, or even move styles from one style

sheet to another.

When you hover over a style the tooltip shows the CSS properties

in that style, as shown in Figure 20-16. The Options menu

drop-down enables you to filter the list of styles to show only those

that are applicable to elements on the current page or, if you

have an element selected in the HTML Designer, only those that

fiGure 20-16

are relevant to the selected element.

The selected style preview, which is at the bottom of the Manage Styles window,

is generally not what will actually be displayed in the web browser. This is

because the preview does not take into account any CSS inheritance rules that

might cause the properties of the style to be overridden.

The Manage Styles window uses a set of icons to provide further visual information about the

type of each style. The icons next to the style names have different colors: a red dot indicates an

ID-based style, a green dot a class-based style, a blue dot an element-based style, and a yellow

dot an inline style.

A circle around a dot indicates that the style is

used on the current page. For example, in Figure

oxb-title 20-16 you can quickly see that the

CSS

class is used on the active web page, whereas the

oxb-img

class is not. Finally, the @ symbol is used

to indicate an imported external CSS.

When you right - click a style in the Manage Styles

window you are given the option to create a new

style from scratch, create a new style based on the

selected style, or modify the selected style. Any

of these three options launch the Modify Style dialog

box, shown in Figure 20-17. This dialog provides an

intuitive way to define or modify a CSS style. Style

properties are grouped into familiar categories, such

as Font, Border, and Position, and a useful preview is

displayed toward the bottom of the window. fiGure 20-17

414 .

chaPter 20 ASp.neT Web FormS

The second of the CSS windows is the Apply Styles window. Though

this has a fair degree of overlap with the Manage Styles window, its

purpose is to enable you to easily apply styles to elements on the

web page. Select View . Apply Styles to open the window, shown in

Figure 20-18. As in the Manage Styles window, all the available

styles are listed in the window and you can filter the list to show

only the styles that are applicable to the current page or the

currently selected element. The window uses the same icons to

indicate whether the style is ID-based, class-based, element-based,

or inline. You can also hover over a style to display all the properties

in the CSS rule.

However, the Apply Styles window displays a much more visually

accurate representation of the style than the Manage Styles window.

It includes the font color and weight, background colors or images,

borders, and even text alignment.

When you select an HTML element in the Designer, the styles applied

to that element are surrounded by a blue border in the Apply Styles

window. This can be seen in Figure 20-18, where the .phone

style

is active for the selected element. When you hover the mouse over

any of the styles a drop-down button appears over it, providing access to a context menu. This menu

has options for applying that style to the selected element or, if the style has already been applied, for

removing it. Simply clicking the style also applies it to the current HTML element.

The third of the new CSS windows in Visual

Studio 2010 is the CSS Properties window,

shown in Figure 20-19. This displays a

property grid with all the styles used by the

HTML element that is currently selected in

the HTML Designer. In addition, the window

gives you a comprehensive list of all of the

available CSS properties. This enables you to

add properties to an existing style, modify

properties that you have already set, and

create new inline styles.

Rather than display the details of an

individual style, as was the case with the

Apply Styles and Manage Styles windows,

the CSS Properties window instead shows

a cumulative view of all the styles applicable to the current element, taking into account the order

of precedence for the styles. At the top of the CSS Properties window is the Applied Rules section,

which lists the CSS styles in the order in which they are applied. Styles that are lower on this list

override the styles above them.

fiGure 20-18

fiGure 20-19

Designing Web forms .

415

Selecting a style in the Applied Rules section shows all the CSS properties for that style in the lower

property grid. In Figure 20-19 (left) the .site-nav a CSS rule has been selected, which has a

definition for the color, font-size, font-weight, text-decoration, and text-transform CSS

properties. You can edit these properties or define new ones directly in this property grid.

The CSS Properties window also has a Summary button, which displays all the CSS properties

applicable to the current element. This is shown in Figure 20-19 (right). CSS properties that have

been overridden are shown with a red strikethrough, and hovering the mouse over the property

displays a tooltip with the reason for the override.

Visual Studio 2010 also includes a Target Rule selector on the Formatting toolbar, shown in

Figure 20-20, which enables you to control where style changes you made using the formatting

toolbars and dialog windows are saved. These include the Formatting toolbar and the dialog

windows under the Format menu, such as Font, Paragraph, Bullets and Numbering, Borders and

Shading, and Position.

fiGure 20-20

The Target Rule selector has two modes: Automatic and Manual. In Automatic mode Visual Studio

automatically chooses where the new style is applied. In Manual mode you have full control over

where the resulting CSS properties are created. Visual Studio 2010 defaults to Manual mode, and

any changes to this mode are remembered for the current user.

The Target Rule selector is populated with a list of styles that have already been applied to the