注册通行证 用户名 密码
  • 文章投稿
  • 博客
  • 论坛
  • 设为首页
  • 加入收藏
jztop.com网络技术
  • 首页
  • | iT新闻
  • | 操作系统
  • | 组网建网
  • | 网络安全
  • | 程序开发
  • | 办公一族
  • | 工具软件
  • | 网页制作
  • | 多媒体制作
  • | 网吧技术
  • | 服务器
  • | 专题教程
Vista | 软件评测 | 系统备份 | 优化 | 进程 | 聊天 | 病毒 | Linux | 黑客 | 防火墙 | 数据库 | Web开发 | Java | Word | 游戏 | 32位开发 | 移动开发
当前位置:首页 > 网页制作 > Discuz!专区 内容正文:X-Space应用技巧:如何与论坛保持统一风格?

X-Space应用技巧:如何与论坛保持统一风格?

发布时间:2006-07-25 23:32:00 来源:友佳学院 网友评论 0 条

  与Discuz!论坛无缝融合是X-Space个人门户系统的特色之一,很多站长管理员为了方便用户浏览使用,加强用户的记忆,统一了论坛与个人门户的风格。比如,这个日光海岸( http://www.sunschina.com),他们的论坛与个人门户的背景、页头做了统一修饰,在访问的时候,就不至于造成在两个网站之间跳转的感觉。

  很多用户站长很羡慕这种统一的风格,却不知道该如何去做。我们就以“日光海岸”做参考,进行实例修改。( 提示:在更改之前请备份“supesite/templates/default”下所有文件)。

一:给X-Space首页的顶部加上自定义导航条。


1:这是X-Space安装后的默认首页。

图片1;


图片2;

2:用记事本或编辑器打开 “supesite/templates/default/header.html.php”文件,在“header.html.php”中的第18行之后加入如下代码“
<div align="right" style="background-color:#07b8ff;padding-bottom:5px; padding-top:5px; padding-right:17px;color:#FFFFFF">
    <table border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="11" height="22"><img src="http://www.sunschina.com/space/images/sunpp/sunpp_ban_bg1.gif"  align="absmiddle" /></td>
        <td bgcolor="#FFFFFF" style="padding-left:5px; padding-right:5px"><a href="/index.php">&raquo;日光海岸首页</a> | <a href="/space">个人空间</a> | <a href="/space/action/blog">日志</a> | <a href="/space/action/image">相册</a> | <a href="/bbs/school.php">学校</a> | <a href="http://www.sunschina.org" target="_blank">会员服务中心</a> | <a href="/bbs/index.php">论坛</a> </td>
        <td width="11" height="22"><img src="http://www.sunschina.com/space/images/sunpp/sunpp_ban_bg2.gif"  align="absmiddle" /></td>
      </tr>
    </table>
  </div>”

3:保存该文件,然后刷新X-Space首页。可以看到X-Space的首页风格已经发生变化,上部的导航条已经按照我们的设计加入进来。


二:给X-Space首页顶部外围加上自定义样式。

1:用记事本或编辑器打开 “supesite/templates/default/header.html.php”文件,在“header.html.php”中的第18行之后加入如下代码“
 <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#07b8ff">
  <tr>
    <td width="15">&nbsp;</td>
    <td align="center">
      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
    
        <tr>
          <td width="10%" height="20"  style="padding-left:5px"><img src="http://www.sunschina.com/space/images/sunpp/logo_new.gif"></td>
          <td width="90%" align="right" valign="top">&nbsp;</td>
        </tr>
      </table></td>
    <td width="15">&nbsp;</td>
  </tr>
</table>

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="30"><img src="http://www.sunschina.com/space/images/sunpp/indexleft.gif" width="30" height="60"></td>
    <td align=center background="http://www.sunschina.com/space/images/sunpp/indexbg.gif"><a href="index.php"></a>
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td align=left><table width="98%" border="0" align="center" cellpadding="2" cellspacing="0">
            <tr>
              <td align="center" valign="middle">
           </td>
            </tr>
         
          </table></td>
        </tr>
      </table>
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr></tr>
      </table>    </td>
    <td width="30"><img src="http://www.sunschina.com/space/images/sunpp/indexright.gif" width="30" height="60"></td>
  </tr>
</table>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="26" height="182" valign="top" background="http://www.sunschina.com/space/images/sunpp/leftbg.gif"><img src="http://www.sunschina.com/space/images/sunpp/left.gif" width="26" height="355"></td>
    <td bgcolor="#FFFFFF">
<table MAINTABLEBGCODE width="MAINTABLEWIDTH" cellpadding="MAINTABLESPACE" cellspacing="0" border="0" align="center">
<tr><td>”

2:保存该文件,然后刷新X-Space首页。
图片3;


三:为X-Space首页页面底部加上自定义代码

1:用记事本或编辑器打开 “supesite/templates/default/header.html.php”文件,在“header.html.php”中的第13行,标记上方添加外框封闭代码:“
</td></tr>
<tr><td style="padding: BORDERWIDTH">
<br /></td>
</tr></table>
</td>
    <td width="23" height="182" valign="top" background="http://www.sunschina.com/space/images/sunpp/rightbg.gif"><img src="http://www.sunschina.com/space/images/sunpp/right.gif" width="23" height="370"></td>
  </tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="26" height="76" background=" http://www.sunschina.com/space/images/sunpp/leftbg.gif">&nbsp;</td>
    <td align="center" bgcolor="#FFFFFF"><table width="850" border="0"  cellpadding="0" cellspacing="0" style="font-size: 11px; font-family: Tahoma, Arial">
            <tr>
              <td align="left"><img src="/img/linklogo.gif" width="88" height="31"  align="top"/>&nbsp;&nbsp;<a href="/bbs/rule.php?tid=1">关于我们</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="/bbs/rule.php?tid=2">免责声明</a><a href="thread-1524050-1-1.html"></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="/bbs/rule.php?tid=3">隐私政策</a><a href="rule.php?tid=1524050"></a><a href="thread-1524050-1-1.html"></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="/bbs/rule.php?tid=4">联系我们</a><a href="mailto: "></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="http://www.sunschina.org" target="_blank">会服中心</a>
  <br /></td>
              <td align="right" valign="top" class="footerlink"><a href="#top"><img src="http://www.sunschina.com/space/images/sunpp/gototop.gif" border="0" /></a></td>
            </tr>
            <tr>
              <td align="left" valign="bottom" style="font-size:11px; font-family:sans-serif;Arial, Helvetica">
    Powered by <a href="http://x-space.discuz.net" target="_blank"><font color="#7186B0"><strong>X-Space</strong></font></a>
        1.0      &copy; 2001-2006 <a href="http://www.comsenz.com" target="_blank">Comsenz Technology Ltd</a>
      <br />
      <font color="#0000FF">招商电话:+86.12345678900 客服热线:+86.12345678900 法律顾问:+86.12345678900</font></td>
              <td align="right" valign="bottom" style="font-size:11px; font-family:sans-serif;Arial, Helvetica">
                  &copy;2002 - 2006 <b>日光海岸 <a href="SunsChina.comhttp://www.sunschina.com">SunsChina.com</a></b> All Rights Reservsed <br /> <a target="_blank"  href="http://www.miibeian.gov.cn"><font color="#333333">鄂ICP备05005214号</font></a>
                  <script language="JavaScript" type="text/javascript" src="http://js.d.s35.51.la/1566.js"></script>
                  <script language='JavaScript' src='http://v2.cnzz.com/stat.php?id=48085&amp;web_id=48085&amp;show=pic' type="text/javascript" charset='gb2312'></script>
                <strong>Skin Designed by Danny</strong></td>
            </tr>
        </table>
</td>
    <td width="23" height="76" background=" http://www.sunschina.com/space/images/sunpp/rightbg.gif">&nbsp;</td>
  </tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" background="http://www.sunschina.com/space/images/sunpp/footbg.gif">
  <tr>
    <td width="40" height="31"><img src="http://www.sunschina.com/space/images/sunpp/footleft.gif" width="40" height="31" /></td>
    <td align="right" background=" ">http://www.sunschina.com/space/images/sunpp/cpimgup.gif">&nbsp;


</td>
    <td width="40" height="31"><img src="http://www.sunschina.com/space/images/sunpp/footright.gif" width="40" height="31" /></td>
  </tr>
</table>”

2:保存该文件,然后刷新X-Space首页,就可以看到修改后的首页。

图片4;

3:但是页面主体与左右两边的间距有些大了,造成了布局上的不美观。用记事本或编辑器打开“/supesite/css/main.css”,在第92行修改wrap的宽度为:“width: 850px; ”

4:然后保存该文件,刷新X-Space首页。至此,对X-Space首页的修改已经基本完成。

5:接下来是对“日志”、“资讯”、“相册”、“文件”等相关页面的风格统一化修改,修改方法与首页操作步骤相同。


总结

  风格统一化修改其实很简单,要修改页面头部和左边的风格,只需要改动对应的header模板即可,而对应的右边和底部的风格,则在footer模板里修改。

相关文章
  • 全新风格 Vista RC1版新界面曝光!(图)
  • 网站设计的思考之网站的风格和设计
  • 用Photoshop绘制自己像素风格的个性头像
  • 节省资源 Vista无缘Vector Glass风格
【评论】【收藏本文】【打印】【关闭】
上一篇文章:[视频]Discuz!使用系列:论坛管理员的安全设置
下一篇文章:Discuz!发起中国互联网社区发展状况调查
讨论区
查看
已有 0 位对此新闻感兴趣的网友发表了看法
匿名发表
注册通行证 登陆
图文阅读推荐
Windows平台IIS一键整合安装包EasyDiscuz! 5.0 for Windows
Windows平台IIS一键整合安装包EasyDiscuz! 5.0 for Windows
如何在自己的计算机上安装Discuz!论坛
如何在自己的计算机上安装Discuz!论坛
看图说话 从Discuz! 4.1升级到5.0
看图说话 从Discuz! 4.1升级到5.0
X-Space应用技巧:如何与论坛保持统一风格?
X-Space应用技巧:如何与论坛保持统一风格?
推荐阅讯
  • DISCUZ论坛的SEO基础建议
  • 如何在自己的计算机上安装Discuz!论坛
  • 一步步 跟我来学X-Spaces个人空间模板修改
  • X-Space 1.0正式版发布 从博客到个人门户
  • Windows平台IIS一键整合安装包EasyDiscuz!
  • 微软甲骨文集体转型 新形式下的软件发展
  • X-Space应用技巧:如何与论坛保持统一风格?
  • 五年磨一剑 Discuz!专注发展之路
  • X-Space使用技巧(2):X-Space"搬家"三步走
  • Windows版本Discuz!——EasyDiscuz!安装介绍
阅读排行
  • 1.为自己的个人空间设计个性模板
  • 2.一步步 跟我来学X-Spaces个人空间模板修改
  • 3.Discuz! 4.10论坛“傻瓜式”安装教程
  • 4.Discuz!安装技巧(2):论坛安装步骤详解
  • 5.Windows版本Discuz!——EasyDiscuz!安装介绍
  • 6.[视频]Discuz!安装系列:Discuz!4.1.0论坛安
  • 7.来!把我的Blog数据转移到X-Space里
  • 8.手把手学习模块设置 打造个性个人门户网站
  • 9.看图说话 从Discuz! 4.1升级到5.0
  • 10.Discuz! 5.0论坛常见问题解答
专题教程
  • 大话G游 专题:手机病毒揭密
  • ARP攻击防范与解决方案 路由故障处理手册
  • Picasa中文版_Picasa教程 专题:清除流氓软件
  • Firefox专题 seo搜索引擎优化专区
  • 重装Windows必知的事情 装机之必备软件大行动
病毒专杀栏
  • 杀毒软件反被病毒杀 连"救命"都不能喊
  • 金山ARP防火墙
  • 还原卡神话破灭“机器狗”病毒来势汹汹
  • cctv经济半小时:你的手机现在安全吗?
  • 新挂马方式开始流行 ARP挂马称雄局域网
  • 木马和病毒清除的通用解法
  • IP地址不再冲突 查找ARP攻击者元凶
  • 教你几招识别和防御Web网页木马
  • 分析:封杀BT只是暂时的止痛药
  • QQ爆危险漏洞,“QQ游戏邀请大盗”邀请你玩病
关于我们 | 诚聘英才 | 联系我们 | 版权声明 | 网站大事 | 网站地图 | 意见建议
CopyRight 2005-2007 Jztop.Com 版权所有 未经许可 请勿转载