Dreamweaver CC 2017 avanzado: Automatizaciones y trabajo con PHP y CSS

Aplicación de estilos con Dreamweaver CC 2017

¡Prueba gratis durante 10 días

nuestros 1240 cursos !

Prueba gratis Mostrar modalidades de suscripción
En este otro vídeo adaptaremos, mediante el uso de Dreamweaver, un archivo CSS convirtiéndolo en un archivo SASS utilizando las herramientas propias de Dreamweaver. Además aplicaremos modificaciones sobre este archivo SASS como ejemplo práctico de uso en Dreamweaver.

Transcripción

Vamos a trabajar un poquito con sass y vamos así a demostrar cómo funciona. Yo en realidad tengo aquí un archivo estilos.css Este archivo estilos.css es un css simple pero me interesa transformarlo en un archivo sass, así que voy a pedir que me lo guarde como, voy a guardarlo dentro de la carpeta sass y lo voy a llamar "estilos", efectivamente. Una vez que lo he guardado pero realmente este debería ser un archivo sass, así que voy a... cambiarle la extensión. Y ahora, una vez cambiada esa extensión, lo volveré a abrir y efectivamente, me está dando errores porque la sintaxis no es correcta. En realidad transformar un archivo css en un archivo sass va a ser muy fácil. Utilizando buscar y reemplazar puedo ir eliminando todos los elementos que me sobran. Por ejemplo, el { que debería desaparecer bueno pues pido que en el documento actual me reemplace todos ellos, voy a eliminarle los espacios. Voy a seleccionarlo de nuevo, parece que no lo hizo. Bien, reemplazar todos, aquí sí que me los ha eliminado. Repetiré lo mismo. Puedo seleccionarlo y utilizar CTRL F, comando F Mac para seleccionar el trozo que quiero quitar. Por otro lado, tampoco quiero puntos y comas. Bueno, pues selecciono de nuevo, CTRL F, reemplazar todos y ya no tiene puntos y comas. Por último, dependiendo de la configuración de las ediciones, preferencias, y dentro de preferencias, el formato de código, dependiendo de si esto está puesto como tabulaciones o como espacios en caso de que esté colocado como espacios las sangrías que tendrían mi archivo estarían generadas como espacios, y eso, dentro de sass también me generaría un error. Así que puedo seleccionarlo y puedo sustituirlo por un tabulador, copiando y pegando ese tabulador. Entonces ahora cuando pulse en reemplazar todos, ya debería de aparecer correctamente. El error sigue apareciendo, pero es que la verificación de errores se va a ejecutar siempre cuando yo guarde el archivo, así que si pulso en guardar ese archivo, vemos que ahora sí aparece correctamente, en la salida si tuviese algún error me aparecerían esos errores igual que me aparecería también el símbolo de errores y si abro el archivo estilos.css pues se verá que este archivo estilos.css es generado con los comentarios, aquí lo podemos ver, automáticos que he marcado dentro de las preferencias del sitio. La compilación de los sitios también va a tener anidaciones, por ejemplo, voy a crear dentro de este estilos.sass bueno, pues voy a utilizar precisamente eso, la anidación. Así que voy a hacer desde este archivo sass se importe el archivo "variables". Y ahora, voy a hacer, bueno aquí vemos que efectivamente me dice que la exportación ha sido correcta, y ahora en este archivo variables, pues puedo crear diferentes variables por ejemplo, pues puedo crear una color_texto_primario: y aplicarle el color negro. Por ejemplo, color_resaltado: y aplicarle el tono naranja que es el #ff5f00 o por ejemplo, también puedo aplicar estilos de fuente. Voy a guardarlo, y ahora lo que puedo es fácilmente también, hacer que estos estilos estén aplicados dentro del otro archivo saas. Para ello, bueno pues puedo irme de nuevo, buscar y reemplazar, seleccionar la variable y hacer que donde antes estaban, voy a abrir de nuevo este buscar y reemplazar, hacer que donde antes estaban estos colores, ahora me aplique la variable. Así si me muevo hacia abajo, pues en alguna parte tengo que... aquí lo podemos ver, de todas formas voy a deshacerlo, porque he cometido un error pequeño que es añadir también la almohadilla. Reemplazar todos, y ahora aquí podemos ver cada una de las variables. Cuando yo ahora guarde este documento, inmediatamente, me va a haber aparecido dentro de los estilos css, ese tono naranja en vez de la variable. Aquí lo vemos y si quiero hacer, por ejemplo, este tono un poco más oscuro o un poco más claro, bueno pues por ejemplo, ponerle un #ff5f55 en el momento en el que yo guarde este archivo, eso me va a compilar también los archivos relacionados, y entonces aquí debería de aparecer en vez de ese ff, parece que no lo actualizó, voy a volverme atrás, y sí, aquí se puede ver cómo me ha generado ese ff5f y luego el 55 que le he añadido previamente. Se lo vuelvo a guardar, debería de actualizarlo, que conste de todas formas cualquier caso también puedo hacer compilaciones de manera manual, pulsando con el botón derecho sobre un archivo de ellos, puedo seleccionar, compilar y eso también efectuaría la compilación. Aquí lo podemos ver. De hecho, yo en realidad puedo hacer compilaciones sobre cualquier archivo fuera del sitio también. El problema que tienen los archivos del sitio es que tendré que hacerlo con el botón derecho para compilarlo y, pues que no va a respetar las posibles herencias que pudiese tener a la hora de obligar una compilación tras la otra.

Dreamweaver CC 2017 avanzado: Automatizaciones y trabajo con PHP y CSS

Utiliza Dreamwaver CC 2017 para crear y automatizar contenidos dinámicos. Aprende cómo mejorar tu flujo de trabajo y usar el programa como un gran IDE de programación web.

2:33 horas (43 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.