formularios en DW

Formularios en DW

Formularios:
Todos los formularios se agregan a través del menú "insertar".
Por ello, vamos a "insertar", "formulario" , "formulario".


El primer elemento que debemos poner (obligatorio), es el "Formulario". Dentro de él, colocaremos los controles.


Ahora, con la "base" del formulario ya puesta, fíjate que parece un recuadro con el borde discontinuo en color rojo. Dentro del formulario, ya podemos insertar los controles.


Para organizar los controles dentro del formulario, podemos ayudarnos de una tabla (o una capa).


Esa tabla puede tener borde "cero" (ser invisible), por eso "grosor del borde", 0 pixeles.


La idea es colocar, en una de las celdas vacías, las etiquetas (nombre, dirección, teléfono) y en otra "columna", justo a su derecha, el campo vacío, donde la gente pondrá el dato (DW llama a esto "controles").


El primer control (dato) , lo ponemos desde "insertar" , "Formulario", "campo de texto".


Todos los controles comparten la misma ventana:


ID: etiqueta (opcional, es para localizarlo dentro de DW). Consiste en un texto descriptivo, que además, activa el formulario al hacer clic sobre ella.


Si la etiqueta está junto al control, dejamos el primer estilo. No necesitamos cambiar nada más, para que funcione correctamente.


Pero si está separada (en otra tabla, capa....), hay que marcar la segunda opción de ese menú para que funcione (o sea, "adjuntar etiqueta de título utilizando el atributo FOR").


Si no usamos un ID descriptivo, DW pondrá uno automáticamente (OJO!!!!).


Una vez lo tengamos, pulsamos en "Aceptar".


Ya tenemos la etiqueta y el control (o sea, título y zona en blanco, donde escribe la persona).


Sólo tenemos que mover ese control a otra celda (para que no estén juntos y haya una mínima separación estética).


Pulsa y arrastra para conseguirlo.


Ahora, con la vista "en vivo", podrás comprobar cómo funciona ese control.


En cuanto hagas clic sobre la etiqueta (el título, que podría ser "dirección de correo"), ya te lleva el cursor a la casilla en blanco.


Si seleccionaras el tipo "Varias líneas", el campo de texto pasaría a ser un "área de texto".


(Ver parte inferior de la pantalla, donde pone "TIPO")


Ancho car = ancho total de esa casilla de "control", indicando cuantos caracteres serían visibles.


Car. máx = máximo número de caracteres que permitiremos en ese "control" (ponle 100, por ejemplo).


Val. inicial = valor inicial, por si quieres que aparezca algo de ejemplo, para que la gente sepa qué puede poner (p.ej: ponga aquí su e-mail).


NOTA: El ID nunca podrá tener espacios, ni caracteres especiales (tildes,comillas,eñes....).


Si quisiéramos poner un campo "contraseña", es necesario repetir los pasos, para crear una nueva etiqueta y otro control.


Eso sí, el tipo será "contraseña". De esa forma, lo que escriba, no será visible (va enmascarada, protegida por "asteriscos").


Podemos insertar campos donde la gente responda "sí" o "no".


Lo que haríamos, sería ir "insertar", formulario , "casilla de verificación".


Recuerda dentro de "estilo", la opción "adjuntar etiqueta de título utilizando el atributo FOR".


En "posición": elige, "antes del elemento de formulario".


Acepta y arrastra a la derecha esa casilla vacía (la que la persona puede activar o desactivar, para decir "sí" o "no").


Recuerda que el estado inicial significa "cómo aparece de entrada" (activado / desactivado).




Más cosas:


Botones de opción = empleados para que el usuario elija entre varias opciones que le proponemos, donde sólo podrá elegir una de ellas.


Ponemos "deseo recibir información de":


Y vamos a "insertar" , "formulario", "botón de opción".


Si va todo junto (y no llevamos el control a otra tabla, celda, etc), podemos dejar activado "ajustar con etiqueta de rótulo", si no, la que está debajo ("adjuntar etiqueta de título....").


Repetimos el último proceso, para conseguir otro bóton "redondito" que podamos marcar, en este caso, con un "No" (el "sí", ya lo tenemos).


TRUCO: para que al marcar una, se desmarque la otra, los botones de opción tienen que tener el mismo nombre.


¿Dónde se cambia esto? En la parte inferior, donde pone "Botón" (y debajo, "Radio" o la palabra que DW elija por nosotros, si no pusimos nada diferente).


Estos botones sólo permiten un valor (sí / no). En cambio, las casillas permiten que marquemos varias (si nos interesan varias opciones, p.ej.).


Para ello, tenemos que insertar una lista o menú.


Adivina! Insertar, Formulario, "Seleccionar Lista/Menú".


Ese ID, podría llamarse "intereses". Con etiqueta "Quiero recibir información sobre:".


Justo debajo, en la parte inferior, fíjate en que el menú es "específico" para esto que estamos haciendo. Ahora, sólo aparece la opción de "menú" o "lista".


Cuando se trata de un menú, el usuario sólo podrá elegir uno de los valores, pero si se trata de una lista puede permitirse que se seleccionen varios simultáneamente.


Dejamos activada la casilla "lista" (por ese motivo).


El campo "Alto", sirve para establecer el número de líneas que se mostrarán de la lista. En el caso de haber elegido "menú", no estaría activada.


Los valores que aparecen en la lista, se introducen pulsando justamente donde dice "valores de lista....".


En la pestaña que aparece, "listar valores", podemos introducir elementos de la lista.


Empezamos por "informática". El siguiente elemento, lo añadimos pulsando en el símbolo "+".


Podemos añadir "música", luego "animales", "cine", "deportes"....


Ordenada el orden, pulsando en los símbolos de "arriba" y "abajo".


En la parte inferior, recuerda que puedes especificar cuál estará seleccionado inicialmente.


Por último, y para que todo esto funcione, tenemos que insertar un botón que envíe el formulario.


Por ello, llévame a "insertar" , "formulario" , "botón".


No necesitamos "etiqueta de rótulo", puedes darle a aceptar y ¡ya está!


El botón puede tener asignada una de las propiedades que aparecen en el campo "acción":


-enviar formulario
-restablecer formulario (lo borra)
-ninguno (ejem!!)


El valor "enviar", permite cambiar el texto que sale en el botón de "enviar formulario" (ver "VALUE", cuando hicimos el botón con el programa CSS Button....).


Para que el formulario sea enviado, deben cambiarse las propiedades del mismo. Podemos seleccionarlo haciendo clic en su etiqueta.


Le indicamos la acción que deseamos que realice, cuando el usuario haga clic en el botón "Enviar". La idea es enviarlo por correo.


Por eso, la "acción" será:


mailto:xesusvazquez@yahoo.es (o el correo que toque)


No olvides alinear la tabla y darle colores al fondo, para que guarde el mismo aspecto que el resto de tu página web.


Con F12, podemos ver como queda este ejercicio. Recuerda que antes, debes guardarlo!!!


Si lo prefieres, junto a inspeccionar, debería aparecer una "bola del mundo", donde al pulsar, nos permita ver como quedaría en diferentes navegadores.


Tras aceptar la advertencia de que estamos enviando un mensaje (típico en Internet Explorer), fíjate que debería aparecer una ventana de Outlook, preguntándote el asunto y el texto a enviar. Si no aparece.... consulta tu bandeja de correo! El mensaje debería haber llegado sin problemas.


(También puede deberse a que Internet Explorer 9 tiene problemas al cargar ciertas páginas, algo que no ocurre en Google Chrome, ojo!!!)

marcos en DW

Marcos en DW


Para poder dividir nuestra página web en dos "partes" (en una estará siempre el menú y en la otra, el contenido que deseemos), podemos insertar marcos.


Puedes hacerlo yendo a "Insertar", HTML  , Marcos y ahora, fíjate en las opciones disponibles. Ahí podemos encontrar distintas combinaciones de marcos, para que elijamos la que más se ajuste a nuestras necesidades.


Podemos empezar eligiendo el marco "izquierda", para que aparezca sólo en ese lado. Dependiendo de nuestra configuración, puede que aparezca este diálogo, donde podemos cambiar el título de los marcos.


(O sea, que donde pone "título", cambiaríamos "mainframe" por el nombre que deseamos)


Aceptamos. Ahora, comprueba que a la izquierda aparece una división nueva, con una zona en blanco.


En realidad, se ha creado un nuevo documento que contiene 2 marcos, el izquierdo y el que se conoce como principal (main), que contiene la página que estaba abierta (o sea, la "principal", la de la derecha).


En la parte inferior, a la derecha, tenemos un "mapa" , con los 2 marcos que estamos usando ahora. Puedes cambiar de una a otra, pulsando en la zona deseada.


Ahora, comprueba que en la parte inferior y a la izquierda, podemos cambiar las propiedades del borde del marco seleccionado (que forma parte de algo llamado "frameset", conjunto de marcos).


En general, cuando un documento se divide en 2 marcos y uno de ellos contiene el menú, es preferible que el tamaño del menú lo dejemos en píxeles (o sea, fijo) y la otra parte será "relativa" (proporcional al tamaño disponible).


Podemos cambiar el tamaño de los marcos (las divisiones, para que nos entendamos), moviendo "manualmente" esos límites, como haríamos con una tabla.


En la parte inferior, ha cambiado el "mapa" , reflejando ese cambio. Compruébalo.


Para establecer otras propiedades diferentes de los marcos, podemos utilizar el panel "Marcos", buscándolo en el menú "ventana" (o pulsando "mayúsc" y F2).


Recuerda que en "origen", podemos especificar "qué archivo debe figurar". Por tanto, a la izquierda, ten listo tu menú. Y a la derecha, la parte "principal", donde figure la información genérica (que luego cambiará, según lo que vayamos eligiendo en el menú de la izquierda).


Justo en esa zona, la opción "Desplaz.", nos sirve para indicar si aparecerán las barras de desplazamiento, cuando no pueda visualizarse completamente.


(vamos, que si quieres que salgan barras de "subir y bajar", aunque la página no las necesite y además, evitas que la persona que vea nuestra página cambie el tamaño del marco)


Si la opción "mismo tamaño" está activada, indica que los usuarios no podrán variar las medidas del marco desde el navegador.


En estas dos casillas (ancho y alto del margen), especificamos la separación que habrá entre el contenido del marco y sus bordes "izquierdo-derecho" y "superior-inferior"). Prueba con diferentes valores y observa el cambio que se ha producido.


En "bordes", como podrás imaginar, elegiremos si aparecerá o no una línea separando cada marco, para poder apreciar mejor el espacio disponible. Puedes elegir entre "predeterminado" (o sea, que decida DW), "sí" o "no" (todo bien clarito).


Si usas la opción de "bordes", podrás elegir también el color. Compruébalo.


Si quieres un tono concreto, busca en google "código color html" y en la primera página que aparezca, puedes elegir otros tonos y copiar ese código alfanumérico (letras y números), directamente en la casilla de "color de borde".


La gran ventaja de trabajar con marcos, es que podemos editar los archivos que veremos en cada marco sin mayor problema (es cómodo, rápido y relativamente sencillo).




Ahora, dentro del menú que hemos situado en la parte izquierda, podemos especificar "dónde" ha de verse esa información (en la parte derecha -marco principal- o en una nueva ventana, por ejemplo).


Como hemos probado en clase, "Destino", es para elegir de qué manera se mostrará esa información. "Mainframe" nos enseñará el contenido de esa otra página web (la que elegimos hace un momento en el menú izquierdo), en la parte derecha de la pantalla. Justo lo que queríamos!


Tenemos que hacer lo mismo con cada enlace (es obvio). Cuando quieras, guarda el proyecto y pulsa "F12", para ir viendo que tal queda antes de subirlo a Internet.


En la ventana "marcos" (o sea, menú "Ventana" y luego "Marcos") , selecciona el contorno externo (para marcar todo el conjunto) y guárdalo con la opción "Archivo - Guardar conjunto de marcos como....". De esa forma, podrás aprovechar tu trabajo para cualquier otra página web que vayas haciendo en el futuro.


Lo habitual es  como vengo recordando últimamente, el poner un nombre "básico" como puede ser index.html  .  Cuando subamos el proyecto de página web que estamos haciendo a Internet, veremos que es la primera página que se cargará siempre que alguien nos visite.


(Recuerda: las fotos y otros elementos, si no están en la misma carpeta de nuestra página web, DW te pedirá que las guardes -basta con aceptar ese proceso, no hay que hacer nada más-)

animaciones flash

Animaciones flash gratuitas, ¿donde hacerlas?
fuente:  http://www.flashvortex.com/index.php

En esta página, podremos crear una pequeña animación en formato flash (mucho más llamativa que un GIF) y obtener el código necesario, o bien el SWF que insertaremos, como siempre, yendo a:

Insertar _ Media _  SWF

 Recuerda que TODOS los archivos que uses en tu página web, deben estar en la misma carpeta (da igual que tengas una carpeta con las fotos, otras con la música, tienen que pertenecer a la misma, p.ej: mis documentos, y dentro de ahí, tu nombre).


Lo ideal es guardar la página web siempre en un sitio donde tengas controlados todos los archivos. Si Dreamweaver te pone "pegas", copia "manualmente" el archivo a tu carpeta,para evitar errores cuando la subamos a Internet.

como configurar dw

Como configurar DW para que nuestra web "suba" automaticamente

A continuación, tenéis la configuración que necesitamos poner en DW, una vez que vamos a "Sitios", Administrar sitios y luego, le damos a "nuevo".
Primero, es necesario poner los datos que necesitamos, "tal que así":


Y luego, en el apartado "Servidores", hay que poner los datos correspondientes a tu cuenta. La contraseña, la que ya conocéis :_)


Es importante que copies bien todos los datos y que respetes la ruta original (/htdocs). El nombre del servidor, es el que he elegido, para poder reconocer esa página web, en caso de tener varias con el mismo nombre (xesusvazquez.loquesea.com).

Ahora, atento a vuestros datos:

1
  Username de Cpanel: mb260_10633263
              Password de Cpanel: 
              Su URL: http://iriaalonso.260mb.org o tambien con las www. delante
              Ftp server: ftp.260mb.org
              Username del ftp: mb260_10633263 


2
Username de Cpanel: mb260_10633302
              Password de Cpanel: 
              Su URL: http://alexandrardgez.260mb.org o tambien con las www. delante
              Ftp server: ftp.260mb.org
              Username del ftp: mb260_10633302




3
   Username de Cpanel: mb260_10633267
              Password de Cpanel: 
              Su URL: http://academiajb.260mb.org o tambien con las www. delante
              Ftp server: ftp.260mb.org
              Username del ftp: mb260_10633267 


4
           Username de Cpanel: mb260_10633271
              Password de Cpanel: 
              Su URL: http://cristinaestevez.260mb.org o tambien con las www. delante
              Ftp server: ftp.260mb.org
              Username del ftp: mb260_10633271 


5
 Username de Cpanel: mb260_10633274
              Password de Cpanel: 
              Su URL: http://abelgonzalez.260mb.org o tambien con las www. delante
              Ftp server: ftp.260mb.org
              Username del ftp: mb260_10633274 


6
Username de Cpanel: mb260_10633277
              Password de Cpanel: 
              Su URL: http://alejimenez.260mb.org o tambien con las www. delante
              Ftp server: ftp.260mb.org
              Username del ftp: mb260_10633277 


7
  Username de Cpanel: mb260_10633279
              Password de Cpanel: 
              Su URL: http://tamaramartin.260mb.org o tambien con las www. delante
              Ftp server: ftp.260mb.org
              Username del ftp: mb260_10633279 


8
Username de Cpanel: mb260_10633280
              Password de Cpanel: 
              Su URL: http://carmenmillos.260mb.org o tambien con las www. delante
              Ftp server: ftp.260mb.org
              Username del ftp: mb260_10633280 


9
  Username de Cpanel: mb260_10633283
              Password de Cpanel: 
              Su URL: http://danielnanez.260mb.org o tambien con las www. delante
              Ftp server: ftp.260mb.org
              Username del ftp: mb260_10633283 


10
Username de Cpanel: mb260_10633284
              Password de Cpanel: 
              Su URL: http://gabrielosores.260mb.org o tambien con las www. delante
              Ftp server: ftp.260mb.org
              Username del ftp: mb260_10633284 


11
 Username de Cpanel: mb260_10633285
              Password de Cpanel: 
              Su URL: http://marianopaz.260mb.org o tambien con las www. delante
              Ftp server: ftp.260mb.org
              Username del ftp: mb260_10633285 


12
Username de Cpanel: mb260_10633287
              Password de Cpanel: 
              Su URL: http://cristianpazo.260mb.org o tambien con las www. delante
              Ftp server: ftp.260mb.org
              Username del ftp: mb260_10633287 


13
Username de Cpanel: mb260_10633298
              Password de Cpanel: 
              Su URL: http://santiagoperez.260mb.org o tambien con las www. delante
              Ftp server: ftp.260mb.org
              Username del ftp: mb260_10633298 


14
Username de Cpanel: mb260_10633299
              Password de Cpanel: 
              Su URL: http://diegopgonzalez.260mb.org o tambien con las www. delante
              Ftp server: ftp.260mb.org
              Username del ftp: mb260_10633299 





Probadlo tranquilamente. Si algo falla, me avisáis.

banners gratuitos, fondos y plantillas

Banners gratuitos, fondos y plantillas


Plantillas web curiosas, descarga el zip y busca dentro el fichero HTML (que podremos modificar en DW):
http://www.flashvortex.com/ 


Otras plantillas que no están mal:
http://www.flashtemplatesdesign.com/free_templates/free_wordpress_themes.php 
http://www.freeflashtemplates.com/ 


Oye, que también podemos buscar plantillas "hechas" en Powerpoint y guardarlas como HTML, para llevarlas luego a Dreamweaver!!
http://www.sameshow.com/download/powerpoint-to-flash-ppttemp.html 


Puedes probar esto:
http://www.allprofitallfree.com/3d-logo-creator.html 


Y otro sitio lleno de contenidos gratuitos (o para coger ideas):
http://www.flashmo.com/ 


Y uno más:
http://www.freenicetemplates.com/free-flash-animation/ 



Otra página con cosillas gratis:
http://www.hongkiat.com/blog/30-free-flash-photo-galleries-and-tutorials/ 



Más plantillas gratuitas para tu web:
http://auroraflash.org/ 



Más efectos gratis:
http://www.dynamicfactory.com/flash-free-effects.asp 


Y si te gusta crear álbumes animados (con fotos que elijas), podrías probar esto:
http://www.flash-slideshow-maker.com/flash_photo_gallery_scroll/album_em_flash_free.php


Si no "te asusta" el inglés y un día te animas a descargar Adobe Flash (no el player, si no el que Adobe te permite probar 30 días):
http://www.entheosweb.com/flash/default.asp#.T6Lufuh1Dit 

menús de salto

Menús de salto: Desplegable que me permita elegir rapidamente opciones

• Menús de salto:

Son menús desplegables, que nos permite ir a las distintas secciones o páginas de nuestro sitio.

Lo encontramos en "insertar" , luego "formulario" y "menú de salto".

Si tuviéramos una página con marcos, podríamos decidir dónde se abrirían las páginas seleccionadas en el menú desplegable.

Si no insertamos un botón al lado del desplegable, el cambio de página se realizará nada más realizar la selección.

Probamos a marcar la opción de: insertar botón "ir" tras el menú.

Ahora, la navegación se haría en dos pasos: seleccionar el elemento y pulsar en el botón "Ir".

También podemos configurar el menú de modo que al cambiar de página, vuelva a mostrar el primer elemento de la lista.

Una vez configurado el menú en general, pasaremos a crear los elementos de menú.

A cada elemento, en la casilla "texto", le pondremos el nombre descriptivo que deseemos.

Y luego, la dirección URL a la que debe saltar (otra página web o una de las que tengamos).

Podemos elegirlo, en el menú "examinar" o elegir una página externa, poniendo siempre el http://

El símbolo de "+" , te permite añadir más elementos.

Puedes cambiar el orden con los botones de "subir y bajar".

Si lo deseas, prueba la "vista en vivo", en la misma zona donde está "código, dividir, diseño, código en vivo.....".

Despliega la opción de la lista que te interese y prueba a pulsar en el botón "ir".

insertar archivos multimedia

Insertar archivos multimedia: vídeos, flash o sonidos.

• Insertar elementos multimedia:

La idea es insertar un archivo flash o similar, en nuestra Web.

En primer lugar, haz clic en el punto que te interesa. Te recomiendo que uses "capas", para poder poner ese "objeto" donde más te guste.

Elegimos "insertar" , media y "SWF" , si es un archivo FLASH.

Las películas "Flash", son animaciones que, al igual que los botones y el texto "Flash", tienen extensión .swf.

Como ya tenemos algo en ese formato, vamos a insertarlo.

Podemos agregar atributos de accesibilidad a ese elemento (pero no olvides ponerle "título", para luego reconocerlo, que en DW no se ven!).

Ese archivo se mostrará con una "F" grande, en un recuadro de color oscuro.

La opción "bucle", si está activada, indica que, al finalizar la película, ésta volverá a comenzar desde el principio (lo normal).

La opción "reproducción automática", si la marcamos, nada más cargar ese archivo Flash, lo dejará activado, para que pueda verse lo antes posible.

Podemos ver si se ejecuta, pulsando, abajo a la derecha, el botón "Reproducir".

Vamos a insertar un archivo de audio, justo debajo del archivo de flash.

Por eso, la opción "insertar", "media", "plug-in", nos permite introducir cualquier elemento multimedia.

Elegimos el archivo correspondiente (recomendado, tener un .midi "a mano"). Son melodías y ocupan muy poco espacio.

Los archivos "plug in" que insertemos, aparecerán con un símbolo de "puzzle".

Ahora, podremos establecer la altura y anchura con la que se mostrarán los controles de audio. En caso de no especificar ningún tamaño, se mostrará el tamaño por defecto de los controles (los valores iniciales que tienen establecidos).

Todos los objetos insertados a través de la opción "plug-in", precisan que el navegador tenga instalado ese mismo plugin (adobe flash, shockwave....).

En el apartado URL plug-in, podemos introducir la dirección web adecuada, en caso de que la persona no lo tenga instalado.

Los sonidos se reproducen automáticamente al cargarse la página web y se reproducen SOLO UNA VEZ. Estos valores pueden cambiarse "toqueteando" en el código.

Añadimos, justo antes del objeto (swfobject o similar), la línea:

<embed src="media/audio.mid" autostart="false" loop="true"></embed>

Podemos añadir autostart="false" para uqe se reproduzca automáticamente y loop="true", para que se cree un bucle y suene todo el tiempo.

NOTA: media/audio.mid , hace referencia a la carpeta "media", dentro de nuestro Sitio de DW y audio.mid es el archivo concreto.

Para insertar un video: insertar, media, plugin.

Los videos, igual que los sonidos, solo se reproducen una vez.
En el apartado código, añadimos:

<embed src="media/chotillo.avi" width="32" height="32" autostart="false" loop="true"></embed>

(código válido para ese archivo en concreto, con esas dimensiones de tamaño de video -si es más grande, se reducirá para que entre en esa ventana)

Podemos probar a quitar el tamaño reducido del video, en la parte inferior (An. y Al.). Déjalos sin nada (ni cero, ni 32....). Nada es nada.

Si nos aparece un aviso de "copiar archivos dependientes", decimos que sí.