Kitabı oku: «Aprender Dreamweaver CS6 con 100 ejercicios prácticos», sayfa 4

LOS BLOQUES DE TEXTO de una página presentan el formato Párrafo y su correspondiente etiqueta, <p>, en el selector de la Barra de estado permite su selección directa. Este formato presenta un tamaño y un estilo de fuente predeterminados. Dreamweaver permite la definición de formatos relativos para los diferentes bloques de texto de una página: los encabezados. Un encabezado define una serie de parámetros, tamaño de letra y estilo, de un bloque de texto.

IMPORTANTE

Se pueden definir siete tipos de encabezados, siendo el Encabezado 1, el que aplica un tamaño de letra mayor a los textos. Cuando se aplica una etiqueta de encabezado a un párrafo, Dreamweaver añade automáticamente la siguiente línea de texto como un párrafo sencillo. Para cambiar esta configuración se debe acudir al cuadro de diálogo Preferencias, categoría General.

1 Para empezar, haga clic en el margen izquierdo de la página a la altura de la primera línea para seleccionarla entera y pulse en el icono Copiar de la barra de herramientas Estándar. Para seleccionar una línea de texto completa, haga clic en su margen izquierdo. Una vez seleccionada, cópiela en el Portapapeles y péguela en el otro documento abierto.

2 Seguidamente, active la página index.htm pulsando en su pestaña y, con el cursor de edición al final de la página, pulse en el icono Pegar de la barra de herramientas Estándar.

3 Dreamweaver permite aplicar opciones de formato a los diferentes párrafos de una página. Seleccione el primer término Casa Amiga, abra el menú Formato, pulse en la opción Formato de párrafo y elija Texto preformateado.

4 Los formatos de párrafo definen diversas características del texto, como el estilo y el tamaño de la fuente. Pero estos parámetros son relativos, ya que el texto visualizado en Dreamweaver no siempre se corresponde con el que muestra el navegador. El panel Insertar permite aplicar a un párrafo el formato de encabezado. Pulse la opción h1 de este panel.

5 El texto seleccionado queda definido como un encabezado de Estilo 1 y aparece en la Barra de estado la etiqueta correspondiente, h1. Este tipo de encabezado define al tiempo el aumento de tamaño y la aplicación del estilo negrita al texto. Para ver mejor el resultado, pulse al final de la palabra seleccionada.

6 Pulse la tecla Retorno y compruebe que el programa crea los nuevos párrafos sin aplicar el formato anterior, según lo establecido en sus preferencias.

7 Seguidamente cambiaremos simultáneamente el formato de los dos párrafos siguientes de la página. Pulse la tecla Suprimir para eliminar un salto de carro y seleccione las tres líneas de texto siguientes, hasta la palabra venta.

8 Para definir los párrafos seleccionados como encabezados, pulse esta vez la opción h2 del panel Insertar.

9 El encabezado 2 presenta un tamaño de letra menor al seleccionado para el primer párrafo, h1. Seleccione las dos primeras palabras de esta selección y pulse en el botón h3 del panel Insertar.

10 La etiqueta h3 del selector de la barra de estado nos permite seleccionar de modo directo todo el párrafo que presenta este formato de encabezado. Púlsela. La opción Ninguno permite desactivar todas las opciones de formato aplicadas a un párrafo.

11 El panel Propiedades también permite la aplicación de formatos de párrafo a los textos. Pulse el botón de flecha del campo Formato de este panel y elija la opción Encabezado 4. Los encabezados de mayor numeración aplican tamaños de letra menores, además del estilo negrita común a todo este tipo de párrafos.

12 Haga clic al final de la selección y pulse el comando Guardar de la barra de herramientas Estándar.

IMPORTANTE

Seleccionando la opción Texto con formato predeterminado en el panel Insertar aplicamos al texto la etiqueta <pre> y, por consiguiente, el tipo y tamaño de letra configurado en Dreamweaver como Fuente fija.

018	Cambiar las propiedades y el color del texto

DREAMWEAVER PRESENTA LOS TEXTOS por defecto con la fuente Times New Roman y en color negro, que viene definido en el cuadro Preferencias de la aplicación. El programa permite cambiar las combinaciones de fuente así como el tamaño, el estilo y el color de las fuentes.

IMPORTANTE

Los distintos estilos también pueden ser aplicados utilizando las distintas opciones que se encuentran dentro del comando Estilo del menú Formato.

1 Para empezar este ejercicio, despliegue el menú Edición, haga clic sobre el comando Preferencias y, en el cuadro del mismo nombre, active la categoría Fuentes. 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.

2 La parte superior de este cuadro queda reservada a la Configuración de fuentes, que permite especificar el conjunto de fuentes que se emplea en Dreamweaver para los documentos que utilizan un determinado tipo de codificación. Haga clic en el botón desplegable del campo Fuente proporcional, seleccione la fuente Courier New y pulse el botón Aceptar.

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.

5 A continuación haga clic en la categoría Apariencia (HTML), despliegue el campo 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.

10 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 en el campo Texto y acepte los cambios.

11 Ahora veremos cómo aplicar un estilo concreto a un texto seleccionado. Seleccione la primera línea de texto y pulse el botón Negrita del panel Propiedades, representado por una B.

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 y haga clic sobre la opción Crear región editable. Recuerde que también puede encontrar estas funciones en el submenu InContext Editing del menú Insertar.

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. En función de la selección realizada, las opciones que ofrece Dreamweaver pueden variar.

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 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 panel Propiedades para ver a qué características se refieren.

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. Los archivos de compatibilidad con InContext Editing que deben ser cargados en el servidor son ice.conf.js, ice.js e ice.html.

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. El comando Familia de fuentes del menú Modificar también representa una novedad en esta versión CS6 del programa.

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 EOT, localice la fuente en cuestión en el cuadro de diálogo Abrir y pulse el botón del mismo nombre.

5 La fuente pasa a formar parte del cuadro Añadir fuente Web. Marque la opción situada debajo de los campos de archivo para confirmar que está utilizando fuentes con licencia y pulse el botón Aceptar.Al añadir uno de los cuatro tipos de fuente, el resto de campos se completan con la misma fuente en el formato correspondiente.

6 Ahora la fuente elegida se refleja en el administrador de fuentes web. Pulse el botón Listo para finalizar el proceso.La fuente que hemos utilizado para esta práctica ha sido descargada desde el sitio www.fontsquirrel.com.

7 Nada aparente ha ocurrido; sin embargo la nueva fuente Web se ha añadido a la lista de fuentes disponibles. Para comprobarlo, pulse sobre el botón CSS del panel Propiedades y despliegue el campo Fuente.

Efectivamente, en un grupo independiente de fuentes se encuentra la fuente web.

021	Cambiar los márgenes y la alineación

DREAMWEAVER PERMITE ESTABLECER los márgenes izquierdo y superior de las páginas. Para ello se deben cumplimentar los campos oportunos de la categoría Apariencia HTML del cuadro Propiedades de la página. El programa también permite alinear los párrafos respecto a los márgenes de la página, presentando las cuatro opciones de alineación clásicas de los editores de texto. Se puede acceder a ellas a través de la ruta de menú Formato/Alinear o utilizar los botones mostrados a tal efecto en el Inspector de propiedades en el modo CSS.

1 Con la página texto.htm en primer plano, pulse el botón Propiedades de la página del panel Propiedades y acceda a la categoría Apariencia HTML.

2 Los márgenes de la página quedan establecidos en esta categoría, que presenta cuatro campos a tal efecto, aunque sólo puedan ser definidos dos tipos de márgenes. Pulse en el campo Margen izquierdo y teclee el valor 20.

3 Los valores de los márgenes se establecen en píxeles. En el campo Margen superior, teclee el valor 30 y pulse Aceptar.

4 Como la mayoría de los editores de texto, Dreamweaver admite cuatro opciones de alineación de párrafos. Abra el menú Formato y despliegue el comando Alinear.

5 En el submenú desplegado, seleccione el comando Derecha.

6 La alineación afecta a todo el párrafo de modo que queda correctamente alineado en el margen derecho de la página. A continuación, active la página index.htm.Por defecto los párrafos se encuentran alineados en el margen izquierdo de las páginas.

7 Estableceremos para este documento los mismos márgenes que en el caso anterior. En el panel de propiedades, pulse sobre el botón Propiedades de la página.

8 Active la categoría Apariencia HTML, pulse en el campo Margen izquierdo y teclee el valor 20.

9 Haga clic en el campo Margen superior, teclee el valor 30 y pulse el botón Aceptar.

10 Haga clic al inicio del primer párrafo, despliegue el menú Formato, pulse sobre la opción Alinear y elija Derecha.

11 Haga clic al inicio del segundo párrafo, pulse en el botón CSS del panel de propiedades y haga clic en el botón Justificar, el último de los botones de alineación del panel Propiedades. El justificado conlleva que el párrafo quede siempre bien alineado respecto a los márgenes izquierdo y derecho de la página.

12 Al realizar este cambio desde los estilos CSS, éste afecta a toda la página. Compruébelo nuevamente pulsando al inicio del cuarto párrafo y activando la opción Alinear al centro del panel de propiedades.

13 Para alinear a la izquierda únicamente el párrafo activo, abra el menú Formato, pulse en la opción Alinear y elija Izquierda.

14 Acabe el ejercicio guardando los cambios con el icono Guardar de la barra de herramientas Estándar.

IMPORTANTE

Para establecer márgenes que sean respetados por otros navegadores, se deben introducir en los campos Ancho de margen y Alto de margen. Para que no aparezcan márgenes en ninguno de los navegadores, asigne el valor 0 a los cuatro campos.