Sábado, 04 Marzo 2017 18:27

Bootstrap desde Dreamweaver: El Componente Navbar

Valora este artículo
(1 Voto)

El componente Navbar desde Dreamweaver CC2017

Insertando una barra de navegación responsiva desde DW 2017

Esta es la primera de varias entradas orientadas a ayudar al estudiante inicial de diseño web con Dreamweaver a insertar y visualizar el resultado funcional de estos componentes responsivos que utilizan Bootstrap.

Debido a que se trata de un material de apoyo para cursos guiados (presenciales o remotos), no se profundizarán en ninguno de estos los aspectos de edición más avanzadas, tales como agregar o quitar opciones o modificar el aspecto de los componentes a insertar, ya que estos procedimientos fueron o serán vistos en clases. Vamos con el primero:

El Componente Navbar 

Hasta la versión que tenemos instalada en nuestro equipo (CC2017.0.1), Dreamweaver cuenta con 4 tipos de barras de navegación responsivas basadas en Bootstrap, cuyo procedimiento de inserción veremos a continuación, entendiendo que los siguientes tres puntos se repetirán para la inserción de estas 4 variantes del componente Navbar:

1. Desde DW creamos un nuevo documento (Archivo -> Nuevo):

Nuevo documento en DW

2. Dreamweaver pedirá las propiedades del nuevo documento:

Propiedades del nuevo documento

Ingresaremos en esta ventana las opciones de "Nuevo documento" / HTML, dando por título el que corresponda a nuestra página.

3. El código creado por Dreamweaver CC2017 es el siguiente:

Código página web vacía

El anterior corresponde al código de una página web vacía, basada en HTML5, con título "Basic NavBar".

Veamos ahora las cuatro opciones disponibles en esta versión del programa, cómo se insertan, y su comportamiento:

a. Basic Navbar

a1. Posicionándonos entre la apertura y cierre de la etiqueta body, insertamos el menú responsivo eligiendo la opción Insertar -> Componentes de Bootstrap -> Navbar -> Basic Navbar:

Insertando un componente Navbar con Dreamweaver

a2. Visualmente el resultado es el siguiente:

Especto gráfico del componente Basic Navbar

a3. Se puede ver una vista en vivo del código haciendo clic aquí, mientras que podemos decargar el ejemplo completo haciendo clic aquí.


b. NavBar fixed to top

b1. Luego de repetir los pasos 1 a 3 vistos más arriba, creamos un nuevo documento.

b2. Esta vez vamos a optar por una barra de navegación responsiva llamada "Navbar fixed to top":

Insertar un Navbar fixed to top

b3. El resultado visual inicial de este componente es idéntico al del Basic Navbar, aunque su funcionamiento difiere del anterior en que el "Navbar fixed to top" ya no hace scroll junto a la página, sino que permanece fijo en el tope superior del área útil de nuestro agente de usuario, tal como podemos ver en el código que podemos ver aquí.

b4. Se puede descargar el ejemplo completo (en formato zip) haciendo clic en este enlace.


c. Navbar fixed to bottom

Así como el Navbar fixed to top se fija en el borde superior del espacio útil de nuestro navegador, es posible insertar el componente Navbar fixed to bottom el que permanecerá fijo al pie del espacio útil del agente de usuario, para lo cual seguiremos el siguiente procedimiento:

c1. Elegimos la opción "Navbar fixed to bottom":

Insertar un componente Navbar fixed to bottom

c2. El resultado visual es el siguiente:

Aspecto del Navbar fixed to bottom

c3. El código de ejemplo se puede descargar desde aquí, y es posible verlo funcionar en vivo haciendo clic aquí.


d. Inverted Navbar

d1. Veremos en este caso la inserción de la barra de navegación definida como "Inverted Navbar":

Insertando el componente Inverted Navbar

d2. Visualmente, tendremos el siguiente resultado:

Aspecto de la barra de navegación Inverted Navbar

d3. El funcionamiento del componente es similar al del Basic Navbar, al que podemos ver en vivo siguiendo este enlace, así como descargar el ejemplo ejemplo comprimido desde aquí.


Del resto de la edición ya se continúa según los métodos vistos en clases.

Como siempre, puedes dejar tus comentarios y consultas usando el formulario dispuesto al pie de esta entrada.

Alumnos de los cursos de diseño web pueden, como siempre, realizar sus consultos en clases o por email.

Saludos para todos!
Plácido Luna

Visto 453 veces Modificado por última vez en Sábado, 04 Marzo 2017 19:31