06 - Links

Com o nome de hiper-ligao em portugus, um link geralmente um pedao de texto ou uma imagem que tem a particularidade de quando clicado no browser, normalmente ir procurar e carregar uma nova pgina, um novo recurso... um link pode ser muito mais do que isto, mas no vale pena complicar agora! Para se produzir um link no Dreamweaver, tudo o que se tem a fazer selecionar um pedao de texto ou uma imagem e indicar ao programa qual a pgina-destino. Tambm se dever indicar a rea-destino onde a nova pgina ir aparecer, mas isto ser explicado um pouco mais adiante.

Parte 1 - Preparando terreno

Para podermos fazer o nosso primeiro link entre pginas no index.html temos de ter pelo menos mais uma pgina. Por isso cria um novo ficheiro (New File) na directoria Design com o nome home.htm (explicado no captulo 4) Abre a nova pgina home.htm (dois cliques no ficheiro na janela de projecto) e insere um texto semelhante a este:

Pgina Home
Este o texto de entrada. xoxoxox xo xox oxoxo xo xoxoxox oxox xoox xoxoxox ox ox xo ox xoxoxo xoxoxoxox xo xox oxoxo xo xoxoxox oxox xoox xoxoxox ox ox xo ox xoxoxo xoxoxoxox xo xox oxoxo xo xoxoxox oxox xoox xoxoxox ox ox xo ox xoxoxo xoxoxoxox xo xox oxoxo xo xoxoxox oxox xoox xoxoxox ox ox xo ox xoxoxo xoxoxoxox xo xox oxoxo xo xoxoxox oxox xoox xoxoxox ox ox xo ox xoxoxo xoxoxoxox xo xox oxoxo xo xoxoxox oxox xoox xoxoxox ox ox xo ox xoxoxo xoxoxoxox xo xox oxoxo xo xoxoxox oxox xoox xoxoxox ox ox xo ox xoxoxo xo. Fim.

Agora clica com o boto direito numa rea vazia da pgina e no menu que aparece clica "Page Properties...", a ltima opo ou Menu de topo da Pgina > Modify > Page Properties... [control + j]

No quadro que surge, d-lhe o Title "Design Pgina Principal" (sem aspas) e escolhe para cor de Background um azul claro. Clica OK.

"

Pgina Home Este o texto de entrada. xoxoxox xo xox oxoxo xo xoxoxox oxox xoox xoxoxox ox ox xo ox xoxoxo xoxoxoxox xo xox oxoxo xo xoxoxox oxox xoox xoxoxox ox ox xo ox xoxoxo xoxoxoxox xo xox oxoxo xo xoxoxox oxox xoox xoxoxox ox ox xo ox xoxoxo xoxoxoxox xo xox oxoxo xo xoxoxox oxox xoox xoxoxox ox ox xo ox xoxoxo xoxoxoxox xo xox oxoxo xo xoxoxox oxox xoox xoxoxox ox ox xo ox xoxoxo xoxoxoxox xo xox oxoxo xo xoxoxox oxox xoox xoxoxox ox ox xo ox xoxoxo xoxoxoxox xo xox oxoxo xo xoxoxox oxox xoox xoxoxox ox ox xo ox xoxoxo xo.

"
Este ser o aspecto mais ou menos de como poder ficar a pgina! Salva a pgina home.htm : Menu de topo da Pgina > File > Save ou usa as teclas de atalho [ control + s ] Fecha esta pgina por agora.

Parte 2 - Activando o primeiro Link

Abre a pgina index.html e seleciona com o rato, o pedao de texto "Clicar Aqui para Entrar!". Na janela de propriedades, encontra-se entre "Link" e um cone amarelo uma pequena "mira" redonda, certo?

Clica e arrasta a mira - dela sair uma seta que serve para indicar a pginadestino do nosso link! Puxa a seta para cima do ficheiro home.htm situado na janela de projecto! O link est feito automaticamente! Agora podes salvar a pgina index.html (control + s) e test-la no browser. Se tudo correu bem, o link dever funcionar perfeitamente.

Como disse, qualquer pedao de texto ou imagem pode ser um link. Experimenta fazer daquela imagem da estrela na pgina index.html um link igual ao do texto, um link para home.htm. Assim, quem visitasse a pgina teria duas opes lgicas de entrada, ou clica no logtipo (!) ou clica no textolink. No te esqueas de salvar sempre, e se j tens o browser aberto nessa pgina, basta primir F5 no browser para o refrescar e ver as alteraes feitas.

Agora que est feito o primeiro link, falta apenas explicar a importncia da zona Target na janela de propriedades:

Na pgina index.html clica no texto "Clicar Aqui para Entrar!" que neste momento um link. No necessrio selecion-lo todo, por agora basta um clique e na janela de propriedades a zona Target ilumina-se: o programa est agora espera que insiras uma rea-destino para a pgina que ir ser aberta pelo link. Esse destino ser uma pgina ou uma rea da pgina denominada frame (explicado mais frente). Clicando no triangulo preto invertido um pouco direita do Target faz aparecer as opes existentes por default para esta funo. Estes nomes esto reservados apenas para esta funo, por isso para serem facilmente detectados, contm um underscore ( _ ) como prefixo: _blank : abre a pgina destino numa nova janela sem nome. Ideal para quando fazemos links para fora do nosso site, e no queremos que janela com o nosso site seja suprimida. _parent : abre a pgina destino num frame imediatamente anterior quele em que o link se encontra. Isto s ter lgica quando se percebe o que um frame, o que explicado no captulo seguinte. Se o sistema no encontra um frame anterior, abre a pgina na janela (frame) onde se encontra o link. _self : abre a pgina destino no mesmo frame ou janela onde se encontra o link. Se nada for indicado em Target, o sistema usa sempre esta opo por default! _top : abre a pgina destino em cima de toda a janela onde se encontra o link, deste modo passando por cima e removendo quaisquer frames que existam nessa janela (isto dos frames est a aquecer... eheheheh!)

Na pgina index.html clica no link "Clicar Aqui para Entrar!". No necessrio selecion-lo todo, e na janela de propriedades escolhe como Target a opo "_top" Agora podes salvar a pgina index.html (control + s) e test-la no browser. Se tudo correu bem, o link dever funcionar perfeitamente, passando da primeira pgina para a segunda.

Por agora no mexemos mais nos links... podes fechar essa pgina. Ah, se por acaso ao fechar todas as pginas de trabalho, o Dreamweaver fizer aparecer um aviso tipo "agora que todas as janelas esto fechadas, deseja sair do programa?" diz que no, e manda-o dar uma curva