The Properties panel, the CSS Styles panel and the Files panel in Dreamweaver are parts of the Dreamweaver window that show you certain under-the-hood details of your website. They also let you control certain aspects of your website. From time to time, I get newcomers to Dreamweaver telling me that they have accidentally closed, removed or somehow hidden either the Properties panel, the CSS Styles panel, the Files panel or all of the above, and can't find a way to get it back. This tutorial shows you how you can restore those panels.
If you're reading this page because you're curious about creating a website, it's probably better to start by reading How to Make / Create Your Own Website: The Beginner's A-Z Guide. That article is more appropriate for newcomers and deals with the step-by-step creation of a website in plain English.
Note that I have only tested the procedure mentioned below in Dreamweaver CS5. It should (hopefully) also work in CS4 and CS3, but since I no longer have those versions installed, I can't be sure.
There are actually a couple of ways to restore the PROPERTIES, CSS STYLES, and FILES panels, depending on what you did to remove them in the first place. However, since it's unlikely that you remember what you did to hide them, it's probably simplest to just use the following method to reset the user interface to the original state Dreamweaver was in when it was first installed.
Click "Window" on the menu bar. In the drop down menu that appears, click the "Workspace Layout" menu item. Make sure that the "Designer" menu item in that menu has a tick appearing next to it. If not, click it to put a tick there. If the tick is already there, click the "Reset 'Designer'" menu item.
This will return Dreamweaver to the condition it was in when you first installed it. The Properties panel should reappear, along with any of the other panels that you may have accidentally hidden.
A side effect of doing this is that Dreamweaver may be reset to use the Split view, where the underlying HTML code for your web page appears in one half of the Dreamweaver window alongside the actual visual appearance of your web page. If you are using one of my Dreamweaver tutorials, such as the Dreamweaver CS5 Tutorial, the Dreamweaver CS4 Tutorial or the Dreamweaver CS3 Tutorial, you may want to click the "View" menu, followed by the "Design" item on that menu to restore the window to the Design view. Otherwise Dreamweaver may not behave the way I describe in those tutorials.
(If the "Design" item is disabled, or in grey ("gray" in US English), it probably means you don't have a file open in Dreamweaver. Open one of your website's files in the web editor, and you should be able to restore the window to the "Design" view.)
Although your aim was primarily to get the PROPERTIES (et al.) panel back, it's actually helpful to understand how you managed to accidentally hide, close or remove the panels before. This way, you'll know how to avoid doing the same thing again.
Typing the F4 key hides all the panels in the Dreamweaver window, including the PROPERTIES panel, the CSS STYLES panel, the FILES panel and so on. Everything disappears, leaving you a clean workspace (for those who prefer to work that way). If all your panels were hidden using this method, hitting the F4 key again will cause them to reappear.
The menu item "Hide Panels" on the "View" menu does the same thing as the F4 key. If you have hidden all your panels using either the F4 key or the "Hide Panels" menu item, clicking the "Show Panels" menu item on the "View" menu will restore them. (The "Show Panels" menu item only appears after you have used either the F4 key or the "Hide Panels" menu item to close the panels.)
At the top right of each of the panels is a drop down menu that has a few menu items: "Help", "Close" and "Close Tab Group". Clicking either "Close" or "Close Tab Group" on this menu will remove the panel.
If you have closed your panel using this method, you won't be able to "unhide" it by hitting F4. In such a case, simply use the method I mentioned at the beginning of this article to reset the entire Designer layout to its original state.
Dreamweaver allows you to customise ("customize" in US English) the layout of your Dreamweaver window so that it suits your work style. However, this sometimes creates problems for newcomers who may accidentally stumble on one of these "power user" features, and as a result disable some feature that they actually want to use. The above method allows you to reset Dreamweaver back to its out-of-the-box state, so that you can carry on working on your website using the interface you're accustomed to.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as: