1 / 20

FTIN - Módulo de WebDesign

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

colum
Download Presentation

FTIN - Módulo de WebDesign

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. FTIN - Módulo de WebDesign Prof. Iran Pontes

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

  3. Etapas • Layout • ExportarImagens • Criaroarquivo HTML • Criaroarquivo 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 paraimplementação do HTML. • Avaliarquaisfontesutilizadas 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 • CONFIRA MAIS NA AULA 03

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

  14. ATIVIDADE • Baixe o arquivo index.psdnoAvasis 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: 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).

  17. DÚVIDAS... • Acesse o Fórum de dúvidas e discussões Diariamente. • Chat na Terça-Feira 08/10/2013 19h00 as 20h30

  18. 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: iranpontes@hotmail.com

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

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

More Related