O Modo Design

Artigo
08/01/2011

Design view displays ASP.NET Web pages, master pages, content pages, HTML pages, and user controls using a near-WYSIWYG view. Design view allows you to add text and elements and then position and size them and set their properties using special menus or the Properties window.

Quando você adiciona elementos à página, Visual Web Developer cria a marcação correspondente, você também pode editar no modo de origem. For details, see Modo de exibição Source.

To switch to Design view, click the Design tab at the bottom of the HTML Designer window.

Dica

Modo Design exibe somente o corpo de um documento — a parte entre as <body> e </body> marcas.Embora você possa editar algumas propriedades da head elemento, como, por exemplo, o título do documento, usando o Propriedades de documento janela, você deve alternar para modo de exibição de fonte para editar as propriedades dos elementos não dentro de body elemento.

How Design View Differs from Viewing in a Web Browser

Design view gives you a near-WYSIWYG editing view of what your page will look like in a browser. However, Design view is not an exact match for how the page will be rendered, and you should always test the page in a browser (or in multiple browsers) to be sure the page will appear as you have designed it.

A document displayed in Design view differs from one displayed in a Web browser in these ways:

The design surface is editable.
Some elements are displayed in Design view for editing purposes but are not rendered in the browser, such as data source controls. Most controls that appear only while being edited are rendered as gray boxes in Design view.
Some character and paragraph formatting might appear differently than in a specific browser (if the Web browser implements formatting differently than Design view).
Optionally, you can have the editor display boxes, symbols, and icons to mark server controls. For details, see Exibição, o Designer de HTML, caixa de diálogo Opções.
Hyperlinks are not functional.
Client scripts do not run.
Server code does not run.
Elements that support alternate text (such as images) do not display this alternate text in ToolTips when the pointer passes over them.

Displaying Non-Visible Elements

To help you edit a page, Design view displays certain elements, such as hidden fields, that would normally not be visible in the browser. Design view also displays gray boxes or other representations of ASP.NET server controls, such as data source controls, that do not render markup at run time.

In addition, you can choose to display borders and symbols that can help you work with elements and tags on the page. For details, see How to: Display Hidden Information in Design View.

Exibindo caracteres nulos

No modo Design, quando é usado um modelo que contém um caractere nulo, os caracteres após o caractere nulo são truncados. Nenhum dado é perdido, mas o modo de exibição de Design não mostra os caracteres em um modelo que seguem um caractere nulo.

Positioning Elements in Design View

Elements in the page are physically laid out top to bottom. By default, when the page is rendered to the browser, the elements are rendered in the same top-to-bottom order. You can also lay out elements two-dimensionally, positioning elements with horizontal and vertical coordinates anywhere on the page. This layout option takes advantage of the positioning options available through styles. For details, see Posicionando Elementos no Modo Design.

Navigating in Design View

To help you move between elements and select them, Design view provides these options:

Tag navigator. The tag navigator displays the current element, along with the hierarchy of parent tags to which it belongs. You can use the tag navigator to see which element has the focus, and to move from the current element to an element higher in the hierarchy. For details, see Navegação por marcas no Editor HTML do Visual Web Developer.
Document outline. The Document Outline window makes it possible for you to locate and select all elements within a document, including those that are not displayed. For details, see Como: navegar no editor HTML do Visual Web Developer.
Properties window. When you select an element from the drop-down list at the top of the Properties window, the editor selects that element in the document.

Adding Elements

You can add elements to a page in Design view in these ways:

Drag them from the Toolbox.
Double-click the element in the Toolbox, which inserts the element at the current location of the insertion point in the document.
Arraste-os de outro documento aberto no Visual Web Developer.
Drag them from Solution Explorer. This is primarily useful for adding user controls and style sheet references to the page.
Type text directly into the page.

Smart Tags in Design View

In Design view, many ASP.NET server controls display a smart tag that offers quick access to the settings and actions most often used to configure the control. By default, the smart tag is displayed when you first add a control to the page. You can also display the smart tag at any time using the shortcut menu or by clicking its symbol.

Expressões no modo Design

No modo Design, você não pode usar o Propriedades janela para alterar os valores de expressão. Por exemplo, se você atribuir uma expressão para um controle no modo de exibição Source, você não pode alterar o valor dessa expressão no modo Design. Desde que o valor da expressão for calculado, você deve usar o modo de exibição de fonte para alterar a expressão.

Refreshing the Designer

Quando você alterna do modo de exibição de origem para o modo Design, talvez você precise atualizar o designer para ver determinados tipos de alterações de arquivo. Por exemplo, código tema é analisado, não compilado. Portanto, quaisquer alterações feitas no código tema no modo de exibição Source exigem uma atualização, antes que você pode vê-los no designer.

To refresh the designer, you can do one of the following:

Right-click the Design window and click Refresh.
On the View menu, click Refresh.

Consulte também

Compartilhar via