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

Slide 1 Aula 2 -Links - Rollover image - Tabelas Slide 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 Slide 3 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://wwwuolcombr Slide 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 Slide 5 Selecione a imagem e procure a opção Map na barra e propriedades Opção Image Map Slide 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) Slide 7 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 Slide 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çãona barra de objetos Slide 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 Slide 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 Slide 11 Tabelas Há duas formas de se desenhar tabelas: Standart View Layout View Slide 12 Standart View Selecione o botão Desenhar tabelas na barra de objetos Slide 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 Slide 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 Slide 15 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 Slide 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 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 Slide 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 Slide 18 Para selecioná-lo, clique na opção Layout View, na barra de objetos Botão Standart ViewBotã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 Slide 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 Slide 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 Slide 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 Slide 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 Slide 23 Clique na opção de tabela desejada e utilize as opções abaixo para configurar algum atributo que deseja Slide 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 (coluna) ao invés do (linha) Slide 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