Apostila Dreamweaver CS5

download Apostila Dreamweaver CS5

of 106

Transcript of Apostila Dreamweaver CS5

  • 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