FTIN - Módulo de WebDesign

Apresentação em tema: "FTIN - Módulo de WebDesign"— Transcrição da apresentação:

1 FTIN - Módulo de WebDesign
Prof. Ítalo Araújo

2 Implementando um layout com html/css
FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA Implementando um layout com html/css

3 Etapas Layout Exportar Imagens Criar o arquivo HTML
Criar o arquivo CSS Testar no Browser

4 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”

5 Layout Avaliar a estrutura do site para implementação do HTML.
Avaliar quais fontes utilizadas no layout Avaliar as cores utilizadas Exportar as imagens

6 Layout

7 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”

8 Como Exportar Imagens

9 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.

10 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”

11 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”

12 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”.

13 Mãos a obra! Implemente o layout (arquivo home.psd)

14 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).

15 ATIVIDADE

16 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

17 Ferramentas de apoio Apostilas e vídeos do AVASIS;
Fórum durante o módulo, com resposta em até 6 horas úteis; do professor:

18 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

19 Por hoje é só! Na próxima aula: Siga-me: Criando Layouts para Web
Facebook.com/italoj.araujo Twitter.com/italoj