SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2004
    Location
    nottingham
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ASP Template help needed

    I am trying to update a website that uses ASP to connect to a database.

    I want to change a template file i have so that it is CSS driven with as few tables as possible.

    I have managed to strip the tables from the header and footer sections of the template and replace them with divs and CSS styled unordered lists.

    I am struggling with the site breadcrumb, navigation and main content areas as these use ASP code to draw data from a database (i dont have access to the database). The site is updated using a Content Management System.

    The main site webmaster has told me that a CSS driven template is unworkable. I think that she just cannot be bothered to change with the times and therefore won't move to a CSS driven layout. She took great lengths explaining that she had been doing the job for six years and that tables were the best way to go.

    I have the template file i'm trying to change. I have included the full template unchanged below. The template code is below:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title><%=Server.HTMLEncode(toPage.title)%></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <link href="test.css" rel="stylesheet" type="text/css">
    <style type="text/css">
    @media print{
    body{ background-color:#FFFFFF; background-image:none; color:#000000 }
    #header{ display:none;}
    #parentlinks{ display:none;}
    #navigation{ display:none;}
    #banner{ width:100%;}
    #contentarea{ width:100%;}
    #footer{ display:none;}
    }
    </style>

    <meta name="Title" content="<%=Server.HTMLEncode(toPage.navTitle)%>" lang="en-GB" xml:lang="en-GB">
    <meta name="Subject" content="Site Content" lang="en-GB" xml:lang="en-GB">
    <meta name="Keywords" content="Official, Site Keyword, Another Site Keyword"><%=Server.HTMLEncode(toPage.meta_keywords)%>"

    lang="en-GB" xml:lang="en-GB">
    <meta name="Description" content="My Website<%=Server.HTMLEncode(toPage.meta_description)%>" lang="en-GB" xml:lang="en-GB">
    <meta name="Publisher" content="Site Publishers Name and Contact Details" lang="en-GB" xml:lang="en-GB">
    <meta name="Contributor" content="<%=toPageHTML.editor().fullName%>" lang="en-GB" xml:lang="en-GB">
    <meta name="Author" content="webmaster" lang="en-GB" xml:lang="en-GB">
    <meta name="Telephone" content="<%=Server.HTMLEncode(toPageHTML.editor().telephone)%>" lang="en-GB" xml:lang="en-GB">
    <meta name="Email" content="<%=Server.HTMLEncode(toPageHTML.editor().email)%>" lang="en-GB" xml:lang="en-GB">
    <meta name="Date" content="<%=toPageHTML.modified.shortFormat()%>" lang="en-GB" xml:lang="en-GB">
    <meta name="Type" content="" lang="en-GB" xml:lang="en-GB">
    <meta name="Format" content="text/html" lang="en-GB" xml:lang="en-GB">
    <meta name="Identifier" content="" lang="en-GB" xml:lang="en-GB">
    <meta name="Source" content="" lang="en-GB" xml:lang="en-GB">
    <meta name="Language" content="English, Great Britain" lang="en-GB" xml:lang="en-GB">
    <meta name="Relation" content="" lang="en-GB" xml:lang="en-GB">
    <meta name="Coverage" content="" lang="en-GB" xml:lang="en-GB">
    <meta name="Rights" content="Site Copyright Notice" lang="en-GB" xml:lang="en-GB">
    <meta name="template" content="test.jtm - 28 May 05" />

    <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
    </head>

    <body bgcolor="#FFFFFF">
    <a name="top" id="top">
    <!-- top -->
    </a>
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td><table id="header" border="0" cellpadding="0" cellspacing="4">
    <tr>
    <td valign="top" rowspan="2"><a href="/index.htm"><img src="/img/mysite/templates/picture.jpg" alt="Back to the home

    page" width="140" height="60" border="0"></a></td>
    <td valign="top"><table id="banner" width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><a href="/mysite/index.htm"><img name="banner_re" src="/img/mysite/templates/banner.jpg" width="480"

    height="45" border="0" id="banner" alt="Back to the home page"></a></td>
    </tr>
    </table>
    </td>
    <td valign="top"><a href="/mysite/careers/index.htm"><img name="jobs" src="/img/mysite/templates/jobs.jpg"

    width="120" height="45" border="0" id="jobs" alt="Visit mysite Careers pages"></a></td>
    </tr>
    <tr>
    <td class="crumbs" colspan="2"><a href="/mysite/careers/index.htm">Careers</a> - <a

    href="/mysite/org/index.htm">Organisation</a> - <a href="/mysite/jobhunt/index.htm">Job Hunt</a> - <a

    href="/mysite/magazine/index.htm">Magazine</a> - <a href="/mysite/news/index.htm">News</a> - <a

    href="/mysite/shop/index.htm">Shop</a> - <a href="/mysite/sport/index.htm">Sport</a> </td>
    </tr>
    <tr>
    <td colspan="3" bgcolor="#cc0000"><img height="2" src="/img/mysite/global/spacer.gif" alt=" "

    width="760"></td>
    </tr>
    <tr>
    <td colspan="3">

    <!-- BREADCRUMB START -->

    <%
    var strParentLinks = "";
    var oTmpPage = toPage;
    while(oTmpPage.id != 1){
    if(oTmpPage.navTitle != "index"){
    strParentLinks = '/&nbsp;<a href="' + oTmpPage.directLinkTo() + '" class=directoryLink>' + oTmpPage.navTitle +

    "</a>&nbsp;" + strParentLinks;
    }
    oTmpPage = oTmpPage.parent();
    }
    strParentLinks = '<a href="' + oTmpPage.directLinkTo() + '" class=directoryLink>' + oTmpPage.title + "</a>&nbsp;" +

    strParentLinks;

    writeHTML(strParentLinks);
    %>

    <!-- BREADCRUMB END -->
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    <table border="0" cellpadding="0" cellspacing="0">
    <tr valign="top">
    <td width="150" bgcolor="eeeeee" class="lhnav" id="navigation"><table border="0" cellpadding="0" cellspacing="4">
    <tr>
    <td valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <!-- HOME PAGE LINK -->
    <td><table width="100%" border="0" cellspacing="4" cellpadding="0">
    <tr>
    <td><div align="center"></div></td>
    </tr>
    </table></td>
    </tr>
    <!-- HOME PAGE LINK END -->
    <tr>
    <td><div align="center"><em><%=Server.HTMLEncode(toPage.navTitle)%></em></div></td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td><img height="6" src="/img/mysite/global/spacer.gif" alt=" " width="150"></td>
    </tr>
    <tr>
    <td>
    <!-- LINKS START -->
    <%

    var arrBreadcrumb = new Array();
    var oTmpPage = toPage;

    while(oTmpPage.id != null){
    arrBreadcrumb[arrBreadcrumb.length] = oTmpPage;
    oTmpPage = oTmpPage.parent();
    }
    Page.prototype.isOnBreadcrumb = function(){
    for(var c=0; c<arrBreadcrumb.length; c++){
    if(arrBreadcrumb[c].id == this.id) return(true);
    }
    return(false);
    }


    Page.prototype.outputLink = function(tier){
    writeHTML(' - <a href="' + this.path + '" class="navTier' + tier + '">' + Server.HTMLEncode(this.navTitle) + '</a><br>');
    if(this.isOnBreadcrumb()){
    var arrChildren = this.childrenAllowedInNav();
    for(var c=0; c<arrChildren.length; c++){
    arrChildren[c].outputLink(tier + 1);
    }
    }
    }


    var oHomePage = new Page(toTemplateInfo.sectionHomePage.useValue);
    var arrTLNav = oHomePage.childrenAllowedInNav();
    for(var c=0; c<arrTLNav.length; c++){
    var oTLPage = arrTLNav[c];
    writeHTML('<a href="' + oTLPage.path + '" class="main_nav">' + Server.HTMLEncode(oTLPage.navTitle) + '</a><br>');

    if(oTLPage.isOnBreadcrumb()){
    var arrSubNav = oTLPage.childrenAllowedInNav();
    if(arrSubNav.length == 0){
    writeHTML(' ');
    }else{
    writeHTML('</td></tr>');
    writeHTML('<tr><td><img src="/img/mysite/global/spacer.gif" width="150" height="1" alt=" "></td></tr>');
    writeHTML('<tr><td>');

    for(var sc=0; sc<arrSubNav.length; sc++){
    var oSNPage = arrSubNav[sc];
    // writeHTML('<a href="' + oSNPage.path + '" class="navTier2">' + Server.HTMLEncode(oSNPage.navTitle) + '</a>');
    oSNPage.outputLink(2);
    }

    writeHTML('</td></tr>');
    writeHTML('<tr><td><img src="/img/mysite/global/spacer.gif" width="150" height="3" alt=" "></td></tr>');
    writeHTML('<tr><td>');
    }
    }
    }
    %>
    <!-- LINKS END -->
    </td>
    </tr>
    <tr>
    <td><img height="6" src="/img/mysite/global/spacer.gif" alt=" " width="150"></td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>

    <form action="/cgi-bin/perlfect/search/search.pl" method="get" name="Search" id="Search">
    <table cellpadding="0" cellspacing="4" border="0" bgcolor="b3b3b3">
    <!-- SEARCH START -->
    <tr valign="TOP">
    <td>
    <input type="hidden" name="p" value="1">
    <input type="hidden" name="lang" value="en">
    <input type="hidden" name="mode" value="all">
    <label for="q"><strong>Search site<br>
    </strong></label>
    <label for="q"> </label>
    <input type="text" name="q" size="20" value="Search Term " style="font-size:12px;

    font-family:arial,helvetica; width:140; border:none;" accesskey="S"></label>
    </td>
    </tr>
    <tr valign="TOP">
    <td><input type="image" src="/img/mysite/templates/search_grey.gif" alt="Search" value="Search" width="140"

    height="19" name="image"></td>
    </tr>
    <!-- SEARCH END -->
    <!-- PRINT START -->
    <tr>
    <td> <a href="javascript:void(self.print())"><img src="/img/mysite/templates/print_grey.gif" width="90"

    height="19" alt="Print this page" border="0"></a> </td>
    </tr>
    <!-- PRINT END -->
    </table>
    </form>
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </td>
    <td> &nbsp;&nbsp; </td>
    <td><table width="100%" border="0" cellpadding="0" cellspacing="4" id="maincontent">
    <tr>
    <td valign="top"><%=toPageHTML.HTML%></td>
    </tr>
    </table>
    </td>
    </tr>
    </table>

    <table id="footer" width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td><table border="0" cellpadding="0" cellspacing="4" class="eeeeee">
    <tr>
    <td class="footer" colspan="3" bgcolor="#003399"><img alt=" " src="/img/mysite/templates/spacer.gif" width="2"

    height="2"></td>
    </tr>
    <tr>
    <td class="footer">This page was last reviewed on: <%=toPageHTML.modified.shortFormat()%> </td>
    <td class="footer">&nbsp;</td>
    <td class="lastrev"><a href="#top">Back to TOP ^^</a></td>
    </tr>
    <tr>
    <td colspan="3" class="footer"><img height="2" src="/img/mysite/global/spacer.gif" alt=" " width="760"></td>
    </tr>
    </table></td>
    </tr>
    <tr>
    <td><table border="0" cellpadding="0" cellspacing="4">
    <tr>
    <td class="footer"><img height="2" src="/img/mysite/global/spacer.gif" alt=" " width="760"></td>
    </tr>
    <tr>
    <td class="footer"><div align="center"> <a href="/mysite/index.htm"><br>
    Home Page</a> - <a href="/mysite/privacy.htm">Privacy
    Statement</a> - <a href="/mysite/termsofuse.htm">Terms of use</a> - <a href="/mysite/equal.htm">Equal
    Opportunities</a>

    <br>
    <a href="/mysite/contact/index.htm">Contact My Site</a> - <a href="/mysite/help/search/index.htm">Search
    My Website</a> <br>
    <br>
    &copy; Site Copyright 2004 - </div></td>
    </tr>
    </table></td>
    </tr>
    </table>

    </body></html><%=""%>

    As you can see from the template it is full of loads of nested tables.
    Any help with the template file will be appreciated as i want to prove to the webmaster that the template can be driven using CSS and Stylesheets, getting rid of all the tables, nbsp and spacer.gifs from the template.

    I have highlighted the text that contains the ASP code dark orange.

    Thank You for your Help.

  2. #2
    SitePoint Wizard
    Join Date
    Oct 2001
    Posts
    2,686
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •