Guia Dreamweaver – Trabalhando com Tabelas (Parte V)

começar?

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

A tag

teve um caminho complicado ao longo da sua existência, no mundo do web design. Inicialmente, as tabelas serviriam para criar tabelas para mostrar dados científicos dentro de um website, com um estilo de folha de cálculo. Mas com o crescimento da web, os web designers viram nas tabelas outra utilidade, que foi a de utilizar as tabelas para fazer a correcta colocação dos elementos numa página web. No entanto nos dias de hoje isso já não existe novamente, pois com a utilização dos navegadores mais recentes como Internet Explorer, Google Chrome e Mozilla Firefox veio a utilização do CSS. A estilização através de CSS é a técnica mais avançada de estilização de uma página, bem longe do utilizado anteriormente com as tabelas. As páginas com tabelas são mais lentas e demoram muito mais tempo a carregar do que uma página criada com base no CSS. Além disso, as páginas criadas com base em tabelas são uma dor de cabeça para os dispositivos mais recentes, como o iPad e iPhone, com um ecrã de dimensões reduzidas. Nesta quinta parte do Guia Dreamweaver vamos-lhe demonstrar como utilizar as tabelas para o seu propósito original: mostrar dados em linhas e colunas.

1. BÁSICOS DAS TABELAS

As tabelas foram feitas para mostrar dados que ficam mais fáceis de entender quando demonstrados em tabelas. Uma tabela é uma grelha de colunas e linhas que juntos fazem uma tabela onde poderá esquematizar os dados para os apresentar mais facilmente. Uma linha normalmente apresenta dados relativos a um item específico, enquanto que uma coluna mostra dados relativos a vários itens, mas dentro do mesmo assunto.

2. INSERIR UMA TABELA

O processo de criação e inserção de uma tabela no seu documento HTML é bastante simples.

Primeiro clique no menu Inserir e de seguida em Tabela:

De seguida escolha como quer a sua tabela, definindo o número de colunas e linhas, a largura e o aspecto. De seguida Clique em Ok:

Neste momento já tem a sua tabela criada!

3. EDITAR TABELAS

Se você for um usuário avançado e entende como editar código HTML, a edição de uma tabela também pode ser feita pelo código. Para isso clique em Código no separador e de seguida vá no código da tabela e edite ao seu gosto.

Se não souber editar código HTML, pode alterar as tabelas através do modo gráfico do Dreamweaver. Depois de seleccionar a uma coluna, uma linha ou a tabela inteira, procure o menu na parte de baixo do programa e edite as configurações que pretender:

Tabela:

Linha:

Coluna:

4. ADICIONAR E REMOVER CÉLULAS

Após a criação da tabela, é possível adicionar e remover células da mesma. Este à semelhança dos outros processos, é bastante simples também. Para isso, clique com o botão do lado direito do rato em uma célula da tabela onde quer inserir ou remover, e de seguida vá a Tabela e terá ao seu dispôr todas as operações para fazer na tabela, seja adicionar ou remover células.

5. MESCLAR OU DIVIDIR CÉLULAS

Também é possível mesclar células, isto é útil quando se pretende ter uma célula mais larga ou existe efectivamente a necessidade de excluir uma célula da tabela. Para isso, basta seleccionar duas ou mais células da sua tabela e clicar com o botão do lado direito do rato, ir a Tabela e de seguida a Mesclar Células.

Para dividir células, basta seleccionar uma célula que tenha sido mesclada anteriormente e seguir os passos, botão do lado direito do rato, Tabela e de seguida em Dividid célula.

6. IMPORTAR DADOS

Embora não seja um processo fácil de concluir dentro do que se pretende, é possível importar dados para as suas tabelas. Isto é feito chamando um ficheiro externo onde estão os dados, e depois é criada uma nova tabela com os dados inseridos. Para importar os dados clique em Arquivo, Importar, Dados tabulares:

De seguida seleccione o ficheiro de dados e defina os campos da tabela:

E já está, a sua tabela irá ser criada. No entanto certamente irá necessitar de algumas alterações da sua parte, para mostrar os dados de acordo com o pretendido.

ESTÁ A ACOMPANHAR?

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.

Abraço e até já!

Read more »

Posted in: Aulas Tutorias,Tutoriais

Guia Dreamweaver – Como Começar? (Parte IV)

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 quarta parte do Guia Dreamweaver, vamos-lhe mostrar como perceber e trabalhar com imagens dentro desta aplicação. Está pronto para começar?

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

A velha máxima que diz que uma imagem vale mais que mil palavras nunca fez tanto sentido como nos dias de hoje. Numa altura em que a web se baseia maioritariamente em imagens, criações de alta qualidade com criatividade e muita inspiração são uma constante numa era digital em que uma imagem vale cada vez mais. Que o digam os designers desta era  que constroem as suas páginas web baseadas maioritariamente em imagens, criando um efeito visual fantástico e atrativo para os visitantes. É isso que se pretende numa página web, que o visitante goste do que vê e volte mais tarde, volte amanha, depois de amanhã e por aí adiante. Se você não é tão adepto do uso de imagens com tanta frequência, continuará a necessitar de saber trabalhar com elas em Dreamweaver e neste Guia Dreamweaver – Como Começar (Parte IV) vamos-lhe indicar como o fazer correctamente.

1. ADICIONAR IMAGENS

Se é da velha escola gosta de escrever o seu código manualmente, uma demonstração de conhecimento e natureza pela programação web. Para os novatos que querem adicionar imagens manualmente, o processo é simples, utilizando a tag :

1	<img src="fonte_da_sua_imagem.jpg">

A tag por natureza indica ao navegador que estamos a inserir uma imagem, e a propriedade “src” indica o caminho para a imagem. É um processo simples que não rouba muito tempo.

Se pretender inserir uma imagem através dos menus, escolha uma zona da sua página web onde quer inserir a imagem e de seguida clique no menu Inserir -> Imagem. Note que os formatos WEB são .GIF, .JPG e .PNG

Depois de escolher a imagem em questão, clicar em OK.

2. ADICIONAR UM POSICIONADOR DE IMAGENS

É possível adicionar imagens utilizando também um posicionador de imagens. Um posicionador de imagens é nada mais nada menos do que um sítio onde você poderá colocar a imagem, um género de divisória.

Para adicionar um posicionador de imagens, clique em Inserir -> Objetos de Imagem -> Alocador de espaço de imagem.

Depois irá abrir uma janela onde irá inserir alguns dados: Nome do posicionador, largura e altura, cor e texto alternativo. Preencha de acordo com o necessário e de acordo com a sua preferência. Clique em OK para continuar.

Neste momento já temos o nosso posicionador de imagem criado.

O próximo passo é colocar uma imagem. Para inserir uma imagem, vá até ao campo “Orig” nas propriedades e clique na pasta para procurar o ficheiro.

Seleccione o ficheiro e clique em OK.

O posicionador de imagem será ajustado automaticamente de acordo com o tamanho da imagem. Se pretender pode adicionar um link no campo “Link” por baixo do campo “Orig”.

3. IMAGEM DE SOBREPOSIÇÃO

Uma imagem de sobreposição é uma imagem que será substituída por outra mediante uma condição. São especialmente usadas para botões, em que quando o rato passa por cima, a imagem é substituída por outra instantaneamente, criando a ilusão de estar a clicar num botão real. No entanto a sua utilização não se prende somente a esse caso, podendo ser utilizada sempre que necessitar ou quiser trocar uma imagem por outra. Outro exemplo em que pode ser utilizada esta técnica é em páginas web de lojas, você tem uma imagem de um produto e quando o visitante passa com o rato em cima da imagem do produto, você troca a imagem por outra igual mas com um texto a dizer “Compre agora!”. Existem variadíssimas opções para utilizar as imagens de sobreposição. Para utilizar, siga o exemplo abaixo:

Neste exemplo vamos apenas trocar a imagem da Escola Criatividade pela imagem da Escola Dinheiro quando o rato passar por cima.

Primeiro passo é ir no menu Inserir -> Objetos de Imagem -> Imagem de Sobreposição

De seguida preencha os campos de acordo com a sua preferência, indicando qual a imagem original e qual a que vai sobrepor. Clique OK

E já temos uma sobreposição de imagens feita com sucesso. Para ver o resultado prima F12, e se ainda não guardou o ficheiro, guarde-o, é um passo necessário.

Eis o resultado:

ESTÁ A ACOMPANHAR?

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.

Abraço e até já!

Read more »

Posted in: Aulas Tutorias,Tutoriais

Home > Tutoriais > Guia Dreamweaver – Como Começar? (Parte III) 13 Guia Dreamweaver – Como Começar? (Parte III)

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!

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.

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 , 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 amigofreelancer 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 deDocument-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á!

Read more »

Guia Dreamweaver – Como Começar? (Parte II)

Ao longo da evolução dos últimos anos, o Dreamweaver tem acompanhado o ritmo e tem-se actualizado de acordo com as necessidades actuais. De momento estamos a par com a versão CS5 do Adobe Dreamweaver, e esta versão não fugiu à regra, incluindo novas funcionalidades que irão tornar o desenvolvimento de websites uma tarefa menos complicada. Dreaweaver é um programa completo para o desenvolvimento e gestão de websites, que trabalha com tecnologias como HTML, XHTML, CSS, Javascipt e PHP, entre outros.

Nesta segunda parte do Guia Dreamweaver, vamos-lhe continuar a mostrar como dar os primeiros passos na criação da sua página web. Está pronto? Vamos a isso!

Endereço de Email:

 

1. COMO ADICIONAR TEXTO AO SEU DOCUMENTO

Uma página web é considerada um documento, e é assim que vamos chamar a cada página que vamos criar – um documento. Para adicionar texto a um documento o processo é bastante simples – No modo Design basta clicar com o cursor onde quer escrever e começar a escrever.

Para formatar o texto adequadamente, poderá utilizar o menu Formatar que se encontra na barra de menus.

Vamos efectuar uma formatação ao título que está seleccionado, criando uma nova classe. Para isso aceda em Formatar -> Estilos CSS -> Novo

Aqui iremos primeiro dar o nome ao nosso selector e de seguida iremos definir as opções de formatação. Para efeitos de demonstração, demos o nome “nome_do_selector”, sinta-se livre para dar um nome ao seu gosto. Clique em OK para continuar.

Agora iremos definir as opções de formatação da classe recém criada “nome_do_selector”. As opções seleccionadas e/ou inseridas foram ao nosso gosto, sinta-se livre para definir as suas próprias opções e explore o programa!

• Tipo de letra: Arial
• Tamanho: 24px
• Estilo: Normal
• Negrito
• Transformação: Maiúsculas
• Cor: Vermelho

Seleccione o texto a aplicar a classe e seleccione a classe no menu de Propriedades.

E o resultado, como esperado!

Este é um processo bastante simples, mas a longo termo e com a criação de vários documentos, com vários estilos você iria ficar perdido no meio de tanta formatação. Então é aqui que entram as folhas de estilo, mais conhecidas como CSS – Cascading Style Sheets. Não se aflija, a criação de uma folha de estilos é simples e poupar-lhe-à imensas dores de cabeça, além de lhe poupar tempo. Como diz o ditado “De pequenino se torce o pepino”, então porque não começar a utilizar as folhas de estilo desde o início?

2. COMO CRIAR UMA FOLHA DE ESTILOS

Como referimos, a criação de uma folha de estilos é um processo simples, quando comparado com a confusão que iria criar ao não criar uma folha de estilos para o ajudar. O primeiro passo é criar um novo documento CSS.

Guarde o documento na pasta do seu website como “style.css”. Depois de criado e guardado, é altura de ligar os documentos. Isso pode ser feito manualmente ou automaticamente. Para fazer manualmente insira o seguinte código dentro da tag :

1	"style.css" rel="stylesheet" type="text/css" />

Para fazer automaticamente, no painel CSS que se encontra do lado direito da aplicação Adobe Dreamweaver clique com o botão do lado direito e de seguida clique em “Anexar folha de estilos”.

De seguida, clique em procurar, seleccione o ficheiro style.css e clique em OK e novamente OK.

Agora pode verificar que os documentos já se encontram ligados:

Antes de prosseguirmos, no seu documento index remova a formatação inserida no título. Para isso basta ir ao código e apagar o seguinte excerto:

1 2 3 4 5 6 7 8 9 10

E apagar o seguinte dentro da tag do título:

1	class="nome_do_selector"

Agora não existem formatações no nosso documento. É altura de as definirmos na nossa folha de estilos!

NOTA: A partir do momento em que os documentos estão ligados, você tem acesso ao style.css apartir de qualquer documento a que ele esteja ligado. É possível alternar entre o código fonte do documento e o ficheiro de estilização apartir de um menu que fica abaixo dos separadores dos documentos:

3. CRIANDO ESTILOS NA SUA FOLHA DE ESTILOS

Para definir estilos para os elementos do seu documento irá necessitar de efectuar poucas operações. A primeira é saber qual o elemento que irá estilizar, e neste documento iremos estilizar o h1 e o p, relativos ao título e ao texto que estão no nosso documento. Assim, iremos proceder primeiro à estilização do título, e iremos replicar o estilo que aplicámos anteriormente. No seu documento style.css insira o seguinte código:

1 2 3 4 5 6 7 8

h1 {     font-family: Arial, Helvetica, sans-serif;     font-size: 24px;     font-style: normal;     font-weight: bold;     text-transform: uppercase;     color: #F00; }

Agora, no seu documento todos os títulos que estiverem com a tag h1 irão ser formatados de acordo com o especificado na sua folha de estilos – Imagine que em todo o seu website tem 30 títulos h1, utilizando uma folha de estilos só necessitou de especificar a estilização 1vez, de outra forma teria de o fazer 30 vezes, fácil não é?

Adobe Dreamweaver inclusive lhe dá a indicação de quais os estilos existentes na sua folha de estilos, no painel CSS do lado direito da aplicação. De momento podemos já confirmar que existe uma estilização para a tag h1:

É altura de estilizar o nosso parágrafo. Desta vez vamos utilizar uma classe, para estabelecer isso basta por um ponto “.” a seguir a qualquer elemento. Desta forma você não estará a estilizar todos os elementos, mas sim apenas aqueles que quiser, especificando a classe. Vamos nomear a classe como “principal” e inserir alguns itens de estilização:

1 2 3 4 5 6 7

p.principal {     font-family:Verdana, Geneva, sans-serif;     font-size:12px;     color:#009;     font-weight:bold;   }

O seu ficheiro style.css deverá estar idêntico ao seguinte:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

/* Títulos H1 */ h1 {     font-family: Arial, Helvetica, sans-serif;     font-size: 24px;     font-style: normal;     font-weight: bold;     text-transform: uppercase;     color: #F00; }   /* Parágrafo principal */ p.principal {     font-family:Verdana, Geneva, sans-serif;     font-size:12px;     color:#009;     font-weight:bold;   }

Note que inserimos comentários para organizar o documento. Não utilize em demasia os comentários, pois podem tornar confuso o seu documento!

Agora vamos atribuir a estilização ao nosso parágrafo principal. Para isso seleccione o texto, e no menu Propriedades clique no menu drop-down das Classes e seleccione a classe “principal.

E já está a estilização a funcionar!

Aprendeu os passos necessários para criar uma folha de estilos, ligá-la a documentos, criar estilizações para diferentes elementos e criar classes!

ESTÁ A ACOMPANHAR O GUIA DREAMWEAVER?

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á!

Read more »