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
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
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
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
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
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
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
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
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
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
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
ASP.NET - Aparência do WebSite

ASP.NET - Aparência do WebSite

  • 2.
    Master Pages (PáginasPai) 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áginasFilho) 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 aoGoogle) 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