{"id":9115,"date":"2019-09-17T10:33:19","date_gmt":"2019-09-17T08:33:19","guid":{"rendered":"https:\/\/blog.hostinger.io\/es-tutoriales\/?p=9115"},"modified":"2026-02-10T16:48:27","modified_gmt":"2026-02-10T15:48:27","slug":"tutorial-dreamweaver","status":"publish","type":"post","link":"\/es\/tutoriales\/tutorial-dreamweaver","title":{"rendered":"Tutorial completo sobre Dreamweaver"},"content":{"rendered":"<p>Al comenzar con el <a href=\"\/es\/tutoriales\/como-ser-programador-web\">desarrollo de tu sitio web<\/a>, probablemente hayas escuchado sobre los editores WYSIWYG (What You See Is What You Get &ndash; Lo que ves es lo que obtienes). As&iacute; que la tentaci&oacute;n de crear un sitio web sin conocimientos de codificaci&oacute;n podr&iacute;a parecerte atractiva y te ha llevado a buscar un tutorial de <a href=\"https:\/\/www.adobe.com\/products\/dreamweaver\" target=\"_blank\" rel=\"noopener\">Dreamweaver<\/a> en Internet.<\/p><p>Y es que, cuando se utiliza Dreamweaver por primera vez, puede ser intimidante. Pero no tienes nada de qu&eacute; preocuparte, este art&iacute;culo cubrir&aacute; todo lo que debes saber sobre c&oacute;mo crear un sitio web con Dreamweaver.<\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Build-Website-In-9-Easy-Steps-ES.pdf\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" width=\"1024\" height=\"283\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/eBook-Build-website-ES.png\/public\" alt=\"\" class=\"wp-image-25981\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/eBook-Build-website-ES.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/eBook-Build-website-ES.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/eBook-Build-website-ES.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/eBook-Build-website-ES.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/eBook-Build-website-ES.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-que-es-adobe-dreamweaver-cc\">&iquest;Qu&eacute; es Adobe Dreamweaver CC?<\/h2><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/Adobe-Dreamweaver-CC-P%C3%A1gina-de-Inicio.png\/public\" alt=\"Adobe Dreamweaver CC P&aacute;gina de Inicio\" class=\"wp-image-9119\"><\/figure><\/div><p>Adobe Dreamweaver CC es un famoso creador de sitios web y una herramienta de implementaci&oacute;n, y se considera una combinaci&oacute;n perfecta entre un WYSIWYG y otros <a href=\"\/es\/tutoriales\/mejores-editores-html\">editores HTML<\/a> m&aacute;s convencionales. Macromedia fue el primero en desarrollar Dreamweaver, que luego fue adquirido por Adobe Inc., en 2005.<\/p><p>Dreamweaver inicialmente implement&oacute; una licencia perpetua, un pago &uacute;nico por usar el software, pero luego cambi&oacute; a un modelo basado en suscripciones con la estructura Adobe Creative Cloud.<\/p><p>Adobe Dreamweaver CC es un software de <a href=\"\/es\/tutoriales\/que-es-un-entorno-de-desarrollo\">Entorno de Desarrollo<\/a> Integrado (IDE, por sus siglas en ingl&eacute;s), lo que significa que proporciona herramientas integrales y de soporte con fines de desarrollo. Con la estructura Creative Cloud, puedes optar por incluir otro software creativo de Adobe para aumentar tu productividad.<\/p><p>Dreamweaver te permite crear y dise&ntilde;ar un sitio web a nivel visual, utilizando el m&eacute;todo de arrastrar y soltar que te permite mover elementos en el tablero de dise&ntilde;ador. Tambi&eacute;n puedes usarlo como cualquier editor de c&oacute;digo tradicional: codifica solo con texto y podr&aacute;s cargar instant&aacute;neamente el sitio web en tu servidor.<\/p><p>Adem&aacute;s, obtendr&aacute;s un mont&oacute;n de material y recursos de aprendizaje, y un foro de la comunidad de Adobe dedicado a ayudarte a responder cualquier pregunta que tengas sobre el producto. Por si fuera poco, este programa se encuentra disponible en 15 idiomas diferentes. As&iacute; que, si est&aacute;s buscando un tutorial de Dreamweaver, encontrar&aacute;s mucha informaci&oacute;n.<\/p><p>Todas estas caracter&iacute;sticas posicionan a Dreamweaver como un h&iacute;brido entre un <a href=\"\/es\/tutoriales\/que-es-un-cms\/\">sistema de gesti&oacute;n de contenido (CMS)<\/a> y un editor de c&oacute;digo puro.<\/p><h2 class=\"wp-block-heading\" id=\"h-caracteristicas-distinguibles\">Caracter&iacute;sticas distinguibles<\/h2><p>Ser parte del ecosistema creativo de Adobe ya ha distinguido a Dreamweaver de otros editores de c&oacute;digo basados &#8203;&#8203;en im&aacute;genes. Dreamweaver tiene acceso a caracter&iacute;sticas y ventajas que solo Adobe podr&iacute;a ofrecer. Aun as&iacute;, las dos caracter&iacute;sticas m&aacute;s dominantes de este software son:<\/p><h3 class=\"wp-block-heading\" id=\"h-interfaz-visual-amigable-para-principiantes\">Interfaz visual amigable para principiantes<\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"506\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/crear-un-nuevo-documento.jpg\/public\" alt=\"Interfaz amigable para principiantes para crear un nuevo documento\" class=\"wp-image-9123\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/crear-un-nuevo-documento.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/crear-un-nuevo-documento.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/crear-un-nuevo-documento.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/crear-un-nuevo-documento.jpg\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/crear-un-nuevo-documento.jpg\/w=470,fit=scale-down 470w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/crear-un-nuevo-documento.jpg\/w=640,fit=scale-down 640w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/crear-un-nuevo-documento.jpg\/w=215,fit=scale-down 215w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><p>Adobe Dreamweaver CC es f&aacute;cil de usar, pero, al mismo tiempo, dif&iacute;cil de dominar. Tu sitio pasar&aacute; a ser tan bueno como tus habilidades. Es decir, si bien el software ofrece muchas funciones de desarrollo web, con conocimientos b&aacute;sicos o limitados no puedes aplicar dichas funciones al m&aacute;ximo.<\/p><p>A pesar de esto, los principiantes pueden comenzar a construir un sitio web gracias a este editor visual. Hay funciones de arrastrar y soltar para insertar elementos <a href=\"\/es\/tutoriales\/que-es-html\/\">HTML<\/a> en tu proyecto, y puedes ver instant&aacute;neamente cualquier cambio que realices en el sitio web. Un sencillo tutorial de Dreamweaver te ayudar&aacute; a comenzar.<\/p><p>Tambi&eacute;n te ayuda a comprender en qu&eacute; parte del elemento est&aacute;s trabajando actualmente. Como puedes ver en la siguiente imagen de ejemplo, cuando haces clic en el t&iacute;tulo, resalta el c&oacute;digo correspondiente en el editor.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"539\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/facil-de-entender.jpg\/public\" alt=\"Espacio de trabajo f&aacute;cil de entender\" class=\"wp-image-9124\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/facil-de-entender.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/facil-de-entender.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/facil-de-entender.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/facil-de-entender.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-potente-editor-de-codigo-incorporado\">Potente editor de c&oacute;digo incorporado<\/h3><p>Otro aspecto importante de Dreamweaver es el potente editor de c&oacute;digo incorporado. Si los desarrolladores profesionales quieren codificar en un editor de texto, pueden hacerlo. Algunas de sus funciones clave incluyen:<\/p><ul class=\"wp-block-list\">\n<li><strong>Resaltado de sintaxis.<\/strong> Para ayudar a leer el c&oacute;digo m&aacute;s f&aacute;cilmente, resaltar&aacute; diferentes elementos como variables, ID y otros.<\/li>\n\n\n\n<li><strong>C&oacute;digo de finalizaci&oacute;n.<\/strong> Aumenta tu productividad con la inserci&oacute;n de c&oacute;digo autom&aacute;tica. Por ejemplo, si simplemente escribes<strong> img<\/strong> y presionas la tecla <strong>tab<\/strong> de tu teclado podr&aacute;s insertar <strong>&lt;img src=&raquo;&raquo; alt=&raquo;&raquo;&gt;<\/strong><\/li>\n\n\n\n<li><strong>Documentaci&oacute;n de CSS<\/strong>. Siempre que necesites referencias para propiedades CSS, hay una funci&oacute;n de Documentos r&aacute;pidos que aparecer&aacute; directamente en el editor de c&oacute;digo con informaci&oacute;n relevante.<\/li>\n<\/ul><p>Adem&aacute;s de eso, podemos mencionar otras caracter&iacute;sticas importantes:<\/p><ul class=\"wp-block-list\">\n<li><strong>Bootstrap 4 incorporado<\/strong>. La &uacute;ltima versi&oacute;n de <strong>HTML<\/strong>, <a href=\"\/es\/tutoriales\/que-es-css\/\"><strong>CSS <\/strong><\/a>y <a href=\"\/es\/tutoriales\/que-es-javascript-introduccion-basica\/\"><strong>JavaScript<\/strong><\/a> para desarrollar un sitio web responsive.<\/li>\n\n\n\n<li><strong>Compatibilidad con Git<\/strong>. Realiza todas las operaciones comunes de <strong>Git<\/strong>, incluyendo <strong>Push<\/strong>, <strong>Pull<\/strong>, <strong>Commit<\/strong> y <strong>Fetch<\/strong>, directamente desde el panel de control de Dreamweaver.<\/li>\n\n\n\n<li><strong>Vista previa de navegador en tiempo real<\/strong>. Puedes ver en tiempo real los cambios en tu sitio web mientras lo editas.<\/li>\n\n\n\n<li><strong>Bibliotecas Creative Cloud<\/strong>. Accede a colores, gr&aacute;ficos y otros recursos creativos en la base de datos.<\/li>\n\n\n\n<li><strong>Chromium Embedded Framework (CEF) incorporado<\/strong>. Para ayudar a los desarrolladores a incorporar navegadores que se puedan usar en una aplicaci&oacute;n de terceros.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-nada-es-perfecto\">Nada es perfecto<\/h2><p>Sin embargo, Adobe Dreamweaver CC tambi&eacute;n tiene sus inconvenientes. Como coment&aacute;bamos antes, este software es tan bueno como lo sean tus habilidades. Entonces, aunque la interfaz en vivo ayuda a los principiantes a crear un sitio web, probablemente pasar&aacute; algo de tiempo hasta que puedas crear uno realmente sofisticado.<\/p><p>A pesar de toda la informaci&oacute;n proporcionada, Dreamweaver todav&iacute;a tiene una curva de aprendizaje muy pronunciada. Necesitar&aacute;s invertir una cantidad considerable de tiempo para comprender todas sus caracter&iacute;sticas por completo. Entonces, si esperas leer un tutorial de Dreamweaver y convertirte en un profesional, puede que te sientas decepcionado.<\/p><p>Adem&aacute;s, es un servicio pago que no es precisamente econ&oacute;mico. Entonces, si eres un desarrollador aficionado, Dreamweaver probablemente no sea la mejor herramienta para usar.<\/p><p>\n\n\n\n<div class=\"protip\">\n                    <h4 class=\"title\">Consejo profesional<\/h4>\n                    <p>Si crees que Adobe Dreamweaver CC no es lo tuyo, no est&aacute;s solo. De hecho, alrededor del 33% de los sitios web en Internet son construidos con WordPress, y t&uacute; tambi&eacute;n <a href=\"\/es\/tutoriales\/como-disenar-una-pagina-web\/\">puedes crear uno<\/a> de forma f&aacute;cil. Y si eres cliente de Hostinger esto ser&aacute; a&uacute;n m&aacute;s f&aacute;cil, nuestra funci&oacute;n de instalaci&oacute;n con 1 clic lo har&aacute; por ti.<\/p>\n                <\/div>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-resumen-de-precios-de-dreamweaver\">Resumen de precios de Dreamweaver<\/h2><p>Al ser un software basado en suscripci&oacute;n, Dreamweaver ofrece una variedad de planes individuales para sus usuarios. El plan prepago para obtener solamente Dreamweaver m&aacute;s <strong>100GB<\/strong> de almacenamiento en la nube, <strong>Adobe Portfolio<\/strong>, <strong>Fonts<\/strong> y<strong> Spark<\/strong> cuesta <strong>$239.88<\/strong>\/a&ntilde;o.<\/p><p>Y la opci&oacute;n de suscribirte a todas las aplicaciones, que incluye la colecci&oacute;n completa de <strong>m&aacute;s de 20<\/strong> software creativos, incluidos <strong>Photoshop CC<\/strong>, <strong>Illustrator CC<\/strong> y <strong>Adobe XD CC<\/strong>, tiene un costo de <strong>$599.88<\/strong>\/a&ntilde;o.<\/p><p>Aqu&iacute; te dejamos una vista completa de los planes disponibles para individuos:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"322\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/precios-dreamweaver.jpg\/public\" alt=\"Descripci&oacute;n general de precios de Adobe Dreamweaver CC para individuos\" class=\"wp-image-9125\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/precios-dreamweaver.jpg\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/precios-dreamweaver.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/precios-dreamweaver.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/precios-dreamweaver.jpg\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/precios-dreamweaver.jpg\/w=990,fit=scale-down 990w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Tambi&eacute;n puedes probar Dreamweaver durante siete d&iacute;as en una prueba gratuita. Simplemente descarga el programa y reg&iacute;strate con tu cuenta de correo electr&oacute;nico, <a href=\"http:\/\/facebook.com\/\" target=\"_blank\" rel=\"noopener\">Facebook<\/a> o <a href=\"http:\/\/google.com\/\" target=\"_blank\" rel=\"noopener\">Google<\/a>.<\/p><p>Ahora s&iacute;, comencemos con el tutorial b&aacute;sico de Dreamweaver y aprende c&oacute;mo crear una p&aacute;gina de inicio.<\/p><h2 class=\"wp-block-heading\" id=\"h-tutorial-de-dreamweaver-creacion-de-un-sitio-web\">Tutorial de Dreamweaver: creaci&oacute;n de un sitio web<\/h2><h3 class=\"wp-block-heading\" id=\"h-1-crea-un-nuevo-sitio\">1. Crea un nuevo sitio<\/h3><p>En el panel de Adobe Dreamweaver CC, ve a <strong>Site -&gt; New Site <\/strong>y aparecer&aacute; una nueva ventana.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"659\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/crear-un-nuevo-sitio.jpg\/public\" alt=\"Crear un nuevo sitio desde Dreamweaver\" class=\"wp-image-9126\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/crear-un-nuevo-sitio.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/crear-un-nuevo-sitio.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/crear-un-nuevo-sitio.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/crear-un-nuevo-sitio.jpg\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/crear-un-nuevo-sitio.jpg\/w=74,fit=scale-down 74w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><p>El primer paso es nombrar su sitio web y guardarlo en una nueva carpeta. Esto ayuda a organizar los archivos y facilitar&aacute; el proceso de carga.<\/p><p>Si deseas incluir im&aacute;genes en tu sitio, puedes hacerlo en <strong>Advanced Settings -&gt; Local Info<\/strong>. La carpeta de im&aacute;genes tambi&eacute;n debe crearse dentro de la carpeta de tu sitio.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"659\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/carpeta-de-imagenes.jpg\/public\" alt=\"Crear carpeta de im&aacute;genes en Dreamweaver\" class=\"wp-image-9127\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/carpeta-de-imagenes.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/carpeta-de-imagenes.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/carpeta-de-imagenes.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/carpeta-de-imagenes.jpg\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/carpeta-de-imagenes.jpg\/w=74,fit=scale-down 74w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><p>Haz clic en <strong>Save<\/strong> cuando termines.<\/p><h3 class=\"wp-block-heading\" id=\"h-2-crea-el-archivo-de-la-pagina-de-inicio\">2. Crea el archivo de la p&aacute;gina de inicio<\/h3><p>Habiendo llegado a este punto, obtendr&aacute;s un espacio de trabajo en blanco. Pero, echa un vistazo al panel superior derecho, los archivos de tu sitio deber&iacute;an estar all&iacute;. Ahora, crearemos el archivo de la p&aacute;gina de inicio desde cero.<\/p><p>Haz clic en <strong>File -&gt; New<\/strong> y elige <strong>New Document<\/strong>. Selecciona HTML como tipo de documento y haz clic en <strong>Create<\/strong>. Dar un t&iacute;tulo al documento es opcional.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"596\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/tipo-de-documento.jpg\/public\" alt=\"Cree un nuevo documento para su sitio\" class=\"wp-image-9128\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/tipo-de-documento.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/tipo-de-documento.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/tipo-de-documento.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/tipo-de-documento.jpg\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/tipo-de-documento.jpg\/w=130,fit=scale-down 130w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/tipo-de-documento.jpg\/w=187,fit=scale-down 187w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><p>Ser&aacute;s dirigido nuevamente al espacio de trabajo y tendr&aacute;s una p&aacute;gina en blanco con varias l&iacute;neas de c&oacute;digo HTML. Esta es en realidad la vista en vivo de tu sitio web. Guarda ese archivo HTML como <strong>index.html<\/strong> y col&oacute;calo en la carpeta del sitio.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"555\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/guardar-archivo-index.jpg\/public\" alt=\"Guarde el archivo index.html en la carpeta de su sitio\" class=\"wp-image-9129\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/guardar-archivo-index.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/guardar-archivo-index.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/guardar-archivo-index.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/guardar-archivo-index.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-3-crea-un-encabezado\">3. Crea un encabezado<\/h3><p>Vamos a crear el encabezado para el sitio web. Aqu&iacute; suele ir el logotipo y el nombre de tu sitio.<\/p><p>Haz clic en la p&aacute;gina blanca o elige un lugar espec&iacute;fico dentro del elemento <strong>&lt;body&gt;<\/strong> en el editor. Ve al panel superior derecho y haz clic en <strong>Insert<\/strong>. Esto te dar&aacute; una lista de elementos HTML comunes que puedes agregar a tu p&aacute;gina.<\/p><p>Busca el elemento <strong>Header<\/strong>.<\/p><p>Haz clic o arr&aacute;stralo y su&eacute;ltalo en tu espacio de trabajo, y se agregar&aacute; a tu sitio web junto con el c&oacute;digo.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"578\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/agregar-un-encabezado.jpg\/public\" alt=\"Agregar elemento de encabezado en el documento\" class=\"wp-image-9130\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/agregar-un-encabezado.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/agregar-un-encabezado.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/agregar-un-encabezado.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/agregar-un-encabezado.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><p>A continuaci&oacute;n, convertiremos esto en un encabezado con la etiqueta <strong>&lt;H1&gt;&hellip;&lt;\/H1&gt;<\/strong>. Esto se hace con fines de <a href=\"\/es\/tutoriales\/seo-en-wordpress\">SEO<\/a> y para informar a los motores de b&uacute;squeda de qu&eacute; trata tu sitio. Marca el texto en esa secci&oacute;n y ve al panel <strong>Insert<\/strong>. Busca y haz clic en <strong>Heading: H1<\/strong>.<\/p><p>Despu&eacute;s de esto, cambia el texto que aparece por el t&iacute;tulo de tu sitio web. Tiene que ser algo descriptivo y representativo. Para este ejemplo usamos &laquo;Welcome to the Development Site&raquo;.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"496\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/agregar-h1-y-cambiar-el-titulo.jpg\/public\" alt=\"Agregar etiqueta h1 y cambiar el t&iacute;tulo del sitio web\" class=\"wp-image-9131\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/agregar-h1-y-cambiar-el-titulo.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/agregar-h1-y-cambiar-el-titulo.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/agregar-h1-y-cambiar-el-titulo.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/agregar-h1-y-cambiar-el-titulo.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-4-agrega-un-boton-de-navegacion\">4. Agrega un bot&oacute;n de navegaci&oacute;n<\/h3><p>Para agregar un bot&oacute;n de navegaci&oacute;n, agrega una l&iacute;nea despu&eacute;s del encabezado presionando Enter. Ahora vayae al panel<strong> Insert<\/strong> y busca el elemento de <strong>Navigation<\/strong>. Al hacer clic en &eacute;l, aparecer&aacute; una nueva ventana. Escribe <strong>Navigation<\/strong> en el apartado ID y haz clic en Aceptar.<\/p><figure class=\"wp-block-image\"><img decoding=\"async\" width=\"500\" height=\"276\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/insertar-nagevacion-e1568385030978.jpg\/public\" alt=\"Inserte la navegaci&oacute;n como ID\" class=\"wp-image-9132\"><\/figure><p class=\"has-text-align-center\"><\/p><p>Esto agregar&aacute; un elemento de navegaci&oacute;n al editor. Estando en el contenido del elemento, busca <strong>Hyperlink<\/strong> en el panel <strong>Insert<\/strong>. Haz clic y completa los detalles de la siguiente manera:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"500\" height=\"341\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/detalles-hipervinculo-e1568385151587.jpg\/public\" alt=\"Insertar detalles de hiperv&iacute;nculo\" class=\"wp-image-9133\"><\/figure><\/div><p>\n\n\n<div><p class=\"important\"><strong>&iexcl;Importante!<\/strong> El enlace en s&iacute; corresponder&aacute; a la p&aacute;gina en la que navegar&aacute;s en tu sitio web. En este caso, solo usamos un hashtag para llenar el vac&iacute;o.<\/p><\/div>\n\n\n\n<\/p><p>Cuando termines, haz clic en <strong>OK<\/strong>. Ahora tienes un bot&oacute;n de inicio en el que puedes hacer clic y tienes m&aacute;s l&iacute;neas de c&oacute;digo agregadas en el editor.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"578\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/navegacion-inicio.jpg\/public\" alt=\"Agregar bot&oacute;n de navegaci&oacute;n al sitio web\" class=\"wp-image-9135\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/navegacion-inicio.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/navegacion-inicio.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/navegacion-inicio.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/navegacion-inicio.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-5-agrega-la-descripcion-de-tu-sitio-web\">5. Agrega la descripci&oacute;n de tu sitio web<\/h3><p>Ahora insertaremos un encabezado secundario, un p&aacute;rrafo y algunas vi&ntilde;etas como descripci&oacute;n.<\/p><p>Agrega una l&iacute;nea despu&eacute;s del c&oacute;digo de navegaci&oacute;n y haz clic en <strong>Header: H2<\/strong> y <strong>Paragraph<\/strong> en el panel <strong>Insert<\/strong>. Esto agregar&aacute; las etiquetas <strong>&lt;h2&gt; <\/strong>y <strong>&lt;p&gt;<\/strong> en el editor. Escribe el contenido que deseas que aparezca.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/a%C3%B1adir-un-parrafo.jpg\/public\" alt=\"Agregar el texto de descripci&oacute;n del sitio web\" class=\"wp-image-9136\"><\/figure><\/div><p>Ahora, para agregar vi&ntilde;etas, a&ntilde;ade otra l&iacute;nea debajo del c&oacute;digo de p&aacute;rrafo. Ve al panel <strong>Insert<\/strong> y haz clic en la <strong>Unordered List<\/strong>. Con esto se deber&iacute;a agregar la etiqueta <strong>&lt;ul&gt;<\/strong> en el editor. Mientras tanto, haz clic en <strong>List Item<\/strong> en el panel <strong>Insert<\/strong> y se agregar&aacute; la etiqueta <strong>&lt;li&gt;<\/strong> dentro de la etiqueta <strong>&lt;ul&gt;<\/strong>.<\/p><p>Lo que pasa con las listas en HTML, es que debes agregar manualmente las etiquetas t&uacute; mismo de acuerdo al n&uacute;mero de vi&ntilde;etas que quieras incluir. En el caso de nuestro ejemplo se ver&aacute; as&iacute;.<\/p><figure class=\"wp-block-image\"><img decoding=\"async\" width=\"900\" height=\"578\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/agregar-lista-de-items.jpg\/public\" alt=\"Agregar varias listas con vi&ntilde;etas\" class=\"wp-image-9137\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/agregar-lista-de-items.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/agregar-lista-de-items.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/agregar-lista-de-items.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/agregar-lista-de-items.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><p class=\"has-text-align-center\"><\/p><p>Con esto has creado la estructura b&aacute;sica de la p&aacute;gina de inicio. Tambi&eacute;n puedes agregar m&aacute;s contenido, como formularios, videos, im&aacute;genes, etc., pero hasta ac&aacute; est&aacute; bien para empezar.<\/p><p>Si bien la p&aacute;gina se ve un poco simple hasta este punto, vamos a agregar la hoja de estilo para que se vea un poco m&aacute;s atractiva.<\/p><h3 class=\"wp-block-heading\" id=\"h-6-crea-un-archivo-css\">6. Crea un archivo CSS<\/h3><p>La <a href=\"\/es\/tutoriales\/que-es-css\/\">hoja de estilo en cascada (CSS)<\/a> se utiliza para estilizar elementos en HTML y va mano a mano con el desarrollo de un sitio web. Piensa en el HTML como la estructura del cuerpo, y CSS como la parte est&eacute;tica que hace que el cuerpo sea visualmente atractivo.<\/p><p>Ahora, lo primero que debes hacer es darle a tu encabezado una identificaci&oacute;n (ID). Ve a la esquina inferior derecha del panel de Dreamweaver y haz clic en el panel <strong>DOM<\/strong>. Ver&aacute;s una descripci&oacute;n general de la estructura de tu sitio web.<\/p><p>Haz clic en <strong>Header<\/strong> y notar&aacute;s que se marcar&aacute; en azul tu encabezado, junto con la etiqueta &ldquo;header&rdquo; y el signo m&aacute;s.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"496\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/marca-el-encabezado-para-css.jpg\/public\" alt=\"Marcar el encabezado para agregar elemento css\" class=\"wp-image-9138\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/marca-el-encabezado-para-css.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/marca-el-encabezado-para-css.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/marca-el-encabezado-para-css.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/marca-el-encabezado-para-css.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><p>Haz clic en el signo m&aacute;s y escribe <strong>#header<\/strong>. El hashtag significa que estamos asignando una identificaci&oacute;n a ese elemento. Presiona return o enter. En el pr&oacute;ximo men&uacute;, seleccione una fuente: <strong>Create a New CSS file<\/strong>.<\/p><p>Aparecer&aacute; una nueva ventana. Elige <strong>Browse<\/strong> y busca la carpeta de tu sitio web. Escribe <strong>style.css<\/strong> y haz clic en <strong>save<\/strong> Luego, haz clic en <strong>OK<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"494\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/crear-un-nuevo-archivo-css.jpg\/public\" alt=\"Nuevo archivo CSS creado en el espacio de trabajo\" class=\"wp-image-9139\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/crear-un-nuevo-archivo-css.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/crear-un-nuevo-archivo-css.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/crear-un-nuevo-archivo-css.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/crear-un-nuevo-archivo-css.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><p>Notar&aacute;s que aparece un nuevo <strong>style.css<\/strong> en la parte superior de la vista en vivo y un nuevo elemento de enlace en el editor de c&oacute;digo.<\/p><p>Haz lo mismo para todos los elementos que necesitan mejoras est&eacute;ticas. Pero, en lugar de crear un nuevo archivo CSS, gu&aacute;rdalo en el mismo archivo <strong>style.css<\/strong> que creaste antes.<\/p><p>Ahora, est&aacute;s listo para darle estilo a tu sitio usando el selector CSS.<\/p><h3 class=\"wp-block-heading\" id=\"h-7-crea-un-selector-css-para-el-titulo-de-tu-sitio-web\">7. Crea un selector CSS para el t&iacute;tulo de tu sitio web<\/h3><p>Cambiaremos la fuente y centraremos el t&iacute;tulo de nuestro sitio web.<\/p><p>Marca el <strong>H1<\/strong> debajo de tu encabezado desde el panel <strong>DOM<\/strong>. Luego, haz clic en <strong>CSS Designer<\/strong> en el panel de arriba.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/dise%C3%B1ador-css.jpg\/public\" alt=\"Marcado y elecci&oacute;n del dise&ntilde;ador CSS desde el panel\" class=\"wp-image-9140\"><\/figure><\/div><p>Haz clic en el <strong>signo m&aacute;s<\/strong> justo detr&aacute;s de cada <strong>etiqueta<\/strong>. Esto te propondr&aacute; autom&aacute;ticamente un nombre como <strong>#header h1<\/strong>, luego presiona return.<\/p><p>\n\n\n\n<div><p class=\"important\"><strong>&iexcl;Importante! <\/strong>Esto significa que solo est&aacute;s apuntando al elemento llamado <strong>h1<\/strong> dentro del elemento <strong>#header<\/strong>. De esta manera, el estilo solo se aplicar&aacute; al texto escrito (el t&iacute;tulo de tu sitio web) y no al elemento del encabezado en s&iacute;.<\/p><\/div>\n\n\n\n<\/p><h3 class=\"wp-block-heading\" id=\"h-8-cambia-la-fuente-del-titulo\">8. Cambia la fuente del t&iacute;tulo<\/h3><p>Aseg&uacute;rate de que los selectores apunten a <strong>#header h1<\/strong>.<\/p><p>Haz clic en <strong>Properties<\/strong> y desactiva <strong>Show Set<\/strong> para desbloquear las opciones de Dise&ntilde;o (<strong>Layout<\/strong>), Texto (<strong>Text<\/strong>), Borde (<strong>Border<\/strong>), Fondo (<strong>Background<\/strong>) y m&aacute;s.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"350\" height=\"527\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/propiedades-css-1-e1568385201675.jpg\/public\" alt=\"Desmarcando el conjunto de programas para desbloquear propiedades CSS\" class=\"wp-image-9142\"><\/figure><\/div><p>Haz clic en la opci&oacute;n <strong>Text<\/strong>,&nbsp;pasa el mouse sobre <strong>font-family<\/strong> y haz clic en <strong>default font<\/strong>. Esto te dar&aacute; muchas opciones para elegir.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"494\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/opciones-de-fuentes.jpg\/public\" alt=\"Varias fuentes disponibles para usar en Dreamweaver\" class=\"wp-image-9144\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/opciones-de-fuentes.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/opciones-de-fuentes.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/opciones-de-fuentes.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/opciones-de-fuentes.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><p>Adem&aacute;s, el men&uacute; <strong>Manage Fonts<\/strong> te dar&aacute; otra gama de opciones de la base de datos de <a href=\"https:\/\/edgewebfonts.adobe.com\/fonts\" target=\"_blank\" rel=\"noopener\">fuentes web de Adobe Edge<\/a>.<\/p><p>Elige tu fuente preferida haciendo clic en ella. En el ejemplo estamos usando una llamada <strong>Karla<\/strong>. Cuando termines, se cambiar&aacute; la fuente del t&iacute;tulo de tu sitio web y se agregar&aacute; el c&oacute;digo necesario al C&oacute;digo fuente (<strong>Source Code<\/strong>) y al <strong>style.css<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"516\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/elegir-fuente.jpg\/public\" alt=\"Fuente Karla para nuestro tutorial\" class=\"wp-image-9145\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/elegir-fuente.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/elegir-fuente.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/elegir-fuente.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/elegir-fuente.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-9-alinea-el-titulo-al-centro\">9. Alinea el t&iacute;tulo al centro<\/h3><p>En la opci&oacute;n <strong>Text<\/strong>, desplaza el cursor sobre <strong>text-align<\/strong> y haz clic en <strong>center<\/strong>. Notar&aacute;s que se produce el cambio y se agrega c&oacute;digo adicional al <strong>style.css<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"744\" height=\"334\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/codigo-centrar.jpg\/public\" alt=\"Alinear el t&iacute;tulo del sitio web con el centro\" class=\"wp-image-9146\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/codigo-centrar.jpg\/w=744,fit=scale-down 744w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/codigo-centrar.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/codigo-centrar.jpg\/w=300,fit=scale-down 300w\" sizes=\"(max-width: 744px) 100vw, 744px\" \/><\/figure><\/div><p>Realiza todos los cambios necesarios en el contenido de tu sitio web. Para este tutorial, tambi&eacute;n hemos agregado m&aacute;s contenido y estilo a nuestro sitio. Aqu&iacute; est&aacute; el aspecto final:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"534\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/tutorial-website.jpg\/public\" alt=\"Aspecto final de nuestro sitio web tutorial\" class=\"wp-image-9147\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/tutorial-website.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/tutorial-website.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/tutorial-website.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/tutorial-website.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><figure class=\"wp-block-image size-large\"><a href=\"\/es\/hosting-web\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/02\/ES-Web-hosting_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-29291\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-creacion-de-un-sitio-web-con-una-plantilla-de-dreamweaver\">Creaci&oacute;n de un sitio web con una plantilla de Dreamweaver<\/h2><p>En Dreamweaver tambi&eacute;n puedes crear un sitio web con una plantilla predise&ntilde;ada. Siendo as&iacute;, estar&aacute;s un paso adelante y obtendr&aacute;s la ventaja de ver c&oacute;mo se ver&aacute; el sitio final junto con el c&oacute;digo respectivo.<\/p><p>Veamos otro tutorial de Dreamweaver y aprendamos c&oacute;mo usar una plantilla:<\/p><h3 class=\"wp-block-heading\" id=\"h-1-elige-la-plantilla\">1. Elige la plantilla<\/h3><p>Para hacerlo, ve a <strong>File -&gt; New<\/strong>. Elige <strong>Starter Templates -&gt; Basic Layouts<\/strong>. Utilizaremos la p&aacute;gina simple para este tutorial. Haz clic en <strong>Create<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"596\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/plantilla-de-una-pagina.jpg\/public\" alt=\"Sitio de una p&aacute;gina\" class=\"wp-image-9148\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/plantilla-de-una-pagina.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/plantilla-de-una-pagina.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/plantilla-de-una-pagina.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/plantilla-de-una-pagina.jpg\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/plantilla-de-una-pagina.jpg\/w=130,fit=scale-down 130w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/plantilla-de-una-pagina.jpg\/w=187,fit=scale-down 187w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><p>Dreamweaver ha creado pr&aacute;cticamente toda la estructura y el estilo necesarios para tu sitio web. Todo lo que queda es ajustar el contenido y ajustar el estilo a tus necesidades.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"496\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/sitio-de-una-pagina-en-espacio-de-trabajo.jpg\/public\" alt=\"Sitio de una p&aacute;gina en el espacio de trabajo de Dreamweaver\" class=\"wp-image-9149\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/sitio-de-una-pagina-en-espacio-de-trabajo.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/sitio-de-una-pagina-en-espacio-de-trabajo.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/sitio-de-una-pagina-en-espacio-de-trabajo.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/sitio-de-una-pagina-en-espacio-de-trabajo.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><p>En este tutorial, solo haremos cambios b&aacute;sicos, como editar el t&iacute;tulo y la descripci&oacute;n del sitio web, y tambi&eacute;n cambiaremos algunas partes del color de fondo.<\/p><h3 class=\"wp-block-heading\" id=\"h-2-cambia-el-logotipo-y-el-texto-del-encabezado\">2. Cambia el logotipo y el texto del encabezado<\/h3><p>Para cambiar el logotipo del texto, haz clic en <strong>h4.logo<\/strong> en el panel <strong>DOM<\/strong>. Se destacar&aacute; la l&iacute;nea de c&oacute;digo en el editor, cambia el nombre al que desees.<\/p><p>Alternativamente, tambi&eacute;n puedes hacer doble clic en el cuadro del logotipo en la vista en vivo y cambiar el texto desde all&iacute;. Haz lo mismo para el encabezado y el eslogan del sitio web. El nuestro cambi&oacute; a algo como esto.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"335\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/cambiar-logo-y-encabezado.jpg\/public\" alt=\"Cambiar el encabezado y el lema de nuestro logotipo\" class=\"wp-image-9150\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/cambiar-logo-y-encabezado.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/cambiar-logo-y-encabezado.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/cambiar-logo-y-encabezado.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/cambiar-logo-y-encabezado.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-3-cambia-el-color-de-fondo-del-encabezado\">3. Cambia el color de fondo del encabezado<\/h3><p>Para cambiar el color de fondo, ve al archivo <strong>.css<\/strong> y busca el elemento de encabezado. En este caso es <strong>.hero<\/strong>. Busca la l&iacute;nea de color de fondo y notar&aacute;s un cierto n&uacute;mero cr&iacute;ptico.<\/p><p>Ese n&uacute;mero es en realidad el c&oacute;digo de color HTML. Cada color tiene su propia representaci&oacute;n num&eacute;rica, y puedes <a href=\"http:\/\/html-color.org\/\" target=\"_blank\" rel=\"noopener\">chequear cada uno aqu&iacute;<\/a>.<\/p><p>Lo bueno de Dreamweaver es que no tienes que ir a otro lado para descubrir el c&oacute;digo de color. Simplemente selecciona el n&uacute;mero, haz doble clic en &eacute;l y elige <strong>Quick Edit<\/strong>. Aparecer&aacute; una ventana de selecci&oacute;n de color, y puedes seleccionarlo desde all&iacute;.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"539\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/selector-de-color-dreamweaver.jpg\/public\" alt=\"Selector de color incorporado Dreamweaver\" class=\"wp-image-9151\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/selector-de-color-dreamweaver.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/selector-de-color-dreamweaver.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/selector-de-color-dreamweaver.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/selector-de-color-dreamweaver.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><p>Cambiamos el nuestro para que se vea as&iacute;.<\/p><figure class=\"wp-block-image\"><img decoding=\"async\" width=\"900\" height=\"540\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/cambiar-el-color-de-fondo.jpg\/public\" alt=\"Cambiar nuestro color de fondo\" class=\"wp-image-9152\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/cambiar-el-color-de-fondo.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/cambiar-el-color-de-fondo.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/cambiar-el-color-de-fondo.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/cambiar-el-color-de-fondo.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><p>Por supuesto, todav&iacute;a queda trabajo por hacer. Hay contenido que debes agregar y estilos para ajustar. Este tutorial solo te gu&iacute;a en c&oacute;mo hacer cambios b&aacute;sicos a la plantilla.<\/p><p>Cuando termines de ajustar el sitio web, puedes subirlo a tu servidor. Aprender&aacute;s c&oacute;mo hacerlo m&aacute;s abajo.<\/p><h2 class=\"wp-block-heading\" id=\"h-obten-una-vista-previa-de-tu-sitio-en-dispositivos-moviles\">Obt&eacute;n una vista previa de tu sitio en dispositivos m&oacute;viles<\/h2><p>En la era m&oacute;vil, tener un <a href=\"\/es\/tutoriales\/sitio-con-diseno-web-responsive\">sitio web responsive<\/a>, o adaptable, es imprescindible. De lo contrario, muchos de tus visitantes abandonar&aacute;n el sitio web. Y una de las caracter&iacute;sticas interesantes para crear un sitio con Dreamweaver es que puedes obtener una vista previa de c&oacute;mo se ve en los dispositivos m&oacute;viles al instante. Te dejamos un tutorial sobre c&oacute;mo hacerlo:<\/p><p>Ve a Vista previa en tiempo real (<strong>Real-time preview<\/strong>) en la parte inferior derecha de tu espacio de trabajo. Abre un navegador en tu tel&eacute;fono y escanea ese c&oacute;digo de barras, o escribe la URL manualmente.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"454\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/ver-en-navegador-del-movil.jpg\/public\" alt=\"Ver el sitio desde el navegador de tu tel&eacute;fono m&oacute;vil\" class=\"wp-image-9153\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/ver-en-navegador-del-movil.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/ver-en-navegador-del-movil.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/ver-en-navegador-del-movil.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/ver-en-navegador-del-movil.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><p>\n\n\n<div><p class=\"important\"><strong>&iexcl;Importante! <\/strong>Para hacer esto, debes usar el mismo ID de Adobe en tu Dreamweaver y en el dispositivo m&oacute;vil. Tambi&eacute;n debes estar usando la misma red WiFi, y tener Javascript y cookies habilitados.<\/p><\/div>\n\n\n\n<\/p><p>Alternativamente, puedes utilizar la funci&oacute;n de vista m&oacute;vil integrada en Dreamweaver. Dir&iacute;gete al men&uacute; <strong>Windows Size<\/strong> y elige la opci&oacute;n de tu dispositivo.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"600\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/metodo-alternativo-para-vista-movil.jpg\/public\" alt=\"M&eacute;todo alternativo a la vista m&oacute;vil\" class=\"wp-image-9154\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/metodo-alternativo-para-vista-movil.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/metodo-alternativo-para-vista-movil.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/metodo-alternativo-para-vista-movil.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/metodo-alternativo-para-vista-movil.jpg\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/metodo-alternativo-para-vista-movil.jpg\/w=470,fit=scale-down 470w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/metodo-alternativo-para-vista-movil.jpg\/w=640,fit=scale-down 640w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/metodo-alternativo-para-vista-movil.jpg\/w=130,fit=scale-down 130w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/metodo-alternativo-para-vista-movil.jpg\/w=187,fit=scale-down 187w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><p>Debes tener en cuenta que las plantillas est&aacute;n hechas principalmente para ser compatibles con dispositivos m&oacute;viles. Pero esto no se cumple por igual si construyes tu sitio web desde cero.<\/p><p>En ese caso, debes agregar las llamadas &ldquo;consultas de medios&rdquo; en tu c&oacute;digo CSS y ajustar el tama&ntilde;o de p&iacute;xel y el porcentaje de pantalla respectivamente.<\/p><h2 class=\"wp-block-heading\" id=\"h-publica-tu-sitio-web\">Publica tu sitio web<\/h2><p>Cuando termines de crear tu sitio web, puedes publicarlo directamente desde Dreamweaver. Para hacerlo, todo lo que necesitas tener es un plan de <a href=\"\/es\/hosting-web\">hosting profesional<\/a> activo y una <a href=\"\/es\/tutoriales\/configurar-filezilla\">cuenta FTP<\/a>. Te dejamos un tutorial m&aacute;s sobre c&oacute;mo hacerlo:<\/p><p>Para establecer una conexi&oacute;n <strong>FTP<\/strong> con Dreamweaver, ve a <strong>Site -&gt; Manage Sites<\/strong>. En la siguiente ventana, elige el sitio web que has desarrollado y haz clic en el &iacute;cono del l&aacute;piz en la parte inferior. Aparecer&aacute; una nueva ventana. Ve a<strong> Servers<\/strong>.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-crea-una-nueva-conexion-ftp\">1. Crea una nueva conexi&oacute;n FTP<\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"540\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/administracion-del-sitio.jpg\/public\" alt=\"Ventana de administraci&oacute;n de sitio en Dreamweaver\" class=\"wp-image-9155\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/administracion-del-sitio.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/administracion-del-sitio.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/administracion-del-sitio.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/administracion-del-sitio.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><p>Haz clic en el &iacute;cono <strong>m&aacute;s<\/strong> en la ventana <strong>Servers<\/strong>, y se mostrar&aacute; el formulario de conexi&oacute;n FTP. Debes completarlo.<\/p><p>Si eres cliente de <a href=\"\/es\/\">Hostinger,<\/a> puedes encontrar los detalles de FTP en tu panel de control. Ve al panel de control -&gt; <strong>Administrar<\/strong> -&gt; escribe <strong>cuentas FTP<\/strong> en la barra de b&uacute;squeda.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1348\" height=\"545\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/cuenta-ftp.png\/public\" alt=\"Detalles de la cuenta de ftp de Hostinger en el panel de control\" class=\"wp-image-9156\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/cuenta-ftp.png\/w=1348,fit=scale-down 1348w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/cuenta-ftp.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/cuenta-ftp.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/cuenta-ftp.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/cuenta-ftp.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/cuenta-ftp.png\/w=990,fit=scale-down 990w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/cuenta-ftp.png\/w=1320,fit=scale-down 1320w\" sizes=\"(max-width: 1348px) 100vw, 1348px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-2-completa-los-detalles-de-la-conexion\">2. Completa los detalles de la conexi&oacute;n<\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"621\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/conexion-ftp-exitosa.jpg\/public\" alt=\"Una notificaci&oacute;n cuando la conexi&oacute;n ftp es exitosa\" class=\"wp-image-9157\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/conexion-ftp-exitosa.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/conexion-ftp-exitosa.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/conexion-ftp-exitosa.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/conexion-ftp-exitosa.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><p>Cuando termines de completar el formulario, haz clic en <strong>Test<\/strong>. Dreamweaver te dir&aacute; si la conexi&oacute;n es exitosa. No olvides hacer clic en <strong>Save<\/strong>.<\/p><p>De vuelta al panel <strong>Files<\/strong>, ahora puedes iniciar una conexi&oacute;n real con el servidor, junto con opciones como Obtener (<strong>Get<\/strong>), a&ntilde;adir archivos (<strong>Put Files<\/strong>) y Sincronizar (<strong>Synchronize<\/strong>). A partir de aqu&iacute;, puedes cargar el sitio web en el servidor.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"350\" height=\"529\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2019\/09\/conexion-con-exito-e1568385263354.jpg\/public\" alt=\"La conexi&oacute;n es exitosa\" class=\"wp-image-9158\"><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusi&oacute;n<\/h2><p>S&iacute;, sabemos que ha sido largo, pero ahora ya conoces los conceptos b&aacute;sicos para crear un sitio web con Dreamweaver.<\/p><p>En este tutorial de Dreamweaver, aprendiste a crear un sitio desde cero, as&iacute; como a usar plantillas predeterminadas; obtener una vista previa para dispositivos m&oacute;viles y publicar un sitio web en un servidor. Esperamos te haya sido de ayuda.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Al comenzar con el desarrollo de tu sitio web, probablemente hayas escuchado sobre los editores WYSIWYG (What You See Is What You Get &ndash; Lo que ves es lo que obtienes). As&iacute; que la tentaci&oacute;n de crear un sitio web sin conocimientos de codificaci&oacute;n podr&iacute;a parecerte atractiva y te ha llevado a buscar un tutorial [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/es\/tutoriales\/tutorial-dreamweaver\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":138,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"Tutorial Completo Sobre Dreamweaver","rank_math_description":"Usar Dreamweaver puede ser dif\u00edcil. Pero con este tutorial completo de Dreamweaver podr\u00e1s aprendar a usarlo y a crear tu primer sitio web.","rank_math_focus_keyword":"Dreamweaver","footnotes":""},"categories":[5701],"tags":[],"class_list":["post-9115","post","type-post","status-publish","format-standard","hentry","category-desarrollo-web"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/dreamweaver-tutorial","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/tutoriel-dreamweaver","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/tutorial-dreamweaver","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/adobe-dreamweaver-adalah","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/dreamweaver-tutorial","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/dreamweaver-tutorial","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/dreamweaver-tutorial","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/tutorial-dreamweaver","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/tutorial-dreamweaver","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/tutorial-dreamweaver","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/dreamweaver-tutorial","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/dreamweaver-tutorial","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/dreamweaver-tutorial","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/dreamweaver-tutorial","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/posts\/9115","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/users\/138"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/comments?post=9115"}],"version-history":[{"count":23,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/posts\/9115\/revisions"}],"predecessor-version":[{"id":51707,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/posts\/9115\/revisions\/51707"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/media?parent=9115"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/categories?post=9115"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/tags?post=9115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}