dreamweaver reference

Ajuda e tutoriaisADOBE DREAMWEAVER

Junho de 2013

Alguns links levam a contedo em ingls.

Dreamweaver Creative Cloud

Alguns contedos vinculados a esta pgina podem ser exibidos apenas em ingls.

Sincronizao de configuraes do Dreamweaver com a CreativeCloud

Nota:

Para o incio

Sincronizar configuraes agora

Sempre sincronizar configuraes automaticamente

Desativar Sincronizar configuraes

Nota:

Avanado

A conta de associao Adobe Creative Cloud permite ativar o Dreamweaver em duas mquinas. O recurso de sincronizao em nuvem ajuda amanter as seguintes configuraes do Dreamweaver sincronizadas em duas mquinas:

Preferncias do aplicativo:Geral: todas as preferncias exceto Ativar arquivos relacionados e Identificar arquivos relacionados de forma dinmica.Cores dos cdigos: Plano de fundo padro, Plano de fundo do cdigo ativo, Plano de fundo de somente leitura, Caracteres ocultos,Alteraes no cdigo ativo.Formato do cdigo: todas as preferncias exceto bibliotecas de tags.Dicas de cdigo: todas as preferncias exceto as alteraes feitas usando o link Editor de bibliotecas de tag.Regravao de cdigo: todas as preferncias.Copiar/colar: todas as preferncias.Estilos CSS: todas as preferncias exceto prefixos do fornecedor.Tipos de arquivos/Editores: Recarregar apenas arquivos modificados e Salvar ao iniciar.Fontes: todas as preferncias.Realce: todas as preferncias.Novo documento: todas as preferncias.Visualizar no navegador: Navegador principal, Navegador secundrio e Visualizar usando arquivo temporrio.Site: todas as preferncias exceto Mostrar sempre .Validador W3C: todas as Preferncias exceto Gerenciar.Tamanhos de janela: todas as preferncias exceto velocidade da conexo.

Configuraes do site: todas as configuraes exceto nome do usurio e senha.

uma conta de associao basicamente a conta da ID da Adobe usada ao comprar a associao. A sincronizao com a nuvem estvinculada a sua conta da associao.

Primeira sincronizaoQuando voc inicia o Dreamweaver na mquina em que ele foi instalado primeiro, a seguinte caixa de dilogo exibida:

Sincroniza as configuraes com a nuvem imediatamente.

Sincroniza as configuraes automaticamente. Para obter mais informaes, consulteSincronizao automtica.

Desativa a sincronizao.

voc pode ativar a sincronizao a qualquer momento usando a caixa de dilogo Preferncias.

Abre as opes Sincronizar configuraes na caixa de dilogo Preferncias.

Na segunda mquina, a seguinte caixa de dilogo exibida quando voc inicia o Dreamweaver:

Sincronizar nuvem

Sincronizar local

Sempre sincronizar configuraes automaticamente

Avanado

Sincronizar nuvem

Sincronizar local

Sincronizar nuvem

Sincronizar local

Para o incio

Para o incio

Para o incio

Inclui as configuraes na nuvem. As preferncias do aplicativo na segunda mquina so substitudas pelas configuraesna nuvem. As configuraes do site na nuvem so adicionadas s configuraes na segunda mquina.

As alteraes feitas nas preferncias e nas configuraes do site na segunda mquina so mantidas e tambm so enviadaspara a nuvem.

Sincroniza as configuraes automaticamente. Para obter mais informaes, consulteSincronizao automtica.

Abre as opes Sincronizar configuraes na caixa de dilogo Preferncias.

Os seguintes cenrios ajudam voc a entender a diferena entre as opes Sincronizar nuvem e Sincronizar local:

Cenrio 1Voc altera as Preferncias na primeira mquina e sincroniza essas alteraes com a nuvem. Tambm na segunda mquina, voc altera asPreferncias. Em seguida, quando voc clica em:

As alteraes em Preferncias na primeira mquina so sincronizadas com a segunda mquina. As alteraes realizadas nasegunda mquina so descartadas.

As alteraes nas Preferncias na segunda mquina so mantidas e tambm sincronizadas na nuvem. Quando vocsincronizar novamente a primeira mquina e escolher Sincronizar nuvem, essas alteraes sero refletidas na primeira mquina.

Cenrio 2As alteraes nas configuraes do site na primeira mquina so adicionadas s configuraes na segunda mquina.

As alteraes na segunda mquina so mantidas e sincronizadas com a nuvem. Quando voc sincronizar novamente aprimeira mquina e escolher Sincronizar nuvem, o novo site ser adicionado s configuraes na primeira mquina.

Sincronizao automticaVoc pode ativar a sincronizao automtica de uma das seguintes formas:

Selecione Sempre sincronizar configuraes automaticamente na caixa de dilogo Sincronizar configuraes.

Nota: as caixas de dilogo Sincronizar configuraes so exibidas somente quando voc acessa o Dreamweaver pela primeira vez depois deinstal-lo em suas mquinas. Para sincronizaes subsequentes, use a caixa de dilogo Preferncias ou a notificao do sistema ( ).

Selecione Editar > Preferncias (Win) e Dreamweaver > Preferncias (Mac) e selecione Sincronizar configuraes > Ativar sincronizaoautomtica.

Quando voc ativa a sincronizao automtica, o Dreamweaver sincroniza as configuraes automaticamente sempre que uma preferncia ouuma configurao local editada e salva.

Sincronizao manualClique em Sincronizar configuraes agora na caixa de dilogo Sincronizar configuraes.Clique em Sincronizar configuraes agora na notificao do sistema. Para abrir a caixa de dilogo de notificao, clique em na barrade ferramentas do documento.

(Em Mac) Dreamweaver > Sincronizar configuraes agora e no Windows, Editar > Sincronizar configuraes agora.

Resolver conflitos durante a sincronizaoQuando h uma diferena entre as configuraes nas mquinas e na nuvem, o conflito resolvido com base nas configuraes de Soluo deconflito na caixa de dilogo Preferncias.

Se a Soluo de conflitos estiver definida como Minha preferncia, a caixa de dilogo a seguir exibida quando o conflito surge:

As publicaes no Twitter e Facebook no esto licenciadas nos termos da Creative Commons.

Avisos legais | Poltica de privacidade online

Se voc selecionar Lembrar minhas preferncias, a opo escolhida (Sincronizar local ou Sincronizar nuvem) ser selecionada na caixa dedilogo Preferncias.

Release Notes | Dreamweaver 12.1 | Creative Cloud

To the top

To the top

To the top

This release is available for Creative Cloud members and point product subscribers only. To join Adobe Creative Cloud, see Adobe CreativeCloud.

Before you upgradeUpgrade to Dreamweaver Creative CloudAfter you upgradeKnown limitationsHTML5 videos do not play as intended on website

Version: 12.1

Release Date: 24 September 2012

This document lists the known issues, limitations, and workarounds in the Dreamweaver release for Creative Cloud.

Ensure that you read this document before you upgrade.

Before you upgradeTo avoid losing your personal settings and preferences in Dreamweaver CS6, ensure that you follow the instructions listed below.

Export keyboard shortcutsBefore upgrading to Creative Cloud, do the following:

1. Select Edit > Keyboard Shortcuts2. Click "Export Set As HTML" button.

After you upgrade, refer to the exported file to set the shortcuts again.

Note down items in the Favorites section of the Insert panelItems in the Favorites section of the Insert panel are removed after upgrade. Note down the items so that you can manually add them afterupgrade.

Upgrade to Dreamweaver Creative CloudThis 12.1 upgrade includes fixes from the earlier Dreamweaver 12.0.1 patch release.

1. Open Dreamweaver.2. Select Help > Updates.3. In the Adobe Application Manager, select the Dreamweaver update.4. Click Update.

After you upgrade

Enable previously installed extensionsIf you upgrade from Dreamweaver CS6 to Creative Cloud, your previously installed extensions do not appear in Dreamweaver menus.

To display previously installed extensions, open Adobe Extension Manager, select all extensions, and re-enable them.

Insert items into the Favorites section of the Insert panelThe items you inserted into the Favorites section of the Insert panel in Dreamweaver CS6 are removed after upgrade. Manually reinsert items intothe Favorites panel.

(Mac OS 10.6.x only, FileVault enabled) Point site local root folder outside Users folderLive search does not work if FileVault is enabled for site local root folder.

To the top

To the top

The local root folder is inside the user folder (/Users//). Point the site local root folder outside the Users folder.

HTML labels in Property InspectorHTML keywords are no longer localized in the Property Inspector. They appear in English only.

Known limitations

Edge Animate CompositionsPreviewing Edge Animate compositions in the Live View slows down Dreamweaver considerably. Adobe suggests that you use browser previewfor Edge Animate Compositions.

Only OAM files can be inserted into Dreamweaver. OAM files with double-byte, high-ASCII, or special characters in the filename cannot beinserted.

HTML5 Video/Audio does not play in Live ViewPreview HTML5 audio/video in a browser.

HTML5 videos do not play as intended on websiteIf your video plays well on your local computer but doesnt play on a live web server, its probably because the remote web server isnt configuredproperly for your video format.

For HTML5 video support on your websites, ensure that you correctly configure MIME (Multi-purpose Internet Mail Extensions) types on yourwebserver .

For choosing the correct MIME type, check the format of your videos (MP4, OGV, WEBM). Adobe recommends that you have all the formats or atleast MP4 and WEBM for maximum browser compatibility. You set MIME types for each format separately.

For video encoding, you can try HTML5 Video Player. The player can convert your videos into different HTML5 video formats in a batch mode.

If you plan to host your websites on different web server types such as Windows server with IIS, or Linux server with Apache, configure HTML5MIME types in accordance with the server type.

Set HTML5 video MIME type on ApacheAddType video/ogg.ogvAddType video/mp4.mp4AddType video/webm.webm

Add the following code to your httpd.conf file or to a .htaccess file in the directory containing your video file.

The first line is for videos in an Ogg container. The second line is for videos in an MPEG-4 container. The third is for WebM.

Set HTML5 video MIME type on IISTo set up HTML5 video MIME types on IIS servers, open IIS Manager on the Windows server. Navigate to the MIME Types settings.

There are some differences between the IIS versions. Consult your servers documentation or your hosting company on how to set the HTML5video MIME type for specific file types on Windows servers.

If you use IIS Express and dont have a full instance of IIS running, use the Web.config file. This method works on any IIS7 web server, and isignored on all non-IIS7 web servers. So, it is safe regardless of the type of application or content.

Add the following code to your configuration file:

Twitter and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices | Online Privacy Policy

If you use a web server other than Apache or IIS, consult your servers documentation on how to set the HTML5 video MIME type for specific filetypes.

Novidades | Creative Cloud

Para o incio

Para o incio

Para o incio

Para o incio

Para o incio

Estes recursos esto disponveis para membros da Creative Cloud e assinantes do produto de ponto. Para fazer parte da Adobe Creative Cloud,acesse o site da Adobe Creative Cloud.

Inserir vdeo e udio HTML5Inserir elementos semnticos HTML5 no painel InserirImportar composies do Adobe Edge AnimateSuporte para tela de desenho HTML5Melhorias de suporte ao HTML5 para elementos de formulrioPesquisa dinmica (Mac OS)Melhorias no FTPMelhorias na manipulao de fontesMenu Inserir reorganizado

Inserir udio e vdeo HTML5Voc pode inserir vdeo HTML5 e udio HTML5 em pginas da Web que usam Dreamweaver. Os elementos de vdeo e udio em HTML5especificam um modo padro de incorporar e exibir o vdeo e o udio em uma pgina da Web.

Para obter mais detalhes sobre a insero de vdeo de HTML5, consulte Inserir vdeo HTML5.

Para obter mais detalhes sobre a insero de udio HTML5, consulte Inserir udio HTML5.

Inserir elementos semnticos HTML5 do painel InserirSelecione Layout no painel Inserir (Janela> Inserir) para obter uma lista de elementos semnticos que voc pode inserir em seu layout da pginaHTML5. Para editar as propriedades de elementos semnticos inseridos, selecione um elemento e edite suas propriedades no painelPropriedades.

possvel tambm usar o menu Inserir (Inserir > Layout) para inserir tags semnticas.

As sete novas tags semnticas deste lanamento: Artigo, parte, HGroup, Navegao, Seo, Cabealho e Rodap.

Para um tutorial sobre a utilizao de tags semnticas no layout da pgina, consulte o artigo no blog de Jennifer Marsman intitulado Markupsemntico e layout de pgina.

O tutorial Semntica HTML5 na Dreamweaver CS5.5 fornece uma perspectiva da utilizao dos elementos semnticos HTML5 na DreamweaverCS 5.5.

Importar composies do Adobe Edge AnimateVoc pode importar as composies do Adobe Edge (arquivos OAM) no Dreamweaver. A composio est localizada no local do cursor.

O Dreamweaver insere os contedos extrados do arquivo OAM em uma pasta com o nome edgeanimate_assets por padro. Voc pode alterar olocal padro na caixa de dilogo Configurao do site.

Para obter mais informaes, consulteImportar composies do Edge Animate.

Suporte para tela de desenho HTML5O elemento Tela de desenho HTML5 um continer para grficos gerados dinamicamente. Estes grficos so criados no tempo de execuousando uma linguagem de script como JavaScript. Para obter mais informaes, consulte o artigo Tela de desenho HTML5.

O elemento Tela de desenho tem os atributos de ID, altura e espessura.

Para localizar o elemento Tela de desenho, selecione Inserir > Tela de desenho. Como alternativa, abra o painel Inserir (Janela> Inserir) eselecione Comum no menu.Para editar as propriedades do elemento Tela de desenho, selecione o elemento e edite suas propriedades no painel Propriedades.

Melhorias de suporte ao HTML5 para elementos de formulrio

Para o incio

Para o incio

Fazer upload de arquivos no servidor automaticamente ao salvar

Continue trabalhando com o Dreamweaver ao baixar o site do Business Catalyst

Melhorias na caixa de dilogo de senha da ID da Adobe

Para o incio

Como parte do suporte ao HTML5, os novos atributos foram adicionados ao painel Propriedades para elementos de formulrio. Alm disso, quatronovos elementos de formulrio(e-mail, pesquisa, telefone, URL) foram adicionados seo Formulrios do painel Inserir.Para obter mais informaes, consulteSuporte avanado ao HTML5 para objetos de formulrio.

Pesquisa dinmica (Mac OS)Use a Pesquisa dinmica para localizar arquivos com base nos nomes dos arquivos ou em texto presente nos arquivos. O site selecionado nopainel Arquivos usado para a pesquisa.

A Pesquisa dinmica usa o API do Spotlight em Mac OS. Qualquer personalizao que voc aplicar s preferncias do Spotlight tambm usadapara a Pesquisa dinmica. O Spotlight exibe todos os arquivos no seu computador que correspondem sua consulta de pesquisa. A Pesquisadinmica pesquisa arquivos na pasta raiz do site atualmente selecionado no painel Arquivos.

Para obter mais informaes, consultePesquisar arquivos com base no nome ou contedo do arquivo

Melhorias no FTP

Esta opo permite fazer upload de arquivos no servidor mesmo se umprocesso de upload ou de download estiver em andamento durante a operao de salvamento. Alguns problemas com este recurso na versoanterior foram corrigidos para torn-lo perfeito.

A seleo de Arquivos de upload automtico no servidorao salvar no interrompe o seu trabalho com Dreamweaver ao baixar o site do Business Catalyst.

A ID da Adobe que voc selecionou durante a instalao exibida nesta caixa dedilogo. As opes para salvar sua senha e recuperar senhas esquecidas esto disponveis.

Melhorias na manipulao de fontesA lista de fontes no menu Fonte foi classificada com base nas fontes do sistema e da Web. As fontes do sistema so listadas primeiro no menu.

A caixa de dilogo Gerenciador de fontes da Web (Modificar > Fontes da Web) foi renomeada para Pacote de fontes da Web. Voc podeusar a Pacote de fontes da Web para adicionar fontes de Web lista de fontes.O boto Adicionar fontes foi renomeado para Adicionar fonte local.Os cones separados ajudam a identificar facilmente as fontes do sistema considerando as fontes da Web.

Caixa de dilogo Pacote de fontes da Web

As publicaes no Twitter e no Facebook no esto licenciadas nos termos da Creative Commons.

Avisos legais | Poltica de privacidade on-line

Para o incio

cones separados de fontes do sistema e fontes da Web

Menu Inserir reorganizadoAs opes no painel Inserir e no menu Inserir foram reorganizados. Para obter mais informaes, consulte Alteraes nas opes Inserir |Creative Cloud.

Visualizao e anlise de pginas da Web em vrios dispositivos



Este recurso est disponvel somente para membros da Creative Cloud e assinantes do produto de ponto. Para associar-se Adobe CreativeCloud, consulte Adobe Creative Cloud.

A integrao do Dreamweaver no Edge Inspect permite que voc visualize e inspecione suas pginas da Web em vrios dispositivos conectadosusando o Google Chrome.

O Edge Inspect um aplicativo da Adobe que pode ser baixado da Adobe Creative Cloud e das lojas de aplicativos Apple e Android OS. Paraobter mais informaes sobre o Edge Inspect, consulte Perguntas frequentes do Adobe Edge Inspect.

Na verso gratuita do Edge Inspect, voc pode visualizar seus projetos em apenas um dispositivo de cada vez.

1. Instale o Adobe Edge Inspect em dispositivos como descrito no Guia de instalao do Adobe Edge Inspect.

2. No Dreamweaver, crie um site em um servidor de teste. Adicione pginas ao site para visualizao em vrios dispositivos.

3. Abra a pgina que voc deseja visualizar no Dreamweaver.

4. Selecione Arquivo > Visualizar no navegador > Visualizar no Edge Inspect. O Google Chrome aberto e nele voc pode visualizar suaspginas da Web.

5. Nos dispositivos nos quais voc deseja visualizar a pgina, faa o seguinte:

a. Certifique-se de que todos os dispositivos estejam conectados a uma rede comum.b. No Google Chrome, clique no plug-in do cone do Adobe Inspect.c. Abra o Edge Inspect em cada um dos dispositivos e clique em +.d. Digite o endereo IP do computador em que voc abriu a pgina de visualizao.e. Clique em Entrar. Quando voc emparelhar com sucesso os dispositivos, poder visualizar a pgina aberta no Google Chrome tambm

nos dispositivos conectados.

Quando voc visualiza o site no Google Chrome, as alteraes so refletidas nos dispositivos conectados.

Adicionar fontes da Web e do Edge lista de fontes

Para o incio

Para o incio


Voc pode adicionar fontes do Adobe Edge e da Web lista de fontes no Dreamweaver. Na lista de fontes, as pilhas de fontes com suporte noDreamweaver so listadas antes de fontes da Web e do Edge.

Adio de fontes do Adobe Edge lista de fontesAgora possvel usar fontes do Adobe Edge nas pginas da Web. Quando uma fonte do Edge utilizada em uma pgina, a tag adicional descript adicionada para fazer referncia a um arquivo JavaScript. Esse arquivo baixa a fonte do servidor da Creative Cloud diretamente no cachedo navegador.

Para exibir a pgina, as fontes so baixadas do servidor da Creative Cloud mesmo se a fonte estiver disponvel no computador do usurio.

Por exemplo, (na verso 12.2) uma tag de script que usa somente a fonte Abel tem o formato:

Abel o nome interno que o servidor usa para identificar a fonte. n4 indica que a variao da fonte que est sendo baixada tem estilo normale peso 400.

Na Dreamweaver CC, o script que ser adicionado o seguinte:

var adobewebfontsappname ="dreamweaver"

1. Selecione Modificar > Gerenciar fontes.

2. A guia Fontes do Adobe Edge exibe todas as fontes do Adobe Edge que podem ser adicionadas lista de fontes.

3. Para localizar e adicionar fontes dessa lista lista de fontes, faa o seguinte:

Clique na fonte que voc deseja adicionar lista de fontes.Para desmarcar uma fonte, clique na fonte novamente.

Utilize filtros para criar uma pequena lista das fontes preferidas. Por exemplo, para criar uma pequena lista de fontes Serif, clique em .Voc pode usar vrios filtros. Por exemplo, para criar uma pequena lista de filtros do tipo Serif que pode ser usado para pargrafos,clique em e em .Para pesquisar uma fonte pelo nome, digite seu nome na caixa de pesquisa.

4. Clique em para filtrar as fontes selecionadas.

5. Clique em Concludo.

6. Abra a lista de fontes de qualquer local. Por exemplo, voc poderia usar a lista de fontes na seo CSS do painel Propriedades.

Na lista de fontes, as pilhas de fontes do Dreamweaver so listadas antes das fontes da Web. Navegue para baixo na lista para localizar asfontes selecionadas.

Adio de fontes locais da Web lista de fontesVoc pode adicionar fontes da Web de seu computador lista de fontes no Dreamweaver. As fontes adicionadas so refletidas nos menus defonte no Dreamweaver. Fontes de tipo EOT, WOFF, TTF e SVG so suportadas.




Para o incio

Para o incio

Para o incio

Para o incio

2. Na caixa de dilogo exibida, clique na guia Fontes locais da Web.

3. Clique no boto Procurar que corresponda ao tipo de fonte que deseja adicionar. Por exemplo, se a fonte estiver no formato EOT, clique noboto Procurar correspondente Fonte EOT.

4. Navegue at o local no computador que contm a fonte. Selecione o arquivo e abra-o. Se outros formatos para a fonte existirem nesselocal, eles sero adicionados automaticamente caixa de dilogo. O campo Nome da fonte tambm escolhido automaticamente a partirdo nome da fonte.

5. Selecione a opo que solicita a confirmao de que voc licenciou a fonte para ser usada no site.

6. Clique em Concludo. A lista de fontes exibida na Lista atual de fontes locais.

Para remover uma fonte da Web da lista de fontes, selecione a fonte na Lista atual de fontes locais e clique em Remover.

Criao de pilhas de fontes personalizadasUma pilha de fontes uma lista de fontes em uma declarao font-family da CSS. Usando a guia Pilhas de fontes personalizadas da caixa dedilogo Gerenciar fontes, voc poder:

Adicionar as novas pilhas de fontes usando o boto +.Editar pilhas de fontes existentes, selecionando-as na lista de fontes. Usar os botes >> e

Alteraes nas opes Inserir

Para o incio

Para o incio

Para o incio


Acesso rpido para opes Inserir e suporte avanado a elementos HTML5Opes obsoletasOpes reorganizadas no painel Inserir e no menu Inserir

Acesso rpido para opes Inserir e suporte avanado a elementos HTML5As opes no painel Inserir e no menu Inserir foram reorganizadas para ajud-lo a encontrar e inserir essas opes. Novos elementos HTML5foram inseridos nos menus Inserir.

As modificaes nas opes Inserir foram feitas pelos seguintes motivos:

Sincronize a ordem das opes no painel Inserir com o menu Inserir para aumentar a velocidade das descobertas.Como parte do suporte avanado a HTML5 no Dreamweaver, novos elementos HTML5 foram adicionados s opes Inserir.As opes Inserir que exigem vrios cliques esto obsoletas. Essas opes podem ser configuradas de maneira rpida e fcil usando oInspetor de propriedade ou a Visualizao de cdigo.

Opes obsoletasAs opes Inserir que exigem vrios cliques esto obsoletas. Essas opes ser configuradas usando o Inspetor de propriedades ou navisualizao Cdigo.Como consequncia, as seguintes caixas de dilogo esto obsoletas: Editor de tags, Seletor de tags, Tag de Formulrio e Atributos de acesso atag input. Ento, as opes correspondentes no esto disponveis no menu de clique com o boto direito.

As seguintes opes em Dados no painel Inserir esto obsoletas: Conjunto de dados, Repetir, Regio e Lista de repetio.

As seguintes opes na categoria Tags de cabealho em HTML esto obsoletas: Atualizar, Base, Link.

A opo para definir cones de cores no painel Inserir esto obsoletos. Agora, os cones de elemento esto disponveis somente em preto ebranco.

Opes reorganizadas no painel Inserir e no menu InserirO painel Inserir e o menu Inserir foram reorganizados para serem sincronizados um com outro. A ordem das opes no painel Inserir correspondecom o menu Inserir.

Alm disso, algumas opes novas foram disponibilizadas e algumas opes anteriores foram removidas.

Opes Inserir no Dreamweaver 12 (CS6)

Opes Inserir no Dreamweaver 12.1

Alteraes nas opes Mdia e Formulrio

Opo CS6, CS5.5 Creative Cloud Opes

Div Inserir > Objetos de layout >Tag div Inserir > Div

Vdeo HTML5 No disponvel Inserir > Vdeo HTML5

Tela de desenho No disponvel Inserir > Tela de desenho

Caractere Inserir > HTML > Caracteresespeciais Inserir > Caractere

Quebra de linha, espao noseparvel, direitos autorais,marca registrada, marcacomercial, libra, iene, euro,aspa esquerda, aspa direita,travesso, trao, outro

Cabealho Inserir > HTML > Tags decabealho Inserir > CabealhoMeta, palavras-chave,descrio, porta de exibio

Rgua horizontal No disponvel Inserir > Regra horizontal

Dados Inserir > Objetos de dados Inserir > Dados

Conjunto de registros,Procedimento armazenado,Dados dinmicos, Regiorepetitiva, Mostrar regio,Paginao do conjunto deregistros, Ir para, Exibircontagem de registros,Conjunto de pginasmestre/detalhadas, Inserirregistro, Atualizar registro,Excluir registro, Autenticaodo usurio, TransformaoXSLT

Tag Inserir > Tag No disponvel

Imagem Inserir > Imagem Inserir > ImagemImagem, Imagem desobreposio, HTML doFireworks

Mdia Inserir > Mdia Inserir > Mdia

Composio do Edge Animate,Flash SWF, vdeo em Flash,vdeo HTML5, udio HTML5,Plug-in

Consultas de mdia Inserir > Consultas de Mdia Inserir > Consultas de Mdia

Tabela Inserir > Tabela Inserir > Tabela

Objetos da tabela Inserir > Objetos da tabela No disponvel

Layout Inserir > Layout Inserir > Layout

Div, Div de layout da gradefluida, Desenhar posioabsoluta, Cabealho, HGroup,Navegao, parte, Artigo,Seo, Rodap, Molduras

Formulrio Inserir > Formulrio Inserir > Formulrio

Formulrio, Texto, E-mail,Senha, URL, Telefone,Pesquisar rea do texto,Boto, Enviar, Redefinir,Arquivo, Boto de imagem,Oculto, Selecionar, Boto deopo, Grupo de botes deopo, Caixa de seleo,Grupo de caixas de seleo,Conjuntos de campos, Rtulo

Hiperlink Inserir > Hiperlink Inserir > Hiperlink

Link de e-mail Inserir> Link de e-mail Inserir> Link de e-mail

ncora com nome Inserir> ncora com nome Inserir> ncora com nome

Data Inserir > Data Inserir > Data

O servidor inclui Inserir > O servidor inclui No disponvel

Comentrio Inserir > Comentrio No disponvel

HTML Inserir > HTML No disponvel

Modelo Inserir > Modelo Inserir > Modelo

Criar modelo, Criar modeloaninhado, Regio editvel,Regio opcional, Regiorepetida, Regio opcionaleditvel, Tabela repetitiva

Snippets recentes Inserir > Snippets recentes Inserir > Snippets recentes



Widget Inserir > Widget Inserir > Widget

jQuery Mobile Inserir > jQuery Mvel Inserir > jQuery Mvel

Pgina, Exibio em lista,Grade de layout, Blocoflexvel, Texto, Senha, rea detexto, Selecionar, Caixa deseleo, Boto de opo,Boto, Controle deslizante,Boto de alternncia invertido

No contexto Inserir > No Contexto Inserir > No Contexto Regio editvel, Regiorepetitiva

Spry Inserir > Spry Inserir > Spry

Conjunto de dados, Regio,Repetir, Lista de repetio,Campo de texto de validao,rea de texto de validao,Caixa de seleo devalidao, Seleo devalidao, Senha devalidao, Confirmao devalidao, Grupo de botes deopo de validao, Barra demenus, Painis com guias,Acordeo, Painel flexvel, Dicade ferramenta

Objetos de dados Inserir > Objetos de dados Inserir > Dados

Favoritos Inserir > Favoritos Inserir > Favoritos

Obter mais objetos Inserir > Obter mais objetos Inserir > Obter mais objetos

Inserir udio HTML5

Para o incio

Para o incio


O Dreamweaver permite inserir e visualizar udio HTML5 em pginas da Web. O elemento de udio HTML5 fornece um modo padro deincorporar o contedo de udio em pginas da Web.

Para obter mais informaes sobre o elemento de udio HTML5, consulte o artigo sobre udio HTML5 em W3schools.com.

Inserir udio HTML5Visualizar o udio no navegador

Inserir udio HTML5

1. Certifique-se de que seu cursor esteja no local em que voc deseja inserir o udio.

2. Selecione Inserir > Mdia > udio HTML5. O arquivo de udio inserido no local especificado.

3. No painel Propriedades, insira as informaes a seguir:

Origem / Origem de Alt 1 / Origem de Alt 2: em Origem, insira o local do arquivo de udio. Como alternativa, clique no cone da pastapara selecionar um arquivo de udio em seu computador. O suporte para formatos de udio varia em navegadores diferentes. Se oformato de udio na Origem no for suportado, o formato especificado em Origem de Alt 1 ou Origem de Alt 2 ser usado. O navegadorseleciona o primeiro formato reconhecido para exibir o udio.

Para adicionar vdeos rapidamente aos trs campos, use a seleo mltipla. Quando voc escolhe trs formatos de vdeo para o mesmovdeo de uma pasta, o primeiro formato na lista usado para Origem. Os seguintes formatos na lista so usados para preencher Origemde Alt 1 e Origem de Alt 2 automaticamente.

Ttulo: insira um ttulo para o arquivo de udio.Texto de emergncia: insira o texto a ser exibido em navegadores que no fornecem suporte ao HTML5.Controles: selecione se voc deseja exibir os controles de udio como Reproduzir, Pausar e Mudo na pgina HTML.Reproduo automtica: selecione se quiser que a reproduo do udio seja iniciada assim que ela for carregada na pgina da Web.udio de repetio: selecione esta opo se desejar que o udio seja reproduzido continuamente at que o usurio interrompa areproduo.Mudo: selecione esta opo se desejar silenciar o udio depois do download.Pr-carregar: selecionar Automtico carrega o arquivo de udio inteiro no download da pgina. Se voc selecionar Metadados, odownload dos metadados s ser feito aps a concluso do download da pgina.

Painel Propriedades do udio HTML5

Visualizar o udio no navegador

Navegador MP3 Wav Ogg

Internet Explorer 9 SIM NO NO

Firefox 4.0 NO SIM SIM

Google Chrome 6 SIM SIM SIM

Apple Safari 5 SIM SIM NO

Opera 10.6 NO SIM SIM



1. Salve a pgina da Web.

2. Selecione Arquivo > Visualizar no navegador. Selecione o navegador no qual deseja visualizar o udio.

Inserir vdeo HTML5

Para o incio


O Dreamweaver permite inserir vdeo HTML5 em pginas da Web.

O elemento de vdeo HTML5 fornece um modo padro de incorporar filmes ou vdeos em pginas da Web.

Para obter mais informaes sobre o elemento de vdeo HTML5, consulte o artigo sobre vdeo HTML5 em W3schools.com.

Insero de vdeo HTML5 no DreamweaverInserir vdeo HTML5Visualizar o vdeo no navegador

Inserir vdeo HTML5

1. Certifique-se de que seu cursor esteja no local em que voc deseja inserir o vdeo.

2. Selecione Inserir> Mdia> Vdeo HTML5. O elemento de vdeo HTML5 inserido no local especificado.

3. No painel Propriedades, especifique valores de vrias opes.

Origem / Origem de Alt 1 / Origem de Alt 2: na Origem, insira o local do arquivo de vdeo. Como alternativa, voc pode clicar no coneda pasta para selecionar um arquivo de vdeo no sistema de arquivos local. O suporte de formato do vdeo varia em navegadoresdiferentes. Se o formato do vdeo na Origem no for suportado em um navegador, o formato do vdeo especificado em Origem de Alt 1ou Origem de Alt 2 ser usado. O navegador seleciona o primeiro formato reconhecido para exibir o vdeo.

Para adicionar vdeos rapidamente aos trs campos, use a seleo mltipla. Quando voc escolhe trs formatos de vdeo para o mesmovdeo de uma pasta, o primeiro formato na lista usado para Origem. Os seguintes formatos na lista so usados para preencher Origemde Alt 1 e Origem de Alt 2 automaticamente.

Consulte a tabela abaixo para obter mais informaes sobre o navegador e formato do vdeo suportado. Para obter as ltimas informaes,acesse HTML5 - Suporte a Navegador.

Ttulo: especifique um ttulo para o vdeo.Largura (L): insira a largura em pixel do vdeo.Altura (A): insira a altura em pixel do vdeo.Controles: selecione se desejar exibir os controles de vdeo como Reproduzir, Pausar e Mudo na pgina HTML.Reproduo automtica: selecione se desejar que a reproduo do vdeo seja iniciada assim que ela for carregada na pgina da Web.Imagem do pster: insira o local da imagem que ser exibida at que o download do vdeo seja concludo ou at que o usurio cliqueem Reproduzir. Os valores de Altura e Largura so preenchidos automaticamente quando a imagem inserida.Repetio: selecione esta opo se desejar que o vdeo seja reproduzido continuamente at que o usurio o interrompa.Mudo: selecione esta opo se desejar silenciar o udio do vdeo.

Vdeo Flash: selecione um arquivo SWF para navegadores que no suportam vdeo HTML5.Texto de emergncia: fornea o texto a ser exibido se o navegador no suportar HTML5.Pr-carregar: especifica as preferncias do autor em relao a como o vdeo deve ser carregado quando a pgina carregada. Se vocselecionar Automtico, todo o vdeo ser carregado na pgina de download. Se voc selecionar Metadados, o download dos metadadoss ser feito aps a concluso do download da pgina.

Navegador MP4 WebM Ogg

Internet Explorer 9 SIM NO NO

Firefox 4.0 NO SIM SIM

Google Chrome 6 SIM SIM SIM

Apple Safari 5 SIM NO NO

Opera 10.6 NO SIM SIM



Para o incio

Painel Propriedades de vdeo HTML5

Visualizar o vdeo no navegador

1. Salve a pgina da Web.

2. Selecione Arquivo > Visualizar no navegador. Selecione o navegador no qual deseja visualizar o vdeo.

Importar composies do Edge Animate

Para o incio

Nota:

Nota:

Para o incio

Para o incio


Importar composies do Edge AnimateAlterao do local padro dos arquivos extradosColocao do arquivo inserido entre tags

Importar composies do Edge AnimateVoc pode importar as composies do Adobe Edge Animate (arquivos OAM) no Dreamweaver. A composio inserida no local do cursor.

O Dreamweaver extrai todo o contedo do arquivo OAM importado para uma pasta denominada edgeanimate_assets. Voc pode alterar o localpadro na caixa de dilogo Configurao do site.

os nomes de arquivos com caracteres de byte duplo no tm suporte.

1. Certifique-se de que o cursor esteja no local onde voc deseja inserir a composio do Edge Animate.

2. Selecione Inserir > Mdia > Composio do Edge Animate.

3. Navegue at o arquivo OAM no computador e abra-o. A animao ser inserida no local especificado.

Por padro, o programa extrai o contedo do arquivo OAM para a pasta edgeanimate_assets. Uma subpasta com o nome do arquivo criada. O contedo do arquivo OAM inserido na pasta Ativos neste local.

voc pode inserir composies do Edge Animate em pginas individuais que no faam parte de um site. Os arquivos so extradospara o local da pgina.

Localizao dos arquivos extrados A. A pasta edgeanimate_assets B. A pasta criada com o nome do arquivo OAM C. A pasta Ativos com os arquivos extrados

4. Visualize a composio do Edge Animate em um navegador ou na Visualizao dinmica.

Alterao do local padro dos arquivos extrados

1. Abra a caixa de dilogo Configurao do site do seu site.

2. Em Configuraes avanadas, selecione Ativos do Edge Animate.

3. Em Pasta de ativos, modifique o local para os arquivos extrados.

Colocao do arquivo inserido entre tagsPara colocar o arquivo OAM inserido entre tags, faa o seguinte:

1. Clique com o boto direito do mouse na visualizao de design.



2. Selecione Colocar tag ao redor.3. Na caixa de dilogo Colocar tag ao redor, especifique a tag a ser usada.

Pesquisa de arquivos com base no nome de arquivo ou no contedo| Mac OS



Arquivos correspondentes

Texto correspondente em

Nota:


Este recurso est disponvel somente para Mac OS.

Use a Pesquisa dinmica para localizar arquivos com base nos nomes dos arquivos ou em texto presente nos arquivos. O site selecionado nopainel Arquivos usado para pesquisa. Se no houver nenhum site selecionado no painel, a opo de pesquisa no aparecer.

A Pesquisa dinmica usa a API do Spotlight em Mac OS. Qualquer personalizao que voc aplicar s preferncias do Spotlight tambm usadapara a Pesquisa dinmica. O Spotlight exibe todos os arquivos no seu computador que correspondem sua consulta de pesquisa. A Pesquisadinmica pesquisa arquivos na pasta raiz do site atualmente selecionado no painel Arquivos.

1. Selecione Editar > Pesquisa dinmica. Como alternativa, voc tambm pode usar CMD+SHIFT+F. O foco definido para a caixa de textoda Pesquisa dinmica no painel Arquivos.

2. Insira a palavra ou frase na caixa de texto. Os resultados so exibidos conforme o texto inserido na caixa de texto.

Exibe um mximo de 10 nomes de arquivos que correspondem a seus critrios de pesquisa. A mensagemMais de 10 resultados encontrados ser exibida se houver mais de 10 arquivos correspondentes. Refine seus critrios de pesquisa se noencontrar o arquivo desejado nas opes exibidas.

Exibe um mximo de 10 arquivos que contm o texto que corresponde palavra ou frase que voc inseriu.Para mais opes, clique em Localizar todos. Os resultados so exibidos no painel Pesquisa.

3. Quando voc move o cursor do mouse sobre um resultado de pesquisa, uma dica de ferramenta com o caminho relativo raiz do arquivo exibida. Pressione Enter ou clique no item para abrir o arquivo.

Para arquivos que contm texto correspondente, a primeira instncia do texto destacada. Use Cmd+G para navegar a outras instncias.para fechar o painel de resultados da Pesquisa dinmica, clique fora do painel ou pressione Escape/Esc

Suporte aprimorado a HTML5 para elementos de formulrio

Para o incio

Para o incio

Nota:


Fluxo de trabalho de formulrios revisados no DreamweaverNovos atributos comuns a elementos de formulrioElementos de formulrio com atributos modificadosElementos de formulrio HTML5

Em conformidade com o suporte continuado a HTML5 no Dreamweaver, novos atributos foram includos para alguns elementos de formulrio.Alm disso, quatro novos elementos de formulrio HTML5 foram includos.

Voc pode localizar os elementos de formulrio no painel Inserir. Selecione Janela > Inserir. No menu do painel Inserir, selecione Formulrios.

Links relacionados

Novos atributos comuns a elementos de formulrioOs novos atributos a seguir so comuns a todos os elementos de formulrio:

Disabled: selecione esta opo se deseja que o navegador desative o elemento.Required: selecione esta opo se deseja que o navegador verifique se um valor foi especificado.Auto complete: selecione esta opo para preencher os valores automaticamente quando o usurio inserir informaes em umnavegador.Auto focus: selecione esta opo se deseja que o foco esteja neste elemento quando o navegador carregar a pgina.Read only: selecione esta opo para definir o valor do elemento para somente leitura.Form: especifica um ou vrios formulrios aos quais o elemento pertence.Name: nome exclusivo usado para fazer referncia ao objeto no cdigo.Place holder: dica que descreve o valor esperado de um campo de entrada.Pattern: expresso regular usada para validar o valor do elemento.Title: informaes adicionais sobre um elemento. Exibido como uma dica de ferramenta.ndice de tabulao: especifica a posio do elemento atual na ordem de tabulao do documento atual.

Elementos de formulrio com atributos modificadosForm No Validate: selecione esta opo para desativar a validao do formulrio. Esta seleo substitui o atributo Nenhuma validaono nvel do formulrio.Form Enc Type: um tipo de MIME com o qual um agente do usurio deve associar este elemento para envio do formulrio.Form Target: um nome ou palavra-chave de contexto de navegao que representa o destino do controle.Accept charset: especifica as codificaes de caracteres usadas no envio do formulrio.

os links de atributos contm informaes em todos os atributos listados nas especificaes HTML5. Nem todos esses atributos estopresentes no painel Propriedades. Voc pode usar a visualizao de cdigo para adicionar atributos que no esto presentes no painel.

Elemento do formulrio Novos atributos especficos aoelemento Descrio de atributos

Campo de texto List http://www.w3.org/TR/html-markup/input.text.html

Boto http://www.w3.org/wiki/HTML/Elements/button

Caixa de seleo http://www.w3.org/TR/html-markup/input.checkbox.html

Arquivo Multiple http://www.w3.org/TR/html-markup/input.file.html

Para o incioElementos de formulrio HTML5

Formulrio No validate, Accept charset http://www.w3.org/TR/2012/WD-html-markup-20120329/form.html

Oculto http://www.w3.org/TR/2012/WD-html-markup-20120329/input.hidden.html

Senha http://www.w3.org/TR/html-markup/input.password.html

ImagemWidth, Height, Action, Method,Form no Validate, Form EncType, Form target

http://www.w3.org/TR/html-markup/input.image.html

Redefinir http://dev.w3.org/html5/markup/button.reset.html

EnviarForm No Validate, Form Enctype, Form target, Action, TabIndex, Method

http://www.w3.org/TR/html-markup/input.submit.html

Boto de opo http://www.w3.org/TR/html-markup/input.radio.html

rea do texto Rows, Cols, Place Holder, Wrap,Max Length, Tab Indexhttp://www.w3.org/TR/html-markup/textarea.html

Selecionar Tamanho http://www.w3.org/wiki/HTML/Elements/select

Elemento do formulrio Disponvel em Descrio Descrio de atributos

Cor 12.2 Para campos de entrada quedevem ter uma cor.http://www.w3.org/TR/html-markup/input.color.html

Data 12.2 Controle que ajuda o usurio aselecionar uma data.http://www.w3.org/TR/html-markup/input.date.html

Data e hora 12.2Permite que o usurioselecione uma data e hora(com o fuso horrio).

http://www.w3.org/TR/html-markup/input.datetime.html

Data e hora locais 12.2Permite que o usurioselecione uma data e hora(sem fuso horrio).

http://www.w3.org/TR/html-markup/input.datetime-local.html

Ms 12.2 Permite que usurio selecioneum ms e um ano.http://www.w3.org/TR/html-markup/input.month.html

Nmero 12.2 Para os campos que devemconter apenas nmeros.http://www.w3.org/TR/html-markup/input.number.html

Faixa 12.2Para os campos que devemconter valores de um intervalode nmeros.

http://www.w3.org/TR/html-markup/input.range.html

Tempo 12.2 Permite que o usurioselecione uma hora.http://www.w3.org/TR/html-markup/input.time.html

Semana 12.2Permite que o usurioselecione uma semana e umano.

http://www.w3.org/TR/html-markup/input.week.html

Email 12.1Controle de edio de umalista de endereos de emaildados no valor do elemento.

http://www.w3.org/TR/html-markup/input.email.html

Pesquisa 12.1

Controle de edio de textosimples de uma linha parainserir um ou mais termos depesquisa.

http://www.w3.org/TR/html-markup/input.search.html

Telefone (Tel.) 12.1Controle de edio de textosimples de uma linha parainserir um nmero de telefone.

http://www.w3.org/TR/html-markup/input.tel.html

URL 12.1Controle de edio de um URLabsoluto dado no valor doelemento.

http://www.w3.org/TR/html-markup/input.url.html

Novidades no Dreamweaver 12.2 | Creative Cloud

Para o incio

Para o incio

Para o incio

Para o incio

Estes recursos esto disponveis para membros da Creative Cloud e assinantes do produto de ponto. Para associar-se Adobe Creative Cloud,consulte Adobe Creative Cloud.

Integrao do Edge Web FontsMelhorias do layout de grade fluidaNovos tipos de entrada do formulrio HTML5Novos elementos de formulrio para jQuery MobileVisualizao e anlise de pginas da Web em vrios dispositivosMelhorias no fluxo de trabalho do Edge AnimateAtualizaes para o fluxo de trabalho do PhoneGapOutras alteraes e melhorias

Extenses, Favoritos no painel Inserir e atalhos de teclado so mantidos aps a atualizao das verses 12.0 e 12.1. Se a extenso estiver emum menu Inserir que foi substitudo, voc poder encontrar as extenses em Inserir > Extenses ausentes.

Se as extenses tiverem instalado pontos de acesso (itens) no painel Inserir em uma lista que foi removida, voc poder encontrar esses pontosde acesso na categoria "Diversos". Por exemplo, a lista de mdia na Categoria comum do painel Inserir foi removida. Agora ela apresentadadiretamente no painel Inserir como uma categoria chamada Mdia. Todos os itens que suas extenses colocaram em Mdia anteriormente estoagora na categoria Diversos.

Integrao do Edge Web FontsVoc pode adicionar fontes do Adobe Edge e da Web lista de fontes no Dreamweaver. Na lista de fontes, as pilhas de fontes com suporte noDreamweaver so listadas antes de fontes da Web e do Edge. Para obter mais informaes, consulte Adio de fontes do sistema e do Edge aomenu Fontes.

Melhorias do layout de grade fluidaTodos os elementos de grade fluida foram movidos para a categoria Estrutura do menu Inserir. Novas opes como Lista ordenada (Ol), Lista noordenada (Ul) e Lista (LI) foram inseridas. Quando voc cria uma pgina de grade fluida ou abre uma pgina com modelo de grade fluido, opainel Inserir exibe a visualizao de estrutura por padro.

Alm disso, as opes da interface de usurio de elementos Div, como ocultar, duplicar, bloquear e alternar, agora so exibidas quando vocseleciona um elemento.

Agora possvel aninhar elementos fluidos e especificar uma classe ou ID como um seletor fluido ao inserir um elemento.

Para obter uma explicao detalhada desses aprimoramentos, assista ao vdeo aqui.

Para obter mais informaes sobre os Layouts de grade fluidos, consulte Layouts de grade fluidos.

Novos tipos de entrada do formulrio HTML5Os tipos de entrada de formulrio HTML5 a seguir esto disponveis na Dreamweaver. Para obter mais informaes sobre esses elementos,consulte Tipos de entrada de HTML5.

Cor DataData e horaData e hora locaisMsNmeroFaixaTempoSemana

Novos elementos de formulrio para jQuery Mobile



Para o incio

Para o incio

Para o incio

Para o incio

Agora os seguintes elementos jQuery esto disponveis na Dreamweaver. A funcionalidade desses elementos semelhante funcionalidade doselementos correspondentes em tipos de entrada de formulrio HTML5.

Para obter mais informaes, consulte http://jquerymobile.com/test/docs/forms/textinputs/

DataData e horaEmailMsNmeroPesquisaTempoURLSemana

Visualizao e anlise de pginas da Web em vrios dispositivosVoc pode visualizar e analisar suas pginas da Web na Dreamweaver em vrios dispositivos mveis simultaneamente usando o Edge Inspect.Para obter mais informaes, consulte Visualizao de pginas da Web em vrios dispositivos.

Melhorias no fluxo de trabalho do Edge AnimateNa visualizao de design, o menu contextual foi inserido para arquivos OAM de espao reservado. As opes disponveis no menu soNavegador de cdigo, Colocar tags ao redor, Remover tag, Recortar, Copiar e Colar.Agora possvel inserir um arquivo OAM com caracteres de byte duplo no nome.

Atualizaes para o fluxo de trabalho do PhoneGapAs alteraes na Dreamweaver servem para obter a compatibilidade com as alteraes no PhoneGap. Esse recurso tambm est disponvelcomo parte da atualizao 12.0.3.

Em sistemas operacionais que voc deseja, ser solicitado que voc insira a chave e a senha. As informaes da chave de assinatura sonecessrias apenas para Android, iOS e Blackberry. Se voc no conseguir criar mais de um aplicativo, talvez no tenha assinado o servioPhoneGap.

Para obter mais informaes, consulte Empacotamento de aplicativos da Web como aplicativos nativos de dispositivos mveis com o PhoneGapBuild.

Outras alteraes e melhoriasHTML5 o DocType padro para todos os novos documentos.As configuraes padro para a caixa de dilogo Sincronizao de FTP foram alteradas.

Para Sincronizao, a configurao padro Site inteiro.Para Direo, a configurao padro Obter e Colocar arquivos mais recentes.

A visualizao de tabela expandida foi reintroduzida. No entanto, essa opo no est mais presente no painel Layout. Para usar essaopo, insira uma tabela na Dreamweaver, clique com o boto direito do mouse na tabela e selecione a visualizao de tabela expandida.

Novidades

Alguns contedos vinculados a esta pgina podem ser exibidos apenas em ingls.

Novidades na Dreamweaver CC

Para o incio

Para o incio

Este documento contm a lista de novos recursos do Dreamweaver desde a atualizao do Dreamweaver 12.2. Para obter informaes sobre asnovidades das atualizaes anteriores da Creative Cloud do Dreamweaver, consulte Novidades no Dreamweaver 12.1 | Creative Cloud eNovidades no Dreamweaver 12.2 | Creative Cloud.

Viso geral dos novos recursosCSS DesignerSincronizao de configuraes do Dreamweaver com a Creative CloudSuporte de plataforma atualizadoInterface de usurio simplificada

Viso geral dos novos recursosPaul Trani, divulgador snior de produtos, Creative Cloud, fornece uma viso geral dos novos recursos na Adobe Dreamweaver CC.

CSS DesignerFerramenta de edio visual extremamente intuitiva que ajuda voc a gerar o cdigo limpo padro da Web. Usando essa ferramenta, voc podevisualizar e editar rapidamente os estilos que forem relevantes a um contexto (ou elemento de pgina) especfico. Aplique propriedades comogradientes e sombras de caixa com apenas alguns cliques.

Painel CSS Styles (antes da Dreamweaver CC)

CSS Designer (Dreamweaver CC e posterior)

Para o incio

Para o incio

Tpicos relacionadosPainel CSS Designer

Aplicao de gradientes ao plano de fundo

Sincronizao de configuraes do Dreamweaver com a Creative CloudArmazene os arquivos, as configuraes de aplicativo e as definies de site na Creative Cloud. Faa logon na Creative Cloud e acesse essesarquivos e configuraes de qualquer computador sempre que precisar.

Voc pode configurar o Dreamweaver para sincronizar automaticamente as configuraes com a nuvem. Se preferir, voc pode fazer umasincronizao sob demanda sempre que necessrio usando a notificao toast (clique em na barra de ferramentas Documento) ou a caixa dedilogo Preferncias > Sincronizar configuraes.

Preferncias - Sincronizar configuraes

Notificao toast

Tpicos relacionadosSincronizao de configuraes do Dreamweaver com a Creative Cloud

Suporte de plataforma atualizadoCrie projetos usando estruturas HTML5/CSS3, jQuery e jQuery Mobile. Desenvolva pginas dinmicas em PHP.



Para o incio

Widgets do jQueryArraste e solte acordees, botes, guias e vrios outros widgets do jQuery nos documentos. Deixe seus sites mais interessantes e atraentes comos efeitos do jQuery (Janelas > Comportamentos > Efeitos).

Widgets do jQuery

Efeitos do jQuery

Tpicos relacionadosUso de widgets do jQuery

Uso de efeitos do jQuery

Interface de usurio simplificadaA interface de usurio da Dreamweaver CC foi modernizada com menos caixas de dilogo. A interface aprimorada ajuda a desenvolver sites commais eficincia com menus contextuais intuitivos.

Para obter mais informaes sobre o que mudou na interface de usurio, consulte este artigo.

Novidades no Dreamweaver 12.2 | Creative Cloud

Para o incio

Para o incio

Para o incio

Para o incio

Estes recursos esto disponveis para membros da Creative Cloud e assinantes do produto de ponto. Para associar-se Adobe Creative Cloud,consulte Adobe Creative Cloud.

Integrao do Edge Web FontsMelhorias do layout de grade fluidaNovos tipos de entrada do formulrio HTML5Novos elementos de formulrio para jQuery MobileVisualizao e anlise de pginas da Web em vrios dispositivosMelhorias no fluxo de trabalho do Edge AnimateAtualizaes para o fluxo de trabalho do PhoneGapOutras alteraes e melhorias

Extenses, Favoritos no painel Inserir e atalhos de teclado so mantidos aps a atualizao das verses 12.0 e 12.1. Se a extenso estiver emum menu Inserir que foi substitudo, voc poder encontrar as extenses em Inserir > Extenses ausentes.

Se as extenses tiverem instalado pontos de acesso (itens) no painel Inserir em uma lista que foi removida, voc poder encontrar esses pontosde acesso na categoria "Diversos". Por exemplo, a lista de mdia na Categoria comum do painel Inserir foi removida. Agora ela apresentadadiretamente no painel Inserir como uma categoria chamada Mdia. Todos os itens que suas extenses colocaram em Mdia anteriormente estoagora na categoria Diversos.

Integrao do Edge Web FontsVoc pode adicionar fontes do Adobe Edge e da Web lista de fontes no Dreamweaver. Na lista de fontes, as pilhas de fontes com suporte noDreamweaver so listadas antes de fontes da Web e do Edge. Para obter mais informaes, consulte Adio de fontes do sistema e do Edge aomenu Fontes.

Melhorias do layout de grade fluidaTodos os elementos de grade fluida foram movidos para a categoria Estrutura do menu Inserir. Novas opes como Lista ordenada (Ol), Lista noordenada (Ul) e Lista (LI) foram inseridas. Quando voc cria uma pgina de grade fluida ou abre uma pgina com modelo de grade fluido, opainel Inserir exibe a visualizao de estrutura por padro.

Alm disso, as opes da interface de usurio de elementos Div, como ocultar, duplicar, bloquear e alternar, agora so exibidas quando vocseleciona um elemento.

Agora possvel aninhar elementos fluidos e especificar uma classe ou ID como um seletor fluido ao inserir um elemento.

Para obter uma explicao detalhada desses aprimoramentos, assista ao vdeo aqui.

Para obter mais informaes sobre os Layouts de grade fluidos, consulte Layouts de grade fluidos.

Novos tipos de entrada do formulrio HTML5Os tipos de entrada de formulrio HTML5 a seguir esto disponveis na Dreamweaver. Para obter mais informaes sobre esses elementos,consulte Tipos de entrada de HTML5.

Cor DataData e horaData e hora locaisMsNmeroFaixaTempoSemana

Novos elementos de formulrio para jQuery Mobile



Para o incio

Para o incio

Para o incio

Para o incio

Agora os seguintes elementos jQuery esto disponveis na Dreamweaver. A funcionalidade desses elementos semelhante funcionalidade doselementos correspondentes em tipos de entrada de formulrio HTML5.

Para obter mais informaes, consulte http://jquerymobile.com/test/docs/forms/textinputs/

DataData e horaEmailMsNmeroPesquisaTempoURLSemana

Visualizao e anlise de pginas da Web em vrios dispositivosVoc pode visualizar e analisar suas pginas da Web na Dreamweaver em vrios dispositivos mveis simultaneamente usando o Edge Inspect.Para obter mais informaes, consulte Visualizao de pginas da Web em vrios dispositivos.

Melhorias no fluxo de trabalho do Edge AnimateNa visualizao de design, o menu contextual foi inserido para arquivos OAM de espao reservado. As opes disponveis no menu soNavegador de cdigo, Colocar tags ao redor, Remover tag, Recortar, Copiar e Colar.Agora possvel inserir um arquivo OAM com caracteres de byte duplo no nome.

Atualizaes para o fluxo de trabalho do PhoneGapAs alteraes na Dreamweaver servem para obter a compatibilidade com as alteraes no PhoneGap. Esse recurso tambm est disponvelcomo parte da atualizao 12.0.3.

Em sistemas operacionais que voc deseja, ser solicitado que voc insira a chave e a senha. As informaes da chave de assinatura sonecessrias apenas para Android, iOS e Blackberry. Se voc no conseguir criar mais de um aplicativo, talvez no tenha assinado o servioPhoneGap.

Para obter mais informaes, consulte Empacotamento de aplicativos da Web como aplicativos nativos de dispositivos mveis com o PhoneGapBuild.

Outras alteraes e melhoriasHTML5 o DocType padro para todos os novos documentos.As configuraes padro para a caixa de dilogo Sincronizao de FTP foram alteradas.

Para Sincronizao, a configurao padro Site inteiro.Para Direo, a configurao padro Obter e Colocar arquivos mais recentes.

A visualizao de tabela expandida foi reintroduzida. No entanto, essa opo no est mais presente no painel Layout. Para usar essaopo, insira uma tabela na Dreamweaver, clique com o boto direito do mouse na tabela e selecione a visualizao de tabela expandida.

Novidades | Creative Cloud

Para o incio

Para o incio

Para o incio

Para o incio

Para o incio

Estes recursos esto disponveis para membros da Creative Cloud e assinantes do produto de ponto. Para fazer parte da Adobe Creative Cloud,acesse o site da Adobe Creative Cloud.

Inserir vdeo e udio HTML5Inserir elementos semnticos HTML5 no painel InserirImportar composies do Adobe Edge AnimateSuporte para tela de desenho HTML5Melhorias de suporte ao HTML5 para elementos de formulrioPesquisa dinmica (Mac OS)Melhorias no FTPMelhorias na manipulao de fontesMenu Inserir reorganizado

Inserir udio e vdeo HTML5Voc pode inserir vdeo HTML5 e udio HTML5 em pginas da Web que usam Dreamweaver. Os elementos de vdeo e udio em HTML5especificam um modo padro de incorporar e exibir o vdeo e o udio em uma pgina da Web.

Para obter mais detalhes sobre a insero de vdeo de HTML5, consulte Inserir vdeo HTML5.

Para obter mais detalhes sobre a insero de udio HTML5, consulte Inserir udio HTML5.

Inserir elementos semnticos HTML5 do painel InserirSelecione Layout no painel Inserir (Janela> Inserir) para obter uma lista de elementos semnticos que voc pode inserir em seu layout da pginaHTML5. Para editar as propriedades de elementos semnticos inseridos, selecione um elemento e edite suas propriedades no painelPropriedades.

possvel tambm usar o menu Inserir (Inserir > Layout) para inserir tags semnticas.

As sete novas tags semnticas deste lanamento: Artigo, parte, HGroup, Navegao, Seo, Cabealho e Rodap.

Para um tutorial sobre a utilizao de tags semnticas no layout da pgina, consulte o artigo no blog de Jennifer Marsman intitulado Markupsemntico e layout de pgina.

O tutorial Semntica HTML5 na Dreamweaver CS5.5 fornece uma perspectiva da utilizao dos elementos semnticos HTML5 na DreamweaverCS 5.5.

Importar composies do Adobe Edge AnimateVoc pode importar as composies do Adobe Edge (arquivos OAM) no Dreamweaver. A composio est localizada no local do cursor.

O Dreamweaver insere os contedos extrados do arquivo OAM em uma pasta com o nome edgeanimate_assets por padro. Voc pode alterar olocal padro na caixa de dilogo Configurao do site.

Para obter mais informaes, consulteImportar composies do Edge Animate.

Suporte para tela de desenho HTML5O elemento Tela de desenho HTML5 um continer para grficos gerados dinamicamente. Estes grficos so criados no tempo de execuousando uma linguagem de script como JavaScript. Para obter mais informaes, consulte o artigo Tela de desenho HTML5.

O elemento Tela de desenho tem os atributos de ID, altura e espessura.

Para localizar o elemento Tela de desenho, selecione Inserir > Tela de desenho. Como alternativa, abra o painel Inserir (Janela> Inserir) eselecione Comum no menu.Para editar as propriedades do elemento Tela de desenho, selecione o elemento e edite suas propriedades no painel Propriedades.

Melhorias de suporte ao HTML5 para elementos de formulrio

Para o incio

Para o incio

Fazer upload de arquivos no servidor automaticamente ao salvar

Continue trabalhando com o Dreamweaver ao baixar o site do Business Catalyst

Melhorias na caixa de dilogo de senha da ID da Adobe

Para o incio

Como parte do suporte ao HTML5, os novos atributos foram adicionados ao painel Propriedades para elementos de formulrio. Alm disso, quatronovos elementos de formulrio(e-mail, pesquisa, telefone, URL) foram adicionados seo Formulrios do painel Inserir.Para obter mais informaes, consulteSuporte avanado ao HTML5 para objetos de formulrio.

Pesquisa dinmica (Mac OS)Use a Pesquisa dinmica para localizar arquivos com base nos nomes dos arquivos ou em texto presente nos arquivos. O site selecionado nopainel Arquivos usado para a pesquisa.

A Pesquisa dinmica usa o API do Spotlight em Mac OS. Qualquer personalizao que voc aplicar s preferncias do Spotlight tambm usadapara a Pesquisa dinmica. O Spotlight exibe todos os arquivos no seu computador que correspondem sua consulta de pesquisa. A Pesquisadinmica pesquisa arquivos na pasta raiz do site atualmente selecionado no painel Arquivos.

Para obter mais informaes, consultePesquisar arquivos com base no nome ou contedo do arquivo

Melhorias no FTP

Esta opo permite fazer upload de arquivos no servidor mesmo se umprocesso de upload ou de download estiver em andamento durante a operao de salvamento. Alguns problemas com este recurso na versoanterior foram corrigidos para torn-lo perfeito.

A seleo de Arquivos de upload automtico no servidorao salvar no interrompe o seu trabalho com Dreamweaver ao baixar o site do Business Catalyst.

A ID da Adobe que voc selecionou durante a instalao exibida nesta caixa dedilogo. As opes para salvar sua senha e recuperar senhas esquecidas esto disponveis.

Melhorias na manipulao de fontesA lista de fontes no menu Fonte foi classificada com base nas fontes do sistema e da Web. As fontes do sistema so listadas primeiro no menu.

A caixa de dilogo Gerenciador de fontes da Web (Modificar > Fontes da Web) foi renomeada para Pacote de fontes da Web. Voc podeusar a Pacote de fontes da Web para adicionar fontes de Web lista de fontes.O boto Adicionar fontes foi renomeado para Adicionar fonte local.Os cones separados ajudam a identificar facilmente as fontes do sistema considerando as fontes da Web.

Caixa de dilogo Pacote de fontes da Web



Para o incio

cones separados de fontes do sistema e fontes da Web

Menu Inserir reorganizadoAs opes no painel Inserir e no menu Inserir foram reorganizados. Para obter mais informaes, consulte Alteraes nas opes Inserir |Creative Cloud.

Painel CSS Designer

Origens

@Mdia

Seletores

Na Dreamweaver CC e posterior, o painel CSS Styles foi substitudo pelo CSS Designer.

Criar e anexar folhas de estiloDefinir consultas de mdiaDefinir seletoresPropriedades de grupo

O CSS Designer (Janelas > CSS Designer) um painel integrado que permite criar visualmente arquivos CSS, regras e propriedades de grupo,junto com consultas de mdia.

Painel CSS Designer

O painel CSS Designer consiste nos seguintes painis:

Lista todas as folhas de estilo associadas ao documento. Com esse painel, voc pode criar e anexar uma CSS ao documento ou definirestilos no documento.

Lista todas as consultas de mdia na origem selecionada no painel Origens. Se voc no selecionar uma CSS especfica, esse painelexibir todas as consultas de mdia associadas ao documento.

Lista todos os seletores na origem selecionada no painel Origens. Se voc tambm selecionar uma consulta de mdia, esse painelreduzir a lista de seletores da consulta de mdia em questo. Se nenhuma CSS ou consulta de mdia for selecionada, esse painel exibir todosos seletores no documento.Quando voc seleciona Global no painel @Mdia, todos os seletores no includos em uma consulta de mdia da fonte selecionada so exibidos.

Propriedades

Nota:

Para o incio

Exibe as propriedades que voc pode definir para o selecionador especificado. Para obter mais informaes, consulte Definirpropriedades.

O CSS Designer sensvel ao contexto. Isso significa que, para qualquer contexto fornecido ou elemento de pgina selecionado, voc pode exibiras propriedades e os seletores associados. Caso contrrio, quando voc selecionar um seletor no CSS Designer, as consultas de mdia e origemassociadas sero realadas nos respectivos painis.

CSS Designer mostrando as propriedades da imagem selecionada na visualizao dinmica

CSS Designer mostrando as propriedades do cabealho selecionado na visualizao dinmica

quando voc seleciona um elemento de pgina, Computado selecionado no painel Seletores. Clique em um seletor para exibir aorigem, a consulta de mdia ou as propriedades associadas.

Para exibir todos os seletores, selecione Todas as origens no painel Origens. Para exibir os seletores que no pertencem a consultas de mdia nafonte selecionada, clique em Global no painel @Mdia.

Criar e anexar folhas de estilo

1. No painel Origens do painel CSS Designer, clique em e em uma das seguintes opes:

Criar um novo arquivo CSS: para criar e anexar um novo arquivo CSS ao documentoAnexar arquivo CSS existente: para anexar um arquivo CSS existente ao documentoDefinir na pgina: para definir uma CSS no documento

Com base na opo selecionada, as caixas de dilogo Criar um novo arquivo CSS ou Anexar arquivo CSS existente so exibidas.

Para o incio

Nota:

Para o incio

Para o incio

2. Clique em Procurar para especificar o nome do arquivo CSS e, se voc estiver criando uma CSS, o local para salvar o novo arquivo.

3. Siga um destes procedimentos:

Clique em Vincular para vincular o documento do Dreamweaver ao arquivo CSS.Clique em Importar para importar o arquivo CSS no documento.

4. (Opcional) Clique em Uso condicional e especifique a consulta de mdia que deseja associar ao arquivo CSS.

Definir consultas de mdia

1. No painel CSS Designer, clique em uma origem CSS no painel Origens.

2. Clique em no painel @Mdia para adicionar uma nova consulta de mdia.

A caixa de dilogo Definir consulta de mdia aparece e relaciona todas as condies de consulta de mdia compatveis com oDreamweaver.

3. Selecione as Condies conforme desejar. Para obter informaes detalhadas sobre consultas de mdia, consulte este artigo.

Verifique se voc especificou valores vlidos para todas as condies selecionadas. Caso contrrio, as consultas de mdia correspondentesno sero criadas com sucesso.

no momento, somente a operao e est disponvel para vrias condies.

Se voc adicionar as condies de consulta de mdia pelo cdigo, apenas as condies permitidas sero preenchidas na caixa de dilogo Definirconsulta de mdia. A caixa de texto Cdigo na caixa de dilogo, entretanto, mostra o cdigo completo (incluindo condies no permitidas).

Se voc clicar em uma consulta de mdia na visualizao dinmica/de design, a janela de visualizao alterada para corresponder consultade mdia selecionada. Para exibir o tamanho total da janela de visualizao, clique em Global no painel @Mdia.

Definir seletores

1. No CSS Designer, selecione uma origem CSS no painel Origens ou uma consulta de mdia no painel @Mdia.

2. No painel Seletores, clique em . Com base no elemento selecionado no documento, o CSS Designer identifica de forma inteligente esolicita o seletor relevante. Por padro, o seletor Mais especfico. possvel editar o seletor para deix-lo Menos especfico.

Diferentemente do painel CSS Styles, voc no pode selecionar um Tipo de seletor diretamente no CSS Designer. necessrio digitar onome do seletor junto com o identificador do Tipo de seletor. Por exemplo, se voc estiver especificando uma ID, o nome do seletor deverter o prefixo #.

Para pesquisar um seletor especfico, use a caixa de pesquisa na parte superior do painel.Para renomear um seletor, clique no seletor e digite o nome necessrio.Para reorganizar os seletores, arraste os seletores at a posio desejada.Para mover um seletor de uma origem para outra, arraste o seletor at a origem necessria no painel Origem.Para duplicar um seletor na origem selecionada, clique com o boto direito no seletor e clique em Duplicar.Para duplicar um seletor e adicion-lo a uma consulta de mdia, clique com o boto direito no seletor, passe o mouse sobre Duplicar naconsulta de mdia e escolha a consulta de mdia.

Observao: a opo Duplicar na consulta de mdia est disponvel somente quando a fonte do seletor selecionado contm consultas demdia. No possvel duplicar um seletor de uma fonte em uma consulta de mdia de outra fonte.

Propriedades de grupoAs propriedades so agrupadas nas seguintes categorias e representadas por cones diferentes na parte superior do painel Propriedades:

LayoutTextoBordaPlano de fundoOutros (lista de propriedades somente texto e no propriedades com controles visuais)

Marque a caixa de seleo Exib. conj. para exibir apenas as propriedades de grupo. Para exibir todas as propriedades que voc pode especificarpara um seletor, desmarque a caixa de seleo Exib. conj..

Todas as propriedades

Somente propriedades de grupo

Para definir uma propriedade, como width ou border-collapse, clique nas opes necessrias exibidas perto da propriedade no painelPropriedades. Para obter informaes sobre como definir o plano de fundo do gradiente ou controles de caixa como margens, preenchimento eposio, consulte os links abaixo:

Definir margens, preenchimento e posio

Aplicar gradientes ao plano de fundo

As propriedades substitudas so indicadas em formato de tachado.

Formato de tachado para propriedades substitudas

Definir margens, preenchimento e posioUsando o painel Propriedades do CSS Designer, possvel definir rapidamente as propriedades de margens, preenchimento e posio usando oscontroles de caixa.

propriedade margin

propriedade padding

propriedade position

Clique nos valores e digite o valor necessrio. Se desejar que os quatro valores sejam iguais e alterados simultaneamente, clique no cone devnculo ( ) no centro.

A qualquer momento, voc pode desativar ( ) ou excluir ( ) valores especficos, por exemplo, o valor da margem esquerda, e manter os valoresdas margens direita, superior e inferior.

cones de desativar, excluir e vincular das margens

Desativar ou excluir propriedadesO painel do CSS Designer permite desativar ou excluir cada propriedade. A seguinte captura de tela mostra os cones de desativar ( ) e excluir (

) da propriedade width. Esses cones ficam visveis quando voc passa o mouse na propriedade.



Desativar/excluir propriedade

Visualizao e anlise de pginas da Web em vrios dispositivos




A integrao do Dreamweaver no Edge Inspect permite que voc visualize e inspecione suas pginas da Web em vrios dispositivos conectadosusando o Google Chrome.

O Edge Inspect um aplicativo da Adobe que pode ser baixado da Adobe Creative Cloud e das lojas de aplicativos Apple e Android OS. Paraobter mais informaes sobre o Edge Inspect, consulte Perguntas frequentes do Adobe Edge Inspect.

Na verso gratuita do Edge Inspect, voc pode visualizar seus projetos em apenas um dispositivo de cada vez.

1. Instale o Adobe Edge Inspect em dispositivos como descrito no Guia de instalao do Adobe Edge Inspect.

2. No Dreamweaver, crie um site em um servidor de teste. Adicione pginas ao site para visualizao em vrios dispositivos.

3. Abra a pgina que voc deseja visualizar no Dreamweaver.

4. Selecione Arquivo > Visualizar no navegador > Visualizar no Edge Inspect. O Google Chrome aberto e nele voc pode visualizar suaspginas da Web.

5. Nos dispositivos nos quais voc deseja visualizar a pgina, faa o seguinte:

a. Certifique-se de que todos os dispositivos estejam conectados a uma rede comum.b. No Google Chrome, clique no plug-in do cone do Adobe Inspect.c. Abra o Edge Inspect em cada um dos dispositivos e clique em +.d. Digite o endereo IP do computador em que voc abriu a pgina de visualizao.e. Clique em Entrar. Quando voc emparelhar com sucesso os dispositivos, poder visualizar a pgina aberta no Google Chrome tambm

nos dispositivos conectados.

Quando voc visualiza o site no Google Chrome, as alteraes so refletidas nos dispositivos conectados.

Importar composies do Edge Animate

Para o incio

Nota:

Nota:

Para o incio

Para o incio


Importar composies do Edge AnimateAlterao do local padro dos arquivos extradosColocao do arquivo inserido entre tags

Importar composies do Edge AnimateVoc pode importar as composies do Adobe Edge Animate (arquivos OAM) no Dreamweaver. A composio inserida no local do cursor.

O Dreamweaver extrai todo o contedo do arquivo OAM importado para uma pasta denominada edgeanimate_assets. Voc pode alterar o localpadro na caixa de dilogo Configurao do site.

os nomes de arquivos com caracteres de byte duplo no tm suporte.

1. Certifique-se de que o cursor esteja no local onde voc deseja inserir a composio do Edge Animate.

2. Selecione Inserir > Mdia > Composio do Edge Animate.

3. Navegue at o arquivo OAM no computador e abra-o. A animao ser inserida no local especificado.

Por padro, o programa extrai o contedo do arquivo OAM para a pasta edgeanimate_assets. Uma subpasta com o nome do arquivo criada. O contedo do arquivo OAM inserido na pasta Ativos neste local.

voc pode inserir composies do Edge Animate em pginas individuais que no faam parte de um site. Os arquivos so extradospara o local da pgina.

Localizao dos arquivos extrados A. A pasta edgeanimate_assets B. A pasta criada com o nome do arquivo OAM C. A pasta Ativos com os arquivos extrados

4. Visualize a composio do Edge Animate em um navegador ou na Visualizao dinmica.

Alterao do local padro dos arquivos extrados

1. Abra a caixa de dilogo Configurao do site do seu site.

2. Em Configuraes avanadas, selecione Ativos do Edge Animate.

3. Em Pasta de ativos, modifique o local para os arquivos extrados.

Colocao do arquivo inserido entre tagsPara colocar o arquivo OAM inserido entre tags, faa o seguinte:

1. Clique com o boto direito do mouse na visualizao de design.



2. Selecione Colocar tag ao redor.3. Na caixa de dilogo Colocar tag ao redor, especifique a tag a ser usada.

Adicionar fontes da Web e do Edge lista de fontes

Para o incio

Para o incio


Voc pode adicionar fontes do Adobe Edge e da Web lista de fontes no Dreamweaver. Na lista de fontes, as pilhas de fontes com suporte noDreamweaver so listadas antes de fontes da Web e do Edge.

Adio de fontes do Adobe Edge lista de fontesAgora possvel usar fontes do Adobe Edge nas pginas da Web. Quando uma fonte do Edge utilizada em uma pgina, a tag adicional descript adicionada para fazer referncia a um arquivo JavaScript. Esse arquivo baixa a fonte do servidor da Creative Cloud diretamente no cachedo navegador.

Para exibir a pgina, as fontes so baixadas do servidor da Creative Cloud mesmo se a fonte estiver disponvel no computador do usurio.

Por exemplo, (na verso 12.2) uma tag de script que usa somente a fonte Abel tem o formato:

Abel o nome interno que o servidor usa para identificar a fonte. n4 indica que a variao da fonte que est sendo baixada tem estilo normale peso 400.

Na Dreamweaver CC, o script que ser adicionado o seguinte:

var adobewebfontsappname ="dreamweaver"


2. A guia Fontes do Adobe Edge exibe todas as fontes do Adobe Edge que podem ser adicionadas lista de fontes.

3. Para localizar e adicionar fontes dessa lista lista de fontes, faa o seguinte:

Clique na fonte que voc deseja adicionar lista de fontes.Para desmarcar uma fonte, clique na fonte novamente.

Utilize filtros para criar uma pequena lista das fontes preferidas. Por exemplo, para criar uma pequena lista de fontes Serif, clique em .Voc pode usar vrios filtros. Por exemplo, para criar uma pequena lista de filtros do tipo Serif que pode ser usado para pargrafos,clique em e em .Para pesquisar uma fonte pelo nome, digite seu nome na caixa de pesquisa.

4. Clique em para filtrar as fontes selecionadas.

5. Clique em Concludo.

6. Abra a lista de fontes de qualquer local. Por exemplo, voc poderia usar a lista de fontes na seo CSS do painel Propriedades.

Na lista de fontes, as pilhas de fontes do Dreamweaver so listadas antes das fontes da Web. Navegue para baixo na lista para localizar asfontes selecionadas.

Adio de fontes locais da Web lista de fontesVoc pode adicionar fontes da Web de seu computador lista de fontes no Dreamweaver. As fontes adicionadas so refletidas nos menus defonte no Dreamweaver. Fontes de tipo EOT, WOFF, TTF e SVG so suportadas.




Para o incio

Para o incio

Para o incio

Para o incio

2. Na caixa de dilogo exibida, clique na guia Fontes locais da Web.

3. Clique no boto Procurar que corresponda ao tipo de fonte que deseja adicionar. Por exemplo, se a fonte estiver no formato EOT, clique noboto Procurar correspondente Fonte EOT.

4. Navegue at o local no computador que contm a fonte. Selecione o arquivo e abra-o. Se outros formatos para a fonte existirem nesselocal, eles sero adicionados automaticamente caixa de dilogo. O campo Nome da fonte tambm escolhido automaticamente a partirdo nome da fonte.

5. Selecione a opo que solicita a confirmao de que voc licenciou a fonte para ser usada no site.

6. Clique em Concludo. A lista de fontes exibida na Lista atual de fontes locais.

Para remover uma fonte da Web da lista de fontes, selecione a fonte na Lista atual de fontes locais e clique em Remover.

Criao de pilhas de fontes personalizadasUma pilha de fontes uma lista de fontes em uma declarao font-family da CSS. Usando a guia Pilhas de fontes personalizadas da caixa dedilogo Gerenciar fontes, voc poder:

Adicionar as novas pilhas de fontes usando o boto +.Editar pilhas de fontes existentes, selecionando-as na lista de fontes. Usar os botes >> e

Uso de efeitos do jQuery no Dreamweaver

Para o incio

Para o incio

Os efeitos do Spry foram substitudos pelos efeitos do jQuery na Dreamweaver CC. Embora ainda possa modificar os efeitos do Spry existentesna pgina, voc no pode adicionar novos efeitos do Spry.

Adicionar efeitos do jQueryEfeitos do jQuery com base no eventoRemoo de efeitos do jQuery

Adicionar efeitos do jQuery

1. Na visualizao Design ou Cdigo do documento do Dreamweaver, selecione o elemento ao qual voc deseja aplicar um efeito do jQuery.

2. Selecione Janelas > Comportamentos para abrir o painel Comportamentos.

3. Clique em , clique em Efeitos e clique no efeito desejado.

O painel de personalizao com as configuraes do efeito selecionado exibido.

4. Especifique as configuraes, como o elemento de destino ao qual o efeito deve ser aplicado, e a durao do efeito.

O elemento de destino pode ser igual ao elemento selecionado inicialmente ou a um elemento diferente na pgina. Por exemplo, se desejarque os usurios cliquem em um elemento A para ocultar ou mostrar um elemento B, o elemento de destino B.

5. Para adicionar vrios efeitos do jQuery, repita as etapas acima.

Ao selecionar vrios efeitos, o Dreamweaver aplica os efeitos na ordem em que so exibidos no painel Comportamentos. Para alterar aordem dos efeitos, use as teclas de seta na parte superior do painel.

O Dreamweaver insere automaticamente o cdigo relevante no documento. Por exemplo, se voc selecionar o efeito Fade, o seguinte cdigoser inserido:

Referncias de arquivos externos para os arquivos dependentes necessrios para que os efeitos do jQuery funcionem:

O seguinte cdigo aplicado ao elemento na tag de corpo:

Earth Forms

Uma tag de script com o seguinte cdigo adicionada:

function MM_DW_effectAppearFade(obj,method,effect,speed) { obj[method](effect, {}, speed); }

Efeitos do jQuery com base no eventoQuando voc aplica um efeito do jQuery, ele atribudo ao evento onClick por padro. Voc pode alterar o evento de disparo do efeito usandoo painel Comportamentos.

1. Selecione o elemento de pgina obrigatrio.

2. No painel Janelas > Comportamentos, clique no cone Mostrar eventos de grupo.

3. Clique na linha que corresponde ao efeito que est atualmente aplicado. Observe que a primeira coluna se transforma em uma listasuspensa que fornece uma lista de eventos a serem escolhidos.

4. Clique no evento obrigatrio.



Para o incioRemoo de efeitos do jQuery

1. Selecione o elemento de pgina obrigatrio.

O painel Comportamentos lista todos os efeitos aplicados atualmente ao elemento de pgina selecionado.

2. Clique no efeito que deseja excluir e clique em .

Pesquisa de arquivos com base no nome de arquivo ou no contedo| Mac OS



Arquivos correspondentes

Texto correspondente em

Nota:


Este recurso est disponvel somente para Mac OS.

Use a Pesquisa dinmica para localizar arquivos com base nos nomes dos arquivos ou em texto presente nos arquivos. O site selecionado nopainel Arquivos usado para pesquisa. Se no houver nenhum site selecionado no painel, a opo de pesquisa no aparecer.

A Pesquisa dinmica usa a API do Spotlight em Mac OS. Qualquer personalizao que voc aplicar s preferncias do Spotlight tambm usadapara a Pesquisa dinmica. O Spotlight exibe todos os arquivos no seu computador que correspondem sua consulta de pesquisa. A Pesquisadinmica pesquisa arquivos na pasta raiz do site atualmente selecionado no painel Arquivos.

1. Selecione Editar > Pesquisa dinmica. Como alternativa, voc tambm pode usar CMD+SHIFT+F. O foco definido para a caixa de textoda Pesquisa dinmica no painel Arquivos.

2. Insira a palavra ou frase na caixa de texto. Os resultados so exibidos conforme o texto inserido na caixa de texto.

Exibe um mximo de 10 nomes de arquivos que correspondem a seus critrios de pesquisa. A mensagemMais de 10 resultados encontrados ser exibida se houver mais de 10 arquivos correspondentes. Refine seus critrios de pesquisa se noencontrar o arquivo desejado nas opes exibidas.

Exibe um mximo de 10 arquivos que contm o texto que corresponde palavra ou frase que voc inseriu.Para mais opes, clique em Localizar todos. Os resultados so exibidos no painel Pesquisa.

3. Quando voc move o cursor do mouse sobre um resultado de pesquisa, uma dica de ferramenta com o caminho relativo raiz do arquivo exibida. Pressione Enter ou clique no item para abrir o arquivo.

Para arquivos que contm texto correspondente, a primeira instncia do texto destacada. Use Cmd+G para navegar a outras instncias.para fechar o painel de resultados da Pesquisa dinmica, clique fora do painel ou pressione Escape/Esc

Inserir udio HTML5

Para o incio

Para o incio


O Dreamweaver permite inserir e visualizar udio HTML5 em pginas da Web. O elemento de udio HTML5 fornece um modo padro deincorporar o contedo de udio em pginas da Web.

Para obter mais informaes sobre o elemento de udio HTML5, consulte o artigo sobre udio HTML5 em W3schools.com.

Inserir udio HTML5Visualizar o udio no navegador

Inserir udio HTML5

1. Certifique-se de que seu cursor esteja no local em que voc deseja inserir o udio.

2. Selecione Inserir > Mdia > udio HTML5. O arquivo de udio inserido

dreamweaver reference

Documents