SlideShare uma empresa Scribd logo
1 de 31
PROJETO DREAMWEAVER Professora Élida Tavares
O QUE É UM SITE? ,[object Object]
O QUE É NECESSÁRIO PARA CONSTRUIR UM SITE? ,[object Object],[object Object],[object Object]
DICAS PARA CONSTRUÇÃO DE UM SITE ,[object Object],[object Object],[object Object],[object Object],[object Object]
ORGANIZAR A ESTRUTURA DE NAVEGAÇÃO ,[object Object],[object Object],[object Object],[object Object],[object Object]
ORGANIZAR A ESTRUTURA DE NAVEGAÇÃO ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
ORGANIZAR A ESTRUTURA DE NAVEGAÇÃO ,[object Object],[object Object],[object Object]
ORGANIZAR A ESTRUTURA DE NAVEGAÇÃO ,[object Object],[object Object],[object Object]
TIPOS DE SITES ,[object Object],[object Object]
PLANEJAMENTO ,[object Object],[object Object],[object Object],[object Object]
E-COMMERCE ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
DREAMWEAVER Software para edição de páginas.
SITE PLANETA COMPUTADORES ,[object Object],[object Object]
ESTRUTURANDO O SITE ,[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],ESTRUTURANDO O SITE
A ESTRUTURA DAS PASTAS FICARÁ ASSIM:
CRIANDO UM NOVO SITE ,[object Object],Em  Nome do site  digite o nome do site (Planeta computadores)  Pasta raiz local  selecione a pasta onde ficará armazenado o site, nesse caso deve ser selecionada a pasta Home. A outra na Pasta Imagens A opção  HTTP Address  permite a checagem dos links do site. Deve-se digitar o endereço final (URL) que o site terá na Web. Clique no botão  OK
[object Object]
AS IMAGENS ,[object Object]
CRIANDO UMA NOVA PÁGINA EM BRANCO ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],.
DEFININDO AS PROPRIEDADES DA PÁGINA  ,[object Object],Título (título da página); Fundo (cor de fundo); Texto (cor do texto): Links (cor dos links); Links visitados (cor dos links visitados); Links ativos (cor do link no momento em que ele é ativado); Margem superior; Clique no botão  OK
TABELAS  ,[object Object],[object Object]
PROPRIEDADES DE TABELA ,[object Object]
INSERINDO MAIS LINHAS OU COLUNAS NA TABELA ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
DIVIDINDO OU MESCLANDO CÉLULAS, LINHAS OU COLUNAS Para dividir: Selecione a célula, nas propriedades selecione as opções  Célula  >  Divide as células em linhas ou colunas Para mesclar:   Selecione as células Célula/Linha  >  Mesclar as células selecionadas utilizando extensões
INSERINDO IMAGENS  ,[object Object],[object Object],[object Object],[object Object],[object Object]
MAPEAMENTO DE IMAGENS  ,[object Object],[object Object],[object Object]
Desenhe um retângulo em volta da palavra Home  (1)  e no campo Link do inspetor de propriedades digite o endereço da página que será acessada: index.html  (2) 1 2
PROCEDIMENTO PARA OS MENU Empresa  e no campo Link do inspetor de propriedades digite o endereço da página que será acessada: ../empresa/empresa.html Produtos   ../produtos/produtos.html Obs.:  O mapeamento é válido apenas para uma página, seria necessário repetir esse procedimento nas demais páginas do site. Para mapear a imagem uma única vez, e fazer isso valer para todas as páginas, pode-se utilizar os Modelos, como veremos a seguir
MODELOS ,[object Object],[object Object],Selecione o texto ou a célula que deseja tornar editável, nesse caso escolha a segunda linha da tabela na qual estamos trabalhando
DEFINIDO REGIÕES EDITÁVEIS Inserir  >  Objetos de Modelos  >  Região Editável  ou através do Painel Inserir escolha a guia Modelos, clique no terceiro botão  Região Editável . Ao aparecer uma mensagem avisando que o documento será convertido em modelo, clique em  OK . Em seguida preencha o nome da região:  conteudo .Clique no botão  OK Salvaremos essa página como um modelo que será utilizado para as demais páginas do site. Na barra de menus selecione  Arquivo  /  Salvar como Modelo , salve com o nome de  bioderm_modelo . O arquivo de modelo é um arquivo com extensão .DWT e ficará armazenado na pasta Templates.

Mais conteúdo relacionado

Mais procurados

Html+para+iniciantes
Html+para+iniciantesHtml+para+iniciantes
Html+para+iniciantesbradock1964
 
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBHTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBPeslPinguim
 
Iniciando em html5 seleção gustavo
Iniciando em html5   seleção gustavoIniciando em html5   seleção gustavo
Iniciando em html5 seleção gustavoGustavo Passos
 
Webpages
WebpagesWebpages
WebpagesEMSNEWS
 
Aula 1 programação web i
Aula 1   programação web iAula 1   programação web i
Aula 1 programação web iEliene Resende
 
Manual curso php
Manual curso phpManual curso php
Manual curso phpalexinaa
 

Mais procurados (10)

Criação de Sites web Tutorial
Criação de Sites web TutorialCriação de Sites web Tutorial
Criação de Sites web Tutorial
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Html+para+iniciantes
Html+para+iniciantesHtml+para+iniciantes
Html+para+iniciantes
 
Html
HtmlHtml
Html
 
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBHTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
 
Iniciando em html5 seleção gustavo
Iniciando em html5   seleção gustavoIniciando em html5   seleção gustavo
Iniciando em html5 seleção gustavo
 
Webpages
WebpagesWebpages
Webpages
 
Manual google docs
Manual google docsManual google docs
Manual google docs
 
Aula 1 programação web i
Aula 1   programação web iAula 1   programação web i
Aula 1 programação web i
 
Manual curso php
Manual curso phpManual curso php
Manual curso php
 

Semelhante a Projeto dreamweaver aula 3 a 5

Semelhante a Projeto dreamweaver aula 3 a 5 (20)

Dreamweaver aula 1
Dreamweaver aula 1Dreamweaver aula 1
Dreamweaver aula 1
 
Google
Google Google
Google
 
Guia BáSico 3
Guia BáSico 3Guia BáSico 3
Guia BáSico 3
 
Webpages
WebpagesWebpages
Webpages
 
Adobe Muse - Guia de referencia
Adobe Muse - Guia de referenciaAdobe Muse - Guia de referencia
Adobe Muse - Guia de referencia
 
Tele cine mozer
Tele cine mozerTele cine mozer
Tele cine mozer
 
Tutorial webnode
Tutorial webnodeTutorial webnode
Tutorial webnode
 
Blog educacional
Blog educacionalBlog educacional
Blog educacional
 
Passo a passo_blog educacional
Passo a passo_blog educacionalPasso a passo_blog educacional
Passo a passo_blog educacional
 
Tutorial webnode
Tutorial webnodeTutorial webnode
Tutorial webnode
 
Tutorial webnode
Tutorial webnodeTutorial webnode
Tutorial webnode
 
Blogger rapido
Blogger rapidoBlogger rapido
Blogger rapido
 
Curso de front page 2000
Curso de front page 2000Curso de front page 2000
Curso de front page 2000
 
Tutorial webnode
Tutorial webnodeTutorial webnode
Tutorial webnode
 
Tutorial webnode
Tutorial webnodeTutorial webnode
Tutorial webnode
 
Tutorial webnode
Tutorial webnodeTutorial webnode
Tutorial webnode
 
Curso Ponto de Encontro - Aula 1
Curso Ponto de Encontro - Aula 1Curso Ponto de Encontro - Aula 1
Curso Ponto de Encontro - Aula 1
 
Projeto website
Projeto websiteProjeto website
Projeto website
 
Fundamentosdowebdesign
FundamentosdowebdesignFundamentosdowebdesign
Fundamentosdowebdesign
 
Senac Bauru - Marketing na Web - Aulas 3, 4 e 5
Senac Bauru - Marketing na Web - Aulas 3, 4 e 5Senac Bauru - Marketing na Web - Aulas 3, 4 e 5
Senac Bauru - Marketing na Web - Aulas 3, 4 e 5
 

Mais de Élida Tavares

Mais de Élida Tavares (20)

Motivacao
MotivacaoMotivacao
Motivacao
 
Planilha aula 12
Planilha aula 12Planilha aula 12
Planilha aula 12
 
Planilha aula 10
Planilha aula 10Planilha aula 10
Planilha aula 10
 
Planilha aula 1
Planilha aula 1Planilha aula 1
Planilha aula 1
 
Planilha aula 9
Planilha aula 9Planilha aula 9
Planilha aula 9
 
Planilha aula 8
Planilha aula 8Planilha aula 8
Planilha aula 8
 
Planilha aula 7
Planilha aula 7Planilha aula 7
Planilha aula 7
 
Planilha aula 6
Planilha aula 6Planilha aula 6
Planilha aula 6
 
Planilha aula 5
Planilha aula 5Planilha aula 5
Planilha aula 5
 
Planilha aula 4
Planilha aula 4Planilha aula 4
Planilha aula 4
 
Planilha aula 3
Planilha aula 3Planilha aula 3
Planilha aula 3
 
Planilha aula 2
Planilha aula 2Planilha aula 2
Planilha aula 2
 
Como fazer apresentacoes interessantes_e_produtivas
Como fazer apresentacoes interessantes_e_produtivasComo fazer apresentacoes interessantes_e_produtivas
Como fazer apresentacoes interessantes_e_produtivas
 
Powerpoint 2007
Powerpoint 2007Powerpoint 2007
Powerpoint 2007
 
Aula 13 broffice
Aula 13 brofficeAula 13 broffice
Aula 13 broffice
 
Aula 11 como apresentar
Aula 11 como apresentarAula 11 como apresentar
Aula 11 como apresentar
 
Aula 7 botoes de ação 2003
Aula 7 botoes de ação 2003Aula 7 botoes de ação 2003
Aula 7 botoes de ação 2003
 
Apresentações gráficas 05
Apresentações gráficas 05Apresentações gráficas 05
Apresentações gráficas 05
 
Apresentações gráficas 05
Apresentações gráficas 05Apresentações gráficas 05
Apresentações gráficas 05
 
Aula 3 desenhos e figuras
Aula 3 desenhos e figurasAula 3 desenhos e figuras
Aula 3 desenhos e figuras
 

Projeto dreamweaver aula 3 a 5

  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12. DREAMWEAVER Software para edição de páginas.
  • 13.
  • 14.
  • 15.
  • 16. A ESTRUTURA DAS PASTAS FICARÁ ASSIM:
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25. DIVIDINDO OU MESCLANDO CÉLULAS, LINHAS OU COLUNAS Para dividir: Selecione a célula, nas propriedades selecione as opções Célula > Divide as células em linhas ou colunas Para mesclar: Selecione as células Célula/Linha > Mesclar as células selecionadas utilizando extensões
  • 26.
  • 27.
  • 28. Desenhe um retângulo em volta da palavra Home (1) e no campo Link do inspetor de propriedades digite o endereço da página que será acessada: index.html (2) 1 2
  • 29. PROCEDIMENTO PARA OS MENU Empresa e no campo Link do inspetor de propriedades digite o endereço da página que será acessada: ../empresa/empresa.html Produtos ../produtos/produtos.html Obs.: O mapeamento é válido apenas para uma página, seria necessário repetir esse procedimento nas demais páginas do site. Para mapear a imagem uma única vez, e fazer isso valer para todas as páginas, pode-se utilizar os Modelos, como veremos a seguir
  • 30.
  • 31. DEFINIDO REGIÕES EDITÁVEIS Inserir > Objetos de Modelos > Região Editável ou através do Painel Inserir escolha a guia Modelos, clique no terceiro botão Região Editável . Ao aparecer uma mensagem avisando que o documento será convertido em modelo, clique em OK . Em seguida preencha o nome da região: conteudo .Clique no botão OK Salvaremos essa página como um modelo que será utilizado para as demais páginas do site. Na barra de menus selecione Arquivo / Salvar como Modelo , salve com o nome de bioderm_modelo . O arquivo de modelo é um arquivo com extensão .DWT e ficará armazenado na pasta Templates.