Now, let us add a couple of more layers and images to complete this design. So again, adding a layer to this page, click and drag to insert the layer, and I am going to bring this one over and bring my osprey to life. Again, click to insert your cursor into the layer and insert picture. Now, I am in the front page images folder which is on my desk top and I do not want to be here anymore because I have now imported all these images into my website folder. But expression Web is going back to the last place I linked an image from. So here is the quick short cut back to where you want to be.
See this button called current site, if I click current site there then it jumps to bring me exactly where I should be in my website, I can double click to open my images folder and I make sure that I am linking to the image I have already copied into my site that is already in my images folder.
So let me click and drag to get this one into position. Now, I do not want this layer selected when I add a new layer, so let me click off that layer. If you add a layer with another layer selected, you will create a nested layer underneath it. I want another top level layer, click and drag this layer is going to hold the image that fills in this color and when I do, I am going to cause a problem. I am going to show you how to fix. Now, because this image does not have any text on it, I am not going to put any all text here because I do not want to add confusion by identifying something that is just adding color to this region of the page. Now, what is the problem here? Well, all my buttons just disappeared and most of my osprey is gone. Oh, but that is a problem with the z-index. It is a very important that I have the correct layer on top.
So let me show you how you change the z-index, so that everything appears in the right order. Okay, so the z-index which you see over here in the layers panel, this number here is the z-index. That is what specifies the order of layers and how one layer appears on top of another layer. Before I fix the z-index, let me first take care of the fact that these two new layers are actually nested under my banner layer. I did not really mean for them to be nested. I want all of these layers to be equal to one another so that I can better control the z-index. But it is really easy to nest the layer inside another layer without even intending to. So let me show you how easy it is to undo that problem. I simply select the layer, drag it up, and it will unnest itself from the one below it. While we made it, let us give this layer a name so I can better keep track of what I am doing. Remember, in the time properties, you can rename layers. So when I hit the return key, that name is applied to the layer and appears in the layers task pane.
Now, let me drag my osprey layer and now, let me show you how to get those little navigation buttons back on top of the colored box where they are supposed to be. Again, I hit return to apply the name and notice here the z-index. So my osprey is now on top where I want it to be, but the colored box is covering up the navigation button. So here is the simple rule, the higher the number, the higher the layer. If you can imagine that these layers are stocked on top of each other, the one with the highest number wins. And here is one other tip, I am going to rename these, so I get them in the right order, but I am also going to change the numbers so that I leave room to add layers if I ever want to add layers in the future. I think as I do this, it will make sense. I want to make the banner layer at the next one up because I am going to want it under the osprey but I would not mind having it above the colored box so I can finagle this little edge more carefully. So I am going to renumber the z-index of the banner.
Now, I cannot do that in the layers task pane, but I can do that in the CSS properties task pane, notice here z-index. I am gong to number this 20, and I am going to number it 20 for two reasons; one, that will put above this one but it will also give me some flexibility, so if in the future I want to add a layer between these two, I can add layers in between them without having to renumber every layer. So let me continue with that theory. Let us make this 30, water 40, friends 50, my map can be 60, and now I know to keep my osprey at the very top of the file, I am going to want to make it a higher number than anything else on the page. So I am going to make it a really high number, because no matter what I am want to keep it flying high.
Transcription by:
Scribe4you Transcription Services