Olá Internautas, hoje gostaria de falar um pouco sobre a configuração de estilo do sistema ou website. Cada um tem o seu e o importante é ter sempre o controle do layout em mãos.
Requisitos:
Visual Studio .NET
Linguagem C#
Style CSS
Themes
Está certo que esse tipo de coisa, a maioria dos desenvolvedores estão cansados de saber, porém algumas pessoas sequer sabem como usar esse tipo de tecnologia, ou seja, a tecnologia interpretada pelo browser.
O que é mais difícil hoje em dia? Fazer com que o site ou a aplicação funcione em qualquer browser web, celular, ou qualquer dispositivo que o acesse, concorda! Para que funcione em qualquer browser de qualquer sistema operacional, a melhor coisa é usar style com div e para tabulação, usar table.
O menu de uma aplicação que tem sub e sub opções, geralmente é o mais difícil fazer funcionar. A melhor coisa é usar <div> ou usar alguns componentes prontos e já testados, por exemplo:
-
Framework Skymenu
-
Menu dinâmico parte 1
-
Menu dinâmico parte 2
Os links acima, mostram como criar e deixar um menu dinâmico na aplicação, funciona em qualquer browser.
Codificando
Voltando a parte de style, o primeiro passo para quem usar Visual Studio .NET é criar um App_Themes. Clique com o botão direito do mouse em cima do projeto, clique em ADD, escolha a opção ADD ASP.NET Folder e a última opção é Themes. Imagem 1.
Imagem 1 (clique na imagem para ampliar)
Procurei utilizar e deixar todas as imagens dentro de uma pasta criada e dentro da pasta App_Themes. Note a imagem 2.
Imagem 2 (clique na imagem para ampliar)
O segundo passo que fiz, foi colocar a referência dentro do arquivo Web.config. A maioria dos desenvolvedores colocam dentro da página MASTER. Já eu prefiro referenciar no arquivo de configuração do projeto para não me preocupar mais com isso. Imagem 3.
Imagem 3 (clique na imagem para ampliar)
Na primeira linha da “imagem 3” coloquei e referenciei o “theme” igual ao default criado na pasta da imagem 2. Esse é só uma referência para não precisar mais colocar o arquivo .css no projeto todo. Só no arquivo de configuração já basta.
Configurando componentes com style
Agora eu vou mostrar como configurar os componentes que vou usar na página com o style indicado anteriormente. Lógico que primeiro precisei criar o arquivo .css dentro da pasta; estou partindo do ponto de que o arquivo .css já foi criado por você e para o seu site. Lembrando que este artigo não tem o objetivo de te ensinar css.
Dentro da pasta existe um arquivo com extensão .skin. Veja na imagem 2. O mesmo chama formatacao.skin. Dentro do código, coloquei todos os componentes que vou utilizar junto ao desenvolvimento do site, já com style cada um. Prefiro usar assim, isso porque não preciso configurar os componentes da página, por exemplo: ao utilizar um gridView com cores padronizadas do site, caso não tivesse o arquivo .skin, teria que colocar cor em todos os componentes e em todas as páginas que fosse usar.
Como a ferramenta Visual Studio .NET facilita muito o desenvolvimento, configurei os styles dentro do .skin e não preciso mais mexer com configuração de layour. Code 1.
<asp:GridView runat="server" cssclass="CssGridView" CellPadding="3"
CellSpacing="1" GridLines="None"
EmptyDataText="Nenhum registro encontrado."
AutoGenerateColumns="False">
<RowStyle cssclass="CssRowStyle" HorizontalAlign=Left/>
<AlternatingRowStyle cssclass="CssAlternatingRowStyle" HorizontalAlign=Left />
<SelectedRowStyle cssclass="CssSelectedRowStyle" />
<HeaderStyle cssclass="CssHeaderStyle" />
<PagerStyle HorizontalAlign="Center" />
</asp:GridView>
Code 1.
Como o exemplo falado foi o GridView, veja como coloquei a configuração dentro do skin. Note que tem o cssclass indicando uma classe cssgridview criada no arquivo .css. Mais abaixo, coloquei o EmptyDataText para aparecer Nenhum registro encontrado. Depois mudei o layout para as propriedades RowStyle, AlternatingRowStyle, SelectedRowStyle, Header e por final PagerStyle.
Na minha página relatorio.aspx, quando eu for utilizar o grid, basta colocar assim. Code 2.
<asp:GridView runat="server" id="grid"/>
... //colocar as colunas e linhas
</asp:GridView>
Code 2
Note que criei para todos os componentes que utilizo em tela. Code 3.
<asp:Button cssclass="CssButton" runat="server" />
<asp:CheckBox runat="server" controlstyle-cssclass="CheckBox" />
<asp:DropDownList runat="server" />
<asp:DropDownList SkinID="RightAlignedDropDownListSkin" runat="server" cssclass="CssTextBox CssTextBoxRightAligned" />
<asp:Label runat="server" CssClass="CssLabel" />
<asp:Label SkinID="LeftAlignedLabelSkin" runat="server" CssClass="CssLabel CssLabelLeftAligned" />
<asp:LinkButton runat="server" cssclass="CssLink" />
<asp:Panel SkinID="ModalPopupPanelSkin" runat="server" CssClass="CssPanelModalPopup" />
<asp:TextBox runat="server" class="CssTextBox" />
<asp:TextBox SkinID="RightAlignedTextBoxSkin" runat="server" cssclass="CssTextBox CssTextBoxRightAligned" />
<asp:GridView runat="server" cssclass="CssGridView" CellPadding="3"
CellSpacing="1" GridLines="None"
EmptyDataText="Nenhum registro encontrado."
AutoGenerateColumns="False">
<RowStyle cssclass="CssRowStyle" HorizontalAlign=Left/>
<AlternatingRowStyle cssclass="CssAlternatingRowStyle" HorizontalAlign=Left />
<SelectedRowStyle cssclass="CssSelectedRowStyle" />
<HeaderStyle cssclass="CssHeaderStyle" />
<PagerStyle HorizontalAlign="Center" />
</asp:GridView>
<asp:DetailsView runat="server" cssclass="CssDetailsView" CellPadding="3" CellSpacing="1" Width="780px" GridLines="None" AutoGenerateRows="False">
<FieldHeaderStyle Width="200px" />
<EditRowStyle CssClass="CssRowStyle" />
<RowStyle HorizontalAlign="Left" cssclass="CssRowStyle"/>
<HeaderStyle cssclass="CssHeaderStyle" />
<FooterStyle cssclass="CssHeaderStyle" HorizontalAlign="Right" VerticalAlign="Middle" />
<CommandRowStyle VerticalAlign="Middle" HorizontalAlign="Right" />
</asp:DetailsView>
Code 3
É muito simples, quando se padroniza tudo e não precisa mais se importar com layout, style, cor, imagem e tudo mais. Definindo isso, basta programar o sistema. Mas existe ainda um segredo importante para quem precisa entender o style.
Na imagem 4, note que tenho um css com o nome de uma página.
Imagem 4 (clique na imagem para ampliar)
Existe uma página chamada naoAutorizado.aspx e quero utilizar a classe do css apenas dentro desta página, com isso coloquei o nome do css naoAutorizado.aspx.cs. Automaticamente, a classe dentro do css pode ser acessada de dentro da página .aspx sem qualquer problema.
Para deixar mais claro, veja o que está dentro da página .aspx. Code 4.
<%@ Page Title="" Language="C#" MasterPageFile="~/Principal.Master" AutoEventWireup="true"
CodeBehind="NaoAutorizado.aspx.cs" Inherits="Retaguarda.Web.NaoAutorizado" %>
<asp:Content ID="Content1" ContentPlaceHolderID="header" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div id="divMensagem">
" Você não tem autorização para acessar este recurso! "
</div>
<br />
</asp:Content>
Code 4
E agora veja dentro do CSS. Code 5.
#divMensagem
{
background-image: url('image/pad_opaque.png');
background-repeat: no-repeat;
background-position: center;
width: 950px;
line-height: 256px;
text-align: center;
vertical-align: middle;
font-style: italic;
font-weight: bold;
font-size: 16pt;
}
Code 5
O mesmo div foi utilizado e não houve qualquer referência no HTML da página sobre o arquivo .css.
Bom, espero que tenha esclarecido um pouco mais sobre layout, css e themas utilizando a ferramenta Visual Studio .NET. Fico por aqui e qualquer dúvida pode entrar em contato pelo site. Abraços!