Dreaweaver é um programa completo para o desenvolvimento e gestão de websites, que trabalha com tecnologias como HTML, XHTML, CSS, Javascript e PHP, entre outros. Um detalhe importantíssimo que Dreamweaver tem, é que se você começou a fazer o seu website em um outro programa qualquer, não terá de começar de novo se pretender mudar para Dreamweaver – O programa não irá destruir/alterar o código que você criou! Nesta terceira parte do Guia Dreamweaver, vamos-lhe mostrar como perceber e trabalhar com links dentro desta aplicação. Está pronto para começar?

Nesta terceira parte do Guia Dreamweaver, vamos-lhe continuar a mostrar como dar os primeiros passos na criação da sua página web. Quer receber este e outros conteúdos no e-mail? Insira o seu e-mail abaixo e subscreva!

Endereço de Email:

Não perca os artigos anteriores:

Um link é um género de ponte de ligação entre páginas, que podem ser vistas como pontes reais entre ilhas, cuja ligação é feita através de um simples clique. Este processo é uma invenção muito poderosa, pois toda a internet está ligada não só, mas maioritariamente por links. Os links além de poderem ser feitos para ligar documentos dentro de uma página, podem também linkar documentos e outras páginas, mesmo que estas estejam alojadas num servidor do outro lado do mundo – na internet e distância não é um problema, tudo está ao alcance. Embora a criação de um link seja uma tarefa super básica, pode ser enganador pois existem vários tipos de links.

Adobe Dreamweaver CS5

1. PERCEBA OS LINKS

O que são links? Tecnicamente, são um trecho de código que dá uma direcção ao browser para onde ele deverá seguir, de uma página para outra. Como referimos, o que torna os links tão poderosos tem a ver com a distância que eles conseguem cobrir, que em teoria é todo o planeta. Nos bastidores, aquilo que faz os links funcionar é a tag chamada de âncora <a>, que podem ser criados em 3 diferentes tipos: absolute, document-relative e root-relative.

2. LINKS ABSOLUTOS

Os links absolutos funcionam de certa forma da seguinte maneira: Quando alguém lhe quer enviar uma carta, necessita da sua morada completa, e vamos utilizar uma fictícia, Rua Pedro Elmer, 417 | Cascatinha, Petrópolis, Estado do Rio de Janeiro, Brasil. Independentemente de onde o seu amigo freelancer estiver no Brasil, se ele escrever essa morada num envelope, a carta vai ter à sua casa, pois é um endereço único, tal como os links absolutos. Passando esta teoria para a prática nos links, cada página web tem um endereço único, chamado de URL (Uniform Resource Locator). Se abrir o seu browser e navegar até http://www.escolacriatividade.com/livros/ estará a navegar num link único dentro da Escola Criatividade. Assim, podemos constatar que o URL é um link absoluto, que define o endereço completo e único para uma página web. Para fazer ligações do seu website para outros, terá obrigatoriamente que utilizar um link absoluto, pois esta é a única forma de o browser chegar à página pretendida. No entanto, se aquilo que pretende é fazer ligações dentro do seu website, irá necessitar de utilizar links relacionados com os documentos, chamados de Document-Relative Links.

3. LINKS RELATIVOS AOS DOCUMENTOS

Os Document-Relative Links são aqueles que se utilizam dentro do seu website. Como a página é a mesma, não existe a necessidade de utilizar links absolutos para linkar para documentos dentro do mesmo website. Pegando novamente no exemplo da morada citada acima, e imaginando uma situação em que você convida o seu vizinho da frente para jantar em sua casa, não necessita de lhe dar a sua morada, basta-lhe dizer para atravessar a rua. Obviamente que esta situação seria impossível se você convidasse alguém noutro ponto do país para jantar em sua casa, e lhe dissesse para atravessar a rua. Então, dentro do seu website você poderá utilizar esta técnica, informando o browser que a localização do documento do link em questão, é dentro do próprio website.

Ainda dentro dos Document-Relative Links existem duas variações:

  • 1º caso

Se a página à qual estiver a ligar estiver dentro da mesma pasta, o link é apenas o nome do ficheiro. “paginas.html”

  • 2º Caso

Se a página à qual estiver a ligar estiver dentro de uma pasta diferente, o link terá de ter o caminho até à pasta do ficheiro, seguido do nome do ficheiro. “/artigos/novembro/artigo.html”

Felizmente Adobe Dreamweaver facilita imenso o trabalho com os Document-Relative Links, pois se você alterar um ficheiro de sítio, Dreamweaver re-escreve o novo caminho para o ficheiro, evitando erros de ligação e problemas dentro do website.

4. LINKS RELATIVOS À ORIGEM

Os Root-Relative Links descrevem a forma como se muda de uma página para outra dentro do mesmo website à semelhança dos Document-Relative Links. No entanto, existe uma diferença que reside no facto de que os Root-Relative Links são relativamente à origem, a pasta base do seu website chamada de root. Dentro de um website, você pode dar as indicações de linkagem de forma diferente e obter o mesmo resultado, e os Root-Relative Links são uma das formas. A utilização deste método é útil quando se pretende dar indicações de linkagem apartir da base do seu website. No entanto, se você utilizar o Dreamweaver para construir o seu website não irá necessitar de se preocupar com isso, pois tem uma funcionalidade que automaticamente actualiza os links e não deixa haver links quebrados no seu website. Este é um dado cada vez mais importante, não só em termos do funcionamento do seu website, como também em termos de SEO.

Nota: Os Root-Relative Links não irão funcionar no seu computador, pois a linkagem é refente ao root do servidor web.

Não perca a continuação deste artigo, deixe o seu feedback com um comentário, subscreva a nossa newsletter gratuita e receba os próximos conteúdos diretamente na sua caixa de email:

Endereço de Email:

Abraço e até já!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. helio marques de almeida
    12 de abril de 2012

    gostaria de receber mais dicas no dreamwawer



  2. helio marques de almeida
    12 de abril de 2012

    muito bom, a matéria, gostaria que me mandassem mais dicas


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz