ASP.NET - Aparência do WebSite

6,429 views

Published on

Aprenda a personalizar a aparência de uma aplicação ASP.NET com Master Pages, CSS, Temas e Skins

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
6,429
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
25
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

ASP.NET - Aparência do WebSite

  1. 1. Master Pages (Páginas Pai) Considerações: 1 Incluídas a partir do ASP.NET 2.0 2 Permitem a herança visual (Página Filho herda o Layout Página Pai) 3 Estrutura similar à de uma página (Layout e CodeBehind) 4 São caracterizadas pela (Extensão *.MASTER e Diretiva <%@ MASTER) OBS: Não é possível navegar diretamente em uma página pai Podemos ter mais de uma página pai no Web Site 2
  2. 2. Content Pages (Páginas Filho) Considerações: 1 Páginas que herdam o layout da página pai 2 O layout das páginas pai e filho é mesclado em Modo de Execução 3 O Atributo MasterPageFile indica o nome da página pai 4 É possível setar uma página pai através do evento Pre_Init() OBS: O layout da página filho vai dentro do controle ContentPlaceHolder da página Pai 3
  3. 3. Benefícios de Utilização Considerações: 1 Padronização do layout das páginas do projeto 2 Redução de código HTML 3 Facilidade na Manutenção (Alteração apenas na Página Pai) 4
  4. 4. Demonstração 1 Criando a Página Pai (Principal) 2 Criando as Páginas Filho (Clientes, Fornecedores, Financeiro) 3 Visualizando o Atributo MasterPageFile das Páginas Filho 4 Criando uma Nova Página Pai (NovaMasterPage) 5 Setando a Página Pai no Evento PreInit (Clientes) 6 Visualizando o HTML Mesclado em Modo de Execução 5
  5. 5. Linguagem CSS Considerações: 1 Cascading Style Sheets (Folhas de Estilo) 2 Utilizada para definir as características visuais das página e controles 3 Podemos personalizar (Cores, Textos, Tamanhos, Bordas…) 6
  6. 6. Formas de Implementação Colocado diretamente nos controles (STYLE) Inline CSS Properties Colocado na seção HEAD da página Internal Manage Styles, Apply Style CSS, Properties Arquivo separado (*.CSS) com o código CSS External CSS Outline, Add Style, Build StyleOBS: A melhor forma é a External, evitem utilizar a forma Inline 7
  7. 7. Demonstração1 Criando um Estilo Inline (Janela CSS Properties)2 Criando um Estilo Internal (Janelas Manage Styles, Apply Style, CSS Properties)3 Criando um Estilo External (Janelas Add Style, Build Style) 8
  8. 8. Temas (Similar ao Google) Considerações: 1 Incluídos a partir do ASP.NET 2.0 2 Personalizar a aparência do site (Cores, Datas Festivas) 3 Pasta Especial (App_Themes) 4 Trabalham em conjunto com CSS, Skins e Imagens OBS: Você pode ter quantos temas quiser por projeto 9
  9. 9. Formas de Implementação Colocado na Diretiva Page (Theme) HTML Também pode ser feito pela janela de propriedades Colocado no Evento (Pre_Init())CodeBehind Colocando na Seção (<system.web><pages>) Web.ConfigOBS: O Tema definido na página sobrepoe o Tema definido no Web.Config 10
  10. 10. Skins (Peles) Considerações: 1 Incluídas a partir do ASP.NET 2.0 2 Trabalham em conjunto com Temas, Arquivos CSS e Imagens 3 Mapeiam os Controles com as Classes de Estilo 11
  11. 11. Demonstração1 Criando um Tema, Skin e Folha de Estilos (Amarelo)2 Criando um Tema, Skin e Folha de Estilos (Azul)3 Aplicando o Tema pelo Web.config4 Aplicando o Tema pelo Html (Propriedades, Diretiva Page)5 Aplicando o Tema pelo CodeBehind 12

×