Embed Size (px)
DESCRIPTION
Construção Web Design. Aula 01 – Apresentação e introdução html. Apresentação. Leandro Lago da Silva [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: - PowerPoint PPT Presentation
Citation preview
AULA 01 – APRESENTAÇÃO E INTRODUÇÃO HTML
Construção Web Design
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.
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 website com 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 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.
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.
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.
13
Navegadores
Diversos navegadores disponíveis: Internet Explorer, Firefox, Chrome, Opera, Safari…;
Problemas: Falta de padronização; Uso indiscriminado de plugins.
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 %
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.
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:
