12 - Dreamweaver CS6

Transcrição

Dreamweaver CS6
Autor(a): Daniel Furtado Camargo
Atualização: Aline Alves Salles
Código: 141012A
Julho/2013
Copyright© 1996/2013, NEWEDUCATION Sistema de Ensino para Educação Profissional. Todos os direitos reservados desta publicação foram reservados na forma da lei
à NEWEDUCATION Sistema de Ensino para Educação Profissional.Proibida qualquer reprodução parcial ou total, seja mecânica, eletrônica, fotocópias, gravação ou
outros meios, sem prévia autorização por escrito da NEWEDUCATION Sistema de Ensino para Educação Profissional.
www.neweducation.com.br
Apresentação
O Adobe Dreamweaver CS6 é um excelente editor profissional de HTM L para criação de sites para Web. Ele oferece facilidade para projetar, desenvolver e
gerenciar sites.
Através de um ambiente visual amigável o Adobe Dreamweaver CS6 permite criar sites complexos de forma rápida sem a necessidade de escrever uma linha de
código.
Na versão CS6 a Adobe incluiu várias ferramentas e recursos que são essenciais para tornar-se um profissional da área. A nova interface de desenvolvimento do
software agiliza o trabalha ganhando velocidade na produção. O aprimoramento do recurso CSS no Adobe Dreamweaver CS6 trás agilidade para todo e qualquer tipo
de site.
O Adobe Dreamweaver CS6 permite construir aplicativos dinâmicos para Web com suporte para bancos de dados, porém neste material vamos trabalhar apenas
com o design de sites.
HTM L (Hypertext M arkup Language ou Linguagem de M arcação de Hipertexto) é a língua mãe para a publicação de hipertexto na World Wide Web.
Representando um formato não proprietário baseado em SGM L (Standard Generalized M arkup Language - Padrão Genérico para Linguagens de M arcação), 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 história 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 várias maneiras.
O fato de o HTM L depender de autores de páginas e de vendedores que compartilhassem as mesmas convenções acabou motivando o trabalho conjunto na
criação de especificações para a linguagem.
A primeira versão 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 direção da EITF (Internet
Engineering Task Force) com o objetivo de codificar práticas já comuns na época.
Embora nunca tivessem alcançado um consenso geral nas discussões sobre padrões, estes rascunhos levaram à adoção de uma faixa de novas características. Os
esforços do grupo de trabalho do Consórcio WWW para codificar práticas 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 versão 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 conteúdo economizariam tempo e dinheiro precisando desenvolver somente uma versão do
documento.
Versões
Existe um grupo voltado para buscar um mínimo de padronização na Internet, especificamente na World Wide Web.
Este grupo é chamado Word Wide Web Consortium ou W3C e pode ser encontrado no endereço www.w3c.org
O W3C produz o que é conhecido como "Recomendações" para HTM L. São especificações criadas pelos grupos de trabalho W3C e votadas pelos M embros
do Consórcio.
Uma Recomendação W3C indica que foi alcançado consenso entre os membros do consórcio para determinada especificação, ou seja, esta é apropriada
para uso geral.
No momento em que este material está sendo desenvolvido, HTM L 4.01 é recomendada como a versão mais atual da linguagem, trazendo uma série de
novas características:
Suporte a style sheets ou folhas de estilo: é possível controlar cores, fontes e layout das páginas Web através de uma folha de estilo.
Características de internacionalização: o HTM L consegue tratar texto escrito da direita para a esquerda, como por exemplo, texto em árabe e hebraico.
Isto é conseguido através do atributo LANG que pode ser usado com vários marcadores para ajudar o browser a exibir o texto de uma maneira apropriada à
linguagem em questão.
Características de acessibilidade: alguns usuários utilizam-se de sintetizadores de voz ou leitores de Braile quando navegam pela Web. HTM L 4 inclui
características que fazem a Web mais acessível a quem tem problemas de visão ou outras deficiências.
XHTML:
O XHTM L, ou eXtensible Hypertext M arkup Language, é uma reformulação da linguagem de marcação HTM L baseada em XM L. Combina as tags de marcação HTM L
com regras da XM L; este processo de padronização tem em vista a exibição de páginas Web em diversos dispositivos (televisão, palm, celular, etc.). A intenção é
melhorar a acessibilidade.
O XHTM L consegue ser interpretado por qualquer dispositivo, independentemente da plataforma utilizada, pois as marcações possuem sentido semântico para as
máquinas. O HTM L não consegue esta implementação. No entanto, não existem muitas diferenças entre o HTM L e o XHTM L.
Para verificar se uma página XHTM L está bem construída, o melhor método é validar o código através de uma aplicação 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 criação de layouts básicos e avançados.
Trabalhar com CSS, modelos e formulários.
Apresentar os recursos de comportamentos e camadas.
Criar um site durante este módulo.
Apresentação básica do HTM L e CSS.
Ensinar as tags HTM L.
Ensinar as propriedades CSS.
Ensinar Web Standards
Criar um Web Site completo.
Unidade I - Introdução
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 - Configuração 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 atualizações tais como:
Adobe BrowserLab - é um dos novos serviços on-line apresentados pelo CS6 aonde é possível verificar páginas WEB e conteúdo local utilizando de
múltiplas visualizações.
Business Catalyst - serviço que permite realizar criação 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 três opções de layout da área de trabalho:
Código - as janelas de documento mostram a visualização de código como padrão e os grupos de painéis estão 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 primário e todos os painéis
ficam no monitor secundário.
Design - é a maneira que será utilizada neste curso. As janelas de documento e os painéis estão integrados em uma janela com os grupos de painéis
encaixados à direita. Este layout é recomendado para o trabalho como web designer.
Para alterar o layout da área de trabalho:
No menu Janela / Layout do espaço de trabalho,escolha o layout entre as três opções.
Tela Inicial
Ao iniciar o Dreamweaver CS6 é exibida uma Tela Inicial que permite a criação de um novo arquivo ou abrir um já existente, apenas clicando nas opções.
Caso você não queira que essa Tela Inicial seja exibida, marque a opção Não Mostrar Novamente na parte inferior esquerda dessa tela.
Para exibir a tela inicial:
No menu Editar / Preferências, escolha a categoria General e marque Mostrar tela de boas-vindas.
É necessário fechar e abrir o Dreamweaver CS6 para que a alteração 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 Painéis;
F. Estilos CSS;
G. Seletor de Tags;
H. Inspetor de Prioridades.
Barra de Menus
Contém todos os comandos do Dreamweaver CS6.
Menu do Adobe Dreamweaver CS6
Arquivo: opções de manipulação de arquivos, como abrir, fechar e salvar;
Editar: opções de manipulação do arquivo, como copiar, cortar, colar, desfazer editar preferências do software;
Exibir: é possível configurar a visualização do documento inserir réguas, além de opções de zoom;
Inserir: permite adicionar à página, imagens, tabelas, links, formulários, etc.;
Modificar: possibilita configurar as propriedades de uma página, opções de templates, imagens, entre outros;
Formatar: configuram-se tudo relacionado a texto como fonte, alinhamento, tamanho e cor;
Comandos: é possível limpar tags de HTM L, formatar tabelas, organizar o código, etc.;
Site: permite gerenciar a estrutura de um site, verificar links, relatórios, etc.;
Janela: nesse menu estão todas as opções relacionadas à janela do Dreamweaver CS6 como barra de inserção, inspetor de propriedade, comportamento e
opções de layout;
Ajuda: nesse menu estão os arquivos e tutorias de ajuda.
Barra de Ferramentas
A Barra de Ferramentas oferece várias facilidades para criação de páginas (como títulos e visualização de arquivos).
O documento é o local onde é construída a página.
O documento e a barra de ferramentas são apresentados quando se edita uma página. Por isso, clique no menu Arquivo / Novo escolha Página em Branco/HTML
e clique no botão Criar.
Barra de ferramentas
A Barra de Ferramentas contém vários itens: Código, Dividir, Design, Dinâmica, Título, Gerenciador de Arquivos e Auxílios Visuais.
Código: exibe o código-fonte;
Dividir: visualiza o código-fonte e o projeto (Design) na Área de Trabalho;
Design: exibe o projeto;
Validação da W3C: realiza a validação da página 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 código HTM L é gerado automaticamente. Para exemplificar isso digite "Brasil Educação" na Área de Trabalho e clique
no modo Código e veja o "ç" e o "~" como ficaram;
Várias Telas: alteração do tamanho da página;
Atualizar: atualização da página;
Título: define um título para a página (<title> </title>).
Janela do Documento
Visualiza o código-fonte e o projeto (Design) na Área de Trabalho, esta opção só se torna válida quando colocamos na barra de ferramentas o modo Dividir.
Ele faz com que tudo o que eu já esteja fazendo no código fonte, o mesmo já mostre o resultado de como será a página.
Design
Altera o modo de visualização da página 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 visualização auxilia cada tipo de atividade que você executará, já que as configurações da tela inicial são alteradas da maneira de
distribuição mas não na funcionalidade.
Caso queira assistir um tutorial com diferentes áreas de trabalho acesse o link: www.adobe.com/go/lrvid4042_dw_br
Painel
Os painéis podem ser encaixados e combinados conforme a sua necessidade. São 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, comentários, cada um deste objetos é uma tag do HTM L, que são colocadas conforme são inseridas no
corpo da página.
Painel de Inserir
Hyperlink - criação de links;
Link de e-mail - criação de campo para enviar e-mails;
Âncora com nome - criação de uma âncora;
Régua horizontal - inserção de uma linha horizontal;
Tabela - criação de tabelas;
Inserir tag div - inserção de divisórias;
Imagens - inclusão de imagens;
Mídia - inclusão de vídeos;
Widget - inclusão de janelas, botões, menus, ícones, barra de rolagem, etc.;
Data - inclusão de datas
Inclusão do servidor - inclusão de serviços;
Comentário - comentários;
Título (M eta, Palavras-chave, Descrição, Atualiza, Base, Link) - inserção de descrição, links;
Script (Script , Nenhum script) - scripts de utilização;
Modelos -edita e cria um novo modelo, regiões editáveis, repetitivas e opcional;
Seletor de tags - escolhas de diferentes Tags.
Estilo CSS
No painel CSS você consegue verificar os estilos do CSS utilizado na criação da página, como por exemplo, quais as regras e as propriedades.
Painel de Estilos CSS
Resumo para seleção - resumo da seleção;
Regras - regras adotadas do CSS;
Propriedades - propriedades do CSS.
Painel Arquivos
Faz o gerenciamento dos arquivos e pastas, servindo como um atalho na inserção 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 seção você escolhe qual diretório vai acessar e abaixo em Arquivos Locais ele mostra as pastas e arquivos contidos neste diretório.
Seletor de Tags
A Barra de Status oferece várias facilidades para localizar e editar alguma tag - além do tamanho da janela.
Barra de Status
A Barra de Status contém vários 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 seleção do Dreamweaver. É possível também modificar o tamanho dos objetos exibidos no
documento (apenas a visualização é alterada).
Tamanho da Janela: permite definir o tamanho da janela configurando-a para ser compatível aos diversos tamanhos de monitores e também nas dimensões
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 padrão é 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 opções.
A janela da Área de Trabalho não deve estar maximizada, pois desta forma as opções de tamanho não estarão ativas. O tamanho da janela é fornecido como as
dimensões internas da janela do navegador sem bordas, enquanto que o tamanho do monitor está listado entre parênteses. Sendo assim, a opção 536 x 196 (640 x
480, padrão), por exemplo, será o tamanho da janela a ser visualizada na resolução 640 x 480 pixels.
Editar Tamanho da Janela
Ao clicar no Editar/Preferências é aberta a caixa de diálogo Preferências:
Janela Preferências
clique em quaisquer valores de Largura e/ou Altura na lista Tamanhos de Janela e digite um novo valor;
clique no campo Descrição para inserir um texto descritivo sobre o tamanho que acaba de ser definido;
também é possível incluir um novo tamanho, colocando o cursor no espaço em branco abaixo do último valor.
Nesta caixa também é possível configurar:
Velocidade de Conexão: determina a velocidade da conexão (em kilobits per second) utilizada no cálculo do tamanho de download. Enquanto o tamanho
de download da página é 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 código.
A maioria das alterações feitas nas propriedades é imediatamente aplicada à janela do documento. O tipo de elemento selecionado determinará as propriedades
que aparecerão no inspetor de propriedades.
As propriedades exibidas inicialmente para cada elemento são as mais comuns.
Inspetor de Propriedades
Aula 02 - Configuração do Site
Definindo um Site
Um dos principais recursos do Dreamweaver é o seu sistema de organização de páginas - importante para que no momento da publicação não exista nenhum
problema.
Para que seja possível controlar as alterações, criar links, utilizar o ftp e mesmo editar as páginas html, é necessário 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 criação e desenvolvimento;
Público-alvo: quem acessará este site. Esta e outras perguntas o ajudarão a descrever melhor seu consumidor final;
Lápis e papel na mão: crie um esboço, desenhe as várias páginas imaginando o seu visual na tela, posição das fotos, textos, títulos, etc.;
Coleta de informações: faça um estudo prévio, marque reuniões com o seu cliente, converse e discuta soluções com a equipe de desenvolvimento,
pesquise outras fontes de informações;
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á possível acompanhar as etapas do trabalho.
Definir estes itens poupa tempo, organiza e acelera o processo.
Estrutura do Site
A organização 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 ajudarão no desenvolvimento:
Classifique em categorias: coloque informações relacionadas, crie e organize bem as pastas dividindo-as por tema ou categoria;
Pastas de sons e imagens: para facilitar a localização 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 fácil à atualização dos dados;
Nomenclatura: utilize sempre letras minúsculas, sem acentuação e espaços em branco nos nomes de arquivos e pasta que serão publicados. Dessa forma
evitam-se problemas na hora da publicação;
Tudo no mesmo lugar: crie pastas para tudo relacionado ao seu projeto, mesmo o que não será publicado, como e-mails, arquivos originais (PNG, FLA) e o
conteúdo;
Lixeira: crie uma pasta para jogar arquivos não aprovados. Se o seu cliente mudar de ideia, o arquivo não 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 serão gerenciados por
ele. Com isso você terá inúmeras facilidades como: mover um arquivo de uma pasta sem ter que refazer os links do mesmo e verificar links quebrados.
Crie um padrão para as pastas que não serão publicadas. Nesse exemplo, estão com letra maiúscula.
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 botão Novo site.
É apresentado um assistente para a criação da estrutura do site:
Configuração 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 botão 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 várias estruturas de site dentro do Adobe Dreamweaver CS6.
Exemplo disso é desenvolver um site para uma empresa de calçado e outro site para um médico. Ambos os sites serão desenvolvidos no Adobe Dreamweaver CS6, mas
cada um terá a sua estrutura própria. Para isso basta seguir as instruções Criando um site local para a empresa de calçado e depois para o médico.
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 não se deseja mais trabalhar com um site no Adobe Dreamweaver CS6 é possível retirá-lo da lista de sites sem eliminar os arquivos e pastas. Entretanto,
quando um site é removido, todas as informações de configurações são perdidas.
No Adobe Dreamweaver CS6:
marque a estrutura que deseja remover e clique em Excluir o(s) site(s) selecionado(s) no momento.
Modo Avançado
É possível criar um site no Dreamweaver sem a utilização do assistente.
Também é interessante definir a pasta padrão para as imagens utilizadas no site. Para isso, basta clicar no ícone ao lado " Pasta padrão 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 Concluído.
Outra forma de indicar a estrutura do site local:
clique no menu Janela / Arquivo (Caso não esteja aberto este painel);
clique na caixa de lista da esquerda e escolha Dreamweaver CS6.
Adicionando Nova Pasta ao Site Local
A criação de pastas permite organizar as informações. 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 botão direito dentro do Painel Arquivo e escolha Nova Pasta;
digite o nome da nova pasta: aula_01.
Atividades
1. Durante o módulo do Adobe Dreamweaver CS6 serão construídas algumas páginas utilizando os conhecimentos obtidos em cada aula. Essas páginas estarão
divididas em subpasta dentro da pasta raiz DW_CS6. Ao final será feita uma página inicial que integrará todas as páginas desenvolvidas neste módulo.
É importante que a pasta raiz DW_CS6 já esteja criada dentro Adobe Dreamweaver CS6. Caso não 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 Básicos de HTML e Desenvolvimento do Site
Aula 03 - Página
Páginas XHTM L
Criando uma Página em Branco
Texto Semanticamente Correto
Propriedades da Página
Atividades
Aula 04 - Criação de uma página básica
Conceitos Básicos
Estrutura de uma Página
Tipo de Documento
Aula 05 - Texto
Editor de HTM L do Tipo WYSIWYG
Inspetor de Propriedade
Barra de Inserção
Aula 06 - Atividades
Aula 07 - A Linguagem CSS
CSS
Por que usar CSS em Páginas Web?
Conceitos Básicos
M étodos de Uso das folhas de Estilo
M edidas Utilizadas
Cores
Definindo o Tipo de CSS
Propriedades de Texto
Aula 08 - Formatação com CSS
Estilo CSS
Redefinição 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 - Abreviações Comuns do CSS
Abreviações
Abreviação de Font
Abreviação de M argin e Padding
Abreviação de Background
Abreviação de Border
Aula 11 - Tags, Classes e Seletores Especiais em CSS
Principais usos de Tags, Classes e Seletores Especiais em CSS
Elementos Filhos
Declaração de M últiplas Tags e Classes
Seletores de Atributos Específicos
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 Célula
Propriedades da Tabela
Propriedades da Célula
Editando uma Tabela
Importando Dados de Tabela
Aula 16 - Link
Tipos de Link
Atividades
Aula 03 - Página
Páginas XHTML
No Dreamweaver CS6 o formato padrão de documento é o XHTM L 1.0 Transitional. Esse formato é compatível com praticamente 100% dos navegadores de internet
atuais e possui algumas diferenças de código (e visualização) com os documentos produzidos em versões mais antigas do Dreamweaver.
Criando uma Página em Branco
Para criar um documento em branco, com as marcações iniciais do XHTM L:
escolha Arquivo / Novo.
É apresentada uma caixa de diálogo em que o usuário poderá escolher o tipo de documento.
Criando um novo documento
escolha a categoria Página em Branco/HTML e <nenhum(a)>;
clique no botão 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 página com as tags básicas. Isso pode ser percebido clicando no ícone Código na Barra do Documento ou menu Exibir /
Código.
Mesmo uma página em branco já vem preparada com o html padrão
Texto Semanticamente Correto
Existe uma preocupação muito grande na produção de textos com a semântica correta em HTM L. Esse tipo de texto é mais intercambiável entre serviços de web
(como o RSS).
Um texto formatado de maneira correta é mais reconhecível 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 próprios estilos de texto (formatando assim a aparência conforme o planejamento de design do próprio
web site).
Algumas dicas para a criação de um texto correto:
substitua todas as tags Font por estilos CSS;
sempre respeite a hierarquia de títulos. Exemplo: só utilize um H3 dentro de um H2, e não depois de um H1;
não crie mais do que um título principal (h1) na sua página;
o negrito é utilizado para criar destaques. O itálico para citações e palavras de língua estrangeira;
parágrafos são unidades de composição e não "textos separados por espaço";
o texto semanticamente correto não tem "aparência", apenas conteúdo;
as definições de cor, alinhamento, fundo e tipografia são declaradas em CSS;
escrever algo semântico é utilizar uma tag no contexto certo para a qual ela foi criada.
Veja um exemplo de texto com a formação correta:
<div>
<h1>HTM L</h1>
<p><b>HTM L</b> (acrônimo para a <i>HyperText M arkup Language</i>, que significa Linguagem de M arcação de Hipertexto) é uma linguagem de marcação
utilizada para produzir páginas na Web</p>
<h2>História</h2>
<p><b>Tim Berners-Lee</b> criou o HTM L original (e outros protocolos associados como o HTTP) em uma estação <i>NeXTcube</i> usando o ambiente de
desenvolvimento NeXTSTEP.</p>
<p>As primeiras versões do HTM L foram definidas com regras sintáticas flexíveis, o que ajudou aqueles sem familiaridade com a publicação na Web. Atualmente a
sintaxe do HTM L é muito mais rígida, permitindo um código mais preciso. Através do tempo, a utilização de ferramentas para autoria de HTM L aumentou, assim como
a tendência em tornar a sintaxe cada vez mais rígida. Apesar disso, por questões histórias, os navegadores ainda hoje conseguem interpretar páginas web que estão
longe de ser um código HTM L válido.</p>
<h2>Etiquetas</h2>
Todo documento HTM L apresenta ,<b>etiquetas</b>, elementos entre parênteses angulares (sinais de maior e menor) (< e >); esses elementos são os comandos
de formatação da linguagem. A maioria das etiquetas tem sua correspondente de fechamento:<br>
<i><etiqueta>...</etiqueta></i></p>
<p>Isso é necessário porque as etiquetas servem para definir a formatação de uma porção do documento, e assim marcamos onde começa e termina o texto com
a formatação especificada por ela.</p>
</div>
Esse código gera algo como:
Propriedades da Página
Os documentos HTM L possuem algumas propriedades básicas que, nessa versão do Dreamweaver, são formatadas através da linguagem CSS. Num projeto de web
site profissional essas formatações são colocadas em uma folha de estilos separada do HTM L (esse assunto será tratado posteriormente).
Escolha o menu Modificar/ Propriedades da Página.
Aparência CSS: define a aparência do documento CSS.
Aparência HTML: define a aparência do documento em HTM L.
Links: define a aparência dos links.
Cabeçalhos: define a aparência da tag Heading (<h1>...<h6>).
Título/codificação: define a aparência do título (<title>) e codificação.
Imagem de rastreamento: define a aparência da imagem de rastreamento.
Aparência
Propriedades da página- Aparência (CSS)
Fonte da página: configura a fonte que a página 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 página;
Imagem de fundo: configura uma imagem de fundo para a página;
Margem esquerda: configura a margem esquerda da página. Caso não queira margem, é necessário utilizar o valor zero;
Margem superior: configura a margem superior da página. Caso não queira margem, é necessário utilizar o valor zero;
Margem direita: configura a margem direita da página. Caso não queira margem, é necessário utilizar o valor zero;
Margem Inferior: configura a margem do fundo da página. Caso não queira margem, é necessário utilizar o valor zero.
Links
Propriedades da página - 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 sobreposição: quando o cursor passar sobre, mostra o sublinhado;
Ocultar sublinhado em sobreposição: quando o cursor passar sobre, oculta o sublinhado.
Cabeçalhos
Propriedades da página - Cabeçalhos
Fonte do cabeçalho: configura a fonte da tag H1 até H6;
Cabeçalho 1 ao cabeçalho 6: configura o tamanho e cor da fonte da tag H1 até H6.
Título/Codificação
Propriedades da Página- Titulo/codificação
Título: configura o título da página;
Tipo de documento (DTD): configura o tipo de documento;
Codificação: configura a codificação da página, responsável pela forma como os acentos e caracteres especiais são inseridos no HTM L;
Formulário de normalização: exibe o caminho da pasta raiz do site.
Imagem de Rastreamento
Propriedades da Página- Imagem de Rastreamento
Imagem de rastreamento: configura uma imagem ao fundo, servindo de guia para a criação do layout;
Transparência: configura a opacidade da imagem.
Essa imagem de fundo é visível 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 página...:
Aparência
Fonte da página: Arial, Helvetica, sans-serif
Tamanho da fonte: 12 pontos
Cor da fonte: vermelho escuro (#990000)
Cor do fundo da página: bege (#FFFFCC)
M argens (esquerda, superior, direita, inferior): 15 pixel
Título / Codificação
Título da página: Formatando a página
2. Digite o texto dentro da página 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 através do modo Código, quais as propriedades criadas no HTM L.
Aula 04 - Criação de uma Página Básica
Conceitos Básicos
Uma página HTM L é um arquivo-texto simples (ASCII) contendo o texto da página e os comandos HTM L que definem a formatação da mesma.
Os comandos são indicados entre marcadores chamados "tags" que vêm entre os símbolos de < e >.
A maioria dos comandos vem aos pares, sendo que a cada abertura corresponde um fechamento e cada fechamento é uma repetição do comando de abertura
precedido por /.
Exemplo: <head> </head>
Existem exceções quanto à necessidade de um par de comandos, como no caso do espaçamento simples entre linhas <br>, que não 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 maiúsculas quanto em letras minúsculas ou numa mistura dos dois casos.
D icas: X HTML:
Em X HTML, toda tag é escrita em letra minúscula. Esse padrão será adotado dentro desse curso, dessa maneira produzindo um código HTML mais correto e mais
simples de ser migrado para X HTML
Alguns comandos possuem parâmetros (como a cor, por exemplo). Esses parâmetros são separados por um espaço e colocados entre aspas.
Exemplo: <body bgcolor="red"> </body>
Espaços extras em branco, tabulações, quebras de linha e marcas de final de linha são ignorados dentro do código de uma página, ou seja: não é deixando um
espaço maior entre dois comandos que se obtém o efeito de uma linha em branco na tela.
Um arquivo de uma página HTM L deve ser gravado com a extensão .htm ou html.
Sendo a página 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, inúmeros editores de páginas HTM L já no formato WYSWYG ("What you see is what you get", algo semelhante a "O que você está vendo ao
criar a página é o que terá ao visualizá-la no navegador"). Neste caso a página é montada num ambiente amigável onde não é preciso entrar diretamente com os
comandos.
Isto não implica, no entanto, na não necessidade de se conhecer HTM L. Quem conhece a linguagem HTM L consegue compreender o código gerado pelos
editores de páginas Web e com isto:
desenvolve páginas limpas em termos de codificação que são carregadas rapidamente;
pode escolher a alternativa mais adequada para problemas comuns de layout de página;
tem uma intimidade maior com os comandos, sua sintaxe e semântica;
tem em mente como estruturar o site como um todo, diante das possibilidades oferecidas pela linguagem.
Estrutura de uma Página
Uma página é delimitada pelos comandos <html> </html>. Desta forma, estes são respectivamente o primeiro e último dos comandos do código.
Toda página é composta por um cabeçalho e um corpo sendo que na codificação, o cabeçalho vem antes do corpo.
Comandos do cabeçalho: <head> </head>
Comandos do corpo: <body> </body>
Exemplo de delimitação do cabeçalho e corpo de uma página
O exemplo a seguir exibe o código de uma página que já pode ser visualizada no browser.
<html>
<head>
</head>
<body>
</body>
</html>
Para testar cada código apresentado no exemplo:
No Bloco de Notas digite o código.
D icas: No menu Arquivo, acione o comando Salvar como, salvando o arquivo com a extensão .htm, atente para que na caixa de seleção, "Salvar como tipo", a opção
"Todos os arquivos" esteja selecionada. Caso contrário será acrescentada automaticamente a extensão .txt ao final do nome do arquivo.
Tipo de Documento
Atualmente existem vários 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 código e exiba a sua página conforme o seu planejamento, é necessário declarar o seu DocTipo (Definição do Tipo de Documento).
Essa declaração é fundamental para que o navegador processe o seu código de maneira rápida e correta e é inserida logo no início do documento (antes mesmo
da marcação HTM L).
Veja o exemplo da marcação 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 declaração acima, vários códigos são processados de maneira errada pelo navegador, que interpreta o seu HTM L de maneira "genérica".
Cabeçalho (Head)
Delimitado pelos comandos <head> e </head>, o cabeçalho da página contém informações sobre a página que não serão visualizadas no navegador, porém por
web robots e buscadores.
Principais Marcadores do Cabeçalho da Página
<title> Título da página </title>
Identifica o texto a ser exibido na barra de títulos da página.
Quando o usuário entra em uma ferramenta de busca (como Google, Yahoo, etc.) procurando por um assunto específico, o conteúdo do marcador <title> de uma
página é a primeira coisa a ser vasculhada. Daí a importância em escolher títulos coesos para as páginas e que consigam traduzir o conteúdo da página em poucas
palavras.
Além disso, quando o usuário escolhe uma página para colocar em sua lista de Favoritos do browser, é o título da página que aparecerá na lista. Caso a página não
tenha o marcador <title> setado ou se ele não contiver nada, o browser assumirá o nome do arquivo. Exemplo:
<title>NewEducation - Sistema de Ensino para Educação Profissional.</title>
<meta name="description" content="conteúdo da pagina" />
Resume o conteúdo da página. Este marcador também é 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 informações.
Também chamados de spiders, procuram essa meta tag para saber qual é a melhor classificação para cadastrar o site nessas ferramentas de busca. Quando não
encontram essas informações, normalmente os robôs usam um critério próprio para cadastrar o site, que varia de acordo com o robô e com a ferramenta de busca.
Alguns deles, quando não encontram estas tags utilizam os primeiros 200 ou 300 caracteres da página.
Exemplo:
<meta name="description" content="Site da NewEducation. NewEducation é o primeiro Sistema de Ensino brasileiro para Educação Profissional. Apostilas e
conteúdos on-line para Cursos Técnicos. Implemente em sua Escola Técnica.">
<meta name="keywords" content="palavras-chave da pagina" />
Apresenta as palavras-chave da página. Este marcador também é 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 região de Campinas, mas a palavra Campinas não for
colocada como chave, um internauta procurando por esse tipo de empresa não a encontrará no mecanismo de busca.
Exemplo:
<meta name="keywords" content="treinamento, informatica, cursos técnicos para iniciantes, cursos de informatica para profissionais, integração de sistemas,
calendario de cursos, conteudo programatico, certificação profissional, Campinas.">
D icas: Buscadores como o Google dão grande importância para marcações de palavras-chave, descrição e título da página. Se você quer ficar bem posicionado em
um buscador, não deixe de se preocupar com essas marcações.
Corpo (Body)
Delimitado pelos marcadores <body> e </body>, o corpo é a parte da página que contém informações que serão 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 endereço da imagem está correto.
D icas: O caminho do arquivo pode ser absoluto ou relativo. A maioria dos sites utiliza endereços relativos para as imagens, já que a utilização de caminhos
relativos não prende o site a uma determinada estrutura de diretórios na raiz.
Exemplo:
<body background="img/fundo.gif">
<body background="http://www.umsite.com.br/img/fundo.gif">
A imagem escolhida como fundo da página ocupará toda a região da tela, ou seja, mesmo sendo uma imagem pequena, esta será repetida por toda a página,
cobrindo toda a sua extensão.
É possível tirar proveito do fato da imagem de fundo ser ladrilhada na página. Uma página 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 inserção como fundo da página
<body bgcolor="cor" >
Especifica a cor de fundo da página. O valor que entrará pode ser uma constante ou um número 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 página ou foreground (text);
links não 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 é possível controlar a repetição,
posição e obter mais controle do seu layout.
Cores (tanto do fundo, quanto do texto) e margens também podem ser declaradas utilizando CSS.
No desenvolvimento web moderno, CSS é sempre preferencial sobre o HTML na formatação da aparência da página.
Aula 05 - Texto
Editor de HTML do Tipo WYSIWYG
Por ser um editor de HTM L do tipo WYSIWYG, é possível 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 criação de novos parágrafos (tag <p>) é necessário utilizar a tecla <Enter>
Através do <Shift> + <Enter> é possível criar quebra de linha (tag <br />).
O inspetor de propriedades automaticamente mostra as opções de formatação de texto quando o cursor está sobre uma palavra, parágrafo ou título. Porém,
normalmente, são feitas apenas marcações "semânticas" nesse inspetor, deixando a formatação de aparência para o painel de CSS.
Inspetor de Propriedade - Texto
Formato: Configura um formato para texto. Essa opção marca semanticamente o texto como um parágrafo, título ou texto pré-formatado (tag <pre). Os atalhos
para os títulos são:
Heading 1 - <Ctrl> + 1
E para o parágrafo o atalho é <Ctrl> + <Shift> + P
Fonte: Configura o tipo de fonte a ser aplicado. Normalmente é deixado o valor padrão (definido na propriedade da página ou através de CSS).
O Dreamweaver possui algumas famílias pré-instaladas de fonte. Essas são 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 através da opção Editar listas de fontes...
Editar listas de fontes
Para criar uma família, basta escolher a fonte em Fontes disponíveis e clicar na seta para a esquerda.
É importante criar uma família onde pelo menos uma fonte é bastante comum, pois do contrário, a página ficará com a fonte padrão do usuário.
Tamanho: configura o tamanho do texto. Essa propriedade também é "herdada" da configuração da página. M odificar o tamanho de um texto não altera o
seu valor, apenas a sua aparência. Se o objetivo é criar um título, deve ser utilizada a opção formatar;
Estilo: configura um estilo CSS para a página. Importante notar que na versão Adobe Dreamweaver CS6 uma simples configuração 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 Itálico: configura os efeitos de negrito e itálico 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 padrão configurado no CSS;
Lista não ordenada e ordenada: configura uma lista para o texto. Pode ser do tipo: não ordenada ou numérica. Na opção tipo de listaé possível escolher
o tipo da lista como: numérica, marcadores entre outros tipos;
Remover citação em bloco/ Citação em bloco: permite retirar e colocar recuos nos textos. Este opção pode ser aplicada também em uma lista, caso
queira criar níveis e subníveis;
Link: depois de selecionar um texto é possível configurar um link para uma página, imagem, etc.;
Destino: usado para indicar como será aberto um link (_self e _blank). Também é utilizado em Molduras. Essa opção só é ativa quando configurado um link;
Propriedades da página: pode-se abrir as propriedades da página através deste botão, além da opção do menu Modificar.
Barra de Inserção
Além das opções de formatação encontradas no Inspetor de Propriedades, ainda existem algumas tags relativas aos textos que podem ser inseridas através da
Barra de Inserção.
Barra de Inserção - 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 parágrafos.
3. Insira um título principal (Heading 1) e dois títulos secundários (Heading 2).
4. Insira uma lista não ordenada com 5 itens.
5. Aplique a marcação 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 não é parte do HTM L
padrão, 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 Páginas Web?
Todo documento escrito utiliza certos elementos de design para formatar seções de texto a fim de manter a mesma aparência, seguindo assim um padrão.
As Folhas de Estilos em Cascata permitem uma versatilidade maior na programação do layout de páginas Web sem aumentar o seu tamanho em Kb, pois oferece
várias possibilidades que antes eram conseguidas com a utilização de gifs e jpgs. Basicamente, o CSS permite ao designer um controle maior sobre os atributos
tipográficos de uma home page, como tamanho e cor das fontes, espaçamento 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 páginas.
D icas: Apêndice A - Veja um exemplo abrangente do porque utilizar CSS.
Versões e Compatibilidade
Como já mencionado, existe um grupo voltado para buscar um mínimo de padronização na Internet, especificamente na World Wide Web.
D icas: Este grupo é chamado Word Wide Web Consortium ou W3C e pode ser encontrado no endereço www.w3.org.
Os níveis de CSS são: Nível 1 e Nível 2. A diferença básica é que na CSS 2 foi implementado o recurso de posicionamento e colocação de elementos em camadas,
permitindo a sobreposição 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 padrão do HTM L e isso pode ser verificado na própria documentação da
HTM L quando se encontra uma tag ou parâmetro marcado com "deprecated".
O CSS é suportado pelos browsers M icrosoft Internet Explorer e Netscape Navigator, nas versões 4 ou posteriores. É importante deixar bem claro que, embora
seja essa uma especificação padrão do W3C, nem todos os browsers e versões apresentam os mesmos resultados e também podem não ter alguma característica
implementada.
Assim, torna-se importante ainda o uso dos principais browsers do mercado para testar os recursos do CSS.
Conceitos Básicos
Para que uma folha de estilo possa definir a aparência de um documento, o browser precisa saber que ela existe. A tag <style> e </style> determinam o início 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. Também podem ser
utilizadas classes personalizadas.
Atributo - o aspecto específico do elemento usado como estilo. Deve ser um nome de atributo CSS válido, como o atributo font-size.
Valor: a configuração aplicada ao atributo. Deve ser uma configuração válida para atributo em questão, 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 declarações são separadas por um ";". Entretanto é comum colocar o mesmo ";" ao
declarar apenas um atributo.
Métodos de Uso das Folhas de Estilo
Existem quatro (4) maneiras para incluir estilos CSS às páginas:
Estilo In-Line: método utilizado para aplicar o estilo em elementos individuais na página. Normalmente utilizado em casos de exceções a uma regra já
declarada.
Folhas de Estilo incorporadas: método utilizado para aplicar estilo em qualquer elemento da página, por serem incorporados a tag <head>.
Folhas de estilo externas: método que permite usar uma folha de estilo em várias páginas HTM L..
Importação de estilo: método que permite importar uma folha de estilo de outro arquivo. A importação de um style sheet é parecida com o método
anterior, a diferença é que você não pode combinar o método de link com outros métodos de inserções de estilos, mas a importação pode ser combinada.
Estilo in line
M étodo utilizado para aplicar o estilo em elementos individuais na página. Este estilo é definido no corpo do código HTM L através do atributo STYLE.
Exemplo de método 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 página, por serem incorporados a tag <head>. Quando o style sheet é incluído desta
maneira, as definições colocadas ali valem para toda a extensão 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 não suportam CSS ignorem o código.
<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 método Folhas de estilo Incorporadas
Folhas de Estilo Externas
Com este método, pode-se fazer com que várias páginas HTM L usem estilos definidos em um único arquivo central. A grande vantagem deste método é que, se
você quiser fazer uma mudança nos estilos da página, basta alterar em um único local e todas as páginas vinculadas a ela serão alteradas também.
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 método Externa
Importação de Estilos
A importação de um style sheet é parecida com o método anterior. A diferença é que não se pode combinar o método de link com outros métodos de inserções
de estilos, mas a importação pode ser combinada.
Exemplo:
<html>
<head>
<!-@import url(estilos.css);
-->
</style>
</head>
<body>
<h1>
Este é um título HTM L usando CSS</h1>
</body>
</html>
Exemplo utilizando método Importação
Medidas Utilizadas
Na definição das várias propriedades das folhas de estilo, diversas medidas podem ser usadas, sendo que algumas são relativas e outras absolutas.
px - número de pixel. É relativo à resolução do monitor ou outro dispositivo onde a página será exibida. Exemplo: 100 pixels em uma tela com resolução de
640x480 resultam em um tamanho maior que os mesmos 100 pixels em uma tela com resolução de 800x600.
in - polegadas
cm -centímetros
mm - milímetros
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 padrão 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 através de seus códigos RGB em formato hexadecimal.
Além dessas notações que podem ser usadas para a CSS, outras notações estão disponíveis, 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 vão 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 vários 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 parágrafo queira colocar o texto na cor vermelha, no segundo parágrafo 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 parágrafo</p> <p class=" segundo">Segundo parágrafo</p> <p class=" terceiro">Terceiro parágrafo</p>
</body>
</html>
Exemplo de Classe
D icas: O nome da classe, que pode ser qualquer um (não numérico), é identificado pelo ".".
Classes Únicas
Em certas situações, apenas um item dentro do código é de uma determinada classe (como o topo de um site, por exemplo) e para isso existem um identificação
de classe única. A diferença 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 parágrafo que serve para identificar o preço de um produto (mostrado apenas uma vez na página) e esse preço é exibido em
vermelho.
Exemplo:
<html>
<head>
<!-#preço {color:red}
-->
</style>
</head>
<body>
<p>Notebook HP</p>
<p id="preço">R$ 3500,00</p>
</body>
</html>
D icas: O nome da classe única, que pode ser qualquer um (não numérico), é 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 várias ocorrências da tag <p>, e quer que todos estes parágrafos fiquem com a mesma formatação. Então você
redefine a tag <p>.
Exemplo:
<html>
<head>
<!-p {color:red;font-size: 30pt}
-->
</style>
</head>
<body>
<p>Primeiro parágrafo</p>
<p>Segundo parágrafo</p>
<p>Terceiro parágrafo</p>
</body>
</html>
Exemplo de tag redefinida
As declarações devem ser dadas da mais geral para a mais específica. As tags herdarão as propriedades da declaração geral, tendo como mudança a declaração
específica.
Os estilos CSS podem ser combinados, para otimização do código, declarando vários atributos ao mesmo tempo para vários elementos.
Imagine que num determinado documento todo o texto é formatado com a fonte Arial, porém cada tag (h1, h2 e p) possuem uma cor e tamanhos específicos.
Imagine ainda que exista um tipo de parágrafo especial que tem a cor diferente (porém ainda possui o valor semântico de um parágrafo comum).
Para isso são utilizadas declarações de redefinição 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 função original.</p>
<h2>A semântica é importante para o código</h2>
<p class="destaque">Cada tag tem a sua função específica</p>
<p>Os parágrafos possuem função diferente dos títulos, 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 são:
Endentação
Text-indent
Esta propriedade define a tabulação 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 indentação</title>
<!-.pixel {text-indent: 24px;}
.pontos {text-indent: 24pt;}
-->
</style>
</head>
<body>
<p class="pixel">Neste parágrafo é utilizada a propriedade text-indent</p> <p class="pontos">Neste parágrafo é 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 parágrafo é utilizada a propriedade text- align</p> <p class="direita">Neste parágrafo é utilizada a propriedade text- align</p>
</body>
</html>
Exemplo da propriedade text-align
Espaçamento
Letter-spacing
Esta propriedade define espaçamento entre as letras.
Exemplo:
<html>
<head>
<title>Definindo Espaçamento</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 maiúsculo, minúsculo ou com a primeira letra de cada
palavra em maiúscula.
Seus valores-chave são:
uppercase - todas as letras do texto serão em maiúsculas;
lowercase - todas as letras do texto serão em minúsculas;
capitalize - a primeira letra de cada palavra estará em maiúscula;
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
Espaçamentos entre Linhas
Line-Height
Esta propriedade define o espaçamento entre linhas de um parágrafo.
Exemplo:
<html>
<head>
<title>Definindo Espaço entre as linhas</title>
<!-h2 {line-height: 30pt}
-->
</style>
<body>
<h2>Espaçamento entre linhas Espaçamento entre linhas Espaçamento entre linhas Espaçamento entre linhas Espaçamento entre linhas Espaçamento entre linhas
Espaçamento entre linhas Espaçamento entre linhas Espaçamento entre linhas Espaçamento entre linhas Espaçamento entre linhas Espaçamento entre linhas
Espaçamento entre linhas Espaçamento entre linhas Espaçamento entre linhas </h2>
</body>
</html>
Exemplo da propriedade line-height
Aula 08 - Formatação com CSS
Estilo CSS
A melhor maneira para a formatação da aparência dos textos (cores, fontes e tamanhos) é através de estilos CSS.
Esta linguagem, mais poderosa do que o HTM L, é utilizada para a personalização da aparência de qualquer tag. Além disso, é possível a criação de classes
personalizadas, dando maior versatilidade à formatação do texto (esta opção será abordada numa próxima unidade).
Redefinição de Tags
A primeira maneira mais útil de se utilizar estilos CSS é alterando as propriedades de tags existentes no documento HTM L.. É possível modificar toda a formatação
de determinada tag (como o <p>, por exemplo) em toda a extensão da página ou mesmo do web site todo (através de uma folha de estilos).
Para redefinir uma tag do HTM L é utilizado o painel Estilos CSS, visto na figura a seguir através dos passos:
Painel CSS Styles
Observe que na parte inferior desse painel existem alguns botões 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 botão Nova Regra CSS;
escolha o tipo de seletor Tag na caixa de seleção.
Diversas tags são mostradas na opção Tag e é possível que seja exibida a marcação relativa ao texto selecionado no Dreamweaver.
Para o exemplo, será escolhida a Tag body. O body é utilizado para configurar as propriedades das páginas, 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 próximas telas podem ser escolhidas as propriedades do CSS. Para o exemplo serão alteradas apenas:
na guia Tipo / Fonte - Verdana, Arial, Helvetica, sans-serif;
na guia Fundo / BackgroundColor - #66CCCC;
na guia Caixa / Margin - 20 pixels;
clique no botão OK e note como a página, incluindo todos os textos, foi alterada.
Assim como o Body foi alterado, é possível modificar todas as marcações encontradas no HTM L.
Propriedades do CSS
Tipo: determina as configurações do texto como fonte, tamanho, cor, etc.;
Fundo: determina as configurações do fundo de uma página como background color, background image, repeat, etc.;
Bloco: determina as configurações do bloco de texto como word spacing, letter spacing, text align, etc.;
Caixa: determina as configurações da caixa como height, width, clear, etc.;
Borda: determina as configurações de borda como style, width, color, etc.;
Lista: determina as configurações de lista como Tipo, bullet image, position, etc.;
Posicionamento: determina as configurações de posicionamento como Tipo, height, width, etc.;
Extensões: determina as configurações de extensões como page break e visual effect.
Transição: propriedades animadas
Essas opções apresentadas não são configuradas de uma só vez. É possível configurar apenas o que deseja e ter assim um CSS para cada ocasião.
Alterando Estilos CSS
Uma vez criados os estilos CSS, as suas propriedades podem ser alteradas de duas maneiras:
através do botão EditarRegra... (ícone de um lápis) do painel Estilo CSS;
através do inspetor dinâmico de CSS, também 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 alterações (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 aparência da página. Além de formatar as tags já
existentes, é possível criar classes personalizadas, aumentando ainda mais o controle sobre a aparência do documento.
Painel Design
escolha o menu Janela/ Estilos CSS;
escolha o botão 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 específica e
definida.
Nome do seletor: determina o nome do CSS a ser criado. É importante notar que todo nome de classe é precedido por um ponto.
Definição da regra: determina se será criado um arquivo CSS, podendo ser inserido em várias páginas, ou apenas inserido a uma única página
específica.Caso seja selecionada a opção Novo arquivo de folha de estilos abrirá a janela para salvar um arquivo CSS.
Toda opção selecionada no item Tipo de Seletor será aberta uma janela para configurar as propriedades do CSS.
Aplicando um CSS
Após a criação de um CSS é possível aplicá-lo em qualquer parte da página de duas formas: pelo painel Design e pelo Inspetor de Propriedades.
Painel Design
selecione um conteúdo no documento;
clique no menu Janela / Estilos CSS, caso o painel Design não esteja aberto;
selecione no painel Design um CSS já criado para aplicar no conteúdo selecionado.
selecione um conteúdo na Área de Trabalho;
as propriedades do conteúdo são exibidas no Inspetor de Propriedade;
se for um texto selecionado procure a opção Estilo no Inspetor de Propriedade. Porém, se for qualquer outro conteúdo selecionado procure a opção
Classe no Inspetor de Propriedade.
Editando um CSS
Após a criação de CSS é possível também editá-lo, porém é importante lembrar que se o CSS já tenha sido aplicado em algumas páginas, essas também sofrerão
modificações após a edição do CSS.
clique no menu Janela / Estilos CSS, se o painel Design não estiver aberto;
no painel Design selecione o CSS desejado e clique no botão Editar Estilo, na parte inferior do painel;
é aberta a janela Novo Estilo CSS para a edição do CSS desejado. Altere as opções desejadas e clique no botão OK.
Importando um CSS
É possível importar um CSS pronto de outra estrutura de site. Porém, é importante ressaltar que o CSS importado terá vínculo com o arquivo de origem, podendo
assim editar este arquivo para que todas as páginas relacionadas se modifiquem de forma simples e rápida.
clique no menu Janela / Estilos CSS, se o painel Design não estiver aberto;
no painel Design clique no botão Anexar folha de estilos externa, na parte inferior do painel;
é aberta a janela Anexar folha de estilos externa para a importação de um CSS desejado.
Anexar folha de estilos
Arquivo/ URL: determina o caminho do arquivo CSS, para isso clique no botão Browser.
Adicionar como: determina o tipo de importação do arquivo CSS.
Mídiaw: determina para que mídia 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 página 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 parágrafo a nova classe.
5. Salve o arquivo e visualize no navegador.
Aula 10 - Abreviações Comuns do CSS
Abreviações
Um dos recursos mais importantes da linguagem CSS é a possibilidade do uso de abreviações. Dessa maneira o código fica menor e mais limpo e isso significa um
menor tempo de carregamento da página, influenciando na experiência de navegação. Não são todas as propriedades que podem ser abreviadas, porém é
importante utilizar esse recurso sempre que houver essa opção. Veja agora as formas mais comuns de abreviação.
Abreviação de Font
A propriedade de Font é uma das mais utilizadas do CSS. Como já visto anteriormente, essa propriedade controla a aparência da fonte utilizada no texto. É possível
modificar o tamanho, a família e o estilo do texto.
Geralmente esse estilo é apresentado da seguinte maneira (no exemplo redefinindo a tag <p>):
p{
font-family: Verdana; /* Família 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 versão abreviada, ele pode ser declarado assim:
p{
font:italic bold 10pt/16pt Verdana;
/* font:estilo peso tamanho/entrelinha família */
}
Ao utilizar abreviações, as propriedades são separadas por um espaço. Por isso muita atenção no caso de declarar uma fonte com o nome longo (como Comic Sans
M S). Nesse caso é preciso utilizar aspas ("Comic Sans M S").
Abreviação de Margin e Padding
As margens de um elemento devem sempre ser declaradas através do CSS, do contrário sempre ficaria a pergunta "Quanto é a margem superior de um parágrafo
padrão?" ou "Quanto é a margem interna padrão 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 versão abreviada o código poderia ser montado da seguinte maneira (muita atenção à ordem utilizada):
p{
margin:10px 20px 0 10px;
/* margin:topo direita baixo esquerda */
}
Perceba que as margem são declaradas, em sentido horário, começando do alto. Perceba também que se o valor é 0, não é necessário utilizar a unidade de
medida (zero de qualquer unidade é sempre zero!).
A declaração 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 */
}
Abreviação de Background
Atualmente a propriedade de Background (fundo) é uma das mais utilizadas no CSS. Isso ocorre, principalmente, porque essa propriedade controla diretamente a
aparência do layout montado com CSS (esse tópico será explorado numa próxima 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; /* Repetição da imagem */
background-position: right bottom; /* Posição da imagem */
}
Perceba que essa é uma declaração muito grande, dividida em várias etapas. A sua abreviação pode ser feita da seguinte maneira:
body {
background: #C90 url(/imagens/fundo.png) no-repeat fixed right bottom;
*/ background: cor imagem repetição fixa posição */
}
Note que, além de abreviar as propriedades, o código hexadecimal da cor também 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.
Abreviação de Border
Além das propriedades vistas anteriormente, a Borda de um elemento também pode ter o seu valor abreviado, economizando alguns caracteres no seu código.
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 código é muito grande quando declarado na maneira tradicional. Porém é 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 código menor é carregado mais rapidamente pelo seu navegador, além de facilitar a sua manutenção.
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 utilização de Classes personalizadas, como visto anteriormente nesse material. Essas classes devem ser utilizadas apenas quando
não for possível "atingir" diretamente um elemento do HTM L. Ou seja, se é possível alterar diretamente a tag, altere a tag. Se não é possível, utilize uma classe.
Serão demonstradas algumas técnicas para a utilização de Classes personalizadas, assim como algumas técnicas para evitar o uso desnecessário desse recurso.
Uso Repetido da Mesma Classe
Um "defeito" muito comum no código é o uso repetido de classes, quando é possível utilizar a redefinição de uma tag.
Veja esse exemplo de código, muito comum:
CSS .titulo {
color:#CC0;
}
.subtitulo {
color:#660;
}
.corpodotexto {
font:10pt Verdana;
}
HTML <h1 class="titulo">M eu código 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 várias classes para redefinir elementos comuns do HTM L.
Uma maneira mais "compacta" de criar esse código seria:
CSS h1 {
color:#CC0;
}
h2 {
color:#660;
}
p{
font:10pt Verdana;
}
HTML <h1>M eu código 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 não foi preciso criar nenhuma classe nesse caso, apenas utilizar os elementos já existentes do HTM L.
Elementos Filhos
Não são todas as situações que permitem uma modificação de todas as tags de um documento HTM L. M uitas vezes alguns parágrafos são de um jeito, outros
parágrafos de outro. Ou o negrito do parágrafo é diferente do negrito do subtítulo. 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 parágrafos são pretos" e que "os parágrafos filhos da div de classe destaque são verdes". Isso possibilita um controle muito
grande e economia de código.
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". Porém, quando encontramos um <strong> dentro de um <h2> ele perde o destaque. Por
isso, foi dito que "todo strong, filho de um h2, é preto".
Declaração de Múltiplas Tags e Classes
Imagine o cenário onde alguns dos seus títulos (de h1 até h3) são declarados numa família de fonte e cor enquanto o seu parágrafo é declarado em outra família.
Ou, onde algumas classes compartilham as mesmas propriedades, como as margens, cores ou bordas.
É comum encontrarmos as seguintes declarações:
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 são declarados em fonte Georgia, cor azul e o parágrafo em fonte Verdana, cor cinza.
Essa declaração 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 são Georgia, cor azul" e "p é Verdana, cor cinza".
Isso reforça uma regra do CSS: declare primeiro as regras e depois as exceções.
Derivada dessa dica de múltiplas declarações lembre-se de que é possível declarar:
CSS *{
}
Onde o asterisco (*) é utilizado para redefinir todas as tags do HTM L.
Seletores de Atributos Específicos
Uma forma de utilizar ainda menos classes personalizadas é o uso de seletores de atributos específicos. 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 código:
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">Página Inicial</a>
Perceba que existe, além da classe, uma propriedade em comum nos links externos. Todos utilizam o atributo target="_blank". Através do CSS é possível localizar
esse atributo e aplicar uma formatação. 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">Página Inicial</a>
Dessa vez o html não precisa da declaração 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 diferença de código em um portal, onde existem milhares de links apontados para fora do seu site.
Utilizando seletores de atributos podemos criar formatações muito mais poderosas, porém existe um pequeno empecilho no seu uso: esses seletores não são
reconhecidos pelo Internet Explorer 6 e versões anteriores.
Aula 12 - Imagem
Formatos de Arquivos de Imagem
Existem diversos formatos de arquivos de imagem, mas os três normalmente utilizados em páginas web são - GIF, JPEG e PNG. Os formatos aceitos pela maioria dos
navegadores são o GIF e o JPG.
O PNG é a melhor opção para a maioria das imagens para a web devido à sua flexibilidade e tamanho reduzido de arquivo, porém a sua exibição é apenas
parcialmente suportada no Internet Explorer e Netscape Navigator.
No Adobe Dreamweaver CS6 é possível inserir uma imagem de três maneiras:
pelo menu Inserir / Imagem,
pela Barra de Inserção na opção 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 inúmeras opções.
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 endereçamento da imagem. Raiz do site (URL em relação à raiz do site) e Documento (URL em relação ao documento). Prefira
sempre o modo Documento, pois seu funcionamento se dá tanto localmente quanto hospedado.
Para inserir uma imagem é possível indicar qualquer pasta, mesmo que seja fora da pasta raiz do site. Porém, quando isso ocorre é exibida uma mensagem para que
seja salva uma cópia da imagem para pasta raiz do site. Para salvar a imagem clique no botão Sim e indique a pasta onde será salva esta imagem. Caso não queira
clique no botão Não.
O Dreamweaver CS6 apresenta uma tela para a configuração 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;
após isso abra uma pasta onde conste uma imagem;
clique e arraste a imagem para o documento.
Após inserir uma imagem visualize-a no modo código pelo menu Exibir / Código. Observe que na tag <img> </img> o caminho para imagem está absoluto, pois o
arquivo html ainda não 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.
É possível modificar diversas propriedades das imagens através do Inspetor de Propriedades:
selecione uma imagem no seu documento;
as propriedades da imagem são exibidas no Inspetor de Propriedades.
Inspetor de Propriedades - Imagem
ID: permite nomear uma imagem, o que possibilita fazer referência a ela com uma linguagem de criação de scripts, como Javascript ou VBScript;
L eA: largura e altura da imagem. É possível alterar o tamanho da imagem. Importante notar que mesmo ao diminuir o tamanho da imagem, ela não 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 é possível procurar o arquivo correspondente;
Link: mostra o link da imagem. Este link pode ser para uma página, um arquivo, um e-mail, etc.;
Alt: especifica um texto alternativo que aparece no lugar da imagem quando ela não é carregada pelo navegador e quando o usuário 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 opção possui sete funções;
Editar: abre a imagem selecionada em um editor de imagem específico. Quando essa imagem for alterada e salva no editor de imagem, ao retornar ao
Adobe Dreamweaver CS6, ela será atualizada. É possível configurar o programa executável de acordo com a extensão da imagem. Clique no menu Editar /
Preferências e marque a opção Tipos de Arquivos / Editores;
Escolha uma extensão na opção Extensões. Clique no botão + na opção Editores eselecione um programa executável para associar a extensão;
Otimizar: abrirá a janela de otimização de imagem;
Cortar: permite cortar um pedaço da imagem;
Atualizar do original: salva as alterações feitas na imagem. Só é ativo quando a imagem sofre modificações 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 construção 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 também são utilizadas como fundo da página. No Dreamweaver CS6 essa formatação é feita através da linguagem CSS e na tag Body;
clique no menu Modificar / Propriedades da página;
selecione o item Aparência e na opção Imagem do fundo clique no botão Procurar para indicar uma imagem;
configure a repetição da imagem de fundo na opção Repetir.
1. Abra a estrutura de site local Curso Dreamweaver CS6 e crie uma pasta chamada aula_03. Clique no menu Arquivo / Novo, nesta página adicione algumas imagens
e Editar suas propriedades pelo Inspetor de Propriedade.
2. Insira um texto de 5 parágrafos e posicione as imagens, alinhando para a esquerda e direita.
3. Insira a imagem de fundo fundo1.jpg, com repetição X. M odifique também a cor da página 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 criação de páginas que necessitam de uma organização visual estruturada em linhas e
colunas. As tabelas trabalham organizando e distribuindo textos, imagens e outros elementos.
A função criada originalmente para uma tabela é guardar dados tabulares, como um calendário ou uma lista de produtos/preços.
No Adobe Dreamweaver CS6 é possível inserir uma tabela de duas maneiras: pelo menu Inserir / Tabela epela Barra de Inserção na opção Inserir / Comum /
Tabela.
Para configurar as propriedades de uma célula ou de uma tabela já inserida no documento,basta selecioná-la e o Inspetor de Propriedade apresenta inúmeras
opções.
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 número de linhas da tabela;
Colunas: determina o número 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, porém em porcentagem o
tamanho varia conforme a resolução de vídeo e largura do navegador do usuário;
Espessura da borda: determina a largura da borda da tabela. Para não apresentar bordas preencha o campo com 0 (zero);
Preenchimento da célula: define a distância entre o conteúdo da célula e a borda. O preenchimento padrão é 1 pixel, porém caso queira tirar o
preenchimento digite 0 (zero);
Espaçamento da célula: define em pixels a distância entre uma célula e outra. O padrão é 2, porém caso não queira espaçar digite 0 (zero);
Cabeçalho: determina o uso ou não de um cabeçalho e qual será sua posição. A linha ou coluna do cabeçalho terá a fonte em negrito, podendo ser
alterado ou até mesmo retirado pelo Inspetor de Propriedade;
Legenda: determina um título para a tabela, que será exibido na página;
Resumo: descreve as informações presentes na tabela. Essas informações não serão exibidas na página.
Barra Inserir/ Comum
Barra de Inserção - Tabela
Escolha na Barra de Inserção a opção Comum e clique no botão Tabela.
Selecionando uma Tabela ou uma Célula
Através da seleção você pode obter dois tipos de configurações no Inspetor de Propriedades. A da tabela ou da célula (linha e coluna).
Seleção 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.
Também é possível selecionar a tabela através da barra de status, clicando diretamente sobre a tag Table. Essa opção é muito útil com tabelas aninhadas.
Seleção de Tabela
Seleção de Células
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.
Seleção de Célula - 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.
Seleção de Célula - Linha
Propriedades da Tabela
Algumas propriedades da tabela podem ser ajustadas através do inspetor de propriedades:
Selecione uma tabela na Área de Trabalho.
As propriedades da tabela são exibidas no Inspetor de Propriedade.
Inspetor de Propriedade - Tabela
Tabela ID: configura uma identificação para a tabela. Utilizado na aplicação de estilos CSS e em linguagens de script;
Linhas: exibe e configura o número de linhas da tabela;
Colunas: exibe e configura o número de colunas da tabela;
L: configura a largura da tabela;
PreenchCélula: define a distância entre o conteúdo da célula e a borda. O preenchimento padrão é 1 pixel, porém caso queira tirar o preenchimento
digite 0 (zero);
EspaçoCélula: define em pixels a distância entre uma célula e outra. O padrão é 2, porém caso não queira espaçar digite 0 (zero);
Alinhar: configura o alinhamento da tabela em relação 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 Célula
Algumas propriedades da célula podem ser ajustadas através do inspetor de propriedades:
selecione uma célula, podendo ser também uma linha ou coluna;
assunto: propriedades da célula são exibidas no Inspetor de Propriedade.
Com uma seleção de célula, linha ou coluna você é capaz de configurar um texto que esteja dentro da tabela (parte de cima do inspetor de propriedades) assim
como a célula em si.
Inspetor de Propriedade - Célula
Mesclar células: mescla duas ou mais células selecionadas. Para ativar este botão é necessário que esteja duas ou mais células selecionadas;
Dividir células: divide uma célula em mais células. Esta divisão pode ser em mais linha ou em mais colunas. Para ativar este botão é necessário que esteja
selecionada apenas uma célula;
Horiz: configura o alinhamento horizontal do conteúdo da tabela;
Vert: configura o alinhamento vertical do conteúdo da tabela;
L: configura a largura de uma célula ou coluna. É muito importante que o valor da largura da tabela seja igual à soma das larguras das colunas;
A: configura a altura de uma célula ou linha. É muito importante que o valor da altura da tabela seja igual à soma das alturas das linhas;
Sem quebra: essaopção marcada determina que não ocorra a quebra automática de linha;
Cabeçalho: essa opção marcada determina que a célula seja um título de tabela;
Fundo: configura uma cor de fundo para a célula.
Editando uma Tabela
Adicionando Linhas
É muito comum, após a criação de uma tabela, inserir mais linhas.
selecione uma célula ou linha;
escolha o menu Modificar / Tabela / Inserir Linha (Ctrl+M). Será adicionada uma linha acima da célula 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 botão OK após preencher as configurações;
ou, no menu de contexto (botão direito) escolha Tabela / Inserir Linha, ou Tabela / Inserir Linhas ou Colunas.
Inserir Linhas ou colunas
Adicionando Colunas
Após a criação de uma tabela, é possível inserir novas colunas:
selecione uma célula ou coluna;
escolha o menu Modificar / Tabela / Inserir Colunas. Será adicionada uma coluna a esquerda da célula 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 botão OK após preencher as configurações.
ou no menu de contexto (botão direito) escolha Tabela / Inserir Colunas, ou Modificar / Tabela / Inserir Linhas ou Colunas.
Excluindo Linhas
selecione a célula ou a linha a ser excluída;
clique no menu Modificar / Tabela / Delete linha;
ou no menu de contexto (botão direito) selecione Tabela / Delete linha.
Excluindo Colunas
selecione a célula ou coluna a ser excluída;
clique no menu Modificar / Tabela / Delete Coluna;
ou no menu de contexto (botão direito) selecione Tabela / Delete Coluna.
Dividindo Células
Selecionando uma célula é possível dividi-la. Esta divisão poder ser em mais linha ou em mais colunas.
selecione a célula a ser dividida;
escolha o menu Modificar / Tabela / Dividir Células. É aberta uma janela para especificar o tipo da divisão (Linhas ou Colunas) e sua quantidade. Clique
no botão OK após preencher as configurações;
ou no menu de contexto (botão direito) selecione Modificar / Tabela / Dividir Células.
Dividir Células
Mesclando Células
Selecionando duas ou mais células é possível mesclá-las:
selecione as células que serão mescladas;
escolha o menu Modificar / Tabela / Mesclar Células;
no menu de contexto (botão direito) escolha Tabela / Mesclar Células.
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 célula que pertence.
posicione o cursor na célula onde deseja inserir uma tabela;
clique em Inserir / Tabela;
ou escolha na Barra de Inserção a opção Comum e clique no botão 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 tabulações, vírgulas, dois pontos, ponto e vírgula 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 botão Procurar e selecione o arquivo;
Delimitador: indica o delimitador que corresponda ao formato do documento a ser importado. Se for selecionada a opção Outros aparecerá um campo à
direita da lista. Digite o delimitador utilizado para separar os dados da tabela. A importação correta depende da indicação do delimitador certo;
Largura da tabela: determina a largura da tabela;
Ajustar aos dados: cria uma tabela que se ajusta à sequência de caracteres mais longa em cada coluna;
Definir para: especifica a largura da tabela como uma porcentagem da janela do navegador ou com um número de pixels;
Preenchimento da célula: determina o número de pixels entre o conteúdo da célula e a borda;
Espaçamento da célula: determina o número entre cada célula da tabela;
Formatar linha superior: possui 4 opções de formatação: sem formatação, negrito, itálico ou negrito itálico;
Borda: determina a largura em pixels da borda da tabela.
Também é possível 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 página você adicionará algumas
tabelas e editará suas propriedades pelo Inspetor de Propriedade.
2. M odifique as propriedades da página, 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.
É possível criar os seguintes tipos de link:
Internos - para documentos de um mesmo site.
Externos - para documentos de outro site.
Downloads - para documentos com extensões não reconhecidas pelo navegador.
Correioeletrônico - para enviar mensagens através dos softwares de e-mail.
Âncoras - para seções específicas de uma página.
É possível criar um link com um simples clique. Esse recurso está presente no Inspetor de Propriedade, no menu Inserir e na Barra de Inserção na opção Comum.
Para configurar um link, basta selecionar um texto ou uma imagem, em seguida, indicar o caminho do arquivo ou seção.
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 é possível indicar qualquer pasta, mesmo que seja fora da pasta raiz do site. Porém, quando isso ocorre é exibida uma mensagem para que seja
salvo uma cópia do arquivo para pasta raiz do site.
Para salvar o arquivo clique no botão Sim e indique a pasta onde será salvo. Caso não queira clique no botão Não;
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 página pai (apenas em frames);
_self: abre o link na mesma janela;
_top: abre o link no nível superior do conjunto de frames.
Imagem
Inspetor de Propriedade - Link (Imagem)
A configuração de link em uma imagem é semelhante a do texto. A indicação do caminho na opção Link é como será aberto na janela na opção Destino. Além
disso, numa imagem pode-se inserir mais de um link. Esse recurso é feito através do Mapa. Ele possui várias formas: Retangular, Oval, Polígono.
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 opções Link e Destino devem ser preenchidas semelhantes a um link comum. A opção <Alt> cria a possibilidade de que cada link da imagem tenha seu
rótulo próprio.
A seta preta serve para selecionar individualmente cada Mapa criado na imagem, podendo assim ver e rever as configurações dos mesmos.
Caso a borda da imagem não estiver em 0 (zero), ao indicar um link surgirá uma borda de cor azul. Para que isso não ocorra digite 0 zero na opção 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 página você adicionará alguns
textos e uma imagem como link utilizando o Inspetor de Propriedade.
2. Crie 1 arquivos com a extensão .zip na pasta aula_5.
3. Insira uma tabela e links, conforme a imagem a seguir:
4. Configure a aparência 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 Inserção 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
Padrão Tableless
Criando as Divs
Box M odel
Atividades
Aula 22 - Box Model/Acabamento
Introdução
Imagens de Fundo
Atividades
Aula 23 - AP Div/Layer
Layers
Inserindo uma Layer
Propriedades da Layer
Painel Elementos AP
Atividade
Aula 24 - Formulário
Conceitos Básicos
A Tag <form> e seus Principais Atributos
Barra de Inserção
M enu Inserir
Processamento do Formulário
Atividades
Aula 25 - Comportamentos
Introdução
Painel Comportamentos
Inserindo Comportamentos
Atividades
Aula 26 - Mídias/Flash
Inserindo Flash
Flash Vídeo (FLV)
Atividades
Aula 17 - Layout
O Sucesso de um Web Site
Uma boa diagramação do conteúdo juntamente com a interface do web site é uma das principais razões para o sucesso de um projeto de web.
Além de preocupação com a aparência e organização, o layout precisa ser compatível com diversos navegadores e resoluções de monitor.
O layout pode ser montado de maneira fixa (pixels) ou elástica (relativo). Normalmente a melhor solução é um design híbrido, com a largura fixa e altura variável.
No Dreamweaver CS6 o layout pode ser montado utilizando tabelas ou utilizando divs e css.
Tabelas
A maneira mais "tradicional" de criação de layouts é utilizando tabelas. Essa é a forma mais fácil, porém não é compatível com o web standard (conjunto de regras
utilizadas na criação de web sites).
Esse recurso está presente na Menu Inserir na opção Layout. E suas configurações estão presentes no Inspetor de Propriedades.
Barra Inserir Layout
Barra de Inserção - Layout
Padrão: esse modo de visualização possibilita a manipulação de tabela. Esse recurso já foi abordado e para maiores detalhes consulte as aulas anteriores;
Expandida: esse modo de visualização também possibilita a manipulação de tabela, porém a visualização da tabela é expandida para facilitarseu manuseio.
Quando for acionado pela primeira vez, abrirá uma janela apenas indicando a troca de visualização;
Inserir Tag Div de layout de grade fluida: possibilita a inserção da tag <div>. Ao clicar nesse botão é aberta uma janela para especificar a Class, ID e local
de inserção da tag. Esse recurso é bastante utilizado em web standard e será tratado posteriormente;
Desenhar Div AP: possibilita a inserção de uma layer na página. Esse recurso será abordado na aula sobre Camadas;
Menu sanfonado do Spry: é um framework que permite o uso de bibliotecas de JavaScript onde é possível incorporar conteúdo XM L em documentos
HTM L de maneira simples e dinâmica;
Tabela: possibilita a inserção de uma tabela. Esse recurso já foi abordado e para maiores detalhes consulte a aula sobre Tabelas.
Inserindo as Tabelas de Layout
Para a criação de um layout tradicional (topo, conteúdo e rodapé) são necessárias três tabelas. Separar cada parte do layout permite um tempo de carregamento
mais rápido e maior liberdade de diagramação.
Topo
inserir uma nova tabela através da barra de inserção Layout/Tabela (ou das outras maneiras vistas anteriormente);
configurar conforme a figura a seguir (2 linhas, 1 coluna e 770 pixels).
Através do inspetor de propriedades, alterar as cores e altura das células:
a célula de cima com a cor #669900 e altura 80 pixels;
a célula 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).
Através do inspetor de propriedades, alterar as cores, larguras e alinhamentos das células:
a célula da esquerda com a cor #CCCCCC , largura (width) 130 pixels e alinhamento vertical top;
a célula do meio com a cor #FFFFFF e alinhamento vertical top;
a célula da esquerda com a cor #CCCCCC, largura (width) 130 pixels e alinhamento vertical top.
A altura dessa tabela será baseada na quantidade de conteúdo e por isso não 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
Através do inspetor de propriedades, alterar as cores e altura da célula.
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 título da página para "Escola de Design Web Premium".
3. Insira a imagem topo1.jpg na célula 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 parágrafos, 1 título e 2 subtítulos na segunda coluna da segunda tabela. Note como a tabela se comporta de maneira elástica, esticando
conforme o texto a ocupa.
7. Insira uma imagem do lado do primeiro parágrafo, alinhando-a a esquerda.
8. M odifique a propriedade Preenchimento da célula 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 formatação do texto e do fundo da página. Utilize cores existentes na própria imagem do topo para a formatação dos títulos e preto
para o fundo da página.
11. Salve novamente o arquivo e visualize-o no navegador.
Aula 19 - Modelos
Modelos
Um dos principais recursos para facilitar a criação de web sites com múltiplas páginas é o uso de M odelos. É fácil de manusear e permite criar regiões bloqueadas
e regiões editáveis, mantendo assim a integridade da página original. O arquivo de modelo sempre ficará armazenado em uma subpasta Modelos na pasta raiz do site.
Através desse recurso é muito simples e rápido criar um web site cuja interface se repete em todas as páginas. No Adobe Dreamweaver CS6 é possível transformar
uma página HTM L em um modelo através do comando Arquivo/Salvar como modelo.
Salvando um Modelo
Será utilizado o arquivo feito anteriormente como base para a construção 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 opções e clique Salvar.
Salvar como modelo
Site: determina qual estrutura de site quer utilizar um modelo;
Modelos Existentes: exibi todos os modelos já criados;
Descrição: possibilita a inclusão de uma descrição para o modelo;
Salvar como: determina o nome do modelo que será criado.
Propriedades do Modelo
Região Editável
A região editável é uma área que apresenta um conteúdo diferente entre as páginas. A criação dessa região é fundamental para a modificação do conteúdo do
web site.
selecione um conteúdo no seu documento;
escolha o menu Inserir / Objetos de modelos / Região Editável;
será aberta a janela Nova região editável para definir um nome para a região editável. Após isso clique OK.
Nova região editável
A região editável será identificada por um nome e com um contorno verde na Área de Trabalho. Quando um template é aplicado em uma página ele terá esse
mesmo aspecto para identificar a região editável.
Modelo - Região Editável
É possível determinar na área editável um simples espaço, uma tabela inteira ou apenas uma célula. Através da opção Região Editável é permitido criar várias áreas
editáveis em um modelo. Para apagar uma região editável 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. É recomendável fechar o modelo antes de criar novos documentos, evitando problemas de
atualização.
escolha menu Arquivo / Novo;
será aberta a janela Novo documento, selecione a opção Modelos.
Novo documento
Na opção Site, escolha a estrutura de site onde se encontra o template desejado. Já na opção Modelos para o site, selecione o template que deseja
aplicar e clique no botão Criar. A opção Atualizar a página quando o modelo for alteradodeve estar marcado caso queira que a página seja atualizada quando
for modificado o modelo.
Note que ao criar uma página baseada num modelo, apenas a região editável pode ser modificada. Todo o resto fica bloqueado, evitando erros e
mudanças indesejadas.
Outros Recursos
Região Opcional
A região opcional é uma área que controla um conteúdo que pode ou não ser visualizado em uma página que utiliza um modelo. Para controlar essa área é
utilizada uma expressão condicional (If).
selecione uma área ou um conteúdo na Área de Trabalho;
escolha o menu Inserir / Objetos de Modelos / Região Opcional;
será aberta a janela Nova região editável para definir um nome e status da região opcional. Em seguida, clique OK.
Nova região opcional - Básico
Nome define um nome para a região opcional;
Mostrar por padrão: define o status de visualização ou não da região opcional.
Na opção Avançado é possível com um único nome programar várias regiões opcionais.
Para determinar se uma região opcional será ou não visualizada em uma página, é importante que a página tenha uma template aplicada.
escolha o menu Modificar / Propriedades do Modelo;
será aberta a janela Propriedades do Modelo para configurar a exibição da região opcional.
Janela Propriedades do modelo
A opção Nome apresenta o nome da região opcional. Já a opção Valor mostra o status da visualização, sendo que o Verdadeiro (exibe) e Falso (oculta). Para
mudar esses valores basta marcar ou desmarcar a opção Visualizar. Nesse caso é exibido OptionalRegion1.
Região Editável Opcional
Essa opção reúne dois recursos, Região Editável e Região Opcional, em apenas um clique. Com isso é possível criar uma região opcional editável.
selecione uma área ou um conteúdo no documento;
escolha o menu Inserir / Objetos de Modelos/ Região Editável Opcional;
ou escolha o botão Modelos / Região Editável Opcional na Barra de Inserção na opção Comum;
será aberta a janela Nova região editável para indicar um nome para a região opcional editável. Depois disso clique OK.
Região Repetitiva
A região de repetição é uma área que repetirá facilmente um conteúdo desejado. Esse recurso é pouco utilizado em páginas.
Selecione uma área ou um conteúdo no documento;
escolha o menu Inserir / Objetos de Modelos/ Região Repetitiva;
ou escolha o botão Template / Região Repetitiva na Barra de Inserção na opção Comum;
será aberta a janela Nova Região Repetitiva para definir um nome para a região de repetição. Depois disso clique OK.
O conteúdo inserido na região de repetição ficará disponível para ser repetido na página onde o modelo for aplicado. Na Área de Trabalho da página, onde o
modelo foi aplicado, será apresentado alguns botões de acesso para auxiliar na repetição do conteúdo.
Tabela Repetitiva
Essa opção é similar a de região de repetição, porém é possível a inserção de tabela.
escolha o menu Inserir / Objetos de Modelos/ Tabela Repetitiva;
ou escolha o botão Modelo/ Tabela Repetitiva na Barra de Inserção na opção Comum.
Será aberta a janela Inserir tabela repetitiva para definir as propriedades da tabela.
Linhas: determina o número de linhas da tabela;
Colunas: determina o número de colunas da tabela;
Preenchimento da célula: define a distância entre o conteúdo da célula e a borda. O preenchimento padrão é 1 pixel, porém caso queira tirar o
preenchimento digite 0 (zero);
Espaçamento da célula: define em pixels a distância entre uma célula e outra. O padrão é 2, mas caso não queira espaçar digite 0 (zero);
Largura: determina a largura da tabela. A largura pode ser em pixel ou porcentagem. Em pixel o tamanho é fixo, porém em porcentagem o tamanho varia
conforme a resolução de vídeo e largura do navegador do usuário.
Inserir Tabela Repetitiva
Borda: determina a largura da borda da tabela. Para não 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 região: determina o nome da região de repetição de tabela.
Após inserir a tabela é possível configurá-la do modo que quiser. Podendo adicionar linhas e colunas e alterar tamanho e cores, entre outras opções já estudadas
em Tabelas.
As opções região_01 e região_02 da primeira linha da tabela de repetição poderão ser modificadas na página que a modelo for aplicada. Já a segunda linha não
poderá sofrer modificação.
Na Área de Trabalho da página, onde o modelo foi aplicado, será apresentado alguns botões de acesso para auxiliar na tabela de repetição.
Criar Modelo Aninhado
Esse recurso é utilizado para criar um modelo em uma página que já possui modelo. Para que um modelo aninhado funcione é necessário aplicar um modelo em
uma página.
escolha o menu Inserir / Objetos de modelos / Criar modelo aninhado;
ou escolha o botão Modelos/ Criar modelo aninhado na Barra de Inserção na opção Comum;
é aberta a janela Salvar como modelo para salvar um novo modelo. Configure as opções e clique Salvar.
Editando e Atualizando um Modelo
A edição de um modelo é igual a modificação de uma página comum.
escolha o menu Janelas / Arquivos ou Janelas / Assets;
clique duas vezes no modelo desejado e será aberto em uma nova janela esse arquivo;
faça as alterações necessárias e escolha o menu Arquivo / Salvar para salvar o modelo.
Para a atualização de um modelo é necessário:
escolher o menu Modificar / Modelos / Atualizar Páginas;
é aberta a janela Atualizar páginas para atualizar o modelo.
Procurar em: define o tipo de atualização.
Atualizar: define o conteúdo que deseja ser atualizado.
Itens de biblioteca atualiza biblioteca. E Modelos atualiza o template.
Mostrar registro: define a exibição ou não do relatório de log da atualização.
1. Abra a estrutura de site local Dreamweaver CS6. Abra o arquivo layou1.htm da pasta raiz. Crie a partir dessa página um modelo.
2. Transforme em região editável o local onde o conteúdo será diversificado. Insira o nome meio nessa região.
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 opção do menu deverá ser criado um arquivo.
M odifique o conteúdo (títulos, 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 botões. 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 navegação.
Aula 21 - Web Standard/Tableless
Padrão Tableless
As definições de regras para o uso da linguagem HTM L determinam que as tabelas sejam utilizadas apenas para a exibição de dados tabulares. O layout utilizando
tabelas acabou sendo trocado pelo padrão Tableless.
Nessa nova forma de trabalho, a diagramação é toda feita através de CSS, utilizando para isso a tag DIV e identificadores do tipo ID.
Criando as Divs
A primeira etapa para a construção de um layout tableless é a criação de diversas tags DIV. Cada uma dessas tags representa uma parte do layout (como o topo, o
menu, etc.). Essa forma de diagramação também é conhecida como Box Model (modelo de caixas).
Para inserir uma DIV:
basta clicar na barra de inserção Comum e no botão Inserir tag div;
Será exibida a caixa de diálogo Inserir Tag Div onde existem as opções:
Inserir: posição (no código HTM L) onde será inserida a DIV, podendo ser:
No ponto de inserção - a tag é inserida exatamente na posição onde está;
Após início da tag - é inserida após uma tag específica;
Antes do final da tag - é inserida antes de uma tag específica.
Classe: é permitida a escolha de uma classe em CSS. Se a classe ainda não existe, basta colocar o nome que será utilizado futuramente.
ID: é permitida a escolha de um identificador em CSS. Se o identificador ainda não existe, basta colocar o nome que será utilizado futuramente.
Nova regra CSS: abre a caixa de diálogo para a criação de estilos CSS.
Caixa Modelo
Um formato comum encontrado nesse tipo de layout é o exibido na imagem a seguir. Para isso são utilizadas cinco DIVS, cada uma com um identificador.
Cada nome encontrado dentro de uma caixa é um novo identificador do CSS. Geralmente esses identificadores são escritos dessa maneira, sem os acentos.
A ordem de criação desses identificadores também é importante: Geral, Topo, Lado, Conteúdo e Rodapé.
Para criar a primeira DIV e o seu identificador:
insira uma DIV num novo documento com o Inserir em No ponto de inserção e ID com o nome de Geral;
clique também em Nova regra CSS e configure a tela de criação do novo estilo CSS.
escolha ID, o Seletor com o nome de #Geral e Definição 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 conteúdo das demais DIVS.
Outras DIVS
Nessa diagramação, as outras DIVS são inseridas dentro da Geral.
apague o texto O conteúdo de id "Topo" é inserido aqui;
insira uma DIV num novo documento com o Inserir em Após início da tag <div id="Geral"> e ID com o nome de Topo;
clique também em Nova regra CSS e configure a tela de criação do novo estilo CSS;
escolha o Tipo de Seletor e no Nome do Seletor digite #Topo e em Definição 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 características:
Caixa/Width - 160 pixels
Caixa/Float - Right
4. Insira uma nova DIV, com o nome de Conteúdo 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
Introdução
No método de trabalho apresentado anteriormente, todo o acabamento é definido em estilos CSS. Os elementos da interface, menus, imagens e formatação de
fontes são separados do HM TL. Dessa maneira é simples atualizar um web site, pois o conteúdo não interfere na interface e vice-versa.
Imagens de Fundo
A principal maneira de formatar a interface em Tableless é através de imagens de fundo. Essas imagens podem ser aplicadas em cada DIV e também na tag BODY.
Através da próxima atividade, toda a aparência da página tableless.html será modificada.
Uma vez pronta a página, independente de ser web standard ou html diagramado com tabelas, lembre-se que é possível 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 também o arquivo tableless.html, encontrado na pasta raiz.
2. Altere o título do documento para "Box M odel - Tableless/CSS".
3. Apague os textos "Content for id "Nome" Goes Here" incluídos em todas as DIVS.
4. Configure um novo estilo CSS redefinindo a tag BODY com os parâmetros:
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 configurações do identificador #Geral com os parâmetros:
Fundo/Background image - tableless_geral.jpg
Fundo/Repeat - repeat-y
6. Altere as configurações do identificador #Topo com os parâmetros:
Fundo/Background image - tableless_topo.jpg
Fundo/Repeat - no-repeat
7. Altere as configurações do identificador #Rodape com os parâmetros:
Fundo/Background image - tableless_rodape.jpg
Fundo/Repeat - no-repeat
8. Insira um texto de 5 parágrafos, 1 título e 2 subtítulos na div Conteudo. Note como o layout se comporta de maneira elástica, esticando conforme o texto o
ocupa.
9. Insira uma imagem do lado do primeiro parágrafo, alinhando à esquerda.
10. Altera as configurações do identificador #Conteudo com os parâmetros:
Caixa/Padding - Left 15 pixels
11. Insira uma lista com 5 links para páginas externas da div Lado e com destino _blank.
12. Configure um novo estilo CSS, Advanced e configurando #Geral #Lado a. Essa opção permite a redefinição apenas dos links na div Lado. Utilize os parâmetros:
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 opção permite a redefinição apenas dos links na div Lado, quando
apontados pelo cursor do mouse. Utilize os parâmetros:
Tipo/Color - #FFFFFF
Fundo/Background color - #D40843
14. Configure um novo estilo CSS, Advanced e configurando #Geral #Lado li. Essa opção permite a redefinição apenas das listas na div Lado. Utilize os parâmetros:
Lista/Type - none
15. Configure um novo estilo CSS, Advanced e configurando #Geral #Lado ul. Essa opção permite a redefinição apenas das listas na div Lado. Utilize os parâmetros:
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 é através de Layers (camadas). A layer é uma DIV com posicionamento absoluto e não é tão utilizada (e
aceita no mercado) como a montagem em Box M odel vista anteriormente.
Nessa versão do Dreamweaver a nomenclatura da layer mudou para AP Div (Absolute Position Div), mas o funcionamento e uso são praticamente iguais às versões
anteriores.
No Adobe Dreamweaver CS6 é possível inserir uma layer de duas maneiras: pelo menu Inserir / Objetos de Layout / AP Div oupela Barra de Inserção na opção
Layout.
Para configurar as propriedades de uma layer já inserida no documento, basta selecioná-la e o Inspetor de Propriedade apresenta inúmeras opções.
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 Inserção
Barra de Inserção - Layout
escolha na Barra de Inserção a opção Layout e clique no botão Desenhar div AP;
no documento escolha um local onde se deseja inserir a layer, clique e arraste o cursor para desenhar e formar um retângulo ou quadrado.
Propriedades da Layer
É possível configurar algumas propriedades da layer através do Inspetor de Propriedades:
selecione uma layer na Área de Trabalho;
as propriedades da layer são exibidas no Inspetor de Propriedade.
Inspetor de Propriedade - Layer
Elementos CSS-P: configura uma identificação para a DIV;
E: configura a posição da layer em função do canto esquerdo da página;
T: configura a posição da layer em função do canto superior da página;
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 visualização da layer. O valor Default é normalmente inherit. O valor Inherit segue a configuração 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 conteúdo. Sendo que o valor Visible aumenta o tamanho da layer de acordo com o
conteúdo inserido. Hidden corta o conteúdo excedente da layer. Scroll gera uma barra de rolagem para a layer independente do tamanho do conteúdo. E,
Auto gera automaticamente uma barra de rolagem caso o conteúdo exceda seu tamanho.
Corte: configura as posições L (Esquerda), R (Direita), T (Topo) e B (Para Baixo) conteúdo com relação ao conteúdo.
Painel Elementos AP
O painel Elementos AP é um recurso visual para o controle e organização das camadas na página.
Escolha o menu Janela / Elementos AP.
As camadas são exibidas como uma lista. A opção com ícone de um Olho serve para definir a visualização da camada. A opção ID define o nome da camada. E a
opção Z define a posição das camadas, sendo que as primeiras exibidas no painel estarão sobre as últimas camadas na Área de Trabalho. O item Evitar sobreposições
evita a sobreposição 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 página e nessa página 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 três parágrafos na layer da direita.
5. M odifique a propriedade estouro da terceira camada e observe a diferença na visualização (F12).
6. Salve esse arquivo como layer.html na pasta html da aula_6.
Aula 24 - Formulário
Conceitos Básicos
O que são formulários? Os formulários existem para possibilitar o cadastro, pesquisas, envio de comentários, aumentando o poder de interação com os visitantes
dos sites e estão nos sites na internet.
Para um formulário HTM L, ou seja, uma página Web que contém, além de texto, elementos especiais chamados controles, representados por caixas de checagem,
botões tipo rádio, caixas de seleção, campos de texto, etc.
Os usuários preenchem os campos de um formulário submetendo-o em seguida a algum agente de processamento. Neste momento, todas as informações
fornecidas são enviadas a um programa, escritas especialmente para processar esses dados de acordo com alguma necessidade ou especificação.
Em alguns casos os dados são gravados em um banco de dados, em outros, por exemplo, uma nova página é construída, em outros as informações são
encaminhadas via e-mail.
A Tag <form> e seus Principais Atributos
A área de um formulário, na codificação HTM L da página, é delimitada pelo par de marcadores <form> e </form>.
Exemplo:
<html>
<head>
<title> Exemplo de Formulário </title>
</head>
<body>
<form>
Aqui irão entrar os campos do formulário.
</form>
</body>
</html>
<form name="nome_do_formulario" method="valor" action="tratador_do_formulario">
Elementos do_formulario
</form>
Delimita um formulário na página. Todos os elementos do formulário devem vir entre este par de marcadores.
NAME: especifica o nome do formulário. Útil em casos de validação de campos, por exemplo, quando se utiliza uma linguagem de scripts como JavaScript;
METHOD: método que define como os dados serão transmitidos para o programa que irá processá-los.
Deve ter os valores GET ou POST, sendo que a diferença entre estes dois valores está no modo como os dados são empacotados. Normalmente o método Post é
utilizado em formulários de postagem de dados (como num cadastro ou em formulários de contato). O método Get é utilizado na consulta de dados (como num
formulário de busca).
ACTION: indica o endereço do programa que receberá os dados do formulário.
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 Inserção
Formulário é uma excelente ferramenta para trocar informações com os usuários do site. Esse recurso está presente na Barra de Inserção na opção Formulários e
no menu Inserir. Suas propriedades estão presentes no Inspetor de Propriedade.
Barra de Inserção - Formulário
Formulários: insere e configura o formulário na página.
Campo de texto: insere uma caixa de texto.
Campo oculto: insere um campo oculto.
Área de texto: insere uma caixa de texto com múltiplas linhas.
Caixa de seleção: insere uma caixa de seleção.
Botão de opção: insere um botão de opção.
Grupos de botões de opções: insere um grupo do botão de opção.
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.
Botão: insere um botão.
Rótulo: insere um rótulo.
Conjunto de campos: insere texto no código do formulário.
Menu Inserir
Clique no menu Inserir / Formulário. Todas as opções encontradas no menu Inserir / Formulário são semelhantes a da Barra de Inserção , já explicada no
item anterior.
Formulário
Inspetor de Propriedades - Formulário
ID de Formulário: determina um nome ao formulário. O procedimento de nomear um formulário possibilita controlá-lo com uma linguagem, como
Javascript ou Vbscript.
Ação: determina o aplicativo que processará os dados do formulário. Clique na pasta ou digite o caminho para localizar o aplicativo correspondente.
Método: define a maneira como serão processadas e enviadas as informações. Na opção Get as informações são exibidas na barra de endereço e não é
utilizado em formulários longos. Já a opção Post as informações não aparecem.
Destino: define onde será aberta a página.
Tipo de codificação: determina o tipo de codificação das informações do formulário. Só se utiliza esta opção quando trabalhar com informações
específicas.
Classe: determina uma folha de estilo para o formulário.
Depois de tudo configurado no formulário, basta deixar o ponto de inserção dentro do formulário e inserir os campos necessários.
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 variável. Nunca deixe este campo em branco.
Largura em caracteres: define a largura da caixa de texto em caracteres.
Caracteres (máx.): determina o número máximo de caracteres digitado na caixa de texto.
Tipo: determina o tipo de caixa de texto, como: Linha simples - única linha, Várias linhas- várias 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 variável. 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 variável. Nunca deixe este campo em branco.
Número de linhas: define a altura da caixa de texto em linhas.
Tipo: determina o tipo de caixa de texto, como: Linha simples - única linha, Várias linhas - várias linhas e Senha - senha.
Valor Inicial: define um valor inicial para a caixa de texto.
Caixa de Seleção
Inspetor de Propriedades - Caixa de seleção
Nome da caixa de seleção: define um nome para a caixa de seleção. Este nome armazena o valor digitado no campo.
Valor selecionado: define um valor para a caixa de seleção.
Estado inicial: determina um estado inicial para a caixa de seleção como:
Marcado - marcada ou Desmarcado - desmarcada.
Botão de Opção
Inspetor de Propriedades - Radio Button
Botão de opção: define um nome para o botão de opção. Este nome armazena o valor digitado no campo.
Valor selecionado: define um valor para o botão de opção.
Estado inicial: determina um estado inicial para o botão de opção como:
Marcado - marcada ou Desmarcado - desmarcada.
Grupo de Botões de Opções
Essa opção permite que sejam inseridos vários botões de opção de uma só vez.
Nome: define um nome para o grupo. Este nome armazena o valor digitado no campo Valor, como uma variável. Nunca deixe este campo em branco.
Botões de opção: insere todos os botões que farão parte do grupo. A opção Rótulo é o nome do botão, sendo que Valor será o valor do botão. Os botões + e adicionam e subtraem botões. Já as setas posicionam os botões na ordem desejada.
Criar layout usando: determina o layout do grupo. A opção Quebras de linha separa os botões com quebra de linha. Já Tabela é separado por uma tabela.
Janela - Grupo de botões de opção
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 opção clicada (Menu) ou simplesmente será marcada uma opção da lista sem este recurso de link (Lista).
Altura: define a quantidade de itens que a lista exibirá de uma só vez.
Seleções: define quantas opções poderão ser selecionadas da lista.
Selecionados inicialmente: determina qual opção será marcada inicialmente.
Listar valores: define as opções que aparecerão na lista ou no menu. Ao clicar nesse botão abrirá uma janela para a inserção de valores.
A opção Rótulo de item é o rótulo, sendo que a opção Valor é o valor que será atribuído ao rótulo. O botão + e - adiciona e subtrai valores. Já as setas
posicionam os valores.
Listar valores
Menu de Salto
Essa opção cria um menu de salto, utilizado geralmente como navegação alternativa em um web site.
Itens de menu: exibe os itens já criados.
Texto: defineos rótulos que serão exibidos na lista.
Quando selecionado, vá para URL: define um valor para o rótulo Texto. Esse valor pode ser uma URL ou um arquivo. Para indicar basta clicar no botão 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 botão Ir após menu: caso esteja marcada esta opção, será criado um botão Ir que será clicado após ser escolhida uma opção na lista.
Selecionar o primeiro item após a alteração da URL: caso esteja marcada esta opção, o menu sempre retornará a primeira opção da lista após a seleção de um
item.
Campo de Imagem
Inspetor de Propriedades - Campo de imagem
Esse campo de imagem pode ser utilizado no lugar do botão 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 específico.
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 usuário procure arquivos no disco rígido, carregando-os como dados do formulário.
Nome do arquivo: define um nome para o campo de arquivo.
Caracteres (máx): determina o número máximo de caracteres digitado na caixa de texto.
Botão
Inspetor de Propriedades - Botão
Nome do botão: define um nome para o botão. Normalmente é deixado vazio (a não ser que seja controlado por linguagens de script).
Valor: especifica um texto que aparece no botão como rótulo.
Ação: determina uma função para o botão. Enviar formulário é para enviar os dados. Redefinir formulário é para limpar o formulário. E Nenhuma não possui uma
função específica podendo ser programada através de script.
Classe: determina uma folha de estilo para o botão.
Valor
Esse recurso insere um rótulo através das tag <label> </label>. Para inserir esse texto é necessário ir até o código-fonte da página. Para a formatação desse texto
utilize o Inspetor de Propriedade.
Processamento do Formulário
De nada adianta construir um formulário e não ter como processá-lo.
Existem várias tecnologias ligadas ao processamento de um formulário e aqui serão citadas duas delas como exemplo:
Active Server Pages ou ASP, tecnologia da M icrosoft.
Neste caso o programador precisa inserir no código HTM L da página, comandos que consigam acessar o servidor e executar as tarefas exigidas.
A página que contém comandos ASP passa a ter a extensão .asp e não mais .html. M as pelo fato dos scripts serem executados no servidor, o usuário não consegue
ver nenhuma codificação em sua máquina.
Quando utilizada esta tecnologia para processamento de um formulário, o atributo ACTION do marcador FORM indicará o arquivo .asp correspondente ao
processamento do formulário.
Exemplo:
<form name="maladireta" method="post" action="maladireta.asp">
Scripts CGI.
Neste caso o programador precisa escrever scripts CGI ou utilizar CGIs pré-fabricados, disponíveis gratuitamente na Rede, que processem as informações de forma
transparente.
Exemplo:
<form name="cadastro" method="post" action="FormMail.pl">
Atividades
1. Abra a estrutura de site local Dreamweaver e também o documento contato.html (baseado no modelo).
2. Dentro da área do conteúdo, insira um formulário.
3. No Adobe Dreamweaver monte uma diagramação utilizando tabela para o formulário. Essa tabela será inserida no conteúdo do documento.
Tabela:
Tabela Regular (5 linhas x 2 colunas)
Largura: 100%
Espaçamento da célula: 2 - Borda: 0
4. Insira os textos e itens de formulário na tabela. Para isso siga as posições e textos através da figura a seguir.
5. Observe que algumas células foram mescladas, faça o mesmo em sua tabela.
Diagramação com Tabela e Texto
6. Para finalizar configure os campos do formulário. Para isso siga as instruções 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
Introdução
Os comportamentos permitem a interação do usuário com a página através de códigos Javascript pré-formatados. Ao anexar um comportamento a um elemento da
página são especificados uma ação e o evento que a disparará. Diversas ações podem ser disparadas pelo mesmo evento e é possível especificar a ordem em que as
ações ocorrerão.
No Adobe Dreamweaver CS6 é possível inserir um comportamento pelo painel Comportamento que se encontra no menu Janela / Comportamentos.
Para inserir um comportamento basta selecionar um elemento no documentoe através 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 conteúdo no documento;
escolha o menu Janela / Comportamentos.
Será aberto o painel Comportamento para aplicar eventos e ações.
Painel Comportamento
Eventos e Ações
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
Serão mostrados os principais comportamentos da versão CS6 do Dreamweaver.
Chamar JavaScript
Esse recurso é utilizado para chamar uma função ou executar um código 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 página na janela, sendo particularmente útil para alterar o conteúdo de duas ou mais páginas com um clique.
Ir para URL
Aberto em: define a janela onde será carregada a página.
URL: define a URL da página a ser aberta.
Abrir Janela do Navegador
Esse recurso abre uma URL numa nova janela. É possível 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 exibirão ou não na janela.
Barra de ferramentas de navegação: determina a exibição da Barra de Navegação do browser
Barra de ferramentas de local: determina a exibição da Barra de Endereço do browser.
Barra de status: determina a exibição da Barra de Status do browser.
Barra de menus: determina a exibição da Barra de M enu do browser.
Barras de rolagem conforme necessário: determina a exibição das Barras de Rolagem do browser.
Alças de redimensionamento: determina se a janela do browser será redimensionável.
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 botão OK,
utilize esta ação para fornecer informações ao usuário, em vez de apresentar-lhe uma opção.
Mensagem pop-up
Mensagem: define a mensagem que será visualizada na janela.
Efeitos
Uma novidade nessa versão do Dreamweaver é a inclusão de efeitos. É possível fazer um elemento da tela piscar, aparecer, esticar, etc.
Esses efeitos são úteis para chamar a atenção do usuário para algo na tela, como um formulário.
O efeito de Aumentar/Diminuir
Atividades
1. Abra a estrutura de site local Dreamweaver CS6 e também o documento contato.html (baseado no modelo).
2. Selecione o formulário e aplique o comportamento Validate Form, configurando os campos Nome, Email e Fone como obrigatórios.
3. Configure o campo Email para que seja um endereço de email válido.
4. Configure o campo Fone para que seja numérico.
Aula 26 - Mídias/Flash
Inserindo Flash
O Dreamweaver CS6 permite a inclusão de diversos objetos baseados em Flash, como botões, textos e vídeos.
Os objetos incorporados nessa versão já são inseridos através de uma marcação em JavaScript, corrigindo um problema de execução de Activex encontrado em
outras versões do Dreamweaver.
Os arquivos feitos no Adobe Flash possuem a extensão SWF.
Através do menu Inserir/Mídia - SWF;
uma vez inserido, o arquivo pode ser configurado através do inspetor de propriedades.
o arquivo inserido é apresentado "desligado" dentro do Dreamweaver. Para visualizar o flash, basta apertar o botão Executar.
Flash Vídeo
O formato padrão de vídeo utilizado pelo Flash é o FLV. Esse formato é utilizado inclusive pelo Youtube e visto por milhões de pessoas na internet.
No Dreamweaver CS6 é possível inserir um vídeo em flash e escolher qual o "player" que deseja utilizar na execução do vídeo.
Inserir Flash Vídeo
Atividades
1. Abra a estrutura de site local Dreamweaver CS6 e crie uma pasta chamada aula_8. Crie uma nova página e salve-a com o nome de midias.html na pasta criada.
2. Crie um arquivo Flash Vídeo (FLV).
Unidade IV - Web Standard/Tableless
Aula 27 - Web Standards
Definições
Tableless
Aula 28 - Layout em CSS
Definições
Aula 29 - Finalizando o Layout
Imagens de Fundo
M enus de Navegação
Aula 27 - Web Standards
Definições
O W3C (World Wide Web Consortium), juntamente com outros grupos e organismos reguladores, estabeleceu tecnologias para criação e interpretação de
conteúdo para a Web.
Estas tecnologias, que são chamadas de Web Standards, têm como objetivo principal fazer com que o conteúdo desenvolvido dentro destes padrões possa ser
visualizado independente do equipamento (computador, PDA, celular), do tipo do navegador (IE, M ozilla, Opera, Netscape, etc.) e da forma (banda de conexão) com
que o usuário estiver acessando a Internet.
"Web standards têm o objetivo de ser uma base comum... um fundamento para a World Wide Web para que navegadores e outros programas compreendam o
mesmo vocabulário básico".
Eric Meyer - Autor do livro Cascading Style Sheets: The Definitive Guide.
Benefícios do Web Standard
redução dos custos de desenvolvimento (simplificar código, separação entre apresentação e conteúdo);
redução dos custos de manutenção (menos código, código modular). O conteúdo pode ser facilmente reestilizado sem alteração de código;
redução dos custos de hosting (utilização de banda - redução do tamanho e tráfego de arquivos);
facilidade em manter a consistência visual entre os documentos do mesmo site;
ampliação da audiência. Proporcionar web sites acessíveis a uma gama maior de pessoas e um número maior de devices para Internet;
melhor experiência do usuário. Sites mais funcionais. Carregamento mais rápido do conteúdo 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 percepção de qualidade do trabalho produzido;
acessibilidade. Estar em conformidade com as leis e diretrizes (sites de instituições públicas) possibilitando o acesso às pessoas portadoras de
necessidades especiais através 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 fácil utilizando-se tabelas ao invés de CSS.
Web Site Tradicional
O tipo de web site montado antes desse movimento de padronização é conhecido como tradicional. Ele possui as seguintes características:
extensão da mídia impressa;
layouts baseados em tabelas;
camada de apresentação junto com a camada de conteúdo;
códigos inválidos, inacessíveis e semanticamente incorretos.
Web Site Web Standard
Os web sites Web Standard são mais modernos e possuem as seguintes características:
layout baseado em containers (DIVs - Tableless);
uso de Cascading Style Sheets (CSS) para separação entre conteúdo e apresentação;
marcação semanticamente correta;
código válido e acessível (por humanos e máquinas).
Standards Definidos pelo W3
O comitê W3 define quais os padrões utilizados pelos desenvolvedores. Esses padrões são:
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 versão padrão do JavaScript);
SVG - Scalable Vector Graphics.
É importante observar que, dentro de desenvolvimento Web Standard, o HTM L é substituído pelo XHTM L (Extensible Hypertext M arkup Language).
XHTML
O XHTM L é uma versão aprimorada do HTM L tradicional. O XHTM L 1.0 é uma definição 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 informações com XM L.
As diferenças ao escrever um código XHTM L não são 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 Minúsculas 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%">
Não 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" />
Não 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 marcação de tipo de documento (Doctype) pode ser de três tipos:
Strict
Utilizado quando o código do documento é 100% XHTM L. O XHTM 1.0 Strict não permite nenhuma desconformidade com o padrão XHTM L.
Transitional
Este é o tipo mais utilizado. Ele permite a utilização de tags e atributos de formatação, tornando o documento compatível com browsers que não suportam CSS.
Frameset
Este tipo é indicado quando você está utilizando FRAM ES em seu site.
Nos próximos exercícios, 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 marcação <html>.
Tableless
Definições
Ao aplicar as regras de Web Standard, surge um problema referente à maneira tradicional de criação de layouts. A tag <table>, utilizada para a diagramação de
páginas, foge do seu valor semântico correto, que é o de apresentar dados tabulares.
Para solucionar essa incoerência, foi criado o Tableless (sem tabela), método onde cada módulo do web site (cabeçalho, menu, conteúdo, 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 são formatadas posteriormente com estilos de texto CSS. Dessa maneira não são utilizadas imagens para o layout e existe uma separação entre
conteúdo e formatação (visual).
D icas: O Tableless é chamado também de box model (modelo de caixas).
Benefícios do Tableless
Existem diversos benefícios em desenvolver com esse novo método, pois:
reduz o tamanho final dos arquivos (isola 80% do código):
menor tempo de espera para visualização das páginas;
menor consumo de banda (custos).
facilita alterações no layout e na estrutura, reduzindo o custo de manutenção do projeto;
permite manter uma padronização visual ao longo de um projeto mais extenso;
maior acessibilidade a usuários com necessidades especiais e equipamentos móbile como celulares e PDAs.
Divs
Dentro do Tableless, a tag mais importante é a <div>. Utilizada agora para a criação de caixas (e não mais para alinhamento de blocos de parágrafos) essa marcação
é quem cria o esqueleto em XHTM L, que terá sua aparência formatada com estilos CSS. Cada módulo do web site é "etiquetado" com uma div. Podemos criar
quantas divs forem necessárias para o layout, assim como eram criadas tabelas e células. As divs podem conter um menu, o conteúdo do site, imagens de fundo,
banners e etc. Sua posição, cores, bordas, formatação de texto e imagens de fundo são definidas numa folha de estilo separada do código XHTM L. Com
identificações, o código é mais fácil 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 navegação</div>
<div id="conteudo">Aqui entra o conteúdo do web site</div>
D icas: Evite identificar uma div como "menuesquerdo" ou "azul". Se a aparência do site for mudada no futuro, o código fica incoerente, dificultando o
entendimento e manutenção.
Uma div pode ser colocada dentro da outra. Dessa maneira, as propriedades da div de nível superior serão herdadas pelas divs internas.
Exemplo:
<div id="pai">
<div id="filha">Conteúdo da div filha, com heranças da div pai</div>
</div>
Conteúdo
O conteúdo em Web Standard é preocupado em manter a semântica correta, respeitando títulos, listas e parágrafos. Cada parte do conteúdo, layout e navegação
é colocada dentro de sua div correta. O código em Standard é mais organizado e simples de ser entendido pelo desenvolvedor. Todo o texto de conteúdo pode ser
colocado na div de identificação "conteudo". Sua formatação é feita utilizando CSS.
Exemplo:
<div id="conteudo">
<h1>Título da página</h1>
<p>Esse é um parágrafo da div conteúdo</p>
</div>
As imagens do conteúdo, como fotos, banners e gráficos também são colocadas dentro das divs. As imagens que constituem o layout, como fundos de páginas,
topo e rodapé são declaradas em CSS.
Exemplo:
<div id="conteudo">
<h1>Título da página</h1>
<p>Esse é um parágrafo da div conteúdo</p>
<p>Veja a imagem:<img src="img/grafico1.gif" alt="M eu gráfico"></p>
</div>
Navegação
Em Standard é comum a navegação ser colocada em uma div própria e utilizando listas ao invés de parágrafos ou tabelas. Isso permite maior dinamismo em
mudanças de layout, possibilitando inverter a posição de um menu, assim como sua orientação (vertical ou horizontal).
Exemplo:
<div id="menu">
<ul>
<li><a href="#">Item 1</a></li>
</ul>
</div>
D icas: É possível criar um link vazio colocando um # (sustenido) ao invés de um endereço URL
Aula 28 - Layout em CSS
Definições
Em Web Standard, toda a formatação do layout (imagens, cores, tipografia, margens, etc.) é declarada em uma folha de estilo CSS, separada do XHTM L (onde fica
apenas o conteúdo).
Essa forma de desenvolvimento é que permite as vantagens relativas ao desempenho e manutenção, vistas anteriormente.
A formatação será feita em etapas, formatando a disposição geral das divs, o conteúdo e, finalmente, o menu de navegação.
Os estilos CSS utilizados são basicamente os mesmos vistos em outros exemplos e exercícios, porém utilizados com outros objetivos.
Posicionamento e Tamanho de divs
Existem basicamente duas técnicas de construção de layouts utilizando CSS, que podem ser utilizadas em conjunto para criação 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 três (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 alteração.
Exemplo (em CSS):
#esquerda {float:left;}
#direita {float:right;}
Clear
Para que o elemento abaixo de um float não seja afetado, você deve aplicar a propriedade clear com uma das opções a seguir:
clear: left
clear: right
clear: both
Exemplo (em CSS):
#limparesquerda {clear:left;}
#limpardireita {clear:right;}
#limparambas {clear:both;}
Width / Height
Além do posicionamento, também é comum a declaração da largura/altura de uma div. Da mesma maneira que o posicionamento o tamanho das divs pode ser fixo
ou elástico (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 próxima de outra é preciso estar atento às margens e preenchimentos. As tags para esse controle são 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 não 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 Três Colunas
Seguindo os exemplos vistos anteriormente, é possível criar um layout com topo, 3 colunas e rodapé com o seguinte código:
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>Cabeçalho</h1>
</div>
<div id="lateral1">
<h3>Conteúdo 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> Conteúdo 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> Conteúdo 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>Subtítulo </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 formatação básica para o layout, declarada no arquivo estilo01.css (não estão declaradas formatações de aparência 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 criação de páginas no modelo tradicional (com tabelas) as imagens do layout são inseridas com a marcação img. Isso faz com que o layout fique amarrado com
o conteúdo, complicando processos como manutenção e atrasando o carregamento das páginas.
O Web Standard utiliza imagens de fundo para a criação do layout, declarando as informações na folha de estilo CSS. É possível modificar o estilo CSS e dessa
maneira trocar a aparência de todo o web site.
A marcação de imagem de fundo é a mesma vista anteriormente. Veja no exemplo como fica sua versão abreviada, onde são declaradas cor, imagem de fundo e
repetição:
#fundo {background: #CCFF00 url(img/fundo.jpg) repeat-x;}
Menus de Navegação
Utilizando estilos CSS também é possível a criação de barras de navegação, com comportamento parecido com botões feitos em programas gráficos ou com
javascript.
Os menus criados com listas (tag li) podem ser posicionados tanto na horizontal, quanto na vertical. O atributo display (responsável pela exibição de elementos do
XHTM L) é quem cria essa possibilidade.
Também é interessante desligar os símbolos de marcação da lista, utilizando o atributo list-style.
Exemplo:
#menu li {display:inline;
list-style:none;}
D icas: No exemplo quem recebeu a configuração foi o elemento li existente na div menu. Qualquer li que esteja fora dessa div não é afetado.
A maior parte da configuração dos menus em CSS é feita na própria tag "a" (referente ao link). Nessa tag são configurados vários 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 não apenas o texto exibido) é necessário 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, além de cor de fundo, é possível declarar uma imagem. Dessa maneira o efeito é o mesmo de vários portais, onde um degradê de uma cor é
trocado por um degradê de outra cor. Com o <a> exibido em bloco, também é possível declarar uma largura e altura fixas, assim pode-se criar qualquer tipo de
botão.
Uma observação importante, ao criar menus horizontais, é preciso adicionar a propriedade float:left às declarações do #menu a.
Unidade V - Apêndices
Apêndice A - Exemplo Abrangente
Apêndice B - Considerações Finais
Editores
Sites
Apêndice 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
Apêndice A - Exemplo Abrangente
Veja agora como pode ser interessante o uso de folhas de estilo na formatação de uma página.
Página sem Qualquer Formatação
<html>
<head>
<title>Exemplo de tabela</title>
</head>
<body>
<table border="1" width="400" align="center" >
<tr>
<td colspan="5">Distribuição 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 Formatação em HTML
<html>
<head>
</head>
<body>
<tr>
<td colspan="5" align="center" bgcolor="black"><font face="Verdana, Arial" size="4"
color="white">Distribuição 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 Fácil
<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">Distribuição 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 código ficou menor e mais fácil, e o resultado é o mesmo!
Apêndice B - Considerações Finais
Editores
Existe uma variedade de editores HTM L que facilitam o trabalho de criação de páginas Web. Alguns se dedicam à criação de páginas individuais enquanto outros se
encarregam da criação e manutenção de todo o site, chegando a maiores níveis de sofisticação e custo.
CoffeeCup Free HTML 6.0 - Um software para criação de páginas para a web muito fácil 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 série de livros sobre Web Design, Lynda Weinman.
Neste site a autora traz uma série de assuntos ligados ao processo de criação e produção de sites.
Apêndice C - Atividades de HTML
Parte 1
1. No bloco de notas crie um documento HTM L com as seguintes características:
título da página como: "M estres da Pintura | Os maiores artistas reunidos na web";
cor azul escuro (#003366) como fundo da página;
margem esquerda e margem superior igual a 0(zero);
conteúdo descritivo da página (meta description) como: "Biografia, pinturas e informações sobres grandes mestres da pintura";
palavras-chave (meta keywords) como: "pintura, artistas, Van Gogh, Paul Cézanne, Gustav Klimt, Henri M atisse, Joan M iró".
Salve a página com o nome index.html.
2. Crie uma página com o título "Van Gogh", cor de fundo #FFFFFF e margens iguais a 15. Salve a página como vangogh.htm.
3. Crie uma página com o título "Paul Cézanne", cor de fundo #FFFFFF e margens iguais a 15. Salve a página como cezanne.htm.
4. Crie uma página com o título "Gustav Klimt", cor de fundo #FFFFFF e margens iguais a 15. Salve a página como klimt.htm.
5. Crie uma página com o título "Henri M atisse", cor de fundo #FFFFFF e margens iguais a 15. Salve a página como matisse.htm.
6. Crie uma página com o título "Joan M iró", cor de fundo #FFFFFF e margens iguais a 15. Salve a página 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 março de 1853, em uma pequena aldeia de Groot-Zundert, na Holanda.
O irmão mais velho, que também fora batizado como Vincent, nascera um ano antes, na mesma data, mas morrera com apenas seis meses de idade.
Sendo que:
o título deve ser formatado com a tag <h1>;
cada parágrafo 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 Cézanne
Paul Cézanne nasceu em Aix-en-Provence, França, em 1839, filho de um próspero fabricante de chapéus de feltro que se tornou banqueiro em 1847.
Ao contrário de alguns de seus contemporâneos como Vincent van Gogh e Paul Gauguin, Cézanne sempre teve uma vida confortável 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 painéis pintados por Klimt para o auditório da Universidade de Viena renderam-lhe a acusação de "perverter a juventude".
Infelizmente, a obra não sobreviveu para contar sua história, pois em 1945, um incêndio 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 França.
Era filho de um farmacêutico e comerciante de grãos, que sonhava em fazer do filho um próspero 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 cerâmica de Joan M iró compõem a decoração do edifício da Unesco em Paris.
Os quadros, feitos sob encomenda por ocasião da inauguração do escritório, em 1955 e renderam ao artista o Grande Prêmio Guggenheim, de 1958.
Sendo que:
Parte 4
As imagens desse projeto deverão ficar armazenadas em um subdiretório chamado "img" e os caminhos das imagens deverão ser dados em relação a esse diretório.
1. Abra o arquivo vangogh.htm e insira a imagem vangogh.jpg.
Sendo que:
a imagem deve ser inserida logo abaixo do título;
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 relação à página;
deslocamento do texto em relação às bordas da célula igual a 0 (zero);
espaçamento entre células 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 célula da tabela deverá conter as seguintes informações:
Imagem topo.jpg
Altura da célula de 30 pixels, cor de fundo da célula #FFCC00, alinhamento à direita.
Digite os textos Van Gogh | Paul Cézanne | Henri Matisse | Gustav Klimt | Joan Miró. Os textos devem estar em negrito.
Altura da célula de 300 pixels e cor de fundo #FFFFFF.
Imagens baixo.jpg
Parte 6
1. Abra a página index.html. Na terceira linha da tabela defina as propriedades do Iframe.
SRC - página 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 automática;
FRAM EBORDER - borda 0;
2. Ainda na página index.html altere o destino dos links, para que eles possam abrir suas páginas dentro do Iframe (dentro).
Parte 7
1. Crie um arquivo com o nome contato.htm. Nesta página será criado um formulário contendo três campos, além de o botão enviar. A página segue as mesmas
configurações das demais páginas 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;
Botão de enviar, com o value Enviar;
2. Na tag <form> que se inicia é necessário configurar o método e o caminho do CGI que irá processar o formulário. Verifique o caminho nas páginas de instrução
do servidor.
3. Uma vez montado o formulário é necessário inserir nele alguns campos hidden, para o controle do processamento no servidor. Os campos hidden a serem
inseridos estão de acordo com as especificações do servidor gratuito (br.geocities.com) onde o projeto ficará hospedado.
Campo hidden contendo o login.
Campo hidden contendo o título do email.
Campo hidden especificando o endereço da página de confirmação.
Campo hidden contendo os campos nome e email como obrigatórios.
4. Crie uma nova página e salve-a com o nome confirma.htm.
Defina margem esquerda e margem superior igual a 0 (zero);
Dentro desta página insira o título Confirmado;
5. Crie um novo link na página index.htm, apontando para a página 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 configurações:
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 página dos artistas, usando o método de link para página externa.
Parte 10
1. Com base nos conhecimentos adquiridos nas últimas unidades, criaremos um documento formatado com regras de CSS avançado. Para isso peça para o seu
professor o arquivo historia.html e a imagem de fundo e faça a formatação para que ele fique como a figura:
2. Utilize para isso classes, pseudoclasses, formatação de tags e declarações abreviadas.
3. Quando finalizado, salve novamente o documento e faça os testes nos navegadores IE e Firefox.
Parte 11
1. Em um arquivo novo do bloco de notas, criar um documento XHTM L válido (com Doctype Transitional). Esse documento deve conter o título da página "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 conteúdo desse exercício, serão colocados todos os textos das páginas 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 conteúdo deve ser colocado dentro da div correta;
o nome do artista como cabeçalho 2 (h2);
o negrito dos parágrafos com a marcação <strong> ao invés de <b>.
4. Insira cada imagem dos artistas logo após o título com o nome (dentro do parágrafo). Não use o alinhamento da tag img (esse alinhamento será feito com CSS)
5. Na div topo deve ser colocado o título (h1) da página. O título é "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 Cézanne, Henri M atisse, Gustav klimt e Joan M iró;
o nome do artista como cabeçalho 2 (h2);
o negrito dos parágrafos com a marcação <strong> ao invés de <b>.
Salve novamente o documento. Isso conclui a parte XHTM L do exercício, que deve ficar como a figura a seguir:
Parte 12
1. O CSS responsável pela formatação 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. Serão criados seis estilos (a princípio) nessa folha de estilo, sendo:
* (asterisco), com os atributos de margem e preenchimento iguais a zero. Isso evita declarar várias 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 flutuações limpas;
3. Para que o CSS faça efeito no XHTM L é necessário aplicar a folha de estilo. Utilize o método de vínculo, 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 repetição;
na div baixo, colocar a imagem de fundo baixo.jpg, sem repetição;
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, sólida e de cor #003366;
um estilo para o estado sobre do link, modificando a cor do fundo para #B2D1E5.
3. Para finalizar o exercício serão feitas algumas configurações da exibição do conteúdo (fontes, cor de fundo da página, preenchimentos e cores de títulos). São
elas:
atualize o elemento "*", colocando como fonte a família "Trebuchet M S", Arial e sans-serif;
modifique a cor de fundo da página para #003366;
modifique o h1 do topo para que a exibição seja nenhum (none);
modifique os h2 do conteúdo para que tenham:
cor #003366;
tamanho 14pt;
preenchimento superior 20pt;
limpar a flutuação direita.
M odifique os parágrafos do conteúdo para que tenham:
tamanho 10pt;
preenchimento direito e inferior 20pt.
M odifique as imagens do conteúdo para que flutuem à direita
Salve novamente o documento. Isso conclui a parte CSS do exercício, que deve ficar como a imagem a seguir:
Glossário
A
ACRÔNIMO - Os acrônimos são abreviações. Tornaram-se palavras amplamente usadas na Internet, principalmente nos grupos e listas de discussão em inglês. São
palavras derivadas das letras iniciais de uma frase ou diálogo. Por exemplo, IM HO é tradicionalmente usado para "In M y Humble Opinion" - "Em M inha Humilde
Opinião", ASP, que é usada para "As Soon As Possible" - "O mais rápido possível".
AD (ADVERTISEM ENT) - Anúncio, Banner de publicidade.
AD CAMPAIGNS - Qualquer esforço para aumentar o número de visitantes do seu site. Geralmente, mas nem sempre, associada com a inserção de Banners em
outro site, em que os visitantes possam clicar e serem dirigidos para o seu site. Como toda Campanha Publicitária é caracterizada por uma data de início e outra de
fim e por um custo, para a duração total da campanha.
AD CLICKS - Um click (feito pelo visitante) em qualquer publicidade (banner) que o leve de um site para outro (através de um hiperlink).
AD VIEWS - Qualquer página web que contenha uma mensagem publicitária (banner), vista por um visitante. Desde que o visitante a veja, ele pode clicar nela.
Podem existir mais do que uma M ensagem Publicitária em uma página, isto é um ad view se refere ao ato de ver as publicidades existentes em uma página.
AD-HOC QUERY - Consulta eventual. Qualquer consulta que não possa ser previamente determinada, antes do momento da consulta ser emitida. Uma consulta que
consiste em SQL construído dinamicamente, em geral por ferramentas de consulta residentes na estação de trabalho do usuário 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 comparação com padrões anteriores, o
ADO é mais amplo e trabalha com dados de diferentes tipos, inclusive páginas HTM L, planilhas e outros documentos.
ADSL - Sigla de Asymmetric Digital Subscriber Line. É uma nova tecnologia que possibilita a transmissão de dados, em altas velocidades, utilizando cabos telefônicos
comuns.
O sistema trabalha com velocidades assimétricas, ou seja, diferentes em cada sentido, e, por essas características, promete facilitar a vida dos usuários de
Internet. No downstream (tráfego de dados na direção do usuário), a ADSL atinge de 1,5 a 9 megabits por segundo (M bps). E no upstream, as taxas vão de 16 a 640
kilobits/segundo (Kbps). É necessário instalar modems ADSL nas duas pontas. No Brasil, a tecnologia não está disponível comercialmente.
Alias - Significa segundo nome, ou apelido. Pode referenciar um endereço eletrônico alternativo de uma pessoa ou grupo de pessoas, ou um segundo nome de
uma máquina. É também um dos comandos básicos do Unix.
APACHE - Programa Servidor de páginas HTM L, escrito originalmente para ambientes UNIX, depois LINUX. É um dos mais conhecidos e confiáveis servidores WEB e
alem disso é GRÁTIS.
APPLET - Programa escrito para rodar dentro de outro programa (por exemplo, macros do Word ou do Excel). Um applet não pode ser executado de forma
autônoma. Os applets escritos em Java, responsáveis por boa parte da dinâmica da Web, em geral rodam no ambiente do browser.
ARPANET (Advanced Research Projects Agency Network) - Rede de longa distância criada em 1969 pela Advanced Research Projects Agency (ARPA, atualmente
Defense Advanced Projects Research Agency, ou DARPA) em consórcio com as principais universidades e centros de pesquisa dos EUA, com o objetivo específico de
investigar a utilidade da comunicação de dados em alta velocidade para fins militares. É conhecida como a rede-mãe da Internet de hoje e foi colocada fora de
operação em 1990, posto que estruturas alternativas de redes já cumpriam seu papel nos EUA.
B
BACKBONE - Espinha dorsal. Estrutura de nível mais alto em uma rede composta por várias sub-redes. O backbone é composto por linhas de conexão de alta
velocidade, que se conectam as linhas de menor velocidade.
BANDWIDTH - Literalmente "largura de banda", é uma indicação do volume de dados que podem trafegar por uma conexão 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 utilização de uma série de ferramentas para coletar, analisar e extrair informações, que serão utilizadas no auxílio ao processo de
gestão e tomadas de decisão de empresas e organizações. Esse nome foi escolhido como metáfora das decisões governamentais baseadas em espionagem e análise
de dados (caso da CIA)
BUSINESS TO BUSINESS - B2B - É o nome que se dá a transações comerciais entre empresas, mediadas pela Internet.
BUSINESS TO CONSUMER - B2C - Venda ao consumidor, através 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 Gêneva, 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 usuário, por exemplo, exibir páginas
personalizadas.
Para isso, o usuário precisa ter fornecido informações pessoais numa visita anterior ao site.
CRIPTOGRAFIA - Processo que "embaralha" os dados de um documento, seguindo um algoritmo matemático baseado numa chave de encriptação, de maneira que
não permite que terceiros vejam o conteúdo de tal documento. O processo se completa quando, na outra ponta, usando o mesmo software, e com a mesma chave
de encriptação, o processo se reverte - a desincriptação - refazendo o documento original.
CLICK THROUGH - Ao clicar em um banner, você acessa o site do anunciante ou tem acesso a mais informações sobre o produto ou serviço.
CLICK THROUGH RATE - Porcentagem dos visitantes que clicam a M ensagem Publicitária quando de um Ad View. É um bom indicador na eficácia da M ensagem
Publicitária.
CLICKS - O número de clicks que foram feitos em um dado banner. Pode-se vender uma quantidade determinada de cliques em um determinado banner. É como
um cartão de telefone, quando acabam os créditos o cartão deixa de valer. Por exemplo, podem ser vendidos mil cliques. Ao serem realizados mil cliques neste
banner termina o contrato, que é lógico, pode ser renovado.
COTA - É uma quantidade de CPM s que se compra, como no caso do cartão telefônico.
CPA - Custo Por Ação. Outra forma de cobrança é a CPA que cobra por operação bem-sucedida, ou seja, ao ser realizada uma compra ou efetivado um serviço
com origem no click do banner. A CPA é calculada dividindo-se o produto da multiplicação do custo por cliques pelas operações 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 organização com seus clientes.
Todas as interfaces com clientes (Telemarketing, Site, Vendas, Suporte, etc.) são tratados por uma camada intermediária de software, que centraliza e gerencia
esse relacionamento. Existem vários softwares disponíveis no mercado, há vários níveis de preço, mas antes de tudo é necessário 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 programação (API) criado pela M icrosoft. Seu objetivo é dar aos programadores de aplicações gráficas - games, em especial formas de acessar o hardware sem saber exatamente qual dispositivo está instalado no sistema. O DirectX proporciona isso mediante a criação de uma camada
intermediária de software que traduz comandos genéricos nos comandos específicos para cada dispositivo. Na prática, a tecnologia DirectX tira partido dos
recursos de aceleração gráfica do hardware, o que resulta em ganho de performance em aplicações multimídia. Essa API também suporta as tecnologias USB,
FireWire, AGP e M M X.
DOWNLOAD - Ato de transferir uma cópia de um arquivo em um computador remoto para outro computador através 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
tradução de um nome alfanumérico (por exemplo, webmundi.com) para um número IP (por exemplo, 200.300.220.1). Por exemplo, no DNS brasileiro, geram-se todos
os nomes terminados em br. Qualquer outro nome será também traduzido pelo mesmo DNS, mas a partir de informação proveniente de outro DNS (isto se essa
informação não tiver sido previamente obtida).
E
E-BUSINESS - Nome que se dá a transações e comércios realizados eletronicamente através da Internet.
E-COMMERCE - Nome que se dá ao sistema comercial utilizado por uma empresa utilizando a Internet para e-business (muitas vezes um é sinônimo do outro).
EDI - Sistema de transferência eletrônica de dados entre empresas.
F
FAQ (Frequently Asked Questions) - Questões Perguntadas Frequentemente. É um texto que pretende responder, dentro de uma determinada matéria, a
questões colocadas frequentemente pelos usuários.
FIREWALL - Hardware e Software que formam um sistema de proteção que impede a entrada de estranhos em redes privadas ligadas a Internet. (Intranet).
FREEWARE - Software que é distribuído livremente, qualquer software grátis, podendo ser descarregados pela web via FTP, CD-ROM s promocionais entregues
junto com jornais ou revistas, etc.
FTP (File Transfer Protocol) - Protocolo de Transferência de Arquivos. Permite transferir arquivos e programas de uma máquina remota para a sua e vice-versa na
Internet. É o processo pelo qual o usuário pode ter acesso a inúmeros "depósitos" de arquivos (texto, imagens, sons e programas) situados em computadores
remotos de instituições públicas e privadas.
G
GATEWAY - Conjunto de hardware e software que realiza a conversão dos protocolos de comunicação entre redes diferentes, permitindo que as mesmas se
interliguem de forma transparente para o usuário.
GOPHER - Sistema baseado em texto (isto é: não gráfico) para navegação na Internet, no qual o usuário vê menus que indicam arquivos disponíveis em diferentes
computadores da rede. Era intensamente usado nas origens da Internet, passando por certo abandono com a explosão da WEB (a parte gráfica da Internet).
H
HACKER - Pessoa com grande conhecimento de informática, que se utiliza desses conhecimentos para "entrar" em servidores de rede (na Internet ou fora dela)
sem autorização dos responsáveis, o que causa nessas pessoas uma grande sensação de poder; em geral desenvolve seus próprios programas de invasão de sistemas,
e não gosta de se utilizar programas prontos, tipo "receita de bolo".
HIPERLINK / HIPERMÍDIA - São as palavras e/ou figuras que aparecem em destaque nas páginas na web que levam a outros lugares na rede. Pode também fazer
tocar um som, carregar um arquivo e assim por diante. Nesses casos normalmente referenciados como links de hipermídia.
HIPERTEXTO - As páginas que aparecem na janela dos Browsers são resultado de código em hipertexto. Essas páginas podem conter texto em diferentes tamanhos
e estilos, figuras e, o que as define como hipertexto, a capacidade de levar, de forma não linear a outro lugar no sistema, através de um conjunto de hiperlinks.
HIT - Quando alguém vê uma página web, um "hit" é registrado pelo sistema onde a página está armazenada.
HOMEPAGE - É como é chamada a página de abertura de um serviço ou de uma página pessoal. Da homepage, você pode acessar outras páginas através dos
hiperlinks.
HOTLIST - Lista de sites preferidos em antigos navegadores web. Hoje são mais conhecidos como bookmarks.
HOST - Computador principal num ambiente de processamento distribuído. Computador central que controla uma rede. Na Internet é qualquer computador ligado
à rede, não necessariamente um servidor.
I
IP (Internet Protocol) - Protocolo responsável pelo roteamento de pacotes entre dois sistemas que utilizam a família 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, específico para fotografias tem uma das maiores taxas de compressão de dados; entretanto essa alta
taxa é obtida através de um algoritmo que gera perdas, isto é, a imagem compactada por tal método possui perda de informação, porém é usada para fotografias,
que aceitam bem essas perdas, que os especialistas consideram extremamente aceitável, principalmente considerando as altas taxas de compressão (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 - Núcleo de um sistema operacional responsável pela execução das funções básicas desse sistema. O Kernell é uma das partes do sistema operacional
que está sempre residente em memória, e é também a responsável pelo carregamento dos demais módulos sempre que for necessário.
L
LAMER - Hacker principiante, mas que se acha o máximo. São em geral desprezados pelos verdadeiros hackers, já que estão sempre tentando fazer coisas que não
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 extensão, através de cabos coaxiais ou
de par trançado. Uma LAN é criada basicamente para compartilhar recursos, de disco e de periféricos, e garantir a unicidade dos dados críticos de uma empresa.
LINGUAGEM SCRIPT - São linguagens de programação cujo código fonte é interpretado pelo programa em tempo execução. Por exemplo: o browser interpreta
HTM L, Javascript e Vbscript.
LOG - Arquivo, em geral no formato texto, no qual são registrados eventos ocorridos num computador, num determinado período de tempo. Em geral os LOGs
registram um subconjunto do que ocorre no equipamento, subconjunto esse que interessa ao software para registro sobre suas próprias ações.
LOG IN - Início do estabelecimento de uma conexão de um equipamento numa rede, local ou não.
LOG OFF - Término de uma conexão de um equipamento numa rede, local ou não.
M
MICREIRO - Apelido - de tom depreciativo - dado a uma pessoa, profissional ou não, que trabalha apenas em microcomputadores, não sendo um profissional de
máquinas de grande-porte. Em geral os profissionais de máquinas de grande-porte têm um pouco de desprezo pelos "micreiros".
MIDI - Acrônimo de M usical Instrument Digital Interface é o conjunto de padrões utilizados para a comunicação entre um computador e os instrumentos
eletrônicos de música.
MAILING LIST - Uma lista de assinantes que se correspondem por correio eletrônico. Quando um dos assinantes escreve uma carta para um determinado
endereço eletrônico (de gestão da lista) todos os outros a recebem, o que permite que se constituam grupos (privados ou não) de discussão através de correio
eletrônico.
MODEM - Contração da expressão M Odulador-DEM odulador, representa um dispositivo que, acoplado a um computador, permite a conexão de um micro a outro,
ou a uma rede, de forma remota, pela linha telefônica. O M odem converte os sinais digitais de um computador em sinais analógicos, e vice-versa, entendíveis pelo
sistema de telefonia. Os modems sempre trabalham aos pares, um em cada ponta da conexão.
N
NAVEGAÇÃO - O ato de ir visitando diversas páginas da Internet, não necessitando ser uma tarefa que siga um "mapa" da "viagem". A navegação pela WEB é sempre
feita através de um browser, e se dá pelo clicar de palavras, ou frases especialmente marcadas (são os links).
O
OFF-LINE - Termo que designa o estado de um computador quando este não está ligado a outro computador, mas está executando tarefas semelhantes, exceto
quanto a consultas (queries) e atualizações, como se estivesse em tal situação.
OLR - Abreviatura de Off-Line Reader (Leitor Off-Line). Programa que permite ao usuário fazer uma rápida conexão com um site que fornece homepages, notícias,
etc., gravando-as em disco para que o usuário possa lê-las mais tarde, já desconectado do outro computador, e, portanto economizando ligações telefônicas.
ON-LINE - Termo que designa o estado de um computador quando este está ligado a outro computador, pertencente ou não a uma rede, seja via placa de rede,
seja - como é o mais comum - através de modem.
P
PAGEVIEWS - É a página que está aparecendo na sua tela. Por exemplo, você entrou neste site (www.clm.com.br). Abriu a página principal, 1 page view, aí você
clicou no link WebTrends, segunda page view. Se clicar em outro link ou voltar para uma das duas páginas anteriores será a terceira pageview.
PLUG-IN - Software que é acoplado ao browser e que serve para ampliar sua capacidade funcional. Em geral executam tarefas específicas, tais como:
apresentação de vídeos, execução de músicas, ou utilização de desenhos tridimensionais.
PLUG & PLAY - Característica implementada pela M icrosoft, para o seu Sistema Operacional Windows 95, de tal maneira que o próprio sistema encontra automaticamente - cada novo periférico ou placa, instalado no micro, dispensando o usuário da maior, se não toda, parte da configuração técnica dos dispositivos
que colocamos em nossos micros.
PPP - Acrônimo de Point to Point Protocol, é um dos recursos de software que permite a um computador se utilizar do protocolo TCP/IP para conexões através
de uma linha telefônica comum.
POP - Acrônimo de Post Office Protocol (protocolo de agência de correio) é protocolo de e-mail utilizado para armazenar a correspondência de um usuário, até
que ele vá retirá-la para trazer para seu computador.
Q
QUERY - Procedimento de consulta a uma informação em um banco de dados relacional.
R
REAL AUDIO - Programa que habilita a escuta de estações de Rádio através de uma conexão à Internet.
S
SMTP - Acrônimo de Simple M ail Transfer Protocol é o protocolo utilizado para envio dos e-mails, do computador do usuário para o servidor de mensagens da
Internet. Faz parte do conjunto de protocolos TCP/IP.
SUPER-VGA - Evolução do padrão VGA, permite resoluções de até 1.280 x 1.024 pixels. Além disso, com as placas de vídeo atuais, com até 8 M Bytes de memória de
Vídeo-RAM , permitem exibir mais de 16 milhões de cores simultâneas na tela.
SERVIDOR - Numa rede, é um computador que administra e fornece programas e informações para os outros computadores conectados. No modelo clienteservidor, é o programa responsável pelo atendimento a determinado serviço solicitado por um cliente. Serviços como WWW, POP, SM TP, FTP e outros são providos
por servidores. Referindo-se a equipamento, o servidor é um sistema que prova recursos tais como armazenamento de dados, impressão e acesso dial-up para
usuários de uma rede de computadores.
SESSÃO DE VISITANTE - (Visitor Session): Sessão de atividades (todos os hits) de um visitante do web site. Um visitante único é determinado pelo endereço IP ou
cookie. Por padrão, uma sessão de visitante é finalizada quando um visitante estiver inativo por mais de 30 minutos. Este período 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 é distribuído livremente, desde que seja mantido o seu formato original, sem modificações, e seja dado o devido crédito monetário ao
seu autor. O propósito do shareware é que a pessoa use o programa por um determinado tempo (período de teste) que varia de programa para programa
(geralmente de 7 a 30 dias). Após esse período de tempo, se quiser continuar utilizando o programa, o usuário tem a obrigação moral (e legal) de enviar a taxa de
registro cobrada pelo autor. Quando é feito o registro, é normal receber-se um manual impresso do programa, liberação de funcionalidades bloqueadas, assim como
possibilidade de assistência técnica e e-mails informando de novas versões, a qual se tem direito de atualização 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 usuário 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
transmissão 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
transmissão de dados.
TCP/IP - Protocolo de comunicação (Transmission Control Protocol - Internet Protocol) utilizado pelas máquinas da Internet, sejam os servidores, sejam as
estações dos usuários, que capacitam qualquer tipo e modelo de máquina a "falar" com as demais, usando essa linguagem única para a comunicação entre si. A parte
TCP deste protocolo define como é feita a divisão dos dados em pacotes para serem transmitidos à rede, e como esses pacotes devem ser remontados no seu
destino. A parte IP deste protocolo é responsável pela manipulação do endereçamento de cada pacote, garantindo que eles cheguem ao destino correto.
TELNET - Um protocolo de comunicação para conexão a outros computadores, seja localmente, seja através 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 estável e confiável. M esmo hoje a maioria dos Servidores Web roda o UNIX.
UPLOAD - Ato de carregar uma cópia de um programa, de uma página WEB, ou de todo um site, para um servidor (que pode ser uma máquina da Internet), desde
o micro (disco rígido) do usuário. É a operação inversa à denominada DOWNLOAD.
URL - Endereço de um recurso, página, ou site, na Internet. Abreviação de Unified Resource Locator (Localizador de Recursos Unificado) é o "endereço" 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 máquina acesse tal servidor e/ou site, sem se importar (do ponto de vista do usuário) onde está - fisicamente - localizado tal servidor. Com o aumento
do volume de tráfego pela Internet, principalmente devido a WEB, alguns países estão adicionando duas letras à parte da organização na URL; como exemplo no
Brasil a maioria dos servidores possuem a extensão .br ao final do código da organização, como no exemplo: http://www.quark.com.br.
USENET - Contração da expressão USEr NETwork (rede de usuários), representa um grupo de sistemas de acesso público, na Internet, que permite que se
troquem mensagens dentro de grupos de discussão.
UUENCODE - M étodo de codificação no qual um arquivo binário é convertido em arquivo ASCII.
V
VESA - Acrônimo de Vídeo Electronics Standards Association (Associações de Normas para Videoeletrônico); reúne os principais fabricantes de monitores de vídeo
e definiu os padrões VL-Bus e também VGA e Super-VGA.
VGA - Acrônimo de Vídeo Graphics Array é um padrão antigo de exibição de dados na tela. Sua resolução máxima é de 640 x 480 pixels. Hoje só é utilizada por
compatibilidade com programas mais antigos.
VÍRUS - Em computação designa um programa contendo em seu código rotinas cuja finalidade básica é de disseminar, como seu homônimo biológico. Vários
sintomas são característicos da presença de um vírus de computador, tais como: diminuição do desempenho da máquina, apagamento inexplicável de arquivos,
diminuição de memória RAM livre, etc. Um bom site para descobrir mais sobre Vírus de computador, em português está na URL
http://www.geocities.com/Eureka/5301/.
VRML - Acrônimo de Virtual Reality M odelling Language, é uma linguagem de programação que estende a capacidade da linguagem HTM L, permitindo, por
exemplo, se construir sites simulando ambientes tridimensionais (3D) interativos na Web.
W
WAN - Acrônimo de Wide Area Netwaork (rede de área larga) é uma rede de computadores que interliga entre si diversas redes locais. A área de abrangência 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. Não consegue
ainda desenvolver suas próprias técnicas.
WEB - A parte gráfica da Internet, responsável pela explosão da Internet, antes restrita apenas a usuários localizados em Universidades e nos meios militares
americanos. Baseia-se na linguagem HTM L para conseguir criar a interface gráfica necessária.
WEBCRAWLER - Site na Web que funciona como um diretório de endereços URL. O usuário pode realizar pesquisas através de algumas palavras-chave, e o
programa faz uma busca em enormes bases de dados compiladas pela empresa que sedia o WebCrawler.
WEBMASTER - Pessoa responsável pela operação de um site ou um grupo de sites. Também é utilizado para designar o responsável pela operação de um Servidor
Web.
WEBTV - M étodo de navegação pela web que utiliza um aparelho de TV, e uma "set top-box" que transfere os sinais do cabo de TV por assinatura para visualização
na TV. A WebTV é mais rápida que uma conexão por modem, e para quem não quiser usar um computador só para navegar na Internet é muito mais barato. No Brasil
só existem experiências neste sentido, muito embora esteja em franco crescimento nos EUA.
WEBTRENDS - Família de softwares líderes em SITE M ETRICS (medição de parâmetros de um site), principalmente Análise de Tráfego, quantificação e qualificação
de visitantes, gerenciamento do site, alerta e monitoramento, etc.
Z
ZIP - Extensão que indica um arquivo compactado através de um programa do tipo PKZIP ou WINZIP. É o padrão mais utilizado no mundo da informática para
diminuição do tamanho de arquivos. É seguido de perto pelo padrão ARJ.
ZMODEM - Protocolo de comunicação assíncrona de dados, utilizado em aplicações de acesso remoto entre modems. Este protocolo é o mais rápido, mais flexível
e confiável, para transmissão de dados entre microcomputadores e possui correção de erros de transmissão. Só como comparação: o uso do XM ODEM , o protocolo
anterior, causa perda total dos dados recebidos se a conexão cair a qualquer momento, durante a transferência, com o ZM ODEM a transferência é executada a
partir do ponto em que parou a recepção dos dados na seção
anterior.
Bibliografia
Livros
GIM ENES, Lucas Correa. CAM ARGO, Daniel Furtado. Dreamweaver CS5.5 e HTML com CSS e Tableless. People Educação, 2012.
Anderson Vieira / Alta Books. Macromedia Dreamweaver 8: Guia Prático e Visual
Silvana Tauhata Ynemine / Visual Books. Dreamweaver 8
Fabricio M anzi / Érica. Dreamweaver 8: Criação 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 rápida. Editora Novatec.
LEM AY, Laura. Aprenda em 1 semana HTML 4. Editora Campus.
M ULLEN, Robert. HTML 4 Guia de referência do programador. Editora Ciência 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

Transcrição

Documentos relacionados

CSS

Aulas de agosto na Casa Canela!

Lista de propiedades CSS

Menu degustação … / Tasting menu

Folhas de Estilo

Felippe Velasques Giriboni

Microsoft Internet Explorer

TRIPOINTER™

PIER 39 Resource Guide Brazil

Jogabilidade: 9,8 Gráficos: 10 Som: 10 Diversão: 10

CitiDirect BESM

CSS - Kikinho