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

Criando uma Âncora ................................................................................. 29  Enviando E­Mail 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 (CSS­P)............................................................................ 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

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  Plug­ins ................................................................................................... 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 e­mail..................................................................................... 105  TABELAS.................................................................................................... 105  Células .................................................................................................... 108  Tabela Modificada................................................................................... 109  FOLHAS DE ESTILO.................................................................................. 110  Editando uma folha de Estilos................................................................. 113

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  Pop­ups................................................................................................... 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

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 e­mails ......................................................................................... 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

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

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  divide­se  em  uma  introdução  a  codificação  HTML,  pois  mesmo utilizando­se 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).

Assunto ou exemplo disponível em vídeo aula no CD­ROM. 

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 hiper­ligaçõ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 tornou­se 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

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: Module­based  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  ECMA­262,  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,  escrevendo­o 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  incluem­se  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,  utilizando­se 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ódigo­fonte  seguindo  as  regras  da  linguagem.  Esse  código­fonte  é  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  usando­se  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  usando­se  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.  Trata­se  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ício­fim,  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 utilizando­se 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, pode­se  mudar  o  alinhamento  de  forma  que  o  texto  do  parágrafo  inteiro  fique  centralizado  ou  alinhado  à  direita.  Nesse  caso,  deve­se  usar  um  par  de  comandos <P> envolvendo o parágrafo.

18 

ALIGN=CENTER  ALIGN=RIGHT  ALIGN=JUSTIFY  ALIGN=LEFT 

Centraliza o texto.  Alinha pela margem direita  Alinha pelas duas margens  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, deixando­a 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  Negrito  Itálico  Sintaxe  <B>Texto</B>  <I>Texto</I>  Função  Aplica o estilo Negrito  Aplica o estilo Itálico  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  Small  <BIG>Texto</BIG>  Aumenta a fonte e aplica negrito 

Sublinhado  <U>Texto</U> 

<SMALL>Texto</SMAL  Reduz e altera a fonte  L> 

Sobrescrito  <SUP>Texto</SUP>  Subscrito  <SUB>Texto</SUB> 

Eleva o texto e diminui seu corpo  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  Aqua  Black  Fúcsia  Green  Brown  Código  #70DB93  #000000  #FF00FF  #00FF00  #800000  Cor  Blue  Cyan  Gray  Lime  Navy  Código  #0000FF  #00FFFF  #C0C0C0  #32CD32  #23238E

21 

Olive  Silver  White 

#808000  #E6E8FA  #FFFFFF 

Red  Teal  Yellow 

#FF0000  #008080  #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 pode­se 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”  “MIDLE” | “BOTTOM”  |  Especifica  o  alinhamento  da  imagem  relativamente  à  linha  de  texto  onde  é  exibida.  ALIGN=”LEFT”  “RIGHT”  |  Especifica  o  alinhamento  da  imagem  relativamente  às  bordas  laterais  da  janela  WIDTH=”número”|  ”número%”  Esse  parâmetro  especifica  a  largura  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  envolvendo­a  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 E­Mail diretamente da Página HTML 
Você  pode  acionar  o  programa  padrão  de  e­mail  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>  Trata­se 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  encontra­se  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,  pode­se  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,  aplica­se  a  ROWS.  Combinando ROWS e COLS  Pode­se  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  LEFT  frame.  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  janela­alvo. 

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  salve­o  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 pode­se 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 altera­se 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, palavras­chave, etc.  <META  URL=url>  O  comando  META  deve  ser  especificado  entre  os  comandos  <HEAD> HTTP­EQUIV=resposta  CONTENT=descrição  NAME=descrição 

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 HTTP­EQUIV=”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="HTML­Kit"> 

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 (CSS­P) 
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 CSS­2 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 plug­ins 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=" background­color: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{background­color: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>  o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme  </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{background­color: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>  o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme  </P>  </body>  </html> 

Principais atributos de uma folha de estilo 
Atributos de Posição  Elemento  Position  Top  Definição  Tipo de Posicionamento  Exemplo de Atributo  Absolute ou relative 

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  Height  Z­index 

Largura do Quadro  Altura do Quadro  Camada  usada 

10in, 150px, 30 cm  10in, 150px, 30 cm  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  Border­width  Largura da borda do quadro  Border­color  Border­style  Cor da borda do quadro  Estilo da Borda  Thin, medium, thick  Yellow,#00FFAA  None,dotted,dashed,s  olid,double  Broder­width  Largura da borda do quadro  Thin,medium,thick 

Atributos de Fontes  Elemento  Font­family  Definição  Exemplo de Atributo  Arial, 

Fonte  que  será  usada  para  Helvetica,  mostrar o texto  Courier  12pt,10cm, 5in  Normal, italic 

Font­size  Font­style  Font­weight 

Tamanho da Fonte  Estilo  Peso da fonte 

Bold, lighter,100,300 

Atributos e Cores de Fundo da Página  Elemento  Color  Backgroun­  color  Background­  Imagem de fundo  image  Imagem.gif  Definição  Cor do texto  Cor de fundo  Exemplo de Atributo  Marrom,#ffffcc  Marrom,#ffffcc 

Atributos de Texto  Elemento  Definição  Exemplo de Atributo 

Word­spacing  Espaçamento entre as palavras  1em, 5pt  Letter­  spacing  Text­  decoration  Vertical­align  Alinhamento vertical  Middle, top, sub, super Decoração de texto  None, underline, blink  Espeçamento entre as letras  0,1em, 0,1cm, 2 pt 

50 

Text­align  Text­height 

Alinhamento Horizontal  Altura da Linha 

Left,center, right  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 separando­as 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;margin­left: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;  text­decoration:underline;}  div.menu{color:#900;  font­weight:bold;  text­decoration:none;  font­size: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;  font­family:Arial;  background:black url(images/backarvore.jpg) no­repeat;}  h1,h2{  font­weight:bold;}  .cassea{  color:#999999;}  CSS para Impressão:  body{  color:black;  font­family:Arial;  h1,h2{  font­weight: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=”page­break­before: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 

Letter­spacing: 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:  Word­spacing: 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:  Line­height:2; ou line­height:12px ou line­height:% 

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 pode­se 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:  Repeat­x:  Instrui  o  browser  para  repetir  o  gráfico  de  segundo  plano  na  horizontal.

55 

Repeat­y: Instrui o browser para repetir o gráfico de segundo plano na vertical.  No­repeat: 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: border­width, border­style, border­  color.  Boder style  None  Dotted  Dashed  Solid  Double  Groove  Ridge  Inset  outset  Border width  Thin  Medium  Tick  lenght 

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 palavra­chave 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 z­index: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, torna­se 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  parti­la  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  deve­se  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 deve­se 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>,  cria­se  um  estilo  para  a  fonte  e  aplica­se  esse  estilo 
na fonte (se o estilo for somente a uma palavra ficaria <span style= “font­family: 

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 (font­weight).

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  inseri­lo 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  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. ,  outra  forma,  é 

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, deve­se preencher a descrição da imagem, no  campo Long description pode deixar em branco

91 

Ao  adicionar  à  imagem  a  barra  de  propriedades  modifica­se  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 plug­in 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 
(http://pt.wikipedia.org/wiki/Usabilidade) 

utilizados  na  web  atual  são  usabilidade 

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 insira­o 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  utiliza­se  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,  plug­ins,  etc...,  basta  apenas  que  o  navegador  do  usuário  tenha  o  plug­in  do  Flash  instalado  (98 % dos computadores o tem), o maior “ícone” de sucesso do Flash vídeo ao  o  site  YOUTUBE  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. 
(www.youtube.com), 

que  atualmente  é  sinônimo  de  vídeo  na 

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 plug­in 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  plug­in  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. 

Plug­ins 
Para  adicionar  outros  tipos  de  arquivos  multimídia  em  seu  web  site  é  necessário à adição de um recurso chamado de Plug­in, para inserir um plug­in  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 Plug­in 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  plug­ins  é  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”  arquivo a ser linkado. 

diretamente até o 

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 sobrepondo­a. 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 e­mail 
Podemos também atribuir link para e­mail, através de textos ou imagens, o que  muda é a forma de chamada, para se criar o link para um e­mail, deve­se usar  mailto:endereco@seuemail.com.br. 

Essa  forma  de link  para  e­mail tem  um  problema  que  ao  ser  clicado  no  link  ele  vai  abrir  o  programa  de  e­mail  padrão  (Outlook  Express,  Outlook,  etc...),  e  muitos usuários  não  utilizam  programas  de  e­mail,  acessam  o  e­mail  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  deve­se  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 baseia­se 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.  Z­index  é  relativo  ao  empilhamento  de  nossas  camadas,  isso  permite  que  possamos colocar uma layer sobre a outra, a camada de Z­index maior sempre  ficará  acima  da  outra.  Um  detalhe  importante,  animações  em  SWF  sempre  ficarão  acima  da  layers  independente  do  Z­index,  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  pode­se  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 arraste­a 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 introduzi­la 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,  deve­se  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  deve­se  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 e­mail, ou diretamente para um e­mail.  É 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  e­mail  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 = " \nContent­type: 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 deve­se 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. 

Pop­ups 
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  pop­up,  embora  seja possível configurar e até mesmo autorizar à abertura de janela pop­up, 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 pop­up,  é  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  POP­UP  ,  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 e­mail precise de um e­mail 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  e­mail,  marque  a  opção  “Required”  e  marque  também  o  radio  button “Email address”, isso fará com ele aceite apenas endereços de e­mail.  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  de e­mail válido”.  Localize  a  linha  obrigatório(s)”.  Localize  agora  encontrados os seguintes erros”.  Salve e teste novamente seu formulário.  e  mude  para  “Foram  mude  para  “é  requerido  ou  campo(s)  mude  para  “digite  um  endereço 

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. 

Target Element: Selecionar o ID do objeto ou elemento onde será aplicado o  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  Dreamweaver (Windows > Behaviors), clicar no botão adicionar comportamento  (+),  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 

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 milisegundos.  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 

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>. 

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  Dreamweaver (Windows > Behaviors), clicar no botão adicionar comportamento  (+), selecionar a opção Effects e depois o Squish. A janela de configuração do  efeito Squish vai 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>. 

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. 

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 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 

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 milisegundos.  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  CD­ROM  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,  refere­se  a  IP  de  sua  máquina.  Ele  também  vai  apresentar  uma  tela  vazia,  pois  ainda  não  temos  nada  criado  ali.  Lembre­se  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  +  Adição  Exemplo Resultado  x=2  x+2  x=2  x­5  x=4  x*5  15/5  5%2  %  Módulo (restante da divisão) 10%8  10%2  4 

­ 

Subtração 

*  / 

Multiplicação  Divisão 

20  3  1  2  0

165 

Operador Descrição  ++  Incrementos 

Exemplo Resultado  x=5  x++  x=5  x­­  x=6 

­­ 

Decrementos 

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. 

Operador Descrição  ==  !=  >  <  >=  <  <html>  <head>  <title>Teste PHP</title> é igual a  não é igual  é maior que  é menor que 

Exemplo Resultado  5==8  5!=8  5>8  5<8  falso  verdadeiro  falso  verdadeiro  falso  verdadeiro 

é maior que ou igual a  5>=8  é menor que ou igual a 5<=8 

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)  {  echo " verdadeiro" ;  }  Else  {  echo " falso" ;  }  echo " <br>" ;  $x = 5;  $resultado = ($x > 8);  if($resultado == 1)  {  echo " verdadeiro" ;  }  else

168 

{  echo " falso" ;  }  echo " <br>" ;  $x = 5;  $resultado = ($x > 8);  if($resultado == 1)  {  echo " verdadeiro" ;  }  else  {  echo " falso" ;  }  echo " <br>" ;  $x = 5;  $resultado = ($x >= 8);  if($resultado == 1)  {  echo " verdadeiro" ;  }  else  {  echo " falso" ;  }  echo " <br>" ;  $x = 5;  $resultado = ($x <= 8);  if($resultado == 1)  {  echo " verdadeiro" ;  }

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>  <title>Teste PHP</title>  </head>  <body>  <?php  $x = 6;  $y = 3;  $resultado = ($x < 10 && $y > 1);  if($resultado == 1)  {  echo " verdadeiro" ;

170 

}  else  {  echo " falso" ;  }  echo " <br>" ;  $x = 6;  $y = 3;  $resultado = ($x == 5 || $y == 5);  if($resultado == 1)  {  echo " verdadeiro" ;  }  else  {  echo " falso" ;  }  echo " <br>" ;  $x = 6;  $y = 3;  $resultado = (!($x == $y));  if($resultado == 1)  {  echo " verdadeiro" ;  }  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 " Divirta­se." ;  }  else {  echo " Boa semana" ;  echo " Bom trabalho" ;  }  ?>  <body>  <html> 

Exemplo onde usamos vários if e else  <html>  <head>  <title>Teste PHP</title>  </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:  echo " O valor da variável número é igual a 2" ;  break;  case 3:  echo " O valor da variável número é igual a 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á  aumentar­se 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á repeti­lo contanto que a condição seja verdadeira.  Sintaxe  do {  código a ser executado;  } 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) {  código a ser executado;  }  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:  </head>  <body>  for</title> 

<?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)  código a ser executado;  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"] 

$_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  A  d  D  F  g  G  h  H  i  I  j  l  m  M  n  O  s  t  T  w  Y  y  "am" ou "pm"  "AM" ou "PM"  Dia do mês, começando com zero (01­31)  Três caracteres que representam o dia da semana (Mon­Sun)  Nome completo do mês (January­December)  A hora no formato de 12 horas sem começar como zero (1­12)  A hora no formato de 24 horas sem começar com o zero (0­23)  A hora no formato de 12 horas começando com o zero (01­12)  A hora no formato de 24 horas começando com o zero (00­23)  Os minutos começando com o zero (00­59)  "1" se tivermos a luz do dia, caso contrário "0"  Dia do mês sem começar com o zero (1­31)  Nome completo do dia (Monday­Sunday)  O mês como número, começando com o zero (01­12)  Três caracteres que representam o nome do mês (Jan­Dec)  O mês como número, sem começar com o zero (1­12)  A diferença do tempo de Grennwich (GMT) em horas  Os segundos começando com o zero (00­59)  A quantidade de dias do mês atual (28­31)  Fuso horário atual (e.g. "GMT")  O dia da semana como um número (0­6, 0=Domingo(Sunday))  O ano com quatro dígitos (e.g. 2005)  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 (162­366) 

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. Deve­se 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,  deve­se  escrever  seu  nome  e  indicar  os  parâmetros entre parênteses. 

<html>  <head>  <title>Teste PHP</title>  </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>  <title>Teste PHP</title>  </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 " <li>"  . $funcionarios[1];  echo " <li>"  . $funcionarios[3];  echo " </ul><p>" ;  echo " <b>Funcionárias</b>" ;  echo " <ul>" ;  echo " <li>"  . $funcionarios[2];  echo " <li>"  . $funcionarios[4];  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. Pode­se criar uma função que imprime a data atual  e  pode­se  reusá­lo  sem  precisar  reescrever  o  código  cada  vez  que  for  necessário.  No  exemplo  a  seguir,  pode­se  chamar  o  primeiro  script  de  cabecalho.php e o próximo script o inclui através do comando include. 

<html>  <head>  <title>Teste PHP</title>  </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 auto­destró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>  <title>Teste PHP</title>  </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 

<title>Página PHP</title>  </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>  <title>Teste PHP</title>  </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>  <title>Página PHP</title>  </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>  <a href=" teste.php?valor=2" >link 2</a><br>  <a href=" teste.php?valor=3" >link 3</a><br>  <a href=" teste.php?valor=4" >link 4</a><br>  <a href=" teste.php?valor=5" >link 5</a><br>  </body>  </html>  Caso exista necessidade de se passar mais de um parâmetro, deve­se separá­  los através  de “e comercial” (&) 

<html>  <head>  <title>Página PHP</title>  </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  Santos</a><br> href=" teste.php?nome=Maria&sobrenome=Santos" >Maria 

190 

</body>  </html> 

Envio de e­mails  
O PHP permite que se enviem e­mails 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>  <title>Página PHP</title>  </head>  <body>  <?php  $destinatario = "marcospfurlan@hotmail.com";  $assunto = "Como enviar e­mais via PHP";  $mensagem = "  <h2>Envio de e­mails via PHP</h2>  <p>Depois que o servidor está configurado, é muito simples enviar e­mails  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 

MIME­Version: 1.0\r\n  Content­type: text/html; charset=iso­8859­1\r\n";  mail($destinatario, $assunto, $mensagem, $cabecalho);  echo "e­mail enviado com sucesso";  ?>  </body>  </html> 

Banco de dados  
É  uma  coleção  de  dados  inter­relacionados,  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  inter­relacionados  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  palavras­chave  identificam  os  comandos  SQL  comumente  utilizados:  Palavra­  chave:  SELECT  INSERT  UPDATE  DELETE  Descrição:  Recupera os registros especificados no banco de dados  Inclui um novo registro em uma tabela de banco de dados  Altera  os  valores  nos  registros  de  banco  de  dados  especificados  Remove os registros de banco de dados especificados 

As seguintes palavras­chave são utilizadas para refinar as instruções SQL:  Palavra­  chave  FROM  WHERE  ORDER BY  Descrição  Denomina a fonte de dados de uma operação  Define uma ou mais condições para a operação  Classifica  as  linhas  de  conjuntos  de  registros  em  uma  determinada ordem  Agrupa  o  conjunto  de  registros  pelos  itens  especificados,  selecionados em uma lista 

GROUP BY 

Os  seguintes  operadores  especificam  condições  e  executam  funções  numéricas e lógicas:  Operador  Significado  =  LIKE  Igual a  Como (caracteres curingas são aceitos)

196 

Operador  Significado  <>  NOT  LIKE  <  >  <=  >=  AND  Diferente de  Não igual a (curingas são aceitos)  Menor que  Maior que  Menor ou igual a  Maior ou igual a  Ambas as condições devem ser atendidas, como Minas Gerais AND  Bahia  Pelo menos uma das condições deve ser atendida, como Matos OR  Mattos  Exclui a condição seguinte, como Paris NOT França 

OR  NOT 

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,  difereciando­se  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("iso­8859­1");  mb_http_output("iso­8859­1");  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:  Lembre­se,  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,  divide­se  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, lembre­se 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, salve­a.  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  ­ Lembre­se de alterá­lo para GET  Pronto, nossa página de busca já foi criada, agora salve­a, feche­a e logo crie  uma nova página PHP. Lembre­se 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,  lembra­se?  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. 

Lembre­se  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 CD­ROM 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 divide­se 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  selecione­os,  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,  converta­o  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  Foto 02 – Quadro 12  Foto 03 – Quadro 30

235 

Foto 04 – Quadro 48  Foto 05 – Quadro 66  Foto 06 – Quadro 84  Foto 07 – Quadro 102  Foto 08 – Quadro 120  Foto 09 – Quadro 138  Foto 10 – Quadro 156  Foto 11 – Quadro 174  Foto 12 – Quadro 192  Foto 13 – Quadro 210  Foto 14 – Quadro 228  Foto 15 – Quadro 246 

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 instancie­a 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  posicione­o  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 reproduzi­lo 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.  Lembre­se  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, exporte­o 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. Salve­o 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, show­hide 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 cole­o. 

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 = " \nContent­type: 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)  lembre­se  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 verde­limã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 

Sign up to vote on this title
UsefulNot useful