Dreamweaver: Tips and Tricks!

Over the past couple of weeks, I have spent some time in Adobe’s Dreamweaver crafting my first websites.

It has certainly been a crazy learning experience!  This program can do so much and I am quite sure there is no way that any person could learn everything it can do in a classroom setting — I think it’s all about trial and error and working on your own to truly find out what this program can do.

I have put together a list of some (what I find to be) helpful tips and tricks that I have discovered: whether it be by accident, through my reading of design blogs online, as well as reading of my textbook.

 

  1. This one is simple: make sure that the “view” you are working with is “Live View”.  This window will split the Dreamweaver screen into two parts — one will be the window that you type the code into, and the other screen will show you what your website will look like!  Very cool feature and is a must-use.
  2. Live View’s best friend; Live Code.  This feature will update your code automatically as you click, drag & drop, and interact with the elements in the Live View window.  Love this one!
  3. Just another reason to just bite the bullet and pay the money for Creative Cloud:  all of the typefaces that we have access to with Dreamweaver!  The great thing about this is that there are so many options, and as a member of Creative Cloud, we can use the fonts and not worry about copyright infringement issues if we use those fonts.  (Of course, double check and make sure that there are no restrictions on the font in the way that we can use it, but the options are still pretty great with Creative Cloud).
  4. No matter how much we (as designers) will try to smartly name our files; sometimes it can get confusing when we are dealing with a lot of pictures.  Well, an awesome feature of Dreamweaver is that it will create a pop-up thumbnail for any <img src> attribute.  There is no question what picture you’re working with when you’re only looking at the code.
  5. Naturally, Dreamweaver works wonderfully well with Photoshop.  It is nice to display images on websites in different shapes than just the typical rectangle that we work with in Photoshop.  Instead of using a mask in Photoshop to change the shape of the image — we can do the same thing in Dreamweaver!  Under the insert panel, there is a component that allows us to insert a special class, like ing-circle to the <img> tag.  This is much easier than going back into Photoshop and adjusting the image.

These are just a few things that I have discovered that I like!  This list is (of course) changes each day as I learn more about Dreamweaver.  Good luck and happy designing!