14/03/2008 - 6:01 > 12.577 Visualizações > 65 comentários

CSS+Tableless no Dreamweaver – Parte 5

Olá! Na 5º vídeo aula de CSS+Tableless, iremos formatar o conteúdo dos Boxs com text-align e border-bottom nos títulos.

Clique aqui e veja como o projeto ficará no final desta vídeo aula. É notória a rapidez com que um layout desenvolvido com CSS é aberto. Além disso, o código fonte fica extremamente otimizado.

Assista à vídeo aula

Posts relacionados

Felipe Cardozo

É sócio diretor do MX Masters, portal de desenvolvimento especializado em vídeo aulas. Trabalha com ferramentas OpenSource como Wordpress, Magento entre outros, além de ministrar palestras em universidades do Rio de Janeiro.

Outros posts deste autor

Este autor atualmente possui 281 posts

Veja todos os posts de Felipe Cardozo

Comentários / Deixe seu Comentário

65 respostas para 'CSS+Tableless no Dreamweaver – Parte 5'

Israel Diz:
14/03/08 às 16:04
Blz Felipe
Só uma pergunta profissionais que constroem sites com tabelas já podem se consirerar desatualizados ?
Ou podemos continuar com as tabelas ?.
Felipe Cardozo Diz:
14/03/08 às 16:48
Israel.
Levando-se em conta que hoje acessibilidade e padrões web não é mais uma novidade e sim uma realidade, respondo que sim!

A maioria dos portais importantes da web é desenvolvido com Tableless, vide:

http://www.ig.com.br
http://www.globo.com
http://www.terra.com.br
http://www.uol.com.br

Em breve, um webdesign que não tiver noção de CSS e Tableless, estará sim, fora do mercado.

As vagas que aparecem por aí, já pedem essa experiência.

Abçs
Murilo Diz:
9/04/08 às 22:00
veio me ajuda aqui eu to loco atras de uma video aula q ensina q criar um banco de dadoss

eu nao acho de geto nehum voce poderia me ajjuda?
Roger Diz:
15/04/08 às 11:34
Felipe, será que você não poderia disponibilizar essas video-aulas de tableless em flash, para que a gente pudesse dar download delas, igual ao criando um site completo?
abraço.
Felipe Cardozo Diz:
15/04/08 às 11:47
Roger, essas vídeo aulas ficaram muito pesadas e não pude colocar para download.

As próximas de Tableles que irei aprontar, estarão liberadas para download, ok?
Roger Diz:
15/04/08 às 12:32
Ok.
eens Diz:
22/05/08 às 16:17
você podia colocar as video aulas em outros sites que não diminuam tanto a qualidade do video,
por exemplo: http://www.vimeo.com/
é que no youtube algumas coisas ficam ruim pra ler
,

muito boa as aulas
queria umas video aulas ensinando php, porque lendo essas apostilas ai que tem na internet não consigo entende nada ^^
Edison Diz:
7/06/08 às 12:41
Felipe tudo bacana?
Teria como vc ensinar aquela técnia de Efeitos Parallax onde são utilizadas várias imagens em CSS sobrepostas para simular um ambiente 3D igual nesse site aqui:http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/

Abraços!!!
Pablo Cseko Diz:
10/06/08 às 12:17
Muito bom!!

As aulas estão muito bem explicadas, perfeito!
Eu tinha algumas duvidas e com essas video aulas com certyeza vai dar para eu praticar melhor.
Abração!
Alexandre Medrado Diz:
20/06/08 às 2:17
Felipe Cardoso e equipe.
Já sou profissional , navegando, entrei sem querer neste portal e :

Rapaz quero dar os parabéns pelo seu conteúdo para iniciantes GRATUITO , muito bem feito e organizado. Precisamos sempre de pessoas que não só pensam em si proprio e sim na nossa comunidade de webmaster !!! vou indicar esse site para todos meus amigos que estão ai no mercado. Muito profissional !
Abraço a toda equipe do Ms

Alexandre Medrado
Brasília
Sandro Diz:
14/07/08 às 22:47
Parabens pela iniciativa de ajudar outras pessoas que querem se aventurar nesta profissão. Vcs irão continuar com as aulas de CSS e Tableless? Gostaria muito de assistir mais aulas.
Felipe Cardozo Diz:
15/07/08 às 2:05
Olá Sandro, tudo bem?

Vamos sim. Em breve, mais novidades…

[]´s
Adelson Diz:
26/07/08 às 13:17
Felipe… gosto muito de suas vídeos aulas cara já aprendi muitas coisas!
muito obrigado pela disponibilidade e por está sempre ajudando!

uma dulvida sobre o CSS: como faço para que esses boxes fiquem com as bordas curvadas??

grande abraço. Salvador-Ba
Felipe Cardozo Diz:
28/07/08 às 15:07
Olá Adelson.

A próxima vídeo aula será ensinando a fazer isso.

[]´s
Adelson Diz:
29/07/08 às 13:50
ok! muito Obrigado!

^^
Fábio Ferreira Diz:
31/07/08 às 14:49
Como faço para colocar imagens de background nos box e criar sombras nos box
Marcos Vinícius Diz:
3/08/08 às 19:56
Como fazer pra colocar um menu no layout usando box? Já que por tabelas se montava o menu botão por botão, usando tabless mandamos a imagem inteira?
Felipe Cardozo Diz:
4/08/08 às 23:03
Marcos, para fazer o menu é diferente. usa-se Listas (li e ul). Irei falar disso em breve.

[]´s
Adelson Diz:
6/08/08 às 21:12
Felipe, estou esperando o box arredondado! ^^
Felipe Cardozo Diz:
6/08/08 às 23:17
Está na 4° edição do MXWEBTV que está no ar.

[]´s
Adelson Diz:
7/08/08 às 17:25
a está certo! vi aqui…. o MXWEBTV está show de bolaaa ^^
Matheus Diz:
4/09/08 às 19:23
olá filipe cardoso tudo blz!
olha os meus boxs ficaram juntos, como faço pra mim separar?
Matheus Diz:
4/09/08 às 19:24
#boxesquerdo {
width: 340px;
height: 240px;
background-color: #00CCFF;
padding: 5px;
float: right;
}

#boxedireito {
width: 340px;
height: 240px;
background-color: #00CCFF;
padding: 5px;
float: left;
}

ve se tem alguima coisa errada!!!!
Felipe Cardozo Diz:
6/09/08 às 3:20

Olá matheus, tudo bem?
Pelo que vi, o erro pode estar em uma tal de falta de atenção(rsrs), mas isso é algo muito comum em nosso meio. Acontece toda hora.

Na primeira declaração, está escrito “#boxesquerdo”;
na segunda declaração está escrito “#boxedireito”;

Ou seja, na segunda, tem um “e” a mais. Porém, tudo acontecerá de acordo com a declaração na div. Exemplo:

Se estiver div=”boxdireito”, vai dar erro.

Verifique como está seu código.

[]´s
Rodrigo Martinelli - bom jesus dos perdões - SP Diz:
10/09/08 às 19:31
gostaria de saber como ficaria tableless com programação asp, includes, conteudo dinamico.
como que ficaria pois hj uso tabelas e em suas video aulas diz que nao se usa mais tabelas, como ficaria?
Helder Léo Diz:
17/09/08 às 20:52
Boa noite Felipe,

Estou a dois dias acompanhando suas vídeo-aulas e elas já me reitraram diversas dúvidas, realmente como todos dizem, são muito boas ^^…você explica melhor que o professor do meu curso ehauaehu ;D…Bom, mais ainda tenho uma única dúvida:

Na sua video aula (criando um site completo) você começa na parte do dreamweaver alinhando o conteúdo ao centro…certo? antes de criar a tabela..eu fiz o site todo em table dentro daquela div(do modo em que você realizou na vídeo aula)…só que tem um porém:

- Eu pretendia criar um menu pop-up (com OnMouseOver e OnMouseOut) só que para tal efeito, deve ser criada antes uma layer..ate ai tudo bem criei.

- Na hora em que presciono f12 e vejo no browser, ela esta la…só que, simplesmente ela não esta nem um pouco no lugar, e quando redimensiono, ela muda mais ainda =/…

Ja tentei de tudo…vi suas outras vídeo-aulas, mais nada =(.

Meu objetivo seria: Um site alinhado ao centro…com outras layers…+ nada. (Da maneira em que você fez no exemplo dessa última vídeo aula, a única diferença seria os efeitos), de forma que qualquer usuário independentemente da resolução, possa ver a página alinhada ao centro e o menu na posição correta. Falta só isso para entregar o projeto de Dw pro curso =~/…que é sabado agora.

Agradeço a sua atenção,

Helder.
Vanderlei Diz:
9/10/08 às 10:16
Salve moçada!
Estou tendo problemas em usar (background-repeat: repeat-x;)
numa div que é minha #bory, a minha bg repete no eixo Y corretamente, mas no eixo X a img.bg não se alonga, ex; teho um #bory com height de 718px e a img.bg tem 300px, então ela faz uma faixa de 300px no eixo Y não alongando para o eixo X.
Com tabelas funciona normal.

Espero ter explicado minha dúvida.

#body {
width: 740px;
height: 718px;
margin: 0 auto;
background-image:url(../img/bg/bg.jpg);
background-repeat: repeat-x;
padding: 10px;
}
Felipe Cardozo Diz:
9/10/08 às 11:12

Olá Vanderley, tudo bem?

Tente fazer isso:

background:#FFF url(pasta/bg.jpg) repeat-x;

Substitua as duas linhas onde tem o background no estyle acima e inclua somente este que te passei. Logicamente, você irá mudar a cor e o caminho da imagem

[]´s
Vanderlei Diz:
9/10/08 às 11:48
Origado Felipe!

Então na verdade não se “estica” uma img, mescla com um fundo na cor da img.

Quero deixar meus agradecimentos a vocês da MXMASTER e dizer que não perco um programa da mxwebtv. Vocês são D+.
Guilherme Diz:
23/10/08 às 16:19
Olá Felipe, tudo bem?

Gostaria de saber se consigo colocar uma imagem fatiada como bg de uma tabela com css ?
Gostaria de agradece pelas vídeo aulas, elas são ótimas, parabéns.
Manoel Mendes Diz:
3/11/08 às 23:39
Todas video aulas bem explicadas fiz tudinho !
Obrigado Felipe pela matéria !
Pedro Diz:
12/11/08 às 19:49
Blz aí Felipe.
Muito obrigado por essas vídeo aulas. No ano passado criei um site, mais como fiz ele em tabelas, no mozilla ficou todo bagunçado, como não consegui arrumar e não tinha a persistência que tenho hoje acabei abandonando a idéia. Mas agora com as video aulas do MX masters… e a minha persistência o projeto voltou à tona.
valeu aí Felipe
valeu aí Equipe Mx masters
RobertoGMJ Diz:
21/11/08 às 16:40
Valeu Felipe mais uma videoaula espetacular… Brigadao….

RGMJ
Diogo Faquinha Diz:
5/12/08 às 19:34
Felipe…

Parabens, rapaiz, esse seu trabalho é muito bom mesmo cara… já aprendi muito por aqui… e pretendo aprender mais ainda…. porem tenho uma duvida, o que devo fazer para ter um auxilio? desde já grato pela atenção!!!

Abraços!!!
RENATO LIMA Diz:
7/01/09 às 18:56
felipe ESTOU COM UM PROBLEMA COMO IMPORTAR UMA IMAGEN EM FLASH NUMA TABLESS
RENATO LIMA Diz:
9/01/09 às 15:23

MAIS ESPECIFICO E QUE EU QUERO FAZER MENUS COMO AQUELES K ESPORTAMOS DO FIREWORKS EM UMA TABLESS MAIS TODO SITE K ENTRO OS MENUS EM TABLESS ESTÃO SEM IMAGEN E COMO DIVIDIR UMA TABLESS PARA FAZER MENUS HORIZONTAL NÃO ESTOU CONSEGUINDO FAZER OS MENUS FICAREM HORIZONTAL
Lucas Diz:
9/01/09 às 20:48
Olá Felipe tudo bem?
Primeiramente gostaria de parabenizá-lo pelas aulas, aprendi muito, muito boa a sua didática. Eu tenho uma dúvida, eu fiz o site em css e até ae tudo tranquilo, no internet explorer eu consigo ver tudo normal, mas quando eu tento no firefox ou chrome, fica tudo fora do lugar, você sabe me dizer o que faço para consertar isso? E outra dúvida, fiz um menu pop-up no flash e inseri na minha página, porém ficou muito grande o swf, ocupou um bom espaço da página, que fica em branco a parte que o flash está, tem algum jeito ou alguma forma de colocar esse menu tipo flutuante e colocar um texto por baixo? Se quiser mando o menu e a página para você dar uma olhada. Até mais. Abraços. Valeu.
Gian Lucca Diz:
23/01/09 às 10:40
Opa felipão ^^
Valeu pelas video-aulas, você ensina muito bem!
Agradeço mesmo. Mas, você poderia postar aqui como centralizar o layout? Valeu!
joao Diz:
13/07/09 às 11:38
ola felipe nao estou conseguindo fazer o rodape ficar embaixo o que estou fazendo de errado?
@charset “utf-8″;
.estilo {
}

body{ background: #CCCCCC;
height:100%;
margin:0px}

#topo{
background: #FF0000;
border-left:1px solid #000000;
border-right:1px solid #000000;
width:800px;
height:120px;
margin-left:auto;
margin-right:auto;

}

#corpo {
background: #009966;
border-left:2px solid #000000;
border-right:2px solid #000000;
width:800px;
height:100%;
margin-left:auto;
margin-right:auto;

}

#rodape {background: #990000;
border-left:2px solid #000000;
border-right:2px solid #000000;
width:800px;
margin-left:auto;
margin-right:auto;

}
David CHC Diz:
13/07/09 às 15:57
@joao para habilitar medida de 100% para os elementos, vc tem q fazer assim no css:

html, body{
height:100%
}

Se vc estiver usando o float em algum elemento acima do #rodape, utilize o clear:both;
joao Diz:
13/07/09 às 17:16
ola amigo, como assim?
sera que eu nao posso criar so 3 divs?
tenho que criar a geraltb, tipo criaria div topo, div conteudo e div rodape, tenho que colocar html,{body em todas as divs?
nao manjo de css estou começando agora
vlw
David CHC Diz:
13/07/09 às 18:05
@joao, vc vai criar no começo do css pra q habilite nos elementos. no começo vc coloca:

html, body{
height:100%
}
joao Diz:
13/07/09 às 19:39
o que acontece agora, criei o topo esse topo é em flash e o menu esta incluido nele , embaixo conteudo e rodape sempre que digito alguma coisa no conteudo aparece um espaço e nao consigo organizar nada
tem alguma macete para digitar texto no conteudo de q ele fica dentro da div?
uso o dreamweaver cs3
obrigado
David CHC Diz:
15/07/09 às 9:23
@joao, vc está digitando o conteudo via Code?
joao Diz:
17/07/09 às 3:20
amigo coloquei essa codigo e nao esticou a div o que to fazendo de errado?
uso o internet explorer 8
@charset “utf-8″;
.estilo {
}

html{
height:100%;
min-height:100%;

}

body{ background:#999999;

height:100%;
background:#CCCCCC;
margin:0;
min-height:100%;

}
#principal{background: #666666;

border-left:2px solid #000000;
border-right:2px solid #000000;
margin:0;
width:830px;
margin-left:auto;
margin-right:auto;
height:auto;
min-height:100%;

}

* html #principal{
height:100%;
}
joao Diz:
18/07/09 às 10:04
ja consegui fiz 4 div com todos dentro da div pai
o problema é que nao consigo fazer a pafina esticar 100% queria fazer ela ocupar toda a tela
de uma olhada http://carrosecia.6te.net/

meu css
@charset “utf-8″;
.estilo {
}

html{
height:100%;

}

body{

min-height:100%;

height:100%;
background:#CCCCCC;
margin:0;

}
#principal{background: #666666;

border-:0;
border:0;
margin-top:auto;
margin-bottom:0;

width:830px;
margin-left:auto;
margin-right:auto;
height:100%;

min-height:100%;

}

#topo{background: url(menu.jpg);
border-left:1px solid #000000;
border-right:1px solid #000000;
margin:0;
width:779px;
margin-left:auto;
margin-right:auto;
height:136px;

}

#conteudo{background: #FFFFFF;
border-left:1px solid #000000;
border-right:1px solid #000000;
margin:0;
width:779px;
margin-left:auto;
margin-right:auto;
height:auto;
min-height:100%;

}

#flash{ background:#FFFFFF;
border:0;
border:0;
margin:0;
width:250px;
margin-left:auto;
margin-right:auto;
height:180px;

float:left;
}

#tabela{background: #FFFFFF;
border-left:1px solid #000000;
border-right:1px solid #000000;
margin:0;
width:779px;
margin-left:auto;
margin-right:auto;
height:auto;

}

#rodape{ background: url(rodappe.jpg);
border-left:1px solid #000000;
border-right:1px solid #000000;
margin:0;
width:779px;
margin-left:auto;
margin-right:auto;
height:20px;

}
vlw amigo
David CHC Diz:
18/07/09 às 10:15
@joao, o q vc quer é colocar a div pai 100% e o rodape sempre no final, aqui tem um tutorial do maujor q explica:
http://imasters.uol.com.br/artigo/9065/css/posicionar_o_rodape_embaixo_da_janela/

Lembrando o ehttp://www.mxmasters.com.br/wp-admin/edit-comments.php?comment_status=moderated#comments-formlemento vai ocupar 100% dependendo do seu elemento pai, se o elemento pai é de 400px, o 100% do elemento filho é 400. Lembre-se, quando dizemos utilizar 100%, é o 100% da tela, por isso q é utilizado min-height, pra que possa expandir. Dá uma olhada no artigo q vai te ajudar.
joao Diz:
19/07/09 às 1:51
amigo liz reli e trili esse tutorial mas nao consegui. o sabe me dizer se o site 6te.net aceita arquivo flash?
to enviando mas nao aparece vc tem msn, pra gente trocar uma ideia? o meu é sararinhojj@hotmail.com
vlw
andre Diz:
7/08/09 às 13:44
ola

gostaria de saber se vc tem como me fornecer os arquivos de html e css ????

grato,

AndreLima
Rodolpho Diz:
26/10/09 às 19:05
mais uma vídeo aula muito boa!!!!!
Raphael de Falco Ayres Diz:
2/11/09 às 17:40
Otimas video aulas!
tenho uma duvida. Como eu faço para que se eu aumentar o texto a imagem de fundo do content direito aumente junto?
GRATO e no aguardo!
David CHC Diz:
7/11/09 às 12:00
@Raphael de Falco, só tem uma maneira de fazer é repetindo a imagem, se ele for colocado via css, caso é for colocado html, a imagem vc terá q declarar medidas relativas, como em e %
Felipe Diz:
10/01/10 às 16:49
Felipe me da uma força ai eu queria sabe como eu adiciono um banner
na minha pagina e pra aparecer em tdas eu naum consegui poderia me ajuda ?
David CHC Diz:
10/01/10 às 18:56
@Felipe, talvez uma dessas aulas podem te ajudar:

http://www.mxmasters.com.br/dreamweaver/dreamweaver-atualize-dinamicamente-seu-site-facilmente-sem-saber-programar/

http://www.mxmasters.com.br/php/trabalhando-com-query-string/
Felipe Diz:
11/01/10 às 11:50
vlw ai David CHC me ajudo muito ^^ tava fazendo meu site completamente errado ¬¬ vlw msm ajudo muito aki ^^!
Jeef Diz:
18/01/10 às 14:40
Gostaria de saber como colocar um imagem fatiada no fireworks através do CSS.
Wellington Diz:
22/01/10 às 11:08
Felipe, td bom cara?

A iniciativa de vocês é muito bacana! Graças ao site eu me consegui resolver minhas dúvidas sobre layout, programação e principalmente photoshop! A minha passagem por aqui é só para agradecer mesmo!

Um abraço a todos e que Deus de muita saúde e sabedoria, para que esse tutoriais continuem!
Fabio Veloso Diz:
7/04/10 às 13:09
Grande Felipe excelente sequência de video aulas ñ tem com vc me enviar algumas? Valeuuuuuuuuuuuuuu!!
eltin182 Diz:
7/07/10 às 14:21
Onde que tá a parte 6?? So to aprendendo CSS e tableless por causa dessas video aulas ^^
Abraço!!!
Mauricio Diz:
28/07/10 às 18:45
Ola Felipe, estou começando agora a desenvolver websites, e graças a vocês estou aprendendo rápido, espero que continuem com as video aulas, sucesso pra vocês !!!!!!
mauricio Diz:
29/07/10 às 18:27
Olá equipe da mx masters
Não estou conseguindo modificar meus links, para tirar do modo padrão
Como faço para colocar efeitos neles, como, tirar o sublinhado padrão e sublinhar quando passo o mouse, ficar negrito, italico algo assim.
Se puderem me ajudar agradeço…
Mauricio-Df
David CHC Diz:
29/07/10 às 20:07
@mauricio, pra isso precisará mexer no CSS, pra remover o sublinhado

a{text-decoration:none}

Veja as outras video aula das seção tableless, q tem ensinando a construir layout, e realizar varios efeitos, e isso te ajudará bastante. Recomendo tbm o site do Maujor. http://www.maujor.com, q tem varios tutoriais sobre CSS, q irão te ajudar.
FAROFA Diz:
3/08/10 às 13:40
cara oque aconteceu com os outros videos sobre esse template do fenix hotel estou prescisando.
Thiago Diz:
30/08/10 às 18:48
ola teria como vcs fazer uma video aulas que mostra vcs fazendo um site em CSS e Tableless e posta para download? PQ eu so sei fazer site em tabelas entao se vcs poderem fazer isso eu agradeço e acho que muitas pessoas tbm ia acredecer vlw ^^
David CHC Diz:
30/08/10 às 19:10
@Thiago, não disponibilizamos as video aulas para download, mas vc pode acessar seção Desenvolvimento > Tableless, que tem varias video aulas, que você aprenderá desenvolver seus sites sem tabela:

http://www.mxmasters.com.br/categoria/tableless-css/