返回主站 关于网站 设为首页 加入收藏

最新网站制作教程

shopex4.8-模板制作教程（二）

   来源: shopex.cn 2009-06-02

原文：http://www.shopex.cn/bbs/read.php?tid-97303.html
在上一教程中，我们制作了好了大的框架。这时进入后台，进行可视化编辑。这时我们可以看到已经是这样的了：

如果点击浏览网站，我们可以看到当前代码产生的结果是这样的：

六。添加挂件

挂件的添加和修改时，可能会产生修改后无变化的情况，这是由于SHOPEX的缓存造成的，朋友们要随时清除缓存，并做保存。在以下教程中，我们不再针对这些内容做说明。具体的可以参考官方模板制作教程，我的这个教程只是对官方模板教程的细化，并做更通俗的表达。

1.写入放置挂件的DIV
我们先看头部，从设计图来看，我们要放入LOGO和主导航栏。于是我们在header.html文件里加入两个DIV。加入后的代码是这样的：

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=”http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <{header}>
  5. <link rel=”stylesheet” type=”text/css” href=”images/css.css” />
  6. </head>
  7. <body>
  8. <div id=”AllWrap”>
  9. <div id=”Top”>
  10. <div id=”logo”><{widgets id=”logo”}></div>
  11. <div id=”menu”><{widgets id=”menu”}></div>
  12. </div>

基中加入的是：
<div id=”logo”><{widgets id=”logo”}></div>
<div id=”menu”><{widgets id=”menu”}></div>

2.加入挂件
这时我们在后台加入LOGO和导航栏两个挂件，具体挂件的加载过程我就不细说了。
加载后，后台变成：

发布后，前台是这样的：

这时是错位的，这是因为我们还没有对这部分进行CSS定义。

3.针对添加的挂件加入CSS定义
首先我们使LOGO和MENU两个DIV能在一排里显示，所以对LOGO进行宽度定义并浮动；我们对MENU的宽度不做精确的宽度限制，让它能根据宽度做适当的伸缩，所以我们在index.css文件里做如下定义：

  1. #logo{ width:300px; float:left;}
  2. #menu{
  3. float:right;
  4. margin-top:20px;
  5. padding-right:10px;
  6. background:#f4f4f4;
  7. }

这样完成后，我们发现后台和前台分别变成如下样式：

这还真麻烦，单独做这样的定义还不行。我们还得对挂件内的内容做定义才能如我们所愿的正常展示出来。

[ 此帖被ucan在2009-05-30 14:03重新编辑 ]
附件： 倾城化妆品免费版.rar (194 K) 下载次数:30
«
»