Introdução. Área de Trabalho

Transcrição

1 Dreamweaver CS5

2 Sumário Introdução... 1 Área de Trabalho... 1 Ajustes de Preferências... 3 Criando um novo Arquivo Salvando e visualizando um arquivo Trabalhando com imagens Iniciando a Construção do Site - Conceitos e Diretórios Exportando arquivos através do Photoshop Gerenciador de Arquivos - Manage Sites Estilo CSS Trabalhando com Layers Hyperlinks Rollover Image Frames e Iframes Integração com o Flash Tabelas AJAX Utilizando o Framework Spry Criando Páginas para o Site Formulário Criando o menu (Hotspot Image Map) Evento com Janela (JavaScript) Publicando o Site na Internet... 56

3

4 Introdução Adobe Dreamweaver CS5 O Adobe Dreamweaver CS5 é o software mais famoso para designers e desenvolvedores criarem seus sites de maneira rápida e fácil, podendo ser criados visualmente ou direto no código, além de muitos recursos e funcionalidades disponíveis. A novidade é que esta nova versão, inclui suporte para criações e edições mais populares dos dias atuais. Isto é ótimo, tanto para os novos desenvolvedores que estão começando a escrever códigos, quanto para os mais experientes que procuram agilidade. Área de Trabalho Para iniciar o Dreamweaver CS5, clique no botão Iniciar, Todos os Programas, opção Adobe Master Collection CS5 e clique em Adobe Dreamweaver CS5. Logo será iniciado o Dreamweaver CS5 com sua tela inicial. 1

5 Após iniciar o programa podemos visualizar a Start Page (Página Inicial), observe: Start Page (Página Inicial) Quando você executa o Dreamweaver, como padrão ele exibe a Página Inicial. Nela podemos manipular documentos. Open a Recent Item: podemos escolher qualquer documento criado antes pelo Dreamweaver. Create New: podemos criar um documento conforme o tipo que queremos (HTML, ColdFusion, PHP, ASP VBScript, XSLT, CSS, JavaScript, XML), um novo site do Dreamweaver ou mais opções, clicando em More. Top Features (videos): contém informações de como criar outra página baseada em modelo préexistente. Para desativar a Start Page, selecione a opção "Don't show again" (Não mostrar novamente), caso deixe esta opção desmarcada, sempre que iniciado o Dreamweaver exibirá a mesma. Para criar um novo documento, clique na opção HTML. Podemos observar na área de trabalho Designer, que todas as janelas e painéis estão integrados em uma única janela. 2

6 Para alterar a área de trabalho do Dreamweaver, clique no menu Window, Workspace Layout e escolha a opção Coder. Depois de atribuída a opção Coder, observamos as mudanças efetuadas na área de trabalho do Dreamweaver, clicando em cada um dos botões que estão em destaque. A área de trabalho Designer é mais utilizada e os três botões na parte superior permitem que o modo de trabalho seja alterado. Por exemplo, clicando no botão Design, o Dreamweaver muda para o modo de desenho de página. Ajustes de Preferências Para obter melhor resultado nos trabalhos do Dreamweaver CS5, podemos personalizar suas configurações na janela de preferências. Para abrir essa janela, escolha o menu Edit e clique sobre as opções Preferences; pode-se utilizar a tecla de atalho <Ctrl>+<U>. 3

7 Preferências - General Principais componentes. Show Welcome Screen: Selecionada, essa opção define que, quando abrir o Dreamweaver, inicialmente apareça na tela a janela Start Page, permitindo abrir documentos recentes e também criar outros. Reopen documents on startup: Quando estiver marcada, cada página que estava aberta quando fechamos o Dreamweaver, será aberta da próxima vez que inicializarmos o software. Warn when opening read-only files: Quando selecionada, aparecerá uma caixa de alerta toda vez que for aberto um arquivo configurado somente como leitura. Enable Related Files: Ativa arquivos relacionados automaticamente ou manualmente. Update links when moving files: Quando essa opção estiver marcada, ao mudar um arquivo do site, movendo, renomeando ou deletando, por exemplo, o Dreamweaver automaticamente muda as referências a esse arquivo que existiam em outras páginas. Quando escolhida, a opção Always, atualiza essas referências automaticamente. Se a opção Prompt for a escolhida, pergunta se deseja atualizar os arquivos, ou não atualizar nenhum arquivo se for escolhida a opção Never. Show dialog when inserting objects: Quando estiver marcada, ao incluir algum tipo de elemento na tela, como imagens, aparece uma caixa de diálogo com configurações que podemos utilizar. Para não visualizar essas caixas de diálogo, não é necessário desmarcar essa opção, somente manter pressionada a tecla <Ctrl> quando clicar na opção de inserir objeto. Enable double-byte inline input: Algumas espécies de texto, como o japonês, por exemplo, são double-byte. Quando escolhida essa opção, podemos digitar diretamente esse tipo de texto no documento. Se não for escolhida, aparecerá uma caixa de diálogo que faz a conversão do texto nesse tipo. Use <strong> and <em> in place of <b> and <i>: No HTML existem dois tipos de formatações principais para os caracteres, sendo elas formatação física e lógica. 4

8 Os comandos <strong> e <em> simbolizam elementos de formatação lógica para o negrito e o itálico respectivamente. Já os comandos <b> e <i> também simbolizam negrito e itálico, só que em formatação física. Com essa opção marcada, ela utiliza os comandos de formação lógica, se desmarcada, usa a física. Maximum number of history steps: Esse valor define a quantidade de passos que será permitido voltar atrás, seja usando o comando Edit, Undo, tecla de atalho <Ctrl>+<Z>, ou usando um painel chamado History (Histórico). Podendo ser um valor entre 2 e 99. Preferências - Accessibility É nessa área que configuramos as opções de acessibilidade do software. Show attibutes when inserting: Marcando as opções Objetos de formulário (Forms objects), Molduras (Frames), Mídia (Media), Imagens (Images), ao incluir um desses elementos, será aberta uma janela com opções que torna mais fácil a configuração deles. Preferências - AP Elements Nesta área é possível configurar as opções padrão para as DIVs com o posicionamento absoluto (áreas que podem ter sua posição na página definida) usadas do Dreamweaver. Preferências - Code Coloring Nessa área configuramos como serão coloridos os códigos para facilitar a visualização. Document Type: Aqui escolhemos o tipo de documento para o qual desejamos configurar o sistema de cores do código. Esse sistema ajuda a encontrar e identificar os códigos e também possíveis erros. Para fazer a configuração desse sistema de cores, após selecionado o tipo de documento clique no botão Edit Coloring Scheme. Em seguida, é aberta uma nova janela, onde devemos selecionar o elemento desejado em Styles for e à sua direita, as cores do texto (Text color), do fundo (Background color) e aplicar Negrito (B), Itálico (I) ou Sublinhado (U). Background color: Nessa área é escolhida a cor padrão do fundo da janela do código. 5

9 Preferências - Code Format Nesta parte é possível configurar como será formatado o código pelo Dreamweaver. Tab size: Essa opção determina o tamanho utlizado pela tabulação. Esse valor é medido em espaços de caracteres. TD tag: Quando marcada a opção Do not include a break inside the TD tag, o Dreamweaver não incluiu quebra de linha do código caso ela passe a quantidade de caracteres definida em um campo. Advanced Formatting: Realiza definições do código para CSS ou para Tag Libraries. Clique no botão apropriado e na janela que se abre para efetuar suas configurações. Preferências - Code Hints O Dreamweaver nos permite que enquanto digitamos os códigos, recebemos uma dica rápida do código que é possível digitar. Preferências - Code Rewriting 6

10 Essa área do Dreamweaver é responsável por reescrever códigos que já existem em páginas que foram abertas no programa. Preferências - Copy and Paste Aqui definimos como se comportarão os elementos quando copiados de outro programa e colados no Dreamweaver na visualização Design. Preferências - CSS Styles 7

11 Nesta área configuramos opções referentes ao CSS (Cascade Style Sheets - Folhas de Estilo em Cascata), que são elementos responsáveis por quebrar limitações existentes nas marcações HTML, dando maior vantagem ao designer. Preferências - File Compare Podemos fazer uma comparação de determinados arquivos utilizando algum outro programa. Preferências - File Types/Editors Outros softwares podem ser abertos para editar os arquivos diretamente do Dreamweaver. Preferências Fonts Nessa área podemos configurar as fontes utilizadas no programa. Preferências - Highlighting 8

12 Nessa área configuramos as cores que o Dreamweaver usa para identificar certos elementos. Preferências - Invisible Elements Configuramos aqui as representações para elementos invisíveis. Show: Nesse espaço se determinam os elementos invisíveis que deseja ser representados por um ícone na tela de desenvolvimento, optando entre: Âncoras com nome (Named anchors), Scripts, Comentários (Comments), Quebras de linha (Line breaks), Mapas de imagens do cliente (Client-Side image maps), Estilos incorporados (Embedded styles), Campos ocultos de formulários (Hidden form fields), Delimitador de formulários (Form delimiter), Pontos de ancoragem de DIVs com posicionamento absoluto (Anchor points for AP elements), Pontos de ancoragem de elementos alinhados (Anchor points for aligned elements), Tags visuais de markup de servidores (Visual Server Markup Tags - ASP, CFML,...)) e propriedade display do CSS determinada como nenhuma (CSS display: nome). Preferências - New Document Ajustamos as opções para novos documentos do Dreamweaver. Entre algumas, temos: Default document: Escolhemos o tipo padrão para os documentos que vamos criar para o site, escolhendo no menu o tipo que queremos. Default extension: Nessa opção determinamos a extensão padrão para os arquivos a serem criados. Unicode Normalization Form: Se escolher a codificação Unicode (UTF - 8), aplica o formato de normalização que você escolher nesse menu. Preferências - Preview in Browser Escolhemos as configurações para visualização dos arquivos no navegador. Browsers: Podemos definir os navegadores a serem usados para a visualização das páginas. É possível adicionar um navegador clicando no sinal (+) e definir se ele será o primário (chamado pela tecla de atalho <F12>), marcando a opção Primary browser ou secundário (chamado por <Ctrl>+<F12>), marcando Secondary browser. Preview using temporary file: Selecionado, cria uma cópia temporária do arquivo no servidor para podermos visualizá-la. 9

13 Preferências - Site Always show: Configuramos o site (Local ou Remoto) que aparecerá em um dos lados da janela: à Esquerda (Left) ou à Direita (Right). FTP connection: Marcando essa opção, se você estiver conectado ao seu site FTP e se mantiver inativo pelo tempo estipulado à direita deste item, será automaticamente desconectado. FTP time out: Aqui configuramos o tempo máximo que o Dreamweaver faz a tentativa de se conectar com o site FTP. FTP transfer options: Em casos de usuário inativo, configura-se após quanto tempo será escolhida a opção padrão de determinada caixa de diálogo durante o uso FTP. Proxy host: Se você se encontrar atrás de um firewall, deve especificar seu endereço nessa área, caso não, deve deixá-la em branco. Proxy port: Utilizado para fazer a escolha de uma porta se estiver utilizando um firewall e a mesma for diferente da 21. Preferências - Status Bar Velocidade de largura de banda a ser simulada e o tamanho da tela são configuradas nessa área. 10

14 Preferências - Validator Utilizamos esta opção para verificar se nos códigos existem erros nas tags ou de sintaxe. If no DOCTYPE is detected, validate against: Nesta parte, configuramos o tipo de código que vai utilizar como referência para aplicar a validação, caso não tenha sido detectado o tipo de documento, restando apenas escolher as opções na lista disponível. Criando um novo Arquivo Ao iniciar o Dreamweaver CS5, temos em sua área de trabalho o Start Page, onde podemos escolher que tipo de arquivo iremos criar ou se desejamos utilizar um documento pronto. Durante o curso, todos os arquivos que criamos foram do tipo HTML, linguagem de programação padrão para Web. Existem duas maneiras de se criar um novo arquivo: através do menu File, opção New ou então, de um modo mais simples, clicando sobre a opção de arquivo desejada no Start Page. Clique na opção HTML, no Start Page. Após o clique, um novo arquivo é criado e exibido na área de trabalho do Dreamweaver. Note também que aparece no canto superior esquerdo, o Cursor de edição. 11

15 Neste novo arquivo, podemos digitar um texto, inserir uma imagem ou qualquer outro componente do Dreamweaver, e assim que este arquivo for salvo, poderá ser visualizado no browser (Internet Explorer, Mozilla Firefox ou outros). Acima da janela de documento encontra-se um grupo de botões denominado Barra de Ferramentas. Esses botões permitem a execução de algumas tarefas de forma rápida, como alteração do modo de visualização, gerenciamento de arquivos do site, visualização da página no navegador e configuração de opções. No campo Title é possível introduzir um texto a ser apresentado pelo navegador na Barra de Título. O menu View permite que sejam ativadas algumas opções de auxílio ao webdesigner, como régua e grade de linhas. A imagem a seguir, mostra a grade e as réguas apresentadas na área de trabalho. 12

16 É importante mencionar como ativar as réguas (horizontal e vertical) da área de trabalho caso elas estejam desabilitadas. Essas réguas são úteis quando há a necessidade de orientação quanto à posição exata de determinado objeto dentro da página. Para ativá-las, clique no menu View, opção Rulers e selecione Show. Para inserir um texto em uma página do Dreamweaver, basta digitar o texto desejado quando o cursor de edição estiver em modo de espera. Com a janela do Dreamweaver ativa, digite: Primeiro Exemplo. Como um editor de textos qualquer, podemos apagar os textos digitados, bem como editá-los, alterando tamanho e estilo da fonte e aplicando efeitos como Negrito, Itálico, etc. Para formatar um texto, é necessário que o mesmo esteja selecionado. Posicione o cursor ao lado do parágrafo digitado e clique uma vez. 13

17 Após a seleção, o painel Properties (Propriedades) habilita suas funções para edição de textos. HTML: abre o painel HTML do Dreamweaver. Format: formata o parágrafo com estilos de textos e alinhamentos predefinidos pelo Dreamweaver. Bold e Italic: permitem aplicar a formatação em Negrito e Itálico. Formatação de Texto: Unordered List: aplica marcadores ao(s) parágrafo(s) selecionados(s). Ordered List: aplica numeração ao(s) parágrafo(s) selecionado(s). Remove Blockquote: retira os recuos de parágrafo. Blockquote: define um recuo de parágrafo. Com o texto selecionado, clique no drop-down da opção Format e selecione a opção desejada. Alteramos a cor do texto através da Paleta de cores. Após o clique, é exibida a Paleta de cores. Posicione o cursor sobre a cor desejada e clique para que ela seja aplicada ao texto. O Dreamweaver CS5 abre a caixa de diálogo New CSS Rule (Nova regra CSS). Nesta caixa devemos informar o tipo e o nome do seletor de contexto CSS. Selecione a primeira opção disponível na caixa de combinação, digite a descrição Título na caixa Selector Name e clique no botão OK. 14

18 CSS: Abre o painel de CSS do Dreamweaver. Targeted Rule: Exibe as regras criadas através do CSS. Font: Possui uma lista de fontes para formatação de texto. Text Color: Paleta de cores que permite aplicar cor ao texto. Align Left: Alinha o parágrafo à esquerda. Align Center: Alinha o parágrafo ao centro. Align Right: Alinha o parágrafo à direita. Justify: Justifica o parágrafo. Salvando e visualizando um arquivo Todo e qualquer arquivo criado no Dreamweaver, para ser visualizado em um browser, deve, antes de tudo, ser salvo. Com o arquivo desejado, clique no menu File, opção Save. 15

19 Após o clique será exibida a caixa de diálogo Save As. Nesta caixa, devemos informar o nome do arquivo e o local onde ele será salvo. Em Tipo, mantenha selecionada a opção mostrada abaixo, para que o arquivo seja salvo com a extensão.html. Feito isso, clique sobre o botão Salvar da caixa de diálogo. No Dreamweaver, com seu documento em uso, clique sobre o botão Preview/Debug in browser. Em seguida, selecione a opção Preview in IExplore para visualizá-lo no Internet Explorer. Após o clique, o IE será exibido, tendo como conteúdo, a página HTML criada por você. Observe na Barra de Título da janela do Internet Explorer (IE), que o arquivo ainda não possui título. Geralmente definimos um nome para cada página como um informativo, ou ainda, um único título padrão para todas as páginas do projeto. 16

20 Retornando ao Dreamweaver, definiremos um título para a nossa página. Na Barra Document, selecione e apague o texto da caixa Document Title. Com o cursor no campo Title, digite a descrição que desejar. Além de visualizarmos nosso arquivo no Internet Explorer (IE), podemos também utilizar outros browsers. Para isso, clique sobre o botão Preview/Debug in browser e escolha a opção Edit Browser List. Será iniciada a janela de Preferences. Para adicionar um novo browser, clique sobre o botão Add Browser. Na caixa de diálogo Add Browser, clique sobre o botão Browse... Na caixa Select Browser, abra a pasta e selecione o ícone do navegador desejado. 17

21 Ao indicar o caminho do browser, selecione o mesmo como secundário pois temos o Internet Explorer como navegador primário. O novo browser será adicionado à lista. No Dreamweaver CS5, com seu documento ativado, clique sobre o botão Preview/Debug in browser e selecione a opção Preview in firefox.exe. Após o clique, o Mozilla Firefox será exibido, tendo como conteúdo a página Html. No Dreamweaver pode ser encontrado o recurso Device Central que é um aliado para quem desenvolve sites para dispositivos móveis. Ele traz skins de diversos handhelds e celulares, e formata o conteúdo Html dentro da área de cada um. No arquivo desejado, clique em Preview/Debug in browser e escolha a opção Preview in Device Central. Caso queira visualizar utilizando outros tamanhos de display, navegue pelas opções da guia Test Devices, opção Flash Player. 18

22 Trabalhando com imagens Trabalhar com imagens, quando falamos de Internet, pode parecer um processo simples, mas não é. Digamos que seja simples inserir um arquivo de imagem em uma página HTML, sim, mas esta deve seguir alguns padrões, para que por exemplo, não implique na demora do carregamento da página do projeto ou então, que esteja com um nível de qualidade baixo, a ponto de implicar na visualização perfeita realizada pelo usuário. Os tipos de arquivos de imagens mais usuais, pelo fato de suas características atenderam aos requisitos de páginas web, são JPG (JPEG), GIF e PNG. Formato JPEG (Joint Photographic Experts Group) O formato de arquivo JPEG é o formato preferido para imagens fotográficas ou em tom contínuo, pois os arquivos JPEG podem conter milhões de cores. À medida que a qualidade de um arquivo JPEG aumenta, também aumentam o tamanho e o tempo de download do arquivo. Você geralmente consegue um bom equilíbrio entre a qualidade da imagem e o tamanho do arquivo compactando um arquivo JPEG. O JPEG é um dos formatos de imagens mais populares e isso se deve à capacidade de formar imagens fiéis à original. Além disso, os arquivos em JPEG costumam não ser grandes. Formato Gif (Graphic Interchange Format) Os arquivos GIF usam um máximo de 256 cores e são mais adequados para a exibição de imagens em tom não-contínuo ou imagens grandes de cores simples, como barras de navegação, botões, ícones, logotipos ou outras imagens com cores e tons uniformes. Formato PNG (Portable Network Group) 19

23 O formato de arquivo PNG é um substituto sem patentes para GIFs que inclui suporte à imagens true-color, em tons de cinza e de cores indexadas, além de suporte a canal alfa para transparência. PNG é o formato de arquivo nativo do Adobe Fireworks. Os arquivos PNG retêm todas as informações originais de camada, vetor, cor e efeitos (como sombras) e todos os elementos são completamente editáveis, continuamente. Os arquivos devem ter a extensão.png para serem reconhecidos como arquivos PNG pelo Dreamweaver. Graças aos formatos JPEG, GIF e PNG, foi possível utilizar figuras em várias aplicações em imagens na Internet. Até mesmo o layout das páginas de Internet utilizam estas imagens e é importante frisar que existem vários outros tipos de formatos para imagens. As imagens são sempre inseridas na posição em que o cursor estiver, seja em uma linha simples do documento, seja dentro de uma tabela, etc. Para que a imagem seja inserida centralizada, clique em Align Center. Logo será exibida a caixa New CSS Rule, em Selector Name:, digite a descrição e clique no botão OK. Com o cursor na posição definida, clique sobre o botão drop-down da opção Images, no painel Insert, guia Common. Note que é exibido um submenu com as opções de inserção disponíveis. Escolha a opção Image. Após o clique, será exibida a caixa de diálogo Select Image Source, onde devemos escolher qual será a imagem a ser inserida no documento. 20

24 Após escolher a imagem, clique no botão OK, para que a mesma seja inserida na página, no local indicado. Após o clique, será exibida uma mensagem na qual podemos informar um pequeno texto que deve ser mostrado no navegador quando não for possível carregar a respectiva imagem. Perceba que com a imagem selecionada, o painel Properties exibe campos que nos permitem fazer alterações nas propriedades da imagem. Dentre os recursos mais utilizados, temos: possibilidade de inserir um link, definir uma borda, alinhamento, etc. Não aconselhamos que seja alterado o seu tamanho através das caixas W (Width) e H (Heigth), pois as variações não são proporcionais, o que pode causar a deformação da imagem. Para aplicar uma imagem ao fundo de uma página, no arquivo desejado, clique no botão Page Properties (Propriedades da Página), localizado no painel Properties. Na caixa de diálogo aberta, clique em Browse..., para que seja possível a localização da textura que iremos inserir. Através do campo Examinar, selecione o local desejado e clique duas vezes na imagem. Em seguida, clique no botão Apply para adicionar a textura do arquivo e clique em OK para confirmar. No campo Title, digite a descrição que desejar para que a mesma seja exibida na guia da página. 21

25 Integração com o Photoshop CS5. Com a compra da Macromedia pela Adobe, se tornou possível a integração entre o Dreamweaver e o Photoshop. Vamos aprender como inserir um arquivo criado no Photoshop que possui a extensão.psd, em uma página do Dreamweaver. Após inserir a imagem.psd em um novo arquivo, como a extensão do Photoshop (.psd) não pode ser utilizada em páginas HTML, será aberta a janela Image Preview. Nesta janela serão realizados os ajustes necessários na imagem que será exportada. Caso não realize nenhuma alteração na imagem, clique no botão OK. Agora podemos trabalhar com uma imagem que foi gerada a partir de um arquivo do Photoshop. Ao selecionar a imagem inserida, perceba que no painel Properties terá um novo campo chamado Src, representado pelo ícone do Photoshop, o mesmo indica o caminho do arquivo psd. Outra forma de integração é copiar uma imagem do Photoshop e colá-la diretamente no Dreamweaver. Iniciando a Construção do Site - Conceitos e Diretórios Um site do Dreamweaver CS5 é um conjunto de arquivos que formam as páginas da Web. Você pode criar páginas da Web no computador, carregá-las em um servidor Web e manter o site transferindo arquivos atualizados sempre que os salvar. Um dos pontos mais importantes, quando iniciamos a construção de um projeto de site, é a organização dos arquivos em diretórios e subdiretórios. 22

26 O mais usual é deixar as páginas HTML do site na raiz de diretórios e separar em pastas distintas as imagens, o material pesquisado, os arquivos de download, etc. Nesta lição, criamos uma estrutura de diretórios que receberá todo o material utilizado para o desenvolvimento de um Website. Após criar as pastas desejadas, acesse o diretório, para visualizar o seu conteúdo. Logo em seguida, abra a pasta Arquivos PSD. Acessando o diretório. Exportando arquivos através do Photoshop Existem várias formas de se criar a estrutura de um site. Podemos abrir o Dreamweaver, criar algumas tabelas, inserir alguns dados e imagens e pronto! Além destas opções, podemos também "desenhar" ou desenvolver um layout em um software de edição de imagens, como o Photoshop. O site pode ser totalmente desenvolvido em um destes softwares ou apenas parte dele, como por exemplo, um menu diferente ou apenas o seu topo, etc. Este arquivo é então exportado como HTML, com uma pré estrutura de tabelas montada. Através do Photoshop CS5, clicamos sobre o menu File, opção Open, e abrimos um arquivo que, quando exportado, será a página principal do site. Após escolher a opção do menu File, será exibida a caixa de diálogo Open. Localize a Sua Pasta e acesse o diretório criado por você. Clique sobre o arquivo e no botão Abrir. 23

27 Pressione as teclas <Ctrl>+<+>, para visualizar o arquivo com Zoom de 100%, caso ainda não esteja. Agora pressione a tecla <Tab>, para que possamos vê-la por inteira, assim ficarão ocultas as Barras de Ferramentas. Para voltar as barras, aperte a tecla novamente. O que temos é um arquivo que contém várias imagens e textos. Caso você tenha feito o curso de Photoshop CS5 ou tenha conhecimentos deste programa, pode perceber que seu desenvolvimento não é complicado, contendo algumas formas, imagens e textos e formando o layout de um site. Note como no mesmo arquivo, definimos um topo para a página, um menu, um rodapé, etc. Mas, o que fazer para definir cada uma destas áreas para um documento Html? Simples! Não podemos disponibilizar todo o arquivo na Web, pois como dito anteriormente, as páginas devem ter um carregamento um tanto quanto rápido, e uma imagem com esta complexibilidade, comprometeria tal exigência. O que devemos fazer então, é dividir este arquivo em partes, para que cada uma seja carregada separadamente, de uma forma mais rápida. Utilizamos então duas ferramentas do Photoshop: as Slices, que definem as partes do arquivo, e as Guides, para que as Slices sejam desenhadas. Para posicionar as Guides ou Linhas-Guia, precisaremos da régua (Rulers). Com a régua sendo exibida, posicionaremos as Guides nos locais de cortes que faremos na imagem. Clique em um ponto qualquer da Régua Horizontal e com o botão do mouse pressionado, arraste a linha para o ponto 5,0 da Régua Vertical. 24

28 Clique na Régua Vertical e arraste uma linha-guia para a posição desejada da Régua Horizontal. Não se esqueça de que você pode utilizar o Zoom (<Ctrl>+<+> ou Ctrl+<->) e mantendo a Barra de Espaço pressionada, clicar para movimentar o documento. Diminua o Zoom para 100%, altere o valor na Barra de Status e pressione <Enter>. Veja que agora o documento já está com as guias posicionadas para os cortes. Então, definimos as fatias da imagem ou Slices. Aperte a tecla <Tab> para ativar as Barras de Ferramentas. Mantenha o mouse pressionado sobre a ferramenta Crop Tool e quando surgir as opções, clique sobre Slice Tool. Exportando arquivos através do Photoshop Após o clique, o cursor tomará outro formato: de uma pequena "faca". As Slices serão definidas dentro dos espaços gerados pelas Guides. Utilize as teclas <Ctrl>+<-> para reduzir o Zoom. Ao terminar a fatia, pressione as teclas <Ctrl>+<+>. 25

29 Agora, que o arquivo já está pronto para ser exportado, utilizaremos um recurso do Photoshop que, ao salvar o documento, analisa cada parte separada por Slices e exporta um arquivo Html e Imagens, em separado. O programa cria uma página com uma tabela, respeitando o número de linhas e colunas definidas pelas fatias; cria uma pasta no diretório escolhido por você com o nome de images e armazena dentro dela os arquivos e imagens em formato GIF. Clique no menu File, opção Save for Web & Devices... Em seguida, surgirá a caixa de diálogo Save for Web & Devices, exibindo a imagem que será exportada. Verifique se na caixa Optimized file format está selecionada a opção GIF e clique sobre o botão Save. Será exibida agora a caixa de diálogo Save Optimized As. Em Salvar em, localize a Sua Pasta e depois o diretório Dream_CS5. Modifique o formato do arquivo através do campo Format, clique no botão drop-down e selecione HTML and Images. As caixas de diálogos serão fechadas logo após o término do processo de exportação. Feche o Photoshop e confirme a gravação do arquivo. Abra o Windows Explorer e acesse seu diretório de arquivos, para que seja possível ver se foi realizado o processo de exportação. 26

30 O Photoshop exporta o arquivo com extenção HTML (index) e cria a pasta images, com os arquivos.gif. Gerenciador de Arquivos - Manage Sites Tanto para sites simples quanto para os mais complexos, é inevitável a transferência de arquivos de diretórios para diretórios, cópias, etc. Bem como, ficar a todo momento, exibindo-os para manutenção, edição ou simples conferência de dados. Vimos até agora, como abrir arquivos e modelos através do menu File localizando os diretórios desejados e utilizamos o Windows Explorer para a cópia ou transferência de arquivos. O Dreamweaver possui um gerenciador de arquivos (Manage Sites) que nos permite ter acesso de forma simples e objetiva aos arquivos e diretórios do projeto no qual estivermos trabalhando. A principal função do gerenciador está ligada aos recursos de transferência de arquivos para servidores externos, ou seja, é um software FTP ligado ao programa. Utilizando comandos simples, podemos fazer alterações em nossos documentos e já atualizá-lo via web, em seu servidor, sem a necessidade de um outro programa para tal. Com o painel exibindo suas opções, temos algumas a destacar. 27

31 Nome do Projeto: no gerenciador, é permitido manter vários projetos cadastrados, e com isso, basta escolher o projeto desejado. Local de Trabalho: através deste campo podemos definir se queremos visualizar os arquivos existentes localmente (na máquina) ou na Web (servidor do site). Barra com os botões de ações: esta barra contém as principais operações do gerenciador. Gerenciador de arquivos: é neste local que serão exibidos os diretórios e os arquivos do projeto em uso. Abra o Dreamweaver CS5 e o arquivo index.html, caso o mesmo não esteja aberto. Vamos construir para esse arquivo um Manage Sites. No painel Files, clique em Manage Sites. Após o clique, surgirá a caixa de diálogo Manage Sites, clique no botão New. A próxima caixa de diálogo que surgirá será Site Setup for Unnamed Site 2, com a guia Site ativa. Em Site Name informamos o nome do site, apague a descrição e digite o que desejar. Em seguida, para indicar o caminho do arquivo, ative o Browse for folder para localizar o arquivo dentro da sua subpasta Dream_CS5. Clique no botão Salvar. 28

32 Ao retornar à caixa de diálogo Site Setup, clique na opção Advanced Settings. Em Local info, vamos indicar o caminho das imagens, ative o Browse for folder, localize a pasta Dream_CS5, em seguida abra a subpasta images, clique no botão Salvar. Ao retornar a janela Site Setup, clique no botão Save. Na última janela, clique no botão Done. Ao finalizar a construção do Manage Site, surgirá seu Código, sua pasta images, PSD e seu arquivo index.html. Clique sobre os sinais + ou - para exibir ou ocultar os arquivos dos diretórios. O Servidor Remoto é o local onde seu site será publicado, ou seja, um servidor que possa ser acessado por usuários do mundo todo, nas 24 horas do dia. Todo arquivo que faz parte do site deve ser copiado para este servidor. Este processo é chamado de Upload ou "Subir arquivos". Na Barra de Menus, encontramos comandos para a criação de arquivos e diretórios nos locais de trabalho (Local ou Remoto), bem como, para a criação e configuração de novos sites no gerenciador. Clique novamente sobre o botão Collapse to show only local or remote site para reduzir o tamanho da janela. 29

33 Estilo CSS As Folhas de estilo em Cascata CSS (Cascading Style Sheets) permitem a formatação automática e rápida dos documentos HTML. Por exemplo, se você definiu um estilo para os textos do título da página e o aplicou a várias páginas, quando fizer alguma alteração no estilo, como, por exemplo, mudar a cor dos caracteres, todas as páginas que apresentam o título configurado com ele serão automaticamente atualizadas. Repare que do lado direito da tela do Dreamweaver, existe um painel chamado CSS. Nele, existe uma guia chamada CSS Styles, onde editaremos os estilos CSS. Caso não exista na tela este painel, clique no menu Window e escolha a opção CSS Styles. Attach Style Sheet: adiciona ao documento um estilo já pronto (arquivo.css). Esse procedimento será explicado mais adiante. New CSS Rule: cria um estilo através de uma caixa de diálogo. Edit Style Sheet...: edita o estilo selecionado na lista. Disabe/Enable CSS Property: ativa e desativa o acesso às propriedades da lista. Delete CSS Property: apaga o estilo selecionado na lista. 30

34 Para iniciar um estilo, clique no ícone. Surgirá a caixa de diálogo New CSS Rule. Selecione a opção Class, o qual será o estilo aplicado a cada tag de script contido em sua página. Depois especifique o nome no campo Selector Name: como Estilo1. Selecione também a opção New Style Sheet File. Em seguida, clique no botão OK. Aparecerá uma nova caixa de diálogo Save Style Sheet File As, onde você deve especificar o nome do arquivo (.CSS) e o local onde ele será gravado. Defina o nome como Texto, indique o caminho da Sua Pasta\Dream_CS5 e depois clique no botão Salvar. É importante salientar que é preferível salvá-lo no mesmo local onde será gravada a página HTML. Após criar o arquivo, surgirá a caixa de diálogo CSS Rule Definition for, podemos definir as características do estilo criado, especificando: fonte, cor, fundo da janela, posicionamento, tabela, etc. 31

35 Através do botão Code, repare no cabeçalho do código HTML e veja a ocorrência do estilo, especificando que neste caso, está linkado a um arquivo externo. Ative o botão Design, no painel Properties, mantenha a opção HTML selecionada e clique no drop-down do campo Class para confirmar a existência do estilo criado. Para formatarmos o texto, selecione o mesmo. Depois, vá até o campo Class e escolha Estilo1. 32

36 Clique no botão Split e repare no código. A propriedade do estilo está em forma de tag e o texto passa a ter uma nova formatação. Trabalhando com Layers Layer (ou camada) é um elemento de páginas HTML que você pode posicionar em qualquer lugar, pois, diferente dos outros, esse parece "flutuar" sobre o layout da página. Assim como numa célula de tabela, numa layer, é possível inserir textos, imagens ou qualquer outro conteúdo que possa ser inserido em um documento HTML. No Dreamweaver, você pode usar layers para construir o layout de sua página. É possível colocar layers uma sobre a outra, ocultar alguns enquanto mostra outros e movê-los pela tela. Para inserirmos uma layer: No menu Insert, opção Layout Objects, escolha AP Div. Você também pode inseri-las através da Barra Insert, na opção Layout e ferramenta Draw AP Div. 33

37 Você se lembra do painel CSS Styles? Pois bem, é nele que encontramos a guia AP ELEMENTS, que contém a relação de layers criadas. Aqui, podemos ocultar layers, nomeá-las e ordená-las umas sobre as outras. O painel Properties também apresenta as propriedades da layer selecionada. Hyperlinks Hyperlink (ou somente link) é o termo usado para o recurso que faz uma "ligação" entre um local e um outro componente, que pode ser uma página, figura, vídeo, , etc. Os links são os responsáveis pela navegação rápida entre as páginas e o acionamento dos downloads. A propósito, você usa links o tempo todo durante o curso, clicando em Voltar, Próximo, etc... No Dreamweaver é muito rápido e fácil elaborar os vários tipos de links. Nessa lição aprenderemos como "linkar" uma página à outra, a fazer links de s e outras propriedades. Com a palavra desejada selecionada, clique no botão HTML do painel Properties e depois no botão Browse for File. 34

38 Com esse procedimento, você escolherá o destino desse link. Você também pode digitar o caminho no campo Link, do painel Properties. Pronto! Você acabou de fazer um link para uma página. Dê um clique fora do texto e repare que agora, o texto está na cor azul e sublinhado. Essa é uma característica padrão dos links. Clicando no botão drop-down, você verá uma lista com 5 opções de alvo, caso a opção não esteja ativada, clique sobre o link criado para ativá-la. _blank e _new:: as duas opções tem a função de carregar a página em uma nova janela. _parent: carrega a página em um frame ou janela do frame que contém o link. _self: carrega a página no mesmo frame ou janela do link. Essa opção é a mesma da padrão. _top: carrega a página em uma janela maximizada em toda a tela (fullscreen), removendo todos os frames. Rollover Image O Rollover Image, é uma opção muito conhecida do Dreamweaver. Quando você acessa um site e passa o mouse por cima de uma determinada imagem e a mesma se altera, esse efeito chamamos de Rollover Image. Este efeito funciona por meio de substituição de uma imagem por outra. Clique no menu Insert, Image Objects e selecione a opção Rollover Image. 35

39 A caixa de diálogo Insert Rollover Image será aberta. Image name: Um nome para seu Rollover. Original image: Primeira imagem que irá aparecer. Rollover image: Imagem que irá aparecer quando você passar o mouse por cima. Preload rollover image: Marque esta opção para que quando a página carregar, sua outra imagem seja carregada também. Alternate text: Texto que irá aparecer junto à imagem. When clicked, Go to URL: Link da sua imagem. Preencha o campo Image name com o nome que desejar. Este é um nome de identificação desse objeto. Clique sobre o primeiro botão Browse..., e escolha a imagem desejada e clique em OK. Clicamos no próximo botão Browse... para selecionarmos a outra imagem que aparece quando o cursor do mouse estiver posicionado sobre o objeto. O campo When clicked, Go to URL representa o endereço de outra página, a qual será aberta após o clique no botão. Frames e Iframes Às vezes é interessante manter uma parte da página fixa e outra parte variável. Isso é possível, dividindo-se a página em partes, isto é, em Frames. Esse recurso, apesar de pouco popular, continua sendo uma boa alternativa. A principal vantagem de uma página com frames é que podemos fazer links em um deles e carregar o conteúdo linkado no outro. Clique no menu File no Dreamweaver e selecione a opção New. Na caixa de diálogo New Document, selecione Page from Sample e, em Sample Folder escolha Frameset. Serão apresentados 15 tipos de disposição de frames. Escolha Fixed Top, Fixed Bottom e clique no botão Create. 36

40 O documento criado apresenta 3 frames: o topo (TopFrame), o principal (MainFrame) e o inferior (BottomFrame). Para salvar este documento, utilize o comando Save Frameset As. Salvamos o arquivo com a descrição frames.html dentro da sua Sua Pasta e da subpasta Dream_CS5. Primeiramente faremos com que esse documento comporte-se como três páginas distintas, mas em conjunto. O frame do topo abrirá uma determinada página, o frame inferior outra e o principal também. Escolha a opção Frames, do menu Window. Você verá o painel Frames ativado. Aqui, você pode selecionar o frame desejado clicando com o mouse. Após selecionar o topframe, no campo Src do painel Properties, especifique o caminho para o arquivo desejado. 37

41 Confirme a caixa de diálogo que surge, clique em Sim para fazer a cópia do arquivo que está sendo inserido e na próxima caixa, clique em Cancelar. Selecione agora o bottomframe pelo painel Frames. No campo Src, indique o caminho para o outro arquivo. Arquivo inserido. Selecione agora o mainframe pelo painel Frames. No campo Src, indique o caminho para o arquivo index.html. Teste sua página. Veja que o topframe e o bottomframe ficam estáticos, enquanto o mainframe possui uma Barra de Rolagem vertical e horizontal. Integração com o Flash Atualmente, os browsers têm a capacidade de exibir inúmeros tipos de arquivo de imagem, som e multimídia. Essa variedade contribui muito para a criação de páginas cada vez mais criativas. Uma das tecnologias multimídia mais usadas em páginas para web é o Flash. Esses arquivos permitem animação, som e interação, aumentando a interação com o usuário e melhorando a atratividade da página. Podemos inserir facilmente imagens e conteúdo criados com o Adobe Flash em um documento do Dreamweaver. Você também pode editar uma imagem ou arquivo SWF no editor original depois de inseri-los em um documento do Dreamweaver. 38

42 Para inserir um arquivo Flash, vá até o menu Insert, opção Media e escolha SWF. Você também pode fazê-lo através da Barra de Ferramentas Common, no botão Media : SWF. Você provavelmente verá uma mensagem avisando que se deve salvar o documento antes. Clique em OK e na caixa de diálogo aberta, digite a descrição desejada e clique em Salvar. Na caixa de diálogo Select SWF, procure pelo arquivo, selecione-o e clique no botão OK. Clicando em OK, surge a mensagem confirmando se quer salvar uma cópia do arquivo que está sendo inserido, clique em Sim, mantenha localizada a Sua Pasta e depois confirme clicando no botão Salvar. Após salvar o arquivo, surgirá a caixa de diálogo Object Tag Accessibility Attributes, clique somente no botão OK, pois não vamos colocar título. Como todo componente, o Flash tem suas propriedades específicas. Repare no painel Properties ao selecionar o componente. 39

43 Salve as alterações do arquivo e teste sua página para ver como ficou. A animação deve ser exibida imediatamente. Tabelas O uso de Tabelas em documentos HTML é muito útil na apresentação de informações de maneira organizada. Tabelas são objetos que inserimos nos arquivos para organizar a estrutura de uma página. Cada Tabela é formada por um número N de linhas, que pode ser dividida por um número N de colunas, chamadas de Células. É uma ferramenta eficaz para apresentar dados tabulares e dispor o texto e os gráficos. Embora as colunas não sejam, em geral, especificadas explicitamente no código HTML, o Dreamweaver permite que você manipule colunas, bem como linhas e células. Posicione o cursor na célula referente a imagem desejada. Feito isso, clique sobre o botão Table, no painel Common. Na caixa de diálogo Table, temos diversas opções que podemos definir antes de inserir a tabela: seu tamanho, o número de linhas e colunas, a espessura da borda, etc. Vejamos as opções de edição mais utilizadas. 40

44 Table size: Rows: número de linhas. Columns: número de colunas. Border thickness: espessura da borda. Se definirmos o valor 0, quando visualizada no browser, a tabela não exibirá suas linhas. Cell padding: define o espaço entre a célula e seu conteúdo. Cell spacing: define o espaço entre cada uma das células. Table width: o primeiro campo define o tamanho da tabela e o segundo se esse valor deve ser em pixels ou percent (porcentagem), em relação ao documento. Accessibility: Caption: neste campo, podemos definir um nome para cada tabela, podendo então diferenciálas entre si. Header: As opções contidas em Header permitem que se defina qual será o cabeçalho da tabela, ou seja, quais as células que receberão formatações diferentes das demais. Preencha a caixa de diálogo: Clique sobre o botão OK. A tabela será inserida na posição definida pelo cursor. Na caixa de diálogo, informamos que a tabela deverá ser formada por 1 linha e 1 coluna. Definimos o valor 140 para o seu tamanho. A tabela também não terá sua borda visível e não haverá nenhum espaço entre as células e seus conteúdos por isso os demais campos estão com valor 0. 41

45 Para retirar a seleção de uma tabela, basta clicar em qualquer ponto da página. Sempre que desejarmos fazer algum tipo de alteração em uma tabela, devemos selecioná-la antes. Existem duas formas de se fazer isto: clicando sobre a borda da mesma ou ativando um pequeno menu de opções. Com a tabela selecionada, formatamos o seu alinhamento. No painel Properties, clique sobre o botão drop-down do campo Align e escolha a opção Center. Mesmo após a inserção de uma tabela, com número de linhas e colunas definidas, ainda podemos inserir mais algumas ou até mesmo excluí-las. Posicione o cursor na célula da tabela e pressione a tecla <Tab>. Veja que uma linha será adicionada, respeitando a formatação da tabela. Clicando com o botão direito do mouse sobre uma das células será exibido um menu. Na opção Table temos disponível um submenu com algumas das formatações disponíveis. Para inserir mais uma coluna na tabela, escolhemos a opção Insert Column, do menu de opções citado acima. 42

46 Ainda podemos definir o número de linhas e colunas através do painel Properties. Selecione a tabela, utilizando uma das formas mostradas anteriormente, altere o valor do campo Colls para 5 e pressione <Enter> para confirmar. É comum, em determinados casos, a necessidade de transformar várias células em uma só, para chegar a determinados alinhamentos da tabela. Este processo é chamado de Merge ou Mesclar. Aprenderemos a mesclar uma célula para começar a inserir o conteúdo do site. Selecione as seguintes células, como mostra o exemplo abaixo, clique sobre a primeira e com o cursor pressionado, arraste até a última. Com o intervalo de células selecionado, clique sobre o botão Merges selected cells using spans, no painel Properties. Após o clique, as células selecionadas tornar-se-ão uma só 43.

47 AJAX Utilizando o Framework Spry Uma das maiores novidades desde a versão CS3 é a capacidade de gerar páginas em AJAX, o qual está ficando muito popular. O que é o AJAX? Através do AJAX temos na verdade um sistema que gera uma página inicial e simultaneamente recebe informações que são armazenadas para posteriormente utilizá-las. Clicando, por exemplo, em um botão ou link, a demora à qual estávamos acostumados desaparece, pois o próprio sistema usa as informações que possui e muda na própria página que está utilizando as áreas que terão modificações. O Gmail é um site que funciona desta forma, por exemplo. Utiliza principalmente XML e JavaScript, mas como era de se esperar, desenvolver diretamente um conteúdo AJAX demandaria um conhecimento profundo das tecnologias que o formam. Para facilitar o trabalho, temos diversos frameworks (uma espécie de biblioteca de códigos) para criar conteúdo AJAX. A Adobe possui o seu framework para criar conteúdo AJAX, chamado Spry. Spry Menu Bar A estrutura do Spry destina-se principalmente aos profissionais de design. Agora iremos conhecer alguns elementos denominados Spry Widgets, que são na realidade elementos principalmente de interface, como: menus tabs, etc, e que utilizam o framework Spry para tornar mais interessante seu resultado visual. A primeira opção que iremos conhecer é a Spry Menu Bar, uma Barra de Menus. Na Barra Insert, aba Spry, clique sobre Spry Menu Bar. Você poderá escolher dois layouts de menus, escolha o Horizontal e clique em OK. Após o clique, o menu será inserido. Selecione a parte de cima do menu (que possui uma aba azul com o texto Spry Menu Bar) habilitando assim a opção Properties. 44

48 Vamos alterar o seu "nome", para isso apague o texto MenuBar1 e o substitua com a descrição desejada. Para alterar o nome destes menus, selecione o Item 1. Visualize o campo Text, apague o Item 1, digite a descrição desejada e pressione <Enter>. Outra opção do Framework Spry que pode ser bem aplicada é a Spry Tabbed Panels. Em um novo documento, clique sobre a opção Spry Tabbed Panels. Selecione o Spry Tabbed Panels e observe suas propriedades. Em Properties temos a opção Panels onde é exibida a lista de guias já inseridas. Para alterar o nome da guia, selecione-a no documento. Após a seleção, digite a informação. Logo abaixo podemos visualizar um campo que contém o texto Content 1, neste campo vamos inserir um pequeno texto. 45

49 Com a guia ativa, vá até o documento e selecione a palavra Content 1. Ao selecionar, digite o conteúdo que deseja. Criando Páginas para o Site Para começarmos a criação de páginas no site, criamos um template para que o processo de criação seja mais simples e prático. Após abrir o arquivo html desejado, criaremos agora, as regiões editáveis (Editable Regions). Clique com o botão direito do mouse sobre a região desejável, vá até a opção Templates e escolha New Editable Region. Caso apareça a janela de aviso do Dreamweaver, clique sobre o botão OK. Defina o nome e clique em OK. 46

50 Após a criação da região editável, modifique o seu alinhamento no painel Properties. Altere a propriedade Vert para o tipo Top e apague a descrição. A seguinte tabela foi inserida. Em nosso exemplo, clicamos em uma das células da tabela e alteramos a propriedade H (Altura) no painel Properties para 330 pixels. Clicamos dentro de cada uma das três colunas e alteramos a largura na propriedade W de acordo com as medidas: 244px - 25px - 429px. Alteramos também o alinhamento interno das células para: Vert-Top. Criamos três links, os mesmos foram utilizados a partir da lição Criando o menu (Hotspot Image Map) que define uma área sobre uma figura onde é possível criar o link. Clique no botão Rectangle Hotspot Tool, selecione o botão Home e confirme a caixa de mensagem. 47

51 Em seguida, no campo Link, digite index.html e tecle <Enter> para confirmar. Clique novamente na opção Rectangle Hotspot Tool e selecione o botão com a descrição Destaques. Ao terminar, no campo Link digite destaques.html. Faça o mesmo com o botão Contato e no campo Link digite contato.html. Podemos também selecionar o objeto com a ferramenta Rectangle Hotspot Tool e depois localizar o arquivo que servirá como link através do botão Browse for File no painel Properties. Agora, vem o passo mais interessante: transformar a página em um modelo, ou melhor, em Template. No menu File e escolhemos o comando Save as Template... Na caixa de diálogo Save As Template, no campo Save as, mantenha o nome escolhido. Selecione no campo Site o seu código de matrícula que criamos na lição de configuração do Manage Sites e clique em Save. Na janela Dreamweaver - Update Links?, clique em Sim. O Dreamweaver criou a pagina.dwt, que é um template, colocando-o na respectiva lista. Agora, que já temos o nosso template, basta criarmos nossas páginas a partir dele. Para isso, usaremos o recurso Novo a partir do Template. No menu File, clique em New, para criar um novo arquivo. Na caixa de diálogo New Document, clique na guia Page from Templates. Você verá a lista de sites cadastrados na coluna Template for e os templates pertencentes a esses sites na coluna ao lado. É possível também, ter a visualização do seu template. Selecione o nome escolhido. 48

52 O documento criado contém as mesmas características do template. Veja que é especificado a partir de qual template ele foi criado no canto superior direito. Repare também, que é mostrada a área editada (regiao), criada anteriormente. Digite as informações que desejar. Este arquivo foi salvo com a descrição destaques.html. Caso apareça a caixa de mensagem confirmando a cópia dos arquivos contidos na página que está sendo salva, clique em Copy e depois em OK na mensagem seguinte. Se desejar, altere o título da página. 49

53 Formulário Formulário é um recurso que permite coletar informações de um usuário e enviá-las a um determinado . É muito útil e é usado por empresas para pesquisas, formulários de pedidos e interfaces de busca. É uma maneira muito prática e inteligente de se comunicar com o usuário, permitindo que ele receba informações posteriormente. Nele, o usuário inserirá alguns de seus dados e os enviará para um determinado . Agora, vamos habilitar as ferramentas para o formulário. Na Barra de Ferramentas, clique na guia Forms. Ferramentas utilizadas na construção do formulário. 1. Form: cria uma área na página, que será destinada ao conteúdo do formulário. 2. Text Field: cria uma área que aceita qualquer tipo de texto. O texto digitado pode ser exibido como uma linha simples, múltiplas, marcadores ou asteriscos (com a finalidade de proteger senhas). 3. Hidden Field: permitem armazenar informações (como o destinatário dos dados do formulário ou seu assunto) que não são relevantes ao usuário, mas que serão utilizadas pelo aplicativo que processa o formulário. 4. Textarea: tem a mesma função do Text Field, mas permite uma área maior de texto multilinhas. 5. Checkbox: permite a escolha de múltiplas respostas em um único grupo de opções, não cancelando as anteriores. 6. Checkbox Group: permite a escolha de múltiplas respostas em dois grupos de opções, não cancelando as anteriores. 7. Radio Button: representa opções exclusivas. A seleção de um dos botões do grupo cancela a seleção de outros. 8. Radio Group: insere um grupo de Radio Buttons. 9. Select(List/Menu): permite criar uma lista de opções. 10. Jump Menu: permite inserir um menu, no qual cada opção vincula-se a um documento ou arquivo (links). 11. Image Field: pode ser utilizado no lugar de um botão de ação, exercendo a mesma tarefa. 12. File Field: permite que o usuário procure por arquivos que estejam em sua máquina, carregando-os como dados do formulário. Muito utilizado por sites que disponibilizam contas de . É o campo utilizado para anexar arquivos às mensagens. 13. Button: insere botões de ação, realizando tarefas quando são clicados. 14. Label: especifica um rótulo. 15. Fieldset: especifica um rótulo em uma área de formulário. 50

54 O segredo de um formulário bem organizado está na construção de uma tabela, pois ela ajustará com eficiência os componentes Forms. Inicialmente, crie a área para o formulário clicando no botão Form. Com o cursor dentro do Form, pressione a tecla <Enter>, para que possamos visualizar o formulário e a tabela que será inserida. Em Properties, na opção Vert, selecione Top. Pressione a seta de direção do teclado para cima ( primeira linha. ), para que o cursor fique posicionado na Criamos a tabela conforme especificações abaixo e centralizamos o cursor como align center, na região destinada ao formulário pixels de largura - 8 linhas - altere o valor do CellPad e CellSpace para 0 - cores: #99CCFF e #CCCCFF Foi utilizada a opção Checkbox, da barra de ferramentas Forms. 51

55 O componente Checkbox é usado geralmente para marcação de múltiplas opções, ou seja, permite que você marque todas ou nenhuma delas. Veja abaixo, suas propriedades no painel Properties. Para isso, basta selecionar uma delas. Propriedades do componente Text Field. Para inserirmos os botões que enviarão os dados para um , clicamos no interior da última linha, inserimos uma tabela com 2 colunas e com o alinhamento centralizado, clicamos na opção Button. Temos dois botões, um para enviar os dados e o outro para "resetar" o formulário, ou seja, apagar todas as informações escritas. Clique no primeiro botão e observe suas propriedades. Altere as propriedades para cada um deles. O passo final agora, é definir para onde e como os dados irão após o envio. Para isso, selecione o formulário para que apareçam suas propriedades. 52

56 Digite as propriedades conforme a figura nos campos Action e Enctype. Action: é a ação, ou seja, o que o formulário vai fazer. No caso, enviar os dados para um e- mail(mailto:). Method: determina como o navegador enviará os dados do formulário. O método POST faz com que os dados do formulário sejam transmitidos em uma transação em separado (uso do Outlook, por exemplo), enquanto o GET obriga os dados do formulário a serem anexados ao URL do script. Um primeiro exemplo da prática desses métodos é quando se transmite a senha de um usuário para um servidor autenticar. Se o formulário utiliza o método GET, a senha passa através da URL. Sendo assim, qualquer pessoa que tenha acesso ao computador do usuário poderá descobrir a senha. Enctype: é o modo como serão mostrados os dados enviados no . Usando text/plain, os dados aparecem separados por linhas. Agora, salve e teste sua página no browser! Preencha os dados e teste os botões. Clicando em Enviar, os dados irão para o especificado anteriormente. 53

57 Criando o menu (Hotspot Image Map) Temos que realizar a ligação entre as páginas, ou seja, os links. Utilizamos um recurso chamado Mapeamento de Imagem com Hotspot, que consiste em definir uma área sobre uma figura, possibilitando a criação de um link. Clique sobre a figura referente ao botão Destaques. Repare que no painel Properties, existem algumas opções destinadas ao Map. Pointer Hotspot Tool: manipula as regiões criadas. Rectangle Tool: cria regiões retangulares. Circle Tool: cria regiões circulares. Polygon Tool: cria regiões poligonais. Após ter selecionado a imagem, clique no Rectangle Hotspot Tool e faça uma região sobre a palavra. Veja que, logo após, o painel Properties já exibe as opções para definição do destino do link. Preencha o campo Link com destaques.html ou localize o arquivo pelo ícone. 54

58 Evento com Janela (JavaScript) O que é JavaScript? JavaScript é uma linguagem que permite injetar lógica em páginas escritas em HTML (HyperText Mark-up Language). Os parágrafos de lógica do JavaScript podem estar "soltos" ou atrelados à ocorrência de eventos. Os parágrafos soltos são executados na sequência em que aparecem na página (documento) e os atrelados a eventos são executados apenas quando o evento ocorre. Para inserir parágrafos de programação dentro do HTML, é necessário identificar o início e o final do código JavaScript, da seguinte forma: <SCRIPT> códigos </SCRIPT> Este procedimento pode ser adotado em qualquer local da página. Entretanto, para melhor visualização e facilidade de manutenção, recomenda-se que toda a lógica seja escrita no início do documento através da criação de funções a serem invocadas quando fizerem necessárias (normalmente atreladas a eventos). No arquivo index.html, acrescentamos um código Script que irá chamar uma outra janela. Este pop-up conterá alguma informação adicional do site. Exiba o código HTML de seu documento, clicando na guia Split ou Code. Localize a tag </style>. Posicione o cursor depois dele e tecle <Enter> para criar uma nova linha. Com o cursor posicionado abaixo da palavra </style>, digite o seguinte código: 55

59 Vamos entender o JavaScript digitado: <script language="javascript">: abertura do código JavaScript. window.open: indica qual será a função do código; neste caso abrir uma janela. ("pop_up.htm","popup",'scrollbars=no,width=245,height=245'): caminho (arquivo), nome da janela e opções (sem barra de rolagem, largura e altura). </script>: fecha o código JavaScript. O arquivo pop_up.html e a imagem pop_up.jpg copiamos para a pasta images. Visualize sua página index.html, através do browser e veja o resultado. Publicando o Site na Internet Após finalizar completamente o site, você deve disponibilizá-lo na Internet. Ainda mais, se você estiver construindo um site para uma empresa e o cliente tiver pressa de ver os resultados. No caso da criação de site para simples divulgação pessoal, sem nenhum objetivo comercial, pode-se utilizar um dos diversos sites de hospedagem gratuita atualmente disponíveis. É preciso verificar com o provedor no qual o site será hospedado a forma adotada para envio dos arquivos. A maioria utiliza o envio por meio do protocolo FTP, pelo qual, você compartilha seus arquivos com o provedor de uma maneira mais rápida através de um programa. Se a página estiver sendo desenvolvida para uma empresa (cliente), entre em contato com o provedor da mesma, para que os arquivos sejam enviados. Mas lembre-se de que as páginas devem sempre ser atualizadas de acordo com as necessidades da empresa que o contratou, pois os internautas sempre estão à procura de novidades. Por isso, quanto mais diversificado e interessante for o site, mais visitas ele terá. 56

60 Para ter um espaço disponível em um destes sites, basta que você se cadastre e aceite os termos de contrato, colocando em sua página apenas arquivos e imagens aceitos por ele. Utilizamos o site No lado direito da janela, clique na opção Publicar HTML grátis. É necessário que seja realizado um cadastro para a publicação do site que será feito através do Dreamweaver. Além da criação da conta é preciso fazer sua ativação através do para que o login seja reconhecido no site. Informe o Login que você desejar e seu . Em Categoria selecione a opção que desejar, digite a senha e confirme-a. Em seguida, marque a opção Concordo com o Termo de Serviço e clique em Cadastrar. Após o clique, irá surgir a tela de conclusão do cadastro. Em seguida, abra o seu cadastrado para a ativação do site e clique na mensagem da Equipe XPG. Selecione o link de validação, copie-o, cole o link na Barra de Endereços e pressione a tecla <Enter>. Você será redirecionado para a página do XPG. Informe o Login, ou seja, seu nome de usuário e a Senha. Observe o seu endereço para acessar o site após a publicação. Agora, abra o Dreamweaver e o arquivo index.html caso tenha fechado. Na guia Files, clique sobre a opção Expand to show local and remote sites. 57

61 Observe que uma nova janela surge do Dreamweaver, podemos observar que ela está dividida em duas partes a Local Files (seus arquivos locais) e a Testing Server (onde serão armazenados os arquivos do site). Caso não esteja visualizando a opção Testing Server, clique em Testing Server. Agora definimos as configurações de FTP do site, clique no link define a testing server. A caixa Site Setup for 0000 será aberta. Em Site Name informe Air Turismo e localize o caminho Local Site Folder da Sua Pasta, este local indica onde serão salvos os arquivos do site. Selecione a opção Servers e clique no botão Add New Server. Em seguida, em Server Name, informe Air Turismo e preencha os campos. 58

62 Clique em Save, ao retornar a caixa Site Setup for Air Turismo, marque Remote, caso não esteja. Clique em Advanced Settings, em Local Info já estará selecionada a pasta padrão de imagens. Clique no botão Save. Pronto, agora para realizar a conexão com o servidor FTP do XPG, clique sobre a opção Connects to remote host. Selecione todos os arquivos do Local Files, pois iremos transferi-los para o Testing Server. Após selecionar, clique sobre o botão Put File(s) e para completar esta ação, clique no botão OK. 59