Barra Insertar

Barra Herramientas del Documento

Ventana del Documento

Grupo de Paneles

Selector de Etiquetas

Panel de Archivos Panel de Propiedades

BARRA DE HERRAMIENTAS
Mostrar Cdigo Mostrar Cdigo y Diseo Mostrar Diseo Vista Previa

I. Creando nuestro Sitio Web

1. En la unidad D, cree una carpeta llamada: Colores y dentro de esta cree otra carpeta llamada: Imagenes. 2. Proceda a abrir el programa Macromedia Dreamweaver y realice lo siguiente: A. Seleccionar el men Sitio / Administrar Sitios B. Del cuadro de dilogo que aparece al dar clic en el botn Nuevo se desplegar un submen, seleccionar el comando Sitio.

C. En el cuadro de dilogo Definicin del sitio, ficha Avanzada realizar lo siguiente: En el campo Nombre del sitio, digitar Codigo de Colores. En el campo Carpeta raz local, haga clic en el icono de carpeta y seleccione la carpeta que se creo en la unida D llamada Colores. Habilitar la casilla Actualizar lista de archivos locales automticamente. Por defecto siempre esta marcada. En el campo Carpeta predeterminada de imgenes, haga clic en el icono de carpeta y elegir la carpeta que se creo dentro de la carpeta Colores llamada imagenes. Haga clic en el botn Aceptar

*2*

D. En el cuadro de dilogo seleccione su sitio y luego presione el botn Listo.

E. El Panel Archivos deber aparecer de la siguiente manera:

*3*

II. Creacin y almacenamiento de una pgina nueva

Despus de crear un sitio nuevo, ya puede empezar a crear pginas Web. 1. En Dreamweaver, Seleccione Archivo > Nuevo. 2. En la ficha General del cuadro de dilogo Nuevo documento, seleccione Pgina bsica en la lista Categora, seleccione HTML en la lista Pgina bsica y haga clic en Crear. 3. Seleccione Archivo > Guardar como. 4. En el cuadro de dilogo Guardar como, busque y abra la carpeta Colores que defini como carpeta raz local del sitio. 5. Escriba index.html en el cuadro de texto Nombre de archivo y haga clic en Guardar. El nombre de archivo aparecer ahora en la barra de ttulo en la parte superior de la ventana de la aplicacin. 6. En el cuadro de texto Ttulo del documento en la parte superior del nuevo documento, escriba Cdigo de Colores HTML.

ste es el ttulo de la pgina (distinto al nombre de archivo). Los visitantes del sitio vern este ttulo en la barra del ttulo del navegador cuando accedan a ella a travs de su navegador Web. 7. Seleccione Archivo > Guardar para guardar la pgina.

Insercin de tablas
1. Haga clic una vez en la pgina para colocar el punto de insercin en la esquina superior izquierda de la pgina.

2. Digite Colores HTML 3. Seleccione el texto escrito, y en el Panel de propiedades aplique el siguiente formato Fuente: Verdana Tamao: 16 en Negrita y Alineacin al centro

4. Presione Enter para pasar al siguiente Lnea. 5. Seleccione Insertar> Tabla.

*4*

6. En el cuadro de dilogo Tabla, siga este procedimiento: Escriba 21 en el cuadro de texto Filas. Escriba 3 en el cuadro de texto Columnas. Escriba 50 en el cuadro de texto Ancho de tabla. Seleccione Porcentaje en el men emergente Ancho de tabla. Escriba 1 en el cuadro de texto Grosor del borde.

Haga clic en Aceptar.

Aparece en su documento una tabla con 21 filas y 3 columna. La tabla tiene 50 Por ciento de ancho de pantalla, 1 pxel de bordes. Seleccione las celdas de Primera fila.

En el Panel de Propiedades Cambie el Colore de Fondo

*5*

*6*

Practica 2
Coloque color de fondo #99CCFF Men Modificar / Propiedades de la pagina

Coloque el titulo a la pgina: Vnculos | Correos Electrnicos

Seleccione toda las celdas de la primera fila, luego un clic a men Modificar / Tabla / Combinar celdas. Un clic en la celda que esta en la primera fila, y donde esta parpadeando el cursor ah insertaremos una animacin de flash, para ello nos vamos al men Insertar / Media / Flash o Botn flash para la versin 8. Seleccione el archivo que el profesor le va indicar con la extensin SWF

Siga los pasos que el profesor le va a indicar.

*7*

Prctica 3
Cree un sitio con el Nombre: Practica3

Daremos formato a Pgina Un Clic Men Modificar / Propiedades de la Pagina Seleccione en Categora Vnculos y procedemos a ingresar los colores o Color de Vinculo: #FFFFFF o Vnculos Visitados: #FF0000 o Vnculos de Sustitucin: #99FF33 o Vnculos Activos: #FFFF00

Insertaremos una tabla, a la cual le daremos 5 Filas, 2 Columnas, Ancho de tabla 80 porcentaje y Grosor de borde 0 pxeles. Como muestra la imagen.

*8*

Seleccione las 2 celdas de la primera fila y combnelas, hacemos los mismo para la fila 2, fila 3 y fila 5, tal como muestra la imagen.

Un clic en la celda de la primera fila, insertamos la imagen que el profesor te indica, en este caso title1; men Insertar / Imagen, y seleccionamos la imagen title1

Coloque color de fondo Negro a la celda que esta en la fila 2 y fila 5, para ello un clic en la celda donde desea poner el color de fondo y luego en el panel de propiedades buscamos Fnd (Color de fondo)

As nos debera de quedar con el color de fondo

Un clic en la celda de fila 3, y luego un clic men Insertar / Objeto de imagen / Imagen de sustitucin; a si seleccionaremos lo siguiente: o Imagen Original: CRpic1 o Imagen de sustitucin: CRpic2 Aceptar

*9*

En la celda de la fila 2 escriba lo siguiente: o El Comercio | Mundo Latino | Radio Programas | Per | Reniec | Sunat | EsSalud | Escrbenos En la celda de la fila 4, columna 1 escriba lo siguiente: o Weblogicnet le ofrece una solucin web completa Weblogicnet ofrece una solucin web completa, llave en mano, totalmente a medida de las necesidades del usuario, autogestionable y permitiendo una independencia total y una gestin continuada. En la celda de la fila 4 columna 2 escriba lo siguiente o A la medida de sus necesidades Con Weblogicnet tendr su sitio web con un diseo totalmente exclusivo (sin plantillas), adaptado a su imagen corporativa. Usted tan slo tiene que ocuparse de poner los contenidos, nunca result ms fcil. En la celda de la fila 5 escriba lo siguiente: o Derechos Reservados | 2006 El formato para el texto ser fuente Verdana, tamao 12

Siga los pasos que el profesor le va a indicar para poder crear los vnculos. o http://www.elcomercioperu.com.pe o http://www.mundolatino.com/peru o http://www.rpp.com.pe o http://www.peru.com o http://www.reniec.gob.pe o http://www.sunat.gob.pe o http://www.essalud.gob.pe o mailto:eliseoqf@hotmail.com

*10*

Practica 4
Crear un sitio con el nombre: Practica4 Inserte una tabla con 3 filas y 3 columnas; Ancho de tabla 60 Porcentaje y Grosor de borde 0 Ubquese en la celda que se encuentra en fila 1 columna 1. Un clic en men Insertar / Objetos de imagen / Imagen de sustitucin , a si seleccionaremos lo siguiente: o Imagen Original: gm1 o Imagen de sustitucin: gm2 o URL: http://www.gianmarcofans.com

Aceptar En la celda de la fila 1 columna 2 haga los mis pasos para insertar Imagen de sustitucin en esta ocasin utilice las imgenes mp1 y mp2 y el URL ser http://www.mariapia.com.pe En la celda de la fila 1 columna 2 haga los mis pasos para insertar Imagen de sustitucin en esta ocasin utilice las imgenes ps1 y ps2 y el URL ser http://pedrosuarez-vertiz.com

INSERTAR BOTONES DE FLASH Ubquese en la celda de la fila 3 columna 1, luego un clic en men Insertar / Media / Botn flash o en el panel insertar opcin Comn busque el botn Flash

*11*

Seleccione lo siguiente o Estilo: Slip Arroz o Texto del Botn: Gianmarco o Vinculo: URL: http://www.gianmarcofans.com o Destino: _blank o Guardar como: gianmarco.swf

Seleccione la celda de la fila 3 columna 2 luego ingrese los siguientes datos: o Estilo: StarSpinner o Texto del Botn: Mara Pa o Vinculo: URL: http://www.mariapia.com.pe o Destino: _blank o Guardar como: maria_pia.swf

Seleccione la celda de la fila 3 columna 2 luego ingrese los siguientes datos: o Estilo: DiamondSpinner o Texto del Botn: Pedro Suarez o Vinculo: URL: http://pedrosuarez-vertiz.com o Destino: _blank o Guardar como: pedro_suarez.swf

*12*

RESULTADO

*13*