Dreamweaver CS5, Notas de estudo de Análise de Sistemas de Engenharia

Baixe Dreamweaver CS5 e outras Notas de estudo em PDF para Análise de Sistemas de Engenharia, somente na Docsity!

DREAMWEAVER

CS

Desenvolvido

por Marcos Paulo Furlan

Desenvolvido

por Marcos Paulo Furlan

Multibrasil Download - www.multibrasil.net

• Í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
    • Painéis
    • Barra de Propriedades
• TRABALHANDO COM TEXTOS................................................................................................
  • Localizar e Substituir
  • Parágrafos e Layout
    • Parágrafos e Quebras de linha
  • Títulos
  • Texto Pré-Formatado
  • Listas
  • Recuando Texto
  • Caracteres Especiais em HTML
  • Linhas Horizontais
• IMAGENS
  • Mapas de Imagem
  • Criando Rollovers simples
  • Image Placeholder
• CONTEÚDO MULTIMIDIA..........................................................................................................
  • Inserção de Animações Flash (SWF)
  • Flash Vídeo...................................................................................................
• 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
• CAMADAS E POSICIONAMENTO
  • Posicionamento CSS
    • Posicionamento absoluto versus relativo
  • Criando Camadas
• FORMULÁRIOS
  • Os elementos de um Formulário...................................................................
  • Tipos de campos de formulário.....................................................................
• COMPORTAMENTOS
  • Adicionando Comportamentos......................................................................
  • Pop-ups
• 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. 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.

Clique em Test para verificar a conexão com o servidor.

Clique em Save. Clique em Save Novamente.

Se você tem interesse em usar o Dreamweaver para aplicações dinâmicas conheça o Curso WebKit do Apostilando.com - http://apostilando.com/pagina.php?cod=30.

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

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. Podemos configurar estas informações através de CSS (Estilos) ou diretamente por TAGS HTML. 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)

que no topo da janela aparece como documento não salvo o tipo de documento.

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

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

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

Caso queira, você pode montar todo o seu site e depois enviá-lo para teste. Caso queira pode também usar um programa de FTP Externo ao Dreamweaver.

INTERFACE

Ao criar seu primeiro arquivo o Dreamweaver ele apresentará na parte superior a barra de menus. Na direita temos o painel Insert.

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

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.

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.

TRABALHANDO COM TEXTOS

Diferente das versões anteriores, agora a formatação de textos em um documento no Dreamweaver XHTML, possui na barra apenas a escolha de TAG para o texto Como Format, Class (classe), e algumas como formatação de Negrito e itálico. Não podemos mudar mais a fonte do texto por esta barra. Para este tipo de mudança será necessário trabalharmos com CSS que será

visto posteriormente.

No desenvolvimento de sites atualmente, não se formata mais o texto diretamente em sua TAG de chamada exemplo (texto , 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 ), recurso que era possível até a versão CS3 do Dreamweaver. Na opção formato podemos definir se será somente texto ou terá atribuições de cabeçalho (veremos posteriormente). Temos a opção de atribuir um link ao texto (assunto a ser visto posteriormente). O uso de marcadores e recuos. Através do Menu Text temos outras opções de formatação como: Estilos variados de formatação como, por exemplo, sublinhado, ênfase, citação etc.

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.