Export (0) Print
Expand All
3 out of 5 rated this helpful - Rate this topic

Editing HTML Pages in Design View

Visual Studio .NET 2003

In Design view, the HTML Designer provides a rich variety of tools for creating, editing, formatting, and displaying Web elements and components. You can, for example, add elements to an HTML document or Web form simply by dragging icons from the Toolbox or Server Explorer onto the Design view editing surface. When CSS styles are enabled, you can use the Style Builder dialog box to format the items added.

The targetSchema property of an HTML or XML document determines which HTML items and formatting options are available in Design view. The pageLayout property determines how items can be positioned on the Design view editing surface. For more information on setting these properties to enable features in the Visual Studio .NET integrated development environment (IDE), see Setting the targetSchema Property of an HTML Document, Setting the pageLayout Property of an HTML Document, and Positioning HTML Elements in Design View.

To add an element or component to a Web page

  1. Open a document for editing in Design view, and place the insertion point at the desired location.
  2. Choose one of the following steps:
    • Select an icon in the Toolbox or Server Explorer and drag it onto the Design view editing surface. An instance of the item or component will be inserted into your document at the indicated position, and will have the indicated size.

      - or -

    • Double-click the desired icon in the Toolbox, or right-click on the desired node in Server Explorer and select Add to Designer. An instance of the item or component will be inserted into your document at or near the insertion point.

    For more information on adding Web elements and data components, see HTML Tab, Toolbox, Web Forms Tab, Toolbox, and Adding Items from Server Explorer.

    Note   When you drag an external element, such as an image or file, onto a page, the HTML Designer creates a reference to it in the parent project.

To format an HTML element

  1. Set the targetSchema property of your document to a Web browser that supports HTML 4.0 or later and CSS-P styles.
  2. Select the desired item either on the Design View editing surface or in the Document Outline window.
  3. Choose Build Style on the Format menu to open the Style Builder dialog box.

    For more information on applying CSS styles, see Building CSS Styles, Working with CSS Styles, Style Builder Dialog Box, and ASP.NET Server Controls and CSS Styles.

    Note   Formatting changes made in Design view modify the markup of your page. You can also make detailed adjustments to formatting by editing the properties of the selected element, or by editing its markup directly in HTML view. For more information, see HTML View, HTML Designer and Editing HTML.

To block format text or elements

  1. Place the cursor within the desired text or select the desired item, either on the Design View editing surface or in the Document Outline window.
  2. Select an option from the Block Format drop-down list on the Formatting toolbar.

    This inserts a new, unformatted HTML element around the selected text or item. The options available include:

    • Normal - removes any element previously inserted around the selected text or item, and replaces it with a new <P> paragraph element.
    • Formatted - inserts a new <PRE> element.
    • Address - inserts a new <ADDRESS> element.
    • Heading N - inserts a new <Hn> heading element.
    • Numbered List - inserts a new <LI> list item within an <OL> ordered list.
    • Bulleted List - inserts a new <LI> list item within a <UL> unordered list.
    • Directory - inserts a new <LI> list item within a <DIR> directory list.
    • Menu List - inserts a new <LI> list item within a <MENU> unordered list.
    • Definition Term - inserts a new <DT> term within a <DL> definition list.
    • Definition - inserts a new <DD> definition within a <DL> definition list.
    • Paragraph - inserts a new <P> paragraph element.

    You can then use CSS styles to further define the appearance and position of the elements inserted. For example, you might assign a certain font-size to all <H4> headings, or specify a default text-indent for <LI> list elements.

    For more information on using CSS styles, see the previous section "To format an HTML Element." For definitions of HTML elements and their CSS attributes, see DHTML References and CSS Attributes Reference.

To edit the properties of an HTML element

  1. Select the desired item on the Design view editing surface
  2. Do one of the following:
    • In the Properties window, edit the properties displayed for the selected item.

      - or -

    • Select Property Pages from the View menu (if available), and edit the properties displayed on the property page for the selected item.

To toggle markers for non-graphic HTML elements on and off in Design View

  • Select Details on the View menu, or click the Show Details icon on the Formatting toolbar.

    You can also use the Document Outline window to select items not displayed in Design view. For guidance, see Navigating in the Document Outline Window.

To make these markers display whenever you open a Web page in Design View

  1. Select Options on the Tools menu.
  2. Under the HTML Designer node, select Display.
  3. Under Display Options, select Show Details for Non-Visible Elements.
    Tip   Turn on Details while editing in Design View. This will keep you from inadvertently deleting non-graphic elements (for example, <DIV>, <SPAN>, <FORM>, or <SCRIPT>) from your page while editing. For more information, see Design View, HTML Designer.

To display or conceal the borders of tables and frames in Design View

  • Select Visible Borders on the View menu.

    This will display edges around tables and frames that would otherwise not appear.

To make these borders display whenever you open a Web page in Design View

  1. Select Options on the Tools menu.
  2. Under the HTML Designer node, select Display.
  3. Under Display Options, select Show Borders for Borderless Elements.

See Also

Clipboard Ring Tab, Toolbox | Inserting HTML Hyperlinks and Bookmarks in Design View | Positioning HTML Elements in Design View | Creating Scripts and Editing Event Handlers in HTML Designer | HTML Document Properties, Properties Window

Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2014 Microsoft. All rights reserved.