Adobe Dreamweaver CS4 PDF

Lgica de Programao em Javascript
Adobe Dreamweaver CS4 Desenvolvimento de Websites Interativos
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.
12/ 2009 - Verso 1.1
Alfamdia Prow (51) 2111-1666 www.alfamidia.com.br
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
2009 Alfamidia LTDA.
Adobe Dreamweaver CS4 Desenvolvimento de Websites
UNIDADE 1 1.1 1.2
ORGANIZAO DO CURSO................................................................................................................................10
SOBRE O CURSO ............................................................................................................................................. 10 ESTRUTURA DO CURSO ................................................................................................................................... 10 INTRODUO AO HTML E WEB STANDARDS .................................................................................................12
UNIDADE 2
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 Exemplo de HTML com Tags Bsicas .................................................................................................. 15 2.7.1 Principais Tags HTML ......................................................................................................................... 16 2.7.2 2.8 CORES EM HTML ........................................................................................................................................... 16 UNIDADE 3 XHTML ...................................................................................................................................................................19
3.1 RAZES PARA EXISTIR O XHTML.................................................................................................................. 19 3.2 REGRAS DE SINTAXE ...................................................................................................................................... 20 Caixa Baixa .......................................................................................................................................... 20 3.2.1 Elementos sem Contedo ..................................................................................................................... 20 3.2.2 Aninhamento ........................................................................................................................................ 21 3.2.3 Valores dos Atributos ........................................................................................................................... 21 3.2.4 Atributo NAME..................................................................................................................................... 22 3.2.5 Elementos Obrigatrios ....................................................................................................................... 22 3.2.6 Declarao DOCTYPE ........................................................................................................................ 22 3.2.7 3.3 PGINA BSICA XHTML: XHTML.HTML ........................................................................................................ 23 3.4 LISTAS ............................................................................................................................................................ 23 Listas Simples Exemplo 1 .................................................................................................................. 24 3.4.1 Listas Simples Exemplo 2 .................................................................................................................. 25 3.4.2 Listas com Subnveis ............................................................................................................................ 27 3.4.3 3.5 LINKS ............................................................................................................................................................. 28 Adicionando Links de E-mail ............................................................................................................... 29 3.5.1 Exemplo de Links: links.html ............................................................................................................... 29 3.5.2 3.6 TABELAS ........................................................................................................................................................ 30 Construindo Tabelas ............................................................................................................................ 30 3.6.1 Exemplo de uma Tabela Simples .......................................................................................................... 31 3.6.2 Tabelas Mais Sofisticadas .................................................................................................................... 33 3.6.3 Layers - DIV ......................................................................................................................................... 35 3.6.4 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 Aplicando Estilos a Toda a Pgina HTML .......................................................................................... 42 4.6.1 Aplicando Estilos apenas uma Tag HTML Especfica ...................................................................... 42 4.6.2 Utilizando um Arquivo de Estilos Externo ........................................................................................... 43 4.6.3
2009 Processor Alfamidia LTDA.
Adobe Dreamweaver CS4 Desenvolvimento de Websites Interativos 4.7 FORMAS DE UTILIZAO DOS SELETORES ...................................................................................................... 43 Aplicando Estilos a uma Tag: .............................................................................................................. 44 4.7.1 Definindo Estilos para mais um Grupo de Tags .................................................................................. 44 4.7.2 Definindo uma Classe de Estilos .......................................................................................................... 45 4.7.3 Aplicando Estilos a uma palavra ou a um grupo pequeno de palavras ............................................... 46 4.7.4 Definindo um ID de Estilos .................................................................................................................. 46 4.7.5 UNIDADE 5 5.1 5.2 5.3 5.4 INTRODUO AO TABLELESS DESIGN ...........................................................................................................51
TABLELESS ..................................................................................................................................................... 51 PROBLEMAS NO DESIGN COM TABELAS .......................................................................................................... 51 DESIGN TABLELESS CSS BOX MODEL......................................................................................................... 51 UM EXEMPLO DE TABLELESS DESIGN ............................................................................................................ 52 CONHECENDO A INTERFACE DO DREAMWEAVER CS4................................................................................56
UNIDADE 6
6.1 SOBRE O ADOBE DREAMWEAVER ................................................................................................................... 56 6.2 ABRINDO O DREAMWEAVER........................................................................................................................... 56 6.3 REA DE TRABALHO DO DREAMWEAVER ...................................................................................................... 57 6.4 FERRAMENTAS SELECT, HAND E ZOOM.......................................................................................................... 59 6.5 BARRA DE FERRAMENTAS STANDARD............................................................................................................ 59 6.6 VISO GERAL DA BARRA DE FERRAMENTAS DE DOCUMENTO ......................................................................... 59 Viso geral da Janela Documento ....................................................................................................... 61 6.6.1 6.7 VISO GERAL DA BARRA DE FERRAMENTAS PADRO ..................................................................................... 62 6.8 VISO GERAL DA BARRA DE STATUS .............................................................................................................. 62 6.9 VISO GERAL DO PAINEL INSERIR................................................................................................................... 63 VISO GERAL DO PAINEL ARQUIVOS ......................................................................................................... 65 6.10 VISO GERAL DO PAINEL ESTILOS CSS ..................................................................................................... 65 6.11 UNIDADE 7 INICIANDO O PROJETO DE UM WEBSITE ........................................................................................................68
7.1 DEFININDO UM SITE LOCAL............................................................................................................................ 68 LABORATRIO .................................................................................................................................................... 70 7.2 CRIANDO UMA NOVA PGINA HTML ............................................................................................................ 70 7.3 SALVANDO UMA PGINA HTML .................................................................................................................... 71 7.4 PREFERNCIAS DO BROWSER ......................................................................................................................... 72 LABORATRIO ................................................................................................................................................. 74 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 Ttulos................................................................................................................................................... 77 8.2.1 LABORATRIO .................................................................................................................................................... 78 Pargrafos ........................................................................................................................................... 79 8.2.2 Quebra de Linha .................................................................................................................................. 79 8.2.3 LABORATRIO .................................................................................................................................................... 80 Listas .................................................................................................................................................... 80 8.2.4 Criao de uma nova lista ............................................................................................................... 81 8.2.4.1 Criao de uma lista usando um texto existente.............................................................................. 81 8.2.4.2 Mudando as propriedades de uma lista........................................................................................... 81 8.2.4.3 Remover uma lista ........................................................................................................................... 82 8.2.4.4 LABORATRIO .................................................................................................................................................... 82 8.3 ADICIONANDO CARACTERES ESPECIAIS ......................................................................................................... 84 LABORATRIO .................................................................................................................................................. 84 UNIDADE 9 APLICANDO FOLHAS DE ESTILOS EM CASCATA (CSS) ................................................................................87
2009 Processor Alfamdia LTDA.
Adobe Dreamweaver CS4 Desenvolvimento de Websites Interativos 9.1 CRIANDO ESTILOS .......................................................................................................................................... 87 9.2 USANDO PONTOS, PIXELS OU EMS PARA TAMANHOS DE FONTES ................................................................... 97 Tamanhos Relativos ............................................................................................................................. 98 9.2.1 Tamanhos Absolutos ............................................................................................................................ 98 9.2.2 LABORATRIO .................................................................................................................................................. 98 9.3 EDITANDO REGRAS DE ESTILO ..................................................................................................................... 101 9.4 CRIANDO ESTILOS DE CLASSE ...................................................................................................................... 101 LABORATRIO .................................................................................................................................................. 102 9.5 ANEXANDO FOLHAS DE ESTILOS EXTERNAS ................................................................................................ 105 LABORATRIO .................................................................................................................................................. 106 9.6 DUPLICANDO ESTILOS .................................................................................................................................. 108 LABORATRIO .................................................................................................................................................. 109 9.7 CRIANDO ESTILOS AVANADOS ................................................................................................................... 109 LABORATRIO .................................................................................................................................................. 109 Outro exemplo de pseudo-elemento : ................................................................................................. 111 9.7.1 9.8 CRIANDO UMA FOLHA DE ESTILOS EXTERNA ............................................................................................... 111 A Barra de Ferramentas Style Rendering .......................................................................................... 112 9.8.1 LABORATRIO .................................................................................................................................................. 112 UNIDADE 10 INSERINDO DIFERENTES MDIAS NO SITE ....................................................................................................116
IMAGENS NA WEB.................................................................................................................................... 116 10.1 USANDO A BARRA DE INSERO PARA IMAGENS .................................................................................... 117 10.2 REDIMENSIONANDO UMA IMAGEM .......................................................................................................... 118 10.3 ALINHAMENTOS E ESPAAMENTOS EM UMA IMAGEM ............................................................................. 121 10.4 USANDO O PAINEL ASSETS ...................................................................................................................... 122 10.5 LABORATRIO .................................................................................................................................................. 123 INSERINDO UM ARQUIVO DO FLASH ........................................................................................................ 125 10.6 ADICIONANDO UM VDEO DO FLASH ....................................................................................................... 127 10.7 UNIDADE 11 USANDO BIBLIOTECAS E MODELOS..............................................................................................................130
ITENS DE BIBLIOTECA .............................................................................................................................. 130 11.1 COLOCANDO ITENS DE BIBLIOTECA EM UMA PGINA.............................................................................. 132 11.2 MODIFICANDO ITENS DA BIBLIOTECA ..................................................................................................... 132 11.3 DESANEXANDO E EXCLUINDO ITENS DA BIBLIOTECA .............................................................................. 133 11.4 LABORATRIO .................................................................................................................................................. 134 CRIANDO MODELOS DE SITE.................................................................................................................... 135 11.5 LABORATRIO .................................................................................................................................................. 136 11.6 DEFININDO REGIES EDITVEIS .............................................................................................................. 136 USANDO MODELOS .................................................................................................................................. 137 11.7 APLICANDO UM MODELO A UMA PGINA EXISTENTE.............................................................................. 139 11.8 MODIFICANDO O MODELO ....................................................................................................................... 140 11.9 LABORATRIO .................................................................................................................................................. 141 UNIDADE 12 PROJETANDO LAYOUTS COM CSS ................................................................................................................143
USANDO CAMADAS PARA LAYOUT .......................................................................................................... 143 12.1 Manipulando as Propriedades da Camada ................................................................................... 145 12.1.1 CAMADAS ANINHADAS ............................................................................................................................ 146 12.2 USANDO RGUAS E GUIAS ....................................................................................................................... 147 12.3 ADICIONANDO CSS A CAMADAS ............................................................................................................. 149 12.4 PROJETANDO COM DIVS .......................................................................................................................... 151 12.5 Posicionamento Absoluto e Relativo ............................................................................................. 151 12.5.1 LABORATRIO .................................................................................................................................................. 152 Float .............................................................................................................................................. 156 12.5.2 LABORATRIO .................................................................................................................................................. 157
Adobe Dreamweaver CS4 Desenvolvimento de Websites Interativos 12.5.3 Clear .............................................................................................................................................. 170 LABORATRIO .................................................................................................................................................. 170 UNIDADE 13 NAVEGANDO NO SITE ......................................................................................................................................184
LINKS DE HIPERTEXTO............................................................................................................................. 184 13.1 Tipos de Link ................................................................................................................................. 184 13.1.1 CRIANDO LINKS PARA ARQUIVOS NO SITE .............................................................................................. 185 13.2 LABORATRIO .................................................................................................................................................. 185 ADICIONANDO LINKS DE E-MAIL ............................................................................................................. 187 13.3 LABORATRIO .................................................................................................................................................. 188 ALTERANDO CORES DO LINK................................................................................................................... 188 13.4 LABORATRIO .................................................................................................................................................. 190 PRIORIDADES DAS DECLARAES DOS LINKS........................................................................................... 191 13.5 LABORATRIO .................................................................................................................................................. 191 ADICIONANDO LINKS PARA PGINAS EXTERNAS NUMA NOVA JANELA .................................................... 193 13.6 LABORATRIO .................................................................................................................................................. 193 CRIANDO VRIOS LINKS DE UMA IMAGEM............................................................................................... 194 13.7 PROJETANDO LINKS DE NAVEGAO COM CSS ...................................................................................... 196 13.8 LABORATRIO .................................................................................................................................................. 197 UNIDADE 14 TABELAS ............................................................................................................................................................206
CRIANDO TABELAS .................................................................................................................................. 206 14.1 PROPRIEDADES DA TABELA ..................................................................................................................... 208 14.2 PROPRIEDADES DA CLULA ..................................................................................................................... 209 14.3 EDITANDO LINHAS................................................................................................................................... 210 14.4 Adicionando Linhas e Colunas ...................................................................................................... 210 14.4.1 Excluindo uma Linha..................................................................................................................... 211 14.4.2 Mesclando Linhas e Colunas......................................................................................................... 211 14.4.3 Dividindo Linhas e Colunas .......................................................................................................... 211 14.4.4 ORDENANDO TABELAS ............................................................................................................................ 212 14.5 UNIDADE 15 USANDO FORMULRIOS ..................................................................................................................................215
CRIANDO UM FORMULRIO ..................................................................................................................... 215 15.1 USANDO OBJETOS DE FORMULRIO ........................................................................................................ 216 15.2 PROCESSANDO O FORMULRIO ................................................................................................................ 219 15.3 VALIDANDO UM FORMULRIO................................................................................................................. 219 15.4 LABORATRIO .................................................................................................................................................. 221 UNIDADE 16 SPRY FRAMEWORK ..........................................................................................................................................225
MENUS NO DREAMWEAVER CS4 ............................................................................................................. 225 16.1 TABBED PANELS ...................................................................................................................................... 226 16.2 ACCORDION ............................................................................................................................................. 227 16.3 COLLAPSIBLE PANEL ............................................................................................................................... 227 16.4 LABORATRIO .................................................................................................................................................. 228 UNIDADE 17 17.1 17.2 17.3 17.4 TESTANDO O SITE.............................................................................................................................................236
VERIFICANDO ACESSIBILIDADE ............................................................................................................... 236 VERIFICANDO LINKS................................................................................................................................ 237 VERIFICANDO A COMPATIBILIDADE DO NAVEGADOR .............................................................................. 238 EXECUTANDO RELATRIOS EM UM SITE .................................................................................................. 239 FAZENDO UPLOAD DE ARQUIVOS .................................................................................................................242
UNIDADE 18 18.1 18.2
CONECTANDO A UM SITE REMOTO .......................................................................................................... 242 DEFININDO UM SITE REMOTO .................................................................................................................. 243
Adobe Dreamweaver CS4 Desenvolvimento de Websites Interativos 18.3 18.4 18.5 MASCARANDO PASTAS E ARQUIVOS ....................................................................................................... 244 CONECTANDO-SE AO SERVIDOR .............................................................................................................. 245 SINCRONIZANDO ARQUIVOS .................................................................................................................... 247 - ANEXO 1 PRINCIPAIS TAGS...........................................................................................................................250 - ANEXO 2 LAYOUTS .........................................................................................................................................256
UNIDADE 19 UNIDADE 20
Unidade 1 Organizao do Curso

Sobre o Curso Estrutura do Curso
Unidade 1 Organizao do Curso

1.1 Sobre o Curso
O curso Adobe Dreamweaver CS4: 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 a ferramenta Dreamweaver, uma ferramenta profissional para edio de pginas HTML. Apresentam, tambm, vrios elementos da linguagem HTML, intercalando com exerccios e exemplos prticos, para melhor absoro do contedo. As unidades seguintes mostram uma viso do CSS e Divs, que permitem controlar o layout das pginas HTML de forma muito mais eficiente e precisa. 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.
10
Unidade 2 Introduo ao HTML e Web Standars
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
11
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
12
2009 Alfamdia LTDA.
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 JavaScript) 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 Japo. 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.
13
2009 Alfamdia LTDA.
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. Novas especificaes HTML no sero mais definidas. HTML 4.1 o ltimo padro HTML, e agora substitudo pelo XHTML 1.0. No entanto, o XHTML no substancialmente diferente do HTML, sendo na verdade um subconjunto do HTML que segue as regras do XML. Assim sendo, ao dominarmos o HTML, estaremos tambm adquirindo os conhecimentos necessrios para desenvolver tambm em XHTML.
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
14
2009 Alfamdia LTDA.
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  <html> O QUE FAZ Insere comentrios nas pginas Toda pgina HTML deve estar entre o tag de incio de um documento HTML e o tag de fim deste documento. 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. Indica o ttulo do documento para o Browser. Geralmente os Browsers apresentam este ttulo na barra de ttulo da sua Janela no Windows 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. Insere uma quebra de linha
<head>
<title>
<body>
<br>
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> 
15
2009 Alfamdia LTDA.

Minha primeira pgina </body> </html>
2.7.2 Principais Tags HTML

<br> <p> <strong> <em> <h1> <hr> <div> <ul> <ol> <li> <img> <a> <table> <tr> <td> <form> Quebra de linha; Pargrafo; Negrito; Itllico; Padro para ttulos. Pode ser de <h1> a <h6>; Marca uma linha horizontal para dividir partes da pgina; Tag de diviso lgica; Listas com marcadores; Listas numeradas; Item da lista Insere imagem Define link Tag para criar tabelas; Tag para criar linha da tabela; Tag para criar clula da tabela; 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:
16
2009 Alfamdia LTDA.

<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 00 33 66 99 CC FF Valor do mesmo em decimal 0 51 102 153 204 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.
17
2009 Alfamdia LTDA.
Unidade 3 XHTML
Razes para existir o XHTML Regras de Sintaxe Pgina bsica XHTML Listas Links Tabelas
18
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. Novas especificaes HTML no sero mais definidas. HTML 4.01 o ltimo padro HTML, e agora substitudo pelo XHTML 1.0. Desenvolver em XHTML no substancialmente diferente de desenvolver em HTML, mas oferece diversos benefcios, principalmente para aplicaes mais complexas. 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>
19
2009 Alfamdia LTDA.
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.
20
2009 Alfamdia LTDA.
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: Incorreto:

<dl compact> <input checked> <input readonly> <input disabled> <option selected> <frame noresize>
Correto:
<dl compact="compact"> <input checked="checked" /> <input readonly="readonly" /> <input disabled="disabled" /> <option selected="selected" /> <frame noresize="noresize" />
21
2009 Alfamdia LTDA.
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
22
2009 Alfamdia LTDA.

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:
23
2009 Alfamdia LTDA.
<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"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Listas</title> </head> <body> <h3>Isto uma lista</h3>  <ol> <li>Item 1 </li> <li>Item 2 </li> <li>Item 3 </li> </ol>
24
2009 Alfamdia LTDA.

 <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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Listas</title> </head> <body> <h3>Isto uma listagem iniciando no nmero 4</h3> <ol start="4">
25
2009 Alfamdia LTDA.

<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>para designers </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>para designers </li> <li>alfamdia </li> </ol> </body> </html
26
2009 Alfamdia LTDA.
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Listas</title> </head> <body> <h3>Listagem e sublistagem</h3> <ol> <li>Item 1 <ul> <li type=disc>Item 1.1
27
2009 Alfamdia LTDA.

<li type=disc>Item 1.2 <li type=disc>Item 1.3 </ul> <li> Item 2 <ul> <li type=square >Item 2.1 <ul> <li type=circle>Item 2.1.1 <li type=circle>Item 2.1.2 <li type=circle>Item 2.1.3 </ul> <li type=circle>Item 2.2 <li type=circle>Item 2.3 </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.
28
2009 Alfamdia LTDA.
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 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. Ex.: <a href=mailto:email@provedor.com.br>E-mail</a>
3.5.2 Exemplo de Links: links.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>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 />
29
2009 Alfamdia LTDA.

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 est caindo em desuso, porm, 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:
30
2009 Alfamdia LTDA.
Adobe Dreamweaver CS4 Desenvolvimento de Websites Interativos <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>
31
2009 Alfamdia LTDA.

<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>
32
2009 Alfamdia LTDA.
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>
33
2009 Alfamdia LTDA.

<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>
34
2009 Alfamdia LTDA.
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. Este um comando importante principalmente quando se est utilizando o Internet Explorer. Essa a forma bsica usada para criar camadas dentro do Internet Explorer, atravs do posicionamento de atributos que sero tratados mais adiante. Embora este comando seja reconhecido pelo Netscape Navigator, ele depende do elemento layer para a criao de camadas. 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>
35
2009 Alfamdia LTDA.
<div class = altcolor> Pargrafo utilizando DIV e a classe altcolor. O elemento DIV sempre insere uma quebra de linha no texto. </div> </body> </html>
36
2009 Alfamdia LTDA.
Unidade 4 Introduo a Estilo CSS

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
37
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 7, Netscape Navigator 7, Mozilla Firefox 1, Opera 7 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:
38
2009 Alfamdia LTDA.
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 alterem 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. Permite formatar elementos do HTML como formulrios e barras de rolagem, impossvel via atributos HTML. Permite 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).
39
2009 Alfamdia LTDA.
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 (Javascript, 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
40
2009 Alfamdia LTDA.
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:

Interno - No cabealho de um documento HTML. Inline ou Em Linha - Junto a uma determinada tag. Externo Em um documento .css separado vinculado ao documento HTML atravs de uma referncia externa no cabealho do documento.
41
2009 Alfamdia LTDA.
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 a Toda a Pgina HTML

Neste caso, utilizamos as tags HTML <style> e </style> dentro da seo de cabealho (<head>) de uma pgina:
<!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>Utilizando CSS em uma pgina HTML</title> <style type=text/css> seletor { propriedade: valor; } </style> </head> <body> </body> </html>
4.6.2 Aplicando Estilos apenas uma Tag HTML Especfica

Para isso utilizamos o parmetro style, que pode ser utilizado por praticamente qualquer tag 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>Utilizando CSS em uma tag HTML</title> </head> <body> <font style=propriedade: valor;>Teste de Estilos</font> </body> </html>
42
2009 Alfamdia LTDA.
Neste caso especfico dispensamos o seletor, pois estamos aplicando o estilo diretamente em uma tag.
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 <!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>Utilizando css em um arquivo externo</title> <link rel=stylesheet type=text/css href=estilos.css> </head> <body> </body> </html>
4.7 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:
43
2009 Alfamdia LTDA.
4.7.1 Aplicando Estilos a uma Tag:

Primeiro devemos definir qual tag queremos aplicar os estilos. Neste exemplo alteraremos o estilo das tags <FONT>:
<!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>Alterando o estilo da tag font</title> <style type=text/css> 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.7.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:
<!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>Alterando o estilo da tag font</title> <style type=text/css> font, p {
44
2009 Alfamdia LTDA.

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.7.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>:
<!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>Alterando o estilo da tag font</title> <style type=text/css> .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>
45
2009 Alfamdia LTDA.

</html>
4.7.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:
<!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> 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.7.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:
46
2009 Alfamdia LTDA.

<!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>Alterando o estilo da tag font</title> <style type=text/css> #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 background Descrio Especifica uma imagem de segundo plano ou cor. Especifica a lateral da borda que sofre o efeito Especifica a cor da borda. Especifica o estilo da borda. Valores Permitidos URL ou o cdigo da cor Exemplos {background:#33 CC00}
border
top / left / right / center
{border-left}
border-color
Nome ou cdigo da cor. dotted / dashed / solid / double / none / grove / ridge / inset / outset thin / thick / medium
{border-color: blue} {border-style: grove}
border-style
border-width
Especifica a largura da borda.
{border-width: medium}
47
2009 Alfamdia LTDA.
Adobe Dreamweaver CS4 Desenvolvimento de Websites Interativos color Especifica a cor do texto. Seleciona o tipo de fonte. Nome ou cdigo da cor. Nome da fonte (de acordo com o Windows) points (pt) inches (in) centimeters (cm) pixels (px) font-style Aplica o efeito itlico. Ajusta a espessura da fonte. normal italic extra-light light demi-light medium demi-bold bold extra-bold line-height Especifica a distncia entre as linhas. points (pt) inches (in) centimeters (cm) pixels (px) percentage(%) margin-left Ajusta a distncia da margem da esquerda. points (pt) inches (in) centimeters (cm) pixels (px) margin-right Ajusta a distncia da borda direita da pgina. points (pt) inches (in) centimeters (cm) pixels (px) {margin-right: 1cm} {margin-left: 5in} {line-height: 24pt} {font-weight: bold} {font-weight: extra-bold} {font-style: italic} {color: blue}
font-family
{font-family: courier} {font-family: arial} {font-size: 12pt}
font-size
Ajusta o tamanho da fonte.
font-weight
48
2009 Alfamdia LTDA.
Adobe Dreamweaver CS4 Desenvolvimento de Websites Interativos margin-top Ajusta a distncia da borda superior da pgina points (pt) inches (in) centimeters (cm) pixels (px) text-align Especifica o alinhamento do texto. left center right text-decoration Aplica efeitos no texto. none underline italic line-trough text-indent Especifica a distncia entre o texto e a margem esquerda. points (pt) inches (in) centimeters (cm) pixels (px) {text-indent: 0.5in} {text-decoration: none} {text-align: right} {margin-top: 20px}
49
2009 Alfamdia LTDA.
Unidade 5 Introduo ao Tableless Design

Tableless Problemas no Design com Tabelas Design Tableless CSS Box Model Um exemplo de Tableless Design
50
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.
51
2009 Alfamdia LTDA.
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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>CSS - Tableless</title> <style type="text/css">
52
2009 Alfamdia LTDA.

<!-body { margin:0 0 5px 0; padding:0; font:12px Verdana, Arial, Serif; } #topo{ width:auto; height:50px; padding:3px 0 0 0; background-color:#CCCCFF; border-top:1px solid #666666; border-bottom:2px solid #666666; text-align:center; } #conteudoEsq { position:absolute; width:190px; top:80px; left:5px; padding-bottom:20px; } #colEsq { background:#9966FF; border-bottom:1px solid #666666; } #sepEsqcolCentral { margin-left:200px; padding-left:2px; background:#666666; } #colCentral { background:#EEE6FF; padding:2px 10px 20px; text-align:justify; } --> </style> </head> <body> <div id="topo"> <h3>Empresa de Exportao</h3> </div> <div id="conteudoEsq"> <h3>Menu</h3> <ul> <li>home</li>
53
2009 Alfamdia LTDA.

<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:
54
2009 Alfamdia LTDA.
Unidade 6 Conhecendo a Interface do Dreamweaver CS4

Sobre o Adobe Dreamweaver Abrindo o Dreamweaver rea de trabalho do Dreamweaver Ferramentas Select, Hand e Zoom Barra de Ferramentas Standard
55
Unidade 6 Conhecendo a Interface do Dreamweaver CS4

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 CS4 est totalmente voltado para a Web 2.0, com maior suporte ao CSS e trazendo modelos de sites.
6.2 Abrindo o Dreamweaver

Clicar no menu Iniciar > Programas > Adobe Master Collection CS4 > Adobe Dreamweaver CS4. Na tela inicial do Dreamweaver, podemos abrir os ltimos itens que trabalhamos, criar novas pginas e criar itens a partir de exemplos:
56
2009 Alfamdia LTDA.
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.3 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:
57
2009 Alfamdia LTDA.
- 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. - 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).
58
2009 Alfamdia LTDA.
- 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.4 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.5 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.6 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
59
2009 Alfamdia LTDA.
transferncia entre sites locais e remotos. A ilustrao abaixo mostra a barra de ferramentas Documento expandida.
G H I J K L M
A. Mostrar visualizao de cdigo B. Mostrar visualizaes de cdigo e do projeto C. Mostrar visualizao do projeto D. Visualizao dinmica E. Visualizao dinmica de cdigo F. Ttulo do documento G. Gerenciamento de arquivos H. Visualizar/depurar no navegador I. Atualizar visualizao de design J. Opes de visualizao K. Auxlios visuais L. Validar markup M. Verificao de compatibilidade do navegador 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. Quando selecionarmos essa visualizao combinada, a opo Visualizao de design visvel ativada no menu Opes de visualizao. 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: Exibe uma visualizao do documento baseada no navegador, interativa e no editvel. Visualizao dinmica de cdigo: Exibe o cdigo real usado pelo navegador para executar a pgina. 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. Gerenciamento de arquivos: Exibe o menu pop-up Gerenciamento de arquivos. 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.
60
2009 Alfamdia LTDA.
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. Auxlios visuais: Permite usar diferentes auxlios visuais para projetar as pginas. Validar markup: Permite validar o documento atual ou uma tag selecionada. Verificao de compatibilidade do navegador: Permite verificar se o CSS compatvel com navegadores diferentes.
6.6.1 Viso geral da Janela Documento

A Janela 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, JavaScript, 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.
61
2009 Alfamdia LTDA.
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 JavaScript. Para abrir um desses arquivos relacionados na janela Documento, devemos clicar no respectivo nome de arquivo na barra de ferramentas Arquivos relacionados.
6.7 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.8 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.
BC D E
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
62
2009 Alfamdia LTDA.
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.9 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.
63
2009 Alfamdia LTDA.
Algumas categorias tm botes com menus pop-up. Ao selecionar uma opo em um menu pop-up, essa opo se transforma na ao padro do boto. Por exemplo, se selecionarmos Alocador de espao de imagem no menu pop-up do boto Imagem, na prxima vez que clicar no boto Imagem, o Dreamweaver vai inserir um alocador de espao de imagem. Sempre que selecionamos uma nova opo no menu pop-up, a ao padro do boto muda. 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. A categoria do 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.
64
2009 Alfamdia LTDA.
Categoria Favorites Permite agrupar e organizar os botes do painel Inserir usados com mais freqncia em um lugar comum.
6.10 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.11 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.
65
2009 Alfamdia LTDA.
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.
66
2009 Alfamdia LTDA.
Unidade 7 Iniciando o Projeto de um Website
Definindo um Site Local Criando uma nova pgina HTML Salvando uma pgina HTML Preferncias do browser
67
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 janela de Site Definition escolher a opo: Advanced.
68
2009 Alfamdia LTDA.
- Site Name: o nome do site; - Local Root Folder: localizao, no disco rgido, da pasta que contm os arquivos do site; - Default Images Folder: pasta que o Dreamweaver usa para armazenar as imagens adicionais em nosso site; Por exemplo, se colocarmos uma imagem de nossa rea de trabalho em uma pgina, o Dreamweaver a incluir na pasta de imagens padro definida. - 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;
69
2009 Alfamdia LTDA.
Por exemplo, o nome de arquivo link.html no igual a Link.html - Cache: Quando marcada, gerado um cache local, o que agiliza as tarefas de gerenciamento do site. Geralmente, marcaremos essa opo; no entanto, em sites muito grandes, a recriao do cache pode tornar as operaes mais lentas.
LABORATRIO
TAREFA 1 Fomos contratados para criar a loja virtual de artigos esportivos AlfaSports. 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: AlfaSports; 2. Local root folder: pasta ADDW CS4 > AlfaSports; 3. Default images folder: pasta: ADDW CS4 > AlfaSports > 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:
70
2009 Alfamdia LTDA.
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.
71
2009 Alfamdia LTDA.
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.
72
2009 Alfamdia LTDA.
Por default o IExplore est marcado como Primary browser, ou seja, quando pressionarmos o F12 nossa pgina abrir no IE. Selecionar o browser Firefox e marcar a opo: Secondary browser:
73
2009 Alfamdia LTDA.
Agora quando pressionarmos CTRL + F12 vemos nossas pginas no Firefox. 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 deletar 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 quem_somos.html 2. Ttulo da pgina: AlfaSports: Quem Somos 3. Utilizar o boto Live View ou a tecla F12 para ver como ficou a pgina.
74
2009 Alfamdia LTDA.
Unidade 8 Adicionando contedo a um Website
Importando arquivos de texto Controlando a estrutura do documento Adicionando caracteres especiais
75
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 quem_somos.html dentro da pasta site. 2. Deixar o cursor posicionado na primeira linha deste documento:
3. Importar o arquivo quem_somos.doc da pasta textos;
76
2009 Alfamdia LTDA.
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:
77
2009 Alfamdia LTDA.
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 quem_somos.html. 2. Inserir um pargrafo na primeira linha deste documento e escreva: Quem Somos
78
2009 Alfamdia LTDA.
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.
79
2009 Alfamdia LTDA.
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 (quem_somos.html) deixar o cursor do mouse no ltimo pargrafo do documento:
2. Digitar: Avenida Conceio n100. Ao invs de pressionarmos "Enter", pressionar SHIF + ENTER para inserir uma quebra de linha. 3. Na linha seguinte digitar: Bairro Primavera - Jandira. Pressione SHIFT + ENTER. 4. Na outra linha digite: Fone (44) 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
80
2009 Alfamdia LTDA.
- 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.
81
2009 Alfamdia LTDA.
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 > Nome ou clicar, novamente, em Unordered List ou Ordered List no Painel Properties.
LABORATRIO
TAREFA 1 1. Criar um novo arquivo HTML e salvar como: como_comprar.html na raiz da pasta site. 2. Title: AlfaSports: Como Comprar.
82
2009 Alfamdia LTDA.
3. Posicionar o cursor do mouse na primeira linha do documento e importar o texto como_comprar.doc que est dentro da pasta textos. Deixar desmarcada a opo: Clean up Word pargrafo spacing.
4. Selecionar da segunda linha at o final do documento e criar uma lista no-ordenada (com marcadores).
5. Mudar os marcadores para Square. 6. Salvar o arquivo. TAREFA 2 1. Criar um novo arquivo HTML e salvar como duvidas.html na raiz da pasta site. 2. Title: AlfaSports: Dvidas. 3. Posicionar o cursor do mouse na primeira linha do documento e importar o texto duvidas.doc que est dentro da pasta textos. 4. Criar uma lista de definio para todo o texto importado (Format > List > Definition List). Veja como ficou nosso texto:
A criao de uma lista de definio gera um conjunto de tags para a lista, o termo e a definio: <dl>
83
2009 Alfamdia LTDA.
<dt> Este o termo </dt> <dd> Esta a definio </dd> </dl> 5. Salvar o arquivo.
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 quem_somos.html 2. No ltimo pargrafo digitar: 2099 AlfaSports. 3. Posicionar o curso antes da palavra AlfaSports e adicionar o caracter de Copyright (Insert > HTML > Special Characters > Copyright). 4. Veja como ficou o texto:
84
2009 Alfamdia LTDA.
5. Salvar o arquivo.
85
2009 Alfamdia LTDA.
Unidade 9 Aplicando Folhas de Estilo em Cascata (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
86
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 modo de exibio 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.
87
2009 Alfamdia LTDA.
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.
88
2009 Alfamdia LTDA.
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:
89
2009 Alfamdia LTDA.
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 maiscula/minscula) o formato das letras de um elemento (
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;
90
2009 Alfamdia LTDA.
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;
91
2009 Alfamdia LTDA.
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;
92
2009 Alfamdia LTDA.
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;
93
2009 Alfamdia LTDA.
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;
94
2009 Alfamdia LTDA.
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.
95
2009 Alfamdia LTDA.
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.
96
2009 Alfamdia LTDA.
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 Usando Pontos, Pixels ou Ems para Tamanhos de Fontes

Ao modificarmos o tamanho de uma fonte, podemos observar que temos vrias opes de medida.
97
2009 Alfamdia LTDA.
9.2.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.2.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 1 1. Retornar ao arquivo: quem_somos.html 2. Criar uma nova regra para a tag body; 3. Definir a regra num novo arquivo de Folha de estilos com o nome de site.css dentro da pasta CSS; 4. Definir as formataes da Categoria Type conforme a figura abaixo
98
2009 Alfamdia LTDA.
5. Definir as formataes da Categoria Box conforme a figura abaixo:
99
2009 Alfamdia LTDA.
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. Salvar todos os arquivos (File > Save All).
100
2009 Alfamdia LTDA.
9.3 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
Na caixa de dilogo CSS Rule Definition colocar o valor de 20 no item Line height e clicar em OK.
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.4 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
101
2009 Alfamdia LTDA.
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
102
2009 Alfamdia LTDA.
TAREFA 1 1. Retornar ao documento quem_somos.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 realcado. 4. Definir que a regra de estilo deve estar incorporada a folha de estilo externa site.css.
5. Clicar em OK. Na janela CSS Rule Definition, marque as opes como na imagem:
103
2009 Alfamdia LTDA.
6. Para aplicar o estilo de classe selecionar o texto AlfaSports 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 AlfaSports do documento. 9. Salvar o arquivo.
104
2009 Alfamdia LTDA.
9.5 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.
105
2009 Alfamdia LTDA.
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 1 1. Abrir o arquivo como_comprar.html 2. Anexar a folha de estilo Site.css clicando no boto Attach Style Sheet, localizado no final do painel CSS Style.
106
2009 Alfamdia LTDA.
3. Na caixa de dilogo Attach External Style Sheet, clicar em Browse e selecionar o folha de estilos site.css. Na opo Media selecionar screen:
4. Salvar seu arquivo.
107
2009 Alfamdia LTDA.
5. Abrir o arquivo duvidas.html e anexar a folha de estilo: site.css da mesma forma como fizemos no arquivo quem_somos.html
9.6 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.
108
2009 Alfamdia LTDA.
LABORATRIO
TAREFA 1 1. Abrir o arquivo duvidas.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 dl. 4. OK. 5. Devemos criar uma nova regra CSS para a tag dt, com a font-weight=bold. 6. Salvar todos os arquivos.
9.7 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.
LABORATRIO
TAREFA 1 1. Abrir o arquivo duvidas.html. 2. Criar uma nova regra e selecionar a opo Compound, digitando: dt:first-letter.
109
2009 Alfamdia LTDA.
3. Na tela CSS Rule Definition especificar as informaes como na imagem:
4. Clicar em OK e veja com ficou nosso texto.
110
2009 Alfamdia LTDA.
9.7.1 Outro 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.8 Criando uma Folha de Estilos Externa

Anteriormente criamos um 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:
111
2009 Alfamdia LTDA.
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.8.1 A Barra de Ferramentas Style Rendering

A barra de ferramentas Style Rendering contm botes para exibir a pgina, usando tipos de mdias diferentes. Selecione o menu: View > Toolbars > Style Rendering para ativarmos esta barra:
LABORATRIO
TAREFA 1 1. Criar um novo arquivo CSS e salvar como site_print.css, dentro da pasta CSS; 2. Abrir a folha de estilos site.css 3. Selecionar a regra da tag p, copiar e colar dentro da folha de estilos site_print.css.
112
2009 Alfamdia LTDA.
4. Selecionar a tag p no arquivo site_print.css e editar suas definies como na imagem:
5. Salvar o arquivo site_print.css TAREFA 2 1. Abrir o arquivo quem_somos.html; 2. Clicar no boto Attach Style Sheet e escolher o folha site_print.css selecionando o tipo de mdia para print:
113
2009 Alfamdia LTDA.
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 voltou ao modo de exibio screen). 5. Salvar o arquivo. 6. Abrir os arquivos: como_comprar.html e duvidas.html e anexe folha de estilo site_print.css selecionando o tipo de mdia print. 7. Ao final teremos todos os nossos arquivos html com uma folha de estilo com mdia screen e outra com a mdia print. 8. Salvar todos os arquivos. (Ver que nosso documento
114
2009 Alfamdia LTDA.
Unidade 10 Inserindo diferentes mdias no Site
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
115
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 JPEG (Joint 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 JPEG utiliza um algoritmo de compactao que se baseia na capacidade do olho humano. Sabendo-se que o JPEG 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 JPEG 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 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)
116
2009 Alfamdia LTDA.
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
117
2009 Alfamdia LTDA.
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, sem distores:
118
2009 Alfamdia LTDA.
No entanto, nossa imagem permanece com o mesmo tamanho: 90k. O recomendvel seria ajustar o tamanho desta imagem em um software com este fim. O Dreamweaver permite que executemos operaes bsicas de edio de imagens GIF e JPEG. 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 <entre> 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 que abre o software para editar a imagem. Por padro ser executado o Photoshop, mas podemos alter-lo no item Edit > Preferences > File Types/Editor.
119
2009 Alfamdia LTDA.
O boto Edit Image Setting abre a janela Image Preview para fazermos alguns ajustes na imagem, se necessrio:
120
2009 Alfamdia LTDA.
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:
121
2009 Alfamdia LTDA.
- 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 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 logo_alfa_sports.gif e clicar com o boto direito do mouse. Selecionar a opo: Add to Favorites:
122
2009 Alfamdia LTDA.
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. Abrir o arquivo duvidas.html. 2. Substituir o texto Fale Conosco por link. 3. Logo aps, na categoria Common da barra de insero, clicar em Image e selecionar Image no menu pop-up, escolhendo a imagem ico_carta.gif que est dentro da pasta Imagens.
123
2009 Alfamdia LTDA.
4. Na caixa de dilogo definir as configuraes de texto alternativo como na imagem abaixo e clique em OK.
5. Repetir a operao para o Fale Conosco do final do texto. 6. Pressionar SHIFT + ENTER aps Temos dois canais de comunicao para garantir a qualidade do atendimento ao cliente. e aps a imagem inserida anteriormente. 7. Salvar o arquivo. TAREFA 2 1. Abrir o arquivo quem_somos.html, colocar o cursor aps a palavra O Gigante. 2. Inserir a imagem prdio.jpg (Texto alternativo: O Gigante). 3. Atravs da opo Align do Painel Properties, definir o alinhamento right. 4. Depois selecionar a imagem e escolher a opo Crop .
5. Marcar uma regio suficiente para destacar o prdio da figura e pressionar ENTER.
124
2009 Alfamdia LTDA.
6. Definir 10 para as propriedades H Space e V Space.
10.6 Inserindo um Arquivo do Flash

O Adobe Flash CS4 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.
125
2009 Alfamdia LTDA.
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.
126
2009 Alfamdia LTDA.
Tambm, podemos inserir um arquivo Flash do painel de arquivos, selecionando-o e arrastando-o para a pgina:
10.7 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:
127
2009 Alfamdia LTDA.
- 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.
128
2009 Alfamdia LTDA.
Unidade 11 Usando bibliotecas e 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
129
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:
130
2009 Alfamdia LTDA.
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:
131
2009 Alfamdia LTDA.
11.2 Colocando Itens de Biblioteca em uma Pgina

Para colocar o item de biblioteca na pgina, posicionar o cursor no local desejado, selecione 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.
132
2009 Alfamdia LTDA.
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:
133
2009 Alfamdia LTDA.
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, selecioneo 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:
LABORATRIO
TAREFA 1 1. 2. 3. Abrir o arquivo quem_somos.html. Selecionar o endereo no final da pgina. Criar uma biblioteca com o nome de endereco. (No painel Assets, clique na categoria Library e, em seguida, no item New Library na parte inferior do painel) Editar a biblioteca anteriormente criada, alterando o ano para 2009.
4.
134
2009 Alfamdia LTDA.
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:
135
2009 Alfamdia LTDA.
LABORATRIO
TAREFA 1 1. Abrir um arquivo HTML novo. 2. Definir o ttulo como AlfaSports 3. Salvar este arquivo como um template. (File > Save as Template). 4. Definir o nome de principal, no site AlfaSports.
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:
136
2009 Alfamdia LTDA.
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:
137
2009 Alfamdia LTDA.
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.
138
2009 Alfamdia LTDA.
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).
139
2009 Alfamdia LTDA.
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:
140
2009 Alfamdia LTDA.
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 site.css clicando no boto Attach Style Sheet, localizado no final do painel CSS Style.
3. 4.
Na caixa de dilogo Attach External Style Sheet, clicar em Browse e selecionar a folha de estilos site.css. Na opo Media selecionar screen. Anexar a folha de estilo site_print.css com opo de Media print.
141
2009 Alfamdia LTDA.
Unidade 12 Projetando Layouts com CSS

Usando camadas para Layout Camadas aninhadas Usando rguas e guias Adicionando CSS a camadas Projetando com Div
142
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.
143
2009 Alfamdia LTDA.
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:
144
2009 Alfamdia LTDA.
- 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:
145
2009 Alfamdia LTDA.
- 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:
146
2009 Alfamdia LTDA.
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.
147
2009 Alfamdia LTDA.
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.
148
2009 Alfamdia LTDA.
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:
149
2009 Alfamdia LTDA.
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- Para corrigirmos este deslocamento, redefinir o item Box como na imagem:
150
2009 Alfamdia LTDA.
13- Configurar as outras regras de estilos, marcando a opo Padding ou Margin.
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.
151
2009 Alfamdia LTDA.
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- Clicar no cone Insert Div Tag, localizada no Painel Insert, item Layout. 3- Clicar na opo Insert Div Tag, deixar a opo At insertion point marcada e clicar no boto New CSS Rule:
152
2009 Alfamdia LTDA.
4- Selecionar ID no Selector Type. Digitar o nome geral no item Selector e certifiquese que est na folha se estilo site.css. Clicar em OK: 5- Na janela CSS Rule Definition, escolher a opo Box e colocar 770 pixels de largura para esta Div. 6- Apagar o contedo da Div geral, clicar no cone Insert Div Tag, localizada no Painel Insert, item Layout. 7- Clicar na opo Insert Div Tag, deixar a opo At insertion point marcada e clicar no boto New CSS Rule: 8- Selecionar ID no Selector Type. Digitar o nome topo no item Selector e certifiquese que est na folha se estilo site.css. Clicar em OK: 9- Na janela CSS Rule Definition, escolher a opo Box e definir conforme a imagem abaixo:
TAREFA 2 1. Posicionar o cursor logo aps o final da Div topo. 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=topo> e clicar no boto New Css Rule:
153
2009 Alfamdia LTDA.
3. Selecionar ID no Selector Type. Digitar o nome menu_superior no item Selector e certifique-se que est na folha se estilo site.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_superior, na categoria Box definir conforme a figura abaixo:
TAREFA 3 1. Deixar o cursor piscando no final da div menu_superior e clicar em Insert Div Tag. 2. Selecionar a opo After Tag e no menu pop-up escolha: <div id=menu_superior> e clicar no boto New CSS Rule:
154
2009 Alfamdia LTDA.
3. Na janela New CSS Rule escolher a opo ID e colocar o nome de meio como na imagem:
4. Na janela CSS Rule Definition, na categoria Background, escolher a imagem gradiente_topo.jpg no item Background-image. Marcar no item background-repeat a opo: repeat-x. 5. Na categoria Box, definir como na figura abaixo.
155
2009 Alfamdia LTDA.
TAREFA 4 1. Deixar o cursor do mouse no final da div meio e clicar na opo Insert div Tag. 2. Escolher a opo After Tag com a <div id=meio> selecionada. 3. Colocar o nome do ID desta Div de rodape. 4. Na janela CSS Rule Definition, na categoria Background, definir na backgroundimage a imagem gradiente_rodape.jpg. Na background-repeat, selecionar a opo repeat-x. 5. Na categoria Box definir a de altura de 140 px e padding-top de 10 px.
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;
156
2009 Alfamdia LTDA.
Right exibe o objeto na margem direita ; None define o valor flutuante igual ao padro do navegador;
LABORATRIO
TAREFA 1 1. Excluir o contedo da div topo e clicar na opo Insert div Tag. 2. Escolher a opo At insertion point.
3. Clicar no New CSS Rule e colocar o nome do ID desta Div de data.
4. Na janela CSS Rule Definition, na categoria Box, definir conforme a figura abaixo:
157
2009 Alfamdia LTDA.
5. Na categoria Block, na opo Text-align definir como right. 6. Digite a data corrente no seguinte formato: dia_da_semana, dia de ms de ano. Ex.: segunda-feira, 02 de maro de 2009. 7. Salvar todos os arquivos TAREFA 2 1. Deixar o cursor dentro da Div data e clicar em Insert Div Tag. 2. Escolher a opo After Tag com a <div id=data> selecionada. 3. Clicar no New CSS Rule e colocar o nome do ID desta Div de carrinho. 4. Na janela CSS Rule Definition, na categoria Box, definir conforme a figura abaixo:
158
2009 Alfamdia LTDA.
5. Excluir o contedo da div e selecionar a opo Image na categoria Cammon. Selecionar a imagem ico_carrinho.jpg, com texto alternativo de Meu carrinho. 6. Inserir uma div aps a Div carrinho, com o nome do ID de contato e as mesmas formataes do ID carrinho. 7. Excluir o contedo da div e selecionar a opo Image na categoria Cammon. Selecionar a imagem ico_carta.jpg, com texto alternativo de Contato. 8. Salvar todos os arquivos Tarefa 3 1. Criar uma New CSS Rule ( no Painel CSS Style) do tipo Class, com o nome de borda_topo na folha de estilo site.css. 2. Na janela CSS Rule Definition, na categoria Border, definir conforme a figura abaixo:
159
2009 Alfamdia LTDA.
3. Aplicar esta Class nas Divs data, carrinho e contato atravs da opo Class do Painel Properties.
4. Salvar todos os arquivos Tarefa 4 1. Selecionar a Div menu_superior e excluir o contedo. Deixar o cursor dentro da div e selecionar a opo Image na categoria Cammon. Selecionar a imagem lateral_menu.jpg e sem texto alternativo. 2. Aps, inserir a imagem logo_alfasports.jpg com texto alternativo de AlfaSports. 3. Inserir as imagens quem_somos.jpg, como_comprar.jpg, duvidas.jpg e poltica.jpg logo em sequncia. 4. Salvar todos os arquivos. Tarefa 5
160
2009 Alfamdia LTDA.
1. Selecionar a Div meio e excluir seu contedo. Deixar o cursor dentro da div e clicar em Insert Div Tag. 2. Escolher a opo At insertion point. 3. Clicar no New CSS Rule e colocar o nome do ID desta Div de esquerda. 4. Na janela CSS Rule Definition, na categoria Box, definir a opo Float como left, Padding-left igual a 10 px e Width igual a 173 px. Na categoria Background, opo Background-color definir #FFF (branco). 5. Deixar o cursor dentro da Div esquerda e clicar em Insert Div Tag. 6. Escolher a opo After Tag com a <div id=esquerda> selecionada. 7. Clicar no New CSS Rule e colocar o nome do ID desta Div de conteudo. 8. Na janela CSS Rule Definition, na categoria Box, definir a largura com 577 px e o Float como left. 9. Na categoria bakcground, definir a background-color como #FFF; 10. Salvar todos os arquivos. Tarefa 6 1. Excluir o texto da Div conteudo. 2. Inserir uma regio editvel com o nome de conteudo ( Insert > Templates Objects> Editable Region > conteudo)
3. Salvar o modelo. Tarefa 7 1. No arquivo quem_somos.html. 2. Selecionar todo o contedo do arquivo (Dica: clicar no comando body do seletor de tags).
161
2009 Alfamdia LTDA.
3. Clicar em Insert Div Tag. 4. Deixar a opo Wrap around selection selecionada.
5. Clicar no New CSS Rule e colocar o nome do ID desta Div de interna. 6. Na janela CSS Rule Definition, na categoria Box, definir padding 10 px para todos. 7. 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 Head
162
2009 Alfamdia LTDA.
9. Repetir os passos desta tarefa para os arquivos como_comprar.html e duvidas.html. Obs.: No ser necessrio criar novamente o ID interna, basta apenas selecion-la.
10. Salvar todos os arquivos. 11. Criar um novo arquivo seguindo o template com o nome de politica.html Tarefa 8 1. No arquivo principal.dwt, selecionar a Div rodape e excluir seu contedo. Deixar o cursor dentro da div e clicar em Insert Div Tag. 2. Escolher a opo At insertion point.
163
2009 Alfamdia LTDA.
3. Clicar no New CSS Rule e colocar o nome do ID desta Div de pagamento. 4. Na janela CSS Rule Definition, na categoria Box, definir conforme a figura abaixo:
5. Excluir o contedo da div criada e digitar: EM AT 12X SEM JUROS. 6. Inserir uma quebra de linha (SHIFT+ENTER). 7. Inserir na linha criada, uma aps a outra, as seguintes imagens: logo_mastercard.jpg (texto alternativos: MasterCard), logo_visa.jpg (texto alternativos: Visa), logo_amex.jpg (texto alternativos: Amrica Express), logo_diners.jpg (texto alternativos: Diners Club) e logo_hipercard.jpg (texto alternativos: Hipercard). 8. Salvar todos os arquivos Tarefa 9 1. Criar uma New CSS Rule ( no Painel CSS Style) do tipo Class, com o nome de texto_rodape na folha de estilo site.css. 2. Na janela CSS Rule Definition, na categoria Type, definir conforme a figura abaixo:
164
2009 Alfamdia LTDA.
3. Selecionar o texto EM AT 12X SEM JUROS e aplicar a Class texto_rodape atravs da opo Class do Painel Properties.
4. Criar uma New CSS Rule ( no Painel CSS Style) do tipo Class, com o nome de img_rodape na folha de estilo site.css. 5. Na janela CSS Rule Definition, na categoria Box, definir conforme a figura abaixo:
165
2009 Alfamdia LTDA.
6. Aplicar a Class atravs da opo Class do Painel Properties em cada imagem da Div pagamento. 7. Salvar todos os arquivos Tarefa 10 1. Deixar o cursor dentro da div pagamento e clicar em Insert Div Tag. 2. Escolher a opo After Tag com a <div id=pagamento> selecionada. 3. Clique no New CSS Rule e colocar o nome do ID desta Div de bancos. 4. Na janela CSS Rule Definition, na categoria Box, definir conforme a figura abaixo:
166
2009 Alfamdia LTDA.
5. Excluir o contedo da div criada e digitar: TRABALHAMOS COM. 6. Inserir uma quebra de linha (SHIFT+ENTER). 7. Inserir na linha criada, uma aps a outra, as seguintes imagens: logo_itau.jpg (texto alternativos: Ita), logo_bb.jpg (texto alternativos: Banco do Brasil) e logo_bradesco.jpg (texto alternativos: Bradesco). 8. Selecionar o texto TRABALHAMOS COM e aplicar a Class texto_rodape atravs da opo Class do Painel Properties. 9. Aplicar a Class img_rodape atravs da opo Class do Painel Properties em cada imagem da Div bancos. 10. Salvar todos os arquivos Tarefa 11 1. Criar uma New CSS Rule ( no Painel CSS Style) do tipo Class, com o nome de borda_rodape na folha de estilo site.css. 2. Na janela CSS Rule Definition, na categoria Border, definir conforme a figura abaixo:
167
2009 Alfamdia LTDA.
3. Aplicar a Class borda_rodape atravs da opo Class do Painel Properties para as Divs pagamento e bancos. 4. Salvar todos os arquivos. Tarefa 12 1. Deixar o cursor dentro da div bancos e clicar em Insert Div Tag. 2. Escolher a opo After Tag com a <div id=bancos> selecionada. 3. Clicar no New CSS Rule e colocar o nome do ID desta Div de atendimento. 4. Na janela CSS Rule Definition, na categoria Box, definir conforme a figura abaixo:
168
2009 Alfamdia LTDA.
5. Excluir o contedo da div criada e digitar: CENTRAL DE ATENDIMENTO. 6. Inserir uma quebra de linha (SHIFT+ENTER). 7. Inserir na linha criada, a imagem ico_fone_rodape.jpg (texto alternativos: Telefone) e formatar com o align middle. 8. Ao lado da imagem, digitar: 0800-000-000 . 9. Inserir uma quebra de linha (SHIFT+ENTER). 10. Inserir na linha criada, a imagem ico_carta_rodape.jpg (texto alternativos: Contato) e formatar com align middle. 11. Selecionar o texto CENTRAL DE ATENDIMENTO e aplicar a Class texto_rodape atravs da opo Class do Painel Properties. 12. Criar uma New CSS Rule ( no Painel CSS Style) do tipo Class, com o nome de ico_rodape na folha de estilo site.css. 13. Na janela CSS Rule Definition, na categoria Box, definir conforme a figura abaixo:
169
2009 Alfamdia LTDA.
14. Aplicar a Class ico_rodape atravs da opo Class do Painel Properties nas imagens da Div atendimento. 15. Salvar todos os arquivos
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.
LABORATRIO
TAREFA 1 1. Deixar o cursor dentro da div atendimento e clicar em Insert Div Tag. 2. Escolher a opo After Tag com a <div id=atendimento> selecionada. 3. Clicar no New CSS Rule e colocar o nome do ID desta Div de copyright.
170
2009 Alfamdia LTDA.
5. Na janela CSS Rule Definition, na categoria Block, definir a propriedade Text-align como Center. 6. Excluir o contedo da div criada e importar o texto copyright.doc (File > Import > Word Document... > Pasta Textos > Arquivo copyright.doc). Na opo Formatting, escolher a opo: Text only. 7. Salvar todos os arquivos. TAREFA 2 1. Selecionar a Div esquerda e excluir seu contedo. Deixar o cursor dentro da div e clique em Insert Div Tag. 2. Escolher a opo At insertion point. 3. Clicar no New CSS Rule e colocar o nome do ID desta Div de busca. 4. Na janela CSS Rule Definition, na categoria Box, definir conforme a figura abaixo:
171
2009 Alfamdia LTDA.
5. Excluir o contedo e deixar o cursor dentro da mesma. Clicar em Insert Div Tag. 6. Escolher a opo At insertion point. 7. Clicar no New CSS Rule e colocar o nome do ID desta Div de item_busca. 8. Na janela CSS Rule Definition, na categoria Border, definir conforme a figura abaixo:
172
2009 Alfamdia LTDA.
9. Excluir o contedo da Div criada e digite Busca de Produtos. 10. Colocar o cursor antes da palavra Busca e inserir o caracter especial HTML > Special Characters > Other ), pressionar um espao em branco.
(Insert >
11. Criar uma New CSS Rule ( no Painel CSS Style) do tipo Class, com o nome de cod_padrao na folha de estilo site.css. 12. Na janela CSS Rule Definition, na categoria Type, definir a propriedade Color com a cor #FF5015 13. Aplicar a Class cor_padrao atravs da opo Class do Painel Properties no caracter especial . 14. Criar uma New CSS Rule ( no Painel CSS Style) do tipo Class, com o nome de destaque na folha de estilo site.css. 15. Na janela CSS Rule Definition, na categoria Type, definir a propriedade Font-weight como bold. 16. Na categoria Box, definir as propriedades padding-top e padding-bottom com 3px. 17. Na categoria Border, definir a propriedade style-bottom com solid, width-bottom com 1 px e color-bottom com #E0E1DD. 18. Aplicar a Class destaque atravs da opo Class do Painel Properties na Div item_busca. 19. Salvar todos os arquivos
173
2009 Alfamdia LTDA.
TAREFA 3 1. Deixar o cursor dentro da div item_busca e clicar em Insert Div Tag. 2. Escolher a opo After Tag com a <div id=item_busca> selecionada. 3. Clique no New CSS Rule e colocar o nome do ID desta Div de lupa. 4. Na janela CSS Rule Definition, na categoria Box, definir conforme a figura abaixo:
5. Na categoria Border, definir conforme a figura abaixo:
174
2009 Alfamdia LTDA.
6. Excluir o contedo da Div criada e inserir a imagem ico_lupa.gif (texto alternativo: lupa). 7. Deixar o cursor dentro da div lupa e clicar em Insert Div Tag. 8. Escolher a opo After Tag com a <div id=lupa> selecionada. 9. Clicar no New CSS Rule e coloque o nome do ID desta Div de form_busca. 10. Na janela CSS Rule Definition, na categoria Box, definir conforme a figura abaixo:
175
2009 Alfamdia LTDA.
12. Deixar o cursor dentro da div busca e clicar em Insert Div Tag.
176
2009 Alfamdia LTDA.
13. Escolher a opo After Tag com a <div id=busca> selecionada. 14. Clicar no New CSS Rule e colocar o nome do ID desta Div de menu_esq. 15. Na janela CSS Rule Definition, na categoria Box, definir conforme a figura abaixo:
16. Salvar todos os arquivos. TAREFA 4 1. Criar um arquivo novo, usando o template principal e salvar como nome de index.html 2. Excluir o contedo da regio editvel e clicar em Insert Div Tag. 3. Escolher a opo At insertion point. 4. Clicar no New CSS Rule e colocar o nome do ID desta Div de banner. 5. Na janela CSS Rule Definition, na categoria Box, definir conforme a figura abaixo:
177
2009 Alfamdia LTDA.
6. Excluir o contedo da Div, clicar na categoria Common do Painel Insert, boto Media e selecionar SWF no menu pop-up: 7- Na caixa de dilogo Select File, selecionar o arquivo flash banner.swf que est na pasta flash:
178
2009 Alfamdia LTDA.
8- Clicar no boto Play para visualizar o arquivo reproduzido:
9. Deixar o cursor dentro da Div banner e clicar em Insert Div Tag. 10. Escolher a opo After tag, selecionar a opo <div id=banner> 11. Clicar no New CSS Rule e colocar o nome do ID desta Div de newsletter. 12. Na janela CSS Rule Definition, na categoria Box, definir conforme a figura abaixo:
179
2009 Alfamdia LTDA.
13. Na categoria Background, definir a opo background-image com o arquivo fundo_newsletter.jpg. 14. Deixar o cursor dentro da Div newsletter e clicar em Insert Div Tag. 15. Escolher a opo After tag, selecionar a opo <div id=newsletter> 16. Clicar no New CSS Rule e colocar o nome do ID desta Div de corpo. 17. Na janela CSS Rule Definition, na categoria Box, definir conforme a figura abaixo:
180
2009 Alfamdia LTDA.
18. Deixar o cursor dentro da Div corpo e clicar em Insert Div Tag. 19. Escolher a opo After tag, selecionar a opo <div id=corpo> 20. Clicar no New CSS Rule e colocar o nome do ID desta Div de publicidade. 21. Na janela CSS Rule Definition, na categoria Box, definir conforme a figura abaixo:
181
2009 Alfamdia LTDA.
22. Excluir o contedo desta Div e clicar em Insert Div Tag. 23. Escolher a opo At insertion point. 24. Clicar no New CSS Rule e colocar o nome do ID desta Div de texto_publicidade. 25. Na janela CSS Rule Definition, na categoria Box, definir o width com 145 px e a margin-bottom com 10 px. 26. Excluir o contedo desta Div e digitar Publicidade. 27. Inserir o caracter especial antes da palavra publicidade e definir a classe cor_padrao para o mesmo. 28. Definir a classe destaque para a Div texto_publicidade. 29. Deixar o cursor aps a Div texto_publicidade e inserir a imagem publicidade.gif (texto alternativo: Publicidade). 30. Definir border 0 e um link alternativo (digitar # no campo link) para a imagem 31. Salvar todos os arquivos. Obs.: Visualizar o arquivo no navegador FireFox. 32. Para solucionar o problema constatado no rodap apenas para o FireFox, definir na Div rodape, categoria Box, o Clear com Left.
182
2009 Alfamdia LTDA.
Unidade 13 Navegando no site
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
183
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.
184
2009 Alfamdia LTDA.
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 Digitar o caminho e o nome do arquivo ; na caixa de texto Link no Painel Property;
, 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. Selecionar a imagem Quem Somos do arquivo de template principal.dwt e clicar em cima do Point to File e apontar para o arquivo quem_somos.html:
185
2009 Alfamdia LTDA.
2. Definir para a propriedade Border o valor 0 (zero); 3. Fazer o mesmo processo para as imagens Como Comprar (como_comprar.html), Dvidas (duvidas.html) e Poltica (politica.html). 4. Definir um link para a imagem do logo AlfaSports para a pgina index.html. 5. Definir para a propriedade Border o valor 0 (zero). Obs.: Outra maneira de criar um link usar o cone de pasta . Basta selecionar a imagem ou o texto que deve se tornar um link e clicar no cone de pasta. Na caixa de dilogo Select File, localizamos o arquivo para o link:
186
2009 Alfamdia LTDA.
5- Salvar todos os arquivos.
13.3 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. 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.
187
2009 Alfamdia LTDA.
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, deixar o cursor aps a imagem ico_carta_rodape.jpg 2. Clicar na opo Email Link, da categoria Common do Painel Insert. 3. Na caixa de dilogo Email Link, digitar como na imagem abaixo:
5- Salvar o arquivo.
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:
188
2009 Alfamdia LTDA.
a:link a:visited a:hover a:active
define o estilo do link no estado inicial; define o estilo do link visitado; define o estilo do link quando se passa o mouse sobre ele; 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.
189
2009 Alfamdia LTDA.
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: a:link:
2. Na caixa CSS Rule Definition, definir as opes conforme a imagem abaixo:
190
2009 Alfamdia LTDA.
3. Clicar em OK.
13.5 Prioridades das declaraes dos links

A ordem de definio das regras para os estados dos links muito importante. Lembrese 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 2 3 4 a:link a:visited a:hover a:active
LABORATRIO
TAREFA 1 1. No arquivo principal.dwt, duplicar a regra de estilo a:link ( boto da direita sobre a regra a:link, opo duplicate);
191
2009 Alfamdia LTDA.
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
192
2009 Alfamdia LTDA.
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.
LABORATRIO
193
2009 Alfamdia LTDA.
TAREFA 1 1. Selecionar a imagem logo_itau.jpg (logo do Ita) da Div Bancos. 2. Definir a propriedade Border com o valor 0 (zero); 3. Inserir um link para o endereo http://www.itau.com.br com target _blank. 4. Repetir o processo 2 e 3 para as imagens logo_bb.jpg (http://www.bb.com.br) e logo_bradesco.jpg (http://www.bradesco.com.br)
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:
194
2009 Alfamdia LTDA.
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:
195
2009 Alfamdia LTDA.
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.
196
2009 Alfamdia LTDA.
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 conteudo.
LABORATRIO
TAREFA 1 1. Excluir o contedo da Div menu_esq e digitar CATEGORIAS. 2. Ao invs de pressionarmos ENTER, pressionar SHIF + ENTER para inserir uma quebra de linha. 3. Importar o arquivo menu_esq.doc da pasta Textos (File>Import>Word Document...>Pasta Textos>Arquivo menu_esq.doc). 4. Criar uma New CSS Rule ( no Painel CSS Style) do tipo Class, com o nome de titulo na folha de estilo site.css. 5. Na janela CSS Rule Definition, na categoria Type, definir conforme a figura abaixo:
197
2009 Alfamdia LTDA.
5. Na categoria Background, definir para a background-color a cor #666. 6. Na categoria Block, definir a opo Display como block. 7. Na categoria Box, definir conforme a figura abaixo:
198
2009 Alfamdia LTDA.
8. Selecionar a palavra CATEGORIAS e aplicar a Class titulo atravs da opo Class do Painel Properties. 9. Selecionar a lista de produtos inserida anteriormente e definir uma lista com marcadores. 10. Pressionar ENTER na frente de cada produto para criar os itens. 11. Criar uma New CSS Rule ( no Painel CSS Style) do tipo Compound. Definir o Selector Name conforme a figura abaixo, na folha de estilo site.css.
199
2009 Alfamdia LTDA.
200
2009 Alfamdia LTDA.
6. Na categoria List, definir a opo List-style-type como 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 site.css.
3. Na janela CSS Rule Definition, na categoria Type, definir conforme a figura abaixo:
201
2009 Alfamdia LTDA.
4. Na categoria Background definir conforme a figura abaixo:
5. Na categoria Block, definir a opo Display como block.
202
2009 Alfamdia LTDA.
6. Na categoria Box, definir conforme a figura abaixo:
203
2009 Alfamdia LTDA.
8. Salvar todos os arquivos. 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 site.css.
10. Na janela CSS Rule Definition, na categoria Box, definir a propriedade backgroundcolor como #F3F3F3. 11. Duplicar a regra #menu_esq ul li a:hover. No campo Selector Name digitar #menu_esq ul li a:active. 12. Salvar todos os arquivos.
204
2009 Alfamdia LTDA.
Unidade 14 Usando tabelas
Criando tabelas Propriedades da tabela Propriedade da clula Editando linhas Ordenando tabelas
205
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:
206
2009 Alfamdia LTDA.
- 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:
207
2009 Alfamdia LTDA.
- 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;
208
2009 Alfamdia LTDA.
- 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;
209
2009 Alfamdia LTDA.
- 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.
210
2009 Alfamdia LTDA.
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:
211
2009 Alfamdia LTDA.
14.5 Ordenando Tabelas

possvel ordenar uma tabela simples pelo contedo de uma nica coluna ou, em uma ordenao mais complexa, pelo contedo de duas colunas. Importante: No possvel ordenar tabelas que contenham clulas mescladas. 1. Criar um arquivo Novo; 2. Clicar no menu: File > Import > Excel Document e selecionar o arquivo tabela.xls que esta na pasta tabelas. 3. Para ordenar a tabela, clique na tabela ou selecione-a escolhendo Commands > Sort > Table.
Na caixa de dilogo Sort Table, escolha a coluna a ser ordenada e o mtodo de ordenao. A configurao padro no ordena a primeira linha da tabela. Observe que nossa tabela j esta ordenada:
212
2009 Alfamdia LTDA.
213
2009 Alfamdia LTDA.
Unidade 15 Usando formulrios
Criando um formulrio Usando objeto de formulrio Processando o formulrio Validando um formulrio
214
Unidade 15 Usando Formulrios

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:
215
2009 Alfamdia LTDA.
- 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 JavaScript. 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 de Insert > 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:
216
2009 Alfamdia LTDA.
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.
217
2009 Alfamdia LTDA.
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:
218
2009 Alfamdia LTDA.
- 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 JavaScript); - 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 email para um endereo especificado e o navegador recarrega a pgina do formulrio; - Uma pgina de aplicativo no servidor, como uma pgina do ColdFusion ou JSP, 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 Java, 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=Jane 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
219
2009 Alfamdia LTDA.
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.
220
2009 Alfamdia LTDA.
LABORATRIO
TAREFA 1 1. Abrir o arquivo principal.dwt (Template), excluir o contedo da Div form_busca e inserir um formulrio atravs da opo Form. 2. Inserir o campo Text Field sem label. 3. Na propriedade Init Val digitar Digite o que voc procura 4. Aps o campo Text Field anterior, inserir o campo List/Menu. 5. Clicar no boto List Values... e digitar Todas as marcas. 6. Aps o campo List/Menu anterior, inserir mais um campo List/Menu. 7. Clicar no boto List Values... e digitar Todas as categorias. 8. Aps o campo List/Menu anterior, inserir a imagem btn_ok.gif (texto alternativo: OK). 9. Criar uma New CSS Rule ( no Painel CSS Style) do tipo Class, com o nome de formulrio_esq na folha de estilo site.css. 10. Na janela CSS Rule Definition, na categoria Type, definir conforme a figura abaixo:
11. Na categoria Box, definir conforme a figura abaixo:
221
2009 Alfamdia LTDA.
12. Aplicar a classe formulario_esq nos trs campos de formulrios da Div form_busca. 13. Salvar todos os arquivos. TAREFA 2 1. Abrir o arquivo index.html, excluir o contedo da Div newsletter e clicar em Insert Div Tag. 2. Escolher a opo At Insertion point. 3. Clicar no New CSS Rule e colocar o nome do ID desta Div de texto_news. 4. Na janela CSS Rule Definition, na categoria Box, definir o width com 145 px. 5. Excluir o contedo da Div texto_new e digitar Newsletter. 6. Inserir o caracter especial antes do texto Newsletter e aplicar a classe cor_padrao no mesmo. 7. Aplicar a classe destaque na Div text_news. 8. Deixar o cursor dentro da Div text_news e clicar em Insert Div Tag. 9. Escolher a opo After tag e selecionar a <div id=texto_news>. 10. Clicar no New CSS Rule e colocar o nome do ID desta Div de form_news. 11. Na janela CSS Rule Definition, na categoria Box, definir o width com 145 px e padding-top com 10 px.
222
2009 Alfamdia LTDA.
12. Excluir o contedo da Div form_news e digitar o texto: Cadastre-se e receba novidades da AlfaSports. 13. Inserir um formulrio atravs da opo Form, da categoria Forms do Painel Insert. 14. Inserir o campo Text Field sem label. 15. Na propriedade Init Val digite Nome 16. Aps o campo Text Field, inserir mais um campo Text Field sem label. 17. Na propriedade Init Val digitar e-mail 18. Aps o ltimo campo Text Field, inserir a imagem cadastrar.gif (texto alternativo: Cadastrar). 19. Aplicar a classe formulario_esq nos dois campos do formulrio da Div form_news. 20. Salvar todos os arquivos.
223
2009 Alfamdia LTDA.
Unidade 16 Spry Framework
Menus no Dreamweaver CS4 Tabbed Panels Accordion Collapsible Panel
224
Unidade 16 Spry Framework

16.1 Menus no Dreamweaver CS4
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 CS4 j montou o menu horizontal ou vertical na pgina:
225
2009 Alfamdia LTDA.
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
226
2009 Alfamdia LTDA.
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:
227
2009 Alfamdia LTDA.
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:
LABORATRIO
TAREFA 1 1. Abrir o arquivo index.html. 2. Excluir o contedo da Div corpo. 3. Clicar na opo Spry Tabbed Panels da categoria Spry do Painel Insert. 4. Selecionar o spry que foi criado na regio azul da pgina. 5. Selecionar a Tab 2 no Painel Properties e adicionar uma nova Tab atravs do boto Add panel .
6. Na Tab 1, mudar o texto para Produtos em destaque. 7. Na Tab 2, mudar o texto para Lanamentos. 8. Na Tab 3, mudar o texto para Mais vendidos.
228
2009 Alfamdia LTDA.
9. Salvar o arquivo. 10. Na janela abaixo, selecionar a opo Sim para Update links.
O Dreamweaver cria uma pasta SpryAssets com os arquivos css e javascript necessrios para o uso dos Sprys.
TAREFA 2 1. No Painel CSS Styles, clicar no + na frente da folha de estilo SpryTabbedPanels.css. 2. Editar o estilo .TabbedPanelsTab (duplo clique sobre o estilo desejado no Painel CSS Styles) 3. Na categoria Type, alterar conforme a figura abaixo:
229
2009 Alfamdia LTDA.
3. Na categoria Background, alterar a propriedade backgruond-color para #E0E1DD. 4. Na categoria Border, alterar conforme a figura abaixo:
230
2009 Alfamdia LTDA.
5. Editar o estilo .TabbedPanelsTabSelected. 6. Na categoria Type, alterar a propriedade color para #FFF. 7. Na categoria Background, alterar a propriedade background-color para #666. 8. Editar o estilo .TabbedPanelsContentGroup. 9. Na categoria Background, alterar a propriedade background-color para #FFF. 10. Na categoria Border, alterar conforme a figura abaixo:
11. Editar o estilo .TabbedPanelsContent. 10. Na categoria Box, alterar conforme a figura abaixo:
231
2009 Alfamdia LTDA.
11. Salvar todos os arquivos TAREFA 3 1. No painel Produtos em destaque, excluir o contedo Content 1 e clicar em Insert Div Tag. 2. Escolher a opo At insertion point. 3. Clicar no New CSS Rule e colocar o nome da Class de produtos. 4. Na janela CSS Rule Definition, na categoria Box, definir conforme a figura abaixo:
232
2009 Alfamdia LTDA.
233
2009 Alfamdia LTDA.
6. Criar mais 3 Divs ao lado desta com a mesma Class aplicada (se necessrio, utilizar a visualizao split e copiar o cdigo <div class="produtos">Content for class "produtos" Goes Here</div>). 7. Inserir uma imagem de produto em cada das Divs. 8. Colocar o cursor aps a ltima div e clicar em Insert Div Tag. 9. Escolha a opo At insertion point. 10. Clicar no New CSS Rule e colocar o nome da Class de texto_produtos. 11. Na janela CSS Rule Definition, na categoria Box, definir conforme a figura abaixo:
12. Criar mais 3 Divs ao lado desta, com a mesma Class aplicada (se necessrio, utilizar a visualizao split e copiar o cdigo <div class="texto_produtos">Content for class "texto_produtos" Goes Here</div>). 13. Salvar todos os arquivos.
234
2009 Alfamdia LTDA.
Unidade 17 Testando o site
Verificando acessibilidade Verificando links Verificando a compatibilidade do Navegador Executando Relatrios em um site
235
Unidade 17 Testando o Site

17.1 Verificando Acessibilidade
Quando terminamos de construir as pginas do site, conveniente testar todos os arquivos localmente, para ter certeza de que todos os links estejam funcionando e de que no esto faltando arquivos. A verificao da acessibilidade cria um relatrio que detalha os conflitos ocorridos entre o contedo e as diretrizes de acessibilidade da seo 508 do Rehabilitation Act (Lei de reabilitao) de 1998, dos EUA. possvel validar a acessibilidade do documento atual, de arquivos selecionados e do site inteiro. 1- Abrir o arquivo index.html 2- Para verificar a pgina atual, selecionar File > Check Page > Check Accessibility. O grupo de painis Results exibe todos os avisos ou erros relacionados acessibilidade:
Clique em More Info para abrir o painel Reference a fim de mostrar a diretriz de acessibilidade relevante. Tambm ser destacada a linha do cdigo com a violao, na visualizao de cdigo:
236
2009 Alfamdia LTDA.
17.2 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. 3- 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.
237
2009 Alfamdia LTDA.
17.3 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 , na barra de ferramentas do documento. Settings no menu Check Page Selecione cada navegador a ser verificado e depois a verso mnima, no menu pop-up correspondente. Por exemplo, na caixa de dilogo abaixo, o Firefox 1.0 e posterior, o Internet Explorer 5.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:
238
2009 Alfamdia LTDA.
possvel clicar duas vezes em um erro para selecionar o cdigo que o gerou.
17.4 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;
239
2009 Alfamdia LTDA.
- 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.
240
2009 Alfamdia LTDA.
Unidade 18 Fazendo Upload de arquivos

Conectando a um site remoto Definindo um site remoto Mascarando pastas e arquivos Conectando-se ao servidor Sincronizando arquivos
241
Unidade 18 Fazendo Upload de Arquivos

18.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 FTP no item Remote Info:
- FTP Host: nome Internet ou endereo IP do host de FTP; - Host Directory: diretrio no site remoto onde seus documentos esto armazenados; - Login and Password: informaes de acesso; - Use Passive FTP Usad: se a configurao do firewall exigir um FTP passivo;
242
2009 Alfamdia LTDA.
- Use Firewall: selecione esta opo caso esteja se conectando a um servidor remoto protegido por firewall; - Use Secure FTP (SFTP): selecione esta opo se precisar criar uma conexo segura. O SFTP utiliza criptografia e chaves pblicas para proteger a conexo com o servidor de teste; - Maintain Synchronization Information: sincronizar arquivos entre sites locais e remotos; - Automatically Upload Files to Server on Save: sempre que salvarmos um arquivo, ser feito um upload desse arquivo para o servidor remoto; - Enable File Check In and Check Out: permite bloquear arquivos quando um usurio do grupo estiver editando um arquivo.
18.2 Definindo um site Remoto

medida que trabalharmos com os arquivos no site, ocasionalmente ser necessrio mover, excluir ou renomear um arquivo. Assim que definirmos um site, convm utilizar o painel de arquivos para fazer mudanas em nossos arquivos. Ao fazer a manuteno dos arquivos no painel de arquivos, teremos certeza de que as informaes de nossos links permanecero corretas. O navegador de arquivos integrado ao painel de arquivos permite acessar os arquivos existentes na rea de trabalho, disco rgido ou em qualquer unidade da rede local. Usamos o navegador de arquivos da mesma forma como utilizamos o Windows Explorer para mover, excluir ou renomear arquivos. Para utilizar o navegador de arquivos integrado, clique no menu pop-up Manege Sites. Podemos ver o disco rgido local e todas as unidades da rede. Selecionar a opo: Desktop:
Clicar com o boto direito do mouse em Desktop items e selecionar New Folder menu contextual:
243
2009 Alfamdia LTDA.
7- Digitar siteremoto como nome da pasta e pressione ENTER.
18.3 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 > AlfaSports e clicar no boto Edit. 9- No item 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:
244
2009 Alfamdia LTDA.
11- Clicar em OK e aparecer uma linha vermelha riscando os cones dos arquivos que estaro mascarados:
18.4 Conectando-se ao Servidor

Com o site remoto definido (siteremoto), poderemos utilizar o Dreamweaver para fazer o upload de arquivos. 12- Selecionar Site > Manage Sites > AlfaSports e clicar no boto Edit. 13- Selecionar Remote Info e escolha Local/Network no menu pop-up.
245
2009 Alfamdia LTDA.
14- Clicar no cone da pasta. Ir at a rea de trabalho e selecionar pasta siteremoto.
15- 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, . Se o painel de arquivos se expandir, veremos o site remoto clique em Connect 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 AlfaSports, 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:
246
2009 Alfamdia LTDA.
18.5 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 Sitewide: 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.
247
2009 Alfamdia LTDA.
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:
248
2009 Alfamdia LTDA.
Unidade 19 Anexo 1 Principais Tags HTML
249
Unidade 19- Anexo 1 Principais Tags

Neste anexo apresentamos todas as tabelas de tags HTML apresentadas nas unidades anteriores, para facilitar a consulta:
TAG  <html> O QUE FAZ Insere comentrios nas pginas Toda pgina HTML deve estar entre o tag de incio de um documento HTML e o tag de fim deste documento. 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. Indica o ttulo do documento para o Browser. Geralmente os Browsers apresentam este ttulo na barra de ttulo da sua Janela no Windows 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. Insere uma quebra de linha
<head>
<title>
<body>
<br>
TAG <hn>
O QUE FAZ 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. Insere uma linha horizontal Marca um pargrafo Coloca o texto em negrito Coloca o texto em itlico 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>
<hr> <p> <strong> <em> <font>
250
Adobe Dreamweaver CS4 Desenvolvimento de Websites Interativos Color = define a cor da letra. Ex: <font color=red>Texto</font>
TAG <ol>
O QUE FAZ 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 <img>
O QUE FAZ 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 >
251
2009 Alfamdia LTDA.
TAG <a>
O QUE FAZ 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 <table>
O QUE FAZ 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
252
2009 Alfamdia LTDA.
Adobe Dreamweaver CS4 Desenvolvimento de Websites Interativos <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 <form>
O QUE FAZ 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
253
2009 Alfamdia LTDA.
Adobe Dreamweaver CS4 Desenvolvimento de Websites Interativos <option> Item de uma lista aberta Atributos Value: valor do campo se este item for selecionado Selected: indica que este valor est selecionado
254
2009 Alfamdia LTDA.
Unidade 20 Anexo 2 Layouts
255
Unidade 20- Anexo 2 Layouts

Pgina index.html
256
Pgina quem_somos.html
257
2009 Alfamdia LTDA.

Adobe Dreamweaver CS4 PDF

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Adobe Dreamweaver CS4 PDF

Transféré par

Droits d'auteur :

Formats disponibles

Lgica de Programao em Javascript

Adobe Dreamweaver CS4 Desenvolvimento de Websites Interativos

Adobe Dreamweaver CS4 Desenvolvimento de Websites Interativos

Todos os direitos reservados para Alfamdia Prow.

12/ 2009 - Verso 1.1

Alfamdia Prow (51) 2111-1666 www.alfamidia.com.br

2009 Alfamidia LTDA.

Adobe Dreamweaver CS4 Desenvolvimento de Websites Interativos

2009 Alfamidia LTDA.

Adobe Dreamweaver CS4 Desenvolvimento de Websites

UNIDADE 1 1.1 1.2

2009 Processor Alfamidia LTDA.

2009 Processor Alfamdia LTDA.

2009 Processor Alfamdia LTDA.

UNIDADE 18 18.1 18.2

2009 Processor Alfamdia LTDA.

2009 Processor Alfamdia LTDA.

Unidade 1 Organizao do Curso

2009 Processor Alfamidia LTDA.

Adobe Dreamweaver CS4 Desenvolvimento de Websites Interativos

Unidade 1 Organizao do Curso

1.2 Estrutura do Curso

2009 Processor Alfamdia LTDA.

Unidade 2 Introduo ao HTML e Web Standars

2009 Processor Alfamidia LTDA.

Adobe Dreamweaver CS4 Desenvolvimento de Websites Interativos

Unidade 2 Introduo ao HTML e Web Standards

2.2 As limitaes do HTML

2009 Alfamdia LTDA.

Adobe Dreamweaver CS4 Desenvolvimento de Websites Interativos

2.3 Os Web Standards

2009 Alfamdia LTDA.

Adobe Dreamweaver CS4 Desenvolvimento de Websites Interativos

2.5 Por que Entender o HTML?

2.6 Conceitos Bsicos de HTML

2009 Alfamdia LTDA.

Adobe Dreamweaver CS4 Desenvolvimento de Websites Interativos

2.7 Tags Bsicas

2.7.1 Exemplo de HTML com Tags Bsicas

2009 Alfamdia LTDA.

Adobe Dreamweaver CS4 Desenvolvimento de Websites Interativos

2.7.2 Principais Tags HTML

2.8 Cores em HTML

2009 Alfamdia LTDA.

Adobe Dreamweaver CS4 Desenvolvimento de Websites Interativos

2009 Alfamdia LTDA.

2009 Processor Alfamidia LTDA.

Adobe Dreamweaver CS4 Desenvolvimento de Websites Interativos

2009 Alfamdia LTDA.

Adobe Dreamweaver CS4 Desenvolvimento de Websites Interativos

3.2 Regras de Sintaxe

3.2.1 Caixa Baixa

3.2.2 Elementos sem Contedo

2009 Alfamdia LTDA.

Adobe Dreamweaver CS4 Desenvolvimento de Websites Interativos

3.2.4 Valores dos Atributos

Alm disto, os elementos sempre devem ter um valor definido: Incorreto:

2009 Alfamdia LTDA.

Adobe Dreamweaver CS4 Desenvolvimento de Websites Interativos

3.2.5 Atributo NAME

3.2.6 Elementos Obrigatrios

3.2.7 Declarao DOCTYPE

2009 Alfamdia LTDA.