Aprender Dreamweaver CS5 con 100 ejercicios prácticos. MEDIAactive

Fuente proporcional, seleccione la fuente Courier New y pulse el botón Aceptar.

      Si un usuario carece en su sistema de la fuente empleada en las páginas, el navegador la sustituirá por otra, lo que puede hacer variar visiblemente el aspecto de las páginas.

      3.También puede cambiar las fuentes desde el cuadro Propiedades de la página. Pulse ese botón del inspector de propiedades.

      4.Pulse en el botón de flecha del campo Fuente de página, seleccione la opción Arial, Helvética, sans-serif.

      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.

      5.A continuación haga clic en la opción Apariencia (HTML) del panel lateral, pulse el botón de punta de flecha del campo color de texto y del panel que se despliega seleccione una muestra.

      6.Pulse el botón Aceptar para aplicar la fuente y el color.

      7.Se aplica la primera de las fuentes de la lista seleccionada. Guarde los cambios de la página index.thm y ponga en primer plano la página texto.htm pulsando en su pestaña.

      8.Acceda de nuevo al cuadro Propiedades de la página, haga clic en el botón de punta de flecha del campo Tamaño y seleccione, por ejemplo, el valor 14.

      9.A continuación seleccione la categoría Apariencia (HTML) en el panel lateral izquierdo del cuadro y haga clic en el espacio en blanco del Color de texto. En HTML, los colores se expresan en forma de valores hexacesimales. El programa permite la definición directa de un tono mediante estos valores. Inserte el valor #0000FF.

      Todos los colores de las paletas Cubos de color y Tono continuo son seguros para la Web.

      10.Ahora veremos cómo aplicar diferentes estilos a un texto seleccionado. Seleccione la primera línea de texto y pulse el botón Negrita del Inspector de propiedades.

      11.Para acabar con este ejercicio guarde los cambios realizados pulsando el icono Guardar de la barra de herramientas Estándar.

      IMPORTANTE

      En Dreamweaver CS4 los cambios de combinaciones de fuentes y de colores de fuentes deben realizarse definiendo reglas para los estilos CSS, con los que trabajaremos más adelante.

      019Crear archivos de InContext Editing

      IMPORTANTE

      Para editar una página web desde su navegador con el servicio InContext Editing deberá disponer de un identificador de Adobe. Al pulsar la combinación de teclas Ctrl.+E y, una vez introducido su identificador y su contraseña, podrá editar la región elegida utilizando los botones de la barra de edición.

      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 CS5 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.

      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 etiqueta con ese nombre del panel Insertar como en el menú Insertar. Active la ficha InContext Editing.

      3.Pulse sobre la opción Crear región editable.

      Recuerde que también puede encontrar estas funciones en el submenú InContext Editing del menú Insertar.

      4.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.

      En función de la selección realizada, las opciones que ofrece Dreamweaver pueden variar.

      5.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 Inspector de 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 del panel Propiedades y, a continuación haga clic en la casilla de verificación de la opción Color de fondo, décimo icono del panel.

      Pase el puntero del ratón por las diferentes opciones del Inspector de propiedades para ver a qué características se refieren.

      6.Pulse el icono Guardar de la Barra de herramientas para almacenar los cambios realizados en la página.

      7.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