How to Build a Website From Scratch With Dreamweaver
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 could start working with it, but a free trial is available.
Head to theAdobewebsite, log in or register an account, and download the Adobe Creative Cloud tool to get started. From here, you’re able to 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 onthis GitHub repository.
Step 1: Create a Dreamweaver Site
Open Adobe Dreamweaver and go to theSitemenu at the top of the page. SelectNew Site, then pick 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 similarly to the themes used by CMS systems like WordPress and Shopify, only you make them yourself.
Click onCreate Newor go toFile>Newand chooseHTML Templatefrom theDocument Typelist.
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.
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 toInsertat the top of the screen and selectHeaderfrom the list.
A dialog will open at this point. Add a name for your new header’s class and clickOKto add the code to your HTML. It should automatically place the new code within thetags, but you can move it if you need to.
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 theInsertmenu and selectDiv, then go back to theInsertmenu and selectNav. Both of these elements need their own class name.
As the last stage in this process, we added some menu options to our navigation element. To do this, go toInsertand selectHyperlink. We added five hyperlinks to our site header: Home, Lion, Tiger, Jaguar, and House Cat.
The pages that will have links in the header don’t exist yet, so leave thehrefproperty blank until you create them.
Step 4: Add a Stylesheet for CSS
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 theCSS Designeron the right side of the screen and click thePlusicon 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 toInsert>Template>Editable Regionto 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 any additional HTML, but you may still add some to edit when you make individual pages. To start, go toInsertand selectDivto 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. Theseunique CSS background patternsare great if you want to take your Dreamweaver website to the next level.
Next, go toInsert>Headings>H1to 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 toFile>Save Allto make sure that your template updates.
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 may start to add some pages. Go toFile>Newand selectHTMLunderDocument Type. Add aTitlefor each page that you add before hittingCreate.
The new page is white and doesn’t have our template, yet. Once your new page is open in Dreamweaver, go toTools>Templatesand click onApply Template to Page. Choose your template from the list and clickSelectto load your template. Finally, go toFile>Save Asand 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 a single template for this; you can add new ones for different page layouts.
Step 8: Add Page Links to the Template
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 thequotation marksto open theBrowsemenu. From here, 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 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.
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 toFile>Real-Time Previewand 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.
Now you just need somewhere to host your website.Hosting a static site with AWS S3is a great place to start.
The HTML and CSS Code
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.
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.
Automate processes easily with these incredible web development tools.
You can’t call this offline, Notion.
This small feature makes a massive difference.
Your iPhone forgets what you copy, but this shortcut makes it remember everything.
You can block out the constant surveillance and restore your privacy with a few quick changes.
Not all true crime is about hacking, slashing, and gore.
