Vivemos em uma era altamente tecnol\u00f3gica. Todos buscam se manter conectados por meio dos mais diferentes tipos de dispositivos: tablets, desktops, smartphones, todos com diferentes tamanhos de tela e resolu\u00e7\u00f5es. Nesse contexto, a cria\u00e7\u00e3o de sites que se adaptem a esses diferentes tipos de dispositivos , ou seja sites com design responsivo, se tornou essencial<\/p>\n
O design responsivo \u00e9 a iniciativa de desenvolver p\u00e1ginas otimizadas para qualquer dispositivo m\u00f3vel baseadas em apenas um design, e o Dreamweaver \u00e9 a ferramenta certa para te ajudar nisso.<\/p>\n
Criar um site com design responsivo no Dreamweaver ficou ainda mais f\u00e1cil na vers\u00e3o CS6 do programa e n\u00f3s separamos aqui algumas dicas para voc\u00ea mandar bem. Confira!<\/p>\n
Ah, e se voc\u00ea quiser criar sites responsivos e potencializar seus conhecimentos em desenvolvimento de sites, conhe\u00e7a nossos cursos online de Front-End<\/a>.<\/p>\n O Dreamweaver CS6 conta com um recurso genial: o \u201clayout de grade fluida<\/strong>\u201d. Ele permite ao usu\u00e1rio criar, de forma simplificada, layouts que se adaptam a todos os dispositivos, com ferramentas de inser\u00e7\u00e3o e edi\u00e7\u00e3o de tags e div, CSS<\/a> e HTML<\/a>. O recurso facilita muito a vida de quem precisa economizar tempo ou n\u00e3o tem tanta intimidade com os complexos c\u00f3digos de programa\u00e7\u00e3o.<\/p>\n Com a op\u00e7\u00e3o \u201clayout de grade fluida\u201d, voc\u00ea pode escolher quantas colunas deseja para celulares, tablets e desktops. Isso determinar\u00e1 a porcentagem da tela que o layout ocupar\u00e1 e \u00e9 totalmente program\u00e1vel pelo usu\u00e1rio. Ao clicar em \u201ccriar\u201d, o programa te mostrar\u00e1 um arquivo dividido em colunas, no qual voc\u00ea poder\u00e1 organizar todos os elementos (imagens, textos, etc.) que deseja colocar em sua p\u00e1gina.<\/p>\n Essa forma de design usa larguras relativas para se adaptarem \u00e0s diferentes telas. Ent\u00e3o, n\u00e3o importa se voc\u00ea est\u00e1 visualizando o site num celular, tablet ou TV, o layout se adaptar\u00e1 \u00e0 resolu\u00e7\u00e3o do dispositivo.<\/p>\n Voc\u00ea dever\u00e1 organizar cada elemento separadamente para cada dispositivo. Isso \u00e9 muito importante, mas at\u00e9 ent\u00e3o era um trabalho demorado, meticuloso e at\u00e9 chato.<\/p>\n Com o Dreamweaver CS6, isso ficou muito mais f\u00e1cil. Isso porque o programa cria uma janela com o conte\u00fado da p\u00e1gina, em que cada elemento pode ser visualizado e dimensionado individualmente para cada dispositivo.<\/p>\n Mais uma dica: devido \u00e0 filosofia MOBILE FIRST<\/em> adotada pela Adobe, a visualiza\u00e7\u00e3o padr\u00e3o vai ser a da tela de celulares. Ent\u00e3o, para mudar a visualiza\u00e7\u00e3o para as outras p\u00e1ginas utilize os bot\u00f5es da barra superior ou na barra do rodap\u00e9.<\/p>\n Os navegadores de smartphones t\u00eam uma funcionalidade padr\u00e3o que transformam os sites em full-view<\/em>, o que impede que o usu\u00e1rio fa\u00e7a zoom nos layouts. Para anular essa configura\u00e7\u00e3o, utilize a tag meta viewpoirt. Ela definir\u00e1 o ponto de vista de sua p\u00e1gina em todos os dispositivos numa rela\u00e7\u00e3o 1×1 e acionar\u00e1 a funcionalidade.<\/p>\n Essas propriedades s\u00e3o utilizadas para controlar o tamanho dos elementos. A primeira, max-width<\/em>,<\/em> controla o tamanho m\u00e1ximo do elemento e evitar que ele se estenda para fora do container<\/em>. J\u00e1 a min-width<\/em> \u00e9 usada para a fun\u00e7\u00e3o oposta, ou seja, definir o tamanho m\u00ednimo de um elemento, prevenindo que ele seja menor que o valor esperado.<\/p>\n Com a tag \u201cmax-width:100%\u201d, voc\u00ea pode fazer com que o navegador escolha automaticamente o tamanho da imagem ou m\u00eddia e a adapte para os diferentes tipos de dispositivos. Desde que a imagem esteja em boa qualidade e tenha o tamanho correto, o CSS adaptar\u00e1 automaticamente as m\u00eddias.<\/p>\n Vale lembrar, por\u00e9m, que a propriedade max-width n\u00e3o \u00e9 compat\u00edvel com o IE8 ou inferiores. \u00c9 por isso que \u00e9 necess\u00e1rio utilizar a propriedade max-width:100%.<\/p>\nO que h\u00e1 de novo para criar um site com design responsivo no Dreamweaver?<\/h2>\n
1. Colunas<\/h3>\n
2. Organiza\u00e7\u00e3o de conte\u00fado<\/h3>\n
3. Viewport<\/h3>\n
4. Max-width e min-width<\/h3>\n
5. M\u00eddias flex\u00edveis<\/h3>\n