Ensino I nterativo Universidade Anhembi Morumbi. Multimídia I

Transcrição

1 Ensino I nterativo Universidade Anhembi Morumbi Multimídia I Objetivo Apresentar os recursos básicos do Dreamweaver, conhecendo sua interface, suas ferramentas e seus recursos básicos. Tópicos 1. I ntrodução e interface 2. Documentos 3. Textos 4. Elementos básicos 1. Introdução e Interface O Macromedia Dreamweaver MX 2004 é uma ferramenta usada para agilizar a codificação dos códigos DHTML (Dynamic Hyper Text Markup Language), com o auxílio dos recursos do JavaScript, ASP, CSS e outras linguagens. I nterface Área de trabalho

2 M enu Contém todos os comandos do programa. Barra de I nserção Barra que pode variar o conteúdo pela escolha do usuário atalhos para os comandos mais usados. Barra de documento Define o tipo de visualização do documento na Área de trabalho. Contém uma área para a inserção do título do documento (Title). Á rea de Trabalho Local onde é construído o documento. P ainéis São blocos de comandos e ferramentas separadas por categorias específicas. Seletor de tags Barra exibida na área inferior da área de trabalho que exibe o tag utilizado no documento no local onde o desenvolvedor estiver editando. I nspetor de propriedades O painel mais utilizado durante o trabalho a cada ferramenta escolhida ele altera o seu conteúdo possibilitando a alteração das características do novo elemento atalho (Ctrl + F3). M enu

3 O menu contém todos os comandos do programa sendo subdividido por funcionalidade. File Abrir (Open) Salvar (Save) Importar (Import) ou seja, manipular o arquivo. Edit Comandos relativos a edição do documento copiar (Copy) cortar (Cut) colar (Paste), localizar (Find) selecionar (Select All) entre outras edições. View Comandos relacionados a visualização do documento réguas (rulers) formato código (Code) formato design (Design) esconder/exibir painéis, etc. I nsert Possibilita a inserção de elementos no documento como imagens, tabelas, formulários, links, etc. M odify Modificações nos elementos páginas, cor dos links, cor de fundo, imagem de fundo, entre outros. Text Possui comandos relativos a alteração dos textos como tipo de fonte (Font), estilo (Style), cor (Color), etc. Commands Comandos avançados. É possível limpar tags de HTML, criar álbum de fotografias, gerenciar as extensões instaladas, formatar ou ordenar tabelas, entre outros. Site Recursos relacionados ao gerenciamento do site transferir arquivos para o servidor, checar links, gerar relatórios, etc. W indow Contém os comandos relativos à janela. Contém acesso a todos os painéis do programa. Help Acesso aos arquivos e tutoriais de ajuda, além de informações sobre o software. Barra de I nserção Trata se de uma barra dinâmica, onde os comandos apresentados mudam de acordo com o tipo de elemento que se quer inserir. Para alterar o tipo basta clicar no primeiro item e trocar pelo item desejado.

4 Opções Common Comandos comuns ou mais usados: links, tabelas, data, imagem, etc. Layout Comandos relativos ao layout como tags. Forms Elementos para a construção de um formulário. Text Comandos para serem aplicados em textos. HTM L Comandos básicos de HTML como cabeçalhos e frames, entre outros. A pplication Comandos para a criação de aplicativos como inserção de um recordset, região repetida, etc. Flash Elements Permite a inserção de um filme flash. Favorites Barra especial onde o desenvolvedor pode inserir os elementos favoritos tendo uma barra "personalizada". A última opção Show as Tabs transforma a barra de inserção em painel (painel Insert) no formato de pastas. Para voltar ao formato de barra novamente clique no ícone presente na parte superior direita do painel e depois na opção Show as M enu.

5 Barra do Documento Contém comandos relativos ao próprio documento que se está trabalhando no momento. No canto superior esquerdo é apresentado o nome do documento como foi salvo. Os itens seguintes são: Code Permite a visualização do código fonte. Split Divide a área de trabalho em duas partes exibindo o código juntamente com o conteúdo. Design Exibe a página com seus elementos gráficos, ou seja, como deverá ser vista por que acessar o site. Title Define o título do documento que será exibido na parte superior do navegador quando a página for acessada. Check Errors Verifica a ocorrência de erros no documento. File M anagement Gerenciador de arquivos. Para enviar ou obter um arquivo de um servidor remoto. Para acessar outros comandos presentes nesta barra clique com o botão direito do mouse sobre o nome do documento no canto superior esquerdo. P ainéis

6 Os painéis são blocos de comandos a serem aplicados no documento. São divididos em categorias. Podem ser expandidos ou fechados através de um clique no nome do painel. Podem ser carregados através do menu WINDOW onde também podem ser escondidos / exibidos. W indow > Hide P anels ou Show P anels. I nspetor de P ropriedades Um painel especial que a princípio fica na parte inferior da área de trabalho e exibe as propriedades de cada elemento selecionado no documento. Barra Standard (P adrão) Barra oculta. Para exibi la clique com o botão direito do mouse sobre a Barra de Inserção ou sobre a Barra do Documento. Escolha a opção Standard. Esta barra possui comandos padrão de qualquer programa. É possível criar um novo documento, abrir um documento existente, salvar um arquivo, cortar, copiar, colar, etc.

7 2. Documentos O documento é a própria página do site. Esta página pode ser salva em diversas extensões, como.html,.asp,.htm,.php, entre outras. Para criar um novo documento: File > New ou Ctrl+ N. Abre se a janela New Document. Esta janela é dividida em quatro partes: Category Llista os tipo de páginas que podem ser criadas Basic P age Subcategoria. Conforme o item escolhido em category diferentes opções serão exibidas. P review Pré visualização do tipo de documento a ser criado. Apenas alguns tipos de documentos possuem preview. Description Descrição do tipo de documento a ser criado. P ropriedades do Documento Para abrir a janela de propriedades do documento:

8 M odify > P age P roperties ou Ctrl+J ou clique com o botão direito do mouse em qualquer lugar na página e escolha a opção P age P roperties. Categorias A ppearance: Define a aparência do documento. P age font: Define a fonte que a página utilizará. Padrão = Times New Roman. Size: Especifica o tamanho da fonte. Text Color: Define a cor do texto. Background color: Define a cor de fundo da página. Background image: Define uma imagem de fundo para o documento. Left margin: Valor para a margem esquerda. Utilize zero para eliminar a margem. Top margin: Valor para a margem do alto. Idem. Right margin: Valor para a margem direita. Idem. Bottom margin: Valor para a margem no fundo (embaixo). Idem. Os valores para as margens são medidos em pixels, mas pode ser escolhida outra unidade de medida, como centímetros ou milímetros. Links: Define as propriedades dos links. Link font: Define a fonte utilizada nos links. Para que a fonte seja a mesma escolhida em Appearance deixe selecionada a opção (same as page font). Size: Tamanho da fonte do link. Link Color: Define a cor do link. Rollover links: Cor do link quando o ponteiro do mouse estiver sobre ele. Visited links: Cor do link após ser visitado. Active links: Cor dos links ativos no documento. Aparece no momento em que o usuário clica no link. Underline style: Define o estilo do link. Sublinhado, sem sublinhado, sublinhado quando ativo, não sublinhado quando ativo. Headings : Define as propriedades da fonte dos tags Heading (cabeçalhos). Heading font: Define a fonte utilizada. Heading 1: Define o tamanho da fonte do H1 escolher também a cor.

9 Heading 2: Define o tamanho da fonte do H2 escolher também a cor. Heading 3: Define o tamanho da fonte do H3 escolher também a cor. Heading 4: Define o tamanho da fonte do H4 escolher também a cor. Heading 5: Define o tamanho da fonte do H5 escolher também a cor. Heading 6: Define o tamanho da fonte do H6 escolher também a cor. Title/ Encoding: Define as propriedades do título e codificação do documento. Title : Define o título da página. Encoding: Especifica o tipo de codificação do documento. Trace I mage: Define propriedades da Tracing Image. Tracing image: Permite a inserção de uma imagem que fica no fundo da página, mas que não aparece no navegador, servindo como uma espécie de guia para montagem da página, uma marca d água. I mage Transparency: Define o grau de transparência da imagem acima. Área de trabalho Para facilitar o trabalho de desenvolvimento, é possível inserir alguns recursos como réguas e grades na área de trabalho. Exibir réguas : vá ao menu View > rulers > Show ou pressione Ctrl+A lt+r. São úteis para indicar o posicionamento correto de elementos na página. É possível alterar os padrões de medidas. Para retornar o valor padrão: View > Rulers > Reset Origin Para ocultar as réguas: View > Rulers > Show (desmarque) Exibir grades : View > Grid > Show Grid, ou pressione Ctrl+ A lt+ G.

10 Marca a área de trabalho (quadriculada). Facilita a construção o layout. Para re configurar algumas propriedades da grade: View > Grid > Grid Settings. 3. Textos Trabalhar com texto no Dreamweaver é tão simples quanto em qualquer outro editor de texto. Depois de escrito pode se selecioná lo e alterar sua formatação no painel de propriedades que muda de acordo com o objeto selecionado: CTRL + F3. P ropriedades do Texto Podemos alterar o tipo da fonte, tamanho, cor; negrito, itálico, alinhamento de texto; transformar em link. Para quebrar a linha <b > devemos digitar: Shift + Enter Para começar um parágrafo <p > : Enter Podemos trabalhar ainda com listas, listas numeradas e recuos.

11 4. Elementos básicos É possível estabelecer vínculos (links) em qualquer texto ou imagem dentro de uma página. links locais Estabelecem conexões entre as páginas de um site Ex.: minhapagina.htm links globais Estabelecem conexões entre sites diferentes na Internet Ex.: Para criarmos um link, precisamos selecionar o texto ou a figura desejada e inserir ou selecionar o link no painel de propriedades na guia: Link. Na guia target, podemos escolher onde a nova página será aberta: _blank : em uma nova janela vazia. _parent: em um quadro (frame) superior ao atual. _self: no próprio quadro (frame) que chamou a página. _top: fecha todos os quadros abre a nova página no topo. Â ncoras ou links internos Possibilita criar pontos de navegação dentro de uma mesma página Geralmente âncoras são usadas em páginas de extenso conteúdo e com grande rolagem vertical na tela do navegador. Um uso comum seria criar um índice ou menu no topo da página que levará o usuário para partes específicas do texto. P ara nomear o ponto: 1. Para marcar este ponto posicionamos o cursor antes dele 2. Clicamos no botão correspondente no painel inserir (formato de âncora) 3. Na janela digitar nomedaancora

12 P ara acessar o ponto: 1.Selecione o texto que se tornará o link 2.No painel de propriedades escreva #nomedaancora no campo LINK, sendo que #nomedaancora é o nome do ponto onde queremos chegar com o link. Elementos básicos: e mail Para inserir o vínculo para um endereço de e mail: 1. Clique no ícone na barra de ferramentas 2. Preencha a janela com os dados solicitados

13 Elementos básicos: Date Para inserir uma data na página: 3. Clique no ícone na barra de ferramentas 4. Preencha a janela com os dados solicitados Elementos básicos: Tabelas Utilize as tabelas para organizar os dados, desenhar colunas em uma página ou organizar texto e imagens. Após a criação da tabela, a aparência e a estrutura podem ser facilmente modificadas. Utilize a paleta de objetos ou o menu I nsert, para criar uma nova tabela. Row s Define o número total de linhas da tabela. Columns Define o número total de colunas da tabela. Table w idth Especifica a largura da tabela. O valor pode ser em pixel ou porcentagem.

14 Border thickness Define a espessura da borda. Para deixar a tabela sem borda digite o valor zero. Cell padding Define o espaço entre o conteúdo da célula e sua parede. Para eliminar o espaço, digite valor zero. Cell spacing Define o espaço entre as células, excluindo a borda. Para eliminar o espaço, digite valor zero. Header Define o uso ou não de um cabeçalho e sua posição. Trata se de uma linha ou coluna com texto em negrito. Pode ser alterado depois. A ccessibility Define algumas informações sobre esta tabela. Caption Define um título para identificar a tabela. A lign caption Define o alinhamento e posição do CAPTION na tabela. Summary Campo não exibido na página. Serve para descrever os dados da mesma. I nspetor de propriedades da tabela Table I d Identificação da tabela. Row s

15 Exibir e alterar o número de linhas. Cols Exibir e alterar o número de colunas. W Exibir e alterar a largura da tabela. H Exibir e alterar a altura da tabela. CellP ad Exibir e alterar o espaçamento dentro da célula. CellSpace Definir e alterar e espaçamento entre as células. A lign Define o alinhamento da tabela. Border Exibir e alterar a espessura da borda. Class Define um estilo a ser aplicado à tabela. Bg Color Define uma cor de fundo para a tabela. Brdr color Especifica a cor da borda. Bg I mage Insere uma imagem como fundo da tabela. Clear Columns W idths Limpa a largura das colunas. Clear Row s Heights Limpa a altura das linhas. Convert Table W idths to P ixels Converte a largura da tabela para o valor em pixels. Convert Table W idths to P ercents Converte a largura da tabela para o valor em porcentagem.

16 Convert Table Heights to P ixels Converte a altura da tabela para o valor em pixels. Convert Table Heights to P ercents Converte a altura da tabela para o valor em porcentagem. I nspetor de propriedades da célula: É dividido em duas partes: na superior, contém propriedades do texto; a parte inferior permite formatar as propriedades da célula. Além de algumas propriedades iguais as da tabela, temos: Horiz Alinhamento horizontal do conteúdo da célula. Vert Alinhamento vertical do conteúdo a célula. No W rap Esta opção marcada inibirá a quebra automática de linha dependendo do conteúdo da célula. Header Formata a célula como um head de tabela. Padrão: Texto no centro em negrito. Ainda neste inspetor, temos dois pequenos ícones que permitem unir duas células ou mais e ainda dividir uma célula. Elementos básicos: I magens Para inserir uma imagem clique no ícone ou no menu Insert > Image

17 P ropriedades W e H Largura e altura da imagem. Estas medidas podem ser alteradas. Src Especifica a origem do arquivo. Link Transforma a imagem em um link para outro arquivo, e mail ou página. A lt Texto alternativo. Exibido por navegadores que não mostram a imagem ou quando o usuário colocar o ponteiro do mouse sobre a imagem. V Space e H Space Adicionam espaços em volta da imagem. Target ( alvo) Especifica o frame ou a janela onde o link se abrirá. Low Src ( origem baixa) Escolhe uma imagem para ser carregada antes da principal. Útil quando precisamos inserir uma imagem muito pesada. Border

18 Define a borda ao redor da imagem quando houver links. O valor zero elimina a borda. A lign Alinha a imagem em relação a texto da página. Reset size Atualiza os valores W e H para o valor padrão. A lign (Left, center, right) Alinha o texto em relação a imagem. Class Seleciona uma folha de estilo para imagem. Edit Seis funções para tratamento direto da imagem na página. M apa de I magem Mapear uma imagem é dividi la em diversas regiões clicáveis possibilitando o acesso a diversos links. Inserida a imagem, escolha uma das opções de mapeamento possíveis no inspetor de propriedades: M ap Name Nome para o mapa. Retangular Hotspot Tool Cria uma área retangular na imagem. Oval Hotspot Tool Cria uma área circular na imagem. P olygon Hotspot Tool Cria uma área na forma de polígono na imagem. Escolha um formato e clicando sobre a imagem com o botão esquerdo do mouse, mantenha o pressionado e dimensione o tamanho da área desejada. O I nspetor de propriedades será apresentado:

19 Temos os espaços: link, Target e A lt disponíveis somente para esta área. Repita o procedimento tantas vezes quantas forem necessárias para mapear a imagem. I mage P laceholder Insere uma imagem com uma cor e tamanhos determinados para ajustes do layout ou montagem de um w ireframe. A janela de inserção: Name Define um nome para a imagem. O campo é opcional. W idth Especifica a largura da imagem. Height Especifica a altura da imagem. Color Cor de preenchimento da imagem.

20 A lternate text Texto alternativo para informar a intenção da imagem. Rollover I mage Permite a troca de uma imagem por outra quando o ponteiro do mouse estiver sobre ela. A janela de inserção: I mage Name Define um nome para a imagem. Original image Define a primeira imagem. A que será trocada. Rollover I mage Define a segunda imagem. Que substituirá a primeira. Se marcar a caixa Preload rollover image as imagens será pré carregadas pelo navegador. A lternate text Texto alternativo que será exibido quando o cursor estiver sobre a imagem. W hen clicked, Go to URL Especifica um link para a imagem. 5. Bibliografia BARBATANA, Fabrício Brás Manzi; Dreamw eaver M X ; Érica; OLIVIERO, Carlos Antonio José; Faça um site Dreamw eaver M X 2004; Érica; LOWERY, Joseph W.; Dreamw eaver M X, a Bíblia; Campus; 2002.