Você está aqui: Principal » Lista Completa de Tutoriais

Sobre este Tutorial

Autor:	Vivian Mikie Hespanholetto
Data:	20-06-2005
Categoria:	Criação de Sites
Assunto:	DREAMWEAVER - BÁSICO
Visitas:

Dreamweaver MX 2004 Básico

Projeto Web – Parte 02

Criação de Tabelas no Dreamweaver

Objetivo : Criar tabelas fixas e ajustáveis em documentos do Dreamweaver.

Pré-requisitos: Ter conhecimento intermediário sobre gerenciamento de arquivos e Painel de controle no Windows; é recomendável ter conhecimento de Macromedia Fireworks ou outro aplicativo editor de imagens para criar imagens que serão usadas no tutorial.

Tabelas

As tabelas são objetos de suma importância para praticamente toda pagina da web. Digo isso porque as tabelas representam todo o esqueleto que forma e apóia uma pagina. O uso dessas tabelas é tão grande porque o HTML não nos oferece muitas opções de alinhamentos, portanto, é através das tabelas que conseguimos uma disposição mais profissional dos elementos de uma página web.

No Dreamweaver é possível criar tabelas de tamanho fixo ou que tenham seu tamanho ajustado conforme o tamanho janela na qual esteja sendo exibida. Vamos ao trabalho!

1. Abra o Dreamweaver e, na janela principal (ou através do menu “File/Open…”), clique na opção “Open…” e abra o arquivo “DreamweaverBasico/projeto01/index.html”, que foi criado no tutorial anterior (Projeto Web – Parte 01).

2. Caso haja algum conteúdo na pagina “index.html” selecione-o e apague.

3. Clique no menu “Modify/Page/Properties” (CTRL+J), para exibir a janela de “Page Properties”, através da qual configuraremos o plano de fundo da página.

A. Configure a fonte do texto como mostra a figura.

B. Clique no botão “Browse” para selecionar a figura de plano de fundo (esta imagem você pode criar no Macromedia Fireworks ou outro aplicativo de edição de imagens de sua preferência, com medidas de 10 pixels de largura por 1000 pixels de altura).

C. Encontre a figura, selecione-a e clique “Ok”.

4. Uma imagem com essa escala de tamanho, quando vista sozinha pode não representar muita coisa, mas configurada como plano de fundo de uma página ou tabela, repete-se horizontalmente preenchendo todo o espaço disponível para ela à direita e esquerda. Dessa maneira, haverá uma economia muito grande de banda ao carregar a pagina na web, já que o tamanho físico da figura é de menos de 1 kilobyte! Foi escolhido o tamanho de 1000 pixels de altura para que não haja repetição vertical. Veja abaixo aparência da imagem sozinha e também a aplicada à página:

Quando é inserida uma imagem de plano de fundo ou na própria página do documento, o Dreamweaver sempre faz a verificação do local onde está armazenada a figura. Caso a mesma esteja contida em local diferente da pasta raiz do site que está sendo utilizado – neste caso “projeto01/imagens” -, será exibida a janela abaixo, quer pergunta se você deseja copiar neste momento a figura para dentro da pasta raiz. Clique “Yes”, selecione a pasta “DreamweaverBasico/projeto01/imagens” e clique “Ok”.

Selecione a pasta “...projeto01/imagens” e clique em “Save” (salvar). Para que a imagem seja salva dentro da mesma.

5. Vamos à tabela! Clique no botão “Insert table” para inserir uma tabela.

6. Configure a tabela com 1 coluna e 2 linhas, e com as propriedades como mostra a imagem abaixo:

A. Table size: Defina a quantidade de linhas (Rows) e colunas (Columns), a largura da tabela (Table width), a espessura da borda (Border thickness), o espaçamento interno entre a borda das células e o texto contido nelas (Cell padding) e o espaçamento entre as células (Cell spacing).

B. Header: Selecione a opção que exibe a localização que você deseja para o cabeçalho da tabela.

C. Accessibility: Configure opções de acessibilidade para a tabela, atribuindo a ela um nome e um texto de sumario.

7. Clique “Ok” e sua tabela deverá estar se parecendo com essa:

8. Agora, iremos inserir um logo no documento. Para tal, clique dentro da primeira linha da tabela criada de forma que o cursor fique piscando dentro dela. Isso garantirá que a figura seja inserida naquele local.

9. Na barra “Common”, clique no botão “Images”, selecione a figura desejada e clique “Ok”.

10. No “painel de Propriedades”, ajuste as medidas da figura de acordo com o desejado, lembrando-se que a diminuição de tamanho da imagem no Dreamweaver, alem de poder levar à distorção da mesma, não faz com que o tempo de download da imagem seja diminuído quando a pagina estiver sendo carregada na Internet.

11. O próximo passo é adicionar um texto à segunda linha da nossa tabela. Digite o texto abaixo ou outro de acordo com o tema do seu projeto.

“O mais gostoso, mais sofisticado, mais moderno, mais completo, mas caprichado, mais refrescante. A Gelateria Pingüim tem simplesmente os melhores sorvetes do mundo!

São incríveis 300 sabores, mais de 1000 combinações, os sorvetes Pingüim são servidos em recipientes do tamanho da sua vontade!

Venha nos visitar e concorra a uma inesquecível viagem para a Antártida e conheça nossa fabrica, a família Pingüim e o Play Pingüim, um centro recreativo de aventuras e novidades!”

Propriedades da Tabela

São varias as propriedades que podem ser setadas para tabelas no Dreamweaver, desde aquelas que as deixam com um visual mais marcante às que lhe fazem ficar invisível aos olhos do internauta. Você deve estar se perguntando para que serve uma tabela invisível. A resposta é simples, as tabelas invisíveis são as responsáveis por manter no lugar os textos, imagens, vídeos e outros objetos que uma pagina pode conter por meio de suas linhas e colunas, de forma que o visual da pagina no Browser fique limpo.

1. Selecione a primeira linha da tabela para pintarmos todo o seu fundo de branco. No “painel de Propriedades”, campo “Bg” (background = plano de fundo), selecione a cor branca.

2. Vamos ajustar tornar invisíveis as bordas da tabela e deixar sua largura auto-ajustável. Selecione a tabela, clique com o botão direito do mouse sobre ela, selecionando no “menu de contexto” a opção “Edit Tag <table>…” (editar tag tabela).

3. No campo “Width” (largura), digite 100% e “Border” (borda), altere o número para 0 e em seguida clique “Ok”.

Quando definimos um tamanho em porcentagem para a tabela, seu tamanho sempre será calculado de acordo com o tamanho da janela onde ela estiver sendo exibida, evitando desta maneira espaços em branco indesejáveis na pagina.

4. Note que as bordas da tabela já não aparecem mais e suas linhas e colunas passaram a ser delimitadas por pontilhados e na parte inferior da tabela você pode ver a marcação de tamanho indicando “100%” e entre parênteses a largura atual em pixels da tabela.

5. Salve o trabalho.

6. Pressione a tecla <F12> do seu teclado para que a página seja exibida no seu navegador padrão da Internet.

7. Modifique o tamanho da janela, diminuindo-a e/ou aumentando-a e perceba que a tabela sempre se estica junto com ela.

Existem ainda várias configurações que podem ser feitas nas tabelas do Dreamweaver. Não perca os próximos tutoriais. Até lá!

LISTA DE TODOS OS TUTORIAIS DISPONÍVEIS

LIVROS CAMPEÕES DE VENDA NO SITE

Cursos Online com Certificado e Suporte à Dúvidas

CURSOS ONLINE COM CERTIFICADO - INDICADOS POR JÚLIO BATTISTI EM PARCERIA COM BRAVA CURSOS
INFORMÁTICA
Curso de Digitação Formatando e Instalando Computador Excel para Iniciantes Curso Compre no Ebay Informática Educativa Curso de Linux	Segurança na Internet Montagem e Manutenção de Computadores Curso Remoção de Vírus Curso Ubuntu Instalação Linux - Ubuntu
AdministraÇÃo
Gestão de Projetos e Empreendedorismo Benefícios da Previdência Curso HP 12C Matemática Financeira Curso Análise Salarial	Processo de Elaboração de Questionário Excelência no Atendimento ao Cliente Logística do Transporte Licitações e Contratos Administrativos
Profissionalizante
Adestramento Canino Como fazer pesquisa Científica e Monografia Curso de Corte e Costura Supervisor de Telemarketing Balconista de Padaria Curso Educação Infantil	Recepcionista e Secretaria Velas Artesanais Relações Interpessoais Curso de Arbitragem Bullying e Cyberbullying Capacitação de Tutores em EAD
EstÉtica
Curso de Massoterapia Curso de Depilação Drenagem Linfática Curso de Maquiagem Limpeza Turbinada de Pele	Alisamento e Relaxamento Capilar Curso de Etiqueta SPA de Vinhoterapia na Estética Facial Curso de Shantala Introdução à Colorimetria Capilar
Pessoal
Curso de Caligrafia Memorização Chefia e Liderança Curso Falar em Público Curso Bases Neurológicas Leitura Dinâmica Planejamento de Projeto Pessoal Reforma Ortográfica	Como Passar em Concursos Públicos Direção Defensiva Administração do Tempo Curso de Redação Curso de Meditação Como Passar no Vestibular Atualização Gramatical
NegÓCIOS
Relações Humanas e Ética Profissional Marketing e Vendas Diretas	Persuasão em Vendas
Entretenimento
Curso de Mágica
SaÚde
Primeiros Socorros Curso de Fitoterapia Curso de Aromaterapia Medicina Alternativa Plantas Medicinais	Técnicas básicas de Enfermagem O Trabalho do Agente Comunitário de Saúde Ergonomia - Postura Correta em Frente ao Computador Ética Profissional - Ênfase em Radiologia Adolescência: Visão Saúde do Assunto
Meio Ambiente
Curso Gestão Ambiental Jardinagem e Paisagismo	Curso de Reciclagem Curso de Bonsai
MÚsica
Curso de Violão
NutriÇÃo
Higiene e Manipulação de Alimentos Congelamento de Alimentos	Culinária Básica Culinária Intermediária
RelaÇÕes Humanas
Curso Gestão de Pessoas Departamento Pessoal Desenvolvimento Pessoal Empresarial Curso de Telemarketing Curso Dinâmica em Grupo Rescisão Contrato de Trabalho Folha de Pagamento na Prática	Atendimento ao Cliente Adm. da Empregada Doméstica Curso de Homolognet Recursos Humanos - Férias Recursos Humanos - 13° Salário Registro de Empregados
Web Master
Curso de HTML Curso de WordPress	Curso de HTML5
Designer GrÁfico
Curso de Corel Draw Efeitos Especiais com InDesign CS5	Efeitos Tipográficos com InDesign CS5

CURSO EM FORMATO DE VÍDEO-AULA

EXEMPLOS PRÁTICOS PASSO A PASSO COM SOM E IMAGEM

Clique no curso para informações detalhadas

Curso

Duração

Informações

ACCESS

Vídeo Aula: Access 2007 - Consultas - Curso Completo e Prático

4:30h

LOJA DE LIVROS

VÍDEO-AULAS

E-BOOKS/CURSOS

CURSOS ONLINE COM CERTIFICADO

CURSOS COMPLETOS EM CD

CD-01

CD-02

CD-03

CD-04

CD-05

CD-06

CD-07

CD-08

CD-09

CD-10

CONTATO