{"id":704,"date":"2015-05-13T15:08:00","date_gmt":"2015-05-13T15:08:00","guid":{"rendered":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/crea-una-web-de-diseno-responsive-con"},"modified":"2016-03-02T08:34:34","modified_gmt":"2016-03-02T08:34:34","slug":"crea-una-web-de-diseno-responsive-con","status":"publish","type":"post","link":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/crea-una-web-de-diseno-responsive-con\/","title":{"rendered":"Crea una web de dise\u00f1o responsive con Dreamweaver en 6 pasos"},"content":{"rendered":"

C\u00f3mo dise\u00f1ar tu web en responsive con Dreamweaver y Bootstrap<\/b><\/p>\n

Te contamos como hacer una p\u00e1gina web con un dise\u00f1o responsive o adaptable de forma f\u00e1cil combinando Dreamweaver y Bootstrap.<\/p>\n

\n<\/a><\/div>\n

\u00bfQu\u00e9 es Bootstrap?<\/b><\/p>\n

Bootstrap es un framework o conjunto de herramientas que podemos usar para el dise\u00f1o de sitios web. En bootstrap hay plantillas de dise\u00f1o, formularios, botones, men\u00fas de navegaci\u00f3n predefinidos… todos ellos basados en HTML, CSS y Javascript<\/p>\n

Lo bueno de Bootstrap es que nos permite adaptar la iterfaz de nuestra web al tama\u00f1o del dispositivo en el que se visualize (ordenador, tablet y m\u00f3vil)<\/p>\n

\u00bfC\u00f3mo puedo usar Bootstrap con Dreamweaver?<\/b>
\n
<\/b>Los pasos a seguir para poder usar Bootstrap con Dreamweaver son los siguientes:
\n
<\/b>
\n
\nPaso 1: <\/b> Descargar carpeta con los componentes de Bootstrap<\/a> (Archivo comprimido)<\/p>\n

Paso 2:<\/b> Descargar e <\/b>instalar Dreamweaver CS6<\/a><\/p>\n

Paso 3:  <\/b>Descargar e instalar  Adobe Extension Manager<\/a><\/p>\n

Paso 4: <\/b>Entra en la siguiente direcci\u00f3n y descarga la extensi\u00f3n que hace funcionar bootstrap en dreamweaver:  http:\/\/www.dmxzone.com\/go\/21759\/dmxzone-bootstrap\/<\/a>
\nAntes de descargar la extensi\u00f3n tendr\u00e1s que registrarte en la web DMXZONE. Una vez registrado te dejar\u00e1 descargar el archivo (en el lado derecho tienes los botones de descarga)<\/p>\n

Paso 5:<\/b> Una vez instalado dreamweaver el paso siguiente es instalar la extensi\u00f3n que hemos descargado. Abre Dreamweaver y  haz click en Comando\/ Administrar Extensiones<\/p>\n

\n\"Abre<\/a><\/div>\n
\n<\/div>\n
\nLo siguiente es instalar la extensi\u00f3n, haz click en Install y localiza la extensi\u00f3n que has descargado<\/div>\n
\n<\/div>\n
\n<\/div>\n

<\/p>\n

\n<\/div>\n

<\/p>\n

\n<\/a><\/div>\n
\n<\/div>\n
\n<\/div>\n
\n<\/div>\n

<\/p>\n

\n<\/a><\/div>\n

<\/p>\n

\n<\/a><\/div>\n
\n<\/div>\n
\n<\/div>\n
\n<\/div>\n

Una vez instalada la extensi\u00f3n, cerramos el Extension Manager.<\/p>\n

Paso 6. <\/b>Haz click en archivo nuevo en Dreamweaver Archivo Nuevo\/ Page from Sample. Si todo ha ido bien estar\u00e1n las carpetas de boostrap, elige un dise\u00f1o de los predefinidos y ya puedes empezar a personalizar tu p\u00e1gina en responsive.<\/p>\n

\n<\/div>\n
\n<\/div>\n
\n<\/a><\/div>\n
\n<\/div>\n
\nEjemplo de plantilla b\u00e1sica <\/div>\n
\n<\/div>\n
\n<\/a><\/div>\n
\n<\/div>\n
\n<\/div>\n
\n<\/div>\n
\n<\/div>\n

Nota: al subir la web al  servidor acu\u00e9rdate de subir tambi\u00e9n la carpeta de bootstrap. La extensi\u00f3n que estamos usando funciona con la versi\u00f3n 2.3.1 de Bootstrap.<\/p>\n

Lecturas relacionadas:<\/b><\/p>\n