12 Para acabar con este ejercicio guarde los cambios realizados pulsando el icono Guardar de la barra de herramientas Estándar.
IMPORTANTE
Los navegadores utilizan la primera fuente de la combinación que se localice en el sistema. Si ésta no está instalada, el navegador pasa a utilizar la segunda, y así sucesivamente.
| 019 | Crear archivos de InContext Editing |
PARA PERMITIR A LOS USUARIOS FINALES realizar cambios sencillos en una página web sin tener que utilizar otro software o acudir al creador de la misma, Dreamweaver ofrece la función InContext Editing. Gracias a este servicio en línea, es posible limitar los cambios a páginas o regiones concretas y a opciones de formato personalizadas.
IMPORTANTE
Utilice la función Crear región repetida de InContext Editing para definir un área de su página con una estructura y unas propiedades concretas que el usuario puede repetir y en la que se puede añadir contenido directamente desde un navegador.
1 Las etiquetas HTML ice:editable identifican a las regiones editables de InContext Editing, que son las regiones que pueden ser modificadas por el usuario directamente en el navegador. En este ejercicio, vamos a añadir una región editable debajo de la primera línea de la página texto.htm. Haga clic al final de la primera frase de la página y pulse la tecla Retorno para crear un nuevo párrafo.
2 Las funciones de InContext Editing se encuentran tanto en la categoría con ese nombre del panel Insertar como en el menú Insertar. Despliegue la lista de categorías del mencionado panel, pulse sobre la opción InContext Editing
3 Mantenga seleccionada la opción Insertar nueva región editable en el punto de inserción actual en el cuadro Crear región editable y pulse el botón Aceptar.
4 Automáticamente Dreamweaver añade una etiqueta div (contenedor que incluye texto, imágenes, tablas, etc.) en el punto de inserción, como puede ver en la Barra de selección de etiquetas. Además, el panel Propiedades muestra las posibles opciones de edición de este tipo de región. Las opciones que mantenga seleccionadas podrán ser editadas por el usuario en un navegador. Imaginemos, por ejemplo, que sólo queremos que el usuario pueda modificar el color de fondo de la página. Pulse en el botón Desactivar todas
5 Pulse el icono Guardar de la Barra de herramientas para almacenar los cambios realizados en la página.
6 Al ser ésta la primera vez que guardamos un archivo que incluye la funcionalidad InContext Editing, Dreamweaver muestra el cuadro Copiar archivos independientes, que nos informa de que se están añadiendo archivos de compatibilidad que deberán ser cargados al servidor para que la edición sea posible en el navegador. Pulse el botón Aceptar de este cuadro.
7 Para que se añada la carpeta includes con los archivos generados, pulse la tecla F5 para actualizar este panel.
8 Cuando disponga de un servidor remoto configurado para publicar su página deberá utilizar la opción Colocar del menú contextual de esta carpeta para añadir los archivos de InContext Editing y poder así editar la página directamente en el navegador. Para eliminar todo el código asociado a la región editable pulse el botón Quitar región del panel Propiedades.
9 El cuadro de confirmación nos informa de que se eliminará la región editable pero su contenido se mantendrá. Pulse el botón Aceptar y guarde los cambios pulsando el icono Guardar.
| 020 | Importar y utilizar fuentes Web |
OTRA DE LAS NOVEDADES QUE PRESENTA Dreamweaver CS6 es la posibilidad de utilizar en sus páginas y sitios web fuentes creativas compatibles con Internet. El programa cuenta con un administrador de fuentes exclusivo para estos tipos de letra desde el cual se lleva a cabo la importación de la fuente en cuestión al sitio web creado en Dreamweaver. Algunas de las fuentes consideradas web compatibles con Dreamweaver son las fuentes web de Google o las denominadas Typekit.
IMPORTANTE
Si accede al cuadro de configuración de su sitio web, por ejemplo, desde el panel Archivos, podrá cambiar la carpeta predeterminada en la cual se almacenan las fuentes adicionales de este sitio. Para ello, deberá acceder a la categoría Fuentes Web del mencionado cuadro.
1 En este ejercicio le mostraremos cómo importar a Dreamweaver fuentes web para poder utilizarlas en alguna de nuestras páginas. Empiece situando en primer plano la página index.htm.
2 A continuación, debemos acceder al nuevo Administrador de fuentes Web, por lo que despliegue el menú Modificar y haga clic sobre el nuevo comando Fuentes Web.
3 Se abre el cuadro de diálogo Administrador de fuentes Web, el cual por el momento se encuentra vacío. Para agregar nuevas fuentes, haga clic sobre el botón Añadir fuentes.
4 Este botón da paso al cuadro Añadir fuente Web, desde el cual debe seleccionar la fuente que desea utilizar. Existen en Internet miles y miles de sitios proveedores de fuentes, unos gratuitos (como Google) y otros de pago (Typekit). En cualquier caso, es preciso contar con su carpeta de fuentes descargadas almacenada en su equipo para continuar con el paso siguiente. Para llevar a cabo esta práctica puede utilizar, si lo desea, la fuente que encontrará en la carpeta fuentes web de los archivos necesarios del libro. En el cuadro de diálogo Añadir fuente Web, pulse sobre el icono de carpeta del campo Fuente