Pin Me

Microsoft Expression Web: Creating and Using Layers

written by: •edited by: Tricia Goss•updated: 5/10/2009

The ability to create and use layers is one of the features that really sets Expression Web apart from FrontPage. In this article, we will give a basic overview on how to use this powerful tool.

  • slide 1 of 4

    What is a Layer?

    One of my favorite inclusions in Expression Web that was missing in FrontPage is the ability to use layers in the creation of web pages. I can’t count the number of times that I fussed around with tables in FrontPage trying to get the exact format I wanted only to have to start all over and change the entire structure when I later decided that I wanted a different look. Thankfully, those days are over now with the layer functionality of Expression Web.

    Simply put, a layer is a division of a web page. However, layers are much more useful than tables because you have the ability to overlap them and create layers within layers. Moreover, when making modifications to a web page, if you decide you don’t want an existing layer, you can easily delete it without any of the other layers being affected.

  • slide 2 of 4

    How to Create a Layer – Method 1

    If you want to create a layer at an exact cursor point, you can simply click on “Insert Layer” in the Layers task pane. See the screenshot below for a demonstration of this. Using this feature will create a layer that is 100 x 100 pixels in size.

    Onsert Layer 

    You can then modify the size of the layer in one of two ways. The first way is to use your mouse to manually drag the edges of the layer to the dimensions you desire. This method works fine if the layer you are creating is limited in size, but it can be a bit frustrating if there are exact dimensions you are trying to reach.

    Drag Layer Borders 

    The second way involves making modifications to the HTML code for the layer that has been generated by Expression Web. You don’t really need to know any HTML to do this. Notice in the figure above how the HTML code for the layer is highlighted in the Code screen when you have the layer selected in the Design screen. If you want your layer to be 800 pixels wide by 200 pixels in height, just go to that highlighted portion of the Code screen and make those changes to the width and height. Click on the layer again in the Design screen and your changes will be present. Take a look at the image below to see the results of this action.

    Modify HTML 

  • slide 3 of 4

    How to Create a Layer – Method 2

    The second way to create a layer in Expression Web is to use the “Draw Layer” option in the Layers task pane. This is the method I prefer because it allows you to place a layer anywhere on your web page. Once you have created a layer in this manner, you can modify it the same way you did in Method 1.

    Draw Layer 

    There is one more type of modification that you might want to make to your layer that must be done in the Code screen. Suppose that instead of having a fixed pixel width, you want the layer to stretch across the entire width of the page. To make this change, make sure that your layer is highlighted in the Design screen so that the corresponding code is also highlighted in the Code screen. Then remove any reference to pixels in your width measurement and change the value to 100%.

    Make Layer Width of Screen 

  • slide 4 of 4

    For more tips and tricks, be sure to check out the other Expression Web resources found here at Bright Hub.