1136
Usando o Dreamweaver

Biblia. dreamweaver.8

Embed Size (px)

DESCRIPTION

Criação de web master.

Citation preview

para selecionar o corpo inteiro do documento. Para definir os atributos class ou id de uma tag, no seletor de tags, clique com o boto direito do mouse (no Windows) ou pressione Ctrl e clique na tag (no Macintosh) e selecione uma classe ou identificao no menu contextual. A ferramenta Hand permite que voc clique no documento e arraste-o na janela do documento. Clique na ferramenta Select para desativar a ferramenta Hand. A ferramenta Zoom e o menu pop-up Set Magnification (Definir ampliao) permitem que voc defina um nvel de ampliao para o documento. Para obter mais informaes, consulte Aplicar zoom na pgina 389. O menu pop-up Window Size (visvel apenas na visualizao do projeto) permite redimensionar a janela do documento para um tamanho predeterminado ou personalizado. Para obter mais informaes, consulte Redimensionar a janela do documento na pgina 58. 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. Para obter mais informaes, consulte Definir preferncias de tamanho e tempo de download na pgina 402. Tpicos relacionados Definir as preferncias da barra de status na pgina 59 Tamanho do documento e tempo estimado para download Seletor de tags Menu pop-up Window Size (Tamanho da janela) Ampliao definida Ferramenta Zoom Ferramenta Hand (Mo) Ferramenta Select (Selecionar) 50. Sobre a rea de trabalho do Dreamweaver 51 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 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. NOTA Se preferir exibir as categorias como guias na parte superior da barra Insert, altere o layout da barra Insert (consulte Definir as preferncias de fontes para a exibio do Dreamweaver na pgina 82). 51. 52 Explorar a rea de trabalho As categorias de cdigo do servidor esto disponveis apenas para as pginas que utilizam determinada linguagem de servidor, como ASP, ASP.NET, CFML Basic, CFML Flow, CFML Advanced, JSP e PHP. Cada uma dessas categorias fornece objetos de cdigo do servidor que podem ser inseridos na visualizao do cdigo. 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 Macromedia Flash. A categoria Favorites (Favoritos) permite agrupar e organizar em um nico local os botes da barra Insert mais utilizados. possvel modificar qualquer objeto na barra Insert ou criar seus prprios objetos. Consulte Customizing Dreamweaver (Personalizao do Dreamweaver) no Centro de Suporte da Macromedia, em www.macromedia.com/go/customizing_dreamweaver. Tpicos relacionados Utilizar a barra Insert na pgina 61 52. Sobre a rea de trabalho do Dreamweaver 53 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. No possvel desencaixar nem mover a barra de ferramentas Coding, mas voc pode ocult- la. Para obter mais informaes, consulte Exibir barras de ferramentas na pgina 60. 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. Para obter mais informaes, consulte Extending Dreamweaver (Extenso dos recursos do Dreamweaver). Tpicos relacionados Inserir cdigo rapidamente com a barra de ferramentas Coding (Codificao) na pgina 617 Exibir barras de ferramentas na pgina 60 53. 54 Explorar a rea de trabalho A barra de ferramentas Style Rendering A barra de ferramentas Style Rendering (oculta por padro) contm botes que possibilitam ver como ficaria o projeto com tipos de mdia diferentes, se voc usasse folhas de estilo dependentes de mdia. Ela tambm contm um boto que permite ativar ou desativar estilos CSS. Para exibir a barra de ferramentas padro, selecione View > Toolbars > Style Rendering. Esta barra de ferramentas s funciona se os documentos utilizarem folhas de estilo dependentes de mdia. Por exemplo, sua folha de estilo poderia especificar uma regra body para impresso e uma regra body diferente para dispositivos portteis. Para obter mais informaes sobre a criao de folhas de estilo dependentes de mdia, consulte o site do World Wide Web Consortium em www.w3.org/TR/CSS21/media.html. Por padro, o Dreamweaver exibe seu projeto para o tipo de mdia de tela (que mostra como uma pgina apresentada em uma tela de computador). Voc pode visualizar as apresentaes de tipo de mdia a seguir, clicando nos respectivos botes na barra de ferramentas Style Rendering. Render Screen Media Type (Apresentar tipo de mdia de tela) mostra a aparncia da pgina em uma tela de computador. Render Print Media Type (Apresentar tipo de mdia de impresso) mostra a aparncia da pgina impressa em uma folha de papel. Render Handheld Media Type (Apresentar tipo de mdia porttil) mostra a aparncia da pgina em um dispositivo porttil, como um telefone celular ou um dispositivo BlackBerry. Render Projection Media Type (Apresentar tipo de mdia de projeo)mostra a aparncia da pgina em um dispositivo de projeo. Render TTY Media Type (Apresentar tipo de mdia TTY) mostra a aparncia da pgina em uma mquina teletipo. Render TV Media Type (Apresentar tipo de mdia TV) mostra a aparncia da pgina em uma tela de televiso. Toggle Displaying of CSS Styles (Alternar exibio de estilos CSS) permite ativar ou desativar estilos CSS. O funcionamento deste boto no depende de outros botes de mdia. Tpicos relacionados Exibir barras de ferramentas na pgina 60 54. Sobre a rea de trabalho do Dreamweaver 55 Relatrios no Dreamweaver Voc pode executar relatrios no Dreamweaver para localizar ou testar o contedo, ou para solucionar problemas. Voc pode gerar os seguintes tipos de relatrio: Search (Busca) permite procurar tags, atributos e texto especfico em tags. Para procurar seu cdigo, consulte Procurar e substituir tags e atributos na pgina 628. Validation (Validao) permite verificar erros de cdigo ou sintaxe. Para validar seu cdigo, consulte Validar tags na pgina 639. Target Browser Check (Verificao de navegador de destino) permite testar o HTML nos documentos para ver se as tags ou os atributos no so suportados pelos navegadores de destino. Para executar uma verificao de navegador de destino, consulte Verificar a compatibilidade com navegadores na pgina 635. Link Checker (Verificador de links) permite localizar e corrigir links rompidos, externos e rfos. Para executar o verificador de links, consulte Verificar links rompidos, externos e rfos na pgina 491. Site Reports (Relatrios de site) permite melhorar o fluxo de trabalho e testar os atributos HTML no site. Os relatrios de fluxo de trabalho incluem Checked Out By (Retirado por), Recently Modified (Modificado recentemente) e Design Notes. Os relatrios HTML incluem Combinable Nested Font Tags (Tags combinveis de fontes aninhadas), Accessibility (Acessibilidade), Missing Alt Text (Texto alternativo ausente), Redundant Nested Tags (Tags aninhadas redundantes), Removable Empty Tags (Tags vazias removveis) e Untitled Documents (Documentos sem ttulo). Para executar relatrios de site, consulte Testar o site na pgina 171. FTP Log (Registro de FTP) permite exibir todas as atividades de transferncia de arquivos por FTP. Para exibir o registro de FTP, consulte Obter arquivos de um servidor remoto na pgina 156 ou Colocar arquivos em um servidor remoto na pgina 157. Server Debug permite exibir informaes para depurar um aplicativo ColdFusion. Para exibir informaes de depurao, consulte Usar o depurador ColdFusion (somente no Windows) na pgina 641. Sobre a personalizao do Dreamweaver em sistemas multiusurio Voc pode personalizar o Dreamweaver para adequ-lo s suas necessidades at mesmo em um sistema operacional multiusurio, como o Windows XP ou o Mac OS X. 55. 56 Explorar a rea de trabalho O Dreamweaver impede que a configurao personalizada de um usurio afete a configurao personalizada de outros usurios. Para que isso ocorra, na primeira execuo do Dreamweaver em um sistema operacional multiusurio que o reconhea, o aplicativo criar cpias de vrios arquivos de configurao para voc. Estes arquivos de configurao do usurio so armazenados em uma pasta. No Windows XP, por exemplo, eles so armazenados em C:Documents and SettingsusernameApplication DataMacromediaDreamweaver 8Configuration (que pode estar dentro de uma pasta oculta). No Mac OS X, eles so armazenados na pasta principal, especificamente em Users/username/ Library/Application Support/Macromedia/Dreamweaver 8/Configuration. Se o Dreamweaver for reinstalado ou atualizado, o Dreamweaver far automaticamente cpias de segurana dos arquivos de configurao do usurio existentes de modo que, se eles tiverem sido personalizados manualmente, o usurio ainda tenha acesso s alteraes efetuadas. Tpicos relacionados Dreamweaver conceitos bsicos de personalizao Trabalhar na janela do documento A janela do documento mostra o documento que est aberto. Voc pode exibir um documento na visualizao do projeto, na visualizao do cdigo ou em ambas. A barra de status da janela do documento apresenta informaes sobre o documento atual. Tpicos relacionados A janela do documento na pgina 47 A barra de status na pgina 50 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). 56. Trabalhar na janela do documento 57 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. Para alternar entre a visualizao do cdigo e a visualizao do projeto: Pressione Control+til (~), no Windows, ou Command+aspa simples (), no Macintosh. Tpicos relacionados A janela do documento na pgina 47 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: No Windows, selecione Window > Tile Horizontally (Lado a lado horizontalmente) ou Window > Tile Vertically (Lado a lado verticalmente). No Macintosh, selecione Window > Tile. Tpicos relacionados Escolher o layout de rea de trabalho (no Windows) na pgina 78 Exibir documentos com guias (Macintosh) na pgina 79 Salvar layouts personalizados da rea de trabalho na pgina 80 NOTA Se as duas visualizaes forem exibidas na janela do documento, esse atalho de teclado mudar o foco do teclado de uma visualizao para a outra. 57. 58 Explorar a rea de trabalho 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. 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. NOTA No Windows, voc pode maximizar uma janela de documento para que ela preencha totalmente a rea do documento da janela integrada. Voc no pode redimensionar uma janela do documento quando ela est maximizada. DICA Para redimensionar manualmente, utilize os mtodos padro do sistema operacional de ajuste de janelas, como, por exemplo, arrastar o canto inferior direito da janela. 58. Utilizar barras de ferramentas, inspetores e menus contextuais 59 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. Tpicos relacionados A barra de status na pgina 50 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. 59. 60 Explorar a rea de trabalho 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. 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. Tpicos relacionados A barra de ferramentas do documento na pgina 48 A barra de ferramentas padro na pgina 49 A barra de ferramentas Coding na pgina 53 A barra de ferramentas Style Rendering na pgina 54 NOTA possvel tambm utilizar o Tag inspector (Inspetor de tags) para exibir e editar propriedades (consulte Alterar atributos com o Tag inspector (Inspetor de tags) na pgina 644). O Tag inspector permite exibir e editar todos os atributos associados a uma determinada tag, enquanto o Property inspector mostra apenas os atributos mais comuns. NOTA Para exibir ou ocultar a barra de ferramentas Coding no Code inspector (Inspetor de cdigo, Window > Code Inspector), selecione Coding Toolbar (Barra de Ferramentas Coding) no menu pop-up View Options localizado na parte superior do inspetor. 60. Utilizar barras de ferramentas, inspetores e menus contextuais 61 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. Tpicos relacionados A barra Insert na pgina 51 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. 61. 62 Explorar a rea de trabalho 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. Tpicos relacionados Personalizar e usar a categoria Favorites (Favoritos) da barra Insert na pgina 64 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. 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. NOTA Talvez seja necessrio clicar na barra de ttulo da barra Insert para reabri-la. 62. Utilizar barras de ferramentas, inspetores e menus contextuais 63 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 (consulte Editar tags utilizando Tag editors (Editores de tags) na pgina 621) 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. NOTA Alguns objetos, como as ncoras com nome, no so visveis quando a pgina exibida na janela do navegador. Na visualizao do projeto, para exibir os cones que marcam a localizao desses objetos invisveis, consulte Mostrar e ocultar elementos invisveis na pgina 388. 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. DICA 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. 63. 64 Explorar a rea de trabalho 3. Clique em OK. Tpicos relacionados Exibir a barra Insert e respectivas categorias e menus na pgina 61 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. Tpicos relacionados Exibir a barra Insert e respectivas categorias e menus na pgina 61 Utilizar a barra Insert para inserir objetos na pgina 62 DICA Se voc no estiver nessa categoria, selecione-a para ver as alteraes. NOTA A categoria Favorites no conter boto algum at que voc a personalize para adicionar objetos. 64. Utilizar barras de ferramentas, inspetores e menus contextuais 65 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. 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. NOTA Utilize o Tag inspector para exibir e editar todos os atributos associados s propriedades de determinada tag (consulte Alterar atributos com o Tag inspector (Inspetor de tags) na pgina 644). DICA Por padro, o Property inspector fica localizado na parte inferior da rea de trabalho, mas voc poder encaix-lo na parte superior da rea de trabalho, se quiser. Voc tambm pode torn-lo um painel flutuante na rea de trabalho. Para obter mais informaes sobre como mover o Property inspector, consulte Encaixar e desencaixar painis e grupos de painis na pgina 68. NOTA Talvez seja necessrio expandir o Property inspector para exibir todas as propriedades do elemento selecionado. NOTA 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. 65. 66 Explorar a rea de trabalho 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. 2. Selecione um comando no menu contextual. 66. Utilizar painis e grupos de painis 67 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. 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. NOTA 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. DICA 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. 67. 68 Explorar a rea de trabalho 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. 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. DICA 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. 68. Utilizar painis e grupos de painis 69 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. 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. 69. 70 Explorar a rea de trabalho 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. Para obter mais informaes, consulte Salvar layouts personalizados da rea de trabalho na pgina 80. 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. Utilizar os recursos de acessibilidade do Dreamweaver O Dreamweaver fornece recursos que o tornam acessvel aos usurios com deficincias. Especificamente, o Dreamweaver oferece suporte a leitoras de tela, recursos de acessibilidade do sistema operacional e navegao por teclado. Tpicos relacionados Dreamweaver e acessibilidade na pgina 33 70. Utilizar os recursos de acessibilidade do Dreamweaver 71 Utilizar as leitoras de tela com o Dreamweaver Uma leitora de tela relaciona o texto exibido na tela do computador. Ela tambm l as informaes no textuais, tais como identificadores de boto ou descries de imagem no aplicativo, fornecidas nas guias de acessibilidade ou atributos durante a autoria. Como usurio do Dreamweaver, possvel utilizar uma leitora de tela para auxili-lo na criao de pginas da Web. A leitora de tela inicia a leitura no canto superior esquerdo da janela do documento. O Dreamweaver suporta as leitoras de tela JAWS for Windows da Freedom Scientific (www.freedomscientific.com) e Window-Eyes da GW Micro (www.gwmicro.com). Tpicos relacionados Utilizao do teclado para navegar Dreamweaver na pgina 72 Suporte para recursos de acessibilidade do sistema operacional O Dreamweaver suporta recursos de acessibilidade nos sistemas operacionais Windows e Macintosh. Por exemplo, no Macintosh, voc define as preferncias visuais na caixa de dilogo Universal Access Preferences (Preferncias de acesso universal) (Apple > System Preferences [Preferncias de sistema]). Suas definies so refletidas na rea de trabalho do Dreamweaver. O Dreamweaver tambm suporta a definio de alto contraste do sistema operacional Windows. O usurio ativa esta opo por meio do Painel de Controle do Windows. Quando o alto contraste est ativado, ele afeta o Dreamweaver da seguinte maneira: As caixas de dilogo e os painis utilizam as definies de cor do sistema. Por exemplo: se voc definir a cor como branco ou preto, todas as caixas de dilogo e painis do Dreamweaver sero exibidos com uma cor de primeiro plano branca e de segundo plano preta. A sinalizao da sintaxe por cores da visualizao do cdigo est desativada. A visualizao do cdigo utiliza a janela do sistema e a cor do texto da janela, e ignora as definies de cor em Preferences. Por exemplo, se voc definir a cor do sistema como branco sobre preto e alterar as cores do texto em Preferences > Code Coloring (Codificao por cores), o Dreamweaver ignorar a definio de cores em Preferences e exibir o texto do cdigo com uma cor branca em primeiro plano e preta em segundo plano. 71. 72 Explorar a rea de trabalho A visualizao do projeto utiliza as cores de segundo plano e de texto definidas em Modify (Modificar) > Page Properties (Propriedades de pgina) para que o projeto das pginas processe as cores como um navegador. Tpicos relacionados Utilizar as leitoras de tela com o Dreamweaver na pgina 71 Utilizao do teclado para navegar Dreamweaver possvel utilizar o teclado para navegar por painis, inspetores, caixas de dilogo, quadros e tabelas do Dreamweaver em vez de usar o mouse. Tpicos relacionados Utilizar as leitoras de tela com o Dreamweaver na pgina 71 Suporte para recursos de acessibilidade do sistema operacional na pgina 71 Painis de navegao possvel utilizar o teclado para navegar nos painis Para navegar nos painis: 1. Na janela do documento, pressione Control+Alt+Tab para mudar o foco para um painel. Um contorno branco em torno da barra de ttulos do painel indica que o foco est nesse painel. A leitora de tela l a barra de ttulos do painel que est no foco. 2. Pressione Control+Alt+Tab novamente para mudar o foco para o prximo painel. Continue at ter o foco no painel com o qual deseja trabalhar. 3. Pressione Control+Alt+ Shift+Tab para mudar o foco para o painel anterior, se necessrio. 4. Se o painel desejado no estiver aberto, utilize os atalhos de teclado listados no menu Windows (Janelas) para exibir o painel apropriado e pressione Control+Alt+Tab para mudar o foco para esse painel. Se o painel desejado estiver aberto, mas no expandido, coloque o foco na barra de ttulo do painel e pressione a barra de espao. Pressione a barra de espao novamente para reduzir o painel. 5. Pressione a tecla Tab para percorrer as opes no painel. Um contorno pontilhado em torno da opo indica que o foco est nessa opo. NOTA A utilizao de tabulao e teclas de setas suportada somente pelo Windows. 72. Utilizar os recursos de acessibilidade do Dreamweaver 73 6. Utilize as teclas de seta quando apropriado. Se uma opo contiver outras opes, utilize as teclas de seta para percorrer as opes e pressione a barra de espao para fazer uma seleo. Se houver guias no grupo de painel para abrir outros painis, coloque o foco na guia aberta e utilize a tecla de seta para a esquerda ou para a direita para abrir outras guias. Ao abrir uma nova guia, pressione a tecla Tab para percorrer as opes nesse painel. Tpicos relacionados Navegar em caixas de dilogo na pgina 74 Navegar em quadros na pgina 74 Navegar nas tabelas na pgina 75 Navegar no Property inspector possvel utilizar o teclado para navegar no Property inspector e fazer alteraes no documento. Para navegar no Property inspector: 1. Pressione Control+F3 (no Windows) ou Command+F3 (no Macintosh) para exibir o Property inspector, se ele ainda no estiver visvel. 2. (Windows) Pressione Control+Alt+Tab at mudar o foco para o Property inspector. 3. Pressione a tecla Tab para percorrer as opes do Property inspector. 4. (Windows) Utilize as teclas de seta conforme apropriado para percorrer as opes. 5. Pressione Control+Tab (no Windows) ou Option+Tab (no Macintosh) para abrir e fechar a seo expandida do Property inspector quando necessrio. Ou, com o foco na seta de expanso na parte inferior direita, pressione a barra de espao. Tpicos relacionados Painis de navegao na pgina 72 Navegar em quadros na pgina 74 Navegar nas tabelas na pgina 75 NOTA A utilizao das teclas de setas suportada somente pelo Windows. 73. 74 Explorar a rea de trabalho Navegar em caixas de dilogo possvel utilizar o teclado para navegar nas caixas de dilogo. Para navegar em uma caixa de dilogo: 1. Pressione a tecla Tab para percorrer as opes em uma caixa de dilogo. 2. (Windows) Utilize as teclas de setas para percorrer as opes de uma opo. Por exemplo, se uma opo tem um menu pop-up, mova o foco para essa opo e utilize a seta para baixo para percorrer as opes. 3. Se a caixa de dilogo tem uma lista de categorias, pressione Control+Tab (no Windows) ou Option+Tab (no Macintosh) para mudar o foco para a lista de categorias e utilize as teclas de seta para mover-se para cima ou para baixo na lista. 4. Pressione Control+Tab (no Windows) ou Option+Tab (no Macintosh) novamente para mudar as opes de uma categoria. 5. Pressione Enter (no Windows) ou Return (no Macintosh) para sair da caixa de dilogo. Tpicos relacionados Painis de navegao na pgina 72 Navegar no Property inspector na pgina 73 Navegar nas tabelas na pgina 75 Navegar em quadros Se o documento contm quadros, possvel utilizar as teclas de seta para mudar o foco para um quadro. Para selecionar um quadro: 1. Coloque o ponto de insero na janela do documento. 2. Pressione Alt+Seta para Cima, para selecionar o quadro que atualmente est no foco. Uma linha pontilhada indica o quadro que est no foco. 3. Continue pressionando Alt+Seta para Cima para mudar o foco para o conjunto de quadros e, em seguida, conjuntos de quadros pai, se houver conjuntos de quadros aninhados. NOTA A utilizao das teclas de setas suportada somente pelo Windows. NOTA A utilizao das teclas de setas suportada somente pelo Windows. 74. Utilizar os recursos de acessibilidade do Dreamweaver 75 4. Pressione Alt+Seta para Baixo, para mudar o foco para um conjunto de quadros filho ou um nico quadro no conjunto de quadros. 5. Com o foco em um nico quadro, pressione Alt+Seta para a Esquerda ou para a Direita para percorrer os quadros. 6. Pressione Alt+Seta para a Direita para colocar o ponto de insero na janela do documento. Tpicos relacionados Painis de navegao na pgina 72 Navegar no Property inspector na pgina 73 Navegar em caixas de dilogo na pgina 74 Navegar nas tabelas Aps selecionar uma tabela, possvel utilizar o teclado para navegar nela. Para navegar em uma tabela: 1. Utilize as teclas de setas ou pressione Tab para percorrer as outras clulas da tabela quando necessrio. 2. Para selecionar uma clula, pressione Control+A (no Windows) ou Command+A (Macintosh) enquanto o ponto de insero est na clula. 3. Para selecionar uma tabela, pressione Control+A (no Windows) ou Command+A (Macintosh) duas vezes se o ponto de insero estiver em uma clula, ou uma vez se uma clula estiver selecionada. 4. Para sair da tabela, pressione Control+A (no Windows) ou Command+A (no Macintosh) trs vezes se o ponto de insero estiver em uma clula, duas vezes se a clula estiver selecionada ou uma vez se a tabela estiver selecionada, e depois pressione a tecla de seta para cima, para a esquerda, para a direita ou para baixo. Tpicos relacionados Painis de navegao na pgina 72 Navegar no Property inspector na pgina 73 Navegar em caixas de dilogo na pgina 74 Navegar em quadros na pgina 74 DICA Quando a tecla de tabulao for pressionada na clula mais direita, ser adicionada automaticamente outra linha tabela. 75. 76 Explorar a rea de trabalho Otimizar a rea de trabalho para o projeto de pgina acessvel Ao criar pginas acessveis, necessrio associar informaes, tais como identificadores e descries, aos objetos da pgina para tornar o contedo acessvel a todos os usurios. Para fazer isso, ative a caixa de dilogo Accessibility para cada objeto, de modo que o Dreamweaver solicite informaes sobre acessibilidade quando voc inserir objetos. possvel ativar a caixa de dilogo para cada um dos objetos na categoria Accessibility em Preferences (Preferncias). Para ativar as caixas de dilogo Accessibility: 1. Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh). A caixa de dilogo Preferences ser exibida. 2. Na lista Category (Categoria), esquerda, selecione Accessibility. A caixa de dilogo Preferences exibe as opes de acessibilidade. 3. Selecione os objetos para os quais voc deseja ativar caixas de dilogo Accessibility. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. NOTA Os atributos de acessibilidade aparecem automaticamente na caixa de dilogo Insert Table (Inserir tabela) quando voc insere uma nova tabela. 76. Utilizar guias visuais no Dreamweaver 77 4. Clique em OK. Para cada objeto selecionado, uma caixa de dilogo Accessibility solicita a digitao de atributos e tags de acessibilidade quando voc insere o objeto em um documento. Tpicos relacionados Dreamweaver e acessibilidade na pgina 33 Inserir uma imagem na pgina 448 Validar dados de formulrio HTML na pgina 902 Criar quadros e conjuntos de quadros na pgina 309 Inserir e editar um objeto de mdia na pgina 518 Inserir uma tabela e adicionar contedo na pgina 260 Utilizar guias visuais no Dreamweaver O Dreamweaver fornece diversos tipos de guias visuais para auxili-lo a projetar os documentos e prever (aproximadamente) a aparncia que eles tero nos navegadores. possvel executar qualquer um destes procedimentos: Ajustar instantaneamente a janela do documento ao tamanho desejado para ver como os elementos se ajustam pgina. Consulte Redimensionar a janela do documento na pgina 58. Utilizar uma imagem de rastreamento como o fundo da pgina para ajudar a duplicar um projeto criado em um aplicativo de edio de imagens ou ilustraes, como o Macromedia Fireworks. Consulte Utilizar uma imagem de rastreamento na pgina 254. Utilizar as rguas e guias para que sirvam como um guia visual ao posicionar e redimensionar com preciso elementos de pgina. Consulte Utilizar rguas, guias e grades para definir o layout de pginas na pgina 250. Utilizar a grade para posicionar e redimensionar as camadas com preciso. Consulte Utilizar a grade na pgina 253. As marcas da grade exibidas na pgina ajudam a alinhar as camadas e, quando o encaixe for ativado, as camadas sero encaixadas automaticamente no ponto de grade mais prximo ao serem redimensionadas ou movidas (outros objetos, como imagens e pargrafos, no se encaixam na grade). O encaixe funcionar independentemente da visibilidade da grade. 77. 78 Explorar a rea de trabalho Dreamweaver conceitos bsicos de personalizao Existem algumas tcnicas bsicas que podem ser utilizadas para personalizar o Dreamweaver, de modo a adequ-lo s suas necessidades, sem precisar conhecer cdigos complexos ou saber como editar arquivos de texto. Por exemplo, voc pode alterar o layout da rea de trabalho, ocultar ou exibir a pgina inicial, definir preferncias, criar seus prprios atalhos de teclado e adicionar extenses ao Dreamweaver. Para obter informaes sobre como personalizar o layout dos painis na rea de trabalho, consulte Utilizar painis e grupos de painis na pgina 67. Esta seo descreve somente as opes mais comuns das preferncias. Para obter informaes sobre uma opo especfica das preferncias no includa aqui, consulte o tpico correspondente em Usando o Dreamweaver. Tpicos relacionados Sobre a personalizao do Dreamweaver em sistemas multiusurio Extending Dreamweaver Escolher o layout de rea de trabalho (no Windows) No Windows, possvel escolher entre os layouts Designer e Coder da rea de trabalho. Quando voc inicia o Dreamweaver pela primeira vez, possvel escolher um layout para a rea de trabalho em uma caixa de dilogo. possvel alternar para uma outra rea de trabalho a qualquer momento. Para escolher um layout da rea de trabalho na primeira vez que voc iniciar o Dreamweaver: 1. Selecione um dos seguintes layouts: Designer uma rea de trabalho integrada que utiliza a interface de mltiplos documentos (MDI), na qual todas as janelas de documento e painis esto integrados em uma janela de aplicativo maior, com os grupos de painis encaixados direita. NOTA Para obter informaes sobre como personalizar arquivos de configurao manualmente, consulte Customizing Dreamweaver no centro de suporte da Macromedia em www.macromedia.com/go/customizing_dreamweaver. 78. Dreamweaver conceitos bsicos de personalizao 79 Coder consiste na mesma rea de trabalho integrada. No entanto, os grupos de painis esto encaixados esquerda apresentando um layout semelhante ao utilizado pelo Macromedia HomeSite e pelo Macromedia ColdFusion Studio e a janela do documento mostra a visualizao do cdigo como padro. 2. Clique em OK. Para alternar para uma rea de trabalho diferente da que foi escolhida: Selecione Window > Workspace Layout (Layout da rea de trabalho) e selecione seu layout preferido para a rea de trabalho. Alm de selecionar Coder e Designer, possvel selecionar Dual Screen Right (Monitor secundrio direita) ou Dual Screen Left (Monitor secundrio esquerda). Se voc tiver um monitor secundrio direita do monitor principal, a opo Dual Screen Right far com que todos os painis sejam exibidos no monitor da direita e manter a janela do documento no monitor principal. Se voc tiver um monitor secundrio esquerda do monitor principal, a opo Dual Screen Left far com que todos os painis sejam exibidos no monitor da esquerda e manter a janela do documento no monitor principal. Tpicos relacionados O layout da rea de trabalho na pgina 44 Salvar layouts personalizados da rea de trabalho na pgina 80 Dispor janelas de documentos em cascata ou lado a lado na pgina 57 Exibir documentos com guias (Macintosh) No Macintosh, o Dreamweaver pode exibir vrios documentos em uma nica janela de documento, utilizando guias para identificar cada documento. O Dreamweaver tambm pode exibi-los como parte de uma rea de trabalho flutuante, na qual cada documento aparece na sua prpria janela. Para abrir um documento com guias em uma janela separada: Clique com o boto direito do mouse (no Windows) ou clique com a tecla Control pressionada (no Macintosh) e, em seguida, selecione New Window (Nova janela) no menu contextual. Para combinar documentos separados em janelas com guias: Selecione Window (Janela) > Combine as Tabs (Combinar como guias). NOTA possvel encaixar grupos de painis em qualquer lados da rea de trabalho em qualquer dos layouts. 79. 80 Explorar a rea de trabalho Para alterar a definio padro de documento com guias: 1. Selecione Dreamweaver > Preferences (Preferncias) e depois selecione a categoria General (Geral). 2. Marque ou desmarque Open Documents in Tabs (Abrir documentos em guias) e clique em OK. Tpicos relacionados O layout da rea de trabalho na pgina 44 Dispor janelas de documentos em cascata ou lado a lado na pgina 57 Salvar layouts personalizados da rea de trabalho O Dreamweaver permite salvar e restaurar conjuntos de painis diferentes, de modo que voc possa personalizar sua rea de trabalho para 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. Para salvar um layout personalizado da rea de trabalho: 1. Organize os painis como desejar. 2. Selecione Window (Janela) > Workspace Layout (Layout da rea de trabalho) > Save Current (Salvar atual). 3. Digite um nome para o layout e clique em OK. Para alternar para um outro layout personalizado da rea de trabalho: Selecione Window > Workspace Layout e selecione seu layout personalizado. Para renomear ou excluir um layout personalizado da rea de trabalho: 1. Selecione Window > Workspace Layout > Manage (Gerenciar). 2. Selecione um layout e siga um dos procedimentos abaixo: Para renomear um layout, clique no boto Rename (Renomear), digite um novo nome de layout e clique em OK. Para excluir um layout, clique no boto Delete (Excluir). NOTA O Dreamweaver no altera a exibio dos documentos que esto abertos quando voc altera as preferncias. No entanto, os documentos que forem abertos depois que voc selecionar uma nova preferncia sero exibidos de acordo com a preferncia selecionada. 80. Dreamweaver conceitos bsicos de personalizao 81 3. Clique em OK. Tpicos relacionados Utilizar painis e grupos de painis na pgina 67 Escolher o layout de rea de trabalho (no Windows) na pgina 78 Exibir documentos com guias (Macintosh) na pgina 79 Ocultar e exibir a pgina inicial A pgina inicial do Dreamweaver aparece quando voc inicia o Dreamweaver e quando no h documentos abertos. Voc pode optar por ocultar a pgina inicial e, mais tarde, exibi-la novamente. Quando a pgina inicial estiver oculta e no houver documentos abertos, a janela do documento estar em branco. Para ocultar a pgina inicial: Marque a caixa de seleo Dont Show Again (No mostrar novamente) na pgina inicial. A pgina inicial no ser exibida quando voc iniciar o Dreamweaver ou depois que voc abrir e fechar um documento. Para exibir a pgina inicial: 1. Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh). A caixa de dilogo Preferences ser exibida com a categoria de preferncias General (Geral). 2. Marque a caixa de seleo Show Start Page (Mostrar pgina inicial). A pgina inicial ser exibida quando voc iniciar o Dreamweaver ou depois que abrir e fechar um documento. Definir as preferncias gerais para o Dreamweaver As preferncias gerais controlam a aparncia do Dreamweaver como um todo. Para alterar as preferncias gerais: 1. Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh). A caixa de dilogo Preferences ser exibida com a categoria de preferncias General (Geral). NOTA Voc pode definir o Dreamweaver para abrir o ltimo documento em que estava trabalhando toda vez que for iniciado. Para obter mais informaes, consulte Definir as preferncias gerais para o Dreamweaver na pgina 81. 81. 82 Explorar a rea de trabalho 2. Defina as opes de preferncias. Para obter mais informaes, clique em Help. 3. Clique em OK. Definir as preferncias de fontes para a exibio do Dreamweaver A codificao do documento determina como ele ser exibido em um navegador. As preferncias de fontes do Dreamweaver permitem mostrar determinada codificao utilizando a fonte e o tamanho preferidos, sem afetar a aparncia do documento quando visualizado por outras pessoas em um navegador. Para definir as fontes a serem utilizadas no Dreamweaver para cada tipo de codificao: 1. Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh). A caixa de dilogo Preferences (Preferncias) ser exibida. 2. Na lista Category (Categoria), esquerda, selecione Fonts (Fontes). 3. Selecione o tipo de codificao, como Western (Latin1) (Ocidental [Latim1]) ou Japanese (Japons), na lista Font Settings (Definies de fontes). Em seguida, nos menus pop-up de fontes situados abaixo da lista Font Settings, escolha as fontes a serem utilizadas no Dreamweaver para essa codificao. Para obter mais informaes, clique em Help. 4. Clique em OK. Tpicos relacionados Codificao de documentos na pgina 379 NOTA As fontes selecionadas no afetam a aparncia do documento no navegador de um visitante. 82. Dreamweaver conceitos bsicos de personalizao 83 Personalizao de atalhos de teclado Utilize o Keyboard Shortcut Editor (Editor de atalhos de teclado) para criar suas prprias teclas de atalho, incluindo atalhos de teclado para trechos de cdigo. Voc pode tambm remover atalhos, editar atalhos j existentes e selecionar um conjunto predeterminado de atalhos no Keyboard Shortcut Editor. Para personalizar os atalhos de teclado: 1. Selecione Edit > Keyboard Shortcuts (Atalhos de teclado, no Windows) ou Dreamweaver > Keyboard Shortcuts (no Macintosh). Ser exibida a caixa de dilogo Keyboard Shortcuts. 2. Adicionar, excluir ou editar atalhos de teclado. Para obter mais informaes, clique em Help. 3. Clique em OK. NOTA Um diagrama com todos os atalhos de teclado da configurao padro do Dreamweaver est disponvel como guia de referncia rpida no site da Macromedia na Web, em www.macromedia.com/go/dw_documentation. Duplicate Set (Conjunto duplicado), boto Rename Set (Renomear conjunto), boto Delete Set (Excluir conjunto), boto Export Set as HTML (Exportar conjunto como HTML), boto 83. 84 Explorar a rea de trabalho Adicionar extenses ao Dreamweaver As extenses so novos recursos que podem ser facilmente adicionados ao Dreamweaver. possvel utilizar muitos tipos de extenses, por exemplo: h extenses que permitem reformatar tabelas, efetuar conexes a bancos de dados auxiliares ou que podem ajud-lo a escrever scripts para navegadores. Para localizar as extenses mais recentes para o Dreamweaver, visite o site do Macromedia Exchange na Web, em www.macromedia.com/go/dreamweaver_exchange/. Neste site, possvel efetuar o login e o download das extenses (muitas das quais so gratuitas), participar de grupos de discusso, visualizar as avaliaes e crticas dos usurios, alm de instalar e utilizar o Extension Manager. necessrio instalar o Extension Manager antes de instalar as extenses. O Extension Manager um aplicativo independente que permite instalar e gerenciar as extenses nos aplicativos da Macromedia. Inicie o Extension Manager no Dreamweaver escolhendo Commands (Comandos) > Manage Extensions (Gerenciar extenses). Para instalar e gerenciar as extenses: 1. No site do Macromedia Exchange na Web, clique no link de download de uma extenso. O seu navegador talvez permita optar por abri-la e instal-la diretamente no site ou salv- la em disco. Se a extenso for aberta diretamente no site, o Extension Manager executar a instalao automaticamente. Se a extenso for salva no disco, um bom local para salvar o arquivo do pacote de extenso (.mxp) a pasta Downloaded Extensions, na pasta do aplicativo Dreamweaver do computador. NOTA Para instalar extenses s quais todos os usurios tenham acesso em um sistema operacional multiusurio, necessrio ter efetuado login como Administrador (no Windows) ou raiz (no Mac OS X). Para obter mais informaes sobre os sistemas multiusurio, consulte Sobre a personalizao do Dreamweaver em sistemas multiusurio na pgina 55. 84. Dreamweaver conceitos bsicos de personalizao 85 2. Clique duas vezes no arquivo do pacote de extenso ou abra o Extension Manager e selecione File > Install Extension (Instalar a extenso). A extenso ser instalada no Dreamweaver. Algumas extenses no estaro acessveis enquanto o Dreamweaver no for reiniciado. possvel que voc seja solicitado a sair do aplicativo e reinici-lo. NOTA Utilize o Extension Manager para remover extenses ou ver mais informaes sobre uma determinada extenso. 85. 86 Explorar a rea de trabalho 86. 87 2 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 Macromedia Dreamweaver 8 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. Este captulo contm as seguintes sees: Sobre sites do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87 Configurar um novo site do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .90 Utilizar as definies avanadas para configurar um site do Dreamweaver . . . . . . 91 Editar definies de um site do Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 Editar sites da Web j existentes no Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 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. DICA medida que voc desenvolver o contedo do site, tente utilizar modelos do Dreamweaver como base para as pginas. Consulte Sobre modelos do Dreamweaver na pgina 326 e Criar um modelo no Dreamweaver na pgina 340. 87. 88 Captulo 2: Configurar um site do Dreamweaver 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. Para obter mais informaes, consulte Especificar onde as pginas dinmicas podem ser processadas na pgina 667. Tpicos relacionados Configurar um novo site do Dreamweaver na pgina 90 Estrutura das pastas local e remota Quando configurar o acesso pasta remota para o site do Dreamweaver (consulte Configurar uma pasta remota na pgina 94), 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. site local (pasta-raiz) Propriedades HTML no sim no diretrio de login (No deve ser o Diretrio Host nesse caso) public_html (deve ser o Diretrio Host) Propriedades (No deve ser o Diretrio Host) HTML 88. Sobre sites do Dreamweaver 89 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. Tpicos relacionados Sobre sites do Dreamweaver na pgina 87 Configurar uma pasta remota na pgina 94 SITE REMOTO SITE LOCAL public_html Projeto 1 Propriedades HTML Projeto 2 Propriedades HTML Pasta-raiz local (mapeie esta pasta em public_html, no em Projeto1 ou Projeto1/HTML) Projeto 1 (deve estar presente no site local; corresponde a Projeto1 no site remoto) HTML (deve estar presente no site local; corresponde a Projeto1/HTML no site remoto) 89. 90 Captulo 2: Configurar um site do Dreamweaver 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. Para obter mais informaes, consulte Sobre sites do Dreamweaver na pgina 87. Aps configurar um site do Dreamweaver, recomendvel exportar o site para que voc tenha uma cpia de backup local. Para obter mais informaes, consulte Importar e exportar sites na pgina 147. Para configurar um site do Dreamweaver: 1. Selecione Site > Manage Sites (Gerenciar Sites). A caixa de dilogo Manage Sites exibida. 2. Clique no boto New (Novo). A caixa de dilogo Site Definition (Definio do site) exibida. 3. Siga um dos procedimentos abaixo: Clique na guia Basic (Bsica) para utilizar o Site Definition Wizard (Assistente de definio do site), que o orienta durante o processo de configurao. Clique na guia Advanced (Avanado) para utilizar as definies avanadas, que permitem configurar individualmente pastas locais, remotas e de teste como necessrio. NOTA Voc tambm pode editar arquivos sem configurar um site do Dreamweaver. Para obter mais informaes, consulte Acessar sites, um servidor e unidades locais na pgina 118. NOTA Se no houver um site do Dreamweaver definido, a caixa de dilogo Site Definition (Definio do site) aparecer e voc poder passar para a prxima etapa. NOTA Recomenda-se aos usurios que ainda no conhecem o Dreamweaver que utilizem o Site Definition Wizard; os usurios mais experientes do Dreamweaver podero utilizar as definies avanadas. NOTA Para iniciar o procedimento, configure na ntegra um site do Dreamweaver ou inicie apenas a primeira etapa, configurando a pasta local. 90. Utilizar as definies avanadas para configurar um site do Dreamweaver 91 4. Conclua o processo de configurao do site do Dreamweaver: Para o Site Definition Wizard, responda s perguntas de cada tela e, em seguida, clique em Next (Avanar) para continuar o processo de configurao ou clique em Back (Voltar) para retornar tela anterior. Para as definies avanadas, preencha as categorias Local Info (Informaes locais), Remote Info (Informaes remotas) e Testing Server (Servidor de teste), conforme necessrio (consulte Utilizar as definies avanadas para configurar um site do Dreamweaver na pgina 91). Se voc estiver configurando um site do Dreamweaver para um aplicativo para a Web, consulte Captulo 23, Configurar um aplicativo para a Web, na pgina 657. Utilizar as definies avanadas para configurar um site do Dreamweaver Voc pode utilizar as definies avanadas da caixa de dilogo Site Definition (Definio do site) para configurar um site do Dreamweaver. As definies avanadas permitem configurar pastas locais, remotas e de teste separadamente, para o processamento de pginas dinmicas, como necessrio. Esse mtodo recomendado aos usurios experientes do Dreamweaver. Se voc no tiver experincia com o Dreamweaver, poder utilizar o Site Definition Wizard (Assistente de definio do site), em vez das definies avanadas, para orient-lo durante o processo de configurao. Consulte Configurar um novo site do Dreamweaver na pgina 90. DICA Aps configurar um site do Dreamweaver, recomendvel exportar o site para que voc tenha uma cpia de backup local. Para obter mais informaes, consulte Importar e exportar sites na pgina 147. NOTA Para comear rapidamente, voc pode ir para a primeira etapa da configurao de um site do Dreamweaver, que configura a pasta local. Em seguida, voc pode adicionar informaes remotas e de teste. necessrio configurar pelo menos uma pasta local antes de comear a utilizar o Dreamweaver. 91. 92 Captulo 2: Configurar um site do Dreamweaver Se voc estiver configurando um site do Dreamweaver para um aplicativo para a Web, ignore esta seo e consulte Captulo 23, Configurar um aplicativo para a Web, na pgina 657. Tpicos relacionados Sobre sites do Dreamweaver na pgina 87 Especificar onde as pginas dinmicas podem ser processadas na pgina 667 Configurar uma pasta local A pasta local o diretrio de trabalho do site do Dreamweaver. Essa pasta pode estar no computador local ou em um servidor da rede. Para configurar uma pasta local: 1. Selecione Site > Manage Sites (Gerenciar Sites). A caixa de dilogo Manage Sites exibida. 2. Clique em New (Novo). A caixa de dilogo Site Definition (Definio do site) exibida. 3. Clique no boto Advanced (Avanado) se as definies avanadas no estiverem sendo exibidas. DICA Aps configurar um site do Dreamweaver, recomendvel exportar o site para que voc tenha uma cpia de backup local. Para obter mais informaes, consulte Importar e exportar sites na pgina 147. NOTA Se no houver um site do Dreamweaver definido, a caixa de dilogo Site Definition (Definio do site) aparecer e voc poder passar para a prxima etapa. 92. Utilizar as definies avanadas para configurar um site do Dreamweaver 93 A guia Advanced da caixa de dilogo Site Definition exibir as opes da categoria Local Info (Informaes locais). 4. Digite as opes de informaes locais. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. 5. (Opcional) Se voc estiver pronto para configurar o servidor remoto agora, pule as etapas restantes; selecione a categoria Remote Info (Informaes remotas) esquerda e, em seguida, preencha a caixa de dilogo. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. 6. Clique em OK. O Dreamweaver criar o cache inicial do site, e o novo site do Dreamweaver aparecer no painel Files (Arquivos). 93. 94 Captulo 2: Configurar um site do Dreamweaver Depois de configurar uma pasta local, voc poder adicionar pastas remotas ou de teste (consulte Configurar uma pasta remota na pgina 94 e Especificar onde as pginas dinmicas podem ser processadas na pgina 667). Tpicos relacionados Sobre sites do Dreamweaver na pgina 87 Gerenciar arquivos na pgina 113 Configurar uma pasta remota Depois que voc tiver configurado uma pasta local de um site do Dreamweaver (consulte Configurar uma pasta local na pgina 92), configure uma pasta remota. Dependendo do ambiente de desenvolvimento, a pasta remota o local onde voc armazena arquivos para teste, colaborao, produo, disposio ou outros tipos de atividade. Determine como voc acessar a pasta remota e anote as informaes de conexo. Esta seo descreve como configurar uma pasta remota e conectar-se a ela. Para configurar uma pasta remota: 1. Selecione Site > Manage Sites (Gerenciar Sites). A caixa de dilogo Manage Sites exibida. 2. Selecione um site do Dreamweaver j existente. Se no houver sites do Dreamweaver definidos, crie uma pasta local antes de continuar (consulte Configurar uma pasta local na pgina 92). 3. Clique em Edit (Editar). A caixa de dilogo Site Definition (Definio do site) exibida. 4. Clique no boto Advanced (Avanado) se as definies avanadas no estiverem sendo exibidas. 5. Selecione Remote Info na lista Category (Categoria) esquerda. 6. Selecione uma opo de acesso. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. NOTA No ser necessrio especificar uma pasta remota se a pasta especificada como local for a mesma pasta criada para os arquivos do site no sistema que estiver executando o servidor da Web. Isso indica que o servidor da Web est em execuo no computador local. 94. Utilizar as definies avanadas para configurar um site do Dreamweaver 95 7. Clique em OK. O Dreamweaver criar uma conexo para a pasta remota. Se voc estiver desenvolvendo um site dinmico, precisar adicionar uma pasta Testing Server (Servidor de teste) para processar as pginas dinmicas (consulte Especificar onde as pginas dinmicas podem ser processadas na pgina 667). Para se conectar a uma pasta remota com o acesso de FTP: No painel Files (Arquivos), clique no boto Connects to Remote Host (Conectar ao host remoto) na barra de ferramentas. Para se desconectar de uma pasta remota com o acesso de FTP: No painel Files, clique no boto Disconnect (Desconectar) na barra de ferramentas. Para se conectar ou desconectar de uma pasta remota com acesso rede: Voc no precisa se conectar pasta remota; voc est sempre conectado. Clique no boto Refresh (Atualizar) para ver os arquivos remotos. Tpicos relacionados Sobre sites do Dreamweaver na pgina 87 Estrutura das pastas local e remota na pgina 88 Solucionar problemas de configurao da pasta remota na pgina 95 Solucionar problemas de configurao da pasta remota Um servidor da Web pode ser configurado de vrias maneiras. A lista a seguir contm informaes sobre alguns problemas comuns que podem ocorrer durante a configurao de uma pasta remota (consulte Configurar uma pasta remota na pgina 94) e como solucion- los: possvel que a implementao de FTP do Dreamweaver no funcione corretamente em determinados servidores proxy, firewalls em muitos nveis e outras formas de acesso indireto ao servidor. Caso voc tenha problemas com o acesso de FTP, pea ajuda ao administrador de sistemas local. 95. 96 Captulo 2: Configurar um site do Dreamweaver Para efetuar a implementao de FTP do Dreamweaver, necessrio estabelecer conexo com a pasta raiz do sistema remoto. Em muitos aplicativos, possvel conectar-se a qualquer diretrio remoto e, em seguida, navegar pelo sistema de arquivos remotos, para localizar o diretrio desejado. Certifique-se de indicar a pasta raiz do sistema remoto como diretrio do host. Se estiverem ocorrendo problemas na conexo e o diretrio do host tiver sido especificado com uma barra inclinada simples (/), possvel que voc precise especificar um caminho relativo do diretrio ao qual estiver se conectando, assim como a pasta raiz remota. Por exemplo: se a pasta raiz remota for um diretrio de nvel mais elevado, possvel que voc precise especificar ../../ correspondente ao diretrio do host. Os nomes de pastas e arquivos que contm espaos e caracteres especiais geralmente causam problemas quando so transferidos para um site remoto. Utilize sinais de sublinhado em vez de espaos e evite os caracteres especiais nos nomes de arquivos e pastas, sempre que possvel. Em particular, dois pontos, barras inclinadas, pontos e apstrofes nos nomes de arquivos ou pastas podem causar problemas. Ocasionalmente, os caracteres especiais em nomes de pastas ou arquivos tambm podem impedir que o Dreamweaver crie um mapa do site. Se ocorrerem problemas com nomes longos de arquivos, renomeie-os com designaes mais curtas. No Macintosh, os nomes de arquivos no podem exceder 31 caracteres. Observe que muitos servidores podem utilizar links simblicos (no UNIX), atalhos (no Windows) ou apelidos (no Macintosh), para conectar uma pasta em uma parte do disco do servidor a uma outra que esteja em uma localizao diferente. Por exemplo: o subdiretrio public_html do seu diretrio principal no servidor pode ser, na verdade, um link para outra parte do servidor. Na maioria dos casos, esses apelidos no tm efeito sobre a possibilidade de conexo pasta ou diretrio adequado, mas, se for possvel conectar-se a uma parte do servidor mas no a outras, talvez exista uma discrepncia de apelidos. Caso aparea uma mensagem de erro como: cannot put file (no possvel colocar o arquivo), possvel que no haja espao na pasta remota. Para obter informaes mais detalhadas, consulte o registro do FTP. NOTA Em geral, se voc tiver um problema em uma transferncia por FTP, examine o registro do FTP selecionando Window (Janela) > Results (Resultados) (no Windows) ou Site > FTP Log (Registro do FTP) (no Macintosh), e clicando na tag FTP Log. 96. Editar sites da Web j existentes no Dreamweaver 97 Editar definies de um site do Dreamweaver Utilize as definies avanadas de Site Definition (Definio do site) para editar os sites do Dreamweaver. Para editar as definies de um site do Dreamweaver, siga um dos seguintes procedimentos: Selecione Site > Manage Sites (Gerenciar sites), selecione um site na caixa de dilogo Manage Sites e, em seguida, clique em Edit (Editar). No painel Files (Arquivos), selecione Manage Sites no menu pop-up em que o site atual, o servidor ou a unidade aparece; selecione um site na caixa de dilogo Manage Sites e, em seguida, clique em Edit. Tpicos relacionados Configurar um novo site do Dreamweaver na pgina 90 Editar sites da Web j existentes no Dreamweaver Voc pode utilizar o Dreamweaver para editar sites existentes, mesmo se o site original no tiver sido criado no Dreamweaver. possvel editar sites existentes no sistema local ou em um sistema remoto. Editar um site local da Web j existente no Dreamweaver Voc poder utilizar o Dreamweaver para editar um site da Web j existente no disco local, mesmo se o site original no tiver sido criado no Dreamweaver. Para editar um site da Web local existente: 1. Selecione Site > Manage Sites (Gerenciar Sites). A caixa de dilogo Manage Sites exibida. NOTA Esta seo configura um site do Dreamweaver para editar um site local da Web j existente. Voc tambm pode editar o site existente sem criar um site do Dreamweaver. Para obter mais informaes, consulte Acessar sites, um servidor e unidades locais na pgina 118. 97. 98 Captulo 2: Configurar um site do Dreamweaver 2. Clique em New (Novo). A caixa de dilogo Site Definition (Definio do site) exibida. 3. Clique no boto Advanced (Avanado) se as definies avanadas no estiverem sendo exibidas. A guia Advanced da caixa de dilogo Site Definition exibir as opes da categoria Local Info (Informaes locais). 4. Preencha a caixa de dilogo. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. 5. Clique em OK. Editar um site remoto da Web j existente no Dreamweaver Voc pode utilizar o Dreamweaver para copiar um site remoto j existente (ou uma ramificao desse site) para o disco local e edit-lo, mesmo se o site original no tiver sido criado no Dreamweaver. Para editar um site remoto j existente: 1. Crie uma pasta local que abrigar o site j existente e defina-a como a pasta local do site (consulte Configurar uma pasta local na pgina 92). 2. Configure uma pasta remota (consulte Configurar uma pasta remota na pgina 94) utilizando as informaes sobre o site j existente. Escolha a pasta raiz correta para o site remoto. 3. Para exibir o site remoto, no painel Files (Arquivos), em Window (Janela) > Files, clique no boto Connects to Remote Host (Conectar ao host remoto), para acesso ao FTP; ou clique no boto Refresh (Atualizar), para acesso rede, na barra de tarefas. NOTA Esta seo configura um site do Dreamweaver para editar um site remoto da Web j existente. Voc tambm pode editar o site existente sem criar um site do Dreamweaver. Para obter mais informaes, consulte Acessar sites, um servidor e unidades locais na pgina 118. NOTA Duplique localmente a estrutura inteira da ramificao em questo do site remoto existente. Para obter mais informaes, consulte Estrutura das pastas local e remota na pgina 88. 98. Editar sites da Web j existentes no Dreamweaver 99 4. Dependendo de quanto deseje editar no site remoto, siga um destes procedimentos: Para trabalhar com todo o site, selecione a pasta raiz do site remoto no painel Files e, em seguida, clique em Get (Obter), na barra de tarefas, para efetuar o download de todo o site para o disco local. Se desejar trabalhar apenas com um dos arquivos ou uma das pastas do site, localize o item na visualizao remota do painel Files e clique em Get para efetuar o seu download para o disco local. O Dreamweaver duplicar automaticamente a parte necessria da estrutura do site remoto para posicionar o arquivo do qual voc efetuou o download no local adequado da hierarquia do site. Ao editar apenas uma parte de um site, opte preferencialmente por incluir os arquivos dependentes. 5. Utilize o Dreamweaver para trabalhar no site. Tpicos relacionados Editar um site local da Web j existente no Dreamweaver na pgina 97 99. 100 Captulo 2: Configurar um site do Dreamweaver 100. 101 3 CAPTULO 3 Criar e abrir documentos O Macromedia Dreamweaver 8 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 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. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 Salvar um novo documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Definir um novo tipo de documento padro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 Definir a extenso de arquivo padro de novos documentos HTML . . . . . . . . . . . 106 Abrir documentos existentes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Limpar arquivos HTML do Microsoft Word . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 101. 102 Captulo 3: Criar e abrir documentos 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 (consulte Criar um novo documento em branco na pgina 102). Criar um documento ou um modelo em branco com base em um arquivo de projeto do Dreamweaver (consulte Criar um documento com base em um arquivo de projeto do Dreamweaver na pgina 103). Utilizar um modelo que defina a aparncia de um documento e determine quais partes de um documento podero ser editadas (consulte Criar um documento a partir de um modelo existente na pgina 104). 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. DICA 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. Para obter informaes, veja Definir um novo tipo de documento padro na pgina 106. 102. Criar novos documentos 103 3. Clique no boto Create (Criar). O novo documento aberto na janela do documento. 4. Salve o documento (consulte Salvar um novo documento na pgina 105). Tpicos relacionados Criar um documento a partir de um modelo existente na pgina 104 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. Para criar um novo documento a partir de um arquivo de projeto do Dreamweaver: 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 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. NOTA 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. Para obter informaes sobre como salvar quadros, consulte Salvar arquivos de quadros e de conjuntos de quadros na pgina 316. 103. 104 Captulo 3: Criar e abrir documentos 4. Salve o documento (consulte Salvar um novo documento na pgina 105). 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). Tpicos relacionados Criar um novo documento em branco na pgina 102 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 obter informaes sobre como criar modelos, consulte Criar um modelo no Dreamweaver na pgina 340. Para criar um novo documento a partir de um modelo: 1. Selecione File (Arquivo)> New (Novo). A caixa de dilogo New Document exibida. 2. Clique na guia Templates (Modelos). 3. Na lista Templates For (Modelos para), selecione o site do Dreamweaver que contm o modelo a ser utilizado e, em seguida, selecione um modelo na lista direita. Para obter mais informaes sobre as opes dessa caixa de dilogo, clique no boto Help (Ajuda) na caixa de dilogo. 4. Clique em Create (Criar). O novo documento aberto na janela do documento. DICA Se o seu site no contiver modelos, voc poder salvar um documento em uma das categorias do arquivo de projetos da caixa de dilogo New Document. Em seguida, crie pginas baseadas nesse modelo. Para obter informaes sobre como salvar um arquivo de projeto como um modelo, consulte Criar um documento com base em um arquivo de projeto do Dreamweaver na pgina 103. 104. Salvar um novo documento 105 5. Salve o documento (consulte Salvar um novo documento na pgina 105). 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) ou mantenha a tecla Control pressionada (no Macintosh) no modelo a ser aplicado e, em seguida, selecione New From Template (Novo a partir de modelo). O documento aberto na janela do documento. Tpicos relacionados Criar um novo documento em branco na pgina 102 Criar um documento com base em um arquivo de projeto do Dreamweaver na pgina 103 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). DICA Se voc acabou de criar o modelo que deseja aplicar, talvez seja preciso clicar no boto Refresh (Atualizar) para visualiz-lo. DICA aconselhvel salvar seu arquivo em um site do Dreamweaver. Para obter mais informaes, consulte Configurar um novo site do Dreamweaver na pgina 90. 105. 106 Captulo 3: Criar e abrir documentos 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 si