O Modo Design

Artigo
08/25/2010

O modo Design exibe páginas da Web do ASP.NET, páginas mestras, páginas de conteúdo, páginas HTML e controles de usuário usando um modo de exibição próximo a WYSIWYG.O modo Design permite a você adicionar elementos de texto e, em seguida, posicioná-los e definir seus tamanhos e propriedades usando menus especiais ou a janela Properties.

Quando você adiciona elementos à página, Visual Web Developer cria marcação correspondente que você também pode edição na visualização código-fonte. Para obter detalhes, consulte:Modo de exibição Source.

Para alternar para o modo Design, clique na guia Design na parte inferior da janela do Designer de HTML.

Observação:
modo de modo de exibição de Design exibe somente o corpo de um documento — a parte entre o <body> e </body> Rótulos de formatação. Embora você possa edição algumas propriedades do head elemento, sistema autônomo o título do documento, usando o propriedades do documento janela, você deve comutador para modo de exibição de código fonte para edição propriedades dos elementos não dentro de body elemento.

modo de modo de exibição de Design exibe somente o corpo de um documento — a parte entre o <body> e </body> Rótulos de formatação. Embora você possa edição algumas propriedades do head elemento, sistema autônomo o título do documento, usando o propriedades do documento janela, você deve comutador para modo de exibição de código fonte para edição propriedades dos elementos não dentro de body elemento.

Como o Modo Design difere da Visualização em um Navegador da Web

O modo Design fornece a você um modo de exibição próximo a WYSIWYG editável que mostra o aspecto que a página terá em um navegador.No entanto, o modo Design não exibirá uma correspondência exata de como a página será processada e você sempre deve testar a página em um navegador (ou em vários navegadores) para certificar-se de que a página será exibida da forma como você a projetou.

Um documento exibido no modo Design difere daqueles exibidos em um navegador da Web nos seguintes aspectos:

A superfície de design é editável.
Alguns elementos são exibidos em modo Design para fins de edição, mas não são processados no navegador, como controles da fonte de dados.A maioria dos controles que aparecem somente enquanto estão sendo editados são exibidos como caixas cinzas no modo Design.
Alguns caracteres e parágrafos de formatação podem aparecer de forma diferente do que seria exibido um navegador específico (se o navegador da Web implementa a formatação de forma diferente do modo Design).
Opcionalmente, você pode fazer o editor exibir caixas, símbolos e ícones para marcar os controles do servidor.Para obter detalhes, consulte:Exibição, Designer de HTML, caixa de diálogo Opções.
Os hiperlinks não são funcionais.
Scripts de cliente não são executados.
Código do servidor não é executado.
Elementos que oferecem suporte a texto alternativo (como imagens) não exibem esse texto alternativo em dicas de ferramenta quando o ponteiro passa sobre eles.

Exibindo Elementos Não Visíveis

Para ajudar você editar uma página, o modo Design exibe determinados elementos, como campos ocultos, que normalmente não estariam visíveis no navegador.O modo Design também exibe caixas cinzas ou outras representações dos controles do servidor ASP.NET, como controles da fonte de dados que não processam a marcação em tempo de execução.

Além disso, você pode optar por exibir bordas e símbolos que podem ajudar a trabalhar com elementos e marcas na página.Para obter detalhes, consulte:Como: Exibir informações Oculto no modo de exibição Design.

Exibindo caracteres nulo

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

Posicionando Elementos no Modo Design

Elementos na página são fisicamente dispostos a partir do topo até a parte inferior.Por padrão, quando a página é processada pelo navegador, os elementos são processados na mesma ordem de cima para baixo.Você também pode posicionar elementos em duas dimensões, com coordenadas verticais e horizontais, em qualquer lugar na página.Esta opção de layout tira proveito das opções de posicionamento disponíveis através de estilos.Para obter detalhes, consulte:Posicionando Elementos no Modo Design.

Navegando no Modo Design

Para ajudá-lo a mover-se entre elementos e selecioná-los, o modo Design fornece as seguintes opções:

Marca de navegação.A marca de navegação exibe o elemento atual, juntamente com a hierarquia de marcas ao qual ele pertence.Você pode usar a marca de navegação para ver qual elemento possui o foco e para mover do elemento atual para um elemento superior na hierarquia.Para obter detalhes, consulte:Navegação por Marcas no Editor HTML do Visual Web Developer.
Estrutura de tópicos do documento.A janela Document Outline possibilita a você localizar e selecionar todos os elementos dentro de um documento, incluindo aqueles que não são exibidos.Para obter detalhes, consulte:Como: Navegar no Editor HTML no Visual Web Developer.
Janela Properties.Quando você seleciona um elemento da lista suspensa no topo da janela Properties, o editor seleciona o mesmo elemento no documento.

Adicionando Elementos

Você pode adicionar elementos a uma página em modo Design das seguintes formas:

Arrastando-os a partir da Toolbox.
Clicando duas vezes no elemento na Toolbox, o que irá inserir o elemento no local do documento onde se encontra o ponto de inserção.
arrastar-os de outro documento em aberto no Visual Web Developer.
Arrastando-os a partir do Solution Explorer.Isso é útil, principalmente, para adicionar controles de usuário e referências a folhas de estilo para a página.
Digitando o texto diretamente na página.

Marcas Inteligentes no Modo Design

Em modo Design, muitos controles do servidor ASP.NET exibem uma marca inteligente (smart tag) que oferece acesso rápido às configurações e às ações usadas com mais frequência para configurar o controle.Por padrão, a marca inteligente é exibida quando você adiciona um controle à página pela primeira vez.Você também pode exibir a marca inteligente a qualquer momento usando o menu de atalho ou clicando em seu símbolo.

Expressões em modo de exibição de Design

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

Atualizando o Designer

Quando você alterna do modo de fonte para o modo de modo de exibição de Design, talvez seja necessário atualizar o designer para ver certos tipos de alterações de arquivo.Por exemplo, código do tema é analisado, não compilado; portanto, quaisquer alterações feitas em código de tema no modo fonte exigem uma atualização antes de ver no designer.

Para atualizar o designer, você pode realizar uma das seguintes opções:

Clicar com o botão direito do mouse na janela de design e, em seguida, clicar em Refresh.
No menu View, clicar em Refresh.

Consulte também