aula 2 -links - rollover image - tabelas. criando links criar links é muito fácil, basta...
TRANSCRIPT
![Page 1: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062418/552fc117497959413d8c8796/html5/thumbnails/1.jpg)
Aula 2
-Links
- Rollover image
- Tabelas
![Page 2: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062418/552fc117497959413d8c8796/html5/thumbnails/2.jpg)
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.
![Page 3: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062418/552fc117497959413d8c8796/html5/thumbnails/3.jpg)
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
![Page 4: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062418/552fc117497959413d8c8796/html5/thumbnails/4.jpg)
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.
![Page 5: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062418/552fc117497959413d8c8796/html5/thumbnails/5.jpg)
• Selecione a imagem e procure a opção Map na barra e propriedades.
Opção Image Map
![Page 6: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062418/552fc117497959413d8c8796/html5/thumbnails/6.jpg)
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)
![Page 7: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062418/552fc117497959413d8c8796/html5/thumbnails/7.jpg)
• 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
![Page 8: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062418/552fc117497959413d8c8796/html5/thumbnails/8.jpg)
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.
![Page 9: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062418/552fc117497959413d8c8796/html5/thumbnails/9.jpg)
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.
![Page 10: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062418/552fc117497959413d8c8796/html5/thumbnails/10.jpg)
• 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.
![Page 11: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062418/552fc117497959413d8c8796/html5/thumbnails/11.jpg)
Tabelas• Há duas formas de se desenhar tabelas:
• Standart View
• Layout View
![Page 12: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062418/552fc117497959413d8c8796/html5/thumbnails/12.jpg)
Standart View
Selecione o botão Desenhar tabelas na barra de objetos
![Page 13: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062418/552fc117497959413d8c8796/html5/thumbnails/13.jpg)
• 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.
![Page 14: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062418/552fc117497959413d8c8796/html5/thumbnails/14.jpg)
• 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
![Page 15: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062418/552fc117497959413d8c8796/html5/thumbnails/15.jpg)
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.
![Page 16: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062418/552fc117497959413d8c8796/html5/thumbnails/16.jpg)
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.
![Page 17: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062418/552fc117497959413d8c8796/html5/thumbnails/17.jpg)
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.
![Page 18: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062418/552fc117497959413d8c8796/html5/thumbnails/18.jpg)
• 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.
![Page 19: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062418/552fc117497959413d8c8796/html5/thumbnails/19.jpg)
• 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.
![Page 20: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062418/552fc117497959413d8c8796/html5/thumbnails/20.jpg)
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.
![Page 21: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062418/552fc117497959413d8c8796/html5/thumbnails/21.jpg)
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.
![Page 22: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062418/552fc117497959413d8c8796/html5/thumbnails/22.jpg)
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.
![Page 23: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062418/552fc117497959413d8c8796/html5/thumbnails/23.jpg)
• Clique na opção de tabela desejada e utilize as opções abaixo para configurar algum atributo que deseja.
![Page 24: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062418/552fc117497959413d8c8796/html5/thumbnails/24.jpg)
• 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).
![Page 25: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062418/552fc117497959413d8c8796/html5/thumbnails/25.jpg)
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.