\n O Dreamweaver \u00e9 a m\u00e3e de todas as atividades baseadas na web na internet. Para a maioria das pessoas, o Dreamweaver \u00e9 apenas uma ferramenta para criar sites, mas apenas os profissionais sabem que o Dreamweaver \u00e9 a pot\u00eancia.\n<\/p>\n
\n O Dreamweaver possui muitos recursos e op\u00e7\u00f5es que o tornam a ferramenta favorita dos desenvolvedores da web. Sem d\u00favida, este software possui o IDE (Integrated Development Environment) mais conhecido que nenhum outro software de desenvolvimento web possui no mercado atual. Seja nas ferramentas de desenvolvimento, colabora\u00e7\u00e3o e codifica\u00e7\u00e3o, o Dreamweaver fornece uma gama decente para os desenvolvedores da Web brincarem. \u00c9 por isso que para os desenvolvedores web iniciantes, \u00e9 importante saber como eles podem maximizar o uso do Dreamweaver.\n<\/p>\n
\n Todos os aspectos que diferenciam os desenvolvedores da Web especializados e os desenvolvedores da Web comuns est\u00e3o ocultos sob camadas de menus intuitivos lament\u00e1veis, e \u00e9 por isso que os novos desenvolvedores da Web est\u00e3o achando dif\u00edcil melhorar suas habilidades. No entanto, neste artigo, mostrarei a voc\u00ea as fun\u00e7\u00f5es ocultas e poderosas do Dreamweaver que \u00e9 muito importante conhecer para atender \u00e0s demandas do mercado atual. Este artigo ajudar\u00e1 voc\u00ea a acessar essas fun\u00e7\u00f5es rapidamente e fornecer\u00e1 os dez principais hacks \u00fateis que melhorar\u00e3o a qualidade do seu trabalho e melhorar\u00e3o significativamente a sua codifica\u00e7\u00e3o.\n<\/p>\n
\n Todos sabem que o Dreamweaver oferece a visualiza\u00e7\u00e3o est\u00e1tica ou nossos arquivos abertos. No entanto, a quest\u00e3o permanece sem resposta nas visualiza\u00e7\u00f5es din\u00e2micas de um aplicativo como o WordPress. Para definir a exibi\u00e7\u00e3o din\u00e2mica, precisamos informar ao Dreamweaver sobre as configura\u00e7\u00f5es a serem usadas para as exibi\u00e7\u00f5es din\u00e2micas. Para definir isso, v\u00e1 para as configura\u00e7\u00f5es de solicita\u00e7\u00e3o HTTP clicando em exibir > Live View > menu de op\u00e7\u00f5es e, em seguida, digite o GET ou POST que \u00e9 necess\u00e1rio para visualizar seu aplicativo corretamente.\n<\/p>\n
\n Depois disso, troque a Visualiza\u00e7\u00e3o din\u00e2mica no Dreamweaver, que substituir\u00e1 o painel Visualiza\u00e7\u00e3o de design no WebKit renderizado ao vivo e com pixels perfeitos da sua p\u00e1gina. Em seguida, complete-o com o Javascript ativo, manipula\u00e7\u00f5es de DOM, consultas de banco de dados, c\u00f3digo do lado do servidor e CSS renderizado, em vez do \u00edcone de espa\u00e7o reservado da interface Design View.\n<\/p>\n
\n A navega\u00e7\u00e3o \u00e9 o componente de uma p\u00e1gina no site responsivo que deve ter a capacidade adaptativa para atender \u00e0s necessidades de telas menores para as quais o Bootstrap pode ajudar muito. O Bootstrap permite configurar facilmente sua barra de navega\u00e7\u00e3o e alternar da faixa horizontal para o painel vertical. A raz\u00e3o por tr\u00e1s disso \u00e9 que o Dreamweaver suporta toda a flexibilidade de navega\u00e7\u00e3o do Bootstrap e \u00e9 um recurso f\u00e1cil de usar quando se trata de desenvolver um site eficaz e responsivo.\n<\/p>\n
\n Para dar uma olhada r\u00e1pida, segue uma r\u00e1pida demonstra\u00e7\u00e3o de como usar o Bootstrap em seu desenvolvimento.\n<\/p>\n
\n Intensificar a navega\u00e7\u00e3o com o Bootstrap come\u00e7a com o novo di\u00e1logo de documento do Dreamweaver. Basta clicar no bot\u00e3o Bootstrap Framework na caixa de di\u00e1logo do novo documento e tamb\u00e9m marcar a caixa de sele\u00e7\u00e3o da op\u00e7\u00e3o de layout pr\u00e9-constru\u00eddo para usar as op\u00e7\u00f5es de navega\u00e7\u00e3o com todos os recursos, como;\n<\/p>\n
\n Se voc\u00ea achar dif\u00edcil, h\u00e1 outra op\u00e7\u00e3o. O Dreamweaver permite que voc\u00ea fa\u00e7a a barra de navega\u00e7\u00e3o personalizada. Se voc\u00ea preferir a paleta escura, basta adicionar a classe .navbar-inverse ao seu\n<\/p>\n
\n marca\u00e7\u00e3o. Voc\u00ea pode at\u00e9 brincar com ele tamb\u00e9m. Se voc\u00ea deseja mostrar sua navega\u00e7\u00e3o sempre acima da p\u00e1gina, digite .navbar-fixe-top. Se voc\u00ea quiser mostr\u00e1-lo abaixo, digite .navbar-fixed-bottom. Todas essas classes do Bootstrap s\u00e3o padr\u00e3o, e a dica de c\u00f3digo do Dreamweaver tamb\u00e9m oferece suporte a essa codifica\u00e7\u00e3o, portanto, voc\u00ea n\u00e3o precisa manter a codifica\u00e7\u00e3o inteira em mente. Voc\u00ea s\u00f3 precisa digitar .navbar na exibi\u00e7\u00e3o do elemento e obter\u00e1 a lista pop-up na qual poder\u00e1 escolher a op\u00e7\u00e3o desejada.\n<\/p>\n
\n O Ajax tem uma natureza muito din\u00e2mica. \u00c9 por isso que muitas vezes precisamos interagir com a p\u00e1gina com itens indispon\u00edveis ou n\u00e3o renderizados no carregamento da primeira p\u00e1gina. Esses itens podem ser injetados na p\u00e1gina ap\u00f3s algum tempo de carregamento, e \u00e9 por isso que n\u00e3o aparecem no primeiro carregamento. Por exemplo, quando voc\u00ea pode querer alterar o estilo da dica de ferramenta implementada inteiramente no JavaScript, voc\u00ea costumava pesquisar seu caminho metodicamente em seus scripts para descobrir qual item foi criado onde. Em vez de pesquisar os scripts, tente o seguinte.\n<\/p>\n
\n Coloque seu Dreamweaver no Live View e renderize sua p\u00e1gina. Em seguida, pressione F6 para congelar o JavaScript a qualquer momento, o que permitir\u00e1 dissecar e direcionar qualquer c\u00f3digo de qualquer item din\u00e2mico na p\u00e1gina. Isso n\u00e3o apenas ajudar\u00e1 voc\u00ea a direcionar o c\u00f3digo exato do item din\u00e2mico, mas tamb\u00e9m agilizar\u00e1 seu desenvolvimento, reduzindo o tempo de pesquisa de qualquer c\u00f3digo no site din\u00e2mico.\n<\/p>\n
\n Um script de codifica\u00e7\u00e3o pode ser muito confuso se voc\u00ea n\u00e3o estiver acostumado a ver c\u00f3digos complexos dia e noite. \u00c9 aqui que o destaque dos c\u00f3digos ajuda a criar separa\u00e7\u00f5es em todo o script. Em vez de mover os olhos com a ponta do sangramento, o Dreamweaver possui um recurso que destaca a codifica\u00e7\u00e3o que ajuda voc\u00ea a l\u00ea-lo. Para isso, abra as prefer\u00eancias do Dreamweaver e ative a se\u00e7\u00e3o de visualiza\u00e7\u00f5es de tecnologia. Em seguida, clique na op\u00e7\u00e3o de realce de c\u00f3digo e deixe o Dreamweaver fazer o seu trabalho. No entanto, pode ser necess\u00e1rio atualizar a vers\u00e3o do Dreamweaver porque esse recurso est\u00e1 dispon\u00edvel apenas na vers\u00e3o mais recente.\n<\/p>\n
\n Depois de habilitar a op\u00e7\u00e3o de destaque, basta clicar duas vezes em qualquer tag e destacar\u00e1 todas as inst\u00e2ncias da tag na p\u00e1gina atual. No entanto, os par\u00e2metros devem ser definidos. Essa ferramenta \u00e9 \u00f3tima para identificar e acessar rapidamente os elementos semelhantes. Depois de destacar qualquer elemento, use os atalhos de teclado f3 no PC, CMD-G no Mac) para pular de um elemento destacado para o pr\u00f3ximo elemento. Al\u00e9m disso, o modificador shift pode voltar para a se\u00e7\u00e3o anterior. Al\u00e9m disso, o realce de c\u00f3digo tamb\u00e9m funciona com os atributos e valores das tags HTML para que voc\u00ea possa identificar facilmente as classes espec\u00edficas.\n<\/p>\n
\n O Dreamweaver \u00e9 uma \u00f3tima plataforma onde c\u00f3digos HTML e CSS inteligentes e completos. Por\u00e9m, algumas pessoas acreditam que o JavaScript n\u00e3o est\u00e1 completo. No caso de jQuery ou Prototype, no Dreamweaver, voc\u00ea deve saber que existem extens\u00f5es de API que fornecem c\u00f3digos de conclus\u00e3o de Javascript. Esses c\u00f3digos aceleram o processo de desenvolvimento porque, ao us\u00e1-los, n\u00e3o h\u00e1 necessidade de digitar scripts inteiros e s\u00e3o bastante \u00fateis para codificadores r\u00e1pidos.\n<\/p>\n
\n O Dreamweaver \u00e9 o \u00fanico software de desenvolvimento web que permite usar esse tipo de c\u00f3digo de conclus\u00e3o jQuery e Prototype que ajuda todo desenvolvedor web a acelerar sua tarefa e produzir o melhor produto poss\u00edvel com o m\u00ednimo de esfor\u00e7o.\n<\/p>\n
\n CSS e JavaScript s\u00e3o nomes de arquivos independentes que voc\u00ea v\u00ea quando abre os arquivos HTML e PHP. Ao abrir o arquivo PHP, voc\u00ea pode v\u00ea-lo na parte superior da janela. Como todas essas op\u00e7\u00f5es s\u00e3o colocadas na frente, voc\u00ea pode alternar facilmente para esses arquivos e fazer altera\u00e7\u00f5es que podem ser salvas mesmo sem abri-los. Ao clicar em qualquer arquivo na barra de arquivos relacionados, voc\u00ea ver\u00e1 sua fonte na Visualiza\u00e7\u00e3o de c\u00f3digo e a p\u00e1gina principal na Visualiza\u00e7\u00e3o de design.\n<\/p>\n
\n Al\u00e9m disso, voc\u00ea tamb\u00e9m pode usar qualquer ferramenta de navegador de c\u00f3digo para acessar rapidamente o c\u00f3digo-fonte CSS que afetar\u00e1 sua solu\u00e7\u00e3o atual. Este acesso r\u00e1pido ao c\u00f3digo-fonte CSS reduz o tempo de codifica\u00e7\u00e3o e permite que o desenvolvedor web se concentre nos diferentes aspectos de seu processo de desenvolvimento.\n<\/p>\n
\n Linhas de c\u00f3digos desorganizadas e confusas mostram que o desenvolvedor dessa codifica\u00e7\u00e3o n\u00e3o era profissional e habilidoso o suficiente para escrever os c\u00f3digos em ordem. Isso tamb\u00e9m \u00e9 algo que conta muito durante a otimiza\u00e7\u00e3o do mecanismo de busca do site. No entanto, organizar seus c\u00f3digos e embelez\u00e1-los n\u00e3o \u00e9 t\u00e3o dif\u00edcil quanto as pessoas acreditam. Com o conhecimento correto das op\u00e7\u00f5es do Dreamweaver, voc\u00ea pode organizar seus c\u00f3digos na hora. Basta usar a op\u00e7\u00e3o “Aplicar formata\u00e7\u00e3o de origem” e reform\u00e1-la exatamente de acordo com suas prefer\u00eancias. Para tornar sua codifica\u00e7\u00e3o limpa e organizada, clique em “Formatar c\u00f3digo-fonte” na parte inferior da barra de ferramentas de codifica\u00e7\u00e3o e v\u00e1 para “editar > barras de ferramentas > codifica\u00e7\u00e3o” e, em seguida, selecione as “configura\u00e7\u00f5es de formato de c\u00f3digo” para definir sua configura\u00e7\u00e3o preferida.\n<\/p>\n
\n Outra maneira de organizar seu script \u00e9 acessar a op\u00e7\u00e3o de formata\u00e7\u00e3o em Comandos > Aplicar formata\u00e7\u00e3o de origem ou aplic\u00e1-la apenas em um bloco de codifica\u00e7\u00e3o selecionando a op\u00e7\u00e3o Aplicar formata\u00e7\u00e3o de origem \u00e0 sele\u00e7\u00e3o.\n<\/p>\n
\n N\u00e3o importa o quanto a Adobe equipar o Dreamweaver com ferramentas e recursos poderosos, quanto mais voc\u00ea trabalhar nos sites, mais trabalho ter\u00e1 que fazer no lado da codifica\u00e7\u00e3o. Isso pode aumentar suas habilidades, mas tamb\u00e9m abrir\u00e1 as portas para erros sem fim, porque escrever muitos c\u00f3digos n\u00e3o \u00e9 uma tarefa f\u00e1cil de fazer. O Dreamweaver sabe disso, e \u00e9 por isso que na vers\u00e3o mais recente do Dreamweaver, que \u00e9 a Creative Cloud (CC), existe um recurso chamado Linting support. Linting \u00e9 uma ferramenta b\u00e1sica de verifica\u00e7\u00e3o de sintaxe de programa\u00e7\u00e3o que est\u00e1 dispon\u00edvel para CSS, HTML e JavaScript. Com isso, sempre que o Dreamweaver identifica algum problema ou erro, ele envia uma s\u00e9rie de sinalizadores gerais e espec\u00edficos.\n<\/p>\n
\n Para executar o teste, abra uma p\u00e1gina cheia de c\u00f3digos no Dreamweaver e voc\u00ea ver\u00e1 uma pequena marca de sele\u00e7\u00e3o verde em um c\u00edrculo no lado direito da barra de status. Se houver apenas uma pequena marca de sele\u00e7\u00e3o verde em um c\u00edrculo, est\u00e1 tudo bem com o seu c\u00f3digo. Se houver uma marca de cruz vermelha circulada em vermelho, h\u00e1 alguns problemas com sua codifica\u00e7\u00e3o e voc\u00ea precisa revis\u00e1-la para executar seu site corretamente. Al\u00e9m disso, ao clicar na marca do erro, voc\u00ea pode ir para a coluna e linha onde cometeu o erro com a descri\u00e7\u00e3o do erro. A melhor coisa \u00e9 que n\u00e3o h\u00e1 limite para esse recurso e voc\u00ea pode us\u00e1-lo at\u00e9 n\u00e3o obter a marca verde.\n<\/p>\n
\n A capacidade de navega\u00e7\u00e3o \u00e9 uma das coisas mais b\u00e1sicas de todo processo de desenvolvimento web. \u00c9 por isso que o Dreamweaver facilitou para voc\u00ea, para que voc\u00ea nunca perca essas coisas b\u00e1sicas antes de iniciar seu desenvolvimento web. Abra o documento no Dreamweaver para o qual deseja verificar a compatibilidade. Na barra de menus onde est\u00e3o colocados os \u00edcones das op\u00e7\u00f5es de visualiza\u00e7\u00e3o de c\u00f3digo, divis\u00e3o e desenho, existe outra op\u00e7\u00e3o que se chama bot\u00e3o “Verificar p\u00e1gina”.\n<\/p>\n
\n Ao clicar, abrir\u00e1 um menu suspenso, selecione verificar a compatibilidade do navegador nele e veja o resultado de sua compatibilidade em uma janela separada.\n<\/p>\n
\n Ao codificar para o grande site, muitas vezes acontece que um peda\u00e7o de c\u00f3digo come\u00e7a a irrit\u00e1-lo na tela. Muito poucas pessoas sabem que podem minimizar esse peda\u00e7o de codifica\u00e7\u00e3o apenas pressionando um bot\u00e3o do teclado. Quando tiver certeza de que n\u00e3o h\u00e1 necessidade de fazer nenhuma altera\u00e7\u00e3o no bloco de codifica\u00e7\u00e3o, basta selecionar esse bloco e clicar em “-” ao lado do n\u00famero da linha de c\u00f3digo. Esse peda\u00e7o ser\u00e1 minimizado e n\u00e3o o incomodar\u00e1 at\u00e9 que voc\u00ea o expanda.\n<\/p>\n<\/p>\n