Site em Tableless – Parte 3
Fala galera! Estamos aprendendo a montar um site em tableless. Se você perdeu as 2 matérias anteriores, será essencial começar desde o início.
Criacão do Topo
Vamos criar a div topo, mas antes precisamos de uma imagem para inserir no nosso topo. Então mãos a obra, crie uma imagem de 700px de largura e 100px de altura e nomeie de topo.jpg.
Feito isso, abra o estrutura.css e editaremos a div topo.
Quando a largura da div não é especificada, ela automaticamente fica no tamanho da div pai. No nosso caso a div corpo que tem 700px.
Agora abra a index.html e apague aquela frase em inglês dentro da div corpo (essa frase sempre é criada quando se insere uma div no dreamweaver, então sempre que inserirmos uma div você deve apagar essa frase).
Dentro da div corpo vamos inserir a div topo.
Veja o resultado:
Criacão do Menu
A div menu será mais trabalhada, com isso exige um pouco mais de atenção. Na estrutura.css vamos adicionar nossa div:
Vamos inserir na index.html. Preste atenção que vamos mudar um campo na hora da inserção:
O que fizemos foi simples. Apenas informamos que a div menu será incluída depois da div topo.
Veja o resultado:
O site tah ficando legal! Na próxima parte vamos estilizar nosso menu. Abraços galera!
Escrito por Luiz Gustavo
on maio 24, 2008. Arquivado em CSS.
Você pode seguir as respostas a esse artigo pelo RSS 2.0.
Você pode deixar respostas para esse artigo
Cara, sua aulas estão sendo acompanhadas por mim a risca, espero q venha logo as próximas aulas, estou gostando muito, não sabia nem o que era Tableless e nem CSS, só conhecia ligeiramente o HTML e por alto php… Valeu continue assim.. Um abraço
Aqui não ficou centralizado como no exemplo.. por que será?
Vlw cara,ta ficando show! continue assim.
*aguardando novas partes
Muito bom, suas aulas…
Um linguagem bem acessível, parabéns.
Estou esperando as próximas aulas ansioso.
Muito bom esse web site me ajudou muito!!!
To aguardando as proximas aulas!!!
Estou acompanhando esse tutorial. Na espera das proximas partes!
Parabéns
Estou adorando as aulas. Tomare que não demore a proxima parte.
parabens pela aula. aguado anciosa pela pela proxima aula.
Valeu Gustavo a sua aula é nota 100, estou a espera de nova matéria não sabia que no dreamwever dava para fazer essas coisas.
Eu sou de Angola e estou a o suficiente sobre CSS
Parabéns cara, muito boa suas explicações…
é MEU 1º CONTATO COM CSS, Estou acompanhando a explicação, mas não tem mais o link que leva para a 4 parte em diante.
teria condições de me informar o link para a 4 parte da aula do CSS?
Muito Obrigado
Estou tentando colocar ao invés de uma imagem jpg um arquivo swf, mais o css não esta reconhecendo o caminho. como faço pra inserir esse arquivo?
Wellington, o background só funciona com imagens.
Com isso vc terá que adicionar o arquivo swf no documento html.
Muito bom. Não canso de elogiar seu modo de “ensinar”. Simples e direto, muito fácil a compreensão.
Olha só meu site de exemplo:
http://www.uppof.com.br/teste
Nossa cara, muito bom tutorial, sempre fiz sites usando tabelas,
estudei o livro Oficial da Macromedia o dream MX, e la nao diz nada
sobre DIV, muito bom seu tutorial…