Aula 2 -Links - Rollover image - Tabelas. Criando Links Criar links é muito fácil, basta selecionar o texto ou imagem que deseja transformar em link e.

Aula 2

-Links

- Rollover image

- Tabelas

Criando Links

• Criar links é muito fácil, basta selecionar o texto ou imagem que deseja transformar em

link e na barra de propriedades indicar o endereçamento.

Selecione o texto

Clique na pasta amarela e encontre a página que deseja que seja link.

Caso queira uma página externa, você precisará digitar o endereço completo, exemplo: http://www.uol.com.br

Trabalhando com Image Map

• Este é um recurso que permite escolher áreas definidas de uma determinada imagem e vinculá-las a diferentes URLs (páginas).

• Para criar um mapa de imagens, primeiramente selecione a imagem que deseja trabalhar, clicando no ícone árvore da barra de objetos.

• Selecione a imagem e procure a opção Map na barra e propriedades.

Opção Image Map

Especifica um nome para mapa

Cada figura representa a forma geométrica que deseja para desenhar as regiões de suas imagens (retângulo, elipse e polígono irregular)

• Escolha a opção de desenho e selecione a parte da imagem desejada.

Área selecionada

Espaço para indicar o link de destino

Especifica destino, alvo da página se houver, principalmente se estiver

usando frames

Texto exibido quando o usuário passar o ponteiro do mouse sobre a região

Rollover Image

• Recurso que permite a troca de imagens quando o ponteiro do mouse estiver sobre uma delas. Efeito interessante para se usar em menus.

• Selecione a opção na barra de objetos.

A janela Rollover image é aberta, contendo:

•Image Name: especifica o nome para a imagem.

•Original Image: Define a imagem original que aparecerá ao abriro navegador, clique em browse para seleciona a imagem.

•Rollover Image: Define a imagem de troca, aquela que aparece ao se passar o mouse na imagem original. Clique em browse para selecioná-la.

•Preloa Rollover Image: as imagens ser´~ao pré-carregadas pelo navegador.

• When Clicked, Go to URL: Especifica o link que a imagem apontará (caso deseje criar um link).

• Obs.: Procure escolher imagens com tamanhos semelhantes para não haver problemas na hora de se realizar o efeito.

Tabelas• Há duas formas de se desenhar tabelas:

• Standart View

• Layout View

Standart View

Selecione o botão Desenhar tabelas na barra de objetos

• Abrirá uma janela de configuração de tabela

• Rows: Define o número total de linhas na tabela;• Columns: Define o número total de colunas;• Cell Padding: Espaço entre o conteúdo da célula e sua

linha;• Cell Spacing: Espaço entre cada célula;• Width: Largura da tabela (pixels ou porcentagem);• Border: Largura da borda.• Obs.: Caso não queira bordar, espaçõs etc, dgite o valor 0.

• Desenhada a tabela, é possível formatar algumas características através da barra de propriedades:

• Table Name: Nome da Tabela;• Rows: número de linhas;• Columns: número de colunas;• W: largura da tabela (pixels ou procentagem);• H: altura da tabela (pixels ou procentagem);• CellPad: espaçamento do conteúdo e a parede da tabela;• CellSpace: espaçamento entre colunas;• Align: Alinhamento da Tabela;• Border: largura da boda;• Bg: Cor de fundo da tabela;• Brdr color: cor da borda;• Bg Image: Especifica uma imagem de fundo

Limpa a altura das linhas. O Campo H é

limpo.

Converte a largura da tabela em

pixels.

Limpa a largura das

colunas. Corresponde ao campo W.

Converte a largura da tabela para o valor em porcentagem.

Trabalhando com uma célula

• Clique dentro da célula que deseja trabalhar

• A barra de propriedades fornece algumas opções de

configuração da célula.

Alinhamento Vertical e Horizontal

do conteúdo

da célula.

Selecionada esta opção, não

ocorrerá quebra automática de

linha, dependendo do

conteúdo.

Formata a opção selecionada com

um cabeçalho

Opção para transformar duas células em uma ou quebrar uma

em duas.

Usando o Layout View

O modo Layout View fornece um modo de exibição especial que se destina a ajudar na construção e

edição de tabelas, fornecendo uma forma fácil de utilizar e compreender telas em forma de grade, que aceleram o processo de edição de tabelas e

proporcionam maior liberdade para desenhá-las.

• Para selecioná-lo, clique na opção Layout View, na barra de objetos

Botão Standart View Botão Layout View

Obs.: Talvez apareça uma mensagem descrevendo como utilizar os botões de Layout. Clique em Don´t show this message again.

Ao selecionar a opção Layout View, algumas funções da barra de propriedades ficam desabilitadas.

• Para desenhar a tabela, deve-se selecionar na barra de objetos as opções Draw Layout Table (para se

desenhar tabela) e Draw Layout Cell (para se desenhar uma célula).

Botão Draw Layout Cell

Botão Draw Layout Table

Obs.: Para iniciar o desenho, deve-se selecionar primeiro a opção Draw Layout Table. Caso deseje desenhar várias tabelas na mesma página, desenhe primeiro uma que ocupe o espaço da página inteira.

A barra de propriedades apresenata as seguintes opções ao se selecionar a tabela:

• Opção Fixed – o valor marcado séra em pixel.• Autostreched – a largura da tabela será variada

conforme o tamanho da tela do usuário.

Ao selecionar a tabela, abre-se uma caixa para:

• Add Spacer Image; Adicionar uma imagem a tabela. A imagem serve somente para que o layout da tabela permaneça sempre o mesmo;

• Make Column Autostretch: Configurar a imagem para configurar o layout da coluna.

Formatando Tabela

• O Dreamweaver fornece uma série de formatações pré-definidas para serem aplicadas.

• Para usá-las, a opção standart View deve estar selecionada.

• Selecione a tabela e no menu, clique na opção Commands – Format Table.

• Clique na opção de tabela desejada e utilize as opções abaixo para configurar algum atributo que deseja.

• Rows color: Define as cores da linha. Há três itens: First (cor da primeira linha), Second e Alternate (define as duas cores que irão se alternar ao longo da tabela).

• Top Row: Define as características da linha do topo (alinhamento, tipo de texto e cor de fundo).

• Left Col: Define as propriedades da coluna da esquerda (Alinhamento, tipo de texto).

• Border: Valor da borda na tabela• Options: Define aplicação da tag <td>(coluna) ao invés

do <tr>(linha).

Ordenando Tabela• Recurso utilizado para ordenar dados inseridos em uma tabela,

exemplo: oordem alfabética.

• Va em Commands > Sort Table

Define qual coluna de ordenada

Define como os dados serão ordenados (numericamente, alfabeticamente/ Ascendente. Descendente.)

Configurar uma nova coluna

Configurar a configuração a partir da primeira linha e

manter os atributos de formatação da tabela.