Академический Документы
Профессиональный Документы
Культура Документы
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: ................................................................................................................ 10
Utilização da barra Inserir: Comuns ..................................................................................................11
Utilização da barra Inserir: Caracteres .............................................................................................. 12
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 ................................................................................................. 15
Utilização da barra Inserir: Texto ......................................................................................................15
Visão geral dos menus .......................................................................................................................16
Utilização do inspetor de propriedades ............................................................................................. 16
Como criar seu primeiro site da Web com o Dreamweaver ..............................................................17
Configurar um site local .................................................................................................................... 17
Como criar e salvar uma nova página ............................................................................................... 20
Visualizar no navegador .................................................................................................................... 21
Defina o título da página ................................................................................................................... 21
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 ............................................................................................... 24
Adição de texto a um documento ...................................................................................................... 25
Como importar texto de outros documentos ......................................................................................25
Adição de espaço entre caracteres ..................................................................................................... 25
Adição de espaços entre parágrafos ...................................................................................................25
Formatação do texto .......................................................................................................................... 26
1
Definição e alteração de fontes e estilos ............................................................................................26
Modificação de características de fontes............................................................................................ 26
Modificação de combinações de fontes .............................................................................................27
Formatação de parágrafos ..................................................................................................................27
Alinhamento de texto .........................................................................................................................28
Recuo de texto ................................................................................................................................... 28
Alteração da cor do texto ...................................................................................................................28
Criação de listas com marcadores e numeradas ................................................................................ 29
Como inserir datas ............................................................................................................................. 29
Como inserir caracteres especiais ......................................................................................................30
Utilização de réguas horizontais ........................................................................................................30
Sobre CSSs (Cascading Style Sheets) ............................................................................................... 30
Como utilizar o painel Estilos CSS ................................................................................................... 31
Criação de um novo estilo CSS ......................................................................................................... 32
Como inserir imagens ........................................................................................................................33
Sobre uma imagem ............................................................................................................................ 33
Como inserir uma imagem ................................................................................................................ 34
Como inserir um alocador de espaço de imagem .............................................................................. 34
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 ............................................................................. 38
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 .................................................... 40
Definição do layout de páginas na visualização de layout ................................................................ 40
Sobre as células e tabelas de layout ...................................................................................................41
Como entrar e sair da visualização de layout .................................................................................... 41
Como desenhar células e tabelas de layout ....................................................................................... 42
Como desenhar uma tabela de layout aninhada .................................................................................43
Utilização de molduras ...................................................................................................................... 44
Sobre molduras e conjuntos de molduras .......................................................................................... 45
Como decidir se as molduras devem ser utilizadas ........................................................................... 45
Criação de molduras e conjuntos de molduras .................................................................................. 46
Como criar um conjunto de molduras predefinido ............................................................................47
Como criar e editar um conjunto de molduras .................................................................................. 47
Como selecionar molduras e conjuntos de molduras no painel Molduras ........................................ 48
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 ........................................................................ 50
Utilização de uma imagem de rastreamento ......................................................................................50
Como trabalhar com várias páginas ...................................................................................................51
Links e navegação ............................................................................................................................. 51
Sobre as localizações e os caminhos dos documentos ...................................................................... 52
Caminhos absolutos ...........................................................................................................................52
Caminhos relativos a documento .......................................................................................................52
Caminhos relativos à raiz do site .......................................................................................................53
Criação de links ................................................................................................................................. 54
Vinculação de arquivos e documentos .............................................................................................. 54
Estabelecimento de um link a um local específico de um documento .............................................. 56
Criação de um hyperlink ....................................................................................................................57
Criação de um link de correio eletrônico ...........................................................................................57
Criação de links nulos e de script ...................................................................................................... 58
2
Criação de menus de salto ................................................................................................................. 58
Inserção de um menu de salto ............................................................................................................59
Criação das barras de navegação ....................................................................................................... 59
Inserção de uma barra de navegação ................................................................................................. 60
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 ............................................................................................ 61
Como criar, gerenciar e editar itens de biblioteca ............................................................................. 62
Como criar um item de biblioteca ..................................................................................................... 62
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 ....................................................... 64
Sobre os modelos do Dreamweaver .................................................................................................. 65
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 ....................................................................................... 67
Como criar regiões editáveis ............................................................................................................. 68
Como inserir uma região editável ......................................................................................................68
Como remover uma região editável ...................................................................................................68
Como criar um documento de um modelo ........................................................................................ 69
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 .................................................................................................... 71
Os objetos de formulário ................................................................................................................... 71
Como criar um formulário .................................................................................................................72
Como compreender os objetos de formulário ....................................................................................73
Utilização dos campos de formulário ................................................................................................ 74
Como testar um site ........................................................................................................................... 74
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 ............................................................................. 78
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
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.
4
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.
5
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.
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
Para escolher um layout de área de trabalho:
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.
7
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.
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.
8
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.
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
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
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.
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.
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.
11
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.
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.
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
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.
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.
13
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.
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
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.
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 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 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
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.
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.
• 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
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.
6. Clique em Avançar para prosseguir ao passo seguinte.A tela seguinte do assistente aparece perguntando se
desejar trabalhar com seus arquivos.
17
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.
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.
18
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.
19
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.
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.
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.
21
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.
22
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.
23
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.
24
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.
25
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
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.
27
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.
28
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 ⁢ 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.
29
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).
30
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.
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.
31
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.
5. 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.
6. Selecione o local onde o estilo será definido:
• Para criar uma folha de estilos externa, escolha Novo arquivo de folha de estilos.
7. Para incorporar o estilo no documento atual, escolha Apenas este documento.
8. 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.
32
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.
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 3.
5. Arraste uma imagem do painel Site até a localização desejada na janela do documento; em seguida, ir para
a etapa 3.
6. Arraste uma imagem da área de trabalho até a localização na janela do documento; em seguida, ir para a
etapa 3.
7. 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.
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
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.
34
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.
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
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.
37
3. Na caixa de diálogo, fornecer as informações sobre o arquivo que contém os dados.
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.
38
A caixa de diálogo Formatar a tabela é exibida.
39
(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.
40
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.
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
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.
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.
42
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
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.
44
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).
45
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:
1. Escolha Arquivo > Novo.
2. Na caixa de diálogo Novo documento, selecionar a categoria Conjuntos de molduras.
3. Selecione um conjunto de molduras na lista Conjuntos de molduras.
4. Clique em Criar.
46
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.
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
• 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.
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.
48
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.
49
• 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.
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.
50
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 http:// para as páginas da Web). Por exemplo:
http://www.macromedia.com/support/dreamweaver/contents.html é 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.
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
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.
Criação de links
52
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 http://).
• 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
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: http://). 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
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.
55
• 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.
56
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.
57
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.
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.
58
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.
59
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.
60
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).
61
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.
62
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.
63
É 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.
64
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.
65
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.
67
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.
69
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 símbolo
“@” 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.
70
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”.
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:
http://www.meu_site.com/nome_do_aplicativo/process.cfm
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:
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
Não utilize o método GET para enviar formulários extensos. As URLs estão limitadas a 8.192 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.
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.
73
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.
74
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.
75
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.
76
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.
77
5. No menu pop-up “Como se dá a sua conexão com o servidor remoto?”, selecione um método para
conectar-se ao site remoto.
O método mais comum para conexão a um servidor na Internet é o FTP e o método mais comum para
conexão a um servidor via intranet é por meio de Local/Rede. Se você não estiver seguro de qual método
escolher, pergunte ao administrador de sistema do servidor.
6. Se escolher FTP, digite as opções a seguir:
• Digite o nome do host do servidor (como ftp.macromedia.com).
7. Na caixa de texto que solicita a pasta contendo seus arquivos, digite o caminho no servidor da pasta raiz do
ftp para a pasta raiz do site remoto. Caso não tenha certeza, consulte o administrador do sistema.
Na maioria dos casos, esta caixa de texto deve ser deixada em branco.
• Digite o nome de usuário e senha nas caixas de texto apropriadas e clique em Testar a conexão.
8. Se a conexão falhar, consulte o administrador do sistema.
9. Se Local/Rede for selecionado, clique no ícone da pasta próxima à caixa de texto e localize a pasta raiz do
site remoto.
10. Clique em Avançar.
11. Não ative a devolução/retirada de arquivos para este site.
Se você ou seus colegas de trabalho estiverem trabalhando juntos em um site de nível profissional, a
devolução/retirada de arquivos ajudará a evitar que sejam sobregravados por outros arquivos. Para este site,
entretanto, este recurso não é necessário.
12. Clique em Avançar.
13. Clique em Concluir para completar a configuração do site remoto.
14. Clique em Concluir novamente para concluir a edição do site.
Para efetuar o upload de suas páginas ao site remoto:
1. No painel Site, selecione a pasta raiz local do site.
2. Clique no botão Colocar os arquivos.
78