En este apartado aprenderemos a introducir el texto en una página web, para ello, solo tenemos que escribir ¿lógico?, bueno allá vamos:
Para comenzar, prueba a escribir un texto cualquiera en tu ventana de diseño, que hemos configurado a nuestro gusto anteriormente. Yo he escrito "Crea Tu Web en CrearUnaWeb", y el resultado es un texto, de acuerdo con las opciones de configuración de la página, tal como yo las he indicado.
Si comparamos el código y el diseño, nos damos cuenta, que al introducir el texto en la ventana de diseño, este ha aparecido en la ventana código automáticamente, entre las etiquetas <body> y </body>, que generalmente es donde se encuentran todos los objetos visibles de nuestra web.
Fijate en la parte inferior, donde pone "Propiedades", si seleccionamos el texto, a parte del estilo que hemos impuesto en la configuración de nuestra página, podemos variar sus características, prueba por ejemplo a cambiar el tamaño, la fuente, el color, introducir una sangría, etc. Para ello, solo has de servirte de las herramientas que se observan en esta ventana, no te olvides de seleccionar el texto.
En mi caso, voy a centrar el texto, con lo cual aparecerá en el código: "<div align="center">Crea Tu Web en CrearUnaWeb</div>", lo que quiere decir la etiqueta <div> es la posición, la alineación de nuestro texto, como en mi caso, lo he centrado, entonces <div algin="center">texto</div>.
Seguramente te habrás fijado, al seleccionar lo que has escrito, en el cuadro de texto "Vínculo", esto es, enlace. Para crear un enlace hacia otra página, bien sea tuya, bien sea una web externa que no tenga relación contigo, vamos a seguir unos pasos:
- Guardamos el documento en una carpeta que ya hemos creado anteriormente para que contenga todos los archivos en relación con nuestra web para tenerlo todo bien organizado, por ejemplo, escritorio/Mi primera web, (tu hazlo como quieras y donde quieras) para ello, vamos al escritorio, creamos la carpeta y dentro del Dreamweaver, hacemos click en el menú superior, "Archivo" y buscamos "Guardar", seleccionamos la carpeta elegida y le damos un nombre. el nombre es muy importante, si quieres, que la pagina en la que hemos trabajado sea tu pagina principal, deberemos llamarla index.html, en nuestro caso lo haremos así.
- Debemos crear otra página para nuestra web, en la cual se muestren los contenidos que queremos enlazar. Para ello, dentro del dreamweaver, vamos a Archivo/Nuevo y volvemos a hacer doble click sobre HTML, el resultado es una nueva página en blanco, ahora que ya sabemos introducir textos, escribimos otro texto de ejemplo. Se trata de repetir lo explicado hasta ahora.
- Guardamos la nueva página creada en la misma carpeta que antes, pero esta vez, no llamaremos a nuestra web index.html, escoge un nombre cualquiera, yo por ejemplo la he llamado webdeenlace.html. Mi resultado es el siguiente:
Ahora que ya tenemos las dos páginas, tan sólo falta crear un enlace de la primera a la segunda, o sea, de index.html a webdeenlace.html. Hacemos click en pestaña donde se encuentra index.html (sobre el apartado de código) y escribimos la palabra "enlace", debajo de lo que hayamos escrito antes.
Tras escribir la palabra, la seleccionamos, y volveremos a observar las opciones de fuente, estilo, tamaño, alineación, bueno, en nuestro caso, nos fijaremos en el cuadro "Vínculo", a su derecha hay una carpeta amarilla, sobre la cual haremos click; se abrirá una ventana en la que buscaremos el archivo que hemos guardado con el nombre webdeenlace.html (IMPORTANTE: el archivo debe estar situado en la carpeta que hemos guardado el archivo index.html, todo en la misma carpeta a la hora de colgar la página web en internet). Ahora hacemos doble click sobre webdeenlace.html y listo.
Observamos que en el cuadro "Vínculo" tras haber determinado el enlace, aparece webdeenlace.html, esto es debido a que está en la misma carpeta, si estuviera en otra distinta, la dirección sería distinta.
Fijate en que debajo de dicho texto, en "Vínculo", la casilla "Dest" (destino) se ha activado. esta casilla sirve para indicar al navegador (Mozilla Firefox, Internet Explorer, Netscape, Opera, etc), en qué ventana quiere que se abran los vínculos; te habrás fijado que hay enlaces que al abrirse, aparecen en una nueva ventana, el responsable es el "destino". Si hacemos click en la pestaña para abrir las opciones por defecto del destino, encontramos: _blank, _parent, _self y _top.
- _blank: la página a la que estamos enlazando se abre en una ventana nueva.
- _parent: en una página diseñada con marcos, abre el enlace en la página principal, en la que se encuentran todos los marcos.
- _self: abre el documento en la misma ventana en que nos encontramos. Es la opción que se aplica por defecto.
- _top: en una web diseñada con marcos, si el enlace está en uno de los marcos, el enlace que posea este destino se abrirá en la totalidad de la pantalla, no dentro del marco.
Bueno, la página que estamos construyendo no contiene marcos, por eso, a nosotros nos interesa únicamente "_self" (que no hace falta indicarlo como destino al ser el predeterminado) y _blank.
En el "enlace1" creado por nosotros, vamos a utilizar _self o lo dejaremos en blanco. Guarda el documento "index.html" (CTRL + S). y haz click en el botón "Vista previa" situado a la derecha del campo "Título".
Ahora selecciona un navegador de la pestaña que aparece para observar el resultado de tu obra. si haces click en el vínculo, se abrirá en la misma ventana.
Nota: Es posible que el color de tu vínculo cambie al pasar el ratón por encima de él, al hacer click, etc. Esto se debe a la configuración que hayamos escogido en el panel del paso 1.
Vuelve al Dreamweaver, ahora vamos a comprobar, en un enlace distinto, que con el destino _blank, el vínculo se abre en una nueva ventana, apuntando igualmente hacia webdeenlace.html. Comenzamos creando un nuevo texto "enlace2" y repetimos los pasos, en esta ocasión, elegimos el destino "_blank", guarda el documento y volvemos a seleccionar un botón de la "Vista previa", al hacer click, quedará comprobado que el vínculo se abre en una ventana nueva.
Bien, hasta aquí llegamos con el paso 2, en el paso 3 aprenderemos a introducir imágenes, objetos media, etc.
