|
El contenido es el rey de una página Web. La introducción, edición
y aplicación de formatos de texto es una de las partes que mayor tiempo
requieren en la creación de una página. Esta lección
explica los fundamentos de la introducción de texto. Aunque Dreamweaver MX incorpora mejores herramientas de texto que sus anteriores versiones, no
llega al nivel de posibilidades de un procesador de textos. Si conoces
el manejo de algún procesador de textos, posiblemente algunos de estos procedimientos
ya los sepas.
Es importante familiarizarnos con las etiquetas que determinan
el estilo del objeto de texto. Al ser la piedra angular del contenido se van
a repetir, no solo en la vista de código sino también en el Selector
de etiquetas, nada más que empecemos a escribir en la ventana de documento.
| Estilo |
Etiqueta HTML |
Descripción |
| Párrafo |
<p> ... </p> |
El texto incluido entre las dos
etiquetas conforma un Párrafo, con una línea en blanco por encima y por
debajo. |
| Salto de Línea |
<br> |
Cambia de línea sin introducir
un Párrafo. |
| Tabulación |
<blockquote> ... </blockquote> |
Presenta párrafos tabulados. |
| Negrita |
<b> ... </b> |
Texto representado en negrita. |
| Destacado |
<strong> ... </strong> |
Texto resaltado, representado como negrita. |
| Cursiva |
<i> ... </i> |
Texto representado en cursiva. |
| Lista ordenada |
<ol> ... </ol> |
Numeración (ordered list) Cada
elemento de la lista estará encabezado por la etiqueta <li>
que puede o no llevar la etiqueta de cierre </li>. |
| Lista desordenada |
<ul> ... </ul> |
Viñetas (unordered list) Cada
elemento de la lista, también estará encabezado por la etiqueta
<li>. |
Línea de separación |
<hr> |
Línea horizontal que separa párrafos. |
Se utilizan para generar títulos con una determinada jerarquía, el de mayor
nivel es H1, mientras que el de menor nivel es H6.
| Estilo de Párrafo |
Descripción |
<h1>...</h1> |
Tamaño
del encabezado |
<h2>...</h2> |
Tamaño
del encabezado |
<h3>...</h3> |
Tamaño
del encabezado |
La etiqueta <font> determina el estilo de las letras del texto. Cada
una de sus características la delimitan los atributos de esta etiqueta.
| Atributo |
Descripción |
<font face="...">...</font> |
Fuente de la letra |
<font color="...">...</font> |
Color de la letra |
<font size="...">...</font> |
Tamaño de la letra |
No sólo modifican etiquetas de texto, como veremos pueden encontrarse dentro
de cualquier etiqueta (de texto, de imagen, de tablas, ...). Determinan la
alineación
de ese objeto con respecto a la página o a lo que le rodea.
| Align= |
"center" |
"right" |
"left" |
"justify" |
|
Explicación
de la referencia HTML |
En Dreamweaver el texto se introduce como en un procesador de texto normal,
escribiendo directamente en la ventana de documento en la vista de diseño.
- Introducir Párrafo: la entidad fundamental de texto, se
consigue pulsando la tecla ENTER para finalizar el mismo.
- Introducir Salto de Línea: romper una línea perteneciente
a un párrafo, pulsamos MAY+ENTER en el punto de ruptura.
- Introducir Caracteres raros: Caracteres que no se
encuentran en el teclado o que requieren código HTML especial. Para todo esto
Dreamweaver incluye la solapa Caracteres dentro del
panel Insertar. Por ejemplo, HTML solo permite un espacio entre
caracteres. Para introducir más tenemos que insertar espacios indivisibles
pulsando el segundo icono de la izquierda de esta solapa.
Dentro de una página Web nos será necesario situar el cursor en
una posición determinada para introducir un carácter o hacer una corrección.
Esta operación se puede realizar de múltiples formas, se describen a
continuación las más importantes.
Con el ratón:
Basta con situar el puntero del ratón en la posición adecuada y hacer un
clic, el cursor se situará en esa posición. Si se quieren realizar
desplazamientos más largos primero se visualiza la zona empleando las barras de
desplazamiento vertical u horizontal.
Con el teclado:
| Movimiento |
Tecla |
| Carácter Anterior |
 (Izquierda) |
| Carácter Siguiente |
(Derecha) |
| Línea anterior |
 (Arriba) |
| Línea Siguiente |
 (Abajo) |
| Palabra Anterior |
CONTROL + |
| Palabra Siguiente |
CONTROL +
|
| Inicio de Línea |
INICIO |
|
| Movimiento |
Tecla |
| Fin de Línea |
FIN |
| Inicio de Párrafo |
CONTROL +
|
| Fin de Párrafo |
CONTROL +
|
| Pantalla anterior |
RE PAG |
| Pantalla Siguiente |
AV PAG |
| Inicio del documento |
CONTROL + INICIO |
| Fin del documento |
CONTROL + FIN |
|
| ¡OJO! No se pueden emplear las teclas de desplazamiento en un
documento en el cual no haya párrafos escritos, si al pulsar las teclas de
desplazamiento arriba y abajo el cursor no se mueve, habrá que "abrir
camino" introduciendo retornos manuales de párrafo (INTRO).
|
|
|
Movimiento en la ventana de Dreamweaver. |
Para actuar sobre un texto ya escrito, será necesario seleccionarlo
previamente, al seleccionar una porción de texto ésta queda en vídeo inverso
(negro). No se pueden hacer selecciones discontinuas de texto. Los
procedimientos más usuales para seleccionar texto, son los siguiente:
Arrastre
Se sitúa el cursor al inicio del bloque de texto y realizamos un arrastre
con el botón izquierdo del ratón, observamos como el bloque de texto queda
resaltado el vídeo inverso. Para eliminar la selección basta con picar con el
ratón en cualquier parte del texto.
| ¡ATENCIÓN! Si un bloque de texto está seleccionado y se pulsa
cualquier tecla, ésta sustituye a toda la selección, si la tecla pulsada es
el espacio, se sustituye el bloque de texto por un espacio, dando el aspecto
de haber perdido todo lo seleccionado. |
MAY + POSICIÓN
Para seleccionar un bloque de texto situamos el cursor en el inicio del
bloque (hacemos clic con el ratón), pulsamos y mantenemos pulsada la tecla
MAY, situamos el cursor con el ratón y pulsamos en el final del
bloque de texto que se quiere seleccionar.
MAY + MOVIMIENTO
Situamos el cursor en el inicio del bloque a seleccionar, pulsamos y
mantenemos la tecla MAY, movemos el cursor con cualquiera de
los métodos descritos en el apartado de "Movimiento del del Cursor".
SELECCIÓN PICANDO
- Una palabra: Doble clic sobre la palabra
- Una línea: Clic en la parte izquierda de la línea, el
cursor cambia a flecha.
- Un párrafo: Triple clic en la parte izquierda del
párrafo.
|
|
Selección de Texto |
El portapapeles es un espacio destinado a almacenar temporalmente bloques de
texto o gráficos. El contenido del portapapeles es único, si se almacena en el
portapapeles un bloque de texto, éste sustituye a lo que estuviese almacenado en
el portapapeles hasta el momento. El uso del portapapeles permite copiar
y mover selecciones en un documento de Dreamweaver, en documentos
distintos de Dreamweaver o en documentos distintos de diferentes aplicaciones,
esto se consigue gracias a que el contenido del portapapeles no desaparece
cuando se cierra la aplicación actual. Las herramientas del Portapapeles se
sitúan en la barra de herramientas Estándar.
 Copiar. Edición/Copiar.
Almacena en el portapapeles la selección actual. Si no hay nada seleccionado el
botón está desactivado. Tecla rápida CONTROL + C
 Cortar. Edición/Cortar.
Almacena en el portapapeles la selección actual, borra del documento la
selección. Al cortar se mueve la selección actual al portapapeles,
desapareciendo del documento. Tecla rápida CONTROL + X
 Pegar. Edición/Pegar.
Pone en el documento actual, en donde esté situado el cursor, el contenido
actual del portapapeles. Tecla rápida CONTROL + V
| Nota: Curiosamente el portapapeles no funciona con imágenes
copiadas de otras aplicaciones. |
El procedimiento para mover o copiar un bloque seleccionado sin tener que
utilizar las opciones de COPIAR, CORTAR y PEGAR. es:
- Seleccionamos el bloque de texto.
- Hacemos clic sobre el texto seleccionado y lo arrastramos, sin soltar el
botón del ratón, hasta la nueva posición.
- Si se quiere mover el texto soltar el botón del ratón cuando el cursor se
encuentre en la posición adecuada. Si se quiere copiar el texto mantener
pulsada la tecla Ctrl mientras se realiza el arrastre.
|
|
Utilización del Portapapeles |
BUSCAR Y REEMPLAZAR
Este comando nos ayudará a ahorrar tiempo y trabajo: Edición>Buscar
y reemplazar.
La ventana que nos aparece nos ofrece un menú bastante intuitivo, donde
destacan los campos donde incluimos el texto a buscar y aquel por el que
queremos sustituirlo. Pero esto es solo la punta del iceberg a la hora de
hablar de las posibilidades de este comando y la precisión con que se puede
utilizar.
Buscar en: Permite buscar en la página actual, en un
conjunto de páginas seleccionadas desde la solapa de Sitio, en una carpeta o
en todo el sitio Web. Los resultados de la búsqueda se presentarán en la
solapa Búsqueda del panel de Resultados en
el caso de que la opción elegida no sea Documento actual.
Buscar: Podemos buscar en el código fuente o en el texto
(vista diseño). De una manera mas avanzada podemos buscar una determinada
etiqueta o un modificador de una determinada etiqueta.
Remplazar con: si queremos reemplazar lo buscado por algo
debemos indicar el texto en este cuadro de texto.
Podemos configurar las opciones de búsqueda:
- Coincidir mayúsculas y minúsculas.
- Omitir diferencias de espacios en blanco.
- Emplear expresiones regulares, las expresiones regulares son comodines
que permiten encontrar distintos patrones de texto.
Una vez configurado el cuadro de diálogo tenemos la posibilidad de buscar o
remplazar, uno por uno o todos a la vez.
|
|
Utilización de Buscar y reemplazar |
DESHACER Y REHACER
El comando Deshacer debe de ser uno de los mejores inventos del siglo
veinte. Que nos equivocamos, ¡Deshacer! Que cambiamos de idea ¡Rehacer!. El
comando Deshacer deshace la última acción realizada. El
comando Rehacer lo contrario. Retrocede tantos pasos como le
permita la memoria de su equipo.
- Deshacer (Control + Z): seleccionamos
Edición>Deshacer o botón
de la barra de herramienta Estándar.
- Rehacer (Control + Y): seleccionamos
Edición/Rehacer botón
 de
la barra de herramienta Estándar.
El historial permite retroceder hasta un punto en particular, esta
herramienta se estudia en profundidad en la lección de Productividad.
COMPROBACIÓN ORTOGRÁFICA
Para poder poner en marcha esta utilidad debemos seleccionar
Texto>Ortografía. Esto hará aparecer un cuadro de dialogo como este:
Una vez hayamos abierto el cuadro de dialogo, Dreamweaver comenzará a
buscar fallos que pueda haber en el texto. Situamos por lo general el cursor
al principio de la página Web antes de ejecutar el corrector, ya que sino
puede que no compruebe todo el texto. Dreamweaver nos preguntará de todos
modos, al llegar al final del texto si deseamos continuar la comprobación
desde el principio. A continuación describimos cada una de las acciones que se
pueden tomar desde este cuadro de diálogo.
- Agregar a personal: Incluye la palabra seleccionada a
nuestro diccionario personal e impide que Dreamweaver la etiquete como
palabra errónea.
- Omitir: Indica al programa que ignore la palabra
seleccionada y continúe la búsqueda.
- Omitir todas: Omitirá todas las repeticiones de la
palabra seleccionada en el documento entero.
- Cambiar: Si encontramos la palabra correcta en la lista
de sugerencias y deseásemos cambiar la errónea por ésta, la seleccionamos y
presionamos este botón. Si no encontrásemos ninguna podemos escribir la
correcta en el cuadro de texto Cambiar por.
- Cambiar todas: Todas las repeticiones de la palabra en
cuestión encontradas en el documento serán reemplazadas por la palabra
seleccionada en el cuadro Sugerencias.
El programa comprueba el texto usando dos diccionarios diferentes: uno
Estándar. para el idioma seleccionado y otro personalizado. Para seleccionar
el idioma seguimos estos pasos:
- Seleccionamos la opción Edición>Preferencias de página.
- En el cuadro de diálogo que se presenta hacemos clic sobre la categoría
General.
- Desplegamos la lista Diccionario Ortográfico y
seleccionamos la opción adecuada.
|
|
Utilización de la Comprobación Ortográfica |
|
