Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Elaboración de paginas web dinamicas

1,275 views

Published on

Apuntes Submodulo III, Bachillerato Tecnologico

Published in: Internet
  • Be the first to comment

Elaboración de paginas web dinamicas

  1. 1. ELABORACIÓN DE PAGINAS WEB 1 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  2. 2. OBJETIVO GENERAL Utiliza HTML, Dreamweaver, Php y MySQL para la elaboración de paginas web dinámicas. 2 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  3. 3. ¿QUÉ ES HTLM ?  HTML es un lenguaje para escribir páginas web.  HTML significa Hyper Text Markup Language  HTML no es un lenguaje de programación es un lenguaje de marcas.  Un lenguaje de marcas permite escribir texto de forma estructurada, y que está compuesto por Etiquetas que marca un inicio y un fin.  HTML utiliza etiquetas de marcado para describir páginas web  HTML utiliza comandos, que indican la operación a realizarse. 3 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  4. 4. Comandos cerrados: son aquellos que tienen una palabra clave que indica el principio de la operación y otra que indica el final y lleva el símbolo «/» (diagonal) después el comando a ejecutar. “Entre estas dos claves se pueden encontrar otros comandos” Comandos abiertos: Constan de una sola palabra clave, se encierra entre los símbolos ” < ” y “ > ” sin espacios. Se pueden usar en mayúsculas o minúsculas o una combinación de ambas. 4 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  5. 5. Las etiquetas de HTML son palabras clave entre corchetes como el ángulo de <html> Las etiquetas de HTML normalmente vienen en pares como < b> y </b>. La primera etiqueta en un par es la etiqueta de inicio, la segunda etiqueta es la etiqueta de cierre. Inicio y fin son también llamadas etiquetas de apertura y cierre. ETIQUETAS HTML O TAGS 5 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  6. 6. Las etiquetas básicas o mínimas son: <html> <head> <title> Ejemplo de HTML</title> </head> <body> <p>Ejemplo de una pagina web con HTML </p> </body> </html> ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML 6 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  7. 7. Las etiquetas básicas de HTML, de obligada presencia en todo documento son: <html> Es la etiqueta que define el inicio del documento html. <head> Define la cabecera del documento html, contiene información sobre el documento ( no se muestra en el navegador) Dentro de la cabecera <head> podemos encontrar: <title> Define el titulo de la pagina (aparece en la barra de titulo). <body> Tiene el contenido principal del documento (lo que muestra el navegador), dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como color de fondo y márgenes. 7 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  8. 8. Dentro del cuerpo (body) podemos encontrar varias etiquetas, por ejemplo: <h1>, <h2>. . . <h6> Son encabezados o títulos del documento en diferentes tamaños de fuente. <h> Párrafo nuevo. <br> Salto de línea forzado. <table> Comienzo de una tabla (las filas se fffffffff fffff identifican con <tr> y las celdas dentro de las filas ddd con <td>). <a> Indica la existencia de un hipervínculo o enlace, ddddii dentro o fuera de la página web. Debe definirse el parámetro de por medio del atributo href. 8 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  9. 9. <div> comienzo de un área especial en la página. <img> indica la existencia de una imagen para dd dd mostrarse en el navegador. Ejemplo de una página. <html> <head> <title> Ejemplo de HTML </title> </head> <body> <h1> Mi Primer Encabezado</h1> <p> Mi Primer Párrafo</p> </body> </html> 9 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  10. 10. QUÉ NECESITAS PARA CREAR UNA PAGINA EN HTML  Editor - - Block de Notas - WordPad.  Servidor Web - - IIS - Apache.  Sitio Web - - Localización - Carpeta.  Extensiones - - HTM - HTML. 10 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  11. 11. ETIQUETAS HTML O TAGS La mayoría de los tags, se pueden anidar. Para XHTML, XML y futuras versiones todos los tags deben estar cerrados. Algunas etiquetas HTML tienen atributos Los atributos HTML son elementos que proporcionan información adicional de la etiqueta, por lo regular están en la etiqueta de inicio. Los atributos deben ir siempre entre comillas. Los valores de los atributos distinguen mayúsculas y minúsculas. 11 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  12. 12. DOCUMENTOS HTML= PAGINAS WEB Un navegador Web (Explorer o Firefox) lee los documentos HTML e interpreta el contenido de la página. Ejemplo Explicación <html> y </html> Describe inicio y fin de la página web. <body> y </body> Contenido de la página visible. <h1> y </h1> Encabezados. <p> y </p> Párrafos. 12 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  13. 13. ENCABEZADOS EN HTML  Se definen con la etiqueta h y un número, el cual va del 1 al 6. <h1> </h> Los encabezados son importantes porque los motores de búsqueda los utilizan para indexar su estructura y contenido. . 13 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  14. 14. COMENTARIOS EN HTML  Los comentarios: Se utilizan para documentar la página. Los comentarios son ignorados por el navegador. < !-- //-- > . 14 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  15. 15. LÍNEAS EN HTML  Separadores: Se utilizan para identificar las secciones dentro de una misma página, es una regla horizontal. <hr> .Atributos Significado Valor Align Alineación de la regla Left, Right, Center Width Ancho de la regla Número o porcentaje Size Alto de la regla Número Noshade Elimina sombreado No tiene valores 15 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  16. 16. EL TEXTO EN HTML  Caracteres especiales. Carácter Representación Carácter Representación á &aacute; & &amp; Á &Aacute; ¿ &iquest; é &eacute; ¡ &iexcl; É &Eacute; “ &quot; í &iacute; . &middot; Í &Iacute; < &lt; ó &oacute; > &gt; Ó &Uacute; ñ &ntilde; ú &uacute; Ñ &Ntilde; Ú &Uacute; Espacio &nbsp; 16 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  17. 17. ETIQUETAS EN HTML.  Párrafo: Se utiliza para agrupar el texto de una página en párrafos. <p> </p> Es posible cambiar la alineación del texto de cada párrafo a través del atributo align cuyos valores son: Atributo Significado Left Izquierda Right Derecha Center Centrado Justify Justificado 17 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  18. 18.  Saltos de Línea: Para producir un salto de línea en el navegador se utiliza la etiqueta. <br>  Texto preformateado: Muestra en el navegador el texto tal cual ha sido insertado dentro del código. <pre></pre> Dentro de esta etiqueta no se puede incluir etiquetas <img>, <object>, <big>, <small>, <sub> y <sup> 18 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  19. 19.  Sangrado de Texto: Es un margen que se establece a ambos lados del texto. <blockquote> </blockquote> Esta etiqueta obliga a que el texto aparezca en una nueva línea. 19 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  20. 20.  Formatear el Texto: Etiqueta utilizada para modificar las propiedades de texto como color, fuente, tamaño. <font></ font > Atributo Significado Valor Face Fuente Nombre de la fuente Color Color de texto Número hexadecimal o texto predefinido Size Tamaño del texto Valores del 1 al 7.Por defecto es el 3 20 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  21. 21.  Etiqueta de Texto para todo el documento: Se utiliza para definir una fuente a todo el documento. <basefont>  Etiqueta de Resaltado de Texto: Permite aplicar diferentes estilos, todas estas etiquetas necesitan etiquetas de cierre. Etiqueta Significado Etiqueta Significado <i> Cursiva <b> Negrita <u> Subrayado <em> Énfasis <s> Tachado <big> Aumenta tamaño <tt> Teletipo <small> Disminuye el tamaño 21 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  22. 22.  Marquesina: Son líneas de texto que pueden desplazarse de un lado a otro de la ventana en forma de línea. Por defecto se desplaza de derecha a izquierda. <marquee></marquee> Atributo Significado Behavior Alternate / Scroll Slide Direction Down / Up / Left / Right Bgcolor Color de fondo 22 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  23. 23. ENLACES HTML  Un hiperenlace, hipervínculo o vinculo al ser pulsado lleva a un nuevo documento o una nueva sección dentro del documento actual. Se definen a través de la etiqueta. <a> </a> La etiqueta <a> se puede utilizar de dos maneras: 1. Crear un vinculo a otro documento mediante el atributo href. 2. Crear un marcador dentro de un documento utilizando el atributo nombre. 23 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  24. 24. Sintaxis del link. <a href=“url”> texto</a> El enlace no solo puede ser un texto, se puede vincular también una imagen o cualquier otro elemento. Href es una abreviatura del ingles Hypertext Reference. Tipos de Referencia  Referencia Absoluta  Referencia Relativa al sitio  Referencia Relativa al documento 24 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  25. 25. REFERENCIA ABSOLUTA Conduce a una ubicación externa al sitio en el que se encuentra el documento. La ubicación es en internet, por tanto hay que empezar por http: //… <a href=“http:// www.w3schools.com” > w3schools</a> 25 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  26. 26. REFERENCIA RELATIVA AL SITIO Conduce a un documento situado dentro del mismo sitio que el documento actual. Recordemos que un sitio web es un conjunto de archivos y carpetas relacionados entre si, con un diseño similar. <a href =“/recetas.html” > Recetas </a> Debe usarse el símbolo “ / ” delante del nombre del documento, esta barra indica que el archivo esta en la carpeta raíz del sitio. 26 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  27. 27. REFERENCIA RELATIVA AL DOCUMENTO Conduce a un punto dentro del mismo documento, para ello debemos colocar. <a href =“#puntoancla”> Cocada </a> 27 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  28. 28. PUNTO DE FIJACIÓN DE ANCLAS Es utilizado cuando se tienen documentos extensos divididos en varios apartados. Una ancla necesita que se inserten las <a> y </a> con el atributo name que puede tomar cualquier valor inventado por el usuario. No se deben utilizar caracteres especiales. <a name = “puntofijacion” > </a> 28 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  29. 29. ENLACE A CORREO ELECTRÓNICO Es posible incluir enlaces con direcciones de correo electrónico. <a href = “mailto:” > </a> 29 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  30. 30. DESTINO DEL ENLACE El destino del enlace determina en que ventana va a ser abierta la pagina vinculada, se especifica a través del atributo target al que se le pueden asignar los siguientes valores: _blank Abre el documento vinculado en una ventana nueva del navegador. _parent Abre el documento vinculado en la ventana del marco que contiene el vinculo o en el conjunto de marcos padre. 30 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  31. 31. _self Es la opción predeterminada, Abre el documento vinculado en el mismo marco. _top Abre el documento vinculado en la ventana del navegador. <a href = “http://www.w3schools.com” target= “_blank”>w3schools.com </a> 31 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  32. 32. IMÁGENES EN HTML Se definen a través de la etiqueta <img> </img> Los formatos que se recomiendan son GIF (Graphics Interchange Format ) o JPEG ( Joint Photographic Expert Group) Sintaxis para las imágenes: <img src= “imagen.jpg ”></img> 32 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  33. 33. Atributo Significado Valor Width Determina el ancho de la imagen Pixeles Height Determina la altura de la imagen Valor numérico Border Aplica un borde Top, center, middle, botton, left, rigth Align Alineación de la imagen Texto Alt Permite describir la imagen con un texto, cuando el puntero esta sobre la imagen Valor numérico Hspace Añade un espacio vacío, en las coordenadas horizontal de una imagen Vspace Controla el espacio de la imagen en las coordenadas verticales src Identifica la imagen a mostrarse Href Uso de imagenes como enlaces background Imagen como fondo del documento dentro del body 33 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  34. 34. TABLAS EN HTML Las tablas se definen con la etiqueta <table></table> Una tabla se divide en filas (con la etiqueta <tr>) y cada fila se divide en celdas de datos (Con la etiqueta <td>). Td es sinónimo de “datos de la tabla”, y mantiene el contenido de una celda de datos. Una etiqueta <td> puede tener texto, imágenes, listas, formas, otras tablas, etc. 34 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  35. 35. En la actualidad, la mayoría de las páginas web se basan en tablas, debido a que mejoran el diseño. Todos los objetos se alinean por defecto a la izquierda de las paginas, pero gracias a las tablas es posible distribuir en columnas el contenido de la pagina. Las tablas están formadas por celdas, que son los recuadros que resultan de la intersección de una fila y una columna. 35 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  36. 36. Para crear una tabla hay que insertar la etiqueta. < table > < tr > < td > </ td > < td > </ td > < td > </ td > </ tr > < tr > < td > </ td > < td > </ td > < td > </ td > </ tr > < /table > 36 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  37. 37. Atributo Significado Valor Width Ancho de la tabla Valor numérico o porcentaje Height Altura Valor numérico o porcentaje Cellpadding Espacio entre el contenido de las celdas y el borde Valor numérico Cellspacing Espacio entre celdas Valor numérico Border Grosor del borde Valor numérico Align Alineación de la tabla dentro de la página Left / Right / Center Bgcolor Color de fondo Numero hexadecimal Background Imagen de fondo Bordercolor Color de borde Numero hexadecimal ATRIBUTOS DE LAS TABLAS EN HTML 37 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  38. 38. MAPAS DE IMÁGENES Se utilizan para hacer que parte de la imagen sea un enlace a otra página, es decir, puede hacer un mapa sobre la imagen de manera que secciones de la imagen sean enlaces. <map> </map> Identifican que vamos a crear un mapa de imágenes. El atributo name es obligatorio, este atributo esta asociado con el atributo usemap del tag <img>, creando una relación entre el mapa y la imagen. El elemento del mapa contiene una serie de elementos area, que definen áreas clic en el mapa de imagen 38 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  39. 39. TAG AREA La etiqueta < area > define un área dentro de una imagen de mapa. El elemento de área es siempre anidada dentro de una etiqueta < map > Atributo Significado Valor Shape Establece el tipo de área a definir Rect (Rectangular) Poly (Poligonal) Circle (Circular) Coords Indica los pares de coordenadas de cada punto del área a activar. Href Indica la dirección de la pagina web a la que se accede si damos clic en el área determinada. 39 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  40. 40. En el área rectangular se especifican las coordenadas de la esquina superior izquierda y esquina inferior derecha. En el área poligonal, se especifican las coordenadas de todos los vértices del área. En el área circular indicamos las coordenadas del centro del circulo y el valor del radio. Finalmente, debe saber que para que una imagen sea tratada como un mapa, además de el código anteriormente descrito, debe incluir en el tag de imagen el atributo: usemap = “#nombre del mapa” 40 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  41. 41. Los formularios en HTML se utilizan para recoger datos introducidos por el usuario y pasarlos a un servidor. Un formulario puede contener elementos de entrada, como campos de texto, casillas de verificación, botones de opción, botones de envío y mucho mas. La etiqueta utilizada para crear formularios es: <form> </form> Nota: Los formularios no son visibles. FORMULARIOS 41 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  42. 42. Los formularios se utilizan para conocer las opciones, dudas y otra serie de datos sobre los usuarios. Es muy recomendable utilizar tablas para organizar los elementos del formulario. Utilizando tablas se consigue una mejor distribución de los elementos del formulario, lo que facilita su comprensión y mejora su apariencia. La etiqueta FORM actúa como una especie de contenedor para almacenar elementos que permiten al usuario seleccionar o introducir datos.42 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  43. 43. Todos los datos se enviarán a la dirección URL indicada en el atributo ACTION de la etiqueta FORM, por el método indicado en el atributo METHOD Se puede insertar cualquier elemento HTML es una etiqueta FORM (Como texto, botones, tablas y enlaces), pero los elementos interactivos son los más interesantes. Estos elementos interactivos son;  INPUT : Todos los botones y casillas de texto.  TEXTAREA: Una casilla de texto.  SELECT: Una lista de opciones múltiples. 43 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  44. 44. Atributo Significado Valor Action Indica la dirección a donde será enviada la información Action= “ruta_programa” Method Indica el método mediante el que se transferirán las variables Get, Post, Method = “POST / GET” Enctyte Modo en que será cifrada la información. Este atributo solo se aplica si el método es POST . Por defecto es: “application/x-www- form-urlencoded” o bien “multipart/form-data” Enctype = “tipo” Target Indica en que ventana se muestra el resultado del proceso de datos. Blank, parent, self , top Name Indica el nombre del formulario ATRIBUTOS DE LA ETIQUETA FORM 44 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  45. 45. Cuando se usa el método GET, las variables se envían en la url de llamada a la siguiente página. Al utilizar este método se ven los valores de las variables en la barra de direcciones al dar clic en enviar. Ademas el número de caracteres es limitado (2,048) menos el numero de caracteres de la ruta de acceso real, por lo que puede darse el caso de que no lleguen todos los datos. DIFERENCIA ENTRE USAR EL MÉTODO GET Y POST 45 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  46. 46. Cuando se usa el método POST, esto no ocurre, los valores no se ven por ninguna parte y no se tiene límite en la cantidad a enviar. Por ultimo también cambia la forma de recoger los valores. Si se usa el método GET se recogen con Request.Querystring (“campo”) y si es con el método POST se usa Request.Form (“campo”) 46 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  47. 47. La etiqueta INPUT es esencial para los formularios, ya que se usa para crear elementos interactivos. La sintaxis es: < input > ETIQUETA INPUT 47 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  48. 48. Atributo Significado Valor Type Especifica el tipo de elemento que representa con la etiqueta Button, checkbox, file, hidden, image, password, radio, reset, submit, text Name Permite reconocer que campo esta asociado con el par nombre / valor Value Especifica el valor del elemento de entrada Número Size Especifica la longitud máxima de entrada Número Maxlenght Especifica la longitud del campo Número ATRIBUTOS DE LA ETIQUETA INPUT 48 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  49. 49. 1. TEXT. Campo de texto. < form> Nombre: <input type= “text” __name = “nombre” /> Edad: <input type = “text” __name = “edad” /> < / form> Por default el ancho de un texto es de 20 caracteres. TIPOS DE ELEMENTOS INPUT 49 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  50. 50. 2. PASSWORD. Campo de texto. < form> Password: <input __type= “password” __name = “nombre” /> < / form> Los caracteres en el campo password están enmascarados (se muestran asteriscos o círculos) 50 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  51. 51. 3. RADIO. Botón de opción. < form> Sexo: <input type= “radio” _name=“sexo” value=“Hombre” /> <input type= “radio” _name=“sexo” value=“Mujer” /> < / form> El atributo value indica el valor asociado al botón de opción. Es necesario poner este atributo aunque el usuario no pueda ver su valor, este valor es el que se envía al servidor. 51 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  52. 52. 4. CHECKBOX. Casilla de verificación. < form> Hobbies: <input type= “checkbox” name = “hobbie” value = “Bailar” /> Bailar <input type= “checkbox” name = “hobbie” value = “Cantar” /> Cantar <input type= “checkbox” name = “hobbie” value = “Nadar” /> Nadar < / form> Un checkbox define una casilla de verificación, el usuario puede marcar una o más del conjunto total. 52 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  53. 53. 5. SUBMIT. Botón de envió de datos. < form name=“clave” action = “acceso.php” method=“get”> Usuario: <input type= “text” __name = “usuario”/> Password:<input type = “password” name = “contraseña” /> <input type= “submit” __value=“Enviar” /> < / form> Cuando el usuario pulsa el botón los datos que se han introducido en el formulario son enviados al servidor. 53 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  54. 54. 6. RESET. Botón de restauración. < form name=“clave” action = “acceso.php” method=“get”> Usuario: <input type= “text” __name = “usuario”/> Password:<input type = __“password” name=“contraseña”/> <input type= “reset” __value=“Limpiar” /> < / form> El botón de restauración es utilizado para limpiar el formulario. 54 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  55. 55. 7. HIDDEN. Campo oculto < form name=“clave” action = “acceso.php” method=“get”> Usuario: <input type= “text” __name = “usuario”/> <input type= “hidden” name=“contraseña” value=“2345” /> <input type= “submit” __value=“Enviar” /> < / form> 55 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  56. 56. El campo oculto no puede ser visto por el usuario, debe incluirse el atributo value para que en el formulario se pase un valor al servidor, el usuario no puede modificar este valor, aunque en realidad si se puede modificar a través de código script, haciendo uso de variables ocultas. 56 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  57. 57. 8. FILE. Fichero. < form name = “registro” action = “alta.php” method=“POST” enctype=“multipart / form- data”> <input type = “file” name=“archi” value =“ ”/> <input type= “submit” __value=“Subir” /> < / form> 57 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  58. 58. Define un archivo que puede ser enviado junto con los datos del formulario, y en donde la ruta puede ser relativa al directorio de carpetas del servidor o una ruta URL absoluta de internet. Debemos asegurarnos que el tipo de archivo enviado este dentro de los permitidos por la etiqueta ACCEPT. 58 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  59. 59. 9. IMAGE. Botón de envió. < form name = “registro” action = “alta.php” method=“post” > Usuario: <input type= “text” __name = “usuario”/> Password:<input type = “password” name = “contraseña” /> <input type= “image” __name= “boton” src= “Imágenes/Enviar.jpg” width=“50” height=“20” hspace=“10” align=“middle” /> < / form> 59 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  60. 60. Introduce un botón definido por una imagen, en vez del formato estándar de botones, con lo que podemos así personalizar el botón. Inicialmente su función era contener una localización de las coordenadas que pinchara el usuario, para que luego el programa CGI realizara una acción. Actualmente se usa mas para personalizar el botón de envío de datos; es decir, su funcionalidad es análoga a la de submit. 60 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  61. 61. DREAMWEAVER Es un software permite crear páginas web profesionales, sin la necesidad de programar manualmente el código HTML; Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc., de una forma muy sencilla y visual. Dreamweaver crea una copia local del sitio web la cual se podrá colocar en el mundo de Internet; Por tanto, una vez terminada de modo local se debe subir al servidor manteniendo la estructura.61 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  62. 62. TIPS  Conservar la estructura de los archivos.  Respetar nombres de Archivos.  No utilizar caracteres especiales como acentos o eñes, ni espacios en blanco.  Es recomendable escribir, los nombres en minúsculas; Algunos servidores distinguen entre mayúsculas y minúsculas. 62 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  63. 63. PAGINAS ESTÁTICAS Se construyen con el lenguaje HTML, que no permite grandes florituras para crear efectos ni funcionalidades más allá de los enlaces. Estas páginas son muy sencillas de crear, ofrecen pocas ventajas a los visitantes, ya que sólo se pueden presentar textos planos acompañados de imágenes y a lo sumo contenidos multimedia como pueden ser videos o sonidos. No varían nunca su presentación ni contenido, a menos de que se realice cambios en el código fuente. 63 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  64. 64. 1. Botón Inicio  Todos los programas  clic en Macromedia (o Adobe si tienes las últimas versiones). 2. Selecciona HTML del menú Crear nuevo. 64 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández CREAR UN NUEVO DOCUMENTO EN DREAMWEAVER
  65. 65. 65 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández PANTALLA PRINCIPAL Barra de aplicación Pestañas de documento Barra de estado Barra de herramientas de documentos Barra de navegación con navegador Inspector de Propiedades Paneles
  66. 66. Barra de la aplicación. Contiene los menús, botones de la aplicación, el conmutador de espacio de trabajo y una caja de búsquedas para obtener ayuda online. Los botones de la aplicación, permiten cambiar entre la vista de diseño o código, acceder a las extensiones que se pueden añadir, o al administrador de sitios. Los menús, están agrupados en categorías, por ejemplo el menú Insertar, contiene los diferentes elementos que se pueden insertar en Dreamweaver. 66 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández LAS BARRAS
  67. 67. Pestañas de documento. Cada archivo que tengamos abierto, mostrará una pestaña con su nombre, lo que nos permitirá cambiar de uno a otro fácilmente. Si junto al nombre aparece un *, indica que ese archivo tiene cambios sin guardar. Debajo de las pestañas encontramos los archivos a que utiliza nuestra página, como la hoja de estilos, archivos JavaScript, etc... pudiendo acceder a ellos con un clic. Esto nos ahorrará bastante tiempo. 67 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  68. 68. Barra de estado. Esta barra la encontramos debajo de la ventana de documento, y nos da información sobre el mismo. A la izquierda, encontramos el selector de etiquetas. Nos sirve para seleccionar etiquetas completas. Siguiendo hacia la derecha encontramos las herramientas de Selección, Mano (para desplazarse) y Zoom. Y otros datos como el tamaño de la ventana, el tamaño de la página o su codificación 68 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  69. 69. Barra de herramientas estándar. Contiene iconos para realizar las acciones más habituales del menú Archivo y Edición. Barra de herramientas de documento. La contiene iconos que nos permiten cambiar entre las distintas vistas de edición y la vista en vivo, acceder cómodamente al título de la página, o realizar las distintas opciones de validación que nos ofrece el programa. Barra de navegación con navegador. Permite usar Dreamweaver como un navegador web y navegar por las páginas de nuestro sitio, aunque sólo tiene sentido con la Vista en vivo. 69 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  70. 70. Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como paneles o inspectores. La diferencia entre panel e inspector es que, la apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado, mientras que el panel nos da acceso a opciones generales. A través de la opción Ventana, de la barra de menús, es posible mostrar u ocultar cada uno de los paneles o inspectores. 70 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández INSPECTORES Y PANELES
  71. 71. Inspector de Propiedades. Muestra las opciones propias del objeto o texto seleccionado, permite editar, es uno de los elementos más utilizados. Este panel muestra dos tipos de propiedades, HTML y CSS. Panel Insertar. Encontramos todos los elementos que podemos encontrar en el menú Insertar, clasificados en categorías. Podemos emplearlo para insertar imágenes, enlaces, multimedia, tablas, formularios... cualquier elemento que nuestra web necesite. 71 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  72. 72. Vistas de un documento.  La vista Diseño trabajar con el editor visual. Ofrece un aspecto muy similar al resultado final, pero totalmente editable.  La vista Código se utiliza para poder trabajar en un entorno totalmente de programación, de código fuente. No permite una referencia visual.  La vista Dividir divide la ventana en dos zonas: Código y Diseño. La zona izquierda muestra el código fuente, y la derecha el editor visual. Cuando se realiza un cambio en alguna de las zonas, este cambio se aplica directamente sobre la otra. 72 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  73. 73. Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar y un objetivo común. Los documentos HTML se crean dentro de una carpeta, mientras que para contener las imágenes, las animaciones, archivos de tipos específico, etc., se deben crear en otras carpetas dentro de ésta, con el objetivo de tener organizados los archivos a la hora de trabajar. Esto es lo que se conoce como sitio local. 73 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández CONFIGURACIÓN DEL SITIO
  74. 74. El sitio local y el sitio remoto tienen la misma estructura. La organización de los archivos en un sitio permite administrar y compartir archivos, mantener los vínculos de forma automática, utilizar FTP para cargar el sitio local en el servidor, etc. La página inicial de nuestro sitio debe de tener el nombre index.htm o index.html, ya que cuando se intenta acceder a una URL genérica, el servidor devuelve la página con ese nombre. 74 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  75. 75. Una vez creadas las carpetas que formarán la estructura del sitio local, o por lo menos la carpeta raíz, ya es posible definir el nuevo sitio, utilizando … 75 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández CREAR UN SITIO 1. Menú Sitio  Nuevo sitio. 1. Administrar sitios Nuevo..
  76. 76. Independientemente de la forma de crear el sitio, se mostrara la siguiente ventana. Selecciona la carpeta Avanzadas y llena los campos. 76 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández Nombre del sitio Ruta donde se localiza el sitio
  77. 77. Para abrir un sitio ya definido: 1. Menú Sitio Administrar sitios.... seleccionar el sitio de la lista de sitios 2. Clic en el botón Listo. 77 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández ABRIR UN SITIO También podemos utilizar el panel Archivos, buscar y seleccionar el sitio a abrir en el menú desplegable Archivos.
  78. 78. Es conveniente definir sitios homogéneos, que todas las páginas de un sitio tengan el mismo color de fondo, de fuente, etc. El cuadro de diálogo Propiedades de la página ayuda con este proceso. 78 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández PROPIEDADES DEL DOCUMENTO
  79. 79. Las propiedades están organizadas en categorías. 1. Apariencia (CSS) encontramos las propiedades:  Fuente de página: tipo de letra que le aplicaremos al texto.  Tamaño: tamaño de la fuente que aplicaremos al texto.  Color del texto: color de la fuente.  Color del fondo: especifica un color de fondo para el documento, pero dicho color solo se mostrará en el caso de no haber establecido ninguna imagen de fondo.  Imagen de fondo: especifica una imagen de fondo para el documento. Dicha imagen se muestra en mosaico 79 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  80. 80.  Repetir: permite especificar si queremos que la imagen de fondo se repita o no.  Márgenes: permiten establecer márgenes en el documento, es decir, la distancia entre donde empieza el contenido de la página y la ventana del navegador. 2. Apariencia (HTML) encontramos las propiedades:  Imagen de fondo: especifica una imagen de fondo para el documento. Dicha imagen se muestra en mosaico.  Fondo: permite especificar un color de fondo para el documento, pero dicho color solo se mostrará en el caso de no haber establecido ninguna imagen de fondo. 80 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  81. 81.  Texto: es el color de la fuente.  Vínculos: es el color que mostrará el texto de los vínculos.  Vínculos visitados: es el color que mostrará el texto de los vínculos visitados.  Vínculos activos: es el color que mostrará el vínculo cuando el cursor del ratón hace clic sobre el mismo.  Márgenes: permiten establecer márgenes en el documento. Muchas propiedades HTML y CSS son similares. La diferencia es que CSS aplica la configuración utilizando reglas de estilo, mientras que HTML lo hace con atributos HTML, los cuales están cayendo en desuso 81 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  82. 82. 3. Vínculos (CSS) encontramos las propiedades:  Fuente de vínculo: tipo de letra del vínculo.  Tamaño: tamaño del texto de los vínculos.  Color de vínculo: color de los vínculos, ayuda al usuario a distinguir entre el texto normal y los vínculos que sirven de enlace a otras páginas.  Vínculos visitados: color de los vínculos visitados, permite distinguir al usuario si unos vínculos ya han sido visitados o no.  Vínculos de sustitución: color del texto del vínculo cuando situamos el ratón encima del vínculo.  Vínculos activos: color de los vínculos activos.  Estilo subrayado: por defecto en un vínculo, el texto aparece subrayado, con esta opción podemos elegir otro tipo de estilo. 82 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  83. 83. 4. Encabezados (CSS) encontramos la propiedad:  Fuente de encabezado: establece el tipo de fuente de los encabezados. El resto propiedades hacen referencia al estilo cursiva o negrita, así como al tamaño y color que queremos aplicar a cada tipo de encabezado. 5. Título/Codificación encontramos la propiedad:  Título: título del documento, que aparecerá en la barra de título del navegador y de la ventana de documento de Dreamweaver 83 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  84. 84. 6. Imagen de rastreo encontramos las propiedades:  Imagen de rastreo: establece una imagen como fondo del documento, pero que sólo se mostrará en la ventana de documento de Dreamweaver, y nunca en un navegador. Dicha imagen se utiliza como plantilla gráfica.  Transparencia: establece la opacidad de la imagen de rastreo. Si las páginas tienen muchos elementos (imágenes, tablas, etc.) posiblemente tarden mucho tiempo en mostrarse en el navegador. Esto no es recomendable, ya que los usuarios pueden perder la paciencia, y no visitar más nuestra página. 84 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  85. 85. Las características del texto seleccionado pueden ser definidas a través del menú Formato o a través del inspector de propiedades, que están clasificadas en dos categorías HTML y CSS. Propiedades HTML Todas estas propiedades generan etiquetas HTML, que tienen un estilo por defecto en el navegador. 85 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández EL TEXTO: PROPIEDADES Y FORMATO
  86. 86. Formato: Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser encabezado, párrafo o formato predeterminado.  Los encabezados se utilizan para establecer títulos dentro de un documento.  El formato predeterminado sirve para que el texto aparezca tal cual ha sido escrito.  El texto normal, debería ir siempre en párrafos, salvo que esté en otros elementos, como tablas o listas. 86 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández Es importante emplear correctamente los encabezados, ya que se organizará mejor el contenido de nuestra web, así como para los buscadores y visitantes.
  87. 87. Estilo El botón B encierra el texto en una etiqueta <strong></strong>, que por defecto se muestra en negrita. El botón I, lo encierra entre <em></em>, que por defecto se ve en cursiva. Lista Estos botones permiten crear listas con viñetas o listas numeradas. Sangría: Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es un margen que se establece en ambos lados del texto. 87 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  88. 88. Propiedades CSS Las hojas de estilo en cascada (CSS, Cascading Style Sheets) permiten formatear la página y darle el diseño. Regla de destino Las reglas CSS sirven para definir a qué elemento aplicamos el estilo, se puede definir una Nueva Regla, eliminarla o aplicar una clase. 88 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  89. 89. Editar regla Mediante este botón se accede a las opciones para la creación o modificación de estilos CSS, de la regla seleccionada. Panel CSS Este botón abre el panel CSS si no lo tuviéramos abierto. Fuente Permite seleccionar un conjunto de fuentes. El seleccionar un conjunto de fuentes posibilita que en el caso de que el usuario no tenga una fuente se aplique otra del conjunto. 89 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  90. 90. Estilo Colocan el texto en negrita y cursiva respectivamente. Pero en este caso, generan un estilo css en línea. Alineación Es posible establecer la alineación del texto de una de estas cuatro formas distintas: izquierda, centrada, derecha y justificada. Tamaño Cambiar el tamaño del texto, en diversas unidades, en píxeles, porcentajes, etc... 90 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  91. 91. Color Seleccionar el color de la fuente, ignorando el color que se haya definido en las propiedades de la página. Si no se ha establecido ningún color en las propiedades de la página ni aquí, el color del texto por defecto será el negro. 91 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  92. 92. Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo a otra página o archivo. Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen. Cuando creamos un enlace, lo que realmente haremos será utilizar la etiqueta <a></a> que es la que en HTML se encarga de definir los enlaces. 92 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández HIPERENLACES
  93. 93. Tipos de referencia Existen diferentes clases de rutas de acceso a la hora de definir los vínculos. Estas referencias no se limitan a los enlaces, se comportarán igual cuando indiquemos la ubicación de una imagen, de un archivo o de la hoja de estilo, etc. Referencia absoluta: Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo, incluyendo el protocolo http:// La referencia absoluta es independiente de la ubicación de la página, es válida siempre y cuando no cambie la ubicación del archivo enlazado. 93 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  94. 94. Referencia relativa al documento (por defecto): La ubicación del archivo enlazado se debe encontrar en la carpeta del sitio. Si queremos enlazar con una página o archivo dentro de la misma carpeta, no tenemos más que utilizar su nombre. Por ejemplo, pagina2.htm. Si está en una subcarpeta de la página actual, hay que indicar el nombre de la carpeta antes del archivo, y separarlos por una barra (/).Por ejemplo imagenes/logo.gif. 94 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  95. 95. Crear enlaces La forma más sencilla de crear un enlace es a través del inspector de propiedades. Para ello es necesario seleccionar el texto o el objeto que va a servir de enlace, y seguidamente establecer el Vínculo en el inspector HTML. Es posible crear también vínculos vacíos, que pueden ser útiles cuando se utilizan comportamientos, etc. Para ello es necesario escribir en Vínculo únicamente una almohadilla #. 95 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  96. 96. Otra forma de crear un enlace es a través del menú Insertar, opción Hipervínculo. Crear vínculos de esta forma es muy sencillo, sólo deberás rellenar los campos:  Texto: texto que mostrará el enlace. Si teníamos un texto seleccionado, aparecerá ahí.  Vínculo: página a la que irá redirigida el enlace, si es un enlace externo se debe escribir http://. Si es un enlace relativo al documento, busca el archivo que esta dentro del sitio. 96 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  97. 97.  Destino: la ventana donde se abrirá la página.  Título: se trata de la ayuda contextual del vínculo, que aparecerá al mantener un instante el cursor sobre el enlace.  Tecla de acceso: atributo que facilita la accesibilidad a las páginas, mediante la pulsación de la tecla Alt más la tecla de acceso indicada.  Índice de tabulador: Establece un índice indicando la prioridad del enlace y así configurar el modo en el que actuará el Tabulador es sus diferentes saltos. Por defecto, se tabularán por orden de aparición. 97 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  98. 98. Destino del enlace El destino del enlace determina en qué ventana va a ser abierta la página vinculada, puede variar dependiendo de si el documento está basado en marcos. Puede especificarse en el inspector de propiedades HTML a través de Destino, o en la ventana que aparece a través del menú Insertar, opción Hipervínculo.  _blank: Abre el documento vinculado en una nueva ventana o pestaña del navegador.  _parent: Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre. Tiene sentido si se emplean marcos 98 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  99. 99.  _self: Es la opción predeterminada, y la que se produce si no indicamos otra cosa. Abre el documento vinculado en el mismo marco o ventana que el vínculo.  _top: Abre el documento vinculado en la ventana completa del navegador. Tiene sentido si se emplean marcos. Actualmente no se usan marcos, por lo tanto no se especifica nada para abrirlo en la misma ventana. Lo habitual es abrir los enlaces en la misma ventana si son del mismo sitio, y los enlaces externos en ventanas nuevas. 99 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  100. 100. Enlace a correo electrónico Es posible especificar vínculos a direcciones de correo electrónico. Esto resulta útil cuando se desea que los visitantes de la web puedan contactar con nosotros. La sintaxis del vínculo en este caso es mailto:direccióndecorreo. Se define el vínculo a través del inspector de propiedades, seleccionando previamente el texto o la imagen deseados. 100 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  101. 101. También es posible a través del menú Insertar, opción Vínculo de correo electrónico. Un enlace a correo por lo regular abre Outlook. Es mejor crear un formulario de contacto, aunque esto requerirá una página dinámica. Otra opción es mostrar la dirección de correo electrónico, para que el usuario pueda enviarnos el sus comentarios como quiera. 101 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  102. 102. Las imágenes son muy importantes en la web, ya como complemento a la información o parte del diseño; pero no conviene abusar de estas, ya que aumentarán mucho el tamaño final de la web. Para insertar una imagen: 1. Menú Insertar Imagen 102 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández INSERTAR UNA IMAGEN
  103. 103. Propiedades de una imagen Cuando seleccionamos una imagen el Inspector de propiedades muestra esta apariencia: Atributos a la imagen:  Ancho y Alto son las dimensiones de la imagen, en el campo Alt se escribe el texto que remplazará a la imagen si ésta no puede mostrarse, para mostrar ayuda contextual cuando el usuario tenga el cursor sobre la imagen, debemos de empelar el atributo title. 103 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  104. 104.  Clase podrás asignarle un estilo que hayas creado anteriormente, así podrás darle alineación, bordes e incluso tamaño con sólo un clic.  Borde asigna borde a la imagen.  Alinear Puedes seleccionar su alineación con respecto al texto desde el campo Alinear. En CSS, existe el atributo vertical-align.  Por último Espacio V y Espacio H separan la imagen del texto y así no queden demasiado pegadas a él. En CSS, podemos hacerlo con el margin. 104 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  105. 105. Un rollover es una imagen que cambia por otra cuando el puntero se sitúa sobre ella. Este tipo de imagen suele utilizarse en los menús o en los botones para desplazarnos a través de distintas páginas. Para insertar un rollover : 1. Menú Insertar  Objetos de ImagenImagen de sustitución. 105 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández IMAGEN DE SUSTITUCIÓN. ROLLOVER
  106. 106. Todos los objetos se alinean por defecto a la izquierda de las páginas web, pero gracias a las tablas es posible distribuir el texto en columnas, colocar imágenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas serían imposibles de realizar. La finalidad de las tablas es presentar una serie de datos de forma clara y organizada, dividiéndolos en filas y columnas. 106 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández TABLAS
  107. 107. Insertar una tabla 1. Menú Insertar Tabla. En la ventana habrá que especificar el número de Filas y Columnas que tendrá la tabla, así como el Ancho de la tabla.  El Ancho puede ser definido como Píxeles o como Porcentaje.  Grosor del Borde indica el grosor del borde de la tabla en píxeles, por defecto se le asigna uno (1). Si lo ponemos a 0 o en blanco, la tabla no mostrará borde. 107 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  108. 108.  Relleno de celda (cellpadding) indica la distancia entre el contenido de las celdas y los bordes de éstas.  Espacio entre celdas (cellspacing) indica la distancia entre las celdas de la tabla.  Encabezado indicar el contenido de filas o columnas, es recomendable utilizar encabezados en el caso de que los usuarios utilicen lectores de pantalla.  Texto incluye el título que aparecerá fuera de la tabla.  Resumen Indica una descripción de la tabla. 108 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  109. 109. Formato de tabla Las propiedades de la tabla se especifican a través de su inspector de propiedades. A través del inspector de propiedades se pueden modificar los valores que se especificaron al insertar la tabla. Al mismo tiempo, pueden indicarse otros como pueden ser:  Alinear (que permite alinear la tabla a la izquierda, al centro o a la derecha de la pantalla),  Borde  relleno y espaciado de la celda. 109 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  110. 110. Si se selecciona una celda, o un conjunto de celdas, el inspector de propiedades cambia, para permitir especificar otros valores. El inspector de propiedades permite alternar entre las propiedades HTML, ( propiedades del texto insertado en la celda(s) seleccionada, y la propiedades CSS para definir los estilos. En la parte inferior se especifican valores propios de la celda, como el color o imagen de fondo, alineación del contenido (Horz.y Vert.), tamaño (An. y Al.), ajuste al contenido (No aj) y encabezado (Enc). 110 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  111. 111. Añadir y eliminar filas y columnas Existen varias formas de añadir y eliminar filas y columnas a una tabla, Selecciona una celda o varias y ve al: 1. Menú Modificar Tabla Insertar fila o Insertar columna. Según la selección, algunas opciones de Tabla se podrán utilizar mientras que otras no. La fila se inserta sobre la celda o el conjunto de celdas seleccionadas, mientras que la columna se inserta a su izquierda. 111 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  112. 112. Otra opción es, Insertar filas o columnas.... Al seleccionarla aparece una nueva ventana, donde es posible determinar si lo que se insertarán serán filas o columnas, el número de ellas que se insertará, y la posición donde se insertarán. Para eliminar una fila o una columna, hay que colocar el cursor en la fila o columna a eliminar y elegir la opción Eliminar fila o Eliminar columna del menú Tabla. También se puede seleccionar la fila o columna a borrar y pulsar la tecla de borrado (Del o Supr) 112 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  113. 113. Anidar, dividir y combinar celdas Es posible insertar tablas dentro de las celdas de otras tablas. A esto se le llama anidar tablas. Para anidar tablas sólo posiciona el cursor en la celda donde quieres insertar la nueva tabla e insertarla. Combinar celdas consiste en convertir 2 o más celdas en una sola, por tanto se eliminará el borde. Dividir celdas consiste en partir en dos una celda. Una de las formas de dividir y combinar celdas es a través del inspector de propiedades. 113 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  114. 114. Si se seleccionan varias celdas pueden combinarse pulsando sobre el botón del inspector de propiedades. Sólo es posible combinar celdas contiguas, de forma vertical u horizontal. Para dividir una celda pulsar sobre el botón del inspector de propiedades, o en Dividir celda de la opción Tabla. En la ventana especifica, si la celda se divide en filas o columnas , y el número de éstas. 114 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  115. 115. Los marcos o frames sirven para distribuir mejor los datos de las páginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegación, mientras que otras sí pueden cambiar. Además de mejorar la funcionalidad, pueden mejorar también la apariencia. Cada uno de los marcos de una página, contiene un documento HTML individual. 115 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández MARCOS
  116. 116. Crear macos Para crear un marco, primero hay que abrir algún documento. Puede ser uno nuevo o uno ya existente. 1. Menú Insertar  HTML  Marcos A través de esta opción puede elegirse el tipo de marco que va a crearse. Seleccionar marcos 1. Menú Ventana  Marcos o bien pulsa Mayús + F2. 116 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  117. 117. El panel Marcos muestra los marcos que contiene el documento y se puede pasar de uno a otro pulsando sobre ellos en el panel. O bien pulsa sobre el borde que rodea a los marcos (el que aparece más grueso y en relieve en la imagen). Guardar Es necesario guardar la página que contiene el grupo de marcos, así como cada una de las páginas que están incluidas en sus marcos. Para guardar el conjunto de marcos, hay que seleccionarlo previamente. Para guardar cada uno de los otros documentos, hay que seleccionarlos antes de guardarlos. 117 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  118. 118. Configurar marcos Una vez seleccionado un marco a través del panel Marcos, pueden establecerse sus propiedades a través del inspector de propiedades.  Cada marco tiene asignado un nombre, que puede cambiarse a través de Nombre de marco, el nombre no puede contener espacios en blanco.  En Origen aparece el nombre del documento HTML que está contenido en el marco.  En Bordes puede elegirse si aparecerá o no una línea separando el marco del resto de marcos. 118 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  119. 119.  En el caso de que se muestre el borde, se puede especificar un color para éste a través de Color borde.  Desplaz. indica si aparecerán o no las barras de desplazamiento cuando el documento del marco no pueda visualizarse completamente.  Si la opción Mismo tamaño está activa, indica que los usuarios no podrán variar las medidas del marco desde el navegador.  El Ancho del margen y el Alto del margen indican la separación que habrá entre el contenido del marco y sus bordes izquierdo-derecho y superior-inferior. 119 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  120. 120. Si lo seleccionado es todo el conjunto de marcos (la página de marcos), el inspector de propiedades es algo diferente. En Bordes puede elegirse si aparecerá o no una línea separando los marcos entre sí y puede especificarse un color para este a través de Color del borde. También es posible establecer un grosor para el borde a través de Ancho.  El campo Columna (o Fila dependiendo del marco Seleccionado ) especifica el tamaño del marco (Píxeles, Porcentaje o Relativo. 120 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  121. 121. Los formularios se utilizan para recoger datos de los usuarios. Un formulario está formado, entre otras cosas, por etiquetas, campos de texto, menús desplegables, y botones. Elementos de formulario  Campo de texto y Área de texto: Permiten introducir texto. El Campo de texto solo permite al usuario escribir una línea, mientras que el Área de texto permite escribir varias. 121 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández FORMULARIOS
  122. 122. Se puede pasar de Campo de texto a Área de texto a través del inspector de propiedades, marcando la opción Una línea o Multi línea respectivamente. También es posible definirlo como Contraseña es como el campo de texto pero las letras que va tecleando el usuario se sustituyen por un carácter como podrás ver en la imagen siguiente. 122 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  123. 123.  Botón El botón tiene asignadas tres opciones: Enviar formulario, Restablecer formulario (borrar todos los campos del formulario), o Ninguna (para poder asignarle un comportamiento diferente de los dos anteriores). Es posible cambiar el texto del botón, a través de la propiedad Valor del inspector de propiedades. Tiene que haber un botón del tipo Enviar formulario, imprescindible para enviar los datos. Suele acompañase de un botón Restablecer formulario, en el caso de que el usuario quiera comenzar de nuevo a rellenarlo. 123 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  124. 124.  Casilla de verificación Es un cuadrito que se puede activar o desactivar, para indicar si se ha elegido una opción o no. Puede asignársele el Estado inicial Activado o Desactivado.  Botón de opción Es un pequeño botón redondo que puede activarse o desactivarse. Si hay varios en el mismo formulario con el mismo nombre, sólo puede haber uno activo. Cuando se activa uno, automáticamente se desactivan los demás. Esto obliga al usuario a sólo poder elegir una opción.  Seleccionar (Lista/Menú) Una lista o menú es un elemento de formulario que lleva asociada una lista de opciones. Los elementos se añaden a través del botón Valores de lista... del Inspector de propiedades. 124 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  125. 125. Cuando se trata de un menú, solo es posible elegir uno de los elementos, pero si se trata de una lista, a través de Selecciones del inspector de propiedades puede permitirse que se seleccionen varios simultáneamente.  Etiqueta Se utiliza para poner nombre al resto de elementos de formulario, para que el usuario pueda saber qué datos ha de introducir en cada uno de ellos. Una propiedad muy importante de los formularios es su nombre. Ya que al recibir los datos, a través del nombre sabremos qué control los envía. 125 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  126. 126. Crear formularios Antes de insertar los elementos o controles al formulario, se debe crear un formulario. Los elementos se introducen en él. 1. Menú Insertar  Formulario Formulario. Creado el formulario, aparece un recuadro de líneas naranjas discontinuas, similar al de la imagen siguiente. Estas líneas son ayudas visuales al trabajar en el diseño. Las propiedades del formulario, más importantes son: Acción. En el indicamos dónde se envían los datos. 126 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  127. 127. Dentro del formulario se insertan los elementos de formulario. Es recomendable utilizar tablas para organizar los elementos del formulario, con ello se consigue una mejor comprensión y apariencia. Validar formularios A través de JavaScript se pueden validar los formularios antes de que se envíen, avisando al usuario para que corrija los errores, como campos obligatorios sin rellenar. Esto es mucho más eficiente y rápido que enviar la página y validarla sólo en el servidor. 127 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  128. 128. Para validar un formulario hay que abrir el panel de Comportamientos. 1. Menú Ventana Comportamientos . Comportamientos forma parte del panel Inspector de etiquetas. En el panel despliega el botón y pulsa Validar formulario, seleccionado el formulario previamente. Puede seleccionarse uno por uno cada elemento del formulario, especificando los requisitos que han de cumplir (Valor obligatorio, numero, etc. ) 128 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  129. 129. Películas Flash (SWF) Las películas Flash son animaciones, con extensión SWF. Frecuentemente son utilizadas como páginas iniciales de los sitios web como presentación, banners publicitarios, o botones... Insertar Multimedia. 1. Menu Insertar  Media SWF, o pulsar Ctrl + Alt + F. Se inserta también empleando el panel Insertar Común SWF 129 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández MULTIMEDIA
  130. 130. Propiedades de un archivo multimedia:  Ancho (An.) y alto (Alt.)  Archivo: ruta del archivo SWF.  Origen: ruta del archivo FLA.  Editar: edición del archivo original.  Bucle: indica si se volverá a comenzar la animación  Rep. Autom. Indica si que la película se reproducirá al cargar la pagina 130 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  131. 131.  Calidad con la que se vera el archivo.  Escala permite elegir como se verá del archivo.  Alinear permite alinear la película en relación con el texto.  Wmode modo de ventana (opaco, transparente, con color de fondo)  Reproducir permite ver la película. Al insertar animaciones Flash, Dreamweaver añade algunos archivos que permiten reproducir las animaciones, normalmente creando la carpeta Scripts. Es importante incluir la carpeta cuando se publique el sitio para poder ver los archivos. 131 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  132. 132. Sonido No es común incluir sonido en una página web, ya que los usuarios escuchan su propia música, por lo que resultar algo molesto. A pesar de ello, incluir un sonido agradable, apropiado al contenido de la página. Las páginas que contienen deben ofrecer la posibilidad de activarlo o desactivarlo. Los formatos de sonido más comunes son: MP3, WAV y MIDI. Lo ideal es incluir archivos de audio que no ocupe mucho espacio 132 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  133. 133. Insertar archivo de audio en un documento: 1. Menú Insertar  Medía  Plug-in. Un plug-in es un añadido al navegador, permite realizar funciones extras, como reproducir un archivo de música. Si no lo tiene instalado, nos invitará a instalarlo. Los archivos que son insertados como plug- llllllllllin son representados por Dreamweaver con la imagen. En el inspector de propiedades se establecen la altura y la anchura que mostrarán los controles de audio. 133 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  134. 134. Si no especifica ningún tamaño, se mostrará el tamaño por defecto. Si solo se desea que se escuche el sonido en la página, pero no mostrar los controles de audio, los campos Al y An deben valer cero. El sonido se reproduce automáticamente al cargar la página, y solo una vez. Se pueden modificar estos valores a través del botón Parámetros. 134 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  135. 135.  Para que el archivo se reproduzca continuamente se añade loop="true".  Para reproducir automáticamente, se añade autostart="false" En código HTML quedaría de la siguiente forma: <embed src="media/audio.mid" autostart="false" loop="true"></embed> Lo más habitual en la web es insertar el sonido empleando Flash. Esto hace que no se necesiten plug-in, sólo poder reproducir Flash. Además, nos permite crear los controles personalizados. 135 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  136. 136. Vídeo En ocasiones se puede incluir vídeo en una página web, pero hay que tomar en cuenta que los vídeos necesitan mucho espacio en disco, y por tanto, su tiempo de descarga es lenta . Los formatos de vídeo mas comunes en Internet son AVI, MPEG y MOV. Insertar un archivo de vídeo en un documento: 1. Menú Insertar  Medía  Plug-in. 136 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  137. 137. El inspector de propiedades para vídeo es el mismo que el de audio, ya que ambos se insertan como Plug-in. El ancho y alto por defecto es de 32 x 32 insuficiente para ver un vídeo. Es mejor borrarlos, y así el vídeo se mostrará con su tamaño original. Si se conoce el tamaño del vídeo, se puede insertar directamente, pero el tamaño de los controles de reproducción, dependen de cada navegador. Nota: El video tiene el mismo comportamiento que el sonido. 137 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  138. 138. Al crear un sitio web, se debe tomar en cuenta que las páginas deben seguir un formato uniforme, además es frecuente que ciertos elementos se repitan en cada página(logo, menú). Comúnmente se hacen copias de los documentos creados, y se trabaja sobre estas copias, modificando simplemente su contenido. Esta es la forma más sencilla de tener páginas con una estructura basada en la estructura de otras ya creadas previamente. 138 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández PLANTILLAS
  139. 139. Las plantillas son una de copia de la página en la que van a estar basadas el resto de páginas del sitio web, pero que incluyen la posibilidad de establecer unas zonas editables y otras zonas que serán fijas, que no podrán ser modificadas. No se pueden modificar las propiedades de una página que está basada en una plantilla, a excepción del título. Cuando se modifica el diseño de una plantilla, se modifican todas las páginas basadas en ella. Esto nos ahorrar mucho trabajo. Las plantillas tiene extensión dwt almacenadas en el sitio web, en la carpeta Templates. 139 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  140. 140. Crear plantillas Las plantillas pueden crearse desde cero, o a partir de una página ya existente. Para crear una plantilla desde cero es a través del panel Activos. 1. Menú Ventana  Activos. Una vez abierto el panel se selecciona el botón , para poder trabajar con las plantillas. Los botones inferiores del panel Activos son sssssssss similares a los del panel Estilos CSS. 140 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  141. 141.  Crear una nueva plantilla, pulsa sobre el botón . Si está desactivado, da clic botón derecho del ratón sobre el área de plantilla y elige Nueva Plantilla).  Modificar la plantilla, selecciona de la lista y pulsamos el botón .  Eliminar la plantilla, selecciona de la lista y pulsamos el botón . Para crear una plantilla a partir de un archivo existente es necesario abrir el archivo, y guardarlo como plantilla a través del menú Archivo Guardar como plantilla. Especifica el nombre y elige en sitio. 141 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  142. 142. Al guardar la plantilla la página cambia de carpeta, a Templates. Si contiene enlaces o imágenes se activa la opción de Actualizar vínculos. Al hacerlo, la plantilla se verá con normalidad y se podrá emplear para crear páginas en cualquier carpeta. Si no se hace, la plantilla se mostrar sin las imágenes u hojas de estilo, ya que la ruta no será la correcta, y sólo servirá para crear páginas en la misma carpeta que el archivo desde el que creamos la plantilla. 142 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  143. 143. Las marquesinas son texto, imágenes, o una mezcla entre texto e imágenes, que pueden desplazarse de un lado a otro de la ventana en forma de línea. Las marquesinas no se pueden insertar a través del editor gráfico de Dreamweaver, es necesario hacerlo a través del código. Para crear una marquesina hay que insertar las etiquetas <marquee> y </marquee>. Entre estas etiquetas se introducen los elementos que se desea que aparezcan en la marquesina. 143 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández MARQUESINAS
  144. 144. Dreamweaver permite insertar la fecha. 1. Menú Insertar Fecha. En la ventana se establece el formato de la fecha, y si se desea se actualice o no automáticamente al modificar y guardar la página. 144 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández FECHA
  145. 145. La regla horizontal es una línea que cruza horizontalmente, suele utilizarse para separar secciones dentro de una misma página. Para insertar una regla: 1. Menú Insertar HTML Regla horizontal. El inspector de propiedades de la regla es el siguiente. Se puede modificar la apariencia de la regla, con Al (altura) y Sombreado, el color mediante CSS. 145 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández REGLA HORIZONTAL
  146. 146. Las capas son unos recuadros, elementos de bloque, destinados a contener y agrupar otros elementos, son llamadas también layers o divisiones, se crean con la etiqueta <div></div>. Al ser elementos contenedores, son útiles para organizar los elementos. 146 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández CAPAS
  147. 147. Las capas pueden moverse de una posición a otra y redimensionarse. Dentro de la capa es posible insertar texto, tablas, imágenes, animaciones flash, y todos los elementos que puede contener un documento HTML. Este icono sirve para seleccionar la capa al pulsar sobre él, y al eliminarlo se elimina también la capa. Las capas, combinadas con JavaScript pueden dotar a una página de verdadero dinamismo. 147 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  148. 148. Insertar Capas 1. Menú Insertar  Objeto de diseño  Etiqueta Div (división simple) o Div PA (Capa con Posición Absoluta) Una vez se ha insertado la capa, pueden editarse sus atributos, pero para ello hay que seleccionarla primero. Seleccionar una capa: 148 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández 1. Pulsar sobre el icono. Ó 2. Si hay varias capas se seleccionan a través de la pestaña Elementos PA
  149. 149. Formato de Capas Propiedades de las Capas  Elemento CSS-P: nombre o ID de la capa.  Izq y Sup indica la distancia en píxeles o en porcentaje, que hay entre los límites izquierdo y superior del documento.  An y Al indican la anchura y la altura  Índice Z es el número de orden de colocación de las capas. 149 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  150. 150.  Vis indica la visibilidad inicial de la capa. La visibilidad puede ser de cuatro tipos: Default (visibilidad según el navegador), Inherit (se muestra la capa mientras la página a la que pertenece también se esté mostrando), Visible (muestra la capa, aunque la página no se esté viendo) Hidden (la capa está oculta). La visibilidad también puede cambiarse a través del panel Elementos PA, pulsando sobre la imagen del ojo. El ojo abierto indica Visible, y el ojo cerrado indica Hidden. 150 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  151. 151.  Im. fondo y Col indica una imagen o un color de fondo para la capa.  Desb. (Desbordamiento). controla cómo aparecen las capas en el navegador cuando el contenido excede el tamaño especificado de la capa.  Visible el contenido adicional se muestra, excediendo los límites de la capa.  Hidden (oculto) el contenido adicional no se mostrará en el navegador.  Scroll (desplazamiento) el navegador añadirá barras de desplazamiento a la capa.  Auto (automático) el navegador muestra barras de desplazamiento para la capa cuando sean necesarias. El ID ha de ser único para cada capa, pero puede repetirse en páginas distintas. 151 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  152. 152. Los comportamientos son acciones que suceden cuando los usuarios realizan algún evento sobre un objeto, como puede ser mover el ratón sobre una imagen, pulsar sobre un texto, hacer doble clic sobre un mapa de imagen, etc. Los comportamientos no existen como código HTML, se programan en JavaScript. Dreamweaver permite insertarlos a través del panel Comportamientos, por lo que no es necesario escribir ninguna línea de código JavaScript para programarlos. 152 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández COMPORTAMIENTOS
  153. 153. El panel Comportamientos se puede abrir: 1. Menú Ventana  Comportamientos o pulsar Mayús+F4.  En el panel despliega el botón pulsando sobre él, y en Mostrar eventos elige HTML 4.1, opción por defecto. 153 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  154. 154. Insertar comportamiento 1. Asignar un ID al elemento tendrá el comportamiento. 2. Selecciona el objeto que activa el comportamiento (imagen, texto, etc.). 3. El elemento al que afecta y el que activa el comportamiento puede ser el mismo o no. 4. Despliega el botón del panel comportamientos aparece la lista de todas las acciones posibles. 5. Según el elemento sobre el que se desee aplicar el comportamiento, se podrán elegir unas acciones, mientras que otras no. 154 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  155. 155. 6. Después de elegir una acción, el comportamiento correspondiente aparece en el panel Comportamientos. Cada comportamiento tiene asociados un evento y una acción. Para eliminar un comportamiento, selecciónalo en el panel Comportamientos y pulsa sobre el botón . También es posible cambiar el orden de los comportamientos aplicados a un objeto, seleccionándolo y ordenándolo mediante los botones . 155 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  156. 156. Para la creación de páginas dinámicas, además de etiquetas HTML es necesaria la utilización de algún lenguaje de programación que se ejecute del lado del servidor, así como la existencia de una base de datos. Los lenguajes utilizados para la generación de este tipo de páginas son: ¤ Perl CGI ¤ PHP ¤ JSP ¤ ASP Los manejadores de bases de datos que pueden trabajar con páginas dinámicas son : 156 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández PÁGINAS DINAMICAS
  157. 157. ¤ PostgresSQL ¤ MySQL ¤ Oracle ¤ Microsoft SQL Server Las páginas Web dinámicas ofrecen mayor interactividad con el usuario, así como una mayor facilidad en el mantenimiento de un sitio. Ante todas las ventajas de este tipo de páginas se encuentra la desventaja de los buscadores, que sólo indexan un número reducido de páginas dinámicas, debido a que difícilmente se detectan URL's acompañados de gran cantidad de parámetros y caracteres tales como "?", "&" y "=". 157 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  158. 158. SERVIDOR WEB «APACHE» Apache es principalmente usado para servir páginas web estáticas y dinámicas en la WWW. Apache es el servidor web del popular sistema XAMP, junto con MySQL y los lenguajes de programación PHP/Perl/Python. Características de Apache * Soporte para los lenguajes perl, python, tcl y PHP. * Permite autenticación de base de datos basada en SGBD. 158 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  159. 159. INSTALACIÓN DEL SERVIDOR (XAMPP) Descargue el software de la siguiente dirección: http://www.apachefriends.org/es/xampp.html 159 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  160. 160. O bien en su buscador Google escriba XAMPP, elija la primer liga. 160 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  161. 161. Seleccione la opción XAMPP para Windows 161 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  162. 162. En la pagina que muestra, desplace su barra de navegación hasta localizar la siguiente liga 162 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  163. 163. Descargue el archivo, de clic botón derecho al mensaje emergente, para desplegar el menú de opciones. 163 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  164. 164. De clic en Guardar, o bien ejecute directamente. 164 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  165. 165. De clic en Next > para inicializar la instalación. 165 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  166. 166. Deje los valores por default, solo de clic en Next. 166 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  167. 167. Active las opciones Install Apache as service e install MySQL y de clic en el botón Install 167 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  168. 168. Espere, ha comenzado la instalación. 168 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  169. 169. Una vez terminada la instalación de clic en Finish. En la siguiente ventana de clic en Aceptar. 169 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  170. 170. Para inicializar el servidor busque en su computadora la ruta que muestra la figura. 170 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  171. 171. Inicie los servicios Apache y MySQL. 171 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  172. 172. Para entrar al manejador de base de datos escriba en su navegador lo siguiente: localhost o bien 127.0.0.1 y de clic en la opción phpMyAdmin 172 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  173. 173. Para crear la base de datos, de clic en el botón Base de datos. 173 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  174. 174. Escriba el nombre de la base de datos y de clic en el botón Crear. 174 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  175. 175. Una vez creada la base de datos, escriba el nombre de la tabla y el numero de campos y de clic en el botón Continuar 175 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  176. 176. Escriba el nombre de los campos y el tipo de datos, de clic en Grabar. 176 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  177. 177. Para introducir registros, de clic en el botón Insertar, escriba los datos y de clic en Continuar 177 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  178. 178. PHP PHP es el acrónimo de Hipertext Preprocesor, es un lenguaje de código abierto, incrustado en HTML. Es un lenguaje de programación del lado del servidor gratuito e independiente de la plataforma, rápido, con una gran librería de funciones y mucha documentación. Un lenguaje del lado del servidor es aquel que se ejecuta en el servidor web, justo antes de que se envíe la página a través de Internet al cliente. 178 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  179. 179. Funcionamiento de las páginas PHP 179 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  180. 180. El código PHP está entre medio de etiquetas de comienzo y final <?php ?> Estas etiquetas nos permitirán entrar y salir del "modo PHP". 180 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  181. 181. UN PRIMER EJEMPLO 181 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  182. 182. Delimitadores de inicio y fin: <?php ?> . Separación de instrucciones: Igual que en C o Perl terminando cada declaración con un punto y coma. Comentarios: Una sola línea // Varias líneas /* - */. SINTAXIS BÁSICA 182 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  183. 183. Tipos de datos:  Array $ a[ 3 ] = " 123 " ;  Números en punto flotante $ numero = 1.23 ;  Entero $ a = 123 ;  Cadena $ texto = " Hola " ; 183 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  184. 184. Variables : En PHP las variables se representan como un signo de dólar seguido por el nombre de la variable. El nombre de la variable es sensible a minúsculas y mayúsculas. $var = "Bob"; $Var = "Joe"; echo "$var, $Var"; 184 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  185. 185. UN SEGUNDO EJEMPLO 185 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  186. 186. Variables externas a PHP: Formularios HTML (GET y POST) Cuando se envía un formulario a un script PHP, las variables de dicho formulario pasan a estar automáticamente disponibles en el script gracias a PHP. Por ejemplo, consideremos el siguiente formulario: <form action="foo.php3" method="post"> Name: <input type="text" name="name"><br> <input type="submit"> </form> Cuando es enviado, PHP creará la variable $name, que contendrá lo que sea que se introdujo en el campo Name: del formulario. 186 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  187. 187. EJEMPLO 187 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  188. 188. ECHO Y PRINT echo: Visualiza una o más cadenas. print: visualiza una cadena de vídeo como eco( ); Diferencias entre echo y print( ) A pesar de lo que siempre se oye, (que echo no es una función y print sí) tanto echo como print no son funciones propiamente dichas, sino construcciones del lenguaje. ¿Qué se desprende de esto que nos pueda ser útil? : Print, al comportarse como una función devuelve un valor: 1 (o true) SIEMPRE. 188 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  189. 189. COMILLAS SIMPLES Y COMILLAS DOBLES Las comillas simples muestran el contenido tal y como lo hemos escrito. Las comillas dobles parsean nuestra cadena en busca de posibles variables a interpretar por PHP. Las comillas simples son más rápidas que las dobles porque no pierden el tiempo interpretando el contenido. 189 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  190. 190. Ejemplos: 190 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  191. 191. OPERADORES Aritméticos Comparación Asignación = 191 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  192. 192. DREAMWEAVER Para crear una pagina dinámica seleccione PHP del menú Crear nuevo 192 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  193. 193. Pantalla principal de Dreamweaver. 193 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  194. 194. Para comenzar una página dinámica es necesario crear primeramente un Sitio. 1. Seleccionamos menú Sitio. 2. Clic en Nuevo sitio. 3. En la ventana que se despliega, teclear el nombre del sitio.(Para nuestro ejemplo Escuela) 4. Clic en Servidores 194 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  195. 195. 5. Clic en el botón , para agregar un servidor local. 6. Llenar los campos como se observa en la ventana y dar clic en Guardar 195 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  196. 196. 7. Finalmente dar clic en Guardar,. 8. Ahora vamos a crear la conexión con la base de datos 9. Seleccionar el menú Ventana y activar el panel Bases de Datos. 196 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  197. 197. 7. Finalmente dar clic en Guardar,. 8. Ahora vamos a crear la conexión con la base de datos 9. Seleccionar el menú Ventana y activar el panel Bases de Datos. 197 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  198. 198. 10. Una vez activado el panel, Da clic en el botón , esquina inferior derecha, para desplegar el menú emergente Conexión MySQL. 11. Teclea el nombre de la conexión, del servidor MySQL y Nombre del usuario y contraseña. 12. Da clic en el botón Seleccionar 198 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  199. 199. 13. En la ventana que se despliega, selecciona la base de datos Escuela. 14. Da clic en el botón Aceptar. 15. Da clic en el botón Prueba, para verificar la conexión. 16. El resultado final, será la conexión CEscuela. 199 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  200. 200. MOSTRAR DATOS EN UNA TABLA 1. Selecciona la pestaña Datos. 2. Da clic en Tabla dinámica 3. Da clic en el punto numero 4 4 para crear el juego de registros. 200 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  201. 201. 4. Escribe el nombre para el RecordSet. 5. Deja los valores que vienen por default. 6. Da clic en prueba para observar el resultado de la consulta. 7. Da clic en Aceptar 201 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  202. 202. 7. Deja los valores que vienen por default y da clic en Aceptar. 8. El resultado será el siguiente. 9. Guarda el documento con el nombre de tabla, presiona F12, para mostrar los resultados en el explorador. 202 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  203. 203. INSERCIÓN DE REGISTROS 1. Selecciona la pestaña Datos. 2. Da clic en Insertar registro. 3. Deja los datos que vienen por default, solo selecciona el archivo tabla.php. 4. Da clic en el botón Aceptar 203 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  204. 204. 4. El resultado será el siguiente 5. Guarda el documento con el nombre de insertar y presiona F12. 6. Inserte los datos, excepto el numero de control. 7. Da clic en el botón insertar registro. 204 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  205. 205. 8. El resultado en el explorador será el siguiente. 205 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  206. 206. ACTUALIZAR DE REGISTROS 1. Selecciona la pestaña Datos. 2. De clic en Actualizar registro. 3. Crea el juego de registros. 4. Da clic en el botón Aceptar. 206 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  207. 207. 5. Selecciona el archivo tabla.php. 6. Da clic en el botón Aceptar . 7. El resultado será el siguiente. 8. Guarda el documento con el nombre de Actualizar. 207 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  208. 208. 9. Agrega una Barra de navegación. 10. Deja los valores que vienen por default . 11. Da clic en el botón Aceptar. 12. Presiona F12 para ver los resultados en el explorador. 208 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  209. 209. ELIMINAR DE REGISTROS 1. Crea un nuevo documento PHP. 2. Crea un juego de registros. 3. Arrastra los campos del juego de registros al documento. 4. Inserta una barra de navegación. 5. Guarda el documento con el nombre de Consulta. 209 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  210. 210. 6. Selecciona el campo NCtrol. 7. En la ventana de propiedades busca el campo vinculo y escribe eliminar.php?Nctrol= 210 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  211. 211. 8. Guarda los cambios y presiona F12. 9. Crea un nuevo documento. 10. Guardalo con el nombre de eliminar. 11. Crea un juego de registros. 12. Arrastra al documento solo los campos Nombre y dirección. 211 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  212. 212. 12. Inserta un formulario 13. Agrega un campo oculto. 14. En la ventana de propiedades, cambia el nombre del campo oculto por NC. 15. Da clic en vincular con fuente dinámica. 16. Selecciona el campo NCtrol. 17. Da clic en Aceptar 212 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  213. 213. 18. Inserta un botón al formulario, cambia la etiqueta a Eliminar. 19. Da clic en el botón Eliminar registro. 20. Modifica los datos que vienen por default a los valores que se muestran en la ventana «Eliminar registro» 213 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  214. 214. 21. Selecciona el formulario, cambia el Método de envió a GET. 22. Guarda los cambios. 23. Ejecuta la pagina Consulta 214 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández
  215. 215. 23. Selecciona el registro a eliminar, dando clic en el campo Numero de control. 24. El resultado será: 25. Da clic en eliminar 26. El resultado será: 215 Elaboró:GuadalupeAngelesMata. MaríaVictoriaCortesGómez. AlmendraCabreraHernández

×