The new layer will be part of the template because we want it to appear alongside the nav bar on every page.

Transcription

1 Chapter 6 Layers In this chapter you'll be creating the Chalets page. Like the other pages, the bulk of the Chalets page is made up of images and text set in a table which you are already familiar with. The difference with this page is that it is actually four pages, not one (one page for each chalet). We will create a second menu that appears when the Chalets nav bar button is pressed, from which you can select the chalet you wish to see. This will give you a useful introduction to both Layers and Behaviours, both of which might sound a bit advanced, but this really is quite straightforward, and the extra menu will add a really professional touch to your site. The Behaviours will be covered in the next chapter. Layers Layers are useful for two main reasons: i i They are good for layout because they allow you to overlap items and place one thing on top of another (which is not possible without layers). If an object is placed in its own layer, you can place it anywhere on the page, without using a table. You can attach Behaviours to layers. The Behaviours we will be using are Show and Hide. The menu layer will be hidden most of the time, and shown when the mouse is over the Chalets nav bar button. Creating a new layer The new layer will be part of the template because we want it to appear alongside the nav bar on every page. Open the main_template.dwt file by double-clicking it in the Site panel. If you can't see the Layers panel, select Window, Others, Layers from the menu. Figure 6.1: The Layers panel The layers are listed in the Layers panel which is in the Advanced Layout panel group. As you can see there are no layers currently created. 59

2 Insert a new layer by clicking the Draw Layer icon in the Insert bar. Drag out a small rectangle as shown below. Now we'll insert a table into the new layer. Figure 6.2: Drawing a layer Use the Insert Table icon on the Insert bar to insert a table 4 rows x 1 column. The cursor must be in the new layer in order that the table is inserted in the layer. Figure 6.3: Inserting a table into a layer Type the following text into the table: Figure

3 Resizing the layer The text in your layer might run onto 2 lines, in which case you need to widen it. If the handles are not visible, move the cursor over the edge of the layer so that it becomes a cross-headed arrow, as shown below, and click. Figure 6.5: Selecting a layer You should now see small black handles around the layer. You can click and drag these handles to resize the layer. Figure 6.6: Resizing a layer Changing the table background colour We want to colour the background orange, but leave a white space between the cells. To do this, leave the table background settings as they are, and change the cell backgrounds individually. Just click in a cell, and change the Bg property to orange (click the dropper on the nav bar to perfectly match the colours). Figure 6.7: Changing the cell background colours 61

4 Change the font to Arial and the size to 2 by selecting all the text and changing the properties in the Properties inspector. Make the text white. Naming the layer It is always a good idea to name layers so that you can easily recognise which layer is which when they are listed in the Advanced Layout panel. Figure 6.8: Selecting the cell to display layer properties Select the layer by clicking on the top left layer handle (shown above) to display the layer properties in the Properties inspector. i Enter SubMenu as the LayerID. Figure 6.9: Layer properties If you look in the Advanced Layout panel the layer should now be listed under its new name. Figure 6.10: The SubMenu layer is displayed in the Layers panel 62

5 Hiding the layer You can show and hide a layer whilst designing a site using the Advanced Layout panel. In the column that has an eye in the header, click next to the layer. A closedeye symbol will appear and the layer will disappear. Figure 6.11: Showing and hiding a layer Keep clicking in the same place; the layer will cycle through three phases: hidden, visible and unspecified. Leave the layer hidden, with the closed-eye icon. Save! Don't forget to save your work regularly. When you save you will get the following message because you have two pages based on the template. Just click Yes and then Close when the pages are updated. Figure 6.12: Saving a template 63

6 Creating the chalet pages When you insert the chalet photos you will probably get a prompt about Alternative Text this is because you have the Image accessibility checked in Preferences. (see page 57 to uncheck this option.) You need to create 4 new pages, each of which will be named after a chalet and will contain an image and some text about that chalet. We will then set up hyperlinks to link the menu items with each of the pages. Open 4 new pages based on the main_template, saving them as ChaletVert, ChaletBlanche, ChaletRouge and ChaletNoir. In the Images folder there are images for each of the chalets, named after the chalets. Insert the images and some text so that the pages look something like the one below. To speed things up, you could copy the table, text and image from the first chalet page you create and paste it into the others, changing only some of the text and the image. To do this, select the table using the <table> tag just above the properties panel and select Edit, Copy from the menu. Go to the second chalet page, place the cursor in the editable region and select Edit, Paste from the menu. Save all Figure 6.13: The Chalet Rouge page When you are creating and editing a lot of pages at once you can save all instead of individually saving pages. Select File, Save All from the menu. Close the four chalet pages you have just created. Creating the hyperlinks Return to the template and unhide the SubMenu layer. Highlight the text Chalet Vert in the SubMenu layer. 64

7 Make sure all the html files of the chalet pages are visible in the Site panel. If you don't like using the target, click the Browse icon to the right of the target. Now find and select the file you want and then click OK. Figure 6.14: The Site panel In the Properties inspector, click and drag the target next to the Link field onto the ChaletVert.htm file and drop. The text should now be underlined to signify a hyperlink. Repeat this for the other menu items, linking them to the relevant chalet pages. Figure 6.15: Creating hyperlinks Save your template. Close the template if this is the end of a session, otherwise leave it open for the next chapter. 65