Aparência do Web SiteLeonardo Lourenço SilvaMCT, MCPD, MCTS, MCP

http://leolosi.wordpress.comhttp://linkedin.com/in/leolosihttp://facebook.com/leolosihttp://slideshare.net/leolosihttp://grou.ps/dotnetcoders

Master Pages (Páginas Pai)

2

Considerações:Considerações:

Incluídas a partir do ASP.NET 2.0 Incluídas a partir do ASP.NET 2.011

Permitem a herança visual (Página Filho herda o Layout Página Pai) Permitem a herança visual (Página Filho herda o Layout Página Pai)22

Estrutura similar à de uma página (Layout e CodeBehind) Estrutura similar à de uma página (Layout e CodeBehind)33

OBS: Não é possível navegar diretamente em uma página pai Podemos ter mais de uma página pai no Web SiteOBS: Não é possível navegar diretamente em uma página pai Podemos ter mais de uma página pai no Web Site

São caracterizadas pela (Extensão *.MASTER e Diretiva <%@ MASTER) São caracterizadas pela (Extensão *.MASTER e Diretiva <%@ MASTER)44

3

Content Pages (Páginas Filho)

Considerações:Considerações:

Páginas que herdam o layout da página pai Páginas que herdam o layout da página pai11

O layout das páginas pai e filho é mesclado em Modo de Execução O layout das páginas pai e filho é mesclado em Modo de Execução22

O Atributo MasterPageFile indica o nome da página pai O Atributo MasterPageFile indica o nome da página pai33

OBS: O layout da página filho vai dentro do controle ContentPlaceHolder da página PaiOBS: O layout da página filho vai dentro do controle ContentPlaceHolder da página Pai

É possível setar uma página pai através do evento Pre_Init() É possível setar uma página pai através do evento Pre_Init()44

Benefícios de Utilização

4

Considerações:Considerações:

Padronização do layout das páginas do projeto Padronização do layout das páginas do projeto11

Redução de código HTML Redução de código HTML22

Facilidade na Manutenção (Alteração apenas na Página Pai) Facilidade na Manutenção (Alteração apenas na Página Pai)33

5

Demonstração

Criando a Página Pai (Principal)11

Criando as Páginas Filho (Clientes, Fornecedores, Financeiro)22

Visualizando o Atributo MasterPageFile das Páginas Filho33

Criando uma Nova Página Pai (NovaMasterPage)44

Setando a Página Pai no Evento PreInit (Clientes)55

Visualizando o HTML Mesclado em Modo de Execução66

6

Linguagem CSS

Considerações:Considerações:

Cascading Style Sheets (Folhas de Estilo) Cascading Style Sheets (Folhas de Estilo)11

Utilizada para definir as características visuais das página e controles Utilizada para definir as características visuais das página e controles 22

Podemos personalizar (Cores, Textos, Tamanhos, Bordas…) Podemos personalizar (Cores, Textos, Tamanhos, Bordas…)33

7

Formas de Implementação

Inline

Internal

External

Colocado diretamente nos controles (STYLE) Colocado diretamente nos controles (STYLE)

Arquivo separado (*.CSS) com o código CSS Arquivo separado (*.CSS) com o código CSS

CSS Outline, Add Style, Build Style

Manage Styles, Apply Style CSS, Properties

CSS Properties

Colocado na seção HEAD da página Colocado na seção HEAD da página

OBS: A melhor forma é a External, evitem utilizar a forma InlineOBS: A melhor forma é a External, evitem utilizar a forma Inline

8

Demonstração

Criando um Estilo Inline (Janela CSS Properties) 11

Criando um Estilo Internal (Janelas Manage Styles, Apply Style,

CSS Properties)22

Criando um Estilo External (Janelas Add Style, Build Style)33

9

Temas (Similar ao Google)

Considerações:Considerações:

Incluídos a partir do ASP.NET 2.0 Incluídos a partir do ASP.NET 2.011

Personalizar a aparência do site (Cores, Datas Festivas) Personalizar a aparência do site (Cores, Datas Festivas)22

Pasta Especial (App_Themes) Pasta Especial (App_Themes)33

OBS: Você pode ter quantos temas quiser por projetoOBS: Você pode ter quantos temas quiser por projeto

Trabalham em conjunto com CSS, Skins e Imagens Trabalham em conjunto com CSS, Skins e Imagens44

10

Formas de Implementação

OBS: O Tema definido na página sobrepoe o Tema definido no Web.ConfigOBS: O Tema definido na página sobrepoe o Tema definido no Web.Config

HTML

CodeBehind

Web.Config

Colocado na Diretiva Page (Theme) Colocado na Diretiva Page (Theme)

Colocando na Seção (<system.web><pages>) Colocando na Seção (<system.web><pages>)

Também pode ser feito pela janela de propriedades

Colocado no Evento (Pre_Init()) Colocado no Evento (Pre_Init())

11

Skins (Peles)

Considerações:Considerações:

Incluídas a partir do ASP.NET 2.0 Incluídas a partir do ASP.NET 2.011

Trabalham em conjunto com Temas, Arquivos CSS e Imagens Trabalham em conjunto com Temas, Arquivos CSS e Imagens22

Mapeiam os Controles com as Classes de Estilo Mapeiam os Controles com as Classes de Estilo33

12

Demonstração

Criando um Tema, Skin e Folha de Estilos (Amarelo) 11

Criando um Tema, Skin e Folha de Estilos (Azul)22

Aplicando o Tema pelo Web.config33

Aplicando o Tema pelo Html (Propriedades, Diretiva Page)44

Aplicando o Tema pelo CodeBehind55

© 2012 Microsoft Corporation. All rights reserved. Microsoft, MSDN, the MSDN logo, and [list other trademarks referenced] are trademarks of the Microsoft group of companies.  The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation.  Because Microsoft must respond

to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. 

MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED, OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Obrigado!