If you’ve never heard of Adobe Dreamweaver before, it’s a fully featured web editor that allows you to build web pages in HTML, CSS, PHP and a host of other web languages to boot.
Fancy, but how the heck do you use it?
Well in this aptly named Dreamweaver tutorial I’ll show how to build a website from scratch using the CS6 version of Dreamweaver. Adobe have actually launched a new version of Dreamweaver (and their entire package of software) which is based online.
Starting from $19.99 a month up to about $50 a month, you can grab Dreamweaver, Photoshop and more.
If you don’t have Dreamweaver and don’t want it, I’ll be doing tutorials for free software as well soon. Never fear.
New to websites? If you’re new to building websites you might want to check out my How to Create a Website guide instead. In it, I recommend a bit o’ software called WordPress that is easier to use than Dreamweaver for creating and updating content.
It’s also a lot cheaper than buying Dreamweaver. Just saying.
Okay. All set and ready to make a website in Dreamweaver? Onwards, my friend.
Dreamweaver tutorial 1: Setting up your website
This is where you’ll get your hands dirty with a step-by-step guide to make your site. It’s best to follow these steps in order – especially if you’ve never used Dreamweaver before.
By the end of the tutorial you’ll have your first website online. It’ll be pretty basic, but by golly it’s gonna be online. Here we go.
- Open Dreamweaver.
- Go to the Site menu and choose the New Site… option. From here just name your site whatever you’d like and choose where you want to save the site on your computer. So far, so good.
Next click Servers in the left hand menu and click the little black cross to add your web hosting details.
Still not got hosting? Part of this tutorial is showing you how to actually upload your site to the web so it can be viewed. If you haven’t got web hosting or a domain yet, use Web Hosting Hub for $3.99 a month and get your domain name free. Then come back to continue.
- When you joined your web hosting company they will have given you the FTP access details you need to upload files to your hosting. Just fill out the address, username and password for your FTP account to allow Dreamweaver to connect.
- Click the File menu and then click New….
- On the right hand side there is a dropdown box labeled as Layout CSS. Change this from Add to Head to Create New File. This separates your style from your web page which is easier to manage and less confusing.
- Choose a name for your CSS file. I simply named mine
- At the very top of the Dreamweaver window is a text box called Title. It probably says Untitled Document right now, huh? You can change this to whatever you want your web page to be about.
- By default, the site comes with a bunch of auto-generated content as a placeholder. Replace this with the content for your page and make it awesome. I’ve added a bit of Clint Eastwood and Michael Caine to mine – because I’m cool like that.
- You can also add your copyright notice to the footer if you want. I wrote a tutorial, How to Add a Copyright Symbol to Your Site for just such a situation.
- The next step is to save your newly built site by going to File and Save. Make sure you save the file as
index.htmlThis is the standard default file name so if you put this on your home page
example.comIt will display the index.html file even if you don’t specifically put
example.com/index.html. Make sense?
- Because we already set up the FTP connection in Dreamweaver, all you have to do to upload your site is go to the Site menu and choose Put.
- The last thing to do is add a logo to your site. If you don’t already have one, check out my guide on How to Make a Logo for Your Website. The easiest way to change this in Dreamweaver is click the Design tab to go into the visual editor and then double click the logo area. It will then ask you to choose your image.
- Once your logo is in place, Go to File > Save and then Site > Put to update it on your hosting.
A simple layout example in Dreamweaver CS6
Now you’ve got your site setup and your FTP account is connected inside Dreamweaver it’s time to go ahead and build your first site using the software. This is the fun part, folks.
You now have the choice to use either a blank page, a blank template or a fluid grid layout. Basically, the fluid grid is one which would be compatible with mobile and tablets. It’s called responsive design and you ever view Ian Nuttall in a mobile, you’ll appreciate how awesome it is.
For this particular tutorial, fluid might be a bit too much so we’ll stick with a blank template instead. I’m gonna choose the 3-column liquid with a footer and header. Just because I like 3 columns and the liquid layout will expand and contract to fit the window.
You can choose whichever you prefer though. No pressure.
Uploading your Dreamweaver site to the internet
The hard work is done, so now let’s publish your site online. Remember earlier when you entered your FTP details into Dreamweaver? Well we’re now going to use those settings to put your site onto your hosting with the click of a mouse. Easy peasy, this.
That’s it for this Dreamweaver tutorial. You can view the demo site I’ve created here: Dreamweaver Tutorial 1.
More Dreamweaver tutorials
This is the first in a series on creating websites with Dreamweaver. Stay tuned for more tutorials on adding images, changing fonts, colours and much more.