Cursowebdesigner Codificacao

CODIFICAÇÃO
Todos os Direitos Reservados ao Apostilando.com, proibido a reprodução total
ou parcial deste material, com sanções previstas em lei.
ÍNDICE
ÍNDICE .....................................................................................................................................2
INTRODUÇÃO..........................................................................................................................8
Nomenclatura ................................................................................................. 8
Sobre as linguagens de codificação e programação para WEB ..................... 9
HTML .......................................................................................................... 9
XHTML ........................................................................................................ 9
Javascript .................................................................................................. 11
XML........................................................................................................... 12
AJAX ......................................................................................................... 12
HTML .....................................................................................................................................14
Como se cria um documento HTML ............................................................. 14
Tags ou comandos HTML ......................................................................... 15
Estrutura Básica ........................................................................................... 16
Comentários.............................................................................................. 17
Parágrafos e quebras de linha...................................................................... 18
O Comando <P> ....................................................................................... 18
Alinhando parágrafos ................................................................................ 18
O Comando <BR>..................................................................................... 19
O Comando <HR>..................................................................................... 19
Alterando o formato de linha de separação............................................... 19
USANDO IMAGENS COMO LINHAS SEPARADORAS ........................... 19
DIV ............................................................................................................ 20
blockquote................................................................................................. 20
Estilos de Texto e Fonte ............................................................................... 20
Alterando o tamanho da fonte ................................................................... 21
Size ........................................................................................................... 21
Face .......................................................................................................... 21
Color.......................................................................................................... 21
Cabeçalhos................................................................................................... 22
Alinhando cabeçalhos ............................................................................... 22
Listas ............................................................................................................ 23
Listas Ordenadas ...................................................................................... 23
Listas Não ordenadas ............................................................................... 23
Lista de Definição...................................................................................... 24
Imagens ........................................................................................................ 25
urls e links..................................................................................................... 27
URL ........................................................................................................... 27
Criando um Link com Arquivos Locais ...................................................... 28
Usando uma Imagem como Hiperlink ....................................................... 28
Vinculando Arquivos de outros diretórios .................................................. 28
CRIANDO LINKS PARA SEÇÕES DE UMA PÁGINA .............................. 28
2
Criando uma Âncora ................................................................................. 29
Enviando EMail diretamente da Página HTML ........................................ 29
Definindo Destinos .................................................................................... 29
TABELAS...................................................................................................... 29
Elementos básicos de tabelas ...................................................................... 30
Parâmetros................................................................................................ 31
Parâmetros do elemento <TABLE>........................................................... 31
Parâmetros do elemento <TR> ................................................................. 32
Parâmetros dos Elementos <TD> e <TH> ................................................ 32
Frames.......................................................................................................... 34
Como funcionam os frames ...................................................................... 34
O Comando Document.............................................................................. 35
O atributo <FRAMESPACING=valor>....................................................... 36
O atributo <frameborder=1/0>................................................................... 36
O comando <frame src>............................................................................ 37
Ajustando as margens internas do Frame................................................. 38
Barras de Rolagem e Redimensionamento dos Frames........................... 38
Interligação de frames............................................................................... 38
Criando a Estrutura dos Frames ............................................................... 39
Criando o conteúdo do Menu .................................................................... 39
IFRAME ........................................................................................................ 41
META............................................................................................................ 42
Informações específicas............................................................................ 42
Variações do comando meta..................................................................... 43
Multimídia ..................................................................................................... 43
Consideração no uso de multimídia .......................................................... 44
Folhas de estilo............................................................................................. 44
Versões da CSS........................................................................................ 44
CSS 1...................................................................................................... 44
CSS – Position (CSSP)............................................................................ 44
CSS – 2..................................................................................................... 45
CSS – 3..................................................................................................... 45
Regras da CSS ......................................................................................... 45
Incluindo CSS no Documento ................................................................... 46
Incluindo a CSS em uma página WEB...................................................... 46
Incluindo a CSS em um site da WEB........................................................ 48
Principais atributos de uma folha de estilo ................................................ 49
Definindo classes ...................................................................................... 51
Definindo IDS ............................................................................................ 51
Definindo TAGS dentro do contexto.......................................................... 52
Definindo a CSS para impressão .............................................................. 53
Definindo Quebras de página para a impressão ....................................... 54
Controles de Texto .................................................................................... 54
Ajustando as Entrelinhas........................................................................... 55
Definindo Segundo Plano.......................................................................... 55
Bordas....................................................................................................... 56
Envolvendo um elemento com texto ........................................................ 56
Posicionamentos....................................................................................... 57
3
Posicionamento Estático ........................................................................... 57
Posicionamento Relativo........................................................................... 57
Posicionamento Absoluto.......................................................................... 58
Posicionamento 3D ................................................................................... 58
Próximo passo .............................................................................................. 58
ADOBE DREAMWEAVER......................................................................................................59
PROJETO DE UM SITE ............................................................................... 60
Criando documentos..................................................................................... 70
Propriedades da página ............................................................................ 72
Publicando seu arquivo ............................................................................. 76
Interface........................................................................................................ 77
Formas de visualização............................................................................. 79
Visualização do Documento...................................................................... 80
Paletas ...................................................................................................... 80
Barra de Propriedades .............................................................................. 81
TRABALHANDO COM TEXTOS .................................................................. 81
Localizar e Substituir ................................................................................. 85
Parágrafos e Layout .................................................................................. 86
Parágrafos e Quebras de linha ................................................................. 86
Títulos ....................................................................................................... 86
Texto PréFormatado ................................................................................ 87
Listas......................................................................................................... 87
Recuando Texto ........................................................................................ 88
Caracteres Especiais em HTML................................................................ 88
Linhas Horizontais..................................................................................... 89
IMAGENS ..................................................................................................... 90
Mapas de Imagem..................................................................................... 93
Criando Rollovers simples......................................................................... 94
Image Placeholder .................................................................................... 95
Barras de Navegação................................................................................ 96
Conteúdo multimídia ..................................................................................... 97
Inserção de Animações Flash (SWF)........................................................ 97
Flash Vídeo ............................................................................................... 99
Plugins ................................................................................................... 100
Hyperlinks ................................................................................................... 101
Links Absolutos e Relativos .................................................................... 101
Os nomes de caminho absolutos ............................................................ 101
Criando Links .......................................................................................... 102
Âncoras ................................................................................................... 104
Criando a âncora..................................................................................... 104
Chamando o link da âncora .................................................................... 104
Links para email..................................................................................... 105
TABELAS.................................................................................................... 105
Células .................................................................................................... 108
Tabela Modificada................................................................................... 109
FOLHAS DE ESTILO.................................................................................. 110
Editando uma folha de Estilos................................................................. 113
4
Criando uma classe................................................................................. 113
CAMADAS E POSICIONAMENTO ............................................................. 115
Posicionamento CSS .............................................................................. 116
Posicionamento absoluto versus relativo ................................................ 116
Criando Camadas ................................................................................... 116
Escolhendo as TAGS .............................................................................. 118
Aninhando Camadas............................................................................... 119
Criando layout com DIVS ........................................................................ 119
FRAMES..................................................................................................... 122
Criando os Frames.................................................................................. 122
Salvando Frames .................................................................................... 125
Alterando as propriedades de suas molduras ......................................... 125
Criando links em Frames ........................................................................ 126
Criando Frames Embutidos (IFRAME).................................................... 126
FORMULÁRIOS ......................................................................................... 128
Os elementos de um Formulário ............................................................. 128
Tipos de campos de formulário ............................................................... 129
Menu de Salto ......................................................................................... 133
COMPORTAMENTOS................................................................................ 134
Adicionando Comportamentos ................................................................ 134
Popups................................................................................................... 135
Ocultar Mostrar camadas ........................................................................ 136
Validando Formulários ............................................................................ 139
SPY (AJAX no Dreamweaver) .................................................................... 141
Spry Menu Bar ........................................................................................ 143
Spry Accordion........................................................................................ 145
Spry Effects............................................................................................. 146
Appear/ Fade .......................................................................................... 146
Blind ........................................................................................................ 147
Grow/ Shrink ........................................................................................... 148
Shake ...................................................................................................... 149
Squish ..................................................................................................... 150
Slide ........................................................................................................ 150
Highlight .................................................................................................. 151
EXTENSÕES DO DREAMWEAVER .......................................................... 152
Instalando uma nova extensão ............................................................... 153
CONCLUSÃO ............................................................................................. 154
PHP INTRODUÇÃO ...........................................................................................................156
Ambiente para o PHP ................................................................................. 156
Instalando o ambiente com EasyPHP ..................................................... 156
Sintaxe do PHP .......................................................................................... 162
Variáveis em PHP ................................................................................... 163
Comentários em PHP.............................................................................. 164
Tipos de dados........................................................................................ 165
Operadores................................................................................................. 165
Operadores aritméticos ........................................................................... 165
Operadores de comparação.................................................................... 167
5
Operadores lógicos ................................................................................. 170
Condições................................................................................................... 172
Declarações condicionais........................................................................ 172
A declaração if ........................................................................................ 172
A declaração switch ................................................................................ 174
Looping ................................................................................................... 176
A declaração while .................................................................................. 176
A declaração do ... while ......................................................................... 177
A declaração for ...................................................................................... 178
A declaração foreach .............................................................................. 179
Formulários................................................................................................. 179
Datas em PHP ............................................................................................ 181
Funções ...................................................................................................... 183
Matrizes ...................................................................................................... 184
Inclusão de Arquivos................................................................................... 185
Cookies....................................................................................................... 186
Parâmetros ................................................................................................. 189
Envio de emails ......................................................................................... 191
Banco de dados.......................................................................................... 192
Sistema de Banco de Dados................................................................... 192
Principais Módulos de um Sistema de Banco de Dados ........................ 192
Tabela ..................................................................................................... 192
Tipos de Campos .................................................................................... 193
Chave Primária ....................................................................................... 194
Exemplo de Tabelas................................................................................ 195
Relacionamento entre tabelas................................................................. 195
Princípios básicos da sintaxe...................................................................... 195
O Painel PHP do Dreamweaver ................................................................. 197
Conhecendo o painel PHP do Dreamweaver.......................................... 198
Databases ............................................................................................... 199
Bindings .................................................................................................. 200
Server Behaviors..................................................................................... 200
Components............................................................................................ 201
Criando um banco de dados pelo phpMyAdmin ......................................... 202
Conectando o Dreamweaver ao seu banco de dados ................................ 204
Criando um sistema de cadastro............................................................. 205
Vamos agora listar os dados cadastrados em nosso Banco................... 210
Sistema de Login..................................................................................... 213
MONTAGEM E PUBLICAÇÃO DO PROJETO PHOTOSHOP, FLASH E DREAMWEAVER 218
Trabalhando com as imagens que constituirão o site................................. 218
Montando o topo......................................................................................... 224
Montando o Slide Show .............................................................................. 232
Personalizando as miniaturas. ................................................................ 233
Criação do Preloader .............................................................................. 237
Montagem da página inicial ........................................................................ 241
Montando a página inicial ........................................................................... 243
Personalizando o CSS................................................................................ 244
6
Página Interna ............................................................................................ 256
Criando a galeria de fotos. ...................................................................... 257
Criação de Camadas............................................................................... 260
Utilizando o recurso de Mapas do Google .............................................. 264
Criando o Formulário de Contato ............................................................ 266
CUIDADOS NA CONSTRUÇÃO DE UM SITE......................................................................270
Trace metas................................................................................................ 270
Faça um esboço ......................................................................................... 270
Divida o seu site ......................................................................................... 271
Acesso direto a informação ........................................................................ 271
Evite sites tipo carnaval .............................................................................. 271
Não se prenda a plataformas...................................................................... 271
Divulgue o seu site e observe os acessos .................................................. 271
GLOSSÁRIO ........................................................................................................................271
7
INTRODUÇÃO
Na primeira parte de nosso curso, vimos como criar objetos, layouts e
animações para nossos projetos de WEB.
Nessa segunda parte, vamos entender como fazer para que os gráficos e
animações criados possam ser adicionados a páginas, blogs, etc..., nesse novo
tipo de mídia que é a WEB.
Essa segunda parte dividese em uma introdução a codificação HTML, pois
mesmo utilizandose editores de HTML visuais como o Adobe Dreamweaver®,
é de extrema importância saber os principais comandos HTML – que são
chamados de TAGS.
Na segunda parte veremos como utilizar o Dreamweaver, essa excelente
ferramenta de autoração de sites, suas principais ferramentas e
funcionalidades, a integração que ele tem com os programas aprendidos
anteriormente até a publicação de um projeto criado anteriormente.
Para finalizar teremos uma introdução básica à linguagem de programação
para WEB PHP e ao Actionscript.
Nomenclatura
Em nosso curso utilizaremos ícones para destacar itens importantes durante o
curso. A nomenclatura segue abaixo:
Representa que o assunto a ser tratado é de grande importância e
requer muita atenção.
Ferramenta ou comando já existente, mas que tenha mudança ou
atualização.
Ferramenta ou comando de versões anteriores do programa.
Ferramenta ou comando disponível apenas na versão CS4
(utilizada no curso).
8
Assunto ou exemplo disponível em vídeo aula no CDROM.
Arquivo a ser utilizado no exemplo da apostila, disponível no CD
ROM.
Sobre as linguagens de codificação e programação para WEB
Atualmente existem diversas linguagens que são utilizadas na WEB, vamos
aprender um pouco sobre elas e sua utilização.
HTML
HTML (acrônimo para a expressão inglesa Hypertext Markup Language, que
significa Linguagem de Marcação de Hipertexto) é uma linguagem de
marcação utilizada para produzir páginas na Web. Documentos HTML podem
ser interpretados por navegadores. A tecnologia é fruto do "casamento" dos
padrões HyTime e SGML.
HyTime é um padrão para a representação estruturada de hipermídia e
conteúdo baseado em tempo. Um documento é visto como um conjunto de
eventos concorrentes dependentes de tempo (como áudio, vídeo, etc.),
conectados por hiperligações. O padrão é independente de outros padrões de
processamento de texto em geral.
SGML é um padrão de formatação de textos. Não foi desenvolvido para
hipertexto, mas tornouse conveniente para transformar documentos em hiper
objetos e para descrever as ligações.
XHTML
O XHTML, ou eXtensible Hypertext Markup Language, é uma reformulação da
linguagem de marcação HTML, baseada em XML. Combina as tags de
marcação HTML com regras da XML. Este processo de padronização tem em
vista a exibição de páginas Web em diversos dispositivos (televisão, palm,
celular, etc). Sua intenção é melhorar a acessibilidade.
O XHTML consegue ser interpretado por qualquer dispositivo,
independentemente da plataforma utilizada, pois as marcações possuem
9
sentido semântico para as máquinas. O HTML não consegue esta
implementação. No entanto, não existem muitas diferenças entre o HTML e o
XHTML. Para verificar se uma página XHTML está bem construída, o melhor
método é validar o código através de uma aplicação Web disponibilizado pela
organização W3C.
A Recomendação XHTML original da W3C, XHTML 1.0, foi simplesmente uma
reformulação do HTML 4.01 em XML. Existem três diferentes "DTDs" de
XHTML 1.0, cada qual com equivalência a uma versão em HTML 4.01.
· XHTML 1.0 Strict é o mesmo que HTML 4.01 Strict, mas segundo regras
de sintaxe XML.
· XHTML 1.0 Transitional é o mesmo que HTML 4.01 Transitional, mas
segue as regras de sintaxe XML. Ele suporta tudo encontrado no XHTML
1.0 Strict, mas também permite o uso de vários elementos e atributos que
são julgados presencionais, para facilitar a transição de HTML 3.2 e mais
recentes. Isso inclui <center>, <u>, <strike>, e <applet>.
· XHTML 1.0 Frameset: é o mesmo que HTML 4.01 Frameset, mas
segundo as regras de sintaxe XML. Ele permite a definição de um
frameset HTML, uma prática comum em versões de HTML anteriores ao
HTML 4.01.
A mais recente Recomendação XHTML da W3C é o XHTML 1.1: Modulebased
XHTML, que é uma reformulação do XHTML 1.0 Strict, com pequenas
modificações, usando alguns módulos de um conjunto definido em
Modularização de XHTML[1], uma Recomendação W3C que cria uma
modularização de frames, um padrão de módulos, e várias outras definições.
Todas as ferramentas depreciadas de HTML, como elementos presencionais e
framesets, e até mesmo os atributos lang e o atributo de âncoras name, que
ainda eram permitidos no XHTML 1.0 Strict, foram removidos desta versão. A
apresentação é controlada puramente pelas Folhas de Estilo em Cascata
(CSS). Esta versão também permite suporte à marcação rubi, necessária para
línguas do Extremo Oriente (especialmente CJK).
Além da Modularização de XHTML permitir pequenas ferramentas XHTML
serem reutilizadas por outras aplicações XML de uma maneira bem definida, e
10
que o XHTML seja estendido para alguns propósitos, XHTML 1.1 adiciona o
conceito de um documento "estritamente conformado": esses documentos
definidos nos módulos requeridos para XHTML 1.1. Por exemplo, se um
documento é estendido para usar o módulo XHTML Frames (frameset), ele
também pode ser descrito como XHTML 1.1, mas não estritamente conforme o
XHTML 1.1. Ao invés disso, ele deve ser descrito como um XHTML Host
Language Conforming Document[2], se a ferramenta for relevante e
necessária.
Javascript
JavaScript é uma linguagem de programação criada pela Firefox, Opera
Chrome em 1995, que a princípio se chamava LiveScript, para atender,
principalmente, as seguintes necessidades:
· Validação de formulários no lado cliente (programa navegador);
· Interação com a página.
Assim, foi feita como uma linguagem de script. Javascript tem sintaxe
semelhante à do Java, mas é totalmente diferente no conceito e no uso.
1. Oferece tipagem dinâmica tipos de variáveis não são definidos;
2. É interpretada, ao invés de compilada;
3. Possui ótimas ferramentas padrão para listagens (como as linguagens de
script, de modo geral);
4. Oferece bom suporte a expressões regulares (característica também
comum a linguagens de script).
Sua união com o CSS é conhecida como DHTML. Usando o Javascript, é
possível modificar dinamicamente os estilos dos elementos da página em
HTML.
Dada sua enorme versatilidade e utilidade ao lidar com ambientes em árvore
(como um documento HTML), foi criado a partir desta linguagem um padrão
ECMA, o ECMA262, também conhecido como ECMAScript. Este padrão é
seguido, por exemplo, pela linguagem ActionScript da Adobe(Antigamente
Macromedia, porém a empresa foi vendida a Adobe).
Além de uso em navegadores processando páginas HTML dinâmicas, o
JavaScript é hoje usado também na construção do navegador Mozilla, o qual
11
oferece para a criação de sistemas GUI todo um conjunto de ferramentas (em
sua versão normal como navegador, sem a necessidade de nenhum software
adicional), que incluem (e não apenas) um interpretador de Javascript, um
comunicador Javascript <> C++ e um interpretador de XUL, linguagem criada
para definir a interface gráfica de aplicações.
O uso de JavaScript em páginas XHTML, pelo padrão W3C, deve ser
informado ao navegador da seguinte forma:
<script type="text/javascript">
/* aqui fica o script */
</script>
Caso contrário, o navegador irá interpretar o script como sendo código HTML,
escrevendoo na página.
XML
XML (eXtensible Markup Language) é uma recomendação da W3C para gerar
linguagens de marcação para necessidades especiais.
É um subtipo de SGML (acrônimo de Standard Generalized Markup Language,
ou Linguagem Padronizada de Marcação Genérica) capaz de descrever
diversos tipos de dados. Seu propósito principal é a facilidade de
compartilhamento de informações através da Internet. Entre linguagens
baseadas em XML incluemse XHTML (formato para páginas Web),
RDF,SDMX ,SMIL, MathML (formato para expressões matemáticas), NCL,
XBRL, XSIL e SVG (formato gráfico vetorial).
AJAX
AJAX (acrônimo em língua inglesa de Asynchronous Javascript And XML) é o
uso metodológico de tecnologias como Javascript e XML, providas por
navegadores, para tornar páginas Web mais interativas com o usuário,
utilizandose de solicitações assíncronas de informações. AJAX não é somente
um novo modelo, é também uma iniciativa na construção de aplicações Web
mais dinâmicas e criativas. AJAX não é uma tecnologia — são realmente várias
tecnologias conhecidas trabalhando juntas, cada uma fazendo sua parte,
12
oferecendo novas funcionalidades. AJAX incorpora em seu modelo.:
· Apresentação baseada em padrões, usando XHTML e CSS;
· Exposição e interação dinâmica usando o DOM;
· Intercâmbio e manipulação de dados usando XML e XSLT;
· Recuperação assíncrona de dados usando o objeto XMLHttpRequest;
· e JavaScript unindo todas elas em conjunto.
O modelo clássico de aplicação web trabalha assim: a maioria das ações do
usuário na interface dispara uma solicitação HTTP para o servidor web. O
servidor processa algo — recuperando dados, realizando cálculos,
conversando com vários sistemas legados — e então retorna uma página
HTML para o cliente. É um modelo adaptado do uso original da Web como um
agente de hipertexto, porém o que faz a Web boa para hipertexto não
necessariamente faz ela boa para aplicações de software.
Esta aproximação possui muito dos sentidos técnicos, mas não faz tudo que
um usuário experiente poderia fazer. Enquanto o servidor está fazendo seu
trabalho, o que o usuário estará fazendo? O que é certo, esperando. E a cada
etapa em uma tarefa, o usuário aguarda mais uma vez.
Obviamente, se nós estivéssemos projetando a Web a partir do zero para
aplicações, não faríamos com que os usuários esperassem em vão. Uma vez
que a interface está carregada, por que a interação do usuário deveria parar a
cada vez que a aplicação precisasse de algo do servidor? Na realidade, por
que o usuário deveria ver a aplicação ir ao servidor toda vez?
A maior vantagem das aplicações AJAX é que elas rodam no próprio
navegador web.
O desenvolvimento do AJAX foi muito importante para o desenvolvimento da
Web 2.0 a partir de 2005, levando à Internet funções inesperadas, que
passariam por ficção há um pouco período de tempo atrás.
Estas são algumas das linguagens utilizadas em uma criação WEB, nos
aprofundaremos mais no HTML, para entender o significado e a função de
cada TAG.
13
HTML
Apesar da palavra linguagem, que leva a associação com linguagens de
programação, ao final deste curso você vai perceber que gerar documentos
HTML é bastante fácil e parecido com formatação de textos.
Para que qualquer computador pudesse entender os documentos HTML, sem
as complicações que trazem os caracteres de controles e coisa do tipo, foi
definido que estes documentos deveriam ser gerados no formato mais simples
possível, o bom e velho “txt”.
Desta forma, documentos HTML podem ser gerados por qualquer editor de
textos, desde que gravados no formato texto e com extensão.Htm ou .html.
Como se cria um documento HTML
Uma página Web é composta de textos e comandos especiais (tags). Assim
como qualquer linguagem, o programador deve escrever o códigofonte
seguindo as regras da linguagem. Esse códigofonte é posteriormente
interpretado pelo browser, que se encarregará de executar os comandos (tags)
do código para formatar e acessar recursos da Web.
O código fonte pode ser escrito usandose o mais simples dos editores de
texto. Até o programa Bloco de Notas pode ser usado para esta tarefa. Mas
existem editores WYSIWYG (What you see is what you get, ou o que você vê é
o que realmente obtém) como exemplo podemos citar o Dreamweaver.
Existem ainda editores não WYSIWIG, onde você tem que construir o código,
mas ele completa muitos comando, como exemplo podemos citar o Sothink
HTML Editor (disponível na pasta do Dreamweaver), e na própria Internet
existem vários destes editores gratuitos.
14
Tags ou comandos HTML
As TAGS normalmente são especificadas em pares, delimitando um texto que
sofrerá algum tipo de formatação.
As TAGS são identificadas pelo sinais < > ou </ >.
Entre os sinais <> são especificados os comandos propriamente ditos. No caso
de tags que necessitam envolver um texto, sua finalização deve ser feita
usandose a barra de divisão / , indicando que a TAG está finalizando a
marcação de texto.
Os principais elementos de página HTML são, títulos, textos, parágrafos,
imagens e links, responsáveis pela chamada de outras páginas para a tela:
Título: É o texto que aparece na barra de título do browser.
Imagem: São figuras, desenhos e fotos usados para ilustrar a página.
Texto: É a informação mais comum dentro de uma página. Pode ser formatado
através de comandos.
Link: É um trecho que aparece destacado do restante do texto, normalmente
sublinhado e com outra cor. Ao clicar no Link, o browser acessa outra região da
página atual ou uma página localizada em qualquer lugar na Internet. Uma
figura também pode ser usada como link, ou seja, clicando na figura saltamos
15
para outro local.
Cabeçalho: São linhas de texto com tamanhos especiais. Existem seis
tamanhos de cabeçalhos.
Estrutura Básica
A estrutura básica de um documento HTML é a seguinte:
<HTML>
<HEAD>
<TITLE> Título do Documento</TITLE>
</HEAD>
<BODY> Aqui deverá ser digitado e criado a maioria dos itens que irão
aparecer em sua Home Page
</BODY>
</HTML>
Vamos ver um pouco sobre os elementos básicos do HTML:
<HTML></HTML>: Indicam respectivamente o início e o fim do documento.
Todo o resto deve estar entre estas marcas.
<HEAD></HEAD>: Delimitam a seção de cabeçalho do documento. Tratase
da primeira seção do documento.
<TITLE></TITLE>: Indicam o título do documento, que será apresentado na
barra superior do browser. Estas marcas devem constar da seção de
cabeçalho.
<BODY></BODY>: Corpo do documento. Entre estas marcas estará o
conteúdo a ser apresentado, textos, cores, imagens, etc. Este elemento pode
conter cinco parâmetros opcionais:
BACKGROUND: configura especificar uma imagem como fundo da página.
EX. <BODY BACKGROUND= “ fundo.gif” > configura uma página com a
imagem fundo.gif como fundo.
BGCOLOR: Configura a cor de fundo da página. EX: <BODY BGCOLOR=
“ White” > configura uma página com fundo branco (padrão).
TEXT: configura a cor padrão do texto da página. EX: <BODY TEXT= “ Black”
16
> configura uma página com texto em cor preta. (padrão).
LINK, ALINK, VLINK: configura as cores dos links da página. ALINK configura
a cor do link ativo, isto é quando é clicado, e VLINK configura a cor de um link
já visitado. EX: <BODY LINK=” Blue” VLINK=” Purple” ALINK=” Red” >
configura uma página com links azuis, links ativos vermelhos e links visitados
roxos.
Esta estrutura inicial é simples, no entanto existem detalhes que devem ser
respeitados:
Todas as marcas apresentadas são do tipo iníciofim, ou seja, funcionam em
pares.
Em cada documento HTML só deve haver uma marca de cada tipo acima.
Existe uma ordem seqüencial lógica entre as marcas.
Estes detalhes devem ser respeitados, senão o browser não conseguirá
apresentar o documento.
Como HTML não é uma linguagem de programação, você não será avisado de
erros que tenha cometido na edição do seu documento.
Criando o primeiro documento HTML
<HTML>
<HEAD>
<TITLE>Este é o meu primeiro documento em HTML</TITLE>
</HEAD>
<BODY BGCOLOR=” Red” TEXT=” White” >
Agora no corpo do texto vou digitar o meu primeiro texto em Html, no
momento não usarei nenhuma formatação especial aqui dentro.
</BODY>
</HTML>
Comentários
Podemos também acrescentar comentários ao nosso código HTML, estes
comentários não aparecem para no navegado e somente no código, são
representados pela seguinte TAG <! inicia o comentário // >, finaliza o
17
comentário.
São utilizados para ocultar scripts dentro do código Html, pois caso o script não
possa ser processado o mesmo será ignorado pelo navegador.
Caracteres especiais
Existem caracteres que não podem ser obtidos através de teclado. Eles podem
ser inseridos em sua página através da especificação de um código especial
que o browser interpreta e substitui por um caractere específico. Esses códigos
podem ser obtidos utilizandose uma nomenclatura definida pela norma ISO.
Alguns dos símbolos mais utilizados no HTML é o &nbsp; que corresponde
ao espaço do teclado, já que na HTML ele considera apenas um espaço. Para
uma tabela mais completa visite o link
http://www.w3.org/TR/html401/sgml/entities.html
Parágrafos e quebras de linha
Ao contrário dos editores de texto comum, nos quais você insere uma quebra
ou avanço de linha toda vez que pressiona a tecla ENTER, em um programa
HTML é necessário colocar um comando específico para que o browser
entenda que você deseja mudar de linha e iniciar uma nova linha ou começar
um novo parágrafo. Existem dois comandos para criar quebras de linha e
novos parágrafos. São os comandos <P> e <BR>
O Comando <P>
Para forçar um novo parágrafo, ou seja, avançar uma linha em branco e iniciar
o texto na segunda linha após o final do parágrafo anterior deve ser usado o
comando <P>.
Alinhando parágrafos
O Comando <P> inicia um novo parágrafo onde o texto é automaticamente

alinhado pela margem esquerda da tela. Através do parâmetro ALIGN, podese
mudar o alinhamento de forma que o texto do parágrafo inteiro fique
centralizado ou alinhado à direita. Nesse caso, devese usar um par de
comandos <P> envolvendo o parágrafo.
18
ALIGN=CENTER Centraliza o texto.
ALIGN=RIGHT Alinha pela margem direita
ALIGN=JUSTIFY Alinha pelas duas margens
ALIGN=LEFT Alinha pela margem esquerda (padrão)
O Comando <BR>
O comando <P> insere uma linha em branco no seu local ou na linha seguinte
à qual ele foi inserido, caso esteja no meio de uma linha de texto e não em seu
final. O comando <BR> tem como função avançar para a linha imediatamente
após àquela em que ele se encontra, sem, contudo, deixar uma linha em
branco.
O Comando <HR>
O comando <HR> tem como finalidade inserir uma linha divisória na posição
em que foi especificado. Seu uso é recomendado para criar uma divisão na
página.
Alterando o formato de linha de separação
As linhas criadas pelo comando <HR> podem Ter o seu tamanho alterado
pelos parâmetros SIZE e WIDTH. O parâmetro SIZE altera a espessura (altura)
da linha, deixandoa mais grossa em função do valor especificado. Esse valor é
expresso em pixels.
A largura ou comprimento da linha é alterada pelo parâmetro WIDTH e pode
ser expresso em pixels, sendo que, nesse caso, o tamanho da linha é fixo ou
utiliza uma porcentagem relativa à largura da janela. Assim, seu tamanho varia
em função da largura da janela. Veja o código abaixo:
USANDO IMAGENS COMO LINHAS SEPARADORAS
Em vez de usar o comando <HR> como separador, podemos usar uma
imagem com o comando <IMG>. Assim como o comando HR, podemos usar
os parâmetros WIDTH e HEIGHT para alterar o tamanho da imagem.
19
DIV
A Tag <DIV></DIV> envolve uma área do texto ou divisão que pode receber
parâmetros específicos de alinhamento, como é o caso de ALIGN, para alinhar
o texto. Podemos envolver vários parágrafos com o elemento DIV
blockquote
O comando Blockquote permite dar recuos de parágrafos aos parágrafos, e
pode ser cumulativo
Estilos de Texto e Fonte
Assim como no editor de textos, você pode criar uma série de efeitos no texto,
alterando a forma ou o tipo da fonte. Todos os comandos que alteram o estilo
do texto são do tipo contêiner ou liga desliga, ou seja, precisam ser
especificados em pares, marcando o início e fim do texto que sofrerá a
formatação.
Os principais comandos de estilo de texto são:
Comando Sintaxe Função
Negrito <B>Texto</B> Aplica o estilo Negrito
Itálico <I>Texto</I> Aplica o estilo Itálico
Sublinhado <U>Texto</U> Aplica o estilo sublinhado(Não
funciona em alguns Browsers
Strong <Strong>Texto</Strong Similar ao Negrito
>
Typerwriter <TT>Texto</TT> Deixa o texto com espaçamento
regular
Big <BIG>Texto</BIG> Aumenta a fonte e aplica negrito
Small <SMALL>Texto</SMAL Reduz e altera a fonte
L>
Sobrescrito <SUP>Texto</SUP> Eleva o texto e diminui seu corpo
Subscrito <SUB>Texto</SUB> Rebaixa o texto e diminui seu
corpo
Pulsante <BLINK>Texto</BLINK Faz com que o texto pisque (Não
> funciona no IE 4.
20
Alterando o tamanho da fonte
Um dos recursos de tratamento do texto mais interessantes da linguagem
HTML é a possibilidade de alterar o tamanho, a cor e o tipo da fonte do texto
utilizado. O comando responsável por isso é o comando <FONT>, que é do tipo
liga desliga.
Size
O parâmetro size especifica o tamanho da fonte utilizada. Os valores
permitidos vão de 1, o menor até 7, o maior. O padrão é 3. Se for especificado
um número antecedido pelo sinal de adição ou de subtração, o tamanho da
fonte atual será aumentado ou diminuído nesse valor. Por exemplo, se a fonte
atual é 3 e for especificado <FONT SIZE=+2> o texto será exibido no tamanho
5. Se o valor for especificado sem sinal, a fonte será exibida no tamanho
especificado.
Face
Esse parâmetro permite que seja escolhida uma fonte diferente para o texto.
Podemos especificar várias fontes, de maneira que, se o sistema não possuir a
primeira opção, a segunda é carregada.
Se não for encontrada nenhuma das fontes especificadas, o texto é exibido na
fonte padrão.
Color
Esse parâmetro especifica a cor do texto. Seu valor pode ser especificado no
formato hexadecimal, RGB ou através de um nome predefinido de cores como
mostra a tabela abaixo:
Cor Código Cor Código
Aqua #70DB93 Blue #0000FF
Black #000000 Cyan #00FFFF
Fúcsia #FF00FF Gray #C0C0C0
Green #00FF00 Lime #32CD32
Brown #800000 Navy #23238E
21
Olive #808000 Red #FF0000
Silver #E6E8FA Teal #008080
White #FFFFFF Yellow #FFFF00
Não exagere na quantidade cores e tamanho das letras do texto ou a sua
página parecerá uma mensagem enviada por código.
Cabeçalhos
Outra forma muito usada para mudar o tamanho da letra e aplicar um efeitos
em textos é utilizando cabeçalhos. A linguagem HTML possui seis comandos
de cabeçalho de <H1> até <H6>. Além do tamanho diferenciado, o comando
cabeçalho insere uma linha em branco antes e depois da linha que contém o
comando. Eles são perfeitos para criar títulos e iniciar seções dentro de uma
página. O comando <H1> possui o maior tamanho enquanto que <H6> possui
o menor tamanho de fonte.
Alinhando cabeçalhos
Como padrão um cabeçalho gerado pelo comando <Hn> é sempre posicionado
no lado esquerdo da linha. Usando o parâmetro ALIGN podese centralizar ou
ajustar o cabeçalho à direita da linha.
Veja o código:
<HTML>
<HEAD>
<TITLE>Alinhando Cabeçalhos</TITLE>
</HEAD>
<BODY>
<H2> Cabeçalho sem alinhamento especial</H2>
<HR>
<H2 ALIGN=CENTER>Cabeçalho com alinhamento centralizado</H2>
<HR>
<H2 ALIGN=RIGHT>Cabeçalho com alinhamento à direita</H2>
22
</BODY>
</HTML>
Listas
Na linguagem HTML existem elementos específicos para a criação de listas,
que podem ser listas ordenadas (OL), listas sem ordenação (UL), ou listas de
definições (DL). Um detalhe interessante é que podem ser criadas listas
aninhadas, ou seja, listas dentro de listas. A seguir, veremos as características
de cada umas delas.
Listas Ordenadas
<OL TYPE=...START=...>...</OL> são os elementos delimitadores de listas

ordenadas (OL – Ordered Lists). A estrutura das listas ordenadas é bastante
simples: entre os elementos de início e fim, os itens da lista são definidos pelos
elementos <LI></LI>. Os itens são apresentados em linhas consecutivas e
precedidos por uma numeração atribuída pelo paginador. O parâmetro opcional
TYPE define como será o tipo de numeração de cada linha. Os tipos
disponíveis são: “A” (A,B,...Z), “a”(a,b,...z), “I” (I,II,III, etc.), “i’ (i,ii,iii,etc), e “1”
(1,2,3,etc). Se omitido, é utilizado o tipo padrão (1,2,3, etc). O parâmetro
opcional START define a partir de que elemento a numeração deve se iniciar.
Ele deve receber como valor um número indicando em que posição a
contagem deve se iniciar.
Listas Não ordenadas
<UL>...</UL> são os elementos delimitadores de listas sem ordenação (UL –
Unordered Lists). A estrutura das listas sem ordenação é a mesma das listas
ordenadas, sendo que, na apresentação, os itens serão precedidos por um
marcador (bullet). No caso de listas sem ordenação aninhadas (listas dentro de
listas), o paginador utilizará um marcador (bullet) diferente para os itens de
cada lista.
Como já foi visto acima <LI>...</LI> é o elemento que define um item de uma
23
lista ordenada ou sem ordenação. O seu conteúdo pode ser texto, outras listas,
imagens, links ,etc.
Lista de Definição
<DL>...</DL> são as marcas que englobam uma lista de definições, ideais para
a criação de glossários e coisas do gênero. A estrutura desta lista é diferente
das outras, pois existem dois elementos – o termo a ser definido (DT), e a
definição propriamente dita (DD). Na apresentação cada termo aparece em
uma linha, e a respectiva definição na linha seguinte, deslocada para a direita.
<HTML>
<HEAD>
<TITLE>Listas de definição</TITLE>
</HEAD>
<BODY>
<H2>Listas de definição</H2>
<DL>
<DT>HTML</DT>
<DD>Hiper Text Markup Language</DD>
<DT>OL</DT>
<DD>Listas ordenadas com numeração.</DD>
<DT>UL</DT>
<DD>Listas sem ordenação</DD>
<DT>LI</DT>
<DD>Elemento da Lista</DD>
</DL>
<H2>Listas não ordenadas combinadas<BR>com uma lista de
Definição</H2>
<DL>
<DT>Parâmetro do elemento OL</DT>
<DD>
<UL>
24
<LI>TYPE</LI>
<LI>START</LI>
</UL>
</DD>
<DT>Parâmetros do elemento IMG</DT>
<DD>
<UL>
<LI>SRC</LI>
<LI>ALT</LI>
<LI>BORDER</LI>
<LI>WIDTH</LI>
<LI>HEIGHT</LI>
<LI>VSPACE</LI>
<LI>HSPACE</LI>
</UL>
</DD>
</DL>
</BODY>
</HTML>
Imagens
Você pode obter uma imagem através de uma cópia feita a partir de uma
página da Internet, através de CDs ROMs, Scanners, etc. ou pode criálas a
partir de um programa de imagens.
O comando img
Esse comando define a posição de uma imagem que aparece no corpo do
documento.
<IMG SRC=”URL” WIDTH=”...” HEIGHT=”…” BORDER=”…” ALT=”Texto”
VSPACE=”…” HSPACE=”…”>
ALIGN=| “BOTTOM” | “TOP” | “MIDLE”
25
SRC=”URL É o nome da figura, se estiver no
mesmo diretório do programa ou seu
caminho completo.
ALT=”texto” Exibe o texto quando o browser não
encontra a imagem, ou uma legenda
quando o cursor do mouse passa
sobre ela mostrando o texto
especificado.
ALIGN=”TOP” | Especifica o alinhamento da imagem
“MIDLE” | “BOTTOM” relativamente à linha de texto onde é
exibida.
ALIGN=”LEFT” | Especifica o alinhamento da imagem
“RIGHT” relativamente às bordas laterais da
janela
WIDTH=”número”| Esse parâmetro especifica a largura
”número%” de exibição da imagem
independentemente do seu tamanho
físico. Se a imagem for maior ou
menor do que o valor especificado,
ela será esticada ou comprimida para
caber no espaço especificado. Se for
o colocado o sinal de porcentagem,
ele é relativo à largura da janela.
HEIGHT=”número” Especifica a altura de exibição da
imagem independentemente de seu
tamanho físico. Se a imagem for
maior ou menor do que o valor
especificado.
BORDER=”número” Especifica em pixels a largura da
borda da imagem. O valor zero
remove a imagem
26
VSPACE=”número” Determina em pixels o espaço que
deve ser deixado em branco na parte
de cima e na parte de baixo da
imagem.
HSPACE=”número” Determina em pixels o espaço que
deve ser deixado em branco nas
laterais da imagem
Com exceção do parâmetro SRC, todos os demais são opcionais. Portanto,
para exibir uma imagem chamada foto.gif que esteja no mesmo diretório do
programa deve ser especificado o seguinte comando:
IMG SRC=”foto.gif”
urls e links
Até agora você aprendeu como criar documentos interessantes, mas que
poderiam ter sido criados em um processador de textos.
O Principal atrativo da Internet é a criação de documentos com o conceito de
hipertexto, ou seja , um documento que se liga a outros por meio de vínculos
especiais chamados hyperlinks. Com esse conceito você pode criar
documentos que façam referência a um endereço qualquer do computador ou
da Web e permitam ao usuário acessar essas referências, não importando se
elas estão em outra página WEB, no seu micro ou em qualquer servidor da
rede.
URL
A Internet usa uma nomenclatura específica para indicar o endereço de um
documento. Chamada de Uniform Resource Locator (Localizador Universal de
Recursos) ou URL, essa nomenclatura inclui três componentes. Ela deve
conter o protocolo do documento, (como por exemplo http. Gopher ou WAIS), o
endereço servidor e a localização do arquivo, usando a seguinte sintaxe:
Protocolo://servidor.NomeDoArquivo
27
http://www.apostilando.com/index.htm
http: É o protocolo
www.apostilando.com: É o nome do servidor
index.htm: É o nome do documento que será acessado.
Criando um Link com Arquivos Locais
Vincular um texto com uma página local é uma tarefa bastante simples. Você
precisa apenas especificar o nome completo do arquivo que será chamado,
utilizando o comando <A> de âncora. Veja a sintaxe básica deste comando:
<A HREF=”...”NAME”...”>caracteres</A>
Principais parâmetros:
HREF=”URL” Especifica o endereço do URL ao

qual o link está associado. Pode
ser usado dentro e fora do
documento.
NAME=”String” Especifica o nome da seção de um
documento à qual um link de
hipertexto faz referência.
Usando uma Imagem como Hiperlink
Você pode usar uma imagem como hiperlink envolvendoa com o comando
<A></A>. Em vez de especificar um texto de hiperlink, você usa o comando
<IMG> para colocar a imagem.
Vinculando Arquivos de outros diretórios
Você pode especificar o endereço de outros diretórios usando um esquema de
caminhos parecido com DOS. Existe uma diferença entre esses caminhos. Na
Web você deve inverter a barra de espaços, usando a barra / no lugar da barra
\, para separar diretórios.
CRIANDO LINKS PARA SEÇÕES DE UMA PÁGINA
28
Para dominar o uso do hipertexto, o programador em HTML deve conhecer
bem o funcionamento do comando <A> e dois de seus parâmetros da
linguagem. Um é o <H HREF>, usado para criar o link em si, e o outro é o <A
NAME>, que cria âncoras ou endereços de seções de um documento,
permitindo seu endereçamento.
Criando uma Âncora
Para interligar uma página, você precisa criar uma âncora (também chamado
de indicador em alguns editores de HTML) no inicio de cada seção do
documento. Essa âncora recebe um nome que será mencionado pelo link que
acessará.
<A NAME=”#nome da âncora”>Texto Opcional</A>
Iremos criar agora uma página Web com exemplos de links e âncoras :
Neste código criamos primeiramente os links com as âncoras da página, e
depois as âncoras, aproveitamos também e trabalhamos com inserção de
imagens na página:
Enviando EMail diretamente da Página HTML
Você pode acionar o programa padrão de email diretamente de uma página
HTML usando uma variação do comando <A>, que usa a opção MAILTO no
lugar da URL.
<A HREF=”MAILTO:faleconosco@provedor.com.br”>Tire as suas dúvidas </A>
Definindo Destinos
Podemos também definir destinos para os nossos links,(recurso muito utilizado
em frames) através do parâmetro target: . E podem ser _self: Mesmo quadro,
_top: página inteira, _blank: nova janela e _parent: quadro pai.
TABELAS
Assim com as listas que nós já vimos, no HTML existem elementos específicos
para a criação e formatação de tabelas. O recurso de tabelas é muito
interessante e muito usado nas páginas Web.
29
O conceito é o mesmo conhecido usualmente: ela tem linhas e colunas, e na
interseção delas estão as células.
Na linguagem HTML, você pode inserir nas células tudo o que normalmente faz
parte do corpo de um documento, como textos, links, imagens, listas e até
outras tabelas.
Elementos básicos de tabelas
<TABLE>...</TABLE>
São as marcas que englobam a definição de uma tabela. Todas as demais
marcas referentes a tabelas – linhas e células – somente serão consideradas
se incluídas entre <TABLE>e </TABLE>.
<CAPTION>...</CAPTION>
Tratase de um elemento opcional que define o título da tabela, e deve constar
entre as marcas que definem a tabela, mas separado das marcas que definem
linhas e colunas. Sem parâmetros, o título á apresentado acima da tabela e
centralizado.
<TR>...</TR>
Table Row ou Linha de tabela
Este é o elemento utilizado na definição de linhas de tabelas. Tabelas são
definidas em linhas, sendo as linhas compostas de células. O número de linhas
de uma tabela corresponde ao número de <TR></TR>.
<TD>...</TD>
Table Data ou Dados de Tabela
Marcas que delimitam as células que compõem as linhas, e assim sendo
devem estar inseridas entre as marcas de linhas. Uma célula pode conter tudo
o que normalmente consta do corpo de um documento HTML – Links,
referências a imagens, textos, e até tabelas.
O alinhamento padrão de uma célula é à esquerda horizontalmente e
centralizado verticalmente, e caso o número de células varie de uma linha para
outra, as linhas com menos células são completadas à direita com células em
branco.
<TH>...</TH>
30
Table Header ou Cabeçalho de Tabela
Elemento que define células de cabeçalho. Células de cabeçalho têm
características idênticas a células de dados definidas por <TD>, a não ser pelo
alinhamento horizontal, que é centralizado, e pela utilização de fonte em
Negrito.
Parâmetros
Estes elementos básicos, entretanto, possuem alguns parâmetros que
permitem um maior controle sobre alguns detalhes da apresentação da tabela.
Parâmetros do elemento <TABLE>
BORDER
A apresentação padrão de uma tabela é sem bordas. A presença do parâmetro
BORDER indica justamente que deve ser desenhada uma borda em torno de
cada célula da tabela. Pode ser usado para indicar a espessura da borda (em
pixels), com BORDER=X. Exemplo: <TABLE BORDER=2>
BORDERCOLOR
Permite que se coloque cores nas bordas de sua tabela e possui duas
variações: bordercolorlight e bordercolordark, permitindo que se coloque duas
cores de bordas em volta de sua tabela.
WIDTH
Especifica a largura da tabela, que pode ser definida em pixels ou em
percentual referente à largura da janela. Caso não seja especificado, o próprio
browser se encarrega de determinar a largura mais adequada, baseado nos
textos inseridos nas células. Exemplo: <TABLE WIDTH=75%>
CELLSPACING
Define o espaço entra as células, ou seja, a largura das linhas de grade (as
bordas que envolvem as células). É especificado em pixels. Exemplo: <TABLE
CELLSPACING=3>
CELLPADDING
Determina, em pixels, o espaço entre o conteúdo e as bordas da célula.
Exemplo: <TABLE CELLPADING=6>
ALIGN
31
Configura o alinhamento horizontal da tabela em relação aos outros elementos
da página. Pode conter os valores LEFT (esquerda), CENTER (centro) ou
RIGHT( direita). Este parâmetro não funciona em alguns browsers.
BGCOLOR
Define a cor de fundo da tabela.
Parâmetros do elemento <TR>
ALIGN
Configura o alinhamento horizontal dos elementos contidos nas células de uma
linha. Pode conter os valores LEFT, CENTER OU RIGHT. Se omitido, o
alinhamento é à esquerda para as células de dados (<TD>), e centralizado
para células de cabeçalho (<TH>).
VALIGN
Define o alinhamento vertical dos elementos contidos nas células de uma linha.
Pode conter os valores TOP(topo), MIDLE(meio) ou BOTTOM (fundo). Se
omitido, o alinhamento é ao meio.
BGCOLOR
Define a cor de fundo da linha.
Parâmetros dos Elementos <TD> e <TH>
ALIGN
Configura o alinhamento horizontal dos elementos contidos na célula. Pode
conter os valores LEFT, CENTER OU RIGHT.
Se omitido, o alinhamento é à esquerda para as células de dados (<TD>), e
centralizado para células de cabeçalho (<TH>).
VALIGN
Define o alinhamento vertical dos elementos contidos na célula. Pode conter os
valores TOP (topo), MIDLE(meio) ou BOTTON(fundo). Se omitido, o
alinhamento é ao meio.
BGCOLOR
Define a cor de fundo da linha.
NOWRAP
32
Quando este parâmetro encontrase associado a uma célula, o browser
entende que o texto dentro daquela célula não pode ser dividido em mais de
uma linha. Este parâmetro deve ser utilizado com cuidado, para evitar colunas
demasiadamente largas.
COLSPAN
Especifica o número de colunas de uma tabela a ser ocupado por uma célula.
Deve ser utilizado para expandir uma célula horizontalmente. Se atribuirmos
COLSPAN=2 a uma célula, ela ocupará o seu espaço e o espaço de mais uma
célula para a direita, assim esta linha deverá possuir uma célula a menos que
as demais, já que uma de suas células “vale”por duas.
ROWSPAN
Define o número de linhas a ser ocupado por uma célula. Deve ser utilizado
para expandir uma célula verticalmente (para baixo). Ao atribuir ROWSPAN=2
para uma célula, diminuirá em 1 o número de células da linha de baixo.
Vamos a um exemplo:
<html>
<head>
<title>Tabelas</title>
</head>
<body>
<table border=" 10" width=" 100%" bordercolorlight=" #000080"
bordercolordark=" #0000FF" >
<tr>
<th width=" 100%" colspan=" 3" >
<p align=" center" >Título da Tabela</th>
</tr>
<tr>
<td width=" 33%" >Texto1</td>
<td width=" 33%" >Texto 2</td>
<td width=" 34%" >Texto 3</td>
</tr>
33
</table>
</body>
</html>
Atenção: Além de criar tabelas para exibir dados como numa planilha, os
elementos de tabelas são usados para formatar páginas de uma forma geral.
Eles são usados para criar textos com elementos na tela de forma mais fácil,
para delimitar áreas de uma página e diversas outras utilidades que você nem
imagina.
Por exemplo, podemos usar tabelas para garantir que o texto fique na posição
A da tela e a imagem fique na posição B, independente da resolução de vídeo
do visitante de sua página. Utilizando uma tabela de tamanho definido,
podemos evitar que a página fique grande demais para resoluções de 640x480,
podemos simular colunas de texto, entre outras aplicações.
Frames
O recurso de frames (janelas), compatível com a versão 2 e superiores do e do
IE, permite ao desenvolvedor criar páginas HTML que podem ser visualizadas
simultaneamente na janela do browser. Com esse recurso, a janela do browser
é dividida em frames que compartilham o espaço disponível.
Sem o recurso de frames, para visualizar três páginas diferentes chamadas A.
HTM, B.HTM e C.HTM, o usuário precisaria acessálas individualmente por
meio de uma página inicial que contivesse um menu ou então através da
especificação de seu URL
Usando o recurso de frames, podemos exibir mais de um frame (janela)
simultaneamente. Em nosso projeto iremos usar um dos frames para exibir
permanentemente o conteúdo da página do menu e a outra para exibir o
conteúdo dos capítulos, facilitando a navegação pelo manual.
Como funcionam os frames
Ao contrário da maioria dos recursos da linguagem HTML, o uso frames requer
um planejamento prévio. Esse planejamento consiste na criação da estrutura
34
dos frames, na qual você irá especificar a quantidade de frames, a disposição
que eles terão na tela, a largura e a altura de cada frame, assim como o
conteúdo que será exibido em cada um deles. Trabalhar com frames exige
duas etapas. Na primeira você cria o layout dos frames, na segunda, define seu
conteúdo.
O Comando Document
O uso de frames exige a criação de um documento HTML especial que contém
todas as definições dos frames. Você pode considerálo como um documento
mestre. Esse documento se diferencia dos demais documentos HTML, pois ele
não usa os comandos <BODY> e </BODY>. Em seu lugar é usado o comando
<FRAMESET></FRAMESET>. Dentro desse par de comandos são
especificados todos os atributos dos frames que serão criados. O frameset
define as características gerais dos frames, como sua quantidade e disposição
horizontal e vertical. Cada frame especificado precisará de outro comando
chamado <FRAME> para definir suas características individuais.
O Comando FRAMESET
Este comando é do tipo contêiner, ou seja deve ser aberto e fechado. Veja a
sintaxe deste comando:
<FRAMESET
COLS=tamanho
FRAMEBORDER=1/0
FRAMESPACING=spacing
ROWS=tamanho></FRAMESET>
Cols=tamanho
O atributo cols é usado para criar um documento com frames dispostos em
colunas. Nele deverá ser especificada a largura de cada coluna do documento.
Pode ser especificado um valor padrão para todas as colunas ou tamanhos
individuais. Os valores podem ser especificados em pixels, percentagem ou
tamanho relativo.
Usando valores em pixels
<FRAMESET COLS=”100,300,200”>
35
Usando valores relativos
Para dividir os frames igualmente pela largura da janela do browser, a melhor
opção é usar um asterisco (*) para cada coluna
<FRAMESET COLS=*,*,*>
Usando valores percentuais
A terceira forma de determinar a largura de uma coluna é especificar os valores
em forma de percentual, totalizando 100 por cento
<FRAMESET COLS=25%,50%,25%
Os diferentes valores podem ser combinados entre si. Por exemplo, para criar
um frameset com três colunas de modo que a primeira ocupe 25%, a terceira
tenha 100 pixels e a outra ocupe o espaço restante, podese usar o seguinte
comando:
<FRAMESET COLS=25%,*,100>
ROWS=tamanho
O atributo ROWS funciona da mesma forma que o atributo COLS, só que cria
os frames horizontalmente. Tudo o que foi exposto para COLS, aplicase a
ROWS.
Combinando ROWS e COLS
Podese combinar a criação de frames, usando os dois atributos. Você pode
criar um janela dividida em dois frames horizontais, onde o primeiro deles é
dividido em duas colunas. Para que isso seja possível, basta aninhar conjuntos
de comandos <FRAMESET>
O atributo <FRAMESPACING=valor>
Esse atributo tem como finalidade alterar o espaço entre os frames, dando a
impressão de que a borda dos frames foi aumentada. Contudo, ele apenas
distancia um frame de outro pela quantidade de pixels especificada.
O código pode ser o mesmo do exemplo anterior. A penas a primeira linha
deve ser alterada para:
<FRAMESET ROWS=50%,50% FRAMESPACING=10>
O atributo <frameborder=1/0>
Esse atributo tem a finalidade de eliminar as bordas dos frames. Como padrão,
36
ele usa o valor 1, que exibe a borda. Se for especificado o valor 0, as bordas
serão omitidas. A omissão de bordas é interessante para criar a ilusão de uma
única janela, onde as partes dessa janela são independentes das outras. Outro
efeito interessante é a mudança da cor de fundo de cada janela, permitindo
dividir a tela em áreas coloridas distintas.
O comando <frame src>
Sintaxe:
<FRAME ALIGN=posição
FRAMEBORDER=1/0
MARGINHEIGHT=altura
MARGINWIDTH=largura
NAME=nome
SCROLLING=yes/no
SRC=endereço
Align=posição
Ajusta o alinhamento do frame ou do texto. Os valores permitidos são:
TOP O texto ao redor do frame é alinhado pela parte superior do
frame.
MIDDLE O texto ao redor do frame é alinhado pelo meio do frame.
BOTTO O texto aos redor do frame é alinhado pela parte inferior do
M frame.
LEFT O frame é alinhado à esquerda, deixando o texto
posicionado no seu lado direito.
RIGHT O frame é alinhado à direita, deixando o texto posicionado
no seu lado esquerdo
Frameborder=0/1
Idêntico ao atributo de mesmo nome do comando <FRAMESET>, ele ativa ou
desativa a exibição de borda para o frame atual.
Marginheight=altura
37
Especifica a altura da margem superior e inferior do frame em pixels.
Marginwidht=largura
Especifica a largura das margens esquerda e direita do frame em pixels.
Name=nome
Atribui um nome para o frame, de maneira que possa ser identificado e
localizado para carregar documentos.
Noresize
Esse atributo evita que o frame seja redimensionado pelo usuário.
Scrolling=yes/no
Esse atributo, quando ajustado para o valor no, não permite que o frame tenha
barras de rolagem quando a janela for redimensionada.
SRC=endereço
Endereço deve ser substituído pelo nome ou URL do documento que será
exibido no frame.
Ajustando as margens internas do Frame
O desenvolvedor pode criar uma margem interna para o frame, de forma a
distanciar o conteúdo da janela da sua borda. Para criar um margem nas
laterais da janela, deve ser usado o comando MARGINWIDTH. Para criar uma
margem na parte superior e outra no rodapé do frame, deve ser usado o
atributo MARGINHEIGHT. O tamanho da margem deve ser especificado em
pixels.
Barras de Rolagem e Redimensionamento dos Frames
Como padrão, os frames possuem os atributos que permitem seu
redimensionamento e a inclusão automática de barras de rolagem quando suas
dimensões ficam menores do que o conteúdo a ser exibido. Para alterar essas
características, você deve usar os comandos SCROLLING E NORESIZE.
No caso do comando SCROLLING, deve ser atribuído a ele o valor no para
desativar as barras de rolagem.
Interligação de frames
Até agora você viu como criar um conjunto de frames para exibir documentos
independentes um do outro. Nosso projeto inicial previa a criação de um
38
manual eletrônico usando frames para mostrar um índice permanente na tela
enquanto outra janela exibia o conteúdo selecionado. Para isso iremos
aprender mais alguns itens. O primeiro deles é a atribuição de um nome para o
frame e o segundo é direcionar o carregamento de um documento em uma
janela específica.
Para indicar ao browser em qual janela os documentos dos capítulos deverão
ser carregados, devemos incluir no documento que contém os links um novo
comando chamado <BASE TARGET=”nome da janela”> contendo o nome da
janelaalvo.
Criando a Estrutura dos Frames
Esse arquivo contém a definição de dois frames, um para o menu e outro para
os capítulos. O frame que receberá o nome de “textos”, e nenhum arquivo será
previamente carregado. O frame que conterá o menu principal recebera o
nome de “menu”. Nessa situação, apenas o nome do frame “textos” tem de ser
obrigatoriamente especificado.
Criando o conteúdo do Menu
O arquivo de menu contém os links para os capítulos do manual. Nesse
documento, você deve incluir o comando <BASE TARGET>, que é responsável
por indicar ao browser onde os arquivos vinculados pelo comando <A HREF>
devem ser carregados. Em nosso exemplo, ele orienta o browser a carregar os
links no frame chamado “textos”. Se esse comando for omitido, os capítulos
serão carregados no frame do menu.
Os códigos dos documentos ficarão da seguinte maneira e salve o documento
como menu:
<HTML>
<HEAD>
<TITLE>Menu Principal</TITLE>
<BASE TARGET=" textos" >
</HEAD>
<BODY BGCOLOR=" FFFFEE" >
<CENTER>
39
<H1>Menu Principal</H1>
<UL>
<LI><A HREF=A.HTM>Introdução</A>
<LI><A HREF=B.HTM>Capítulo 1</A>
<LI><A HREF=C.HTM>Capítulo 2</A>
<LI><A HREF=D.HTM>Capítulo 3</A>
<LI><A HREF=E.HTM>Capítulo 4</A>
<LI><A HREF=F.HTM>Capítulo 5</A>
</UL>
</CENTER>
</BODY>
</HTML>
Script para o topo.htm
<html>
<head>
<title>Topo</title>
</head>
<body>
<div align=" center" >
<img src=" images/principal1.gif" >
</div>
</body>
</html>
Crie também um arquivo com a estrutura básica do HTML e salveo com o
nome de nada.
Veja agora o código para o frame:
<html>
<head>
<title>Frames</title>
40
</head>
<frameset rows=" 64,*" >
<frame name=" topo" scrolling=" no" noresize src==" topo.htm" >
<frameset cols=" 150,*" >
<frame name=" menu" src=" menu.htm" >
<frame name=" textos" src=” nada.htm” >
</frameset>
<noframes>
<body>
<p>Esta página usa quadros mas seu navegador não aceita
quadros.</p>
</body>
</noframes>
</frameset>
</html>
No código acima se pode ver também que foi utilizada a TAG <NOFRAMES>
</NOFRAMES> esta TAG é utilizada para avisar o usuário que o navegador
dele não suporta frames, então podese colocar qualquer texto ou figura HTML
para o usuário ( Atualmente praticamente todos os navegadores suportam
FRAMES).
IFRAME
O IFRAME é um frame interno que só pode ser utilizado em IE de versão 4 ou
superior, ele está facilitando a troca de informações em sites de que precisam
mudar textos, pois ele pode ser colocado no documento e conforme alterase o
documento do IFRAME ele altera na página, ele possui os mesmos parâmetros
dos Frames.
<html>
<head>
<title>IFRAME</title>
41
</head>
<body bgcolor=" #000000" text=" #FFFFFF" >
<p>&nbsp;</p>
<p align=" center" >Utilizando IFRAME</p>
<div align=" center" >
<center>
<table border=" 0" width=" 80%" height=" 193" >
<caption>&nbsp;</caption>
<tr>
<td width=" 100%" height=" 187" align=" center" >
<p align=" center" ><IFRAME SRC=" textos.htm" ></iframe></td>
</tr>
</table>
</center>
</div>
</body>
</html>
META
O comando META é um dos comandos pouco explorados da linguagem HTML.
Contudo, é responsável por importantes aspectos de uma página HTML.
Através dele, podemos criar documentos dinâmicos, informações especificas
que serão usadas pelo servidor, em resposta a uma solicitação do usuário, ou
pelos mecanismos de busca na Internet.
Informações específicas
Esse comando das linguagem HTML pode ser usado para criar
metainformação ou variáveis, e seus conteúdos descrevem características do
documento HTML, como o nome do autor, data de vencimento ou criação do
documento, palavraschave, etc.
<META HTTPEQUIV=resposta CONTENT=descrição NAME=descrição
URL=url>
O comando META deve ser especificado entre os comandos <HEAD>
42
</HEAD>.
Variações do comando meta
Usar o recurso do autocarregamento é indicado quando você deseja exibir

alguma informação inicial e depois outra informação. Por exemplo o usuário
acessa uma página que exibe informações sobre a empresa, depois de um
tempo carrega outra página. Isso é possível da seguinte forma:
<META HTTPEQUIV=”Refresh” CONTENT=”5 ; URL=arquivo.htm”>
Outro grande uso do comando META é para que possa ser usado para as
consultas em mecanismos de busca, ou seja os mecanismos verificam no
comando META de sua página qual é a sua descrição e quais são as palavras
chaves do site.
<meta name="description" content="Site sobre Informática">
<meta name="keywords" content="Photoshop, Flash, Fireworks, Dreamweaver,
HTML">
Podemos também especificar o autor e programa gerador do código HTML
através do comando META
<meta name="author" content="Marcos Paulo Furlan">
<meta name="generator" content="HTMLKit">
Multimídia
O principal elemento de sucesso da Internet é o hiperlink. Que permite a

criação de documentos com ligações para outros contidos em qualquer
computador ligado à Internet. A maioria dos usuários que acessa a Internet faz
isso a partir de ambientes gráficos, como o Windows, e conhecendo o Windows
todos sabemos de sua capacidade em trabalhar com multimídia. Esse é o
propósito deste capítulo, vamos aprender a trabalhar com os elementos
multimídia em nossas páginas.
Os principais elementos multimídia para uma aplicação são:
Fotos ou imagens estáticas
Animação
43
Áudio
Vídeo
Consideração no uso de multimídia
O grande inimigo da utilização de multimídia é o mesmo relacionado com as
imagens, a velocidade de transferência de informações via Internet. Se uma
imagem de 70Kb pode levar vários segundos, ou até mesmo minutos para ser
carregada imagine a execução de um clipe de vídeo com mais de 1MB.
Os vídeos vão se popularizar mais quando a Internet a cabo se tornar mais
acessível.
Folhas de estilo
A CSS traz para a WEB a mesma conveniência de “um só lugar” para definir os
estilos que estão disponíveis na maioria dos editores de texto. Você pode
definir uma CSS em uma localização central para afetar a aparência das tags
HTML em uma única página da WEB ou em todo um site da WEB.
Embora a metodologia da CSS funcione com a HTML, não é HTML. Em vez
disso, a CSS é um código separado que amplia as capacidades da HTML,
permitindo que você redefina o modo como as tags HTML funcionam.
Versões da CSS
A CSS evoluiu nos últimos anos sob a orientação do W3C (
www.w3.org/Style/CSS/ ) até a sua versão atual a 2(dois). Embora a maioria
dos browsers modernos suporte a versão mais recente, os browsers mais
antigos suportam as combinações das versões antigas da CSS. Elas são:
CSS 1
O W3C lançou a primeira versão oficial da CSS em 1996. Essa primeira versão
incluía a capacidade de núcleo associada às CSS, tais como a capacidade de
formatar texto, definir fontes e margens.
CSS – Position (CSSP)
Os criadores da WEB precisavam de uma forma de posicionar os elementos na
tela de forma precisa. A CSS 1 já havia sido lançada e a CSS2 ainda estava
44
distante, de modo que a W3C lançou uma solução intermediária: A CSS
Positioning. Esse padrão de destinava a ser uma proposta que seria discutida
pelas várias partes envolvidas antes de ele ser oficializado. A Firefox, Opera,
Chrome e a Microsoft assumiram essas propostas, porém, e incluíram as idéias
preliminares nas versões 4 de seus navegadores. Embora a maioria dos
recursos básicos sejam suportados em ambos os browsers como o nome de
“marca” diversos recursos forma deixados de fora.
CSS – 2
A versão mais recente da CSS surgiu em 1998. O nível 2 inclui todos os
atributos das duas versões anteriores mais uma ênfase maior na facilidade de
acesso e na capacidade de especificar CSSs especificas de mídia. A partir do
IE e Firefox, Opera, Chrome 6 suportam CSS 2.
CSS – 3
Este padrão ainda está em desenvolvimento, e mesmo após o lançamento
geralmente leva alguns anos para que os navegadores suportem o padrão.
Sem dúvida, a nova adição será o Scalable Vector Graphics (SVG). Esse é um
formato que permite incluir formas (linhas, círculos, curvas e outras), como
vetores e não bitmaps, levando o poder dos gráficos baseados no vetor e na
tipografia à WEB.
Regras da CSS
O melhor da folha de estilo em cascata é que ela é incrivelmente fácil de
configurar. Não exige plugins ou softwares diferente – apenas regras.
Podemos definir regras que dizem a uma tag HTML especifica o seu conteúdo,
ou pode criar regras genéricas e, em seguida, aplicálas às TAGS como quiser.
Existem três etapas na regras da CSS.
Seletor HTML: A parte de texto de uma TAG HTML se chama seletor. Exemplo:
p {font: bold 12pt times;}
Classe: Uma classe é uma regra de “agente livre” que pode ser aplicada a
qualquer tag HTML de acordo com a sua vontade. Você pode dar à classe o
nome que quiser. Uma classe é o tipo de seletor mais versátil. Exemplo:
.minhaclasse{font bold 12pt times;}
45
ID: As regras de ID funcionam como os seletores de classe, porque podem ser
aplicadas, a qualquer Tag HTML. Os seletores de ID, porém, geralmente são
aplicados somente uma vez na página a determinada TAG HTML para criar um
objeto para ser usado com uma função JavaScript. Exemplo:
#objeto{font bold 12pt times;}
Incluindo CSS no Documento
Embora a CSS signifique nunca ter que definir a aparência de cada tag
individualmente, você ainda tema liberdade de definir os estilos dentro das
TAGS individuais. Isso é particularmente útil para substituir cada um dos outros
estilos que estão definidos para a página.
Veja o exemplo abaixo:
<html>
<head>
<title>CSS</title>
</head>
<body style=" backgroundcolor:black;" >
<br>
<h1 style=" color:red" >A Bruxa de Blair</h1>
<h2 style=" color:yellow" >O Filme</h2>
<BR>
<P style=" color:White" >
o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme
</p>
</body>
</html>
Incluindo a CSS em uma página WEB
A principal utilização da CSS é para definir as regras de todo um documento.
Para fazer isso, você deve inclui as regras de estilo no título do documento
aninhado dentro de um contêiner de estilo.
Embora os resultados do acréscimo de estilo dessa forma possam parecer
46
idênticos ao acréscimo dos estilos diretamente em uma TAG HTML, a
colocação dos estilos em uma localização comum permite alterar os estilos de
um documento a partir de um único lugar.
Veja o mesmo exemplo acima como ficaria:
<html>
<head>
<title>CSS</title>
<style type=" text/css" >
<!
body{backgroundcolor:black;}
h1{color:red;}
h2{color:yellow;}
p{color:white;}
>
</style>
</head>
<body>
<br>
<h1>A Bruxa de Blair</h1>
<h2>O Filme</h2>
<BR>
<P>
</P>
</body>
</html>
47
Incluindo a CSS em um site da WEB
Um dos benefícios da CSS é a possibilidade de criar uma folha de estilo para
ser usada não apenas em um único documento HTML, mas através de todo um
site da WEB. Você pode aplicar essa folha de estilo externa a uma centena de
documentos HTML.
O estabelecimento de um arquivo de CSS externo é um processo de duas
etapas. Em primeiro lugar, configure as regras em um arquivo de texto. Em
seguida, configure as regras em um arquivo e vincule ao seu documento
HTML, o arquivo que contém as formatações deve possuir a extensão CSS.
Veja o mesmo exemplo:
Arquivo CSS:
body{backgroundcolor:black;}
h1{color:red;}
h2{color:yellow;}
p{color:white;}
Arquivo HTML
<html>
<head>
<title>CSS</title>
48
<link rel=" stylesheet" href=" configura.css" >
</head>
<body>
<br>
<h1>A Bruxa de Blair</h1>
<h2>O Filme</h2>
<BR>
<P>
</P>
</body>
</html>
Principais atributos de uma folha de estilo
Atributos de Posição
Elemento Definição Exemplo de Atributo
Position Tipo de Posicionamento Absolute ou relative
Top Distância Vertical para o canto 10in, 150px, 30 cm
superior esquerdo do quadro
Left Distância Horizontal para o 10in, 150px, 30 cm
canto superior esquerdo do
quadro
Width Largura do Quadro 10in, 150px, 30 cm
Height Altura do Quadro 10in, 150px, 30 cm
Zindex Camada usada quando 1,2,3,4
sobrepondo quadros
Padding Margem entre as bordas do 2,5,10,17
quadro e o texto interno ao
quadro
Margin Margem entre as bordas do 1,2,3,4
quadro e o texto externo ao
49
quadro
Borderwidth Largura da borda do quadro Thin, medium, thick
Bordercolor Cor da borda do quadro Yellow,#00FFAA
Borderstyle Estilo da Borda None,dotted,dashed,s
olid,double
Broderwidth Largura da borda do quadro Thin,medium,thick
Atributos de Fontes
Fontfamily Fonte que será usada para Helvetica, Arial,
mostrar o texto Courier
Fontsize Tamanho da Fonte 12pt,10cm, 5in
Fontstyle Estilo Normal, italic
Fontweight Peso da fonte Bold, lighter,100,300
Atributos e Cores de Fundo da Página
Color Cor do texto Marrom,#ffffcc
Backgroun Cor de fundo Marrom,#ffffcc
color
Background Imagem de fundo Imagem.gif
image
Atributos de Texto
Wordspacing Espaçamento entre as palavras 1em, 5pt
Letter Espeçamento entre as letras 0,1em, 0,1cm, 2 pt
spacing
Text Decoração de texto None, underline, blink
decoration
Verticalalign Alinhamento vertical Middle, top, sub, super
50
Textalign Alinhamento Horizontal Left,center, right
Textheight Altura da Linha 200%, 1.2, 20pt
Definindo classes
O uso de seletor de classes permite configurar um estilo independente que
você pode aplicar em seguida a qualquer TAG HTML
Para definir um seletor de classe digite um ponto (.) e um nome de classe. Em
seguida, abra a sua definição com uma chave ({)
O nome da classe pode ser o que você quiser, desde que use letras e
números. Por exemplo podemos criar uma classe chamada .copy{.
Ela é uma classe independente e você pode usála com qualquer TAG HTML,
com uma condição: as propriedades definidas para a classe devem funcionar
com o tipo de tag com a qual você a usa.
Para aplicar a sua classe a uma tag HTML inclua class=”nome” na tag na qual
você deseja aplicar a classe. Exemplo: <p class=”copy”>...</p>.
Definindo IDS
Assim como o seletor de classe, o seletor de ID pode ser usado para criar
estilos exclusivos que são independentes de qualquer TAG HTML em
particular. Assim sendo, eles podem ser designados a qualquer TAG HTML
que se aplique.
As regras de ID sempre começam com (#) e, sem seguida, o nome do ID. O
nome pode ser uma palavra ou qualquer conjunto de letras ou números que
você quiser. Digite as suas definições para essa classe separandoas com um
ponto e vírgula. Você pode usar um ID com qualquer tipo de propriedade, mas
o melhor uso para os seletores de ID é para definir os objetos exclusivos na
tela.
Um ID não funcionará até ser especificada com uma TAG HTML individual
dentro de um documento.
Exemplo: #area{color:red;marginleft:9em;position:relative;}
<P id=”area”>...</p>.
51
Definindo TAGS dentro do contexto
Quando uma TAG é cercada por outra TAG, uma dentro da outra, são
chamadas de tags aninhadas. Em um conjunto aninhado, a TAG externa é
chamada de pai e a interna de filha.
Digite o seletor HTML da TAG pai seguida por um espaço. Você pode digitar
quantos seletores, HTML quiser para quantos pais e TAGS aninhadas
diferentes tiver, mas o último seletor da lista é aquele que recebe todos os
estilos da regra. Veja o exemplo abaixo:
<html>
<head>
<title>Tags Aninhadas</title>
<style type=" text/css" >
<!
p a:link{color:red;
textdecoration:underline;}
div.menu{color:#900;
fontweight:bold;
textdecoration:none;
fontsize:20;}
p{font:12px;}
>
</style>
</head>
<body>
<div class=" menu" >
<a href=" anterior.htm" >&lt; Capitulo Anterior</a>
<a href=" proximo.htm" >Próximo Capítulo &gt;</a>
</div>
<hr>
<h3>Novo Capítulo</h3>
<p>Teste de parágrafo
<a href=" curioso.htm" >Efeito curiosos</a></p>
52
</body>
</html>
Definindo a CSS para impressão
Quando a maioria das pessoas pensam em páginas WEB, pensa nessas
páginas exibidas na tela. Entretanto, mais cedo ou mais tarde, a maioria das
pessoas quer imprimir pelo menos algumas páginas da WEB. O que parece
bem na tela nem sempre é bom quando impresso.
A CSS permite dizer ao browser para usar folhas de estilo diferentes
dependendo da página da WEB se destinar ao monitor do computador ou a
impressora.
Crie duas folhas de estilo (arquivos.css), uma otimizada para o uso em uma
tela de computador e outra adaptada para a impressão. Veja os códigos
abaixo:
CSS para Tela:
body{
color:white;
fontfamily:Arial;
background:black url(images/backarvore.jpg) norepeat;}
h1,h2{
fontweight:bold;}
.cassea{
color:#999999;}
CSS para Impressão:
body{
color:black;
fontfamily:Arial;
h1,h2{
fontweight:bold;}
.cassea{
color:#999999;}
Código no HTML:
53
<html>
<head>
<title>Midias Diferentes</title>
<link rel=" stylesheet" href=" tela.css" media=" screen" >
<link rel=" stylesheet" href=" impressao.css" media=" print" >
</head>
<body>
<h1> Mídia de tela </h1>
<br>
<span class=" classea" >O que pode ser visto na tela será diferente na
impressão</span>
<hr>
<h2>Teste</h2>
</body>
</html>
Definindo Quebras de página para a impressão
Um problema que você encontrará ao tentar imprimir um site da WEB são as
quebras de página. Na verdade, uma página da WEB pode conter diversas
páginas impressas. Assim sendo, o cabeçalho de uma seção pode aparecer
na parte inferior de uma página e seu texto na parte superior da próxima
página.
Podemos forçar uma quebra de página ao imprimir uma página da WEB, para
isso utilize: < TAG style=”pagebreakbefore:always;”>....</TAG>
Onde alwaysà Força a quebra de página antes do elemento. Autoà permite
que o browser coloque as quebras de página.
Controles de Texto
O Kerning se refere à quantidade de espaço que há entre as letras de uma
palavra. Geralmente, quando há mais espaço entre as letras a facilidade de
leitura é maior. Por outro lado, espaço de menos pode impedir a leitura,
fazendo com que as palavras individuais apareçam menos distintas na página.
Para definir o Kerning:
54
Letterspacing: 2em.
Um valor positivo para o espaçamento de letras inclui mais espaço na
quantidade padrão; um valor negativo fecha o espaço.
Podemos também ajustar o espaçamento entre as palavras. A inclusão de um
pequeno espaço entre as palavras na tela pode ajudar a tornar o seu texto
mais fácil de ler, mas espaço demais interrompe o caminho do olho do leitor na
tela.
Para definir estes espaçamento:
Wordspacing: 8px;
Ajustando as Entrelinhas
O espaço entre as linhas também podem ser aumentados para dar um efeito
dramático, criando áreas de espaço em negativo no texto. Mas também podem
ser usados para facilitar a leitura e inclusão de comentários em seu texto. Para
definir o espaçamento entra linhas:
Lineheight:2; ou lineheight:12px ou lineheight:%
Definindo Segundo Plano
Podemos usar a propriedade background para definir a imagem e a cor do
segundo plano de toda a página ou a imagem e cor de segundo plano
imediatamente atrás de cada elemento individual da página.
Para definir o segundo plano iniciamos a digitação com a propriedade
background seguida de dois pontos e em seguida dos valores de segundo
plano:
White à Digite um valor para a cor que você deseja para o segundo plano
seguido de um espaço. Esse valor pode ser o nome da cor, um valor
hexadecimal de cor ou um valor RGB.
url(imagem/figura.jpg) à Para utilizar uma figura de fundo podemos definir a
localização do arquivo. Alternativamente podese usar none em vez de url, ele
instrui a browser a não utilizar uma imagem de segundo plano.
Repeatà Defina qual será o modo de repetição a ser utilizado eles podem ser:
Repeatx: Instrui o browser para repetir o gráfico de segundo plano na
horizontal.
55
Repeaty: Instrui o browser para repetir o gráfico de segundo plano na vertical.
Norepeat: faz com que o gráfico de segundo plano apareça apenas uma vez.
Fixed: Instrui para que a figura fique fixa ou seja não role com o site.
Scroll: Instrui para que a imagem role junto com a tela.
Right top: Digite dois valores separados por um espaço para especificar o lugar
onde o segundo plano deve aparecer em relação ao canto superior esquerdo
do elemento.
Bordas
Para definir um atributo de borda para uma caixa simultaneamente a CSS
fornece a propriedade border, você pode usar border para definir a largura, o
estilo e/ou a cor. Também é possível definir a borda do elemento em cada lado
da caixa individualmente.
As principais propriedades para bordas são: borderwidth, borderstyle, border
color.
Boder style Border width
None Thin
Dotted Medium
Dashed Tick
Solid lenght
Double
Groove
Ridge
Inset
outset
Envolvendo um elemento com texto
No inicio do desenvolvimento HTML, quando a capacidade de fazer o texto
flutuar ao redor de um gráfico foi incluída, os designers de toda parte estavam
maravilhados. A CSS levou este passo um pouco adiante, permitindo que o
texto não apenas flutue ao redor do texto, mas também que flutue ao redor dos
outros blocos de texto e do texto ao redor das tabelas, para isso usamos a
56
propriedade float.
Inicie sua definição digitando a propriedade float seguida de dois pontos. A
seguir digite uma palavrachave para dizer ao browser o lado da tela no qual o
elemento deve flutuar, e estas podem ser : right, left e none. Por exemplo
Img{float:right;}
Posicionamentos
Quando você define os atributos de uma tag HTML, por meio de um seletor em
uma CSS, na verdade, você separa todo o conteúdo dentro de um contêiner
daquela TAG como sendo um elemento exclusivo da janela. Em seguida é
possível manipular esse elemento exclusivo por meio do posicionamento da
CSS.
Um elemento pode ter um de quatro valores de posicionamento – estático,
relativo, absoluto ou fixo – embora apenas os três primeiros normalmente
estejam disponíveis na maioria dos browsers. O tipo de posicionamento diz ao
browser como ele deve tratar o elemento ao posicionálo na janela.
Posicionamento Estático
Como padrão, os elementos são posicionados como estáticos dentro da janela,
a menos que você os defina com os outros posicionamentos. Entretanto o
posicionamento estático é diferente, porque um elemento estático não pode ser
posicionado ou reposicionado explicitamente.
Posicionamento Relativo
Um elemento definido como sendo posicionado relativamente fluirá até o seu
lugar dentro da janela ou dentro de seu elemento pai, assim como o
comportamento padrão de qualquer outro elemento da HTML – ou seja, ele
aparece após tudo que está antes dele na HTML e antes de tudo que está após
ele na HTML.
Você pode mover um elemento posicionado relativamente a partir de sua
posição natural na janela usando as propriedades top e left. Essa técnica é útil
para controlar o modo como os elementos aparecem com relação aos outros
elementos da janela.
57
Posicionamento Absoluto
O posicionamento absoluto cria um elemento independente – um agente livre –
separado do restante do documento, no qual você pode colocar qualquer tipo
de conteúdo HTML que quiser. Os elementos que são definidos dessa forma
são colocados em um ponto exato da janela por meio das coordenadas x e y. O
canto superior esquerdo da janela ou de seu elemento contêiner é a origem.
Posicionamento 3D
Apesar da área da tela ser bidimensional, os elementos que são posicionados
podem receber uma terceira dimensão: uma ordem de empilhamento na qual
um elemento se relaciona ao outro.
Os elementos posicionados recebem números automáticos de empilhamento, a
partir do 0 (zero)incrementalmente com 1,2,3 e assim por diante. Esse sistema
é chamado de índice Z. O número de índice Z de um elemento é um valor que
mostra sua relação 3D com os outros elementos da janela.
Para definir o índice Z de um elemento, primeiro defina o posicionamento (ex:
absolute) depois zindex:nº.
Próximo passo
Com isso foi possível entender um pouco como as páginas web funcionam.
Porém criar sites somente dessa maneira embora possível, tornase uma tarefa
trabalhosa e demorada, por isso, utilizaremos um programa de autoração WEB,
no caso o Adobe Dreamweaver.
58
ADOBE DREAMWEAVER
O Dreamweaver é não só outra ferramenta de visual de HTML. Ele faz o que
todos os melhores editores fazem: cria tabelas, edita quadros e alterna
facilmente da visualização de páginas para visualização HTML.
Mas o Dreamweaver vai além dos outros editores para permitir criar animações
e páginas dinâmicas (DHTML). O Dreamweaver suporta completamente as
folhas de estilo em cascata (CSS), bem como camadas e comportamento de
JavaScript. Ele também inclui sua própria ferramenta de animação DHTML. E
um cliente FTP repleto de recursos, que incluem mapas visuais do site, está
embutido dentro dele.
Entre as principais novidades a partir da versão CS4, está a nova aba SPRY,
que é um framework para utilização de tecnologia AJAX
(http://pt.wikipedia.org/wiki/AJAX_(programação).
Outra grande novidade é pelo fato de partila dessa versão o Dreamweaver
fazer parte da Adobe, então o Dreamweaver possui uma integração muito boa
com o Photoshop.
Integração com o Adobe Device Central, que possibilita você visualizar seu site
em um aparelho de celular.
59
Quando iniciar o Dreamweaver pela primeira vez, você verá uma janela
principal, que permite a você criar documentos estáticos (HTML) e dinâmicos
como Coldfusion, PHP, ASP, ASP. NET e arquivos CSS.
Nessa tela, você tem na esquerda os documentos abertos recentemente ou
abrir um arquivo existente. Na tela central, podemos definir os tipos de arquivos
a serem criados. Na tela da direita ele apresenta alguns templates. Na opção
Extend, existe o link Dreamweaver Exchange, que permite você acesse o setor
do site da Adobe onde poderá ter acesso a extensões dos programas Adobe.
Embora não seja um prérequisito para utilizar o Dreamweaver, é de
extrema importância que ao criar um site você tenha uma base da
linguagem HTML. Pois mesmo para o entendimento do que será
apresentado durante essa apostila, para muitas coisas ele será necessário.
PROJETO DE UM SITE
No Dreamweaver podemos editar páginas HTML únicas como podemos
gerenciar sites, ou seja, controlar todo o projeto que está sendo feito, o que é
recomendado para a construção de seu site.
Na tela que se abre na coluna do meio temos a opção Dreamweaver Site
Clique nessa opção. Ele vai abrir um assistente de criação do ambiente site.
60
Nessa etapa você deve dar um nome ao seu site e caso já tenha um domínio
para ele pode preencher o campo URL. Ainda nessa tela, podemos observar
que acima temos dois modos de criar nosso ambiente de site a opção “Basic” a
que estamos utilizando ou a opção “Advanced” que permite preencher todas as
etapas da opção “Basic” mais rapidamente. Dê um nome ao seu site e clique
em NEXT.
61
Na segunda etapa devese definir se vai ou não trabalhar com páginas
dinâmicas (ASP, PHP, ASP. net, CFM, etc..).
No caso eu escolhi a opção PHP MySQL, pois os servidores onde serão
testado os arquivos de nossa apostila dão suporte a essa tecnologia.
Conteúdo dinâmico é o conteúdo de um site que é apresentado ao
visitante através de requisições feitas no servidor onde ele está
hospedado. Através de conteúdo dinâmico podemos acessar a
bancos de dados, e páginas que são montadas de acordo com as solicitações
feitas pelo visitante.
Se você não vai utilizar conteúdo dinâmico, você pode marcar “No, i do not
want to use a server technology”.
62
Clique em NEXT, na etapa seguinte, é necessário direcionar o site para a pasta
em seu computador onde ficarão os arquivos de seu site.
No caso escolhi a opção de editar os arquivos localmente e fazer o upload para
o servidor remoto
Na próxima etapa é necessário definir como será feita a conexão com seu
servidor. Se você ainda não possui um servidor para hospedar seu site, nessa
etapa escolha “None”. Mas caso já tenha um servidor para hospedar seu site
escolha FTP (File Transfer Protocol).
Se essa for a sua opção será necessário preencher os campos do endereço
FTP (esse endereço é fornecido pelo seu provedor de hospedagem). Na
segunda opção onde na imagem aparece “www" é a pasta para seu site.
Alguns servidores de hospedagem solicitam que seu site fique dentro de uma
63
pasta, a maior deles usa a pasta “www" ou “public_html”, mas isso deve ser
verificar com seu servidor de hospedagem.
É aconselhável sempre clicar no botão “Test Connection” para ver se houve
comunicação.
A etapa seguinte somente será disponível se você preencheu os dados para
comunicação FTP.
64
Você deve preencher o endereço de seu site. Caso você esteja testando seu
site somente localmente, essa etapa não será mostrada
É a opção “Yes, enable check in and check out “e “No, do not enable check in
and check out”.
Essa opção permite ao se trabalhar em site de forma colaborativa, onde mais
de uma pessoa manipule o site que quando um profissional pegar um arquivo
no servidor para alteração ele marca o mesmo como “check in” caso outro
profissional venha a precisar do mesmo arquivo, ele avisará que o mesmo já
está marcado e só libera para alteração do mesmo quando for dada a ele a
opção “check out”.
65
Somente marque a opção de “Yes, enable check in and check out”, caso tenha
mais de uma pessoa criando/alterando o site.
Clique em Next, será apresentada uma tela de resumo, pode concluir o
assistente.
66
Acesse a pasta Configuracao, e veja as propriedades em vídeo.
Na barra lateral direita agora ele mostra as configurações de seu ambiente
Site.
1à No Dreamweaver é possível se trabalhar
em vários projetos de site, caso precise
alternar entre eles, basta clicar nessa opção.
2à Aqui temos a visão de seu site local
(Local view em sua máquina) e Remote view (em seu servidor).
67
3àPermitem conectar / desconectar com seu servidor.
Ao clicar nessa opção, caso não tenha deixado salvo a senha, ele solicitará a
mesma.
Ao terminar de logar, você poderá acessar a área remota.
Ao clicar na área remota, ele lista as pastas de seu serviço de hospedagem.
Aqui devese ter atenção, pois ele lista todas as pastas do servidor, o cuidado é
onde publicar o site. No caso do servidor utilizado , os arquivos devem ser
publicados dentro da pasta public_html.
68
Podemos configurar o nosso site para acessar a essa pasta remota
após o login. Clique no menu site, Manage Site.
Depois clique em Edit.
Clique na guia Advanced, e depois na opção Remote Info e preencha o nome
da pasta em Host directory.
69
4à Permitem dar um Refresh (recarregamento) em sue site. Isso é útil caso
você venha a editar algum arquivo de site fora do Dreamweaver, situação
comum com imagens e animações flash.
5à Permitem baixar de seu servidor arquivo para alteração local.
6à Permitem subir para seu servidor algum arquivo local.
7à Permitem dar check out em um arquivo
8à Permitem dar check in em um arquivo
9à Sincronyze
10àPermitem expandir a tela de site, ele vai mostrar duas colunas, a da
esquerda são sua máquina e a da direita o seu servidor.
Caso seja necessário alterar qualquer configuração de seu site, basta clicar no
Menu Site, Manage Sites, escolhe o site a ser reconfigurado e clicar no botão
Edit.
Criando documentos
O Dreamweaver CS4 tem entre suas propriedades a possibilidade de se criar
sites dentro de padrões da W3C (www3c.org) que é órgão que cuida das
especificações técnicas de desenvolvimentos de tecnologias aplicadas à web
sites.
Então ao se criar uma página HTML, ele vai criar ela no padrão XHTML, que é
um padrão que permite uma validação correta para suas páginas.
XHTML é uma reformulação da linguagem HTML (Hypertext Markup

language) baseada na XML (Extensible Markup Language). Em
termos de sintaxe, a XHTML não é tão tolerante como a HTML. Isso
ocorre porque a XHTML utiliza as rígidas regras de XML para realizar as
marcações em um documento. Por padrão a XHTML separa a TAG (elemento
que permite definir qual comando será utilizado) e as propriedades para a
mesma.
Você pode através da tela de abertura criar sue documento HTML, ColdFusion,
PHP, etc..., como pode também clicar na opção “More...”, embaixo de todas.
70
Essa opção abre a possibilidade de se criar os diversos tipos de documentos,
além de utilizar um tipo de layout, na direita da tela têm a opção de escolha do
tipo de documento HTML, o padrão é “XHTML 1.0 Transitional”, mas você pode
escolher outro tipo de documento. Para saber mais sobre XHTML
(http://pt.wikipedia.org/wiki/XHTML).
Ao Clicar em Create, ele cria seu primeiro documento HTML.
71
Propriedades da página
As propriedades da página são elementos que se aplicam a uma página inteira,
em vez de somente a um objeto na página. As propriedades visuais incluem o
título da página, uma cor de fundo ou imagem e as cores do texto e do link.
Outras propriedades de página incluem a codificação de documento e as
pastas de site, se houver.
Clique em Modify, Page Properties.
Na janela que se abre temos várias categorias, a primeira delas é a
Appearance (Aparência), nessa categoria podemos definir o tipo de fonte da
página, estilo (negrito e itálico), tamanho. Cor de texto e cor de fundo, imagem
de fundo e as propriedades dessa imagem (se ele se repetira ou não) e
margens.
Na guia links, podemos definir como serão apresentados os links, quando os
mesmos forem textos.
72
Podemos definir a fonte dos mesmo tamanho, cód. do link (forma como ele vai
aparecer na página), Rollover links (muda a cor do texto quando link ao se
passar o mouse sobre ele), Visited Links (cor a ser mostrada em links já
visitados pelo visitante de seu site), Active Links (cor do texto a ser mostrada
quando clicado sobre o link). Underline Style: é como deve ser aplicado o
sublinhado em seus links, no caso da imagem está para ser mostrado
conforme o mouse passar pelo link.
A terceira Categoria Headings é relativa à formatação dos títulos de sua página
(O HTML permite a configuração e utilização de até 6 tipos de títulos)
73
A guia Title / Encoding, como o próprio nome diz é referente ao título da página
(o mesmo que aparece na janela de seu navegador) e a codificação do HTML a
ser utilizada.
A última guia é referente à imagem de rastreamento.
74
Para quem já utilizou alguma versão anterior do Dreamweaver, ou está
acompanhando o curso com alguma versão anterior, poderá observar
uma pequena mudança nas telas de Propriedades da página. Nas
versões anteriores ele apresentava apenas “Appearance”, já na versão CS4 ele
trás as opções com CSS e HTML, isso porque na versão CS4 foi melhorado e
muito a situação de integração HTML e CSS, que era uma solicitação de
usuários mais avançados.
Ao se clicar em OK, ele retorna a página do Dreamweaver, você pode observar
que no topo da janela aparece como documento não salvo o tipo de documento
e o asterisco representa que o arquivo não foi salvo, ele sempre

irá aparecer quando você modificar seu documento. Para você salvar
rapidamente um documento ao qual se esta trabalhando use as teclas de
atalho CTRL+S.
O arquivo por padrão será salvo com a extensão html. Se o arquivo a ser salvo
for à primeira página de seu site ele deve ter o nome de index (index.html).
Observe que o arquivo agora é mostrada na direita junto dentro da aba Files
O nome “index” deve ser dado ao arquivo que será mostrado em seu
site quando o visitante digitar o seu domínio, como por exemplo
http://www.apostilando.com, ao digitar o endereço ele vai procurar em seu
diretório o arquivo index, no caso index.html, e vai mostrar ele na tela do
navegador. Alguns web designers optam por usar o nome default, caso exista
os dois arquivos, a preferência fica para o index.
75
A extensão html deve ser utilizada em páginas web que não
contenham blocos de códigos dinâmicos. Páginas que contenham
blocos de código PHP devem ser salvas com essa extensão. Outro
fator importante é que as maiorias dos servidores de hospedagem utilizam
como sistema operacional e servidor web Linux+Apache, isso fará com que o
reconhecimento dos arquivos seja Case Sensitive (diferenciem maiúsculas de
minúsculas), ou seja, Arquivo e diferente de ARQUIVO e diferente de arquivo.
Publicando seu arquivo
Para publicar o arquivo recém criado, você pode na aba files clicar no botão
Put File(s) . Ele mostra a tela de conexão.
Para poder ver o arquivo publicado, clique onde está escrito “Local view” e
escolha “Remote View”.
Você pode também ter uma janela onde fique fácil de arrastar arquivos de uma
janela para outra. Basta clicar no último botão da aba.
76
Interface
Ao criar seu primeiro arquivo o Dreamweaver ele apresentará na direita o
painel de opções.
77
Onde as opções estão junto à palavra Common (flechinha) ao se clicar nessa
opção ela vai mostrar as demais opções de botões de inserção.
Na parte de cima temos a barra de documentos.
Nessa barra para cada documento aberto ele mostrará uma aba, abaixo dessa
aba temos os botões de forma de visualização do documento, de título do
documento, checagem de compatibilidade com navegadores, checagem de
erros de sintaxe de código, comunicação com o servidor de hospedagem,
previsão do documento no navegador, recarregamento da página (opção
interessante quando a mesma foi manipulada fora do Dreamweaver com o
documento aberto), opções de visualização de componentes auxiliares na
página, Visual Aids.
78
Formas de visualização
No Dreamweaver é possível trabalha com seu documento de três formas:
Design : Essa forma é a que mais se aproxima dos editores de textos
comuns, pois é toda visual, bastando inserir conteúdos no documento e digitar
os textos.
Split : Essa opção divide a sua tela em duas partes, sendo a de cima a
página sendo vista através de códigos e a parte de baixo de forma design.
Code : Essa opção vai mostrar o seu documento sendo visto através da
codificação HTML, quando se tem conhecimento de códigos HTML, em
algumas situações essa forma de visualização se torna mais rápida e pratica.
79
Visualização do Documento
É sempre importante ao desenvolver um site que ele tenha um comportamento
semelhante nos principais navegadores (Internet Explorer e Firefox), como o
Dreamweaver também da suporte ao device Central que permite ver seu site
em celulares.
Para poder ver como ficará a sua página, basta clicar no botão preview/Debug
in Browser.
Ao clicar na opção Edit Browser List, você pode definir qual o navegador de
prioridade, adicionar ou remover navegadores, etc...
Paletas
O Dreamweaver como os demais programas Adobe® possuem para a maioria
de seus comandos paletas, posicionadas á direita da tela.
80
Você pode habilitar / desabilitar as paletas através do Menu Window.
Barra de Propriedades
Na parte inferior de seu documento, será mostrada a barra de propriedades,
essa barra é dinâmica de acordo com o que está selecionado em seu
documento. Quando não há nada selecionado ele mostrará as propriedades de
texto do documento.
Para quem está utilizando qualquer versão anterior a barra terá a

forma conforme a imagem abaixo. Como já explicado anteriormente o
Dreamweaver sofreu uma mudança, atualmente as configurações de
formatação são feitas pelo CSS.
TRABALHANDO COM TEXTOS
A formatação de textos dentro de um documento HTML é muito semelhante à
formatação em editores de texto, com algumas ressalvas
Podemos adicionar observações de textos invisíveis chamados comentários,
como anotações para seus documentos.
Você definiu a formatação de seu texto no inicio na configuração da página,
81
essa formatação está no CSS de seu documento.
Podemos mudar algumas configurações de nosso texto, através do Menu
Format
No desenvolvimento de sites atualmente, não se formata mais o texto
diretamente em sua TAG de chamada exemplo (<font face= “Arial”
>texto </font>, criase um estilo para a fonte e aplicase esse estilo
na fonte (se o estilo for somente a uma palavra ficaria <span style= “fontfamily:
Arial” >texto</span>). Para quem usa qualquer versão anterior poderá também
fazer as alterações pela barra de propriedades.
Na opção para escolha da fonte o próprio Dreamweaver define tipos de letras
seguras para a WEB, você deve lembrar que as letras são processadas na
máquina do usuário, então o cuidado com a escolha das letras deve ser
grande, mas você pode editar a lista existente, assim como criar uma nova
lista.
82
O Dreamweaver CS4 como já dito tem uma forma mais correta de
formatação através de CSS.
Clique no Menu Format, CSS Styles, e clique na opção New.
83
Vamos gerar uma classe para a cor vermelha e negrito, para ser aplicada ao
nosso texto.
No campo “Selector Name”, preencha txtvermelho, vamos deixar a formatação
aplicada somente a esse documento (This document only), e clique em OK.
Na próxima tela, vamos alterar a cor da fonte e o peso da fonte (fontweight).
84
Clique em Ok.
Selecione agora o texto onde será aplicada a classe, depois na barra de
propriedades, clique na caixa para escolha da classe e escolha a classe a ser
aplicada.
Mude a visualização de seu documento e veja os códigos em CSS, o
Dreamweaver criou a classe no CSS do documento.
Localizar e Substituir
O Dreamweaver pode pesquisar seu documento e localizar um pedaço de texto
especifico. Ele também pode substituir uma string de texto por outra.
Para localizar um pedaço de texto em seu documento, clique no Menu Edit,
Find and Replace.
85
Parágrafos e Layout
A unidade básica de texto em HTML é o parágrafo. Enquanto o parágrafo é o
nome específico de texto incluído pela tag <P>, os parágrafos podem ser mais
amplamente definidos como qualquer bloco de texto especificamente
formatado. Os tipos de parágrafos incluem itens de lista, texto preformatado e
divisões.
Parágrafos e Quebras de linha
Na HTML existe uma diferença entre parágrafos HTML, com os parágrafos
utilizados em um editor de Textos como o Microsoft® Word® por exemplo. Na
HTML o parágrafo faz um espaçamento duplo entre um parágrafo e outro e
permite por padrão os alinhamentos, esquerdo (padrão), centro, direita e
justificado.
Já as quebras de linhas apenas quebram a linha na posição e o que vier depois
da quebra será colocado na próxima linha, como um parágrafo de editor de
textos.
Títulos
Pense em títulos (Também chamados de cabeçalhos) como sendo o mesmo
que as manchetes de um jornal. Eles são maiores que o corpo do texto de um
artigo e geralmente estão em negrito. Os tamanhos de títulos vão de 1 a 6,
sendo que o maior é 1.
86
Texto PréFormatado
Em geral quando você cola texto na janela de documento, ele não retém
nenhuma formatação dele. Isso inclui quebras de linha, quebras de parágrafos,
espaçamento, tabulações, tabelas formatadas com texto e outras mais.
Se você formatou texto em outro programa e deseja reter sua forma, você pode
inserilo no código de HTML da página como texto preformatado. Nenhuma das
outras convenções de HTML controlará esse texto; por exemplo, em HTML,
somente um espaço digitado será exibido, mesmo se você digitar 50 espaços
em uma linha. No texto préformatado, qualquer forma do texto feita com
espaços ou quebras de linha será preservada.
Listas
O Dreamweaver suporta diretamente dois tipos de listas, numeradas
(Ordenadas) e com marcadores (Não Ordenadas). E lista de Definições.
Podemos utilizar as propriedades do parágrafo para criar listas ou o Menu
Texto, lista, sendo que no Menu Text, List, temos ainda a opção de lista de
Definição, que é utilizada para sumários em seu site.
87
Recuando Texto
Não há tabulações em HTML comum, o tipo de recuo de parágrafos com cinco
espaços utilizados em outros tipos de publicação é geralmente substituído
configurando cada parágrafo como uma linha de espaço em branco.
Mas existem recuos de parágrafos, chamados <blockquote> que faz este
processo.
Este tipo de recuo pode ser feito através da barra de propriedades ou do menu
Format Indent e Outdent.
Caracteres Especiais em HTML
Há uma variedade de caracteres especiais em HTML que você pode querer
88
utilizar em suas páginas. O Dreamweaver possui alguns destes símbolos, e
podem ser utilizados a partir do menu Insert, HTML, Special Caracteres.
Others.
Linhas Horizontais
Uma linha horizontal é uma linha que atravessa a página horizontalmente e
fornece uma divisão explicita em vez de implícita entre as partes de um
documento.
Para criar uma linha horizontal, clique no Menu Insert Horizontal Rule Ao criar a
linha horizontal e selecionála você pode formatála.
Podemos também através do painel Insert e escolher a opção Text.
89
IMAGENS
Um dos recursos mais utilizados em Home Pages são imagens, e os formatos
mais utilizados são GIF e JPG, outro formato que vem crescendo na utilização
em HP é o formato PNG, formato reconhecido pela W3C(www.w3c.org).
Para inserir uma imagem em sua HP, temos várias formas, a mais prática é
clicando sobre o botão Insert Image no painel Common , outra forma, é
através do Menu Insert, Image.
É aconselhável que você coloque todas as imagens de seu site em uma única
pasta, pois isto vai facilitar o seu trabalho e organização do site.
90
Você pode criar sua pasta de imagens, diretamente pela paleta files
do Dreamweaver, basta apenas clicar com o botão direito do mouse
em alguma área vazia dela e depois clicar na opção “New Folder”.
Ao se escolher a imagem a ser inserida, com definimos no inicio do projeto de
nosso site utilizaremos XHTML ele abre uma janela pedindo as teclas de
acessibilidade, no campo ALT, devese preencher a descrição da imagem, no
campo Long description pode deixar em branco
91
Ao adicionar à imagem a barra de propriedades modificase para a
configuração da imagem.
Quando você tem uma figura selecionada a barra de propriedades da figura lhe
mostra a largura (W) e altura(H) da imagem. A opção Src corresponde ao local
de sua imagem, A opção Alt preenchida anteriormente, a opção Class, permite
atribuir uma classe a imagem, estudaremos as classes posteriormente.
A opção link permite transformar a sua imagem em um link, veremos esse
assunto posteriormente. E temos as ferramentas de edição.
Ao se redimensionar uma imagem por suas alças ao lado das medidas de
Altura e largura, o Dreamweaver mostrará um botão circular que permite
retornar as dimensões originais da imagem. .
Entre as opções de manipulação para uma imagem temos:
Permite otimizar a imagem
92
Ferramenta Crop, permite recortar a sua imagem, ao estar com a imagem
selecionada e clicar sobre essa ferramenta, ele mostrará sob a sua imagem as
alças de recorte, defina o corte e pressione ENTER. Importante, ao ser
recortada a imagem somente á possível voltar através de o comando desfazer.
Resample, ao redimensionar a imagem, é possível deixar a imagem salva
com o novo tamanho.
Permite modificar o brilho e contraste da imagem
Sharpen permite trabalhar o desfoque da imagem
Ainda temos como propriedades da imagem a opção V Space à Permite

colocar um espaçamento vertical entre a imagem e demais objetos, H Spaceà
Permite colocar um espaçamento horizontal entre a imagem e demais objetos.
Borderà Permite definir se sua imagem terá bordas ou não. A o colocar link
em sua imagem e não utilizar borda preencha o campo com 0(zero).
Alignà Permite definir o alinhamento da imagem em relação à vertical.
Mapas de Imagem
Podemos inserir uma imagem em seu documento atribuir a esta imagem
pontos ativos que façam a ligação com outros documentos, este processo é
chamado de Mapa de imagens.
Quando você insere uma imagem, automaticamente na barra de propriedades,
93
serão mostradas as ferramentas de pontos ativos retangular, elíptica e
polígono. Ao desenhar o ponto ativo na barra de propriedades será mostrada
uma janela para que se faça o link.
Criando Rollovers simples
Um rollover de imagem é uma ação de JavaScript que deixará você trocar a
fonte de uma imagem por outro arquivo de imagem, de modo que quando você
o mouse sobre uma imagem, outra imagem aparecerá.
O objeto rollover image define um simples comportamento que realiza três
coisas: as imagens são précarregadas quando a página carrega, quando o
mouse passa sobe a imagem especificada um arquivo diferente de imagem é
exibido, e quando os usuários movem o mouse para fora da imagem, à imagem
original é restaurada.
Para inserir uma figura de rollover podemos proceder da seguinte forma,
através do botão Rollover Image, ou através do Menu Insert, Image Objects,
Rollover Image.
94
Image Placeholder
Image Placeholder é um objeto do Dreamweaver que você pode acrescentar
em seu documento no espaço onde ficará uma imagem, mas que ainda não
está pronta, mas que permite que você vá diagramando seu HTML, Para inserir
uma imagem placeholder, você pode clicar no menu, Insert, Image Objects,
Image Placeholder, ou clicar no botão junto às opções de imagem da aba
Common.
Ao adicionar a Image Placeholder, na barra de propriedades é possível definir
propriedades para a imagem. Observe que ele possui o botão CREATE que
permite acionar o Fireworks para gerar a imagem.
95
Barras de Navegação
Um dos recursos interessantes do Dreamweaver é a criação de barras de
Navegação, é necessário que se crie às imagens que farão parte de sua barra
de navegação, os mesmos podem ser criados em qualquer programa de
imagens.
Clique no Menu Insert, Image, Objects, Navigation Bar, ou pelo botão junto às
opções de imagem da aba Common.
Defina o nome do elemento em sua barra de navegação, quais serão as
imagens ativa sobreposta e inativa, defina também apara onde será levado o
link.
96
Conteúdo multimídia
A Web atual é rica em recursos de multimídia, como vídeos, áudio, efeitos,
etc..., é claro que tudo isso depende de diversos fatores, como principalmente
velocidade de conexão e boa distribuição do conteúdo no site.
O Dreamweaver permite inserir de forma fácil em suas páginas HTML conteúdo
multimídia, tornando assim seu site mais rico e interativo.
Inserção de Animações Flash (SWF)
Atualmente quando se pensa em animação para páginas WEB, já se pensa em
tecnologia Flash, isso com razão, segundo a Adobe 98% dos computadores
com acesso a internet, possuem alguma versão do plugin do flash instalados,
e caso o computador não possua, ao acessar uma página que contenha a
animação em Flash ele automaticamente “baixa” o mesmo e solicita uma
autorização para a instalação do mesmo.
Para se inserir uma arquivo SWF (aplicação criada no flash e publicada,
cuidado, não é correto e nem possível de visualização colocar o FLA, que é um
arquivo de projeto), clique no menu Insert, Media Flash, ou clique sobre o botão
insert Flash na barra. . Dois conceitos atualmente muito debatidos e

utilizados na web atual são usabilidade (http://pt.wikipedia.org/wiki/Usabilidade) e
acessibilidade (http://pt.wikipedia.org/wiki/Acessibilidade), e o flash sempre foi considerado
97
um “vilão” em relação a esses assuntos, mas na última versão a Adobe já
trabalhou e melhorou o flash em relação a isso. Então ao inserir sua animação
em flash no Dreamweaver ele apresentará uma tela onde você pode adicionar
alguns elementos de acessibilidade como um Title, teclas de acesso e ordem
de tabulação do swf em sua página.
Na janela que se abre, localize seu arquivo SWF e insirao na página. Observe
que ele vai aparecer em sua página como um retângulo cinza com o símbolo
do flash. A barra de propriedades agora se modifica para configuração do
SWF.
Pela barra podemos configurar a dimensão do SWF, se ele ficará em looping e
se iniciará automaticamente, o espaçamento vertical e horizontal, a qualidade,
a forma de escala (Scale), quando seu filme possuir elementos que fiquem fora
do palco do Flash e interajam com o filme em tempo de animação, coloque “No
Border”. O alinhamento do flash em relação ao local onde está inserido, cor de
fundo para o filme.
Para poder visualizar o filme dentro do Dreamweaver, basta clicar no botão
Play.
A opção Parameters permite que você adicione parâmetros ao seu filme. Um
dos parâmetros mais utilizados é quando se utiliza banners flutuantes, é que
muitas vezes se torna necessário que o fundo de seu filme fique transparente
onde não existe animação. Ai utilizase o parâmetro “wmode” com valor
98
“transparent”.
Flash Vídeo
Um dos grande recursos criado ultimamente para disponibilização de vídeos na
WEB foi o formato FLV (Flash Vídeo), pois permite a publicação de vídeo em
web sites, sem a necessidade de um servidor de Streaming, plugins, etc...,
basta apenas que o navegador do usuário tenha o plugin do Flash instalado
(98 % dos computadores o tem), o maior “ícone” de sucesso do Flash vídeo ao
o site YOUTUBE (www.youtube.com), que atualmente é sinônimo de vídeo na
Internet.
Para se inserir um arquivo FLV em HTML com o Dreamweaver é muito fácil.
Clique no painel CommonFLV, ou no Menu Insert, Media, Flash Vídeo.
Na tela apresentada, é necessário definir o caminho onde está o seu arquivo
99
FLV, o Skin de controle do vídeo, as dimensões (Use o botão Detect Size), as
opções Auto play (inicia automaticamente) e Auto Rewind (reinicia
automaticamente) são opcionais, e a última tela é uma mensagem a ser
mostrada caso o usuário não tenha o plugin do flash.
O Formato Flash Vídeo criado pela Macromedia ®, e comprada pela
Adobe®, é atualmente o formato mais recomendável para distribuição
de vídeos na WEB. Para transformar seu vídeo AVI, MOV, etc... em
FLV é necessário um programa de conversão, pois ele usa como compactador
do vídeo o plugin OnVp6 ou OnVP7, o Adobe Flash® possui junto a ele o
Flash Vídeo Encoder, que faz essa conversão, mas já existem alguns
conversores de vídeo que fazem essa conversão.
Plugins
Para adicionar outros tipos de arquivos multimídia em seu web site é
necessário à adição de um recurso chamado de Plugin, para inserir um plugin
no Dreamweaver. Botão Plug in na barra de ferramentas.
Na janela que se abre você deve localizar no projeto de seu site o arquivo a ser
publicado. Os demais acertos do arquivo devem ser feitos pela barra de
propriedades, como tamanho, borda, na opção Plugin URL, somente preencha
se você souber o caminho para que o mesmo possa ser baixado caso o
usuário de seu site não o localize.
Podemos acrescentar alguns parâmetros em nosso arquivo de multimídia,

clique no botão Parameters.
100
Observe na imagem acima que adicionei um parâmetro para que o filme inicie
automaticamente.
Para arquivos que venha a ser publicados como plugins é
recomendável utilizar para vídeo o formato WMV (Windows media
vídeo) e para áudio o formato wma (Windows media áudio), existem
diversos conversores no mercado que permite gerar esse tipo de arquivo. A
Microsoft® disponibiliza o programa Windows Media, que é freeware, para
converter formatos padrões de vídeo para wmv, e arquivos de áudio para wma.
Caso você precise converter um arquivo que esteja em CD de áudio para wma,
pode utilizar o Windows Media Player para fazer a conversão.
Hyperlinks
O principal elemento que fez com a Internet crescesse como está atualmente é
o fato de que podemos rapidamente mudar de conteúdo através de simples
clique de mouse, os chamados Hyperlinks.
Podemos criar links para todos os tipos de arquivos existentes, mas somente
alguns podem ser abertos nos navegadores, os demais, serão salvos no
computador do usuário.
Links Absolutos e Relativos
Antes de começar a colocar os links em suas páginas da WEB, você deve estar
ciente dos diferentes tipos de nomes de caminho que você pode utilizar para
vincular a outro documento na Internet
Os nomes de caminho absolutos
Apontam para uma localização na Internet fora do site no qual a página atual
está localizada. No nome de caminho http://www.adobe.com.br/index.html o
101
documento index.html está localizado dentro da raiz do site.
Os nomes de caminhos relativos
Apontam para links dentro do mesmo site, por exemplo, no site atual
http://www.seusite.com.br/ preciso fazer um link para o arquivo
imagens.html, então por estar no mesmo diretório somente ligo ao nome do
arquivo, já se preciso linkar para uma imagem localizada na pasta imagem,
faço da seguinte forma imagem/figura.gif que o link vai procurar dentro da
pasta imagem o arquivo figura.gif.
Em servidores Windows não existe a diferenciação entre maiúscula e
minúsculas no nome e extensão dos arquivos, nem sobre acentuação e
espaços.
Mas na internet, a grande maioria de servidores operam com o Sistema
Operacional LINUX que baseado na UNIX, então sempre procure utilizar nos
nomes dos arquivos de seu site, letras minúsculas, sem acentuação e sem
espaços, pois se você colocar letra maiúscula no nome de um arquivo e fizer o
link com letra minúscula o arquivo não será encontrado.
Criando Links
Crie um texto e o selecione e observe que na barra de barra de propriedades
ele lhe dá opção de criar um link, crie o link para este texto. Se você não sabe
o nome correto de seu link, clique na pasta amarela à direita da caixa de link.
102
Defina o arquivo ao qual será ligado e no menu pop onde você pode especificar
se que o link relativo à página, ou site Root para fazer o link relativo a uma
localização central em seu site da WEB.
Podemos também para criar um link arrastar “point to file” diretamente até o
arquivo a ser linkado.
Observe que quando aplicamos as configurações de Propriedades na Página
(menu, Modify, Page Properties – CTRL+J), e ao criarmos um link em nosso
texto o mesmo já fica sendo mostrado com as configurações de estilo.
Mude a visualização para Split para que você possa ver o estilo definido para
links (TAG “a”) e o mesmo aplicado no seu documento.
Observe que abaixo do campo link temos um campo chamado Target (alvo),
quando o campo fica vazio,ao se clicar sobre o link no navegador, ele abre na
página atual do link sobrepondoa. Se eu precisar que o link abra em uma nova
janela, basta eu especificar nesse campo a opção _blank. As demais opções
103
são:
_parentà Carrega o link no frame de nível superior ao atual
_selfà Carrega o link na mesma janela ou frame
_topà Remove todos os frames e carrega o link em uma janela inteira.
Crie outro texto e aplique um link nele com a opção de abrir em uma nova
janela.
Um item muito importante quando se faz links para um endereço
absoluto como no exemplo é sempre colocar o protocolo a ser
utilizado, ou seja sempre colocar http://www.apostilando.com.
Âncoras
Permite criar links internos na mesma página, facilitando assim a navegação
em documentos longos.
Criando a âncora
Primeiro defina os links que vão chamar a âncora dentro de sua página.
Depois atribua a um texto, figura ou espaço em branco a sua âncora, através
do Menu Insert Named Anchor.
junto ao local onde a âncora será criada aparecerá uma marca .
Chamando o link da âncora
Para criar agora o link para esta âncora na caixa de links digite
#nomedaâncora. Se a âncora estiver em outro documento coloque
104
documento.htm/#nomedaancora.
Acesse a pasta Ancora, e veja as propriedades em vídeo.
Links para email
Podemos também atribuir link para email, através de textos ou imagens, o que
muda é a forma de chamada, para se criar o link para um email, devese usar
mailto:endereco@seuemail.com.br.
Essa forma de link para email tem um problema que ao ser clicado
no link ele vai abrir o programa de email padrão (Outlook Express,
Outlook, etc...), e muitos usuários não utilizam programas de email,
acessam o email através dos próprios webmails (hotmail.com, gmail.com,
yahoo.com), então nesses casos é aconselhável ao se criar o link colocar o e
mail para onde será apontado o link.
TABELAS
A funcionalidade da tabela foi adicionada a HTML para simplificar a
apresentação de dados tabulares, como relatórios científicos.
Para criar uma tabela é muito importante que a mesma seja planejada e
rascunha antes para depois minimizar o seu trabalho.
Para inserir uma tabela clique no botão Insert Table, ou no botão de inserção
de tabela no painel a direita, ela está disponível na aba Common e Layout.
105
Defina número de linhas e colunas desejadas, se quer borda e qual será a sua
espessura, defina a largura de sua tabela em relação à largura da tabela (em
Pixels ou em porcentagem), o espaçamento entre as células e o espaçamento
106
entre a célula e o seu conteúdo (Cell padding e Cell Spacing).
Na painel na opção Layout podemos alterar as propriedades de nossa tabela.
Podemos também alterar o alinhamento da tabela, a cor de fundo da tabela,
cor de borda e imagem de fundo da tabela.
Se você clicar com o botão direito de seu mouse em qualquer célula de sua
tabela, ele habilita também as opções de manipulação de nossa tabela.
107
Para podermos selecionar as células (TD), linhas (TR) ou toda nossa tabela
(Table), podemos usar o rodapé do Dreamweaver.
Células
Ao clicar em uma célula, ou selecionar mais de uma célula, a barra de
propriedades muda para a formatação de texto e abaixo as propriedades
referentes às células.
As possibilidades de alteração das células são a opção de mesclar duas ou
mais células (na imagem o botão está inativo por termos apenas uma célula
selecionada), ao lado do botão mesclar temos o botão dividir células, ao clicar
108
sobre ele podemos dividir em colunas ou linhas.
Ao lado temos as opções de definir as dimensões da célula largura (W – width)
e altura (H – height), as dimensões podem ser aplicadas em pixels ou em
porcentagem, sendo que em pixels.
A opção No wrap tem como objetivo impedir que o conteúdo quebre para a
linha de baixo da célula ao alcançar a largura da célula.
A opção Header permite atribuir à célula a propriedade de célula de cabeçalho
(título), acrescenta um negrito e um peso maior à fonte.
Podemos também acrescentar cor de fundo e de borda a nossa tabela, bem
como imagem de fundo.
Tabela normal
Tabela Modificada
109
FOLHAS DE ESTILO
O CSS (Cascading Style Sheet) ou folhas de estilo em cascata é o recurso
coreto de formatação de elementos dentro de seu documento HTML, seguindo
os padrões de internet atuais recomendados devese sempre utilizar a CSS
para formatação e posicionamento de TAGS HTML.
Em nosso primeiro exemplo ao configurarmos nossa página com margens,
definição de cores e texto para textos e links, e por trabalharmos com XHTML,
todas essas formatações são atribuídas em código de CSS.
O Dreamweaver CS4 reforçou bastante o recurso de CSS para formatação nas
páginas.
No topo das paletas à direita temos o painel CSS Styles.
110
Para se trabalhar com as folhas de estilo é necessário algum conhecimento de
HTML, pois ela baseiase na formatação das TAGS HTML e suas funções.
Podemos alterar as propriedades de uma tag existente, como podemos criar
classes e identificadores para as TAGS onde podemos ter dentro de uma folha
de estilo TAGS <TABLE> de tabelas com duas ou mais formatações.
Criando uma folha de estilo baseada em uma TAG existente.
Para criar uma folha de estilo simples clique no painel CSS clique no botão
New CSS Style .
111
Escolha a opção Tag (redefines na HTML element), automaticamente ele
mostra o H1 que é relativo ao título de nível 1. A opção Rule Definition:
permite definir a formatação em um arquivo de folha de estilos, ou somente no
documento atual.
Ao clicar em OK ele abre a janela onde podemos definir a forma que terá a
nossa TAG H1.
A opção Type, permite alterar as configurações de fonte da TAG Selecionada.
Na opção Background podemos definir as configurações de plano de fundo da
célula.
Em Block, podemos definir as configurações de parágrafos do texto, como
espaçamento entre palavras, alinhamentos, etc...
A opção Box permite criar um bloco de nossa TAG definindo largura e altura,
etc...
Em Border, podemos definir o tipo de borda a aplicar em nossa TAG.
List permite alterar as configurações de nossa lista de marcadores
Positioning permite trabalhar com posicionamento da TAG selecionada em
relação ao Documento.
Extensions: Permite definir quebras de página, cursor do mouse, e filtros a
serem aplicados ao seu web site.
O código HTML
112
Acesse a pasta CSS, e veja as propriedades em vídeo.
Editando uma folha de Estilos
Para alterar algo em sua folha de estilo, clique no botão Edit Style Sheet ,
será perguntado, qual o estilo existente que você quer alterar.
Criando uma classe
As classes permitem que se crie uma formatação especial que possa ser
adicionada dentro de outras TAGS, por exemplo, preciso formatar as células de
uma tabela com duas cores diferentes, posso criar duas classes e aplicar
dentro delas, apelas clicando na tabela e depois clicando nas classes no painel
de estilos, conforme fizemos no inicio do módulo de Dreamweaver para a
formatação de fonte
A formatação da Classe é igual à formatação de uma TAG HTML, a diferença é
que é necessário atribuir a classe a TAG.
Depois de criar a classe, selecione o elemento que vai receber a classe e
aplique ela ao conteúdo selecionado pela barra de propriedades.
113
Acesse a pasta ClasseCSS, e veja as propriedades em vídeo.
Em algumas situações será necessário aplicar o estilo em Tags não
selecionáveis pelo modo visual do Dreamweaver, nesses casos é necessário
aplicar o estilo pelo modo de código, basta apenas após o nome da TAG digitar
< TAG class= “nomedaclasse” >
O modo de aplicação de CSS que vimos até o momento está diretamente
aplicado no documento.
Caso tenhamos formatações de CSS que sejam aplicadas a diversos
documentos, podemos gerar um documento com a extensão CSS e criar um
link em cada documento para esse arquivo, isso além de padronizar seu site,
fará com qualquer alteração de formatação, afetará em todos os documentos.
Para utilizar a formatação de CSS através de um arquivo externo, crie um novo
documento, e escolha a opção CSS.
Coloque a formatação desejada de seu CSS nesse documento.
Para “linkar” ao arquivo CSS criado ao documento existente clique no botão
Attach Style Sheet ∙.
114
Basta agora todas as formatações a serem feitas no arquivo CSS, serão
aplicadas a todos os documentos ligados ao arquivo css.
Conforme já dito nessa apostila o conhecimento básico da linguagem
HTML é realmente necessário para poder aproveitar todo os recursos
que o Dreamweaver fornece ao usuário. A formatação CSS é um
grande recurso de formatação de seu HTML e é uma das formas de você
deixar seu site dentro de norma pela W3C(www.w3c.org).
CAMADAS E POSICIONAMENTO
As camadas fazem parte do mundo das folhas de estilo em cascata e da
Dynamic HTML. Uma camada é um recipiente para conteúdo de HTML,
normalmente definido pelas TAGS <DIV> ou <SPAN>, que você pode
posicionar em qualquer lugar em uma página.
As camadas são denominadas camadas, porque podem ser posicionadas em
três dimensões. Você pode configurar uma localização absoluta ou relativa
para uma camada ao longo dos eixos x e y da página. A terceira dimensão é
denominada índice Z e permite que as camadas se sobreponham.
Os designers realmente adoram as camadas por sua versatilidade: você pode
ocultar as camadas (por visibilidade) ou até partes das camadas (com o índice
Z ou com o recorte de áreas) quando uma página inicialmente carrega. Então,
você pode escrever um script que fará com que as áreas ocultas apareçam
depois que certa quantidade de tempo ou quando certo evento de usuário
acontece.
115
Posicionamento CSS
Você pode aplicar posicionamento de CSS para um bloco de texto, um
elemento do tipo bloco, uma imagem ou uma camada. Há duas maneiras de
aplicar posicionamento: uma é criar uma classe de estilo e aplicála às
seleções ou blocos de texto que você quer posicionar na página. A outra é criar
uma camada na janela de documento que você pode modificar
independentemente de criar um estilo.
Posicionamento absoluto versus relativo
A posição de um elemento de HTML pode ser absoluta, relativa ou estática.
O posicionamento normal é chamado estático e faz com que o elemento seja
posicionado dentro do fluxo normal do texto.
O posicionamento relativo significa que a posição de uma camada ou outro
elemento é definida em relação ao canto superior esquerdo do recipiente pai.
Entretanto, o elemento relativo está incluído no fluxo da página e também é
embutido – ele não causa quebras de linha automáticas.
Para garantir as propriedades inline, uma tag <SPAN> deve ser utilizada em
vez de uma tag <DIV>.
Criando Camadas
Para poder criar uma camada você deve deixar seu painel em Layout e deve
usar um dos dois elementos de criação de camadas.
116
As propriedades de nossa Layer. Da caixa de propriedades são o nome da
layer. A propriedade Overflow é como a Layer vai se comportar no documento,
o padrão é visível, mas podemos definir ela como Hidden (escondida), existe
esse recurso, pois podemos através de scripts deixar ela visível em através de
botões, textos e imagens. Scroll (com barras de rolagem), que manterá barras
de rolagem em sua layer, isso permite que ela tenha um tamanho menor que o
seu conteúdo. Auto que mostrará as barras de rolagem somente quando forem
necessárias.
A opção Left(L) e Top(T) são relativas ao posicionamento da Layer,
observando que os pontos 0,0 (L, T) ficam no canto superior da página.
As dimensões de nossa Layer W (width) e H (height) são representadas
sempre em pixels.
Zindex é relativo ao empilhamento de nossas camadas, isso permite que
possamos colocar uma layer sobre a outra, a camada de Zindex maior sempre
ficará acima da outra. Um detalhe importante, animações em SWF sempre
ficarão acima da layers independente do Zindex, sendo necessário o uso do
parâmetro de Transparência (conforme visto no capítulo de Multimídia).
117
Vis, é referente à visibilidade da camada.
A opção BG Image permite definir uma imagem de fundo da Layer e a opção
BG Color, permite colocar uma cor de fundo na Layer.
A opção Clip permite recortar nossa Layer
Acesse a pasta Posicionamento, e veja as propriedades em vídeo.
No painel camadas é possível marcar a opção “ Prevent Overlaps” , isso fará

com não seja possível sobrepor às camadas.
Escolhendo as TAGS
Há duas tags utilizadas na criação de camadas, as tags <DIV> e <SPAN> . A
tag <DIV> utilizada posicionamento absoluto, uma quebra de parágrafo cerca a
tag<DIV>. Se preferir criar uma camada embutida sem quebras de parágrafo
utilize a tag <SPAN>.
Uma das principais vantagens das camadas é que se pode posicionálas e
arrastálas para qualquer posição de sua página, basta apenas clicar sobre o
quadradinho no topo e arrastála ou alterar as propriedades Esquerda e Alto na
barra de propriedades.
Para redimensionar as camadas podese utilizar as alças de
redimensionamento ou através da largura e altura na caixa de propriedades.
118
Aninhando e Sobrepondo Camadas.
Aninhando Camadas
A coisa mais interessante sobre as camadas é que você pode colocar uma
camada entro de outra ou pode criar duas camadas que se sobrepõem.
Para sobrepor duas ou mais camadas, é somente mover uma sobre a outra.
Para aninhar uma camada dentro de uma camada, basta criar a primeira
camada e depois criar a segunda camada dentro da primeira.
No painel Camadas você tem as camadas sendo mostradas, clique sobre a
segunda camada criada e arrastea sobre a primeira camada com a tecla CTRL
pressionada e observe que a camada fica como uma subdivisão da primeira.
Acesse a pastas Camadas Aninhadas, e veja as propriedades em

vídeo.
Criando layout com DIVS
Primeiro crie uma DIV que será o quadro de nosso site. Defina pela barra de
propriedades suas propriedades.
depois crie a segunda DIV que fará parte do topo de nosso site.
Para que a layer criada fique dentro de nossa layer bloco, clique sobre ela na
paleta “AP Elements”, pressione a tecla CTRL, e mantendo ela pressionada
arraste ela para cima de bloco. Ela ficará como sendo “filha” da layer principal.
119
Após ter adicionado o topo como uma layer filho, é necessário fazer com as
suas coordenadas Left e Top fiquem em 0.
Crie uma nova layer com o nome de rodapé e posicione abaixo, deixe também
o Left em 0 e como filha do bloco
Crie a layer menu e coloque ela como filha do bloco, como nosso topo tem
135px de altura, então seu topo deverá 135px e left em 0, como largura deixe
com 150px.
120
Para finalizar crie a layer do miolo, ela terá seu topo em 135px e left em 150px.
Suas dimensões deverão ter largura, 630px e altura 220px.
Ao se criar um layout baseado em Layers, é importante calcular cada
espaço a ser utilizado por elas. Todo o posicionamento, como suas
principais características são todas armazenadas em folhas de estilo.
Veja como ficou o painel de layers para nosso layout.
121
FRAMES
A construção de páginas em Frames embora seja possível e considerada
ultrapassada e fora de padrões de layout atuais e futuros. Mas em algumas
situações ela pode se tornar muito úteis.
Embora uma página baseada em frames funcione como uma única página
WEB, cada frame, contém um único documento de HTM que pode incluir
conteúdos completamente separados e barras de rolagem independente. A
cola que une esses documentos é chamada documento de definição de
frameset ou página de frameset – um frameset é um conjunto de frames e a
página de frameset é que define como um conjunto.
Criando os Frames
Inicie um documento novo. No painel Insert, escolha a opção Layout e a última
opção é Frames.
122
Nas versões anteriores do Dreamweaver, o processo era através do
Menu File, New, e depois escolha as opções de Frames.
Ele apresenta diversas opções de divisões de páginas. Quando a composição
de frames era o padrão de criação de páginas, um dos modelos mais utilizados
era o “Top and Nested Left Frames”, que criava uma página para o topo, uma
par o menu e uma para o miolo. Atualmente algumas empresas criam páginas
secundárias ao site principal para apresentação de galeria de imagens, ou
situações secundárias.
Em nosso exemplo vamos escolher o modelo “Bottom Frame”
Ao escolher a opção o Dreamweaver, abre uma janela informando qual o frame
está sendo mostrado e permite a você alterar o nome do frame.
123
Podemos alterar as propriedades de nosso frames colocando bordas, cores
para a borda, largura para a borda definir unidade de medida através da barra
de propriedades dos frames. Para que seja possível acessar as propriedades
da barra de ferramentas, clique na linha divisória na tela.
Podemos acrescentar novas molduras criando novas subdivisões em nossos

frames.
Acesse a pasta Frames, e veja as propriedades em vídeo.
Vamos montar uma galeria simples.
Na parte de cima de seu frame adicione uma imagem grande de sua galeria. E
na parte de baixo crie uma tabela, para uma melhor organização e acrescente
as miniaturas.
124
Salvando Frames
Existe um cuidado muito grande ao salvar uma página com Frames, pois uma
frame como o nosso exemplo possui 3 (quatro) páginas abertas, o topo, o
rodapé e o quadro principal que armazena o frame.
Para salvar todas as páginas do frames, clique no Menu File Save All (salvar
todos). Observe que o Frame quadro, será o primeiro a ser salvo (ele mostra
uma borda grossa em volta de todos os frames.
Depois ele vai salvar o rodapé, observe que o miolo ficará agora com a borda
mais grossa. O terceiro Frame a ser salvo é o miolo.
Alterando as propriedades de suas molduras
Para modificar o nome e as propriedades de suas molduras individualmente,
chame o painel Frames.
Podemos definir qual será a página a ser aberta dentro do Frame, formatação
das bordas, definir qual será o nome de nosso frame, se será possível
redimensionamento, como será a paginação e largura e altura da margem.
125
Ao clicar na opção MainFrame no painel ele habilita as propriedades do frame.
Mude seu nome para miolo.
Criando links em Frames
Agora vamos criar o link da primeira imagem com o arquivo HTML que contém
a imagem.
Clique na imagem, adicione o link para a página miolo.html e observe que no
campo Target, você deve clicar e escolher “miolo”.
Agora inicie um novo HTML, e adicione a segunda imagem e save como
imagem02.html, depois repita o processo e salve como imagem03.html, e
assim por diante. Depois faça os links , sempre se lembrando de mudar o
Target para miolo.
Criando Frames Embutidos (IFRAME)
Existe uma TAG chamada <IFRAME> para fazer os frames aparecerem dentro
de uma página.
Para poder introduzila proceda da seguinte maneira abra o visualizador de
código do HTML e insira a seguinte TAG <IFRAME SRC= “arquivo.htm”
></IFRAME>. As propriedades do IFRAME são as mesmas do FRAME.
Podemos também acrescentar IFRAME, pelo painel Insert, Layout.
126
Ao clicar no botão ele divide muda para visualização SPLIT
Nesse caso, você precisa adicionar as informações diretamente no código, ou
então selecione o código IFRAME e clique no menu Modify, Edit TAG.
127
Em Source, devemos colocar qual será a página a ser aberta no IFRAME, em
Name, devese colocar um nome para o IFRAME (É imprescindível o
preenchimento desse campo, caso que faça link para abrir outras páginas
dentro do IFRAME).
Width e Height para definir a largura e altura do IFRAME.
Margin width e Margin Height para definir as margens de IFRAME e do
conteúdo interno e externo dele.
Alignment, forma de alinhamento do conteúdo dentro do IFRAME
Scrolling, definição de como serão apresentadas às barras de rolagem (A
opção Auto apresentará as barras de rolagem somente quando necessárias).
Show Borders, permitirá ter ou não bordas em seu IFRAME.
FORMULÁRIOS
O Dreamweaver possui todos os recursos para a criação de um formulário,
inclusive para formulários dinâmicos que atribuam envios para páginas
dinâmicas como ASP, PHP, JSP, CFM.
Os elementos de um Formulário
Para inserir um formulário no Dreamweaver clique no Menu Insert Form, ou
através do painel Insert, aba Forms.
128
Será acrescentado ao seu documento à área de seu formulário, essa área é
representada com uma linha pontilhada de vermelho.
Na barra de propriedades devese definir qual será o nome do formulário a
forma de envio. A forma de envio pode ser para um arquivo dinâmico (ASP,
PHP, etc...) que vai tratar os dados postados no formulário e enviar para um
banco de dados ou direcionar para um email, ou diretamente para um email.
É necessário também definir o Método a ser utilizado POST ou GET.
Tipos de campos de formulário
Para inserir os objetos do formulário, clique no Menu Insert Form Objects, ou
clicar nos botões correspondentes na Aba de formulário.
É importante sempre verificar se os campos estão sendo colocados dentro do
129
retângulo pontilhado que é a área de nosso formulário.
Caixas de Texto : Permitem que se entre com textos e números. Pode ser
de linha simples, multilinha – Chamados de caixas de comentários, e senha
onde ele mascara tudo o que for digitado com sinais de (*) asteriscos.
Ao acrescentar um campo de texto é necessário preencher alguns campos de
propriedades. Devemos dar um nome ao nosso campo de texto, definir o
numero de caracteres visíveis (Char width), isso implicará no tamanho do
campo do formulário. Max Chars define um número máximo de caracteres que
poderá ser preenchido no campo.
Caixas de Seleção : São as caixas de checagem que permitem que se
selecione vários para preferências do visitante e podem ter o seu estado inicial
selecionado ou não.
Ao se criar um grupo de opções de marcação as opções deverão sempre
pertencer ao mesmo grupo.
Botão de Opção : Permitem que o usuário faça apenas a seleção de um
objeto entre várias opções possíveis e também podem ter o seu estado inicial
selecionado ou não.
Ao se criar um grupo de opções de marcação as opções deverão sempre
pertencer ao mesmo grupo.
Menu de Lista: Permitem que se criem menus de listagem para escolha do
usuário.
130
Ao criar o menu de lista na barra de propriedades é necessário clicar no botão
Lista Values e preencher o Label (nome que vai aparecer ao usuário) e valor do
campo ao ser selecionado.
O padrão do campo é ser uma lista, mas podemos definir ele também como
uma lista. Ao campo ser definido como uma lista podemos definir quantas
linhas serão visíveis e se será possível selecionar mais de um item na lista
(basta marcar o campo Selections – Allow multiple).
Botões : Permitem que se crie botões de ação de enviar (Action Submit
Form), e limpar campos (Action Reset Form), ou para eventos através de
linguagens de scripts (None).
Crie um layout de formulário conforme a seguir.
131
No campo Nome coloque o textfield como “nome”.
Para o campo email preencha “email” e para o campo comentários coloque

“comentários”.
Você pode observar que no método de envio de nosso formulário o mesmo
envia os dados para um documento chamado “env_contato.php”. Caso você
não tenha preenchido esse campo, basta apenas clicar na tag <form> no
rodapé do Dreamweaver.
Esse arquivo “env_contato.php”, será o arquivo que vai receber os dados
postados no formulário. O código que vamos criar será na linguagem PHP.
Crie o seu arquivo env_contato.php, o visualize pelo modo COD e acrescente
o seguinte código onde ficará a sua resposta.
<?
//Recebendo os dados do formulário.
$nome = $_POST[" nome" ];
$email = $_POST[" email" ];
$assunto = $_POST[" assunto" ];
$mensagem=$_POST[" comentario" ];
//Setando o restante das variáveis para o disparo do email
$destinatario = " seumail@seuprovedor.com.br" ;
$formato = " \nContenttype: text/html\n" ;
//Incluindo os campos nome e email no corpo da mensagem.
$msg = " Nome: " .$nome." <br> Assunto: " .$assunto." <br> Mensagem:
132
" .$mensagem;
//Enviando o email
mail(" $destinatario" ," $assunto" ," $msg" ," from: " .$email.$formato);
//Criando a mensagem de confirmação de envio de email.
echo " <div align=center>Mensagem enviada com sucesso! Aguarde um
retorno. Clique <a href='index.php'> <b>aqui</b> </a> para
retornar.</div>" ;
?>
Menu de Salto
Junto à criação do Formulário existe uma opção chamada Jump Menu
, que permite criar um menu de lista, que ao ser selecionado
direcional para um link ou URL.
Para criar seu menu de Salto, clique no botão Jump Menu na Aba Form
133
Na primeira parte da janela vai aparecer o primeiro elemento a ser colocado no
menu, na opção Text devese definir qual será o nome a ser apresentado, na
opção “When selected, go to URL” você deve preencher com o link a ser aberto
ou URL, para criar o seu segundo elemento clique no sinal de mais (+) no topo
da janela. Repita o processo para os demais campos a serem criados.
Após definido todos os campos é necessário definir a forma de abertura dos
links, um nome para seu menu e as opções.
A opção “Insert GO Button after menu” criar junto ao menu de lista um botão
que permitirá ir para o destino do link, com ele desmarcado, ao selecionar ele
fará o link ao ser selecionado.
COMPORTAMENTOS
As ferramentas de comportamento do Dreamweaver permite que você aplique
as ações comuns de JavaScript sem escrever nenhum JavaScript.
Você pode fazer algo acontecer em uma página quando seus usuários
carregam uma página, clicam em um objeto ou movem o mouse pela tela.
Logicamente que o Dreamweaver possui as rotinas mais comuns de javascript,
pois o JavaScript é uma linguagem de scripts Orientada a Objetos e a sua
estrutura e construção depende do seu conhecimento em relação à linguagem
Adicionando Comportamentos
Adicionar um comportamento a uma página é incrivelmente simples – o
complicado são os detalhes. Todos os comportamentos do Dreamweaver são
adicionados e editados com o inspetor Behaviors.
134
Para adicionar um comportamento a sua figura basta apenas clicar sobre o
sinal de (+) na esquerda superior do Painel.
Popups
Importe uma imagem qualquer e clique sobre ela, depois chame as opções de
comportamentos e escolha Open Browser Window (Abrir uma janela de
navegador), esta é uma das opções mais comuns pelo fato de as janelas Pop
Up serem muito utilizadas para propaganda em WebSites.
135
Ao terminar coloque Ok e observe o painel behaviors. Observe que ele mostra
a ação e o evento que fará com que a ação. Verifique se está como onClick, se
estiver com outro evento, mude para onClick
Ocultar Mostrar camadas
Atualmente muitos usuários utilizam bloqueadores de janelas popup, embora
seja possível configurar e até mesmo autorizar à abertura de janela popup, a
maioria dos usuários de Internet simplesmente a ignoram. Um dos recursos
que tem crescido ultimamente são os chamados “banners flutuantes” que são
Layers com a publicidade que antes eram utilizadas dentro das janelas popup,
é necessário apenas criar dentro dessa janela a possibilidade de se fechar a
Layer (assim ela vai aparecer para o usuário, mas na realidade ela ficará
oculta).
Para criar seu banner flutuante, proceda da seguinte forma:
136
1à Crie uma layer, de um nome a ela e coloque dentro dela o conteúdo a ser
mostrado. É aconselhável nomear a sua layer
2à É possível definir textos, imagens e mapas de imagens para chamarem o
comportamento que permitirá fechar a janela. No caso da imagem acima foi
definido um texto fechar.
3à Selecione o texto e no painel Behaviors, clique na opção Show / Hide
Layers.
137
4à Na janela aberta vai aparecer sobre as layers existentes em seu
documento, selecione a Layer a ser fechada e clique no botão Hide.
5à Na paleta Behaviors ele vai mostrar o comportamento criado, é necessário
mudar o comportamento para fechar a Layer. Coloque como opção onClick,
pois somente ao ser clicado no texto é que será fechada a Layer.
Manter a opção de evento do mouse para chamar um POPUP , ou
para fechar uma layer, embora funcione de forma correta, possui um
pequeno problema, ele desabilita o cursor de link do navegador (mãozinha),
podemos corrigir isso chamando o comportamento como um link, lembrando
que o comportamento é uma função Javascript.
Visualize seu documento em SPLIT.
Observe que no código aparece o código de fechamento da Layer:
onclick=" MM_showHideLayers('imagem','','hide')" .
Copie: MM_showHideLayers('imagem','','hide')
Ainda com o texto selecionado, clique na caixa de link e digite:
138
javascript: MM_showHideLayers('imagem','','hide')
Depois apague o código onclick. Sua linha de código deverá ficar:
Acesse a pasta LayerFlutuante, e veja as propriedades em vídeo.
Validando Formulários
Um dos recursos importantes hoje para a comunicação entre o visitante de um
site é a possibilidade de ele fazer contato com o responsável pelo site. A
melhor forma desse contato é através de um formulário. E para certificarmos
que os dados sejam enviados ao destinatário, podemos validar nosso
formulário.
Abra nosso formulário:
Nosso objetivo é fazer com que esses campos não possam ser enviados em
branco e que o campo email precise de um email válido (não impede de ser
enviado algo como “teste@teste.com” .
Clique dentro da área de seu formulário e na paleta Behaviors, clique na opção
validate Form, será aberta a janela onde vão aparecer os campos de nosso
formulário.
139
Observe que ele mostra o tipo de campo “text”, o nome do campo
Para o campo nome, basta apenas clicar sobre ele e marcar a opção
“Required”, isso fará com o campo seja obrigatório.
Para o campo email, marque a opção “Required” e marque também o radio
button “Email address”, isso fará com ele aceite apenas endereços de email.
Para o campo assunto, marque apenas “Required”.
Teste seu formulário e faça o envio sem preencher os campos. Observe que
ele mostra as mensagens, mas com os textos em inglês.
Vamos arrumar nossos textos para que fiquem em português. Nas opções de
visualização do Dreamweaver clique na opção CODE
140
Você pode observar que o Dreamweaver faz todo o “trabalho” de código para
você.
Vamos então modificar os textos de respostas para nosso idioma.
Localize a linha mude para “digite um endereço
de email válido”.
Localize a linha mude para “é requerido ou campo(s)
obrigatório(s)”.
Localize agora e mude para “Foram
encontrados os seguintes erros”.
Salve e teste novamente seu formulário.
Acesse a pasta ValidacaoForm, e veja as propriedades em vídeo.
SPY (AJAX no Dreamweaver)
O framework Spry são bibliotecas no formato JavaScript e CSS, as quais
permitem aos usuários do Dreamweaver desenvolver interfaces mais ricas e
dinâmicas. Além de possibilitar a exibição de dados no formato XML e criar
elementos interativos em páginas que exibem conteúdo dinâmico sem a
necessidade de tais páginas se carregarem por completo.
O Dreamweaver CS4 disponibiliza o Spry em duas perspectivas, uma para
designers e outra para programadores. Os designers poderão criar efeitos
141
visuais como Appear, Fade, Blinds (Up e Down), Grow, Shake, Slide, entre
vários outros. Já os programadores terão facilidades ao trabalhar com o Ajax e
na exibição de dados armazenados em arquivos XML. Além desses recursos,
tantos para designers quanto para programadores, o Spry oferece alguns
widgets que auxiliam na validação de formulários.
Vamos analisar a interface do Dreamweaver CS4 e localizar os recursos do
Spry, Você pode encontrar elementos na aba Layout, Form e Spry
Os demais recursos oferecidos pelo Spry são os efeitos, effects. Ambos estão
localizados na opção Effects do painel Behaviors, como ilustrado na imagem a
seguir:
142
Quando você seleciona algum recurso do spry no Documento window do
Dreamweaver, o Property inspector é atualizado e exibe as configurações de
recurso em questão, veja um exemplo:
Spry Menu Bar
O Spry Menu Bar, vem a facilitar a criação de menus.
Crie um novo documento e clique sobre o botão “Spry Menu Bar”, o
Dreamweaver vai solicitar que você salve seu documento para dar
continuidade. Ao salvar o documento, ele vai criar uma nova pasta em seu
projeto chamada SryAssets e vai solicitar o layout de menu que você quer criar.
143
Ao clicar em OK ele vai montar o menu de acordo com o solicitado.
Para poder remover / acrescentar itens, alterar os itens de seu menu, você
deve utilizar a barra de propriedades.
Para poder alterar as propriedades de formatação de nossa aplicação Spry,
você deve alterar o seu CSS.
144
Spry Accordion
Clique no botão Spry Accordion, será necessário salvar seu documento.
O Dreamweaver vai mostrar em sua área de trabalho a estrutura do Menu
Accordion. As alterações nele devem ser feitas através da caixa de
Ferramentas.
145
Você pode acrescentar qualquer conteúdo HTMl dentro da área Content do
Spry Accordion.
Para alterar as propriedades do seu Spry é necessário utilizar a paleta de CSS.
Spry Effects
O Effects é um conjunto de efeitos visuais do Frameworks Spry, que pode ser
adicionado em diversos elementos do HTML. No Dreamweaver os efeitos
podem ser adicionados no modo Design, sem a necessidade de trabalhar
diretamente com código, facilitando ainda mais a adição desses efeitos. O
Effects fica localizado no Painel de Behaviors (Windows > Behaviors) como um
comportamento normal, podendo ser ativado com diversos eventos.
Appear/ Fade
Esse efeito faz o elemento selecionado ir aparecendo ou surgindo na tela.
Pode usar este efeito com todos os objetos do HTML exceto o applet, body,
146
iframe, tr, tbody, ou th.Para aplicálo você deve selecionar aonde será ativado,
podendo ser o próprio elemento, depois ir ao Painel Behaviors do
Dreamweaver (Windows > Behaviors), clicar no botão adicionar comportamento
(+), selecionar a opção Effects e depois o Appear/Fade. A janela de
configuração do efeito fade ira se abrir para podemos configurálo.
Target Element: Selecionar o ID do objeto ou elemento onde será aplicado o
efeito. Se você já estiver selecionado o objeto, pode escolher <Current
Selection>.
Effect duration: Tempo de duração do efeito em milissegundos.
Effect: Tipo de efeito podendo ser o Fade aonde a camada vai sumindo aos
poucos, ou Appear aonde a camada vai aparecendo.
From: Tamanho da camada em porcentagem quando o efeito iniciar.
To: Tamanho da camada porcentagem quando o efeito terminar
Blind
Esse efeito faz a camada selecionada subir ou descer lentamente semelhante
a uma cortina que sendo aberta ou fechada. Pode ser usado somente com
estes objetos do HTML: address, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, p,
ol, ul, li, applet, center, dir, menu, ou pré. Para aplicálo você deve selecionar
aonde será ativado, podendo ser o próprio elemento, depois ir ao Painel
Behaviors do Dreamweaver (Windows > Behaviors), clicar no botão adicionar
comportamento (+), selecionar a opção Effects e depois o Blind. A janela de
147
configuração do efeito Blind vai se abrir para podemos configurálo.
efeito.
Effect duration: Tempo de duração do efeito em milisegundos.
Effect: Tipo de efeito podendo ser o Blind Up aonde a camada vai subindo, ou
Blind Down aonde a camada vai descendo na tela.
From: Tamanho da camada porcentagem ou pixel quando o efeito iniciar.
To: Tamanho da camada porcentagem ou pixel quando o efeito terminar.
Grow/ Shrink
Esse efeito faz o elemento selecionado crescer ou diminuir. Pode ser usado
com estes objetos do HTML: address, dd, div, dl, dt, form, p, ol, ul, applet,
center, dir, menu, o pre. Para aplicálo você deve selecionar aonde será
ativado, podendo ser o próprio elemento, depois ir ao Painel Behaviors do
(+), selecionar a opção Effects e depois o Grow/ Shrink. A janela de
configuração do efeito Grow/ Shrink vai se abrir para podemos configurálo.
148
Selection>.
Effect: Tipo de efeito podendo ser Grow aonde a camada vai crescer, ou
Shrink aonde a camada vai diminuir na tela.
From: Tamanho da camada porcentagem ou pixel quando o efeito iniciar.
To: Tamanho da camada porcentagem ou pixel quando o efeito terminar.
To: Para que local a camada deve ir quando o efeito for selecionado podendo
ser ao centro ou a esquerda superior.
Shake
Esse efeito faz o elemento selecionado dar uma tremida. Você pode usar este
efeito com estes objetos do HTML: address, blockquote, dd, div, dl, dt, fieldset,
form, h1, h2, h3, h4, h5, h6, iframe, img, object, p, ol, ul, li, applet, dir, hr, menu,
pre, ou table. Para aplicálo você deve selecionar aonde será ativado, podendo
ser o próprio elemento, depois ir ao Painel Behaviors do Dreamweaver
(Windows > Behaviors), clicar no botão adicionar comportamento (+),
selecionar a opção Effects e depois o Shake. A janela de configuração do efeito
Shake vai se abrir para podemos configurálo.
149
Selection>.
Squish
Esse efeito faz o elemento selecionado desaparecer. Você pode usar este
efeito com estes objetos do HTML: address, dd, div, dl, dt, form, img, p, ol, ul,
applet, center, dir, menu, or pre. Para aplicálo você deve selecionar aonde
será ativado, podendo ser o próprio elemento, depois ir ao Painel Behaviors do
(+), selecionar a opção Effects e depois o Squish. A janela de configuração do
efeito Squish vai se abrir para podemos configurálo.
Selection>.
Slide
Esse efeito faz uma transição podendo ser para cima ou para baixo. Você pode
usar este efeito com estes objetos do HTML: blockquote, dd, div, form, or
cente. Esse efeito requer uma única tag ID e os efeitos dentro do elemento com
tag ID. Para aplicálo você deve selecionar aonde será ativado, podendo ser o
150
próprio elemento, depois ir ao Painel Behaviors do Dreamweaver (Windows >
Behaviors), clicar no botão adicionar comportamento (+), selecionar a opção
Effects e depois o Shake. A janela de configuração do efeito Shake vai se abrir
para podemos configurálo.
Selection>.
Effect duration: Tempo de duração do efeito em milisegundos
Effect: Tipo de efeito podendo ser Slide UP aonde a camada vai subir, ou Slide
Down aonde a camada vai descendo na tela
From: Tamanho da camada porcentagem ou pixel quando o efeito iniciar
To: Tamanho da camada porcentagem ou pixel quando o efeito terminar
Highlight
Esse efeito faz o elemento selecionado ir trocando as cores. Pode ser usado
com todos os objetos do HTML exceto o applet, body, frame, frameset, ou
noframes. Para aplicálo você deve selecionar aonde será ativado, podendo ser
o próprio elemento, depois ir ao Painel Behaviors do Dreamweaver (Windows >
Behaviors), clicar no botão adicionar comportamento (+), selecionar a opção
Effects e depois o Highlight. A janela de configuração do efeito Highlight ira se
abrir para podemos configurálo.
151
Selection>.
Start Color: Cor com qual o efeito vai iniciar.
End Color: Cor com qual o efeito vai terminar.
Color after Effect: Esta cor dura somente durante a duração do efeito
EXTENSÕES DO DREAMWEAVER
A Macromedia fornece aos usuários extensões para serem utilizadas em seus
aplicativos, mais especificamente Flash e Dreamweaver e Fireworks. Para que
se possa instalar uma extensão é necessário ter instalado o Extension
Manager.
Você pode fazer o download de extensões do Dreamweaver no seguinte site:
http://www.adobe.com/cfusion/exchange/
152
Observe que algumas extensões são pagas.
Para poder baixar uma extensão será necessário que você possua um
cadastro no site, não existe custo para usar os recursos do site, o que pode
ocorrer e você encontrar uma extensão que precise ser comprada, pois como o
site é uma comunidade, alguns desenvolvedores criam à extensão e as
vendem pelo site.
Instalando uma nova extensão
Após fazer o download da extensão dê um duplo clique sobre a extensão e
aceite as normas de uso.
153
Será mostradas a tela com as extensões instaladas.
Observe que ele mostra as extensões instaladas, uma breve descrição do que
ela faz e como se deve acessar a ela pelo Dreamweaver.
CONCLUSÃO
Como pode ser visto nas páginas anteriores o Adobe Dreamweaver é um dos
154
mais complexos e fascinantes programas do mercado de Web design,
logicamente que não foi possível explorar todas as ferramentas e opções
existente em um programa tão completo como esse, mas com certeza foi
explorado e explicado as mais importantes ferramentas e modos de trabalhar
com este fascinante programa.
Como auxilio em seu aprendizado, procure sempre consultar o HELP (tecla de
atalho F1) do programa.
Procure também sempre atualizar seu programa com os UPDATES fornecidos
pelo site oficial do fabricante www.adobe.com.br ou www.adobe.com.
Bem como das novidades que estão fase de testes. http://labs.adobe.com/.
155
PHP INTRODUÇÃO
Um dos recursos necessários para um Web designer é ter uma noção de
linguagens de programação WEB, embora esse seja um assunto a ser tratado
por um Web Developer, é importante que ao trabalhar com a parte visual e
montagem, ter uma noção mesmo que básica de programação WEB.
Existem diversas linguagens, atualmente as mais utilizadas são PHP, .NET,
JSP e CFML.
Sendo que o PHP é atualmente a mais utilizada. É importante ao contratar um
serviço de hospedagem, verificar se o plano contratado lhe dá suporte a
alguma linguagem, e no caso se essa linguagem é o PHP.
Podemos também para critério de estudo instalar o PHP em seu próprio
equipamento de forma manual, ou utilizando algum sistema que instale todo o
ambiente para que você possa testar.
Não vamos em nosso curso se aprofundar na linguagem PHP, vamos entender
um pouco sobre as suas principais características e como ele conectar ao
Dreamweaver.
Ambiente para o PHP
Para que se possa rodar o PHP é necessário um servidor WEB, pode ser o IIS
(Internet Information Server) da Microsoft®, ou o Apache que é multiplataforma,
o próprio PHP, e se for trabalhar com Banco de Dados, algum aplicativo para o
Banco de Dados, o mais utilizado atualmente é MYSQL.
Instalando o ambiente com EasyPHP
No CDROM de nosso curso na pasta do Dreamweaver você pode
executar o EasyPHP.
Execute a instalação do EasyPHP
156
Ao término da instalação ele habilita o ícone do EasyPHP junto a barra próxima
ao relógio do Windows.
Ao clicar com o botão direito sobre o ícone e escolha Administração.
157
Na tela do Easy PHP, podemos acessar as configurações do Apache, do PHP
e do MYSQL.
O próximo passo é adicionar a pasta onde estão nossos arquivos ao EasyPHP.
Dentro do ambiente abaixo de apache, tem uma opção chamada adicionar,
clique nela.
Preencha os dados para poder adicionar seu projeto ao apache.
158
Muito cuidado ao colocar o caminho de onde está a sua pasta. No
exemplo eu usei “C:\Users\Vista\Downloads\curso_web\cursowebphp”.
Ao clicar no nome de seu site ele abre o endereço web local dele
http://127.0.0.1/cursoweb/, sendo que o 127.0.0.1, referese a IP de sua
máquina. Ele também vai apresentar uma tela vazia, pois ainda não temos
nada criado ali. Lembrese de que sempre que iniciar o easyPHP quando for
utilizar PHP em páginas locais.
Vamos a um teste.
Abra o Dreamweaver e crie um novo arquivo php
Na lateral direita onde está o painel principal, clique na opção Common e mude
para PHP
159
Dê um clique na opção <? CodeBlock
Ele mudará a tela de edição para duas telas, e adicionará o código do PHP em
vermelho.
Adicione o seguinte código conforme abaixo
<?php
echo " Olá Mundo" ;
?>
Salve seu arquivo na pasta que você criou com o nome de index.php.
160
Depois teste seu arquivo.
161
Acesse a pasta AmbientePHP, e veja as propriedades em vídeo.
Sintaxe do PHP
Você não pode visualizar os códigos PHP, selecionando "Exibir código fonte"
em seu navegador. Isto por que os códigos PHP é executado no servidor e
enviado somente o HTML puro para o browser.
Sintaxe básica do PHP
Um arquivo PHP contém normalmente tags HTML, assim como os arquivos
HTML, e alguns códigos PHP.
Abaixo, um exemplo simples de um script PHP, que enviará para o browser o
texto: "Olá Mundo, estou aprendendo PHP hein!".
<html>
<head>
<title>Meu primeiro script em PHP</title>
162
</head>
<body>
<?php echo " Olá Mundo, estou aprendendo PHP hein!" ; ?>
<body>
<html>
Um bloco de código PHP sempre começa com <?php e termina com ?>. O
bloco de código PHP pode ser colocado em qualquer parte do documento.
Cada linha de código em PHP deve terminar com ponto e vírgula (;). O ponto e
vírgula é um separador e é utilizado para a distinção de uma instrução da outra.
Existem duas simples instruções para exibir um texto em php, são elas: echo e
print. No exemplo acima utilizamos a instrução echo para exibir o texto "Olá
Mundo, estou aprendendo PHP hein!"
Variáveis em PHP
Todas as variáveis em PHP começa com o símbolo "$" (cifrão). As variáveis
podem conter textos, números ou arrays.
Abaixo, um exemplo de um script PHP que atribui a string "Estou aprendendo
PHP, que legal." à variável chamada $texto:
<html>
<head>
<title>Aprendendo PHP [ Variáveis ]</title>
</head>
<body>
<?php
$texto = " Estou aprendendo PHP, que legal." ;
echo $texto;
?>
<body>
<html>
Para concatenar duas ou mais variáveis, utilizamos o operador ponto (.), veja
um exemplo:
<html>
<head>
163
<title>Aprendendo PHP [ Concatenando variáveis ] </title>
</head>
<body>
<?php
$texto = " Estou aprendendo PHP." ;
$texto2 = " Vou me dedicar e estudar cada vez mais." ;
echo $texto . " " . $texto2;
?>
<body>
<html>
O exemplo acima irá exibir o texto: "Estou aprendendo PHP. Vou me dedicar e
estudar cada vez mais".
Comentários em PHP
Os comentários em PHP ou em qualquer outra linguagem de programação é
muito importante para comentar blocos de códigos, funções, e etc.
Em PHP, utilizamos // para comentários de uma linha apenas e /* */ para várias
linhas de comentários, veja um exemplo:
<html>
<head>
<title>Aprendendo PHP [ Comentários ]</title>
</head>
<body>
<?php
// Isto é um comentário de apenas uma linha.
/*
Este comentário possui
diversas linhas.
Os comentários não são interpretados e consequentemente
não são exibidos no navegador.
*/
?>
164
</body>
</html>
Tipos de dados
O PHP suporta vários tipos de dados:
Inteiro – Números inteiros (isto é, números sem ponto decimal)
Números de dupla precisão – Números reais (isto é, números que contêm um
ponto
decimal)
String – Texto entre aspas simples (´ ´) ou duplas (“ “)
Booleanos – armazenam valores verdadeiros ou falsos, usados em testes de
condições
Array – Grupo de elementos do mesmo tipo
Objeto – Grupo de atributos e métodos
Recurso – Uma origem de dados externa
Nulo – Nenhum valor
Operadores
Os operadores são utilizados para operar sobre valores. Vamos conhecer os
diferentes operadores utilizados em PHP
Operadores aritméticos
Operador Descrição Exemplo Resultado
x=2
+ Adição 4
x+2
x=2
Subtração 3
x5
x=4
* Multiplicação 20
x*5
/ Divisão 15/5 3
5%2 1
% Módulo (restante da divisão) 10%8 2
10%2 0
165
x=5
++ Incrementos x=6
x++
x=5
Decrementos x
x
<html>
<head>
<title>Teste PHP</title>
</head>
<body>
<?php
$x = 2;
echo($x + 2);
echo " <br>" ;
$x = 2;
echo(5 $x);
echo " <br>" ;
$x = 4;
echo($x * 5);
echo " <br>" ;
$x = 15;
echo($x / 5);
echo " <br>" ;
$x = 10;
echo($x % 8);
echo " <br>" ;
$x = 5;
$x++;
echo($x);
echo " <br>" ;
$x = 5;
166
$x;
echo($x);
echo " <br>" ;
$x = 8;
echo($x);
echo " <br>" ;
$x = 8;
$x = $x + 10;
echo($x);
echo " <br>" ;
$x = 8;
$x += 10;
echo($x);
?>
</body>
</html>
Operadores de comparação
Há também os operadores de comparação. Uma comparação sempre gera um
dos dois valores possíveis: vazio, que corresponde a falso, e 1, que
corresponde a verdadeiro.

== é igual a 5==8 falso
!= não é igual 5!=8 verdadeiro
> é maior que 5>8 falso
< é menor que 5<8 verdadeiro
>= é maior que ou igual a 5>=8 falso
< é menor que ou igual a 5<=8 verdadeiro
<html>
<head>
167
</head>
<body>
<?php
$x = 5;
$resultado = ($x == 8);
if($resultado == 1)
{
echo " verdadeiro" ;
}
else
{
echo " falso" ;
}
echo " <br>" ;
$x = 5;
$resultado = ($x != 8);
if($resultado == 1)
{
}
Else
{
echo " falso" ;
}
echo " <br>" ;
$x = 5;
$resultado = ($x > 8);
if($resultado == 1)
{
}
else
168
{
echo " falso" ;
}
echo " <br>" ;
$x = 5;
$resultado = ($x > 8);
if($resultado == 1)
{
}
else
{
echo " falso" ;
}
echo " <br>" ;
$x = 5;
$resultado = ($x >= 8);
if($resultado == 1)
{
}
else
{
echo " falso" ;
}
echo " <br>" ;
$x = 5;
$resultado = ($x <= 8);
if($resultado == 1)
{
}
169
else
{
echo " falso" ;
}
?>
</body>
</html>
Operadores lógicos
and ou && operador lógico “e”, apenas retornando verdadeiro quando as duas
condições envolvidas no teste forem verdadeiras
or ou | | operador lógico “ou”, retornando verdadeiro quando uma ou as duas
condições
envolvidas no teste forem verdadeiras
! operador lógico “não”, invertendo o resultado de um teste
xor – operador lógico “ou exclusivo” que determina se uma de duas condições
é
verdadeira mas não ambas. Se ambas forem verdadeiras, o teste final será
falso
<html>
<head>
</head>
<body>
<?php
$x = 6;
$y = 3;
$resultado = ($x < 10 && $y > 1);
if($resultado == 1)
{
170
}
else
{
echo " falso" ;
}
echo " <br>" ;
$x = 6;
$y = 3;
$resultado = ($x == 5 || $y == 5);
if($resultado == 1)
{
}
else
{
echo " falso" ;
}
echo " <br>" ;
$x = 6;
$y = 3;
$resultado = (!($x == $y));
if($resultado == 1)
{
}
else
{
echo " falso" ;
}
?>
</body>
</html>
171
Condições
Declarações condicionais em PHP são utilizadas para executar diferentes
ações baseadas em diferentes condições.
Declarações condicionais
Em muita das vezes quando programamos, precisamos executar diferentes
ações para diferentes decisões. Então utilizamos as declarações condicionais
para realizarmos isto.
Em PHP temos duas declarações condicionais:
Declaração if (... else) utilizamos esta declaração quando queremos executar
uma parte de um script quando a condição é verdadeira e a outra se a
condição for falsa.
Declaração switch utilizamos esta declaração quando queremos selecionar
uma linha de várias no script para ser executada.
A declaração if
Se você precisa executar uma parte do código se a condição for verdadeira e a
outra se a condição for falsa, utilize a declaração if ... else.
Sintaxe
if (condição)código a ser executado, quando a condição for verdadeira.
else código a ser executado, quando a condição for falsa.
Exemplo
O exemplo a seguir, irá exibir o texto: "Bom final de semana" se o dia atual for
igual à sábado, caso contrário irá exibir "Boa semana".
<html>
<head>
<title>Exemplo de uso da declaração if</title>
</head>
<body>
<?php
$dia_atual = date(" l" );
if ($dia_atual == " Saturday" )
echo " Bom final de semana" ;
172
else
echo " Boa semana" ;
?>
<body>
<html>
Se mais do que uma linha for executada quando a condição for verdadeira,
precisamos incluílas dentro de chaves ({}), veja um exemplo:
<html>
<head>
<title>Exemplo de uso da declaração if</title>
</head>
<body>
<?php
$dia_atual = date(" l" );
if ($dia_atual == " Saturday" ) {
echo " Bom final de semana" ;
echo " Divirtase." ;
}
else {
echo " Boa semana" ;
echo " Bom trabalho" ;
}
?>
<body>
<html>
Exemplo onde usamos vários if e else
<html>
<head>
</head>
20
173
<body>
<?php
$cor = " branco" ;
if ($cor == " vermelho" )
{
echo(" A variável contém o valor 'vermelho'." );
}
else if ($cor == " azul" )
{
echo(" A variável contém o valor 'azul'." );
}
else if ($cor == " amarelo" )
{
echo(" A variável contém o valor 'amarelo'." );
}
else
{
echo(" O valor da variável não foi identificado." );
}
?>
</body>
</html>
A declaração switch
Se você precisa selecionar um ou vários blocos de códigos para ser executado,
utilize a declaração switch.
Sintaxe
switch (expressão) {
case valor1:
código a ser executado se a expressão = valor1;
break;
case valor2:
174
código a ser executado se a expressão = valor2;
break;
default:
código a ser executado se a expressão for diferente do valor1 e valor2;
}
Exemplo
A declaração switch funciona da seguinte maneira: primeiro temos o valor da
expressão (na maioria dos casos uma variável), esta é avaliada uma vez. O
valor da expressão então é comparado com os valores de cada caso da
estrutura. Se houver um valor semelhante, o código associado será executado.
Utilizamos o break para prevenir que o próximo caso não seja executado
automaticamente. O valor padrão (default) é utilizado se caso nenhum dos
valores for verdadeiro.
<html>
<head>
<title>Exemplo de uso da declaração switch</title>
</head>
<body>
<?php
$numero = 10;
switch ($numero) {
case 1:
echo " O valor da variável número é igual a 1" ;
break;
case 2:
break;
case 3:
break;
default:
echo " Não há nenhum número entre 1 e 3 na variável número." ;
175
}
?>
<body>
<html>
Looping
As declarações de looping em PHP são utilizadas para a execução do mesmo
bloco de código por uma determinada quantidade de vezes.
Looping
Em muita das vezes quando programamos, precisamos executar um
determinado bloco de código por uma determinadas vezes. Para realizarmos
esta ação utilizamos o looping.
Em PHP temos as seguintes declarações de looping:
while looping que percorre determinado bloco de código se e contanto que a
condição seja verdadeira.
do ... while looping que percorre uma vez determinado bloco de código, e
repete o looping contanto que uma condição especial seja verdadeira.
for looping que percorre determinado bloco de código por uma quantidade
especificada de vezes.
foreach looping que percorre determinado bloco de código para cada
elemento em um array.
A declaração while
A declaração while executa determinado bloco de código se e contato que
uma condição seja verdadeira
Sintaxe
while (condição)
código a ser executado;
Exemplo
O exemplo a seguir é uma demonstração de um looping que continuará sendo
executado contanto que a variável i seja menor ou igual a 5. A variável i irá
aumentarse cada vez que o loop for executado.
176
<html>
<head>
<title>looping: while</title>
</head>
<body>
<?php
$i = 1;
while ($i <= 5) {
echo " O número da sorte é: " . $i . " <br />" ;
$i++;
}
?>
<body>
<html>
A declaração do ... while
A declaração do ... while executará um bloco de código por pelo menos uma
vez, e irá repetilo contanto que a condição seja verdadeira.
Sintaxe
do {
} while (condição);
Exemplo
O exemplo a seguir irá aumentar o valor da variável i pelo menos uma vez, e
continuará aumentando a variável i, enquanto esta tiver seu valor menor que 5.
<html>
<head>
<title>looping: do...while</title>
</head>
<body>
<?php
$i = 0;
177
do {
$i++;
echo " O número da sorte é: " . $i . " <br />" ;
} while ($i < 5);
?>
<body>
<html>
A declaração for
A declaração for é utilizada quando você tem o conhecimento da quantidade de
vezes necessária para a execução da declaração ou uma lista desta.
Sintaxe
for (início; condição; incremento) {
}
Nota:
A declaração for possui três parâmetros. O primeiro é a iniciação da variável, o
segundo possui a condição, e o terceiro parâmetro contém o incremento
necessário para a realização do looping. Se mais de uma variável for inclusa na
seção da iniciação ou no incremento, é necessário a separação por ponto e
vírgula (;). A condição deve ser verdadeira ou falsa.
Exemplo
O exemplo a seguir irá mostrar o texto "Estou gostando da linguagem PHP"
cinco vezes.
<html>
<head>
<title>looping: for</title>
</head>
<body>
<?php
for ($i=1; $i<=5; $i++) {
178
echo " Estou gostando da linguagem PHP <br />" ;
}
?>
<body>
<html>
A declaração foreach
Um looping sobre o array dado pelo parâmetro. Em cada loop, o valor do atual
elemento é atribuído à variável $valor e o array é avançado um por um, então
no próximo loop você verá o próximo elemento.
Sintaxe
foreach (array as value)
Exemplo
O exemplo a seguir demonstra um loop que exibirá o valor dado ao array.
<html>
<head>
<title>looping: for</title>
</head>
<body>
<?php
$carros = array(" Gol" , " Celta" , " Pálio" );
foreach ($carros as $valor) {
echo " Carros populares: " . $valor . " <br />" ;
}
?>
<body>
<html>
Formulários
Uma das grandes características do PHP é a manipulação de formulários
HTML.
179
Manipulando formulários com PHP
A coisa mais importante quando estamos lindando com formulários HTML e
PHP é que todos os elementos do formulário contido na página HTML estará
automaticamente disponível para seus scripts PHP.
Olhe um exemplo de uma página HTML com um formulário.
<html>
<head>
<title>Trabalhando com formulários</title>
</head>
<body>
<form action=" bemvindo.php" method=" post" id=" frm_dados" >
<p>Digite seu nome: <input type=" text" name=" nome" id=" nome" /></p>
<p>Digite sua idade: <input type=" text" name=" idade" id=" idade" /></p>
<p><input type=" submit" value=" Enviar" name=" submit" id=" submit"
/></p>
</form>
<body>
<html>
O exemplo acima contém dois campos de texto e um botão de envio. Quando
alguém preenche os campos e envia os dados clicando no botão enviar, a
página " bemvindo.php" é chamada. Nela contém um simples script PHP que
recebe e exibe os dados digitado no formulário, veja o código desta página.
<html>
<head>
180
<title>Recebendo e exibindo os dados</title>
</head>
<body>
<p>Seja bem vindo <?php echo $_POST[" nome" ]; ?>
</p>
<p>Você tem <?php echo $_POST[" idade" ]; ?> anos!</p>
<body>
<html>
Explicando como isto funciona: as variáveis $_POST["nome"] e

$_POST["idade"] são automaticamente setada para você pelo PHP. $_POST
Datas em PHP
Para trabalharmos com datas em PHP, utilizamos a função date().
Função date() do PHP
Esta função é utilizada para formatar tempo e data.
Sintaxe
string date (date_format[,int timestamp])
Esta função retorna uma string formatada de acordo com o formato
especificado.
181
Os formatos para Data
Esta tabela mostra alguns dos caracteres que podem ser utilizados para
formatar a string.
Caracter Descrição
a "am" ou "pm"
A "AM" ou "PM"
d Dia do mês, começando com zero (0131)
D Três caracteres que representam o dia da semana (MonSun)
F Nome completo do mês (JanuaryDecember)
g A hora no formato de 12 horas sem começar como zero (112)
G A hora no formato de 24 horas sem começar com o zero (023)
h A hora no formato de 12 horas começando com o zero (0112)
H A hora no formato de 24 horas começando com o zero (0023)
i Os minutos começando com o zero (0059)
I "1" se tivermos a luz do dia, caso contrário "0"
j Dia do mês sem começar com o zero (131)
l Nome completo do dia (MondaySunday)
m O mês como número, começando com o zero (0112)
M Três caracteres que representam o nome do mês (JanDec)
n O mês como número, sem começar com o zero (112)
O A diferença do tempo de Grennwich (GMT) em horas
s Os segundos começando com o zero (0059)
t A quantidade de dias do mês atual (2831)
T Fuso horário atual (e.g. "GMT")
w O dia da semana como um número (06, 0=Domingo(Sunday))
Y O ano com quatro dígitos (e.g. 2005)
y O ano com dois dígitos (e.g. 03)
182
Esta tabela mostra alguns dos caracteres que podem ser utilizados para
formatar a string.
Caracter Descrição
z O dia atual do ano (162366)
Exemplos
<?php
//Exibe algo como: Domingo
echo date("l");
//Exibe algo como: Sunday, 12º dia do mês de June de 2005
echo date("l, jº \d\i\a \d\o \m\ê\s \d\e F \d\e Y");
//Exibe algo como: 23:39
echo date("H:i");
?>
Funções
Uma função é um bloco de código reutilizável que é executado devido a um
evento ou pela chamada de outra função. Devese usar a declaração function
para criar uma função.
Os parâmetros usados pela função são declarados entre parênteses. Os
comandos a serem executados pela função devem estar entre chaves. A
declaração return retorna um valor quando a função é chamada. Esta
declaração não é necessária se a função não retorna nenhum valor.
Para se chamar uma função, devese escrever seu nome e indicar os
parâmetros entre parênteses.
<html>
<head>
</head>
<body>
<?php
183
function soma($valor1, $valor2)
{
$resultado = $valor1 + $valor2;
return ($resultado);
}
$x = soma(7, 8);
echo($x);
?>
</body>
</html>
Matrizes
Matrizes são variáveis que armazenam mais de um valor simultaneamente.
Uma matriz no PHP é atualmente um mapa ordenado. Um mapa é um tipo que
relaciona valores para chaves. Este tipo é otimizado de várias maneiras, então
você pode usálo como um array real, ou uma lista (vetor), hashtable (que é
uma implementação de mapa), dicionário, coleção, pilha, fila, etc.
As referências aos elementos da matriz podem ser declaradas como valores
numéricos ou strings
<html>
<head>
</head>
<body>
<?php
$funcionarios = array(0 => " José" ,
1 => " João" ,
2 => " Maria" ,
3 => " Pedro" ,
4 => " Carla" );
echo " <b>Funcionários</b>" ;
echo " <ul>" ;
184
echo " <li>" . $funcionarios[0];
echo " </ul><p>" ;
echo " <b>Funcionárias</b>" ;
echo " <ul>" ;
echo " </ul>" ;
?>
</body>
</html>
Inclusão de Arquivos
O comando include permite a inclusão de outros arquivos php dentro do script
que está sendo executado. Podese criar uma função que imprime a data atual
e podese reusálo sem precisar reescrever o código cada vez que for
necessário. No exemplo a seguir, podese chamar o primeiro script de
cabecalho.php e o próximo script o inclui através do comando include.
<html>
<head>
</head>
<body>
<?php
$meses = array(1 => " Janeiro" ,
2 => " Fevereiro" ,
3 => " Março" ,
4 => " Abril" ,
5 => " Maio" ,
6 => " Junho" ,
185
7 => " Julho" ,
8 => " Agosto" ,
9 => " Setembro" ,
10 => " Outubro" ,
11 => " Novembro" ,
12 => " Dezembro" );
$hoje = getdate();
$dia = $hoje[" mday" ];
$mes = $hoje[" mon" ];
$nomeMes = $meses[$mes];
$ano = $hoje[" year" ];
echo " Olá. Hoje é dia $dia de $nomeMes de $ano."
?>
</body>
</html>
Incluindo o arquivo cabeçalho.php
<html>
<head>
<title>Página PHP</title>
</head>
<body>
<?php
include(" cabecalho.php" );
?>
</body>
</html>
Cookies
Cookies são formas de armazenar informações a respeito de uma sessão
dentro do disco rígido do usuário cliente. O comando setcookie armazena um
cookie com as informações que se desejam recuperar em seguida. Quando
186
não for declarado um tempo de vida, o cookie se autodestrói quando a sessão
é encerrada (quando o browser for fechado).
<?php
if (isset($HTTP_POST_VARS['usuario'])) {
$user = $HTTP_POST_VARS['usuario'];
setcookie(" usuario" , $user);
$mensagem = " Usuário $user conectado.<p>" ;
}
else
{
$mensagem = " Digite o seu nome de usuário<p>" ;
}
?>
<html>
<head>
</head>
<body>
<?
echo $mensagem;
?>
<form method=" post" action=" teste.php" >
Nome de Usuário: <input type=" text" name=" usuario" >
<br>
<input type=" submit" value=" Enviar" >
</form>
</body>
</html>
<html>
<head>
187
</head>
<body>
<?php
$user = $_COOKIE[" usuario" ];
echo " O usuário $user está conectado." ;
?>
</body>
</html>
O código a seguir demonstra o uso de um cookie com “tempo de vida” definido
em 3600 segundos, isto é, uma hora. Após uma hora decorrida de sua criação,
ele é removido.
<?php
if (isset($_POST['usuario'])) {
$user = $_POST['usuario'];
setcookie(" usuario" , $user, time() + 3600); // Expira em uma hora
$mensagem = " Usuário $user conectado.<p>" ;
}
else
{
$mensagem = " Digite o seu nome de usuário<p>" ;
}
?>
<html>
<head>
</head>
<body>
<?
echo $mensagem;
188
?>
<form method=" post" action=" teste.php" >
Nome de Usuário: <input type=" text" name=" usuario" >
<br>
<input type=" submit" value=" Enviar" >
</form>
</body>
</html>
Parâmetros
O uso de parâmetros facilita a programação porque permite a passagem de
dados entre o browser e o script ou entre scripts. A passagem de parâmetros
entre o browser e o script é feita dentro da URL, por exemplo e é manipulada
pela função $_GET. Nesse exemplo a seguir, cada um dos links envia um valor
diferente para a página que é aberta (teste.php). Para enviar um parâmetro, a
sintaxe inclui um sinal de interrogação, o nome da variável, um sinal de igual e
o valor da variável.
<html>
<head>
</head>
<body>
<?php
if (isset($_GET[" valor" ]))
{
$valor = $_GET[" valor" ];
echo " Você clicou no link $valor <p>" ;
}
else
{
echo " Clique em um dos links abaixo:<p>" ;
189
}
?>
<a href=" teste.php?valor=1" >link 1</a><br>
</body>
</html>
Caso exista necessidade de se passar mais de um parâmetro, devese separá
los através
de “e comercial” (&)
<html>
<head>
</head>
<body>
<?php
if (isset($_GET[" nome" ]) && isset($_GET[" sobrenome" ])) {
$nome = $_GET[" nome" ];
$sobrenome = $_GET[" sobrenome" ];
echo " O nome selecionado foi $nome $sobrenome<p>" ;
}
else
{
echo " Selecione um nome<p>" ;
}
?>
<a href=" teste.php?nome=Pedro&sobrenome=Silva" >Pedro Silva</a><br>
<a href=" teste.php?nome=Maria&sobrenome=Santos" >Maria
Santos</a><br>
190
</body>
</html>
Envio de emails
O PHP permite que se enviem emails de forma automatizada. Para isso, deve
se ajustar o arquivo de configuração (php.ini) para se indicar o servidor SMTP:
[mail function]
SMTP = localhost ;for win32 only
sendmail_from = me@localhost.com ;for win32 only
;sendmail_path = ;for unix only, may supply
arguments as well (default is 'sendmail t i')
A opção SMTP indica o endereço ou número IP do servidor SMTP. A opção
sendmail_from indica o endereço do remetente da mensagem. É necessário
reiniciar o servidor a cada modificação em algum arquivo de configuração. O
próximo exemplo envia uma mensagem para o destinatário.
<html>
<head>
</head>
<body>
<?php
$destinatario = "marcospfurlan@hotmail.com";
$assunto = "Como enviar emais via PHP";
$mensagem = "
<h2>Envio de emails via PHP</h2>
<p>Depois que o servidor está configurado, é muito simples enviar emails
com o PHP, usando apenas a função mail(). Você deve indicar como
parâmetros o destinatário, o assunto, e a mensagem. Para enviar
cabeçalhos adicionais, como informações sobre o formato da mensagem, há
um quarto parâmetro.</p>
";
$cabecalho = "
191
MIMEVersion: 1.0\r\n
Contenttype: text/html; charset=iso88591\r\n";
mail($destinatario, $assunto, $mensagem, $cabecalho);
echo "email enviado com sucesso";
?>
</body>
</html>
Banco de dados
É uma coleção de dados interrelacionados, representado informações sobre

um domínio específico
Exemplos:
Lista telefônica
Fichas do acervo de uma biblioteca
Sistema de Banco de Dados
Consiste em uma coleção de dados interrelacionados e uma coleção de
programas para prover o acesso a esses dados. O objetivo principal de um
sistema de banco de dados é prover um ambiente que seja adequado e
eficiente para uso na recuperação e armazenamento de informações
Principais Módulos de um Sistema de Banco de Dados
· Inclusão
· Alteração
· Exclusão
· Consulta
· Relatórios
Tabela
Objeto criado para armazenar os dados fisicamente
Os dados são armazenados em linhas (registros) e colunas (campos)
Os dados de uma tabela normalmente descrevem um assunto tal como
192
clientes, vendas, etc
Tipos de Campos
Os campos a serem inseridos numa tabela devem ser normalmente criados a

partir do modo Estrutura e são divididos em:
Texto: Aceita qualquer tipo de entrada, ou seja, o usuário poderá preencher
esse campo com letras, números, sinais, etc... Mas, em caso de inserção de
números ou datas, o conteúdo não poderá ser utilizado para operações
Matemáticas. O campo tipo Texto aceita até 255 caracteres e o seu tamanho
padrão é 50 caracteres.
Memorando: Também aceita qualquer tipo de caractere, porém, em caso de
número, também não permite operações matemáticas. utilize o campo
Memorando para os dados que deverão ultrapassar a casa dos 255 caracteres
e que tenham no máximo 64.000 caracteres.
Número: Este campo deverá ser preenchido com valores numéricos e podem
ser normalmente aplicados matematicamente. Mas os campos do tipo número
não exigem alto grau de exatidão.
Moeda: Permite que o usuário preencha o campo com dados numéricos que
possuam casas decimais, evitando o arredondamento dos valores. Este campo
já é predefinido para o máximo 15 dígitos à esquerda do separador (vírgula) e 4
à direita.
Data/Hora: Permite ao usuário inserir dados já em formato de data e hora. Este
193
tipo de campo é diretamente ligado ao Painel de Controle do Windows, ou seja,
caso o usuário atualize a data e/ou hora do sistema, automaticamente o campo
em seu banco de dados será afetado.
AutoNumeração: Este campo recebe automaticamente uma numeração
geralmente seqüencial, em incrementos de 1.Funciona na verdade, como um
novo contador. Os números são adicionados a medida que um novo registro é
iniciado.
Sim/Não: Campo do tipo lógico, onde as respostas serão sempre SIM/NÃO,
Verdadeiro/Falso ou Ativado/Desativado.
Objeto OLE : Permite ao usuário inserir objetos ou arquivos binários criados
em outros aplicativos dentro de seu Banco de Dados. Objetos OLE (Object
Linking and Embedding) ou seja Encaixe e Ligação de Objeto) são
automaticamente atualizados no arquivo de Banco de Dados quando sofrem
alterações em seu aplicativo de origem.
Hyperlink: Hiperligação, ou seja significa que podemos ligar uma frase uma
figura a outro arquivo, um local dentro de um arquivo ou uma página em HTML
na Internet.
Assistente de Pesquisa: Cria um campo que permite ao usuário escolher um
valor a partir de outra tabela ou a partir de uma lista de valores usando uma
caixa de combinação.
Chave Primária
Permite a classificação única de cada registro de uma tabela
■
Exemplos de Chave Primária:
· RG
· CPF
· Matrícula
· RA
194
Exemplo de Tabelas
Relacionamento entre tabelas
Princípios básicos da sintaxe
A instrução SQL mais comumente utilizada para criar um conjunto de registros
é SELECT, que extrai determinadas colunas de uma ou mais tabelas de
bancos de dados para criar um conjunto de registros. A sintaxe básica da
instrução SELECT é apresentada abaixo:
195
SELECT NomeDaColuna FROM NomeDaTabela
É possível adicionar quebras de linha, guias e outros tipos de espaço em
branco às instruções para tornar clara a lógica: O SQL ignora todos os tipos de
espaço em branco. Por exemplo: a seguinte instrução é válida:
SELECT nome
FROM jogadores
As seguintes palavraschave identificam os comandos SQL comumente
utilizados:
Palavra
Descrição:
chave:
SELECT Recupera os registros especificados no banco de dados
INSERT Inclui um novo registro em uma tabela de banco de dados
Altera os valores nos registros de banco de dados
UPDATE
especificados
DELETE Remove os registros de banco de dados especificados
As seguintes palavraschave são utilizadas para refinar as instruções SQL:
Palavra
Descrição
chave
FROM Denomina a fonte de dados de uma operação
WHERE Define uma ou mais condições para a operação
Classifica as linhas de conjuntos de registros em uma
ORDER BY
determinada ordem
Agrupa o conjunto de registros pelos itens especificados,
GROUP BY
selecionados em uma lista
Os seguintes operadores especificam condições e executam funções
numéricas e lógicas:
Operador Significado
= Igual a
LIKE Como (caracteres curingas são aceitos)
196
Operador Significado
<> Diferente de
NOT
Não igual a (curingas são aceitos)
LIKE
< Menor que
> Maior que
<= Menor ou igual a
>= Maior ou igual a
Ambas as condições devem ser atendidas, como Minas Gerais AND
AND
Bahia
Pelo menos uma das condições deve ser atendida, como Matos OR
OR
Mattos
NOT Exclui a condição seguinte, como Paris NOT França
O Painel PHP do Dreamweaver
Vamos conhecer o painel PHP do Dreamweaver, analisando as opções

contidas e o que cada uma possibilita.
197
Conhecendo o painel PHP do Dreamweaver
Form Variables
<?php $_POST[]; ?>
Com esta opção, trabalharemos com as variáveis criada pelos formulários.
URL Variables
<?php $_GET[]; ?>
Com esta opção, trabalharemos com variáveis contidas em URL.
Session Variables
<?php $_SESSION[]; ?>
Com esta opção, trabalharemos com variáveis de sessão, muito utilizada para
fazer login e diversas outras opções, esta fica armazenada no servidor, sua
expiração na maioria das vezes ocorre quando o browser é fechado.
Cookie Variables
<?php $_COOKIE[]; ?>
Com esta opção, trabalharemos com os cookies, também utilizado para fazer
login e diversas outras opções, este fica armazenado na máquina do usuário,
sua expiração é definida pelo desenvolvedor (pode durar até anos).
Include
<?php include(); ?>
Para incluirmos um arquivo dinamicamente, podemos assemelhar o include ao
SSI (Server Side Include).
Require
<?php require(); ?>
Para incluirmos um arquivo dinamicamente também, difereciandose do
include, pelo seguinte fato: se o arquivo não for encontrado no servidor todo o
processo da página é interrompido e causa um Fatal Error.
Nota: Para maiores detalhes sobre ambas as funções, recomendo a leitura do
artigo Função include() e require() do PHP no Dreamweaver.
PHP Page Encoding
mb_http_input("iso88591");
mb_http_output("iso88591");
Utilizada para setar a codificação dos caracteres, mas não se preocupe,
198
dificilmente você irá utilizar esta opção.
Code Block
<?php ?>
Utilizado para indicar o início e o término de um bloco de código em PHP.
Nota: Lembrese, se você não utilizar o bloco de código o servidor não
entenderá que se trada do PHP.
Echo
<?php echo ?>
Utilizado para exibir algum texto na tela, assim como o print.
Comment
/* */
Utilizado para comentários de mais de uma linha.
If
<?php if ?>
Utilizado para se trabalhar com condicionais. Por exemplo: se uma opção for
verdadeira o sistema irá executar um bloco de código, se não outro bloco.
Nota: Em português se fala "se".
Else
<?php else ?>
Utilizado para se trabalhar com condicionais também.
Nota: Em português se fala "caso contrário".
Databases
Menu Window, Databases.
Para podermos trabalhar com a aba Databases, é necessário que
você esteja trabalhando em um projeto de site PHP. Ao acessar o
painel Database, ele vai lhe dar a opção de na própria aba de criar
seu site
199
Bindings
Utilizado para criar os Recordset e as diversas variáveis.
Server Behaviors
Esta sem dúvida é um espetáculo, com ela você faz quase tudo que precisa,
como: Inserir registros ao banco de dados, editálos, excluílos, trabalha com
textos dinâmicos, elementos de formulário dinâmicos e diversos outros.
200
Components
Painel Data, dividese em duas partes a primeira trás algumas ferramentas
Spry e a segunda parte, iniciando em Recordset, permite trabalhar com Banco
de Dados.
201
Criando um banco de dados pelo phpMyAdmin
O phpMyadmin é um script para o gerenciamento de seus dados no banco
MySql como dito no 2º capítulo. Neste curso iremos criar nosso primeiro banco
de dados e nossa primeira tabela utilizando este script.
Abra o phpMyAdmin através do painel de controle de seu serviço de
hospedagem, ou caso esteja usando o EasyPHP pelo seu administrador.
Vamos lá então, para criarmos nosso banco de dados.
Criaremos um banco chamado curso_php, para criálo siga os seguintes
passos:
Digite o nome de seu banco de dados e clique em Criar.
202
A barra de navegação do phpMyAdmin oferece diversos recursos para você
administrar seu banco de dados e/ou tabela.
Estrutura
Exibe a relação das tabelas contidas no banco de dados, uma breve
estatísticas de cada uma e diversas opções para administrálas.
SQL
Exibe um painel para você executar instruções SQL no seu banco de dados
e/ou tabela.
Procurar
Um painel para você realizar uma busca e encontrar determinado registro em
sua tabela.
Procurar por exemplo
Exibe os registros contidos em determinada tabela, lhe permite editar e/ ou
excluir alguma linha da tabela e diversas outras opções.
Export
Exportar os dados do seu banco de dados e/ou tabela em diversos formato
como: SQL, Latex, Microsoft Excel 2000, Microsoft Word 2000, CSV for MS
Excel, CSV e XML. Você pode exportar a estrutura somente e/ou os dados.
Operations
Importar
Importar os dados do seu banco de dados e/ou tabela em diversos formato
como: SQL, Latex, Microsoft Excel 2000, Microsoft Word 2000, CSV for MS
Excel, CSV e XML.
Privilégios
Apresenta os privilégios do banco de dados.
Operações
Lhe permite administrar sua tabela com diversas opções como: renomear,
mover ou copiar para outro banco de dados, inserir comentários, modificar o
tipo da tabela, reparar, otimizar e diversos outros recursos.
Eliminar
Deleta o banco de dados e/ou tabela.
203
Conectando o Dreamweaver ao seu banco de dados
Tendo criado o banco de dados e configurado o site com tecnologia de
servidor, podemos agora conectar o Dreamweaver ao seu banco de dados.
A conexão é realizada através do painel Databases.
Nota: Só é possível a realização da conexão, quando um site está devidamente
configurado no Dreamweaver, e o tipo do documento precisa ser PHP (em
nosso caso).
Ciente destes detalhes, vamos lá.
Painel Databases (Ctrl + Shift + F10), clique no botão com o sinal de "+" e em
seguida em: MySQL Connection, observe a imagem:
Após esse procedimento você terá o painel MySQL Connection para

configurálo.
Em Connection name, você deve definir o nome de sua conexão com o Banco
de Dados. Em MySQL Server, você deve colocar localhost. Em User name, se
estiver usando um servidor de hospedagem, coloque o nome de usuário, se
estiver usando o Easy PHP coloque root, coloque a senha, no caso do Easy
PHP pode deixar em branco, ele apresenta uma tela de aviso, marque para
204
não receber mais o aviso e clique em OK.
Para selecionar o seu Banco de Dados, clique no botão Select.
Selecione o Banco de dados criado e clique em OK.
No painel Database, agora ele mostra a sua conexão.
Acesse a pasta ConectandoBD, e veja as propriedades em vídeo.
Criando um sistema de cadastro
Em nosso banco de dados vamos criar uma nova tabela chamada cadastro
205
com 5 campos.
Salve a sua tabela.
Vamos criar o nosso.
Crie um Form e dentro do Form a Tabela. Será necessário criar a tabela e
depois pela visão CODE, selecionar seu bloco de código e mover para dentro
do FORM.
206
Nomeie seu FORM para cadastro.
Lembre de mudar o nome de TODOS os textfields:
207
E no textfield senha, lembrese de mudar a opção Type, veja imagem:
Pronto, nosso formulário esta pronto, basta configurálo para inserir os registros
no banco de dados.
Clique no painel Server Behaviors, Insert Record e depois em e faça como
na imagem:
Preencha a próxima janela da seguinte forma:
208
Note que é importante que o nome dado ao Textfield seja igual ao nome
dado ao campo da tabela no banco de dados, assim o Dreamweaver atribui
cada textfield ao campo com o mesmo nome, o que facilita muito, ainda mais
pra quem esta começando.
Pronto! nossa página de cadastro esta pronta, salvea.
Agora basta criarmos a página que confirma o cadastro, que é a
página cadastrado.php.
Acesse a pasta CadastroBD, e veja as propriedades em vídeo.
209
Salve seu arquivo e teste ele pelo seu navegador
Ao clicar em Visualizar no PHP MyAdmin, você poderá verificar os dados
cadastrados no Banco de dados.
Vamos agora listar os dados cadastrados em nosso Banco
Crie uma página chamada consultar.php, e insira um FORM.
Dentro desse FORM vamos inserir uma tabela 2 X 2, pra deixar tudo mais
organizado.
Agora você vai criar um Textfield e nomeálo como: Apelido.
Crie também um Button
Veja como esta minha página:
210
Selecione o Form.
Feito isso, preencha as properties do FORM da seguinte forma:
Campo Action Nome da página aonde iremos mostrar o resultado da busca
Campo Method Lembrese de alterálo para GET
Pronto, nossa página de busca já foi criada, agora salvea, fechea e logo crie
uma nova página PHP. Lembrese que essa nova página deve ser salva como
busca2.php.
Vamos criar um Recordset, faça como na imagem:
211
Preencha a janela que se abrir como na imagem abaixo:
Atenção ao campo Filter, nessa parte que "filtramos" a busca, primeiro
selecionamos o campo em que será feita a busca, depois quais os resultados
serão filtrados, no nosso caso, somente os dados que forem iguais ao dados
passados pelo url e no último campo, colocamos o nome do nosso Textfield,
criado na página busca.php.
Acesse a pasta RecordsetBD, e veja as propriedades em vídeo.
Clique no painel Bindings para verificar os campos listados.
212
No painel Bindings, você irá arrastar os campos do seu Recordset para a
sua página. Na página busca2.php crie uma tabela com os campos a serem
listados e arraste os campos para as células.
Sistema de Login
Vamos criar a nossa página login.php nela teremos dois campos, Nick e
Senha que foram solicitados no sistema de cadastro, lembrase? Então criei
dois Textfields e nomeie o primeiro como Apelido
213
O segundo como Senha.
Não se esqueça de colocar um button.
Bem simples o que fiz na imagem acima. Você vai criar um FORM (aquele
quadrado pontilhado em vermelho) depois uma tabela, pra melhor organizar e
os Textfields.
Lembrese de alterar o TextField senha para o tipo Password
como na matéria passada.
Vá no painel Server Behaviors >> User Authentication >> Login User
Na janela que se abriu, preencha como na figura:
214
Salve seu arquivo.
Pronto, agora que o login esta configurado, vamos configurar a página
painel.php que terá acesso restrito.
Crie um arquivo PHP e salve com o nome painel.php, depois clique no painel
Server Behaviors> User Authentication> Restrict Acess to Page.
215
Preencha a janela que se abriu como na imagem:
Mas como toda página que tem um login, precisa de um logout. Clique
novamente em Server Behaviors > User Authetication > Log Out User.
216
Preencha como na imagem:
Falta apenas criar as páginas erro.php
Em erro.php, coloque a seguinte observação:
Login ou senha incorretos, por favor, tente novamente.
217
Como dito no inicio desse capítulo nosso objetivo era apenas dar a você uma
introdução da linguagem PHP, explicando suas principais características e
como o Dreamweaver se conecta a ele para a criação de conteúdos dinâmicos.
MONTAGEM E PUBLICAÇÃO DO PROJETO
PHOTOSHOP, FLASH E DREAMWEAVER
O primeiro passo na montagem de um site é criar a sua estrutura. Como vamos
trabalhar em cima do layout criado para o restaurante que fizemos em nosso
curso. No caso eu criei as pastas “imagens”, “swf”, para dentro de estas pastas
colocar os arquivos dessa categoria, provavelmente algumas outras pastas
serão criadas, bem como subpastas dentro destas. No caso de imagens, criei
as pastas “buffet”, “ambinterno” e “ambexterno”.
Trabalhando com as imagens que constituirão o site
Atualmente todos os sites possuem uma grande quantidade de imagens e pelo
fato do crescente acesso a Internet por banda larga, permite que se trabalhe
218
imagens com melhor qualidade.
O site de exemplo terá galerias de imagens com miniaturas que ao serem
clicadas abrirão imagens em tamanho grande, imagens com 700px de largura e
miniaturas com 135x100px. Nesse caso você pode usar um inicio como
tbimagem.jpg nas miniaturas, ou criar uma pasta para armazenálas.
Para facilitar o seu trabalho, é aconselhável em uma galeria
renomear as suas imagens para números como “01.jpg”, “02.jpg”, e
assim por diante. Eu aconselho usar para isso algum programa que
permita renomear os arquivos em lote , um software FREE muito bom para isso
é o XNView®.
O XNView está disponível no CDROM na pasta do Dreamweaver®
Após renomeadas as fotos no XNView, vamos trabalhar elas no Photoshop, em
relação a uma melhora das imagens e adequação de suas resoluções e
dimensões.
219
Vamos por exemplo nos basear nessa foto, ele precisa ser redimensionada
para a largura de 700px e ter sua resolução em 72 dpi, então clique no menu
Image, Image size.
Altere as suas dimensões e clique em OK.
É necessário também trabalhar na imagem a seu brilho e contraste, níveis e
curvas de cores. Comandos disponíveis através do menu Image, Adjustments.
220
Salve sua imagem.
Como vamos gerar miniaturas de 135x100px
Selecione a ferramenta CROP , e na barra de propriedades do Photoshop
coloque 135 de largura e 100 de altura.
221
Após cortar a imagem, vamos adicionar a ela o mesmo estilo que usamos na
montagem de nosso layout.
Como ele usa sombra e contorno externo, será necessário diminuir um pouco o
tamanho de sua imagem.
Pressione CTRL+T, ele abre a barra de propriedades para que você possa
222
alterar as dimensões. Marque o ícone de elo de corrente e diminua para 92%.
Depois clique no ícone de confirmação no final da barra.
Agora clique no menu File, Save for Web % Devices. Na tela que surge deixe
no formato JPG.
Clique no botão salvar. No caso mudei o nome para “tb022.jpg”.
Repita o processo para todas as fotos que seguirão esse padrão.
Apenas para relembrar nosso layout dividese em topo, miolo e rodapé.
O fundo do site será de uma única cor a “#e1e9ba”, isso será importante, pois
vamos usar ela como cor de fundo em nosso arquivo CSS.
O miolo do site terá como cor de fundo o branco, as dimensões do site estão
780px de largura a altura no layout foi de 900 px, porém isso não terá
importância no momento. A divisão está em 4 linhas sendo uma para o topo,
uma para a parte de cima do miolo, onde temos o slide show de fotos, a parte
do meio com cardápios e eventos e o rodapé.
A parte superior será um menu animado no Flash, bem como o slide show, as
demais seções serão montadas no HTML. A fonte utilizada é o Arial.
223
Montando o topo
Vou inicialmente exportar os elementos do topo que farão a animação do
Flash.Esse topo será comum a todas as páginas do site.
O topo tem 780x184, então inicie um filme no Flash com essas dimensões.
A cor de fundo do topo é “a2e0bd”, então coloque essa cor de fundo em seu
filme. Cria as seguintes camadas, logo, floral, barra, botões e AS.
224
Voltando ao Photoshop, como temos alguns efeitos de sombra em nosso topo,
vou exportar os elementos em separado para nosso layout.
Vamos inicialmente exportar o logo. Deixe somente visível a layer do logo, com
a ferramenta crop , faça um recorte da área de seu logo, e cuidado para
manter também a sombra.
Confirme o recorte e clique no menu File, Save for Web & Devices. Salve o
logo como PNG 24 bits com transparência.
225
Após exportar, desfaça o corte, e ative a layer dos florais e oculte a do logo,
repita o processo de exportação.
Importe as imagens exportadas no Flash e as converta em Movie Clips.
226
Para a barra, por se tratar de um retângulo preenchido com a cor “#90546f”,
vamos criar um retângulo dessa cor no flash com as dimensões de 780x10px.
Os botões também vamos desenhar no Flash.
Desenhe um retângulo e sem soltar o mouse, use as seta para baixo para ir
arredondando os seus cantos, depois defina o retângulo com as dimensões de
108x40 px.
Vamos preencher os botões com uma cor gradiente. Com o retângulo
selecionado, clique no menu window, color, no painel que aparece, escolha
Linear, no lugar da cor preta coloque “#90546f” e no lugar da branca coloque
“#61384E”.
Precisamos agora rotacionar o gradiente para que a parte escura fique na parte
superior. Ainda com o retângulo selecionado, junto ao grupo da ferramenta
Free Transform, tem o Gradiente Free Transform, clique sobre ele.
227
Rotacione seu gradiente conforme imagem.
Posicione o botão na barra, e duplique ele mais quatro vezes, depois
selecioneos, chame o painel Align, desmarque a opção To stage, e na
segunda linha e segunda coluna clique no botão do meio para deixar o mesmo
alinhamento.
Vamos criar um efeito no OVER de nossos botões.
Dê um duplo clique em um dos botões. Crie um quadro chave no quadro Over
e mude as cores do gradiente.
Na cor mais clara usei o vermelho “#FF0000” e na cor mais escura usei o
“#760101”. Mantenha a camada dos botões acima da camada do logo.
Crie uma camada acima dos botões com o nome de textos e acrescente os
textos aos botões. A cor dos textos é “fffcc8”.
A estrutura do topo está pronta. Vamos agora instanciar os botões. Coloque
como nome de instância nos botões: home_btn, restaurante_btn,
cardápios_btn, localização_btn e contato_btn.
228
Vamos animar nosso topo.
Crie um quadro chave para o logo no frame 12, crie uma interpolação de
movimento e adicione um Alpha 0 no frame 01. Arraste a camada do floral para
iniciar no Frame 12.
Crie uma camada acima da camada do floral e nomeie ela para floral.
Crie um retângulo que fique posicionado antes do inicio da imagem do floral.
Crie um quadro chave no quadro 36 e crie uma interpolação de forma.
229
Clique com o botão direito do mouse na camada mascara e clique em Mask.
Anime a barra também de forma que ela vá surgindo junto com o floral.
Posicione a barra para iniciar no frame 12 e crie uma interpolação até o frame
36. No frame 12 faça com que ele fique fora do palco a esquerda, e no frame
36 com que ele fique em sua posição correta.
Frame 12
230
Nas camadas dos botões e textos crie uma quadro chave a cada 5 frames, até
o quadro 60.
No Frame 35, deixe apenas o botão e o texto referente a Home, no 40, deixe
Home e Restaurante, no 45 deixe Home, Restaurante e Cardápio, no 50 deixe
todos menos contato e no 55 deixe todos.
Com isso nossa animação está pronta. Vamos agora as ações.
Na camada de ações, clique no primeiro quadro e pressione F9 para chamar o
painel de ações.
Desabilite o Script Assistance. Esse topo será comum a todas as páginas,
então da forma como está, a animação ocorrerá sempre que mudarmos de
página. Para evitar isso vamos adicionar um código que faça com que se
verifique se o topo já foi carregado
//cria as variáveis de verificação de bytes carregados e total
byteCarregado = this.getBytesLoaded();
byteTotal = this.getBytesTotal ();
//verifica se a quantidade de bytes carregados é diferente
//dos bytes totais, se isso for real, inicia
//caso contrario, vai ao último frame.
if(byteCarregado != byteTotal){ play();}
231
else { gotoAndPlay(55)}
Depois vamos acrescentar os códigos para chamar as outras páginas.
home_btn.onPress = function(){
getURL("index.php","");
}
Com isso montamos nosso topo.
Montando o Slide Show
Vamos montar um slide show com algumas fotos que dispomos do restaurante,
no caso vou usar 15 fotos. Em nosso layout nossas fotos tem uma dimensão
de 366x239 px., as maiores e as miniaturas tem 80x52 com as bordas brancas.
A borda das fotos maiores, vamos criar dentro do Flash.
Inicialmente escolhas as fotos que farão parte de seu slide show, abra elas no
Photoshop e faça os recortes na dimensão necessária. E salve as em uma
pasta chamada slide show, depois gere as imagens em miniaturas e
acrescente as bordas brancas. O processo deverá ser semelhante as fotos que
redimensionamos para a galeria que vamos construir posteriormente.
Inicie um arquivo Flash com as dimensões de sua imagem e crie as seguintes
camadas: Foto01, tarja, miniaturas, borda e AS.
232
Observe que vamos iniciar nossa animação a partir do Frame 02, pois no frame
01, vamos criar um PRELOADER para nosso filme. Na camada foto01,
adicione a primeira foto, na camada tarja faça um retângulo sem borda e com
preenchimento em branco, convertao em Movie Clip e coloque um Alpha de
50%, na camada miniaturas, adicione a miniatura da primeira foto, converta ela
em Movie Clip e na camada Borda desenhe um retângulo com contorno branco
e preenchimento vazio, depois pela barra de propriedades coloque o contorno
e 3.
Personalizando as miniaturas.
Instancie o movie clip da miniatura como “tira_mc” e depois de um duplo clique
para abrir o movie clip.
233
Depois converta novamente em MCFITA, será nesse MC que faremos nossa
animação, pois assim poderemos controlar a animação dela.
Converta sua miniatura para botão, e instancie como “mini01_btn.
Importe as demais miniaturas e repita processo, convertendo em botão e

depois instanciando.
Você pode selecionar todas as imagens na hora de importar as
imagens, elas serão importadas todas juntas. Clique com o botão
direito do mouse nas imagens empilhadas e escolha Distribute to
Layers, isso fará com que todas as imagens fiquem em suas respectivas
camadas,
Vamos agora criar a interpolação de movimento da barra. Crie um quadro
chave no frame 270 e arraste a fita até o final dela. Isso dentro do MCfita.
234
Volte a cena principal, e crie as interpolações das imagens grandes. Adicione a
primeira imagem no frame2, crie uma nova layer e adicione a imagem no frame
12 e crie um quadro chave no frame 18, crie uma interpolação de movimento
de alpha 0% para 100%, deixe dessa forma por 12 quadros e repita o processo
para as demais camadas.
Com isso temos então as imagens sofrendo transição entre elas e a fita
rolando.
Vamos então partir agora para a programação de nosso slide show.
Apenas para ficar mais fácil, nossas fotos grandes iniciam em:
Foto 01 – Quadro 02
235
Vamos fazer com que ao clicar na miniatura ele avance ou volte até a imagem
desejada.
Na camada de ações no frame 2, adicione o seguinte código:
tira_mc.fita_mc.mini01_btn.onPress = function(){
_root.gotoAndPlay(2);
}
Explicando: Ao clicar no objeto mini01._btn, que está dentro do Movie Clip
fita_mc que está dentro do Movie clipe tira_mc, vá e inicie no frame02.
Basta repetir o mesmo código para todos os demais botões apenas
direcionando a seus respectivos quadros.
236
Criação do Preloader
Vamos criar em nosso primeiro frame o nosso PRELOADER, vamos criar um
preloader de barra, onde uma pequena barra de progresso, mostrará ao
usuário o carregamento do filme.
Em nosso filme acrescente uma camada chamada textos.
crie uma caixa de texto dinâmico e instanciea como carregado_txt.
Crie uma layer barra, e adicione nela uma barra na vertical, converta em MC e
instancie como barra_mc
237
Edite seu MC barra e posicioneo alinhado pela esquerda, depois crie um
quadro chave no quadro 100 e aplique uma interpolação de forma. No quadro 1
do MC barra altere a largura para 1
Volte a cena principal, insira um quadro em branco nas camadas textos e
barra, para fazer isso, clique sobre o quadro 2 de cada uma das camadas e
clique com o botão direito.
Depois clique no primeiro frame da camada AS e insira a seguinte ação.
//cria a função de looping
onEnterFrame = function(){
//cria a variável total que pega o bytes totais do filme e os divide
//por 1000
var total = _root.getBytesTotal()/1000;
238
//cria a variável carregado que verifica os bytes carregados e os divide
//por 1000
var carregado = _root.getBytesLoaded()/1000;
//cria a variável porcentagem que divide os bytes carregados pelos
//bytes totais e multiplica por 100
//usamos também a função Math para arredondar o valor encontrado
var porcentagem = Math.round(carregado/total*100)
//escreve na caixa de texto o valor carregado e concatena com o símbolo
//de porcentagem
carregado_txt.text = porcentagem+ "%";
//verifica se a variável total for igual a variável carregado
if (total==carregado){
//se a condição for verdadeira vai para a cena filme e inicia
Play( );
}
//faz com que o MC barra inicie junto com a variável porcentagem
_root.barra_mc.gotoAndPlay(porcentagem);
}
Para poder testar seu Preloader, pressione CTRL+ENTER, na tela de
visualização, clique no menu Edit, Bandwidth Profiler.
239
Com isso ele mostrará um gráfico de seu filme. Para poder simular o
carregamento, clique na opção Simulate Download. Você também pode
configurar a velocidade de teste, pela opção Download Settings.
240
Com isso finalizamos nosso slide show.
Montagem da página inicial
Vamos agora partir para a montagem da página inicial do site.
Vamos inicialmente voltar ao nosso layout no Photoshop, precisamos agora
exportar as imagens de fundo do miolo, onde teremos o slide show e a
chamada do site, do rodapé , dos eventos e chamada para os cardápios.
Após ter aberto seu layout criado no Photoshop, vamos exportar o fundo em
gradiente preto e chumbo que ficará abaixo do slide show. Por se tratar de um
degrade, não tenho como reproduzilo no HTML, oculte o grupo do topo, pois o
mesmo já está pronto. Oculte as camadas do miolo que não serão utilizadas.
Com a ferramenta CROP, faça o recorte da área.
241
Através do comando, Save for Web & Device, salve a imagem em formato
JPG, pois não precisamos de transparência.
Feito isso, vamos exportar o sorvete, porém ele possui transparência, então
vamos exportálo em PNG 24. Lembrese de ocultar todas as camadas
deixando somente a do sorvete, e faça o recorte.
Vamos exportar agora nossos botões Saiba Mais. Repita o processo.
Temos dois botões saiba mais, uma maior na cor vinho e um menor na cor
cinza, precisamos exportar os dois, pode colocar como nome “smgde.png” e
“smpeq.png”.
Imagens em PNG com transparência em 24 bits, não ficarão
transparentes em navegadores Internet Explorer®, versões 6 ou
anteriores, nos demais navegadores não haverá problema. Se
precisar de uma compatibilidade com todos os navegadores, exporte as
imagens em GIF.
Para o rodapé, a mesma situação, é um degrade, então oculte os textos e
exporte o retângulo, pelo fato de não possuir transparência, exporteo em JPG.
Para as miniaturas da página inicial, vamos utilizar as mesmas que usamos no
slide show.
Para a área de eventos vamos utilizar um retângulo de cantos arredondados,
então vamos fazer um recorte na parte superior e exportar e outro na parte
inferior.
242
É importante termos os códigos hexadecimais das cores as serem utilizadas
em nosso site.
O verde do Box é: #d2f7e6.
O amarelo: #fffcc8.
O cinza: #557878.
Montando a página inicial
Inicie o projeto de seu site.
Inicie um novo arquivo php. Salveo como index.php.
No título de seu documento , coloque o nome do cliente, ou a informação a ser
mostrada ao usuário.
Vamos agora acrescentar os comando de META, de descrição e de palavras
chaves.
Inicialmente as palavras chave. Clique no menu, Insert, HTML, Head Tags,
META. Adicione as palavras chaves de seu site, separados por vírgula.
Vamos agora adicionar o comando Meta Description, o caminho é o mesmo,

apenas mudando de Keywords para Description.
243
Personalizando o CSS
Clique no Menu File, New CSS
Salve seu arquivo CSS, mesmo ele estando em branco.
Agora no arquivo que você criou, clique no painel CSS e faça um link com o
arquivo CSS.
Vamos agora personalizar nossa pagina, clique no menu Modify, Page
Properties.
244
Em nosso exemplo utilizamos a fonte Arial Rounded, como ela não aparece na
listagem vamos editar nossa listagem. Ao clicar para a escolha da fonte clique
em Edit Font List, e crie a sua lista.
Na cor de Background usei #e1e9ba.
245
Para os links mantive.
E cabeçalhos.
246
Ao acessar os códigos de sua página ele mostra o CSS, selecione tudo e
recorte. Depois abra o arquivo CSS e cole dentro dele. Apague as TAGS
<style> e </style>.
Salve os dois arquivos.
247
Crie uma tabela de 780px de largura, 4 linhas e 01 coluna.
Coloque seu alinhamento em CENTER.
Na primeira célula, clique no painel Inter, Commom e escolha Flash
, adicione o topo nessa célula.
Ao salvar o arquivo ele avisa que adicionará arquivos de script.
248
Na segunda célula, crie outra tabela com duas colunas, 1 linha e largura de
100%.
Para colocar o degrade de fundo nessa tabela, vamos ao painel de CSS e
clique no botão New CSS Rule .
Defina como classe, de um nome a ela e clique em OK.
249
Clique na opção Background e preencha conforme a imagem.
Para aplicar a classe na tabela,através do rodapé do Dreamweaver, clique na
TAG Table para selecionar a tabela e aplique a classe pela barra de
propriedades.
Adicione na célula da direita o seu slides Show.
Vamos personalizar o rodapé.
Para o rodapé, por ser um item comum a todas as páginas, vamos colocálo
250
como include.
Então crie um novo arquivo php, faça o link com nosso arquivo CSS, crie uma
tabela de 100% e duas colunas. Personalize o CSS para colocarmos a imagem
do rodapé como fundo, personalize também a cor de texto para branco. Será
necessário criar uma subclasse para isso.
Um include, não pode ter códigos repetidos da página que está sendo incluído,
então abra o código de seu include deixe somente os códigos da tabela.
Ao voltar a visualização design sua tabela estará limpa, não se preocupe, salve
o arquivo.
Para incluir o rodapé como um arquivo na página, clique na célula do rodapé e
no painel Insert, chame a aba PHP, e clique na opção INCLUDE, ele coloca na
251
visualização SPLIT, dentro dos parênteses coloque o nome do arquivo entre
aspas.
Monte a parte esquerda de seu site e publique para ver como fica.
Vamos finalizar a parte do miolo do site
Na célula onde serão mostrados as chamadas para os principais cardápios e
para o evento mensal.
Nessa célula, faças as divisões, de acordo com o conteúdo a ser aplicado.
252
Observe que a célula foi inicialmente dividida em três linhas e duas colunas. Na
coluna da esquerda a célula de baixo foi dividida em três colunas.
Na célula da direita na primeira linha foi colocada a imagem recortada de cima,
e na última linha a imagem de baixo.
Depois foram acrescentados os títulos das seções, e criado classes para as
suas cores.
Vamos criar a classe que permita colocar bordas somente na direita de cada
célula.
Clique no botão para criação de uma nova classe e clique na opção borda.
Observe que por ser necessário borás apenas na direita, eu desmarquei a
253
opção Same for all .
Seu layout deverá ficar da seguinte forma:
Para o saiba mais do evento vamos adicionar um link para a imagem em
tamanho maior. Vamos usar um componente chamado lightbox, que consiste
em uma aplicação Javascript que carrega somente a imagem e mantém o site
em segundo plano.
Na pasta Matrizes do Dreamweaver, existe uma pasta chamada
lightbox, nela teremos os arquivos e pastas necessários.
A primeira coisa a ser feita é copiar a pasta “lightbox_assets” para dentro do
projeto de seu site.
Faça o link normalmente com a imagem a ser carregada.
254
Abra seu modelo lightbox.html e visualize em CODE na linha 80.
Copie a partir de título até o texto entre colchetes. E cole após a chamada da
imagem maior em seu código.
Precisamos agora copiar os códigos de chamada dos arquivos de Javascript,
no arquivo lightbox.html, copie as linhas 14 , 15, 16 e 17
Cole antes do fechamento da TAG </head> de sua página.
Para finalizar é preciso colocar a chamada para a função em sua página. No
documento lightbox.html, na linha 20, copie a chamada
onload=" initLightbox()" para dentro da TAG Body.
255
O recurso de LightBox, vamos utilizar em nossas galerias de imagens, nas
páginas internas.
Página Interna
Para as páginas internas nos basearemos no modelo criado.
256
A imagem retrata a página referente ao restaurante. Então temos em comum o
topo e o rodapé, o miolo será alterado para as informações do restaurante e
para as fotos.
Delete as tabelas internas e mescle todas as linhas da tabela principal.
Visualize também o código para limpar qualquer excesso de código que possa
ter ficado, apenas tome cuidado e caso tenha alterado algo errado, desfaça.
Depois insira mais uma linha e divida a primeira linha em duas colunas, na
coluna da esquerda adicione a imagem.
Na direita dessa mesma linha vamos acrescentar nosso texto.
Na parte de baixo vamos promover um pequena mudança. Para evitar
confusão nas galerias de fotos, vamos criar apenas links para as páginas que
vão conter as fotos.
Criando a galeria de fotos.
Vamos primeiro criar a galeria de fotos do Ambiente externo.
257
Vamos aproveitar a estrutura da página do restaurante. Apenas apague as
fotos e textos que existam dentro das linhas. Através do comando File Save As,
salve seu arquivo com outro nome, o mesmo definido no link da página
restaurante. No caso usei “galext.php”.
Crie mais duas linhas, a linha do meio divida em 4 colunas, nelas serão
colocadas as fotos.
Em nossa galeria vamos utilizar o recurso de lightbox, como fizemos na página
inicial. Como aproveitamos a estrutura da pagina inicial, os códigos de
chamada dos scripts e na tag <BODY> já estão no documento. Vamos apenas
precisar fazer a chamada junto das imagens. Porém vamos fazer de forma
rápida e funcional.
Insira a primeira imagem e faça o link com a imagem grande.
Abra o documento na visualização CODE e após a chamada para o link

adicione “title="Externas" rel="lightbox[Externas]”.
258
Publique seu arquivo e verifique se está ok. Feito isso, vamos apenas copiar a
imagem já com o link para a célula do lado e mudar o nome da imagem e do
link na barra de propriedades, com isso não será necessário ficar abrindo o
código para colocar o código de chamada do lightbox.
Para as demais galerias o processo é ainda mais simples. Através do comando
do Menu File Save As, salve seu arquivo de galeria de fotos, com o nome da
galeria de fotos internas, no caso usei “galint.php”. Altere o título da página e o
link no rodapé.
Visualize seu documento no modo CODE.
Selecione no código onde diz “[Externas]” e clique no menu Edit, Find and
replace.
No campo Replace coloque “[Internas]”.
Clique no botão Replace All, assim substituímos todas as chamadas do
259
lightbox.
Agora vamos substituir a chamada na pasta de imagens.
Chame novamente a janela de Find and Replace e faça conforme a imagem.
Depois é só acrescentar as fotos que estão faltando, pois essa galeria tem 27
imagens.
Para a galeria do Buffet, basta repetir o mesmo procedimento.
Criação de Camadas
Na página inicial temos também chamadas para os cardápios especiais, porém
para eles não faremos uma página em especifico, vamos sim fazer com que
eles façam aparecer layers com estes cardápios.
Porém antes vamos criar as imagens das layers no Photoshop.
Abra o Photoshop e crie arquivos de 400x400 px.
Abra uma imagem para a montagem. Acerte seu tamanho no espaço
Faça uma seleção semelhante a imagem.
260
Aplique um Feather na imagem.
Depois na área em branco acrescente o texto da imagem.
Através do comando Save for Web & devices, exporte sua imagem em JPG.
Repita o processo para as imagens do carneiro e da culinária polonesa.
261
Volte ao Dreamweaver.
Na página índex.php, crie uma layer. E insira a imagem da chamada do
carneiro dentro dela.
Depois clique na layer e defina um nome para a layer e defina sua dimensão
para o mesmo tamanho da imagem no caso 400x400px.
Com a imagem selecionada, clique na barra de propriedades e crie um mapa
de imagem em volta da área chamada fechar.
Clique no painel Behaviors, escolha o comportamento, showhide elements. Na
listagem que aparece, clique sobre o nome de sua layer, e depois clique no
botão Hide.
262
Clique em OK. Ele adiciona o link e cria o comportamento no painel. Vamos
colocar a chamada diretamente no link.
Visualize o código onde diz MM_showHideLayers('carneiro','','hide') e copie.
Volte a visualização design e na caixa de link coloque:
javascript:MM_showHideLayers('carneiro','','hide')
Depois apague a linha da chamada do comportamento.
Porém eu não quero a layer diretamente visível, eu vou chamála através do
botão saiba mais.
O processo é bem simples, copie o javascript que está no campo link de fechar
a layer. E cole no campo link do botão saiba mais, e mude o no final onde está
‘hide’ para ‘show’.
Agora para finalizar, chame o painel AP elements e deixe a layer oculta.
263
Repita o processo para as outras duas opções de cardápios especiais, Buffet e
feijoada.
Para a página dos cardápios, vamos criar apenas as divisões na célula, na
esquerda vamos colocar os alimentos que constam em cada cardápio e na
direita uma montagem com algumas fotos.
Através do comando Save for web and Devices, exporte suas imagens e
adicione no arquivo HTML.
Utilizando o recurso de Mapas do Google
Atualmente é possível acrescentar uma série de recursos ao seu site, através
de códigos disponibilizados por outros sites como indicadores financeiros,
consulta de CEP, serviços de meteorologia. Um dos recursos mais utilizados
atualmente é o recurso de mapas do Google.
Vamos utilizar esse recurso em nossa página de localização.
Primeiramente você precisa ter uma conta de usuário no Google.
Acesse então o http://maps.google.com.br/ e localize seu endereço no mapa,
depois incorpore o endereço ao seu mapa e preencha a descrição.
264
Observe que na direita dessa janela, você terá um texto escrito Link. Ao clicar
nele, você poderá, acessar ao mapa através de um endereço, ou então
incorporar o mapa ao sei site através de um IFRAME.
Copie todo o código do IFRAME e em seu documento HTML coleo.
Observe que logo no inicio do código, é especificado as dimensões do IFRAME
iframe width=" 780" height=" 500" então para adequar suas dimensões altere
os valores de width e height. Salve seu arquivo e publique.
265
Criando o Formulário de Contato
Para finalizar nosso site, vamos criar o formulário de contato.
Vamos criar dois arquivos, um que será nosso formulário, e outro arquivo que
fará a leitura dos dados postados no formulário, o envio dos dados para o e
mail do contato responsável pelo site e a página de retorno.
Inicialmente vamos criar o formulário conforme a imagem.
Não se esqueça de criar o form.
E também de dar os nomes corretos aos campos de seu formulário.
266
Salve seu documento e crie o arquivo envia_contao.php.
Dentro dele adicione o seguinte código PHP para interpretar os dados e fazer o
envio.
<?
//Recebendo os dados do formulário.
$nome = $_POST[" nome" ];

$email = $_POST[" email" ];
$assunto = $_POST[" assunto" ];
$mensagem=$_POST[" mensagem" ];
//Setando o restante das variáveis para o disparo do email
$destinatario = " seuemail@provedor.com" ;
$formato = " \nContenttype: text/html\n" ;
//Incluindo os campos nome e email no corpo da mensagem.
$msg = " Nome: " .$nome." <br> Assunto: " .$assunto." <br> Mensagem:
" .$mensagem;
//Enviando o email
mail(" $destinatario" ," $assunto" ," $msg" ," from: " .$email.$formato);
//Criando a mensagem de confirmação de envio de email.
267
echo " <div align=center>Mensagem enviada com sucesso! Aguarde um
retorno. Clique <a href='index.php'> <b>aqui</b> </a> para
retornar.</div>" ;
?>
Para finalizar vamos validar os campos de nosso formulário.
Clique na barra de rodapé do Dreamweaver e selecione a opção form de seu
formulário, depois clique no painel TAG INSPECTOR , opção Behaviors.
Clique no sinal de mais (+) e escolha a opção Validate Form.
268
Para cada um dos campos, marque a opção “Required” e clique em OK.
Ao tentar enviar o formulário, ele apresentará uma tela de erro.
Porém o aviso está em inglês, vamos abrir nossa visualizar na opção CODE e
fazer as alterações.
Primeiro localize no código do script o seguinte texto: is required e substitua
por é requerido.
Localize agora: The following error(s) occurred e substitua por Foi(ram)
encontrados os seguintes erro(s).
Salve e publique seu arquivo.
269
Com isso finalizamos a criação de nosso projeto de site.
CUIDADOS NA CONSTRUÇÃO DE UM SITE
Construir um site interessante é um grande desafio, e saber HTML não é o
suficiente, então agora vamos dar a você algumas regras de boa etiqueta na
WEB
Trace metas
Existem hoje muitas páginas na WEB e com os mais variados assuntos, para
que você tenha algum sucesso em seu site, o mesmo deve oferecer algo
atualizado e interessante.
Se você fizer algo focado em um público em especial, com bom conteúdo
atualizado constantemente o seu site tem boas chance s de ser bem visitado.
Portanto antes de fazer um site planeje bem o que você quer colocar em seu
site por que se um internauta o visitar e não ver algo que o interesse com
certeza ele não voltará.
Faça um esboço
Organizar um site é uma das formas mais fáceis de garantir um bom resultado
final. Então antes de sair criando códigos de HTML, pare pegue papel e caneta
e desenhe o seu site para que ele não fique totalmente fora de foco.
270
Divida o seu site
Divida o seu site em seções principais, relacionadas aos assuntos principais.
Isto além de facilitar o seu trabalho também facilitará ao visitante a navegação
pelo seu site.
Acesso direto a informação
Evite sites “labirintos” em que o visitante fica navegando de um lado para outro
e nunca consegue encontrar o que realmente deseja.
Evite também percursos longos até o destino desejado, pois com certeza a
internauta que visitar o seu site vai acabar desistindo no meio do caminho.
Então para facilitar ao máximo a navegação por seu site crie barras de
navegação se possível com links para todas a seções.
Ao criar bookmarks (indicadores) lembrese de que ao final de cada assunto
criar um link para o inicio da página.
Evite sites tipo carnaval
Procure seguir um padrão entre as suas páginas, se for usar fontes escuras
use fundos mais claros e vice versa e não faça uma página rosa choque, outra
em seguida verdelimão, etc...
Não se prenda a plataformas
Você não pode esquecer que os internautas usam diversos tipos de sistemas
(Windows, Mac, Linux, etc...), então procure diminuir ao máximo tamanho de
imagens, usar uma resolução de tela que você sabe que não dará problema na
maioria das telas e se possível testar o seu site em diversos sistemas
operacionais.
Divulgue o seu site e observe os acessos
Procure cadastrar o seu site em todos os mecanismos de busca possíveis, e
verifique se possível ( alguns provedores de hospedagem dão esta opção)
verifique sempre ao cesso ao seu site, se ele estiver baixo com certeza alguma
coisa nele está errada.
GLOSSÁRIO
271
<HTML></HTML>: Marca início e fim de uma página.
<HEAD></HEAD>: delimita o cabeçalho de uma página.
<BODY></BODY>: Delimita o corpo de uma página.
<TITLE></TITLE> Define o título de uma página.
<H1></H1> à <H6></H6>: Define títulos, subtítulo de diferentes níveis.
<B></B>: Formata o texto em Negrito.
<I></I>: Formata o texto em Itálico.
<FONT></FONT>: Altera o fonte, tamanho e ou cor do texto.
<P></P>: Delimita um parágrafo.
<BR>: Quebra de Linha.
<DIV></DIV>: Configura o alinhamento do texto.
<CENTER></CENTER>:Centraliza objetos(texto, imagem, tabelas)
<HR>: Cria uma linha horizontal.
<IMG>: Insere uma imagem.
<A></A>: Insere um Link
<OL>
<LI>
<LI>
</OL>: Cria uma lista ordenada.
<UL>
<LI>
<LI>
</UL>: Cria uma lista não ordenada.
<DL>
<DT></DT>
<DD></DD>
</DL>: Cria uma lista de definição.
<FORM></FORM>: Cria um formulário.
<INPUT> Define os campos do formulário.
<SELECT OPTION></OPTION>: define uma lista de opções no formulário.
</SELECT>
<TEXTAREA></TEXTAREA>: Define uma área de texto no formulário.
272
<TABLE></TABLE>: Cria uma tabela
<CAPTION></CAPTION>: Define o título de uma tabela.
<TR></TR>: Define a linha de uma tabela.
<TD></TD>: Define as células de uma tabela.
<TH></TH>: Define as células de cabeçalho de uma tabela.
<FRAMESET></FRAMESET>:Define o conjunto de janelas (frames) da tela.
<FRAME>:Configura cada região (frame) da tela.
<NOFRAMES></NOFRAMES>: Define o conteúdo que será exibido por
browser sem suporte a frames.
<APPLET></APPLET> Insere um applet Java em uma página.
<PARAM> Definem os parâmetros do applet.
<STYLE></STYLE> Define os estilo usados na página.
273

Cursowebdesigner Codificacao

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Cursowebdesigner Codificacao

Uploaded by

Copyright:

Available Formats

CODIFICAÇÃO

O Comando <P> inicia um novo parágrafo onde o texto é automaticamente

<OL TYPE=...START=...>...</OL> são os elementos delimitadores de listas

HREF=”URL” Especifica o endereço do URL ao

Usar o recurso do autocarregamento é indicado quando você deseja exibir

O principal elemento de sucesso da Internet é o hiperlink. Que permite a

XHTML é uma reformulação da linguagem HTML (Hypertext Markup

e o asterisco representa que o arquivo não foi salvo, ele sempre

Para quem está utilizando qualquer versão anterior a barra terá a

Ainda temos como propriedades da imagem a opção V Space à Permite

insert Flash na barra. . Dois conceitos atualmente muito debatidos e

Podemos acrescentar alguns parâmetros em nosso arquivo de multimídia,

No painel camadas é possível marcar a opção “ Prevent Overlaps” , isso fará

Acesse a pastas Camadas Aninhadas, e veja as propriedades em

Podemos acrescentar novas molduras criando novas subdivisões em nossos

Para o campo e­mail preencha “email” e para o campo comentários coloque

Operador Descrição Exemplo Resultado

Explicando como isto funciona: as variáveis $_POST["nome"] e

É uma coleção de dados inter­relacionados, representado informações sobre

Os campos a serem inseridos numa tabela devem ser normalmente criados a

Vamos conhecer o painel PHP do Dreamweaver, analisando as opções

Após esse procedimento você terá o painel MySQL Connection para

Importe as demais miniaturas e repita processo, convertendo em botão e

Vamos agora adicionar o comando Meta Description, o caminho é o mesmo,

Abra o documento na visualização CODE e após a chamada para o link

$nome = $_POST[" nome" ];

mail(" $destinatario" ," $assunto" ," $msg" ," from: " .$email.$formato);

You might also like

Para o campo email preencha “email” e para o campo comentários coloque

É uma coleção de dados interrelacionados, representado informações sobre