Esto podría ser un post adicional del tema Planeación y Definición del sitio con Dreamweaver cs3 lo publico por que me pareció interesante hacerles llegar todo esto.
A menudo nos pasa que a la hora de empezar a diseñar un sitio es decidir con que resolución vamos a trabajar. para saber un poco mas sobre que resolución es la mas usada podemos ver estas estadísticas (img1) de la w3schools
img1
Seguir diseñando en 800×600 garantiza a mas usuarios la correcta visualización del sitio aunque revisando la tabla de estadísticas aproximadamente 80% de los usuarios de Internet utilizan resoluciones mayores a 1024 px lo que nos pude ayudar a decidir diseñar nuestro sitio a 900 0 960 pixeles.
¿Por qué a 900 0 960?
900 (img2) por que es un numero que puede ser dividido en 2, 3, 4, 5 y 6 lo que permite que podamos crear sitios a base de rejillas ↓ , ve la imagen para detalle. aunque tenemos el grandiosos 960px el tamaño perfecto
img2
Las cuadriculas ayudan modelar el contenido del sitio, hay bastantes ideas para diseñar cuadriculas y sobre estas ir añadiendo la estructura al documento, rejillas con Photoshop, rejillas con Excel, o Calc de Open Office o con Google Spreadsheets depende de la imaginación de cada quien o podemos usar el mismo Dreamweaver para hacer esto.
Para hacerlo con Dreamweaver hay que ir al menú View/Grid/Grid Settings y basta con configurar el tamaño color y si prefieres lineas o puntos, después basta con mostrar el grid yendo al mismo menú View/Grid/Show Grid Ctrl+Alt+G. también para mas ayudas visuales podemos usar las reglas View/Rules/Show Ctrl+Alt+R.
Ahora con Fireworks también es posible de la misma manera que Dreamweaver aunque este nos permite determinar el alto de la reja algo que Dreamweaver no. Desde Fireworks podemos empezar a diseñar la plantilla {img4} podemos usar el generador Lorem Ipsum -WTF?- para ir viendo el diseño visual del sitio {img5}.
Otro método si es que te decides usar 960px es descargarte este imagen de Cameron Moll Griding The 960 después en Dreamweaver utilizamos la opción que se encuentra en el panel de propiedades de la pagina Modify/Page Properties Ctrl+J
Con una imagen de rastreo es mucho mas fácil diseñar la interface, no olvides eliminar los margenes y bordes de la pagina para poder trabajar mas facil. el panel de propiedades en Appearance en Margin hay que poner ceros a todo otro método es ir directamente a la hoja de estilos y escribir. *(margin:0;padding:0;border:0 none) esta regla eliminara a todos los elementos el margen el relleno y el borde a o pixeles.
La imagen puede ser guardada en www/sitionuevo/recursos ¿? recuerda que este mejor ordenado los archivos del sitio guarda todo en carpetas bien nombradas.
Enlaces Recomendados
- Rejillas para Flash
- Generador de Rejillas
- Oh Yeeaahh! descarga la presentación powerpoint
- Grid Calculator bastante útil, permite generar rejillas basándose en el numero de columnas, tamaño de la fuente y en ancho de cada capa al final da un aproximado en pixeles.
- Measurelt es una extensión para Firefox que permite integrar una regla a nuestro navegador y así medir cualquier objeto en pantalla tanto el alto como el ancho en pixeles.
Actualización
Encontré por ahí algunas herramientas que también pueden ayudar.
- extensión para Fireworks
- YUI: CSS Grid Builder Recomendado
