sábado, 4 de agosto de 2012

Trabalhando com layouts fluídos no Dreamweaver CS6

"Responsive" foi um termo muito utilizado durante o treinamento da Adobe, principalmente quando chegamos na parte do Dreamwaver CS6. Mas enfim, o quê significa o termo RESPONSIVE?

(https://go.hotmart.com/Q6713818Q)

Responsive Web Design é um termo utilizado para falar sobre intefaces de um site ou aplicação web que deve "entender" o dispositivo que está lhe acessando e dapatar-se de acordo com as suas caracteristicas tecnológicas. Baseado nesse novo conceito para construção de sites a Adobe implementou um recurso no Dreamweaver CS6, que permite trabalhar com layouts fluídos para site. Veja a figura abaixo...

Quando vamos criar um arquivo novo no Dreamweaver CS6, temos a opção de escolher "layout de grade fluída" e logo em seguida configuramos quantas colunas queremos para: celulares, tablets e computadores. Clico em criar e o programa me mostra um arquivo dividido em colunas, para organizar os elementos (texto, imagens, etc) na página. DETALHE devemos organizar os elementos para cada dispositivo (celular, tablet ou desktop).


A visualização padrão é a tela do celular, devido à nova filosofia “MOBILE FIRST” que a Adobe vem adotando. Para mudar a visualização usa-se o pequeno botão na barra superior, ou pode ser alterada, também, com os botões no rodapé na barra de status ao lado do campo zoom (100%).

Esse foi um ponto bastante relevante na versão CS6 do Dreamweaver. Veja alguns sites que já estão trabalhando com o conceito de RESPONSIVE WEB DESIGN. Para testar você deve restaurar a janela do navegador e diminuir a largura com o mouse. Vai observando como os elementos da página vão se ajustando conforme a largura vai diminuindo... É um recurso fantástico!!! Faça o teste nos sites abaixo...
http://bostonglobe.com/
http://www.designadaptavel.com.br/
http://www.colly.com/

5 comentários:

  1. Obrigado George, espero vê-lo mais vezes participando aqui no blog com os seus comentários. Obrigado!!!

    ResponderExcluir
  2. não ensinou como trabalhar com o layout de grade fluído, só mostrou o que é o layout de grade fluída. :(

    ResponderExcluir
  3. Fui aluno do Galdino e é um ótimo professor!
    O responsive design, é incrivel além da otimização de código, eu estou aventurando nesta area e é incrivel, segue o meu site que estou utilizando como cobaia para os meus estudos: http://tiagooliveira.web44.net/ , apesar que a responsividade do site ainda não é a ideal, porém ainda chego la.

    ResponderExcluir
  4. Parabéns pelo site Tiago, ficou bom Muito bom. Valew pela participação aqui no Blog.

    ResponderExcluir