Apostila DW Cs5

Lgica de Programao em Javascript
Adobe Dreamweaver CS5

Desenvolvimento de
Websites Interativos

Adobe Dreamweaver CS5 Desenvolvimento de Websites Interativos

2 2009 Alfamidia LTDA.

Todos os direitos reservados para Alfamdia Prow.

AVISO DE RESPONSABILIDADE
As informaes contidas neste material de treinamento so distribudas NO ESTADO EM QUE
SE ENCONTRAM, sem qualquer garantia, expressa ou implcita. Embora todas as precaues
tenham sido tomadas na preparao deste material, a Alfamdia Prow. no tem qualquer
responsabilidade sobre qualquer pessoa ou entidade com respeito responsabilidade, perda ou
danos causados, ou alegadamente causados, direta ou indiretamente, pelas instrues contidas
neste material ou pelo software de computador e produtos de hardware aqui descritos.

07/2010 - Verso 1.0

Alfamdia Prow
(51) 3073.2100
www.alfamidia.com.br


3 2009 Alfamidia LTDA.

A Alfamdia Prow d Boas Vindas aos seus clientes e deseja um
excelente treinamento.

Benefcios ao aluno
- Suporte ps-treinamento via e-mail (3 consultas por 90 dias aps o trmino do curso) para tirar
dvidas do contedo ministrado em aula, atravs do e-mail matricula@alfamidia.com.br ;
- Acesso a extranet www.alunoalfamidia.com.br para verificao de agenda e pontos do
PROGRAMA FIDELIDADE;
- Convnio com o estacionamento do prdio (desconto);
- Avaliaes de acompanhamento e final de curso (em cada mdulo) durante todo o treinamento,
garantindo a qualidade do curso.
Observaes Importantes
- obrigatrio que sejam salvos todos os trabalhos efetuados durante a aula, no servidor indicado
pelo instrutor.
- No permitido entrar em sala de aula com alimentos ou bebidas de qualquer espcie ou fumar
nas dependncias da Alfamdia Prow;
- No permitida a instalao de outros Hardwares ou Softwares que no sejam os utilizados em
treinamento;
- O preenchimento da avaliao final de curso/mdulo condio obrigatria para que o aluno
possa acionar a garantia do curso, conforme previsto na ficha de matrcula;
- Somente ser fornecido certificado ao aluno com assiduidade igual ou superior a 75% do
treinamento;
- Qualquer necessidade de alterao na agenda ou cursos contratados inicialmente, consulte os
Termos de Contratao na Ficha de Matrcula;
- Contatos com a Alfamdia Prow podem ser feitos atravs dos e-mails:
matricula@alfamidia.com.br dvidas aps contratao
info@alfamidia.com.br novas contrataes

4 2010 Alfamidia Prow.

Adobe Dreamweaver CS5 Desenvolvimento de Websites
UNIDADE 1 ORGANIZAO DO CURSO 10
1.1 SOBRE O CURSO.........................................................................................................................................10
1.2 ESTRUTURA DO CURSO..............................................................................................................................10
UNIDADE 2 INTRODUO AO HTML E WEB STANDARDS.................................................................................................12
2.1 A LINGUAGEM HTML E A INTERNET.........................................................................................................12
2.2 AS LIMITAES DO HTML ........................................................................................................................12
2.3 OS WEB STANDARDS.................................................................................................................................13
2.4 W3C..........................................................................................................................................................13
2.5 POR QUE ENTENDER O HTML?.................................................................................................................14
2.6 CONCEITOS BSICOS DE HTML ................................................................................................................14
2.7 TAGS BSICAS...........................................................................................................................................15
2.7.1 Exemplo de HTML com Tags Bsicas.................................................................................................. 15
2.7.2 Principais Tags HTML......................................................................................................................... 16
2.8 CORES EM HTML......................................................................................................................................16
UNIDADE 3 XHTML...................................................................................................................................................................19
3.1 RAZES PARA EXISTIR O XHTML.............................................................................................................19
3.2 REGRAS DE SINTAXE .................................................................................................................................20
3.2.1 Caixa Baixa.......................................................................................................................................... 20
3.2.2 Elementos sem Contedo ..................................................................................................................... 20
3.2.3 Aninhamento ........................................................................................................................................ 21
3.2.4 Valores dos Atributos ........................................................................................................................... 21
3.2.5 Atributo NAME..................................................................................................................................... 22
3.2.6 Elementos Obrigatrios ....................................................................................................................... 22
3.2.7 Declarao DOCTYPE........................................................................................................................ 22
3.3 PGINA BSICA XHTML: XHTML.HTML ...................................................................................................23
3.4 LISTAS.......................................................................................................................................................23
3.4.1 Listas Simples Exemplo 1.................................................................................................................. 24
3.4.2 Listas Simples Exemplo 2.................................................................................................................. 25
3.4.3 Listas com Subnveis ............................................................................................................................ 27
3.5 LINKS ........................................................................................................................................................29
3.5.1 Adicionando Links de E-mail ............................................................................................................... 29
3.5.2 Exemplo de Links: links.html ............................................................................................................... 29
3.6 TABELAS....................................................................................................................................................30
3.6.1 Construindo Tabelas ............................................................................................................................ 30
3.6.2 Exemplo de uma Tabela Simples.......................................................................................................... 31
3.6.3 Tabelas Mais Sofisticadas.................................................................................................................... 33
3.6.4 Layers - DIV......................................................................................................................................... 35
UNIDADE 4 INTRODUO A ESTILOS CSS ..........................................................................................................................38
4.1 O CSS........................................................................................................................................................38
4.2 BENEFCIOS EM UTILIZAR CSS..................................................................................................................38
4.3 CSS PARA SEPARAR CONTEDO DA APRESENTAO................................................................................39
4.4 PGINAS COM SEMNTICA CORRETA ........................................................................................................40
4.5 SINTAXE DO CSS.......................................................................................................................................41
4.6 APLICANDO ESTILOS A UMA PGINA.........................................................................................................42
4.6.1 Aplicando Estilos apenas uma Tag HTML Especfica ...................................................................... 42
4.6.2 Aplicando Estilos a Toda a Pgina HTML .......................................................................................... 42
4.6.3 Utilizando um Arquivo de Estilos Externo........................................................................................... 43

5 2010 Alfamdia Prow

4.7 O EFEITO CASCATA ...................................................................................................................................43
4.8 FORMAS DE UTILIZAO DOS SELETORES.................................................................................................44
4.8.1 Aplicando Estilos a uma Tag: .............................................................................................................. 44
4.8.2 Definindo Estilos para mais um Grupo de Tags .................................................................................. 45
4.8.3 Definindo uma Classe de Estilos.......................................................................................................... 46
4.8.4 Aplicando Estilos a uma palavra ou a um grupo pequeno de palavras ............................................... 47
4.8.5 Definindo um ID de Estilos .................................................................................................................. 47
UNIDADE 5 INTRODUO AO TABLELESS DESIGN...........................................................................................................52
5.1 TABLELESS................................................................................................................................................52
5.2 PROBLEMAS NO DESIGN COM TABELAS.....................................................................................................52
5.3 DESIGN TABLELESS CSS BOX MODEL....................................................................................................52
5.4 UM EXEMPLO DE TABLELESS DESIGN .......................................................................................................53
UNIDADE 6 CONHECENDO A INTERFACE DO DREAMWEAVER CS5................................................................................57
6.1 SOBRE O ADOBE DREAMWEAVER..............................................................................................................57
6.2 REA DE TRABALHO DO DREAMWEAVER..................................................................................................58
6.3 FERRAMENTAS SELECT, HAND E ZOOM.....................................................................................................59
6.4 BARRA DE FERRAMENTAS STANDARD.......................................................................................................59
6.5 VISO GERAL DA BARRA DE FERRAMENTAS DE DOCUMENTO....................................................................60
6.5.1 Viso geral da Janela Documento ....................................................................................................... 61
6.6 VISO GERAL DA BARRA DE FERRAMENTAS PADRO................................................................................62
6.7 VISO GERAL DA BARRA DE STATUS..........................................................................................................62
6.8 VISO GERAL DO PAINEL INSERIR..............................................................................................................63
6.9 VISO GERAL DO PAINEL ARQUIVOS .........................................................................................................64
6.10 VISO GERAL DO PAINEL ESTILOS CSS.....................................................................................................65
UNIDADE 7 INICIANDO O PROJETO DE UM WEBSITE ........................................................................................................67
7.1 DEFININDO UM SITE LOCAL.......................................................................................................................67
LABORATRIO....................................................................................................................................................70
7.2 CRIANDO UMA NOVA PGINA HTML .......................................................................................................70
7.3 SALVANDO UMA PGINA HTML ...............................................................................................................71
7.4 PREFERNCIAS DO BROWSER.....................................................................................................................72
LABORATRIO.................................................................................................................................................73
UNIDADE 8 ADICIONANDO CONTEDO A UM WEBSITE....................................................................................................76
8.1 IMPORTANDO ARQUIVOS DE TEXTO..........................................................................................................76
LABORATRIO.................................................................................................................................................76
8.2 CONTROLANDO A ESTRUTURA DO DOCUMENTO........................................................................................77
8.2.1 Ttulos................................................................................................................................................... 77
LABORATRIO..................................................................................................................................................78
8.2.2 Pargrafos ........................................................................................................................................... 79
8.2.3 Quebra de Linha .................................................................................................................................. 80
LABORATRIO..................................................................................................................................................80
8.2.4 Listas .................................................................................................................................................... 81
8.2.4.1 Criao de uma nova lista............................................................................................................... 82
8.2.4.2 Criao de uma lista usando um texto existente.............................................................................. 82
8.2.4.3 Mudando as propriedades de uma lista........................................................................................... 82
8.2.4.4 Remover uma lista........................................................................................................................... 83
LABORATRIO..................................................................................................................................................83
8.3 ADICIONANDO CARACTERES ESPECIAIS....................................................................................................84
LABORATRIO..................................................................................................................................................85
UNIDADE 9 APLICANDO FOLHAS DE ESTILOS EM CASCATA (CSS)................................................................................87


9.1 CRIANDO ESTILOS .....................................................................................................................................87
9.2 MARGIN E PADDING UNIFICANDO O VISUAL INDEPENDENTE DO NAVEGADOR........................................97
LABORATRIO..................................................................................................................................................98
9.3 USANDO PONTOS, PIXELS OU EMS PARA TAMANHOS DE FONTES..............................................................99
9.3.1 Tamanhos Relativos ............................................................................................................................. 99
9.3.2 Tamanhos Absolutos .......................................................................................................................... 100
LABORATRIO................................................................................................................................................100
9.4 EDITANDO REGRAS DE ESTILO................................................................................................................103
9.5 CRIANDO ESTILOS DE CLASSE .................................................................................................................103
LABORATRIO................................................................................................................................................105
9.6 ANEXANDO FOLHAS DE ESTILOS EXTERNAS...........................................................................................107
LABORATRIO................................................................................................................................................108
9.7 DUPLICANDO ESTILOS..............................................................................................................................110
LABORATRIO................................................................................................................................................111
9.8 CRIANDO ESTILOS AVANADOS..............................................................................................................112
9.8.1 exemplo de pseudo-elemento : ........................................................................................................... 112
9.9 CRIANDO UMA FOLHA DE ESTILOS EXTERNA ..........................................................................................113
9.9.1 A Barra de Ferramentas Style Rendering .......................................................................................... 114
LABORATRIO................................................................................................................................................114
UNIDADE 10 INSERINDO DIFERENTES MDIAS NO SITE...............................................................................................119
10.1 IMAGENS NA WEB....................................................................................................................................119
10.2 USANDO A BARRA DE INSERO PARA IMAGENS ....................................................................................120
10.2.1 Texto Alternativo das imagens ...................................................................................................... 121
10.3 REDIMENSIONANDO UMA IMAGEM ..........................................................................................................121
10.4 ALINHAMENTOS E ESPAAMENTOS EM UMA IMAGEM .............................................................................126
10.5 ALINHAMENTOS E ESPAAMENTOS EM UMA IMAGEM VIA CSS...............................................................127
10.6 USANDO O PAINEL ASSETS......................................................................................................................130
LABORATRIO..................................................................................................................................................131
10.7 INSERINDO UM ARQUIVO DO FLASH ........................................................................................................134
10.8 ADICIONANDO UM VDEO DO FLASH .......................................................................................................137
UNIDADE 11 USANDO BIBLIOTECAS E MODELOS ........................................................................................................140
11.1 ITENS DE BIBLIOTECA..............................................................................................................................140
11.2 COLOCANDO ITENS DE BIBLIOTECA EM UMA PGINA..............................................................................142
11.3 MODIFICANDO ITENS DA BIBLIOTECA .....................................................................................................142
11.4 DESANEXANDO E EXCLUINDO ITENS DA BIBLIOTECA..............................................................................143
11.5 CRIANDO MODELOS DE SITE....................................................................................................................144
LABORATRIO................................................................................................................................................145
11.6 DEFININDO REGIES EDITVEIS..............................................................................................................146
11.7 USANDO MODELOS..................................................................................................................................147
11.8 APLICANDO UM MODELO A UMA PGINA EXISTENTE..............................................................................149
11.9 MODIFICANDO O MODELO.......................................................................................................................150
LABORATRIO................................................................................................................................................151
UNIDADE 12 PROJETANDO LAYOUTS COM CSS...........................................................................................................153
12.1 USANDO CAMADAS PARA LAYOUT..........................................................................................................153
12.1.1 Manipulando as Propriedades da Camada................................................................................... 155
12.2 CAMADAS ANINHADAS............................................................................................................................156
12.3 USANDO RGUAS E GUIAS.......................................................................................................................158
12.4 ADICIONANDO CSS A CAMADAS.............................................................................................................159
12.5 PROJETANDO COM DIVS..........................................................................................................................161
12.5.1 Posicionamento Absoluto e Relativo ............................................................................................. 161
LABORATRIO................................................................................................................................................163


12.5.2 Float .............................................................................................................................................. 168
12.5.3 Clear.............................................................................................................................................. 168
UNIDADE 13 NAVEGANDO NO SITE.................................................................................................................................187
13.1 LINKS DE HIPERTEXTO.............................................................................................................................187
13.1.1 Tipos de Link ................................................................................................................................. 187
13.2 CRIANDO LINKS PARA ARQUIVOS NO SITE ..............................................................................................188
LABORATRIO................................................................................................................................................188
13.3 ADICIONANDO LINKS DE E-MAIL .............................................................................................................190
LABORATRIO................................................................................................................................................191
13.4 ALTERANDO CORES DO LINK...................................................................................................................191
LABORATRIO..................................................................................................................................................192
13.5 PRIORIDADES DAS DECLARAES DOS LINKS...........................................................................................194
LABORATRIO................................................................................................................................................194
13.6 ADICIONANDO LINKS PARA PGINAS EXTERNAS NUMA NOVA J ANELA ....................................................196
13.7 CRIANDO VRIOS LINKS DE UMA IMAGEM...............................................................................................196
13.8 PROJETANDO LINKS DE NAVEGAO COM CSS......................................................................................198
LABORATRIO................................................................................................................................................199
UNIDADE 14 TABELAS.......................................................................................................................................................208
14.1 CRIANDO TABELAS..................................................................................................................................208
14.2 PROPRIEDADES DA TABELA .....................................................................................................................210
14.3 PROPRIEDADES DA CLULA .....................................................................................................................211
14.4 EDITANDO LINHAS...................................................................................................................................212
14.4.1 Adicionando Linhas e Colunas...................................................................................................... 212
14.4.2 Excluindo uma Linha..................................................................................................................... 213
14.4.3 Mesclando Linhas e Colunas......................................................................................................... 213
14.4.4 Dividindo Linhas e Colunas .......................................................................................................... 213
UNIDADE 15 FORMULRIOS E MAPA INCORPORADO..................................................................................................216
15.1 CRIANDO UM FORMULRIO.....................................................................................................................216
15.2 USANDO OBJ ETOS DE FORMULRIO........................................................................................................217
15.3 PROCESSANDO O FORMULRIO................................................................................................................220
15.4 VALIDANDO UM FORMULRIO.................................................................................................................220
LABORATRIO................................................................................................................................................222
15.5 INCORPORANDO MAPA EXTERNO.............................................................................................................227
UNIDADE 16 SPRY FRAMEWORK.....................................................................................................................................235
16.1 MENUS NO DREAMWEAVER CS5.............................................................................................................235
16.2 TABBED PANELS......................................................................................................................................237
16.3 ACCORDION.............................................................................................................................................237
16.4 COLLAPSIBLE PANEL ...............................................................................................................................237
UNIDADE 17 LABORATRIOS...........................................................................................................................................240
17.1 EXERCCIOS DE FIXAO PGINA COM VDEOS....................................................................................240
17.2 EXERCCIOS DE FIXAO PGINA NACIONAL E INTERNACIONAL..................................................241
17.3 EXERCCIOS DE FIXAO PGINAS DE ROTEIROS.................................................................................242
17.4 EXERCCIOS DE FIXAO CRIANDO OS LINKS.......................................................................................244
UNIDADE 18 TESTANDO O SITE .......................................................................................................................................246
18.1 VERIFICANDO LINKS................................................................................................................................246
18.2 VERIFICANDO A COMPATIBILIDADE DO NAVEGADOR..............................................................................247
18.3 EXECUTANDO RELATRIOS EM UM SITE..................................................................................................248


UNIDADE 19 FAZENDO UPLOAD DE ARQUIVOS............................................................................................................251
19.1 CONECTANDO A UM SITE REMOTO..........................................................................................................251
19.2 MASCARANDO PASTAS E ARQUIVOS .......................................................................................................253
19.3 CONECTANDO-SE AO SERVIDOR FTP.......................................................................................................254
19.4 SINCRONIZANDO ARQUIVOS....................................................................................................................254
UNIDADE 20 - ANEXO 1 PRINCIPAIS TAGS .....................................................................................................................257


Unidade1OrganizaodoCurso

Sobre o Curso
Estrutura do Curso


Unidade 1
Organizao do Curso
1.1 Sobre o Curso
O curso Adobe Dreamweaver CS5: Desenvolvimento de Websites apresenta aos alunos
as principais caractersticas deste software, visando prepar-los tanto para criar pginas
HTML simples quanto entender cdigos HTML que venham a encontrar.
Designers dificilmente criaro seus layouts diretamente em HTML, utilizando
geralmente ferramentas de edio de pginas como o Dreamweaver ou ferramentas
de manipulao de imagens como o Photoshop. Entretanto, comum ser necessrio
ajustar os layouts gerados, editando diretamente no HTML, seja para pequenas
modificaes, seja para aplicar recursos que a ferramenta no contempla. Este curso
tambm d uma base mais aprofundada para entender as potencialidades de ferramentas
de edio de pginas e as restries de layout impostas pela linguagem HTML

1.2 Estrutura do Curso
As primeiras unidades apresentam o HTML, XHTML e CSS, posteriormente a
ferramenta Dreamweaver, uma ferramenta profissional para edio de pginas HTML,
intercalando com exerccios e exemplos prticos, para melhor absoro do contedo.
Durante todo o curso o aluno construir um site completo com este software.
As unidades finais demonstram como gerenciar o site, a partir de modelos e itens de
biblioteca. Tambm, apresenta a aba Spry.


Unidade2IntroduoaoHTMLe
WebStandars

A Linguagem HTML e a Internet
As limitaes do HTML
Os Web Standards
W3C
Porque entender o HTML?
Conceitos Bsicos de HTML
Tags bsicas
Cores em HTML

12 2010 Alfamdia Prow.

Unidade 2
Introduo ao HTML e Web Standards
2.1 A Linguagem HTML e a Internet
A Internet teve incio nos Estados Unidos em 1969 sob o nome de ARPANET.
Composta inicialmente de quatro computadores interligados, ela tinha como finalidade
demonstrar as potencialidades da construo de redes usando computadores dispersos
em uma grande rea. Em 1972, 50 universidades e instituies militares j possuam
conexes.
Hoje a Internet uma arquitetura de software e hardware interligados que so mantidas
por organizaes comerciais e governamentais. Uma de suas principais caractersticas
que no possui um proprietrio nico, responsvel pelo seu funcionamento. Existem
apenas associaes e grupos que se dedicam a desenvolver protocolos e procedimentos
para suportar a interligao entre os computadores, ratificar padres e resolver questes
operacionais.
Um dos principais elementos que levaram a popularizao da Internet foi a World Wide
Web (teia de abrangncia mundial), tambm conhecida como WWW. Trata-se de uma
nova forma dos usurios navegarem pelas informaes e arquivos disponveis nos vrios
computadores ligados a Internet. O modelo WWW tratar todos os dados da Internet
como hipertexto, isto , vinculaes entre diferentes documentos, para permitir que as
informaes sejam exploradas interativamente e no apenas de uma forma linear.
A principal linguagem que popularizou a Web, e que ainda a linguagem mais utilizada
o HTML (Hypertext Markup Language), uma linguagem criada com o objetivo de
formatar informaes de um texto e definir os hiperlinks entre um texto e outro, ou seja,
os pontos de vinculao entre documentos.
Hoje existem diversas ferramentas que permitem navegar na Internet e visualizar as
pginas HTML. Estas ferramentas so popularmente conhecidas como navegadores ou
browsers. Da mesma forma, existem tambm inmeros editores visuais, dos quais o
Adobe Dreamweaver o mais utilizado, que gravam arquivos no formato HTML.
2.2 As limitaes do HTML
A linguagem HTML originalmente tinha como propsito apenas definir a estrutura de
um documento e os hiperlinks entre documentos. Assim, ela permitia especificar quando
iniciava e terminava um pargrafo, definir ttulos, subttulos, listas numeradas, textos em
itlico e negrito e outras caractersticas semelhantes.
Quase que imediatamente aps seu surgimento, porm, novos recursos comearam a ser
criados, principalmente voltados para a construo de layouts mais sofisticados. Neste


momento surgiram recursos para especificar imagens de fundo, alinhar elementos em
tabelas, posicionar imagens, entre outros. Muitas destas novidades eram iniciativas das
empresas que desenvolviam os principais navegadores utilizados na internet, o que
muitas vezes obrigava o Web Designer a criar pginas diferentes para cada navegador,
para aproveitar ao mximo os novos recursos recm lanados.
Dois problemas tiveram sua origem derivada deste contexto: a falta de uma
padronizao, pois diferentes empresas criavam novos recursos prprios para o HTML,
e a mistura entre layout e contedo. Ambos, problemas endereados pelos Web
Standards, como ser visto ao longo deste curso.
2.3 Os Web Standards
O W3C (World Wide Web Consortium), juntamente com outros grupos e organismos
reguladores, estabeleceu tecnologias para criao e interpretao de contedo para a
Web, visando resolver de forma definitiva os problemas mencionados anteriormente.
Estas tecnologias, a que chamamos Web Standards, tm como objetivo principal fazer
com que o contedo desenvolvido dentro destes padres possa ser visualizado
independente do equipamento (computador, PDA, celular), do tipo do navegador (IE,
Mozilla, Opera, Netscape, etc.) e da forma (banda de conexo) com que o usurio
estiver acessando a Internet. um conceito de acessibilidade estendido.
Um dos objetivos dos Web Standards a separao do contedo, definido atravs de
linguagens estruturais como XHTML e XML, e do layout, definido atravs de
linguagens de apresentao, em particular o CSS (Cascading Style Sheet). Outros Web
Standards, como o DOM (Document Object Model) e o ECMAScript 262 (verso
padro do J avaScript) so voltados para a programao em pginas Web.
2.4 W3C
O que o W3C?
O World Wide Web Consortium (W3C) um consrcio de indstrias dedicado em levar
a Web ao seu potencial mximo. Fundada em 1994 por Tim Berners-Lee (inventor da
Web), o W3C tem mais de 450 organizaes associadas, incluindo Microsoft, Amrica
Online (incorporou a Netscape Communications), Apple, Adobe, Macromedia, Sun
Microsystems e uma variedade de outras empresas fabricantes de hardware e software,
provedores de contedo, instituies acadmicas e empresas de telecomunicaes. O
consrcio tem o apoio (estrutura fsica e intelectual) de trs instituies de pesquisa:
MIT nos EUA, INRIA na Europa e Keio University no J apo.
Qual a sua funo?
O W3C desenvolve especificaes abertas (padres) para aumentar a interoperabilidade
de produtos relacionados com a Web. As recomendaes do W3C so desenvolvidas por
grupos de trabalhos originados das organizaes membros e experts convidados.


2.5 Por que Entender o HTML?
O HTML uma linguagem de marcao utilizada para criar e formatar pginas ou
documentos Web. Com o tempo passou a ser utilizado para descrever a estrutura dos
documentos. O HTML permite criar documentos com componentes como cabealhos
(h1, h2,...), pargrafos (p), quebras de linha (br), tabelas (table, tr, td, th), listas (li, ul,
ol), imagens (img) e links (a). Uma tecnologia complementar foi criada, o Cascading
Style Sheets (CSS), responsvel pela apresentao (formatao visual) dos documentos.
No incio de 2008 o W3C (falaremos da W3C adiante) anunciou a primeira
especificao do HTML 5. O HTML, que responsvel por organizar e formatar as
pginas que visitamos na internet, est em sua verso 4.0.1 e continua evoluindo. Aps
cinco anos de trabalho, esta ainda apenas uma verso de testes do HTML 5, enquanto a
verso final est prometida para 2012.
2.6 Conceitos Bsicos de HTML
Quando um browser exibe uma pgina HTML, ele l um arquivo texto (que pode ser
aberto em qualquer editor de texto) com o contedo do site e marcaes, chamadas tags,
que informam os elementos da pgina e sua formatao.
As marcaes do HTML - tags - consistem do sinal (<), (o smbolo de "menor que"),
seguida pelo nome da marcao e fechada por (>) ("maior que").
De um modo geral, as tags aparecem em pares, por exemplo, <h1> Cabealho</h1>. O
smbolo que termina uma determinada marcao igual quele que a inicia, antecedido
por uma barra (/) e precedido pelo texto referente.
No exemplo, <h1> avisa ao cliente Web para iniciar a formatao do primeiro nvel de
cabealho e </h1> avisa que o cabealho acabou.
H tags que no exigem o fechamento, funcionando via de regra com ou sem a
definio de uma tag de fechamento, como o caso da tag de definio de pargrafo
<p>. O padro mais recente de uso do HTML, entretanto, recomenda que esta tag seja
sempre fechada, para termos um padro mais prximo do utilizado em XHTML, como
ser explicado a seguir.
Outras tags efetivamente no tm marcaes de final, como a tag <br>que apenas
define uma linha em branco, e a tag <hr>que exibe uma linha divisria.
Este tutorial tem por objetivo mostrar como criar e exibir pginas HTML. Tais pginas
so criadas a partir de arquivos texto ASCII, contendo caracteres de marcao da
linguagem HTML. Uma vez criados, estes arquivos so salvos com uma extenso .html
ou .htm


2.7 Tags Bsicas
A seguir apresentamos as tags bsicas de uma pgina HTML, que so suficientes para
criar uma pgina mnima. Nas lies seguintes apresentaremos diretamente exerccios
que incluiro novas tags que permitiro controlar diversas caractersticas da pgina.
Estas e todas as futuras tags so mostradas dentro de uma estrutura de tabela, para
facilitar sua consulta, e so repetidas em anexo ao final deste material, de forma a
facilitar seu uso no futuro como material de referncia.

TAG O QUE FAZ
 Insere comentrios nas pginas
<html> Toda pgina HTML deve estar entre o tag de incio de um
documento HTML e o tag de fim deste documento.
<head> Envolvem a seo de cabealho do documento, no qual so
especificadas informaes que no so exibidas na pgina,
como ttulo do documento e informaes sobre o assunto da
pgina.
<title> Indica o ttulo do documento para o Browser. Geralmente os
Browsers apresentam este ttulo na barra de ttulo da sua Janela
no Windows
<body> Envolvem a seo de corpo do documento. Aqui fica o contedo
principal da Home Page. Opcionalmente podemos indicar um
arquivo de imagem para formar o fundo, usando a opo:
BACKGROUND.
<br> Insere uma quebra de linha
2.7.1 Exemplo de HTML com Tags Bsicas
Todo documento HTML deve ser identificado como HTML ( <html>...</html>), ter
uma rea de cabealho ( <head>...</head>) com o nome do documento ( <title></title>
), um ttulo principal e uma rea definida como corpo ( <body>...</body>) do contedo
do documento. Como o exemplo a seguir, basico.html:

<html>
<head>
<title>Minha primeira pgina</title>
</head>
<body>



Minha primeira pgina
</body>
</html>
2.7.2 Principais Tags HTML
<br> Quebra de linha;
<p> Pargrafo;
<strong> Negrito;
<em> Itllico;
<h1> Padro para ttulos. Pode ser de <h1>a <h6>;
<hr> Marca uma linha horizontal para dividir partes da pgina;
<div> Tag de diviso lgica;
<ul> Listas com marcadores;
<ol> Listas numeradas;
<li> Item da lista
<img> Insere imagem
<a> Define link
<table> Tag para criar tabelas;
<tr> Tag para criar linha da tabela;
<td> Tag para criar clula da tabela;
<form> Define um formulrio;
2.8 Cores em HTML
A definio de cores j foi vista como atributo da tag <font>. Entretanto, para
efetivamente utilizarmos as cores de forma eficiente no cdigo HTML e necessrio
entender como as mesmas so especificadas na linguagem.
O uso de cores em HTML pode ser feito atravs de duas formas bsicas, utilizando o
nome em ingls de algumas cores especficas ou fazendo uso do cdigo hexadecimal
RGB. O segundo mtodo mais recomendvel, pois permite a definio de todas as
cores possveis.
Exemplos de uso de cores em fonte:

<font color= #000000>texto em preto</font>


<font color=#ffffff>texto em branco</font>
<font color=#ff0000>texto em vermelho</font>

Nos exemplos acima, valores diferentes de cdigo permitem a definio de cores
diferentes. importante entendermos como estas cores so formadas para podermos
manipular estes cdigos, porm na prtica geralmente normalmente ser utilizado algum
editor visual para escolher a cor desejada, como a Dreamweaver, por exemplo.
As cores so definidas pela composio de 3 pares de algarismos, cada um
representando um valor entre 0 e 255. O primeiro destes pares representa a quantidade
de vermelho na cor, o segundo a quantidade de verde e o terceiro a quantidade de azul.
A primeira dificuldade para entender esta codificao se d pelos nmeros estarem em
hexadecimal, ou seja, ao invs dos nmeros serem representados com nmeros de 0 a 9,
so representados por estes nmeros mais as letras A,B,C,D,E,F.
Felizmente no essencial entender o mecanismo matemtico para converter os
nmeros, sendo suficiente para a maioria dos casos ter uma noo dos nmeros mais
utilizados, como mostra a tabela abaixo:

Nmero codificado
em hexadecimal
Valor do mesmo
em decimal
00 0
33 51
66 102
99 153
CC 204
FF 255
Estes nmeros so importantes, pois so os nicos utilizados para criar cores chamadas
web safe que so as cores exibidas pelos browsers em monitores com 256 cores
configuradas.


Unidade3 XHTML

Razes para existir o XHTML
Regras de Sintaxe
Pgina bsica XHTML
Listas
Links
Tabelas


Unidade 3
XHTML
3.1 Razes para Existir o XHTML
Existem diferentes tipos de navegadores no mercado atual: alguns rodam Internet em
computadores pessoais, outros esto instalados em celulares e outros dispositivos
mveis. importante que o desenvolvedor tenha em mente que as pginas criadas por
ele devem ser compatveis com esses diferentes tipos de tecnologia. a que entra o
XHTML, uma variao do HTML, mas que estrito e claro como o XML.
O navegador de um telefone celular, por exemplo, no tem recursos para interpretar uma
pgina com HTML mal formatado, ou seja, que tem tags sem finalizao ou com aspas
faltando. A vantagem do cdigo XHTML que ele no permite nenhum erro, caso
contrrio o documento no ser vlido.
XHTML dever ser o sucessor do HTML. Assim, muitos consideram que XHTML a
atual ou mais nova verso do HTML. Porm, XHTML uma recomendao separada. A
W3C continua a recomendar o uso de XHTML 1.1, XHTML 1.0, e HTML 4.01 para
publicao na web, e HTML 5 est atualmente sendo desenvolvido. O XHTML 1.0
uma definio de HTML em conformidade com as regras do XML. Isso quer dizer que
utilizando XHTM temos a vantagem de poder utilizar plenamente o HTML, e o poder de
manipular informaes com XML.
Obs: Dentro do site do W3C (World Wide Web Consortium, em www.w3c.org) existe
uma ferramenta para validao de documentos eletrnicos da internet. Ela pode ser
usada tanto para XHTML como para XML ou HTML. O utilitrio analisa o documento
e, caso exista algum erro, informa qual o problema e em qual linha ele se localiza,
facilitando assim a vida dos desenvolvedores. O endereo da ferramenta :
http://validator.w3.org.
Exemplo:

<?xml version=1.0 encoding=iso-8859-1?>
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN DTD/xhtml1-transitional.dtd>
<html xml:lang=pt-BR lang=pt-BR xmlns=http://www.w3c.org/1999/xhtml>
<head>
<title> Uso de XHTML </title>
</head>
<body>
<p>Minha primeira pgina </p>
</body>
</html>


Inicialmente precisamos saber que os trechos em destaque servem para informar ao
navegador que a pgina se trata de XHTML e que o idioma usado o portugus. Esses
trechos de cdigo precisam estar em todas as pginas XHTML.
Os documentos XHTML devem ser salvos com as extenses .htm ou .html da mesma
maneira que os documentos HTML normais.
3.2 Regras de Sintaxe
Antes de comear a criar as pginas em XHTML importante que entendamos os
principais conceitos desse padro. A estrutura bsica bastante semelhante do HTML,
mas existem algumas regras que precisam ser seguidas sempre.
3.2.1 Caixa Baixa
Uma delas o tipo de caixa (letras maisculas ou minsculas) usado nas tags. O HTML
permite o uso de caixa alta, enquanto que em XHTML apenas podem ser utilizadas
letras minsculas:
Certo:
<title>
Errado:
<Title>
<TITLE>
3.2.2 Elementos sem Contedo
Alguns elementos no possuem contedo algum. Para eles, existe uma sintaxe especial.
Em vez de inserir uma tag de fechamento logo aps a tag de abertura, colocada uma
barra (/) antes do fechamento da tag inicial para indicar ao navegador que esse elemento
foi terminado.
Exemplo:
<br />
A tag <br>no HTML no tem contedo. utilizada para realizar uma quebra de linha.
No XHTML, essa mesma tag deve ser utilizada como no exemplo anterior para ser
vlida.
O espao que aparece antes da barra necessrio para que o cdigo seja suportado por
navegadores mais antigos, que iro simplesmente ignorar o espao e o que estiver depois
dele.


3.2.3 Aninhamento
Uma outra regra rgida do XHTML a que diz respeito ao aninhamento, ou seja, como
os elementos se organizam dentro de outros elementos. Como no XML, um elemento
precisa estar completamente dentro do outro para que o aninhamento esteja correto e o
documento seja vlido.
Errado:
<em>Alfamdia<b>Prow</em></b>
Assim, como nesse exemplo, o cdigo ser invlido. Para ser vlido em XHTML o
cdigo anterior dever ser escrito da seguinte maneira:
Correto:
<em> Alfamdia <b> Prow </b> </em>
3.2.4 Valores dos Atributos
Os valores de atributos, em XHTML, devem estar sempre entre aspas:
Correto:
<table width="100%">
Incorreto:
<table width=100%>

Alm disto, os elementos sempre devem ter um valor definido:
Correto:
<dl compact="compact">
<input checked="checked" />
<input readonly="readonly" />
<input disabled="disabled" />
<option selected="selected" />
<frame noresize="noresize" />
Incorreto:
<dl compact>
<input checked>
<input readonly>
<input disabled>
<option selected>
<frame noresize>


3.2.5 Atributo NAME
O HTML 4.01 define um atributo NAME para elementos como a, applet, frame, iframe,
img, e map.
No XHTML, o atributo NAME foi descontinuado, sendo substitudo pelo atributo ID.
Para manter a compatibilidade com browsers mais antigos, aconselha-se utilizar os dois
atributos.
Incorreto:
<img src="figura.gif" name="figura1" />

Correto:
<img src="figura.gif" id="figura1" />
<img src="figura.gif" id="figura1" name="figura1" />
3.2.6 Elementos Obrigatrios
Existem quatro elementos que os documentos XHTML precisam obrigatoriamente
conter. O cdigo HTML, que mais flexvel, permite que alguns desses elementos
sejam omitidos, mas no XHTML eles devem estar sempre presentes. So eles:
<html>
<head>
<title>
<body>
Cada um desses elementos possui a sua tag especfica para fechamento e devem ser
declaradas em uma ordem conforme visto no primeiro exemplo desse captulo.
3.2.7 Declarao DOCTYPE
A tag DOCTYPE usada para declarar o DTD (Document Type Definition) de um
documento XHTML. Um DTD uma coleo de declaraes que define a estrutura,
elementos e atributos que podem ser usados em um determinado tipo de documento.
Assim, um documento XHTML, para funcionar, precisa ser vlido segundo as regras de
um dos DTDs disponveis para o padro:

Strict
Use essa declarao para criar uma pgina baseada apenas em HTML (sem CSS). Esse
tipo de DTD garante que seu documento XHTML poder ser visto pelo maior nmero
possvel de dispositivos.



<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 strict//EN
http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd>

Transitional
Essa a declarao que deve ser usada quando pretendemos utilizar folhas de estilo
(CSS) em sua pgina de Internet, as Cascading Style Sheets, para melhorar a aparncia
dos documentos de seu site. Em geral, devemos apenas usar esse tipo de DTD quanto
tem certeza de que os usurios tero acesso a navegadores que reconhecem CSS.

3.3 Pgina bsica XHTML: xhtml.html
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3c.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>Minha primeira pgina XHTML</title>
</head>
<body>

HTML para designers.
<br />Curso de Web Design.
</body>
</html>

3.4 Listas
Em determinadas situaes podemos desejar organizar informaes de uma pgina
HTML em listas.
Observe as tags HTML para listas e os exemplos a seguir:



<ol> Marca o incio e o fim de uma lista ordenada. Recebem na primeira linha um nmero
ou letra.
Atributos:
Start = especifica o nmero a partir do qual os itens comeam a ser contados. Ex:
<ol start=3>
Type = modifica o tipo do numerador que pode ser: nmero, letras ou algarismo
romano.
<ul> Marca o incio e o fim de uma lista no ordenada, ou seja, os itens da lista recebem
smbolos na primeira linha.
Atributos
Type = modifica o tipo do marcador (smbolo), que pode ser:
Circle = um crculo vazio.
Disc = um crculo cheio.
Square = um quadrado cheio
<li> Marca um item de uma lista, ordenada ou no ordenada.

Neste exerccio trabalharemos com listas ordenadas e marcadores. Assim como em uma
carta ou qualquer outro documento comum, precisamos listar tpicos atravs de
smbolos ou nmeros.
Para entender isto, acompanhe com o instrutor os exemplos a seguir:
3.4.1 Listas Simples Exemplo 1
Confira este primeiro exemplo de uma lista simples: lista1.html.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Listas</title>
</head>
<body>
<h3>Isto uma lista</h3>

<ol>
<li>Item 1 </li>
<li>Item 2 </li>
<li>Item 3 </li>
</ol>



<hr width=50% size=5 align=left>

<ul>
<li>Item 1 </li>
<li>Item 2 </li>
<li>Item 3 </li>
</ul>

</body>
</html>

3.4.2 Listas Simples Exemplo 2
Para fixar melhor o conceito de listas, vamos apresentar um segundo exerccio. Digite a
listagem a seguir e salve como lista2.html.

<head>
</head>
<body>
<h3>Isto uma listagem iniciando no nmero 4</h3>
<ol start="4">
<li>Item 1 </li>
<li>Item 2 </li>
<li>Item 3 </li>


</ol>
<h3>Isto uma listagem com letras</h3>
<ol type="a">
<li>html </li>
<li>para designers </li>
<li>alfamdia </li>
</ol>
<h3>Isto uma listagem em algarismo romano</h3>
<ol type="i">
<li>html </li>
<li>alfamdia </li>
</ol>
<h3>Esta uma listagem em algarismo romano a partir do nmero 3</h3>
<ol type="i" start="3">
<li>html </li>
<li>alfamdia </li>
</ol>
</body>
</html>



3.4.3 Listas com Subnveis
Vamos terminar esta lio com mais um exemplo. Desta vez, faremos uma listagem com
subnveis. Para entender isto, digite a listagem a seguir, e salve como lista3.html

<head>
</head>
<body>
<h3>Listagem e sublistagem</h3>
<ol>
<li>Item 1
<ul>
<li type=disc>Item 1.1</li>


</ul>
</li>
<li> Item 2
<ul>
<li type=square >Item 2.1
<ul>
<li type=circle>Item 2.1.1</li>
</ul>
</li>
<li type=circle>Item 2.2</li>
<li type=circle>Item 2.3</li>
</ul>
<li> Item 3
</ol>
</body>
</html>



3.5 Links
Hiperlink o elemento fundamental da navegao pela internet. O conceito simples:
selecionando-se determinado elemento em uma pgina Web, somos levados para uma
nova pgina.
Para criarmos um site precisamos fazer uso destes links para estabelecer a ligao entre
as pginas, de forma que, atravs de um nico clique sobre a frase ou imagem,
navegaremos para algum lugar no site ou na WEB.
Sintaxe:
<a></a>: delimitar o link
href: referencia a pgina que se deseja abrir
target =_blank: abre a pgina em uma nova janela no browser
3.5.1 Adicionando Links de E-mail
Adicionar um link de e-mail sua pgina uma maneira de fornecer aos usurios um
mtodo de entrar em contato com algum para falar sobre as informaes
disponibilizadas em seu site.
Um link de correio eletrnico abre uma nova janela de mensagem no programa de
correio eletrnico associado ao navegador do usurio Adicionando Links de E-mail
correio eletrnico associado ao navegador do usurio.
Ex.: <a href=mailto:email@provedor.com.br>E-mail</a>
3.5.2 Exemplo de Links: links.html
<head>
<title>Links</title>
</head>
<body>
<a href="index.htm">Home</a> -


<a href="texto.htm">Texto</a> -
<a href="contato.htm">Contato</a>
<br />
<br />
<br />
Email para Sugestes clique <a href="mailto:teste@teste.com.br"> Aqui</a>
</body>
</html>

3.6 Tabelas
O recurso de tabelas foi originalmente criado no HTML com o objetivo de organizar
informaes e exibir dados na forma de planilhas.
Esta tcnica j caiu em desuso, pois com o HTML 4.1 e o CSS possvel controlar de
forma bastante precisa a diagramao de um site sem ter que utilizar as tabelas como um
subterfgio. Nas prximas unidades sero apresentadas tcnicas de diagramao sem o
uso de tabelas (tableless design), enquanto que nesta unidade o foco no uso de tabelas
para a exibio de informaes em planilhas.
3.6.1 Construindo Tabelas
Tabelas so definidas, em HTML, com a definio das linhas e, dentro das linhas, das
clulas de cada coluna. Com apenas 4 tags, vistas na tabela seguinte, possvel definir
diversos tipos de tabelas:


<table> Define uma tabela. Antes e depois de uma tabela, acontece sempre uma
quebra de linha.
Atributos
Border: define espessura da borda da tabela
Cellspacing: espao entre cada clula
Cellpadding: distncia entre borda e contedo de cada clula.
Width: largura da tabela, em pixels ou valor percentual
<tr> Define uma linha normal da tabela (table row).
Atributos
Align: valores left, right e center definem o alinhamento horizontal.
Valign: valores top, middle e bottom definem o alinhamento vertical.
<td> Esta a marcao que define cada clula de uma tabela. As clulas de uma
tabela devem sempre aparecer entre as marcaes de linhas (<tr> e </tr>).
Como padro, o texto nas clulas alinhado a esquerda.
Atributos
Align: valores left, right e center definem o alinhamento horizontal.
Valign: valores top, middle e bottom definem o alinhamento vertical.
Nowrap: no h quebra de linhas dentro das clulas
Colspan: nmero de colunas que a clula ir ocupar
Rowspan: nmero de linhas que a clula ir ocupar
Width: largura da clula, em pixels ou valor percentual
<th> Desta forma so definidos os ttulos de uma tabela. Estes podem ser
posicionados em qualquer clula. A diferena entre a marcao de clula e
ttulo de clula que o ttulo aparece em negrito.
Atributos: os mesmos apresentados acima, para td
3.6.2 Exemplo de uma Tabela Simples
O exemplo tabelas1.html abaixo mostra uma tabela utilizando as tags apresentadas. A
figura em seqncia apresenta a imagem desta pgina:
<table border=1>

<tr>
<td>Itens/Ms</td>
<th>Janeiro</th><th>Fevereiro</th><th>Maro</th>
</tr>

<tr>


<th>Usuarios</th><td>80</td><td>93</td><td>120</td>
</tr>

<tr>
<th>Linhas</th><td>3</td><td>3</td><td>5</td>
</tr>
</table>
Como foi dito, a tabela construda linha a linha. Observe os comentrios no cdigo
acima.

Borda maior (border)
<table border=5>
<tr>
<td>teste1</td> <td>teste2</td> <td>teste3</td>
</tr>
<tr>
<td>teste4</td> <td>teste5</td> <td>teste6</td>
</tr>
</table>



3.6.3 Tabelas Mais Sofisticadas
As marcaes das tabelas, podem apresentar resultados diferentes, se acompanhadas de
alguns atributos mostrados na tabela anterior. Vamos ver os principais em exemplos
prticos:
Exemplo de alinhamento horizontal (align)
<table border=1>
<tr>
<td>Primeira clula</td><td>Segunda clula</td><td>Terceira clula</td>
</tr>
<tr>
<td align=center>centro</td>
<td align=left>esquerda</td>
<td align=right>direita</td>
</tr>
</table>

Clula em vrias colunas (colspan)
<table border=1>
<tr>


<td colspan=3>3colunas</td>
<td>normal</td>
<td>normal</td>
</tr>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col3</td>
<td>col 4</td>
<td>col 5</td>
</tr>
</table>

Clula em vrias linhas (rowspan)
<table border=1>
<tr>
<td rowspan=3>3 linhas</td>
<td>col 2</td>
<td>col 3</td>
<td>col4</td>
<td>col5</td>
</tr>
<tr>
<td>col 2</td>
<td>col 3</td>
<td>col4</td>
<td>col 5</td>
</tr>
<tr>
<td>col 2</td>
<td>col 3</td>
<td>col4</td>
<td>col 5</td>
</tr>


</table>

3.6.4 Layers - DIV
O comando DIV utilizado para criar um continer, que isola o seu contedo do restante
dos elementos da pgina. Fazendo uma analogia que pode facilitar este conceito: utilizar
o comando DIV como fazer uma caixa de texto no MS Word.
Dentro da tag que abre o DIV pode-se adicionar o atributo class e alterar o estilo
aplicado quela regio do documento. Um comando DIV sempre tem uma quebra de
linha incorporado, semelhana do comando P.
Exemplo:
<html>
<head>
<title> Uso do Comando DIV com o atributo Class </title>
<style type = text/css>
h1 {color: red}
#variacao {background: yellow}
.altcolor{background: yellow; color: green;
font-weight: bold}
</style>
</head>
<body>
<h1> Cabealho com Estilo Normal </h1>
texto<br>
texto<br>
<h1 id = variacao>
Cabealho com Estilo e uso do ID variacao
</h1>
<div class = altcolor>
Pargrafo utilizando DIV e a classe altcolor. O elemento DIV sempre insere uma quebra de
linha no texto.


</div>
</body>
</html>


Unidade4IntroduoaEstiloCSS

O CSS
Benefcios em utilizar CSS
CSS para separar contedo da apresentao
Pginas com semntica correta
Sintaxe do CSS
Aplicando estilos a uma pgina
Formas de utilizao dos seletores


Unidade 4
Introduo a Estilos CSS
4.1 O CSS
O CSS (Cascading Style Sheets ou Folhas de Estilo em Cascata) uma linguagem de
formatao proposta pelo W3C. Visa remover a formatao dos documentos (X)HTML,
separando contedo e formatao.
A especificao inicial, chamada CSS1, tornou-se uma recomendao do W3C no final
de 1996 e define praticamente todos os estilos de apresentao utilizados hoje em dia. A
segunda verso da especificao, chamada CSS2, foi aprovada em 1998 e acrescentou
vrios estilos novos, principalmente na rea de posicionamento e tabelas. Uma nova
verso est em desenvolvimento e espera-se que seja aprovada em um futuro prximo.
Todos os browsers atuais, o Internet Explorer 8, Mozilla Firefox 3.6, Opera 10, Google
Chrome e Safari suportam o CSS. Entretanto o suporte ao CSS Nvel 2 foi
implementado em nveis diferentes, o que torna a adoo dos conceitos de
posicionamento via CSS, ou Tableless, como conhecido, ainda um pouco complicado,
necessitando muitas vezes de truques de correo, conhecido como CSS Hacks.
Algumas consideraes sobre CSS:
Os estilos definem para o browser como devem ser exibidos os elementos do
(X)HTML.
Os estilos so geralmente definidos em folhas de estilo.
O CSS foi implementado na verso HTML 4.0 para resolver o problema de separao
entre contedo e formatao.
Os estilos quando armazenados em folhas de estilo externas (arquivos.css) e
compartilhadas entre documentos do mesmo website, poupam muito trabalho e
simplificam enormemente a manuteno do site.
Definies de estilo mltiplas sero refletidas em cascata em uma definio resultante
final.
4.2 Benefcios em Utilizar CSS
Utilizar CSS alm de ser essencial para o XHTML para garantir a separao entre
contedo e formatao, possibilita inmeros benefcios a desenvolvedores e usurios:



Produtividade aumentada.
Facilidade em criar sites com identidade visual unificada e coerente.
Facilidade em fazer mudanas em todo o site basta alterar um arquivo CSS invs de
mudar todas as pginas HTML.
Arquivos mais leves =>download mais rpido =>experincia de usurio melhorada.
Menos cdigo na pgina =>mais fcil codificar.
Permitir que visitantes alterassem suas preferncias definindo estilos dinamicamente.
Mais acessvel para uma ampla variedade de aparelhos.
Mais controle sobre o cdigo - interpretao do cdigo na ordem correta para os leitores
de tela.
Disponibiliza verses para impresso sem duplicao de contedo, somente alternando
o CSS.
Permitem formatar elementos do HTML como formulrios e barras de rolagem,
impossvel via atributos HTML.
Permitem controlar aspectos visuais como tipo e cor de borda, posicionamento,
visibilidade e margens propriedades inexistentes no HTML.
4.3 CSS para Separar Contedo da Apresentao
Uma das metas ao se utilizar os conceitos do Web Standards remover toda a
apresentao do cdigo (X)HTML, deixando-o limpo e semanticamente correto.
Enquanto o (X)HTML define a estrutura, O CSS fica responsvel pela formatao visual
e posicionamento de elementos dentro de uma pgina Web.
Utilizando CSS, um desenvolvedor pode definir elementos da apresentao (o layout,
fontes, cores, bordas, etc), independentemente da marcao do documento Web. Os
estilos podem (e devem, na maioria dos casos) serem definidos em um documento
separado com extenso .css e compartilhados entre todos ou um grupo de documentos
relacionados do mesmo website. Desta forma, alterar ou implementar novos estilos
tarefa fcil, bastando para isso alterar somente um arquivo do projeto, j que ele est
referenciado entre diversos documentos, sendo renderizado dinamicamente na medida
em que o browser carrega o arquivo de definies ou a folha de estilos externa (.css).
Ao separar formatao do contedo, estamos tornando o cdigo semanticamente correto.
Ou seja, no utilizando marcao de contedo (HTML) para formatao (uso incorreto).



Outra vantagem na separao a possibilidade de tornar disponvel o mesmo contedo
para mltiplos devices (aparelhos) sem necessidade de duplicar o contedo, alterando
somente a formatao (CSS). Isto inclusive pode ser feito de forma dinmica ou
utilizando linguagem script (J avascript, por exemplo). Entre os devices que suportam
contedo Web podemos citar:
Browsers.
Impressoras.
PDAs (Personal Digital Assistants).
Telefones Celulares.
Equipamentos wireless.
Para obter uma demonstrao do que pode ser conseguido visualmente por meio de um
design baseado em CSS, acesse o site Zen Garden, onde diferentes desenvolvedores
criaram para o mesmo contedo (documento HTML), diferentes arquivos CSS,
resultando em documentos com o design 100% diferentes entre si.
Vale a pena conferir! http://www.csszengarden.com/tr/portuguese/
4.4 Pginas com Semntica Correta
Uma marcao semanticamente correta utiliza elementos HTML para o seu objetivo
definido. Um HTML bem estruturado tem significado semntico para um amplo nmero
de User Agents (navegadores sem folhas de estilo, navegadores baseados em texto,
PDAs, sites de busca, etc.).
Utilizar cdigo semanticamente correto uma forma de organizar e estruturar a
informao na Web.
Devemos utilizar HTML padro e evitar fazer com que os elementos HTML se paream
com outros elementos HTML. Ou seja:
Para cabealhos e ttulos, utilize elementos de header comeando com o <h1>para o
ttulo de maior importncia.
Para ttulos em tabelas, utilize a tag <th>em vez da tag <td>.
Para listas, utilize elementos de lista <li>, <ol>e <ul>.
Para o layout, utilize a tag <div>em vez de <table>.
Conceito concebido pelo fsico ingls Tom Berners-Lee, o criador do World Wide Web,
cuja proposta, ainda em desenvolvimento, por um grupo de pesquisadores do W3C, por
ele liderado, estruturar todo o contedo disponvel na Internet. Essa estruturao ser


baseada num conjunto de regras, que permitir a localizao eficiente e precisa da
informao desejada.
Por mais sofisticados que sejam os mecanismos de buscas, atualmente existentes, todos,
sem exceo, oferecem para cada solicitao um grande nmero de pginas, que, em sua
maioria, no atendem s necessidades do usurio. Esse , ento, obrigado a verificar uma
a uma, at encontrar exatamente o que procura.
A Web semntica se prope objetivar essa busca, de modo que o contedo exato seja
encontrado em uma nica consulta. Esse conceito baseia-se na insero, em cada
arquivo da Web, de tags personalizadas, definidas pela linguagem XML e, com isso,
indexar toda a informao disponvel de forma precisa. A localizao exata da
informao que se busca estar a cargo de agentes. O conceito de Web semntica prev
ainda o uso de RDF, um padro de descrio, composto por trios de informao, em que
cada unidade ter funo prpria, como sujeito, verbo e objeto, em uma frase.
Para cada diferente significado de uma palavra e sua funo numa frase ser criada uma
identificao (URI). O maior desafio da Web semntica a padronizao desses URIs.
Para isso prev-se o uso de ontologias, que fornecero aos agentes o vocabulrio
necessrio para identificar de modo preciso a informao que se busca.
A tempo: URL significa Uniform Resource Locator, ou Identifier, no caso de URI.
Servem para localizar qualquer recurso na Internet.
4.5 Sintaxe do CSS
A sintaxe do CSS uma sintaxe de marcao, definindo o elemento(s) a ser formatado, a
propriedade e o valor:

body {
font-size : 70%;
color : #000000;
background-color : #F1F1F1;
margin : 0;
}
As informaes sobre os estilos podem ser armazenadas:
Inline ou Em Linha - J unto a uma determinada tag.
Interno - No cabealho de um documento HTML.
Externo Em um documento .css separado vinculado ao documento HTML atravs de
uma referncia externa no cabealho do documento.


4.6 Aplicando Estilos a uma Pgina
Como mencionado, existem 3 formas de aplicar estilos a uma pgina HTML, que
veremos a seguir:
4.6.1 Aplicando Estilos apenas uma Tag HTML Especfica
Para isso utilizamos o parmetro style, que pode ser utilizado por praticamente qualquer
tag HTML

<head>
<title>Utilizando CSS em uma tag HTML</title>
</head>
<body>
<font style=propriedade: valor;>Teste de Estilos</font>
</body>
</html>

Neste caso especfico dispensamos o seletor, pois estamos aplicando o estilo diretamente
em uma tag.
4.6.2 Aplicando Estilos a Toda a Pgina HTML
Neste caso, utilizamos as tags HTML <style>e </style>dentro da seo de cabealho
(<head>) de uma pgina:

<head>
<title>Utilizando CSS em uma pgina HTML</title>

<style type=text/css>
seletor
{
propriedade: valor;
}
</style>

</head>


<body>
</body>
</html>
4.6.3 Utilizando um Arquivo de Estilos Externo
Esta a forma mais utilizada pelos profissionais, pois com ela podemos aplicar diversos
estilos diferentes a diversas pginas HTML.
Primeiramente criado o arquivo de estilos, que deve ser salvo com a extenso .css:

Arquivo 1: estilos.css
seletor
{
propriedade: valor;
propriedade: valor;
}

seletor
{
propriedade: valor;
}
Feito isto, criamos um arquivo HTML que far referncia ao arquivo de estilos que ser
utilizado atravs da tag <LINK>:
Arquivo 2: estilos.html
<head>
<title>Utilizando css em um arquivo externo</title>
<link rel=stylesheet type=text/css href=estilos.css>
</head>
<body>
</body>
</html>
4.7 O Efeito Cascata
Pare para pensar: que estilo ser aplicado, quando h conflito de estilos especificados
(por exemplo: uma regra de estilo determina que os ttulos H1 sero na cor azul e outra
que sero na cor vermelho) para um mesmo elemento HTML?
Aqui entra o efeito cascata, que nada mais , do que o estabelecimento de uma
prioridade para aplicao da regra de estilo ao elemento.


Para determinar a prioridade so considerados diversos fatores, entre eles, o tipo de folha
de estilo, o local fsico da folha de estilo no seu todo, o local fsico da regra de estilo na
folha de estilo e a especificidade da regra de estilo.

A prioridade para o efeito cascata em ordem crescente:

1. folha de estilo padro do navegador do usurio;
2. folha de estilo do usurio;
3. folha de estilo do desenvolvedor;
a. estilo externo (importado ou linkado).
b. estilo incorporado (definido na seo head do documento);
c. estilo inline (dentro de um elemento HTML);
4. declaraes do desenvolvedor com !important;
5. declaraes do usurio com !important;

Assim, uma declarao de estilo com !important definido pelo usurio prevalece sobre
todas as demais, a de mais alta prioridade. Entre as folhas de estilo definidas pelo
desenvolvedor do site, os estilos inline (dentro de um elemento HTML) tem a prioridade
mais elevada, isto , prevalecer sobre a folha de estilo definida na seo head, e, esta
prevalecer sobre uma folha de estilo externa. A prioridade mais baixa para estilos
padro do navegador.
Agora voc j sabe o porqu de temos o "cascata" no nome Folha de estilo em cascata,
traduo de CSS.
4.8 Formas de Utilizao dos Seletores
Como vimos anteriormente, um seletor pode ser o nome de uma tag HTML, um grupo
de tags, uma classe ou um ID. Veremos agora exemplos prticos de como utilizar cada
caso:
4.8.1 Aplicando Estilos a uma Tag:
Primeiro devemos definir qual tag queremos aplicar os estilos. Neste exemplo
alteraremos o estilo das tags <FONT>:



<head>
<title>Alterando o estilo da tag font</title>
font
{
propriedade: valor;
}
</style>

</head>
<body>
<font> Esta tag recebe os estilos definidos no cabealho.</font>
<br><br>
<font> Esta tag tambm recebe os estilos que foram definidos.</font>
</body>
</html>

Note que qualquer tag <FONT> contida nesta pgina automaticamente receber
aplicao dos estilos definidos.
4.8.2 Definindo Estilos para mais um Grupo de Tags
Semelhante ao primeiro caso, sendo que nosso seletor ser uma lista de tags, separadas
por vrgulas (,). Agora veremos como podemos aplicar estilos as tags <FONT>e <P>
utilizando apenas uma definio de estilo:
<head>

font, p
{
propriedade: valor;
}
</style>

</head>
<body>
<font> Esta tag recebe os estilos definidos no cabealho.</font>
<br><br>


<font> Esta tag tambm recebe os estilos que foram definidos.</font>
<p>
Este pargrafo recebe os estilos definidos no cabealho.
Qualquer outra tag p utilizada nesta pgina tambm os receber.
</p>
</body>
</html>
4.8.3 Definindo uma Classe de Estilos
Para definirmos uma classe de estilos, devemos iniciar o seletor por um ponto (.) e a(s)
tag(s) que forem receber estes estilos devem fazer referncia a esta classe atravs do
parmetro CLASS.
Veja no exemplo a seguir a aplicao de uma classe de estilos apenas uma tag
<FONT>:

<head>

.estilo1
{
propriedade: valor;
}
</style>

</head>
<body>
<font class=estilo1> Esta tag recebe os estilos definidos na classe estilo01. Note que o valor do
parmetro class no possui o ponto.</font>
<br><br>
<font> Esta tag no recebe os estilos que foram definidos, pois no possui o parmetro
class.</font>
</body>
</html>



4.8.4 Aplicando Estilos a uma palavra ou a um grupo pequeno de
palavras
Se tiver necessidade de aplicar estilo somente a uma palavra ou a um grupo pequeno de
palavras dentro de um pargrafo, utiliza-se o comando <span>.
Sintaxe: <span [class =class_name]>Texto </span>
Exemplo:
<head>
<title> Uso do Comando SPAN com o atributo Class </title>
<style type = "text/css">
.altcolor {
color:#FF0000}

.destaque {
color:#0000FF;
font-size:14px }
</style>
</head>
<body>

Pode-se inserir quantos comandos SPAN forem necessrios para criar <span class="altcolor">
efeitos visuais </span> diferentes. <br />
Podemos utilizar o comando SPAN para salientar uma <span class="destaque"> palavra.</span>
Tambm til para destacar <span class="destaque"> mais de uma palavra. </span>
</body>
</html>
4.8.5 Definindo um ID de Estilos
Um ID de estilos idntico a uma classe, pois tambm possui a funo de agrupar
diversos estilos em uma nica estrutura nomeada. Existem apenas duas diferenas entre
um ID e uma classe:
- IDs so iniciados pelo caractere sustenido (#).
- IDs so referenciados pelo parmetro ID
Veja no exemplo a seguir a aplicao de um ID de estilos apenas uma tag:
<head>



#estilo1
{
propriedade: valor;
}
</style>

</head>
<body>
<font id=estilo1> Esta tag recebe os estilos definidos no id estilo01. note que o valor do parmetro
id no possui o sustenido.</font>
<br /><br />
<font> Esta tag no recebe os estilos que foram definidos, pois no possui o parmetro id.</font>
</body>
</html>

A tabela abaixo apresenta os principais atributos com suas descries, valores e como
usamos no cdigo:

Atributo Descrio Valores Permitidos Exemplos
background Especifica uma
imagem de
segundo plano
ou cor.
URL ou o cdigo
da cor
{background:#33
CC00}
border Especifica a
lateral da borda
que sofre o efeito
top / left / right /
center
{border-left}
border-color Especifica a cor
da borda.
Nome ou cdigo da
cor.
{border-color:
blue}
border-style Especifica o
estilo da borda.
dotted / dashed /
solid / double /
none / grove / ridge
/ inset / outset
{border-style:
grove}
border-width Especifica a
largura da borda.
thin / thick /
medium
{border-width:
medium}
color Especifica a cor
do texto.
Nome ou cdigo da
cor.
{color: blue}


font-family Seleciona o tipo
de fonte.
Nome da fonte (de
acordo com o
Windows)
{font-family:
courier}
{font-family: arial}
font-size Ajusta o tamanho
da fonte.
points (pt)
inches (in)
centimeters (cm)
pixels (px)
{font-size: 12pt}
font-style Aplica o efeito
itlico.
normal
italic
{font-style: italic}
font-weight Ajusta a
espessura da
fonte.
extra-light
light
demi-light
medium
demi-bold
bold
extra-bold
{font-weight:
bold}
{font-weight:
extra-bold}
line-height Especifica a
distncia entre as
linhas.
points (pt)
inches (in)
centimeters (cm)
pixels (px)
percentage(%)
{line-height: 24pt}
margin-left Ajusta a distncia
da margem da
esquerda.
points (pt)
inches (in)
centimeters (cm)
pixels (px)
{margin-left: 5in}
margin-right Ajusta a distncia
da borda direita
da pgina.
points (pt)
inches (in)
centimeters (cm)
pixels (px)
{margin-right:
1cm}
margin-top Ajusta a distncia
da borda superior
da pgina
points (pt)
inches (in)
centimeters (cm)
pixels (px)
{margin-top: -
20px}


text-align Especifica o
alinhamento do
texto.
left
center
right
{text-align: right}
text-decoration Aplica efeitos no
texto.
none
underline
italic
line-trough
{text-decoration:
none}
text-indent Especifica a
distncia entre o
texto e a margem
esquerda.
points (pt)
inches (in)
centimeters (cm)
pixels (px)
{text-indent:
0.5in}


Unidade5IntroduoaoTableless
Design

Tableless
Problemas no Design com Tabelas
Design Tableless CSS Box Model
Um exemplo de Tableless Design


Unidade 5
Introduo ao Tableless Design
5.1 Tableless
O HTML uma linguagem estrutural, ou seja, - ou deveria ser - usada para estruturar
textos atravs de tags. A tag table deveria ser usada to somente com a finalidade de
apresentar dados dentro de uma tabela com linhas e colunas (tabular data).
Mas desde que as tabelas foram implementadas no HTML elas tm sido amplamente
usadas para montagem de layouts e muito comumente para definir um layout de uma
pgina web em colunas. Ao fato de que este uso das tabelas contraria sua finalidade (seu
propsito semntico) somam-se ainda vrias outras desvantagens, entre elas destaca-se a
dificuldade de um parsing adequado na renderizao das tabelas em determinados
contextos (usurios com necessidades especiais, agentes de usurios ou browsers com
restries).
5.2 Problemas no Design com Tabelas
Podemos enumerar diversos problemas quando utilizamos tabelas para definir o layout
de uma pgina:

Misturar informaes de apresentao com o contedo da pgina.
Isto torna o tamanho desnecessariamente grande, pois os usurios tero que fazer o
download desta informao de apresentao (50 a 80% do tamanho do arquivo), a cada
pgina visitada.
Necessidade de banda do servidor muito maior, principalmente em sites com trfego
intenso. Isto influencia negativamente o curso de hosting.
Alteraes no layout ou na estrutura so extremamente complexas (trabalho manual) e
demoradas, influenciando o custo de manuteno do projeto.
Torna-se complicado manter uma padronizao visual ao longo de um projeto mais
extenso.
Pginas baseadas em tabelas so muito menos acessveis a usurios com necessidades
especiais e, tambm, equipamentos mbile como celulares e PDAs.
5.3 Design Tableless CSS Box Model
A soluo proposta pela W3C e pelo conceito de adoo dos Web Standards a
substituio das tabelas de layout (tabelas aninhadas e imagens Gifs para espaamento)
por containers definidos dentro do conceito ou modelo de caixa do CSS, o CSS Box
Model.


O entendimento do Box Model o primeiro fundamento para desenvolvimento de
layouts via CSS .
Box Model o nome que se d ao conjunto de propriedades CSS que criam uma rea
retangular em torno de um elemento do HTML. Ele composto pelo uso das
propriedades: margin, border, padding (preenchimento interno) e width (largura). O
height (altura) tambm participa do Box Model, embora seja recomendado que o
contedo que define a altura de um elemento.
O Box Model ou Modelo de Caixas foi definido pelo W3C nas recomendaes para o
CSS1 publicadas em 1996. O trecho e a figura a seguir foram extrados da traduo para
o portugus da citada recomendao e definem o Box Model.
"O CSS1 adota como modelo de formatao uma seqncia simples de caixas, na qual
cada elemento formatado ocupa uma ou mais destas caixas. Todas as caixas possuem um
contedo central com reas opcionais adjacentes formando as margens, bordas e
espaadores (padding)."

Quando definimos uma cor ou imagem para background (fundo), ele ser visualizado
somente na rea que compreende o contedo e o padding definido. A rea da margem
no afetada, sendo que o fundo sempre ser transparente.
5.4 Um Exemplo de Tableless Design
importante uma compreenso dos recursos disposio de Web Designer e do
Programador para estruturar um site.
Observe o exemplo abaixo, que visa mostrar um layout completo, ainda que simples,
utilizando a tcnica de Design sem Tabelas:
Tableless1.html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS - Tableless</title>
<style type="text/css">



</style>
</head>
<body>
<div id="topo">
<h3>Empresa de Exportao</h3>
</div>
<div id="conteudoEsq">
<h3>Menu</h3>
<ul>
<li>home</li>


<li>produtos</li>
<li>empresa</li>
<li>contato</li>
</ul>
</div>
<div id="colEsq">
<div id="sepEsqcolCentral">
<div id="colCentral">
<h3>Nossa Empresa</h3>
<p>Nossa empresa oferece todo o tipo de servios de exportao. Exportamos
pregos, parafusos,

computadores, caminhes, e tudo mais que voc pode ter interesse em enviar para fora do pas.
Cobramos barato, garantimos a

entrega e temos os melhores prazos do mercado</p>
</div>
</div>
</div>
</body>
</html>
Observe o resultado no browser e estude com o instrutor como os elementos CSS
definiram o layout da pgina:


Unidade6ConhecendoaInterfacedo
DreamweaverCS5

Sobre o Adobe Dreamweaver
Abrindo o Dreamweaver
rea de trabalho do Dreamweaver
Ferramentas Select, Hand e Zoom
Barra de Ferramentas Standard


Unidade 6
Conhecendo a Interface do Dreamweaver
CS5
6.1 Sobre o Adobe Dreamweaver

O Dreamweaver o software mais utilizado pelos profissionais de webdesign. Com ele,
podemos desenvolver sites com facilidade e tecnologia e poder optar em utilizar tanto
um ambiente para designers quanto um ambiente para desenvolvedores.
O Dreamweaver CS5 est totalmente voltado para a Web 2.0, com suporte ao CSS, a
CMSs como J oomla! e Wordpress e trazendo modelos de sites.
Na tela inicial do Dreamweaver, podemos abrir os ltimos itens que trabalhamos, criar
novas pginas e criar itens a partir de exemplos:

possvel desativar a pgina inicial selecionando a opo: Dont Show Again, na parte
inferior da tela. Caso contrrio, sempre que no houver uma pgina aberta, o
Dreamweaver exibir essa pgina.


6.2 rea de Trabalho do Dreamweaver
A rea de trabalho deste software pode ser personalizada conforme a necessidade do
usurio. Como padro, temos a seguinte apresentao:

- Barra de Aplicativos: A parte superior da janela do aplicativo contm o alternador da
rea de trabalho, os menus e outros controles do aplicativo.
- Barra de ferramentas do documento: Contm botes e menus pop-up que oferecem
visualizaes da janela do documento (como as visualizaes Design e Cdigo), vrias
opes de visualizao e algumas operaes comuns, como a visualizao em um
navegador.;
- Janela do documento: Aparece quando abrimos uma pgina. Essa a rea em que
projetamos a pgina;
- Grupo de painis: Ajudar a monitorar e modificar seu trabalho. Os exemplos incluem
o painel Inserir, o painel Estilos de CSS e o painel Arquivos. Para expandir um painel,
clique duas vezes na aba correspondente.
JANELA
DO
DOCUMENTO
BARRA DE FERRAMENTAS DO
DOCUMENTO
GRUPO DE PAINEIS
PAINEL DE ARQUIVOS


- Painel Properties: Permite visualizar e alterar diversas propriedades do objeto ou
texto selecionado. Cada objeto tem propriedades diferentes. O Painel Properties no
expandido por padro no layout Codificador da rea de trabalho.
- Seletor de tags: Localizado na barra de status, na parte inferior da janela Documento.
Mostra a hierarquia de tags em torno da seleo atual. Clique em qualquer tag da
hierarquia para selecionar a tag e todo seu contedo.
- Painel de Arquivos: Permite gerenciar arquivos e pastas, que podem fazer parte de um
site do Dreamweaver ou estar em um servidor remoto. O painel Arquivos tambm
permite acessar todos os arquivos do disco local, assim como o Windows Explorer
(Windows) ou o Finder (Macintosh).
- Painel Inserir: Contm botes para inserir vrios tipos de objetos em um documento,
como imagens, tabelas e elementos de mdia. Cada objeto uma parte do cdigo HTML
que permite definir vrios atributos medida que so inseridos. Por exemplo, podemos
inserir uma tabela clicando no boto Tabela do painel Inserir. Tambm podemos inserir
objetos usando o menu Inserir em vez do Painel Insert.
6.3 Ferramentas Select, Hand e Zoom
Do lado direito da barra Seletor de tags temos as ferramentas:

Select: permite selecionar elementos na pgina.
Hand: move a pgina quando o zoom est maior que 100%.
Zoom: aumenta a pgina at 6400%. As teclas de atalho CTRL + e CTRL - funcionam
para aumentar ou diminuir o zoom da pgina.
Se o zoom estiver em 400%, por exemplo, podemos dar um duplo clique na ferramenta
Select e a pgina retornar a um zoom de 100%.

6.4 Barra de Ferramentas Standard
Essa barra de ferramentas contm alguns comandos usados com freqncia:

Para habilitar esta barra v at o menu: View > Toolbars > Standard.
Na primeira parte deste grupo de ferramentas temos: New, Open, Browser in Bridge,
Save, Save all e Print Code.
Na segunda parte temos: Cut, Copy e Paste.


E na ltima parte temos os comandos de Undo (desfaz) e Redo (refaz)

6.5 Viso geral da barra de ferramentas de documento
A Barra de Ferramentas Documento contm botes que permitem alternar rapidamente
entre visualizaes diferentes do documento. A barra de ferramentas tambm contm
alguns comandos comuns e opes relacionadas visualizao do documento e sua
transferncia entre sites locais e remotos. A ilustrao abaixo mostra a barra de
ferramentas Documento expandida.

A B C D E F G H I J K L
A. Mostrar visualizao de cdigo B. Mostrar visualizaes de cdigo e do projeto C.
Mostrar visualizao do projeto D. Visualizao dinmica de cdigo E. Verificao de
compatibilidade do navegador F. Visualizao dinmica G. Modo de inspeo H.
Visualizar/depurar no navegador I Auxlios visuais. J. Atualizar visualizao de design
K. Ttulo do documento L. Gerenciamento de arquivos
As seguintes opes aparecem na barra de ferramentas Documento:
Mostrar visualizao de cdigo: Exibe somente a visualizao Cdigo na janela
Documento.
Mostrar visualizaes de cdigo e do projeto: Divide a janela Documento entre as
visualizaes Cdigo e Design.
Mostrar visualizao do projeto: Exibe somente a Visualizao de design na janela
Documento.
Nota: Se estivermos trabalhando com XML, JavaScript, CSS ou outros tipos de arquivo
baseados em cdigo, no poderemos visualizar os arquivos na Visualizao de design e
os botes Design e Dividir sero desativados.
Visualizao dinmica de cdigo: Exibe o cdigo real usado pelo navegador para
executar a pgina.
Verificao de compatibilidade do navegador: Permite verificar se o CSS
compatvel com navegadores diferentes.
Visualizao dinmica: Exibe uma visualizao do documento baseada no navegador,
interativa e no editvel.
Modo de inspeo: Com esta ferramenta, podemos visualizar os arquivos vinculados ao
trabalho para melhor depurao do projeto. Somente ir funcionar depois de configurado
o site trabalhado pelo painel Files.


Visualizar/depurar no navegador: Permite visualizar ou depurar o documento em um
navegador. Selecione um navegador no menu pop-up.
Atualizar visualizao de design: Atualiza a Visualizao de design do documento
depois de serem feitas alteraes na Visualizao de cdigo. As alteraes feitas na
Visualizao de cdigo no aparecem automaticamente na Visualizao de design at
que realizemos determinadas aes, como salvar o arquivo ou clicar nesse boto.
Nota: Tambm so atualizados recursos de cdigo que dependem de DOM (Modelo de
objeto de documento), como a possibilidade de selecionar tags de abertura e
fechamento de um bloco de cdigo.
Opes de visualizao: Permite definir opes para as Visualizaes de cdigo e de
design, incluindo a definio de que visualizao desejamos que aparea por cima da
outra. As opes do menu so vlidas para a visualizao atual: Design, Cdigo ou
ambas.
Ttulo do documento: Permite inserir um ttulo para o documento, a ser exibido na
barra de ttulo do navegador. Se o documento j tiver um ttulo, esse ttulo ser exibido
nesse campo.
Auxlios visuais: Permite usar diferentes auxlios visuais para projetar as pginas.
Gerenciamento de arquivos: Exibe o menu pop-up Gerenciamento de arquivos.
6.5.1 Viso geral da Janela Documento
A J anela Documento mostra o documento atual. possvel selecionar qualquer uma das
seguintes visualizaes:

Visualizao de Design: Um ambiente de design para o layout visual da pgina, a
edio visual e o desenvolvimento rpido do aplicativo. Nessa visualizao, o
Dreamweaver exibe uma representao visual completamente editvel do documento,
semelhante visualizao da pgina em um navegador.
Visualizao de Code: Um ambiente de codificao manual para gravao e edio de
cdigo HTML, J avaScript, de linguagem de servidor (como linguagem PHP ou
linguagem de markup ColdFusion (CFML)) e qualquer outro tipo de cdigo.
Visualizao Split: Permite ver as visualizaes Cdigo e Design para o mesmo
documento em uma nica janela.
Visualizao Live View (visualizao dinmica): De modo semelhante Visualizao
de design, o Live View exibe uma representao realista de como seu documento ser


exibido em um navegador, e permite que interajamos com o documento exatamente da
maneira como faria em um navegador. O Live View no editvel. No entanto,
podemos editar no Code e atualizar o Live View para exibir suas alteraes.
Visualizao Live Code: Disponvel apenas durante a exibio de documento na
Visualizao dinmica. O Live Code exibe o cdigo real que o navegador usa para
executar a pgina, e pode alterar dinamicamente a maneira como interage com a pgina
na Visualizao dinmica.O Live Code no editvel.
Quando uma janela Documento est maximizada (a padro), as abas aparecem na parte
superior da janela, mostrando os nomes de arquivo de todos os documentos abertos. O
Dreamweaver exibe um asterisco aps o nome do arquivo se tivermos feito alteraes
que ainda no foram salvas.
Para acessar um documento, devemos clicar na aba correspondente.
O Dreamweaver tambm exibe a Barra de Ferramentas Arquivos abaixo da aba do
documento (ou abaixo da barra de ttulo do documento, se estivermos exibindo
documentos em janelas distintas). Documentos relacionados so associados ao arquivo
atual, como arquivos CSS ou J avaScript. Para abrir um desses arquivos relacionados na
janela Documento, devemos clicar no respectivo nome de arquivo na barra de
ferramentas Arquivos relacionados.

6.6 Viso geral da barra de ferramentas Padro
A barra de ferramentas Padro contm botes para operaes comuns nos menus
Arquivo e Editar: Novo, Abrir, Navegar no Bridge, Salvar, Salvar tudo, Imprimir
cdigo, Recortar, Copiar, Colar, Desfazer e Refazer. Use esses botes do mesmo modo
como utilizaria os comandos de menus equivalentes.
Para mostrar essa barra, clicar no item de menu View > Toolbars > Standards.

6.7 Viso geral da barra de status
A barra de status, na parte inferior da janela Documento, fornece informaes adicionais
sobre o documento que est sendo criado.


A BC D E F G H
A. Select tag B. Select Tool C. Hand Tool D. Zoom Tool E. Set magnification F. Menu
pop-up Tamanho da janela G. Download Size/Download Time H. Indicador de
codificao
Select tags: Mostra a hierarquia de tags em torno da seleo atual. Clique em qualquer
tag da hierarquia para selecionar a tag e todo seu contedo. Clique em <body>para
selecionar o corpo inteiro do documento. Para definir os atributos class ou ID de uma tag
no seletor de tags, clique com o boto direito do mouse (Windows) ou com a tecla
Control pressionada (Macintosh) na tag e selecione uma classe ou ID no menu de
contexto.
Select Tool: Ativa e desativa a ferramenta Mo.
Hand Tool: Permite clicar no documento e arrast-lo na janela Documento.
Zoom Tool e set magnification: Permite definir um nvel de ampliao para o
documento.
Menu pop-up Tamanho da janela: (No disponvel na Visualizao de cdigo.)
Permite redimensionar a janela Documento para dimenses predefinidas ou
personalizadas.
Download Size/Download Time: Mostra o tamanho aproximado do documento e o
tempo de download estimado da pgina, incluindo todos os arquivos dependentes, como
imagens e outros arquivos de mdia.
Indicador de codificao: Mostra a codificao de texto do documento atual.

6.8 Viso geral do painel Inserir
O painel Inserir contm botes para criar e inserir objetos, como tabelas, imagens e
links. Os botes so organizados em vrias categorias, que podem ser alternadas pela
seleo da categoria desejada no menu pop-up Categoria. Categorias adicionais
aparecem quando o documento atual contm o cdigo do servidor, como documentos
ASP ou CFML.

O painel Inserir est organizado nas seguintes categorias:
Categoria Common Permite criar e inserir os objetos usados com mais freqncia,
como imagens e tabelas.


Categoria Layout Permite inserir tabelas,
elementos de tabelas, tags div, quadros e
widgets do Spry. Podemos tambm escolher
duas visualizaes para tabelas: Padro (opo
padro) e Tabelas expandidas.
Categoria Forms Contm botes para criar
formulrios e inserir elementos de
formulrios, incluindo widgets de validao
do Spry.
Categoria Data Permite inserir objetos de
dados do Spry e outros elementos dinmicos
como conjuntos de registros, regies
repetitivas e formulrios de insero e
atualizao de registros.
Categoria Spry Contm botes para criar
pginas do Spry, incluindo objetos de dados e
widgets do Spry.
Categoria InContext Editing Contm botes
para criar pginas do InContext Editing,
incluindo botes para Regies editveis,
Regies repetitivas e gerenciamento CSS.
Categoria Text Permite inserir uma variedade
de tags de formatao de texto e de lista,
como b, em, p, h1 e ul.
Categoria Favorites Permite agrupar e
organizar os botes do painel Inserir usados
com mais freqncia em um lugar comum.

6.9 Viso geral do painel Arquivos
Use o painel Arquivos para visualizar e gerenciar os arquivos no site do Dreamweaver.
Ao visualizar sites, arquivos ou pastas no painel Arquivos, podemos alterar o tamanho
da rea de visualizao e expandir ou reduzir o painel Arquivos. Quando est reduzido,
o painel Arquivos exibe o contedo do site local, o site remoto, o servidor de teste ou o
repositrio SVN como uma lista de arquivos. Quando expandido, ele exibe o site local e
o site remoto, o servidor de teste ou o repositrio SVN.


Para os sites do Dreamweaver, tambm podemos
personalizar o painel Arquivos alterando a
visualizao (site local ou remoto) que aparece por
padro no painel reduzido.

6.10 Viso geral do painel Estilos CSS
O painel Estilos CSS permite rastrear as regras e propriedades CSS que afetam o
elemento de pgina selecionado atualmente (modo Atual) ou as regras e propriedades
que afetam o documento inteiro (modo Tudo). Um boto de alternncia na parte superior
do painel Estilos CSS permite alternar entre os dois modos. O painel Estilos CSS
tambm permite modificar propriedades CSS no modo Tudo e no modo Atual.

Para redimensionar qualquer painel, arraste as bordas
entre os painis. No modo Atual, o painel Estilos CSS
exibe trs painis: o painel Resumo para seleo que
exibe as propriedades CSS da seleo atual do
documento, o painel Regras que exibe o local das
propriedades selecionadas (ou regras em cascata para a
tag selecionada, dependendo da seleo) e o painel
Propriedades que permite editar propriedades CSS para
a regra que define a seleo. No modo Tudo, o painel
Estilos CSS exibe dois painis: o painel Todas as
regras (na parte superior) e o painel Propriedades (na parte inferior). O painel Todas as
regras exibe uma lista de regras definidas no documento atual, bem como as regras
definidas nas folhas de estilo anexadas ao documento atual. O painel Propriedades
permite editar propriedades CSS para todas as regras selecionadas no painel Todas as
regras.
Qualquer alterao efetuada no painel Proprieties aplicada imediatamente, permitindo
que seja visualiza enquanto trabalhamos.


Unidade7IniciandooProjetodeum
Website

Definindo um Site Local
Criando uma nova pgina HTML
Salvando uma pgina HTML
Preferncias do browser


Unidade 7
Iniciando o Projeto de um Website
7.1 Definindo um Site Local
No Dreamweaver, o termo site refere-se a um armazenamento local ou remoto para os
documentos que pertencem a um site. Um site do Dreamweaver facilita a organizao e
o gerenciamento de todos os documentos da Web, o carregamento do seu site em um
servidor Web, o rastreamento e a manuteno de links, alm do gerenciamento e o
compartilhamento de arquivos. Devemos definir um site para aproveitar todos os
recursos do Dreamweaver.
O Dreamweaver define uma estrutura muito parecida com a estrutura de pastas para
organizar os arquivos de um website. Uma maneira mais eficiente de gerenciar os
arquivos de um site.
Para criarmos um Site no Dreamweaver, devemos clicar no item de menu: Site >
Manages Sites ou acesse o atalho na barra de menus.

Na janela Manage Sites, clicar no boto New > Site.
Na primeira tela, estaremos em Site:


- Site Name: o nome do site;
- Local Root Folder: localizao, no disco rgido, da pasta que contm os arquivos do
site;

Em Server:
Se necessrio incluir as configuraes de FTP para upload do site, ser neste painel.
Em Advanced Settings:


Em Local Info:
- Default Images Folder: pasta que o Dreamweaver usa para armazenar as imagens
adicionais em nosso site;
- Links relative to: Se escolhermos a opo Document, os links ficaro relativos aos
documentos cirados, diferente da opo Site Root que ficar relacionado ao caminho do
site.
- HTTP Address: (opcional) a URL do site. O Dreamweaver usa esse endereo para
verificar os links que utilizam URLs absolutas;
- Case-sensitive links: essa opo verifica se as letras nos nomes de arquivos contidos
em seus links so exatamente iguais as dos arquivos vinculados;
Por exemplo, o nome de arquivo arquivo.html no igual a Arquivo.html
Geralmente, marcaremos essa opo; no entanto, em sites muito grandes, a recriao do
cache pode tornar as operaes mais lentas.
- Cache: Quando marcada, gerado um cache local, o que agiliza as tarefas de
gerenciamento do site.

Em Cloaking:


- Enable Cloaking: Permite excluir pastas e arquivos especificados de todas as
operaes do site, a exemplo de arquivos de extenso .FLA e .PSD

LABORATRIO
TAREFA 1
Fomos contratados para criar o site AlfaAdventure, uma agncia especializada em eco
turismo.
Depois de criar o layout utilizando o Fireworks e fatiar as imagens necessrias, devemos
comear o trabalho no Dreamweaver.
Primeiramente devemos criar a estrutura do site.
1. Nome: AlfaAdventure;
2. Local root folder: pasta Dreamweaver >AlfaAdventure;
3. Default images folder: pasta: Dreamweaver >AlfaAdventure >imagens
4. Marcar as opes: use case-sensitive links e enable cache.
Podemos observar que no painel Files j teremos nossos arquivos visveis:

7.2 Criando uma Nova Pgina HTML
Para criar um novo documento, devemos clicar na coluna Create New escolhendo o
item HTML:


aberto um documento HTML em branco.
Para adicionarmos um ttulo a este documento novo, utilizamos a barra de ferramentas
do documento.

7.3 Salvando uma Pgina HTML
Para salvar um arquivo, devemos ir ao File > Save As.
Podemos salvar arquivos HTML utilizando a extenso .html ou .htm. Por padro o
Dreamweaver salva utilizando a extenso .html.
Para alterar esta preferncia, devemos ir at opo Edit > Preferences > Category New
Document.


Obs.: Se desejarmos salvar todas as pginas abertas utilizamos File > Save All.
7.4 Preferncias do Browser
O teste no navegador essencial para visualizarmos como est ficando nosso website,
ou o Dreamweaver oferece o boto Live View para visualizar rapidamente como ficou
pgina ativa. Existe um grande nmero de browsers na Web. Podemos definir no
Dreamweaver quais queremos visualizar em nossas pginas.
Clicar no menu: Edit > Preferences, escolher a opo Preview in Browser ou no atalho
na Barra de Ferramentas do Documento.



Escolha o navegador que voc deseja ser o primrio e tambm o secundrio. Nunca
deixe de testar em no mnimo dois navegadores.
No sinal de (+) ao lado da palavra Browsers podemos adicionar mais browsers (no
mximo 20), bastando apenas especificar os campos na janela Add Browser:

Para retirar um browser da lista s clicar no sinal de (-) .
Clicar em OK e nossas alteraes estaro salvas.

LABORATRIO
TAREFA 1


1. Criar um arquivo em branco e salvar como agencia.html
2. Ttulo da pgina: AlfaAdventure
3. Utilizar o boto Live View ou a tecla F12 para ver como ficou a pgina.


Unidade8 Adicionandocontedoa
umWebsite

Importando arquivos de texto
Controlando a estrutura do documento
Adicionando caracteres especiais


Unidade 8
Adicionando Contedo a um Website
8.1 Importando Arquivos de Texto
Como Web Designer, uma das principais tarefas inserirmos textos em uma pgina e
format-la para que fique legvel para os usurios.
No Dreamweaver podemos importar um arquivo do Word, aproveitando a estrutura de
pargrafos e estilos.
Selecionar File > Import > Word Document e escolher o texto que desejado.
Deixar marcada a opo: Text, structure, basic formating (bold, italic) que trar o
texto somente com o formato: bold (strong) e italic (i).
Se desmarcarmos a opo Clean up Word Paragraph Spacing, nosso texto vir com a
tag <p>indicando os pargrafos que foram feitos no Word. Se deixarmos marcada esta
opo o texto vir separado com a tag <br />.
Deixe desmarcada a opo Clean up Paragraph Spacing.
Importante: Os comandos Import Word ou Excel estaro desabilitados se o Word ou
Excel no estiverem instalados na mquina.

LABORATRIO
TAREFA 1
1. Abrir o arquivo agencia.html dentro da pasta site.
2. Deixar o cursor posicionado na primeira linha deste documento na parte do design:

3. Importar o arquivo Agencia.doc da pasta textos;


4. Salvar o arquivo;

8.2 Controlando a Estrutura do Documento
Aps colocarmos o texto em uma pgina, passamos algum tempo estruturando suas
informaes. Podemos estruturar o contedo usando:
8.2.1 Ttulos
Separa as sees do contedo. H seis nveis de ttulos, cada um com um tamanho
diferente. Esse tamanho varia sempre do maior para o menor:


Para formatar uma linha de texto como um ttulo, devemos selecionar o texto e escolher
o nvel do titulo no menu Format, no Painel Properties:

No possvel aplicar um ttulo a uma palavra ou frase apenas, em um determinado
bloco de texto. Por isso, podemos posicionar o cursor do mouse em qualquer lugar
dentro do texto e alterar sua formatao, no sendo necessrio selecionar todo o bloco de
texto.
A criao de um ttulo envolve o texto com as tags de ttulo HTML: <h1></h1>at
<h6></h6>.

LABORATRIO
TAREFA 1
1. Abrir o arquivo agencia.html.
2. Inserir um pargrafo na primeira linha deste documento e escreva: Agncia


3. Formatar este novo pargrafo como Heading 1.
Veja como ficou nosso arquivo:

4. Salvar o arquivo.
8.2.2 Pargrafos
Sempre que pressionarmos "Enter" na pgina HTML ser criado um novo pargrafo.
Um pargrafo destacado por uma quantidade de espao definido acima e abaixo do
texto. Quando ele exibido no navegador, o texto quebrado de acordo como tamanho
da janela deste navegador.
medida que o usurio aumenta ou diminui o tamanho da janela, o texto flui para se
acomodar.


A criao de pargrafos no Dreamweaver envolve o texto com as tags de HTML: <p>
</p>.
8.2.3 Quebra de Linha
As quebras de linha so utilizadas para inserir uma nova linha, no um novo pargrafo,
dentro de um bloco de texto.
Diferentemente de um pargrafo, h uma quantidade menor de espaamento dentro de
uma quebra de linha. Assim, uma quebra de linha til para manter juntas as
informaes relacionadas.
Esse recurso ajuda a exibir endereos, por exemplo.

LABORATRIO
TAREFA 1
1. No mesmo arquivo (a.html) deixar o cursor do mouse no ltimo pargrafo do
documento:


2. Digitar: Avenida Santa Isabel n100. Ao invs de pressionarmos "Enter", pressionar
SHIFT +ENTER para inserir uma quebra de linha.
3. Na linha seguinte digitar: Bairro So Geraldo - Primavera. Pressione SHIFT +
ENTER.
4. Na outra linha digite: Fone (34) 3333.4444.
Veja como ficaro nossas linhas:

5. Salvar o documento.
8.2.4 Listas
Podemos utilizar trs tipos de listas em HTML:
- Listas no-ordenadas: so freqentemente chamadas de listas com marcadores.
Para formatarmos a lista corretamente, cada item da lista, deve estar em um pargrafo
separado.
- Listas ordenadas: so as listas que permitem numerar os itens. Por exemplo, podemos
ao invs de colocar os marcadores na lista anterior, numerar item a item
- Listas de definies: uma lista formada por vrios termos e suas respectivas
definies.


Para que essa formatao funcione, o termo e a respectiva definio devem estar (cada
um) em um pargrafo separado.
8.2.4.1 Criao de uma nova lista
No documento do Dreamweaver, colocamos o ponto de insero onde desejamos
adicionar uma lista e devemos seguir um destes procedimentos:
No Painel Properties HTML, clicar no boto Unordered List ou Ordered List.

Selecionar Format > List e, em seguida, selecionar o tipo de lista desejada: Unordered
List (com marcadores), Ordered List (numerada) ou Definition List.
O caractere esquerda do item de lista especificado aparece na janela Documento.
Digitar o texto do item de lista e pressionar ENTER para criar outro item de lista.
Para concluir a lista, pressionar ENTER duas vezes.

8.2.4.2 Criao de uma lista usando um texto existente
Selecionamos uma srie de pargrafos para transformar em uma lista.
No Painel Properties do HTML, clique no boto Unordered List ou Ordered List ou
selecionar Format > List e selecionar o tipo de lista desejada: Unordered List (com
marcadores), Ordered List (numerada) ou Definition List.
8.2.4.3 Mudando as propriedades de uma lista
possvel aplicar dois estilos diferentes de marcadores a listas no-ordenadas: Boletim
(crculo) e Square (quadrado).
Posicionar o cursor em um item e clicar no boto List Item, localizado no Painel
Properties.


Podemos aplicar estilos diferentes de numerao a nossa lista ordenada:
Posicionar o cursor do mouse em uma lista ordenada e clicar no boto List Item no
Painel Properties.
No menu pop-up New style escolher o estilo que deseja usar:

8.2.4.4 Remover uma lista
Se quisermos remover a lista do texto, basta selecionar o texto (ou posicionar o cursor) e
clicar no menu: Format > List > None ou clicar, novamente, em Unordered List ou
Ordered List no Painel Properties.

LABORATRIO
TAREFA 1
1. Criar um novo arquivo HTML e salvar como: faleconosco.html na raiz da pasta site.
2. Title: AlfaAdventure - Fale Conosco
3. Posicionar o cursor do mouse na primeira linha do documento e importar o texto Fale
Conosco.doc que est dentro da pasta textos.


Deixar desmarcada a opo: Clean up Word pargrafo spacing.

4. Selecionar as duas linhas que contm e-mails e crie uma lista no-ordenada (com
marcadores).

5. Mudar os marcadores para Square.


8.3 Adicionando Caracteres Especiais
Algumas vezes precisamos usar caracteres que no esto acessveis no teclado. Para
isso, devemos ir at o item de menu Insert > HTML > Special Characters e selecionar
o caracter desejado.
Podemos obter mais caracteres especiais selecionando a opo: Other:


LABORATRIO
TAREFA 1
1. Abrir o arquivo agencia.html
2. No ltimo pargrafo digitar: 2010 AlfaAdventure.
3. Posicionar o curso antes da palavra AlfaAdventure e adicionar o caracter de
Copyright (Insert > HTML > Special Characters > Copyright).
4. Veja como ficou o texto:



Unidade9AplicandoFolhasdeEstilo
emCascata(CSS)

Criando estilos
Usando Pontos, Pixels ou Ems para tamanhos de fontes
Editando regras de estilo
Criando estilos de classe
Anexando folhas de estilos externas
Duplicando estilos
Criando estilos avanados
Criando uma folha de estilo externa


Unidade 9
Aplicando Folhas de Estilos em Cascata
(CSS)
9.1 Criando Estilos
A especificao Cascading Style Sheets (CSS) para pginas HTML permite definir o
visual do nosso contedo.
A CSS proporciona mais flexibilidade e controle da aparncia da pgina do que o
HTML puro, ou seja, mudando um atributo de um estilo formatamos, imediatamente,
todo o texto controlado por este atributo.
Na CSS temos os seguintes termos:
- Regra de estilo: um grupo de propriedades de formatao identificadas por um nome
nico, controla a formatao do texto.
- Folha de estilo: um grupo de estilos que definem a aparncia das pginas na Web.
Para trabalharmos com CSS no Dreamweaver, temos duas opes:
O Painel CSS Styles

O CSS no Painel Properties.



No modo All, o painel CSS Styles exibe dois painis: o painel All Rules na parte
superior e o painel Properties na parte inferior.
No painel Properties, podemos editar ou adicionar novas propriedades CSS para
qualquer regra de estilo selecionada, no painel Rules.
Clicar no boto New CSS Rule , localizado na parte inferior do painel CSS Styles.

A caixa de dilogo New CSS Rule permite criar quatro tipos de regras CSS:
- Class: para definir um estilo e aplic-lo a qualquer texto selecionado;
- ID: idem a class;
- Tag: para definir o modo de exibio de texto dentro de uma tag HTML;
- Compound: para definir a formatao de uma combinao especifica de tags ou para
ID.
Dependendo da opo selecionada, informar o nome ou apenas selecionar a tag a ser
definida os estilos CSS.
Na opo Rule Definition:
- This document only: cria a nova regra apenas para este documento;


- New Style Sheet File: cria a nova regra numa folha de estilo. Neste passo, devemos
informar o arquivo ou cri-lo se no existir.

Depois de clicarmos no OK, devemos informar todas as formataes para esta regra.
Na caixa de dilogo CSS Rule Definition o Dreamweaver oferece diversas opes:


TYPE: atributos da fonte;

Font-family: define o nome da fonte;
Font-size: tamanho das fontes nas medidas px, pt, em, cm;
Font-weight: define a espessura de uma fonte;
Font-style: define o estilo da fonte;
Font-variant: exibe texto com fonte normal ou small-caps (letras minsculas
convertidas em maisculas).
Line height: define a distncia entre as linha;
Text-transform: controla o formato das letras de um elemento (
maiscula/minscula)
Text-decoration: decorao do texto;
Underline: texto sublinhado;
Overline: texto sobrelinhado;
Line-through: texto com uma linha em cima;
Blink: faz o texto piscar (no funciona no IE);
None: nenhuma decorao;


Color: define a cor do texto;

BACKGROUND: cor ou imagem e outras propriedades do fundo;

Background-color: cor do fundo;
Background-image: imagem de fundo;
Background-repeat: define se uma imagem ser repetida no plano de fundo, e
como isso ser feito;
Background-attachment: define se a imagem de fundo permanece fixa ou
paginada com barra de rolagem;
Background-position (X): onde a imagem de fundo posicionada na horizontal;
Background-position (Y): onde a imagem de fundo posicionada na vertical;



BLOCK: alinhamento e recuo do texto, juntamente com outras propriedades do bloco
de texto;

Word-spacing: aumenta ou diminui o espao entre palavras;
Letter-spaccing: aumenta ou diminui o espao entre os caracteres;
Vertical-align: define o alinhamento vertical de um elemento;
Text-align: define o alinhamento do texto;
Text-indent: indenta a primeira linha de um texto em um elemento;
White-space: define como os espaos em branco dentro de um elemento so
tratados;
Display: define se/como um elemento ser exibido;



BOX: margens e preenchimentos ao redor do texto ou imagem;

Width: define a largura do elemento;
Height: define a altura do elemento;
Float: define onde um elemento ser exibido em relao a outro elemento;
Clear: define qual(is) lado(s) de um elemento no permite(m) a presena de outros
elementos flutuantes;
Padding: define o espao que existe entre um elemento e as bodas da clula que o
contm;
Margin: define o espao que contorna um elemento;



BORDER: define uma borda ao redor do texto ou imagem;

Style: define o estilo da borda;
Width: define a largura da borda;
Color: define a cor da borda;



LIST: Muda o marcador e sua posio;

List-style-type: define o tipo de marcador para os itens da lista;
List-style-image: define uma imagem como marcador de lista;
List-style-Position: define onde o marcador do item da lista ser posicionado em
relao lista.



POSITIONING: define o posicionamento exato do texto na pgina;

Position: posiciona um elemento em posio esttica, relativa, absoluta ou fixa;
Width: define a largura do elemento;
Height: define a altura do elemento;
Visibility: define se um elemento ser visvel ou no em uma pgina;
Z-Index: define a posio de um elemento dentro de uma fila de elementos;
Overflow: define o que acontece com o contedo de um elemento caso ele
ultrapasse sua rea;
Placement:
Clip: define a forma de um elemento. O elemento reduzido a esse formato e s
ento exibido.



EXTENSIONS:

Page-break-before: define uma quebra ao imprimir depois do objeto controlado
pelo estilo;
Page-break-after: define uma quebra ao imprimir antes do objeto controlado pelo
estilo;
Visual Effect (Cursor): define o tipo de cursor que ser exibido;
Visual Effect (Filter): define filtros que permitem alterar o nvel de
transparncia/opacidade de um elemento;
Importante: nem todos os navegadores suportam as opes contidas na
categoria Extensions. Por isso importante testarmos antes de publicar
nosso site.
9.2 Margin e Padding Unificando o visual independente do
navegador
Um grande problema que ocorre em alguns sites que as margens ou distncia entre os
elementos so diferentes quando so abertos em navegadores diferentes. Uma tag H1
pode ser interpretada no Internet Explorer de uma maneira diferente que no Mozilla
Firefox.


Para solucionar isto utilizamos uma configurao que zera todas as margens e
espaamentos das tags, j que este geralmente o ponto que os navegadores no mantm
padro.
Para tanto, siga o exerccio abaixo para fazer com que todos os elementos fiquem com
margin e padding igual a 0 (zero)

LABORATRIO
TAREFA 1

1. Retornar ao arquivo: agencia.html
2. Criar uma nova regra, escolhendo no tipo de seletor: Compound, e no nome do
seletor digite: * (asterisco), que significa todos.

3. Definir a regra num novo arquivo de Folha de estilos com o nome de estilo.css
dentro da pasta css;
4. Entre na categoria Box e digite 0 (zero) para margin e padding:


Pronto.
9.3 Usando Pontos, Pixels ou Ems para Tamanhos de Fontes
Ao modificarmos o tamanho de uma fonte, podemos observar que temos vrias opes
de medida.
9.3.1 Tamanhos Relativos
xx-small xx-large: define as fontes em relao ao tamanho de fonte do
navegador;
ems e exs: em relao ao elemento pai;
porcentagem: em relao ao texto ao redor.
A acessibilidade um aspecto importante em uma pgina, por isso recomenda-se usar
ems para tamanhos de fonte. Ems so dimensionados de modo que o tamanho da fonte
seja relativa ao elemento pai (body).
O problema na ems a perda de controle sobre a aparncia exata da pgina. Alguns
usurios podem ter tamanho padro maior ou menor do que aquele que costumamos
utilizar.


9.3.2 Tamanhos Absolutos
Pontos e picas: unidades de impresso;
Pixels: em relao resoluo da tela;
Polegadas, centmetros e milmetros: unidades de comprimento.
Pontos so unidades recomendadas para serem utilizadas em fontes de estilo de
impresso. Pixels so unidades baseadas na resoluo da tela.
A desvantagem de usar pixels que os usurios no podero ajustar o tamanho da fonte
em seus navegadores.

LABORATRIO
TAREFA 2

5. Retornar ao arquivo: agencia.html
6. Criar uma nova regra para a tag body;
7. Definir a regra no arquivo de Folha de estilos com o nome de estilo.
8. Definir as formataes da Categoria Type conforme a figura abaixo



Obs.: Aps anexarmos uma folha de estilo num arquivo HTML, o Dreamweaver mostra
o arquivo CSS anexado ao lado de uma opo cdigo fonte do arquivo ativo.

6. Criar uma nova regra para a tag p;
7. Definir as formataes da Categoria Block conforme a figura abaixo:


8. Configure as margens entre os pargrafos da seguinte forma:

9. Salvar todos os arquivos (File >Save All).


9.4 Editando Regras de Estilo
Aps criarmos uma folha de estilo, podemos facilmente adicionar ou alterar os estilos.
Duplo clique em cima da regra selecionada.
Podemos, ainda, selecionar a regra e editar suas propriedades no Painel Properties:

Ou selecionar a regra e clicar no boto Edit Rule .
No painel CSS Styles temos algumas opes de visualizao que so teis na edio de
regras de estilos:

- Show category view: mostra a visualizao por categorias;
- Show list view: mostra a visualizao por listas;
- Show only set properties: mostra apenas as propriedades definidas.
9.5 Criando Estilos de Classe
Os estilos de classe so os nicos tipos de estilos CSS que podem ser aplicados a
qualquer texto em um documento, mesmo que as regras de tags tambm controlem esse
texto.
Por exemplo, se criarmos uma regra para de tag para o texto com nvel de ttulo
Heading1, tambm poderemos selecionar uma palavra dentro deste texto e aplicar um
estilo de classe. A partir de ento, a formatao do estilo da classe ignorar o estilo de
tag na palavra selecionada.


Para criar uma classe no Dreamweaver, devemos criar uma nova regra de estilo clicando
no boto: New CSS Rule.
Selecione a opo Class em Selector Type.

Digitar o nome para a classe no campo Selector Name e definir onde ser criada esta
regra (somente neste documento ou numa folha de estilo)
Definir as formataes para esta classe e OK.
Os estilos de classe sempre comeam com um ponto.
A seguir, devemos aplicar esta classe a um texto ou objeto no arquivo HTML atravs do
Painel Properties, no item Class selecionar a classe desejada.



LABORATRIO
TAREFA 3
1. Retornar ao documento agencia.html.
2. Criar uma nova regra de estilo clicando no boto: New CSS Rule.
3. Selecionar a opo Class em Selector Type. Digitar o nome da classe de destaque.
4. Definir que a regra de estilo deve estar incorporada a folha de estilo externa
estilo.css.

5. Clicar em OK. Na janela CSS Rule Definition, marque as opes como na imagem:


6. Para aplicar o estilo de classe, selecionar o texto AlfaAdventure que est no primeiro
pargrafo do documento.
7. No Painel Proprieties, no item Class selecione o realcado.


Pronto, nosso texto, previamente selecionado, j est com o estilo de classe aplicado.
8. Aplicar este estilo a todos os textos AlfaAdventure do documento.
9.6 Anexando Folhas de Estilos Externas
Folhas de estilos so arquivos com extenses .css que contm regras de estilos.
possvel anexar uma ou mais folhas de estilos a uma pgina. Exceto para os estilos de
classe, as regras de estilo so aplicadas automaticamente a esse documento.
O arquivo .css da folha de estilo externa dever ser vinculado ao documento HTML,
clicando no boto Attach Style Sheet, localizado no final deste painel CSS Style:

Tambm, podemos anexar uma folha de estilos
pelo Painel Properties, selecionando a opo
Attach Style Sheet no menu pop-up Style:

Na caixa de dilogo Attach External Style Sheet,
clicar em Browse e selecionar o folha de estilos
desejada. Na opo Media, selecionar a mdia que
ser aplicada os estilos.



O tipo de mdia (media) especifica o modo como o documento ser apresentado em
diferentes mdias. Suas opes so:
- All: adequada a todos os dispositivos;
- Aural: voz;
- Braille: para dispositivos de leitura ttil pelo mtodo Braille;
- Handheld: PDA, tela pequena, largura de limitada;
- Print: para material impresso;
- Projection: para projetores;
- Screen: para telas de computador;
- TTY: terminais oi dispositivos portteis com capacidade de exibio limitadas;
- TV: dispositivos do tipo televiso.
Assim que uma folha de estilos estiver anexada, o arquivo constar no painel CSS Styles
e o arquivo fonte ao lado do arquivo fonte HTML.

LABORATRIO
TAREFA 4
1. Abrir o arquivo faleconosco.html
2. Anexar o arquivo de folha de e
3. stilo chamado estilo.css clicando no boto Attach Style Sheet, localizado no final do
painel CSS Style.


4. Na caixa de dilogo Attach External Style Sheet, clicar em Browse e selecionar o folha
de estilos estilo.css. Na opo Media selecionar screen:

5. Salvar seu arquivo.


9.7 Duplicando estilos
No Dreamweaver podemos aproveitar um estilo j criado e aplic-lo a outro seletor
HTML ou classe.
Devemos clicar com o boto da direita sobre o seletor a ser duplicado e selecionar a
opo Duplicate.

Aps devemos definir qual ser o elemento que utilizar as mesmas formataes do
estilo duplicado.


LABORATRIO
TAREFA 5
Para aproveitarmos as margens utilizadas na configurao da tag p, duplicaremos esta
para a configurao da tag h1, e aps realizaremos algumas alteraes na configurao
copiada.
1. Abrir o arquivo agencia.html.
2. No painel CSS Styles, clicar com o boto da direita sobre o estilo p, selecionar
Duplicate.
3. Na opo Selector Name, selecionar a tag h1.
4. OK.
5. Devemos alterar a regra da tag h1, adicionando novas configuraes, Edite as seguintes
configuraes do h1 criado:


6. Salvar todos os arquivos.
9.8 Criando Estilos Avanados
Os seletores de pseudo-elementos servem para especificar o estilo para parte de um
bloco de texto como, por exemplo, a primeira letra de um pargrafo.

9.8.1 exemplo de pseudo-elemento :
p:first-line controla a formatao da primeira linha de texto da tag especificada.
Temos, tambm, os seletores de combinao que podemos criar digitando uma
combinao de tags. Temos dois tipos que so:
- Contextual: especifica uma regra de estilo aplicada a uma tag somente quando
aparecer no contexto de outra tag especfica. Deve haver um espao entre essas tags.
Ex: td p strong
No exemplo, a regra de estilo s aplicada ao texto contido em um tag <strong>dentro
de uma tag <p>que esta dentro de uma tag <td>.


- Group: especifica uma nica regra de estilo a ser aplicada a um grupo de tags. Cada
tag ser separada por uma vrgula.
Ex: p,td,li
No exemplo, a regra de estilo aplicada a tag de pargrafo (<p>), a tag de dados de
tabela (<td>) e a tag de item de lista (<li>).
9.9 Criando uma Folha de Estilos Externa
Anteriormente criamos uma folha de estilo no momento que estvamos criando um regra
de estilo, mas o Dreamweaver permite criar a folha de estilo primeiramente.
Clicar no menu File > new e selecionar no item Page Type a opo CSS. Clique no
boto Create:

Selecionar File > Save e salvar o arquivo dentro da pasta CSS com o nome desejado.
O Dreamweaver adiciona automaticamente a extenso .css ao nome do arquivo.
Podemos aproveitar estilos que j foram definidos a outras folhas de estilos, utilizando o
comando copiar/colar.


Dica: Selecionado uma regra de estilos e clicando com o boto direito do mouse temos
algumas opes:

A opo Move CSS Rules, move a regra selecionada para outra folha de estilos que j
tenhamos criada. Basta selecionar o boto Browse e escolher o arquivo:

9.9.1 A Barra de Ferramentas Style Rendering
A barra de ferramentas Style Rendering contm botes para exibir a pgina, usando
tipos de mdias diferentes e apresentando as configuraes de pseudoclasses do css.
Selecione o menu: View > Toolbars > Style Rendering para ativarmos esta barra:

LABORATRIO
TAREFA 6
1. Criar um novo arquivo CSS e salvar como estilo_print.css, dentro da pasta css;
2. Abrir a folha de estilos estilo.css.


3. Selecionar a regra da tag p, copiar e colar dentro da folha de estilos
estilo_print.css.

4. Selecionar a tag p no arquivo estilo_print.css e editar suas definies como na
imagem:


5. Salvar o arquivo estilo_print.css

TAREFA 7
1. Abrir o arquivo agencia.html;
2. Clicar no boto Attach Style Sheet e escolher o folha estilo_print.css selecionando o tipo
de mdia para print:

3. Clicar no boto Render Print Media Type na barra de ferramentas Style Rendering
(Ver as mudanas na visualizao do documento).


4. Agora, clicar no boto Render Screen Media Type (Ver que nosso documento
voltou ao modo de exibio screen).
6. Abrir o arquivo: faleconosco.html e anexe folha de estilo estilo_print.css selecionando
o tipo de mdia print.
7. Ao final teremos os dois nossos arquivos html com uma folha de estilo com mdia screen
e outra com a mdia print.


Unidade10Inserindodiferentes
mdiasnoSite

Imagens na Web
Usando a barra de insero para imagens
Redimensionando uma imagem
Alinhamentos e espaamentos em uma imagem
Usando o Painel Assets
Inserindo um arquivo do Flash
Adicionando um Vdeo do Flash


Unidade 10
Inserindo Diferentes Mdias no Site
10.1 Imagens na Web
As imagens proporcionam vida, interesse e funcionalidade as pginas da Web. Elas
esto disponveis em vrios formatos, mas existem trs formatos principais que so:
Formato JPEG (extenso.jpg)
O formato J PEG (J oint Pictures Expert Group) um tipo de arquivo para
armazenamento de imagens que trabalha com o esquema de cores de 24bits, ou seja,
aceita 16,8 milhes de cores. um dos formatos de imagens mais populares e isso se
deve capacidade de formar imagens fiis original.
O J PEG utiliza um algoritmo de compactao que se baseia na capacidade do olho
humano. Sabendo-se que o J PEG pode trabalhar com at 16,8 milhes de cores, o olho
humano no capaz de enxergar todas elas de uma vez. Assim, possvel tirar uma srie
de informaes que representam cores em imagens e manter apenas aquelas visveis ao
olho humano, esse processo conhecido como compresso.
Este formato de imagem pode ter diferentes nveis de compresso. Quanto maior a
compresso, menor ser o tamanho do arquivo o que deixar a imagem com uma
qualidade baixa. Menor a compresso, maior ser o tamanho do arquivo e ter uma
qualidade alta. Toda vez que o J PEG for salvo perder qualidade.

Formato GIF (extenso.gif)
O formato GIF (Graphics Interchange Format) um tipo de arquivo para imagens que
trabalham com uma paleta de no mximo 256 cores, o que o torna um formato de
imagem bastante reduzido. Isso faz com que o GIF no seja recomendvel para figuras
que precisam de aproximao com a realidade, a no ser que a imagem seja em preto e
branco. Devido a esta caracterstica, o uso deste formato mais voltado para cones ou
imagens que no precisam de muitas cores, como logotipos, por exemplo.
Apesar de trabalhar com um baixo nmero de cores, o GIF muito utilizado pela sua
capacidade de ter o fundo transparente e por aceitar que uma seqncia de imagens
sejam salvas em um nico arquivo, onde cada imagem surge no lugar da anterior aps
um tempo pr-determinado, isso d a sensao de animao. O GIF utiliza um formato
de compresso que no altera a qualidade da imagem a cada salvamento e aceita o
entrelaamento.

Formato PNG (extenso.png)


O formato PNG (Portable Network Graphics) consegue trabalhar com esquema de cores
de 24 bits, ou seja, 16,8 milhes de cores. Sua compresso mais mais eficiente e no
proporciona perde de qualidade da imagem a cada salvamento. Possui o recurso da
transparncia como o formato gif.
Este formato eficaz na compactao de imagens de cor slida e na conservao de
detalhes de nitidez. O formato PNG - 8 utiliza uma paleta de 256 cores para representar
uma imagem; o formato PNG - 24 utiliza uma paleta de 256 cores.
10.2 Usando a Barra de Insero para Imagens
Para inserir uma imagem podemos utilizar a barra de insero.
Clicar em Image e selecionar Image no menu pop-up, escolher a imagem desejada.

Definir o texto alternativo e clicar em OK.



10.2.1 Texto Alternativo das imagens
O texto alternativo das imagens tem uma importncia muito grande para a acessibilidade
do site. A principal funo auxiliar os deficientes visuais a interpretarem, atravs de
softwares adequados, a identificar o que se trata a imagem.
O Internet Explorer utiliza-se deste recurso para apresentar um texto em um retngulo
amarelo sempre que paramos o mouse sobre as imagens. Na verdade segundo as regras
do HTML o atribuito correto para isto ocorrer o atributo title e no o alt. Para ficar
adequado as duas funes (acessibilidade e ttulo da imagem visvel no navegador) a
todos os navegadores o ideal utilizar os dois atributos, a exemplo da tag abaixo:
<img src=caminho/imagem.jpg alt=Texto alternativo de acessibilidade title=Texto
apresentvel no navegador ao parar o mouse sobre a imagem />]
Lembrando que o Internet Explorer apresentar o que est no atributo alt, diferente
dos outros navegadores.
10.3 Redimensionando uma Imagem
possvel modificar propriedades de uma imagem como: redimension-la, ajustar o
texto ao redor da imagem, modificar o espao e a borda da imagem, alinhar imagens ao
texto e definir textos alternativos para e imagem.
Selecionar a imagem e observar que no Painel Properties temos o seu tamanho: W
(largura) e H (altura):


Podemos especificar, por exemplo, que queremos 200 de largura (W) para a imagem e
no marcar nem um valor na altura (H) que nossa imagem adquire um tamanho
proporcional:



No entanto, nossa imagem permanece com o mesmo tamanho: 75k. O correto ajustar o
tamanho desta imagem em um software com este fim.
O Dreamweaver permite que executemos operaes bsicas de edio de imagens GIF e
J PEG.
Primeiro, vamos voltar a imagem em seu tamanho normal (que foi importada), clicando
no boto Resample no Painel Properties.
Depois selecionar a imagem e escolher a opo Crop .
Aparece uma borda corte delimitando nosso corte. Reduzir a rea da imagem dando um
duplo clique em cima da rea de corte ou <ENTER>para aplic-lo:

Do lado do Crop temos mais algumas opes:

O terceiro boto o Brightness and Contrast que modifica o brilho ou contraste dos
pixels da imagem.
E o ltimo boto o Sharpen que ajusta o foco da imagem, aumentando o contraste das
bordas localizadas dentro da imagem.
Um pouco mais acima, temos tambm a opo Edit:

Por padro ser executado o Photoshop, mas podemos alter-lo no item Edit >
Preferences > File Types/Editor.


O boto Edit Image Setting abre a janela Image Preview para fazermos alguns
ajustes na imagem, se necessrio:




10.4 Alinhamentos e Espaamentos em uma Imagem
As imagens podem ser alinhadas a esquerda (padro), no centro ou direita da pgina.
Os botes para alinhamento da imagem esto localizados no Painel Properties:



Ao usarmos o menu pop-up Align para ajustar o texto ao redor da imagem, tambm
podemos ajustar o espao ao redor da imagem. No Painel Properties temos os seguintes
atributos de espaamento e borda:

- V Space: informa ao navegador quantos pixels haver no eixo vertical (superior e
inferior) da imagem;
- H Space: informa ao navegador quantos pixels haver nos lados horizontais (esquerdo
e direito) da imagem;
- Border: Largura da borda em pixels a ser includa ao redor da imagem.
10.5 Alinhamentos e Espaamentos em uma Imagem via CSS
Todas estas configuraes vistas no item anterior devem preferencialmente ser feitas
pela configurao de uma classe CSS e inserida na imagem.
Vamos criar uma classe para configurar a imagem deixando-a a direita e com margem
entre ela e o texto. Para tanto junto a imagem ser inserido um texto aleatrio:

Criar uma classe CSS com o nome imagem_direita


Configure da seguinte maneira:


Agora selecione a imagem e aplique a classe pelo Painel Properties

Note o resultado:



10.6 Usando o Painel Assets
O painel Assets exibe tipos diferentes de mdias e itens do site. possvel visualizar
todos os recursos do site em um local e adicionar o contedo diretamente do painel a
pgina com facilidade.
Clicar na aba Assets localizada no painel Files:

Todas as imagens no site atual so exibidas na categoria Images.
Quando uma imagem selecionada no painel, uma visualizao exibida na parte
superior do painel.
Rolar pela lista de imagens no painel Assets pode ser cansativo quando temos um
nmero muito grande de imagens no site. Para facilitar o acesso a determinadas imagens
podemos adicion-las a lista de favoritos.
No painel Assets selecionar a imagem rede_relacionamento.png e clicar com o boto
direito do mouse. Selecionar a opo: Add to Favorites:


Nas opes na parte superior do painel Assets marcar Favorites:

Observar que temos uma imagem na lista de favoritos do painel Assets
Podemos adicionar aos favoritos usando o boto Add to favorites no painel de arquivos.

LABORATRIO
TAREFA 1
1. Crie um arquivo novo e salve-o com o nome ndex.html.
2. Inclua o ttulo: AlfaAdventure

3. Importe o arquivo de texto que est na pasta textos, com o nome Capa.doc


4. Altere para H1 os ttulos: Equipe AlfaAdventure na estrada e Esportes Radicais:
Rapel.
5. Inclua os CSS estilo.css como mdia: screen e o arquivo estilo_print.css como
mdia: print.

6. Posicione o cursor no inicio do terceiro pargrafo onde est escrito: Os rapeleiros,
como so chamados... e incluir a imagem foto1.jpg que est na pasta imagem/fotos

7. Na caixa de dilogo definir as configuraes de texto alternativo como na imagem
abaixo e clique em OK.

8. Este ser o resultado:


9. Crie uma classe de nome alinhaesquerda dentro de estilo.css e configure-a da
seguinte forma:

10. Agora, selecione a imagem inserida e inclua a classe alinhaesquerda:




10.7 Inserindo um Arquivo do Flash
O Adobe Flash CS5 um aplicativo que gera arquivos swf que contm animaes para
inserirmos em nosso site.
Alguns contedos podem ser includos em nossas pginas, independentemente do Flash
estar ou no instalados em nossa mquina.
Para inserir uma animao do flash, devemos ir ao Painel Insert, Categoria Common,
opo Media e selecionar SWF no menu pop-up.

Na caixa de dilogo Select File, selecionar o arquivo flash desejado e clicar em OK:


O contedo Flash aparece como uma caixa cinza na pgina que quando selecionado
exibido, no painel de propriedades, um boto de Play que serve para reproduzir o
contedo do Flash:

Selecionando o painel Assets e clicando no cone Flash esquerda do painel, podemos
ver os contedos de Flash:


Podemos inserir esse arquivo clicando e arrastando o arquivo Flash do painel para a
pgina.
Tambm, podemos inserir um arquivo Flash do painel de arquivos, selecionando-o e
arrastando-o para a pgina:



10.8 Adicionando um Vdeo do Flash
O formato Flash Vdeo uma maneira fcil de exibir contedo de vdeo na web com o
popular Flash Player. Em vez de depender de plug-ins ou reprodutores que os usurios
devem obter por download, podemos ver o vdeo executado no reprodutor Flash, o que
permite alcanar um nmero maior de pessoas com custos menores de desenvolvimento,
teste e suporte.
Antes de podermos adicionar o vdeo pgina da web, devemos codific-lo, o que
envolve a converso no formato Flash Vdeo (FLV).
Para inserir o vdeo selecione: Insert > Media > FLV.
Abre-se a caixa de dilogo Insert FLV permitindo definir vrias opes:

- Video Type: no modo Progressive Download o arquivo de vdeo est localizado no
servidor, realizado o download para a unidade de disco do usurio e o arquivo
reproduzido. A reproduo do vdeo inicia antes de o arquivo ser inteiramente copiado;
no modo Streaming Video requer um servidor de fluxo;
- URL: define qual o arquivo de flash vdeo ser inserido. Devemos clicar no boto
Browse... para selecionarmos o arquivo dog.flv da pasta Video.


- Skin: especifica a aparncia do componente Flash Video. Podemos escolher a
aparncia no menu pop-up;
- Width and Height: tamanho do arquivo de vdeo. Podemos clicar em Detect Size para
que o Dreamweaver leia as informaes de tamanho no arquivo FLV;
- Auto Play: especifica se o vdeo ser reproduzido quando a pgina abrir;
- Auto Rewind: especifica se a cabea de execuo retornar posio inicial aps a
reproduo do vdeo;
Clicar em Ok e nosso vdeo ser inserido na pgina.
Para visualizarmos o vdeo, devemos clicar no Live View ou F12.


Unidade11Usandobibliotecase
modelos

Itens de biblioteca
Colocando itens de biblioteca em uma pgina
Modificando itens da biblioteca
Desanexando e excluindo itens da biblioteca
Criando modelo de site
Definindo regies editveis
Usando modelos
Aplicando um modelo a uma pgina existente
Modificando o modelo


Unidade 11
Usando Bibliotecas e Modelos
11.1 Itens de Biblioteca
Um item de biblioteca um arquivo Dreamweaver especial que contm uma coleo de
elementos de pgina (por exemplo, texto e grficos) que podem ser facilmente
adicionados a qualquer pgina no site atual. Elas no so propriamente pginas HTML, e
sim apenas elementos de pgina reutilizveis.
Para modificar um design de pgina ou adicionar novas pginas, preciso apenas editar
os itens de biblioteca associados em vez de cada pgina.
Itens de biblioteca:
- Podem ser reutilizados e atualizados em um s lugar;
- So ideais para contedo como cabealhos de pgina, rodaps e barras de navegao;
- So totalmente bloqueados e no podem ser editados nas pginas onde so usados.
Podemos criar um item de biblioteca do zero ou selecionar um contedo em uma pgina
que desejamos tornar item de biblioteca.
A biblioteca encontrada no painel Assets. Neste painel, clicar na categoria Library
e, em seguida, no item New Library na parte inferior do painel:

O novo item adicionado lista com o nome Untitled. Devemos alterar o nome dando
clicando duas vezes sobre o nome pausadamente.


Uma vez selecionado o contedo e criado um item de biblioteca, o contedo realado
na cor definida em suas preferncias (a cor padro o amarelo) para indicar que um
item de biblioteca e no pode ser atualizado:

Importante: Se houver um estilo aplicado ao contedo que est sendo transformado em
item de biblioteca, ser exibida uma caixa de alerta informando que a seleo pode ser
diferente em outros documentos porque as especificaes de estilo no esto includas
nos itens de biblioteca.
Para assegurar que as informaes da folha de estilo estejam includas, use as folhas de
estilo externas e lembre-se de vincul-las a todos os documentos que precisam desses
estilos.
Os itens de biblioteca (extenso .lbi) so salvos na pasta /Library e armazenados na sua
pasta de site. Se a pasta /Library ainda no existir, o Dreamweaver a adicionar ao nvel
raiz de sua pasta de site local:

Para visualizar itens de biblioteca existentes no site, clicamos na categoria Library no
painel Assets e, em seguida, selecionamos o item na lista. A visualizao do item
selecionado exibida na parte superior do painel Assets:


11.2 Colocando Itens de Biblioteca em uma Pgina
Para colocar o item de biblioteca na pgina, posicionar o cursor no local desejado e
selecionar o item de biblioteca e clicar em Insert na parte inferior esquerda do painel
Assets.
O contedo da biblioteca exibido na pgina e realado em amarelo. No possvel
editar diretamente nada que seja parte de um item na pgina do documento.
11.3 Modificando Itens da Biblioteca
Para modificar um item de biblioteca, devemos selecione-lo na lista de itens de
biblioteca na categoria Library do painel Assets e, em seguida, clicar em Edit . O
item de biblioteca aberto em uma janela de documento, onde podemos fazer as
alteraes.
Quando um item de biblioteca editado e salvo, o Dreamweaver verifica todos os
documentos que usam esse item e solicita que atualizemos os arquivos. Todos os
arquivos que contm o item de biblioteca e no esto abertos no momento so
atualizados, salvos e fechados. Todos os arquivos abertos so atualizados, mas no
salvos.


Ao clicarmos em Update, a caixa de dilogo Update Pages aberta para escolhermos as
opes de atualizao:

11.4 Desanexando e Excluindo Itens da Biblioteca
Se desejarmos impedir que uma determinada instncia de um item de biblioteca sofra
mais atualizaes, selecionar o item na pgina e clicar em Detach From Original no
painel Properties:

Tambm possvel clicar com o boto direito do mouse em qualquer lugar no item da
pgina e, em seguida, escolher Detach from Original no menu de contexto:


exibido um aviso informando que o contedo desanexado no est mais vinculado ao
documento original.
Se um item de biblioteca no for mais necessrio, para exclu-lo da biblioteca, selecione-
o no painel Assets e clique em Delete .
Uma vez excludo um item de biblioteca, no ser possvel utilizar o comando Undo
para recuper-lo.
Se um item de biblioteca for excludo do painel Assets, ele poder ser recriado a partir
de documentos que o estejam usando, basta selecionar o item de biblioteca no
documento e clicar no boto Recreate no painel Properties:

11.5 Criando Modelos de Site
Quando se tem um site grande ou vrias pginas que compartilham o mesmo design,
podemos criar um modelo (Template). Um modelo uma pgina inicial que contm
elementos de design para cada pgina no site.
Podem ser criados modelos para serem usados na criao de cada pgina do site. Para
que sejam teis, os modelos podem conter:
- Design geral da pgina: com cores, layout e uma folha de estilo anexada;
- Itens de navegao comuns a todas as pginas;
Regies de pgina comuns, como um rodap.
Com um modelo, possvel atualizar a aparncia do site, alterando vrias pginas em
poucos minutos.


Os arquivos de modelo (extenso .dwt) so salvos na pasta Templates e armazenados na
pasta de site local. Se a pasta Templates ainda no existir, o Dreamweaver a adicionar
ao nvel raiz de sua pasta de site local. A pasta Templates deve estar sempre no nvel
raiz.
Os modelos podem usar qualquer combinao das seguintes regies:
- Regies editveis, onde os desenvolvedores e os provedores de contedo podem
colocar o contedo do site;
- Regies opcionais, que podem ser exibidas ou no com base em alguma condio;
- Regies repetitivas, que podem exibir vrios elementos, como em um conjunto de
novos itens.
O resto do contedo em uma pgina que no seja uma dessas regies considerado
bloqueado. Por exemplo, se houver uma seo de navegao em uma pgina com
grficos para links, esses podero ser definidos no modelo. Esses links sero ento
bloqueados na pgina. Se os links forem alterados, altere simplesmente o modelo e todas
as pginas projetadas com ele sero atualizadas.
No Dreamweaver, para criar um template, precisamos primeiramente de uma pgina (em
branco ou j com contedo).
Selecionar File > Save as Template e colocar o nome desejado para o modelo:

LABORATRIO
TAREFA 1
1. Abrir um arquivo HTML novo.
2. Definir o ttulo como AlfaAdventure
3. Salvar este arquivo como um template. (File > Save as Template).
4. Definir o nome de principal, no site AlfaAdventure.


11.6 Definindo Regies Editveis
Por definio, todas as reas de um modelo so bloqueadas, a no ser que criemos
regies editveis. Em uma pgina criada a partir de um modelo, podemos alterar
somente as regies editveis.
Para criar uma regio editvel, selecionar o texto ou objetos desejados, escolher Insert >
Template Objects > Editable Region e digitar o nome para a regio na caixa de
dilogo New Editable Region. No devemos usar caracteres especiais no nome da
regio:

A regio editvel delimitada por um contorno retangular no modelo com uma guia
exibindo o nome da regio. Se os nomes de regio no estiverem visveis, escolher View
> Visual Aids > Invisible Elements:


Uma regio editvel pode ser removida de um modelo, tornando assim a regio
bloqueada para todas as pginas baseadas no modelo.
Para remover uma regio editvel basta selecionar a regio e escolher Modify >
Templates > Remove Template Markup.
Se uma regio editvel for removida de um modelo que j foi usado na criao de
pginas, a regio ser revertida ao contedo original do modelo ou escolher a opo de
armazenar o contedo deslocado em outra regio.
11.7 Usando Modelos
Depois de criarmos o modelo, podemos comear a criar pginas baseadas nele. S
alterar as partes da pgina definidas como editveis.
Para criar um novo documento a partir de um modelo:
Escolher File > New e clicar na guia Templates na caixa de dilogo New Document
selecionar o modelo que deseja usar na lista e clicar em Create:


O uso deste mtodo permite que usemos um modelo de qualquer site definido no
Dreamweaver.
Selecionar o modelo na categoria Templates no painel Assets e, em seguida, clicar
com o boto direito do mouse e escolher New from Template no menu de contexto ou
no menu Options do painel Assets:



Tambm possvel aplicar um modelo a um novo documento em branco arrastando o
modelo do painel Assets para o documento.

11.8 Aplicando um Modelo a uma Pgina Existente
Uma vez criado o modelo, este poder ser aplicado a outras pginas para atualizar e
alterar seus designs rapidamente. Ao aplicar um modelo, o Dreamweaver tenta fazer a
correspondncia entre o contedo existente e as regies no modelo.
Para aplicar um modelo a uma pgina abra a pgina desejada, devemos selecionar o
modelo no painel Assets e clicar no boto Apply na parte inferior do painel. Tambm
possvel arrastar o modelo para a pgina, ou clicar com o boto direito do mouse no
modelo e escolher Apply no menu de contexto:

Se o Dreamweaver no conseguir fazer a correspondncia de contedo, ser exibida uma
caixa de dilogo onde optaremos por fazer a correspondncia entre o contedo e a regio
apropriada.


Devemos definir para qual regio queremos mover o Document body (corpo da pgina)
e o Document head (cabealho da pgina).

Devemos ajustar as regras de estilos criando outras, se necessrio, para adaptar e alinhar
o contedo das pginas
11.9 Modificando o Modelo
Usando um modelo, a economia real de tempo acontece quando necessrio fazer
alteraes em todas as pginas criadas com base no modelo. Sem o modelo, seria
necessrio editar cada pgina. Com um modelo, necessrio editar apenas o modelo e
todas as pginas criadas com base nele so atualizadas.
Para isso, basta abrir o modelo na pasta Templates, fazer todas as alteraes necessrias
e salvar o modelo.
Quando um modelo alterado e salvo, a caixa de dilogo Update Template Files exibe
uma lista de todos os arquivos criados a partir desse modelo:


Ao clicarmos em Update, os arquivos so atualizados com as suas alteraes. Aps as
atualizaes, as alteraes feitas so listadas na caixa de dilogo Update Pages.
Importante: Para salvar alteraes em um modelo, use o comando Save. Se usarmos o
comando Save as Template, o modelo ser recriado e o novo modelo no ser anexado
s pginas existentes.

LABORATRIO
TAREFA 1
1. Abrir o template principal.dwt.
2. Anexar a folha de estilo estilo.css para screen clicando no boto Attach Style
Sheet, localizado no final do painel CSS Style.

3. Na caixa de dilogo Attach External Style Sheet, clicar em Browse e selecionar a
folha de estilos site.css. Na opo Media selecionar screen.
4. Anexar a folha de estilo estilo_print.css com opo de Media: print.


Unidade12 ProjetandoLayoutscom
CSS

Usando camadas para Layout
Camadas aninhadas
Usando rguas e guias
Adicionando CSS a camadas
Projetando com Div


Unidade 12
Projetando Layouts com CSS

At agora tivemos controle limitado sobre a criao de pginas. Existem alguns aspectos
que devemos levar em considerao ao criar suas pginas:
- Visitantes do site no costumam ler eles percorrem o texto em busca de links e
informaes relevantes para encontrar rapidamente o que precisam;
- Os leitores procuram da esquerda para a direita; portanto, contedos importantes
devem ficar no lado esquerdo da pgina;
- Para que eles leiam o que desejamos, a largura dos textos no deve ser superior a 400
pixels;
- A navegao pelo site deve ser consistente. A barra de navegao principal deve
permanecer no mesmo lugar em todas as pginas;
- Hoje, muitos sites so projetados para uma resoluo de tela de 1024 x 768 pixels.
Normalmente, limite o contedo a 990 x 650 pixels para permitir outros elementos de
tela, como a barra de tarefas.
possvel controlar o layout das pginas de vrias maneiras: usando camadas, CSS ou
tabelas. Agora, o uso de CSS considerado a melhor forma de controle da pgina e esse
o principal destaque desta lio.
O Dreamweaver permite inserir tags especiais (tags DIV) manualmente e adicionar
regras de posicionamento CSS em tags DIV ou projetar visualmente a pgina com
camadas.
A tag DIV apenas uma tag HTML que define uma seo ou diviso do contedo em
uma pgina. possvel adicionar atributos de posicionamento a tag DIV com CSS, para
permitir a criao de colunas ou blocos de texto, colocados e dimensionados de acordo
com suas especificaes.
12.1 Usando Camadas para Layout
No Dreamweaver, as camadas so elementos HTML aos quais atribudo
posicionamento absoluto. Como alternativa, quando desenhamos manualmente uma
camada na pgina, o Dreamweaver atribui uma tag DIV camada com o
posicionamento CSS j aplicado. A criao de pginas se torna to fcil quanto em um
programa de layout de pginas.
Aps desenharmos camadas na pgina, podemos adicionar contedo (texto, imagens
etc.) camada, da mesma maneira como adicionamos contedo s pginas. Tudo que
pode ser includo em um documento HTML tambm pode ser colocado em uma camada.


1- Criar um novo arquivo.
2- Selecionar a categoria Layout no Painel Insert.

3- Clicar no cone Draw AP Div e desenhe uma camada, da mesma maneira como
criamos um retngulo em um programa grfico:

Depois de criarmos uma camada, para adicionar contedo a ela, basta colocar o ponto de
insero na camada correspondente e adicionar o contedo como faramos em uma
pgina.
4- Criar mais duas camadas abaixo desta, como na imagem abaixo:



necessrio selecionar a camada antes de modific-la. Existem vrios mtodos para
seleo de uma camada:
- Aps clicar dentro da camada, clique na ala que aparece no canto superior esquerdo;

- Clique em qualquer ponto na borda da camada;

- Selecione a respectiva camada no painel CSS na aba AP Elements:

Aps a seleo de uma camada, as alas de redimensionamento so apresentadas.
O painel AP Elements permite gerenciar as camadas do documento. Podemos us-lo
para selecionar a camada, nomear a camada, alterar a visibilidade da camada, alterar a
ordem de empilhamento ou selecionar vrias camadas na pgina.
As camadas so exibidas como uma lista de nomes; a primeira camada criada est na
parte inferior da lista e a camada mais recente aparece no incio da lista.
12.1.1 Manipulando as Propriedades da Camada
Aps a criao e seleo de uma camada, possvel modificar vrias propriedades da
camada no Painel Property. Podemos:
- Renomear uma camada digitando um novo nome na caixa de texto Layer ID do Painel
Property. O Dreamweaver atribui um nome a cada camada (Layer1, Layer2 etc.), mas


podemos atribuir um nome mais relevante e exclusivo. No use espaos nem caracteres
especiais:

- Posicionar a camada, arrastando-a na tela ou posicione-a de maneira precisa,
especificando os valores L (esquerda) e T (superior).

- Redimensionar a camada, arrastando as alas ou ajustando os valores W (largura) e H
(altura).

- Adicionar camada uma cor de fundo, selecionando a cor na caixa Bg Color.

12.2 Camadas Aninhadas
A camada aninhada aquela que est contida em uma outra camada. Em geral,
aninhamos camadas quando desejamos agrup-las. A camada aninhada movida com
sua camada-me. Para desenhar uma camada dentro de outra e aninh-las, necessrio
verificar se a opo Prevent Overlaps no est selecionada no painel AP Elements:

Quando essa opo est marcada, no possvel sobrepor nem aninhar camadas em uma
camada existente.
Para criamos camadas aninhadas, antes precisamos definir algumas preferncias.
5- Selecionar o menu: Edit > Preferences e na opo AP Elements deixar marcada as
opes como na imagem:


As opes para camadas so:
- Visibility: determina a configurao padro da visibilidade de uma camada.
- Width and Height: define a largura e a altura padro de camadas criadas com o menu
Insert (Inserir).
- Background-color: especifica a cor de fundo padro.
- Background-image: especifica a imagem de fundo padro.
- Nesting: quando selecionada, especifica se a camada desenhada em outra camada deve
ser aninhada nessa camada.
6- Clicar em OK para aplicar as preferncias.
7- Selecionar a Div3 e desenhar uma Draw AP Div dentro dela.
Observar no painel Ap Elements que nossa camada apDiv4 esta aninhada dentro da
apDiv3:


12.3 Usando Rguas e Guias
Ao criarmos nossas pginas, podemos usar alguns dos recursos de medio do
Dreamweaver para ajud-lo a posicionar itens na pgina e planejar o layout. As rguas
aparecem nas bordas superior e esquerda da pgina e so marcadas em pixels, polegadas
ou centmetros.
8- Para exibir ou ocultar as rguas, selecionar View > Rulers > Show.

Para alterar a origem (ponto 0), arraste a origem da rgua no canto superior esquerdo das
rguas (na interseo das rguas superior e esquerda) para qualquer lugar na pgina.

Para redefinir as rguas na posio superior esquerda, clique duas vezes no ponto de
interseo ou selecione View > Rulers > Reset Origin.


Para alterar a unidade de medida, selecione Pixels, Inches ou Centimeters no submenu
View> Rulers.
Com as rguas habilitadas podemos guias que so linhas que arrastamos para ajudar a
colocar ou alinhar itens na pgina. As rguas devem estar visveis para ser possvel a
colocao de uma guia na pgina.
Para criar uma guia horizontal ou vertical, arraste a rgua na parte superior ou esquerda,
respectivamente, e libere o boto do mouse ao chegar posio em que deseja manter a
guia.

Para alterar a posio de uma guia, execute um destes procedimentos:
- Arraste a guia para a nova posio.
- Clique duas vezes na guia e insira a nova posio na caixa de dilogo Move Guide.

Para remover uma guia da pgina, arraste a guia de volta para as rguas.
Para limpar todas as guias na pgina, selecione View > Guides > Clear Guides.
12.4 Adicionando CSS a Camadas
Com o uso de camadas, torna-se fcil criar pginas. medida que cada camada
desenhada, o Dreamweaver cria regras CSS internas, atribuindo regra de estilo o
mesmo nome da camada. Esse outro motivo para a escolha de nomes lgicos para as
camadas.
Tambm possvel modificar ou adicionar atributos de posicionamento a cada regra de
estilo para obter controle ainda maior sobre a aparncia da pgina.
9- No cone Visual Aids deixe selecionada a opo CSS Layout Backgrounds:


10- Selecionar, no painel CSS Styles, a regra apDiv1 e d um duplo clique para
entrarmos na janela CSS Rule Definition.
11- No item Box definir o Padding e a Margin como na imagem abaixo:


Ao clicarmos em OK veremos um deslocamento na nossa Div.
O preenchimento (Padding) distncia do contedo a partir da borda. possvel
adicionar preenchimento a todos os lados da caixa (opo same for all marcada) ou a
cada lado individualmente.
As margens (Margin) so definidas da mesma maneira que o preenchimento. A
diferena entre as margens e o preenchimento que as margens ficam fora da borda do
objeto, enquanto o preenchimento fica dentro da borda.
12.5 Projetando com DIVs
Anteriormente, criamos um projeto de pgina usando a opo de Draw AP Div para
desenhar as caixas do contedo. um recurso til do Dreamweaver para a realizao de
experincias com o projeto da pgina. O Dreamweaver insere automaticamente uma tag
DIV para cada camada desenhada.
12.5.1 Posicionamento Absoluto e Relativo
Dois tipos de posicionamento, amplamente utilizados, podem ser especificados com o
modelo de caixa: absoluto e relativo.


O posicionamento absoluto atribudo pela regra de estilo quando a camada desenhada
e colocada em um local exato na pgina usando as propriedades referentes s partes
superior, esquerda, inferior e direita.
O posicionamento relativo coloca o modelo de caixa usando os valores referentes sua
prpria posio no fluxo de texto do documento.
Quando uma camada colocada na pgina e sua posio alterada de absoluta para
relativa, o Dreamweaver a remove do painel AP Elements.
No mais possvel mov-la livremente na pgina arrastando a ala. De fato, as alas
no aparecem mais na caixa. No se confunda pelo fato de o Painel Property ainda
identificar o objeto como uma camada. O objeto ainda uma tag DIV.
Para inserir uma camada com posio relativa no Dreamweaver devemos ir at o Painel
Insert, Layout, Insert Div Tag .

- Insert: define onde ser inserida a Div Tag:
At insertion point: insere neste ponto;
After tag: insere depois de outra div tag;
Before tag: insere antes de outra div tag;
Wrap Around Selection: insere ao redor da seleo;
- Class: define a classe CSS aplicada para esta div tag;
- ID: define o ID CSS aplicado para esta div tag;
Se no possumos classe ou ID para aplicar nesta div tag, podemos cri-las clicando no
boto New CSS Rule.
Normalmente os itens que precisamos definir para uma div o width, height, padding,
margin, background e formatao da fonte.
Em geral, quando projetamos uma pgina da web, a largura do contedo que aparece na
pgina merece mais ateno do que a altura.



LABORATRIO
TAREFA 1
1- Abrir o arquivo de template principal.dwt
2- Edite a configurao da tag body no arquivo de folha de estilo estilo.css, entrando
na categoria background e alterando conforme abaixo:

Desta forma, a imagem fundo_topo.jpg ficar no topo do corpo do site, ao fundo,
centralizado e sem se repetir.
3- Clicar no cone Insert Div Tag, localizada no Painel Insert, item Layout.
4- Clicar na opo Insert Div Tag, deixar a opo At insertion point marcada e clicar
no boto New CSS Rule:
5- Selecionar ID no Selector Type. Digitar o nome topo no item Selector e certifique-
se que est na folha se estilo estilo.css.


Clicar em OK
6- Na janela CSS Rule Definition, escolher a opo Box e colocar 413 pixels de altura
para esta Div, a largura no ser especificada, portanto, independente do tamanho da
janela, ser usada toda a largura til. Nesta mesma categoria coloque tambm a
margem: auto.
7- Na categoria Positioning, altere o campo Position para relative.
8- Apagar o contedo da Div topo, clicar no cone Insert Div Tag, localizada no Painel
Insert, item Layout.
9- Clicar na opo Insert Div Tag, deixar a opo At insertion point marcada e clicar
no boto New CSS Rule (confira se realmente o ponto de inserso est dentro da
div topo.:

10- Selecionar ID no Selector Type. Digitar o nome cabecalho no item Selector e
certifique-se que est na folha se estilo estilo.css. Clicar em OK:
11- Na janela CSS Rule Definition, escolher a opo Box e definir conforme a imagem
abaixo:


12- Na categoria Positioning, altere o campo Position para relative.

TAREFA 2 ESPAO PARA MENU
1. Posicionar o cursor logo aps o final da Div cabecalho. Se necessrio, habilitar o
modo de visualizao Split.
2. Clicar no cone Insert Div Tag. Na janela Insert Div Tag, escolher a opo After tag
(depois) especificando no menu pop-up <div id=cabecalho>e clicar no boto New
Css Rule:



3. Selecionar ID no Selector Type. Digitar o nome menu no item Selector e certifique-
se que est na folha se estilo estilo.css. Clicar em OK:
4. Na janela CSS Rule Definition, na categoria Background selecionar a imagem
fundo_menu.jpg no item Background-image. Marcar no item Repeat a opo: repeat-x;
5. Ainda na div menu, na categoria Box definir conforme a figura abaixo:

6. Na categoria Positioning, altere o campo Position para relative.

TAREFA 3 CRIANDO A PARTE CENTRAL
1. Clicar em Insert Div Tag, selecionar a opo After Tag e no menu pop-up escolha:
<div id=topo>e clicar no boto New CSS Rule:



2. Na janela New CSS Rule escolher a opo ID e colocar o nome de centro como na
imagem:



4. Na janela CSS Rule Definition, na categoria Box, definir como na figura abaixo.

12.5.2 Float
A propriedade Float determina onde um elemento ser exibido em relao a outro, sem
que uma posio fixa seja definida, ou seja, como se este elemento estivesse flutuando
na pgina. Define a disposio dos elementos, podendo criar colunas, fazer um texto
contornar uma imagem, etc., de forma flexvel.
A propriedade Float permite trs valores: Left, Right ou None:
Left exibe o objeto na margem esquerda do objeto selecionado;
Right exibe o objeto na margem direita ;
None define o valor flutuante igual ao padro do navegador;
12.5.3 Clear
Complementando a funo da propriedade Float, a propriedade Clear define quais lados
de um elemento ficar limpo, sem a presena de nenhum outro elemento. Por padro,
todo elemento flutuante inserido em uma pgina ser posicionado imediatamente ao lado


do elemento anterior. Isso significa que essa propriedade s ter efeito a partir do
segundo elemento colocado na pgina.
A propriedade Clear permite quatro valores: Left, Right, Both ou None.

TAREFA 4
1. Apagar o contedo da div centro e clicar na opo Insert div Tag, escolher a opo
After Start of Tag com a <div id=centro>selecionada.

3. Colocar o nome do ID desta Div de conteudo.
4. Na janela CSS Rule Definition, na categoria Box, definir da seguinte forma:



5. Clicar em OK
6. Clicar na opo Insert div Tag, escolher a opo After Tag com a <div
id=conteudo>selecionada.
7. Colocar o nome do ID desta Div de direita.
8. Na janela CSS Rule Definition, na categoria Box, definir da seguinte forma:

TAREFA 5 CRIAR REA DO RODAP
1. Clicar na opo Insert div Tag.
2. Escolher a opo After tag. com a <div id=centro>selecionada.



3. Clicar no New CSS Rule e colocar o nome do ID desta Div de rodape.

4. Na janela CSS Rule Definition, na categoria Box, definir conforme a figura abaixo:


5. Na categoria Background, configure conforme abaixo:

6. Na categoria Block, na opo Text-align definir como right.


8. Salvar todos os arquivos

TAREFA 6 CRIANDO A REA EDITVEL DO CONTEDO

1. Excluir o texto da Div conteudo e deixar o cursor dentro desta div.
2. Inserir uma regio editvel com o nome de conteudo ( Insert >Templates Objects>
Editable Region >conteudo)

3. Salvar o modelo.

TAREFA 7
1. Abra o arquivo agencia.html.
2. Aplicar o template principal ( Modify > Templates > Apply templates to Page...
> selecionar a opo de template principal).

2. Definir para o Document body a regio editvel conteudo e para o Document head
a opo Nowhere


3. Repetir os passos desta tarefa para os arquivos index.html e faleconosco.html.
4. Salvar todos os arquivos e posteriormente feche-os.

TAREFA 8 FINALIZANDO O TOPO DO SITE

1. Abrir o arquivo principal.dwt, e apague o contedo da div cabecalho. Aps, clicar
no boto Insert div tag e escolher a opo After start of tag. com a <div
id=cabecalho>selecionada. Assim, criaremos dentro da div cabecalho, logo aps seu
incio.



2. Clicar no boto New CSS Rule e no Selector Type deixe marcado Class, digitando
no Selector Name o nome: logo.
3. Na configurao, categoria Box, configure da seguinte maneira:

4. Apague o contedo da div de classe logo e dentro desta div insira a imagem
logotipo.png colocando o texto alternativo confirme imagem abaixo:

5. Salve o arquivo de template e no se esquea que sempre que aparecer a janela
para atualizar as pginas que so dependentes deste template, dever clicar em


Update

6. Vamos criar a div para receber o arquivo criado com o Adobe Flash. Clicar no
boto Insert Div Tag, marcar Before end of tag e marcar a div cabecalho. Isto far
com que a criao seja feita antes de terminar a div cabecalho.


7. Clicar no boto New CSS Rule e no Selector Type deixe marcado Class, digitando
no Selector Name o nome: flash_topo.
8. Na categoria Box, configure da seguinte maneira:

9. Excluir o contedo da Div, clicar na categoria Common do Painel Insert, boto Media
e selecionar SWF no menu pop-up:
10- Na caixa de dilogo Select File, selecionar o arquivo flash banner.swf que est na
pasta flash.
11- Clicar no boto Play para visualizar o arquivo reproduzido.



TAREFA 9 CRIANDO A LATERAL DIREITA DO SITE
1. Apague o contedo da div de ID direita e deixe o cursor posicionado dentro dela.
2. Clicar no boto Insert Div Tag e com a opo At Insert Point selecionada em
Insert vamos clicar no boto New CSS Rule.
3. No Selector Type deixe marcado Class, digitando no Selector Name o nome:
box_direita.
4. Configure esta classe, na categoria Background, para a cor #DBEEE4.
5. Ainda na categoria Background faa a seguinte configurao:

Esta imagem ficar apenas no topo da div para servir de fundo para o ttulo.


6. Na categoria Box, configure da seguinte forma:

7. Agora apague o contedo da div de classe box_direita e digite Ttulo, tecle Enter
e digite: Preencha seus dados e receba todas as novidades do nosso site por e-
mail.
8. Selecione o Ttulo digitado anteriormente e altere para ttulo H2.


9. Clique sobre o texto: Ttulo e clique no boto New CSS Rule do painel CSS
Style. Aparecer esta tela:

10. Clicar duas vezes no boto Less Specific para deixar a configurao
.box_direita h2, que far a configurao na tag H2 apenas quando estiver em
.box_direita


11. Na categoria Type, configure da seguinte forma:

12. Na categoria Box, digite 4 pixels de margem para todos os lados.
13. Agora, clique em qualquer parte do pargrafo dentro da div de classe box_direita,
e clique no boto New CSS Rule do painel CSS Style. Aparecer esta tela:



14. Clique no boto Less Specific at ficar no Name: .box_direita p, desta forma, a
configurao para o pargrafo servir apenas para a div class=box_direita.
15. Configure na categoria Box a mergem de 10px para todos os lados.
16. Copie pelo cdigo fonte todo a div de classe box_direita, para que faamos uma
cpia logo abaixo da mesma, formando duas divs com mesma configurao

Aps a cpia:



17. Vamos alterar os ttulos. Na primeira caixa, trocar para Newsletter e o segundo
para Vdeos
18. Altere o texto do pargrafo da segunda div para: Assista nossos vdeos:
19. Insira abaixo do texto alterado a imagem da cmera:

20. Como texto alternativo, digite: Vdeos AlfaAdventure:

21. Para centralizar a imagem inserida, localize no cdigo fonte o pargrafo onde esta
imagens est inserida, e inclua uma linha de CSS direto na tag, conforme abaixo:



22. Salve o template e atualize todos os seus dependentes.

TAREFA 9 FINALIZANDO O RODAP DO SITE

1. Na div ID rodape, apague o contedo e clique no boto Insert Div Tag, escolha:

2. Clique em New CSS Rule e escolha ID no tipo de seletor, com o nome texto_rodape.

3. Na categoria Type, troque a cor do texto para Branco (#FFF)


4. Na categoria Box, faa a seguinte configurao:

5 - Altere o texto da div de ID texto_rodape para: Todos os direitos reservados
AlfaAdventure - Copyright 2010 aps, tecle SHIFT e ENTER para criar uma quebra
de linha e digite: contato@alfaadventure.com.br


Unidade13 Navegandonosite

Links de hipertexto
Criando links para arquivos do site
Adicionando links de e-mail
Alterando cores do link
Prioridades das declaraes dos links
Adicionando links para pginas externas numa nova
janela
Criando vrios links de uma imagem
Projetando links de navegao com CSS


Unidade 13
Navegando no site
13.1 Links de Hipertexto
Aps determinarmos os objetivos do nosso site, o pblico alvo e as necessidades de
dados, estaremos preparados para comear a conceitualizar o esquema de navegao do
site.
A navegao do site a representao de como nossas pginas da Web se relacionam
entre si. Em termos especficos, ele revela como os usurios percorrem seu site ao
clicarem nos links e interagirem com as interfaces dos aplicativos.
A navegao implementada por:
- Uma barra de navegao, que pode ser composta por texto ou imagens que atuam
como links;
- Uma srie de links de hipertexto incorporados s pginas da Web.
O Hipertexto foi o principal conceito que levou inveno da World Wide Web, que
no nada mais (ou menos) do que uma enorme quantidade de contedo conectado por
um enorme nmero de links de hipertexto.
Links de hipertexto:
- So geralmente representados por um texto sublinhado em uma pgina da Web
(embora os usurios possam desativar esse formato em seus navegadores);
- Podem saltar o usurio para outro documento contido na pgina da Web atual ou
para uma pgina em outro site;
- So usados na navegao global do site, em que um conjunto de links criado em uma
barra de navegao consistente.
13.1.1 Tipos de Link
Os links que usamos em texto ou grficos para navegar para outras pginas so
conhecidos como links de hipertexto. possvel criar vrios tipos de links, usando texto
ou um grfico:
- Link para outras pginas existentes no mesmo site;
- Link para outros sites;
- Link para um local com nome, existente na mesma pgina;
- Link para criar uma mensagem de e-mail.


13.2 Criando Links para Arquivos no Site
H vrias maneiras de criar links para documentos existentes no mesmo site:
- Apontar para um arquivo usando o cone Point to File ;
- Navegar at o arquivo usando o cone da pasta no Painel Property;
- Digitar o caminho e o nome do arquivo na caixa de texto Link
, no Painel Property.
Quando criamos um link em uma pgina, o nome de caminho para esse link
incorporado ao cdigo HTML. Se movermos um arquivo com links para outra pasta fora
do Dreamweaver, o nome do caminho para o link pode ser diferente e o link no
funcionar.
- Use o painel de arquivos para mover quaisquer arquivos. Quando movemos cada
arquivo, o Dreamweaver atualiza cada link e grfico na pgina, de modo a manter o
caminho correto;
- Se movermos os arquivos pelo Windows Explorer ser necessrio atualizar essas
pginas manualmente.
Na opo target podemos selecionar um alvo para o link, ou seja, o local onde ele ir
abrir:
_blank: far com que o link abra em uma nova janela;
None (em branco): far com que o link abra na mesma janela;
_Self: a pgina abrir no mesmo frame;
_Top: a pgina abrir no mesmo frame.

LABORATRIO
TAREFA 1

1. Selecione a imagem do logotipo no topo do site, e no painel Propriedades insira
um link para o arquivo index.html

2. Clique fora para retirar a seleo da imagem, e note que a imagem ficou com uma
borda azul.
Isto acontece porque toda a imagem que um link, por padro, fica com borda.
Existem duas maneiras de retirar esta borda: Marcando para esta imagem ter borda
de tamanho zero ou criando uma configurao CSS para que todas as imagens, por


padro, no tenham borda. Escolhercemos a segunda opo por ser geral e
aplicada a todas situaes deste tipo.
Crie uma nova linha de CSS no painel CSS Style:

3. Configure a tag img no arquivo estilo.css



4. Na categoria Border digite 0 (zero) na largura:

Pronto, a borda das imagens por padro sero zeradas.
13.3 Adicionando Links de E-mail
correio eletrnico associado ao navegador do usurio.
No Dreamweaver podemos adicionar um link de e-mail ao texto existente na pgina ou
usar a caixa de dilogo para adicionar o texto e o link.
1. No Painel Insert, na categoria Common, clicar na opo Email Link ou item de menu
Insert > Email Link.

2. Na caixa de dilogo Email Link, digitar o texto e o e-mail desejado e clique em OK.


LABORATRIO
TAREFA 1
1. No arquivo de template, selecione o endereo do e-mail.
2. Na caixa de dilogo Email Link, digitar como na imagem abaixo:


13.4 Alterando Cores do Link
Para alterarmos as cores dos links, basta adicionarmos uma regra de estilo chamada
pseudo-classes, folha de estilo externa ou interna da pgina.
Os links possuem quatro pseudo-classes:
a:link define o estilo do link no estado inicial;
a:visited define o estilo do link visitado;
a:hover define o estilo do link quando se passa o mouse sobre ele;
a:active define o estilo do link ativo ( o que foi clicado)
Com CSS, perfeitamente possvel definir um estilo diferente para cada um dos quatro
seletores, de forma semelhante como definido para qualquer texto HTML.
Ao alterar as cores do link, considere o seguinte:


- No escolha cores que possam confundir os usurios. Se trocarmos o link e as cores
visitadas, os visitantes tero a impresso de j terem visto as pginas em seu site e talvez
no cliquem em um link para explorar ainda mais;
- As cores do link devem contrastar com a cor de fundo da pgina para preservar a
legibilidade.
1. No Dreamweaver, para mudar as cores do links e criar essas pseudo-classes, devemos
criar uma New CSS Rule, no painel CSS STYLES.
2. Na caixa New CSS Rule, selecionar a opo Compound no selector type.
3. No campo Selector Name, selecionar qual das quatro opes deseja formatar.

4. Definir as cores e propriedades desejadas na caixa CSS Rule Definition.

LABORATRIO
TAREFA 1
1. Com o arquivo do template aberto (principal.dwt), adicionar uma nova regra de estilo
e selecionar a opo Compound na caixa de dilogo New CSS Rule. No menu pop-up
Selector Name, escolher o estados de link: #texto_rodape a:link pois faremos esta
configurao apenas para o rodap.


2. Na caixa CSS Rule Definition, definir as opes conforme a imagem abaixo:

3. Clicar em OK.


13.5 Prioridades das declaraes dos links
A ordem de definio das regras para os estados dos links muito importante. Lembre-
se de que pelo efeito cascata as regras mais prximas do elemento prevalecem sobre as
mais distantes.
A ordem das declaraes deve seguir a sequncia demonstrada a seguir.
1 a:link
2 a:visited
3 a:hover
4 a:active

LABORATRIO
TAREFA 1
1. No arquivo principal.dwt, duplicar a regra de estilo #texto_rodape a:link ( boto da
direita sobre a regra #texto_rodape a:link, opo Duplicate);
2. No menu pop-up Selector Name, escolher o estados de link: a:visited:



3. Criar uma nova regra do tipo Compouns com a opo: a:hover

5- Na Caixa de dilogo CSS Rule Definition marcar as opes como na imagem.

6- Salvar todos os arquivos e testar o arquivo no navegador.


13.6 Adicionando Links para pginas externas numa nova
janela
O Dreamweaver possibilita criar um link para uma pgina da Web e exibir esta numa
nova janela. Para isso devemos:
1. Selecionar o texto ou imagem que desejamos inserir o link.
2. Digitar o endereo completo (http://www...) na propriedade link do Painel Properties.
3. No item Target, selecionar a opo _blank.

13.7 Criando vrios Links de uma Imagem
Se tivermos uma imagem com diversas reas para conduzir o usurio para diferentes
destinos, criaremos um mapa de imagens.
Por exemplo, vamos supor que temos um mapa mundi e desejamos criar um link para
cada pas. Usaremos um mapa de imagens para distinguir os diferentes formatos de cada
pas e depois atribuir um link diferente a cada formato.
As reas de link em um mapa de imagens so conhecidas como pontos ativos. Uma rea
de ponto ativo em um mapa de imagens pode ter uma dentre trs formas: um retngulo,
um crculo ou um polgono.
1- Criar um novo arquivo e salvar como nome de imagem_mapeada
2- Inserir a imagem frutas.jpg que est na pasta imagens, colocando o texto alternativo
para a imagem de frutas
Para criarmos nosso mapa de imagens, usaremos as ferramentas de mapas localizadas no
Painel Properties:



3- Com a imagem selecionada, clicar no cone Oval Hotspot e fazer um crculo ao redor
da laranja:

Quando finalizamos o ponto ativo, o painel Properties muda exibindo as opes desse
ponto ativo. Inserimos um link do ponto ativo e o texto Alternativo, exibido quando o
usurio movimenta o ponteiro sobre essa rea:

As ferramentas de ponto ativo Rectangle e Oval trabalham de modo semelhante s
ferramentas existentes em aplicativos de desenho; arrastamos a ferramenta sobre a rea
para desenhar a forma do ponto ativo.
Para mover ou alterar o tamanho do ponto ativo, selecione a ferramenta do ponto ativo
Pointer para fazer a mudana:
4- Selecionar a ferramenta Polygon Hotspot e clicar ao redor da imagem da pra:


Cada clique cria um ponto ativo na imagem. Cada ponto conectado ao ponto anterior
por uma linha.
Ao final teremos um ponto ativo em no formato semelhante ao da imagem abaixo:

Nas demais frutas, podemos utilizar o retngulo ou novamente uma das duas opes j
utilizadas.
13.8 Projetando Links de Navegao com CSS
possvel definir diferentes estilos para os quatro seletores de links a serem utilizados
em uma mesma pgina. Conseguimos isso, utilizando os IDs da divs, juntamente com
os seletores.
1. No Dreamweaver, devemos criar uma New CSS Rule, selecionar a opo Compound
no campo Selector Name.


2. Digitar o nome da(s) Div(s) precedida por #e aps o seletor desejado.

Todas os formatos definidos no CSS Rule Definition ser aplicado apenas no seletor
<li>que estiver dentro da Div com ID exemplo.

LABORATRIO
TAREFA 1
1. Excluir o contedo da Div menu e crie uma nova div pelo boto Insert Div Tag, com
a seguinte configurao:



2. Clicar no boto New CSS Rule e no seletor tipo ID digite o nome: botoes_menu

3. Na categoria Box, marque auto na margem para que fique centralizado, limite a
largura para 950 px e altura para 43 px.
4. Na categoria Positioning, em Position selecione: relative.
5. Agora apague o contedo gerado automaticamente para esta div, e digite um item
abaixo do outro:
Home
Agncia
Nacional
Internacional
Fale Conosco


6. Selecione os 5 pargrafos gerados com os 5 itens de menus, e marque a opo do
painel Properties para transform-los em itens de lista

7. Por se tratar de um menu horizontal, e no vertical, faremos uma configurao na tag
LI dentro da div botoes_menu para que flutuem a esquerda, desta forma ficando um ao
lado do outro, e no abaixo como est.
Clicar uma vez sobre um dos itens da lista, e aps no boto New CSS Rule, deixando a
configurao em #botoes_menu ul li



8. Na categoria Box, selecione left no seletor de Float.
9. Na categoria List, marque em List-style-type a opo none.

TAREFA 2
1. Selecionar cada item da lista do menu e inserir um link temporrio. (Digite #na
opo link do Painel Properties).
2. Criar uma New CSS Rule (no Painel CSS Style) do tipo Compound. Definir o
Selector Name conforme a figura abaixo, na folha de estilo estilo.css.

3. Na janela CSS Rule Definition, na categoria Type, definir conforme a figura abaixo:


4. Na categoria Block, definir a opo Display como block.
5. Na categoria Box, definir conforme a figura abaixo:



7. Na categoria Border, definir conforme a figura abaixo:

9. Criar uma New CSS Rule (no Painel CSS Style) do tipo Compound. Definir o
Selector Name conforme a figura abaixo, na folha de estilo estilo.css.




10. Na janela CSS Rule Definition, na categoria Background, configure da seguinte
forma:



Unidade14 Usandotabelas

Criando tabelas
Propriedades da tabela
Propriedade da clula
Editando linhas
Ordenando tabelas


Unidade 14
Tabelas
14.1 Criando Tabelas
Para inserir uma tabela na pgina, devemos posicionar o cursor no ponto de insero
onde a tabela ficar e selecione Insert > Table. Tambm podemos clicar no boto Table
da categoria Common da Barra Insert.

Na caixa de dilogo Table, inserir o tamanho da tabela e outros atributos visuais. Essas
configuraes podem ser alteradas aps a insero da tabela na pgina:



Aps inserirmos a tabela na pgina, necessrio selecion-la para fazer qualquer
alterao. Existem vrias formas de selecionar uma tabela:
- Clicar no canto superior esquerdo da tabela, em qualquer rea na margem superior ou
inferior da tabela ou na borda de uma linha ou coluna:

- Clicar em uma clula da tabela e selecionar a tag <table>, no seletor de tags:

- Clicar em uma clula da tabela e, no menu de cabealho da tabela, escolha Select
Table:

Tambm podemos selecionar somente algumas clulas da tabela. H vrias formas de
selecionar clulas e linhas no Dreamweaver:
- Arrastar o mouse ao longo de uma linha;

- Arrastar o mouse para baixo em uma coluna:


- Clicar pressionando as teclas Shift ou Ctrl, para selecionar vrias colunas e linhas:

- Posicionar o mouse esquerda de uma linha ou sobre uma coluna e selecione a linha
ou coluna com a seta de seleo:

Aps a seleo, todas as alteraes de propriedades so aplicadas a todas as clulas da
seleo.
14.2 Propriedades da Tabela
Com a tabela selecionada suas propriedades so exibidas no painel Properties:

- Rows: Nmero de linhas que voc deseja na tabela. Sempre possvel adicionar ou
excluir linhas posteriormente;
- Columns: Nmero de colunas que voc deseja na tabela. Sempre possvel adicionar
ou excluir colunas posteriormente;
- Width: Largura da tabela na pgina, especificada em pixels ou porcentagem;


- Height: Altura da tabela na pgina, especificada em pixels ou porcentagem;
- Cell Padding: Margem ao redor do contedo de cada clula, em pixels;
- Cell Spacing: Espaamento em pixels entre as clulas;
- Border: Largura da borda ao redor de cada clula da tabela, em pixels.;
- Align: Alinhamento da tabela na pgina;
- Bg Color: Cor de fundo da tabela;
- Border color: Cor da borda;
- Bg Image: Imagem que aparece no fundo da tabela.
14.3 Propriedades da Clula
Com uma ou mais clulas selecionadas suas propriedades so exibidas no painel
Properties:

- Alinhamento horizontal (Horz): Alinha o contedo da clula esquerda (padro), no
centro ou direita;
- Alinhamento vertical (Vert): Alinha o contedo na parte inferior, no meio (padro)
ou na parte superior da clula;
- Largura (W): Define a largura mnima da clula em pixels (a clula expandida
automaticamente, quando a largura do contedo ultrapassa a largura mnima);
- Altura (H): Define a altura mnima da clula em pixels (a clula expandida
automaticamente, quando a altura do contedo ultrapassa a altura mnima);
- Imagem de fundo (Bg) (campo de texto superior): Define a imagem de fundo de
uma clula, linha ou tabela;
- Cor de fundo (Bg)(amostra de cores e campo de texto inferiores): Define a cor de
fundo de uma clula, linha ou tabela;
- Cor da borda (Brdr): Define a cor da borda da tabela. Se a borda da tabela for
definida como 0, a cor da borda das clulas no ser afetada;
- Merge Cells: Mescla clulas adjacentes em uma nica clula;
- Split Cell: Divide uma clula em vrias, horizontal ou verticalmente (apenas clulas
individuais);


- No Wrap: Impede a quebra de linha do contedo de uma clula, linha ou tabela;
- Header: Transforma uma ou mais clulas em cabealho (th). Os cabealhos ficam em
negrito e centralizados.
14.4 Editando Linhas
As operaes para modificarmos colunas e linhas da tabela so:
14.4.1 Adicionando Linhas e Colunas
Aps criarmos a tabela, podemos adicionar linhas ou colunas. possvel executar
qualquer um destes procedimentos:
- Clicando na ltima clula de uma linha e pressione a tecla Tab. Uma nova linha
adicionada no final da tabela;
- Selecionando Insert > Table Objects > Insert Row Above. A nova linha adicionada
acima da linha selecionada;
- Selecionando Insert > Table Objects > Insert Row Below. A nova linha adicionada
abaixo da linha selecionada;
- Selecionando Insert > Table Objects > Insert Column to the Left. A nova coluna
adicionada esquerda da coluna selecionada.
- Selecionando Insert > Table Objects > Insert Column to the Right. A nova coluna
adicionada direita da coluna selecionada;
- Clicando com o boto direito do mouse e selecionando uma opo no submenu Table:



- Selecionando Modify > Table e escolha uma opo no submenu Table.
14.4.2 Excluindo uma Linha
Para remover uma linha da tabela, posicionamos o ponto de insero na linha e
executamos uma das opes:
- Selecionar Modify > Table > Delete Row;
- Clicando na tabela com o boto direito do mouse e selecionando Table > Delete Row
no menu.
14.4.3 Mesclando Linhas e Colunas
Aps selecionarmos as clulas a serem mescladas, executamos um destes comandos:
- Clicamos em Merge Cells no painel Properties:

- Selecionamos Modify > Table > Merge Cells;
- Clicamos com o boto direito do mouse e selecionamos Table > Merge Cells no
menu.
14.4.4 Dividindo Linhas e Colunas
Aps selecionarmos a clula a ser dividida (CTRL +um clique com o boto esquerdo do
mouse seleciona a clula), executamos um destes comandos:
- Clicamos em Split Cell, no painel Properties:

-Selecionamos Modify > Table > Split Cell;
- Clicamos com o boto direito do mouse e selecionamos Table > Split Cells no menu.
O nmero original de clulas restabelecido, caso algumas clulas tenham sido
mescladas anteriormente, ou uma clula pode ser dividida em qualquer nmero de linhas
ou colunas:



Unidade15FormulrioseMapa
Incorporado

Criando um formulrio
Usando objeto de formulrio
Processando o formulrio
Validando um formulrio
Incorporando mapa externo


Unidade 15
Formulrios e Mapa Incorporado
Os formulrios so parte essencial da maioria dos sites profissionais, pois so a nica
maneira, em HTML, para que um usurio envie dados para o site. Geralmente, os
formulrios so usados para:
- Pedidos de produtos;
- Registro de usurios;
- Especificao de critrios de pesquisa de bancos de dados;
- Gerenciamento de bancos de dados em sistemas intranet e extranet.
Os formulrios incluem diversos objetos que permitem que os usurios insiram dados ou
selecionem opes, alm de um boto para envio de dados para o servidor.
15.1 Criando um Formulrio
Para adicionarmos um formulrio, primeiro precisamos inserir uma tag de formulrio na
pgina. O formulrio contm objetos em que os usurios inserem informaes e
especifica o que deve ser feito com os dados. Para inserir um formulrio, devemos
escolher Insert > Form > Form ou clicar em Form na categoria Forms do Painel
Insert.

Linhas pontilhadas vermelhas definem visualmente a rea do formulrio na janela do
documento. Devemos colocar todos os elementos do formulrio dentro da rea
delimitada por pontilhados vermelhos. As linhas pontilhadas se expandem quando
inserimos contedo na rea de formulrio.


Para selecionarmos o formulrio, podemos:
- Clicar na linha pontilhada vermelha:

- Clicar em qualquer lugar dentro da rea de formulrio e clicar em <form #form1>no
seletor de tags:

O painel de Properties exibe as propriedades do formulrio:

- Form Name: usada para validao do formulrio com J avaScript. O nome deve ser
exclusivo na pgina;
- Action: caminho para a pgina ou o script que processar o formulrio;
- Method: determina como os dados do formulrio so transmitidos para o servidor;
- Enctype: especifica o tipo de codificao MIME dos dados enviados;
- Target: especifica a janela de exibio dos dados retornados pelo aplicativo que
processa o formulrio;
- Class: regra de estilo de classe para aplicar ao formulrio.
15.2 Usando Objetos de Formulrio
Os objetos de formulrios so usados para que o usurio possa inserir dados no
formulrio. Podemos permitir que os usurios insiram dados ou faam selees das
seguintes maneiras:
- Campos de texto: para insero de caracteres alfanumricos;
- Caixas de seleo: para seleo de vrias opes;
- Botes de opo: para seleo de uma ou vrias opes;
- Lista/menus: para seleo de vrias opes em uma lista rolante ou uma nica opo
em um menu pop-up;
- Botes: para executar uma ao
Os objetos de formulrio podem ser inseridos por meio deInsert > Form e, em seguida,
selecionando-se um dos objetos no submenu ou selecionando a categoria Forms na
barra de insero e clicar em um dos botes da barra.


4- Posicionar o cursor dentro do formulrio e clicar na opo Text Field, para
inserirmos um campo de texto:

5- Assim que inserimos um objeto de formulrio, devemos inserir um nome de rtulo
(label) para ele, selecionando um estilo e escolhendo se queremos que o rtulo fique
antes ou depois do item de formulrio.

A opo Attach label tag using for attribute a preferida para acessibilidade, mas
pode ter desempenho diferente em cada navegador. Se o navegador der suporte a essa
opo, veremos um retngulo de foco em torno do texto ou do objeto de formulrio
quando usar a tecla Tab para navegar pela pgina no navegador, facilitando a seleo do
objeto.
Tambm podemos inserir um equivalente de teclado (uma tecla) na caixa de texto
Access key para selecionar o objeto de formulrio no navegador. Por exemplo, se
queremos inserir B como tecla de acesso, o usurio pressionar Control+B para ir para o
objeto de formulrio no navegador.
O Tab index define a ordem de tabulao do objeto de formulrio. Isso til se houver
links ou objetos de formulrio na pgina e queremos que o usurio navegue com tab por


eles em uma ordem especfica. Se definirmos o ndice de tabulao de um objeto,
certifique-se de definir tambm para os outros objetos.
Importante: Se clicarmos em Cancel na caixa de dilogo, o Dreamweaver inserir o
objeto de formulrio, mas no adicionar qualquer atributo de acessibilidade a ele.
Quando selecionamos um objeto de texto temos as seguintes propriedades para ele:

- TextField: o nome do campo de texto;
- Char Width: o nmero mximo de caracteres visveis no campo;
- Max Chars: (campo de texto e de senha) o nmero mximo de caracteres que o
usurio pode digitar no campo;
- Type: Single line (uma nica linha), Multiline (vrias linhas) e Password (senha);
- Class: regra de estilo para formatar o campo de texto;
- Init Val: texto padro que aparece no campo quando a pgina carregada.
- Disabled: o campo fica desabilitado.
- Read-only: o campo fica habilitado, porm no ser possvel edit-lo

Para inserir uma caixa de seleo, que permite que os usurios escolham uma ou mais
opes em um grupo de opes relacionadas, devemos clicar na opo Checkbox e
digitar o texto correspondente a opo. Os usurios podem marcar ou desmarcar uma
opo de caixa de seleo.
As propriedades da caixa de seleo so:
- Checkbox Name: um nome exclusivo para a caixa de seleo;
- Checked Value: valor enviado se a caixa de seleo for selecionada;
- Initial State: Checked (a caixa de seleo marcada inicialmente) e Unchecked (a
caixa de seleo no marcada).
Podemos inserir um campo list/menu com vrias opes de escolha para o usurio.
No final, devemos inserir os botes, que so usados para enviar formulrios ou para
redefinir todos os campos a seus valores iniciais.



As outras propriedades para o Button so as seguintes:
- Action : Submit form (enviar formulrio), Reset form (redefinir formulrio) e None (os
botes sem ao so usados para vincular a outros documentos ou para executar
comandos J avaScript);
- Class: regra de estilo de classe a ser aplicada para formatao.
15.3 Processando o Formulrio
Um formulrio HTML sempre acompanha uma ao, que uma das propriedades do
formulrio.
A ao especifica uma URL que processa o formulrio. A URL pode apontar para:
- Um endereo de e-mail. Neste caso, os dados do formulrio so enviados em um e-
mail para um endereo especificado e o navegador recarrega a pgina do formulrio;
- Uma pgina de aplicativo no servidor, como uma pgina do ColdFusion ou J SP, que
processa os dados do formulrio, talvez os usando para pesquisar ou atualizar uma tabela
de banco de dados e, em seguida, retornando os resultados para o navegador como
HTML;
- Um programa CGI (Common Gateway Interface), escrito em uma linguagem como
Perl ou J ava, que processa os dados da mesma maneira que uma pgina de aplicativo no
servidor, e redireciona a solicitao para outra pgina HTML a ser retornada para o
navegador.

O atributo Method do formulrio determina a maneira como os dados so enviados para
o servidor. Os valores possveis so:
- GET: o valor padro para HTML. Os dados do formulrio so enviados na seqncia
de caracteres de consulta da URL, como neste exemplo:
http://www.site.com/action.cgi?name=Jane&age=33
Em que as duas entradas de formulrio name=J ane e age=33 so enviadas para
action.cgi para processamento.
- POST : os dados so enviados no cabealho HTML, invisvel para o usurio.
15.4 Validando um Formulrio
A ao Validate Form verifica o contedo de campos de texto especificados em um
formulrio a fim de garantir que o usurio tenha inserido as informaes adequadas. Seja
acidental ou intencionalmente, s vezes os usurios inserem informaes erradas ou


ignoram campos. Em vez de aguardar at que o formulrio seja enviado, podemos
verificar os dados medida que os usurios os inserirem ou antes que o formulrio seja
enviado para o servidor.
Podemos anexar a ao a um campo de texto no formulrio, que valida os campos
medida que os usurios digitam valores neles, ou pode anexar a ao ao boto de envio,
que ento verifica diversos campos de uma s vez. Anexar essa ao a um formulrio
impede que o usurio envie o formulrio se houver erros.
Para validarmos o formulrio de uma s vez, selecione o boto Enviar e, no painel
Behaviors, clique no sinal de + escolhendo a opo: Validate Form.
Na caixa de dilogo Validate Form, selecione um campo nomeado na lista e seleciona as
regras de validao desejadas para cada campo de texto:
- Required: selecione se for obrigatrio que o campo contenha dados;
- Use Anything: selecione se o campo puder conter qualquer tipo de dado;
- Use E-mail address: verifica se o campo contm o smbolo @;
- Use Number: verifica se o campo contm somente nmeros;
- Use Number From: verifica se o campo contm um nmero em um determinado
intervalo.

Assim que adicionarmos um comportamento, podemos alterar o evento que ativa a ao,
neste caso, a ao Validate Form.
Quando adicionamos a ao Validate Form ao boto de envio, o evento que ativa a ao
quando o usurio clica no boto. No painel Behaviors, ao seria onClick:


Se quisermos selecionar um campo de texto no formulrio e anexar a ao Validate
Form, o evento que deve ativar a ao quando o usurio usa a tecla Tab ou passa para
o campo seguinte no formulrio a ao no painel Behaviors seria onBlur.

LABORATRIO
TAREFA 1 CRIAO DO FORMULRIO DE NEWSLETTER
1. Abra o arquivo principal.dwt e abaixo do texto Preencha seus dados e receba todas
as novidades do nosso site por e-mail. Tecle ENTER e deixe o cursor posicionado
abaixo.
2. Insira um formulrio:

3. Dentro da tag form criada, digite a frase: Nome: e tecle ENTER


4. Insira um campo Text Field, e nos atributos faa a seguinte configurao:

5. Deixe o cursor piscando aps o campo inserido anteriormente, e tecle ENTER, e
estando abaixo do campo, digite: e-mail:
6. Abaixo do texto anterior, insira novamente um campo Text Field, com ID: email e
sem inserir label tag.
7. Ajuste as larguras das duas Text Fields inseridas anteriormente, adequando ao site.
8. Agora, abaixo da Text Field do e-mail, insira um Boto no formulrio, tipo Submit,
ID: enviar e Value: OK.
Nota: No se preocupe agora com o visual do boto criado, pois na Tarefa 2 ser
solicitado no momento adequado.
9. Salve o template e atualize-o para as outras pginas.

TAREFA 2 CRIAO DO FORMULRIO DE CONTATO/FALE CONOSCO
1. Abrir o arquivo faleconosco.html, e aps a frase Se preferir, preencha o formulrio
abaixo: tecle ENTER e insira um formulrio.
2. Dentro da tag form criada, digite a frase: Digite seu nome: e tecle ENTER


3. Insira um campo Text Field, e nos atributos faa a seguinte configurao:

4. Deixe o cursor piscando aps o campo inserido anteriormente, e tecle ENTER, e
estando abaixo do campo, digite: Endereo de e-mail:
5. Abaixo do texto anterior, insira novamente um campo Text Field, com ID: email e
sem inserir label tag.
6. Abaixo do campo para preenchimento do e-mail, insira o texto: Mensagem:
7. Aps o texto mensagem tecle ENTER e insira uma Textarea, configurando a ID como
mensagem.
8. Agora, abaixo da Textarea, insira um Boto no formulrio, tipo Submit, ID: enviar
e Value: Enviar.
At ento, voc ter esta tela (tecle F12 para visualizar):


9. Para corrigir a lista, que est aparecendo os marcadores fora da margem, configure
uma linha de CSS da seguinte forma:


10. E na categoria Box, configure da seguinte forma:

11. Vamos personalizar o boto enviar criando no estilo.css uma classe, para isto, clique
em New CSS Rule (no Painel CSS Style) do tipo Class, com o nome de botao_form.
12. Na categoria Type, escolha a fonte em negrito e cor da letra #3E7659.


13. Em Background, escolha a cor: #DBEEE4.
14. Na categoria Box, configure padding de 5px para todos os lados.
15. Na categoria Border, escolha uma borda slida de 1px e cor #3E7659.
16. Agora aplique a classe criada ao boto, selecionando o boto e escolhendo a classe
pelas propriedades:

17. Aproveite a classe criada para este boto e crie uma classe para o boto que est no
arquivo principal.dwt.
15.5 Incorporando mapa externo
Muitos sites apresentam aos seus usurios mapas de localizao incorporados na pgina
de contato. O servio mais usado atualmente do Google Maps
(www.google.com/maps).
Para incorporar o mapa no seu site siga estes passos:
Acesse o site do servio Google Maps
Digite o endereo de pesquisa. Ex: Cristovao Colombo, 1496 Porto Alegre,RS


Localizando o endereo desejado, clique em Link (canto superior direito do mapa):

Aps, para personalizar o tamanho do mapa que ser inserido no site, clique no link
Personalizar e visualizar mapa incorporado.



No final desta tela voc encontra o cdigo fonte para insero do mapa no seu HTML. No
esquea que deve ser copiado este cdigo completo e colado no cdigo HTML exatamente onde
voc pretende que o mapa seja inserido.



LABORATRIO 2
TAREFA 1 - INSERINDO UM MAPA NA PGINA faleconosco.html
Iremos dividir o espao que temos da div conteudo da pgina faleconsco em duas, uma parte
(esquerda) para o que j foi feito e outra para o mapa de localizao (direita).
Ao termino deste exerccio teremos esta tela de contato no site da AlfaAdventure:

1. Primeiramente, selecione pelo cdigo fonte todo o contedo j inserido na div ID conteudo,
conforme imagem abaixo:



2. Clique no boto Insert Div Tag, e no campo insert deixe a opo Wrap Div Tag, clicando
posteriormente no boto New CSS Rule, configurando assim:



3. Na categoria Box, configure a largura para 50% e o Float para left.



4. Clique em OK nas janelas e perceba que o conteudo que antes ocupava o espao total, usa
apenas 50% da tela.
Agora criaremos a div que completar o espado da direita e nela ser inserido o mapa.
5. Posicione o cursor no cdigo fonte aps o termino da div de classe conteudo_esquerda.

Aps, clique no boto Insert Div Tag, deixe marcado a opo At insert point e clique no boto
New CSS Rule. D o nome da classe de conteudo_direita e deixe a configurao para o arquivo
estilo.css.
6. Configure na categoria Box para flutuar a direita e ter largura de 48%, com margem a direita
de 2% para completar o espao disponvel e dar margem da div que est na esquerda.
7. Apague o conteudo da div criada anteriormente e escreva Mapa, aps selecione esta palavra e
configure como ttulo H1.
8. Abaixo do ttulo Mapa, cole no cdigo HTML o mapa do endereo da empresa, personalizando
o tamanho para 300X300
9. Tecle F12 e confira o mapa. Note que o campo Textarea de mensagem pode estar maior do que
deveria, atrapalhando o visual do site. Configure o campo para ter largura menor.
10. Salve todos os arquivos


Unidade16 SpryFramework

Menus no Dreamweaver CS5
Tabbed Panels
Accordion
Collapsible Panel


Unidade 16
Spry Framework
16.1 Menus no Dreamweaver CS5
Com a nova verso do Dreamweaver, criar menus ficou bem mais simples e prtico,
atravs da aba Spry.
O Spry o framework da Adobe para desenvolvimento usando Ajax e est licenciado
sob BSD License. O Spry foi projetado com a inteno de facilitar o desenvolvimento,
ele inclui bibliotecas de cdigo, linguagens de script e outros recursos para ajudar a
desenvolver diferentes componentes de um projeto.
Devemos selecionar a categoria Spry no Painel Insert.

Selecionar a opo Spry Menu Bar.
Devemos selecionar qual ser a posio do menu.

Observe que o Dreamweaver CS5 j montou o menu horizontal ou vertical na pgina:


Devemos clicar na guia Spry Menu Bar que esta em volta do menu na cor azul para
mostrarmos todas as propriedades do menu

1- Nome do menu.
2- Botes para adicionar ou remover itens ao menu do primeiro nvel, o sinal de mais
adiciona e o sinal de menos remove.
3- Botes para ordenar os itens do menu do primeiro nvel.
4- Caixa que mostrar os itens do menu do primeiro nvel, selecione um item nessa caixa
para pode mudar seu nome e adicionar um link nas etapas 7, 8 e 9.
5- Caixa com as itens do segundo nvel do menu, possui os botes para adicionar ou
remover itens e para ordenar os itens, selecione um item nessa caixa para pode mudar
sua configurao nas etapas 7, 8 e 9.
6- Caixa com as itens do terceiro nvel do menu, possui os botes para adicionar ou
remover itens e para ordenamento, selecione um item nessa caixa para pode mudar sua
configurao nas etapas 7, 8 e 9.
7- Nome do item ou nome da opo do menu selecionado.
8- Link do item selecionado.
9- Ttulo e Target do item selecionado.
10- Boto para remover o estilo do menu.
Agora s personalizar o menu, conforme sua necessidade.
Veja alguns exemplos deste menu no link:
http://labs.adobe.com/technologies/spry/samples/menubar/MenuBarSample.html


16.2 Tabbed Panels
Na aba Spry, temos os Spry Tabbed Panels, os quais so um jogo dos painis que
podem armazenar um contedo em um espao compacto. Os visores do local escondem
ou revelam o ndice armazenado nos painis tabulados fazendo aparecer aba do painel
correspondente. Os painis do widget abrem conforme o usurio navega na pgina.

http://labs.adobe.com/technologies/spry/samples/tabbedpanels/tabbed_panel_sampl
e.htm
16.3 Accordion
Temos tambm o Spry Accordion, o qual um jogo dos painis dobrveis que podem
armazenar uma quantidade grande de contedo em um espao. Os usurios escondem ou
revelam o contedo armazenado no acordeo abrindo a aba do painel.

16.4 Collapsible Panel
Por fim temos o Spry Collapsible Panel:


Quando utilizamos algum recurso do Spry e posteriormente salvamos a pgina (ou site),
exibido o painel Copy Dependent Files, o qual copia para o seu site, configurado no
Dreamweaver, os arquivos relacionados ao recurso utilizado. Alm de copiar os
arquivos, ele lhe informa quais so os arquivos e exibe um alerta para lembrar-lhe de
enviar os arquivos para o servidor na Web;


Unidade17 Laboratrios

Criando pginas HTML
Criando pgina de vdeos
Exerccios para finalizao do website
Fixao do contedo


Unidade 17
Laboratrios
17.1 Exerccios de Fixao Pgina com vdeos
Neste exerccios criaremos a pgina de vdeos do site, incorporando vdeos do
YouTube. (http://www.youtube.com)
1. V ao painel Assets, e no template clique com o boto direito no template e escolha a
opo New From Template.

2. Salve o arquivo que foi gerado com o nome videos.html
3. No espao editvel de contedo, digite o ttulo: Vdeos e coloque-o entre a tag H1
4. Abaixo do ttulo, digite: Veja nossos vdeos: entre um pargrafo.
5. Agora entre no site do YouTube e localize vdeos relacionados a turismo ecolgico, e
busque o boto Incorporar

No boto incorporar voc pode escolher o tamanho a ser utilizado no site, bem como as
cores:


6. Copie o cdigo fonte aps a personalizao e cole-o abaixo do pargrafo criado dentro
da div de contedo, junto ao cdigo HMTL.
7. Altere o ttulo da pgina:

8. Salve o arquivo.
9. Abra o template principal.dwt e faa o link da imagem da cmera para o arquivo
vdeos.html
10. Salve o template.
17.2 Exerccios de Fixao Pgina Nacional e
Internacional
Este exerccio tem por objetivo criar as pginas de roteiros Nacionais e Internacionais da
agncia de ecoturismo AlfaAdventure.
Neste ser realizado uma lista de roteiros, que posteriormente sero vinclulados a
pginas individuais de cada roteiro.
2. Salve o arquivo que foi gerado com o nome nacional.html
3. Coloque o ttulo da pgina AlfaAdventure Roteiros Nacionais


4. Apague o contedo da div conteudo e importe o arquivo de texto com o nome
Nacional.doc, que encontra-se na pasta de textos. (File/Import/Word Document)
5. Selecione o primeiro pargrafo e altere este ttulo para H1:

6. Selecione todos os pargrafos com nome dos roteiros e configure marcadores,
chegando neste resultado:

7. Repita os passos para criar o arquivo internacional.html, importando o arquivo de
texto chamado Internacional.doc, at chegar no mesmo resultado do arquivo de roteiros
nacionais.
17.3 Exerccios de Fixao Pginas de Roteiros
Estes exerccios tem por objetivo criar as pginas de roteiros Nacionais e Internacionais
da agncia de ecoturismo AlfaAdventure.
Iniciaremos utilizando o template como base para a pgina de um roteiro, as outras
pginas seguem exatamente a mesma lgica, porm com outro nome, imagens e textos.
Para facilitar o trabalho, todos os textos esto prontos em formato .DOC, podendo ser
importado para o HTML.
Criando uma pgina de um destino:


2. Salve o arquivo que foi gerado com o nome amazonia.html
3. Apague o contedo da div conteudo e importe o arquivo de texto com o nome do
roteiro em questo, que encontra-se na pasta de textos. (File/Import/Word Document)
4. Antes de todo o texto digite um ttulo para tal, EX: Amaznia e aps altere este ttulo
para H1:

5. Deixe o cursor piscando antes da primeira letra do primeiro pargrafo, e insira a
imagem correspondente a este destino, pelo boto Images do painel Insert. (as imagens
encontram-se na pasta imagens/fotos)
6. Preencha o texto alternativo da imagem relativo ao destino. Ex: Amaznia.
7. Voc pode aplicar a classe j existente chamada alinhaesquerda na imagem, ou criar
uma classe para alinhar a direita. Desta forma, a imagem no atrapalhar o texto.


8. Coloque o ttulo da pagina como AlfaAdventure Amaznia
9. Para os outros arquivos, repita o exerccio at finalizar todos os destinos.
17.4 Exerccios de Fixao Criando os Links
Este exerccios tem por objetivo criar os links do menu bem como dos roteiros, para
fazer com que o site tenha a navegabilidade adequada.
1. Abra o arquivo principal.dwt.
2. Selecione o texto Home do menu, e vincule o link com o arquivo index.html

3. Repita a operao para os outros quatro itens de menu (Agncia, Nacional,
Internacional e Fale Conosco), cada um para o seu respectivo arquivo.


Unidade18 Testandoosite

Verificando links
Verificando a compatibilidade do Navegador
Executando Relatrios em um site


Unidade 18
Testando o Site
18.1 Verificando Links
Links quebrados so muito desagradveis para os usurios. Embora o Dreamweaver
funcione bem para corrigir links quando modificamos arquivos no site, deveremos
verific-los antes de fazer o upload das pginas para o servidor.
possvel verificar links no documento atual, em uma pasta dentro do site ou no site
inteiro. O Dreamweaver s verifica os links para outros documentos no site. Os links
externos so listados, mas no verificados.
Quando definiu nosso site inicialmente, selecionar a verificao de links com distino
de maisculas/minsculas. Se seu site estiver hospedado em um computador com UNIX,
como muitos esto, convm selecionar essa opo. Ao verificar seus links, o
Dreamweaver verifica o tamanho das letras no nome do arquivo, assim como o nome do
caminho.
Por exemplo, se existisse um arquivo chamado dvd.htm, um link para DVD.htm seria
indicado como erro.
Para alterar as definies de um site, selecione Site > Manage Sites e edite o site atual.
Na categoria Local Info, selecione Use case-sensitive link checking.
Com o mesmo arquivo aberto clicar em Site > Check Links Sitewide.
O relatrio exibido no painel Link Checker do grupo de painis Results:

O Dreamweaver retorna diversos relatrios sobre os links existentes em sua pgina. Para
ver outro relatrio, selecione-o no menu pop-up Show:
As opes de relatrio so:
- Broken Links: links quebrados;
- External Links: links externos no site;
- Orphaned Files: Arquivos rfos (Orphaned files) no tm links direcionados para
eles em outras pginas do site; portanto, esse painel s conter dados se estivermos


verificando o site inteiro, no uma pgina individual. Alguns desses arquivos podem ser
recursos, como arquivos fonte do Fireworks (png), que convm manter dentro do site.
Outros podem ser arquivos desatualizados, que convm excluir antes de fazer o upload
dos arquivos para o servidor.
18.2 Verificando a Compatibilidade do Navegador
Em algum momento na etapa de desenvolvimento da web, talvez seja necessrio prever
os navegadores dos usurios, com base no objetivo do site e no que j sabemos sobre
eles.
Geralmente, os sites de intranets so os mais fceis, porque provavelmente existir um
navegador padro na organizao.
Entretanto, at mesmo para os sites pblicos, possvel fazer suposies razoveis sobre
os usurios. Por exemplo, se seu site fornece notcias e vende produtos relacionados ao
desenvolvimento da Web, podemos esperar que os usurios tenham verses atualizadas
do Internet Explorer, Netscape, Firefox ou Safari.
A verificao dos navegadores testa o HTML existente em suas pginas, para verificar
se alguma tag ou atributo no suportado pelos navegadores de destino. No
Dreamweaver, possvel verificar a compatibilidade dos navegadores de duas maneiras:
- Usando o recurso de verificao automtica de navegador;
- Verificando manualmente a compatibilidade do navegador.
4- Para escolher os navegadores de destino para o Dreamweaver verificar, selecionar
Settings no menu Check Page , na barra de ferramentas do documento.
Selecione cada navegador a ser verificado e depois a verso que deseja testar a
compatibilidade, no menu pop-up correspondente. Por exemplo, na caixa de dilogo
abaixo, o Firefox 1.0 e posterior, o Internet Explorer 7.0 e posterior, e o Netscape 6.0 e
acima esto selecionados para a verificao de navegador:

Quando clicamos em OK exibido o painel Results e na opo Browser Compatibility
Check so exibidos todos os erros encontrados:


possvel clicar duas vezes em um erro para selecionar o cdigo que o gerou.
18.3 Executando Relatrios em um Site
possvel gerar relatrios do site para vrios itens HTML por meio do comando
Reports. Pode procurar tags de fonte aninhadas, Texto Alt ausente, documentos sem
ttulo e outros itens. Aps executar o relatrio, poderemos salv-lo como um arquivo
XML.
5- Selecionar Site > Reports e, na caixa de dilogo Reports, escolher as opes a serem
verificadas:

Podemos verificar no documento atual, no site inteiro, em arquivos selecionados ou em
uma pasta existente no site.
- Checked Out By: lista de arquivos verificados por um membro da equipe;
- Design Notes: lista de todas as notas do projeto;


- Recently Modified: lista de todos os arquivos atualizados recentemente;
- Combinable Nested Font Tags: lista de tags de fonte aninhadas que podiam ser
combinadas em uma nica tag para simplificar o HTML;
- Accessibility: lista de diretrizes ausentes da Seo 508;
- Missing Alt Text: lista textos alternativos ausentes para imagens. Esses textos so
importantes para atender aos padres de acessibilidade;
- Redundant Nested Tags: lista de tags aninhadas inteis;
- Removable Empty Tags: lista de tags vazias que podem ser removidas sem afetar o
contedo ou o layout da pgina;
- Untitled Documents: lista de documentos sem ttulos.
6- Clicar no boto Run e veja o resultado no painel Results:

7- Agora s clicar no boto Save Report para salvar o relatrio.


Unidade18FazendoUploadde
arquivos

Conectando a um site remoto
Definindo um site remoto
Mascarando pastas e arquivos
Conectando-se ao servidor
Sincronizando arquivos


Unidade 19
Fazendo Upload de Arquivos
19.1 Conectando a um Site Remoto
Quando terminamos o teste local de nossos arquivos, temos que envi-los para o
servidor Web. Quando transferimos arquivos de um site local para um site remoto, o
Dreamweaver mantm uma estrutura exata de pastas nos dois sites. Se uma pasta no
existir no site remoto, o Dreamweaver a criar. Esse recurso assegura que os links
relativos criados no site local continuem funcionando no site remoto, porque os sites so
idnticos.
Usaremos o comando Manage Sites para configurar a conexo remota. Aps
configurarmos a pasta remota e o mtodo de conexo com o site remoto, possvel
transferir os arquivos locais.
1- Selecionar Site > Manage Sites.
2- Selecionar o site que necessita da conexo remota.
3- Clicar em Edit.
4- Selecionar a opo Server na lateral e clicar no boto (+) Add new Server:



5. Preecha os dados conforme voc recebeu do seu provedor de hospedagem:

- Server Name : Nome para identificao pelo Dreamweaver;
- FTP Adress : nome Internet ou endereo IP do host de FTP;
- Login and Password: informaes de acesso;
- Root Directory: Diretrio que as informaes ficaro armazenadas;
- Web URL: endereo do website;
6. Ao clicar no boto TEST para verificar se as informaes de logon no FTP esto
corretas, poder aparecer uma mensagem do Firewall do Windows:



19.2 Mascarando Pastas e Arquivos
O mascaramento de sites permite excluir tipos de arquivos especficos e pastas de
operaes, como um Get (Obter) ou Put (Colocar). Por exemplo, no necessrio que os
arquivos fonte do Photoshop ou do Flash fiquem no servidor. Os arquivos mascarados
permanecem no site local e no so transferidos por upload para o servidor, a no ser
que anulemos manualmente as configuraes mascaradas.
possvel indicar tipos de arquivos especficos para o Dreamweaver mascarar, usando a
extenso do arquivo ou qualquer padro existente no final do nome do arquivo.
8- Para mascarar tipos de arquivos clicar em Site > Manege Sites > AlfaAdventure e
clicar no boto Edit.
9- No item Advanced Settings/Cloaking marcar a opo: Enable cloaking.
10- Selecionar Cloak Files Ending With e digitar o tipo dos arquivos na caixas de
texto. Separar os tipos de arquivos com um espao; no utilizar vrgulas ou caracteres de
ponto-e-vrgula:

11- Clicar em OK e aparecer uma linha vermelha riscando os cones dos arquivos que
estaro mascarados


19.3 Conectando-se ao Servidor FTP
Para exibir os sites locais e remotos simultaneamente, clicar em Expand/Collapse na
barra de ferramentas do painel de arquivos.
16- Para ver os arquivos existentes no site remoto, antes de colocarmos os arquivos,
clique em Connect . Se o painel de arquivos se expandir, veremos o site remoto
esquerda e o site local direita.
Para copiar arquivos do site local para o site remoto, Podemos usar Put ou Check In. Se
formos nica pessoa trabalhando no site, podemos utilizar os comandos Get e Put
para copiar arquivos. Se estiver trabalhando em equipe, poder utilizar o recurso
Check In/Check Out para copiar arquivos.
17- Selecionar a pasta AlfaAdventure, que ser copiada para o site remoto e clique em
Put Files . Se no existir uma conexo estabelecida, o Dreamweaver se conectar ao
site remoto e depois copiar os arquivos:

19.4 Sincronizando Arquivos
Assim que fizermos o upload dos arquivos locais para o site remoto, poderemos
sincronizar os arquivos entre os dois sites. Essa ao s faz o upload dos arquivos mais
recentes, modificados localmente.
17- Para sincronizar os arquivos devemos selecionar: Site > Synchronize


18- Na caixa de dilogo Synchronize Files, escolher entre sincronizar arquivos
selecionados ou o sistema inteiro no menu pop-up Synchronize.
Escolher a opo desejada no menu pop-up Direction. As opes so:
Put newer files to remote, Get newer files from remote ou Get and Put newer files.

4. Clicar em Preview para iniciar o processo.
exibido um relatrio dos arquivos que precisam ser sincronizados. Assim, podemos
atualizar todos os arquivos ou desmarcar os arquivos na lista.
Quando clicarmos em OK, todos os arquivos selecionados sero atualizados:


Unidade19 Anexo1 PrincipaisTags
HTML


Unidade 20- Anexo 1
Principais Tags
Neste anexo apresentamos todas as tabelas de tags HTML apresentadas nas unidades
anteriores, para facilitar a consulta:

TAG O QUE FAZ
 Insere comentrios nas pginas
<html> Toda pgina HTML deve estar entre o tag de incio de um
documento HTML e o tag de fim deste documento.
<head> Envolvem a seo de cabealho do documento, no qual so
especificadas informaes que no so exibidas na pgina,
como ttulo do documento e informaes sobre o assunto da
pgina.
<title> Indica o ttulo do documento para o Browser. Geralmente os
Browsers apresentam este ttulo na barra de ttulo da sua
Janela no Windows
<body> Envolvem a seo de corpo do documento. Aqui fica o
contedo principal da Home Page. Opcionalmente podemos
indicar um arquivo de imagem para formar o fundo, usando
a opo: BACKGROUND.
<br> Insere uma quebra de linha

TAG O QUE FAZ
<hn> Marca um ttulo. Sendo que n representa um valor que
pode ser de 1 a 6, o tamanho muda de forma decrescente,
ou seja, o nmero 1 o maior tamanho do ttulo.
<hr> Insere uma linha horizontal
<p> Marca um pargrafo
<strong> Coloca o texto em negrito
<em> Coloca o texto em itlico
<font> Modifica a formatao do texto.
Atributos:
Size = define o tamanho da letra. Ex: <font
size=5>Texto</font>
Face = define o estilo da letra. Ex: <font
face=verdana>Texto</font>


Color = define a cor da letra. Ex: <font
color=red>Texto</font>

TAG O QUE FAZ
<ol> Marca o incio e o fim de uma lista ordenada. Recebem na
primeira linha um nmero ou letra.
Atributos:
Start = especifica o nmero a partir do qual os itens
comeam a ser contados. Ex: <ol start=3>
Type = modifica o tipo do numerador que pode ser: nmero,
letras ou algarismo romano.
<ul> Marca o incio e o fim de uma lista no ordenada, ou seja,
os itens da lista recebem smbolos na primeira linha.

Atributos
Type = modifica o tipo do marcador (smbolo), que pode ser:
Circle = um crculo vazio.
Disc = um crculo cheio.
Square = um quadrado cheio
<li> Marca um item de uma lista, ordenada ou no ordenada.

TAG O QUE FAZ
<img> Insere uma imagem
Atributos
src indica o nome da imagem a ser carregado.
align=middle centraliza o base do texto com o centro da
imagem
align=left faz a imagem flutuar a esquerda enquanto o texto
circunda imagem direita.
align=top alinha o texto no topo
align=right faz a imagem flutuar a direita enquanto o texto
circunda imagem esquerda.
alt=n indica o texto para ser exibido quando o navegador
no exibe a imagem. Sendo que n o ttulo que identifique
a imagem.
Exemplo: <img src=fig.jp alt= Esta uma imagem legal >


TAG O QUE FAZ
<a> Define um link
Atributos
Href: indica o endereo do link.
Target: define onde o link ser aberto: _blank define que
ser aberta uma nova janela.

TAG O QUE FAZ
<table> Define uma tabela. Antes e depois de uma tabela, acontece
sempre uma quebra de linha.
Atributos
Border: define espessura da borda da tabela
Cellspacing: espao entre cada clula
Cellpadding: distncia entre borda e contedo de cada
clula.
Width: largura da tabela, em pixels ou valor percentual.
<tr> Define uma linha normal da tabela (table row).
Atributos
Align: valores left, right e center definem o alinhamento
horizontal.
Valign: valores top, middle e bottom definem o alinhamento
vertical.
<td> Esta a marcao que define cada clula de uma tabela.
As clulas de uma tabela devem sempre aparecer entre as
marcaes de linhas (<tr> e </tr>). Como padro, o texto
nas clulas alinhado a esquerda.
Atributos
Align: valores left, right e center definem o alinhamento
horizontal.
Valign: valores top, middle e bottom definem o alinhamento
vertical.
Nowrap: no h quebra de linhas dentro das clulas
Colspan: nmero de colunas que a clula ir ocupar
Rowspan: nmero de linhas que a clula ir ocupar
Width: largura da clula, em pixels ou valor percentual


<th> Desta forma so definidos os ttulos de uma tabela. Estes
podem ser posicionados em qualquer clula. A diferena
entre a marcao de clula e ttulo de clula que o ttulo
aparece em negrito.
Atributos: os mesmos apresentados acima, para td

TAG O QUE FAZ
<form> Define um formulrio
Atributos
method: get, que envia as informaes na prpria URL, ou
post, que envia de forma no visvel para o usurio
action: url que ser chamada, a priori um aplicativo capaz
de tratar os dados enviados pelo formulrio (PHP, ASP,
JSP).
<input> Define uma entrada de dados
Atributos
Type: text, campo tipo texto; password, para senhas;
hidden, no aparece para o usurio; checkbox, para
marcar; radio, para escolher entre um conjunto de opes.
submit cria um boto para enviar os dados e reset um
boto para limpar o formulrio.
Name: nome do campo
Value: valor pr-definido para o campo
Size: tamanho do campo a ser exibido
Maxlength: tamanho mximo de caracteres
Checked: para campos checkbox e radio, define como
marcado
<textarea> Define uma entrada de texto com vrias linhas
Atributos
Rows: nmero de linhas
Cols: nmero de colunas
<select> Define uma lista de opes para selecionar
Atributos
Name: nome do campo
Multiple: permite selecionar vrios campos da lista
Site: define o nmero de linhas a serem exibidas


<option> Item de uma lista aberta
Atributos
Value: valor do campo se este item for selecionado
Selected: indica que este valor est selecionado

Apostila DW Cs5

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Apostila DW Cs5

Caricato da

Copyright:

Formati disponibili

Lgica de Programao em Javascript

Adobe Dreamweaver CS5

Potrebbero piacerti anche