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?
Download
![[ A MARCA ]](http://s1.livrozilla.com/store/data/000069664_1-08c9d391595c8742bfe104f70ad88ecc-260x520.png)
