COLEGIO DE ESTUDIOS CIENTÍFICOS                    Y TECNOLÓGICOS DEL ESTADO DE                               MEXICO.     ...
MANUAL DREAMWEAVER  1. Vamos a empezar con como hacer una plantilla de inicio  2. Primero abrimos el programa de DREAM WEA...
5. Le damos en nuevo sitio y empezamos a crear nuestro sitio6. Ponemos el nombre de nuestro sitio solo es cuestión de segu...
8. Después de haber seleccionado la carpeta en la que vamos a guardar   nuestros archivos le damos siguiente.9. Y volvemos...
10. Despues de seguir todos los pasos anteriores podemos ver nuestro sitio se    a creado, por lo regular va a salir en la...
12. Como podemos ver nuestra plantilla a sido creada. Pues a si es como      creamos una plantilla de inicio.SECCION      ...
2. Ahora le damos en icono de tablas para crear una tabla.3. Posteriormente le damos clic en el icono y nosotros mismos de...
4. En este caso la aremos de 1x2 para empezar con lo que va a ser nuestro   encabezado.                       Como podemos...
6. Ahora pondremos otra tabla en la parte derecha de la misma manera en   que acomodamos la del encabezado.               ...
8. Ya acomodada la tabla seguiremos insertando mas tablas de manera en   que se vea como una plantilla que podamos usar.9....
10. Después le damos en objetos de plantilla y le damos clic en región editable.11. Y despues nos saldra una ventanita don...
12. Y después le damos en aceptar. Y se pondrá una región.                               Esta es nuestra región editable13...
14. Ahora para terminar solo le daremos color a nuestra platilla. Y veremos    como insertar color al fondo de la página. ...
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 ...
17. Ahora cambiaremos el color de las tablas. El color se ha cambiado. Solo    seleccionando la tabla y nos vamos hacia la...
19. Nos aparecerá una pequeña ventana donde podemos seleccionar la    imagen que gustemos. Y le vamos a dar en aceptar. Y ...
Después de ser guardada podremos ver como es que se ve en internet. A si escomo la podemos visualizar.
Sección 3. Como crear una base de datos.La base de datos se realizara en el programa llamado XAMPP 1. Abrimos XAMPP localh...
2. Ahora nos vamos al administrador.                                    Desde aquí podemos tener acceso al                ...
5. Nos vamos a la parte que dice crear nueva base de datos e introducimos el   nombre de nuestra base de datos            ...
7. Aquí crearemos una tabla para nuestra base de datos.                                          En este espacio pondremos...
9. Ahora lo que se va a hacer es llenar los campos con los aspectos que   nosotros deseemos10. Ahora sele dara en la opcio...
11. Ahora nos vamos a la opcion insertar y comenzamos a llenar nuestra tabla.12. Le damos encontinuar y podremos ver como ...
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 ...
15. Y nos aparecerá otra ventana donde tenemos que llenar para la creación de   un usuario. Ya que se haya echo el llenado...
16. Y por ultimo se le da continuar y aparecerá un mensaje que nos indique que    nuestro usuario ha sido agregado.
Sección 4. Como hacer la pagina de login.phpPerfil, registro, y error.1. Tenemos ya nuestra plantilla con un sitio web ya ...
2. Ahora comenzáremos con la pagina de login aun que vamos haciendo todas   poco apoco. Primero empezaremos insertando un ...
6. Posteriormente nos vamos a la de error donde pondremos usuario o   contraseña erroneos intentar denuevo o registrarse.7...
Podemos observar que el vinculo                                                          esta hecho8. Después nos vamos a ...
9. Ahora nos vamos con la de perfil donde vamos a crear un juego de registros y   nos aparecerá de la siguiente manera.10....
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 ...
13. Bueno pues al tener nuestras paginas ya hechas solo vinculamos y permitimos    el acceso a las páginas que deseemos. y...
Esta parte es la de login donde permite al usuario           conectarse para ver su perfilComo podemos observar el usuario...
Por ultimo podemos ver la pagina de             registro.
Como insertar un efecto java escripVisualizar el código fuente resulta útil para ver cómo se ha estructurado la página,el ...
puedes cometer el error de copiar código JavaScript erróneo, copiarlo de formaincompleta, insertarlo en una zona incorrect...
Daremos clic en hoja de estilos css y nos despegara un panel flotante como elsiguienteY seleccionamos la hoja de estilo de...
de       instalar       se       mostrara        la       siguiente       pantallaDamos clic en tex and image y nos aparec...
Damos clic enpublichs y nosaparecerá          elcódigo en htmlpara la plantilla dela    empresa      ocompañía
Como se muestra a continuaciónYa i listo queda de la siguiente manera de esa manera quedaComo crear una base de datos
Antes que nada primero devimos de aver configurado el sitio después temos quecorre xammpDespués abrimos en intrenet explor...
nosotros daremos clic en base de datos                                         yaque hayamos dado clic
Ponemos el nombre de nuestra base de datosComo lo muestra lo siguiente                                             le
damos clic en registro y listo nos aprecera la suinte pantallaDamos continuar y te aprecera la siguiente pestana
Colocaremos en la flecha que señalad la pociones comonombre,edad,sexoetc,      Ya que este lista le damos grabar y se guar...
Plantilla del proyecto      Configuramos nuetro sitio diseñamos la plantilla como laqueremos y de laforma en como la pidió...
Manual Dreamweaver
Manual Dreamweaver
Próxima SlideShare
Cargando en…5
×

Manual Dreamweaver

512 visualizaciones

Publicado el

0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
512
En SlideShare
0
De insertados
0
Número de insertados
2
Acciones
Compartido
0
Descargas
15
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Manual Dreamweaver

  1. 1. COLEGIO DE ESTUDIOS CIENTÍFICOS Y TECNOLÓGICOS DEL ESTADO DE MEXICO. Plantel Tecámac MANUAL DREAMWEAVERIntegrantes: Aguilar Enciso GingerBetzabe García Chavero Jessica Elizabeth Huerta Vargas Luis Alexis Maya Licea AbigailTécnico en Informática Tercer Semestre 302
  2. 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. 3. 5. Le damos en nuevo sitio y empezamos a crear nuestro sitio6. Ponemos el nombre de nuestro sitio solo es cuestión de seguir los pasos7. Le damos siguiente y seleccionamos en la carpeta que deseamos que sea guardado nuestro sitio
  4. 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. 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.
  6. 6. 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 CONTABLAS. 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.
  7. 7. 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
  8. 8. 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 tabla5. Ahora modificaremos la tabla para que se vea al tamaño de la ventana y se vea como un encabezado.
  9. 9. 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.
  10. 10. 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.
  11. 11. 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
  12. 12. 12. Y después le damos en aceptar. Y se pondrá una región. Esta es nuestra región editable13. 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.
  13. 13. 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 clic15. Y selecionamos si queremos como fondo una imagen o solo el color. Estolo aremos de la siguiente manera.15. Solo daremos color a la página sin imagen y seleccionaremos el color.
  14. 14. 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.
  15. 15. 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.
  16. 16. 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
  17. 17. Después de ser guardada podremos ver como es que se ve en internet. A si escomo la podemos visualizar.
  18. 18. 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.
  19. 19. 2. Ahora nos vamos al administrador. Desde aquí podemos tener acceso al administrador3. Aquí es el administrador de XAMPP y nos vamos a dirigir al administrador.4. Desde aquí comenzaremos a crear la base de datos.
  20. 20. 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
  21. 21. 7. Aquí crearemos una tabla para nuestra base de datos. En este espacio pondremos el nombre de la tabla8. Ahora le damos continuar y podremos ver como es que se ha creado nuestra base de datos.
  22. 22. 9. Ahora lo que se va a hacer es llenar los campos con los aspectos que nosotros deseemos10. Ahora sele dara en la opcion grabar y nuestra tabla sera terminada. Asi es como debio a ver quedado nuestra tabla.
  23. 23. 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
  24. 24. 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.
  25. 25. 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.
  26. 26. 16. Y por ultimo se le da continuar y aparecerá un mensaje que nos indique que nuestro usuario ha sido agregado.
  27. 27. Sección 4. Como hacer la pagina de login.phpPerfil, registro, y error.1. Tenemos ya nuestra plantilla con un sitio web ya listo.
  28. 28. 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.
  29. 29. 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
  30. 30. Podemos observar que el vinculo esta hecho8. Después nos vamos a la pagina de registro insertamos formulario para que quede dela siguiente manera
  31. 31. 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.
  32. 32. 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
  33. 33. 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.
  34. 34. Esta parte es la de login donde permite al usuario conectarse para ver su perfilComo podemos observar el usuario se ha conectado
  35. 35. Por ultimo podemos ver la pagina de registro.
  36. 36. Como insertar un efecto java escripVisualizar 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 utilizapara 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>, yañadir onload="scroller()" dentro de la etiqueta <BODY>, de modo que ésta quedadel siguiente modo:<BODY onload="scroller()">Este código no es demasiado complicado, y podrías casi sin problemas añadirlo atus páginas, para que mostrasen los mensajes que quisieras.Pero en muchas ocasiones puede costar entender el código, sobretodo si no setienen nociones de ningún lenguaje de programación. Si no entiendes el código,
  37. 37. puedes cometer el error de copiar código JavaScript erróneo, copiarlo de formaincompleta, insertarlo en una zona incorrecta del código html, etc.Lo importante que tienes que saber en este momento sobre las funcionesJavaScript 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 damosclic esperamos que se abra y listo ya que teníamos configurado nuestro sitio nosaparecerá este panel
  38. 38. Daremos clic en hoja de estilos css y nos despegara un panel flotante como elsiguienteY seleccionamos la hoja de estilo de nuestra presencia ya automáticamente secreara nuestra hoja de estilos que hayamos escogidoBanner flashAntes que nada debemos descargar el ejecutable de banner flash de ineternetdespués lo demos ejecutar esperamos aquí se instale y listo ya que se termina
  39. 39. de instalar se mostrara la siguiente pantallaDamos clic en tex and image y nos aparecerá el siguiente panel flotanteLo que haya escrito dentro del apantalla lo borramos y colocamos el nombre de laacademia o empresa asignadaYa que hayamos de terminado con lo anterior le damos en publichs bannerY nos aparecerá la siguiente pantalla
  40. 40. Damos clic enpublichs y nosaparecerá elcódigo en htmlpara la plantilla dela empresa ocompañía
  41. 41. Como se muestra a continuaciónYa i listo queda de la siguiente manera de esa manera quedaComo crear una base de datos
  42. 42. Antes que nada primero devimos de aver configurado el sitio después temos quecorre xammpDespués abrimos en intrenet explore xammp y nos plegara la siguiente pantalladaremos clic en php y listo nos mostrara lo siginte
  43. 43. nosotros daremos clic en base de datos yaque hayamos dado clic
  44. 44. Ponemos el nombre de nuestra base de datosComo lo muestra lo siguiente le
  45. 45. damos clic en registro y listo nos aprecera la suinte pantallaDamos continuar y te aprecera la siguiente pestana
  46. 46. Colocaremos en la flecha que señalad la pociones comonombre,edad,sexoetc, Ya que este lista le damos grabar y se guardara automáticamente laimportamos y listo
  47. 47. Plantilla del proyecto Configuramos nuetro sitio diseñamos la plantilla como laqueremos y de laforma en como la pidió el dueño

×