msdn24_capa.jpg

Clique aqui para ler todos os artigos desta edição

 

Layout no ASP.NET

 

Muitos desenvolvedores dizem não terem prática no desenvolvimento de layouts, principalmente quando se trata de páginas Internet. Percebi a importância de dominar algumas técnicas para diagramação de layouts de home-pages. Minha pesquisa levou à aquisição de alguns conceitos que me são úteis até hoje, e que passo a compartilhar nesse artigo.

Apresento algumas técnicas de como obter bons resultados a fim de facilitar a visualização do usuário diante dos WebForms.

 

Folhas de estilo (css)

Uma das grandes dificuldades na criação de uma página web é a formatação. Definir cor, tamanho de fonte e formatação de controles deixa o código HTML bastante extenso, aumentando a possibilidade de erros e até perda de performance. Com a criação de uma folha de estilo (CSS - Cascading Style Sheets) é possível configurar a formatação de todas as páginas de um site através de um arquivo, que facilitará a manutenção, além da diminuição do código HTML de uma página.

Para ler as configurações de uma folha de estilo (.css) em uma página é necessário informar no cabeçalho da mesma a seguinte tag:

 

           

                       

                       

                       

                       

                       

                       

           

      

É possível criar classes em arquivos de extensão .css, dessa forma definimos mais de um estilo em uma classe para agrupamento das regras.  Para se criar uma classe, abra o Solution Explorer, clique com o botão direito no projeto ASP.NET, selecione Add / Add New Item e escolha o arquivo do tipo Style Sheet.

Clique com o botão direito e aponte para “Add Style Role”, selecione “Class Name”, informe “myTextBox” e clique “OK”. Clique novamente com o botão direito em cima da classe criada e aponte para “Build Style”. Na guia “Font” informe a cor (color: white), o Font-name (Family: Verdana); na Guia “Backgroud” informe o “BackGroud color” (Color: black) e na guia “Text” informe o Alignment (Horizontal: Centered). Após essas configurações clique em “OK” e visualize o resultado no seguinte código.

 

.myTextBox

{ ...

Quer ler esse conteúdo completo? Seja um assinante e descubra as vantagens.
  • 473 Cursos
  • 10K Artigos
  • 100 DevCasts
  • 30 Projetos
  • 80 Guias
Tenha acesso completo