1 / 19

FTIN - Módulo de WebDesign

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

landis
Télécharger la présentation

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. Ítalo Araújo

  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

  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; • E-mail 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: • Criando Layouts para Web • Siga-me: • www.italoaraujo.com • Facebook.com/italoj.araujo • Twitter.com/italoj

More Related