Explicação Passo-a-passo: Criando Temas de Usuários selecionáveis

  • Artigo

Essa explicação passo-a-passo mostra como criar uma página ASP.NET que permita que o usuário selecione um tema para a página.Embora esse exemplo use uma única capa de controle e um arquivo básico de folha de estilo em cascata (CSS), os princípios mostrados aplicam-se para temas mais complexos que incluem elementos gráficos, esquemas de layout diferentes no arquivo CSS e mais capas de controle de servidor complexas.

Tarefas ilustradas nesta explicação passo a passo incluem:

  • Criando um tema, incluindo um arquivo CSS e uma capa de controle de servidor, no Microsoft Visual Web Developer.

  • Criando uma página mestra do ASP.NET que usa um tema.

  • Criando uma página do ASP.NET com uma página mestra aplicada que use um tema.

  • Criando um controle de servidor de lista suspensa que aplica um novo tema a uma página, incluindo alteração de estilos nos elementos da página mestra.

  • Executando uma página para exibir diferentes temas aplicados à página.

Pré-requisitos

Para concluir esta explicação passo a passo, será necessário:

  • O Visual Web Developer (Visual Studio).

  • O .NET Framework.

Criando um site da Web

Se você já tiver Criado um site da Web em Visual Web Developer (por exemplo, seguindo as etapas em Demonstra Passo a passo: Criando uma página da Web básica no Visual Web Developer, você pode usar esse site e pule para a Avançar seção, "Criando uma página mestra". Caso contrário, crie um site e uma página novos, seguindo estas etapas.

Para criar um site do sistema de arquivos

  1. Abra o Visual Web Developer.

  2. Sobre o File Menu, clique em NovoSite.

    O Novo Site da Web caixa de diálogo é exibida.

  3. Em Modelos Visual Studio instaladoClique em Web Site ASP.NET.

  4. Na Local Digite o nome da pasta onde você deseja manter as páginas do seu site da Web.

    Por exemplo, digite o nome da pasta C:\WebSites.

  5. Na Linguagem lista, clique na programação Idioma você preferir trabalhar no.

  6. Clique em OK.

    Visual Web Developer cria a pasta e uma nova página chamada Default.aspx.

Criando um tema

Um tema é um conjunto de configurações de propriedades que permitem que você defina a aparência das páginas e controles.Você pode aplicar essa aparência consistentemente em páginas de um aplicativo Web.Os temas são compostos de vários elementos: capas de controle de servidor, arquivos CSS e outros recursos.Nesse exemplo, você usa uma capa e uma folha de estilos para criar um tema.

Os temas são definidos em diretórios especiais no projeto do seu site.

Para criar um tema

  1. No Solução Explorer, clique com o botão direito do mouse no nome do projeto Site, clique em Adicionar pasta ASP.NETe em seguida, clique em Tema.

    A pasta App_Themes é criada automaticamente e uma nova pasta de temas chamada Theme1 é adicionada.

  2. Clique com o botão direito do mouse na nova pasta Theme1 e clique em Renomear.tipo Azul e pressione ENTER.

  3. Clique com o botão direito do mouse na nova pasta azul e em seguida, clique em Adicionar novo item.

  4. Na Adicionar novo item caixa de diálogo, selecione Skin File e nomeie o arquivo Padrão.skin.Clique em Adicionar.

  5. Em Gerenciador de Soluções, clique com o botão direito do mouse na nova azul pasta novamente e em seguida, clique em Adicionar novo item.

  6. Na Adicionar novo item caixa de diálogo, selecione Style Sheet.Nome de folha de estilos Default.css.Clique em Adicionar.

    O primeiro tema agora é criado com um arquivo CSS vazio e um arquivo de capa de controle de servidor.Você irá editar esses arquivos em um momento, mas primeiro você precisa criar uma página que contenha um controle e algum HTML ao qual o tema possa ser aplicado.

Criando uma Página Mestra.

Para mostrar que um tema pode facilmente ser aplicado tanto a uma página mestra quanto a uma página que usa essa página mestra, crie uma página mestra simples para usar com a página Default.aspx no seu projeto Web.

Para criar a página mestra

  1. Na Gerenciador de Soluções, clique com o botão direito do mouse no nome do seu site da Web e em seguida, clique em AdicionarNovo item.

  2. Em Modelos Visual Studio instaladoClique em Master Page.

  3. Na Name (Nome) caixa, digite Master1.master.

  4. Na Linguagem lista, clique na programação Idioma você preferir.

  5. Limpar o Coloque o código no arquivo separado Caixa de seleção e em seguida, clique em Adicionar.

    A nova página mestra abre no modo de origem.A parte superior da página é um @ Mestre Declaração em vez da @ Page Declaração normalmente encontrada na parte superior de páginas ASP.NET.O Mensagem da página contém um ASP:ContentPlaceHolder o controle, que define a área da w de página mestra aqui substituível conteúdo será mesclado de páginas de conteúdo em tempo de execução.Você trabalhará mais com o espaço reservado para conteúdo posteriormente nessa explicação passo a passo.

Dispondo a Página Mestra

A página mestra define os elementos que compõem a página.Ela pode conter qualquer combinação de textos estáticos e controles.Uma página mestra também contém um ou mais espaços reservados de conteúdo que designam onde o conteúdo dinâmico aparecerá quando as páginas forem exibidas.

Nessa explicação passo-a-passo, você usa uma tabela que contém um título, várias regras horizontais e um espaço reservado para o conteúdo da página mestra como o layout de sua página Home.aspx.

Para criar uma tabela para a página mestra

  • Com o Master1.master Arquivo selecionado em Exibir Source, Selecionar o texto entre os dois Formulário Elementos e colar o seguinte conteúdo para o Selecionado área.Anotação que esse código coloca o espaço reservado para conteúdo em uma tabela, em vez de entre o DIV Elementos como ele é o layout mestre padrão.

            < tabela largura = "100 %" CellEspaçamento = "0" CellPadding = "0" Borda = "0" Classe = "cabeçalho" > < TR > < TD Class = "título" > < /TD > exemplo temas Switchable < /TR > < TR > < TD > < hr / > < /TD > < /TR > < TR > < TD > < ASP:ContentPlaceHolder ID = "ContentPlaceHolder1" runat = "Servidor" > < / ASP:ContentPlaceHolder > < /TD > < /TR > < TR > < TD > < hr / > < /TD > < /TR > < / tabela >

            < tabela largura = "100 %" CellEspaçamento = "0" CellPadding = "0" Borda = "0" Classe = "cabeçalho" > < TR > < TD Class = "título" > < /TD > exemplo temas Switchable < /TR > < TR > < TD > < hr / > < /TD > < /TR > < TR > < TD > < ASP:ContentPlaceHolder ID = "ContentPlaceHolder1" runat = "Servidor" > < / ASP:ContentPlaceHolder > < /TD > < /TR > < TR > < TD > < hr / > < /TD > < /TR > < / tabela >

    A página mestra agora possui um layout que pode ser aplicado à página de conteúdo (nomeada Home.aspx) que você irá criar na próxima seção.

Criando uma Página de Conteúdo

A página mestra fornece o modelo para o seu conteúdo.Você define o conteúdo para a página mestra, criando uma página ASP.NET que está associada com a página mestra.A página de conteúdo é uma página especializada do ASP.NET que contém somente o conteúdo a ser mesclado com a página mestra.Na página de conteúdo, você adiciona o texto e os controles que você deseja exibir quando os usuários solicitarem essa página.

A página de conteúdo usará a página mestra que você criou e os temas que você ainda precisa concluir.A página usará o espaço reservado para conteúdo da página mestra e terá um título, um subtítulo e uma lista suspensa.Porque a página será estar usando um Mestre de página, ele deve conter um MasterPageFile Atributo in a @ Page Diretiva, bem como o espaço reservado para conteúdo.

Para criar a página de conteúdo

  1. No Solução Explorer, clique com o botão direito do mouse no nome do seu site da Web e clique em Adicionar novo item.

  2. Em Modelos Visual Studio instaladoClique em Web Form.

  3. Na Name (Nome) Caixa, tipo inicial.

  4. Na Linguagem lista, clique na programação Idioma você preferir.

  5. Selecione o Selecione Mestre de página Caixa de seleção e em seguida, clique em Adicionar.

    O Selecione uma página mestra caixa de diálogo é exibida.

  6. Clique em Master1.mastere em seguida, clique em OK.

    Um novo arquivo chamado Home.aspx é criado.A página contém um @ Page Diretiva que conecta a página atual para o página mestra selecionado com o MasterPageFile Atributo, como mostrado no exemplo o seguir.

    < % @ Idioma da página = "vb" MasterPageArquivo = "~/Master1.master" ... %>

    < % @ Language da página = " C# " MasterPageFile = "~/Master1.master" ... %>

    A página também contém um < ASP:Conteúdo > Elemento que você trabalhará com Avançar.

Adicionando Conteúdo à Página de Conteúdo

Um página de conteúdo não é necessário os usuais elementos que compõem um página ASP.NET, como HTML, Corpo, ou Formulário Os elementos.Em vez disso, você adiciona somente o conteúdo que você deseja exibir na página mestra, substituindo as regiões do espaço reservado que você criou na página mestra.Para esse exemplo, você pode adicionar um elemento de título 1, um elemento de título 2, um elemento de parágrafo e uma lista suspensa.Você usará a lista suspensa para selecionar um tema a ser aplicado à página.

Para adicionar conteúdo à home page

  1. Colar o seguinte código entre o ASP:Content começando e terminando marcas.O exemplo a seguir cria três elementos HTML: um título 1, um título 2 e um parágrafo.Ele também adiciona um controle de lista suspensa.Observe que você também pode adicionar o controle à página no modo de design se você preferir.

    < H1 ID = "title1" > temas Switchable em uma página < / H1 > < br / > < H2 ID = "title2" > observe como o conteúdo página mestra e o conteúdo da página são afetados < / H2 > < p > selecionar uma cor a partir de Soltar-Para Baixo Lista abaixo para alterar a aparência deste Page. < /p > < br / > < br / > < ASP:DropDownList ID = "ddlTemas" runat = "server" AutoPostVoltar = "Verdadeiro" &Gt; < valor ASP:ListItem = "azul" > gostaria de página a ser azul! < / ASP:ListItem > < valor ASP:ListItem = "vermelho" > gostaria de página a ser vermelho! < / ASP:ListItem > < valor ASP:ListItem = "Verde" > gostaria de página a ser verde! < / ASP:ListItem > < / ASP:DropDownList >

  2. Adicione uma seção de script que executará o código que carrega o tema quando ele for selecionado a partir da lista suspensa.O exemplo a seguir e a Script As marcas devem ser Adicionado para o página de conteúdo na linha após o @ Page Diretiva.

    < script runat = "server" > Público Sub Page_PreInit() ' define o tema para a página. Me.Tema = "azul" Se ((Not (Solicitar.Formulário) É Nada) _ AndAlso (Solicitar.Formulário.Contar > 0)) E Me.Theme = .Trim Me.Solicitar.Formulário (4) End Sub End se < / script >

    < script runat = "server" > Page_PreInit() void Público {/ / define o tema para a página. This.Theme = "Azul"; Se (Request.Form! = NULL && Request.Form.Count > 0) this.Theme = this.Request.Form[4].Trim();  < / script >

    O tema é carregado durante a PreInit Evento do ciclo de vida da página.O formulário de solicitação de página contém um vetor de valores, e o valor no índice 4 é o valor selecionado a partir da lista suspensa.Esse valor é atribuído ao tema da página, e quando a página é carregada, o novo tema é aplicado.

    A próxima etapa na explicação passo-a-passo é criar vários temas que você possa usar para mostrar que está sendo aplicado um tema diferente.

Editando o Tema Azul

O tema Azul contém um folha de estilos em branco e uma capa vazia.Como você sabe quais elementos constituem a página padrão e a página mestra que ela usa, agora você pode editar os arquivos de tema para adicionar cor aos elementos da página.

Para editar o tema Azul

  1. Abra o arquivo Default.skin a partir da pasta do tema Azul no modo de exibição Source.

  2. Adicione o seguinte código para a lista suspensa para designar as cores de página quando o tema Azul for selecionado.

    < ASP:DropDownList runat = "server" ForeCor = "branco" BackColor = "azul" / &Gt;

  3. Abra o arquivo Default.css a partir da pasta Azul no modo de exibição Source.Primeiro, adicione o seguinte código para formatar o título da tabela da página mestra.

    TD.Título {Fonte-Tamanho: 1em; text-align: Centralizar; font-family: Verdana; font-Tamanho: x-grande; font-w Oito: bolder; cor: Azul-marinho; }

  4. Em seguida, adicione uma cor de fundo para a tabela com o código a seguir.

    Tabela.Cabeçalho {Plano de Fundo-Cor: Blue; }

  5. Em seguida, estilize os elementos do título 1 e do título 2 na página de conteúdo.

    H1 {font-size: grande; cor: Navy; }

H2 {font-family: Verdana; font-size: Médio; margin-top: 30; cor: Navy; }

  6. Finalmente, estilize a regra horizontal e o elemento de parágrafo.

    p {font-family: Verdana; font-size: Pequeno; cor: azul-piscina; text-align: à esquerda; }

hr {Borda: 0; border-top: 2px Sólido azul-piscina; Altura: 2px; }

Conectando os Temas com a Página

Antes de poder ver o tema aplicado à página Home.aspx, você precisará adicionar um atributo para o @ Page Diretiva que indica que a página usa um tema.

Para conectar uma página a um tema

  1. Abra Home.aspx no modo de exibição Source.

  2. Adicionar a StylesheetTheme atributo para o @ Page diretiva e defina-o como igual o tema Azul.A diretiva da página deve se parecer com o exemplo a seguir.

    < % @ Language da página = "vb" MasterPageFile="~/switchtheme.master " Título = "Switchable temas" StylesheetTheme = "azul" % &Gt;

    < % @ Language da página = " C# " MasterPageFile="~/switchtheme.master " Título = "Switchable temas" StylesheetTheme = "azul" % &Gt;

Testando a Página

Você pode testar a página, executando-a como você faria com qualquer página ASP.NET.

Para testar a página

  • Enquanto estiver visualizando a página Home.aspx, pressione CTRL+F5 para executar a página.

    O ASP.NET mescla o conteúdo da página Home.aspx com o layout na página Master1.master em uma única página, e então aplica o tema Azul e exibe a página resultante no navegador.Observe que o tema Azul foi aplicado aos elementos HTML e à lista suspensa, bem como o título e o plano de fundo definidos no arquivo mestre.

Criando Temas Adicionais

O tema Azul está perfeito, mas o propósito dessa explicação é conceder ao usuário da página várias opções para um tema.Você pode copiar os arquivos de capa e de folha de estilos em diretórios novos de tema e, em seguida, editar as cores usadas no tema para refletir as novas cores de tema.O procedimento a seguir cria dois novos temas, chamados Vermelho e Verde.

Para criar temas adicionais

  1. No Gerenciador de Soluções, clique com o botão direito do mouse o App_Themes pasta, clique em Adicionar pasta ASP.NETe em seguida, clique em Tema.Com o pasta título. Theme1 selecionado, digite vermelho e Pressionarionar ENTER.

  2. Abrir o Azul pasta e Selecionar os arquivos Padrão.skin e Padrão.css.Clique com o botão direito do mouse nos arquivos selecionados dois e em seguida, clique em Copiar.

  3. Clique com o botão direito do mouse o Vermelho pasta e em seguida, clique em Colar.

  4. Repetir a etapa 1, mas nome o Novo tema pasta verde.Clique, com o botão direito do mouse o Verde Pasta e clique em ColarColocando cópias dos arquivos do Default.skin e Default.css em de Verde a pasta.

  5. Edite o atributo de cor no arquivo de capa para refletir a cor do tema.Por exemplo, o arquivo de capa no tema Vermelho deve se parecer com o exemplo a seguir.

    < ASP:DropDownList runat = "server" ForeColor = "branco" BackColor = "vermelho" / &Gt;

  6. Edite a folha de estilos para cada tema para refletir o nome do tema.Observe que você irá querer usar vários tons de verde para os diversos elementos HTML e texto para aparecer contra o plano de fundo.A folha de estilos para o tema Verde pode parecer com o exemplo a seguir.

    p {font-family: Verdana; font-size: pequeno; cor: azul-petróleo; text-align: à esquerda; }

hr {Borda: 0; border-top: azul-petróleo sólida 2px; Altura: 2px; }

H1 {font-size: grande; cor: Verde; }

H2 {font-family: Verdana; font-size: Média; margin-top: 30; cor: Green; }

table.Header {background-color: Lima; }

TD.Title {font-size: 1em; text-align: centralizar; font-family: Verdana; font-size: x-grande; de espessura de fonte: bolder; cor: azul-petróleo; }

Testando a Seleção de Tema

A lista suspensa agora pode ser utilizada para selecionar entre os três temas para a página.

Para selecionar diferentes temas

  1. Alterne para a página Home.aspx, e pressione CTRL+F5.

  2. Selecione Verde ou Vermelho a partir de drop-down list.

    Observe que a folha de estilos é aplicada aos elementos HTML da página e a capa é aplicada ao controle da lista suspensa.

Próximas etapas

Para obter mais informações sobre como usar páginas mestras, consulte Passo-a-passo: Criando e Usando Páginas Mestras do ASP.NET no Visual Web Developer.

Consulte também

Tarefas

Como: Aplicar temas ASP.NET

Conceitos

Visão Geral de Páginas Mestras ASP.NET