SlideShare une entreprise Scribd logo
1  sur  63
Télécharger pour lire hors ligne
Colegio de Estudios Científicos y
                     Tecnológicos de Estado de México
                               Plantel Tecámac



                     “Manual Dreamweaver”



                 Elaboración de Páginas Web
                       Ing. René Domínguez Escalona


Alumno:
                        Arellano Aguirre Cecilia
                     Arvizu Rosas Hugo Humberto
                      Martínez Ensastiga Karina




Técnico(s) en Informática                        Tercer Semestre



                             Grupo 302


   Tecámac de Felipe Villanueva, Edo de México a 7 de Noviembre del 2012
Introducción

Este manual se realizo principalmente para aprender un poco mas sobre
“Dreamweaver”, algunas de sus principales funciones de creación de páginas de
internet. Así se podrá aplicar para diseño de alguna página que se les ocurra.

Se podrá apreciar algunas de nuestras practicas que realizamos durante nuestro
parcial, con explicación del por que salen algunas cosas que tal ves tendrás
dudas.

Pero antes de empezar, que es Dreamweaver?

Dreamweaver es una aplicación en forma de suite (basada en la forma de estudio
de Adobe Flash) que está destinada a la construcción, diseño y edición de sitios,
videos y aplicaciones Web basados en estándares.

A continuación, nuestro índice de algunas cosas que tal ves te interesaran
realizarlas.
Índice



1. Plantilla con páginas de inicio

2. Plantilla con tablas

3. Login.php

4. Error.php

5. Registro.php

6. Perfil.php

7. Editar perfil.php

8. Base de datos My SQL

9. Calculadora

10. Banner intro flash

11. Efecto java script
“1.- Plantilla con páginas de inicio”
Lo primero que tenemos que hacer para poder hacer una plantilla es abrir
dreamweaver como se muestra en la imagen. Después de haber abierto
dreamweaver se dará clic en la opción de sitios de dremaweaver.
Después de que se le dio clic en sitios de dreamweaver aparecerá la
siguiente ventana en la cual es donde se va crear el sitio y se llenara
lo que pide para poder hacer la plantilla.

Por ejemplo:

El nombre del sitio y la dirección.




Cuando se llene debe quedar así:
Enseguida de que se lleno lo primero se va a dar clic en siguiente y se hara el
paso siguiente que es si desea trabajar con la tecnologia de un servidor y se
escojera la opcion de no deseo utilizar una tecnologia de servidor




Después se dará clic en siguiente y se dará clic en donde aparece la imagen de
una carpeta que es en donde se va a escoger en donde se quiere guardar el sitio




Cuando se le de clic en la carpeta aparece lo siguiente:




Cuando aparece se seleccionara en donde se quiere guarda por ejemplo en la
memoria USB como se muestra en la imagen:
Enseguida de que se selecciona en la memoria se va a elaborar una nueva
carpeta con el nombre que tiene el sitio por ejemplo:




Después de que se elaboró la carpeta con el nombre se va a abrir esa
carpeta y adentro de la carpeta se va a poner otra carpeta que diga
imágenes como se muestra en la imagen:




Cuando se acaba de poner la carpeta de imágenes se va a dar clic en
abrir y después en seleccionar y aparecerá lo siguiente:

Cuando aparece la ruta se copiara seleccionando la ruta para
copiarla pueden utilizar ctrl+c




Se dará clic en siguiente y en donde dice en donde se desea
almacenar los archivos se va aponer la misma ruta que tenía la
anterior pegándola con ctrl+v por ejemplo:
Se dará clic en siguiente y aparecerá lo siguiente:




En este caso se elijira la opcion de no. No no activar la desproteccion y proteccion
y se dara clic en siguiente y aparecera lo siguiente:

Por ultimo en la configuracion del sitio se dara clic en completado.




Después de que se le dio clic en completado se escogerá la opción de páginas de
inicio en donde se va a escoger la plantilla que se desee.
Se escogerá una plantilla de las que aparezcan la que les agrade más y se va a
dar clic en crear por ejemplo:




Cuando se le da clic en crear aparecerá guardar como y se guardara con el
nombre que se desee y se va a guardar en la carpeta que se elaboró cundo se
hizo el sitio.
Despues de que se guarda la plantilla aparecera un recuadro que dice si se desea
copiar le daremos en copiar y despues aparecera la plantilla en dreamweaver asi
como se muestra en la imagen:




Después de que se tiene la plantilla se van a cambiar las imágenes para cambiar
las                                                       imágenes se va a dar
clic                                                      sobre la imagen dos
veces                                                     y aparecerá un recuadro
como                                                      el siguiente:
En ese recuadro se le va a dar clic en donde dice “buscar en:” en la pestaña y se
seleccionara en donde tengan las imágenes




Cuando se le de clic en la pestaña aparecerá asi:




Hay es donde se va a elegir en donde se tienen guardas las imágenes en este
caso es en la memoria y se le dará clic en donde está el nombre de la memoria y
se escogerá una imagen y se le dará en aceptar:
En el siguiente recuadro que aparecerá preguntara si se desean copiar los
archivos se dará clic en si




Cuando se allá dado clic aparecerá otra ventana en la cual dice que si desea
copiar los archivos y se dará clic en la opción guardar y automáticamente se
pondrá la imagen




Después de darle clic en guardar automáticamente se puso la imagen y apareció
así:
Si se desea poner otra imagen solo se dara clic en:




Y aparecerá el siguiente recuadro en el cual se va a seleccionar la imagen que se
quiera poner y se le dará clic en aceptar:




Después de que se le de clic en aceptar aparecerá el siguiente recuadro que es en
donde se va a dar clic en si
.

En seguida de que se le dio clic en si y aparecerá otro recuadro en el cual se le
dará clic en guardar




En seguida de que se le allá dado clic en guardar aparecerá un recuadro en donde
se le dará clic en aceptar




Después de que se le dio clic en aceptar automáticamente se verá la imagen.
Después de que ponen las imágenes se edita el nombre del sitio por ejemplo:




Después de que se le cambio el titulo ye l subtitulo se va a poner el texto de
ambas partes que es en donde van a ir los vínculos y en donde van a ir la
información
Para poner a la información se pone región editable en el cuadrito para poder
poner la región editable se tiene que dar clic en insertar, objetos de plantilla y en
donde dice región editable




Después de que le da clic en región editable aparecerá otro recuadro en el cual en
donde dice nombre no se le va a poner nada se va a dejar asi como esta y se le va
a dar clic en aceptar




Enseguida de que se le dio clic en aceptar apareció un recuadro en azul que dice
región editable ay se le dará enter para poder ponerle el tamaño que se desee
Cuando se haya puesto enter de tal manera que quedo aun tamaño que le
hayamos puesto se va a colocar el contenido que se desee del tema que se le
haya puesto




Después para crear otra plantilla se va a dar clic en la pestaña de archivo y en la
opción de nuevo o también para una forma mas rápida se puede poner Ctrl+N
.

Al momento de que se le dio clic en nuevo o se le dion Ctrl+N aparecio la siguiente
pantalla que es en donde se va a escoger paginas deinicio y se seleccionara una
de las plantillas y se le dara clic en la opcion de crear




En la otra plantilla se hará lo mismo que con la primera se colocara información y
se modificara de tal manera que tiene que quedar igual que la primera para
vincular los documentos se tiene que hacer de la siguiente manera:

Primero se tiene que seleccionar el nombre de la primera plantilla y se va a
vincular con la plantilla que se requiera para poderla vincular se tiene que dar clic


en el símbolo        y saldrá una flecha la cual es la que va a vincular la flecha
solo se tiene que arrastrar hasta donde está el nombre de la plantilla.
Para ver la pagina en algun explorador se tiene que dar en el simbolo        y
se va a escoger el explorador con el que se quiere abrir despues de que se
selecciono aparecera asi en el explorador:
Cuando se le dé clic en algún vínculo aparecerá así:




Nota: los vínculos son los que están en rojo.
“2.- Plantilla con tablas”
Si las plantillas que vienen integradas en Dreamweaver no te gustan, puedes
hacer tu propia plantilla que sea de tu agrado,

Algo como esto:




Bueno, para empezar ha hacer esta plantilla, lo primero que debemos de hacer es
crear un sitio (ya visto en el primer tema).

Ya cuando tengamos nuestro sitio creado, lo que tenemos que hacer es coger
HTML:
Aparecerá la página en blanco, y en la parte superior escogeremos la opción de
“Tablas”:
Primero insertaremos la primera tabla y aparecerá una ventana así:




En donde dice “Filas” y “Columnas”, le pondremos 1, lo demás en este caso no
importa.
Nos apareció un pequeño recuadro lo cual ese lo haremos mas largo y mas
ancho, ya que será en donde insertaremos las demás tablas.




Ya que esta, así; empezaremos a insertar tablas a tal que quede como la primera
que les mostré, será una fila con tres columnas, otra con solo una fila y una
columna, la tercera una fila con tres columnas, y la ultima una fila con una
columna.

Las tablas se van repitiendo pero con diferente tamaño.

                       Debe de quedar más o menos así:
Si tienes problemas al insertar las tablas en una fila, no importa, ve creando tabla
por tabla a modo de que quede como en la imagen de arriba.

Como es una plantilla, no te debes de preocupar por el contenido, puedes insertar,
regiones editables, e insertar marcador de imagen:




Para insertar regiones editables debes de seleccionar en donde quieres que se
inserte.
Y para insertar los Marcadores:




Se le dará clic a Marcador de posición de imagen y aparecerá:
Puedes llenar todos los campos, ancho, color, Texto alternativo, pero a veces no
es necesario:
Quedara más o menos así, y si quieres que en la parte de abajo, aparezca la hora
tienes que hacer:




Se le dará clic y aparecerá:
Se le deben de ir, llenando el formato de día, de fecha, de la hora, y activar el
último cuadro de Actualizar automáticamente al guardar.




Nos apareció esto, entonces, damos por echo de que nuestra plantilla esta
terminada.




Para empezarla a utilizar como plantilla, lo único que debemos de hacer, es
guardarla como plantilla:
Aparecerá otra ventana donde se empezara a llenar lo que pide:




Le daremos clic en guardar, y si creían que nada mas se creo el sitio sin sentido,
pues no es verdad ya que si observamos la parte derecha de la pantalla, aparece
nuestra carpeta del sitio que creamos con el nombre de la plantilla que en este
caso fue “Prueba”:
Y listo, ya tenemos una plantilla.
“3. Login.php, 4. Error.php, 5. Registro.php, 6.
                      Perfil.php”
En este apartado las practicas están unidas entre si ya que, nos sirve para crear
una página de internet como una “Red social”

                                          1.-Adiministrar un sitio en dreamweaver:

                                          2.-saldra una ventana emergente que
                                          dice NUEVO (sitio), daremos clic ahí
                                          para empezar a crear nuestro sitio.




3.-seguiremos las instrucciones para
crear nuestro sitio recordando que
deberemos     guardar    en    XAMP
(HTDOCS).

                                         4.-ya que estemos en HTDOCS
                                         crearemos una carpeta con el nombre
                                         que le ahijamos puesto al principio de
                                         nuestro sitio, dentro de esa carpeta
                                         crearemos otro donde pondremos por
                                         nombre IMÁGENES:
5.-ya que ahijamos hecho el paso
anterior deberos comprobar la URL de
nuestro sitio y saldrá algo así como esta
pantalla:



6.-ya que ahijamos comprobado la URL
de nuestro sitio daremos en siguiente
donde nos aparecerá otra pregunta en donde daremos que no siguiente y nos
saldrá algo así como esto donde esta que ya se completo:

                                            7.- este ya será nuestro sitio creado
                                            entonces lo que sigue es darle LISTO:

                                            8.-daremos clic en PAGINAS DE INICIO
                                            PAR COLOCAR UNA PLANTILLA QUE
                                            NO VAMOS A GUARDAR:




9.-Ya que tenemos nuestra plantillan
empezaremos a cambiar algunos datos como
poner REGION EDITABLE, etc.:
10.-Ya que este listo esto entonces daremos clic APLICACIÓN; enseguida en
TIPO DE DOCUMENTO para cambiarlo a PHP si ya esta en ese solo daremos en
aceptar y automáticamente se palomearían las opciones que tiene esa carpeta:




          11.-Enseguida daremos clic
en ARCHIVO para que así demos en
guardar como plantilla así que saldrá
algo como esto; así que tendremos que
guardar y en la siguiente venta que
salga le daremos en COPIAR:
12.-entonces esa plantilla se va a
copiar en TEMPLATES esta carpeta
aparecerá automáticamente;
entonces daremos clic en esa
carpeta para que salga los archivos
que ahí se guardaron si lo notan
cuando abrimos la carpeta
TEMPLATES cambio nuestra
plantilla:

13.-daremos clic en la opción CSS y
saldrá algo que dice así
(mm_entertainment.css) entonces
daremos clic en ADJUNTAR HOJA
DE ESTILOS, entonces saldrá una
ventana así; en donde daremos en
examinar saldrá otra ventana donde
ya se encuentra este nombre,
(mm_entertainment.css) y daremos
en aceptar, y entonces asi quedara la
plantilla:
17.-asi que nos iremos a archivo y
                                            daremos clic NUEVO para que así nos
                                            salga una venta en donde daremos
                                            clic en PLANTILLAS para colocar
                                            nuestra plantilla: entonces así
                                            quedaría en donde solo podamos
                                            cambiar o poner en region editable
                                            que colocamos:



18.-entonces vamos a guardar dando ctrl+s
para guardarla: ya una vez guardada se
pondrá en donde están nuestras demás
carpetas y archivos.

19.-entonces empezaremos a crear el
PERFIL; daremos clic en INSERTAR
(formulario(campo de texto) y saldrá una
venta como la siguiente así que en ella
colocáremos en nombre que seria EMAIL,
así repetiremos este paso 1 vez mas que llevara por nombre PASSWORD:

                                              20.-asi quedara ya con email y
                                              password ya que tenemos esto,
                                              daremos clic en recuadro que sale
                                              para que así cambiemos de nombre
                                              TEXTFIELD A EMAIL:
21.-en etas dos imágenes ya
                                               están cambiados el TEXFIELD y
                                               TEXTFIELD2 A EMAIL Y
                                               PASSWORD:




22.-Enseguida colocaremos un botón que diga
ENTRAR este lo sacaremos de la barra de
herramientas donde dice COMUN (formularios)
entonces en la barra se colocara un como
rectángulo blanco daremos clic y saldrá otra
venta como la que salió para poner email y
password:
23.-Ahora crearemos nuestra conexión para ello nos vamos a ir a APLICACIÓN
(base de datos clic en la cruz y dirá myconexión) daremos clic y saldrá otra venta
donde colocaremos lo
que se nos indica de la
siguiente manera
(recordando que
necesitamos tener
nuestra base de datos
en local host si no la
abrirá)




             Crear error:

24.-en   la   region    editable le
colocaremos los siguiente “USUARIO
O CONTRASEÑA INCORRECTOS”
“INTENTE DE NUEVO o REGISTRSE
25.-Ahora vamos a subrayar INTENTE DE NUEVO para irnos a la parte inferior en
donde dice VINCULO (dar clic
en la carpetita); enseguida va
salir una ventana donde están
nuestras           TEMPALTES
(daremos clic en TEMPLATES
para que así enseguida le
demos clic en INDEX que será
ala pagina que nos mandara en
caso de ERROR:

26.-aremos los mismo con la
parte que dice REGISTRATE,
esta la vamos a mandar a
REGISTRO (se darán cuenta
que ambos tanto como INTENTE DE NUEVO Y REGISTRESE se pondrán de
color rojo y se subrayaran)



                                              27.-ahora iremos con PERFIL: le
                                              daremos clic en APLICACIONES
                                              EN EL APARTADO (vinculaciones)
                                              después clic en JUEGO DE
                                              REGISTRO (CONSULTA); asi que
                                              saldrá    una    venta   donde




colocaremos el nombre de nuestra base de
datos y en donde dice ninguno le
pondremos MYCONEXION así que saldrá la
tabla que le colocamos así que daremos clic
en filtro le pondremos EMAIL ahí mismo
colocaremos VARIABLE DE SESIÓN en el
espacio       blanco     le     pondremos
MM_Username y le daremos en aceptar.
28.- entonces aparecera de lado izquierdo los campos que le colocamso a
nuestra base de datos entonces iremos arrastrando asi la plantilla PERRFIL:
emseguida nos iremos otra vez asi donde esta INDEX:




29.-asi que daremos clic en comun para que cambien a APLICACIÓN (que este
paso lo isimos igual en el paso anterior)
y luego de ahí AUNTENTICACION DE
USUARIOS (conectar usuario) daremos
clic y saldra algo asi en la pantalla: en
donde      le    pondremos     otra    vez
MYCONEXION,           TABLA:USUARIOS
ETC; en donde dice si es correcta ir a;
ahí vamos a darle en examinar para
que nos lo mande a PERFIL y donde
dice si falla la conexión ir a examinar y
ponerle ERROR,aceptar y como se
                                    subrayara lsa letra y los recuadros de el index.
30.- nos iremos a ERROR donde le
                                          daremos     clic  nuevamnete     en
                                          AUNTENTICACION DE USUARIOS
                                          (registrar acceso a pagina) y nos
                                          saldra ota ventana; entonces darmos
                                          clic en NOMBRE DE USUARIO Y

CONTRASEÑA clic en examinar paraq ue
lo mandemos a INDEX y aceptar y nos
iremos otra vez a PERFIL en donde
repetiremos el mismo paso pero
mandandolo igual a INDEX:




                                      31.- Aremos a registro daremos clic en
                                      VINCULACIONES              después        en
                                      INSERTAR         objetos    de    aplicación
                                      (insertar registro) (asistente de formulario


de inserción de registros) para entonces
saldra FORMULARIO DE INSERCION
DE REGISTRO donde le pondremos en
TRAS INSERTAR IR A INDEX daremos
aceptar y aparecera un boton debajo de
los datos que tiene PERFIL que dira
INSERTAR REGISTRO daremos clic
ahí para cabiar de INSERTAR
REGISTRO a REGISTRARSE. Nos
iremos a donde tenemos XAMP abierto
para checar que nuestro pagina salga tendremos que poner la URL de nuestro
INDEX para que sea la primera que habra y de ahí nuestra base de datos y listo
asi es como creamos nuestro PERFIL,ERROR,REGISTRO.
“7.- Editar Perfil.php”
Para editar perfil ya se debe de tener un sitio elaborado con lo que es el registro
para poder hacer un perfil se tiene que hacer lo siguiente:

Primero crear una plantilla y ponerle nombre de perfil




Después de que se crea la plantilla en donde se va a poner el perfil se hace lo
siguiente:




A la plantilla donde va el perfil se va poner región editable así como se muestra en
la imagen de arriba después de que se puso la región editable se va a poner lo
siguiente:
Le vamos a dar clic en la pestaña de vinculaciones y en la pestaña que esta de
lado izquierdo como se muestra en la imagen y se va a dar clic en juego de
registros (consulta) y aparecerá un recuadro como el siguiente:




En el cuadro que apareció que fue el de arriba le vamos aponer:
En el cuadro que apareció se va a poner lo siguiente:




Y se dara clic en aceptar y de lado izquierdo aparecerá lo siguiente:
Después en la plantilla en la región editable se va a poner lo siguiente para poder
poner lo del nombre solo se arrastra donde dice nombre de la izquierdo a si el lado
en donde está la región editable y quedara asi:

Primero el nombre, apeidos, edad, ocupación, teléfono, hobbie, sexo y foto.

Después se da clic en donde dice formulario se va a cambiar por aplicación y
después se va a dar clic en autenticación de usuarios:
Después va a aparecer un recuadro como el siguiente:




Se le va a dar clic en examinar y se vera otra ventana como la siguiente:
Se le dara clic en index.php se le dara aceptar y en el primer recuadro igual en
aceptar.

                   “8.- Base de datos MySQL”
PASOS A SEGUIR:

1.-ABRIR XAMP Y PONER STAR EN EL SERVIDOR

      APACHE Y MYSQL.



                                     2.-ABRIR  INTERNET    Y    COLOCAR
                                     LOCALHOST EN DODNDE VAN LAS URL
                                     DE LAS PAGINAS, ENSEGUIDA SE ABRIRA
                                     XAMP.




3.-DAR CLIC IDIOMA ESPAÑOL, DESPUES DAR
CLIC EN PHPMYADMIN:




                                            4.-TE AMDARA A ESTA PAGINA
                                            DONDE COLOCAR EL NOMBRE DE
                                            TU BASE DE DATOS.
5.-en la cual darás crear para crear

                             Una tabla en la base de datos del nombre que
                             le colocaste:

                             6.-daremos continuar para que salgan los
                             campos y puedas colocarle los datos que
                             desees por
                             ejemplo el
                             email, teléfono,
                             etc.

7.-a donde dice tipo en esa misma donde
salieron los campos vamos a colocar VACHAR
en todos, deberemos colocar también valores
                                       así:



                                        8.-e igual vamos a colocar en el
                                        apartado ÍNDICE SOLO EN EMAIL
                                        PRIMARY y en LA FOTO en el
                                        apartado donde dice NULO VAMOS
                                        A DAR CLIC EN EL CUADRITO PARA
                                        QUE SE PALOMIE:
9.- al acabar de hacer los pasos
                                         anteriores daremos clic en grabar:



                                         10.-al dar grabar deber salir una
                                         página como esta y daremos clic en
                                         INSERTAR, y nos saldrá algo así:




11.-en donde comenzaremos a llenar
los apartados que solicita que de acho
son los que nosotros colocamos en los
campos de los pasos anteriores y ya
cavados de llenar daremos clic en
continuar:



                                         12.- continuación saldrá esta
                                         página en donde aparece un
                                         recuadro de color verde que dice:
                                         1FILAS(S) FUERON INSERTADAS.
13.-Enseguida daremos clic en donde dice contactos que se encuentra de
lado izquierdo, en mi caso este depende del nombre que le des a tu base
de datos: Y nos mandara a esta página:

                                       14.- ya realizado esto daremos clic
                                      en DONDE ESTA COMO ICONO CON
                                      UNA CASITA IGUAL DE LADO
                                      IZQUIERDO que dice pagina inicio,
                                      para que así demos clic en
                                      PRIVILEGIOS:




15.- ya que ahigamos dado clic en
este apartado saldrá algo así, y
daremos clic en agregar usuario:
16.-ya que ahigamos
dado clic en agregar
un nuevo usuario
saldrá en pantalla
algo así en donde
llenaremos los datos
que se pide a donde
dice        SERVIDOR
colocaremos LOCAL y
también deberemos
marcar todos en el
apartado de abajo,
enseguida daremos clic en CONTINUAR ya con los datos quedaría así:



                                        17.-enseguida daremos clic en
                                        privilegios otra vez para que se
                                        den cuenta que ya está sus datos
                                        ahí:
“9.-Calculadora”
Para hacer la calculadora en dreamweaver se tiene que hacer un sitio dando clic
en sitios de dreamweaver.




Después de que se le da clic en sitios de dreamweaver aparecerá la siguiente
ventana que es en donde se va a poner la configuración del sitio se va a poner el
nombre del sitio y se llenara lo que pide:
Después de llenar lo primero se va a dar clic en siguiente y se le pondra en la
opción de si deseo utilizar una tecnología de servidor y en este caso se pondra la
de php My SQL




Se dará en donde dice siguiente y se pondrá en la primera opción y se dará clic en
la carpeta que esta de lado derecho y se elaborara una carpeta con el nombre del
sitio en la memoria o en donde se quiera guardar la carpeta.




Después de que se da clic en la imagen de la carpeta va a aparecer otra ventana
como la siguiente que es en donde se va a colocar una nueva carpeta en la cual
se va a poner el nombre del sitio y se adentró de esa carpeta se va a crear otra la
cual se va a llamar imágenes que es en donde se van a guardar todas las
imágenes que se coloquen cuando se hayan puesto las 2 carpetas se va a dar clic
en seleccionar y se va a dar clic en guardar y automáticamente se guarda nuestra
carpeta.
Depues se prosigue con el siguiente paso que es copiar la ruta con la que quedo
guardada la carpeta y se dara clic en siguiente




Después de que se puso la ruta en el recuadro se va a dar clic en siguiente y se
va poner en el otro recuadro el nombre de la carpeta así como se muestra en la
imagen




Se dara clic en comprobar URL y tendra que salir un recuadro como el siguiente
En donde se le dará aceptar y se dará clic en siguiente en el siguiente recuadro se
pondrá la opción no así como esta en la imagen




Se dará clic en siguiente y aparecerá lo siguiente y se dará clic en completado




Y así es como se obtiene el sitio para poder hacer la calculadora ahora solo
tenemos que escoger una plantilla la plantilla se escogerá en donde dice páginas
de inicio al dar clic en una de las plantillas y que sea con la que se va a trabajar
solo se va a dar clic en crear
Después de hacer clic en crear aparecerá una ventana que pide con que nombre
se va a guardar la plantilla y se le pondrá el nombre que se desee




Después de que se guarda aparece otra ventana en la cual te pregunta si deseas
copiar las imágenes y se le dará clic en copiar




Después de que se le da clic en copiar aparecerá la plantilla a la plantilla se le va a
quitar todo lo que tenga por ejemplo asi debe de quedar
A la plantilla se le va a cambiar el titulo por el de calculadora y se le van a poner
campos de texto los campos de texto se ponen así se le da clic en la pestaña de
insertar formulario y dar clic en campo de texto y aparecerá un recuadro como el
siguiente:

En donde dice etiqueta se va a poner número 1 y se le dará clic en aceptar




Después se pondrá otro campo de texto y se pondrá número 2 y la plantilla
quedara de la siguiente forma:
Después de haber puesto lo que son los campos de texto se va a crear otra
plantilla que va a ser igual que la primera pero sin los campos de texto porque los
campos de texto van con otros nombres.

Cuando es creada la segunda plantilla se pone 4 campos de texto que sería uno para suma, resta,
división y multiplicación y quedaría de la siguiente forma.




Se pone el código que va hacer que se ponga los resultados de los números que
se pongan por ejemplo este es el código
Después solo se vincula la primera plantilla con la segunda y asi es como se hace
la calculadora.

                      “10. Banner intro flash”



                                            1.-abrir el programa:

                                            2.-empezar a crearlo para entonces
                                            le darnos clic en NAVLAYOUT (en
                                            donde le podremos cambiar el ancho
                                            el largo, el color etc.:

                                            3.-entonces vamos abrir la siguiente
                                            que se llama NAVBACKGROUND
                                            (en donde podremos poner la
                                            combinación de colores del fondo,
                                            centrarlo etc.)

                                            4.-El otro que sigue se llama
                                            NAVBGEFFECT    (en donde le
                                            podemos poner el efecto que
deseamos como hojas, luces, estrellas, esferas etc.)




                                        5.-emseguida vamos abrir el siguiente
                                        Apartado que tenemos e llama NAVTEXT
                                        (en el cual le podremos cambiar el texto
                                        que tiene por el que deseemos e igual
                                        mente le podremos poner algún efecto el
                                        texto)

                             6.-el siguiente apartado QUE SE LLAMA
                             NAVPLUBISH donde daremos clic nos
                             deberá aparecer como una url para
                             colocarla en nuestra pagina web creada
                             en dreamweaver así que así quedara ya
en dreamweaver (LO QUE APARCE DE COLOR GRIS SERIA NUESTRO
BANNER)
Para hacer un INTRO EN FLASH seguiremos los pasos anteriores solo
modificaremos a como nosotros queramos que quede:




                 “11. Efecto java script”



                           1.- Empezaremos por buscar un código Java
                           Script para descargar en este caso yo
                           descargare un CONTADOR DE VISITAS:




                            2.-entonces este sería el código para
                            agregarlo a nuestra página:
3.-este seria nuestro código para colocar
en nuestra página:




Por ejemplo coloque en la página me
solicito mi nombre para que cada vez que
yo habrá la página se coloque cuantas
veces la he visitado:

Contenu connexe

Tendances

¿Cómo crear tablas en Word?.
¿Cómo crear  tablas en Word?.¿Cómo crear  tablas en Word?.
¿Cómo crear tablas en Word?.
Ticdys
 
Examen mensual iv bi computacion secundaria
Examen mensual iv bi computacion secundariaExamen mensual iv bi computacion secundaria
Examen mensual iv bi computacion secundaria
CARLOS ROSALES
 
Bitácora electrónica "Access" - soporte técnico
Bitácora electrónica "Access" - soporte técnicoBitácora electrónica "Access" - soporte técnico
Bitácora electrónica "Access" - soporte técnico
Celia Lopez Diaz
 
Examen teorico de power point
Examen teorico de power pointExamen teorico de power point
Examen teorico de power point
Univ. Queen
 
Actividades para Word
Actividades para WordActividades para Word
Actividades para Word
diegofer9431
 

Tendances (20)

Examen de corel draw
Examen de corel drawExamen de corel draw
Examen de corel draw
 
Syllabus corel draw
Syllabus corel drawSyllabus corel draw
Syllabus corel draw
 
Infokids 2 Herramientas Informáticas - Fichas de Aprendizaje 2014
Infokids 2 Herramientas Informáticas - Fichas de Aprendizaje 2014Infokids 2 Herramientas Informáticas - Fichas de Aprendizaje 2014
Infokids 2 Herramientas Informáticas - Fichas de Aprendizaje 2014
 
Windows 1 practica 03 - principales accesorios de windows
Windows 1   practica 03 - principales accesorios de windowsWindows 1   practica 03 - principales accesorios de windows
Windows 1 practica 03 - principales accesorios de windows
 
¿Cómo crear tablas en Word?.
¿Cómo crear  tablas en Word?.¿Cómo crear  tablas en Word?.
¿Cómo crear tablas en Word?.
 
Banco de preguntas access 2007
Banco de preguntas access 2007Banco de preguntas access 2007
Banco de preguntas access 2007
 
Practica Nº05 Corel Draw
Practica Nº05 Corel DrawPractica Nº05 Corel Draw
Practica Nº05 Corel Draw
 
Examen mensual iv bi computacion secundaria
Examen mensual iv bi computacion secundariaExamen mensual iv bi computacion secundaria
Examen mensual iv bi computacion secundaria
 
Ejercicios word
Ejercicios wordEjercicios word
Ejercicios word
 
Actividades power point
Actividades power pointActividades power point
Actividades power point
 
1er grado computación
1er grado computación1er grado computación
1er grado computación
 
Manual+de+corel+12.0+v2
Manual+de+corel+12.0+v2Manual+de+corel+12.0+v2
Manual+de+corel+12.0+v2
 
Bitácora electrónica "Access" - soporte técnico
Bitácora electrónica "Access" - soporte técnicoBitácora electrónica "Access" - soporte técnico
Bitácora electrónica "Access" - soporte técnico
 
25 05-2011 autoformas word 2010
25 05-2011 autoformas   word 201025 05-2011 autoformas   word 2010
25 05-2011 autoformas word 2010
 
Ejercicios Corel Draw basico
Ejercicios Corel Draw basicoEjercicios Corel Draw basico
Ejercicios Corel Draw basico
 
Cuadernillo corel draw para imprimir 2017
Cuadernillo corel draw para imprimir 2017Cuadernillo corel draw para imprimir 2017
Cuadernillo corel draw para imprimir 2017
 
Examen teorico de power point
Examen teorico de power pointExamen teorico de power point
Examen teorico de power point
 
Actividades para Word
Actividades para WordActividades para Word
Actividades para Word
 
Word ejercicios de tablas No. 1
Word ejercicios de tablas No. 1Word ejercicios de tablas No. 1
Word ejercicios de tablas No. 1
 
EJERCICIOS DE PAINT
EJERCICIOS DE PAINTEJERCICIOS DE PAINT
EJERCICIOS DE PAINT
 

En vedette

Prácticas_Dreamweaver
Prácticas_DreamweaverPrácticas_Dreamweaver
Prácticas_Dreamweaver
SUPLANETA
 
Manual dreamweaver 8 spanish
Manual dreamweaver 8 spanishManual dreamweaver 8 spanish
Manual dreamweaver 8 spanish
betosix1
 

En vedette (20)

Prácticas_Dreamweaver
Prácticas_DreamweaverPrácticas_Dreamweaver
Prácticas_Dreamweaver
 
Curso Dreamweaver CS6
Curso Dreamweaver CS6Curso Dreamweaver CS6
Curso Dreamweaver CS6
 
Manual dreamweaver 8 spanish
Manual dreamweaver 8 spanishManual dreamweaver 8 spanish
Manual dreamweaver 8 spanish
 
Practicas de-dreamweaver
Practicas de-dreamweaverPracticas de-dreamweaver
Practicas de-dreamweaver
 
Introducción a Dreamweaver cs5
Introducción a Dreamweaver cs5Introducción a Dreamweaver cs5
Introducción a Dreamweaver cs5
 
Guia de trabajo no.1
Guia de trabajo no.1Guia de trabajo no.1
Guia de trabajo no.1
 
Guia de trabajo no.2
Guia de trabajo no.2Guia de trabajo no.2
Guia de trabajo no.2
 
Manual de DreamWeaver
Manual de DreamWeaverManual de DreamWeaver
Manual de DreamWeaver
 
Procedimientos para crear una página web con dream weaver
Procedimientos para crear una página web con dream weaverProcedimientos para crear una página web con dream weaver
Procedimientos para crear una página web con dream weaver
 
Taller de Dreamweaver 8
Taller de Dreamweaver 8Taller de Dreamweaver 8
Taller de Dreamweaver 8
 
Illustrator - Fichas de Aprendizaje 2014
Illustrator - Fichas de Aprendizaje 2014Illustrator - Fichas de Aprendizaje 2014
Illustrator - Fichas de Aprendizaje 2014
 
DREAMWEAVER
DREAMWEAVERDREAMWEAVER
DREAMWEAVER
 
Manual paginas web
Manual paginas webManual paginas web
Manual paginas web
 
Photoshop - Fichas de Aprendizaje 2014
Photoshop - Fichas de Aprendizaje 2014Photoshop - Fichas de Aprendizaje 2014
Photoshop - Fichas de Aprendizaje 2014
 
Flash - Fichas de Aprendizaje 2014
Flash - Fichas de Aprendizaje 2014Flash - Fichas de Aprendizaje 2014
Flash - Fichas de Aprendizaje 2014
 
Trabajando con sesiones en PHP
Trabajando con sesiones en PHPTrabajando con sesiones en PHP
Trabajando con sesiones en PHP
 
Como configurar una plantilla en dreamweaver 8
Como configurar una plantilla en dreamweaver 8Como configurar una plantilla en dreamweaver 8
Como configurar una plantilla en dreamweaver 8
 
Dreamweaver manual de instalación
Dreamweaver manual de instalaciónDreamweaver manual de instalación
Dreamweaver manual de instalación
 
Manual dreamweaver cs5
Manual dreamweaver cs5Manual dreamweaver cs5
Manual dreamweaver cs5
 
Edición conInDesign CS6
Edición conInDesign CS6Edición conInDesign CS6
Edición conInDesign CS6
 

Similaire à Manual de practicas de dreamweaver

Tuto pag web_gimp
Tuto pag web_gimpTuto pag web_gimp
Tuto pag web_gimp
Innove Host
 
Massss informatica
Massss informaticaMassss informatica
Massss informatica
KarenRostand
 
Paso a paso del programa Dreamweaver
Paso a paso del programa DreamweaverPaso a paso del programa Dreamweaver
Paso a paso del programa Dreamweaver
Lulyta Reina
 
paso a paso del programa Dreamweaver
paso a paso del programa Dreamweaverpaso a paso del programa Dreamweaver
paso a paso del programa Dreamweaver
lulytato
 
Manual dreamweaver
Manual  dreamweaverManual  dreamweaver
Manual dreamweaver
bettzyy
 

Similaire à Manual de practicas de dreamweaver (20)

8 ejercicio 8
8 ejercicio 88 ejercicio 8
8 ejercicio 8
 
Adjuntos fichero 143604
Adjuntos fichero 143604Adjuntos fichero 143604
Adjuntos fichero 143604
 
Ejercicios
EjerciciosEjercicios
Ejercicios
 
Como crear una pagina web en word
Como crear una pagina web en wordComo crear una pagina web en word
Como crear una pagina web en word
 
Planificación digital
Planificación digitalPlanificación digital
Planificación digital
 
Como Crear Paginas Web
Como Crear Paginas WebComo Crear Paginas Web
Como Crear Paginas Web
 
Tuto pag web_gimp
Tuto pag web_gimpTuto pag web_gimp
Tuto pag web_gimp
 
Tuto pag web_gimp
Tuto pag web_gimpTuto pag web_gimp
Tuto pag web_gimp
 
Massss informatica
Massss informaticaMassss informatica
Massss informatica
 
Paso a paso del programa Dreamweaver
Paso a paso del programa DreamweaverPaso a paso del programa Dreamweaver
Paso a paso del programa Dreamweaver
 
paso a paso del programa Dreamweaver
paso a paso del programa Dreamweaverpaso a paso del programa Dreamweaver
paso a paso del programa Dreamweaver
 
Imagen
ImagenImagen
Imagen
 
Inicio en Prezi
Inicio en PreziInicio en Prezi
Inicio en Prezi
 
UTPL - Curso De Dreamweave
UTPL - Curso De DreamweaveUTPL - Curso De Dreamweave
UTPL - Curso De Dreamweave
 
Sitio web 11d
Sitio web 11dSitio web 11d
Sitio web 11d
 
Material didáctico de web 2.0 tarea 3
Material didáctico de web 2.0 tarea 3Material didáctico de web 2.0 tarea 3
Material didáctico de web 2.0 tarea 3
 
Cómo crear un sitio web en WIX
Cómo crear un sitio web en WIXCómo crear un sitio web en WIX
Cómo crear un sitio web en WIX
 
Manual dreamweaver
Manual  dreamweaverManual  dreamweaver
Manual dreamweaver
 
Guia 1 De Dreamweaver
Guia 1 De DreamweaverGuia 1 De Dreamweaver
Guia 1 De Dreamweaver
 
Culturaemprendedora manualwq 1.8
Culturaemprendedora manualwq 1.8Culturaemprendedora manualwq 1.8
Culturaemprendedora manualwq 1.8
 

Plus de daaaaaaaaaaa Gutiierriitos (6)

Ventana de pseint
Ventana de pseintVentana de pseint
Ventana de pseint
 
Manual de practicas photoshop
Manual de practicas photoshopManual de practicas photoshop
Manual de practicas photoshop
 
3. herramientas de photoshop cs4
3. herramientas de photoshop cs43. herramientas de photoshop cs4
3. herramientas de photoshop cs4
 
Pantalla de photoshop cs4
Pantalla de photoshop cs4Pantalla de photoshop cs4
Pantalla de photoshop cs4
 
Mini introopengl
Mini introopenglMini introopengl
Mini introopengl
 
Manual opengl
Manual openglManual opengl
Manual opengl
 

Manual de practicas de dreamweaver

  • 1. Colegio de Estudios Científicos y Tecnológicos de Estado de México Plantel Tecámac “Manual Dreamweaver” Elaboración de Páginas Web Ing. René Domínguez Escalona Alumno: Arellano Aguirre Cecilia Arvizu Rosas Hugo Humberto Martínez Ensastiga Karina Técnico(s) en Informática Tercer Semestre Grupo 302 Tecámac de Felipe Villanueva, Edo de México a 7 de Noviembre del 2012
  • 2. Introducción Este manual se realizo principalmente para aprender un poco mas sobre “Dreamweaver”, algunas de sus principales funciones de creación de páginas de internet. Así se podrá aplicar para diseño de alguna página que se les ocurra. Se podrá apreciar algunas de nuestras practicas que realizamos durante nuestro parcial, con explicación del por que salen algunas cosas que tal ves tendrás dudas. Pero antes de empezar, que es Dreamweaver? Dreamweaver es una aplicación en forma de suite (basada en la forma de estudio de Adobe Flash) que está destinada a la construcción, diseño y edición de sitios, videos y aplicaciones Web basados en estándares. A continuación, nuestro índice de algunas cosas que tal ves te interesaran realizarlas.
  • 3. Índice 1. Plantilla con páginas de inicio 2. Plantilla con tablas 3. Login.php 4. Error.php 5. Registro.php 6. Perfil.php 7. Editar perfil.php 8. Base de datos My SQL 9. Calculadora 10. Banner intro flash 11. Efecto java script
  • 4. “1.- Plantilla con páginas de inicio” Lo primero que tenemos que hacer para poder hacer una plantilla es abrir dreamweaver como se muestra en la imagen. Después de haber abierto dreamweaver se dará clic en la opción de sitios de dremaweaver.
  • 5. Después de que se le dio clic en sitios de dreamweaver aparecerá la siguiente ventana en la cual es donde se va crear el sitio y se llenara lo que pide para poder hacer la plantilla. Por ejemplo: El nombre del sitio y la dirección. Cuando se llene debe quedar así:
  • 6. Enseguida de que se lleno lo primero se va a dar clic en siguiente y se hara el paso siguiente que es si desea trabajar con la tecnologia de un servidor y se escojera la opcion de no deseo utilizar una tecnologia de servidor Después se dará clic en siguiente y se dará clic en donde aparece la imagen de una carpeta que es en donde se va a escoger en donde se quiere guardar el sitio Cuando se le de clic en la carpeta aparece lo siguiente: Cuando aparece se seleccionara en donde se quiere guarda por ejemplo en la memoria USB como se muestra en la imagen:
  • 7. Enseguida de que se selecciona en la memoria se va a elaborar una nueva carpeta con el nombre que tiene el sitio por ejemplo: Después de que se elaboró la carpeta con el nombre se va a abrir esa carpeta y adentro de la carpeta se va a poner otra carpeta que diga
  • 8. imágenes como se muestra en la imagen: Cuando se acaba de poner la carpeta de imágenes se va a dar clic en abrir y después en seleccionar y aparecerá lo siguiente: Cuando aparece la ruta se copiara seleccionando la ruta para copiarla pueden utilizar ctrl+c Se dará clic en siguiente y en donde dice en donde se desea almacenar los archivos se va aponer la misma ruta que tenía la anterior pegándola con ctrl+v por ejemplo:
  • 9. Se dará clic en siguiente y aparecerá lo siguiente: En este caso se elijira la opcion de no. No no activar la desproteccion y proteccion y se dara clic en siguiente y aparecera lo siguiente: Por ultimo en la configuracion del sitio se dara clic en completado. Después de que se le dio clic en completado se escogerá la opción de páginas de inicio en donde se va a escoger la plantilla que se desee.
  • 10. Se escogerá una plantilla de las que aparezcan la que les agrade más y se va a dar clic en crear por ejemplo: Cuando se le da clic en crear aparecerá guardar como y se guardara con el nombre que se desee y se va a guardar en la carpeta que se elaboró cundo se hizo el sitio.
  • 11. Despues de que se guarda la plantilla aparecera un recuadro que dice si se desea copiar le daremos en copiar y despues aparecera la plantilla en dreamweaver asi como se muestra en la imagen: Después de que se tiene la plantilla se van a cambiar las imágenes para cambiar las imágenes se va a dar clic sobre la imagen dos veces y aparecerá un recuadro como el siguiente:
  • 12. En ese recuadro se le va a dar clic en donde dice “buscar en:” en la pestaña y se seleccionara en donde tengan las imágenes Cuando se le de clic en la pestaña aparecerá asi: Hay es donde se va a elegir en donde se tienen guardas las imágenes en este caso es en la memoria y se le dará clic en donde está el nombre de la memoria y se escogerá una imagen y se le dará en aceptar:
  • 13. En el siguiente recuadro que aparecerá preguntara si se desean copiar los archivos se dará clic en si Cuando se allá dado clic aparecerá otra ventana en la cual dice que si desea copiar los archivos y se dará clic en la opción guardar y automáticamente se pondrá la imagen Después de darle clic en guardar automáticamente se puso la imagen y apareció así:
  • 14. Si se desea poner otra imagen solo se dara clic en: Y aparecerá el siguiente recuadro en el cual se va a seleccionar la imagen que se quiera poner y se le dará clic en aceptar: Después de que se le de clic en aceptar aparecerá el siguiente recuadro que es en donde se va a dar clic en si
  • 15. . En seguida de que se le dio clic en si y aparecerá otro recuadro en el cual se le dará clic en guardar En seguida de que se le allá dado clic en guardar aparecerá un recuadro en donde se le dará clic en aceptar Después de que se le dio clic en aceptar automáticamente se verá la imagen.
  • 16. Después de que ponen las imágenes se edita el nombre del sitio por ejemplo: Después de que se le cambio el titulo ye l subtitulo se va a poner el texto de ambas partes que es en donde van a ir los vínculos y en donde van a ir la información
  • 17. Para poner a la información se pone región editable en el cuadrito para poder poner la región editable se tiene que dar clic en insertar, objetos de plantilla y en donde dice región editable Después de que le da clic en región editable aparecerá otro recuadro en el cual en donde dice nombre no se le va a poner nada se va a dejar asi como esta y se le va a dar clic en aceptar Enseguida de que se le dio clic en aceptar apareció un recuadro en azul que dice región editable ay se le dará enter para poder ponerle el tamaño que se desee
  • 18. Cuando se haya puesto enter de tal manera que quedo aun tamaño que le hayamos puesto se va a colocar el contenido que se desee del tema que se le haya puesto Después para crear otra plantilla se va a dar clic en la pestaña de archivo y en la opción de nuevo o también para una forma mas rápida se puede poner Ctrl+N
  • 19. . Al momento de que se le dio clic en nuevo o se le dion Ctrl+N aparecio la siguiente pantalla que es en donde se va a escoger paginas deinicio y se seleccionara una de las plantillas y se le dara clic en la opcion de crear En la otra plantilla se hará lo mismo que con la primera se colocara información y se modificara de tal manera que tiene que quedar igual que la primera para vincular los documentos se tiene que hacer de la siguiente manera: Primero se tiene que seleccionar el nombre de la primera plantilla y se va a vincular con la plantilla que se requiera para poderla vincular se tiene que dar clic en el símbolo y saldrá una flecha la cual es la que va a vincular la flecha solo se tiene que arrastrar hasta donde está el nombre de la plantilla.
  • 20. Para ver la pagina en algun explorador se tiene que dar en el simbolo y se va a escoger el explorador con el que se quiere abrir despues de que se selecciono aparecera asi en el explorador:
  • 21. Cuando se le dé clic en algún vínculo aparecerá así: Nota: los vínculos son los que están en rojo.
  • 22. “2.- Plantilla con tablas” Si las plantillas que vienen integradas en Dreamweaver no te gustan, puedes hacer tu propia plantilla que sea de tu agrado, Algo como esto: Bueno, para empezar ha hacer esta plantilla, lo primero que debemos de hacer es crear un sitio (ya visto en el primer tema). Ya cuando tengamos nuestro sitio creado, lo que tenemos que hacer es coger HTML:
  • 23. Aparecerá la página en blanco, y en la parte superior escogeremos la opción de “Tablas”:
  • 24. Primero insertaremos la primera tabla y aparecerá una ventana así: En donde dice “Filas” y “Columnas”, le pondremos 1, lo demás en este caso no importa.
  • 25. Nos apareció un pequeño recuadro lo cual ese lo haremos mas largo y mas ancho, ya que será en donde insertaremos las demás tablas. Ya que esta, así; empezaremos a insertar tablas a tal que quede como la primera que les mostré, será una fila con tres columnas, otra con solo una fila y una columna, la tercera una fila con tres columnas, y la ultima una fila con una columna. Las tablas se van repitiendo pero con diferente tamaño. Debe de quedar más o menos así:
  • 26. Si tienes problemas al insertar las tablas en una fila, no importa, ve creando tabla por tabla a modo de que quede como en la imagen de arriba. Como es una plantilla, no te debes de preocupar por el contenido, puedes insertar, regiones editables, e insertar marcador de imagen: Para insertar regiones editables debes de seleccionar en donde quieres que se inserte.
  • 27. Y para insertar los Marcadores: Se le dará clic a Marcador de posición de imagen y aparecerá:
  • 28. Puedes llenar todos los campos, ancho, color, Texto alternativo, pero a veces no es necesario:
  • 29. Quedara más o menos así, y si quieres que en la parte de abajo, aparezca la hora tienes que hacer: Se le dará clic y aparecerá:
  • 30. Se le deben de ir, llenando el formato de día, de fecha, de la hora, y activar el último cuadro de Actualizar automáticamente al guardar. Nos apareció esto, entonces, damos por echo de que nuestra plantilla esta terminada. Para empezarla a utilizar como plantilla, lo único que debemos de hacer, es guardarla como plantilla:
  • 31. Aparecerá otra ventana donde se empezara a llenar lo que pide: Le daremos clic en guardar, y si creían que nada mas se creo el sitio sin sentido, pues no es verdad ya que si observamos la parte derecha de la pantalla, aparece nuestra carpeta del sitio que creamos con el nombre de la plantilla que en este caso fue “Prueba”:
  • 32. Y listo, ya tenemos una plantilla.
  • 33. “3. Login.php, 4. Error.php, 5. Registro.php, 6. Perfil.php” En este apartado las practicas están unidas entre si ya que, nos sirve para crear una página de internet como una “Red social” 1.-Adiministrar un sitio en dreamweaver: 2.-saldra una ventana emergente que dice NUEVO (sitio), daremos clic ahí para empezar a crear nuestro sitio. 3.-seguiremos las instrucciones para crear nuestro sitio recordando que deberemos guardar en XAMP (HTDOCS). 4.-ya que estemos en HTDOCS crearemos una carpeta con el nombre que le ahijamos puesto al principio de nuestro sitio, dentro de esa carpeta crearemos otro donde pondremos por nombre IMÁGENES:
  • 34. 5.-ya que ahijamos hecho el paso anterior deberos comprobar la URL de nuestro sitio y saldrá algo así como esta pantalla: 6.-ya que ahijamos comprobado la URL de nuestro sitio daremos en siguiente donde nos aparecerá otra pregunta en donde daremos que no siguiente y nos saldrá algo así como esto donde esta que ya se completo: 7.- este ya será nuestro sitio creado entonces lo que sigue es darle LISTO: 8.-daremos clic en PAGINAS DE INICIO PAR COLOCAR UNA PLANTILLA QUE NO VAMOS A GUARDAR: 9.-Ya que tenemos nuestra plantillan empezaremos a cambiar algunos datos como poner REGION EDITABLE, etc.:
  • 35. 10.-Ya que este listo esto entonces daremos clic APLICACIÓN; enseguida en TIPO DE DOCUMENTO para cambiarlo a PHP si ya esta en ese solo daremos en aceptar y automáticamente se palomearían las opciones que tiene esa carpeta: 11.-Enseguida daremos clic en ARCHIVO para que así demos en guardar como plantilla así que saldrá algo como esto; así que tendremos que guardar y en la siguiente venta que salga le daremos en COPIAR:
  • 36. 12.-entonces esa plantilla se va a copiar en TEMPLATES esta carpeta aparecerá automáticamente; entonces daremos clic en esa carpeta para que salga los archivos que ahí se guardaron si lo notan cuando abrimos la carpeta TEMPLATES cambio nuestra plantilla: 13.-daremos clic en la opción CSS y saldrá algo que dice así (mm_entertainment.css) entonces daremos clic en ADJUNTAR HOJA DE ESTILOS, entonces saldrá una ventana así; en donde daremos en examinar saldrá otra ventana donde ya se encuentra este nombre, (mm_entertainment.css) y daremos en aceptar, y entonces asi quedara la plantilla:
  • 37. 17.-asi que nos iremos a archivo y daremos clic NUEVO para que así nos salga una venta en donde daremos clic en PLANTILLAS para colocar nuestra plantilla: entonces así quedaría en donde solo podamos cambiar o poner en region editable que colocamos: 18.-entonces vamos a guardar dando ctrl+s para guardarla: ya una vez guardada se pondrá en donde están nuestras demás carpetas y archivos. 19.-entonces empezaremos a crear el PERFIL; daremos clic en INSERTAR (formulario(campo de texto) y saldrá una venta como la siguiente así que en ella colocáremos en nombre que seria EMAIL, así repetiremos este paso 1 vez mas que llevara por nombre PASSWORD: 20.-asi quedara ya con email y password ya que tenemos esto, daremos clic en recuadro que sale para que así cambiemos de nombre TEXTFIELD A EMAIL:
  • 38. 21.-en etas dos imágenes ya están cambiados el TEXFIELD y TEXTFIELD2 A EMAIL Y PASSWORD: 22.-Enseguida colocaremos un botón que diga ENTRAR este lo sacaremos de la barra de herramientas donde dice COMUN (formularios) entonces en la barra se colocara un como rectángulo blanco daremos clic y saldrá otra venta como la que salió para poner email y password:
  • 39. 23.-Ahora crearemos nuestra conexión para ello nos vamos a ir a APLICACIÓN (base de datos clic en la cruz y dirá myconexión) daremos clic y saldrá otra venta donde colocaremos lo que se nos indica de la siguiente manera (recordando que necesitamos tener nuestra base de datos en local host si no la abrirá) Crear error: 24.-en la region editable le colocaremos los siguiente “USUARIO O CONTRASEÑA INCORRECTOS” “INTENTE DE NUEVO o REGISTRSE
  • 40. 25.-Ahora vamos a subrayar INTENTE DE NUEVO para irnos a la parte inferior en donde dice VINCULO (dar clic en la carpetita); enseguida va salir una ventana donde están nuestras TEMPALTES (daremos clic en TEMPLATES para que así enseguida le demos clic en INDEX que será ala pagina que nos mandara en caso de ERROR: 26.-aremos los mismo con la parte que dice REGISTRATE, esta la vamos a mandar a REGISTRO (se darán cuenta que ambos tanto como INTENTE DE NUEVO Y REGISTRESE se pondrán de color rojo y se subrayaran) 27.-ahora iremos con PERFIL: le daremos clic en APLICACIONES EN EL APARTADO (vinculaciones) después clic en JUEGO DE REGISTRO (CONSULTA); asi que saldrá una venta donde colocaremos el nombre de nuestra base de datos y en donde dice ninguno le pondremos MYCONEXION así que saldrá la tabla que le colocamos así que daremos clic en filtro le pondremos EMAIL ahí mismo colocaremos VARIABLE DE SESIÓN en el espacio blanco le pondremos MM_Username y le daremos en aceptar.
  • 41. 28.- entonces aparecera de lado izquierdo los campos que le colocamso a nuestra base de datos entonces iremos arrastrando asi la plantilla PERRFIL: emseguida nos iremos otra vez asi donde esta INDEX: 29.-asi que daremos clic en comun para que cambien a APLICACIÓN (que este paso lo isimos igual en el paso anterior) y luego de ahí AUNTENTICACION DE USUARIOS (conectar usuario) daremos clic y saldra algo asi en la pantalla: en donde le pondremos otra vez MYCONEXION, TABLA:USUARIOS ETC; en donde dice si es correcta ir a; ahí vamos a darle en examinar para que nos lo mande a PERFIL y donde dice si falla la conexión ir a examinar y ponerle ERROR,aceptar y como se subrayara lsa letra y los recuadros de el index.
  • 42. 30.- nos iremos a ERROR donde le daremos clic nuevamnete en AUNTENTICACION DE USUARIOS (registrar acceso a pagina) y nos saldra ota ventana; entonces darmos clic en NOMBRE DE USUARIO Y CONTRASEÑA clic en examinar paraq ue lo mandemos a INDEX y aceptar y nos iremos otra vez a PERFIL en donde repetiremos el mismo paso pero mandandolo igual a INDEX: 31.- Aremos a registro daremos clic en VINCULACIONES después en INSERTAR objetos de aplicación (insertar registro) (asistente de formulario de inserción de registros) para entonces saldra FORMULARIO DE INSERCION DE REGISTRO donde le pondremos en TRAS INSERTAR IR A INDEX daremos aceptar y aparecera un boton debajo de los datos que tiene PERFIL que dira INSERTAR REGISTRO daremos clic ahí para cabiar de INSERTAR REGISTRO a REGISTRARSE. Nos iremos a donde tenemos XAMP abierto para checar que nuestro pagina salga tendremos que poner la URL de nuestro INDEX para que sea la primera que habra y de ahí nuestra base de datos y listo asi es como creamos nuestro PERFIL,ERROR,REGISTRO.
  • 43. “7.- Editar Perfil.php” Para editar perfil ya se debe de tener un sitio elaborado con lo que es el registro para poder hacer un perfil se tiene que hacer lo siguiente: Primero crear una plantilla y ponerle nombre de perfil Después de que se crea la plantilla en donde se va a poner el perfil se hace lo siguiente: A la plantilla donde va el perfil se va poner región editable así como se muestra en la imagen de arriba después de que se puso la región editable se va a poner lo siguiente:
  • 44. Le vamos a dar clic en la pestaña de vinculaciones y en la pestaña que esta de lado izquierdo como se muestra en la imagen y se va a dar clic en juego de registros (consulta) y aparecerá un recuadro como el siguiente: En el cuadro que apareció que fue el de arriba le vamos aponer:
  • 45. En el cuadro que apareció se va a poner lo siguiente: Y se dara clic en aceptar y de lado izquierdo aparecerá lo siguiente:
  • 46. Después en la plantilla en la región editable se va a poner lo siguiente para poder poner lo del nombre solo se arrastra donde dice nombre de la izquierdo a si el lado en donde está la región editable y quedara asi: Primero el nombre, apeidos, edad, ocupación, teléfono, hobbie, sexo y foto. Después se da clic en donde dice formulario se va a cambiar por aplicación y después se va a dar clic en autenticación de usuarios:
  • 47. Después va a aparecer un recuadro como el siguiente: Se le va a dar clic en examinar y se vera otra ventana como la siguiente:
  • 48. Se le dara clic en index.php se le dara aceptar y en el primer recuadro igual en aceptar. “8.- Base de datos MySQL” PASOS A SEGUIR: 1.-ABRIR XAMP Y PONER STAR EN EL SERVIDOR APACHE Y MYSQL. 2.-ABRIR INTERNET Y COLOCAR LOCALHOST EN DODNDE VAN LAS URL DE LAS PAGINAS, ENSEGUIDA SE ABRIRA XAMP. 3.-DAR CLIC IDIOMA ESPAÑOL, DESPUES DAR CLIC EN PHPMYADMIN: 4.-TE AMDARA A ESTA PAGINA DONDE COLOCAR EL NOMBRE DE TU BASE DE DATOS.
  • 49. 5.-en la cual darás crear para crear Una tabla en la base de datos del nombre que le colocaste: 6.-daremos continuar para que salgan los campos y puedas colocarle los datos que desees por ejemplo el email, teléfono, etc. 7.-a donde dice tipo en esa misma donde salieron los campos vamos a colocar VACHAR en todos, deberemos colocar también valores así: 8.-e igual vamos a colocar en el apartado ÍNDICE SOLO EN EMAIL PRIMARY y en LA FOTO en el apartado donde dice NULO VAMOS A DAR CLIC EN EL CUADRITO PARA QUE SE PALOMIE:
  • 50. 9.- al acabar de hacer los pasos anteriores daremos clic en grabar: 10.-al dar grabar deber salir una página como esta y daremos clic en INSERTAR, y nos saldrá algo así: 11.-en donde comenzaremos a llenar los apartados que solicita que de acho son los que nosotros colocamos en los campos de los pasos anteriores y ya cavados de llenar daremos clic en continuar: 12.- continuación saldrá esta página en donde aparece un recuadro de color verde que dice: 1FILAS(S) FUERON INSERTADAS.
  • 51. 13.-Enseguida daremos clic en donde dice contactos que se encuentra de lado izquierdo, en mi caso este depende del nombre que le des a tu base de datos: Y nos mandara a esta página: 14.- ya realizado esto daremos clic en DONDE ESTA COMO ICONO CON UNA CASITA IGUAL DE LADO IZQUIERDO que dice pagina inicio, para que así demos clic en PRIVILEGIOS: 15.- ya que ahigamos dado clic en este apartado saldrá algo así, y daremos clic en agregar usuario:
  • 52. 16.-ya que ahigamos dado clic en agregar un nuevo usuario saldrá en pantalla algo así en donde llenaremos los datos que se pide a donde dice SERVIDOR colocaremos LOCAL y también deberemos marcar todos en el apartado de abajo, enseguida daremos clic en CONTINUAR ya con los datos quedaría así: 17.-enseguida daremos clic en privilegios otra vez para que se den cuenta que ya está sus datos ahí:
  • 53. “9.-Calculadora” Para hacer la calculadora en dreamweaver se tiene que hacer un sitio dando clic en sitios de dreamweaver. Después de que se le da clic en sitios de dreamweaver aparecerá la siguiente ventana que es en donde se va a poner la configuración del sitio se va a poner el nombre del sitio y se llenara lo que pide:
  • 54. Después de llenar lo primero se va a dar clic en siguiente y se le pondra en la opción de si deseo utilizar una tecnología de servidor y en este caso se pondra la de php My SQL Se dará en donde dice siguiente y se pondrá en la primera opción y se dará clic en la carpeta que esta de lado derecho y se elaborara una carpeta con el nombre del sitio en la memoria o en donde se quiera guardar la carpeta. Después de que se da clic en la imagen de la carpeta va a aparecer otra ventana como la siguiente que es en donde se va a colocar una nueva carpeta en la cual se va a poner el nombre del sitio y se adentró de esa carpeta se va a crear otra la cual se va a llamar imágenes que es en donde se van a guardar todas las imágenes que se coloquen cuando se hayan puesto las 2 carpetas se va a dar clic en seleccionar y se va a dar clic en guardar y automáticamente se guarda nuestra carpeta.
  • 55. Depues se prosigue con el siguiente paso que es copiar la ruta con la que quedo guardada la carpeta y se dara clic en siguiente Después de que se puso la ruta en el recuadro se va a dar clic en siguiente y se va poner en el otro recuadro el nombre de la carpeta así como se muestra en la imagen Se dara clic en comprobar URL y tendra que salir un recuadro como el siguiente
  • 56. En donde se le dará aceptar y se dará clic en siguiente en el siguiente recuadro se pondrá la opción no así como esta en la imagen Se dará clic en siguiente y aparecerá lo siguiente y se dará clic en completado Y así es como se obtiene el sitio para poder hacer la calculadora ahora solo tenemos que escoger una plantilla la plantilla se escogerá en donde dice páginas de inicio al dar clic en una de las plantillas y que sea con la que se va a trabajar solo se va a dar clic en crear
  • 57. Después de hacer clic en crear aparecerá una ventana que pide con que nombre se va a guardar la plantilla y se le pondrá el nombre que se desee Después de que se guarda aparece otra ventana en la cual te pregunta si deseas copiar las imágenes y se le dará clic en copiar Después de que se le da clic en copiar aparecerá la plantilla a la plantilla se le va a quitar todo lo que tenga por ejemplo asi debe de quedar
  • 58. A la plantilla se le va a cambiar el titulo por el de calculadora y se le van a poner campos de texto los campos de texto se ponen así se le da clic en la pestaña de insertar formulario y dar clic en campo de texto y aparecerá un recuadro como el siguiente: En donde dice etiqueta se va a poner número 1 y se le dará clic en aceptar Después se pondrá otro campo de texto y se pondrá número 2 y la plantilla quedara de la siguiente forma:
  • 59. Después de haber puesto lo que son los campos de texto se va a crear otra plantilla que va a ser igual que la primera pero sin los campos de texto porque los campos de texto van con otros nombres. Cuando es creada la segunda plantilla se pone 4 campos de texto que sería uno para suma, resta, división y multiplicación y quedaría de la siguiente forma. Se pone el código que va hacer que se ponga los resultados de los números que se pongan por ejemplo este es el código
  • 60. Después solo se vincula la primera plantilla con la segunda y asi es como se hace la calculadora. “10. Banner intro flash” 1.-abrir el programa: 2.-empezar a crearlo para entonces le darnos clic en NAVLAYOUT (en donde le podremos cambiar el ancho el largo, el color etc.: 3.-entonces vamos abrir la siguiente que se llama NAVBACKGROUND (en donde podremos poner la combinación de colores del fondo, centrarlo etc.) 4.-El otro que sigue se llama NAVBGEFFECT (en donde le podemos poner el efecto que
  • 61. deseamos como hojas, luces, estrellas, esferas etc.) 5.-emseguida vamos abrir el siguiente Apartado que tenemos e llama NAVTEXT (en el cual le podremos cambiar el texto que tiene por el que deseemos e igual mente le podremos poner algún efecto el texto) 6.-el siguiente apartado QUE SE LLAMA NAVPLUBISH donde daremos clic nos deberá aparecer como una url para colocarla en nuestra pagina web creada en dreamweaver así que así quedara ya en dreamweaver (LO QUE APARCE DE COLOR GRIS SERIA NUESTRO BANNER)
  • 62. Para hacer un INTRO EN FLASH seguiremos los pasos anteriores solo modificaremos a como nosotros queramos que quede: “11. Efecto java script” 1.- Empezaremos por buscar un código Java Script para descargar en este caso yo descargare un CONTADOR DE VISITAS: 2.-entonces este sería el código para agregarlo a nuestra página:
  • 63. 3.-este seria nuestro código para colocar en nuestra página: Por ejemplo coloque en la página me solicito mi nombre para que cada vez que yo habrá la página se coloque cuantas veces la he visitado: