1. MI PRIMER SITIO WEB Lic. Oney David
Begambre Pérez
IE San Juan 2016 Página 1
¿Qué es Adobe Dream weaver?
Es una aplicación que está destinada a la construcción, diseño y edición de sitios
y aplicaciones Web.
Lo que puede hacer con Dreamweaver 8
Las funciones de edición visual de Dreamweaver permiten crear páginas Web de forma
rápida, sin escribir una sola línea de código.
Puede ver todos los elementos o activos del sitio y arrastrarlos desde un panel fácil de
usar directamente hasta un documento.
Puede agilizar el flujo de trabajo de desarrollo mediante la creación y edición de
imágenes en Macromedia Fireworks o en otra aplicación de gráficos y su posterior
importación directa a Dreamweaver.
Dreamweaver también contiene herramientas que facilitan la adición de activos de
Flash a las páginas web.
Diseño del espacio de trabajo.
2. MI PRIMER SITIO WEB Lic. Oney David
Begambre Pérez
IE San Juan 2016 Página 2
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.
Después no mostrara una venta como esta, y escribiremos en donde dice ¿Qué nombre desea
asignar al sitio? Y pondremos MI SITIO y damos siguiente.
3. MI PRIMER SITIO WEB Lic. Oney David
Begambre Pérez
IE San Juan 2016 Página 3
En la siguiente ventana seleccionamos la opción de No, no deseo
utilizar una tecnología de servidor y damos siguiente.
En la siguiente ventana solamente damos clic en siguiente dejamos los datos que se nos
muestran.
4. MI PRIMER SITIO WEB Lic. Oney David
Begambre Pérez
IE San Juan 2016 Página 4
En la siguiente ventana nos pregunta ¿Cómo conectar con su
servidor remoto? Y seleccionamos NINGUNO y siguiente.
En la siguiente ventana solamente nos muestra un resumen de todo lo que acezamos y
solamente le damos clic en COMPLETADO.
5. MI PRIMER SITIO WEB Lic. Oney David
Begambre Pérez
IE San Juan 2016 Página 5
Ya que terminamos todos estos pasos, se nos muestra la
siguiente ventana y seleccionaremos la aplicación de HTML.
¿Qué NECESITO PRIMERO PARA DISEÑAR MI PRIMER WEB?
NECESITO DISEÑAR LOS BOTONES
EL Diseño de botones: nos permiten enlazar las páginas al momento de dar clic.
Estos son algunos diseños de los botones.
6. MI PRIMER SITIO WEB Lic. Oney David
Begambre Pérez
IE San Juan 2016 Página 6
¿Cómo deben de ser los botones?
Deben tener la misma forma y línea de color.
¿Cómo voy a diseñar los botones?
• Los podemos diseñar 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 diseñar de uno en uno y luego dar control + e, y guardarlo
como jpg, aceptar.
• Si es el power point hay q hacerlo en insertar formas y luego dar clic sobre la imagen y
guardarlo.
Diseñando Banner.
Es un formato publicitario en Internet. Esta forma de publicidad online consiste en incluir
una pieza publicitaria dentro de una página web. Prácticamente en la totalidad de los casos, su
objetivo es atraer tráfico hacia el sitio web del anunciante que paga por su inclusión.
Estos pueden ser horizontales o verticales. Las medidas son las siguientes.
7. MI PRIMER SITIO WEB Lic. Oney David
Begambre Pérez
IE San Juan 2016 Página 7
Ejemplos de banner`s
¿Qué otra cosa necesito para mi diseño de mi WEB?
Necesito escoger el fondo o los colores que estarán de fondo de mi página web. Este fondo
debe combinar con todos las aplicaciones que contendrá mi página considerando el diseño de
los botones, la tipografía y las imágenes.
¿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 cómo nace la empresa, los hechos históricos, fotos de la empresa del antes y
después, fotos de los creadores de la empresa.
¿Qué contendrá en LINK de MISIÓN?
Es la razón de ser de la empresa, el motivo por el cual existe. Asi mismo es la determinación de
la/las funciones básicas que la empresa va a desempeñar en un entorno determinado para
conseguir tal misión.
En la misión se define: la necesidad a satisfacer, los clientes a alcanzar, productos y servicios a
ofertar.
¿Qué contendrá en LINK de VISIÓN?
Se refiere a lo que la empresa quiere crear, la imagen futura de la organización.
8. MI PRIMER SITIO WEB Lic. Oney David
Begambre Pérez
IE San Juan 2016 Página 8
La visión es creada por la persona encargada de dirigir la empresa,
y quien tiene que valorar e incluir en su análisis muchas de las aspiraciones de los agentes que
componen la organización, tanto internos como externos.
La visión se realiza formulando una imagen ideal del proyecto y poniéndola por escrito, a fin de
crear el sueño (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 GALERIA?
Este contendrá imágenes referentes a lo que mi empresa vende o promueve.
¿Qué contendrá en LINK de CONTACTO?
Sera la información de la empresa ubicación, teléfono, correo electrónico o un mapa de
ubicación. Quien es la persona encargada.
¿Y luego?
Ya que tengo toda la información requerida en texto, imágenes, botones, fotos, etc.
Buscaremos la carpeta que creamos en el sitio web, esta estará alojada en mis DOCUMENTOS
y se llama la carpeta MI SITIO, en esta carpeta agregaremos los botones y las imágenes o
fotos. Aquí se almacenará todo.
¿Y después qué?
Ahora si empezaremos a diseñar nuestra web en el programa de Dw.
Seleccionamos HTML y se nos abrirá la ventana para diseñar el sitio WEB.
¿Qué debo de conocer antes de empezar a diseñar?
En la parte derecha inferior como se muestra encerrado en recuadro rojo, está la aplicación de
ACCIONES, aquí nos muestra la carpeta MI SITIO con todos los elementos que contiene esa
carpeta fotos imágenes 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.
9. MI PRIMER SITIO WEB Lic. Oney David
Begambre Pérez
IE San Juan 2016 Página 9
El siguiente paso es INSERTAR una tabla asi como se muestra en la siguiente imagen damos
clic.
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 aplicación AMBOS y damos aceptar
10. MI PRIMER SITIO WEB Lic. Oney David
Begambre Pérez
IE San Juan 2016 Página 10
Nos parecerá una tabla con CELDAS las cuales podemos mover o hacerlas mas grande
dependiendo del acomodo de lo que contendrá nuestra página WEB.
11. MI PRIMER SITIO WEB Lic. Oney David
Begambre Pérez
IE San Juan 2016 Página 11
¿Cómo voy a trabajar con esta tabla en la distribución 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 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.
12. MI PRIMER SITIO WEB Lic. Oney David
Begambre Pérez
IE San Juan 2016 Página 12
Ya que hicimos este paso agregamos el banner y ajustamos las
celdas al tamaño, como se muestra en la siguiente imagen.
Ejemplo de banner vertical.
13. MI PRIMER SITIO WEB Lic. Oney David
Begambre Pérez
IE San Juan 2016 Página 13
Agregando los botones de forma horizontal. Solamente
seleccionamos los botones y los arrastramos a la celda que queremos que estén.
Después 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 opción de SI y nos aparecerá una
ventana para agregar el nombre de nuestra primer página que la nombraremos INDEX y le
damos únicamente GUARDAR, ya que terminamos este paso se nos abrirá la página del
explorador para visualizar la vista previa de la página, cada vez que demos F12 nos mostrara
que queremos guardar y después nos mostrara la vista preliminar.
14. MI PRIMER SITIO WEB Lic. Oney David
Begambre Pérez
IE San Juan 2016 Página 14
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 opción de ALINEAR y nos aparecerán diferentes opciones para
alinear nuestra imagen y ajustarla a la página 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 opción de ASPECTO, y seleccionamos la opción de EXAMINAR la IMAGEN DE
FONDO, y buscamos la imagen que queremos que aparezca, después le damos clic en la opción
REPETIR si queremos que se repita o no, después ya que seleccionamos le damos ACEPTAR o
APLICAR.
Clic en la opción de PROPIEDADES DE LA PAGINA.
15. MI PRIMER SITIO WEB Lic. Oney David
Begambre Pérez
IE San Juan 2016 Página 15
Muestra de la ventana de las PROPIEDADES DE LA PAGINA
¿Cómo hacer vínculos?
Selecciono el BOTON ya que lo tengo seleccionado, en la barra de PROPIEDADES esta la opción
de VÍNCULO presiono en icono del CÍRCULO y arrastro con una FLECHA que aparece a la página
que deseo vincular con el BOTON, ver la imagen.
Paso 1: selección del botón que queremos vincular.
Paso 2: seleccionar el icono de VINCULO.
Paso 3: Arrastrar con la flecha a la página que queremos vincular.
