Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Aula 4 Fundamentos de Construção de Sites
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
Fundamentos de
Construção de Sites
Aula 4
ORGANIZANDO OS
ARQUIVOS
Organizando os arquivos
3
• Um site é formado por várias páginas HTML, arquivos
de imagens, scripts,...
• Colocar todos arquivos no mesmo diretório/pasta não é
recomendável
diretório
principal
imagens páginas css
Diretório principal em
princípio com uma
página: index.html
Organizando os arquivos
4
• Um site é formado por várias páginas HTML, arquivos
de imagens, scripts,...
• Colocar todos arquivos no mesmo diretório/pasta não é
recomendável
Em cada página indicar onde está o arquivo (extensão .css) com os estilos
<link rel="stylesheet" href=“css/geral.css">
diretório
principal
imagens páginas css
Organizando os arquivos
5
• No arquivo index.html
<!DOCTYPE html >
<html lang="pt">
<head>
<meta charset="utf-8" />
<title>Exemplo</title>
<link rel="stylesheet" href=“css/geral.css">
</head>
Organizando os arquivos
6
• Arquivo geral.css
body {
background-color: red;
color: yellow;
font-family: Verdana, Geneva, Arial, sans-serif;
}
IMAGENS
Inserindo Imagens
8
• Elemento <img>
<img src="ufsm.gif“>
• Elemento de linha: não gera quebras de linha
antes ou depois
• src pode ser uma URL
• O browser precisa carregar a imagem do
servidor
Inserindo Imagens
9
• Atributo alt
– Oferece uma alternativa para exibição da
imagem (i.e. descrição da imagem)
<img src="ufsm.gif" alt="logo da UFSM">
Inserindo Imagens
10
• Atributos width & height
– Dimensões da imagem (em pixels)
<img src="ufsm.gif" alt="logo da UFSM"
width="48" height="100">
Como o browser carrega as imagens depois do código
HTML, informar o tamanho evita que sejam feitos ajustes
posteriores na página
• É possível, mas não recomendável redimensionar o
tamanho original das imagens usando estes atributos
– O browser irá carregar a imagem toda, mesmo que eu indique
estas dimensões (depois faz o ajuste...)
Tipos de Imagens
11
• Dois grandes grupos:
– Raster ou mapa de bits (Bitmaps)
– Vetoriais
Tipos de Imagens
12
• Raster ou Mapa de bits/Bitmaps :
– Máquinas fotográficas digitais
– Imagem formada a partir de pontos (Pixels)
– Redimensionar é um problema.
– São maiores (maior número de bytes) que as
vetoriais
– Bitmap do Paint (Windows) é um tipo de
Bitmap
Tipos de Imagens
13
• Raster/Bitmaps - Formatos:
– JPEG - Joint Photographic Experts Group
– GIF - Graphics Interchange Format
– PNG - Portable Network Graphics
• Alternativa ao GIF
– TIFF - Tagged Image File Format
• Alguns navegadores não suportam...
Tipos de Imagens
14
• Vetoriais:
– Geradas a partir de formas geométricas:
• pontos + cálculos
– Redimensionamento é possível e sem perda
da qualidade!
• Os cálculos são refeitos
– Exemplo de uso: logomarcas
• Cartão, cartaz, outdoor, site...
Tipos de Imagens
15
• Vetorial - Formatos
– SVG - Scalable Vector Graphics Padrão para
gráficos vetoriais recomendado pela W3C
– CDR Formato proprietário da Corel Draw
– AI Formato proprietário do Adobe Illustrator
Tipos de Imagens
16
• Exemplo: SVG - Scalable Vector
Graphics
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="300" height="100" stroke="black"
stroke-width="2" fill="white" />
</svg>
Vetorial X Bitmap
17
Fonte: http://en.wikipedia.org/wiki/Vector_graphics
Tipos de Imagens
18
JPEG GIF
Fotografias Logo, imagens com
algumas (poucas) cores
sólidas
16 Milhões de cores 256 cores
Não permite
transparência
Permite transparência
Transparência
19
• Arquivos GIF e PNG podem ter áreas da
imagem transparentes
– Transparência: se uma imagem GIF/PNG
estiver em uma página Web com fundo
vermelho, as áreas “transparentes” da
imagem serão mostradas em vermelho
Transparência
20
• Adobe Photoshop
– Pago
– http://www.adobe.com/products/photoshop.html
• GIMP (GNU Image Manipulation Program)
– Livre
– Site: http://www.gimp.org/
• Exemplo
– Brasões da UFSM
Transparência
21
<!DOCTYPE html >
<html lang="pt">
<head>
<meta charset="utf-8" />
<title>Exemplo Imagem</title>
<link rel="stylesheet" href="geral.css">
</head>
<body>
<h1>Brasão</h1>
<img src="semtransp.gif" alt="logo da UFSM">
</body>
</html>
Transparência
22
Usando GIMP
23
24
Usando GIMP
25
Usando GIMP
26
Usando GIMP
27
Usando GIMP
Seleciono as
áreas que
devem ser
transparentes
“clicando” e
pressionando
shift
28
Usando GIMP
Pressiono a
tecla “DEL”
29
Usando GIMP
Sem e com transparência
30
Perda de qualidade
• Quanto maior é o número de pixels que uma
imagem possui maior é o espaço necessário
para seu armazenamento.
• Redimensionamento
– Reduzir o número de pixels de uma imagem
– Causa perda de qualidade da imagem
• Irreversível: não posso retornar a situação anterior
– Objetivo: favorecer a transmissão - não a edição de
imagem
31
Imagem muito grande!!!
32
Fonte: FREEMAN, E & FREEMAN, E. Use a Cabeça: HTML com CSS e XHTML. 2ª Edição. Rio de Janeiro: Alta Books, 2008.
Redimensionar
33
Redimensionar
34
Redimensionar
35
Usando imagens nos Hyperlinks
<p>
<a href="http://www.ufsm.br">
<img src="ufsm.gif"
alt="logo da UFSM"></a>
</p>
36
Usando Miniaturas/Thumbnails
37
• É comum usar miniaturas de imagens (versões
menores) em sites
• Produzidas por redimensionamento
HTML 5 - Novidades
<figure>
<img src="ufsm.gif"
alt="logo da UFSM">
<figcaption>Brasão da UFSM</figcaption>
</figure>
38
Slide 1
Slide 2
Organizando os arquivos
Organizando os arquivos
Organizando os arquivos
Organizando os arquivos
Slide 7
Inserindo Imagens
Inserindo Imagens
Inserindo Imagens
Tipos de Imagens
Tipos de Imagens
Tipos de Imagens
Tipos de Imagens
Tipos de Imagens
Tipos de Imagens
Vetorial X Bitmap
Tipos de Imagens
Transparência
Transparência
Transparência
Transparência
Usando GIMP
Slide 24
Slide 25
Slide 26
Slide 27
Slide 28
Slide 29
Sem e com transparência
Perda de qualidade
Imagem muito grande!!!
Redimensionar
Redimensionar
Redimensionar
Usando imagens nos Hyperlinks
Usando Miniaturas/Thumbnails
HTML 5 - Novidades
Continue navegando
Materiais relacionados
4 pág.
4 pág.
Perguntas relacionadas
Compartilhar