3 de 13 Índice 1. Mapa CSS e legenda das principais imagens que compõe as paginas...4 a. Conhecimentos desejáveis:...4 b. Modelos Clássico e Fundo Fixo:...4 c. Para o designer o que muda entre o modelo clássico e o modelo fundo fixo?...4 2. A Ordem das Divs e alguns atributos......5 3. A tag Body...5 4. A Div Geral...6 5. A Div Cabeçalho e seus atributos......6 6. A Div Menu e seus atributos......7 7. A Div Menu_Centraliza e seus atributos......7 8. A Div Conteúdo e seus atributos......7 9. A Div Conteúdo_Centraliza e seus atributos......7 10. Alterando as cores do Menu Principal...8 11. Alterando as cores do Titulo do Submenu e das opções do Submenu (barra lateral)...8 12. Alterando as cores do Submenu na pagina Index...9 13. Alterando as cores no corpo da pagina do Titulo, Subtítulo, Corpo e Rodapé...10 14. Veja onde cada imagem esta alocada e seu comportamento...11 a. Legenda de Imagens geradas por cada parte (Modelos Classico)...12 15. Veja onde cada imagem esta alocada e seu comportamento...13 a. Legenda de Imagens geradas por cada parte (Modelos Fundo Fixo)...14
4 de 13 1. Mapa CSS e legenda das principais imagens que compõe as paginas dos modelos clássico e Fundo Fixo a. Conhecimentos desejáveis: Para melhor compreensão descrevemos abaixo algumas ferramentas que podem facilitar o desenvolvimento das imagens, no entanto o usuário está livre para utilizar a ferramenta que melhor se adapta as suas necessidades. Photoshop CS2 ou superior: Intermediário; XHTML/CSS: Básico; Dreamweaver ou editor semelhante: Básico; Não há necessidade de qualquer tipo de edição nos arquivos HTML presentes nos modelos, é desejável conhecimento em alguma ferramenta de edição, apenas a nível de aprendizagem, pois, ao abrir alguns dos arquivos HTML presentes nos modelos, através de um editor, é possível ter uma maior compreensão de como é formada a estrutura do site. b. Modelos Clássico e Fundo Fixo: Modelo clássico: tem como característica o modelo convencional encontrando na maioria dos sites, é composto pelo cabeçalho, barra de menu e corpo, ao adicionar conteúdo essa barra de menu e o corpo esticam replicando a imagem já existente dentro das tabelas que compõe o menu e o corpo. Modelo fundo fixo: tem como característica uma imagem fixa como background, ao adicionar conteúdo e as tabelas que compõe a pagina esticarem, a imagem ao fundo continuara sempre na mesma posição permitindo que apenas a tabela role sobre o background, para a skin funcionar adequadamente, é necessário gerar essas imagens mesmo que transparentes no caso de uma imagem opaca como background, caso esta imagem tenha cores vivas, será necessário criar as demais imagens semi transparentes (opacidade 80%). c. Para o designer o que muda entre o modelo clássico e o modelo fundo fixo? Para o designer iniciante, será mais fácil trabalhar com o layout fundo fixo, pois as imagens abaixo do cabeçalho e Menu principal, devem ser transparentes ou opacas (branco com opacidade em 80%) (salve os recortes do modelo com a extensão.png-24) desta forma só precisara criar o Cabeçalho, Menu e Background (estes devem estaro em.jpg, estas nunca serão transparentes). Já o Modelo Clássico será necessário uma compreensão maior sobre cada imagem, onde cada uma esta alocada, como devem se comportar, mais abaixo iremos abordar esta questão e indicar onde esta as principais imagens e como se comportam.
5 de 13 Mapa da estrutura XHTML / CSS do Portal Div ID = "geral" Div ID = "cabecalho" Div ID = "cabecalho_centraliza" Div ID = "menu" Div ID = "menu_centraliza" Div ID = "menu2" Div ID = "conteudo" Div ID = "conteudo_centraliza" A imagem acima ilustra como o esqueleto (estrutura) funciona, existe a div mestre (geral) que abrigará 3 estruturas, que são (cabecalho, menu, e conteudo ), que por sua vez irão conter dentro de si outra div, esta, responsável pela disposição em que o site irá aparecer (à esquerda ou centralizado), Foi feito esta separação a fim de facilitar, caso houvesse a necessidade de remover a barra de Menu bastaria excluir ou ocultar a div Menu, trabalhar partes da pagina de forma independente facilita na construção do portal, no manuseio do código, e principalmente para o designer que não tem que gerar muitas imagens para compor o site, abaixo falaremos mais sobre as DIVS e a importância de cada uma: CONHEÇA UM POUCO SOBRE CSS DA ESTRUTURA 2. A Ordem das Divs e alguns atributos... É muito importante que não se altere a ordem das divs, no caso de fazer tal alteração seria obrigatório o uso do atributo (position: absolute;) e seria difícil manipular a pagina quando ela precisasse esticar pra se adequar as informações. Por default, o CSS interpreta o atributo position como relative isso da melhor flexibilidade, pra manipular o código de forma que fique igual em todos os browsers, e não obriga o desenvolvedor a declarar as coordenadas dos atributos (top e left) o uso do atributo position:absolute: implica em vários outros atributos (top, left e zindex que funciona apenas com o absolute). sendo esses os principais relacionados, isso porque utilizando o absolute é obrigatório determinar a distancia do topo e esquerda da pagina, exemplo: a div cabeçalho tem height:231px, então o desenvolvedor terá que determinar na div menu que seria a próxima div, o atributo top:231px; e as divs não poderiam ter o atributo height:auto para esticar, porque elas passariam por cima da div seguinte, que já tem uma distancia determinada pelo atributo top, então isso torna a troca de ordem das divs inviável. 3. A tag Body Esta tag define atributos na pagina, desde que não haja um atributo para alguma parte do site, então esta área onde não foi definidos os atributos, irá assumir os atributos que são colocados na tag body. Porém, esta tem outras funções, sendo uma delas muito útil, ela ira abrigar o back_conteudo (imagem que caracteriza o background do site) Você pode estar se perguntando Porque colocar esta imagem no body e não na div back_conteudo?, a resposta é muito simples, por uma questão estética, colocando esta imagem na tag body, desde que a imagem seja grande o suficiente para cobrir todos os monitores por mais que a resolução seja alta. Isso
6 de 13 permite que mesmo que o cliente tenha pouco conteúdo, o fundo ficara sempre coberto por alguma imagem e não aquele fundo branco ou preto... body{ /* background:url(back_conteudo.jpg) no-repeat fixed center top;*/ /*Se seu modelo for o de Fundo fixo Habilite esta tag */ font-size:12px; color:#000000; 4. A Div Geral A div geral é opcional o uso dela fica a critério do Designer / Desenvolvedor, isso porque nesta estrutura foi usada 1 Div para abrigar cada parte do site, por exemplo, a div cabeçalho abriga a div cabecalho_centraliza, desta forma a div cabeçalho ficara responsável pelo papel da div geral e as mesmas utilizam a propriedade "width:100%" (horizontal) e "height:auto" (vertical) portanto elas já se adequarão a toda a resolução que estiver disponível no monitor do usuário, se não houvesse essas divs o uso da div geral seria obrigatório, uma vez que seria esta, à determinar o espaço que o site poderá ocupar. No caso da estrutura acima o uso da div geral se restringe apenas a uma melhor organização do código. #geral { width:100%; 5. A Div Cabeçalho e seus atributos... Esta div é responsável por abrigar todo o conteúdo do cabeçalho, isso incluí o background do cabeçalho (layout clássico), a imagem que fica atrás da pagina, a div cabeçalho não determina as dimensões da pagina, ela determina o máxima de resolução que a imagem do site terá, geralmente 1440px a 1600px, por default, esta em 100% isso porque neste caso não é necessário o atributo margin:0 auto; para centralizar a pagina, bastando acrescentar na linha do atributo background:url (nome_da_imagem.jpg) os atributos top, bottom ou fixed, fazem sua função e também centralizam a imagem; No caso da imagem não precisar se replicar infinitamente ou se ela for uma imagem que ao replicar fique com falhas o que é muito comum, pode-se adicionar o atributo no-repeat, desta maneira ficaria assim conforme o exemplo: #cabecalho { background:url(back_cabecalho.jpg) top no-repeat; width:100%; A Div Cabeçalho_Centraliza e seus atributos... Esta abrigará as tabelas e imagens que compõe o cabeçalho e é responsável por determinar a resolução real da pagina, exemplo 800x600, 1024x768 e 1440x900, por default a pagina sempre é feita se baseando na maioria dos usuários, que tem seus monitores com resolução de 1024x, para estes, é usado o atributo width com 1003px (1024px), no caso de criar imagens maiores que 1003px vai gerar uma barra horizontal no browser e a leitura do site se tornará cansativa. Para centralizar a div é necessário o atributo margin:0 auto, uma vez que esta div não ira trazer nenhuma imagem; ele fará a div ficar centralizada dentro da div pai (cabeçalho) height sempre com o atributo auto desta forma a div ira se adaptar ao tamanho da imagem que for colocada no cabeçalho. #cabecalho_centraliza { width:1003px; margin:0 auto;
7 de 13 6. A Div Menu e seus atributos... Esta div é responsável por abrigar o conteúdo do Menu principal, que são as divs menu_centraliza e menu2 (acabamento da barra de menu principal); Note que no atributo background tem o atributo repeat-y no caso desta barra, não queremos que ela replique na horizontal, ela deve replicar apenas na vertical. Outro fator importante é a imagem que compõe a barra de menu, esta deve conter uma cor sólida, sem imagens elaboradas, isso porque ela ira se replicar na eventualidade do cliente ter muito conteúdo e muitas opções no menu, necessitara de uma segunda ou terceira linha no menu, isso irá criar uma falha na repetição da imagem e o aspecto do site não ficara bonito. #menu { background:url(back_menu.jpg) top repeat-y; width:100%; 7. A Div Menu_Centraliza e seus atributos... Esta abrigará as tabelas e imagens que compõe Menu do site, a esta emprega-se as mesmas regras vistas anteriormente na div cabeçalho_centraliza. #menu_centraliza { width:1003px; margin: 0 auto; 8. A Div Conteúdo e seus atributos... Esta abrigara a div conteúdo_centraliza, bem como todo o conteúdo da pagina, a esta se emprega as mesmas regras e atributos utilizados na div cabeçalho, porém com alguns diferenciais que também podem ser utilizados para outras divs, por exemplo, no conteúdo é bem comum o background ter que replicar, e por default ele sempre ira replicar para direita e para baixo, porem isso pode ser controlado, para esticar somente para baixo (repeat-y, repete apenas na vertical) e para replicar somente para direita (repeat-x, replica apenas na horizontal), Caso queira esticar a tabela do conteúdo, mas não quer que a imagem se replique para baixo, muito comum quando se trata de imagens em degrade, neste caso deve-se colocar o atributo no-repeat e colocar na tabela o código hexadecimal da cor final do degrade, ai quando acabar o degrade ele vai continuar naquela cor sólida no final do degrade dando assim continuidade a imagem. (isso não se aplica ao nosso sistema, já que o designer não terá acesso as paginas que compõe o sistema, ficando livre pra se dedicar apenas as imagens, estas dicas são apenas a nível de aprendizagem.) Caso queira manter o background fixado e deixar que a tabela role sobre o background basta colocar os atributos no background no-repeat fixed center top, na tag do #body e remover da tag #conteudo. As tabelas dentro da div conteúdo_centraliza, devem ficar com imagens transparentes cobrindo a área, no formato.png-24). Neste caso ficaria assim: #body { background:url(back_conteudo.jpg) no-repeat fixed center top; (modelo fundo fixo) #conteudo { background:url(back_conteudo.jpg) top repeat-y; (modelo clássico) width:100%; 9. A Div Conteúdo_Centraliza e seus atributos... Esta abrigará as tabelas e imagens que compõe o Corpo do site, a esta se emprega as mesmas regras vistas anteriormente na div cabeçalho_centraliza. #conteudo_centraliza{ width:1003px;
margin:0 auto; CAUETEC INFORMÁTICA 8 de 13 ADEQUANDO AS CORES DAS FONTES À SUA SKIN De acordo com as cores de sua SKIN, precisará determinar também a CSS dessa skin de modo que as fontes fiquem em harmonia com a skin. O arquivo CSS (style.css) esta disponível junto aos modelos disponibilizados pela Cauetec, a CSS deve ficar dentro da pasta Galeria/skin/1 junto com as imagens da skin. Para facilitar iremos informar as tags onde devem ser feitas as alterações de cores e alguns atributos caso seja necessário. 10. Alterando as cores do Menu Principal Quando for editar a CSS localize esta tag.menu, note que há comentários sinalizando onde devem ser alterados os valores, não altere tamanho de fonte, tipo de fonte, alinhamento do texto e distância das bordas, isso acarretaria em um mau funcionamento da skin/sistema: /* INICIO - Estes atributos são referentes à barra de Menu principal*/.menu { font-size:12px; text-align:left; color:#ffffff; /*Mude aqui as cores das barras de separação " " entre as opções do MENU*/ padding-left:15px; padding-top: 5px; padding-bottom: 5px;.Menu a{ color:#ffffff; /*Mude a cor das opções de MENU*/.Menu a:hover{ color:#17b6e4; /*Mude a cor das opções de MENU quando o cursor do mouse estiver sobre esta opção*/ /* FIM - Estes atributos são referentes à barra de Menu principal*/ 11. Alterando as cores do Titulo do Submenu e das opções do Submenu (barra lateral) /* INICIO - Estes atributos são referentes ao Titulo da barra de SubMenu */ #Submenu{ /*ID do Submenu Titulo */ padding-top:20px; padding-left:20px; padding-bottom:5px; color:#ffffff; /*Mude aqui a cor do Titulo do SUBMENU */ font-size:15px; text-align:left; font-weight:bolder; /* FIM - Estes atributos são referentes ao Titulo da barra de SubMenu */ /* INICIO - Estes atributos são referentes as opções de SubMenu */
.Submenu{ color:#ffffff; /*Mude a cor dos marcadores das opções de SUBMENU*/ font-size:11px; padding:10px 5px 5px 45px; 9 de 13.Submenu a{ color:#ffffff; /*Mude a cor das opções de SUBMENU*/.Submenu a:hover{ color:#17b6e4; /*Mude a cor das opções de MENU quando o cursor do mouse estiver sobre esta opção*/.submenu li{ list-style-type:none; padding:5px 5px 5px 0px; line-height:10px;.seguir{ color:#000000; /*Mude a cor dos marcadores das opções de SEGUIR*/ font-size:11px; padding:10px 5px 5px 45px;.Seguir a{ color:#000000; /*Mude a cor da fonte das opções de SEGUIR*/.Seguir a:hover{ color:#0080ff; /*Mude a cor da fonte das opções de SEGUIR quando o cursor do mouse estiver em cima da opção*/ /* FIM - Estes atributos são referentes à barra de SubMenu */ 12. Alterando as cores do Submenu na pagina Index Há também o submenu na pagina principal (INDEX).SubmenuIndex{ color:#ffffff; /*Mude a cor dos marcadores das opções de SUBMENU na pagina Index */ font-size:11px;.submenuindex a{ color:#ffffff; /*Mude a cor das opções de SUBMENU na pagina Index*/.SubmenuIndex a:hover{ color:#17b6e4; /*Mude a cor das opções de MENU quando o cursor do mouse estiver sobre esta opção*/
13. Alterando as cores no corpo da pagina do Titulo, Subtítulo, Corpo e Rodapé 10 de 13 /* INICIO - Estes atributos são referentes ao corpo do Site */.Titulo{ font-size:16px; padding:10px 10px 10px 10px; color:#000000; /*Mude a cor da fonte das opções de TITULO*/ font-weight:bolder; text-align:center;.subtitulo{ font-size:13px; padding:5px 10px 5px 10px; color:#000000; /*Mude a cor da fonte das opções de SUBTITULO*/ font-weight:bolder;.corpo{ color:#000000; /*Mude a cor da fonte das opções de CORPO*/ text-align:justify; padding:5px 10px 5px 10px;.Rodape{ font-size:12px; color:#106e8d; /*Mude a cor da fonte das opções de RODAPE*/ text-align:center; font-weight:bolder; /* FIM - Estes atributos são referentes ao corpo do Site */
11 de 13 14. Veja onde cada imagem esta alocada e seu comportamento (Modelo Clássico) barras verticais vermelhas, sendo uma antes da barra de menu secundário e depois do corpo do site, estas barras, estão neste exemplo apenas para delimitar 1003px portanto após esta barra as imagens correspondem aos backgrounds (back_cabecalho, back_menu, 2_1, e back_conteudo). Back_cabeçalho Background do cabeçalho, esta imagem fica atrás da imagem 1, dando continuidade a imagem na horizontal de acordo com a resolução do monitor do usuário, imagem não replica, deve ser bem elaborada, seus atributos são: width: 1600px e height: variando de acordo com a imagem 1 (lembrando que a imagem 1, é um recorte do back_cabeçalho, portanto possui o mesmo height que o cabeçalho. Back_menu Background do Menu, continuação da imagem 2, as regras da imagem 2 se aplicam também a esta imagem, seus atributos são: width:1600px e height: 20px; Back_conteudo Background do menu lateral e corpo da pagina, imagem replica, deve ser constituída de tonalidade solida, sem degrades ou imagens que formem erros no layout ao serem replicadas, seus atributos são: width:1600px e height: variável de acordo com o conteúdo da pagina; 1 Cabeçalho da pagina, não replica, e seus atributos são: width:1003px com height variável de acordo com a skin, no caso da imagem acima ele tem 170px; 2 Menu Principal, deve ser constituída por apenas uma tonalidade, solida, sem degrade ou imagens elaboradas, isso porque eventualmente irá replicar e no caso de ser uma imagem elaborada, ficara visível o termino da imagem e o recomeço da mesma, ficando com aspecto de erro no layout; seus atributos são: width:1003px e height:20px; 2_1 Acabamento da barra de Menu Principal, aqui pode ser uma imagem elaborada, como uma sombra ou um degrade, ou qualquer outro efeito a encargo do designer, seus atributos são: width:1003px e height: 6px; 3 Menu Secundário (Lateral) não replica, pode conter efeitos ou desenhos elaborados, seus atributos são: width:256px e height: 463px; 4 Acabamento da barra de Menu lateral e contem a barra que constitui o corpo do site, não replica, seus atributos são: width:40px e height: 158px;
12 de 13 5 Corpo do site, replica, esta imagem deve ser constituída de uma imagem sólida sem imagens que não formem uma continuidade ao replicar, replicar na vertical. Seus atributos são: width: 700px e height: 646px; 6 Barra lateral direita, esta constitui o corpo do site, replica na vertical, seus atributos são: width: 7px e height: 646px; 7 Imagem que dará continuidade a imagem 3, replica e não pode conter imagens que não dêem continuidade ao replicarem na vertical, seus atributos são: width: 256px e height: 154px; 8 Imagem da continuidade a imagem 4, replica, não pode conter imagens que ao serem replicadas na vertical, dêem a aparência de falhas no layout, seus atributos são width: 40px e height: 459px. 9 Rodapé do site, da continuidade as imagens 7, 8, 5, 6 do (menu e corpo do site), seus atributos são: width: 1003px e height: 17px. As regras de imagens neste modelo devem ser aplicadas também nos arquivos Modelos Skin parte (1,3,4,5,6) ou seja, note que existe variações da mesma imagem, exemplo: a imagem 3 que corresponde ao menu lateral tem uma variação 3_1, que é um menu mais estreito, por ser uma variação ele segue os mesmos preceitos da imagem 3, como as outras partes (arquivos PSDs) irão gerar apenas variações das imagens principais não há a necessidade de repetir os mesmos atributos, por isso não iremos mencionar os atributos das mesmas. a. Legenda de Imagens geradas por cada parte (Modelos) São no total, 22 imagens (as imagens devem ser criadas com a extensão PNG, com exceção das imagens back_conteudo, back_cabecalho e back_menu que devem ter a extensão.jpg) Obs: Para que o sistema fique mais rápido, as imagens back_conteudo, back_cabecalho e back_menu devem ser geradas com a extensão.jpg. Modelo Skin parte 1 - Backs Imagens geradas (back_cabecalho, back_menu, 2_1 e back_conteudo) Modelo Skin parte 2 Menu (150px) Imagens geradas (1, 2, 3, 4, 5, 5_1, 6, 7, 8, 9) Modelo Skin parte 3 Menu (190px) Imagens geradas (3_1, 5_2, 5_3, 7_1, 9_1) Modelo Skin parte 4 Geral sem menu. Imagens geradas (5_4, 6_1, 9_2)
13 de 13 15. Veja onde cada imagem esta alocada e seu comportamento (Modelo Fundo Fixo) barras verticais vermelhas, sendo uma antes da barra de menu secundário e depois do corpo do site, estas barras, estão neste exemplo apenas para delimitar 1003px portanto após esta barra as imagens correspondem aos backgrounds (back_cabecalho, back_menu, 2_1). Back_cabeçalho Background do cabeçalho, esta imagem fica atrás da imagem 1, dando continuidade a imagem na horizontal de acordo com a resolução do monitor do usuário, imagem não replica, deve ser bem elaborada, seus atributos são: width: 1600px e height: variando de acordo com a imagem 1 (lembrando que a imagem 1, é um recorte do back_cabeçalho, portanto possui o mesmo height que a o back_cabeçalho. Back_menu Background do Menu, continuação da imagem 2, as regras da imagem 2 se aplicam também a esta imagem, seus atributos são: width:1600px e height: 20px; Back_conteudo Background da pagina inteira, esta imagem deve ser opaca, não replica, pode-se colocar imagens que tenham haver com seu negocio ou ate mesmo uma paisagem. (dica: coloque uma layer sobre a sua imagem preencha com a cor branca e diminua a opacidade para 80%, desta forma ficara opaca, dependendo da sua imagem este valor de opacidade pode variar) 1 Cabeçalho da pagina, não replica, e seus atributos são: width:1003px com height variável de acordo com a skin, no caso da imagem acima ele tem 170px; 2 Menu Principal, deve ser constituída por apenas uma tonalidade, solida, sem degrade ou imagens elaboradas, isso porque eventualmente irá replicar e no caso de ser uma imagem elaborada, ficara visível o termino da imagem e o recomeço da mesma, ficando com aspecto de erro no layout; seus atributos são: width:1003px e height:20px; 2_1 Acabamento da barra de Menu Principal, aqui pode ser uma imagem elaborada, como uma sombra ou um degrade, ou qualquer outro efeito a encargo do designer, seus atributos são: width:1003px e height: 6px;
14 de 13 3 Menu Secundário (Lateral), deve ser transparente ou opaca (80%), seus atributos são: width:150px e height: 463px; 4 Deve ser transparente ou opaca (80%), seus atributos são: width: 20px e height: 158px; 5 Deve ser transparente ou opaca (80%), seus atributos são: width: 700px e height: 646px; 6 Deve ser transparente ou opaca (80%), seus atributos são: width: 7px e height: 646px; 7 Deve ser transparente ou opaca (80%), seus atributos são: width: 150px e height: 154px; 8 Deve ser transparente ou opaca (80%), seus atributos são: width: 20px e height: 459px. 9 Deve ser transparente ou opaca (80%), seus atributos são: width: 1003px e height: 17px. As regras de imagens neste modelo devem ser aplicadas também nos arquivos Modelos Skin parte ( do 1 ao 4) ou seja, note que existe variações da mesma imagem, exemplo: a imagem 3 que corresponde ao menu lateral tem uma variação 3_1, que é um menu mais largo, por ser uma variação ele segue os mesmos preceitos da imagem 3, como as outras partes (arquivos PSDs) irão gerar apenas variações das imagens principais não há a necessidade de repetir os mesmos atributos, por isso não iremos mencionar os atributos das mesmas. a. Legenda de Imagens geradas por cada parte (Modelos) Neste modelo o fundo será fixo (back_conteudo), portanto, somente a imagem de cabeçalho, menu e background serão trabalhadas, ainda sim, todas as imagens (transparentes ou com opacidade em 80%, as cores ficam a encargo do designer) precisam ser geradas (extensão PNG-24). Obs: Para que o sistema fique mais rápido, as imagens back_conteudo, back_cabecalho e back_menu devem ser geradas com a extensão.jpg. São no total, 22 imagens Modelo Background Geral Imagens geradas (back_conteudo) Modelo Skin parte 1 - Backs Imagens geradas (back_cabecalho, back_menu, 2_1) Modelo Skin parte 2 Menu (150px) Imagens geradas (1, 2, 3, 4, 5, 5_1, 6, 7, 8, 9) Modelo Skin parte 3 Menu (190px) Imagens geradas (3_1, 5_2, 5_3, 7_1, 9_1) Modelo Skin parte 4 Geral sem menu. Imagens geradas (5_4, 6_1, 9_2)