DREAMWEAVER MX. UNIVATES / Lajeado-RS Edson Ahlert edsonahlert@univates.br. Sumário

Transcrição

1 DREAMWEAVER MX UNIVATES / Lajeado-RS Edson Ahlert edsonahlert@univates.br Sumário Introdução...3 Como planejar e configurar o seu site... 4 Sobre o planejamento e projeto de sites... 4 Como determinar os seus objetivos... 4 Como escolher um público-alvo...4 Como criar sites compatíveis com o navegador... 5 Como organizar a estrutura do site... 5 Como criar a aparência do projeto...6 Como projetar o esquema de navegação... 6 Como planejar e reunir as propriedades... 6 Iniciando o Dreamweaver...7 Visão geral das janelas e painéis... 7 Utilização da barra de ferramentas do documento... 8 Utilização dos menus contextuais...9 Utilização da barra Inserir: Utilização da barra Inserir: Comuns...11 Utilização da barra Inserir: Caracteres Utilização da barra Inserir: Formulários...12 Utilização da barra Inserir: Molduras...13 Utilização da barra Inserir: Head...13 Utilização da barra Inserir: Layout...14 Utilização da barra Inserir: Mídia...14 Utilização da barra Inserir: Tabelas...15 Utilização da barra Inserir: Modelos Utilização da barra Inserir: Texto...15 Visão geral dos menus...16 Utilização do inspetor de propriedades Como criar seu primeiro site da Web com o Dreamweaver...17 Configurar um site local Como criar e salvar uma nova página Visualizar no navegador Defina o título da página Definição de uma imagem de fundo ou de uma cor de fundo para a página...22 Como trabalhar com as cores...22 Seleção de elementos na janela do documento...23 Como inserir e formatar texto...24 Como inserir e formatar texto HTML Adição de texto a um documento Como importar texto de outros documentos...25 Adição de espaço entre caracteres Adição de espaços entre parágrafos...25 Formatação do texto

2 Definição e alteração de fontes e estilos...26 Modificação de características de fontes Modificação de combinações de fontes...27 Formatação de parágrafos...27 Alinhamento de texto...28 Recuo de texto Alteração da cor do texto...28 Criação de listas com marcadores e numeradas Como inserir datas Como inserir caracteres especiais...30 Utilização de réguas horizontais...30 Sobre CSSs (Cascading Style Sheets) Como utilizar o painel Estilos CSS Criação de um novo estilo CSS Como inserir imagens...33 Sobre uma imagem Como inserir uma imagem Como inserir um alocador de espaço de imagem Definição das propriedades da imagem...35 Alinhamento de uma imagem...36 Criação de uma imagem cambiável...37 Como inserir uma tabela...38 Como adicionar conteúdo a uma célula da tabela Como importar dados tabulares...39 Exibição e definição de propriedades da tabela...39 Como utilizar um esquema de desenho para formatar uma tabela Definição do layout de páginas na visualização de layout Sobre as células e tabelas de layout...41 Como entrar e sair da visualização de layout Como desenhar células e tabelas de layout Como desenhar uma tabela de layout aninhada...43 Utilização de molduras Sobre molduras e conjuntos de molduras Como decidir se as molduras devem ser utilizadas Criação de molduras e conjuntos de molduras Como criar um conjunto de molduras predefinido...47 Como criar e editar um conjunto de molduras Como selecionar molduras e conjuntos de molduras no painel Molduras Como salvar arquivos de moldura e de conjunto de molduras...48 Visualização e definição das propriedades da moldura...49 Como controlar um conteúdo de moldura com links Utilização de uma imagem de rastreamento...50 Como trabalhar com várias páginas...51 Links e navegação Sobre as localizações e os caminhos dos documentos Caminhos absolutos...52 Caminhos relativos a documento...52 Caminhos relativos à raiz do site...53 Criação de links Vinculação de arquivos e documentos Estabelecimento de um link a um local específico de um documento Criação de um hyperlink...57 Criação de um link de correio eletrônico...57 Criação de links nulos e de script

3 Criação de menus de salto Inserção de um menu de salto...59 Criação das barras de navegação Inserção de uma barra de navegação Criação dos mapas de imagens...60 Inserção de mapas de imagens de clientes...61 Anexação de comportamentos aos links...61 Como trabalhar com itens de biblioteca Como criar, gerenciar e editar itens de biblioteca Como criar um item de biblioteca Como inserir um item de biblioteca em um documento...63 Como editar um item de biblioteca...63 Como tornar editáveis os itens de biblioteca de um documento Sobre os modelos do Dreamweaver Como definir regiões de modelos...65 Sobre links em modelos...66 Como exibir modelos no modo de visualização do projeto...66 Como criar um modelo no Dreamweaver...67 Como salvar um documento como modelo Como criar regiões editáveis Como inserir uma região editável...68 Como remover uma região editável...68 Como criar um documento de um modelo Como aplicar um modelo a um documento existente...69 Como desanexar um documento de um modelo...70 Como editar e atualizar os modelos...70 Como atualizar documentos baseados em um modelo...70 Criação de formulários interativos Os objetos de formulário Como criar um formulário...72 Como compreender os objetos de formulário...73 Utilização dos campos de formulário Como testar um site Como verificar a compatibilidade com o navegador...75 Como visualizar as páginas nos navegadores...76 Como verificar os links em uma página ou site...77 Como definir o tempo e o tamanho do download Configurar um site remoto e publicar...78 Introdução Este guia foi elaborado como introdução ao Macromedia Dreamweaver MX para usuários que não estão familiarizados com os principais aspectos do programa. As lições contidas neste guia o conduzirão através do processo de criação de um site da Web simples, mas funcional. O Macromedia Dreamweaver MX é um editor de HTML profissional para desenhar, codificar e desenvolver sites, páginas e aplicativos para a Web. Para aqueles que gostam do controle da codificação manual HTML ou para os que preferem trabalhar em um ambiente de edição visual, o Dreamweaver fornece ferramentas úteis para aprimorar a sua experiência de criação para Web. Os recursos de edição visual no Dreamweaver permitem criar páginas, de modo rápido, sem escrever uma linha de código. Se você preferir inserir códigos manualmente, no entanto, o Dreamweaver também inclui diversas ferramentas e recursos relacionados à codificação. Este guia não pretende abordar todos os recursos do Dreamweaver MX, nem tem o objetivo de ser uma introdução ao web design, apenas fornece subsídios para a partir do Dreamweaver começar rapidamente a produzir páginas para a Internet. 3

4 Como planejar e configurar o seu site Um site da Web é um conjunto de documentos vinculados com atributos compartilhados, como tópicos relacionados, uma concepção semelhante ou uma finalidade compartilhada. O Macromedia Dreamweaver MX é uma ferramenta de criação e gerenciamento de sites que pode ser utilizada para criar sites da Web completos, além de documentos individuais. Para obter os melhores resultados, projete e planeje o seu site da Web antes de criar qualquer página contida nele. Sobre o planejamento e projeto de sites No Dreamweaver, o termo site pode se referir a um site da Web ou a um local de armazenamento de documentos pertencentes a um site da Web. Ao iniciar a criação de um site da Web, é necessário seguir uma série de etapas de planejamento para assegurar que o seu site funcionará. Mesmo se estiver criando apenas uma home page pessoal a ser visitada apenas por amigos e família, é recomendável planejar o site com cuidado, para assegurar que todos poderão utilizá-lo com sucesso. Como determinar os seus objetivos A decisão de quais serão os objetivos do seu site é a primeira etapa na criação de um site da Web. Consulte o cliente sobre o site que ele deseja. O que pretende atingir com um site da Web? Tome nota de seus objetivos, para que se lembre deles durante o processo de criação. Os objetivos ajudam a concentrar e destinar o site da Web às suas necessidades particulares. Um site da Web que divulga notícias sobre um tema específico deve ter aparência e navegação diferentes de um site da Web destinado a vender produtos. A complexidade dos seus objetivos afetará a navegação, as ferramentas de criação a serem utilizadas (Flash, Director e assim por diante) e até mesmo a aparência e impressão causadas pelo site. Como escolher um público-alvo Após decidir o que deseja alcançar com o seu site da Web, você precisará decidir quem deseja que o visite. Esta pode ser uma pergunta pouco importante, já que a maioria das pessoas deseja que todo mundo visite o seu site da Web. No entanto, é difícil criar um site da Web que todas as pessoas do mundo irão utilizar. As pessoas utilizam navegadores diferentes, se conectam em velocidades diferentes e podem ou não possuir plug-ins de mídia. Todos estes fatores podem afetar o uso do seu site. Por estes motivos, você precisa determinar o seu público-alvo. Pense nas pessoas que serão atraídas ao seu site da Web ou quem espera atrair. Que tipos de computadores você acredita que elas usarão? Qual será a plataforma predominante (Macintosh, Windows, Linux e assim por diante)? Qual é a velocidade de conexão média (modem 33,6 ou DSL)? Que tipos de navegadores e tamanhos de monitores estas pessoas estarão utilizando? Você está criando um site de intranet onde todos estarão utilizando o mesmo sistema operacional de computador e o mesmo navegador? Todos estes fatores podem afetar muito a aparência que a sua página da Web terá para os visitantes. Depois de ter escolhido o seu público e determinado que tipos de computadores, velocidades de conexão e navegadores os seus visitantes utilizarão, inicie o seu projeto. Digamos, por exemplo: que o seu público-alvo seja composto predominantemente de usuários do Windows que possuem monitores de 17 polegadas e utilizam a versão 3.0 ou mais avançada do Internet Explorer. À medida que projetar a sua página da Web, você deverá testar o funcionamento do site no Internet Explorer num computador com Windows e um tamanho de tela de 800 por 600 pixels. É pouco provável que haja visitantes utilizando o Firefox na plataforma Macintosh, mas você deve assegurar que o seu site funcione nestes tipos de computadores mesmo assim, até mesmo se a exibição não for exatamente a mesma que a do público-alvo. Como criar sites compatíveis com o navegador 4

5 Ao criar um site, você deve se lembrar de que há vários navegadores da Web que poderão ser utilizados pelos seus visitantes. Se possível, desenhe sites com ampla compatibilidade com o navegador, levando em consideração as outras restrições do projeto. São utilizados cerca de 25 navegadores da Web diferentes, sendo que a maioria deles foi lançada em mais de uma versão. Mesmo que você vise apenas o Firefox e o Microsoft Internet Explorer, que são utilizados pela maioria dos usuários da Web, lembre-se de que nem todos têm a versão mais recente desses navegadores. Se o site estiver na Web, mais cedo ou mais tarde alguém irá visitá-lo utilizando o Firefox, o navegador que a AOL fornece aos seus clientes ou algum navegador somente de texto como o Lynx. Em algumas circunstâncias, não é necessário criar sites compatíveis com diversos navegadores. Por exemplo: se o site estiver disponível apenas na intranet de sua empresa e você souber que todos os funcionários utilizam o mesmo navegador, é possível otimizar o site de modo a ser compatível com esse navegador. Da mesma forma, se for criado conteúdo HTML para ser distribuído em CD-ROM junto com um determinado navegador, é razoável supor que todos os seus clientes terão acesso a esse navegador. Na maioria dos sites da Web projetados para visitas públicas, é conveniente torná-los visualizáveis no maior número possível de navegadores. Escolha um ou dois navegadores como principais e desenhe o site visando-os, mas tente explorar o site com outros navegadores de vez em quando, para evitar incluir muito conteúdo incompatível. Também é possível enviar uma mensagem para um grupo de discussão, solicitando-lhes que visualizem o seu site. Esta pode ser uma boa maneira de obter comentários de um público variado. Quanto mais sofisticado for o site termos de layout, animação, conteúdo de multimídia e interação, menor será a probabilidade de que seja compatível com diversos navegadores. Nem todos os navegadores podem executar o JavaScript, por exemplo. Uma página contendo texto simples que não utiliza caracteres especiais será exibida sem problemas em qualquer navegador, porém essa página parecerá menos atraente do que aquelas que contêm imagens, layout e forem interativas. Tente equilibrar o projeto, para obter o máximo de efeito e compatibilidade com diferentes navegadores. Como organizar a estrutura do site O cuidado na organização do site desde o início pode, posteriormente, evitar frustrações e economizar tempo. Se começar a criar documentos sem pensar em que local da hierarquia da pasta eles deverão ser armazenados, é possível que você tenha que lidar com uma pasta de difícil acesso e com demasiados arquivos, ou que os arquivos relacionados estejam espalhados em várias pastas com nomes semelhantes. Em geral, a configuração de um site envolve a criação de uma pasta no disco local, que contém todos os arquivos do site (conhecido como o site local), e a criação e edição de documentos contidos nesta pasta. Quando o site estiver pronto para ser publicado e visualizado pelo público, estes arquivos poderão, então, ser copiados para um servidor da Web. Esta abordagem é melhor do que criar e editar os arquivos no próprio site público ativo da Web, pois ela permite testar as alterações no site local antes de torná-las publicamente visualizáveis e, em seguida, quando o site estiver finalizado, efetuar o upload dos arquivos locais e atualizar todo o site público de uma vez só. Depois que o site local tiver sido configurado com o Dreamweaver, você poderá, entre outras coisas, gerenciar os arquivos do site, manter um registro dos links e atualizar as páginas com mais facilidade. Classifique o site em categorias Coloque na mesma pasta as páginas que se relacionarem. Por exemplo: todos os press releases, informações de contato e oportunidades de empregos em sua empresa poderão ser armazenados em uma pasta, enquanto que as páginas relativas ao seu catálogo on-line poderão ser armazenadas em outra pasta. Sempre que necessário, utilize subpastas. Este tipo de organização facilitará a manutenção e navegação do seu site. Decida onde serão armazenados itens como imagens e arquivos de som Por exemplo: é conveniente colocar todas as imagens em um único local, para facilitar a localização das mesmas quando forem inseridas em uma página. Algumas vezes, os criadores colocam todos os itens destinados a um site e que não forem HTML em uma pasta denominada Propriedades. É possível que esta pasta contenha outras pastas (para imagens, filmes Shockwave e arquivos de som, por exemplo). Alternativamente, é possível que haja uma pasta Propriedades para cada grupo de páginas relacionadas no site, se os diversos grupos não compartilharem muitas propriedades. Como criar a aparência do projeto Muito tempo será economizado no processo se o seu projeto e layout forem planejados antes de iniciar o trabalho no Dreamweaver. Pode ser tão simples como criar um desenho de protótipo numa folha de papel, de acordo com a 5

6 aparência desejada do layout do site. Uma abordagem mais avançada seria criar um desenho composto do site, utilizando aplicativos como o Macromedia FreeHand ou Fireworks. O importante é ter um protótipo do layout e projeto, para que este possa ser seguido mais tarde, quando o site estiver sendo construído. É importante manter a coerência no layout e projeto da sua página. É do seu interesse que os usuários possam clique nas páginas do seu site sem ficarem confusos, porque todas as páginas têm uma aparência diferente ou a navegação está posicionada num local diferente em cada página. Como projetar o esquema de navegação Um outro aspecto em que o planejamento de sites apresenta vantagens é a navegação. À medida que cria o seu site, pense na experiência que você deseja proporcionar aos visitantes. Pense em como um visitante ao seu site poderá se mover de uma área para outra. Considere os seguintes aspectos: A informação Você está aqui permite aos visitantes saber facilmente onde estão no seu site e como retornar à página inicial. O recurso de busca e os índices facilitam a localização de quaisquer informações buscadas pelos visitantes. Os comentários fornecem uma maneira através da qual os visitantes podem entrar em contato com o webmaster (quando necessário) e com outras pessoas relevantes associadas à empresa ou ao site, caso ocorra qualquer problema com o site. Projete a aparência da sua navegação. A navegação deve ser coerente no site inteiro. Se uma barra de navegação for colocada no alto da sua home page, procure mantê-la nesta posição em todas as páginas vinculadas. Como planejar e reunir as propriedades Depois que souber qual será a aparência do projeto e do layout, é possível criar e reunir as propriedades que serão necessárias. As propriedades podem ser itens como imagens, texto ou mídia (Flash, Shockwave, entre outros). Antes de começar a desenvolver o site, assegure-se de ter todos estes itens reunidos e prontos para serem utilizados. Caso contrário, você terá que interromper o desenvolvimento constantemente para localizar uma imagem ou criar um botão. Se estiver utilizando imagens de um site de clip-art ou elas estiverem sendo criadas por alguma outra pessoa, assegure-se de reuni-las e colocá-las numa pasta do site. Se estiver criando as propriedades você mesmo, assegurese de criá-las antes de iniciar o desenvolvimento, incluindo todas as imagens necessárias, se estiver utilizando imagens cambiáveis. Em seguida, organize as propriedades, para que possa acessá-las facilmente enquanto estiver criando o site no Dreamweaver. O Dreamweaver pode facilitar a reutilização de layouts e elementos de página em vários tipos de documentos, através da utilização de modelos e bibliotecas. No entanto, é mais fácil criar novas páginas com modelos e bibliotecas do que aplicá-los a documentos existentes. Utilize os modelos, se souber que muitas de suas páginas utilizarão o mesmo layout. Planeje e projete um modelo para tal layout e, em seguida, você poderá criar novas páginas a partir do modelo. Se decidir alterar o layout de todas as páginas, basta alterar o modelo. Nota: Existem algumas restrições quanto às alterações que podem ser feitas aos documentos que se baseiam em modelos. O melhor aproveitamento que se pode dar aos modelos ocorre em ambientes de colaboração, para garantir que todos estejam utilizando o mesmo layout de página. É possível que os itens de biblioteca ofereçam uma maior flexibilidade de uso fora dos ambientes de colaboração. Utilize itens de biblioteca, se você já souber que determinadas imagens ou outros elementos aparecerão em muitas páginas do site. Crie estes elementos com antecedência e transforme-os em itens de uma biblioteca. Se estes itens forem alterados posteriormente, a nova versão atualizada aparecerá em todas as páginas que os utilizarem. Iniciando o Dreamweaver No Windows, ao iniciar o Dreamweaver pela primeira vez, uma caixa de diálogo permite selecionar um layout de área de trabalho. Caso você mude de idéia posteriormente, é possível alternar para uma área de trabalho diferente utilizando a caixa de diálogo Preferências. 6

7 Para escolher um layout de área de trabalho: Selecione um dos seguintes layouts: A área de trabalho do Dreamweaver MX é integrada e utiliza a MDI (Multiple Document Interface, interface de múltiplos documentos) na qual todas as janelas de documento e os painéis estão integrados em uma janela de aplicativo maior, com os grupos de painéis encaixados à direita. Este layout é recomendado para a maioria dos usuários. A área de trabalho do Dreamweaver 4 apresenta um layout semelhante ao utilizado no Dreamweaver 4, no qual cada documento está em uma janela flutuante individual. Os grupos de painéis são encaixados juntos, mas não estão situados dentro da janela maior do aplicativo. Recomendado somente para usuários do Dreamweaver 4 que preferem utilizar uma área de trabalho mais familiar. Visão geral das janelas e painéis A seguir uma breve descrição janelas e elementos da área de trabalho do Dreamweaver. Alguns aspectos específicos sobre como utilizar estas janelas serão descritos posteriormente neste guia. 7

8 A janela Bem-vindo contém dicas sobre a configuração da área de trabalho, para diversos objetivos, e informações sobre os novos recursos, para as pessoas que utilizaram as versões anteriores do Dreamweaver. A barra Inserir contém botões para inserção de vários tipos de objetos, como imagens, tabelas e camadas em um documento. Cada objeto é uma parte do código HTML, que permite ao usuário definir vários atributos à medida que são inseridos. Por exemplo: é possível inserir uma imagem clicando no ícone de Imagem, na barra Inserir. Se preferir, inclua os objetos utilizando o menu Inserir em vez da barra Inserir. A barra de ferramentas do documento contém botões e menus pop-up que possibilitam diferentes visualizações da janela do documento (visualização do projeto e de código), várias opções de exibição e algumas operações comuns, como a visualização no navegador. A janela do documento exibe o documento que está sendo criado e editado. O inspetor de propriedades permite exibir e alterar várias propriedades do objeto ou texto selecionado. Cada tipo de objeto possui diferentes propriedades. Grupos de painéis são conjuntos de painéis inter-relacionados sob um cabeçalho. Para expandir um grupo de painéis, clique na seta de expansão, à esquerda do nome do grupo; para desanexar um grupo de painéis, arraste a pinça, na extremidade esquerda da barra de título do grupo. O painel Site permite gerenciar os arquivos e as pastas que compõem o site. Esse painel também possibilita a exibição de todos os arquivos no disco local, como no Windows Explorer e no Finder (no Macintosh). O Dreamweaver fornece muitos outros painéis, inspetores e janelas que não são mostrados nesta seção, como o painel Histórico e o inspetor de código. Para abrir os painéis, inspetores e janelas do Dreamweaver, utilize o menu Janela. Utilização da barra de ferramentas do documento A barra de ferramentas do documento contém botões que permitem alternar rapidamente diferentes visualizações do documento: de código, do projeto, uma visualização dividida que mostra as visualizações de código e do projeto, e a visualização do Live Data. A barra de ferramentas contém alguns comandos e opções comuns relacionados à visualização do documento, transferência entre os sites local e remoto, e depuração do código JavaScript Para exibir ou ocultar a barra de ferramentas do documento, escolha Exibir > Barras de ferramentas > Documento. As seguintes opções são mostradas na barra de ferramentas do documento: Mostrar a visualização de código exibe apenas a visualização de código na janela do documento. Mostrar as visualizações de código e do projeto exibe a visualização de código em uma parte da janela do documento e a visualização do projeto na outra parte. Quando essa visualização combinada é selecionada, a opção Visualização do projeto no alto torna-se disponível no menu Opções de visualização. Utilize essa opção para especificar qual visualização aparecerá na parte superior da janela do documento. Mostrar a visualização do projeto exibe apenas a visualização do projeto na janela do documento. 8

9 Também é possível escolher uma visualização no menu Exibir. Título permite digitar um título para o documento, que será exibido na barra de título do navegador. Se o documento já tiver um título, ele aparecerá nesse campo. Gerenciamento de arquivos exibe o menu pop-up Gerenciamento de arquivos. Visualizar/depurar no navegador permite visualizar ou depurar o documento no navegador. Escolha um navegador no menu pop-up.para adicionar um navegador ao menu ou alterar os navegadores contidos na lista, escolha Editar a lista de navegadores. Atualizar a visualização do projeto atualiza a visualização do projeto do documento após as alterações feitas na visualização de código.as alterações feitas na visualização de código não são exibidas automaticamente na visualização do projeto até que sejam executadas determinadas ações, por exemplo: salvar o arquivo ou clique neste botão. Referência exibe o painel Referência.O painel Referência contém informações de referência sobre HTML, CSS, JavaScript, CFML, ASP e JSP. Navegação do código permite navegar pelo código JavaScript. Opções de visualização permite definir as opções das visualizações de código e do projeto, inclusive qual visualização deve aparecer em primeiro plano. As opções da visualização do projeto permitem ocultar todos os auxílios visuais (por ex.: tabelas, camadas e bordas da moldura) de uma só vez, ou mostrar e ocultar auxílios individuais, conforme a preferência. Essas opções também possibilitam exibir o conteúdo do cabeçalho e as guias visuais. Quando as visualizações de código e do projeto estiverem em exibição, ambos os conjuntos de opções estarão disponíveis no menu. Utilização dos menus contextuais O Dreamweaver utiliza amplamente os menus contextuais, que fornecem acesso conveniente aos comandos mais úteis e às propriedades relacionadas ao objeto ou à janela com a qual você estiver trabalhando. Os menus contextuais apresentam apenas os comandos pertinentes à seleção atual. Para utilizar um menu contextual: 1. Clique com o botão direito do mouse no objeto ou na janela. Será exibido o menu contextual correspondente ao objeto ou à janela selecionada. 2. Escolha um comando no menu contextual. Utilização da barra Inserir: A barra Inserir contém botões para criar e inserir objetos, como tabelas, camadas e imagens. Os botões estão organizados em guias. 9

10 A barra Inserir contém várias guias: Comuns, Layout, Texto, Tabelas, Molduras, Formulários, Modelos, Caracteres, Mídia, Cabeçalho, Script e Aplicativo. São exibidas guias adicionais quando o documento que estiver em exibição contiver código do servidor, como documentos ASP ou CFML. A guia Aplicativo permite inserir elementos dinâmicos, como conjuntos de registros, regiões repetidas, e formulários de atualização e de inserção de registros. A guia Caracteres contém caracteres especiais, como o símbolo de direito autoral (copyright), as aspas curvas, e os símbolos de marcas comerciais e registradas. Observe que alguns desses símbolos podem não ser exibidos corretamente nas versões 3.0 e anteriores dos navegadores Internet Explorer e Firefox. A guia Comuns contém botões para criar e inserir os objetos utilizados com mais freqüência, por exemplo: imagens, tabelas e camadas. A guia Formulários contém botões para criar formulários e inserir elementos de formulários. A guia Molduras contém os layouts comuns dos conjuntos de molduras. A guia Head contém botões para adicionar vários elementos head, como as tags meta e base. A guia Layout permite inserir tabelas e camadas, bem como escolher entre duas visualizações de tabelas: visualização padrão (o padrão) e de layout. Quando é selecionada a visualização de layout, podem ser utilizadas as ferramentas de layout do Dreamweaver: Desenhar a célula de layout e Desenhar a tabela de layout. A guia Mídia contém botões para inserir objetos de mídia animados ou interativos, como botões e texto Flash, applets Java e objetos ActiveX. A guia Script permite inserir um script, uma seção noscript ou uma inclusão do servidor (server-side include). A guia Tabelas permite inserir uma tabela inteira ou uma tag específica a uma tabela (como tr, th ou td). A guia Modelos permite inserir regiões editáveis, opcionais e repetitivas nos arquivos de modelos. A guia Texto permite inserir várias tags de formatação de lista e de texto, como b, em, p, h1 e ul. Nota: Embora alguns botões na guia Texto sejam semelhantes aos encontrados no inspetor de propriedades, suas funções são diferentes. Os botões na guia Texto servem apenas para inserir código e não refletem o estado atual da seleção; se a seleção contiver texto em negrito, o botão Negrito, no inspetor de propriedades, será exibido como selecionado, enquanto que o mesmo botão na guia Texto não estará ativado. As guias de código do servidor, disponíveis apenas para as páginas que utilizam uma determinada linguagem de servidor, incluem ASP, ASP.NET, CFML Basic, CFML Flow, CFML Advanced, JSP e PHP. Cada uma dessas guias fornece objetos de código do servidor, que podem ser inseridos na visualização de código. Se apenas alguns objetos estiverem visíveis em uma determinada guia, será mostrada uma pequena seta no canto inferior esquerdo da barra Inserir; para exibir os outros objetos da guia, clique na seta. Quando um objeto de botão é clicado, o Dreamweaver insere código no documento. Em alguns casos, o código é inserido imediatamente, em outros, é exibido um editor de tags ou uma outra caixa de diálogo, permitindo a especificação de mais informações, antes da inserção do código. Se um objeto for inserido na visualização do projeto, não será exibida nenhuma caixa de diálogo, porém se ele for inserido na visualização de código, aparecerá o editor de tags. No caso de alguns objetos, a inserção destes na visualização do projeto fará com que o Dreamweaver alterne para a visualização de código, antes de inserir o objeto. Alguns objetos, como as âncoras com nome, não estão visíveis quando a página é exibida na janela do navegador. Para exibir os ícones que marcam os locais desses objetos invisíveis na visualização do projeto, escolha Exibir > Auxílios visuais > Elementos invisíveis. Para selecionar os objetos invisíveis na visualização do projeto, clique em seus respectivos ícones. Algumas das definições de preferências gerais afetam a barra Inserir. Para modificá-las, escolha Editar > Preferências e selecione Geral na lista de categorias à esquerda. Ao inserir objetos, como imagens, tabelas, scripts e elementos head, uma caixa de diálogo solicitará informações adicionais. As caixas de diálogo podem ser suprimidas, desativando a opção Mostrar a caixa de diálogo ao inserir objetos ou mantendo pressionada a tecla Control durante a criação do objeto. Quando 10

11 o objeto é inserido com essa opção desativada, são conferidos valores de atributos padrão ao objeto. Utilize o inspetor de propriedades para alterar as propriedades do objeto após a inserção. A opção barra Inserir permite exibir o seu conteúdo apenas como ícones, texto, ou texto e ícones. Utilização da barra Inserir: Comuns A guia Comuns, na barra Inserir, permite inserir os objetos utilizados mais comumente. Hyperlink e Link de correio eletrônico inserem links de hipertexto no ponto de inserção ou imediatamente após a seleção. Âncora com nome coloca uma âncora com nome (a name="") no ponto de inserção. Será exibida uma caixa de diálogo; digite o nome da âncora. Tabela coloca uma tabela no ponto de inserção. Desenhar camada cria uma camada. Clique no botão Camada e, em seguida, mova o ponteiro para a janela do documento e arraste, para definir o tamanho e a posição da camada. Como padrão, o Dreamweaver cria uma camada definida pela tag div. Utilize o inspetor de propriedades para selecionar uma outra tag ou alterar a configuração padrão nas preferências de camadas. Imagem insere uma imagem no ponto de inserção. Será exibida uma caixa de diálogo, para que se possa especificar um arquivo de imagem. Alocador de espaço de imagem insere um alocador de espaço de imagem no ponto de inserção. Uma caixa de diálogo permite especificar o nome e as dimensões do alocador de espaço. HTML do Fireworks coloca um arquivo HTML produzido pelo Fireworks no ponto de inserção. Imagem cambiável solicita a especificação de dois arquivos de imagem que serão utilizados para definir uma imagem cambiável. A imagem cambiável é aquela que se altera quando o cursor for movido sobre ela. Barra de navegação insere um conjunto de imagens a serem utilizadas na navegação de um site. Régua horizontal coloca uma régua horizontal no ponto de inserção. Data coloca a data atual no ponto de inserção. É exibida uma caixa de diálogo na qual se pode especificar um formato de data e indicar se o Dreamweaver deverá atualizar automaticamente a data quando o arquivo for salvo. Dados tabulares cria uma tabela no ponto de inserção, preenchida com os dados tabulares extraídos de um arquivo de texto delimitado (por ex.: um arquivo exportado do Microsoft Excel ou de um banco de dados). Seletor de tags permite escolher uma tag em uma hierarquia de tags categorizadas, para inserí-la. Comentário coloca um comentário no HTML, no ponto de inserção. Se você estiver na visualização do projeto, será exibida uma caixa de diálogo; digite o texto do comentário. Utilização da barra Inserir: Caracteres Na barra Inserir, a guia Caracteres permite inserir os caracteres especiais. Quebra de linha insere uma quebra de linha (br) no ponto de inserção. Também é possível pressionar Shift+Enter para inserir uma quebra de linha. Espaço não-separável insere um espaço não separável ( ) no ponto de inserção. Aspas à esquerda, Aspas à direita e Travessão inserem marcas de pontuação no ponto de inserção. Libra, Euro e Iene inserem símbolos de moedas no ponto de inserção. Copyright, Marca registrada e Marca comercial inserem os símbolos correspondentes no ponto de inserção. 11

12 Outros caracteres fornece um conjunto de caracteres especiais, por exemplo: é e ç, à sua escolha. Quando um desses caracteres é selecionado e se clica em OK, ele é inserido no ponto de inserção. Utilização da barra Inserir: Formulários Na barra Inserir, a guia Formulários contém botões para criar formulários e inserir os elementos do formulário. Os formulários são simplesmente recipientes de elementos. Os limites do formulário não são visíveis na janela do documento, a não ser que a opção Exibir > Auxílios visuais > Elementos invisíveis seja selecionada. Para inserir um elemento de formulário, coloque o ponto de inserção dentro dos limites de um formulário; os elementos de formulário situados fora das tags form não aparecerão em todos os navegadores. Ao tentar inserir um elemento de formulário fora de um formulário, uma caixa de diálogo perguntará se você deseja adicionar uma tag ao redor do elemento; clique em Sim, para criar um novo formulário contendo o elemento, ou em Não, para inserir o elemento fora de um formulário. Formulário coloca um formulário no ponto de inserção. Campo de texto coloca um campo de texto no ponto de inserção. Defina o nome, tamanho e valor inicial no inspetor de propriedades. Campo oculto coloca um campo oculto no ponto de inserção. Defina o nome e valor no inspetor de propriedades. Área de texto insere um campo de texto com várias linhas no ponto de inserção. Caixa de seleção e Botão de rádio colocam os controles correspondentes no ponto de inserção. Defina o nome, valor quando selecionado e o estado inicial no inspetor de propriedades. Grupo de botões de rádio insere um grupo de botões de opção no ponto de inserção. Menu de lista coloca uma lista ou menu pop-up no ponto de inserção. Defina o nome, tipo e valores da lista no inspetor de propriedades. Menu de salto coloca um menu pop-up de URLs no ponto de inserção. A escolha de um valor nesse menu levará o usuário à URL. Defina a lista de valores na caixa de diálogo que for exibida. Campo de imagens coloca um campo de imagens no ponto de inserção. Defina o nome, tamanho, texto alternativo e arquivo de origem no inspetor de propriedades. Campo de arquivos coloca um campo de upload de arquivos no ponto de inserção. Defina o nome, tamanho e valor inicial no inspetor de propriedades. Botão coloca um botão com name e value padrão Enviar no ponto de inserção. Para inserir um botão, coloque o ponto de inserção dentro dos limites de um formulário; os botões situados fora dos formulários não aparecerão em todos os navegadores. Utilize o inspetor de propriedades para definir o nome, identificador e a ação. Identificador é uma maneira de associar estruturalmente o identificador do texto ao campo. Conjunto de campos é uma tag de contenção para um grupo lógico de elementos do formulário. Utilização da barra Inserir: Molduras Na barra Inserir, a guia Molduras contém botões para criar layouts comuns de conjuntos de molduras. Moldura esquerda, Moldura direita, Moldura superior e Moldura inferior criam, respectivamente, um conjunto de molduras e adicionam uma moldura estreita vazia a um dos lados da moldura atual. Molduras inferior e esquerda aninhada e Molduras inferior e direita aninhada criam, respectivamente, um conjunto de molduras, adicionam uma moldura estreita vazia à esquerda ou à direita da moldura atual e, em seguida, inserem outra moldura vazia abaixo dessas duas molduras. 12

13 Molduras esquerda e inferior aninhada e Molduras direita e inferior aninhada criam, respectivamente, um conjunto de molduras, adicionam uma moldura estreita vazia abaixo da moldura atual e, em seguida, inserem outra moldura vazia à esquerda ou à direita de ambas as molduras. Molduras superior e inferior criam um conjunto de molduras, adicionam um moldura abaixo da moldura atual e, em seguida, inserem outra moldura acima de ambas molduras. Molduras esquerda e superior aninhada e Molduras direita e superior aninhada criam, respectivamente, um conjunto de molduras, adicionam uma moldura estreita vazia acima da moldura atual e, em seguida, inserem outra moldura vazia à esquerda ou à direita de ambas molduras. Molduras superior e esquerda aninhada e Molduras superior e direita aninhada criam, respectivamente, um conjunto de molduras, adicionam uma moldura estreita vazia à esquerda ou à direita da moldura atual e, em seguida, inserem outra moldura vazia abaixo de ambas molduras. Utilização da barra Inserir: Head Na barra Inserir, a guia Head contém objetos para adicionar elementos à seção head dos documentos. Meta insere uma tag meta na seção head do documento. Será exibida uma caixa de diálogo, na qual é possível digitar informações relativas aos atributos meta. Palavras-chave insere uma tag meta name="keywords" na seção head do documento. Será exibida uma caixa de diálogo, na qual é possível digitar as palavras-chave relacionadas ao documento. Descrição insere uma tag meta de descrição na seção head do documento. Será exibida uma caixa de diálogo, na qual é possível digitar o texto que descreve o documento. Atualizar insere uma tag meta de atualização na seção head do documento. Será exibida uma caixa de diálogo, na qual é possível digitar o número de segundos que se deve aguardar até que seja efetuada a atualização, assim como a instrução para recarregar a página atual ou ir até outra página. Base insere uma tag base na seção head do documento. Será exibida uma caixa de diálogo na qual é possível digitar uma URL básica dos links do documento. Link insere uma tag link na seção head do documento. Será exibida uma caixa de diálogo, na qual é possível digitar informações relativas aos links. Observe que esse link não é de hipertexto; ele é utilizado com mais freqüência para especificar uma folha de estilos externa. Utilização da barra Inserir: Layout Na barra Inserir, a guia Layout permite exibir as tabelas nas visualizações padrão ou de layout. Na visualização de layout, é possível desenhar células e tabelas de layout. Tabela coloca uma tabela no ponto de inserção. Desenhar camada cria uma camada. Clique no botão Camada e, em seguida, mova o ponteiro para a janela do documento e arraste, para definir o tamanho e a posição da camada. Como padrão, o Dreamweaver cria uma camada definida pela tag div. Utilize o inspetor de propriedades para selecionar uma outra tag ou alterar a configuração padrão nas preferências de camadas. Visualização padrão exibe as tabelas como uma grade de linhas. Visualização de layout exibe as tabelas como caixas que podem ser desenhadas, arrastadas e redimensionadas. Desenhar a célula de layout permite desenhar células individuais de tabela na visualização do projeto da janela do documento. Desenhar a tabela de layout permite desenhar tabelas inteiras na visualização do projeto da janela do documento. 13

14 Utilização da barra Inserir: Mídia Na barra Inserir, a guia Mídia contém botões para inserir objetos especiais configuráveis, como plug-ins e applets. Flash coloca um filme Flash no ponto de inserção, utilizando as tags object e embed. Será exibida uma caixa de diálogo, na qual é possível procurar os arquivos de filmes. Os atributos codebase, class id e pluginspage foram predefinidos com os valores adequados ao Macromedia Flash Player; utilize o inspetor de propriedades para especificar outros atributos do filme. Botão Flash e Texto Flash colocam os objetos Flash no ponto de inserção. Shockwave coloca um filme Macromedia Shockwave no ponto de inserção, utilizando as tags object e embed. É exibida uma caixa de diálogo, para que você possa determinar um arquivo de origem do filme, ou utilize o inspetor de propriedades para especificá-lo. Applet coloca um applet Java no ponto de inserção (o applet Java aparecerá apenas quando o documento for exibido em um navegador). É exibida uma caixa de diálogo na qual você pode especificar o arquivo que contém o código do applet, ou clique em Cancelar para manter a origem sem especificação. Utilize o inspetor de propriedades para especificar as outras propriedades do applet Java. Param insere uma tag que permite transferir os parâmetros para um applet ou objeto. ActiveX coloca um controle ActiveX no ponto de inserção. Plug-in utiliza a tag embed para inserir, no ponto de inserção, um arquivo que requer um plug-in do Firefox para sua execução. É exibida uma caixa de diálogo na qual é possível especificar o arquivo de origem. Utilização da barra Inserir: Tabelas Na barra Inserir, a guia Tabelas permite inserir as tags relacionadas a tabelas. Tabela coloca uma tabela no ponto de inserção. É exibida uma caixa de diálogo que permite especificar os atributos da tabela, como o número de linhas e de colunas. Tabela, Linhas da tabela, Cabeçalho da tabela, Dados da tabela e Legenda da tabela inserem, respectivamente, um par de tags relacionadas à tabela (table, tr, th, td ou caption) no ponto de inserção. Utilização da barra Inserir: Modelos Na barra Inserir, a guia Modelos permite salvar um documento como um arquivo de modelo e inserir vários tipos de regiões nesse arquivo. Utilização da barra Inserir: Texto Na barra Inserir, a guia Texto permite inserir as tags de formatação de texto e de parágrafo. Nota: Embora alguns botões na guia Texto sejam semelhantes aos encontrados no inspetor de propriedades, suas funções são diferentes. Os botões na guia Texto servem apenas para inserir código e não refletem o estado atual da 14

15 seleção; se a seleção contiver texto em negrito, o botão Negrito, no inspetor de propriedades, será exibido como selecionado, enquanto que o mesmo botão na guia Texto não estará ativado. Editor de tags de fonte exibe o editor da tag da fonte, permitindo definir atributos antes da inserção da mesma. Negrito, Itálico, Forte e Ênfase colocam as tags de formatação de texto HTML correspondentes em volta da seleção. Parágrafo, Aspas duplas, e Texto pré-formatado colocam as tags de bloco de HTML correspondentes em volta da seleção. Cabeçalho 1, Cabeçalho 2 e Cabeçalho 3 colocam as tags de cabeçalho HTML correspondentes em volta da seleção. Lista não-ordenada, Lista ordenada e Item da lista colocam as tags de lista HTML correspondentes em volta da seleção. Lista de definições, Termo de definição e Descrição da definição colocam as tags de lista de definições HTML correspondentes em volta da seleção. Abreviação e Sigla inserem tags que permitem especificar o texto completo de uma abreviação ou sigla, para beneficiar potencialmente os mecanismos de busca, as leitoras de tela, etc. Visão geral dos menus Esta seção fornece uma breve descrição dos menus do Dreamweaver. O menu Arquivo e menu Editar contêm os comandos padrão de menu, como Novo, Abrir, Salvar, Cortar, Copiar e Colar. O menu Arquivo também contém vários outros comandos para exibição e edição de documentos, como visualização no navegador e imprimir o código. O menu Editar inclui comandos de seleção e busca, como selecionar a tag-mãe, localizar e substituir e fornece acesso ao editor de atalhos do teclado e ao editor de bibliotecas de tags. O menu Editar também oferece acesso às preferências. O menu Exibir permite visualizar vários modos do documento (como visualização de código e visualização do projeto), além de exibir e ocultar diversos tipos de elementos de página e ferramentas do Dreamweaver. O menu Inserir oferece uma alternativa à barra Inserir para inclusão de objetos em seu documento. O menu Modificar permitir modificar as propriedades do elemento ou item de página selecionado. Com este menu é possível editar atributos de tags, modificar tabelas e elementos da tabela e executar várias ações itens de biblioteca e modelos. O menu Texto permite formatar facilmente qualquer texto. O menu Comandos fornece acesso a uma variedade de comandos, incluindo um comando para formatar códigos de acordo com suas preferências de formatação, um para criar álbuns de fotos e outro para otimizar a imagem utilizando o Macromedia Fireworks. O menu Site contém itens de menu para criar, abrir e editar sites gerenciar arquivos no site atual (Macintosh). O menu Janela fornece acesso a todos os painéis, inspetores e janelas no Dreamweaver. O menu Ajuda fornece acesso à documentação do Dreamweaver, incluindo sistemas de ajuda para utilizar o Dreamweaver, criar extensões para o Dreamweaver material de referência para diversas linguagens. Além dos menus da barra de menu, o Dreamweaver contém diversos menus contextuais que dão acesso fácil a comandos úteis pertencentes à seleção ou área. Para exibir um menu contextual, clique com o botão direito do mouse no item de uma janela. Todos is itens nos menus contextuais pode ser localizados nos menus da barra de menu. 15

16 Utilização do inspetor de propriedades O inspetor de propriedades permite examinar e editar as propriedades do elemento da página que estiver selecionado, como um texto ou objeto inserido. Os elementos da página podem ser selecionados nas visualizações do projeto ou de código. Para mostrar ou ocultar o inspetor de propriedades, escolha Janela > Propriedades. A maioria das alterações feitas às propriedades será imediatamente aplicada à janela do documento. Contudo, no caso de algumas propriedades, as alterações não são aplicadas até que você clique fora dos campos de texto de edição de propriedades, pressione Enter ou Tab para passar a outra propriedade. O conteúdo do inspetor de propriedades varia dependendo do elemento selecionado. Para obter informações sobre determinadas propriedades, selecione um elemento na janela do documento e, em seguida, clique no ícone da Ajuda, no canto superior direito do inspetor de propriedades. O inspetor de propriedades inicialmente exibirá a maioria das propriedades do elemento selecionado. Clique na seta de expansão, no canto inferior direito do inspetor de propriedades, para reduzi-lo e mostrar apenas as propriedades utilizadas mais comumente. Dica: Em alguns casos, é possível que certas propriedades incomuns não apareçam, mesmo no inspetor de propriedades expandido; nesses casos, utilize o inspetor de código ou a visualização de código, para codificar essas propriedades manualmente, ou selecione a tag na visualização de código e escolha Modificar > Editar a tag. Como criar seu primeiro site da Web com o Dreamweaver Este capítulo oferece uma série de breves lições para orientá-lo através do processo de criação de um site estático simples utilizando as ferramentas de criação visuais do Macromedia Dreamweaver MX. A ordem das lições neste capítulo segue um possível fluxo de trabalho para a criação de um site. Ao criar seus próprios sites, é possível acompanhar a seqüência que achar mais adequada. Configurar um site local O método mais comum para se criar um site utilizando o Dreamweaver é elaborar e editar páginas no disco local e carregar as cópias das páginas a um servidor web remoto para publicá-las. É possível utilizar o Dreamweaver de outras formas (como executar um servidor web em seu computador local, enviar os arquivos a um servidor temporário (staging server) ou utilizar um disco anexo como o disco local), mas as lições deste guia levam em consideração que você esteja trabalhando no computador local e efetuando upload a um servidor remoto. No Dreamweaver, a palavra site é utilizada como abreviação para os seguintes itens: Site da web: conjunto de páginas em um servidor, que pode ser visualizado pelo visitante através de um navegador da web. Site remoto: arquivos contidos no servidor que compõe um site da Web, do ponto de vista de seu autor em vez do ponto de vista de um visitante. Site local: arquivos no disco local que correspondem aos arquivos no site remoto. Os arquivos são editados em seu disco local e carregados no site remoto. Dreamweaver definição do site: conjunto de características de definição para um site local, além das informações sobre como o site local corresponde a um site remoto. 16

17 Normalmente, é preciso planejar um site da Web antes de criá-lo: calcule o número de páginas, qual conteúdo será exibido em cada página e como as páginas serão vinculadas entre si. Nesta lição, entretanto, o site a ser criado é muito simples, portanto, não necessita de muito planejamento: ele consistirá de apenas duas páginas com links entre elas. Portanto, para este site, você pode omitir o planejamento e prosseguir com a criação de uma definição do site. Uma definição do site pode ser criada através da caixa de diálogo Definição do site. Esta caixa de diálogo pode ser preenchida de dois modos: Básico ou Avançado. O método básico o orienta através da configuração do site passo a passo. Se preferir editar as informações do site sem ajuda, clique na guia Avançado. O procedimento a seguir descreve como definir as opções na versão básica da caixa de diálogo, que também é conhecido como Assistente de definição do site. Para mais detalhes sobre como definir as opções avançadas, clique na guia Avançado e no botão de ajuda. Para definir um site: 1. Escolha Site > Novo site (ou seja, selecione Novo site no menu Site).A caixa de diálogo Definição do site é exibida. 2. Se a caixa de diálogo estiver exibindo a guia Avançado, clique em Básico.A primeira tela do Assistente de definição do site aparece solicitando que você digite um nome para o site. 3. Na caixa de texto, digite um nome para identificar o site no Dreamweaver. Escolha o nome de sua preferência. Por exemplo: o site pode ter o nome aluguel de veículos Global. 4. Clique em Avançar para prosseguir ao passo seguinte. A tela seguinte do assistente será exibida perguntando se você deseja trabalhar com uma tecnologia de servidor. 5. Selecione a opção Não para indicar que, no momento, este site é um site estático, sem páginas dinâmicas. Para configurar um site para criar um aplicativo para a web, é preciso selecionar um tipo de documento dinâmico, como Macromedia ColdFusion, Microsoft Active Server Pages (ASP), Microsoft ASP.NET, Sun JavaServer Pages (JSP) ou PHP: Hypertext Preprocessor (PHP), e forneça as informações sobre o servidor de aplicativos. 6. Clique em Avançar para prosseguir ao passo seguinte.a tela seguinte do assistente aparece perguntando se desejar trabalhar com seus arquivos. 17

18 7. Selecione a opção Editar as cópias locais no meu computador e, em seguida, efetuar o upload para o servidor quando terminar (recomendável). Há diversas maneiras de se trabalhar com arquivos durante o desenvolvimento de um site, mas para fins desta lição, selecione esta opção. 8. A caixa de texto permite especificar uma pasta no disco local onde o Dreamweaver deverá armazenar a versão local dos arquivos do site. É mais fácil especificar um nome de pasta exato se você pesquisar a pasta em vez de digitar o caminho, portanto, clique no ícone da pasta próximo à caixa de texto.a caixa de diálogo Escolha a pasta raiz local do site será exibida. 9. Na caixa de diálogo Escolha a pasta raiz local do site, comece navegando até uma pasta em seu disco local no qual todos os sites estão armazenados. Não clique em OK ainda. Nota: Esta pasta com os sites eventualmente conterá sites múltiplos, portanto, não escolha a pasta de sites como a pasta raiz local. Esta pasta raiz local será criada em seguida para este site individual dentro da pasta de sites. Se ainda não houver uma pasta de sites, cria uma agora (com o botão de criação de pastas na caixa de diálogo Escolha a pasta raiz local do site). Denomine a pasta como Sites. O local indicado para a pasta de sites depende do sistema operacional: o No Windows, se ainda não existir um lugar para armazenar os sites, crie uma pasta no top level da unidade C e denomine-a de Sites. Isto significa que o caminho para a pasta é C:\Sites. 10. Ainda na caixa de diálogo Escolha a pasta raiz local do site, crie uma nova pasta nova dentro da pasta Sites. Nomeie a nova pasta Inicial e clique em OK para sair da caixa de diálogo Escolha a pasta raiz local do site. Esta nova pasta é a pasta raiz local de seu site. 11. Clique em Avançar para prosseguir ao passo seguinte. A tela seguinte do assistente surgirá perguntando se você deseja conectar-se ao servidor remoto. 12. Por enquanto, escolha Nenhum no menu pop-up. Clique em Avançar para prosseguir ao passo seguinte. A tela seguinte do assistente se abre exibindo um resumo das configurações. 13. Clique em Concluir. É possível configurar as informações sobre o site remoto posteriormente. No momento, as informações do site locais são suficientes para a criação de uma página. Uma mensagem de alerta informará que o Dreamweaver está prestes a criar o cache do site. Este cache do site é um recurso que o Dreamweaver utiliza para armazenar informações sobre o site para tornas as operações de acesso ao site mais rápidas. 14. Clique em OK para o Dreamweaver criar o cache do site. 18

19 O painel Site exibirá agora a nova pasta raiz local para o site atual junto com um ícone para que o usuário possa visualizar as unidades locais em forma de árvore hierárquica. O ícone é denominado Área de trabalho no Windows. O painel Site normalmente exibe todos os arquivos e pastas do site, mas por enquanto seu site não contém nenhum arquivo ou pastas. Quando houver arquivos em um site, a lista de arquivos no painel Site atua como um gerenciador de arquivos, permitindo ao usuário copiar, colar, excluir, mover e abrir arquivos da mesma maneira que na área de trabalho do computador. Se houver um conjunto de arquivos HTML locais que você deseja utilizar para criar um site da Web, é possível utilizar navegador de arquivos no painel Site para copiar esses arquivos à pasta recém-criada do site. No entanto, é possível concluir as lições deste guia utilizando os arquivos fornecidos pelo Dreamweaver antes de começar a utilizar seus próprios arquivos Como criar e salvar uma nova página Agora que o site foi configurado, é possível criar páginas da web para preenchê-lo. Ao iniciar o Dreamweaver, um documento HTML é automaticamente criado. Antes de continuar, feche este documento. Para fechar o documento em branco padronizado: Escolha Arquivo > Fechar. Para criar uma nova página: 1. Selecione Arquivo > Novo. A caixa de diálogo Novo documento é exibida. 2. Na lista de categorias à esquerda, selecione a categoria Projetos de pagina. A lista na coluna central da caixa de diálogo é renomeada como Projetos de pagina. Uma lista de modelos de páginas pré-formatadas é exibida. 3. Com as setas, localize a lista Projetos de pagina e selecione o item denominado Texto: artigo D com navegação. Nota: Há outro item com nome semelhante. Tenha cuidado para não escolher o item denominado Texto: artigo D, que não possui barra de navegação. Uma pequena visualização da página surge à direita da caixa de diálogo. Se preferir, é possível criar uma página utilizando qualquer modelos de página fornecidos ou criar uma página sem um design padronizado selecionando um item da categoria Página básica. 19

20 O restante desta lição leva em consideração que você esteja utilizando o design de página Texto: artigo D com navegação. 4. Certifique-se de que o botão de opção Documento esteja selecionado no canto direito inferior da caixa de diálogo. 5. Clique em Criar. Uma nova página é exibida com o layout selecionado em uma nova janela documento. A página aparece preenchida com o alocador de espaço de texto Lorem ipsum, que mostra como será o aspecto da página quando o texto for adicionado. 6. Salve o documento. Para salvar a nova página: 1. Escolha Arquivo > Salvar. 2. Na caixa de diálogo Salvar como, localize a pasta Design dentro da pasta raiz do site.lembre-se: a pasta raiz do site é a pasta criada ao configurar o site em Configurar um site local. 3. Digite o nome de arquivo index.htm. 4. Clique em Salvar.O nome de arquivo aparecerá na barra de título da janela do documento em parênteses, após as palavras Documento sem título. Visualizar no navegador A visualização do projeto dá uma idéia geral de como a página será exibida no navegador, mas a única maneira de verificar a aparência final da página é visualizando-a no navegador. Cada versão de navegador tem suas próprias peculiaridades. Com o Dreamweaver, os códigos HTML são compatíveis em quase todos os navegadores, mas às vezes certas diferenças não podem ser evitadas (é por isso que o Dreamweaver não exibe uma visualização diretamente, pois o Dreamweaver não pode simular todos os comportamentos diferentes de todos os navegadores). A visualização no navegador exibe o formato das páginas após sua publicação. Para visualizar as páginas: 1. Caso index.htm não seja o documento atual, torná-lo o documento atual (abrir o documento se estiver fechado). 2. Pressione a tecla F12. O navegador primário será iniciado caso não ainda esteja funcionando. O navegador exibe a página de índice. Nota: O Dreamweaver deve detectar automaticamente o navegador primário e utilizá-lo para visualização. Se a visualização não aparecer ou se não aparecer no navegador conforme esperado, retorne para o Dreamweaver (se necessário) e selecione Arquivo > Visualizar no navegador > Editar a lista de navegadores. A caixa de diálogo Preferências visualizar no navegador é exibida e adicione o navegador correto à lista. Para obter mais informações, clique no botão Ajuda da caixa de diálogo Preferências. 3. Mova o ponteiro para apontar para as imagens cambiáveis para exibir a mudança das imagens. Clique nos links para verificar se funcionam. Defina o título da página É possível definir diversas propriedades para uma página, incluindo título, cor de fundo, cor de texto e assim consecutivamente (para definir as propriedades de uma página, selecione Modificar > Propriedades da página). No entanto, se desejar definir o título da página (o título que se aparece na barra de título do navegador), utilize a barra de ferramentas do documento. Para definir um título de página para seu documento: 20

21 1. Se a barra de ferramentas não estiver visível, selecione Exibir > Barras de ferramentas > Documento. A barra de ferramenta do documento do Dreamweaver é exibida. Na área de trabalho integrada, a barra será exibida normalmente na parte superior da área do documento e, na área de trabalho flutuante, aparecerá como parte da janela Documento. 2. Na caixa de texto Título, onde aparece Documento sem título, digite um título para a página, por exemplo: página inicial, Locação de veículos Global. Em seguida, pressione a tecla Enter para visualizar o título da página atualizado na barra de título da janela Documento. 3. Salve o documento. Definição de uma imagem de fundo ou de uma cor de fundo para a página Para definir uma imagem ou cor de fundo da página, utilizar a caixa de diálogo Propriedades da página. Se utilizar tanto uma imagem de fundo quanto uma cor de fundo, a cor aparecerá durante o download da imagem e, então, esta cobrirá a cor. Se a imagem de fundo contiver algum pixel transparente, a cor de fundo transparecerá. Para definir uma imagem ou cor de fundo: 1. Escolha Modificar > Propriedades da página ou selecionar Propriedades da página, no menu contextual, na visualização do projeto da janela do documento. 2. Para definir uma imagem de fundo, clique no botão Procurar e, depois, procurar a imagem e selecioná-la. Uma alternativa é digitar o caminho da imagem de fundo na caixa Imagem de fundo. O Dreamweaver colocará lado a lado (repetirá) a imagem de fundo se esta não preencher toda a janela, exatamente como fazem os navegadores. Para que a imagem de fundo não seja colocada lado a lado, utilizar a opção Folhas de estilo em cascata para desativar a repetição de imagens. 3. Para definir uma cor de fundo, clique na caixa Cor de fundo e selecionar uma cor no seletor de cores. Como trabalhar com as cores No Dreamweaver, muitas caixas de diálogo, assim como o inspetor de propriedades de diversos elementos de páginas, contêm uma caixa de cores, que abre um seletor de cores. Utilize o seletor de cores para escolher uma cor para um elemento da página. Para escolher uma cor no Dreamweaver: 1. Clique em uma caixa de cores de qualquer caixa de diálogo ou do inspetor de propriedades. O seletor de cores é exibido. 21

22 2. 3. Siga um dos procedimentos abaixo: Utilize o conta-gotas para selecionar uma exemplo de cor na paleta. Todas as cores exibidas nas paletas Cubos de cor (padrão) e Tom contínuo são aceitas pela Web, mas as cores de outras paletas não. 4. Utilize o conta-gotas para selecionar uma cor de qualquer lugar da tela, inclusive fora das janelas do Dreamweaver. Se você clicar na área de trabalho ou em outro aplicativo, o Dreamweaver selecionará a cor do local clicado, porém é possível alternar para o outro aplicativo; neste caso, clique em uma janela do Dreamweaver, para continuar a trabalhar neste programa, ou mantenha pressionado o botão do mouse enquanto move do Dreamweaver para a área de trabalho, a fim de evitar sair do Dreamweaver. 5. Para aumentar a seleção de cores, utilizar o menu pop-up localizado no canto superior direito do seletor de cores. É possível selecionar Cubos de cor, Tom contínuo, Windows, Mac OS, Tons de cinza e Passar à cor aceita pela Web. Deve-se observar que as paletas Cubos de cor e Tom contínuo são aceitas pela Web, mas as paletas Windows, Mac OS e Tons de cinza não são. Se estiver utilizando uma paleta que não for aceita pela Web e, em seguida, escolher Passar à cor aceita pela Web, o Dreamweaver substituirá a cor selecionada pela cor mais próxima aceita pela Web. Em outras palavras, é possível que a cor não corresponda à que for visualizada. Para limpar a cor atual sem ter de escolher outra cor, clique no botão Tachado. 6. Para abrir o seletor de cores do sistema, clique no botão Roda de cores. Seleção de elementos na janela do documento Para selecionar um elemento na visualização do projeto da janela do documento, clique no elemento. Se um elemento está invisível, é necessário torná-lo visível para poder selecioná-lo. Para selecionar elementos, utilizar as seguintes técnicas: Para selecionar um elemento visível na janela do documento, clique nele ou arrastar o mouse sobre o elemento. Para selecionar um elemento invisível, escolher Exibir > Auxílios visuais > Elementos invisíveis (se esse item de menu já não estiver selecionado) e, em seguida, clique no marcador do elemento na janela do documento. Alguns objetos são exibidos na página em um lugar diferente de onde foi inserido o código correspondente. Por exemplo: uma camada pode estar em qualquer posição na página, mas o código que a define estará em uma posição fixa. Quando os elementos invisíveis estiverem sendo exibidos, o Dreamweaver mostrará os marcadores na janela do documento para indicar a localização do código de tais elementos. A seleção de um marcador seleciona o elemento inteiro. Por exemplo: a seleção do marcador de uma camada seleciona toda a camada. Para selecionar uma tag completa (inclusive o seu conteúdo, se houver), clique em uma tag do seletor de tags, localizado na parte inferior esquerda da janela do documento (o seletor de tags é exibido tanto na visualização do projeto como na visualização do código). O seletor sempre mostra as tags que contêm a seleção atual ou o ponto de inserção. A tag mais à esquerda é a tag mais externa que contém a seleção atual ou o ponto de inserção. A tag seguinte está contida na tag mais externa e assim por diante. A tag mais à direita é a tag mais interna, que contém a seleção atual ou o ponto de inserção. 22

23 No exemplo a seguir, o ponto de inserção está em uma tag de parágrafo, <p>. Para selecionar a tabela na qual há um marcador de parágrafo, selecione a tag <table> à esquerda da tag <p>. Para ver o código HTML associado ao texto ou objeto selecionado, seguir um dos procedimentos abaixo: Na barra de ferramentas Documento, clique no botão Mostrar a visualização do código. Selecione Exibir > Código. Na barra de ferramentas Documento, clique no botão Mostrar visualizações de código e do projeto. Selecione Exibir > Código e projeto. Selecione Janela > Outros > Inspetor de código. Ao selecionar um elemento em um dos editores de código (a visualização do código ou o inspetor de código), ele também é selecionado na janela do documento. Como inserir e formatar texto O Macromedia Dreamweaver MX oferece diversas formas de adicionar e formatar texto em um documento. Este capítulo descreve como inserir texto, definir tipo de fonte, tamanho, cor e atributos de alinhamento, além de como criar e aplicar seus próprios estilos personalizados usando estilos HTML e CSS (Folhas de estilos em cascata, Cascading Style Sheet). Como inserir e formatar texto HTML A formatação no Dreamweaver é semelhante à utilização de um processador de texto padrão. No inspetor de propriedades, utilizar o submenu Texto > Formato do parágrafo ou o menu pop-up Formato para definir o estilo de formatação padrão (Parágrafo, Pré-formatado, Cabeçalho 1, Cabeçalho 2, etc.) para um bloco de texto. Para alterar a fonte, o tamanho, a cor e o alinhamento do texto selecionado, use o menu Texto ou o inspetor de propriedades. Para aplicar formatação de texto como negrito, itálico, código, sublinhado, etc., utilizar o submenu Texto > Estilo. É possível também combinar várias tags HTML padrão para formar um único estilo, denominado estilo HTML. Por exemplo: é possível aplicar a formatação HTML manualmente utilizando uma combinação de tags e atributos e salvar essa formatação como um estilo HTML; isso é salvo no painel Estilos HTML. Sempre que o usuário desejar formatar texto utilizando essa combinação de tags HTML, basta selecionar o estilo salvo no painel Estilos HTML. Os estilos HTML contam com suporte de quase todos os navegadores da Web e economizam tempo em relação à formatação manual de texto. Outro tipo de estilo, denominado folhas de estilos em cascata (Cascading Style Sheets CSS), permite formatar as páginas e o texto, com a vantagem da atualização automática. Os estilos CSS podem ser armazenados diretamente no documento ou, para se obter mais capacidade e flexibilidade, em uma folha de estilos externa. Se uma folha de estilos externa for anexada a várias páginas da Web, todas as páginas refletirão automaticamente quaisquer alterações feitas na folha de estilos. Para acessar estilos CSS, utilizar o painel Estilos CSS ou o modo CSS do inspetor de propriedades do texto. A formatação HTML manual e os estilos HTML aplicam a formatação usando as tags HTML padrão (tais como b, i, font e code) que contam com suporte de todos os navegadores da Web conhecidos. Os estilos CSS definem a formatação para o texto inteiro em uma determinada classe ou redefinem a formatação para uma tag HTML específica (como h1, h2, p ou li). Os estilos CSS contam com suporte apenas dos navegadores da Web Firefox 1.0 e Microsoft Internet Explorer 4.0, e de suas versões mais avançadas. Em uma mesma página, podem ser utilizados os estilos CSS e HTML, bem como a formatação HTML manual. A formatação é aplicada de uma forma hierárquica, a formatação HTML manual anula a formatação aplicada por um estilo HTML ou CSS, e estilos CSS incorporados em um documento anulam estilos CSS externos. Adição de texto a um documento 23

24 Há várias formas de adicionar texto a um documento do Dreamweaver. É possível digitar texto diretamente na janela do documento do Dreamweaver ou recortar e colar ou importar texto de outros documentos. Para adicionar texto a um documento, seguir um dos procedimentos abaixo: Digite o texto diretamente na janela do documento. Copie o texto de outro aplicativo, alternar para o Dreamweaver, posicionar o ponto de inserção na visualização do projeto da janela do documento e escolher Editar > Colar. O Dreamweaver não manterá a formatação de texto que foi aplicada no outro programa, mas preservará as quebras de linha. Como importar texto de outros documentos É possível importar dados tabulares para um documento através da salva inicial dos arquivos (tais como arquivos do Microsoft Excel ou de um banco de dados) como arquivos de texto delimitados. Também é possível importar texto de documentos HTML do Microsoft Word. Para importar dados tabulares: 1. Escolha Arquivo > Importar > Importar os dados tabulares ou selecione Inserir > Dados tabulares. A caixa de diálogo Importar os dados da tabela é exibida. Procure o arquivo desejado ou digite o seu nome na caixa de texto. 2. Selecione o delimitador utilizado quando o arquivo foi salvo como texto delimitado. As opções disponíveis são Tabulação, Vírgula, Ponto-e-vírgula, Dois pontos e Outro. Se for selecionado Outro, aparecerá um campo em branco ao lado da opção. Digite o caractere que foi utilizado como um delimitador. 3. Utilize as demais opções para formatar ou definir a tabela para a qual os dados serão importados. 4. Clique em OK quando terminar. Adição de espaço entre caracteres O HTML só permite um espaço entre caracteres. Para adicionar espaço adicional em um documento, é necessário inserir um espaço não-separável. É possível definir uma preferência para adicionar automaticamente espaços não-separáveis em um documento. Para definir esta preferência, escolha Editar > Preferências e, na categoria Geral, certificar-se de que Permitir múltiplos espaços consecutivos esteja marcada. Para inserir um espaço não-separável, seguir um dos procedimentos abaixo: Na barra Inserir, selecione Caractere e, em seguida, clique no ícone Inserir espaço não-separável. Escolha Inserir > Caracteres especiais > Espaço não-separável. Pressione Control+Shift+Barra de espaço. Adição de espaços entre parágrafos O Dreamweaver funciona de forma semelhante a vários aplicativos de processamento de texto: o usuário pressiona Enter para criar um novo parágrafo. Navegadores da Web inserem automaticamente um espaço de linha em branco entre os parágrafos. É possível adicionar um espaço de uma única linha entre parágrafos inserindo uma quebra de linha. Para adicionar um retorno de parágrafo: Pressione a tecla Enter. Para adicionar uma quebra de linha, seguir um dos procedimentos abaixo: Pressione Shift+Enter. Na barra Inserir, selecione Caractere e, em seguida, clique no ícone Quebra de linha. Escolha Inserir > Caracteres especiais > Quebra de linha. 24

25 Formatação do texto Pode-se aplicar formatação de texto HTML a uma letra ou criar um site inteiro, utilizando os comandos Texto > Formato do parágrafo ou as opções no inspetor de propriedades. Esse tipo de formatação manual substitui ou anula a formatação definida por um estilo HTML ou CSS. Para aplicar a formatação de texto HTML, utilizar o inspetor de propriedades e os comandos no menu Texto. Por exemplo: Texto > Formato do parágrafo, e Texto > Estilo. Definição e alteração de fontes e estilos Utilize opções do inspetor de propriedades ou do menu Texto para definir ou alterar características da fonte de um texto selecionado. É possível definir o tipo de fonte, o estilo (como negrito ou itálico) e o tamanho. Quando é utilizado o inspetor de propriedades para aplicar o estilo negrito ou itálico, o Dreamweaver aplica a tag <strong> ou <em>, respectivamente, de modo automático. Se estiverem sendo criadas páginas para visitantes que possuem navegadores versão 3.0 ou mais antigas, alterar essa preferência na categoria Geral da caixa de diálogo Preferências (Editar > Preferências). Os tamanhos de fontes HTML são pontos de tamanho relativo e não específico. Os usuários definem o tamanho do ponto da fonte padrão para os seus navegadores; esse tamanho de fonte será visto quando for selecionado Padrão ou 3, no inspetor de propriedades ou no submenu Texto > Tamanho. Os tamanhos 1 e 2 aparecerão menores do que o tamanho padrão de fonte; os tamanhos 4 a 7 aparecerão maiores. Além disso, as fontes costumam parecer maiores no Windows do que no Macintosh, apesar de o Internet Explorer 5 no Macintosh utilizar o mesmo tamanho de fonte padrão que o Windows. Dica: Um modo de garantir a consistência com o tamanho da fonte é utilizar os estilos CSS com o tamanho da sua fonte definido em pixels. Modificação de características de fontes Para definir ou alterar características da fonte: 1. Selecione o texto. Se nenhum texto for selecionado, a alteração será aplicada ao texto subseqüente que for digitado. 2. Escolha uma das seguintes opções: Para alterar a fonte, escolha uma combinação de fontes no inspetor de propriedades ou no submenu Texto > Fonte. Escolha Padrão para remover as fontes aplicadas anteriormente. A opção Padrão aplica a fonte padrão ao texto selecionado (a fonte padrão do navegador ou aquela designada para essa tag na folha de estilos CSS). Para alterar o estilo da fonte, clique em Negrito ou Itálico, no inspetor de propriedades, ou escolher um estilo de fonte (negrito, itálico, sublinhado, etc.) no submenu Texto > Estilo. 3. Para alterar o tamanho da fonte, escolha um tamanho (1 a 7), no inspetor de propriedades ou no submenu Texto > Tamanho. 4. Para aumentar ou diminuir o tamanho do texto selecionado, escolha um tamanho relativo (+1 a + 4 ou 1 a 3) no inspetor de propriedades ou no submenu Texto > Alterar o tamanho. Nota: Esses números indicam uma diferença relativa do tamanho da fonte básica. O valor da fonte básica padrão é 3. Então, um valor +4 resulta em um tamanho de fonte de ou 7. O total máximo dos valores de tamanho de fonte é 7. Se tentar-se definir um valor superior, ele será exibido como 7. O Dreamweaver não exibe a tag basefont (que aparece na seção head), embora o tamanho da fonte deva ser exibido corretamente em um navegador. Para testar esse procedimento, compare textos definidos para 3 e +3. Modificação de combinações de fontes Utilize o comando Editar a lista de fontes para definir as combinações de fontes que aparecem no inspetor de propriedades e no submenu Texto > Fonte. 25

26 As combinações de fontes determinam como um navegador exibe o texto na sua página da Web. O navegador utiliza a primeira fonte na combinação que estiver instalada no sistema do usuário; se nenhuma das fontes na combinação estiver instalada, ele exibirá o texto conforme a especificação das preferências do navegador do usuário. Para modificar as combinações de fontes: 1. Escolha Texto > Fonte > Editar a lista de fontes. 2. Selecione a combinação de fontes na lista situada no alto da caixa de diálogo. As fontes na combinação selecionada estão relacionadas na lista Fontes escolhidas, no canto inferior esquerdo da caixa de diálogo. À direita, há uma lista com todas as fontes disponíveis, instaladas no seu sistema. 3. Escolha uma das seguintes opções: Para adicionar ou remover fontes de uma combinação de fontes, clique no botão de seta (<< ou >>) entre as listas Fontes escolhidas e Fontes disponíveis. 4. Para adicionar ou remover uma combinação de fontes, clique nos botões com sinal de adição (+) e de subtração ( ), no alto da caixa de diálogo. 5. Para adicionar uma fonte não instalada no sistema, digite o nome da fonte no campo de texto abaixo da lista Fontes disponíveis e clique no botão << para adicioná-la na combinação. A adição de uma fonte não instalada no sistema é útil, por exemplo, para designar uma fonte específica do Windows quando o usuário está desenvolvendo páginas em um Macintosh. 6. Para mover a combinação de fontes para cima ou para baixo na lista, clique nos botões de seta, na parte superior da caixa de diálogo. Para adicionar uma nova combinação a uma lista de fontes: 1. Escolha Texto > Fonte > Editar a lista de fontes. 2. Selecione uma fonte na lista Fontes disponíveis e clique no botão << para mover a fonte para a lista Fontes escolhidas. 3. Repita a etapa 2 para cada fonte subseqüente na combinação. Para adicionar uma fonte não instalada no sistema, digite o nome da fonte no campo de texto abaixo da lista Fontes disponíveis e clique no botão << para adicioná-la na combinação de fontes. A adição de uma fonte não instalada no sistema é útil, por exemplo: para designar uma fonte específica do Windows quando o usuário está desenvolvendo páginas em um Macintosh. 4. Ao terminar a seleção das fontes específicas, selecione uma família de fontes genérica no menu Fontes disponíveis e clique no botão <<, para mover a família genérica para a lista Fontes escolhidas. As famílias de fontes genéricas incluem cursivas, fantasia, monoespaçadas, sans-serif e serif. Se nenhuma das fontes na lista Fontes escolhidas estiver disponível no sistema do usuário, o texto aparecerá na fonte padrão associada à família de fontes genérica. Por exemplo: a fonte monoespaçada padrão na maioria dos sistemas é Courier. Formatação de parágrafos Utilize o menu pop-up Formato, no inspetor de propriedades, ou o submenu Texto > Formato do parágrafo para aplicar as tags de cabeçalho e parágrafo padrão. Quando uma tag de cabeçalho é aplicada a um parágrafo, o Dreamweaver adiciona automaticamente a próxima linha de texto como um parágrafo padrão. Para alterar esta definição, escolha Editar > Preferências e, em seguida, na categoria Geral, em Opções de edição, certificar-se de que a opção Alternar para o parágrafo simples depois do cabeçalho esteja desmarcada. Para aplicar uma tag de cabeçalho ou parágrafo: 1. Coloque o ponto de inserção no parágrafo ou selecionar uma parte do texto no parágrafo. 2. No submenu Texto > Formato do parágrafo ou no menu pop-up Formato, no inspetor de propriedades, escolha uma opção: Selecione um formato de parágrafo (por exemplo: Cabeçalho 1, Cabeçalho 2, Texto pré-formatado, etc.). A tag HTML associada ao estilo selecionado (por exemplo: h1 para Cabeçalho 1, h2 para Cabeçalho 2, pre para Texto pré-formatado, etc.) será aplicada ao parágrafo inteiro. 3. Escolha Nenhum, para remover um formato de parágrafo. 26

27 Alinhamento de texto Alinhar o texto na página usando o inspetor de propriedades ou o submenu Texto > Alinhar. É possível centralizar qualquer elemento em uma página utilizando o comando Texto > Alinhar > No centro. Para alinhar o texto: 1. Selecione o texto a ser alinhado ou simplesmente inserir o indicador no início do texto. 2. Clique em uma opção de alinhamento (À esquerda, À direita, No centro), no inspetor de propriedades, ou escolha Texto > Alinhar e selecionar um comando de alinhamento. Para centralizar os elementos: 1. Selecione o elemento (imagem, plug-in, tabela ou um outro elemento da página) a ser centralizado. 2. Escolha Texto > Alinhar > No centro. Nota: É possível alinhar e centralizar blocos inteiros de texto; é impossível alinhar ou centralizar parte de um cabeçalho ou de um parágrafo. Recuo de texto O uso do comando Recuo aplica a tag de HTML blockquote a um parágrafo de texto, recuando o texto nos dois lados da página. Para recuar o texto e remover o recuo: 1. Coloque o ponto de inserção no parágrafo a ser recuado. 2. Clique no botão Recuo ou Remover o recuo, no inspetor de propriedades, escolha Texto >Recuo ou Remover o recuo ou selecionar Lista > Recuo ou Remover o recuo no menu contextual. Nota: É possível aplicar vários recuos a um parágrafo. Cada vez que este comando é escolhido, o texto recua mais nos dois lados do documento. Alteração da cor do texto É possível alterar a cor do texto selecionado, para que a nova cor anule a cor do texto definida em Propriedades da página (se nenhuma cor tiver sido definida em Propriedades da página, a cor de texto padrão será preto). Para alterar a cor do texto: 1. Selecione o texto. 2. Escolha uma das seguintes opções: Escolha uma cor na paleta de cores aceitas pelo navegador clicando no seletor de cores, no inspetor de propriedades. 3. Escolha Texto > Cor. A caixa de diálogo Seletor de cores do sistema é exibida. Selecione uma cor e clique em OK. 4. Digite o nome da cor ou um número hexadecimal diretamente no campo do inspetor de propriedades. 5. Para definir a cor padrão do texto, utilizar o comando Modificar > Propriedades da página. Para retornar o texto à cor padrão: 1. No inspetor de propriedades, clique na caixa de cores para abrir a paleta de cores aceitas pela-web. 2. Clique no botão Riscado (o botão quadrado branco com uma linha vermelha cortando-o, situado no canto superior direito). Criação de listas com marcadores e numeradas À medida que digita na janela do documento, podem ser criadas listas numeradas (ordenadas), listas com marcadores (não-ordenadas) e listas de definições com base em um texto existente ou em um novo texto. As listas de definições não utilizam caracteres à esquerda, como marcadores ou números, porém estes são utilizados freqüentemente em glossários ou descrições. As listas também podem ser aninhadas. Listas aninhadas são listas que 27

28 contêm outras listas. Por exemplo: o usuário poderá querer aninhar uma lista ordenada ou com marcadores em uma outra lista numerada ou ordenada. Para criar uma nova lista: 1. No documento do Dreamweaver, colocar o ponto de inserção onde será adicionada uma lista e, em seguida, seguir um dos procedimentos abaixo: Clique no botão Lista com marcadores ou Lista numerada no inspetor de propriedades 2. Escolha Texto > Lista e selecionar o tipo de lista desejado - Lista não-ordenada (com marcadores), Lista ordenada (numerada) ou Lista de definições. O caractere à esquerda do item de lista especificado é exibido na janela do documento. 3. Digite o texto do item de lista e, em seguida, pressionar Enter para criar um outro item de lista. 4. Para concluir a lista, pressionar duas vezes Enter. Para criar uma lista usando texto já existente: 1. Escolha uma série de parágrafos para transformá-los em uma lista. 2. Clique nos botões Lista com marcadores ou Lista numerada, no inspetor de propriedades, ou escolha Texto > Lista e selecionar o tipo de lista desejado: Lista não-ordenada, Lista ordenada ou Lista de definições. Para criar uma lista aninhada: 1. Selecione os itens da lista a serem aninhados. 2. Clique no botão Recuo, no inspetor de propriedades, ou escolha Texto > Recuo. O Dreamweaver recuará o texto e criará uma lista separada com os atributos HTML da lista original. 3. Aplicar um novo estilo ou tipo de lista ao texto recuado, seguindo o mesmo procedimento utilizado acima. Como inserir datas O Dreamweaver fornece um objeto Data conveniente, que insere a data atual em qualquer formato preferido (com ou sem a hora) e dá ao usuário a opção de atualizar a data sempre que o arquivo for salvo. Nota: As datas e horas mostradas na caixa de diálogo Inserir data não representam a data atual nem refletem as datas/horas vistas por um visitante quando ele exibe o seu site. Estes são apenas exemplos da maneira de mostrar essas informações. Para inserir a data atual em um documento: 1. Na janela do documento, colocar o ponto de inserção onde a data deverá ser inserida. 2. Siga um dos procedimentos abaixo: Escolha Inserir > Data. 3. Na barra Inserir, selecione Comuns e, em seguida, clique no botão Data. 4. Na caixa de diálogo que aparecer, selecionar os formatos para o nome do dia da semana, a data e a hora. 5. Para que a hora inserida seja atualizada sempre que o documento for salvo, selecione Atualizar automaticamente ao salvar. Para transformar a data em texto simples, quando for inserida, e nunca atualizála automaticamente, desmarque esta opção. 6. Clique em OK, para inserir a data. Dica: Se for escolhida a opção Atualizar automaticamente ao salvar, é possível editar o formato da data após ter sido inserida no documento, através do clique no texto formatado e da seleção de Editar o formato da data, no inspetor de propriedades. Como inserir caracteres especiais Alguns caracteres especiais são representados em HTML por um nome ou número, referenciado como uma entidade. O HTML inclui nomes de entidades para caracteres como símbolo de copyright ( ), o "e" comercial (&) e o símbolo de marca registrada ( ). Cada entidade contém um nome (por exemplo: ) e um equivalente numérico (por exemplo: &#151;). 28

29 Dica: O HTML utiliza chaves <> no seu código, mas talvez seja necessário expressar os caracteres especiais correspondentes a maior ou menor do que, sem que o Dreamweaver os interprete como código. Nesse caso, utilizar > para maior do que (>) e &it; para menor do que (<). Infelizmente, muitos navegadores (especialmente, os mais antigos e aqueles diferentes do Firefox e Internet Explorer) não exibem corretamente muitas das entidades denominadas. É possível inserir vários caracteres especiais (como entidades HTML) escolhendo a categoria Caracteres na barra Inserir. Para inserir um caractere especial em um documento: 1. Na janela do documento, colocar o ponto de inserção onde o caractere especial deverá ser inserido. 2. Siga um dos procedimentos abaixo: Escolha o nome do caractere no submenu Inserir > Caracteres. 3. Na barra Inserir, escolha a categoria Caracteres e selecionar o caractere desejado. Dica: Há vários outros caracteres especiais disponíveis. Para selecionar um deles, escolha Inserir > Caracteres > Mais ou selecionar o ícone Inserir mais caracteres, na barra Inserir, selecione um caractere e clique em OK. Utilização de réguas horizontais As réguas horizontais (linhas) são úteis para organizar informações. Em uma página, o texto e os objetos podem ser separados visualmente por meio de uma ou mais réguas. Para criar uma régua horizontal: 1. Na janela do documento, colocar o ponto de inserção onde será inserida uma régua horizontal. 2. Siga um dos procedimentos abaixo: Escolha Inserir > Régua horizontal. 3. Na barra Inserir, selecione Comuns e, em seguida, clique no botão Régua horizontal. Para modificar uma régua horizontal: 1. Na janela do documento, selecione uma régua horizontal. 2. Escolha Janela > Propriedades, para abrir o inspetor de propriedades, e modifique as propriedades conforme desejar. L e U especificam a largura e a altura da régua em pixels ou como uma percentagem do tamanho da página. Alinhar especifica o alinhamento da régua (Padrão, À esquerda, No centro ou À direita). Esta definição será aplicada apenas quando a largura da régua for menor do que a da janela do navegador. Sombreado especifica se a régua será desenhada com sombreado. Desmarcar esta opção para desenhar a régua com uma cor sólida. Sobre CSSs (Cascading Style Sheets) CSS (Cascading Style Sheets) são um conjunto de regras de formatação que controlam a aparência do conteúdo em uma página da Web. Estilos CSS oferecem grande flexibilidade e controle da aparência exata da página, desde o posicionamento preciso do layout até fontes e estilos específicos. Os estilos CSS permitem controlar muitas propriedades que não podem ser controladas apenas através do HTML. Por exemplo: é possível atribuir marcadores de listas personalizados e especificar diferentes tamanhos de fontes e unidades (pixels, pontos, etc.). É possível garantir um tratamento mais consistente do layout e da aparência da página em vários navegadores, utilizando estilos CSS e definindo tamanhos de fontes em pixels. Além da formatação do texto, é possível controlar o formato e o posicionamento de elementos em nível de bloco em uma página da Web. Por exemplo: é possível definir margens, bordas, texto flutuante em torno de outro texto, e assim por diante. Uma regra de estilo CSS consiste em duas partes - o seletor e a declaração. O seletor é o nome do estilo (como TR ou P) e a declaração define os elementos do estilo. A declaração consiste em duas partes, a propriedade (como font-family) e o valor (como Helvetica). O termo em cascata se refere à sua habilidade para aplicar várias 29

30 folhas de estilo à mesma página da Web. Por exemplo: é possível criar uma folha de estilo para aplicar cor e outra para aplicar margens, e aplicá-los à mesma página para criar o projeto desejado. Uma grande vantagem de estilos CSS é que eles oferecem a capacidade de fácil atualização. Quando um estilo CSS é atualizado, a formatação de todos os documentos que utilizam esse estilo é atualizada automaticamente par ao novo estilo. No Dreamweaver, é possível utilizar o painel Estilos CSS para criar, exibir e anexar atributos de estilo a documentos. Além dos estilos e das folhas de estilos criadas, é possível utilizar folhas de estilo que acompanham o Dreamweaver para aplicar estilos aos documentos. É possível definir os tipos de folhas de estilos CSS a seguir no Dreamweaver: Estilos CSS personalizados, também chamados de estilos de classe, permitem definir atributos de estilo a qualquer faixa ou bloco de texto. Os estilos de tags HTML redefinem a formatação de uma tag específica, como h1. Quando for criado ou alterado um estilo CSS para a tag h1, todos os textos formatados com a tag h1 serão imediatamente atualizados. Os estilos do seletor CSS redefinem a formatação de uma determinada combinação de tags (por exemplo: td h2 será aplicado sempre que um cabeçalho h2 aparecer em uma célula de tabela) ou de todas as tags que contiverem um atributo id (por exemplo: #mystyle será aplicado a todas as tags que contiverem o par atributo-valor ID="myStyle"). As folhas de estilos CSS residem na área head de um documento. Estilos CSS podem definir os atributos de formatação para tags HTML, faixas de texto identificadas por um atributo class. O Dreamweaver MX reconhece os estilos definidos em documentos existentes, contanto que eles estejam em conformidade com as instruções CSS. A formatação HTML manual anula a formatação aplicada com os estilos CSS (ou HTML). Para que os estilos CSS controlem a formatação de um parágrafo, remover toda a formatação HTML manual ou os estilos HTML. A maioria dos atributos de estilo aplicados podem ser exibidos na janela do documento. Também é possível visualizar o documento em uma janela do navegador para vê-lo aplicado. Alguns dos atributos de estilo CSS têm uma aparência diferente no Microsoft Internet Explorer e no Firefox, e alguns não contam atualmente com suporte de nenhum navegador. Durante o trabalho no painel Estilos CSS, é possível utilizar o recurso Folhas de estilo para design do Dreamweaver. Este recurso permite ocultar ou mostrar atributos de folha de estilo durante o projeto de uma página no Dreamweaver (por exemplo: para exibir um documento com uma folha de estilo projetada para o Firefox ou o Internet Explorer). Como utilizar o painel Estilos CSS O painel Estilos CSS é utilizado para criar, exibir propriedades de e aplicar estilos CSS a elementos de um documento. Para abrir o painel Estilos CSS, seguir um dos procedimentos abaixo: Escolha Janela > Estilos CSS. Pressione Shift+F11. Os botões de opção Aplicar estilos e Editar estilos, localizados na parte superior do painel Estilos CSS, permitem selecionar diferentes visualizações dos estilos CSS associados ao documento atual. É possível utilizar a visualização Aplicar estilos para selecionar um estilo de classe para aplicar a um elemento no documento. A visualização Aplicar estilos só exibe estilos (classe) personalizados. Estilos HTML redefinidos e estilos de seletor não são exibidos neste painel. Como eles estão associados a uma tag de HTML, seus atributos de estilo são automaticamente aplicados a quaisquer tags do documento afetadas pelo estilo definido. Por exemplo: se forem definidos atributos de estilo para a tag de tabela, uma tabela do documento será atualizada automaticamente com as definições de estilo selecionadas. 30

31 A visualização Editar estilos permite verificar a definição de estilo dos estilos associados ao documento atual. A visualização Editar estilos exibe definição de estilo de estilos (classe) CSS personalizados, tags HTML redefinidas e estilos de seletor CSS. A visualização Editar estilos também é utilizada para exibir Folhas de estilo para design que foram aplicadas ao documento. À medida que uma folha de estilo CSS é criada ou anexada, o nome e os atributos do estilo são exibidos na visualização Editar estilos do painel Estilos CSS. Editar estilos lista todos os seletores definidos em todas as tags de estilo e vinculados externamente ou folhas de estilo importadas. Aplicar estilos permite exibir estilos aplicados no documento atual, bem como estilos disponíveis em uma folha de estilo externa anexada. Quando for criado um estilo (classe) personalizado, ele aparecerá no painel Estilos CSS e no submenu Texto > Estilos CSS. Os botões a seguir estão localizados na parte inferior do painel Estilos CSS: O botão Anexar a folha de estilos abre a caixa de diálogo Vincular a folha de estilos externa. Selecione uma folha de estilos externa para vincular ou importar para o documento atual. O botão Novo estilo CSS abre a caixa de diálogo Novo estilo CSS. Utilize o diálogo Novos estilos CSS para selecionar o tipo de estilo que está sendo criado - por exemplo: para criar um estilo de classe, redefinir uma tag de HTML ou definir um seletor CSS. A opção Editar a folha de estilos abre a caixa de diálogo Definição de estilos CSS. Editar qualquer um dos estilos no documento atual ou em uma folha de estilos externa. A opção Excluir o estilo CSS remove o estilo selecionado do painel Estilos CSS e remove a formatação de qualquer elemento ao qual o estilo tenha sido aplicado. Nota: Clique com o botão direito do mouse no painel Estilos CSS para abrir um menu contextual de opções para trabalhar com comandos da Folha de estilos CSS. Criação de um novo estilo CSS Crie um estilo CSS para automatizar a formatação das tags HTML ou uma faixa de texto identificada por um atributo class. Para criar um novo estilo CSS: 1. Coloque o ponto de inserção no documento e seguir um dos procedimentos abaixo para abrir a caixa de diálogo Novo estilo CSS: No painel Estilos CSS (Janela > Estilos CSS), clique no botão Novo estilo CSS (+), localizado na área inferior direita do painel. 2. No inspetor de propriedades do texto, clique no botão Alternar modo CSS/HTML, se necessário, para alternar para o Modo CSS e, em seguida, no menu pop-up Estilo CSS, selecione Novo estilo CSS. 3. Escolha Texto > Estilos CSS > Novo estilo CSS. A caixa de diálogo Novo estilo CSS é exibida. 4. Defina o tipo de estilo CSS que deseja criar: Para criar um estilo personalizado que possa ser aplicado como um atributo class a uma faixa ou bloco de texto, selecione Criar estilo personalizado (Classe) e, em seguida, no campo Nome, digite um nome para o estilo. 31

32 Nota: Os nomes de estilo personalizado (classe) devem iniciar com um ponto e podem conter qualquer combinação de letras e números. Por exemplo:.cabeçalhocomercial1. Caso o ponto não seja inserido, o Dreamweaver o digitará automaticamente. Para redefinir a formatação padrão de uma HTML específica, selecione Redefinir a tag de HTML e, em seguida, no campo Tag, digite uma tag de HTML ou escolher uma no menu pop-up. Para definir a formatação de uma determinada combinação de tags ou de todas as tags que contêm um atributo Id específico, selecione Utilizar o seletor de CSS e, em seguida, no campo Seletor, digite uma ou mais tags de HTML ou escolha uma no menu pop-up. Os seletores disponíveis no menu pop-up são a:active, a:hover, a:link e a:visited. Selecione o local onde o estilo será definido: Para criar uma folha de estilos externa, escolha Novo arquivo de folha de estilos. Para incorporar o estilo no documento atual, escolha Apenas este documento. Clique em OK A caixa de diálogo Definição do estilo é exibida. 9. Escolha as opções de estilo a serem definidas para o novo estilo CSS. 10. Ao concluir a definição de atributos de estilo, clique em OK. Como inserir imagens As imagens costumam ser utilizadas para adicionar interfaces gráficas (como botões de navegação), apelo visual (por exemplo: fotografias) ou elementos de design interativos, como imagens cambiáveis ou um mapa de imagens. Em Macromedia Dreamweaver MX, é possível trabalhar na visualização do projeto ou do código para inserir imagens em um documento. Ao adicionar imagens em um documento Dreamweaver, é possível definir ou modificar propriedades da imagem e exibir as alterações diretamente na janela do documento. Para configurar um fluxo de trabalho de criação da Web eficiente, é possível selecionar uma preferência do editor de imagens e iniciá-la automaticamente para editar imagens durante o trabalho no Dreamweaver. Sobre uma imagem Existem muitos tipos diferentes de formatos de arquivos gráficos, mas três formatos são geralmente utilizados nas páginas da Web GIF, JPEG e PNG. Atualmente, os formatos de arquivo GIF e JPEG são os que apresentam melhor suporte e podem ser exibidos na maioria dos navegadores. Os arquivos PNG adaptam-se melhor a quase todos os tipos de gráfico da Web devido a sua flexibilidade e pequeno tamanho de arquivo; entretanto, a exibição de imagens PNG conta com suporte parcial apenas em Microsoft Internet Explorer (4.0 e navegadores posteriores) e em Firefox (1.0 e navegadores posteriores). Portanto, a não ser que seu projeto se destine a um público-alvo específico que utiliza um navegador com suporte para o formato PNG, utilizar GIFs ou JPEGs para atingir um público maior. Os arquivos GIF (Graphic Interchange Format) utilizam um máximo de 256 cores, e são mais apropriados para exibir imagens em tons descontínuos ou aquelas que contêm grandes superfícies de cores sólidas, como barras de navegação, botões, ícones, logotipos ou outras imagens com matizes e cores uniformes, por exemplo). O formato de arquivo JPEG (Joint Photographic Experts Group) é a opção mais avançada para imagens fotográficas ou de tons contínuos, porque os arquivos JPEG podem conter milhões de cores. À medida que a qualidade do arquivo JPEG aumenta, também aumentam o tamanho do arquivo e o tempo de download. Geralmente é possível equilibrar a qualidade da imagem e o tamanho do arquivo, compactando um arquivo JPEG. O formato de arquivo PNG (Portable Network Group) é um substituto livre de patentes ao GIF, que inclui suporte para as imagens que tiverem as cores indexadas, escala de cinza e true-color, além de suporte ao canal alfa de transparência. O formato PNG é o formato de arquivo nativo de Macromedia Fireworks MX. Os arquivos PNG mantêm todas as informações sobre camadas, vetores, cores e efeitos originais (por exemplo: aplicação de sombra) e, a qualquer momento, todos os elementos podem ser editados. Os arquivos devem ter extensão.png, para serem reconhecidos como PNG por Macromedia Dreamweaver MX. 32

33 Nota: O suporte a PNG é inconsistente nos navegadores; portanto, ao trabalhar com arquivos PNG, também é necessário exportá-los como GIFs ou JPEGs para garantir versões prontas para Web desses arquivos. Como inserir uma imagem Ao inserir uma imagem em um documento de Dreamweaver, o programa gerará automaticamente uma referência desse arquivo no código-fonte HTML. Para garantir que essa referência esteja correta, o arquivo de imagem deverá estar no site. Caso não esteja no site atual, o Dreamweaver perguntará se o arquivo deve ser copiado para o site. Também é possível adicionar imagens como conteúdo dinâmico. Para inserir uma imagem: 1. Posicione o ponto de inserção onde a imagem deverá ser exibida na janela do documento e, depois, seguir um dos procedimentos abaixo: Na categoria Comuns da barra Inserir, clique no ícone Imagem. 2. Na categoria Comuns da barra Inserir, arraste o ícone Imagem para a janela do documento (ou para a janela de visualização do código se estiver trabalhando no código). 3. Escolha Inserir > Imagem. 4. Arraste uma imagem do painel Propriedades (Janela > Propriedades) até a localização desejada na janela do documento; em seguida, ir para a etapa Arraste uma imagem do painel Site até a localização desejada na janela do documento; em seguida, ir para a etapa Arraste uma imagem da área de trabalho até a localização na janela do documento; em seguida, ir para a etapa Na caixa de diálogo exibida, seguir um dos procedimentos abaixo: Escolha Sistema de arquivos para escolher um arquivo gráfico. 8. Escolha Fonte de dados para escolher uma origem da imagem dinâmica. 9. Procurar para escolher a imagem ou origem do conteúdo a ser inserido. Se você estiver trabalhando em um documento que não foi salvo, o Dreamweaver irá gerar uma referência file:// para esse arquivo de imagem. Ao salvar o documento em algum lugar do site, Dreamweaver converterá a referência em um caminho relativo ao documento. 10. No inspetor de propriedades (Janela > Propriedades), definir propriedades da imagem. Como inserir um alocador de espaço de imagem Um alocador de espaço de imagem é um gráfico utilizado até que a arte-final esteja pronta para ser adicionada a uma página da Web. É possível definir determinados atributos do alocador de espaço. É possível, também, definir o tamanho e a cor do alocador de espaço, bem como fornecê-la com um identificador de texto. A cor de um alocador de espaço de imagem, os atributos de tamanho e identificador são exibidos quando o alocador de espaço de imagem é exibido na janela do documento de Dreamweaver. Quando exibido em uma janela do navegador, o texto do identificador e tamanho não é exibido. Para inserir um alocador de espaço de imagem: 1. Na janela do documento, colocar o ponto de inserção onde deseja inserir o gráfico do alocador de espaço. 2. Siga um dos procedimentos abaixo: Na barra Inserir, selecione Comuns e, em seguida, clique no ícone Alocador de espaço de imagem. 33

34 3. Na barra Inserir, selecione Comuns e, em seguida, arraste no ícone Alocador de espaço de imagem para a janela do documento. 4. Escolha Inserir > Alocador de espaço de imagem. A caixa de diálogo Alocador de espaço de imagem é exibida. 5. Na caixa de diálogo, selecione opções para o alocador de espaço de imagem. 6. Clique em OK. Definição das propriedades da imagem Esse inspetor de propriedades permite definir as propriedades de uma imagem. Se não forem exibidas todas as propriedades da imagem conforme abaixo, clique na seta de expansão, no canto inferior direito Para definir as propriedades da imagem: 1. Defina qualquer uma das opções a seguir: A opção Utilizar o campo de texto abaixo da imagem em miniatura para definir um nome que sirva de referência à imagem ao utilizar um comportamento do Dreamweaver (por exemplo: Permutar a imagem) ou ao utilizar uma linguagem de script, como JavaScript ou VBScript. As opções L e A especificam a largura e altura do filme, em pixels. Dreamweaver automaticamente atualiza esses campos com as dimensões originais da imagem, ao inserir uma imagem em uma página. Pode-se especificar o tamanho da imagem nestas unidades: pc (paicas), pt (pontos), pol (polegadas), mm (milímetros) e cm (centímetros), além de suas combinações, como, por exemplo: 2pol+5mm. Dreamweaver converterá os valores em pixels no código-fonte HTML. Se forem definidos valores para L e A que não correspondem às reais largura e altura da imagem, ela poderá não ser exibida corretamente em um navegador (para restaurar os valores originais, clique nos identificadores dos campos L e A). Nota: É possível alterar esses valores para redimensionar essa instância da imagem, mas esse procedimento não reduzirá o tempo de download porque o navegador efetuará o download de todos os dados da imagem antes de redimensioná-la. Para reduzir esse tempo e garantir que todas as instâncias de uma imagem sejam exibidas com o mesmo tamanho, utilizar um aplicativo de edição de imagens para redimensioná-las. A opção Orig. especifica o arquivo de origem da imagem. Clique no ícone correspondente à pasta para procurar o arquivo de origem, ou digitar o caminho. A opção Link especifica um hiperlink para a imagem. Arraste o ícone do indicador de arquivos até um arquivo no painel Site ou clique no ícone correspondente à pasta, para procurar um documento no seu site, ou digitar a URL. A opção Alinhar coloca uma imagem e o texto na mesma linha. A opção Alt. específica um texto alternativo que é exibido no lugar da imagem para os navegadores somente de texto ou para aqueles definidos para download manual de imagens. Para os usuários com deficiência visual, que utilizam sintetizadores de fala com navegadores somente de texto, o texto é falado em voz alta. Em alguns navegadores, esse texto também será exibido quando o ponteiro estiver sobre a imagem. A opção Nome do mapa e as ferramentas Ponto ativo permitem identificar e criar uma mapa de imagens do cliente. 34

35 As opções Espaço V e Espaço H adicionam espaço, em pixels, acima, abaixo e em ambos os lados da imagem. Espaço V adiciona espaço nas partes superior e inferior de uma imagem. Espaço H adiciona espaço nos lados esquerdo e direito de uma imagem. A opção Destino especifica a moldura ou janela na qual a página vinculada deverá ser carregada (essa opção não está disponível quando a imagem não está vinculada a outro arquivo). Os nomes de todas as molduras no conjunto de molduras atual são exibidos na lista Destino. É possível também escolher entre os nomes de destino reservados a seguir: _blank carrega o arquivo vinculado em uma janela do navegador nova e sem nome. _parent carrega o arquivo vinculado em um conjunto-pai de molduras ou na janela da moldura que contém o link. Se a moldura que contém o link não estiver aninhada, o arquivo vinculado será carregado na janela inteira do navegador. _self carrega o arquivo vinculado na mesma moldura ou janela que o link. Esse destino é o padrão; portanto, geralmente não é necessário especificá-lo. _top carrega o arquivo vinculado na janela inteira do navegador, removendo todas as molduras. A opção Orig. baixa especifica a imagem que deve ser carregada antes da imagem principal. Muitos designers utilizam uma versão de 2 bits (em preto e branco) da imagem principal, porque é carregada rapidamente e fornece aos visitantes uma idéia do que eles verão. A opção Borda define a largura, em pixels, da borda da imagem. O padrão é sem borda. A opção Editar inicia o editor de imagens especificado nas preferências de editores externos e abre a imagem selecionada. A opção Redefinir o tamanho redefine os valores L e A do tamanho original da imagem. Alinhamento de uma imagem Utilize o inspetor de propriedades para definir o alinhamento de uma imagem em relação a outros elementos na mesma linha ou parágrafo. Nota: HTML não fornece um modo de colocar texto ao redor dos limites da imagem, como é possível fazê-lo com alguns aplicativos de processamento de texto. É possível alinhar uma imagem a um texto, a outra imagem, a um plug-in ou a outros elementos na mesma linha. Também é possível utilizar os botões de alinhamento (à esquerda, à direita e no centro) para definir o alinhamento horizontal de uma imagem. A opção Padrão geralmente especifica um alinhamento da linha de base. (o padrão pode ser diferente, dependendo do navegador do visitante do site). As opções Linha de base e Pela base alinham a parte inferior do objeto selecionado à linha de base do texto (ou de outro elemento do mesmo parágrafo). A opção Pelo topo alinha a parte superior de uma imagem à parte superior do item mais alto (imagem ou texto) na linha atual. A opção No meio alinha a parte central da imagem à linha de base da linha atual. A opção Alto do texto alinha a parte superior da imagem à parte superior do caractere mais alto da linha de texto. 35

36 A opção No meio absoluto alinha a parte central da imagem à parte central do texto da linha atual. A opção O mais abaixo alinha a parte inferior da imagem à parte inferior da linha de texto (que inclui descendentes, como na letra g). A opção À esquerda coloca a imagem selecionada na margem esquerda, quebrando automaticamente as linhas do texto em volta dele à direita. Se o texto alinhado à esquerda preceder o objeto na linha, ele geralmente forçará os objetos alinhados à esquerda a passarem para a próxima linha. A opção À direita coloca o objeto na margem direita, quebrando automaticamente as linhas do texto em volta dele à esquerda. Se o texto alinhado à direita preceder o objeto na linha, ele geralmente forçará os objetos alinhados à direita a passarem para a próxima linha. Criação de uma imagem cambiável Uma imagem cambiável é aquela que, quando exibida em um navegador, é alterada quando o ponteiro é movido sobre a mesma. Esse tipo de imagem consiste, de fato, em duas imagens: a imagem primária (exibida quando a página for carregada pela primeira vez) e a imagem secundária (que será exibida quando o cursor for deslizado sobre a imagem primária). As imagens cambiáveis deverão ter o mesmo tamanho; caso contrário, o Dreamweaver redimensionará automaticamente a segunda imagem para que coincida com as propriedades da primeira. É impossível ver o efeito de uma imagem cambiável na janela do documento de Dreamweaver. Para ver o efeito cambiável, pressionar F12 para visualizar a página em um navegador e, depois, rolar o ponteiro sobre a imagem. As imagens cambiáveis são automaticamente definidas para responder ao evento onmouseover. A barra de navegação é uma forma mais complexa de imagem cambiável. Para criar uma barra de navegação, utilize o comando Inserir > Imagens interativas > Barra de navegação. Para criar uma imagem cambiável: 1. Na janela do documento, coloque o ponto de inserção no local onde deverá ser exibida a imagem cambiável. 2. Inserir a imagem cambiável por meio de um destes métodos: Na barra Inserir, selecione Comuns e depois clicar no ícone Alocador de espaço de imagem. 3. Na barra Inserir, selecione Comuns e, em seguida, arraste o ícone de Imagem cambiável para o local desejado na janela do documento. 4. Escolha Inserir > Imagens interativas > Imagem cambiável. A caixa de diálogo Inserir imagem cambiável é exibida. 5. Na caixa de texto Nome da imagem, digite um nome para a imagem cambiável. 6. Na caixa de texto Imagem original, clique em Procurar e selecione a imagem a ser exibida quando a página carregar ou digitar o caminho do arquivo de imagem na caixa de texto. 7. Na caixa de texto Imagem cambiável, clique em Procurar e selecione a imagem a ser exibida quando o ponteiro passar por cima da imagem original, ou digitar o caminho do arquivo de imagem na caixa de texto. 8. Se desejar que as imagens sejam pré-carregadas no cache do navegador para não ocorrerem atrasos quando o usuário passar o ponteiro sobre a imagem, selecione a opção Pré-carregar as imagens. 9. No Texto alternativo, digite o texto para descrever a imagem para visualizadores com um browser somente texto. (opcional) 10. Na caixa de texto Quando tiver clicado, vá para a URL, clique em Procurar e selecione o arquivo ou digitar o caminho do arquivo a ser aberto quando um usuário clicar na imagem cambiável. Nota: Se não for definido um link para a imagem, Dreamweaver insere um link nulo (#) no código-fonte HTML ao qual o comportamento de imagem cambiável estiver anexado. Se o link nulo for removido, a imagem cambiável não funcionará. 11. Clique em OK para fechar a caixa de diálogo Inserir imagem cambiável. 12. Selecione Arquivo > Visualizar no navegador ou pressionar a tecla F No navegador, passar o cursor sobre a imagem original. A exibição pode alternar para a imagem cambiável. Como inserir uma tabela 36

37 Utilize a barra Inserir ou o menu Inserir para criar uma nova tabela. Para inserir uma tabela: 1. Na visualização do projeto da janela do documento, colocar o ponto de inserção no local onde deseja que a tabela seja exibida. Nota: Se o documento não tiver nenhum conteúdo, o único local para colocar o ponto de inserção será o início do documento. 2. Siga um dos procedimentos abaixo: Clique no botão Tabela na categoria Comuns da barra Inserir. 3. Selecione Inserir > Tabela. A caixa de diálogo Inserir tabela é exibida. 4. Digite novos valores conforme desejado. Como adicionar conteúdo a uma célula da tabela É possível adicionar textos e imagens às células da tabela do mesmo modo que se adicionam textos e imagens fora de uma tabela. Ao adicionar ou editar o conteúdo de uma tabela, é possível economizar tempo utilizando o teclado para navegar pela tabela. Para passar de uma célula a outra utilizando o teclado, seguir um dos procedimentos abaixo: Pressione a tecla Tab para passar à célula seguinte. Ao pressionar Tab na última célula de uma tabela, outra linha é adicionada automaticamente à tabela. Pressione Shift+Tab para voltar à célula anterior. Pressione as teclas de seta para mover para cima, para baixo, esquerda ou direita. Como importar dados tabulares Os dados tabulares criados com outro aplicativo (como o Microsoft Excel) e salvos em um formato de texto delimitado (com itens separados por tabulações, vírgulas, dois-pontos, ponto-e-vírgula ou outros delimitadores) podem ser importados para o Dreamweaver e formatados como uma tabela. Para importar os dados da tabela: 1. Siga um dos procedimentos abaixo: Escolha Arquivo > Importar > Dados tabulares. 2. Escolha Inserir > Objetos de tabela > Importar os dados tabulares. A caixa de diálogo Importar os dados tabulares é exibida. 37

38 3. Na caixa de diálogo, fornecer as informações sobre o arquivo que contém os dados. Exibição e definição de propriedades da tabela Quando uma tabela é selecionada, o inspetor de propriedades permite exibir e alterar propriedades da tabela. Para exibir as propriedades da tabela: 1. Selecione a tabela. 2. Escolha Janela > Propriedades para abrir o inspetor de propriedades. Para exibir todas as propriedades da tabela: Se o inspetor de propriedades não estiver expandido, clique na seta de expansão, no canto inferior direito, para ver todas as propriedades. Para formatar uma tabela no inspetor de propriedades: 1. Selecione uma tabela. Escolha Janela > Propriedades para abrir o inspetor de propriedades. 2. Alterar a formatação da tabela definindo as propriedades. Como utilizar um esquema de desenho para formatar uma tabela Utilize o comando Formatar a tabela para aplicar rapidamente um estilo predefinido a uma tabela. Em seguida, as opções podem ser selecionadas para personalizar o estilo ainda mais. Nota: Somente as tabelas mais simples podem ser formatadas usando estilos predefinidos. É impossível utilizar esses estilos para formatar tabelas que contêm células mescladas (colspan ou rowspan), grupos de colunas ou outras formatações pouco comuns que impedem que a tabela seja uma simples grade retangular de células. Para utilizar um estilo de tabela predefinido: 1. Selecione a tabela e escolha Comandos > Formatar a tabela. 38

39 A caixa de diálogo Formatar a tabela é exibida. 2. Personalizar as opções, conforme desejado. 3. Clique em Aplicar ou em OK para formatar a tabela com o estilo selecionado. Definição do layout de páginas na visualização de layout O Dreamweaver oferece várias maneiras diferentes de definir o layout de páginas da Web. Um método comum de se criar um layout de página consiste na utilização de tabelas HTML para posicionar os elementos. No entanto, pode ser difícil utilizar tabelas para layouts, pois elas foram criadas originalmente para exibir dados tabulares e não para definir o layout de páginas da Web. Para dinamizar o processo de utilização de tabelas para o layout de página, o Dreamweaver fornece a visualização de layout. Na visualização de layout, é possível criar uma página utilizando tabelas como a estrutura básica, ao mesmo tempo em que se evitam alguns dos problemas que ocorrem com freqüência na criação de projetos baseados em tabelas através dos meios convencionais. Por exemplo: na visualização de layout, é possível desenhar células de layout na página e movê-las para qualquer local desejado. Também é possível criar facilmente layouts de largura fixa e layouts que podem ser automaticamente expandidos de acordo com a largura total da janela do navegador. Ainda é possível dispor as páginas utilizando tabelas segundo a maneira tradicional ou utilizando camadas e, depois, convertendo-as em tabelas. No entanto, a visualização de layout é a maneira mais fácil de configurar o layout da página. Nota: Na visualização de layout, é impossível utilizar as ferramentas Inserir tabela e Desenhar camada como na visualização padrão. Para utilizar estas ferramentas, é necessário primeiro alternar para a visualização padrão. Sobre as células e tabelas de layout Na visualização de layout, é possível definir o layout de uma página antes de adicionar o conteúdo. Por exemplo: é possível desenhar uma célula na parte superior da página para conter um gráfico de cabeçalho, outra célula no lado esquerdo da página para conter uma barra de navegação e uma terceira célula, à direita, para o conteúdo. 39

40 (Outro método consiste em desenhar cada célula apenas quando estiver pronto para inserir conteúdo ali. Este método proporciona maior flexibilidade, pois mantém mais espaço em branco na tabela de layout durante um maior período de tempo, o que confere maior facilidade para mover ou redimensionar células). Ao desenhar uma célula de layout fora de uma tabela de layout, o Dreamweaver cria automaticamente uma tabela de layout como um recipiente para a célula. Uma célula de layout não pode existir fora de uma tabela de layout. É possível definir o layout de uma página utilizando várias células de layout dentro de uma tabela de layout - que é o método mais comum para a definição do layout de uma página na Web - ou utilizar diversas tabelas de layout para layouts mais complexos. O uso de diversas tabelas de layout isola seções do layout, de modo que não possam ser afetadas por alterações feitas em outras seções. Também é possível aninhar tabelas de layout ao inserir uma nova tabela de layout dentro de uma tabela existente. Esta estrutura permite simplificar a estrutura da tabela quando as linhas ou coluna em uma parte do layout não estiveram alinhadas com as linhas ou colunas em outra parte do layout. Por exemplo: ao utilizar tabelas de layout aninhadas seria possível criar facilmente um layout com duas colunas e quatro linhas na coluna esquerda e três linhas na coluna direita. Como entrar e sair da visualização de layout Para poder desenhar tabelas de layout ou células de layout, é necessário alternar da visualização padrão para a visualização de layout. Dica: Se o usuário criar uma tabela na visualização padrão e depois alternar para a visualização de layout, a tabela de layout resultante poderá conter células de layout vazias. Talvez seja preciso excluir essas células de layout vazias para poder criar novas células de layout ou mover as célula de layout pela tabela. Ao criar um novo layout para ser editado na visualização de layout, é mais fácil criar a tabela na visualização de layout em vez de criá-la na visualização padrão. Para passar à visualização de layout: 1. Se a visualização do projeto não estiver visível, escolha Exibir > Projeto ou Exibir > Código e projeto. A visualização de layout não pode ser ativada ou desativada na visualização do código. 2. Selecione Exibir > Visualização de tabelas > Visualização de layout ou clique no botão Visualização de layout na categoria Layout da barra Inserir (na área de trabalho de quatro estilos flutuantes do Dreamweaver, com uma barra Inserir vertical, os itens relativos ao layout são exibidos na parte inferior do painel e não em uma categoria distinta). 40

41 Uma barra cinza denominada Visualização de layout é exibida na parte superior da visualização do projeto para indicar que o usuário está na visualização de layout. Se houver tabelas nesta página, serão exibidas como tabelas de layout. Para sair da visualização de layout: 1. Se a visualização do projeto não estiver visível, escolher Exibir > Projeto ou Exibir > Código e projeto. A visualização de layout não pode ser ativada ou desativada na visualização do código. 2. Selecione Exibir > Visualização de tabelas> Visualização padrão ou clique no botão Visualização padrão na categoria Layout da barra Inserir. Como desenhar células e tabelas de layout É possível desenhar células e tabelas de layout na página enquanto se está na visualização de layout. Ao desenhar uma célula de layout fora de uma tabela de layout, o Dreamweaver cria automaticamente uma tabela de layout como um recipiente para a célula. Uma célula de layout não pode existir fora de uma tabela de layout. Nota: Quando o Dreamweaver cria uma tabela de layout de modo automático, a tabela é exibida inicialmente para preencher toda a visualização do projeto, mesmo que o tamanho da janela do documento seja alterado. Esta tabela de layout padrão que ocupa todo o espaço da janela permite desenhar células de layout em qualquer local na visualização do projeto. É possível definir um tamanho específico para a tabela clicando na borda da tabela e arrastando suas alças de redimensionamento. Para desenhar uma célula de layout: 1. Certifique-se de estar na visualização de layout e, em seguida, clique no botão Desenhar a célula de layout na categoria Layout da barra Inserir (na área de trabalho de quatro estilos flutuantes do Dreamweaver, com uma barra Inserir vertical, os itens relativos ao layout são exibidos na parte inferior do painel e não em uma categoria distinta). O ponteiro do mouse se transforma em um sinal de adição (+). 2. Posicione o ponteiro onde deseja iniciar a célula na página e arraste-o para criar a célula de layout. Para criar várias células sem precisar clicar no botão Desenhar a célula de layout repetidamente, crie a célula de layout pressionando a tecla Control ao arrastar. A célula será exibida contornada em azul na página (azul é a cor de contorno padrão para células de layout). A largura de cada célula é exibida na área de cabeçalho da coluna, na parte superior da coluna, se as guias da tabela de layout estiverem visíveis. É exibida uma grade de linhas claras que se estende das extremidades da nova célula de layout para as extremidades da tabela de layout que a contém. Estas linhas ajudam a alinhar as novas células às células antigas e visualizar a estrutura da tabela HTML oculta. No Dreamweaver, as extremidades das novas células são alinhadas automaticamente com as extremidades das células existentes (as células de layout não podem ser sobrepostas). As extremidades da célula também se encaixam automaticamente às extremidades da tabela de layout que contém a célula se uma célula for desenhada próxima à extremidade de uma tabela. Para desativar temporariamente o encaixe, manter pressionada a tecla Alt ao desenhar a célula. Para desenhar uma tabela de layout: 1. Certifique-se de estar na visualização de layout. Depois, seguir um dos procedimentos abaixo: Para desenhar uma tabela de layout, clique no botão Desenhar a tabela de layout na categoria Layout da barra Inserir. O ponteiro do mouse se transforma em um sinal de adição (+). 2. Para desenhar mais de uma tabela de layout sem precisar clicar repetidamente no botão Desenhar a tabela de layout, manter a tecla Control pressionada e clique neste botão. Ao terminar de desenhar a tabela de layout, é possível criar imediatamente uma outra tabela. 41

42 3. Posicionar o ponteiro do mouse na página e arrastá-lo para criar a tabela de layout. Se não houver nenhum outro conteúdo na página, a nova tabela será posicionada automaticamente no canto superior esquerdo desta. A tabela é exibida com um contorno verde na página (verde é a cor de contorno padrão para tabelas de layout. Uma guia denominada Tabela de layout é exibida na parte superior de cada tabela desenhada para ajudar a selecioná-la e distinguí-la de outros elementos da página. A largura da tabela (em pixels ou como porcentagem da largura da página) é exibida na área de cabeçalho da coluna, na parte superior da tabela, se as guias da tabela de layout estiverem visíveis. É possível criar uma tabela de layout em uma área vazia do layout da página ou ao redor de células e tabelas de layout existentes ou mesmo aninhada em uma tabela de layout existente. As tabelas não podem se sobrepor umas às outras, mas uma tabela pode ser totalmente inserida em outra tabela. Dica: É impossível desenhar uma tabela de layout próxima a um conteúdo existente. Se a página já tiver conteúdo, é possível desenhar uma nova tabela de layout somente abaixo da parte inferior do conteúdo existente. Se tentar desenhar uma tabela de layout sob um conteúdo existente, mas se o ponteiro não disponível surgir, tentar redimensionar a janela do documento para aumentar o espaço em branco entre a parte inferior do conteúdo existente e a parte inferior da janela. Como desenhar uma tabela de layout aninhada É possível desenhar uma tabela de layout dentro de outra tabela de layout para criar uma tabela aninhada. As células internas de uma tabela aninhada não podem ser modificadas em relação à tabela externa; por exemplo: ao modificar o tamanho de uma linha ou coluna na tabela externa, o tamanho das células da tabela interna não é modificado. É possível inserir diversos níveis de tabelas aninhadas. Uma tabela de layout aninhada não pode ser maior do que a tabela que a contém. Nota: Se uma tabela de layout for desenhada no centro da página antes de uma célula de layout ser desenhada, a tabela desenhada será aninhada automaticamente dentro de uma tabela maior. Para desenhar uma tabela de layout aninhada: 1. Certifique-se de estar na visualização de layout e, em seguida, clique no botão Desenhar a tabela de layout na categoria Layout da barra Inserir. 42

43 O ponteiro do mouse se transforma em um sinal de adição (+). 2. Aponte para qualquer área vazia (cinza) em uma tabela de layout existente e, em seguida, arrastar para criar a tabela de layout aninhada. Nota: É impossível criar uma tabela de layout dentro de uma célula de layout. Só é possível criar uma tabela de layout aninhada em uma área vazia de uma tabela de layout existente ou ao redor de células existentes. Para desenhar uma tabela de layout ao redor de células ou tabelas de layout já existentes: 1. Certifique-se de estar na visualização de layout e, em seguida, clique no botão Desenhar a tabela de layout na categoria Layout da barra Inserir. O ponteiro do mouse se transforma em um sinal de adição (+). 2. Arraste o ponteiro para desenhar um retângulo ao redor de um conjunto de células ou tabelas de layout existentes. É exibida uma tabela de layout aninhada, incluindo as células ou tabelas existentes. Dica: Para encaixar perfeitamente uma célula de layout em uma das bordas da nova tabela aninhada, começar a arrastá-la próximo à borda da célula. A borda da nova tabela se encaixará à borda da célula. É impossível arrastar do centro de uma célula de layout, pois não se pode criar uma tabela de layout inteiramente no interior de uma célula de layout. Utilização de molduras As molduras permitem dividir uma janela do navegador em várias regiões, podendo cada uma exibir um documento HTML diferente. Em sua utilização mais comum, uma moldura exibe um documento que contém controles de navegação, enquanto a outra exibe um documento com conteúdo. Por exemplo: o layout da moldura pode consistir em três molduras: uma moldura estreita lateral que contém uma barra de navegação, outra moldura na parte superior, contendo o logotipo e o nome do site da Web, e uma moldura grande que ocupa o restante da página e acomoda o conteúdo principal. Cada uma dessas molduras exibe um documento HTML distinto. Neste exemplo, o documento exibido na moldura superior nunca se altera à medida que o visitante navega pelo site. A barra de navegação da moldura lateral contém links. Clique em um desses links altera o conteúdo da moldura principal de conteúdo, mas o conteúdo da própria moldura lateral permanece inalterado. A moldura principal de conteúdo à direita exibe o documento adequado para qualquer link no qual o visitante clicar à esquerda. Uma discussão detalhada sobre todas as maneiras de projetar e utilizar molduras, bem como o código necessário para a codificação manual, não é abrangida pelo escopo deste capítulo. 43

44 Sobre molduras e conjuntos de molduras Uma moldura é uma região de uma janela do navegador que pode exibir um documento HTML independentemente do que está sendo exibido no restante da janela do navegador. Um conjunto de molduras é um arquivo HTML que define o layout e as propriedades de uma série de molduras, incluindo o número de molduras, seu tamanho e posicionamento, bem como a URL da página a ser inicialmente exibida em cada moldura. O próprio arquivo do conjunto de molduras não comporta conteúdo HTML a ser exibido em um navegador, exceto na seção noframes; o arquivo do conjunto de molduras apenas fornece informações para o navegador sobre como um conjunto de molduras deve ser exibido e quais documentos devem ser exibidos nele. Para exibir um conjunto de molduras em um navegador, digite a URL do arquivo do conjunto de molduras. O navegador abrirá os documentos relevantes para exibi-los nas molduras. O arquivo do conjunto de molduras de um site geralmente é denominado index.html de forma que ele seja exibido como padrão se um visitante não especificar um nome de arquivo. Observar que uma moldura não é um arquivo. Pode-se pensar que o documento que está sendo exibido no momento em uma moldura é parte integrante da moldura, mas na realidade o documento não faz parte dela qualquer moldura pode exibir qualquer documento. Nota: A palavra página pode ser utilizada livremente para fazer referência a um único documento HTML ou a todo o conteúdo de uma janela do navegador em um determinado momento, mesmo que vários documentos HTML estejam sendo exibidos simultaneamente. A frase uma página que utiliza molduras, por exemplo: normalmente se refere a um conjunto de molduras e aos documentos que são exibidos inicialmente nessas molduras. No Dreamweaver, é possível criar um conjunto de molduras de uma destas maneiras: Para criar um conjunto de molduras com o documento atual exibido em uma das molduras, utilizar a categoria Molduras da barra Inserir. Para criar um conjunto de molduras com todas as molduras em branco, utilizar a categoria Conjunto de molduras na caixa de diálogo Novo documento. É possível formatar todas as molduras e conjuntos de molduras utilizando o inspetor de propriedades. É possível definir a rolagem como ativada ou desativada, definir a largura e altura, nomear todas as molduras e muito mais. Um site que é exibido em um navegador como uma única página formada por três molduras consiste, na verdade, em pelo menos quatro documentos HTML distintos: o arquivo do conjunto de molduras e os três documentos que comportam o conteúdo exibido inicialmente dentro das molduras. Ao projetar uma página utilizando conjuntos de molduras no Dreamweaver, esses quatro arquivos devem ser salvos para que a página funcione corretamente no navegador. Como decidir se as molduras devem ser utilizadas A utilização mais comum de molduras é para navegação. Um conjunto de molduras geralmente inclui uma moldura contendo uma barra de navegação e uma outra moldura que exibe as páginas principais de conteúdo. Entretanto, projetar com molduras pode ser confuso e, em muitos casos, é possível criar uma página da Web sem molduras que atinge muitos dos mesmos objetivos de um conjunto de molduras. Por exemplo: se desejar que a barra de navegação seja exibida no lado esquerdo da página, é possível substituir a página por um conjunto de molduras ou apenas incluir a barra de navegação em cada página do site (o Dreamweaver ajuda a criar várias páginas que utilizam o mesmo layout). A imagem a seguir mostra um projeto de página com um layout semelhante a moldura, mas que não utiliza molduras. 44

45 Muitos designers da Web profissionais preferem não utilizar molduras, e muitas pessoas que navegam na Web não as apreciam. Na maioria dos casos, isso é devido à existência de sites que utilizam molduras de forma inadequada ou desnecessária (como um conjunto de molduras que recarrega o conteúdo das molduras de navegação sempre que um visitante clica em um botão de navegação). Quando as molduras são bem utilizadas (por exemplo: para manter os controles de navegação estáticos em uma moldura enquanto permitem que o conteúdo de outra moldura se altere), elas podem ser muito úteis para alguns sites. Nem todos os navegadores fornecem bom suporte a molduras, e elas podem representar dificuldade para visitantes que ainda não têm experiência em navegar; portanto, ao utilizar molduras, fornecer sempre uma seção noframes no conjunto de molduras para aqueles visitantes que não podem vê-las. Também é recomendável fornecer um link visível para uma versão do site sem molduras para os visitantes cujos navegadores oferecem suporte a molduras, mas que não gostam de utilizá-las. As vantagens de se utilizarem molduras incluem: O navegador de um visitante não precisa recarregar imagens relacionadas à navegação para cada página. Cada moldura tem sua própria barra de rolagem (se o conteúdo for muito grande para caber em uma janela); portanto, um visitante pode rolar as molduras independentemente (por exemplo: um visitante que tiver efetuado a rolagem para a parte inferior de uma longa página de conteúdo em uma moldura não precisa rolar de volta para a parte superior para utilizar a barra de navegação, se esta estiver em uma outra moldura). As desvantagens de se utilizarem molduras incluem: O alinhamento gráfico preciso dos elementos em diversas molduras pode ser difícil. O teste de navegação pode ser muito demorado. As URLs das páginas com molduras individuais não são exibidas no navegador; portanto, pode ser difícil para um visitante incluir um marcador em uma página específica (exceto se for fornecido o código do servidor que permite ao visitante carregar uma versão com molduras de determinada página). Criação de molduras e conjuntos de molduras Há duas maneiras de criar um conjunto de molduras no Dreamweaver: é possível desenhá-lo ou escolher entre vários conjuntos de molduras predefinidos. A seleção de um conjunto de molduras predefinido configura automaticamente todos os conjuntos de molduras e molduras necessários à criação do layout e é a maneira mais fácil de criar rapidamente um layout com base em molduras. Só é possível inserir um conjunto de molduras predefinido na visualização do projeto da janela do documento. Como criar um conjunto de molduras predefinido Os conjuntos de molduras predefinidos facilitam a seleção do tipo de conjunto de molduras a ser criado. 45

46 Há duas maneiras de criar um conjunto de molduras predefinido: utilizando a barra Inserir e a caixa de diálogo Novo documento. A barra Inserir permite criar um conjunto de molduras e exibir o documento atual em uma das novas molduras; a caixa de diálogo Novo documento cria um novo conjunto de molduras vazio. Os ícones do conjunto de molduras predefinido na categoria Molduras da barra Inserir e na categoria Conjuntos de molduras da caixa de diálogo Novo documento fornecem uma representação visual de cada conjunto de molduras conforme aplicado ao documento atual. Quando se aplica um conjunto de molduras utilizando a barra Inserir, o Dreamweaver automaticamente configura o conjunto de molduras para exibir o documento atual (o documento no qual o ponto de inserção está localizado) em uma das molduras. A área azul de um ícone de conjunto de molduras predefinido representa o documento atual e as áreas brancas representam molduras que exibirão outros documentos. Para criar um conjunto de molduras predefinido e exibir um documento existente em uma moldura: 1. Coloque o ponto de inserção em um documento. 2. Siga um dos procedimentos abaixo: Na categoria Molduras da barra Inserir, clique no ícone de um conjunto de molduras predefinido. 3. Escolha um conjunto de molduras predefinido no submenu Inserir > Molduras. Para criar um novo conjunto de molduras predefinido vazio: Escolha Arquivo > Novo. Na caixa de diálogo Novo documento, selecionar a categoria Conjuntos de molduras. Selecione um conjunto de molduras na lista Conjuntos de molduras. Clique em Criar. Como criar e editar um conjunto de molduras Antes de criar um conjunto de molduras ou de trabalhar com molduras, tornar as bordas das molduras visíveis na visualização do projeto da janela do documento, escolhendo Exibir >Auxílios visuais > Bordas da moldura. Para criar um conjunto de molduras: Escolha um item de divisão (como Dividir a moldura para a esquerda ou Dividir a moldura para a direita) no submenu Modificar > Conjunto de molduras. A janela será dividida em molduras e o documento iniciado será exibido em uma das molduras. Para dividir uma moldura em molduras menores, seguir um dos procedimentos abaixo: Para dividir a moldura onde está o ponto de inserção, escolher um item de divisão no submenu Modificar > Conjunto de molduras. Para dividir uma moldura ou conjunto de molduras vertical ou horizontalmente, arrastar uma borda da moldura da margem da visualização do projeto para o meio da visualização do projeto. Para dividir uma moldura utilizando uma borda de moldura que não está na margem da visualização do projeto, manter pressionada a tecla Alt e arrastar a borda da moldura. Para dividir uma moldura em quatro molduras, arrastar uma borda da moldura de uma das margens da visualização do projeto para o meio de uma moldura. Dica: Para criar três molduras, iniciar com duas molduras e, depois, dividir uma delas. Não é fácil mesclar duas molduras adjacentes sem editar o código do conjunto de molduras; portanto, transformar quatro molduras em três é mais difícil do que transformar duas molduras em três. Para excluir uma moldura: Arrastar a borda da moldura para fora da página ou até a borda da moldura -mãe. Se houver conteúdo não salvo em um documento de uma moldura que estiver sendo removida, o Dreamweaver solicitará que o documento seja salvo. Nota: É impossível remover um conjunto de molduras inteiro arrastando as bordas. Para remover um conjunto de molduras, fechar a janela do documento que o exibe. Se o arquivo do conjunto de molduras tiver sido salvo, excluir o arquivo. 46

47 Como selecionar molduras e conjuntos de molduras no painel Molduras O painel Molduras fornece uma representação visual das molduras em um conjunto de molduras. Pode-se clicar em uma moldura ou em um conjunto de molduras, no painel Molduras, para selecioná-los no documento e, em seguida, no inspetor de propriedades, exibir ou editar as propriedades do item selecionado. O painel Molduras mostra a hierarquia da estrutura do conjunto de molduras de um modo que pode não ser visível na janela do documento. Nesse painel, uma borda muito espessa envolve cada conjunto de molduras; cada moldura é contornada por uma linha fina cinza e é identificada por um nome. Para exibir o painel Molduras: Escolha Janela > Outras > Molduras. Para selecionar uma moldura no painel Molduras: Clique na moldura, no painel Molduras. Para selecionar um conjunto de molduras no painel Molduras: Clique na borda que circunda o conjunto de molduras, no painel Molduras. Como salvar arquivos de moldura e de conjunto de molduras Para poder visualizar um conjunto de molduras em um navegador, é necessário salvar o arquivo do conjunto de molduras e todos os documentos que serão exibidos nas molduras. É possível salvar cada arquivo do conjunto de molduras e o documento com moldura individualmente ou salvar o arquivo do conjunto de molduras e todos os documentos que são exibidos em molduras de uma só vez. Ao utilizar ferramentas visuais no Dreamweaver para criar um conjunto de molduras, cada novo documento que é exibido em uma moldura recebe um nome de arquivo padrão. Por exemplo: o primeiro arquivo do conjunto de molduras é denominado UntitledFrameset-1, enquanto o primeiro documento em uma moldura é denominado UntitledFrame-1. Ao selecionar um dos comandos de salva, é exibida uma caixa de diálogo, pronta para salvar um documento com o nome de arquivo padrão. Como os nomes de arquivo padrão são muito semelhantes, pode ser difícil determinar qual documento está sendo salvo. Para identificar a moldura que exibe o documento que está sendo salvo, veja o contorno da seleção da moldura na janela do documento, na visualização do projeto. Para salvar um arquivo de conjunto de molduras: 1. Selecione o conjunto de molduras no painel Molduras ou na janela do documento. 2. Escolha uma dentre as opções a seguir: 47

48 Para salvar o arquivo do conjunto de molduras, escolher Arquivo > Salvar o conjunto de molduras. 3. Para salvar o arquivo de conjunto de molduras como um novo arquivo, escolha Arquivo > Salvar o conjunto de molduras como. Caso o arquivo do conjunto de molduras não tenha sido salvo anteriormente, esses dois comandos serão equivalentes. Para salvar um documento que é exibido em uma moldura: Clique na moldura e, em seguida, escolher Arquivo > Salvar a moldura ou Arquivo > Salvar a moldura como. Para salvar todos os arquivos associados a um conjunto de molduras: Escolha Arquivo > Salvar todas as molduras. Isso salvará todos os documentos abertos no conjunto de molduras, incluindo o arquivo do conjunto de molduras e todos os documentos com moldura. Se o arquivo do conjunto de molduras ainda não tiver sido salvo, uma borda mais espessa será exibida ao redor do conjunto de molduras na visualização do projeto e uma caixa de diálogo permitirá escolher um nome de arquivo. Em seguida, para cada moldura que ainda não tiver sido salva, será exibida uma borda mais espessa ao redor da moldura e uma caixa de diálogo permitirá escolher um nome de arquivo. Nota: Se o comando Arquivo > Abrir na moldura tiver sido utilizado para abrir um documento em uma moldura, ao salvar o conjunto de molduras, o documento aberto na moldura se tornará o documento padrão a ser exibido naquela moldura. Se não desejar que o documento seja o padrão, não salvar o arquivo do conjunto de molduras. Visualização e definição das propriedades da moldura Utilize o inspetor de propriedades para exibir e definir a maioria das propriedades da moldura. Para alterar a cor do fundo de uma moldura, definir a cor de fundo do documento na moldura. Para exibir ou definir as propriedades da moldura: 1. Selecione uma moldura, seguindo um dos procedimentos abaixo: Mantenha pressionada a tecla Alt e clique em uma moldura na visualização do projeto da janela do documento. 2. Clique em uma moldura no painel Molduras. 3. Escolha Janela > Propriedades para abrir o inspetor de propriedades caso ainda esteja fechado. 4. Para examinar todas as propriedades das molduras, clique na seta de expansão, no canto inferior direito do inspetor de propriedades. Para alterar a cor do fundo de um documento em uma moldura: 1. Coloque o ponto de inserção na moldura. 2. Escolha Modificar > Propriedades da página. 3. Clique no menu pop-up Fundo para selecionar uma cor. Como controlar um conteúdo de moldura com links Para utilizar um link de uma moldura para abrir um documento em outra moldura, é necessário definir um destino para o link. O atributo target de um link especifica a moldura ou janela na qual o conteúdo com link será aberto. Por exemplo: se a barra de navegação estiver na moldura esquerda e se desejar que o material com link seja exibido na moldura principal de conteúdo à direita, será necessário especificar o nome da moldura principal de conteúdo como destino para cada um dos links da barra de navegação. Quando um visitante clica em um link de navegação, o conteúdo especificado é aberto na moldura principal. Para selecionar uma moldura na qual o arquivo será aberto, utilizar o menu pop-up Destino do inspetor de propriedades. É possível definir um arquivo para substituir o documento que está sendo exibido em outra moldura, 48

49 para ser exibido no lugar do conjunto de molduras inteiro, para ser exibido na moldura na qual o link estava (não escolhendo um destino) ou para ser aberto em uma nova janela do navegador. Para utilizar uma moldura como destino: 1. Na visualização do projeto, selecione um texto ou um objeto. 2. No campo Link do inspetor de propriedades, siga um dos procedimentos abaixo: Clique no ícone de pasta e selecionar o arquivo ao qual será vinculado. 3. Arraste o ícone Indicar o arquivo para selecionar o arquivo ao qual será vinculado. 4. No menu pop-up Destino, escolha a moldura ou janela na qual o documento vinculado deverá ser exibido. Se as molduras tiverem sido nomeadas no inspetor de propriedades, seus nomes serão exibidos nesse menu. Selecione uma moldura com nome para abrir o documento vinculado nessa moldura. Nota: Os nomes de moldura serão exibidos apenas ao editar um documento dentro de um conjunto de molduras. Ao editar um documento na própria janela do documento, fora do conjunto de molduras, os nomes das molduras não serão exibidos no menu pop-up Destino. Se estiver editando um documento fora do conjunto de molduras, será possível digitar o nome da moldura de destino na caixa de texto Destino. _blank abre o documento vinculado em uma nova janela do navegador e deixa a janela atual inalterada. 5. _parent abre o documento com link no conjunto-pai de molduras da moldura na qual o link será exibido, substituindo o conjunto de molduras inteiro. 6. _self abre o link na moldura atual, substituindo o conteúdo desta. 7. _top abre o documento com links na janela atual do navegador, substituindo todas as molduras. Dica: Se estiver vinculando a uma página fora do seu site, utilizar sempre target="_top" ou target="_blank" para garantir que a página não pareça fazer parte do seu site. Utilização de uma imagem de rastreamento Utilize uma imagem de rastreamento como guia para recriar o projeto de uma página da qual foi feito um protótipo em um aplicativo gráfico. As imagens de rastreamento são imagens JPEG, GIF ou PNG que são colocadas no fundo da janela do documento. É possível ocultar a imagem, definir a sua opacidade e alterar a sua posição. A imagem de rastreamento fica visível apenas no Dreamweaver. Ela nunca fica visível quando a página é exibida em um navegador. Quando a imagem de rastreamento fica visível, a imagem e a cor de fundo reais da página não podem ser visualizadas na janela do documento; contudo, elas aparecem quando a página é exibida em um navegador. Para colocar uma imagem de rastreamento na janela do documento: 1. Siga um dos procedimentos abaixo: Escolha Exibir > Imagem de rastreamento > Carregar. 2. Escolha Modificar > Propriedades da página e, em seguida, clique no botão Procurar, ao lado da caixa de texto Imagem de rastreamento. 3. Na caixa de diálogo que é exibida, selecione um arquivo de imagem e clique em Selecionar. 4. A caixa de diálogo Propriedades da página é exibida. Especifique a transparência da imagem, arrastando o botão deslizante Transparência da imagem, e clique em OK. Para alternar para outra imagem de rastreamento ou alterar a transparência da imagem de rastreamento atual a qualquer momento, escolher Modificar > Propriedades da página. Para exibir ou ocultar a imagem de rastreamento: Escolha Exibir > Imagem de rastreamento > Mostrar. Para alterar a posição de uma imagem de rastreamento: Escolha Exibir > Imagem de rastreamento > Ajustar a posição. Depois, seguir um dos procedimentos abaixo: Para especificar com precisão a posição da imagem de rastreamento, digite valores de coordenadas nas caixas de texto X e Y. Para mover a imagem um pixel de cada vez, utilizar as teclas de seta. 49

50 Para mover a imagem cinco pixels de cada vez, pressionar a tecla Shift e uma tecla de seta. Para redefinir a posição da imagem de rastreamento: Escolha Exibir > Imagem de rastreamento > Redefinir a posição. A imagem de rastreamento retorna ao canto superior esquerdo da janela do documento (coordenadas 0,0). Para alinhar a imagem de rastreamento a um elemento selecionado: 1. Selecione um elemento na janela do documento. 2. Escolha Exibir > Imagem de rastreamento > Alinhar com a seleção. O canto superior esquerdo da imagem de rastreamento é alinhado com o canto superior esquerdo do elemento selecionado. Como trabalhar com várias páginas Crie links entre suas páginas e reutilize elementos de projeto e layouts de uma página a outra. Teste seu site em seguida. Esta seção contém os seguintes capítulos: Links e navegação Como gerenciar as propriedades do site, bibliotecas e modelos Como testar um site Links e navegação Após especificar um site local para armazenar os documentos do site da Web e criar as páginas HTML, talvez seja conveniente estabelecer conexões entre os seus e outros documentos ou tipos de arquivos. O Macromedia Dreamweaver MX oferece diversos modos de criar links de hipertexto para documentos, imagens, arquivos de multimídia ou programas dos quais se pode efetuar o download. Podem ser estabelecidos links a qualquer texto ou imagem em qualquer parte de um documento, inclusive texto ou imagens localizados em um cabeçalho, lista, tabela, camada ou moldura. Para exibir uma representação visual de como os arquivos são vinculados, utilize o mapa do site. Nesse mapa, é possível adicionar novos documento ao site, criar e remover links ao documento e verificar os links para arquivos dependentes. Há várias maneiras diferentes de criar e gerenciar os links. Alguns designers da Web preferem criar links a páginas ou arquivos inexistentes, à medida que trabalham, enquanto outros acham mais conveniente criar primeiro todos os arquivos e páginas e, em seguida, adicionar os links. Outra maneira de gerenciar os links é criar páginas alocadoras de espaço, que representam o arquivo final e permitem adicionar links rapidamente e verificá-los, antes que as páginas tenham sido realmente concluídas. Sobre as localizações e os caminhos dos documentos Ao criar links, é essencial compreender o caminho de arquivo entre o documento do qual parte o link e o que está sendo vinculado. Cada página da Web tem um endereço único chamado Universal Resource Locator (URL). Contudo, quando é criado um link local (entre dois documentos no mesmo site), normalmente, a URL inteira do documento que está sendo vinculado não é especificada; em vez disso, é indicado um caminho relativo ao documento atual ou à pasta raiz do site. Os três tipos de caminhos de link são os seguintes: Caminhos absolutos (por exemplo: Caminhos relativos a documento (por exemplo: dreamweaver/contents.html). Caminhos relativos à raiz do site (por exemplo: /support/dreamweaver/contents.html). 50

51 Com o Dreamweaver, é possível selecionar facilmente o tipo de caminho de documento a ser criado para os links. Nota: É melhor utilizar o tipo de link preferido ou mais confortável, relativo ao documento ou ao site. A busca de links, ao contrário da digitação de caminhos, garante que o caminho inserido estará sempre correto. Caminhos absolutos Caminhos absolutos fornecem a URL completa do documento vinculado, inclusive o protocolo a ser utilizado (normalmente para as páginas da Web). Por exemplo: é um caminho absoluto. Deve ser utilizado um caminho absoluto para estabelecer um link a um documento em outro servidor. Os links de caminho absoluto também podem ser utilizados para os links locais (a documentos no mesmo site), mas essa abordagem não é recomendada; se o site for deslocado para outro domínio, todos os seus links de caminho absoluto irão se partir. Além disso, a utilização de caminhos relativos para os links locais possibilita maior flexibilidade quando for necessário mover os arquivos no site. Nota: Ao inserir imagens (mas não links): se for utilizado um caminho absoluto a uma imagem que resida em um servidor remoto e que não esteja disponível no disco rígido local, não será possível exibi-la na janela do documento. Em vez disso, o documento deve ser visualizado em um navegador. Se for possível, utilize os caminhos relativos a documento ou à raiz do site para as imagens. Caminhos relativos a documento Caminhos relativos a documentos são os mais apropriados para os links locais na maioria dos sites da Web. Eles são particularmente úteis quando o documento atual e o vinculado estiverem na mesma pasta, e possivelmente permanecerão juntos. O caminho relativo a documento também é utilizado para estabelecer um link a um documento em outra pasta, especificando o caminho através da hierarquia de pastas, do documento atual ao vinculado. Na especificação desse caminho, não consta a parte da URL absoluta, que é a mesma para ambos os documentos. É fornecido apenas o segmento do caminho que é diferente. Para estabelecer um link a outro arquivo na mesma pasta que o documento atual, basta indicar o nome do arquivo. Para vincular a um arquivo em uma subpasta da pasta do documento atual, forneça o nome da subpasta, coloque uma barra inclinada para a direita (/) e, em seguida, o nome do arquivo. Para vincular a um arquivo em uma pasta-mãe daquela onde está o documento atual, preceda o nome do arquivo por../ (onde.. significa um nível acima na hierarquia de pastas ). Por exemplo: suponha que o site tenha esta estrutura: Para estabelecer um link de contents.html a outros arquivos: Para estabelecer um link de contents.html a hours.html (ambos os arquivos estão na mesma pasta), o nome do arquivo é o caminho relativo: hours.html. Para vincular a tips.html (na subpasta chamada resources), utilize o caminho relativo resources/tips.html. Cada barra inclinada (/) representa mover um nível abaixo na hierarquia de pastas. Para vincular a index.html (na pasta-mãe, um nível acima de contents.html), utilize o caminho relativo../index.html. Cada../ representa mover um nível acima na hierarquia de pastas. Para vincular a catalog.html (em uma subpasta da pasta-mãe), utilize o caminho relativo../products/catalog.html. 51

52 A../ move um nível acima em direção à pasta-mãe; products/ move um nível para baixo na subpasta products. Nota: Salve sempre um novo arquivo antes de criar um caminho relativo a documento, já que esse caminho não será válido sem um ponto de partida definido. Se você criar um caminho relativo a documento antes de salvar o arquivo, o Dreamweaver utilizará temporariamente um caminho absoluto iniciado por file://, até que o arquivo seja salvo e, em seguida, o programa converterá o caminho file:// em um caminho relativo. Quando um grupo de arquivos for movido em conjunto por exemplo: quando uma pasta for transferida inteira, de maneira que os arquivos dentro dela mantenham os mesmos caminhos relativos entre si os links relativos a documento não precisarão ser atualizados entre esses arquivos. Contudo, quando um arquivo individual que contém links relativos a documento ou que está vinculado por esse mesmo tipo de ligação for movido, torna-se absolutamente necessário atualizar esses links. Se os arquivos forem movidos ou renomeados utilizando o painel Site, o Dreamweaver atualizará automaticamente todos os links relevantes. Caminhos relativos à raiz do site Caminhos relativos à raiz do sitefornecem o caminho da pasta raiz do site a um documento. Pode ser conveniente utilizar esses tipos de caminhos ao trabalhar em um site grande da Web, que use vários servidores, ou um servidor que hospede diversos sites diferentes. Contudo, se você não estiver familiarizado com esse tipo de caminho, pode ser melhor continuar usando os caminhos relativos a documento. Um caminho relativo à raiz do site inicia com uma barra inclinada para a direita, que representa a pasta raiz do site. Por exemplo: /support/tips.html é um caminho relativo à raiz do site para um arquivo (tips.html) na subpasta support, dentro da pasta raiz do site. Um caminho relativo à raiz do site é, normalmente, o melhor modo de especificar links em um site da Web, no qual os arquivos HTML precisam ser movidos com freqüência de uma pasta para outra. Quando um documento que contém links relativos à raiz for movido, não é necessário alterá-los; por exemplo: quando os arquivos HTML utilizam links relativos à raiz para os arquivos dependentes (como as imagens), se um arquivo HTML for movido, os seus links dos arquivos dependentes ainda serão válidos. Contudo, quando os links dos documentos forem relativos à raiz e estes forem movidos ou renomeados, é absolutamente necessário atualizar esses links, mesmo que os caminhos dos documentos relativos entre si não tenham sido alterados. Por exemplo: se uma pasta for movida, todos os links relativos à raiz para os arquivos nessa pasta devem ser atualizados. Se os arquivos forem movidos ou renomeados utilizando o painel Site, o Dreamweaver atualizará automaticamente todos os links relevantes. Para utilizar os caminhos relativos à raiz do site, defina primeiro um site local no Dreamweaver escolhendo uma pasta raiz local que seja equivalente à raiz do documento em um servidor. O Dreamweaver utiliza essa pasta para determinar os caminhos relativos à raiz do site para os arquivos. Nota: Os links relativos à raiz são interpretados pelos servidores, e não pelos navegadores, por isso, se for aberta uma página que utiliza links relativos à raiz no seu navegador (sem usar Visualizar no navegador, no Dreamweaver), os links não funcionarão. Quando o recurso Visualizar no navegador for utilizado para visualizar um documento que contém links relativos à raiz, o Dreamweaver converterá temporariamente esses links (apenas no arquivo visualizado) para usar os caminhos relativos a documentos. Contudo, é possível visualizar apenas uma página de cada vez, que utilize os links relativos à raiz se um link for seguido a partir da página visualizada, os links relativos à raiz da próxima página não serão convertidos e o navegador não poderá segui-los. A exibição de páginas em conjuntos de molduras que utilizam links relativos à raiz causa problemas semelhantes. Para visualizar um conjunto de páginas que utilizam links relativos à raiz, siga um dos procedimentos abaixo: Coloque os arquivos em um servidor remoto e exiba-os nesse local. (Apenas no Windows) Escolha Editar > Preferências, selecione Visualizar no navegador, na lista de categorias, à esquerda, em seguida, selecione Visualizar utilizando o servidor local. Nota: Para usar essa opção, é necessário que um servidor da Web esteja em execução no seu computador local. Criação de links 52

53 A tag HTML para criação de um link de hipertexto é chamada de tag de âncora ou de tag a. O Dreamweaver cria um tag de âncora para objetos, texto ou imagens vinculados. Podem ser criados links a outros documentos e arquivos, e a locais específicos em um único documento utilizando a tag a href. Por exemplo: se for selecionado na janela do documento o texto Home Page e, em seguida, for criado um link a um arquivo denominado home.htm, o código-fonte HTML para o link deve ter a aparência abaixo: <a href="home.htm">home Page</a> Se um link for criado para um local específico de um documento, é necessário criar primeiro uma âncora com nome. Por exemplo: a name="mainmenu". Em seguida, crie um link dentro da página que se refira a essa âncora com nome. Por exemplo: a href="#mainmenu". Antes de criar os links, certifique-se de ter compreendido como funcionam os caminhos relativos a documento, relativos à raiz do site e absolutos. Podem ser criados diversos tipos de links em um documento. Um link a outro documento ou arquivo, como um arquivo de imagem, filme, PDF ou de som. Um link de âncora com nome, que salta para uma localização específica em um documento. Um link de correio eletrônico, que cria uma nova mensagem com o endereço do destinatário já preenchido. Os links nulos e de script, que permitem anexar comportamentos a um objeto ou criar um link que execute código JavaScript. Com o Dreamweaver, há diversas maneiras de criar facilmente links locais (entre os documentos de um mesmo site): Utilize a janela do mapa do site para exibir, criar, alterar ou excluir links. Na janela do documento, selecione um elemento do texto ou da página, em seguida, utilize Modificar > Criar link, para selecionar um arquivo a ser vinculado. Utilize o inspetor de propriedades para estabelecer o link a um arquivo, utilizando o ícone da pasta, para procurar e selecionar um arquivo através do ícone do indicador de arquivos, para selecionar um arquivo ou digitar o seu caminho. Nota: A digitação de URLs ou caminhos a um arquivo pode produzir links e caminhos incorretos que não funcionam. Para garantir um caminho correto, utilize o ícone correspondente à pasta para procurar o link. Na janela do documento, selecione um elemento do texto ou da página, escolha Criar link, no menu contextual, para selecionar um arquivo a ser vinculado. Para criar um link externo (a um documento em outro site), digite um caminho absoluto (com o protocolo adequado) no inspetor de propriedades. Ao criar links externos, verifique se foi digitado o caminho completo (incluindo Vinculação de arquivos e documentos Utilize o inspetor de propriedades e o ícone do indicador de arquivos para criar links de uma imagem, objeto ou texto a outro documento ou arquivo. Para vincular documentos utilizando o ícone de pasta do inspetor de propriedades ou a caixa de texto do link: 1. Selecione o texto ou uma imagem na visualização do projeto, na janela do documento. 2. Abra o inspetor de propriedades (Janela > Propriedades) e siga um dos procedimentos abaixo: Clique no ícone de pasta, à direita do campo Link, para procurar e selecionar um arquivo. O caminho para o documento vinculado aparecerá no campo URL. Utilize o menu pop-up Relativo a, na caixa de diálogo Selecionar o arquivo HTML, para escolher se o caminho será relativo a documento ou à raiz e, em seguida, clique em Selecionar. 53

54 Nota: Quando o tipo de caminho for alterado no campo Relativo a, o Dreamweaver definirá a seleção como o tipo de caminho padrão para os links posteriores até que ela seja modificada. Digite o caminho e nome do arquivo do documento no campo Link. Para criar um link a um documento no site, digite um caminho relativo a documento ou à raiz do site. Para criar um link a um documento fora do site, digite um caminho absoluto que inclua o protocolo (por exemplo: Esse procedimento pode ser utilizado para digitar um link a um arquivo que ainda não foi criado. 3. No menu pop-up Destino, selecione um local para abrir o documento. Para que o documento vinculado apareça em um local diferente da janela ou moldura atual, selecione uma opção no menu pop-up Destino, no inspetor de propriedades. _blank carrega o documento vinculado em uma janela nova e sem nome do navegador. 4. _parent carrega o documento vinculado na moldura-mãe ou na janela da moldura que contém o link. Se a moldura onde está o link não estiver aninhada, o documento vinculado será carregado na janela inteira do navegador. 5. _self carrega o documento vinculado na mesma moldura ou janela que o link. Esse destino é o padrão, portanto geralmente não é necessário especificá-lo. 6. _top carrega o documento vinculado na janela inteira do navegador, removendo, por conseguinte, todas as molduras. Dica: Se todos os links da página forem definidos para o mesmo destino, é possível especificá-lo uma vez, escolhendo Inserir > Tags do cabeçalho > Base e selecionando as informações do destino. Para vincular documentos usando o ícone do indicador de arquivos: 1. Selecione o texto ou uma imagem na visualização do projeto, na janela do documento. 2. Arraste o ícone do indicador de arquivos, à direita do campo Link, no inspetor de propriedades, e indique um outro documento aberto, uma âncora visível em um documento aberto ou um documento no painel Site. O campo Link será atualizado para mostrar o link. Nota: Pode ser estabelecido um vínculo a um documento aberto apenas quando os seus documentos não estiverem maximizados na janela do documento. Quando se indica um documento, ele é movido para o primeiro plano da tela durante a seleção. 3. Solte o botão do mouse. Para criar um link a partir de uma seleção em um documento aberto: 1. Selecione o texto na janela do documento. 2. Mantenha a tecla Shift pressionada e arraste a partir da seleção. O ícone do indicador de arquivos aparecerá à medida que o cursor for arrastado. 3. Indique um outro documento aberto, uma âncora visível de um documento aberto ou um documento no painel Site. Nota: Pode ser estabelecido um vínculo a um documento aberto apenas quando os seus documentos não estiverem maximizados na janela do documento. Quando se indica um documento, ele é movido para o primeiro plano da tela durante a seleção. 4. Solte o botão do mouse. Para criar um link a documentos usando o mapa do site e o ícone do indicador de arquivos: 1. Expanda o painel Site e exiba as visualizações de arquivos do site e de mapa do site mantendo pressionado o ícone de mapa do site e escolhendo Mapa e arquivos. 2. Selecione um arquivo HTML no mapa do site. O ícone do indicador de arquivos aparecerá ao lado do arquivo. 3. Arraste o ícone do indicador de arquivos e indique outro arquivo no mapa do site ou um arquivo local na visualização dos arquivos do site. 4. Solte o botão do mouse. 54

55 Um link de hipertexto com o nome do arquivo vinculado será colocado na parte inferior do arquivo HTML selecionado. Esse método funciona bem quando um site está sendo construído e se deseja criar links no site inteiro rapidamente. Estabelecimento de um link a um local específico de um documento O inspetor de propriedades pode ser utilizado para estabelecer um link a uma determinada seção de um documento, criando primeiro as âncoras com nomes. Estas permitem definir marcadores em um documento e são colocadas, com freqüência, em um tópico específico ou no alto do documento. Podem ser criados links para essas âncoras com nome, que levam rapidamente o visitante até a posição especificada. A criação de um link a uma âncora com nome é um processo em duas etapas. Primeiro, crie uma âncora com nome e, em seguida, crie um link a essa âncora. Para criar uma âncora com nome: 1. Na visualização do projeto, na janela do documento, posicione o ponto de inserção no local onde deseja inserir a âncora com nome. 2. Siga um dos procedimentos abaixo: Escolha Inserir > Âncora com nome. 3. Pressione as teclas Control, Alt e A. 4. Na barra Inserir, selecione a guia Comuns e clique no botão Âncora com nome. Será exibida a caixa de diálogo Âncora com nome. 5. No campo Âncora com nome, digite um nome para a âncora. O marcador da âncora aparecerá no ponto de inserção. Nota: Se o marcador da âncora não estiver visível, escolha Exibir > Auxílios Visuais > Elementos invisíveis. Para estabelecer um link a uma âncora com nome: 1. Na visualização do projeto, na janela do documento, selecione um texto ou uma imagem da qual será criado um link. 2. No campo Link, no inspetor de propriedades, digite um sinal de número (#) e o nome da âncora. Por exemplo: Para estabelecer um link a uma âncora com o nome "alto" no documento atual, digite #alto. 3. Para estabelecer um link a uma âncora com o nome alto em um documento diferente, na mesma pasta, digite nomedoarquivo.html#alto. Nota: Os nomes de âncoras reconhecem maiúsculas e minúsculas. Para estabelecer um link a uma âncora utilizando o método de indicação de arquivos: 1. Abra o documento que contém a âncora com nome escolhida. Nota: Se a âncora estiver invisível, escolha Exibir > Auxílios visuais >Elementos invisíveis, para tornar a âncora visível. 2. Na visualização do projeto, na janela do documento, selecione um texto ou uma imagem da qual será criado um link. Se este for outro documento aberto, alterne para ele. 3. Siga um dos procedimentos abaixo: 55

56 Clique no ícone do indicador de arquivos, à direita do campo Link, no inspetor de propriedades, e arraste-o até a âncora que será vinculada: uma âncora no mesmo documento ou em outro documento aberto. 4. Pressione a tecla Shift e arraste o cursor na janela do documento, a partir do texto ou imagem selecionada até a âncora que será vinculada: uma âncora no mesmo documento ou em outro documento aberto. Criação de um hyperlink É possível adicionar texto de hyperlink para estabelecer um vínculo a outro arquivo. Para adicionar um hyperlink utilizando o comando Hyperlink: 1. Coloque o ponto de inserção onde o hyperlink deve ser inserido no documento. 2. Siga um dos procedimentos abaixo para exibir a caixa de diálogo Inserir hyperlink: Escolha Inserir > Hyperlink. 3. Na barra Inserir, selecione a guia Comuns e clique no botão Hyperlink. Aparecerá a caixa de diálogo Hyperlink. 4. Preencha a caixa de diálogo. 5. Clique em OK. Criação de um link de correio eletrônico Um link de correio eletrônico abrirá uma nova janela de mensagem (utilizando o programa de correio eletrônico associado ao navegador do usuário) sempre que for clicado. Na janela de mensagem eletrônica, o campo Para será atualizado automaticamente com o endereço especificado no link de correio eletrônico. Para criar um link de correio eletrônico utilizando o comando Inserir link de correio eletrônico: 1. Na visualização do projeto, na janela do documento, coloque o ponto de inserção onde deverá aparecer o link de-correio eletrônico, ou selecione o texto ou a imagem a ser mostrada neste lugar. 2. Siga um dos procedimentos abaixo para inserir o link: Escolha Inserir > Link de correio eletrônico. 3. Na barra Inserir, selecione a guia Comuns e clique no botão Inserir link de correio eletrônico. Será exibida a caixa de diálogo Inserir link de correio eletrônico. 4. Preencha a caixa de diálogo. 5. Clique em OK. Para criar um link de correio eletrônico utilizando o inspetor de propriedades: 56

57 1. Selecione o texto ou uma imagem na visualização do projeto, na janela do documento. 2. No campo Link, no inspetor de propriedades, digite mailto: seguido de um endereço-de correio eletrônico. Não digite espaços entre os dois pontos e o endereço eletrônico. Por exemplo: digite mailto:jdoe@macromedia2.com. Criação de links nulos e de script Os tipos mais comuns de links ocorrem entre documentos e âncoras com nome (descritos em Vinculação de arquivos e documentos e Estabelecimento de um link a um local específico de um documento, respectivamente), mas há também outros tipos de links. Um link nulo é aquele não designado. Utilize esse tipo de link para anexar comportamentos a objetos ou texto em uma página. Após a criação de um link nulo, a ele poderá ser anexado a um comportamento para permutar uma imagem ou exibir uma camada, quando o cursor for movido sobre o link. Links de scripts executam o código JavaScript ou chamam uma função JavaScript, sendo úteis para fornecer informações adicionais ao usuário sobre um item, sem sair da página atual da Web. Os links de scripts também podem ser utilizados para cálculos, validações de formulários e outras tarefas de processamento, quando um usuário clicar em um determinado item. Para criar um link nulo: 1. Selecione o texto, uma imagem ou um objeto na visualização do projeto, na janela do documento. 2. No inspetor de propriedades, digite javascript:; (a palavra javascript, seguida de dois pontos e de um ponto-e-vírgula) na caixa de texto Link. Para criar um link de script: 1. Selecione o texto, uma imagem ou um objeto na visualização do projeto, na janela do documento. 2. No campo Link, no inspetor de propriedades, digite javascript: seguido de código JavaScript ou de uma chamada a função. Por exemplo: a digitação de javascript:alert('este link conduz ao índice') no campo Link produz um link que, quando clicado, exibe uma caixa de alerta JavaScript com a mensagem Este link conduz ao índice. Nota: Como o código JavaScript aparece entre aspas duplas no HTML (assim como o valor do atributo href ), é necessário utilizar aspas simples no código do script ou preceder as aspas duplas por barras invertidas (por exemplo: \"Este link conduz ao índice\"). Criação de menus de salto Um menu de salto é um menu pop-up em um documento, visível aos usuários do site, que lista as opções que estabelecem links a documentos e arquivos. Podem ser criados links a documentos no seu site da Web, a documentos em outros sites da Web, links de correio eletrônico, links a imagens ou a qualquer tipo de arquivo que possa ser aberto em um navegador. Um menu de salto contém três componentes básicos: Um aviso de seleção no menu, como uma descrição da categoria para os itens do menu, ou instruções. Por exemplo: Escolha uma opção. (Opcional) Uma lista de itens de menu vinculados: um usuário escolhe uma opção e um documento ou arquivo vinculado é aberto. (Necessário) Um botão Ir. (Opcional) Inserção de um menu de salto Para inserir um menu de salto no documento, utilize o objeto de formulário Menu de salto. Para criar um menu de salto: 1. Abra um documento, em seguida coloque o ponto de inserção na janela do documento. 57

58 2. Siga um dos procedimentos abaixo: Escolha Inserir > Objeto formulário > Menu de salto. 3. Na barra Inserir, selecione a guia Formulário e clique no botão Menu de salto. Será exibida a caixa de diálogo Menu de salto. 4. Preencha a caixa de diálogo. 5. Clique em OK. O menu de salto será exibido no documento. Criação das barras de navegação Uma barra de navegação é composta por uma ou um conjunto de imagens, que exibe as alterações com base nas ações de um usuário. As barras de navegação são, com freqüência, um modo fácil de se mover entre as páginas e arquivos de um site. Antes de utilizar o comando Inserir barra de navegação, crie um conjunto de imagens para exibir os estados de cada elemento de navegação. Pode ser mais fácil imaginar um elemento da barra de navegação como um botão porque, quando clicado, ele conduzirá o usuário a outra página. Um elemento da barra de navegação pode apresentar quatro estados: Ativa: a imagem que aparece quando o usuário ainda não clicou ou interagiu com o elemento. Por exemplo: o elemento nesse estado parece que não foi clicado. Sobreposta: a imagem que aparecerá quando o cursor for movido sobre uma imagem ativa. A aparência do elemento é alterada (por exemplo: poderá ficar mais clara) para informar aos usuários que eles não podem interagir com o elemento. Inativa: a imagem que aparece após o clique no elemento. Por exemplo: quando um usuário clica em um elemento, uma nova página é carregada e a barra de navegação ainda estará em exibição, mas o elemento clicado estará escurecido para mostrar que foi selecionado. Imagem sobreposta enquanto inativa: a imagem que aparecerá quando o cursor for deslizado sobre a imagem inativa, após o clique do usuário. 58

59 Por exemplo: o elemento aparece esmaecido ou cinza. Esse estado pode ser utilizado como uma informação visual aos usuários de que esse elemento não pode ser clicado novamente enquanto estiverem nesta parte do site. Não é necessário incluir imagens de barra de navegação para os quatro estados; por exemplo: talvez sejam escolhidos apenas os estados Ativa e Inativa. Você pode criar uma barra de navegação, copiá-la em outras páginas no seu site, utilizá-la com molduras e editar os comportamentos da página, para mostrar os diferentes estados à medida que as páginas são acessadas. Inserção de uma barra de navegação Quando uma barra de navegação é inserida, os nomes dos elementos da barra recebem nomes e são escolhidas imagens que os representem. Para criar uma barra de navegação: 1. Siga um dos procedimentos abaixo: Escolha Inserir > Imagens interativas > Barra de navegação. 2. Na barra Inserir, selecione a guia Comuns e clique no botão Inserir barra de navegação. Aparecerá a caixa de diálogo Inserir barra de navegação. 3. Preencha a caixa de diálogo. 4. Clique em OK. Criação dos mapas de imagens Um mapa de imagens é uma imagem que foi dividida em regiões, ou pontos ativos; quando um ponto ativo for clicado, ocorrerá uma ação (um novo arquivo será aberto, por exemplo). Utilize o inspetor de propriedades da imagem para criar e editar graficamente os mapas de imagens do cliente. Os mapas de imagens do cliente armazenam as informações sobre o link de hipertexto no documento HTML e não em um arquivo de mapa separado, como fazem os mapas de imagens do servidor. Quando um visitante do site clica em um ponto ativo na imagem, a URL a ele associada é enviada diretamente ao servidor. Isso torna os mapas de imagens de clientes mais rápidos que os do servidor, porque o servidor não precisará interpretar onde o usuário clicou. Os mapas de imagens de clientes contam com suporte do Firefox 1.0 e mais avançado, Opera e de todas as versões do Microsoft Internet Explorer. O Dreamweaver não altera as referências de mapas de imagens do servidor nos documentos existentes; é possível utilizar mapas de imagens de clientes e do servidor em um mesmo documento. Contudo, os navegadores que oferecem suporte a ambos os tipos de mapas de imagens priorizam os do cliente. Para incluir um mapa de imagens do servidor em um documento, é necessário gravar o código HTML adequado. Inserção de mapas de imagens de clientes 59

60 Quando você inserir um mapa de imagens de cliente, estará criando uma área de ponto ativo e, em seguida, defina o link que será aberto quando o usuário clicar nessa área. Nota: Podem ser criadas várias áreas de pontos ativos, mas elas fazem parte do mesmo mapa de imagens. Para criar um mapa de imagens do cliente: 1. Na janela do documento, selecione a imagem. 2. Clique na seta de expansão, no canto inferior direito do inspetor de propriedades, para examinar todas as propriedades. 3. No campo Nome do mapa, digite um nome exclusivo para o mapa de imagens. Nota: Caso sejam utilizados vários mapas de imagens no mesmo documento, verifique se cada mapa tem um nome exclusivo. 4. Para definir as áreas do mapa de imagens, siga um dos procedimentos abaixo: Selecione a ferramenta de círculo e arraste o cursor sobre a imagem para criar um ponto ativo circular. 5. Selecione a ferramenta de retângulo e arraste o cursor sobre a imagem para criar um ponto ativo retangular. 6. Selecione a ferramenta de polígono e defina um ponto ativo com forma irregular, clicando uma vez em cada canto. Clique na ferramenta de seta para fechar o formato. Após a criação do ponto ativo, será exibido respectivo inspetor de propriedades. 7. Preencha o inspetor de propriedades do ponto ativo. 8. No final do mapeamento da imagem, clique em uma área em branco no documento para alterar o inspetor de propriedades. Anexação de comportamentos aos links Um comportamento pode ser anexado a qualquer link em um documento. Considere a possibilidade de utilizar os seguintes comportamentos ao inserir elementos vinculados em seus documentos: Definir a mensagem de status mostra uma mensagem na barra de status, na parte inferior esquerda da janela do navegador. Por exemplo: é possível utilizar esta ação para descrever o destino de um link na barra de status, em vez de mostrar a URL a ele associada. Abrir a janela do navegador abre uma URL em uma nova janela. É possível especificar as propriedades da nova janela, inclusive o seu tamanho, nome e atributos (se ela será redimensionável, possuirá uma barra de menus, etc.). Como trabalhar com itens de biblioteca Uma biblioteca é um arquivo especial do Dreamweaver que contém uma coleção propriedades individuais ou cópias de propriedades criadas por você para serem inseridas nas páginas da Web. Se desejar apenas que as páginas tenham os mesmos cabeçalhos e rodapés, mas com layouts variáveis, utilize os itens de biblioteca para armazenar os cabeçalhos e rodapés. Os itens de biblioteca são elementos de página armazenados que podem ser reutilizados em diversas páginas. É possível atualizar todas as páginas que utilizam um item de biblioteca, sempre que desejar alterar o conteúdo do item. É possível armazenar todos os tipos de elementos de página, como imagens, tabelas, sons e filmes Flash em uma biblioteca. Ao utilizar um item de biblioteca, o Dreamweaver não insere o item de biblioteca na página da Web, em vez disso, insere um link ao item. Caso seja necessário alterar um item de biblioteca posteriormente, por exemplo: modificar algum texto ou uma imagem, a atualização do item de biblioteca automaticamente atualiza a instância da biblioteca em qualquer página na qual o item biblioteca foi inserido. Como criar, gerenciar e editar itens de biblioteca As bibliotecas constituem uma maneira de armazenar elementos de páginas como, por exemplo: imagens, texto e outros objetos, que são reutilizados ou atualizados com freqüência no site da Web. Estes elementos são denominados itens de biblioteca. 60

61 Quando um item de biblioteca é colocado em um documento, o Dreamweaver insere uma cópia do código-fonte HTML correspondente ao item no documento e adiciona um comentário HTML com uma referência ao item externo original. A referência ao item externo da biblioteca possibilita a atualização simultânea do conteúdo de um site inteiro, por meio da alteração do item de biblioteca e, em seguida, da utilização dos comandos de atualização no submenu Modificar > Biblioteca. O Dreamweaver armazena os itens de biblioteca na pasta Library localizada na pasta raiz local de cada site. Todos os sites possuem a sua própria biblioteca. Para copiar um item de biblioteca de um site para outro, utilize o comando Copiar para o site no painel Propriedades. Nota: Se o item de biblioteca contiver links, os links poderão não funcionar no novo site. Além disso, as imagens de um item de biblioteca não serão copiadas para o novo site. A seguir um exemplo de utilização de um item de biblioteca: suponha que esteja criando um site grande para uma empresa. O slogan da empresa deve aparecer em todas as páginas do site, mas o departamento de marketing ainda não se decidiu quanto aos detalhes do conteúdo do slogan. Se um item de biblioteca for criado para conter o slogan para ser utilizado em todas as páginas, quando o departamento de marketing fornecer o slogan final, você poderá alterar o item de biblioteca e automaticamente atualizar todas as páginas que o utilizarem. Os itens de biblioteca também podem conter comportamentos, porém há requisitos especiais para a edição dos comportamentos nesses itens. Os itens de biblioteca não podem conter linhas de tempo ou folhas de estilos, porque o código correspondente a esses elementos integra a seção head (cabeçalho). Como criar um item de biblioteca É possível criar um item de biblioteca a partir de qualquer elemento na seção body de um documento, incluindo texto, tabelas, formulários, applets de Java, plugins, elementos ActiveX, barras de navegação e imagens. No caso de itens vinculados, como as imagens, a biblioteca armazenará somente uma referência ao item. O arquivo original deverá permanecer no local especificado para que o item de biblioteca funcione corretamente. Mesmo assim, poderá ser útil armazenar uma imagem em um item de biblioteca, por exemplo: você pode armazenar uma tag img completa em um item de biblioteca, que permitiria alterar facilmente o texto alt da imagem, ou o seu atributo src no site inteiro. No entanto, não utilize esta técnica para alterar os atributos de width e height de uma imagem, a não ser que utilize também um editor de imagens para alterar o tamanho real da imagem. Para criar um item de biblioteca: 1. Selecione uma parte de um documento para salvá-la como um item de biblioteca. 2. Siga um dos procedimentos abaixo: Selecione Janela > Biblioteca e arraste a seleção para a categoria Biblioteca, no painel Propriedades. 3. Na parte inferior do painel Propriedades (na categoria Biblioteca), clique no botão Novo item de biblioteca. 4. Escolha Modificar > Biblioteca > Adicionar objeto à biblioteca. 5. Digite um nome para o novo item de biblioteca. Cada item de biblioteca será salvo como um arquivo separado (com extensão.lbi) na pasta Library da pasta raiz local do site. Como inserir um item de biblioteca em um documento Quando um item de biblioteca for adicionado a uma página, o conteúdo atual será inserido no documento juntamente com uma referência ao item de biblioteca. Para inserir um item de biblioteca em um documento: 1. Coloque o ponto de inserção na janela do documento. 2. Escolha Janela > Biblioteca. O painel Propriedades aparecerá exibindo a categoria Biblioteca. 3. Arraste um item de biblioteca do painel Propriedades até a janela do documento ou selecione um item e clique no botão Inserir. 61

62 Para inserir o conteúdo de um item de biblioteca sem criar uma referência deste no documento, pressione a tecla Control enquanto arrasta um item para fora da categoria Biblioteca, no painel Propriedades. Se um item for inserido desta forma, você poderá editá-lo no documento, mas o documento não será atualizado ao atualizar as páginas que utilizam o item de biblioteca. Como editar um item de biblioteca Ao alterar um item de biblioteca, é possível atualizar todos os documentos que o utilizam. Se preferir não atualizar, os documentos permanecerão associados ao item de biblioteca. É possível atualizá-los mais tarde selecionando Modificar > Biblioteca > Atualizar as páginas. Outros tipos de alterações aos itens de biblioteca incluem a sua renomeação, para romper a sua conexão com os documentos e modelos, a sua exclusão da biblioteca do site e a recriação de um item de biblioteca perdido. Nota: O painel Estilos CSS e Linha de tempo estão disponíveis ao editar um item de biblioteca quando você estiver editando um item de biblioteca, uma vez que estes itens podem contar apenas elementos body, sendo que o código de Linha de tempo e Folha de estilo CSS é inserido na seção head de um documento. A caixa de diálogo Propriedades de página também não estará disponível, porque um item de biblioteca não pode incluir uma tag body ou seus atributos. Para editar um item de biblioteca: 1. Escolha Janela > Biblioteca. A categoria Biblioteca é exibida no painel Propriedades. 2. Selecione um item de biblioteca. A visualização do item de biblioteca é exibida no alto do painel Propriedades. Não é possível editar os elementos da visualização. 3. Na parte inferior do painel Propriedades, clique no botão Editar. De maneira alternativa, clique duas vezes no item de biblioteca. O Dreamweaver abrirá uma nova janela para a edição do item de biblioteca. Esta janela é semelhante a uma janela de documento, mas a sua visualização do projeto possui um fundo cinza, indicando a edição do item de biblioteca ao invés do documento. 4. Edite o item de biblioteca e, em seguida, salve as alterações. 5. Na caixa de diálogo que aparecer, escolha se deseja atualizar os documentos no site local que utilizam o item de biblioteca editado: Selecione Atualizar, para atualizar todos os documentos no site local com o item de biblioteca editado. 6. Escolha Não atualizar para evitar que os documentos sejam alterados até que você utilize Modificar > Biblioteca > Atualizar a página atual ou Atualizar as páginas. Para atualizar o documento atual de forma a utilizar a versão mais recente de todos os itens de biblioteca: Selecione Modificar > Biblioteca > Atualizar a página atual. Para atualizar o site inteiro ou todos os documentos que utilizarem um item de biblioteca específico: 1. Selecione Modificar > Biblioteca > Atualizar as páginas. A caixa de diálogo Atualizar as páginas é exibida. 2. No menu pop-up Procurar em, siga um dos procedimentos abaixo: Selecione Site inteiro e, em seguida, escolha o nome do site no menu pop-up adjacente. Este procedimento atualizará todas as páginas no site selecionado, para que utilizem a versão atual de todos os itens de biblioteca. 3. Escolha Arquivos que utilizam e, em seguida, escolha um item de biblioteca no menu pop-up adjacente. Este procedimento atualizará todas as páginas no site atual que utilizarem o item de biblioteca selecionado. 4. Verifique se a opção Itens de biblioteca está selecionada na opção Atualizar. Para atualizar os modelos simultaneamente, assegure-se de que a opção Modelos esteja selecionada. 5. Clique em Iniciar. 62

63 O Dreamweaver atualizará os arquivos conforme indicado. Caso você tenha selecionado a opção Mostrar o registro, o Dreamweaver fornecerá informações sobre os arquivos que tentar atualizar, incluindo informações sobre o êxito em sua atualização. Para renomear um item de biblioteca no painel Propriedades: 1. Clique no nome do item de biblioteca uma vez para selecioná-lo. 2. Após uma pequena pausa, clique novamente. 3. Quando o nome se tornar editável, digite um novo nome. Nota: Este método funciona da mesma forma que a renomeação de um arquivo no Windows Explorer. Do mesmo modo que no Windows Explorer ou Finder, certifique-se de fazer uma pequena pausa entre os cliques. Não clique duas vezes no nome, pois o item de biblioteca será aberto para edição. 4. Clique em outro local ou pressione a tecla Enter. 5. O Dreamweaver perguntará se você deseja atualizar os documentos que utilizam este item. Para atualizar todos os documentos no site que utilizarem este item, clique em Atualizar. 6. Para evitar a atualização de qualquer documento que utilizar este item, clique em Não atualizar. Para excluir um item de uma biblioteca: 1. Selecione o item na categoria Biblioteca, no painel Propriedades. 2. Clique no botão Excluir e confirme que deseja excluir o item. Tenha cuidado ao excluir um item de biblioteca, pois não será possível utilizar o comando Refazer para recuperá-lo. No entanto, talvez você possa recriá-lo, como descrito no próximo procedimento. A exclusão de um item remove-o da biblioteca, mas não altera o conteúdo de qualquer um dos documentos que utilizam o item. Para recriar um item de biblioteca ausente ou excluído: 1. Selecione uma instância do item em um documento. 2. Clique no botão Recriar no inspetor de propriedades. Como tornar editáveis os itens de biblioteca de um documento Se tiver adicionado um item de biblioteca ao documento e desejar editá-lo especificamente em uma página, será necessário romper o link entre o item do documento e a biblioteca. Quando a instância do item de biblioteca tornarse editável, essa instância não poderá ser atualizada quando o item de biblioteca tiver sido modificado. Para tornar editável um item de biblioteca: 1. Selecione um item de biblioteca no documento atual. 2. Clique em Desanexar do original, no inspetor de propriedades. A ocorrência selecionada do item de biblioteca perderá a cor de realce (se esta estiver visível) e não poderá mais ser atualizada quando o item de biblioteca original for alterado. Sobre os modelos do Dreamweaver Um modelo de Dreamweaver é um tipo especial de documento utilizado para criar um layout de página bloqueado. O autor do modelo desenvolve o layout da página e cria regiões no modelo que são editáveis em documentos baseados em um modelo. Em um modelo, o designer controla quais elementos um usuário de modelo, como programadores, artistas gráficos ou outros desenvolvedores, podem editar. Uma das principais e mais poderosa característica dos modelos é sua capacidade de atualizar diversas páginas simultaneamente. Um documento criado de um modelo permanece conectado àquele modelo (a menos que o documento seja posteriormente desanexado). É possível modificar um modelo e atualizar imediatamente o projeto em todos os documentos baseados nele. Um modelo controla as regiões fixas e editáveis de um documento com base em um modelo. Há vários tipos de regiões de modelo que podem ser incluídas em um documento. 63

64 É possível adicionar uma folha de estilo em cascata (CSS), linha de tempo ou comportamento a um documento baseado em um modelo, pois o Dreamweaver insere uma região editável automaticamente na seção head de um documento. As operações relacionadas ao modelo (como adicionar regiões editáveis) são ativadas através dos modos Visualização de código e Visualização do projeto. Algum opções de personalização de modelos está disponível somente na visualização de código. Se desejar armazenar informações adicionais sobre um modelo como, por exemplo: o autor do modelo, a data da última alteração ou o motivo de certas decisões de layout, é possível criar um arquivo Design Notes para o modelo. Os documentos que se basearem no modelo não herdarão as Design Notes. Como definir regiões de modelos Um modelo determina a estrutura básica de um documento e contém elementos como texto, imagens, layout de página, estilos e regiões editáveis. O Dreamweaver bloqueia automaticamente a maioria das regiões de um documento ao salvar o documento como modelo. Como autor do modelo, você pode definir quais regiões de um documento baseado em modelo serão editáveis inserindo regiões editáveis ou parâmetros editáveis no modelo. Enquanto o arquivo de modelo estiver sendo criado, é possível alterar as regiões editáveis e regiões bloqueadas. Em um documento baseado no modelo, no entanto, um usuário do modelo pode efetuar alterações somente nas regiões editáveis. As regiões bloqueadas não podem ser modificadas. Há quatro tipos de regiões de modelos: regiões editáveis, regiões repetidas, regiões opcionais e atributos de tags editáveis. Região editável é uma região bloqueada em um documento baseado no modelo, ou seja, uma seção editável pelo o usuário do modelo. O autor do modelo pode definir qualquer área de um modelo como editável. Para que um modelo seja efetivo, deve conter uma região editável pelo menos, caso contrário, as páginas baseadas no modelo não poderão ser editadas. Região repetida é uma seção em um documento que pode ser repetida diversas vezes. Por exemplo: é possível repetir uma linha da tabela. Ao repetir a linha de uma tabela, permite-se que usuário do modelo crie uma lista de expansão, enquanto mantém o projeto sob controle do autor do modelo. Em um documento baseado no modelo você poderá utilizar opções de controle de regiões repetidas para adicionar ou excluir cópias da região repetida. Há dois tipos de regiões repetidas você podem ser inseridas em um modelo: região repetida e tabela repetida. Região opcional é uma seção de um modelo que um designer define como opcional, para armazenar conteúdo como texto opcional ou uma imagem que podem ou não aparecer em um documento baseado no modelo. Na página baseada no modelo, o editor do conteúdo controla se o conteúdo deve ser exibido ou não, normalmente. Um atributo de tag editável permite desbloquear um atributo de tag em um modelo, de modo que o atributo possa ser editado em uma página baseada em modelo. Por exemplo: é possível bloquear a imagem que aparece no documento, mas permitir que o autor da página defina o alinhamento à esquerda, direita ou centralizado. Sobre links em modelos Para criar um link em um arquivo de modelo, utilize o ícone de pasta ou o ícone do indicador de arquivos no inspetor de propriedades. Não digite o nome do arquivo a ser vinculado. Se você digitar o nome, o link não funcionará como esperado. Esta seção explica como o Dreamweaver manipula os links em modelos. Ao criar um arquivo de modelo de uma página existente, salve a página como modelo. O Dreamweaver atualizará os links de modo que apontem para os mesmos arquivos que antes. Uma vez que os modelos são salvos na pasta Templates, o caminho para o link relativo ao documento é modificado ao salvar a página como modelo. No Dreamweaver, ao criar um novo documento baseado naquele modelo e salvar o novo documento, todos os links relativos ao documento são atualizados de modo que continuem apontando para os arquivos corretos. Ao adicionar um link relativo a documento em um arquivo de modelo, mesmo o caminho for digitado na caixa de texto do link no inspetor de propriedades, é possível digitar um caminho incorreto por engano. O caminho correto é o caminho da pasta Templates ao documento vinculado, e não o caminho da pasta do documento baseado no modelo ao documento vinculado. 64

65 Nota: Em alguns casos (como, por exemplo: caminhos de arquivos em manipuladores de eventos nos modelos) não será possível utilizar o ícone de pasta ou o ícone indicador de arquivos. Nesses casos, digite o caminho correto manualmente. Como exibir modelos no modo de visualização do projeto Em arquivos de modelos e documentos baseados em modelos, as regiões editáveis aparecerão na visualização do projeto da janela do documento entre contornos retangulares, na cor de realce apropriada. Uma pequena guia aparecerá no canto superior esquerdo de cada região editável exibindo o nome de cada região editável. As regiões de modelos também incluem uma borda destacada. O conteúdo das regiões editáveis e bloqueadas pode ser alterado. Os arquivos de modelos podem ser identificados pelo título <<Template>> e extensão de arquivo.dwt na janela Documento. Como criar um modelo no Dreamweaver É possível criar um modelo de documento existente (como um documento HTML, ColdFusion da Macromedia ou Active Server Pages da Microsoft) ou criar um modelo de um novo documento novo em branco. A caixa de diálogo Novo documento (Arquivo > Novo) fornece várias opções para a criação de novos modelos e de páginas baseadas em modelos. O Dreamweaver salva os modelos com a extensão de arquivo. dwt. Os modelos são salvos em uma pasta especial chamada Templates na pasta raiz local do site. Se a pasta Templates ainda não existir no site, o Dreamweaver criará a pasta quando você salvar um novo modelo. Nota: Não remova os modelos da pasta Templates e não coloque arquivos que não sejam modelos nesta pasta. Além disso, não mova a pasta Templates da pasta raiz local. Ao fazer isto, você estará provocando erros nos caminhos dos modelos. Como salvar um documento como modelo É possível criar um modelo de documento novo ou de um documento existente. Se uma região de modelo for inserida em um documento que não foi salvo como modelo, o Dreamweaver advertirá que o documento será salvo automaticamente como modelo. Para criar um modelo: 1. Abra o documento que deseja salvar como um modelo na janela de documento efetuando um dos procedimentos a seguir: Para abrir um documento existente, selecione Arquivo >Abrir e selecione o documento. 65

66 2. Para abrir um novo documento em branco, escolha Arquivo > Novo. Na caixa de diálogo que se abre, selecione Páginas básicas ou Páginas dinâmicas. Na lista de documentos selecione o tipo de página com a qual deseja trabalhar e clique em Criar. 3. Quando o documento for aberto, escolha Arquivo > Salvar como modelo. Nota: A menos que a opção Não notificar novamente for selecionada, surgirá uma advertência informando que o documento que está sendo salvo não possui nenhuma região editável. Clique em OK para salvar o documento como modelo ou clique em Cancelar para sair dessa caixa de diálogo sem criar um modelo. 4. Na caixa de diálogo que aparece, selecione um site para salvar o modelo no menu pop-up Site e digite um nome exclusivo para o modelo na caixa de texto Salvar como. 5. Clique em Salvar. O arquivo de modelo será salvo na pasta Templates com a extensão.dwt. Para criar um novo modelo no painel Propriedades: 1. Abra o painel Propriedades (Janela > Propriedades ou F11), caso não esteja aberto. 2. Selecione a categoria Modelos. 3. Clique no botão Novo modelo no painel Propriedades. Um novo documento novo é adicionado à lista Nome. O nome do documento é realçado. 4. Digite um nome para o documento. 5. Clique no botão Editar no painel Propriedades. O documento de modelo se abre na janela do documento. Como criar regiões editáveis As regiões editáveis dos modelos controlam as áreas de uma página baseada em modelo que podem ser editadas. É possível marcar como editável uma tabela inteira ou uma célula de tabela, no entanto, não é possível marcar várias células de tabela como uma única região editável. Se a tag <td> for selecionada, a região editável incluirá a região ao redor da célula, caso contrário, a região editável afetará o conteúdo dentro da célula. As camadas e o seu conteúdo são elementos separados. Ao tornar uma camada editável, sua posição, assim como o seu conteúdo, podem ser alterados e ao tornar o conteúdo da camada editável permitirá alterar somente o conteúdo da camada e não a sua posição. Para selecionar o conteúdo da camada, clique na camada e selecione Editar > Selecionar tudo. Para selecionar a camada, certifique-se de que os elementos invisíveis estejam aparecendo e clique no ícone que representa o local da camada. Como inserir uma região editável Antes de inserir uma região editável, salve o documento atual como modelo. Se você inserir uma região editável em um documento em vez de um arquivo de modelo, o Dreamweaver o advertirá que o documento será salvo automaticamente como modelo. Para definir uma região de modelo editável: 66

67 1. Na janela do documento, siga um dos procedimentos abaixo para selecionar a região: Selecione o texto ou conteúdo a ser definido como uma região editável. 2. Coloque o ponto de inserção onde deseja inserir uma região editável. 3. Siga um dos procedimentos abaixo para inserir uma região editável: Selecione Inserir > Objetos de modelos > Nova região editável. 4. Clique com o botão direito do mouse (no Windows) no texto selecionado e no escolha Nova região editável no menu contextual. 5. Na barra Inserir, selecione Modelos e clique no botão Região editável. A caixa de diálogo Região editável é exibida. 6. Na caixa de texto Nome, digite um nome único para a região. Em um determinado modelo, não é possível utilizar o mesmo nome para mais de uma região editável. Nota: Não é permitido utilizar caracteres especiais no campo Nome. 7. Clique em OK. A região editável é inserida em um contorno retangular realçado no modelo com a cor de destaque definida em preferências. Uma guia no canto superior esquerdo da região mostra o nome da região. Se uma região editável vazia for inserida no documento, o nome da região também aparecerá dentro da região. Como remover uma região editável Se você marcar uma região do arquivo de modelo como editável e, subseqüentemente, desejar bloqueá-la (torná-la não-editável) novamente, utilize o comando Remover a região editável. Nota: Não é possível bloquear uma região em um arquivo com baseado em modelo. Só é possível bloquear uma região em um arquivo de modelo. Para remover uma região editável: 1. No documento ou no seletor de tags, selecione a região editável a ser modificada. 2. Escolha Modificar > Modelos > Remover o markup do modelo. A região não será mais editável. Como criar um documento de um modelo Uma vez definido o design do modelo, é possível aplicar o modelo a um documento em branco ou documento que já contêm conteúdo. Para criar um novo documento baseado em um modelo, use o painel Propriedades ou a caixa de diálogo Novo documento. O painel Propriedades relaciona os modelos contidos no site Dreamweaver atual. Clique com o botão direito do mouse na categoria Modelos do painel Propriedades para criar um novo modelo e criar novos documentos de um modelo. Na caixa de diálogo Novo documento, é possível selecionar um modelo de qualquer site Dreamweaver definido para criar um novo documento com base naquele modelo. Ao criar um novo documento de um modelo, você pode escolher se o documento deve permanecer anexado ao modelo. Por padrão, ao modificar um modelo, todos os documentos anexados são atualizados para refletir as alterações feitas no modelo. Se a opção Atualizar a página quando o modelo for alterado for desmarcada ao criar um documento novo, o documento novo será criado como papel de carta: um arquivo HTML independente, sem regiões de modelos. As atualizações feitas no modelo não modificam o documento. Para criar um documento baseado em modelo na caixa de diálogo Novo documento: 1. Selecione Arquivo > Novo para abrir a caixa de diálogo Novo documento. 2. Na caixa de diálogo Novo documento, selecione a categoria Modelos. 3. Na lista Modelos para, selecione o site que contém o modelo que você deseja utilizar. A lista de modelos de sites é atualizada para exibir os modelos no site selecionado. 4. Na lista, selecione o modelo a ser utilizado. 67

68 5. Clique em Criar para criar uma nova página do modelo. O documento é aberto na janela Documento. Para criar um novo documento de um modelo no painel Propriedades: 1. Abra o painel Propriedades (F11), se ainda não estiver aberto. 2. No painel Propriedades, clique no ícone Modelos para exibir os modelos do site. Dica: Se você acabou de criar o modelo que deseja aplicar, talvez seja preciso clicar no botão Atualizar para visualizá-lo. 3. Clique no modelo a ser aplicado e selecione Novo a partir de modelo. O documento é aberto na janela Documento. Como aplicar um modelo a um documento existente Ao aplicar um modelo a um documento que com conteúdo existente, o Dreamweaver tentará corresponder o conteúdo existente a uma região do modelo. Se você estiver aplicando uma versão revisada de um dos modelos existentes, é provável que os nomes sejam correspondentes. O Dreamweaver compara os nomes das regiões editáveis no documento com os nomes das regiões editáveis no novo modelo. Para cada nome de região coincidente, o Dreamweaver coloca o conteúdo existente daquela região na nova região com o mesmo nome. Se um modelo for aplicado a um documento que não teve um modelo aplicado a ele, não haverá nenhuma região editável para comparar e ocorrerá um erro de correspondência. O Dreamweaver localiza os erros de correspondência e os listará na caixa de diálogo Nomes inconsistentes de regiões. É possível selecionar as região ou regiões para as quais o conteúdo da página atual deve ser transferido ou excluir o conteúdo não correspondente. Se desejar manter o conteúdo, selecione o nome de uma região editável do menu pop-up na caixa de diálogo. Caso contrário, selecione em lugar nenhum para descartar o conteúdo não solucionado. Para aplicar um modelo a um documento existente: 1. Selecione Arquivo > Abrir para abrir o documento ao qual deseja aplicar o modelo. 2. Efetue um dos procedimentos a seguir: Clique na janela do documento e, em seguida, escolha Modificar > Modelos > Aplicar o modelo à página. Escolha um modelo na lista e clique em Selecionar. 3. Selecione o modelo na categoria Modelos do painel Propriedades e clique no botão Aplicar. 4. Arraste o modelo da categoria Modelos, no painel Propriedades, para a visualização do projeto da janela do documento. 5. Se houver conteúdo no documento que não pode ser atribuído automaticamente a uma região de modelo, a caixa de diálogo Nomes inconsistentes de regiões será exibida. A caixa listará todas as regiões editáveis no modelo que está sendo aplicado. Utilize-a para escolher um destino para o conteúdo. Como desanexar um documento de um modelo Para fazer alterações nas regiões bloqueadas de um documento baseado em um modelo, é necessário desanexar o documento do modelo. Quando o documento for desanexado, o documento inteiro se torna editável. Para desanexar um documento de um modelo: 1. Abra o documento baseado em modelo a ser desanexado. 2. Escolha Modificar > Modelos > Desanexar do modelo. O documento é desanexado do modelo e todos os códigos do modelo são removidos. Como editar e atualizar os modelos Ao salvar um modelo, o Dreamweaver pergunta se você deseja atualizar todos os documentos anexados ao modelo. Para isso, use o comando Modificar > Modelos > Atualizar as páginas. O Dreamweaver atualiza os documentos baseados no modelo no mesmo site que o modelo. O Dreamweaver atualizará automaticamente os documentos baseado no modelo, incluindo modelos aninhados baseados no modelo que estiver sendo atualizado. 68

69 Como atualizar documentos baseados em um modelo Quando uma alteração for feita em um modelo, o Dreamweaver solicitará a atualização das páginas que o utilizarem. Podem ser utilizados também os comandos de atualização para atualizar manualmente o documento atual ou o site inteiro. A utilização dos comandos de atualização funciona da mesma maneira que a reaplicação do modelo. Para abrir e modificar um modelo anexado: 1. Como o documento baseado em modelo na janela Documento, selecione Modificar > Modelos > Abrir o modelo anexado. 2. Modifique o conteúdo do modelo como desejar. Para modificar as propriedades da página do modelo, escolha Modificar > Propriedades da página. Os documentos baseados no modelo recebem as propriedades da página do modelo. 3. Salve o documento. O Dreamweaver solicita que você atualize as páginas baseadas no modelo. Para aplicar as modificações do modelo ao documento: Selecione Modificar > Modelos > Atualizar a página atual. Para atualizar o site inteiro ou todos os documentos que utilizarem um modelo anexado: 1. Selecione Modificar > Modelos > Atualizar as páginas. A caixa de diálogo Atualizar as páginas é exibida. 2. No menu pop-up Procurar em, siga um dos procedimentos abaixo: Selecione Site inteiro e, em seguida, escolha o nome do site no menu pop-up adjacente. Este procedimento atualizará todas as páginas no site selecionado de acordo com os modelos correspondentes. 3. Selecione Os arquivos que utilizam e, em seguida, escolha o nome do modelo no menu pop-up adjacente. Este procedimento atualizará todas as páginas no site atual que utilizam o modelo selecionado. 4. Verifique se a opção Modelos está selecionada na opção Atualizar. 5. Clique em Iniciar. O Dreamweaver atualizará os arquivos conforme indicado. Se a opção Mostrar o registro for selecionada, o Dreamweaver fornecerá informações sobre os arquivos que tentar atualizar, incluindo informações sobre o êxito em sua atualização. Criação de formulários interativos Os formulários permitem interagir com ou reunir informações dos visitantes a um site da Web. Os formulários coletam informações dos usuários e as enviam ao servidor para serem processadas. Os formulários podem conter vários objetos que possibilitam a interação do usuário. Os objetos de formulário incluem campos de texto, caixas de listagem, caixas de seleção e botões de opção. A tag form inclui parâmetros que permitem especificar um caminho até o aplicativo ou script do servidor que processará os dados do formulário, bem como o método que será utilizado ao transmitir os dados do navegador ao servidor. Quando um visitante insere informações no formulário do site da Web e clica no botão Enviar, os dados são enviados ao servidor que contém o script ou aplicativo que as processa. O servidor responderá enviando a informação solicitada pelo usuário ou efetuando alguma ação com base no conteúdo do formulário. Normalmente, as informações são processadas por um script GGI (Common Gateway Interface), página ColdFusion, Java Server Page (JSP) ou Active Server Page (ASP). Observe que não é possível obter os dados do formulário sem utilizar um aplicativo ou script de servidor para processar os dados. 69

70 O Dreamweaver MX permite criar diversos objetos de formulário, como campos de texto, campos de senha, botões de opção, caixas de seleção, menus pop-up e imagens clicáveis (como um botão Enviar). O Dreamweaver também inclui o comportamento Validar o formulário que serve para verificar as informações fornecidas pelo visitante. Por exemplo: é possível verificar se um endereço de correio eletrônico contém o ou se um campo necessário foi preenchido. Os objetos de formulário No Dreamweaver, os tipos de entrada em formulários são denominados objetos de formulário. Os objetos de formulários são inseridos selecionando-se Inserir > Objetos de formulário ou acessando os objetos de formulário no painel Formulários da barra Inserir mostrada abaixo. A categoria Formulários apresenta os seguintes botões: Formulário insere um formulário no documento. O Dreamweaver insere tags form de abertura e finalização no código-fonte HTML. Quaisquer outros objetos de formulário, como campos de texto, botões e outros, devem ser inseridos entre as tags form, para que os dados sejam processados corretamente por todos os navegadores. Campo de texto insere um campo de texto em um formulário. Os campos de texto aceitam qualquer tipo de entrada alfanumérica. O texto digitado pode ser exibido como uma linha simples, linhas múltiplas, marcadores ou asteriscos (para proteção das senhas). Campo oculto insere um campo oculto no documento, no qual é possível armazenar dados do usuário. Os campos ocultos permitem armazenar informações digitadas pelo usuário (como um nome, endereço de correio eletrônico ou preferência de compra) e, em seguida, utilizá-las quando o usuário visitar o site novamente. Caixa de seleção insere uma caixa de seleção em um formulário. As caixas de seleção permitem múltiplas respostas em um único grupo de opções. O usuário poderá selecionar quantas opções forem aplicáveis. Botão de opção insere um botão de opção em um formulário. Os botões de opção representam opções exclusivas. A seleção de um botão em um grupo cancela a escolha de todos os outros botões do mesmo. Por exemplo: o usuário pode selecionar Sim ou Não. Grupo de botões de opção insere vários botões de opção com o mesmo nome. Lista/menus permite criar opções do usuário em uma lista. A opção Lista exibirá os valores de opção em uma lista de rolagem e permitirá aos usuários selecionar diversas opções na lista. A opção Menu exibe os valores de opção em um menu pop-up e permite aos usuários selecionar apenas uma única opção. Menu de salto insere uma lista de navegação ou menu pop-up. Os menus de salto permitem inserir um menu no qual cada opção é vinculada a um documento ou arquivo. Campo de imagens permite inserir uma imagem em um formulário. Os campos de imagens podem ser utilizados em lugar dos botões Enviar para criar botões com aparência gráfica. 70

71 Campo de arquivos insere um campo de texto em branco e um botão Procurar em um documento. Os campos de arquivos permitem que o usuário procure os arquivos nos discos rígidos e efetue o upload como dados do formulário. Botão insere um botão de texto em um formulário. Os botões realizam tarefas quando forem clicados, como o envio e redefinição dos formulários. É possível adicionar um nome ou identificador personalizado ao botão, ou utilizar um dos identificadores predefinidos: Enviar ou Redefinir. Como criar um formulário A barra Inserir do Dreamweaver permite criar um formulário e inserir objetos nele, por exemplo: campos de texto, botões, caixas de listagem e botões de opção. Para adicionar um formulário a um documento: 1. Coloque o ponto de inserção onde o formulário deve ser exibido. 2. Escolha Inserir > Formulário ou selecione a categoria Formulários na barra Inserir e clique no ícone de Formulário. O Dreamweaver inserirá o formulário. Com a página no modo de visualização do projeto, os formulários são indicados por um contorno pontilhado em vermelho. Se este contorno não estiver visível, verifique se a opção Exibir > Auxílios visuais > Elementos invisíveis está selecionada. 3. Na janela do documento, clique no contorno do formulário para selecionar o formulário ou selecione a tag <form>, no seletor de tags situado no canto inferior esquerdo da janela do documento. 4. No campo Nome do formulário no inspetor de propriedades, digite um nome exclusivo para identificar o formulário. Nomear um formulário possibilita fazer referências a ele ou controlá-lo com uma linguagem de criação de scripts, como JavaScript ou VBScript. Se o formulário não for denominado, o Dreamweaver irá gerar um nome utilizando a sintaxe form e incrementará o valor n para cada formulário incluído na página. 5. No inspetor de propriedades, especifique no campo Ação, o caminho até a página ou o script dinâmico que processará o formulário. O caminho completo pode ser digitado no campo Ação ou clique no ícone de pasta para navegar até a pasta adequada que contém a página do script ou aplicativo. Se estiver especificando um caminho até uma página dinâmica, o caminho até a URL terá uma aparência semelhante à do exemplo: 6. No menu pop-up Método, escolha o método de transmissão dos dados do formulário ao servidor. Os métodos de processamento de formulários são: POST Incorpora os dados do formulário à solicitação HTTP. GET Anexa o valor à URL que solicita a página. Padrão Utiliza a definição padrão do navegador para enviar os dados do formulário ao servidor. Normalmente, o padrão utilizado é o método GET. Observe que o método escolhido pode ser definido pelo servidor da Web ou de aplicativos que esteja em uso. Entre em contato com o administrador de servidores da sua empresa para obter mais informações. 71

72 Não utilize o método GET para enviar formulários extensos. As URLs estão limitadas a caracteres. Se o volume de dados enviados for muito grande, os dados serão truncados, resultando em falha de processamento ou situações inesperadas. Além disso, não utilize o método GET para enviar nomes de usuários e senhas confidenciais, números de cartões de crédito ou outras informações sigilosas. O método GET não é seguro para transmitir informações. 7. O menu pop-up Tipo de codif. permite especificar o tipo de codificação MIME dos dados enviados ao servidor para processamento. A definição padrão application/x-www-form-urlencode é utilizada normalmente com o método POST. Se você estiver criando um campo para upload de arquivos, especifique o tipo de MIME multipart/form-data. 8. O menu pop-up Destino especifica a janela na qual serão exibidos os dados enviados pelo programa utilizado. Se a janela denominada ainda não estiver aberta, uma nova janela será aberta com o mesmo nome. Os valores do destino são: _blank carrega o documento correspondente ao destino em uma janela nova e sem nome. _parent abre o documento correspondente ao destino na janela principal daquela que está exibindo o documento. _self abre o documento correspondente ao destino na mesma janela em que o formulário foi enviado. _top abre o documento correspondente ao destino na janela que estiver aberta. Este valor pode ser utilizado para assegurar que o documento correspondente ao destino ocupe a janela inteira, mesmo que o documento original seja exibido em uma moldura. Como compreender os objetos de formulário Os objetos de formulário são mecanismos que permitem aos usuários inserir dados. Antes de criar um objeto de formulário, é necessário inserir um formulário na página. Dica: Se você tentar inserir um objeto de formulário sem criar o formulário, a seguinte mensagem do Dreamweaver será exibida: Deseja adicionar tags de formulário?. Escolha Sim para que o Dreamweaver crie tags "form" para o objeto. Os objetos de formulário que podem ser adicionados a um formulário são os seguintes: Campos de texto aceitam qualquer tipo de entrada de texto alfanumérico. O texto pode ser exibido como uma linha simples, linhas múltiplas e uma série de pontos ou asteriscos no caso de informações confidenciais (com a finalidade de proteger a senha, por exemplo). Campos ocultos permitem armazenar informações digitadas pelo usuário (como nome, endereço de correio eletrônico ou preferência de exibição) e, em seguida, utilizá-las quando o usuário visitar o site novamente. Botões executam ações quando clicados. Normalmente, as ações incluem o envio ou a redefinição de um formulário. É possível adicionar um nome ou identificador personalizado ao botão ou utilizar um dos identificadores predefinidos: Enviar ou Redefinir. Caixas de seleção permitem obter múltiplas respostas a partir de um único grupo de opções. O usuário pode escolher quantas opções forem necessárias. Botões de opção representam opções exclusivas. A seleção de um dos botões do grupo cancela a seleção de todos os outros (um grupo consiste em dois ou mais botões com o mesmo nome). Por exemplo: em um formulário de assinatura de usuário, é necessário selecionar sexo masculino ou sexo feminino. Lista/Menus exibem valores de opção em uma lista de rolagem que permite aos usuários selecionar várias opções. A opção Menu exibe os valores de opção em um menu pop-up e permite aos usuários selecionar apenas um único item. Menus de salto são listas navegáveis ou menus pop-up que permitem inserir um menu no qual cada opção está vinculada a um documento ou arquivo. Campos de arquivos permitem ao usuário procurar arquivos no computador e efetue o upload dos arquivos como dados do formulário. 72

73 Campos de imagens permitem inserir uma imagem em um formulário. Os campos de imagens podem ser utilizados para criar botões com aparência gráfica (por ex.: os botões Enviar e Redefinir). Utilização dos campos de formulário Os campos de formulário permitem que os usuários digitem texto em um formulário. Há três tipos de campos de formulário: Campos de texto (nos quais o usuário digita uma resposta). Campos de arquivos (nos quais o usuário digita o caminho de um arquivo com o objetivo de efetuar o upload para um servidor). Campos ocultos (que armazenam as informações digitadas pelo usuário em outro campo). Ao adicionar um campo a um formulário, é possível a sua extensão, o número de linhas, número máximo de caracteres que podem ser digitados pelo usuário e se é um campo de senha. Como testar um site Antes de carregar o site em um servidor e prepará-lo para a exibição, é recomendável testá-lo localmente (recomenda-se testar e verificar se há problemas no site com freqüência durante a sua construção. Desta forma, é possível descobrir problemas com antecedência e evitar que se repitam). Certifique-se de que a aparência e o funcionamento das páginas nos navegadores de destino estejam de acordo com o esperado, que não haja links rompidos e que o download das páginas não demore demais. É possível também testar e solucionar problemas em todo o site executando um relatório do site. As orientações a seguir o ajudarão a tornar seu site uma experiência agradável para os visitantes: Certifique-se de que as páginas estejam funcionando conforme o esperado nos navegadores de destino e se não apresentam problemas ou falhem em outros navegadores. As páginas devem ser legíveis e funcionais nos navegadores que não oferecerem suporte aos estilos, camadas, plugins ao JavaScript. No caso das páginas que não funcionam adequadamente em navegadores de versões anteriores, é possível utilizar o comportamento Verificar o navegador para redirecionar os visitantes automaticamente a uma outra página. Visualize as páginas no maior número possível de navegadores e plataformas diferentes.este procedimento possibilita a exibição de diferenças no layout, cores, tamanhos de fonte e tamanho padrão de janelas do navegador, que não podem ser previstos em uma verificação de navegador de destino. Verifique se há links rompidos no site e ajuste-os. Uma vez que os outros sites também sofrem reformas e reorganizações, a página à qual está vinculando o seu site pode ter sido transferida ou excluída. É possível executar um relatório de verificação do link para testá-los. Monitore o tamanho das páginas e o tempo de download. Lembre-se de que as páginas que consistem de uma tabela maior serão visualizadas pelos visitantes somente após o término da descarga da tabela inteira. Há também o recurso de desmembrar tabelas grandes. Caso isto não seja possível, coloque um conteúdo pequeno (como uma mensagem de boas-vindas ou uma faixa de propaganda) fora da tabela no alto da página, para que os visitantes possam visualizar esse material enquanto for feito o download da tabela. Execute alguns relatórios de site para testar e solucionar problemas no site como um todo. É possível diagnosticar problemas em todo o seu site, como, por exemplo: documentos sem títulos, tags vazias e tags redundantes aninhadas. Depois que seção maior do site tiver sido publicada, prossiga com sua atualização e manutenção. A publicação do site, ou seja, colocá-lo no ar, pode ser efetuada de várias maneiras e é um processo contínuo. A definição e implementação de um sistema de controle de versão é um processo importante, tanto com as ferramentas do Macromedia Dreamweaver MX, quanto com um aplicativo externo de controle de versão. Como verificar a compatibilidade com o navegador 73

74 O Dreamweaver permite criar páginas da Web com elementos suportados por todos os navegadores (imagens e texto de parágrafo, por exemplo), bem como elementos suportados apenas por navegadores mais recentes (estilos e camadas, por exemplo). O recurso Verificar os navegadores de destino testa o HTML nos documentos para verificar se alguma tag ou atributo não possui suporte dos navegadores de destino. A verificação não altera nenhum aspecto do documento. O recurso Verificar os navegadores de destino utiliza arquivos de texto, denominados perfis de navegadores, que determinam quais as tags suportadas pelos por navegadores específicos. O Dreamweaver inclui perfis predefinidos para Firefox versões 1.0 e posteriores, Internet Explorer versões 2.0 e posteriores e Opera versões 2.1 e posteriores. É possível executar uma verificação de navegador de destino em um documento, diretório ou no site inteiro. Nota: A verificação de um navegador de destino não é o mesmo que verificar scripts em seu site. Para executar uma verificação de navegador de destino: 1. Escolha uma das seguintes opções: Para executar a verificação no documento atual, salve primeiro o arquivo. O Dreamweaver efetuará a verificação da última versão do arquivo salvo e não inclui as modificações não salvas. 2. Para efetuar a verificação em um diretório ou site, selecione um site no menu Site atual no painel Site. O Dreamweaver efetuará a verificação do navegador de destino em todos os arquivos HTML nesta pasta e em qualquer subpasta. É possível executar verificações do navegador de destino apenas em arquivos locais. 3. Selecione Arquivo > Verificar a página > Verificar os navegadores de destino. O Dreamweaver solicitará que você selecione um navegador primário, caso ainda não tenha selecionado. 4. Na lista de navegadores, selecione o navegador de destino o qual deseja verificar para o seu site. 5. Clique em Verificar.O relatório é exibido no painel no painel Verificação do navegador de destino (no grupo de painéis Resultados). 6. Para salvar o relatório, clique no botão Salvar o relatório no painel Verificação do navegador de destino. Nota: O relatório do navegador de destino é um arquivo temporário e será perdido se não for salvo. Como visualizar as páginas nos navegadores É recomendável testar as páginas visualizando-as nos navegadores normalmente durante o projeto e o processo de criação das páginas. Com este método você poderá detectar erros com antecedência sem copiá-los ou repeti-los. É possível visualizar documentos nos navegadores de destino a qualquer momento. Não é necessário salvar o documento. Todas as funções relacionadas aos navegadores devem funcionar, inclusive os comportamentos JavaScript, links relativos a documentos e absolutos, controles ActiveX e plug-ins do Firefox, contanto que os plug-ins ou controles ActiveX necessários estejam instalados. O conteúdo vinculado a um caminho relativo à raiz não aparece quando os documentos são visualizados em um navegador local (a menos que a opção Visualizar utilizando arquivo temporário seja selecionada em Preferências). Isto ocorre porque os navegadores não reconhecem a raiz dos sites, ao contrário dos servidores. Para visualizar o conteúdo vinculado aos caminhos relativos à raiz, coloque o arquivo em um servidor remoto e selecione Arquivo > Visualizar no navegador para visualizá-lo. É possível definir até 20 navegadores para a visualização. Todos os navegadores definidos aparecerão no menu Visualizar no navegador. Os seguintes navegadores são recomendados para visualização: Internet Explorer 4.0, Firefox 1.0 ou no mínimo um navegador somente para texto, como o Lynx. Para visualizar o documento num navegador, siga um dos procedimentos abaixo: Selecione Arquivo > Visualizar no navegador e, em seguida, escolha um dos navegadores listados. Se você ainda não selecionou um navegador, selecione Editar > Preferências e selecione a categoria Visualizar no navegador à esquerda para selecionar um navegador. Pressione a tecla F12 para exibir o documento no navegador primário. Pressione as teclas Control+F12 para exibir o documento no navegador secundário. Para testar os links em um navegador: 1. Selecione Arquivo > Visualizar no navegador ou pressione a tecla F12. 74

75 2. Clique nos links ativos para verificar se estão funcionando corretamente. Para configurar ou alterar as preferências dos navegadores primários e secundários: 1. Efetue um dos procedimentos a seguir para abrir as opções Visualizar no navegador: Selecione Editar > Preferências e selecione Visualizar no navegador na lista de categorias à esquerda. 2. Selecione Arquivos > Visualizar no navegador > Editar a lista de navegadores. A caixa de diálogo Preferências é exibida as opções de visualização no navegador. 3. Faça as alterações necessárias. 4. Clique em OK. Como verificar os links em uma página ou site A correção dos links rompidos (aqueles que não mais seguem um caminho válido ou indicam arquivos inexistentes) em um site grande pode se tornar uma tarefa tediosa e demorada. Isto se deve ao fato de um grande site conter centenas de links a documentos internos e externos e que podem se modificar ao longo do tempo. Os arquivos órfãos (arquivos que ainda existem no site, mas não estão mais vinculados a nenhum arquivo) também são um problema, pois ocupam espaço em disco e podem confundir outros membros da equipe que estiverem trabalhando no site. Utilize o recurso Verificar os links para localizar links rompidos e arquivos sem referências em um arquivo aberto, em uma parte do site ou no site local inteiro. O Dreamweaver verificará apenas os links aos documentos dentro do site e compilará uma lista de links externos que aparecem no documento ou documentos selecionados, porém não os verificará. Quando o Dreamweaver finaliza a verificação dos links nos arquivos especificados, abre o painel Verificador de links (no grupo de painéis Resultados). Esta caixa de diálogo exibe uma lista de links rompidos, links externos (impossíveis de serem verificados pelo Dreamweaver) e arquivos órfãos. Para verificar os links no documento: 1. Salve o arquivo em um local no site Dreamweaver local. 2. Selecione Arquivo > Verificar a página > Verificar os links. O relatório é exibido no painel Verificador de links (no grupo de painéis Resultados). 3. Para salvar o relatório, clique no botão Salvar o relatório no painel Verificador de links. Nota: O relatório do navegador de destino é um arquivo temporário e será perdido se não for salvo. Para verificar os links em uma parte de um site local: 75

76 1. No painel Site, selecione um site no menu pop-up Site atual. 2. Em Visualização do local, selecione os arquivos ou pastas a serem verificados. 3. Inicie a verificação seguindo um dos procedimentos abaixo: Clique com o botão direito do mouse e, no menu contextual, selecione Verificar os links > Arquivos/pastas selecionadas. 4. Selecione Arquivo > Verificar a página > Verificar os links. O relatório é exibido no painel Verificador de links (no grupo de painéis Resultados). 5. No painel Verificador de links, selecione um relatório de links específico no menu pop-up Mostrar para exibir outro relatório. As opções do relatório são Links rompidos e Links externos. É possível verificar arquivos órfãos ao verificar os links em todo o site. 6. Para salvar o relatório, clique no botão Salvar o relatório no painel Verificador de links. Para verificar os links no site inteiro: 1. No painel Site, selecione um site no menu pop-up Site atual. 2. Escolha Site > Verificar os links no site inteiro. O relatório é exibido no painel Verificador de links (no grupo de painéis Resultados). 3. No painel Verificador de links, selecione um relatório de links específico no menu pop-up Mostrar para exibir outro relatório. As opções são Links rompidos, Links externos e Arquivos órfãos. 4. Uma lista de arquivos correspondentes ao tipo de relatório selecionado aparece na caixa de diálogo Verificador de links. Nota: Se Arquivos órfãos for selecionado como tipo de relatório, é possível excluí-los diretamente da caixa de diálogo Verificador de links selecionando um arquivo da lista e pressionando a tecla Del. Uma lista de arquivos correspondentes ao tipo de relatório selecionado aparecerá no painel Verificador de links. 5. Para salvar o relatório, clique no botão Salvar o relatório no painel Verificador de links. Como definir o tempo e o tamanho do download O Dreamweaver calculará o tamanho com base no conteúdo de toda a página, incluindo todos os objetos vinculados, como imagens e plug-ins. O Dreamweaver estimará o tempo de download com base na velocidade de conexão digitada nas preferências da barra de status. O tempo do download é variável e depende das condições gerais da Internet. Recomenda-se o uso da regra de oito segundos após a verificação dos períodos de download de uma determinada página da Web. Ou seja, a maioria dos usuários não esperará mais do que oito segundos para que a página seja carregada completamente. Para definir as preferências de tempo e tamanho do download: 1. Selecione Editar > Preferências. A caixa de diálogo Preferências é exibida. 2. Selecione Barra de status Bar na lista Categoria à esquerda. 76

77 A opção de preferência Barra de status é exibida. 3. Selecione uma velocidade de conexão com a qual deseja calcular o tempo do download. A velocidade média de conexão no Brasil é 28,8 kbps. Se o seu projeto destinar-se a uma intranet, selecione 1500 (velocidade T1). 4. Clique em OK. Configurar um site remoto e publicar Você acabou de criar um site da Web simples, mas funcional. O próximo passo é publicá-lo efetuando o upload dos arquivos a um servidor web remoto. Antes de prosseguir, é preciso obter acesso a um servidor Web remoto (como o servidor do provedor Internet ou um servidor proprietário do cliente para o qual você está trabalhando, servidor intranet em sua empresa ou servidor IIS ou PWS em um sistema Windows). Caso você ainda tenha acesso a um servidor, contate seu provedor de serviços Internet, cliente ou administrador do sistema. O procedimento a seguir dará mais resultado se a pasta raiz remota estiver vazia. Se o site remoto já contiver arquivos, crie uma pasta vazia em seu site remoto (no servidor) e utilize esta pasta vazia como pasta raiz remota. O procedimento a seguir pressupõe que um site local já tenha sido configurado. Para conectar-se a um site remoto: 1. Escolha Site > Editar os sites. 2. Selecione um site (como locação de veículos Global) e clique em Editar. 3. Clique na guia Básico no topo da caixa de diálogo. 4. Os primeiros passos da guia Básico são preenchidos ao configurar o site local, portanto clique em Avançar algumas vezes até que o passo Compartilhar arquivos seja realçado na parte superior do assistente. 77