Apostila dreamweaver

2.153 visualizações

Publicada em

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
2.153
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
139
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Apostila dreamweaver

  1. 1. SumárioINTRODUÇÃO _________________________________ 3 DICAS PARA CRIAR UM BOM SITE ____________________________ 4CONHECENDO O DREAMWEAVER _____________ 5 A JANELA DE DOCUMENTO _________________________________ 6 INSPETOR DE ORIGEM DE HTML ____________________________ 8 O INSPETOR DE PROPRIEDADES ______________________________ 9 A PALETA DE OBJETOS ___________________________________ 10 O INICIADOR __________________________________________ 12CONSTRUINDO PÁGINAS _____________________ 13 CRIANDO UM SITE LOCAL ________________________________ 13 CRIANDO PÁGINAS ______________________________________ 17 PARÁGRAFO E QUEBRA DE LINHA ___________________________ 30 A PALETA DE HISTÓRICO _________________________________ 33 FECHANDO E ABRINDO ARQUIVOS HTML ___________________ 35RECURSOS ADICIONAIS ______________________ 38 VERIFICAR ORTOGRAFIA __________________________________ 38 ALINHAMENTO DE TEXTO __________________________________ 40 INSERIR LINHA HORIZONTAL ______________________________ 41 LOCALIZAR E SUBSTITUIR _________________________________ 42TRABALHANDO COM IMAGENS _______________ 46 PROPRIEDADES DA IMAGEM ________________________________ 49 CRIANDO IMAGENS CAMBIÁVEIS ____________________________ 51
  2. 2. INSERINDO HYPERLINKS _____________________ 57 VÍNCULO DE CAMINHO RELATIVO ___________________________ 58 CAMINHO ABSOLUTO E ÂNCORA IDENTIFICADA _________________ 64 ALTERANDO AS CORES DOS VÍNCULOS _______________________ 67CRIANDO PÁGINAS COM MOLDURAS _________ 69 SALVANDO AS MOLDURAS ________________________________ 74 SELECIONANDO MOLDURAS _______________________________ 76 PROPRIEDADES DAS MOLDURAS ____________________________ 78 INSERINDO UMA BARRA DE NAVEGAÇÃO ______________________ 80CRIANDO TABELAS ___________________________ 84 PROPRIEDADES DA TABELA E DAS CÉLULAS ____________________ 85 OUTRAS MODIFICAÇÕES NA TABELA ________________________ 88 CRIANDO E FORMATANDO UMA TABELA _______________________ 91CRIANDO FORMULÁRIOS _____________________ 94 OS OBJETOS DE FORMULÁRIOS ____________________________ 94 INSERINDO OBJETOS NA PÁGINA ____________________________ 96 VALIDANDO CAMPOS DO FORMULÁRIO _____________________ 103 FAZENDO O FORMULÁRIO FUNCIONAR ______________________ 105CRIANDO FOLHAS DE ESTILOS ______________ 106CRIANDO ESTILOS HTML ____________________ 112TRABALHANDO COM CAMADAS _____________ 114 AS PROPRIEDADES DAS CAMADAS ___________________________ 115AS LINHAS DE TEMPO _______________________ 118 O INSPETOR LINHAS DE TEMPO ____________________________ 118 ADICIONANDO E MOVENDO CAMADAS _______________________ 119LISTA DE EXERCÍCIOS _______________________ 127
  3. 3. Dreamweaver 3.0INTRODUÇÃOA Internet é uma imensa rede de computadores interligados e espalha-dos pelo mundo inteiro. Através desta rede podemos trocar arquivos (de-nominados arquivos FTP), enviar e receber mensagens (que são os fa-mosos e-mails), enviar e receber vídeo e áudio em tempo real (streaming)e visualizar informações (sendo estas as informações apresentadas emforma de páginas gravadas em um determinado site). A WWW (WorldWide Web), ou simplesmente Web, é a parte da Internet que contém oconjunto de todas essas páginas que podemos acessar, visualizar e na-vegar por elas.A grande maioria das páginas da Web são criadas através de uma lin-guagem de programação denominada HTML, e os navegadores da Web(mais conhecidos como browsers) são os programas que exibem estaspáginas, pois eles lêem e entendem a linguagem HTML.Nesta apostila iremos estudar o Dreamweaver, que é um software desti-nado a criar, editar e gerenciar as páginas que são exibidas na Web, eque também utiliza a linguagem de programação HTML. Se você nãoquiser ver nada de HTML durante o processo de criação das páginas,basta não abrir a janela que exibe o código da página; caso contrário,você poderá, simultaneamente, criar a página e ver o código que vocêacabou de fazer (boa oportunidade de conhecer e aprender a linguagemHTML).No Dreamweaver você encontrará ferramentas avançadas de desenhoe layout, recursos de HTML dinâmico, camadas animadas, etc, onde to-dos podem ser utilizados sem que você tenha que gravar uma linha decódigo. Celta Informática - F: (11) 4331-1586 Página: 3
  4. 4. Dreamweaver 3.0Assim, utilizando o Dreamweaver, você poderá facilmente criar e publi-car suas páginas na Internet, e com isso, divulgar e apresentar as infor-mações contidas nas páginas a pessoas que estejam praticamente emqualquer parte do planeta. Essas pessoas, então, poderão acessar seusite (seja apenas para conhecê-lo, ou para fazer compras, pesquisas,jogar, etc) sem ter que se deslocarem fisicamente.DICAS PARA CRIAR UM BOM SITECriar um site até que não é uma tarefa muito complicada, porém, um sitebem elaborado exige paciência, dedicação e conhecimentos de algumastécnicas. Para obter os melhores resultados, projete e planeje o seu siteantes de criar qualquer página que o integrará. Procure lembrar sempreque um bom site, além de ter uma aparência atraente, necessita que amensagem seja transmitida de forma sucinta e sem demora no apareci-mento das informações na tela (ou seja, o carregamento das páginasdeve ser rápido). Fique atento às seguintes dicas:A Defina os seus objetivos de forma clara;A Analise o perfil de quem irá visitar seu site;A Utilize itens que possam ser exibidos rapidamente na tela;A Crie um bom layout de forma a torná-lo bastante atraente;A Evite excesso de informações numa única página;A De posse dos dados, procure organizá-los de forma inteligente;A A navegação no site deve ser de tal forma que os visitantes possam saber em que local do seu site eles estão e como retornar à página de nível superior;A Forneça uma maneira através da qual os visitantes possam en- trar em contato com o webmaster (quando necessário);A Realize vários testes no seu site com diferentes tipos de navegadores (browsers) antes de torná-lo disponível na Internet. Celta Informática - F: (11) 4331-1586 Página: 4
  5. 5. Dreamweaver 3.0CONHECENDO O DREAMWEAVERO Dreamweaver é constituído por uma janela principal e várias outrasjanelas flutuantes (denominadas paletas ou inspetores). Quando vocêinicia o Dreamweaver, verá a janela principal (denominada janela de do-cumento - exibe o documento atual à medida que é criado e editado) ealgumas janelas flutuantes, como mostra a figura a seguir.No ambiente de trabalho do Dreamweaver você poderá exibir ou ocultarqualquer janela, paleta ou inspetor, bastando selecionar seu nome nomenu Janela, você também poderáOBS: O Dreamweaver se lembrará das posições das janelas quandovocê sair do programa, assim, ao iniciá-lo novamente, as janelas estarãona mesma posição que estavam quando você fechou o programa pelaúltima vez. Celta Informática - F: (11) 4331-1586 Página: 5
  6. 6. Dreamweaver 3.0A JANELA DE DOCUMENTOAntes de iniciarmos a construção de um site, vamos conhecer melhor aJanela de documento, que é onde as páginas do site serão criadas. Aspáginas no Dreamweaver apresentam-se no formato WYSIWYG (“whatyou see is what you get”), isso significa que aquilo que você estiver vendona janela de documento é o que você vai ver no navegador da Web, emoutras palavras, o que você vê é o que você obtém.A janela de documento é composta pela Barra de título (que exibe o títuloda página e, entre parênteses, o nome do arquivo e um asterisco, caso oarquivo contenha alterações não salvas), Área de visualização (que exi-be todo o conteúdo da página) e pela Barra de status, que apresentaalgumas informações importantes:· Seletor de rótulos: exibem todos os rótulos (tags) que controlam o texto ou objeto selecionado (para realçar o conteúdo de algum rótulo na janela do documento, dê um clique nele).· Tamanho da janela: exibe o tamanho atual da janela de documento, permite redimensionar a janela de acordo com dimensões pré-deter- minadas ou personalizadas (basta dar um clique na setinha para que as opções sejam apresentadas). Você também pode redimensionar manualmente a janela, arrastando suas bordas.· Tamanho do documento e tempo de descarga: exibe o tamanho total da página (em Kilobytes) e o tempo de descarga com base na veloci- dade de conexão definida (para definir as preferências de tempo e tamanho de descarga, escolha menu Editar, opção Preferências, em seguida, selecione a categoria Barra de status e escolha uma veloci- dade de conexão com a qual deseja calcular o tempo de descarga). Celta Informática - F: (11) 4331-1586 Página: 6
  7. 7. Dreamweaver 3.0Se por algum motivo você quiser, será possível ocultar a Barra de status.Para isso, acesse o menu Exibir e clique na opção Barra de status.A janela de documento oferece várias opções que podem ou não serativadas, como a régua, grade, etc. As réguas, exibidas na parte superiorda janela e do lado esquerdo, poderão ser utilizadas para dimensionarmelhor alguns objetos na tela, como tabelas e imagens. Para exibir (ouocultar) as réguas, acesse o menu Exibir submenu Réguas op-ção Mostrar. No submenu Régua você também pode escolher as unida-des da régua: pixels, polegadas ou centímetros.Para obter medidas ainda mais precisas, você pode exibir a grade (ela émuito útil quando você for trabalhar com camadas, pois poderá posicioná-las ou dimensioná-las mais precisamente). Para exibi-la, acesse o menuExibir submenu Grade opção Mostrar. Ativando a opção Encai-xar do submenu Grade, você poderá fazer com que as camadas se en-caixem e se ajustem às grades quando forem arrastadas. Para alteraralgumas configurações da grade (espaçamento e cor das linhas, porexemplo) clique na opção Definições do submenu Grade. Celta Informática - F: (11) 4331-1586 Página: 7
  8. 8. Dreamweaver 3.0INSPETOR DE ORIGEM DE HTMLComo já comentamos, você poderá ver o código HTML de qualquer pági-na através do Inspetor de origem de HTML, mostrado na próxima figura.Toda página criada no Dreamweaver tem um código em HTML associa-do a ela, e é por isso que elas podem ser exibidas no navegador, já queeles só entendem as instruções do código HTML.A barra de título da janela exibe o nome do arquivo. A opção Quebra autom.de linha faz o texto mudar automaticamente de linha dentro da janela (faci-litando sua leitura) e a opção Números de linha exibe, no lado esquerdo dajanela, o número de cada linha. Como você pode observar na figura anteri-or, essas duas opções estão ativas.Para abrir a janela do Inspetor de origem HTML, acesse o menu Janela edepois a opção Origem de HTML, outra maneira é clicar no ícone doinspetor de origem de HTML, no Iniciador ou no Mini-iniciador (no cantoinferior direito da janela do documento) ou então pressionar a tecla F10. Celta Informática - F: (11) 4331-1586 Página: 8
  9. 9. Dreamweaver 3.0Você poderá realizar alterações tanto na página exibida na janela do do-cumento quanto no seu código HTML, sendo necessário, neste últimocaso, conhecer os comandos e recursos da linguagem. Qualquer açãorealizada na página (inclusão de um objeto, mudança da cor e tamanhoda fonte, seleção de texto/imagem, etc) também será realizada automa-ticamente no código HTML da página e vice-versa. Assim, você poderáacompanhar, através do inspetor de origem HTML, a criação de umapágina e ver como tudo o que você faz na janela do documento é conver-tido para HTML.O INSPETOR DE PROPRIEDADESOs elementos das páginas caracterizam-se por ser os textos e objetospertencentes a ela. Quando você quiser exibir ou alterar as propriedadesdos elementos da página, utilize o Inspetor de propriedades. Para exibir oInspetor de propriedades, selecione a opção Propriedades do menuJanela.A aparência do inspetor, ou seja, as propriedades que serão exibidas,dependerão do tipo de elemento que está atualmente selecionado. Ob-serve, na próxima figura, que uma janela do inspetor exibe as proprieda-des de uma imagem, e a outra as do texto.Algumas outras propriedades do elemento poderão ser exibidas se vocêclicar na seta de expansão no canto inferior direito da janela do inspetor,como mostra a figura anterior.O inspetor de propriedades será melhor estudado no momento em queestivermos criando as páginas, pois certamente teremos que editar ealterar as propriedades de alguns elementos. Celta Informática - F: (11) 4331-1586 Página: 9
  10. 10. Dreamweaver 3.0A PALETA DE OBJETOSNa Paleta de objetos você encontrará vários botões que serão utilizadospara inserir objetos, como tabelas, camadas e imagens nas páginas.Quando você passar o mouse sobre os botões da paleta de objetos,uma dica será exibida para lembrá-lo o que cada botão faz.Para exibir a Paleta de objetos, selecione a opção Objetos do menuJanela.A paleta de objetos contém seis painéis: Caracteres, Comuns, Formulá-rios, Head (Cabeçalho), Invisíveis e Molduras. Cada um desses painéisexibe botões diferentes, os quais relacionam-se com a função do painelque estiver selecionado.· O painel Caracteres contém caracteres especiais, como os símbolos de copyright e marca registrada, além de aspas curvas.· O painel Comuns contém os objetos mais comumente utilizados, como Imagem, Tabela e Camada.· O painel Formulários contém botões para criar formulários e os seus elementos. Celta Informática - F: (11) 4331-1586 Página: 10
  11. 11. Dreamweaver 3.0· O painel Head contém botões para adicionar diversos elementos HEAD, como os rótulos META, KEYWORDS e BASE.· O painel Invisíveis contém botões para criar objetos que não são visí- veis na janela do documento, como as âncoras com nome.· O painel Molduras contém estruturas comuns dos conjuntos de mol- duras (frames).Para inserir na página os objetos pertencentes à paleta de objetos, cliqueno botão correspondente ao objeto desejado. Para alguns objetos, oDreamweaver necessitará de informações adicionais (como a localiza-ção de uma imagem, por exemplo), sendo assim, uma caixa de diálogoserá exibida. Preencha a caixa de diálogo e depois de clicar no botão OK,o objeto será inserido na página.Você poderá escolher em exibir o conteúdo da paleta como Apenas tex-to, Apenas ícones ou Ícones e texto. Para realizar estas alterações, sele-cione a opção Preferências do menu Editar, na caixa de diálogo apre-sentada, selecione Geral na seção Categoria. Celta Informática - F: (11) 4331-1586 Página: 11
  12. 12. Dreamweaver 3.0O INICIADORAs principais janelas, paletas e inspetores podem ser abertos (ou inicia-dos) a partir do Iniciador. Para exibi-lo, selecione a opção Iniciador domenu Janela.Mesmo que o Iniciador não estiver sendo exibido, você poderá abrir facil-mente qualquer janela através do Mini-iniciador, que se encontra no can-to inferior direito da barra de status da janela do documento.Você poderá especificar quais botões (paletas e inspetores) aparecerãona janela do iniciador, para isso, selecione a caixa de diálogo Preferênci-as (através do menu Editar, opção Preferências), depois selecione Pa-letas flutuantes na seção Categorias. A caixa Mostrar no Iniciador con-tém os itens que são atualmente exibidos no Iniciador e no Mini-iniciador. Celta Informática - F: (11) 4331-1586 Página: 12
  13. 13. Dreamweaver 3.0Se quiser adicionar um item ao Iniciador e ao Mini-iniciador, clique nobotão com o sinal de adição (+). Para remover um item do Iniciador e doMini-iniciador, selecione-o e depois clique no botão com o sinal de sub-tração (-), para mover um item para cima ou para baixo na lista, o quecorresponde a movê-lo respectivamente para a esquerda ou direita noIniciador e no Mini-iniciador, selecione o item e, em seguida, clique nasteclas de seta. Depois de clicar no botão OK, o Iniciador e o Mini-iniciadorserão alterados, exibindo os itens especificados.Ainda na caixa de diálogo Preferências, na Categoria Barra de status,você encontra a opção de exibir ou não o Mini-iniciador na barra de statusda janela do documento.Os botões do Iniciador serão comentados e utilizados no momento emque estivermos criando as páginas do nosso site.Agora que você já teve uma visão geral da interface do Dreamweaver,vamos começar a construir páginas e ver quais os recursos que o pro-grama nos oferece para que as páginas tenham uma boa apresentaçãoe sejam bastante funcionais.CONSTRUINDO PÁGINASAntes de começarmos a criar as páginas, devemos primeiro criar umsite local (uma pasta), pois será este site que armazenará todos os do-cumentos que fizerem parte do site. Os documentos são as páginas queos usuários vêem quando visitam um site da Web, e podem conter texto,imagens, som, animação e vínculos a outros documentos.OBS: Lembre-se que durante a criação e o trabalho com os documen-tos, o Dreamweaver gera automaticamente o código HTML, o qual pode-rá ser visto e editado através do inspetor de origem de HTML.CRIANDO UM SITE LOCALVocê deverá criar um site que resida no seu disco local para depoispublicá-lo na Web. Um novo site local pode ou não ter quaisquer docu-mentos dentro dele quando você o cria, e pode ser baseado em umapasta existente ou ser criada uma pasta em branco. Celta Informática - F: (11) 4331-1586 Página: 13
  14. 14. Dreamweaver 3.0Vamos criar um site local, para isso, siga os passos seguintes:1. Estando com o programa Dreamweaver aberto, na janela do docu-mento selecione a opção Novo site do menu Site. A caixa de diálogoDefinição de site será exibida (nesta caixa de diálogo, a Categoria Infor-mações locais estará selecionada).Um site local requer um nome e uma pasta raiz local (pasta que armaze-nará todos os arquivos do site), sendo que a pasta raiz local deverá serconfigurada especificamente para o site.2. No campo Nome do site digite um nome para seu site, como exemplo,digite agenda (depois explicarei o porquê deste nome).3. No campo Pasta raiz local você deve especificar a pasta do seu discolocal que armazenará todos os documentos do site. Clique no ícone cor-respondente à pasta, à direita do campo. Na caixa de diálogo Escolher apasta local, crie, na sua pasta raiz (geralmente C:), a pasta Sites. De-pois dê um clique duplo na pasta Sites e crie outra denominadaAgenda_Cultural, dê um clique duplo nela também. Celta Informática - F: (11) 4331-1586 Página: 14
  15. 15. Dreamweaver 3.04. Depois de dar um clique duplo na pasta Agenda_Cultural, clique nobotão Salvar. Na caixa de diálogo Definição de Site, selecione a opçãoUtilizar cache para acelerar atualiz. dos vínculos, pois colocando o con-teúdo da pasta Agenda_Cultural em um cache local, será criado um re-gistro dos arquivos existentes para que o Dreamweaver possa atualizarrapidamente os vínculos quando um arquivo for movido, renomeado ouexcluído.Como estamos definindo um site local (e não remoto), não precisamos pre-encher o outro campo (Endereço do HTTP), por isso clique no botão OK.OBS: Site remoto é aquele que já está localizado no seu servidor, é ondeseu site da Web fica armazenado. Celta Informática - F: (11) 4331-1586 Página: 15
  16. 16. Dreamweaver 3.0Em seguida o Dreamweaver exibirá uma mensagem, clique no botãoOK. Uma nova janela será criada, cuja barra de título apresenta: Site –agenda (observe, na barra de tarefas do Windows, que apareceu maisum botão relativo ao Dreamweaver).Esta janela Site será utilizada para você fazer o gerenciamento do site,ou seja, você a usará para: copiar, colar, excluir, mover e abrir arquivos,criar pastas, atualizar os arquivos do site remoto (transferir para o siteremoto os arquivos que foram alterados), tudo da mesma forma comovocê faz no Windows Explorer do seu computador.Na janela Site você também poderá visualizar a estrutura de navegaçãodo site, através do Mapa do Site. O mapa do site mostra os arquivosHTML e outros elementos da página como ícones, e os hyperlinks serãoexibidos na ordem em que forem detectados no código de origem deHTML. Por padrão, o site remoto (ou mapa do site) aparecerá no painelesquerdo e o site local será mostrado no painel direito.OBS: O site que iremos criar será referente a uma agenda cultural, ondeconterá informações sobre os filmes e as peças teatrais que estão emcartaz, os shows que serão realizados na semana, os melhores restau-rantes, casas noturnas, etc. Celta Informática - F: (11) 4331-1586 Página: 16
  17. 17. Dreamweaver 3.0CRIANDO PÁGINASAgora que já temos o local (pasta) onde será armazenado o site da nos-sa Agenda Cultural, vamos criar os documentos (páginas) para o site, ouseja, vamos construir as páginas e adicionar título, imagens, texto e vín-culos a elas.Lembre-se que uma página da Web é um arquivo HTML contendo infor-mações, e um site é uma coleção de páginas da Web relacionadas en-tre si e geralmente localizadas no mesmo servidor.Vamos inicialmente criar uma página em branco, mas você poderia abrirum documento HTML existente, independente de como tenha sido cria-do, e alterá-lo, e também criar um novo documento com base em ummodelo.Você já deve estar com uma janela de documento aberta, apresentandoUntitled Document (Untitled-1) Dreamweaver na barra de título, então nãoprecisará criar outra página em branco. Caso contrário, para criar umanova página em branco, selecione a opção Novo do menu Arquivo.Vamos começar a criar as páginas referentes aos filmes, (depois vocêcriará as outras). Em um outro capítulo faremos a ligação entre elas, ouseja, adicionaremos os links.Com o ponto de inserção posicionado no início da janela do documento,insira os textos de acordo com a próxima figura (se quiser, arraste aspaletas e os inspetores para outro lugar ou feche-os, pois assim terámais espaço disponível na janela do documento). Celta Informática - F: (11) 4331-1586 Página: 17
  18. 18. Dreamweaver 3.0OBS: As informações referentes aos filmes (sinopse, elenco, etc) foramretiradas do jornal e do seguinte site: www.cinemaonline.com.br. Se qui-ser, poderá trocar os nomes dos filmes por outros à sua escolha.Salvando um documentoDepois de ter digitado o texto da figura anterior, vamos salvar a página.Para salvá-la, selecione a opção Salvar do menu Arquivo.OBS: Ao salvar os documentos, evite, sempre que possível, utilizar es-paços e caracteres especiais nos nomes de arquivos e pastas.Na caixa de diálogo exibida, selecione a pasta Agenda_Cultural na se-ção Salvar em, já que esta pasta armazenará todos os arquivos referen-tes ao site que estamos criando. No campo Nome do arquivo digitemissao_impossivel, como mostra a próxima figura. Depois clique nobotão Salvar. Celta Informática - F: (11) 4331-1586 Página: 18
  19. 19. Dreamweaver 3.0Observe que agora na barra de título da janela do documento o nome doarquivo e a pasta onde ele está armazenado são exibidos entre parênte-ses. No entanto, o ato de salvar um documento e lhe dar um nome nãocorresponde ao ato de dar um título a uma página (o título da página aindacontinua sendo Untitled Document, ou seja, documento sem título).OBS: Por padrão, os PCs salvam os arquivos HTML com a extensão.htm e os Macs com a extensão html.Agora ative a janela do site (Site – agenda) e veja que o arquivo quesalvamos já faz parte da estrutura do site. Celta Informática - F: (11) 4331-1586 Página: 19
  20. 20. Dreamweaver 3.0Definindo um título para a páginaÉ importante definir um título para as páginas, pois quando elas foremexibidas no navegador, o seu título aparecerá na barra de título deste,ajudando os usuários a controlar o que estão exibindo enquanto nave-gam, o título serve também para identificar a página nas listas de históri-co e marcadores. Se uma página não tiver um título, na barra do navega-dor aparecerá Documento sem título.Para alterar o título, clique com o botão direito do mouse em qualquerlugar da página e no menu de contexto que aparecerá, selecione a opçãoPropriedades da página, uma outra maneira é selecionando esta mes-ma opção no menu Modificar. Utilize qualquer um dos métodos paraque a caixa de diálogo Propriedades da página seja exibida.No campo Título digite Missao Impossivel, como mostra a figura anterior,depois clique no botão OK. Observe que o título aparecerá na barra detítulo da janela do documento e o nome do arquivo da página e a pasta naqual ele foi salvo aparecem entre parênteses, ao lado do título.OBS: Sempre que for definir nomes de arquivos ou títulos de página,procure não utilizar caracteres especiais (como é, ç) ou pontuação, comodois pontos, barras inclinadas ou pontos nos nomes dos arquivos, poisdepois que estes arquivos forem publicados na Web (colocados em um Celta Informática - F: (11) 4331-1586 Página: 20
  21. 21. Dreamweaver 3.0servidor remoto), muitos servidores poderão converter esses caracteres,provocando a ruptura dos vínculos entre os arquivos, sendo também quemuitos robôs de mecanismos de pesquisa (programas que navegamautomaticamente pela Web, reunindo informações a serem indexadaspelos mecanismos de pesquisa) lêem o título das páginas e outras des-crições inseridas no cabeçalho e utilizam estas informações para indexaras páginas nos seus bancos de dados.Alterando o fundo da páginaComo você já percebeu, quando criamos uma nova página noDreamweaver, esta apresenta, por padrão, um fundo branco. Mas nóspodemos alterar essa condição: inserir uma imagem de fundo ou umaoutra cor diferente do branco.O Dreamweaver disponibiliza 216 cores (chamadas de “cores de nave-gador seguras”) para serem usadas nas páginas, sendo exatamenteessas cores utilizadas pelos navegadores Windows Explorer e Netscape.Para aplicar uma cor de fundo na página, abra a caixa de diálogo Propri-edades da página (através do menu Modificar), depois clique no botãoFundo. Celta Informática - F: (11) 4331-1586 Página: 21
  22. 22. Dreamweaver 3.0Uma Paleta de cores aparecerá, e o ponteiro do mouse adquire o forma-to de um conta-gotas. Para selecionar uma cor, basta clicar com o con-ta-gotas sobre ela.Se a paleta de cores já estiver aberta e você decidir não alterar mais acor, clique no botão Apagador ( ) para fechá-la.OBS: Nas páginas da Web cada cor é representada por um códigohexadecimal (composto por seis dígitos). Observe na figura acima que ocódigo da cor branco é FFFFFF, mas você não precisará saber o códigohexadecimal de cada cor, pois o Dreamweaver se encarrega de exibir ocódigo da cor selecionada.Assim, clique em alguma cor na Paleta de cores para que ela se torne acor de fundo da página. Após clicar na cor desejada, observe que seucódigo hexadecimal é exibido no campo Fundo, clique no botão OK parafechar a caixa de diálogo.Além de inserir uma cor no fundo da página, você também pode inseriruma imagem. Se esta imagem for menor que a janela do documento, elase repetirá a fim de ocupar toda a área da página. Se a página já tiveruma cor de fundo e você inserir uma imagem de fundo, na maioria doscasos esta imagem anulará a cor.OBS: O Dreamweaver, como a maioria dos navegadores, suporta asimagens nos formatos GIF e JPEG (sendo que o Internet Explorer 4.0 oumais avançado e o Netscape 4.04 ou mais avançado, também suportamas imagens no formato PNG).Para inserir uma imagem de fundo, selecione a opção Propriedades dapágina do menu Modificar. No campo Imagem do fundo, clique no bo-tão Procurar para localizar e selecionar a imagem desejada, depois cliqueno botão OK. Celta Informática - F: (11) 4331-1586 Página: 22
  23. 23. Dreamweaver 3.0Caso a imagem selecionada esteja localizada em uma pasta diferentedaquela que contém os arquivos do site, uma janela será exibida (comomostra a próxima figura). Clique no botão Sim para copiar o arquivo paraa pasta-raiz. Celta Informática - F: (11) 4331-1586 Página: 23
  24. 24. Dreamweaver 3.0Após clicar em Sim, a caixa de diálogo Copiar o arquivo como aparece,com a pasta Agenda_Cultural já selecionada. Se quiser, renomeie o ar-quivo de imagem e clique no botão Salvar, depois clique no botão OK dacaixa de diálogo Propriedades da página.Observe, na figura anterior, que a imagem de fundo foi organizada lado alado para ocupar toda a área da página. Veja também que após o nomedo arquivo, na barra de título da janela, aparece o caractere *, indicandoque a página contém alterações que ainda não foram salvas. Sendo as-sim, selecione a opção Salvar do menu Arquivo.Formatando o textoVamos agora melhorar a aparência dos textos da página, alterando o tipoe tamanho das fontes, a cor de algumas palavras, etc. Mais para frente,nos próximos capítulos, veremos outros recursos que poderão ser apli-cados às páginas para torná-las ainda mais atraentes. Celta Informática - F: (11) 4331-1586 Página: 24
  25. 25. Dreamweaver 3.0Você poderá formatar os textos contidos nas páginas através do menuTexto ou do inspetor de Propriedades, sendo que o texto da página deve-rá estar previamente selecionado.Selecione o primeiro parágrafo da página (que corresponde ao nome dofilme - Missão Impossível 2). Clique no menu Texto e aponte o mousepara a opção Fonte, você verá uma lista com algumas combinações defontes.No Dreamweaver, ao invés de definir somente um tipo de fonte para umapalavra ou texto, você define várias fontes (uma lista com diversos tiposde fontes), pois assim, o navegador verificará se a primeira fonte da listaestá instalada no computador do usuário, caso não esteja, ele verifica asegunda, e assim por diante. Se nenhuma das fontes sugeridas estiverdisponível, a palavra ou texto será exibido na fonte padrão do navegadordo usuário.Portanto, selecione uma combinação de fontes para alterar o tipo de fon-te do texto selecionado. Agora selecione todo o restante do texto a alteretambém o tipo da fonte (escolha uma combinação de fontes diferente doprimeiro parágrafo).Conforme você pode observar no submenu Fonte, existe uma opçãodenominada Editar a lista de fontes, a qual é utilizada para definir ascombinações de fontes. Para modificar as combinações de fontes, sele-cione a opção Editar a lista de fontes, através do menu Texto, opçãoFonte. Na parte superior da caixa de diálogo exibida é mostrada a Listade fontes já disponível. Para montar outras combinações, selecione uma Celta Informática - F: (11) 4331-1586 Página: 25
  26. 26. Dreamweaver 3.0fonte da lista Fontes disponíveis, à direita da caixa de diálogo, depoisclique no botão << (localizado entre as listas Fontes escolhidas e Fontesdisponíveis) para mover a fonte para a lista Fontes escolhidas, repita oprocedimento até completar uma seqüência de tipos de fontes. Para re-mover as fontes de uma combinação, clique no botão >>.Para adicionar a combinação de fontes à Lista de fontes, clique no botãode adição (+), e para remover uma combinação de fontes da lista cliqueno botão de subtração (-).Agora vamos alterar o tamanho da fonte, sendo que esta ação poderáser feita utilizando o menu Texto ou o Inspetor de propriedades. Estandocom o primeiro parágrafo selecionado, clique no menu drop-down Tam.do inspetor de propriedades e selecione um tamanho, por exemplo 5.Imediatamente o tamanho do texto selecionado se modificará.Os tamanhos das fontes são alterados de acordo com um tamanho bá-sico, padrão. Esse tamanho básico é definido pelo próprio usuário, queconfigura seu navegador para qualquer que seja o tamanho que ele qui-ser. Normalmente, o tamanho básico adotado é 3. Você poderá aumen-tar ou diminuir o tamanho do texto, escolhendo um tamanho relativo (+ou -1, + ou -7) no inspetor de propriedades ou as opções Aumento dotamanho ou Redução do tamanho do menu Texto. Por exemplo, se afonte está no tamanho padrão (3) e você escolher +4, o tamanho resul-tante será 7.OBS: Se você mudar o tamanho da fonte de um texto e depois quiserque ele volte ao tamanho padrão, vá até o menu Texto, aponte para Ta-manho e depois clique na opção Padrão.Além de alterar o tipo e tamanho da fonte dos textos, também podemosutilizar os estilos de negrito, itálico e sublinhado. Para aplicar os estilosnegrito e itálico, selecione o texto e depois, no inspetor de propriedades,clique no botão B (para negrito) ou I (para itálico). Para sublinhar o texto,selecione-o e clique no menu Texto, aponte para a opção Estilo e depoisSublinhado (veja que também é possível aplicar os outros 2 estilos atra-vés do menu Texto). Celta Informática - F: (11) 4331-1586 Página: 26
  27. 27. Dreamweaver 3.0Como exemplo, selecione a palavra Sinopse da página que está abertana janela do documento, e aplique o estilo sublinhado. Faça a mesmacoisa com as palavras Elenco, Direção, Gênero, Classificação e Dura-ção. Depois aplique o estilo negrito no primeiro parágrafo, ou seja, notítulo do filme.Outra alteração que iremos realizar com os textos da página é em rela-ção à sua cor, ou seja, vamos aprender a modificar a cor da fonte daspalavras e textos da página. Selecione o primeiro parágrafo da página edepois, no inspetor de propriedades, clique no botão Cor do texto, comomostra a próxima figura.A Paleta de cores é exibida, sendo que você já conhece esta paleta quandoaprendeu a alterar a cor de fundo da página. Com o conta-gotas, cliqueem uma cor da paleta de cores ou da própria página (leve em considera-ção a cor (ou imagem) de fundo quando for escolher a cor da fonte).Depois selecione o restante do texto e altere a cor da fonte também.Utilizando o código hexadecimal da cor, você poderá copiar a cor de umtexto para outro ou então excluir a cor anteriormente definida. Para copiara mesma cor de um texto para outro, deixe o cursor posicionado no textoque já possui a cor, selecione o código hexadecimal (incluindo o sinal #)da caixa ao lado do botão Cor do texto, do inspetor de propriedades, ecopie-o para a área de transferência, pressionando Ctrl+C. Em seguidaselecione o texto cuja cor você quer alterar, posicione o cursor na caixapróxima ao botão Cor do texto, pressione Ctrl+V para colar o código edepois tecle Enter. Celta Informática - F: (11) 4331-1586 Página: 27
  28. 28. Dreamweaver 3.0Para remover a cor da fonte de algum texto, selecione-o e depois apagueo código hexadecimal exibido no inspetor de propriedades. Não se es-queça de teclar Enter.Agora que sua página já está pronta (pelo menos por enquanto), salve-aatravés da opção Salvar do menu Arquivo.Como você já aprendeu a criar e salvar páginas, inserir textos, formatá-los, etc, crie outras páginas para outros títulos de filmes. Nas próximasfiguras você encontrará informações sobre alguns filmes, e que como jádissemos, você poderá criar páginas sobre outros títulos de filmes quedesejar.Lembre-se que para criar novos arquivos, ou páginas, basta selecionar aopção Novo do menu Arquivo, e que todos os arquivos devem ser sal-vos na pasta C:SitesAgenda_Cultural (o nome do arquivo e o título dapágina você encontrará na barra de título da janela referente a cada filmenas próximas figuras). Celta Informática - F: (11) 4331-1586 Página: 28
  29. 29. Dreamweaver 3.0Após criar e salvar as páginas, altere o fundo de cada uma (trocando acor ou inserindo uma imagem), depois formate os textos (modifique otipo, tamanho e cor das fontes) e aplique, onde achar conveniente, osestilos de negrito, itálico e sublinhado. Por último salve cada página. Celta Informática - F: (11) 4331-1586 Página: 29
  30. 30. Dreamweaver 3.0PARÁGRAFO E QUEBRA DE LINHANo Dreamweaver, sempre que você digita um texto (mesmo que sejauma única palavra) e pressiona Enter, este texto torna-se um parágrafo,sendo que cada parágrafo é separado de outros parágrafos por uma li-nha em branco. Assim, sempre que você pressionar Enter, o ponto deinserção pulará uma linha de espaço em branco e iniciará um novo pará-grafo.Observe, na próxima figura, que a página relativa ao filme 60 Segundosapresenta 7 parágrafos.Como já comentamos, toda página criada no Dreamweaver tem um có-digo em HTML associado a ela, e no inspetor de Origem de HTML (janelaque exibe o código da página), você verá que cada parágrafo é represen-tado pelo rótulo <p>. Celta Informática - F: (11) 4331-1586 Página: 30
  31. 31. Dreamweaver 3.0Se você quiser, poderá mudar de linha (teclar Enter) sem inserir umalinha de espaço em branco. Para conseguir isto, basta utilizar uma que-bra de linha, ou seja, deixe o ponto de inserção no final da linha que vocêquer dividir e, ao invés de pressionar somente a tecla Enter, pressioneShift+Enter; a linha se dividirá e o ponto de inserção iniciará na próximalinha.Você também pode conseguir uma quebra de linha selecionando a op-ção Quebra de linha do menu Inserir. No código HTML, o rótulo querepresenta uma quebra de linha é <br>.Na próxima figura você pode ver que depois do segundo parágrafo inse-rimos uma quebra de linha. Observe que um ícone é exibido no final dalinha onde inserimos uma quebra de linha. Celta Informática - F: (11) 4331-1586 Página: 31
  32. 32. Dreamweaver 3.0Agora que você já entendeu o que representa um parágrafo noDreamweaver, podemos aplicar um estilo a um parágrafo, ou seja, pode-mos aplicar o formato de Cabeçalho 1 (ou Título 1), Cabeçalho 2 (ouTítulo 2), e assim por diante, até o Cabeçalho 6. Entre um cabeçalho e otexto seguinte há sempre uma quebra de parágrafo.Como exemplo, na página Premonicao, selecione o primeiro parágrafoe, no inspetor de propriedades, retire o estilo Negrito (clicando no íconecorrespondente) e altere o tamanho da fonte para Nenhum (essas modi-ficações estão sendo feitas para você perceber melhor como o estiloCabeçalho 1 irá alterar o texto).Com o texto selecionado, clique no menu drop-down Formato do inspe-tor de propriedades e selecione o formato Cabeçalho 1. Celta Informática - F: (11) 4331-1586 Página: 32
  33. 33. Dreamweaver 3.0O texto se tornará um título, isto é, terá uma alteração de tamanho, ficaráem negrito, e uma linha em branco será inserida depois do título.Agora, no código HTML, o parágrafo não estará mais associado ao rótulo<p>, e sim ao rótulo <h1>, de Cabeçalho 1 (ou Título 1).Assim, na sua página, você poderá aplicar títulos diferenciados aos tex-tos, e para remover um estilo de parágrafo, selecione a opção Nenhumno menu drop-down Formato do inspetor de propriedades.A PALETA DE HISTÓRICOQuando você precisar desfazer a última ação que realizou em uma pági-na, selecione a opção Desfazer do menu Editar (ou pressione Ctrl + Z),como em qualquer outro programa. O Dreamweaver, além desta opção,também permite que várias etapas sejam desfeitas simultaneamente,através da Paleta de histórico.A Paleta de histórico contém uma lista com todas as alterações que vocêrealizou na página ativa, na ordem em que foram realizadas, e atravésdela será possível desfazer uma ou mais etapas, executá-las novamen-te e criar novos comandos para automatizar tarefas repetitivas. Para abrira paleta de histórico, selecione a opção Histórico do menu Janela. Celta Informática - F: (11) 4331-1586 Página: 33
  34. 34. Dreamweaver 3.0De acordo com a figura anterior, para desfazer a etapa (“Excluir”), bastaarrastar o polegar para a etapa acima, a etapa desfeita se tornará cinza.Esta ação é a mesma coisa que selecionar a opção Desfazer do menuEditar.Agora se quiséssemos desfazer as últimas três ações simultaneamen-te, bastaria clicar no canto esquerdo da etapa Aplicar a fonte: ArialRounded para que o polegar seja automaticamente colocado nesta eta-pa ou então arrastar o polegar até esta etapa.Para definir o número de etapas que a paleta de histórico mostrará, sele-cione a opção Preferências do menu Editar, na caixa de diálogo exibidaselecione Geral na lista de categorias e digite o Número máximo de eta-pas da paleta de histórico na caixa de texto apropriada. Celta Informática - F: (11) 4331-1586 Página: 34
  35. 35. Dreamweaver 3.0FECHANDO E ABRINDO ARQUIVOS HTMLPara fechar os arquivos HTML, ou seja, as páginas que estão abertas najanela do documento, clique no botão Fechar, localizado no canto direitoda barra de título da janela ou então escolha a opção Fechar do menuArquivo. Se a página contiver alterações que ainda não foram salvas,uma caixa de diálogo perguntando se você deseja salvar essas altera-ções aparecerá, clique no botão Sim (para salvar), Não (para fechar semsalvar) ou Cancelar (para que a página continue aberta). Com este pro-cedimento, somente a janela do documento, que exibe a página, seráfechada. Feche, agora, o arquivo missao_impossivel.htm.OBS: Se você utilizar a opção Sair do menu Arquivo (ao invés de Fe-char), todas as janelas do Dreamweaver, incluindo a janela do site, serãofechadas.Para abrir arquivos você também tem mais de uma opção: através dajanela do site ou da janela do documento. Se a janela do site estiver aber-ta, dê um clique duplo no arquivo que deseja abrir, desta maneira a janelado documento exibirá a página desejada. Celta Informática - F: (11) 4331-1586 Página: 35
  36. 36. Dreamweaver 3.0Para abrir um arquivo através da janela do documento, selecione a op-ção Abrir do menu Arquivo. Na caixa de diálogo apresentada, localize oarquivo que deseja abrir e selecione-o, em seguida clique no botão Abrir.Você também pode abrir os quatro últimos arquivos que você editou noDreamweaver selecionando seus nomes no menu Arquivo da janela dodocumento. Celta Informática - F: (11) 4331-1586 Página: 36
  37. 37. Dreamweaver 3.0OBS: Cada arquivo aberto no Dreamweaver é exibido em uma janela dedocumento diferente, assim, se você tiver 3 páginas abertas, tambémterá 3 janelas de documentos abertas, as quais são exibidas na barra detarefas do Windows. Mas, se você quiser apenas uma janela aberta porvez, você pode alterar as preferências do Dreamweaver, selecionando aopção Preferências do menu Editar. Na caixa de diálogo exibida, sele-cione a Categoria Geral e desmarque a caixa de opção Abrir os arquivosem outra janela.Depois clique no botão OK. Desta maneira, a janela do documento con-terá apenas uma página aberta, e quando for abrir uma outra página, aprimeira será fechada e não armazenada na mesma janela, como ocor-re na maioria dos outros programas. Celta Informática - F: (11) 4331-1586 Página: 37
  38. 38. Dreamweaver 3.0RECURSOS ADICIONAISNeste capítulo iremos estudar alguns outros recursos que podem serutilizados e aplicados nas páginas que você criou.VERIFICAR ORTOGRAFIAO comando Verificar ortografia faz a verificação e correção ortográficados textos de sua página. Você pode verificar apenas uma seleção detexto ou a página inteira.Antes de iniciar a correção ortográfica, a página a ser verificada deveráestar aberta na janela do documento, como exemplo, abra a páginaPremonicao. Posicione o ponto de inserção no início da página (ou emum outro lugar onde queira começar a verificação ortográfica), depoisselecione a opção Verificar a ortografia do menu Texto. Uma caixa dediálogo será apresentada, e já exibe a primeira palavra não localizada. Celta Informática - F: (11) 4331-1586 Página: 38
  39. 39. Dreamweaver 3.0A palavra que é exibida no campo Palavra não localizada no dicionárionão pertence ao dicionário ortográfico do Dreamweaver. Você pode re-solver este problema clicando em algum dos botões da caixa de diálogoVerificar a ortografia:· Se a palavra está correta mas não pertence ao dicionário e você gos- taria de adicioná-la ao seu dicionário pessoal, clique no botão Adicio- nar ao dicionário pessoal. Assim, uma futura verificação ortográfica não questionará esta palavra.· Se a palavra está correta mas você não quer incluí-la em seu dicioná- rio pessoal, clique no botão Ignorar;· Se a palavra está correta mas você não quer incluí-la em seu dicioná- rio pessoal, e acha que ela aparece mais de uma vez na página, clique no botão Ignorar todas;· Se a palavra estiver incorreta e sua ortografia correta aparece na cai- xa de listagem Sugestões, selecione a palavra correta e clique no bo- tão Alterar;· Se você acha que a palavra foi digitada incorretamente mais de uma vez, selecione a palavra correta na caixa Sugestões e clique no botão Alterar todas;· Você também pode corrigir manualmente a palavra digitando sua for- ma correta na caixa de texto Alterar para e depois clicar no botão Alte- rar.No nosso caso a palavra vôo não foi encontrada, mas como ela estácorreta e poderemos utilizá-la em outras páginas, clique no botão Adici-onar ao dicionário pessoal. Uma outra palavra será destacada e vocêterá que decidir qual opção utilizar, realize o mesmo procedimento atéque uma caixa de diálogo exibindo a mensagem Verificação ortográficafoi concluída apareça. Depois salve esta página e faça a verificação orto-gráfica nas outras páginas que você criou.OBS: Para confirmar ou alterar o dicionário que o Dreamweaver utilizapara realizar a verificação ortográfica, selecione a opção Preferênciasdo menu Editar. Na Categoria Geral da caixa de diálogo Preferênciasvocê pode alterar o idioma do dicionário através do menu pop-up do campoDicionário. Celta Informática - F: (11) 4331-1586 Página: 39
  40. 40. Dreamweaver 3.0ALINHAMENTO DE TEXTOQuando inserimos textos nas páginas, o alinhamento padrão que oDreamweaver utiliza é o esquerdo, mas podemos também alinhar todo otexto ou parte dele com a margem direita ou no centro da página.Para alterarmos o alinhamento de um texto (sendo que este texto podeser um parágrafo, um título, uma lista ou uma página inteira) primeirodevemos selecioná-lo e depois escolher o alinhamento desejado. Comoexemplo, vamos centralizar o texto que representa o título da páginapremonicao.htm.Selecione o texto Premonição e, no inspetor de propriedades, clique nobotão Alinhar no centro (ao invés de selecionar o texto, você tambémpode deixar o ponto de inserção posicionado no parágrafo que será ali-nhado).Como você observou na figura anterior, o texto fica centralizado em rela-ção a ambas as margens da página. Você também pode alinhar os tex-tos através da opção Alinhamento do menu Texto.Centralize também os títulos das outras páginas (o primeiro parágrafoque corresponde ao nome de cada filme), depois salve todas elas. Celta Informática - F: (11) 4331-1586 Página: 40
  41. 41. Dreamweaver 3.0INSERIR LINHA HORIZONTALVocê pode inserir, na sua página, linhas (ou réguas) horizontais para se-parar e organizar informações, separar visualmente o texto e os objetos,ou simplesmente para mudar o visual da página. Tais linhas poderão tersuas propriedades modificadas como a altura, largura, o alinhamento,etc.Estando com a página Premonicao (ou outra) aberta na janela do docu-mento, posicione o cursor, por exemplo, no final do terceiro parágrafo(depois da palavra morte.). Agora selecione a opção Régua horizontaldo menu Inserir para que uma linha horizontal, que vai de um lado aooutro da página, seja inserida (a linha estará, inicialmente, selecionada,clique em qualquer lugar da página para retirar a seleção).OBS: A linha horizontal também pode ser inserida clicando-se no botãoInserir régua horizontal ( ) da paleta de Objetos, só não se esqueçade deixar o ponto de inserção posicionado no local desejado antes declicar no botão.Posicione o cursor no final do penúltimo parágrafo e insira outra linhahorizontal. Celta Informática - F: (11) 4331-1586 Página: 41
  42. 42. Dreamweaver 3.0Como você pode ver na figura anterior, a terceira linha está com a alturae a largura modificadas.Para alterar as propriedades da linha dê um clique duplo nela; o inspetorde propriedades exibirá as propriedades da linha (régua) horizontal, quesão:• L e U especificam a largura e altura da linha, em pixels ou como umpercentual do tamanho da página.• Alinhar especifica o alinhamento da linha (padrão, esquerda, centroou direita). Esta definição se aplica apenas se a largura da linha formenor do que a largura da janela do navegador.• Sombreado especifica se a linha será desenhada com sombreado.Desmarque esta opção se quiser que a linha fique com cores sólidas.• Utilize a caixa em branco, à esquerda do inspetor de propriedades, para inserir um nome à linha horizontal.Para excluir uma linha horizontal, selecione-a e depois pressione a teclaDelete.LOCALIZAR E SUBSTITUIRVocê poderá usar o recurso de localizar e substituir do Dreamweaverpara fazer uma pesquisa no site inteiro, na página atual ou em um deter-minado diretório. Você poderá apenas localizar um texto como tambémlocalizar e substituir um texto por outro (texto, neste caso, quer dizeruma palavra inteira, uma frase ou parte de uma palavra).Como exemplo, vamos localizar a palavra carro na página referente aofilme 60 Segundos, para isso é necessário que a página em questãoesteja aberta na janela do documento. Agora selecione a opção Locali-zar do menu Editar, na caixa de diálogo Localizar digite a palavra queestamos procurando, ou seja, digite carro. Celta Informática - F: (11) 4331-1586 Página: 42
  43. 43. Dreamweaver 3.0Clique no botão Localizar o próximo para o Dreamweaver encontrar oque você está procurando. Se a palavra existir na página, ela será desta-cada (muitas vezes é necessário mover a caixa de diálogo Localizar paraver a palavra destacada). Se o Dreamweaver não conseguir localizar oitem a palavra especificada, uma caixa de diálogo aparecerá informandoque o item não foi localizado.Clique novamente no botão Localizar o próximo para que outra palavracarro seja encontrada, quando a pesquisa terminar o Dreamweaver exi-birá uma caixa de mensagem.Para fechar a caixa de diálogo Localizar, clique no botão Fechar.Abaixo você encontra uma descrição mais completa sobre os itens dacaixa de diálogo Localizar:• Campo Localizar em, cujo menu drop-down contém algumas opções: •Documento atual: a busca do texto especificado é feita somente no documento ativo. Celta Informática - F: (11) 4331-1586 Página: 43
  44. 44. Dreamweaver 3.0 • Site atual: a pesquisa é feita em todos os documentos HTML, arqui- vos de biblioteca e documentos de texto localizados no site. Após a escolha da opção Site atual, o nome deste aparecerá à direita do menu pop-up. Se este não for o site no qual deseja efetuar a busca, escolha um outro site no menu pop-up Sites atuais, na janela do site. • Pasta: a busca é realizada em um diretório específico. Após escolher a opção Pasta, clique no ícone correspondente à pasta, para procurar e selecionar o diretório no qual será efetuada a busca.• Campo Localizar - especifica o tipo de texto a ser localizado: • Texto: permite procurar determinadas seqüências de texto na janela do documento. • Origem de HTML: permite buscar determinadas seqüências de tex- to no código de origem de HTML. • Texto avanç.: permite buscar determinadas seqüências de texto den- tro ou fora de um ou mais rótulos (tags). • Marcador: permite procurar determinados rótulos (tags), atributos e valores de atributo.• Coincidir maiúsc./minúsc.: selecione esta opção para procurar letras maiúsculas ou minúsculas.• Ignorar os diferentes espaços em branco: se esta opção estiver marcada, a busca pelo texto especificado irá ignorar os espaços entre as palavras (por exemplo: tanto o texto autoafirmação como auto afir- mação serão encontrados).• Utilizar expressões regulares: você poderá incluir certos caracteres e seqüências pequenas de caracteres (como ?, *, w e b) no texto a ser localizado.Você também pode salvar a pesquisa clicando no ícone Salvar (que vocêjá conhece) e, posteriormente, carregá-la clicando no ícone Abrir e sele-cionando o arquivo.Vimos como localizar um texto qualquer, agora vamos localizar um textoe substituí-lo por outro. Ainda com a página aberta na janela do docu-mento, selecione a opção Substituir do menu Editar. Na caixa de diálo-go Substituir, digite o texto que você quer encontrar (por exemplo, carro)e o texto que irá substituí-lo (por exemplo, veículo), como mostra a próxi-ma figura. Celta Informática - F: (11) 4331-1586 Página: 44
  45. 45. Dreamweaver 3.0Em seguida clique no botão Localizar o próximo para que o texto (carro)seja destacado, depois clique no botão Substituir para trocá-lo pelo textosubstituto (veículo). Após esta ação a próxima palavra carro já é desta-cada, e você só precisa clicar no botão Substituir se quiser trocá-la pelapalavra veículo. Se por algum motivo não quiser que a palavra destacadaseja substituída, clique no botão Localizar o próximo ao invés de clicarem Substituir. Celta Informática - F: (11) 4331-1586 Página: 45
  46. 46. Dreamweaver 3.0TRABALHANDO COM IMAGENSQuando estudamos o capítulo referente à criação de páginas, vimos,dentre outros tópicos, como podemos alterar o fundo da página: trocan-do a cor ou inserindo uma imagem, onde esta última é organizada lado alado e se repete até preencher todo o fundo da página. Neste capítulovamos aprender a inserir imagens na página e alterar sua propriedades,sendo que as páginas da Web que contém imagens costumam ser maisatraentes e mais interessantes do que aquelas que só apresentam tex-tos.Vamos também aprender a criar e inserir imagens cambiáveis nas pági-nas, onde uma imagem cambiável é aquela que se altera quando o pon-teiro do mouse for posicionado sobre ela.Para inserir uma imagem (não cambiável) na página, deixe o ponto deinserção no local onde deseja que a imagem seja inserida, depois utilizeuma das seguintes opções: · Selecione a opção Imagem do menu Inserir ou · Clique no botão Inserir imagem da paleta de objetos.Utilizando qualquer uma das opções, a caixa de diálogo Selecione a ori-gem da imagem aparecerá. Nesta caixa de diálogo localize o arquivo deimagem desejado e quando você selecioná-lo, poderá visualizar a ima-gem no lado direito da caixa de diálogo, na área denominada Imagem devisualização. Clique no botão Selecione para que a imagem seja inseridana página.OBS: Lembre-se que as imagens que serão inseridas nas páginas de-verão estar nos formatos GIF ou JPG (JPEG).Vamos inserir uma imagem na página referente ao filme Patriota, paraisso a página deverá estar aberta na janela do documento. Com o cursorposicionado no início da página, clique na opção Imagem do menu Inse-rir. A caixa de diálogo Selecione a origem da imagem será exibida, ecomo exemplo, vamos inserir a imagem figpatriota.jpg, onde esta já seencontra selecionada. Clique no botão Selecione para que a imagemescolhida seja inserida na página. Celta Informática - F: (11) 4331-1586 Página: 46
  47. 47. Dreamweaver 3.0Como mostra a própria caixa de diálogo da figura anterior, o arquivo es-colhido não está localizado na pasta-raiz do site, portanto, uma janelaserá exibida:Clique no botão Sim para copiar o arquivo figpatriota.jpg para a pasta-raiz. A figura é inserida na página, e já aparece selecionada. Celta Informática - F: (11) 4331-1586 Página: 47
  48. 48. Dreamweaver 3.0Os três quadradinhos que aparecem destacados na figura anterior sãochamados de alças de seleção, e podem ser arrastados pararedimensionar a imagem.As propriedades e uma pequena visualização da imagem, são exibidasno inspetor de Propriedades (para exibir o inspetor de propriedades, se-lecione a opção Propriedades no menu Janela). Lembre-se que a ima-gem deve estar selecionada para que suas propriedades sejam exibidasno inspetor. Celta Informática - F: (11) 4331-1586 Página: 48
  49. 49. Dreamweaver 3.0Você pode clicar na setinha destacada na figura anterior para expandir oinspetor de propriedades e visualizar o conjunto completo das proprieda-des da imagem selecionada. A imagem em miniatura que aparece noinspetor age como o botão Aplicar (ou Apply) para as propriedades daimagem.Quando quiser remover uma imagem da página, selecione-a (através deum clique) e depois pressione a tecla Delete. Para selecionar mais deuma imagem, mantenha a tecla Shift pressionada enquanto clica em cadaimagem. Você também pode dar um clique duplo na imagem e acessar acaixa de diálogo Selecione a origem da imagem, desta maneira poderáselecionar outro arquivo de imagem para substituir a atual.PROPRIEDADES DA IMAGEMEstando com uma imagem selecionada, o inspetor de propriedades exi-birá os seguintes campos que serão utilizados para alterar as proprieda-des da imagem:1 - Nome: se você está pensando em trabalhar com o código HTML, é útildefinir um nome para a imagem. Este nome não aparecerá na tela.2 - L e U: exibem as dimensões, em pixels, da imagem, ou seja, a largura(L) e a altura (U). Estes valores podem ser alterados, para isso digiteoutros números na caixa de texto ou arraste as alças (quadradinhos) daimagem. Quando você modifica as dimensões da imagem, os númerosdas caixas L e U assumem o estilo negrito, e para retornar às medidasoriginais, clique nos identificadores L e U.OBS: Quando você altera as dimensões da imagem, o tamanho do ar-quivo da imagem não é alterado. Celta Informática - F: (11) 4331-1586 Página: 49
  50. 50. Dreamweaver 3.03 - Orig.: exibe o nome do arquivo de origem da imagem. Você podeclicar no ícone correspondente à pasta (à direita do campo Orig) paraexibir a caixa de diálogo Selecione a origem da imagem e escolher outraimagem (ou seja, outro arquivo de origem).4 - Vínculo: se a imagem for um hyperlink, ou seja, exibir outra páginaquando receber um clique, o endereço desta página associada a ela seráexibido no campo Vínculo.5 - Alinhar: a imagem, inicialmente, apresenta o alinhamento padrão donavegador, que é o alinhamento na linha de base, isto é, a parte inferiorda imagem é alinhada com a linha de base do texto ou com o objeto maispróximo. Mas este tipo de alinhamento pode ser modificado através dacaixa drop-down Alinhar, ou através dos três botões de alinhamento iden-tificados pelo número 5.1 na figura anterior.6 - Alt: neste campo você pode inserir um texto que será exibido no lugarda imagem, caso o navegador esteja configurado para exibir somentetexto.7 - Mapa: este campo é utilizado para inserir um campo de imagens, ouseja, você pode dividir a imagem atual em várias regiões ou “pontos ati-vos” (utilizando os botões identificados na figura anterior pelo número7.1) e quando o usuário clicar em um ponto ativo, uma outra página daWeb será exibida.8 - Espaço V e Espaço H: você pode adicionar espaço (em pixel) acima,abaixo e em ambos os lados utilizando estas caixas de texto. Por pa-drão, o Dreamweaver coloca um espaço entre cada imagem colocadaem uma linha, e se você quiser que sua imagem tenha algum espaçoextra, você pode colocar um espaço invisível em torno da imagem. Oespaço V é o espaço vertical, acima e abaixo da imagem, e o espaço H éo espaço horizontal, à esquerda e à direita da imagem.9 - Destino: quando a imagem for um hyperlink, ou seja, quando tiver umvínculo associado a ela, você pode especificar, através da opção Desti-no, a moldura ou a janela na qual a página vinculada deverá ser carrega-da (na mesma janela da imagem, em uma nova janela sem nome, najanela inteira do navegador, etc). Celta Informática - F: (11) 4331-1586 Página: 50
  51. 51. Dreamweaver 3.010 - Orig. Baixa: se a imagem que você inseriu na página demorar paraaparecer no navegador, você pode especificar uma outra imagem menor(em preto e branco, que carrega mais rapidamente) para ser carregadaantes da imagem principal. Assim, definindo uma imagem de baixa reso-lução, evitará que os visitantes do site esperem muito tempo para veremalguma coisa.11 - Borda: se quiser que a imagem apresente uma borda, digite umnúmero (em pixels) nesta caixa de texto. Insira o número zero para quenão haja nenhuma borda.12 - Botão Atualizar: um clique neste botão faz com que os valores doscampos L e U retornem ao tamanho original.13 - Botão Editar: se você tiver um editor de imagens associado aoDreamweaver, um clique neste botão abrirá a imagem no editor parapoder ser modificada (para especificar um editor de imagens externo,selecione Preferências no menu Editar e depois na seção Categoria,selecione Editores externos).OBS: Quando alterar algum campo do inspetor de propriedades, pressi-one Enter ou clique na imagem em miniatura (que corresponde ao botãoAplicar) para que as alterações sejam refletidas na imagem da página.Lembre-se sempre que quanto menor for a imagem (em Kilobytes (K)),mais rápido ela carregará.CRIANDO IMAGENS CAMBIÁVEISAs imagens cambiáveis são comumente utilizadas nos Web sites, poisprovocam efeitos interessantes. Estas imagens são substituídas por ou-tras quando o usuário passa o ponteiro do mouse sobre elas ou dá umclique, assim, tais imagens possuem um comportamento anexado a elas.Um comportamento é uma combinação entre um evento e uma ação,onde você define qual evento acionará uma determinada ação. Por exem-plo: quando o usuário mover o mouse sobre uma imagem (um evento),um som poderá ser reproduzido (uma ação). Celta Informática - F: (11) 4331-1586 Página: 51
  52. 52. Dreamweaver 3.0Vamos, neste tópico, criar a página inicial da home page Agenda Culturale acrescentar alguns botões que serão, posteriormente, a barra de nave-gação. Estes botões terão um comportamento associado a eles, ondedefiniremos que o evento será quando o usuário passar o mouse sobreeles e a ação a ser executada será exibir outro botão (com a cor realçada,por exemplo).Na janela do documento, selecione a opção Novo do menu Arquivo.Uma nova janela sem título será apresentada, e nela criaremos a páginainicial da home page. Como exemplo, insira, no início da página, umafigura que já tenha sido criada (ou somente um texto) que represente onome da home page que o usuário verá. Como esta página será a pri-meira a ser exibida no navegador, ela deve conter um pequeno texto ex-plicando o conteúdo e o objetivo do site, portanto, insira também algumtexto de apresentação (comece a digitar o texto dois parágrafos abaixo,pois acima dele iremos inserir as imagens cambiáveis). Celta Informática - F: (11) 4331-1586 Página: 52
  53. 53. Dreamweaver 3.0Na Web, a home page padrão da grande maioria dos sites apresenta onome index.htm, assim, qualquer site que você acessar, este arquivoserá o primeiro a ser exibido no navegador (“arquivo de apresentação dosite”). Vamos, então, salvar esta página que estamos criando com o nomeindex.htm.Selecione a opção Salvar do menu Arquivo. Na caixa de diálogo SalvarComo, localize a pasta Agenda_Cultural (que contém todos os arquivosdo site), e na caixa de texto Nome do arquivo, digite index.htm (comomostra a próxima figura). Depois clique no botão Salvar.Agora vamos definir um título para essa página. Selecione a opção Pro-priedades da página no menu Modificar. Na caixa de diálogo de mes-mo nome, digite Agenda Cultural na caixa de texto Título, depois clique nobotão OK. Celta Informática - F: (11) 4331-1586 Página: 53
  54. 54. Dreamweaver 3.0Com a página quase completa, só falta inserirmos as imagens cambiáveise depois os links para as outras páginas que criamos anteriormente.Para criar uma imagem cambiável, precisamos de duas imagens, asquais devem possuir as mesmas dimensões (largura e altura). Uma ima-gem (chamada primária) será inicialmente apresentada pelo navegador,enquanto a outra só será mostrada quando o ponteiro do mouse forposicionado sobre a imagem primária.OBS: Estas imagens deverão ser previamente criadas em algum pro-grama de criação/tratamento de imagens, como o Photoshop, Fireworks,etc, e depois copiadas para a pasta do site.Posicione o ponto de inserção entre o título da página e o texto de apre-sentação (deixe-o centralizado). Na paleta de objetos, clique no botãoInserir imagem cambiável ( ), ou selecione a opção Imagemcambiável do menu Inserir. A caixa de diálogo Inserir imagem cambiávelaparecerá: Celta Informática - F: (11) 4331-1586 Página: 54
  55. 55. Dreamweaver 3.0Nesta caixa de diálogo, digite um nome para o objeto que está sendoinserido e defina qual será a imagem original e a imagem cambiável. Nacaixa de texto Nome da imagem digite botao1, clique no primeiro botãoProcurar e selecione o arquivo da imagem original, depois clique no se-gundo botão Procurar e selecione o arquivo da imagem cambiável (porenquanto não vamos inserir nada na última caixa de texto).OBS: Deixe selecionada a opção Pré-carregar a imagem cambiável paraque a imagem cambiável seja carregada no cache do navegador duranteo carregamento da página, a fim de que não seja notada nenhuma pausaentre a substituição de uma imagem por outra.Clique no botão OK. Agora posicione o ponto de inserção no lado direitoda primeira imagem e insira uma outra imagem cambiável, onde esta sechamará botao2 (lembre-se que estas imagens constituirão a barra denavegação da primeira página do site). Repita o procedimento até inseriras outras imagens (botao3 e botao4), como mostra a próxima figura. Celta Informática - F: (11) 4331-1586 Página: 55
  56. 56. Dreamweaver 3.0De acordo com a figura anterior, selecione cada imagem e, no inspetorde propriedades, digite 10 no campo de texto Espaço H para que haja umespaço entre elas.Para testar o efeito das imagens cambiáveis, devemos abrir a página emum navegador. Estando com a página aberta na janela do documento,pressione a tecla F12 (isso se o seu navegador for o Internet Explorer) ouselecione a opção Visualizar no navegador do menu Arquivo e esco-lha o navegador desejado.Passe o mouse sobre as imagens e veja como a imagem original é rapi-damente substituída pela imagem cambiável. Feche o navegador pararetornar à janela do documento. Celta Informática - F: (11) 4331-1586 Página: 56
  57. 57. Dreamweaver 3.0INSERINDO HYPERLINKSUm hyperlink estabelece um link (conexão) de uma página para outrodestino, onde o destino pode ser uma outra página da Web, uma figura,um endereço de correio eletrônico, um arquivo (tal como um arquivo demultimídia ou documento do Microsoft Office) ou um programa. Umhyperlink pode ser texto ou figura, e quando o ponteiro do mouse estásobre um hyperlink, ele se transforma em uma “mãozinha”.Assim, a grande funcionalidade da Internet se dá graças à existência doslinks, os quais permitem a navegação entre as páginas dos sites. Atra-vés dos hyperlinks, você pode vincular suas páginas a outros documen-tos que estejam dentro do seu próprio site ou em qualquer lugar do mun-do. Quando falamos em documentos, entende-se como sendo imagens,arquivos multimídia, programas ou outras páginas da Web.Com o Dreamweaver, é possível criar facilmente os seguintes tipos devínculos:Vínculos de caminho absoluto: apontam para uma localização naInternet fora do site no qual a página atual está localizada. Para esse tipode vínculo devemos informar a URL completa do documento vinculado,inclusive o protocolo a ser utilizado (normalmente, http:// para as páginasda Web).Vínculos de caminho relativo: apontam do documento atual para outrodocumento localizado dentro da mesma pasta de trabalho. Se o docu-mento vinculado estiver localizado em outra pasta, especifique o cami-nho através da hierarquia de pastas, do documento atual ao vinculado, ena especificação desse caminho, não coloque a parte da URL absoluta,pois é a mesma para ambos os documentos.Vínculos para âncoras identificadas: vinculam a um ponto previamen-te identificado dentro de uma página, onde este ponto pode estar na mes-ma página ou em uma localização específica em outra página.Vínculos de correio eletrônico: abrem uma janela de mensagem (uti-lizando o programa de correio eletrônico associado ao navegador do usu-ário). Celta Informática - F: (11) 4331-1586 Página: 57
  58. 58. Dreamweaver 3.0VÍNCULOS DE CAMINHO RELATIVOVamos, agora, definir os links para as imagens cambiáveis que inseri-mos na página principal do site (index.htm). Como a página que conteráo link e o documento de destino estão na mesma pasta, então utilizare-mos os vínculos de caminho relativo.Antes de criarmos os links, deveremos criar uma outra página, onde aimagem do botão Filmes da página principal conterá um link para estanova página. Esta página, que terá como título Filmes, exibirá os nomesdos filmes, onde cada nome será um link para a página apropriada.Selecione a opção Novo do menu Arquivo. Salve esta nova página napasta Agenda_Cultural e dê o nome de filmes.htm ao arquivo. Depoisexiba a caixa de diálogo Propriedades da página e digite Filmes na caixade texto Título. Por fim, insira o conteúdo na página Filmes de maneiraque fique parecido com a próxima figura. Celta Informática - F: (11) 4331-1586 Página: 58
  59. 59. Dreamweaver 3.0Agora, exiba a página Agenda Cultural (arquivo index.htm) e clique nosegundo botão para selecioná-lo, assim as propriedades da imagem serãoexibidas na janela Inspetor de propriedades (se a janela do inspetor nãoestiver aberta, selecione a opção Propriedades do menu Janela).No inspetor de propriedades, clique na pasta ao lado da caixa de textoVínculo (como mostra a figura a seguir) e encontre o arquivo que seráexibido quando a imagem (ou o botão) receber um clique, ou seja, seleci-one o arquivo filmes.htm.Abaixo da caixa de texto Vínculo, no inspetor de propriedades, existe umaoutra caixa denominada Destino. O campo Destino é um atributo de linkso qual especifica onde o link em questão deve ser aberto: na mesmajanela ou em uma nova. Clique na setinha do campo Destino e veja asopções existentes. Celta Informática - F: (11) 4331-1586 Página: 59
  60. 60. Dreamweaver 3.0A opção blank faz o link abrir em uma nova janela em branco do navega-dor (tendo-se duas janelas abertas). Já a opção top faz o link substituir oconteúdo da janela atual (neste caso ficamos apenas com uma janelaaberta). As outras opções se aplicam somente quando estivermos tra-balhando com as molduras – frames. Por enquanto deixe a caixa de tex-to Destino como estava antes, ou seja, vazia, sem nada selecionado.Agora, na página filmes.htm, precisamos transformar os nomes dos fil-mes em hyperlinks, para que cada um, quando receber um clique, abra apágina do filme apropriada.Com o arquivo filmes.htm aberto na janela do documento, selecione otexto Missão Impossível 2. No inspetor de propriedades, clique na pastada caixa de texto Vínculo, na caixa de diálogo Selecione o arquivo quesurgirá, localize o arquivo missao_impossivel.htm e depois clique no bo-tão Selecione. Você verá que o texto já ficará sublinhado, indicando queagora ele é um hyperlink.Faça a mesma coisa com os outros três textos: 60 Segundos (vincule-oao arquivo 60_segundos.htm), O Patriota (vincule-o ao arquivopatriota.htm) e Premonição (vincule-o ao arquivo premonicao.htm). Celta Informática - F: (11) 4331-1586 Página: 60
  61. 61. Dreamweaver 3.0Salve seus arquivos. Ainda falta inserirmos outros links na páginafilmes.htm e nas páginas referentes a cada filme. Da página filmes.htmdeverá haver links para a página inicial (index.htm), para a página refe-rente aos shows e aos teatros (que ainda não existem, e ficará a seucargo criá-las e estabelecer os links). Da página referente a cada filmedeverá haver um link que volte à página filmes.htm, como mostra a figuraa seguir.Vamos agora visualizar o mapa do site onde poderemos ver a estruturado site e os ícones vinculados. A exibição do mapa do site é ideal parafazer storyboards ou criar o layout da estrutura do site, além de poder serutilizado para adicionar novos arquivos a um site ou modificar, adicionarou remover vínculos.Para exibir um mapa de site, selecione a opção Mapa do site domenu Janela, isto se a janela Site estiver fechada. Agora, se estajanela estiver aberta, clique no botão Mapa do site ( ) na própriajanela. Celta Informática - F: (11) 4331-1586 Página: 61
  62. 62. Dreamweaver 3.0Como padrão, o mapa exibe dois níveis da estrutura do site. Clique nossinais de adição (+) ou subtração (-) ao lado de uma página para mostrarou ocultar as páginas vinculadas abaixo do segundo nível.Agora vamos visualizar o site no navegador e testar os hyperlinks. Estan-do com o arquivo index.htm aberto na janela do documento, pressione atecla F12 (se o seu navegador não for o Internet Explorer, utilize a opçãoVisualizar no navegador do menu Arquivo). A janela do seu navegadorserá aberta e exibirá a página principal, teste os hyperlinks e depois fe-che a janela do navegador.OBS: Os documentos podem ser visualizados nos navegadores a qual-quer momento, e não é necessário salvar o documento previamente. Celta Informática - F: (11) 4331-1586 Página: 62
  63. 63. Dreamweaver 3.0Quando visualizamos qualquer arquivo no navegador, o Dreamweavercria um arquivo temporário (cujo nome inicia-se com as letras TMP) queele utiliza como o arquivo de visualização de navegador (esse arquivopode ser visto na janela do Site, já que ela exibe todos os arquivos dosite). Portanto, se você modificar o arquivo no Dreamweaver e depois najanela do navegador clicar no botão Atualizar ou Refresh, a versão maisatual do arquivo não será mostrada, será necessário fechar a janela donavegador e visualizar o arquivo novamente. Celta Informática - F: (11) 4331-1586 Página: 63
  64. 64. Dreamweaver 3.0VÍNCULOS DE CAMINHO ABSOLUTO E ÂNCORASIDENTIFICADASTodos os hyperlinks que inserimos no site possuem vínculos de caminhorelativo, pois todos os arquivos relacionados estão localizados na pastaAgenda_Cultural. Para inserir vínculo de caminho absoluto (quando odestino do link não está em localizado na pasta local), o processo é omesmo: selecione o texto ou figura e no inspetor de propriedades, digitetodo o caminho do destino, incluindo a URL completa inclusive. Por exem-plo: se você quisesse ter um link no seu site que apontasse para a pági-na sobre os produtos da Macromedia, você deveria digitar na caixa detexto Vínculo: http://www.macromedia.com/br/software.Agora, para definir um link que aponte para determinada parte (ou ponto)da página, é necessário usar as âncoras identificadas. Geralmente, asâncoras identificadas são utilizadas para levar um usuário a um tópicoespecífico ou para a parte superior ou inferior de um página, fazendo-ochegar rapidamente à posição selecionada.Como exemplo, vamos criar uma âncora identificada na página do filmeO Patriota e depois criar um link para essa âncora. A âncora identificadaserá uma imagem (como mostrada na figura a seguir), e o link a essaimagem será a palavra família. Primeiro devemos dar um nome à ima-gem, já que ela será exibida quando clicarmos na palavra família.Deixe o ponto de inserção posicionado ao lado da imagem e depois sele-cione a opção Âncora com nome do menu Inserir. Na caixa de textoInserir âncora com nome digite um nome para a âncora, como mostra apróxima figura (esse nome deverá ser uma única palavra em letras mi-núsculas ou números). Depois clique no botão OK. Celta Informática - F: (11) 4331-1586 Página: 64
  65. 65. Dreamweaver 3.0Agora, na janela do documento, selecione a palavra família e, na caixa detexto Vínculo do inspetor de propriedades, digite o sinal de libra (#) segui-do do nome da âncora, ou seja, digite #familia (sem espaço entre o sinale o nome). Depois pressione a tecla Enter. Celta Informática - F: (11) 4331-1586 Página: 65
  66. 66. Dreamweaver 3.0A palavra família agora está vinculada com a âncora identificada. Paraver o resultado, exiba esta página no navegador.OBS: Se a âncora estiver na mesma página (como foi o nosso caso),insira na caixa de texto Vínculo apenas o sinal de libra seguido do nomeda âncora. Se a âncora estiver em uma página e o link para ela em outra(mas ambos na mesma pasta), digite na caixa de texto Vínculo o nomeda página seguido do sinal de libra e do nome da âncora (algo como:nomedapágina.htm#nomedaâncora). Se a âncora estiver em um outrolocal da Internet, será necessário digitar o endereço absoluto e no final onome da página mais o sinal e o nome da âncora (exemplo: http://www.site.com.br/nomedapágina.htm#nomedaâncora).Elementos invisíveisQuando inserimos uma âncora identificada na imagem do tópico anteri-or, uma pequena âncora apareceu ao lado da imagem.OBS: Para exibir ou ocultar os elementos invisíveis (no caso, a pequenaâncora), utilize a opção Elementos invisíveis do menu Exibir. Celta Informática - F: (11) 4331-1586 Página: 66
  67. 67. Dreamweaver 3.0Os elementos invisíveis possuem este nome pois não são exibidos nonavegador, mas somente na janela do documento (desde que a opçãoExibir elementos invisíveis esteja selecionada).Na janela do documento todos os elementos invisíveis aparecem na for-ma de pequenos ícones. Temos como exemplos de elementos invisí-veis: formulários, âncoras com nome, comentários e roteiros.Para visualizar as propriedades de um elemento invisível, dê um cliqueduplo sobre ele para abrir o inspetor de propriedades, e assim saber oque é e o que faz aquele elemento invisível.ALTERANDO AS CORES DOS VÍNCULOSAtravés da caixa de diálogo Propriedades da página, podemos alterar ascores dos vínculos (ou links), já que cada vínculo assume três estados:Vínculos: quando os usuários ainda não clicaram no link.Vínculos visitados: quando os usuários já clicaram no link e já visitaram apágina de destino.Vínculos ativos: quando os usuários estão com o mouse no link prontospara dar um clique.Assim, para cada estado do link, podemos definir uma cor diferente, faci-litando para o usuário saber quais as partes do site que ele já visitou.Com uma página aberta na janela do documento, abra a caixa de diálogoPropriedades da página (através do menu Modificar). Você verá as cai-xas de texto Vínculos, Vínculos visitados e Vínculos ativos, e para alterara cor, basta clicar no botão de cor que se encontra ao lado de cada caixa.Na paleta de cores que será apresentada, clique na cor desejada. Celta Informática - F: (11) 4331-1586 Página: 67
  68. 68. Dreamweaver 3.0Na paleta de cores você também pode clicar no botão Cores ( ) paraabrir a caixa de diálogo Cor e escolher outra cor que não esteja na paletade cores. Celta Informática - F: (11) 4331-1586 Página: 68
  69. 69. Dreamweaver 3.0CRIANDO PÁGINAS COM MOLDURASAs molduras (também conhecidas como frames ou quadros) são regi-ões retangulares que podemos inserir nas páginas da Web. Uma páginabaseada em molduras é dividida em várias janelas dentro de janelas,assim, uma única página do site pode conter várias molduras, cada umapodendo exibir um conteúdo diferente. Utilizamos as molduras quandoqueremos que determinada região da página permaneça estática (apa-reça o tempo) enquanto outras regiões sempre mudam.Cada moldura é um arquivo HTML distinto, com seu próprio conteúdo,incluindo diferentes cores de links e imagens de fundo. Portanto, tem quehaver um único arquivo com a finalidade de unir todos os arquivos demolduras presentes em uma página, pois este arquivo (que representa oconjunto de todas as molduras da página) é o que será exibido no nave-gador. Sendo assim, se temos uma página da Web com duas molduras,na verdade temos três arquivos distintos: o arquivo do conjunto de mol-duras e os dois arquivos com o conteúdo que aparece dentro de cadamoldura.Vamos agora criar um outro site, ou melhor, vamos criar novamente umsite como o Guia Cultural só que agora construiremos as páginas utili-zando molduras.Para criar um novo site, selecione a opção Novo site do menu Site. Nacaixa de diálogo apresentada, digite agenda2 na caixa de texto Nome dosite, depois clique no ícone correspondente à pasta, à direita do campoPasta raiz local e, dentro da pasta Site, crie uma nova pasta denominadaAgenda_Cultural_Moldura (como mostra a próxima figura). Depois cliqueno botão Abrir. Celta Informática - F: (11) 4331-1586 Página: 69
  70. 70. Dreamweaver 3.0Em seguida clique no botão Salvar para retornar à caixa de diálogo Defi-nição de site. Estando com o Nome do site e a Pasta raiz local definidos, clique no botão OK. A janela Site – agenda2 será exibida. Vamos começar a construção do site criando o arquivo index.htm, que corresponde à página inicial do site. Na janela do documento, exiba a paleta de objetos (selecio- ne a opção Objetos do menu Janela). Na paleta de obje- tos, selecione o painel Molduras. O painel Molduras contém 8 botões utilizados criar layouts predefinidos de conjuntos de molduras. Posicione o mouse sobre cada botão e veja que aparecerá um pequeno texto informando o objetivo do botão. Celta Informática - F: (11) 4331-1586 Página: 70
  71. 71. Dreamweaver 3.0Estando com a janela do documento ativa, clique no botão Inserir mol-dura esquerda (primeiro botão) do painel Molduras da paleta de objetos.A página será dividida em duas regiões (se você não estiver vendo umaborda cinza, selecione a opção Bordas da moldura do menu Exibir).A moldura da esquerda irá conter a barra de navegação do site (sendoque esta moldura ficará sempre visível) e a moldura da direita terá seuconteúdo variável. Se necessário, podemos inserir outras molduras nes-ta mesma página, através do menu Inserir, opção Molduras.Vamos inserir uma moldura superior onde esta conterá a imagem querepresenta o título da home page, que é Guia Cultural. Dê um clique namoldura da direita para inserir o ponto de inserção, depois no menu Inse-rir, vá até a opção Molduras e clique em Superior. Quando utilizamosesta opção, ou seja, quando dividimos uma moldura que já existe napágina (no nosso caso dividimos moldura direita), temos um Conjuntoaninhado de molduras, onde a moldura original é chamada de pai e amoldura que foi inserida é a moldura-filha.Agora a página contém três molduras, as quais receberão nomes dife-rentes na hora em que formos salvá-las. Celta Informática - F: (11) 4331-1586 Página: 71
  72. 72. Dreamweaver 3.0Poderemos inserir o conteúdo diretamente nas páginas com molduras(ou seja, criar uma página digitando textos e inserindo figuras diretamen-te na moldura) ou podemos abrir algum arquivo existente e vinculá-lo àmoldura.Como iremos criar novamente o site Guia Cultural, só que agora comuma estrutura diferente de páginas, copie todos os arquivos (menos oindex.htm) da pasta Guia_Cultural para a pasta Guia_Cultural_Moldura(faça isso através do Windows Explorer).OBS: Mesmo com o conjunto de molduras aberto na janela do documen-to, você poderá realizar modificações nas páginas dos arquivosfilmes.htm, 60segundos.htm, etc, selecionando a opção Abrir do menuArquivo (a página será aberta em uma outra janela de documento). Sequiser, faça as alterações na página (modifique o fundo, as imagens,formate a fonte, entre outras coisas) e depois salve o arquivo. Observe apróxima figura e veja as alterações que foram feitas na página Filmes. Celta Informática - F: (11) 4331-1586 Página: 72
  73. 73. Dreamweaver 3.0Agora, dê um clique na moldura superior da sua página para inserir oponto de inserção, depois, através do menu Inserir, opção Imagem, insi-ra a imagem do título da home page (a imagem que apresenta o textoGuia Cultural), como mostra a próxima figura.Posicione o ponto de inserção na moldura da direita para inserirmos otexto de apresentação do site. No menu Arquivo, selecione a opção Abrirna moldura. Na caixa de diálogo Selecione o arquivo de HTML, selecio-ne o arquivo index.htm da pasta Guia_Cultural, depois clique no botãoSelecione. O Dreamweaver exibirá uma janela de mensagem informan-do que o arquivo index.htm está fora da pasta raiz (Guia_Cultural_Moldura),e se você deseja copiá-lo para a pasta ativa, clique no botão Sim; napróxima caixa de diálogo apresentada (Copiar o arquivo como), digiteprimeira.htm na caixa de texto Nome do arquivo.O conteúdo do arquivo será inserido na moldura, mas como queremossomente o texto, selecione as imagens que foram inseridas e exclua-as(pressione a tecla Delete depois de selecionar cada uma delas). Celta Informática - F: (11) 4331-1586 Página: 73
  74. 74. Dreamweaver 3.0SALVANDO AS MOLDURASComo já comentamos, cada moldura da página constitui um arquivo,portanto, na página que criamos e inserimos três molduras, teremos naverdade quatro arquivos: o arquivo da moldura superior, da moldura es-querda, da moldura direita e um arquivo que será o conjunto desses três.Para salvar o conjunto das molduras e depois cada moldura individual-mente, selecione a opção Salvar tudo do menu Arquivo. Na caixa dediálogo Salvar como você deverá definir um nome para cada arquivo, epara saber qual arquivo (ou moldura) que está sendo salvo, é só obser-var qual moldura ficará selecionada na janela do documento. Como mostraa próxima figura, o primeiro arquivo a ser salvo é o conjunto das moldu-ras, e como inicialmente todo o conjunto é que será exibido no navegador(e não uma moldura separadamente), digite index.htm como nome doarquivo do conjunto das molduras e clique no botão Salvar.A próxima moldura que o Dreamweaver destaca é a moldura superior.Na caixa de texto Nome do arquivo digite superior.htm e clique no botãoSalvar. Celta Informática - F: (11) 4331-1586 Página: 74
  75. 75. Dreamweaver 3.0Por fim digite esquerda.htm como nome para o arquivo da moldura es-querda. A moldura da direita já assumiu o nome primeira.htm.A página que criamos é então formada por quatro arquivos: superior.htm,esquerda.htm, primeira.htm e index.htm. Celta Informática - F: (11) 4331-1586 Página: 75
  76. 76. Dreamweaver 3.0SELECIONANDO MOLDURASMuitas alterações que você terá que realizar na(s) moldura(s) exigirá queela esteja selecionada. Você pode selecionar uma moldura ou um con-junto de molduras na janela do documento ou utilizar o inspetor de mol-duras. Quando uma moldura for selecionada, você verá as linhas de se-leção no inspetor de molduras e na janela do documento.O inspetor de molduras (mostrado na próxima figura) é exibido atravésdo menu Janela, opção Molduras.O inspetor de molduras fornece uma representação visual das moldurasexistentes na página. As molduras são envoltas por uma linha fina cinza,e cada moldura é identificada por um nome.Para selecionar uma moldura através do inspetor de molduras, clique namoldura desejada e veja que aparece uma linha forte em torno da moldu-ra, e uma linha tracejada aparece em torno da mesma moldura na janelado documento. Para selecionar qualquer moldura na própria janela dodocumento, pressione a tecla Alt e dê um clique na moldura. Para sele-cionar todo o conjunto de molduras, clique na borda mais externa doinspetor de molduras. Celta Informática - F: (11) 4331-1586 Página: 76
  77. 77. Dreamweaver 3.0Quando as páginas de um site são criadas utilizando-se molduras, oarquivo que representa o conjunto dos molduras (no nosso caso,index.htm) será a página para a qual seu URL apontará. Dessa maneira,precisamos definir um título, já que este título será exibido na barra detítulo da janela do navegador.Através do inspetor de molduras, selecione o conjunto de moldurasclicando na borda externa, como mostra a figura anterior. Agora, paradefinir o título Guia Cultural, utilize a opção Propriedades da página domenu Modificar, e realize a alteração da mesma maneira que você apren-deu quando estava construindo páginas sem molduras. Depois salve suapágina através da opção Salvar tudo do menu Arquivo. Celta Informática - F: (11) 4331-1586 Página: 77
  78. 78. Dreamweaver 3.0PROPRIEDADES DAS MOLDURASAs propriedades das molduras determinam o nome da moldura, o arqui-vo de origem, as margens, paginação, redimensionamento e bordas decada moldura em um conjunto e as propriedades dos conjuntos de mol-duras controlam as dimensões das molduras, assim como a cor e largu-ra das bordas entre elas.Para especificar as propriedades das molduras, primeiro selecione amoldura, depois escolha a opção Propriedades do menu Janela (issose o inspetor de propriedades estiver fechado). Se necessário, clique naseta de expansão, situada no canto inferior direito do inspetor de proprie-dades, para examinar todas as propriedades da moldura.1. Campo Nome da moldura: digite um nome para a moldura, sendo queeste nome será utilizado como referência de destino e roteiro dehipervínculos. O nome de uma moldura dever conter apenas uma pala-vra, e um nome de moldura é diferente de um nome de arquivo. Aproveitee selecione a moldura superior e digite moldurasuperior no campo nomeda moldura, depois selecione a moldura esquerda e dê o nome demolduraesquerda a ela, por fim selecione a moldura da direita e dê onome de molduraprincipal. Após digitar o nome no campo, pressione atecla Enter ou então clique na pequena imagem da moldura exibida noinspetor de propriedades.2. Orig: determina o documento de origem da moldura. Digite um nomede arquivo ou clique no ícone correspondente à pasta, para procurar eselecionar o arquivo.3. Paginação: determina se as barras de rolagem aparecerão quandonão houver espaço suficiente para exibir o conteúdo da moldura. A defini-ção padrão da maioria dos navegadores é Autom. Celta Informática - F: (11) 4331-1586 Página: 78

×