EDUCACIN PARA EL TRABAJO 5to Grado I

Qu es Adobe Dreamweaver?
Es una aplicacin que est destinada a la construccin, diseo y edicin de sitios
y aplicaciones web

Lo que puede hacer con Dreamweaver 8

Las funciones de edicin visual de Dreamweaver permiten crear

pginas Web de forma rpida, sin escribir una sola lnea de cdigo.
Puede ver todos los elementos o activos del sitio y arrastrarlos desde
un panel fcil de usar directamente hasta un documento.
Puede agilizar el flujo de trabajo de desarrollo mediante la creacin y
edicin de imgenes en Macromedia Fireworks o en otra aplicacin de
grficos y su posterior importacin directa a Dreamweaver.
Dreamweaver tambin contiene herramientas que facilitan la adicin
de activos de Flash a las pginas web.

Diseo del espacio de trabajo.

DAIP ELISEO MEZA PARI

EDUCACIN PARA EL TRABAJO 5to Grado I

LO PRIMERO QUE NECESITO HACER PARA CREAR EL

SITIO WEB

Abrir el programa de Dw y nos aparecer la siguiente ventana.

Dar clic en el icono de SITIO DE DREAM WEAVER.

DAIP ELISEO MEZA PARI

EDUCACIN PARA EL TRABAJO 5to Grado I

Despus nos mostrara una venta como esta, y escribiremos en donde dice
Qu nombre desea asignar al sitio? Y pondremos 5TOGRADOI y
damos siguiente.

DAIP ELISEO MEZA PARI

EDUCACIN PARA EL TRABAJO 5to Grado I

En la siguiente ventana seleccionamos la opcin de No, no deseo utilizar

una tecnologa de servidor y damos siguiente.

DAIP ELISEO MEZA PARI

EDUCACIN PARA EL TRABAJO 5to Grado I

En la siguiente ventana solamente damos clic en siguiente dejamos los

datos que se nos muestran.

DAIP ELISEO MEZA PARI

EDUCACIN PARA EL TRABAJO 5to Grado I

En la siguiente ventana nos pregunta Cmo conectar con su servidor
remoto? Y seleccionamos NINGUNO y siguiente.

En la siguiente ventana solamente nos muestra un resumen de todo lo que

acemos y solamente le damos clic en COMPLETADO.

DAIP ELISEO MEZA PARI

EDUCACIN PARA EL TRABAJO 5to Grado I

Ya que terminamos todos estos pasos, se nos muestra la siguiente ventana

y seleccionaremos la aplicacin de HTML.

DAIP ELISEO MEZA PARI

EDUCACIN PARA EL TRABAJO 5to Grado I

Qu NECESITO PRIMERO PARA DISEAR MI PRIMER WEB?

NECESITO DISEAR LOS BOTONES
EL Diseo de botones: nos permiten enlazar las pginas al momento de dar
clic.
Estos son algunos diseos de los botones.

DAIP ELISEO MEZA PARI

EDUCACIN PARA EL TRABAJO 5to Grado I

Cmo deben de ser los botones?

Deben tener la misma forma y lnea de color.

Cmo voy a disear los botones?

Los podemos disear en Photoshop, Corel o Power Point.

Si es el photoshop hay editarlos luego guardarlo como imagen jpg o
gif para que no se vea el fondo.
Si es en el corel se deben disear de uno en uno y luego dar control +
e, y guardarlo como jpg, aceptar.

DAIP ELISEO MEZA PARI

EDUCACIN PARA EL TRABAJO 5to Grado I

Si es el power point hay q hacerlo en insertar formas y luego dar clic

sobre la imagen y guardarlo.

Diseando Banner.
Es un formato publicitario en Internet. Esta forma de publicidad online consiste en incluir
una pieza publicitaria dentro de una pgina web. Prcticamente en la totalidad de los casos, su
objetivo es atraer trfico hacia el sitio web del anunciante que paga por su inclusin.
Estos pueden ser horizontales o verticales. Las medidas son las siguientes.

Ejemplos de banner`s

DAIP ELISEO MEZA PARI

EDUCACIN PARA EL TRABAJO 5to Grado I

Qu otra cosa necesito para mi diseo de mi WEB?

DAIP ELISEO MEZA PARI

EDUCACIN PARA EL TRABAJO 5to Grado I

Necesito escoger el fondo o los colores que estarn de fondo de mi pgina
web. Este fondo debe combinar con todos las aplicaciones que contendr mi
pgina considerando el diseo de los botones, la tipografa y las imgenes.
Qu contendr en LINK de INICIO?
Este contendr lo que oferta mi empresa, a que se dedica o que promueve o
vende.
Qu contendr en LINK de HISTORIA?
Es el relato de cmo nace la empresa, los hechos histricos, fotos de la
empresa del antes y despus, fotos de los creadores de la empresa.
Qu contendr en LINK de MISIN?
Es la razn de ser de la empresa, el motivo por el cual existe. Asi mismo es
la determinacin de la/las funciones bsicas que la empresa va a
desempear en un entorno determinado para conseguir tal misin.
En la misin se define: la necesidad a satisfacer, los clientes a alcanzar,
productos y servicios a ofertar.
Qu contendr en LINK de VISIN?
Se refiere a lo que la empresa quiere crear, la imagen futura de la
organizacin.
La visin es creada por la persona encargada de dirigir la empresa, y quien
tiene que valorar e incluir en su anlisis muchas de las aspiraciones de los
agentes que componen la organizacin, tanto internos como externos.
La visin se realiza formulando una imagen ideal del proyecto y ponindola
por escrito, a fin de crear el sueo (compartido por todos los que tomen
parte en la iniciativa) de lo que debe ser en el futuro la empresa.
Qu contendr en LINK de VISIN?
Los valores son aquellos juicios ticos sobre situaciones imaginarias o reales
a los cuales nos sentimos ms inclinados por su grado de utilidad personal y
social.
Los valores de la empresa son los pilares ms importantes de cualquier
organizacin. Con ellos en realidad se define as misma, porque los valores
de una organizacin son los valores de sus miembros, y especialmente los
de sus dirigentes.
Los empresarios deben desarrollar virtudes como la templanza, la
prudencia, la justicia y la fortaleza para ser transmisores de un verdadero
liderazgo.
Qu contendr en LINK de GANELERIA?
Este contendr imgenes referentes a lo que mi empresa vende o
promueve.
Qu contendr en LINK de CONTACTO?
Sera la informacin de la empresa ubicacin, telfono, correo electrnico o
un mapa de ubicacin. Quien es la persona encargada.

DAIP ELISEO MEZA PARI

EDUCACIN PARA EL TRABAJO 5to Grado I

Y luego?
Ya que tengo toda la informacin requerida en texto, imgenes, botones,
fotos, etc.
Buscaremos la carpeta que creamos en el sitio web, esta estar alojada en
mis DOCUMENTOS y se llama la carpeta 5TOGRADOI , en esta carpeta
agregaremos los botones y las imgenes o fotos. Aqu se almacenar todo.
Y despus qu?
Ahora si empezaremos a disear nuestra web en el programa de Dw.
Seleccionamos HTML y se nos abrir la ventana para disear el sitio WEB.
Qu debo de conocer antes de empezar a disear?

DAIP ELISEO MEZA PARI

EDUCACIN PARA EL TRABAJO 5to Grado I

En la parte derecha inferior como se muestra encerrado en recuadro rojo,
est la aplicacin de ACCIONES, aqu nos muestra la carpeta 5TO GRADO I
con todos los elementos que contiene esa carpeta fotos imgenes y botones
y todo lo que queramos agregar. Si queremos INSERTAR un elemento de
esta carpeta a nuestra PLANTILLA de WEB solamente lo seleccionamos el

objeto y lo arrastramos a la plantilla para agregarlo y poderlo manipular

dentro.

El siguiente paso es INSERTAR una tabla asi como se muestra en la siguiente

imagen damos clic.

DAIP ELISEO MEZA PARI

EDUCACIN PARA EL TRABAJO 5to Grado I

Ya que damos clic nos muestra la siguiente ventana, y seleccionamos lo

siguiente: en FILAS ponemos 7 en COLUMNAS ponemos 7, en ANCHO DE
TABLA ponemos 750 pixeles, GROSOR DE BORDE ponemos CERO y
seleccionamos la aplicacin AMBOS y damos aceptar

Nos parecer una tabla con CELDAS las cuales podemos mover o hacerlas
mas grande dependiendo del acomodo de lo que contendr nuestra pgina
WEB.

DAIP ELISEO MEZA PARI

EDUCACIN PARA EL TRABAJO 5to Grado I

Cmo voy a trabajar con esta tabla en la distribucin de los

elementos?

Selecciono 5 celdas como se muestra en la siguiente imagen

Ya que seleccione las 5 celdas doy clc derecho y me aparece una ventana,
selecciono la opcion de COMBINAR CELDAS, para que las celdas que

DAIP ELISEO MEZA PARI

EDUCACIN PARA EL TRABAJO 5to Grado I

seleccione las pueda uni en una sola ya que en esta parte pondremos el
Banner horizontal.
Tambien en esta ventana de opciones de tabla, nos permite insertar mas
filas o columnas.

Ya que hicimos este paso agregamos el banner y ajustamos las celdas al

tamao, como se muestra en la siguiente imagen.

DAIP ELISEO MEZA PARI

EDUCACIN PARA EL TRABAJO 5to Grado I

Ejemplo de banner vertical.

Agregando los botones de forma horizontal. Solamente seleccionamos los

botones y los arrastramos a la celda que queremos que estn.

DAIP ELISEO MEZA PARI

EDUCACIN PARA EL TRABAJO 5to Grado I

Despus para guardar todo lo que estamos haciendo damos clic en F12 y
nos aparecer una venta que dice que si deseamos guardar y le damos la
opcin de SI y nos aparecer una ventana para agregar el nombre de
nuestra primer pgina que la nombraremos INDEX y le damos nicamente
GUARDAR, ya que terminamos este paso se nos abrir la pgina del
explorador para visualizar la vista previa de la pgina, cada vez que demos
F12 nos mostrara que queremos guardar y despus nos mostrara la vista
preliminar.

DAIP ELISEO MEZA PARI

EDUCACIN PARA EL TRABAJO 5to Grado I

Agregando fondo.
Seleccionamos las siguientes celdas y damos clic derecho seleccionamos
tabla y combinar celdas como se muestra en la siguiente imagen.

Ya que seleccionamos las celdas y las combinamos insertamos el fondo que

queremos que aparezca. Ajustamos la imagen de fondo dando clic derecho
sobra la imagen y nos aparecer una ventana y seleccionamos la opcin de
ALINEAR y nos aparecern diferentes opciones para alinear nuestra imagen
y ajustarla a la pgina web.
Otra forma de agregar fondo es: en la barra de propiedades de la parte de
abajo como se muestra en la imagen, dar clic en PROPIEDADES DE LA
PAGINA y nos mostrara una ventana, seleccionamos la opcin de ASPECTO,
y seleccionamos la opcin de EXAMINAR la IMAGEN DE FONDO, y buscamos
la imagen que queremos que aparezca, despus le damos clic en la opcin
REPETIR si queremos que se repita o no, despus ya que seleccionamos le
damos ACEPTAR o APLICAR.

DAIP ELISEO MEZA PARI

EDUCACIN PARA EL TRABAJO 5to Grado I

Clic en la opcin de PROPIEDADES DE LA PAGINA.

Muestra de la ventana de las PROPIEDADES DE LA PAGINA

Cmo hacer vnculos?

DAIP ELISEO MEZA PARI

EDUCACIN PARA EL TRABAJO 5to Grado I

Selecciono el BOTON ya que lo tengo seleccionado, en la barra de
PROPIEDADES esta la opcin de VNCULO presiono en icono del CRCULO y
arrastro con una FLECHA que aparece a la pgina que deseo vincular con el
BOTON, ver la imagen.
Paso 1: seleccin del botn que queremos vincular.
Paso 2: seleccionar el icono de VINCULO.
Paso 3: Arrastrar con la flecha a la pgina que queremos vincular.

DAIP ELISEO MEZA PARI