STI - Seo Tcnica de Informtica

Dreamweaver

DreamWeaver

STI - Seo Tcnica de Informtica

ndice
Introduo 1. Conhecendo a rea de Trabalho
1.1. Barra de Ttulo 1.2. Barra de Menus 1.3. Guias 1.3.1 Guia "Common" 1.4. Barra de "Edio do Documento" 1.5. Painis 1.6. rea de Desenvolvimento 1.7. Barra "Inspetor de Propriedades"

2. Tipos de Pginas
2.1. Configurao de Pginas 2.2. Formatao de Texto

3. Tabelas 4. Imagens 5. Links 6. Frames 7. Templates (Modelos) 8. Mdias 9. Layers 10. Rollover de Imagens 11. Janela PopUp 12. Menus 13. Formulrios

DreamWeaver

STI - Seo Tcnica de Informtica

Introduo
O DreamWeaver MX um editor de HTML profissional para o desenvolvimento de pginas, sites e aplicativos para a Internet que j bastante utilizado no meio dos desenvolvedores pela facilidade que sua interface apresenta. Ele oferece ferramentas suficientes para aqueles que gostam de trabalhar em modo texto, como por exemplo, as dicas de cdigo que so exibidas medida que so digitados os comandos. O DreamWeaver MX tambm facilita a vida daqueles que no tem afinidade com cdigos HTML, ele possui uma interface grfica que possibilita a criao de pginas, sites e aplicativos sem a necessidade de digitao de uma s linha de cdigo. Possuindo painis, guias, menus e o inspetor de propriedades junto da rea de trabalho, facilita-se a busca de problemas e se agiliza as definies em geral. Sendo um produto da famlia MacroMedia ele tem ligaes com outros aplicativos como por exemplo, o Flash, o Fireworks, o ColdFusion etc. No decorrer da apostila veremos como o DreamWeaver MX conversa com alguns desses aplicativos. O DreamWeaver MX possui tambm extenses que devem ser baixadas (download) do site da Macromedia (www.macromedia.com.br). Tais extenses trazem novos recursos para o aplicativo que podem ser bastante teis. Na Internet voc tambm encontra muitas referncias sobre o DreamWeaver MX e as verses que o antecederam.

DreamWeaver

STI - Seo Tcnica de Informtica

1. Conhecendo a rea de Trabalho

O item 1 desta apostila abordar o conhecimento da rea de trabalho:

1.1. Barra de Ttulo

A barra de ttulos contm o nome do programa que est sendo usado, no caso, Macromedia DreamWeaver e o nome do arquivo que est sendo editado.

1.2. Barra de Menus

Nesta barra h vrios menus: Arquivo; Editar; Exibir; Inserir; Modificar; Texto; Comandos; Site; Janela; Ajuda.

DreamWeaver

STI - Seo Tcnica de Informtica

1.3. Guias

O DreamWeaver possui uma barra denominada INSERIR que contm guias, e estas possuem cones de atalhos para ferramentas bsicas, ou seja, as mais utilizadas na construo do site.

1.3.1. Guia Common

Nessa guia h ferramentas bsicas do DreamWeaver. So elas: Hiperlink: inserir link; Email Link: link para e-mail; Ancora: Link para um lugar especfico dentro do prprio documento ou outro qualquer; Inserir Tabela: Inserir tabela; Desenhar camada; Imagem: Inserir uma imagem; Flash: Inserir arquivo flash (.swf); Imagem Rollover: Insere uma imagem que substituda por outra ao passar do mouse; Menu de Navegao: Cria um menu com troca de imagens; Linha Horizontal; Data; Comentrios. Outras guias sero abordadas de outra forma no decorrer da apostila.

1.4. Barra de "Edio do Documento"

Denominada Documento essa barra possui ferramentas que exibem informaes do arquivo em edio, tais como, o ttulo, exibio de layout, layout e HTML e apenas o HTML. muito usada na manuteno dos sites, quando da necessidade de correes no cdigo HTML.

DreamWeaver

STI - Seo Tcnica de Informtica

1.5. Painis
Os painis possuem informaes relacionadas a aes avanadas dentro de uma pgina. Dentre os painis existentes podemos destacar: Design: onde buscaremos informaes sobre o arquivo .css que ser vinculado ao arquivo; e Arquivos: onde teremos a definio e a respectiva rvore de diretrios do site em evidncia.

Esses painis podem ser exibidos e ocultados atravs do menu janela na opo "ocultar painis".

1.6. rea de Desenvolvimento

A rea de desenvolvimento exibe tudo o que est sendo criado no site. Nessa rea usamos um termo WYSIWUG (What You See Is What You Get O que voc v o que voc ter), sendo assim tudo o que est na rea de desenvolvimento est como ser exibido no browser, excetuando-se as linhas e marcas de smbolos visveis que identificam algum atributo imagem ou texto.

1.7. Barra "Inspetor de Propriedades"

A barra Inspetor de Propriedades, que fica exatamente no p da rea de desenvolvimento, exibe informaes fundamentais sobre o que est sendo feito no site, como por exemplo, quando voc estiver trabalhando com: Texto barra informar formato do texto (pargrafo, cabealho); bloco de fontes que ser usado; tamanho; cor; itens de formatao como negrito, itlico, alinhamentos, lista com marcadores e numeradores e tabulao; link; tamanho da imagem; origem; link; rea para texto alternativo; mapa de imagem.

Imagem

Tudo o que for inserido na rea de desenvolvimento ter informaes importantes na barra de propriedades. Essa barra a mais importante da rea de trabalho, pois atravs dela voc identificar problemas nas definies de atributos.

DreamWeaver

STI - Seo Tcnica de Informtica

2. Tipos de pginas
Aqui sero abordados: Tipos de Pginas; Configurao de Pgina; e Formatao de Texto.

O DreamWeaver possui diversos tipos de pginas: bsicas, dinmicas, modelos, CSS, frames entre outras. Nesta apostila iremos abordar pginas bsicas, modelos, CSS e frames.

2.1. Configurao de Pginas

Na barra de menus em Modificar, Propriedades da pgina, voc encontrar tudo o que se refere cor de fundo, texto, links, imagem de fundo, margens.

2.2. Formatao de Texto

O texto pode ser formatado de duas ou trs maneiras: atravs de barra inspetor de propriedades; atravs da barra Inserir na guia Common; e atravs de uma folha de estilos, que ser abordada mais adiante.

DreamWeaver

STI - Seo Tcnica de Informtica

3. Tabelas
Neste tpico iremos abordar os seguintes temas relacionados a tabelas: Insero; Mesclagem; Fundos; Alinhamentos; Auto-formatao; Fixa e escalonvel; CellPadding; CellSpacing; Indexao; Criao de layouts com tabelas.

As tabelas ajudam bastante no desenvolvimento do site. Elas podem ser fixas ou escalonveis. A vantagens e desvantagens em trabalhar com as duas, isso voc dever decidir quando da insero das mesmas. H algumas consideraes com relao ao alinhamento das tabelas que devem ser discutidas, por exemplo, nunca se alinha uma tabela com alinhamento de texto e sim com o alinhamento da clula ou clulas. Para mudar a porcentagem da largura da clula, selecione a clula que dever receber um novo valor. Para inserir uma tabela voc pode usar: o menu Inserir e a opo Tabela a na barra Inserir a guia Tabelas

Feito isto, ser exibida a caixa de propriedades Inserir Tabela, representada abaixo. Essa caixa possui as definies da sua tabela.

DreamWeaver

STI - Seo Tcnica de Informtica

4. Imagens
Abordaremos neste item: Insero de Imagem; Alinhamentos.

Inserir imagens no DreamWeaver como tirar o doce da boca de uma criana. Como j abordado no incio da apostila, a guia "Common" possui um cone para que voc insira suas imagens . Faa um teste. Quando inserida a imagem, voc poder clicar sobre ela e usar alguns comandos da barra Inspetor de Propriedades, tais como, inserir um link, fazer um mapa da imagem com vrios links,alinhamento e inserir borda.

DreamWeaver

STI - Seo Tcnica de Informtica

5. Links
Existem seis tipos de links: - Relativo: voc apenas cita o nome do arquivo e o diretrio (em alguns casos) exemplo: nomedoarquivo.html - Absoluto: deve-se digitar o caminho inteiro do arquivo exemplo: http://www.fflch.usp.br/sti/index2.html - Download: esse tipo de link depende de um formato, por exemplo, se voc colocar um link para um arquivo do Word e o usurio possuir Word na mquina, o arquivo ser aberto. Caso o arquivo do Word esteja compactado em formato .zip, quando o usurio clicar sobre ele far, obrigatoriamente, o download do arquivo e posteriormente o programa WinZip entrar em ao. exemplo: arquivo.doc (o Word o abrir); Arquivo.zip (ser feito o download e depois o WinZip ser aberto para descompactao do arquivo) - E-Mail: esse tipo de link faz com que, ao ser clicado, o link abra a janela do programa de envio de e-mail padro da mquina do usurio com o endereo do e-mail j inserido no campo e-mail. exemplo: mailto:abc@usp.br - ncora: esse tipo de link muito usado. Ele faz com que o visitante v a lugares especficos dentro da pgina ativa ou qualquer outra pgina do site. exemplo: <a href=#fim>fim</a> No final da pgina inclui-se uma frase com a ncora <a name= fim >Aqui o fim</a> Quando o usurio clicar sobre a palavra fim ele ir para a ncora em questo nomeada como fim, na pgina ativa ou em qualquer outra pgina ou site. - Mapa de imagem: mapear uma imagem pode ser uma mo na roda para aqueles que no querem muito trabalho quando da criao dos layouts, uma vez que basta criar a imagem e usar as ferramentas de mapeamento de imagem que esto na barra de propriedades

DreamWeaver

10

STI - Seo Tcnica de Informtica

6. Frames
Os frames so molduras ou quadros que permitem a diviso da tela do site em diversos html, ou seja, em cada frame pode-se abrir um html diferente. Quando se vai trabalhar com um layout de cabealho, menu e contedo usam-se trs frames. A figura abaixo ilustra bem o modelo citado: As vantagens na utilizao dos frames so basicamente:

Diminuio dos carregamentos; Melhora a navegao; Facilita a manuteno; Arquivo Novo Geral Pgina de Molduras

Para criar uma pgina com frames:

As pginas de molduras contm muitos exemplos de pginas de frames. Preste muita ateno quando do SALVAMENTO dos arquivos.

A pgina de frames composta de quatro partes: Frame Geral: que engloba todas as pginas; E os frames designados dentro do Frame Geral. Caso voc tenha determinado um frame superior e dois inferiores divididos em duas colunas, ento voc ter trs frames para salvar. Para melhor visualizar os frames v at a opo Janela, Outros e escolha Molduras. Ser exibido um painel com as informaes da sua pgina de frames, o que facilitar sua manipulao.

DreamWeaver

11

STI - Seo Tcnica de Informtica

7. Templates (Modelos)
Os modelos de pgina so uma mo na roda para aqueles que desejam construir sites com grandes contedos e a mesma aparncia para as pginas. Para criar uma template siga os passos: Crie uma pgina com as reas que no podero ser editveis e depois a salve como um modelo. Abra novamente a pgina .dwt e insira uma regio editvel: Atravs da barra Inserir, Modelos clique no cone Regio editvel Salve novamente o arquivo e est pronta sua template.

Para utiliz-la basta cria um arquivo novo e na guia Modelo, da janela que ser aberta, o modelo que voc criou.

DreamWeaver

12

STI - Seo Tcnica de Informtica

8. Mdias
O DreamWeaver MX faz parte de um grupo de programas especialmente desenvolvidos para a Internet. Esse grupo composto do Flash MX, Fireworks MX e outros aplicativos. Basta acessar o site da Macromedia (www.macromedia.com.br) para conhecer mais sobre estes e outros programas. A guia Common possui atalhos para a insero de mdias que so: Fireworks Flash Clicando sobre qualquer um deles, uma janela se abre para que voc escolha o arquivo que ser inserido no site. Quando selecionada a mdia o Inspetor de Propriedades abrir opes relacionadas ao arquivo inserido.

DreamWeaver

13

STI - Seo Tcnica de Informtica

9. Layers
As layers ajudam quando queremos que algo fique em lugar especfico na pgina, por exemplo, queremos que um logotipo fique flutuando sobre a janela. H apenas um problema com as Layers: verses inferiores a 4 do Netscape no trabalham com esse recurso, invalidando seu projeto. Para inserir uma layer: - Na barra Inserir, Common selecione o cone Desenhar Camada quiser, voc pode at desenhar diversas layer e construir um layout. e desenhe a layer onde

DreamWeaver

14

STI - Seo Tcnica de Informtica

10. Rollover de Imagens

Criar um efeito de troca de imagem fcil, porm deve ser pensado antes de sua utilizao. Pense como usurio, se voc estivesse em um site em que cada vez que voc passe o mouse sobre uma figura ela mudasse. No incio tudo bem, mais depois ... Deve-se pensar tambm no peso que isso ir acarretar quando do descarregamento ... Para criar o efeito de rollover siga os passos: Na barra Inserir, na guia Common clique em image cambivel janela ser exibida: , e a seguinte

DreamWeaver

15

STI - Seo Tcnica de Informtica

11. Janela PopUp

Voc conhece aquela janela chatinha que se abre logo que um site aberto? Ento, a tal janela chatinha uma Janela PopUp. Muito boa para dar informaes de ltima hora, anunciar promoes, eventos, mas, muito inconveniente quando usada em excesso. A construo de uma Janela PopUp muito simples: Selecionar a "tag body" no "Inspetor de Propriedades" Inserir uma ao atravs do painel Comportamentos Clicar no sinal de "+"

Escolher a opo Abrir a janela do navegador e as propriedades da janela sero exibidas como abaixo:

DreamWeaver

16

STI - Seo Tcnica de Informtica

12. Menus
O menus ajudam a vida do visitante, pois dentro de um menu podemos ter outras opes. Os menus tambm enriquecem o visual do site. Para criar um menu simples: Insira uma tabela de 1 linha x 1 coluna; Digite um texto; Selecione o texto, no campo Link do Inspetor de Propriedades inserir um #; Salve o arquivo; No Painel Design, Comportamentos clique no sinal de "+" e escolha a opo Mostrar o Menu PopUp, o seguinte painel ser aberto:

DreamWeaver

17

STI - Seo Tcnica de Informtica

13. Formulrios
Os formulrios tambm so pginas em html, os quais os visitantes do site preenchem e enviam suas sugestes, cadastros, pedidos etc. Para criar um formulrio: Clique na barra Inserir na guia Formulrios no cone Formulrio Insera uma tabela com a quantidade de linhas e colunas necessrias; Insira os dados que sero solicitados de um lado (de preferncia do lado esquerdo); Insira os campos correspondentes ao dado solicitado. - Texto: trabalha com alfanumricos. - rea de Texto: trabalha com alfanumricos, porm, com mltiplas linhas. - Caixa de Seleo: permite mltiplas selees. - Boto de Rdio: permite apenas uma seleo, deve definir todos os campos. - Grupo de botes: permite apenas uma seleo, porm, dentro de um grupo. - Menu de Lista: possui duas subdivises: - Lista: permite mais de uma seleo. - Menu: permite apenas uma seleo. - Menu de Salto: exibe um menu com as subdivises do site, para insero de outras urls. - Boto: - Enviar: Envia o formulrio. - Redefinir: Apaga os dados preenchidos no formulrio. - Validao: Validar o formulrio fazer com que ele tenha algumas regras, como por exemplo, campos requeridos, obrigatrios, como, nome, endereo, CPF etc. Para isso selecione no painel "Comportamentos" a opo "Validar o formulrio" e a seguinte janela ser exibida: ;

Tipos de Campos:

DreamWeaver

18

STI - Seo Tcnica de Informtica

Universidade de So Pa ulo Reitor: Prof. Dr. Adolfho Jos Melfi Vice-Reitor: Prof. Dr. Hlio Nogueira da Cruz

Faculdade de Filosofia, Letras e Cincias Humanas Diretor: Prof. Dr. Sedi Hirano Vice-Diretor: Profa. Dra. Eni de Mesquita Samara

Seo Tcnica de Informtica Chefe: Augusto Csar Freire Santiago Chefe-Substituto: Nli Maximino

Ttulo: Dreamweaver Elaborao: Seo Tcnica de Informtica Organizao: Seo Tcnica de Informtica Reviso: Augusto Csar Freire Santiago Assad Abdalla Ghazal Colaborao: Marcelo Marcos Benedito

Verso: 1.0 ltima Atualizao: 23/01/2003

DreamWeaver

19