![Page 1: FTIN - Módulo de WebDesign Prof. Iran Pontes. IMPLEMENTANDO UM LAYOUT COM HTML/CSS FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA](https://reader036.vdocuments.site/reader036/viewer/2022070311/552fc14d497959413d8e2bd2/html5/thumbnails/1.jpg)
FTIN - Módulo de WebDesign
Prof. Iran Pontes
![Page 2: FTIN - Módulo de WebDesign Prof. Iran Pontes. IMPLEMENTANDO UM LAYOUT COM HTML/CSS FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA](https://reader036.vdocuments.site/reader036/viewer/2022070311/552fc14d497959413d8e2bd2/html5/thumbnails/2.jpg)
IMPLEMENTANDO UM LAYOUT COM HTML/CSS
FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA
![Page 3: FTIN - Módulo de WebDesign Prof. Iran Pontes. IMPLEMENTANDO UM LAYOUT COM HTML/CSS FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA](https://reader036.vdocuments.site/reader036/viewer/2022070311/552fc14d497959413d8e2bd2/html5/thumbnails/3.jpg)
Etapas
• Layout• Exportar Imagens• Criar o arquivo HTML• Criar o arquivo CSS• Testar no Browser
![Page 4: FTIN - Módulo de WebDesign Prof. Iran Pontes. IMPLEMENTANDO UM LAYOUT COM HTML/CSS FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA](https://reader036.vdocuments.site/reader036/viewer/2022070311/552fc14d497959413d8e2bd2/html5/thumbnails/4.jpg)
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”
![Page 5: FTIN - Módulo de WebDesign Prof. Iran Pontes. IMPLEMENTANDO UM LAYOUT COM HTML/CSS FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA](https://reader036.vdocuments.site/reader036/viewer/2022070311/552fc14d497959413d8e2bd2/html5/thumbnails/5.jpg)
Layout
• Avaliar a estrutura do site para implementação do HTML.
• Avaliar quais fontes utilizadas no layout• Avaliar as cores utilizadas• Exportar as imagens
![Page 6: FTIN - Módulo de WebDesign Prof. Iran Pontes. IMPLEMENTANDO UM LAYOUT COM HTML/CSS FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA](https://reader036.vdocuments.site/reader036/viewer/2022070311/552fc14d497959413d8e2bd2/html5/thumbnails/6.jpg)
Layout
![Page 7: FTIN - Módulo de WebDesign Prof. Iran Pontes. IMPLEMENTANDO UM LAYOUT COM HTML/CSS FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA](https://reader036.vdocuments.site/reader036/viewer/2022070311/552fc14d497959413d8e2bd2/html5/thumbnails/7.jpg)
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”
![Page 8: FTIN - Módulo de WebDesign Prof. Iran Pontes. IMPLEMENTANDO UM LAYOUT COM HTML/CSS FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA](https://reader036.vdocuments.site/reader036/viewer/2022070311/552fc14d497959413d8e2bd2/html5/thumbnails/8.jpg)
Como Exportar Imagens
• CONFIRA MAIS NA AULA 03
![Page 9: FTIN - Módulo de WebDesign Prof. Iran Pontes. IMPLEMENTANDO UM LAYOUT COM HTML/CSS FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA](https://reader036.vdocuments.site/reader036/viewer/2022070311/552fc14d497959413d8e2bd2/html5/thumbnails/9.jpg)
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.
![Page 10: FTIN - Módulo de WebDesign Prof. Iran Pontes. IMPLEMENTANDO UM LAYOUT COM HTML/CSS FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA](https://reader036.vdocuments.site/reader036/viewer/2022070311/552fc14d497959413d8e2bd2/html5/thumbnails/10.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”
![Page 11: FTIN - Módulo de WebDesign Prof. Iran Pontes. IMPLEMENTANDO UM LAYOUT COM HTML/CSS FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA](https://reader036.vdocuments.site/reader036/viewer/2022070311/552fc14d497959413d8e2bd2/html5/thumbnails/11.jpg)
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”
![Page 12: FTIN - Módulo de WebDesign Prof. Iran Pontes. IMPLEMENTANDO UM LAYOUT COM HTML/CSS FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA](https://reader036.vdocuments.site/reader036/viewer/2022070311/552fc14d497959413d8e2bd2/html5/thumbnails/12.jpg)
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”.
![Page 13: FTIN - Módulo de WebDesign Prof. Iran Pontes. IMPLEMENTANDO UM LAYOUT COM HTML/CSS FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA](https://reader036.vdocuments.site/reader036/viewer/2022070311/552fc14d497959413d8e2bd2/html5/thumbnails/13.jpg)
Mãos a obra!
• Implemente o layout (arquivo index.psd)
![Page 14: FTIN - Módulo de WebDesign Prof. Iran Pontes. IMPLEMENTANDO UM LAYOUT COM HTML/CSS FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA](https://reader036.vdocuments.site/reader036/viewer/2022070311/552fc14d497959413d8e2bd2/html5/thumbnails/14.jpg)
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).
![Page 15: FTIN - Módulo de WebDesign Prof. Iran Pontes. IMPLEMENTANDO UM LAYOUT COM HTML/CSS FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA](https://reader036.vdocuments.site/reader036/viewer/2022070311/552fc14d497959413d8e2bd2/html5/thumbnails/15.jpg)
ATIVIDADE
![Page 16: FTIN - Módulo de WebDesign Prof. Iran Pontes. IMPLEMENTANDO UM LAYOUT COM HTML/CSS FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA](https://reader036.vdocuments.site/reader036/viewer/2022070311/552fc14d497959413d8e2bd2/html5/thumbnails/16.jpg)
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).
![Page 17: FTIN - Módulo de WebDesign Prof. Iran Pontes. IMPLEMENTANDO UM LAYOUT COM HTML/CSS FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA](https://reader036.vdocuments.site/reader036/viewer/2022070311/552fc14d497959413d8e2bd2/html5/thumbnails/17.jpg)
DÚVIDAS...
Acesse o Fórum de dúvidas e discussões Diariamente.
Chat na Terça-Feira 08/10/201319h00 as 20h30
![Page 18: FTIN - Módulo de WebDesign Prof. Iran Pontes. IMPLEMENTANDO UM LAYOUT COM HTML/CSS FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA](https://reader036.vdocuments.site/reader036/viewer/2022070311/552fc14d497959413d8e2bd2/html5/thumbnails/18.jpg)
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: [email protected]
![Page 19: FTIN - Módulo de WebDesign Prof. Iran Pontes. IMPLEMENTANDO UM LAYOUT COM HTML/CSS FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA](https://reader036.vdocuments.site/reader036/viewer/2022070311/552fc14d497959413d8e2bd2/html5/thumbnails/19.jpg)
POR HOJE É SÓ!
• PRÓXIMA AULA:– ACI e Encerramento da aula
• SIGA-ME:– Facebook.com/iranpontes– Twitter.com/iranpontes– www.designculture.com.br
![Page 20: FTIN - Módulo de WebDesign Prof. Iran Pontes. IMPLEMENTANDO UM LAYOUT COM HTML/CSS FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA](https://reader036.vdocuments.site/reader036/viewer/2022070311/552fc14d497959413d8e2bd2/html5/thumbnails/20.jpg)
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