Aula 2

1. Aula 2 Links Rollover image Tabelas

2. 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.

3. 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 Selecione o texto

4. 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.

5. Selecione a imagem e procure a opção Map na barra e propriedades. Opção Image Map

6. 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)

7. Escolha a opção de desenho e selecione a parte da imagem desejada. Área selecionada Texto exibido quando o usuário passar o ponteiro do mouse sobre a região Espaço para indicar o link de destino Especifica destino, alvo da página se houver, principalmente se estiver usando frames

8. 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.

9. 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.

10. 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.

11. Tabelas • Há duas formas de se desenhar tabelas: • Standart View • Layout View

12. Standart View Selecione o botão Desenhar tabelas na barra de objetos

13. 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.

14. 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

15. Limpa a largura das colunas. Corresponde ao campo W. Limpa a altura das linhas. O Campo H é limpo. Converte a largura da tabela para o valor em porcentagem. Converte a largura da tabela em pixels.

16. 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. Selecionada esta opção, não ocorrerá quebra automática de linha, dependendo do conteúdo. Opção para transformar duas células em uma ou quebrar uma em duas. Formata a opção selecionada com um cabeçalho Alinhamento Vertical e Horizontal do conteúdo da célula.

17. 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.

18. 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.

19. 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.

20. 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.

21. 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.

22. 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.

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

24. 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).

25. 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.