In a world of drag-and-drop website builders, Adobe Dreamweaver has done well to stay relevant amid the competition. Packed with great features and loads of tools to make your life easy, this software is a great choice for web designers and developers.

But how do you build your first website using Dreamweaver?

Getting Started With Dreamweaver

You need to get a copy of Adobe Dreamweaver before you can start working with it, but a free trial is available.

Head to the Adobe website, log in or register an account, and download the Adobe Creative Cloud tool to get started. From here, you can download Adobe Dreamweaver and get started with the full guide.

This guide will show you how to make a basic website using Dreamweaver template files as its base. You can find the full project files on this GitHub repository.

Step 1: Create a Dreamweaver Site

Open Adobe Dreamweaver and go to the Site menu at the top of the page. Select New Site, then pick a name for your website and choose a file location for it.

add new site in dreamweaver

Step 2: Create a Template File

Next, it’s time to create a template file for your new website. Template files work similarly to the themes used by CMS systems like WordPress and Shopify, only you make them yourself.

Click on Create New or go to File > New and choose HTML Template from the Document Type list.

create dreamweaver html template

This will create a basic template with some HTML already in place. You will use this HTML for your project, so it’s worth keeping it in place for the next steps.

empty dreamweaver html template

​​​​​​

Step 3: Build a Header in the Template

Now it’s time to build the menu/header section on the website in the template you just created. Go to Insert at the top of the screen and select Header from the list.

dreamweaver insert header

A dialog will open at this point. Add a name for your new header’s class and click OK to add the code to your HTML. It should automatically place the new code within the <body></body> tags, but you can move it if you need to.

dreamweaver add header element class

Following this, you should also add a div element for the site’s logo and a nav element for the site’s menu. Go to the Insert menu and select Div, then go back to the Insert menu and select Nav. Both of these elements need their own class name.

dreamweaver add logo container

As the last stage in this process, we added some menu options to our navigation element. To do this, go to Insert and select Hyperlink. We added five hyperlinks to our site header: Home, Lion, Tiger, Jaguar, and House Cat.

add dreamweaver nav element

The pages that will have links in the header don’t exist yet, so leave the href property blank until you create them.

add lion hyperlink

Step 4: Add a Stylesheet for CSS

dreamweaver add css source file

As you can see, this website doesn’t look very good as it stands. A little bit of CSS will solve this problem, and you can add a stylesheet with ease in Dreamweaver. Go to the CSS Designer on the right side of the screen and click the Plus icon next to Sources. You just need to choose a name for your stylesheet and can leave the rest of the settings as they are.

The first thing to do is to turn the header into a flexbox. Flexbox is just one way of laying out a webpage using CSS. Alongside this, the site’s font is set, a black background is set, and several other changes are in place to make the site look better. You can see the full CSS code at the end of the article.

Step 5: Add Editable Regions to the Template

Editable regions create sections of HTML that are editable when you use the template to build other pages. Our main page content fits perfectly into a region like this. Go to Insert > Template > Editable Region to add an editable region to your page.

insert dreamweaver content element

Step 6: Add Image/Text Content to the Template

The editable region you just added is usable without any additional HTML, but you can still add some to edit when you make individual pages. To start, go to Insert and select Div to add a new div element to your website.

This will work as both the container for the text content on the page, as well as a place to add a background image. This element has a class and an ID so that different pages have different CSS properties. These unique CSS background patterns are great if you want to take your Dreamweaver website to the next level.

dreamweaver add div element

Next, go to Insert > Headings > H1 to add a heading inside the div element you just added. Both of these elements need some CSS to work properly. The div has background-image, background-size, and height values. Go to File > Save All to make sure that your template updates.

complete dreamweaver content template

​​​​​​

You can add images from anywhere on your local network or the internet, but it’s best to save the images within the website’s own files for easy access.

Step 7: Add Pages With the Template

Now that you have a template in place, you can start to add some pages. Go to File > New and select HTML under Document Type. Add a Title for each page that you add before hitting Create.

create new dreamweaver page

The new page is white and doesn’t have our template, yet. Once your new page is open in Dreamweaver, go to Tools > Templates and click on Apply Template to Page. Choose your template from the list and click Select to load your template. Finally, go to File > Save As and choose a name for your new page before saving it.

apply dreamweaver template to page

​​​​​​Repeat this process until you have enough pages to meet your needs. You don’t have to stick to a single template for this; you can add new ones for different page layouts.

With your pages added, you can change the navigation links in your template so that they link to the right pages. Go back to your template and find the A tags you added earlier. Delete the placeholder link and click on the quotation marks to open the Browse menu. From here, you can select the correct page for each of your links.

dreamweaver browse navigation links

Step 9: Fix CSS/HTML on New Pages

Each of the pages will look the same at the moment. There are a few steps to take to ensure that they have their own content; follow the steps below to finish up your new website.

  • Change the content div element ID on each page to reflect the page title
  • Add CSS code for the new element ID with a different background image
  • Change the title on each page

Step 10: Test the Website in Your Browser

You can test your new website in your web browser of choice directly from Adobe Dreamweaver. Go to File > Real-Time Preview and select the browser of your choice to view your website. This is great for testing CSS or other code that isn’t compatible with every browser.

real time preview in dreamweaver

Now you just need somewhere to host your website. Hosting a static site with AWS S3 is a great place to start.

The HTML and CSS Code

        <!doctype html>

<html>

<head>

<meta charset="utf-8">

<!-- TemplateBeginEditable name="doctitle" -->

<title>Untitled Document</title>

<!-- TemplateEndEditable -->

<link href="../page-css.css" rel="stylesheet" type="text/css">

</head>

<body>

<header class="main-header">

   <div class="site-logo">MakeUseOf Example Site</div>

 <nav class="main-menu">

   <a href="../Home.html">Home</a><a href="../Lion.html">Lion</a><a href="../Tiger.html">Tiger</a><a href="../Jaguar.html">Jaguar</a><a href="../House Cat.html">House Cat</a>

   </nav>

</header>

<!-- TemplateBeginEditable name="MainContentRegion" -->

<div class="main-content" id="lion">

   <h1>This is a lion!</h1>

</div>

<!-- TemplateEndEditable -->

</body>

</html>

This HTML builds the finished website for our project. You can take it apart to see how it works, but we encourage you to create your own HTML for your website.

        @charset "utf-8";

body {

   margin: 0;

   background: black;

   font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";

}

.main-header {

   display: flex;

   background: black;

   padding: 20px;

}

.site-logo {

   width: 30%;

   color: white;

   font-weight: bold;

   text-transform: uppercase;

}

.main-menu {

   width: 70%;

   text-align: right;

}

.main-menu a {

   padding: 10px;

   text-decoration: none;

   color: white;

}

.main-content {

   height: 100vh;

   padding: 20px;

   background-size: cover;

}

.main-content h1 {

   color: white;

   font-size: 10rem;

   text-transform: uppercase;

}

#lion {

   background-image: url("Images/largelion.png");

}

#tiger {

   background-image: url("Images/tiger.png");

}

#jaguar {

   background-image: url("Images/jaguar.png");

}

#housecat {

   background-image: url("Images/housecat.png");

}

#allcats {

   background-image: url("Images/loadsofcats.png");

}

This CSS is also part of the finished project. Like the HTML we have covered, you can play with this code to make this website your own.

Building Websites With Adobe Dreamweaver

Dreamweaver may not seem as easy to use as tools like WordPress or Squarespace, but it gives you far more power. This guide is a great starting point, but there’s a lot more to learn and it’s well worth exploring Dreamweaver for yourself.