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

Yazı tipi:

015Introducir texto

IMPORTANTE

El panel Insertar se sitúa por defecto a la derecha del área de trabajo, pero puede arrastrarlo hasta colocarlo donde más le convenga, por ejemplo, dispuesto horizontalmente debajo de la Barra de menús.

EL TEXTO ES EL PRINCIPAL COMPONENTE de una página web y su inclusión no repercute prácticamente en el tiempo de descarga. En Dreamweaver, en principio, no pueden ser insertados dos espacios en blanco seguidos. Los textos de una página quedan divididos en párrafos que se crean al pulsar la tecla Retorno. Los navegadores Web insertan automáticamente una línea en blanco de espacio entre los párrafos. El programa permite añadir una única línea de espacio entre los párrafos mediante un salto de línea que se añade con la combinación Mayúsculas + Retorno.

1.Para realizar las prácticas de texto utilizaremos las páginas del sitio elemental, creado anteriormente. Empezaremos editando su página principal. En el panel Archivos, active ese sitio y haga doble clic en el archivo index.htm para abrirlo.

2.En los documentos carentes de contenido el cursor de edición queda situado en la primera línea de la página. Escriba la palabra casa y pulse la barra espaciadora de su teclado.

3.Pulse nuevamente la barra espaciadora para comprobar que no se pueden insertar dos espacios seguidos, complete la frase escribiendo el término en venta y pulse la tecla Retorno.

4.Se crea así un segundo párrafo en la página. En la Barra de estado, aparece la etiqueta identificativa de este elemento, <p>. Teclee la frase visite nuestro sitio.

Compruebe que, al añadir un párrafo, aparece en la Barra de estado su etiqueta identificativa, <p>.

Dreamweaver pasa a la siguiente línea cuando el texto alcanza el margen derecho de la página.

5.Entre los dos párrafos queda una línea en blanco, ya que los navegadores web la insertan automáticamente para espaciar los diferentes bloques de texto de una página. Pero el programa permite la inserción de los llamados saltos de línea. Abra el menú Insertar, pulse en la opción HTML, elija la opción Caracteres especiales y seleccione el comando Salto de línea.

El programa permite definir el comportamiento de los saltos de línea en el cuadro de diálogo Preferencias.

6.La nueva línea forma parte del mismo párrafo que la anterior. De este modo no queda una línea en blanco entre las dos escritas. Pulse la tecla Retroceso.

7.Para introducir un salto de línea mediante el teclado, pulse la combinación de teclas Mayúsculas+Retorno y, en la nueva línea, escriba la frase de ejemplo ver foto ampliada.

El comando Salto de línea permite introducir un salto de carro sin cambiar de párrafo.

8.La barra de herramientas Insertar permite la inserción distintos elementos. Abra el menú Ventana y haga clic en Insertar.

9.Esta barra presenta una ficha dedicada a los elementos de texto. Haga clic en el botón de punta de flecha superior donde está seleccionado Común y seleccione la opción Texto.

El último icono de la ficha Texto del panel Insertar incluye una lista de caracteres especiales que pueden insertarse en el documento.

10.Sus opciones permiten la inserción directa de etiquetas HTML relacionadas con el texto. Haga clic en el último botón de esta pestaña, que engloba todos los caracteres especiales, y seleccione el comando Salto de línea.

11.Para acabar almacenaremos los cambios efectuados. Resulta conveniente hacerlo frecuentemente para evitar pérdidas accidentales. Recuerde que si quiere conservar el documento en su estado original puede utilizar el comando Guardar como para crear una copia. Pulse el comando Guardar, cuyo icono muestra un disquete en la barra de herramientas Estándar.

016Copiar y pegar texto

IMPORTANTE

Copiando y pegando texto ahorramos tiempo en la edición de los documentos. Una vez seleccionado, el texto puede ser copiado mediante la combinación de teclas Control + C, el menú contextual de la selección o el menú de edición del programa.

LA COPIA Y PEGADO DE TEXTO resultan una alternativa a su introducción directa con el teclado. Entre los tipos de documentos que los profesionales reciben con contenido de texto para incorporarlos en las páginas Web, se incluyen los archivos de texto ASCII, los archivos en formato de texto enriquecido y los documentos de Office.

1.Para realizar este ejercicio, copie en su carpeta de documentos los archivos de texto presentación y descripción que encontrará en nuestra página de descargas. Minimice la ventana de Dreamweaver y abra la carpeta donde los ha almacenado.

2.Los archivos de ejemplo fueron creados con la aplicación WordPad, incluida en el sistema operativo Windows. Seleccione todo el texto del documento presentación utilizando la tecla Mayúsculas. Haga clic con el botón derecho sobre el texto seleccionado y pulse la opción Copiar. Una vez copiado el texto, haga clic en el botón de aspa de la Barra de título de la aplicación.

3.Pulse en el botón expandido de Dreamweaver situado en la Barra de tareas para restaurar el programa.

4.Pulse al inicio de la primera línea de texto, abra el menú Edición y seleccione el comando Pegar.

5.Para separar el texto pegado del precedente, pulse Retorno. Después, haga doble clic sobre la primera palabra para seleccionarla y pulse el icono Copiar de la Barra de herramientas Estándar.

6.Pulse al inicio de la línea y haga clic en el comando Pegar de la Barra de herramientas Estándar.

7.Para que la nueva palabra constituya un párrafo independiente, pulse la tecla Retorno.

8.Pulse el icono Guardar de la barra de herramientas Estándar.

9.En el panel Archivos, expanda la carpeta documentos pulsando en el signo + que precede a su nombre y haga doble clic en el documento texto.htm para abrirlo.

Recuerde que el icono Guardar todo, situado a la derecha del icono Guardar, permite almacenar los cambios en todos los documentos abiertos.

10.Pulse en el botón correspondiente a su carpeta de documentos situado en la Barra de tareas.

11.Abra el documento descripción, seleccione todo el texto que contiene y pulse la opción Copiar de su menú contextual Seguidamente, haga clic en el botón Cerrar de la Barra de título de la aplicación.

12.Cierre también la ventana de documentos haciendo clic en el botón de aspa de su Barra de título.

13.Abra de nuevo el menú Edición y elija la opción Pegar.

14.Dreamweaver no respeta el formato original del texto. El texto pegado presenta el mismo tipo de letra que el tecleado en el documento index.htm y el pegado posteriormente en él, procedente del archivo presentación. Para finalizar este ejercicio, guarde los cambios pulsando sobre el comando Guardar.

Para seleccionar un fragmento de un párrafo pulse ante la primera letra y arrastre hasta situar el puntero sobre la última. Y para seleccionar un párrafo completo, pulse en la etiqueta <p> del selector de etiquetas.

IMPORTANTE

Para seleccionar todo el contenido de la página puede pulsar la etiqueta body o ejecutar el comando Seleccionar todo, cuyo método abreviado es Ctrl+A.

017Cambiar el formato de párrafo

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.

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.

1.Para empezar, haga clic en el margen izquierdo de la página a la altura de la primera línea para seleccionarla entera.

2.Pulse en el icono Copiar de la barra de herramientas Estándar y active la página index.htm pulsando en su pestaña.

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.

3.Pulse en el icono Pegar de la barra de herramientas Estándar.

4.Haga doble clic sobre la primera palabra de la página.

5.Dreamweaver permite aplicar opciones de formato a los diferentes párrafos de una página. Abra el menú Formato, pulse en la opción Formato de párrafo y elija Texto preformateado.

El estilo aplicado al párrafo seleccionado se marca con un signo de verificación en este submenú.

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

A cada encabezado le corresponde una etiqueta HTML, que se identifica con la letra h y un número.

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

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

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

9.Seguidamente cambiaremos simultáneamente el formato de los dos párrafos siguientes de la página, pero antes, pulse la tecla Suprimir para eliminar un salto de carro.

10.Pulse tras la última letra de la palabra venta, en el tercer párrafo de la página, mientras mantiene pulsada la tecla Mayúsculas.

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

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.El encabezado 2 presenta un tamaño de letra menor al seleccionado para el primer párrafo, h1. Haga doble clic sobre la primera palabra de la selección y pulse en el botón h3 de la barra de herramientas Insertar.

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

14.El Inspector de propiedades también permite la aplicación de formatos de párrafo a los textos. Pulse el botón de flecha del campo Formato del inspector y elija el Encabezado 4.

La opción Ninguno permite desactivar todas las opciones de formato aplicadas a un párrafo.

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

018Modificar propiedades y color del texto

IMPORTANTE

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

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.

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.

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.

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 de este cuadro.

Los archivos de compatibilidad con InContext Editing que deben ser cargados en el servidor son ice.conf.js, ice.js e ide.html.

8.Se ha añadido la carpeta includes en el panel Archivos. 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.

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.

020Establecer márgenes y alineación

IMPORTANTE

Aunque en Dreamweaver CS5 es preferible aplicar formato a un texto mediante estilos CSS, todavía permite aplicárselo mediante etiquetas HTML. En el caso de la alineación, ésta se lleva a cabo desde el comando Alinear del menú Formato.

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

Dreamweaver permite establecer únicamente los márgenes izquierdo y superior de la página.

3.Los valores de los márgenes se establecen en píxeles. Haga clic 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 submenú Alinear.

Utilice la ruta de menú Formato/Alinear para cambiar la alineación de los párrafos de manera independiente.

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

Por defecto los párrafos se encuentran alineados en el margen izquierdo de las páginas.

6.La alineación afecta a todo el párrafo de modo que queda correctamente alineado en el margen derecho de la página. Pulse el icono Guardar de la barra de herramientas Estándar para almacenar los cambios y active la página index.htm.

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.

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.

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

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.