Otros elementos

 

Fuentes web

En esta versión de Dreamweaver podemos utilizar una amplia colección de fuentes web llamada Adobe Edge Web Fonts. Si utilizamos una de estas fuentes en una página, por ejemplo a través de una regla de estilo CSS, Dreamweaver añade código en Javascript para que el navegador del usuario que visita la página descargue la fuente del servidor Creative Cloud de Adobe y ésta se presente tal y como la diseñamos. Usar estos nuevos tipos de letra puede dar un toque de originalidad a nuestros sitios y nos abre nuevas posibilidades.

Para trabajar con las fuentes de Adobe Edge Web Fonts utilizamos el menú Modificar, Administrar Fuentes... lo que abre la siguiente ventana:

Los botones a la izquierda de la ventana permiten filtrar los diversos tipos de fuentes (sans, serif, góticas, etc.)

En tanto que el botón  muestra las que han sido previamente utilizadas en nuestra página. Después, es necesario hacer clic sobre la fuente o fuentes deseadas, las que irán quedando seleccionadas.

Y hacemos clic en el botón Listo.

Ahora las fuentes añadidas aparecerán, por ejemplo, en las listas del Diseñador de CSS disponibles para su uso.

Con la segunda ficha de la ventana Administrar fuentes también es posible utilizar en nuestras páginas fuentes que se encuentren en el disco duro de nuestro ordenador. Sin embargo, hay que tener en cuenta que debemos poseer una licencia de uso de las mismas. Al hacer clic en la segunda ficha, la ventana nos muestra lo siguiente:

En esta ventana tenemos que indicar en qué carpeta tenemos el archivo que contiene la nueva fuente y pulsar Listo. Las fuentes pueden estar en uno de los cuatro formatos que aparecen en la ventana, EOT, WOFF, TIF y SVG. Hay que leer las condiciones de uso de la fuente y aceptarlas. A partir de este momento ya podemos usar la fuente como una fuente más. Por ejemplo, al definir nuevos estilos.

Finalmente, es posible modificar las listas de las familias de fuentes, creando nuestras propias familias o modificando las existentes. Como se recordará, estas familias de fuentes se utilizan, entre otras posibilidades, cuando definimos las propiedades de la página. Para ello utilizamos la tercera ficha Pilas de fuentes personalizadas.

Marquesinas

Las marquesinas son texto, imágenes, o una mezcla entre texto e imágenes, que pueden desplazarse de un lado a otro de la ventana en forma de línea. A continuación tienes un ejemplo de marquesina.

Bienvenid@s a PerrosGatos 

Las marquesinas se utilizan cada vez menos ya que no están incluidas en los estándares web y en ocasiones pueden resultar un poco molestas. Además el usuario no puede hacer nada para detener el movimiento.

Las marquesinas no se pueden insertar a través del editor gráfico de Dreamweaver, es necesario hacerlo a través del código.

Para crear una marquesina hay que insertar las etiquetas <marquee> y </marquee>. Entre dichas etiquetas han de introducirse los elementos que se desea que aparezcan en la marquesina.

También es posible especificar algunas características de la marquesina. La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas puedes hacer que estas propiedades varíen. Por ejemplo, si pones <marquee behavior="slide">, la marquesina hará el desplazamiento una sola vez y se detendrá.

Si pones <marquee behavior="alternate">, en lugar de desplazarse continuamente de derecha a izquierda, la marquesina se desplazará de lado a lado de la ventana, como si rebotara en los extremos, tal y como ocurre en el ejemplo anterior, cuyo código puedes ver a continuación:

<marquee behavior="alternate">
    Bienvenid@s a PerrosGatos
    <img src="imagenes/logo_animales.gif" alt="PerrosGatos" />
</marquee>

No conviene abusar de estos elementos, que ya que distraen la atención del visitante. Cada vez se emplea menos este elemento, ya que si se quiere animar texto u otros elementos, ahora puede hacerse utilizando las nuevas características de estilos CSS.

Fecha

Dreamweaver permite insertar fácilmente la fecha de última modificación de las páginas.

Cuando se modifica una página en la que se ha insertado este tipo de fecha, se actualizará automáticamente con la fecha del sistema.

Conviene insertar la fecha de modificación cuando la página ha de contener información actualizada cada poco tiempo, para que los usuarios puedan saber cuándo fue la última vez que se actualizaron los datos. Pero en el caso de que la página no se actualice hasta que pase cierto tiempo, es preferible no incluir la fecha de modificación, ya que puede dar sensación de abandono. No obstante hay contenidos en los que es imprescindible informar al usuario de cuando fue redactado, sobre todo aquellos que se refieren a temas (como informática) que pueden haber quedado obsoletos.

Para insertar la fecha hay que dirigirse al menú Insertar, a la opción Fecha.

En la nueva ventana ya es posible establecer el formato de la fecha, y si se desea que se actualice o no automáticamente al modificar y guardar la página de nuevo.

 Para practicar puedes realizar el ejercicio paso a paso Insertar fecha .

13.4. Regla horizontal

El elemento que suele utilizarse para separar secciones dentro de una misma página es la regla horizontal. Una regla horizontal no es más que una línea que cruza horizontalmente al elemento que la contiene.

---

Para insertar una regla hay que dirigirse al menú Insertar, luego la opción Regla horizontal.

Si queremos insertarla desde el código, podemos hacerlo con la etiqueta <hr />.

El inspector de propiedades para las reglas es el siguiente.

A través de sus campos es posible modificar en cierta medida la apariencia de las reglas. A continuación tienes cuatro ejemplos de reglas horizontales.

---

---

---

---

Estas reglas sólo se diferencian en las opciones Al (altura) y Sombreado. Las dos primeras, por ejemplo, no tienen activada la opción Sombreado, mientras que las otras dos sí.

Podemos cambiar su color mediante CSS, con la propiedad color (como el color del texto).

Código de otras páginas

En ocasiones nos gustaría incluir en nuestras páginas cosas que hemos visto en otras páginas que están publicadas en Internet.

Por una parte, tenemos páginas que nos ofrecen ese código para que lo incluyamos en nuestra web, como banners o contenido multimedia, como pueden ser los vídeos del portal youTube.

En la mayoría de estos casos, lo único que tendremos que hacer será copiar ese código y pegarlo en nuestro código fuente, en el lugar que queramos mostrar el elemento.

En otras ocasiones puede que no se trate de un elemento pensado para que lo copiemos. Simplemente es una parte de una página que nos gustaría tener o que sentimos curiosidad por cómo estará hecho.

En estos casos, lo mejor es ver el código fuente. Puedes visualizar el código fuente de dichas páginas con cualquier navegador, normalmente a través del menú Configuración, o bien mostrar el menú contextual de la página pulsando con el botón derecho sobre ella, y pulsando después sobre la opción Ver código fuente. De este modo podemos ver su código y emplearlo en nuestras páginas.

Visualizar el código fuente resulta útil para ver cómo se ha estructurado la página, el uso de los comportamientos (que aparecen programados en código JavaScript), y otra serie de rutinasJavaScript.

Pero en muchas ocasiones puede costar entender el código, sobre todo si no se tienen nociones de ningún lenguaje de programación. Si no entiendes el código, puedes cometer el error de copiar código JavaScript erróneo, copiarlo de forma incompleta, insertarlo en una zona incorrecta del código html, etc.

Lo importante que tienes que saber en este momento sobre las funciones JavaScript es que aparecen entre las líneas

<head> ... <script language="JavaScript">      <!-- 

y

//--> </script> ... </head>