Dreamweaver CS3, Notas de estudo de Informática

Baixe Dreamweaver CS3 e outras Notas de estudo em PDF para Informática, somente na Docsity!

ÍNDICE

• ÍNDICE
• INTRODUÇÃO
• PROJETO DE UM SITE
• CRIANDO DOCUMENTOS.........................................................................................................
  • Propriedades da página
  • Publicando seu arquivo
• INTERFACE - Formas de visualização.............................................................................
  • Visualização do Documento
    • Paletas
    • Barra de Propriedades
• TRABALHANDO COM TEXTOS................................................................................................
  • Localizar e Substituir
  • Parágrafos e Layout
    • Parágrafos e Quebras de linha
  • DIV e SPAN
  • Títulos
  • Texto Pré-Formatado
  • Listas
  • Recuando Texto
  • Caracteres Especiais em HTML
  • Linhas Horizontais
• IMAGENS
  • Mapas de Imagem
  • Criando Rollovers simples
  • Image Placeholder
  • Barras de Navegação
  • Inserindo HTML gerado No Fireworks
• CONTEÚDO MULTIMIDIA..........................................................................................................
  • Inserção de Animações Flash (SWF)
  • Inserindo Botões e Textos do Flash
  • Flash Vídeo...................................................................................................
  • Plug-ins
  • Image Viewer
• HYPERLINKS
  • Links Absolutos e Relativos
    • Os nomes de caminho absolutos
  • Criando Links
  • Âncoras.........................................................................................................
    • Criando a âncora
    • Chamando o link da âncora
  • Links para e-mail
• TABELAS....................................................................................................................................
  • Células
  • Criando um Layout de site com Tabelas.......................................................
• FOLHAS DE ESTILO
  • Editando uma folha de Estilos
  • Criando uma classe
  • Aplicando CSS em nosso layout exemplo
• CAMADAS E POSICIONAMENTO
  • Posicionamento CSS
    • Posicionamento absoluto versus relativo
  • Criando Camadas
  • Escolhendo as TAGS
  • Aninhando Camadas
  • Criando nosso layout com DIVS
• FRAMES
  • Criando os Frames
  • Salvando Frames
  • Alterando as propriedades de suas molduras...............................................
  • Criando Frames Embutidos (IFRAME)
• FORMULÁRIOS
  • Os elementos de um Formulário...................................................................
  • Tipos de campos de formulário.....................................................................
  • Menu de Salto...............................................................................................
• COMPORTAMENTOS
  • Adicionando Comportamentos......................................................................
  • Pop-ups
  • Ocultar Mostrar camadas..............................................................................
  • Validando Formulários
• SPY (AJAX NO DREAMWEAVER)
  • Spry Menu Bar
  • Spry Accordion
  • Spry Effects
    • Appear/ Fade
    • Blind
    • Grow/ Shrink
    • Shake
    • Squish
    • Slide
    • Highlight
• EXTENSÕES DO DREAMWEAVER
  • Instalando uma nova extensão
• CONCLUSÃO

INTRODUÇÃO

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 da versão CS3, 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. 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 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.

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

Alguns servidores de hospedagem solicitam que seu site fique dentro de uma 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.

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

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). 3 ÆPermitem conectar / desconectar com seu servidor. 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 Æ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 CS3 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.

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.

Podemos definir a fonte dos mesmos 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)

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.multimidiaearte.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 webdesigners optam por usar o nome default, caso exista os dois arquivos, a preferência fica para o index.

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 Pu

File(s). Ele mostra a tela de conexão.

Ao término ele mostra ao lado do arquivo enviado um aviso em verde.

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.

INTERFACE

Ao criar seu primeiro arquivo o Dreamweaver ele apresentará na parte superior a barra de menus, abaixo dela temos a barra de Inserção de conteúdo, essa barra pode ser vista de duas formas em forma de Menu.