Dreamweaver CC 2017 esencial

CSS de bordes, paddings y márgenes

¡Prueba gratis durante 10 días

nuestros 1267 cursos !

Prueba gratis Mostrar modalidades de suscripción
También podemos, de manera visual, añadir bordes y controlar características avanzadas de estos para crear bonitos efectos, y utilizaremos también los paddings y márgenes de manera visual para controlar fácilmente este complejo aspecto.

Transcripción

Una serie de concepto que suelen ser bastante difíciles para los principiantes de CSS, es la forma en la que se trabaja con cajas, con objetos como un rectángulo, porque vamos a tener varios parámetros distintos que van a modificar cómo aparece un objeto determinado y cómo interactúan los objetos que hay a su lado. Sin embargo, utilizando el diseñador de CSS de Dreamweaver, va a ser muy fácil entender estos conceptos sobre todo porque vamos a tener ilustraciones que nos van a ayudar a hacer lo que nosotros queremos. Por ejemplo, uno de los conceptos importantes es el padding. El padding es el espacio interior que tiene un determinado elemento por ejemplo, si quiero aplicar un padding dentro de la caja de Main, donde tengo estas fotografías y estos textos, tendré que moverme hacia abajo, o seleccionar la parte de Diseño directamente para ir hasta allí, y aquí podemos ver que tengo dos partes, por un lado, margin, y por otro lado, padding. En el padding se ve un dibujo en el que puedo observar como hay un espacio entre lo que es el borde del objeto y el contenido de ese objeto. Y en él, podré hacer modificaciones sobre parámetros sueltos o sea, el padding-left, el padding-right, o dicho de otra manera, el padding a la izquierda, el padding a la derecha, el padding abajo, y el padding arriba. O puedo también trabajar con ellos de una manera bloqueada, a conjunto. Si hago clic sobre este botón, cualquier propiedad que cambie, por ejemplo, 20 pixels, ese cambio se ejecuta sobre todos los paddings a la vez, y aquí podemos ver de hecho el efecto, está cambiándome ese padding en todo él. Si en cambio, yo quiero hacerlo de manera parcial, puedo volver a deseleccionarlo, y puedo decirle que en la parte superior tenga 0 y hacer clic para cambiar propiedades específicas y voy a poner que tenga 20 pixels a la izquierda y 20 pixels a la derecha. Y vemos que me pone espacio a la izquierda y a la derecha pero sin embargo me lo mantiene completamente pegado sobre la parte superior. En realidad voy a hacer justo lo contrario voy aponer 20 pixels en la parte superior, con escribir solamente el 20 ya va entender que son pixels, y estas otras dos propiedades, lo que haré será eliminarlas. utilizando Quitar propiedad, puedo quitar ambas. Eso con respecto al padding, otro concepto diferente, es el concepto de margen. El margen sirve para marcar la distancia que hay desde el borde exterior de un elemento hasta el siguiente elemento que va con él. Pero para poderlo mostrar voy a hacer una cosa, voy a seleccionar esta imagen, lo primero de todo necesitaré un selector sobre ella, así que voy a pulsar en Más y voy a mantener lo que me ha añadido, ese selector me viene bien, y voy a modificar el Display. Este display sirve para elegir entre varias opciones, y en concreto me interesa el Inline-block. Todo lo que sea inline sirve para que ese elemento en concreto permanezca en la misma línea que el elemento siguiente. Y voy a modificar también su ancho, y en vez de poner su valor en pixels voy a poner su valor en tanto por ciento. Y voy a hacer que tenga, por ejemplo, un 30% del ancho total disponible. Si selecciono ahora el siguiente elemento, en realidad yo quiero coger todo el bloque que engloba estos textos, incluido el enlace, así que tendré que moverme, una de dos, o al dom, o también puedo moverme por las etiquetas que tengo en la parte inferior hasta llegar al Div.Descripción. Este es el que me engloba todos esos elementos, como soy yo el que lo ha creado, sé perfectamente cuál es que necesito. Voy a pulsar en el Más para ese selector, me vale también el selector que me ha creado automáticamente, y en este caso le voy a decir que tenga un ancho de tanto por ciento, y que tenga un 65. El hecho de ponerle un ancho en tanto por ciento va a servir para que después se adapte mejor a dispositivos móviles. Y voy de nuevo a modificar el display y voy a pedir que de nuevo tenga inline-block. Gracias a eso he conseguido que aparezca, por un lado la fotografía, y por otro lado ese objeto. Y ahora que ya lo tengo como quiero, voy de nuevo a volver atrás y voy a modificar cómo se trabaja con el margen de esta fotografía. Hay que tener cuidado con no equivocarse, yo ahora podría seleccionar la fotografía, pero los estilos que modifique aquí va a ser los del selector que tengo seleccionado dentro del Diseñador CSS. Así que tengo que acordarme de seleccionar el selector que corresponde y ahora me voy a ir a este margen. Funciona igual que el padding, si quiero que aparezca separado solo del texto, puedo modificar solo la propiedad de la derecha, y aquí aplicarle, por ejemplo, que tenga 20 pixeles de distancia. Y vemos inmediatamente en la vista En vivo como ya me ha movido ese margen. Así que queda clara la diferencia entre el margen y el padding. Y puedo hacer más cosas también, puedo, por ejemplo, hacer que sobre esa fotografía haya bordes. Para ello tengo un apartado específico, el botón este que tengo en el medio, y que sirve para trabajar sobre bordes. En la parte inferior tengo el borde Radius. O sea, para trabajar sobre el radio, sobre las esquinas, que aparezcan circulares o no aparezcan circulares. El que aparezcan circulares lo consigo modificando ese radio, que puedo modificar como un bloque y entonces, hacer que tenga 10 pixels, y se ve como está aplicando ese borde de 10 pixels, o puede incluso también trabajar con bordes independientes y así hacer que, por ejemplo, los elementos de la parte izquierda tengan 0, y los elementos de la parte de la derecha, las dos esquinas, tengan 20. Y aquí vemos, efectivamente, ese efecto. El que sea Border, no quiere decir que realmente me esté dibujando un borde, simplemente me está aplicando la forma de aplicar un borde, por cierto, que esto debería de ser 0. No me respetó correctamente lo que quería hacer. Puedo eliminar todas las cuatro propiedades que he añadido una por una, pulsando sobre Quitar propiedad, quita todas de una sola vez. Si quiero que tenga un borde, le puedo decir que de borde tenga un número determinado de pixels, por ejemplo, voy a ponerle 2, de estilo tengo que especificar alguno porque de entrada tiene ninguno, None, que es el que viene por defecto, voy a poner que sea Solid, para que sea una línea fija, aquí vemos como ya me añade ese borde, y luego, por último, solo me queda seleccionar un color cualquiera. Como vemos añadir bordes dentro de Dreamweaver es muy fácil, y también puedo elegir qué borde quiero que tenga, y así, por ejemplo, puedo cambiar un borde en concreto. De hecho todo esto lo voy a aplicar en vez de sobre la fotografía, sobre estos enlaces. Seleccionando cualquiera de los enlaces, que tengo aquí en la parte superior, puedo marcar uno de ellos, añadir un nuevo selector, que sea el texto normal, pero que además de ese texto normal, sea con la etiqueta A, de enlace. Es bueno ir añadiendo los distintos elementos que me parezcan ideales para los distintos selectores, o sea, aunque Dreamweaver elija un selector correcto, pero siempre se puede refinar un poco mejor. Y voy a decir que tengan todos estos elementos, borde en la parte inferior, le voy a pedir que tengan 4 pixels, que sean de estilo sólido, y que el color sea un tono azul oscuro. Ahí vemos cómo de simple hemos conseguido hacer ese efecto.

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.