Using Layers in Dreamweaver MX 2004

by Jeremy Reis on Wednesday, November 29, 2006

Using Layers in a Document

Unlike tables, layers let you stack objects, overlapping them as needed without sacrificing the ability to position elements with precision. You can also control the visibility of layers, as well as their appearance and position on the page, using cascading style sheets. This flexibility makes layers a far more powerful choice for page design than tables.

To add a layer to a page:

  1. On the Insert bar, make sure the Layout category is selected and click the Draw Layer button.
  2. Click and drag the mouse to draw a layer on the page. The layer acts as the container for an element you add to the page, such as text, a button, a graphic or a Flash movie file.
  3. If necessary, you can reposition the layer by dragging it with the mouse, or by entering values into the L (Left) and T (Top) fields of the Property Inspector.

Tip:

Turning on the grid can help you position layers exactly where you want them: Open the View menu and select Grid, and then Show Grid. A grid appears over the document. In the same menu, select Snap To Grid to help you align a layer precisely to the lines. As you near a line in the grid, the layer "snaps" into place.

  1. You can resize the layer in the same way you reposition it: either click and drag one of the selection handles at the edge of the layer, or enter specific values into the W (Width) and H (Height) fields.
  2. Use the Property Inspector to define additional properties for the layer, including background image, background color, visibility, clip, and overflow. Clip specifies the visible area inside the layer; that is, if you want only a small portion of the contents of a layer to be visible, define the visible area by entering left, right, top and bottom coordinates (in pixels). Overflow specifies how the layer should appear when the contents exceed the size of the layer. You can choose whether or not the extra contents should be hidden or visible, or whether or not to include scroll bars.
  3. Enter a name for the layer into the Layer ID field. Naming layers helps you manage them later, using the Layers panel.
  4. Once you've set the properties for a layer, insert the element it will contain using the buttons on the Insert bar. You can insert a graphic, a Flash movie - even a table. To insert text, simply type the text directly into the layer and format it as usual.
Page 48 of 60

Comments

 Rate This Post:    Rate This Comment as Good Rate This Comment as Bad
first web site
howdoi make a web site
250 out of 454 people found this comment informative.
 Rate This Post:    Rate This Comment as Good Rate This Comment as Bad
Need this programm for me
Thanks
213 out of 394 people found this comment informative.
 Rate This Post:    Rate This Comment as Good Rate This Comment as Bad
my comment
it is very helpful for my groath.thanks sir.
195 out of 360 people found this comment informative.
 Rate This Post:    Rate This Comment as Good Rate This Comment as Bad
Backgraound image
How do i make a background image in my web page with out it being repeated over and over again - Lydia
181 out of 323 people found this comment informative.
 Rate This Post:    Rate This Comment as Good Rate This Comment as Bad
TANX ALOT...
TANX ALOT... I'LL TRY THIS TUTORIAL SO THAT I CAN BE PRO IN DREAMWEAVER,,,, BUT IS THERE IS A VIDEO TUTORIAL... IT;S WILL MAKE ME EASY... LEARN WHILE WATCHING THE TUTORIAL... :)
170 out of 305 people found this comment informative.
 Rate This Post:    Rate This Comment as Good Rate This Comment as Bad
wasana
very good
149 out of 299 people found this comment informative.
 Rate This Post:    Rate This Comment as Good Rate This Comment as Bad
Thanx
It really helps me very much thank you once again
145 out of 272 people found this comment informative.
 Rate This Post:    Rate This Comment as Good Rate This Comment as Bad
comment
very good
174 out of 328 people found this comment informative.
 Rate This Post:    Rate This Comment as Good Rate This Comment as Bad
...
nice
141 out of 260 people found this comment informative.
 Rate This Post:    Rate This Comment as Good Rate This Comment as Bad
very nice
very nice
143 out of 267 people found this comment informative.
 Rate This Post:    Rate This Comment as Good Rate This Comment as Bad
coding
how make transfer for s students which score 150 above to choice of school
137 out of 249 people found this comment informative.
 Rate This Post:    Rate This Comment as Good Rate This Comment as Bad
camron
computer wooter hooter like gooder scooby dooby do where r u we need help from u dipset
145 out of 247 people found this comment informative.
 Rate This Post:    Rate This Comment as Good Rate This Comment as Bad
O_o
dreamweaver is so easy now! thank you so much leranthat.com, you really taught me alot!
132 out of 240 people found this comment informative.
 Rate This Post:    Rate This Comment as Good Rate This Comment as Bad
cool
this is awesome
116 out of 213 people found this comment informative.
 Rate This Post:    Rate This Comment as Good Rate This Comment as Bad
silas
wow, i love you (L)
120 out of 211 people found this comment informative.
 Rate This Post:    Rate This Comment as Good Rate This Comment as Bad
hes
my classmate
111 out of 199 people found this comment informative.
 Rate This Post:    Rate This Comment as Good Rate This Comment as Bad
ELMO
yes, i know, im gonna get you
muhahaha
115 out of 204 people found this comment informative.
 Rate This Post:    Rate This Comment as Good Rate This Comment as Bad
Ruler OF All
Shuffling is for fat crawling bags of phlegm
108 out of 201 people found this comment informative.
 Rate This Post:    Rate This Comment as Good Rate This Comment as Bad
view
i found all the articles in learthat very informative but it lacks some emphasis on using databases
91 out of 148 people found this comment informative.
 Rate This Post:    Rate This Comment as Good Rate This Comment as Bad
cool n keep it up
whateva you guys do is owesome,coz it helps the under previledged.thanx
77 out of 141 people found this comment informative.
 Rate This Post:    Rate This Comment as Good Rate This Comment as Bad
Thanx
Thanx Macromedia Dreamweaver becomes easy for me
Thank u very much once again
73 out of 133 people found this comment informative.
 Rate This Post:    Rate This Comment as Good Rate This Comment as Bad
bravo!
this is unique information for web designers
46 out of 81 people found this comment informative.
 Rate This Post:    Rate This Comment as Good Rate This Comment as Bad
thiensu2009
ddsfs
26 out of 48 people found this comment informative.
 Rate This Post:    Rate This Comment as Good Rate This Comment as Bad
For Help
Thanks to learn to my First user
23 out of 49 people found this comment informative.
 Rate This Post:    Rate This Comment as Good Rate This Comment as Bad
MR KYNOCH
HELLO NATHANIEL JONES
23 out of 35 people found this comment informative.
 Rate This Post:    Rate This Comment as Good Rate This Comment as Bad
I AM SUPA MAN
NOT GAY
18 out of 34 people found this comment informative.
 Rate This Post:    Rate This Comment as Good Rate This Comment as Bad
Advertising
Your all going to HELL!
17 out of 34 people found this comment informative.
 Rate This Post:    Rate This Comment as Good Rate This Comment as Bad
I am cool
19 out of 37 people found this comment informative.
 Rate This Post:    Rate This Comment as Good Rate This Comment as Bad
HOT CHICK FROM AMERICA
YEH BABAE!!!!!!!!!!!!!!PUSH IT IN!!!!!!!!PENETRATE ME!!!!!!!!!!!!!!!!!
21 out of 36 people found this comment informative.
 Rate This Post:    Rate This Comment as Good Rate This Comment as Bad
BORRIS
HELLO JONNY
17 out of 35 people found this comment informative.
 Rate This Post:    Rate This Comment as Good Rate This Comment as Bad
Great tutorial!
Finally getting started with Dreamweaver. Discarded the big books, this is lots better! Thanks!!
14 out of 24 people found this comment informative.

Add a Comment to This Article

Anonymous (Please Login to Post With Your Account)

      
HTML not permitted, some code allowed in [brackets]:
[b]bold[/b] , [i]italicized[/i], [br] line break, other formatting...


Code Image - Please contact webmaster if you have problems seeing this image code Load New Code
Please enter the code above
 
Please submit your comment only once, some comments may be reviewed by moderators
That Network: Interactive Internet Publishing NetworkJerm.com: entrepreneurship blogDefineThat.com: free technical definitions define wordstutorialguru.com: free tutorialsExamPractice.com: free certification news and practice exams GiveThat.com: free gift ideas, birthday, Christmas, holidaysExplorestartups.com: find free business plans and business ideas  Romancetips.com: free romantic tips, advice, dating, date ideas, free romancePublishondemand.net: free publish on demand print on demand pod comparisonmytutorials.com: collaborative write your own tutorials