Dreamweaver: Insert Palette

It’s been quite a while since I’ve posted anything about Dreamweaver so I figured we should have a look at one of the program’s most useful palettes, the Insert Palette.

The Insert Palette can strip a lot of the simple coding out of the webpage building process, thereby making your job a lot quicker. Because Dreamweaver is so customizable, you can set your Insert Palette in the menu bar at the top of your page, have it floating or set it into the palettes to the right.

If you don’t already have your Insert Palette up, go to Window>Insert to retrieve it. For the purposes of this article I will set mine as part of the menu bar.

Image of the Insert Palette for Dreamweaver CS5
Insert Palette located in the menu bar

At first it might seem a bit overwhelming, what with all of those tabs and icons. The truth is, spending five minutes to familiarize yourself with its features will save you countless hours in the long run.

Let’s start by covering the tabs and their basics.

Common Tab – This tab holds exactly what its name suggests, several of the most common insertions. It sports a variety of useful snippets, from links, anchors and tables, to images, media and div tags.

Layout Tab – The Layout Tab deals with the layout options for a page. It offers quick page framing, the use of iframes, div tags and tables, as well as several Spry options (which we will get into later). Its primary purpose is to establish the initial look of the site without any of the bells and whistles.

Forms Tab – The Forms Tab covers a wide range of features which can be more easily categorized if you right click the Insert Palette and check Color Icons. Text boxes, various types of buttons, form controls and Spry features are separated by category, making it easy to tell which is which. If you haven’t created a form yet, you might wish to wait on this until you have a good feel for how your page will be laid out.

Data Tab – This tab contains much of the backend information that goes beyond simple coding. We won’t be spending much time with this one since it is more advanced than what we need right now.

Spry Tab – Likewise, the Spry tab isn’t going to be one that I will demonstrate. Spry is an Ajax based framework which increases the functionality and interactivity of the site. Though this is essential once you reach a more advanced state of web design, for our purposes in simple Dreamweaver use it isn’t relevant.

InContext Editing Tab – InContext Editing offers only two basic options, creating an editable region and creating a repeating region, both established with the use of div tags.

Text Tab – The Text Tab has a variety of simple tags to alter text. This alters the text directly in the HTML document, not the stylesheet, so every change made here only effects your selected section of HTML. In other words, it does not set up a repeatable style but resorts to using individual tags to accomplish its purpose. What does this mean to a web designer? Simply that any changes here will not be reflected in the overall site specifics.

Favorites Tab – For starters this tab will be empty. There are two basic ways to add icons to it.  The first is simply using the icons in the rest of the Insert Palette. As you use the icons, Dreamweaver will keep track of which icons you use most and add them here for convenience.

The other way to add icons to the Favorites Tab is to right click and go to Customize Favorites. This will open a panel with a list of icons on the right side. Simply highlight the ones you want, and click the double arrow between the two windows. Hit OK when you are finished and you will see the selected icons added to the Favorites Tab.

How do I use the Insert Palette?

Since the Insert Palette is essentially a group of organized shortcuts, you simply click in the place you want to insert a feature, either in the Design or Code window, then click the icon. Each icon has it’s own set of customizations which will then be added to your code. It’s that simple.

If you aren’t one that likes to write code but you do know when you need to add a little something, then open up the Insert Palette and save yourself a ton of time!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s