Escolar Documentos
Profissional Documentos
Cultura Documentos
CENTRAL DE ATENDIMENTO
(81) 3542.1446
1
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Introduo.
O Dreamweaver CS5 da Adobe uma IDE de desenvolvimento Web em HTML profissional para desenhar, codificar e desenvolver sites, pginas e aplicativos para a Web. Para aqueles que gostam do controle da codificao manual HTML ou para os que preferem trabalhar em um ambiente de edio visual, o Dreamweaver fornece ferramentas teis para aprimorar a sua experincia de criao para Web. Os recursos de edio visual do Dreamweaver permitem criar pginas, de modo rpido, sem que seja necessrio escrever uma nica linha de cdigo. possvel visualizar todos os elementos ou propriedades do site e arrast-los de um painel fcil de usar diretamente para um documento. Dinamize o fluxo de trabalho de desenvolvimento de sites criando e editando as imagens no Fireworks da Adobe ou em outro aplicativo grfico e, posteriormente, importando-as diretamente para o Dreamweaver ou incluindo objetos do Flash da Adobe. O Dreamweaver tambm fornece um ambiente de codificao completo que inclui ferramentas de edio de cdigos (como codificao por cores e preenchimento de tags) e material de referncia de linguagens sobre Cascading Style Sheets (Folha de estilo em cascata) (CSS), JavaScript e ColdFusion Markup Language (CFML), entre outros. A tecnologia HTML do Adobe Roundtrip permite importar documentos HTML codificados manualmente sem reformatar o cdigo; em seguida, voc pode optar por reformatar o cdigo, aplicando o seu estilo de formatao preferido. O Dreamweaver tambm permite criar aplicativos dinmicos e com suporte de banco de dados para a Web, utilizando tecnologia de servidor como CFML, ASP.NET, ASP, JSP e PHP. O Dreamweaver inteiramente personalizvel. Crie os seus prprios objetos e comandos, modifique os atalhos de teclado e adicione cdigos JavaScript para ampliar ainda mais os recursos do Dreamweaver com novos comportamentos, Property inspectors (Inspetores de propriedades) e relatrios de site.
Veja na gravura abaixo toda a estrutura e as partes da rea de trabalho do Dreamweaver CS5.
2
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
3
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
A barra de ferramentas Style Rendering (Processamento de estilo) (oculta por padro) contm botes que possibilitam ver como ficaria o projeto com tipos de mdia diferentes se fossem utilizadas folhas de estilo dependentes de mdia. Ela tambm contm um boto que permite ativar ou desativar estilos CSS. A janela do documento exibe o documento que est sendo criado e editado. O Property inspector permite que voc exiba e altere vrias propriedades do objeto ou texto selecionado. Cada tipo de objeto apresenta diferentes propriedades. Por padro, o Property inspector no expandido no layout da rea de trabalho Coder. O seletor de tags, localizado na barra de status situada na parte inferior da janela do documento, mostra a hierarquia das tags que fazem parte da seleo atual. Clique em qualquer tag na hierarquia para selecion-la e exibir todo o seu contedo. Os grupos de painis so conjuntos de painis relacionados, agrupados sob um cabealho. Para expandir um grupo de painis, clique na seta de expanso esquerda do nome do grupo. Para desencaixar um grupo de painis, arraste a pina na extremidade esquerda da barra de ttulo do grupo. O painel Files permite gerenciar arquivos e pastas que faam parte de um site do Dreamweaver ou que estejam localizados em um servidor remoto. O painel Files tambm permite acessar todos os arquivos contidos no disco local, de forma semelhante ao Windows Explorer (Windows) ou ao Finder (Macintosh).
A janela do documento
A janela do documento mostra o documento que est aberto. possvel selecionar uma das seguintes visualizaes: A visualizao do projeto (Design) um ambiente de projeto que voc utiliza para criar o layout visual da pgina, executar a edio visual e desenvolver rapidamente os aplicativos. Nessa visualizao, o Dreamweaver exibe uma representao inteiramente editvel do documento, semelhante visualizao de uma pgina em um navegador. possvel configurar a visualizao do projeto para que exiba o contedo dinmico durante o trabalho com o documento A visualizao do cdigo (Code) um ambiente de codificao manual para gravar e editar cdigo HTML, JavaScript, de linguagem de servidor como PHP ou ColdFusion Markup Language (CFML) e qualquer outro tipo de cdigo. As visualizaes do cdigo e do projeto (Split) permitem ver o documento nessas duas visualizaes em uma nica janela. Quando a janela do documento contiver uma barra de ttulo, esta exibir o ttulo da pgina e, entre parnteses, o nome e o caminho do arquivo. Aps o nome do arquivo, o Dreamweaver exibir um asterisco, se voc tiver feito alteraes ainda no salvas. No Windows, quando a janela do documento maximizada no layout de rea de trabalho integrada, ela no contm a barra de ttulo. Nesse caso, o ttulo da pgina, e o nome e caminho do arquivo aparecero na barra de ttulo da janela principal da rea de trabalho.
Quando a janela do documento est maximizada, as guias aparecem na parte inferior da rea da janela do documento, mostrando os nomes de arquivo de todos os documentos que estiverem abertos. Para alternar para um documento, clique na sua respectiva guia.
4
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
As seguintes opes so mostradas na barra de ferramentas do documento: Code - Exibe apenas a visualizao de cdigo na janela do documento. Split - Exibe a visualizao de cdigo em uma parte da janela do documento e a visualizao do projeto na outra parte. Quando essa visualizao combinada selecionada, a opo Design View on Top (Visualizao do projeto no alto) torna-se disponvel no menu View Options. Utilize essa opo para especificar qual visualizao aparecer na parte superior da janela do documento. Design - Exibe apenas a visualizao do projeto na janela do documento. Server Debug - Exibe um relatrio para ajudar na depurao da pgina atual do ColdFusion. O relatrio inclui erros da pgina, se houver. Ttulo do Documento - Permite que voc digite um ttulo para o documento, que ser exibido na barra de ttulo do navegador. Se j existir, o ttulo do documento aparecer nesse campo. Verificao de Erros - Permite verificar a compatibilidade entre diferentes navegadores. Validar o Markup - Permite validar o documento atual ou uma tag selecionada. Gerenciamento de Arquivos - Exibe o menu pop-up File Management. Visualizador o Navegador - Permite visualizar ou depurar o documento em um navegador. Atualizar a visualizao do projeto - Atualiza a visualizao do projeto do documento aps as alteraes feitas na visualizao de cdigo. As alteraes feitas na visualizao de cdigo no so exibidas automaticamente na visualizao do projeto at que sejam executadas determinadas aes, por exemplo: salvar o arquivo ou clicar neste boto.
5
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Opes de Exibio - Permite definir as opes das visualizaes de cdigo e do projeto, inclusive qual visualizao deve aparecer em primeiro plano. As opes do menu so relacionadas exibio atual: a visualizao do projeto, a visualizao do cdigo ou ambas.
A barra de status
A barra de status, situada na parte inferior da janela do documento, fornece informaes adicionais sobre o documento que est sendo criado.
Ferramenta Zoom Ampliao Definida Tamanho do documento e tempo estimado para download
O seletor de tags mostra a hierarquia das tags que fazem parte da seleo atual. Clique em qualquer tag na hierarquia para selecion-la e exibir todo o seu contedo. Clique na tag <body> para selecionar o corpo inteiro do documento. A ferramenta Mo permite que voc clique no documento e arraste-o na janela do documento. Clique na ferramenta Seleo para desativar a ferramenta Mo. A ferramenta Zoom e o menu pop-up Set Magnification (Definir ampliao) permitem que voc defina um nvel de ampliao para o documento. O menu pop-up Window Size (visvel apenas na visualizao do projeto) permite redimensionar a janela do documento para um tamanho predeterminado ou personalizado. direita do menu pop-up Window Size so mostradas as estimativas de tamanho do documento e de tempo de download da pgina, incluindo todos os arquivos dependentes, como os arquivos de imagens e de outras mdias.
A barra Insert
A barra Insert contm botes para voc criar e inserir objetos, como tabelas, camadas e imagens. Quando voc passa o mouse sobre um boto, exibida uma dica de ferramenta com o nome desse boto.
Os botes so organizados em diversas categorias, que podem ser alternadas no lado esquerdo da barra Insert. Categorias adicionais so exibidas quando o documento atual contm cdigo do servidor, como
6
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
documentos ASP ou CFML. Quando o Dreamweaver inicializado, a ltima categoria com a qual voc trabalhou aberta.
Algumas categorias possuem botes com menus pop-up. Quando voc seleciona uma opo em um menu pop-up, ela se torna a ao padro do boto. Por exemplo, se voc selecionar Image Placeholder (Alocador de espao de imagem) no menu pop-up Image (Imagem), o Dreamweaver inserir um alocador de espao de imagem na prxima vez que o boto Image for clicado. Sempre que voc selecionar uma nova opo no menu pop-up, a ao padro do boto ser alterada. A barra Insert est organizada nas seguintes categorias: A categoria Common (Comuns) - Permite criar e inserir os objetos mais utilizados, como imagens e tabelas. A categoria Layout - Permite inserir tabelas, tags div, camadas e quadros. Voc tambm pode escolher entre trs visualizaes de tabelas: Standard (Padro), Expanded Tables (Tabelas expandidas) e Layout. Quando o modo Layout for selecionado, podero ser utilizadas as ferramentas de layout do Dreamweaver : Draw Layout Cell (Desenhar a clula de layout) e Draw Layout Table (Desenhar a tabela de layout). A categoria Forms (Formulrios) - Contm botes para criar formulrios e inserir elementos de formulrio. A categoria Text (Texto) - Permite inserir uma variedade de tags de formatao de texto e de lista, como b, em, p, h1 e ul. A categoria HTML permite inserir tags HTML para rguas horizontais, contedo do cabealho, tabelas, quadros e scripts. A categoria HTML - Permite inserir tags HTML para rguas horizontais, contedo do cabealho, tabelas, quadros e scripts. A categoria HTML - Permite inserir tags HTML para rguas horizontais, contedo do cabealho, tabelas, quadros e scripts. A categoria Application (Aplicativo) - Permite inserir elementos dinmicos, como conjuntos de registros, regies repetidas e formulrios de insero e de atualizao de registros. A categoria Flash elements (Elementos Flash) - Permite inserir elementos Adobe Flash. A categoria Favorites (Favoritos) - Permite agrupar e organizar em um nico local os botes da barra Insert mais utilizados.
7
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
No possvel desencaixar nem mover a barra de ferramentas Coding, mas voc pode ocult-la.
Barra de Ferramentas Coding Permite voc realizar vrias atividades de codificao padro, muito usada para trabalhar com banco de dados Web. Usar essa barra se torna muito til, por que permite realar, corrigir e aplicar cdigos prontos.
Voc tambm pode editar a barra de ferramentas Coding para exibir mais botes (como Word Wrap [Quebra de linha], Show Hidden Characters [Mostrar caracteres ocultos] e Auto Indent [Recuo automtico]) ou ocultar botes que no deseja utilizar. Para isso, voc deve editar o arquivo XML que gera a barra de ferramentas.
8
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Para alternar entre a visualizao do cdigo e a visualizao do projeto: Pressione Control+til (~)
Selecione um dos tamanhos no menu pop-up Window Size situado na parte inferior da janela do documento.
O tamanho da janela mostrado reflete as dimenses internas da janela do navegador, sem incluir as bordas. O tamanho do monitor exibido entre parnteses. Por exemplo: seria recomendvel utilizar o tamanho 536 x 196 (640 x 480, padro) se os visitantes do site estiverem utilizando o Microsoft Internet Explorer ou o Netscape Navigator com configuraes padro em um monitor de 640 x 480 pixels. Para alterar os valores na lista do menu pop-up Window Size: 1. No menu pop-up Window Size, selecione Edit Sizes.
9
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
2. Clique em qualquer dos valores de largura ou altura na lista Window Sizes e digite um novo valor. Para que a janela do documento se ajuste apenas a uma largura especfica (mantendo a altura inalterada), selecione um valor de altura e exclua-o. 3. Clique na caixa de texto Description (Descrio), para digitar um texto descritivo sobre determinado tamanho. 4. Clique em OK para salvar a alterao e retornar janela do documento. Para adicionar um novo tamanho ao menu pop-up Window Size: 1. No menu pop-up Window Size, selecione Edit Sizes. 2. Clique no espao em branco abaixo do ltimo valor na coluna Width (Largura). 3. Digite os valores de Width e Height (Altura). Para definir apenas os valores de largura ou de altura, basta deixar um desses campos vazio. 4. Clique no campo Description, para inserir um texto descritivo sobre o tamanho adicionado. 5. Clique em OK para salvar a alterao e retornar janela do documento. Por exemplo, digite SVGA ou PC comum ao lado da entrada referente a um monitor de 800 x 600 pixels, e Mac de 17 pol. ao lado da entrada referente a um monitor de 832 x 624 pixels. A maioria dos monitores permite ajustes para vrias dimenses em pixels.
3. Defina as opes de preferncias. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. 4. Clique em OK.
10
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Como alternativa para a barra Insert e o Property inspector, utilize os menus contextuais para criar e editar objetos.
Clique com o boto direito do mouse (no Windows) ou clique com a tecla Control
pressionada (Macintosh) em uma das barras de ferramentas e, em seguida, selecione a barra de ferramentas no menu contextual.
Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada (no Macintosh) na barra Insert da barra de ferramentas do documento, da barra de ferramentas padro ou da barra de ferramentas Coding e selecione Insert Bar (Barra Insert).
Para mostrar os botes em uma determinada categoria: Clique na seta ao lado do nome da categoria (no lado esquerdo da barra Insert) e selecione outra categoria no menu pop-up.
11
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Para exibir o menu pop-up de um boto: Clique na seta para baixo ao lado do cone do boto.
Clique na seta ao lado do nome da categoria (no lado esquerdo da barra Insert) e selecione Show as Tabs (Mostrar como guias). As categorias so exibidas como guias na parte superior da barra Insert.
Nota
Talvez seja necessrio clicar na barra de ttulo da barra Insert para reabri-la.
Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada (no Macintosh) na barra Insert e selecione Show as Menus (Mostrar como menus). A barra Insert exibe as categorias em um menu, em vez de em guias.
12
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
um dos procedimentos abaixo: Clique em um objeto de boto ou arraste o cone de boto para a janela do documento. Clique na seta em um boto e selecione uma opo no menu.
Dependendo do objeto, poder ser exibida uma caixa de dilogo de insero de objeto correspondente que solicita a busca um arquivo ou de parmetros especficos de um objeto. Como alternativa, o Dreamweaver poder inserir o cdigo no documento, ou abrir um editor de tags ou um painel para que voc especifique informaes antes da insero do cdigo. Se um objeto for inserido na visualizao do projeto, nenhuma caixa de dilogo ser exibida; no entanto, se o objeto for inserido na visualizao de cdigo, o editor de tags ser exibido. No caso de alguns objetos, sua insero na visualizao do projeto far com que o Dreamweaver alterne para a visualizao do cdigo antes de inserir o objeto. Para ignorar a caixa de dilogo de insero de objetos e inserir um objeto alocador de espao vazio: Pressione Control (no Windows) ou Option (no Macintosh) e clique no boto correspondente ao objeto. Por exemplo, para inserir um alocador de espao de uma imagem sem especificar um arquivo de imagem, pressione Control ou Option, e clique no boto Image. Esse procedimento no ignora todas as caixas de dilogo de insero de objeto. Muitos objetos, inclusive as barras de navegao, camadas, botes Flash e conjuntos de quadros (framesets), no inserem alocadores de espao ou objetos com valor padro.
Nota
Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh). A caixa de dilogo Preferences exibe a categoria de preferncias General (Geral).
2. Desmarque Show Dialog When Inserting Objects (Mostrar a caixa de dilogo quando inserir
objetos) para suprimir caixas de dilogo quando inserir objetos, como imagens, tabelas, scripts e elementos head, ou pressione a tecla Control (Windows) ou Option (Macintosh) durante a criao do objeto.
Quando o objeto inserido com essa opo desativada, so conferidos valores de atributos padro ao objeto. Utilize o Property inspector para alterar as propriedades do objeto aps a insero.
Nota
3. Clique em OK.
13
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Para adicionar, excluir ou gerenciar itens na categoria Favorites: 1. 2. Selecione qualquer categoria na barra Insert. Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada (no Macintosh) na rea em que os botes aparecem (no clique com o boto direito no nome da categoria); em seguida, selecione Customize Objects (Personalizar objetos). Ser exibida a caixa de dilogo Customize Favorite Objects (Personalizar objetos favoritos).
3.
Faa as alteraes necessrias. Para obter mais informaes, clique no boto Help da caixa de dilogo. 4. Clique em OK. A categoria Favorites mostrar as alteraes efetuadas.
Dica
No lado esquerdo da barra Insert, selecione a categoria Favorites e, em seguida, clique no boto de qualquer objeto da categoria Favorites que tenha sido adicionado.
Nota
A categoria Favorites no conter boto algum at que voc a personalize para adicionar objetos.
14
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Nota
Talvez seja necessrio expandir o Property inspector para exibir todas as propriedades do elemento selecionado.
Para alterar as propriedades de um elemento de pgina: 1. Selecione o elemento de pgina na janela do documento.
Nota
3.
Para obter informaes sobre propriedades especficas, selecione um elemento na janela do documento e, em seguida, clique no cone Help no canto superior direito do Property inspector.
Em sua maioria, as alteraes que voc fizer nas propriedades sero imediatamente aplicadas janela do documento. Se as alteraes no forem aplicadas imediatamente, siga um destes procedimentos: Clique fora dos campos de texto de edio de propriedades. Pressione a tecla Enter (no Windows) ou Return (no Macintosh). Pressione a tecla Tab para alternar para outra propriedade.
15
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Quando um grupo de painis flutuante (separado), exibida uma barra vazia estreita na parte superior do grupo de painis. Nesta documentao, o termo barra de ttulo do grupo de painis se refere rea na qual o nome do grupo de painis mostrado, e no barra vazia estreita.
Para fechar um grupo de painis de modo que ele no seja visvel na tela
Nota
No menu Options (Opes) da barra de ttulo do grupo de painis, selecione Close Panel Group (Fechar o grupo de painis). O grupo de painis desaparecer da tela.
16
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Para abrir um painel ou um grupo de painis que no esteja visvel na tela: Selecione o menu Window e, em seguida, selecione um nome de painel no menu. Uma marca de seleo ao lado de um item, no menu Window, indica que ele est aberto (embora possa estar oculto atrs de outras janelas).
Se voc no conseguir localizar um painel, inspetor ou janela marcado como aberto, selecione Window > Arrange Panels (Organizar painis) para posicionar adequadamente todos os painis abertos.
Dicas
Para ver o menu Options de um grupo de painis, caso ele no esteja sendo exibido:
Para expandir o grupo de painis, clique em seu nome ou na seta de expanso. O menu Options ficar visvel quando o grupo de painis for expandido.
Algumas opes esto disponveis no menu contextual do grupo de painis mesmo quando o grupo est reduzido. Clique com o boto direito do mouse (no Windows) ou pressione Control e clique (no Macintosh) na barra de ttulo do grupo de painis para exibir o menu contextual
Para encaixar um grupo de painis em outros grupos de painis (rea flutuante de trabalho) ou na janela integrada, apenas no Windows: Arraste o grupo de painis utilizando a pina, at que o seu contorno indique que ele no est mais acoplado.
Dicas
17
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Para desanexar um painel de um grupo de painis: No menu Options da barra de ttulo do grupo de painis, selecione Group With (Agrupar a) > New Panel Group (Novo grupo de painis). O nome do comando Group With alterado de acordo com o nome do painel ativo. O painel ser exibido em um novo grupo de painis individual.
Para encaixar um painel em um grupo de painis: Selecione o nome de um grupo de painis no submenu Group With do menu Options do grupo de painis. O nome do comando Group With alterado de acordo com o nome do painel ativo.
Para arrastar um grupo de painis flutuantes (separados) sem encaix-lo: Arraste o grupo de painis pela barra situada acima da barra de ttulo. O grupo de painis no ser encaixado caso no seja arrastado pela respectiva pina.
Para maximizar um grupo de painis, siga um destes procedimentos: No menu Options, na barra de ttulo do grupo de painis, escolha Maximize Panel Group (Maximizar o grupo de painis). Clique duas vezes em qualquer parte da barra de ttulo do grupo de painis. O grupo de painis ser verticalmente expandido de modo a preencher todo o espao vertical disponvel.
18
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Para renomear um grupo de painis: 1. No menu Options da barra de ttulo do grupo de painis, selecione Rename Panel Group (Renomear grupo de painis). Digite um novo nome e, em seguida, clique em OK
2.
Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh). A caixa de dilogo Preferences ser exibida. Selecione Panels na lista Category esquerda. Selecione opes. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. 4. Clique em OK.
2. 3.
19
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
20
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Se a estrutura da pasta remota no coincidir com a da pasta local, o Dreamweaver efetuar o upload dos arquivos para o local incorreto e eles no estaro visveis para os visitantes do site. Os caminhos para as imagens e os links tambm sero rompidos. necessrio que o diretrio raiz remoto exista para que o Dreamweaver possa se conectar a ele. Se no houver um diretrio raiz para a pasta remota, solicite ao administrador do servidor que crie um ou crie-o voc mesmo. Mesmo se pretender editar apenas uma parte do site remoto, duplique localmente toda a estrutura da ramificao do site remoto, desde a raiz do mesmo at os arquivos a serem editados. Por exemplo: se a pasta raiz do site remoto (denominada public_html) contiver duas pastas (Projeto1 e Projeto2) e voc desejar trabalhar apenas com os arquivos HTML no Projeto1, no haver necessidade de efetuar o download dos arquivos do Projeto2, porm ser necessrio mapear a pasta raiz local para public_html, em vez de Projeto1.
21
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Ao clicar no menu Site >> New Site, ativamos o recurso de configurao. Na aba Advanced, a primeira categoria a Local Info. Como o nome a indica abriga as informaes locais, ou seja, do disco rgido em que o site desenvolvido e atualizado. Aqui, voc deve inserir o nome de identificao do site e a pasta local em que os arquivos esto. Note que h uma caixa especfica para as imagens. Uma boa dica prtica de webdesign deixar as imagens numa pasta separada. Isso facilita futuras modificaes no site e deixa a estrutura mais organizada. Na caixa HTTP Address voc informa a URL do site, se tiver uma.
REMOTE INFO
A categoria Remote Info guarda as informaes de conexo com o site remoto, ou seja, o servidor em que os arquivos sero hospedados. A caixa Access, nica da categoria Remote Info, possui seis opes de acesso remoto. None, FTP, Local/Network, WebDav, RDS, e Microsoft Visual Source Safe.
22
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Na maioria dos casos, as trs primeiras opes so suficientes. Se voc no tem acesso a nenhum servidor Web, simplesmente escolha None.
Se tem um servidor web rodando no PC em que o site est, ou em outro micro da rede, escolha Local/Network e, na caixa remote Folder, navegue at a pasta em que os arquivos sero hospedados. Se aps completar o site voc vai transferir o contedo para um provedor de internet, escolha a opo FTP e preencha os campos com dados de login e senha fornecida pelo provedor. O Dreamweaver possui um cliente de FTP embutido para transferncia de arquivos, dispensando o uso de clientes FTP externa. TESTING SERVER
A categoria Testing Server apresenta opes de tecnologias dinmicos suportadas pelo Dreamweaver, entre elas ASP, PHP e Coldfusion. Aqui, voc deve escolher a opo de linguagem em que seu site est sendo desenvolvido. Se suas pginas so estticas, ou seja, contm apenas cdigo HTML simples voc pode passar direto por essa categoria. Veja toda a estrutura da figura da prxima pgina.
23
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Adobe Dreamweaver CS5 Testing Web Design (Desenvolvedor Web) Server: Definio da tecnologia dinmica
utilizada.
CLOAKING
Diretrios remotos com muitos arquivos costumam demorar para serem exibidos, devidos demora em carregar toda a lista de documentos. Para evitar esse problema, o Dreamweaver oferece o recurso de cloaking.
Ele permite esconder arquivos que esto em um diretrio, mas no precisam ser exibidos durante a manuteno do site. Assim, o servidor FTP mostra apenas os documentos desejados, o que acelera a atualizao do site. Em sites com muitas imagens, por exemplo, convm esconder arquivos de extenso
24
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
JPEG, deixando apenas os documentos HTML que sero atualizados. Para esconder arquivos com vase na extenso, clique na caixa Cloak file ending with e insira e extenso desejada. DESIGN NOTES
Esta categoria gerencia as notas de design do Dreamweaver. As notas de design funcionam como um post-it, fornecendo informaes adicionais sobre as pginas criadas. Por meio das notas de design, vrias pessoas que trabalham no mesmo arquivo podem ficar a par das atualizaes feitas por seus companheiros de projeto. O recurso Design Notes bastante til em sites desenvolvidos coletivamente. Mas se voc trabalha sozinho, pode desabilitar.
Aqui voc pode ajustar alguns aspectos do mapa de site gerado pelo Dreamweaver. O mapa um recurso til em sites de grande porte, pois mostra visualmente as relaes de hierarquia entre os arquivos. Esta categoria permite configurar largura e informaes exibidas no mapa.
Esta opo uma das menos importantes na configurao do site. Ela permite ajustar quais colunas so exibidas quando o site visto no modo de mapa expandido. Neste modo, o Dreamweaver divide a tela em duas reas: uma para os arquivos locais e outra para os remotos. Em cada uma das reas h colunas que informam tamanho, tipo, data de modificao e outros atributos dos documentos. A opo File view columns permite trocar a ordem ou esconder essas colunas.
25
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
CONTRIBUTE
Esta categoria ativa a compatibilidade do site configurado com o Contribute, aplicativo de gerenciamento de sites da Adobe.
Portanto, til apenas para aqueles utilizam este programa. Quando acionado, o recurso permite utilizar o controle de eventos do Contribute, que auxilia no gerenciamento do site.
Outras opes de documentos tambm esto disponveis. Por exemplo, se voc geralmente trabalha com um tipo de documento, poder defini-lo como o tipo de documento padro para as novas pginas que criar. No Dreamweaver, possvel definir com facilidade as propriedades de um documento, tais
26
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
como tags meta, ttulo de documentos e cores de fundo, alm de vrias outras propriedades de pgina na visualizao do projeto ou na visualizao do cdigo. Este captulo contm as seguintes sees:
Dicas
4.
Nota
27
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Para criar um novo documento a partir de um arquivo de projeto do Dreamweaver: 1. Selecione File (Arquivo)> New (Novo). 2. A caixa de dilogo New Document (Novo documento) exibida. A guia General (Geral) j est selecionada. Na lista Category (Categoria), selecione CSS Style Sheets (Folhas de estilo CSS), Table Based Layouts (Layouts baseados em tabelas), Page Designs (CSS) (Projetos de pgina [CSS]) Page Designs (Projetos de pgina) ou Page Designs (Accessible) (Projetos de pginas [acessveis]). Em seguida, selecione um arquivo de projeto na lista direita. Voc pode visualizar um arquivo de projeto e ler uma breve descrio dos elementos de projeto de um documento. Para obter mais informaes sobre as opes dessa caixa de dilogo, clique no boto Help (Ajuda) na caixa de dilogo.
3. Clique no boto Create (Criar). O novo documento aberto na janela do documento. Se voc tiver selecionado uma folha de estilos CSS, o documento CSS aparecer na janela do documento e a folha de estilos CSS ser aberta na visualizao do cdigo. 4. Salve o documento - Se o arquivo contiver links para os arquivos de propriedades, a caixa de dilogo Copy Dependent Files (Copiar os arquivos dependentes) ser aberta para voc salvar uma cpia dos arquivos dependentes. 5. Se a caixa de dilogo Copy Dependent Files aparecer, defina as opes e, em seguida, clique em Copy (Copiar) para copiar as propriedades na pasta selecionada. Voc pode escolher sua prpria localizao para os arquivos dependentes ou utilizar a localizao da pasta padro gerada pelo Dreamweaver (com base no nome de origem do arquivo de projeto).
Para criar um novo documento a partir de um modelo: 1. Selecione File (Arquivo)> New (Novo). A caixa de dilogo New Document exibida. 2. Clique na guia Templates (Modelos). 3. Na lista Templates For (Modelos para), selecione o site do Dreamweaver que contm o modelo a ser utilizado e, em seguida, selecione um modelo na lista direita. Para obter mais informaes sobre as opes dessa caixa de dilogo, clique no boto Help (Ajuda) na caixa de dilogo. 4. Clique em Create (Criar). O novo documento aberto na janela do documento.
Dica
28
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
5. Salve o documento
Para criar um novo documento de um modelo no painel Assets:
1. Abra o painel Assets, em Window (Janela) > Assets, se ele ainda no estiver aberto. 2. No painel Assets, clique no cone Templates esquerda para exibir a lista de modelos no seu site atual.
Dica
Se voc acabou de criar o modelo que deseja aplicar, talvez seja preciso clicar no boto Refresh (Atualizar) para visualiz-lo.
3. Clique com o boto direito do mouse (no Windows) selecione New From Template (Novo a partir de modelo). O documento aberto na janela do documento.
Dica
3. Na caixa de texto File Name (Nome do arquivo), digite um nome para o arquivo. Evite utilizar espaos e caracteres especiais em nomes de arquivos e de pastas e no inicie um nome de arquivo com um nmero. Particularmente, no utilize caracteres especiais (como , ou ) ou pontuao (como dois pontos, barras inclinadas ou pontos) nos nomes dos arquivos que sero colocados em um servidor remoto. Muitos servidores alteram esses caracteres durante o upload, o que causa o rompimento dos links para os arquivos. 4. Clique em Save (Salvar).
29
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Para definir um novo tipo de documento padro e suas preferncias: 1. Selecione Edit > Preferences 2. A caixa de dilogo Preferences (Preferncias) ser exibida.
4. Defina ou altere as preferncias como necessrio. Para obter mais informaes sobre as opes dessa caixa de dilogo, clique no boto Help (Ajuda). 5. Clique em OK. O Dreamweaver salva as preferncias.
30
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
1. Selecione Edit > Preferences (Windows). A caixa de dilogo Preferences (Preferncias) ser exibida. Voc tambm pode clicar no boto Preferences na caixa de dilogo New Document (Novo documento) para definir as preferncias quando criar um novo documento
Dica 1.
2. Clique em New Document na lista de categorias esquerda. 3. Em Default Document Type (Tipo de documento padro), selecione a opo HTML. 4. Na caixa de texto Default Extension (Extenso padro), especifique a extenso de arquivo que deseja para os novos documentos HTML criados no Dreamweaver. Para Windows, possvel especificar as seguintes extenses: .html, .htm, .shtml, .shtm, .stm, .tpl, .lasso, .xhtml. Para Macintosh, possvel especificar as seguintes extenses: .html, .htm, .shtml, .shtm, .tpl, .lasso, .xhtml, .ssi.
31
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Dica
2. Navegue e selecione o arquivo a ser aberto. Se ainda no tiver selecionado o arquivo, recomendvel organizar os arquivos que planeja abrir e editar em um site do Dreamweaver, e no em outro local.
Dica 3.
Clique em Open. O documento aberto na janela do documento. Por padro, documentos JavaScript, de texto e de Folhas de estilos CSS so abertos na visualizao do cdigo. possvel atualizar o documento enquanto se trabalha no Dreamweaver e, depois, salvar as alteraes feitas no arquivo.
32
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Para abrir e limpar um arquivo HTML do Microsoft Word: 1. No Microsoft Word, salve o documento como um arquivo HTML, se ainda no tiver feito isso.
Nota
2.
Abra o arquivo HTML no Dreamweaver. Para exibir o cdigo HTML gerado pelo Word, alterne para a visualizao do cdigo (View [ Exibir] > Code [Cdigo].
3.
Selecione Commands (Comandos) > Clean Up Word HTML (Limpar o HTML do Word). A caixa de dilogo Clean Up Word HTML exibida. Poder ocorrer um pequeno atraso enquanto o Dreamweaver tenta detectar a verso do Word utilizada para salvar o arquivo. Se o Dreamweaver no conseguir detect-la, selecione a verso correta no menu pop-up. Desmarque as opes da caixa de dilogo, se desejar. Para obter mais informaes sobre as opes dessa caixa de dilogo, clique no boto Help (Ajuda). Clique em OK. O Dreamweaver aplica as configuraes de limpeza ao documento HTML, e um registro das alteraes exibido (a menos que voc desmarque essa opo na caixa de dilogo).
4.
5.
33
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
34
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
sempre que trabalhar no site. Por exemplo, se estiver trabalhando em um site grande e no desejar efetuar o upload dirio dos arquivos de multimdia utilize o mascaramento do site para esconder a pasta de multimdia. O sistema excluir os arquivos dessa pasta das operaes que afetarem o site. possvel mascarar pastas e tipos de arquivos do site remoto ou local. O mascaramento exclui as pastas e os arquivos mascarados nas seguintes operaes: Executar as operaes Put (Colocar), Get (Obter), Check In (Devolver) e Check Out (Retirar) Gerao de relatrios Localizao de arquivos locais e remotos mais recentes Execuo de operaes no site inteiro, como a verificao e a alterao de links Sincronizao Trabalho com o contedo do painel Assets (Propriedades) Atualizao de modelos e bibliotecas
O Dreamweaver exclui modelos e itens de biblioteca mascarados apenas das operaes de obteno (Get) e colocao (Put), mas no das operaes em lote, pois isso pode fazer com que fiquem fora de sintonia com suas respectivas instncias.
Nota
35
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Para abrir uma pasta em um servidor FTP ou RDS remoto: 1. No painel Files (Window > Files), selecione um nome de servidor no menu pop-up (em que aparece o site, o servidor ou a unidade atual).
Nota
Para compartilhar as Design Notes, os usurios devero definir o mesmo caminho para a raiz do site (por exemplo, sites/propriedades/orig).
36
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
2.
Para acessar uma unidade local ou a sua rea de trabalho: 1. No painel Files (Window > Files), selecione Desktop (rea de trabalho), Local Disk (Disco local) ou CD Drive (Unidade de CD) no menu pop-up (em que o site atual, o servidor ou a unidade aparece).
Navegue para um arquivo e siga um destes procedimentos: Abra arquivos no Dreamweaver ou em outro aplicativo Renomeie arquivos Copie arquivos Exclua arquivos Arraste arquivos
Quando voc arrastar um arquivo de um site do Dreamweaver para outro ou para uma pasta que no esteja associada a um site do Dreamweaver, o Dreamweaver copiar o arquivo para o local em que for solto. Se voc arrastar um arquivo dentro do mesmo site do Dreamweaver, o Dreamweaver mover o arquivo para o local em que for solto. Se arrastar um arquivo que no esteja associado a um site do Dreamweaver para uma pasta que no faa parte de um site do Dreamweaver, o Dreamweaver mover o arquivo para o local em que for solto.
Para mover um arquivo que o Dreamweaver copia como padro, mantenha pressionada a tecla Shift enquanto arrasta o arquivo. Para copiar um arquivo que o Dreamweaver move como padro, mantenha pressionada a tecla Control enquanto arrasta o arquivo.
Nota
Nota
Se voc trabalhar em arquivos sem criar um site do Dreamweaver, no poder executar operaes no site, como verificao de links.
37
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Para configurar o Dreamweaver para trabalhar com um servidor na janela do documento: 1. 2. Selecione Site > Manage Sites (Gerenciar Sites). A caixa de dilogo Manage Sites exibida. Clique em New (Novo) e, em seguida, selecione FTP & RDS Servers (Servidores FTP e RDS). A caixa de dilogo Configure Server (Configurar servidor) exibida. Preencha a caixa de dilogo. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
3.
Nota 1.
Voc s precisar preencher essa caixa de dilogo uma vez para cada servidor ao qual deseja se conectar.
4. Clique em OK. O painel Files (Arquivos) exibe o contedo da pasta do servidor remoto ao
qual voc se conectou, e o nome do servidor aparece no menu pop-up na parte superior do painel.
Para configurar o Dreamweaver para trabalhar com um servidor utilizando o painel Files: No painel Files (Window > Files), selecione Desktop (rea de trabalho) no menu pop-up (em que aparece o site, o servidor ou a unidade atual).
2. Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada
(no Macintosh) no n FTP and RDS Servers, no painel Files. Em seguida, selecione Add FTP Server (Adicionar servidor FTP) ou Add RDS Server (Adicionar servidor RDS).
38
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
3. Preencha a caixa de dilogo. Para obter mais informaes, clique no boto Help (Ajuda) da
caixa de dilogo
Nota 4. Nota
Voc s precisar preencher essa caixa de dilogo uma vez para cada servidor ao qual deseja se conectar.
Clique em OK. O painel Files (Arquivos) exibe o contedo da pasta do servidor remoto ao qual voc se conectou, e o nome do servidor aparece no menu pop-up na parte superior do painel.
No caso de pastas grandes, pode levar alguns minutos para que o painel Files exiba a pasta.
Selecione Window (Janela) > Files. Para alterar o tamanho da rea de visualizao no painel Files expandido:
Em Window > Files, no painel Files expandido, siga um destes procedimentos: Arraste a barra divisria que separa as duas visualizaes para aumentar ou diminuir a rea de exibio do painel direito ou esquerdo. Utilize as barras de rolagem na parte inferior do painel Files para rolar pelo contedo das visualizaes. No mapa do site, arraste a seta acima de um arquivo para alterar o espao entre os arquivos.
No painel Files (Window > Files), clique no boto Expand/Collapse (Expandir/Reduzir) na barra de ferramentas.
39
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Quando o painel Files estiver reduzido, ele exibir o contedo dos sites local e remoto ou do servidor de teste como uma lista de arquivos. Quando expandido, ele exibir o site local, alm do site remoto ou do servidor de teste. O painel Files tambm pode exibir um mapa visual do site local.
Para alterar a visualizao do site no painel Files, siga um destes procedimentos (somente sites do Dreamweaver):
Nota
No painel Files reduzido (Window > Files), selecione Local View (Visualizao local), Remote View (Visualizao remota), Testing Server (Servidor de teste) ou Map View (Visualizao do mapa) no menu pop-up Site View (Visualizao do site).
Nota
No painel Files expandido (Window > Files), clique no boto Site Files (Arquivos do site) do site remoto, Testing Server ou Site Map (Mapa do site) na barra de ferramentas.
Ao clicar no boto Site Map, voc poder optar pela visualizao do mapa do site com ou sem os respectivos arquivos.
40
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Reordenar ou realinhar colunas Adicionar novas colunas (dez no mximo) Ocultar colunas (exceto a coluna do nome do arquivo) Designar colunas a serem compartilhadas com todos os usurios que estiverem conectados a um site Excluir colunas (somente colunas personalizadas) Renomear colunas (somente colunas personalizadas) Associar com uma Design Note (somente colunas personalizadas)
Para adicionar, excluir ou alterar as colunas de detalhes: 1. Selecione Site > Manage Sites (Gerenciar Sites). A caixa de dilogo Manage Sites exibida. 2. Selecione um site e, em seguida, clique em Edit (Editar). A caixa de dilogo Site Definition (Definio do site) exibida. 3. Selecione File View Columns (Colunas de visualizao de arquivos) na lista de categorias esquerda. A caixa de dilogo Site Definition exibir as opes das colunas de visualizao de arquivos.
Nota
Clique no cabealho novamente para inverter a ordem (ascendente ou descendente) de acordo com a qual o Dreamweaver ordenar a coluna.
41
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
4. Preencha a caixa de dilogo. Para obter mais informaes, clique no boto Help (Ajuda) da
caixa de dilogo. 5. Clique em OK.
O Dreamweaver trata como camadas todas as tags div com posio absoluta, mesmo que voc no tenha criado essas tags div utilizando a ferramenta de desenho Layer.
Voc pode utilizar um arquivo de projetos do Dreamweaver como um ponto de partida para o layout CSS. Na categoria Page Designs (CSS) (Projetos de pgina [CSS]) da caixa de dilogo New Document (Novo documento),
Independentemente da utilizao de CSS, tabelas ou quadros para definir o layout das pginas, o Dreamweaver contm rguas e grades para a orientao visual no layout. O Dreamweaver tambm contm um recurso de imagem de rastreamento, que voc pode utilizar para recriar um projeto de pgina criado em um aplicativo grfico. Se voc no estiver familiarizado com o uso de camadas e com as folhas de estilo em cascata (CSS), mas estiver familiarizado com o uso de tabelas, experimente utilizar tabelas ou o modo Layout para o layout da pgina
Nota
As camadas, conforme descrito neste captulo referem-se ao conceito de layout do Dreamweaver, no tag layer.
42
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Camadas
Com o Dreamweaver, voc pode utilizar camadas para definir o layout da pgina. Voc pode colocar as camadas na frente ou atrs de outras, ocult-las enquanto outras so exibidas e mov-las na tela. Coloque uma imagem de fundo em uma camada e, em seguida, uma segunda camada contendo texto com um fundo transparente na frente da primeira camada. As camadas oferecem bastante flexibilidade para inserir contedo. Contudo, os visitantes do site que tiverem navegadores da Web muito antigos poderiam ter problemas para visualizar as camadas. Para garantir que todos possam visualizar a sua pgina da Web, conceba o layout da pgina com camadas e, em seguida, converta-as em tabelas. Contudo, se for provvel que o seu pblico esteja utilizando um navegador recente, crie layouts apenas com as camadas, sem convert-las em tabelas.
Quando voc desenha uma camada utilizando a ferramenta Draw Layer (Desenhar camada), o Dreamweaver insere uma tag div no documento e atribui camada um valor de identificao (por padro, Layer1 (Camada1) para a primeira camada desenhada, Layer2 (Camada2) para a segunda camada desenhada e assim por diante). Mais tarde, voc poder renomear a camada com o nome desejado utilizando o painel Layers (Camadas) ou o Property inspector (Inspetor de propriedades). O Dreamweaver tambm utiliza CSS incorporado na seo head do documento para posicionar a camada e determinar as dimenses exatas da camada. A seguir, apresentamos um exemplo de cdigo HTML para uma camada: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-88591" /> <title>Sample Layers Page</title> <style type="text/css"> <!-#Layer1 { position:absolute; left:62px; top:67px; width:421px; height:188px; z-index:1; } --> </style> </head> <body> <div id="Layer1"></div>
Nota
43
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
</body> </html> Voc pode definir as propriedades das camadas na pgina, inclusive as coordenadas x e y, o ndice z (ou ordem de empilhamento), alm da visibilidade.
Quando voc insere uma camada, o Dreamweaver exibe a borda da camada, por padro, e reala o bloco quando se passa o ponteiro sobre ele. Voc pode ativar bordas de camadas desativando as opes Layer Outlines (Contornos de camadas) e CSS Layout Outlines (Contornos de layout CSS) no menu View (Exibir) > Visual Aids (Auxlios visuais). Voc tambm pode ativar nveis e o modelo de caixa para as camadas como auxlios visuais enquanto est projetando. Depois de criar uma camada, para adicionar contedo a ela, coloque o ponto de insero na camada e adicione o contedo como faria em uma pgina. Para desenhar uma nica camada ou vrias camadas consecutivamente: 1. 2. Na categoria Layout da barra Insert, clique no boto Expanded Tables Mode (Modo de tabelas expandidas). Na visualizao do projeto da janela do documento, siga um destes procedimentos:
Nota
Voc pode utilizar um arquivo de projetos do Dreamweaver como um ponto de partida para o layout CSS. Na categoria Page Designs (CSS) da caixa de dilogo New Document,
Arraste para desenhar uma nica camada. Mantenha a tecla Control (no Windows) ou Command (no Macintosh) pressionada e arraste
para desenhar vrias camadas consecutivamente. Voc pode continuar a desenhar novas camadas, contanto que no solte a tecla Control ou Command. Para inserir uma camada em um local especfico do documento: Coloque o ponto de insero na janela do documento e selecione Insert> Layout Objects (Objetos de Layout) > Layer. Esse procedimento coloca a tag da camada onde voc clicou na janela do documento. Portanto, o processamento visual da camada pode afetar outros elementos da pgina (como texto) que a circundam.
Para colocar o ponto de insero em uma camada: Clique em qualquer ponto dentro das bordas da camada. As bordas da camada sero realadas e a ala de seleo aparecer, mas a camada no estar selecionada. Para exibir as bordas das camadas:
Nota
44
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Selecione View> Visual Aids e, em seguida, selecione Layer Outlines ou CSS Layout Outlines.
Esse procedimento coloca a tag da camada onde voc clicou na janela do documento. Portanto, o processamento visual da camada pode afetar outros elementos da pgina (como texto) que a circundam.
Para ocultar bordas de camadas: Selecione View > Visual Aids e depois desmarque Layer Outlines e CSS Layout Outlines.
Camadas aninhadas
A camada aninhada aquela cujo cdigo est contido em outra camada. O aninhamento utilizado regularmente para agrupar as camadas. Uma camada aninhada se move com a sua camada-me e pode ser definida para herdar a visibilidade da me. Voc pode ativar a opo Nesting (Aninhamento) para aninhar automaticamente quando desenhar uma camada que comece dentro de outra camada.
Para desenhar uma camada aninhada: 1. 2. Na categoria Layout da barra Insert, clique no boto Expanded Tables Mode. Na visualizao do projeto na janela do documento, arraste para desenhar uma camada dentro de uma camada existente: Se a opo Nesting estiver desativada nas preferncias de camadas, mantenha pressionada a tecla Alt (no Windows) ou Option (no Macintosh) e arraste para aninhar uma camada dentro de outra j existente.
Nota Dica
Voc pode que as camadas aninhadas sejam exibidas de maneira diferente nos diversos navegadores. Ao criar camadas aninhadas, verifique com freqncia a sua aparncia em diversos navegadores durante o processo de criao.
Para inserir uma camada aninhada: Coloque o ponto de insero dentro de uma camada existente na visualizao do projeto na janela do documento e selecione Insert > Layer.
45
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Para aninhar uma camada existente dentro de uma outra camada utilizando o painel Layers: 1. Selecione Window (Janela) > Layers para abrir o painel Layers. 2. Selecione uma camada no painel Layers, pressione a tecla Control (no Windows) ou Command (no Macintosh) e arraste-a at a camada de destino no painel Layers. 3. Solte o boto do mouse quando o nome da camada de destino for realado.
Para aninhar camadas automaticamente ao desenhar uma camada que comece dentro de outra: Selecione a opo Nesting (Aninhamento) nas preferncias de camadas.
46
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
3. Altere os atributos da camada definindo as propriedades como necessrio. Para obter mais
informaes, clique no boto Help do Property inspector.
3.
Altere os atributos das camadas, definindo as propriedades. Para obter mais informaes, clique no boto Help do Property inspector.
Gerenciar camadas
Voc pode selecionar camadas para trabalhar com elas. Voc tambm pode alterar a ordem de empilhamento e a visibilidade das camadas. O painel Layers fornece uma maneira conveniente de gerenciar camadas.
47
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
superior da ordem de empilhamento, ser possvel atribuir-lhe um ndice z superior ao das demais camadas.
Selecionar camadas
Selecione uma ou mais camadas para manipul-las ou alterar as suas propriedades. Para selecionar uma camada no painel Layers: No painel Layers, em Window > Layers, clique no nome da camada. Para selecionar uma camada na janela do documento, siga um destes procedimentos: Clique na ala de seleo da camada. Se a ala de seleo no estiver visvel, clique em qualquer ponto dentro da camada para tornar a ala visvel. Clique na borda de uma camada. Mantenha pressionadas as teclas Control-Shift (no Windows) ou Command-Shift (no Macintosh) e clique dentro de uma camada. Clique dentro de uma camada e pressione Control+A (Windows) ou Command+A (Macintosh) para selecionar o contedo da camada. Pressione Control+A ou Command+A novamente para selecionar a camada.
Para alterar a visibilidade de uma camada: 1. Selecione Window > Layers para abrir o painel Layers. 2. Clique na coluna do cone representando um olho para alterar a sua visibilidade. Um olho aberto significa que a camada est visvel. Um olho fechado significa que a camada est invisvel.
Nota
A camada selecionada ficar sempre visvel e aparecer na frente das outras camadas enquanto estiver selecionada.
48
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Se no houver um cone representando um olho, lembre-se de que a camada costuma herdar as definies de visibilidade da camada-me. Quando as camadas no estiverem aninhadas, a camada-me ser o corpo do documento, que est sempre visvel. O cone representando um olho estar ausente quando no for especificada uma visibilidade, que aparecer no Property inspector como visibilidade padro.
Para alterar a visibilidade de todas as camadas simultaneamente: No painel Layers (Window > Layers), clique no cone do olho do cabealho, na parte superior da coluna.
Voc pode ajustar o layout e otimizar o desenho da pgina movimentando-se entre as diversas camadas e tabelas. Voc no pode converter uma tabela ou uma camada especfica de uma pgina; necessrio converter camadas em tabelas e tabelas em camadas de uma pgina inteira.
Nota
Nota
Esse procedimento poder tornar todas as camadas visveis ou ocultas, mas estas no podero herdar a visibilidade da me.
Nota
A converso de camadas em tabelas poder resultar em tabelas com um grande nmero de clulas vazias.
49
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Quando esta opo estiver ativada, uma camada no poder ser criada na frente de uma camada existente, nem movida, redimensionada ou aninhada dentro de uma camada existente. Caso ative esta opo aps criar camadas sobrepostas, arraste cada camada sobreposta para afast-la das outras camadas. O Dreamweaver no corrigir automaticamente as camadas sobrepostas na pgina quando a opo Prevent Layer Overlaps estiver ativada. Quando essa opo e o encaixe estiverem ativados, a camada no se encaixar na grade se isso acarretar a sobreposio de duas camadas. Em vez disso, ela se encaixar na margem da camada mais prxima.
NOTA Certas aes permitem que as camadas se sobreponham, mesmo quando a opo Prevent Overlaps est ativada. Se voc inserir uma camada utilizando o menu Inserir, digitar nmeros no Property inspector ou reposicionar as camadas editando o cdigo-fonte HTML, poder provocar a sobreposio ou o aninhamento de camadas enquanto essa opo estiver ativada. Se as sobreposies ocorrerem, arraste as camadas sobrepostas at a visualizao do projeto, a fim de separ-las.
Para evitar as sobreposies de camadas, siga um dos procedimentos abaixo: No painel Layers, em Window > Layers, selecione a opo Prevent Overlaps. Na janela do documento, selecione Modify > Arrange > Prevent Layer Overlaps.
Para converter tabelas em camadas: 1. Selecione Modify > Convert > Tables to Layers (Tabelas em camadas). A caixa de dilogo Convert Tables to Layers (Converter tabelas em camadas) aparece. 2. Selecione as opes desejadas. Para obter mais informaes, clique no boto Help da caixa de dilogo. 3. Clique em OK. As tabelas sero convertidas em camadas. As clulas vazias no sero convertidas em camadas, a no ser que elas tenham cores de fundo.
Nota
Nota
Esta uma nova tabela Note (Nota). Encontra-se anexada a uma tag de pargrafo Table_anchor. Para criar uma, copie e cole da pgina de referncia.
Os elementos de pgina que estavam fora das tabelas tambm sero colocados em camadas.
50
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Animar camadas
O termo HTML dinmico, ou DHTML, refere-se combinao de HTML com uma linguagem de scripts que permite alterar as propriedades de posicionamento ou estilo dos elementos HTML. As linhas de tempo do Dreamweaver utilizam HTML dinmico para alterar as propriedades de camadas e imagens ao longo do tempo. Utilize as linhas de tempo para criar animaes que no requerem nenhum controle ActiveX, plug-ins nem applets Java (mas que requerem JavaScript). A palavra 'dinmico' pode ter vrios significados em diferentes contextos relativos Web. No confunda HTML dinmico com a idia de uma pgina da Web dinmica, que uma pgina da Web gerada dinamicamente por um cdigo do lado do servidor antes de ser apresentada a um visitante.
As linhas de tempo permitem alterar a posio, tamanho, visibilidade e ordem de empilhamento de uma camada. (As funes de camada das linhas de tempo funcionam apenas em navegadores 4.0 ou posteriores.) As linhas de tempo tambm so teis para outras aes que voc deseja que ocorram aps a pgina ser carregada. Por exemplo, as linhas de tempo podem alterar o arquivo de origem de uma tag de imagem, de modo que imagens diferentes apaream na pgina ao longo do tempo. Para ver o cdigo JavaScript gerado por uma linha de tempo, abra a visualizao do cdigo da janela do documento. O cdigo da linha de tempo est na funo MM_initTimelines, dentro de uma tag de script na seo head do documento. Ao editar o HTML de um documento que contm linhas de tempo, certifique-se de no mover, renomear nem excluir nenhum item que seja referenciado por uma linha de tempo.
Nota
cabea de execuo
51
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
O menu pop-up Timeline especifica qual das linhas de tempo do documento est sendo exibida no painel Timelines. A cabea de execuo mostra qual quadro da linha de tempo est sendo exibido na janela do documento. O nmero do quadroindica a numerao seqencial dos quadros. O nmero do quadro atual est entre os botes Back (Voltar) e Play (Executar). Voc pode controlar a durao da animao ao definir o total de quadros e o nmero de quadros por segundo (qps). A definio padro de 15 quadros por segundo uma boa taxa mdia para usar na maioria dos navegadores que esto sendo executados em sistemas comuns Windows e Macintosh. possvel que taxas mais velozes no melhorem o desempenho. Os navegadores sempre executam todos os quadros da animao, mesmo que no consigam obter a taxa de quadros especificada. A taxa de quadros ser ignorada se for superior que o navegador pode suportar.
O menu contextual - Contm vrios comandos relativos linha de tempo. O canal Behaviors - o canal de comportamentos que devem ser executados em um determinado quadro da linha de tempo. As barras Animation mostram a durao da animao de cada objeto. Uma nica linha pode incluir vrias barras que representam objetos diferentes. Barras diferentes no podem controlar o mesmo objeto no mesmo quadro. Os quadros-chave - So quadros de uma barra, onde voc especificou propriedades (como posio) para o objeto. O Dreamweaver calcula valores intermedirios para os quadros que esto entre os quadros-chave. Os quadros-chave so indicados por pequenos crculos. Os canais Animation - Exibem barras para camadas e imagens com animaes.
Opes de execuo
A seguir, so apresentadas as opes de execuo para visualizar a animao.
Rewind (Rebobinar) - Move a cabea de execuo para o primeiro quadro na linha de tempo. Back - Move a cabea de execuo um quadro para a esquerda. Clique em Back e mantenha pressionado o boto do mouse para executar a linha de tempo para trs. Play - Move a cabea de execuo um quadro para a direita. Clique em Play e mantenha pressionado o boto do mouse para executar a linha de tempo para frente. Autoplay (Execuo automtica) - Faz com que a linha de tempo comece a execuo automaticamente quando a pgina atual for carregada em um navegador. A opo Autoplay anexa um comportamento tag body da pgina que executa a ao Play Timeline (Executar linha de tempo) quando a pgina carregada. Loop- Faz com que a linha de tempo atual fique em loop indefinidamente enquanto a pgina estiver aberta em um navegador. A opo Loop insere o comportamento Go to Timeline Frame (Ir para quadro da linha de tempo) no canal Behaviors aps o ltimo quadro da animao. Clique duas vezes no marcador do comportamento no canal Behaviors para editar os parmetros desse comportamento e alterar o nmero de loops.
Nota
52
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Quando uma camada selecionada, so exibidas alas ao seu redor, conforme mostrado na ilustrao a seguir.
Clique na ala de seleo da camada para selecionar a camada
4. Quando voc clica na camada, colocado um ponto de insero piscante dentro dela, mas a
camada no selecionada. Selecione Modify > Timeline > Add Object to Timeline ou simplesmente arraste a camada selecionada at o painel Timelines. exibida uma barra no primeiro canal da linha de tempo. O nome da camada mostrado na barra. Clique no marcador de quadro-chave mostrado no final da barra. Mova a camada dentro da pgina para onde ela dever ir no final da animao. exibida uma linha indicando o caminho da animao na janela do documento. Caso voc queira que a camada se mova em curva, selecione a barra de animao e pressione a tecla Control (no Windows) ou a tecla Command (no Macintosh) e clique em um quadro no meio da barra para adicionar um quadro-chave ao quadro em que voc clicou, ou clique em um quadro no meio da barra de animao e selecione Add Keyframe (Adicionar quadro-chave) no menu contextual. Repita esta etapa para definir quadros-chave adicionais. Mantenha pressionado o boto Play para visualizar a animao na pgina. Repita o procedimento para adicionar mais camadas e imagens linha de tempo e criar uma animao mais complexa.
5. 6. 7.
8.
53
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
3.
6.
54
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Para fazer com que a linha de tempo seja executada automaticamente quando a pgina for aberta em um navegador, clique em Autoplay (Execuo automtica). A opo Autoplay anexa pgina um comportamento que executa a ao Play Timeline quando a pgina carregada. Para fazer com que a linha de tempo fique em loop contnuo, clique em Loop. A opo Loop insere a ao Go To Timeline Frame (Ir para quadro da linha de tempo) no canal Behaviors (Comportamentos) aps o ltimo quadro da animao. Voc pode editar os parmetros desse comportamento para definir o nmero de loops.
2. Defina novas propriedades para o objeto, seguindo um dos procedimentos abaixo: Para alterar o arquivo de origem de uma imagem, clique no cone de pasta junto caixa de texto Src (Orig.) no Property inspector; depois procure uma nova imagem e selecione-a. Para alterar a visibilidade de uma camada, selecione inherit (herdar), visible (visvel) ou hidden (oculta) no menu pop-up da caixa de texto Vis do Property inspector. Uma alternativa usar os cones que representam um olho, no painel Layers.
Para alterar o tamanho de uma camada, arraste as alas de redimensionamento da camada ou digite novos valores nas caixas de texto Width (Largura) e Height (Altura) no Property inspector. Nem todos os navegadores podem alterar o tamanho de uma camada de forma dinmica Para alterar a ordem de empilhamento de uma camada, digite um novo valor na caixa de texto Z-Index (ndice Z) ou utilize o painel Layers para alterar a ordem de empilhamento da camada atual
55
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
2.
3.
Siga um dos procedimentos abaixo: Mova a cabea de execuo para um outro ponto da linha de tempo atual. Selecione uma outra linha de tempo no menu pop-up Timeline. Abra um outro documento, ou crie um novo, e depois clique no painel Timelines. Cole a seleo na linha de tempo. As barras de animao de um mesmo objeto no podem se sobrepor porque uma camada no pode estar em dois lugares ao mesmo tempo (nem tampouco uma imagem pode ter duas fontes diferentes ao mesmo tempo). Se a barra de animao que voc estiver colando for se sobrepor a uma outra barra de animao do mesmo objeto, o Dreamweaver deslocar automaticamente o primeiro quadro que no se sobrepe.
4.
H dois princpios a serem seguidos ao colar seqncias de animaes em um outro documento: Se voc copiar uma seqncia de animaes para uma camada, e o novo documento tiver uma camada com o mesmo nome, o Dreamweaver aplicar as propriedades de animao camada existente no novo documento.
56
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Se voc copiar uma seqncia de animaes para uma camada, e o novo documento no tiver uma camada com o mesmo nome, o Dreamweaver colar a camada (e seu contedo) do documento original juntamente com a seqncia de animaes. Para aplicar em uma outra camada do novo documento a seqncia de animaes colada, selecione Change Object (Alterar objeto) no menu contextual e depois selecione o nome da segunda camada no menu pop-up. Se desejar, exclua a camada que foi colada.
4. 5.
Aps a criao de uma seqncia de animaes, voc tambm pode mudar de idia quanto camada que deve ser animada; simplesmente siga as etapas 3 e 4 acima (no necessrio copiar nem colar).
Para inserir uma tag div: 1. Na janela do documento, coloque o ponto de insero no local onde a tag div dever aparecer.
Nota
57
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
2.
Siga um dos procedimentos abaixo: Selecione Insert (Inserir) > Layout Objects (Objetos de layout) > Div Tag (Tag div). Na categoria Layout da barra Insert, clique no boto Expanded Tables Mode (Modo de tabelas expandidas).
4. Clique em OK.
A tag div aparece como uma caixa no documento com o texto do alocador de espao. Quando voc move o mouse sobre a margem da caixa, o Dreamweaver a reala. Se a tag div estiver em uma posio absoluta, ela agir como uma camada do Dreamweaver.
Nota
As bordas das tags div so visveis quando voc as atribui ou quando a opo CSS Layout Outlines est selecionada. (Por padro, a opo CSS Layout Outlines permanece selecionada no menu View > Visual Aids.) Quando voc move o ponteiro sobre uma tag div, o Dreamweaver a reala. Ao selecionar uma tag div, voc pode visualizar e editar regras para ela no painel CSS Styles (Estilos CSS). Voc tambm pode adicionar contedo tag div posicionando o ponto de insero dentro da tag div e, em seguida, adicionando contedo da mesma forma que em uma pgina. Para exibir e editar as regras aplicadas a uma tag div: 1. Siga um destes procedimentos para selecionar a tag div: Clique na borda da tag div. Clique dentro da tag div e pressione Control+A (no Windows) ou Command+A (no Macintosh) duas vezes.
58
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Clique dentro da tag div e selecione-a no seletor de tags, na parte inferior da janela do documento.
2. Selecione Window > CSS Styles para abrir o painel CSS Styles, se j no estiver aberto. As regras aplicadas tag div aparecem no painel. 3. Edite conforme a necessidade.
Para colocar o ponto de insero em uma tag div para adicionar contedo: Clique em qualquer ponto dentro das bordas da tag.
Para alterar o texto do alocador de espao em uma tag div: Selecione o texto e digite sobre ele ou pressione a tecla Delete.
59
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Sobre as tabelas
As tabelas so ferramentas poderosas para a apresentao de dados tabulares e para a definio do layout de textos e grficos em uma pgina HTML. Uma tabela consiste em uma ou mais linhas, sendo que cada linha formada por uma ou mais clulas. Embora normalmente as colunas no sejam especificadas de forma explcita no cdigo HTML, o Dreamweaver permite manipul-las, bem como linhas e clulas. Dreamweaver exibe a largura da tabela e da coluna para cada coluna da tabela quando a tabela selecionada ou quando o ponto de insero est na tabela. Ao lado das larguras, esto as setas relativas ao menu do cabealho da tabela e aos menus do cabealho da coluna. Use os menus para ter acesso rpido a alguns comandos relacionados a tabelas. Voc pode ativar ou desativar as larguras e os menus, conforme a necessidade u do cabealho da tabela e aos menus do cabealho da coluna. Use os menus para ter acesso rpido a alguns comandos relacionados a tabelas. Voc pode ativar ou desativar as larguras e os menus, conforme a necessidade Se voc no vir uma largura para a tabela ou para a coluna, isso significa que a tabela ou coluna no possuem uma largura especfica no cdigo HTML. Se aparecerem dois nmeros, a largura visual que aparece no modo Design no coincide com o que foi especificado no cdigo HTML. Isto poder ocorrer quando a tabela redimensionada arrastando seu canto inferior direito ou quando o contedo adicionado a uma clula maior do que a largura definida para essa clula. Por exemplo, se a largura de uma coluna for definida como 200 pixels, ao adicionar contedo que aumente a largura para 250 pixels, dois nmeros aparecero para essa coluna: 200 (a largura especificada no cdigo) e (250) entre parnteses (a largura visual da coluna, na forma como ele processada na sua tela).
60
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
3. Tabela Por exemplo: se voc definir a cor de fundo azul para uma nica clula e definir a cor de fundo amarelo para toda a tabela, a clula azul no mudar para a cor amarela, uma vez que a formatao das clulas tem precedncia sobre a formatao da tabela.
61
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
4. Clique em OK.
62
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
2- Na caixa de dilogo, fornea as informaes sobre o arquivo que contm os dados. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. 3- Clique em OK.
Para exportar uma tabela: Coloque o ponto de insero em qualquer clula da tabela. Selecione File (Arquivo) > Export (Exportar) > Table (Tabela). A caixa de dilogo Export Table (Exportar tabela) exibida.
Na caixa de dilogo Export Table, especifique as opes para exportar a tabela. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Clique em Export. A caixa de dilogo Export Table As (Exportar tabela como) exibida. Digite um nome para o arquivo. Clique em Save (Salvar).
63
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Para alterar a cor de realce para elementos selecionados da tabela: 1. 2. 3. Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh). A caixa de dilogo Preferences (Preferncias) ser exibida. Selecione Highlighting (Realce) na lista de categorias esquerda. Faa uma dessas alteraes: Para alterar a cor do realce para os elementos da tabela, clique na caixa de cor Mouseover (Seleo do mouse) utilizando o seletor de cores (ou digite o valor hexadecimal relativo cor do realce na caixa de texto). Para ativar ou desativar o realce para elementos da tabela, marque ou desmarque a caixa de seleo Show (Mostrar) de Mouse-over.
Nota
Essas opes afetam todos os objetos, como camadas e tabelas e clulas de visualizao do modo Layout que o Dreamweaver reala quando voc move o ponteiro sobre eles.
Nota
O ponteiro passa para o cone de grade de tabela quando a tabela selecionada (a menos que voc clique na borda de uma linha ou coluna).
Clique em uma clula da tabela e, em seguida, selecione a tag <table> no seletor de tags, no canto inferior esquerdo da janela do documento. Clique em uma clula da tabela e selecione Modify (Modificar) > Table (Tabela) > Select Table (Selecionar tabela). Clique em uma clula da tabela, clique no menu de cabealho da tabela e, em seguida, selecione Select Table (Selecionar tabela). Alas de seleo so exibidas na borda inferior e direita da tabela selecionada.
possvel selecionar uma linha ou coluna individual ou selecionar mltiplas linhas ou colunas. Para selecionar linhas ou colunas individuais ou mltiplas: 1- Posicione o ponteiro de forma que aponte para a margem esquerda de uma linha ou para a margem superior de uma coluna. 2- Quando o ponteiro se transformar em uma seta de seleo, clique para selecionar uma linha ou coluna ou arrastar para selecionar vrias linhas ou colunas.
Para selecionar uma nica coluna: 1- Clique na coluna. 2- Clique no menu de cabealho da coluna e selecione Select Column (Selecionar coluna).
Selecionar clulas
possvel selecionar uma nica clula, uma linha ou bloco de clulas ou, ainda, clulas no-adjacentes. Para selecionar uma nica clula, siga um dos procedimentos abaixo: Clique na clula e, em seguida, selecione a tag <td> no seletor de tags, no canto inferior esquerdo da janela do documento. Pressione a tecla Control (no Windows) ou Command (no Macintosh) na clula. Clique na clula e selecione Edit (Editar) > Select All (Selecionar tudo).
Para selecionar uma linha ou um bloco retangular de clulas, siga um dos procedimentos abaixo: Arraste de uma clula a outra. Clique em uma clula, pressione a tecla Control (no Windows), na mesma clula para selecion-la e, em seguida, pressione a tecla Shift em outra clula. Todas as clulas dentro da regio linear ou retangular definida pelas duas clulas so selecionadas.
65
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Para selecionar clulas no-adjacentes: Mantenha a tecla Control (no Windows), pressionada e clique nas clulas, linhas ou colunas que deseja selecionar. Se as clulas, linhas ou colunas nas quais clicar ainda no estiverem selecionadas, elas sero adicionadas seleo. Se j tiverem sido selecionadas, sero removidas da seleo.
Usar o modo Expanded Tables (Tabelas expandidas) para facilitar a edio da tabela
O modo Expanded Tables (Tabelas expandidas) adiciona, temporariamente, o preenchimento e espaamento das clulas a todas as tabelas de um documento e aumenta as bordas das tabelas para facilitar a edio. Esse modo permite selecionar itens em tabelas ou posicionar com preciso o ponto de insero. Por exemplo, talvez seja preciso expandir uma tabela para posicionar o ponto de insero esquerda ou direita de uma imagem, sem selecionar acidentalmente a imagem ou a clula da tabela.
Aps fazer a seleo ou posicionar o ponto de insero, retorne ao modo Standard (Padro) da visualizao do projeto para fazer a edio necessria. Algumas operaes visuais, como redimensionamento, no tero os resultados esperados no modo Expanded Tables.
Para passar ao modo Expanded Tables: 1- Se voc estiver no modo de exibio Code, selecione View (Exibir) > Design ou View > Code and Design (Cdigo e design). No possvel passar para o modo Expanded Tables na visualizao de cdigo. 2- Siga um dos procedimentos abaixo:
Nota
66
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Selecione View (Exibir) > Table Mode (Modo da tabela) > Expanded Tables Mode (Modo de tabelas expandidas). Na categoria Layout da barra Insert (Inserir), clique no boto Expanded Tables Mode.
Uma barra denominada Expanded Tables Mode aparece na parte superior da janela do documento. O Dreamweaver adiciona preenchimento e espaamento de clula a todas as tabelas da pgina e aumenta as bordas das tabelas. Para sair do modo Expanded Tables, siga um destes procedimentos: Na barra Expanded Tables Mode, na parte superior da janela do documento, clique em Exit (Sair). Selecione View (Exibir) > Table Mode (Modo da tabela) > Layout Mode (Modo Layout). Na categoria Layout da barra Insert, clique no boto Modo Standard.
Para utilizar um estilo de tabela predefinido: 1- Selecione uma tabela 2- Select Commands (Comandos) > Format Table (Formatar tabela). A caixa de dilogo Format Table exibida.
Nota
67
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
68
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Quando uma tabela inteira redimensionada, o tamanho de todas as clulas da tabela alterado na mesma proporo. Se as clulas de uma tabela tiverem larguras ou alturas especificadas explicitamente, o redimensionamento da tabela alterar o tamanho visual das clulas na janela do documento, mas no modificar as larguras e alturas especificadas das clulas. Para redimensionar uma tabela:
Para alterar a largura de uma coluna e manter a largura geral da tabela: Arraste a borda direita da coluna a ser alterada. A largura da coluna adjacente tambm alterada; na verdade, duas colunas so redimensionadas. A visualizao das alteraes efetuadas mostra de que forma as colunas sero alteradas; a largura geral da tabela no alterada.
Para alterar a largura de uma coluna e manter o tamanho das outras colunas:
69
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Mantenha a tecla Shift pressionada e arraste a borda da coluna. A largura da coluna alterada. A visualizao das alteraes efetuada mostra de que forma a largura das colunas ser ajustada; a largura geral da tabela alterada para acomodar a coluna que est sendo redimensionada.
Para alterar visualmente a altura de uma linha: Arraste a borda inferior da linha.
Para definir a largura de uma coluna ou a altura de uma linha utilizando o Property inspector: 1- Selecione a coluna ou linha 2- No Property inspector, aberto a partir da seleo de Window (Janela) > Properties (Propriedades), digite um valor no campo de texto W (L) para a largura da coluna ou no campo de texto H (A) para a altura da linha. Para obter mais informaes, clique no boto Help (Ajuda) do Property inspector. 3- Pressione a tecla Tab ou Enter (no Windows) ou Return (no Macintosh) para aplicar o valor.
Para tornar as larguras consistentes: 1- Clique em uma clula. 2- Clique no menu do cabealho da tabela e selecione Make All Widths Consistent (Tornar consistentes todas as larguras).
70
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
O Dreamweaver redefine a largura especificada no cdigo para que ela corresponda largura visual.
Para limpar a largura definida de uma coluna: 1- Clique na coluna. 2- Clique no menu de cabealho da coluna e selecione Clear Column Width.
71
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
modo Layout. No modo Layout, possvel criar uma pgina utilizando tabelas como a estrutura bsica, ao mesmo tempo em que se evitam alguns dos problemas que ocorrem com freqncia na criao de projetos baseados em tabelas atravs dos meios convencionais.
possvel definir o layout de uma pgina utilizando vrias clulas de layout dentro de uma tabela de layout - que o mtodo mais comum para a definio do layout de uma pgina na Web - ou utilizar diversas tabelas de layout separadas para layouts mais complexos. O uso de diversas tabelas de layout isola sees do layout, de modo que no possam ser afetadas por alteraes feitas em outras sees. Tambm possvel aninhar tabelas de layout ao inserir uma nova tabela de layout dentro de uma tabela existente. Esta estrutura permite simplificar a estrutura da tabela quando as linhas ou coluna em uma parte do layout no estiveram alinhadas com as linhas ou colunas em outra parte do layout. Por exemplo, ao utilizar tabelas de layout aninhadas seria possvel criar facilmente um layout com duas colunas e quatro linhas na coluna esquerda e trs linhas na coluna direita.
72
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
As larguras de tabelas e clulas de layout (em pixels ou em um percentual da largura da pgina) aparecem na parte superior ou inferior da tabela quando ela selecionada ou quando o ponto de insero se encontra na tabela. Ao lado das larguras, encontram-se setas que indicam o menu de cabealho da tabela e os menus de cabealho de colunas. Use os menus para ter acesso rpido a alguns dos comandos mais comuns. Para desativar larguras de colunas, guias de tabela e menus de cabealho, preciso desativar todos os recursos visuais [View (Visualizar) > Visual Aids (Recursos visuais) > Hide All (Ocultar todos)].
Eventualmente, a largura pode no aparecer para uma coluna; voc provavelmente ver o seguinte: Sem largura. Se voc no vir uma largura para a tabela ou para a coluna, isso significa que a tabela ou coluna no possuem uma largura especfica no cdigo HTML. Dois nmeros. Se aparecerem dois nmeros, a largura visual que aparece no modo Design no coincide com o que foi especificado no cdigo HTML. Isto poder ocorrer quando a tabela redimensionada arrastando seu canto inferior direito ou quando o contedo adicionado a uma clula maior do que a largura definida para essa clula.
Por exemplo, se a largura da coluna for definida como 200 pixels, ao adicionar contedo que aumente a largura para 250 pixels, dois nmeros aparecero na parte superior dessa coluna: 200 (a largura especificada no cdigo) e (250) entre parnteses (a largura visual da coluna, na forma como ele processada na sua tela). Linha ondulada. Uma linha ondulada aparece para as colunas que esto configuradas com alongamento automtico. Barras duplas. Colunas que contm imagens espacejadoras possuem barras duplas em volta da largura da coluna.
Nota
73
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Largura das colunas com tamanho fixo e colunas com alongamento automtico
Uma coluna da tabela no modo Layout pode ter uma largura fixa ou uma largura que se expande automaticamente para preencher o mximo possvel a janela do navegador (alongamento automtico). Colunas de largura - Fixa possuem uma largura numrica especfica, como 300 pixels. O Dreamweaver exibe a largura de cada coluna com largura fixa na parte superior ou inferior da coluna. Colunas com alongamento automtico - Se modificam automaticamente dependendo da largura da janela do navegador. Se o layout incluir uma coluna com alongamento automtico, ele sempre preencher a largura inteira da janela do navegador do visitante. possvel fazer com que somente uma coluna de uma determinada tabela de layout seja alongada automaticamente. Uma coluna com alongamento automtico exibe uma linha ondulada na rea de largura da coluna. Um mtodo de layout comum consiste em provocar o alongamento automtico da coluna que comporta o contedo principal da pgina, o que define automaticamente todas as outras colunas para uma largura fixa. Por exemplo: suponha que o layout tenha uma imagem grande esquerda da pgina e uma coluna de texto direita. possvel definir a coluna da esquerda com uma largura fixa e provocar o alongamento automtico da rea da barra lateral. Ao provocar o alongamento automtico de uma coluna, o Dreamweaver insere imagens espaadoras nas colunas com largura fixa para assegurar que essas colunas tenham a largura apropriada, a menos que seja especificado que nenhuma imagem espaadora deva ser utilizada. Uma imagem espaadora uma imagem transparente utilizada para controlar o espaamento, mas no fica visvel na janela do navegador.
Imagens espaadoras
Uma imagem espaadora (tambm conhecida como GIF de espaamento) uma imagem transparente utilizada para controlar o espaamento em tabelas com alongamento automtico. Uma imagem espaadora consiste em uma imagem GIF transparente de um nico pixel alongada para ter um nmero especfico de pixels. O navegador no pode desenhar uma coluna da tabela mais estreita do que a imagem mais larga contida em uma clula daquela coluna. Por isso, a insero de uma imagem espaadora em uma coluna da tabela exigir que os navegadores mantenham a coluna ao menos com a mesma largura da imagem. O Dreamweaver adiciona automaticamente imagens espaadoras ao definir uma coluna para alongamento automtico, a menos que seja determinado que nenhuma imagem espaadora deva ser utilizada. possvel inserir e remover imagens espaadoras manualmente em cada coluna, se preferir. As colunas que contm imagens espaadoras tm uma barra dupla na rea da largura da coluna. possvel inserir e remover manualmente as imagens espaadoras de colunas especficas ou remover todas as imagens espaadoras da pgina.
Nota
74
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Para passar modo Layout: 1- Se voc estiver no modo de exibio Code, selecione View (Exibir) > Design ou View > Code and Design (Cdigo e design). No possvel mudar para o modo Layout no modo de exibio Code. 2- Siga um dos procedimentos abaixo: Selecione View (Exibir) > Table Mode (Modo da tabela) > Layout Mode (Modo Layout). Na categoria Layout da barra Insert, clique no boto Modo Layout. Uma barra com o nome Layout Mode (Modo Layout) aparece ao longo da parte superior da janela Document (Documento). Se houver tabelas nesta pgina, sero exibidas como tabelas de layout. A fim de mudar para o modo Layout, faa o seguinte: Clique em Exit (Sair) na barra com o nome Layout Mode na parte superior da janela Document. Selecione View (Exibir) > Table Mode (Modo da tabela) > Layout Mode (Modo Layout). Na categoria Layout da barra Insert, clique no boto Modo Standard. O Dreamweaver volta para o modo Standard.
Quando o Dreamweaver cria uma tabela de layout de modo automtico, a tabela exibida inicialmente para preencher toda a visualizao do projeto, mesmo que o tamanho da janela do documento seja alterado. Esta tabela de layout padro que ocupa todo o espao da janela permite desenhar clulas de layout em qualquer local na visualizao do projeto. possvel definir um tamanho especfico para a tabela clicando na borda da tabela e arrastando suas alas de redimensionamento. Quando voc passa o cursor sobre uma clula de layout, o Dreamweaver aplica realce a ela. Voc pode ativar ou desativar o realce ou alterar a cor de realce na caixa de dilogo Preferences (Preferncias). Para desenhar uma clula de layout: 1- Verifique se est no modo Layout 2- Na categoria Layout da barra Insert, clique no boto Draw Layout Cell (Desenhar clula de layout). O ponteiro convertido em uma cruz (+).
Nota
75
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
3- Posicione o ponteiro onde deseja iniciar a clula na pgina e arraste-o para criar a clula de layout. Para desenhar mais de uma clula de layout sem ter que selecionar repetidamente Draw Layout Cell (Desenhar clula de layout), mantenha a tecla Control (no Windows) pressionada enquanto arrasta o mouse para desenhar a clula de layout. possvel continuar a desenhar clulas de layout uma aps a outra, contanto que no solte a tecla Control.
Se voc desenhar a clula prxima borda da tabela de layout, as bordas da clula automaticamente se alinham tabela de layout em que esto contidas. Para desativar temporariamente o encaixe, mantenha pressionada a tecla Alt (no Windows) ou a tecla Option (no Macintosh) ao desenhar a clula. Para desenhar uma tabela de layout: 1- Verifique se est no modo Layout 2- Na categoria Layout da barra Insert, clique no boto Draw Layout Table (Desenhar tabela de layout). O ponteiro convertido em uma cruz (+). 3- Posicione o ponteiro do mouse na pgina e arraste-o para criar a tabela de layout. possvel criar uma tabela de layout em uma rea vazia do layout da pgina, ao redor de clulas e tabelas de layout existentes ou mesmo aninhada em uma tabela de layout existente. Se a pgina possui contedo e voc desejar adicionar uma tabela de layout, possvel desenhar uma nova tabela de layout somente abaixo da parte inferior do contedo existente. Para alterar as preferncias de realce de clulas de layout: 1- Selecione Edit > Preferences. A caixa de dilogo Preferences (Preferncias) ser exibida. 2- Selecione Highlighting (Realce) na lista de categorias esquerda. 3- Faa uma dessas alteraes: Para alterar a cor de realce, clique na caixa de cores e, em seguida, selecione a cor de realce utilizando o seletor de cores (ou digite o valor hexadecimal correspondente cor de realce na caixa de texto). Para ativar ou desativar o realce, marque ou desmarque a caixa de seleo Show (Exibir) de Mouse-Over (Mouse sobre). 4- Clique em OK.
Nota
76
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Para desenhar uma tabela de layout aninhada: 1- Verifique se est no modo Layout 2- Na categoria Layout da barra Insert, clique no boto Draw Layout Table (Desenhar tabela de layout). O ponteiro convertido em uma cruz (+). 3- Aponte para qualquer rea vazia (cinza) em uma tabela de layout existente e, em seguida, arraste para criar a tabela de layout aninhada.
Para desenhar uma tabela de layout ao redor de clulas ou tabelas de layout j existentes: 1- Verifique se est no modo Layout 2- Na categoria Layout da barra Insert, clique no boto Draw Layout Table (Desenhar tabela de layout). O ponteiro convertido em uma cruz (+). 3- Arraste o ponteiro para desenhar um retngulo ao redor de um conjunto de clulas ou tabelas de layout existentes. exibida uma tabela de layout aninhada, incluindo as clulas ou tabelas existentes. Para encaixar perfeitamente uma clula de layout em uma das bordas da nova tabela aninhada, comece a arrast-la prximo borda da clula. A borda da nova tabela se encaixar borda da clula. impossvel arrastar do centro de uma clula de layout, pois no se pode criar uma tabela de layout inteiramente no interior de uma clula de layout.
Dica
77
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
possvel inserir contedo apenas em uma clula de layout, mas no em uma rea vazia (cinza) de uma tabela de layout. Desse modo, para poder adicionar contedo, necessrio primeiro criar as clulas de layout. Para adicionar texto a uma clula de layout: 1- Coloque o ponto de insero na clula de layout em que deseja adicionar texto . 2- Siga um dos procedimentos abaixo: Digite o texto na clula. A clula se expande automaticamente medida que um texto digitado, se necessrio. Cole o texto copiado de outro documento.
Ao adicionar contedo maior do que a clula, a clula de layout se expandir automaticamente. medida que a clula se expande, a coluna onde a clula est localizada tambm se expande, o que pode alterar o tamanho das clulas circunvizinhas. A largura dessa coluna modifica-se para mostrar a largura que aparece no cdigo, seguida da largura visual da coluna (a largura como aparece na tela do usurio) entre parnteses.
78
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Selecione uma tabela de layout, clicando na guia exibida na parte superior da tabela e clique no boto Clear Row Heights (Limpar as alturas das colunas) do inspetor Property (Propriedades), aberto a partir da seleo de Window (Janela) > Properties (Propriedades).
O Dreamweaver limpa todas as alturas especificadas na tabela. Algumas clulas da tabela podem encolher verticalmente.
Sobre os formulrios
Os formulrios permitem obter informaes dos visitantes do seu site da Web. Os visitantes digitam informaes usando objetos de formulrio, como campos de texto, caixas de lista, caixas de seleo e botes de opo, e, em seguida, clicam em um boto para enviar as informaes.
Objetos de formulrio
No Dreamweaver, os tipos de entrada em formulrios so denominados objetos de formulrio. Os objetos de formulrio so mecanismos que permitem aos usurios inserir dados. possvel adicionar os seguintes objetos de formulrio em um formulrio:
79
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Campos de texto: Aceitam qualquer tipo de entrada de texto alfanumrico. O texto pode ser exibido como uma linha nica, vrias linhas e como um campo de senha, no qual o texto digitado substitudo por asteriscos ou marcadores para ocultar o texto de espectadores
Campos ocultos: Armazenam as informaes digitadas pelo usurio (como nome, endereo de correio eletrnico ou preferncia de exibio) e, em seguida, utilizam tais informaes quando o usurio visitar o site novamente. Botes: Executam aes quando clicados. Normalmente, as aes incluem o envio e a redefinio de um formulrio. possvel adicionar um nome ou identificador personalizado a um boto, ou utilizar um dos identificadores predefinidos: Submit (Enviar) ou Reset (Redefinir). Caixas de seleo: Permitem a obteno de vrias respostas em um nico grupo de opes. O usurio pode escolher quantas opes forem necessrias. O exemplo abaixo mostra esse recurso por meio da seleo de trs itens nas caixas de seleo: Surfing (Surfe), Mountain Biking e Rafting (Canoagem)
Botes de opo: Representam opes exclusivas. A seleo de um dos botes do grupo cancela a seleo de todos os outros (um grupo consiste em dois ou mais botes com o mesmo nome). No
80
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
exemplo abaixo, Rafting a opo escolhida. Se o usurio clicar em Surfing, o boto Rafting ser automaticamente desativado.
Menus de lista: Exibem valores de opo em uma lista de rolagem que permite aos usurios selecionar vrias opes. A opo Menu exibe os valores de opo em um menu que permite aos usurios selecionar apenas um item. Menus de salto: So listas navegveis ou menus pop-up que permitem inserir um menu no qual cada opo est vinculada a um documento ou arquivo. Campos de arquivo: Permitem que o usurio procure arquivos no computador e efetue o upload dos arquivos como dados do formulrio. Campos de imagem: permitem inserir uma imagem em um formulrio. Os campos de imagem podem ser utilizados para criar botes com aparncia grfica, como os botes Submit (Enviar) e Reset (Redefinir). Para criar um formulrio: 1- Abra uma pgina e posicione o ponto de insero no local onde voc deseja que o formulrio seja exibido. 2- Selecione Insert (Inserir) > Form (Formulrio) ou selecione a categoria Forms (Formulrios) na barra Insert e clique no cone Form. O Dreamweaver insere um formulrio vazio. Com a pgina na visualizao do projeto, os formulrios so indicados por um contorno pontilhado em vermelho. Se esse contorno no estiver visvel, verifique se a opo View (Exibir) > Visual Aids (Auxlios visuais) > Invisible Elements (Elementos invisveis) est selecionada.
81
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
3- Especifique a pgina ou script que ir processar os dados do formulrio. Na janela do documento, clique no contorno do formulrio para selecionar o formulrio. No Property inspector (Inspetor de propriedades), aberto a partir da seleo de Window (Janela) > Properties (Propriedades), digite o caminho na caixa de texto Action (Ao) do inspetor, ou clique no cone de pasta para navegar para a pgina ou script apropriado. 4- Especifique o mtodo que ser utilizado para transmitir os dados do formulrio para o servidor. No Property inspector, selecione uma das opes a seguir no menu pop-up Method (Mtodo): Default: utiliza a configurao padro do navegador para enviar os dados do formulrio para o servidor. Normalmente, o padro o mtodo GET. GET: anexa o valor URL que solicita a pgina. POST: incorpora os dados do formulrio na solicitao http. 5- Insira objetos de formulrio. Posicione o ponto de insero no local onde deseja que o objeto seja exibido no formulrio e, em seguida, selecione o objeto no menu Insert > Form ou na categoria Forms da barra Insert. 6- Ajuste o layout do formulrio conforme desejado. possvel utilizar quebras de linha, quebras de pargrafo, texto pr-formatado ou tabelas para formatar os formulrios. Um formulrio no pode ser inserido em outro formulrio (ou seja, as tags no podem ser sobrepostas), embora seja possvel incluir mais de um formulrio em uma pgina. 7- Quando estiver criando um formulrio, lembre-se de identificar os campos com texto descritivo para permitir que o usurio identifique o ttulo da pergunta, por exemplo: "Digite o seu nome", para solicitar o nome do usurio. Utilize as tabelas para fornecer uma estrutura para os objetos de formulrio e os identificadores dos campos. Ao utilizar as tabelas em formulrios, verifique se todas as tags table esto delimitadas por tags form.
possvel utilizar o Dreamweaver para inserir rapidamente objetos de formulrio HTML nos formulrios. Se voc estiver trabalhando em um aplicativo ASP.NET para a Web, poder usar o Dreamweaver para inserir rapidamente controles de formulrio ASP.NET possvel criar um formulrio HTML em branco, em Insert (Inserir) > Form (Formulrio) > Form, antes de inserir objetos de formulrio nele. Se voc no criar um formulrio em branco e tentar inserir um objeto de formulrio, o Dreamweaver perguntar se deseja criar um formulrio.
83
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
1- Posicione o ponto de insero dentro do contorno do formulrio: 2- Selecione Insert (Inserir) > Form (Formulrio) > Radio Group (Grupo de botes de opo).A caixa de dilogo Radio Group exibida. 3- Preencha a caixa de dilogo Radio Group e clique em OK. 4- Para obter instrues sobre como preencher a caixa de dilogo Radio Group, clique no boto Help (Ajuda) dessa caixa de dilogo. O Dreamweaver insere o grupo de botes de opo no formulrio HTML. Se voc ainda no tiver inserido um formulrio na pgina, o Dreamweaver ir adicion-lo. Se desejar, possvel alterar o layout do grupo. Os botes de opo tambm podem ser editados usando o Property inspector (Inspetor de propriedades) ou diretamente na visualizao do cdigo. Para inserir um boto de opo de cada vez: 1- Posicione o ponto de insero dentro do contorno do formulrio: 2- Insira um boto de opo selecionando Insert > Form > Radio Button (Boto de opo). Um boto de opo exibido no documento. 3- No Property inspector, defina as propriedades para o boto de opo, conforme desejado. 4- Para identificar o boto de opo, clique junto do boto na pgina e digite o texto do identificador.
84
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Para criar um boto: 1- Posicione o ponto de insero dentro do contorno do formulrio: 2- Selecione Insert (Inserir) > Form (Formulrio) > Button (Boto). Um boto exibido no formulrio. 3- No Property inspector (Inspetor de propriedades), defina as propriedades do boto, conforme desejado. Para obter mais informaes, clique no boto Help (Ajuda) do Property inspector.
85
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
manualmente o caminho do arquivo do qual ele deseja efetuar o upload ou utilizar o boto Browse para localizar e selecionar o arquivo. Para poder utilizar campos de upload de arquivos, necessrio um script no lado servidor ou uma pgina capaz de tratar envios de arquivos de envio de arquivos. Consulte a documentao da tecnologia do servidor utilizada para processar os dados do formulrio. Para criar um campo de arquivo em um formulrio: 1- Insira um formulrio na pgina, a partir da seleo de Insert (Inserir) > Form (Formulrio). 2- Selecione o formulrio para exibir o Property inspector (Inspetor de propriedades) correspondente. 3- Defina o mtodo do formulrio como POST. 4- No menu pop-up Enctype (Tipo de codif.), selecione multipart/form-data. 5- Na caixa de texto Action (Ao), especifique a pgina ou script no lado servidor que est apto a lidar com o arquivo carregado. 6- Posicione o ponto de insero dentro do contorno do formulrio e selecione Insert (Inserir)> Form (Formulrio)> File Field (Campo de arquivo). O campo de arquivos inserido no formulrio. 7- No Property inspector (Inspetor de propriedades), defina as propriedades para o campo de arquivo, conforme desejado. Para obter mais informaes, clique no boto Help (Ajuda) do Property inspector.
86
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
5- Preencha a caixa de dilogo e clique em OK. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
87
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
2- No Property inspector (Inspetor de propriedades), clique no cone em forma de raio ao lado da caixa de texto Init Val (Valor inicial). Ser exibida a caixa de dilogo Dynamic Data (Dados dinmicos). 3- Selecione a coluna do recordset que fornecer um valor para o campo de texto. Em seguida, clique em OK. O campo de texto exibir o contedo dinmico quando o formulrio for visualizado em um navegador.
3- Preencha a caixa de dilogo e clique em OK. 4- Para obter instrues, clique no boto Help (Ajuda) da caixa de dilogo. A caixa de seleo ser exibida selecionada ou no (dependendo dos dados), quando o formulrio for visualizado em um navegador.
88
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Para pr-selecionar dinamicamente um boto de opo HTML: 1- Na visualizao do projeto, selecione um boto de opo no grupo. 2- No Property inspector (Inspetor de propriedades), clique no boto Dynamic (Dinmico). A caixa de dilogo Dynamic Radio Group (Grupo de botes de opo dinmicos) exibida. 3- Preencha a caixa de dilogo e clique em OK. Para obter instrues, clique no boto Help (Ajuda) da caixa de dilogo.
4- Defina as regras de validao para cada campo de texto e clique em OK. Por exemplo, voc poderia especificar que um campo de texto para a idade de uma pessoa aceita somente nmeros.
89
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Para executar um script no cliente: 1- Em um formulrio, selecione um boto Submit (Enviar). 2- No painel Behaviors (Comportamentos), aberto a partir da seleo de Window (Janela) > Behaviors, clique no boto de adio (+) e selecione Call JavaScript (Chamar Javascript) na lista 3- Na caixa de texto Call JavaScript que exibida, digite o nome da funo JavaScript que voc deseja executar quando o usurio clicar no boto. Em seguida, clique em OK. Por exemplo, voc pode digitar o nome de uma funo que ainda no existe, como processMyForm(). 4- Se sua funo JavaScript ainda no existir na seo head do documento, adicione-a agora. Por exemplo, voc poderia definir a seguinte funo JavaScript na seo head do documento para exibir uma mensagem quando o usurio clicar no boto Submit. function processMyForm(){ alert('Thanks for your order!'); }
90
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
4- Preencha a caixa de dilogo. Para obter mais informaes, clique no boto Help (Ajuda) da
caixa de dilogo. 5- Clique em OK. 6- Se o Dreamweaver solicitar a insero de uma tag de formulrio, clique em Yes (Sim). O objeto de formulrio ser exibido no documento.
Para editar valores de acessibilidade para um objeto de formulrio: 1- Na janela do documento, selecione o objeto. 2- Siga um dos procedimentos abaixo: Edite os atributos apropriados na visualizao do cdigo. Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control, selecione Edit Tag (Editar tag).
<identificador> <input type="radio" name="radiobutton" value="radiobutton"> RadioButton1</label> <input type="radio" name="radiobutton" value="radiobutton" id="radiobutton"> <label for="radiobutton">RadioButton2</label> <input type="radio" name="radiobutton" value="radiobutton"> RadioButton3
Tutoriais
Essa parte da Apostila, vamos trabalhar com alguns tutoriais para fixar mais o seu aprendizado.
Configurar folhas de estilo de forma automtica praticamente elimina aquela preocupao contnua de vasculhar o cdigo com a finalidade de inserir os atributos de semntica para padres SEO. Se j era verdade antes, agora, com a ajuda do Dreamweaver, o Tableless parece que veio realmente para ficar. 1. O Dreamweaver CS3 surgiu no mercado com diversas novidades. Uma delas uma boa
91
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
3. Acesse o menu principal do programa clicando em File e selecione a primeira opo, New,
92
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
4. Na janela de opes, encontramos diversos tipos de samples/ templates. Vamos trabalhar com os modelos existentes nos dois primeiros menus: Blank Page ou Blank Template.
5. Agora, vamos construir um site utilizando XHTML, portanto, seja na primeira ou na segunda opo do menu da janelaNew Document, opte pelos templates HTML.
93
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
7. O desenho de uma moeda deitada em uma parte do grfico modelo significa que aquela
94
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
8. J o desenho de um cadeado indica que aquela regio da pgina fixa, ou seja, mesmo
9. Na combo-box Doc Type, podemos selecionar o tipo de linguagem que ser utilizada no cdigo-fonte do site. Neste caso, mantenha a opo-padro, XHTML 1.0 Transitional.
95
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
Adobe Dreamweaver CS5 Web Design (Desenvolvedor Web) 10. Na combo-box Layout CSS, vamos escolher a maneira como sero estruturados os estilos
CSS da pgina que estamos criando, ou seja, em que sero salvos os estilos.
11. Optando pela primeira opo, Add to Head, os estilos CSS sero adicionados dentro do
cdigo da pgina em si, antes do cabealho e, portanto, valero apenas para a pgina.
12. Ao optar pela segunda opo, Create New File, criar-se- um arquivo em separado, no
diretrio de seu site, apenas para os estilos, que poder ser aproveitado para as demais pginas.
96
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
13. A ltima opo, Link to Existing File, pressupe que voc j possui um arquivo de estilos
CSS e, portanto, deseja linkar a pgina que est criando a esse arquivo.
14. Selecione o template/sample que melhor se adaptar ao tipo de pgina que deseja criar, escolha a configurao de estilo CSS com a qual deseja trabalhar e clique em Create.
97
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
15. Caso voc tenha optado por criar um arquivo com os estilos CSS separadamente,
precisar indicar, em seguida, o local onde deseja salvar o arquivo, no diretrio do site.
16. Por ser uma nova pgina, voc pode ter problemas com a referncia de local da folha de
estilos CSS, portanto salve sua pgina tambm no diretrio principal do site.
98
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
17. Aproveite, tambm, para configurar um novo site na lista de profiles de sites do
Dreamweaver, para que voc possa enxergar toda a estrutura do site e administr-lo.
18. Se voc no conhece o caminho para configurar um novo site, simples. Basta acessar o menu principal em Sites, clicar na opo New Site e configur-lo.
99
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
19. Deste modo, ao selecionar o site por meio da combobox da janela Files, voc enxergar
toda a estrutura de seu site, inclusive o arquivo de estilos CSS e a nova pgina.
20. Note que o texto do site j uma explicao de como mont-lo, da mesma forma que
100
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
21. Outros textos que parecem estar em latim (Lorem ipsum...) so reas em que voc
22. Os ttulos e sees de textos do site j aparecem no cdigo- fonte com as codificaes de
semntica to importantes para a varredura do site pelos motores de busca (h1, h2 etc.).
101
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
23. Caso voc deseje modificar as configuraes de tipo de texto, por exemplo, basta abrir a
24. O mesmo serve para o esquema de cores e estruturas do site. Repare que as tags <div>,
102
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
25. Com o nome cadastrado na identificao de uma determinada seo, voc pode
encontrar as configurao dessa seo na folha de estilos e alterar cor, tamanho etc.
26. Deste modo, voc pode adaptar todas as configuraes presentes na folha de estilos para
comear a deixar o site com a cara que voc deseja (cor, divises, fonte etc.).
103
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
27. Crie novas pginas e salve-as no mesmo diretrio de seu site para que voc possa linkar
28. No se esquea de, ao criar novas pginas, relacionar o contedo delas ao arquivo de
folhas de estilo j existente. Ou ento crie um arquivo de estilo CSS para cada pgina.
104
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
29. Uma maneira de no bagunar as configuraes de estilo utilizar a pgina inicial como modelo, ou seja, utilizar o recurso Save as para criar as demais pginas.
30. Para vincular uma pgina outra, basta utilizar o recurso de criao de menu Spry, por meio do menu principal emInsert, Spry e selecionar a opo Spry Menu Bar.
105
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com
106
Conexo Cursos Conectado voc pode MAIS! | Deus Seja Louvado! www.conexaocursos.com