Scribd Logo
Importer

Bienvenue sur Scribd !

  • Clase 6 Añadir Un Efecto Sustitución

    Transféré par

    Salome Rojas
    398 vues4 pages

    Copyright

    © © All Rights Reserved

    Formats disponibles

    DOCX, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    398 vues4 pages

    Clase 6 Añadir Un Efecto Sustitución

    Transféré par

    Salome Rojas

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 4

    Aadir un efecto sustitucin

    A continuacin va a aadir un efecto sustitucin de manera que el color de fondo de los bloques de
    la barra de navegacin cambie cuando el puntero del ratn pase sobre uno de los vnculos. Para
    aadir el efecto sustitucin, aada una nueva regla que contenga la pseudoclase: activable.

    La pseudoclase :activable Una pseudoclase es un modo de influir en determinados
    elementos de un documento HTML, basndose no en el cdigo HTML del documento en
    s sino en otras condiciones externas aplicadas por el navegador. Las pseudoclases
    pueden ser dinmicas, en el sentido de que un elemento de la pgina podra adquirir o
    peder la pseudoclase mientras el usuario interacta con el documento.
    La pseudoclase :activable produce un cambio en un elemento formateado de la pgina
    cuando el usuario mantiene el ratn sobre dicho elemento. Por ejemplo, cuando la
    pseudoclase :activable se incorpora al estilo de clase .navigation (.navigation:activable)
    para crear una nueva regla, todos los elementos de texto formateados por la regla
    .navigation cambiarn segn las propiedades de la regla .navigation:activable.

    1. Abra el archivo cafe_townsend.css.
    2. Seleccione toda la regla .navigation.



    3. Copie el texto (Edicin > Copiar).

    4. Haga clic una vez al final de la regla y presione Intro



    5. Pegue (Edicin > pegar) el texto copiado en el espacio que acaba de crear.
    6. Aada la pseudoclase :activable al selector pegado de .navigation siguiendo este procedimiento:



    7. En la nueva regla .navigation:activable, sustituya el color de fondo actual (#993300) por
    #D03D03.



    8. Guarde el archivo y cirrelo.
    9. Abra el archivo index.html en la ventana de documento y compruebe la vista previa de la pgina
    en un navegador (Archivo > Vista previa en el navegador.
    Cuando mantenga el ratn sobre cualquiera de los vnculos, podr ver el efecto sustitucin.

    (Opcional) Centrar el contenido de la pgina

    Por ltimo, va a utilizar el selector de etiquetas para seleccionar todo el HTML del documento y
    centrar el contenido del documento.

    NOTA: Algunos navegadores (como Internet Explorer 6), centran el texto de la pgina dentro del contexto de las
    celdas de tabla cuando se utiliza el mtodo descrito en esta seccin. Si no le gusta el resultado al consultar la vista
    previa en el navegador, ignore esta seccin y deje el contenido de su pgina alineado a la izquierda.

    1. Con la pgina index.html abierta en la ventana de documento de Dreamweaver, haga clic
    en la etiqueta <body> en el selector de etiquetas.



    Al hacer clic en la etiqueta <body> se selecciona todo lo comprendido entre las etiquetas de apertura
    y cierre de <body> en la ventana de documento. Para ver la seleccin, haga clic en la vista Cdigo
    en la parte superior de la ventana de documento.

    2. En el inspector de propiedades (Ventana > Propiedades), haga clic en el botn Alinear al
    centro.



    Dreamweaver inserta las etiquetas <div> de CSS que centran el contenido del cuerpo de la pgina.
    En la vista Diseo, aparece una lnea de puntos alrededor de la zona centrada por las etiquetas
    <div>.

    3. Guarde la pgina.

    Su pgina ya est terminada. El ltimo paso para crear su sitio Web es publicar la pgina. Para
    publicar la pgina, deber definir una carpeta en un sitio remoto y cargar sus archivos a esa
    carpeta. Esto lo veremos ms adelante

    Vous aimerez peut-être aussi