Читать книгу Aprender Dreamweaver CS6 con 100 ejercicios prácticos - MEDIAactive - Страница 16

Оглавление
010 Aplicar un color y una imagen de fondo

ENTRE LOS ASPECTOS CONFIGURABLES mediante etiquetas se encuentran el color de fondo, el título y la codificación de las páginas. También es posible aplicar una imagen de fondo a una página. Al insertar una imagen en un documento, el programa genera automáticamente una referencia al archivo en el código HTML.


IMPORTANTE

El panel Propiedades permite crear nuevas reglas CSS obteniendo, como asistencia, sencillas explicaciones acerca del lugar que corresponde a las propiedades en la cascada de estilos y sin necesidad de escribir código.



1 En el panel Archivos, haga doble clic en el icono de la página index.htm.

2 Haga clic en el botón Propiedades de la página del Inspector de propiedades. Recuerde que también puede acceder al cuadro Propiedades de la página usando esa opción del menú Modificar o la combinación de teclas Ctrl.+J.

3 Como aún no hemos trabajado con los estilos CSS, modificaremos la apariencia de la página HTML. Haga clic en la opción Apariencia HTML del panel de la izquierda.

4 El color de fondo de la página es una de las propiedades definidas mediante etiquetas HTML. Pulse en la punta de flecha del cuadro de color de la opción Fondo y una muestra de la paleta disponible. Pulse la rueda de color de la paleta para acceder al cuadro Color y poder agregar así muestras a los colores personalizados.

5 Haga clic en la categoría Título/Codificación para acceder al contenido de esta categoría. En el campo Título escriba la palabra principal y pulse Aceptar.

6 Repita la misma operación con la página texto, aplíquele el mismo color de fondo y nómbrela secundaria.

7 Ahora aplicaremos una imagen de fondo a la página. En primer lugar haremos una copia de la página texto. En el panel Archivo haga clic con el botón derecho sobre la página texto, seleccione el comando Edición y pulse la opción Duplicar.

8 Renombre la nueva copia con el texto foto.htm y ábrala.

9 Haga clic en el botón Propiedades de la página del Inspector de propiedades y pulse en la categoría Apariencia HTML.

10 Pulse el botón Examinar, situado a la derecha del campo Imagen de fondo.

11 En el cuadro Seleccionar origen de imagen pulse el botón Subir un nivel, que muestra una carpeta y una flecha verde y cree una nueva carpeta en el escritorio.

12 Descargue desde nuestra web los archivos necesarios y guárdelos en esta carpeta, que puede denominar Dreamweaver CS6

13 Desde el cuadro Seleccionar origen de imagen abra dicha carpeta, seleccione el archivo casa.jpg y pulse Aceptar.

14 Pulse el botón Aceptar del cuadro Propiedades de la página.

15 La imagen se ha aplicado como fondo de pantalla. Por último abra el menú Archivo, seleccione el comando Restituir y, en el cuadro de confirmación que advierte que se perderán los cambios realizados, pulse el botón Sí para recuperar el aspecto inicial del documento.


IMPORTANTE

Deben evitarse los documentos de imagen de gran tamaño, ya que aumentan el tiempo de descarga de la página y es recomendable seleccionar fondos de imagen de tamaño reducido que permitan visualizar correctamente los contenidos de la página.


Aprender Dreamweaver CS6 con 100 ejercicios prácticos

Подняться наверх