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!

Typography: Symbol Fonts

When I think of typography, the first thing that crosses my mind is probably not the wide array of symbol fonts that exist.  Even more exciting, a good number of these fonts are also free to download and use to your hearts content!

Below I have included a few symbol fonts that I have found interesting and that could be useful in many different graphic design projects.

  • Glyphyx One

glyphyx symbol

The symbols in the Glyphyx One set are all related to transportation in one way or another.  Containing symbols from cars and bikes to taxis and helicopters, this font would probably be a great option for an information graphic.  (The “leisure” themed items seen above come from the Glyphyx Two set).

  • Cittadino

cittadino

This free symbol font is an eye-catching collection of pictograms, which apparently are already featured on the Milan Metro map.  Designed by a Moscow based desire, this set includes both upper and lower case letters as well as numbers.  Talk about real-life design solutions!

  • Rosette

6b9bdce86443737586f1ffe7dbfd776f

This eye-catching and beautiful set of rosettes was created by a font designer and calligrapher that was formerly an architect.  I love hearing of great “conversion” stories of designers using their already honed skills and directing that into design careers.  This designer certainly made the right choice and I would love to use one of these in a project soon.

  • Kalocsai Flowers

kalocsai flowers

This set of flower symbols is very attractive and I think that has to do with the simplicity of the flowers.  There is beauty in simplicity, and I really like this set.  What makes it even better is that these are free to use!

  • Adhesive Nr. Seven

adhesive nr. seven

Yet another set of symbols that are free to download and use, these textured banners are widely versatile and I think they can be used with a wide variety of design styles.

  • Vintage Wedding

vintage wedding.png

Unfortunately this set is not free (costs between $20 and $108), , but it has symbols that are able to be used for design solutions other than just weddings. This is a very large collection of symbols at 432 icons that can be used for many different celebratory occasions including baby showers, Valentine’s Day, birthdays…