FTIN - Módulo de WebDesign Prof. Iran Pontes

IMPLEMENTANDO UM LAYOUT COM HTML/CSS FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA

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

Estrutura de Pastas Organize o seu projeto Organize o seu projeto Criar o arquivo “index.html” (arquivo principal do site, toda estrutura html) Criar o arquivo “index.html” (arquivo principal do site, toda estrutura html) Crie uma pasta para “Imagens” Crie uma pasta para “Imagens” Crie uma pasta o Style Sheet, “css” Crie uma pasta o Style Sheet, “css”

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

Layout

Como Exportar Imagens Selecionar a área do layout que quer exportar Selecionar a área do layout que quer exportar Fique atento ao “Fundo da Imagem” Fique atento ao “Fundo da Imagem” Utilizar a função do photoshop “File > Save for web e devices” no menu “File”. Utilizar a função do photoshop “File > Save for web e devices” no menu “File”. Atalho: Crtl + Alt + Shift + S Atalho: Crtl + Alt + Shift + S Salve a imagem na pasta “imagens” Salve a imagem na pasta “imagens”

Como Exportar Imagens CONFIRA MAIS NA AULA 03 CONFIRA MAIS NA AULA 03

Arquivos Transparentes Os formatos que aceitam imagens transparentes são:.gif,.png (8 ou 24 bits) 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. 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 Selecione a área da imagem Copie a seleção da imagem (crtl + c) Copie a seleção da imagem (crtl + c) Crie um arquivo novo (crtl + n) Crie um arquivo novo (crtl + n) Cole a imagem (crtl + v) Cole a imagem (crtl + v) Exporte a imagem (crtl + alt + shift + s) Exporte a imagem (crtl + alt + shift + s) Para manter seu projeto organizado, salve a imagem na pasta “imagens” 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. Abra o seu editor HTML e crie um novo arquivo HTML. A página principal do site, deve se chamar “index” 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 Crie um novo arquivo de Style Sheet e salve como screen.css Para manter seu projeto organizado, salve o arquivo dentro da pasta “CSS”. Para manter seu projeto organizado, salve o arquivo dentro da pasta “CSS”.

Mãos a obra! Implemente o layout (arquivo index.psd) 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/ h00 as 20h30

FERRAMENTAS DE APOIO Apostilas e vídeos do AVASIS; Fórum durante o módulo com resposta em até 06 horas úteis; do professor:

POR HOJE É SÓ! PRÓXIMA AULA: – ACI e Encerramento da aula SIGA-ME: – Facebook.com/iranpontes – Twitter.com/iranpontes –

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