Positioning Elements in Web Pages

If you are creating pages that will be displayed using Internet Explorer 4.0 DHTML, you can place elements on your page and position them absolutely — that is, you can assign them a position that uses x and y coordinates relative to the window in which they appear. (In contrast, elements that are not positioned absolutely appear in the page in-line with the HTML text around them.) Because you can place absolutely positioned elements anywhere on the page, you can also layer them.

Note Absolute positioning is not supported in versions of HTML before 4.0. If pages in your application will be displayed in a wide variety of browsers, it is a better idea for you to position elements by using paragraph alignment and tables.

Container objects such as tables and divisions (DIVs) can also be absolutely positioned. The objects in the container are then absolutely positioned with respect to the container.

In the editor, you use Design view to work with absolutely positioned elements. In Design view you can convert elements to be absolutely positioned and drag them into position.

To position an element absolutely

  1. Switch to Design view in the editor.

  2. Select the element to position.

  3. From the Format menu, choose Absolute Positioning. The editor converts the element to absolute positioning at its current location.

  4. To change an element's location, drag it to where you want it on the page.

The element's location in the HTML text of the page is not important. In Design view, the element appears at the x and y coordinates you specify. If you choose Show Details from the Design toolbar, the element's anchor — its location within the HTML text — is indicated with the special glyph.

You can also use a division (<DIV> block) or span (<SPAN> block) to combine elements into a collection that can be positioned absolutely. For example, you can combine several paragraphs and an image into a division and then position it absolutely.

To combine elements in a division and position them absolutely

  1. Switch to Design view.

  2. Select the elements that you want to combine. The elements must be sequential in the document.

  3. From the HTML menu, choose Div.

  4. In the Insert DIV dialog box, choose Absolute, and then choose OK.

The HTML editor puts a division (<DIV> and </DIV> tags) around the selected elements. You can now select the entire division in Design view and position it absolutely.

Note If you have specified an individual element as absolutely positioned, and the element in turn is inside a division that is also absolutely positioned, you will be able to move the individual element outside the bounds of the division when dragging it. However, it still belongs to the division and will be moved if you move the division.

To combine elements in a span, you create a span, select it, and then choose Absolute Positioning from the View menu.

To make it easier to position elements, you can cause all new objects dragged from the Toolbox in Design view to automatically be positioned absolutely.

To position elements absolutely when dragging them from the Toolbox

  • Set Absolute mode by choosing the Absolute Mode button on the Design toolbar. Any element that you drag from the Toolbar in Design view from then on will be positioned absolutely.

To help you align elements precisely, you can use an invisible grid.

To align elements on the grid

  • In the Design toolbar, choose the Snap to Grid button. To set grid spacing, choose Options from the Tools menu, choose HTML, and then set the spacing using options under Grid.

To prevent you from inadvertently moving an element that you have positioned absolutely, you can lock it into position. After an element is locked, you can still nudge it using SHIFT+arrow keys.

To lock an element in position

  • Select the object, and then choose the Lock button in the Design toolbar.

Absolutely positioned elements are layered so you can overlap them. An element's layer is specified by its Z order style attribute. HTML elements that are not positioned absolutely are on layer zero. An element with a positive Z order value is in front of those elements. The lower the value, the closer the element is to the front. An element with a negative Z order value appears behind elements on the page that are not absolutely positioned.

To change an element's layer

  • Select the element, choose Z Order from the Format menu, and select one of the options from the following table to move the element toward the back or the front:
Option | Action
Bring to Front | Moves the element in front of all other elements in the same container. If the element has a negative Z order, assigns it the negative Z order value closest to zero.
Send to Back | Moves the element behind all other elements in the same container. If the element has a negative Z order, assigns it the negative Z order value furthest from zero.
Bring Forward | Moves this element in front of the element with the nearest zorder in the same container.
Send Backward | Moves this element behind the element with the nearest Z order in the same container.
Behind Text | Changes the Z order of the element to a negative number to put it behind text on the page. (Available in Design view only.)
Front of Text | Changes the Z order of the element to a positive number to put it in front of text on the page. (Available in Design view only.)

–or-

  • Select the element, and then in the Properties window set its Z order value (the .zorder style attribute). The Z order value of other absolutely positioned elements on the page is automatically adjusted. If you set a negative Z order value, the absolutely positioned element appears behind the HTML page.


Inserting Scrolling Text in Web Pages

You can add scrolling text to your page using a marquee control, which moves text that you specify across the page in ticker-tape fashion.

To insert scrolling text

  1. In Design view or Source view, select the text that you want to scroll.

    The text does not have to be in a paragraph by itself, but when the marquee is displayed, it will be on its own line in the browser window.

  2. From the HTML menu, choose Marquee.

  3. Select the marquee text, and then in the Properties window, set the following properties to determine how the text scrolls:
Property | Setting
behavior | SCROLL: scroll onto page, then off SLIDE: stop when text touches far edge ALTERNATE: bounce between edges
direction | LEFT or RIGHT, indicating where the scroll text should start from
loop | How many times to repeat, or -1 to repeat indefinitely
scrollamount | Number of pixels that text jumps each scroll increment. The lower this number, the more smoothly the text scrolls, but the more slowly it moves across the page.
scrolldelay | Number of milliseconds the marquee waits between scroll increments. The lower this number, the faster the text scrolls.
width | Width of the scroll area in pixels or as a percentage of screen width.


Inserting Links and Bookmarks in Web Pages

A link is a "hot" area (link) on your page that causes an action when the user clicks it. You can use links to:

  • Jump to another location, including a different Web page, a specific location (bookmark) on the current page, or a bookmark on another page.

  • Launch e-mail and prepare a message for the recipient you specify.

  • Download and open or run a document or other file.

  • Access other Internet resources using the FTP, gopher, TelNet, and WAIS protocols.

Links can jump from text, an image, or another HTML element such as a marquee. The link is typically marked in the browser with an alternate color and underlining depending on the user's settings for the browser.

To insert a link

  1. In Design view or Source view, select the text, image, or other element that you want to use as the link.

    Note You cannot select an element that is already part of another link or bookmark.

  2. From the HTML menu, choose Link.

  3. In the Hyperlink dialog box, select the protocol to use from the Type list, as described in the following table.
To create a link to | Select this protocol
Jump to another Web page | http:
Jump to a bookmark on the current page | (other). This leaves the protocol blank.
Download a file and open it | file:
Create a link that sends email | mailto:
Access other Internet resources | The protocol (such as ftp) that is required for that resource

  4. In the URL box, type the destination for the type of link you are creating, as described in the following table.
To create a link to | Specify this in the URL box
Jump to another Web page | The URL of the page to link to.
Jump to a bookmark on the current page | A hash mark (#) followed by the name of the bookmark (for example, #part2).
Jump to a bookmark on another page | The URL of the destination page, then add a hash mark (#), and then the name of the bookmark to jump to (for example, mypage.htm#part2).
Download a file and open it | The path or URL of the file.
Create a link that sends email | The full email address of the recipient (for example, ann@mycompany.com)

Tip You can specify a ToolTip for a link by setting the link's Title property in the Properties window.

You can insert bookmarks anywhere in the page.

To insert a bookmark

  1. In Design view or Source view, place the mouse pointer where you want the bookmark. Optionally, you can select text to specify as the name of the bookmark.

  2. From the HTML menu, choose Bookmark.

  3. In the Insert Bookmark dialog box, enter the name of the bookmark.


Creating Scripts in the HTML Editor

The HTML editor includes features that help you create scripts. You can create event handlers for elements on the page, which are scripts that run in response to actions such as when a user chooses a button, when a document first loads, or another event. You can also use editor features to create standalone script blocks to contain any script, not only event handlers.

Tip If you insert script into the body portion of a document, choose Show Details in the Design toolbar. This displays a glyph for the script when you are in Design view. Without the glyph, the script does not appear in Design view, and you might delete it accidentally.

To create event-handling scripts, you use the Script Outline window. The Script Outline window shows you all scriptable elements in your page, and for each element, the events you can write handlers for. The Script Outline window divides the elements and scripts into those that will run on the client and those that will run on the server.

In the editor, you write scripts in Source view. However, if you are working in Design view, you can start scripting for an element you are working with.

To start scripting from Design view

  • Double-click the element you want to write an event handler for, or right-click it, and then choose Edit Script.

    The editor switches to Source view. It also displays the Script Outline window and places the focus on the default handler for that element. If the element you clicked does not have an ID attribute, the HTML editor adds one.

With the Script Outline window displayed, you can create a skeleton event handler for any element on the page.

To create an event handler

  1. In the Script Outline window, expand the node of the element you want to write a handler for.

  2. Double-click the event you want to script.

When you double click the event name, the editor performs the following actions:

  • Creates or moves to one of the following script blocks at the top of the document, depending on where the script will run and what language it will be in:
    • clientEventHandlersJS

    • clientEventHandlersVBS

    • serverEventHandlersJS

    • serverEventHandlersVBS
  • Inserts a new, blank event-handling procedure for the element and event you specified.

  • If the script will be in Javascript, adds an event attribute (for example, onclick=) to the element.

  • Positions the insertion point at the second line of the new script, ready for you to enter commands.

The language used for an event handler skeleton depends on the default language for client or server script, as set in the Property Pages dialog box for the current document. For VBScript functions, the format is:

Sub elementID_event

End Sub

For JavaScript functions, the format is:

function elementID_event(){

}

When creating JavaScript event handlers, the editor also adds the following attributes to the HTML element itself:

event="return elementID_event()"

In addition to creating event handlers, you can create standalone script blocks. This is useful if you want to create procedures (subroutines or functions) called by other scripts, or if you want to create global script that runs as soon as the page is processed by the browser.

To create a standalone script block

  1. Switch to Source view.

  2. Move to the location in the document where you want the script to appear.

  3. From the HTML menu, choose Script Block, and then choose Client or Server.

    The HTML editor creates a <SCRIPT> block. If you choose Server, the script tag contains the attribute RUNAT=SERVER. The script block's LANGUAGE attribute is set to the default language for the client or server.


Applying Styles to HTML Text

In addition to simply formatting individual characters or paragraphs in your HTML document, you can apply styles, or predefined formatting instructions.

In the HTML editor, you can define and apply styles using the following techniques:

  • Reference a cascading style sheet (CSS). This technique is useful if you want to use the same styles for multiple documents.

  • Create a document-specific style block. This is similar to using a style sheet, but the style definitions apply only to that document.

  • Apply styles individually to elements such as paragraphs, or to collections of elements in divisions or spans.

Defining Styles

You can define styles by referencing an existing cascading style sheet (CSS).

To include a reference to a cascading style sheet

  1. If it does not already exist, create the style sheet you want to use and add it to your current project.

  2. Switch to Source view.

  3. From the Project Explorer, drag the style sheet to use into the head portion of the document (between the <HEAD> and </HEAD> tags.)

    Note Style sheet links must appear in the head, or they won't work.

You can also create a document-specific style block that defines the styles you want to use in that document. To do so, you must be familiar with the syntax of style definitions.

To create a document-specific style block

  1. Switch to Source view.

  2. In the header of the document (inside the <HEAD> block), create a style block that begins with <STYLE> and ends with </STYLE>.

  3. Inside the style block, enter style information using syntax such as the following:
    tag={style1: attribute;style2: attribute;...;}

    -or-

    tag.classname={style1: attribute;style2: attribute;...;}

    The first syntax is used to assign style attributes to all instances of a particular HTML tag. The second syntax is used to define classes, which is useful for assigning style attributes to any arbitrary span of text.

    For example, a simple style block might look like this:

    <STYLE>
H1={font-size: 14pt; font-weight: bold; font-family: sans-serif;)
P={font-size; 11pt; font-weight: bold; color: blue;)
SPAN.ProductName={font-weight: bold; color: red;}
</STYLE>

    Tip An easy way to create the style definitions in the style block is to use the CSS editor to create the styles, and then copy them from the Source view of that editor into the current page.

Applying Styles

You can apply styles in different ways:

  • Implicitly. If you have referenced a style sheet or included a STYLE block in the document, styles that match existing tags in your document apply automatically. For example, if your style sheet or style block defines the style H2 as being 14 point, bold, and sans-serif, then all paragraphs tagged with H2 will have those attributes (unless you override the attributes explicitly).

  • By applying a style class to an individual element, span, or division. The style sheet or style block must contain class definitions. A span of text differs from a division in that a division is always set off from the rest of the document as separate paragraphs.

  • By setting inline style properties for any HTML element. This technique does not reference any style sheet or style block. If the element's style is already defined in a style sheet or style block, setting inline style attributes overrides the inherited style.

To apply a style class or style to an element, span, or division

  1. Switch to Design view, and then select the element, span or division to style.

  2. Display the Properties window if it is not already visible (from the View menu, choose Properties). Make sure that the element you want to style is selected in the drop-down box at the top of the Properties window.

    Note The Properties window does not display style properties when you are in Source view.

  3. To apply a style class, enter the name of the class in the class box. To set an inline style, enter a value for that style.

    Tip Style attributes begin with a dot (for example, .fontSize).


Storing HTML Elements

You can use the Toolbox to store any selection from an HTML document — text, images, objects, and so on — to use again. Selections that you store on the Toolbox remain there until you remove them, so you can use them in the same document or in a different document.

To store elements on the Toolbox

  1. In the Toolbox, select the tab (or create a new one) where you want to store the elements.

  2. In the HTML editor, select the element or elements you want to store.

  3. Drag the selection to the Toolbox.

    When you drop the element, the Toolbox creates a new entry called HTML Fragment. To rename the entry, right-click it in the Toolbox and choose Rename.

When you store an element on the Toolbox, the editor copies the exact HTML text from your document. When you later drag the element from the Toolbox to another location or document, you might have to adjust the text that is created.


Adding Functionality to the HTML Editor

The HTML editor can be extended through the use of add-on Wizards. These wizards, which are available from Microsoft and from third parties, provide an easy-to-use interface for tasks not already built into the HTML editor. For example, one add-on Wizard might guide you through the steps for adding multimedia effects to your page. Another might allow you to check the spelling of your document.

The exact add-on wizards you can use depends on what you have installed. For information about installing an HTML Wizard, refer to the documentation that accompanies the wizard.

To run an add-on HTML editor wizard

  1. Select the text you want to work with.

  2. From the HTML menu, choose HTML Wizards.

  3. In the Wizards dialog box, select the wizard you want to run, and then choose OK.

For information about how to create HTML Wizards, see the Visual Studio Web site at Microsoft Visual Studio Web site.


Creating Divisions and Spans in an HTML Document

The HTML editor provides you with an easy way to insert divisions and spans in your HTML document. Divisions are sections of the document that allow you to define a collection of elements to which you want to apply attributes. A span is like a division, but a division is always set off from the rest of the document as a separate paragraph, while a span can include subset of a paragraph. In both divisions and spans, the elements included must be sequential in the document.

You can use divisions and spans to apply these types of attributes to collections of elements:

  • Style information You can define a division and then apply formatting information, including a style sheet class or a style attribute to all the elements enclosed in the division. For example, if you set the division's paragraph alignment or font, all the paragraphs in the division will reflect that setting.

  • Absolute positioning If you are working with a browser that supports Dynamic HTML (DHMTL), you can define a division, and then specify absolute positioning for the division. You can then position all the elements in the division together by simply moving the division.

Divisions appear in the HTML document as <DIV> and </DIV> tags. All the HTML elements between these two tags are considered part of the division. Spans appear between the <SPAN> and </SPAN> tags.

To create a division

  1. Switch to Design view.

  2. Select the portion of the HTML document that you want to include in the division. The division can include text as well as elements such as images and so on.

  3. From the HTML menu, choose Div.

  4. In the Insert Div dialog box, choose a positioning option:
    • Absolute Choose this option if you are using the division to contain a collection of elements to be positioned absolutely. Absolute positioning works only with browsers that support DHTML.

    • In-line Choose this option if you are using the division to apply styles and do not want to use position the division's elements absolutely.

Tip To make it easier to work with absolutely positioned divisions in Design view, choose the Visible Borders button from the Design toolbar.

To create a span

  1. Switch to Design view.

  2. Select the portion of the HTML document that you want to include in the span. The span can include text as well as elements such as images and so on.

  3. From the HTML menu, choose Span.

Tip To make it easier to work with spans in Design view, choose the Visible Borders button from the Design toolbar.

After you have defined a division or span, you can add elements to it.

To add elements to a division or span

  • In Design view, select the division or span, place the insertion point inside the division, and then add the element.


Creating and Editing Tables in the HTML Editor

The HTML editor provides tools that make it easy to create and edit tables in your HTML pages.

To create a table

  1. From the Table menu, choose Insert Table.

  2. In the Insert Table dialog box, set the number of rows and columns you want the table to include.

  3. Set any other table attributes you need, and then choose OK.

Tip If the table does not have a border, you can make it easier to work with in Design view by choosing the Visible Borders button in the Design toolbar.

Browsers do not display table cells that have no content. Therefore, the HTML editor puts a non-breaking space into each cell so that the table will be visible in Design view and Quick view. If you remove the non-breaking space and do not replace it with other text, the cell is collapsed.

To edit the contents of a cell

  • Place the insertion point in the cell and type. You can place the insertion point in a cell that is collapsed (because it has no content), but the insertion point will be very small until you have added content.

Note If you delete the contents of all cells in a row, the entire row is collapsed, and you will not be able to place the insertion point into the row at all. However, you can still edit the table in Source view.

You can add rows, columns, and cells to an existing table.

To add or delete rows, columns, and cells

  1. Place the insertion point into the row or column where you want to add.

    Note Placing the cursor inside a cell is sufficient to select that cell, column, or row. You do not need to select the entire contents of the cell, column, or row.

  2. From the Table menu, choose the appropriate command to add the element you want. New rows are added above the current row. New columns and cells are added to the left of the current cell.

You can also split or merge cells.

To split cells

  1. Place the cursor in the cell.

  2. From the Table menu, choose Split Cell.

    The current cell is split into two cells that fit within the existing column.

To merge cells

  1. Select text across the cells you want to merge. You do not need to select all the text in each cell. The cell is selected as long as at least one character in the cell is selected.

  2. From the Table menu, choose Merge Cells.

Some operations, such as setting properties or specifying absolute positioning, require that you select the entire table.

To select the entire table

  • Move the insertion point over the edge of the table until it turns to a move cursor, and then click.