112

12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

  • Upload
    vohanh

  • View
    243

  • Download
    3

Embed Size (px)

Citation preview

Page 1: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos
Page 2: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos
Page 3: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Dreamweaver CS6

Autor(a): Daniel Furtado CamargoAtualização: Aline Alves SallesCódigo: 141012A

Julho/2013Copyright© 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 ououtros meios, sem prévia autorização por escrito da NEWEDUCATION Sistema de Ensino para Educação Profissional.

www.neweducation.com.br

Page 4: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

ApresentaçãoO Adobe Dreamweaver CS6 é um excelente editor profissional de HTML 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 tipode site.

O Adobe Dreamweaver CS6 permite construir aplicativos dinâmicos para Web com suporte para bancos de dados, porém neste material vamos trabalhar apenascom o design de sites.

HTML (Hypertext Markup Language ou Linguagem de Marcaçã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 SGML (Standard Generalized Markup Language - Padrão Genérico para Linguagens de Marcação), o HTML

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 HTMLA linguagem HTML foi originalmente criada por Tim Berners-Lee quando ele trabalhava como pesquisador para o CERN e popularizada pelo aparecimento do

browser Mosaic criado por Marc Andreessen quando ele estudava na Universidade de Illinois. Durante os anos noventa a linguagem espalhou-se com o crescimentoexplosivo da Web, expandindo-se de várias maneiras.

O fato de o HTML depender de autores de páginas e de vendedores que compartilhassem as mesmas convenções acabou motivando o trabalho conjunto nacriação de especificações para a linguagem.

A primeira versão da linguagem HTML surgiu em 1992, seguida do HTML+, em 1993. Em novembro de 95 foi criado o HTML 2.0 sob a direção da EITF (InternetEngineering 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. Osesforços do grupo de trabalho do Consórcio WWW para codificar práticas comuns em voga até o ano de 1996 resultaram no HTML 3.2, especificado em janeiro de97.

Atualmente o HTML se encontra na versão 5.Grande parte das pessoas concorda que:

os documentos HTML 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 dodocumento.

VersõesExiste 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 HTML. São especificações criadas pelos grupos de trabalho W3C e votadas pelos Membrosdo 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 é apropriadapara uso geral.

No momento em que este material está sendo desenvolvido, HTML 4.01 é recomendada como a versão mais atual da linguagem, trazendo uma série denovas 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 HTML 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. HTML 4 incluicaracterísticas que fazem a Web mais acessível a quem tem problemas de visão ou outras deficiências.

XHTML:O XHTML, ou eXtensible Hypertext Markup Language, é uma reformulação da linguagem de marcação HTML baseada em XML. Combina as tags de marcação HTML

com regras da XML; 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 XHTML consegue ser interpretado por qualquer dispositivo, independentemente da plataforma utilizada, pois as marcações possuem sentido semântico para asmáquinas. O HTML não consegue esta implementação. No entanto, não existem muitas diferenças entre o HTML e o XHTML.

Para verificar se uma página XHTML 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 HTML e CSS.

Ensinar as tags HTML.

Ensinar as propriedades CSS.

Ensinar Web Standards

Criar um Web Site completo.

Page 5: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Unidade I - IntroduçãoAula 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

Page 6: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Aula 01 - Interface do Dreamweaver CS6O 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 demú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 TrabalhoO 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éisficam 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éisencaixados à 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 InicialAo 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 CS6Elementos da Área de Trabalho

Área de trabalho do Dreamweaver CS6

Page 7: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

A. Barra de Menus;

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 HTML, 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 eopçõ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 ferramentasA 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 HTML é gerado automaticamente. Para exemplificar isso digite "Brasil Educação" na Área de Trabalho e cliqueno 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 HTML, que são colocadas conforme são inseridas no

Page 8: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

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 (Meta, 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 permiteacessar todos os arquivos e pastas do seu HD (Disco Local).

Page 9: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Painel de ArquivosNa 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 StatusA 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 nodocumento (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õesatuais da janela do documento (em pixels);

Tamanho do documento e tempo estimado : mostra o tamanho do documento incluindo os arquivos dependentes. Mostrando o tempo estimado paracarregá-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 asdimensõ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 x480, padrão), por exemplo, será o tamanho da janela a ser visualizada na resolução 640 x 480 pixels.

Editar Tamanho da JanelaAo 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 tamanhode 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 modoprojeto 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 propriedadesque aparecerão no inspetor de propriedades.

As propriedades exibidas inicialmente para cada elemento são as mais comuns.

Page 10: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Inspetor de Propriedades

Page 11: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Aula 02 - Configuração do SiteDefinindo um SiteUm 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 decomum 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 SiteA 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 formaevitam-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 oconteú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 porele. 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 LocalNo 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.

Page 12: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

É apresentado um assistente para a criação da estrutura do site:

Configuração do site para DW_CS6Para 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 mesmamaneira 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, mascada 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

Abrindo um Site Local

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:

clique no menu Site / Gerenciar Sites;

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.

Page 13: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

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 apasta referente ao seu site.

Abrindo um Site LocalÉ importante ao abrir o Adobe Dreamweaver CS6 indicar qual será a estrutura de site local usada. Se houver mais de uma estrutura criada:

clique no menu Site / Gerenciar Sites;

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 LocalA 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.

Page 14: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Atividades1. 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.

Page 15: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Unidade II - Elementos Básicos de HTML e Desenvolvimento do SiteAula 03 - Página

Páginas XHTML

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 HTML do Tipo WYSIWYG

Inspetor de Propriedade

Barra de Inserção

Aula 06 - AtividadesAula 07 - A Linguagem CSS

CSS

Por que usar CSS em Páginas Web?

Conceitos Básicos

Métodos de Uso das folhas de Estilo

Medidas 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 Margin 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

Inspetor de Propriedades

Imagem de Fundo

Page 16: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Aula 13 - AtividadesAula 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 15 - AtividadesAula 16 - Link

Tipos de Link

Inspetor de Propriedade

Atividades

Page 17: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Aula 03 - PáginaPáginas XHTMLNo Dreamweaver CS6 o formato padrão de documento é o XHTML 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 BrancoPara criar um documento em branco, com as marcações iniciais do XHTML:

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 documentoO 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ãoTexto Semanticamente CorretoExiste uma preocupação muito grande na produção de textos com a semântica correta em HTML. 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óprioweb site).

Page 18: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

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>HTML</h1><p><b>HTML</b> (acrônimo para a <i>HyperText Markup Language</i>, que significa Linguagem de Marcaçã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 HTML 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 HTML foram definidas com regras sintáticas flexíveis, o que ajudou aqueles sem familiaridade com a publicação na Web. Atualmente a

sintaxe do HTML é muito mais rígida, permitindo um código mais preciso. Através do tempo, a utilização de ferramentas para autoria de HTML aumentou, assim comoa 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ãolonge de ser um código HTML válido.</p>

<h2>Etiquetas</h2>Todo documento HTML 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áginaOs documentos HTML 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 HTML (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 HTML.

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

Page 19: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

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

Page 20: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

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 HTML;

Formulário de normalização: exibe o caminho da pasta raiz do site.

Imagem de Rastreamento

Propriedades da Página- Imagem de RastreamentoImagem 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.

Page 21: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Atividades1. 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)

Margens (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 HTML.

Page 22: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Aula 04 - Criação de uma Página BásicaConceitos BásicosUma página HTML é um arquivo-texto simples (ASCII) contendo o texto da página e os comandos HTML 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.Dicas: XHTML:Em XHTML, 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.Dicas: XHTML:Em XHTML, 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 XHTMLAlguns 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 HTML deve ser gravado com a extensão .htm ou html.Sendo a página HTML 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 HTML 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 oscomandos.

Isto não implica, no entanto, na não necessidade de se conhecer HTML. Quem conhece a linguagem HTML consegue compreender o código gerado peloseditores 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áginaUma 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áginaO 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.

Dicas: 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 DocumentoAtualmente existem vários tipos de HTML e XHTML (HTML 4.01 Strict, HTML 4.01 Transitional, XHTML 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 HTML).Veja o exemplo da marcação para XHTML 1.0 Transitional:<!DOCTIPO html PUBLIC "-//W3C//DTD XHTML 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 HTML 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 porweb robots e buscadores.

Principais Marcadores do Cabeçalho da Página

<title> Título da página </title>

Page 23: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

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 poucaspalavras.

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ãotenha 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.Dicas: 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ãoencontram 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 forcolocada 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.">Dicas: 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.Dicas: 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;

Page 24: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

leftmargin - margem esquerda.

Exemplo:<body bgcolor="#000000" link="#FFFF00" vlink="#FF00FF" alink="#00FF00">Dicas: 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.

Page 25: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Aula 05 - TextoEditor de HTML do Tipo WYSIWYGPor ser um editor de HTML 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.Dica: 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 />).Inspetor de PropriedadeO 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 - TextoFormato: 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

Heading 2 - <Ctrl> + 2

Heading 6 - <Ctrl> + 6

E para o parágrafo o atalho é <Ctrl> + <Shift> + PFonte: 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 fontesPara 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. Modificar o tamanho de um texto não altera oseu 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 detexto 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 painelserá 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 escolhero 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, casoqueira 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çãoAlé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.

Page 26: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Barra de Inserção - Texto

Page 27: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Aula 06 - Atividades1. Dentro do site Dreamweaver CS6 crie uma nova pasta chamada aula_2.2. Crie um novo documento HTML 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.

Page 28: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Aula 07 - A Linguagem CSSCSSCSS (Cascading SyleSheets ou Folhas de Estilos em Cascata) é uma tecnologia padronizada pela W3C (nasceu em meados de 1996), que não é parte do HTML

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 atributostipográ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.Dicas: 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.Dicas: 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 HTML e isso pode ser verificado na própria documentação da

HTML 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ísticaimplementada.

Assim, torna-se importante ainda o uso dos principais browsers do mercado para testar os recursos do CSS.Conceitos BásicosPara 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 HTML, mas sem os sinais de maior e menor. Também podem serutilizadas 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>Dicas: É 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 EstiloExistem 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 HTML..

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étodoanterior, 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 HTML através do atributo STYLE.

Exemplo de método In-LineExemplo:<html><head></head><body><h1 style="font-family:Impact;background:yellow;color:red">

Page 29: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Este é um titulo HTML 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 destamaneira, as definições colocadas ali valem para toda a extensão daquele arquivo HTML. O atributo Tipo="text/css" quer dizer que o estilo se trata de umtipo MIME, para que os browsers que não suportam CSS ignorem o código.

<html><head><style Tipo="text/css"><!--h1 {font-family:impact;background:yellow;color:red;}p {color:green;}--></style></head><body><h1>Este é um titulo HTML usando CSS</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 HTML usem estilos definidos em um único arquivo central. A grande vantagem deste método é que, sevocê 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>Este é um titulo HTML usando CSS</h1><p>Cascading Style Sheet</p></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çõesde estilos, mas a importação pode ser combinada.

Exemplo:<html><head>

Page 30: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

<style Tipo="text/css"><!--@import url(estilos.css);--></style></head><body><h1>Este é um título HTML usando CSS</h1><p>Cascading Style Sheet</p></body></html>

Exemplo utilizando método ImportaçãoMedidas UtilizadasNa 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)CoresNas tags padrão HTML 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 CSSVocê 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 controlesobre 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><style Tipo="text/css"><!--.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>

Page 31: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Exemplo de ClasseDicas: 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çãode 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ó podeser 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 emvermelho.

Exemplo:<html><head><style Tipo="text/css"><!--#preço {color:red}--></style></head><body><p>Notebook HP</p><p id="preço">R$ 3500,00</p></body></html>Dicas: O nome da classe única, que pode ser qualquer um (não numérico), é identificado pelo "#".

Redefinindo Tags

Ao redefinir uma tag HTML 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><style Tipo="text/css"><!--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 redefinidaAs 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><style Tipo="text/css"><!--p, h1, h2 {font-family:Arial;}

Page 32: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

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 TextoAs 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 deveobedecer aos limites impostos por cada browser.

Exemplo:<html><head><title>Definindo indentação</title><style Tipo="text/css"><!--.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><style Tipo="text/css"><!--.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>

Page 33: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

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><style Tipo="text/css"><!--.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 cadapalavra 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><style Tipo="text/css"><!--.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>

Page 34: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

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><style Tipo="text/css"><!--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 linhasEspaçamento entre linhas Espaçamento entre linhas Espaçamento entre linhas </h2>

</body></html>

Exemplo da propriedade line-height

Page 35: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Aula 08 - Formatação com CSSEstilo CSSA 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 HTML, é 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 TagsA primeira maneira mais útil de se utilizar estilos CSS é alterando as propriedades de tags existentes no documento HTML.. É 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 HTML é utilizado o painel Estilos CSS, visto na figura a seguir através dos passos:

Painel CSS StylesObserve 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 HTML.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;

Page 36: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

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 HTML.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 CSSUma 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.

Page 37: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Atividades1. 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).

Page 38: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Aula 09 - Classes em CSSInserindo um CSS PersonalizadoComo visto anteriormente, o CSS é uma linguagem complementar ao HTML 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 edefinida.

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áginaespecí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 CSSApó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.

Inspetor de Propriedades

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çãoClasse no Inspetor de Propriedade.

Inspetor de PropriedadesEditando um CSSApó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.

Page 39: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

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 estilosArquivo/ 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.

Page 40: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Atividades1. 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.

Page 41: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Aula 10 - Abreviações Comuns do CSSAbreviaçõesUm 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 FontA 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

MS). Nesse caso é preciso utilizar aspas ("Comic Sans MS").Abreviação de Margin e PaddingAs 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; /* Margem superior */margin-bottom:0px; /* Margem inferior */margin-left:10px; /* Margem esquerda */margin-right:20px; /* Margem 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 BackgroundAtualmente 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 BorderAlé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 */

Page 42: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

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.

Page 43: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Aula 11 - Tags, Classes e Seletores Especiais em CSSPrincipais usos de Tags, Classes e Seletores Especiais em CSSUm 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 HTML. 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 ClasseUm "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">Meu 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 HTML.Uma maneira mais "compacta" de criar esse código seria:CSS -h1 {color:#CC0;}h2 {color:#660;}p {font:10pt Verdana;}HTML -<h1>Meu 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 HTML.Elementos FilhosNão são todas as situações que permitem uma modificação de todas as tags de um documento HTML. Muitas 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 {

Page 44: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

color:#690;}h2 strong {color: #000;}HTML -<h2>Meu texto merece um <strong>destaque</strong></h2><p>Mas 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 ClassesImagine 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 {font-family: Georgia;color: #069;}h3 {font-family: Georgia;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 {font-family: Georgia;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 -* {font-family: Georgia;}Onde o asterisco (*) é utilizado para redefinir todas as tags do HTML.Seletores de Atributos EspecíficosUma 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>

Page 45: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

<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 HTML, 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.

Page 46: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Aula 12 - ImagemFormatos de Arquivos de ImagemExistem 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). Prefirasempre 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 queseja 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 queiraclique 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 detela utilizados por deficientes visuais.

Painel Arquivos (Files)

Page 47: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

É 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 oarquivo 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 apartir 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.

Inspetor de PropriedadesÉ 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 sobreela. 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 aoAdobe 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 FundoAs 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.

Page 48: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Aula 13 - Atividades1. 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. Modifique também a cor da página para #96CAFC.4. Salve com o nome de imagens.html e visualize no navegador.

Page 49: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Aula 14 - TabelasO Uso de TabelasAtualmente 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 otamanho 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 opreenchimento 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 seralterado 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

Page 50: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

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élulaAtravé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 - LinhaPara 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 - LinhaPropriedades da Tabela

Page 51: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

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 preenchimentodigite 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élulaAlgumas 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) assimcomo 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 estejaselecionada 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á adicionadaessa 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.

Page 52: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

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á adicionadaessa 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. Cliqueno 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 pelalargura 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 TabelaO 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;

Page 53: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

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.

Page 54: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Aula 15 - Atividades1. 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. Modifique 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 largura4. Salve com o nome de tabelas1.html e visualize no navegador.

Page 55: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Aula 16 - LinkTipos de LinkO 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.Inspetor de Propriedade

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 sejasalvo 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.

Page 56: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Atividades1. 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.

Page 57: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Unidade III - Complementando SiteAula 17- Layout

O Sucesso de um Web Site

Tabelas

Barra de Inserção Layout

Inserindo as Tabelas de Layout

Aula 18 - AtividadesAula 19 - Modelo

Modelos

Salvando um Modelo

Propriedades do Modelo

Criando Documentos

Outros Recursos

Editando e Atualizando um Modelo

Aula 20 - AtividadesAula 21 - Web Standard/Tableless

Padrão Tableless

Criando as Divs

Box Model

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

Menu 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

Page 58: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Aula 17 - LayoutO Sucesso de um Web SiteUma 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.TabelasA 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 localde 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 XML em documentosHTML 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 LayoutPara 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.

Page 59: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

A tabela do topo

Meio

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 (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

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 (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

Page 60: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Aula 18 - Atividades1. 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. Modifique 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. Modifique a propriedade Preenchimento da célula da segunda tabela para o valor 5 pixels.9. Modifique 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.

Page 61: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Aula 19 - ModelosModelosUm dos principais recursos para facilitar a criação de web sites com múltiplas páginas é o uso de Modelos. É 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 transformaruma página HTML em um modelo através do comando Arquivo/Salvar como modelo.

Salvando um ModeloSerá utilizado o arquivo feito anteriormente como base para a construção de um web site completo. Para isso esse arquivo será gravado como um Modelo 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 doweb 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ávelA 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 markupdo modelo.

Criando DocumentosUma vez criado o modelo, é importante salvar novamente o documento. É recomendável fechar o modelo antes de criar novos documentos, evitando problemas de

atualização.

Page 62: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

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 desejaaplicar 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 quandofor 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 emudanç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.

Page 63: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Janela Propriedades do modeloA 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 omodelo 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 opreenchimento 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 variaconforme 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;

Page 64: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

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á estudadasem 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ãopoderá 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 emuma 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 ModeloA 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.

Page 65: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Aula 20 - Atividades1. 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 CS64. Crie novos arquivos baseados no modelo layout1. Para cada opção do menu deverá ser criado um arquivo.Modifique 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 omodelo.

6. Visualize no navegador um dos arquivos criados e teste a sua navegação.

Page 66: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Aula 21 - Web Standard/TablelessPadrão TablelessAs definições de regras para o uso da linguagem HTML 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 DivsA 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 HTML) 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 ModeloUm 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.

Page 67: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

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;

Modifique 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 maneiraA 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.

Page 68: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Atividades1. 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">5. Configure um novo estilo CSS para essa DIV com as características:

Caixa/Margin - Right - 170 pixels

6. Insira uma nova DIV, com o nome de Rodapé e Inserir After tag - <div id="Conteudo">7. Configure um novo estilo CSS para essa DIV com as características:

Caixa/Background color - #663333

Caixa/Height - 40 pixels

Caixa/Clear - Both

8. Salve o arquivo tableless.html e o arquivo tableless.css.

Page 69: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Aula 22 - Box Model/AcabamentoIntroduçãoNo 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 HMTL. Dessa maneira é simples atualizar um web site, pois o conteúdo não interfere na interface e vice-versa.Imagens de FundoA 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.

Page 70: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Atividades1. 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 Model - 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 oocupa.

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, quandoapontados 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.

Page 71: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos
Page 72: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Aula 23 - AP Div/LayerLayersOutra 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 Model 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;

Page 73: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

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 valorVisible 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 oconteú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 APO 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 aopçã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çõesevita a sobreposição de camadas.

Painel Elementos AP

Page 74: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Atividades1. 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. Modifique 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.

Page 75: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Aula 24 - FormulárioConceitos BásicosO 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 HTML, 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 AtributosA área de um formulário, na codificação HTML 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 numformulá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/FomMail.pl" method="post">Barra de InserçãoFormulá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árioFormulá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.

Page 76: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

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 noitem anterior.

Formulário

Inspetor de Propriedades

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, comoJavascript 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çõesespecí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 textoID: 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 OcultoCampo 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 textoCampo 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.Largura em caracteres: define a largura da caixa de texto em caracteres.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.Classe: determina um estilo para a caixa de texto.

Page 77: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Caixa de Seleção

Inspetor de Propriedades - Caixa de seleçãoNome 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.Classe: determina um estilo para a caixa de texto.

Botão de Opção

Inspetor de Propriedades - Radio ButtonBotã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.Classe: determina um estilo para a caixa de texto.

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/ListaSelecionar: define um nome para a lista. Este nome armazena o valor digitado no campo ListaTipo: 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.Classe: determina um estilo para a caixa de texto.

Listar valores

Page 78: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

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 saltoID 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 imagemEsse 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.

Classe: determina um estilo para a caixa de texto.

Campo de Arquivo

Inspetor de Propriedades - Campo de arquivoEsse 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.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.Classe: determina um estilo para a caixa de texto.

Botão

Inspetor de Propriedades - BotãoNome 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 textoutilize o Inspetor de Propriedade.

Processamento do FormulárioDe 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:

Page 79: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Active Server Pages ou ASP, tecnologia da Microsoft.

Neste caso o programador precisa inserir no código HTML 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. Mas 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 formatransparente.

Exemplo:<form name="cadastro" method="post" action="FormMail.pl">

Page 80: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Atividades1. 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 Texto6. 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)

7. Salve novamente o arquivo e visualize-o no navegador.

Page 81: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Aula 25 - ComportamentosIntroduçãoOs 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 asaçõ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çõesMostrar 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 ComportamentosSerã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.

Page 82: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Alterar propriedadeTipo 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 URLAberto 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 muitoesse recurso em pop-ups e em galerias de imagem.

Open Browser JanelaURL 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 browserBarra 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 Menu 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.

Page 83: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Mensagem pop-upMensagem: 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

Page 84: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Atividades1. 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.5. Salve novamente o arquivo e visualize-o no navegador.

Page 85: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Aula 26 - Mídias/FlashInserindo FlashO 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ídeoO 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

Page 86: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Atividades1. 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).3. Salve novamente o arquivo e visualize-o no navegador.

Page 87: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Unidade IV - Web Standard/TablelessAula 27 - Web Standards

Definições

Tableless

Aula 28 - Layout em CSS

Definições

Aula 29 - Finalizando o Layout

Imagens de Fundo

Menus de Navegação

Page 88: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Aula 27 - Web StandardsDefiniçõesO 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, Mozilla, Opera, Netscape, etc.) e da forma (banda de conexão) comque 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 omesmo 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 comnavegadores;

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 denecessidades 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:

XHTML - Extensible Hypertext Markup Language;

XML - Extensible Markup Language;

CSS - Cascading Style Sheets;

DOM - Document Object Model;

ECMAScript 262 (a versão padrão do JavaScript);

SVG - Scalable Vector Graphics.

É importante observar que, dentro de desenvolvimento Web Standard, o HTML é substituído pelo XHTML (Extensible Hypertext Markup Language).

XHTML

O XHTML é uma versão aprimorada do HTML tradicional. O XHTML 1.0 é uma definição de HTML em conformidade com as regras do XML.Isso quer dizer que utilizando XHTM você tem a vantagem de poder utilizar plenamente o HTML, e o poder de manipular informações com XML.As diferenças ao escrever um código XHTML 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:

Page 89: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

<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% XHTML. O XHTM 1.0 Strict não permite nenhuma desconformidade com o padrão XHTML.

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 FRAMES em seu site.Nos próximos exercícios, será utilizado o Doctype Transitional. Sua sintaxe é:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 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 depá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

Page 90: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

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).Dicas: 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 XHTML, que terá sua aparência formatada com estilos CSS. Cada módulo do web site é "etiquetado" com uma div. Podemos criarquantas 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 XHTML. Comidentificaçõ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>Dicas: 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 sercolocado 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="Meu 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 emmudanç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><li><a href="#">Item 2</a></li><li><a href="#">Item 3</a></li><li><a href="#">Item 4</a></li></ul></div>Dicas: É possível criar um link vazio colocando um # (sustenido) ao invés de um endereço URL

Page 91: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Aula 28 - Layout em CSSDefiniçõesEm Web Standard, toda a formatação do layout (imagens, cores, tipografia, margens, etc.) é declarada em uma folha de estilo CSS, separada do XHTML (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 fixoou 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 XHTML 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>

Page 92: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

</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. Maecenas 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. Maecenas 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. Maecenas 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 XHTML 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 é:

Page 93: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos
Page 94: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Aula 29 - Finalizando o LayoutImagens de FundoNa 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çãoUtilizando 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

XHTML) é 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;}Dicas: 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 debotão.

Uma observação importante, ao criar menus horizontais, é preciso adicionar a propriedade float:left às declarações do #menu a.

Page 95: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Unidade V - ApêndicesApêndice A - Exemplo AbrangenteApê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

Page 96: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Apêndice A - Exemplo AbrangenteVeja 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">Micros</td> <td colspan="2">Impressoras</td></tr><tr><td>PC</td><td>MAC</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><title>Exemplo de tabela</title></head><body><table border="1" width="400" align="center" ><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">&nbsp;</td> <td colspan="2" align="center" bgcolor="yellow"> <font face="Verdana, Arial" size="4"color="red">Micros</font></td><td colspan="2" align="center" bgcolor="yellow"> <font face="Verdana, Arial" size="4"

Page 97: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

color="red">Impressoras</font></td></tr><tr><td align="center" bgcolor="yellow"> <font face="Verdana, Arial" size="4"color="red">PC</font></td><td align="center" bgcolor="yellow"> <font face="Verdana, Arial" size="4"color="red">MAC</font></td><td align="center" bgcolor="yellow"> <font face="Verdana, Arial" size="4"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><td width="21%" align="center" bgcolor="white"><font face="Times New Roman" size="4"color="black">5</font></td><td width="21%" align="center" bgcolor="white"><font face="Times New Roman" size="4"color="black">3</font></td><td width="21%" align="center" bgcolor="white"><font face="Times New Roman" size="4"color="black">1</font></td></tr><tr><td align="center" bgcolor="yellow"><font face="Verdana, Arial" size="4"color="red">RJ</font></td><td align="center" bgcolor="white"><font face="Times New Roman" size="4"color="black">20</font></td><td align="center" bgcolor="white"><font face="Times New Roman" size="4"color="black">4</font></td><td align="center" bgcolor="white"><font face="Times New Roman" size="4"color="black">2</font></td><td align="center" bgcolor="white"><font face="Times New Roman" size="4"color="black">1</font></td></tr><tr><td align="center" bgcolor="yellow"><font face="Verdana, Arial" size="4"color="red">RS</font></td><td align="center" bgcolor="white"><font face="Times New Roman" size="4"color="black">20</font></td><td align="center" bgcolor="white"><font face="Times New Roman" size="4"color="black">4</font></td><td align="center" bgcolor="white"><font face="Times New Roman" size="4"color="black">2</font></td><td align="center" bgcolor="white"><font face="Times New Roman" size="4"color="black">1</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><title>Exemplo de tabela</title><style type="text/css">

Page 98: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

.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;text-align: center;}.numeros {font-family: "Times New Roman";font-size: 14pt;color: black;background: white;text-align: center;}</style></head><body><table border="1" width="400" align="center" ><tr><td colspan="5" class="titulo">Distribuição de Hardware</td></tr><tr><td rowspan="2"></td> <td colspan="2" class="cabec">Micros</td> <td colspan="2" class="cabec">Impressoras</td></tr><tr><td class="cabec">PC</td> <td class="cabec">MAC</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!

Page 99: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Apêndice B - Considerações FinaisEditoresExiste uma variedade de editores HTML 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 HTML.HomeSite 5.0 - Um editor ideal para quem entende um pouco de HTML.Sites

World Wide Web Consortium

http://www.w3.orgSite oficial do comitê que regulamenta o uso de tecnologias utilizadas na Web.

Construindo seu Site

http://www.construindoseusite.com.br/css/css.shtmlSite com artigos e tutoriais sobre tecnologias para a Web, inclusive CSS.

Lynda

http://www.lynda.comSite 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.

Page 100: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos
Page 101: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Apêndice C - Atividades de HTMLParte 11. No bloco de notas crie um documento HTML com as seguintes características:

título da página como: "Mestres 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 Matisse, Joan Miró".

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 Matisse", 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 Miró", cor de fundo #FFFFFF e margens iguais a 15. Salve a página como miro.htm.Parte 21. No bloco de notas abra o arquivo vangogh.htm. Neste documento digite o seguinte texto:Van GoghVincent 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ézannePaul 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:

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.

Parte 31. No bloco de notas abra o arquivo klimt.htm. Neste documento digite o seguinte texto:Gustav KlimtOs 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 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 da universidade deve estar em negrito.

2. No bloco de notas abra o arquivo matisse.htm. Neste documento digite o seguinte texto:Henri MatisseHenri Emile Bernoit Matisse 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:

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.

3. No bloco de notas abra o arquivo miro.htm. Neste documento digite o seguinte texto:Joan MiróDois murais de cerâmica de Joan Miró 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:

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.

Parte 4As 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>;

Page 102: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

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:

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.

3. Abra o arquivo matisse.htm e insira a imagem matisse.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.

4. Abra o arquivo klimt.htm e insira a imagem klimt.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.

Page 103: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

5. Abra o arquivo miro.htm e insira a imagem miro.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.

Parte 51. 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

Page 104: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

Parte 61. Abra a página index.html. Na terceira linha da tabela defina as propriedades do Iframe.

SRC - página vangogh.htm;

NAME - dentro;

WIDTH - 100%;

HEIGHT - 100%;

MARGINWIDTH - margem esquerda 0;

MARGINHEIGHT - margem superior 0;

ALIGN - alinhado ao meio;

SCROLLING - barra de rolagem automática;

FRAMEBORDER - 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 71. 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;

Page 105: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

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çãodo 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 sereminseridos 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 81. Publique na Internet o projeto de web site elaborado nas atividades utilizando um programa de FTP. Teste o site antes de publicar.Parte 91. Formate o arquivo index.htm (feito anteriormente) com estilos CSS, sendo:a. Body - Cor de fundo: #003366 e todas as margens: 0pxb. A - Cor: #003366, fonte: Verdana e tamanho: 10pt2. Crie uma folha de estilos CSS, com as seguintes configurações:a. Body - Cor de fundo: #FFFFFF, todas as margens: 15px e fonte: Verdanab. H1 - Cor: #003366 e tamanho: 16ptc. P - Tamanho: 10ptd. Salve com o nome artistas.css3. Aplique a folha de estilos em cada página dos artistas, usando o método de link para página externa.Parte 101. 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 111. Em um arquivo novo do bloco de notas, criar um documento XHTML válido (com Doctype Transitional). Esse documento deve conter o título da página "Mestres

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";

Page 106: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

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 é "Mestres 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 Matisse, Gustav klimt e Joan Miró;

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 XHTML do exercício, que deve ficar como a figura a seguir:

Parte 121. O CSS responsável pela formatação do documento XHTML tableless.htm será montado em outro arquivo. Esse arquivo deve ser salvo com o nome de estilos.css,

na mesma pasta do documento XHTML.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 tagsdo XHTML;

#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 XHTML é 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 131. 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;

Page 107: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

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ãoelas:

atualize o elemento "*", colocando como fonte a família "Trebuchet MS", 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.

Modifique os parágrafos do conteúdo para que tenham:

tamanho 10pt;

preenchimento direito e inferior 20pt.

Modifique 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:

Page 108: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

GlossárioAACRÔ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, IMHO é tradicionalmente usado para "In My Humble Opinion" - "Em Minha HumildeOpinião", ASP, que é usada para "As Soon As Possible" - "O mais rápido possível".

AD (ADVERTISEMENT) - 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 defim 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 Mensagem 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 Microsoft 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 HTML, 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 (Mbps). E no upstream, as taxas vão de 16 a 640kilobits/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 deuma máquina. É também um dos comandos básicos do Unix.

APACHE - Programa Servidor de páginas HTML, escrito originalmente para ambientes UNIX, depois LINUX. É um dos mais conhecidos e confiáveis servidores WEB ealem 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 formaautô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, atualmenteDefense Advanced Projects Research Agency, ou DARPA) em consórcio com as principais universidades e centros de pesquisa dos EUA, com o objetivo específico deinvestigar 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 deoperação em 1990, posto que estruturas alternativas de redes já cumpriam seu papel nos EUA.

BBACKBONE - 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 Mpbs; exemplo:

uma LP de 64 Kbps tem uma bandwidth muito menor que uma linha T1, de 1,54 Mbps.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álisede 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.CCERN - 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 - Mensagem 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 chavede 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 Mensagem Publicitária quando de um Ad View. É um bom indicador na eficácia da Mensagem

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 nestebanner termina o contrato, que é lógico, pode ser renovado.

COTA - É uma quantidade de CPMs 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 Management - 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 gerenciaesse 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 "EMPRESA"se relaciona com seus clientes, da sua ATITUDE para com os clientes.

DDIRECTX - Conjunto de regras de programação (API) criado pela Microsoft. 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 camadaintermediária de software que traduz comandos genéricos nos comandos específicos para cada dispositivo. Na prática, a tecnologia DirectX tira partido dosrecursos 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 MMX.

DOWNLOAD - Ato de transferir uma cópia de um arquivo em um computador remoto para outro computador através da rede, Internet. O arquivo recebidogeralmente é gravado em disco no computador local.

Page 109: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

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 atraduçã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 todosos 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 essainformação não tiver sido previamente obtida).

EE-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.FFAQ (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-ROMs 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 computadoresremotos de instituições públicas e privadas.

GGATEWAY - 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).HHACKER - 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 fazertocar 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 tamanhose 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.IIP (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.JJPEG - 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 chegamfacilmente a mais de 13:1).

JPG - Uma das variantes do JPEG é um dos dois únicos formatos de imagens suportados pela linguagem HTML (o outro formato é o GIF).KKBPS - 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.LLAMER - 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

HTML, 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.MMICREIRO - 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 Musical 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 correioeletrônico.

MODEM - Contração da expressão MOdulador-DEModulador, 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 Modem converte os sinais digitais de um computador em sinais analógicos, e vice-versa, entendíveis pelosistema de telefonia. Os modems sempre trabalham aos pares, um em cada ponta da conexão.

NNAVEGAÇÃ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).OOFF-LINE - Termo que designa o estado de um computador quando este não está ligado a outro computador, mas está executando tarefas semelhantes, exceto

Page 110: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

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.PPAGEVIEWS - É 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 Microsoft, 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 dispositivosque 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ésde 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.

QQUERY - Procedimento de consulta a uma informação em um banco de dados relacional.RREAL AUDIO - Programa que habilita a escuta de estações de Rádio através de uma conexão à Internet.SSMTP - Acrônimo de Simple Mail 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 MBytes 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 cliente-

servidor, é o programa responsável pelo atendimento a determinado serviço solicitado por um cliente. Serviços como WWW, POP, SMTP, FTP e outros são providospor servidores. Referindo-se a equipamento, o servidor é um sistema que prova recursos tais como armazenamento de dados, impressão e acesso dial-up parausuá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 oucookie. 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 daWebtrends 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 aoseu 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 deregistro cobrada pelo autor. Quando é feito o registro, é normal receber-se um manual impresso do programa, liberação de funcionalidades bloqueadas, assim comopossibilidade 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 muitomais baixa do que seu custo de registro original.

SIGNATURE - Assinatura digital. Meio de identificar inequivocamente um usuário na Internet. A assinatura digital tem que ser certificada por algum siteespecializado, por exemplo: Verysign.

TT1 - Linha de dados privativa, com bandwidth de até 1,54 Mbps, 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 Mbps, 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 parteTCP deste protocolo define como é feita a divisão dos dados em pacotes para serem transmitidos à rede, e como esses pacotes devem ser remontados no seudestino. 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.UUNIX - 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. Mesmo 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, permiteque 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 aumentodo 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 noBrasil 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 setroquem mensagens dentro de grupos de discussão.

UUENCODE - Método de codificação no qual um arquivo binário é convertido em arquivo ASCII.VVESA - 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 URLhttp://www.geocities.com/Eureka/5301/.

VRML - Acrônimo de Virtual Reality Modelling Language, é uma linguagem de programação que estende a capacidade da linguagem HTML, permitindo, porexemplo, se construir sites simulando ambientes tridimensionais (3D) interativos na Web.

W

Page 111: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

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 deuma 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 consegueainda 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 militaresamericanos. Baseia-se na linguagem HTML 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 oprograma 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 ServidorWeb.

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çãona 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 Brasilsó existem experiências neste sentido, muito embora esteja em franco crescimento nos EUA.

WEBTRENDS - Família de softwares líderes em SITE METRICS (medição de parâmetros de um site), principalmente Análise de Tráfego, quantificação e qualificaçãode visitantes, gerenciamento do site, alerta e monitoramento, etc.

ZZIP - 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 XMODEM, o protocoloanterior, causa perda total dos dados recebidos se a conexão cair a qualquer momento, durante a transferência, com o ZMODEM a transferência é executada apartir do ponto em que parou a recepção dos dados na seção

anterior.

Page 112: 12 - Dreamweaver CS6 · PDF fileAula 01 - Interface do Dreamweaver CS6 O que há de Novo? O Dreamweaver CS6 possui algumas atualizações tais como: Adobe BrowserLab - é um dos novos

BibliografiaLivros

GIMENES, Lucas Correa. CAMARGO, 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 Manzi / É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. HTML Guia de consulta rápida. Editora Novatec.

LEMAY, Laura. Aprenda em 1 semana HTML 4. Editora Campus.

MULLEN, Robert. HTML 4 Guia de referência do programador. Editora Ciência Moderna.

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