Este documento proporciona instrucciones para crear una plantilla de inicio y una plantilla con tablas en Dreamweaver. También explica cómo crear una base de datos en XAMPP e incluir una página de inicio de sesión, perfil y error. Finalmente, ofrece consejos sobre cómo insertar efectos de JavaScript y crear una hoja de estilos.

1. COLEGIO DE ESTUDIOS CIENTÍFICOS
Y TECNOLÓGICOS DEL ESTADO DE
MEXICO.
Plantel Tecámac
MANUAL DREAMWEAVER
Integrantes:
Aguilar Enciso GingerBetzabe
García Chavero Jessica Elizabeth
Huerta Vargas Luis Alexis
Maya Licea Abigail
Técnico en Informática Tercer Semestre
302

2. MANUAL DREAMWEAVER
1. Vamos a empezar con como hacer una plantilla de inicio
2. Primero abrimos el programa de DREAM WEAVER
3. Le damos en la opción HTML y nos aparecerá nuestra ventana de trabajo
4. Y ahora creamos un nuevo sitio

3. 5. Le damos en nuevo sitio y empezamos a crear nuestro sitio
6. Ponemos el nombre de nuestro sitio solo es cuestión de seguir los pasos
7. Le damos siguiente y seleccionamos en la carpeta que deseamos que sea
guardado nuestro sitio

4. 8. Después de haber seleccionado la carpeta en la que vamos a guardar
nuestros archivos le damos siguiente.
9. Y volvemos a seleccionar la carpeta para guardar nuestros archivos ya
seleccionada le damos siguiente.

5. 10. Despues de seguir todos los pasos anteriores podemos ver nuestro sitio se
a creado, por lo regular va a salir en la parte derecha de nuestra pantalla.
11. Despues de haber creado nuestro sitio vamos a hacer nuestra plantilla de
inicio, donde nos vamos a ir a archivo, despues nuevo y le damos en
paginas de inicio y le damos crear.

7. 12. Como podemos ver nuestra plantilla a sido creada. Pues a si es como
creamos una plantilla de inicio.
SECCION 2. COMO HACER UNA PLANTILLA CON
TABLAS.
1. Primero abrimos DREAMWEAVER como lo hicimos en la primera sección y
creamos nuestro nuevo sitio de la misma manera en que ya lo habíamos
hecho y comenzamos con nuestra plantilla.

8. 2. Ahora le damos en icono de tablas para crear una tabla.
3. Posteriormente le damos clic en el icono y nosotros mismos decidimos de
que tamaño puede ser nuestra tabla. Nos aparecerá una ventanita para la
configuración de la tabla

9. 4. En este caso la aremos de 1x2 para empezar con lo que va a ser nuestro
encabezado.
Como podemos ver se a
insertado la tabla
5. Ahora modificaremos la tabla para que se vea al tamaño de la ventana y se
vea como un encabezado.

10. 6. Ahora pondremos otra tabla en la parte derecha de la misma manera en
que acomodamos la del encabezado.
Como podemos observar la tabla a
sido insertada.
7. Y bueno al igual que la tabla anterior la acomodaremos.

11. 8. Ya acomodada la tabla seguiremos insertando mas tablas de manera en
que se vea como una plantilla que podamos usar.
9. Ahora que ya se ve como una plantilla solo es cuestión de darle color e
insertarle regiones editables. Y para crear una región editable es lo
siguiente: nos vamos a insertar.

12. 10. Después le damos en objetos de plantilla y le damos clic en región editable.
11. Y despues nos saldra una ventanita donde pondremos el nombre de
nuestra region

13. 12. Y después le damos en aceptar. Y se pondrá una región.
Esta es nuestra región editable
13. Des esta manera insertaremos regiones editables en donde nosotros
consideremos que vamos a poner texto. Y como podemos observar se han
insertado las regiones editables.

14. 14. Ahora para terminar solo le daremos color a nuestra platilla. Y veremos
como insertar color al fondo de la página. Y nos vamos a la parte de
propiedades de la página y le damos clic.
Aquí le damos clic
15. Y selecionamos si queremos como fondo una imagen o solo el color. Esto
lo aremos de la siguiente manera.
15. Solo daremos color a la página sin imagen y seleccionaremos el color.

15. 16. Y le damos en aplicar y después en aceptar. para que el color se aplique en
la página. a si es como quedo el color de fondo.

16. 17. Ahora cambiaremos el color de las tablas. El color se ha cambiado. Solo
seleccionando la tabla y nos vamos hacia las propiedades y cambiamos
color.
Es donde sele cambia de
color a las tablas
18. Y
ahora insertaremos una imagen. Nos vamos al icono de imagen para
seleccionar la imagen que gustemos.

17. 19. Nos aparecerá una pequeña ventana donde podemos seleccionar la
imagen que gustemos. Y le vamos a dar en aceptar. Y nuestra imagen se
insertara.
20. Y por ultimo vamos a guardar nuestra plantilla de la siguiente manera. Nos
vamos a archivo y seleccionamos en guarda como plantilla.
Aquí pondremos el nombre
de nuestra plantilla

18. Después de ser guardada podremos ver como es que se ve en internet. A si es
como la podemos visualizar.

19. Sección 3. Como crear una base de datos.
La base de datos se realizara en el programa llamado XAMPP
1. Abrimos XAMPP localhost/myamdmiynphp para empezar con la ceración de
nuestra base de datos. Este el panel de control de XAMPP.

20. 2. Ahora nos vamos al administrador.
Desde aquí podemos tener acceso al
administrador
3. Aquí es el administrador de XAMPP y nos vamos a dirigir al administrador.
4. Desde aquí comenzaremos a crear la base de datos.

21. 5. Nos vamos a la parte que dice crear nueva base de datos e introducimos el
nombre de nuestra base de datos
Como podemos observar hemos insertado
el nombre de nuestra base de datos.
6. Ahora solo le damos en crear y nuestra base de datos se creara. Nos
aparecerá un pequeño mensaje donde nos indica que se ha creado nuestra
base de datos
Como podemos ver ya esta creada nuestra
base de datos

22. 7. Aquí crearemos una tabla para nuestra base de datos.
En este espacio pondremos el nombre de
la tabla
8. Ahora le damos continuar y podremos ver como es que se ha creado nuestra
base de datos.

23. 9. Ahora lo que se va a hacer es llenar los campos con los aspectos que
nosotros deseemos
10. Ahora sele dara en la opcion grabar y nuestra tabla sera terminada. Asi es
como debio a ver quedado nuestra tabla.

24. 11. Ahora nos vamos a la opcion insertar y comenzamos a llenar nuestra tabla.
12. Le damos encontinuar y podremos ver como es que se pudo registrar a una
persona.
Podemos ver que se ha agregado a una persona

25. 13. Y por ultimo creamos un usuario para que todo quede completo. Para esto
nos vamos a página de inicio y damos en la opción de “privilegios” para crear
un nuevo usuario.
14. Vamos a privilegios y le damos en agregar un nuevo usuario.

26. 15. Y nos aparecerá otra ventana donde tenemos que llenar para la creación de
un usuario. Ya que se haya echo el llenado de la siguiente manera en la parte
de abajo encontraremos una opción que diga marcar todas y le damos clic.

27. 16. Y por ultimo se le da continuar y aparecerá un mensaje que nos indique que
nuestro usuario ha sido agregado.

28. Sección 4. Como hacer la pagina de login.php
Perfil, registro, y error.
1. Tenemos ya nuestra plantilla con un sitio web ya listo.

29. 2. Ahora comenzáremos con la pagina de login aun que vamos haciendo todas
poco apoco. Primero empezaremos insertando un formulario.
3. Nos vamos a insertar y elegimos formulario.
4. Ya que hayamos insertado los formularios a uno sele va a poner el nombre de
“correo” y el otro de “password”
5. Posteriormente nos iremos a la opción de común y seleccionamos formulario y
seleccionamos botón y lo insertamos.

30. 6. Posteriormente nos vamos a la de error donde pondremos usuario o
contraseña erroneos intentar denuevo o registrarse.
7. Posteriormente seleccionamos intentar de nuevo y le damos un vínculo para
que nos

31. Podemos observar que el vinculo
esta hecho
8. Después nos vamos a la pagina de registro insertamos formulario para que
quede dela siguiente manera

32. 9. Ahora nos vamos con la de perfil donde vamos a crear un juego de registros y
nos aparecerá de la siguiente manera.
10. Y cada uno de los aspectos que salen en el juego de registro arrastraremos
para que de esa manera aparezca el perfil.

33. 11. Y después le vamos a dar en restringir acceso a pagina. Para no se tenga el
acceso tan fácilmente.
12. Y comenzamos a hacer el llenado delo que se pide al seleccionar restringir
acceso a pagina

34. 13. Bueno pues al tener nuestras paginas ya hechas solo vinculamos y permitimos
el acceso a las páginas que deseemos. y nos quedara de la siguiente manera.

35. Esta parte es la de login donde permite al usuario
conectarse para ver su perfil
Como podemos observar el usuario se ha
conectado

36. Por ultimo podemos ver la pagina de
registro.

37. Como insertar un efecto java escrip
Visualizar el código fuente resulta útil para ver cómo se ha estructurado la página,
el uso de los comportamientos (que aparecen programados en código JavaScript),
y otra serie de rutinas JavaScript.
Si miras el código fuente de esa página podrás ver el código javascript que utiliza
para conseguir ese efecto en la barra de estado. El código es el siguiente:
<SCRIPT language=JavaScript>
<!--
strcnt=0;
mensaje=" CODIGO JAVASCRIPT - CURSO Dreamweaver 8 - AULACLIC ";
functionscroller()
{
window.status=mensaje.substring(strcnt++,mensaje.length+1);
if(strcnt>mensaje.length)
strcnt=0;
setTimeout("scroller()",200);
}
//-->
</SCRIPT>
Dicho código tiene que ir entre las etiquetas <HEAD> y </HEAD>, y
añadir onload="scroller()" dentro de la etiqueta <BODY>, de modo que ésta queda
del siguiente modo:
<BODY onload="scroller()">
Este código no es demasiado complicado, y podrías casi sin problemas añadirlo a
tus páginas, para que mostrasen los mensajes que quisieras.
Pero en muchas ocasiones puede costar entender el código, sobretodo si no se
tienen nociones de ningún lenguaje de programación. Si no entiendes el código,

38. puedes cometer el error de copiar código JavaScript erróneo, copiarlo de forma
incompleta, insertarlo en una zona incorrecta del código html, etc.
Lo importante que tienes que saber en este momento sobre las funciones
JavaScript es que aparecen entre las líneas
<HEAD> ... <SCRIPT language=JavaScript><!--
y
//--></SCRIPT> ... </HEAD>
Como crear una hoja de estilos :
Primero nos vamos a damos clic y seleccionamos damos
clic esperamos que se abra y listo ya que teníamos configurado nuestro sitio nos
aparecerá este panel

39. Daremos clic en hoja de estilos css y nos despegara un panel flotante como el
siguiente
Y seleccionamos la hoja de estilo de nuestra presencia ya automáticamente se
creara nuestra hoja de estilos que hayamos escogido
Banner flash
Antes que nada debemos descargar el ejecutable de banner flash de ineternet
después lo demos ejecutar esperamos aquí se instale y listo ya que se termina

40. de instalar se mostrara la siguiente pantalla
Damos clic en tex and image y nos aparecerá el siguiente panel flotante
Lo que haya escrito dentro del apantalla lo borramos y colocamos el nombre de la
academia o empresa asignada
Ya que hayamos de terminado con lo anterior le damos en publichs banner
Y nos aparecerá la siguiente pantalla

41. Damos clic en
publichs y nos
aparecerá el
código en html
para la plantilla de
la empresa o
compañía

42. Como se muestra a continuación
Ya i listo queda de la siguiente manera de esa manera queda
Como crear una base de datos

43. Antes que nada primero devimos de aver configurado el sitio después temos que
corre xammp
Después abrimos en intrenet explore xammp y nos plegara la siguiente pantalla
daremos clic en php y listo nos mostrara lo siginte

44. nosotros daremos clic en base de datos
ya
que hayamos dado clic

45. Ponemos el nombre de nuestra base de datos
Como lo muestra lo siguiente
le

46. damos clic en registro y listo nos aprecera la suinte pantalla
Damos continuar y te aprecera la siguiente pestana

47. Colocaremos en la flecha que señalad la pociones como
nombre,edad,sexoetc,
Ya que este lista le damos grabar y se guardara automáticamente la
importamos y listo

48. Plantilla del proyecto
Configuramos nuetro sitio diseñamos la plantilla como laqueremos y de la
forma en como la pidió el dueño