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

2. 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

3. 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

4. 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

5. 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

6. 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

7. 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 Style
OBS: A melhor forma é a External, evitem utilizar a forma Inline
7

8. Demonstração
1 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

9. 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

10. 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.Config
OBS: O Tema definido na página sobrepoe o Tema definido no Web.Config
10

11. 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

12. Demonstração
1 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.config
4 Aplicando o Tema pelo Html (Propriedades, Diretiva Page)
5 Aplicando o Tema pelo CodeBehind
12