My goal in this chapter is to help you appreciate the different approaches to web design as well a few more of the features in Expression Web. So you can make a more informed decision about how you want to create your own website. In this chapter, we will explore a few different websites, reviewing how each of them was created so you can better appreciate your options. Let us start by exploring this California Nature site. Let us open here in expression web. If you have seen some of my earlier Expression Web details you may recognize this site. Although, I am mostly using new site designs on the series I wanted to return to this page because it is such a good example of some of the things you can do with the layers option in Expression Web. You will find a layers icon in the toolbox taskpane. And you can create new layers like the one that contains this image of an osprey by simply clicking and dragging the layer button into the main workspace area.
New layers automatically appear toward the top left of the page and you can click and drag to move a layer around the screen. I am just going to delete this one, but one of the cool things about layers is that they are very intuitive to use because unlike any other aspect of web design, you really can click and drag things where you want them on the page. Now, you still have to be a little careful. If you see here I have selected the image not the layer, the image is inside the layer and this is where the bread crumb trail, you see across the top of the screen can come in very, very handy. So I can tell up here that I have selected an element that uses the image tag in HTML and that it is contained with in a tag called the div tag. So, if I select div now, you will see I can click and drag this layer anywhere I want on the page. If I just select the image and I click and drag or we are taking the image out of the layer and can cause a real mess. Let us hope the undo key will bring that back for me.
So when you are working with layers, one of the tips is to make sure that you have selected the actual layer as you move around the screen. But because you can put any element in a layer and move that layer to anywhere on the page it is one of the most intuitive ways to the website. Similarly, layers offer some advantages you would not get with other design approaches in HTML. One of those is the ability to layer elements on top of one another. So you notice that this osprey is on a transparent background and it is actually on top of this banner that says California Wildlife and then there is another layer underneath here, an image that has took shading behind this and on top of the background image. So this kind of layer design is very hard to achieve without a lot of Photoshop tricks slicing or layers. Those are three ways that you can create this kind of a design on the web.
To control how layers were stock one on top of another, you will need the layers taskpane, you will find that under the taskpane menu when you choose layers. And here you will see that I have a container layer with all of my design elements and then a separate layer for each of the specific elements on the page and as I click through here you can tell which layer corresponds to which element on the page. And here is the thing to notice the Z-index as it called the layer Z-index is what controls which layer is on top of the others, so, the higher the number the higher the layer. So, if I want this osprey to be on top of the banner and the color and the background, but I am going to want it to have a very high number on the page, by the way this is kind of an advance step instead of numbering this one, two, three, four, five. Numbering them 20, 30, 40, 50, 60 like this gives me a little quick over room. So if I decide to add another layer later that I want to be between the osprey in the banner, I could make it 65 or really anything between 61 and 69 and have it fall into the position I want in the stocking of the layers. So, right away you might be thinking. “Wow, that is it Janine, now I know, I want to use layers to
