A la hora de diseñar sitios, a menudo hay que resolver una pregunta fundamental: ¿cuál será el comportamiento de la página cuando se abra con diferentes resoluciones de pantalla? Aquí hay dos opciones: páginas del sitio "de goma" (estiramiento) o estáticas. Se discutirá la primera opción. Cualquiera que sea su preferencia por el diseño, el principio principal del diseño flexible es la escalabilidad relativa.
Es necesario
- - conocimiento de HTML;
- - programa para editar código html.
Instrucciones
Paso 1
Seleccione el archivo principal para la plantilla de su sitio, que reflejará el marcado principal. Puede ser un archivo index.html o index.php. Uno de los mejores software de edición de plantillas de sitios visuales es Macromedia Dreamweawer. La edición necesaria se realizará sobre la base de este programa.
Abra el archivo de plantilla o cree uno nuevo con el comando "Archivo" - "Nuevo", categoría - "Página base" - "HTML" o categoría "Página dinámica" - "PHP". Aquí consideramos el caso general cuando la estructura del sitio se registra exactamente en uno de los dos archivos.
Paso 2
No ha sido ningún secreto durante mucho tiempo que existen diferentes tipos de diseño: en tablas, en bloques div y combinados (tablas y bloques al mismo tiempo). La etiqueta html es responsable del diseño de la tabla.
Especifique un porcentaje (100%) para cada propiedad. Esto logrará el efecto de estirar automáticamente las celdas de la tabla en pantallas con cualquier geometría. Puede ser un monitor de 19 pulgadas o un teléfono inteligente; cada uno de ellos reproducirá correctamente el contenido.
Paso 3
Si necesita especificar exactamente la correspondencia entre las celdas de la tabla, utilice el siguiente ejemplo:
| … … el contenido de la celda 1. … | … … el contenido de la celda 2. … |
Aquí verás que una de las celdas está especificada con un ancho del 30% de todo lo que está definido para la propia tabla. Un cálculo simple muestra que 100% -30% = 70% queda para la segunda celda. Recuerde que en este caso una de las celdas de la tabla no debe tener establecido el atributo de ancho. El navegador hará todos los cálculos por sí solo y estirará correctamente la tabla con celdas. El contenido dentro de las tablas también se estirará y encogerá correctamente en diferentes pantallas.
Paso 4
En una situación con un diseño div, los bloques de etiquetas se estiran de forma predeterminada a todo el ancho de la pantalla y se siguen uno tras otro de izquierda a derecha, de arriba a abajo. Para refinar su geometría, cree una clase CCS o identificador (ID), en el que especifique, por ejemplo, los atributos y / o para la categoría de tamaño y posición de la caja (Caja). No olvide vincular el estilo especificado al archivo de marcado del sitio y vincular la clase (ID) a la etiqueta deseada. Por lo general, se coloca al principio del script, definiendo toda la geometría futura del sitio:
… … contenido del sitio. …
O así:
… … contenido del sitio. …
El código de la regla CSS será el siguiente:
… mi clase {
ancho: 30%;
altura: 50%;
}
#mi identificación {
ancho: 30%;
altura: 50%;
}
