A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

FTIN - Módulo de WebDesign Prof. Ítalo Araújo. IMPLEMENTANDO UM LAYOUT COM HTML/CSS FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.

Apresentações semelhantes


Apresentação em tema: "FTIN - Módulo de WebDesign Prof. Ítalo Araújo. IMPLEMENTANDO UM LAYOUT COM HTML/CSS FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA."— Transcrição da apresentação:

1 FTIN - Módulo de WebDesign Prof. Ítalo Araújo

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

3 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

4 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

5 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

6 Layout

7 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

8 Como Exportar Imagens

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

10 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

11 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

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

13 Mãos a obra! Implemente o layout (arquivo home.psd) Implemente o layout (arquivo home.psd)

14 ATIVIDADE Baixe o arquivo HOME.PSD no Avasis e implemente o layout em html/css. 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). 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 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; Apostilas e vídeos do AVASIS; Fórum durante o módulo, com resposta em até 6 horas úteis; Fórum durante o módulo, com resposta em até 6 horas úteis; do professor: 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: Na próxima aula: – Criando Layouts para Web Siga-me: Siga-me: – – Facebook.com/italoj.araujo – Twitter.com/italoj


Carregar ppt "FTIN - Módulo de WebDesign Prof. Ítalo Araújo. IMPLEMENTANDO UM LAYOUT COM HTML/CSS FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA."

Apresentações semelhantes


Anúncios Google