¿Me recomiendan maquetar en css o tablas esta page?

snakepit · #1 (**permalink**) 26/04/2007, 11:11

Que tal amigos del foro, quisiera me den una mano. Tengo que maquetar una webpage al estilo de esta http://www.hopkinsonsmith.com/ solo que sin flash. Quisiera saber si me recomiendan maquetarla en css o con tablas ya que tiene 3 columnas y quizas se complique un poco ustedes que dicen? Muchas gracias Saludos cordiales

K3NNY · #2 (**permalink**) 26/04/2007, 11:54

CSS, toda la vida.

snakepit · #3 (**permalink**) 26/04/2007, 12:08

es muy dificil hacer algo bastante parecido a esa pagina en css? Tengo conociemientos muy basicos...

causita · #4 (**permalink**) 26/04/2007, 12:32

creo q esto tbn t podría ampliar horizontes

un abrazo

snakepit · #5 (**permalink**) 26/04/2007, 13:13

gracias amigo muy buen dato creo que me voy a meter un poco con css

mvillal · #6 (**permalink**) 26/04/2007, 19:07

Yo recuerdo algo que leí me parece en algunos de los enlaces que postea causita, y era que las tablas habían sido concebidas para tabular datos, ese es su objetivo y todo lo demás tenía que hacerse con otro medio (css).

Esa frase fue muy clarificadora, te lo quería comentar por si te sirve.

Saludos.

snakepit · #7 (**permalink**) 27/04/2007, 12:52

Gracias Mvillal ok muy util!

Nefertiter · #8 (**permalink**) 28/04/2007, 10:28

Cita:

gracias amigo muy buen dato creo que me voy a meter un poco con css

al principio cuesta hacer las cosas como se debe, pero despues q hagas un par de sitios hasta es vicioso maquetar de esa manera!

AlZuwaga · #9 (**permalink**) 28/04/2007, 10:39

Cita:

Iniciado por Nefertiter

al principio cuesta hacer las cosas como se debe, pero despues q hagas un par de sitios hasta es vicioso maquetar de esa manera!

Es cierto. De hecho, ya no me puedo imaginar cómo usar una tabla para darle estructura a un sitio

snakepit · #10 (**permalink**) 28/04/2007, 17:32

lo que pasa es que me pagaron por el site y ponerme a hacerlo por primera vez en css me da un poco de miedo, pero bueno se que estan aca para ayudar asi que si tengo dudas voy a recurrir a ustedes nuevamente, muchas gracias

snakepit · #11 (**permalink**) 28/04/2007, 17:57

Una preguntilla

por ejemplo hago un contenedor donde va a haber una cabecera para poner una imagen y los links que esa cabecera estaria dividida en dos tendria que hacer algo asi

<div id="contenedor">
<div id="cabecera"> <div id="cabecera1"> </div> <div id="cabecera2"> </div>

</div>

</div>

buzu · #12 (**permalink**) 28/04/2007, 21:21

Usar CSS es lo mas sencillo, es mas sencillo que tablas pero debes de sentarte bien a visualizar lo que vas a hacer o te encontraras a medio proyecto con que todo esta mal estructurado y hay que hacerlo de nuevo todo... no uses solo div y id, hay mas elementos y atributos (class) y te sera mejor... cuando usas CSS es mejor que lo hagas en un archivo separado y que vallas acostumbrándote a usar comentarios si es que no lo haces, trata de definir algunas reglas por separado, sobre todo las que pueden ser útiles a lo largo de todo el sitio, por ejemplo podrías hacer una regla que se llamara bold y que te pusiera el texto en bold... son solo algunos buenos havitos a seguir cuando desarrollas con CSS.

Por cierto... YA NO SE USAN TABLAS para maquetar... así que ya no vale preguntar si es mejor maquetar con tablas o con CSS...

snakepit · #13 (**permalink**) 29/04/2007, 11:36

Muchas gracias voy a buscar por aca todo eso de class y demas si saben de algo bueno pasenlo porfavor!

snakepit · #14 (**permalink**) 29/04/2007, 12:35

podrian aclararme esto porfavor!!!

Código:

<HTML>
<HEAD>
<TITLE>Titulo</TITLE>

<STYLE TYPE="text/css">
H1.nuevaclase { color:red; }
.nuevaclase2 {color:blue;}
</STYLE>

</HEAD>
<BODY>

<H1 CLASS="nuevaclase">Este texto aparece en rojo</H1>

<H1>Este texto aparece como un H1 normal</H1>

<H1 class="nuevaclase2">Este texto aparece en blue</H1>

<P class="nuevaclase">Este texto aparece en rojo</P>

</BODY>
</HTML>

Se pueden establecer clases separadas. Una misma etiqueta HTML puede tener diferentes "clases", permitiendo que un mismo elemento ofrezca diferentes estilos, por ejemplo: 

H1.clase1 {font: 15px; color: red;}

H1.clase2 {font: 15px; color: blue;}

H1.clase3 {font: 15px;color: green;}

Esto se transformaría a nivel de código:

<H1 CLASS="clase1 ">Este texto se vería en color rojo</H1>

<H1 CLASS="clase2">Este texto se vería en color blue</H1>

<H1 CLASS="clase3">Este texto se vería en color green</H1>

eso de H1.nuevaclase no se podria poner directamente en el archivo css y no ponerlo en el htm. Creo que me esta volviendo loco esto de las class

ventanazul · #15 (**permalink**) 29/04/2007, 13:46

Existen muchos y muy buenos libros sobre CSS, Eric Meyer y Dan Cederholm son dos de mis autores favoritos en el tema.

Hay además tutoriales muy completos en la Red, como el de WestCiv, te sugiero dedicarles algún tiempo.

CSS es la forma correcta de diseñar sitios web, olvida las tablas, diseñar no es su función.

Saludos.

Xhino · #16 (**permalink**) 30/04/2007, 15:44

Cita:

Iniciado por buzu

Por cierto... YA NO SE USAN TABLAS para maquetar... así que ya no vale preguntar si es mejor maquetar con tablas o con CSS...

Creo que eso es cierto en la medida de cada quien utiliza la tenconolía que le sea mas cómoda, y aunque no lo creas, ese sitio con tablas es infinitamente facil de maquetear.

buzu · #17 (**permalink**) 01/05/2007, 20:17

Por que @#$%@#$ siempre hay alguien que contradice lo que digo???

jajaja Borma....

En realidad no es así como tu (Xhino) dices, es una recomendación del W3C no usar tablas para maquetar, las tablas se hicieron para contener información tabulada, no para controlar la apariencia de una web, para eso esta CSS.

aquí no es cuestión de lo que se te acomoda o no o de lo que se te hace mas cómodo, sino de usar correctamente la tecnología, así haremos cada día mejores sitios, mas accesibles y estandarizados.

Usar correctamente la tecnología nos lleva a una buen desarrollo y por consiguiente a sitios de mejor calidad y menos problemáticos.

elquique · #18 (**permalink**) 01/05/2007, 22:46

Yo aun tengo sitios con Tablas, pero hace tiempo soy consciente que CSS es mucho mejor toda la vida :)

Yaraher · #19 (**permalink**) 01/05/2007, 23:13

Cita:

Iniciado por snakepit

podrian aclararme esto porfavor!!!

Código:

<HTML>
<HEAD>
<TITLE>Titulo</TITLE>

<STYLE TYPE="text/css">
H1.nuevaclase { color:red; }
.nuevaclase2 {color:blue;}
</STYLE>

</HEAD>
<BODY>

<H1 CLASS="nuevaclase">Este texto aparece en rojo</H1>

<H1>Este texto aparece como un H1 normal</H1>

<H1 class="nuevaclase2">Este texto aparece en blue</H1>

<P class="nuevaclase">Este texto aparece en rojo</P>

</BODY>
</HTML>

Se pueden establecer clases separadas. Una misma etiqueta HTML puede tener diferentes "clases", permitiendo que un mismo elemento ofrezca diferentes estilos, por ejemplo: 

H1.clase1 {font: 15px; color: red;}

H1.clase2 {font: 15px; color: blue;}

H1.clase3 {font: 15px;color: green;}

Esto se transformaría a nivel de código:

<H1 CLASS="clase1 ">Este texto se vería en color rojo</H1>

<H1 CLASS="clase2">Este texto se vería en color blue</H1>

<H1 CLASS="clase3">Este texto se vería en color green</H1>

eso de H1.nuevaclase no se podria poner directamente en el archivo css y no ponerlo en el htm. Creo que me esta volviendo loco esto de las class

Por si todavía no has resuelto este tema, la respuesta es sí, se puede colocar todo elemento Css en un archivo externo (incluso, es la práctica recomendada).

Existe un libro, CSS for Dummies, que si bien no es uno de los mejores existentes, tiene un elemento ganador: le hizo entender a mi papá a usar CSS, algo que ninguno de mis otros libros pudo hacer :P. Tal vez te podría servir como una introducción inicial.

Sobre usar CSS o tablas para maquetar, la respuesta ya fue dada, y no es siquiera necesario preguntarla. Independientemente si es más fácil o no, una hoja de estilo está hecha para el diseño y las tablas para tabular.

Un cañón puede servir para jugar tiro al blanco, pero lo correcto sería utilizar una saeta o proyectil similar ;)

PabloRosales · #20 (**permalink**) 02/05/2007, 00:28

Lo primero que debes saber es que mantener un sitio hecho con tablas puede llegar a ser un GRAN dolor de cabeza, otras ventajas son:

+puedes crear un archivo css para impresión y así ocultar todo lo que no quieras que se imprima, puedes ver en mi sitio funcionando eso css.todoprogra.com

+puedes reducir el costo de ancho de banda ya que un archivo xhtml ordenado y un css comprimido ocupan mucho menos espacio que un gran archivo lleno de tr y td que no entiende nadie

+separas el contenido del diseño...

+las tablas son para eso TABLAS, no para diseñar

Bueno, espero eso te ayude en algo. En cuanto a aprender, la mejor manera es intentandolo, y leyendo el código css de otros :) suerte!

Busca en google: tutorial css