Site em Tableless – Parte 2
Fala galera! Tranquilidade?
Estamos aprendendo como montar um site em Tableless. Na parte anterior fizemos a conexão da página HTML com o arquivo CSS, e já definimos alguns atributos da página. Nesta parte iremos criar e posicionar as divs. Ou seja, vamos criar o layout da página.
Vamos dar nomes fáceis de serem identificados posteriormente:
-
corpo (a Div principal, que engloba todo o site)
-
topo (esta Div será o topo da nossa página)
-
menu (nesta Div vamos inserir o menu)
-
lateral (Div da barra lateral do site)
-
conteúdo (a Div onde colocaremos o conteúdo do nosso site)
-
rodapé (esta Div será o rodapé da página)
Definidos os nomes de cada seção da página, vamos criar e editar as divs no estrutura.css e depois inserir na index.html. Então abra o estrutura.css e vamos criar nossa primeira div.
Agora já podemos editar nossa div corpo conforme a imagem abaixo:
Copie o código acima e insira na estrutura.css. Pronto! A div corpo já está estilizada e posicionada corretamente! Basta agora inserirmos na index.html. Então vamos lá, abra a index.html e visualize o ícone Insert Div Tag na barra superior do Dreamweaver. Observe a imagem abaixo:
Clicando nela aparecerá uma janelinha onde vamos inserir a div. No campo ID selecione a div corpo em seguida dê ok. (Posteriormente vamos aprender a diferença de ID para Class)
Simples! A div corpo já está inserida na página, estilizada e posicionada conforme determinamos na estrutura.css.
Por hoje é só! Na próxima parte vamos inserir as demais divs.
Valeu galera! Fiquem com Deus!
Escrito por Luiz Gustavo
on maio 17, 2008. Arquivado em CSS.
Você pode seguir as respostas a esse artigo pelo RSS 2.0.
Você pode deixar respostas para esse artigo
aee cara seja bem vindo…. parabens pela materia espero que seja a 1 de muitos sobre tabelas uma serie bem explicadinha seria muito show e esta em falta na web
abraço e valeu
Estou querendo começar a fazer sites para intranet com css, onde trabalho, mas estou na dúvida, pelo que vi você cria uma página em html, terá algum problema com páginas usando .asp, trabalhamos muito com .asp, este é a minha dúvida.
Nada Rita Oliveira!!!
Você pode usar CSS com páginas em ASP.
Eu trabalho com PHP e uso os arquivos CSS numa boa!
Pode usar tranquilamente!
Nossa, tá muito bom o tuto! Muito bem explicadinho, parabéns!
Olá Luiz Gustavo, estou acompanhando este tutorial magnífico, só que não consigo encontrar o botão “Insert Div Tag”. O meu dreamweaver é o MX. Este tutorial foi feito usando qual dreamweaver? Aguardo sua resposta. Um abraço,
Olá Luiz Gustavo, estou acompanhando esse tutorial muito bom, mas ocorreu uma dúvida, não estou encontrando o botão “Insert Div Tag”. Eu uso o dreamweaver MX e qual é o dreamweaver que vc usou para esse tutorial? Aguardo sua resposta. Um abraço,
Fala Sérgio! Acho q o Dreamweaver MX não tem esse botão. Usei o CS3 para desenvolver esse artigo.
Mas é simples. O único trabalho vai ser digitar o código. É bem simples.
Você muda para o CODE VIEW e digita assim:
No nosso caso fica assim:
blz.
Qualquer dúvida envie e-mail para lgustavoms@gmail.com
Abraços!
Salve, vi alguns erros no seu tutorial que achava importante destacar.
1) o simbolo “#” não se refere a div, e sim a “id”, logo qualquer elemento que possua um id pode se aproveitar dessa regra.
2) o nome após o “#” é unico por pagina pois é um id e pode ser referico como link
Fala Rafael!
realmente o simbolo # significa id
mas coloquei como div para os iniciantes
q ainda naum sabem diferenciar div de class.
Nesse mesmo tutorial coloquei uma observação que iria criar uma matéria de div e class.
mas vlw pelo toque!
um abraço!
Fala Rafael!
realmente o simbolo # significa id
mas coloquei como div para os iniciantes
q ainda naum sabem diferenciar id de class.
Nesse mesmo tutorial coloquei uma observação que iria criar uma matéria de div e class.
mas vlw pelo toque!
um abraço!
Parabens….sou iniciante com pouco conhecimento em css,pelo visto por enquanto….Excelentes explicações….
Muito bom os Tutoriais, espero que continuem sempre fazendo os Tutoriais e levando cada vez mais conhecimentos aos interessados na Área
Abraço!:)
Estou gostando muito da “série” – Site em tableless.
Artigos simples e diretos, perfeito pra iniciantes. O código bem explicado.
A única coisa ruim que eu vejo. É a utilização do Dreamweaver. Pois a pessoa fica muito dependente do programa. Tem gente que não sabe “criar” uma div sem ser pelo editor.
Estou achando ótimo, vc explica o passo a passo, não deixa dúvidas, mas estou me “batendo” um pouco porque só usamos linux aqui, não tenho o Frontpage, mas vou ver se dá para baixar um outro programa do linux. Mesmo assim, estou me utilizando de seus ensinamentos para criar o site.
realmente, tutorial show de bola. acompanhei todo ele e ja não sou dependente de tabelas \o/
Olá! Parabéns pelos tutoriais! Ainda desenvolvo usando tabelas, (fatio no Fireworks e linko no Dw) mas estou me libertando disso hehe. Minha dificuldade tem sido desenvolver o layout em tabless. O método que uso FW + DW é mais prático pra mim. Que dica vc poderia me dar, analisando este site que fiz recentemente? Mto obrigado. http://www.veterinariodefelinos.com.br