Curso de Dreamweaver CS3

Cursos Relacionados:

HTML: Etiquetas de Texto

Ya hemos dicho que en DW, o sea, en HTML, no hay tantas opciones de modificar un texto como en un procesador de texto estándar.
No tenemos interlineado, letras capitales, ínter letrado, sangría de la primera línea, etc.
Es todo más simple. Como decía mi abuelo ¡ Son habas contadas !


Inscríbete ahora y accede a 3 unidades gratis

Evalua el curso de Dreamweaver CS3 y accede a las 3 unidades gratis con acceso completo al aula virtual donde podrás disfrutar de la inestimable ayuda del tutor y una gran variedad de recursos como videotutoriales, ejercicios resueltos, foros, enlaces, bibliografía, etc....


Etiquetas importantes

Las etiquetas más importantes son aquellas que determinan la estructura del texto, es decir, las que los dividen en PAQUETES y determinan la importancia de esos paquetes (lo veremos en detalle mas adelante).

HTML Traducción:
<p> ... </p> Párrafo: El texto incluido entre las dos etiquetas conforma un Párrafo, con una línea en blanco por debajo.
</br> Salto de línea (break row): Salta a la siguiente línea

<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
...

Encabezados (heading):
Determina titulares con una determinada jerarquía.
Va del más grande <h1> ... hasta el mínimo <h6>.

Por otro lado están ciertas etiquetas clásicas respecto a las propiedades que puede tener el texto.

HTML Traducción:
<b> ... </b> Negrita (bold): Ejemplo
<strong> ... </strong>
<i> ... </i> Cursiva (italic o emphasis): Ejemplo
<em> ... </em>
<ol> ... </ol>

Lista Ordenada ( Order List ) : Numeración

  1. Elemento
  2. Elemento
  3. Elemento
<ul> ... </ul>

Lista Desordenada ( Unorder List ) : Viñetas

  • Elemento
  • Elemento
  • Elemento

Inscríbete ahora y accede a 3 unidades gratis

Evalua el curso de Dreamweaver CS3 y accede a las 3 unidades gratis con acceso completo al aula virtual donde podrás disfrutar de la inestimable ayuda del tutor y una gran variedad de recursos como videotutoriales, ejercicios resueltos, foros, enlaces, bibliografía, etc....


Etiquetas en desuso

Como dijimos en la Lección nº1 el HTML ha evolucionado y lo que anteriormente se tenía que hacer a través de etiquetas de HTML ahora podemos conseguirlo fácilmente con Estilos CSS que supone otro tipo de programación).
Esto ha provocado que ciertas etiquetas clásicas del HTML estén en desuso... aunque todavía sean funcionales.

HTML Traducción:
<blockquote> ... </blockquote> Sangría (blockquote = bloque de cita):
inserta un margen a izquierda y derecha del texto que este en esta etiqueta. No podemos determinar la dimensión de ese margen
<hr> Línea Horizontal (Horizontal Row): Línea horizontal de separación entre párrafos.
<font> ... </font>

Fuente: determinas propiedades de formato del texto que encierra a través de sus atributos:

  • < font face=".."    tipografía
  • < font size=".."    tamaño
  • < font color=".."    color

Esta etiqueta FONT esta especialmente denigrada en el XHTML (la ultima evolución del html) ya que es el claro ejemplo de cómo para dar un simple formato a un texto se tenía que usar una conjunción de etiquetas y atributos que hacían más complejo el código.
Con el BOOM de los Estilos CSS la etiqueta Font ha pasado al olvido.


Inscríbete ahora y accede a 3 unidades gratis

Evalua el curso de Dreamweaver CS3 y accede a las 3 unidades gratis con acceso completo al aula virtual donde podrás disfrutar de la inestimable ayuda del tutor y una gran variedad de recursos como videotutoriales, ejercicios resueltos, foros, enlaces, bibliografía, etc....


Los Atributos

Los atributos son complementos de las etiquetas HTML para modificar sus propiedades.
En este caso veremos el atributo align="..." que determina la alineación.
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.

HTML Traducción:
<p aling="center">...
Alineación al centro
<p aling="right">...
Alineación derecha
<p aling="left">...

Alineación izquierda

<p aling="justify">...
Alineación justificada (procurando abarcar el ancho total de la línea

Inscríbete ahora y accede a 3 unidades gratis

Evalua el curso de Dreamweaver CS3 y accede a las 3 unidades gratis con acceso completo al aula virtual donde podrás disfrutar de la inestimable ayuda del tutor y una gran variedad de recursos como videotutoriales, ejercicios resueltos, foros, enlaces, bibliografía, etc....


Introducir texto


Inscríbete ahora y accede a 3 unidades gratis

Evalua el curso de Dreamweaver CS3 y accede a las 3 unidades gratis con acceso completo al aula virtual donde podrás disfrutar de la inestimable ayuda del tutor y una gran variedad de recursos como videotutoriales, ejercicios resueltos, foros, enlaces, bibliografía, etc....


Lo Diferente

En DW el texto se introduce como en un procesador de texto normal, escribiendo directamente en la ventana de documento en la vista de diseño.
Pero tiene ciertas peculiaridades de uso respecto a un procesador de texto normal

INTRO = PÁRRAFO
Cada vez que pulsamos la tecla intro ,introducimos un salto de párrafo, es decir, finalizamos un párrafo y comenzamos otro ,lo que supone una línea de espacio vacía entre un párrafo y otro.
 

MAYÚSCULAS + INTRO = SALTO DE LÍNEA
Si lo que queremos es pasar a la siguiente línea para seguir escribiendo deberemos introducir un Salto de línea </br>

espacio entre caracteres
En código HTML no se lee más de un espacio en blanco entre caracteres.
Es decir, que si pulsamos la barra espaciadora continuamente sólo conseguiremos UN espacio en blanco.

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 Texto dentro del panel Insertar.


El último icono de esta solapa despliega un menú de caracteres raros a insertar.



Inscríbete ahora y accede a 3 unidades gratis

Evalua el curso de Dreamweaver CS3 y accede a las 3 unidades gratis con acceso completo al aula virtual donde podrás disfrutar de la inestimable ayuda del tutor y una gran variedad de recursos como videotutoriales, ejercicios resueltos, foros, enlaces, bibliografía, etc....


Mover el cursor

Tanto para introducir texto como cualquier otro objeto a lo largo de la página Web se hará allí donde esté colocado el cursor.
Así que, es importante saber situar y mover ese cursor a lo largo de todo el texto.

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. Sí 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).


Inscríbete ahora y accede a 3 unidades gratis

Evalua el curso de Dreamweaver CS3 y accede a las 3 unidades gratis con acceso completo al aula virtual donde podrás disfrutar de la inestimable ayuda del tutor y una gran variedad de recursos como videotutoriales, ejercicios resueltos, foros, enlaces, bibliografía, etc....


Seleccionar texto

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 siguientes:

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 cómo el bloque de texto queda resaltado en vídeo inverso. Para eliminar la selección basta con picar con el ratón en cualquier parte del texto.

¡OJO!


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

Inscríbete ahora y accede a 3 unidades gratis

Evalua el curso de Dreamweaver CS3 y accede a las 3 unidades gratis con acceso completo al aula virtual donde podrás disfrutar de la inestimable ayuda del tutor y una gran variedad de recursos como videotutoriales, ejercicios resueltos, foros, enlaces, bibliografía, etc....


Copiar y pegar: Portapapeles

El portapapeles es un espacio destinado a almacenar temporalmente bloques de texto o gráficos. El contenido del portapapeles es único. Sí 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 DW, en documentos distintos de DW 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.

  COMANDO RÁPIDO Traducción:
CONTROL + C Copiar. Edición/Copiar. Almacena en el portapapeles la selección actual. Si no hay nada seleccionado el botón está desactivado.
CONTROL + X 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.
¡Cuidado! al cortar se elimina lo cortado. .
CONTROL + V

Pegar. Edición/Pegar. Pone en el documento actual, en donde esté situado el cursor, el contenido actual del portapapeles.

 


Inscríbete ahora y accede a 3 unidades gratis

Evalua el curso de Dreamweaver CS3 y accede a las 3 unidades gratis con acceso completo al aula virtual donde podrás disfrutar de la inestimable ayuda del tutor y una gran variedad de recursos como videotutoriales, ejercicios resueltos, foros, enlaces, bibliografía, etc....


Mover y copiar sin el portapapeles

Sin usar las opciones COPIAR, CORTAR y PEGAR podemos...

Moverlo:

  1. Seleccionamos el bloque de texto.
  2. Hacemos clic sobre el texto seleccionado y lo arrastramos, sin soltar el botón del ratón, hasta la nueva posición.

Duplicarlo

  1. Seleccionamos el bloque de texto.
  2. Mantener pulsada la tecla CONTROL mientras se realiza el arrastre a la nueva posición del texto duplicado

 

Texto de prueba : Lorem ipsum

Es el texto que se usa habitualmente en diseño Web en borradores de diseño para probar el aspecto visual antes de insertar el texto final.
Puedes usarlo a lo largo de la lección Cópialo desde esta dirección:
http://www.lipsum.com/feed/html
El significado del texto no tiene importancia debido a que si un texto es legible los usuarios suelen centrarse en lo que dice el texto y no en el diseño, que es el objetivo en este caso.

 


Inscríbete ahora y accede a 3 unidades gratis

Evalua el curso de Dreamweaver CS3 y accede a las 3 unidades gratis con acceso completo al aula virtual donde podrás disfrutar de la inestimable ayuda del tutor y una gran variedad de recursos como videotutoriales, ejercicios resueltos, foros, enlaces, bibliografía, etc....


Si desea obtener un acceso sin restricciones a los contenidos del curso de Dreamweaver CS3 y disfrutar de todas las herramientas del aula virtual (Videos explicativos streaming, acceso a los foros, chat, ejercicios resueltos, la ayuda del tutor, audioconferencia, estudio de grabación, test y actividades de autoevaluación, etc...) puede inscribirse completamente gratis y comenzar a realizar de forma inmediata el curso.