CREAR HIPERENLACES CON DREAMWEAVER
1.- Seleccionar texto o imagen que servirá de vínculo
2.- Modificar -
Crear vínculo
3.- Buscar y
seleccionar el archivo del documento destino - Aceptar - Aparece un cuadro de
diálogo - Aceptar - Aparece otro cuadro de diálogo - Aceptar
CREAR VÍCULOS UTILIZANDO EL INSPECTOR DE PROPIEDADES Y EL ICONO DE SEÑALIZACIÓN DE ARCHIVO
1.- Se utiliza
el inspector de propiedades y el icono de señalización de archivo para crear
vínculos desde una imagen, un objeto o texto hacia otro documento o archivo
2.- Para crear
vínculos entre documentos utilizando el icono de carpeta o el cuadro de texto
Vínculo
a) En la
ventana del documento seleccionar el texto o imagen que se quiera convertir en
un vínculo
b) Realizar una
de estas operaciones:
Hacer clic en
el icono de carpeta situado a la derecha del campo Vínculo para buscar y
seleccionar el archivo destino - Aceptar
Hacer clic en
el botón Señalar archivo (el botón redondo localizado entre el recuadro de
texto Vínculo y el icono de la carpeta y mientras se mantiene pulsado el botón
izquierdo del ratón, apuntar a un archivo en la ventana del Sitio y a continuación
libere el botón del ratón
C.- DEFINIR LOS
VÍNCULOS EN UN CONJUNTO DE MARCOS
1.- En la
ventana del documento seleccionar el texto o la imagen que se quiera convertir
en un vínculo
2.- En el campo
Vínculo del inspector de propiedades llevar a cabo una de las operaciones
anteriores (B.2.b)
3.- En el menú
emergente Destino (etiquetado como Dest en el inspector de propiedades, elegir
la ubicación en la que deberá aparecer el documento vinculado:
a) Si se han
asignado nombres a los marcos en el inspector de propiedades (cfr. 04.- Crear y
diseñar marcos - I.E.- Para asignar nombres a los marcos), aparecerán en este
menú - Seleccionar el nombre del marco en el que se abrirá el documento
vinculado
b) -blank abre
el documento vinculado en una nueva ventana del navegador y conserva la ventana
actual
c) -parent abre
el documento vinculado en el conjunto de marcos padre del enlace
d) -self carga
el documento vinculado en el mismo marco o la misma ventana que el vínculo.
Este destino es el predeterminado, por lo que normalmente no es preciso
especificarlo
e) -top carga
el documento vinculado en la ventana completa del navegador, eliminando todos
los marcos
4.- Para
previsualizar los vínculos: Archivo - Vista previa en el navegador -
Seleccionar haciendo clic en nombre del navegador - Aparecerá la página - Hacer
clic en el vínculo
COMO MAPEAR UNA IMAGEN EN DREAWMEAVER
Mapear una imagen es una buena
opción para insertar varios enlaces de una forma grafica y rápida. Con ello
podemos incluir varios enlaces desde diferentes partes de una misma imagen, con
lo que si podemos, ganaremos tiempo y espacio, ahorrándonos tener que insertar
varias imágenes.
Para
explicar cómo hacer esto, hemos cogido este mapa de las islas canarias, en el
cual, vamos a enlazar cada una de ellas a su página correspondiente. Además si
dejamos el ratón encima de cualquiera de ellas veremos cómo tiene que aparecer
el nombre de la misma para saber sobre cual estamos.
|
Esta es la Imagen que hemos cogido:
Para
ello, insertamos la imagen como lo haríamos normalmente, es decir, una vez
incluida en el directorio donde tenemos creado nuestro sitio, damos
control+alt+I y la elegimos o bien vamos a insertar/imagen
Una
vez que la tenemos insertada, pinchamos sobre ella, vamos al panel
Propiedades de nuestro dreamweaver, en el, veremos las herramientas de
mapa, con las que vamos a poder seleccionar cada parte de la foto que
queramos linkear.
Para
ello, seleccionamos cualquiera de las 3 herramientas que más nos venga en
cuenta, en este caso la zona poligonal, y vamos haciendo clic alrededor de la
isla como vemos en esta imagen:
Una
vez completada la zona que queremos linkear, damos al icono del puntero del
panel de propiedades
 , y podremos poner la
pagina a enlazar en el campo de Vinculo, además de ponerle el nombre
alternativo (el que queramos que le salga al usuario cuando pasemos el ratón
por encima), todo esto en el mismo panel de propiedades de nuestro
dreamweaver.
También
es importante saber, por si queremos ser mas precisos, que podemos ayudarnos
del zoom, el cual podremos verlo encima de la barra de propiedades, podemos
poner un zoom mayor para ir seleccionando la zona y después volver a ponerlo
al 100% para ver como quedaría la imagen completa.
Aquí vemos una página en la
que podemos observar el resultado final, en el cual, si dejamos el ratón en
cada isla, veremos cómo sale su nombre,
y si pinchamos en cualquiera de ellas nos llevara a su propia página.
|
Insertar
Imágenes en DreamWeaver
En este tema vamos a ver cómo insertar imágenes
en un documento. También veremos cómo crear algunas imágenes especiales,
como es el caso de los Rollovers y los botones flash, que ayudan
a mejorar la apariencia de nuestras páginas.
Introducción
Todas las páginas web acostumbran a tener un cierto número de
imágenes, que permiten mejorar su apariencia, o dotarla de una mayor información
visual.
Existen una serie de formatos de imagen más recomendables que
otros para ser introducidos en una página web. Estos formatos son JPG, GIF y
PNG.
Para insertar una imagen hay que dirigirse al menú Insertar,
a la opción Imagen. Después de esto, ya es posible seleccionar una
imagen a través de la nueva ventana.
 |
||||
PASOS PARA
CONFIGURAR Y CREAR MARCOS EN DREAMWEAVER
|
COMO SE CREAN LOS MARCO EN DREAMWEAVER
1º
Abriremos un documento en dreamweaver. Puede ser uno nuevo o uno ya
existente.
2º Nos dirigimos al panel Insertar/diseño del dreamweaver, a la opción Marcos. Aquí elegiremos el tipo de marco que deseamos.
Por
ejemplo, elegiremos el marco a la Izquierda, ahora se creará un nuevo marco a
la izquierda del documento actual. Como podrás observar aparecerá una línea que
divide el documento en dos.
Ahora
tendremos tres documentos: el de la izquierda, el de la derecha, y el que
contiene los marcos. (El de la derecha es el que teníamos inicialmente, que
está en el marco conocido como marco padre “MainFrame” )
Para
poder seleccionar el documento que contiene el grupo de marcos pincharemos
sobre la línea que los separa. Esto solo es posible si el documento no se a
guardado.
El marco padre siempre es el marco en el que se encuentra el documento inicial, sobre el que se han insertado los de marcos
El marco padre siempre es el marco en el que se encuentra el documento inicial, sobre el que se han insertado los de marcos
COMO PODEMOS SEGURLOS
Para seleccionarlos en dreamweaver presionaremos Mayús+F2.
En el panel Marcos aparecen los marcos que tiene el documento, se puede pasar de uno a otro pulsando sobre ellos en el panel. También puedes seleccionar la página de marcos pulsando en sobre el borde que los rodea. ( el que aparece en negro en la siguiente imagen)
No
hará falta seleccionarlos para editar los
documentos que contengan, pero si es tendremos que seleccionarlos para
especificar las propiedades de cada uno.
COMO VINCULARLOS
EN DREAMWEAVER
La única diferencia que existe entre los vínculos típicos de HTML y los de marcos es que cuando estamos trabajando en un conjunto de marcos y queremos hacer un vínculo, tenemos que precisar cuál va a ser el marco de destino. Para ello le damos a Dest.(destino) en la ventana de "propiedades" en nuestro dreamweaver y desplegamos el menú (target) en el que seleccionaremos el marco en que se mostrará la página.
Hasta aquí todo lo que necesitamos saber sobre crear marcos en dreamweaver (No entrare más en el tema ya que es una técnica algo desfasada)) :), espero que os sea de ayuda.
INSERTAR LEMENTOS MULTIMEDIA EN
DREAMWEAVER
Películas Flash
Las películas Flash son animaciones, que al igual que los
botones y el texto Flash, tienen la extensión SWF. Es frecuente verlas
en las páginas iniciales de los sitios web, a modo de presentación hacia los
usuarios, aunque se pueden utilizar para realizar cualquier tipo de animación.
Estas películas
pueden crearse mediante el programa Flash de Macromedia, y necesitan que el
usuario tenga instalado el plug-in para poder ser visualizadas.
Las películas
Flash pueden insertarse en una página a través del menú Insertar, Medía, opción
Flash, o pulsando Ctrl+Alt+F.
También pueden
insertarse pulsando sobre la opción 
Flash que aparece en la pestaña Común
del panel Insertar, botón Media.
Flash que aparece en la pestaña Común
del panel Insertar, botón Media.
Practica 16
En este tema vamos a ver cómo trabajar con tablas.
Podremos insertar tablas, filas y columnas, y modificar sus propiedades.
Hoy en dia, la mayoría de las páginas web se basan en
tablas, ya que resultan de gran utilidad al mejorar notablemente las opciones
de diseño.
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 realizarse.
|
|
|
|
Las tablas
están formadas por celdas, que son los recuadros que se obtienen como
resultado de la intersección entre una fila y una columna.
Para crear
una tabla hay que insertar las etiquetas <table> y </table>.
Entre dichas etiquetas habrá que especificar las filas y columnas que
formarán la tabla.
|
||||||||||||||||||||||
|
|
|
Es necesario
insertar las etiquetas <tr> y </tr> por cada una de las filas de
la tabla. Estas etiquetas deberán insertarse entre las etiqetas <table>
y </table>.
Por ejemplo,
para crear una tabla con cinco filas escribiríamos:
<table>
<tr>...</tr> <tr>...</tr> <tr>...</tr> <tr>...</tr> <tr>...</tr> </table> |
|
|
|
Para crear
una tabla no basta con especificar el número de filas, es necesario también
especificar el número de columnas.
Una celda es
el resultado de la intersección entre una fila y una columna, por lo que
podremos especificar el número de celdas por fila, que equivale a especificar
el número de columnas por fila.
Es necesario
insertar las etiquetas <td> y </td> por cada una de las celdas
que compongan cada una de las filas de la tabla. Por lo tanto, habrá que
insertar esas etiquetas entre las etiquetas <tr> y </tr>.
Entre las
etiquetas <td> y </td> se podrá especificar el contenido de cada
una de las celdas. Por ejemplo, para insertar la siguiente tabla:
Habría que
escribir:
<table
border="1">
<tr> <td>Sabado</td> <td>Domingo</td> </tr> <tr> <td>Curso HTML</td> <td>Curso Dreamweaver</td> </tr> <tr> <td>Curso Frontpage</td> <td>Curso Flash</td> </tr> </table> |
|
Capítulo
5:
Formularios web: manejoManejo de Formularios WebEstructura de un formulario Una de las ventajas de la Web es que resulta tremendamente interactiva. Los usuarios de una página no tienen más que ingresar ya sea comentarios o consultar información llenando un formulario y sus datos seguros serán recibidos por el lado del servidor. La estructura básica de un formulario es el siguiente: <form name=" " method=" " action=" " enctype=" " target=" "> aquí se pueden incluir entradas o campos de texto, opciones, selección, entradas o campos de archivos, entradas o campos ocultos </form> name: nombre que se le da al formulario. method: define el método en que se enviará los datos del formulario, dos valores posibles (GET/POST), se recomienda el uso de "post" action: define la URL que deberá gestionar el formulario, de una dirección de correo hasta un script que procese la información. enctype: el tipo de contenido que se enviará en el formulario. target: donde se abrirá el script que procese la información. Todos los elementos de un formulario deben estar encerrados entre <form> y </form> Práctica: html_4.htm - Diseño de un formulario. <html> <head> <title>Formulario Básico</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <form name="frmContacto" action="procesar.php" method="post"> <table> <tr><td colspan="2"><h2>Ingrese sus datos</h2></td></tr> <tr><td>Nombres:</td><td><input type="text" name="nombres" size="20"/></td> </tr> <tr><td>Apellidos:</td><td><input type="text" name="apellidos" size="20"/></td> </tr> <tr><td>Comentario:</td><td></td></tr> <tr><td colspan="2"><textarea name="comentario" rows="4" cols="30"></textarea></td></tr> <tr><td colspan="2"><input type="reset" value="limpiar"/> <input type="submit" value="¡enviar ya!"/></td></tr> </table> </form> </body> </html>
Capí
|
No hay comentarios:
Publicar un comentario