Demonstra Passo a passo: Básico edição de HTML no Visual Web Developer

Artigo
10/15/2014

A ferramenta de desenvolvimento para Web chamada Microsoft Visual Web Developer fornece uma experiência rica de edição HTML que permite a você trabalhar no modo WYSIWYG para visualizar páginas da Web e também permite que você trabalhe diretamente com a marcação HTML de modo a exercer um melhor controle.Esta explicação passo a passo apresenta os recursos de edição HTML do Visual Web Developer.

Tarefas ilustradas nesta explicação passo a passo incluem o seguinte:

Criação e edição HTML no modo Design.
Criação e edição HTML no modo Source.
Usando o modo divisão.
Uso das ferramentas de navegação para percorrer rapidamente suas marcas HTML.

Pré-requisitos

Para concluir esta explicação passo a passo, será necessário o seguinte:

Uma compreensão gerail do Visual Web Developer.

For an introduction to creating Web pages in Visual Web Developer, see Demonstra Passo a passo: Criando um Basic página da Web no Visual Web Developer.

In this walkthrough, you will work with a Web site and a single ASP.NET Web page that is similar to the one that is created in Demonstra Passo a passo: Criando um Basic página da Web no Visual Web Developer.Se você concluiu que explicação passo a passo, você pode usar esse site e página.

Criando o Site da Web e a Página

If you have already created a Web site in Visual Web Developer (for example, by completing Demonstra Passo a passo: Criando um Basic página da Web no Visual Web Developer), you can use that Web site and go to the next section.Caso contrário, crie um site e uma página novos, seguindo estas etapas.

Para criar um site do sistema de arquivos

Abra o Visual Web Developer.
Sobre o Arquivo menu, clicar Novo site.

The Novo site caixa de diálogo é exibida.
Em O Visual Studio installed templates, clicar Site da Web do ASP.NET.
Na caixa Location, digite o nome da pasta onde você deseja manter as páginas do site da Web.

Por exemplo, digite o nome da pasta C:\WebSites.
No Idioma lista, clicar na linguagem de programação que você prefere para trabalhr.
Clique em OK.

Visual Web Developer cria a pasta e uma nova página chamada Default.aspx.

Trabalhando no modo Design

Nesta parte da explicação passo a passo, você aprenderá como trabalhar no modo Design, o qual fornece uma visão tipo WYSIWYG da página.Você pode adicionar texto digitando, como você faria em um programa de processamento de texto.Você pode formatar texto diretamente com os comandos de formatação ou ao criar estilos in-line.

O modo Design exibe a página em uma forma que seja semelhante à como ele aparecerá em um navegador, com algumas diferenças.A primeira diferença é que em modo Design, o texto e elementos são editáveis.A segunda diferença é que para ajudá-lo a editar as páginas, o modo Design exibe alguns elementos e controles que não serão exibidos no navegador.Além disso, alguns elementos, como tabelas HTML, terão um processamento especial no modo Design que adiciona espaços para o editor.De forma geral, o modo Design ajuda a visualizar sua página, mas ele é não uma representação exata de como a página processada aparecerá em um navegador.

Para adicionar e formatar HTML estático no modo Design

Se você não estiver no modo Design, clique em Design, que está localizado no canto inferior esquerdo da janela.
Na parte superior da página, digite ASP.NET página da Web .
Realce o texto para selecioná-la e, em seguida, a Aplicação de estilo barra de ferramentas de clicarTítulo 1.
Posicione o ponteiro de inserção abaixo Página da Web do ASP.NET e, em seguida, digite This page is powered by ASP.NET.
Realce o texto, em seguida, sobre o Formato menu, clicar Novo estilo.

The Novo estilo caixa de diálogo é exibida.
clicar para marcar o Aplicar novo estilo à seleção do documento box.
selecionar uma fonte de família de fontes suspensa lista e clicar Aplicar.

A família de fontes é aplicada ao texto selecionado.
Em Categoria, clicar Bloqueare, em seguida, selecionar (valor) from the altura da linhalista suspensa de .Digite um valor para a altura da linha.
selecionar (valor) from the espaçamento entre letraslista suspensa de .Insira um valor de espaçamento entre letras.clicar Aplicar para ver os valores aplicados ao texto selecionado.
Clique em OK.

Exibindo informações de marcas

When you are working in Design view, you might find it useful to see the design surface tags, such as div and span, and others that do not have a visual rendering.

Para ver as marcas de superfície de design HTML no modo de Design

Sobre o Modo de exibição , aponte para Auxílios visuais, em seguida, clicar controles do ASP.NET não visuais. .

O designer exibe símbolos de parágrafos, quebras de linha e outras marcas que não processam texto.

Adicionar controles e elementos

Em modo de Design, você pode arrastar controles da caixa de ferramentas para a página.Você pode adicionar alguns elementos, como tabelas HTML, usando uma caixa de diálogo.Nesta seção, você irá adicionar alguns controles e uma tabela para que você tenha elementos com os quais trabalhar posteriormente na explicação passo a passo.

Para adicionar controles e uma tabela

Posicione o ponteiro de inserção à direita da marca de fechamento de parágrafo de This page is powered by ASP.NET. e pressione ENTER.
From the Standard group in the Toolbox, drag a TextBox control onto the page.

Observação:

Você também pode adicionar um controle clicando duas vezes nele.
Arraste um controle Button para a página.

The TextBox and Button controls are ASP.NET Web server controls, not HTML elements.
No menu Tabela, clique em Inserir Tabela .

A caixa de diálogo Insert Table aparece.
Clique em OK.

A caixa de diálogo Insert Table fornece opções para configurar a tabela que você está criando.Entretanto, para esta explicação passo a passo, você pode usar um layout padrão de tabela.

Observação:
Você também pode adicionar um controle clicando duas vezes nele.

Criar hyperlinks

O modo Design fornece construtores e outras ferramentas para ajudar a criar elementos HTML que requerem configurações de propriedades.

Para criar um hyperlink

No texto This page is powered by ASP.NET., realce ASP.NET para selecioná-lo.
No menu Format, clique em Convert to Hyperlink.

A caixa de diálogo Hyperlink aparece.
No URL caixa, tipo https://www.asp.NET.
Clique em OK.

Definindo propriedades na janela Properties

Você pode alterar o aspecto e o comportamento de elementos na página através da configuração de valores em Properties.

Para definir propriedades utilizando a janela Properties

Click the Button control that you added in "Adding Controls and Elements," earlier in this walkthrough.
In Properties, set Text to Click Here, ForeColor to a different color, and Bold to true.
Coloque o ponto de inserção no hiperlink ASP.NET que você criou na seção anterior.

Notice that in Properties, the HRef property for the a element is set to the URL that you provided for the hyperlink.

Testando a Página

Você pode ver os resultados da sua edição exibindo a página no navegador.

Para iniciar a página externamente no navegador

Clique com o botão direito do mouse na página e clique em View in Browser.
- Se você for solicitado para salvar suas alterações, clique em Yes.
O Visual Web Developer inicia o servidor Web Visual Web Developer, que é um servidor Web local que você pode usar para testar páginas sem usar o IIS.

Alterar modo de exibição padrão

Por padrão, o Visual Web Developer abre novas páginas no modo de exibição Source.

Para alterar o modo de exibição de páginas padrão para o modo Design

No menu Tools, clique em Options
Na caixa de diálogo Opções, clicar Gerale, em Iniciar páginas em, clicar modo de modo de exibição de Design.

Observação:
Você pode executar páginas de várias maneiras.Se você pressionar CTRL+F5, Visual Web Developer executa a ação inicial que esteja configurada na página de propriedades para Iniciar Opções.A opção de início padrão para CTRL+F5 é executar a página atual; ou seja, a página que está atualmente ativa no modo de exibição Source ou Design.Você também pode executar páginas no depurador.Para obter mais informações, consulte Passo-a-passo: Depuração de Páginas da Web no Visual Web Developer.

Você pode executar páginas de várias maneiras.Se você pressionar CTRL+F5, Visual Web Developer executa a ação inicial que esteja configurada na página de propriedades para Iniciar Opções.A opção de início padrão para CTRL+F5 é executar a página atual; ou seja, a página que está atualmente ativa no modo de exibição Source ou Design.Você também pode executar páginas no depurador.Para obter mais informações, consulte Passo-a-passo: Depuração de Páginas da Web no Visual Web Developer.

Trabalhando no modo de exibição Source

Source view lets you edit the markup of the page directly.The Source view editor gives you many features that help you as you create HTML and ASP.NET controls.You can use the Toolbox in Source view just as you do in Design view to add new elements to the page.

Para adicionar elementos no modo Source

Mude para o modo Source clicando em Source que está localizado no canto inferior esquerdo da janela.

The controls that you have added are created as <asp:> elements.For example, the Button control is the <asp:button> element.The property settings that you made are preserved as attribute settings in the <asp:button> tag.
From the HTML group in the Toolbox (not the Standard group), drag a Table control onto the page and place it just above the closing </form> tag.

O editor também ajuda quando você digita marcações manualmente.Por exemplo, o editor fornece opções sensíveis ao contexto concluindo marcas e atributos HTML conforme você digita.O editor também fornece informações de aviso e erro na marcação sublinhando marcações questionáveis com uma linha ondulada.Os erro e informações de aviso estão disponíveis posicionando o mouse sobre o texto da marcação.

Para editar o HTML no modo Source

Position the insertion point above the closing </form> tag, and then type a left angle bracket (<).

Observe que o editor oferece a você uma lista das marcas que sejam apropriadas no contexto atual.
Realce a para selecioná-lo e pressione a BARRA DE ESPAÇOS.

O editor exibe uma lista de atributos que sejam apropriados para um marca de âncora.
Na lista, clique em href e digite um sinal de igualdade e aspas duplas. (=")

O editor oferece uma lista de páginas atualmente disponíveis para vincular ao link e uma opção para abrir a caixa de diálogo Homepicker.
In file list, double-click Default.aspx, press the SPACEBAR, and then type a right angle bracket (>) to close the tag.

The editor inserts a closing </a> tag.
Termine o elemento âncora para que ele seja linkado à página Default.aspx usando o texto Home e se pareça com o a seguir:
```
<a href="Default.aspx">Home</a>
```
Position the insertion point in the a tag.

Observe que Properties exibe os atributos para a marca.
Em Properties, clique no botão reticências (…) da propriedade HRef.

A caixa de diálogo Select Project Item aparece.

Agora você pode selecionar uma página no site da Web atual como a página de destino.If you do not have other pages in the Web site to choose from, close the Select Project Item dialog box and type a favorite URL into the Href box of the Properties window.
Posicione o ponto de inserção logo acima do fechamento de </form>marca e, em seguida, digite <inválido>.

O editor sublinha a marca com uma linha ondulada, indicando que a marca não é uma marca HTML reconhecida.
Remova a marca que você criou na etapa anterior.

Examinando formatação HTML

Um recurso importante do designer de página é que ele preserva a formatação HTML que você aplica à página, a menos que você especifique explicitamente que o editor reformate o documento.

Para examinar formatação HTML

Reformat the attributes for the Button control by aligning the attributes so that the declarative syntax looks like the following:
```
<asp:Button
    id="Button1"        Font-Bold="True"    ForeColor="Blue"    Text="Click Here" />
```
Observe que após você identar o primeiro atributo, se você pressionar ENTER na marca, as linhas subsequentes são identadas correspondentemente.
Alternar para modo Design.
Right-click the new Button control, and then click Copy.
Position the insertion point below the new Button control, right-click, and then click Paste.

This creates a button with the ID of Button2.
From the Standard group in the Toolbox, drag a third Button control onto the page, which creates <Button3>.

Alterne para o modo Source..

Notice that <Button2> is formatted exactly the way that you formatted <Button1>.On the other hand, <Button3> is formatted using the default formatting for asp:button elements.

Observação:
Para obter mais informações sobre como personalizar a formatação de elementos individuais, consulte Demonstra Passo a passo: Avançadas de edição de HTML no Visual Web Developer.

Edit the document so that <Button1> and <Button2> are on the same line without a space between them:
```
<asp:Button ID="Button1"  Font-Bold="True" 
ForeColor="Blue" Text="Click Here" /><asp:Button ID="Button2" 
 Font-Bold="True" ForeColor="Blue" Text="Click Here"/>
```
The elements can wrap, but the end of <Button1> (that is, />) must be followed immediately by the beginning of <Button2> (that is <asp:Button ID=).
Alternar para modo Design.

Notice that <Button1> and <Button2> are right next to each other without a space between them.
Alterne para modo Source
No menu Edit, clique em Format Document.

The document is reformatted, but <Button1> and <Button2> remain on the same line.Se fosse para o editor separar os botões, ele deveria introduzir um espaço durante o processamento.Portanto, o editor não altera a formatação que você tenha criado.

Trabalhando no modo divisão

Você pode ver o modo de exibição de Design e exibir janelas ao mesmo time usando o modo divisão de fonte.

Para exibir uma página no modo divisão

Alterne para o Dividir exibição clicando em Dividir, que está localizado no canto inferior esquerdo da janela.

Navegando entre elementos

A medida que as páginas se tornam maiores e mais complexas, é útil poder localizar marcas rapidamente e reduzir a confusão na página.O Visual Web Developer fornece as seguintes ferramentas para ajudá-lo com essas tarefas quando estiver trabalhando no modo Source:

Document Outline, que fornece uma versão completa do documento.
Tag Navigator, que fornece informações sobre a marca atualmente selecionada e onde ela está na hierarquia da página.

Para iniciar, adicione mais elementos à página para que você se torne capaz de examinar recursos de navegação.

Para adicionar elementos

Alterne para o modo de exibição Design.
From the HTML group in the Toolbox, drag a Table control into a cell of the table that you created in "Working in Source View," earlier in this walkthrough.
From the Standard group in the Toolbox, drag a Button control into the middle cell of the nested table.

Com vários elementos aninhados na página, você pode ver como Document Outline fornece uma navegação rápida a qualquer marca na página.

Para navegar com Document Outline

Alterne para o fontemodo de exibição de .
No menu View, clique em Document Outline.
Em Document Outline, clique em Button4.

No editor, a <Button4>controle que você adicionou no procedimento anterior é selecionado.

O Tag Navigator fornece informações sobre a marca atualmente selecionada e onde ele está na hierarquia da página.

Para navegar com o Tag Navigator

Position the insertion point in the <asp:button> tag.

Notice the tag navigator at the bottom of the window, which shows the <asp:button> tag and its parent tags.O Tag Navigator inclui a identificação do elemento (ID), se houver, para que você possa identificar qual elemento está sendo exibido.The tag navigator also displays the assigned cascading style sheet, if any, that was set with the Class attribute.
In the tag navigator, click the <table> tag that is closest to the <asp:button#Button4> tag.

The tag navigator moves to the inner <table> element and selects it.

In the tag navigator, click the <td> tag to the left of the selected <table>.

A célula inteira que contém a tabela aninhada é selecionada.

Observação:
Você pode clicar para selecionar a marca ou seu conteúdo usando a lista drop-down da marca no Tag Navigator.Por padrão, clicar em uma marca no Tag Navigator seleciona a marca e seu conteúdo.

Você também pode usar o Tag Navigator para ajudar você a mover ou copiar elementos

Para mover ou copiar elementos usando o Tag Navigator

Using the tag navigator, select the <tr> tag that contains <Button4>.
Pressione CTRL+C para copiar a marca.
Use o Tag Navigator para movê-la para a tabela externa.
In Source view, place the insertion pointer between the <table> tag and the first <tr> tag.
Pressione CTRL+V para colar a linha copiada para a tabela.
Alternar para modo Design.

Notice that the new row has been added, including a Button control.

Formatação de texto

A barra de ferramentas Formatting aplica estilos in-line para a maioria das configurações.Bold and italic formatting is applied by using the b and i tags.Paragraph formatting is applied a block tag, such as p (for normal), pre (for formatted), and so on.Alinhamento de parágrafo é aplicado usando estilos in-line de acordo com os padrões XHTML 1.1.
The designer also lets you create a style block and a link to a cascading style sheet.Para obter mais informações, consulte Passa a Passo: Criando e Modificando Arquivos CSS.
Por padrão, o editor cria marcação que seja compatível com o padrão XHTML 1.1 e converte todos os nomes de marca HTML em minúsculas, mesmo se você digitá-los em maiúsculas.O editor também circunda valores (propriedade) de atributos com aspas.Para obter mais informações, consulte Demonstra Passo a passo: Avançadas de edição de HTML no Visual Web Developer.

Para alterar a validação de marcação padrão

No modo Source, clique na página com o botão direito do mouse e clique Formatting and Validation.
No Opções diálogo caixa, expandir Editor de texto HTMLe, em seguida, clicar Validação.
Na lista Target, digite um tipo de validação.

Próximas etapas

Esta explicação passo a passo mostrou uma visão geral dos recursos HTML do editor de páginas da Web.Isso inclui como criar HTML no modo Design e no modo Source, formatação básica e navegação.Convém aprender mais sobre os recursos de edição do Visual Web Developer.Por exemplo, você pode querer fazer o seguinte:

Aprenda sobre os recursos adicionais do editor HTML, incluindo opções de formatação personalizadas, tópicos e validação de HTML.Para obter mais informações, consulte Demonstra Passo a passo: Avançadas de edição de HTML no Visual Web Developer.
Aprenda como trabalhar com estilos de folhas de estilos em cascata.Para obter mais informações, consulte Passa a Passo: Criando e Modificando Arquivos CSS.

Consulte também