Roteiro 3: Layout básico e Div's: técnicas com uso de ID's e Classes Objetivos Compreender a importância do uso de Elementos de Div no desenvolvimento de Layouts de página; Explorar e aplicar o uso de classes e ID s na formatação de elementos com CSS; Introdução Uma das grandes preocupações do desenvolvedor Web sempre foi com o layout das suas páginas. Sempre foi um dilema optar entre uma página bonita ou uma página que realmente funcione como o esperado. O layout nunca foi fácil de ser elaborado e requer ainda muita preocupação com cores utilizadas, imagens, logitipos, etc. Junto disso, a estilização de elementos existentes no corpo da página é importante para manter um padrão visual nas páginas, isto pode ser observado em grandes portais da internet. O que se percebe é, que ao navegar em determinados portais de internet é possível saber em qual endereço está-se visitando apenas pela sua marca visual. Isto se deve ao fato da aplicação de estilização de parágrafos, tabelas, imagens, espaçamentos, etc, através das regras de CSS. Este roteiro tem como objetivo concentrar na formulação de layouts de página básicos juntamente da estilização de conteúdos para controlar a disposição dos elementos na página. O uso de Divs Uma DIV foi criada para fornecer um mecanismo genérico para agrupar e prover estrutura aos documentos. O elemento div é semanticamente neutro: ele não tem qualquer valor semântico, é simplesmente um elemento container. O elemento div deverá ser usado quando não estiver disponível um outro elemento container e semântico, capaz de substituí-lo tal como são os cabeçalhos, parágrafos, listas etc. Traduzindo: uma div não influencia em nada na página sem ter suas propriedades alteradas, mas ela permite que os elementos da página possam ser organizados quando colocados dentro delas na estrutura do HTML. Por este fato elas passaram a ser utilizadas para compor o layout das páginas. A figura 25 ilustra um exemplo do esquema de uso das divs: Figura 25: Esquema de uso de Div's na estrutura do HTML As divs são utilizadas na estrutura das páginas geralmente para separar as partes da página, criando as áreas reservadas para agrupar os itens do cabeçalho da página, do conteúdo e do rodapé. Desta forma o desenvolvedor pode personalizar o posicionamento, fundo, alinhamento, etc, dos demais itens da página através do CSS. A figura 26 ilustra um exemplo disso. Instituto Federal de Santa Catarina- Campus Garopaba Pág 19
Figura 26: Código de Exemplo com uso de div's e resultado de sua aplicação Aparentemente o visual demonstrado na figura 26 não altera nada na página. Mas com uso do CSS é possível personalizar algumas propriedades e deixar a página com um visual totalmente diferente. A figura 27 ilustra o resultado das modificações. Figura 27: Página com estilos CSS aplicados nas Divs A figura 27 ilustra modificações realizadas no css da página que resultaram na imagem demonstrada utilizando pequenas propriedades aplicadas apenas nas Div's. Estas propriedades são ilustradas na figura 28 a seguir: Figura 28: Código CSS aplicado nas Divs para posicionamento e redimensionamento Instituto Federal de Santa Catarina- Campus Garopaba Pág 20
As principais propriedades utilizadas no posicionamento e redimensionamento de DIV's são detalhadas na tabela x a seguir: Propriedade width height margin-left margin-right margin-top margin-bottom Descrição Controla a largura de um elemento, controlado por padrão em pixels. Controla a altura de um elemento, controlado por padrão em pixels. Controla a margem esquerda de um elemento, controlado por padrão em pixels. A margem é contada sempre a partir do lado 0 dela, ou seja, se é margem esquerda a medida inicia a partir da esquerda. Controla a margem direita de um elemento, controlado por padrão em pixels. A margem é contada sempre a partir do lado 0 dela, ou seja, se é margem direita a medida inicia a partir da direita. Controla a margem superior de um elemento. Controla a margem inferior de um elemento. Tabela 4: Tabela de propriedades para dimensões e posicionamento Utilizando ID's e Classes em elementos Formatar ID's utilizando o CSS é importante para dar cara a um site. Fazendo isto diretamente no CSS com uso do elemento DIV pode ter algumas limitações.por exempo, se quiser diferenciar algumas propriedades de suas div's, pode ser que não seja possível sem utilizar alguns recursos extras. ID's Um ID permite identificar elementos na sua página, fazendo com que possam receber formatações únicas para eles através do CSS. Ao invés de utilizar o CSS inline, o uso de ID permite que sejam identificados elementos e formatados em várias páginas ao mesmo tempo. O uso de id's em elementos é demonstrado na figura a seguir: De acordo com o exemplo demonstrado, para utilizar um id no html é necessário incluir diretamente na tag desejada a identificação do elemento no formato: <elemento id="nomeid">conteúdo</elemento> No CSS, para controlar elementos com uso de ID's, é necessário utilizar o símbolo # precedendo o nome do id criado no HTML, no seguinte formato: #elemento{ propriedade: valor; } Exemplo de uso e resultado dos ID's aplicados em página: Figura 29: Exemplo de uso de ID's no CSS Instituto Federal de Santa Catarina- Campus Garopaba Pág 21
OBSERVAÇÃO: Geralmente os ID's acabam sendo mais utilizados em elementos da estrutura da página e em alguns elementos especiais da página. Classes Uma CLASSE permite criar formatações para grupos de elementos, independente da página que estão. No CSS basta especificar quais propriedades se quer modificar e alterá-las. O uso das classes é demonstrado na figura 30: Figura 30: Exemplo de configuração de classes no HTML Da mesma forma que os ID's, de acordo com o exemplo demonstado, para utilizar Classes é necessário também identificar os elementos que participarão de classes no formato: <elemento class="nomeclasse">conteúdo</elemento> Na configuração do CSS as classes é necessário preceder o elemento com um ponto antes do nome da classe que quiser formatar, no seguinte formato:.nomeclasse{ propriedade: valor; } Exemplo de uso e resultado das CLASSES aplicadas em página: Figura 31: Exemplo de configuração de classe Quando são utilizadas as classes? É muito comum serem utilizadas em grupos de elementos na estrutura da página. OBSERVAÇÃO: Diferença entre ID e CLASSE? ID é utilizado para identificar um único elemento em uma ou várias páginas, e CLASSES são utilizadas em vários elementos em uma ou várias páginas. Instituto Federal de Santa Catarina- Campus Garopaba Pág 22
Tarefas 1. Utilizando toda a estrutura que foi criada no Roteiro 3 (Página do cheff online), copie todos os arquivos e diretórios para serem utilizados no Roteiro 4. Apenas para a sua organização nomeie o diretório de destino como Roteiro4. 2. No css externo, formate uma borda nos elementos de coluna (td{ } ) para obter um resultado semelhante ao exemplo abaixo na página fale-conosco: Dica: as propriedades utilizadas foram border e background-color. 3. No css externo, formate configurações para o elemento table{ } utilizando as propriedades border-collapse, e background-color. A propriedade border-collapse trata das bordas da tabela e os principais valores disponíveis para ela são collapse ou separate. Tente recriar o exemplo a seguir: 4. No css externo que foi criado na aula anterior, em seguida realize as seguintes configurações: 4.1) Crie uma classe no CSS com o nome de.linha com as propriedades a seguir: color; tex-decoration; background-color; 4.2) Crie um ID no CSS com o nome de #CABECALHO com as propriedades a seguir: color; tex-decoration; background-color; 4.3)Com uso destas propriedades, tente recriar o mesmo efeito da figura a seguir na página fale-conosco.html. Depois determine qual foi a funcionalidade de cada propriedade utilizada. Instituto Federal de Santa Catarina- Campus Garopaba Pág 23
5. Acessar o site http://maujor.com/layout3col.shtml e utilizar o exemplo de uso de DIV s no site Cheff Online. Copie o código e cole no seu editor e tente adaptar a estrutura para o site do cheff-online de acordo com o exemplo demonstrado. A figura x ilustra o resultado inicial do layout a ser utilizado e a figura x ilustra o resultado após a aplicação no site Cheff Online. Exemplo de adaptação ao site Cheff Online: Figura 32: Resulado inicial da configuração de layout Figura 33: Exemplo da configuração do layout já aplicado Dicas para a modificação do layout e utilização para o Cheff Online: O layout utilizado tem várias propriedades aplicadas, mas o importante é identificar que as colunas foram elaboradas com DIV's, todas com posicionamento fixo. Ou seja, será necessário especificar o posicionamento delas caso queira modificar a div mais para cima ou mais para baixo. As propriedades mais importantes aplicadas são detalhadas na tabela a seguir: Propriedade top left position paddingbottom Descrição Controla o posicionamento de um elemento a partir de outro partindo do topo. Controla o posicionamento de um elemento a partir de outro partindo da esquerda. Permite determinar como o elemento se comportará no seu posicionamento. Se o posicionamento for definido como absolute o elemento fica fixo no mesmo lugar que foi definido. Controla o espaçamento inferior que um elemento terá desde a sua borda até o seu conteúdo. É uma margem imaginária que praticamente todos os elementos tem. Muito utilizada para a criação de menus. O Arquivo de CSS externo antes utilizado deverá ser incrementado com as novas propriedades utilizada neste layout. Instituto Federal de Santa Catarina- Campus Garopaba Pág 24
Note que existem configurações para os seguintes itens: Propriedade #topo #conteudoesq #conteudodir #colesq #sepesqcolcentral #coldir #sepcolcentraldir #colcentral Descrição Responsável por controlar a div no topo. Armazena o conteúdo da coluna esquerda, deverá ser baixado na estrutura e ter sua margem esquerda alterada. Armazena o conteúdo da coluna direita, deverá ser baixado na estrutura e ter sua margem direita alterada. Consiste em toda a coluna esquerda. A maioria das modificações acompanharão as realizadas em div conteudoesq. Não será modificado. É a linha que separa a coluna esquerda da central. Consiste em toda a coluna Direita. A maioria das modificações acompanharão as realizadas em div conteudodir. Não será modificado. É a linha que separa a coluna central da direita. Constitui a coluna e o conteúdo central. Referências "Propriedade border-collapse", disponível em http://www.w3schools.com/cssref/pr_border-collapse.asp "Página do Maujor", disponível em http://www.maujor.com Instituto Federal de Santa Catarina- Campus Garopaba Pág 25