INFORMARICA - Web Design e Formatacao de Imagem

INFORMTICA
Web Design e Formatao de Imagem

VOLUME 02
Governador | Eduardo Campos
Vice-Governador | Joo Soares Lyra Neto
Secretrio de Educao | Anderson Stevens Lenidas Gomes
Secretrio Executivo de Educao Profissional | Paulo Dutra
Gerente Geral da Educao Profissional | Luciane Pula
Gestor de Educao a Distncia | Marcos Paulo de Assis Castro
Coordenador do Curso | Almir Pires
Professor Conteudista | Carlos Jos
Equipe Central de Educao a Distncia

Andre Fellipe Pinto | Andria Guerra | Augusto Andrade | Eber Gomes |
George Bento | Jannine Moreno | Maria de Lourdes Cordeiro Marques | Maria
Helena Cavalcanti | Mauro de Pinho Vieira | Pedro Luna
Imagem da capa: http://www.imagemativa.com.br/

SUMRIO
1. Aprendendo a utilizar o Adobe Flash CS5 para criao de
interatividade via Actionscript para web. ................................................ 6
2. Aprendendo a utilizar o Adobe Dreamweaver CS5 para criao de
sites para web parte I. .............................................................................. 25
3. Aprendendo a utilizar o Adobe Dreamweaver CS5 para criao de
sites para web parte II. ............................................................................. 53
REFERENCIAS BIBLIOGRAFICAS ......................................................... 70
Informtica | Web Design e Formatao de Imagem | Volume 02 5

1. Aprendendo a utilizar o Adobe Flash CS5 para criao de
interatividade via Actionscript para web.
Na semana 3 estudamos a parte bsica do Adobe Flash at a criao de

animaes com Motion Tween, este recurso s pode ser aplicado em um
symbol e este por sua vez possui trs behaviors: Graphic, Button e Movie
Clip.
Utilizamos apenas o behavior Graphic, para dar continuidade iremos utilizar

os outros dois behaviors, pois estes tm tudo haver com interatividade, desta
forma finalizaremos o entendimento que comeamos na semana anterior de
quando, onde e porque utilizar tempo, interatividade e movimento.
Interatividade tem haver com a participao direta do usurio atravs de uma

ao! Ao esta que poder ser atravs de um clique de boto, arrastar e
soltar, movimento do mouse, o pressionar de teclas e o que voc imaginar ser
possvel ser feito. Para conseguir chegar nestes resultados, precisamos
programar, ou seja, utilizar ActionScript, procurei fazer alguns exemplos de
fcil entendimento e outros de nvel intermedirio.
Como sei que vocs ainda no estudaram lgica de programao, gostaria a

aqui de estimular o estudo dessa disciplina com muita responsabilidade e
vontade de aprender, pois far de vocs Web Designers que possuem um
diferencial no mercado de trabalho.
6 Informtica | Web Design e Formatao de Imagem | Volume 02

Symbol: Button
O button na verdade um Movie Clip interativo com quatro estados, o
Button possuem uma timeline interna que reage ao movimento do ponteiro do
mouse e s aes saltando para o quadro apropriado.
Cada frame da timeline do smbolo boto tem uma funo especfica:
O primeiro frame o estado Up (para cima), representando o boto
sempre que o ponteiro no estiver sobre o boto.
O segundo quadro o estado Over (sobre), representando a
aparncia do boto quando o ponteiro do mouse estiver sobre o
boto.
O terceiro quadro o estado Down (para baixo), representando a
aparncia do boto quando clicado.
O quarto quadro o estado Hit (ativo), definindo a rea que responde
ao clique do mouse. Essa rea invisvel no arquivo SWF.
Criando Botes
Para criao dos botes, ser necessrio que voc faa o desenho dos
botes utilizando as ferramentas de desenhos que j aprendemos na semana
3.
Selecione todo o desenho que representa o boto play, escolha a opo de
menu > Modify > Convert to Symbol, no type:Button com ponto de registro ao
centro como mostra a figura 1. Repita esta mesma operao para o desenho
que representa o boto stop.
Com a ferramenta Selction Tool (v), clique para selecionar o boto play. No
painel PROPERTIES, clique na caixinha onde aparece escrito <Instance

Name> escreva: play_btn, faa a mesma coisa com boto stop como mostra
as figuras 2 e 3.
Fonte: imagem produzida pelo autor.
Fique de olho
Qual a importncia de um Instance Name?
Sem o Instance Name impossvel de ser executado a programao criada
via ActionScript para o boto.
Observao: o Instance Name no tem relao com o nome do smbolo.

Importante: toda vez que voc criar um boto, deve inserir um Instance Name
para ele.
Fim do boxe
Agora vamos editar a Timeline do boto 'play_btn', para isso d um duplo

clique no smbolo para ter acesso.
Vamos comear a editar a timeline de traz para frente.
1- Clique no frame Hit e crie um keyframe pressionando a tecla de atalho [F6],
assim definimos a rea do boto.
2 - Clique no frame Over e crie um keyframe pressionando a tecla de atalho
[F6], mude a cor do tringulo para amarelo.
2 - Clique no frame Down e crie um keyframe pressionando a tecla de atalho
[F6], depois Menu > Modify > Transform > Scale and Rotate..., configure o
valor Scale para 90, assim quando o boto for pressionado diminuir de
tamanho.
Clique na seta azul que est antes da Scene 1 para voltar a timeline principal,
ao voltar a timeline principal, modifique no nome da layer 1 para botes e em
seguida edite o boto 'stop_btn' da mesma forma como acabamos de fazer
com o boto 'play_btn'.

Fique de olho
O symbol possui trs tipos de comportamento (Behavior) e cada um
deles possui uma Timeline interna que independente da Timeline
principal onde o symbol esta inserido.
Fim do boxe

Criando ActionScript para os botes
Antes de explicar ou at mesmo criar a programao para os botes,
necessrio que tenhamos uma animao no stage para que possamos
control-la.
Crie uma nova layer e modifique o nome para animao. Na layer animao,
crie uma animao qualquer utilizando a tcnica que voc j aprendeu na
semana 3. O objeto ao qual voc vai fazer a animao importante que seja
um Movie Clip.
Fique de olho
Importante: a quantidade de frames da layer boto deve ser a mesma
da layer animao.
Fim do boxe
Crie uma nova layer e modifique o nome para aes. A layer aes deve ser
a primeira layer acima de todas. Para ordene as layer, clique na layer aes e
arraste-a para cima de modo que seja a primeira layer. Agora sim posso
explicar e criar a programao via ActionScript para controlar a animao que
esta sendo executada na Scene 1 (cena 1).

Clique na layer aes e na opo de menu > Window > Action [F9], abrir o
painel onde deve ser escrito toda a parte de programa via ActionScript.
Escreve a action que segue abaixo:
lay_btn.onPress = function(){
play();
}
stop_btn.onPress = function(){
stop();
}
Para fechar o painel Action, basta pressionar a tecla [F9]. Salve o arquivo e
para testar a animao proceda assim: Menu > Control > Test Movie > In
Flash Professional ou utilize a combinao de teclas [CTRL]+[ENTER].
Fique de olho
Importante: quando adicionamos uma action em um keyframe na timeline, o
keyframe fica com uma letra (a).
Fim do boxe

Abaixo vou explicar o action qua foi escrito, para que voc tenha um
conhecimento completo do que fizemos.
Linha 1: play_btn o Instance Name do objeto Button, onPress a ao de

pressionar o boto do mouse. Observe que entre o Instance Name e o evento
onPress, exite um (.) que faz a ligao entre o boto play_btn e o evento. A
instruo function() diz respeito a um conjunto de aes que sero
executadas quando o boto for pressionado. Existe ainda a chave ( { ) que
inicia o bloco de aes.
Linha 2: temos apenas uma nica ao o play(); que executa a animao que
foi criada na timeline. Toda ao escrita deve terminar com o (;).
Linha 3: fechamos o bloco de aes que ser executado quando o boto
play_btn for pressionado.
Linha 4: stop_btn o Instance Name do objeto Button, onPress a ao de
pressionar o boto do mouse. Observe que entre o Instance Name e o evento
onPress, exite um (.) que faz a ligao entre o boto stop_btn e o evento. A
instruo function() diz respeito a um conjunto de aes que sero
executadas quando o boto for pressionado. Existe ainda a chave ( { ) que
inicia o bloco de aes.
Linha 5: temos apenas uma nica ao o stop(); que para a animao que foi
criada na timeline. Toda ao escrita deve terminar com o (;).
Linha 6: fechamos o bloco de aes que ser executado quando o boto
stop_btn for pressionado.

Saiba mais
Para aprender mais assista ao vdeo 13 Bibliotecas Compartilhadas de
botes, publicado no ambiente.
Pratique a criao de botes com o tutorial 14 Criando interatividade entre
cenas com botes via ActionScript, publicado no ambiente.
Fim do boxe
ActionScript
ActionScript a linguagem de programao do Adobe Flash , que habilita
voc a criar sites altamente interativos, baseados em multimdia e muito mais.
Elementos Actionscript
ActionScript contm vrios elementos diferentes, como palavras, pontuao e
estrutura, todos estes devem ser empregados de forma apropriada para fazer
com que o projeto em Adobe Flash se comporte da forma desejada e
esperada.

Eventos
Os eventos so disparados a partir do pressionamento da tecla do mouse, ao
arrastar e soltar um objeto, atravs do teclado e atravs do microfone.
Aes
So as responsveis por executar as aes determinadas por voc.
Chaves
De uma forma geral formam um bloco de cdigo que o que estiver dentro das
chaves, significa que ser executada.
Ponto-e-vrgula
Determina o final de cada action que esta entre as chaves.
Ponto
O ponto faz uma ligao direta do evento ou propriedade de um objeto.
Parnteses
Em geral vo aparecer de duas formas: stop(); vazios e gotoAndPlay(5); com
uma informao.
Symbol: Movie Clip

O Movie Clip o objeto mais poderoso do Adobe Flash, deixamos ele por
ltimo para que pudssemos ter uma compreenso a cerca dos botes e
principalmente ter uma noo inicial sobre ActionScript. O poder do Movie

Clip vem da quantidade de propriedades, mtodos e eventos disponveis no
ActionScript para controlar a posio, dimensionamento, a rotao,
transparncia, cor e etc.
Fique de olho
O Movie Clip possui uma Timeline interna que independente da Timeline
principal, isso muito importante para criar animaes complexas.
Importante: assim como o Button, toda vez que voc criar um Movie Clip,
voc deve inserir um Instance Name para ele.
Fim do boxe
Para exemplificar o comportamento de um Movie Clip, abra o exemplo que

fizemos na seo 4.1.2 Criando ActionScript para os botes. Lembra que eu
pedi para que o objeto alvo da animao fosse um Movie Clip! Pois , vou
precisar dele agora, no meu caso o meu Movie Clip um quadrado.
Como j enfatizamos vrias vezes que um symbol tem uma timeline interna
independente da timeline principal, d um duplo clique no Movie Clip para ter
acesso a timeline. Observe que a timeline do Movie Clip tem apenas um
keyframe, faa uma animao frame to frame conforme aprendemos na
semana 3 seo 3.4.1 Animao Frame to Frame, utilize 5 (cinco)
keyframes para cada um mude a cor de preenchimento.
Volte para a Scene 1 salve o arquivo e para testar a animao proceda assim:
Menu > Control > Test Movie > In Flash Professional ou utilize a combinao
de teclas [CTRL]+[ENTER].

Fique de olho
Quando voc apertou o boto stop_btn a animao da timeline principal
parou, mais a animao da timeline do Movie Clip no parou! Provamos a
independncia que o Movie Clip tem em relao timeline principal.
Fim do boxe
Clique no primeiro keyframe da layer aes e pressione a tecla de funo [F9]

para abrir o painel Action. Modifique o cdigo existente como mostra abaixo:
play_btn.onPress = function(){
play();
quadrado_mc.play();
}
stop_btn.onPress = function(){
stop();
quadrado_mc.stop();
}


Agora sim informamos que queremos para/executar a animao que esta na
timeline do Movie Clip com Instance Name: quadrado_mc, sempre ser desta
forma utilizando ActionScript 2.0.
Trabalhando com Som

Duas so as possibilidade de utilizao de som no Adobe Flash: sons de
eventos e som de fluxo. A reproduo de um som pode ser continuo
independente da timeline ou de forma sincronizada com uma animao do
tipo trilha sonora.
O Adobe Flash traz uma srie de sons para serem utilizados, os sons esto
armazenados na biblioteca comum (Common Libraries), para ter acesso
proceda assim: Menu > Window > Common Libraries > Sounds.
Segue uma lista dos formatos de som suportados pelo Adobe Flash:
ASND (Windows ou Macintosh) Este o formato de som nativo do
Adobe Soundbooth.
WAV (somente Windows)
AIFF (somente Macintosh)
mp3 (Windows ou Macintosh)
Se voc tiver o QuickTime 4 ou superior instalado no sistema, poder
importar estes formatos adicionais de arquivo de som:
o AIFF (Windows ou Macintosh)
o Sound Designer II (somente Macintosh)
o Sound Only QuickTime Movies (Windows ou Macintosh)
o Sun AU (Windows ou Macintosh)
o Sons do System 7 (somente Macintosh)
o WAV (Windows ou Macintosh)

Fique de olho
O formato ASND um formato de arquivo de udio no-destrutivo, nativo do
Adobe Soundbooth. Os arquivos ASND podem conter dados de udio com
efeitos que podem ser modificados posteriormente, sesses com vrias faixas
Soundbooth e instantneos que permitem reverter para o estado anterior do
arquivo ASND.
Muito cuidado na utilizao de arquivo de som, pois estes podem se tornar

um grande vilo, deixando os arquivos finais muito grandes.
Por padro o Adobe Flash otimiza os sons em Mp3, use de preferncia
arquivos pequenos que possam ser utilizados em loop.
Fim do boxe
Saiba mais
Pratique a utilizao de som com o tutorial 15 Trabalhando com som de
evento e som de fluxo, publicado no ambiente.
Fim do boxe
Code Snippets
Este recurso totalmente excelente, uma novidade no Adobe Flash CS5.
Simplesmente possibilita que voc sem saber muito ou quase nada de
ActionScript 3.0 possa usar trechos (snippets) de cdigos prontos para sites,
ou em interfaces multimdias.
Com isso a Adobe conseguiu reduzir a curva de aprendizado para o
ActionScript 3.0, deixei este assunto por ltimo de propsito, pois estes

trechos de cdigos s podem ser aplicados em keyframes e no poderoso
Movie Clip.
O Code Snippets esta dividido em:

Action
Timeline navigation
Animation
Load and unload
Event handle
O Code Snippets pode ser acessado de duas formas:

Menu > Window > Code Snippets
No painel Action, clique no boto Code Snippets

Saiba mais
Para aprender mais assista aos vdeos 14 Code Snippets na prtica e 15
Criando interatividade com Code Snippets, publicado no ambiente.
Fim do boxe
Como este recurso foi lanado h pouco tempo, achei melhor produzir dois
vdeos para que o aprendizado fosse melhor ao invs de escrever 100 linhas
para explicar este poderoso recurso.
Saiba mais
Vou dar uma dica importante para que voc possa us-la no futuro. Quando
estiver estudando lgica de programao e j estiver entendendo, visite os
links abaixo para aprender tudo sobre ActionScript nas verses 2 e 3.
ActionScript 2.0: http://migre.me/1Ot90

ActionScript 3.0: http://migre.me/1Ot5E
Assista a vdeos de altssima qualidade e aprenda com os melhores
designers e programadores da Adobe em http://tv.adobe.com/
Como j havia mencionado antes, aprender ActionScript far de voc um
Web Designer que possuem um diferencial no mercado de trabalho.
Fim do boxe
Resumo
Aprendemos muitas coisas importantes que vo nos ajudar nesta caminhada
como profissional de Web Designer, tais como:
Finalmente fechamos o ciclo de aprendizado sobre quando como e
onde aplicar tempo, interatividade e movimento;
Aprendemos a criar interatividade atravs de botes e cenas;
Aprendemos a colocar som de evento e som de fluxo misturando
botes, cenas e movie clip;
Aprendemos o poderoso Movie Clip e com isso criar animaes
complexas;
Tivemos uma introduo ao estudo do ActionScript 2.0 e 3.0 atravs
fantstico recurso Code Snipptes.
Mais isso s o comeo, pois na sequncia iremos aprender a utilizar o
Adobe Dreamweaver CS5 para criao de sites para web parte I.

2. Aprendendo a utilizar o Adobe Dreamweaver CS5 para
criao de sites para web parte I.
O Adobe Dreamweaver um editor profissional de HTML, que projeta e

gerencia sites e aplicativos para a Internet. A atual verso, trs inmeras
novidades e novos recursos para facilitar o uso e gerar uma maior
produtividade em seus trabalhos. A tecnologia Roundtrip HTML do
Dreamweaver importa documentos HTML criados em outros aplicativos ou
at mesmo feito por um desenvolvedor, sem alterar ou adicionar cdigo extra.
Os recursos de edio visual do Adobe Dreamweaver so do tipo
WYSIWYG(What You See Is What You Get - O que voc v o que voc
adquire). Permitindo adicionar rapidamente imagens, textos e funcionalidades
aos seus documentos HTML.
Adobe Dreamweaver para Web Designers

Com o Adobe Dreamweaver possvel criar websites dentro dos padres
estabelecidos pela W3C (World Wide Web Consortium www.w3c.org)
garantindo assim uma padronizao.
Uma nova nomenclatura comea a existir: Front-End. um Web Design que
tambm sabe programar em: HTML, CSS, Java Script e jQuery. Aminha
inteno prepar-los para esse novo universo, vamos aprender HTML, CSS
e Spry ( semelhante ao jQuery com funcionalidades de navegao), s que
com uma diferena, no vamos utilizar o modo visual do Adobe Dreamweaver
e sim aprender a codificar no modo code para que voc possa aprender as
linguagens e ser competitivo no mercado de trabalho.

Saiba mais
Para aprender mais visite o site da Adobe Dreamweaver para projetos de
webdesign, na url: http://www.adobe.com/br/products/dreamweaver/design/
Para aprender mais visite o site da Adobe Novidades do Dreamweaver
CS5, na url: http://www.adobe.com/br/products/dreamweaver/whatsnew/
Fim do boxe
Requisitos de sistema para Windows

Processador Intel Pentium 4 ou AMD Athlon 64
Microsoft Windows XP com Service Pack 3; Windows Vista Home
Premium, Business, Ultimate ou Enterprise com Service Pack 1 ou Windows 7
1 GB de RAM
3,5 GB de espao livre em disco para a instalao; ser necessrio espao
adicional livre durante a instalao (no possvel instalar em dispositivos de
armazenamento removveis com base em memria flash)
Resoluo de vdeo 1.024 x 768 (recomenda-se 1.280 x 800) com placa de
vdeo de 16 bits
Unidade de DVD-ROM
Software QuickTime 7.6.2 necessrio para recursos multimdia
necessria conexo de banda larga com a Internet para servios on-line.
Fonte: http://www.adobe.com/br/products/flash/systemreqs/

Fique de olho
Se voc no possui uma verso do Adobe Dreamweaver CS5, possvel
baixar uma verso Trial para testar por trinta (30) dias, e assim poder realizar
as atividades das aulas. Na url abaixo, mediante preenchimento de um
cadastro simples, para nossa disciplina voc deve marcar a opo do pacote
Creative Suite Web Premium.
https://www.adobe.com/cfusion/mmform/index.cfm?name=product_notify&loc
=pt_br
Fim do boxe
rea de trabalho do Adobe Dreamweaver

Toda vez que voc inicializar o Adobe Dreamweaver, ser apresentado tela
de boas vindas (welcome screen), sempre iremos escolher para criar arquivos
utilizando a opo Create New > HTML e quando avanarmos nos estudos a
opo Create New > CSS.

Fonte: captura de tela do Adobe Dreamweaver CS5 feita pelo autor.
rea de trabalho padro do Adobe Dreamweaver:

Por padro eu irei utilizar o workspace CODER PLUS com o painel Properties
ao invs do workspace DESIGNER, podemos observar a similaridade com as
interfaces do Adobe Flash e do Adobe Photoshop.
1. Barra de Menus Todas as opes de menu.

2. Workspace A rea de trabalho (workspace) totalmente configurvel e j
vem com algumas predefinies, possibilita ainda que o usurio crie o seu
prprio workspace.

3. Barra de ferramentas de documento traz as principais opes de
configurao de visualizao da janela documento (como as visualizaes
Design e Cdigo), e opes para a visualizao do documento em um
navegador.
4. Janela do documento esta a nossa principal rea para criao dos
documentos.
5. Grupos de painis para o workspace CODER PLUS, ser exibido os
painis necessrios para o desenvolvimento dos documentos.
6. Painel arquivos Permite gerenciar arquivos e pastas, do projeto
selecionado.
7. Seletor de TAGs Localizado na barra de status, na parte inferior da
janela documento, mostra a hierarquia de tags do documento HTML.
8. Inspetor de propriedades (Properties) Permite visualizar e alterar diversas
propriedades das TAGs do HTML selecionado no Seletor de TAGs.

Configurando as preferncias do Adobe Dreamweaver:

Os documentos HTML que vamos produzir deve seguir os padres
estabelecidos pela W3C como j mencionei. Precisamos configurar as
preferncias do Adobe Dreamweaver para que toda vez que criarmos um
novo documento HTML, este seja do tipo XHTML conforme est descrito na
seo 5.3.2 Especificaes.
1 - Na opo de Menu > Edit > Preferences...

2 - Category > Validator

3 - Nas opes de validao do DOCTYPE, desmarque todas e deixe apenas
marcado a opo XHTML 1.0 Transitional.
Estaremos explicando mais sobre o DOCTYPE na seo 5.3.4.1 Tag de
definio DOCTYPE.
Fique de olho
A configurao do DOCTYPE no Adobe Dreamweaver, se faz necessrio
apenas uma nica vez.
Fim do boxe

Saiba mais
Para aprender mais assista ao vdeo 16 rea de trabalho do Adobe
Dreamweaver, publicado no ambiente.
Fim do boxe
Entendendo o HTML e afins!

Antes de continuar os estudos sobre o Adobe Dreamweaver, gostaria que
voc pudesse entender o que e para que serve o HTML bem como sua
estrutura, WWW, URL, protocolos e por fim o DNS. O entendimento destes
assuntos faz-se necessrio para o profissional de internet, na primeira
semana eu apresentei para voc o ambiente de trabalho. Este entendimento
vai facilitar muito a sua vida na hora de desenvolver websites utilizando o
Adobe Dreamweaver como ferramenta de desenvolvimento HTML.
HTML (acrnimo para a expresso inglesa HyperText Markup Language, que
significa Linguagem de Marcao de Hipertexto) uma linguagem de
marcao utilizada para produzir documentos na Web. Documentos HTML
so interpretados pelo Browser (navegador). A primeira publicao foi
esboada por Berners-Lee e Dan Connolly, e publicada em 1993 e desde
1996, as especificaes HTML vm sendo mantidas pela W3C (World Wide
Web Consortium).
Fique de olho
Para uma melhor experincia com browsers (navegadores), sugiro que
baixem:
Firefox http://br.mozdev.org/download/

Safari http://www.apple.com/br/safari/download/
Chrome - http://www.google.com/chrome/index.html?hl=pt-
BR&brand=CHMB&utm_campaign=pt-BR&utm_source=pt-BR-ha-latam-br-
sk&utm_medium=ha
Fim do boxe
Sir Timothy John "Tim" Berners-Le

Recentemente, Tim Berners-Lee foi considerado um dos maiores gnios vivos
do mundo, segundo o levantamento "Top100 Living Geniuses", da consultoria
Creators Synectics.
Berners-Lee usou um NeXTcube na CERN (Conseil Europen pour la
Recherche Nuclaire - Organizao Europia para a Investigao Nuclear)
para criar o primeiro servidor web do mundo. O primeiro website que Tim
Berners-Lee construiu - foi colocada online em 7 de agosto de 1991. Oferecia
uma explicao sobre o que a World Wide Web, como algum poderia criar
um browser (navegador), como instalar e configurar um servidor web.
Mais tudo isso s foi possvel graas inicialmente ao cientista John Licklider
que props a criao da rede galctica como aprendemos na semana 1 -
Introduo. Claro que outros cientistas e pesquisadores contriburam para
este grande feito.

Fonte: http://pt.wikipedia.org/wiki/Tim_Berners-Lee.
Especificaes
A ltima especificao HTML lanada pela W3C foi recomendao HTML
4.01, publicada no final de 1999. Uma errata ainda foi lanada em 2001. Com
o passar dos anos e a evoluo da internet, o HTML passou por mudanas
que terminaram distorcendo o objetivo inicial de sua criao, misturando
formatao com apresentao, ou seja, opes como tipo da fonte e cor da
fonte faz parte da formatao e definir um trecho de texto que se comporte
como um pargrafo faz parte da apresentao.
O grupo de trabalho da W3C desde 2002 a 2006, de forma exclusiva focado

no desenvolvimento do XHTML (acrnimo para a expresso inglesa
eXtensible Hypertext Markup Language), considerada pela W3C como um
sucessor do HTML para corrigir as deformidades, dessa forma o cdigo
XHTML escrito apenas para apresentao sem nenhuma formatao.

Modificando apenas a forma de escrever o cdigo, a extenso de um
documento permanece HTML.
No ano de 2007 comeou o processo de reformulao do HTML 4.01 para a

verso 5, denominado HTML5. Esta nova verso estar totalmente validada
pela W3C em 2012, mais possvel comear os estudos desta nova verso
que no suporta em hiptese alguma misturar formatao com apresentao.
Saiba mais
Para saber sobre a W3C e todas as recomendaes das linguagens de
marcao, visite o site: http://www.w3.org/
Para saber mais sobre as linguagens de marcao HTML/XHTML visite o site:
http://www.w3schools.com/tags/default.asp
Para saber mais sobre a linguagem de marcao HTML5 visite os sites:
http://tableless.com.br/html5/
http://www.w3schools.com/html5/html5_reference.asp
Fim do boxe
O mnimo que voc precisa saber sobre HTML

O primeiro conceito que voc deve aprender ao projetar documentos HTML
para Web que HTML no foi criado para controlar a aparncia dos
documentos, o cdigo HTML formado por TAGs, que so responsveis
pela marcao do texto em funo de seu papel dentro do documento. Por
exemplo, o ttulo principal dentro de um documento HTML, marcado com as
TAGs <h1> e </h1>, enquanto que os pargrafos so marcados pela TAGs
<p> e </p>.

Existem dois tipos de TAGs:
Alguns so formados aos pares, indicando o incio e o fim do trecho
marcado, por exemplo, o par <h1> e </h1>.
Outros podem ser colocados individualmente, por exemplo, a
marcao <br />
TAGs bsicas e estrutura de um documento HTML

Existem quatro pares de TAGs que devem sempre existir em um documento
HTML:
<html> e </html> - Deve englobar todas as TAGs e todo o contedo
do documento (estar presente no incio e no fim) para indicar ao
navegador que se trata de um documento HTML.
<head> e </head> - Esta seo o cabealho que recebe vrias
TAGs que s podem ser declaradas aqui.
<title> e </title> - O elemento principal da tag <head> o ttulo do
documento que apresentado na barra de ttulos do browser
(navegador).
<body> e </body> - Serve para indicar o corpo do documento, ou
seja, todo o contedo que voc visualiza quando visita um site est
no <body>.

Tag de definio DOCTYPE

Existe uma tag especial que tem a finalidade de informar ao navegador como
este deve ler e interpretar o cdigo HTML. Eu normalmente gosto de explicar
que o DOCTYPE como se fosse uma gramtica, por exemplo, na lngua
portuguesa existe uma gramtica que define as regras de escrita e leitura,
que nos permite fazer a interpretao do texto.
O DOCTYPE deve ser sempre a primeira declarao em um documento

HTML. So trs os tipos de DOCTYPE para XHTML:
STRICT
o <XHTML; 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD

XHTML; 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
o Esta a mais rgida das declaraes. Os documentos XHTML
no modo Strict no admitem qualquer item de formatao
dentro dos elementos e nem elementos em desuso
"deprecated" segundo as recomendaes do W3C.
TRANSITIONAL
o <XHTML; 1.0 Transitional <!DOCTYPE html PUBLIC "-
//W3C//DTD XHTML; 1.0
Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
o Esta declarao permite uma maior flexibilidade e indicada
para documentos que ainda utilizem elementos em desuso
("deprecated"), regras de apresentao embutidas em tags e
tambm para documentos destinados a exibio em browsers
sem suporte para CSS.
FRAMESET
o <XHTML; 1.0 Frameset <!DOCTYPE html PUBLIC "-
//W3C//DTD XHTML; 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
o Esta declarao permite tudo da declarao transational e
mais os elementos especficos para frames que no so mais
utilizados.
Apesar dessa aparente sofisticao, as pginas Web no passam de

documentos eletrnicos de texto simples. Estes documentos podem ser

produzidos em qualquer editor de texto no formatado, por exemplo, o bloco
de notas do Windows. Em nossos estudos iremos utilizar o Adobe
Dreamweaver CS5.
Para garantir uma flexibilidade dos documentos HTML publicados nos
servidores Web, aplique sempre estes trs princpios:
Nunca coloque acento nos nomes dos documentos;
Nunca utilize espaos em branco entre palavras nos nomes dos
documentos;
Nunca escreva os nomes dos documentos com letra maiscula.
WWW (World Wide Web)

A WWW (World Wide Web) criada por Tim Berners-Lee um conjunto de
documentos multimdia que esto conectados ou ligados por hiper-vnculos,
de modo que voc possa passar de um documento para outro com um clique
do mouse.
Documento: apenas um relatrio que descreve alguma coisa.
Multimdia: a criao e exibio de um documento no limitado s
palavras, pois tem som, imagem, vdeo e etc.
Hiper-vnculos: so conexes a vrios servidores ou no mesmo
servidor web, que permite ir de um documento para outro.
O navegador utiliza o cdigo HTML para exibir o documento com os hiper-
vnculos, estes por sua vez tem as URLs que contm os endereos exatos
de outros documentos HTML armazenado em um servidor Web.

URL (Uniform Resource Locators)
As URL (Uniform Resource Locators) descrevem o local exato de um recurso
da internet, por exemplo: vdeos, msicas, texto, aplicativos e etc.
Em geral, ao criar um hiper-vnculo especialmente queles que descrevem
recursos na internet, voc fornece trs informaes diferentes:
protocolo nome do servidor caminho do documento.

Abaixo segue um exemplo de uma URL para um documento HTML
armazenado em um servidor Web:
http://www.carlosjose.net/downlodas/index.html
Tipos de URL:
Absoluta este tipo de URL descreve o caminho absoluto informando desde
a origem at chegar ao documento desejado.
Ex: http://www.carlosjose.net/downlodas/index.html
Relativa este tipo de URL descreve o caminho relativo onde no h

necessidade de informar o caminho desde a origem onde esta o documento.
Ex: ../downlodas/index.html

Protocolos
Voc pode usar a palavra protocolo em diversos sentidos, quando fazemos
referncia a computadores e internet, importante que voc pense na palavra
como um modo de se referir a um conjunto especfico de regras para
transferir informaes entre computadores.
Exemplos de protocolos:
http:// - transfere informaes entre computadores.
https:// - transfere informaes com segurana entre computadores,
de modo que eles no possam ser visualizados ou lidos por outros
computadores durante a transferncia.
ftp:// - transfere documentos HTML, fotos, vdeos e qualquer formato
de arquivo que faca parte do site entre computadores. Este protocolo
responsvel pela publicao do site em um servidor Web, mais a
frente irei explicar este processo.
DNS
Domain Name System (Sistema de Nomes de Domnios) um sistema de
gerenciamento de nomes hierrquico e distribudo operando segundo duas
definies:
Examinar e atualizar o banco de dados de domnios.
Resolver nomes de servidores em endereos de rede (IPs).
O sistema de distribuio de nomes de domnio foi introduzido em 1984 com

a finalidade de viabilizar ainda mais a rede galctica idealizada pelo cientista
John Licklider, os nomes de hosts (pontos de rede) residentes em um banco

de dados pde ser distribudo entre servidores mltiplos, baixando assim a
carga em qualquer servidor que prov administrao no sistema de
nomeao de domnios.
Fique de olho
Cada computador que armazena documentos web possui um endereo nico
na Internet chamado de endereo IP.
A atribuio de domnios na Internet visa a no utilizao do mesmo nome de
domnio por mais de uma instituio.
Fim do boxe
Convencionou-se um domnio geogrfico a cada pas, com exceo dos EUA,

a administrao interna da WWW ficou a cargo de cada pas. No Brasil a
FAPESP (Fundao de Amparo a Pesquisa do Estado de So Paulo) a travs
do site: http://registro.br/
Exemplo de Domnios:
gov - indica endereo de governo;
edu - indica endereo educacional;
org - indica endereo de organizaes no governamental;
mil - indica endereo de rede militar;
net - indica endereo de organizao da rede;
com - indica endereo de rede comercial.

Saiba mais
Para explorar outras opes de DNS, visite o site:
http://registro.br/dominio/dpn.html
Fim de boxe
Trabalhando com Site no Adobe Dreamweaver

Uma deciso importante antes de comear a produzir um website chama-se:
organizao. Um website um conjunto de vrios arquivos existente em um
site.
Para que serve o recurso site do Adobe Dreamweaver? Um site a rea de

armazenamento de todos os arquivos que compem o website, ou seja, uma
pasta em seu computador para fazer armazenamento de forma hierrquica
dos documentos HTML, da pasta com as imagens, da pasta com vdeos, da
pasta com os arquivos SWF do Adobe Flash e etc.
Fique de olho
Precisamos criar um novo site para cada novo projeto de um website.
Fim do boxe

Criando um novo Site no Adobe Dreamweaver

Na verso CS5 ficou ainda mais simples a forma de criar um site. Para criar
um site proceda assim:
1- Menu > Site > New Site...
2 Preencha apenas os campos: Site Name e Local Site Folder com a pasta
de trabalho para a criao dos exerccios HTML.
3 Clique no boto Salvar.

Gerenciando um Site existente no Adobe Dreamweaver

O gerenciamento de um site consiste na manuteno dos vrios projetos de
website que voc tenha j produzido ou que esteja produzindo, proceda
assim para gerenciar:
1 - Menu > Site > Manage Sites...

2 Clique no boto > Edit... para ter acesso as opes de configurao do
site.
3 Para finalizar clique no boto > Done
Exportando um Site existente no Adobe Dreamweaver

O processo de exportar um site consiste em salvar um arquivo texto com o
nome do projeto, por exemplo, Aulas HTML.ste, neste arquivo constam
apenas as informaes: nome do site, local da pasta padro de trabalho. Para
realizar a exportao do site, proceda assim:
2 Clique no boto > Export...
3 Escolha a mesma pasta de trabalho para salvar o arquivo. Clique no
boto > Done para finalizar.

Importando um Site no Adobe Dreamweaver
O processo de importar um site consiste em fazer o inverso da exportao,
para importar um site proceda assim:
2 Clique no boto > Import...
3 Selecione o arquivo *.ste desejado. Clique no boto > Done para finalizar.
Criando um documento HTML com o Adobe Dreamweaver

Para criar um novo documento HTML em branco, proceda assim:
1 - Menu > File > New... na janela de dilogo New Document escolha Blank
Page > Page Type: > HTML, clique no boto Create.

2 Este ser o primeiro documento HTML de muitos que voc criar para o
site: Aulas HTML.
3 Menu > File > Save. Por padro iremos adotar o seguinte nome para este
arquivo: exe01.html e para os demais exerccios que voc ir fazer mude
apenas o numero.
4 Clique no boto > Code na barra de documento para poder visualizar o
cdigo HTML, observe que o Adobe Dreamweaver traz a estrutura pronta
para que voc faa as inseres necessrias.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>

5 Modifique o documento HTML acrescentando as informaes como
mostra abaixo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title> Primeiro Documento HTML</title>
</head>
<body>
Exemplo de um documento HTML simples sem nenhuma tag
aplicada a este texto!
</body>
</html>
6 Para visualizar este documento no browser (navegador), precisamos

configurar o Adobe Dreamweaver para a lista de navegadores ao qual
podemos visualizar, para isto proceda assim: Menu > File > Preview in
Browser > Edit Browser list...
7 Marque o Firefox como: Defaults > Primary browser e OK.
8 Pressione a tecla de funo [F12] para visualizar este documento HTML
no navegador.

Assim criamos o nosso primeiro documento HTML, um passo importante para
a sua carreira como Web Design, siga corretamente os estudos dos tutoriais
sem pular nenhum exerccio para garantir um bom aprendizado!
Saiba mais
Pratique a linguagem de marcao HTML no Adobe Dreamweaver atravs
dos tutoriais: 16 Principais TAGs do HTML; 17 - TAGs do HTML para
criao de formulrio e 18 Criando um layout HTML, publicado no ambiente.
Segue dois sites importantes que possuem todas as referencias sobre HTML:
http://www.w3schools.com e http://htmldog.com/
Para aprender mais assista aos vdeos 17 Entendendo o Adobe
Dreamweaver e 18 A importncia dos Padres Web (Web Standards),
publicado no ambiente.
Fim de boxe

Resumo
Aprendemos muitas coisas importantes que vo nos ajudar nesta caminhada
como profissional de Web Designer, tais como:
O Adobe Dreamweaver um poderoso editor HTML, CSS, Java
Script e jQuery;
Aprendemos as especificaes do HTML ;
Entendemos como funciona a interpretao do cdigo HTML pelos
navegadores atravs do DOCTYPE;
Aprendemos as TAGs bsicas que compem um documento HTML;
Aprendemos o significado e importncia: WWW, URL, protocolos e
DNS;
E aprendemos a criar uma estrutura organizada de trabalho no Adobe
Dreamweaver chamada: site. E por fim criamos o primeiro documento
HTML.
Mais isso s o comeo, pois na sequncia iremos aprender a utilizar o
Adobe Dreamweaver CS5 para criao de sites para web parte II.

3. Aprendendo a utilizar o Adobe Dreamweaver CS5 para
criao de sites para web parte II.
Chegamos finalmente a semana 6 onde voc vai finalizar seus estudos na

disciplina Web Design e Formatao de Imagem e se tornar um Web Design.
Isso mesmo voc pode se considerar um Web Design iniciante, digo isso
porque acredito que voc seguiu todos os estudos que preparei com muito
esmero especialmente para a sua formao profissional.
Nessa nova etapa vamos aprender os dois ltimos assuntos:

CSS
Spry
O estudo das regras CSS vo nos ajudar a criar toda a formatao do

HTML/XHTML que criamos na cada de informao e finalizaremos com a
biblioteca Javascript o Spry do Adobe Dreamweaver para criao de
interfaces ricas.
o que CSS?
CSS a sigla para Cascading Style Sheets, que pode ser traduzida para
Folhas de Estilo em Cascata. A especificao CSS1 foi criada em 1996 pela
W3C (World Wide Web Consortium www.w3c.org), com o objetivo de
substituir as marcaes HTML de formatao, separando assim a camada de
apresentao (CSS) e a camada de contedo (HTML/XHTML).

CSS uma linguagem simples e de fcil aprendizagem para a criao de
layouts para websites. trabalho da CSS: controlar cores, tamanho, tipografia
e posicionamento dos elementos de um layout em um website.
Por que devemos utilizar CSS?

CSS apesar de simples e de fcil aprendizagem, uma poderosa e precisa
linguagem de formatao, que reduz drasticamente o consumo de banda e
acesso simultneo dos usurios em um website. uma linguagem bem
suportada por todos os navegadores modernos.
Saiba mais
Segue o link oficial com todas as referncias CSS:
http://www.w3schools.com/css/css_reference.asp
Fim do boxe
Quais as vantagens em se usar CSS?

Separando a formatao do contedo, a manuteno do website
torna-se mais fcil. Alteraes no layout podem ser feitas sem a
necessidade de se alterar o documento HTML/XHTML, e o contrrio
tambm verdadeiro.
1- Reduz consideravelmente a carga de carregamento de um
documento HTML/XHTML, tomando-a mais leve (com menos
kilobytes) e mais rpida (menos tempo de espera de
carregamento por parte do usurio);
2- Reduz o consumo de banda do servidor por parte do website;

3- Permite portar o site para diversos dispositivos, como por
exemplo, pocketpcs, impressoras, WebTVs, navegadores para
deficientes visuais, smartphones e etc;
Separar a formatao do contedo torna o site mais
acessvel.
Fique de olho
XHTML = contedo
CSS = aparncia
Fim do boxe
Recapitulando o HTML/XHTML, se observamos com muita ateno

um documento HTML/XHTML tem uma estrutura de rvore.
importante que voc visualize esta estrutura para facilitar a escrita das
regras CSS, pois assim iremos saber informar o caminho de uma tag
conhecendo seu antecessor e o descendente como mostras as
imagens.


Sintaxe CSS
A sintaxe de uma regra CSS bem simples e composta por trs elementos
(seletor, propriedade e valor) e pode ser escrita de duas formas:
seletor {propriedade: valor; propriedade: valor}
seletor {
propriedade: valor;
propriedade: valor;
propriedade: valor
}
Fique de olho
Quando existe mais de uma propriedade, costuma-se endentar a
declarao para facilitar a leitura posterior.
No se faz necessrio a colocao do ponto vrgula (;) no final do valor
da ltima propriedade.
Fim do boxe
Como uma linguagem de programao, a sintaxe CSS aceita a

incluso de comentrios. Deve-se usar os delimitadores /* */, e deve
ser usado para fazer comentrio de uma nica linha de texto ou de um
bloco de texto.

/*incio da formatao*/
seletor {
propriedade: valor;
propriedade: valor;
propriedade: valor
}
/*fim da formatao*/
Como inserir CSS nos documento HTML/XHTML

Existem trs formas de inserir uma Folha de estilo CSS:
Estilos inline;
Estilos incorporados;
Estilos externos.
Vamos explicar de forma detalhada cada uma destas formas.
Estilos inline
Folhas de estilo inline so declaradas diretamente na marcao de um
documento HTML/XHTML que se quer formatar, atravs do atributo style. Sua
formatao s vlida para o documento em que se esta escrevendo a regra
de formatao.
Fique de olho
O uso de estilos inline deve ser extremamente limitado ou at mesmo no ser
utilizado, pois essa tcnica retira toda a flexibilidade das CSS pelo simples
motivo de quaisquer mudanas na formatao dever ser feita diretamente
na(s) marcao(es) da tag HTML/XHTML que recebeu a formatao.

Fim do boxe
Observe a formatao que foi aplicada na tag <p>:
<p style="color:#ff0000;font-weight:bold;text-
align:center;
border:1px solid #ff0000"> O texto deste parágrafo
será vermelho, negrito e centralizado, e
terá uma borda vermelha de 1 pixel de largura ao
redor dele.</p>

Estilos incorporados
Estilos incorporados s so vlidas para apenas um documento
HTML/XHTML. A especificao do CSS feita dentro da tag <head>,
atravs da tag <style>.
Os atributos possveis para a marcao <style> so:
type: especifica o tipo de contedo dentro do elemento. Seu
valor para CSS text/css;
media: especifica o tipo de mdia ao qual sero aplicados os
estilos.
Fique de olho
O uso de estilos incorporados essa tcnica retira toda a flexibilidade das CSS
pelo simples motivo de quaisquer mudanas na formatao dever ser feita
diretamente em cada documento HTML/XHTML que recebeu a formatao.
Fim do boxe
Observe a formatao que foi aplicada na tag <p>:
<head>
<style type="text/css">
p{
color: #ff0000;
font-weight: bold;
text-align: center;
border: 1px solid #ff0000;

}
</style>
</head>
<body>
<p> O texto deste parágrafo será vermelho,
negrito e centralizado, e terá uma borda vermelha
de 1 pixel de largura ao redor dele.</p>
A regra acima aplicada na tag <p> foi escrita obedecendo sintaxe CSS
como foi apresentado na seo 6.4 Sintaxe CSS, que fica bem clara a sua
explicao conforme mostra a imagem.

Estilos externos
Esta a melhor forma de inserir as regras CSS nos documentos
HTML/XHTML de um website. O estilo externo composto de um simples
arquivo de texto, com extenso css, por exemplo, estilo.css onde ficam
contidas as declaraes das regras de formatao.
Este arquivo vinculado a um ou mais documentos HTML/XHTML atravs da
tag <link>, que deve ser escrita dentro do cabealho do documento, ou seja,
dentro da tag <head></head>.

Fique de olho
Toda a formatao do website ficar contida em um nico arquivo, e qualquer
alterao neste arquivo, mudar a formatao em todos os demais
documentos HTML/XHTML que esto vinculados ao arquivo estilo.css.
Esta ser a forma em que iremos trabalhar, pois muito flexvel e fcil para
manuteno do website.
Fim do boxe
Os atributos possveis para a marcao <link > so:

rel: especifica o tipo de relao existente entre o documento atual e o
documento para qual a marcao <link /> est apontando. O valor
declarado para este atributo ser: stylesheet.
type: especifica o tipo de contedo dentro do elemento. O valor
declarado para este atributo ser: text/css;
href: deve indicar o local em que o arquivo CSS est armazenado.
Seu valor deve ser a URL de localizao do arquivo externo.
<head>
<link rel="stylesheet" type="text/css"
href=css/style.css" />
</head>
<body>
<p> O texto deste parágrafo será vermelho,
negrito e centralizado, e terá uma borda vermelha
de 1 pixel de largura ao redor dele.</p>

Acima podemos observar que o arquivo de formatao style.css contendo as
regras CSS, est na pasta css. Essa uma boa prtica de organizao na
construo de um website.
Logo abaixo podemos observa o contedo existente no arquivo style.css:
@charset "utf-8";
/* CSS externo */
p {
color: #ff0000;
font-weight: bold;
text-align: center;
border: 1px solid #ff0000
}
F
onte: imagem produzida pelo autor.

Se voc observar com muita ateno, os resultados visuais dos trs exemplos
so exatamente iguais quando visualizamos no navegador. Porm a melhor
opo sempre ser a utilizao de arquivos externos.
Saiba mais
Pratique a linguagem de formatao CSS no Adobe Dreamweaver atravs
dos tutoriais: 18 Seletores CSS; 19 Unidades de medida; 20 Guia de
referencia das propriedades CSS; 21 Criando menu de navegao e 22
Criando um layout simples, publicado no ambiente.
Leia no meu blog: CSS em uma nica folha. Segue abaixo a url:
http://carlosjose.net/?p=871
Leia no meu blog: Web Standards Image Replacement (FIR). Segue abaixo
a url:
Leia no meu blog: Web Standards Fazendo converso de pixel para em.
Segue abaixo a url:
Leia no meu blog: Tutorial CSS: Formatando Tabela. Segue abaixo a url:
Segue dois sites importantes que possuem todas as referencias sobre CSS:
http://www.w3schools.com e http://htmldog.com/
Fim do boxe

Atualmente as regras de CSS esto na verso 3, que ainda seus poderosos
recursos no so suportado de forma total por todos os navegadores, mais
alguns recursos desta nova verso podemos utilizar nos principais
navegadores, tais como: Safari, Firefox, Opera e Chrome apenas para as
verses mais recente de cada navegador.
No meu blog tem alguns post sobre este assunto, faa a busca utilizando a
palavra CSS3
Spry
O Spry foi incorporado ao Adobe Dreamweaver na verso CS3 em resposta
as bibliotecas Javascript que estavam sendo criadas na poca. obvio que
Adobe no poderia ficar de fora desse mercando. O Spry foi criado para
facilitar a vida dos Web Designers, com esta biblioteca qualquer um poder
aplicar recurso de Javascript sem precisar escrever uma linha de cdigo.
Recursos do Spry
Entre os vrios recursos que o Spry disponibiliza, vou me deter apenas nos
elementos de interface para que assim possamos melhorar a experincia dos
usurios que visitaro o nosso website.
O Spry Widget ser o nosso objeto de estudo, pois um elemento de
interface composto pelas seguintes partes:
Estrutura - cdigos HTML/XHTML que definem a composio
estrutural do widget. Nenhuma novidade para voc que j estudou e
aprendeu a escrever cdigo HTML/XHTML, pois fica bem mais fcil
entender.

Comportamento - cdigos JavaScript que controlam as respostas do
widget mediante os eventos ocasionados pelo usurio. Neste caso,
no nos interessa, pois necessrio um conhecimento de
programao em Javascript, caso voc tenha este conhecimento v
em frente e estudo como ele funciona.
Apresentao regras de formatao CSS que especificam a
aparncia do widget. Neste caso voc vai poder modificar a aparncia
de qualquer Spry e deix-lo totalmente com o visual do seu website.
O Spry Widget composto dos seguintes recursos de interface:
Spry Menu Bar O famoso menu drop-down que pode ser criado
horizontal ou vertical.
Spry Tabbed Panels Sistema de navegao em abas que
composto por painis onde cada aba exibe um contedo diferente.
Spry Accordion Os painis dobrveis, que exibem o contedo por
vez a cada clique.
Spry Collapsible Panel Este recurso bastante utilizado quando
queremos exibir ou ocultar um determinado contedo.
Voc j percebeu que o Spry um poderoso recurso do Adobe Dreamweaver

para criar interaes de alto nvel com o usurio. Segue alguns vdeos para
que voc possa aprender de forma mais rpida e dinmica a utilizar o Spry.

Saiba mais
Para aprender mais assista aos vdeos 20 Spry Menu Bar; 21 - Spry Tabbed
Panels; 22 - Spry Accordion e 23 - Spry Collapsible Panel, publicado no
ambiente.
Fim do boxe
Finalizando o website Novo Studio

Com este tpico finalizaremos um trabalho iniciado na semana 2 quando
criamos no Adobe Photoshop o template do website do Novo Studio. Na
semana 4 importamos este template para o Adobe Flash e criamos
interatividade atravs do Code Snippets. Na semana 5 criamos a estrutura
base do layout do website Novo Studio para finalmente aplicar as regras de
formatao CSS que aprendemos para agora finalizar este projeto.
O tutorial 23 Formatando um layout HTML com CSS, o toque final da
promessa que fiz a voc na primeira semana desta disciplina em que voc iria
criar um website com tudo que tinha direito e mais um pouquinho.

Resumo
Aprendemos muitas coisas importantes que vo nos ajudar nesta semana
que se encerra, mais que abre totalmente a sua viso sobre o profissional de
Web Designer, tais como:
Aprendemos o que CSS;
Aprendemos a importncia de utilizar CSS em um website;
Entendemos que a separao de contedo e apresentao faz toda a
diferena na construo de websites;
Utilizamos o Spry do Adobe Dreamweaver para criar interfaces ricas;
E finalmente criamos um website profissional e moderno.
Como sempre finalizei esta parte: isso s o comeo, porque os seus

estudos na profisso de Web Desig no acabam aqui, na verdade eles
comeam aqui e perduram na sua busca por sempre mais e mais. Eu por
exemplo, continuo estudando porque sempre tem alguma coisa nova para
aprender a cada dia em nossa profisso que nos ajuda a ser profissionais
melhores. Fica com Deus e um forte abrao.
isso!

REFERENCIAS BIBLIOGRAFICAS
PEREIRA, Domnico Turim. REHDER, Wellington. Adobe Flash CS3:

Desenvolvendo Websites Interativos. Rio de Janeiro, Editora Viena 2008.
Editora Abril. Curso INFO Flash CS4.
Adobe Systems Incorporated. Uso do ADOBE FLASH CS4
PROFESSIONAL - 2008.
Adobe Systems Incorporated. Programao do ADOBE
ACTIONSCRIPT 3.0
- 2008.
http://tv.adobe.com/
ARAKAKI, Mrcio Eduardo de C. VARGAS, Elton da Silva. Adobe
Dreamweaver CS4: Desenvolvendo Sites por Completo. Rio de Janeiro,
Editora Viena 2009.
ROBBINS, Jennifer Niederst. Aprendendo Web Design guia para
iniciantes, 3 Edio
iMasters FFPA Informtica. Curso Interativo - Adobe Dreamweaver CS3.
Adobe Systems Incorporated. Uso do ADOBE DREAMWEAVER CS4 -
2008.
SILVA. Carlos Jos Pereira da. Macromedia Dreamweaver MX2004.
Apostila ganhadora do 1 Concurso apostilando.com na palma da mo!
Maro 2006,
http://www.apostilando.com/download.php?cod=2056&categoria=Dreamw
eaver
http://www.carlosjose.net Vivendo o design como designer

http://www.w3schools.com
http://htmldog.com/
ADAMS, Cameron... [ET AL.] A arte e a cincia da CSS Crie web
designs inspiradores baseados em padres. Porto Alegre, Bookman
2009.
LEWIS, Joseph R., MOSCOVITZ, Meitar. CSS Avanado. So Paulo,
Novatec Editora 2010.
Ramalho, J.A., HTML 4: Teoria e pratica, So Paulo, Berkeley Brasil,
maio 2000.
Rebitte, L., Vinicius, M., Dominando Tableless, So Paulo, Editora Alta
Books, 2006.
ARAKAKI, Mrcio Eduardo de C. VARGAS, Elton da Silva. Adobe
Dreamweaver CS4: Desenvolvendo Sites por Completo. Rio de Janeiro,
Editora Viena 2009.
ROBBINS, Jennifer Niederst. Aprendendo Web Design guia para
iniciantes, 3 Edio
iMasters FFPA Informtica. Curso Interativo - Adobe Dreamweaver CS3.
Adobe Systems Incorporated. Uso do ADOBE DREAMWEAVER CS4
- 2008.
http://www.carlosjose.net Vivendo o design como designer
http://www.w3schools.com
http://htmldog.com/

INFORMARICA - Web Design e Formatacao de Imagem

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

INFORMARICA - Web Design e Formatacao de Imagem

Enviado por

Direitos autorais:

Formatos disponíveis

INFORMTICA

Web Design e Formatao de Imagem

Vice-Governador | Joo Soares Lyra Neto

Secretrio de Educao | Anderson Stevens Lenidas Gomes

Secretrio Executivo de Educao Profissional | Paulo Dutra

Gerente Geral da Educao Profissional | Luciane Pula

Gestor de Educao a Distncia | Marcos Paulo de Assis Castro

Coordenador do Curso | Almir Pires

Professor Conteudista | Carlos Jos

Equipe Central de Educao a Distncia

Imagem da capa: http://www.imagemativa.com.br/

Informtica | Web Design e Formatao de Imagem | Volume 02 5

Na semana 3 estudamos a parte bsica do Adobe Flash at a criao de

Utilizamos apenas o behavior Graphic, para dar continuidade iremos utilizar

Interatividade tem haver com a participao direta do usurio atravs de uma

Como sei que vocs ainda no estudaram lgica de programao, gostaria a

6 Informtica | Web Design e Formatao de Imagem | Volume 02

Informtica | Web Design e Formatao de Imagem | Volume 02 7

Fonte: imagem produzida pelo autor.

8 Informtica | Web Design e Formatao de Imagem | Volume 02

Agora vamos editar a Timeline do boto 'play_btn', para isso d um duplo

Informtica | Web Design e Formatao de Imagem | Volume 02 9

10 Informtica | Web Design e Formatao de Imagem | Volume 02

Informtica | Web Design e Formatao de Imagem | Volume 02 11

Fonte: imagem produzida pelo autor.

Informtica | Web Design e Formatao de Imagem | Volume 02 13

Linha 1: play_btn o Instance Name do objeto Button, onPress a ao de

14 Informtica | Web Design e Formatao de Imagem | Volume 02

Informtica | Web Design e Formatao de Imagem | Volume 02 15

Symbol: Movie Clip

16 Informtica | Web Design e Formatao de Imagem | Volume 02

Para exemplificar o comportamento de um Movie Clip, abra o exemplo que

Informtica | Web Design e Formatao de Imagem | Volume 02 17

Clique no primeiro keyframe da layer aes e pressione a tecla de funo [F9]

18 Informtica | Web Design e Formatao de Imagem | Volume 02

Informtica | Web Design e Formatao de Imagem | Volume 02 19

Trabalhando com Som

20 Informtica | Web Design e Formatao de Imagem | Volume 02

Muito cuidado na utilizao de arquivo de som, pois estes podem se tornar

Informtica | Web Design e Formatao de Imagem | Volume 02 21

O Code Snippets esta dividido em:

O Code Snippets pode ser acessado de duas formas:

22 Informtica | Web Design e Formatao de Imagem | Volume 02

Informtica | Web Design e Formatao de Imagem | Volume 02 23

24 Informtica | Web Design e Formatao de Imagem | Volume 02

O Adobe Dreamweaver um editor profissional de HTML, que projeta e

Adobe Dreamweaver para Web Designers

Informtica | Web Design e Formatao de Imagem | Volume 02 25

Requisitos de sistema para Windows

26 Informtica | Web Design e Formatao de Imagem | Volume 02

rea de trabalho do Adobe Dreamweaver

Informtica | Web Design e Formatao de Imagem | Volume 02 27

rea de trabalho padro do Adobe Dreamweaver:

1. Barra de Menus Todas as opes de menu.

28 Informtica | Web Design e Formatao de Imagem | Volume 02

Informtica | Web Design e Formatao de Imagem | Volume 02 29

Configurando as preferncias do Adobe Dreamweaver:

1 - Na opo de Menu > Edit > Preferences...

30 Informtica | Web Design e Formatao de Imagem | Volume 02

Fonte: captura de tela do Adobe Dreamweaver CS5 feita pelo autor.

Informtica | Web Design e Formatao de Imagem | Volume 02 31

Entendendo o HTML e afins!

32 Informtica | Web Design e Formatao de Imagem | Volume 02

Sir Timothy John "Tim" Berners-Le