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.
MANUAL
PARA
CREAR
NUESTRA
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:
Esta venta nos muestra los espacios donde le pondremos el nombre a nuestro sitio
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
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:
*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
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
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
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.
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 el color de fuente
Negrita Cursiva Justificado Alineado
a la izquierda Alineado a la derecha Centrado Tamaño C COOMMOO CRCREAEARR UUNN VIVINNCCUULLOO COCONN ELEL TETEXTXTOO
Hay tres formas de hacerlo
1. Crear un nuevo documento de DW
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
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
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
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
HAY TRES FORMAS
Primera:
*La podemos dar clic de arrastre, del panel archivo y colocarla en el lugar
señalado
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
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:
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
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.
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.
200 ancho de tabla
Encabezado superior
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
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
2. Fnd, despliega la siguiente paleta de colores
3. Elegimos el color deseado
Note que la fila superior tiene el color
Ahora vamos a colorear las filas de la columna izquierda
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
MARCOS
*Abrimos DW
*Seleccionamos Conjunto de marcos
*luego aparece la siguiente ventana
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
LeftFrame =Marco Izquierdo
La ventana queda de la siguiente manera, mostrando los marcos
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
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
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 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
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
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.
6. Damos clic en el botón de en medio “Añadir color a la transparencia”
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.
5. Nos aparecerá la siguiente ventana
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.
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