A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

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.

Apresentações semelhantes


Apresentação em tema: "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."— Transcrição da apresentação:

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 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:

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

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.

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

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.

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

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 (coluna) ao invés do (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.


Carregar ppt "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."

Apresentações semelhantes


Anúncios Google