¿Cómo insertar texto con Dreamweaver MX 2004?

Para insertar texto con Dreamweaver podemos hacerlo escribiendo directamente sobre la página. Para darle formato tenemos abajo el inspector de propiedades.
En el apartado Formato tenemos los encabezados (que se suelen mostrar en tamaños de fuente más grandes o más llamativos que el resto del cuerpo). Hay 6 niveles de encabezado (el 1 es el más grande y el 6 el más pequeño). Los encabezados se utilizan para dividir el contenido en apartados o llamar la atención en determinadas partes de la página. Cuando aplicamos un formato se aplica a todo el texto como un bloque.
Si quiere establecer el formato de un bloque de texto a un párrafo, puede seleccionar Párrafo del menú Formato en el inspector de Propiedades o usar Control-Mayús-P (Windows) o usar Comando-Mayús-P (Mac).
Cada vez que escribimos y pulsamos la tecla Intro hacemos párrafos nuevos. En codigo fuente el texto estará entre < p > y .
Un < p > generaría el equivalente a dos saltos. En cambio, un < br > genera un salto de linea. Si lo queremos hacer en Dreamweaver tenemos que pulsar Mayús + Intro.
Los Estilos se refieren a hojas de estilo en cascada (CSS) que definen el aspecto y la ubicación de los elementos en su página. Dreamweaver va generando estilos a medida que vamos dando formato al texto: tipo de letra, tamaño, negrita, color, etc.
Los estilos que va generando Dreamweaver tambien los nombra por defecto: Estilo1, Estilo2, etc. Eso se puede cambiar, lo veremos más adelante.

Propiedades del documento

Seguimos con el curso gratuito de Dreamweaver MX 2004...
Cuando creamos un documento nuevo tenemos que configurar las características que lo definen (configurar sus atributos). Para ello, en la barra de menú seleccionamos Modificar, Propiedades de la página. Desde aquí podemos modificar las características de nuestra página: Aspecto, Vínculos, Encabezados, Título e Imagen de rastreo.

Aspecto: aquí podemos definir la fuente, el tamaño y el color del texto que tendrá nuestro archivo. También el color de fondo del documento e incluso añadir una imagen de fondo. El apartado de los márgenes hace referencia a la distancia hasta los bordes superior e inferior de la ventana del navegador.
En Vínculos, definimos el color de los enlaces y cómo queremos que aparezca nuestro enlace (siempre subrayar, nunca subrayar, etc.).
En Encabezados se define el tamaño y el color de la fuente para seis tipos de encabezados distintos.
En Título podemos poner el título al archivo. Aparecerá arriba del todo en el navegador. Es una de las informaciones útiles para los motores de búsqueda que indexan las páginas web.
La codificación se refiere a los caracteres del documento (alfabeto utilizado). Para el español y otors idiomas de Europa Occidental hay que seleccionar Europeo Occidental.
Y, finalmente, el apartado de Imagen de rastreo se utiliza para disponer de una imagen de fondo a la que podemos dar distintos grados de transparencia. Esta imagen no se verá en el navegador. Es como una imagen que se usa para calcar o realizar la maquetación encima de ella. Sirve como ayuda visual.

Vincular páginas con Dreamweaver MX 2004

Es importante cuando creamos enlaces (o vínculos) conocer la ruta entre el documento de origen y el de destino. Las rutas más habituales son: las rutas absolutas y las rutas relativas.
Rutas absolutas: indican el URL completo del documento vinculado (o de la página vinculada). Ejemplo: si queremos poner un enlace a la sección de publicidad de Google España desde nuestra página tendremos que escribir la dirección completa http://www.google.es/ads/.
Rutas relativas: suelen hacer referencia a nuestro sitio web. Ejemplo: si tenemos tres apartados (inicio, quiénes somos, contacto) en nuestra web, con los nombres de archivo siguientes: index.html, quienes_somos.html y contacto.html, y queremos hacer un enlace desde una de ellas a otra (por ejemplo enlazar INICIO con CONTACTO, tenemos que escribir sólo el nombre del archivo. No es necesario (como ocurre en la absoluta) escribir TODA la dirección completa, (en este caso escribiríamos contacto.html).
Cómo hacer los enlaces con Dreamweaver MX 2004
Desde el panel propiedades, tenemos que ir al apartado Vínculo. Si conocemos la dirección la escribimos (ruta absoluta). Si es un archivo nuestro, podemos buscarlo haciendo clic en el icono de la carpeta.
Otra forma es en la Barra insertar|común, seleccionamos el icono de la cadena (hipervínculo) y escribimos en Texto la palabra o frase que llevará el enlace y en Vínculo escribimos la dirección.
Si queremos hacer un vínculo a un correo electrónico lo podemos hacer también desde la Barra insertar | común en el icono siguiente (el sobre) o desde propiedades escribiendo mailto: y la dirección de correo electrónico que queremos enlazar. Ejemplo: mailto:[email protected]

Definir un sitio con Dreamweaver MX 2004

Cuando tenemos un proyecto web es necesario definir primero la ubicación de los elementos que lo componen: imágenes, animaciones, archivos, etc.
Habría que crear una carpeta (en Mis Documentos, por ejemplo) con el nombre del sitio: miweb, por ejemplo. Dentro de esa carpeta creamos una carpeta para las imágenes (imagenes). Utilizad sólo imágenes tipo .gif, .jpg o .png. Y recordad que al poner el nombre a las carpetas no debemos dejar espacios y tampoco poner acentos.
Una vez creadas estas 2 carpetas ya podéis abrir Dreamweaver. En la barra de menú vais al apartado sitio. Una vez allí abrid Administrar sitios y hacer click en Nuevo Sitio. Hay 2 opciones: Básicas y Avanzadas. Es casi preferible ir directamente a Avanzadas. En la categoría Datos locales rellenamos todos los datos. De momento, sólo hay que rellenar los tres primeros: Nombre del sitio, Carpeta raíz local (la que hemos creado con el nombre de miweb) y Carpeta predeterminada de imágenes (nuestra carpeta imagenes). Es muy importante abrirlas y seleccionarlas. Una vez finalizado, le decimos listo y ya tenemos definido nuestro sitio web que aparecerá en el panel Archivos / Vista local abajo a la derecha en Dreamweaver.

Empezamos con Dreamweaver

Primero es importante conocer un poco el entorno de trabajo de Dreamweaver, este entorno lo conforman una serie de barras de herramientas, ventanas, paneles y otros elementos que nos permiten interactuar con el programa.

Cuando abres Dreamweaver MX 2004 por primera vez te pide que configures el espacio de trabajo, hazlo en modo diseñador, cuando le des al botón aceptar te aparece una pantalla con la página de inicio. Elige crear nuevo html y tendrás un pantalla como la de la foto.



Todos lo paneles y ventanas se pueden mover, cerrar, abrir, y cambiar de posición para facilitar el trabajo.

El espacio de trabajo es donde desarrollaremos nuestro proyecto, en su parte superior verás una pestaña donde pone Untitled-1, (esto es porque nuestro documento todavía no tiene nombre), un poco más abajo tenemos una casilla donde pone documento sin título, lo que pongamos en este espacio son los datos que apareceran en la zona superior de nuestra pantalla del ordenador. ¡Cuidado! Una cosa es el nombre de nuestro documento y otra el título que le pongamos, todos los documentos de nuestra página pueden llevar el mismo título.

Ahora vamos a guardar nuestro documento nuevo. Iremos a Archivo|Guardar como| y le ponemos un nombre.

A tener en cuenta: Al poner un nombre a nuestro archivo no debemos dejar espacios, intentad ponerlo todo en minúsculas, y no useis caracteres regionales como la ñ o la ç y tampoco poner acentos.

Aspectos a tener en cuenta

Configurar la pantalla
No todas las personas tienen la misma resolución de pantalla en sus ordenadores. Cuando hagamos una web tenemos que comprobar que se vea correctamente en las dos resoluciones más usuales: 800x600 píxeles y 1024x768 píxeles. Cuando decimos "que se vea correctamente" queremos decir que nuestro diseño encaje en la pantalla (que no aparezcan barras de desplazamiento en la zona inferior).
Piensa que el área que queda una vez descontados los navegadores y las barras es de 760x420 para la resolución de 800x600 píxeles. Y de 955x600 para la de 1024x768 píxeles. Tenlo en cuenta cuando pienses tu web.
Cómo comprobarlo
En Windows XP hay que ir a Inicio, Panel de Control, Pantalla, Configuración. Una vez allí tenemos que modificar el Área de la pantalla.
Un consejo
Si haces tu web para una resolución de 800x600 tendrás siempre menos problemas.