1 / 21

Construção Web Design

Construção Web Design. Aula 01 – Apresentação e introdução html. Apresentação. Leandro Lago da Silva leandro@datacampo.com.br Formação Acadêmica: Integrado: Analise e Desenvolvimento de Sistemas - 2008; UEM: Mestrado em Ciência da Computação – Cursando. Formação Profissional:

olive
Download Presentation

Construção Web Design

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. Construção Web Design Aula 01 – Apresentação e introdução html

  2. Apresentação • Leandro Lago da Silva • leandro@datacampo.com.br • Formação Acadêmica: • Integrado: Analise e Desenvolvimento de Sistemas - 2008; • UEM: Mestrado em Ciência da Computação – Cursando. • Formação Profissional: • Datacampo: Desenvolvimento de sistemas web e desktop; • UTFPR: Professor de nível técnico e tecnológico.

  3. Alunos Nome? Cidade? Conhecimentos sobre desenvolvimento web?

  4. Conteúdo Programático • Photoshop: • Compreendendo a ferramenta; • Camadas; • Unidades de Medida; • Ajustes de cor, brilho, contraste...; • Ferramentas de seleção; • Filtros; • Efeitos.

  5. Conteúdo Programático • Fireworks: • Compreendendo a ferramenta; • Camadas; • Seleção; • Objetos (botões para menu, caixa de texto, etc...); • Efeitos; • Exportação.

  6. Conteúdo Programático • Flash: • Compreendendo a ferramenta; • Camadas; • Frames (quadros); • Animação de movimento; • Animação com filtros; • Exportação e aplicação no HTML.

  7. Conteúdo Programático • Dreamweaver: • Compreendendo a ferramenta; • Code e Design; • Estrutura do HTML • Tags; • CSS.

  8. Conteúdo Programático • Linguagem de Programação e Banco de Dados: • Projeto de websitecom intranet; • Linguagem: PHP; • Banco de dados: MySQL.

  9. Conteúdo Programático • Formato da aula: • Conteúdo prático; • Aula não modular; • Utilização de recursos específicos para web.

  10. Introdução • O que é a World Wide Web e porqueela é tão boa assim. • Navegadores da Web: o quesãoeles e alguns dos quaisvocêpoderáescolher. • O que é um servidor da Web e porquevocêprecisa de um.

  11. O que é World Wide Web • A Web é um sistema de informações de hipertexto. • Hipertexto: permitequevocêleia e navegue entre texto e informaçõesvisuais de uma forma não-linear, baseado no quedeseja saber emseguida. • Vantagem: Vocêcarregaem disco somente o quevocêdeseja ver. • Exemplo: Ajuda do Windows.

  12. O que é World Wide Web • A Web é gráfica e fácil de navegar. • Independe de Plataforma: • Computadorespessoais (Macintosh, PC); • SistemasOperacionais (Windows, Linux, MacOS); • DispositivosMóveis (Tablet, Smartphone); • Diferentesresoluções e tamanhos de monitores.

  13. Navegadores • Diversosnavegadoresdisponíveis: • Internet Explorer, Firefox, Chrome, Opera, Safari…; • Problemas: • Falta de padronização; • Usoindiscriminado de plugins.

  14. Navegadores Estatística no Mundo:

  15. Servidor Web • O servidor é responsávelporarmazenarosarquivosqueconstituem as páginas do site. • Estes arquivossãoescritosemumalinguagemchamada HTML (Hypertext Markup Language). • Com o HTML pode-se definir a estrutura e o conteúdo de um documento web. Além disso, pode-se criar links paraoutrasdocumentos, imagensououtrasmídias.

  16. Introdução ao HTML • HTML • HyperText Markup Language; • Linguagem de Marcação de Hipertexto. • O HTML descreve a estrutura de uma página da Web; • O HTML não descreve o layout da página; • Evitar o uso do HTML para definir formatação: • Tamanho e estilo de fonte; • Recuo; • Sublinhado, etc...

  17. HTML: Certo ou Errado • Projete páginas para que funcionem na maioria dos navegadores; • Deixe o conteúdo bem estruturado para que seja lido e compreendido; • Projete suas páginas com base na aparência que elas terão no seu navegador.

  18. Criando sua primeira página Tag sempre é escrita em letra minúscula. <html> <head> <title> Minha página HTML de Amostra </title> </head> <body> <h1> Esta é uma página HTML </h1> </body> </html>

  19. Prática • HTML • Vamos praticar e entender um pouco mais sobre HTML; • CSS • CSS: Folha de Estilo em Cascata; • Aplicaremos também algumas propriedades de estilo no CSS. • Abrindo o Dreamweaver...

  20. Propriedades CSS • Width; • Height; • Color; • Font; • Text-align; • Line-height; • Margin; • Border; • Padding; • Float.

  21. Atividade • Faça uma página com o titulo “Dog Show” conforme a imagem abaixo:

More Related