For those of you who subscribe to Adobe’s Creative Cloud, you may want to use Dreamweaver as your code editing tool and that’s cool. Dreamweaver can be a great tool to use especially if you are already familiar with other Adobe products and are used to the Adobe interface. However, Dreamweaver right out of the box has a lot of preloaded panels and features that can easily get in the way of writing good code.

If you truly want to learn web design, you’ll need to learn to write code by hand. Even if your plan is to learn just enough to be a useful design counterpart to your web design or developer colleague, you’ll need to learn enough about writing code and code mechanics that you can have a tech specific conversation about web design. This will mean that you should get yourself really familiar with the basics of code writing and avoid WYSIWYG (what you see is what you get) software interfaces, which is a large component part of what Dreamweaver aims to do.

Dreamweaver does its best to serve a varied population. It wants to be a great code editor for those who write code, but it also wants to be a great WYSIWYG tool for hobbyists and amateurs who only want to learn enough to make or edit their own mom and pop small business websites. They may not be concerned with professional web standards and long-term code maintenance. If this is you, go nuts. There is nothing wrong with that. You’ll find tons of tutorials out there on using Dreamweaver templates and design features to get you off the ground and running in very short order.

If you are or are planning to work as a design professional, its best to strip Dreamweaver down to its bare essentials, at least at first. You may find yourself eventually taking advantage of the countless features that are baked into Dreamweaver, but as a beginner, I’d strongly suggest using it as a clean and simple code editor. It will allow you to focus on learning to write good, solid code. After you’ve got that under control, you can work on integrating the extra tools and toys into your workflow.

The following will show you the steps for turning Dreamweaver into a clean and simple code editing tool. If you are following along in my Web Design for Graphic Designers lessons, this will make Dreamweaver as much like the TextMate application I will be using during the course of the class.

Step 1: Launch Dreamweaver. It’s a big program so you might have to wait a bit for it to open. When it does, it’ll look something like (fig. 1).

The first panel you’ll encounter will likely be the welcome screen (fig. 2). This screen will give you lots of options for tutorials and updates. Feel free to check these guys out later if you’re interested.

Step 2: Scroll to the bottom of the welcome screen. You should see a checkbox with the label, “Don’t Show Welcome Screen Again”. I like to check this box before I close out the screen. That way it won’t be there every time I open up Dreamweaver.* (fig.3)

Note: If I do feel like I want to see it again, I can turn it back on in the preferences later (Top Navigation Menu > Dreamweaver CC > Preferences > General > Show Welcome Screen > Apply).

Once you’ve closed the welcome screen, you’ll likely see the default Dreamweaver interface. It’ll have a grey background and lots of panels and tabs. It might be a little overwhelming, but don’t worry, we’ll fix that. (fig. 4)

The first thing we’ll need to adjust is in the dropdown at the top right of the Dreamweaver interface. It is likely is labeled “Default” right now. (fig. 5)

Step 3: From that dropdown menu, change the setting to Code. (fig. 6)

The biggest change you’ll likely notice, is that the panels jumped from the right side of the screen to the left and a new panel appeared at the bottom of the screen. (fig. 7)

Step 3: Take a close look at the top left panel. You should see a small icon of four horizontal lines and a small down arrow. This is the options button for that panel. (fig. 8)

Click it to reveal the available options.

Step 4: From the flyout menu that appears after you click the options button, chose Close Tab Group at the very bottom of the list. (fig. 9)

That should have closed out the first chunk of panels, but there are still more panels to close. You’ll probably notice that the panel that was below the panel we just closed has now jumped up to the top.

Step 5: Click the options button and choose Close Tab Group from the flyout menu. (fig. 10)

Step 6: Repeat this process for the bottom panel and any other leftover panels you might have. (fig. 11)

Hopefully now all the panels have disappeared and you are left with a big blank grey background. This is exactly what we want to see. (fig. 12)

Step 7: To eliminate some of the other unnecessary features, we’ll have to create a new document. From the top navigation menu, select File > New. (fig. 13)

A New Document panel will appear.

Choose New Document from the leftmost panel, HTML from the center panel, HTML5 from the dropdown on the right panel, and finally, click Create on the bottom right. (fig. 14)

The grey background will be replaced by a black background with a list of numbers running down the left edge. (fig. 15)

This is the code editor where we’ll eventually be typing in our code. By default, Dreamweaver types in some of the basics for us, which we’ll take care of next.

Step 8: Select all the prewritten text inside our editor. (fig. 16)

It’s important that we don’t let Dreamweaver help us too much, especially if this is your first time learning about coding websites. If you want to really understand code writing and code mechanics, you’ll need to be able to code in everything, even the parts that get repeated on all pages. Repetition is important for memorization.

Also, there may be times where you won’t have Dreamweaver available and you’ll be asked to write or edit code in another program that doesn’t have any prewritten code. You want to make sure that you know your stuff so you can work in any software environment.

Many code editors are just variations on simple text editors, which is really all you need for writing websites. This is a huge advantage because it isn’t necessary to buy expensive software to work as a professional web designer. I use a variety of code editors and of them, Dreamweaver is the only one that enters any prewritten code for me.

Step 9: Hit Delete. We’ll want to start with a clean slate. (fig. 17)

When we opened a new document, it brought with it a bunch of new toolbars which you’ll see across the top and on the left of the code editor. We’ll go ahead take care of removing all the new panels that have appeared with our editing panel.

Step 10: From the top menu, select View > Toolbars > Document to uncheck the Document toolbar (fig. 18).

You’ll see in (fig. 19) one toolbar is now gone from the top of our code editor.

Step 11: From the top menu, select View > Toolbars > Standard to uncheck the Standard toolbar. (fig. 20)

Now, the top portion of our code editor is clean of extra tools and panels. (fig. 21) One more to go.

Step 12: From the top menu, select View > Toolbars > Coding to uncheck the Coding toolbar. (fig. 22)

Your code editor should now be free of any distracting panels and toolbars. It should look a lot like mine, (fig. 23).

If so, Good deal. We have successfully gotten rid of the extra stuff that came in when we opened a New Document.

Now, we’ll need to save our workspace so Dreamweaver will remember that this is how we want our interface set up each time we launch the program.

Step 13: From the dropdown on the top right of our application, select Save Current from the list. (fig. 24)

This saves all of our settings inside our current workspace (now set to Code).

Now, let’s test it out to make sure it sticks. Let’s quit Dreamweaver. Go to the Dreamweaver item from the top navigation and select Quit Dreamweaver. (fig. 25)

Don’t worry about saving your file. Go ahead and click Don’t Save from the pop up. (fig. 26)

Now, go ahead and relaunch Dreamweaver. Hopefully when it opens you get to skip the welcome screen and be taken directly to the simple grey background with no open panels. Double check that the dropdown at the top right is set to Code. (fig 27)

Now, open a new document: File > New. (fig. 28)

Like before, choose New Document, HTML, and HTML5, then click Create. (fig. 29)

You’ll still need to select and delete any prewritten text inside the code editor. I have yet to find a setting to turn of the prewritten code.* (fig. 30).

Note: If you know of a way to eliminate the prewritten boilerplate code at the start of a new document, I’d love to know. Please email me at hello@elbongurk.com to give me the details.

Once you’ve cleared your editor of all prewritten text, you’re ready to write your code! (fig. 31)

If you reached this post while working through Lesson 1 of Web Design for Graphic Designers , this is exactly where you want to be to begin the work in Lesson 1: File Management & HTML Boilerplate.

For those of you who landed here because you are interested in learning web design and writing code, you might want to check out my book, Web Design for Graphic Designers, where I walk you through the steps for creating a modern, responsive website!

Best of luck!

1…2…3…Go!

Web Design for Graphic Designers

A Step-by-Step Guide for creating a modern, responsive website from scratch

Co-authored by Jillian Noble and Ryan Krug

Published by EMSPACE

Read Online for Free