Trabajar con Bootstrap en Dreamweaver

Name: Trabajar con Bootstrap en Dreamweaver
Author: Patti Scully-Lane

Comprender HTML y CSS no es un requisito para utilizar Dreamweaver. Sin embargo, se recomienda. En este módulo, se familiarizará con la estructura de etiquetas…

Preview the first lesson free — get full access to all 5 lessons.

Solicitar una demo Iniciar sesión

Curso: bajo demanda

En esta lección, vas a aprender cómo crear una nueva página en blanco utilizando el marco de arranque. Ahora, lo primero que tenemos que hacer antes de comenzar a usar bootstrap es crear un sitio. Vamos a subir al menú del sitio, vamos a crear un nuevo sitio y vamos a hacer clic en esta carpeta para buscar. Y he guardado los archivos de la lección. para este módulo a mi escritorio. Y entonces voy a entrar y voy a seleccionar el módulo dos, la lección uno y esa va a ser mi carpeta. Y para el nombre de nuestro sitio, Voy a escribir trabajando con bootstrap y guardar. Así que cuando miramos nuestro panel de archivos podemos ver que hay una carpeta de imágenes, una carpeta multimedia y una carpeta miscelánea. Todavía no hay ningún archivo HTML en nuestra carpeta. Entonces, es importante entender qué carpetas tenemos porque en un minuto, cuando creamos nuestra página usando Bootstrap, Dream Weaver creará automáticamente un par de carpetas más para nosotros. Así que vamos a ir al menú de archivo a nuevo y cuando creamos nuestro nuevo documento HTML, los documentos HTML que hemos estado creando desde cero han estado usando el marco de ninguno pero esta vez vamos a usar el framework Bootstrap. Entonces, ¿qué es exactamente Bootstrap? Bueno, Bootstrap es lo que llamamos un marco. Lo que es, es un grupo de componentes preconstruidos que puedes usar para crear más fácilmente las páginas de su sitio web. Ahora, todos estos componentes están basados en, el nuevo marcado HTML cinco, y usan CSS tres, lo último en hojas de estilo en cascada. Ahora Bootstrap no solo tiene HTML cinco y CSS tres pero también utiliza JavaScript. Y así, cuando creas tu primera página basado en este marco Bootstrap, Dream Weaver va a crear carpetas adicionales para mantener nuestro CSS así como nuestro JavaScript. Así que vamos a hacer clic en el botón Crear y cuando lo hagamos, puede verlo en nuestro panel de archivos tenemos una carpeta CSS y una carpeta JavaScript. Y en nuestro JavaScript tenemos tres archivos JavaScript diferentes, en nuestro CSS, tenemos un archivo CSS, y vamos a subir al menú de archivo y vamos a guardar este documento ahora mismo y lo llamaremos index dot HTML, y guardaremos. Quiero hablar un poco sobre el archivo relacionado. así que aquí arriba en la parte superior de nuestra página, tenemos nuestro código fuente y si hacemos clic en ese botón de código arriba en la parte superior podemos ver que este es el código fuente de nuestra página. Y actualmente, realmente no hay nada aquí. pero tenemos un comentario que dice que la copia del cuerpo va aquí. Pero tenemos nuestros enlaces configurados aquí, así que tenemos ese enlace al archivo de arranque, también tenemos un enlace a los tres archivos JavaScript. Así que en cualquiera de los componentes que usamos, algunos de los componentes interactivos que tenemos, se basan en esta tecnología, esta tecnología de JavaScript por lo que ya está en nuestra página. Y si miramos hacia arriba estos son todos los archivos que podemos usar. Y si entiendes un poco de HTML y CSS puede entrar y personalizar estos archivos. Y dicho esto, es una buena idea. Si va a trabajar con arranque, es una buena idea tener una base en HTML y CSS poder ver el código y hacer cambios al código donde sea necesario. Con estos archivos relacionados, Quiero traer a su atención los dos bootstrap, son bootstrap 4.4 0.1. Esta es una tecnología que salió en 2019, entonces no es la última versión de bootstrap. Dream Weaver no funciona con la última versión pero sigue siendo una versión muy estable de bootstrap para empezar. Ahora, si vamos a nuestra pestaña de inserción tenemos en la pestaña insertar, tenemos diferentes menús desplegables y uno de esos menús desplegables son los componentes de arranque. Desde aquí, podemos agregar muchos diseños prediseñados diferentes para nuestra página y vamos a aprender cómo hacerlo en lecciones posteriores. Pero por ahora, vamos a poner solo un contenedor. Y te darás cuenta, tengo la vista en vivo seleccionado aquí en la parte superior. Cuando trabajas en bootstrap, trabajar en vista en vivo es en realidad una mejor idea que trabajar en la vista de diseño. Asegúrese de que tenemos nuestro cursor en nuestro cuerpo. Aquí a la izquierda, vamos a hacer clic allí. y vamos a hacer clic en este contenedor. Y ahora dentro de nuestro cuerpo, tenemos un contenedor y en ese contenedor es donde pondremos todos los demás componentes de nuestra página. Así que vamos a ir al menú de archivo y guardar eso y ahora tenemos una página con un contenedor listo para que pongamos nuestro contenido. Entonces, en esta lección, aprendiste cómo crear una página utilizando el marco de arranque en Adobe Dream Weaver.

Intermedio Proveedor : Patti Scully-Lane 5 lecciones · 39m en Árabe, Alemán, Inglés, Español, Francés, Portugués, Urdu, Chinese

Descripción del curso

Comprender HTML y CSS no es un requisito para utilizar Dreamweaver. Sin embargo, se recomienda. En este módulo, se familiarizará con la estructura de etiquetas de una página HTML y con la forma en que Dreamweaver facilita el uso de la vista del código para aprender HTML al crear páginas. Aprenderá y aplicará las funciones de Bootstrap Framework para agregar fácilmente nuevas páginas e insertar elementos en ellas.

Objetivos de aprendizaje

Lo que aprenderás

Reconocer y usar la sintaxis de HTML mientras se trabaja en la vista de código de Dreamweaver
Crear una nueva página en blanco usando el marco Bootstrap
Insertar navegación y presentaciones de diapositivas de fotos en una página con Bootstrap
Insertar filas y columnas en una página usando Bootstrap
Crear una página basada en un método Bootstrap
Trabajar con la vista de código en Dreamweaver para aprender y editar HTML

Puntos clave

Entender HTML y CSS no es requerido para usar Dreamweaver, aunque se recomienda.
La vista de código de Dreamweaver facilita aprender HTML mientras creas páginas.
El marco Bootstrap te permite agregar fácilmente nuevas páginas e insertar elementos en ellas.
Bootstrap se puede usar para insertar navegación, presentaciones de diapositivas de fotos, filas y columnas en una página.

Preguntas frecuentes

¿Necesito saber HTML y CSS antes de tomar este curso?

No. Entender HTML y CSS no es un requisito para usar Dreamweaver, aunque se recomienda. El curso te ayuda a familiarizarte con la estructura de etiquetas de una página HTML usando la vista de código de Dreamweaver.

¿Qué podré construir con Bootstrap en este curso?

Aprenderás a crear una nueva página en blanco con Bootstrap e insertar navegación, una presentación de diapositivas de fotos y filas y columnas en una página, así como crear una página basada en un método Bootstrap.

¿Qué habilidades cubre este curso?

El curso cubre Adobe Dreamweaver, el marco front-end Bootstrap, el Protocolo Bootstrap y secuencias de comandos HTML, y se relaciona con certificaciones de Adobe Dreamweaver y Dreamweaver MX.

¿Para quién es este curso?

Es adecuado para estudiantes que quieran familiarizarse con la estructura de etiquetas de una página HTML y aplicar las funciones del marco Bootstrap en Dreamweaver para agregar nuevas páginas e insertar elementos en ellas.