2 Replies Latest reply on May 21, 2010 12:46 PM by Nancy OShea

    Can anyone help me to create a header in Dreamweaver CS5 (image included)

    Aussie8101984

      Hi there:

       

      I have a project to do and i have to create this header:

       

      Home header.jpg

       

      i even didn't know how to insert the vertical line (between the logo and the text) so i just cropped this image in fireworks and got the logo and the vertical line and just insert the image in dreamweaver, and when i tried to type the text: compass adventure tours it didnt go to where it is now, it went down and didn't know how to reposition it to its right position so hope that someone can help me with creating this header in dreamweaver.

       

      Thanks

        • 2. Re: Can anyone help me to create a header in Dreamweaver CS5 (image included)
          Nancy OShea Adobe Community Professional & MVP

          You could do this very nicely with CSS styled tables. 

           

          Copy and Paste the following code into a new, blank HTML document (in code view).

           

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
          <title>Nested Table</title>
          
          <style type="text/css" media="all">
          /**GENERAL STYLES**/
          body {font: 1em/1 Geneva, Arial, Helvetica, sans-serif}
          
          #table1, #table2, #table3 {
          border:none; 
          width:100%; 
          text-align:center;
          font-weight:bold;
          }
          
          /**BACKGROUNDS AND COLORS**/
          #table1{background:#333333; color: #FFFFFF;}
          #table2 {background:#333333; color: #FFFFFF;}
          #table3 {background:#0066CC; color: #99CC00;}
          
          /**CELL WIDTHS AND BORDERS**/
          
          #table1 .td1 {
          width: 16.6%;
          border-right: 1px solid silver}
          
          #table2 .td2 {
          width:50%;
          border-top: 1px solid silver; 
          border-right:1px solid silver;}
          
          #table2 .td3 {
          width:50%;
          border-top: 1px solid silver;}
          
          #table3 td {
          width: 16.6%; 
          border-right: 1px solid silver;}
          
          /**VERTICAL ALIGNMENT**/
          #table2 tr, 
          #table3 tr {vertical-align: bottom;}
          
          /**LINKS**/
          a img {border:none}
          
          #table3 a {
          text-decoration:none; 
          display:block; 
          line-height: 1.5em;}
          
          #table3 a:link {color:#99CC00}
          #table3 a:visited {color:#CCCCCC}
          #table3 a:hover,
          #table3 a:active
          #table3 a:focus {background: maroon; color:#FFFFFF}
          </style>
          </head>
          
          <body>
          <table id="table1">
          <tr>
          <td class="td1">your logo goes here</td>
          <td>
          <!--begin nested table -->
          <table id="table2">
          <tr>
          <td colspan="2">
          <h1>COMPASS ADVENTURE TOURS</h1>
          </td>
          </tr>
          <tr>
          <td class="td2">
          <h2>HOME</h2>
          </td>
          <td class="td3">
          <h2>BANNER </h2>
          </td>
          </tr>
          </table>
          <!--end nested table -->
          </td>
          </tr>
          </table>
          <!--begin navigation table -->
          <table id="table3">
          <tr>
          <td><a href="#">HOME</a></td>
          <td><a href="#">DRIVING</a></td>
          <td><a href="#">CYCLING</a></td>
          <td><a href="#">DESTINATIONS</a></td>
          <td><a href="#">RESERVATIONS</a></td>
          <td><a href="#">CONTACT</a></td>
          </tr>
          </table>
          </body>
          </html>
          

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists
          http://alt-web.com/
          http://twitter.com/altweb
          http://alt-web.blogspot.com