En un mundo de creadores de sitios web de arrastrar y soltar, Adobe Dreamweaver ha hecho bien en mantenerse relevante en medio de la competencia. Repleto de excelentes funciones y un montón de herramientas para facilitarle la vida, este software es una excelente opción para diseñadores y desarrolladores web.

Pero, ¿cómo creas tu primer sitio web con Dreamweaver?

Primeros pasos con Dreamweaver

Debe obtener una copia de Adobe Dreamweaver antes de poder comenzar a trabajar con él, pero hay una versión de prueba gratuita disponible.

Dirígete a la Adobe sitio web, inicie sesión o registre una cuenta y descargue la herramienta Adobe Creative Cloud para comenzar. Desde aquí, puede descargar Adobe Dreamweaver y comenzar con la guía completa.

Esta guía le mostrará cómo crear un sitio web básico utilizando archivos de plantilla de Dreamweaver como base. Puede encontrar los archivos completos del proyecto en este repositorio de GitHub.

Paso 1: Cree un sitio de Dreamweaver

Abra Adobe Dreamweaver y vaya a la

instagram viewer
Sitio menú en la parte superior de la página. Seleccione Nuevo sitio, luego elija un nombre para su sitio web y elija una ubicación de archivo para él.

Paso 2: crea un archivo de plantilla

A continuación, es hora de crear un archivo de plantilla para su nuevo sitio web. Los archivos de plantilla funcionan de manera similar a los temas utilizados por los sistemas CMS como WordPress y Shopify, solo que usted mismo los crea.

Haga clic en Crear nuevo o ir a Expediente > Nuevo y elige Plantilla HTML desde el Tipo de Documento lista.

Esto creará una plantilla básica con algo de HTML ya implementado. Utilizará este HTML para su proyecto, por lo que vale la pena mantenerlo en su lugar para los siguientes pasos.

​​​​​​

Paso 3: crea un encabezado en la plantilla

Ahora es el momento de crear la sección de menú/encabezado en el sitio web en la plantilla que acaba de crear. Ir Insertar en la parte superior de la pantalla y seleccione Encabezamiento de la lista.

Se abrirá un cuadro de diálogo en este punto. Agregue un nombre para la clase de su nuevo encabezado y haga clic en OK para agregar el código a su HTML. Debería colocar automáticamente el nuevo código dentro del etiquetas, pero puede moverlo si lo necesita.

Después de esto, también debe agregar un elemento div para el logotipo del sitio y un elemento de navegación para el menú del sitio. Ve a la Insertar menú y seleccione división, luego vuelve a la Insertar menú y seleccione Navegación. Ambos elementos necesitan su propio nombre de clase.

Como última etapa de este proceso, agregamos algunas opciones de menú a nuestro elemento de navegación. Para hacer esto, vaya a Insertar y seleccione Hipervínculo. Agregamos cinco hipervínculos al encabezado de nuestro sitio: Hogar, León, Tigre, Jaguar y Gato doméstico.

Las páginas que tendrán enlaces en el encabezado aún no existen, así que deje el href propiedad en blanco hasta que los cree.

Paso 4: agregue una hoja de estilo para CSS

Como puede ver, este sitio web no se ve muy bien tal como está. Un poco de CSS resolverá este problema y puede agregar una hoja de estilo con facilidad en Dreamweaver. Ve a la Diseñador CSS en el lado derecho de la pantalla y haga clic en el Más junto a Fuentes. Solo necesita elegir un nombre para su hoja de estilo y puede dejar el resto de las configuraciones como están.

Lo primero que debe hacer es convertir el encabezado en un flexbox. Flexbox es solo una forma de diseñar una página web usando CSS. Además de esto, se establece la fuente del sitio, se establece un fondo negro y se realizan varios otros cambios para que el sitio se vea mejor. Puede ver el código CSS completo al final del artículo.

Paso 5: agregue regiones editables a la plantilla

Las regiones editables crean secciones de HTML que se pueden editar cuando usa la plantilla para crear otras páginas. El contenido de nuestra página principal encaja perfectamente en una región como esta. Ir Insertar > Modelo > Región editable para agregar una región editable a su página.

Paso 6: agregue contenido de imagen/texto a la plantilla

La región editable que acaba de agregar se puede usar sin HTML adicional, pero aún puede agregar algo para editar cuando crea páginas individuales. Para empezar, vaya a Insertar y seleccione división para agregar un nuevo elemento div a su sitio web.

Esto funcionará como contenedor para el contenido de texto en la página, así como un lugar para agregar una imagen de fondo. Este elemento tiene una clase y una ID para que diferentes páginas tengan diferentes propiedades CSS. Estas patrones de fondo CSS únicos son excelentes si desea llevar su sitio web de Dreamweaver al siguiente nivel.

A continuación, vaya a Insertar > encabezados > H1 para agregar un encabezado dentro del elemento div que acaba de agregar. Ambos elementos necesitan algo de CSS para funcionar correctamente. El div tiene valores de imagen de fondo, tamaño de fondo y altura. Ir Expediente > Salvar a todos para asegurarse de que su plantilla se actualice.

​​​​​​

Puede agregar imágenes desde cualquier lugar de su red local o de Internet, pero es mejor guardar las imágenes en los propios archivos del sitio web para facilitar el acceso.

Paso 7: Agregar páginas con la plantilla

Ahora que tiene una plantilla en su lugar, puede comenzar a agregar algunas páginas. Ir Expediente > Nuevo y seleccione HTML por debajo Tipo de Documento. Agrega un Título por cada página que agregues antes de presionar Crear.

La nueva página es blanca y aún no tiene nuestra plantilla. Una vez que su nueva página esté abierta en Dreamweaver, vaya a Instrumentos > Plantillas y haga clic en Aplicar plantilla a la página. Elija su plantilla de la lista y haga clic en Seleccione para cargar su plantilla. Finalmente, ve a Expediente > Guardar como y elija un nombre para su nueva página antes de guardarla.

Repita este proceso hasta que tenga suficientes páginas para satisfacer sus necesidades. No tienes que apegarte a una sola plantilla para esto; puede agregar otros nuevos para diferentes diseños de página.

Paso 8: agregue enlaces de página a la plantilla

Con sus páginas agregadas, puede cambiar los enlaces de navegación en su plantilla para que vinculen a las páginas correctas. Regrese a su plantilla y busque las etiquetas A que agregó anteriormente. Elimine el vínculo del marcador de posición y haga clic en el comillas para abrir el Navegar menú. Desde aquí, puede seleccionar la página correcta para cada uno de sus enlaces.

Paso 9: arregla CSS/HTML en páginas nuevas

Cada una de las páginas se verá igual en este momento. Hay algunos pasos a seguir para asegurarse de que tengan su propio contenido; siga los pasos a continuación para terminar su nuevo sitio web.

  • Cambie el ID del elemento div de contenido en cada página para reflejar el título de la página
  • Agregue código CSS para el nuevo ID de elemento con una imagen de fondo diferente
  • Cambiar el título en cada página

Paso 10: pruebe el sitio web en su navegador

Puede probar su nuevo sitio web en el navegador web de su elección directamente desde Adobe Dreamweaver. Ir Expediente > Vista previa en tiempo real y seleccione el navegador de su elección para ver su sitio web. Esto es excelente para probar CSS u otro código que no sea compatible con todos los navegadores.

Ahora solo necesita un lugar para alojar su sitio web. Alojar un sitio estático con AWS S3 es un gran lugar para comenzar.

El código HTML y CSS

<!doctype html>
<html>
<cabeza>
<juego de caracteres meta="utf-8">
<!-- TemplateBeginEditable nombre="doctitle" -->
<título>Documento sin titulo</title>
<!-- PlantillaEndEditable -->
<enlace href="../pagina-css.css" rel="hoja de estilo" tipo ="texto/css">
</head>
<cuerpo>
<clase de encabezado ="encabezado principal">
<clase div="sitio-logo">Sitio de ejemplo MakeUseOf</div>
<clase de navegación ="menú principal">
<un href="../Inicio.html">Hogar</a><un href="../León.html">León</a><un href="../Tigre.html">Tigre</a><un href="../Jaguar.html">Jaguar</a><un href="../Gato doméstico.html">Casa de gato</a>
</nav>
</header>
<!-- TemplateBeginEditable nombre="MainContentRegionMainContentRegion" -->
<clase div="contenido principal" identificación ="león">
<h1>¡Esto es un león!</h1>
</div>
<!-- PlantillaEndEditable -->
</body>
</html>

Este HTML construye el sitio web terminado para nuestro proyecto. Puede desarmarlo para ver cómo funciona, pero lo alentamos a que cree su propio HTML para su sitio web.

@charset "utf-8";
cuerpo {
margen: 0;
fondo: negro;
familia tipográfica: Gotham, "helvética nueva", Helvética, Arial, "sans-serif";
}
.main-header {
pantalla: flexible;
fondo: negro;
relleno: 20px;
}
.site-logo {
ancho: 30%;
color blanco;
fuente-peso: negrita;
transformación de texto: mayúsculas;
}
.menú principal {
ancho: 70%;
alineación de texto: derecha;
}
.menú principala {
relleno: 10px;
texto-decoración: ninguno;
color blanco;
}
.contenido principal {
altura: 100vh;
relleno: 20px;
tamaño de fondo: portada;
}
.contenido principalh1 {
color blanco;
tamaño de fuente: 10rem;
transformación de texto: mayúsculas;
}
#león {
imagen de fondo: url("Imágenes/gran león.png");
}
#Tigre {
imagen de fondo: url("Imágenes/tigre.png");
}
#jaguar {
imagen de fondo: url("Imágenes/jaguar.png");
}
#casa de gato {
imagen de fondo: url("Imágenes/housecat.png");
}
#todoslosgatos {
imagen de fondo: url("Imágenes/cargasdegatos.png");
}

Este CSS también es parte del proyecto terminado. Al igual que el HTML que hemos cubierto, puede jugar con este código para personalizar este sitio web.

Creación de sitios web con Adobe Dreamweaver

Puede que Dreamweaver no parezca tan fácil de usar como herramientas como WordPress o Squarespace, pero le brinda mucho más poder. Esta guía es un excelente punto de partida, pero hay mucho más que aprender y vale la pena explorar Dreamweaver por sí mismo.