Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
1 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
Adobe Dreamweaver CS5
(Web Design)
(Desenvolvimento e Ambientao de Aplicaes Web)
CENTRAL DE ATENDIMENTO
(81) 3542.1446
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
2 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.
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
3 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
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.
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
4 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
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.
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
5 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
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.
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.
(Mostrar visualizao do cdigo Code).
(Mostrar visualizao do cdigo e do projeto Split)
(Mostrar visualizao do projeto Design)
Server Debug Titulo do Documento
Verificao de Erros
Validar o Markup
Gerenciamento de Arquivos
Visualizar no Navegador.
Atualizar a visualizao
do projeto
Opes de Exibio
Auxlio Visuais.
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
6 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
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.
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 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
Seletor de Tags Ferramenta Select (Selecionar)
Ferramenta Hand (Mo)
Ferramenta Zoom
Ampliao Definida
Menu pop-up Window Size
(Tamanho da janela)
Tamanho do documento e tempo estimado
para download
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
7 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
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.
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
8 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
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.
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
9 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
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.
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
10 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
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.
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
11 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
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.
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
12 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
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:
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.
Nota
Talvez seja necessrio clicar na barra de ttulo da barra Insert para reabri-la.
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
13 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
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.
Para modificar as preferncias da barra Insert:
1. 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.
3. Clique em OK.
Nota
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.
Nota
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.
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
14 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
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. Selecione qualquer categoria na barra Insert.
2. 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.
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.
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.
Dic
a
Se voc no estiver nessa categoria, selecione-a para ver as alteraes.
No
ta
A categoria Favorites no conter boto algum at que voc a personalize para
adicionar objetos.
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
15 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
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.
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.
Em sua maioria, as alteraes que voc fizer nas propriedades sero imediatamente aplicadas janela do
documento.
3. 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.
No
ta
Talvez seja necessrio expandir o Property inspector para exibir todas as
propriedades do elemento selecionado.
No
ta
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.
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
16 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
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.
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
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.
No
ta 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.
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
17 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
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).
Para selecionar um painel dentro de um grupo expandido de painis:
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.
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.
Dic
as 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.
Dic
as 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
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
18 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
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.
Painel Arquivos Files.
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
19 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
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).
2. Digite um novo nome e, em seguida, clique em OK
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.
2. Selecione Panels na lista Category esquerda.
3. Selecione opes. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de
dilogo. 4. Clique em OK.
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
20 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
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.
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
21 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
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.
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
22 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
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.
1
2
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
23 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
Na maioria dos casos, as trs primeiras opes so suficientes. Se voc no tem acesso a nenhum
servidor Web, simplesmente escolha None.
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.
3
Remote Info: em alguns casos necessrio incluir login e senha
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
24 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
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.
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
4
Testing Server: Definio da tecnologia dinmica
utilizada.
Cloaking: Recurso til em sites com muitas imagens e
pastas.
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
25 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
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.
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.
5
6
7
Design Notes: Ferramentas para
desenvolvimento colaborativos
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
26 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
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
8
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
27 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
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
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.
4. 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.
Dic
as 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
No
ta 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.
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
28 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
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.
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.
Dic
a 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.
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
29 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
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.
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. Selecione File (Arquivo) > Save (Salvar).
2. Na caixa de dilogo exibida, navegue at a pasta onde deseja salvar o arquivo.
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.
Dic
a
Se voc acabou de criar o modelo que deseja aplicar, talvez seja preciso clicar no boto Refresh
(Atualizar) para visualiz-lo.
Dic
a
aconselhvel salvar seu arquivo em um site do Dreamweaver
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
30 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
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.
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
31 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
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.
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:
1. Selecione File (Arquivo) > Open (Abrir).
Dic
a
Voc tambm pode clicar no boto Preferences na caixa de dilogo New Document (Novo
documento) para definir as preferncias quando criar um novo documento
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
32 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
2. Navegue e selecione o arquivo a ser aberto.
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.
Dic
a
Tambm possvel utilizar o painel Files (Arquivos) para abrir arquivos.
Dic
a
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.
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
33 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
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.
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.
4. 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).
5. 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).
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.
No
ta
No Windows, feche o arquivo no Word para evitar uma violao de compartilhamento.
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
34 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
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
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
35 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
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
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
No
ta 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.
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
36 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
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).
No
ta
Para compartilhar as Design Notes, os usurios devero definir o mesmo caminho para a raiz do
site (por exemplo, sites/propriedades/orig).
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
37 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
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.
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.
No
ta 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.
No
ta
Se voc trabalhar em arquivos sem criar um site do Dreamweaver, no poder executar
operaes no site, como verificao de links.
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
38 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
Para configurar o Dreamweaver para trabalhar com um servidor na janela do documento:
1. Selecione Site > Manage Sites (Gerenciar Sites). A caixa de dilogo Manage Sites exibida.
2. Clique em New (Novo) e, em seguida, selecione FTP & RDS Servers (Servidores FTP e RDS). A
caixa de dilogo Configure Server (Configurar servidor) exibida.
3. Preencha a caixa de dilogo.
Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
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:
1. 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.
No
ta
Voc s precisar preencher essa caixa de dilogo uma vez para cada servidor ao qual deseja se
conectar.
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
39 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
3. Preencha a caixa de dilogo. Para obter mais informaes, clique no boto Help (Ajuda) da
caixa de dilogo
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.
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.
No
ta
Voc s precisar preencher essa caixa de dilogo uma vez para cada servidor ao qual deseja se
conectar.
No
ta
No caso de pastas grandes, pode levar alguns minutos para que o painel Files exiba a pasta.
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
40 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
Para alterar a visualizao do site no painel Files, siga um destes procedimentos (somente sites do Dreamweaver):
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).
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.
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):
No
ta 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.
No
ta
Como padro, Local View aparecer nesse menu pop-up..
Site Files (Arquivos do site)
Site Map (Mapa do site)
Testing Server (Servidor de teste)
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
41 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
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.
No
ta
Clique no cabealho novamente para inverter a ordem (ascendente ou descendente) de acordo
com a qual o Dreamweaver ordenar a coluna.
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
42 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
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.
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.
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.
No
ta
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.
Dic
as 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),
No
ta 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
No
ta
As camadas, conforme descrito neste captulo referem-se ao conceito de layout do
Dreamweaver, no tag layer.
Adobe Dreamweaver CS5
Web Design (Desenvolvedor Web)
43 Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado!
www.conexaocursos.com
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.
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 Pr