Aula 09 10 e 11 imagens e edição de imagens

325 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
325
No SlideShare
0
A partir de incorporações
0
Número de incorporações
7
Ações
Compartilhamentos
0
Downloads
4
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aula 09 10 e 11 imagens e edição de imagens

  1. 1. Imagens (X)HTML Professor Jolvani Aula 09, 10 e 11
  2. 2. Imagens (X)HTML  Bem vindos a mais uma aula de xhtml, nesta aula vamos trabalhar com imagens  Então vamos preparar duas imagens para executarmos as atividades...  Copiamos e renomeamos a última aula, aula05 para aula06.html  Então vamos inserir uma imagem... Usa-se a tag <img>, esta é uma tag in-line, não dá quebra de linha  Se usarmos uma tag onde não encontramos a imagem ...  Então usamos o atributo src... + o atributo obrigatório alt... Será apresentado se a imagem não for encontrada...
  3. 3. Imagens (X)HTML  Porém a imagem ficou muito grande, mas nos temos como redimensionar a imagem...  Outra maneira é usar o atributo style... (do css) com a propriedade width... Definido a largura em pixels  Ao definir a largura em pixel ela fica fixa, quando minimizamos ou maximizamos o browser ela fica do mesmo tamanho, mas se definíssemos a propriedade width 50% por exemplo a imagem seria redimensionada quando max – min o browser ..... Teste.  Eu gostaria que essa imagem fosse um parágrafo... Podendo fazer o alinhamento ao centro. Usando align este também esta depreciado... Então, agora usaremos o atributo style...  <p> </p> é um box (uma caixa)
  4. 4. Imagens (X)HTML  Cabe uma revisão para alterar o código align para style ....  Faça isso em todo o código...  Colocando a outra imagem... Já sabemos qual a tag usar e os atributos obrigatório: <img src=“” alt=“” /> lembre-se de dar um espaço antes de fechar a tag...  A imagem ficou abaixo do texto, porém,  Gostaria que ficasse alinhada a direita...
  5. 5. Imagens (X)HTML  Como fazer isso align=“right” e redimensione a imagem...  Encontre outros atributos  Verifique os atributos depreciados no w3scools.
  6. 6. Imagens (X)HTML – Aula 10  Edição de Imagens  Performance das Imagens  Photoshop – ferramenta profissional para edição de imagens  Criamos um novo arquivo html – aula07.html...  As tags img funcionam de forma diferente... Primeiro o browser carrega o arquivo html, formata o arquivo e quando ele chega na tag img ele faz uma nova requisição ao servidor solicitando as imagens...  E a cada imagem ele faz uma requisição ao servidor... Enquanto ele não encontrar a imagem ele fica requisitando....  Após conseguir carregar ele para de “atualizar”, fazer a requisição...
  7. 7. Imagens (X)HTML – Aula 10  Em caso de carregarmos imagens de extensões diferentes, imagens com ou sem fundo, ou fundo transparente Ex: JPG e GIF é que:  O JPG funciona melhor com imagens continuas como fotografias, e os GIFs funcionam melhores para imagens com algumas cores sólidas imagens com linhas, cliparts ou pequenos texto de imagens, logos ... Imagens menos “complexas”  Em JPG vc pode representar uma imagem com 16 milhões de cores, e o GIF com até 256 cores diferentes  O JPG é um formato com perdas.... Para poder reduzir o tamanho do arquivo algumas informações são perdidas... O GIF também reduz o arquivo mas não perde nenhuma informação... Formato sem perdas  O JPG não suporta transparências enquanto o GIF pode-se definir cor de fundo e transparência...  Então se eu alterar a cor de fundo observamos o que acontece com as imagens...
  8. 8. Imagens (X)HTML – Aula 10  Carregar a imagem, colocar cor de fundo e verificar a diferença...  Com as imagens transparentes conseguimos colocar cor atrás da imagem...  No nosso projeto html temos que tomar o cuidado com o tamanho das imagens....  A imagem usada possui 1280 x 720 e estamos definido ela com uma dimensão de 450px. Com 136 kb, (geralmente são maiores). Quando nos fazemos uma requisição ao servidor ele vai carregar esse arquivo. E nossa ave com 300 x 211 e 80 kb....
  9. 9. Imagens (X)HTML – Aula 10  Como as imagens são maiores então o tamanho da página fica maior. Demora + para carregar. Então seria necessário usar um editor de imagem para deixa-las + “enxutas”  Para isso possuímos vários editores, tais como:  Photoshop  Gimp  Image Magic  Todos gratuitos...
  10. 10. Imagens (X)HTML – Aula 11  Então vamos editar nossas imagens para deixar o projeto mais pequeno... Pode ser no photoshop...  No nosso caso a imagem deve ter 450px (pixels)  Alterar o nível de qualidade
  11. 11. Imagens (X)HTML – Aula 11  Salvar como figura da web (Gif x JPG)  Vamos editar num editor que vc possui - paint Observe que a imagem já está reduzida...
  12. 12. Imagens (X)HTML – Aula 11  No Paint - Redimensionar  Altere as dimensões para 450 pixel e  A outra imagem para 150 px.  No paint a transparência foi perdida...
  13. 13. Imagens (X)HTML – Aula 11  Fazer ajustes finos ...  Endereço relativo...  Copiamos a imagem para outra pasta e testamos...  Altere o endereço e saia um nível ...  Mais um nível = ../../img/fotos.jpg; no mesmo nível  E se ela estivesse fora do meu computador, na web por exemplo...  Ai temos o endereço absoluto...  Encontre uma imagem de um determinado site e teste...  Finalizamos então com endereço relativo X absoluto.
  14. 14. Imagens (X)HTML – Aula 11  http://www.photoshoponline.com.br/editor/  http://fotografiatotal.com/os-6-melhores-editores-de-fotografia-gratis
  15. 15. Próxima Aula: Listas

×