Upload
internet
View
109
Download
1
Embed Size (px)
Citation preview
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.