12 Dreamweaver Cs6 Neweducation Sistema de Ensino

Dreamweaver CS6
Autor(a): Daniel Furtado Camargo

Atualizao: Aline Alves Salles
Cdigo: 141012A
Julho/2013
Copyright 1996/2013, NEWEDUCATION Sistema de Ensino para Educao Profissional. Todos os direitos reservados desta publicao foram reservados na forma da lei
NEWEDUCATION Sistema de Ensino para Educao Profissional.Proibida qualquer reproduo parcial ou total, seja mecnica, eletrnica, fotocpias, gravao ou
outros meios, sem prvia autorizao por escrito da NEWEDUCATION Sistema de Ensino para Educao Profissional.
www.neweducation.com.br
Apresentao
O Adobe Dreamweaver CS6 um excelente editor profissional de HTM L para criao de sites para Web. Ele oferece facilidade para projetar, desenvolver e
gerenciar sites.
Atravs de um ambiente visual amigvel o Adobe Dreamweaver CS6 permite criar sites complexos de forma rpida sem a necessidade de escrever uma linha de
cdigo.
Na verso CS6 a Adobe incluiu vrias ferramentas e recursos que so essenciais para tornar-se um profissional da rea. A nova interface de desenvolvimento do
software agiliza o trabalha ganhando velocidade na produo. O aprimoramento do recurso CSS no Adobe Dreamweaver CS6 trs agilidade para todo e qualquer tipo
de site.
O Adobe Dreamweaver CS6 permite construir aplicativos dinmicos para Web com suporte para bancos de dados, porm neste material vamos trabalhar apenas
com o design de sites.
HTM L (Hypertext M arkup Language ou Linguagem de M arcao de Hipertexto) a lngua me para a publicao de hipertexto na World Wide Web.
Representando um formato no proprietrio baseado em SGM L (Standard Generalized M arkup Language - Padro Genrico para Linguagens de M arcao), o HTM L
pode ser criado e processado por uma ampla gama de ferramentas, desde simples editores de texto at ferramentas de autoria sofisticadas.
Uma breve histria sobre HTML
A linguagem HTM L foi originalmente criada por Tim Berners-Lee quando ele trabalhava como pesquisador para o CERN e popularizada pelo aparecimento do
browser M osaic criado por M arc Andreessen quando ele estudava na Universidade de Illinois. Durante os anos noventa a linguagem espalhou-se com o crescimento
explosivo da Web, expandindo-se de vrias maneiras.
O fato de o HTM L depender de autores de pginas e de vendedores que compartilhassem as mesmas convenes acabou motivando o trabalho conjunto na
criao de especificaes para a linguagem.
A primeira verso da linguagem HTM L surgiu em 1992, seguida do HTM L+, em 1993. Em novembro de 95 foi criado o HTM L 2.0 sob a direo da EITF (Internet
Engineering Task Force) com o objetivo de codificar prticas j comuns na poca.
Embora nunca tivessem alcanado um consenso geral nas discusses sobre padres, estes rascunhos levaram adoo de uma faixa de novas caractersticas. Os
esforos do grupo de trabalho do Consrcio WWW para codificar prticas comuns em voga at o ano de 1996 resultaram no HTM L 3.2, especificado em janeiro de
97.
Atualmente o HTM L se encontra na verso 5.
Grande parte das pessoas concorda que:
os documentos HTM L deveriam trabalhar bem em diferentes browsers e em diferentes plataformas;
Uma vez conseguido estes objetivos os desenvolvedores de contedo economizariam tempo e dinheiro precisando desenvolver somente uma verso do
documento.
Verses
Existe um grupo voltado para buscar um mnimo de padronizao na Internet, especificamente na World Wide Web.
Este grupo chamado Word Wide Web Consortium ou W3C e pode ser encontrado no endereo www.w3c.org
O W3C produz o que conhecido como "Recomendaes" para HTM L. So especificaes criadas pelos grupos de trabalho W3C e votadas pelos M embros
do Consrcio.
Uma Recomendao W3C indica que foi alcanado consenso entre os membros do consrcio para determinada especificao, ou seja, esta apropriada
para uso geral.
No momento em que este material est sendo desenvolvido, HTM L 4.01 recomendada como a verso mais atual da linguagem, trazendo uma srie de
novas caractersticas:
Suporte a style sheets ou folhas de estilo: possvel controlar cores, fontes e layout das pginas Web atravs de uma folha de estilo.
Caractersticas de internacionalizao: o HTM L consegue tratar texto escrito da direita para a esquerda, como por exemplo, texto em rabe e hebraico.
Isto conseguido atravs do atributo LANG que pode ser usado com vrios marcadores para ajudar o browser a exibir o texto de uma maneira apropriada
linguagem em questo.
Caractersticas de acessibilidade: alguns usurios utilizam-se de sintetizadores de voz ou leitores de Braile quando navegam pela Web. HTM L 4 inclui
caractersticas que fazem a Web mais acessvel a quem tem problemas de viso ou outras deficincias.
XHTML:
O XHTM L, ou eXtensible Hypertext M arkup Language, uma reformulao da linguagem de marcao HTM L baseada em XM L. Combina as tags de marcao HTM L
com regras da XM L; este processo de padronizao tem em vista a exibio de pginas Web em diversos dispositivos (televiso, palm, celular, etc.). A inteno
melhorar a acessibilidade.
O XHTM L consegue ser interpretado por qualquer dispositivo, independentemente da plataforma utilizada, pois as marcaes possuem sentido semntico para as
mquinas. O HTM L no consegue esta implementao. No entanto, no existem muitas diferenas entre o HTM L e o XHTM L.
Para verificar se uma pgina XHTM L est bem construda, o melhor mtodo validar o cdigo atravs de uma aplicao Web disponibilizada pela W3C.
Objetivos
Apresentar o novo ambiente de trabalho da linha CS6
Ensinar a criar e definir sites que permitem administrar e publicar com facilidade.
Utilizar as ferramentas para criao de layouts bsicos e avanados.
Trabalhar com CSS, modelos e formulrios.
Apresentar os recursos de comportamentos e camadas.
Criar um site durante este mdulo.
Apresentao bsica do HTM L e CSS.
Ensinar as tags HTM L.
Ensinar as propriedades CSS.
Ensinar Web Standards
Criar um Web Site completo.
Unidade I - Introduo
Aula 01 - Interface do Dreamweaver CS6
O que h de Novo?
Layout da rea de Trabalho
Tela Inicial
Elementos da rea de Trabalho
Aula 02 - Configurao do Site
Definindo um Site
Estrutura do Site
Criando um Site Local
Abrindo um Site Local
Adicionando Nova Pasta ao Site Local
Atividades
Aula 01 - Interface do Dreamweaver CS6

O que h de Novo?
O Dreamweaver CS6 possui algumas atualizaes tais como:
Adobe BrowserLab - um dos novos servios on-line apresentados pelo CS6 aonde possvel verificar pginas WEB e contedo local utilizando de
mltiplas visualizaes.
Business Catalyst - servio que permite realizar criao de sites simples at aos mais complexos.
Ativar e Desativar CSS - recurso que permite ativar e desativar o CSS no layout criado.
Layout da rea de Trabalho
O Dreamweaver CS6 fornece trs opes de layout da rea de trabalho:
Cdigo - as janelas de documento mostram a visualizao de cdigo como padro e os grupos de painis esto encaixados esquerda. Este layout
recomendado para programadores.
Dividir - recomendado ao utilizar dois monitores. As janelas do documento e o inspetor de propriedades ficam no monitor primrio e todos os painis
ficam no monitor secundrio.
Design - a maneira que ser utilizada neste curso. As janelas de documento e os painis esto integrados em uma janela com os grupos de painis
encaixados direita. Este layout recomendado para o trabalho como web designer.
Para alterar o layout da rea de trabalho:
No menu Janela / Layout do espao de trabalho,escolha o layout entre as trs opes.
Tela Inicial
Ao iniciar o Dreamweaver CS6 exibida uma Tela Inicial que permite a criao de um novo arquivo ou abrir um j existente, apenas clicando nas opes.
Caso voc no queira que essa Tela Inicial seja exibida, marque a opo No Mostrar Novamente na parte inferior esquerda dessa tela.
Para exibir a tela inicial:
No menu Editar / Preferncias, escolha a categoria General e marque Mostrar tela de boas-vindas.
necessrio fechar e abrir o Dreamweaver CS6 para que a alterao seja aceita.
Tela Inicial do Adobe Dreamweaver CS6

Elementos da rea de Trabalho
rea de trabalho do Dreamweaver CS6
A. Barra de M enus;
B. Barra de Ferramentas;
C. Janela do Documento;
D. Alternador da rea de Trabalho;
E/I. Grupos de Painis;
F. Estilos CSS;
G. Seletor de Tags;
H. Inspetor de Prioridades.
Barra de Menus
Contm todos os comandos do Dreamweaver CS6.
Menu do Adobe Dreamweaver CS6

Arquivo: opes de manipulao de arquivos, como abrir, fechar e salvar;
Editar: opes de manipulao do arquivo, como copiar, cortar, colar, desfazer editar preferncias do software;
Exibir: possvel configurar a visualizao do documento inserir rguas, alm de opes de zoom;
Inserir: permite adicionar pgina, imagens, tabelas, links, formulrios, etc.;
Modificar: possibilita configurar as propriedades de uma pgina, opes de templates, imagens, entre outros;
Formatar: configuram-se tudo relacionado a texto como fonte, alinhamento, tamanho e cor;
Comandos: possvel limpar tags de HTM L, formatar tabelas, organizar o cdigo, etc.;
Site: permite gerenciar a estrutura de um site, verificar links, relatrios, etc.;
Janela: nesse menu esto todas as opes relacionadas janela do Dreamweaver CS6 como barra de insero, inspetor de propriedade, comportamento e
opes de layout;
Ajuda: nesse menu esto os arquivos e tutorias de ajuda.
Barra de Ferramentas
A Barra de Ferramentas oferece vrias facilidades para criao de pginas (como ttulos e visualizao de arquivos).
O documento o local onde construda a pgina.
O documento e a barra de ferramentas so apresentados quando se edita uma pgina. Por isso, clique no menu Arquivo / Novo escolha Pgina em Branco/HTML
e clique no boto Criar.
Barra de ferramentas
A Barra de Ferramentas contm vrios itens: Cdigo, Dividir, Design, Dinmica, Ttulo, Gerenciador de Arquivos e Auxlios Visuais.
Cdigo: exibe o cdigo-fonte;
Dividir: visualiza o cdigo-fonte e o projeto (Design) na rea de Trabalho;
Design: exibe o projeto;
Validao da W3C: realiza a validao da pgina na w3c (gera uma imagem com certificado de qualidade);
Gerenciador de Arquivos: gerenciador de arquivos;
Visualizar/depurar no navegador: exibe o documento em um navegador predefinido (F12);
Ao criar documentos no Dreamweaver CS6 o cdigo HTM L gerado automaticamente. Para exemplificar isso digite "Brasil Educao" na rea de Trabalho e clique
no modo Cdigo e veja o "" e o "~" como ficaram;
Vrias Telas: alterao do tamanho da pgina;
Atualizar: atualizao da pgina;
Ttulo: define um ttulo para a pgina (<title> </title>).
Janela do Documento
Visualiza o cdigo-fonte e o projeto (Design) na rea de Trabalho, esta opo s se torna vlida quando colocamos na barra de ferramentas o modo Dividir.
Ele faz com que tudo o que eu j esteja fazendo no cdigo fonte, o mesmo j mostre o resultado de como ser a pgina.
Design
Altera o modo de visualizao da pgina principal, podendo escolher diferentes modelos tais como.
App Developer, App Developer Plus, Classic, Coder, Coder Plus, Designer, Designer Compact, Dual Screen, Reset 'Designer', New WorkSpace, Manage WorkSpaces.
Vale lembrar que este modo de visualizao auxilia cada tipo de atividade que voc executar, j que as configuraes da tela inicial so alteradas da maneira de
distribuio mas no na funcionalidade.
Caso queira assistir um tutorial com diferentes reas de trabalho acesse o link: www.adobe.com/go/lrvid4042_dw_br
Painel
Os painis podem ser encaixados e combinados conforme a sua necessidade. So exibidos na lateral direita do Dreamweaver CS6.
O Painel possui abas sendo elas: Painel Inserir, estilo CSS e Arquivo, para expandir basta dar um duplo clique a section correspondente.
Painel de Inserir
Este Painel possui diversos tipos de objetos, como tabelas, comentrios, cada um deste objetos uma tag do HTM L, que so colocadas conforme so inseridas no
corpo da pgina.
Painel de Inserir
Hyperlink - criao de links;
Link de e-mail - criao de campo para enviar e-mails;
ncora com nome - criao de uma ncora;
Rgua horizontal - insero de uma linha horizontal;
Tabela - criao de tabelas;
Inserir tag div - insero de divisrias;
Imagens - incluso de imagens;
Mdia - incluso de vdeos;
Widget - incluso de janelas, botes, menus, cones, barra de rolagem, etc.;
Data - incluso de datas
Incluso do servidor - incluso de servios;
Comentrio - comentrios;
Ttulo (M eta, Palavras-chave, Descrio, Atualiza, Base, Link) - insero de descrio, links;
Script (Script , Nenhum script) - scripts de utilizao;
Modelos -edita e cria um novo modelo, regies editveis, repetitivas e opcional;
Seletor de tags - escolhas de diferentes Tags.
Estilo CSS
No painel CSS voc consegue verificar os estilos do CSS utilizado na criao da pgina, como por exemplo, quais as regras e as propriedades.
Painel de Estilos CSS

Resumo para seleo - resumo da seleo;
Regras - regras adotadas do CSS;
Propriedades - propriedades do CSS.
Painel Arquivos
Faz o gerenciamento dos arquivos e pastas, servindo como um atalho na insero dos dados desejados que estejam arquivados no computador, ele permite
acessar todos os arquivos e pastas do seu HD (Disco Local).
Painel de Arquivos
Na seo voc escolhe qual diretrio vai acessar e abaixo em Arquivos Locais ele mostra as pastas e arquivos contidos neste diretrio.
Seletor de Tags
A Barra de Status oferece vrias facilidades para localizar e editar alguma tag - alm do tamanho da janela.
Barra de Status
A Barra de Status contm vrios itens: seletor de tags, tamanho da janela e tamanho do documento e tempo estimado.
Seletor de tags: exibe as tags dos objetos selecionados;
Selecionar/Mover/Zoom: utilizado para alternar o modo de seleo do Dreamweaver. possvel tambm modificar o tamanho dos objetos exibidos no
documento (apenas a visualizao alterada).
Tamanho da Janela: permite definir o tamanho da janela configurando-a para ser compatvel aos diversos tamanhos de monitores e tambm nas dimenses
atuais da janela do documento (em pixels);
Tamanho do documento e tempo estimado : mostra o tamanho do documento incluindo os arquivos dependentes. M ostrando o tempo estimado para
carreg-lo no navegador. Por padro calculado o tempo de download baseado em um modem de 56 Kb;
Redimensionar Janela
Ao clicar no Tamanho da Janela exibe o menu pop-up com diversas opes.
A janela da rea de Trabalho no deve estar maximizada, pois desta forma as opes de tamanho no estaro ativas. O tamanho da janela fornecido como as
dimenses internas da janela do navegador sem bordas, enquanto que o tamanho do monitor est listado entre parnteses. Sendo assim, a opo 536 x 196 (640 x
480, padro), por exemplo, ser o tamanho da janela a ser visualizada na resoluo 640 x 480 pixels.
Editar Tamanho da Janela
Ao clicar no Editar/Preferncias aberta a caixa de dilogo Preferncias:
Janela Preferncias
clique em quaisquer valores de Largura e/ou Altura na lista Tamanhos de Janela e digite um novo valor;
clique no campo Descrio para inserir um texto descritivo sobre o tamanho que acaba de ser definido;
tambm possvel incluir um novo tamanho, colocando o cursor no espao em branco abaixo do ltimo valor.
Nesta caixa tambm possvel configurar:
Velocidade de Conexo: determina a velocidade da conexo (em kilobits per second) utilizada no clculo do tamanho de download. Enquanto o tamanho
de download da pgina exibido na Barra de Status, o tamanho das imagens exibido no Inspetor de Propriedade, quando uma imagem selecionada.
Propriedades
O inspetor de propriedades uma das reas mais utilizadas, pois permite verificar e editar as propriedades de qualquer objeto selecionado, tanto no modo
projeto como no modo cdigo.
A maioria das alteraes feitas nas propriedades imediatamente aplicada janela do documento. O tipo de elemento selecionado determinar as propriedades
que aparecero no inspetor de propriedades.
As propriedades exibidas inicialmente para cada elemento so as mais comuns.
Inspetor de Propriedades
Aula 02 - Configurao do Site

Definindo um Site
Um dos principais recursos do Dreamweaver o seu sistema de organizao de pginas - importante para que no momento da publicao no exista nenhum
problema.
Para que seja possvel controlar as alteraes, criar links, utilizar o ftp e mesmo editar as pginas html, necessrio criar um site.
Antes mesmo de o Dreamweaver entrar em cena, alguns detalhes devem ser acertados:
Objetivo: imagine qual ser o objetivo do site. Isso o ajudar na criao e desenvolvimento;
Pblico-alvo: quem acessar este site. Esta e outras perguntas o ajudaro a descrever melhor seu consumidor final;
Lpis e papel na mo: crie um esboo, desenhe as vrias pginas imaginando o seu visual na tela, posio das fotos, textos, ttulos, etc.;
Coleta de informaes: faa um estudo prvio, marque reunies com o seu cliente, converse e discuta solues com a equipe de desenvolvimento,
pesquise outras fontes de informaes;
Proposta, contrato e cronograma : a proposta detalha todo o projeto que pretende executar, tempo e custo. O contrato um instrumento legal de
comum acordo entre as duas partes. Elabore um cronograma de desenvolvimento onde ser possvel acompanhar as etapas do trabalho.
Definir estes itens poupa tempo, organiza e acelera o processo.
Estrutura do Site
A organizao do site facilita o entendimento e economiza tempo. Para configurar um site comece criando uma estrutura de pastas locais em disco. importante
que esta estrutura fique bem desenvolvida, pois ela ser a mesma publicada no servidor.
Algumas dicas ajudaro no desenvolvimento:
Classifique em categorias: coloque informaes relacionadas, crie e organize bem as pastas dividindo-as por tema ou categoria;
Pastas de sons e imagens: para facilitar a localizao de imagens e sons conveniente criar pastas separadas;
Utilize a mesma estrutura: o site local deve ter a mesma estrutura do site remoto (servidor), desta maneira ficar mais fcil atualizao dos dados;
Nomenclatura: utilize sempre letras minsculas, sem acentuao e espaos em branco nos nomes de arquivos e pasta que sero publicados. Dessa forma
evitam-se problemas na hora da publicao;
Tudo no mesmo lugar: crie pastas para tudo relacionado ao seu projeto, mesmo o que no ser publicado, como e-mails, arquivos originais (PNG, FLA) e o
contedo;
Lixeira: crie uma pasta para jogar arquivos no aprovados. Se o seu cliente mudar de ideia, o arquivo no est perdido definitivamente.
A estrutura do site no Adobe Dreamweaver CS6 fundamental para o desenvolvimento de um projeto, pois a partir disso todos os arquivos sero gerenciados por
ele. Com isso voc ter inmeras facilidades como: mover um arquivo de uma pasta sem ter que refazer os links do mesmo e verificar links quebrados.
Crie um padro para as pastas que no sero publicadas. Nesse exemplo, esto com letra maiscula.
Criando um Site Local
No Windows Explorer ou no software que achar melhor crie a seguinte estrutura de pastas:
Crie uma pasta com o nome DW_CS6.
No Adobe Dreamweaver CS6
clique no menu Site / Gerenciar Sites.
Gerenciar Site
clique no boto Novo site.
apresentado um assistente para a criao da estrutura do site:
Configurao do site para DW_CS6

Para o Dreamweaver CS6, site um conjunto de arquivos e pastas, correspondendo ao website no servidor.
preencha o campo Nome do site: com o nome do site: DW CS6;
preencha o campo Pasta do site local: este o local aonde o site ser salvo;
clique no boto Salvar.
Painel Arquivos
O Painel Arquivos exibe a pasta do site atuando como um gerenciador de arquivos, permitindo copiar, colar, excluir, mover e abrir arquivos e pastas da mesma
maneira que o Windows Explorer. Como acabou de criar o site, ele estar vazio. Voc pode criar vrias estruturas de site dentro do Adobe Dreamweaver CS6.
Exemplo disso desenvolver um site para uma empresa de calado e outro site para um mdico. Ambos os sites sero desenvolvidos no Adobe Dreamweaver CS6, mas
cada um ter a sua estrutura prpria. Para isso basta seguir as instrues Criando um site local para a empresa de calado e depois para o mdico.
Painel Files com arquivos e pastas

No Adobe Dreamweaver CS6:
clique no menu Site / Gerenciar Sites;
marque a estrutura que deseja trabalhar e clique em Fechar. Ou,
utilize o seletor de sites:
Removendo um Site Local

Quando no se deseja mais trabalhar com um site no Adobe Dreamweaver CS6 possvel retir-lo da lista de sites sem eliminar os arquivos e pastas. Entretanto,
quando um site removido, todas as informaes de configuraes so perdidas.
No Adobe Dreamweaver CS6:
marque a estrutura que deseja remover e clique em Excluir o(s) site(s) selecionado(s) no momento.
Modo Avanado
possvel criar um site no Dreamweaver sem a utilizao do assistente.
Tambm interessante definir a pasta padro para as imagens utilizadas no site. Para isso, basta clicar no cone ao lado " Pasta padro de imagens" e defina a
pasta referente ao seu site.
importante ao abrir o Adobe Dreamweaver CS6 indicar qual ser a estrutura de site local usada. Se houver mais de uma estrutura criada:
marque DW_CS6 e clique em Concludo.
Outra forma de indicar a estrutura do site local:
clique no menu Janela / Arquivo (Caso no esteja aberto este painel);
clique na caixa de lista da esquerda e escolha Dreamweaver CS6.
Adicionando Nova Pasta ao Site Local
A criao de pastas permite organizar as informaes. Crie uma pasta com nome aula_01 na pasta raiz DW_CS6.
A nova pasta ser criada dentro da pasta selecionada. Certifique-se de que pasta raiz Dreamweaver CS6 esteja selecionada no Painel Arquivo:
clique com o boto direito dentro do Painel Arquivo e escolha Nova Pasta;
digite o nome da nova pasta: aula_01.
Atividades
1. Durante o mdulo do Adobe Dreamweaver CS6 sero construdas algumas pginas utilizando os conhecimentos obtidos em cada aula. Essas pginas estaro
divididas em subpasta dentro da pasta raiz DW_CS6. Ao final ser feita uma pgina inicial que integrar todas as pginas desenvolvidas neste mdulo.
importante que a pasta raiz DW_CS6 j esteja criada dentro Adobe Dreamweaver CS6. Caso no esteja, volte para o item Criando um site local da Aula 02.
2. Crie subpastas para imagens, Arquivos e Lixeira dentro da sua pasta do projeto.
Unidade II - Elementos Bsicos de HTML e Desenvolvimento do Site

Aula 03 - Pgina
Pginas XHTM L
Criando uma Pgina em Branco
Texto Semanticamente Correto
Propriedades da Pgina
Atividades
Aula 04 - Criao de uma pgina bsica
Conceitos Bsicos
Estrutura de uma Pgina
Tipo de Documento
Aula 05 - Texto
Editor de HTM L do Tipo WYSIWYG
Inspetor de Propriedade
Barra de Insero
Aula 06 - Atividades
Aula 07 - A Linguagem CSS
CSS
Por que usar CSS em Pginas Web?
Conceitos Bsicos
M todos de Uso das folhas de Estilo
M edidas Utilizadas
Cores
Definindo o Tipo de CSS
Propriedades de Texto
Aula 08 - Formatao com CSS
Estilo CSS
Redefinio de Tags
Propriedades do CSS
Alterando Estilos CSS
Atividades
Aula 09 - Classes em CSS
Inserindo um CSS Personalizado
Aplicando um CSS
Editando um CSS
Importando um CSS
Atividades
Aula 10 - Abreviaes Comuns do CSS
Abreviaes
Abreviao de Font
Abreviao de M argin e Padding
Abreviao de Background
Abreviao de Border
Aula 11 - Tags, Classes e Seletores Especiais em CSS
Principais usos de Tags, Classes e Seletores Especiais em CSS
Elementos Filhos
Declarao de M ltiplas Tags e Classes
Seletores de Atributos Especficos
Aula 12 - Imagem
Formatos de Arquivos de Imagem
Inserindo uma Imagem
Imagem de Fundo
Aula 14 - Tabelas
O Uso de Tabelas
Inserindo uma Tabela
Selecionando uma Tabela ou uma Clula
Propriedades da Tabela
Propriedades da Clula
Editando uma Tabela
Importando Dados de Tabela
Aula 16 - Link
Tipos de Link
Atividades
Aula 03 - Pgina
Pginas XHTML
No Dreamweaver CS6 o formato padro de documento o XHTM L 1.0 Transitional. Esse formato compatvel com praticamente 100% dos navegadores de internet
atuais e possui algumas diferenas de cdigo (e visualizao) com os documentos produzidos em verses mais antigas do Dreamweaver.
Criando uma Pgina em Branco
Para criar um documento em branco, com as marcaes iniciais do XHTM L:
escolha Arquivo / Novo.
apresentada uma caixa de dilogo em que o usurio poder escolher o tipo de documento.
Criando um novo documento

escolha a categoria Pgina em Branco/HTML e <nenhum(a)>;
clique no boto Criar.
Outra forma de criar um documento em branco:
no item Criar Novo da Tela Inicial escolha HTML.
Criando um novo documento

O Adobe Dreamweaver CS6 criar uma pgina com as tags bsicas. Isso pode ser percebido clicando no cone Cdigo na Barra do Documento ou menu Exibir /
Cdigo.
Mesmo uma pgina em branco j vem preparada com o html padro

Texto Semanticamente Correto
Existe uma preocupao muito grande na produo de textos com a semntica correta em HTM L. Esse tipo de texto mais intercambivel entre servios de web
(como o RSS).
Um texto formatado de maneira correta mais reconhecvel por navegadores, mais simples de ser editado e com a possibilidade de ser exibido de maneira
diferente por diversos web sites, que podem aplicar os seus prprios estilos de texto (formatando assim a aparncia conforme o planejamento de design do prprio
web site).
Algumas dicas para a criao de um texto correto:

substitua todas as tags Font por estilos CSS;
sempre respeite a hierarquia de ttulos. Exemplo: s utilize um H3 dentro de um H2, e no depois de um H1;
no crie mais do que um ttulo principal (h1) na sua pgina;
o negrito utilizado para criar destaques. O itlico para citaes e palavras de lngua estrangeira;
pargrafos so unidades de composio e no "textos separados por espao";
o texto semanticamente correto no tem "aparncia", apenas contedo;
as definies de cor, alinhamento, fundo e tipografia so declaradas em CSS;
escrever algo semntico utilizar uma tag no contexto certo para a qual ela foi criada.
Veja um exemplo de texto com a formao correta:
<div>
<h1>HTM L</h1>
<p><b>HTM L</b> (acrnimo para a <i>HyperText M arkup Language</i>, que significa Linguagem de M arcao de Hipertexto) uma linguagem de marcao
utilizada para produzir pginas na Web</p>
<h2>Histria</h2>
<p><b>Tim Berners-Lee</b> criou o HTM L original (e outros protocolos associados como o HTTP) em uma estao <i>NeXTcube</i> usando o ambiente de
desenvolvimento NeXTSTEP.</p>
<p>As primeiras verses do HTM L foram definidas com regras sintticas flexveis, o que ajudou aqueles sem familiaridade com a publicao na Web. Atualmente a
sintaxe do HTM L muito mais rgida, permitindo um cdigo mais preciso. Atravs do tempo, a utilizao de ferramentas para autoria de HTM L aumentou, assim como
a tendncia em tornar a sintaxe cada vez mais rgida. Apesar disso, por questes histrias, os navegadores ainda hoje conseguem interpretar pginas web que esto
longe de ser um cdigo HTM L vlido.</p>
<h2>Etiquetas</h2>
Todo documento HTM L apresenta ,<b>etiquetas</b>, elementos entre parnteses angulares (sinais de maior e menor) (< e >); esses elementos so os comandos
de formatao da linguagem. A maioria das etiquetas tem sua correspondente de fechamento:<br>
<i><etiqueta>...</etiqueta></i></p>
<p>Isso necessrio porque as etiquetas servem para definir a formatao de uma poro do documento, e assim marcamos onde comea e termina o texto com
a formatao especificada por ela.</p>
</div>
Esse cdigo gera algo como:
Propriedades da Pgina
Os documentos HTM L possuem algumas propriedades bsicas que, nessa verso do Dreamweaver, so formatadas atravs da linguagem CSS. Num projeto de web
site profissional essas formataes so colocadas em uma folha de estilos separada do HTM L (esse assunto ser tratado posteriormente).
Escolha o menu Modificar/ Propriedades da Pgina.
Aparncia CSS: define a aparncia do documento CSS.
Aparncia HTML: define a aparncia do documento em HTM L.
Links: define a aparncia dos links.
Cabealhos: define a aparncia da tag Heading (<h1>...<h6>).
Ttulo/codificao: define a aparncia do ttulo (<title>) e codificao.
Imagem de rastreamento: define a aparncia da imagem de rastreamento.
Aparncia
Propriedades da pgina- Aparncia (CSS)

Fonte da pgina: configura a fonte que a pgina utilizar;
Tamanho: configura o tamanho da fonte;
Cor do texto: configura a cor da fonte;
Cor do fundo: configura a cor do fundo para a pgina;
Imagem de fundo: configura uma imagem de fundo para a pgina;
Margem esquerda: configura a margem esquerda da pgina. Caso no queira margem, necessrio utilizar o valor zero;
Margem superior: configura a margem superior da pgina. Caso no queira margem, necessrio utilizar o valor zero;
Margem direita: configura a margem direita da pgina. Caso no queira margem, necessrio utilizar o valor zero;
Margem Inferior: configura a margem do fundo da pgina. Caso no queira margem, necessrio utilizar o valor zero.
Links
Propriedades da pgina - Links

Fonte do link: configura a fonte do link;
Tamanho: configura o tamanho da fonte do link;
Cor do link: configura a cor do link;
Link de: configura a cor do link quando o cursor passar sobre ele;
Links visitados: configura a cor do link j visitado;
Links Ativos: configura a cor do link quando ele clicado;
Estilo sublinhado: configura o sublinhado do link;
Sempre sublinhado;
Nunca sublinhado;
Mostrar sublinhado somente em sobreposio: quando o cursor passar sobre, mostra o sublinhado;
Ocultar sublinhado em sobreposio: quando o cursor passar sobre, oculta o sublinhado.
Cabealhos
Propriedades da pgina - Cabealhos

Fonte do cabealho: configura a fonte da tag H1 at H6;
Cabealho 1 ao cabealho 6: configura o tamanho e cor da fonte da tag H1 at H6.
Ttulo/Codificao
Propriedades da Pgina- Titulo/codificao

Ttulo: configura o ttulo da pgina;
Tipo de documento (DTD): configura o tipo de documento;
Codificao: configura a codificao da pgina, responsvel pela forma como os acentos e caracteres especiais so inseridos no HTM L;
Formulrio de normalizao: exibe o caminho da pasta raiz do site.
Imagem de Rastreamento
Propriedades da Pgina- Imagem de Rastreamento

Imagem de rastreamento: configura uma imagem ao fundo, servindo de guia para a criao do layout;
Transparncia: configura a opacidade da imagem.
Essa imagem de fundo visvel apenas dentro do Dreamweaver.
Atividades
1. Abra a estrutura de site local Dreamweaver CS6 e crie um arquivo novo pelo menu Arquivo / Novo e edite algumas propriedades pelo menu Modificar/
Propriedades da pgina...:
Aparncia
Fonte da pgina: Arial, Helvetica, sans-serif
Tamanho da fonte: 12 pontos
Cor da fonte: vermelho escuro (#990000)
Cor do fundo da pgina: bege (#FFFFCC)
M argens (esquerda, superior, direita, inferior): 15 pixel
Ttulo / Codificao
Ttulo da pgina: Formatando a pgina
2. Digite o texto dentro da pgina criada:
"Esse um texto criado no Dreamweaver CS6."
3. Salve o arquivo (Arquivo/Salvar) com o nome propriedades.html na pasta aula_1 (criada anteriormente).
4. Observe atravs do modo Cdigo, quais as propriedades criadas no HTM L.
Aula 04 - Criao de uma Pgina Bsica

Conceitos Bsicos
Uma pgina HTM L um arquivo-texto simples (ASCII) contendo o texto da pgina e os comandos HTM L que definem a formatao da mesma.
Os comandos so indicados entre marcadores chamados "tags" que vm entre os smbolos de < e >.
A maioria dos comandos vem aos pares, sendo que a cada abertura corresponde um fechamento e cada fechamento uma repetio do comando de abertura
precedido por /.
Exemplo: <head> </head>
Existem excees quanto necessidade de um par de comandos, como no caso do espaamento simples entre linhas <br>, que no precisa ser fechado.
D icas: X HTML:
Em X HTML, toda tag fechada, inclusive o <br>. Nesse caso, o uso correto <br />.
Os comandos podem ser digitados tanto em letras maisculas quanto em letras minsculas ou numa mistura dos dois casos.
D icas: X HTML:
Em X HTML, toda tag escrita em letra minscula. Esse padro ser adotado dentro desse curso, dessa maneira produzindo um cdigo HTML mais correto e mais
simples de ser migrado para X HTML
Alguns comandos possuem parmetros (como a cor, por exemplo). Esses parmetros so separados por um espao e colocados entre aspas.
Exemplo: <body bgcolor="red"> </body>
Espaos extras em branco, tabulaes, quebras de linha e marcas de final de linha so ignorados dentro do cdigo de uma pgina, ou seja: no deixando um
espao maior entre dois comandos que se obtm o efeito de uma linha em branco na tela.
Um arquivo de uma pgina HTM L deve ser gravado com a extenso .htm ou html.
Sendo a pgina HTM L um arquivo texto, pode ser criada ou editada em qualquer editor de textos simples como, por exemplo, o Bloco de Notas do Windows.
Existem no mercado, inmeros editores de pginas HTM L j no formato WYSWYG ("What you see is what you get", algo semelhante a "O que voc est vendo ao
criar a pgina o que ter ao visualiz-la no navegador"). Neste caso a pgina montada num ambiente amigvel onde no preciso entrar diretamente com os
comandos.
Isto no implica, no entanto, na no necessidade de se conhecer HTM L. Quem conhece a linguagem HTM L consegue compreender o cdigo gerado pelos
editores de pginas Web e com isto:
desenvolve pginas limpas em termos de codificao que so carregadas rapidamente;
pode escolher a alternativa mais adequada para problemas comuns de layout de pgina;
tem uma intimidade maior com os comandos, sua sintaxe e semntica;
tem em mente como estruturar o site como um todo, diante das possibilidades oferecidas pela linguagem.
Estrutura de uma Pgina
Uma pgina delimitada pelos comandos <html> </html>. Desta forma, estes so respectivamente o primeiro e ltimo dos comandos do cdigo.
Toda pgina composta por um cabealho e um corpo sendo que na codificao, o cabealho vem antes do corpo.
Comandos do cabealho: <head> </head>
Comandos do corpo: <body> </body>
Exemplo de delimitao do cabealho e corpo de uma pgina

O exemplo a seguir exibe o cdigo de uma pgina que j pode ser visualizada no browser.
<html>
<head>
</head>
<body>
</body>
</html>
Para testar cada cdigo apresentado no exemplo:
No Bloco de Notas digite o cdigo.
D icas: No menu Arquivo, acione o comando Salvar como, salvando o arquivo com a extenso .htm, atente para que na caixa de seleo, "Salvar como tipo", a opo
"Todos os arquivos" esteja selecionada. Caso contrrio ser acrescentada automaticamente a extenso .txt ao final do nome do arquivo.
Tipo de Documento
Atualmente existem vrios tipos de HTM L e XHTM L (HTM L 4.01 Strict, HTM L 4.01 Transitional, XHTM L 1.0 Strict, etc.). Para que o navegador interprete de maneira
correta o seu cdigo e exiba a sua pgina conforme o seu planejamento, necessrio declarar o seu DocTipo (Definio do Tipo de Documento).
Essa declarao fundamental para que o navegador processe o seu cdigo de maneira rpida e correta e inserida logo no incio do documento (antes mesmo
da marcao HTM L).
Veja o exemplo da marcao para XHTM L 1.0 Transitional:
<!DOCTIPO html PUBLIC "-//W3C//DTD XHTM L 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Sem a declarao acima, vrios cdigos so processados de maneira errada pelo navegador, que interpreta o seu HTM L de maneira "genrica".
Cabealho (Head)
Delimitado pelos comandos <head> e </head>, o cabealho da pgina contm informaes sobre a pgina que no sero visualizadas no navegador, porm por
web robots e buscadores.
Principais Marcadores do Cabealho da Pgina
<title> Ttulo da pgina </title>
Identifica o texto a ser exibido na barra de ttulos da pgina.

Quando o usurio entra em uma ferramenta de busca (como Google, Yahoo, etc.) procurando por um assunto especfico, o contedo do marcador <title> de uma
pgina a primeira coisa a ser vasculhada. Da a importncia em escolher ttulos coesos para as pginas e que consigam traduzir o contedo da pgina em poucas
palavras.
Alm disso, quando o usurio escolhe uma pgina para colocar em sua lista de Favoritos do browser, o ttulo da pgina que aparecer na lista. Caso a pgina no
tenha o marcador <title> setado ou se ele no contiver nada, o browser assumir o nome do arquivo. Exemplo:
<title>NewEducation - Sistema de Ensino para Educao Profissional.</title>
<meta name="description" content="contedo da pagina" />
Resume o contedo da pgina. Este marcador tambm utilizado pelas Ferramentas de Busca no cadastramento do site.
D icas: As ferramentas de busca trabalham com "web robots": programas que vasculham a Internet procurando novos sites e cadastrando suas informaes.
Tambm chamados de spiders, procuram essa meta tag para saber qual a melhor classificao para cadastrar o site nessas ferramentas de busca. Quando no
encontram essas informaes, normalmente os robs usam um critrio prprio para cadastrar o site, que varia de acordo com o rob e com a ferramenta de busca.
Alguns deles, quando no encontram estas tags utilizam os primeiros 200 ou 300 caracteres da pgina.
Exemplo:
<meta name="description" content="Site da NewEducation. NewEducation o primeiro Sistema de Ensino brasileiro para Educao Profissional. Apostilas e
contedos on-line para Cursos Tcnicos. Implemente em sua Escola Tcnica.">
<meta name="keywords" content="palavras-chave da pagina" />
Apresenta as palavras-chave da pgina. Este marcador tambm utilizado pelas Ferramentas de Busca no cadastramento do site. importante atentar para as
palavras que se escolhe como chave. Se o site, por exemplo, for de uma empresa de sistema de ensino da regio de Campinas, mas a palavra Campinas no for
colocada como chave, um internauta procurando por esse tipo de empresa no a encontrar no mecanismo de busca.
Exemplo:
<meta name="keywords" content="treinamento, informatica, cursos tcnicos para iniciantes, cursos de informatica para profissionais, integrao de sistemas,
calendario de cursos, conteudo programatico, certificao profissional, Campinas.">
D icas: Buscadores como o Google do grande importncia para marcaes de palavras-chave, descrio e ttulo da pgina. Se voc quer ficar bem posicionado em
um buscador, no deixe de se preocupar com essas marcaes.
Corpo (Body)
Delimitado pelos marcadores <body> e </body>, o corpo a parte da pgina que contm informaes que sero visualizadas na tela.
Principais Atributos do Marcador Body
<body background="Url_da_imagem">
Especifica a imagem (GIF ou JPEG) utilizada para preencher o fundo da tela. importante observar se o endereo da imagem est correto.
D icas: O caminho do arquivo pode ser absoluto ou relativo. A maioria dos sites utiliza endereos relativos para as imagens, j que a utilizao de caminhos
relativos no prende o site a uma determinada estrutura de diretrios na raiz.
Exemplo:
<body background="img/fundo.gif">
<body background="http://www.umsite.com.br/img/fundo.gif">
A imagem escolhida como fundo da pgina ocupar toda a regio da tela, ou seja, mesmo sendo uma imagem pequena, esta ser repetida por toda a pgina,
cobrindo toda a sua extenso.
possvel tirar proveito do fato da imagem de fundo ser ladrilhada na pgina. Uma pgina com uma faixa lateral, por exemplo, pode ter como imagem de fundo um
arquivo pequeno e de carregamento leve, que ao ser repetido, compor o fundo desejado.
A imagem original e o resultado de sua insero como fundo da pgina

<body bgcolor="cor" >
Especifica a cor de fundo da pgina. O valor que entrar pode ser uma constante ou um nmero hexadecimal correspondente aos valores RGB da cor.
Exemplo:
<body bgcolor="red">
<body bgcolor="#996633">
<body text="cor" link="cor" vlink="cor" alink="cor" topmargin="0" leftmargin="0">
Especifica respectivamente as cores para:
texto geral da pgina ou foreground (text);
links no visitados (link);
links j visitados (vlink);
link no momento em que ativado (alink);
topmargin - margem superior;
leftmargin - margem esquerda.

Exemplo:
<body bgcolor="#000000" link="#FFFF00" vlink="#FF00FF" alink="#00FF00">
D icas: CSS: A propriedade de imagem de fundo pode ser declarada utilizando a linguagem de estilos de texto CSS. Dessa maneira possvel controlar a repetio,
posio e obter mais controle do seu layout.
Cores (tanto do fundo, quanto do texto) e margens tambm podem ser declaradas utilizando CSS.
No desenvolvimento web moderno, CSS sempre preferencial sobre o HTML na formatao da aparncia da pgina.
Aula 05 - Texto
Editor de HTML do Tipo WYSIWYG
Por ser um editor de HTM L do tipo WYSIWYG, possvel digitar, editar e visualizar o texto medida que se escreve no Dreamweaver, facilitando muito o trabalho
do web designer.
Todo o texto pode ser formatado utilizando o inspetor de propriedades, modificando o formato, estilo, alinhamento e tamanho.
D ica: Para a criao de novos pargrafos (tag <p>) necessrio utilizar a tecla <Enter>
Atravs do <Shift> + <Enter> possvel criar quebra de linha (tag <br />).
O inspetor de propriedades automaticamente mostra as opes de formatao de texto quando o cursor est sobre uma palavra, pargrafo ou ttulo. Porm,
normalmente, so feitas apenas marcaes "semnticas" nesse inspetor, deixando a formatao de aparncia para o painel de CSS.
Inspetor de Propriedade - Texto

Formato: Configura um formato para texto. Essa opo marca semanticamente o texto como um pargrafo, ttulo ou texto pr-formatado (tag <pre). Os atalhos
para os ttulos so:
Heading 1 - <Ctrl> + 1
E para o pargrafo o atalho <Ctrl> + <Shift> + P
Fonte: Configura o tipo de fonte a ser aplicado. Normalmente deixado o valor padro (definido na propriedade da pgina ou atravs de CSS).
O Dreamweaver possui algumas famlias pr-instaladas de fonte. Essas so as fontes mais comuns encontradas nos computadores atuais e por isso "favoritas" pela
maioria dos web designers.
Pode-se criar uma lista de fontes no Dreamweaver atravs da opo Editar listas de fontes...
Editar listas de fontes

Para criar uma famlia, basta escolher a fonte em Fontes disponveis e clicar na seta para a esquerda.
importante criar uma famlia onde pelo menos uma fonte bastante comum, pois do contrrio, a pgina ficar com a fonte padro do usurio.
Tamanho: configura o tamanho do texto. Essa propriedade tambm "herdada" da configurao da pgina. M odificar o tamanho de um texto no altera o
seu valor, apenas a sua aparncia. Se o objetivo criar um ttulo, deve ser utilizada a opo formatar;
Estilo: configura um estilo CSS para a pgina. Importante notar que na verso Adobe Dreamweaver CS6 uma simples configurao nas propriedades de
texto j criado um estilo CSS. Para constatar isso, formate a fonte, a cor e o tamanho de um texto e depois clique no menu Janela/ Estilos CSS. Um painel
ser aberto com um estilo criado;
Negrito e Itlico: configura os efeitos de negrito e itlico no texto;
Alinhamento (esquerda, centro, direita e justificado): escolha o tipo de alinhamento para o texto: esquerda, centro, direita e justificado. Normalmente
deixado o valor padro configurado no CSS;
Lista no ordenada e ordenada: configura uma lista para o texto. Pode ser do tipo: no ordenada ou numrica. Na opo tipo de lista possvel escolher
o tipo da lista como: numrica, marcadores entre outros tipos;
Remover citao em bloco/ Citao em bloco: permite retirar e colocar recuos nos textos. Este opo pode ser aplicada tambm em uma lista, caso
queira criar nveis e subnveis;
Link: depois de selecionar um texto possvel configurar um link para uma pgina, imagem, etc.;
Destino: usado para indicar como ser aberto um link (_self e _blank). Tambm utilizado em Molduras. Essa opo s ativa quando configurado um link;
Propriedades da pgina: pode-se abrir as propriedades da pgina atravs deste boto, alm da opo do menu Modificar.
Barra de Insero
Alm das opes de formatao encontradas no Inspetor de Propriedades, ainda existem algumas tags relativas aos textos que podem ser inseridas atravs da
Barra de Insero.
Barra de Insero - Texto
1. Dentro do site Dreamweaver CS6 crie uma nova pasta chamada aula_2.
2. Crie um novo documento HTM L em branco e digite (ou copie da internet) um texto com cinco pargrafos.
3. Insira um ttulo principal (Heading 1) e dois ttulos secundrios (Heading 2).
4. Insira uma lista no ordenada com 5 itens.
5. Aplique a marcao de negrito em pelo menos dez palavras.
6. Salve este arquivo na pasta aula_2 com o nome de texto1.html.
Aula 07 - A Linguagem CSS

CSS
CSS (Cascading SyleSheets ou Folhas de Estilos em Cascata) uma tecnologia padronizada pela W3C (nasceu em meados de 1996), que no parte do HTM L
padro, mas sim um conjunto de novas tags que ajudam a ter um melhor controle sobre o layout e o gerenciamento do site.
Por que usar CSS em Pginas Web?
Todo documento escrito utiliza certos elementos de design para formatar sees de texto a fim de manter a mesma aparncia, seguindo assim um padro.
As Folhas de Estilos em Cascata permitem uma versatilidade maior na programao do layout de pginas Web sem aumentar o seu tamanho em Kb, pois oferece
vrias possibilidades que antes eram conseguidas com a utilizao de gifs e jpgs. Basicamente, o CSS permite ao designer um controle maior sobre os atributos
tipogrficos de uma home page, como tamanho e cor das fontes, espaamento entre linhas e caracteres, margem do texto, entre outros.
Devido s grandes vantagens advindas do uso do CSS, a maioria dos grandes sites est usando-o em suas pginas.
D icas: Apndice A - Veja um exemplo abrangente do porque utilizar CSS.
Verses e Compatibilidade
Como j mencionado, existe um grupo voltado para buscar um mnimo de padronizao na Internet, especificamente na World Wide Web.
D icas: Este grupo chamado Word Wide Web Consortium ou W3C e pode ser encontrado no endereo www.w3.org.
Os nveis de CSS so: Nvel 1 e Nvel 2. A diferena bsica que na CSS 2 foi implementado o recurso de posicionamento e colocao de elementos em camadas,
permitindo a sobreposio de texto sobre texto ou texto sobre figuras.
O W3C recomenda em muitos casos que as folhas de estilo sejam usadas em vez das tags padro do HTM L e isso pode ser verificado na prpria documentao da
HTM L quando se encontra uma tag ou parmetro marcado com "deprecated".
O CSS suportado pelos browsers M icrosoft Internet Explorer e Netscape Navigator, nas verses 4 ou posteriores. importante deixar bem claro que, embora
seja essa uma especificao padro do W3C, nem todos os browsers e verses apresentam os mesmos resultados e tambm podem no ter alguma caracterstica
implementada.
Assim, torna-se importante ainda o uso dos principais browsers do mercado para testar os recursos do CSS.
Conceitos Bsicos
Para que uma folha de estilo possa definir a aparncia de um documento, o browser precisa saber que ela existe. A tag <style> e </style> determinam o incio da
style sheet.
Cada estilo que voc cria definido como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe:
Elemento {atributo1:valor;atributo2:valor...}
Elemento - descreve o elemento de design ao qual o estilo ser aplicado. A mesma tag HTM L, mas sem os sinais de maior e menor. Tambm podem ser
utilizadas classes personalizadas.
Atributo - o aspecto especfico do elemento usado como estilo. Deve ser um nome de atributo CSS vlido, como o atributo font-size.
Valor: a configurao aplicada ao atributo. Deve ser uma configurao vlida para atributo em questo, como 20pt para font-size.
Exemplo:
<style Tipo="text/css">
<!-p (text-decoration: underline;}
-->
</style>
D icas: permitido declarar mais de um atributo para um elemento. Essas declaraes so separadas por um ";". Entretanto comum colocar o mesmo ";" ao
declarar apenas um atributo.
Mtodos de Uso das Folhas de Estilo
Existem quatro (4) maneiras para incluir estilos CSS s pginas:
Estilo In-Line: mtodo utilizado para aplicar o estilo em elementos individuais na pgina. Normalmente utilizado em casos de excees a uma regra j
declarada.
Folhas de Estilo incorporadas: mtodo utilizado para aplicar estilo em qualquer elemento da pgina, por serem incorporados a tag <head>.
Folhas de estilo externas: mtodo que permite usar uma folha de estilo em vrias pginas HTM L..
Importao de estilo: mtodo que permite importar uma folha de estilo de outro arquivo. A importao de um style sheet parecida com o mtodo
anterior, a diferena que voc no pode combinar o mtodo de link com outros mtodos de inseres de estilos, mas a importao pode ser combinada.
Estilo in line
M todo utilizado para aplicar o estilo em elementos individuais na pgina. Este estilo definido no corpo do cdigo HTM L atravs do atributo STYLE.
Exemplo de mtodo In-Line

Exemplo:
<html>
<head>
</head>
<body>
<h1 style="font-family:Impact;background:yellow;color:red">
Este um titulo HTM L usando CSS</h1>

<p style="color:green">Cascading Style Sheet</p>
</body>
</html>
Folhas de Estilo Incorporadas
M todo utilizado para aplicar estilo em qualquer elemento da pgina, por serem incorporados a tag <head>. Quando o style sheet includo desta
maneira, as definies colocadas ali valem para toda a extenso daquele arquivo HTM L. O atributo Tipo="text/css" quer dizer que o estilo se trata de um
tipo M IM E, para que os browsers que no suportam CSS ignorem o cdigo.
<html>
<head>
<!-h1 {font-family:impact;background:yellow;color:red;}
p {color:green;}
-->
</style>
</head>
<body>
<h1>
<p>Cascading Style Sheet</p>
</body>
</html>
Exemplo utilizando mtodo Folhas de estilo Incorporadas

Folhas de Estilo Externas
Com este mtodo, pode-se fazer com que vrias pginas HTM L usem estilos definidos em um nico arquivo central. A grande vantagem deste mtodo que, se
voc quiser fazer uma mudana nos estilos da pgina, basta alterar em um nico local e todas as pginas vinculadas a ela sero alteradas tambm.
Exemplo:
<html>
<head>
<link rel="stylesheet" href="estilos.css" Tipo="text/css">
</head>
<body>
<h1>
</body>
</html>
Agora para criar o arquivo CSS:
h1{font-family:impact;background:yellow;color=red}
p{color=green}
Salve o arquivo como estilos.css.
Exemplo utilizando mtodo Externa

Importao de Estilos
A importao de um style sheet parecida com o mtodo anterior. A diferena que no se pode combinar o mtodo de link com outros mtodos de inseres
de estilos, mas a importao pode ser combinada.
Exemplo:
<html>
<head>
<!-@import url(estilos.css);
-->
</style>
</head>
<body>
<h1>
Este um ttulo HTM L usando CSS</h1>
</body>
</html>
Exemplo utilizando mtodo Importao

Medidas Utilizadas
Na definio das vrias propriedades das folhas de estilo, diversas medidas podem ser usadas, sendo que algumas so relativas e outras absolutas.
px - nmero de pixel. relativo resoluo do monitor ou outro dispositivo onde a pgina ser exibida. Exemplo: 100 pixels em uma tela com resoluo de
640x480 resultam em um tamanho maior que os mesmos 100 pixels em uma tela com resoluo de 800x600.
in - polegadas
cm -centmetros
mm - milmetros
pt - pontos
pc - paicas
em - pontos. Esta unidade igual ao tamanho em pontos de uma fonte. No exemplo abaixo, ela se refere ao tamanho do "elemento pai":
p {font-size: 10pt}
b {font-size: 1.5em}
Neste caso, qualquer texto na tag <B> inclusa numa tag <P> ter um tamanho de 15 pontos (1.5em x 10 pt)
Cores
Nas tags padro HTM L pode-se usar as cores declarando o seu nome: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal,
white, yellow, etc. ou atravs de seus cdigos RGB em formato hexadecimal.
Alm dessas notaes que podem ser usadas para a CSS, outras notaes esto disponveis, as quais podem facilitar muito o trabalho do desenvolvedor.
Exemplos:
{color: #ff0000;} - representa FF para vermelho, 00 para verde e 00 para azul
{color: rgb (255,120,60);} - os valores vo de 0 a 255
{color: rgb(100%,15%,40%);} - representa 100% para vermelho, 15% de verde e 40% de azul.
Definindo o Tipo de CSS
Voc pode escolher como utilizar o CSS. Existem vrios tipos como: seletores, classes, redefinir tags, seletores contextuais, seletores de links, etc.
Classes
Todos os elementos dentro do elemento body podem ser agrupados em classes, as quais podem ser ligadas folha de estilo que aumentam o poder de controle
sobre os elementos.
Imagine que em um primeiro pargrafo queira colocar o texto na cor vermelha, no segundo pargrafo verde e no terceiro cinza.
Exemplo:
<html>
<head>
<!-.primeiro {color:red;font-size: 10pt;}
.segundo {color:green;font-size: 12pt;}
.terceiro {color:gray;font-size: 14pt;}
-->
</style>
</head>
<body>
<p class=" primeiro">Primeiro pargrafo</p> <p class=" segundo">Segundo pargrafo</p> <p class=" terceiro">Terceiro pargrafo</p>
</body>
</html>
Exemplo de Classe
D icas: O nome da classe, que pode ser qualquer um (no numrico), identificado pelo ".".
Classes nicas
Em certas situaes, apenas um item dentro do cdigo de uma determinada classe (como o topo de um site, por exemplo) e para isso existem um identificao
de classe nica. A diferena para classe tradicional (declarada com o ".") que enquanto a classe comum pode ser usada por diversas tags, a classe nica s pode
ser utilizada uma vez.
Imagine que em um layout exista um pargrafo que serve para identificar o preo de um produto (mostrado apenas uma vez na pgina) e esse preo exibido em
vermelho.
Exemplo:
<html>
<head>
<!-#preo {color:red}
-->
</style>
</head>
<body>
<p>Notebook HP</p>
<p id="preo">R$ 3500,00</p>
</body>
</html>
D icas: O nome da classe nica, que pode ser qualquer um (no numrico), identificado pelo "#".
Redefinindo Tags
Ao redefinir uma tag HTM L em CSS, ela automaticamente formatada pelos estilos definidos.
Imagine que em um documento html voc tenha vrias ocorrncias da tag <p>, e quer que todos estes pargrafos fiquem com a mesma formatao. Ento voc
redefine a tag <p>.
Exemplo:
<html>
<head>
<!-p {color:red;font-size: 30pt}
-->
</style>
</head>
<body>
<p>Primeiro pargrafo</p>
<p>Segundo pargrafo</p>
<p>Terceiro pargrafo</p>
</body>
</html>
Exemplo de tag redefinida

As declaraes devem ser dadas da mais geral para a mais especfica. As tags herdaro as propriedades da declarao geral, tendo como mudana a declarao
especfica.
Os estilos CSS podem ser combinados, para otimizao do cdigo, declarando vrios atributos ao mesmo tempo para vrios elementos.
Imagine que num determinado documento todo o texto formatado com a fonte Arial, porm cada tag (h1, h2 e p) possuem uma cor e tamanhos especficos.
Imagine ainda que exista um tipo de pargrafo especial que tem a cor diferente (porm ainda possui o valor semntico de um pargrafo comum).
Para isso so utilizadas declaraes de redefinio de tag e classe, como no exemplo a seguir:
<html>
<head>
<!-p, h1, h2 {font-family:Arial;}
p{color:black;}
h1{color:red;}
h2{color:blue;}
.destaque {color:red;}
-->
</style>
</head>
<body>
<h1>Css fundamental</h1>
<p>Todo o texto pode ser formatado com CSS, sem perder a sua funo original.</p>
<h2>A semntica importante para o cdigo</h2>
<p class="destaque">Cada tag tem a sua funo especfica</p>
<p>Os pargrafos possuem funo diferente dos ttulos, apesar de poderem dividir propriedades e atributos</p>
</body>
</html>
Propriedades de Texto
As propriedades de texto definem como um texto ser aplicado. Os elementos so:
Endentao
Text-indent
Esta propriedade define a tabulao de um texto e seus valores podem ser dados em diversas unidades de medida. O valor pode ser negativo, mas deve
obedecer aos limites impostos por cada browser.
Exemplo:
<html>
<head>
<title>Definindo indentao</title>
<!-.pixel {text-indent: 24px;}
.pontos {text-indent: 24pt;}
-->
</style>
</head>
<body>
<p class="pixel">Neste pargrafo utilizada a propriedade text-indent</p> <p class="pontos">Neste pargrafo utilizada a propriedade text-indent</p>
</body>
</html>
Exemplo da propriedade text-indent

Alinhamento
Text-Align
Esta propriedade define o alinhamento do texto.
Exemplo:
<html>
<head>
<title>Definindo Alinhamento</title>
<!-.centro {text-align: center;}
.direita {text-align:right;}
-->
</style>
</head>
<body>
<p class="centro">Neste pargrafo utilizada a propriedade text- align</p> <p class="direita">Neste pargrafo utilizada a propriedade text- align</p>
</body>
</html>
Exemplo da propriedade text-align

Espaamento
Letter-spacing
Esta propriedade define espaamento entre as letras.
Exemplo:
<html>
<head>
<title>Definindo Espaamento</title>
<!-.palavra {letter-spacing: 10px;}
-->
</style>
</head>
<body>
<p class="palavra">NovoEducation</p>
</body>
</html>
Exemplo da propriedade letter-spacing

Caixa Alta e Baixa
Text-Transform
Esta propriedade define a caixa dos caracteres de um trecho de texto. O texto pode ficar em maisculo, minsculo ou com a primeira letra de cada
palavra em maiscula.
Seus valores-chave so:
uppercase - todas as letras do texto sero em maisculas;
lowercase - todas as letras do texto sero em minsculas;
capitalize - a primeira letra de cada palavra estar em maiscula;
none - nenhum.
Exemplo:
<html>
<head>
<title>Definindo caixa</title>
<!-.capitais {text-transform: capitalize;}
.maiusculas {text-transform: uppercase;}
-->
</style>
</head>
<body>
<p class="capitais"> Testando uma propriedade</p> <p class="maiusculas"> Testando uma propriedade</p>
</body>
</html>
Exemplo da propriedade text-transform

Espaamentos entre Linhas
Line-Height
Esta propriedade define o espaamento entre linhas de um pargrafo.
Exemplo:
<html>
<head>
<title>Definindo Espao entre as linhas</title>
<!-h2 {line-height: 30pt}
-->
</style>
<body>
<h2>Espaamento entre linhas Espaamento entre linhas Espaamento entre linhas Espaamento entre linhas Espaamento entre linhas Espaamento entre linhas
Espaamento entre linhas Espaamento entre linhas Espaamento entre linhas Espaamento entre linhas Espaamento entre linhas Espaamento entre linhas
Espaamento entre linhas Espaamento entre linhas Espaamento entre linhas </h2>
</body>
</html>
Exemplo da propriedade line-height
Aula 08 - Formatao com CSS

Estilo CSS
A melhor maneira para a formatao da aparncia dos textos (cores, fontes e tamanhos) atravs de estilos CSS.
Esta linguagem, mais poderosa do que o HTM L, utilizada para a personalizao da aparncia de qualquer tag. Alm disso, possvel a criao de classes
personalizadas, dando maior versatilidade formatao do texto (esta opo ser abordada numa prxima unidade).
Redefinio de Tags
A primeira maneira mais til de se utilizar estilos CSS alterando as propriedades de tags existentes no documento HTM L.. possvel modificar toda a formatao
de determinada tag (como o <p>, por exemplo) em toda a extenso da pgina ou mesmo do web site todo (atravs de uma folha de estilos).
Para redefinir uma tag do HTM L utilizado o painel Estilos CSS, visto na figura a seguir atravs dos passos:
Painel CSS Styles

Observe que na parte inferior desse painel existem alguns botes importantes.
Anexar Folha de Estilos: aplica um CSS j existente;
Nova Regra CSS: cria um novo CSS;
Editar regra: edita um CSS j criado;
Desativar/Ativar propriedades CSS: habilita ou desabilita uma regra CSS
Excluir propriedades CSS: apaga um CSS j criado;
clique no boto Nova Regra CSS;
escolha o tipo de seletor Tag na caixa de seleo.
Diversas tags so mostradas na opo Tag e possvel que seja exibida a marcao relativa ao texto selecionado no Dreamweaver.
Para o exemplo, ser escolhida a Tag body. O body utilizado para configurar as propriedades das pginas, como fonte e cor de fundo.
A nova regra de CSS criada ser colocada em uma nova folha de estilos, podendo ser utilizada por diversos documentos HTM L.
Nas prximas telas podem ser escolhidas as propriedades do CSS. Para o exemplo sero alteradas apenas:
na guia Tipo / Fonte - Verdana, Arial, Helvetica, sans-serif;
na guia Fundo / BackgroundColor - #66CCCC;
na guia Caixa / Margin - 20 pixels;
clique no boto OK e note como a pgina, incluindo todos os textos, foi alterada.
Assim como o Body foi alterado, possvel modificar todas as marcaes encontradas no HTM L.
Propriedades do CSS
Tipo: determina as configuraes do texto como fonte, tamanho, cor, etc.;
Fundo: determina as configuraes do fundo de uma pgina como background color, background image, repeat, etc.;
Bloco: determina as configuraes do bloco de texto como word spacing, letter spacing, text align, etc.;
Caixa: determina as configuraes da caixa como height, width, clear, etc.;
Borda: determina as configuraes de borda como style, width, color, etc.;
Lista: determina as configuraes de lista como Tipo, bullet image, position, etc.;
Posicionamento: determina as configuraes de posicionamento como Tipo, height, width, etc.;
Extenses: determina as configuraes de extenses como page break e visual effect.
Transio: propriedades animadas
Essas opes apresentadas no so configuradas de uma s vez. possvel configurar apenas o que deseja e ter assim um CSS para cada ocasio.
Alterando Estilos CSS
Uma vez criados os estilos CSS, as suas propriedades podem ser alteradas de duas maneiras:
atravs do boto EditarRegra... (cone de um lpis) do painel Estilo CSS;
atravs do inspetor dinmico de CSS, tambm encontrado no painel Estilos CSS.
Atividades
1. No documento aula_2.html, crie as novas regras de CSS na folha de estilos estilos1.css:
H1 - Tipo / Tamanho - 36 pontos e Tipo / Cor - #FFFFFF
H2 - Tipo / Tamanho - 24 pontos e Tipo / Cor - #003333
P - Tipo / Tamanho - 10 pontos e Tipo / Cor - #000000
Li - Tipo / Tamanho - 10 pontos e Tipo / Cor - #000000
2. Salve os documentos e visualize no seu navegador as alteraes (F12).
Aula 09 - Classes em CSS

Inserindo um CSS Personalizado
Como visto anteriormente, o CSS uma linguagem complementar ao HTM L e permite um ajuste mais preciso da aparncia da pgina. Alm de formatar as tags j
existentes, possvel criar classes personalizadas, aumentando ainda mais o controle sobre a aparncia do documento.
Painel Design
escolha o menu Janela/ Estilos CSS;
escolha o boto Nova Regra CSS para inserir um CSS;
aberta a janela Nova Regra CSS para criar um CSS.
Novo Regra CSS

Tipo de Seletor: determina o tipo do CSS a ser criado. O item Classe personalizado e aplicado a qualquer tag. O item Tag uma tag especfica e
definida.
Nome do seletor: determina o nome do CSS a ser criado. importante notar que todo nome de classe precedido por um ponto.
Definio da regra: determina se ser criado um arquivo CSS, podendo ser inserido em vrias pginas, ou apenas inserido a uma nica pgina
especfica.Caso seja selecionada a opo Novo arquivo de folha de estilos abrir a janela para salvar um arquivo CSS.
Toda opo selecionada no item Tipo de Seletor ser aberta uma janela para configurar as propriedades do CSS.
Aplicando um CSS
Aps a criao de um CSS possvel aplic-lo em qualquer parte da pgina de duas formas: pelo painel Design e pelo Inspetor de Propriedades.
Painel Design
selecione um contedo no documento;
clique no menu Janela / Estilos CSS, caso o painel Design no esteja aberto;
selecione no painel Design um CSS j criado para aplicar no contedo selecionado.
selecione um contedo na rea de Trabalho;
as propriedades do contedo so exibidas no Inspetor de Propriedade;
se for um texto selecionado procure a opo Estilo no Inspetor de Propriedade. Porm, se for qualquer outro contedo selecionado procure a opo
Classe no Inspetor de Propriedade.
Editando um CSS
Aps a criao de CSS possvel tambm edit-lo, porm importante lembrar que se o CSS j tenha sido aplicado em algumas pginas, essas tambm sofrero
modificaes aps a edio do CSS.
clique no menu Janela / Estilos CSS, se o painel Design no estiver aberto;
no painel Design selecione o CSS desejado e clique no boto Editar Estilo, na parte inferior do painel;
aberta a janela Novo Estilo CSS para a edio do CSS desejado. Altere as opes desejadas e clique no boto OK.
Importando um CSS
possvel importar um CSS pronto de outra estrutura de site. Porm, importante ressaltar que o CSS importado ter vnculo com o arquivo de origem, podendo
assim editar este arquivo para que todas as pginas relacionadas se modifiquem de forma simples e rpida.
clique no menu Janela / Estilos CSS, se o painel Design no estiver aberto;

no painel Design clique no boto Anexar folha de estilos externa, na parte inferior do painel;
aberta a janela Anexar folha de estilos externa para a importao de um CSS desejado.
Anexar folha de estilos

Arquivo/ URL: determina o caminho do arquivo CSS, para isso clique no boto Browser.
Adicionar como: determina o tipo de importao do arquivo CSS.
Mdiaw: determina para que mdia seja aplicada nesse CSS.
Atividades
1. Abra a estrutura de site local Dreamweaver. Abra o arquivo texto1.html da pasta aula_2.
2. Crie a partir dessa pgina uma classe em CSS com o nome de destaque.
3. Configure nessa classe algumas propriedades como cor do texto, cor do fundo, padding e margem.
4. Aplique em algum pargrafo a nova classe.
5. Salve o arquivo e visualize no navegador.
Aula 10 - Abreviaes Comuns do CSS

Abreviaes
Um dos recursos mais importantes da linguagem CSS a possibilidade do uso de abreviaes. Dessa maneira o cdigo fica menor e mais limpo e isso significa um
menor tempo de carregamento da pgina, influenciando na experincia de navegao. No so todas as propriedades que podem ser abreviadas, porm
importante utilizar esse recurso sempre que houver essa opo. Veja agora as formas mais comuns de abreviao.
Abreviao de Font
A propriedade de Font uma das mais utilizadas do CSS. Como j visto anteriormente, essa propriedade controla a aparncia da fonte utilizada no texto. possvel
modificar o tamanho, a famlia e o estilo do texto.
Geralmente esse estilo apresentado da seguinte maneira (no exemplo redefinindo a tag <p>):
p{
font-family: Verdana; /* Famlia da fonte */
font-size:10pt; /* Tamanho da fonte */
font-weight: bold; /* Peso da fonte */
font-style: italic; /* Estilo da fonte */
line-height:16pt; /* Tamanho da entrelinha */
}
Na sua verso abreviada, ele pode ser declarado assim:
p{
font:italic bold 10pt/16pt Verdana;
/* font:estilo peso tamanho/entrelinha famlia */
}
Ao utilizar abreviaes, as propriedades so separadas por um espao. Por isso muita ateno no caso de declarar uma fonte com o nome longo (como Comic Sans
M S). Nesse caso preciso utilizar aspas ("Comic Sans M S").
Abreviao de Margin e Padding
As margens de um elemento devem sempre ser declaradas atravs do CSS, do contrrio sempre ficaria a pergunta "Quanto a margem superior de um pargrafo
padro?" ou "Quanto a margem interna padro de uma lista?".
Geralmente esse estilo apresentado da seguinte maneira (no exemplo redefinindo a tag <p>):
p{
margin-top:10px; /* M argem superior */
margin-bottom:0px; /* M argem inferior */
margin-left:10px; /* M argem esquerda */
margin-right:20px; /* M argem direita */
}
Na sua verso abreviada o cdigo poderia ser montado da seguinte maneira (muita ateno ordem utilizada):
p{
margin:10px 20px 0 10px;
/* margin:topo direita baixo esquerda */
}
Perceba que as margem so declaradas, em sentido horrio, comeando do alto. Perceba tambm que se o valor 0, no necessrio utilizar a unidade de
medida (zero de qualquer unidade sempre zero!).
A declarao de margem pode ser abreviada de outra maneira:
p{
margin:0 10px;
/* margin: 0 (topo e baixo) e 10px (esquerda e direita) */
}
A mesma regra utilizada para a propriedade margin pode ser utilizada para a propriedade padding:
p{
padding:10px 20px 0 10px;
/* padding:topo direita baixo esquerda */
}
Abreviao de Background
Atualmente a propriedade de Background (fundo) uma das mais utilizadas no CSS. Isso ocorre, principalmente, porque essa propriedade controla diretamente a
aparncia do layout montado com CSS (esse tpico ser explorado numa prxima unidade).
Tradicionalmente o fundo declarado da seguinte maneira (no exemplo redefinindo a tag <body>):
body {
background-attachment: fixed; /* Fixar a imagem do fundo */
background-color: #CC9900; /* Cor do fundo */
background-image: url(/imagens/fundo.png); /* Imagem do fundo */
background-repeat: no-repeat; /* Repetio da imagem */
background-position: right bottom; /* Posio da imagem */
}
Perceba que essa uma declarao muito grande, dividida em vrias etapas. A sua abreviao pode ser feita da seguinte maneira:
body {
background: #C90 url(/imagens/fundo.png) no-repeat fixed right bottom;
*/ background: cor imagem repetio fixa posio */
}
Note que, alm de abreviar as propriedades, o cdigo hexadecimal da cor tambm foi abreviado. Nesse caso, #CC9900 o mesmo que #C90. Isso pode ser utilizado
por qualquer propriedade que controle a cor onde o valor seja em pares.
Abreviao de Border
Alm das propriedades vistas anteriormente, a Borda de um elemento tambm pode ter o seu valor abreviado, economizando alguns caracteres no seu cdigo.
Geralmente a borda de um elemento declarada da seguinte maneira (no exemplo redefinindo a tag <a>):
a{
border-top-width: 2px; /* Largura da borda superior */
border-right-width: 2px; /* Largura da borda direita */
border-bottom-width: 2px; /* Largura da borda inferior */
border-left-width: 2px; /* Largura da borda esquerda */
border-top-style: solid; /* Estilo da borda superior */

border-right-style: solid; /* Estilo da borda direita */
border-bottom-style: solid; /* Estilo da borda inferior */
border-left-style: solid; /* Estilo da borda esquerda */
border-top-color: #669; /* Cor da borda superior */
border-right-color: #669; /* Cor da borda direita */
border-bottom-color: #669; /* Cor da borda inferior */
border-left-color: #669; /* Cor da borda esquerda */
}
Esse cdigo muito grande quando declarado na maneira tradicional. Porm bem simples quando abreviado:
a{
border: 2px solid #669;
*/ border: largura estilo cor */
}
Se houver a necessidade de declarar a borda de apenas um lado do elemento, utilize (no exemplo a borda inferior):
a{
border-bottom: 2px solid #669;
*/ border-bottom: largura estilo cor */
}
Lembre-se sempre que um cdigo menor carregado mais rapidamente pelo seu navegador, alm de facilitar a sua manuteno.
Aula 11 - Tags, Classes e Seletores Especiais em CSS

Principais usos de Tags, Classes e Seletores Especiais em CSS
Um recurso muito til do CSS a utilizao de Classes personalizadas, como visto anteriormente nesse material. Essas classes devem ser utilizadas apenas quando
no for possvel "atingir" diretamente um elemento do HTM L. Ou seja, se possvel alterar diretamente a tag, altere a tag. Se no possvel, utilize uma classe.
Sero demonstradas algumas tcnicas para a utilizao de Classes personalizadas, assim como algumas tcnicas para evitar o uso desnecessrio desse recurso.
Uso Repetido da Mesma Classe
Um "defeito" muito comum no cdigo o uso repetido de classes, quando possvel utilizar a redefinio de uma tag.
Veja esse exemplo de cdigo, muito comum:
CSS .titulo {
color:#CC0;
}
.subtitulo {
color:#660;
}
.corpodotexto {
font:10pt Verdana;
}
HTML <h1 class="titulo">M eu cdigo errado</h1>
<h2 class="subtitulo">Vejam o texto</h2>
<p class="corpodotexto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra gravida vulputate. Vestibulum ut iaculis sapien. Sed vel varius
erat. Nulla ullamcorper, risus sit amet condimentum pretium, risus orci iaculis lectus, ac malesuada neque augue ac arcu.</p>
<p class="corpodotexto">Duis sollicitudin tellus at elit ultricies gravida. Nam gravida sagittis tortor, vel eleifend nisl scelerisque quis. Ut suscipit ultricies mauris a
rhoncus. Integer a odio ut magna volutpat sagittis vitae eget velit.</p>
<p class="corpodotexto">Sed ullamcorper justo ac orci suscipit pulvinar. Integer orci tortor, bibendum eget vulputate ut, pretium quis urna. Duis varius nibh eget
mauris vestibulum vehicula. Cras dictum auctor elit nec ultricies.</p>
Perceba que foram utilizadas vrias classes para redefinir elementos comuns do HTM L.
Uma maneira mais "compacta" de criar esse cdigo seria:
CSS h1 {
color:#CC0;
}
h2 {
color:#660;
}
p{
font:10pt Verdana;
}
HTML <h1>M eu cdigo errado</h1>
<h2>Vejam o texto</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra gravida vulputate. Vestibulum ut iaculis sapien. Sed vel varius erat. Nulla ullamcorper,
risus sit amet condimentum pretium, risus orci iaculis lectus, ac malesuada neque augue ac arcu.</p>
<p>Duis sollicitudin tellus at elit ultricies gravida. Nam gravida sagittis tortor, vel eleifend nisl scelerisque quis. Ut suscipit ultricies mauris a rhoncus. Integer a
odio ut magna volutpat sagittis vitae eget velit.</p>
<p>Sed ullamcorper justo ac orci suscipit pulvinar. Integer orci tortor, bibendum eget vulputate ut, pretium quis urna. Duis varius nibh eget mauris vestibulum
vehicula. Cras dictum auctor elit nec ultricies.</p>
Perceba que no foi preciso criar nenhuma classe nesse caso, apenas utilizar os elementos j existentes do HTM L.
Elementos Filhos
No so todas as situaes que permitem uma modificao de todas as tags de um documento HTM L. M uitas vezes alguns pargrafos so de um jeito, outros
pargrafos de outro. Ou o negrito do pargrafo diferente do negrito do subttulo. Nesses casos comum utilizar elementos filhos, como no exemplo:
CSS p{
color: #000;
}
.destaque p {
color:#690;
}
HTML <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra gravida vulputate. Vestibulum ut iaculis sapien. Sed vel varius erat. Nulla ullamcorper,
risus sit amet condimentum pretium, risus orci iaculis lectus, ac malesuada neque augue ac arcu.</p>
<div class="destaque">
<p>Duis sollicitudin tellus at elit ultricies gravida. Nam gravida sagittis tortor, vel eleifend nisl scelerisque quis. Ut suscipit ultricies mauris a rhoncus. Integer a
odio ut magna volutpat sagittis vitae eget velit.</p>
<p>Sed ullamcorper justo ac orci suscipit pulvinar. Integer orci tortor, bibendum eget vulputate ut, pretium quis urna. Duis varius nibh eget mauris vestibulum
vehicula. Cras dictum auctor elit nec ultricies.</p>
</div>
Dessa maneira dito que "todos os pargrafos so pretos" e que "os pargrafos filhos da div de classe destaque so verdes". Isso possibilita um controle muito
grande e economia de cdigo.
No caso dos negritos citados no exemplo, poderiam ser algo assim:
CSS h2 {
color:#690;
}
strong {
color:#690;
}
h2 strong {
color: #000;
}
HTML <h2>M eu texto merece um <strong>destaque</strong></h2>
<p>M as esse destaque para ser <strong>destacado!</strong></p>
Nesse caso, foi dito que "todo h2 verde" e que "todo strong verde". Porm, quando encontramos um <strong> dentro de um <h2> ele perde o destaque. Por
isso, foi dito que "todo strong, filho de um h2, preto".
Declarao de Mltiplas Tags e Classes
Imagine o cenrio onde alguns dos seus ttulos (de h1 at h3) so declarados numa famlia de fonte e cor enquanto o seu pargrafo declarado em outra famlia.
Ou, onde algumas classes compartilham as mesmas propriedades, como as margens, cores ou bordas.
comum encontrarmos as seguintes declaraes:
CSS h1 {
font-family: Georgia;
color: #069;
}
h2 {
color: #069;
}
h3 {
color: #069;
}
p{
font-family: Verdana;
color: #333;
}
Dessa maneira o h1, h2 e h3 so declarados em fonte Georgia, cor azul e o pargrafo em fonte Verdana, cor cinza.
Essa declarao pode ser feita de maneira "abreviada":
CSS h1,h2,h3 {
color: #069;
}
p{
font-family: Verdana;
color: #333;
}
Assim dito que "h1,h2 e h3 so Georgia, cor azul" e "p Verdana, cor cinza".
Isso refora uma regra do CSS: declare primeiro as regras e depois as excees.
Derivada dessa dica de mltiplas declaraes lembre-se de que possvel declarar:
CSS *{
}
Onde o asterisco (*) utilizado para redefinir todas as tags do HTM L.
Seletores de Atributos Especficos
Uma forma de utilizar ainda menos classes personalizadas o uso de seletores de atributos especficos. Imagine, por exemplo, que todos os links apontados para
fora do seu site devem ser de uma cor, enquanto links para dentro do seu site devem ser de outra cor. comum encontrarmos o seguinte cdigo:
CSS a{
color:#069;
}
.externo {
color:#900;
}
HTML <a href="http://www.google.com" target="_blank" class="externo">Google</a>
<a href="http://www.twitter.com" target="_blank" class="externo">Twitter</a>
<a href="produtos.html">Produtos</a>
<a href="index.html">Pgina Inicial</a>
Perceba que existe, alm da classe, uma propriedade em comum nos links externos. Todos utilizam o atributo target="_blank". Atravs do CSS possvel localizar
esse atributo e aplicar uma formatao. Veja o exemplo:
CSS a{
color:#069;
}
a[target=_blank] {
color:#900;
}
HTML <a href="http://www.google.com" target="_blank">Google</a>
<a href="http://www.twitter.com" target="_blank">Twitter</a>

<a href="produtos.html">Produtos</a>
<a href="index.html">Pgina Inicial</a>
Dessa vez o html no precisa da declarao de classe pois dito que "todo link azul" e "todo link, cujo atributo target _blank, vermelho". Nesse exemplo
foi mostrado um pequeno trecho de HTM L, mas imagine a diferena de cdigo em um portal, onde existem milhares de links apontados para fora do seu site.
Utilizando seletores de atributos podemos criar formataes muito mais poderosas, porm existe um pequeno empecilho no seu uso: esses seletores no so
reconhecidos pelo Internet Explorer 6 e verses anteriores.
Aula 12 - Imagem
Formatos de Arquivos de Imagem
Existem diversos formatos de arquivos de imagem, mas os trs normalmente utilizados em pginas web so - GIF, JPEG e PNG. Os formatos aceitos pela maioria dos
navegadores so o GIF e o JPG.
O PNG a melhor opo para a maioria das imagens para a web devido sua flexibilidade e tamanho reduzido de arquivo, porm a sua exibio apenas
parcialmente suportada no Internet Explorer e Netscape Navigator.
No Adobe Dreamweaver CS6 possvel inserir uma imagem de trs maneiras:
pelo menu Inserir / Imagem,
pela Barra de Insero na opo Comum ou,
pelo Painel Arquivos.
Para configurar as propriedades de uma imagem j inserida no documento,basta selecion-la e o Inspetor de Propriedade apresenta inmeras opes.
Inserindo uma Imagem
Menu Inserir Imagem

clique no menu Inserir imagem;
aberta a janela Selecionar origem da imagem para selecionar uma imagem desejada, selecione a imagem e clique OK.
Selecionar origem da imagem

Selecionar nome do arquivo em: permite selecionar imagens locais o fontes de dados.
URL: mostra o caminho da imagem.
Relativo a: configura o tipo de endereamento da imagem. Raiz do site (URL em relao raiz do site) e Documento (URL em relao ao documento). Prefira
sempre o modo Documento, pois seu funcionamento se d tanto localmente quanto hospedado.
Para inserir uma imagem possvel indicar qualquer pasta, mesmo que seja fora da pasta raiz do site. Porm, quando isso ocorre exibida uma mensagem para que
seja salva uma cpia da imagem para pasta raiz do site. Para salvar a imagem clique no boto Sim e indique a pasta onde ser salva esta imagem. Caso no queira
clique no boto No.
O Dreamweaver CS6 apresenta uma tela para a configurao de atributos da acessibilidade da imagem. Essa tela configura como a imagem exibida em leitores de
tela utilizados por deficientes visuais.
Painel Arquivos (Files)
importante que o painel Arquivos (Files) esteja aberto. Para isso:

clique no menu Janela / Arquivos;
aps isso abra uma pasta onde conste uma imagem;
clique e arraste a imagem para o documento.
Aps inserir uma imagem visualize-a no modo cdigo pelo menu Exibir / Cdigo. Observe que na tag <img> </img> o caminho para imagem est absoluto, pois o
arquivo html ainda no foi salvo. Depois de salvo este caminho passa a ser relativo. Isso ocorre porque ao salvar o arquivo html, o Adobe Dreamweaver CS6 analisa a
partir da pasta raiz do site onde est o arquivo html e onde est a imagem. Por isso, importante sempre criar uma estrutura de pasta para um site local.
possvel modificar diversas propriedades das imagens atravs do Inspetor de Propriedades:
selecione uma imagem no seu documento;
as propriedades da imagem so exibidas no Inspetor de Propriedades.
Inspetor de Propriedades - Imagem

ID: permite nomear uma imagem, o que possibilita fazer referncia a ela com uma linguagem de criao de scripts, como Javascript ou VBScript;
L eA: largura e altura da imagem. possvel alterar o tamanho da imagem. Importante notar que mesmo ao diminuir o tamanho da imagem, ela no reduzir
o tamanho de download, pois a imagem ser carregada primeiro e depois dimensionada;
Procurar Arquivo: mostra o caminho do arquivo. Clicando sobre a pasta possvel procurar o arquivo correspondente;
Link: mostra o link da imagem. Este link pode ser para uma pgina, um arquivo, um e-mail, etc.;
Alt: especifica um texto alternativo que aparece no lugar da imagem quando ela no carregada pelo navegador e quando o usurio passa o cursor sobre
ela. Atualmente este recurso auxilia deficientes visuais, pois esse atributo pode ser lido em navegadores com sintetizador de voz;
Editar: essa opo possui sete funes;
Editar: abre a imagem selecionada em um editor de imagem especfico. Quando essa imagem for alterada e salva no editor de imagem, ao retornar ao
Adobe Dreamweaver CS6, ela ser atualizada. possvel configurar o programa executvel de acordo com a extenso da imagem. Clique no menu Editar /
Preferncias e marque a opo Tipos de Arquivos / Editores;
Escolha uma extenso na opo Extenses. Clique no boto + na opo Editores eselecione um programa executvel para associar a extenso;
Otimizar: abrir a janela de otimizao de imagem;
Cortar: permite cortar um pedao da imagem;
Atualizar do original: salva as alteraes feitas na imagem. S ativo quando a imagem sofre modificaes na L (largura) e A (altura);
Brilho e Contraste: permite alterar o brilho e o contraste da imagem;
Sharpen: permite alterar a nitidez da imagem;
Classes: configura uma folha de estilo para uma imagem;
Mapa: configura mapas de imagens para a construo de links. Esse assunto ser tratado na aula sobre links;
Destino: especifica o frame ou janela onde o link dever ser carregado. Esse assunto ser tratado na aula sobre links.
Imagem de Fundo
As imagens tambm so utilizadas como fundo da pgina. No Dreamweaver CS6 essa formatao feita atravs da linguagem CSS e na tag Body;
clique no menu Modificar / Propriedades da pgina;
selecione o item Aparncia e na opo Imagem do fundo clique no boto Procurar para indicar uma imagem;
configure a repetio da imagem de fundo na opo Repetir.
1. Abra a estrutura de site local Curso Dreamweaver CS6 e crie uma pasta chamada aula_03. Clique no menu Arquivo / Novo, nesta pgina adicione algumas imagens
e Editar suas propriedades pelo Inspetor de Propriedade.
2. Insira um texto de 5 pargrafos e posicione as imagens, alinhando para a esquerda e direita.
3. Insira a imagem de fundo fundo1.jpg, com repetio X. M odifique tambm a cor da pgina para #96CAFC.
4. Salve com o nome de imagens.html e visualize no navegador.
Aula 14 - Tabelas
O Uso de Tabelas
Atualmente o uso de tabelas uma das ferramentas mais utilizadas para a criao de pginas que necessitam de uma organizao visual estruturada em linhas e
colunas. As tabelas trabalham organizando e distribuindo textos, imagens e outros elementos.
A funo criada originalmente para uma tabela guardar dados tabulares, como um calendrio ou uma lista de produtos/preos.
No Adobe Dreamweaver CS6 possvel inserir uma tabela de duas maneiras: pelo menu Inserir / Tabela epela Barra de Insero na opo Inserir / Comum /
Tabela.
Para configurar as propriedades de uma clula ou de uma tabela j inserida no documento,basta selecion-la e o Inspetor de Propriedade apresenta inmeras
opes.
Inserindo uma Tabela
Menu Inserir
Menu Inserir - Tabela

clique no menu Inserir / Tabela;
aberta a janela Tabela para configurar algumas propriedades da tabela:
Tabela
Linhas: determina o nmero de linhas da tabela;
Colunas: determina o nmero de colunas da tabela;
Largura da Tabela: determina a largura da tabela. A largura pode ser em pixel ou porcentagem. Em pixel o tamanho fixo, porm em porcentagem o
tamanho varia conforme a resoluo de vdeo e largura do navegador do usurio;
Espessura da borda: determina a largura da borda da tabela. Para no apresentar bordas preencha o campo com 0 (zero);
Preenchimento da clula: define a distncia entre o contedo da clula e a borda. O preenchimento padro 1 pixel, porm caso queira tirar o
preenchimento digite 0 (zero);
Espaamento da clula: define em pixels a distncia entre uma clula e outra. O padro 2, porm caso no queira espaar digite 0 (zero);
Cabealho: determina o uso ou no de um cabealho e qual ser sua posio. A linha ou coluna do cabealho ter a fonte em negrito, podendo ser
alterado ou at mesmo retirado pelo Inspetor de Propriedade;
Legenda: determina um ttulo para a tabela, que ser exibido na pgina;
Resumo: descreve as informaes presentes na tabela. Essas informaes no sero exibidas na pgina.
Barra Inserir/ Comum
Barra de Insero - Tabela

Escolha na Barra de Insero a opo Comum e clique no boto Tabela.
Selecionando uma Tabela ou uma Clula
Atravs da seleo voc pode obter dois tipos de configuraes no Inspetor de Propriedades. A da tabela ou da clula (linha e coluna).
Seleo de Tabela
Para selecionar a tabela, posicione o cursor em um dos quatro lados da tabela, em cima da borda. Clique e toda a tabela ser selecionada.
Tambm possvel selecionar a tabela atravs da barra de status, clicando diretamente sobre a tag Table. Essa opo muito til com tabelas aninhadas.
Seleo de Tabela
Seleo de Clulas
Para selecionar uma linha, posicione o cursor na frente da linha. Quando o cursor se transformar em uma seta preta, clique e toda a linha ser selecionada.
Seleo de Clula - Linha

Para selecionar uma coluna, posicione o cursor sobre a coluna. Quando o cursor se transformar em uma seta preta, clique e toda a coluna ser selecionada.
Seleo de Clula - Linha

Propriedades da Tabela
Algumas propriedades da tabela podem ser ajustadas atravs do inspetor de propriedades:

Selecione uma tabela na rea de Trabalho.
As propriedades da tabela so exibidas no Inspetor de Propriedade.
Inspetor de Propriedade - Tabela

Tabela ID: configura uma identificao para a tabela. Utilizado na aplicao de estilos CSS e em linguagens de script;
Linhas: exibe e configura o nmero de linhas da tabela;
Colunas: exibe e configura o nmero de colunas da tabela;
L: configura a largura da tabela;
PreenchClula: define a distncia entre o contedo da clula e a borda. O preenchimento padro 1 pixel, porm caso queira tirar o preenchimento
digite 0 (zero);
EspaoClula: define em pixels a distncia entre uma clula e outra. O padro 2, porm caso no queira espaar digite 0 (zero);
Alinhar: configura o alinhamento da tabela em relao ao documento;
Borda: configura a largura da borda da tabela;
Classe: configura um estilo css (classe personalizada) para a tabela;
Limpar larguras das colunas: limpa a largura da coluna;
Limpar alturas das linhas: limpa a altura da linha;
Converter tabela em Pixels: converte a largura da tabela em pixel;
Converter larguras das tabelas em porcentagem: converte a largura da tabela em porcentagem;
Propriedades da Clula
Algumas propriedades da clula podem ser ajustadas atravs do inspetor de propriedades:
selecione uma clula, podendo ser tambm uma linha ou coluna;
assunto: propriedades da clula so exibidas no Inspetor de Propriedade.
Com uma seleo de clula, linha ou coluna voc capaz de configurar um texto que esteja dentro da tabela (parte de cima do inspetor de propriedades) assim
como a clula em si.
Inspetor de Propriedade - Clula

Mesclar clulas: mescla duas ou mais clulas selecionadas. Para ativar este boto necessrio que esteja duas ou mais clulas selecionadas;
Dividir clulas: divide uma clula em mais clulas. Esta diviso pode ser em mais linha ou em mais colunas. Para ativar este boto necessrio que esteja
selecionada apenas uma clula;
Horiz: configura o alinhamento horizontal do contedo da tabela;
Vert: configura o alinhamento vertical do contedo da tabela;
L: configura a largura de uma clula ou coluna. muito importante que o valor da largura da tabela seja igual soma das larguras das colunas;
A: configura a altura de uma clula ou linha. muito importante que o valor da altura da tabela seja igual soma das alturas das linhas;
Sem quebra: essaopo marcada determina que no ocorra a quebra automtica de linha;
Cabealho: essa opo marcada determina que a clula seja um ttulo de tabela;
Fundo: configura uma cor de fundo para a clula.
Editando uma Tabela
Adicionando Linhas
muito comum, aps a criao de uma tabela, inserir mais linhas.
selecione uma clula ou linha;
escolha o menu Modificar / Tabela / Inserir Linha (Ctrl+M). Ser adicionada uma linha acima da clula selecionada;
ou, escolha o menu Modificar / Tabela / Inserir Linhas ou Colunas . aberta uma janela para especificar a quantidade de linha e onde ser adicionada
essa linha (Antes ou Depois). Clique no boto OK aps preencher as configuraes;
ou, no menu de contexto (boto direito) escolha Tabela / Inserir Linha, ou Tabela / Inserir Linhas ou Colunas.
Inserir Linhas ou colunas

Adicionando Colunas
Aps a criao de uma tabela, possvel inserir novas colunas:
selecione uma clula ou coluna;
escolha o menu Modificar / Tabela / Inserir Colunas. Ser adicionada uma coluna a esquerda da clula selecionada;
ou escolha o menu Modificar / Tabela / Inserir Linhas ou Colunas . ( aberta uma janela para especificar a quantidade de coluna e onde ser adicionada
essa coluna Antes ou Depois). Clique no boto OK aps preencher as configuraes.
ou no menu de contexto (boto direito) escolha Tabela / Inserir Colunas, ou Modificar / Tabela / Inserir Linhas ou Colunas.
Excluindo Linhas
selecione a clula ou a linha a ser excluda;
clique no menu Modificar / Tabela / Delete linha;
ou no menu de contexto (boto direito) selecione Tabela / Delete linha.
Excluindo Colunas
selecione a clula ou coluna a ser excluda;
clique no menu Modificar / Tabela / Delete Coluna;
ou no menu de contexto (boto direito) selecione Tabela / Delete Coluna.
Dividindo Clulas
Selecionando uma clula possvel dividi-la. Esta diviso poder ser em mais linha ou em mais colunas.
selecione a clula a ser dividida;
escolha o menu Modificar / Tabela / Dividir Clulas. aberta uma janela para especificar o tipo da diviso (Linhas ou Colunas) e sua quantidade. Clique
no boto OK aps preencher as configuraes;
ou no menu de contexto (boto direito) selecione Modificar / Tabela / Dividir Clulas.
Dividir Clulas
Mesclando Clulas
Selecionando duas ou mais clulas possvel mescl-las:
selecione as clulas que sero mescladas;
escolha o menu Modificar / Tabela / Mesclar Clulas;
no menu de contexto (boto direito) escolha Tabela / Mesclar Clulas.
Aninhando Tabelas
Tabela aninhada uma tabela inserida dentro de outra e pode ser configurada da mesma maneira. Entretanto, a largura da tabela interna est limitada pela
largura da clula que pertence.
posicione o cursor na clula onde deseja inserir uma tabela;
clique em Inserir / Tabela;
ou escolha na Barra de Insero a opo Comum e clique no boto Tabela;
especifique as propriedades da tabela e clique em OK.
Importando Dados de Tabela
O Adobe Dreamweaver CS6 permite importar dados de outros aplicativos como Excel, ou gravados em formato delimitado. O formato delimitado aquele que j
est separado por tabulaes, vrgulas, dois pontos, ponto e vrgula ou outro delimitador.
Importando Dados
clique no menu Arquivo / Importar / Dados tabulares;
ou clique em Importar/ Dados tabulares / Importar Dados tabulares
Importar Dados Tabulares

aberta a janela, Importar dados tabulares,para selecionar e configurar um arquivo com dados de tabela.
Arquivos de Dados: indica o nome do arquivo a ser importado. Para isso clique no boto Procurar e selecione o arquivo;
Delimitador: indica o delimitador que corresponda ao formato do documento a ser importado. Se for selecionada a opo Outros aparecer um campo
direita da lista. Digite o delimitador utilizado para separar os dados da tabela. A importao correta depende da indicao do delimitador certo;
Largura da tabela: determina a largura da tabela;
Ajustar aos dados: cria uma tabela que se ajusta sequncia de caracteres mais longa em cada coluna;
Definir para: especifica a largura da tabela como uma porcentagem da janela do navegador ou com um nmero de pixels;
Preenchimento da clula: determina o nmero de pixels entre o contedo da clula e a borda;
Espaamento da clula: determina o nmero entre cada clula da tabela;
Formatar linha superior: possui 4 opes de formatao: sem formatao, negrito, itlico ou negrito itlico;
Borda: determina a largura em pixels da borda da tabela.
Tambm possvel copiar uma tabela diretamente do Excel, utilizando os comandos Copiar e Colar.
1. Abra a estrutura de site local Curso Dreamweaver CS6 e crie uma pasta chamada aula_04. Clique no menu Arquivo / Novo, nesta pgina voc adicionar algumas
tabelas e editar suas propriedades pelo Inspetor de Propriedade.
2. M odifique as propriedades da pgina, alterando a fonte para Verdana e o tamanho para 10 pontos.
3. Insira as tabelas como o exemplo a seguir:
Tabela 1 - 400 pixels de largura
Tabela 2 - 550 pixels de largura

4. Salve com o nome de tabelas1.html e visualize no navegador.
Aula 16 - Link
Tipos de Link
O Adobe Dreamweaver CS6 oferece diversas formas de estabelecer um link com qualquer texto ou imagem em qualquer parte do documento, inclusive lista e
tabela.
possvel criar os seguintes tipos de link:
Internos - para documentos de um mesmo site.
Externos - para documentos de outro site.
Downloads - para documentos com extenses no reconhecidas pelo navegador.
Correioeletrnico - para enviar mensagens atravs dos softwares de e-mail.
ncoras - para sees especficas de uma pgina.
possvel criar um link com um simples clique. Esse recurso est presente no Inspetor de Propriedade, no menu Inserir e na Barra de Insero na opo Comum.
Para configurar um link, basta selecionar um texto ou uma imagem, em seguida, indicar o caminho do arquivo ou seo.
Quando um arquivo movido ou renomeado dentro do Dreamweaver, seu link corrigido automaticamente.
Texto
Inspetor de Propriedade - Link (Texto)

Link: indica o caminho do arquivo;
Apontar para arquivo: estando com o painel Arquivos aberto, clique e arraste este cone at o arquivo desejado que esteja dentro do painel;
Procurar Arquivo: aberta a janela Selecionar Arquivos para selecionar um arquivo desejado. Selecione o arquivo e clique OK;
Para inserir um link possvel indicar qualquer pasta, mesmo que seja fora da pasta raiz do site. Porm, quando isso ocorre exibida uma mensagem para que seja
salvo uma cpia do arquivo para pasta raiz do site.
Para salvar o arquivo clique no boto Sim e indique a pasta onde ser salvo. Caso no queira clique no boto No;
Destino: especifica o frame ou janela onde o link dever ser carregado:
_blank: abre o link em uma nova janela;
_parent: abre o link na pgina pai (apenas em frames);
_self: abre o link na mesma janela;
_top: abre o link no nvel superior do conjunto de frames.
Imagem
Inspetor de Propriedade - Link (Imagem)

A configurao de link em uma imagem semelhante a do texto. A indicao do caminho na opo Link como ser aberto na janela na opo Destino. Alm
disso, numa imagem pode-se inserir mais de um link. Esse recurso feito atravs do Mapa. Ele possui vrias formas: Retangular, Oval, Polgono.
Para utiliz-lo basta selecionar uma imagem e escolher qual forma ir trabalhar. A partir disso desenhe a forma em cima da imagem selecionada. Depois disso o
Inspetor Propriedade mostrar as propriedades do Mapa.
No Mapa as opes Link e Destino devem ser preenchidas semelhantes a um link comum. A opo <Alt> cria a possibilidade de que cada link da imagem tenha seu
rtulo prprio.
A seta preta serve para selecionar individualmente cada Mapa criado na imagem, podendo assim ver e rever as configuraes dos mesmos.
Caso a borda da imagem no estiver em 0 (zero), ao indicar um link surgir uma borda de cor azul. Para que isso no ocorra digite 0 zero na opo Borda.
Atividades
1. Abra a estrutura de site local Curso Dreamweaver CS6 e crie uma pasta chamada aula_5. Clique no menu Arquivo / Novo, nesta pgina voc adicionar alguns
textos e uma imagem como link utilizando o Inspetor de Propriedade.
2. Crie 1 arquivos com a extenso .zip na pasta aula_5.
3. Insira uma tabela e links, conforme a imagem a seguir:
4. Configure a aparncia dos links, alterando as cores e propriedades do sublinhado.

5. Salve esse arquivo com o nome de link.html na pasta html da aula_5.
Unidade III - Complementando Site

Aula 17- Layout
O Sucesso de um Web Site
Tabelas
Barra de Insero Layout
Inserindo as Tabelas de Layout
Aula 19 - Modelo
M odelos
Salvando um M odelo
Propriedades do M odelo
Criando Documentos
Outros Recursos
Editando e Atualizando um M odelo
Aula 21 - Web Standard/Tableless
Padro Tableless
Criando as Divs
Box M odel
Atividades
Aula 22 - Box Model/Acabamento
Introduo
Imagens de Fundo
Atividades
Aula 23 - AP Div/Layer
Layers
Inserindo uma Layer
Propriedades da Layer
Painel Elementos AP
Atividade
Aula 24 - Formulrio
Conceitos Bsicos
A Tag <form> e seus Principais Atributos
Barra de Insero
M enu Inserir
Processamento do Formulrio
Atividades
Aula 25 - Comportamentos
Introduo
Painel Comportamentos
Inserindo Comportamentos
Atividades
Aula 26 - Mdias/Flash
Inserindo Flash
Flash Vdeo (FLV)
Atividades
Aula 17 - Layout
O Sucesso de um Web Site
Uma boa diagramao do contedo juntamente com a interface do web site uma das principais razes para o sucesso de um projeto de web.
Alm de preocupao com a aparncia e organizao, o layout precisa ser compatvel com diversos navegadores e resolues de monitor.
O layout pode ser montado de maneira fixa (pixels) ou elstica (relativo). Normalmente a melhor soluo um design hbrido, com a largura fixa e altura varivel.
No Dreamweaver CS6 o layout pode ser montado utilizando tabelas ou utilizando divs e css.
Tabelas
A maneira mais "tradicional" de criao de layouts utilizando tabelas. Essa a forma mais fcil, porm no compatvel com o web standard (conjunto de regras
utilizadas na criao de web sites).
Esse recurso est presente na Menu Inserir na opo Layout. E suas configuraes esto presentes no Inspetor de Propriedades.
Barra Inserir Layout
Barra de Insero - Layout

Padro: esse modo de visualizao possibilita a manipulao de tabela. Esse recurso j foi abordado e para maiores detalhes consulte as aulas anteriores;
Expandida: esse modo de visualizao tambm possibilita a manipulao de tabela, porm a visualizao da tabela expandida para facilitarseu manuseio.
Quando for acionado pela primeira vez, abrir uma janela apenas indicando a troca de visualizao;
Inserir Tag Div de layout de grade fluida: possibilita a insero da tag <div>. Ao clicar nesse boto aberta uma janela para especificar a Class, ID e local
de insero da tag. Esse recurso bastante utilizado em web standard e ser tratado posteriormente;
Desenhar Div AP: possibilita a insero de uma layer na pgina. Esse recurso ser abordado na aula sobre Camadas;
Menu sanfonado do Spry: um framework que permite o uso de bibliotecas de JavaScript onde possvel incorporar contedo XM L em documentos
HTM L de maneira simples e dinmica;
Tabela: possibilita a insero de uma tabela. Esse recurso j foi abordado e para maiores detalhes consulte a aula sobre Tabelas.
Inserindo as Tabelas de Layout
Para a criao de um layout tradicional (topo, contedo e rodap) so necessrias trs tabelas. Separar cada parte do layout permite um tempo de carregamento
mais rpido e maior liberdade de diagramao.
Topo
inserir uma nova tabela atravs da barra de insero Layout/Tabela (ou das outras maneiras vistas anteriormente);
configurar conforme a figura a seguir (2 linhas, 1 coluna e 770 pixels).
Atravs do inspetor de propriedades, alterar as cores e altura das clulas:

a clula de cima com a cor #669900 e altura 80 pixels;
a clula de baixo com a cor #333333 e altura 30 pixels.
A tabela do topo
Meio
configurar conforme a figura a seguir (1 linha, 3 colunas e 770 pixels).
Atravs do inspetor de propriedades, alterar as cores, larguras e alinhamentos das clulas:

a clula da esquerda com a cor #CCCCCC , largura (width) 130 pixels e alinhamento vertical top;
a clula do meio com a cor #FFFFFF e alinhamento vertical top;
a clula da esquerda com a cor #CCCCCC, largura (width) 130 pixels e alinhamento vertical top.
A altura dessa tabela ser baseada na quantidade de contedo e por isso no a declaramos.
A tabela do topo e a tabela do meio

Baixo
configurar conforme a figura a seguir (1 linha, 1 coluna e 770 pixels).
Janela Tabela
Atravs do inspetor de propriedades, alterar as cores e altura da clula.
cor #333333 e altura 40 pixels.
As tabelas de layout
1. Abra a estrutura de site local Dreamweaver CS6 e salve o arquivo montado anteriormente com o nome de layout1.html. Salve o arquivo na raiz do site local.
2. M odifique o ttulo da pgina para "Escola de Design Web Premium".
3. Insira a imagem topo1.jpg na clula superior da primeira tabela.
4. Insira a imagem menu1.jpg na segunda linha da primeira tabela.
5. Insira a imagem baixo1.jpg na ltima tabela.
6. Insira um texto de 5 pargrafos, 1 ttulo e 2 subttulos na segunda coluna da segunda tabela. Note como a tabela se comporta de maneira elstica, esticando
conforme o texto a ocupa.
7. Insira uma imagem do lado do primeiro pargrafo, alinhando-a a esquerda.
8. M odifique a propriedade Preenchimento da clula da segunda tabela para o valor 5 pixels.
9. M odifique a propriedade Alinhamento de todas as tabelas para Centralizado.
10. Crie estilos CSS para a formatao do texto e do fundo da pgina. Utilize cores existentes na prpria imagem do topo para a formatao dos ttulos e preto
para o fundo da pgina.
11. Salve novamente o arquivo e visualize-o no navegador.
Aula 19 - Modelos
Modelos
Um dos principais recursos para facilitar a criao de web sites com mltiplas pginas o uso de M odelos. fcil de manusear e permite criar regies bloqueadas
e regies editveis, mantendo assim a integridade da pgina original. O arquivo de modelo sempre ficar armazenado em uma subpasta Modelos na pasta raiz do site.
Atravs desse recurso muito simples e rpido criar um web site cuja interface se repete em todas as pginas. No Adobe Dreamweaver CS6 possvel transformar
uma pgina HTM L em um modelo atravs do comando Arquivo/Salvar como modelo.
Salvando um Modelo
Ser utilizado o arquivo feito anteriormente como base para a construo de um web site completo. Para isso esse arquivo ser gravado como um M odelo do
Dreamweaver.
abra o arquivo que deseja transformar em um template. Para esse exemplo o arquivo o layout1.html;
utilize o comando Arquivo/Salvar como modelo;
aberta a janela Salvar como modelo para salvar um novo modelo. Configure as opes e clique Salvar.
Salvar como modelo

Site: determina qual estrutura de site quer utilizar um modelo;
Modelos Existentes: exibi todos os modelos j criados;
Descrio: possibilita a incluso de uma descrio para o modelo;
Salvar como: determina o nome do modelo que ser criado.
Propriedades do Modelo
Regio Editvel
A regio editvel uma rea que apresenta um contedo diferente entre as pginas. A criao dessa regio fundamental para a modificao do contedo do
web site.
selecione um contedo no seu documento;
escolha o menu Inserir / Objetos de modelos / Regio Editvel;
ser aberta a janela Nova regio editvel para definir um nome para a regio editvel. Aps isso clique OK.
Nova regio editvel

A regio editvel ser identificada por um nome e com um contorno verde na rea de Trabalho. Quando um template aplicado em uma pgina ele ter esse
mesmo aspecto para identificar a regio editvel.
Modelo - Regio Editvel

possvel determinar na rea editvel um simples espao, uma tabela inteira ou apenas uma clula. Atravs da opo Regio Editvel permitido criar vrias reas
editveis em um modelo. Para apagar uma regio editvel selecione o nome e pressione a tecla Delete ou escolha o menu Modificar / Modelos / Remover markup
do modelo.
Criando Documentos
Uma vez criado o modelo, importante salvar novamente o documento. recomendvel fechar o modelo antes de criar novos documentos, evitando problemas de
atualizao.
escolha menu Arquivo / Novo;

ser aberta a janela Novo documento, selecione a opo Modelos.
Novo documento
Na opo Site, escolha a estrutura de site onde se encontra o template desejado. J na opo Modelos para o site, selecione o template que deseja
aplicar e clique no boto Criar. A opo Atualizar a pgina quando o modelo for alteradodeve estar marcado caso queira que a pgina seja atualizada quando
for modificado o modelo.
Note que ao criar uma pgina baseada num modelo, apenas a regio editvel pode ser modificada. Todo o resto fica bloqueado, evitando erros e
mudanas indesejadas.
Outros Recursos
Regio Opcional
A regio opcional uma rea que controla um contedo que pode ou no ser visualizado em uma pgina que utiliza um modelo. Para controlar essa rea
utilizada uma expresso condicional (If).
selecione uma rea ou um contedo na rea de Trabalho;
escolha o menu Inserir / Objetos de Modelos / Regio Opcional;
ser aberta a janela Nova regio editvel para definir um nome e status da regio opcional. Em seguida, clique OK.
Nova regio opcional - Bsico

Nome define um nome para a regio opcional;
Mostrar por padro: define o status de visualizao ou no da regio opcional.
Na opo Avanado possvel com um nico nome programar vrias regies opcionais.
Para determinar se uma regio opcional ser ou no visualizada em uma pgina, importante que a pgina tenha uma template aplicada.
escolha o menu Modificar / Propriedades do Modelo;
ser aberta a janela Propriedades do Modelo para configurar a exibio da regio opcional.
Janela Propriedades do modelo

A opo Nome apresenta o nome da regio opcional. J a opo Valor mostra o status da visualizao, sendo que o Verdadeiro (exibe) e Falso (oculta). Para
mudar esses valores basta marcar ou desmarcar a opo Visualizar. Nesse caso exibido OptionalRegion1.
Regio Editvel Opcional
Essa opo rene dois recursos, Regio Editvel e Regio Opcional, em apenas um clique. Com isso possvel criar uma regio opcional editvel.
selecione uma rea ou um contedo no documento;
escolha o menu Inserir / Objetos de Modelos/ Regio Editvel Opcional;
ou escolha o boto Modelos / Regio Editvel Opcional na Barra de Insero na opo Comum;
ser aberta a janela Nova regio editvel para indicar um nome para a regio opcional editvel. Depois disso clique OK.
Regio Repetitiva
A regio de repetio uma rea que repetir facilmente um contedo desejado. Esse recurso pouco utilizado em pginas.
Selecione uma rea ou um contedo no documento;
escolha o menu Inserir / Objetos de Modelos/ Regio Repetitiva;
ou escolha o boto Template / Regio Repetitiva na Barra de Insero na opo Comum;
ser aberta a janela Nova Regio Repetitiva para definir um nome para a regio de repetio. Depois disso clique OK.
O contedo inserido na regio de repetio ficar disponvel para ser repetido na pgina onde o modelo for aplicado. Na rea de Trabalho da pgina, onde o
modelo foi aplicado, ser apresentado alguns botes de acesso para auxiliar na repetio do contedo.
Tabela Repetitiva
Essa opo similar a de regio de repetio, porm possvel a insero de tabela.
escolha o menu Inserir / Objetos de Modelos/ Tabela Repetitiva;
ou escolha o boto Modelo/ Tabela Repetitiva na Barra de Insero na opo Comum.
Ser aberta a janela Inserir tabela repetitiva para definir as propriedades da tabela.
Linhas: determina o nmero de linhas da tabela;
Colunas: determina o nmero de colunas da tabela;
Preenchimento da clula: define a distncia entre o contedo da clula e a borda. O preenchimento padro 1 pixel, porm caso queira tirar o
preenchimento digite 0 (zero);
Espaamento da clula: define em pixels a distncia entre uma clula e outra. O padro 2, mas caso no queira espaar digite 0 (zero);
Largura: determina a largura da tabela. A largura pode ser em pixel ou porcentagem. Em pixel o tamanho fixo, porm em porcentagem o tamanho varia
conforme a resoluo de vdeo e largura do navegador do usurio.
Inserir Tabela Repetitiva

Borda: determina a largura da borda da tabela. Para no apresentar bordas preencha o campo com 0 (zero);
Linha inicial: determina a linha inicial que ser repetida;
Linha final: determina a linha final que ser repetida. Caso queira repetir apenas uma linha, insira o mesmo valor em Linha inicial e Linha final;
Nome da regio: determina o nome da regio de repetio de tabela.
Aps inserir a tabela possvel configur-la do modo que quiser. Podendo adicionar linhas e colunas e alterar tamanho e cores, entre outras opes j estudadas
em Tabelas.
As opes regio_01 e regio_02 da primeira linha da tabela de repetio podero ser modificadas na pgina que a modelo for aplicada. J a segunda linha no
poder sofrer modificao.
Na rea de Trabalho da pgina, onde o modelo foi aplicado, ser apresentado alguns botes de acesso para auxiliar na tabela de repetio.
Criar Modelo Aninhado
Esse recurso utilizado para criar um modelo em uma pgina que j possui modelo. Para que um modelo aninhado funcione necessrio aplicar um modelo em
uma pgina.
escolha o menu Inserir / Objetos de modelos / Criar modelo aninhado;
ou escolha o boto Modelos/ Criar modelo aninhado na Barra de Insero na opo Comum;
aberta a janela Salvar como modelo para salvar um novo modelo. Configure as opes e clique Salvar.
Editando e Atualizando um Modelo
A edio de um modelo igual a modificao de uma pgina comum.
escolha o menu Janelas / Arquivos ou Janelas / Assets;
clique duas vezes no modelo desejado e ser aberto em uma nova janela esse arquivo;
faa as alteraes necessrias e escolha o menu Arquivo / Salvar para salvar o modelo.
Para a atualizao de um modelo necessrio:
escolher o menu Modificar / Modelos / Atualizar Pginas;
aberta a janela Atualizar pginas para atualizar o modelo.
Procurar em: define o tipo de atualizao.

Atualizar: define o contedo que deseja ser atualizado.
Itens de biblioteca atualiza biblioteca. E Modelos atualiza o template.
Mostrar registro: define a exibio ou no do relatrio de log da atualizao.
1. Abra a estrutura de site local Dreamweaver CS6. Abra o arquivo layou1.htm da pasta raiz. Crie a partir dessa pgina um modelo.
2. Transforme em regio editvel o local onde o contedo ser diversificado. Insira o nome meio nessa regio.
3. Salve este arquivo. Observe que ele ser salvo automaticamente dentro da pasta Template na estrutura de site local Dreamweaver CS6
4. Crie novos arquivos baseados no modelo layout1. Para cada opo do menu dever ser criado um arquivo.
M odifique o contedo (ttulos, fotos e textos) dos novos arquivos e salve-os com os nomes:
quemsomos.html
designcenter.html
cursos.html
worshops.html
servicos.html
localizacao.html
contato.html
home.html
5. Com os arquivos gerados e salvos, abra o layout1.dwt e crie link para os botes. Utilize o recurso de mapa de imagem para isso. Em seguida salve e atualize o
modelo.
6. Visualize no navegador um dos arquivos criados e teste a sua navegao.
Aula 21 - Web Standard/Tableless

Padro Tableless
As definies de regras para o uso da linguagem HTM L determinam que as tabelas sejam utilizadas apenas para a exibio de dados tabulares. O layout utilizando
tabelas acabou sendo trocado pelo padro Tableless.
Nessa nova forma de trabalho, a diagramao toda feita atravs de CSS, utilizando para isso a tag DIV e identificadores do tipo ID.
Criando as Divs
A primeira etapa para a construo de um layout tableless a criao de diversas tags DIV. Cada uma dessas tags representa uma parte do layout (como o topo, o
menu, etc.). Essa forma de diagramao tambm conhecida como Box Model (modelo de caixas).
Para inserir uma DIV:
basta clicar na barra de insero Comum e no boto Inserir tag div;
Ser exibida a caixa de dilogo Inserir Tag Div onde existem as opes:
Inserir: posio (no cdigo HTM L) onde ser inserida a DIV, podendo ser:
No ponto de insero - a tag inserida exatamente na posio onde est;
Aps incio da tag - inserida aps uma tag especfica;
Antes do final da tag - inserida antes de uma tag especfica.
Classe: permitida a escolha de uma classe em CSS. Se a classe ainda no existe, basta colocar o nome que ser utilizado futuramente.
ID: permitida a escolha de um identificador em CSS. Se o identificador ainda no existe, basta colocar o nome que ser utilizado futuramente.
Nova regra CSS: abre a caixa de dilogo para a criao de estilos CSS.
Caixa Modelo
Um formato comum encontrado nesse tipo de layout o exibido na imagem a seguir. Para isso so utilizadas cinco DIVS, cada uma com um identificador.
Cada nome encontrado dentro de uma caixa um novo identificador do CSS. Geralmente esses identificadores so escritos dessa maneira, sem os acentos.
A ordem de criao desses identificadores tambm importante: Geral, Topo, Lado, Contedo e Rodap.
Para criar a primeira DIV e o seu identificador:
insira uma DIV num novo documento com o Inserir em No ponto de insero e ID com o nome de Geral;
clique tambm em Nova regra CSS e configure a tela de criao do novo estilo CSS.
escolha ID, o Seletor com o nome de #Geral e Definio da regra (Nova arquivo de folhas de estilos css);
ser exibida uma tela para salvar a folha de estilos. Utilize o nome tableless.css e clique em Salvar;
M odifique as propriedades:
Caixa/Width - 760 pixels;
Caixa/Margins - Top 0 pixels, Right Auto, Bottom 0 pixels e Left Auto (dessa maneira o layout ser centralizado);
clique em OK, OK novamente e veja o resultado.
A DIV criada exibida dessa maneira

A DIV Geral quem delimita o contedo das demais DIVS.
Outras DIVS
Nessa diagramao, as outras DIVS so inseridas dentro da Geral.
apague o texto O contedo de id "Topo" inserido aqui;
insira uma DIV num novo documento com o Inserir em Aps incio da tag <div id="Geral"> e ID com o nome de Topo;
clique tambm em Nova regra CSS e configure a tela de criao do novo estilo CSS;
escolha o Tipo de Seletor e no Nome do Seletor digite #Topo e em Definio da regra escolha tableless.css
modifique as propriedades:
Background/Backgroundcolor - #CC9999
Box/Height - 120 pixels
clique em OK, OK novamente e veja o resultado.
Atividades
1. Abra a estrutura de site local Dreamweaver CS6. Salve o arquivo com a DIV Geral e Topo com o nome de tableless.html na pasta raiz.
2. Insira uma nova DIV, com o nome de Lado e Inserir After tag - <div id="Topo">
3. Configure um novo estilo CSS para essa DIV com as caractersticas:
Caixa/Width - 160 pixels
Caixa/Float - Right
4. Insira uma nova DIV, com o nome de Contedo e Inserir After tag - <div id="Lado">
Caixa/Margin - Right - 170 pixels
6. Insira uma nova DIV, com o nome de Rodap e Inserir After tag - <div id="Conteudo">
Caixa/Background color - #663333
Caixa/Height - 40 pixels
Caixa/Clear - Both
8. Salve o arquivo tableless.html e o arquivo tableless.css.
Aula 22 - Box Model/Acabamento

Introduo
No mtodo de trabalho apresentado anteriormente, todo o acabamento definido em estilos CSS. Os elementos da interface, menus, imagens e formatao de
fontes so separados do HM TL. Dessa maneira simples atualizar um web site, pois o contedo no interfere na interface e vice-versa.
Imagens de Fundo
A principal maneira de formatar a interface em Tableless atravs de imagens de fundo. Essas imagens podem ser aplicadas em cada DIV e tambm na tag BODY.
Atravs da prxima atividade, toda a aparncia da pgina tableless.html ser modificada.
Uma vez pronta a pgina, independente de ser web standard ou html diagramado com tabelas, lembre-se que possvel utilizar o recurso de templates do
Dreamweaver CS6 para criar o site por inteiro.
Atividades
1. Abra a estrutura de site local Dreamweaver CS6 e tambm o arquivo tableless.html, encontrado na pasta raiz.
2. Altere o ttulo do documento para "Box M odel - Tableless/CSS".
3. Apague os textos "Content for id "Nome" Goes Here" includos em todas as DIVS.
4. Configure um novo estilo CSS redefinindo a tag BODY com os parmetros:
Tipo/Fonte - Verdana, Arial, Helvetica, sans-serif
Tipo/Tamanho - 10 points
Fundo/Background color - #113217
Fundo/Background image - tableless_fundo.jpg
Fundo/Repeat - repeat-x
Caixa/Margin - 0 pixels
5. Altere as configuraes do identificador #Geral com os parmetros:
Fundo/Background image - tableless_geral.jpg
Fundo/Repeat - repeat-y
6. Altere as configuraes do identificador #Topo com os parmetros:
Fundo/Background image - tableless_topo.jpg
Fundo/Repeat - no-repeat
7. Altere as configuraes do identificador #Rodape com os parmetros:
Fundo/Background image - tableless_rodape.jpg
Fundo/Repeat - no-repeat
8. Insira um texto de 5 pargrafos, 1 ttulo e 2 subttulos na div Conteudo. Note como o layout se comporta de maneira elstica, esticando conforme o texto o
ocupa.
9. Insira uma imagem do lado do primeiro pargrafo, alinhando esquerda.
10. Altera as configuraes do identificador #Conteudo com os parmetros:
Caixa/Padding - Left 15 pixels
11. Insira uma lista com 5 links para pginas externas da div Lado e com destino _blank.
12. Configure um novo estilo CSS, Advanced e configurando #Geral #Lado a. Essa opo permite a redefinio apenas dos links na div Lado. Utilize os parmetros:
Tipo/Color - #000000
Tipo/Size - 8 points
Tipo/Decoration - none
Fundo/Background color - #B79EBA
Caixa/Padding - 5 pixels
Caixa/Margin - Right 10 pixels
Blocos/Display - block
13. Configure um novo estilo CSS, Advanced e configurando #Geral #Lado a:hover. Essa opo permite a redefinio apenas dos links na div Lado, quando
apontados pelo cursor do mouse. Utilize os parmetros:
Tipo/Color - #FFFFFF
Fundo/Background color - #D40843
14. Configure um novo estilo CSS, Advanced e configurando #Geral #Lado li. Essa opo permite a redefinio apenas das listas na div Lado. Utilize os parmetros:
Lista/Type - none
15. Configure um novo estilo CSS, Advanced e configurando #Geral #Lado ul. Essa opo permite a redefinio apenas das listas na div Lado. Utilize os parmetros:
Caixa/Padding - 0 pixels
Caixa/Margin - 0 pixels
16. Salve o arquivo e visualize-o no navegador.
Aula 23 - AP Div/Layer
Layers
Outra forma de montar um layout com CSS no Dreamweaver atravs de Layers (camadas). A layer uma DIV com posicionamento absoluto e no to utilizada (e
aceita no mercado) como a montagem em Box M odel vista anteriormente.
Nessa verso do Dreamweaver a nomenclatura da layer mudou para AP Div (Absolute Position Div), mas o funcionamento e uso so praticamente iguais s verses
anteriores.
No Adobe Dreamweaver CS6 possvel inserir uma layer de duas maneiras: pelo menu Inserir / Objetos de Layout / AP Div oupela Barra de Insero na opo
Layout.
Para configurar as propriedades de uma layer j inserida no documento, basta selecion-la e o Inspetor de Propriedade apresenta inmeras opes.
Inserindo uma Layer
Menu Inserir
Clique no menu Inserir / Objetos de Layout / Layer;
inserida uma layer na rea de Trabalho com tamanho definido.
Menu Inserir Objeto de Layout rea de Trabalho - DIV AP

Barra de Insero
Barra de Insero - Layout

escolha na Barra de Insero a opo Layout e clique no boto Desenhar div AP;
no documento escolha um local onde se deseja inserir a layer, clique e arraste o cursor para desenhar e formar um retngulo ou quadrado.
Propriedades da Layer
possvel configurar algumas propriedades da layer atravs do Inspetor de Propriedades:
selecione uma layer na rea de Trabalho;
as propriedades da layer so exibidas no Inspetor de Propriedade.
Inspetor de Propriedade - Layer

Elementos CSS-P: configura uma identificao para a DIV;
E: configura a posio da layer em funo do canto esquerdo da pgina;
T: configura a posio da layer em funo do canto superior da pgina;
L: configura a largura da layer;
A: configura a altura da layer;

ndice Z: configura a ordem de posicionamento da layer. O menor valor de Z-Index sempre estar abaixo do maior valor do mesmo;
Vis: configura o modo de visualizao da layer. O valor Default normalmente inherit. O valor Inherit segue a configurao da layer principal. O valor
Visible exibe a layer e o valor Hidden oculta a layer;
Imagem de fundo: configura uma imagem de fundo para a layer;
Cor de fundo: configura uma cor de fundo para a layer;
Classe: configura uma classe de estilo para a layer;
Estouro: configura a layer para atender diversos tipos de tamanho de contedo. Sendo que o valor Visible aumenta o tamanho da layer de acordo com o
contedo inserido. Hidden corta o contedo excedente da layer. Scroll gera uma barra de rolagem para a layer independente do tamanho do contedo. E,
Auto gera automaticamente uma barra de rolagem caso o contedo exceda seu tamanho.
Corte: configura as posies L (Esquerda), R (Direita), T (Topo) e B (Para Baixo) contedo com relao ao contedo.
Painel Elementos AP
O painel Elementos AP um recurso visual para o controle e organizao das camadas na pgina.
Escolha o menu Janela / Elementos AP.
As camadas so exibidas como uma lista. A opo com cone de um Olho serve para definir a visualizao da camada. A opo ID define o nome da camada. E a
opo Z define a posio das camadas, sendo que as primeiras exibidas no painel estaro sobre as ltimas camadas na rea de Trabalho. O item Evitar sobreposies
evita a sobreposio de camadas.
Painel Elementos AP
Atividades
1. Abra a estrutura de site local Dreamweaver CS6 e crie uma pasta chamada aula_6. Crie uma nova pgina e nessa pgina camadas conforme a figura:
2. Insira a imagem l1.jpg na layer da esquerda.

3. Insira a imagem l2.jpg na layer menor.
4. Insira um texto de trs pargrafos na layer da direita.
5. M odifique a propriedade estouro da terceira camada e observe a diferena na visualizao (F12).
6. Salve esse arquivo como layer.html na pasta html da aula_6.
Aula 24 - Formulrio
Conceitos Bsicos
O que so formulrios? Os formulrios existem para possibilitar o cadastro, pesquisas, envio de comentrios, aumentando o poder de interao com os visitantes
dos sites e esto nos sites na internet.
Para um formulrio HTM L, ou seja, uma pgina Web que contm, alm de texto, elementos especiais chamados controles, representados por caixas de checagem,
botes tipo rdio, caixas de seleo, campos de texto, etc.
Os usurios preenchem os campos de um formulrio submetendo-o em seguida a algum agente de processamento. Neste momento, todas as informaes
fornecidas so enviadas a um programa, escritas especialmente para processar esses dados de acordo com alguma necessidade ou especificao.
Em alguns casos os dados so gravados em um banco de dados, em outros, por exemplo, uma nova pgina construda, em outros as informaes so
encaminhadas via e-mail.
A Tag <form> e seus Principais Atributos
A rea de um formulrio, na codificao HTM L da pgina, delimitada pelo par de marcadores <form> e </form>.
Exemplo:
<html>
<head>
<title> Exemplo de Formulrio </title>
</head>
<body>
<form>
Aqui iro entrar os campos do formulrio.
</form>
</body>
</html>
<form name="nome_do_formulario" method="valor" action="tratador_do_formulario">
Elementos do_formulario
</form>
Delimita um formulrio na pgina. Todos os elementos do formulrio devem vir entre este par de marcadores.
NAME: especifica o nome do formulrio. til em casos de validao de campos, por exemplo, quando se utiliza uma linguagem de scripts como JavaScript;
METHOD: mtodo que define como os dados sero transmitidos para o programa que ir process-los.
Deve ter os valores GET ou POST, sendo que a diferena entre estes dois valores est no modo como os dados so empacotados. Normalmente o mtodo Post
utilizado em formulrios de postagem de dados (como num cadastro ou em formulrios de contato). O mtodo Get utilizado na consulta de dados (como num
formulrio de busca).
ACTION: indica o endereo do programa que receber os dados do formulrio.
Exemplos:
<form name="maladireta" method="post" action="maladireta.asp">
<form method="get" action="/busca_simples.asp" >
<form name="contato" action="http://hotwired.com/cgi-bin/FomM ail.pl" method="post">
Barra de Insero
Formulrio uma excelente ferramenta para trocar informaes com os usurios do site. Esse recurso est presente na Barra de Insero na opo Formulrios e
no menu Inserir. Suas propriedades esto presentes no Inspetor de Propriedade.
Barra de Insero - Formulrio

Formulrios: insere e configura o formulrio na pgina.
Campo de texto: insere uma caixa de texto.
Campo oculto: insere um campo oculto.
rea de texto: insere uma caixa de texto com mltiplas linhas.
Caixa de seleo: insere uma caixa de seleo.
Boto de opo: insere um boto de opo.
Grupos de botes de opes: insere um grupo do boto de opo.
Selecionar (Lista/menu): insere uma caixa de listagem.
Menu de Salto: insere um menu de salto.
Campo de imagem: insere um campo de imagem.

Campo de arquivo: insere um campo de arquivo.
Boto: insere um boto.
Rtulo: insere um rtulo.
Conjunto de campos: insere texto no cdigo do formulrio.
Menu Inserir
Clique no menu Inserir / Formulrio. Todas as opes encontradas no menu Inserir / Formulrio so semelhantes a da Barra de Insero , j explicada no
item anterior.
Formulrio
Inspetor de Propriedades - Formulrio

ID de Formulrio: determina um nome ao formulrio. O procedimento de nomear um formulrio possibilita control-lo com uma linguagem, como
Javascript ou Vbscript.
Ao: determina o aplicativo que processar os dados do formulrio. Clique na pasta ou digite o caminho para localizar o aplicativo correspondente.
Mtodo: define a maneira como sero processadas e enviadas as informaes. Na opo Get as informaes so exibidas na barra de endereo e no
utilizado em formulrios longos. J a opo Post as informaes no aparecem.
Destino: define onde ser aberta a pgina.
Tipo de codificao: determina o tipo de codificao das informaes do formulrio. S se utiliza esta opo quando trabalhar com informaes
especficas.
Classe: determina uma folha de estilo para o formulrio.
Depois de tudo configurado no formulrio, basta deixar o ponto de insero dentro do formulrio e inserir os campos necessrios.
Campo de Texto
Inspetor de Propriedades - Campo de texto

ID: define um nome para a caixa de texto. Este nome armazena o valor digitado na caixa, como uma varivel. Nunca deixe este campo em branco.
Largura em caracteres: define a largura da caixa de texto em caracteres.
Caracteres (mx.): determina o nmero mximo de caracteres digitado na caixa de texto.
Tipo: determina o tipo de caixa de texto, como: Linha simples - nica linha, Vrias linhas- vrias linhas e Senha - senha.
Valor Inicial: define um valor inicial para a caixa de texto.
Classe: determina um estilo para a caixa de texto.
Campo Oculto
Inspetor de Propriedades - Campo Oculto

Campo Oculto: define um nome para o campo oculto. Este nome armazena o valor digitado no campo Valor: Armazena o valor do campo, como uma varivel. Nunca
deixe este campo em branco.
rea de Texto
Inspetor de Propriedades - rea de texto

Campo de texto: define um nome para a caixa de texto. Este nome armazena o valor digitado na caixa, como uma varivel. Nunca deixe este campo em branco.
Nmero de linhas: define a altura da caixa de texto em linhas.
Tipo: determina o tipo de caixa de texto, como: Linha simples - nica linha, Vrias linhas - vrias linhas e Senha - senha.
Valor Inicial: define um valor inicial para a caixa de texto.
Caixa de Seleo
Inspetor de Propriedades - Caixa de seleo

Nome da caixa de seleo: define um nome para a caixa de seleo. Este nome armazena o valor digitado no campo.
Valor selecionado: define um valor para a caixa de seleo.
Estado inicial: determina um estado inicial para a caixa de seleo como:
Marcado - marcada ou Desmarcado - desmarcada.
Boto de Opo
Inspetor de Propriedades - Radio Button

Boto de opo: define um nome para o boto de opo. Este nome armazena o valor digitado no campo.
Valor selecionado: define um valor para o boto de opo.
Estado inicial: determina um estado inicial para o boto de opo como:
Marcado - marcada ou Desmarcado - desmarcada.
Grupo de Botes de Opes
Essa opo permite que sejam inseridos vrios botes de opo de uma s vez.
Nome: define um nome para o grupo. Este nome armazena o valor digitado no campo Valor, como uma varivel. Nunca deixe este campo em branco.
Botes de opo: insere todos os botes que faro parte do grupo. A opo Rtulo o nome do boto, sendo que Valor ser o valor do boto. Os botes + e adicionam e subtraem botes. J as setas posicionam os botes na ordem desejada.
Criar layout usando: determina o layout do grupo. A opo Quebras de linha separa os botes com quebra de linha. J Tabela separado por uma tabela.
Janela - Grupo de botes de opo

Lista/Menu
Inspetor de Propriedades - Menu/Lista

Selecionar: define um nome para a lista. Este nome armazena o valor digitado no campo Lista
Tipo: determina se haver link na opo clicada (Menu) ou simplesmente ser marcada uma opo da lista sem este recurso de link (Lista).
Altura: define a quantidade de itens que a lista exibir de uma s vez.
Selees: define quantas opes podero ser selecionadas da lista.
Selecionados inicialmente: determina qual opo ser marcada inicialmente.
Listar valores: define as opes que aparecero na lista ou no menu. Ao clicar nesse boto abrir uma janela para a insero de valores.
A opo Rtulo de item o rtulo, sendo que a opo Valor o valor que ser atribudo ao rtulo. O boto + e - adiciona e subtrai valores. J as setas
posicionam os valores.
Listar valores
Menu de Salto
Essa opo cria um menu de salto, utilizado geralmente como navegao alternativa em um web site.
Itens de menu: exibe os itens j criados.
Texto: defineos rtulos que sero exibidos na lista.
Quando selecionado, v para URL: define um valor para o rtulo Texto. Esse valor pode ser uma URL ou um arquivo. Para indicar basta clicar no boto Procurar...
Abrir URLs em: especifica o frame ou janela onde a URL dever ser carregada.
Inserir menu de salto

ID do menu: define um nome para o menu de salto. Utilizado em linguagem script.
Inserir boto Ir aps menu: caso esteja marcada esta opo, ser criado um boto Ir que ser clicado aps ser escolhida uma opo na lista.
Selecionar o primeiro item aps a alterao da URL: caso esteja marcada esta opo, o menu sempre retornar a primeira opo da lista aps a seleo de um
item.
Campo de Imagem
Inspetor de Propriedades - Campo de imagem

Esse campo de imagem pode ser utilizado no lugar do boto enviar. Ao clicar abrir uma janela para indicar o caminho da imagem.
Campo de imagens: define um nome para o campo.
Orig: mostra o caminho do arquivo.
Editar imagem: abre a imagem selecionada em um editor de imagem especfico.
Alinhar: escolha o tipo de alinhamento para a imagem: esquerda, centro e direita.
Campo de Arquivo
Inspetor de Propriedades - Campo de arquivo

Esse campo permite que o usurio procure arquivos no disco rgido, carregando-os como dados do formulrio.
Nome do arquivo: define um nome para o campo de arquivo.
Caracteres (mx): determina o nmero mximo de caracteres digitado na caixa de texto.
Boto
Inspetor de Propriedades - Boto

Nome do boto: define um nome para o boto. Normalmente deixado vazio (a no ser que seja controlado por linguagens de script).
Valor: especifica um texto que aparece no boto como rtulo.
Ao: determina uma funo para o boto. Enviar formulrio para enviar os dados. Redefinir formulrio para limpar o formulrio. E Nenhuma no possui uma
funo especfica podendo ser programada atravs de script.
Classe: determina uma folha de estilo para o boto.
Valor
Esse recurso insere um rtulo atravs das tag <label> </label>. Para inserir esse texto necessrio ir at o cdigo-fonte da pgina. Para a formatao desse texto
utilize o Inspetor de Propriedade.
Processamento do Formulrio
De nada adianta construir um formulrio e no ter como process-lo.
Existem vrias tecnologias ligadas ao processamento de um formulrio e aqui sero citadas duas delas como exemplo:
Active Server Pages ou ASP, tecnologia da M icrosoft.

Neste caso o programador precisa inserir no cdigo HTM L da pgina, comandos que consigam acessar o servidor e executar as tarefas exigidas.
A pgina que contm comandos ASP passa a ter a extenso .asp e no mais .html. M as pelo fato dos scripts serem executados no servidor, o usurio no consegue
ver nenhuma codificao em sua mquina.
Quando utilizada esta tecnologia para processamento de um formulrio, o atributo ACTION do marcador FORM indicar o arquivo .asp correspondente ao
processamento do formulrio.
Exemplo:
<form name="maladireta" method="post" action="maladireta.asp">
Scripts CGI.
Neste caso o programador precisa escrever scripts CGI ou utilizar CGIs pr-fabricados, disponveis gratuitamente na Rede, que processem as informaes de forma
transparente.
Exemplo:
<form name="cadastro" method="post" action="FormMail.pl">
Atividades
1. Abra a estrutura de site local Dreamweaver e tambm o documento contato.html (baseado no modelo).
2. Dentro da rea do contedo, insira um formulrio.
3. No Adobe Dreamweaver monte uma diagramao utilizando tabela para o formulrio. Essa tabela ser inserida no contedo do documento.
Tabela:
Tabela Regular (5 linhas x 2 colunas)
Largura: 100%
Espaamento da clula: 2 - Borda: 0
4. Insira os textos e itens de formulrio na tabela. Para isso siga as posies e textos atravs da figura a seguir.
5. Observe que algumas clulas foram mescladas, faa o mesmo em sua tabela.
Diagramao com Tabela e Texto

6. Para finalizar configure os campos do formulrio. Para isso siga as instrues a seguir.
Nome: TextField (name - nome, charwidth - 40)
Cidade: TextField (name - cidade, charwidth - 30)
Email: TextField (name - email, charwidth - 40)
Cursos -Radio Group (name - Cursos)
Mensagem: Textarea (name - comentario, charwidth - 45, num line - 5)
Enviar: Button (label - Enviar, action - submit)
Limpar: Button (label - Limpar, action - reset)
Aula 25 - Comportamentos
Introduo
Os comportamentos permitem a interao do usurio com a pgina atravs de cdigos Javascript pr-formatados. Ao anexar um comportamento a um elemento da
pgina so especificados uma ao e o evento que a disparar. Diversas aes podem ser disparadas pelo mesmo evento e possvel especificar a ordem em que as
aes ocorrero.
No Adobe Dreamweaver CS6 possvel inserir um comportamento pelo painel Comportamento que se encontra no menu Janela / Comportamentos.
Para inserir um comportamento basta selecionar um elemento no documentoe atravs do painel Comportamento aplicar o comportamento desejado.
Para configurar as propriedades de um comportamento j inserido, basta selecionar o elemento que o recebeu e o painel Comportamento apresenta todos os
comportamentos aplicados.
Painel Comportamento
Selecione um contedo no documento;
escolha o menu Janela / Comportamentos.
Ser aberto o painel Comportamento para aplicar eventos e aes.
Painel Comportamento
Eventos e Aes
Mostrar eventos definidos: exibe os eventos aplicados.
Mostrar todos os eventos: exibe todos os eventos aplicados.
Adicionar comportamento: apresenta todos os comportamentos a serem aplicados.
Remover evento: apaga um comportamento aplicado.
Mover valor do evento para cima / Mover valor do evento para baixo: modifica a ordem dos comportamentos.
Inserindo Comportamentos
Sero mostrados os principais comportamentos da verso CS6 do Dreamweaver.
Chamar JavaScript
Esse recurso utilizado para chamar uma funo ou executar um cdigo Javascript. Basta preencher o campo com um caminho ou comando Javascript.
Chamar JavaScript
Alterar Propriedade
Esse recurso utilizado para alterar propriedades de algum elemento.
Alterar propriedade
Tipo de elemento: define o tipo de elemento que deseja alterar.
ID do elemento: define o elemento desejado pelo nome.
Propriedade: define a propriedades que ser alterada.
Novo valor: define um novo valor para a propriedade.
Ir para URL
Esse recurso abre uma nova pgina na janela, sendo particularmente til para alterar o contedo de duas ou mais pginas com um clique.
Ir para URL
Aberto em: define a janela onde ser carregada a pgina.
URL: define a URL da pgina a ser aberta.
Abrir Janela do Navegador
Esse recurso abre uma URL numa nova janela. possvel especificar as propriedades da nova janela, inclusive o seu tamanho, nome e atributos. Utiliza-se muito
esse recurso em pop-ups e em galerias de imagem.
Open Browser Janela

URL a ser exibida: caminho do arquivo que ser aberto na janela.
Largura da janela: define largura em pixel da janela.
Altura da janela: define altura em pixel da janela.
Atributo: define os atributos que exibiro ou no na janela.
Barra de ferramentas de navegao: determina a exibio da Barra de Navegao do browser
Barra de ferramentas de local: determina a exibio da Barra de Endereo do browser.
Barra de status: determina a exibio da Barra de Status do browser.
Barra de menus: determina a exibio da Barra de M enu do browser.
Barras de rolagem conforme necessrio: determina a exibio das Barras de Rolagem do browser.
Alas de redimensionamento: determina se a janela do browser ser redimensionvel.
Nome da janela: define um nome para a janela que ser aberta.
Mensagem Pop-up
Esse recurso exibe um alerta em JavaScript com uma mensagem desejada especificada por voc. Como os alertas em JavaScript possuem apenas o boto OK,
utilize esta ao para fornecer informaes ao usurio, em vez de apresentar-lhe uma opo.
Mensagem pop-up
Mensagem: define a mensagem que ser visualizada na janela.
Efeitos
Uma novidade nessa verso do Dreamweaver a incluso de efeitos. possvel fazer um elemento da tela piscar, aparecer, esticar, etc.
Esses efeitos so teis para chamar a ateno do usurio para algo na tela, como um formulrio.
O efeito de Aumentar/Diminuir
Atividades
1. Abra a estrutura de site local Dreamweaver CS6 e tambm o documento contato.html (baseado no modelo).
2. Selecione o formulrio e aplique o comportamento Validate Form, configurando os campos Nome, Email e Fone como obrigatrios.
3. Configure o campo Email para que seja um endereo de email vlido.
4. Configure o campo Fone para que seja numrico.
Aula 26 - Mdias/Flash
Inserindo Flash
O Dreamweaver CS6 permite a incluso de diversos objetos baseados em Flash, como botes, textos e vdeos.
Os objetos incorporados nessa verso j so inseridos atravs de uma marcao em JavaScript, corrigindo um problema de execuo de Activex encontrado em
outras verses do Dreamweaver.
Os arquivos feitos no Adobe Flash possuem a extenso SWF.
Atravs do menu Inserir/Mdia - SWF;
uma vez inserido, o arquivo pode ser configurado atravs do inspetor de propriedades.
o arquivo inserido apresentado "desligado" dentro do Dreamweaver. Para visualizar o flash, basta apertar o boto Executar.
Flash Vdeo
O formato padro de vdeo utilizado pelo Flash o FLV. Esse formato utilizado inclusive pelo Youtube e visto por milhes de pessoas na internet.
No Dreamweaver CS6 possvel inserir um vdeo em flash e escolher qual o "player" que deseja utilizar na execuo do vdeo.
Inserir Flash Vdeo
Atividades
1. Abra a estrutura de site local Dreamweaver CS6 e crie uma pasta chamada aula_8. Crie uma nova pgina e salve-a com o nome de midias.html na pasta criada.
2. Crie um arquivo Flash Vdeo (FLV).
Unidade IV - Web Standard/Tableless

Aula 27 - Web Standards
Definies
Tableless
Aula 28 - Layout em CSS
Definies
Aula 29 - Finalizando o Layout
Imagens de Fundo
M enus de Navegao
Aula 27 - Web Standards

Definies
O W3C (World Wide Web Consortium), juntamente com outros grupos e organismos reguladores, estabeleceu tecnologias para criao e interpretao de
contedo para a Web.
Estas tecnologias, que so chamadas de 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, M ozilla, Opera, Netscape, etc.) e da forma (banda de conexo) com
que o usurio estiver acessando a Internet.
"Web standards tm o objetivo de ser uma base comum... um fundamento para a World Wide Web para que navegadores e outros programas compreendam o
mesmo vocabulrio bsico".
Eric Meyer - Autor do livro Cascading Style Sheets: The Definitive Guide.
Benefcios do Web Standard
reduo dos custos de desenvolvimento (simplificar cdigo, separao entre apresentao e contedo);
reduo dos custos de manuteno (menos cdigo, cdigo modular). O contedo pode ser facilmente reestilizado sem alterao de cdigo;
reduo dos custos de hosting (utilizao de banda - reduo do tamanho e trfego de arquivos);
facilidade em manter a consistncia visual entre os documentos do mesmo site;
ampliao da audincia. Proporcionar web sites acessveis a uma gama maior de pessoas e um nmero maior de devices para Internet;
melhor experincia do usurio. Sites mais funcionais. Carregamento mais rpido do contedo e menores problemas com incompatibilidades com
navegadores;
melhor posicionamento em ferramentas de buscas;
garantir a viabilidade ao longo do tempo de qualquer documento web, medida que os navegadores evoluem, e novos produtos surgem no mercado;
aumento na percepo de qualidade do trabalho produzido;
acessibilidade. Estar em conformidade com as leis e diretrizes (sites de instituies pblicas) possibilitando o acesso s pessoas portadoras de
necessidades especiais atravs de browser especiais.
Pontos Negativos:
curva de aprendizado acentuada;
problemas com incompatibilidade entre browsers;
alguns tipos de layouts podem ser obtidos de forma muito mais fcil utilizando-se tabelas ao invs de CSS.
Web Site Tradicional
O tipo de web site montado antes desse movimento de padronizao conhecido como tradicional. Ele possui as seguintes caractersticas:
extenso da mdia impressa;
layouts baseados em tabelas;
camada de apresentao junto com a camada de contedo;
cdigos invlidos, inacessveis e semanticamente incorretos.
Web Site Web Standard
Os web sites Web Standard so mais modernos e possuem as seguintes caractersticas:
layout baseado em containers (DIVs - Tableless);
uso de Cascading Style Sheets (CSS) para separao entre contedo e apresentao;
marcao semanticamente correta;
cdigo vlido e acessvel (por humanos e mquinas).
Standards Definidos pelo W3
O comit W3 define quais os padres utilizados pelos desenvolvedores. Esses padres so:
XHTM L - Extensible Hypertext M arkup Language;
XM L - Extensible M arkup Language;
CSS - Cascading Style Sheets;
DOM - Document Object M odel;
ECM AScript 262 (a verso padro do JavaScript);
SVG - Scalable Vector Graphics.
importante observar que, dentro de desenvolvimento Web Standard, o HTM L substitudo pelo XHTM L (Extensible Hypertext M arkup Language).
XHTML
O XHTM L uma verso aprimorada do HTM L tradicional. O XHTM L 1.0 uma definio de HTM L em conformidade com as regras do XM L.
Isso quer dizer que utilizando XHTM voc tem a vantagem de poder utilizar plenamente o HTM L, e o poder de manipular informaes com XM L.
As diferenas ao escrever um cdigo XHTM L no so tantas assim, e j vem sido citadas nesse curso. Seguem os exemplos:
Fechar Todas as Tags:
Incorreto:
<br>
<img src="image.jpg" alt="foto x">
Correto:
<br />
<img src="image.jpg" alt="foto x" />
Utilizar Letras Minsculas para Tags e Atributos:
Incorreto:
<A HREF="index.html" CLASS=internal>
Correto:
<a href="index.html" class="internal">
Colocar entre aspas valores dos atributos:
Incorreto:
<table width=100%>
Correto:
<table width="100%">
No permitir Atributos sem Valores (booleanos):
Incorreto:
<input checked>
<option selected>
<frame noresize>
Correto:
<input checked="checked" />
<option selected="selected" />
<frame noresize="noresize" />
Atributo ID substitui o Atributo NAME:
Incorreto:
<img src="figura.gif" name="figura1" />
Correto:
<img src="figura.gif" id="figura1" /> <img src="figura.gif" id="figura1" name="figura1" />
No utilizar Tags e Atributos HTML Descontinuados:
Incorreto:
<b>destaque</b>
Correto:
<strong>destaque</strong>
Declarar o DOCTYPE na Primeira Linha do Documento:
<!DOCTYPE ...>
<html>
<head>
<title>... </title>
</head>
<body> ... </body>
</html>
Tipos de Doctype
A marcao de tipo de documento (Doctype) pode ser de trs tipos:
Strict
Utilizado quando o cdigo do documento 100% XHTM L. O XHTM 1.0 Strict no permite nenhuma desconformidade com o padro XHTM L.
Transitional
Este o tipo mais utilizado. Ele permite a utilizao de tags e atributos de formatao, tornando o documento compatvel com browsers que no suportam CSS.
Frameset
Este tipo indicado quando voc est utilizando FRAM ES em seu site.
Nos prximos exerccios, ser utilizado o Doctype Transitional. Sua sintaxe :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTM L 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Essa tag inserida antes da marcao <html>.
Tableless
Definies
Ao aplicar as regras de Web Standard, surge um problema referente maneira tradicional de criao de layouts. A tag <table>, utilizada para a diagramao de
pginas, foge do seu valor semntico correto, que o de apresentar dados tabulares.
Para solucionar essa incoerncia, foi criado o Tableless (sem tabela), mtodo onde cada mdulo do web site (cabealho, menu, contedo, etc.) colocado
dentro de um container (caixa). Esse container montado utilizando a tag <div>, normalmente identificada por um id (classe de nome nico).
Essas caixas so formatadas posteriormente com estilos de texto CSS. Dessa maneira no so utilizadas imagens para o layout e existe uma separao entre
contedo e formatao (visual).
D icas: O Tableless chamado tambm de box model (modelo de caixas).
Benefcios do Tableless
Existem diversos benefcios em desenvolver com esse novo mtodo, pois:
reduz o tamanho final dos arquivos (isola 80% do cdigo):
menor tempo de espera para visualizao das pginas;
menor consumo de banda (custos).
facilita alteraes no layout e na estrutura, reduzindo o custo de manuteno do projeto;
permite manter uma padronizao visual ao longo de um projeto mais extenso;
maior acessibilidade a usurios com necessidades especiais e equipamentos mbile como celulares e PDAs.
Divs
Dentro do Tableless, a tag mais importante a <div>. Utilizada agora para a criao de caixas (e no mais para alinhamento de blocos de pargrafos) essa marcao
quem cria o esqueleto em XHTM L, que ter sua aparncia formatada com estilos CSS. Cada mdulo do web site "etiquetado" com uma div. Podemos criar
quantas divs forem necessrias para o layout, assim como eram criadas tabelas e clulas. As divs podem conter um menu, o contedo do site, imagens de fundo,
banners e etc. Sua posio, cores, bordas, formatao de texto e imagens de fundo so definidas numa folha de estilo separada do cdigo XHTM L. Com
identificaes, o cdigo mais fcil de ser entendido, pois claro para que serve cada uma das divs criadas.
Exemplos:
<div id="topo">Aqui entra o topo do web site</div>
<div id="menu">Aqui entra o menu de navegao</div>
<div id="conteudo">Aqui entra o contedo do web site</div>
D icas: Evite identificar uma div como "menuesquerdo" ou "azul". Se a aparncia do site for mudada no futuro, o cdigo fica incoerente, dificultando o
entendimento e manuteno.
Uma div pode ser colocada dentro da outra. Dessa maneira, as propriedades da div de nvel superior sero herdadas pelas divs internas.
Exemplo:
<div id="pai">
<div id="filha">Contedo da div filha, com heranas da div pai</div>
</div>
Contedo
O contedo em Web Standard preocupado em manter a semntica correta, respeitando ttulos, listas e pargrafos. Cada parte do contedo, layout e navegao
colocada dentro de sua div correta. O cdigo em Standard mais organizado e simples de ser entendido pelo desenvolvedor. Todo o texto de contedo pode ser
colocado na div de identificao "conteudo". Sua formatao feita utilizando CSS.
Exemplo:
<div id="conteudo">
<h1>Ttulo da pgina</h1>
<p>Esse um pargrafo da div contedo</p>
</div>
As imagens do contedo, como fotos, banners e grficos tambm so colocadas dentro das divs. As imagens que constituem o layout, como fundos de pginas,
topo e rodap so declaradas em CSS.
Exemplo:
<div id="conteudo">
<h1>Ttulo da pgina</h1>
<p>Esse um pargrafo da div contedo</p>
<p>Veja a imagem:<img src="img/grafico1.gif" alt="M eu grfico"></p>
</div>
Navegao
Em Standard comum a navegao ser colocada em uma div prpria e utilizando listas ao invs de pargrafos ou tabelas. Isso permite maior dinamismo em
mudanas de layout, possibilitando inverter a posio de um menu, assim como sua orientao (vertical ou horizontal).
Exemplo:
<div id="menu">
<ul>
<li><a href="#">Item 1</a></li>
</ul>
</div>
D icas: possvel criar um link vazio colocando um # (sustenido) ao invs de um endereo URL
Aula 28 - Layout em CSS

Definies
Em Web Standard, toda a formatao do layout (imagens, cores, tipografia, margens, etc.) declarada em uma folha de estilo CSS, separada do XHTM L (onde fica
apenas o contedo).
Essa forma de desenvolvimento que permite as vantagens relativas ao desempenho e manuteno, vistas anteriormente.
A formatao ser feita em etapas, formatando a disposio geral das divs, o contedo e, finalmente, o menu de navegao.
Os estilos CSS utilizados so basicamente os mesmos vistos em outros exemplos e exerccios, porm utilizados com outros objetivos.
Posicionamento e Tamanho de divs
Existem basicamente duas tcnicas de construo de layouts utilizando CSS, que podem ser utilizadas em conjunto para criao de layouts mais complexos,
utilizando:
tags div com posicionamento absoluto (position: absolute);
tags div com a propriedade float (float: left | float: right | clear).
Float
Propriedade do CSS que permite posicionar elementos direita ou esquerda de outro elemento. Esta propriedade possui trs (3) valores:
left - move o elemento para a esquerda e posiciona o texto ao seu redor;
right - move o elemento para a direita e posiciona o texto ao seu redor;
none - mostra o elemento sem alterao.
Exemplo (em CSS):
#esquerda {float:left;}
#direita {float:right;}
Clear
Para que o elemento abaixo de um float no seja afetado, voc deve aplicar a propriedade clear com uma das opes a seguir:
clear: left
clear: right
clear: both
Exemplo (em CSS):
#limparesquerda {clear:left;}
#limpardireita {clear:right;}
#limparambas {clear:both;}
Width / Height
Alm do posicionamento, tambm comum a declarao da largura/altura de uma div. Da mesma maneira que o posicionamento o tamanho das divs pode ser fixo
ou elstico (px ou %).
Exemplo (em CSS):
#elastica {width:100%;}
#fixa {width:100px;}
Seguindo os exemplos anteriores, para criar uma div de nome caixa1, com 200 pixels de largura e flutuando para a direita do texto (ou de outra div) teria:
#caixa1 {width:200px;
float:right;
}
Margens / Preenchimentos
Ao flutuar uma div prxima de outra preciso estar atento s margens e preenchimentos. As tags para esse controle so margin e padding.
Apesar de uma caixa flutuar para a direita ou esquerda, o texto se encaixa na parte de baixo da div. Para que isso no ocorra utilizado o atributo de margem
(margin).
Exemplo (em CSS):
#esquerda { height:200px;
width:200px;
float:left;
}
#direita {margin-left:200px;}
Com esse exemplo, o texto da caixa "direita" fica sempre separado da caixa "esquerda", sem invadir a parte de baixo da div esquerda.
Layout com Trs Colunas
Seguindo os exemplos vistos anteriormente, possvel criar um layout com topo, 3 colunas e rodap com o seguinte cdigo:
HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM L 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Tableless</title>
<link href="estilo01.css" rel="stylesheet" type="text/css" />
</head>
<body
<div id="geral">
<div id="topo">
<h1>Cabealho</h1>
</div>
<div id="lateral1">
<h3>Contedo da lateral 1</h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante
ac quam. M aecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. </p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. </p>
</div>
<div id="lateral2">
<h3> Contedo da lateral 2</h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante
ac quam. M aecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. </p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. </p>
</div>
<div id="conteudo">
<h1> Contedo Principal </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante
ac quam. M aecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>
<h2>Subttulo </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante
ac quam.Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
</div>
<div id="rodape">
<p>Rodap do site</p>
</div>
</div>
</body>
</html>
Lembrando que esse XHTM L cria uma div chamada "geral" com as demais divs sendo suas "filhas".
Veja agora a formatao bsica para o layout, declarada no arquivo estilo01.css (no esto declaradas formataes de aparncia de textos - apenas o layout):
CSS #geral {
width:960px;
margin:0 auto;
}
#topo {
height:150px;
background:#CF0;
}
#lateral1 {
width:170px;
background:#CCC;
float:left;
}
#lateral2 {
width:170px;
background:#CCC;
float:right;
}
#conteudo {
margin:0 180px;
}
#rodape {
background:#CF0;
height:60px;
clear:both;
}
Uma vez salvo e publicado, o resultado :
Aula 29 - Finalizando o Layout

Imagens de Fundo
Na criao de pginas no modelo tradicional (com tabelas) as imagens do layout so inseridas com a marcao img. Isso faz com que o layout fique amarrado com
o contedo, complicando processos como manuteno e atrasando o carregamento das pginas.
O Web Standard utiliza imagens de fundo para a criao do layout, declarando as informaes na folha de estilo CSS. possvel modificar o estilo CSS e dessa
maneira trocar a aparncia de todo o web site.
A marcao de imagem de fundo a mesma vista anteriormente. Veja no exemplo como fica sua verso abreviada, onde so declaradas cor, imagem de fundo e
repetio:
#fundo {background: #CCFF00 url(img/fundo.jpg) repeat-x;}
Menus de Navegao
Utilizando estilos CSS tambm possvel a criao de barras de navegao, com comportamento parecido com botes feitos em programas grficos ou com
javascript.
Os menus criados com listas (tag li) podem ser posicionados tanto na horizontal, quanto na vertical. O atributo display (responsvel pela exibio de elementos do
XHTM L) quem cria essa possibilidade.
Tambm interessante desligar os smbolos de marcao da lista, utilizando o atributo list-style.
Exemplo:
#menu li {display:inline;
list-style:none;}
D icas: No exemplo quem recebeu a configurao foi o elemento li existente na div menu. Qualquer li que esteja fora dessa div no afetado.
A maior parte da configurao dos menus em CSS feita na prpria tag "a" (referente ao link). Nessa tag so configurados vrios itens, como cor de fundo, cor do
link, sublinhado, preenchimento, entre outros.
Para que a cor do fundo do link ocupe a largura total da sua div (e no apenas o texto exibido) necessrio inserir o atributo display, configurado para "block".
Veja no exemplo um link com a cor branca, sublinhado, com uma borda esquerda, fundo vermelho e com preenchimento (descolando o texto do link do fundo):
#menu a {
color: #FFFFFF;
text-decoration: underline;
border-left: 2px solid #CC0000;
background: #990000;
display: block;
padding: 4px;
}
Quando o visitante do web site posicionar o mouse sobre o link, interessante criar algum destaque, por exemplo modificando a sua cor. Veja no exemplo como
isso feito, com o uso da pseudoclasse hover:
#menu a:hover {
color: #990000;
}
Lembre-se de que, alm de cor de fundo, possvel declarar uma imagem. Dessa maneira o efeito o mesmo de vrios portais, onde um degrad de uma cor
trocado por um degrad de outra cor. Com o <a> exibido em bloco, tambm possvel declarar uma largura e altura fixas, assim pode-se criar qualquer tipo de
boto.
Uma observao importante, ao criar menus horizontais, preciso adicionar a propriedade float:left s declaraes do #menu a.
Unidade V - Apndices
Apndice A - Exemplo Abrangente
Apndice B - Consideraes Finais
Editores
Sites
Apndice C - Atividades de HTML
Parte 1
Parte 2
Parte 3
Parte 4
Parte 5
Parte 6
Parte 7
Parte 8
Parte 9
Parte 10
Parte 11
Parte 12
Parte 13
Apndice A - Exemplo Abrangente

Veja agora como pode ser interessante o uso de folhas de estilo na formatao de uma pgina.
Pgina sem Qualquer Formatao
<html>
<head>
<title>Exemplo de tabela</title>
</head>
<body>
<table border="1" width="400" align="center" >
<tr>
<td colspan="5">Distribuio de Hardware</td>
</tr>
<tr>
<td rowspan="2"></td> <td colspan="2">M icros</td> <td colspan="2">Impressoras</td>
</tr>
<tr>
<td>PC</td>
<td>M AC</td>
<td>Jato</td>
<td>Laser</td>
</tr>
<tr>
<td width="16%">SP</td> <td width="21%">30</td> <td width="21%">5</td> <td width="21%">3</td> <td width="21%">1</td>
</tr>
<tr>
<td>RJ</td>
<td>20</td>
<td>4</td>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>RS</td>
<td>20</td>
<td>4</td>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td colspan="5">Fonte: CPD</td>
</tr>
</table>
</body>
</html>
Utilizando Formatao em HTML

<html>
<head>
</head>
<body>
<tr>
<td colspan="5" align="center" bgcolor="black"><font face="Verdana, Arial" size="4"
color="white">Distribuio de Hardware</font></td>
</tr>
<tr>
<td rowspan="2" bgcolor="black"> </td> <td colspan="2" align="center" bgcolor="yellow"> <font face="Verdana, Arial" size="4"
color="red">M icros</font></td>
<td colspan="2" align="center" bgcolor="yellow"> <font face="Verdana, Arial" size="4"
color="red">Impressoras</font></td>
</tr>
<tr>
<td align="center" bgcolor="yellow"> <font face="Verdana, Arial" size="4"
color="red">PC</font></td>
color="red">M AC</font></td>
color="red">Jato</font></td>
<td align="center" bgcolor="yellow"><font face="Verdana, Arial" size="4"
color="red">Laser</font></td>
</tr>
<tr>
<td width="16%" align="center" bgcolor="yellow"><font face="Verdana, Arial" size="4"
color="red">SP</font></td>
<td width="21%" align="center" bgcolor="white"><font face="Times New Roman" size="4"
color="black">30</font></td>
</tr>
<tr>
color="red">RJ</font></td>
<td align="center" bgcolor="white"><font face="Times New Roman" size="4"
</tr>
<tr>
color="red">RS</font></td>
</tr>
<tr>
<td colspan="5" align="center" bgcolor="black"> "><font face="Verdana, Arial" size="4"
color="white">Fonte: CPD</font></td>
</tr>
</table>
</body>
</html>
Com Folhas de Estilos mais Fcil

<html>
<head>
<style type="text/css">
.titulo {font-family: Verdana,Arial;

font-size: 14pt;
color: white;
background: black;
text-align: center;}
.cabec {font-family: Verdana,Arial;
font-size: 14pt;
color: red;
background: yellow;
.numeros {font-family: "Times New Roman";
font-size: 14pt;
color: black;
background: white;
</style>
</head>
<body>
<tr>
<td colspan="5" class="titulo">Distribuio de Hardware</td>
</tr>
<tr>
<td rowspan="2"></td> <td colspan="2" class="cabec">M icros</td> <td colspan="2" class="cabec">Impressoras</td>
</tr>
<tr>
<td class="cabec">PC</td> <td class="cabec">M AC</td> <td class="cabec">Jato</td> <td class="cabec">Laser</td>
</tr>
<tr>
<td width="16%" class="cabec">SP</td> <td width="21%" class="numeros">30</td> <td width="21%" class="numeros">5</td> <td width="21%" class="numeros">3</td>
<td width="21%" class="numeros">1</td>
</tr>
<tr>
<td class="cabec">RJ</td> <td class="numeros">20</td> <td class="numeros">4</td> <td class="numeros">2</td> <td class="numeros">1</td>
</tr>
<tr>
<td class="cabec">RS</td> <td class="numeros">20</td> <td class="numeros">4</td> <td class="numeros">2</td> <td class="numeros">1</td>
</tr>
<tr>
<td colspan="5" class="titulo">Fonte: CPD</td>
</tr>
</table>
</body>
</html>
O cdigo ficou menor e mais fcil, e o resultado o mesmo!
Apndice B - Consideraes Finais

Editores
Existe uma variedade de editores HTM L que facilitam o trabalho de criao de pginas Web. Alguns se dedicam criao de pginas individuais enquanto outros se
encarregam da criao e manuteno de todo o site, chegando a maiores nveis de sofisticao e custo.
CoffeeCup Free HTML 6.0 - Um software para criao de pginas para a web muito fcil de usar.
Arachnophilia 5.1.1849 - Um editor completo para HTM L.
HomeSite 5.0 - Um editor ideal para quem entende um pouco de HTM L.
Sites
World Wide Web Consortium
http://www.w3.org
Site oficial do comit que regulamenta o uso de tecnologias utilizadas na Web.
Construindo seu Site

http://www.construindoseusite.com.br/css/css.shtml
Site com artigos e tutoriais sobre tecnologias para a Web, inclusive CSS.
Lynda
http://www.lynda.com
Site da autora de uma srie de livros sobre Web Design, Lynda Weinman.
Neste site a autora traz uma srie de assuntos ligados ao processo de criao e produo de sites.
Apndice C - Atividades de HTML

Parte 1
1. No bloco de notas crie um documento HTM L com as seguintes caractersticas:
ttulo da pgina como: "M estres da Pintura | Os maiores artistas reunidos na web";
cor azul escuro (#003366) como fundo da pgina;
margem esquerda e margem superior igual a 0(zero);
contedo descritivo da pgina (meta description) como: "Biografia, pinturas e informaes sobres grandes mestres da pintura";
palavras-chave (meta keywords) como: "pintura, artistas, Van Gogh, Paul Czanne, Gustav Klimt, Henri M atisse, Joan M ir".
Salve a pgina com o nome index.html.
2. Crie uma pgina com o ttulo "Van Gogh", cor de fundo #FFFFFF e margens iguais a 15. Salve a pgina como vangogh.htm.
3. Crie uma pgina com o ttulo "Paul Czanne", cor de fundo #FFFFFF e margens iguais a 15. Salve a pgina como cezanne.htm.
4. Crie uma pgina com o ttulo "Gustav Klimt", cor de fundo #FFFFFF e margens iguais a 15. Salve a pgina como klimt.htm.
5. Crie uma pgina com o ttulo "Henri M atisse", cor de fundo #FFFFFF e margens iguais a 15. Salve a pgina como matisse.htm.
6. Crie uma pgina com o ttulo "Joan M ir", cor de fundo #FFFFFF e margens iguais a 15. Salve a pgina como miro.htm.
Parte 2
1. No bloco de notas abra o arquivo vangogh.htm. Neste documento digite o seguinte texto:
Van Gogh
Vincent Willem van Gogh nasceu em 30 de maro de 1853, em uma pequena aldeia de Groot-Zundert, na Holanda.
O irmo mais velho, que tambm fora batizado como Vincent, nascera um ano antes, na mesma data, mas morrera com apenas seis meses de idade.
Sendo que:
o ttulo deve ser formatado com a tag <h1>;
cada pargrafo do corpo do texto deve estar formatado com a tag <p>;
o nome completo do artista deve estar em negrito.
2.. No bloco de notas abra o arquivo cezanne.htm. Neste documento digite o seguinte texto:
Paul Czanne
Paul Czanne nasceu em Aix-en-Provence, Frana, em 1839, filho de um prspero fabricante de chapus de feltro que se tornou banqueiro em 1847.
Ao contrrio de alguns de seus contemporneos como Vincent van Gogh e Paul Gauguin, Czanne sempre teve uma vida confortvel e rotineira.
Sendo que:
Parte 3
1. No bloco de notas abra o arquivo klimt.htm. Neste documento digite o seguinte texto:
Gustav Klimt
Os controvertidos painis pintados por Klimt para o auditrio da Universidade de Viena renderam-lhe a acusao de "perverter a juventude".
Infelizmente, a obra no sobreviveu para contar sua histria, pois em 1945, um incndio a reduziu s cinzas.
Sendo que:
o nome da universidade deve estar em negrito.
2. No bloco de notas abra o arquivo matisse.htm. Neste documento digite o seguinte texto:
Henri M atisse
Henri Emile Bernoit M atisse nasceu no ltimo dia do ano de 1869, em Le Cateau, no norte da Frana.
Era filho de um farmacutico e comerciante de gros, que sonhava em fazer do filho um prspero advogado.
Sendo que:
3. No bloco de notas abra o arquivo miro.htm. Neste documento digite o seguinte texto:
Joan M ir
Dois murais de cermica de Joan M ir compem a decorao do edifcio da Unesco em Paris.
Os quadros, feitos sob encomenda por ocasio da inaugurao do escritrio, em 1955 e renderam ao artista o Grande Prmio Guggenheim, de 1958.
Sendo que:
Parte 4
As imagens desse projeto devero ficar armazenadas em um subdiretrio chamado "img" e os caminhos das imagens devero ser dados em relao a esse diretrio.
1. Abra o arquivo vangogh.htm e insira a imagem vangogh.jpg.
Sendo que:
a imagem deve ser inserida logo abaixo do ttulo;
o alinhamento da imagem deve ser o esquerdo <p>;
a imagem deve possuir o atributo alt, com o nome do artista.
2. Abra o arquivo cezanne.htm e insira a imagem cezanne.jpg.

Sendo que:
3. Abra o arquivo matisse.htm e insira a imagem matisse.jpg.

Sendo que:
4. Abra o arquivo klimt.htm e insira a imagem klimt.jpg.

Sendo que:
5. Abra o arquivo miro.htm e insira a imagem miro.jpg. Sendo que:

Parte 5
1. Abra o arquivo index.html e construa nele uma tabela com as seguintes propriedades:
a tabela deve estar centralizada em relao pgina;
deslocamento do texto em relao s bordas da clula igual a 0 (zero);
espaamento entre clulas igual a 0(zero);
sem bordas;
tabela possui um tamanho fixo de 700 pixels de largura;
possui 4 linhas por 1 coluna.
A tabela dever ficar assim:
2. Cada clula da tabela dever conter as seguintes informaes:

Imagem topo.jpg
Altura da clula de 30 pixels, cor de fundo da clula #FFCC00, alinhamento direita.
Digite os textos Van Gogh | Paul Czanne | Henri Matisse | Gustav Klimt | Joan Mir. Os textos devem estar em negrito.
Altura da clula de 300 pixels e cor de fundo #FFFFFF.
Imagens baixo.jpg
Parte 6
1. Abra a pgina index.html. Na terceira linha da tabela defina as propriedades do Iframe.
SRC - pgina vangogh.htm;
NAM E - dentro;
WIDTH - 100%;
HEIGHT - 100%;
M ARGINWIDTH - margem esquerda 0;
M ARGINHEIGHT - margem superior 0;
ALIGN - alinhado ao meio;
SCROLLING - barra de rolagem automtica;
FRAM EBORDER - borda 0;
2. Ainda na pgina index.html altere o destino dos links, para que eles possam abrir suas pginas dentro do Iframe (dentro).
Parte 7
1. Crie um arquivo com o nome contato.htm. Nesta pgina ser criado um formulrio contendo trs campos, alm de o boto enviar. A pgina segue as mesmas
configuraes das demais pginas internas feitas anteriormente (cor de fundo e margens).
Campo de texto chamado nome, size 50;
Campo de texto chamado email, size 50;
Campo de textarea chamado comentario, 2 linhas e 50 colunas;
Boto de enviar, com o value Enviar;
2. Na tag <form> que se inicia necessrio configurar o mtodo e o caminho do CGI que ir processar o formulrio. Verifique o caminho nas pginas de instruo
do servidor.
3. Uma vez montado o formulrio necessrio inserir nele alguns campos hidden, para o controle do processamento no servidor. Os campos hidden a serem
inseridos esto de acordo com as especificaes do servidor gratuito (br.geocities.com) onde o projeto ficar hospedado.
Campo hidden contendo o login.
Campo hidden contendo o ttulo do email.
Campo hidden especificando o endereo da pgina de confirmao.
Campo hidden contendo os campos nome e email como obrigatrios.
4. Crie uma nova pgina e salve-a com o nome confirma.htm.
Defina margem esquerda e margem superior igual a 0 (zero);
Dentro desta pgina insira o ttulo Confirmado;
5. Crie um novo link na pgina index.htm, apontando para a pgina contato.htm.
Parte 8
1. Publique na Internet o projeto de web site elaborado nas atividades utilizando um programa de FTP. Teste o site antes de publicar.
Parte 9
1. Formate o arquivo index.htm (feito anteriormente) com estilos CSS, sendo:
a. Body - Cor de fundo: #003366 e todas as margens: 0px
b. A - Cor: #003366, fonte: Verdana e tamanho: 10pt
2. Crie uma folha de estilos CSS, com as seguintes configuraes:
a. Body - Cor de fundo: #FFFFFF, todas as margens: 15px e fonte: Verdana
b. H1 - Cor: #003366 e tamanho: 16pt
c. P - Tamanho: 10pt
d. Salve com o nome artistas.css
3. Aplique a folha de estilos em cada pgina dos artistas, usando o mtodo de link para pgina externa.
Parte 10
1. Com base nos conhecimentos adquiridos nas ltimas unidades, criaremos um documento formatado com regras de CSS avanado. Para isso pea para o seu
professor o arquivo historia.html e a imagem de fundo e faa a formatao para que ele fique como a figura:
2. Utilize para isso classes, pseudoclasses, formatao de tags e declaraes abreviadas.

3. Quando finalizado, salve novamente o documento e faa os testes nos navegadores IE e Firefox.
Parte 11
1. Em um arquivo novo do bloco de notas, criar um documento XHTM L vlido (com Doctype Transitional). Esse documento deve conter o ttulo da pgina "M estres
da Pintura | Os maiores artistas reunidos na web".
Salvar o documento com o nome "tableless.htm".
2. No arquivo "tableless.htm" crie 5 divs dentro do body, sendo:
a primeira com o nome "geral";
a segunda filha da primeira div, com o nome "topo";
a terceira filha da primeira div, com o nome "menu";
a quarta filha da primeira div, com o nome "conteudo";
a quinta filha da primeira div, com o nome "baixo".

3. Para o contedo desse exerccio, sero colocados todos os textos das pginas dos mestres da pintura dentro de um mesmo documento. Abra o arquivo
"tableless.htm" e copie e cole o texto dos 5 artistas, sendo:
o contedo deve ser colocado dentro da div correta;
o nome do artista como cabealho 2 (h2);
o negrito dos pargrafos com a marcao <strong> ao invs de <b>.
4. Insira cada imagem dos artistas logo aps o ttulo com o nome (dentro do pargrafo). No use o alinhamento da tag img (esse alinhamento ser feito com CSS)
5. Na div topo deve ser colocado o ttulo (h1) da pgina. O ttulo "M estres da Pintura | Os maiores artistas reunidos na web".
6. Insira um menu, com links vazios na div correta. Os itens do menu devem ser:
Van Gogh, Paul Czanne, Henri M atisse, Gustav klimt e Joan M ir;
o nome do artista como cabealho 2 (h2);
o negrito dos pargrafos com a marcao <strong> ao invs de <b>.
Salve novamente o documento. Isso conclui a parte XHTM L do exerccio, que deve ficar como a figura a seguir:
Parte 12
1. O CSS responsvel pela formatao do documento XHTM L tableless.htm ser montado em outro arquivo. Esse arquivo deve ser salvo com o nome de estilos.css,
na mesma pasta do documento XHTM L.
2. Sero criados seis estilos (a princpio) nessa folha de estilo, sendo:
* (asterisco), com os atributos de margem e preenchimento iguais a zero. Isso evita declarar vrias vezes o mesmo atributo, pois o "*" controla todas as tags
do XHTM L;
#geral, com os atributos largura igual a 700px e margens superior e inferior iguais a 0px. As margens esquerda e direita devem ser definidas como "auto",
centralizando assim a div geral na janela do navegador;
#topo, com os atributos altura igual a 110px;
#menu, com os atributos largura igual a 130px e flutuando para a esquerda;
#conteudo, com o atributo margem esquerda igual a 140px (10 pixels a mais da largura do menu, ficando um pouco distante da outra caixa);
#baixo, com os atributos altura igual a 70px e com ambas as flutuaes limpas;
3. Para que o CSS faa efeito no XHTM L necessrio aplicar a folha de estilo. Utilize o mtodo de vnculo, visto anteriormente na unidade III.
Salve novamente ambos os documentos.
Parte 13
1. Abra o arquivo estilos.css e atualize os estilos, sendo:
na div topo, colocar a imagem de fundo topo.jpg, a cor de fundo #FFCC00 e sem repetio;
na div baixo, colocar a imagem de fundo baixo.jpg, sem repetio;
2. Crie novos estilos, sendo:
um estilo para as listas do menu, exibindo-as em linha e sem o marcador;
um estilo para os links do menu, configurando:
cor de fundo #FFE797;
cor #000000 ;
tamanho do texto 8 pontos;
sem sublinhado;
exibido em bloco;
preenchimento 4px;
borda inferior de 2px, slida e de cor #003366;

um estilo para o estado sobre do link, modificando a cor do fundo para #B2D1E5.
3. Para finalizar o exerccio sero feitas algumas configuraes da exibio do contedo (fontes, cor de fundo da pgina, preenchimentos e cores de ttulos). So
elas:
atualize o elemento "*", colocando como fonte a famlia "Trebuchet M S", Arial e sans-serif;
modifique a cor de fundo da pgina para #003366;
modifique o h1 do topo para que a exibio seja nenhum (none);
modifique os h2 do contedo para que tenham:
cor #003366;
tamanho 14pt;
preenchimento superior 20pt;
limpar a flutuao direita.
M odifique os pargrafos do contedo para que tenham:
tamanho 10pt;
preenchimento direito e inferior 20pt.
M odifique as imagens do contedo para que flutuem direita
Salve novamente o documento. Isso conclui a parte CSS do exerccio, que deve ficar como a imagem a seguir:
Glossrio
A
ACRNIMO - Os acrnimos so abreviaes. Tornaram-se palavras amplamente usadas na Internet, principalmente nos grupos e listas de discusso em ingls. So
palavras derivadas das letras iniciais de uma frase ou dilogo. Por exemplo, IM HO tradicionalmente usado para "In M y Humble Opinion" - "Em M inha Humilde
Opinio", ASP, que usada para "As Soon As Possible" - "O mais rpido possvel".
AD (ADVERTISEM ENT) - Anncio, Banner de publicidade.
AD CAMPAIGNS - Qualquer esforo para aumentar o nmero de visitantes do seu site. Geralmente, mas nem sempre, associada com a insero de Banners em
outro site, em que os visitantes possam clicar e serem dirigidos para o seu site. Como toda Campanha Publicitria caracterizada por uma data de incio e outra de
fim e por um custo, para a durao total da campanha.
AD CLICKS - Um click (feito pelo visitante) em qualquer publicidade (banner) que o leve de um site para outro (atravs de um hiperlink).
AD VIEWS - Qualquer pgina web que contenha uma mensagem publicitria (banner), vista por um visitante. Desde que o visitante a veja, ele pode clicar nela.
Podem existir mais do que uma M ensagem Publicitria em uma pgina, isto um ad view se refere ao ato de ver as publicidades existentes em uma pgina.
AD-HOC QUERY - Consulta eventual. Qualquer consulta que no possa ser previamente determinada, antes do momento da consulta ser emitida. Uma consulta que
consiste em SQL construdo dinamicamente, em geral por ferramentas de consulta residentes na estao de trabalho do usurio final.
AD-HOCK QUERY TOOL - Ferramenta de consulta eventual.
ADO - Abreviatura de ActiveX Data Objects. Interface criada pela M icrosoft para acessar bancos de dados relacionais. Em comparao com padres anteriores, o
ADO mais amplo e trabalha com dados de diferentes tipos, inclusive pginas HTM L, planilhas e outros documentos.
ADSL - Sigla de Asymmetric Digital Subscriber Line. uma nova tecnologia que possibilita a transmisso de dados, em altas velocidades, utilizando cabos telefnicos
comuns.
O sistema trabalha com velocidades assimtricas, ou seja, diferentes em cada sentido, e, por essas caractersticas, promete facilitar a vida dos usurios de
Internet. No downstream (trfego de dados na direo do usurio), a ADSL atinge de 1,5 a 9 megabits por segundo (M bps). E no upstream, as taxas vo de 16 a 640
kilobits/segundo (Kbps). necessrio instalar modems ADSL nas duas pontas. No Brasil, a tecnologia no est disponvel comercialmente.
Alias - Significa segundo nome, ou apelido. Pode referenciar um endereo eletrnico alternativo de uma pessoa ou grupo de pessoas, ou um segundo nome de
uma mquina. tambm um dos comandos bsicos do Unix.
APACHE - Programa Servidor de pginas HTM L, escrito originalmente para ambientes UNIX, depois LINUX. um dos mais conhecidos e confiveis servidores WEB e
alem disso GRTIS.
APPLET - Programa escrito para rodar dentro de outro programa (por exemplo, macros do Word ou do Excel). Um applet no pode ser executado de forma
autnoma. Os applets escritos em Java, responsveis por boa parte da dinmica da Web, em geral rodam no ambiente do browser.
ARPANET (Advanced Research Projects Agency Network) - Rede de longa distncia criada em 1969 pela Advanced Research Projects Agency (ARPA, atualmente
Defense Advanced Projects Research Agency, ou DARPA) em consrcio com as principais universidades e centros de pesquisa dos EUA, com o objetivo especfico de
investigar a utilidade da comunicao de dados em alta velocidade para fins militares. conhecida como a rede-me da Internet de hoje e foi colocada fora de
operao em 1990, posto que estruturas alternativas de redes j cumpriam seu papel nos EUA.
B
BACKBONE - Espinha dorsal. Estrutura de nvel mais alto em uma rede composta por vrias sub-redes. O backbone composto por linhas de conexo de alta
velocidade, que se conectam as linhas de menor velocidade.
BANDWIDTH - Literalmente "largura de banda", uma indicao do volume de dados que podem trafegar por uma conexo medida em Kbps ou M pbs; exemplo:
uma LP de 64 Kbps tem uma bandwidth muito menor que uma linha T1, de 1,54 M bps.
BUSINESS INTELIGENCE - a utilizao de uma srie de ferramentas para coletar, analisar e extrair informaes, que sero utilizadas no auxlio ao processo de
gesto e tomadas de deciso de empresas e organizaes. Esse nome foi escolhido como metfora das decises governamentais baseadas em espionagem e anlise
de dados (caso da CIA)
BUSINESS TO BUSINESS - B2B - o nome que se d a transaes comerciais entre empresas, mediadas pela Internet.
BUSINESS TO CONSUMER - B2C - Venda ao consumidor, atravs da Internet.
C
CERN - Abreviatura de COUNSEIL EUROPEAN POUR LA RECHERCHE NUCLEARI, ou seja, Conselho Europeu pela Pesquisa Nuclear. Seu quartel-general, na cidade
europeia de Gneva, foi onde se desenvolveu a WWW, como uma iniciativa para melhorar o modo como os cientistas trocavam dados pela Internet.
COOKIE - M ensagem enviada ao browser por um servidor Web. Normalmente, essa mensagem gravada no micro cliente como um arquivo de texto.
Sempre que o cliente volta a acessar aquele site, a mensagem reenviada ao servidor. O objetivo do cookie identificar o usurio, por exemplo, exibir pginas
personalizadas.
Para isso, o usurio precisa ter fornecido informaes pessoais numa visita anterior ao site.
CRIPTOGRAFIA - Processo que "embaralha" os dados de um documento, seguindo um algoritmo matemtico baseado numa chave de encriptao, de maneira que
no permite que terceiros vejam o contedo de tal documento. O processo se completa quando, na outra ponta, usando o mesmo software, e com a mesma chave
de encriptao, o processo se reverte - a desincriptao - refazendo o documento original.
CLICK THROUGH - Ao clicar em um banner, voc acessa o site do anunciante ou tem acesso a mais informaes sobre o produto ou servio.
CLICK THROUGH RATE - Porcentagem dos visitantes que clicam a M ensagem Publicitria quando de um Ad View. um bom indicador na eficcia da M ensagem
Publicitria.
CLICKS - O nmero de clicks que foram feitos em um dado banner. Pode-se vender uma quantidade determinada de cliques em um determinado banner. como
um carto de telefone, quando acabam os crditos o carto deixa de valer. Por exemplo, podem ser vendidos mil cliques. Ao serem realizados mil cliques neste
banner termina o contrato, que lgico, pode ser renovado.
COTA - uma quantidade de CPM s que se compra, como no caso do carto telefnico.
CPA - Custo Por Ao. Outra forma de cobrana a CPA que cobra por operao bem-sucedida, ou seja, ao ser realizada uma compra ou efetivado um servio
com origem no click do banner. A CPA calculada dividindo-se o produto da multiplicao do custo por cliques pelas operaes bem-sucedidas ou Actions.
Resumindo CPA=CPC*Clicks/Actions.
CPC - Custo por clique. O custo por cliques. calculado dividindo-se o custo por mil banners (CPM ) por Clicks, ou seja, CPC=CPM /Clicks.
CPM - Custo por mil pageviews de um banner.
CRM - Customer Relationship M anagement - Conceito criado para sistematizar e estruturar o relacionamento de uma empresa ou organizao com seus clientes.
Todas as interfaces com clientes (Telemarketing, Site, Vendas, Suporte, etc.) so tratados por uma camada intermediria de software, que centraliza e gerencia
esse relacionamento. Existem vrios softwares disponveis no mercado, h vrios nveis de preo, mas antes de tudo necessrio mudar a forma como a "EM PRESA"
se relaciona com seus clientes, da sua ATITUDE para com os clientes.
D
DIRECTX - Conjunto de regras de programao (API) criado pela M icrosoft. Seu objetivo dar aos programadores de aplicaes grficas - games, em especial formas de acessar o hardware sem saber exatamente qual dispositivo est instalado no sistema. O DirectX proporciona isso mediante a criao de uma camada
intermediria de software que traduz comandos genricos nos comandos especficos para cada dispositivo. Na prtica, a tecnologia DirectX tira partido dos
recursos de acelerao grfica do hardware, o que resulta em ganho de performance em aplicaes multimdia. Essa API tambm suporta as tecnologias USB,
FireWire, AGP e M M X.
DOWNLOAD - Ato de transferir uma cpia de um arquivo em um computador remoto para outro computador atravs da rede, Internet. O arquivo recebido
geralmente gravado em disco no computador local.
DNS - Sigla de Domain Name Server. Designa o conjunto de regras e/ou programas que constituem um Servidor de Nomes da Internet. Um servidor de nomes faz a
traduo de um nome alfanumrico (por exemplo, webmundi.com) para um nmero IP (por exemplo, 200.300.220.1). Por exemplo, no DNS brasileiro, geram-se todos
os nomes terminados em br. Qualquer outro nome ser tambm traduzido pelo mesmo DNS, mas a partir de informao proveniente de outro DNS (isto se essa
informao no tiver sido previamente obtida).
E
E-BUSINESS - Nome que se d a transaes e comrcios realizados eletronicamente atravs da Internet.
E-COMMERCE - Nome que se d ao sistema comercial utilizado por uma empresa utilizando a Internet para e-business (muitas vezes um sinnimo do outro).
EDI - Sistema de transferncia eletrnica de dados entre empresas.
F
FAQ (Frequently Asked Questions) - Questes Perguntadas Frequentemente. um texto que pretende responder, dentro de uma determinada matria, a
questes colocadas frequentemente pelos usurios.
FIREWALL - Hardware e Software que formam um sistema de proteo que impede a entrada de estranhos em redes privadas ligadas a Internet. (Intranet).
FREEWARE - Software que distribudo livremente, qualquer software grtis, podendo ser descarregados pela web via FTP, CD-ROM s promocionais entregues
junto com jornais ou revistas, etc.
FTP (File Transfer Protocol) - Protocolo de Transferncia de Arquivos. Permite transferir arquivos e programas de uma mquina remota para a sua e vice-versa na
Internet. o processo pelo qual o usurio pode ter acesso a inmeros "depsitos" de arquivos (texto, imagens, sons e programas) situados em computadores
remotos de instituies pblicas e privadas.
G
GATEWAY - Conjunto de hardware e software que realiza a converso dos protocolos de comunicao entre redes diferentes, permitindo que as mesmas se
interliguem de forma transparente para o usurio.
GOPHER - Sistema baseado em texto (isto : no grfico) para navegao na Internet, no qual o usurio v menus que indicam arquivos disponveis em diferentes
computadores da rede. Era intensamente usado nas origens da Internet, passando por certo abandono com a exploso da WEB (a parte grfica da Internet).
H
HACKER - Pessoa com grande conhecimento de informtica, que se utiliza desses conhecimentos para "entrar" em servidores de rede (na Internet ou fora dela)
sem autorizao dos responsveis, o que causa nessas pessoas uma grande sensao de poder; em geral desenvolve seus prprios programas de invaso de sistemas,
e no gosta de se utilizar programas prontos, tipo "receita de bolo".
HIPERLINK / HIPERMDIA - So as palavras e/ou figuras que aparecem em destaque nas pginas na web que levam a outros lugares na rede. Pode tambm fazer
tocar um som, carregar um arquivo e assim por diante. Nesses casos normalmente referenciados como links de hipermdia.
HIPERTEXTO - As pginas que aparecem na janela dos Browsers so resultado de cdigo em hipertexto. Essas pginas podem conter texto em diferentes tamanhos
e estilos, figuras e, o que as define como hipertexto, a capacidade de levar, de forma no linear a outro lugar no sistema, atravs de um conjunto de hiperlinks.
HIT - Quando algum v uma pgina web, um "hit" registrado pelo sistema onde a pgina est armazenada.
HOMEPAGE - como chamada a pgina de abertura de um servio ou de uma pgina pessoal. Da homepage, voc pode acessar outras pginas atravs dos
hiperlinks.
HOTLIST - Lista de sites preferidos em antigos navegadores web. Hoje so mais conhecidos como bookmarks.
HOST - Computador principal num ambiente de processamento distribudo. Computador central que controla uma rede. Na Internet qualquer computador ligado
rede, no necessariamente um servidor.
I
IP (Internet Protocol) - Protocolo responsvel pelo roteamento de pacotes entre dois sistemas que utilizam a famlia de protocolos TCP/IP desenvolvida e usada na
Internet. o mais importante dos protocolos em que a Internet baseada.
J
JPEG - Abreviatura de Joint Photographic Experts Group, especfico para fotografias tem uma das maiores taxas de compresso de dados; entretanto essa alta
taxa obtida atravs de um algoritmo que gera perdas, isto , a imagem compactada por tal mtodo possui perda de informao, porm usada para fotografias,
que aceitam bem essas perdas, que os especialistas consideram extremamente aceitvel, principalmente considerando as altas taxas de compresso (que chegam
facilmente a mais de 13:1).
JPG - Uma das variantes do JPEG um dos dois nicos formatos de imagens suportados pela linguagem HTM L (o outro formato o GIF).
K
KBPS - Unidade de medida que representa um milhar de bits por segundo; (na verdade 1.024 bits por segundo).
KERNELL - Ncleo de um sistema operacional responsvel pela execuo das funes bsicas desse sistema. O Kernell uma das partes do sistema operacional
que est sempre residente em memria, e tambm a responsvel pelo carregamento dos demais mdulos sempre que for necessrio.
L
LAMER - Hacker principiante, mas que se acha o mximo. So em geral desprezados pelos verdadeiros hackers, j que esto sempre tentando fazer coisas que no
sabem ainda, mas se gabam para o mundo.
LAN - Local Area Network (rede de rea local) uma rede de equipamentos conectados, dentro de uma pequena rea de extenso, atravs de cabos coaxiais ou
de par tranado. Uma LAN criada basicamente para compartilhar recursos, de disco e de perifricos, e garantir a unicidade dos dados crticos de uma empresa.
LINGUAGEM SCRIPT - So linguagens de programao cujo cdigo fonte interpretado pelo programa em tempo execuo. Por exemplo: o browser interpreta
HTM L, Javascript e Vbscript.
LOG - Arquivo, em geral no formato texto, no qual so registrados eventos ocorridos num computador, num determinado perodo de tempo. Em geral os LOGs
registram um subconjunto do que ocorre no equipamento, subconjunto esse que interessa ao software para registro sobre suas prprias aes.
LOG IN - Incio do estabelecimento de uma conexo de um equipamento numa rede, local ou no.
LOG OFF - Trmino de uma conexo de um equipamento numa rede, local ou no.
M
MICREIRO - Apelido - de tom depreciativo - dado a uma pessoa, profissional ou no, que trabalha apenas em microcomputadores, no sendo um profissional de
mquinas de grande-porte. Em geral os profissionais de mquinas de grande-porte tm um pouco de desprezo pelos "micreiros".
MIDI - Acrnimo de M usical Instrument Digital Interface o conjunto de padres utilizados para a comunicao entre um computador e os instrumentos
eletrnicos de msica.
MAILING LIST - Uma lista de assinantes que se correspondem por correio eletrnico. Quando um dos assinantes escreve uma carta para um determinado
endereo eletrnico (de gesto da lista) todos os outros a recebem, o que permite que se constituam grupos (privados ou no) de discusso atravs de correio
eletrnico.
MODEM - Contrao da expresso M Odulador-DEM odulador, representa um dispositivo que, acoplado a um computador, permite a conexo de um micro a outro,
ou a uma rede, de forma remota, pela linha telefnica. O M odem converte os sinais digitais de um computador em sinais analgicos, e vice-versa, entendveis pelo
sistema de telefonia. Os modems sempre trabalham aos pares, um em cada ponta da conexo.
N
NAVEGAO - O ato de ir visitando diversas pginas da Internet, no necessitando ser uma tarefa que siga um "mapa" da "viagem". A navegao pela WEB sempre
feita atravs de um browser, e se d pelo clicar de palavras, ou frases especialmente marcadas (so os links).
O
OFF-LINE - Termo que designa o estado de um computador quando este no est ligado a outro computador, mas est executando tarefas semelhantes, exceto
quanto a consultas (queries) e atualizaes, como se estivesse em tal situao.

OLR - Abreviatura de Off-Line Reader (Leitor Off-Line). Programa que permite ao usurio fazer uma rpida conexo com um site que fornece homepages, notcias,
etc., gravando-as em disco para que o usurio possa l-las mais tarde, j desconectado do outro computador, e, portanto economizando ligaes telefnicas.
ON-LINE - Termo que designa o estado de um computador quando este est ligado a outro computador, pertencente ou no a uma rede, seja via placa de rede,
seja - como o mais comum - atravs de modem.
P
PAGEVIEWS - a pgina que est aparecendo na sua tela. Por exemplo, voc entrou neste site (www.clm.com.br). Abriu a pgina principal, 1 page view, a voc
clicou no link WebTrends, segunda page view. Se clicar em outro link ou voltar para uma das duas pginas anteriores ser a terceira pageview.
PLUG-IN - Software que acoplado ao browser e que serve para ampliar sua capacidade funcional. Em geral executam tarefas especficas, tais como:
apresentao de vdeos, execuo de msicas, ou utilizao de desenhos tridimensionais.
PLUG & PLAY - Caracterstica implementada pela M icrosoft, para o seu Sistema Operacional Windows 95, de tal maneira que o prprio sistema encontra automaticamente - cada novo perifrico ou placa, instalado no micro, dispensando o usurio da maior, se no toda, parte da configurao tcnica dos dispositivos
que colocamos em nossos micros.
PPP - Acrnimo de Point to Point Protocol, um dos recursos de software que permite a um computador se utilizar do protocolo TCP/IP para conexes atravs
de uma linha telefnica comum.
POP - Acrnimo de Post Office Protocol (protocolo de agncia de correio) protocolo de e-mail utilizado para armazenar a correspondncia de um usurio, at
que ele v retir-la para trazer para seu computador.
Q
QUERY - Procedimento de consulta a uma informao em um banco de dados relacional.
R
REAL AUDIO - Programa que habilita a escuta de estaes de Rdio atravs de uma conexo Internet.
S
SMTP - Acrnimo de Simple M ail Transfer Protocol o protocolo utilizado para envio dos e-mails, do computador do usurio para o servidor de mensagens da
Internet. Faz parte do conjunto de protocolos TCP/IP.
SUPER-VGA - Evoluo do padro VGA, permite resolues de at 1.280 x 1.024 pixels. Alm disso, com as placas de vdeo atuais, com at 8 M Bytes de memria de
Vdeo-RAM , permitem exibir mais de 16 milhes de cores simultneas na tela.
SERVIDOR - Numa rede, um computador que administra e fornece programas e informaes para os outros computadores conectados. No modelo clienteservidor, o programa responsvel pelo atendimento a determinado servio solicitado por um cliente. Servios como WWW, POP, SM TP, FTP e outros so providos
por servidores. Referindo-se a equipamento, o servidor um sistema que prova recursos tais como armazenamento de dados, impresso e acesso dial-up para
usurios de uma rede de computadores.
SESSO DE VISITANTE - (Visitor Session): Sesso de atividades (todos os hits) de um visitante do web site. Um visitante nico determinado pelo endereo IP ou
cookie. Por padro, uma sesso de visitante finalizada quando um visitante estiver inativo por mais de 30 minutos. Este perodo pode ser ajustado nos softwares da
Webtrends para as peculiaridades de cada site, no painel General no campo Options, do M dulo Web Traffic Analysis. uma forma de se medir as visitas a um site.
SHAREWARE - Software que distribudo livremente, desde que seja mantido o seu formato original, sem modificaes, e seja dado o devido crdito monetrio ao
seu autor. O propsito do shareware que a pessoa use o programa por um determinado tempo (perodo de teste) que varia de programa para programa
(geralmente de 7 a 30 dias). Aps esse perodo de tempo, se quiser continuar utilizando o programa, o usurio tem a obrigao moral (e legal) de enviar a taxa de
registro cobrada pelo autor. Quando feito o registro, normal receber-se um manual impresso do programa, liberao de funcionalidades bloqueadas, assim como
possibilidade de assistncia tcnica e e-mails informando de novas verses, a qual se tem direito de atualizao gratuito ou perante o pagamento de uma taxa muito
mais baixa do que seu custo de registro original.
SIGNATURE - Assinatura digital. M eio de identificar inequivocamente um usurio na Internet. A assinatura digital tem que ser certificada por algum site
especializado, por exemplo: Verysign.
T
T1 - Linha de dados privativa, com bandwidth de at 1,54 M bps, que alugada a uma operadora de telefonia (TELESP, TELERJ, etc.) para uso exclusivo em
transmisso de dados.
T3 - Linha de dados privativa, com bandwidth de at 45 M bps, que alugada a uma operadora de telefonia (TELESP, TELERJ, etc.) para uso exclusivo em
transmisso de dados.
TCP/IP - Protocolo de comunicao (Transmission Control Protocol - Internet Protocol) utilizado pelas mquinas da Internet, sejam os servidores, sejam as
estaes dos usurios, que capacitam qualquer tipo e modelo de mquina a "falar" com as demais, usando essa linguagem nica para a comunicao entre si. A parte
TCP deste protocolo define como feita a diviso dos dados em pacotes para serem transmitidos rede, e como esses pacotes devem ser remontados no seu
destino. A parte IP deste protocolo responsvel pela manipulao do endereamento de cada pacote, garantindo que eles cheguem ao destino correto.
TELNET - Um protocolo de comunicao para conexo a outros computadores, seja localmente, seja atravs da Internet.
U
UNIX - Um dos mais populares sistemas operacionais de rede do mundo. Foi sob o sistema UNIX que a Internet e a WEB foram desenvolvidas. um sistema
amadurecido, muito estvel e confivel. M esmo hoje a maioria dos Servidores Web roda o UNIX.
UPLOAD - Ato de carregar uma cpia de um programa, de uma pgina WEB, ou de todo um site, para um servidor (que pode ser uma mquina da Internet), desde
o micro (disco rgido) do usurio. a operao inversa denominada DOWNLOAD.
URL - Endereo de um recurso, pgina, ou site, na Internet. Abreviao de Unified Resource Locator (Localizador de Recursos Unificado) o "endereo" de
qualquer recurso que est disponibilizado na Internet. Com a estrutura [protocolo://tipo.dominio.organizacao], como no exemplo: http://www.tripod.com, permite
que qualquer mquina acesse tal servidor e/ou site, sem se importar (do ponto de vista do usurio) onde est - fisicamente - localizado tal servidor. Com o aumento
do volume de trfego pela Internet, principalmente devido a WEB, alguns pases esto adicionando duas letras parte da organizao na URL; como exemplo no
Brasil a maioria dos servidores possuem a extenso .br ao final do cdigo da organizao, como no exemplo: http://www.quark.com.br.
USENET - Contrao da expresso USEr NETwork (rede de usurios), representa um grupo de sistemas de acesso pblico, na Internet, que permite que se
troquem mensagens dentro de grupos de discusso.
UUENCODE - M todo de codificao no qual um arquivo binrio convertido em arquivo ASCII.
V
VESA - Acrnimo de Vdeo Electronics Standards Association (Associaes de Normas para Videoeletrnico); rene os principais fabricantes de monitores de vdeo
e definiu os padres VL-Bus e tambm VGA e Super-VGA.
VGA - Acrnimo de Vdeo Graphics Array um padro antigo de exibio de dados na tela. Sua resoluo mxima de 640 x 480 pixels. Hoje s utilizada por
compatibilidade com programas mais antigos.
VRUS - Em computao designa um programa contendo em seu cdigo rotinas cuja finalidade bsica de disseminar, como seu homnimo biolgico. Vrios
sintomas so caractersticos da presena de um vrus de computador, tais como: diminuio do desempenho da mquina, apagamento inexplicvel de arquivos,
diminuio de memria RAM livre, etc. Um bom site para descobrir mais sobre Vrus de computador, em portugus est na URL
http://www.geocities.com/Eureka/5301/.
VRML - Acrnimo de Virtual Reality M odelling Language, uma linguagem de programao que estende a capacidade da linguagem HTM L, permitindo, por
exemplo, se construir sites simulando ambientes tridimensionais (3D) interativos na Web.
W
WAN - Acrnimo de Wide Area Netwaork (rede de rea larga) uma rede de computadores que interliga entre si diversas redes locais. A rea de abrangncia de
uma WAN pode ser maior que uma cidade, na verdade pode representar uma rede mundialmente disseminada.
WANNABE - Hacker principiante que executa apenas "receitas de bolo", isto : programas prontos para descobrir senhas, ou para invadir sistemas. No consegue
ainda desenvolver suas prprias tcnicas.
WEB - A parte grfica da Internet, responsvel pela exploso da Internet, antes restrita apenas a usurios localizados em Universidades e nos meios militares
americanos. Baseia-se na linguagem HTM L para conseguir criar a interface grfica necessria.
WEBCRAWLER - Site na Web que funciona como um diretrio de endereos URL. O usurio pode realizar pesquisas atravs de algumas palavras-chave, e o
programa faz uma busca em enormes bases de dados compiladas pela empresa que sedia o WebCrawler.
WEBMASTER - Pessoa responsvel pela operao de um site ou um grupo de sites. Tambm utilizado para designar o responsvel pela operao de um Servidor
Web.
WEBTV - M todo de navegao pela web que utiliza um aparelho de TV, e uma "set top-box" que transfere os sinais do cabo de TV por assinatura para visualizao
na TV. A WebTV mais rpida que uma conexo por modem, e para quem no quiser usar um computador s para navegar na Internet muito mais barato. No Brasil
s existem experincias neste sentido, muito embora esteja em franco crescimento nos EUA.
WEBTRENDS - Famlia de softwares lderes em SITE M ETRICS (medio de parmetros de um site), principalmente Anlise de Trfego, quantificao e qualificao
de visitantes, gerenciamento do site, alerta e monitoramento, etc.
Z
ZIP - Extenso que indica um arquivo compactado atravs de um programa do tipo PKZIP ou WINZIP. o padro mais utilizado no mundo da informtica para
diminuio do tamanho de arquivos. seguido de perto pelo padro ARJ.
ZMODEM - Protocolo de comunicao assncrona de dados, utilizado em aplicaes de acesso remoto entre modems. Este protocolo o mais rpido, mais flexvel
e confivel, para transmisso de dados entre microcomputadores e possui correo de erros de transmisso. S como comparao: o uso do XM ODEM , o protocolo
anterior, causa perda total dos dados recebidos se a conexo cair a qualquer momento, durante a transferncia, com o ZM ODEM a transferncia executada a
partir do ponto em que parou a recepo dos dados na seo
anterior.
Bibliografia
Livros
GIM ENES, Lucas Correa. CAM ARGO, Daniel Furtado. Dreamweaver CS5.5 e HTML com CSS e Tableless. People Educao, 2012.
Anderson Vieira / Alta Books. Macromedia Dreamweaver 8: Guia Prtico e Visual
Silvana Tauhata Ynemine / Visual Books. Dreamweaver 8
Fabricio M anzi / rica. Dreamweaver 8: Criao de Sites e Loja Virtual
CARVALHO, Alan. Desenvolvendo Sites Profissionais: HTML 4 e CSS 2. Editora Book Express.
PRATES, Rubens. HTM L Guia de consulta rpida. Editora Novatec.
LEM AY, Laura. Aprenda em 1 semana HTML 4. Editora Campus.
M ULLEN, Robert. HTML 4 Guia de referncia do programador. Editora Cincia M oderna.
Links
http://ecelib.cuc.edu.cn/
http://del.ufms.br/tutoriais/w95tut/capitulo2.htm
http://www.lipsum.com/feed/html
http://www.ebah.com.br/content/ABAAAfEPEAA/conceitos-basicos-html-css?part=2
http://www.w3.org
http://www.construindoseusite.com.br/css/css.shtml
http://www.lynda.com
http://www.lipsum.com/feed/html
http://www.ebah.com.br/content/ABAAAfEPEAA/conceitos-basicos-html-css?part=2
http://helpx.adobe.com/dreamweaver/using/whats-new-cs6.html
http://www.adobe.com/products/cs6/faq.edu.html#
http://www.adobe.com/devnet/dreamweaver/samples.html
http://www.adobe.com/devnet/dreamweaver/articles/dreamweaver_custom_templates.html
http://tv.adobe.com/vi+f1592v1768

12 Dreamweaver Cs6 Neweducation Sistema de Ensino

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

12 Dreamweaver Cs6 Neweducation Sistema de Ensino

Încărcat de

Drepturi de autor:

Formate disponibile

Dreamweaver CS6

Autor(a): Daniel Furtado Camargo

Aula 01 - Interface do Dreamweaver CS6

Tela Inicial do Adobe Dreamweaver CS6

rea de trabalho do Dreamweaver CS6

Menu do Adobe Dreamweaver CS6

Painel de Estilos CSS

Aula 02 - Configurao do Site

apresentado um assistente para a criao da estrutura do site:

Configurao do site para DW_CS6

Painel Files com arquivos e pastas

Removendo um Site Local

Unidade II - Elementos Bsicos de HTML e Desenvolvimento do Site

Criando um novo documento

Criando um novo documento

Mesmo uma pgina em branco j vem preparada com o html padro

Algumas dicas para a criao de um texto correto:

Propriedades da pgina- Aparncia (CSS)

Propriedades da pgina - Links

Propriedades da pgina - Cabealhos

Propriedades da Pgina- Titulo/codificao

Propriedades da Pgina- Imagem de Rastreamento

Aula 04 - Criao de uma Pgina Bsica

Exemplo de delimitao do cabealho e corpo de uma pgina

Identifica o texto a ser exibido na barra de ttulos da pgina.

A imagem original e o resultado de sua insero como fundo da pgina

leftmargin - margem esquerda.

Inspetor de Propriedade - Texto

Editar listas de fontes

Barra de Insero - Texto

Aula 07 - A Linguagem CSS

Exemplo de mtodo In-Line

Este um titulo HTM L usando CSS</h1>

Exemplo utilizando mtodo Folhas de estilo Incorporadas

Exemplo utilizando mtodo Externa

Exemplo utilizando mtodo Importao

Exemplo de tag redefinida

Exemplo da propriedade text-indent

Exemplo da propriedade text-align

Exemplo da propriedade letter-spacing

Exemplo da propriedade text-transform

Exemplo da propriedade line-height

Aula 08 - Formatao com CSS

Painel CSS Styles

atravs do inspetor dinmico de CSS, tambm encontrado no painel Estilos CSS.

Aula 09 - Classes em CSS

Novo Regra CSS

clique no menu Janela / Estilos CSS, se o painel Design no estiver aberto;

Anexar folha de estilos

5. Salve o arquivo e visualize no navegador.

Aula 10 - Abreviaes Comuns do CSS

border-top-style: solid; /* Estilo da borda superior */

Aula 11 - Tags, Classes e Seletores Especiais em CSS

<a href="http://www.twitter.com" target="_blank">Twitter</a>

Menu Inserir Imagem

Selecionar origem da imagem

Painel Arquivos (Files)

importante que o painel Arquivos (Files) esteja aberto. Para isso:

Inspetor de Propriedades - Imagem

Menu Inserir - Tabela

Barra de Insero - Tabela

Seleo de Clula - Linha

Seleo de Clula - Linha

Algumas propriedades da tabela podem ser ajustadas atravs do inspetor de propriedades: