19. Curriculum CSS

<< 18. Páginas index, curriculum y galería                                     20. Enlaces >>

 

http://cursodw.papelyweb.com/curriculum.html

Ahora trabajaremos con las hojas de estilo en cascada. Para practicar abrimos curriculum.html y  bien escribimos el nuestro o pegamos el ejemplo Mi_Sitio /11_Contenidos / Textos /Curriculum.txt

Un estilo CSS es más que un conjunto de reglas de formato que controlan el aspecto del contenido de una página Web. Los estilos CSS aportan gran flexibilidad y control al aspecto exacto que se busca en una página, desde la posición precisa de elementos hasta el diseño de fuentes y estilos concretos.

Una de las grandes ventajas es que cuando se actualiza un estilo CSS, el formato de todos los documentos que usan ese estilo se actualiza automáticamente.

Para crear un nuevo estilo dentro de una hoja, seleccionamos la hoja en el panel CSS y pulsamos el botón que sirve para crear un nuevo estilo en la hoja de estilos seleccionada o en otra nueva.

En ella puede especificarse el Nombre del estilo, sin espacios y comenzando con un punto. Nosotros la vamos a llamar “.nombre_curriculum”, ya que será la que aplicaremos a nuestro nombre en el currículum.

Con la opción Clase seleccionada es posible especificar si el estilo va a ser uno personal creado desde cero (la que vamos a utilizar).

Con Etiqueta se pueden modificar los atributos de una etiqueta ya existente. En este caso en Nombre aparece la lista de etiquetas HTML que pueden ser redefinidas, como  BODY, A, FORM, TABLE, etc.

Con Avanzadas se puede redefinir el formato de una combinación de etiquetas.

En Definir en se determina si el estilo se añade a la hoja de estilo propia del documento (Sólo este documento), si se añade a una nueva hoja de estilos (Nuevo archivo de hojas de estilo) o si se añade a la hoja de estilos seleccionada.

Aceptamos y nos aparece la ventana de Definición de regla para … en nuestro caso “.nombre_curriculum”. Definimos las reglas hasta que nos gusten y aplicamos la hoja de estilo a nuestro nombre en el currículum. Iremos generando las demás hojas de estilo hasta que tengamos completado el formato de nuestro texto.

Para realizar la práctica seguimos el paso a paso.

 

papel y web

01. Copiar Curriculum.txt

Abrimos C/.. / Mi_Sitio / 11_Contenidos / Textos / Curriculum.txt  y copiamos el texto.

papel y web

02. Borrar Curriculum_Img

Estamos en Mi_Sitio / curriculum.html, seleccionamos … <div#Region_Editable> <img> y la borramos.

papel y web

03. Pegar Curriculum.txt

Pegamos en  <div#Region_Editable> el texto del currículum o bien escribimos nuestro texto.

papel y web

04. Guardar Mis_Hojas

Creamos una nueva regla CSS desde el panel Estilos CSS, haciendo clic en el icono “nueva regla” situado en la parte inferior derecha del panel. Se abre la ventana de Nueva regla CSS, en el tipo de selector seleccionamos Clase, en el nombre del selector escribimos .nombre_curriculum y en la definición de regla seleccionamos (Nuevo archivo de hoja de estilos). Aceptamos y se abre la ventana de Guardar archivo de hoja de estilo como y la llamamos Mis_Hojas_Estilo creamos la carpeta CSS en nuestro sitio y guardamos dentro.

papel y web

05. Definimos Nombre

Tenemos abierta la ventana Definición de regla .nombre_curriculum en Mis_Hojas_Estilo.css y en tipo cambiamos la fuente, el tamaño y el color. Aceptamos.

papel y web

06. Aplicamos Hoja

Seleccionamos nuestro nombre en los textos del currículum y le aplicamos la clase nombre_curriculum.

papel y web

07. Definimos Todas las Hojas

Repetimos la práctica siguiendo el paso a paso anterior con el resto de hojas de estilo .direccion_curriculum, .objetivo_curriculum, .texto_curriculum, .fecha_curriculum, .cargo_curriculum.

Definiendo las reglas dentro de Mis_Hojas_Estilo.css

La idea es personalizar las reglas para coger soltura con los estilos CSS

papel y web

08. Adjuntar CSS en Mi_Plantilla

Abrimos Mi_Sitio / Templates / Mi_Plantilla.dwt y en el panel de Estilos CSS vamos a Adjuntar hojas de estilo, las encontramos en Mi_Sitio / CSS / Mis_Hojas_Estilo.css y actualizamos las páginas vinculadas a la plantilla.

papel y web

09. Comprobar en navegador

Abrimos Mi_Sitio / curriculum.html y hacemos una vista previa en un navegador.

Vemos la Definición de las Propiedades CSS en la ayuda.

Crear las carpetas del curso

C: … / Cursos / Curso_Dreamweaver /  Curso_Final. Contiene los archivos finalizados que vamos a necesitar para completar las prácticas de curso.

C: … / Cursos / Curso_Dreamweaver /  Mi_Sitio. Es donde realizaremos las prácticas.

Si es necesario crea las carpetas que necesites. Es muy importante mantener la estructura de carpetas que recomendamos en estos apuntes, para seguir el curso sin perdidas de tiempo adicionales.

Envia un comentario

Debes ser Conectado Para publicar un comentario.