190 likes | 255 Views
FTIN - Módulo de WebDesign. Prof. Ítalo Araújo. 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
E N D
FTIN - Módulo de WebDesign Prof. Ítalo Araújo
FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA Implementando um layout com html/css
Etapas • Layout • ExportarImagens • Criaroarquivo HTML • Criaroarquivo 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 paraimplementação do HTML. • Avaliarquaisfontesutilizadas no layout • Avaliar as cores utilizadas • Exportar as imagens
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”
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 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