FTIN - Módulo de WebDesign
Prof. Iran Pontes
FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA
IMPLEMENTANDO UM LAYOUT
COM HTML/CSS
Etapas
• Layout
• Exportar Imagens
• Criar o arquivo HTML
• Criar o arquivo CSS
• Testar no Browser
Estrutura de Pastas
• Organize o seu projeto
• Criar o arquivo “index.html” (arquivo
principal do site, toda estrutura html)
• Crie uma pasta para “Imagens”
• Crie uma pasta o Style Sheet, “css”
Layout
• Avaliar a estrutura do site para
implementação do HTML.
• Avaliar quais fontes utilizadas no layout
• Avaliar as cores utilizadas
• Exportar as imagens
Layout
Como Exportar Imagens
• Selecionar a área do layout que quer
exportar
• Fique atento ao “Fundo da Imagem”
• Utilizar a função do photoshop “File >
Save for web e devices” no menu “File”.
• Atalho: Crtl + Alt + Shift + S
• Salve a imagem na pasta “imagens”
Como Exportar Imagens
• CONFIRA MAIS NA AULA 03
Arquivos Transparentes
• Os formatos que aceitam imagens
transparentes são: .gif, .png (8 ou 24
bits)
• Para exportar imagens com fundo
transparente, não podemos utilizar o
formato .JPG.
Passo-a-passo para exportar a
imagem
•
•
•
•
•
•
Selecione a área da imagem
Copie a seleção da imagem (crtl + c)
Crie um arquivo novo (crtl + n)
Cole a imagem (crtl + v)
Exporte a imagem (crtl + alt + shift + s)
Para manter seu projeto organizado,
salve a imagem na pasta “imagens”
Criando sua página
• Abra o seu editor HTML e crie um novo
arquivo HTML.
• A página principal do site, deve se
chamar “index”
Criando sua página
• Crie um novo arquivo de Style Sheet e
salve como screen.css
• Para manter seu projeto organizado,
salve o arquivo dentro da pasta “CSS”.
Mãos a obra!
• Implemente o layout (arquivo index.psd)
ATIVIDADE
• Baixe o arquivo index.psdno Avasis e
implemente o layout em html/css.
• Envie um arquivo .zip/.rar contendo
todos os arquivos do site (imagens, html
e css).
ATIVIDADE
ATIVIDADE
Prazo para postagem:
12/10/2013 até às 23h55
• Evite enviar a postagem de sua atividade no último dia.
Imprevistos podem ocorrer;
• Sua organização e pontualidade também estão sendo avaliadas;
•Não plagie. Caso constatado, a atividade receberá conceito negativo (NSF).
DÚVIDAS...
Acesse o Fórum de dúvidas e discussões
Diariamente.
Chat na Terça-Feira 08/10/2013
19h00 as 20h30
FERRAMENTAS DE APOIO
• Apostilas e vídeos do AVASIS;
• Fórum durante o módulo com resposta em até
06 horas úteis;
• Email do professor: [email protected]
POR HOJE É SÓ!
• PRÓXIMA AULA:
– ACI e Encerramento da aula
• SIGA-ME:
– Facebook.com/iranpontes
– Twitter.com/iranpontes
– www.designculture.com.br
POR HOJE É SÓ!
"Qual de vocês, se quiser construir uma torre,
primeiro não se assenta e calcula o preço, para ver se
tem dinheiro suficiente para completá-la?
Pois, se lançar o alicerce e não for capaz de terminála, todos os que a virem rirão dele,
dizendo: ‘Este homem começou a construir e não foi
capaz de terminar”.
Lucas 14:28-30