Elaboración de paginas web dinamicas

ELABORACIÓN DE PAGINAS WEB
1
Elaboró:GuadalupeAngelesMata.
MaríaVictoriaCortesGómez.
AlmendraCabreraHernández

OBJETIVO GENERAL
Utiliza HTML,
Dreamweaver, Php y MySQL
para la elaboración de
paginas web dinámicas.
2

¿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

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

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

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

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

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

<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

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

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

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

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

COMENTARIOS EN HTML
 Los comentarios: Se utilizan para documentar
la página.
Los comentarios son ignorados por el navegador.
< !-- //-- >
.
14

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

EL TEXTO EN HTML
 Caracteres especiales.
Carácter Representación Carácter Representación
á á & &
Á Á ¿ ¿
é é ¡ ¡
É É “ "
í í . ·
Í Í < <
ó ó > >
Ó Ú ñ ñ
ú ú Ñ Ñ
Ú Ú Espacio  
16

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

 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

 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

 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

 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

 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

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

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

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

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

REFERENCIA RELATIVA AL DOCUMENTO
Conduce a un punto dentro del mismo
documento, para ello debemos colocar.
<a href =“#puntoancla”>
Cocada </a>
27

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

ENLACE A CORREO ELECTRÓNICO
Es posible incluir enlaces con direcciones de
correo electrónico.
<a href = “mailto:” >
</a>
29

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

_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

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

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

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

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

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

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

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

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 >
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

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

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

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

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

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

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

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

La etiqueta INPUT es esencial para los
formularios, ya que se usa para crear elementos
interactivos.
La sintaxis es:
< input >
ETIQUETA INPUT
47

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

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

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

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

4. CHECKBOX. Casilla de verificación.
< form>
Hobbies:
<input type= “checkbox” name =
“hobbie” value = “Bailar” /> Bailar
“hobbie” value = “Cantar” /> Cantar
“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

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

6. RESET. Botón de restauración.
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

7. HIDDEN. Campo oculto
<input type= “hidden”
name=“contraseña” value=“2345” />
__value=“Enviar” />
< / form>
55

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

8. FILE. Fichero.
< form name = “registro”
action = “alta.php”
method=“POST”
enctype=“multipart / form-
data”>
<input type = “file” name=“archi”
value =“ ”/>
__value=“Subir” />
< / form>
57

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

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

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

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

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

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

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
CREAR UN NUEVO DOCUMENTO EN
DREAMWEAVER

65
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

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
LAS BARRAS

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

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

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

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
INSPECTORES Y PANELES

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

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

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
CONFIGURACIÓN DEL SITIO

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

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
CREAR UN SITIO
1. Menú Sitio  Nuevo
sitio.
1. Administrar sitios
Nuevo..

Independientemente de la forma de crear el sitio,
se mostrara la siguiente ventana. Selecciona la
carpeta Avanzadas y llena los campos.
76
Nombre del sitio
Ruta donde se
localiza el sitio

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
ABRIR UN SITIO
También podemos utilizar el
panel Archivos, buscar y
seleccionar el sitio a abrir en el
menú desplegable Archivos.

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
PROPIEDADES DEL DOCUMENTO

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

 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

 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

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

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

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

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
EL TEXTO: PROPIEDADES Y FORMATO

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
Es importante emplear correctamente los encabezados,
ya que se organizará mejor el contenido de nuestra
web, así como para los buscadores y visitantes.

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

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

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

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

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

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
HIPERENLACES

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

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

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

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

 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

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

 _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

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

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

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
INSERTAR UNA IMAGEN

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

 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

Un rollover es una imagen que cambia por otra
cuando el puntero se sitúa sobre ella. Este tipo de
imagen suele utilizarse en los menús o en los
botones para desplazarnos a través de distintas
páginas.
Para insertar un rollover :
1. Menú Insertar  Objetos de ImagenImagen
de sustitución.
105
IMAGEN DE SUSTITUCIÓN. ROLLOVER

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
TABLAS

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

 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

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

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

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

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

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

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

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
MARCOS

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

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

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

 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

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

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
FORMULARIOS

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

 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

 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

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

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

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

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

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
MULTIMEDIA

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

 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

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

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

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

 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

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

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

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
PLANTILLAS

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

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

 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

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

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
MARQUESINAS

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
FECHA

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
REGLA HORIZONTAL

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
CAPAS

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

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
1. Pulsar sobre el icono.
Ó
2. Si hay varias capas
se seleccionan a través
de la pestaña Elementos
PA

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

 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

 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

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
COMPORTAMIENTOS

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

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

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

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
PÁGINAS 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

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

INSTALACIÓN DEL SERVIDOR (XAMPP)
Descargue el software de la siguiente dirección:
http://www.apachefriends.org/es/xampp.html
159

O bien en su buscador Google escriba XAMPP, elija la
primer liga.
160

Seleccione la opción XAMPP para Windows
161

En la pagina que muestra, desplace su barra de
navegación hasta localizar la siguiente liga
162

Descargue el archivo, de clic botón derecho al mensaje
emergente, para desplegar el menú de opciones.
163

De clic en Guardar, o bien ejecute directamente.
164

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

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

Active las opciones Install Apache as service e install
MySQL y de clic en el botón Install
167

Espere, ha comenzado la instalación.
168

Una vez terminada la instalación de clic en Finish.
En la siguiente
ventana de clic en
Aceptar.
169

Para inicializar el servidor busque en su computadora la
ruta que muestra la figura.
170

Inicie los servicios Apache y MySQL.
171

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

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

Escriba el nombre de la base de datos y de clic en el
botón Crear.
174

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

Escriba el nombre de los campos y el tipo de datos, de
clic en Grabar.
176

Para introducir registros, de clic en el botón Insertar,
escriba los datos y de clic en Continuar
177

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

Funcionamiento de las páginas PHP
179

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

UN PRIMER EJEMPLO
181

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

Tipos de datos:
 Array
$ a[ 3 ] = " 123 " ;
 Números en punto flotante
$ numero = 1.23 ;
 Entero
$ a = 123 ;
 Cadena
$ texto = " Hola " ;
183

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

UN SEGUNDO EJEMPLO
185

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

EJEMPLO
187

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

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

Ejemplos:
190

OPERADORES
Aritméticos
Comparación
Asignación =
191

DREAMWEAVER
Para crear una pagina dinámica seleccione PHP del
menú Crear nuevo
192

Pantalla principal de Dreamweaver.
193

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

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

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

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

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

13. En la ventana que se despliega, selecciona la base de
datos Escuela.
14. Da clic en el botón
Aceptar.
Prueba, para verificar
la conexión.
16. El resultado final, será la conexión
CEscuela.
199

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

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

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

INSERCIÓN DE REGISTROS
2. Da clic en Insertar registro.
3. Deja los datos que
vienen por default,
solo selecciona el
archivo tabla.php.
Aceptar
203

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.
insertar registro.
204

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

ACTUALIZAR DE REGISTROS
2. De clic en Actualizar registro.
3. Crea el juego de registros.
Aceptar.
206

5. Selecciona el archivo tabla.php.
Aceptar .
7. El resultado será el siguiente.
8. Guarda el documento con el nombre de Actualizar.
207

9. Agrega una Barra de navegación.
10. Deja los valores que
vienen por default .
Aceptar.
12. Presiona F12 para
ver los resultados
en el explorador.
208

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

6. Selecciona el campo NCtrol.
7. En la ventana de propiedades busca el campo vinculo y
escribe eliminar.php?Nctrol=
210

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

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

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

21. Selecciona el formulario, cambia el Método de envió a
GET.
22. Guarda los cambios.
23. Ejecuta la pagina Consulta 214

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

Elaboración de paginas web dinamicas

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (17)

Similar a Elaboración de paginas web dinamicas

Similar a Elaboración de paginas web dinamicas (20)

Último

Último (8)

Elaboración de paginas web dinamicas