Dreamweaver CC 2017 esencial

Juegos de campos en Dreamweaver CC 2017

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Para terminar, vamos a descubrir cómo organizar los contenidos de los formularios agrupando contenidos por tipo y vamos también a formatear formularios utilizando algunos de los estilos CSS más habituales para estas tareas.

Transcripción

Durante este capitulo he ido añadiendo diferentes campos. Diferentes tipos de controles de formulario, y están todos completamente desorganizados. Debería de ser capaz de organizar este formulario de una manera atractiva. De hecho es fundamental para que sea utilizable, para que los usuarios no lo vean y salgan corriendo. Hay dos formas distintas de organizar un formulario. Una de ellas es utilizando tablas. Vamos metiendo los elementos del formulario en celdas y con eso queda organizado. De todas formas esta es una manera obsoleta de trabajar. Hoy en día se utiliza mucho más la utilización de "divs", de contenedores donde meter los campos y luego aplicar clases para que así se organicen. Pero aparte de eso también se utiliza mucho, y de hecho es bueno usarlos, los "fieldsets". Voy a irme a "Formulario". Y voy a ver una etiqueta nueva que es eso: el "Juego de campos". Esto sirve para englobar varios campos en una línea que tiene una leyenda. Y así puedo distribuir los campos de tal manera que se distingan los de un tipo de contenidos de otros. Por ejemplo: yo en la parte de arriba tengo "Nombre, Apellidos, Email, Password". Todo esto tiene que ver con los datos del usuario. Bueno, pues voy a añadir un juego de campos. Voy a colocarlo... después de la etiqueta seleccionada. Y le voy a poner, como digo, una leyenda. "Datos... personales". Aquí vemos, efectivamente. Crea una línea alrededor y pone la leyenda aquí en el medio. Y ahora lo que debería de hacer es coger todos los datos personales, hasta aquí. Pinchar y arrastrar, y colocarlos justo debajo de esta leyenda. Dentro de ese "fieldset". Y aquí los vemos. Ya están englobados y de una manera bien fácil. Seleccionaría otro "label", el siguiente, añadiría otro juego de campos. Y aquí podría poner: "Otros datos". Y de nuevo iría seleccionando, básicamente, todo. Y lo metería de nuevo dentro de... En realidad los botones me interesa más tenerlos fuera. Así que puedo arrastrarlos y descolocarlos. Puedo también venirme al código y sacarlos directamente desde aquí para no liarme, porque puede ser un poco complicado. Vemos que en realidad lo que se ha añadido es una etiqueta "fieldset". Aquí se puede observar. Falta todavía un campo, que es el de envío de datos. Lo cortaré. Y lo pegaré al final. Bien, como digo. Este "fieldset" engloba toda una serie de campos y dentro de ellos la primera etiqueta que se añade es esa leyenda. Es tan fácil como eso. Y no tiene muchas más opciones. Pero claro, todavía sigo teniendo los campos organizados un poco raro, así, todos seguidos. Bueno pues la siguiente forma de trabajar lógica es meter dentro de diferentes "divs" algunos de esos campos. Entonces, lo puedo hacer de varias maneras distintas. Por ejemplo, por variar voy a hacerlo con el código. Añado aquí un "div". Y dentro de este "div" pues meto, por ejemplo, dos campos. Nombre y apellidos. Los corto... y los pego dentro. Añado un segundo "div". Y en ese pues, por ejemplo, pongo el "mail". Es bueno organizarlos... mediante...información similar, entonces, por ejemplo, pues el mail y la URL habla de cosas parecidas. Seguiría añadiendo "divs". Esto solo lo voy a hacer sobre los datos personales. Y aquí, pues por ejemplo, puedo poner... el "password". Y estos otros dos. Todo este código queda muy sucio. No pasa nada. Me voy a "Edición" "Código" Y me va a recolocar el código de una manera mucho más ordenada y más fácil de comprender. Si me vuelvo a la vista en vivo, ahora veo que, efectivamente, está haciéndolo ya mucho mejor. Aquí ya sí que se ven los campos mejor organizados y tal. Lo que pasa es que todavía necesito algunas características más. Por ejemplo, debería de hacer que este "div", pero no solo él: este y este también. Esos tres en realidad cambien. Sigan siendo "div" pero también tengan alguna clase asociada que sirva, por ejemplo, bueno, debería ser "form row", pero me vale lo mismo. Para añadir una clase. Y ahora, desde el diseñador de CSS, pues yo podría decir muy fácilmente que me añada... Selecciono "estilos.css". Selecciono un selector. Y para todos los que tienen la clase "row form", pues le voy a pedir que tenga un poco de margen inferior. 10 píxeles. Ahora ya aparecen separados. Aquí podemos verlos. Incluso podría hacer que tuviesen un poquito de borde inferior. Selecciono el borde inferior. Le pido que tenga de tamaño 1 píxel. De estilo que sea sólido y de color que tenga un color gris para que no llame demasiado la atención. Ahí lo vemos. Que tenga un poco de "padding" en la parte inferior para que quede un poco separado. Bueno, pues vuelvo de nuevo aquí, a "Padding", y dentro de "Padding", al añadirle unos pocos píxeles de "padding" en la parte inferior, pues esa línea va a quedar un poco separada. Voy a ponerle un poco más: 6. Por otro lado, me interesa que los campos aparezcan un poco separados unos de otros. Bueno, pues puedo seleccionar cualquier campo, añadir un selector específico para él. Y ahora pedirle que tenga un poco de margen a la derecha, por ejemplo, pues que tenga otros 10 píxeles. Y así consigo que esté separado. En realidad voy a ponerle un poco más porque siguen estando demasiado juntos. Está aplicándomelo solo sobre el primero de esos elementos. Tengo que mirar a ver por qué. Bueno, eso es debido a que me lo ha aplicado solamente en el selector "Nombre". Cuando esté haciendo algún cambio y no funcione, es buena idea mirar el selector y comprobar si efectivamente se aplica ese selector. Aquí debería de poner, en vez de esto, "input". Y entonces ahora para todos los elementos que están metidos dentro de un "div" con la clase "row form", todos los elementos que sean del tipo "input", ahora aquí lo vemos, pues ya van a aparecer con esa pequeña recolocación. Como vemos este formulario ha mejorado bastante. Bueno, pues a partir de aquí ya sería un poco jugar con esta forma de trabajar. "Divs" para envolver filas. Y luego utilizar "fieldsets".

Dreamweaver CC 2017 esencial

Crea sitios web gracias al software de Adobe, Dreamweaver CC 2017. Con este repaso esencial a sus fundamentos podrás crear páginas responsive y mostrar tus contenidos a la última.

6:11 horas (78 Videos)
Actualmente no hay comentarios.
 

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.