CURSO DREAMWEAVER CS6 DO BSICO AO AVANADO

CURSO DREAMWEAVER CS6

Captulo 1 Introduo

Apresentao 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 importncia

CSS e CSS3, qual a diferena?

Dreamweaver CS6, fazendo download da verso de testes

o

Portugus ou Ingls?

Captulo 2 Criando arquivos

Como criar um novo arquivo

o

HTML

CSS

HTML5

Outros

Criando novo arquivo baseado em modelos

Fluid Grid Layout

Salvando arquivos

Abrindo arquivos
o

Abrindo arquivos atravs do Adobe Bridge

Captulo 3 Conhecendo o Dreamweaver (Interface)

A interface do Dreamweaver CS6 (ativar/desativar welcome screen)

Workspace
o

Os modos de visualizao/interface, Split e design

o

Criando workspace personalizado

Modo LIVE

Multiscreen Preview (visualizando site nos formatos desktop, mobile e tablete ao

mesmo tempo)

Preview in Browser
o

Adicionando novos browsers

Painis, como ativar/desativar, ocultar/mostrar e como mover para outro local

Painel Properties

CURSO DREAMWEAVER CS6 DO BSICO AO AVANADO

Painis HTML/CSS

Page properties

Entendendo o painel document completo

File management

W3C Validation

Check browser compatibility

Visual Aids

Entendendo o painel coding completo

o

Open document

Colapse full tag

Colapse selection

Expand all

Select parent tag

Line numbers

Word warp

Apply comment

Remove comment

Recente snippets

Move or convert CSS

Indent code

Outdent code

Format source code

rea de trabalho
o

A tela

Como geral os cdigos

Zoom

Tamanho

Hand

Tamanho do documento

Tempo para carregar o documento

Encoding da pgina

Keyboard shortcuts

Painel Standard
o

New

Open

Browse in Bridge

Save

Save

CURSO DREAMWEAVER CS6 DO BSICO AO AVANADO

Save All

Print code

Cut

Copy

Paste

Undo

Redo

Painel Style Rendering

Captulo 4 Preferncias

General

Accessibility

Code Coloring

File Type / Editors

Fonts

Invisible Elements

New Document

Preview in Browser

W3C Validator

Window Sizes

Captulo 5 Criando um projeto, definindo um site

Como definir um site (modo bsico) entendendo painel de gerenciamento

Como definir um site (modo avanado) entendendo detalhadamente

Dicas sobre recursos aps definir um site

Arquivos bloqueados para upload

Como adicionar texto no documento

o

Entendendo bem a estrutura de ttulos e textos

Listas ordenadas

Listas no-ordenadas

Criar linha horizontal

Como adicionar caracteres especiais

Encoding e erros de acentuao

Captulo 6 Importando, exportando e convertendo

Import > Tabular data

Import > Word document

Import > Excel document

CURSO DREAMWEAVER CS6 DO BSICO AO AVANADO

Export > Template Data as XML

Import > XML

Export > Table

Captulo 7 CSS

Class, ID e tag

CSS interno

CSS externo

CSS import

Entendendo medidas proporcionais: % e em

Formatando cabealhos

Formatando pargrafos

Formatando links

Formatando imagens

Formatando DIVs

CSS inspector / Code inspector

Opes vindas do boto direito

Apply Multiple Classes

Web Fonts Support

CSS3 Transitions

Como importar CSS ao criar um novo documento

Captulo 8 Trabalhando com imagens

Como inserir e trabalhar com imagens

Largura, altura, link e descrio

Como cortar a imagem atravs do Dreamweaver

Alterando brilho, contraste, resample e sharpen

Editando imagem no Fireworks a partir do Dreamweaver

Inserindo PSD diretamente no Dreamweaver

Captulo 9 Importando, exportando e convertendo

Explicando painel assets / como inserir um SWF

Como inserir vdeo / plugin

Inserindo contedo e formatando via CSS

Captulo 10 Links

Trabalhando com links

o

ncoras

CURSO DREAMWEAVER CS6 DO BSICO AO AVANADO

Links

Links de downloads

Exemplo de ncora

Personalizando links via CSS

Criando link de email (funo mailto) / criando links atravs de imagens

Mostrando como trazer o mapa do Google para um documento (via link e via iframe)

Criando um exemplo de cardpio com fotos e navegao com ncoras

Captulo 11 Templates

Templates

Definindo o site e as reas editveis (e no editveis)

Como criar um template

o

Criando documentos baseados em templates

o

Como criar uma rea editvel

Como alterar o template e atualizar os itens/pginas do site

Como aplicar um template em um documento no criado a partir de um template

Captulo 12 Tabelas

Tabelas

Como inserir/excluir linhas e colunas

o

Como mesclar e dividir clulas

Como colorir e inserir imagens de fundo em clulas

Como importar dados tabulares e como classificar dados em ordem crescente ou

decrescente

Captulo 13 DIVs, aperfeioando

Definindo wireframe

Flutuando o Menu

Diagramando o Menu

Inserindo cabealhos e pargrafos

Formatando contedo

Formatando rodap

Criando demais links

Checando a compatibilidade do site com os principais navegadores

Validador W3C

Captulo 14 Formulrios

Formulrios

CURSO DREAMWEAVER CS6 DO BSICO AO AVANADO

Textfield
o

CSS para textfield

Hidden field

Textarea
o

CSS para textarea

Checkbox / checkbox group

Radio button / radio group

List/Menu

Jump/Menu
o

Button
o

CSS para select (List e Jump Menu)

CSS para button

File upload
o

CSS para file field

Image field

Novos tipos de formulrios do HTML5

o

Search

Tel

URL

Email

Datetime

Date

Time

Month

Week

Datetime-local

Number

Min e max

Color

Captulo 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

CURSO DREAMWEAVER CS6 DO BSICO AO AVANADO

Spry Menu Bar

Spry Tabbed Panels

Spry Accordion

Spry Collapsible Panel

Spry Tooltip

Captulo 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

Captulo 17 Layout responsivo

Fluid Grid Layouts

o

Criando design/layout adaptvel a desktop, mobile e tablete

Captulo 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

CURSO DREAMWEAVER CS6 DO BSICO AO AVANADO

Captulo 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

Captulo 20 Accessibilidade

Acessibilidade (configurar as opes de itens que surgem ao inserirmos)

Como criar um Access Key e long description

Adicionar tabela com acessibilidade

Adicionar formulrio com acessibilidade

Captulo 21 Limpando o cdigo

Liveview / Live Code / Code Navigator / Inspect

o

Firebug do Firefox (Plugin)

Externalize JavaScript

Externalize JavaScript no obstrutivo

Clean UP HTML

Clean UP Word HTML

Find and Replace

Captulo 22 Checando erros e compatibilidade de navegadores

Browser compatibility / como configurar em quais browsers sero testados / como

checar erros
o

Como corrigir erros usando as dicas da prpria Adobe

Validando documentos

Link Checker

Site reports

Captulo 23 Snippets

Snippets

Como criar um Snippet

Captulo 24 FTP no Dreamweaver

CURSO DREAMWEAVER CS6 DO BSICO AO AVANADO

Alterando configurao do site para conexo via FTP

Publicando arquivos via Dreamweaver

o

Visualizando arquivos bloqueados/proibidos para upload

Sincronizando site

Salvando arquivo e publicando em seguida

Captulo 25 Incontext Editing

Falando sobre o Adobe InContext Editing

o

Fim do suporte a esta ferramenta

Captulo 26 CMS e melhorias no suporte ao PHP

Configurando um site para Wordpress

o

Configurar um site para Joomla

Configurar um site para Drupal

Code Hint > Especific Code Hints

PHP Hiting

Captulo 27 Itens Automticos

Adobe Browser Lab

Widget Browser
o

Player Youtube

Boto Curtir do Facebook

Flex Slider

Captulo 28 Projeto

Como criar um site responsivo (verso 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 ttulo #ltimo Trabalho

CURSO DREAMWEAVER CS6 DO BSICO AO AVANADO

Inserindo rodap

Rodap container

Texto

Formatao de texto

Entendendo media queries

Adaptando menu para Mobile

Adaptando corpo e rodap para Mobile

Finalizao e exerccio

Captulo 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