FTIN - Módulo de WebDesign

Prof. Ítalo Araújo

IMPLEMENTANDO UM LAYOUT COM HTML/CSS

FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA

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

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 home.psd)

ATIVIDADE

• Baixe o arquivo HOME.PSD no 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: 04/08/12 até às 23:55h

EVITE DEIXAR A POSTAGEM DE SUA ATIVIDADE PARA O ÚLTIMO DIA.

FAZENDO ISSO, IMPREVISTOS NÃO VÃO LHE PREJUDICAR.

* LEMBRANDO QUE SUA ORGANIZAÇÃO TAMBÉM ESTA

SENDO AVALIADA

FERRAMENTAS DE APOIO

Apostilas e vídeos do AVASIS; Fórum durante o módulo, com resposta

em até 6 horas úteis; E-mail do professor:

DÚVIDAS...

Acesse o Fórum de dúvidas e discussões Diariamente

Chat na Terça-Feira: dia 31/07/12 no horário: das 19:00 às 20:30 h

Por hoje é só!

• Na próxima aula:– Criando Layouts para Web

• Siga-me:– www.italoaraujo.com– Facebook.com/italoj.araujo– Twitter.com/italoj