Diseño web con CSS 2ª parte
En este tutorial de Diseño Web con Dreamweaver CS5 continuamos lo que nos quedó del anterior, los apartados de Bloque, Cuadro y Lista. Que considero que son los que más usareis además de los apartados del tutorial anterior. Si queréis saber más sobre Diseño web con CSS hay muchísima información específica en la red.
Pasamos ya a describir el apartado Bloque, en el que tan solo nos centraremos en las alineaciones, Vertical y de Texto.
La alineación Vertical, la usaremos sobre todo para alinear el texto en tablas,
Encontraremos las diferentes alineaciones, top para indicar que se alinee en la parte superior, bottom, para alinear en la parte inferior y así sucesivamente con diferentes opciones que vosotros mismos podéis probar y encontrar cual se ajusta mejor a vuestro diseño web.
Recordad que si queréis ver los cambios antes de cerrar la ventana, pulsar “aplicar” y se aplicarán los cambios sin cerrar la ventana.
En la alineación del Texto, encontramos las alineaciones más comunes, alineación a la izquierda, a la derecha, centrado y justificado. Creo que no hace falta explicar mucho más porque el que más o el que menos ha utilizado ya algún editor de texto con diferentes alineaciones.
En el apartado de Cuadro podemos personalizar mucho más nuestro diseño web, que cuando empezamos a ver el diseño con la etiqueta “div” le veréis muchas más utilidades.
Encontramos “Width” y “Height” que corresponden al ancho y alto respectivamente de los objetos a los que queremos aplicar unas dimensiones concretas, ya sean imágenes, videos, div o cualquier etiqueta u objeto al que queramos aplicar un tamaño.
Seguidamente encontramos “Float” con esto se hace referencia a la posición que ocupará, izquierda, derecha o ninguna. Repito, esto tendrá mucho más sentido al utilizar una estructura en el diseño web con “div”. Con “Clear” limpiamos los objetos que se encuentran en una posición concreta.
Si nos fijamos, encontramos también encontramos “Padding” y “Margin”, hace referencia al Margen Interior y Margen Exterior respectivamente que queremos mantener.
Continuamos con el apartado Lista, hace referencia a las listas ordenadas y desordenadas que necesitemos o bien para nuestro texto o para la realización de un menú.
Lo primero que encontramos “List-style-type”, podemos cambiar en una lista desordenada el símbolo utilizado o quitarlo. En “List-style-image” podemos personalizar el símbolo de la lista y poner uno creado por nosotros, pero recordar que primeramente deberéis quitar el que viene por defecto.
Con esto terminamos la parte dedicada al Diseño Web con CSS, esto hoy en día es muy importante saberlo usar y Dreamweaver, nos facilita el trabajo y nos podemos centrar mucho más en la creatividad de nuestro diseño web.