Modificar un documento

Antes de seguir, vamos a situarnos y hacer bien las cosas ;) Ya sabemos dar formato al texto, insertar imagenes y crear tablas… En el próximo tutorial vamos a aprender a crear vínculos o enlaces.

Pero antes, vamos a modificar un par de documentos de los que tenemos ya hechos.

Abrimos el Dream y vamos al documento index.htm, lo abriremos y directamente vamos a, (desde Archivo/Guardar como o de la propia pestaña del documento ) lo hacemos pero con un nombre diferente:

practica1.htm

En el panel de Archivos que tenemos en la parte derecha del Dream, veremos que aun continua estando el index.htm, no? Si, debe estar ahí, lo abrimos de nuevo y vamos a modificarlo para que sea la portada de nuestra pagina, sera también desde la que nos vamos a desplazar a otros documentos que vayamos creando hasta conocer bien el programa y podamos crear nuestra Web definitiva.

Pues bien, vamos a crear un index, adecuado, con una tabla, e insertaremos una imagen que nos guste y defina. Sera la portada de nuestra pagina y también desde la cual podremos desplazarnos o navegar :) a los demás documentos que vayamos creando hasta conocer bien el programa y crear nuestra auténtica Web.

Iniciamos el Dream y abrimos el documento index.htm que tenemos ya hecho. Se trata de borrarlo del todo, también podríamos tranquilamente abrir uno nuevo y guardarlo con el mismo nombre, pisaríamos el anterior y quedaría el nuevo. Otra forma sera entrando en el Código fuente y borrar todo lo que encontremos entre las etiquetas <body> y </boby> Hacerlo como mas os guste vale?

* Nota: Veremos con mas detenimiento la opción de Propiedades de la página, aun nos quedan muchas cosas por ver antes.

Pero  vamos a poner fondo al body y para ello, pulsamos en Propiedades de la Página:

1

Desde examinar, buscaremos una imagen, que habremos preparado ya antes, y guardado en la carpeta de imágenes del Sitio. Veréis que todo el fondo queda cubierto con esta imagen:

2

Insertar/Tabla con estos valores:

3

En el Inspector de Propiedades, veremos la configuración de la tabla así:

4

y la tabla ( ocupara mas o menos espacio en la pantalla, dependiendo de vuestra resolución, pero el aspecto sera igual) así:

Tabla

En la Fila superior, insertaremos una imagen que hayamos preparado y que servira de top. Las medidas de la imagen han de ser máximo 780 px, de ancho y yo puse de alto 200 px. Como la idea es aprovechar al máximo el espacio, estas son la medidas que mas se usan a nivel profesional. Aunque también podemos encontrarnos de 150 px de altura.

Situamos el cursor dentro de la Fila del medio y en el Inspector de Propiedades, le daremos un color de fondo y alineación :

5

Veremos que el cursor se sitúa automáticamente en el centro de la celda.

Insertamos ahora un titulo, yo puse: Ejemplos practicas con el Dreamweaver 8 Pulso la tecla Enter un par de veces e inserto una tabla con estos valores:

67

Repetir el paso nº 5. Y aplicar a las celdas, un color solido de fondo y alineación al centro. Fijarse que al situar el cursor y empezar a insertar texto, este queda ya en el centro, no tendremos que alinearlo como hacíamos en el correo o como hicimos al principio. ;)

Desde el Inspector de Propiedades también, vamos a dar formato de fuente, tamaño y color al texto. Lo seleccionamos y desplegando los sub-menús:

8

Veréis que el Dream, aplica un Estilo,  Estilo8. Mas adelante veremos como crearlos de otra forma mas personalizados.

Ahora tan solo nos queda guardar el documento con el nombre index.htm, hasta que sepamos poner Vínculos a estos textos que acabamos de insertar.

Y lo veremos en el próximo tutorial. Ver como me quedó a mi Aquí.

Responder