01 Puede utilizarse incluso el Bloc de notas

para hacerlo.
CONCEPTOS BSICOS DEL
DREAMWEAVER Pero crear pginas web mediante el cdigo
Identifica los conceptos bsicos de HTML es ms costoso que hacerlo
DreamWeaver. utilizando un editor grfico. Al no utilizar
un editor grfico cuesta mucho ms insertar
cada uno de los elementos de la pgina, al
mismo tiempo que es ms complicado crear
DREAMWEAVER una apariencia profesional para la pgina.

Dreamweaver es un Hoy en da existe una amplia gama de

software permite crear
pginas web
profesionales sin la
necesidad de programar
manualmente el cdigo
HTML con el que se
construyen dichas pginas.
Se puede crear tablas, editar marcos,
trabajar con capas, insertar
comportamientos JavaScript, etc., de una
forma muy sencilla y visual.
Adems incluye un software de cliente FTP
(protocolo de transferencia de ficheros)
completo, permitiendo entre trabajar con el
sitio web como si se tratara de una unidad
de disco, actualizndolo en el servidor sin
salir del programa.
editores de pginas web. Uno de los ms
utilizados, y que destaca por su sencillez y
por las numerosas funciones que incluye,
es MacromedaDreamweaver
Adems de Dreamweaver, existen otra
serie de buenos editores de pginas web,
como pueden ser Microsoft Frontpage,
Adobe Pagemill, Adobe GoLive,
NetObjectsFusion, CutePage,
HotDogProffesional, Netscape Composer y
Arachnophilia, algunos de los cuales tienen
la ventaja de ser gratuitos.
PUBLICAR UNA WEB

EDITAR PGINAS WEB

Cualquier
editor de
texto permite
crear pginas
web. Para ello
slo es Para poder poner una pgina web en
necesario Internet, es necesario contratar a alguna
crear los empresa con servidores que pueda
documentos con la extensin HTML o HTM, alojarla y hacerla accesible desde Internet
e incluir como contenido del documento el las 24 horas del da. El precio por disponer
de espacio propio en el servidor depender
cdigo HTML deseado.
de la empresa, del espacio en disco,

169
volumen de transferencia y otras
opciones que podamos contratar.
Hay empresas que ofrecen este servicio
gratuitamente, pero con ciertas
limitaciones: poco espacio de disco, lentitud
y nombre de nuestra pgina precedido por
el de la suya. Hay que tener tambin en
cuenta que estas empresas deben generar
ingresos de alguna forma, por lo que se
dedican avender espacios publicitarios
dentro de nuestras pginas, publicidad que
no podremos negarnos a incluir en ellas.
Por estos motivos, no se recomienda
utilizar hospedaje gratuito para la pgina
de una empresa, aunque s es aceptable
para una pgina personal.
Cuando se va a contratar un servicio de
hospedaje es necesario contratar
tambin un dominio, tarea de la que se
suele encargar la propia empresa de
hospedaje. Registrar un dominio consiste
en registrar un nombre para nuestra
pgina. Este nombre no puede estar
repetido en Internet, ha de ser nico, al
igual que ocurre con los nombres de las
empresas. Es posible registrar un mismo
nombre con distintas terminaciones, como
por ejemplo, .net, .org, .es o .com.
En el caso de los hospedajes gratuitos
no es necesario registrar ningn
dominio, ya que nuestra pgina no ser
ms que un archivo dentro de la de la
empresa contratada.
En cualquier caso, una vez disponemos del
espacio en Internet, darle contenido es muy
sencillo.
Dreamweaver permite crear una copia
local (en el ordenador) del sitio web que
luego pondremos a disposicin de todo el
mundo en Internet.
Una vez diseado en modo local el sitio
web slo habr que subir al servidor
manteniendo la estructura del local. Es
decir, subir todos los archivos tal y como
aparecen en el disco duro, respetando el
nombre de los archivos y la organizacin
de las carpetas. Si se haces as, el sitio
experimentar fallos y enlaces que no
funcionarn.
Es mejor no utilizar caracteres
especiales como acentos o ees, ni
espacios en blanco. De esta forma nos
aseguramos de que el servidor puede
reconocer sin ningn tipo de problemas los
nombres de los archivos que alojamos en
l.
Para evitar errores de enlaces rotos o
imgenes que no se muestran es mejor
escribir, tambin, los nombres en
minscula. Algunos servidores distinguen
entre maysculas y minsculas, por lo que
si en la pgina queremos mostrar la imagen
foto1.jpg habr que guardarla con ese
nombre y no como Foto1.jpg. Evitaremos
as horas perdidas buscando fallos.
Cmo ingreso a
Dreamweaver?
Haz clic en el
botn Inicio.
Clic en la opcin
Programas (Todos los
Programas)
Seleccionar la opcin Macromedia.
170
 Finalmente haz clic en la opcin
Macromedia Dreamweaver .

1. Investiga acerca de los otros editores de

pginas web y descrbelos brevemente
en un resumen.

2. Busca el icono del programa

dreamweaver e imprmelo y adjntalo al
folder.

171
 02
EL ENTORNO DE TRABAJO
Emplea el entorno de trabajo para
su pgina web.
EL ENTORNO DE TRABAJO
Vamos a ver cules son los
elementos bsicos de Dreamweaver,
la pantalla, las barras, los paneles, etc,
para saber diferenciar entre cada uno
de ellos.
LA PANTALLA INICIAL
Al arrancar Dreamweaver aparece una
pantalla inicial como sta, vamos a ver sus
componentes fundamentales. As
conoceremos los nombres de los
diferentes elementos y ser ms fcil
entender. La pantalla que se muestra a
continuacin (y en general todas las de este
curso) puede no coincidir exactamente con
la que ves en tu ordenador, ya que cada
usuario puede decidir qu elementos quiere
que se vean en cada momento.
Fig. Pantalla inicial
LAS BARRAS
La barra de ttulo contiene el nombre del
programa (MarcromediaDreamweaver) y
seguidamente el nombre del documento
que aparecer en el explorador y entre
parntesis, su ubicacin y el nombre del
archivo en formato html. En el extremo de
la derecha estn los botones para
minimizar, maximizar/restaurar y cerrar.
La barra de mens contiene las
operaciones de Dreamweaver, agrupadas
en mens desplegables. Al hacer clic en
Insertar, por ejemplo, veremos las
operaciones relacionadas con los
diferentes elementos que se pueden
insertar en Dreamweaver.
Muchas de las operaciones se pueden
hacer a partir de estos mens, pero para
algunas es preferible o indispensable
hacerlas desde los paneles.
La barra de herramientas estndar
contiene iconos para ejecutar de forma
inmediata algunas de las operaciones ms
habituales, comoAbrir , Guardar ,
etc.
La barra de herramientas de
documento contiene iconos para ejecutar
de forma inmediata algunas otras
operaciones habituales que no incluye la
barra de herramientas estndar. Estas
operaciones son las de cambio de vista
del documento, vista previa, etc.
172
El inspector de Propiedades muestra y
permite modificar las propiedades del
elemento seleccionado que son usadas de
forma ms frecuente. Por ejemplo, cuando
el elemento seleccionado sea texto 1. Busca la ventana del programa
mostrar el tipo de fuente, la alineacin, si dreamweaver indicando sus partes
est en negrita o cursiva, etc. principales.

2. Investiga y menciona los pasos para

guardar y abrir un documento en
dreamweaver.

Pulsando sobre el botn se despliega

para mostrar ms opciones. Este botn se
encuentra en la esquina inferior-derecha.

Seguramente ser la herramienta de

Dreamweaver que ms vayas a utilizar.

La barra de herramientas Insertar o

panel de objetos permite insertar
elementos en un documento sin la
necesidad de recurrir al men Insertar.
Los elementos estn clasificados segn
su categora: tablas, texto, objetos de
formulario, etc.

Es posible configurar este panel para que

en los botones se muestren los iconos de
los objetos (como ocurre en la imagen
anterior), para que se muestren los
nombres de los objetos, o para que se
muestren ambos a la vez.

173
 03 Seguidamente haz clic en el botn
Seleccionar. La carpeta se selecciona
CONFIGURACIN DE UN SITIO LOCAL
y la ventana de exploracin se cierra.
Aplica la configuracin de un sitio
local para la pgina web.
Finalmente clic en el botn Aceptar.

EDITAR PGINAS WEB.

Definir un sitio local consiste en

establecer cul ser la carpeta
con la que se trabajara. Por lo
general esta operacin se
realiza una vez,; pero si
deseas puedes definir
otros sitios locales. Esta
carpeta que se define
como sitio local
vendra a ser la carpeta
principal en donde se
almacenarn todos los proyectos de pgina
Web. Es recomendable que todos nuestros
textos, imgenes y animaciones se
almacenen en esta carpeta.
Los pasos para definir un sitio local son:

Haz clic en el men Sitios.

Clic en la opcin Administrador Sitio
o Editar Sitio.
Clic en el botn Nuevo.
Haz clic en el recuadro Nombre de
sitio y escribe el nombre que se dar al
nuevo sitio local.
Haz clic en el botn Explorar del
recuadro Carpeta de raz local. Aparece
la ventana Explorar.
Haz clic sobre la carpeta que se
utilizar como sitio local.
Luego clic en el botn Abrir.

174
Abrir un sitio.

Podemos utilizar el panel Archivos,

buscar y seleccionar el sitio a abrir en
el men desplegable de la pestaa
Archivos.

1. Realiza una lista de las versiones de

Dreamweaver que existen hasta la
actualidad y menciona sus
caractersticas principales de cada una
de ellas.

2. Practica en tu computadora los pasos

para editar un sitio en dreamweaver.

175
 04 Definicin de Inteligencia artificial.

PROYECTO 1 En el mbito de las ciencias de la

computacin se denomina como
Aplica los contenidos aprendidos inteligencia artificial a la facultad de
en una pgina simple. razonamiento que ostenta un agente que no
est vivo, tal es el caso de un robot, por
citar uno de los ejemplos ms populares, y
que le fue conferida gracias al diseo y
desarrollo de diversos procesos gestados
por los seres
humanos.
Cabe
Inserta cuatro pginas, utiliza la informacin destacarse
para cada pgina teniendo en cuenta que la que adems
primera ser la pgina principal. del poder de
razonar,
La Robtica estos dispositivos son capaces de
La Robtica es aquella rama dentro de la desarrollar muchas conductas y actividades
Ingeniera que se especialmente humanas como puede ser
ocupa de la resolver un problema dado, practicar un
aplicacin de la deporte, entre otros.
informtica al diseo
y al uso de mquinas
con el objetivo que de Definicin de Mecnica
lo que de esto resulte De acuerdo al uso que se le con el trmino
pueda de alguna de mecnica se pueden referir diversas
manera sustituir a las cuestiones.
personas en la En trminos bien generales, mecnica,
realizacin de determinadas funciones o refiere a aquello relativo y vinculado a las
tareas. mquinas, que se acciona a travs de un
mecanismo mecnico o que se realiza a
En otras palabras ms simples, la robtica travs de
es la ciencia y la tecnologa de los robots, una
porque bsicamente se ocupa del diseo, mquina.
manufactura y aplicaciones de los robots
que crea. En la Robtica se combinan Por otro
varias disciplinas al mismo tiempo, como lado,
ser la mecnica, la electrnica, la cuando
inteligencia artificial, la informtica y la se quiere
ingeniera de control, en tanto, tambin, por dar cuenta que tal o cual realizan una
el quehacer que desempea, resulta actividad, oficio o trabajo que se caracteriza
fundamental el aporte que recibe y extrae por exigirle a la persona una habilidad ms
de campos tales como el lgebra, los manual que intelectual, entonces,
autmatas programables y las mquinas de generalmente se usa el trmino que nos
estados. ocupa y se dice que Juan realiza una
actividad muy mecnica.

176
 05
EL TEXTO
Utiliza las caractersticas y estilos
del texto en la elaboracin de
pginas.
EMPLEANDO TEXTO
A lo largo de este
tema vamos a
aprender a cambiar
las propiedades del
texto y a crear estilos
CSS, que permiten
asignar al texto estilos
creados por nosotros
mismos, no
predefinidos.
CARACTERSTICAS DEL TEXTO
Las caractersticas del texto
seleccionado pueden ser definidas a
travs del men Texto, y a travs del
inspector de propiedades. Vamos a ver
las posibilidades que se nos ofrecen a
travs del inspector de propiedades,
aunque sean menos que las que se nos
ofrecen a travs del men Texto.
Formato:
Permite seleccionar un formato de prrafo
ya definido para HTML, que puede ser
encabezado, prrafo o preformateado. Los
encabezados se utilizan para establecer
ttulos dentro de un documento. El formato
preformateado sirve para que el texto
aparezca tal cual ha sido escrito, por
ejemplo, si entre dos palabras se introducen
varios espacios solo se considera uno, pero
al establecer el formato preformateado se
respetar que hayan varios espacios en
lugar de solo uno.
Fuente: Permite seleccionar un conjunto de
fuentes. Aparecen conjuntos de fuentes en
lugar de una sola, ya que es posible que al
establecer una nica fuente el usuario no la
tenga en su ordenador. El seleccionar un
conjunto de fuentes posibilita que en el
caso de que el usuario no tenga una fuente
se aplique otra del conjunto. Por ejemplo, si
seleccionamos Arial, Helvetica, Sans-
serif, el texto se ver con la fuente Arial,
pero si esta no existe se ver en Helvetica.
Tamao:
Permite cambiar el tamao del texto. El
tamao lo podemos indicar en diversas
unidades, en pxeles, centmetros, etc...
Color:
Permite seleccionar el color de la fuente,
ignorando el color que se haya definido en
las propiedades de la pgina. Si no se ha
establecido ningn color en las
propiedades de la pgina ni aqu, el color
del texto por defecto ser el negro.
Estilo:
Estos botones permiten establecer si el
texto aparecer en negrita o en cursiva. A
travs del men Texto tambin se puede,
177
entre otras cosas, subrayar el texto. Esta
opcin no aparece en el panel de
Listas
Propiedades ya que de normal no suele
utilizarse, debido a que los vnculos
Es posible insertar texto a
aparecen subrayados y el subrayar texto
modo de lista. A su vez, la
normal podra hacer que el usuario lista puede ser numerada o
pensara que se trata de un vnculo.
con vietas.

Alinear: Para que un texto que ya ha sido

introducido en el documento se convierta
A travs de estos botones es posible en una lista, simplemente hay que
establecer la alineacin del texto de una seleccionarlo y pulsar sobre la opcin de
de estas cuatro formas distintas: lista correspondiente, ya sea a travs del
izquierda, centrada, derecha y justificada. inspector de propiedades, o a travs del
men Texto.
Lista: La lista con vietas
(desordenada) se selecciona
Estos botones permiten crear listas con a travs del botn ,
vietas o listas numeradas. mientras que la lista
numerada (ordenada) se
Sangra: selecciona a travs del botn .

Estos dos botones permiten sangrar el

texto y anular la sangra. La sangra es
una especie de margen que se establece
a ambos lados del texto. En este caso los
botones se refieren a sangra a la 1. Ingresa a dreamweaver y elabora en 3
izquierda del texto. pginas 10 refranes en cada pgina,
luego aplica el formato segn te agrade y
En caso deseamos dar formato al gurdalo en USB con el nombre TEXTOS
textosin utilizar el inspector de para su revisin en la clase prxima.
propiedades seguiremos estos pasos:

Haz clic en el men Texto.

Clic en las opciones que deseas

utilizar, por ejemplo si deseas cambiar
de fuente, tamao, color, etc al texto.

178
 06
HIPERENLACES
Emplea hiperenlaces con formatos
diferentes a las pginas.
pero partiendo del directorio en el que se
encuentra el documento actual.
Si queremos referirnos a carpetas que
estn por encima del nivel donde nos
encontramos deberemos utilizar ../

Por ejemplo, imagina que estamos en la

siguiente direccin
http://www.misitio.com/pagina/informac
HIPERENLACES ion/index.html. En esta pgina queremos
mostrar una imagen que se encuentra en
la carpeta
Vamos a ver qu son http://www.misitio.com/pagina/seccion
los hiperenlaces, es/seccion1.html, cmo podemos
para qu sirven y hacerlo? Fcil. Deberemos llamarla
cmo crearlos, ya haciendo referencia al nivel superior
que son un elemento (http://www.misito.com/pagina/) para
esencial para poder ir luego a la carpeta secciones.
cualquier pgina
Web. El resultado de la ruta sera el siguiente:
../secciones/seccion1.html.
Un hiperenlace, hipervnculo, o vnculo, no
es ms que un enlace, que al ser pulsado De esta forma, mientras nos encontramos
lleva de una pgina o archivo a otra en la carpeta informacin, subimos un
pgina o archivo. nivel y luego nos movemos dentro de la
carpeta secciones para mostrar el archivo
Es posible asignar un vnculo a un texto, a seccion1.html.
una imagen, o a parte de una imagen.
Referencia relativa al sitio:
1.- Tipos de enlaces.
Conduce a un documento situado dentro
Existen diferentes clases de rutas de del mismo sitio que el documento actual.
acceso a la hora de definir los vnculos.
En este mtodo los enlaces se crean
Referencia absoluta: indicando la ruta a partir de la raz del
sitio.
Conduce al sitio en el que se encuentra el
documento utilizando la ruta completa del En el ejemplo anterior si tuvisemos
archivo. definido como sitio la carpeta
http://www.misitio.com/, un enlace en
La ubicacin es en Internet, por ejemplo, cualquier pgina del sitio a
http://www.altavista.com, o http://www.misitio.com/pagina/seccion
http://www.misitio.com/pagina/pagina1. es/seccion1.html se creara como
html. /pagina/secciones/seccion1.html.

Referencia relativa al documento: Como puedes ver ahora el vnculo a un

archivo en todas las pginas es igual
Conduce a un documento situado dentro porque se define dependiendo del sitio
del mismo sitio que el documento actual,

179
raz y no de la ubicacin donde se
encuentra.
Puntos de fijacin:
Conduce a un punto dentro de un
documento, ya sea dentro del actual o de
otro diferente. Para ello el vnculo debe
ser
nombre_de_documento.extension#nom
bre_de_punto.
El punto se define dentro de un
documento a travs del men Insertar,
opcin Anclaje con nombre.
archivos que es donde se muestra una lista
de todos los documentos que se van
creando dentro del sitio.
Sigue estos pasos para crear un enlace:
Selecciona el texto o imagen.
Haz clic sobre el botn Sealar
Archivo del recuadro Hipervnculo y sin
soltar el botn, arrastra el mouse hasta
el panel de archivos.
Ubica el puntero sobre el archivo o
pgina que se vinculara.

Podramos referenciar de este modo a un

anclaje llamado parte2 de la siguiente
forma:
../secciones/seccion1.html#parte2

Debers tener siempre en cuenta

que los nombres de las rutas se
correspondan perfectamente a los
nombres de los archivos y carpetas
en el servidor (local o remoto).

Por ello, es muy recomendable que B.- Hipervnculos a pginas externas.

utilices siempre minsculas para
evitar fallos en los enlaces.
Tambin debers evitar utilizar
caracteres especiales como acentos
o espacios, as no tendrs
problemas a la hora de referenciar
tus objetos.
2.- Crear enlaces
Consiste en realizar un hipervnculo hacia
una pgina fuera del sitio local, por ejemplo
un hipervnculo a la pgina de bsqueda
del Google, para realizar esto realiza los
siguientes pasos:
Selecciona el texto que se utilizara como
hipervnculo.
Haz clic en el recuadro Vnculo y
escribe la direccin de la pgina. Por
ejemplo http://www.google.com.

A.- Hipervnculos a pginas dentro del

sitio local.

Consiste en hacer un enlace hacia una

pgina que ha sido creada en la misma
carpeta. Para ello se trabaja con el panel de

180
1. Ingresa a dreamweaver y elabora un
ejemplo aplicando hiperenlaces segn tu
agrado y gurdalo en USB con el nombre
HIPERENLACES para su revisin en la
clase prxima.

181
 07
2.- Cambiar el tamao de una imagen.
IMAGENES
Dentro de Dreamweaver puede
Inserta diferentes imgenes,
botones y texto flash.
Imagen Imagen con
original tamao
modificado
IMGENES

Todas las pginas web acostumbran a

tener un cierto nmero de imgenes, que
permiten mejorar su apariencia, o dotarla de
una mayor informacin visual.

1.- Insertar imgenes.

modificarse el tamao de las imgenes.
Para insertar una imagen hay que
Dicho cambio de tamao no se aplica
dirigirse:
directamente sobre el archivo de imagen,
Al men Insertar. sino que lo que vara es la visualizacin
de la imagen dentro de la pgina.
clic en la opcin Imagen.
Es muy probable que la imagen resultante
Despus de esto, ya es posible no sea de buena calidad, en comparacin
seleccionar una imagen a travs de la de cmo podra quedar modificndola
nueva ventana. desde un editor externo, como Fireworks.

Ubica la carpeta donde est guardado
la imagen.
Selecciona la imagen, luego haz clic en
Aceptar
Por ejemplo, vamos a ver lo que ocurre si
insertamos una imagen que representa el
icono de Dreamweaver y modificamos su
tamao de varias formas diferentes:
Puede apreciarse claramente que los
resultados no son muy satisfactorios, pero
en ocasiones puede resultar til modificar
el tamao de algunas imgenes aunque
esto implique perder calidad.

Existen dos formas de modificar el

tamao.

1. Una de ellas es, una vez

seleccionada la imagen,
arrastrar con el puntero
alguno de los recuadros
negros que aparecen alrededor de la
imagen.

182
2. La otra es a travs de inspector de
propiedades, cambiando los campos
An (anchura) o Al
(altura). Estos
campos
aparecern en el
inspector cuando
est seleccionada alguna imagen. Si
estos campos no contienen el tamao
original de la imagen, el valor
aparecer resaltado en negrita y
aparecer a la derecha una flecha
circular que permite volver al tamao
original haciendo clic sobre ella.

1. Ingresa a dreamweaver y elabora un

ejemplo aplicando IMAGENES segn tu
agrado y gurdalo en USB con el nombre
IMAGENES para su revisin en la clase
prxima.

183
 08
PROYECTO 2
Aplica los contenidos aprendidos
en una pgina .
Realiza una pgina relacionada al siguiente
tema, aplica todo lo que se desarroll.
Seres vivos: caractersticas,
clasificacin y ciclo de vida
Seres vivos
En nuestro planeta hay una gran variedad
de seres vivos, algunos muy grandes y
altos como una araucaria y otros mucho
ms pequeitos como una hormiga o un
musgo.
Los seres vivos son los que tienen vida,
esto quiere decir, que son toda la variedad
de seres que habitan nuestro planeta,
desde los ms pequeos hasta los ms
grandes, todas las plantas, animales e
incluso nosotros los seres humanos.
Podemos reconocer a los seres vivos
porque tienen en comn las siguientes
caractersticas:
- Nacen: Todos los seres vivos proceden
de otros seres vivos.
- Se alimentan: Todos los seres vivos
necesitan tomar alimentos para crecer y
desarrollarse, aunque cada uno tome un
tipo de alimento diferente.
- Crecen: Los seres vivos aumentan de
tamao a lo largo de su vida y a veces,
cambian de aspecto.
- Se relacionan: Los seres vivos son
capaces de captar lo que ocurre a su
alrededor y reaccionar como corresponda.
- Se reproducen: Los seres vivos pueden
producir otros seres vivos parecidos a ellos.
- Mueren: Todos los seres vivos dejan de
funcionar en algn momento y dejan, por
tanto, de estar vivos.
A estas caractersticas le llamamos el ciclo
de vida.
Clasificacin de los seres vivos
Todas las formas de vida conocidas se
renen en grandes grupos, a los que
llamamos Reinos. Todos los individuos del
mismo Reino tienen las caractersticas
bsicas iguales. La clasificacin ms
utilizada agrupa los seres vivos en 5
Reinos:
184
- Reino Animal
- Reino Vegetal
- Reino de los hongos
- Reino Protoctista
- Reino Mnera

4.1- Reino Animal

Est formado por todos los animales. Sus
caractersticas principales son:
- Son seres vivos eucariotas, es decir, sus
clulas forman tejidos.
- Son seres hetertrofos, es decir, se
alimentan de otros seres vivos.
- Casi todos los animales son capaces de
desplazarse de un lugar a otro.
- Tienen un sistema nervioso y rganos de
los sentidos. Por eso reaccionan
rpidamente a los estmulos que captan.
Invertebrados
Son animales que no tienen esqueleto
interno. Dentro no tienen huesos ni
columna vertebral aunque pueden tener
algunas partes duras (ejemplo la concha
de un caracol).
Se clasifican a su vez
en: Artrpodos, Equinodermos, Gusan
os, Moluscos, Celentreos, Porferos.

El reino animal tiene una primera

clasificacin en:
- Vertebrados
- Invertebrados

Vertebrados
Son los animales que tienen un esqueleto
interno con columna vertebral. Usan el
aparato locomotor para desplazarse.

Se clasifican a su vez en: Mamferos,

Aves, Peces, Anfibios, Reptiles.

185
 09
TABLAS.
Configura tablas en diversas
pginas.
Tablas
Todos los objetos se alinean por defecto a
la izquierda de las pginas Web, pero
gracias a las tablas es posible distribuir el
texto en columnas, colocar imgenes al
lado de un bloque de texto, y otra serie de
cosas que sin las tablas seran imposibles
de realizar.
Hoy en da, la mayora de las pginas
Web se basan en tablas, ya que resultan
de gran utilidad al mejorar notablemente
las opciones de diseo.
Las tablas estn formadas por un conjunto
de celdas, distribuidas en filas y columnas.
1.- Insertar una Tabla.
Puedes realizar de varias
formas, una de ellas es clic en
esta herramienta (Insertar Tabla)
Otra de las formas que puedes insertar una
tabla es:
Haz clic en el men Insertar.
Clic en tabla. Una vez realizado esta
accin te aparecer un cuadro de
dialogo en el cual escribirs la cantidad
de filas y columnas que deseas
insertar.
Finalmente clic en la opcin Aceptar.
Rellenar celdas.
Las celdas son cada uno de los recuadros
que forman una tabla, resultan de la
interseccin entre una fila y una columna.
COLUMNA
imagen y texto
Texto dentro de
una celda
CELDA
FILA
Para poder insertar algn elemento en una
celda, ya sea texto o imgenes,
simplemente hay que situar el cursor
previamente dentro de la celda deseada.
1.- Cambiar color de fondo y lnea a la
tabla.
Una vez que insertamos la tabla, es
necesario insertar color de fondo y color de
186
lnea, para que nuestra pgina se vea con
un diseo formal.
Selecciona la tabla.
Haz clic en Color de Fondo.
Escoge el color de fondo que deseas y
automticamente el color se insertar.
De la misma forma repite los
procedimientos para cambiar el color de
lnea con excepcin que escogers
Color de borde de la celda.

Estas ambas opciones encontraremos en el

inspector de propiedades.

B) Falso.

1. Ingresa a dreamweaver y elabora un

ejemplo aplicando TABLAS segn tu
agrado y gurdalo en USB con el nombre
TABLAS para su revisin en la clase
prxima.

187
 10
0
MARCOS

Utiliza macros en la pgina Web.

Los marcos o frames sirven para distribuir

mejor los datos de las pginas, ya que
permiten mantener fijas algunas partes,
como pueden ser el logotipo y la barra de
navegacin, mientras que otras s pueden
cambiar. Adems de mejorar la
funcionalidad,
pueden mejorar
tambin la Como puedes ver en la imagen,
apariencia. aparece una lnea que divide el
documento en dos. El documento de
1. Crear marcos
partida era uno nuevo.
En este caso tendremos tres
Para crear un marco,
documentos: el de la izquierda, el de la
primero hay que abrir
derecha, y el que contiene el grupo de
algn documento.
marcos. El de la derecha es el
Puede ser uno
documento que tenamos inicialmente,
nuevo o uno ya
que est en el marco conocido como
existente.
marco padre (MainFrame).
Despus, dirigirse al men Insertar,
Para seleccionar el documento que
HTML, Marcos. A travs de esta opcin
contiene el grupo de marcos hay que
puede elegirse el tipo de marco que va
pulsar sobre la lnea que separa los
a crearse.
marcos. Esto solo es posible mientras
Vamos a ver el marco a la Izquierda.
dicho documento no se haya guardado
Si pulsamos sobre Izquierda se crear
un nuevo marco a la izquierda del El marco padre siempre es el
documento actual. marco en el que se encuentra el
documento inicial, sobre el que
se han insertado el resto de
marcos.

2. Seleccionar Marcos.

Para seleccionar los marcos del documento

es necesario dirigirse al panel Marcos, que

188
puede abrirse a travs del men Ventana.
Tambin puedes abrir el panel Marcos
pulsando la combinacin de teclas
Maysculas + F2.
En el panel Marcos aparecen los marcos
que contiene el documento de marcos, y se
puede pasar de uno a otro pulsando sobre
ellos en el panel. Tambin puede
seleccionarse la pgina de marcos
pulsando sobre el borde que rodea a los
marcos (el que aparece ms grueso y en
relieve en la imagen).
No es necesario seleccionar los marcos
para editar los documentos que stos
contengan.
S es necesario seleccionar los marcos
para especificar las
propiedades
especficas de cada
uno de ellos.
2. Guardar
Todos los documentos que contienen
marcos tienen que tener una pgina
en cada uno de ellos. Es por esto
que al crear algn marco, se cargan
pginas nuevas por defecto en cada
uno de ellos, a excepcin del marco
que contiene la pgina original.
Es necesario guardar la pgina que
contiene el grupo de marcos, as
como cada una de las pginas que
estn incluidas en sus marcos.
No es conveniente guardar la
primera vez los marcos con la opcin
Guardar todo , ya que podemos
equivocarnos al dar los nombres a
los nuevos documentos.
Es preferible guardar cada
documento uno por uno, a no ser que
todos los marcos contengan alguna
pgina ya existente, ya que en ese
caso el nico documento al que
habr que dar nombre ser al que
contiene el grupo de marcos.
Para guardar el documento que
contiene el grupo de marcos, hay
que seleccionarlo previamente.
Para guardar cada uno de los otros
documentos, simplemente hay que
situar el cursor en ellos antes de
pulsar sobre Guardar .
3. Configurar marcos
Una vez seleccionado un marco a travs
del panel Marcos, pueden establecerse sus
189
propiedades a travs del inspector de del marco, que puede ser en Pxeles,
propiedades. Porcentaje (de la ventana) o Relativo
(proporcional al resto de marcos).

Normalmente utilizars dos marcos,

uno de ellos con tamao
en Pxeles, que ser el
que contenga la barra
de navegacin, y el
Cada marco tiene asignado un nombre, otro marco con
que puede cambiarse a travs de tamao Relativo,
Nombre de marco. El nombre no puede para que se ajuste
contener espacios en blanco.
a la ventana del
En Origen aparece el nombre del
documento HTML que est contenido
navegador.
en el marco.
En Bordes puede elegirse si aparecer
o no una lnea separando el marco del
resto de marcos. En el caso de que se
muestre el borde, se puede especificar 1. Ingresa a dreamweaver y elabora un
un color para ste a travs de Color ejemplo aplicando MARCOS segn tu
borde. agrado y gurdalo en USB con el nombre
Desplaza. indica si aparecern o no las MARCOS para su revisin en la clase
barras de desplazamiento cuando el
prxima.
documento del marco no pueda
visualizarse completamente.
Si la opcin Mismo tamao est activa,
indica que los usuarios no podrn variar
las medidas del marco desde el
navegador.
El Ancho del margen y el Alto del
margen indican la separacin que habr
entre el contenido del marco y sus
bordes izquierdo-derecho y superior-
inferior.
Si lo seleccionado es todo el conjunto
de marcos (la pgina de marcos), el
inspector de propiedades es algo
diferente.
En Bordes puede elegirse si aparecer
o no una lnea separando los marcos
entre s y puede especificarse un color
para este a travs de Color del borde.
Tambin es posible establecer un
grosor para el borde a travs de Ancho.
El campo Columna (o Fila dependiendo
del marco elegido en Seleccin Fila
Col.) sirve para especificar el tamao

190

11
FORMULARIOS
Emplea formularios para el diseo
de la pgina Web.
FORMULARIOS
Los formularios se utilizan para
recoger datos de los usuarios.
Nos pueden servir para
realizar un pedido en una
tienda virtual, crear una
encuesta, conocer las
opiniones de los usuarios,
recibir preguntas, etc
Elementos de formulario
Los elementos de formulario pueden
insertarse en una pgina a travs del men
Insertar, opcin Formulario, o lo que es ms
cmodo si vamos a insertar varios
elementos, desde el panel Insertar en la
seccin Formularios.
A travs de esta opcin se puede acceder a
la lista de todos los objetos de formulario
que pueden ser insertados en la pgina.
Vamos a ver uno por uno algunos de los
distintos elementos que pueden formar
parte de un formulario, as como algunas de
sus propiedades.
Campo de texto y rea de texto
Permiten introducir texto. El Campo de texto
solo permite al usuario escribir una lnea,
mientras que el rea de texto permite
escribir varias.
Se puede pasar de Campo de texto a rea
de texto a travs del inspector de
propiedades, marcando la opcin Una lnea
o Multi lnea respectivamente.
Tambin es posible definirlo como
Contrasea es como el campo de texto
pero las letras que va tecleando el usuario
se sustituyen por un carcter como podrs
ver en la imagen siguiente.
A continuacin tienes un ejemplo de cada
uno de estos tres tipos. Puedes escribir en
ellos para ver su funcionamiento.
rea de texto
Campo de te **********
A travs del inspector de propiedades es
posible asignar tambin el Ancho del
cuadro de texto, el nmero mximo de
lneas o caracteres, y el valor inicial del
cuadro.
Botn
Es el botn tradicional de Windows. El
botn puede tener 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).
Tambin es posible cambiar el texto del
botn, a travs de la propiedad Valor del
inspector de propiedades.
191
Como mnimo tiene que haber un botn del
tipo Enviar formulario, imprescindible para
enviar los datos. Adems le suele
acompaar un botn Restablecer formulario
para hacer reset en el caso de que el
usuario quiera comenzar de nuevo a
rellenarlo.

1. Ingresa a dreamweaver y elabora un

ejemplo aplicando FORMULARIOS segn
tu agrado y gurdalo en USB con el
nombre FORMULARIOS para su revisin
en la clase prxima.

192