Working with layers in Microsoft Expression Web
Posted by: Minal Agarwal ,
on 12/12/2008,
in
Category Expression Web
Abstract: You must have read in my previous articles about the different approaches to design websites. In this article I would like to show you another way of web design that is by using layers.
What is a layer?
A layer is a container that can hold any page elements like graphics and text. If put in simple words it is nothing but a division (<div>) of a web page. The only difference between ‘layers’ and ‘div’ is that layers are always absolutely positioned. A layer always takes its position from the top left of the browser. Well you can always make modifications to the code and position it absolutely by giving the exact dimensions. We will see that in a while.
So why does a designer prefer using layers than tables to lay out a web page? Layers have an ability to overlap each other and still be independent. So if you decide to delete a layer, it can be easily deleted without affecting other existing layers.
How to create layers?
Method I:
The layer tag (option) is available in the Toolbox task pane.
To insert a layer on your page at the position of your cursor you can follow either of the following:
1. Go to the Task Panes menu and choose ‘Layer s’. Then click on the Insert Layer button.
2. In the Toolbox pane, under the ‘Tags’ section, either double click on the Layer tag or click and drag the layer to the page and drop it.
Either of the above ways would create a layer that is 100 x 100 pixels in size. See the image below:
Method II:
The second way to insert layer on your web page is to draw it. Many designers prefer this method since it gives you the liberty to place your layer wherever you want along with sizing it according to your requirement. For this click on the ‘Draw layer’ button in the Layers task pane. As soon as you do this the cursor changes to a small pencil with an arrowhead. Move this cursor to the point from where you want to start drawing you layer, click and then drag it to draw the layer. Release the mouse button when done. Your layer should now appear on the page.
How to edit a layer?
You may want to edit a layer’s width, position and such other dimensions. But as I mentioned earlier in this article, a layer is absolutely positioned. Though you can change its position it will always be absolutely positioned from the top left of the window.
Size and dimension-
By default a layer is 100 x 100 pixels in size. To change this dimension, you need to edit the corresponding code in the Code view. For example:
CSS:
#container_layer{
position:absolute;
width:400px;
height:200px;
z-index: 1;
}
HTML:
<div id=" container_layer " >
</div>
Position-
If you want to use layers to create web page layout, you would most likely want the web page centered in the window whenever it is viewed in a browser with a higher resolution. But when layers are always absolutely placed you may feel layers are not as useful. But there is a solution for this too. See the code given below:
CSS:
container_layer{
margin: auto;
position: relative;
width: 770px;
height: 182px;
z-index: 1;
padding-left:10px;
padding-right:10px;
border:1px maroon ridge;
}
header_layer{
border:1px lime ridge;
height:100px;
padding-left:5px;
padding-right:5px;
}
HTML:
<div id="container_layer">
<div style="header_layer">
</div>
</div>
The above example was a correct representation of nested layers. Among other features, layers have a unique feature of overlapping. That means you can create a layer and overlap with another without mixing the two. Both the layers remain independent and do not affect each others behavior. You can delete either of these layers without affecting the each other.
Conclusion
To sum up layers are a type of divisions with special features such as absolute positioning and ability to overlap. You can treat them as normal <div> too. I hope this article was useful to you and keep visiting for new articles.
This article has been editorially reviewed by Suprotim Agarwal.
C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.
We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).
Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.
Click here to Explore the Table of Contents or Download Sample Chapters!
Was this article worth reading? Share it with fellow developers too. Thanks!
Minal Agarwal, Expression Web MVP, MCDST, works as a freelance web designer (
SaffronStroke) working on Expression Web, Photoshop and other Graphical tools. As a hobby, she also runs a famous Food site called
Foodatarian.com. Follow her on twitter @
saffronstroke