guia de desenho grÁfico abcd-site -...

GUIA DE DESENHO GRÁFICO ABCD-SITE Versão 4.0.2

Sumário Introdução ....................................................................................................................2 Arquitetura do ABCD-site ..................................................................................................2 Web Standards ...............................................................................................................3

Acessibilidade da interface..............................................................................................4 Tipo I ou Portal ABCD .................................................................................................4 Tipo II ou Portal de Coleção ou Galeria............................................................................5 Tipo III ou Página de Resultados ....................................................................................5

Instruções para personalização (básico) ................................................................................6 Estrutura dos arquivos e pastas no servidor ..........................................................................6 Estrutura das folhas de estilo ...........................................................................................7 Troca do Logo..............................................................................................................8

Carga (upload) da imagem ...........................................................................................8 Troca da imagem no ADMIN..........................................................................................8

Troca do Banner...........................................................................................................9 Carga (upload) da imagem...............................................................................................9 Configuração na CSS .................................................................................................... 10 Alteração no título...................................................................................................... 10

Configurando a CSS.................................................................................................. 12 Instituições ............................................................................................................... 12

Alterando as Instituições ........................................................................................... 13 Configurando a CSS.................................................................................................. 14

Configurações de fontes e cores...................................................................................... 15 Configurações do rodapé............................................................................................... 16

Estrutura .............................................................................................................. 16 Configurando a CSS.................................................................................................. 18

Anexo I (Avançado)........................................................................................................ 19 Layout Fluído e Layout Fechado ...................................................................................... 19 Configuração de Colunas............................................................................................... 21

1

GUIA DE DESENHO GRÁFICO ABCD-SITE

Introdução ABCD-Site funciona como um módulo do ABCD que combina a idéia de “portal” para unir os usuários

• recursos com as informações relevantes dos sistemas parceiros juntos em uma rede de fontes de informações

• o próprio OPAC para recuperação de informação no seio do próprio sistema, mas também a outras bases de dados semelhantes, e

• com fornecedores de informação (a biblioteca) através das "comunicações" (por exemplo, anúncios, artigos)

Este manual está dividido em 3 (três) capítulos, dois dos quais dedicados aos conceitos e normas utilizadas e outro referente as possíveis customizações a nível básico. O anexo I contém tópicos avanzados em termos de customização e configuração.

A informação, neste documento, foi escrita como um guia genérico para auxiliar os usuários no processo de customização de layout e estilos de forma a cumprir os requisitos de uma instância do ABCD. Não se pretende que seja um manual passo a passo e presume-se que o usuário tenha conhecimento prévio básico em XHTML e CSS, bem como habilidades avançadas em web design e layout.

O guia tem o propósito de orientar o processo de desenho gráfico de sites do Sistema de Automação de Bibliotecas e Centros de Documentação – ABCD utilizando-se a ferramenta BVS-Site v4.0 da BIREME .A adoção do modelo gráfico descrito no guia para a operação das interfaces nos portais e sítios do ABCD é recomendado considerando os seguinte aspectos:

• O modelo de interface e navegação proposto está fundamentado nos "Critérios Ergonômicos para Avaliação de Interfaces Humano-Computador"1 e estão implementados de modo a facilitar e aumentar a eficiência da operação o ABCD;

• Uma interface padronizada potencializa o cumprimento das tarefas típicas de localização de informação, particularmente em ambiente de rede de fontes de informação como é o caso do ABCD;

Arquitetura do ABCD-site ABCD-Site é uma versão simplificada e personalizada do BVS-Site v.4.0 da BIREME. Você pode acessar a versão completa em http://bvsmodelo.bvsalud.org/php/level.php?lang=pt&component=27&item=10

A arquitetura de processamento de dados e informação do ABCD está estruturada em 3 camadas independentes e interoperativas. Na primeira camada estão os arquivos de dados

1 Bastien JMC; Scapin D. Ergonomic Criteria for the Evaluation of Human-Computer interfaces. Institut National de recherche en informatique et en automatique, France, 1993.

2

http://bvsmodelo.bvsalud.org/php/level.php?lang=pt&component=27&item=10

ABCD GUIA DE DESENHO GRÁFICO ABCD-SITE

correspondentes aos diferentes tipos de fontes de informação de uma Biblioteca Virtual. Sobre essa camada, estão os índices de acesso que são gerados pelas aplicações do ABCD e por outros serviços de indexação como, por exemplo, o ISIS, Collexis, Google, OAI, Yahoo, etc. Na última camada, estão as interfaces de acesso à informação.

Cada uma das camadas é operada no ABCD de maneira a compor a Rede de Fontes de Informação, a Rede de Índices e a Rede de Interfaces.

A separação em camadas permite a possibilidade quase infinita de produzir interfaces de acesso ao conteúdo e à disponibilidade de conteúdos em formatos que sejam adequados a diferentes idiomas, serviços, meios de comunicação e acesso a diferentes dispositivos como computadores, monitores, impressoras, dispositivos de áudio, PDAs, telefones celulares , etc.

Figura 1 - Arquitetura de processamento do ABCD site

Com a operação da Rede de Interfaces espera-se estimular a criação de uma rede de colaboração no modelo de software livre que poderá explorar e compartilhar novas interfaces de acesso aos conteúdos da BVS. Deste modo, facilita-se o uso das fontes de informação em inumeráveis serviços.

Web Standards O ABCD opera utilizando Web Standards2 e código XHTML3 estruturado em tableless (sem o uso de tabelas como recurso de layout) , fator fundamental que possibilitou a separação das camadas de conteúdo, índices e apresentação.

Esses standards, estabelecidos pelo World Wide Web Consortium - W3C e outras entidades reguladoras, são um conjunto de normas e padrões para criar e interpretar conteúdo na web.

A utilização desses padrões resulta na criação de sites mais acessíveis, para um maior número de pessoas e para uma diversidade de dispositivos de acesso, uma vez que o código XHTML está baseado no "markup" do conteúdo, o que possibilita a associação de semântica ao código.

2 Web Standards Project – http://www.wasp.org

3 Extensible Hypertext Markup Language

3


Além disso, seu uso facilita a criação e integração de Web Services, que compõe um conjunto de padrões e protocolos abertos usados para a troca de dados e informações entre aplicações, sistemas e serviços.

Acessibilidade da interface Acessibilidade na web significa que pessoas portadoras de deficiências físicas, sensoriais ou cognitivas poderão perceber, entender, navegar e interagir com a web da mesma forma que contribuir.

As implementações na interface do ABCD atingem o padrão de Conformidade AA (Web Content Accessibility Guidelines 1.0, WAI - Web Accessibility Initiative, W3C)4, o que representa que todos os requisitos essenciais bem como os que deveriam ser cumpridos estão atendidos.

A navegação no ABCD é baseada em três tipos genéricos de páginas web

Tipo I ou Portal ABCD Página web que opera o acesso a coleções de fontes de informação de dois ou mais tipos.

Identidade Visual, cores e design

Rodapé:

Informações Institucionais e Localização

Coluna 1

Redes e

ABCD Iniciativas

Componente da pesquisa

Coluna 3

Destaques

Noticias

Coluna2 – Redes de Fontes de Informação e Serviços

Figura 2 – Página inicial do portal ABCD

No portal ABCD a página inicial de Tipo I é constituída por um conjunto de informações de componentes gerados dinamicamente de acordo a organização do conteúdo ou através de Web Services.

Em páginas do Tipo I, os componentes estão distribuídos nas colunas da interface de acordo com a seguinte organização: • Coluna 1 – Redes: acesso às redes BVS e SciELO , e às iniciativas do ABCD organizadas

por país. • Coluna 2 – Fontes de Informação: esta coluna organiza o acesso aos diferentes tipos de

fontes de informação. • Coluna 3 – Áreas temáticas: esta coluna organizada o acesso por área temática e

assunto, com uso privilegiado dos thesaurus Descritores em Ciências da Saúde (DeCS)

4 WAI

4


• Coluna 4 – Destaques e Notícias: coluna destinada à comunicação de destaques e noticias, privilegiando os conteúdos gerados no âmbito da "Rede de Notícias do ABCD"

Tipo II ou Portal de Coleção ou Galeria Página que opera uma fonte de informação isolada ou uma coleção de fontes de informação do mesmo tipo. Por exemplo, bases de dados bibliográficas, diretório de eventos, etc.

Tipo III ou Página de Resultados Página que opera a apresentação e a navegação nos resultados de operação sobre uma ou mais fontes de informação.

A seguir, estão descritos os procedimentos para personalização de um site utilizando-se o sistema ABCD-Site v4.0.2

5


Instruções para personalização (básico) A Interface do ABCD Site foi desenvolvida propiciando uma personalização fácil e rápida. Para tanto são necessários alguns conhecimentos básicos de CSS (Cascadind Style Sheets), linguagem de estilo utilizada pela Interface do ABCD Site. Também é aconselhável a utilização

1. 2.

3.

Programa para editar e tratar imagem,

Editor de HTML e CSS

Programa FTP cliente, para envio de imagens e arquivos para o servidor5.

Estrutura dos arquivos e pastas no servidor O Sistema ABCD Site utiliza uma estrutura de pastas para alocar os arquivos que utiliza, é necessário um breve conhecimento dessa estrutura para a personalização da interface.

Figura 3 - Estrutura de Diretórios do ABCD-Site

O diretório "bases", não será trabalhado neste Manual, pois é um diretório específico do sistema que não interfere na personalização da Interface, o diretório a ser trabalhado será o "htdocs" que contém dois diretórios específicos para personalização o "CSS" e o "image".

5 Recomendamos, como exemplo, alguns programas gratuitos

1. FileZilla 3.2.6.1 – FTP cliente

2. IrfanView 4.25 – Editor de imagem

6


Figura 4 – Diretórios a serem trabalhados

O diretório "css" contém as folhas de estilo do ABCD Site. Para customizar a Interface será necessário fazer as alterações nas folhas de estilo do diretório common (figura 02), nela estão hospedados quatro arquivos de CSS que serão detalhados no tópico a seguir.

O diretório image contém todas as imagens do ABCD Site, as imagens do diretório public/skins/classic são as que aparecem no ABCD Site que chamamos de públicas e está dividido em 5 subdiretórios: • common: contém as imagens comuns em qualquer idioma do ABCD Site, são imagens que

não são identificáveis em um único idioma. Exemplo: banner e fundos; • en: contém os arquivos específicos do idioma inglês. Exemplo: logotipo do ABCD-site,

títulos do site (quando produzidos como imagens), etc.; • es: contém os arquivos específicos do idioma espanhol. Exemplo: Idem;

• fr: contém os arquivos específicos do idioma frances. Exemplo: Idem;

• pt: contém os arquivos específicos do idioma português. Exemplo: Idem;

Estrutura das folhas de estilo As folhas de estilo do ABCD Site são divididas em 4 arquivos diferentes no diretório htdocs/site/css/public/skins/classic/common são eles: • general.css – nessa CSS estão os atributos gerais do site, como cor e tipo de fonte padrão

utilizada no site. • layout.css – em layout definem-se os tamanhos, posições dos elementos, margens, etc.

• styles.css – nessa CSS estão as definições de estilo do ABCD Site, cores dos elementos, imagem do banner, estilos tipográficos, bordas, etc.

• components.css - definições dos componentes do ABCD Site. Nesse arquivo pode se efetuar alterações em componentes específicos da Interface. Exemplo: mudar cor de um único componente como a "search box".

As folhas de estilo são carregadas pelo sistema conforme a ordem apresentada anteriormente. Portanto uma alteração na última CSS a components subscreverá o elemento definido nas CSS´s anteriores. É por isso que a components é a CSS que abriga as definições de elementos específicos.

7


Troca do Logo A Interface do BVS Site, quando instalada já vem com os logos do ABCD em seus respectivos diretórios, mas dependendo do layout será necessário produzi-los novamente. Recomenda-se usar logotipo no formato GIF que suporta transparência. Note que o logotipo deve estar disponível em todos os diferentes idiomas do seu site.

Carga (upload) da imagem As imagens do logo deverão ser enviadas via transferência de arquivos para o diretório específico de cada idioma.

Supondo que existe um logo geral do ABCD Site (independente do idioma), logoABCD.gif, então você deve carregá-lo em : /site/image/common/logoABCD.gif

Porém, se o logo depende do idioma ( conta com texto) você deve desenvolver um para cada idioma: logoABCD_es.gif, logoABCD_pt.gif, etc. Estes arquivos devem ser enviados aos seus diretórios respectivos.

File Directory logoABCD_en.gif htdocs/images/public/skins/classic/en/

logoABCD_es.gif htdocs/images/public/skins/classic/es/

logoABCD_pt.gif htdocs/images/public/skins/classic/pt/

logoABCD_fr.gif htdocs/images/public/skins/classic/fr/

Tabela 1 – Upload dos logos.

Troca da imagem no ADMIN Após o upload das imagens do logo o passo seguinte é efetivamente providenciar a substituição do logo na interface. Essa substituição é feita pelo Sistema de Administração do Site que está disponível através do endereço base do ABCD Site, acrescido de /admin. Portanto se a Interface estiver com o seguinte endereço " http://ABCD_Site.org " o Sistema de Administração estará em " http://ABCD_Site.org/admin ".

O Sistema pedirá um usuário e uma senha.

Para a troca do logotipo deve-se acessar o link “ABCD-Site logotipo" na área de estrutura do sistema de Administração do ABCD-Site e logo a seguir clicar e modificar o item que já estará habilitado no ABCD-Site.

Figura 5 – Etapas para a troca do Logotipo

8


A troca do logotipo é efetuada na janela a seguir:

Figura 6 – Troca do logotipo

Rótulo: identifica o logotipo.

Imagem: Imagem que será carregada no logotipo;

Link: link que terá o logotipo.

Após as configurações necessárias para efetuar as alterações é necessário confirmar as mesmas clicando em Modifica e efetuando a gravação de todas as etapas anteriores.

! A troca do logotipo deverá ser efetuada em todos os idiomas habilitados no ABCD Site. A Sintaxe %SKIN_IMAGE_DIR% deve preceder o nome do arquivo do logotipo, esta sintaxe garante que o logotipo utilizado será o carregado pela skin criada.

Troca do Banner No ABCD Site o banner é um dos elementos gráficos principais, é ele o responsável pela representação artística do conteúdo da Interface e pela correlação dos elementos, garantindo uma consistência do desenho com o conteúdo. O banner deverá conter apenas as imagens que serão inseridas em uma área comum e servirá como um elemento gráfico para todos os idiomas. A medida do banner é de 760 pixels de largura por 110 pixels de altura.

Carga (upload) da imagem A imagem do banner deverá ser enviada via transferência de arquivos para o diretório de imagens common.

9


Configuração na CSS O banner está identificado no código XHTML no <div class="top">

Figura 7 - Localização do título no código XHTML

As propriedades e configurações do banner estão descritas no arquivo styles.css sendo estas:

Figura 8 – Substituição do banner na CSS

Para substituir o banner edite a propriedade background no seletor (.top) substituindo a imagem desejada e quando necessário fazendo os ajustes de cor.

Alteração no título O título do ABCD Site é alterado pelo Sistema de Administração do Site que está disponível através do endereço base do ABCD Site, acrescido de /admin. Portanto se a Interface estive com o seguinte endereço "http://ABCD_Site.org " o Sistema de Administração estará em "http://ABCD_Site.org/admin ".


Para efetuar a troca do título da Interface é necessário clicar na opção "Identificação" presente na área de estrutura do sistema. O próximo passo é selecionar o título e clicar em modificar na janela que se abre a seguir.

10


Figura 9 – Etapas a seguir para a alteração do título da Interface

Após clicar em modificar o sistema abrirá uma janela onde se deve inserir o título do BVS Site ou uma imagem correspondente ao mesmo.

Figura 10 – Inserindo um título ao ABCD Site

Rótulo: Título do ABCD Site

Imagem: Imagem que represente o título do ABCD Site (casos especiais)


! A alteração do título do ABCD Site deverá ser efetuada em todos os idiomas habilitados no sistema. A alteração em um único idioma não altera os demais.

11


Configurando a CSS O título está identificado no código XHTML no <div id="identification">

Figura 11 - Localização do título no código XHTML

Após a substituição do título no sistema de administração do ABCD Site, abaixo segue uma lista das alterações possíveis para o título do ABCD Site. Na CSS styles é possível mudar a cor e/ou tamanho do título no seletor ”.top #identification H1" alterando a propriedade color para mudar as cores e a propriedade font-size para alterar o tamanho do Título.

Figura 12 – Mudança de cor do título na CSS styles.

Na CSS layout é possível alterar a posição e/ou o tamanho da área destinada ao título no seletor ".top #identification". Alterando o width é possível mudar o tamanho da largura da área destinada ao título e em height o tamanho da altura da área destinada ao título.

Na mesma CSS é possível alterar as margens do título no seletor ".top #identification H1". Alterando as definições das margens na propriedade margin.

Figura 13 - Exemplo de alterações de margens no título

Instituições O campo instituições é o campo responsável por apresentar os nomes, logos e links (quando disponível) das instituições responsáveis pelo ABCD Site.

12


Quando a instituição for representada pelo seu logo se deve ter um cuidado em preparar a imagem, pois ela deve ser em formato GIF, pois esse formato suporta transparência. O tamanho definido na configuração padrão do ABCD Site é de 55 pixels de altura.

Alterando as Instituições O campo instituições é alterado pelo Sistema de Administração do Site que está disponível através do endereço base do BVS Site, acrescido de /admin. Portanto se a Interface estive com o seguinte endereço "http://ABCD_Site.org " o Sistema de Administração estará em "http://ABCD_Site.org/admin ".


Para efetuar a substituição das instituições é necessário clicar na opção "Instituições" presente na área de estrutura do sistema. O próximo passo é selecionar a instituição e clicar em "modifica" na janela que se abre a seguir.

Para inserir uma nova instituição é necessário clicar no campo "adiciona" na mesma janela

Figura 14 – Modificando as Instituições

Após clicar em adiciona o sistema abrirá uma janela onde se deve inserir o título da instituição ou seu logo e o hiperlink.

Figura 15 – Caixa de inclusão ou alteração das instituições

Nome: Nome da Instituição

Imagem: Logo da Instituição (o uso de uma imagem suprime o nome da instituição)

Link: Endereço eletrônico da instituição.

13



! A inserção/alteração das instituições deverá ser efetuada em todos os idiomas habilitados no ABCD Site. A Sintaxe %SKIN_IMAGE_DIR% deve preceder o nome do arquivo do logotipo, esta sintaxe garante que o logotipo utilizado será o carregado pela skin criada.

Configurando a CSS O campo instituições está identificado no código XHTML no <div id="institutionList">

Figura 16 – Localização do campo Instituições no código-fonte.

Após a configuração do campo "instituições", alguns ajustes na CSS podem ser necessários. As definições das instituições são encontradas no seletor ".top #institutionList" presentes nas CSS´s styles e layout. Na CSS style estão definidas as cores e tamanhos conforme abaixo:

Figura 17 – Exemplo de ajustes de cores e fontes das instituições

• text-align – define o alinhamento do texto dentro da área destinada às instituições;

• list-style – definida como none por se tratar de uma lista é comum o uso de bullets, mas como essa lista é disposta em linha esses bullets foram retirados;

• font-size: Define o tamanho da fonte;

• text-decoration: aqui pode-se definir se o texto será sublinhado ou não;

• color: define a cor da fonte das instituições. (não se aplica aos logos).

14


Configurações de fontes e cores As famílias de fontes tipográficas utilizada na interface do site são Trebuchet MS e Verdana, pois de acordo com recomendações habituais feitas, possibilitam uma excelente legibilidade nos tamanhos habitualmente utilizados na Web. São fontes "sem serifa" e, portanto, altamente recomendada para leitura em telas de computador, e já vem instaladas na maioria dos sistemas operacionais. Utiliza-se, alternativamente, a família Arial que possui as mesmas características básicas.

Através de CSS é possível redefinir as famílias tipográficas. As definições genéricas das fontes encontram-se no arquivo general.css, como mostra a figura a seguir:

Figura 18 – Seletores responsáveis pelas fontes na CSS.

Para modificar a fonte, redefina a propriedade font-family dos seletores BODY, INPUT, TEXTAREA, SELECT e H1, H2, H3 como mostrado na imagem. As configurações do tamanho das fontes encontram-se no mesmo arquivo e estão definidas no atributo font-size.

Na instalação padrão do ABCD-Site 4.0.2 as cores das fontes não estão definidas na css. Para isso, é necessário criar dentro dos seletores o campo color. Seguem abaixo, exemplos para definição das cores nos seletores.

Figura 19 – Exemplos de definições de cores nos seletores

Note que nos dois primeiros seletores não há definição de cores para os elementos ali descritos, assumindo a cor preta para todos os elementos tipográficos do site.

15


Abaixo, um exemplo da definição de cores e o resultado no site.

Figura 20 – Definições de cores na CSS e resultado no site.

Configurações do rodapé Na instalação padrão do ABCD-Site 4.0.2, o rodapé contém as informações institucionais, localização e formas de contato. Para alterar essas informações, é necessário entrar na área de administração do site. A área de administração está disponível através do endereço base do seu ABCD, acrescido de "admin ". Portanto, se o endereço for http://ABCD_Site.org/, bastando acrescentar "admin” ao final da URL para entrar na área de administração do ABCD, por exemplo: "http://ABCD_Site.org/admin”.

Estrutura Aplica-se ao gerenciamento de dados informativos sobre a BVS (nomenclatura, rótulos, idiomas) bem como a organização dos componentes (fontes de informação, temas e comunidades) etc. Para a alteração do conteúdo do rodapé clique em instituição responsável, como mostra a figura abaixo:

Figura 21 – Etapa para a alteração do rodapé

16


Em seguida selecione a instituição responsável e clique em modifica

Figura 22 – Selecionando a instituição responsável

Em seguida, será aberta uma janela contendo as informações do rodapé. Para facilitar as edições do texto selecione o editor de XHMTL (clique aqui para usar o editor XHTML), conforme exemplifica a imagem abaixo:

Figura 23 – Editando as informações do Rodapé

Feito isso, é possível modificar as informações em um editor de texto onde estão disponíveis diversas ferramentas de formatação semelhantes ao Word.

17


Figura 24 – Editando as informações em um editor de texto

Configurando a CSS As configurações do rodapé encontram-se no código XHTML <div id=“footNotes”>

Figura 25 – Localização da estrutura do rodapé no código fonte. As configurações de cores de fundo, cor e tamanho da fonte estão definidas no arquivo styles.css, nos seguintes seletores:

18


Figura 26 – Localização da estrutura do rodapé no código fonte.

Anexo I (Avançado)

Layout Fluído e Layout Fechado Chamaremos “layout fluído” (fluid layout) a imagem do site ocupa 100% da área de trabalho, incluindo a redefinição da janela, a apresentação e o tamanho se adaptam ao novo formato. ”Layout fechado” (closed layout) é a que ocupa uma parte da área, uma área fixa, que independe do tamanho da área de trabalho.

Figura 27 – Layout fluído e layout fechado

Na instalação do ABCD‐site, o layout inicial é o fluído. A CSS que define as configurações da página está no arquivo \ABCD\www\htdocs\site\css\public\skins\classic\common\layout.css, na linha .container

19


Figura 28 – Modelo de layout fluído

No código acima não temos definido a largura do container, o que caracteriza o “layout fluído” (fluid layout) a imagem do site ocupa 100% da área de trabalho, incluindo a redefinição da janela, a apresentação e o tamanho se adaptam ao novo formato. ”Layout fechado” (closed layout) é a que ocupa uma parte da área, uma área fixa, independente do tamanho da área de trabalho.

Abaixo, um exemplo da definição da largura do .container e do layout da página resultante.

Figura 29 – Modelo de layout fechado

Para definição da cor de fundo do site, modifique o arquivo \ABCD\www\htdocs\site\css\public\skins\classic\common\general.css na linha BODY -> backgorund pela cor que deseja.

A seguir um exemplo de definição de cor de fundo (backgorund) no corpo (body) e seu visual no site web.

20


Figura 30 – Modelo de layout fechado com aplicação de cor de fundo cinza

Configuração de Colunas As estruturas das colunas estão idenficadas no código XHTML como firstColumn, secondColumn e thirdColumn.

Figura 31 – Colunas

As propriedades de configuração do tamanho das colunas estão definidas no arquivo layout.css, como:

Figura 32 – Configuração das colunas

21


Para aumentar ou diminuir a largura das colunas modifique o campo width em cada um dos seletores (.middle .firstColumn, .middle .secondColumn, .middle .thirdColumn) para os valores desejados.A imagem abaixo mostra a redefinição dos valores:

Figura 33 – Exemplo de redefinição de largura das colunas

No arquivo styles.css também pode se mudar a cor de fundo (background) das colunas, cores e tamanho das bordas (border-top, border-left ) e tamanho da fonte(font-size). Para alterar, editar o seletor: .firstColumn DIV, .secondColumn .centerLeftColumn DIV, .secondColumn

.centerRightColumn DIV, .thirdColumn DIV, #search, #searchConcepts, .level2 .middle DIV.

Figura 34 – Trocando as cores das colunas na CSS

22


A seguir exemplo de alteração dos seletores mencionados acima

Figura 35 – Demonstração de troca de cores das colunas na CSS

23

guia de desenho grÁfico abcd-site -...

Documents