7 - criação de páginas web dreamweaver pt.2. criação e edição de links podem ser criados...

15
7 - Criação de Páginas 7 - Criação de Páginas Web DREAMWEAVER Web DREAMWEAVER Pt.2 Pt.2

Upload: internet

Post on 18-Apr-2015

109 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: 7 - Criação de Páginas Web DREAMWEAVER Pt.2. Criação e edição de links Podem ser criados diversos tipos de links num documento: Podem ser criados diversos

7 - Criação de Páginas Web 7 - Criação de Páginas Web DREAMWEAVERDREAMWEAVER

Pt.2Pt.2

Page 2: 7 - Criação de Páginas Web DREAMWEAVER Pt.2. Criação e edição de links Podem ser criados diversos tipos de links num documento: Podem ser criados diversos

Criação e edição de Criação e edição de linkslinks

Podem ser criados diversos tipos de links Podem ser criados diversos tipos de links num documento:num documento: linkslinks a outro documento ou ficheiro, que pode ser de a outro documento ou ficheiro, que pode ser de

imagem, de filme, de som ou PDF;imagem, de filme, de som ou PDF; linkslinks de âncora com nome, que saltam para uma de âncora com nome, que saltam para uma

localização específica dentro de um documento;localização específica dentro de um documento; linkslinks de correio electrónico, que criam uma nova de correio electrónico, que criam uma nova

mensagem com o endereço do destinatário já preenchido;mensagem com o endereço do destinatário já preenchido; linkslinks nulos e de nulos e de scriptscript, que permitem anexar , que permitem anexar

comportamentos a um objecto ou executar código comportamentos a um objecto ou executar código JavaScriptJavaScript..

Page 3: 7 - Criação de Páginas Web DREAMWEAVER Pt.2. Criação e edição de links Podem ser criados diversos tipos de links num documento: Podem ser criados diversos

Criação e edição de Criação e edição de linkslinks Para adicionar uma hiperligação utilizando o comando Para adicionar uma hiperligação utilizando o comando HyperlinkHyperlink::

colocar o ponto de inserção onde a hiperligação deve ser colocar o ponto de inserção onde a hiperligação deve ser inserida no documento;inserida no documento;

escolher escolher INSERIR – HyperlinkINSERIR – Hyperlink ou, na barra Inserir, seleccionar o ou, na barra Inserir, seleccionar o separador «Comuns» e clicar no botão separador «Comuns» e clicar no botão Hyperlink;Hyperlink;

Preencher a caixa de diálogo;Preencher a caixa de diálogo; Clicar emClicar em OK. OK.

Page 4: 7 - Criação de Páginas Web DREAMWEAVER Pt.2. Criação e edição de links Podem ser criados diversos tipos de links num documento: Podem ser criados diversos

Criação e edição de Criação e edição de linkslinks Para criar uma âncora com nome:Para criar uma âncora com nome:

na visualização de na visualização de ProjectoProjecto, na janela do documento, posicionar o ponto , na janela do documento, posicionar o ponto de inserção no local onde se pretende inserir a âncora com nome; de inserção no local onde se pretende inserir a âncora com nome;

optar por um dos procedimentos seguintes: escolher optar por um dos procedimentos seguintes: escolher INSERIR – ÂncoraINSERIR – Âncora com nomecom nome ou, alternativamente, pressionar as teclas ou, alternativamente, pressionar as teclas Ctrl + Alt + ACtrl + Alt + A; ; outra possibilidade é, na barra Inserir, seleccionar o separador «Comuns» outra possibilidade é, na barra Inserir, seleccionar o separador «Comuns» e clicar no botão Âncora com nome;e clicar no botão Âncora com nome;

no campo «Nome da âncora», digitar um nome para a âncorano campo «Nome da âncora», digitar um nome para a âncora

Page 5: 7 - Criação de Páginas Web DREAMWEAVER Pt.2. Criação e edição de links Podem ser criados diversos tipos de links num documento: Podem ser criados diversos

Criação e edição de Criação e edição de linkslinks

Para estabelecer um Para estabelecer um linklink a uma âncora com a uma âncora com nome:nome: na visualização de na visualização de ProjectoProjecto, na janela do documento, , na janela do documento,

seleccionar um texto ou uma imagem a partir da qual seleccionar um texto ou uma imagem a partir da qual será criado um será criado um linklink;;

no campo «no campo «LinkLink», no Inspector de propriedades, digitar », no Inspector de propriedades, digitar um sinal de cardinal (#) e o nome da âncora. Por um sinal de cardinal (#) e o nome da âncora. Por exemplo: para estabelecer um exemplo: para estabelecer um link link a uma âncora com o a uma âncora com o nome TIC no documento actual, digitar «#TIC»; para nome TIC no documento actual, digitar «#TIC»; para estabelecer um estabelecer um linklink a uma âncora com o nome TIC num a uma âncora com o nome TIC num documento diferente, na mesma pasta, digitar documento diferente, na mesma pasta, digitar «nomedoficheiro.html#TIC»«nomedoficheiro.html#TIC»

Page 6: 7 - Criação de Páginas Web DREAMWEAVER Pt.2. Criação e edição de links Podem ser criados diversos tipos de links num documento: Podem ser criados diversos

Criação e edição de Criação e edição de linkslinks Para criar um Para criar um linklink de correio electrónico: de correio electrónico:

na visualização de na visualização de ProjectoProjecto, na janela do documento, colocar o ponto de , na janela do documento, colocar o ponto de inserção onde deverá aparecer o inserção onde deverá aparecer o linklink de correio electrónico, ou de correio electrónico, ou seleccionar o texto ou a imagem a ser mostrada nesse local;seleccionar o texto ou a imagem a ser mostrada nesse local;

escolher escolher INSERIR – LinkINSERIR – Link de correio electrónicode correio electrónico ou, na barra Inserir, ou, na barra Inserir, separador «Comuns», clicar no botão separador «Comuns», clicar no botão Inserir link de correio electrónicoInserir link de correio electrónico;;

preencher a caixa de diálogo;preencher a caixa de diálogo; clicar em OK.clicar em OK.

Page 7: 7 - Criação de Páginas Web DREAMWEAVER Pt.2. Criação e edição de links Podem ser criados diversos tipos de links num documento: Podem ser criados diversos

Criação e edição de Criação e edição de linkslinks

Para criar um Para criar um link link nulo:nulo: seleccionar o texto, uma imagem ou um objecto na seleccionar o texto, uma imagem ou um objecto na

visualização de visualização de ProjectoProjecto, na janela do documento;, na janela do documento; no Inspector de propriedades, na caixa de texto «Link», no Inspector de propriedades, na caixa de texto «Link»,

digitar «javascript:;» (a palavra javascript, seguida de dois digitar «javascript:;» (a palavra javascript, seguida de dois pontos e de um ponto e vírgula). pontos e de um ponto e vírgula).

Para criar um Para criar um link link de de scriptscript, proceder depois da , proceder depois da seguinte forma:seguinte forma: no campo «Link», no Inspector de propriedades, digitar no campo «Link», no Inspector de propriedades, digitar

«javascript:» seguido de código «javascript:» seguido de código JavaScriptJavaScript ou de uma ou de uma chamada à função, que normalmente envolve o nome da chamada à função, que normalmente envolve o nome da função definida e a chamar.função definida e a chamar.

Page 8: 7 - Criação de Páginas Web DREAMWEAVER Pt.2. Criação e edição de links Podem ser criados diversos tipos de links num documento: Podem ser criados diversos

Inserção de imagens na páginaInserção de imagens na página

Para inserir uma imagem na página:Para inserir uma imagem na página: posicionar o ponto de inserção onde a imagem posicionar o ponto de inserção onde a imagem

deverá ser incluída na janela do documento;deverá ser incluída na janela do documento; no separador «Comuns» da barra Inserir, clicar no no separador «Comuns» da barra Inserir, clicar no

botão botão ImagemImagem ou seleccionar ou seleccionar INSERIR – ImagemINSERIR – Imagem

Page 9: 7 - Criação de Páginas Web DREAMWEAVER Pt.2. Criação e edição de links Podem ser criados diversos tipos de links num documento: Podem ser criados diversos

Inserção de imagens na páginaInserção de imagens na página

na caixa de diálogo, seleccionar «Sistema de arquivos» na caixa de diálogo, seleccionar «Sistema de arquivos» para escolher um ficheiro de imagem ou «Procurar» para para escolher um ficheiro de imagem ou «Procurar» para escolher a imagem ou origem do conteúdo a ser inserido;escolher a imagem ou origem do conteúdo a ser inserido;

no Inspector de propriedades (JANELA – Propriedades), no Inspector de propriedades (JANELA – Propriedades), definir as propriedades da imagem.definir as propriedades da imagem.

Page 10: 7 - Criação de Páginas Web DREAMWEAVER Pt.2. Criação e edição de links Podem ser criados diversos tipos de links num documento: Podem ser criados diversos

Criação de imagens dinâmicasCriação de imagens dinâmicas

Uma imagem dinâmica é aquela que, quando Uma imagem dinâmica é aquela que, quando exibida no browser, é alterada por acção do exibida no browser, é alterada por acção do rato.rato.

Este tipo de imagem consiste em pelo menos Este tipo de imagem consiste em pelo menos duas imagens: a imagem primária (exibida duas imagens: a imagem primária (exibida quando a página for carregada pela primeira quando a página for carregada pela primeira vez) e a imagem secundária (que será exibida vez) e a imagem secundária (que será exibida quando o rato desencadear a acção sobre a quando o rato desencadear a acção sobre a imagem primária).imagem primária).

Page 11: 7 - Criação de Páginas Web DREAMWEAVER Pt.2. Criação e edição de links Podem ser criados diversos tipos de links num documento: Podem ser criados diversos

Criação de imagens dinâmicasCriação de imagens dinâmicas

Para criar uma imagem dinâmica:Para criar uma imagem dinâmica: na janela do documento, colocar o ponto de inserção na janela do documento, colocar o ponto de inserção

no local onde deverá aparecer a imagem;no local onde deverá aparecer a imagem; escolher escolher INSERIR – Imagens interactivas – INSERIR – Imagens interactivas –

Imagem cambiávelImagem cambiável;;

Page 12: 7 - Criação de Páginas Web DREAMWEAVER Pt.2. Criação e edição de links Podem ser criados diversos tipos de links num documento: Podem ser criados diversos

Criação de imagens dinâmicasCriação de imagens dinâmicas

em «Nome da imagem», digitar um nome para a em «Nome da imagem», digitar um nome para a imagem dinâmica;imagem dinâmica;

em «Imagem original», clicar em em «Imagem original», clicar em Procurar Procurar e e seleccionar a imagem a ser exibida quando a página seleccionar a imagem a ser exibida quando a página carregar ou, alternativamente, digitar o caminho do carregar ou, alternativamente, digitar o caminho do arquivo da imagem na caixa de texto;arquivo da imagem na caixa de texto;

em «Imagem cambiável», clicar em em «Imagem cambiável», clicar em Procurar Procurar e e seleccionar a imagem a ser exibida quando o rato seleccionar a imagem a ser exibida quando o rato desencadear a acção; alternativamente, digitar o desencadear a acção; alternativamente, digitar o caminho do arquivo da imagem na caixa de texto;caminho do arquivo da imagem na caixa de texto;

Page 13: 7 - Criação de Páginas Web DREAMWEAVER Pt.2. Criação e edição de links Podem ser criados diversos tipos de links num documento: Podem ser criados diversos

Criação de imagens dinâmicasCriação de imagens dinâmicas seleccionar a opção «Pré-carregar a imagem cambiável» para seleccionar a opção «Pré-carregar a imagem cambiável» para

que a imagem seja pré-carregada na Cache do browser, que a imagem seja pré-carregada na Cache do browser, evitando atrasos quando o ponteiro passar sobre ela;evitando atrasos quando o ponteiro passar sobre ela;

em «Texto alternativo», digitar texto para descrever a imagem;em «Texto alternativo», digitar texto para descrever a imagem; em «Quando tiver clicado, vá para a URL», clicar em em «Quando tiver clicado, vá para a URL», clicar em ProcurarProcurar

e seleccionar o ficheiro; alternativamente, digitar o caminho do e seleccionar o ficheiro; alternativamente, digitar o caminho do ficheiro a ser aberto quando um utilizador clicar na imagem ficheiro a ser aberto quando um utilizador clicar na imagem dinâmica;dinâmica;

clicar em clicar em OKOK para fechar a caixa de diálogo; para fechar a caixa de diálogo; seleccionar seleccionar ARQUIVO – Visualizar no browserARQUIVO – Visualizar no browser;; no browser, passar o cursor sobre a imagem original: a no browser, passar o cursor sobre a imagem original: a

exibição deveexibição deve alternar para a imagem secundária.alternar para a imagem secundária.

Page 14: 7 - Criação de Páginas Web DREAMWEAVER Pt.2. Criação e edição de links Podem ser criados diversos tipos de links num documento: Podem ser criados diversos

Utilização de um editor de Utilização de um editor de imagens externoimagens externo

Para configurar um programa editor de imagem conforme o Para configurar um programa editor de imagem conforme o tipo de ficheiro, seleccionar tipo de ficheiro, seleccionar EDITAR – Preferências – EDITAR – Preferências – Tipos de arquivos/editoresTipos de arquivos/editores: : clicar no botão de adição (+) situado acima da lista de extensões;clicar no botão de adição (+) situado acima da lista de extensões; digitar a extensão do tipo de arquivo (incluindo o ponto no início da digitar a extensão do tipo de arquivo (incluindo o ponto no início da

extensão), ou diversas extensões relacionadas, separadas por extensão), ou diversas extensões relacionadas, separadas por espaços.espaços.

Page 15: 7 - Criação de Páginas Web DREAMWEAVER Pt.2. Criação e edição de links Podem ser criados diversos tipos de links num documento: Podem ser criados diversos

Utilização de um editor de Utilização de um editor de imagens externoimagens externo

Para adicionar um editor a um Para adicionar um editor a um determinado tipo de arquivo:determinado tipo de arquivo: seleccionar a extensão do tipo de arquivo na lista seleccionar a extensão do tipo de arquivo na lista

«Extensões»;«Extensões»; clicar no botão de adição (+) situado acima da lista de clicar no botão de adição (+) situado acima da lista de

editores;editores; seleccionar a aplicação a ser adicionada à lista seleccionar a aplicação a ser adicionada à lista

«Editores» na caixa de«Editores» na caixa de diálogo que for exibida. Escolher, por exemplo, o diálogo que for exibida. Escolher, por exemplo, o

ícone do aplicativo Excel e adicioná-lo à lista ícone do aplicativo Excel e adicioná-lo à lista «Editores».«Editores».