Apostila Dreamweaver CS5

Adobe Dreamweaver CS5 Web Design (Desenvolvedor Web)
Adobe Dreamweaver CS5

(Web Design)
(Desenvolvimento e Ambientao de Aplicaes Web)
CENTRAL DE ATENDIMENTO
(81) 3542.1446
1
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Introduo.
O Dreamweaver CS5 da Adobe uma IDE de desenvolvimento Web em HTML profissional para desenhar, codificar e desenvolver sites, pginas e aplicativos para a Web. Para aqueles que gostam do controle da codificao manual HTML ou para os que preferem trabalhar em um ambiente de edio visual, o Dreamweaver fornece ferramentas teis para aprimorar a sua experincia de criao para Web. Os recursos de edio visual do Dreamweaver permitem criar pginas, de modo rpido, sem que seja necessrio escrever uma nica linha de cdigo. possvel visualizar todos os elementos ou propriedades do site e arrast-los de um painel fcil de usar diretamente para um documento. Dinamize o fluxo de trabalho de desenvolvimento de sites criando e editando as imagens no Fireworks da Adobe ou em outro aplicativo grfico e, posteriormente, importando-as diretamente para o Dreamweaver ou incluindo objetos do Flash da Adobe. O Dreamweaver tambm fornece um ambiente de codificao completo que inclui ferramentas de edio de cdigos (como codificao por cores e preenchimento de tags) e material de referncia de linguagens sobre Cascading Style Sheets (Folha de estilo em cascata) (CSS), JavaScript e ColdFusion Markup Language (CFML), entre outros. A tecnologia HTML do Adobe Roundtrip permite importar documentos HTML codificados manualmente sem reformatar o cdigo; em seguida, voc pode optar por reformatar o cdigo, aplicando o seu estilo de formatao preferido. O Dreamweaver tambm permite criar aplicativos dinmicos e com suporte de banco de dados para a Web, utilizando tecnologia de servidor como CFML, ASP.NET, ASP, JSP e PHP. O Dreamweaver inteiramente personalizvel. Crie os seus prprios objetos e comandos, modifique os atalhos de teclado e adicione cdigos JavaScript para ampliar ainda mais os recursos do Dreamweaver com novos comportamentos, Property inspectors (Inspetores de propriedades) e relatrios de site.
Capitulo 1 - Explorando a rea de trabalho.

Para obter o mximo de aproveitamento do Adobe Dreamweaver CS5, voc dever compreender os conceitos bsicos inerentes rea de trabalho do Dreamweaver e saber como selecionar opes, utilizar os inspetores e os painis e definir as preferncias mais adequadas ao seu estilo de trabalho. A rea de trabalho do Dreamweaver permite exibir documentos e propriedades de objetos. Ela inclui vrias operaes comuns em barras de ferramentas para que voc possa fazer alteraes em documentos com rapidez.
O layout da rea de trabalho

No Windows, o Dreamweaver fornece um layout -integrado- em uma nica janela. Na rea de trabalho integrada, todos os painis e janelas so integrados em uma nica janela, que a maior do aplicativo.
Veja na gravura abaixo toda a estrutura e as partes da rea de trabalho do Dreamweaver CS5.
2
Elementos da rea de trabalho do Dreamweaver

A pgina inicial permite que voc abra um documento recente ou crie um novo documento. Na pgina inicial, voc pode aprender mais sobre o Dreamweaver realizando um tour do produto ou um tutorial. A barra Insert contm botes para inserir vrios tipos de objetos, como imagens, tabelas e camadas, em um documento. Cada objeto uma parte do cdigo HTML, que permite definir vrios atributos medida que so inseridos. Por exemplo, voc pode inserir uma tabela clicando no boto Table (Tabela), na barra Insert. Se preferir, inclua os objetos utilizando o menu Insert em vez da barra Insert A barra de ferramentas do documento contm botes que oferecem opes para diferentes visualizaes da janela do documento (como visualizao do projeto e do cdigo), vrias opes de exibio e algumas operaes comuns, como a visualizao em um navegador. A barra de ferramentas padro (que no exibida no layout padro da rea de trabalho) contm botes para executar operaes comuns dos menus File (Arquivo) e Edit (Editar): New (Novo), Open (Abrir), Save (Salvar), Save All (Salvar tudo), Cut (Recortar), Copy (Copiar), Paste (Colar), Undo (Desfazer) e Redo (Refazer). Para exibir a barra de ferramentas padro, selecione View (Exibir) > Toolbars (Barras de ferramentas) > Standard (Padro). A barra de ferramentas Coding (exibida apenas na visualizao de cdigo) contm botes que permitem executar vrias operaes de codificao padro.
3
A barra de ferramentas Style Rendering (Processamento de estilo) (oculta por padro) contm botes que possibilitam ver como ficaria o projeto com tipos de mdia diferentes se fossem utilizadas folhas de estilo dependentes de mdia. Ela tambm contm um boto que permite ativar ou desativar estilos CSS. A janela do documento exibe o documento que est sendo criado e editado. O Property inspector permite que voc exiba e altere vrias propriedades do objeto ou texto selecionado. Cada tipo de objeto apresenta diferentes propriedades. Por padro, o Property inspector no expandido no layout da rea de trabalho Coder. O seletor de tags, localizado na barra de status situada na parte inferior da janela do documento, mostra a hierarquia das tags que fazem parte da seleo atual. Clique em qualquer tag na hierarquia para selecion-la e exibir todo o seu contedo. Os grupos de painis so conjuntos de painis relacionados, agrupados sob um cabealho. Para expandir um grupo de painis, clique na seta de expanso esquerda do nome do grupo. Para desencaixar um grupo de painis, arraste a pina na extremidade esquerda da barra de ttulo do grupo. O painel Files permite gerenciar arquivos e pastas que faam parte de um site do Dreamweaver ou que estejam localizados em um servidor remoto. O painel Files tambm permite acessar todos os arquivos contidos no disco local, de forma semelhante ao Windows Explorer (Windows) ou ao Finder (Macintosh).
A janela do documento
A janela do documento mostra o documento que est aberto. possvel selecionar uma das seguintes visualizaes: A visualizao do projeto (Design) um ambiente de projeto que voc utiliza para criar o layout visual da pgina, executar a edio visual e desenvolver rapidamente os aplicativos. Nessa visualizao, o Dreamweaver exibe uma representao inteiramente editvel do documento, semelhante visualizao de uma pgina em um navegador. possvel configurar a visualizao do projeto para que exiba o contedo dinmico durante o trabalho com o documento A visualizao do cdigo (Code) um ambiente de codificao manual para gravar e editar cdigo HTML, JavaScript, de linguagem de servidor como PHP ou ColdFusion Markup Language (CFML) e qualquer outro tipo de cdigo. As visualizaes do cdigo e do projeto (Split) permitem ver o documento nessas duas visualizaes em uma nica janela. Quando a janela do documento contiver uma barra de ttulo, esta exibir o ttulo da pgina e, entre parnteses, o nome e o caminho do arquivo. Aps o nome do arquivo, o Dreamweaver exibir um asterisco, se voc tiver feito alteraes ainda no salvas. No Windows, quando a janela do documento maximizada no layout de rea de trabalho integrada, ela no contm a barra de ttulo. Nesse caso, o ttulo da pgina, e o nome e caminho do arquivo aparecero na barra de ttulo da janela principal da rea de trabalho.
Quando a janela do documento est maximizada, as guias aparecem na parte inferior da rea da janela do documento, mostrando os nomes de arquivo de todos os documentos que estiverem abertos. Para alternar para um documento, clique na sua respectiva guia.
4
A barra de ferramentas do documento

A barra de ferramentas do documento contm botes que permitem alternar rapidamente diferentes visualizaes do documento: A visualizao do cdigo, do projeto e uma visualizao dividida (que mostra as visualizaes do cdigo e do projeto). A barra de ferramentas tambm contm alguns comandos e opes comuns relacionados visualizao do documento e sua transferncia entre os sites locais e remotos.
Verificao de Erros Atualizar a visualizao do projeto Auxlio Visuais. Validar o Markup
(Mostrar visualizao do cdigo Code). (Mostrar visualizao do cdigo e do projeto Split)
Server Debug (Mostrar visualizao do projeto Design)
Opes de Exibio Titulo do Documento Visualizar no Navegador. Gerenciamento de Arquivos
As seguintes opes so mostradas na barra de ferramentas do documento: Code - Exibe apenas a visualizao de cdigo na janela do documento. Split - Exibe a visualizao de cdigo em uma parte da janela do documento e a visualizao do projeto na outra parte. Quando essa visualizao combinada selecionada, a opo Design View on Top (Visualizao do projeto no alto) torna-se disponvel no menu View Options. Utilize essa opo para especificar qual visualizao aparecer na parte superior da janela do documento. Design - Exibe apenas a visualizao do projeto na janela do documento. Server Debug - Exibe um relatrio para ajudar na depurao da pgina atual do ColdFusion. O relatrio inclui erros da pgina, se houver. Ttulo do Documento - Permite que voc digite um ttulo para o documento, que ser exibido na barra de ttulo do navegador. Se j existir, o ttulo do documento aparecer nesse campo. Verificao de Erros - Permite verificar a compatibilidade entre diferentes navegadores. Validar o Markup - Permite validar o documento atual ou uma tag selecionada. Gerenciamento de Arquivos - Exibe o menu pop-up File Management. Visualizador o Navegador - Permite visualizar ou depurar o documento em um navegador. Atualizar a visualizao do projeto - Atualiza a visualizao do projeto do documento aps as alteraes feitas na visualizao de cdigo. As alteraes feitas na visualizao de cdigo no so exibidas automaticamente na visualizao do projeto at que sejam executadas determinadas aes, por exemplo: salvar o arquivo ou clicar neste boto.
5
Opes de Exibio - Permite definir as opes das visualizaes de cdigo e do projeto, inclusive qual visualizao deve aparecer em primeiro plano. As opes do menu so relacionadas exibio atual: a visualizao do projeto, a visualizao do cdigo ou ambas.
A barra de ferramentas padro

A barra de ferramentas padro contm botes para executar operaes comuns dos menus File e Edit : New, Open, Save, Save All, Cut, Copy, Paste, Undo e Redo. Utilize esses botes da mesma forma que os comandos equivalentes nos menus.
A barra de status
A barra de status, situada na parte inferior da janela do documento, fornece informaes adicionais sobre o documento que est sendo criado.
Ferramenta Zoom Ampliao Definida Tamanho do documento e tempo estimado para download
Ferramenta Hand (Mo) Seletor de Tags Ferramenta Select (Selecionar)
Menu pop-up Window Size (Tamanho da janela)
O seletor de tags mostra a hierarquia das tags que fazem parte da seleo atual. Clique em qualquer tag na hierarquia para selecion-la e exibir todo o seu contedo. Clique na tag <body> para selecionar o corpo inteiro do documento. A ferramenta Mo permite que voc clique no documento e arraste-o na janela do documento. Clique na ferramenta Seleo para desativar a ferramenta Mo. A ferramenta Zoom e o menu pop-up Set Magnification (Definir ampliao) permitem que voc defina um nvel de ampliao para o documento. O menu pop-up Window Size (visvel apenas na visualizao do projeto) permite redimensionar a janela do documento para um tamanho predeterminado ou personalizado. direita do menu pop-up Window Size so mostradas as estimativas de tamanho do documento e de tempo de download da pgina, incluindo todos os arquivos dependentes, como os arquivos de imagens e de outras mdias.
A barra Insert
A barra Insert contm botes para voc criar e inserir objetos, como tabelas, camadas e imagens. Quando voc passa o mouse sobre um boto, exibida uma dica de ferramenta com o nome desse boto.
Os botes so organizados em diversas categorias, que podem ser alternadas no lado esquerdo da barra Insert. Categorias adicionais so exibidas quando o documento atual contm cdigo do servidor, como
6
documentos ASP ou CFML. Quando o Dreamweaver inicializado, a ltima categoria com a qual voc trabalhou aberta.
Algumas categorias possuem botes com menus pop-up. Quando voc seleciona uma opo em um menu pop-up, ela se torna a ao padro do boto. Por exemplo, se voc selecionar Image Placeholder (Alocador de espao de imagem) no menu pop-up Image (Imagem), o Dreamweaver inserir um alocador de espao de imagem na prxima vez que o boto Image for clicado. Sempre que voc selecionar uma nova opo no menu pop-up, a ao padro do boto ser alterada. A barra Insert est organizada nas seguintes categorias: A categoria Common (Comuns) - Permite criar e inserir os objetos mais utilizados, como imagens e tabelas. A categoria Layout - Permite inserir tabelas, tags div, camadas e quadros. Voc tambm pode escolher entre trs visualizaes de tabelas: Standard (Padro), Expanded Tables (Tabelas expandidas) e Layout. Quando o modo Layout for selecionado, podero ser utilizadas as ferramentas de layout do Dreamweaver : Draw Layout Cell (Desenhar a clula de layout) e Draw Layout Table (Desenhar a tabela de layout). A categoria Forms (Formulrios) - Contm botes para criar formulrios e inserir elementos de formulrio. A categoria Text (Texto) - Permite inserir uma variedade de tags de formatao de texto e de lista, como b, em, p, h1 e ul. A categoria HTML permite inserir tags HTML para rguas horizontais, contedo do cabealho, tabelas, quadros e scripts. A categoria HTML - Permite inserir tags HTML para rguas horizontais, contedo do cabealho, tabelas, quadros e scripts. A categoria HTML - Permite inserir tags HTML para rguas horizontais, contedo do cabealho, tabelas, quadros e scripts. A categoria Application (Aplicativo) - Permite inserir elementos dinmicos, como conjuntos de registros, regies repetidas e formulrios de insero e de atualizao de registros. A categoria Flash elements (Elementos Flash) - Permite inserir elementos Adobe Flash. A categoria Favorites (Favoritos) - Permite agrupar e organizar em um nico local os botes da barra Insert mais utilizados.
A barra de ferramentas Coding

A barra de ferramentas Coding contm botes que permitem executar vrias operaes de codificao padro, como reduzir e expandir selees de cdigos, realar cdigo incorreto, aplicar e remover comentrios, recuar cdigo e inserir trechos de cdigo recentemente utilizados. A barra de ferramentas Coding fica visvel apenas na visualizao de cdigo e aparece verticalmente do lado esquerdo da janela do documento.
7
No possvel desencaixar nem mover a barra de ferramentas Coding, mas voc pode ocult-la.
Barra de Ferramentas Coding Permite voc realizar vrias atividades de codificao padro, muito usada para trabalhar com banco de dados Web. Usar essa barra se torna muito til, por que permite realar, corrigir e aplicar cdigos prontos.
Voc tambm pode editar a barra de ferramentas Coding para exibir mais botes (como Word Wrap [Quebra de linha], Show Hidden Characters [Mostrar caracteres ocultos] e Auto Indent [Recuo automtico]) ou ocultar botes que no deseja utilizar. Para isso, voc deve editar o arquivo XML que gera a barra de ferramentas.
Alternar entre visualizaes na janela do documento

Voc pode exibir um documento da janela do documento na visualizao do cdigo, na visualizao do projeto ou nas visualizaes do cdigo e do projeto. Para alternar entre as visualizaes na janela do documento, execute um dos seguintes procedimentos: Utilize o menu View: Selecione View > Code (Cdigo). Selecione View > Design (Projeto). Selecione View > Code and Design (Cdigo e projeto).
Utilize a barra de ferramentas do documento:
Clique no boto Show Code View.
Clique no boto Show Code and Design Views.
Clique no boto Show Design View.
8
Para alternar entre a visualizao do cdigo e a visualizao do projeto: Pressione Control+til (~)
Dispor janelas de documentos em cascata ou lado a lado

Se tiver vrios documentos abertos simultaneamente, voc poder mostr-los em cascata ou lado a lado. Para dispor janelas de documentos em cascata, siga o procedimento abaixo: Selecione Window > Cascade. Para dispor janelas de documentos lado a lado, siga um dos procedimentos abaixo: Selecione Window > Tile Horizontally (Lado a lado horizontalmente) ou Window > Tile Vertically (Lado a lado verticalmente).
Redimensionar a janela do documento

A barra de status exibe as dimenses atuais da janela do documento (em pixels). Para criar uma pgina cuja aparncia seja melhor em determinado tamanho, voc poder ajustar a janela do documento para qualquer um dos tamanhos predeterminados, edit-los ou criar novos tamanhos.
Para redimensionar a janela do documento de acordo com um tamanho predeterminado:
Selecione um dos tamanhos no menu pop-up Window Size situado na parte inferior da janela do documento.
O tamanho da janela mostrado reflete as dimenses internas da janela do navegador, sem incluir as bordas. O tamanho do monitor exibido entre parnteses. Por exemplo: seria recomendvel utilizar o tamanho 536 x 196 (640 x 480, padro) se os visitantes do site estiverem utilizando o Microsoft Internet Explorer ou o Netscape Navigator com configuraes padro em um monitor de 640 x 480 pixels. Para alterar os valores na lista do menu pop-up Window Size: 1. No menu pop-up Window Size, selecione Edit Sizes.
9
2. Clique em qualquer dos valores de largura ou altura na lista Window Sizes e digite um novo valor. Para que a janela do documento se ajuste apenas a uma largura especfica (mantendo a altura inalterada), selecione um valor de altura e exclua-o. 3. Clique na caixa de texto Description (Descrio), para digitar um texto descritivo sobre determinado tamanho. 4. Clique em OK para salvar a alterao e retornar janela do documento. Para adicionar um novo tamanho ao menu pop-up Window Size: 1. No menu pop-up Window Size, selecione Edit Sizes. 2. Clique no espao em branco abaixo do ltimo valor na coluna Width (Largura). 3. Digite os valores de Width e Height (Altura). Para definir apenas os valores de largura ou de altura, basta deixar um desses campos vazio. 4. Clique no campo Description, para inserir um texto descritivo sobre o tamanho adicionado. 5. Clique em OK para salvar a alterao e retornar janela do documento. Por exemplo, digite SVGA ou PC comum ao lado da entrada referente a um monitor de 800 x 600 pixels, e Mac de 17 pol. ao lado da entrada referente a um monitor de 832 x 624 pixels. A maioria dos monitores permite ajustes para vrias dimenses em pixels.
Definir as preferncias da barra de status

Defina as preferncias da barra de status utilizando a caixa de dilogo Preferences (Preferncias). Para definir as preferncias da barra de status: 1. Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh). A caixa de dilogo Preferences ser exibida. 2. Selecione Status Bar (Barra de status) na lista Category (Categoria) esquerda.
3. Defina as opes de preferncias. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. 4. Clique em OK.
Utilizar barras de ferramentas, inspetores e menus contextuais

O Dreamweaver contm vrias ferramentas que permitem fazer alteraes rapidamente durante a criao ou a edio de um documento. As barras de ferramentas padro, do documento e Coding servem para editar o documento atual e trabalhar nele. A barra Insert contm botes para criar e inserir objetos, como tabelas, camadas e imagens. E o Property inspector permite editar as propriedades desses objetos.
10
Como alternativa para a barra Insert e o Property inspector, utilize os menus contextuais para criar e editar objetos.
Exibir barras de ferramentas

Utilize as barras de ferramentas padro e do documento para executar operaes de edio padro e relacionadas ao documento. Utilize a barra de ferramentas Coding para inserir cdigo rapidamente e a barra de ferramentas Style Rendering para exibir a pgina da forma como ela seria apresentada em diferentes tipos de mdia. Voc pode optar por exibir ou ocultar as barras de ferramentas conforme necessrio. Para mostrar ou ocultar uma barra de ferramentas, execute um dos seguintes procedimentos: Selecione View > Toolbars e, em seguida, selecione a barra de ferramentas.
Clique com o boto direito do mouse (no Windows) ou clique com a tecla Control
pressionada (Macintosh) em uma das barras de ferramentas e, em seguida, selecione a barra de ferramentas no menu contextual.
Utilizar a barra Insert

A barra Insert contm botes para criar e inserir objetos, como tabelas e imagens. Os botes esto organizados em categorias. Quando voc passa o mouse sobre um boto, exibida uma dica de ferramenta com o nome desse boto.
Exibir a barra Insert e respectivas categorias e menus

Voc pode ocultar, mostrar, reduzir ou expandir a barra Insert de acordo com a sua necessidade. Voc tambm pode exibir as categorias diferentes da barra Insert. Algumas categorias dessa barra tm botes que contm menus com comandos comuns. Se preferir exibir as categorias como guias na parte superior da barra Insert, altere o layout da barra Insert. Para ocultar ou mostrar a barra Insert, execute um dos seguintes procedimentos:
Selecione Window > Insert.
Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada (no Macintosh) na barra Insert da barra de ferramentas do documento, da barra de ferramentas padro ou da barra de ferramentas Coding e selecione Insert Bar (Barra Insert).
Para mostrar os botes em uma determinada categoria: Clique na seta ao lado do nome da categoria (no lado esquerdo da barra Insert) e selecione outra categoria no menu pop-up.
11
Para exibir o menu pop-up de um boto: Clique na seta para baixo ao lado do cone do boto.
Para mostrar as categorias da barra Insert como guias:
Clique na seta ao lado do nome da categoria (no lado esquerdo da barra Insert) e selecione Show as Tabs (Mostrar como guias). As categorias so exibidas como guias na parte superior da barra Insert.
Para mostrar as categorias da barra Insert como um menu:
Nota
Talvez seja necessrio clicar na barra de ttulo da barra Insert para reabri-la.
Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada (no Macintosh) na barra Insert e selecione Show as Menus (Mostrar como menus). A barra Insert exibe as categorias em um menu, em vez de em guias.
Utilizar a barra Insert para inserir objetos

A barra Insert um mtodo conveniente para criar e inserir objetos. Para inserir um objeto:
1. No
lado esquerdo da barra Insert, selecione a categoria adequada.
12

2. Siga
um dos procedimentos abaixo: Clique em um objeto de boto ou arraste o cone de boto para a janela do documento. Clique na seta em um boto e selecione uma opo no menu.
Dependendo do objeto, poder ser exibida uma caixa de dilogo de insero de objeto correspondente que solicita a busca um arquivo ou de parmetros especficos de um objeto. Como alternativa, o Dreamweaver poder inserir o cdigo no documento, ou abrir um editor de tags ou um painel para que voc especifique informaes antes da insero do cdigo. Se um objeto for inserido na visualizao do projeto, nenhuma caixa de dilogo ser exibida; no entanto, se o objeto for inserido na visualizao de cdigo, o editor de tags ser exibido. No caso de alguns objetos, sua insero na visualizao do projeto far com que o Dreamweaver alterne para a visualizao do cdigo antes de inserir o objeto. Para ignorar a caixa de dilogo de insero de objetos e inserir um objeto alocador de espao vazio: Pressione Control (no Windows) ou Option (no Macintosh) e clique no boto correspondente ao objeto. Por exemplo, para inserir um alocador de espao de uma imagem sem especificar um arquivo de imagem, pressione Control ou Option, e clique no boto Image. Esse procedimento no ignora todas as caixas de dilogo de insero de objeto. Muitos objetos, inclusive as barras de navegao, camadas, botes Flash e conjuntos de quadros (framesets), no inserem alocadores de espao ou objetos com valor padro.
Para modificar as preferncias da barra Insert:

1.
Nota
Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh). A caixa de dilogo Preferences exibe a categoria de preferncias General (Geral).
2. Desmarque Show Dialog When Inserting Objects (Mostrar a caixa de dilogo quando inserir
objetos) para suprimir caixas de dilogo quando inserir objetos, como imagens, tabelas, scripts e elementos head, ou pressione a tecla Control (Windows) ou Option (Macintosh) durante a criao do objeto.
Quando o objeto inserido com essa opo desativada, so conferidos valores de atributos padro ao objeto. Utilize o Property inspector para alterar as propriedades do objeto aps a insero.
Nota
3. Clique em OK.
13
Personalizar e usar a categoria Favorites (Favoritos) da barra Insert

A categoria Favorites da barra Insert permite agrupar e organizar os botes mais utilizados nessa barra. Voc pode adicionar, gerenciar e excluir botes da categoria Favorites.
Para adicionar, excluir ou gerenciar itens na categoria Favorites: 1. 2. Selecione qualquer categoria na barra Insert. Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada (no Macintosh) na rea em que os botes aparecem (no clique com o boto direito no nome da categoria); em seguida, selecione Customize Objects (Personalizar objetos). Ser exibida a caixa de dilogo Customize Favorite Objects (Personalizar objetos favoritos).
3.
Faa as alteraes necessrias. Para obter mais informaes, clique no boto Help da caixa de dilogo. 4. Clique em OK. A categoria Favorites mostrar as alteraes efetuadas.
Dica
Se voc no estiver nessa categoria, selecione-a para ver as alteraes.
Para inserir objetos utilizando botes da categoria Favorites:
No lado esquerdo da barra Insert, selecione a categoria Favorites e, em seguida, clique no boto de qualquer objeto da categoria Favorites que tenha sido adicionado.
Nota
A categoria Favorites no conter boto algum at que voc a personalize para adicionar objetos.
Utilizar o Property inspector

O Property inspector permite examinar e editar as propriedades mais comuns do elemento da pgina que estiver selecionado, como um texto ou objeto inserido. O contedo do Property inspector varia de acordo com o elemento selecionado.
14
Para mostrar ou ocultar o Property inspector:
Selecione Window > Properties (Propriedades).
Para expandir ou reduzir o Property inspector:
Clique na seta de expanso no canto inferior direito do Property inspector.
Para exibir as propriedades de um elemento de pgina:
Na janela do documento, selecione o elemento de pgina.
Nota
Talvez seja necessrio expandir o Property inspector para exibir todas as propriedades do elemento selecionado.
Para alterar as propriedades de um elemento de pgina: 1. Selecione o elemento de pgina na janela do documento.
2. Altere as propriedades no Property inspector.
Nota
3.
Para obter informaes sobre propriedades especficas, selecione um elemento na janela do documento e, em seguida, clique no cone Help no canto superior direito do Property inspector.
Em sua maioria, as alteraes que voc fizer nas propriedades sero imediatamente aplicadas janela do documento. Se as alteraes no forem aplicadas imediatamente, siga um destes procedimentos: Clique fora dos campos de texto de edio de propriedades. Pressione a tecla Enter (no Windows) ou Return (no Macintosh). Pressione a tecla Tab para alternar para outra propriedade.
Utilizar menus contextuais

O Dreamweaver utiliza amplamente os menus contextuais, que oferecem acesso conveniente aos comandos mais teis e s propriedades relacionadas ao objeto ou janela com a qual voc est trabalhando. Os menus contextuais apresentam apenas os comandos pertinentes seleo atual. Para utilizar um menu contextual: 1. Clique com o boto direito do mouse (no Windows) ou pressione Ctrl e clique (no Macintosh) no objeto ou na janela. Ser exibido o menu contextual correspondente ao objeto ou janela selecionada.
15
2. Selecione um comando no menu contextual.
Utilizar painis e grupos de painis

No Dreamweaver, os painis so reunidos em grupos de painis. O painel selecionado em um grupo de painis aparece como uma guia. Cada grupo pode ser expandido ou minimizado e encaixado ou separado de outros grupos de painis. Os grupos de painis tambm podem ser encaixados na janela integrada do aplicativo (apenas no Windows). Esse recurso facilita o acesso aos painis necessrios sem desorganizar a rea de trabalho.
Quando um grupo de painis flutuante (separado), exibida uma barra vazia estreita na parte superior do grupo de painis. Nesta documentao, o termo barra de ttulo do grupo de painis se refere rea na qual o nome do grupo de painis mostrado, e no barra vazia estreita.
Exibir painis e grupos de painis

Na rea de trabalho, voc pode exibir ou ocultar painis ou grupos de painis conforme necessrio. Para expandir ou minimizar um grupo de painis, siga um destes procedimentos: Clique na seta de expanso no lado esquerdo da barra de ttulo do grupo de painis. Clique no ttulo do grupo de painis.
Para fechar um grupo de painis de modo que ele no seja visvel na tela
Nota
No menu Options (Opes) da barra de ttulo do grupo de painis, selecione Close Panel Group (Fechar o grupo de painis). O grupo de painis desaparecer da tela.
16
Para abrir um painel ou um grupo de painis que no esteja visvel na tela: Selecione o menu Window e, em seguida, selecione um nome de painel no menu. Uma marca de seleo ao lado de um item, no menu Window, indica que ele est aberto (embora possa estar oculto atrs de outras janelas).
Se voc no conseguir localizar um painel, inspetor ou janela marcado como aberto, selecione Window > Arrange Panels (Organizar painis) para posicionar adequadamente todos os painis abertos.
Para selecionar um painel dentro de um grupo expandido de painis:
Dicas

Clique no nome do painel.
Para ver o menu Options de um grupo de painis, caso ele no esteja sendo exibido:
Para expandir o grupo de painis, clique em seu nome ou na seta de expanso. O menu Options ficar visvel quando o grupo de painis for expandido.
Algumas opes esto disponveis no menu contextual do grupo de painis mesmo quando o grupo est reduzido. Clique com o boto direito do mouse (no Windows) ou pressione Control e clique (no Macintosh) na barra de ttulo do grupo de painis para exibir o menu contextual
Encaixar e desencaixar painis e grupos de painis

Voc pode mover painis e grupos de painis como necessrio, e pode organiz-los para que flutuem ou sejam encaixados na rea de trabalho. A maioria dos painis pode ser encaixada apenas esquerda ou direita da janela do documento na rea de trabalho integrada, enquanto os outros, como o Property inspector e a barra Insert, podem ser encaixados somente nas partes superior e inferior da janela integrada. Para separar um grupo de painis: Arraste o grupo de painis utilizando a pina (no lado esquerdo da barra de ttulo do grupo de painis) at que o contorno indique que ele no est mais encaixado.
Para encaixar um grupo de painis em outros grupos de painis (rea flutuante de trabalho) ou na janela integrada, apenas no Windows: Arraste o grupo de painis utilizando a pina, at que o seu contorno indique que ele no est mais acoplado.
Dicas
17
Painel Arquivos Files.
Para desanexar um painel de um grupo de painis: No menu Options da barra de ttulo do grupo de painis, selecione Group With (Agrupar a) > New Panel Group (Novo grupo de painis). O nome do comando Group With alterado de acordo com o nome do painel ativo. O painel ser exibido em um novo grupo de painis individual.
Para encaixar um painel em um grupo de painis: Selecione o nome de um grupo de painis no submenu Group With do menu Options do grupo de painis. O nome do comando Group With alterado de acordo com o nome do painel ativo.
Para arrastar um grupo de painis flutuantes (separados) sem encaix-lo: Arraste o grupo de painis pela barra situada acima da barra de ttulo. O grupo de painis no ser encaixado caso no seja arrastado pela respectiva pina.
Redimensionar e renomear grupos de painis

Voc pode alterar o tamanho e o nome dos grupos de painis de acordo com as suas necessidades. Para alterar o tamanho dos grupos de painis: No caso de painis flutuantes, arraste o conjunto de grupos de painis utilizando o mesmo procedimento para redimensionar qualquer janela no seu sistema operacional. Por exemplo, voc pode arrastar a rea de redimensionamento no canto inferior direito do conjunto de grupos de painis. No caso de painis encaixados, arraste a barra de diviso entre os painis e a janela do documento.
Para maximizar um grupo de painis, siga um destes procedimentos: No menu Options, na barra de ttulo do grupo de painis, escolha Maximize Panel Group (Maximizar o grupo de painis). Clique duas vezes em qualquer parte da barra de ttulo do grupo de painis. O grupo de painis ser verticalmente expandido de modo a preencher todo o espao vertical disponvel.
18
Para renomear um grupo de painis: 1. No menu Options da barra de ttulo do grupo de painis, selecione Rename Panel Group (Renomear grupo de painis). Digite um novo nome e, em seguida, clique em OK
2.
Salvar grupos de painis

O Dreamweaver permite que voc salve e restaure diferentes grupos de painis, para que possa personalizar sua rea de trabalho em relao a diferentes atividades. Quando voc salva um layout de rea de trabalho, o Dreamweaver memoriza os painis no layout especificado, bem como outros atributos como as posies e os tamanhos dos painis, seu estado expandido ou minimizado, a posio e o tamanho da janela do aplicativo, e a posio e o tamanho da janela do documento.
Definir as preferncias de painis

Voc pode definir preferncias para especificar quais painis e inspetores sempre aparecero em primeiro plano na janela do documento e quais sero ocultos por essa janela.
Definir as preferncias de painis

Voc pode definir preferncias para especificar quais painis e inspetores sempre aparecero em primeiro plano na janela do documento e quais sero ocultos por essa janela. Para definir preferncias de painis:
1.
Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh). A caixa de dilogo Preferences ser exibida. Selecione Panels na lista Category esquerda. Selecione opes. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. 4. Clique em OK.
2. 3.
19
Captulo 2 - Configurar um site do Dreamweaver

Um site da Web um conjunto de documentos vinculados com atributos compartilhados, como tpicos relacionados, um projeto semelhante ou uma finalidade compartilhada. O Adobe Dreamweaver CS5 uma ferramenta de criao e gerenciamento de sites que voc pode utilizar para criar sites da Web completos, alm de documentos. A primeira etapa da criao de um site da Web o planejamento. Para obter os melhores resultados, projete e planeje a estrutura do site da Web antes de criar as pginas contidas nele. A prxima etapa configurar o Dreamweaver para que voc possa trabalhar na estrutura bsica do site. Se voc j tiver um site em um servidor da Web, poder utilizar o Dreamweaver para edit-lo.
Sobre sites do Dreamweaver

Um site do Dreamweaver fornece uma maneira de organizar todos os documentos associados a um site da Web. A organizao dos arquivos em um site permite utilizar o Dreamweaver para efetuar o upload do site no servidor da Web, controlar e manter automaticamente os links e gerenciar e compartilhar os arquivos. Para aproveitar todas as vantagens dos recursos do Dreamweaver, defina um site. Um site do Dreamweaver consiste em at trs partes, ou pastas, dependendo do ambiente de desenvolvimento e do tipo de site da Web a ser criado: A pasta local - o diretrio de trabalho. O Dreamweaver refere-se a essa pasta como site local. Essa pasta pode estar no computador local ou em um servidor da rede. Esse o local onde voc armazena os arquivos de um site do Dreamweaver nos quais est trabalhando. Para definir um site do Dreamweaver, basta configurar a pasta local. Para transferir arquivos para um servidor da Web ou desenvolver aplicativos para a Web, voc tambm precisa adicionar informaes relativas a um site remoto e um servidor de teste. A pasta remota - onde so armazenados os arquivos, dependendo do ambiente de desenvolvimento: teste, produo, colaborao e assim por diante. O Dreamweaver refere-se a essa pasta como site remoto no painel Files (Arquivos). Normalmente, a pasta remota est situada no computador onde estiver em execuo o servidor da Web. As pastas local e remota permitem transferir arquivos entre o disco local e o servidor da Web, o que facilita o gerenciamento de arquivos dos sites do Dreamweaver. A pasta de servidor de teste - a pasta onde o Dreamweaver processa pginas dinmicas.
Estrutura das pastas local e remota

Quando configurar o acesso pasta remota para o site do Dreamweaver determine o diretrio do host dessa pasta. O diretrio do host especificado dever corresponder pasta raiz da pasta local. O diagrama a seguir mostra um exemplo de pasta local, esquerda, e um exemplo de pasta remota, direita.
20
Se a estrutura da pasta remota no coincidir com a da pasta local, o Dreamweaver efetuar o upload dos arquivos para o local incorreto e eles no estaro visveis para os visitantes do site. Os caminhos para as imagens e os links tambm sero rompidos. necessrio que o diretrio raiz remoto exista para que o Dreamweaver possa se conectar a ele. Se no houver um diretrio raiz para a pasta remota, solicite ao administrador do servidor que crie um ou crie-o voc mesmo. Mesmo se pretender editar apenas uma parte do site remoto, duplique localmente toda a estrutura da ramificao do site remoto, desde a raiz do mesmo at os arquivos a serem editados. Por exemplo: se a pasta raiz do site remoto (denominada public_html) contiver duas pastas (Projeto1 e Projeto2) e voc desejar trabalhar apenas com os arquivos HTML no Projeto1, no haver necessidade de efetuar o download dos arquivos do Projeto2, porm ser necessrio mapear a pasta raiz local para public_html, em vez de Projeto1.
21
Configurar um novo site do Dreamweaver

Depois de planejar a estrutura do site, ou se j houver um site, defina um novo site no Dreamweaver antes de iniciar o desenvolvimento. A configurao de um site do Dreamweaver uma maneira de organizar todos os documentos associados a um site da Web. Aps configurar um site do Dreamweaver, recomendvel exportar o site para que voc tenha uma cpia de backup local. A configurao de um site no Dreamweaver um recurso importantssimo para quem quer fazer projetos mdios e grandes no Dreamweaver. Com um site corretamente ajustado, fica muito mais fcil inserir imagens, textos e realizar verificaes de links quebrados e pginas rfs. Confira a seguir um roteiro detalhado de configurao de site, no modo avanado do Dreamweaver CS5. LOCAL INFO
Ao clicar no menu Site >> New Site, ativamos o recurso de configurao. Na aba Advanced, a primeira categoria a Local Info. Como o nome a indica abriga as informaes locais, ou seja, do disco rgido em que o site desenvolvido e atualizado. Aqui, voc deve inserir o nome de identificao do site e a pasta local em que os arquivos esto. Note que h uma caixa especfica para as imagens. Uma boa dica prtica de webdesign deixar as imagens numa pasta separada. Isso facilita futuras modificaes no site e deixa a estrutura mais organizada. Na caixa HTTP Address voc informa a URL do site, se tiver uma.
REMOTE INFO
A categoria Remote Info guarda as informaes de conexo com o site remoto, ou seja, o servidor em que os arquivos sero hospedados. A caixa Access, nica da categoria Remote Info, possui seis opes de acesso remoto. None, FTP, Local/Network, WebDav, RDS, e Microsoft Visual Source Safe.
22
Na maioria dos casos, as trs primeiras opes so suficientes. Se voc no tem acesso a nenhum servidor Web, simplesmente escolha None.
Remote Info: em alguns casos necessrio incluir login e senha
Se tem um servidor web rodando no PC em que o site est, ou em outro micro da rede, escolha Local/Network e, na caixa remote Folder, navegue at a pasta em que os arquivos sero hospedados. Se aps completar o site voc vai transferir o contedo para um provedor de internet, escolha a opo FTP e preencha os campos com dados de login e senha fornecida pelo provedor. O Dreamweaver possui um cliente de FTP embutido para transferncia de arquivos, dispensando o uso de clientes FTP externa. TESTING SERVER
A categoria Testing Server apresenta opes de tecnologias dinmicos suportadas pelo Dreamweaver, entre elas ASP, PHP e Coldfusion. Aqui, voc deve escolher a opo de linguagem em que seu site est sendo desenvolvido. Se suas pginas so estticas, ou seja, contm apenas cdigo HTML simples voc pode passar direto por essa categoria. Veja toda a estrutura da figura da prxima pgina.
23
Adobe Dreamweaver CS5 Testing Web Design (Desenvolvedor Web) Server: Definio da tecnologia dinmica
utilizada.
CLOAKING
Diretrios remotos com muitos arquivos costumam demorar para serem exibidos, devidos demora em carregar toda a lista de documentos. Para evitar esse problema, o Dreamweaver oferece o recurso de cloaking.
Cloaking: Recurso til em sites com muitas imagens e pastas.
Ele permite esconder arquivos que esto em um diretrio, mas no precisam ser exibidos durante a manuteno do site. Assim, o servidor FTP mostra apenas os documentos desejados, o que acelera a atualizao do site. Em sites com muitas imagens, por exemplo, convm esconder arquivos de extenso
24
JPEG, deixando apenas os documentos HTML que sero atualizados. Para esconder arquivos com vase na extenso, clique na caixa Cloak file ending with e insira e extenso desejada. DESIGN NOTES
Esta categoria gerencia as notas de design do Dreamweaver. As notas de design funcionam como um post-it, fornecendo informaes adicionais sobre as pginas criadas. Por meio das notas de design, vrias pessoas que trabalham no mesmo arquivo podem ficar a par das atualizaes feitas por seus companheiros de projeto. O recurso Design Notes bastante til em sites desenvolvidos coletivamente. Mas se voc trabalha sozinho, pode desabilitar.
Design Notes: Ferramentas para desenvolvimento colaborativos
SITE MAP LAYOUT
Aqui voc pode ajustar alguns aspectos do mapa de site gerado pelo Dreamweaver. O mapa um recurso til em sites de grande porte, pois mostra visualmente as relaes de hierarquia entre os arquivos. Esta categoria permite configurar largura e informaes exibidas no mapa.
FILE VIEW COLUMNS
Esta opo uma das menos importantes na configurao do site. Ela permite ajustar quais colunas so exibidas quando o site visto no modo de mapa expandido. Neste modo, o Dreamweaver divide a tela em duas reas: uma para os arquivos locais e outra para os remotos. Em cada uma das reas h colunas que informam tamanho, tipo, data de modificao e outros atributos dos documentos. A opo File view columns permite trocar a ordem ou esconder essas colunas.
25
CONTRIBUTE
Esta categoria ativa a compatibilidade do site configurado com o Contribute, aplicativo de gerenciamento de sites da Adobe.
Portanto, til apenas para aqueles utilizam este programa. Quando acionado, o recurso permite utilizar o controle de eventos do Contribute, que auxilia no gerenciamento do site.
Capitulo 3 - Criar e abrir documentos

O Adobe Dreamweaver CS5 oferece um ambiente flexvel para trabalhar com vrios documentos de desenvolvimento e criao na Web. Alm de documentos HTML, voc pode criar e abrir diversos documentos baseados em texto, inclusive CFML, ASP, JavaScript e CSS. O Dreamweaver tambm oferece suporte a arquivos de cdigo-fonte, como Visual Basic. NET, C# e Java. O Dreamweaver fornece vrias opes para a criao de um novo documento. Voc pode criar qualquer um dos seguintes documentos: Um novo modelo ou documento em branco Um documento baseado em um dos layouts de pgina predefinidos includos no Dreamweaver Um documento baseado em um dos seus modelos
Outras opes de documentos tambm esto disponveis. Por exemplo, se voc geralmente trabalha com um tipo de documento, poder defini-lo como o tipo de documento padro para as novas pginas que criar. No Dreamweaver, possvel definir com facilidade as propriedades de um documento, tais
26
como tags meta, ttulo de documentos e cores de fundo, alm de vrias outras propriedades de pgina na visualizao do projeto ou na visualizao do cdigo. Este captulo contm as seguintes sees:
Criar novos documentos

O Dreamweaver fornece vrias opes de seleo de um novo documento de trabalho. possvel criar um novo documento das seguintes maneiras: Comear com um documento em branco Criar um documento ou um modelo em branco com base em um arquivo de projeto do Dreamweaver Utilizar um modelo que defina a aparncia de um documento e determine quais partes de um documento podero ser editadas Se, geralmente, voc trabalha com um tipo de documento especfico, poder definir um documento padro e automaticamente abrir um novo documento com base no documento padro por ele definido
Dicas
4.
Criar um novo documento em branco

Voc pode selecionar o tipo de documento em branco a ser criado. Para criar um novo documento em branco: 1. Selecione File (Arquivo) > New (Novo). A caixa de dilogo New Document (Novo documento) exibida. A guia General (Geral) j est selecionada. 2. Na lista Category (Categoria), selecione Basic Page (Pgina bsica), Dynamic Page (Pgina dinmica), Template Page (Pgina de modelo), Other (Outros) ou Framesets (Conjuntos de quadros). Em seguida, na lista direita, selecione o tipo de documento a ser criado. Por exemplo, selecione Basic Page para criar um documento HTML, ou Dynamic Page para criar um documento ColdFusion ou ASP e assim por diante. Para obter mais informaes sobre as opes dessa caixa de dilogo, clique no boto Help (Ajuda) na caixa de dilogo . 3. Clique no boto Create (Criar). O novo documento aberto na janela do documento. Salve o documento
Criar um documento com base em um arquivo de projeto do Dreamweaver

O Dreamweaver vem com diversos arquivos de elementos de design e de layout de pgina com aparncia profissional. possvel utilizar esses arquivos de projeto como pontos de partida para criar pginas do seu prprio site. Quando voc cria um documento com base em um arquivo de projeto, o Dreamweaver gera uma cpia do arquivo. Se voc criar um documento com base em um conjunto de quadros predefinido, apenas a estrutura do conjunto de quadros ser copiada, e no o contedo do quadro. Alm disso, ser necessrio salvar cada arquivo de quadro separadamente.
Nota
27
Para criar um novo documento a partir de um arquivo de projeto do Dreamweaver: 1. Selecione File (Arquivo)> New (Novo). 2. A caixa de dilogo New Document (Novo documento) exibida. A guia General (Geral) j est selecionada. Na lista Category (Categoria), selecione CSS Style Sheets (Folhas de estilo CSS), Table Based Layouts (Layouts baseados em tabelas), Page Designs (CSS) (Projetos de pgina [CSS]) Page Designs (Projetos de pgina) ou Page Designs (Accessible) (Projetos de pginas [acessveis]). Em seguida, selecione um arquivo de projeto na lista direita. Voc pode visualizar um arquivo de projeto e ler uma breve descrio dos elementos de projeto de um documento. Para obter mais informaes sobre as opes dessa caixa de dilogo, clique no boto Help (Ajuda) na caixa de dilogo.
3. Clique no boto Create (Criar). O novo documento aberto na janela do documento. Se voc tiver selecionado uma folha de estilos CSS, o documento CSS aparecer na janela do documento e a folha de estilos CSS ser aberta na visualizao do cdigo. 4. Salve o documento - Se o arquivo contiver links para os arquivos de propriedades, a caixa de dilogo Copy Dependent Files (Copiar os arquivos dependentes) ser aberta para voc salvar uma cpia dos arquivos dependentes. 5. Se a caixa de dilogo Copy Dependent Files aparecer, defina as opes e, em seguida, clique em Copy (Copiar) para copiar as propriedades na pasta selecionada. Voc pode escolher sua prpria localizao para os arquivos dependentes ou utilizar a localizao da pasta padro gerada pelo Dreamweaver (com base no nome de origem do arquivo de projeto).
Criar um documento a partir de um modelo existente

Voc pode selecionar, visualizar e criar um novo documento a partir de um modelo existente. possvel utilizar a caixa de dilogo New Document (Novo documento) para selecionar um modelo de qualquer um dos seus sites definidos pelo Dreamweaver ou utilizar o painel Assets (Propriedades) para criar um novo documento a partir de um modelo. Se o seu site no contiver modelos, voc poder salvar um documento em uma das categorias do arquivo de projetos da caixa de dilogo New Document. Em seguida, crie pginas baseadas nesse modelo.
Para criar um novo documento a partir de um modelo: 1. Selecione File (Arquivo)> New (Novo). A caixa de dilogo New Document exibida. 2. Clique na guia Templates (Modelos). 3. Na lista Templates For (Modelos para), selecione o site do Dreamweaver que contm o modelo a ser utilizado e, em seguida, selecione um modelo na lista direita. Para obter mais informaes sobre as opes dessa caixa de dilogo, clique no boto Help (Ajuda) na caixa de dilogo. 4. Clique em Create (Criar). O novo documento aberto na janela do documento.
Dica
28
5. Salve o documento
Para criar um novo documento de um modelo no painel Assets:
1. Abra o painel Assets, em Window (Janela) > Assets, se ele ainda no estiver aberto. 2. No painel Assets, clique no cone Templates esquerda para exibir a lista de modelos no seu site atual.
Dica
Se voc acabou de criar o modelo que deseja aplicar, talvez seja preciso clicar no boto Refresh (Atualizar) para visualiz-lo.
3. Clique com o boto direito do mouse (no Windows) selecione New From Template (Novo a partir de modelo). O documento aberto na janela do documento.
Salvar um novo documento

Quando voc cria um novo documento, preciso salv-lo. Para salvar um novo documento: 1. 2. Selecione File (Arquivo) > Save (Salvar). Na caixa de dilogo exibida, navegue at a pasta onde deseja salvar o arquivo.
Dica
aconselhvel salvar seu arquivo em um site do Dreamweaver
3. Na caixa de texto File Name (Nome do arquivo), digite um nome para o arquivo. Evite utilizar espaos e caracteres especiais em nomes de arquivos e de pastas e no inicie um nome de arquivo com um nmero. Particularmente, no utilize caracteres especiais (como , ou ) ou pontuao (como dois pontos, barras inclinadas ou pontos) nos nomes dos arquivos que sero colocados em um servidor remoto. Muitos servidores alteram esses caracteres durante o upload, o que causa o rompimento dos links para os arquivos. 4. Clique em Save (Salvar).
Definir um novo tipo de documento padro

Voc pode definir o tipo de documento que o Dreamweaver utiliza como o documento padro de um site. Por exemplo, se a maioria das pginas de um site tiver um tipo de arquivo especfico (como documentos ColdFusion, HTML ou ASP), voc poder definir as preferncias de documento que criam automaticamente novos documentos do tipo de arquivo especificado.
29
Para definir um novo tipo de documento padro e suas preferncias: 1. Selecione Edit > Preferences 2. A caixa de dilogo Preferences (Preferncias) ser exibida.
3. Clique em New Document na lista de categorias esquerda.
4. Defina ou altere as preferncias como necessrio. Para obter mais informaes sobre as opes dessa caixa de dilogo, clique no boto Help (Ajuda). 5. Clique em OK. O Dreamweaver salva as preferncias.
30
Definir a extenso de arquivo padro de novos documentos HTML

possvel definir a extenso de arquivo padro de documentos HTML criados no Dreamweaver. Por exemplo, possvel indicar que o Dreamweaver utilize uma extenso .htm ou .html para todos os novos documentos HTML
Para definir a extenso de arquivo padro de novos documentos HTML:
1. Selecione Edit > Preferences (Windows). A caixa de dilogo Preferences (Preferncias) ser exibida. Voc tambm pode clicar no boto Preferences na caixa de dilogo New Document (Novo documento) para definir as preferncias quando criar um novo documento
Dica 1.
2. Clique em New Document na lista de categorias esquerda. 3. Em Default Document Type (Tipo de documento padro), selecione a opo HTML. 4. Na caixa de texto Default Extension (Extenso padro), especifique a extenso de arquivo que deseja para os novos documentos HTML criados no Dreamweaver. Para Windows, possvel especificar as seguintes extenses: .html, .htm, .shtml, .shtm, .stm, .tpl, .lasso, .xhtml. Para Macintosh, possvel especificar as seguintes extenses: .html, .htm, .shtml, .shtm, .tpl, .lasso, .xhtml, .ssi.
Abrir documentos existentes

No Dreamweaver, voc pode abrir uma pgina da Web existente ou um documento baseado em texto, mesmo que ele no tenha sido criado no Dreamweaver. possvel abrir o documento e utilizar o Dreamweaver para edit-lo na visualizao do projeto ou do cdigo. Se o documento aberto for um arquivo do Microsoft Word salvo como HTML, voc poder utilizar o comando Cleanup Word HTML (Limpar o HTML do Word) para remover as tags de markup irrelevantes que o Word insere em arquivos HTML. Tambm possvel abrir arquivos de texto diferentes de HTML, tais como arquivos JavaScript, arquivos XML, folhas de estilos CSS ou arquivos de texto salvos por processadores ou editores de texto. Para abrir um arquivo existente:
Selecione File (Arquivo) > Open (Abrir).
31
Dica
Tambm possvel utilizar o painel Files (Arquivos) para abrir arquivos.
2. Navegue e selecione o arquivo a ser aberto. Se ainda no tiver selecionado o arquivo, recomendvel organizar os arquivos que planeja abrir e editar em um site do Dreamweaver, e no em outro local.
Dica 3.
Clique em Open. O documento aberto na janela do documento. Por padro, documentos JavaScript, de texto e de Folhas de estilos CSS so abertos na visualizao do cdigo. possvel atualizar o documento enquanto se trabalha no Dreamweaver e, depois, salvar as alteraes feitas no arquivo.
Limpar arquivos HTML do Microsoft Word

No Dreamweaver, possvel abrir documentos salvos pelo Microsoft Word como arquivos HTML e, ento, utilizar o comando Clean Up Word HTML (Limpar o HTML do Word) para remover o cdigo HTML irrelevante gerado pelo Word. O comando Clean Up Word HTML est disponvel para documentos salvos como arquivos HTML no Word 97 ou em verses posteriores. O cdigo que o Dreamweaver remove utilizado pelo Word basicamente para formatar e exibir os documentos no Word, no sendo necessrio exibio do arquivo HTML. recomendvel guardar uma cpia de segurana do arquivo original do Word (.doc), porque talvez no seja possvel reabrir o documento HTML no Word aps a aplicao do recurso Clean Up Word HTML.
32
Para abrir e limpar um arquivo HTML do Microsoft Word: 1. No Microsoft Word, salve o documento como um arquivo HTML, se ainda no tiver feito isso.
Nota
No Windows, feche o arquivo no Word para evitar uma violao de compartilhamento.
2.
Abra o arquivo HTML no Dreamweaver. Para exibir o cdigo HTML gerado pelo Word, alterne para a visualizao do cdigo (View [ Exibir] > Code [Cdigo].
3.
Selecione Commands (Comandos) > Clean Up Word HTML (Limpar o HTML do Word). A caixa de dilogo Clean Up Word HTML exibida. Poder ocorrer um pequeno atraso enquanto o Dreamweaver tenta detectar a verso do Word utilizada para salvar o arquivo. Se o Dreamweaver no conseguir detect-la, selecione a verso correta no menu pop-up. Desmarque as opes da caixa de dilogo, se desejar. Para obter mais informaes sobre as opes dessa caixa de dilogo, clique no boto Help (Ajuda). Clique em OK. O Dreamweaver aplica as configuraes de limpeza ao documento HTML, e um registro das alteraes exibido (a menos que voc desmarque essa opo na caixa de dilogo).
4.
5.
Captulo 4 - Gerenciar arquivos

O Adobe Dreamweaver CS5 ajuda a organizar e gerenciar arquivos. O Dreamweaver inclui vrios recursos para gerenciar arquivos e transferir arquivos entre o seu computador e um servidor remoto. Quando os arquivos so transferidos entre os sites locais e remotos, o Dreamweaver mantm paralelas as estruturas de pastas e arquivos entre estes sites. Ao transferir arquivos entre os sites, o Dreamweaver automaticamente criar as pastas necessrias, se ainda no existirem em um dos sites. Voc tambm pode sincronizar os arquivos entre os sites locais e remotos. Quando apropriado, o Dreamweaver copia arquivos nas duas direes e remove os arquivos inteis. O Dreamweaver contm recursos para facilitar o trabalho de colaborao em sites da Web. possvel retirar e devolver os arquivos a um servidor remoto, de maneira que os outros membros de uma equipe da Web possam saber quem est trabalhando em um determinado arquivo. possvel adicionar Design Notes aos arquivos, para compartilhar informaes com os membros da equipe sobre o status e prioridade de um arquivo, e assim por diante. Tambm possvel utilizar o recurso Workflow Reports (Relatrios de fluxo de trabalho), para executar relatrios relativos ao site, exibir informaes sobre o status das retiradas e devolues de arquivos e procurar as Design Notes anexadas aos arquivos.
Sobre o gerenciamento de sites

O Dreamweaver inclui diversos recursos para gerenciar um site e transferir arquivos entre o seu computador e um servidor remoto. O Dreamweaver tambm contm recursos para facilitar o trabalho em equipe em um site da Web, como o Check In/Check Out (Devolver/ retirar) e as Design Notes.
33
Sobre o sistema de devolues e retiradas

Em um ambiente com vrios usurios, utilize o sistema de devolues e retiradas de arquivos dos servidores locais e remotas. A retirada de um arquivo equivale a declarar: Estou trabalhando com este arquivo no o toque!. Quando um arquivo for retirado, o Dreamweaver exibir, no painel Files (Arquivos), o nome da pessoa que o retirou, juntamente com uma marca de seleo vermelha (se um membro da equipe o tiver retirado) ou verde (se voc for essa pessoa) ao lado do cone do arquivo. A devoluo de um arquivo possibilitar aos outros membros da equipe retir-lo e edit-lo. Quando voc devolver um arquivo depois de edit-lo, a sua verso local se tornar somente leitura e aparecer um smbolo de cadeado ao lado dela no painel Files para evitar modificaes. No servidor remoto, o Dreamweaver no modifica o status dos arquivos retirados para somente leitura. Caso os arquivos sejam transferidos com um aplicativo diferente do Dreamweaver, voc poder sobrescrever os arquivos retirados. No entanto, em aplicativos diferentes do Dreamweaver, o arquivo LCK estar visvel ao lado do arquivo retirado na hierarquia de arquivos para evitar acidentes desse tipo.
Sobre as transferncias de arquivos em segundo plano

O Dreamweaver permite a execuo de outras atividades no relacionadas com o servidor enquanto voc est obtendo ou colocando arquivos. A transferncia de arquivos em segundo plano funciona para todos os protocolos de transferncia suportados pelo Dreamweaver: FTP, SFTP, LAN, WebDAV, Microsoft Visual SourceSafe e RDS. As atividades no relacionadas com o servidor incluem operaes comuns como digitao, edio de folhas de estilos%% externas, gerao de relatrios de todo o site e criao de novos sites. As atividades relacionadas com o servidor e que o Dreamweaver no pode executar durante as transferncias de arquivos incluem as seguintes: Obter/colocar/devolver/retirar arquivos. Desfazer a retirada. Criar uma conexo de banco de dados. Ligar dados dinmicos. Visualizar Live Data. Inserir um servio da Web. Excluir arquivos ou pastas remotas. Visualizar no navegador em um servidor de teste. Salvar um arquivo em um servidor remoto. Inserir uma imagem de um servidor remoto. Abrir um arquivo de servidor remoto. Colocar arquivos em salvamento automtico. Arrastar arquivos para o site remoto. Recortar, copiar ou colar arquivos no site remoto. Atualizar a visualizao remota.
Sobre o mascaramento de sites

O mascaramento de sites permite excluir pastas e tipos de arquivo de operaes como obteno e colocao. possvel mascarar pastas individuais, mas no arquivos individuais. Para mascarar arquivos, selecione um tipo de arquivo. O Dreamweaver ir mascarar todos os arquivos desse tipo. Alm disso, o Dreamweaver memorizar as definies de cada site, de modo que voc no tenha que fazer selees
34
sempre que trabalhar no site. Por exemplo, se estiver trabalhando em um site grande e no desejar efetuar o upload dirio dos arquivos de multimdia utilize o mascaramento do site para esconder a pasta de multimdia. O sistema excluir os arquivos dessa pasta das operaes que afetarem o site. possvel mascarar pastas e tipos de arquivos do site remoto ou local. O mascaramento exclui as pastas e os arquivos mascarados nas seguintes operaes: Executar as operaes Put (Colocar), Get (Obter), Check In (Devolver) e Check Out (Retirar) Gerao de relatrios Localizao de arquivos locais e remotos mais recentes Execuo de operaes no site inteiro, como a verificao e a alterao de links Sincronizao Trabalho com o contedo do painel Assets (Propriedades) Atualizao de modelos e bibliotecas
O Dreamweaver exclui modelos e itens de biblioteca mascarados apenas das operaes de obteno (Get) e colocao (Put), mas no das operaes em lote, pois isso pode fazer com que fiquem fora de sintonia com suas respectivas instncias.
Sobre o Design Notes

As Design Notes so notas que acompanham um arquivo. Elas esto associadas ao arquivo que descrevem, mas so armazenadas em outro arquivo. Voc pode ver quais arquivos apresentam Design Notes anexadas no painel Files (Arquivos) expandido: o cone Design Notes aparece na coluna Notes (Notas). Utilize as Design Notes para controlar as informaes adicionais relativas aos documentos, como nomes de arquivos de origem de imagens e comentrios sobre o status de arquivos. Por exemplo: se um documento for copiado de um site para outro, possvel adicionar Design Notes a esse documento, informando que seu original est na pasta do outro site. Voc tambm pode utilizar as Design Notes para controlar as informaes confidenciais que no pode colocar em um documento por motivos de segurana, como notas sobre como uma configurao ou preo especfico foi escolhido, ou quais os fatores de marketing que influenciaram uma deciso de projeto. Se voc abrir um arquivo no Adobe Fireworks ou no Adobe Flash e export-lo para outro formato, esses programas salvaro automaticamente o nome do arquivo de origem inicial em um arquivo de Design Notes. Por exemplo, se voc abrir o arquivo minha_casa.png no Fireworks e export-lo para minha_casa.gif, o Fireworks criar um arquivo de Design Notes denominado minha_casa.gif.mno com o nome do arquivo original, como uma URL de arquivo: absoluto. Assim, as Design Notes correspondentes ao arquivo minha_casa.gif podero conter a seguinte linha: fw_source="file:///Mydisk/sites/assets/orig/myhouse.png" Uma Design Note semelhante do Flash poderia conter a seguinte linha: fl_source=file:///Mydisk/sites/assets/orig/myhouse.fla
Nota
35
Sobre os arquivos dependentes

Quando voc transfere um documento entre uma pasta local e uma remota no painel Files (Arquivos), o Dreamweaver oferece a opo de transferir os arquivos dependentes do documento. Os arquivos dependentes so imagens, folhas de estilos externas e outros arquivos referenciados no seu documento e que o navegador carrega junto com o documento. O Dreamweaver tambm trata os itens de biblioteca como arquivos dependentes. Alguns servidores apresentaro erros na colocao de itens de biblioteca. Entretanto, possvel mascarar esses arquivos para impedir que sejam transferidos.
Acessar sites, um servidor e unidades locais

Voc pode acessar, modificar e salvar arquivos e pastas de sites do Dreamweaver, bem como arquivos e pastas que no fazem parte de um site do Dreamweaver. Alm dos sites do Dreamweaver, voc pode acessar um servidor, uma unidade local ou a rea de trabalho. Para abrir um site j existente do Dreamweaver: No painel Files (Arquivos), em Window (Janela) > Files, selecione um site no menu pop-up (em que o site atual, o servidor ou a unidade aparece).
Para abrir uma pasta em um servidor FTP ou RDS remoto: 1. No painel Files (Window > Files), selecione um nome de servidor no menu pop-up (em que aparece o site, o servidor ou a unidade atual).
Nota
Para compartilhar as Design Notes, os usurios devero definir o mesmo caminho para a raiz do site (por exemplo, sites/propriedades/orig).
36
2.
Navegue para os arquivos e edite-os normalmente.
Para acessar uma unidade local ou a sua rea de trabalho: 1. No painel Files (Window > Files), selecione Desktop (rea de trabalho), Local Disk (Disco local) ou CD Drive (Unidade de CD) no menu pop-up (em que o site atual, o servidor ou a unidade aparece).
Navegue para um arquivo e siga um destes procedimentos: Abra arquivos no Dreamweaver ou em outro aplicativo Renomeie arquivos Copie arquivos Exclua arquivos Arraste arquivos
Quando voc arrastar um arquivo de um site do Dreamweaver para outro ou para uma pasta que no esteja associada a um site do Dreamweaver, o Dreamweaver copiar o arquivo para o local em que for solto. Se voc arrastar um arquivo dentro do mesmo site do Dreamweaver, o Dreamweaver mover o arquivo para o local em que for solto. Se arrastar um arquivo que no esteja associado a um site do Dreamweaver para uma pasta que no faa parte de um site do Dreamweaver, o Dreamweaver mover o arquivo para o local em que for solto.
Para mover um arquivo que o Dreamweaver copia como padro, mantenha pressionada a tecla Shift enquanto arrasta o arquivo. Para copiar um arquivo que o Dreamweaver move como padro, mantenha pressionada a tecla Control enquanto arrasta o arquivo.
Configurar o Dreamweaver para trabalhar sem definir um site

O Dreamweaver permite estabelecer uma conexo com um servidor FTP ou RDS para trabalhar nos seus documentos sem criar um site do Dreamweaver.
Nota
Nota
Se voc trabalhar em arquivos sem criar um site do Dreamweaver, no poder executar operaes no site, como verificao de links.
37
Para configurar o Dreamweaver para trabalhar com um servidor na janela do documento: 1. 2. Selecione Site > Manage Sites (Gerenciar Sites). A caixa de dilogo Manage Sites exibida. Clique em New (Novo) e, em seguida, selecione FTP & RDS Servers (Servidores FTP e RDS). A caixa de dilogo Configure Server (Configurar servidor) exibida. Preencha a caixa de dilogo. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
3.
Nota 1.
Voc s precisar preencher essa caixa de dilogo uma vez para cada servidor ao qual deseja se conectar.
4. Clique em OK. O painel Files (Arquivos) exibe o contedo da pasta do servidor remoto ao
qual voc se conectou, e o nome do servidor aparece no menu pop-up na parte superior do painel.
Para configurar o Dreamweaver para trabalhar com um servidor utilizando o painel Files: No painel Files (Window > Files), selecione Desktop (rea de trabalho) no menu pop-up (em que aparece o site, o servidor ou a unidade atual).
2. Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada
(no Macintosh) no n FTP and RDS Servers, no painel Files. Em seguida, selecione Add FTP Server (Adicionar servidor FTP) ou Add RDS Server (Adicionar servidor RDS).
A caixa de dilogo Configure Server (Configurar servidor) exibida.
38
3. Preencha a caixa de dilogo. Para obter mais informaes, clique no boto Help (Ajuda) da
caixa de dilogo
Nota 4. Nota
Voc s precisar preencher essa caixa de dilogo uma vez para cada servidor ao qual deseja se conectar.
Clique em OK. O painel Files (Arquivos) exibe o contedo da pasta do servidor remoto ao qual voc se conectou, e o nome do servidor aparece no menu pop-up na parte superior do painel.
No caso de pastas grandes, pode levar alguns minutos para que o painel Files exiba a pasta.
Exibir arquivos e pastas

Voc pode exibir arquivos e pastas no painel Files (Arquivos), estejam eles associados a um site do Dreamweaver ou no. Quando voc exibir sites, arquivos ou pastas no painel Files, poder alterar o tamanho da rea de visualizao e, para os sites do Dreamweaver, poder expandir ou reduzir esse painel. Para sites do Dreamweaver, voc pode tambm personalizar o painel Files alterando a visualizao do site local ou remoto que aparece, por padro, no painel reduzido. Poder tambm alternar as visualizaes do contedo no painel Files expandido usando a opo Always Show (Mostrar sempre).
Para abrir ou fechar o painel Files:
Selecione Window (Janela) > Files. Para alterar o tamanho da rea de visualizao no painel Files expandido:
Em Window > Files, no painel Files expandido, siga um destes procedimentos: Arraste a barra divisria que separa as duas visualizaes para aumentar ou diminuir a rea de exibio do painel direito ou esquerdo. Utilize as barras de rolagem na parte inferior do painel Files para rolar pelo contedo das visualizaes. No mapa do site, arraste a seta acima de um arquivo para alterar o espao entre os arquivos.
Para expandir ou reduzir o painel Files (somente sites do Dreamweaver):
No painel Files (Window > Files), clique no boto Expand/Collapse (Expandir/Reduzir) na barra de ferramentas.
39
Quando o painel Files estiver reduzido, ele exibir o contedo dos sites local e remoto ou do servidor de teste como uma lista de arquivos. Quando expandido, ele exibir o site local, alm do site remoto ou do servidor de teste. O painel Files tambm pode exibir um mapa visual do site local.
Para alterar a visualizao do site no painel Files, siga um destes procedimentos (somente sites do Dreamweaver):
Nota
No painel Files reduzido (Window > Files), selecione Local View (Visualizao local), Remote View (Visualizao remota), Testing Server (Servidor de teste) ou Map View (Visualizao do mapa) no menu pop-up Site View (Visualizao do site).
Nota
Como padro, Local View aparecer nesse menu pop-up..
No painel Files expandido (Window > Files), clique no boto Site Files (Arquivos do site) do site remoto, Testing Server ou Site Map (Mapa do site) na barra de ferramentas.
Site Map (Mapa do site)
Testing Server (Servidor de teste) Site Files (Arquivos do site)
Ao clicar no boto Site Map, voc poder optar pela visualizao do mapa do site com ou sem os respectivos arquivos.
Personalizar detalhes de arquivos e pastas exibidos no painel Files (Arquivos) expandido.

Quando voc visualiza um site do Dreamweaver no painel Files expandido, o Dreamweaver exibe informaes sobre os arquivos e as pastas em colunas. Por exemplo, voc pode ver o tipo de arquivo ou a data em que um arquivo foi modificado. Pode personalizar as colunas seguindo qualquer destes procedimentos (algumas operaes esto disponveis apenas para as colunas adicionadas, e no as colunas padro):
40
Reordenar ou realinhar colunas Adicionar novas colunas (dez no mximo) Ocultar colunas (exceto a coluna do nome do arquivo) Designar colunas a serem compartilhadas com todos os usurios que estiverem conectados a um site Excluir colunas (somente colunas personalizadas) Renomear colunas (somente colunas personalizadas) Associar com uma Design Note (somente colunas personalizadas)
Para ordenar por qualquer coluna de detalhes do painel Files (Arquivos):
Clique no cabealho da coluna a ser ordenada.
Para adicionar, excluir ou alterar as colunas de detalhes: 1. Selecione Site > Manage Sites (Gerenciar Sites). A caixa de dilogo Manage Sites exibida. 2. Selecione um site e, em seguida, clique em Edit (Editar). A caixa de dilogo Site Definition (Definio do site) exibida. 3. Selecione File View Columns (Colunas de visualizao de arquivos) na lista de categorias esquerda. A caixa de dilogo Site Definition exibir as opes das colunas de visualizao de arquivos.
Nota
Clique no cabealho novamente para inverter a ordem (ascendente ou descendente) de acordo com a qual o Dreamweaver ordenar a coluna.
41
4. Preencha a caixa de dilogo. Para obter mais informaes, clique no boto Help (Ajuda) da
caixa de dilogo. 5. Clique em OK.
Captulo 5 Criar layouts de pgina.

Criar layouts de pginas com CSS. No Adobe Dreamweaver CS5, voc pode utilizar estilos CSS para definir o layout das pginas. Voc pode inserir tags div manualmente e aplicar os estilos de posicionamento CSS a elas, ou utilizar as camadas do Dreamweaver para criar um layout. No Dreamweaver, uma camada um elemento da pgina HTML especificamente uma tag div ou qualquer outra tag qual foi atribuda uma posio absoluta.
Nota Dicas Nota
O Dreamweaver trata como camadas todas as tags div com posio absoluta, mesmo que voc no tenha criado essas tags div utilizando a ferramenta de desenho Layer.
Voc pode utilizar um arquivo de projetos do Dreamweaver como um ponto de partida para o layout CSS. Na categoria Page Designs (CSS) (Projetos de pgina [CSS]) da caixa de dilogo New Document (Novo documento),
Independentemente da utilizao de CSS, tabelas ou quadros para definir o layout das pginas, o Dreamweaver contm rguas e grades para a orientao visual no layout. O Dreamweaver tambm contm um recurso de imagem de rastreamento, que voc pode utilizar para recriar um projeto de pgina criado em um aplicativo grfico. Se voc no estiver familiarizado com o uso de camadas e com as folhas de estilo em cascata (CSS), mas estiver familiarizado com o uso de tabelas, experimente utilizar tabelas ou o modo Layout para o layout da pgina
Sobre camadas no Dreamweaver

Uma camada um elemento da pgina HTML especificamente uma tag div ou qualquer outra tag qual foi atribuda uma posio absoluta. Elas podem conter texto, imagens ou qualquer outro contedo que possa ser inserido no corpo de um documento HTML.
Nota
As camadas, conforme descrito neste captulo referem-se ao conceito de layout do Dreamweaver, no tag layer.
42
Camadas
Com o Dreamweaver, voc pode utilizar camadas para definir o layout da pgina. Voc pode colocar as camadas na frente ou atrs de outras, ocult-las enquanto outras so exibidas e mov-las na tela. Coloque uma imagem de fundo em uma camada e, em seguida, uma segunda camada contendo texto com um fundo transparente na frente da primeira camada. As camadas oferecem bastante flexibilidade para inserir contedo. Contudo, os visitantes do site que tiverem navegadores da Web muito antigos poderiam ter problemas para visualizar as camadas. Para garantir que todos possam visualizar a sua pgina da Web, conceba o layout da pgina com camadas e, em seguida, converta-as em tabelas. Contudo, se for provvel que o seu pblico esteja utilizando um navegador recente, crie layouts apenas com as camadas, sem convert-las em tabelas.
Cdigo HTML das camadas

Quando se coloca uma camada em um documento, o Dreamweaver insere a tag HTML correspondente camada no cdigo. Como padro, o Dreamweaver cria as camadas utilizando a tag div. Existem duas outras tags que podem ser utilizadas na criao de camadas: layer e ilayer. Contudo, essas tags so aceitas apenas no Netscape Navigator 4; o Internet Explorer no oferece suporte a essas tags e o Netscape deixou de oferec-lo nas verses posteriores. O Dreamweaver reconhece as tags layer e ilayer, mas no cria camadas utilizando-as.
Quando voc desenha uma camada utilizando a ferramenta Draw Layer (Desenhar camada), o Dreamweaver insere uma tag div no documento e atribui camada um valor de identificao (por padro, Layer1 (Camada1) para a primeira camada desenhada, Layer2 (Camada2) para a segunda camada desenhada e assim por diante). Mais tarde, voc poder renomear a camada com o nome desejado utilizando o painel Layers (Camadas) ou o Property inspector (Inspetor de propriedades). O Dreamweaver tambm utiliza CSS incorporado na seo head do documento para posicionar a camada e determinar as dimenses exatas da camada. A seguir, apresentamos um exemplo de cdigo HTML para uma camada: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-88591" /> <title>Sample Layers Page</title> <style type="text/css"> <!-#Layer1 { position:absolute; left:62px; top:67px; width:421px; height:188px; z-index:1; } --> </style> </head> <body> <div id="Layer1"></div>
Nota
43
</body> </html> Voc pode definir as propriedades das camadas na pgina, inclusive as coordenadas x e y, o ndice z (ou ordem de empilhamento), alm da visibilidade.
Inserir uma camada

O Dreamweaver permite criar, com facilidade, camadas na pgina e posicion-las com preciso. Ele tambm permite criar camadas aninhadas.
Quando voc insere uma camada, o Dreamweaver exibe a borda da camada, por padro, e reala o bloco quando se passa o ponteiro sobre ele. Voc pode ativar bordas de camadas desativando as opes Layer Outlines (Contornos de camadas) e CSS Layout Outlines (Contornos de layout CSS) no menu View (Exibir) > Visual Aids (Auxlios visuais). Voc tambm pode ativar nveis e o modelo de caixa para as camadas como auxlios visuais enquanto est projetando. Depois de criar uma camada, para adicionar contedo a ela, coloque o ponto de insero na camada e adicione o contedo como faria em uma pgina. Para desenhar uma nica camada ou vrias camadas consecutivamente: 1. 2. Na categoria Layout da barra Insert, clique no boto Expanded Tables Mode (Modo de tabelas expandidas). Na visualizao do projeto da janela do documento, siga um destes procedimentos:
Nota
Voc pode utilizar um arquivo de projetos do Dreamweaver como um ponto de partida para o layout CSS. Na categoria Page Designs (CSS) da caixa de dilogo New Document,
Arraste para desenhar uma nica camada. Mantenha a tecla Control (no Windows) ou Command (no Macintosh) pressionada e arraste
para desenhar vrias camadas consecutivamente. Voc pode continuar a desenhar novas camadas, contanto que no solte a tecla Control ou Command. Para inserir uma camada em um local especfico do documento: Coloque o ponto de insero na janela do documento e selecione Insert> Layout Objects (Objetos de Layout) > Layer. Esse procedimento coloca a tag da camada onde voc clicou na janela do documento. Portanto, o processamento visual da camada pode afetar outros elementos da pgina (como texto) que a circundam.
Para colocar o ponto de insero em uma camada: Clique em qualquer ponto dentro das bordas da camada. As bordas da camada sero realadas e a ala de seleo aparecer, mas a camada no estar selecionada. Para exibir as bordas das camadas:
Nota
44
Selecione View> Visual Aids e, em seguida, selecione Layer Outlines ou CSS Layout Outlines.
Esse procedimento coloca a tag da camada onde voc clicou na janela do documento. Portanto, o processamento visual da camada pode afetar outros elementos da pgina (como texto) que a circundam.
Para ocultar bordas de camadas: Selecione View > Visual Aids e depois desmarque Layer Outlines e CSS Layout Outlines.
Camadas aninhadas
A camada aninhada aquela cujo cdigo est contido em outra camada. O aninhamento utilizado regularmente para agrupar as camadas. Uma camada aninhada se move com a sua camada-me e pode ser definida para herdar a visibilidade da me. Voc pode ativar a opo Nesting (Aninhamento) para aninhar automaticamente quando desenhar uma camada que comece dentro de outra camada.
Para desenhar uma camada aninhada: 1. 2. Na categoria Layout da barra Insert, clique no boto Expanded Tables Mode. Na visualizao do projeto na janela do documento, arraste para desenhar uma camada dentro de uma camada existente: Se a opo Nesting estiver desativada nas preferncias de camadas, mantenha pressionada a tecla Alt (no Windows) ou Option (no Macintosh) e arraste para aninhar uma camada dentro de outra j existente.
Nota Dica
Voc pode que as camadas aninhadas sejam exibidas de maneira diferente nos diversos navegadores. Ao criar camadas aninhadas, verifique com freqncia a sua aparncia em diversos navegadores durante o processo de criao.
Para inserir uma camada aninhada: Coloque o ponto de insero dentro de uma camada existente na visualizao do projeto na janela do documento e selecione Insert > Layer.
45
Para aninhar uma camada existente dentro de uma outra camada utilizando o painel Layers: 1. Selecione Window (Janela) > Layers para abrir o painel Layers. 2. Selecione uma camada no painel Layers, pressione a tecla Control (no Windows) ou Command (no Macintosh) e arraste-a at a camada de destino no painel Layers. 3. Solte o boto do mouse quando o nome da camada de destino for realado.
Para aninhar camadas automaticamente ao desenhar uma camada que comece dentro de outra: Selecione a opo Nesting (Aninhamento) nas preferncias de camadas.
Definir propriedades e preferncias de camadas

Voc pode especificar definies padro para camadas. Voc pode tambm exibir e definir vrios atributos de uma ou mais camadas utilizando o Property inspector.
Definir preferncias de camadas

Utilize a categoria Layers na caixa de dilogo Preferences (Preferncias) para especificar as definies padro das novas camadas criadas. Para exibir ou definir as preferncias de camadas: 1. Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh). A caixa de dilogo Preferences ser exibida. 2. Na lista Category (Categoria) esquerda, selecione Layers. 3. Faa as alteraes necessrias. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. 4. Clique em OK.
Exibir e definir propriedades de uma nica camada

Quando voc seleciona uma camada, o Property inspector exibe as propriedades dessa camada. Para exibir e definir propriedades de camadas: 1. Selecione uma camada 2. No Property inspector, em Window > Properties (Propriedades), clique na seta de expanso, no lado inferior direito, se ela ainda no estiver expandida, para ver todas as propriedades.
46
3. Altere os atributos da camada definindo as propriedades como necessrio. Para obter mais
informaes, clique no boto Help do Property inspector.
Exibir e definir as propriedades de diversas camadas

Quando voc selecionar duas ou mais camadas, o Property inspector das camadas exibir as propriedades de texto e um subconjunto de todas as propriedades das camadas, o que permite modificar vrias camadas simultaneamente. Para selecionar diversas camadas: Mantenha pressionada a tecla Shift enquanto seleciona as camadas Para exibir e definir propriedades para diversas camadas: 1. Selecione diversas camadas. 2. No Property inspector, em Window > Properties, clique na seta de expanso, no lado inferior direito, se ela ainda no estiver expandida, para ver todas as propriedades.
3.
Altere os atributos das camadas, definindo as propriedades. Para obter mais informaes, clique no boto Help do Property inspector.
Gerenciar camadas
Voc pode selecionar camadas para trabalhar com elas. Voc tambm pode alterar a ordem de empilhamento e a visibilidade das camadas. O painel Layers fornece uma maneira conveniente de gerenciar camadas.
Utilizar o painel Layers

O painel Layers um meio de gerenciar as camadas dos documentos. Utilize o painel Layers para evitar sobreposies, alterar a visibilidade das camadas, aninhar ou empilhar camadas e selecionar uma ou mais camadas. Para abrir o painel Layers: Selecione Window > Layers. As camadas so exibidas como uma lista de nomes organizada de acordo com o ndice z. Por padro, a primeira camada criada (com um ndice z igual a 1) mostrada na parte inferior da lista, enquanto que a camada criada mais recentemente (com um ndice z superior a 1) mostrada no alto da lista. No entanto, voc pode alterar o ndice z de uma camada para alterar seu lugar na ordem de empilhamento. Por exemplo, se voc tiver criado oito camadas e quiser que a quarta camada passe a ser a camada
47
superior da ordem de empilhamento, ser possvel atribuir-lhe um ndice z superior ao das demais camadas.
Selecionar camadas
Selecione uma ou mais camadas para manipul-las ou alterar as suas propriedades. Para selecionar uma camada no painel Layers: No painel Layers, em Window > Layers, clique no nome da camada. Para selecionar uma camada na janela do documento, siga um destes procedimentos: Clique na ala de seleo da camada. Se a ala de seleo no estiver visvel, clique em qualquer ponto dentro da camada para tornar a ala visvel. Clique na borda de uma camada. Mantenha pressionadas as teclas Control-Shift (no Windows) ou Command-Shift (no Macintosh) e clique dentro de uma camada. Clique dentro de uma camada e pressione Control+A (Windows) ou Command+A (Macintosh) para selecionar o contedo da camada. Pressione Control+A ou Command+A novamente para selecionar a camada.
Clique dentro de uma camada e selecione a tag no seletor de tags.

Para selecionar camadas mltiplas, siga um dos procedimentos abaixo: No painel Layers (Window > Layers), pressione a tecla Shift e clique em dois ou mais nomes de camadas. Na janela do documento, pressione a tecla Shift e clique dentro ou sobre a borda de duas ou mais camadas.
Alterar a visibilidade das camadas

Ao trabalhar em um documento, voc poder mostrar ou ocultar as camadas manualmente com o painel Layers, para examinar a aparncia da pgina em diversas condies.
Para alterar a visibilidade de uma camada: 1. Selecione Window > Layers para abrir o painel Layers. 2. Clique na coluna do cone representando um olho para alterar a sua visibilidade. Um olho aberto significa que a camada est visvel. Um olho fechado significa que a camada est invisvel.
Nota
A camada selecionada ficar sempre visvel e aparecer na frente das outras camadas enquanto estiver selecionada.
48
Se no houver um cone representando um olho, lembre-se de que a camada costuma herdar as definies de visibilidade da camada-me. Quando as camadas no estiverem aninhadas, a camada-me ser o corpo do documento, que est sempre visvel. O cone representando um olho estar ausente quando no for especificada uma visibilidade, que aparecer no Property inspector como visibilidade padro.
Para alterar a visibilidade de todas as camadas simultaneamente: No painel Layers (Window > Layers), clique no cone do olho do cabealho, na parte superior da coluna.
Converter camadas em tabelas

Em vez de utilizar tabelas ou o modo Layout para criar o layout, alguns designers da Web preferem trabalhar com camadas. O Dreamweaver permite criar o layout utilizando camadas e, se desejar, convert-las em tabelas. Por exemplo, talvez seja necessrio converter suas camadas em tabelas, se voc precisar de suporte a navegadores anteriores verso 4.0. As camadas no podem ser convertidas em tabelas ou vice-versa em um modelo de documento ou em um documento ao qual tiver sido aplicado um modelo. Em vez disso, crie o layout em um documento que no seja um modelo e converta-o antes de salv-lo como um modelo.
Voc pode ajustar o layout e otimizar o desenho da pgina movimentando-se entre as diversas camadas e tabelas. Voc no pode converter uma tabela ou uma camada especfica de uma pgina; necessrio converter camadas em tabelas e tabelas em camadas de uma pgina inteira.
Nota
Nota
Esse procedimento poder tornar todas as camadas visveis ou ocultas, mas estas no podero herdar a visibilidade da me.
Evitar sobreposies de camadas

Uma vez que as clulas de tabelas no podem se sobrepor, o Dreamweaver no poder criar uma tabela a partir de camadas sobrepostas. Se estiver planejando converter as camadas de um documento em tabelas, utilize a opo Prevent Overlap, que restringir o movimento e o posicionamento das camadas de maneira que no haja sobreposio.
Nota
A converso de camadas em tabelas poder resultar em tabelas com um grande nmero de clulas vazias.
49
Quando esta opo estiver ativada, uma camada no poder ser criada na frente de uma camada existente, nem movida, redimensionada ou aninhada dentro de uma camada existente. Caso ative esta opo aps criar camadas sobrepostas, arraste cada camada sobreposta para afast-la das outras camadas. O Dreamweaver no corrigir automaticamente as camadas sobrepostas na pgina quando a opo Prevent Layer Overlaps estiver ativada. Quando essa opo e o encaixe estiverem ativados, a camada no se encaixar na grade se isso acarretar a sobreposio de duas camadas. Em vez disso, ela se encaixar na margem da camada mais prxima.
NOTA Certas aes permitem que as camadas se sobreponham, mesmo quando a opo Prevent Overlaps est ativada. Se voc inserir uma camada utilizando o menu Inserir, digitar nmeros no Property inspector ou reposicionar as camadas editando o cdigo-fonte HTML, poder provocar a sobreposio ou o aninhamento de camadas enquanto essa opo estiver ativada. Se as sobreposies ocorrerem, arraste as camadas sobrepostas at a visualizao do projeto, a fim de separ-las.
Para evitar as sobreposies de camadas, siga um dos procedimentos abaixo: No painel Layers, em Window > Layers, selecione a opo Prevent Overlaps. Na janela do documento, selecione Modify > Arrange > Prevent Layer Overlaps.
Converter entre camadas e tabelas

Voc pode criar o layout utilizando camadas e, em seguida, convert-las em tabelas, para que o layout possa ser visualizado nos navegadores mais antigos Para converter camadas em uma tabela: 1. 2. 3. Selecione Modify > Convert (Converter) > Layers to Table (Camadas em tabela). A caixa de dilogo . Convert Layers to Tables exibida. Selecione as opes desejadas. Para obter mais informaes, clique no boto Help da caixa de dilogo. 3. Clique em OK. As camadas sero convertidas em uma tabela.
Para converter tabelas em camadas: 1. Selecione Modify > Convert > Tables to Layers (Tabelas em camadas). A caixa de dilogo Convert Tables to Layers (Converter tabelas em camadas) aparece. 2. Selecione as opes desejadas. Para obter mais informaes, clique no boto Help da caixa de dilogo. 3. Clique em OK. As tabelas sero convertidas em camadas. As clulas vazias no sero convertidas em camadas, a no ser que elas tenham cores de fundo.
Nota
Nota
Esta uma nova tabela Note (Nota). Encontra-se anexada a uma tag de pargrafo Table_anchor. Para criar uma, copie e cole da pgina de referncia.
Os elementos de pgina que estavam fora das tabelas tambm sero colocados em camadas.
50
Animar camadas
O termo HTML dinmico, ou DHTML, refere-se combinao de HTML com uma linguagem de scripts que permite alterar as propriedades de posicionamento ou estilo dos elementos HTML. As linhas de tempo do Dreamweaver utilizam HTML dinmico para alterar as propriedades de camadas e imagens ao longo do tempo. Utilize as linhas de tempo para criar animaes que no requerem nenhum controle ActiveX, plug-ins nem applets Java (mas que requerem JavaScript). A palavra 'dinmico' pode ter vrios significados em diferentes contextos relativos Web. No confunda HTML dinmico com a idia de uma pgina da Web dinmica, que uma pgina da Web gerada dinamicamente por um cdigo do lado do servidor antes de ser apresentada a um visitante.
As linhas de tempo permitem alterar a posio, tamanho, visibilidade e ordem de empilhamento de uma camada. (As funes de camada das linhas de tempo funcionam apenas em navegadores 4.0 ou posteriores.) As linhas de tempo tambm so teis para outras aes que voc deseja que ocorram aps a pgina ser carregada. Por exemplo, as linhas de tempo podem alterar o arquivo de origem de uma tag de imagem, de modo que imagens diferentes apaream na pgina ao longo do tempo. Para ver o cdigo JavaScript gerado por uma linha de tempo, abra a visualizao do cdigo da janela do documento. O cdigo da linha de tempo est na funo MM_initTimelines, dentro de uma tag de script na seo head do documento. Ao editar o HTML de um documento que contm linhas de tempo, certifique-se de no mover, renomear nem excluir nenhum item que seja referenciado por uma linha de tempo.
Utilizar o painel Timelines (Linhas de tempo)

O painel Timelines mostra como as propriedades de camadas e imagens mudam ao longo do tempo. Selecione Window > Timelines para abrir o painel Timelines.
menu pop-up Timeline (Linha de tempo)
Nota
cabea de execuo
Canal Behaviors (Comportamentos)
quadros-chave barra Animation (Animao)
51
O menu pop-up Timeline especifica qual das linhas de tempo do documento est sendo exibida no painel Timelines. A cabea de execuo mostra qual quadro da linha de tempo est sendo exibido na janela do documento. O nmero do quadroindica a numerao seqencial dos quadros. O nmero do quadro atual est entre os botes Back (Voltar) e Play (Executar). Voc pode controlar a durao da animao ao definir o total de quadros e o nmero de quadros por segundo (qps). A definio padro de 15 quadros por segundo uma boa taxa mdia para usar na maioria dos navegadores que esto sendo executados em sistemas comuns Windows e Macintosh. possvel que taxas mais velozes no melhorem o desempenho. Os navegadores sempre executam todos os quadros da animao, mesmo que no consigam obter a taxa de quadros especificada. A taxa de quadros ser ignorada se for superior que o navegador pode suportar.
O menu contextual - Contm vrios comandos relativos linha de tempo. O canal Behaviors - o canal de comportamentos que devem ser executados em um determinado quadro da linha de tempo. As barras Animation mostram a durao da animao de cada objeto. Uma nica linha pode incluir vrias barras que representam objetos diferentes. Barras diferentes no podem controlar o mesmo objeto no mesmo quadro. Os quadros-chave - So quadros de uma barra, onde voc especificou propriedades (como posio) para o objeto. O Dreamweaver calcula valores intermedirios para os quadros que esto entre os quadros-chave. Os quadros-chave so indicados por pequenos crculos. Os canais Animation - Exibem barras para camadas e imagens com animaes.
Opes de execuo
A seguir, so apresentadas as opes de execuo para visualizar a animao.
Rewind (Rebobinar) - Move a cabea de execuo para o primeiro quadro na linha de tempo. Back - Move a cabea de execuo um quadro para a esquerda. Clique em Back e mantenha pressionado o boto do mouse para executar a linha de tempo para trs. Play - Move a cabea de execuo um quadro para a direita. Clique em Play e mantenha pressionado o boto do mouse para executar a linha de tempo para frente. Autoplay (Execuo automtica) - Faz com que a linha de tempo comece a execuo automaticamente quando a pgina atual for carregada em um navegador. A opo Autoplay anexa um comportamento tag body da pgina que executa a ao Play Timeline (Executar linha de tempo) quando a pgina carregada. Loop- Faz com que a linha de tempo atual fique em loop indefinidamente enquanto a pgina estiver aberta em um navegador. A opo Loop insere o comportamento Go to Timeline Frame (Ir para quadro da linha de tempo) no canal Behaviors aps o ltimo quadro da animao. Clique duas vezes no marcador do comportamento no canal Behaviors para editar os parmetros desse comportamento e alterar o nmero de loops.
Nota
52
Mover uma camada utilizando uma animao da linha de tempo

O tipo mais comum de animao da linha de tempo envolve a movimentao de uma camada ao longo de um caminho. As linhas de tempo s podem mover camadas. Para fazer com que imagens ou texto se movam, crie uma camada usando o boto Draw Layer (Desenhar camada) na barra Insert e, em seguida, insira na camada imagens, texto ou qualquer outro tipo de contedo As linhas de tempo tambm podem alterar outros atributos de camadas e imagens. Para animar uma camada utilizando uma linha de tempo: 1. 2. 3. Mova a camada para onde deve estar quando a animao comear. Selecione Window > Timelines. Selecione a camada que voc deseja animar. Certifique-se de que selecionou o elemento desejado. Clique no marcador da camada ou na ala de seleo da camada, ou utilize o painel Layers para selecionar uma camada.
Quando uma camada selecionada, so exibidas alas ao seu redor, conforme mostrado na ilustrao a seguir.
Clique na ala de seleo da camada para selecionar a camada
Camada selecionada com imagem dentro
4. Quando voc clica na camada, colocado um ponto de insero piscante dentro dela, mas a
camada no selecionada. Selecione Modify > Timeline > Add Object to Timeline ou simplesmente arraste a camada selecionada at o painel Timelines. exibida uma barra no primeiro canal da linha de tempo. O nome da camada mostrado na barra. Clique no marcador de quadro-chave mostrado no final da barra. Mova a camada dentro da pgina para onde ela dever ir no final da animao. exibida uma linha indicando o caminho da animao na janela do documento. Caso voc queira que a camada se mova em curva, selecione a barra de animao e pressione a tecla Control (no Windows) ou a tecla Command (no Macintosh) e clique em um quadro no meio da barra para adicionar um quadro-chave ao quadro em que voc clicou, ou clique em um quadro no meio da barra de animao e selecione Add Keyframe (Adicionar quadro-chave) no menu contextual. Repita esta etapa para definir quadros-chave adicionais. Mantenha pressionado o boto Play para visualizar a animao na pgina. Repita o procedimento para adicionar mais camadas e imagens linha de tempo e criar uma animao mais complexa.
5. 6. 7.
8.
53
Criar uma linha de tempo arrastando um caminho

Se voc quiser criar uma animao com um caminho complexo, talvez seja mais eficiente gravar o caminho enquanto arrasta a camada, em vez de criar quadros-chave individuais. Para criar uma linha de tempo arrastando um caminho: 1. 2. Selecione uma camada. Mova a camada para onde deve estar quando a animao comear. Certifique-se de ter selecionado a camada; se o ponto de insero est na camada, isto significa que ela no est selecionada. Para selecionar uma camada, clique no marcador da camada ou na ala de seleo da camada, ou utilize o painel Layers. Selecione Modify > Timeline > Record Path of Layer (Gravar caminho da camada). 4. 5. Arraste a camada pela pgina para criar um caminho. Solte a camada no ponto onde a animao deve parar. O Dreamweaver adiciona uma barra de animao linha de tempo, contendo o nmero apropriado de quadros-chave. No painel Timelines, clique no boto Rewind (Rebobinar); depois, mantenha pressionado o boto Play para visualizar a animao.
3.
6.
Modificar linhas de tempo

Aps definir os componentes bsicos de uma linha de tempo, voc poder fazer alteraes como adio e remoo de quadros, alterao da hora de incio da animao, etc. Para modificar uma linha de tempo, siga um destes procedimentos: Para fazer com que a animao seja executada por mais tempo, arraste para a direita o marcador do quadro final. Todos os quadros-chave da animao so deslocados, de modo que suas posies relativas permaneam constantes. Para evitar que os outros quadros-chave sejam movidos, pressione a tecla Control e arraste o marcador do quadro final.Para fazer com que a camada alcance a posio de um quadro-chave mais cedo ou mais tarde, mova o marcador do quadro-chave na barra para a esquerda ou direita. Para alterar a hora de incio de uma animao, selecione uma ou mais barras associadas animao (pressione Shift para selecionar mais de uma barra simultaneamente) e arraste-a(s) para a esquerda ou direita. Para mudar a localizao do caminho de uma animao inteira, selecione a barra inteira e depois arraste o objeto na pgina. O Dreamweaver ajustar a posio de todos os quadroschave. Se for feito qualquer tipo de alterao com uma barra inteira selecionada, todos os quadros-chave sero alterados. Para adicionar ou remover quadros da linha de tempo, selecione Modify > Timeline > Add Frame ou Modify > Timeline > Remove Frame.
54
Para fazer com que a linha de tempo seja executada automaticamente quando a pgina for aberta em um navegador, clique em Autoplay (Execuo automtica). A opo Autoplay anexa pgina um comportamento que executa a ao Play Timeline quando a pgina carregada. Para fazer com que a linha de tempo fique em loop contnuo, clique em Loop. A opo Loop insere a ao Go To Timeline Frame (Ir para quadro da linha de tempo) no canal Behaviors (Comportamentos) aps o ltimo quadro da animao. Voc pode editar os parmetros desse comportamento para definir o nmero de loops.
Alterar propriedades de imagens e camadas com linhas de tempo

Alm de mover camadas com linhas de tempo, voc pode alterar a visibilidade, tamanho e ordem de empilhamento de uma camada. Voc tambm pode alterar o arquivo de origem de uma imagem. Para alterar as propriedades de imagens e camadas com uma linha de tempo: 1. No painel Timelines, siga um destes procedimentos: Selecione um quadro-chave existente na barra que controla o objeto que voc deseja alterar. (Os quadros iniciais e final so sempre quadros-chave.) Crie um novo quadro-chave, clicando em um quadro no meio da barra de animao e selecionando Modify > Timeline > Add Keyframe. Voc tambm pode criar um novo quadro-chave pressionando a tecla Control (no Windows) ou a tecla Command (no Macintosh) e clicando em um quadro da barra de animao.
2. Defina novas propriedades para o objeto, seguindo um dos procedimentos abaixo: Para alterar o arquivo de origem de uma imagem, clique no cone de pasta junto caixa de texto Src (Orig.) no Property inspector; depois procure uma nova imagem e selecione-a. Para alterar a visibilidade de uma camada, selecione inherit (herdar), visible (visvel) ou hidden (oculta) no menu pop-up da caixa de texto Vis do Property inspector. Uma alternativa usar os cones que representam um olho, no painel Layers.
Para alterar o tamanho de uma camada, arraste as alas de redimensionamento da camada ou digite novos valores nas caixas de texto Width (Largura) e Height (Altura) no Property inspector. Nem todos os navegadores podem alterar o tamanho de uma camada de forma dinmica Para alterar a ordem de empilhamento de uma camada, digite um novo valor na caixa de texto Z-Index (ndice Z) ou utilize o painel Layers para alterar a ordem de empilhamento da camada atual
3. Mantenha pressionado o boto Play para ver a animao.
55
Utilizar vrias linhas de tempo

Em vez de tentar controlar todas as aes de uma pgina com uma linha de tempo, mais fcil trabalhar com linhas de tempo separadas que controlem partes diferentes da pgina. Por exemplo, uma pgina pode incluir elementos interativos, sendo que cada um deles aciona uma linha de tempo diferente. Para gerenciar vrias linhas de tempo, siga um destes procedimentos: Para criar uma nova linha de tempo, selecione Modify > Timeline > Add Timeline (Adicionar linha de tempo). Para remover a linha de tempo selecionada, selecione Modify > Timeline > Remove Timeline. Assim, todas as animaes da linha de tempo selecionada sero removidas permanentemente. Para renomear a linha de tempo selecionada, selecione Modify > Timeline > Rename Timeline (Renomear linha de tempo) ou digite um novo nome no menu pop-up Timeline no painel Timelines . Para exibir outra linha de tempo no painel Timelines, selecione uma nova linha de tempo no menu pop-up Timeline, no painel Timelines.
Copiar e colar animaes

Quando gostar de uma seqncia de animaes , voc poder copi-la e col-la em uma outra rea da linha de tempo atual, em outra linha de tempo do mesmo documento ou em uma linha de tempo de outro documento. Voc tambm pode copiar e colar vrias seqncias de uma s vez. Para recortar ou copiar e colar seqncias de animaes: 1. Clique em uma barra de animao para selecionar uma seqncia. Para selecionar vrias seqncias, pressione a tecla Shift e clique em vrias barras de animao; para selecionar todas as seqncias, pressione Control+A Copie ou recorte a seleo.
2.
3.
Siga um dos procedimentos abaixo: Mova a cabea de execuo para um outro ponto da linha de tempo atual. Selecione uma outra linha de tempo no menu pop-up Timeline. Abra um outro documento, ou crie um novo, e depois clique no painel Timelines. Cole a seleo na linha de tempo. As barras de animao de um mesmo objeto no podem se sobrepor porque uma camada no pode estar em dois lugares ao mesmo tempo (nem tampouco uma imagem pode ter duas fontes diferentes ao mesmo tempo). Se a barra de animao que voc estiver colando for se sobrepor a uma outra barra de animao do mesmo objeto, o Dreamweaver deslocar automaticamente o primeiro quadro que no se sobrepe.
4.
H dois princpios a serem seguidos ao colar seqncias de animaes em um outro documento: Se voc copiar uma seqncia de animaes para uma camada, e o novo documento tiver uma camada com o mesmo nome, o Dreamweaver aplicar as propriedades de animao camada existente no novo documento.
56
Se voc copiar uma seqncia de animaes para uma camada, e o novo documento no tiver uma camada com o mesmo nome, o Dreamweaver colar a camada (e seu contedo) do documento original juntamente com a seqncia de animaes. Para aplicar em uma outra camada do novo documento a seqncia de animaes colada, selecione Change Object (Alterar objeto) no menu contextual e depois selecione o nome da segunda camada no menu pop-up. Se desejar, exclua a camada que foi colada.
Aplicar uma seqncia de animaes a um objeto diferente

Para economizar tempo, voc pode criar uma seqncia de animaes e aplic-la a cada uma das camadas restantes no documento. Para aplicar uma seqncia de animaes existente a outros objetos: 1. 2. 3. No painel Timelines, selecione a seqncia de animaes e copie-a. Clique em qualquer quadro do painel Timelines e cole a seqncia nesse quadro. Clique com o boto direito do mouse (no Windows) ou clique com a tecla Control pressionada (Macintosh) na seqncia de animaes que foi colada e selecione Change Object (Alterar objeto) no menu contextual. Na caixa de dilogo apresentada, selecione um outro objeto no menu pop-up e clique em OK. Repita as etapas de 2 a 4 para os demais objetos que devam seguir a mesma seqncia de animaes.
4. 5.
Aps a criao de uma seqncia de animaes, voc tambm pode mudar de idia quanto camada que deve ser animada; simplesmente siga as etapas 3 e 4 acima (no necessrio copiar nem colar).
Renomear linhas de tempo

Voc pode renomear uma linha de tempo. Para renomear uma linha de tempo que est sendo exibida no painel Timelines: 1. 2. Selecione Modify > Timeline > Rename Timeline. Na caixa de dilogo Rename Timeline, digite um novo nome. Se o documento contiver a ao de comportamento Play Timeline (por exemplo, se ele contiver um boto no qual o visitante deve clicar para iniciar a linha de tempo), voc precisar editar o comportamento para que ele reflita o novo nome da linha de tempo.
Inserir tags div no layout

Voc pode utilizar tags div para criar blocos de layout CSS e posicion-los no documento. Essas tags so especialmente teis quando voc tem uma folha de estilos CSS com estilos de posicionamento anexados ao documento. O Dreamweaver permite inserir rapidamente uma tag div e aplicar os estilos existentes a ela. Voc pode utilizar um arquivo de projetos do Dreamweaver como um ponto de partida para o layout CSS. Na categoria Page Designs (CSS) da caixa de dilogo New Document, selecione um arquivo
Para inserir uma tag div: 1. Na janela do documento, coloque o ponto de insero no local onde a tag div dever aparecer.
Nota
57
2.
Siga um dos procedimentos abaixo: Selecione Insert (Inserir) > Layout Objects (Objetos de layout) > Div Tag (Tag div). Na categoria Layout da barra Insert, clique no boto Expanded Tables Mode (Modo de tabelas expandidas).
A caixa de dilogo Insert Div Tag (Inserir tag div) exibida.
3. Preencha a caixa de dilogo.

Para obter mais informaes, clique no boto Help da caixa de dilogo.
4. Clique em OK.
A tag div aparece como uma caixa no documento com o texto do alocador de espao. Quando voc move o mouse sobre a margem da caixa, o Dreamweaver a reala. Se a tag div estiver em uma posio absoluta, ela agir como uma camada do Dreamweaver.
Trabalhar com tags div no layout

Depois de inserir uma tag div, voc poder manipul-la ou adicionar contedo a ela.
Nota
As tags div que tm uma posio absoluta so camadas do Dreamweaver.
As bordas das tags div so visveis quando voc as atribui ou quando a opo CSS Layout Outlines est selecionada. (Por padro, a opo CSS Layout Outlines permanece selecionada no menu View > Visual Aids.) Quando voc move o ponteiro sobre uma tag div, o Dreamweaver a reala. Ao selecionar uma tag div, voc pode visualizar e editar regras para ela no painel CSS Styles (Estilos CSS). Voc tambm pode adicionar contedo tag div posicionando o ponto de insero dentro da tag div e, em seguida, adicionando contedo da mesma forma que em uma pgina. Para exibir e editar as regras aplicadas a uma tag div: 1. Siga um destes procedimentos para selecionar a tag div: Clique na borda da tag div. Clique dentro da tag div e pressione Control+A (no Windows) ou Command+A (no Macintosh) duas vezes.
58
Clique dentro da tag div e selecione-a no seletor de tags, na parte inferior da janela do documento.
2. Selecione Window > CSS Styles para abrir o painel CSS Styles, se j no estiver aberto. As regras aplicadas tag div aparecem no painel. 3. Edite conforme a necessidade.
Para colocar o ponto de insero em uma tag div para adicionar contedo: Clique em qualquer ponto dentro das bordas da tag.
Para alterar o texto do alocador de espao em uma tag div: Selecione o texto e digite sobre ele ou pressione a tecla Delete.
Alterar a cor de realce de tags div

Quando voc move o ponteiro sobre a margem de uma tag div na visualizao do projeto, o Dreamweaver reala as bordas da tag. Voc pode ativar ou desativar o realce se necessrio, ou alterar a cor de realce na caixa de dilogo Preferences (Preferncias). Para alterar as preferncias de realce das tags div: 1. Selecione Edit > Preferences. A caixa de dilogo Preferences (Preferncias) ser exibida. 2. Selecione Highlighting (Realce) na lista de categorias esquerda. 3. Faa uma dessas alteraes: Para alterar a cor do realce para as tags div, clique na caixa de cor Mouse-Over (Seleo do mouse) e selecione a cor de realce utilizando o seletor de cores (ou digite o valor hexadecimal relativo cor do realce na caixa de texto). Para ativar ou desativar o realce para as tags div, marque ou desmarque a caixa de seleo Show (Mostrar) para Mouse-Over. 4. Clique em OK.
59
Captulo 6 - Apresentar contedo com tabelas

As tabelas so ferramentas poderosas para a apresentao de dados tabulares e para a definio do layout de textos e grficos em uma pgina. Muitos designers usam tabelas para definir o layout de pginas da Web. O Adobe Dreamweaver CS5 fornece dois modos de visualizao e manipulao de tabelas: O modo Standard (Padro), no qual as tabelas so apresentadas como grades de linhas e colunas, e o modo Layout (Layout), que permite desenhar, redimensionar e mover caixas na pgina enquanto estiver usando tabelas para a estrutura subjacente
Sobre as tabelas
As tabelas so ferramentas poderosas para a apresentao de dados tabulares e para a definio do layout de textos e grficos em uma pgina HTML. Uma tabela consiste em uma ou mais linhas, sendo que cada linha formada por uma ou mais clulas. Embora normalmente as colunas no sejam especificadas de forma explcita no cdigo HTML, o Dreamweaver permite manipul-las, bem como linhas e clulas. Dreamweaver exibe a largura da tabela e da coluna para cada coluna da tabela quando a tabela selecionada ou quando o ponto de insero est na tabela. Ao lado das larguras, esto as setas relativas ao menu do cabealho da tabela e aos menus do cabealho da coluna. Use os menus para ter acesso rpido a alguns comandos relacionados a tabelas. Voc pode ativar ou desativar as larguras e os menus, conforme a necessidade u do cabealho da tabela e aos menus do cabealho da coluna. Use os menus para ter acesso rpido a alguns comandos relacionados a tabelas. Voc pode ativar ou desativar as larguras e os menus, conforme a necessidade Se voc no vir uma largura para a tabela ou para a coluna, isso significa que a tabela ou coluna no possuem uma largura especfica no cdigo HTML. Se aparecerem dois nmeros, a largura visual que aparece no modo Design no coincide com o que foi especificado no cdigo HTML. Isto poder ocorrer quando a tabela redimensionada arrastando seu canto inferior direito ou quando o contedo adicionado a uma clula maior do que a largura definida para essa clula. Por exemplo, se a largura de uma coluna for definida como 200 pixels, ao adicionar contedo que aumente a largura para 250 pixels, dois nmeros aparecero para essa coluna: 200 (a largura especificada no cdigo) e (250) entre parnteses (a largura visual da coluna, na forma como ele processada na sua tela).
Ordem de precedncia para a formatao de tabelas em HTML

Ao formatar tabelas na visualizao do projeto, possvel definir propriedades para toda a tabela ou para linhas, colunas ou clulas selecionadas da tabela. Quando uma propriedade, como cor de fundo ou alinhamento, definida com um valor para toda a tabela e outro valor para clulas individuais, a formatao da clula tem precedncia sobre a formatao da linha, que, por sua vez, tem precedncia sobre a formao da tabela. A ordem de precedncia para formatao da tabela esta: 1. Clulas 2. Linhas
60
3. Tabela Por exemplo: se voc definir a cor de fundo azul para uma nica clula e definir a cor de fundo amarelo para toda a tabela, a clula azul no mudar para a cor amarela, uma vez que a formatao das clulas tem precedncia sobre a formatao da tabela.
Sobre a diviso e a mesclagem de clulas da tabela

possvel mesclar qualquer nmero de clulas adjacentes (contanto que a seleo inteira seja uma linha ou um retngulo de clulas) para produzir uma nica clula abrangendo diversas colunas ou linhas. possvel dividir uma clula em vrias linhas ou colunas, independentemente de ela j ter sido mesclada. O Dreamweaver reestrutura automaticamente a tabela (adicionando quaisquer atributos colspan ou rowspan necessrios) para criar o formato especificado. Na ilustrao a seguir, as clulas no meio das duas primeiras linhas foram mescladas em uma nica clula, de forma a abrangerem duas linhas.
Inserir uma tabela e adicionar contedo

Utilize a barra Insert (Inserir) ou o menu Insert (Inserir) para criar uma nova tabela. possvel adicionar textos e imagens s clulas da tabela do mesmo modo que se adicionam textos e imagens fora de uma tabela. Para inserir uma tabela: 1. 2. Na visualizao do projeto da janela do documento, coloque o ponto de insero no local onde deseja que a tabela seja exibida. Siga um dos procedimentos abaixo: Selecione Insert (Inserir) > Table (Tabela). Na categoria Common (Comuns) da barra Insert, clique no boto Table.
A caixa de dilogo Insert Table (Inserir tabela) exibida.
61
3. Preencha a caixa de dilogo.

Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
4. Clique em OK.
Importar e exportar dados tabulares

Os dados tabulares criados com outro aplicativo (como o Microsoft Excel) e salvos em um formato de texto delimitado (com itens separados por tabulaes, vrgulas, dois-pontos, ponto-e-vrgula ou outros delimitadores) podem ser importados para o Dreamweaver e formatados como uma tabela. Tambm possvel exportar dados da tabela, a partir do Dreamweaver, para um arquivo de texto com o contedo das clulas adjacentes separado por um delimitador. possvel utilizar vrgulas, dois-pontos, ponto-e-vrgulas ou espaos como delimitadores. Quando uma tabela exportada, toda ela exportada; impossvel selecionar partes de uma tabela para exportao. Para importar dados da tabela: 1- Siga um dos procedimentos abaixo: Selecione File (Arquivo) > Import (Importar) > Tabular Data (Dados tabulares). Selecione Insert (Inserir) > Table Objects (Objetos de tabela) > Import Tabular Data (Importar dados tabulares). A caixa de dilogo Import Tabular Data (Importar dados tabulares) exibida.
62
2- Na caixa de dilogo, fornea as informaes sobre o arquivo que contm os dados. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. 3- Clique em OK.
Para exportar uma tabela: Coloque o ponto de insero em qualquer clula da tabela. Selecione File (Arquivo) > Export (Exportar) > Table (Tabela). A caixa de dilogo Export Table (Exportar tabela) exibida.
Na caixa de dilogo Export Table, especifique as opes para exportar a tabela. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Clique em Export. A caixa de dilogo Export Table As (Exportar tabela como) exibida. Digite um nome para o arquivo. Clique em Save (Salvar).
Selecionar os elementos da tabela

possvel selecionar uma tabela, uma linha ou uma coluna inteira ao mesmo tempo. Tambm possvel selecionar uma ou mais clulas individuais. Quando voc move o ponteiro sobre uma tabela, linha, coluna ou clula, o Dreamweaver reala todas as clulas dessa seo de modo que voc saiba exatamente quais clulas sero selecionadas se voc clicar na seleo. Esse procedimento pode ser til quando houver tabelas sem bordas, clulas que abrangem mltiplas colunas ou linhas ou, ainda, tabelas aninhadas. possvel destacar a cor de realce na caixa de dilogo Preferences (Preferncias).
63
Para alterar a cor de realce para elementos selecionados da tabela: 1. 2. 3. Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh). A caixa de dilogo Preferences (Preferncias) ser exibida. Selecione Highlighting (Realce) na lista de categorias esquerda. Faa uma dessas alteraes: Para alterar a cor do realce para os elementos da tabela, clique na caixa de cor Mouseover (Seleo do mouse) utilizando o seletor de cores (ou digite o valor hexadecimal relativo cor do realce na caixa de texto). Para ativar ou desativar o realce para elementos da tabela, marque ou desmarque a caixa de seleo Show (Mostrar) de Mouse-over.
Selecionar uma tabela

H vrias maneiras de selecionar a tabela inteira de uma s vez. Para selecionar uma tabela inteira, siga um dos procedimentos abaixo: Clique no canto superior esquerdo da tabela, em qualquer rea na margem superior ou inferior da tabela ou ainda na borda de uma linha ou coluna.
Nota
Essas opes afetam todos os objetos, como camadas e tabelas e clulas de visualizao do modo Layout que o Dreamweaver reala quando voc move o ponteiro sobre eles.
Nota
O ponteiro passa para o cone de grade de tabela quando a tabela selecionada (a menos que voc clique na borda de uma linha ou coluna).
Clique em uma clula da tabela e, em seguida, selecione a tag <table> no seletor de tags, no canto inferior esquerdo da janela do documento. Clique em uma clula da tabela e selecione Modify (Modificar) > Table (Tabela) > Select Table (Selecionar tabela). Clique em uma clula da tabela, clique no menu de cabealho da tabela e, em seguida, selecione Select Table (Selecionar tabela). Alas de seleo so exibidas na borda inferior e direita da tabela selecionada.
Selecionar linhas ou colunas

64
possvel selecionar uma linha ou coluna individual ou selecionar mltiplas linhas ou colunas. Para selecionar linhas ou colunas individuais ou mltiplas: 1- Posicione o ponteiro de forma que aponte para a margem esquerda de uma linha ou para a margem superior de uma coluna. 2- Quando o ponteiro se transformar em uma seta de seleo, clique para selecionar uma linha ou coluna ou arrastar para selecionar vrias linhas ou colunas.
Para selecionar uma nica coluna: 1- Clique na coluna. 2- Clique no menu de cabealho da coluna e selecione Select Column (Selecionar coluna).
Selecionar clulas
possvel selecionar uma nica clula, uma linha ou bloco de clulas ou, ainda, clulas no-adjacentes. Para selecionar uma nica clula, siga um dos procedimentos abaixo: Clique na clula e, em seguida, selecione a tag <td> no seletor de tags, no canto inferior esquerdo da janela do documento. Pressione a tecla Control (no Windows) ou Command (no Macintosh) na clula. Clique na clula e selecione Edit (Editar) > Select All (Selecionar tudo).
Para selecionar uma linha ou um bloco retangular de clulas, siga um dos procedimentos abaixo: Arraste de uma clula a outra. Clique em uma clula, pressione a tecla Control (no Windows), na mesma clula para selecion-la e, em seguida, pressione a tecla Shift em outra clula. Todas as clulas dentro da regio linear ou retangular definida pelas duas clulas so selecionadas.
65
Para selecionar clulas no-adjacentes: Mantenha a tecla Control (no Windows), pressionada e clique nas clulas, linhas ou colunas que deseja selecionar. Se as clulas, linhas ou colunas nas quais clicar ainda no estiverem selecionadas, elas sero adicionadas seleo. Se j tiverem sido selecionadas, sero removidas da seleo.
Usar o modo Expanded Tables (Tabelas expandidas) para facilitar a edio da tabela
O modo Expanded Tables (Tabelas expandidas) adiciona, temporariamente, o preenchimento e espaamento das clulas a todas as tabelas de um documento e aumenta as bordas das tabelas para facilitar a edio. Esse modo permite selecionar itens em tabelas ou posicionar com preciso o ponto de insero. Por exemplo, talvez seja preciso expandir uma tabela para posicionar o ponto de insero esquerda ou direita de uma imagem, sem selecionar acidentalmente a imagem ou a clula da tabela.
Aps fazer a seleo ou posicionar o ponto de insero, retorne ao modo Standard (Padro) da visualizao do projeto para fazer a edio necessria. Algumas operaes visuais, como redimensionamento, no tero os resultados esperados no modo Expanded Tables.
Para passar ao modo Expanded Tables: 1- Se voc estiver no modo de exibio Code, selecione View (Exibir) > Design ou View > Code and Design (Cdigo e design). No possvel passar para o modo Expanded Tables na visualizao de cdigo. 2- Siga um dos procedimentos abaixo:
Nota
66
Selecione View (Exibir) > Table Mode (Modo da tabela) > Expanded Tables Mode (Modo de tabelas expandidas). Na categoria Layout da barra Insert (Inserir), clique no boto Expanded Tables Mode.
Uma barra denominada Expanded Tables Mode aparece na parte superior da janela do documento. O Dreamweaver adiciona preenchimento e espaamento de clula a todas as tabelas da pgina e aumenta as bordas das tabelas. Para sair do modo Expanded Tables, siga um destes procedimentos: Na barra Expanded Tables Mode, na parte superior da janela do documento, clique em Exit (Sair). Selecione View (Exibir) > Table Mode (Modo da tabela) > Layout Mode (Modo Layout). Na categoria Layout da barra Insert, clique no boto Modo Standard.
O Dreamweaver volta para o modo Standard.
Usar um esquema de desenho para formatar uma tabela

Utilizar o comando Format Table (Formatar tabela) para aplicar rapidamente um estilo predefinido a uma tabela. Em seguida, as opes podem ser selecionadas para personalizar o estilo ainda mais. Somente as tabelas mais simples podem ser formatadas usando estilos predefinidos. No possvel usar esses estilos para formatar tabelas que contm clulas mescladas (colspan ou rowspan) ou grupos de colunas ou, ainda, para formatar qualquer outra tabela que no consista em uma grade retangular simples de clulas.
Para utilizar um estilo de tabela predefinido: 1- Selecione uma tabela 2- Select Commands (Comandos) > Format Table (Formatar tabela). A caixa de dilogo Format Table exibida.
Nota
67
3- Personalizar as opes, conforme desejado.

Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
4- Clique em Apply (Aplicar) ou em OK para formatar a tabela com o estilo selecionado.
Redimensionar tabelas, colunas e linhas

possvel redimensionar uma tabela inteira ou determinadas linhas e colunas da tabela. Se houver dificuldade para redimensionar a largura das colunas ou altura das linhas, voltar e comear novamente. Algumas vezes, as larguras das colunas definidas no cdigo HTML no correspondem s suas larguras aparentes na tela. Quando isso acontecer, voc pode tornar as larguras iguais. As larguras das tabelas e das colunas e os menus dos cabealhos aparecem no Dreamweaver para ajudar a definir o layout das tabelas. possvel ativar ou desativar as larguras e os menus, conforme a necessidade .
Redimensionar uma tabela

possvel redimensionar uma tabela arrastando uma de suas alas de seleo. O Dreamweaver exibe a largura da tabela, juntamente com um menu dos cabealhos da tabela, na parte superior ou inferior da tabela, quando a tabela selecionada ou quando o ponto de insero est na tabela.
68
Quando uma tabela inteira redimensionada, o tamanho de todas as clulas da tabela alterado na mesma proporo. Se as clulas de uma tabela tiverem larguras ou alturas especificadas explicitamente, o redimensionamento da tabela alterar o tamanho visual das clulas na janela do documento, mas no modificar as larguras e alturas especificadas das clulas. Para redimensionar uma tabela:
1- Selecione a tabela - So exibidas alas de seleo na tabela.
2- Siga um dos procedimentos abaixo:

Para redimensionar a tabela horizontalmente, arraste a ala de seleo direita. Para redimensionar a tabela verticalmente, arraste a ala de seleo da parte inferior. Para redimensionar a tabela em ambas as dimenses, arraste a ala de seleo no canto inferior direito.
Redimensionar colunas e linhas

possvel alterar a largura de uma coluna ou a altura de uma linha no Property inspector (Inspetor de propriedades) ou arrastando as bordas da coluna ou linha. Se houver dificuldade no redimensionamento, possvel limpar as larguras das colunas ou as alturas das linhas e comear novamente. O Dreamweaver exibe as larguras das colunas, juntamente com os menus de cabealhos das colunas, na parte superior ou inferior das colunas quando a tabela selecionada ou quando um ponto de insero est na tabela.
Para alterar a largura de uma coluna e manter a largura geral da tabela: Arraste a borda direita da coluna a ser alterada. A largura da coluna adjacente tambm alterada; na verdade, duas colunas so redimensionadas. A visualizao das alteraes efetuadas mostra de que forma as colunas sero alteradas; a largura geral da tabela no alterada.
Para alterar a largura de uma coluna e manter o tamanho das outras colunas:
69
Mantenha a tecla Shift pressionada e arraste a borda da coluna. A largura da coluna alterada. A visualizao das alteraes efetuada mostra de que forma a largura das colunas ser ajustada; a largura geral da tabela alterada para acomodar a coluna que est sendo redimensionada.
Para alterar visualmente a altura de uma linha: Arraste a borda inferior da linha.
Para definir a largura de uma coluna ou a altura de uma linha utilizando o Property inspector: 1- Selecione a coluna ou linha 2- No Property inspector, aberto a partir da seleo de Window (Janela) > Properties (Propriedades), digite um valor no campo de texto W (L) para a largura da coluna ou no campo de texto H (A) para a altura da linha. Para obter mais informaes, clique no boto Help (Ajuda) do Property inspector. 3- Pressione a tecla Tab ou Enter (no Windows) ou Return (no Macintosh) para aplicar o valor.
Tornar as larguras das colunas consistentes com as larguras visuais

Se voc vir dois nmeros para a largura de uma coluna, isso significa que a largura de coluna definida no cdigo HTML no reflete a largura aparente da coluna na tela. possvel tornar a largura especificada no cdigo consistente com a largura visual.
Para tornar as larguras consistentes: 1- Clique em uma clula. 2- Clique no menu do cabealho da tabela e selecione Make All Widths Consistent (Tornar consistentes todas as larguras).
70
O Dreamweaver redefine a largura especificada no cdigo para que ela corresponda largura visual.
Limpar larguras e alturas definidas

Talvez seja preciso limpar as larguras e alturas definidas antes de redimensionar uma tabela ou caso haja problemas no redimensionamento de uma tabela ou de colunas ou linhas individuais e voc deseje reiniciar o processo. Para limpar todas as larguras ou alturas definidas em uma tabela: 1- Selecione a tabela 2- Siga um dos procedimentos abaixo: Selecione Modify (Modificar) > Table (Tabela) > Clear Cell Widths (Limpar larguras das clulas) ou Modify > Table > Clear Cell Heights (Limpar alturas das clulas). No Property inspector (Inspetor de propriedades), aberto a partir da seleo de Window (Janela) > Properties (Propriedades), clique no boto Clear Row Heights (Limpar as alturas das linhas) ou no boto Clear Column Widths (Limpar as larguras das colunas). Clique no menu do cabealho da tabela e selecione Clear All Heights (Limpar todas as alturas) ou Clear All Widths (Limpar todas as larguras).
Para limpar a largura definida de uma coluna: 1- Clique na coluna. 2- Clique no menu de cabealho da coluna e selecione Clear Column Width.
Captulo 7 - Criao de pginas no modo Layout

Um mtodo comum de se criar um layout de pgina consiste na utilizao de tabelas HTML para posicionar os elementos. No entanto, pode ser difcil utilizar tabelas para layouts, pois elas foram criadas originalmente para exibir dados tabulares e no para definir o layout de pginas da Web. Para dinamizar o processo de utilizao de tabelas para o layout de pgina, o Adobe Dreamweaver CS5 fornece o
71
modo Layout. No modo Layout, possvel criar uma pgina utilizando tabelas como a estrutura bsica, ao mesmo tempo em que se evitam alguns dos problemas que ocorrem com freqncia na criao de projetos baseados em tabelas atravs dos meios convencionais.
Sobre o modo Layout

No modo Layout, voc usa clulas e tabelas de layout para criar o layout da pgina antes de incluir contedo. Por exemplo, seria possvel desenhar uma clula na parte superior da pgina para conter um grfico de cabealho, outra clula no lado esquerdo da pgina para conter uma barra de navegao e uma terceira clula, direita, para o contedo. Ao adicionar contedo, voc pode mover as clulas o quanto for necessrio para ajustar o seu layout. As tabelas de layout aparecem com uma borda verde na pgina; as clulas de layout aparecem com uma borda azul na pgina. Quando voc move o ponteiro sobre uma clula da tabela, o Dreamweaver reala essa clula.
possvel definir o layout de uma pgina utilizando vrias clulas de layout dentro de uma tabela de layout - que o mtodo mais comum para a definio do layout de uma pgina na Web - ou utilizar diversas tabelas de layout separadas para layouts mais complexos. O uso de diversas tabelas de layout isola sees do layout, de modo que no possam ser afetadas por alteraes feitas em outras sees. Tambm possvel aninhar tabelas de layout ao inserir uma nova tabela de layout dentro de uma tabela existente. Esta estrutura permite simplificar a estrutura da tabela quando as linhas ou coluna em uma parte do layout no estiveram alinhadas com as linhas ou colunas em outra parte do layout. Por exemplo, ao utilizar tabelas de layout aninhadas seria possvel criar facilmente um layout com duas colunas e quatro linhas na coluna esquerda e trs linhas na coluna direita.
Como ver tabelas e clulas no modo Layout
72
As larguras de tabelas e clulas de layout (em pixels ou em um percentual da largura da pgina) aparecem na parte superior ou inferior da tabela quando ela selecionada ou quando o ponto de insero se encontra na tabela. Ao lado das larguras, encontram-se setas que indicam o menu de cabealho da tabela e os menus de cabealho de colunas. Use os menus para ter acesso rpido a alguns dos comandos mais comuns. Para desativar larguras de colunas, guias de tabela e menus de cabealho, preciso desativar todos os recursos visuais [View (Visualizar) > Visual Aids (Recursos visuais) > Hide All (Ocultar todos)].
Eventualmente, a largura pode no aparecer para uma coluna; voc provavelmente ver o seguinte: Sem largura. Se voc no vir uma largura para a tabela ou para a coluna, isso significa que a tabela ou coluna no possuem uma largura especfica no cdigo HTML. Dois nmeros. Se aparecerem dois nmeros, a largura visual que aparece no modo Design no coincide com o que foi especificado no cdigo HTML. Isto poder ocorrer quando a tabela redimensionada arrastando seu canto inferior direito ou quando o contedo adicionado a uma clula maior do que a largura definida para essa clula.
Por exemplo, se a largura da coluna for definida como 200 pixels, ao adicionar contedo que aumente a largura para 250 pixels, dois nmeros aparecero na parte superior dessa coluna: 200 (a largura especificada no cdigo) e (250) entre parnteses (a largura visual da coluna, na forma como ele processada na sua tela). Linha ondulada. Uma linha ondulada aparece para as colunas que esto configuradas com alongamento automtico. Barras duplas. Colunas que contm imagens espacejadoras possuem barras duplas em volta da largura da coluna.
Linhas de grade de tabelas e clulas de layout

Quando voc desenha uma clula de layout em uma tabela de layout, uma grade de linhas sutil aparece, indo das bordas de uma clula de layout qualquer at as bordas da tabela de layout que a contm. Estas linhas ajudam a alinhar as novas clulas s clulas antigas e visualizar a estrutura da tabela HTML oculta. No Dreamweaver, as extremidades das novas clulas so alinhadas automaticamente com as extremidades das clulas existentes. As clulas de layout no podem ser sobrepostas. As extremidades da clula tambm se encaixam automaticamente s extremidades da tabela de layout que contm a clula se uma clula for desenhada prxima extremidade de uma tabela. Voc tambm pode usar a grade do Dreamweaver, que pr-configurada e que no se modifica em funo do posicionamento das clulas, para criar o layout da sua pgina.
Nota
73
Largura das colunas com tamanho fixo e colunas com alongamento automtico
Uma coluna da tabela no modo Layout pode ter uma largura fixa ou uma largura que se expande automaticamente para preencher o mximo possvel a janela do navegador (alongamento automtico). Colunas de largura - Fixa possuem uma largura numrica especfica, como 300 pixels. O Dreamweaver exibe a largura de cada coluna com largura fixa na parte superior ou inferior da coluna. Colunas com alongamento automtico - Se modificam automaticamente dependendo da largura da janela do navegador. Se o layout incluir uma coluna com alongamento automtico, ele sempre preencher a largura inteira da janela do navegador do visitante. possvel fazer com que somente uma coluna de uma determinada tabela de layout seja alongada automaticamente. Uma coluna com alongamento automtico exibe uma linha ondulada na rea de largura da coluna. Um mtodo de layout comum consiste em provocar o alongamento automtico da coluna que comporta o contedo principal da pgina, o que define automaticamente todas as outras colunas para uma largura fixa. Por exemplo: suponha que o layout tenha uma imagem grande esquerda da pgina e uma coluna de texto direita. possvel definir a coluna da esquerda com uma largura fixa e provocar o alongamento automtico da rea da barra lateral. Ao provocar o alongamento automtico de uma coluna, o Dreamweaver insere imagens espaadoras nas colunas com largura fixa para assegurar que essas colunas tenham a largura apropriada, a menos que seja especificado que nenhuma imagem espaadora deva ser utilizada. Uma imagem espaadora uma imagem transparente utilizada para controlar o espaamento, mas no fica visvel na janela do navegador.
Imagens espaadoras
Uma imagem espaadora (tambm conhecida como GIF de espaamento) uma imagem transparente utilizada para controlar o espaamento em tabelas com alongamento automtico. Uma imagem espaadora consiste em uma imagem GIF transparente de um nico pixel alongada para ter um nmero especfico de pixels. O navegador no pode desenhar uma coluna da tabela mais estreita do que a imagem mais larga contida em uma clula daquela coluna. Por isso, a insero de uma imagem espaadora em uma coluna da tabela exigir que os navegadores mantenham a coluna ao menos com a mesma largura da imagem. O Dreamweaver adiciona automaticamente imagens espaadoras ao definir uma coluna para alongamento automtico, a menos que seja determinado que nenhuma imagem espaadora deva ser utilizada. possvel inserir e remover imagens espaadoras manualmente em cada coluna, se preferir. As colunas que contm imagens espaadoras tm uma barra dupla na rea da largura da coluna. possvel inserir e remover manualmente as imagens espaadoras de colunas especficas ou remover todas as imagens espaadoras da pgina.
Alternar do modo Standard (Padro) para o modo Layout

Para poder desenhar tabelas de layout ou clulas de layout, necessrio alternar do modo Standard (Padro) para o modo Layout. mais fcil criar tabelas para layout no modo Layout do que no modo Standard, mas recomendvel retornar ao modo Standard antes de adicionar contedo ou editar as tabelas. Se o usurio criar uma tabela no modo Standard e depois alternar para o modo Layout,, a tabela de layout resultante poder conter clulas de layout vazias. Talvez seja preciso excluir essas clulas de layout vazias para poder criar novas clulas de layout ou mover as clula de layout pela tabela.
Nota
74
Para passar modo Layout: 1- Se voc estiver no modo de exibio Code, selecione View (Exibir) > Design ou View > Code and Design (Cdigo e design). No possvel mudar para o modo Layout no modo de exibio Code. 2- Siga um dos procedimentos abaixo: Selecione View (Exibir) > Table Mode (Modo da tabela) > Layout Mode (Modo Layout). Na categoria Layout da barra Insert, clique no boto Modo Layout. Uma barra com o nome Layout Mode (Modo Layout) aparece ao longo da parte superior da janela Document (Documento). Se houver tabelas nesta pgina, sero exibidas como tabelas de layout. A fim de mudar para o modo Layout, faa o seguinte: Clique em Exit (Sair) na barra com o nome Layout Mode na parte superior da janela Document. Selecione View (Exibir) > Table Mode (Modo da tabela) > Layout Mode (Modo Layout). Na categoria Layout da barra Insert, clique no boto Modo Standard. O Dreamweaver volta para o modo Standard.
Desenhar clulas e tabelas de layout

possvel desenhar clulas e tabelas de layout na pgina enquanto se est no modo Layout. Ao desenhar uma clula de layout fora de uma tabela de layout, o Dreamweaver cria automaticamente uma tabela de layout como um recipiente para a clula. Uma clula de layout no pode existir fora de uma tabela de layout. No modo Layout, impossvel utilizar as ferramentas Insert Table (Inserir tabela) e Draw Layer (Desenhar camada) como no modo Standard (Padro). Para utilizar estas ferramentas, necessrio primeiro alternar para o modo Standard (Padro).
Quando o Dreamweaver cria uma tabela de layout de modo automtico, a tabela exibida inicialmente para preencher toda a visualizao do projeto, mesmo que o tamanho da janela do documento seja alterado. Esta tabela de layout padro que ocupa todo o espao da janela permite desenhar clulas de layout em qualquer local na visualizao do projeto. possvel definir um tamanho especfico para a tabela clicando na borda da tabela e arrastando suas alas de redimensionamento. Quando voc passa o cursor sobre uma clula de layout, o Dreamweaver aplica realce a ela. Voc pode ativar ou desativar o realce ou alterar a cor de realce na caixa de dilogo Preferences (Preferncias). Para desenhar uma clula de layout: 1- Verifique se est no modo Layout 2- Na categoria Layout da barra Insert, clique no boto Draw Layout Cell (Desenhar clula de layout). O ponteiro convertido em uma cruz (+).
Nota
75
3- Posicione o ponteiro onde deseja iniciar a clula na pgina e arraste-o para criar a clula de layout. Para desenhar mais de uma clula de layout sem ter que selecionar repetidamente Draw Layout Cell (Desenhar clula de layout), mantenha a tecla Control (no Windows) pressionada enquanto arrasta o mouse para desenhar a clula de layout. possvel continuar a desenhar clulas de layout uma aps a outra, contanto que no solte a tecla Control.
Se voc desenhar a clula prxima borda da tabela de layout, as bordas da clula automaticamente se alinham tabela de layout em que esto contidas. Para desativar temporariamente o encaixe, mantenha pressionada a tecla Alt (no Windows) ou a tecla Option (no Macintosh) ao desenhar a clula. Para desenhar uma tabela de layout: 1- Verifique se est no modo Layout 2- Na categoria Layout da barra Insert, clique no boto Draw Layout Table (Desenhar tabela de layout). O ponteiro convertido em uma cruz (+). 3- Posicione o ponteiro do mouse na pgina e arraste-o para criar a tabela de layout. possvel criar uma tabela de layout em uma rea vazia do layout da pgina, ao redor de clulas e tabelas de layout existentes ou mesmo aninhada em uma tabela de layout existente. Se a pgina possui contedo e voc desejar adicionar uma tabela de layout, possvel desenhar uma nova tabela de layout somente abaixo da parte inferior do contedo existente. Para alterar as preferncias de realce de clulas de layout: 1- Selecione Edit > Preferences. A caixa de dilogo Preferences (Preferncias) ser exibida. 2- Selecione Highlighting (Realce) na lista de categorias esquerda. 3- Faa uma dessas alteraes: Para alterar a cor de realce, clique na caixa de cores e, em seguida, selecione a cor de realce utilizando o seletor de cores (ou digite o valor hexadecimal correspondente cor de realce na caixa de texto). Para ativar ou desativar o realce, marque ou desmarque a caixa de seleo Show (Exibir) de Mouse-Over (Mouse sobre). 4- Clique em OK.
Desenhar uma tabela de layout aninhada

possvel desenhar uma tabela de layout dentro de outra tabela de layout para criar uma tabela aninhada. As clulas internas de uma tabela aninhada no podem ser modificadas em relao tabela externa, por exemplo: ao modificar o tamanho de uma linha ou coluna na tabela externa, o tamanho das clulas da tabela interna no modificado. possvel inserir diversos nveis de tabelas aninhadas. Uma tabela de layout aninhada no pode ser maior do que a tabela que a contm.
Nota
76
Para desenhar uma tabela de layout aninhada: 1- Verifique se est no modo Layout 2- Na categoria Layout da barra Insert, clique no boto Draw Layout Table (Desenhar tabela de layout). O ponteiro convertido em uma cruz (+). 3- Aponte para qualquer rea vazia (cinza) em uma tabela de layout existente e, em seguida, arraste para criar a tabela de layout aninhada.
Para desenhar uma tabela de layout ao redor de clulas ou tabelas de layout j existentes: 1- Verifique se est no modo Layout 2- Na categoria Layout da barra Insert, clique no boto Draw Layout Table (Desenhar tabela de layout). O ponteiro convertido em uma cruz (+). 3- Arraste o ponteiro para desenhar um retngulo ao redor de um conjunto de clulas ou tabelas de layout existentes. exibida uma tabela de layout aninhada, incluindo as clulas ou tabelas existentes. Para encaixar perfeitamente uma clula de layout em uma das bordas da nova tabela aninhada, comece a arrast-la prximo borda da clula. A borda da nova tabela se encaixar borda da clula. impossvel arrastar do centro de uma clula de layout, pois no se pode criar uma tabela de layout inteiramente no interior de uma clula de layout.
Adicionar contedo a uma clula de layout

possvel adicionar texto, imagens e outros tipos de contedo s clulas de layout no modo Layout, do mesmo modo que o contedo adicionado s clulas da tabela no modo Standard (Padro). Clique na clula onde dever ser adicionado o contedo e, em seguida, digite o texto ou inserir outro contedo.
Dica
77
possvel inserir contedo apenas em uma clula de layout, mas no em uma rea vazia (cinza) de uma tabela de layout. Desse modo, para poder adicionar contedo, necessrio primeiro criar as clulas de layout. Para adicionar texto a uma clula de layout: 1- Coloque o ponto de insero na clula de layout em que deseja adicionar texto . 2- Siga um dos procedimentos abaixo: Digite o texto na clula. A clula se expande automaticamente medida que um texto digitado, se necessrio. Cole o texto copiado de outro documento.
Ao adicionar contedo maior do que a clula, a clula de layout se expandir automaticamente. medida que a clula se expande, a coluna onde a clula est localizada tambm se expande, o que pode alterar o tamanho das clulas circunvizinhas. A largura dessa coluna modifica-se para mostrar a largura que aparece no cdigo, seguida da largura visual da coluna (a largura como aparece na tela do usurio) entre parnteses.
Limpar automaticamente as alturas das clulas

Ao criar uma clula de layout, o Dreamweaver especifica automaticamente uma altura para a clula, de modo que ela seja exibida com a altura selecionada mesmo que estiver vazia. Aps inserir contedo na clula, talvez no seja mais preciso especificar a altura; por isso possvel remover da tabela as alturas da clula. Para limpar as alturas da clula, siga um dos procedimentos abaixo: Clique no menu de cabealho da tabela e selecione Clear All Heights (Redefinir todas as alturas).
78
Selecione uma tabela de layout, clicando na guia exibida na parte superior da tabela e clique no boto Clear Row Heights (Limpar as alturas das colunas) do inspetor Property (Propriedades), aberto a partir da seleo de Window (Janela) > Properties (Propriedades).
O Dreamweaver limpa todas as alturas especificadas na tabela. Algumas clulas da tabela podem encolher verticalmente.
Captulo 8 Criando Formulrios.

Criar formulrios
possvel utilizar o Adobe Dreamweaver CS5 para criar formulrios com campos de texto, campos de senha, botes de opo, caixas de seleo, menus pop-up, botes clicveis e outros objetos de formulrio. O Dreamweaver tambm pode escrever o cdigo que valida as informaes que o visitante fornece. Por exemplo, possvel verificar se um endereo de correio eletrnico (e-mail) contm o smbolo "@" ou se um campo de texto obrigatrio foi preenchido.
Sobre os formulrios
Os formulrios permitem obter informaes dos visitantes do seu site da Web. Os visitantes digitam informaes usando objetos de formulrio, como campos de texto, caixas de lista, caixas de seleo e botes de opo, e, em seguida, clicam em um boto para enviar as informaes.
A funo dos formulrios no cliente

Os formulrios oferecem suporte no lado do cliente no relacionamento cliente-servidor. Quando um visitante insere informaes em um formulrio exibido em um navegador da Web (o cliente) e clica no boto de envio, os dados so enviados para o servidor, onde um script ou aplicativo do servidor processa essas informaes. Tecnologias comuns de servidor usadas para processar dados de formulrios incluem o Adobe ColdFusion, o Microsoft Active Server Pages (ASP) e o PHP. O servidor responder enviando as informaes solicitadas de volta para o usurio (ou cliente), ou realizando alguma ao com base no contedo do formulrio.
Objetos de formulrio
No Dreamweaver, os tipos de entrada em formulrios so denominados objetos de formulrio. Os objetos de formulrio so mecanismos que permitem aos usurios inserir dados. possvel adicionar os seguintes objetos de formulrio em um formulrio:
79
Campos de texto: Aceitam qualquer tipo de entrada de texto alfanumrico. O texto pode ser exibido como uma linha nica, vrias linhas e como um campo de senha, no qual o texto digitado substitudo por asteriscos ou marcadores para ocultar o texto de espectadores
Campos ocultos: Armazenam as informaes digitadas pelo usurio (como nome, endereo de correio eletrnico ou preferncia de exibio) e, em seguida, utilizam tais informaes quando o usurio visitar o site novamente. Botes: Executam aes quando clicados. Normalmente, as aes incluem o envio e a redefinio de um formulrio. possvel adicionar um nome ou identificador personalizado a um boto, ou utilizar um dos identificadores predefinidos: Submit (Enviar) ou Reset (Redefinir). Caixas de seleo: Permitem a obteno de vrias respostas em um nico grupo de opes. O usurio pode escolher quantas opes forem necessrias. O exemplo abaixo mostra esse recurso por meio da seleo de trs itens nas caixas de seleo: Surfing (Surfe), Mountain Biking e Rafting (Canoagem)
Botes de opo: Representam opes exclusivas. A seleo de um dos botes do grupo cancela a seleo de todos os outros (um grupo consiste em dois ou mais botes com o mesmo nome). No
80
exemplo abaixo, Rafting a opo escolhida. Se o usurio clicar em Surfing, o boto Rafting ser automaticamente desativado.
Menus de lista: Exibem valores de opo em uma lista de rolagem que permite aos usurios selecionar vrias opes. A opo Menu exibe os valores de opo em um menu que permite aos usurios selecionar apenas um item. Menus de salto: So listas navegveis ou menus pop-up que permitem inserir um menu no qual cada opo est vinculada a um documento ou arquivo. Campos de arquivo: Permitem que o usurio procure arquivos no computador e efetue o upload dos arquivos como dados do formulrio. Campos de imagem: permitem inserir uma imagem em um formulrio. Os campos de imagem podem ser utilizados para criar botes com aparncia grfica, como os botes Submit (Enviar) e Reset (Redefinir). Para criar um formulrio: 1- Abra uma pgina e posicione o ponto de insero no local onde voc deseja que o formulrio seja exibido. 2- Selecione Insert (Inserir) > Form (Formulrio) ou selecione a categoria Forms (Formulrios) na barra Insert e clique no cone Form. O Dreamweaver insere um formulrio vazio. Com a pgina na visualizao do projeto, os formulrios so indicados por um contorno pontilhado em vermelho. Se esse contorno no estiver visvel, verifique se a opo View (Exibir) > Visual Aids (Auxlios visuais) > Invisible Elements (Elementos invisveis) est selecionada.
81
3- Especifique a pgina ou script que ir processar os dados do formulrio. Na janela do documento, clique no contorno do formulrio para selecionar o formulrio. No Property inspector (Inspetor de propriedades), aberto a partir da seleo de Window (Janela) > Properties (Propriedades), digite o caminho na caixa de texto Action (Ao) do inspetor, ou clique no cone de pasta para navegar para a pgina ou script apropriado. 4- Especifique o mtodo que ser utilizado para transmitir os dados do formulrio para o servidor. No Property inspector, selecione uma das opes a seguir no menu pop-up Method (Mtodo): Default: utiliza a configurao padro do navegador para enviar os dados do formulrio para o servidor. Normalmente, o padro o mtodo GET. GET: anexa o valor URL que solicita a pgina. POST: incorpora os dados do formulrio na solicitao http. 5- Insira objetos de formulrio. Posicione o ponto de insero no local onde deseja que o objeto seja exibido no formulrio e, em seguida, selecione o objeto no menu Insert > Form ou na categoria Forms da barra Insert. 6- Ajuste o layout do formulrio conforme desejado. possvel utilizar quebras de linha, quebras de pargrafo, texto pr-formatado ou tabelas para formatar os formulrios. Um formulrio no pode ser inserido em outro formulrio (ou seja, as tags no podem ser sobrepostas), embora seja possvel incluir mais de um formulrio em uma pgina. 7- Quando estiver criando um formulrio, lembre-se de identificar os campos com texto descritivo para permitir que o usurio identifique o ttulo da pergunta, por exemplo: "Digite o seu nome", para solicitar o nome do usurio. Utilize as tabelas para fornecer uma estrutura para os objetos de formulrio e os identificadores dos campos. Ao utilizar as tabelas em formulrios, verifique se todas as tags table esto delimitadas por tags form.
Inserir objetos de formulrio HTML

82
possvel utilizar o Dreamweaver para inserir rapidamente objetos de formulrio HTML nos formulrios. Se voc estiver trabalhando em um aplicativo ASP.NET para a Web, poder usar o Dreamweaver para inserir rapidamente controles de formulrio ASP.NET possvel criar um formulrio HTML em branco, em Insert (Inserir) > Form (Formulrio) > Form, antes de inserir objetos de formulrio nele. Se voc no criar um formulrio em branco e tentar inserir um objeto de formulrio, o Dreamweaver perguntar se deseja criar um formulrio.
Inserir campos de texto HTML

possvel criar um campo de texto que consiste em uma ou em vrias linhas. Tambm possvel criar um campo de texto de senha que oculte o texto digitado pelo usurio. Para inserir um campo de texto: 1- Posicione o ponto de insero dentro do contorno do formulrio: 2- Selecione Insert (Inserir) > Form (Formulrio) > Text Field (Campo de texto). Um campo de texto exibido no documento. 3- No Property inspector (Inspetor de propriedades), defina as propriedades do campo de texto conforme desejado. 4- Para identificar o campo de texto na pgina, clique junto do campo de texto e digite o identificador.
Inserir caixas de seleo HTML

Use caixas de seleo HTML quando quiser permitir que os usurios selecionem mais de uma opo em um conjunto de opes. Para inserir uma caixa de seleo: 1- Posicione o ponto de insero dentro do contorno do formulrio: 2- Selecione Insert (Inserir) > Form (Formulrio) > Check Box (Caixa de seleo). 3- No Property inspector (Inspetor de propriedades), defina as propriedades da caixa de seleo conforme desejado. 4- Para identificar a caixa de seleo, clique junto da caixa na pgina e digite o texto do identificador.
Inserir botes de opo HTML

Use botes de opo HTML quando quiser que os usurios selecionem apenas uma opo em um conjunto de opes. Normalmente, os botes de opo so utilizados em grupos. Todos os botes de opo de um grupo devem ter o mesmo nome.
Para inserir um grupo de botes de opo:
83
1- Posicione o ponto de insero dentro do contorno do formulrio: 2- Selecione Insert (Inserir) > Form (Formulrio) > Radio Group (Grupo de botes de opo).A caixa de dilogo Radio Group exibida. 3- Preencha a caixa de dilogo Radio Group e clique em OK. 4- Para obter instrues sobre como preencher a caixa de dilogo Radio Group, clique no boto Help (Ajuda) dessa caixa de dilogo. O Dreamweaver insere o grupo de botes de opo no formulrio HTML. Se voc ainda no tiver inserido um formulrio na pgina, o Dreamweaver ir adicion-lo. Se desejar, possvel alterar o layout do grupo. Os botes de opo tambm podem ser editados usando o Property inspector (Inspetor de propriedades) ou diretamente na visualizao do cdigo. Para inserir um boto de opo de cada vez: 1- Posicione o ponto de insero dentro do contorno do formulrio: 2- Insira um boto de opo selecionando Insert > Form > Radio Button (Boto de opo). Um boto de opo exibido no documento. 3- No Property inspector, defina as propriedades para o boto de opo, conforme desejado. 4- Para identificar o boto de opo, clique junto do boto na pgina e digite o texto do identificador.
Inserir menus de formulrio HTML

Um menu de formulrio HTML permite que o visitante selecione um ou mais itens em uma lista. Os menus so teis quando h espao limitado, mas necessrio exibir vrios itens. Eles tambm so teis quando voc quer controlar os valores retornados para o servidor. Ao contrrio dos campos de texto, onde os usurios podem digitar qualquer coisa que queiram, inclusive dados invlidos, voc define os valores exatos retornados por um menu. possvel inserir dois tipos de menu em um formulrio: um menu que aberto quando o usurio clica nele ou um menu que exibe uma lista rolvel de itens que podem ser selecionados. Esse ltimo tipo chamado menu de lista. Para inserir um menu: 1- Posicione o ponto de insero dentro do contorno do formulrio: 2- Selecione Insert (Inserir) > Form (Formulrio) > List/Menu (Lista/menu). Um menu exibido no documento. 3- No Property inspector (Inspetor de propriedades), defina as propriedades do menu, conforme desejado. Para obter mais informaes, clique no boto Help (Ajuda) do Property inspector.
Inserir botes padro

Os botes controlam as operaes relacionadas aos formulrios. Use um boto para enviar ao servidor dados do formulrio ou para redefinir o formulrio. Normalmente, os botes de formulrio so identificados como Submit (Enviar), Reset (Redefinir) ou Send (Enviar). possvel atribuir outras tarefas de processamento definidas em um script. Por exemplo, o boto pode calcular o custo total dos itens selecionados com base em valores atribudos.
84
Para criar um boto: 1- Posicione o ponto de insero dentro do contorno do formulrio: 2- Selecione Insert (Inserir) > Form (Formulrio) > Button (Boto). Um boto exibido no formulrio. 3- No Property inspector (Inspetor de propriedades), defina as propriedades do boto, conforme desejado. Para obter mais informaes, clique no boto Help (Ajuda) do Property inspector.
Inserir botes de imagem

possvel usar imagens para representar cones de botes. A utilizao de uma imagem para efetuar tarefas diferentes do envio de dados requer a anexao de um comportamento ao objeto de formulrio. Para criar um boto de imagem: 1- No documento, posicione o ponto de insero dentro do contorno do formulrio: 2- Selecione Insert (Inserir) > Form (Formulrio) > Image Field (Campo de imagem). A caixa de dilogo Image Source (Origem da imagem) exibida. 3- Selecione a imagem para o boto na caixa de dilogo Image Source e clique em OK. Um campo de imagem exibido no formulrio. 4- No Property inspector (Inspetor de propriedades), defina as propriedades do campo de imagem conforme desejado. Para criar um boto de envio, digite Submit (Enviar) na caixa de texto Image Field no Property inspector. 5- Para anexar um comportamento JavaScript ao boto, selecione a imagem e escolha o comportamento no painel Behaviors (Comportamentos), aberto a partir da seleo de Window (Janela) > Behaviors.
Inserir campos ocultos

possvel utilizar campos ocultos para armazenar e enviar informaes no digitadas pelo usurio. As informaes so mantidas ocultas do usurio. Para criar um campo oculto: 1- Na visualizao do projeto, posicione o ponto de insero no interior do contorno do formulrio. 2- Selecione Insert (Inserir) > Form (Formulrio) > Hidden Field (Campo oculto). Aparecer um marcador no documento. Se o marcador no estiver visvel, selecione View (Exibir) > Visual Aids (Auxlios visuais) > Invisible Elements (Elementos invisveis) para ver o marcador. 3- Na caixa de texto HiddenField, no Property inspector (Inspetor de propriedades), digite um nome exclusivo para o campo. 4- Na caixa de texto Value (Valor), digite o valor que deseja atribuir ao campo.
Inserir campos para upload de arquivos

possvel criar um campo para upload de arquivos que permite ao usurio selecionar um arquivo em seu computador (como, por exemplo, um documento gerado por um processador de texto ou arquivo de imagem grfica) e efetuar o upload do arquivo para o servidor. Um campo de arquivo se parece com outros campos de texto, exceto pela presena de um boto Browse (Procurar). O usurio pode digitar
85
manualmente o caminho do arquivo do qual ele deseja efetuar o upload ou utilizar o boto Browse para localizar e selecionar o arquivo. Para poder utilizar campos de upload de arquivos, necessrio um script no lado servidor ou uma pgina capaz de tratar envios de arquivos de envio de arquivos. Consulte a documentao da tecnologia do servidor utilizada para processar os dados do formulrio. Para criar um campo de arquivo em um formulrio: 1- Insira um formulrio na pgina, a partir da seleo de Insert (Inserir) > Form (Formulrio). 2- Selecione o formulrio para exibir o Property inspector (Inspetor de propriedades) correspondente. 3- Defina o mtodo do formulrio como POST. 4- No menu pop-up Enctype (Tipo de codif.), selecione multipart/form-data. 5- Na caixa de texto Action (Ao), especifique a pgina ou script no lado servidor que est apto a lidar com o arquivo carregado. 6- Posicione o ponto de insero dentro do contorno do formulrio e selecione Insert (Inserir)> Form (Formulrio)> File Field (Campo de arquivo). O campo de arquivos inserido no formulrio. 7- No Property inspector (Inspetor de propriedades), defina as propriedades para o campo de arquivo, conforme desejado. Para obter mais informaes, clique no boto Help (Ajuda) do Property inspector.
Inserir objetos de formulrio HTML dinmicos

possvel inserir objetos de formulrio HTML cujo estado inicial determinado pelo servidor quando a pgina solicitada, e no pelo designer durante a criao do formulrio.
Criar um menu de formulrio HTML dinmico

possvel preencher dinamicamente um menu de lista ou de formulrio HTML com entradas de um banco de dados. Para a maioria das pginas, voc pode usar um objeto de menu HTML. Para pginas ASP.NET, voc deve usar um controle de formulrio DropDownList (Lista suspensa) ou ListBox (Caixa de lista). Antes de comear, necessrio inserir um formulrio HTML em uma pgina ColdFusion, PHP, ASP ou JSP e definir um recordset ou outra fonte de contedo dinmico para o menu. Para inserir um menu de formulrio HTML dinmico: 1- Clique no interior do formulrio HTML na pgina. 2- Selecione Insert (Inserir) > Form (Formulrio) > List/Menu (Lista/menu). O Dreamweaver insere um objeto de formulrio List/Menu na pgina. 3- Selecione o objeto de formulrio List/Menu. O Property inspector (Inspetor de propriedades) exibe as propriedades de List/Menu. 4- No Property inspector, clique no boto Dynamic (Dinmico) para exibir a caixa de dilogo Dynamic List/Menu (Lista/menu dinmico).
86
5- Preencha a caixa de dilogo e clique em OK. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
Tornar dinmicos menus de formulrio HTML existentes

possvel tornar dinmico um menu de lista ou de formulrio HTML existente. Esta seo apresenta os objetos de formulrio HTML. Para objetos de menu ASP.NET, como DropDownList (Lista suspensa) ou ListBox (Caixa de lista), antes de comear, necessrio criar o formulrio em uma pgina ColdFusion, PHP, ASP ou JSP e definir um recordset ou outra fonte de contedo dinmico para o menu. Para tornar dinmico um menu de formulrio HTML existente: 1- Na visualizao do projeto, selecione o objeto de formulrio List/Menu (Lista/menu) para torn-lo dinmico. 2- No Property inspector (Inspetor de propriedades), clique no boto Dynamic (Dinmico). Ser exibida a caixa de dilogo Dynamic List/Menu (Lista/menu dinmico). 3- Preencha a caixa de dilogo e clique em OK. Para obter instrues, clique no boto Help (Ajuda) da caixa de dilogo.
Exibir contedo dinmico em campos de texto HTML

possvel exibir contedo dinmico em campos de texto HTML. Para pginas ASP.NET, necessrio usar o controle ASP.NET TextBox (Caixa de texto). Antes de comear, necessrio criar o formulrio em uma pgina ColdFusion, PHP, ASP ou JSP e definir um recordset ou outra fonte de contedo dinmico para o campo de texto. Para tornar dinmicos os campos de texto HTML: 1- Selecione o campo de texto no formulrio HTML na pgina.
87
2- No Property inspector (Inspetor de propriedades), clique no cone em forma de raio ao lado da caixa de texto Init Val (Valor inicial). Ser exibida a caixa de dilogo Dynamic Data (Dados dinmicos). 3- Selecione a coluna do recordset que fornecer um valor para o campo de texto. Em seguida, clique em OK. O campo de texto exibir o contedo dinmico quando o formulrio for visualizado em um navegador.
Pr-selecionar dinamicamente caixas de seleo HTML

possvel permitir que o servidor decida se deve selecionar uma caixa de seleo quando o formulrio for exibido em um navegador. Para pginas ASP.NET, necessrio usar o controle ASP.NET CheckBox (Caixa de seleo). Antes de comear, necessrio criar o formulrio em uma pgina ColdFusion, PHP, ASP ou JSP e definir um recordset ou outra fonte de contedo dinmico para as caixas de seleo. O ideal que a fonte de contedo possua dados booleanos, como Yes/No (Sim/No) ou true/false (verdadeiro/ falso). Para pr-selecionar dinamicamente uma caixa de seleo HTML: 1- Selecione, na sua pgina, o objeto de formulrio de caixa de seleo. 2- No Property inspector (Inspetor de propriedades), clique no boto Dynamic (Dinmico). Ser exibida a caixa de dilogo Dynamic CheckBox (Caixa de seleo dinmica).
3- Preencha a caixa de dilogo e clique em OK. 4- Para obter instrues, clique no boto Help (Ajuda) da caixa de dilogo. A caixa de seleo ser exibida selecionada ou no (dependendo dos dados), quando o formulrio for visualizado em um navegador.
Pr-selecionar dinamicamente botes de opo HTML

possvel permitir que o servidor decida se deve selecionar um boto de opo HTML quando o formulrio for exibido em um navegador. Se voc quiser pr-selecionar dinamicamente objetos de boto de opo ASP.NET, como os controles RadioButton (Boto de opo) ou RadioButtonList (Lista de botes de opo). Antes de comear, voc deve criar o formulrio em uma pgina ColdFusion, PHP, ASP ou JSP e inserir pelo menos um grupo de botes de opo HTML. O ideal que a fonte de contedo possua dados booleanos, como Yes/No (Sim/No) ou true/false (verdadeiro/falso).
88
Para pr-selecionar dinamicamente um boto de opo HTML: 1- Na visualizao do projeto, selecione um boto de opo no grupo. 2- No Property inspector (Inspetor de propriedades), clique no boto Dynamic (Dinmico). A caixa de dilogo Dynamic Radio Group (Grupo de botes de opo dinmicos) exibida. 3- Preencha a caixa de dilogo e clique em OK. Para obter instrues, clique no boto Help (Ajuda) da caixa de dilogo.
Validar dados de formulrio HTML

O Dreamweaver pode adicionar um cdigo JavaScript que verifica o contedo de campos de texto especificados para garantir que o usurio inseriu o tipo de dados correto. Esta seo destina-se aos formulrios HTML. Voc tambm pode criar formulrios ColdFusion no Dreamweaver que validam o contedo dos campos especificados. Para validar os dados de um formulrio HTML: 1- Crie um formulrio HTML que contenha pelo menos um campo de texto e um boto Submit (Enviar). Verifique se cada campo de texto que voc deseja validar possui um nome exclusivo. 2- Selecione o boto Submit. 3- No painel Behaviors (Comportamentos), aberto a partir da seleo de Window (Janela) > Behaviors, clique no boto de adio (+) e selecione o comportamento Validate Form (Validar formulrio) na lista.
4- Defina as regras de validao para cada campo de texto e clique em OK. Por exemplo, voc poderia especificar que um campo de texto para a idade de uma pessoa aceita somente nmeros.
Anexar comportamentos e aplicaes em JavaScript a objetos de formulrio HTML

Alguns formulrios utilizam JavaScript ou VBScript para processar os formulrios ou alguma outra ao no cliente (o que evita a necessidade de enviar os dados do formulrio ao servidor para processamento). Voc pode usar o Dreamweaver para configurar um boto de formulrio para executar determinado script no cliente quando o usurio clicar no boto.
89
Para executar um script no cliente: 1- Em um formulrio, selecione um boto Submit (Enviar). 2- No painel Behaviors (Comportamentos), aberto a partir da seleo de Window (Janela) > Behaviors, clique no boto de adio (+) e selecione Call JavaScript (Chamar Javascript) na lista 3- Na caixa de texto Call JavaScript que exibida, digite o nome da funo JavaScript que voc deseja executar quando o usurio clicar no boto. Em seguida, clique em OK. Por exemplo, voc pode digitar o nome de uma funo que ainda no existe, como processMyForm(). 4- Se sua funo JavaScript ainda no existir na seo head do documento, adicione-a agora. Por exemplo, voc poderia definir a seguinte funo JavaScript na seo head do documento para exibir uma mensagem quando o usurio clicar no boto Submit. function processMyForm(){ alert('Thanks for your order!'); }
Criar formulrios HTML acessveis

Quando voc insere um objeto de formulrio HTML, com a opo Form Object (Objeto de formulrio) selecionada nas preferncias de Accessibility (Acessibilidade), o Dreamweaver solicita a digitao de informaes para tornar acessvel o objeto de formulrio. Tambm possvel alterar atributos de acessibilidade aps inserir o objeto. Para adicionar um objeto de formulrio acessvel: 1- Na primeira vez que voc adicionar objetos de formulrio acessveis, ative a caixa de dilogo Accessibility para objetos de formulrio. Esta uma etapa nica. 2- No documento, posicione o ponto de insero no local onde dever ser exibido o objeto de formulrio. 3- Selecione Insert (Inserir) > Form (Formulrio). Em seguida, selecione um objeto de formulrio a inserir.
90
4- Preencha a caixa de dilogo. Para obter mais informaes, clique no boto Help (Ajuda) da
caixa de dilogo. 5- Clique em OK. 6- Se o Dreamweaver solicitar a insero de uma tag de formulrio, clique em Yes (Sim). O objeto de formulrio ser exibido no documento.
Para editar valores de acessibilidade para um objeto de formulrio: 1- Na janela do documento, selecione o objeto. 2- Siga um dos procedimentos abaixo: Edite os atributos apropriados na visualizao do cdigo. Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control, selecione Edit Tag (Editar tag).
<identificador> <input type="radio" name="radiobutton" value="radiobutton"> RadioButton1</label> <input type="radio" name="radiobutton" value="radiobutton" id="radiobutton"> <label for="radiobutton">RadioButton2</label> <input type="radio" name="radiobutton" value="radiobutton"> RadioButton3
Tutoriais
Essa parte da Apostila, vamos trabalhar com alguns tutoriais para fixar mais o seu aprendizado.
Configurar folhas de estilo de forma automtica praticamente elimina aquela preocupao contnua de vasculhar o cdigo com a finalidade de inserir os atributos de semntica para padres SEO. Se j era verdade antes, agora, com a ajuda do Dreamweaver, o Tableless parece que veio realmente para ficar. 1. O Dreamweaver CS3 surgiu no mercado com diversas novidades. Uma delas uma boa
quantidade de samples/templates de estruturas de sites j em Tableless, como visto acima.
91
2. Vamos utilizar um dos templates do Dreamweaver para criar rapidamente um site
totalmente em Tableles, ou seja, pronto para os motores de busca.
3. Acesse o menu principal do programa clicando em File e selecione a primeira opo, New,
para abrir a janela de criao de novos(as) pginas/sites.
92
4. Na janela de opes, encontramos diversos tipos de samples/ templates. Vamos trabalhar com os modelos existentes nos dois primeiros menus: Blank Page ou Blank Template.
5. Agora, vamos construir um site utilizando XHTML, portanto, seja na primeira ou na segunda opo do menu da janelaNew Document, opte pelos templates HTML.
93
6. Na coluna ao lado, selecione um dos modelos e verifique que este apresentado em um
grfico modelo, que mostra a idia da estrutura do modelo selecionado.
7. O desenho de uma moeda deitada em uma parte do grfico modelo significa que aquela
regio do site se expande de acordo com o tamanho da janela do browser.
94
8. J o desenho de um cadeado indica que aquela regio da pgina fixa, ou seja, mesmo
que se aumente ou diminua a janela do browser, o tamanho da seo no mudar.
9. Na combo-box Doc Type, podemos selecionar o tipo de linguagem que ser utilizada no cdigo-fonte do site. Neste caso, mantenha a opo-padro, XHTML 1.0 Transitional.
95
Adobe Dreamweaver CS5 Web Design (Desenvolvedor Web) 10. Na combo-box Layout CSS, vamos escolher a maneira como sero estruturados os estilos
CSS da pgina que estamos criando, ou seja, em que sero salvos os estilos.
11. Optando pela primeira opo, Add to Head, os estilos CSS sero adicionados dentro do
cdigo da pgina em si, antes do cabealho e, portanto, valero apenas para a pgina.
12. Ao optar pela segunda opo, Create New File, criar-se- um arquivo em separado, no
diretrio de seu site, apenas para os estilos, que poder ser aproveitado para as demais pginas.
96
13. A ltima opo, Link to Existing File, pressupe que voc j possui um arquivo de estilos
CSS e, portanto, deseja linkar a pgina que est criando a esse arquivo.
14. Selecione o template/sample que melhor se adaptar ao tipo de pgina que deseja criar, escolha a configurao de estilo CSS com a qual deseja trabalhar e clique em Create.
97
15. Caso voc tenha optado por criar um arquivo com os estilos CSS separadamente,
precisar indicar, em seguida, o local onde deseja salvar o arquivo, no diretrio do site.
16. Por ser uma nova pgina, voc pode ter problemas com a referncia de local da folha de
estilos CSS, portanto salve sua pgina tambm no diretrio principal do site.
98
17. Aproveite, tambm, para configurar um novo site na lista de profiles de sites do
Dreamweaver, para que voc possa enxergar toda a estrutura do site e administr-lo.
18. Se voc no conhece o caminho para configurar um novo site, simples. Basta acessar o menu principal em Sites, clicar na opo New Site e configur-lo.
99
19. Deste modo, ao selecionar o site por meio da combobox da janela Files, voc enxergar
toda a estrutura de seu site, inclusive o arquivo de estilos CSS e a nova pgina.
20. Note que o texto do site j uma explicao de como mont-lo, da mesma forma que
dentro do cdigo existem diversas observaes explicativas para cada seo.
100
21. Outros textos que parecem estar em latim (Lorem ipsum...) so reas em que voc
dever inserir o contedo do seu site, substituindo esse texto modelo.
22. Os ttulos e sees de textos do site j aparecem no cdigo- fonte com as codificaes de
semntica to importantes para a varredura do site pelos motores de busca (h1, h2 etc.).
101
23. Caso voc deseje modificar as configuraes de tipo de texto, por exemplo, basta abrir a
folha de estilos CSS que foi criada automaticamente e alterar as configuraes.
24. O mesmo serve para o esquema de cores e estruturas do site. Repare que as tags <div>,
que identificam as sees da tela do site, tm uma identificao (id=nome).
102
25. Com o nome cadastrado na identificao de uma determinada seo, voc pode
encontrar as configurao dessa seo na folha de estilos e alterar cor, tamanho etc.
26. Deste modo, voc pode adaptar todas as configuraes presentes na folha de estilos para
comear a deixar o site com a cara que voc deseja (cor, divises, fonte etc.).
103
27. Crie novas pginas e salve-as no mesmo diretrio de seu site para que voc possa linkar
os contedos e transformar o que era uma pgina em um site, um conjunto de pginas.
28. No se esquea de, ao criar novas pginas, relacionar o contedo delas ao arquivo de
folhas de estilo j existente. Ou ento crie um arquivo de estilo CSS para cada pgina.
104
29. Uma maneira de no bagunar as configuraes de estilo utilizar a pgina inicial como modelo, ou seja, utilizar o recurso Save as para criar as demais pginas.
30. Para vincular uma pgina outra, basta utilizar o recurso de criao de menu Spry, por meio do menu principal emInsert, Spry e selecionar a opo Spry Menu Bar.
105
106

Apostila Dreamweaver CS5

Caricato da

Informazioni sul documento

Descrizione originale:

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Apostila Dreamweaver CS5

Caricato da

Copyright:

Formati disponibili

Adobe Dreamweaver CS5 Web Design (Desenvolvedor Web)

Adobe Dreamweaver CS5

(Desenvolvimento e Ambientao de Aplicaes Web)

Adobe Dreamweaver CS5 Web Design (Desenvolvedor Web)

Capitulo 1 - Explorando a rea de trabalho.

O layout da rea de trabalho

Adobe Dreamweaver CS5 Web Design (Desenvolvedor Web)

Elementos da rea de trabalho do Dreamweaver

Adobe Dreamweaver CS5 Web Design (Desenvolvedor Web)

Adobe Dreamweaver CS5 Web Design (Desenvolvedor Web)

A barra de ferramentas do documento

(Mostrar visualizao do cdigo Code). (Mostrar visualizao do cdigo e do projeto Split)

Server Debug (Mostrar visualizao do projeto Design)

Opes de Exibio Titulo do Documento Visualizar no Navegador. Gerenciamento de Arquivos

Adobe Dreamweaver CS5 Web Design (Desenvolvedor Web)

A barra de ferramentas padro

Ferramenta Hand (Mo) Seletor de Tags Ferramenta Select (Selecionar)

Menu pop-up Window Size (Tamanho da janela)

Adobe Dreamweaver CS5 Web Design (Desenvolvedor Web)

A barra de ferramentas Coding

Adobe Dreamweaver CS5 Web Design (Desenvolvedor Web)

Alternar entre visualizaes na janela do documento

Utilize a barra de ferramentas do documento:

Clique no boto Show Code View.

Clique no boto Show Code and Design Views.

Clique no boto Show Design View.

Adobe Dreamweaver CS5 Web Design (Desenvolvedor Web)

Dispor janelas de documentos em cascata ou lado a lado

Redimensionar a janela do documento

Adobe Dreamweaver CS5 Web Design (Desenvolvedor Web)

Definir as preferncias da barra de status

Utilizar barras de ferramentas, inspetores e menus contextuais

Adobe Dreamweaver CS5 Web Design (Desenvolvedor Web)

Exibir barras de ferramentas

Utilizar a barra Insert

Exibir a barra Insert e respectivas categorias e menus

Selecione Window > Insert.

Adobe Dreamweaver CS5 Web Design (Desenvolvedor Web)

Para mostrar as categorias da barra Insert como guias:

Para mostrar as categorias da barra Insert como um menu:

Utilizar a barra Insert para inserir objetos

lado esquerdo da barra Insert, selecione a categoria adequada.

Adobe Dreamweaver CS5 Web Design (Desenvolvedor Web)

Para modificar as preferncias da barra Insert:

Adobe Dreamweaver CS5 Web Design (Desenvolvedor Web)

Personalizar e usar a categoria Favorites (Favoritos) da barra Insert

Se voc no estiver nessa categoria, selecione-a para ver as alteraes.

Para inserir objetos utilizando botes da categoria Favorites:

Utilizar o Property inspector

Adobe Dreamweaver CS5 Web Design (Desenvolvedor Web)

Para mostrar ou ocultar o Property inspector:

Selecione Window > Properties (Propriedades).

Para expandir ou reduzir o Property inspector:

Clique na seta de expanso no canto inferior direito do Property inspector.

Para exibir as propriedades de um elemento de pgina:

Na janela do documento, selecione o elemento de pgina.

2. Altere as propriedades no Property inspector.

Utilizar menus contextuais

Adobe Dreamweaver CS5 Web Design (Desenvolvedor Web)

2. Selecione um comando no menu contextual.

Utilizar painis e grupos de painis

Exibir painis e grupos de painis

Adobe Dreamweaver CS5 Web Design (Desenvolvedor Web)