Tabelas no Dreamweaver

Name: Tabelas no Dreamweaver
Author: Patti Scully-Lane

Enquanto o HTML fornece a estrutura, o CSS fornece a beleza. Neste módulo, vais familiarizar-te com o que é CSS, como os diferentes estilos propagam-se e quais…

Preview the first lesson free — get full access to all 4 lessons.

Solicitar uma demonstração Entrar

Curso: sob demanda

Nesta lição, você aprenderá como criar uma tabela no Adobe Dreamweaver. Antes de podermos trabalhar em nossa mesa, precisamos configurar um site no Dreamweaver. Então vamos para o menu Site, para New Site. Nós vamos nomear isso Trabalhando com tabelas, e vamos clicar no ícone da pasta. Agora peguei a pasta de arquivos de aula deste Module3, e eu os coloco na minha área de trabalho. Então, vou selecionar esse Module3_tables e selecione essa pasta, e vamos clicar no botão Salvar. Se você precisa saber um pouco mais sobre como trabalhar com sites no Dreamweaver, você pode voltar ao Module1 e aos sites de gerenciamento de lições no Dreamweaver para aprender um pouco mais sobre por que trabalhamos com sites no Dreamweaver. Vou para o painel Arquivos, e vou clicar duas vezes em hikes.html. Isso abrirá esse arquivo em nossa janela principal. Vamos usar uma tabela como uma tabela verdadeira neste documento. No entanto, é importante notar que no início do design para a internet, mesas foram usadas como elementos de design antes de CSS, Cascading Style Sheets, e eles ainda são usados hoje como elementos de design em e-mail HTML. Agora eu tenho a visualização Design selecionada nos meus modos de visualização. Portanto, se você tiver a Visualização ao vivo selecionada, Vou fazer você subir e selecionar Design. E vamos colocar nosso cursor nesta caixa aqui à esquerda, e vamos digitar em TRILHAS DE CAMINHADA e, em seguida, pressione a tecla Enter. Agora, para adicionar uma tabela, vamos subir ao menu Inserir para Tabela. A caixa de diálogo da tabela aparece, e vamos criar uma tabela com três linhas e duas colunas. Teremos uma largura de tabela de 300 pixels com uma espessura de borda de um. Agora, se quiséssemos, poderíamos escolher ter uma coluna de cabeçalho, ou uma linha de cabeçalho, ou ambas, mas vamos deixar isso como nenhum, e vamos clicar em OK. No Dreamweaver, a maneira mais fácil de fazer alterações à sua tabela está aqui no painel Propriedades. Então vamos mudar a largura da mesa de 300 a 600, e você pode ver como ele se encaixa bem nessa área. Vamos para onde diz Alinhar. Vamos mudar isso do padrão para o centro, então vai centralizá-lo bem em nossa área. E vamos digitar esta linha de trilhas de caminhada em MA. E, agora, para chegar à próxima seção, tudo o que precisamos fazer é clicar na tecla tab, e você pode ver que isso muda nossa mesa um pouco. E é importante saber que quando você está projetando tabelas há certas coisas que fazem desta uma mesa fluida. E, assim, vai mudar à medida que colocamos as informações em nossas células. Eu vou apertar a tecla tab mais uma vez, e vou digitar o nome da trilha, e tecla tab e digite Cidade. Então, você pode ver, como eu coloquei na cidade minhas colunas mudam um pouco mais. Agora que temos um pouco mais de informações em nossa tabela Quero voltar e fazer algumas alterações adicionais para a mesa. Então vamos clicar neste 600 no topo da nossa mesa e selecione nossa mesa, e isso nos permite trazer nosso painel de Propriedades para a nossa mesa voltar novamente. E vamos falar sobre o preenchimento celular e o espaçamento das células da nossa tabela. Se você não colocar um número no preenchimento do celular e seu espaçamento de célula, por padrão o HTML vai colocar um pixel de preenchimento em cada um. O preenchimento da célula é a quantidade de espaço entre a borda da célula e o conteúdo. Então, se colocarmos 10 como preenchimento de célula e pressionarmos a tecla Enter, você pode ver como agora nosso tipo está um pouco mais distante da borda de nossas células. Espaçamento celular, vou colocar cinco por agora, é a quantidade de espaço entre as próprias células. Então eu vou deletar isso e apertar a tecla enter e deixe isso como a configuração padrão. Agora a outra propriedade que temos pois nossa mesa é a borda. Atualmente, temos uma fronteira de um, mas você pode ver se colocarmos uma borda de zero, Dreamweaver, na visualização Design, nos mostrará as bordas da nossa mesa. Mas se formos para a visualização ao vivo você pode ver como não vemos a borda da tabela. Vou colocar isso de volta no modo Design porque a visualização Design nos ajuda a trabalhar muito mais eficiente ao trabalhar com tabelas. Nas próximas lições, aprenderemos mais sobre como modificar e formatar nossas células. Então, nesta lição, você aprendeu como criar uma tabela no Adobe Dreamweaver.

Intermediário Fornecedor : Patti Scully-Lane 4 lições · 30m em Árabe, Alemão, Inglês, Espanhol, Francês, Português, Urdu, Chinese

Descrição do curso

Enquanto o HTML fornece a estrutura, o CSS fornece a beleza. Neste módulo, vais familiarizar-te com o que é CSS, como os diferentes estilos propagam-se e quais elementos HTML podem ser estilizados.

Objectivos de aprendizagem:

O Que Você Vai Aprender

Compreender os níveis de CSS e a sintaxe CSS
Criar tabelas no Dreamweaver
Modificar linhas e colunas em tabelas
Formatar linhas e colunas em tabelas
Reconhecer estilos externos versus internos
Importar dados tabulares em uma tabela

Principais Conclusões

HTML fornece a estrutura de uma página enquanto CSS fornece o estilo.
Os estilos CSS são aplicados em cascata em diferentes níveis e elementos HTML podem ser estilizados usando CSS.
Este módulo abrange a criação de tabelas e a modificação e formatação de suas colunas e linhas.
O curso distingue entre estilos externos e internos em CSS.
Os alunos podem importar dados tabulares diretamente em uma tabela.

Perguntas Frequentes

O que este curso abrange?

Este módulo abrange o que é CSS, como os diferentes estilos são aplicados em cascata e quais elementos HTML podem ser estilizados. Ele também ensina a criar tabelas, formatar e modificar colunas e linhas, reconhecer estilos externos versus internos e importar dados tabulares em uma tabela.

Quais habilidades vou ganhar com este curso?

Você desenvolverá habilidades em Adobe Dreamweaver, CSS Frameworks, HTML Components, HTML Formatting, HTML Tables e Object Oriented CSS.

Quais lições estão incluídas neste curso?

As lições são: Criar uma Tabela, Modificar Linhas e Colunas em Tabelas, Formatar Linhas e Colunas em Tabelas e Importar Dados Tabulares em uma Tabela.

Qual é a diferença entre HTML e CSS conforme ensinado neste curso?

De acordo com o curso, HTML fornece a estrutura enquanto CSS fornece a beleza, significando que CSS é usado para estilizar elementos HTML.