Demonstra Passo a passo: Avançadas de edição de HTML no Visual Web Developer
A ferramenta de desenvolvimento Microsoft Web Visual Web Developer fornece uma experiência de edição de HTML valiosa para criar páginas da Web.Esta explicação passo a passo apresenta alguns dos recursos de edição de HTML mais avançados do Visual Web Developer.
.gif "Observação") Observação: |
|---|
For an introduction to HTML editing, see Demonstra Passo a passo: Básico edição de HTML no Visual Web Developer. |
Tarefas ilustradas nesta explicação passo a passo incluem o seguinte:
Especificar opções de como o editor de HTML formata elementos na página.
Selecionar opções para que o editor de HTML que você criar seja compatível com navegadores específicos.
Estruturar sua página — ou seja, criar regiões recolhíveis no editor para reduzir a aglomeração.
Pré-requisitos
A fim de concluir este explicação passo a passo, será necessário:
- Uma compreensão geral de como trabalhar no Visual Web Developer.
For an introduction to Visual Web Developer, see Demonstra Passo a passo: Básico edição de HTML no Visual Web Developer.
Criando o Site da Web e a Página
If you have already created a Web site in Visual Web Developer (by completing Demonstra Passo a passo: Básico edição de HTML no Visual Web Developer), 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 , aponte para Novo e, em seguida, clicar Site da Web.
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.
Observação:By default, Visual Web Developer creates ASP.NET Web pages using the code-behind model.Para obter mais informações, consulte Modelo de código de página Web do ASP.NET.In this walkthrough, you will not be using the code-behind page.
Formatação de marcação
O editor de HTML fornece uma variedade de opções para ajudá-lo a formatar a marcação nas suas páginas de acordo com suas próprias preferências.Opções de formatação incluem o seguinte:
Se nomes de marcas e atributos estão em letras maiúsculas ou minúsculas.Você pode especificar opções separadamente para marcas HTML e controles de servidor Web do ASP.NET.
Se atributos são adicionados ao colocá-los entre aspas.
Se elementos são fechados automaticamente pelo editor.Choices include creating self-closing tags (for example, <br />), creating opening and closing tags (<p></p>), and automatically inserting closing tags.
Como elementos filhos de uma marca são recuados.
Onde quebras de linha são posicionadas ao redor de marcas.
Independentemente de quais opções de formatação você definir, um recurso importante de formatação HTML é que você tem controle final sobre o layout e aparência da marcação na página.Você pode formatar elementos manualmente (por exemplo, por recuá-los), e o editor deixa a formatação como está a menos que você explicitamente faça uma solicitação para que a marcação seja reformatada.
Nesta parte da explicação passo a passo, você irá explorar diferentes opções de formatação e ver o efeito das diferentes configurações.Você também aprenderá como aplicar formatação à página inteira ou a uma seleção dentro da página.
| Observação: |
|---|
Esta explicação passo a passo examina somente os recursos de formatação que são exclusivos para trabalhar com HTML.Como um editor de texto do Visual Web Developer, o editor de HTML também suporta várias opções que se aplicam a toda edição de texto, tais como definir o tamanho da guia e quebra automática de linha.For information about general text editing options, see Edição de texto, código e marcação. |
Nesta parte da explicação passo a passo, você irá adicionar HTML simples à página, alterar opções de formatação, e depois adicionar mais HTML.Isso ilustra como alterar as configurações afeta a maneira como o HTML é formatado.
Para adicionar elementos HTML que possuem opções de formatação padrões
Alternar para modo Design.
Sobre o Tabela menu, clicar Inserir tabelae, em seguida, clicar OK.
No altere qualquer uma das configurações padrões na caixa de diálogo.
O designer cria uma tabela HTML com duas colunas e duas linhas.
Abaixo da tabela, clique na página.
Press ENTER several times to create some blank space, and then from the HTML group in the Toolbox, drag an Image control onto the page.
Alterne para modo de origem.
Você verá que o <table>e <img> elementos foram inseridos na página.
Por padrão, o designer cria elementos nos quais os nomes de marca e atributo são minúsculos e atributos são incluídos entre aspas.
Você pode agora alterar as opções de formatação
Para alterar as opções de formatação e validação
No menu Tools, clique em Options.
clicar Editor de texto, expandir HTMLe, em seguida, clicar Validação.
No Destino clicarExtensible HTML 1.0 Transitional.
Clique em Format.
Você pode conjunto algumas opções separadamente para Rótulos de servidor (controles de servidor ASP.NET) e cliente Rótulos (elementos HTML), clicando no Opções específicas de marca botão.
Na lista Client tag, clique em Uppercase.
Desmarque as caixas de seleção Insert attribute value quotes when formatting e Insert attribute value quotes when typing.
Clique em OK para retornar ao editor.
Observe que, embora você tenha alterado as opções de formatação, a marcação existente na página não é alterada.
Você pode agora adicionar novos elementos.
Para adicionar elementos HTML usando as novas opções de formatação
No modo de exibição fonte, role até a parte inferior da página.
From the HTML group in the Toolbox, drag a Table control onto the page and position it above the </form> tag.
This time, the tags in the <TABLE> element are in uppercase letters.
Below the table that you just created, position the insertion point, and then type a right angle bracket (<) to start a new tag.
Uma lista aparece na qual todos os nomes são oferecidos com letras maiúsculas, porque esta é a opção que você definiu para a formatação.
Na lista, dê um clique duplo em IMG, e depois pressione a BARRA DE ESPAÇO.
A list of attributes for the <img> tag appears.Os atributos estão em letras minúsculas, porque quando você definiu opções de formatação, você deixou Client attributes como a configuração padrão para Lowercase.
Em Properties, conjunto Src como elemento elemento gráfico.gif, que é um nome de arquivo elemento gráfico e certifique-se de que a marca agora seja semelhante à seguinte fictício:
<IMG src=graphic.gifPorque você desativou a opção Insert attribute value quotes when typing no procedimento anterior, o editor não coloca o atributo entre aspas automaticamente.
Observação:O editor insere aspas, independentemente da configuração de opções, se o atributo exigi-las, como quando um valor de atributo contém um espaço.
Digite uma barra / diagonal (/) e um colchete angular direito (>) para fechar o<img> marca.
Como observado anteriormente nesta seção, as opções de formatação que você definiu não foram aplicadas à marcação existente na página.Entretanto, se você desejar, você pode aplicar configurações de formatação à página ou a elementos individuais na página.
Para aplicar formatação a elementos existentes
No modo Source, realce para selecionar a primeira tabela que você criou.
Sobre o edição menu, point to Avançado e, em seguida, clicar Seleção de formato.
Os nomes de marcas são alterados para maiúsculos.
Observação:O editor não remove aspas, mesmo que você altera a configuração de opção.Da mesma forma, o editor não altera a finalização das marcas existente, mesmo que você altere a opção de como fechar marcas.
Você pode ver este exemplo de como a formatação funciona no editor de HTML.Quando você usa ferramentas de edição, tais como Toolbox ou Properties, para editar elementos, o editor usa o conjunto atual de opções de formatação para gerar a marcação.Entretanto, o editor não altera nenhuma marcação existente.Se você quiser aplicar novas opções de formatação à marcação existente, você pode aplicá-las manualmente utilizando os comandos de menu Edit.
Configuração de opções de formatação de marcas
As opções de formatação que você trabalhou até este ponto aplicam-se a todos os elementos na página.Se você desejar, você também pode especificar opções de formatação para marcas individuais.Isto é útil se você usa frequentemente determinadas marcas e deseja usar uma formatação não padrão para essas marcas.Formatação por marca permite que você defina as seguintes opções de formatação:
Como as marcas são fechadas — ou seja, não fechadas, autoterminadas, ou com uma marca de fechamento separada.
Como quebras de linha são usadas fora e dentro de marcas.
Como elementos filhos de uma marca são recuados.
Observação:Regras de formatação específicas de marcas que você especificar podem ser substituídas pela regra que o editor de HTML não alterará o processamento de marcas.Se uma regra de formatação de marca alterasse a maneira como uma marca é processada, a regra é ignorada.
Nesta parte da explicação passo a passo, você irá definir várias opções de formatação de marca e ver como o editor funciona com elas.Up to this point, you have worked with HTML elements, such as the <table> element.Agora você irá trabalhar com alguns controles de servidor ASP.NET, para que você possa ver que opções de formatação são aplicadas igualmente a controles e elementos
Você irá iniciar definindo algumas opções que se aplicam a todas as marcas de um determinado tipo.Você pode definir opções para os seguintes tipos de elementos:
HTML elements that do not have content, such as br and input.
HTML elements that can have content, such as table and span.
Server elements (asp:) that cannot have content, such as asp:image.
Server elements that can have content, such as asp:textbox.
.gif "Observação de segurança") Observação de segurança: |
|---|
A TextBox control accepts user input, which is a potential security threat.Por padrão, páginas Web ASP.NET validam se as entradas de usuário não incluem scripts ou elementos HTML.Para obter mais informações, consulte Visão Geral de Scripts Maliciosos. |
Para a primeira parte desta seção, você irá adicionar uma tabela HTML.Depois você irá alterar as regras de formatação de marca para elementos de tabela e reformatar o documento para ver o efeito de se alterar a regra de formatação.
Para definir regras de formatação de marca para uma tabela HTML
In Source view, in a blank part of the window, right-click, and then click Formatting and Validation.
A caixa de diálogo Options aparecerá com as opções de formatação que você definiou na seção anterior.
Na lista Client Tag, clique em Lowercase para redefinir a formatação de marcas de cliente.
Clique OK para fechar a caixa de diálogo Options.
From the HTML group in the Toolbox, drag a Table control onto the page.
O editor cria um <table> elemento tem duas linhas)<tr> elementos) e duas células ()<td> elementos) em cada linha. Cada marca está em uma linha separada:
<table> <tr> <td> </td> </tr>Em uma parte em branco da janela, clique com o botão direito do mouse, e depois clique em Formatting and Validation.
clicar no Opções específicas de marca botão.
Expanda Default Settings.
Uma lista de tipos de marca aparece, começando com Client tag does not support contents.By selecting an item in the list, you can set different options for client and server elements, for elements that have content (such as a table element), and for elements that do not (such as an img element).
Clique em Client tag supports contents.
Observe que a configuração padrão é que marcas usem uma marca de fechamento separada e que as marcas tenham quebras de linha antes, dentro, e depois da marca.
Expanda Client HTML tags.
Clique em td.
You will set options to change how td tags are formatted.
Na lista Line breaks, clique em None.
Clique em OK para fechar a caixa de diálogo Tag Specific Options, e depois clique em OK para fechar a caixa de diálogo Options.
Sobre o edição , aponte para Avançado e, em seguida, clicar Formato de documento.
O documento é reformatado.The <td> tags in the table that you added are placed in a single line:
<table> <tr> <td></td><td></td><td></td>
Você pode trabalhar com opções especificas de marca para um controle de servidor ASP.NET.
Para definir opções de formatação para uma controle de servidor ASP.NET
Alternar para modo Design.
From the Standard group in the Toolbox, drag a ListBox control onto the page.
Na caixa de diálogo ListBox Tasks, clique em Edit Items.
A caixa de diálogo ListItem Collection Editor aparece.
Clique em Add duas vezes para adicionar dois itens.
Em Membros, clicar no primeiro ListIteme, em ListItem properties, conjunto Texto para o item 1.
Em Membros, clicar no primeiro ListIteme, em ListItem properties,, conjunto Texto para o item 2.
Clique em OK para fechar a caixa de diálogo ListItem Collection Editor.
Alterne para modo de origem.
Observe que o controle foi formatado da seguinte maneira:
<asp:Listbox ID="ListBox1" > <asp:ListItem>Item 1</asp:Listitem> <asp:ListItem>Item 2</asp:Listitem> </asp:Listbox>Em uma parte em branco da janela, clique com o botão direito do mouse, e depois clique em Formatting and Validation.
clicar no Opções específicas de marca botão.
Na caixa de diálogo Tag Specific Options, clique em ASP.NET Controls, e depois clique em New Tag.
No Nome da marca caixa, asp: listitem tipo.
Do not type the right and left angle brackets (< and >) as part of the tag name.
You are setting options for the asp:ListItem element that is used inside a ListBox control.You are not setting options for the asp:ListBox element, because you want to control how the contents (children) of the asp:ListBox element are formatted.
Clique em OK para fechar a caixa de diálogo New Tag.
Na lista Line breaks, clique em None.
Isso fará com que o controle não tenha quebras de linha dentro dela.
Clique em OK para fechar a caixa de diálogo Tag Specific Options, e depois clique em OK para fechar a caixa de diálogo Options. Agora você pode ver o efeito das suas novas opções de formatação.
Para adicionar um controle de servidor ASP.NET usando as novas opções de formatação
Alternar para modo Design.
From the Standard group in the Toolbox, drag a second ListBox control onto the page.
No menu ListBox Tasks, clique em Edit Items.
For the ListBox control, create two items as you did in the preceding procedure.
Alterne para modo de origem.
Notice that the <asp:ListItem> elements are all on one line.The </asp:ListBox> element appears on the next line because tag wrapping is set to 80 characters.Você pode modificar esse valor na caixa de diálogo Options. Embora você tenha trabalhado com apenas dois controles e alterado apenas uma opção de formatação (quebras de linha), você viu como aplicar opções a qualquer elemento com o qual você geralmente trabalha.
Elementos de estrutura
No modo Source, você pode organizar elementos (recolher e expandir) para que eles fiquem fora do seu caminho quando você não estiver trabalhando com eles.Isso é particularmente útil para elementos como tabelas, que geralmente ocupam uma grande quantidade de espaço.Você também pode usar o recurso de recolher para qualquer elemento na página.
Para estruturar elementos
Alterne para modo de origem.
Selecione uma das tabelas que você adicionou anteriormente.
- Se você não tiver mais as tabelas, a partir do grupo HTML em Toolbox, arraste uma para cima da página.
No menu Edit, aponte para Outlining, e depois clique em Hide Selection
The <table> tag is collapsed and a plus sign (+) is displayed in the margin.
Clique no sinal de mais para expandir o elemento tabela. Você também pode configurar elementos para que os sinais mais (+) e menos (-) apareçam automaticamente na margem quando os elementos excederem um determinado tamanho
Para configurar como elementos são estruturados automaticamente
clicar com o botão direito do mouse na página, clique em Formatação e validação, click Formatoe, em seguida, clique no Opções específicas de marca botão.
Na caixa de diálogo Tab Specific Options, expanda Client HTML tags, e depois clique em table.
Em Estrutura de tópicos no editor de código, in the Mínimas de linhas, digite 5.
Clique em OK, e depois clique em OK.
Para tabelas existentes e quaisquer novas tabelas que são adicionadas, a estrutura aparece automaticamente se a tabela exceder cinco linhas.
Validação de HTML
O editor de HTML pode validar seu HTML ou certificar-se de que ele é compatível com as regras de navegadores ou padrões específicos, tais como XHTML.Por exemplo, o editor pode encontrar marcas e atributos que não são aceitos pelo Netscape Navigator 4.0 ou que não são compatíveis com padrões XHTML. Nesta parte da explicação passo a passo, você irá trabalhar com diferentes esquemas (tipos ou padrões de navegador) e introduzir vários tipos de erros pequenos para ver como o editor sinaliza os erros.
Para testar validação no editor
No modo Source, abra ou alterne para a página Default.aspx.
Na barra de ferramentas HTML Source Editing, na lista, clique em Internet Explorer 3.02/Netscape Navigator 3.0.
Role até o final da página.
Inside the </form> tag, type the following HTML:
<font face=arial> <a href=Default.aspx >Default Page </a> </font>Enquanto você digita, a tecnologia Microsoft IntelliSense fornece assistência para completar as marcas.
Na barra de ferramentas HTML Source Editing, na lista, clique em XHTML 1.0 Transitional (Netscape 7, Opera 7, Internet Explorer 6).
Após uma curta pausa (porque a validação é executada como uma tarefa em segundo plano), você verá linhas vermelhas rabiscadas abaixo de várias partes das marcas.Como um verificador ortográfico, o recurso de validação de HTML localiza marcações na sua página que não são aceitadas pelo navegador atualmente selecionado.
In the <font> tag, rest the mouse pointer over the word font.
A ToolTip informs you that the font element is considered outdated.Os padrões atuais agora recomendam que você use estilos de folha de estilos em cascata para formatação de texto.Por exemplo, <span style="font-name:Arial;">.
In the href attribute of the <a> tag, rest the mouse pointer over Default.aspx.
A ToolTip informs you that in the current schema, attributes must be enclosed in quotation marks.
Enclose Default.aspx in quotation marks.
The value for the href attribute is no longer underlined.Se você usar referências relativas para marcas de âncora ou outras marcas que exigem uma URL, a validação determina se o elemento de destino está disponível.
Na linha abaixo do HTML para o qual você está trabalhando, digite um colchete angular direito (<).
The IntelliSense drop-down list appears, but this time it does not offer font, because the font element is not valid in XHTML schemas.
Delete the right angle bracket (<).
Configuração de opções de validação
Você pode controlar os tipos de erros que a validação mostra para você.Isso é útil se você desejar que a validação localize determinados tipos de erros, mesmo que os erros fossem permitidos em um esquema específico.
Para configurar opções de validação
No modo de exibição fonte, clicar com o botão direito do mouse em qualquer lugar na página e clique em Formatação e validação.
Observação:O comando Formatting and Validation está disponível apenas no modo de exibição Source.
Na caixa de diálogo Options, clique em Validation.
Observe que independentemente de você selecionar ou desmarcar a caixa de seleção Show errors, a exibição de erro para caixas de seleção não é ativada.Isso acontece porque o esquema atual é XHTML, o qual já mostra a você todos os erros de validação possíveis.
Na lista Target, clique em Internet Explorer 6.
Certifique-se de que a caixa de seleção Show errors esteja selecionada, e em Show errors, marque todas as caixas de seleção.
Clique em OK para retornar ao editor.
Selecione o HTML que você inseriu no procedimento anterior, e no menu Edit, clique em Make Uppercase.
Após uma breve pausa, os nomes de marca são sublinhados.Quando você posiciona o ponteiro do mouse sobre um nome de marca, uma dica de ferramenta indica que o nome contém letras maiúsculas.Geralmente, o Internet Explorer 6 permite nomes de marca maiúsculos, mas agora você está vendo este erro de validação porque você alterou as opções de validação para esse esquema.
Validation can find many other types of errors also, such as duplicated control IDs, crossed opening and closing tags (for example, <b><i></b></i>), and so on.Porém a validação não impede você de criar qualquer código HTML que você desejar criar.A validação apenas identifica marcações que não estão de acordo com as regras especificadas para o navegador.
Você deve compreender que quando uma página ASP.NET é executada, a saída resultante consiste não apenas dos elementos HTML que você criou, mas também do HTML que é processado por controles de servidor ASP.NET e qualquer código que é escrito na página.A validação não pode examinar a saída desses elementos dinâmicos; ou seja, o editor não pode examinar a validade da saída gerada.Por padrão, os controles do ASP.NET geram saída compatível com padrões XHTML 1.1.Isso significa que a saída é adequada para a maioria dos navegadores.For more information about the markup that is generated by ASP.NET controls, see O ASP.NET e o XHTML.
Próximas etapas
Esta explicação passo a passo apresentou a você alguns dos recursos mais avançados do editor de HTML.Embora a explicação passo a passo não ilustre cada recurso, você já viu como opções de formatação, estruturação, e validação podem ajudar você a produzir marcação bem formada e com formatação personalizada, embora ainda dando a você controle sobre a marcação.
Consulte também
Conceitos
Validação de marcação no Visual Web Developer