Download - Construção Web Design
![Page 1: Construção Web Design](https://reader036.vdocuments.site/reader036/viewer/2022062323/56815798550346895dc52f3b/html5/thumbnails/1.jpg)
AULA 01 – APRESENTAÇÃO E INTRODUÇÃO HTML
Construção Web Design
![Page 2: Construção Web Design](https://reader036.vdocuments.site/reader036/viewer/2022062323/56815798550346895dc52f3b/html5/thumbnails/2.jpg)
2
Apresentação
Leandro Lago da [email protected]
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.
![Page 3: Construção Web Design](https://reader036.vdocuments.site/reader036/viewer/2022062323/56815798550346895dc52f3b/html5/thumbnails/3.jpg)
3
Alunos
Nome?
Cidade?
Conhecimentos sobre desenvolvimento web?
![Page 4: Construção Web Design](https://reader036.vdocuments.site/reader036/viewer/2022062323/56815798550346895dc52f3b/html5/thumbnails/4.jpg)
4
Conteúdo Programático
Photoshop: Compreendendo a ferramenta; Camadas; Unidades de Medida; Ajustes de cor, brilho, contraste...; Ferramentas de seleção; Filtros; Efeitos.
![Page 5: Construção Web Design](https://reader036.vdocuments.site/reader036/viewer/2022062323/56815798550346895dc52f3b/html5/thumbnails/5.jpg)
5
Conteúdo Programático
Fireworks: Compreendendo a ferramenta; Camadas; Seleção; Objetos (botões para menu, caixa de texto, etc...); Efeitos; Exportação.
![Page 6: Construção Web Design](https://reader036.vdocuments.site/reader036/viewer/2022062323/56815798550346895dc52f3b/html5/thumbnails/6.jpg)
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.
![Page 7: Construção Web Design](https://reader036.vdocuments.site/reader036/viewer/2022062323/56815798550346895dc52f3b/html5/thumbnails/7.jpg)
7
Conteúdo Programático
Dreamweaver: Compreendendo a ferramenta; Code e Design; Estrutura do HTML Tags; CSS.
![Page 8: Construção Web Design](https://reader036.vdocuments.site/reader036/viewer/2022062323/56815798550346895dc52f3b/html5/thumbnails/8.jpg)
8
Conteúdo Programático
Linguagem de Programação e Banco de Dados: Projeto de website com intranet; Linguagem: PHP; Banco de dados: MySQL.
![Page 9: Construção Web Design](https://reader036.vdocuments.site/reader036/viewer/2022062323/56815798550346895dc52f3b/html5/thumbnails/9.jpg)
9
Conteúdo Programático
Formato da aula: Conteúdo prático; Aula não modular; Utilização de recursos específicos para web.
![Page 10: Construção Web Design](https://reader036.vdocuments.site/reader036/viewer/2022062323/56815798550346895dc52f3b/html5/thumbnails/10.jpg)
10
Introdução
O que é a World Wide Web e por que ela é tão boa assim.
Navegadores da Web: o que são eles e alguns dos quais você poderá escolher.
O que é um servidor da Web e por que você precisa de um.
![Page 11: Construção Web Design](https://reader036.vdocuments.site/reader036/viewer/2022062323/56815798550346895dc52f3b/html5/thumbnails/11.jpg)
11
O que é World Wide Web
A Web é um sistema de informações de hipertexto.
Hipertexto: permite que você leia e navegue entre texto e informações visuais de uma forma não-linear, baseado no que deseja saber em seguida.
Vantagem: Você carrega em disco somente o que você deseja ver.
Exemplo: Ajuda do Windows.
![Page 12: Construção Web Design](https://reader036.vdocuments.site/reader036/viewer/2022062323/56815798550346895dc52f3b/html5/thumbnails/12.jpg)
12
O que é World Wide Web
A Web é gráfica e fácil de navegar.Independe de Plataforma:
Computadores pessoais (Macintosh, PC);
Sistemas Operacionais (Windows, Linux, MacOS);
Dispositivos Móveis (Tablet, Smartphone);
Diferentes resoluções e tamanhos de monitores.
![Page 13: Construção Web Design](https://reader036.vdocuments.site/reader036/viewer/2022062323/56815798550346895dc52f3b/html5/thumbnails/13.jpg)
13
Navegadores
Diversos navegadores disponíveis: Internet Explorer, Firefox, Chrome, Opera, Safari…;
Problemas: Falta de padronização; Uso indiscriminado de plugins.
![Page 14: Construção Web Design](https://reader036.vdocuments.site/reader036/viewer/2022062323/56815798550346895dc52f3b/html5/thumbnails/14.jpg)
14
Navegadores
Estatística no Mundo:
2012 Internet Explorer
Firefox
Chrome
Safari
Opera
March 18.9 % 36.3 % 37.3 % 4.4
% 2.3 %
February 19.5 % 36.6
% 36.3 % 4.5 % 2.3 %
January 20.1 % 37.1 % 35.3 % 4.3
% 2.4 %
![Page 15: Construção Web Design](https://reader036.vdocuments.site/reader036/viewer/2022062323/56815798550346895dc52f3b/html5/thumbnails/15.jpg)
15
Servidor Web
O servidor é responsável por armazenar os arquivos que constituem as páginas do site.
Estes arquivos são escritos em uma linguagem chamada 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 para outras documentos, imagens ou outras mídias.
![Page 16: Construção Web Design](https://reader036.vdocuments.site/reader036/viewer/2022062323/56815798550346895dc52f3b/html5/thumbnails/16.jpg)
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...
![Page 17: Construção Web Design](https://reader036.vdocuments.site/reader036/viewer/2022062323/56815798550346895dc52f3b/html5/thumbnails/17.jpg)
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.
![Page 18: Construção Web Design](https://reader036.vdocuments.site/reader036/viewer/2022062323/56815798550346895dc52f3b/html5/thumbnails/18.jpg)
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>
![Page 19: Construção Web Design](https://reader036.vdocuments.site/reader036/viewer/2022062323/56815798550346895dc52f3b/html5/thumbnails/19.jpg)
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...
![Page 20: Construção Web Design](https://reader036.vdocuments.site/reader036/viewer/2022062323/56815798550346895dc52f3b/html5/thumbnails/20.jpg)
20
Propriedades CSS
Width;Height;Color;Font;Text-align;Line-height;Margin;Border;Padding;Float.
![Page 21: Construção Web Design](https://reader036.vdocuments.site/reader036/viewer/2022062323/56815798550346895dc52f3b/html5/thumbnails/21.jpg)
21
Atividade
Faça uma página com o titulo “Dog Show” conforme a imagem abaixo: