Construção de páginas com HTML

Esta página contém os procedimentos e dicas para construção de páginas e sites usando as linguagens HTML, CSS e SVG. Estes conteúdos fazem parte do material da disciplina Fundamentos do Webdesign.

A apostila está disponível no link: apostila de Webdesign

Os materiais usados estão indicados nos links dos tópicos das atividades.

1. Estruturas básicas

Material da pág. 1 até a pág. 10

📃 Escolha de cores

Existem vários sites que mostram as escolhas de cores para usar em HTML. Vamos começar usando as cores com códigos HTML ou hexadecimais. Clique nos passos abaixo para ver como podemos escolher as cores.

📃 Texto para testar layouts

Muitas vezes, nosso foco é de testar somente o layout de uma página. Podemos preenchê-la com textos e listas usando o site mostrado a seguir. Clique nos passos abaixo para ver como produzir estes conteúdos.

  • Acessando o site http://br.lipsum.com/, você pode criar blocos de textos ou listas, usados para testarmos layouts.
  • Escolha a criação de 2 parágrafos para fazermos um teste. Copie e cole este texto produzido no programa Notepad (Bloco de Notas) do Windows.

voltar ao topo

📃 Texto para testar layouts

Vamos salvar nosso arquivo em uma pasta chamada webdesign.

  • Escolha a opção do Bloco de Notas Salvar como. Salve o arquivo como pagina1.htm. Uma dica importantíssima é de não usar acentuação para nomear as páginas!!!
  • É muito importante lembrar que a extensão do arquivo deve ser .htm ou .html. Abra o arquivo em um navegador de internet. Como não foram feitas as marcações dos parágrafos, vamos colocá-las no arquivo.
  • Antes de cada parágrafo, devemos colocar a tag <p>. Logo após o parágrafo, colocamos a tag de fechamento de parágrafo </p>. Faça isso nos 2 parágrafos e visualize a página em um navegador.

voltar ao topo

📃 Layout básico de uma página

O layout básico de uma página HTML tem as seguintes partes: cabeçalho (head) e corpo da página (body). Vamos ver os elementos de cada parte:

📃 Fundo da página, alinhamentos

Vamos deixar todos os arquivos desta disciplina organizados. Podemos criar uma pasta chamada pagina1 para colocar todos os arquivos desta primeira página. É importante deixar os arquivos sempre organizados em pastas para usarmos as referências corretas na hora de construir sites.

  • Crie uma pasta dentro da pasta pagina1 para colocarmos as imagens. Podemos chamá-la de imagens.
  • Podemos escolher uma imagem para colocar no fundo da página (background). Escolha uma imagem com largura maior do que 1000px, para cobrir todo o fundo da página, e salve na pasta que criamos /imagens.
  • Na tag do corpo da página, colocamos o caminho da imagem salva: <body background="imagens/fundo.jpg">. Salve e veja a página renderizada em um navegador.
  • Os alinhamentos dos parágrafos podem ser definidos dentro de cada tag. Por exemplo, se você quiser deixar o primeiro parágrafo justificado, basta usar a tag <p align="justify">.
  • Para destacar partes do texto, podemos mudar cores e tamanhos. Neste exemplo, dois trechos estão destacados com cores diferentes usando a tag <font>. Dentro desta tag, você muda cor, tamanho e família da fonte (face). Note que ela precisa de fechamento para o fim do destaque: </font>
  • Se você quiser que a página toda tenha uma configuração específica de fonte, basta abrir a tag no começo do corpo da página, e fechá-la antes do fechamento da tag </body>. No exemplo, foi colocada a fonte Verdana na página toda.
  • Código estrutural de uma página HTML: 
    <!DOCTYPE html>
<html>
<head>
   <title>Primeira Página</title>
  <meta name="author" content="Paulo Henrique">
  <meta name="keywords" content="HTML, PÁGINA">
  <meta name="description" content="Minha primeira página">
  <meta charset="UTF-8">
</head>
<body background="imagens/fundo.jpg">
  <font face="Verdana"><p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Pellentesque vestibulum bibendum posuere. Nulla blandit fermentum mi. In euismod dolor ligula, sit 
  amet pellentesque ipsum <font color="blue" size="7">venenatis a</font>. Fusce a ipsum diam. 
  Fusce sem magna, tempus fringilla arcu nec, interdum ultrices turpis. In euismod massa  
  sollicitudin finibus ultricies. Nullam faucibus elit non semper porta. Curabitur nec leo urna. Phasellus 
  dignissim consequat dui, dictum maximus turpis <font color="green" size="3">tristique at</font>. Vivamus  
  cursus, leo ac sagittis blandit, est sem lacinia nibh, id sagittis ipsum dui facilisis augue. Fusce at  
  nulla et justo lacinia egestas in eu ante. Fusce lacinia pulvinar urna ut venenatis. Fusce ac  
  lorem eget tellus malesuada lobortis nec in neque. Sed sit amet pharetra leo.</p>
  <p>Proin finibus diam at imperdiet condimentum. Nullam at dolor dolor. Phasellus a nisi id enim
  semper facilisis. Cras at dui turpis. Suspendisse convallis nisl leo, vel placerat est venenatis  
  at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
  Curabitur tristique arcu in turpis tempor tincidunt. Ut varius nisl sed ligula convallis varius. Proin  
  efficitur eleifend laoreet. Etiam orci nulla, ornare in fringilla eu, lacinia in turpis.</p></font>
</body>
</html>
📃 Barra separadora e títulos

Podemos separar conteúdos usando uma tag simples de barra horizontal. Além disso, podemos destacar trechos do texto colocando negrito, itálico ou sublinhado. Títulos de seções também podem ser feitos com tags simples mostradas a seguir:

  • Usando a tag <hr>, podemos separar conteúdos na página. Essa tag não precisa ser fechada! Você pode configurar a altura, largura e cor. A largura em percentual é muito usada para deixar o site responsivo, ou seja, que abre em qualquer dispositivo com poucas distorções de tamanhos.
  • Os títulos de seções podem ser definidos com as tags h1, h2, ..., h6. No exemplo, usamos o título com a tag <h3>. Quanto maior o número, menor o tamanho da fonte desta tag. Experimente mudar essa tag para h1 e h6.
  • A tag de negrito <b> foi usada neste exemplo para um trecho do texto. Não esqueça de fechá-la para que os conteúdos de sua página HTML apareçam corretamente. Salve a página renderizada em um navegador.
  • Neste exemplo, foi usada uma tag por dentro da outra (aninhada). Um trecho foi destacado em negrito e itálico com as tags <b><i>. Note que ambas precisam ser fechadas.
  • Se você quiser destacar um trecho do texto deixando-o riscado, basta usar a tag <strike>Sed sit amet pharetra leo.</strike>. Essa tag é usada em sites para mostrar preços de produtos.
  • Código estrutural de uma página HTML: 
    <!DOCTYPE html>
<html>
<head>
   <title>Primeira Página</title>
  <meta name="author" content="Paulo Henrique">
  <meta name="keywords" content="HTML, PÁGINA">
  <meta name="description" content="Minha primeira página">
  <meta charset="UTF-8">
</head>
<body background="imagens/fundo.jpg">
  <font face="Verdana"><p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Pellentesque vestibulum bibendum posuere. Nulla blandit fermentum mi. In euismod dolor ligula, sit 
  amet pellentesque ipsum <font color="blue" size="7">venenatis a</font>. Fusce a ipsum diam.
  Fusce sem magna, tempus fringilla arcu nec, interdum ultrices turpis. In euismod massa
  sollicitudin finibus ultricies. Nullam faucibus elit non semper porta. Curabitur nec leo urna. Phasellus 
  dignissim consequat dui, dictum maximus turpis <font color="green" size="3">tristique at</font>. Vivamus 
  cursus, leo ac sagittis blandit, est sem lacinia nibh, id sagittis ipsum dui facilisis augue. Fusce at 
  nulla et justo lacinia egestas in eu ante. Fusce lacinia pulvinar urna ut venenatis. Fusce ac 
  lorem eget tellus malesuada lobortis nec in neque. <del>Sed sit amet pharetra leo.</del></p>
<hr width="50%" size="10px" color="red">
<h3>Título da seção</h3>
  <p>Proin finibus diam at imperdiet condimentum. Nullam at dolor dolor. Phasellus a nisi id enim 
  semper facilisis. <b>Cras at dui turpis</b>. Suspendisse convallis nisl leo, vel placerat est 
  venenatis at. <b><i>Vestibulum ante ipsum primis</i></b> in faucibus orci luctus et ultrices 
  posuere cubilia Curae; Curabitur tristique arcu in turpis tempor tincidunt. Ut varius nisl sed  
  ligula convallis varius. Proin efficitur eleifend laoreet. Etiam orci nulla, ornare in fringilla eu, 
  lacinia in turpis.</p></font>
</body>
</html>

voltar ao topo

📃 Listas

Agora vamos criar uma outra página, dentro da pasta da disciplina, crie a pasta webdesign/pagina2/. Nesta página, vamos criar elementos de listas.

  • Dependendo do servidor usado para hospedar sua página, devemos modificar a codificação de caracteres charset de UTF-8 para ISO-8859-1. Porém, a maioria dos servidores usa o UTF-8.
  • Usando a tag <ul>, podemos criar listas na página. Este exemplo mostra os marcadores da lista com formato de círculos.
  • Os itens das listas têm tags <li>. Note que cada tag de item precisa ser fechada, depois que você coloca o conteúdo. Para mudar de cor, coloque a tag de fonte aninhada na tag de item da lista. Mude as cores dos outros itens.
  • As listas ordenadas têm a mesma estrutura da lista normal, com a tag principal <ol>. Estas tags podem ser numéricas type="1", literais type="A" ou com números romanos type="I". Neste exemplo, a lista com letras começa na 4ª letra, ou seja, a letra D.
  • Código estrutural da página HTML com listas: 
    <!DOCTYPE html>
<html> 
<head> 
	<title>LISTAS</title>
	<meta name="author" content="AUTOR DA PÁGINA">
	<meta name="keywords" content="HTML, LISTAS">
	<meta name="description" content="Minha primeira página">
	<meta charset="UTF-8">
</head> 
<body>
	<h3>Minha página de listas</h3>
	<ul type="circle">    
		<li>Item amarelo</li>     
		<li>Item azul</li>     
		<li>Item verde</li> 
	</ul>
	<ol type="A" start="4">     
		<li>Item cinza</li>
		<li>Item branco</li>     
		<li>Item preto</li>     
		<li>Item vermelho</li> 
	</ol>
</body> 
</html>

voltar ao topo

📃 Imagens

Agora vamos criar uma outra página, dentro da pasta da disciplina: crie a pasta webdesign/pagina3/. Nesta página, vamos inserir imagens, por isso, crie uma pasta webdesign/pagina3/imagens para colocarmos todas as imagens da página. Escolha 3 imagens e coloque nesta pasta. As extensões podem ser png, jpg ou jpeg. Preste atenção no atributo src, que contém o caminho da imagem.

  • A tag de imagem pode ser colocada no meio do texto usando o código <img>. Todos os atributos desta tag ficam dentro da <img>, não precisando ser fechada. A largura em percentual é importante para deixar o site responsivo.
  • Neste segundo exemplo, a imagem também está misturada com o texto, alinhada no meio do texto. Não recomenda-se o uso das imagens misturadas, pois o layout da página fica prejudicado.
  • Os atributos hspace e vspace criam margens horizontais e verticais em torno da imagem. São ótimas para não deixar outros elementos "grudados" nas imagens.
  • De uma forma bem mais organizada, podemos criar a tag-mãe <figure>, que contém a imagem, e logo depois uma tag de legenda <figcaption>. Neste caso, a tag de parágrafo centralizado foi usada para deixar a legenda alinhada com a imagem.
  • Código estrutural da página HTML com imagens: 
    <!DOCTYPE html>
<html> 
<head> 
	<title>IMAGENS</title>
	<meta name="author" content="AUTOR DA PÁGINA">
	<meta name="keywords" content="HTML, IMAGENS">
	<meta name="description" content="Minha primeira página">
	<meta charset="ISO-8859-1">
</head> 
<body>
	<h3>Minha página com imagens</h3>
	<p>Vamos testar se a imagem está alinhada com o texto.</p>
	
	<p>Esta imagem <img src="imagens/figura1.jpg" width="30%" align="left"> está alinhada 
	  à esquerda do texto.</p>
	
	<p>Esta imagem <img src="imagens/figura2.jpg" width="80%" align="middle" 
	  hspace="30" vspace="60"> está alinhada no meio do texto.</p> 
	
	<figure align="center">     
		<img src="imagens/figura3.jpg" width="100%">     
		<figcaption>Esta é a legenda da imagem</figcaption> 
	</figure>
</body> 
</html>
📃 Links

Usando a mesma pagina3.htm, vamos criar links. Os links podem ser criados em textos, imagens ou vídeos.

  • A tag de link é <a>, e precisa de fechamento para você limitar o que o visitante clica para visitar uma outra página. Neste primeiro exemplo, o link está em um texto: Página do Google.
  • O atributo href é obrigatório, e indica o endereço da página que será visitada. O atributo target="_blank" indica que a página será aberta em outra aba do navegador.
  • Para inserir um link em uma imagem, basta deixar a tag <a> aninhada com a tag <img>, como mostra este segundo exemplo. Crie os links, salve a página e teste em um navegador.
  • Código estrutural da página HTML com links e imagens: 
    <!DOCTYPE html>
<html> 
<head> 
	<title>IMAGENS</title>
	<meta name="author" content="AUTOR DA PÁGINA">
	<meta name="keywords" content="HTML, IMAGENS, LINKS">
	<meta name="description" content="Minha primeira página">
	<meta charset="UTF-8">
</head> 
<body>
	<h3>Minha página com imagens e links</h3>
	<a href="http://www.google.com.br" target="_blank" title="Google">Página do Google</a>
	
	<p><a href="http://www.google.com.br" title="Google"><img src="imagens/figura2.png"
	  width="80%" vspace="45"></a></p>

	<figure align="center">     
		<img src="imagens/figura3.jpg" width="100%">     
		<figcaption>Esta é a legenda da imagem</figcaption> 
	</figure>
</body> 
</html>

voltar ao topo

📃 Áudios

Usando a mesma pagina3.htm, vamos inserir tags de áudios. Quando você salvar a página e visualizar em um navegador, a opção com controles fornece um "frame" para o vídeo que fica parecido com a seguinte imagem:

  • Na mesma pasta da nossapagina3, podemos criar uma pasta chamada audios. Assim, a estrutura de arquivos da nossa página fica bem organizada.
  • Podemos usar a tag audio em uma única linha, com todas as propriedades definidas dentro desta tag. Esta maneira é comum quando apenas um arquivo é inserido. Os navegadores atuais suportam arquivos com extensão mp3.
  • Em navegadores muito antigos, por precaução, podemos definir os formatos mp3 e ogg. Esta tag é do tipo aninhada, com os caminhos (src) dos 2 arquivos definidos.
  • O atributo controls serve para mostrar os controles para o visitante interagir com o audio. O atributo autoplay define a reprodução automática do arquivo.
  • Você pode colocar links para áudios em uma página. Acessando o site open.spotify.com, você pode selecionar as músicas e copiar seus links.
  • Você pode criar também os links para álbuns, da mesma maneira mostrada para músicas. Na página HTML usamos a tag de link <a> para os álbuns.
  • Usando a tag de link <a>, você insere os links de músicas em sua página.
  • Código estrutural da página HTML com links e imagens: 
    <!DOCTYPE html>
<html>
<head>
  <title>IMAGENS</title>
  <meta name="author" content="Paulo Henrique">
  <meta name="keywords" content="HTML, IMAGENS, LINKS">
  <meta name="description" content="Minha primeira página">
  <meta charset="UTF-8">
</head>
<body>
  <h3>Minha página com imagens e links</h3>

  <a href="http://www.google.com.br" target="_blank" title="Google">Página do Google</a>
  <audio controls autoplay>  
	<source src="audios/musica1.mp3"> 
	<source src="audios/musica1.ogg">
  </audio>
  <a href="https://open.spotify.com/track/4QVD4vVkYveZuO0xkyi6AX?si=W4d7ctcHSOu2TraZcNaR2g">Música</a>
  <p align="center"><a href="http://www.google.com.br" title="Google"><img src="imagens/figura2.png" 
    width="80%" vspace="45"></a></p>

  <figure align="center">
    <img src="imagens/figura3.png" width="100%">
    <figcaption><p align="center">Esta é a legenda da imagem</p></figcaption>
  </figure>
</body>
</html>
📃 Vídeos

Vamos criar uma nova pasta chamada webdesign/pagina4. Dentro desta pasta, crie as pastas de imagens e de videos. Quando você salvar a página e visualizar em um navegador, a opção com controles fornece uma imagem parecida com esta:

  • Escolha um arquivo de imagem (pode ser no google) para colocar como um banner da nossa pagina4.htm. Cuidado com a extensão da imagem (jpg, png, jpeg) para indicar o caminho no código HTML.
  • Podemos usar a tag video em uma única linha, com todas as propriedades definidas dentro desta tag. Esta maneira é comum quando apenas um arquivo é inserido. A maioria dos navegadores atuais suportam arquivos com extensões mp4, webm e ogv.
  • Por precaução, podemos definir os formatos mp4, webm e ogv dentro de uma tag de vídeo. Esta tag é do tipo aninhada, com os caminhos (src) dos 3 arquivos de vídeo.
  • O atributo controls serve para mostrar os controles para o visitante interagir com o vídeo. O atributo autoplay define a reprodução automática do vídeo.
  • Quando inserimos vídeos em uma página, é importante definirmos a altura height e a largura width do vídeo. Estas medidas podem ser indicadas em % ou pixels.
  • Código estrutural da página HTML com imagens e áudios: 
    <!DOCTYPE html>
<html> 
<head> 
	<title>IMAGENS</title>
	<meta name="author" content="AUTOR DA PÁGINA">
	<meta name="keywords" content="HTML, VÍDEOS, LINKS">
	<meta name="description" content="Minha primeira página">
	<meta charset="UTF-8">
</head> 
<body>
	<h3>Minha página com vídeos</h3>
	
	<figure align="center">     
		<img src="imagens/banner.png" width="90%">
	</figure>
	<hr>
	<video width="100%" height="100%" controls autoplay>
		<source src="videos/video1.mp4"type="video/mp4"> 
		<source src="videos/video1.ogv"type="video/ogv"> 
		<source src="videos/video1.webm"type="video/webm"> 
	</video>

</body> 
</html>
📃 Vídeos do Youtube

Para inserir um vídeo do Youtube, usamos a tag iframe. Vamos usar a mesma pagina4.htm para inserir esta tag de vídeo.

  • Na página do vídeo escolhido, clique em compartilhar, no link que fica logo abaixo da janela do vídeo.
  • Selecione a opção incorporar.
  • Agora é só copiar a tag iframe criada. Note que aparecem as medidas que já usamos na tag de video.
  • Cole a tag criada na posição da página que você quer mostrar o vídeo. O atributo frameborder tem padrão com valor 0. Se você quiser uma borda, basta alterar o valor deste atributo para qualquer número maior do que 0.
  • Código estrutural da página HTML com imagens e vídeos: 
    <!DOCTYPE html>
<html> 
<head> 
	<title>IMAGENS</title>
	<meta name="author" content="AUTOR DA PÁGINA">
	<meta name="keywords" content="HTML, VÍDEOS, LINKS">
	<meta name="description" content="Minha primeira página">
	<meta charset="UTF-8">
</head> 
<body>
	<h3>Minha página com vídeos</h3>
	
	<figure align="center">     
		<img src="imagens/banner.png" width="90%">
	</figure>
	<hr>
	<iframe width="560" height="315" src="https://www.youtube.com/embed/uKEhiXcrW9A"
	  frameborder="1" color="yellow" allow="accelerometer; autoplay; encrypted-media; 
	  gyroscope; picture-in-picture" allowfullscreen></iframe>

</body> 
</html>
📃 Detalhes da Atividade

Usando todas as tags que vimos até agora, vamos montar uma página htm com os elementos descritos abaixo. Crie uma pasta chamada webdesign/atividade1 para inserir os arquivos desta atividade. O arquivo principal HTML será chamado de index.htm.

  • Na parte superior da página, que terá um formato tipo blog, coloque uma imagem como banner, textos de informações e curiosidades sobre a banda ou o cantor escolhido.
  • Insira imagens, uma imagem de fundo background. Lembre-se de colocar as medidas de altura e largura da imagem na página. Use as tags de linhas horizontais <hr> para separar conteúdos.
  • Na parte inferior da página, crie links para áudios e vídeos da banda ou do cantor escolhido. Use links do Spotify ou Youtube. Lembre-se de usar as medidas para criar os iframes dos vídeos.
  • No rodapé, você pode colocar informações de copyright com seu nome, usando o código do símbolo ©: &copy;.

voltar ao topo

📃 Tabelas

Crie uma pasta chamada webdesign/pagina5 para inserir os arquivos da nossa próxima página, com tabelas. O arquivo principal HTML será chamado de index.htm.

  • Usamos table como a tag-mãe das células da tabela. Logo, vamos "aninhar" as tags das células da tabela dentro da tag table.
  • Toda vez que vamos criar uma linha de tabela, usamos a tag <tr>. Esta tag, por sua vez, terá as tags das células das colunas <td> ou <th> "aninhadas". Dentro destas tags colocamos conteúdos de textos ou imagens.
  • As tags <th> podem ser usadas na primeira linha de uma tabela, como linha de títulos. Podemos digitar os textos diretamente sem tags, como mostra o exemplo. Para colocar imagens, colocamos a tag <img> dentro da tag <td>.
  • Os atributos border e bordercolor definem a espessura e a cor da borda de cada célula, respectivamente. O atributo bgcolor pode ser usado para mudar a cor de fundo de uma célula ou de uma linha. No exemplo, o atributo deixa a primeira linha com fundo verde.
  • Os atributos cellpadding e cellspacing são as margens interna e externa de cada célula, respectivamente. Salve a página e visualize em um navegador.
  • Esta é a função da criação de margens em tabelas. Geralmente usamos o padrão do HTML, com cellspacing="0".
  • Código estrutural da página HTML com tabela: 
    <body>
	<h3>Minha página com tabelas</h3>
	<table border="2" bordercolor="red" cellpadding="10" cellspacing="5">     
		<tr bgcolor="green"> 
			<th>Título 1</th> 
			<th>Título 2</th> 
			<th>Título 3</th> 
			<th>Título 4</th> 
		</tr> 
		<tr>
			<td>Linha 2, Coluna1</td>
			<td>Linha 2, Coluna2</td>
			<td>Linha 2, Coluna3</td>
			<td>Linha 2, Coluna3</td>
		</tr> 
		<tr>
			<td>Linha 3, Coluna1</td>
			<td>Linha 3, Coluna2</td>
			<td>Linha 3, Coluna3</td>
			<td>Linha 3, Coluna3</td>
		</tr>
	</table>
</body> 
</html>
📃 Galeria de imagens

Você pode usar a mesma pasta da Atividade 1: webdesign/atividade1. Insira imagens na pasta de webdesign/atividade1/imagens, para criar nossa Galeria.

  • Podemos criar a tabela que ocupe 100% da largura da página. Se criarmos uma galeria com 4 imagens, cada célula terá 25% da largura da linha da tabela. Estas dimensões só precisam ser colocadas nas células da primeira linha da tabela. As outras linhas herdarão os valores informados na primeira linha.
  • Agora você pode "aninhar" as tags de imagem <img> dentro de tags de link <a>, que ficam dentro das respectivas tags de célula <td>. Cuidado com as extensões e os caminhos dos arquivos!
  • Este é um exemplo de 8 imagens colocadas em uma tabela de 2 linhas e 4 colunas. Experimente outros formatos. Note que não foram usadas as bordas da tabela neste exemplo. Se necessário, ajuste as alturas das imagens, caso fiquem diferentes na galeria. Salve e teste a página em um navegador.
  • Trecho do código HTML com galeria em formato de tabela: 
    <body>
	<h3>Galeria de Imagens</h3>
	<table width="100%" cellpadding="10">     
		<tr>
			<td width="25%"><a href="imagens/imagem1.jpg"><img src="imagens/imagem1.jpg"
			  width="100%"></a></td>
			<td width="25%"><a href="imagens/imagem2.png"><img src="imagens/imagem2.png"
			  width="100%"></a></td>
			<td width="25%"><a href="imagens/imagem3.png"><img src="imagens/imagem3.png"
			  width="100%"></a></td>
			<td width="25%"><a href="imagens/imagem4.jpg"><img src="imagens/imagem4.jpg"
			  width="100%"></a></td>
		</tr> 
		<tr>
			<td><a href="imagens/imagem5.jpg"><img src="imagens/imagem5.jpg" 
			  width="100%"></a></td>
			<td><a href="imagens/imagem6.png"><img src="imagens/imagem6.png" 
			  width="100%"></a></td>
			<td><a href="imagens/imagem7.png"><img src="imagens/imagem7.png" 
			  width="100%"></a></td>
			<td><a href="imagens/imagem8.png"><img src="imagens/imagem8.png" 
			  width="100%"></a></td>
		</tr>
	</table>
</body> 
</html>
📃 Galeria de vídeos e áudios

Você pode usar a mesma pasta da Atividade 1: webdesign/atividade1. Insira arquivos de áudio na pasta de webdesign/atividade1/audios, para criar nossa Galeria.

voltar ao topo

📃 Tabela de nutrientes

Vamos criar uma pasta para alguns exercícios: webdesign/exercicios. Crie a página do primeiro exercício com o nome webdesign/exercicios/index.htm.

  • Cada célula da tabela tem margem iterna cellpadding de 15px, borda na cor cinza. O atributo cellspacing está com valor 0 para não deixar espaços entre as células.
  • As tags para criar a primeira linha da tabela usam linha de título <th>, com alinhamento centralizado, fonte com a cor branca e o fundo de cada célula vermelho.
  • A segunda linha tem 2 células mescladas na primeira coluna. Para fazer esta operação em HTML usamos o atributo rowspan, indicando quantas linhas serão mescladas. Neste caso, usamos rowspan="2".
  • Temos as outras 3 células da linha 2 normalmente. Como a primeira célula da terceira linha foi mesclada, precisamos apenas das outras 3 células nesta linha.
  • A linha dos legumes não tem células mescladas, e os elementos são criados com tags <td>.
  • Na linha dos cereais, podemos mesclar as três células da primeira coluna com o atributo rowspan="3". As outras 2 linhas da tabela têm 3 células com os valores indicados no exemplo. Agora complete esta tabela, que vamos utilizar na próxima Atividade.
  • Trecho do código HTML com a tabela de nutrientes: 
    <body>
	<h3>Tabela de nutrientes</h3>
	<table border="1" bordercolor="grey" cellpadding="15" cellspacing="0">     
		<tr bgcolor="red" align="center">
			<th><font color="white">GRUPO</font></th>
			<th><font color="white">ALIMENTO</font></th>
			<th><font color="white">MEDIDA</font></th>
			<th><font color="white">QUANTIDADE</font></th>
		</tr> 
		<tr align="center">
			<td background="imagens/verdura.jpg" rowspan="2"><font color="white">
			  <b>VERDURA</b></font></td>
			<td>Hortaliça crua</td>
			<td>180g</td>
			<td>1 pires cheio</td>
		</tr>
		<tr align="center">
			<td>Hortaliça cozida</td> 
			<td>140g</td>
			<td>1 pires cheio</td>
		</tr>
	</table>
</body> 
</html>
📃 Pesquisa fumantes

Este exercício é parecido com o anterior. Na mesma pasta, crie um arquivo: webdesign/exercicios/fumantes.htm.

voltar ao topo

📃 Tabela de cores

Neste exercício vamos criar uma tabela de cores. O exemplo mostra apenas alguns nomes de cores usados em HTML. Na mesma pasta, crie um arquivo: webdesign/exercicios/cores.htm.

  • Temos duas formas de fazer esta tabela. A primeira é usando exatamente o layout mostrado no exercício. Dessa forma, criaremos sempre 1 linha que mostra somente as cores, e a linha de baixo mostra apenas os nomes das cores.
  • Na segunda maneira, podemos criar na mesma célula o nome da cor, com o fundo de mesma cor. Escolha um dos layouts e faça a página completa com a tabela de cores.
📃 Detalhes da Atividade

A partir desta página, vamos utilizar o software NOTEPAD++ para criar nossos próximos projetos. Acesse o endereço https://notepad-plus-plus.org/downloads/v8.4.2/ e instale a versão correspondente do seu computador: 32 ou 64 bits. Crie uma pasta webdesign/atividade2 para criar os arquivos da próxima atividade. A página principal terá o nome index.htm.

  • O layout da página do nosso site principal da Atividade 2 será feito usando tabelas. A estrutura está mostrada neste exemplo. A primeira tag, logo após começar o corpo da página será <table>.
  • O banner da página ocupará o espaço de 2 células, e por isso aplicamos o atributo colspan="2". Na segunda linha da tabela, criamos uma célula para o conteúdo principal, e outra para a barra lateral com as tags <tr> e <td>
  • Para finalizar, colocamos o rodapé da página. Este item será inserido com as tags <tr> e <td> usando o atributo de colspan="2" para usar a largura toda da página.
  • A tag de fonte pode ser usada antes da tabela de layout da página. O Notepad++ coloca em destaque quando reconhece tags fechadas, facilitando muito a programação da página.
  • As propriedades cellspacing e cellpadding são usadas para fazer as margens interna e externa de cada parte do layout da página. A largura da tabela deve ser de 100% para distribuir todo o conteúdo na tela do navegador.
  • A primeira linha, indicada com a tag <tr> contém o banner, com o atributo colspan="2" dentro da tag da célula <td>.
  • A segunda linha da tabela contém a primeira célula do conteúdo principal da página, com a largura de 70% e a barra lateral com largura de 30%. Dentro das tags <td> podemos inserir os textos e imagens da página.
  • Note que o conteúdo da barra lateral geralmente é menor do que o conteúdo principal da página. Por isso, podemos usar o atributo de alinhamento vertical valign="top" para deixar estas partes do site alinhadas. Repare no link para acessar a página de nutrientes.
  • Usando o layout dessa página, você pode criar a página nutrientes.htm na mesma pasta da página index.htm. Pegue todo o código da tabela que fizemos dos nutrientes e insira na tag principal desta página (a que tem 70% de largura).
  • A tag da última linha da tabela contém o rodapé. Nesta tag <td> você pode modificar a cor, alinhamento ou colocar uma imagem de fundo, como foi feito no banner.
  • O layout mostrado neste exemplo fica desta forma. Usando a estrutura mostrada neste exemplo, crie o site de um restaurante.
  • Trecho do código HTML da estrutura da Atividade 2: 
    <body align="center">
	<font face="Calibri" size="4">
	<table width="100%" cellpadding="20" cellspacing="15">     
		<tr>
			<td width="100%" height="170" background="imagens/banner.jpg" colspan="2">
				<h1><font size="7">Meu Restaurante</font></h1>
			</td>
		</tr> 
		<tr align="center" bgcolor="#fff3e6">
			<td width="70%">
				<p>Aproveite a comodidade de fazer o seu pedido através do 
				  nosso site!</p>
				<p>É fácil e rápido. Os melhores pratos para você desfrutar no 
				  conforto de sua casa!</p>
				<p align="center"><img src="imagens/principal.jpg" width="70%"></p>
				<p>Usamos ingredientes selecionados. Há mais de 40 anos oferecemos 
				  opções de qualidade.</p>
			</td>
			<td width="30%" valign="top">
				<h4>Conheça nossas promoções</h4>
				<p align="center"><img src="imagens/promocao.jpg" width="100%"></p>
				<h4>Tabela de Nutrientes</h4>
				<p><a href="nutrientes.htm">Acesse aqui</a> a nossa 
				  tabela de nutrientes</p>
			</td>
		</tr>
		<tr align="center" bgcolor="#fff3e6">
			<td colspan="2">
				<p align="center">Rodapé &copy; 2020</p>
			</td>
		</tr> 
	</table>
	</font>
</body>

voltar ao topo

📃 Seletor de imagens

Neste exemplo, vamos criar uma página com o seletor de imagens mostrado na apostila. Crie um arquivo chamado webdesign/exercicios/seletor.htm na nossa pasta de exercícios. Dentro da pasta de imagens, coloque 4 arquivos. No exemplo mostrado a seguir, estes arquivos estão com os nomes Foto1.jpg, Foto2.jpg, Foto3.jpg e Foto4.jpg.

📃 Detalhes da Atividade

Vamos criar uma pasta webdesign/atividade3 para trabalharmos neste projeto. Selecione 5 pontos turísticos, e cada um deles terá uma página, salva na mesma pasta que criamos. Use uma pasta chamada webdesign/atividade3/imagens para os arquivos das fotos. Neste projeto vamos inserir mapas nos sites.

  • O layout da página principal do nosso site da Atividade 3 será feito usando tabelas. Coloque o nome de index.htm nesta página, cuja estrutura está mostrada neste exemplo. A primeira tag, logo após começar o corpo da página será <table>.
  • O banner da página fica na primeira linha da tabela. Na segunda linha da tabela, criamos uma célula para o conteúdo principal, que terá um seletor de páginas<select> seguido de um <iframe>, ideia parecida com a que usamos na página de Galeria de Fotos anterior.
  • No código da página em HTML, a primeira linha da tabela contém a tag do banner. Você pode criar uma imagem de fundo usando o atributo background, como já fizemos em outras páginas.
  • A estrutura da tag <select> foi usada para as 5 páginas dos pontos turísticos. Crie estas páginas na mesma pasta da página principal, com os nomes dos pontos turísticos. Não use acentuação, e procure criar nomes com poucos caracteres.
  • Para ajustar a altura da tag <iframe>, podemos usar um estilo com altura mínima de 150% da altura da tela: min-height:150vh. Mais adiante vamos trabalhar com estas formatações.
  • Agora vamos ver como fica o layout de uma das páginas dos pontos turísticos. Basicamente são 2 colunas: uma com as descrições e fotos, e outra com a localização, e o rodapé. Logo, precisamos de uma tabela com 2 células em uma linha, e duas células mescladas na segunda linha.
  • Podemos usar a célula com conteúdo principal com a largura de 65% e a barra lateral com largura de 35%. Dentro das tags <td> podemos inserir os textos e imagens de cada página.
  • É importante separar os parágrafos, e definir larguras de imagens. Neste caso, foi usada a largura de 75% para imagens.
  • A segunda célula com a barra lateral contém o <iframe> com a localização do ponto turístico. Vamos ver como conseguir esta tag na próxima imagem.
  • Acesse o endereço www.google.com.br/maps/ e procure o ponto turístico. Depois, basta clicar em compartilhar e a opção de Incorporar um mapa. Copie e cole a tag criada na página do ponto turístico.
  • Voltando ao código da página, a linha de rodapé tem 2 células mescladas, para usar a largura toda da página. Por isso, usamos o atributo colspan="2". Com a estrutura da página de um ponto turístico pronta, crie as páginas dos outros 4 pontos turísticos.
  • O layout mostrado neste exemplo fica desta forma. Lembre-se de cuidar com os nomes das páginas, para ver se são iguais aos nomes colocados na página index.htm.
  • Trecho do código HTML da página index.htm: 
    <body align="center">
	<font face="Calibri">
	<table width="100%">
		<tr bgcolor="#e2efec">
			<td width="100%">
				<h1 align="center">Meus pontos turísticos favoritos</h1>
			</td>
		</tr>
		<tr align="center">
			<td>
				<label for="paginas">Escolha um ponto turístico:</label>
				<select  onchange="javascript:iframe1.location=this.value"
				  id="paginas" name="paginas">
					<option value="capadocia.htm">Capadócia</option>
					<option value="kremlin.htm">Kremlin de Moscou</option>
					<option value="tajmahal.htm">Taj Mahal</option>
					<option value="egito.htm">Egito</option>
					<option value="colosseum.htm">Colosseum</option>
				</select>
				</font>
				<iframe src="capadocia.htm" name="iframe1" width="100%" 
				  style="min-height:150vh;" frameborder="0" framebordercolor="red"></iframe>
			</td>
		</tr>
	</table>
	</font>
</body>
  • Trecho do código HTML da página capadocia.htm: 
    <body align="center">
	<font face="Calibri">
	<table width="100%" cellpadding="15" cellspacing="10">
		<tr bgcolor="#eff6f4">
			<td width="65%">
				<h3>Capadócia</h3>
				<p><b>A Capadócia</b> é uma região histórica e turística da Anatólia central...</p>
				<p align="center"><img src="imagens/capadocia.jpg" width="75%"></p>
				<h3>Geografia e Geologia</h3>
				<p>Toda a região se encontra num planalto com aproximadamente 1.000 m...</p>
				<p>A paisagem única da região é o resultado da...</p>
			</td>
			<td width="35%" valign="top">
				<h3>Localização</h3>
				<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d29617.819699874955!2d35.47338365738947!3d38.713451127311586!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14d6025c679e1679%3A0xf9178b7341dc5e49!2sCappadocia%2C%20Turquia!5e0!3m2!1spt-BR!2sbr!4v1598441515867!5m2!1spt-BR!2sbr" 
				  width="100%" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
			</td>
		</tr>
		<tr align="center" bgcolor="#eff6f4">
			<td colspan="2">
				Rodapé
			</td>
		</tr>
	</table>
	</font>
</body>

voltar ao topo

2. CSS - Cascading Style Sheets

Material da pág. 11 até a pág. 20

voltar ao topo

📃 Primeiro Layout com CSS

Vamos usar a nossa pasta de exercícios para criar a página webdesign/exercicios/layoutCSS.htm. Neste projeto vamos criar um layout em forma de tabela, parecido com as Atividades 2 e 3: serão 2 colunas na parte principal, com banner e um rodapé.

  • O layout da nossa primeira página com CSS será feito usando uma tabela. A primeira linha da tabela contém o banner da página, com o atributo colspan="2" para ocupar toda a largura da página. Insira uma imagem nesta tag.
  • A segunda linha da tabela contém uma barra lateral esquerda e o conteúdo principal com uma imagem inserida. Vamos testar os alinhamentos do texto e da imagem nesta página.
  • A terceira linha contém o rodapé, também com o atributo colspan="2" para usar a largura toda da página.
  • Agora vamos analisar a estrutura do CSS. Nestes primeiros exemplos, vamos usar as folhas de estilos dentro das páginas, nos cabeçalhos com a tag <style>.
  • Podemos definir atributos gerais no CSS quando nos referimos ao corpo da página body. Estes atributos podem incluir tamanhos de fontes e cores de fundos. Modifique estes valores para visualizar o layout da sua página.
  • De uma maneira bem mais simples, definimos bordas, cores de fundo das células td com as folhas de estilos. Note que o tamanho da fonte foi colocado com 0.8em, ou seja, corresponde a 80% do tamanho de fonte da tag mãe body.
  • Um atributo importante que usamos no CSS é da altura da página. Neste caso, foi colocado que a altura mede 100vh, ou seja, 100% da altura do navegador. Podemos usar no lugar do atributo height:100vh; o atributo min-height:100vh;, que deixaria a altura mínima com a altura do navegador.
  • Para imagens não ficarem "grudadas" nos textos, podemos definir as margens com CSS. Os atributos ficam valendo para todas as imagens que você insere na página. Modifique atributos nesta nossa página, para treinar para a próxima Atividade.
  • Trecho do código HTML com CSS interno: 
    <!DOCTYPE html>
<html>
<head>
  <title>CSS</title>
  <meta name="author" content="Paulo Henrique">
  <meta name="keywords" content="HTML, TABELAS, CSS">
  <meta charset="UTF-8">
  <style type="text/css">
	body {font-size:25px;}
	td {background-color:#ccffcc; color:blue; font-size:0.8em; padding:10px; 
	  border:5px solid white;}
	table {width:100%; height:100vh; font-family:Tahoma; font-style:italic; 
	  border: 4px solid blue; text-align: center;}
	img {margin:30px;}
  </style>
</head>
<body>
	<table>
		<tr>
			<td colspan="2">Banner</td>
		</tr>
		<tr>
			<td>Barra lateral</td>
			<td>Conteúdo principal
			<br><img src="imagens/foto1.jpg"></td>
		</tr>
		<tr>
			<td colspan="2">Rodapé</td>
		</tr>
	</table>
</body>
</html>

voltar ao topo

voltar ao topo

📃 Layout da Atividade 4

Vamos criar uma pasta para nosso próximo site chamada webdesign/atividade4. Neste projeto vamos criar um layout em forma de tabela, parecido com as Atividades 2 e 3, com formatação CSS. Como é um site com 3 páginas, vamos precisar de uma pasta de imagens:webdesign/atividade4/imagens.

  • O layout da nossa primeira página com CSS será feito usando uma tabela. A primeira linha da tabela contém uma célula com um ícone (logomarca ou pictograma) e na outra célula o banner da página, com o atributo colspan="2" para ocupar a largura restante da página (retirando a parte do ícone. Você pode inserir imagens nestas tags.
  • Note que já vamos criar classes para as partes das nossas páginas: class="icone" e class="banner" para formatação em CSS. Com o tema de Esportes, escolha um título para colocar no Banner da página que terá o nome index.htm.
  • A segunda linha da tabela contém o menu, que ocupará a largura toda da página. Por isso, colocamos o atributo colspan="3" nesta célula, que possui classe com o nome class="menu".
  • Na quarta linha, teremos 3 células: class="galeria", que contém uma espécie de galeria de notícias e imagens; class="principal", com o contéudo principal da página que ficará centralizado no layout; e class="contato", com informações de contatos e redes sociais.
  • A última linha contém o rodapé, com atributo colspan="3" para usar a largura toda da página, definida como class="rodape".
  • A tag dentro do cabeçalho style contém todos os atributos do CSS que vamos definir nestas páginas. Nesta primeira página index.htm vamos definir todos os estilos antes de criar as outras páginas do nosso site.
  • Estrutura em HTML com CSS interno da Atividade 4: 
    <!DOCTYPE html>
<html>
<head>
  <title>Atividade 4</title>
  <meta name="author" content="Paulo Henrique">
  <meta name="keywords" content="HTML, TABELAS, CSS">
  <meta charset="UTF-8">
  <style type="text/css">
	body {width:85%; text-align:center; margin:auto; background: url(imagens/fundo.jpg);
	  font-size:16px; background-size: cover; background-attachment: fixed; }
  </style>
</head>
<body>
	<table>
		<tr>
			<td class="icone">&#x1f3d0;</td>
			<td colspan="2" class="banner">Notícias do Vôlei</td>
		</tr>
		<tr>
			<td colspan="3">
				<nav class="menu">
					MENU
				</nav>
			</td>
		</tr>	
		<tr>
			<td class="galeria">
				GALERIA LATERAL
			</td>
			<td class="principal">
				CONTEÚDO PRINCIPAL
			</td>
			<td class="contato">
				CONTATO
			</td>
		</tr>
		<tr>
			<td class="rodape" colspan="3">&copy; Copyright 2020</td>
		</tr>
	</table>
</body>
</html>

voltar ao topo

📃 Banner da Atividade 4

Vamos formatar o banner e o ícone da página index.htm da Atividade 4 com CSS. A estrutura HTML já foi mostrada e comentada em detalhes na página anterior.

  • O corpo da página body foi definido com uma imagem de fundo (background) que mostra uma partida de vôlei. Note que deixamos as imagens na pasta webdesign/atividade4/imagens. Logo, podemos usar o atributo url(imagens/banner.jpg) que mostra o caminho do arquivo da imagem de fundo do site.
  • Em CSS podemos definir vários elementos para a tag body, que é a "mãe" de todas as tags. Largura, tamanho de fonte, margem automática (que deixa o conteúdo centralizado), além de background-size e background-attachment que deixam a imagem de fundo fixa e "cobrindo" todo o espaço da tela.
  • A tag de ícone pode conter uma imagem, como uma logomarca, ou podemos usar uma imagem pictográfica. No site http://www.degraf.ufpr.br/docentes/paulo/webdesign/pictograph.html você pode escolher uma imagem pictográfica para ficar nesta tag de ícone desta página.
  • Em cada página do nosso site, podemos escolher um destes símbolos pictográficos para inserir na tag de ícone. Visite a página indicada e escolha um símbolo que represente o esporte de cada página. O formato deste tipo de imagem é parecido com o de cores hexadecimais, mas sempre começa com o símbolo &.
  • Na tag do banner, podemos escolher uma imagem de fundo, inserindo-a como fizemos na imagem do fundo do site na tag body. Outra opção é usar efeitos de texto, como cores diferentes no contorno com o atributo stroke-width mostrado neste exemplo.
  • As tags td servem de estrutura para o layout do nosso site, e precisam de formatações. Margens internas, cor de fundo e imagem de fundo podem ser definidas no CSS. Note que as tags nativas do HTML não têm o símbolo de ponto . nas atribuições dos estilos. Somente colocamos ponto . nas classes criadas (banner, icone, menu,...).
  • Outra tag importante para definirmos atributos no CSS é a table, que contém os espaçamentos das células para separar os blocos de conteúdos, cor de texto e a largura.
  • Com as propriedades definidas neste exemplo, a página fica com a parte superior desta forma. Formate o layout da sua página com as propriedades que você ache mais adequadas para esta atividade. Seguiremos com as outras partes desta atividade. A estrutura CSS do banner desta atividade fica assim: 
    <style type="text/css">
	body {width:85%; text-align:center; margin:auto; background: url(imagens/fundo.jpg);
	  font-size:16px; background-size:cover; background-attachment:fixed;}
	.banner {font-size:35px; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color:green;}
	td {background-color: rgba(204,255,204,0.9); padding:10px; }
	table {width:100%; font-family:Tahoma; border-spacing: 8px; color: #606060;}
	.icone {font-size:70px; }
</style>

voltar ao topo

📃 Menu da Atividade 4

Vamos formatar o menu da página index.htm da Atividade 4 com CSS. A estrutura HTML possui a tag nav descrita a seguir.

  • Dentro da tag <nav class="menu"> podemos criar uma tag de lista <ul>, com cada item <li> representando a página de um esporte desta atividade. Usamos a tag de link <a> para criar a navegação entre os links do menu. A página index.htm tem classe ativa que vamos configurar a seguir.
  • Agora vamos focar no cabeçalho da página para criar as propriedades do menu. Note que as propriedades do banner estão logo acima, dentro da mesma tag <style>.
  • A lista dos itens do menu ul tem atributos de margens, estilo sem formato de lista e o display flex que pode ser usado para distribuir os itens dentro da célula da tabela. A direção deste display está em linha (row) pois o menu é horizontal.
  • Para que a lista não fique "grudada" nas outras partes da página, criamos margens top e bottom. Colocamos uma borda azul à direita e comprimento fixo de 100px. Se necessário, ajuste este valor na sua página, para que os textos de todos os itens caibam no menu, sem quebras de linha.
  • O último item da lista last-child ficará sem borda, deixando bordas apenas internas entre os itens do menu.
  • Na tag <a> podemos configurar tamanho de fonte e o atributo text-decoration:none; que remove aquelas configurações comuns de links (cor azul, sublinhado).
  • Ao passar o cursor do mouse por cima de um item do menu, podemos criar alguns efeitos: mudanças de cor, de fundo, sublinhados ou sombras. Neste caso usamos sombra e mudança de cor da fonte para esse efeito. Escolha um efeito para sua página.
  • A página ativa, neste caso index.htm, pode ter alguma apresentação diferente no menu para destacar ao visitante que ele está nesta página. Quando construir as outras páginas, modifique a classe na tag <nav> o item ativo.
  • Este é o resultado parcial da página, com estas configurações de menu. Usando os atributos mostrados, modifique valores para a apresentação do seu site.
  • Estrutura CSS do menu da Atividade 4: 
    <style type="text/css">
	body {width:85%; text-align:center; margin:auto; background: url(imagens/fundo.jpg);
	  font-size:16px; background-size:cover; background-attachment:fixed;}
	.banner {font-size:35px; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color:green;}
	td {background-color: rgba(204,255,204,0.9); padding:10px; }
	table {width:100%; font-family:Tahoma; border-spacing: 8px; color: #606060;}
	.icone {font-size:70px; }
	
	.menu ul {list-style-type:none; margin:0; padding:0; display:flex; 
	  justify-content:center; flex-direction:row;}
	.menu li {margin-top: 10px; margin-bottom: 10px; padding: 8px; 
	  border-right: 1px blue solid; width: 100px; text-align:center;}
	.menu li:last-child {border-right:none;}
	.menu li a {color:#666; padding:10px; text-decoration:none; font-size:1.2em;}
	.menu li a:hover {color:blue; text-shadow:1px 1px 2px white;}
	.active {text-shadow:1px 1px 1px green;}
</style>
    Estrutura HTML do menu da Atividade 4: 
    <nav class="menu">
	<ul>
		<li class="active"><a href="index.htm">Vôlei</a></li>
		<li><a href="natacao.htm">Natação</a></li>
		<li><a href="basquete.htm">Basquete</a></li>
	</ul>
</nav>

voltar ao topo

voltar ao topo

📃 Conteúdo da Atividade 4

Vamos formatar o conteúdo principal e a barra lateral de galeria da página index.htm da Atividade 4 com CSS. Antes vamos ver a estrutura HTML destas partes da página.

  • A barra esquerda será a galeria de notícias class="galeria". Podemos criar um cabeçalho <h3>, um parágrafo <p> com descrição do título da notícia, uma imagem <img> e um link <a>. Nesta barra podemos inserir 2 ou 3 notícias com estes elementos, separadas por uma tag <hr>.
  • O conteúdo da página da tag class="principal" contém parágrafos <p> e imagens. Podemos criar uma div class="imagem" para formatar imagens dentro desta parte da página.
  • Na tag de estilo <style> vamos focar nos atributos das classes galeria e principal.
  • A classe imagem serve para alinhar as fotos com o texto na tag principal. Podemos definir margens para não deixar as fotos "grudadas" nos textos.
  • De maneira geral, as imagens das páginas podem ser colocadas com largura máxima de 100%.
  • O alinhamento vertical-align:top; faz com que o conteúdo da galeria fique alinhado com os conteúdos das outras barras: principal e contato. Podemos definir a largura da galeria: 20%, por exemplo. Faça testes com os conteúdos de sua página para encontrar o melhor valor.
  • Defina o alinhamento do texto da tag principal da página. Você pode definir também cor de texto e mais efeitos no CSS. Vamos definir mais adiante os atributos das outras tags da página.
  • Estrutura CSS do conteúdo da Atividade 4: 
    <style type="text/css">
	body {width:85%; text-align:center; margin:auto; background: url(imagens/fundo.jpg); 
	  font-size:16px; background-size:cover; background-attachment:fixed;}
	.banner {font-size:35px; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color:green;}
	td {background-color: rgba(204,255,204,0.9); padding:10px; }
	table {width:100%; font-family:Tahoma; border-spacing: 8px; color: #606060;}
	.icone {font-size:70px; }
	
	.menu ul {list-style-type:none; margin:0; padding:0; display:flex; 
	  justify-content:center; flex-direction:row;}
	.menu li {margin-top: 10px; margin-bottom: 10px; padding: 8px; 
	  border-right: 1px blue solid; width: 100px; text-align:center;}
	.menu li:last-child {border-right:none;}
	.menu li a {color:#666; padding:10px; text-decoration:none; font-size:1.2em;}
	.menu li a:hover {color:blue; text-shadow:1px 1px 2px white;}
	.active {text-shadow:1px 1px 1px green;}
	
	.imagem {text-align:center; margin-top:20px; margin-bottom:20px;}
	img {max-width:100%;}
	.galeria {width:20%; vertical-align:top;}
	.principal {text-align:left;}
</style>

voltar ao topo

📃 Contato e rodapé da Atividade 4

Vamos formatar os conteúdos da barra de contato e do rodapé da página index.htm da Atividade 4 com CSS. Antes vamos ver a estrutura HTML destas partes da página.

  • A barra direita será de contatos de email e de redes sociais class="contato". Podemos criar links <a> para email e acesso às redes sociais. Insira imagens na pasta webdesign/atividade4/imagens de email, facebook e mais redes sociais para colocar dentro das tags de link as imagens <img>.
  • A tag class="rodape" contém as informações que já usamos em outras páginas. Agora vamos ver as propriedades CSS destas partes da página.
  • A tag de contato tem o alinhamento vertical definido no topo da célula com o atributo vertical-align:top;. Se definirmos a largura desta barra como 10%, teremos 70% para o conteúdo principal (pois a galeria ficou com 20%). Teste diferentes valores para o conteúdo de sua página.
  • As imagens dentro desta classe podem ser menores, pois funcionam como ícones de acesso. Logo, usamos o atributo .contato img que significa que as larguras de dentro da classe de contato serão menores. Neste caso, usamos 50%. Teste valores diferentes em sua página.
  • A tag de rodapé tem a configuração mais simples. Usamos as mesmas propriedades das páginas anteriores.
  • Com as propriedades definidas, a página index.htm fica com este layout. Teste medidas e cores para sua página. Depois de definir os valores mais adequados, você pode construir as outras 2 páginas: basta copiar e colar este código nos outros arquivos de esportes: no meu caso, basquete.htm e natacao.htm. Não esqueça de definir os menus das outras páginas com o item active. Coloque os 3 arquivos na mesma pasta, compartilhando a mesma pasta de imagens.
  • Trecho da estrutura HTML do contato e do rodapé da Atividade 4: 
    <td class="contato">
		<h3>Contatos</h3>
		<a href="mailto:seuemail@provedor.com.br"><img src="imagens/email.png" alt="Nosso email" ></a>
		<a href="https://www.facebook.com/supervolley20/"><img src="imagens/facebook.png" alt="Facebook" ></a>
		<a href="https://twitter.com/fivbvolleyball?lang=pt"><img src="imagens/twitter.png" alt="Twitter" ></a>
		<a href="https://www.instagram.com/volleyballworld/?hl=pt-br"><img src="imagens/instagram.png" alt="Instagram" ></a>
	</td>
</tr>
<tr>
	<td class="rodape" colspan="3">&copy; Copyright 2020</td>
</tr>
  • Estrutura CSS do contato e do rodapé da Atividade 4: 
    <style type="text/css">
	body {width:85%; text-align:center; margin:auto; background: url(imagens/fundo.jpg); 
	  font-size:16px; background-size:cover; background-attachment:fixed;}
	.banner {font-size:35px; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color:green;}
	td {background-color: rgba(204,255,204,0.9); padding:10px; }
	table {width:100%; font-family:Tahoma; border-spacing: 8px; color: #606060;}
	.icone {font-size:70px; }
	
	.menu ul {list-style-type:none; margin:0; padding:0; display:flex; 
	  justify-content:center; flex-direction:row;}
	.menu li {margin-top: 10px; margin-bottom: 10px; padding: 8px; 
	  border-right: 1px blue solid; width: 100px; text-align:center;}
	.menu li:last-child {border-right:none;}
	.menu li a {color:#666; padding:10px; text-decoration:none; font-size:1.2em;}
	.menu li a:hover {color:blue; text-shadow:1px 1px 2px white;}
	.active {text-shadow:1px 1px 1px green;}
	
	.imagem {text-align:center; margin-top:20px; margin-bottom:20px;}
	img {max-width:100%;}
	.galeria {width:20%; vertical-align:top;}
	.principal {text-align:left;}
	.contato {width:10%; vertical-align:top;}
	.contato img {width:50%; margin:20px;}
	.rodape {color: #606060;}
</style>

voltar ao topo

📃 Formulário de Contato

Crie uma página na nossa pasta de exercícios webdesign/exercicios com nome contato.htm. Outro arquivo que vamos criar nesta pasta chama-se enviar.php, com o código mostrado na apostila. Vamos mostrar a criação e layout de uma página de formulário, sem a configuração de um servidor para receber os dados enviados.

  • Podemos criar uma tag "mãe" do formulário class="formulario" para atribuir as propriedades de seus componentes.
  • Cada entrada terá um rótulo "agregado" <label>. Este rótulo pode ser referenciado com o atributo for, com o nome da respectiva entrada.
  • As entradas são colocadas no HTML na sequência de cada um de seus rótulos. Se você quiser fazer o formulário com rótulos ao lado das entradas, pode usar uma tabela para ajudar a organizar os dados da página.
  • No final do formulário, criamos uma caixa de texto <textarea>, que pode ser deixada com mais linhas (neste caso, deixamos com 7 linhas).
  • O botão de enviar tem o atributo type="submit" para caracterizá-lo com a interação com o visitante para enviar os dados.
  • Agora vamos formatar as tags da página com CSS. O corpo da página body tem margem automática e uma largura de 85%. Formate os elementos principais da página nesta tag.
  • Os rótulos label têm atributo display: block;, que usa a linha inteira sem precisarmos de tags de parágrafos e de quebras de linhas para inserir as entradas input. Note que colocamos margens para não "grudar" os rótulos com as entradas.
  • A classe formulario serve como um "container" do formulário, onde podemos atribuir cor de fundo, margem interna e tipo de fonte.
  • As entradas com tags nativas input e textarea têm propriedades de largura, cor de fundo, sombras e margens internas que podem ser alteradas. Neste exemplo, criamos bordas arredondadas com o atributo border-radius.
  • A tag textarea pode ser inserida com largura maior do que as outras entradas. Por tratar-se de uma tag "elástica", que o visitante pode "abrir" com o cursor do mouse, colocamos também o tamanho de largura máxima max-width.
  • Como o botão para enviar os dados tem id="submit" no código HTML, sua formatação usa a hashtag #submit para referência. Este botão pode ter uma opacidade definida (neste exemplo é de 85%), que modifica quando o visitante passa o cursor do mouse por cima do botão. Colocamos também a sombra box-shadow para dar um efeito de 3D.
  • A página com contato fica com este layout. Modifique medidas, cores e crie sua página de contato. Vamos utilizá-la em próximas Atividades.
  • Estrutura CSS do formulário: 
    <style type="text/css">
	body {width:85%; text-align:left; margin:auto; font-size:18px;}
	label {display: block; margin-bottom: 8px; margin-top: 8px;}
	.formulario {width:70%; background:rgba(10,10,200,0.05); padding:15px; font-family:Arial;}
	input, textarea {background-color: #ddd; border: none; padding: 8px; 
	  border-radius: 8px; width: 60%; box-shadow: 0px 0px 2px #aad187; font-size: 0.9em; }
	textarea {width: 97%; max-width: 97%;}
	#submit {width: 25%; background-color: #aad187; box-shadow: 2px 2px 2px #ddd; opacity:0.85;}
	#submit:hover {opacity: 1;}
</style>
    Estrutura PHP do formulário: 
    <?php  
	$name = $_POST['name'];  
	$email = $_POST['email'];  
	$message = $_POST['message']; 
	$fone = $_POST['fone'];  
	$from = 'De: Meu site';  
	$to = 'paulohs@ufpr.br';  
	$subject = 'Dúvida';  
	$body = "De: $name\n E-Mail: $email\n Mensagem:\n $message";  
	if ($_POST['submit'])  { if ($name != '' && $email != '') 
		{ if (mail ($to, $subject, $body, $from))  
			{ echo 'Sua mensagem foi enviada!';} 
		else {echo 'Algo deu errado, volte e tente novamente!';} 
		} 
	else {echo 'Você precisa responder todas as questões!!';} 
	} 
?>
  • Estrutura HTML do formulário: 
    <div class="formulario">
	<form method="post" action="enviar.php">
		<h2>Contato</h2>
		<p>Preencha o formulário com seus dados.</p>
		<hr>
		<label for="nome"><b>Nome</b></label>
		<input placeholder="Seu nome" name="nome" id="nome" required>
		<label for="email"><b>Email</b></label>
		<input placeholder="Seu email" name="email" id="email" required>
		<label for="fone"><b>Telefone</b></label>
		<input type="tel" name="fone" id="fone" maxlength="9" required>
		<label for="duvida"><b>Qual é sua dúvida?</b></label>
		<textarea rows="7" name="duvida" id="duvida" placeholder="Qual é sua dúvida?"></textarea>
		<hr>
		<input id="submit" name="submit" type="submit" value="Enviar">
	</form>
</div>

voltar ao topo

3. CSS, Flexbox e Mapeamentos de imagens

Material da pág. 21 até a pág. 27

📃 FlexBox para itens

Crie uma página na nossa pasta de exercícios webdesign/exercicios com nome itens.htm. Dentro desta pasta, use a pasta de imagens para inserir fotos dos itens que vamos criar com o atributo FlexBox. É o mesmo que já usamos nos itens dos menus.

  • Usando a estrutura em tabela, vamos criar somente uma linha com a tag <tr> com duas barras: lateral, na primeira célula <td> e conteúdo, na segunda célula.
  • As tags podem ser referenciadas com as classes class="barra" e class="conteudo".
  • Dentro da célula de conteúdo, crie uma nova classe para formatarmos no CSS: class="todos", que será a tag mãe dos itens.
  • Dentro desta div, podemos criar as tags filhas, que terão nomes class="item". Em cada uma, coloque um texto e a respectiva imagem que está salva na pasta de imagens. Crie 5 ou mais itens, para testarmos o layout que será usado na próxima Atividade.
  • Agora vamos formatar as tags da página com CSS. Nesta página somente foi atribuído o tamanho da fonte na tag body.
  • Neste exemplo, foi usado font-size:0.8em, ou seja, teremos 80% do tamanho da fonte dentro das células. Atributos de cor de fundo e margens também podem ser colocados nesta tag td.
  • A tag mãe das células, table, pode ser usada para a largura do layout, bordas e alinhamento de texto.
  • Use atributos para formatar a barra lateral. Neste caso, foi usado o alinhamento vertical vertical-align:top para deixá-la na mesma altura do conteúdo.
  • A tag de conteúdo pode ter atributos configurados de alinhamento vertical e largura. Se atribuirmos 70% de largura, automaticamente a barra lateral fica com os 30% restantes.
  • A tag com todos os itens ficou com atributo de display:flex;, distribuição em linha flex-direction:row; e o atributo flex-wrap:wrap; para deixar que os itens mudem de linha automaticamente se o navegador não conseguir exibí-los todos na mesma linha.
  • Os itens herdam a propriedade flex da tag mãe "todos". Os itens podem ter o atributo de largura mínima min-width:150px;, evitando que o respectivo conteúdo seja "espremido" demais para caber em uma linha só. Cor de fundo, borda e arredondamento de bordas podem ser atribuídos nos itens. Faça testes do layout do flexbox que criamos.
  • A página de itens fica com este layout. Modifique medidas, cores e crie sua página de itens, que será utilizada em próximas Atividades. Se as alturas das imagens ficarem muito diferentes, você pode usar altura mínima min-height ou editar as imagens externamente, deixando-as com mesmo tamanho.
  • Trecho da estrutura HTML: 
    <table>
	<tr>
		<td class="barra">
			Barra lateral
		</td>
		<td class="conteudo">Conteúdo principal
			<div class="todos">
				<div class="item">
					ITEM 1
					<br><img src="imagens/prod1.jpg">
				</div>
				<div class="item">
					ITEM 2
					<br><img src="imagens/prod2.jpg">
				</div>
				<div class="item">
					ITEM 3
					<br><img src="imagens/prod3.jpg">
				</div>
				<div class="item">
					ITEM 4
					<br><img src="imagens/prod4.jpg">
				</div>
				<div class="item">
					ITEM 5
					<br><img src="imagens/prod5.jpg">
				</div>
			</div>
		</td>
	</tr>
</table>
  • Estrutura CSS: 
    <style>
	body {font-size:25px;}
	td {background-color:#ccffcc; color:grey; font-size:0.8em; padding:10px; 
	  border:5px solid white;}
	table {width:85%; font-family:Tahoma; border: 1px solid #ccffcc; text-align: center;}
	.barra {vertical-align:top;}
	.conteudo {vertical-align:center; width:70%;}
	.todos {width:100%; background:#ccffcc; text-align:center; display:flex; color:grey;
	justify-content:space-around; flex-direction:row; flex-wrap:wrap; align-items:stretch;}
	.item {padding:15px; background:rgba(0,150,0,0.1); margin:10px; min-width:150px;
	  border:1px solid grey; border-radius:7px;}
</style>

voltar ao topo

📃 Detalhes da página principal

Crie uma pasta chamada webdesign/atividade5, com a página principal com nome index.htm. Dentro desta pasta, crie a pasta de imagens para inserir fotos dos 12 itens que aparecem na página criada. Vamos usar muitos recursos da página que construímos com Flexbox.

  • A estrutura HTML desta Atividade terá 1 linha com o ícone e o banner da loja, uma linha com a barra lateral e o menu, na outra linha aparece o conteúdo com itens da loja e finalizamos com o rodapé na última linha.
  • Na barra lateral, podemos usar a mesma estrutura da Atividade 4, com email e links para redes sociais fictícias, da loja virtual que estamos criando.
  • O menu terá estrutura parecida com a que usamos na Atividade 4, inclusive na sua programação CSS.
  • Os itens da loja podem ser colocados dentro da tag class="todos", que usamos na página anterior. Cada item aparece dentro de uma classe class="item", onde colocamos um título do produto, uma imagem e o preço, com a tag <strike> para os preços antigos de cada um dos 12 produtos.
  • A programação da página CSS tem itens que valem para a página principal e para as páginas filhas. A tabela está com fundo branco, com bordas em tom verde claro. O atributo border-spacing separa as partes das páginas.
  • O banner está referenciado com a altura da tela do navegador com o atributo height:10vh;, ou seja, 10% da altura da tela. Uma imagem de fundo dos produtos e a cor do texto também podem ser configurados no CSS. Escolha um pictograma para colocar na tag de ícone.
  • A barra lateral e o menu também ficarão fixos, valendo para todas as páginas do site desta atividade. Você pode usar os mesmos atributos da Atividade 4, modificando cores e espaçamentos para a loja virtual
  • O conteúdo pode ter propriedades diferentes em cada página do site. Nesta primeira página, estamos colocando os itens com atributos flexbox para os produtos da loja. Margens, cores e configurações de fonte podem ser modificadas nesta tag.Para deixar as imagens com mesmo tamanho, foi usada a propriedade de altura no atributo .item img {}.
  • Os cabeçalhos dos produtos e o rodapé podem ser configurados em CSS.
  • Usando os atributos mostrados, a página index.htm fica com este layout. Monte a sua página da Atividade da loja virtual. Agora, vamos ver como criar as "páginas filhas".
  • Trecho da estrutura HTML: 
    <table>
	<tr>
		<td class="icone">&#x1f34f;</td>
		<td class="banner">Minha loja de produtos naturais</td>
	</tr>
	<tr>
		<td class="barra" rowspan="2">
			<h4>Contatos</h4>
			<a href="mailto:seuemail@provedor.com.br"><img src="imagens/email.png" alt="Nosso email" ></a>
			<a href="https://www.facebook.com/naturezaProdutosC/"><img src="imagens/facebook.png" alt="Facebook" ></a>
			<a href="https://twitter.com/naturezaProdutos?lang=pt"><img src="imagens/twitter.png" alt="Twitter" ></a>
			<a href="https://www.instagram.com/Naturezaprodt/?hl=pt-br"><img src="imagens/instagram.png" alt="Instagram" ></a>
		</td>
		<td class="menu">
			<nav>
				<ul>
					<li><a href="index.htm">Produtos</a></li>
					<li><a href="contato.htm">Fale conosco</a></li>
					<li><a href="promocoes.htm">Promoções</a></li>
					<li><a href="sobrenos.htm">Sobre nós</a></li>
				</ul>
			</nav>
		</td>
	</tr>
	<tr>
		<td class="conteudo">
			<h4>Produtos</h4>
			<p>Confira os preços dos nossos produtos (cada 100g).</p>
			<div class="todos">
				<div class="item">
					<h4>Açafrão em pó</h4>
					<br><img src="imagens/prod1.jpg">
					De <strike>R$4,50</strike>
					<br>Por R$3,50
				</div>
				<div class="item">
					<h4>Alecrim</h4>
					<br><img src="imagens/prod2.jpg">
					De <strike>R$6,90</strike>
					<br>Por R$5,70
				</div>
			</div>
		</td>
	</tr>
	<tr>
		<td colspan="2" class="rodape">Copyright &copy;2020</td>
	</tr>
</table>
  • Estrutura CSS: 
    <style>
	body {font-size:25px; margin: auto; width:85%;}
	td {background-color: rgba(0,150,0,0.1) color:grey; font-size:0.8em; 
	  padding:5px; border:none;}
	table {width:85%; font-family:Tahoma; border:1px solid rgba(0,130,0,0.3); 
	  text-align:center; border-spacing:8px;}
	
	.banner {height:10vh; background:url(imagens/banner.jpg); font-size:2em; font-weight:bold;
	  color:white; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: rgb(0,130,0);}
	.icone {font-size:5em; border-bottom:1px solid rgba(0,130,0,0.3);}
	
	.barra {vertical-align:top; border-right: 1px solid rgba(0,130,0,0.3)}
	.barra img {width:40%; margin:20px;}

	.menu ul {margin:0; padding:8px; list-style-type:none; display:flex; justify-content:center;
	  flex-direction:row; border-bottom:1px solid rgba(0,130,0,0.3)}
	.menu li {padding:0px; border-right:1px solid rgba(0,130,0,0.3); width:150px; 
	  text-align:center;}
	.menu li:last-child {border-right:none;}
	.menu li a {color:rgba(0,130,0,0.7); text-decoration:none; font-weight:bold;}
	.menu li a:hover {color:rgba(0,130,0,1); text-shadow:1px 1px 1px LightSilver;}
	
	.conteudo {vertical-align:top; width:88%;}
	.todos {width:100%; text-align:center; display:flex; justify-content:space-around; 
	  flex-direction:row; flex-wrap:wrap; color:grey; align-items: stretch;}
	.item {padding:15px; margin:10px; min-width:170px; border:1px solid rgba(0,130,0,0.3); 
	  border-radius:7px; width:18%; font-size:0.8em;}
	.item img {width:100%; height:10vh;}
	.item:hover {opacity:0.8;}
	
	h4 {margin:0; color: rgba(0,130,0,0.7);}
	.rodape {border-top: 1px solid rgba(0,130,0,0.3); color: rgba(0,130,0,0.7); paddding: 5px;}
</style>
📃 Detalhes das outras páginas

Na pasta chamada webdesign/atividade5, crie as páginas sobrenos.htm e contato.htm. Estas páginas usarão a mesma pasta de imagens criada para a página principal.

  • A página sobrenos.htm contém informações genéricas da loja virtual. Insira uma imagem e um pouco de texto sobre o atendimento da loja.
  • Podemos copiar toda a configuração CSS da página index.htm. A tag de conteúdo pode conter apenas atributos de alinhamento vertical e de largura nesta página.
  • O layout da página fica com esta configuração. Note que o ícone, banner, barra lateral, menu e rodapé ficam com mesmo layout da página index.htm.
  • Na página de contato, podemos usar a mesma estrutura HTML usada na Atividade 4. Crie o arquivo enviar.php com mesmo código que usamos nos formulários de contato que já criamos.
  • Configure os atributos dos itens do formulário de acordo com as cores usadas no layout do site. Note que o conteúdo desta página de contato também pode ser configurado de forma simplificada, sem os itens dos produtos.
  • Com as propriedades e atributos mostrados, a página de contato fica com esse layout. Crie suas páginas de contato e "Sobre nós". A página de promoções é opcional, que pode mostrar alguns produtos em destaque.

voltar ao topo

📃 Mapeamento de imagens

Vamos criar uma pasta chamada webdesign/mapeamento. Nesta pasta, crie um arquivo chamado mapeamento.htm. Escolha um dos arquivos para fazer o mapeamento: menu verde, menu branco ou encontre outra imagem de um menu completo.

  • Um mapeamento de imagens usa a tag <map>, que contém os shapes com links. A primeira tag desta página é a imagem que será mapeada com a tag <img>.
  • Como precisamos referenciar qual será a imagem mapeada, usamos os atributos usemap="#Map" na tag <img> e o identificador id="#Map". Desta forma, os shapes aparecerão por cima da imagem com identificador #Map.
  • Neste exemplo, mostraremos o uso dos círculos para mapear. Eles criam uma área invisível para o visitante, mas que ao passar o cursor do mouse por cima da área na imagem, aparece o link. Os círculos possuem as coordenadas do centro X e Y e a medida do RAIO: coords="X,Y,RAIO". As coordenadas da imagem de menu que você mapear podem ser obtidas em um editor de imagens.
  • Outras informações que precisamos inserir na tag de cada shape é do link e seu título: href e title. Crie o mapeamento, salve a página e teste o layout. Vamos fazer outros mapeamentos a seguir.
  • Estrutura HTML do mapeamento: 
    <img src="imagens/menu_horizontal.png" width="1334" height="282" usemap="#Map">
<map name="Map" id="Map">
	<area shape="circle" coords="104,104, 104" href="home.html" title="HOME" />
	<area shape="circle" coords="326,104, 104" href="dicas.html" title="DICAS" />
	<area shape="circle" coords="550,104, 104" href="hospedagem.html" title="HOSPEDAGEM" />
	<area shape="circle" coords="777,104, 104" href="galeria.html" title="GALERIA" />
	<area shape="circle" coords="1003,104, 104" href="mapas.html" title="MAPAS" />
	<area shape="circle" coords="1226,104, 104" href="contao.html" title="CONTATO" />
</map>

voltar ao topo

voltar ao topo

📃 Mapeamento de imagens com SVG

Vamos usar a pasta webdesign/mapeamento para este exercício. Crie um arquivo chamado mapeamento-svg.htm. Escolha um dos arquivos para fazer o mapeamento: menu verde, menu branco ou encontre outra imagem de um menu completo.

  • Usando SVG, nosso mapeamento ficará responsivo. Com a tag <svg>, crie a janela de visualização viewBox com as mesmas dimensões da imagem que será mapeada.
  • A estrutura com SVG é basicamente a mesma que usamos com tags HTML, modificando apenas a forma de escrever os comandos. Dentro de uma tag de link <a>, colocamos os shapes. Neste exemplo, são mostrados o círculo, o retângulo e o polígono com SVG.
  • Podemos usar atributos de opacidade nos shapes usando fill-opacity:0;.
  • Quando o visitante passar o cursor do mouse sobre os mapeamentos, usamos o atributo hover de cada shape para definir linhas e opacidade diferente de 0. Teste o layout e os mapeamentos. Experimente diminuir o tamanho da tela do navegador para testar se o site fica responsivo.
  • Estrutura CSS do mapeamento: 
    <style type="text/css">
	body {background:rgba(255,255,255); width:80%; margin:auto; box-shadow:0px 0px 5px grey;}
	svg {width:100%;}
	circle, rect, polyline {fill-opacity: 0;}
	rect:hover, circle:hover, polyline:hover {fill:blue; stroke:pink; stroke-width:5; 
	  fill-opacity:0.1; stroke-opacity:0.2}
</style>
    Trecho da estrutura HTML do mapeamento: 
    <svg viewBox="0,0, 1334,282">
	<image href="imagens/menu_horizontal.png" x="0" y="0" height="282" width="1334"/>
	<a xlink:href="home.html">
		<circle cx="104" cy="104" r="104"/>
	</a>
	<a xlink:href="dicas.html">	
		<rect x="230" y="0" width="208" height="208"/>
	</a>
	<a xlink:href="dicas.html">	
		<polyline points="506,20, 456,108, 506,195, 605,195, 654,108, 605,20"/>
	</a>
</svg>
📃 Mapeamento com SVG e texto

Vamos usar a pasta webdesign/mapeamento para este exercício. Crie um arquivo chamado mapeamento-svg-info.htm, que usaremos para criar o mapeamento do menu com informações de texto. Escolha um dos arquivos para fazer o mapeamento: menu verde, menu branco ou encontre outra imagem de um menu completo.

  • Neste exemplo, o menu branco foi usado. Note que a janela viewBox do SVG foi criada com altura um pouco maior, para que as informações de texto apareçam logo abaixo dos ícones do menu.
  • Dentro da mesma estrutura criada na página anterior, colocamos a tag <text> com respectivos shapes de retângulos. Para alinhar à esquerda o texto com o ícone, as coordenadas x do texto e dos retângulos são as mesmas. As coordenadas y serão iguais a 215px.
  • Definimos como padrão de visualização de retângulos e textos no CSS as opacidades nulas de tags rect e text.
  • Quando o visitante passar o cursor do mouse por cima de uma região com tag mapeada <a>, os respectivos textos e retângulos aparecerão com a definição do atributo de opacidade em a:hover > text e a:hover > rect.
  • Defina os atributos de cores de preenchimento, linhas, tipos de fonte e opacidade nula para os textos. A opacidade só ficará igual a 1 quando o atributo hover ficar ativo. Configure também o atributo transition: 0.5s para fazer uma transição de meio segundo na mudança de opacidade.
  • O layout do menu fica desta maneira. Configure outros valores e faça teste de layout no menu de sua página para usarmos em outras páginas a seguir.
  • Estrutura CSS do mapeamento: 
    <style type="text/css">
	body {width:80%; margin:auto; box-shadow:0px 0px 5px grey;}
	svg {width:100%;}
	rect {width:193px; height:190px; rx:40px; fill:blue; stroke:pink; stroke-width:5; 
	  fill-opacity: 0.1; stroke-opacity: 0.2;}
	rect, text {opacity:0;}
	a:hover > text, a:hover > rect {opacity:1; transition:0.5s;}
	text {font-family:Tahoma; font-weight:bold; fill:rgb(180,250,180); stroke:green; 
	  stroke-width:1; font-size:22px; opacity:0;}
</style>
    Trecho da estrutura HTML do mapeamento: 
    <svg viewBox="0,0, 1287,220">
	<image href="imagens/menu_horizontal1.png" x="0" y="0" height="203px" width="1287px"/>
		<a xlink:href="home.html">
			<text x="8" y="215">HOME</text>
			<rect x="8" y="0"/>
		</a>
		<a xlink:href="dicas.html">	
			<text x="223" y="215">DICAS</text>
			<rect x="223" y="0"/>
		</a>
		<a xlink:href="hospedagem.html">	
			<text x="440" y="215">HOSPEDAGEM</text>
			<rect x="440" y="0"/>
		</a>
</svg>

voltar ao topo

voltar ao topo

📃 Mapeamento com div e texto

Vamos usar a pasta webdesign/mapeamento para este exercício. Crie um arquivo chamado mapeamento-div-info.htm, que usaremos para criar o mapeamento do menu com tags div e informações de texto. Escolha um dos arquivos para fazer o mapeamento: menu verde, menu branco ou encontre outra imagem de um menu completo.

  • Neste exemplo, foi usado o menu branco. Criamos uma div "mãe" class="Map" que contém a imagem <img> e as div dos itens do menu.
  • A div class="items" agrupa cada item do menu. Definimos uma div de item, com o texto <p> e o link <a> para cada parte do menu.
  • Cada item tem uma posição específica no mapeamento. Logo, criamos as classes class="i1", class="i2", ..., class="i6" dos itens do menu.
  • Na programação CSS, definimos os atributos mais gerais, com a classe .Map com imagens de largura 100%, parágrafos sem margens e os itens escondidos, com o atributo visibility:hidden;.
  • Ao ativar os itens com o cursor do mouse sobre cada um deles items div:hover, definimos que os itens serão visíveis, com bordas e opacidade de um fundo sobre cada parte do item, e o texto visível com atributo visibility:visible;
  • A altura da posição do texto foi fixada em 95%, e os itens foram posicionados levando-se em conta que todos têm mesmo tamanho width:calc(100%/6);. Logo, o primeiro item fica em left:0%;, o segundo em left:calc(100%/6); e assim sucessivamente, até left:calc(5*100%/6);
  • Para finalizar, os textos aparecem na posição top:95%;, e devemos deixá-los escondidos com visibility:hidden;. Colocando-se o transition:05s;, ocorre uma suavidade na mudança do estágio invisível para visível.
  • Estrutura HTML do mapeamento: 
    <div class="Map">
	<img src="imagens/menu_horizontal1.png">
	<div class="items">
		<div title="HOME"><a href="home.html" class="i1"></a><p>HOME</p></div>
		<div title="DICAS"><a href="dicas.html" class="i2"></a><p>DICAS</p></div>
		<div title="HOSPEDAGEM"><a href="hospedagem.html" class="i3"></a><p>HOSPEDAGEM</p></div>
		<div title="GALERIA"><a href="galeria.html" class="i4"></a><p>GALERIA</p></div>
		<div title="MAPAS"><a href="mapas.html" class="i5"></a><p>MAPAS</p></div>
		<div title="CONTATO"><a href="contato.html" class="i6"></a><p>CONTATO</p></div>
	</div>
</div>
  • Estrutura CSS do mapeamento: 
    <style type="text/css">
	* {font-family:Calibri; font-size:14pt;}
	.Map {width:100%; position:relative;}
	.Map img {width:100%;}
	p {margin:0; padding:0;}
	.items {width:100%; height:100%; position:absolute; left:0; top:0; visibility:hidden;}

	.items div:hover > p {visibility:visible; transition:0.5s;}
	.items div:hover > a {background:#fff; z-index:2; opacity:0.3; border:1px solid #000; 
	  transition: 0.5s;}
	.Map:hover .items {visibility:visible; transition: 0.5s;}
	.items a {position:absolute; background:#000; z-index:2; opacity:0.05; 
	  border:1px solid transparent; border-radius:10px;}

	.Map a {width:calc(100%/6); height:95%; top:0%;}
	a.i1, a.i1 + p {left:0%;}
	a.i2, a.i2 + p {left:calc(100%/6);}
	a.i3, a.i3 + p {left:calc(2*100%/6);}
	a.i4, a.i4 + p {left:calc(3*100%/6);}
	a.i5, a.i5 + p {left:calc(4*100%/6);}
	a.i6, a.i6 + p {left:calc(5*100%/6);}
	.Map a + p {position:absolute; top:95%; width:30%; font-weight:bold; color:orange; 
	  visibility:hidden; transition:0.5s;}
</style>
📃 Mapeamento lateral com div e texto

Vamos usar a pasta webdesign/mapeamento para este exercício. Crie um arquivo chamado mapeamento-lateral-div-info.htm, que usaremos para criar o mapeamento do menu lateral com tags div e informações de texto. Escolha um dos arquivos para fazer o mapeamento: menu verde, menu branco ou encontre outra imagem de um menu completo.

  • Neste exemplo, foi usado o menu verde. Criamos uma div "mãe" class="Map" que contém a imagem <img> e as div dos itens do menu.
  • A div class="items" agrupa cada item do menu. Definimos uma div de item, com o texto <p> e o link <a> para cada parte do menu.
  • Cada item tem uma posição específica no mapeamento. Logo, criamos as classes class="i1", class="i2", ..., class="i5" dos itens do menu.
  • Na programação CSS, definimos os atributos mais gerais, com a classe .Map com imagens de largura 100%, parágrafos sem margens e os itens escondidos, com o atributo visibility:hidden;.
  • Ao ativar os itens com o cursor do mouse sobre cada um deles items div:hover, definimos que os itens serão visíveis, com bordas e opacidade de um fundo sobre cada parte do item, e o texto visível com atributo visibility:visible;
  • No menu lateral a posição do texto à esquerda foi fixada em 6%, e os itens foram posicionados levando-se em conta que todos têm mesmo tamanho height:calc(80%/5);. O primeiro item fica posicionado em top:0%;, o segundo em top:calc(99%/5); e assim sucessivamente, até left:calc(4*99%/6);. Como existem espaçamentos entre os itens, não usamos 100% nos cálculos.
  • Para finalizar, os textos aparecem na posição left:6%;, e devemos deixá-los escondidos com visibility:hidden;. A posição do primeiro item deste menu fica em top:calc(80%/5);, o segundo em top:calc(180%/5); e assim sucessivamente. Estas medidas seriam relativas a 100% do primeiro item se não existissem espaçamentos entre os itens do menu.
  • Estrutura HTML do mapeamento: 
    <div class="Map">
	<img src="imagens/menu_lateral.png">
	<div class="items">
		<div title="HOME"><a href="home.html" class="i1"></a><p>FACEBOOK</p></div>
		<div title="TWITTER"><a href="dicas.html" class="i2"></a><p>TWITTER</p></div>
		<div title="LINKEDIN"><a href="hospedagem.html" class="i3"></a><p>LINKEDIN</p></div>
		<div title="CONTATO"><a href="galeria.html" class="i4"></a><p>CONTATO</p></div>
		<div title="PEDIDOS"><a href="mapas.html" class="i5"></a><p>PEDIDOS</p></div>
	</div>
</div><
  • Estrutura CSS do mapeamento: 
    <style type="text/css">
	* {font-family:Calibri; font-size:14pt;}
	.Map {width:8%; position:relative;}
	.Map img {width:100%;}
	p {margin:0; padding:0;}
	.items {width:100%; height:100%; position:absolute; left:0; top:0; visibility:hidden;}

	.items div:hover > p {visibility:visible; transition:0.5s;}
	.items div:hover > a {background:#fff; z-index:2; opacity:0.3; border:1px solid #000; 
	  transition:0.5s;}
	.Map:hover .items {visibility:visible; transition: 0.5s;}
	.items a {position:absolute; background:#000; z-index:2; opacity:0.05; 
	  border:1px solid transparent; border-radius:50%;}

	.Map a {width:85%; height:calc(80%/5); left:6%;}
	a.i1 {top:0%;}
	a.i2 {top:calc(99%/5);}
	a.i3 {top:calc(2*99%/5);}
	a.i4 {top:calc(3*99%/5);}
	a.i5 {top:calc(4*99%/5);}

	a.i1 + p {top:calc(80%/5);}
	a.i2 + p {top:calc(180%/5);}
	a.i3 + p {top:calc(280%/5);}
	a.i4 + p {top:calc(380%/5);}
	a.i5 + p {top:calc(480%/5);}
	.Map a + p {position:absolute; left:6%; width:30%; font-weight:bold; color:orange; 
	  visibility:hidden; transition: 0.5s;}
</style>
📃 Detalhes da Atividade

Crie a pasta webdesign/atividade6 com o arquivo index.htm. Nesta atividade, podemos usar as estruturas dos exemplos anteriores para fazer o mapeamento de 3 personagens em uma imagem. Crie a pasta das imagens webdesign/atividade6/imagens.

  • Podemos criar a div "mãe" class="Map" que contém a imagem <img> dos personagens e as div de cada personagem que será mapeado. A div class="items" agrupa as div dos personagens.
  • Usando a programação CSS dos exemplos anteriores, podemos abrir a tag de parágrafo <p> que abriga o nome, uma imagem e uma breve descrição do personagem. A classe desta div será class="i1".
  • Os outros personagens têm a estrutura HTML igual: nome, imagem e descrição.
  • Na programação CSS, definimos os atributos mais gerais, com a classe .Map com imagens de largura 70%, parágrafos sem margens e os itens escondidos, com o atributo visibility:hidden;.
  • Ao ativar os itens com o cursor do mouse sobre cada um deles items div:hover, definimos que os itens serão visíveis, com bordas e opacidade de um fundo sobre cada parte do item, e o texto visível com atributo visibility:visible;
  • Em um editor de imagens, pegue as coordenadas top, left, width e height do mapeamento de cada personagem. Com estas coordenadas, calculamos as posições dos retângulos com as regras de três mostradas, relativas à largura e à altura da imagem de todos os personagens.
  • Neste exemplo, as medidas para o mapeamento do primeiro personagem são: top=104, left=168, width=59, height=82, e as dimensões da imagem dos personagens é width=800 e height=500.
  • Se você quiser deixar o texto alinhado à esquerda, basta usar a mesma medida à esquerda do retângulo left:calc(168*100%/800);. O atributo top do texto é definido pelo atributo top do retângulo (104) somado com a altura do retângulo (82). Logo, o cálculo fica: top:calc((104 + 82)*100%/500);.
  • A posição vertical top pode ser calculada da mesma forma para todos os mapeamentos. Neste exemplo, estamos usando a largura dos textos como 20%. Logo, se você quiser deixar o texto centralizado, basta subtrair a metade da largura (10%) e somar com a metade do tamanho do retângulo (no caso do segundo personagem mede 60) proporcional a 50% do retângulo.
  • Portanto, para ficar centralizado com o retângulo, o texto do segundo personagem usamos left:calc(357*100%/800 - 10% + 60*50%/800);.
  • Como exemplo, se você quiser alinhar o texto à direita, basta subtrair a largura do texto de 20% e somar com o tamanho proporcional da largura do retângulo. Logo, o alinhamento à direita do terceiro personagem fica: left:calc(692*100%/800 - 20% + 80*100%/800);.
  • Para finalizar, os textos aparecem com a largura width:20%;, e devemos deixá-los escondidos com visibility:hidden;.
  • O layout desta Atividade, com os atributos mostrados fica desta forma. Modifique atributos e escolha um dos alinhamentos de texto mostrados para fazer sua atividade.
  • Estrutura CSS da Atividade 6: 
    <style type="text/css">
	* {font-family: Calibri; font-size:18px;}
	.Map {width:70%; position:relative;}
	.Map img {width:100%;}
	p {margin:0;padding:0;}
	.items {width:100%; height:100%; position:absolute; left:0; top:0; visibility:hidden; 
	  text-align:center;}
	.items img {width:80%;}

	.items div:hover > p {visibility:visible; transition:0.5s;}
	.items div:hover > a {background:#fff; z-index:2; opacity:0.3; border:1px solid #000; 
	  transition:0.5s;}
	.Map:hover .items {visibility:visible; transition:0.5s;}
	.items a {position:absolute; background:#000; z-index:2; opacity:0.05; 
	  border:1px solid transparent; border-radius:10px;}

	a.i1 {left:calc(168*100%/800); top:calc(104*100%/500); width:calc(59*100%/800); 
	  height:calc(82*100%/500);}
	a.i2 {left:calc(357*100%/800); top:calc(192*100%/500); width:calc(60*100%/800); 
	  height:calc(84*100%/500);}
	a.i3 {left:calc(692*100%/800); top:calc(222*100%/500); width:calc(80*100%/800); 
	  height:calc(111*100%/500);}

	a.i1 + p {top:calc((104 + 82)*100%/500); left:calc(168*100%/800);}
	a.i2 + p {top:calc((192 + 84)*100%/500); left:calc(357*100%/800 - 10% + 60*50%/800);}
	a.i3 + p {top:calc((222 + 111)*100%/500); left:calc(692*100%/800 - 20% + 80*100%/800);}
	.Map a + p {position:absolute; width:20%; font-weight:bold; color:orange; visibility:hidden;
	  text-shadow:1px 1px 2px black; transition:0.5s; background:rgba(100,120,250,0.3);}
</style>

voltar ao topo

4. CSS e Animações

Material da pág. 28 até a pág. 39

voltar ao topo

voltar ao topo

voltar ao topo

📃 Atividade 7: HTML do menu superior

Crie a pasta webdesign/atividade7 com os arquivos index.htm e estilo.css. Nesta atividade, podemos usar a estrutura que usamos nos exemplos anteriores para fazer o menu. Crie a pasta das imagens webdesign/atividade7/imagens. Vamos criar um site com páginas sobre filmes nesta atividade. Escolha arquivos de imagens sobre seu filme favorito. A logomarca terá efeito de animação com rotação, e deve ser uma imagem de fundo transparente e com formato redondo. Neste link pode pode baixar a imagem da logomarca usada nesta atividade.

  • No cabeçalho da página, colocamos a referência da folha de estilos com a tag <link>. Se salvarmos o arquivo estilo.css na mesma pasta do index.htm, o caminho fica como href="estilo.css".
  • A tag "mãe" do site é a class="boxSite", que contém todas as outras div. A primeira div será chamada de class="barra", que contém a logomarca, o menu e os itens para compartilhar a página.
  • Na div class="logo", podemos colocar uma imagem ou um pictograma.
  • A class="menu" contém uma lista, bem parecida com as que já usamos em outras páginas.
  • Como exemplo, vamos criar um menu chamado "dropdown": é aquele que tem subitens. Basta criar uma lista com tag <ul> logo abaixo do item do menu que tem a sublista. Neste exemplo, criamos a lista <ul class="subitens"> logo abaixo do item href="pagina1.htm". Note que o fechamento deste item é feito depois do fechamento dos subitens.
  • Finalizando a nossa barra de menu, colocamos as imagens de compartilhamento. Os links podem ser colocados como fizemos nas Atividades 4 e 5.
  • Trecho da estrutura HTML da página index.htm da Atividade 7: 
    <div class="boxSite">
	<div class="barra">
		<div class="logo">
			<img src="imagens/icone_filme.png">
		</div>
		<nav class="menu">
			<ul>
				<li><a href="index.htm">Home</a></li>
				<li><a href="pagina1.htm">Página 1</a>
				   <ul class="subitens">
					  <li><a href="#">Sub página 1</a></li>
					  <li><a href="#">Sub página 2</a></li>
					  <li><a href="#">Sub página 3</a></li>
					  <li><a href="#">Sub página 4</a></li>
				   </ul>
				</li>
				<li><a href="pagina2.htm">Página 2</a></li>
				<li><a href="pagina3.htm">Página 3</a></li>
				<li><a href="pagina4.htm">Página 4</a></li>
			</ul>
		</nav>
		<div class="compartilhar">
			<img src="imagens/facebook.png">
			<img src="imagens/whatsapp.png">
			<img src="imagens/twitter.png"> 
		</div>
	</div>
</div>
📃 CSS do menu superior

Agora vamos ver a programação do menu superior em CSS.

  • No arquivo estilo.css, podemos usar o marcador * para definir uma propriedade que vale para todas as tags da página: tipos e tamanhos de fonte, cores e margens. O atributo margin:auto; serve para deixar o conteúdo centralizado nos navegadores.
  • A estrutura CSS do menu é praticamente a mesma que usamos anteriormente. Modifique cores, margens e bordas. Neste exemplo, estamos usando o menu com a borda direita, parecido com aquele que mostramos nas Atividades 4 e 5.
  • Os subitens ficam escondidos opacity:0;, e quando ativados têm a posição absoluta na tela. Colocamos z-index:1; para ter certeza de que aparecerão na frente dos outros elementos da página. O menu dropdown pode ser mostrado em linha ou em coluna. Neste caso, ficará em coluna com o atributo flex-direction:column;.
  • Ao passar o cursor do mouse sobre o item do menu que tem subitem, a opacidade da lista dos subitens tem valor modificado para 1 com o atributo .menu li:hover ul {opacity:1;}. Foram colocadas bordas inferiores para separar os subitens. Teste estas propriedades no layout de sua página.
  • Foram colocados atributos de fundo gradiente e alinhamento centralizado para os itens das classes .barra e .logo. Teste valores para dimensionar a imagem da logomarca em .logo img.
  • Nos links de compartilhamento, usamos atributos parecidos com os que usamos em páginas anteriores. Teste valores para dimensionar as imagens dos ícones de sua página. Em telas menores, a barra terá os itens dispostos em coluna flex-direction:column;
  • Usando os atributos mostrados, o layout da barra de menu fica desta maneira. Configure a sua barra testando as melhores medidas e cores.
  • Estrutura CSS do menu superior da Atividade 7: 
    * {font-family:Calibri; font-size:20px;}
body {width:85%; margin:auto;}

.menu {flex:3;}
.menu ul {margin:0; padding:8px; list-style-type:none; display:flex; justify-content:center; 
  flex-direction:row; flex-wrap:wrap;}
.menu li {padding: 0; border-right: 1px solid rgba(0,0,130,0.3); min-width: 150px; 
  text-align:center;}
.menu li:last-child {border-right:none;}
.menu li a {padding: 5px 15px 5px 15px; color: rgba(0,0,130,0.7); text-decoration:none; 
  font-weight: bold; transition: 0.5s;}
.menu li a:hover {color:rgba(0,0,130,0.5); text-shadow:1px 1px 1px LightSilver; transition:0.5s;}

.subitens {position:absolute; z-index:1; background:rgb(230,230,255); opacity:0; transition:0.3s;}
.menu .subitens {margin-top:10px; flex-direction:column;}
.subitens li {padding:10px; border-bottom:1px solid rgba(0,0,130,0.3); border-right:none;}
.menu li:hover ul {opacity:1;}

.barra {background:rgb(240,240,255); min-height:120px; display:flex; align-items:center;}

.logo {flex:1; display:flex; align-items:center; justify-content:center; }
.logo img {width:20%; min-width:50px;}

.compartilhar {flex:1; display:flex; align-items:center; justify-content:center;}
.compartilhar img {width:10%; margin:15px; min-width:30px;}

@media screen and (max-width:800px) {
	.barra {flex-direction:column; align-items:stretch;}
}

voltar ao topo

voltar ao topo

📃 Atividade 7: backgrounds e animações

Neste ponto, podemos criar animações nos itens que já estão programados. A imagem com um filme está disponível no link: filme; e a imagem de nuvens, mostrada na apostila, está disponível no link: nuvens. Se você quiser encontrar outra imagem para colocar na barra superior da página, lembre-se que deve ser uma imagem bem larga, com altura reduzida.

  • Criando a class="barra2", podemos definir um fundo desta tag. Ela pode ser colocada antes ou depois da class="barra". Dentro da class="logo", podemos inserir uma imagem ou pictograma como logomarca da página.
  • A estrutura do toggle deve ser colocada englobando a tag de menu. O checkbox fica antes da tag <label>, inserindo o toggle junto com o menu nesta tag de rótulo.
  • Na continuação do arquivo CSS, temos os atributos para esconder o checkbox e o toggle do menu. Eles só aparecem em navegadores com largura menor do que 800px. Redimensione o seu navegador para testar estes atributos.
  • Usando os atributos de @media screen com largura menor do que 800px, definimos que a tag .barra será mostrada com itens na vertical, e o toggle ficará visível. Neste caso, podemos atribuir propriedades para os itens visíveis (cor, tamanho, margem,...).
  • Neste ponto está definido o critério para o menu e o toggle aparecerem: #checkbox1:checked, ou seja, quando o visitante clicar no menu. Definimos também qual será a altura máxima do menu: max-height:50vh;, ou seja, metade da altura do navegador.
  • No caso do checkbox não estar ativado, o menu terá a altura máxima como 0. Os itens estão com atributos escondidos hidden, em formato vertical (coluna).
  • A classe .barra2 está com a imagem de fundo definida, com repetição na horizontal repeat-x, com a altura igual à altura da imagem de 90px. A animação de deslocamento do fundo começa na posição 0% 0% e termina em 100% 0%. Modifique os valores, caso necessário, e escolha uma imagem para ficar no fundo desta tag.
  • Com todos os atributos mostrados até agora, o layout com as duas barras superiores fica desta maneira. O fundo da tag do menu foi modificado usando o atributo linear-gradient. Aqui temos um trecho HTML com menu modificado para modo responsivo:
    <input type="checkbox" id="checkbox1">
<label for="checkbox1">
<nav class="menu">
	<ul>
		<li><a href="index.htm">Home</a></li>
		<li><a href="pagina1.htm">Página 1</a>
		   <ul class="subitens">
			  <li><a href="#">Sub página 1</a></li>
			  <li><a href="#">Sub página 2</a></li>
			  <li><a href="#">Sub página 3</a></li>
			  <li><a href="#">Sub página 4</a></li>
		   </ul>
		</li>
		<li><a href="pagina2.htm">Página 2</a></li>
		<li><a href="pagina3.htm">Página 3</a></li>
		<li><a href="pagina4.htm">Página 4</a></li>
	</ul>
</nav>
<span class="toggle">&#9776;</span>
</label>
  • Trecho CSS com menu modificado e animações: 
    @media screen and (max-width:800px) {
	.barra {flex-direction:column; align-items:stretch;}
	.toggle {display:block; width:100%; text-align:center; font-size:30px; cursor:pointer; 
	  color:#595959; background:linear-gradient(white,rgb(240,240,255));}
	#checkbox1:checked + label .menu li {visibility:visible;}
	#checkbox1:checked + label .menu {max-height:50vh; transition: 0.3s; opacity:1;}
	.menu ul {display:flex; flex-direction:column;}
	.menu {width:100%; max-height:0; opacity:0; transition: 0.3s;}
	.menu li {visibility:hidden; border-right:none; padding:10px;}
	.menu li:hover .subitens {position:relative; display:flex;}
}

.barra2 {background:url(imagens/filme.png) repeat-x; height:90px; 
  animation:AnimaBarra 20s linear infinite alternate; opacity:0.4;}

@keyframes AnimaBarra { 
	0% {background-position:0% 0%;}
	100% {background-position:100% 0%;}
}

voltar ao topo

📃 Atividade 7: banner e descrição

Neste ponto, podemos criar o banner e uma logo para ficar flutuando sobre o banner. Escolha uma imagem com boa resolução para ficar no banner, e uma logo do filme.

  • A tag class="banner" pode ser inserida logo após a tag class="barra". Dentro desta tag, criamos a tag filha class="descricao" para criarmos uma logo flutuante sobre o banner.
  • Na continuação do arquivo CSS, temos os atributos da classe .banner, com o background que você escolheu (sem repetição), com as propriedades para cobrir a largura da tag. O alinhamento da tag .descricao ficará à esquerda pois flex-direction:flex-start;. Se você quiser colocá-la centralizada no banner, basta mudar esta propriedade para center ou à direita ficaria flex-end.
  • Quando o visitante passar o cursor do mouse sobre o banner, ele sofre um deslocamento na vertical: vai para a coordenada 0% 48%. Note que colocamos o efeito transition nesta tag e na tag do banner sem hover. Assim, o efeito é suavizado tanto no momento de passar o cursor quanto de retirar o cursor de cima do banner.
  • A tag filha .descricao fica com posição relativa, com fundo com transparência usada na cor RGBA. Defina margem interna para que a imagem não fique "grudada" nos cantos.
  • Para dar um efeito de profundidade, podemos colocar uma sombra na tag mãe das páginas usando o atributo box-shadow.
  • Com os valores dos atributos mostrados até agora, o site fica com este layout. Modifique os valores para a página do seu filme.
  • Trecho HTML da barra banner com a descrição: 
    <div class="banner">
	<div class="descricao">
		<img src="imagens/ico.png">
	</div>
</div>
    Trecho CSS da barra banner com a descrição: 
    .banner {display:flex; min-height:500px; background:url(imagens/banner.jpg) no-repeat; 
  background-size:100%; background-position: 0% 40%; align-items:center; transition:0.5s;
  justify-content:flex-start;}

.banner:hover {opacity:0.7; background-position: 0% 48%; transition:0.5s;}

.descricao {padding:10px; position:relative; background:rgba(0,0,0,0.3); transition:0.5s;}

.boxSite {box-shadow:0 0 8px black;}

voltar ao topo

📃 Atividade 7: conteúdos, fontes e rodapé

Neste ponto, podemos criar conteúdos em duas barras: uma principal e outra lateral. Escolha imagens do filme para ficarem como uma espécie de galeria. Outras imagens podem ser colocadas na barra lateral, com alguns personagens formando outra galeria.

  • A tag class="barra3" pode ser inserida logo após a tag class="banner". Dentro desta tag, criamos as tags filhas class="conteudo" e class="box" que contém as imagens do filme. Colocamos também uma tag class="titulo" para usar nesta barra.
  • Escolha pelo menos 5 imagens para colocar nas tags class="box" dentro da tag de class="conteudo".
  • A tag class="lateral" tem mesma estrutura da tag class="conteudo": título e as tags class="box" com as imagens. Escolha pelo menos 5 personagens para colocar nesta barra lateral.
  • Podemos colocar as fontes online em nossas páginas. Acesse o site fonts.google.com/, escolha uma fonte e clique em Select this style. Você pode escolher mais de uma fonte. Note que as fontes escolhidas aparecem ao lado, com os links prontos para colocarmos no HTML e no CSS.
  • No cabeçalho da página em HTML colocamos o link das fontes escolhidas. Neste caso, eu escolhi a fonte Kufam, que será colocada naquela tag principal do CSS, que usamos com * no começo da Atividade 7.
  • Na continuação do nosso arquivo CSS, colocamos os atributos da classe .barra3 com display flexbox e fundo com gradiente. Para alinhar os conteúdos na vertical, usamos o atributo align-content:flex-start, que tem a mesma função do vertical-align das tabelas.
  • As caixas com conteúdos .box tem os atributos: bordas arredondadas, margens, fundo gradiente, alinhamento de texto e tamanhos iguais de no mínimo 150px flex:1 150px. As imagens destas caixas têm larguras e alturas ajustadas de acordo com as dimensões do navegador. Ajuste os valores para as imagens de sua página.
  • Nesta página, ao invés de usar a tabela "zebrada", podemos usar os box com este atributo. Os pares (even) ficam com um tipo de fundo gradiente, e os ímpares (odd) ficam com outro tipo.
  • Os ajustes da tag .lateral são similares às caixas, com alinhamentos horizontais centralizados e verticais no topo (flex-start). Ajuste os valores das dimensões das imagens de sua página. No caso desta página, as imagens tem largura bem menor do que a altura, pois mostram apenas 1 personagem cada.
  • Os atributos dos títulos usam margens, cores e uma sombra de texto. O rodapé está com conteúdo centralizado, margem interna e fundo com gradiente.
  • O layout da página fica com esta visualização usando os atributos definidos até o momento. Configure a sua página com as novas tags de imagens nas galerias criadas.
  • Trecho HTML do conteúdo e da barra lateral: 
    <div class="barra3">
	<div class="conteudo">
		<div class="titulo">Galeria</div>
		<div class="box">
			<img src="imagens/img1.jpg">
		</div>
		<div class="box">
			<img src="imagens/img2.png">
		</div>
	</div>
	<div class="lateral">
		<div class="titulo">Personagens</div>
		<div class="box">
			<div class="titulo">Miguel Rivera</div>
			<img src="imagens/miguel.png">
		</div>
		<div class="box">
			<div class="titulo">Ernesto de la Cruz</div>
			<img src="imagens/ernesto.png">
		</div>
		<div class="box">
			<div class="titulo">Mamá Imelda Rivera</div>
			<img src="imagens/imelda.png">
		</div>
	</div>
</div>
  • Trecho CSS do conteúdo e da barra lateral: 
    .barra3 {display:flex; background:linear-gradient(rgba(0,0,180,0.1), white);}

.conteudo {display:flex; width:60%; flex-wrap:wrap; justify-content:center; 
  align-content:flex-start;}

.box {border-radius:10px; color:#171e42; padding:10px; margin:10px; text-align:center;
  background:linear-gradient(white, rgba(0,0,180,0.1)); flex:1 150px;}
.box img {width:16vw; height:15vh; transition:transform 0.5s linear; }

.box:nth-child(even) {background:linear-gradient(0deg, rgba(0,0,150,0.1),white);}
.box:nth-child(odd) {background:linear-gradient(180deg, rgba(0,0,150,0.1),white);}

.lateral {display:flex; width:40%; flex-wrap:wrap; border-left:1px solid grey; 
  justify-content:center; align-content:flex-start;}
.lateral img {width:5vw; height:15vh;}

.titulo {width:100%; color:blue; padding:5px; text-shadow: 1px 1px 2px grey;}

.rodape {background: linear-gradient(white, rgb(240,240,255)); display:flex; 
  justify-content:center; padding:20px; color:black;}

voltar ao topo

voltar ao topo

voltar ao topo

📃 Detalhes finais e animações

Vamos criar efeitos de galeria na nossa página de filmes. Coloque os nomes dos filmes nos itens do menu.

  • A estrutura final do HTML, com itens anteriores recolhidos, fica desta maneira: dentro de boxSite temos barra2, barra, banner, barra3 e rodape.
  • No CSS, podemos criar efeitos com transformações de escala, cisalhamento, rotação ou translação. Neste exemplo usamos uma escala com sombra nas imagens das tags .box quando passamos o cursor do mouse sobre as respectivas imagens.
  • Uma animação na logomarca de descrição do site que usa rotação e escalas está atribuída com nome @keyframes AnimaDescr. Dentro da tag .descricao img colocamos a duração de 7 segundos com alternância e duração constante.
  • A logomarca de filme, com formato redondo é ótima para usarmos a rotação de 0 a 360°. Na tag .logo img colocamos o nome desta animação AnimaLogo com 7 segundos também. Ajuste valores e efeitos nas imagens de sua página.
  • Em telas de larguras menores do que 800px, ajustamos as barras flexbox com visualização em coluna, larguras de 100% e alinhamentos centralizados. As imagens das barras de conteúdo e lateral também podem ser redimensionadas para telas menores. Faça testes ajustanto a tela do seu navegador para escolher os melhores valores para as imagens de sua página.
  • Os efeitos de transformação, bordas laterais e a imagem da descrição do site também podem ficar com valores ajustados para telas menores. O tamanho do banner pode ser reduzido, assim como a largura da imagem de descrição da página.
  • Ao passar o cursor do mouse por cima de cada imagem das tags .box, o efeito do layout fica desta maneira.
  • Com os valores e atributos mostrados, a página da Atividade 7 fica com este layout. Ajuste os valores, cores e margens para sua página. Coloque os nomes de outros 4 filmes nos itens do menu do site.
  • Trecho CSS com atributos de animações: 
    .box img:hover {transform:scale(3.5); background:rgba(255,255,255,0.45); box-shadow:0 0 15px white;}

.descricao img {animation:AnimaDescr 7s linear infinite alternate;}

@keyframes AnimaDescr { 
   0% {opacity:0.25; transform:rotate(-30deg);}
   25% {opacity:0.5; transform:scale(0.92);}
   50% {opacity:0.7; transform:scale(0.95);}
   75% {opacity:0.9; transform:scale(1.1);}
   100% {opacity:1; transform:scale(-1,1);}
}

@keyframes AnimaLogo { 
   0% {transform:rotate(0deg);}
   100% {transform:rotate(360deg);}
}

@media screen and (max-width:800px) {
	.barra, .barra3 {flex-direction:column; align-items:stretch; text-align:center;}
	.lateral {flex-direction:row; width:100%;}
	.conteudo {flex-direction:row; width:100%;}
	.lateral img {width:15vw; height:30vh;}
	.conteudo img {width:40vw; height:25vh;}
	.box img:hover {transform:scale(1.2);}
	.lateral {border-left: none;}
	.descricao img {width:50%;}
	.banner {min-height:300px;}
	body {width:95%;}
}
  • Podemos modificar o efeito ao passar o cursor do mouse sobre cada imagem da galeria. Um efeito interessante é o que muda de imagem ao passar o cursor sobre a foto.
  • Para isso acontecer, no HTML você modifica cada tag class="box" inserindo 2 imagens: a primeira aparece automaticamente, e a segunda apenas quando o visitante passar o cursor do mouse sobre a class="box".
  • No arquivo CSS, você precisa substituir os atributos de .box img:hover pelas regras: .box img:nth-child(1) que mostra a primeira imagem da tag class="box", e .box img:nth-child(2) que esconde a segunda imagem da tag class="box".
  • Outras regras que criamos são as seguintes: .box:hover img:nth-child(1) que esconde a primeira imagem da tag class="box" quando passamos o cursor do mouse sobre a imagem, e .box:hover img:nth-child(2) que mostra a segunda imagem da class="box" quando passamos o cursor do mouse sobre a imagem da class="box".

voltar ao topo

📃 Página com vídeo no fundo

Crie uma pasta chamada webdesign/paginaVideo e escolha um vídeo com curta duração em formato mp4 para colocarmos no background.

  • Insira a tag de vídeo com id #VideoFundo com as opções loop, autoplay e muted.
  • O botão de interação deve ter a ligação com a função javascript com nome minhaFuncao() e com id #botao.
  • Insira uma tag de conteúdo para aparecer sobre o vídeo.
  • A função javascript deve ficar dentro da tag body, pausando o vídeo quando o vídeo estiver sendo tocado (play) e tocando o vídeo (play) quando o vídeo estiver pausado.
  • No arquivo css, inserimos o vídeo de fundo fixo, ocupando toda a tela do navegador, com z-index negativo: assim, o resto do conteúdo ficará visível sobre o vídeo.
  • Escolha uma posição e as configurações do botão de interação.
  • O conteúdo pode ficar em uma posição fixa, sobre o vídeo da página.
  • Trecho da estrutura HTML: 
    <body>
  <video autoplay muted loop id="VideoFundo" src="videos/marine.mp4"></video>
  <button id="botao" onclick="minhaFuncao()">Pause</button>
  <div class="conteudo">
	<h2>Minha página com vídeo no fundo</h2>
	<p>Podemos clicar no botão para pausar o vídeo!</p>
  </div>
  <script>
	var video = document.getElementById("VideoFundo");
	var btn = document.getElementById("botao");
	function minhaFuncao() {
	  if (video.paused) {
		video.play();
		btn.innerHTML = "Pause";
	  } else {
		video.pause();
		btn.innerHTML = "Play";
	  }
	}
  </script> 
</body>
  • Trecho da estrutura CSS: 
    #VideoFundo {position:fixed; top:0; left:0; min-width:100%; min-height:100%; z-index:-1;}

#botao {position:fixed; right:0; bottom:0; width:200px; font-size:18px; padding:10px; border:none; 
  background:red; color:#fff; cursor:pointer;}

#botao:hover {background:cyan; color:black;} 

body {width:100%; margin:auto;}

.conteudo {position:fixed; top:50vh; background:rgba(200,200,200,0.5); text-align:center; width:90%}
📃 Detalhes da estrutura em HTML

Esta página tem estrutura HTML parecida com a que montamos na página da Atividade 7. Crie uma pasta chamada webdesign/atividade8 com a página inicial index.htm. Vamos precisar também das pastaswebdesign/atividade8/imagens e webdesign/atividade8/videos.

  • A tag "mãe" do site será class="boxSite", com a barra de menu class="barra", onde colocaremos uma logo. Vamos fazer uma página de algum lugar com belas paisagens. Escolha um vídeo para inserir no fundo da página na pasta videos/".
  • Escolha um pictograma ou coloque uma imagem na tag class="logo".
  • A estrutura de menu será a mesma que usamos na atividade anterior. Alguns atributos CSS ficarão diferentes, pois a tag <label> está englobando os itens do menu.
  • Depois da tag class="barra", podemos inserir a class="banner", que contém a class="descricao". Neste caso, coloque um texto ou uma imagem para ser o título da página.
  • A barra class="compartilhar" pode ser inserida na tag class="barra2", junto com a galeria de imagens. Insira links para os itens desta barra de compartilhamento.
  • Depois da barra class="compartilhar", podemos criar a galeria de imagens das paisagens que vamos inserir. Insira o texto sobre o local escolhido em uma <div>, pois vamos distribuir os conteúdos usando display:flex; no CSS.
  • Crie títulos para cada imagem colocada em tag class="box". Este título pode ficar antes ou depois da imagem.
  • Finalizamos o layout da página com a tag mais simples de nossas páginas: o rodapé. Logo após a tag class=boxSite podemos inserir a função javascript do botão de interação do vídeo de fundo.
  • Trecho da estrutura HTML da Atividade 8: 
    <body>
	<div class="boxSite">
		<video autoplay muted loop id="VideoFundo" src="videos/mountain.mp4"></video>
		<button id="botao" onclick="minhaFuncao()">Pause</button>
		<div class="barra">
			<div class="logo">
				&#x1f304;
			</div>
			<input type="checkbox" id="checkbox1">
			<label for="checkbox1">
				<nav class="menu">
					<ul>
						<li><a href="index.htm">Página 1</a></li>
						<li><a href="pagina1.htm">Página 2</a></li>
						<li><a href="pagina2.htm">Página 3</a></li>
					</ul>
				</nav>
				<span class="toggle">☰</span>
			</label>	
		</div>
		<div class="banner">
			<div class="descricao">
				Paisagens do Canadá
			</div>
		</div>
		<div class="barra2">
			<div class="compartilhar">
				<a href="#"><img src="imagens/facebook.png"></a>
				<a href="#"><img src="imagens/whatsapp.png"></a>
				<a href="#"><img src="imagens/twitter.png"></a> 
			</div>
			<div class="titulo">Galeria</div>
			<div>O site da CNN divulgou uma lista com os 20 lugares mais ...</div>
			<div class="box">
				<div class="titulo">Lake Louise</div>
				<img src="imagens/foto1.jpg">
			</div>
			<div class="box">
				<div class="titulo">Whistler</div>
				<img src="imagens/foto6.jpg">
			</div>
		</div>
		<div class="rodape">
			Copyright © 2022
		</div>
	</div>
	<script>
		var video = document.getElementById("VideoFundo");
		var btn = document.getElementById("botao");
			function minhaFuncao() {
			if (video.paused) {
				video.play();
				btn.innerHTML = "Pause";
			} else {
				video.pause();
				btn.innerHTML = "Play";
			}
		}
	</script> 
</body>
📃 Detalhes da estrutura em CSS

A estrutura CSS desta página fica um pouco mais simplificada em relação à Atividade 7. Crie o arquivo de folha de estilos na pasta webdesign/atividade8 com nome estilo.css.

  • Podemos usar os mesmos atritutos usados da página com fundo de vídeo para os elementos inseridos no HTML: #VideoFundo e #botao.
  • Escolha a fonte do site google fonts e defina os elementos genéricos da página com o indicar *.
  • Defina altura mínima do banner, posição, alinhamentos e efeitos com hover. Nesta página, vamos usar o atributo overflow:auto; que permite sobreposições de elementos. Defina um valor grande para o z-index para deixar a barra de menu sobre o banner. Para deixá-la alinhada na vertical, usamos align-items:flex-start;.
  • A tag label é "mãe" do menu: logo, definimos margem e tamanho flex:3; nesta tag. Para deixar o menu alinhado à direita, basta usar justify-content:flex-end;. Os itens do menu têm estrutura de programação CSS parecida com a que usamos na atividade 7. Escolha cores adequadas para ter um contraste com a imagem de fundo do banner. Neste caso, foi escolhida a cor branca com sombra de texto text-shadow.
  • Para alinhar a .logo à esquerda usamos justify-content:flex-start;. Neste exemplo vamos utilizar um pictograma: logo, definimos font-size com tamanho maior do que o usual. A animação será a mesma da página da atividade anterior. Vamos usar a largura da barra2 com 85%.
  • A barra de compartilhamento pode ter os valores ajustados de acordo com as dimensões das imagens.
  • Os atributos da .barra2 e dos .box são similares aos que usamos na atividade anterior. O efeito de transformação de imagens que usamos na atividade anterior pode ser usado nos .box. Assim, as imagens são ampliadas com os títulos, como se fossem legendas.
  • Ajuste os valores de todos os elementos programados para visualizar tanto em um navegador com mais e com menos de 800px de largura. A tag .barra tem o atributo flex-direction:column; em navegadores com larguras reduzidas.
  • Tanto o toggle quando o checkbox ficam invisíveis em telas maiores. Note que nas configurações de telas menores, não temos os subitens. Nesta página o menu é simplificado, com apenas itens principais. .
  • Atribua as propriedades para visualização dos títulos e do rodapé da página. Defina as propriedades de animação da tag .logo.
  • O layout da página fica desta maneira. Ajuste os valores e atributos para a finalização desta atividade. Coloque nomes nos títulos das 3 páginas para que apareçam no menu.
  • Trecho da estrutura CSS da Atividade 8: 
    #VideoFundo {position:fixed; top:0; left:0; min-width:100%; min-height:100%; z-index:-1;}
#botao {position:fixed; right:0; bottom:0; width:200px; font-size:18px; padding:10px; border:none; 
  background:red; color:#fff; cursor:pointer;}
#botao:hover {background:cyan; color:black;} 

body {width:100%; margin:auto;}
* {font-family:'Kufam', cursive; font-size:18px;}

.boxSite {box-shadow:0 0 8px black;}
.banner {display:flex; min-height:300px; align-items:center; transition:0.5s; top:0; left:0;
  justify-content:center; overflow:auto;}
.banner:hover {opacity:0.7; transition:0.5s;}
.descricao {font-size:60px; color:white; text-shadow:1px 1px 3px black;}
.barra {display:flex; align-items:flex-start; position:absolute; top:0; width:100%; z-index:10;}

label {padding:15px; flex:3; }
.menu ul {margin:0; padding:8px; list-style-type:none; display:flex; flex-direction:row; 
  flex-wrap:wrap; justify-content:flex-end;}
.menu li {padding: 0; min-width: 100px; text-align:center;}
.menu li:last-child {border-right:none;}
.menu li a {padding: 5px 15px 5px 15px; margin-left:5px; color: white;text-decoration:none; 
  font-weight:bold; background:linear-gradient(-40deg, rgba(0,0,130,0.15), rgba(0,0,130,0.1)); 
  transition:0.5s; border-radius:7px; text-shadow:1px 1px 2px black;}
.menu li a:hover {background:linear-gradient(-40deg, rgba(0,0,130,0.2), rgba(0,0,130,0.25));
  transition:0.5s;}

.logo {display:flex; justify-content:flex-start; font-size:120px; 
  animation: AnimaLogo 7s linear infinite alternate;}
.barra2 {background-color:rgba(210,210,210,0.5); display:flex; width:85%; justify-content:center; 
  margin:auto; flex-wrap:wrap; text-align:center;}

.compartilhar {display:flex;}
.compartilhar img {width:30%; margin:15px; min-width: 70px; max-width:100px;}
#checkbox1, .toggle {display:none;}

.box {padding:5px; margin:10px; text-align:center; 
  background:linear-gradient(white, rgba(220,220,255,0.2));}
.box img {width:20vw; height:20vh; transition:transform 0.5s linear;}
.box:hover {transform:scale(1.5); box-shadow: 0 0 15px white;transition: 0.5s;}
hr {width:40%; margin: 30px auto; color:rgba(0,0,140,0.3);}

@media screen and (max-width:800px) {
	.box img {width:50vw;}
	.box:hover {transform:scale(1.1);}
	.toggle {display:block; width:95%; text-align:right; font-size:35px; 
	  cursor:pointer; color:yellow;}
	#checkbox1:checked + label .menu li {visibility:visible;}
	#checkbox1:checked + label .menu {max-height:50vh; transition: 0.3s; opacity:1;}
	.menu ul{display:flex; flex-direction:column; align-content:flex-end;}
	.menu {width:100%; max-height:0; opacity:0; transition: 0.3s;}
	.menu li {visibility:hidden; border-right:none; padding:10px;}
	.barra, .barra2 {flex-direction:column; align-items:stretch; text-align:center; width:100%;}
	.banner {min-height:300px;}
	body {width:95%;}
	.logo {font-size:60px; max-width:60px; justify-content:center;}
	.descricao {font-size:40px;}
}

.titulo {width:100%; color:blue; padding:5px; text-shadow: 1px 1px 2px grey;}
.rodape {background:linear-gradient(white, rgb(180,180,195)); display:flex; justify-content:center; 
  padding:20px; color:black;}

@keyframes AnimaLogo { 
   0% {opacity:0.25; transform:rotate(-30deg);}
   25% {opacity:0.5; transform:scale(0.92);}
   50% {opacity:0.7; transform:scale(0.95);}
   75% {opacity:0.9; transform:scale(1.1);}
   100% {opacity:1; transform:scale(-1,1);}
}

voltar ao topo

5. Imagens Vetoriais

Material da pág. 40 até a pág. 55

📃 Estrutura em HTML e CSS

Vamos criar uma pasta chamada webdesign/atividade9. Nesta pasta, crie os arquivos com nomes index.htm e estilo.css. Além disso, vamos criar uma pasta para inserir as imagens dos banners que criaremos na Atividade 9, com o caminho webdesign/atividade9/imagens.

  • No cabeçalho da página, insira as referências de fonte externa e do arquivo estilo.css.
  • A tag mãe do site será class="boxSite", com as tags que formam um banner dentro da tag class="barra". Primeiro definimos a class="logo", onde vamos desenhar algumas logomarcas com SVG.
  • Na tag class="logo", criamos a janela de visualização de desenhos SVG. Vamos criar vários banners, então cada svg ficará em um elemento class="boxSite" diferente. Cada janela de tag <svg> será dimensionada de acordo com o tamanho do desenho que criaremos.
  • Logo após a div de logomarca, criamos a class="banner", que pode ficar apenas com um título que será formatado no arquivo CSS.
  • Depois do banner, inserimos a estrutura básica de menu que já usamos nas duas últimas atividades. Este menu será usado apenas para visualizarmos os layouts com os desenhos SVG com uma estrutura de menu.
  • No arquivo estilo.css, definimos as tags principais, com fonte e margem automática.
  • Podemos colocar uma sombra na tag principal da página .boxSite. A tag .barra terá display flex, onde definimos o alinhamento, largura e a posição do background.
  • Como vamos criar várias estruturas class="barra" no arquivo HTML, podemos criar um background para cada "filha", usando o atributo nth-child(). O banner da primeira barra é o arquivo que está na pasta imagens/banner.jpg. Escolha uma imagem de paisagem para este primeiro banner.
  • Na tag .logo, podemos definir uma largura padrão usando o atributo flex:1 e alinhamento à esquerda com flex-start. As tags svg podem ter largura de 100% e altura máxima definida, que será igual à altura máxima da tag .banner. Assim, o layout não terá uma logomarca com tamanho muito diferente do banner. Defina também a fonte dos textos svg.
  • Na tag .banner, podemos definir a altura máxima (igual aos desenhos svg), tamanho flex:1 e outros atributos de cor de fonte, alinhamento e overflow:auto, que permite a visualização de itens que ultrapassem as medidas do banner.
  • A estrutura do menu é a mesma que usamos nas atividades anteriores. Neste caso, o menu terá tamanho flex:1 definido na tag <label> e alinhamento à direita. Configure medidas e cores para sua página de Atividade.
  • Estrutura HTML da Atividade 9: 
    <!DOCTYPE html>
<html>
<head>
<title>Atividade 9</title>
<meta name="author" content="Paulo Henrique">
<meta charset="UTF-8">
<link href="estilo.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Kufam&display=swap" rel="stylesheet"> 
</head>
<body>
  <div class="boxSite">
	<div class="barra">
		<div class="logo">
			<svg viewBox="0 0 200 200">
				DESENHOS SVG
			</svg>
		</div>
		<div class="banner">
			Vip Turismo
		</div>
		<input type="checkbox" id="checkbox1">
		<label for="checkbox1">
			<nav class="menu">
				<ul>
					<li><a href="index.htm">Página 1</a></li>
					<li><a href="pagina1.htm">Página 2</a></li>
					<li><a href="pagina2.htm">Página 3</a></li>
				</ul>
			</nav>
			<span class="toggle">&#9776;</span>
		</label>	
	</div>
  </div>
</body>
</html>
  • Estrutura CSS da Atividade 9: 
    * {font-family: 'Kufam', cursive; font-size:18px;}
body {width:95%; margin:auto;}

.boxSite {box-shadow:0 0 8px black;}

.barra {display:flex; align-items:flex-start; width:100%; z-index:10; background-position: 0% 80%;}
.barra:nth-child(1){background:url(imagens/banner.jpg);background-size:cover;}
.barra:nth-child(2){background:url(imagens/banner2.jpg);background-size:cover;}
.barra:nth-child(3){background:url(imagens/banner3.jpg);background-size:cover;}

.logo {display:flex; flex:1; justify-content:flex-start;}

.banner {display:flex; flex:2; min-height:250px; align-items:center; overflow:auto; 
justify-content:center; width:100%; font-size:3em; 
text-shadow:1px 1px 2px white; color:rgb(40,40,40);}

label {padding:15px; flex:1.5; width:100%;}
.menu ul {margin:0; padding:8px; list-style-type:none; display:flex; flex-direction:row; 
flex-wrap:wrap; justify-content:flex-end;}
.menu li {padding: 0; min-width: 100px; text-align:center;}
.menu li:last-child {border-right:none;}
.menu li a {padding: 5px 15px 5px 15px; margin-left:5px; color: white;text-decoration:none; 
font-weight: bold; transition: 0.5s; border-radius:7px; text-shadow:1px 1px 2px black; 
background:linear-gradient(-40deg, rgba(0,0,130,0.15), rgba(0,0,130,0.1));}
.menu li a:hover {transition:0.5s; background:linear-gradient(-40deg, rgba(0,0,130,0.2), rgba(0,0,130,0.25));}

#checkbox1, .toggle {display:none;}

@media screen and (max-width:800px) {
    .barra {flex-direction:column; align-items:stretch;  text-align:center;}
    .banner {flex:1;}
    .logo {flex:1;}
    svg {max-height:20vh;}
    .toggle {display:block; width:95%; text-align:right; font-size:35px; cursor:pointer; color:grey;}
    #checkbox1:checked + label .menu li {visibility:visible;}
    #checkbox1:checked + label .menu {max-height:50vh; transition: 0.3s; opacity:1;}
    .menu ul{display:flex; flex-direction:column; align-content:flex-end;}
    .menu {width:100%; max-height:0; opacity:0; transition: 0.3s;}
    .menu li {visibility:hidden; border-right:none; padding:10px;}
}

voltar ao topo

voltar ao topo

📃 Primeiro banner

Vamos criar nosso primeiro desenho SVG dentro da classe class="logo". Este desenho usará apenas as tags circle e line.

  • Podemos definir a janela de visualização viewBox com tamanho de 200 x 200 pixels. Além disso, vamos usar uma tag de grupo <g> com os atributos comuns definidos nesta tag: cor da linha, espessura da linha e um nome para o grupo: name="sol".
  • O círculo tem centro no ponto de coordenadas (100,100) e raio 50. Defina também a cor do preenchimento com o atributo fill que pode ser informado com padrão RGB, Hexadecimal ou HTML. A primeira linha construída do raio do sol foi na parte superior do desenho, que começa no ponto (100,10) e termina em (100,40).
  • Nosso desenho fica desta forma. Agora vamos usar rotações de 30° da primeira linha do raio de sol para desenhar os outros raios.
  • Note que usamos exatamente a mesma tag do primeiro raio, adicionando a rotação de 30° em torno do centro (100,100). O comando fica transform="rotate(30,100,100)".
  • Ótimo! Nosso segundo raio foi desenhado. Já coloquei a imagem de uma paisagem na pasta das imagens com o nome banner.jpg.
  • Agora copiamos e colamos a tag da primeira rotação, substituindo apenas o valor do ângulo: 60, 90, 120,... até o ângulo de 330. Salve e visualize o banner. Coloque um título no HTML dentro da tag class="banner"
  • Nosso primeiro banner fica desta forma. Modifique cores e atributos do layout no CSS para testar se está ficando bom. As próximas barras serão inseridas abaixo desta que acabamos de construir.
  • Estrutura HTML do primeiro desenho de banner da Atividade 9: 
    <div class="logo">
	<svg viewBox="0 0 200 200">
		<g stroke="orange" stroke-width="1" name="sol">
			<circle r="50" cx="100" cy="100" fill="rgb(100%, 90%, 0%)" />
			<line x1="100" y1="10" x2="100" y2="40"/>
			<line x1="100" y1="10" x2="100" y2="40" transform="rotate(30,100,100)"/>
			<line x1="100" y1="10" x2="100" y2="40" transform="rotate(60,100,100)"/>
			<line x1="100" y1="10" x2="100" y2="40" transform="rotate(90,100,100)"/>
			<line x1="100" y1="10" x2="100" y2="40" transform="rotate(120,100,100)"/>
			<line x1="100" y1="10" x2="100" y2="40" transform="rotate(150,100,100)"/>
			<line x1="100" y1="10" x2="100" y2="40" transform="rotate(180,100,100)"/>
			<line x1="100" y1="10" x2="100" y2="40" transform="rotate(210,100,100)"/>
			<line x1="100" y1="10" x2="100" y2="40" transform="rotate(240,100,100)"/>
			<line x1="100" y1="10" x2="100" y2="40" transform="rotate(270,100,100)"/>
			<line x1="100" y1="10" x2="100" y2="40" transform="rotate(300,100,100)"/>
			<line x1="100" y1="10" x2="100" y2="40" transform="rotate(330,100,100)"/>
		</g>
	</svg>
</div>
<div class="banner">
	Vip Turismo
</div>
📃 2° e 3° banners

Vamos criar os outros 2 desenhos SVG dentro de classes class="logo" em novas classes class="barra", colocadas logo após o fechamento da primeira tag que fizemos de barra.

  • Podemos definir a janela de visualização viewBox com tamanho de 100 x 100 pixels para o desenho da roda dentada. Coloque um título de Mecânica na tag class="banner" e escolha uma imagem desta área para inserir como imagens/banner2.jpg.
  • A parte interior do desenho será um círculo com espessura de linha de 5px. Desta forma, ele esconderá os encaixes dos trapézios que vamos desenhar usando o atributo polygon. Podemos digitar a sequência dos vértices adjacentes para o desenho do trapézio: (40,20); (60,20); (55,10) e (45,10).
  • Neste ponto, o desenho fica desta forma. Note que o círculo cobre o trapézio e podemos continuar para desenhar os outros dentes da roda.
  • Da mesma maneira que fizemos com os raios do sol, usamos a mesma tag do primeiro dente e rotacionamos este desenho com ângulo de 30° com centro de rotação no ponto (50,50): transform="rotate(30,50,50)".
  • O segundo dente da roda está desenhado. Agora podemos copiar e colar a tag de rotação para finalizar este desenho.
  • Lembre-se de modificar apenas o ângulo de rotação: de 30° em 30°.
  • Ótimo, o nosso banner fica com este layout. Veja a estrutura SVG deste banner: 
    <svg viewBox="0 0 100 100">
	<circle r="30" cx="50" cy="50" stroke="red" stroke-width="5" fill="none" />
	<g stroke-width="0" fill="red" name="roda">
		<polygon points="40,20 60,20 55,10 45,10"/>
		<polygon points="40,20 60,20 55,10 45,10" transform="rotate(30,50,50)"/>
		<polygon points="40,20 60,20 55,10 45,10" transform="rotate(60,50,50)"/>
		<polygon points="40,20 60,20 55,10 45,10" transform="rotate(90,50,50)"/>
		<polygon points="40,20 60,20 55,10 45,10" transform="rotate(120,50,50)"/>
		<polygon points="40,20 60,20 55,10 45,10" transform="rotate(150,50,50)"/>
		<polygon points="40,20 60,20 55,10 45,10" transform="rotate(180,50,50)"/>
		<polygon points="40,20 60,20 55,10 45,10" transform="rotate(210,50,50)"/>
		<polygon points="40,20 60,20 55,10 45,10" transform="rotate(240,50,50)"/>
		<polygon points="40,20 60,20 55,10 45,10" transform="rotate(270,50,50)"/>
		<polygon points="40,20 60,20 55,10 45,10" transform="rotate(300,50,50)"/>
		<polygon points="40,20 60,20 55,10 45,10" transform="rotate(330,50,50)"/>
	</g>
</svg>
  • Logo após o fechamento da tag de barra da roda dentada, crie a nova tag class="barra" para desenharmos a estrela. Escolha uma imagem para ser o background desta barra em imagens/banner3.jpg.
  • Podemos definir a janela de visualização viewBox com tamanho de 100 x 100 pixels para o desenho da estrela. O tom de azul skyblue foi definido como preenchimento. Usando mesmo raciocínio da roda dentada, desenhamos um círculo de raio 15 para a parte interior da estrela, e uma das pontas é o triângulo com as coordenadas desenhadas com a ferramenta polygon: (40,40); (50,10); (60,40).
  • O desenho fica com o círculo e o triângulo encoberto na base. Podemos continuar para desenhar as outras pontas da estrela.
  • A segunda ponta será construída usando-se a rotação de 72° em torno do centro (50,50).
  • Agora basta rotacionar os outros triângulos de 72 em 72 graus.
  • E assim fica o desenho do nosso banner. Se necessário, mude configurações CSS e os arquivos dos backgrounds. A estrutura SVG deste banner fica assim: 
    <svg viewBox="0 0 100 100">
	<g stroke-width="0" fill="skyblue" name="estrela">
		<circle r="15" cx="50" cy="50"/>
		<polygon points="40,40 50,10 60,40"/>
		<polygon points="40,40 50,10 60,40" transform="rotate(72,50,50)"/>
		<polygon points="40,40 50,10 60,40" transform="rotate(144,50,50)"/>
		<polygon points="40,40 50,10 60,40" transform="rotate(216,50,50)"/>
		<polygon points="40,40 50,10 60,40" transform="rotate(288,50,50)"/>
	</g>
</svg>
📃 4° e 5° banners

Vamos criar os outros 2 desenhos SVG dentro de classes class="logo" em novas classes class="barra", colocadas logo após o fechamento da tag da terceira barra que desenhamos com a estrela.

  • Podemos definir a janela de visualização viewBox com tamanho de 100 x 100 pixels para o desenho do símbolo de um átomo. Coloque um título na tag class="banner" e escolha uma imagem desta área para inserir como imagens/banner4.jpg. Lembre-se de arrumar o arquivo css com o atributo .barra:nth-child(4) {background: url(imagens/banner4.jpg);}
  • Como vamos colocar um texto logo abaixo do desenho, fazemos uma translação de 8px para cima. O círculo terá raio 8px, com centro no meio da janela svg, ou seja, no ponto de coordenadas (50,50). Defina a espessura da linha e a cor, sem usar preenchimento. A primeira elipse pode ser desenhada com raios rx="15" e ry="35". Experimente valores diferentes para seu desenho.
  • As outras elipses podem ser desenhadas com duas rotações: de 60° e de 120° em torno do centro (50,50). O outro átomo pode ser feito com rotações de 45°, 90° e 135°. Escolha um dos átomos para o seu banner.
  • Defina os atributos de cor e contorno do texto desta logomarca. Se necessário, ajuste as coordenadas do texto. O tamanho e a família da fonte podem ser definidos apenas no arquivo CSS, no atributo text {font-family:Calibri; font-size:25px;}. Ajuste o tamanho ideal para seu desenho.
  • O banner fica com este layout. Teste os atributos de cores e tamanhos em seu desenho. Veja a estrutura SVG deste banner: 
    <svg viewBox="0 0 100 100">
	<g fill="none" stroke-width="2" stroke="green" id="atomos" transform="translate(0,-8)">
		<circle r="8" cx="50" cy="50" fill="green"/>
		<ellipse cx="50" cy="50" rx="15" ry="35"/>
		<ellipse cx="50" cy="50" rx="15" ry="35" transform="rotate(60,50,50)"/>
		<ellipse cx="50" cy="50" rx="15" ry="35" transform="rotate(120,50,50)"/>
	</g>
	<text x="20" y="95" font-weight="bold" font-size="20pt" fill="aqua" stroke="green" stroke-width="1">Átomos</text>
</svg>
  • Vamos desenhar outro símbolo, com retângulos. Logo abaixo do fechamento da barra do átomo, crie uma nova tag de barra. Insira uma imagem para o fundo deste banner em imagens/banner5.jpg. A janela de visualização viewBox pode ser usada com 100 x 100 pixels.
  • Criamos um grupo com tag <g>, para definir atributos de cores e contornos do desenho. O primeiro retângulo foi desenhado na vertical, com largura 10px e altura 80px. Os cantos arredondados estão com rx="2".
  • Os outros dois retângulos foram desenhados com rotações de 60° e 120° em torno do centro (50,50). Para que o desenho fique com o texto logo abaixo, foi feita uma translação de -8 pixels na coordenada y, ou seja, o desenho "subiu" 8px.
  • Ajuste os atributos do texto desta logomarca. As coordenadas sugeridas são x="10" e y="98".
  • O layout deste banner fica desta forma. Configure os atributos para fazer o seu banner. Veja a estrutura SVG deste banner: 
    <svg viewBox="0 0 100 100">
	<g fill="green" stroke-opacity="0.3" stroke-width="0.5" stroke="black" transform="translate(0,-8)" id="icone">
		<rect x="45" y="10" width="10" rx="2" height="80"/>
		<rect x="45" y="10" width="10" rx="2" height="80" transform="rotate(60,50,50)"/>
		<rect x="45" y="10" width="10" rx="2" height="80" transform="rotate(120,50,50)"/>
	</g>
	<text x="10" y="98" fill="aqua" stroke="green" stroke-width="1">Meu Ícone</text>
</svg>

voltar ao topo

📃 Gradientes nos banners

Vamos colocar efeitos de gradiente nos preenchimentos e linhas dos desenhos que fizemos dos 5 primeiros banners.

  • Vamos criar o id="efeito1" como gradiente radial de um tom de laranja mais claro para um pouco mais escuro. O centro deste efeito está no ponto de coordenadas (50%,50%) com raio que abrange 100% do desenho. Ajuste cores e valores para seu banner. Na tag do círculo, colocamos a referência do efeito no preenchimento: fill="url(#efeito1)".
  • O desenho do sol fica com esse efeito. Ajuste os valores para seu desenho. A estrutura SVG do efeito 1 de gradiente é a seguinte: 
    <radialGradient id="efeito1" cx="50%" cy="50%" r="100%">
	<stop offset="0%" stop-color="orange"/>
	<stop offset="100%" stop-color="#FFD732"/>
</radialGradient>

INSIRA A REFERÊNCIA NO PREENCHIMENTO DO CÍRCULO DO SOL:
fill="url(#efeito1)"
  • Na roda dentada, temos que criar 2 efeitos: um radial, para o círculo e outro linear, para os trapézios. Estes efeitos variam de uma tonalidade darkred para o red. Consulte o site https://html-color.codes/ para combinar cores. O efeito linear começa em x1="0%, y1="0% e termina em x2="0%, y2="100%, ou seja, vai de cima para baixo.
  • O layout com gradiente no SVG fica desta forma. Ajuste valores e cores para seu banner. A estrutura SVG dos efeitos 2 e 3 de gradiente é a seguinte: 
    <radialGradient id="efeito2" cx="50%" cy="50%" r="300%">
	<stop offset="0%" stop-color="darkred "/>
	<stop offset="100%" stop-color="red"/>
</radialGradient>
<linearGradient id="efeito3" x1="0%" y1="0%" x2="0%" y2="100%">
	<stop offset="0%" stop-color="red"/>
	<stop offset="100%" stop-color="darkred"/>
</linearGradient>

INSIRA AS REFERÊNCIAS NA LINHA DO CÍRCULO DA RODA E NO PREENCHIMENTO DO GRUPO DOS DENTES:
stroke="url(#efeito2)"
fill="url(#efeito3)"
  • O efeito gradiente da estrela também pode ser feito com um gradiente radial, para o círculo que desenhamos no meio da estrela, e outro linear para os triângulos. Escolha cores e coloque as referências nos preenchimentos para conseguir o efeito criado. Como estamos variando apenas 2 cores, usamos apenas os atributos <stop offset="0%> e <stop offset="100%> para os tons de azul. O efeito linear começa em x1="0%, y1="0% e termina em x2="0%, y2="100%, ou seja, vai de cima para baixo.
  • O layout com gradiente fica desta forma. Ajuste cores e efeitos para seu desenho. A estrutura SVG dos efeitos 4 e 5 de gradiente é a seguinte: 
    <radialGradient id="efeito4" cx="50%" cy="50%" r="70%">
	<stop offset="0%" stop-color="lightskyblue"/>
	<stop offset="100%" stop-color="skyblue"/>
</radialGradient>
<linearGradient id="efeito5" x1="0%" y1="0%" x2="0%" y2="100%">
	<stop offset="0%" stop-color="steelblue"/>
	<stop offset="100%" stop-color="skyblue"/>
</linearGradient>
  • No desenho do átomo, criamos um efeito de gradiente linear para as elipses nos contornos stroke e um efeito de gradiente radial no círculo. Podemos usar o efeito de gradiente linear no texto também. Neste caso, são mostradas variações de tons de verde. Escolha cores e ajuste valores para o seu banner. O efeito linear começa de cima e vai para baixo.
  • O desenho com gradiente fica desta forma. A estrutura SVG dos efeitos 6 e 7 de gradiente é a seguinte: 
    <radialGradient id="efeito6" cx="50%" cy="50%" r="70%">
	<stop offset="0%" stop-color="lightgreen"/>
	<stop offset="100%" stop-color="limegreen"/>
</radialGradient>
<linearGradient id="efeito7" x1="0%" y1="0%" x2="0%" y2="100%">
	<stop offset="0%" stop-color="lightgreen"/>
	<stop offset="100%" stop-color="seagreen"/>
</linearGradient>
  • O último banner que desenhamos, do asterisco, pode ter um efeito gradiente linear. Neste caso, usamos tons de verde com transparência RGBA. O texto tem mesmo efeito de gradiente dos retângulos. O efeito linear começa em x1="0%, y1="0% e termina em x2="100%, y2="0%, ou seja, vai da esquerda para a direita.
  • O layout deste banner com gradiente fica desta forma. Ajuste cores e valores de gradiente para seu desenho de banner. A estrutura SVG do efeito 8 de gradiente é a seguinte: 
    <linearGradient id="efeito8" x1="0%" y1="0%" x2="100%" y2="0%">
	<stop offset="0%" stop-color="rgba(50,205,50,0.9)"/>
	<stop offset="100%" stop-color="rgba(50,205,50,0.6"/>
</linearGradient>

voltar ao topo

📃 Filtros nos banners

Vamos colocar efeitos de filtros de sombras nos desenhos que fizemos dos 5 primeiros banners.

  • Vamos criar o id="efeito10" como filtro de sombra desfocada, com desvio padrão 0.5 e distâncias do gráfico com 1px à direita e abaixo do desenho. Precisamos colocar indicação nos gráficos que terão este efeito com o atributo filter="url(#efeito10)". Neste primeiro exemplo, os desenhos do 5° banner estão com o filtro
  • O banner fica com esse efeito no SVG. Ajuste os valores do filtro para seu desenho. Vamos usar o mesmo efeito nos próximos desenhos.
  • Para usarmos o mesmo efeito nos outros desenhos, não precisamos inserir a tag <filter> novamente. Basta colocar a indicação deste filtro nos desenhos. O mesmo vale para os gradientes: se você quiser usar um mesmo efeito já definido em outra tag <svg>, basta colocar sua indicação.
  • O layout com filtro no SVG do banner de átomo fica desta maneira. Se necessário, ajuste valores e cores para o filtro. Caso precise de outro filtro, basta definir suas configurações e colocar outro nome id.
  • Colocando o filtro no desenho da estrela, basta indicar na tag de grupo <g> o nome do filtro.
  • O layout com filtro fica desta forma. Ajuste cores e efeitos para seu desenho.
  • Na roda dentada, temos um problema: se colocarmos o filtro, as sombras dos trapézios ficarão sobre o desenho do círculo. Para corrigir este erro, podemos colocar a tag <circle> depois da tag do grupo dos dentes da roda. Assim, não aplicamos o filtro no círculo, deixando o desenho sobrepondo as sombras dos dentes da roda.
  • O desenho com filtro fica desta forma. Ajuste valores e cores do filtro, e se necessário, crie outro filtro para este desenho. A estrutura SVG do efeito de filtro 10 é a seguinte: 
    <filter id="efeito10" x="-20" y="-20" height="50" width="50">
	<feGaussianBlur in="SourceAlpha" stdDeviation="0.5" result="desfocado"></feGaussianBlur>
	<feOffset in="desfocado" dx="1" dy="1" result="sombra"></feOffset>
	<feMerge>
		<feMergeNode in="sombra"/>
		<feMergeNode in="desfocado"/>
		<feMergeNode in="SourceGraphic"/>
	</feMerge>
</filter>

INSIRA OS FILTROS NOS DESENHOS:
filter="url(#efeito10)"

voltar ao topo

voltar ao topo

voltar ao topo

📃 6° e 7° banners

Vamos desenhar nuvens com arcos nos dois banners deste exercício. Escolha imagens para colocar nos fundos destas tags: imagens/banner6.jpg e imagens/banner7.jpg.

  • Crie uma tag class="barra" e vamos desenhar a nuvem na tag class="logo". O desenho da nuvem pode ser feito com apenas um caminho <path>, pois temos os raios e as coordenadas relativas das extremidades de cada arco.
  • O primeiro arco tem raio 11, sentido horário e termina em (20,-5) Logo, o comando fica a11,11 0 0,1 20,-5. Todos os arcos estão sem inclinação, são os menores e estão no sentido horário. Logo, a parte central dos comandos será igual para todos os arcos: 0 0,1.
  • O segundo arco tem raio 14 e termina no ponto de coordenadas relativas (25,5). Seu comando fica a14,14 0 0,1 25,5. Os outros arcos são feitos de maneira análoga.
  • Podemos criar um efeito gradiente radial para a nuvem, com transparência de cor com o comando RGBA. A linha também pode ter cor com transparência. Ajuste cores e a espessura das linhas para seu desenho.
  • O banner com desenho da primeira nuvem fica com esse layout.
  • Estrutura SVG do 6º banner: 
    <div class="logo">
	<svg viewBox="0 0 80 80" id="nuvem1">
		<radialGradient id="efeito12" cx="50%" cy="50%" r="100%">
			<stop offset="0%" stop-color="rgba(256,256,256,0.4)"/>
			<stop offset="100%" stop-color="rgba(256,256,256,0.9)""/>
		</radialGradient>
		<path d="M10,15 a11,11 0 0,1 20,-5 a14,14 0 0,1 25,5 a6,6 0 0,1 10,10 
		  a9,9 0 0,1 -15,10 a17,17 0 0,1 -25,0 a8,8 0 0,1 -15,-10 a5,5 0 0,1 0,-10" 
		  stroke="rgba(200,200,200,0.7)" stroke-width="0.5" fill="url(#efeito12)"/>
	</svg>
</div>
<div class="banner">
	Aleatório
</div>
  • Crie uma nova tag class="barra" para desenhar a próxima nuvem. O comando do primeiro arco, de raio 2, que termina no ponto de coordenadas relativas (0,-4) fica a2,2 0 0,1 0,-4.
  • O comando do segundo arco, de raio 2, que termina no ponto de coordenadas relativas (3,-3) fica a2,2 0 0,1 3,-3. Os outros arcos são feitos de maneira análoga. Note que para finalizar a nuvem, com a linha horizontal usamos a letra Z depois das coordenadas do último arco.
  • Podemos usar o mesmo efeito de preenchimento da outra nuvem. Se necessário, crie outro efeito de gradiente para este desenho. Ajuste cores e espessura das linhas para seu desenho.
  • O desenho da nuvem no layout de banner fica desta forma.
  • Estrutura SVG do 7º banner: 
    <div class="logo">
	<svg viewBox="0 0 25 20" id="nuvem2">
		<path d="M3,15 a2,2 0 0,1 0,-4 a2,2 0 0,1 3,-3 a4,4 0 0,1 10,-1 a3,3 0 0,1 4,4 
		  a2,2 0 0,1 0,4z" stroke="rgba(200,200,200,0.7)" stroke-width="0.1" fill="url(#efeito12)"/>
	</svg>
</div>
<div class="banner">
	Aleatório
</div>

voltar ao topo

voltar ao topo

🔗 SVG Editor online
📃 8° banner

Vamos desenhar uma xícara neste exercício. Escolha uma imagem de fundo e salve-a em imagens/banner8.jpg. Não esqueça de atualizar o arquivo CSS com o atributo .barra: nth-child(8) {background: url(imagens/banner8.jpg);}.

  • Crie uma tag class="barra" e vamos desenhar a xícara na tag class="logo". A janela de visualização pode ficar com tamanho de 200 x 200 pixels.
  • Podemos criar um efeito gradiente para este desenho. Escolha as cores e crie o efeito. Neste caso, o efeito começa em x1=0%, y1=0% e termina em x2="100%", y2="100%", ou seja, será feito na diagonal. Vamos criar duas elipses que formam o cabo: a maior com preenchimento igual ao da xícara e a menor com preenchimento branco.
  • A xícara será um retângulo com as medidas indicadas no desenho da apostila. Podemos colocar cantos arredondados com rx="5". As elipses formam o cabo da xícara, com as medidas dos centros coincidentes, mudando apenas as medidas dos raios. Ajuste valores e cores no seu desenho.
  • No grupo <g id="fumaca"> podemos desenhar os arcos com comandos de curvas Bèzier, com as medidas indicadas na apostila. O primeiro arco tem ponto de controle em (-25,-25) e finaliza em (0,-50). Logo, o comando fica q-25,-25 0,-50. O comando t0,-50 faz a parte simétrica da curva.
  • Os outros dois arcos podem ser feitos com translação à direita e à esquerda com 20px: transform="translate(-20,0)" e transform="translate(20,0)".
  • Se o fundo do banner for branco, não temos problemas com as elipses. Podemos substituí-las por caminhos de arcos <path> para que tenham o fundo transparente.
  • O caminho com arcos de elipse começa em M160,120, e tem o primeiro arco com raios 30 e 20, finalizando no ponto de coordenadas (0,40): a30,20 0 0,1 0,40. Depois temos uma linha vertical que sobe 10px e o arco menor, com raios 18 e 10, sentido anti-horário, que termina em (0,-20): a18,10 0 0,0 0,-20.
  • O layout com o caminho de arcos fica assim. Ajuste cores de linhas e de preenchimentos para este banner.
  • Estrutura SVG do 8º banner: 
    <svg viewBox="0 0 200 200">
	<linearGradient id="efeito13" x1="0%" y1="0%" x2="100%" y2="100%">
		<stop offset="0%" stop-color="orange"/>
		<stop offset="100%" stop-color="#C36900"/>
	</linearGradient>
	<g id="xicara" fill="url(#efeito13)" stroke="grey">
		<ellipse cx="160" cy="140" rx="30" ry="20" fill="url(#efeito13)" stroke="grey"/>
		<ellipse cx="160" cy="140" rx="18" ry="10" pathLength="2" fill="white" stroke="grey"/>
		<rect x="40" y="120" rx="5" width="120" height="70" />
	</g>
	<g id="fumaca" fill="none" stroke="grey" stroke-width="2">
		<path d="M100,110 q-25,-25 0,-50 t0,-50"  />
		<path d="M100,110 q-25,-25 0,-50 t0,-50" transform="translate(-20,0)"/>
		<path d="M100,110 q-25,-25 0,-50 t0,-50" transform="translate(20,0)"/>
	</g>
</svg>

voltar ao topo

📃 Animações no 8° banner

Vamos colocar efeitos de animações no banner da xícara.

  • Vamos aumentar a janela de visualização do SVG da xícara para 200 x 220 pixels, inserindo a tag <text> para a logomarca.
  • No grupo id="xicara"definimos o tracejado com 400 pixels e a animação de vai e vem, que começa o tracejado no ponto 400px, vai até 0px e retorna ao 400px. Assim, a animação é de desenhar o contorno da xícara. Note que o atributo <animate> fica dentro da tag de grupo da xícara.
  • Outra animação pode ser feita com a opacidade. No grupo id="xicara", defina a opacidade com 0.8. A tag de animação pode variar a opacidade de 0.8 até 1, retornando a 0.8. O efeito de animação também é de vai e vem.
  • No grupo id="fumaca", o efeito de desenhar os elementos necessita de um tracejado menor, de 150px. O mesmo efeito da xícara, de deslocamento do início do tracejado foi aplicado à fumaça e ao texto da logomarca.
  • Podemos definir efeito de opacidade na fumaça e no texto. Neste caso, foi colocada opacidade inicial de 0.5, com a animação variando entre 0.5 e 1.
  • O efeito no início da animação fica assim.
  • E no final, com opacidade e os desenhos dos contornos completos, fica dessa forma. Ajuste os valores para animação no seu banner da xícara.
  • Estrutura SVG das animações do 8º banner: 
    <svg viewBox="0 0 200 220" >
	<linearGradient id="efeito13" x1="0%" y1="0%" x2="100%" y2="100%">
		<stop offset="0%" stop-color="orange"/>
		<stop offset="100%" stop-color="#C36900"/>
	</linearGradient>
	<g id="xicara" fill="url(#efeito13)" stroke="grey" opacity="0.8" stroke-dasharray="400" 
	  filter="url(#filtro)">
		<path d="M160,120 a30,20 0 0,1 0,40 v-10 a18,10 0 0,0 0,-20z" />
		<rect x="40" y="120" rx="5" width="120" height="70" />
		<animate attributeName="stroke-dashoffset" values="400;0;400" dur="7s" begin="0s"
		  fill="freeze" repeatCount="indefinite"/>
		<animate attributeName="opacity" values="0.8;1;0.8" dur="7s" begin="0s" 
		  fill="freeze" repeatCount="indefinite"/>
	</g>
	<g id="fumaca" fill="none" stroke="grey" stroke-width="2" stroke-dasharray="150" 
	  opacity="0.5" filter="url(#filtro)"> 
		<path d="M100,110 q-25,-25 0,-50 t0,-50"  />
		<path d="M100,110 q-25,-25 0,-50 t0,-50" transform="translate(-20,0)"/>
		<path d="M100,110 q-25,-25 0,-50 t0,-50" transform="translate(20,0)"/>
		<text x="50" y="215" font-weight="bold" fill="url(#efeito13)" stroke="brown" 
		  stroke-width="1">Meu Café</text>
		<animate attributeName="stroke-dashoffset" values="150;0;150" dur="7s" begin="0s" 
		  fill="freeze" repeatCount="indefinite"/>
		<animate attributeName="opacity" values="0.5;1;0.5" dur="7s" begin="0s" 
		  fill="freeze" repeatCount="indefinite"/>
	</g>
</svg>

voltar ao topo

voltar ao topo

📃 9° banner

Vamos criar o outro banner em uma nova classe: class="banner2".

  • Neste banner, vamos criar a paisagem junto com a logomarca e o menu. Ao invés de usar class="barra", vamos criar a estrutura <svg> dentro da tag class="banner2".
  • No arquivo CSS, vamos definir os atributos da classe .banner2. A altura máxima será fixada em 470px, com largura flex:3. O fundo pode ter o mesmo efeito de gradiente usado no desenho SVG.
  • O menu terá largura flex:1 e pode ser configurado na vertical (column) e com alinhamento à direita (flex-end). Veja qual configuração fica melhor no seu layout de banner. Podemos definir o tamanho da fonte da tag textpath, que usaremos adiante.
  • Podemos definir os efeitos gradientes do céu id="linear2", variando de azul claro para branco. O retângulo que define o céu tem mesma dimensão da janela de visualização do svg: 150 x 76 pixels.
  • Definimos também os efeitos gradientes do perfil arquitetônico e do sol: id="linear3" e id="radial1".
  • Podemos definir um efeito gradiente para as nuvens id="radial2" e um filtro id="filtro" para desfocar o desenho e as sombras, com desvio padrão 0.1. Ajuste valores e cores para seu desenho de banner.
  • Com apenas uma tag de caminho <path> podemos definir o perfil arquitetônico: começando no ponto (5,75), a primeira linha é horizontal h5, que sobe com uma linha vertical v-25, passa por uma linha inclinada l12,-8, desce com a linha vertical v24 e passa pela linha horizontal h3.
  • Os arcos que aparecem têm raios iguais a 4 e 2 e são desenhados no sentido horário. Os comandos dos dois primeiros arcos ficam como: a4,4 0 0,1 4,-4 e a2,2 0 0,1 4,0.
  • Usando a animação que faz o efeito de desenhar o perfil, definimos o tracejado com 900px e a variação do ponto de início do tracejado de 900 para 0, voltando depois para 900. Note que precisamos fechar a tag <path>, pois inserimos a animação no caminho do desenho do perfil.
  • A tag name="nuvem" tem o gradiente indicado por url(#radial2). O desenho é similar aos de nuvens que já fizemos: os dois primeiros arcos têm raios de 5px, sentido horário, e finalizam nos pontos com coordenadas relativas (7,-7) e (9,0). Os outros arcos são desenhados da mesma forma. Podemos definir o tracejado do desenho da nuvem com 80px, e o efeito de desenhar a nuvem que começa em 80px, vai até 0 e volta para 80px. Esta tag de animação está dentro da tag de caminho da nuvem, que precisa ser fechada: </path>.
  • No desenho do sol, temos o efeito de gradiente url(#radial1) e o tracejado com tamanho 35px. Em cada <path> de raio, precisamos definir o tamanho do tracejado de 5px. Assim, a animação pode ser usada com valores de 0 a 5. Neste caso, estão com 3px, ou seja, os raios não sumirão. Se colocarmos 5px, os raios somem e voltam. Teste valores para a animação do seu banner.
  • Este é o layout do banner com as configurações mostradas. Ajuste cores e valores de atributos para o seu banner.
  • Trecho da estrutura CSS do 9º banner, configurando o novo banner: 
    .banner2 svg {width:100%; max-height:470px; flex:3;}
.banner2 {display:flex; justify-content:flex-end; align-items:center; 
background:linear-gradient(to bottom, skyblue, white);}
.banner2 label .menu ul {flex:1; flex-direction:column; align-content:flex-end;}
.banner2 label .menu li{margin-bottom:15px;}

textpath {font-family:Calibri; font-size:30pt; text-shadow:1px 1px 3px yellow;}

label {padding:15px; flex:1; width:100%;}
    1ª parte da estrutura HTML do 9º banner: 
    <div class="banner2">
	<svg viewBox="0 0 150 76" >
		<defs>
			<linearGradient id="linear2" x1="0%" y1="0%" x2="0%" y2="100%">
				<stop offset="0%" stop-color="skyblue"/>
				<stop offset="100%" stop-color="white"/>
			</linearGradient>
			<linearGradient id="linear3" x1="0%" y1="0%" x2="0%" y2="100%">
				<stop offset="0%" stop-color="grey"/>
				<stop offset="100%" stop-color="white"/>
			</linearGradient>
			<radialGradient id="radial1" cx="50%" cy="50%" r="50%">
				<stop offset="0%" stop-color="#FFC966"/>
				<stop offset="100%" stop-color="orange"/>
			</radialGradient>
			<radialGradient id="radial2" cx="50%" cy="50%" r="50%">
				<stop offset="0%" stop-color="white"/>
				<stop offset="100%" stop-color="rgb(240,240,240)"/>
			</radialGradient>
			<filter id="filtro" x="-20" y="-20" height="50" width="50">
				<feGaussianBlur in="SourceAlpha" stdDeviation="0.1" result="sombra"></feGaussianBlur>
				<feGaussianBlur in="SourceGraphic" stdDeviation="0.1" result="desfocado"></feGaussianBlur>
				<feMerge>
					<feMergeNode in="sombra"/>
					<feMergeNode in="desfocado"/>
				</feMerge>
			</filter>
		</defs>
  • 2ª parte da estrutura SVG do 9º banner: 
    		<g name="ceu">
			<rect x="0" y="0" width="150" height="76" stroke="none" fill="url(#linear2)"/>
		</g>
		<g name="perfil" filter="url(#filtro)">
			<path d="M5,75 h5 v-25 l12,-8 v24 h3 v-5 h2 v-1 h5 v3 h3 v-10 h5 v-10 
			  h10 v5 l4,2 v10 h5 v-5 h4 v3 h3 v-10 h2 v-4 h3 v-15 l3,5 v20 h2 v-25 l5,3 v35 
			  a4,4 0 0,1 4,-4 a2,2 0 0,1 4,0 a4,4 0 0,1 4,4 v5 h2 v-3 h8 v-17 h2 v-14 h2 
			  v-10 l4,-20 l4,20 v10 h2 v14 h2 v17 h5 v5 l3,-4 v-5 h2 v-10 h1 v-10 h1 v-1 h5 
			  v1 h1 v10 h1 v3 h1 v-4 h3 v4 h2 v17" stroke="grey" fill="url(#linear3)" 
			  stroke-width="0.5" stroke-dasharray="900">
				<animate attributeName="stroke-dashoffset" values="900;0;900" 
				  dur="20s" begin="0s" fill="freeze" repeatCount="indefinite"/>
			</path>
		</g>
		<g name="nuvem" fill="url(#radial2)" filter="url(#filtro)">
			<path d="M15,20 a5,5 0 0,1 7,-7 a5,5 0 0,1 9,0 a5,5 0 0,1 7,7 
			  a7,7 0 0,1 -12,6 a6,6 0 0,1 -11,-6" stroke="rgb(240,240,240)" 
			  stroke-width="0.5" stroke-dasharray="80">
				<animate attributeName="stroke-dashoffset" values="80;0;80" 
				  dur="20s" begin="0s" fill="freeze" repeatCount="indefinite"/>
			</path>
		</g>
		<circle r="5" cx="55" cy="15" fill="url(#radial1)" filter="url(#filtro)" />
		<g stroke-dasharray="35" stroke="orange" stroke-width="0.3" 
		  filter="url(#filtro)" name="sol" >
			<path d="M55,4 v5" stroke-dasharray="5" />
			<path d="M55,4 v5" transform="rotate(45,55,15)" stroke-dasharray="5"/>
			<path d="M55,4 v5" transform="rotate(90,55,15)" stroke-dasharray="5"/>
			<path d="M55,4 v5" transform="rotate(135,55,15)" stroke-dasharray="5"/>
			<path d="M55,4 v5" transform="rotate(180,55,15)" stroke-dasharray="5"/>
			<path d="M55,4 v5" transform="rotate(-45,55,15)" stroke-dasharray="5"/>
			<path d="M55,4 v5" transform="rotate(-90,55,15)" stroke-dasharray="5"/>
			<path d="M55,4 v5" transform="rotate(-135,55,15)" stroke-dasharray="5"/>
			<animate attributeName="stroke-dashoffset" values="3;0;3" dur="10s" 
			  begin="0s" fill="freeze" repeatCount="indefinite"/>
		</g>
	</svg>
	<input type="checkbox" id="checkbox1">
	<label for="checkbox1">
	<nav class="menu">
		<ul>
			<li><a href="index.htm">Página 1</a></li>
			<li><a href="pagina1.htm">Página 2</a></li>
			<li><a href="pagina2.htm">Página 3</a></li>
		</ul>
	</nav>
	<span class="toggle">&#9776;</span>
	</label>
</div>

voltar ao topo

📃 10° banner: animações

Vamos criar o outro banner usando: class="barra". Insira uma imagem de fundo para este banner na pasta imagens/banner10.jpg

  • Dentro da tag class="logo" vamos desenhar um dos retângulos com as medidas indicadas na apostila. Os cantos arredondados podem ser feitos com o atributo rx="1".
  • O segundo retângulo tem mesma tag do primeiro, sendo rotacionado com ângulo de 36° em torno do centro (30,30). Mudamos a opacidade para opacity="0.9".
  • Os outros retângulos são rotacionados de 36° em 36°, até chegar em 324°. Neste retângulo, colocamos opacity="0.1".
  • A primeira animação, comum neste tipo de desenho, é de rotação em torno do centro. Para ter o efeito vai e vem, usamos o atributo values="0,30,30;360,30,30;0,30,30", que indica que a rotação começa no 0, vai até 360 e depois volta ao 0. Logo, o efeito será feito no sentido horário, e depois no sentido anti-horário.
  • Outros efeitos que podem ser usados são de escala (neste caso diminui de 1 para 0.9) e translação (neste caso, a figura "anda" 15px para a direita e depois retorna à posição original).
  • Com os atributos mostrados, este é o layout do banner com o símbolo apresentado. Modifique valores e cores para fazer o seu banner.A estrutura SVG do 10º banner é a seguinte: 
    <svg viewBox="0 0 60 60">
	<g stroke-width="0" fill="red" id="simbolo">
		<rect x="28" y="5" width="4" rx="1" height="10"/>
		<rect x="28" y="5" width="4" rx="1" height="10" 
		  transform="rotate(36,30,30)" opacity="0.9"/>
		<rect x="28" y="5" width="4" rx="1" height="10" 
		  transform="rotate(72,30,30)" opacity="0.8"/>
		<rect x="28" y="5" width="4" rx="1" height="10" 
		  transform="rotate(108,30,30)" opacity="0.7"/>
		<rect x="28" y="5" width="4" rx="1" height="10" 
		  transform="rotate(144,30,30)" opacity="0.6"/>
		<rect x="28" y="5" width="4" rx="1" height="10" 
		  transform="rotate(180,30,30)" opacity="0.5"/>
		<rect x="28" y="5" width="4" rx="1" height="10" 
		  transform="rotate(216,30,30)" opacity="0.4"/>
		<rect x="28" y="5" width="4" rx="1" height="10" 
		  transform="rotate(252,30,30)" opacity="0.3"/>
		<rect x="28" y="5" width="4" rx="1" height="10" 
		  transform="rotate(288,30,30)" opacity="0.2"/>
		<rect x="28" y="5" width="4" rx="1" height="10" 
		  transform="rotate(324,30,30)" opacity="0.1"/>
		<animateTransform attributeType="xml" attributeName="transform" type="rotate" 
		  values="0,30,30;360,30,30;0,30,30" dur="15s" begin="1s" fill="freeze" />
		<animateTransform attributeType="xml" attributeName="transform" type="scale" 
		  values="1;0.9;1" dur="15s" begin="1s" fill="freeze" additive="sum"/>
		<animateTransform attributeType="xml" attributeName="transform" type="translate" 
		  values="0,0;15,0;0,0" dur="15s" begin="1s" fill="freeze" additive="sum"/>
	</g>
</svg>

voltar ao topo

📃 11° banner

Usando as tags mostradas do lápis em uma class="barra", temos o layout mostrado abaixo. Insira uma imagem de fundo para este banner na pasta imagens/banner11.jpg e coloque as tags do lápis em uma class="logo".

Estrutura SVG do 11º banner: 
<svg viewBox="0 0 200 200">
	<g id="lapis" stroke-width="1" stroke="black">
		<rect x="30" y="10" width="56" height="5" fill="white"/>
		<rect x="30" y="15" width="14" height="100" fill="rgba(0,0,255,1)"/>
		<rect x="44" y="15" width="28" height="100" fill="rgba(0,0,255,0.6)"/>
		<rect x="72" y="15" width="14" height="100" fill="rgba(0,0,255,1)"/>
		<path d="M30,115 l14,24 h28 l14,-24z" fill="brown"/>
		<path d="M30,115 l14,24 h28 l14,-24z" fill="rgb(200,200,100)"/>
		<path d="M44,139 l14,24 l14,-24z" fill="blue"/>
		<animateTransform attributeName="transform" attributeType="xml" type="rotate" 
		  from="20,30,30" to="0,30,30" begin="2s" dur="5s" />
		<animateTransform attributeName="transform" attributeType="xml" type="scale" 
		  from="0.7" to="1" begin="2s" dur="5s" additive="sum" />
	</g>
	<text class="texto" x="100" y="150" fill="none" stroke="rgba(100,85,190,1)" 
	  stroke-width="1" stroke-dasharray="200">SVG
		<animate attributeName="stroke-dashoffset" from="200" to="0" dur="5s" 
		  begin="2s" fill="freeze" />
		<animate attributeName="fill" from="rgba(0,0,0,0.1)" to="rgba(100,85,190,0.6)" 
		  dur="5s" begin="2s" fill="freeze" />
	</text>
</svg>
📃 12° banner

Vamos criar o outro banner usando class="barra". Insira uma imagem de fundo para este banner na pasta imagens/banner12.jpg

  • Com as medidas do halteres que vamos desenhar, a janela de visualização viewBox pode ser definida com tamanho de 150 x 120 pixels.
  • Começando pelos dois retângulos menores, temos as coordenadas do primeiro vértice (5,25), e o segundo ficará na coordenada (135,25): 5px da coordenada do vértice + 10px da largura do primeiro retângulo + 5px da distância até a barra + 15px da largura da parte maior + 80px da largura total da barra + 15px da largura da parte maior à direita + 5px da distância = 135px.
  • A parte maior da barra pode ser feita com uma tag de caminho <path>: começando no ponto de coordenadas (20,5), usamos uma linha vertical v80, depois a largura com a horizontal h15, uma vertical subindo com v-30, a horizontal da largura da barra h80, seguida de uma vertical v30. Os outros comandos são similares.
  • Crie duas animações de transformação na barra. Neste exemplo, temos uma animação de rotação de 20° para 0° em torno do ponto de coordenadas (40,40) junto com a escala que começa em 0.7 e vai até 1.
  • Outra animação colocada dentro da tag de texto faz o desenho do texto e modifica a cor de preenchimento.
  • Com estas animações, o layout deste banner fica desta forma. Modifique valores de atributos e cores para criar o seu banner.
  • Estrutura SVG do 12º banner: 
    <div class="logo">
	<svg viewBox="0 0 150 120">
		<g id="halteres" stroke-width="1" stroke="grey" fill="yellow" filter="url(#filtro)">
			<rect x="5" y="25" width="10" height="40"/>
			<rect x="135" y="25" width="10" height="40"/>
			<path d="M20,5 v80 h15 v-30 h80 v30 h15 v-80 h-15 v30 h-80 v-30z"/>
			<animateTransform attributeName="transform" attributeType="xml" 
			  type="rotate" from="20,40,40" to="0,40,40" begin="2s" dur="5s" />
			<animateTransform attributeName="transform" attributeType="xml" 
			  type="scale" from="0.7" to="1" begin="2s" dur="5s" additive="sum" />
		</g>
		<text class="texto" x="25" y="110" fill="none" stroke="rgb(210,210,70)" 
		  stroke-width="1" stroke-dasharray="200">Academia
			<animate attributeName="stroke-dashoffset" from="200" to="0" dur="5s" 
			  begin="2s" fill="freeze" />
			<animate attributeName="fill" from="rgba(250,250,0,0.1)" 
			  to="rgba(250,250,0,0.7)" dur="5s" begin="2s" fill="freeze" />
		</text>
	</svg>
</div>
<div class="banner">
	Perfect Fit
</div>
📃 Animações no 2° banner

Vamos criar efeitos de animação no 2° banner da nossa página. Podemos desenhar uma segunda roda, com outra cor, um pouco menor (usando scale) e deslocada para a direita (usando translate).

  • Dentro da tag de grupo da primeira roda <g>, podemos inserir o efeito de animação.
  • A animação de rotação de 0° a 360° está definida no final da tag de grupo.
  • O desenho da segunda roda, com tons de verde, tem efeitos gradientes definidos com id="efeito2a" e id="efeito3a". Criamos uma tag nova de grupo chamada <g name="roda2"> para usar os mesmos desenhos da roda original.
  • Fazendo a translação de 65px à direita e 65px para baixo junto com a escala de 0.8, temos a segunda roda desenhada.
  • O efeito de animação é o mesmo da primeira roda. Se você quiser inverter o sentido da rotação, basta trocar os limites para from="360,50,50" e to="0,50,50".
  • O banner fica com este layout com as animações programadas. Ajuste atributos e cores para o seu layout.
  • Estrutura SVG do 2º banner com animações: 
    <svg viewBox="0 0 140 140">
	<radialGradient id="efeito2" cx="50%" cy="50%" r="300%">
		<stop offset="0%" stop-color="darkred "/>
		<stop offset="100%" stop-color="red"/>
	</radialGradient>
	<linearGradient id="efeito3" x1="0%" y1="0%" x2="0%" y2="100%">
		<stop offset="0%" stop-color="red"/>
		<stop offset="100%" stop-color="darkred"/>
	</linearGradient>
	<g stroke-width="0" fill="url(#efeito3)" id="roda" filter="url(#efeito10)">
		<polygon points="40,20 60,20 55,10 45,10"/>
		<polygon points="40,20 60,20 55,10 45,10" transform="rotate(30,50,50)"/>
		<polygon points="40,20 60,20 55,10 45,10" transform="rotate(60,50,50)"/>
		<polygon points="40,20 60,20 55,10 45,10" transform="rotate(90,50,50)"/>
		<polygon points="40,20 60,20 55,10 45,10" transform="rotate(120,50,50)"/>
		<polygon points="40,20 60,20 55,10 45,10" transform="rotate(150,50,50)"/>
		<polygon points="40,20 60,20 55,10 45,10" transform="rotate(180,50,50)"/>
		<polygon points="40,20 60,20 55,10 45,10" transform="rotate(210,50,50)"/>
		<polygon points="40,20 60,20 55,10 45,10" transform="rotate(240,50,50)"/>
		<polygon points="40,20 60,20 55,10 45,10" transform="rotate(270,50,50)"/>
		<polygon points="40,20 60,20 55,10 45,10" transform="rotate(300,50,50)"/>
		<polygon points="40,20 60,20 55,10 45,10" transform="rotate(330,50,50)"/>
		<animateTransform attributeType="xml" attributeName="transform" type="rotate" 
		  from="0,50,50" to="360,50,50" dur="10s" begin="1s" fill="freeze"/>
	</g>
	<circle r="30" cx="50" cy="50" stroke="url(#efeito2)" stroke-width="5" fill="none"/>
	<radialGradient id="efeito2a" cx="50%" cy="50%" r="300%">
		<stop offset="0%" stop-color="limegreen"/>
		<stop offset="100%" stop-color="lightgreen"/>
	</radialGradient>
	<linearGradient id="efeito3a" x1="0%" y1="0%" x2="0%" y2="100%">
		<stop offset="0%" stop-color="lightgreen"/>
		<stop offset="100%" stop-color="limegreen"/>
	</linearGradient>
	<g name="roda2" transform="translate(65,65) scale(0.8)" >
		<g stroke-width="0" fill="url(#efeito3a)" id="roda" filter="url(#efeito10)">
			<polygon points="40,20 60,20 55,10 45,10"/>
			<polygon points="40,20 60,20 55,10 45,10" transform="rotate(30,50,50)"/>
			<polygon points="40,20 60,20 55,10 45,10" transform="rotate(60,50,50)"/>
			<polygon points="40,20 60,20 55,10 45,10" transform="rotate(90,50,50)"/>
			<polygon points="40,20 60,20 55,10 45,10" transform="rotate(120,50,50)"/>
			<polygon points="40,20 60,20 55,10 45,10" transform="rotate(150,50,50)"/>
			<polygon points="40,20 60,20 55,10 45,10" transform="rotate(180,50,50)"/>
			<polygon points="40,20 60,20 55,10 45,10" transform="rotate(210,50,50)"/>
			<polygon points="40,20 60,20 55,10 45,10" transform="rotate(240,50,50)"/>
			<polygon points="40,20 60,20 55,10 45,10" transform="rotate(270,50,50)"/>
			<polygon points="40,20 60,20 55,10 45,10" transform="rotate(300,50,50)"/>
			<polygon points="40,20 60,20 55,10 45,10" transform="rotate(330,50,50)"/>
			<animateTransform attributeType="xml" attributeName="transform" 
			  type="rotate" from="0,50,50" to="360,50,50" dur="10s" 
			  begin="1s" fill="freeze"/>
		</g>
		<circle r="30" cx="50" cy="50"stroke="url(#efeito2a)" stroke-width="5" fill="none"/>
	</g>
</svg>
📃 Animações no 9° banner

Vamos criar animações de transformação no 9° banner.

  • No desenho da nuvem, podemos criar pequenas translações. Neste exemplo, a nuvem vai de 3px para a direita, depois volta ao ponto inicial; depois disso, vai para 3px à esquerda, retornando ao ponto inicial. A escala também foi usada variando de 0.95 a 1. Ajuste valores para fazer a animação do seu banner.
  • Podemos inserir uma animação de rotação nos raios do sol. Neste caso, foi colocada uma rotação que varia de 0° a 30° em torno do centro (55,15). Note que as tags de animações estão dentro das respectivas tags de grupos dos desenhos.
  • O layout fica desta forma. Ajuste valores e atributos de animação para seu banner.
  • Trecho da estrutura SVG do 9º banner com animações: 
    <g name="nuvem" fill="url(#radial2)" filter="url(#filtro)">
	<path d="M15,20 a5,5 0 0,1 7,-7 a5,5 0 0,1 9,0 a5,5 0 0,1 7,7 a7,7 0 0,1 -12,6 
	  a6,6 0 0,1 -11,-6" stroke="rgb(240,240,240)" stroke-width="0.5" stroke-dasharray="80">
		<animate attributeName="stroke-dashoffset" values="80;0;80" dur="20s" 
		  begin="0s" fill="freeze" repeatCount="indefinite"/>
		<animateTransform attributeName="transform" attributeType="xml" type="translate"  
		  values="0,0;3,0;0,0;-3,0;0,0" begin="0s" dur="5s" repeatCount="indefinite"/>
		<animateTransform attributeName="transform" attributeType="xml" type="scale" 
		  values="1;0.95;1" begin="0s" dur="5s" additive="sum" repeatCount="indefinite"/>
	</path>
</g>
<circle r="5" cx="55" cy="15" fill="url(#radial1)" filter="url(#filtro)" />
<g stroke-dasharray="35" stroke="orange" stroke-width="0.3" 
  filter="url(#filtro)" name="sol" >
	<path d="M55,4 v5" stroke-dasharray="5" />
	<path d="M55,4 v5" transform="rotate(45,55,15)" stroke-dasharray="5"/>
	<path d="M55,4 v5" transform="rotate(90,55,15)" stroke-dasharray="5"/>
	<path d="M55,4 v5" transform="rotate(135,55,15)" stroke-dasharray="5"/>
	<path d="M55,4 v5" transform="rotate(180,55,15)" stroke-dasharray="5"/>
	<path d="M55,4 v5" transform="rotate(-45,55,15)" stroke-dasharray="5"/>
	<path d="M55,4 v5" transform="rotate(-90,55,15)" stroke-dasharray="5"/>
	<path d="M55,4 v5" transform="rotate(-135,55,15)" stroke-dasharray="5"/>
	<animate attributeName="stroke-dashoffset" values="3;0;3" dur="10s" 
	  begin="0s" fill="freeze" repeatCount="indefinite"/>
	<animateTransform attributeName="transform" attributeType="xml" type="rotate" 
	  values="0,55,15;30,55,15;0,55,15" begin="0s" dur="10s" repeatCount="indefinite"/>
</g>

voltar ao topo

📃 Detalhes da Atividade

Agora você pode montar o 13° banner. Use um dos logos que você desenhou, o banner e o menu para colocá-los na tag class="banner2".

  • Usando a class="banner2", vamos colocar os elementos na ordem: logo, banner e menu. Tente outras configurações em seu banner da Atividade.
  • Para usar o desenho do lápis, podemos colocá-lo em uma tag class="logo" que já configuramos no CSS.
  • Logo depois, colocamos a tag de <svg> do banner, com as devidas animações já programadas.
  • Depois do banner, antes de fechar a tag <svg>, crie uma curva id="curva"para desenhar o título do banner alinhado com esta curva. Usando a tag <textpath>, coloque o título na página, com animação to tipostartOffset. Ajuste o valor inicial, pois depende do número de caracteres do título que você escolher.
  • Para finalizar o banner, insira a estrutura de menu da página.
  • O banner fica com este layout com as animações programadas. Ajuste atributos e cores para o layout do seu banner.
  • No final da animação do texto, o banner fica desta forma. Veja uma parte da estrutura SVG com animação do texto em curva: 
    <path id="curva" fill="none" stroke="none" d="M20,40 a160,160 0 0,0 120,0"/>
<text>
  <textpath fill="rgb(50,150,50)" stroke="none" xlink:href="#curva">Meu portfólio
      <animate attributeName="startOffset" from="-150" to="5" dur="5s" begin="0s" fill="freeze" />
  </textpath>
</text>

voltar ao topo

6. Galeria de Imagens

Material da pág. 56 até a pág. 61

📃 Atividade 10: HTML

Na pasta webdesign/atividade10, crie os arquivos index.htm e estilo.css, além da pasta webdesign/atividade10/imagens.

  • No arquivo index.htm, vamos criar as referências do arquivo CSS e da fonte externa escolhida no Google Fonts.
  • Com a tag mãe class="boxSite", vamos criar a primeira tag class="barra" com os desenhos do banner do site em SVG.
  • A segunda tag class="barra" contém o menu do site.
  • A terceira tag será chamada de class="galeria", com as imagens em miniatura e as ampliadas.
  • A última tag será class="rodape".
  • A estrutura da tag menu é a mesma que já usamos nas outras atividades. A seguir, vamos ver as demais tags com mais detalhes.
  • Estrutura HTML da galeria da Atividade 10: 
    <div class="boxSite">
	<div class="barra">
		<svg viewbox="0 0 1200 200" name="banner">
			BANNER SVG
		</svg>	
	</div>
	<div class="barra">
		<input type="checkbox" id="checkbox1">
		<label for="checkbox1">
			<nav class="menu">
				<ul>
					<li><a href="index.htm">Página 1</a></li>
					<li><a href="pagina1.htm">Página 2</a></li>
					<li><a href="pagina2.htm">Página 3</a></li>
				</ul>
			</nav>
		<span class="toggle">&#9776;</span>
		</label>
	</div>
	<div class="galeria">
		GALERIA
	</div>
	<div class="rodape">
		&copy; Copyright 2020
    </div>
</div>
📃 Atividade 10: banner

Podemos usar alguns desenhos SVG que criamos na atividade anterior, encaixando com outros para criarmos o banner desta atividade. Algumas sugestões de desenhos que você pode usar e adaptar à sua página são mostrados a seguir. Você pode fazer apenas uma tag SVG, como mostrado, ou uma tag com uma logo e outra com o desenho do banner. Se usar duas tags, lembre-se de deixá-las com mesma medida de altura.

  • Neste exemplo, usamos a tag única de banner com janela de visualização viewBox de 1200 x 200 pixels. As primeiras tags são dos efeitos gradientes usados nos desenhos em tons de verde, azul, amarelo e um filtro para desfocar os contornos dos desenhos. Cada tag de efeito deve ter um id diferente.
  • Seguindo com os efeitos, temos id="filtro2" e id="filtro3" que produzem sombras com intensidades diferentes. O primeiro desenho é do céu com um retângulo que cobre a janela de visualização SVG. Depois, temos o desenho de duas montanhas.
  • A parte de cima foi desenhada com uma única tag de caminho com as medidas indicadas. Esta tag usa apenas linhas com coordenadas (30,-30) e (30,30) para o triângulo maior, depois com linhas alternando coordenadas relativas (-10,10), (-10,-10), (-10,20) para o efeito vai e vem.
  • A tag da parte de baixo é de um trapézio com coordenada inicial (800,120). A primeira linha vai para as coordenadas relativas (80,-80), depois uma linha horizontal de 60 e outra linha para as coordenadas relativas (80,80).
  • A segunda montanha foi feita com as mesmas coordenadas da primeira, com translação e escala.
  • Os desenhos de gramados foram feitos com arcos com as medidas dos raios entre 500px e 1500px. As tags de sol e de nuvens foram feitas da mesma maneira que fizemos na atividade anterior.
  • Os desenhos das casas foram feitos usando caminhos, similares aos usados nos desenhos das montanhas.
  • Podemos usar tags de retângulos para as janelas, portas e o tronco da árvore. Neste exemplo, foram usadas tags de caminho <path>. As duas primeiras tags mostram os desenhos dos retângulos da primeira casa e da porta. As duas outras tags são do desenho da árvore.
  • A segunda árvore foi feita parecida com a primeira, com altura um pouco maior e coordenada inicial modificada para (485,190).
  • O desenho do moinho pode ser feito com os elementos mais simples: como janela, porta e telhado. Em uma tag separada, com animação programada, desenhamos as hastes. Precisamos nos preocupar só com o desenho da primeira. As outras foram feitas com rotações de 90°, 180° e 270°.
  • No detalhe de uma haste, temos as tags do círculo e da linha horizontal de tamanho 70. Na tag seguinte, temos cada trecho da haste: a primeira linha vertical M70,0 v10, a segunda com coordenada x com mais 5px M75,0 v10 e assim sucessivamente.
  • O título do banner pode ser feito com o texto sobre uma curva. Para finalizar, os links de compartilhamento ficam como mapeamentos de imagens dentro da tag SVG, no canto direito inferior da tag.
  • Este é o resultado do banner com as tags mostradas. Faça o seu desenho de banner para esta atividade.
    1ª parte da estrutura SVG do banner da Atividade 10: 
    <svg viewbox="0 0 1200 200" name="banner">
	<defs>
		<linearGradient id="azul" x1="0%" y1="0%" x2="0%" y2="100%">
			<stop offset="0%" stop-color="skyblue"/>
			<stop offset="100%" stop-color="lightskyblue" />
		</linearGradient>
		<linearGradient id="verde1" x1="0%" y1="0%" x2="0%" y2="100%">
			<stop offset="0%" stop-color="limegreen"/>
			<stop offset="100%" stop-color="forestgreen"/>
		</linearGradient>
		<radialGradient  id="laranja" cx="50%" cy="50%" r="50%" >
			<stop offset="0%" stop-color="linen"/>
			<stop offset="100%" stop-color="orange"/>
		</radialGradient>						
		<linearGradient id="verde" x1="0%" y1="0%" x2="0%" y2="100%">
			<stop offset="0%" stop-color="mediumaquamarine"/>
			<stop offset="100%" stop-color="green"/>
		</linearGradient>
		<linearGradient id="telhado" x1="0%" y1="0%" x2="0%" y2="100%">
			<stop offset="0%" stop-color="orange"/>
			<stop offset="100%" stop-color="brown"/>
		</linearGradient>
		<linearGradient id="amarelo" x1="0%" y1="0%" x2="100%" y2="100%">
			<stop offset="0%" stop-color="#c0c0c0"/>
			<stop offset="100%" stop-color="#dcdcdc"/>
		</linearGradient>
		<linearGradient id="amarelo1" x1="0%" y1="0%" x2="100%" y2="100%">
			<stop offset="0%" stop-color="antiquewhite"/>
			<stop offset="100%" stop-color="gainsboro "/>
		</linearGradient>
		<filter id="filtro1" height="200%" width="200%">
			<feGaussianBlur in="SourceGraphic" stdDeviation="0.3"></feGaussianBlur>
		</filter>
		<filter id="filtro2" x="-20" y="-20" height="300" width="200">
			<feGaussianBlur in="SourceGraphic" stdDeviation="1.7" result="desfocado"></feGaussianBlur>
			<feGaussianBlur in="SourceAlpha" stdDeviation="1.7" result="sombra"></feGaussianBlur>
			<feMerge>
				<feMergeNode in="sombra" />
				<feMergeNode in="desfocado" />
				<feMergeNode in="SourceGraphic" />
			</feMerge>
		</filter> 
		<filter id="filtro3" x="-20" y="-20" height="300" width="200">
			<feGaussianBlur in="SourceGraphic" stdDeviation="2" result="desfocado"></feGaussianBlur>
			<feGaussianBlur in="SourceAlpha" stdDeviation="2" result="sombra"></feGaussianBlur>
			<feMerge>
				<feMergeNode in="sombra" />
				<feMergeNode in="desfocado" />
				<feMergeNode in="SourceGraphic" />
			</feMerge>
		</filter> 
	</defs>
  • 2ª parte da estrutura SVG do banner da Atividade 10: 
    	<rect name="ceu" x="0" y="0" width="1200" height="250" fill="url(#azul)" />
	<g id="montanha1" filter="url(#filtro2)" stroke-linecap="round">
		<path d="M800,120 l80,-80 h60 l80,80z" fill="url(#verde)" />
		<path d="M880,40 l30,-30 l30,30 l-10,10 l-10,-10 l-10,20 l-10,-20 
		  l-10,10 l-10,-10z" fill="white"/>
	</g>
	<g id="montanha2" transform="scale(1.15) translate(-2,-5)" filter="url(#filtro2)">
		<path d="M800,120 l80,-80 h60 l80,80z" fill="url(#verde)" />
		<path d="M880,40 l30,-30 l30,30 l-10,10 l-10,-10 l-10,20 l-10,-20 l-10,10 
		  l-10,-10z" fill="white"/>
	</g>
	<path name="grama1" d="M0,100 a1500,700 0 0,1 900,50 v50 h-900z" fill="url(#verde1)" 
	  filter="url(#filtro2)"/>
	<path name="grama2" d="M400,200 a1000,500 0 0,1 800,-120 v120 h-1200z" fill="url(#verde1)" 
	  filter="url(#filtro2)"/>
	<g id="sol">
		<circle r="25" cx="50" cy="50" fill="url(#laranja)" stroke="none" filter="url(#filtro2)"/>
		<g stroke-dasharray="15" stroke="grey" stroke-width="1">
			<path d="M50,20 v-15" />
			<path d="M50,20 v-15" transform="rotate(30,50,50)"/>
			<path d="M50,20 v-15" transform="rotate(60,50,50)"/>
			<path d="M50,20 v-15" transform="rotate(90,50,50)"/>
			<path d="M50,20 v-15" transform="rotate(120,50,50)"/>
			<path d="M50,20 v-15" transform="rotate(150,50,50)"/>
			<path d="M50,20 v-15" transform="rotate(180,50,50)"/>
			<path d="M50,20 v-15" transform="rotate(210,50,50)"/>
			<path d="M50,20 v-15" transform="rotate(240,50,50)"/>
			<path d="M50,20 v-15" transform="rotate(270,50,50)"/>
			<path d="M50,20 v-15" transform="rotate(300,50,50)"/>
			<path d="M50,20 v-15" transform="rotate(330,50,50)"/>
			<animate attributeName="stroke-dashoffset" from="30" to="0" dur="4s" 
			  begin="0s" fill="freeze" repeatCount="indefinite"/>
			<animateTransform attributeType="xml" attributeName="transform" type="rotate" 
			  from="0,50,50" to="360,50,50" begin="0s" dur="30s" repeatCount="indefinite"/>
		</g>
	</g>
	<g id="nuvem1" transform="scale(0.4) translate(1700,0)" filter="url(#filtro3)">
		<path d="M30,150 a20,20 0 0,1 0,-40 a20,20 0 0,1 30,-30 a40,40 0 0,1 100,-10 
		  a30,30 0 0,1 40,40 a20,20 0 0,1 0,40z" fill="white" stroke="none" >
			<animateTransform attributeType="xml" attributeName="transform" type="translate" 
			  keytimes="0;0.5;1" values=" 0 0; 50 0; 0 0" begin="0s" dur="4s" repeatCount="indefinite"/>
		</path>
	</g>
	<g id="nuvem2" transform="scale(1.5) translate(200,0)" filter="url(#filtro1)">
		<path  d="M10,15 a11,11 0 0,1 20,-5 a14,14 0 0,1 25,5 a6,6 0 0,1 10,10 a9,9 0 0,1 -15,10 
		  a17,17 0 0,1 -25,0 a8,8 0 0,1 -15,-10 a5,5 0 0,1 0,-10" stroke="none" fill="white">
			<animateTransform attributeType="xml" attributeName="transform" type="translate" 
			  keytimes="0;0.5;1" values="0,0;-15,0;0,0" begin="0s" dur="7s" repeatCount="indefinite"/>
		</path>
	</g>		
	<g id="casa" transform="scale(0.5) translate(260,60)" filter="url(#filtro3)">
		<path d="M100,200 h120 v-90 h-120z" fill="mediumturquoise"/>
		<path d="M145,200 h30 v-70 h-30z" fill="url(#amarelo)"/>
		<path d="M105,130 h30 v30 h-30z" fill="url(#amarelo1)"/>
		<path d="M215,130 h-30 v30 h30z" fill="url(#amarelo1)"/>
		<path d="M100,100 v-45 h20 v45z" fill="url(#telhado)"/>
		<path d="M80,110 l80,-80 l80,80z" fill="url(#telhado)"/>
	</g>
	<g id="casa_maior" filter="url(#filtro3)" transform="scale(0.5) translate(560,60)">
		<path d="M300,200 h160 v-90 h-160z" fill="mediumturquoise"/>
		<path d="M345,200 h30 v-70 h-30z" fill="url(#amarelo)"/>
		<path d="M305,130 h30 v30 h-30z" fill="url(#amarelo1)"/>
		<path d="M385,130 h30 v30 h-30z" fill="url(#amarelo1)"/>
		<path d="M425,130 h30 v30 h-30z" fill="url(#amarelo1)"/>
		<path d="M440,100 v-45 h20 v45z" fill="url(#telhado)"/>
		<path d="M280,110 l50,-50 h100 l50,50z" fill="url(#telhado)"/>
	</g>
	<g id="arvore1" transform="scale(0.7)">
		<path d="M405,200 h20 v-30 h-20z" fill="brown"/>
		<path d="M380,170 l35,-120 l35,120z" fill="url(#verde)" filter="url(#filtro3)"/>
	</g> 
	<g id="arvore2" transform="scale(0.7)">
		<path d="M485,190 h20 v-30 h-20z" fill="brown"/>
		<path d="M460,160 l35,-140 l35,140z" fill="url(#verde)" filter="url(#filtro3)"/>
	</g> 
	<g id="moinho" transform="translate(600,70)" >
		<path d="M20,100 h50 v-80 h-50z" fill="#bc8f8f" filter="url(#filtro3)"/>
		<path d="M35,100 h20 v-30 h-20z" fill="url(#amarelo)" />
		<circle r="10" cx="45" cy="40" fill="url(#amarelo1)" />
		<path d="M10,20 h70 l-35,-30z" fill="url(#telhado)" filter="url(#filtro3)"/>
		<circle r="5" cx="45" cy="5" fill="#004953" />
		<g name="hastes">
			<g stroke="#004953" stroke-width="1">
				<path d="M45,5 h70" />
				<path d="M65,0 v10 M70,0 v10 M75,0 v10 M80,0 v10 M85,0 v10 M90,0 v10 M95,0 
				  v10 M100,0 v10 M105,0 v10 M110,0 v10 M115,0 v10 M65,0 h50 M65,10 h50"/>
			</g>
			<g stroke="#004953" stroke-width="1" transform="rotate(90,45,5)">
				<path d="M45,5 h70" />
				<path d="M65,0 v10 M70,0 v10 M75,0 v10 M80,0 v10 M85,0 v10 M90,0 v10 M95,0 
				  v10 M100,0 v10 M105,0 v10 M110,0 v10 M115,0 v10 M65,0 h50 M65,10 h50"/>
			</g>
			<g stroke="#004953" stroke-width="1" transform="rotate(180,45,5)">
				<path d="M45,5 h70" />
				<path d="M65,0 v10 M70,0 v10 M75,0 v10 M80,0 v10 M85,0 v10 M90,0 v10 M95,0 
				  v10 M100,0 v10 M105,0 v10 M110,0 v10 M115,0 v10 M65,0 h50 M65,10 h50"/>
			</g>
			<g stroke="#004953" stroke-width="1" transform="rotate(270,45,5)">
				<path d="M45,5 h70" />
				<path d="M65,0 v10 M70,0 v10 M75,0 v10 M80,0 v10 M85,0 v10 M90,0 v10 M95,0 
				  v10 M100,0 v10 M105,0 v10 M110,0 v10 M115,0 v10 M65,0 h50 M65,10 h50"/>
			</g>
			<animateTransform attributeType="xml" attributeName="transform" 
			  type="rotate" from="0,45,5" to="360,45,5" dur="10s" id="anima1" 
			  begin="1s" fill="freeze" repeatCount="indefinite"/>
		</g>
	</g>
	<path id="curva2" fill="none" stroke="none" d="M250,200 a550,550 0 0,1 600,190"/>
	<text font-weight="bold" stroke="linen" stroke-width="0.3" stroke-dasharray="250">
		<textpath xlink:href="#curva2">Meu Portfólio
			<animate attributeName="startOffset" from="-300" to="10" dur="5s" 
			  begin="0s" fill="freeze" />
		</textpath>
		<animate attributeName="fill" from="rgba(180,45,10,0.2)" to="rgba(180,45,100,1)" 
		  dur="5s" begin="0s" fill="freeze" />
	</text>
	<a href="http://www.facebook.com/pages/UFPR">
		<image xlink:href="imagens/facebook.png" x="860" y="140" 
		  height="50px" width="50px" filter="url(#filtro2)"/>
	</a>
	<a href="http://www.twitter.com/ufpr">
		<image xlink:href="imagens/twitter.png" x="930" y="140" 
		  height="50px" width="50px" filter="url(#filtro3)"/>
	</a>
	<a href="https://www.instagram.com/ufpr_oficial/">
		<image xlink:href="imagens/instagram.png" x="1000" y="140" 
		  height="50px" width="50px" filter="url(#filtro1)"/>
	</a>
	<a href="whatsapp://send?text=Meu portfolio - http://www.degraf.ufpr.br/docentes/paulo/webdesign/">
		<image xlink:href="imagens/whatsapp.png" x="1070" y="140" 
		  height="50px" width="50px" filter="url(#filtro1)"/>
	</a>
	<a href="mailto:seuemail@provedor.com.br">
		<image xlink:href="imagens/email.png" x="1130" y="140" 
		  height="50px" width="50px" filter="url(#filtro1)"/>
	</a>	
</svg>

voltar ao topo

📃 Atividade 10: HTML da galeria

Vamos ver a estrutura HTML para as imagens da galeria. Insira as imagens de projetos feitos em disciplinas que você quer colocar no portfólio que vamos criar nesta atividade. Coloque no mínimo 12 imagens para esta atividade.

  • Depois do fechamento da tag de menu, crie a tag class="galeria". Agrupe as miniaturas das imagens. Cada uma deve ter um link href="#img" com o mesmo nome que usaremos nas respectivas imagens ampliadas. Coloque os títulos das imagens no atributo title
  • Depois da última miniatura de imagem href="#img12", começamos a inserir as tags das imagens ampliadas. Serão 12 blocos com class="maior" e os ids correspondentes das miniaturas.
  • Colocamos os elementos na ordem: 1° - botão de imagem anterior (da primeira imagem, é a imagem 12); 2° - bloco de imagem com título usando tags <figure> e <figcaption>;
  • 3° - botão de próxima imagem (da primeira imagem, é a imagem 2); 4° - botão de fechar com href="#_". No bloco da imagem 2, a imagem anterior tem a referência para href="#img1" e de próxima imagem para href="#img3".
  • A última tag será class="rodape", colocada depois do fechamento da tag class="galeria" após a imagem ampliada href="#img12".
  • Trecho da estrutura HTML da galeria da Atividade 10: 
    <div class="galeria">
	<!-- miniaturas das fotos -->
	<a href="#img1" class="mini" title="Meu projeto 1">
		<img src="imagens/projeto1.jpg">
	</a>		
	<a href="#img2" class="mini" title="Meu projeto 2">
		<img src="imagens/projeto2.png">
	</a>		
	<!-- fotos ampliadas, escondidas pelo CSS -->
	<div class="maior" id="img1">
		<div class="bloco">
			<a href="#img12" class="botao anterior">&lt;</a>
			<figure>
				<img src="imagens/projeto1.jpg">
				<figcaption>Meu projeto 1</figcaption>
			</figure>
			<a href="#img2" class="botao proxima">&gt;</a>
			<a href="#_" class="botao fechar">x</a>
		</div>
	</div>
	<div class="maior" id="img2">
		<div class="bloco">
			<a href="#img1" class="botao anterior">&lt;</a>
			<figure>
				<img src="imagens/projeto2.png">
				<figcaption>Meu projeto 2</figcaption>
			</figure>
			<a href="#img3" class="botao proxima">&gt;</a>
			<a href="#_" class="botao fechar">x</a>
		</div>
	</div>
</div>

voltar ao topo

voltar ao topo

📃 Atividade 10: CSS da galeria

Vamos ver a estrutura CSS para a página de galeria.

  • Após os atributos gerais da página, colocamos as propriedades dos blocos: boxSite, barra, logo, rodape e galeria. Defina os alinhamentos, cores e margens destes blocos.
  • A classe .maior fica escondida, e só pode ser ativada quando a miniatura apontar para o id desta classe. Isso acontece quando a classe estiver no alvo: .maior:target. Defina margens e alinhamentos dos elementos desta classe.
  • A classe .bloco tem display flexbox para alinharmos os itens como já fizemos em outras atividades. Coloque efeitos na imagem ampliada e nos botões de imagem anterior e próxima imagem.
  • Podemos usar efeitos de opacidade, escala, rotação, translação ou cisalhamento, como já vimos em atividades anteriores. Escolha os efeitos e ajuste os valores para sua página.
  • Defina os atributos de cores e margens dos botões. Podemos usar cores com transparência RGBA.
  • Defina as margens, cores e efeitos das imagens em miniatura.
  • O efeito "desarrumado", com rotações está programado para parecer de 5 em 5 imagens. Ajuste valores para as imagens de sua página. Os atributos de menu são os mesmos que já usamos nas atividades anteriores.
  • As configurações para visualização da página em telas menores são as mesmas que já usamos em itens já conhecidos. As posições de botões de imagens ampliadas podem ser ajustadas para aparecerem abaixo das imagens, com flex-direction:column na classe .bloco.
  • Esta é a visualização da página com os atributos mostrados. Ajuste sua página de portfólio desta atividade. Ao clicar na imagem miniatura 9...
  • ... este é o resultado da ampliação da imagem do projeto 9.
  • 1ª parte da estrutura CSS da galeria da Atividade 10: 
    * {font-family: 'Hind', sans-serif;}
text {font-family: 'Hind'; font-size:2em;}
body {width: 95%; margin:auto;}
html,body {height:100%;}

.boxSite {box-shadow: 0 0 5px grey; margin-top:10px;}
.barra {display:flex; background: linear-gradient(to bottom, lightblue, white); font-size:15pt;}
.logo {flex:1;}
.rodape {display:flex; background: linear-gradient(to bottom, white,lightblue); 
  padding:15px; justify-content:center;}
svg {width:100%;}
.galeria {display:flex; flex-wrap:wrap; padding:10px; justify-content:center;}

.maior {display:none; opacity:0; z-index:2; width:100vw; height:100vh; text-align:center; 
  color:white; text-decoration:none; position: fixed; top:0; left:0; background:rgba(50,50,70,0.7);} 
.maior img {max-width:75vw; max-height:75vh; min-width:50vw; min-height:50vh; border-radius:10px;} 
.maior:target {outline:none; display:block; opacity:1;}
.bloco {height:100vh; display:flex; align-items:center; justify-content:center;}
.maior img {animation:Efeito1 1.2s;}
.anterior {animation:Efeito2 1.2s;}
.proxima {animation:Efeito3 1.2s;}
figcaption {text-align: left;}

@keyframes Efeito1 {
  0% {transform:scale(0.5); opacity:0;}
  100% {transform:scale(1); opacity:1;}
}
@keyframes Efeito2 {
  0% {transform:translate(500px,0); opacity:0;}
  100% {transform:translate(0,0); opacity:1;}
}
@keyframes Efeito3 {
  0% {transform:translate(-500px,0); opacity:0;}
  100% {transform:translate(0,0); opacity:1;}
}

.botao {color:#fafafa; font-size:2.5em; background-color:rgba(50,50,50,0.4); 
  padding:5px 20px 0 20px; border-radius:4px; text-decoration:none; cursor:pointer; z-index:3;}
.botao:hover {background-color:rgba(50,50,50,0.6);}
.fechar {position:absolute; right:2%; top:2%;}
.fechar:hover {background-color:rgba(50,50,50,0.6);}
  • 2ª parte da estrutura CSS da galeria da Atividade 10: 
    .mini {margin:20px 10px; padding:7px; text-align:center; text-decoration:none; 
  background:linear-gradient(-45deg,#FFF,#CCC); border-radius:5px; border: 0.1px solid #999;}
.mini img {width:150px; height:100px; margin:10px 10px -5px 10px; transition:0.4s; z-index:1;}
.mini img:hover {transform:scale(1.1);}
.mini:after {content:attr(title); display:block; font-size:1.1em;}

.mini:nth-child(5n+1){color:blue; transform:rotate(0deg);}
.mini:nth-child(5n+2){color:black; transform:rotate(5deg);}
.mini:nth-child(5n+3){color:orange; transform:rotate(-5deg);}
.mini:nth-child(5n+4){color:red; transform:rotate(5deg);}
.mini:nth-child(5n+5){color:green; transform:rotate(-10deg);}

label {padding:0px; flex:1; width:100%;}
.menu ul {margin:10px 0 10px 0; padding:8px; list-style-type:none; display:flex; 
  flex-direction:row; flex-wrap:wrap; justify-content:center;}
.menu li {padding: 0; min-width: 100px; text-align:center;}
.menu li:last-child {border-right:none;}
.menu li a {padding: 5px 15px 5px 15px; margin-left: 15px; color: white; text-decoration:none; 
  font-weight: bold; transition: 0.5s; border-radius:7px; text-shadow:1px 1px 2px black; 
background:linear-gradient(-40deg, rgba(0,0,130,0.15), rgba(0,0,130,0.1));}
.menu li a:hover {background:linear-gradient(-40deg, rgba(0,0,130,0.2), rgba(0,0,130,0.25));
  transition:0.5s;}

#checkbox1, .toggle {display:none;}

@media screen and (max-width: 800px) {
	body {width:100%;}
	.barra {flex-direction:column; align-items:stretch;}
	.toggle {display:block; width:95%; text-align:right; font-size:35px; cursor:pointer; 
	color:yellow;}
	#checkbox1:checked + label .menu li {visibility:visible;}
	#checkbox1:checked + label .menu {max-height:50vh; transition: 0.3s; opacity:1;}
	.menu ul{display:flex; flex-direction:column; align-content:flex-end;}
	.menu {width:100%; max-height:0; opacity:0; transition: 0.3s;}
	.menu li {visibility:hidden; border-right:none; padding:10px;}
	.maior img {width:95vw;}
	.anterior {position: absolute; left: 5%; bottom: 2%;}
	.proxima {position: absolute; right: 5%; bottom: 2%;}
	.botao {font-size:2em;}
	.bloco {flex-direction:column;}
}

voltar ao topo

voltar ao topo

📃 Atividade 10: galeria com divisões

Vamos ver a estrutura CSS para a página de galeria com divisões da tag details.

  • Podemos separar as galerias em sub-galerias. Coloque dentro da tag <details> a tag class="galeria" com as imagens escolhidas da primeira divisão.
  • Colocamos as miniaturas das imagens escolhidas, seguidas das respectivas imagens ampliadas. Neste caso, escolhi 4 imagens, com as 4 classes de imagens ampliadas.
  • Depois do bloco da 4ª imagem, fechamos a tag </details> para começar a próxima sub-galeria.
  • Escolha as imagens do próximo grupo da tag <details>.
  • Depois da última sub-galeria, não se esqueça de fechar a tag </details> para iniciar a tag de rodapé.
  • No CSS, basta inserir propriedades de cores, margens e bordas. Como são tags nativas, não precisam de "ponto" e nem de "hashtag" antes de seus nomes.
  • Este é o resultado com a primeira sub-galeria aberta.
  • Com as duas primeiras sub-galerias abertas.
  • E com as 3 sub-galerias abertas. Crie sua página de portfólio com a quantidade necessária de sub-galerias.
  • Trecho da estrutura CSS da galeria da Atividade 10 com divisões: 
    summary {font-size:1.3em; color:#004953; font-weight:bold; cursor:pointer; margin-bottom:12px; 
  text-shadow:1px 1px 1px skyblue; text-align:center;}
details {border:1px solid skyblue; border-bottom:none; padding:3px; border-radius:10px;}
    Trecho da estrutura HTML da galeria da Atividade 10 com divisões: 
    <details open><summary>Disciplina 1</summary>
<div class="galeria">
	MINIATURAS DAS IMAGENS DA DISCIPLINA 1
	IMAGENS AMPLIADAS DA DISCIPLINA 1
</div>
</details>
<details open><summary>Disciplina 2</summary>
<div class="galeria">
	MINIATURAS DAS IMAGENS DA DISCIPLINA 2
	IMAGENS AMPLIADAS DA DISCIPLINA 2
</div>
</details>

voltar ao topo

página desenvolvida por:

Paulo Henrique Siqueira

contato: paulohscwb@gmail.com

Licença Creative Commons
Fundamentos do Webdesign de Paulo Henrique Siqueira está licenciado com uma Licença Creative Commons Atribuição-NãoComercial-SemDerivações 4.0 Internacional.

Como citar este trabalho:

Siqueira, P.H., "Fundamentos do Webdesign". Disponível em: <https://paulohscwb.github.io/webdesign/>, Setembro de 2020.


DOI

Referências:

  1. W3Schools. HTML - The language for building web pages: https://www.w3schools.com/
  2. Origamid. Flex Container: https://origamid.com/projetos/flexbox-guia-completo/
  3. Soueidan, S. A Guide to SVG Animations (SMIL): https://css-tricks.com/guide-svg-animations-smil/
  4. Bracey, K. How to Use “animateTransform” for Inline SVG Animation: https://webdesign.tutsplus.com/tutorials/how-to-use-animatetransform-for-inline-svg-animation--cms-22296
  5. Adams, C., Bolton, J., Johnson, D., Smith, S., Snook, J. A arte e a ciência da CSS. Sitepoint, 2009
  6. Marcotte, E. Responsive Web Design. A Book Apart. 2011
  7. Mazza, L. HTML5 e CSS3: Domine a Web do futuro. Casa do código, 2012
  8. Kalbach, J. Design de navegação web: otimizando a experiência do usuário. Porto Alegre, RS: Bookman, 2009
  9. Mathis, L. Designed for Use: Usable Interfaces for Applications and the Web. The Pragmatic Bookshelf, 2011
  10. Powers, D. O guia essencial para dreamweaver CS4 com CSS, ajax e PHP. Ed. Alta Books, 2009
  11. Souders, S. High performance web sites: essential knowledge for frontend engineers. Sebastopol; Farnham: O'Reilly, 2007
  12. Zemel, T. Web design responsivo: páginas adaptáveis para todos os dispositivos. São Paulo, SP: Casa do Código, 2015