Academia de Ensino SuperiorProf. André Morais
Desenvolvimento de Aplicações Web na
plataforma Microsoft
Desenhando a página
Academia de Ensino SuperiorProf. André Morais
Desenhando a página• Objetivos
– Criando páginas estáticas
– HTML
– Server controls e conteúdo dinâmico
– Configurando controles
Academia de Ensino SuperiorProf. André Morais
Desenhando a página• Criando páginas estáticas
– (one) View-only
– Conteúdo imutáveis
– Vamos voltar no tempo... 1996...
Academia de Ensino SuperiorProf. André Morais
Desenhando a página
• Páginas estáticas
Academia de Ensino SuperiorProf. André Morais
Desenhando a página
• Criando uma página estática
Academia de Ensino SuperiorProf. André Morais
Desenhando a página
• HTML, o que é?
– Um arquivo em formato legível ao olhos humanos;
– Composto de elementos, iniciando e terminando com tags;
– Elementos tem atributos que oferecem informações adicionais sobre as tags ao browser
Academia de Ensino SuperiorProf. André Morais
Desenhando a página
• Exemplo:
tag atributos
Conteúdo do elemento
Academia de Ensino SuperiorProf. André Morais
Desenhando a página
• Elementos HTML mais comunsElemento Description Exemplo de uso
<img>Uma tag de imagem. Uma tag de imagem. Esta tagcoloca uma imagem em uma página. <img src=”myimage.gif” />
<div>
Uma tag que representa um bloco de texto. Atravésdo atributo style é possível posicionar o conteúdocontido dentro da tag div em qualquer lugar da página
<div style=”float: left”> Left- handcontent here</div><div style=”float: right”> Right- handcontent here</div>
<table> <tr> <td>
Um elemento tabela que contêm linhas (tr) e células(td). Deve ser usado para exibição de dadostabulares (lista de carros, relatórios, etc.)
<table border=”1”><tr><td>Conteúdo da célula</td></tr> </table>
<a>
Ancora. Define o hyperlink de uma página a outrapágina, permitindo definir tanto o endereço do linkcomo o texto para apresentar ao usuário.
Clique <a href=”http: / /www.aes.com.br”>aqui </a>
Academia de Ensino SuperiorProf. André Morais
Desenhando a página
• Elementos HTML mais comuns (continuação)Elemento Description Exemplo de uso
<head> <body>
Os elementos mais importantes de uma página. Oelemento <head> define uma área para o título,referência a arquivos externos e outros metadados.No elemento <body> estará contido o conteúdo dapágina
<html> <head> <title> Titulo da página </title></head> <body> Conteúdo da página</body> </html>
<form> <input>
Elementos para definir formulários. Ao criar umapágina onde é necessário entrada de dados, oselementos que serão utilizados para transmitir o dadodevem estar dentro da tag <form>. A tag <input> ébastante versátil. Através do atributo type é possíveld
<form id=”form1” runat=”server”><input id=”Text1” type=”text” /><input id=”Submit1” type=”submit”value=”Enviar” /></form>
<br>
A tag <br> acrescenta uma quebra de linha napágina. O valor acrescenta um espaço embranco na página
Primeira linha<br /> Segundalinha. Espaço em branco.
Academia de Ensino SuperiorProf. André Morais
Desenhando a página
• Conteúdo dinâmico
– Conteúdo que se altera de acordo com a navegação do usuário
– Um conteúdo dinâmico pode ser obtido através de:
• Códigos client-side (Javascript, por exemplo)
• Códigos server-side (C#, VB.NET, etc.) Este é o nosso foco!!
Academia de Ensino SuperiorProf. André Morais
Desenhando a página
• Server Controls
– Vamos analisar o toolbox do Visual Studio
Academia de Ensino SuperiorProf. André Morais
Desenhando a página
• Toolbox: Controles...
Comuns para 90% dos casos
Para acesso a banco de dados
Para validação de entrada de dados
Usados para navegação de sites
Para simplificar segurança de aplic.
Para confecção de sites no estilo Share-PointElementos HTML simples
Gerais criados pelo usuário ou importados de fornecedor externo
Academia de Ensino SuperiorProf. André Morais
Desenhando a página
• E o que são Server Controls afinal?
– São controles que podem ser processados no servidor afim de prover conteúdo HTML;
– Permitem a construção de conteúdos dinâmicos
Academia de Ensino SuperiorProf. André Morais
Desenhando a página
• Server Controls
Academia de Ensino SuperiorProf. André Morais
Desenhando a página
• Adicionando Server Controls através do Design View
Academia de Ensino SuperiorProf. André Morais
Desenhando a página
• Adicionando Server Controls através do Source View
Academia de Ensino SuperiorProf. André Morais
Desenhando a página
• Standard Controls
– TextBox control: Usado para inclusão de textos na página. Também chamado de caixa de edição;
• Propriedades principais: ID, Visible, Text
– Button control: Para envio de informações à um servidor, que reage a solicitação e envia uma resposta;
• Propriedades principais: ID, Text
– Label control: Usado para exibir textos simples em uma posição especifica da página. Com ele é possível mudar o texto a partir de uma interação do usuário.
• Propriedades principais: ID, Visible, Text
Academia de Ensino SuperiorProf. André Morais
Desenhando a página• Standard Controls (continuação)
– Hyperlink control: Usado para permitir o hyperlink (ligação) entre páginas. Permite a navegabilidade de um site para outras páginas ou outros sites na internet;
• Propriedades principais: ID, Visible, Text, NavigateURL, Target
– Image control: Usado para exibir imagens em uma página. A vantagem de utilizar este controle é a possibilidade de seu conteúdo ser alterado no servidor;
• Propriedades principais: ID, Visible, ImageURL;
Academia de Ensino SuperiorProf. André Morais
Desenhando a página
• Standard Controls (continuação)
– DropDown List control: Usado para permitir ao usuário escolher entre uma lista de opções;
– Listbox control: Usado para oferecer um número fixo de itens para escolha;
– CheckBox e Radio Button controls: Usados para selecionar entre dois itens ou um entre muitos.
Academia de Ensino SuperiorProf. André Morais
Desenhando a página
• HTML Controls
Academia de Ensino SuperiorProf. André Morais
Desenhando a página
• E o Calendar Control??
• Como usar o DropDownList?
Top Related