Design Responsivo/Adaptativo com Dreamweaver

Design responsivo é empregabilidade, e não é opcional.

Design Responsivo/Adaptativo com Dreamweaver
Design Responsivo/Adaptativo com Dreamweaver

Criar condições ao Web Designer criar e desenvolver Sites que possam ser visualizados e navegados com grande aproveitamento de recursos de cada tipo de dispositivo de acesso à Internet:

  • Navegadores em computadores
  • Navegação em Tablets
  • Navegação em Smartphones


A qualidade do projeto no Web Design Responsivo/Adaptativo está em se criar uma só vez, já se prevendo as diversas possíveis visualizações, sem perda de informação, e trazendo a informação com qualidade de cada "device".

Os profissionais de Web design que conhecem e dominam essa tecnologia e metodologia estão sendo muito procurados!


É necessidade! Websites não responsivos são sistematicamente desprezados pelos usuários e robôs dos Serach Engines, como Google e Bing.


Adobe Dreamweaver

Adobe Dreamweaver

Teoria e prática integradas

Investimento: Sob Consulta

Entre em Contato

São Paulo: (11) 3816-3000
Curitiba: (41) 3287-3000
Brasilia: (61) 3224-3000
Rio de Janeiro: (21) 2543-8704
Espírito Santo: (27) 9 9949-2901

ESCOLHA ONLINE AO VIVO, OU PRESENCIAL.

PARA PRESENCIAL: SELECIONE A UNIDADE ONDE PRETENDE REALIZAR O CURSO

Design Responsivo/Adaptativo com Dreamweaver

Conteúdo programático

Módulo I
Introdução ao Design Responsivo
O design para a flexibilidade:
Múltiplas telas
“Controle” do pixel
“Controle” com CSS
Opções do usuário: tamanho da fonte e zoom da tela
Unidades relativas
Exemplos de tamanho de fonte com em e %
Layout estruturado com CSS:
Posicionamento com propriedade float

Módulo II
Posicionamento com propriedade position
Exemplos de caixas posicionadas com em
Grids
Importância dos Grids
O que são e para que servem:
Exemplos (http://delicious.com/analaura/grids)
Grids:
Exemplos de grid fixo com px
Exemplos de grid fluido com em e %
Estrutura para grids com HTML5, e seus ganhos:

Módulo III
article, aside, footer, header, hgroup, nav, section
details, summary, mark
Imagens no Design Adaptativo/Responsivo
Elementos para conteúdo incorporado com HTML5:
figure, figcaption
embed, object, video, canvas
Imagens flexíveis
Imagens transparentes
Ajustes para IE6
Propriedades para imagens com CSS3

Módulo IV
Media queries
O que são
Adobe Dreamweaver CC
Exemplos de como utilizar:
Alterando apenas texto
Alterando texto e imagem
Alterando layout completo
Compatibilidade entre navegadores
Outras soluções/frameworks para mobile devices

Módulo V
Dicas sobre desenho para mobilidade (http://bit.ly/rZomMn)
jQueryMobile
Fireworks CSS3 mobile pack
Dreamweaver CC jQuery mobile framework
Exercícios de criação de Design Responsivo/Adaptativo
Modelagem
Criação de arquivos externos de CSS e CSS3
Técnicas de migração ao Design Responsivo/Adaptativo
Aplicações e particularizações no Dreamweaver CC

DIFERENCIAIS ENG DTP & Multimídia

  • Os cursos da ENG são sempre com um participante por computador/device
  • Cursos apostilados
  • Certificado Oficial de Conclusão bilíngue
    (Inglês / Português)
  • Projeto-Piloto assistido
  • Prova de Proficiência
  • Para quem atinge 70% ou mais na Prova de Proficiência, emitimos adicionalmente, um Atestado de Proficiência.

Artigos Relacionados

QUER SABER MAIS SOBRE A TECNOLOGIA E PROMOÇÕES?

Faça contato conosco, e receba mais informações:

ENG DTP & Multimídia - Logo

 

 

ENVIE SEU CONTATO e SEUS COMENTÁRIOS


LinkedIn da ENG DTP Multimídia      Facebook da ENG DTP Multimídia     Instagram da ENG DTP Multimídia

 Jornad Graphic Design