Introdução ao Web Design
Prof° Ms. Claudio Benossi
Aula 02
Design Gráfico
Projeto web com HTML
• Nosso objetivo é desenvolver um
projeto web – um Site;
Projeto web com HTML
• Ferramentas necessárias
Projeto web com HTML
• Usando o Dreamweaver
Projeto web com HTML
• Usando o Dreamweaver
Projeto web com HTML
• Tipo do Documento – HTML 5
Projeto web com HTML
• Estrutura básica do HTML
Projeto web com HTML
• Entendendo a Estrutura
Projeto web com HTML
• Formas
de
Dreamweaver
visualização
do
Projeto web com HTML
• Exemplo clássico: Olá Mundo!
Projeto web com HTML
• Salvar o Documento
Projeto web com HTML
• Estrutura dos arquivos
Projeto web com HTML
• Visualizar o resultado
Projeto web com HTML
• Usando o Google Chrome
Projeto web com HTML
• Editando o Title
Projeto web com HTML
• Resultado
Projeto web com HTML
• Inserindo elementos
Projeto web com HTML
• Inserindo Títulos - <h1>, <h2> ... <h6>
Projeto web com HTML
• O Resultado
Projeto web com HTML
• Inserir outro Título
Projeto web com HTML
• Resultado diferente - Tamanho
Projeto web com HTML
• Alterando a cor
Projeto web com HTML
• Código RGB das Cores – “#F0000”
= Vermelho ou “red”
Projeto web com HTML
• O resultado
Projeto web com HTML
• CSS – folha de Estilo
Projeto web com HTML
• Alterando características Visuais do
<h1>
Projeto web com HTML
• Facilidades da Ferramenta
Projeto web com HTML
• Alterando a Font
Projeto web com HTML
• Encerrar cada linha com -
;
Projeto web com HTML
• Alterar a Cor e o Tamanho
Projeto web com HTML
• O Resultado
Projeto web com HTML
• Inserir efeito
Projeto web com HTML
• 2px 2px 2px Black;
Projeto web com HTML
• O Resultado
Projeto web com HTML
• Novo Título – Efeito Comportamental
Projeto web com HTML
• Resultado
Projeto web com HTML
• Vamos iniciar nosso Projeto:
• 1ª Etapa – Planejamento!
Projeto web com HTML
• Estrutura de Diretórios e Arquivos
Projeto web com HTML
• Inicio
Projeto web com HTML
• Resultado – Falta muito...
Projeto web com HTML
• Estrutura básica do HTML 5
Projeto web com HTML
• O Fechamento das Tags
Projeto web com HTML
• O resultado continua o mesmo ...
Projeto web com HTML
• O Idioma – Mecanismos de Busca
<html lang=“pt-br”>
Projeto web com HTML
• A Descrição do Site – Mecanismos de
Busca
Projeto web com HTML
• Palavras Chaves – Mecanismos de
Busca
Projeto web com HTML
• O Autor
Projeto web com HTML
• O resultado Visual é o mesmo
Projeto web com HTML
• Inserirndo <div>
Projeto web com HTML
• O Fechamento da <div>
Projeto web com HTML
• Inserindo formatação - Títulos
Projeto web com HTML
• Começamos a perceber as mudanças
Projeto web com HTML
• Agrupar - <hgroup> .... </hgroup>
Semantica
Projeto web com HTML
• Ajustar a página ...
Projeto web com HTML
• Inserindo um elemento no caso Imagem
Projeto web com HTML
• Selecionar a imagem
Projeto web com HTML
• O Resultado – Agora tomando forma
Projeto web com HTML
• Organização
Projeto web com HTML
• <header> - Cabeçalho
Projeto web com HTML
• Facilitando o desenvolvimento
Design Digital
• Dúvidas?