MANUAL PARA CREAR NUESTRA PAGINA WEB EN DREAMWEAVER

Transcripción

1 1 MANUAL PARA CREAR NUESTRA PAGINA WEB EN DREAMWEAVER INDICE 1. Como crear mí sitio. 2. Entorno. 3. Insertar texto. 4. Como crear un vínculo. Formas: 5. Como insertar una imagen. 6. Insertar Tabla. 7. Marcos. 8. Mapas. 9. Insertar imagen de FW a DW. 10. Menú emergente. a) Con un botón creado en FW. b) Con una imagen editada en FW. c) Digitando o pegando todo el texto. 11. Exportar animación del XARA

2 2 Existen tres formas de hacerlo: Como crear mí sitio en DW. 1º Desde el panel central Crear Nuevo Sitio de DW Al abrir DW en la columna central, en el siguiente esquema se muestra: 2º: Desde la barra de MENÚ, dar clic en inicio, nuevo sitio, y aparecerá la siguiente ventana: 3º: También en menú SITIO, administrar sitio, como se muestra en la ventana anterior *En todas las formas aparecerá la siguiente ventana:

3 3 Esta venta nos muestra los espacios donde le pondremos el nombre a nuestro sitio Y este quedará de la siguiente manera: *Ahora nuestro sitio se llama Mi Primer Página Web *Le damos clic en siguiente y nos aparecerá la siguiente ventana:

4 4 Es importante dejar señalada la primera opción *Luego le damos clic en siguiente, y aparecerá la siguiente ventana: En esta parte tenemos que haber creado una carpeta en el disco duro de la PC

5 5 Como se muestra en el esquema anterior, allí se encuentra la carpeta que creamos y se llama Mi primer sitio ; le damos clic en seleccionar: Ahora aparece la carpeta origen, que contendrá todos los archivos que vamos a necesitar para la elaboración de nuestra página.

6 6 *Aparece la siguiente ventana que debe de contener NINGUNO, luego siguiente, para que nos muestre la siguiente ventana: *Luego en esta ventana pinchamos COMPLETADO Y ya tenemos nuestro sitio en DW. Note en DW en la parte derecha en el panel ARCHIVO

7 Ahora que ya tenemos nuestro sitio creado vamos a entrar en DW, dándole clic en HTML: 7 Y nos muestra el área de trabajo con todas sus barras, como se muestra a continuación Hay que ponerle titulo a la pagina, en este caso le pondremos MEDICAMENTOS, y le damos guardar como, y le escribimos index.html Y aparece de la siguiente manera:

8 8 Note que el titulo MEDICAMENTOS aparece en la venta También es importante conocer que nos situamos en DISEÑO para trabajar nuestra página. Si queremos saber cómo esta nuestra página con el lenguaje HTML, le damos clic en CODIGO, y nos aparece la siguiente ventana:

9 Para ver nuestra página presionamos F12, y nos aparecerá la página siguiente: 9 Como insertar texto En la pantalla principal de Dreamweaver escribimos: Como insertar texto en Dreamweaver.

10 En el inspector de propiedades después de haber seleccionado el texto cambia de forma, aquí podemos cambiar desde el color, tamaño, fuente, alinearlo, etc. 10 Cambia el color de fuente Negrita Cursiva Justificado Alineado a la izquierda Alineado a la derecha Centrado Tamaño COMO CREAR UN VINCULO CON EL TEXTO Hay tres formas de hacerlo 1. Crear un nuevo documento de DW

11 11 2. Seleccionar HTML 3. Luego CREAR 4. Copiamos o digitamos el texto en mención y lo pegamos. 5. Lo guardamos como documento html y queda como sigue 6. Luego aparecerá la ventana siguiente 7. seleccionamos el texto donde irá el vinculo 8. Luego damos clic en el icono que se encuentra a la izquierda de la carpeta 9. Jalamos con el mouse hacia el archivo con quien vinculará

12 12 SEGUNDA FORMA DE CREAR UN VÍNCULO 1. Seleccionamos el texto del vinculo 2. Luego le damos clic al icono 3. Le damos clic en la carpeta que sale en el cuadro de texto 4. Aparece la siguiente ventana

13 13 5. Seleccionamos el archivo con que queremos vincular y después aceptar TERCERA FORMA DE INCERTAR HIPERVINCULO 1. Seleccionamos en barra de menú la opción hipervínculo 2. Luego aparece la siguiente ventana

14 14 3. Clic en la carpeta amarilla 4. Seleccionamos el archivo que vinculará Imágenes se repiten del la forma anterior dos COMO INSERTAR UNA IMAGEN En la carpeta creada en el disco duro llamada Mi Primer Sitio, también fue creada una carpeta llamada img, que contendrá todas las imágenes de mi página:

15 15 HAY TRES FORMAS Primera: *La podemos dar clic de arrastre, del panel archivo y colocarla en el lugar señalado

16 16 Luego damos clic en aceptar a la ventana anterior Segunda: Damos clic en el icono de imágenes que se encuentra en la barra de herramientas, como se muestra a continuación Nos aparecerá la siguiente ventana que muestra la carpeta de las imágenes denominada img

17 17 Abrimos esa carpeta dándole clic, y aparecerán todas las imágenes almacenadas en la carpeta y damos clic en aceptar. Luego aparecerá la siguiente ventana: Seleccionamos la imagen preferida y aceptar Y aceptar en la siguiente ventana

18 18 Tercera: En la barra de menú, damos clic en insertar y seleccionamos imagen Luego aparecerá la siguiente ventana, seleccionamos la imagen y luego en aceptar Aparece la ventana ya conocida y le damos aceptar

19 19 En todas las formas las imágenes se colocan en la página automáticamente INSERTAR UNA TABLA Para insertar una tabla se maneja igual que un procesador de texto 1. Dar clic en insertar de la barra de menú y luego seleccionar Tabla. 2. Luego aparecerá la siguiente ventana

20 20 Esta contiene tres partes que son: Tamaño de tabla, Encabezado y Accesibilidad. 1. Tamaño de tabla contiene los siguientes atributos: a) Numero de filas y columnas b) Ancho de la tabla y pixeles c) Grosor del borde d) Relleno de celda e) Espacio entre celdas 2. Encabezado Contiene los tipos de encabezados que usted prefiere. 3.Accesibilidad Contiene los tipos de acceso que prefiere en la Tabla. En esta ocasión preferimos: 6 filas 2 columnas

21 ancho de tabla Encabezado superior Luego aparecerá la tabla:

22 22 Ahora queremos: 1º combinar la fila superior Note que la tabla ha sufrido un alargamiento de la parte derecha 1. Clic de arrastre en los puntos negros de la tabla 2. Clic derecho sobre la tabla 3. Seleccionar tabla 4. Combinar celda 5. La tabla que de la siguiente manera

23 23 Luego combinamos las filas de las columnas derechas 1. Seleccionamos la parte que queremos combinar 2. Clic derecho sobre el área seleccionada 3. Tabla y combinar celdas COLOR A LAS CELDAS 1. Situarnos en la celda que recibirá el efecto del color

24 2. Fnd, despliega la siguiente paleta de colores 3. Elegimos el color deseado 24 Note que la fila superior tiene el color Ahora vamos a colorear las filas de la columna izquierda Presionamos F12 para observar como quedaría en la web

25 25 Ahora ocultaremos los bordes de la tabla *La vista de la página debe estar en COMUN *Luego Borde debe estar a cero Note que en el explorador no aparece la tabla por que se le bordes han eliminado los

26 26 MARCOS *Abrimos DW *Seleccionamos Conjunto de marcos *luego aparece la siguiente ventana

27 27 Note las tres columnas que se presentan en la pestaña general 1º En esta aparece en la columna Categoría conjunto de marcos 2º Es la columna del centro aparecen todos los estilos de conjuntos de marcos Seleccionamos a voluntad, en este caso superior fijo, izquierdo anidado. 3º La columna derecha donde se encuentra la vista previa Luego de damos clic en Crear Aparece la siguiente ventana En esta ventana tenemos que darle un titulo a cada marco Es importante saber la traducción de lo siguiente mainframe =Marco Principal topframe = Marco Superior

28 28 LeftFrame =Marco Izquierdo La ventana queda de la siguiente manera, mostrando los marcos En esta parte guardaremos todo como index.html

29 29 Automáticamente el sistema me pide que guarde los marcos y me señala que marco es el que tengo que guardar Note que al guardar todo, la ventana muestra en el contorno de toda la página una línea punteada, como se muestra a continuación Cuando guardamos el izquierdo nos muestra esa parte Cuando guardamos la principal nos muestra esa parte Cuando guardamos la superior nos muestra esa parte

30 30 En la siguiente ventana se muestran los tres marcos Note en la siguiente ventana, que ya se encuentran, todas las páginas para cada marco index.html izquierdo.html principal.html

31 31 titulo.html MAPAS Primero abrimos DW y creamos un archivo HTML nuevo, luego insertamos una imagen,(editada en FireWork) para el caso tenemos esta y vamos a crear una zona interactiva en el reloj de la derecha. Seleccionamos la imagen y vemos que el inspector de propiedades cambia, a la izquierda del inspector hay una parte que dice Mapa

32 32 seleccionamos la Herramienta Zona interactiva oval y vamos a la imagen y encerramos el reloj con la herramienta de la siguiente forma Ahora el inspector de propiedades toma una nueva forma, en la parte Vínculo podemos seleccionar el archivo a la que vincularé la zona interactiva que seleccionamos y en destino donde va a abrir el archivo. Después de seleccionar el archivo, presionamos F12 para verlo en el explorador y veremos que al desplazar el cursor por la zona que seleccionamos el puntero del mouse cambia de forma a una Mano que quiere decir que hay un vínculo y al dar clic en la zona debe de vincular con el archivo. Como Insertar una animación de Fireworks a Dreamweaver 1º forma: Primero creamos la animación, en este caso, un botón animado en Fireworks, luego damos clic en Archivo, después en Exportar y aparecerá el siguiente cuadro donde guardaremos la animación. En la zona del cuadro que dice exportar debemos seleccionar HTML e imágenes, le ponemos un nombre

33 33 a la animación y damos clic en Exportar. Cuando ya estamos en DW damos clic en el Menú Insertar y seleccionamos Objetos de imagen, luego HTML de Fireworks. Y aparecerá el siguiente cuadro donde debemos dar clic en Examinar. Luego aparecerá este cuadro, donde debemos seleccionar el archivo con la extensión HTML, en este caso animación1, damos clic en Abrir y luego en Aceptar y ya tenemos la animación en DW, ahora al

34 presionar F12, veremos la animación en el explorador. 34 2º Forma: 1. Editamos la imagen en FW. 2. En la barra de herramientas seleccionar se encuentra Exportar área. 3. Seleccionamos la imagen y le damos clic derecho sobre la selección. 4. Luego seleccionamos Exportar área. 5. Nos aparece la siguiente ventana.

35 35 6. Damos clic en el botón de en medio Añadir color a la transparencia 7. La imagen quedará como sigue:

36 36 8. Damos clic en exportar. 9. Nombramos el botón, exportamos como HTML e imágenes. 10. Damos clic en exportar. 11. Es importante que cuando estemos editando la imagen optimicemos. MENU EMERGENTE 1. Editamos la imagen en FW. 2. De la barra de menú seleccionamos comandos. 3. De comandos seleccionamos web. 4. De web seleccionamos definir texto ALT.

37 37 5. Nos aparecerá la siguiente ventana 6. Aquí introduciremos el texto que deseamos que aparezca en la imagen. 7. Después de introducir el texto, damos clic en aceptar; presionamos F12 para ver cómo queda en el explorador.

38 38 NOTA: Para exportar la animación anterior a DW hacer los pasos que están en la página 31. MENU EMERGENTE CON UNA IMAGEN Primera forma 1 El primer paso es insertar una imagen en Fireworks. 2 Herramienta División, que se encuentra en el panel de herramientas de Fireworks, de modo que nos quede de la siguiente forma. 3 Damos clic en Comandos que se encuentra en la barra de menús, 4 Luego seleccionamos Web y después Definir texto ALT.

39 39 5 Aparecerá el siguiente cuadro donde escribiremos el Texto ALT. 6 Damos clic en Aceptar. Al presionar F12 veremos en el explorador al pasar el cursor del mouse sobre la imagen el Texto ALT que colocamos a la imagen. Segunda Forma Al seleccionar la imagen con la Herramienta División, el inspector de propiedades cambia de forma, hay una parte donde dice Alt: allí escribimos el texto ALT presionamos la tecla Enter y lo vemos en el explorador para ver el Texto ALT. NOTA: Para exportar la animación anterior a DW hacer los pasos que están en la página 31. NOTA: El texto que queramos poner en el inspector no tiene limite podemos digitar o pegar todo el texto que queramos y el resultado será el mismo. EXPORTAR ANIMACION DEL XARA