Elaboración de paginas web dinamicas

215
ELABORACIÓN DE PAGINAS WEB 1 Elaboró: Guadalupe Angeles Mata. María Victoria Cortes Gómez. Almendra Cabrera Hernández

description

Apuntes Submodulo III, Bachillerato Tecnologico

Transcript of Elaboración de paginas web dinamicas

Page 1: Elaboración de paginas web dinamicas

ELABORACIÓN DE PAGINAS WEB 1

Ela

boró

: Gu

ad

alu

pe A

ngele

s Mata

.

Ma

ría V

ictoria

Corte

s Góm

ez.

Alm

en

dra

Ca

bre

ra H

ern

án

dez

Page 2: Elaboración de paginas web dinamicas

OBJETIVO GENERAL

Utiliza HTML,

Dreamweaver, Php y MySQL

para la elaboración de

paginas web dinámicas.

2

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 3: Elaboración de paginas web dinamicas

¿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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 4: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 5: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 6: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 7: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 8: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 9: Elaboración de paginas web dinamicas

<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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 10: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 11: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 12: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 13: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 14: Elaboración de paginas web dinamicas

COMENTARIOS EN HTML

Los comentarios: Se utilizan para documentar

la página.

Los comentarios son ignorados por el navegador.

< !-- //-- > .

14

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 15: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 16: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 17: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 18: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 19: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 20: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 21: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 22: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 23: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 24: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 25: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 26: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 27: Elaboración de paginas web dinamicas

REFERENCIA RELATIVA AL DOCUMENTO

Conduce a un punto dentro del mismo

documento, para ello debemos colocar.

<a href =“#puntoancla”>

Cocada </a>

27

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 28: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 29: Elaboración de paginas web dinamicas

ENLACE A CORREO ELECTRÓNICO

Es posible incluir enlaces con direcciones de

correo electrónico.

<a href = “mailto:” >

</a> 29

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 30: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 31: Elaboración de paginas web dinamicas

_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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 32: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 33: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 34: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 35: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 36: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 37: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 38: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 39: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 40: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 41: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 42: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 43: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 44: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 45: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 46: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 47: Elaboración de paginas web dinamicas

La etiqueta INPUT es esencial para los

formularios, ya que se usa para crear elementos

interactivos.

La sintaxis es:

< input >

ETIQUETA INPUT

47

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 48: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 49: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 50: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 51: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 52: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 53: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 54: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 55: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 56: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 57: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 58: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 59: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 60: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 61: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 62: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 63: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 64: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

CREAR UN NUEVO DOCUMENTO EN

DREAMWEAVER

Page 65: Elaboración de paginas web dinamicas

65

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

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

Page 66: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

LAS BARRAS

Page 67: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 68: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 69: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 70: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

INSPECTORES Y PANELES

Page 71: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 72: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 73: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

CONFIGURACIÓN DEL SITIO

Page 74: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 75: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

CREAR UN SITIO

1. Menú Sitio Nuevo

sitio.

1. Administrar sitios

Nuevo..

Page 76: Elaboración de paginas web dinamicas

Independientemente de la forma de crear el sitio,

se mostrara la siguiente ventana. Selecciona la

carpeta Avanzadas y llena los campos.

76

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Nombre del sitio

Ruta donde se

localiza el sitio

Page 77: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

ABRIR UN SITIO

También podemos utilizar el

panel Archivos, buscar y

seleccionar el sitio a abrir en el

menú desplegable Archivos.

Page 78: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

PROPIEDADES DEL DOCUMENTO

Page 79: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 80: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 81: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 82: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 83: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 84: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 85: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

EL TEXTO: PROPIEDADES Y FORMATO

Page 86: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Es importante emplear correctamente los encabezados,

ya que se organizará mejor el contenido de nuestra

web, así como para los buscadores y visitantes.

Page 87: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 88: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 89: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 90: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 91: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 92: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

HIPERENLACES

Page 93: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 94: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 95: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 96: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 97: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 98: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 99: Elaboración de paginas web dinamicas

_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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 100: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 101: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 102: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

INSERTAR UNA IMAGEN

Page 103: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 104: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 105: Elaboración de paginas web dinamicas

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 ImagenImagen

de sustitución.

105

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

IMAGEN DE SUSTITUCIÓN. ROLLOVER

Page 106: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

TABLAS

Page 107: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 108: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 109: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 110: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 111: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 112: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 113: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 114: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 115: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

MARCOS

Page 116: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 117: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 118: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 119: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 120: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 121: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

FORMULARIOS

Page 122: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 123: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 124: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 125: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 126: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 127: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 128: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 129: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

MULTIMEDIA

Page 130: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 131: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 132: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 133: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 134: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 135: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 136: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 137: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 138: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

PLANTILLAS

Page 139: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 140: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 141: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 142: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 143: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

MARQUESINAS

Page 144: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

FECHA

Page 145: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

REGLA HORIZONTAL

Page 146: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

CAPAS

Page 147: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 148: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

1. Pulsar sobre el icono. Ó

2. Si hay varias capas

se seleccionan a través

de la pestaña Elementos

PA

Page 149: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 150: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 151: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 152: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

COMPORTAMIENTOS

Page 153: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 154: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 155: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 156: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

PÁGINAS DINAMICAS

Page 157: Elaboración de paginas web dinamicas

¤ 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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 158: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 159: Elaboración de paginas web dinamicas

INSTALACIÓN DEL SERVIDOR (XAMPP)

Descargue el software de la siguiente dirección:

http://www.apachefriends.org/es/xampp.html

159

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 160: Elaboración de paginas web dinamicas

O bien en su buscador Google escriba XAMPP, elija la

primer liga.

160

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 161: Elaboración de paginas web dinamicas

Seleccione la opción XAMPP para Windows

161

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 162: Elaboración de paginas web dinamicas

En la pagina que muestra, desplace su barra de

navegación hasta localizar la siguiente liga

162

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 163: Elaboración de paginas web dinamicas

Descargue el archivo, de clic botón derecho al mensaje

emergente, para desplegar el menú de opciones.

163

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 164: Elaboración de paginas web dinamicas

De clic en Guardar, o bien ejecute directamente.

164

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 165: Elaboración de paginas web dinamicas

De clic en Next > para inicializar la instalación.

165

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 166: Elaboración de paginas web dinamicas

Deje los valores por default, solo de clic en Next.

166

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 167: Elaboración de paginas web dinamicas

Active las opciones Install Apache as service e install

MySQL y de clic en el botón Install

167

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 168: Elaboración de paginas web dinamicas

Espere, ha comenzado la instalación.

168

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 169: Elaboración de paginas web dinamicas

Una vez terminada la instalación de clic en Finish.

En la siguiente ventana de clic en Aceptar.

169

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 170: Elaboración de paginas web dinamicas

Para inicializar el servidor busque en su computadora la

ruta que muestra la figura.

170

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 171: Elaboración de paginas web dinamicas

Inicie los servicios Apache y MySQL.

171

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 172: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 173: Elaboración de paginas web dinamicas

Para crear la base de datos, de clic en el botón Base de

datos.

173

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 174: Elaboración de paginas web dinamicas

Escriba el nombre de la base de datos y de clic en el

botón Crear.

174

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 175: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 176: Elaboración de paginas web dinamicas

Escriba el nombre de los campos y el tipo de datos, de

clic en Grabar.

176

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 177: Elaboración de paginas web dinamicas

Para introducir registros, de clic en el botón Insertar,

escriba los datos y de clic en Continuar

177

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 178: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 179: Elaboración de paginas web dinamicas

Funcionamiento de las páginas PHP

179

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 180: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 181: Elaboración de paginas web dinamicas

UN PRIMER EJEMPLO

181

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 182: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 183: Elaboración de paginas web dinamicas

Tipos de datos:

Array

$ a[ 3 ] = " 123 " ;

Números en punto flotante

$ numero = 1.23 ;

Entero

$ a = 123 ;

Cadena

$ texto = " Hola " ;

183

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 184: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 185: Elaboración de paginas web dinamicas

UN SEGUNDO EJEMPLO

185

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 186: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 187: Elaboración de paginas web dinamicas

EJEMPLO

187

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 188: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 189: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 190: Elaboración de paginas web dinamicas

Ejemplos:

190

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 191: Elaboración de paginas web dinamicas

OPERADORES

Aritméticos

Comparación

Asignación =

191

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 192: Elaboración de paginas web dinamicas

DREAMWEAVER

Para crear una pagina dinámica seleccione PHP del

menú Crear nuevo

192

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 193: Elaboración de paginas web dinamicas

Pantalla principal de Dreamweaver.

193

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 194: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 195: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 196: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 197: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 198: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 199: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 200: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 201: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 202: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 203: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 204: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 205: Elaboración de paginas web dinamicas

8. El resultado en el explorador será el siguiente.

205

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 206: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 207: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 208: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 209: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 210: Elaboración de paginas web dinamicas

6. Selecciona el campo NCtrol.

7. En la ventana de propiedades busca el campo vinculo y

escribe eliminar.php?Nctrol=

210

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 211: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 212: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 213: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 214: Elaboración de paginas web dinamicas

21. Selecciona el formulario, cambia el Método de envió a

GET.

22. Guarda los cambios.

23. Ejecuta la pagina Consulta

214

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez

Page 215: Elaboración de paginas web dinamicas

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

Ela

bo

: Gu

ad

alu

pe A

ng

ele

s M

ata

.

Ma

ría

Vic

toria

Co

rte

s G

óm

ez.

Alm

en

dra

Ca

brera

Hern

án

dez