Friends

Saturday, October 1, 2011

Tables in Dreamweaver CS4

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.Tables in Dreamweaver CS4
  • 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’
To give the background image to the middle:
  • 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’
    Tables in Dreamweaver CS4
  • In the ‘CSS Rule Definition’ screen choose ‘submenu-bg.jpg’ as the background image and select ‘repeat-y’ from the ‘Background-repeat’ options.
    Tables in Dreamweaver CS4
  • 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.
    Tables in Dreamweaver CS4
  • Type in the submenu items
    Tables in Dreamweaver CS4
  • 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

#
### ###