Dreamweaver CC 2017 esencial

Panel diseñador CSS. Añadiendo archivos CSS

¡Prueba gratis durante 10 días

nuestros 1268 cursos !

Prueba gratis Mostrar modalidades de suscripción
Comenzaremos el capítulo hablando del diseñador CSS. Este panel es imprescindible dentro de Dreamweaver, ya que gracias a él podremos tener un control total sobre todo lo relacionado con los estilos CSS.

Transcripción

En los archivos base, en la carpeta para este capítulo, en los archivos iniciales, nos encontramos con una página HTML que tiene los contenidos que tienen que aparecer en la "home" de mi "web", pero en los que realmente se ven, que cada elemento aparece colocado como me parece bien, con ningún tipo de control de aspecto ni de posición, en realidad el resultado final debería ser este, como podemos ver, hay elementos que aparecen seguidos, colocados horizontalmente, otros verticalmente, imágenes de fondo, líneas, etc. Este capítulo en realidad está pensado para eso, para enseñar a trabajar con los estilos CSS. Los estilos CSS sirven para dar aspecto a los archivos HTML que tenemos. El HTML, según se va añadiendo, según se va creando las distintas etiquetas, va haciendo que se vayan colocando los elementos secuencialmente. Hay algunos elementos que pueden aparecer seguidos, como el texto, y otros elementos que tienen identidad como bloque y que aparecen colocados unos encima de otros. Como pueden ser las etiquetas "Dif", o los elementos "L" y de navegación. Para poder controlar que eso se modifique, que salgan seguidos o que se coloquen unos encima de otros y demás, es para lo que necesitaremos crear estos estilos CSS. A lo largo del capítulo, no vamos a enseñar CSS, pero sí vamos a enseñar a manejar Dreamweaver con los estilos CSS, y de paso vamos a explicar como conseguir algunas de las tareas básicas que ofrecen las propiedades CSS. Lo primero que necesitamos es saber dónde vamos a añadir los CSS. Estos se pueden añadir dentro del propio archivo, o se pueden añadir dentro de Archivos externos. Lo ideal es crear un archivo de estilo CSS, o un archivo cualquiera de CSS y vincular ese archivo a nuestra página. Yo puedo vincular muy fácilmente un archivo que ya ha sido creado o crear uno nuevo desde el diseñador CSS. En este diseñador CSS tengo todo lo necesario para trabajar con las partes más básicas de CSS. Está dividido en cuatro partes, que van de más importancia a menos importancia, pero digamos, de más detalle. Lo más global es, las fuentes. Las fuentes van a servir para definir donde voy a tener CSS. De hecho, puedo crear un nuevo archivo CSS, puedo adjuntar un archivo CSS existente y me permitiría, desde el botón de examinar, seleccionar archivos CSS que ya habría creado, o también puedo definir en la página. Eso me crearía una etiqueta "Style" dentro de la cual podría añadir los estilos. Esto no es una buena práctica, los estilos CSS deberían ir siempre separados a lo que es el código HTML por una cuestión de organización. Voy a eliminar este estilo CSS y voy a crear uno nuevo. Para ello me voy al diseñador CSS, pulso en el botón "Más" y pulso en crear un nuevo archivo. Vemos que la ventana es muy parecida a la que teníamos antes. Pulso en examinar, me voy hacia la carpeta CSS, y creo "Estilos CSS", pulso en "Guardar", me da las opciones de vínculo o de importación, o sea, que me incruste ese código dentro de la página o que me vincule una etiqueta, "Link", que es de hecho, lo que quiero hacer. Pulso en vínculo, pulso en aceptar, me ha creado ya ese estilo CSS y si pongo la vista de código, veremos que en el "head" me ha añadido una etiqueta "link", con una referencia a ese estilo CSS. Este panel lo puedo reorganizar para que se vea un poco mejor, por ejemplo, para ver las diferentes fuentes, me pongo sobre el borde y pincho y arrastro. El siguiente nivel, es los medios. Es decir, utilizar lo que se llama "Media Queries", elegir para que se van a utilizar ciertos estilos CSS. Dicho de otro modo, si los estilos CSS que voy a ir añadiendo van a estar asociados a un tamaño grande de pantalla, un tamaño pequeño, si van a estar asociados a pantalla o impresión, por ejemplo, por simplificar, no voy a tocarlo. La siguiente opción, son los selectores. Los selectores, es la parte de código CSS que sirve para definir sobre que elemento concreto se van a aplicar los estilos CSS. Va a haber diferentes formas de utilizar selectores. Selectores de identificador, de clase, de etiquetas, pero básicamente siempre va a consistir en hacer clic sobre un elemento, una vez que lo tenga seleccionado pulsar en el más. Y el último apartado, es el de propiedades. Una vez que tengo un determinado selector, puedo añadir propiedades que se van a aplicar sobre el objeto que se selecciona con ese selector, esas propiedades van a ser el ancho, la línea, el color de fondo, etc. Con toda esta combinación se puede ver que tengo las opciones necesarias para crear estilos CSS, sin necesidad de programar absolutamente nada.

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.