Entrar

Estructuración de una página web

moimuá · · Solicitar retirada
Hola.

Estoy tratando de diseñar una página web, no como web convencional sino como sencillo ensayo de arte web.

He distribuido en el seno de un div global nueve capas de idéntico formato, quedando algunas totalmente aisladas del resto, siendo otras adyacentes entre sí, o entre los pixeles que determinan los vértices de los div’s o a una o a dos caras de otras capas.

La mencionada distribución de las capas corresponde con exactitud a la de la estructuración previa de dicha distribución, acotada, elaborada mediante Autocad.

Pues bien, he procedido creando la siguiente plantilla:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<title>Plantilla</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="dos">dos</div>
<div id="uno">uno</div>
<div id="tres">tres</div>
<div id="cuatro">cuatro</div>
<div id="cinco">cinco</div>
<div id="seis">seis</div>
<div id="ocho">ocho</div>
<div id="nueve">nueve</div>
<div id="siete">siete</div>
</div>
</body>
</html>

Nota: href="estilo-general-ie.css" para su visualización mediante Internet Explorer.

La siguiente hoja de estilo para visualizar la plantilla en Firefox:

* {margin:0px ; padding:0px ; border: 0px ; }
body {background color: #FFFAFA ; text-align: center ; font-family: CountryBlueprint ; color: gold ; font-size: 8mm ; }
#global {width:1000px ; margin: 4px auto }
#dos {background-color: #1C1C1C ; width: 125px ; height: 125px ; margin: 0px 300px 125px 475px ; }
#uno {background-color: #1C1C1C ; width: 125px ; height: 125px ; margin: 0px 475px 0px 350px ; }
#tres {background-color: #1C1C1C ; width: 125px ; height: 125px ; margin: -125px 175px 0px 600px ; }
#cuatro {background-color: #1C1C1C ; width: 125px ; height: 125px ; margin: 0px 425px 0px 350px ; }
#cinco {background-color: #1C1C1C ; width: 125px ; height: 125px ; margin: -125px 300px 0px 475px ; }
#seis {background-color: #1C1C1C ; width: 125px ; height: 125px ; margin: -125px 50px -25px 850px ; }
#ocho {background-color: #1C1C1C ; width: 125px ; height: 125px ; margin: 25px 350px 0px 475px ; }
#nueve {background-color: #1C1C1C ; width: 125px ; height: 125px ; margin: -125px 275px 0px 600px ; }
#siete {background-color: #1C1C1C ; width: 125px ; height: 125px ; margin: 0px 850px 0px -25px ; }

Y la siguiente hoja de estilo para visualizar la plantilla mediante Internet Explorer (la misma pero con algunas variaciones de valores numéricos de los datos relativos a los atributos margin):

* {margin:0px ; padding:0px ; border: 0px ; }
body {background color: #FFFAFA ; text-align: center ; font-family: CountryBlueprint ; color: gold ; font-size: 8mm ; }
#global {width:1000px ; margin: 4px auto }
#dos {background-color: #1C1C1C ; width: 125px ; height: 125px ; margin: 0px 300px 125px 475px ; }
#uno {background-color: #1C1C1C ; width: 125px ; height: 125px ; margin: 0px 450px 0px 375px ; }
#tres {background-color: #1C1C1C ; width: 125px ; height: 125px ; margin: -125px 225px 0px 650px ; }
#cuatro {background-color: #1C1C1C ; width: 125px ; height: 125px ; margin: 0px 450px 0px 375px ; }
#cinco {background-color: #1C1C1C ; width: 125px ; height: 125px ; margin: -125px 325px 0px 500px ; }
#seis {background-color: #1C1C1C ; width: 125px ; height: 125px ; margin: -125px 0px -25px 900px ; }
#ocho {background-color: #1C1C1C ; width: 125px ; height: 125px ; margin: 25px 325px 0px 500px ; }
#nueve {background-color: #1C1C1C ; width: 125px ; height: 125px ; margin: -125px 225px 0px 650px ; }
#siete {background-color: #1C1C1C ; width: 125px ; height: 125px ; margin: 0px 825px 0px 0px ; }

Obviamente, seguiría todos los pasos del Plan Foley para conseguir que la web se vea igual en todos los navegadores.

Y ahí va mi pregunta (antes de continuar mi proyecto): ¿Existe otra manera mejor o más coherente de plantear mediante códigos la estructuración de ésta, mi página web? Si así fuera, procedería en consecuencia.

Gracias por vuestra atención.

Saludos.
Foley · · Solicitar retirada
Te refieres a hacer tu web de forma que uses menos divs o cómo?
moimuá · · Solicitar retirada
Foley, necesito los nueve divs.

Me refiero a la posibilidad de ubicarlos mediante otros atributos, ¿coordenadas quizás?

Tan solo pretendo que al hacer clic en cada div (aparentemente vacío) aparezca una imagen (en total, ocho imágenes de texto estratégicamente situado y una foto).

Haré un index de presentación y entrada a la página, y en ésta estableceré un enlace a otra, donde insertaré una relación de créditos.

Gracias por tu interés.

Saludos.
Foley · · Solicitar retirada
Si todos tienen las mismas dimensiones puedes hacer que vayan unos seguidos de otros y punto, sin usar margins.

Saldría algo así (saldrían más por fila según los que cojan):

div-div-div
div-div-div
div-div-div

Saludos
Foley · · Solicitar retirada
Ah, vale, entiendo.

Pues puedes hacerlo como hasta ahora, a mí me parece una buena forma o también se me ocurre que lo hagas usando una técnica llamada sprites css (yo no la puse en práctica aún pero hay muchos tutoriales, como http://www.kabytes.com/programacion/tutorial-basico-sobre-css-sprite/)

Con esa técnica lo que haces es usar una imagen y luego en los diferentes divs seleccionarías porciones de esa misma imagen. Un ejemplo lo tienes en esta misma web: http://www.comocreartuweb.com/comun/objetos/index-fondo-total-2009.png
Como ves, jorgens usa sprites css para ir seleccionando porciones de una misma imagen. En realidad los sprites css se usan para que la web cargue antes -> menor número de imágenes = web más rápida

Ya depende de ti hacerlo como hasta ahora o usar sprites, es cosa tuya ;)

Saludos
moimuá · · Solicitar retirada
Muchísimas gracias Foley.

Le he dado un vistazo al tutorial básico sobre CSS Sprite. Más tarde lo estudiaré a fondo, y valoraré la posibilidad de usar esta técnica en el contexto del ensayo web que estoy desarrollando.

Saludos.