How to Build a Website from Scratch with Dreamweaver

0

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


But how do you create your first website with Dreamweaver?


Getting started with Dreamweaver

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

Visit the Adobe website, sign in or create an account, and download the Adobe Creative Cloud tool to get started. From there, you can download Adobe Dreamweaver and get started with the complete guide.

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

Step 1: Create a Dreamweaver site

Open Adobe Dreamweaver and navigate to To place menu at the top of the page. Select New websitethen choose a name for your website and choose a file location for it.

Step 2: Create a template file

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

Click on Create a new or go to Case > New and choose HTML template from Document type listing.

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

​​​​​​

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

A dialog box will open at this point. Add a name for your new header class and click OKAY to add the code to your HTML. It should automatically place the new code in the tags, but you can move it around if needed.

Next, you also need to add a div element for the site logo and a nav element for the site menu. Go to the Insert menu and select Divisionthen go back to the Insert menu and select Navigation. These two elements need their own class name.

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

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

Step 4: Add a style sheet for CSS

As you can see, this website doesn’t look very good as it is. A little CSS will fix this problem, and you can easily add a stylesheet in Dreamweaver. Go to the CSS designer on the right side of the screen and click the More icon next to Sources. Just pick a name for your stylesheet and 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 a way to lay out a webpage using CSS. Along with this, the site font is set, a black background is set, and several other changes are in place to improve the look of the site. You can see the complete CSS code at the end of the article.

Step 5: Add editable regions to the template

Editable regions create editable sections of HTML when you use the template to create other pages. The content on our main page fits perfectly in a region like this. Go to Insert > Model > Editable region to add an editable region to your page.

Step 6: Add image/text content to the template

The editable region you just added is usable without additional HTML, but you can still add more to edit when creating individual pages. To get started, go to Insert and select Division to add a new div element to your website.

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

Then go to Insert > Headings > H1 to add a title inside the div element you just added. Both of these elements need CSS to work properly. The div has background image, background size, and height values. Go to Case > save all to make sure your model is updated.

​​​​​​

You can add images from anywhere on your local network or the Internet, but it’s best to save the images to 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 adding some pages. Go to Case > New and select HTML below Document type. Add one Title for each page you add before clicking Create.

The new page is blank and does not yet have our template. Once your new page opens in Dreamweaver, navigate to Tools > Models and click on Apply template to page. Choose your model from the list and click Select to load your model. Finally, go to Case > Save as and choose a name for your new page before saving it.

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

Once your pages are added, you can modify the navigation links in your template so that they point to the correct pages. Go back to your template and find the A tags you added earlier. Remove the placeholder link and click the quotation marks to open the Browse menu. From there, you can select the correct page for each of your links.

Step 9: Fix CSS/HTML on new pages

Each of the pages will look the same for now. There are a few steps to follow to ensure they have their own content; follow the steps below to complete your new website.

  • Change the content div element ID on each page to reflect the page title
  • Add CSS code for new element ID with 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 Case > Real-time preview and select the browser of your choice to view your website. This is great for testing CSS or any other code that isn’t compatible with all browsers.

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

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 code 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;
}
background-image: url("Images/largelion.png");
}
background-image: url("Images/tiger.png");
}
background-image: url("Images/jaguar.png");
}
background-image: url("Images/housecat.png");
}
background-image: url("Images/loadsofcats.png");
}

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

Create websites with Adobe Dreamweaver

Dreamweaver might not seem as easy to use as tools like WordPress or Squarespace, but it gives you a lot more power. This guide is a great starting point, but there’s still a lot to learn and it’s worth exploring Dreamweaver on your own.

Share.

Comments are closed.