Apostila Macro Media Dream Weaver 4

APOSTILA MACROMEDIA DREAMWEAVER 4

Apostila: Macromedia Dreamweaver 4 Interface: Português Formato: A4 Nível: Iniciante / Intermediário

Autor: Leonardo Revisão: Olga

Sumário Introdução...........................................................................................................................................07 Iniciar o Macromedia Dreamweaver 4...............................................................................................08 Ambiente de trabalho.........................................................................................................................09 Menu principal...................................................................................................................................10 Salvar documento...............................................................................................................................11 Abrir um documento..........................................................................................................................13 Fechar o documento atual sem abandonar o Dreamweaver...............................................................15 Fechar o Dreamweaver.......................................................................................................................16 Exibir régua........................................................................................................................................17 Ocultar réguas.....................................................................................................................................18 Exibir grade........................................................................................................................................19 Ocultar grade......................................................................................................................................21 Barra de ferramentas..........................................................................................................................22 Painel Objetos.....................................................................................................................................23 Categoria Comuns..............................................................................................................................24 Categoria Caracteres...........................................................................................................................26 Categoria Formulários........................................................................................................................27 Categoria Molduras............................................................................................................................28 Categoria Cabeçalho...........................................................................................................................29 Categoria Invisíveis............................................................................................................................30 Categoria Especial..............................................................................................................................30 Seções Layout e Exibir.......................................................................................................................31 Inspetor de Propriedades....................................................................................................................31 Painel de Referência...........................................................................................................................32 Entendendo os Painéis........................................................................................................................33 Painel de Propriedades.......................................................................................................................33 Exibir um painel.................................................................................................................................34 Ocultar painéis....................................................................................................................................35 Agrupar painéis..................................................................................................................................36 Desagrupar painéis.............................................................................................................................37 Barra de Status....................................................................................................................................38 O Seletor de tags.................................................................................................................................39 Menu pop-up Tamanho da janela.......................................................................................................39 Tempo e Tamanho do download.........................................................................................................39

A Barra do Iniciador...........................................................................................................................39 Janela do documento..........................................................................................................................40 Alterar o título da página....................................................................................................................41 Inserir texto.........................................................................................................................................42 Incluir uma quebra de linha................................................................................................................43 Formatar texto....................................................................................................................................43 Selecionando um formato para o texto...............................................................................................44 Selecionando uma fonte para o texto.................................................................................................45 Acrescentar uma fonte........................................................................................................................46 Escolher o tamanho do texto..............................................................................................................47 Aplicar uma cor ao texto....................................................................................................................48 Aplicar negrito ou itálico ao texto......................................................................................................49 Alinhar o texto....................................................................................................................................50 Criar lista não-ordenada.....................................................................................................................51 Criar lista ordenada............................................................................................................................52 Recuar o texto.....................................................................................................................................53 Desfazer o recuo de texto...................................................................................................................54 Criar links...........................................................................................................................................55 Verificar a ortografia..........................................................................................................................56 Inserir imagem....................................................................................................................................58 Definir um nome para a imagem........................................................................................................59 Alterar largura e altura da imagem.....................................................................................................60 Transformar a imagem em um link....................................................................................................60 Criar um texto alternativo de visualização da imagem......................................................................61 Definir uma imagem de fundo............................................................................................................62 Alinhar a imagem em relação ao texto...............................................................................................65 Espaço vertical e espaço horizontal em relação ao texto...................................................................66 Definir um valor para a borda da imagem..........................................................................................66 Mapa de imagens................................................................................................................................67 Redimensionar uma área de um mapa de imagens.............................................................................68 Apagar uma área de um mapa de imagens.........................................................................................68 Trabalhando com tabelas....................................................................................................................69 Inserir tabela.......................................................................................................................................69 Nomear uma tabela.............................................................................................................................71 Redimensionar tabela.........................................................................................................................72 Alinhar a tabela..................................................................................................................................73 Definir uma cor de fundo para a tabela..............................................................................................74

Definir uma cor para a borda da tabela..............................................................................................75 Mesclar as células...............................................................................................................................76 Excluir linhas e colunas......................................................................................................................77 Inserir dados na tabela........................................................................................................................78 Trabalhando com formulários............................................................................................................79 Inserir um formulário.........................................................................................................................79 Nomear um formulário.......................................................................................................................81 Especificar a ação...............................................................................................................................82 Selecionar um método de envio.........................................................................................................84 Inserir campo de texto........................................................................................................................85 Inserir caixa de seleção.......................................................................................................................87 Inserir botões de opção.......................................................................................................................88 Inserir Menu de lista...........................................................................................................................90 Inserir campo de arquivos..................................................................................................................92 Inserir campos ocultos........................................................................................................................93 Inserir botão........................................................................................................................................95 Inserir botão gráfico...........................................................................................................................97 Trabalhando com Frames...................................................................................................................99 Inserir Frames.....................................................................................................................................99 Salvar molduras................................................................................................................................102 Alterar as propriedades das molduras..............................................................................................104 Alterando as medidas de uma moldura............................................................................................106 Apagar uma moldura........................................................................................................................107 Inserir conteúdo nas molduras..........................................................................................................108 Folhas de Estilos...............................................................................................................................109 Criar um novo Estilo........................................................................................................................110 Aplicar um estilo..............................................................................................................................113 Anexar um Estilo..............................................................................................................................115 Gerenciar seu sites............................................................................................................................117 Criar novo site..................................................................................................................................117 Editar o site.......................................................................................................................................120 Transferir arquivos...........................................................................................................................123 Endereços.........................................................................................................................................124 Termo de uso....................................................................................................................................125

Amostra - Apostila Macromedia Dreamweaver 4

Introdução O Macromedia Dreamweaver é o principal programa para desenvolvimento de páginas HTML. Considerado por muitos, como o melhor editor profissional do mercado, o Dreamweaver é uma excelente ferramenta para edição de páginas HTML. Sua interface e bastante amigável e de fácil utilização, pois possui um ambiente de trabalho completo para a produção e gerenciamento de sites para Internet. O programa está em sua quarta versão e o amadurecimento do Dreamweaver facilita o desenvolvimento de páginas HTML que utilizam elementos como imagens, textos, tabelas, formulários, frames, plug-ins, layers, folhas de estilos, além de recursos exclusivos para criar animações em DHTML, botões, scripts prontos, entre outros. Todo gerenciamento de seu site pode ser feito através do Dreamweaver, desde o planejamento e arquitetura do site, até transferência dos arquivos para o servidor.

www.apostilas.na-web.net

7

Amostra - Apostila Macromedia Dreamweaver 4

Iniciar o Macromedia Dreamweaver 4 Após devidamente instalado, o Dreamweaver 4 pode ser executado da seguinte maneira. 1. Clique no botão Iniciar. 2. Posicione o cursor do mouse em Programas, Macromedia Dreamweaver 4.

Figura 1.0 3. Clique em Dreamweaver 4.

www.apostilas.na-web.net

8

Amostra - Apostila Macromedia Dreamweaver 4

Ambiente de trabalho O ambiente de trabalho do Macromedia Dreamweaver, reúne menus, barras de ferramentas e painéis que facilitarão o desenvolvimento de suas páginas. Conhecer cada painel da área de trabalho é fundamental para tirar um melhor proveito do programa. Os painéis flutuantes podem ser arrastados, ocultados ou exibidos, dessa forma o usuário pode personalizar a área de trabalho, exibindo somente os painéis que realmente irá trabalhar, ou movendo-os para uma outra área dentro do ambiente trabalho.

Figura 1.1 (Ambiente de trabalho)

www.apostilas.na-web.net

9

Amostra - Apostila Macromedia Dreamweaver 4

Menu principal No menu principal você encontra os principais comandos do programa. Por exemplo, para salvar, abrir, importar, etc, um documento, selecione o menu Arquivo. Alguns itens dos menus podem aparecer desativas, sendo necessário executar uma determinada ação para que a mesma fique ativa.

Figura 1.2 (Menu Principal) Arquivo Aqui você encontra os comandos básicos, como salvar, abrir, importar, exportar, visualizar, fechar, entre outros. Editar Apresenta recursos de edição do documento. Os comandos são: copiar, cortar, colar, localizar, selecionado tudo, editar preferências do software, atalhos de teclado, entre outros. Exibir Apresenta os comandos de visualização do documento. Os comandos são: Visualizar o código, visualizar o design, régua, grade, entre outros. Inserir Nessa opção, você encontra elementos para inserir no documento. Por exemplo, quadros, camadas, molduras, formulários, entre outros. Modificar Aqui você encontra os comandos relativos à modificação de elementos no documento. Por exemplo, modificar as propriedades da página, alinhamento, converter tabelas em camadas, entre outros. Texto Nessa opção, você encontra comandos para alterar o tipo de fonte, estilo, tamanho, alinhamento e a cor do texto. Comandos Aqui você dispõe de comandos para limpar tags HTML, gerenciar extensões, definir esquema de cores, entre outros. Sites Nessa opção, você encontra os recursos relativos ao site. Entre os recursos destacam, o gerenciamento do site, relatórios e verificar os links do site. Janela Todos os painéis e janelas do Dreamweaver podem ser exibidos ou ocultados através dessa opção do Menu Principal. Ajuda Nessa opção, você encontra os arquivos de ajuda e informações sobre o Dreamweaver.

www.apostilas.na-web.net

10

Amostra - Apostila Macromedia Dreamweaver 4

Salvar documento O Macromedia Dreamweaver, permite que se salva o documento atual em diversos formatos. Por exemplo, você pode salvar uma página no formato HTML, ou caso não esteja desenvolvendo uma página HTML e sim um arquivo ASP, o Dreamweaver permite que se escolha o tipo de arquivo a ser salvo. Salve seus documentos da seguinte maneira. 1. No menu Arquivo, selecione Salvar.

Figura 1.3

www.apostilas.na-web.net

11

Amostra - Apostila Macromedia Dreamweaver 4 2. A caixa de diálogo “Salvar como” será exibida.

Figura 1.4 3. Selecione a pasta onde o documento será salvo. 4. No campo Nome do arquivo, digite o nome que deseja dar ao documento. 5. Clique no botão Salvar.

www.apostilas.na-web.net

12

Amostra - Apostila Macromedia Dreamweaver 4

Abrir um documento Da mesma forma que o Dreamweaver permite salvar diversos tipos de arquivos, também possibilita a abertura de diversos formatos de arquivos. Para abrir um documento no Dreamweaver, proceda da seguinte maneira. 1. No menu Arquivo, selecione Abrir.

Figura 1.5 2. A caixa de diálogo Abrir será apresentada.

www.apostilas.na-web.net

13

Amostra - Apostila Macromedia Dreamweaver 4 3. Em Examinar, navegue até a pasta onde o arquivo que você deseja abrir está armazenado.

Figura 1.6 4. Selecione o arquivo, em seguida clique no botão Abrir.

Exibir régua A Régua é um recurso do Dreamweaver que serve para orientá-lo no posicionamento dos elementos no documento. Para exibir as réguas. 1. No menu principal, clique em Exibir.

Figura 2.1 www.apostilas.na-web.net

14

Amostra - Apostila Macromedia Dreamweaver 4 2. Posicione o cursor do mouse em Réguas. 3. Selecione Mostrar. 4. O Dreamweaver passa a exibir réguas de orientação.

Figura 2.2

Agrupar painéis Você pode mover um painel para outra janela, criando assim uma guia para aquele painel dentro da nova janela. 1. Clique na guia do painel que deseja agrupar.

Figura 3.5 2. Solte o botão do mouse. O painel será agrupado. www.apostilas.na-web.net

15

Amostra - Apostila Macromedia Dreamweaver 4

Figura 3.6

Formatar texto Como mencionado anteriormente, o Painel Propriedades permite exibir e editar as propriedades de cada elemento selecionado na página.

Figura 4.5 Você tem duas formas para editar o texto. •

Selecionando o texto que deseja formatar e utilizando o Inspetor de Propriedades para aplicar a formatação.

Ou; • Utilizando o Painel Inspetor de Propriedades antes de digitar o texto. No Inspetor de propriedades, escolha a formatação que deseja aplicar ao texto e depois basta digitar o texto na janela do documento.

Escolher o tamanho do texto O campo Tamanho do texto tem como padrão para exibição o tamanho 3, mas você pode alterar este tamanho para valores positivos, tamanho maior, ou valores negativos, para exibir o texto em tamanho reduzido. www.apostilas.na-web.net

16

Amostra - Apostila Macromedia Dreamweaver 4 Para escolher o tamanho do texto. 1. Selecione o texto no qual um tamanho será aplicado.

Figura 5.4 2. No Inspetor de Propriedades, clique em tamanho do texto e selecione um tamanho para o texto.

Figura 5.5 3. O tamanho escolhido será aplicado ao texto.

Figura 5.6

Recuar o texto Ao criar um documento, você pode achar conveniente usar o recuo do texto para dar ênfase a determinado trecho do documento. Recuando o texto. 1. Selecione o texto no qual deseja aplicar o recuo.

www.apostilas.na-web.net

17

Amostra - Apostila Macromedia Dreamweaver 4

Figura 6.8 2. No painel Inspetor de Propriedades, clique no botão (

) Recuo do texto.

Figura 6.9 3. O texto avança para a direita. Clique novamente no botão Recuo do texto, para aumentar o recuo.

Mesclar as células Quando estiver confeccionando uma tabela, em algum momento perceberá que, existem mais linhas ou colunas que o necessário. Ou simplesmente, a opção padrão da tabela não exibe um layout de seu agrado. Neste caso você pode mesclar as células. Mesclando células. 1. Selecione as células que deseja mesclar. Você pode selecionar as células em sentido horizontal ou vertical.

Figura 12.0 2. Clique no menu Modificar. Posicione o cursor do mouse em Tabela, selecione a opção “Mesclar as células”.

www.apostilas.na-web.net

18

Amostra - Apostila Macromedia Dreamweaver 4

Figura 12.1 3. As células selecionadas serão mescladas, alterando bastante o layout da tabela.

Figura 12.2

Inserir campo de arquivos O campo de arquivos permite aos usuários a inclusão de um arquivo para ser enviado junto com o conteúdo do formulário. O usuário clica no botão Procurar para buscar um arquivo do seu HD que será anexado ao formulário.

Figura 14.9 Para inserir um campo de arquivos em seu formulário. 1. Coloque o ponto de inserção dentro do contorno do formulário. 2. Clique no menu Inserir.

www.apostilas.na-web.net

19

Amostra - Apostila Macromedia Dreamweaver 4

Figura 15.0 3. Posicione o cursor do mouse em Objetos de formulário, clique em Campo de arquivos. 4. Ou; 5. Na categoria Formulários do Painel Objetos, clique no ícone (

) Inserir campo de arquivos.

Figura 15.1 6. No campo Nome do campo de arquivos, no inspetor de propriedades, digite o nome do objeto campo de arquivos. 7. No campo Larg. do caractere, digite o valor correspondente ao número máximo de caracteres a serem exibidos no campo. 8. No campo Nº máx. de caracteres, digite o valor correspondente ao número máximo de caracteres que o campo comportará.

Apagar uma moldura Em determinado momento você pode achar que está trabalhando com muitas molduras e que deve excluir alguma moldura do Frameset. Para apagar uma moldura. 1. Clique sobre a borda da moldura que deseja apagar. www.apostilas.na-web.net

20

Amostra - Apostila Macromedia Dreamweaver 4 2. Mantenha o botão do mouse pressionado enquanto arrasta a borda da moldura para fora da tela.

Figura 17.1

Figura 17.2

3. Automaticamente a moldura será apagada.

Figura 17.3

Anexar um Estilo O primeiro passo para a utilização do estilo vinculado é construir o arquivo que contém as informações referentes à formatação. O Dreamweaver cria um arquivo com a extensão CSS. Este arquivo pode ser vinculado a qualquer página, dessa forma não é necessário formatar os elementos página por página, basta criar um arquivo e anexá-lo as páginas.

www.apostilas.na-web.net

21

Amostra - Apostila Macromedia Dreamweaver 4 Anexar um estilo ao documento. 1. Acesse o Painel Estilos CSS. Clique em Janela, Estilo CSS.

Figura 18.5 2. O Painel Estilo CSS será apresentando.

Figura 18.6 3. No Painel Estilos CSS, clique no ícone (

) Anexar a folha de estilos.

4. A caixa de diálogo “Selecionar o arquivo de folha de estilos” será apresentada.

www.apostilas.na-web.net

22

Amostra - Apostila Macromedia Dreamweaver 4

Figura 18.7 5. Em Examinar, clique na seta para baixo e localize a pasta onde o arquivo está armazenado. 6. Após selecionar o arquivo, clique no botão Selecione. 7. O estilo selecionado será automaticamente vinculado ao documento.

www.apostilas.na-web.net

23

Amostra - Apostila Macromedia Dreamweaver 4

Endereços Macromedia http://www.macromedia.com.br IVC http://www.apostilas.na-web.net E-mail [email protected]

www.apostilas.na-web.net

24

Amostra - Apostila Macromedia Dreamweaver 4

Termo de uso IMPORTANTE: A “IVC” por meio desta concede ao Cliente uma licença de uso não exclusiva para uso deste material. O Cliente pode fazer uso deste material para autotreinamento, respeitando as condições de Desempenho, Utilização e Alterações. 1. Desempenho A IVC garante que as informações aqui contidas estão corretas, e o Cliente, ao executar o software tema da apostila, seguindo as instruções da apostila em questão, terá um desempenho satisfatório desde que o Cliente possua equipamento que obedeça aos requisitos mínimos para seu uso. 2. Utilização O Cliente concorda em não fornecer copia das apostilas IVC para terceiros, bem como não distribuir ou vender via Internet, E-mail, CD-ROM, impresso ou qualquer outra forma de distribuição copia da apostila tema. 3. Alterações O cliente pode copiar, alterar ou modificar a apostila caso necessário, somente no computador que a apostila tema foi adquirida. Outras condições como escolas, cursos, instrutores de informática, empresas, etc, devem notificar as alterações e motivo a IVC, proprietária da apostila em questão.  2000-2002 IVC

www.apostilas.na-web.net

25