Some thoughts.
Simple footer.
If you make your footer as a separate design, avoid any rollovers.
To do so, remove any "mouseover" and "mousedown" layers from your design and make sure you do not use ant pop-up layers.
The result shoud be that in the exported _files folder there will be no roe.js file. If it is still exported then you have some rollovers or pop-ups.
The HTML produced this way will have minimum conflicts with your JS rich header design so less manual editing is required.
Prepare header HTML.
First step would be to strip all the code that we don't need. I will show it on simple example HTML produced by Xtreme. Your header HTML will contain more tags in the middle but you will not touch them. The parts to delete are the same so you may find them at the beginning and at the end of your page too.
So here's the example:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0020)http://www.xara.com/ -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7"/>
<meta name="XAR pngs" content="1"/>
<title>header</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251"/>
<meta name="Generator" content="Xara HTML filter v.2.2.0.674"/>
<script type="text/javascript" src="header_htm_files/roe.js"></script>
<link rel="stylesheet" type="text/css" href="header_htm_files/default.css" />
</head>
<body style="">
<!--[if IE]><div class="xr_ap" id="xr_xr" style="width: 794px; height: 1123px; top:0px; left:50%;
margin-left: -397px; clip: rect(0px 794px 1123px 0px);"><![endif]-->
<!--[if !IE]>--><div class="xr_ap" id="xr_xr" style="width: 794px; height: 1123px; top:0px; left:50%;
margin-left: -397px; clip: rect(0px, 794px, 1123px, 0px);"><!--<![endif]-->
<script type="text/javascript">var xr_xr=document.getElementById("xr_xr")</script>
<img class="xr_ap" src="header_htm_files/0.png" alt="" style="left: 1px; top: -2px; width: 792px; height: 216px;"/>
<div style="left: 300px; width: 177px; position: absolute; font-size: 10pt; font-family: Arial; text-align: left; top: 73px;">
<div style="">
<div class="xr_tl" style="left: 0px; top: -13px;">SEPARATOR</div>
</div>
</div>
<div id="xr_xo0" class="xr_ap" style="left: 0; top: 0; width: 794px; height: 100px; visibility: hidden;">
<a href="" onclick="return(false);">
</a>
</div>
<div id="xr_xd0"></div>
</div>
<!--[if lt IE 7]><script type="text/javascript" src="header_htm_files/png.js"></script><![endif]-->
<script type="text/javascript">xr_aeh()</script>
</body>
</html>
Remove all the RED fragments as highlighted in this code. You woun't need them.
The BLUE part is the actual content of your header page. So it will differ from this example. Nevertheless, you can indetify it as it starts immediately after this string:
Code:
<script type="text/javascript">var xr_xr=document.getElementById("xr_xr")</script>
And it ends right before these two strings:
Code:
</div>
<!--[if lt IE 7]><script type="text/javascript" src="header_htm_files/png.js"></script><![endif]-->
.
The GREEN part will be used later.
to be continued...
Bookmarks