您的位置：首页 > 其它

七课 head.htm模板制作(banner条和其它)

2016-03-21 10:44 309 查看

七课 head.htm模板制作(banner条和其它)

时间:2011-06-18 23:55来源:未知
作者:admin点击:

148 次

这节课我们来把head.htm模板里面剩下的其它部分做完。

添加Flash

我们这个网站放的Banner条是一个小Flash，所以也就不用什么排版了，因为Flash就是一个完整的Html元素，只要Flash的大小在设计的时候做好了就行了。这个就不多说了，直接上代码：
<object
id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1000"
height="220">
<param name="movie"
value="{dede:global.cfg_templets_skin/}/images/index.swf" />
<param
name="quality" value="high" />
<param name="wmode" value="opaque"
/>
<param name="swfversion" value="8.0.35.0" />
<param
name="expressinstall"
value="{dede:global.cfg_templets_skin/}/scripts/expressInstall.swf"
/>

<object
type="application/x-shockwave-flash"
data="{dede:global.cfg_templets_skin/}/images/index.swf" width="1000"
height="220">

<param name="quality"
value="high" />
<param name="wmode" value="opaque" />
<param
name="swfversion" value="8.0.35.0" />
<param name="expressinstall"
value="{dede:global.cfg_templets_skin/}/scripts/expressInstall.swf"
/>
<div>
</div>

</object>

</object>
<script
type="text/javascript">

</script>
效果如图1

图1

添加“给我发邮件”、“设为首页”、“加入收藏”

放好了Banner条，接着就是放“设为首页”、“加入收藏”、“发送邮件”这几个了。先看代码：
<div
class="toplink">
<img
src="{dede:global.cfg_templets_skin/}/images/home1.jpg"><a
onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('{dede:global.cfg_basehost/}');
return(false);" href="{dede:global.cfg_basehost/}" title="设为首页"
rel="nofollow">设为首页</a> <img
src="{dede:global.cfg_templets_skin/}/images/bookmark.jpg"><a
onclick="window.external.addFavorite('{dede:global.cfg_basehost/}','{dede:global.cfg_webname/}');
return(false);" rel="nofollow" href="{dede:global.cfg_basehost/}"
title="加入收藏">加入收藏</a> <img
src="{dede:global.cfg_templets_skin/}/images/mail.jpg"><a
href="mailto:{dede:global.cfg_adminemail/}" title="给我发邮箱"
rel="nofollow">发送邮件</a>
</div>
CSS代码如下：
.toplink{ position:relative; top:-290px; left:770px;
line-height:25px;}
.toplink img{ vertical-align:middle}
.toplink
a{padding-right:4px; padding-left:3px; font: 12px/22px Simsun;
color:#FFF}
.toplink a:hover{ text-decoration:underline;
color:#d1c968}
效果如下图2

图2

添加首页标题h1

最后就是放一个全站的h1标签了，如下：
<h1 class="headh1"><a
href="{dede:global.cfg_basehost/}" title="{dede:global.cfg_webname/}">柴油发电机组
燃气发电机组沼气发电机组发电机配件</a></h1>CSS代码如下：
*html
.headh1{top:-345px;}
.headh1{ position:relative; top:-360px; left:330px;
font-size:26px;}
.headh1 a{ color:#FFF}
我们来分析一个上面的CSS代码，首先是 *html .headh1{}
这个CSS是什么意思呢？原来这是为了IE6而写的Hack，也就是在用 *html
这个标识的时候，只有IE6才能识别得了这个标识，也就是只有在IE6的浏览器里面才有效。如果不要这个的话，大家从图3就可以看出有什么问题了。

图3
从上图大家也应该看出一个问题了，就是左边的Logo。在IE6下，Logo的背景色变成了灰色，这是为什么呢？原来，IE6对PNG格式的图片不兼容，因为我们这个网站的Logo的背景色是透明的，所以IE6就直接给了它一个默认的灰色（在这里鄙视一下它）。为了解决这个问题，我们就要另外地加载一个Hack文件，大家在百度上面搜索一下“IE6兼容PNG”也就找得到了。
在head.htm的最顶处定上如下代码：

至于“DD_belatedPNG.js”这个文件，大家可以到网上下载。做完这些“多余”的功夫，再更新一下首页，然后在IE6浏览上刷新一下，正常了……

图4 完成图
到这里，网站的head.htm算是做好了，在下一节课，我们就会转到index.htm首页模板的制作。如果大家看了本教程还有什么疑问的话，可以到我们的论坛发问bbs.baitong.cc/forum.php或者把问题发到我的邮箱marslang@baitong.cc，注明“网站建设问题”谢绝垃圾广告邮件！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航