- What Are Web Pages?
- How Do You Actually Make a Web Page?
- It Can Be This Easy
- Format the Text
- Change the Colors
- Create Links
- Make an Email Link
- Add a Graphic
- What Are Layers?
- Make a Table
- Absolute vs. Relative Table Widths
- What Are Frames?
- Add Code, If You Like
- Build More Pages
- Then What?
- Self-Guided Tour of the Web
- Oh Boy, Its a Quiz!
This chapter is from the book
This chapter is from the book
This chapter is from the book
What Are Layers?
CSS (Cascading Style Sheets) is a popular and powerful way to create style sheets for text (see pages 256–260). CSS can also be used to control the appearance of a web page, the position of text or images on a page, and even the visibilty of elements. One aspect of CSS is called CSS layers and it’s a great way to build a web page, especially if you use an HTML editor like Golive or Dreamweaver that understands layers and writes the code for you.
The basic concept of using layers is this: Each element of your web page is placed on a separate layer. You can then drag individual layers to any position on a page. They can be transparent and overlap other layers. You can even make a layer invisible until an action such as a mouse-over reveals it (great for “fly-out” or “drop-down” menu effects).
Design a Simple Page Using Layers
To create the web site you see on page 67, we’ll use Dreamweaver. You might have a different editing program, but the concept will be similar.
Tutorials for hand-coding layers can be found on the web, but using an HTML editor is easier, faster, more accurate, and a lot more fun for us code-challenged types. Plus, it puts you (and your site) in the CSS world where the future of web design resides.
- Open Dreamweaver and create a new HTML document. Save the document into a root folder that contains the graphics you plan to use on the page.
The graphics can also reside in a subfolder of the root folder (named “images,” for instance). The main objective is to have all related files and folders in one main folder (generically called the root folder).
- Click the “Draw Layer” button in Dreamweaver’s Layout palette (circled below), then drag your cursor diagonally across the
open document to draw a rectangle as shown on the next page.
Congratulations, you’ve just created a CSS layer. Into this layer you can insert text, graphics, a table, another layer (called a nested layer), or a combination of those items. Continue on!
- Once you’ve created a layer shape, you can drag one of the black dots on any corner or side to change its shape or size. Press on the layer’s handle (shown below-right) to drag the entire layer to any position in the document (now, or after you’ve inserted text or graphics).
- Insert a graphic: From the Dream-weaver “Insert” menu, choose “Image” to open the “Select Image Source” window. Select the graphic you want
to use and click “Choose.” Or drag-and-drop a graphic file straight from its folder to the layer in the Dreamweaver window.
Either way, the graphic appears in the layer, stretching the layer to fit the image if necessary. As mentioned earlier, you can drag this layer to any position in the document. Dreamweaver automatically rewrites the CSS code on the fly to define the new layer position.
- Create a text heading and a text navigation bar: Repeat steps 2 and 3 to create two new layers, one for each text element. In one layer type the name of the site, then in the other layer type the text you want to use for navigation to other areas of the site.
- We changed the color of the web page background to match the main graphic’s background color, a web-safe gray. The background color will influence the colors you choose for the text layers.
- Format the text in the two text layers as you like. The best way to format text is to use CSS style sheets (see pages 256–260). Or use the Dreamweaver Properties palette (shown below) to assign fonts, sizes, colors, and styles (bold or italic).
Dreamweaver’s Split view below shows both a Code view (top) and a Design view (bottom). The heading layer is selected, which automatically highlights the corresponding layer code in the code pane above—in case you’re interested in how the code is written. The code is simple and easy to understand.
- The Layers palette (below) lets you change the stacking order of layers. This layer order is called the z-index. You can also rename layers, turn visibility on or off (click the eyeball icon), and prevent overlapping of layers (click the “Prevent overlaps” checkbox). If you think you might want to automatically convert your layers layout to a tables layout later, select the “Prevent overlaps” checkbox now.
- Using the Properties palette, assign link addresses to the text items in the navigation bar.
- Amazingly, you’ve just created a CSS layers web page. The example below shows one of the site’s interior pages, also created with layers. The text navigation bar is on one layer, the large graphic is on a second layer, and the page head and body copy are on a third layer.
)
)
)
)
)
)
)
)
)
)