As you know, this site is all about how to make a website. You can learn different ways using either WordPress, Joomla or Drupal. We even have a guide on using pure HTML like in the old days (obviously with HTML5, the latest version). In this Dreamweaver tutorial for beginners, you will learn another one.

For those who don’t know, Dreamweaver is an application that lets you design, code and manage websites. What is interesting about Dreamweaver is that it offers both the possibility to write code as well as make a website using a visual interface.

In this Dreamweaver tutorial, you will learn everything you need to know to start creating websites with Dreamweaver. You will get to know the program and what it can do, feature highlights and how to set it up. After that, you will find a step-by-step guide on how to create a simple website with Dreamweaver, make it mobile friendly and then upload it to your server.

This will be a long ride. However, you will be amazed at how quickly you will get into this very intuitive program.

What is Dreamweaver and What Can It Do?

On the surface, Dreamweaver is an IDE (Integrated Development Environment). That means it’s a piece of software that combines different tools to make web design and development easier.

What makes it special is that it is somewhere between a CMS (where you control everything about your website through a visual interface) and a pure code editor. Here’s how the different parts work.

Create Websites through a Visual Design Interface

The visual design toolbox basically lets you build websites with your mouse. It allows you to place website elements the way you create a layout in Word. Basically, you see your website as you would see in a browser but also have the ability to manipulate it.

This is very useful because it allows you to build the skeleton of a website quickly and without the need to write a single line of code. Instead, Dreamweaver will automatically create the necessary code for you. That way, theoretically, you can put together an entire website by hand and upload it to your server.

On the other hand, if you are capable of coding, Dreamweaver has all the necessary tools for that too.

Works as a Full-fledged Code Editor

The second part of Dreamweaver is a fully-featured code editor. It comes equipped with all the standard functions, including:

  • Syntax highlighting — That means Dreamweaver highlights different elements (such as operators, variables, etc.) in different colors in order to make the code easier to read and correct.
  • Code Completion — Code completion works in a similar way as autocomplete on your phone. Start typing and the editor will make suggestions for what you are trying to write. That way, you don’t have to type everything out completely.
  • Code collapsing — Code collapsing is another feature for making code easier to read. It allows you to visually shrink parts of your code when you don’t need them. That way, you don’t have to scroll through the entire file but can only deal with the parts you need to work on.

Dreamweaver supports the most important languages for web design (HTML5, CSS, JavaScriptPHP) and a lot more.

The best part: if you change anything in your code, Dreamweaver will automatically display it on the visual side as well. That way, you can see it without having to upload your files to a server or fire up the browser.

There are a lot more features and you will see many of them in action in the upcoming Dreamweaver tutorial for beginners.