DW y resolución y diseño

[Luciérnaga]

tengo una página que quiero que tenga dos colores verticales.
en la izquierda uno que ocupe la tercera parte, por ejemplo blanco
a la derecha el otro que acupe el resto, por ejemplo verde

He hecho una tabla con dos columnas y eso...La tabla al 100% ancho y alto

Luego tengo que poner dos imágenes que constan de dos partes cada una, cada una con un fondo, de manera que la zona de la izquierda coincida con el fondo blanco y la zona de la derecha con el verde

Una imagen superior cuya mitad tiene que estar en el color de la izquierda y su otra mitad en la derecha

y debajo otra con la misma alineación


después tengo que poner a la izquierda y abajo una nueva imagen alienada a la derecha con el rasgo más saliente de las imágenes superiores

De manera que las imágenes creen una perfecta alineación vertical

en la derecha haré lo mismo, tendrán que crear una perfecta alineación vertical, pero en su parte izquierda...

Es decir, el blanco tendrá alienados los objetos en la derecha creando vertical y el verde alineará objetos en la izquierda creando vertical...

Bueno, las imágenes(que me las dan) las he dividido en cuatro de manera que he podido colocar cada cosa con su fondo (no se me ocurría otra manera, puesto que no se puede poner una tabla encima de la tabla (que yo sepa) y las capas me da que se mueven para donde quieren. Las he colocado cada cosa dentro de su tabla que hago dentro de la celda


Bien, prueba conseguida, pero....


Lo hago todo eligiendo 760 x 420 (800 x 600), y ahí coloco yo las cosas donde quiero. Y bien, pero en 1024 x 768 que es la resolución d e mi ibook pasan cosas...

Queda mucho espacio vacío

y el menú vertical, por ejemplo, que yo lo quería en la línea base de la zona derecha, alineado a la izquierda, pues se mueve para arriba... Y la imagen que tengo en la izquierda alineada a ese menú también... después de mucho dar vueltas he conseguido que se muevan juntos, que ya es mucho, pero no queda en la línea base como yo quería...

Trabajo con DW, ¿hay alguna manera de hacerlo mejor y más fácil o lo estoy haciendo correctamente? sin cambiar de programa que bastante me está cosando éste.

Gracias

[PatomaS]

Hola

Bueno, para empezar, cre oque me calro mejor si puedo ver lo que describes.

;)

En principio, te diría que lo has diseñado bien, pero si hay maneras de mejorarlo.

Primero, podrías utilizar porcentajes, en vez de pixels, de esa manera, tu diseño se ajustará a cada pantalla.

Respecto al espacio vacio si hay mucha resolución, bueno, en principio se soluciona usandolos porcentajes, pero claro, dependerá tambien del contenido.

Por otra parte, si en vez de usar tablas para todo el diseño, utlizas algunos div's, lograrás msjores cosas, por ejemplo el fonodo lo podrías hacer colocando la imagen como fonde de página, o como fondo de una capa, hay varias maneras.

Por otra parte utiliza hojas de estilo css, son muy poderosas y podrían ayudarte.

Pero bueno, eso son solo consejos y guías, ya irás experimentando...

Suerte

Felicidad

[Luciérnaga]

nada, que lo he conseguido, era tan fácil como usar mogollón de tablas y hacer que se alineen centro medio todas... y procurar que la cosa obedezca, que es lo que más cuesta... porque en mi diseño en Dw aparece una cosa en un punto, pero en el explorer puede aparecer más allá o más acá... Vamos que no es que obedezca mucho... pero ya lo he sonseguido
cuando acabe os lo enseño todo...

[PatomaS]

Hola

Me dejás helado con eso del mgollón de tablas... ¿podrías mostrar el código?.

Es que si has usado tablas siempre es mejorable con capas, per oespecialmente is has tenido que usar mucha stablas.


Bueno, ya nos dirás...

Suerte

Felicidad

[Luciérnaga]

Bueno, mogollón...

una general, dividida en dos columnas, y después dentro de cada columna otra tabla centro medio y después dentro de esa otras con cada objeto... creo recordar...

ya te lancé el reto a que me lo enseñaras a hacer con capas, pero como no me has repondido y si pongo una capa en un punto concreto, me sale donde le da la gana... pues no tengo ni idea...

[PatomaS]

Hola

Bueno, aquí dejo el código de 4 capas posicionadas en las 4 esquinas de una navegador, las dimensiones están ajustadas a mi pantalla y hechas rapidamente, con un pocquito más de calma, se puede lograr la perfección.

Código:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.arriba_izquierda {
	background-color: #ff0000;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 200px;
	height: 100px;
}
.arriba_derecha {
	background-color: #ff0000;
	position: absolute;
	top: 0px;
	left: 80.4%;
	width: 200px;
	height: 100px;
}
.abajo_izquierda {
	background-color: #ff0000;
	position: absolute;
	top: 82.4%;
	left: 0px;
	width: 200px;
	height: 100px;
}
.abajo_derecha {
	background-color: #ff0000;
	position: absolute;
	top: 82.4%;
	left: 80.4%;
	width: 200px;
	height: 100px;
}
</style>
<title>Posicionamiento básico de 4 capas</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
<div class="arriba_izquierda">
esta capa sale pegadita<br />a la parte superior<br />izquierda de la pantalla
</div>
<div class="arriba_derecha">
esta capa sale pegadita<br />a la parte superior<br />derecha de la pantalla
</div>
<div class="abajo_izquierda">
esta capa sale pegadita<br />a la parte inferior<br />izquierda de la pantalla
</div>
<div class="abajo_derecha">
esta capa sale pegadita<br />a la parte inferior<br />derecha de la pantalla
</div>
</body>
</html>

Felicidad