Descrição: Aprenda a trabalhar com o melhor software para construção de páginas HTML(5) e CSS. Curso totalmente prático e com a versão mais recente do Dreamweaver, abordando assuntos como construção de páginas em CSS, jQuery Mobile Pages, sites responsivos (que se adaptam a celulares e desktop), criação de aplicativos para celular e muito mais…
Após o curso
O aluno estará apto a construir sites profissionais totalmente dentro dos padrões web, sites para desktop, tablet e celulares.
Conteúdo do curso:
Capítulo 1 – Introdução
• Apresentação do curso
• O que é o Dreamweaver e o que podemos fazer com ele?
• Projeto, como organizar um site, pastas e etc
o Nomenclatura de arquivos
• HTML e HTML5
• CSS e sua importância
• CSS e CSS3, qual a diferença?
• Dreamweaver CS6, fazendo download da versão de testes
o Português ou Inglês?
Capítulo 2 – Criando arquivos
• Como criar um novo arquivo
o HTML
o CSS
o HTML5
o Outros
o Criando novo arquivo baseado em modelos
*Fluid Grid Layout
• Salvando arquivos
• Abrindo arquivos
o Abrindo arquivos através do Adobe Bridge
Capítulo 3 – Conhecendo o Dreamweaver (Interface)
• A interface do Dreamweaver CS6 (ativar/desativar welcome screen)
• Workspace
o Criando workspace personalizado
• Os modos de visualização/interface, Split e design
o Modo LIVE
• Multiscreen Preview (visualizando site nos formatos desktop, mobile e tablete ao mesmo tempo)
• Preview in Browser
o Adicionando novos browsers
• Painéis, como ativar/desativar, ocultar/mostrar e como mover para outro local
• Painel Properties
o Painéis HTML/CSS
• Page properties
• Entendendo o painel document completo
o File management
o W3C Validation
o Check browser compatibility
o Visual Aids
• Entendendo o painel coding completo
o Open document
o Colapse full tag
o Colapse selection
o Expand all
o Select parent tag
o Line numbers
o Word warp
o Apply comment
o Remove comment
o Recente snippets
o Move or convert CSS
o Indent code
o Outdent code
o Format source code
• Área de trabalho
o A tela
o Como geral os códigos
o Zoom
o Tamanho
o Hand
o Tamanho do documento
o Tempo para carregar o documento
o Encoding da página
• Keyboard shortcuts
• Painel Standard
o New
o Open
o Browse in Bridge
o Save
o Save
o Save All
o Print code
o Cut
o Copy
o Paste
o Undo
o Redo
• Painel Style Rendering
Capítulo 4 – Preferências
• General
• Accessibility
• Code Coloring
• File Type / Editors
• Fonts
• Invisible Elements
• New Document
• Preview in Browser
• W3C Validator
• Window Sizes
Capítulo 5 – Criando um projeto, definindo um site
• Como definir um site (modo básico) – entendendo painel de gerenciamento
• Como definir um site (modo avançado) – entendendo detalhadamente
• Dicas sobre recursos após definir um site
• Arquivos bloqueados para upload
• Como adicionar texto no documento
o Entendendo bem a estrutura de títulos e textos
• Listas ordenadas
• Listas não-ordenadas
• Criar linha horizontal
• Como adicionar caracteres especiais
• Encoding e erros de acentuação
Capítulo 6 – Importando, exportando e convertendo
• Import > Tabular data
• Import > Word document
• Import > Excel document
• Export > Template Data as XML
• Import > XML
• Export > Table
Capítulo 7 – CSS
• Class, ID e tag
• CSS interno
• CSS externo
• CSS import
• Entendendo medidas proporcionais: % e em
• Formatando cabeçalhos
• Formatando parágrafos
• Formatando links
• Formatando imagens
• Formatando DIVs
• CSS inspector / Code inspector
• Opções vindas do botão direito
• Apply Multiple Classes
• Web Fonts Support
• CSS3 Transitions
• Como importar CSS ao criar um novo documento
Capítulo 8 – Trabalhando com imagens
• Como inserir e trabalhar com imagens
• Largura, altura, link e descrição
• Como cortar a imagem através do Dreamweaver
• Alterando brilho, contraste, resample e sharpen
• Editando imagem no Fireworks a partir do Dreamweaver
• Inserindo PSD diretamente no Dreamweaver
Capítulo 9 – Importando, exportando e convertendo
• Explicando painel assets / como inserir um SWF
• Como inserir vídeo / plugin
• Inserindo conteúdo e formatando via CSS
Capítulo 10 – Links
• Trabalhando com links
o Âncoras
o Links
o Links de downloads
• Exemplo de âncora
• Personalizando links via CSS
• Criando link de email (função mailto) / criando links através de imagens
• Mostrando como trazer o mapa do Google para um documento (via link e via iframe)
• Criando um exemplo de cardápio com fotos e navegação com âncoras
Capítulo 11 – Templates
• Templates
• Definindo o site e as áreas editáveis (e não editáveis)
• Como criar um template
o Como criar uma área editável
• Criando documentos baseados em templates
o Como alterar o template e atualizar os itens/páginas do site
• Como aplicar um template em um documento não criado a partir de um template
Capítulo 12 – Tabelas
• Tabelas
• Como inserir/excluir linhas e colunas
o Como mesclar e dividir células
• Como colorir e inserir imagens de fundo em células
• Como importar dados tabulares e como classificar dados em ordem crescente ou decrescente
Capítulo 13 – DIVs, aperfeiçoando
• Definindo wireframe
• Flutuando o Menu
• Diagramando o Menu
• Inserindo cabeçalhos e parágrafos
• Formatando conteúdo
• Formatando rodapé
• Criando demais links
• Checando a compatibilidade do site com os principais navegadores
• Validador W3C
Capítulo 14 – Formulários
• Formulários
• Textfield
o CSS para textfield
• Hidden field
• Textarea
o CSS para textarea
• Checkbox / checkbox group
• Radio button / radio group
• List/Menu
• Jump/Menu
o CSS para select (List e Jump Menu)
• Button
o CSS para button
• File upload
o CSS para file field
• Image field
• Novos tipos de formulários do HTML5
o Search
o Tel
o URL
o Email
o Datetime
o Date
o Time
o Month
o Week
o Datetime-local
o Number
* Min e max
o Color
Capítulo 15 – Spry Framework
• Spry Validation Textfield
• Spry Validation Textarea
• Spry Validation Checkbox
• Spry Validation Select
• Spry Validation Password
• Spry Validation Confirm
• Spry Validation Radio Group
• Spry Menu Bar
• Spry Tabbed Panels
• Spry Accordion
• Spry Collapsible Panel
• Spry Tooltip
Capítulo 16 – jQuery Mobile
• jQuery Mobile Page
• jQuery Mobile List View
• jQuery Mobile Layout Grid
• jQuery Mobile Collapsible Block
• jQuery Mobile Text Input
• jQuery Mobile Password Input
• jQuery Mobile Textarea
• jQuery Mobile Select Menu
• jQuery Mobile Checkbox
• jQuery Mobile Radio Button
• jQuery Mobile Button
• jQuery Mobile Slider
• jQuery Mobile Flip Toogle Switch
• jQuery Mobile Swatches
• jQuery Mobile Swatches – criando um tema personalizado
• jQuery Mobile Swatches – importando um tema
Capítulo 17– Layout responsivo
• Fluid Grid Layouts
o Criando design/layout adaptável a desktop, mobile e tablete
Capítulo 18 – Behavios
• Comportamentos (Behaviors)
• Janela pop-up
• Check plugin
• Goto URL para redirecionamento
• Swap image
• Swap image restore
• Effects em images (fade/appear)
• Effects em images (grow)
• Validate form
Capítulo 19 – Dataset
• Spry Data Set
• Criar tabela para o dataset
• Importar HTML e gerar o dataset
• Personalizar o CSS do Dataset
• Spry Region
• Spry Repeat
• Spry Repeat List
Capítulo 20 – Accessibilidade
• Acessibilidade (configurar as opções de itens que surgem ao inserirmos)
• Como criar um Access Key e long description
• Adicionar tabela com acessibilidade
• Adicionar formulário com acessibilidade
Capítulo 21 – Limpando o código
• Liveview / Live Code / Code Navigator / Inspect
o Firebug do Firefox (Plugin)
• Externalize JavaScript
• Externalize JavaScript não obstrutivo
• Clean UP HTML
• Clean UP Word HTML
• Find and Replace
Capítulo 22 – Checando erros e compatibilidade de navegadores
• Browser compatibility / como configurar em quais browsers serão testados / como checar erros
o Como corrigir erros usando as dicas da própria Adobe
• Validando documentos
• Link Checker
• Site reports
Capítulo 23 – Snippets
• Snippets
• Como criar um Snippet
Capítulo 24 – FTP no Dreamweaver
• Alterando configuração do site para conexão via FTP
• Publicando arquivos via Dreamweaver
o Visualizando arquivos bloqueados/proibidos para upload
• Sincronizando site
• Salvando arquivo e publicando em seguida
Capítulo 25 – Incontext Editing
• Falando sobre o Adobe InContext Editing
o Fim do suporte a esta ferramenta
Capítulo 26 – CMS e melhorias no suporte ao PHP
• Configurando um site para WordPress
o Configurar um site para Joomla
o Configurar um site para Drupal
• Code Hint > Especific Code Hints
• PHP Hiting
Capítulo 27 – Itens Automáticos
• Adobe Browser Lab
• Widget Browser
o Player Youtube
o Botão Curtir do Facebook
o Flex Slider
Capítulo 28 – Projeto
• Como criar um site responsivo (versão desktop e mobile)
o Entendendo o que vamos criar
• Criando o menu
• Centralizando o menu e a logo
• Formatando menu
• Formatando web fonts
o Criando nosso web-kit-font
• Definindo a cor de fundo do documento
• Criando o corpo-container e o corpo
• Inserindo banner
• Inserindo textos
• Formatando textos
• Inserindo título #Último Trabalho
• Inserindo rodapé
• Rodapé container
• Texto
• Formatação de texto
• Entendendo media queries
• Adaptando menu para Mobile
• Adaptando corpo e rodapé para Mobile
• Finalização e exercício
Capítulo 29 – PhoneGAP (Criando aplicativos para iOS, Android e webOS)
• Instalando SDKs
• O que é PhoneGAP?
• Definindo um site e criando um projeto jQuery Mobile
• Visualizando projeto nos simuladores
• Gerando aplicativos para Android, BlackBerry e webOS