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 

    Prof. Julio César Hernández Hernández 

2   

 

Como crear mí sitio en DW.  Existen tres formas de hacerlo:    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:  Prof. Julio César Hernández Hernández 

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: 

Prof. Julio César Hernández Hernández 

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                 

Prof. Julio César Hernández Hernández 

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.     Prof. Julio César Hernández Hernández 

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” 

  Prof. Julio César Hernández Hernández 

7   

Ahora que ya tenemos nuestro sitio creado vamos a entrar en DW, dándole clic en  HTML: 

  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: 

Prof. Julio César Hernández Hernández 

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: 

  Prof. Julio César Hernández Hernández 

9   

Para ver nuestra página presionamos F12, y nos aparecerá la página siguiente: 

     

Como insertar texto  En la pantalla principal de Dreamweaver escribimos: Como insertar texto en  Dreamweaver.   

  Prof. Julio César Hernández Hernández 

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. 

     

 

Cambia  Negrita  Cursiva  Justificado Alineado  Alineado  Centrado  Tamaño el color  a la  a la  de  izquierda derecha  fuente    COMO CREAR UN VINCULO CON EL TEXTO  Hay tres formas de hacerlo  1.

Crear un nuevo documento de DW   

                    Prof. Julio César Hernández Hernández 

11   

  2. 3. 4. 5.

Seleccionar HTML  Luego CREAR  Copiamos o digitamos el texto en mención y lo pegamos.  Lo guardamos como documento html y queda como sigue 

  6. 7.

Luego  aparecerá la ventana siguiente  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á 

Prof. Julio César Hernández Hernández 

12   

  1. 2.

SEGUNDA FORMA DE CREAR UN VÍNCULO  Seleccionamos el texto del vinculo  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 

Prof. Julio César Hernández Hernández 

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 

Prof. Julio César Hernández Hernández 

14   

  3. 4.

Clic en la carpeta amarilla  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: 

Prof. Julio César Hernández Hernández 

15   

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

   

Prof. Julio César Hernández Hernández 

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” 

Prof. Julio César Hernández Hernández 

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 

Prof. Julio César Hernández Hernández 

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 

Prof. Julio César Hernández Hernández 

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 

Prof. Julio César Hernández Hernández 

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  Prof. Julio César Hernández Hernández 

21   

200 ancho de tabla  Encabezado superior   

  Luego aparecerá la tabla: 

Prof. Julio César Hernández Hernández 

22   

  Ahora queremos:  1º combinar la fila superior 

Note que la tabla ha sufrido un alargamiento de la parte derecha  1. 2. 3. 4. 5.

Clic de arrastre en los puntos negros de la tabla  Clic derecho sobre la tabla  Seleccionar tabla  Combinar celda  La tabla que de la siguiente manera 

Prof. Julio César Hernández Hernández 

23   

  Luego combinamos las filas de las columnas derechas  1. Seleccionamos la parte que queremos combinar 

  2. 3.

Clic derecho sobre el área seleccionada  Tabla y combinar celdas 

  1.

COLOR A LAS CELDAS  Situarnos en la celda que recibirá el efecto del color 

  Prof. Julio César Hernández Hernández 

24   

2. 3.

Fnd, despliega la siguiente paleta de colores  Elegimos el color deseado 

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 

  Prof. Julio César Hernández Hernández 

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    han eliminado los  bordes                       

Prof. Julio César Hernández Hernández 

26   

  MARCOS  *Abrimos DW  *Seleccionamos Conjunto de marcos 

  *luego aparece la siguiente ventana                    Prof. Julio César Hernández Hernández 

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   Prof. Julio César Hernández Hernández 

28    LeftFrame      =Marco  Izquierdo 

La ventana queda de la siguiente manera, mostrando los marcos 

   

  En esta parte guardaremos todo como index.html 

  Prof. Julio César Hernández Hernández 

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  Prof. Julio César Hernández Hernández 

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  Prof. Julio César Hernández Hernández 

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  Prof. Julio César Hernández Hernández 

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 

Prof. Julio César Hernández Hernández 

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 

Prof. Julio César Hernández Hernández 

34   

presionar F12, veremos la animación en el explorador.      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. 

Prof. Julio César Hernández Hernández 

35   

  6. Damos clic en el botón de en medio “Añadir color a la transparencia” 

  7. La imagen quedará como sigue: 

  Prof. Julio César Hernández Hernández 

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. 2. 3. 4.

Editamos la imagen en FW.  De la barra de menú seleccionamos comandos.  De comandos seleccionamos web.  De web seleccionamos definir texto ALT. 

Prof. Julio César Hernández Hernández 

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.    Prof. Julio César Hernández Hernández 

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.            Prof. Julio César Hernández Hernández 

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      Prof. Julio César Hernández Hernández