CSS Hojas de estilo en DreamWeaver

dreamweaver
Crear un album de fotos con DreamWeaver
25 diciembre, 2014
dreamweaver
Uso del refresh en DreamWeaver
25 diciembre, 2014

CSS Hojas de estilo en DreamWeaver

dreamweaver

La idea básica del diseño web actual es separar el contenido y la estructura del estilo y la apariencia. El estilo y la apariencia estarán contenidos en las CSS, Hojas de Estilo en Cascada.

Si usted no logra visualizar el panel Diseño en la parte derecha de la ventana principal del programa, proceda a dirigirse al menú principal del programa y seleccione la opción Ventana, posteriormente seleccione Estilos CSS, puede abreviar todo este proceso presionando la combinación de teclas Mayús + F11.

CSS Hojas de Estilo con DreamWeaver

Inmediatamente se desplegará el panel Diseño y se mostrará el contenido que pueda existir en la lengüeta Estilos CSS.

CSS Hojas de Estilo con DreamWeaver

Si usted aún no posee ninguna hoja de estilo CSS asociada a la página actual en la lengüeta Estilos CSS no se mostrará ninguna información.

Usted podrá observar cuatro iconos en la parte inferior derecha del panel Diseño. A continuación se explicará la función de cada uno de ellos.

CSS Hojas de Estilo con DreamWeaverEste icono le permitirá adjuntar una hoja de estilos en el caso que ya tenga una hoja preparada con anterioridad, es decir, usted cargará su página actual al estilo que impone la hoja de estilo que está adjuntando.

CSS Hojas de Estilo con DreamWeaver En caso que usted no posea ninguna hoja de estilo, usted puede crear su propia hoja de estilo, la cual podrá crearla exclusivamente para la página actual o puede crearla como un documento independiente, esto último le servirá para adjuntar (proceso descrito en el párrafo anterior) esa hoja de estilos a otras páginas.

CSS Hojas de Estilo con DreamWeaver Si usted tiene cargada una hoja de estilos que influye sobre la apariencia de su página actual y esta inconforme con ésta, simplemente puede editar las propiedades de la hoja de estilos, ya sea modificando las características actuales o agregándole nuevas propiedades a la hoja de estilos.

CSS Hojas de Estilo con DreamWeaver Usted puede seleccionar esta opción en el caso que desee eliminar una hoja de estilos que influya sobre la apariencia de la página actual.

Creación de una Hoja de Estilos CSS

En primer lugar deberá seleccionar el segundo icono (de izquierda a derecha) que se muestra en la parte inferior del panel de Diseño. Usted podrá apreciar una imagen similar a la siguiente:

CSS Hojas de Estilo con DreamWeaver

Ahora bien, en el campo Nombre modificaremos el nombre .unnamed1 por uno acorde a lo que representará el estilo que se definirá, en el ejemplo será .cuerpo (debe recordar que siempre debe anteceder un . al nombre del estilo). En el campo Tipo de selector por ahora se trabajará con Clase, luego se trabajará con las otras dos opciones. En el campo Definir en, se creará un nuevo archivo de hoja de estilos, esto facilitará el utilizar esta misma hoja de estilo para otras páginas. Para avanzar seleccione la opción Aceptar.

CSS Hojas de Estilo con DreamWeaver

En este instante usted deberá seleccionar un nombre con el cual representará la hoja de estilo, en el ejemplo se ha guardado la hoja de estilo como estilos.css.

CSS Hojas de Estilo con DreamWeaver

En estos momentos solo se trabajará con la categoría Tipo, se seleccionaron ciertas propiedades, estas se apreciarán en la siguiente imagen.

CSS Hojas de Estilo con DreamWeaver

Al final aplique los cambios y acepte.

Para aplicar el estilo a la página actual simplemente seleccione el texto al cual desea aplicarle los cambios e inmediatamente dirijase al panel Propiedades, en el apartado Estilo, seleccione el estilo recién creado (en el ejemplo el estilo creado es cuerpo).

CSS Hojas de Estilo con DreamWeaver

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *