Quer receber novidades e e-books gratuitos?
NUNCA MAIS PASSE RAIVA POR NÃO CONSEGUIR RESOLVER UM PROBLEMA COM O EXCEL - GARANTIDO!
UNIVERSIDADE DO VBA - Domine o VBA no Excel Criando Sistemas Completos - Passo a Passo - CLIQUE AQUI
Júlio Battisti tem mais de 50 livros publicados, centenas de e-books e é certificado Microsoft.
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.
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!”
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á!
Contato: Telefone: (51) 3717-3796 | E-mail: webmaster@juliobattisti.com.br | Whatsapp: (51) 99627-3434
Júlio Battisti Livros e Cursos Ltda | CNPJ: 08.916.484/0001-25 | Rua Vereador Ivo Cláudio Weigel, 537 - Universitário, Santa Cruz do Sul/RS, CEP: 96816-208
Todos os direitos reservados, Júlio Battisti 2001-2024 ®
LIVRO: MACROS E PROGRAMAÇÃO VBA NO EXCEL 2016 - CURSO COMPLETO E PRÁTICO
DOMINE A PROGRAMAÇÃO VBA NO EXCEL - 878 PÁGINAS - CLIQUE AQUI
