AutorDaniel LimaDaniel Lima iniciou sua carreira na área de desenvolvimento desde muito jovem, antes mesmo de ingressar no curso de Sistemas de Informações da Faculdade de Ciências Sociais e Tecnológicas - FACITEC. É desenvolvedor Apple, Web, Flash, Php e Java, fascinado com o desenvolvimento de aplicativos para Smartphones e Tablets. Na atualidade é especialista no desenvolvimento de

aplicativos mobile.

RevisãoNT Editora e Figuramundo

Projeto GráficoNT Editora

Editoração EletrônicaNT Editora e Figuramundo

CapaNT Editora e Figuramundo

NT Educação, uma empresa do Grupo NTSCS Q2 - Bl. D - Salas 307 e 308 - Ed. Oscar NiemeyerCEP 70316-900 - Brasília - DFFone: (61) 3421-9200sac@grupont.com.brwww.nteditora.com.br e www.grupont.com.br

Criação de Websites com Dreamweaver. / NT Editora.

-- Brasília: 2013. 50p. : il. ; 21,0 X 29,7 cm.

ISBN - 978-85-68004-10-4

1. Criação de Websites com Dreamweaver CS4.

Copyright © 2014 por NT editora.Nenhuma parte desta publicação poderá ser reproduzida por

qualquer modo ou meio, seja eletrônico, fotográfico, mecânico ou outros, sem autorização prévia e escrita da NT Editora.

LEGENDA

ÍCONES

Prezado(a) aluno(a),Ao longo dos seus estudos, você encontrará alguns ícones na coluna lateral do material didático. A presença desses ícones o ajudará a compreender melhor o conteúdo abor-dado e também como fazer os exercícios propostos. Conheça os ícones logo abaixo:

Saiba MaisEste ícone apontará para informações complementares sobre o assunto que você está estudando. Serão curiosidades, temas afins ou exemplos do cotidi-ano que o ajudarão a fixar o conteúdo estudado.

ImportanteO conteúdo indicado com este ícone tem bastante importância para seus es-tudos. Leia com atenção e, tendo dúvida, pergunte ao seu tutor.

DicasEste ícone apresenta dicas de estudo.

Exercícios Toda vez que você vir o ícone de exercícios, responda às questões propostas.

Exercícios Ao final das lições, você deverá responder aos exercícios no seu livro.

Bons estudos!

4 NT Editora

Sumário

1. UM MUNDO DE POSSIBILIDADES ............................................................................. 71.1 HTML e XHTML ......................................................................................................................................... 71.2 CSS ................................................................................................................................................................ 81.3 JavaScript ................................................................................................................................................... 81.4 Imagens ...................................................................................................................................................... 91.5 Conteúdos em Flash ............................................................................................................................... 91.6 Planejando um website ......................................................................................................................101.7 Navegadores web .................................................................................................................................10

2. CONHECENDO O DREAMWEAVER E ENTENDENDO SEU ESPAÇO DE TRABALHO ....142.1 Iniciar o programa .................................................................................................................................142.2 Interfaces e painéis ...............................................................................................................................142.3 Barras de ferramentas ..........................................................................................................................16

3. CRIANDO SEU PRIMEIRO SITE COM O DREAMWEAVER CS4 ................................ 193.1 Configurar site e arquivos do projeto ............................................................................................193.2 Criando um novo documento ..........................................................................................................203.3 Propriedades da página ......................................................................................................................203.4 Salvando o documento .......................................................................................................................213.5 A ajuda do Dreamweaver CS4 ..........................................................................................................21

4. ELEMENTOS DE LAYOUT .......................................................................................... 234.1 Inserindo e editando tabelas ............................................................................................................234.2 Inserindo imagens ................................................................................................................................234.3 Edição de imagens no Dreamweaver CS4 ....................................................................................234.4 Inserindo texto .......................................................................................................................................244.5 Recursos de layout do Photoshop ..................................................................................................244.6 Recursos de layout do Fireworks .....................................................................................................244.7 Frame e IFrame .......................................................................................................................................254.8 Usando o navegador de código e a barra de ferramenta de arquivos relacionados ....25

5Criação de Websites com Dreamweaver

5. ADICIONANDO MELHORIAS AO SITE ..................................................................... 285.1 Criando menu com imagens .............................................................................................................285.2 Menus com imagens de sobreposição ..........................................................................................285.3 Adicionar menu spry ............................................................................................................................295.4 Inserir conteúdos em Flash ................................................................................................................29

6. TRABALHANDO COM CSS, JAVASCRIPT E AJAX .................................................... 326.1 Aplicando práticas CSS ........................................................................................................................326.2 Camada flutuante ..................................................................................................................................326.3 Outros elementos Spry .......................................................................................................................32

7. LINKS, FORMULÁRIOS E WIDGETS EM AJAX ......................................................... 357.1 Criando links ...........................................................................................................................................357.2 Inserindo formulários ..........................................................................................................................357.3 Widget de calendário ...........................................................................................................................36

8. FINALIZANDO E REVISANDO O SITE ....................................................................... 388.1 Verificação de compatibilidade ........................................................................................................388.2 Procedimentos finais em um projeto de site ..............................................................................388.3 Localização e substituição de informação ...................................................................................38

9. PUBLICANDO O SITE ................................................................................................. 419.1 Domínio ou URL .....................................................................................................................................419.2 Servidores e hospedagem .................................................................................................................419.3 Publicando o site com o Dreamweaver .........................................................................................42

10. TEMPLATES, FÓRUNS E BLOGS .............................................................................. 4510.1 Templates ...............................................................................................................................................4510.2 Blogs ........................................................................................................................................................4610.3 Fóruns .....................................................................................................................................................4710.4 Twitter .....................................................................................................................................................48

7Criação de Websites com DreamweaverSUMÁRIO

Repr

oduç

ão p

roib

ida.

Cop

yrig

ht ©

NT

Edito

ra. T

odos

os

dire

itos

rese

rvad

os.

1.1 HTML e XHTMLHTML é uma linguagem de marcação utilizada para produzir pá-

ginas da web. O código HTML é interpretado pelos navegadores, que assim conseguem mostrar o conteúdo na tela. A criação do código HTML é bastante simples, não há a necessidade de programas complexos,pode-se usar um simples editor de texto e em se-guida salvar o documento com a extensão HTML e pronto. Se o código estiver correto, já pode ser corretamente exibido em um navegador web. O HTML é composto de elementos de mar-cação, denominados TAGS, que começam com uma instrução dentro dos sinais de menor e maior. Exemplo: <html>. A TAG é encerrada de forma parecida, diferenciada apenas por uma barra depois do sinal de menor. Exemplo: </html>.

Já o XHTML pode ser considerado uma evolução do HTML, pois se trata de uma combinação das TAGS HTML com regras de marcação do XML. Neste curso utilizaremos a versão 1.0 – XHTML – Transitional. Entenda melhor como funciona um documento HTML.

1. A tag <html> abre o código HTML, as outras Tags de marcação que utilizaremos devem ser colocadas depois de sua abertura e antes de seu fechamento.

2. A tag <head> é a cabeça do código HTML. Se a marcação fosse em português seria: <ca-beça>. Dentro desta tag, temos a tag <title>, que é onde definimos o título de nossa página, o que escrevermos aqui aparecerá na barra de título do navegador web.

O título da página é encerrado com a tag </title> e em seguida a cabeça do HTML também é encerrada com a tag </head>.

3. A tag <body> é o corpo de nosso documento HTML. É aqui que fica o conteúdo da página. Observe que dentro do corpo há uma tag <p>, que serve para criar um parágrafo na página. A tag <p> está apresentada com a propriedade align e definida para center, isso faz com que o texto de dentro do parágrafo fique alinhado ao centro. Dentro do parágrafo, há ainda a tag <strong>, tudo o que estiver dentro desta tag aparecerá em negrito, como você pode observar na tela do navegador abaixo:

4. Ao concluir o conteúdo interno do site, devemos fe-char o corpo do HTML, utilizando a tag </body>, mas como podemos observar pela imagem da mulher, ainda falta algo.

5. Se você imaginou que faltava fechar a tag <html>, acertou. Isto encerra nossa página de exemplo.

1. UM MUNDO DE POSSIBILIDADES

TAGS: Breve instrução que possui uma marca de início e outra de fim. Ex: <body> e </body>.

XML: Linguagem padronizada de marcação genérica.

8 NT Editora SUMÁRIO

Repr

oduç

ão p

roib

ida.

Cop

yrig

ht ©

NT

Edito

ra. T

odos

os

dire

itos

rese

rvad

os.

1.2 CSS

O que é CSS?

Você provavelmente já ouviu falar em CSS, mas o que isso signifi-ca exatamente? CSS é a abreviatura de Cascading Style Sheets (Folha de Estilos em Cascata);

Pra que serve o CSS?

CSS é uma linguagem para estilos, com ela você pode definir o layout de documentos HTML. Por exemplo: CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicio-namentos e muito mais, tudo isso você verá no decorrer do curso.

Qual a vantagem de usar CSS?

Simples: você pode facilmente alterar todo o layout de um grande site sem precisar ficar alte-rando página por página. Com CSS, você tem maior controle do layout e realiza alterações bastante precisas. Atualmente existem técnicas altamente avançadas e sofisticadas de criação de sites, utilizan-do este recurso.

O código CSS:

É parecido com o HTML, bastante simples de entender o seu funcionamento. Veja abaixo um modelo de código CSS.

Seletor {propriedade: valor}

Seletor: aqui você diz em qual tag HTML será aplicada a propriedade. Ex: body (corpo) ou p (parágrafo);

Propriedade: a propriedade da tag a ser alterada. Pode ser, por exemplo, a cor de fundo (background-color);

Valor: o valor da propriedade a ser alterada. Poderia ser a cor de fundo que você deseja. Exem-plo: vermelha (#FF0000).

1.3 JavaScript

JavaScript é uma das linguagens de script mais populares na internet, e funciona nos principais navegadores, como Internet Explorer, Firefox, Chrome, Opera e Safari.

Para que serve JavaScript? Veja suas principais funções e características:

JavaScript foi concebido para adicionar interatividade a páginas HTML. JavaScript é diferente de Java. Java é uma linguagem de programação, enquanto JavaScript é uma linguagem de script.

9Criação de Websites com DreamweaverSUMÁRIO

Repr

oduç

ão p

roib

ida.

Cop

yrig

ht ©

NT

Edito

ra. T

odos

os

dire

itos

rese

rvad

os.

JavaScript é uma linguagem interpretada (significa que pode ser executada sem uma compi-lação preliminar).

Todos podem usar o JavaScript sem comprar uma licença.

1.4 ImagensOs formatos de imagens mais utilizados na web são JPEG, PNG e GIF. E são estes os formatos

que utilizaremos no decorrer do curso. Conheça as principais características de cada formato:

1. JPEG – Joint Photographic Experts Group: é um formato bastante utilizado para exibição de imagens fotográficas, pois oferece uma boa redução do tamanho do arquivo, além de não ser facilmente perceptível a perda de qualidade na imagem.

2. GIF – Graphics Interchange Format: um formato de imagens originado em 1987, utilizado para exibição de imagens fixas e animadas, que são conhecidas como Gifs animados. Um GIF pos-sui apenas 8 Bits de cores, o que pode causar perda de qualidade em imagens complexas.

3. PNG: Formato Livre recomendado pela W3C. Oferece melhor qualidade, maior compressão e uso de transparência.

1.5 Conteúdos em FlashA utilização de Flash pode trazer diversas vantagens para um site. Vejamos as principais vanta-

gens presentes neste tipo de conteúdo:

Animações:

Com o Flash, é possível criar e disponibilizar animações para diversos fins: humorísticos, instru-cionais, dentre outros.

Recursos de vídeo e áudio:

Um recurso interessante do Flash é a possibilidade de trabalhar com vídeos e sons, o que pos-sibilita a disponibilização de clipes musicais, vídeos de curta duração e até mesmo filmes em longa metragem. Um bom exemplo da aplicação deste recurso é o mundialmente conhecido “Youtube”.

Jogos:

Se desejar, você também pode disponibilizar jogos em seu site. Jogos em Flash não precisam ser instalados, basta carregar a página e começar a jogar.

10 NT Editora SUMÁRIO

Repr

oduç

ão p

roib

ida.

Cop

yrig

ht ©

NT

Edito

ra. T

odos

os

dire

itos

rese

rvad

os.

Elementos 3D:

O Flash CS4 possibilitou nativamente o trabalho com 3D, as futuras versões do Flash prometem explorar a fundo este recurso.

1.6 Planejando um websiteDefinição de responsabilidades:

Na fase inicial de um projeto de site, deve ser decidido quem deverá tomar as decisões finais sobre os aspectos do site, caso contrário, você poderá enfrentar muitos problemas de conflito de interesses.

Público-alvo:

Estude cuidadosamente o público-alvo do site, isso deve influenciar nas decisões de design para que a mensagem possa chegar bem ao grupo em particular.

Descrição de requisitos funcionais:

É importante criar um bom documento que descreva as funções do site, mas atenção, este do-cumento deve dizer o que o site faz, e não como ele faz.

Preocupação com o usuário:

Você deve especificar de que forma o usuário encontrará a informação no site. Possibilidade de crescimento:

A estrutura do site deve facilitar as futuras mudanças, que poderão servir para o seu crescimen-to. Os grandes problemas:

Cuidado, seu site pode acabar enfrentando al-guns problemas de usabilidade, como: desor-ganização, violação de convenções, pouca informação, redundância, irrelevância, ina-dequação e inconsistência.

1.7 Navegadores webOs principais navegadores web utilizados atual-

mente são: Internet Explorer, Firefox, Opera, Safari e Google Chrome.

Internet Explorer

O navegador mais utilizado no mundo vem integrado ao Windows desde a versão Windows 95 OSR2. A partir da versão 7, o Microsoft Internet Explorer teve seu nome al-terado para Windows Internet Explorer. A versão 7 marcou uma drástica mudança na aparência do navegador e a ver-são 8 ofereceu alguns novos recursos, tais como:

11Criação de Websites com DreamweaverSUMÁRIO

Repr

oduç

ão p

roib

ida.

Cop

yrig

ht ©

NT

Edito

ra. T

odos

os

dire

itos

rese

rvad

os.

• Aceleradores;

• Navegação em modo privativo;

• Pesquisa instantânea;

• Novas preferências de segurança;

• Recuperação automática de falhas;

• Mozilla Firefox.

Navegador multiplataforma desenvolvido pela Fundação Mozilla. O principal objetivo do Fi-refox é ser um navegador leve, seguro, intuitivo e altamente extensível. Destacou-se como alternativa ao Internet Explorer e reativou a disputa entre os navegadores mais utilizados após o marco de 100 milhões de downloads em 19 de outubro de 2005. Um elemento bastante útil deste navegador é a existência de extensões, que possibilitam aos usuários acesso a funcionalidades como: gerenciadores de mensagens, ferramentas para desenvolvedores, gerenciadores de downloads, e muitos outros.

Google Chrome

Navegador de código-fonte aberto, desenvolvido pela Google. A primeira versão beta foi lan-çada em 2 de dezembro de 2008. A primeira versão do Google Chrome passou nos testes Acid1 e Acid2, mas não no Acid3. No entanto, ele teve uma pontuação de 78%, que é superior, tanto ao In-ternet Explorer 7 quanto ao Firefox 3, mas inferior ao Opera. Em 21 de maio de 2009, foi lançada a versão final 2.0, com muitos recursos e mais de 300 erros corrigidos.

Opera

Desenvolvido pela companhia Opera Software, este navegador permite exibir sites, man-dar e receber mensagens de e-mail, gerir contatos, bate-papo online de IRC, baixar arquivos via BitTorrent e ler feeds.

O Opera pode ser utilizado no Microsoft Windows, Mac OS X, GNU/Linux, FreeBSD e Solaris. Este navegador é também bastante difundido em dispositivos móveis como celulares, smartphones, e aparelhos PDA. Versões do Opera estão disponíveis para aparelhos, usando os sistemas operacio-nais Symbian, Windows Mobile e Java ME. Também é o único navegador disponível para os video-games Nintendo DS e Wii.

Safari

Navegador padrão dos sistemas operacionais da Apple, também possui uma versão para Win-dows, possui uma interface bastante simples, o que na verdade é uma característica da maioria dos softwares desta empresa. As principais funções do Safari são:

• Navegação em abas;

• Bloqueador de pop-ups;

• Baixador de arquivos;

• Leitor de feeds.

Acid1, Acid2 e Acid3: Teste de compati-bilidade com padrões web.

IRC: Protocolo de comunica-ção bastante utilizado na internet. Utilizado basicamente como bate-papo e troca de arquivos.

BitTorrent: Protocolo de rede que permite a descarga de arquivos, geralmente indexados em websites.

Feeds: Distri-buidores de informação, geralmente provenientes de sites de no-tícias e blogs escolhidos pelo usuário.

Pop-ups: Uma página extra que se abre no navegador ao visitar uma página ou clicar em um link. Geralmente é utilizado para propaganda.

12 NT Editora SUMÁRIO

Repr

oduç

ão p

roib

ida.

Cop

yrig

ht ©

NT

Edito

ra. T

odos

os

dire

itos

rese

rvad

os.

Parabéns, você fina-lizou esta lição!

Agora responda às questões ao lado.

Exercícios

Questão 01 – Selecione a opção em que as Tags HTML estão corretas:

a) <html></html>, (p)(/p),<body><(body)>;

b) <html></html>, <p></p>,<body></body>;

c) <html/><html>, <p/><p>,<body/><body>;

d) <html></html\>, <p></p\>,<body></body\>.

Questão 02 – Selecione a opção em que as Tags HTML estão corretas:

a) <html></html>, ,,,,,,,,,(p)(/p),<body><(body)>;

b) <html></html>, <p></p>,<body></body>;

c) <html/><html>, <p/><p>,<body/><body>;

d) <html></html\>, <p></p\>,<body></body\>.

Questão 03 – Selecione a opção que define corretamente a funcionalidade do CSS:

a) pode ser utilizado para criar sites sem a utilização de HTML ou qualquer outra linguagem;

b) não serve para alterar layout de um site;

c) controla somente cores, não é possível alterar fontes e outros elementos.

d) é uma linguagem para estilos, com ela você pode definir o layout de documentos HTML.

Questão 04 – Lembra-se da mulher giganta? Supondo que seja possível aplicar CSS em uma pessoa, selecione abaixo o código que colocaria uma máscara verde em nossa amiga.

a) quadril{tamanho:5km}.

b) pernas{comprimento:3cm}.

c) rosto{disfarce:máscara cor: verde}.

d) rosto{disfarce:bigode cor:laranja}.

Questão 05 – Selecione abaixo a opção que melhor descreve a funcionalidade do JavaScript:

a) definir layout, fontes e cores de páginas da internet;

b) adicionar interatividade a páginas da internet;

c) criar músicas, vídeos e jogos;

d) reduzir as possibilidades de navegação de um site.