Dreamweaver CS3 - INSTITUTOJSM Semana 1

Crear un sitio web local en Dreamweaver CS3

•Como primer paso crearemos las carpetas donde estaremos trabajando nuestro sitio web lo cual deben de ir de la siguiente manera:

Trabajos de PC

- JSM (Nombre)

  * Botones

  * Imágenes

  * Páginas 

• Ejecutamos el programa Dreamweaver CS3
•Ir al menú Sitio > Nuevo Sitio… 

• Nos aparecerá una ventana como la siguiente, seguidamente hay que asignar un nombre al sitio web el cual llevará el siguiente formato: [JSM (Nombre)], y clic en Siguiente

• La siguiente ventana es para establecer si queremos utilizar los siguientes tipos de lenguaje de programación avanzados, a lo cual daremos clic en: 

Seguidamente damos clic en Siguiente 

• La siguiente ventana es para designar si editaremos en locales o usaremos un servidor, lo cual escogeremos la opción uno, trabajar con locales 

• En parte donde menciona el lugar en que deseamos almacenar los archivos, daremos clic en la carpeta para buscar nuestra carpeta que creamos al principio y se encuentra en escritorio 

En la parte superior de la ventana de búsqueda, debe encontrarse el nombre de la carpeta principal, que en este caso es JSM (Nombre), estando indicada esa carpeta daremos clic en Seleccionar.

Seguidamente damos clic en Siguiente … 

• La siguiente ventana es para designar si nos conectaremos a un servidor remoto, en este caso escogeremos la opción Ninguno. 

Seguidamente damos clic en siguiente …. 

• Nuestra ultima ventana es para darnos el resumen de nuestro sitio creado, el cual verificaremos que nuestro datos estén correctos y seguidamente damos clic en Completado 

Crear un archivo HTML 

• Como primer paso definiremos el sitio en el que vamos a trabajar, en este caso el sitio que creamos anteriormente, nos vamos al menú Sitio > Administrar sitios … 

• Seleccionamos nuestro Sitio y damos clic en listo• Damos clic en Crear nuevo … HTML y nos aparecerá nuestra hoja de diseño  

• Crearemos una página básica, lo cual haremos uso de las tablas, para eso iremos al menú Insertar>Tabla, también otra opción es con la combinación de teclas               Ctrl + Alt + T o bien damos clic en el botón Tabla que se encuentra en nuestra hoja de diseño 

• Modificaremos nuestra tabla de la siguiente manera:Al terminar de modificar nuestra tabla, pulsamos Aceptar

• El paso siguiente es diferenciar cada fila con un color de la siguiente manera:

Seleccionamos la celda a la cual le vamos a poner el color de fondo, una vez seleccionada nos iremos a la barra de propiedades, en la opción Color de fondo predeterminaremos el color asignado para la fila y así sucesivamente para las demás. 

•Para cambiar el tamaño de las filas se hará de la siguiente manera:
1. Seleccionaremos la primera fila, después nos iremos a la barra de propiedades y en la opción Al (Altura) pondremos la cantidad 180 y tecleamos Enter
2. Para la segunda fila la altura la dejaremos en cero
3. Para la ultima fila pondremos la cantidad de 50

Debe quedar de la siguiente manera: 

Hemos creado nuestro ENCABEZADO, CUERPO Y PIE DE PAGINA 

• Visualizaremos nuestra pagina en un navegador, el cual escogeremos el Internet Explorer, para esto nos iremos al botón Vista previa y escogeremos nuestro navegador.

    Se nos aparecerá la ventana de guardar cambios la cual daremos clic en SI, y buscaremos nuestra carpeta de paginas y le colocaremos el nombre de index y daremos clic en Guardar.

Y se nos aparecerá nuestra vista previa en el navegador de Internet Explorer

•Para maximizar nuestra tabla, es decir que cubra el 100% de nuestra pagina, haremos lo siguiente:

1. Seleccionaremos nuestra cuerpo (segunda fila), después en la parte superior de nuestra barra de propiedades se mostrará la codificación que lleva esta tabla, seleccionaremos el código <table>, se debe seleccionar toda nuestra tabla 

2. Nos iremos a la Vista Código, y se nos mostrará el código fuente que lleva nuestra tabla

3. Modificaremos nuestro código agregando la altura, en este caso con código HTML que sería con el código height, el dremweaver nos ayuda a colocar dichos códigos automáticamente, seleccionamos el código y agregamos "100%" 

4. Una vez hecho el cambio en nuestro código fuente, volveremos a la Vista Diseño y notaremos el cambio en nuestra tabla 

5. Para que nuestra tabla se visualice también en nuestro navegador tendremos que modificar nuestro código fuente general, para eso iremos a nuestra vista Código nuevamente y eliminaremos nuestra primera línea, que no es necesaria para esta tabla. 

6. Ahora si, iremos a la vista Diseño, visualizar en el navegador Internet Explorer, guardamos cambios y nuestra tabla debe abarcar toda la ventana.  

Para borrar los bordes sobrante de nuestra página y poner título web nos iremos a la barra de propiedades y daremos clic en la opción Propiedades de la página…

1. Nos iremos a la sección Aspectos en la cual modificaremos nuestros márgenes de la siguiente manera: 

2. En la sección Título/Codificación, en la opción título pondremos WEB BÁSICA JSM

3. Finalmente damos clic en Aceptar, visualizar en el navegador Internet Explorer, guardar cambios y nuestra página debe tener título web y también deben haber desaparecido los bordes sobrantes