Another way of designing layouts in
Dreamweaver CS4 is by using tables. We will use this method to create
the submenu area within the template.
- Open template.dwt
- Delete ‘Content for id “submenu” Goes Here’ from the ‘submenu’ div
- With the cursor still within the ‘submenu’ div insert a table
[Insert > Table] with 3 Rows, 1 Column, Width of 201 pixels, border
thickness – 0, Cell padding – 0 and Cell Spacing -0. Click OK.
- You will see a table appear in the ‘submenu’ div.
- Select the table [Right click within the table > Select Table] and align it ‘Center’ in the ‘Properties’ Panel.
- Click within the top row of the table and insert the image ‘submenu-top-bg.jpg’
- Click within the bottom row of the table and insert the image ‘submenu-btm-bg.jpg’
- Click within the middle row
- From the Properties panel, select <New CSS Rule> and click the ‘Edit Rule’ button
- Create a ‘class’ style called ‘.sub-bg’ within ‘styles.css’
- In the ‘CSS Rule Definition’ screen choose ‘submenu-bg.jpg’ as the
background image and select ‘repeat-y’ from the ‘Background-repeat’
options.
- We also don’t want the submenu text within the middle row to stick
to the edges so let’s give a padding of 10 pixels within the same style.
Click OK.
- Type in the submenu items
- You can create new pages and create links to them from this submenu area or you can but textual content that will display on all the pages here.
- Save the template and update all the pages.
- Preview your pages in the browser and test all the links.
0 comments:
Post a Comment