Web Design Using Dreamweavers Layers FeatureWeb Design Using Dreamweavers Layers Feature

I have been using Macromedia products for my web site production for years. I just recently found a new way to design that has made my life a lot easier. Prior to the "Layers" feature, I always found it difficult to make a page look the way I wanted it to due to the fact that I had to put everything into tables or just position my images around my text and hope for the best. Now, Dreamweaver offers this killer shortcut to making a website: Layers. Imagine being able to put anything (text, tables, graphics, whatever) WHERE EVER you want!! This is an absolute godsend in the design world as far as I am concerned.

Now, I just discovered this feature in Dreamweaver 8. There were previous versions of Dreamweaver (MX2004, etc.) that also allowed for this feature. Either way, I am glad that I was able to find it and utilize it because it has made a considerable difference in the design for web sites for me.

The concept is simple: create a new page. To do this you must have first established within Dreamweaver's site manager a site from with which you will work in. By right clicking on the site name in the properties bar you get a drop down menu with multiple options, one of which is ?New File?. Create a new .html file and then double click that file to open it in the main Dreamweaver working window. The next step is to insert your first layer. Under the "Insert" section of the top tool bar go to "Layout Objects" and then to "Layer". A little blue box will appear on your page. If you click on the perimeter of the box you get these little squares around the perimeter of the box allowing for resizing. You will also notice a small square in the upper right hand side of the new layer which when you click your mouse button on this square it allows for you to reposition the layer to where ever you wish to place it on your site.

You can now place anything you want within this box (layer) including text, flash movies, graphics, tables, library items and so on. The most awesome feature of this is that you have total control over where it is placed on your page and Dreamweaver will automatically write in the html code the exact X & Y coordinates that your browser will translate to show the page properly. It doesn't get much better than this.

I found this feature to be very similar to working in Adobe Photoshop because with layers you have total control over every aspect of the design, without the stress associated with web design.

Now say you want to add some text to a layer but the text runs far off the page or far off the size of the layer box size you chose. Well Dreamweaver has resolved that issue as well. In the properties inspector at the bottom of the screen you have a drop down box labeled "Overflow". If you drop down this box you have a few choices, Visible, Hidden, Scroll, and Auto. For the example I am explaining here you would choose "Scroll". This tells Dreamweaver to write in the code that if your text over flows the size you designated for the layer box to insert a scroll feature allowing your visitors to scroll down the text to read whatever you placed in that layer box. Pretty slick!!

Other features with using layers is that you have a choice to name your layers in the Layers Tab on the upper right tool menu as well as setting the succession of each layer. I do highly recommend that if you decide to use multiple layers that you save yourself a major headache and label each layer in accordance with what it is related to on your screen. This makes editing the layer later on much easier. Layers allow you to have the freedom within web design that should have been there all along. I suggest you give this a try and play with it and see what creative things you can come up with. Go nuts with this feature and have fun with it. You never know what will come out now that the boundaries have been dropped!

Other features that are pretty slick are the ability to overlap two images on a page. If you were doing an artistic presentation or something similar, this is a kewl feature which can be turned off on the upper right hand side of the "Layers" Properties box. Just put in a check mark under "Prevent Overlaps" and then you don't have to worry about it. Dreamweaver will automatically make sure that nothing overlaps in the layers. However if you did want to have an overlapping effect of say two images, then make sure that the Prevent Overlaps is unchecked and you will further unlock the magic of this wonderful feature.

In closing, this is a really awesome feature, but it takes some getting used to. It breaks all the rules of what we had previously learned that we could and couldn't do with web design. This takes that to the next level without making you reach for the aspirin.

A few other options include a command called "convert layers to tables" and "convert tables to layers". On the top tool bar in Dreamweaver, if you go to ?Modify? -„³ Convert -„³ you have the two options I just mentioned. Clicking on convert layers to tables will automate Dreamweaver to start calculating down to the pixel how to design a table out of the information you have given to it by placing layers on the page in certain areas. This feature is mainly used for those web surfers who have a browser that is not up to date (i.e. Version 5 or earlier of Internet Explorer or Netscape) The new versions of most major browsers now support and properly display layer content within the browser window. But if you think that your target audience might not have updated browsers, then you might consider this feature. Personally I don't use it because it is rare that people nowadays have outdated browser technology with all of the Automated Windows Updates and all.

The exact opposite if you choose convert tables to layers. If you already have a site and you built it in tables, choosing the option to ?convert tables to layers? will do just that.

I hope that this helps someone out who is doing their own design and wants to make their page look the way they envision it in their head without the stress of worrying about how to construct the right table and arranging things in that table to make it happen. Web design is moving forward and Macromedia has put the fun back into web design again!

by Scott Bulkley
References and Bibliography

Scott has been a web site designer for over eight years now and his artistic vision and creative skills have earned him quite a few satisfied customers. His innovative and easy to navigate sites have been applauded by the many who have hired his services. He currently has built over 100 web sites and maintains them for his clients. Aside from Web Design, Scott is also an accomplished photographer shooting pictures for Willie Nelson, the Dalai Lama, and Goldie Hawn, as well as fine art photos.


Rated:NR/0 Votes
Add To My Article Reading List
Add To My Article Reading List
Print Article
More Article By Scott Bulkley
More Article by Scott Bulkley
More Articles From Dreamweaver
More Articles From Dreamweaver
Related Articles and Readings
How Wives with Cheating Husbands Can Gain the Upper Hand By: Ruth Houston
Too many wives with cheating husbands put up with their husband's infidelity because they feel they have no choice, or they don't know what else to do. If you're in a similar situation, don't despair. You have more power and control than you think.Don't Be a Helpless ...
Why Choose Naturopathic Medicine By: Tara Barker
Naturopathic medicine is a system and philosophy of medicine that has been around for hundreds, perhaps thousands, of years. Before the advent of ?conventional? medicine, which uses a wide variety of drugs and surgical procedures, almost every doctor learned how to use herbs, minerals, homeopathy, and other natural methods ...
Fixer Upper Homes Are You Ready By: Steven Gillman
Fixer upper homes can be found in even the most expensive cites for much less than other homes. Even here in Tucson, where a small home will usually be over $200,000, an investor at our real estate investing club just told us he found one for $35,000. Before you get ...
Trading Below Major Resistance By: Arthur Eckart
The three charts below may indicate SPX direction over the next one to three months. The first chart is a 2 1/2 year chart of SPX with its 20-day MA (black and blue lines), VIX 20-day MA (red line), and CPC 20-day MA (green line). There's generally negative correlations between ...
If I Were a Rich Man... By: Carl Hampton
Many Americans living in the lower, middle, and even upper middle classes now more than ever before believe that they are striving for wealth that is unreachable They believe that they will never be truly wealthy, only perhaps maybe with a little ...
The information provided in this article and/or the comments is the sole responsibility of their respective authors and does not necessarily reflect the opinion of ezinepost.com. ezinepost.com  does not endorse any article and/or comments published by our web users unless otherwise noted. 

Member Panel

login to submit articles and more


  • » Active Categories: 419
  • » Active Articles:252603
  • » Active Authors:31917
  • » Active Members: 38237
  • » Statistics Updated:
    - Tue Sep 1st, 2020 09:28AM EST