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.
- 01. Copiar Curriculum.txt
- 02. Borrar Curriculum_Img
- 03. Pegar Curriculum.txt
- 04. Guardar Mis_Hojas
- 05. Definimos Nombre
- 06. Aplicamos Hoja
- 07. Definimos Todas las Hojas
- 08. Adjuntar CSS en Mi_Plantilla
- 09. Comprobar en navegador
01. Copiar Curriculum.txt
Abrimos C/.. / Mi_Sitio / 11_Contenidos / Textos / Curriculum.txt y copiamos el texto.
02. Borrar Curriculum_Img
Estamos en Mi_Sitio / curriculum.html, seleccionamos … <div#Region_Editable> <img> y la borramos.
03. Pegar Curriculum.txt
Pegamos en <div#Region_Editable> el texto del currículum o bien escribimos nuestro texto.
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.
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.
06. Aplicamos Hoja
Seleccionamos nuestro nombre en los textos del currículum y le aplicamos la clase nombre_curriculum.
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
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.
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 / 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.