CSS Exercício JCC Comunicações Digitais e Internet, 2006/07 Jornalismo e Ciências da Comunicação, U.Porto Sumário Com este exercício pretende-se apresentar e experimentar o processo de implementação de um design para a web, começando no momento em que a maquete base é aprovada até à conclusão do HTML e CSS. A imagem em baixo corresponde ao que se pretende implementar. Tipicamente, a maquete é desenvolvida num programa desenho (p.e. Freehand, Photoshop, Fireworks). Identificar Estrutura Base Numa primeira fase, existe um diálogo entre o responsável pelo design (maqueta) e o responsável pela implementação em HTML e CSS. Neste diálogo é importante esclarecer questões como: qual o comportamento da estrutura face a mudanças na dimensão do
browser, qual a apresentação dos elementos face às interacções do utilizador (por exemplo: quando se passa com o rato sobre uma ligação), o que acontece quando o conteúdo é bastante menos (ou mais) do que o previsto. Neste caso concreto, a estrutura deve ser dependente da dimensão do browser e quando o rato passa sobre os menus, a cor de fundo é alterada para laranja. O resultado esperado pode ser visto em www.icicom.up.pt/cursos/ljcc. O passo seguinte corresponde à identificação das principais áreas que compõem o documento. É importante perceber que não existe uma solução única nesta fase. Diferentes pessoas vão chegar a diferentes soluções. A mesma maquete pode resultar em documentos HTML e CSS muito diferentes. Nesta fase, a experiência em projectos anteriores é o factor que mais influência o resultado final. A imagem seguinte ilustra uma possível identificação de áreas. Implementar a Estrutura Base em HTML Depois de terem sido identificadas as principais áreas, há uma primeira implementação do documento em HTML. Em baixo apresenta-se uma possível abordagem. Observe com atenção o documento e identifique as diversas áreas.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <title>licenciatura em Jornalismo e Ciências da Comunicação</title> <link rel="stylesheet" type="text/css" href="jcc.css"> </head> <body> <div class="base"> <div class="cabecalho"> <div class="logo"> <div class="up">universidade do Porto <div class="jcc">jornalismo e Ciências da Comunicação <div class="menu"> <ul> <li><a href="#">apresentação</a></li> <li><a href="#">cursos</a></li> <li><a href="#">projectos</a></li> <li><a href="#">pessoal</a></li> <li><a href="#">contactos</a></li> </ul> <br> <br> <div class="principal"> <h1>licenciatura em Jornalismo e Ciências da Comunicação</h1> <div class="submenu"> <ul> <li><a href="#">informações</a></li> <li><a href="#">plano Curricular</a></li> <li><a href="#">documentos</a></li> </ul> <div class="conteudo"> <h2>apresentação</h2> <p>o curso de Jornalismo e Ciências da Comunicação, que tem como base um protocolo assinado pelas Faculdades de Letras, Engenharia, Belas-Artes e Economia, pretende combinar uma formação em Humanísticas (Ciências Sociais) com a vertente das novas tecnologias da informação e da comunicação e as dimensões estática e gráfica.</p> <p>depois de frequentarem um tronco comum, nos dois primeiros anos, os alunos optarão, a partir do terceiro ano, por uma das seguintes especializações: <strong>jornalismo</strong>; <strong>assessoria de Comunicação</strong>; <strong>comunicação Multimédia</strong>. Pretende-se um leque vasto de saídas profissionais, das várias formas de jornalismo (escrito, radiofónico, televisão e online) aos gabinetes de imprensa e de imagem, passando pela produção de software educativo ou de materiais multimédia de todo o tipo.</p> </body> </html> No código HTML apresentado, as ligações ainda não estão definidas. Como ainda não existe uma decisão quanto aos endereços finais das páginas, é normal usar o símbolo #. Grave este documento com o nome jcc-modelo.html e veja o resultado num browser.
Posicionar os Principais Blocos Para posicionar os principais elementos, é comum colorir cada DIV com uma cor diferente de forma a facilitar o trabalho inicial. Assim, crie um novo documento CSS jcc.css, e defina as cores de fundo de cada bloco da seguinte forma: A cor de fundo do DIV da classe cabecalho deve ser vermelha. A cor de fundo do DIV da classe menu deve ser verde. Classe principal a amarelo. Classe submenu a azul. Classe conteudo a cinzento. Veja novamente o documento no browser. O primeiro passo corresponde à eliminação das margens associadas ao corpo do documento. Por omissão, o elemento BODY tem margens que variam de browser para browser. De forma a garantir que os elementos ficam encostados às margens laterais, é necessário eliminar estas margens. Assim, defina uma regra que coloque a zero a margem do corpo. Em seguida vamos colocar o menu na horizontal e afastado da margem lateral esquerda. Assim, faça as seguintes alterações usando CSS: Os itens da lista definida dentro da classe menu devem flutuar para a esquerda. A margem lateral esquerda da lista (não dos itens) deve ser de 250 pixels. A margem lateral direita de cada item deve ser de 30 pixels. As restantes margens devem ser zero, bem como todos os espaçamentos internos. Os itens não devem ter nenhum símbolo associado. Relativamente ao submenu, e para garantir que ele fica do lado esquerdo e com uma largura fixa, faça as seguintes alterações: O DIV deve flutuar para a esquerda e ter uma largura de 150 pixels. Cada item deve ter um espaçamento superior e inferior de 10 pixels. Os itens não devem ter nenhum símbolo associado e o texto deve estar centrado. A lista não deve ter margens nem espaçamento interno. O contorno inferior de cada item deve ser preto, sólido e com a largura de 1 pixel. Veja o documento num browser com regularidade! De forma a que o conteúdo se mantenha alinhado na vertical e não fique por baixo do submenu, é necessário definir uma margem esquerda. Assim, defina uma regra CSS que coloque a margem esquerda do DIV da classe conteudo igual a 200 pixels.
Observando a maquete inicial, verifica-se que a área principal tem espaços laterais. Assim, defina uma regra CSS que coloque cada margem lateral do DIV da classe principal igual a 50 pixels. Neste momento, a estrutura geral está próxima daquela apresentada na maquete. No documento CSS, remova as cores de fundo auxiliares de cada área. Depois deste passo, o código do documento CSS deve ser semelhante ao apresentado em baixo. body { margin: 0px; div.menu ul { list-style-type: none; margin: 0px; padding: 0px; margin-left: 250px; div.menu ul li { float: left; margin-right: 30px; div.submenu { float: left; width: 150px; div.submenu ul { list-style-type: none; margin: 0px; padding: 0px; div.submenu ul li { padding-top: 10px; padding-bottom: 10px; text-align: center; border-bottom: 1px solid black; div.conteudo { margin-left: 200px; div.principal { margin-left: 50px; margin-right: 50px; div.logo { margin-left: 50px; Formatações Gerais A fase seguinte corresponde à definição de formatações gerais (cores, tipos de letra, detalhes). Assim, vamos observar a maquete e alterar cada um dos elementos de forma a aproximarmos o resultado final àquela pretendido inicialmente. É importante ir acompanhando as alterações no browser.
Os cabeçalhos e menus do documento são apresentado em Arial. Apenas os parágrafos do corpo diferem, sendo apresentados em Georgia. Assim, definimos o corpo como sendo do tipo Arial e os parágrafos do conteúdo como sendo do tipo Georgia (não esquecer de incluir os tipos de letra alternativos). O tamanho do texto em ambos os menus (menu e submenu) deve ser 14 pixels. O cabeçalho H1 deve ser apresentado com um tamanho de 24 pixels, com um contorno inferior preto e com a cor rgb(156,154,154). A margem inferior deste cabeçalho deve ser colocada a zero. O cabeçalho H2 deve ser apresentado com um tamanho de 18 pixels e com uma cor rgb(102,96,141). Observando a maquete, constata-se que o parágrafo não se prolonga até ao final da área principal. Assim, associe uma margem direita ao parágrafo de 150 pixels. Defina também uma altura de 1.3em para cada linha do parágrafo. A cor de fundo do DIV da classe cabecalho deve ser rgb(141,140,184) e a cor de fundo do DIV da classe menu deve ser rgb(95,93,92). Na área logo, o texto relativo à UP deve ser a bold e a branco. O texto relativo à JCC deve ser a bold e de tamanho 20 pixels. O espaçamento interno superior do DIV da classe cabecalho deve ser 30 pixels. A margem superior do DIV da classe menu deve ser 30 pixels. Apresentam-se em baixo as novas regras que deverão existir após estes passos. body { margin: 0px; font-family: Arial, Helvetica, sans-serif; h1 { color: rgb(156,154,154); font-size: 24px; border-bottom: 1px solid black; margin-bottom: 0px; h2 { color: rgb(102,96,141); font-size: 20px; div.conteudo p { font-family: Georgia, "Times New Roman", Times, serif; margin-right: 150px; line-height: 1.3em; div.cabecalho { background-color: rgb(141,140,184);
padding-top: 30px; div.menu { background-color: rgb(95,93,92); margin-top: 30px; font-size: 14px; div.submenu { float: left; width: 150px; font-size: 14px; div.up { color: white; font-weight: bold; div.jcc { font-weight: bold; font-size: 20px; Formatar as Ligações Neste momento, a apresentação da página já se aproxima bastante daquela pretendida. A principal situação a alterar tem a ver com a apresentação das ligações. As ligações do menu devem ser apresentadas a branco, em tamanho 12 pixels, a bold e sem sublinhado. Quando o rato passa por cima destas ligações, o texto deve passar a preto e a cor de fundo a rgb(255,145,8). As ligações do submenu devem ser apresentadas a preto, a bold e sem sublinhado. Quando rato passa por cima destas ligações, a cor de fundo deve passar a rgb(255,145,8). Incluir Imagens Neste passo final vamos incluir as imagens em falta. Neste exemplo, este passo foi deixado para o final. Não é obrigatório que assim seja. Foi tomada esta opção porque, neste exemplo, as imagens não têm impacto significativo na estrutura da página. Vamos inserir 5 imagens: a imagem institucional da UP, a listagem no fundo do cabeçalho, a barra de cor do lado esquerdo do menu, a fotografia em baixo do submenu e a marca de água no final da página. Pode obter a imagem da U.Porto e a fotografia da sala de aula nos seguintes endereços. Use o Mozilla Firefox para descarregar as imagens. http://www.fe.up.pt/~ssn/2006/cdi/materiais/exercicios/up.gif http://www.fe.up.pt/~ssn/2006/cdi/materiais/exercicios/sala.jpg
Insira a imagem da U.Porto no HTML na zona do logótipo, antes dos DIV das classes up e jcc. Se abrir o documento num browser, verifica que a imagem ficou sobre o texto. Para que a imagem fique à esquerda, crie uma regra CSS que a faça flutuar para a esquerda. Defina também um espaçamento de 5 pixels à direita da imagem. A fotografia da sala deve ser colocada no HTML, no DIV da classe submenu, após a lista. Veja o resultado no browser. Para que o resultado fique mais próximo daquele pretendido, defina uma margem superior para a imagem de 50 pixels e um contorno de 1 pixel sólido a preto. Relativamente ao fundo do cabeçalho, use o Photoshop para produzir a imagem a utilizar. Crie uma nova imagem com 11 pixels de altura e 1 pixel de largura. Usando a Pencil Tool, pinte os 4 pixels superiores com a cor rgb(138,136,181) e os restantes com a cor rgb(141,140,184). O resultado está ilustrado na imagem seguinte (notar que a imagem está a ser vista com um zoom de 1600%). Grave esta imagem com o nome fundo.gif e altere o documento das regras CSS de forma a que esta imagem seja usada no fundo do DIV da classe cabecalho. Para alterar a cor da zona lateral esquerda da barra do menu horizontal também vamos usar uma imagem. Assim, crie uma nova imagem no Photoshop com 200 pixels de largura e 1 pixel de altura com a cor de fundo igual a rgb(102,96,141). Grave esta nova imagem com o nome menu.gif. Altere o documento CSS de forma a que esta imagem seja usada no fundo do DIV da classe menu, que seja colocado no topo esquerdo e que seja repetido na vertical (ao longo do eixo dos y).
Finalmente, para produzir a marca de água, crie uma nova imagem com 350 pixels de largura por 350 pixels de altura. Usando as ferramentas de desenho, faça três circunferências concêntricas. A primeira e maior com a cor rgb(231,231,231), a segunda a branco e a última e mais pequena de novo com a cor rgb(231,231,231). O resultado final deve ser próximo daquele apresentado na imagem seguinte. Grave esta imagem com o nome marca.gif e altere o documento de CSS de forma a que esta imagem seja usada no fundo do BODY, não seja repetida e seja colocada a 40 pixels para a esquerda e 400 pixels para baixo. Apresentam-se em baixo as novas regras CSS que deverão existir após estes últimos passos. body { margin: 0px; font-family: Arial, Helvetica, sans-serif; background-image: url("marca.gif"); background-position: -50px 400px; background-repeat: no-repeat; div.cabecalho { background-color: rgb(141,140,184); padding-top: 30px; background-image: url("fundo.gif"); div.menu { background-color: rgb(95,93,92);
margin-top: 30px; font-size: 14px; background-image: url("menu.gif"); background-position: top left; background-repeat: repeat-y; div.logo img { float: left; margin-right: 5px; div.submenu img { margin-top: 50px; border: 1px solid black; Observações Finais Apesar de nem todos os pormenores estarem concluídos, o resultado final já se aproxima bastante do pretendido inicialmente. Num projecto profissional, a fase seguinte corresponderia à conclusão de todos os detalhes e, muito importante, à verificação do resultado nos principais browsers.