文档库 最新最全的文档下载
当前位置:文档库 › 锐奇使用手册

锐奇使用手册

锐奇使用手册
锐奇使用手册

界面管理

制作模板界面的注意事项?

1、制作任意一个模板前,都要先新建一个tp文件夹(比如在桌面新建tp文件夹),

然后在tp文件夹里再新建一个图片文件夹,把模板里用到的图片,全部都放在这个

图片文件夹里。(这样一来,在dreamweaver插入图片时,就需要从tp文件夹里,

双击图片文件夹,再选中图片插入即可。例如图片的路径是tp/newsbox01_box/

123.jpg,路径如果不对,图片将不能正常显示。)

2、制作模板第一步,即在dreamweaver新建一个空白htm文件,然后把代码区里默

认的代码要全部删除,再将此网页文件保存好,此网页文件必须与tp文件夹放在同

一目录,比如都放在桌面上,然后再开始制作模板。

3、各个模板的命名规则异同之处:

共同点:所有模板的图片文件名和网页文件名必须相同, 比如图片文件夹名称是newsbox01_box,网页文件是newsbox01_box.htm(注意:网页文件一定要用htm

格式,不能用html格式)

区别:引导页模板要带_boot后缀,如hhymb01_boot 主页模板不需要加任何后缀,

如hhymb01 除此之外,其它的模板文件名都要带_box

例如锐奇公司制作的模板文件命名规则:

新闻评论界面newsbox01_box

为了查找方便,锐奇公司的新闻评论模板文件名都以newsbox开头,接着是数

字和_box您也可按这个规则来命名,为了防止您做的模板和锐奇公司的同名,建

议您将数字换成客户名称的英文简称,比如newsbox_wy_box其它的模板建议您

也以这种规则命名

信息反馈界面:ask001_box

博客文章界面:blogshow001_box/

博客主界面:blogshow001_box

产品列表主界面:list001_box

产品展示界面:wareshow001_box

网上商城主界面:shop001_box

商品展示界面:shopshow001_box

购物车界面:cart001_box

会员中心界面:member001_box

留言板界面:guestbook001_box

新闻列表主界面:newslist01_box

新闻内容界面:newsshow001_box

新闻评论界面:newscomment001_box

主页界面:hhymb

引导页界面:hhymb_boot

4、所有的模板里,凡是需要插入带BEGIN和END的标注语句的,这些标注语句都必

须单独放在一行,而且缺一不可,否则模板无法使用。

5、除了带BEGIN和END的标注语句外,所有模板的参数,即用{}括起来的参数,可以按建站要求相应地删除,但至少要保留一个参数,否则模板无法使用。

例一:底部区不想显示“网站管理”四个字时,就可以将模板里的底部区参数{COUNNECT}删除,然后直接在模板里输入底部区的内容。

例二:想制作个性化的FLASH菜单时,您也可以将{MENU}参数删除,然后将

放在最后一个参数的后面,注

意要单独放在一行。最后直接插入已制作好的FLASH菜单即可,注意每个菜单名要做

好链接。

例三:网站的所有栏目都不想显示边侧模块时,您可以将边侧模块参数所在的列

删除,然后将放在最后一个参

数的后面。

备注:某些参数删除后,在网站管理后台相应位置输入的内容,就不会显示在网站

上的。

6、制作模板时,插入的表格,对齐方式都要统一,比如全部设为居中对齐或者右对

齐、左对齐。

7、模板里插入的FLASH,必须设为透明的!具体方法是:选中FLASH,在属性面板里

单击“参数”按钮,在弹出的对话框里“参数”填wmode“值”填transparent最

后确定即可。假设FLASH不设为透明的,网站里的下拉菜单、漂浮广告经过FLASH时,

会被FLASH挡住的。

8、背景图必须在一个独立的单元格或者表格里。不能放在合并单元格之后所得的表

格里。

9、把网页的所有文件名统一成小写

10、超级链接要使用相对路径,不要用绝对路径,也不要用中文文件名。

11、模板里边侧所在的表格,不可以设为左对齐或者右对齐。要么设为居中对齐,

要么用默认的。否则三区的功能列表只能显示一个。

12、在单元格里再插入表格时,这个表格的垂直对齐方式要设为居顶对齐

13、{MENU}最好不要放在模板的最后一个表格里,因为放在最后,下拉菜单就不能

显示了。如果一定要放在最后,就需要在{MENU}参数所在表格的后面,再插入一个

空白的表格。下拉菜单有多高,这个空白表格就设多高就行。

界面管理

如何添加删除模板模板界面?

模板制作完成后,要将模板的网页文件即htm文件,复制到tp文件夹里。接着用ftp工

具登录到服务器的根目录,从本地电脑里选择tp文件夹,上传至根目录。最后进入软

件的超级后台,点击相应的模板目录,填好添加模板的表格即可。

添加:您需要按以下步骤添加模板界面:

一、先制作好模板界面。

二、用FTP软件上传至网站tp目录下。

三、在管理员平台的相应的模板界面管理添写模板界面信息并上传。(以下是添加主页模板为例:如下图)

模板名称:您可以随便取,比如叫金色年华等等,只是方便记忆。

模板目录名:就是您制作的时候网页和目录取的名字。

模板类别:分公共私有两种,公共的模板所有用户均可查看和使用,私有模板只能授权的某一个用户查看和使用,其它用户看都无法看到。私有模板一般适用于给用户订制模板的时候使用,因为订制的模板可能再有某一个企业特定的内容和标志,其它用户用不上,所以订为私有比较合适。

模板描述:就是模板简要的介绍,一般填写这个模板适用于哪个行业呀,模板的寓意等。

删除:把欲删除的模板打上勾,再点击删除,即可把此模板在数据库的记录清除,然后系统会提示您是否将网页和目录也一并清除,点击确定将会把网页和目录一起删除。点后退按钮则只删除列表中的模板记录,不会删除网页和目录。

值得注意的是:正在被用户使用的模板是不能删除的。

界面管理

如何制作主模板界面?

本例效果图如下:(红色标记处是主页模板需要用到的参数)

主页模板所有

的参数如下:(注意:参数都是以大括号为准,并且字母必须是大写)。

{TITLE}:网页标题

{LOGO}:网站顶部logo区

{LANGUAGE}:网站语言

{MENU}:网站栏目

网站栏目的标注语句

{BODY}:网站

主体内容

{COUNNECT}:

网站底部

{COUNTER}:计

数器

{BOX_TITLE}、

{BOX_BODY}:

网站边侧模块

row_box -->网站边侧模块的标注语句

另外还需要在网页头部代码区里面添加如下代码:(这两个句代码里面包含的参数

是搜索引擎优化参数)。

:是指网站描述

content="{KEYWORDS}" name="keywords">:是指网站关键字

下面介绍一下各个参数的作用的添加方法

{TITLE}参数:网页标题参数,用于显示在网站管理后台输入的网站名称。

一个网页的TITLE,网页标题参数,用于显示在网站管理后台输入的网站名称。一个网页的TITLE,通常显示在IE的蓝色标题栏上(如右图标记处)

设置方法是:在dreamweaver编辑器窗口的上方,有一个标题选项框,如图所示:在"标题"项输入{TITLE}即可

{LANGUAGE}参数:设置网站的语言。

Dreamweaver软件的编辑视图窗口有三种状态,分别是:代码、拆分、设计。如图:

操作步骤是:单击“拆分”安钮,在前面几行代码里,,找到gb2312这几个字符,将gb2312改成{LANGUAGE}即可

备注:一般我们制作网页模板时添加表格、图片、文字相关一些资料都是在设计窗口中就可以实现,有时候需要添加一些特殊的代码就需要到代码或者拆分视图窗口;例如制作锐奇模板时,添加{LANGUAGE}网站语言、栏目与边侧的标注语句时就会用到。

{LOGO}参数:用于显示logo文字、logo图片或者动画等内容的,一般放在网页的顶部。

设置方法:在需要放logo的表格里,先插入顶部的背景色或者背景图,然后输入{LOGO}参数即可。

{MENU}参数:设置主栏目菜单的参数。

效果是在网站管理后台,输入各个主栏目名称后,此参数会自动获取各栏目名称显示在网页上。

注意事项:

1、{MENU}不能是单独放在一个1行1列的表格里面,所以您在制作模板时,需要先插入1行2列或者2行1列的表格或其它行列数,原则就是行数和列数不能同时为1,否则会出错)例如插入2行1列的表格,上面一行放{LOGO}参数,下面一行放{MENU}参数。

2、添加{MENU}参数后,还需要切换到“代码”区。在{MENU}的前后面加上这两行标注语句。

例如:

{MENU}

注意必须单独放在一行里显示,不能跟其它代码放在同一行里面。这两行标注语句的作用是复制第一个栏目的样式,两行语句缺一不可。

以{LOGO}和{MENU}放在同一个表格为例,具体方法如下:

第1步:把光标放在{LOGO}参数所在表格的第二行, 先填充好栏目的背景图片或者颜色,然后输入{MENU},为了菜单的美观可以在{MENU}后面插入竖线或者图片作为栏目之间的间隔。

第2步:切换到“拆分”区(这时编辑器窗口就会发生变化,上面一部分是代码区,下面一部分是设计区,如右图:

在设计区把光标放在{MENU}后面,然后代码区的光标也会自动移到{MENU}参数的后面,如下图所示:

第3步:把光标放在代码窗口里{MENU}前第一个标记后面,按回车,然后输入

第4步:把光标放在{MENU}后第一个标记前面,按回车,然后输入如右边效果图:

{BODY}参数:这是正文区的内容参数。

制作方法:正文一般和边侧模块放在一个1行2列的表格里面的。所以我们就插入一个1行2列的表格:一个单元格放正文内容的参数,另一个单元格放边侧模块的参数,单元格的宽度大小和位置不是固定的,可根据需求排版。

以左边放正文内容,右边放边侧为例:在左边单元格输入{BODY},如下图:

{BOX_TITLE}、{BOX_BODY}参数:分别是网站边侧模块标题、模块内容的参数(边侧的模块包括网站公告、网站管理、会员登陆、子菜单栏目、站内搜索、问卷调查、友情链接等相关的内容)。

其中{BOX_TITLE}是设置边侧模块的标题,{BOX_BODY}是设置边侧模块里面的内容。

注意事项:添加{BOX_TITLE}、{BOX_BODY}参数除了直接在表格里面添加好这个参

数,还需要在代码里添加好两句标注语句。语句的形式如下:

{BOX_TITLE} {BOX_BODY}

其中必须单独放在一行里,不能和其它代码放在一行。这两行标注语句的作用就是复制第一个边侧模块的表格样式,两行语句缺一不可。

具体方法如下:

第1步:把光标放在{BODY}参数所在表格的另外一个单元格里。插入一个三行一列的表格,分别先给第一行和第二行填充好相应的背景图片和颜色,然后在第一行里输入边侧模块标题参数{BOX_TITLE},在第二行里面输入模块内容参数{BOX_BODY}。(第三行什么也不放,有了这个空白行,边侧模块与模块之间就会有一个间距)如图所示:第2步:单击编辑器上方的“拆分”按钮,然后选中添加好{BOX_TITLE}和{BOX_BODY}所在的整个三行一列的表格,这时代码视频的窗口就会有变化了,选中部分就是边侧模块表格

的代码,如下图。

第3步:把光标放在被选中代码的最前面,也就是

的前面,敲回车键,输入标注开始语言第4步:接着重复第2步,先选中边侧模块的表格,把光标放在被选中代码的最后面,也就是</table>)的后面,敲回车

键,输入标注结束语句:。最终代码里的效果图如下图:

第5步:单击编辑器窗口的上方的“设计”按钮,回到编辑窗口就可以了。

{COUNTER}参数:计数器的参数

设置方法:插入一个1行1列的表格,然后在单元格里输入{COUNTER}参数即可。

{CONNECT}:网站底部的参数,一般用于放置联系方式、证书编号等内容。

设置方法:插入一个1行1列的表格,然后在单元格里输入{CONNECT}参数即可。

添加搜索引擎优化参数的方法:

打开需要制作模板的时页面,点击编辑器窗口上方的“拆分”按钮,然后把光标移到上面的代码窗口的最上面,在如下两句代码(也就是下面和上面敲回车键空出两行)

无标题文档

中间插入我们需要添加的搜索引擎代码:

添加好代码后效果如下:

无标题文档

然后点击编辑器窗口上方的“设计”按钮,回到设计窗口。

参数添加设置完成后,模板还是没有完成,接着还需要添加样式。如果没有样式的话,在网民浏览网页时,根据IE浏览器的“查看/文字大小”菜单里不同的设置,网页的样式就会发生很大的变化,比如网页文字大小不一、网页变形等。

我们先来介绍一下主页的样式表:

设置整个网页的边框背景样式是:body

一区里面默认引用的样式是:td

LOGO区引用的样式是:.logo

网页正文里里面标题的样式是:th

MENU导航条引用的样式是:.menu

三区子菜单引用的样式是:.menuson

底部区引用的样式是:.foot

其中,每个文字样式除了一个默认的状态之外,另外还有四个链接状态.

分别是:

a:link:文字做好链接的状态(没有访问过之前的样式)

a:visited:点击过后的状态(访问过后的链接样式)

a:hover:鼠标移上去的状态(访问没有点击时的样式)

a:active:鼠标点击时的状态(正当访问时鼠标点击下去时的样式)

在没有特殊的效果的时候,一般我们把a:link a:visited a:active这状态的颜色或字体设为一致的.只修改鼠标移上去的a:hovert的颜色或字体.

另外就是关于菜单样式里面的特殊效果:(比如当前浏览的栏目,它的栏目名称的颜色和其它栏目的不同)方法就是在创建菜单样式表的时候,另外再增加四个链接

状态

a.menunow:link

a.menunow:visited

a.menunow:hover

a.menunow:active

添加CSS样式的方法,我们现在的样式是使用外部样式,方法如下:

1、首先在dreamweaver里面新建一个style.css文件,然后把下面这些代码全部复

制进去,保存在模板的图片文件夹里面。

body {margin: 0px; background-color: #FFFFFF; background-attachment: fixed;

background-image: url(bg.jpg); background-repeat: repeat-x;

background-position: top;}

.logo {font-size: 24px; font-weight: bold; color: #000000;}

th {font-size: 16px; color: #999999; text-decoration: none; letter-spacing: 5px;}

td{font-size: 12px;color: #000000;}

a:link {font-size: 12px;color: #000000;text-decoration: none; }

a:visited {font-size: 12px; color: #000000; text-decoration: none; }

a:hover {color: #FF6600; text-decoration: underline; font-size: 12px; }

a:active {font-size: 12px; color: #000000; text-decoration: none;}

.menu {font-size: 12px; bold; color: #FFFFFF; text-decoration: none; }

.menu a:link {font-size: 12px; color: #FFFFFF; text-decoration: none; }

.menu a:visited {font-size: 12px; color: #FFFFFF; text-decoration: none;}

.menu a:hover {font-size: 12px; color: #000000; text-decoration: underline; }

.menu a:active {font-size: 12px; color: #FFFFFF; text-decoration: none;}

a.menunow:link {font-size: 12px; color: #000000; text-decoration: none; }

a.menunow:visited {color: #000000; text-decoration: none; font-size: 12px; }

a.menunow:hover {font-size: 12px; color: #FFFFFF; text-decoration: underline; }

a.menunow:active {font-size: 12px; color: #000000; text-decoration: none; }

.menuson {font-size: 12px; color: #000000; text-decoration: none;}

.menuson a:link {font-size: 12px; color: #000000; text-decoration: none; }

.menuson a:visited {font-size: 12px; color: #000000; text-decoration: none; }

.menuson a:hover {font-size: 12px; color: #FF6600; text-decoration: underline;}

.menuson a:active {font-size: 12px; color: #000000; text-decoration: none;}

a.menusonnow:link {font-size: 12px; color: #000000; text-decoration: none; }

a.menusonnow:visited {color: #000000; text-decoration: none; font-size: 12px;}

a.menusonnow:hover {font-size: 12px; color: #FF6600; text-decoration: underline;}

a.menusonnow:active {font-size: 12px; color: #000000; text-decoration: none;}

.foot {font-size: 12px; color: #999999; text-decoration: none;}

.foot a:link {font-size: 12px; color: #999999; text-decoration: none;}

.foot a:visited {font-size: 12px; color: #999999; text-decoration: none;}

.foot a:hover {font-size: 12px; color: #FF9900; text-decoration: underline;}

.foot a:active {font-size: 12px; color: #999999; text-decoration: none;}

您可以根据自己的模板需要更改每个样式里面的颜色、文字大小等相关设置,其中font-szie是字体大小color是字体颜色background-color是背景颜色text-decoration是设置超链接有没有下划线,none代表没有下划线underline代表有下划线

2、打开我们首先做的那个模板页面,在dreamweaver窗口右边我们会看到有一个样式的面板(如果没有看到,可以点击菜单栏上面的“窗口/CSS样式”把面板调出来)面板如右图:

再点击红色标记处的“附加样表”按钮。会弹出如下对话框:

点击红色标记“浏览”按钮,选择刚做好保存在图片文件夹里面的style.css,接着在添加为选项里选择“导入”项,点击“确定”即可回到编辑窗口。这时候我们可以看到样式的面板会有变化如右面:样式文字下面多了一个“+style.css”,点击“+”号图标还可以展开下面的样式列表。

3、然后给{LOGO}、{COUNTER}、{CONNECT}等底部区的参数引用相应的样式。

具体操作步骤是:选中参数如{LOGO},然后点击dreamweaver窗口最下面的属性面板,在“样式“下拉菜单里(下图红色标记

处)选中此参数相对应的样式名即可。每个参数都要按这个步骤去选择自己的样式。

参数添加好后,为了美观,可以给某个单元格或者表格加上背景图或颜色。整个主页模板就制作完成了。

界面管理

如何制作新闻列表界面?

本例效果图如下:(红色标记处是引导页模板需要用到的参)

新闻列表界面所有的参数作用和添加方法如下:

{MENUNAME}参数:新闻系统的栏目名称

设置方法:插入一个1行1列的表格(下称表格A),直接在单元格里添加{MENUNAME}新闻栏目标题参数即可。

{NEWS_PAGE}参数:统计新闻的记录,页码翻页

设置方法:在表格A的下面再插入一个1行1列的表格(下称表格B),直接在表格B里添加{NEWS_PAGE}新闻栏目参数即可。

{NEWS_TITLE}参数:新闻的标题

说明:在添加这个新闻标题参数后,还要记得在代码区里加上新闻列表的标注语句;另外新闻标题参数添加好之后,还要设置超链接,超链接就填{NEWS_URL}这个链接参数,因为我们发表每一条新闻,在首页显示的都只是一个标题,需要点击新闻标题才会链接到新闻的详细页面,这个链接参数{NEWS_URL}就起到自动读取新闻详细页面的功能。)

设置方法:

1、在表格B的下面再插入一个2行1列的表格(下称表格C),在表格C的第一行单元格里输入{NEWS_TITLE}新闻标题参数,然后在属性面板的“链接”选项文本框里输入{NEWS_URL}链接参数。

2、在表格C的第二行里面插入一张分割线图片(方法:点"插入"/"图像")。

3、在代码区加上标记。这对标

记的作用就是:

具体步骤是:

第一步:选中表格C,切换到"拆分"区(即点击编辑器窗口上方的“拆分”按钮)

第二步:把光标放在被选中代码的第一个

前面,按回车键,在空白行里输入。

第三步:切换到"设计区",再重复第一步,然后把光标放在被选中的代码的最后一个

后面,按回车键,在空白行里输入。

最终效果如右图:

{NEWS_DATE}参数:新闻发布日期

设置方法:在新闻标题参数{NEWS_PAGE}后面,敲一下空格,然后输入新闻发布日期参数{NEWS_DATE}即可。这样每条新闻标题后面就会有个新闻发布日期了。

说明:因为新闻的记录可能会很多,为了方便网民查看翻页项,我们可以在表格C的后面,再插入一个1行1列的表格D,然后添加{NEWS_PAGE}新闻栏目参数,这样在新闻标题页的上面和下面都会出来翻页功能了。如果您觉得没必要有两个翻页功能,也可以省去此步.

另外,参数添加好之后,为了美观,可以在每个参数前再插入一个小图标,给某个单元格或者表格加上背景图或者背景色,也可以先加好背景图再添加参数,此步省略。

至此新闻列表界面我们就制作完成了。

界面管理

如何制作新闻内容界面?

本例效果图如下:(红色标记处是引导页模板需要用到的参)

新闻内容界面所有的参数作用和添加方法如下:

{NEWS_TITLE}参数:新闻标题

设置方法:插入一个1行1列的表格(下称表格A),直接在单元格里添加{NEWS_TITLE}新闻栏目参数即可。

{NEWS_DATE}参数:新闻发布的日期

设置方法:在表格A的下面,再插入一个1行1列的表格(下称表格B),然后在表格B里添加{NEWS_DATE}新闻发布日期参数即可。

{NEWS_BODY}参数:新闻的详细内容

设置方法:在表格B的下面,再插入一个2行1列的表格(下称表格C),直接在表格C的第一行单元格里添加{NEWS_BODY}新闻详细内容参数即可。

{NEWS_TOOLS}参数:文章的评论,打印、关闭选项

设置方法:在表格C第二行的单元格里添加{NEWS_TOOLS}参数,对齐方式为“右对齐”。

{ABOUT_TITLE}参数:其它相关新闻标题栏

设置方法:在表格C的下面,再插入一个2行1列的表格(下称表格D),直接在表格D的第一行单元格里添加{ABOUT_TITLE}其它相关新闻标题栏。

{ABOUT_BODY}参数:关于其它的相关新闻

设置方法:在上面的表格D的第二行单元格里添加{ABOUT_BODY}参数。

参数添加好之后,为了美观,可以在每个参数前再插入一个小图标,给某个单元格或者表格加上背景图或者背景色,也可以先加好背景图再添加参数,此步省略。

整个新闻列表界面我们就制作完成.

界面管理

如何制作新闻评论界面?本例效果图如下:(红色标记处是引导页模板需要用到的参)

新闻评论界面所有的参数作用和添加方法如下:

{NEWS_COMMENT}参数:新闻评论

设置方法:插入一个三行一列的表格(下称表格A),直接在第一行的单元格里添加{NEWS_COMMENT}新闻评论参数。

{NEWS_TITLE}参数:这是被评论的新闻标题

设置方法:直接在 {NEWS_COMMENT}新闻评论参数后面敲一下空格,然后输入“ {NEWS_TITLE}”此参数即可。

说明:评论者姓名、评论日期和评论内容的参数必须放在同一个表格里面,而且表格的前后面分别要添加。所以我们首先应该在前面插入的表格A里添加一个小表格,然后把这三个参数添加到小表格里面。

具体设置方法如下:

{COMMENT_NAME}参数:评论者姓名(即发布评论的人)

第一步:在前面插入的表格A的第二行里插入一个3行1列的表格(下称表格B),然后把光标放在表格B的第一行里面,点击属于面板上的“拆分单元格”按钮,这样表格B的第一行就被拆分两列了。

第二步:在表格B的左列里添加好评论者姓名参数,即{COMMENT_NAME}。

{COMMENT_DAYTIME}参数:评论日期

设置方法:在表格B的右列里添加{COMMENT_DAYTIME}即可。

{COMMENT_BODY}参数:评论的内容

设置方法:在前面添加的表格B的第二行里输入{COMMENT_BODY}即可。

三个参数添加完毕后,再按以下步骤操作:

1、在表格B的第三行里插入水平线、分割线、图片之类的(目的是评论与评论之间有个间隔,便于浏览)。

2、选中表格B,然后点击编辑器的“拆分”按钮,代码视图里以蓝底显示的代码就是表格B的代码。

3、把光标放在被选中代码的最前面,也就是

的前面,敲回车键,在空白行里输入开始标注语句

4、重复第2步,再次选中表格B,把光标放在被选中代码的最后面,也就是

的后面,敲回车键,在空白行里输入结束标注语句至此,表格B已按要求制作完毕。

{COMMENT_PAGE}参数:评论记录,翻页选项

设置方法:在表格A的第三行里面输入{COMMENT_PAGE}参数即可。

{NEWS_WRITE}参数:参数:发表评论

设置方法:在表格A的下面,再插入一个2行1列的表格(简称表格C),然后表格C的第一行里输入{NEWS_WRITE}参数即可。

{NEWS_GUESTBOOK}参数:发表评论的表单

设置方法:在表格C的第二行里输入{NEWS_GUESTBOOK}参数即可。

所有的参数添加好之后,为了美观,可以在每个参数前再插入一个小图标,给某个单元格或者表格加上背景图或者背景色,也可以先加好背景图再添加参数,此步省略。

如何制作产品列表主界面?

本例效果图如下:(用{}括起来的是产品列表主界面需要用到的参数)

产品列表界面的参数作用和添加方法如下:

{LIST_TITLE}参数:产品列表的栏目名称

设置方法:插入一个2行1列的表格(下称表格A),直接在第一行的单元格里添加{LIST_TITLE}参数。

{LIST_PHOTO}参数:产品图片

设置方法:

第一步:在表格A的第二行再插入一个1行1列的表格(下称表格B)。

第二步:在表格B再插入一个2行1列的表格(下称表格C),表格的宽度设为98%,在表格C的第一行单元格输入{LIST_PHOTO}产品图片参数,在属性面板里设置这个单元格的高度设为“120”像素,水平对齐方式为“居中”对齐。

{LIST_NAME}参数:产品名称

设置方法:1、在表格C第二行的单元格里输入{LIST_NAME}产品名称参数,水平对齐方式为“居中”对齐。

{LIST_PAGE}参数:产品记录、翻页项

设置方法:插入一个1行1列的表格,直接在这行的单元格里输入{LIST_PAGE}产品记录、翻页项参数。

所有参数添加完毕之后,就要加以下三对标注语句。分别是

A、作用:复制列.制作模板时,我们只做了第一个产品的样式,其它产品的样式是不用全部都制作的,而是用这对标注语句来自动制作,并自动排列整齐.因为一行里放几个产品的,需要几列来放,所以就要复制列。每当用户在网站管理后台添加一个产品时,这对语句就会自动复制(或者叫添加)一列单元格,用于显示新添加的产品。

B、

作用:复制行。产品太多时一行就放不下,这时就要分多行显示了,所以也要用这对语句自动复制行,自动排版。

C、作用:复制表格。效果图如右下:

添加这三对标注语句的详细方法如下:

A、首先添加

操作步骤如下:

第一步:在“设计”区选中表格C,然后单击“拆分”。

第二步:在选中代码最前面,从上往下找到

第一个,把光标放在前,按回车键,在空白行输入开始标注语句

第三步:重复第一步,然后在选中的代码最后面,从下往上找到第一个,把光标放在后,按回车键,在空白行输入结束标注语句

说明:因为这对标记的作用是复制列,所以要分别放在这个表格所在的单元格的列标记的前后面,其中单元格的列的开始标记是,所以把开始标记放在的前面。而列的结束语句是,所以要把结束标记放在的后面。这就可以复制一列单元格了。

B、添加

第一步:在“设计”区选中表格C,然后单击“拆分”。

第二步:在选中代码最前面,从上往下找到第一个,把光标放在前,按回车键,在空白行输入开始标注语句

第三步:重复第一步,然后在选中的代码最后面,从下往上找到第一个,把光标放在后,按回车键,在空白行输入结束标注语句

C、添加

第一步:在“设计”区选中表格B,然后单击“拆分”。

第二步:把光标放在选中的代码最前面,按回车键,在空白行里输入

第三步:重复第一步,把光标放在选中的代码最后面,按回车键,在空白行里输入

备注:参数添加好之后,为了美观,可以在每个参数前再插入一个小图标,给某个单元格或者表格加上背景图或者背景色,也可以先加好背景图再添加参数,此步省略。至此,产品列表界面就制作完毕了!

如何制作产品展示界面?

本例效果图如下:(用{}括起来的是产品展示界面需要用到的参数)

产品展示界面的参数作用和添加方法如下:

{WARE_TITLE}参数:产品列表栏目

设置方法:插入一个5行1列的表(下称表格A),直接在第一行的单元格里添加{WARE_TITLE}产品列表栏目参数。

{WARE_PHOTO}参数:产品图片

设置方法:

1、把光标放在表格A的第二行,再插入一个1行2列的表格(下称表格B),把表格B的宽度为96%,居中对齐。

2、在表格B的第一列(即左列)单元格里输入{WARE_PHOTO}参数,水平对齐方式为:居中,单元格宽度设为:150px,高度为:120px

{WARE_NAME}参数:产品名称

设置方法:

1、在表格B的第二列(即右列)再插入一个2行1列的表格(下称表格C).将表格C的宽度为98%,居中对齐。

2、在表格C的第一行单元格输入{WARE_NAME}参数。

{WARE_SHORTSHOW}参数:产品的简要介绍

设置方法:在表格C第二行输入{WARE_SHORTSHOW}参数。

{WARE_BODY_TITLE}参数:产品详情标题

设置方法:在表格A的第三行插入一个2行1列的表格(下称表格D).然后在表格D的第一行单元格里输入{WARE_BODY_TITLE}参数。

{WARE_MOREBODY}参数:产品详情详细内容

设置方法:在表格D的第二行单元格里输入{WARE_MOREBODY}参数。

{WARE_ABOUT}参数:相关产品标题

设置方法:在表格A的第四行插入一个2行1列的表格(下称表格E)。然后在表格E的第一行单元格里输入{WARE_ABOUT}参数。

{WARE_ABOUTBODY}参数:相关产品的内容

设置方法:在表格E的第二行单元格里输入{WARE_ABOUTBODY}参数。

{WARE_COMMENT}参数:评论

设置方法:在表格A的第五行插入一个2行1列的表格(下称表格F)。然后在表格F的第一行单元格里输入{WARE_COMMENT}参数。

{WARE_COMMENTBODY}参数:评论的内容

设置方法:在表格F的第二行单元格里输入{WARE_COMMENTBODY}参数。

备注:参数添加好之后,为了美观,可以在每个参数前再插入一个小图标给某个单元格或者表格加上背景图或者背景色,也可以先加好背景图再添加参数,此步省略。

如何制作横排商品的商城界面?

商品分几行几列显示时,商城主界面制作方法介绍

本例效果图如下:(用{}括起来的是商城主界面需要用到的参数)

商城列表界面的参数作用和添加方法

如下:

{SHOP_SEARCH}参数:商品搜索的参数,用于显示商品搜索条。

设置方法:插入一个1行1列的表格(下称表格A),直接在单元格里添加{SHOP_SEARCH}商品搜索参数。

{SHOP_TITLE}参数:商品标题栏的参数,用于显示“最新商品、特价商品、热卖商品、推荐商品”四个标题的名称。

设置方法:在表格A的下面,再插入一个1行1列的表格,然后在这个表格里再插入一个1行3列的表格(下称表格B),

给表格B的每一列分别插入一张背景图,然后在中间一列输入{SHOP_TITLE}商品标题栏参数。(为了提高网站速度,图片越小越好,我们把标题栏的背景图截成了三段,所以要用1行3列的表格。您也可以直接插入1行1列的表格,然后给表格插入整个背景图)

{SHOP_PHOTO}参数:商品图片的参数

设置方法:在表格B的下面,再插入一个4行1列的表格(下称表格C),在表格C的第一行单元格里输入{SHOP_PHOTO}商品图片的参数,然后将此单元格的行高设为120px,单元格里的水平和垂直对齐方式分别都设为“居中”。

{SHOP_NAME}参数:商品名称的参数

设置方法:在表格C的第二行单元格里输入{SHOP_NAME}商品名称参数。为了美观,还可以在这个参数前插入一张小图片。

{SHOP_MARKETPRICE}参数:商品市场价格的参数设置方法:把光标放在表格C的第三行单元格里,再插入一个2行2列的表格(下称表格D),然后在表格D的第一行左边的单元格里,输入{SHOP_SHORTSHOW}商品的市场价格参数。

{SHOP_MYPRICE}参数:商品的商城价格

设置方法:把光标放在表格D的第二行左边的单元格里,输入{SHOP_MYPRICE}商品的商城价格参数。

{SHOP_BUY}参数:购买商品

设置方法:选中表格D右边两行单元格(把光标放在第一行单元格里,拖动鼠标左键不放,向下移动,即可选中),然后在属性面板单击“合并所选单元格”按钮,在这个合并好的单元格里输入{SHOP_BUY}购买商品参数。

在表格C的第四行单元格里插入一条分隔线,让每行商品之间有个间隔,便于浏览。

{SHOP_PAGE}参数:商品记录、翻页项

设置方法:在表格D的下方,再插入一个1行1列的表格,直接在这行的单元格里输入{SHOP_PAGE}商品记录、翻页项参数。

参数添加完毕之后,就要加以下三对标注语句。分别是

A、作用:复制列.制作模板时,我们只做了第一个商品的样式,其它商品的样式是不用全部都制作的,而是用这对标注语句来自动制作,并自动排列整齐。因为商品横排时,一行里放几个商品的,所以就要复制列。每当用户在网站管理后台添加一个商品时,这对语句就会自动复制(或者叫添加)一列单元格,用于显示新添加的商品。

B、作用:复制行.商品太多时一行就放不下,这时就要分多行显示了,所以也要用这对语句自动复制行,自动排版。

C、作用:复制表格.因为高级商城里除了最新商品栏外,还有特价商品、热卖商品、推荐商品三项。而我们在制作模板时,只制作了第一个“最新商品”栏这个表格的样式!所以要用这对语句,自动往下复制“最新商品”栏这个表格。这样用户在网站管理后台高级商城的“商品”显示标识栏里,选中推荐、热卖、特价”时,高级商城就会自动显示这三栏。

效果如右图(选中的是表格B的代码):

下面具体介绍一下三对标注语句的添加方法:

A、首先添加

操作步骤如下:

第一步:在“设计”区选中表格C,然后单击“拆分”。

第二步:在选中代码的最前面,从上往下找到第一个,把光标放在前,按回车

键,在空白行输入开始标注语句

第三步:重复第一步,然后在选中代码的最后面,从下往上找到第一个,把光标放在后,按回车键,在空白行输入结束标注语句

说明:因为这对标记的作用是复制列,所以要分别放在这个表格所在的单元格的列标记的前后面,其中单元格的列的开始标记是,所以把开始标记放在的前面。而列的结束语句是,所以要把结束标记放在的后面。这就可以复制一列单元格了。

B、添加

第一步:在“设计”区选中表格C,然后单击“拆分”。

第二步:在选中代码的最前面,从上往下找到第一个,把光标放在前,按回车键,在空白行输入开始标注语句

第三步:重复第一步,然后在选中代码的最后面,从下往上找到第一个,把光标放在后,按回车键,在空白行输入结束标注语句

C、添加

第一步:在“设计”区选中表格B和C,然后单击“拆分”。

第二步:把光标放在选中代码的最前面,按回车键,在空白行里输入

第三步:重复第一步,把光标放在选中代码的最后面,按回车键,在空白行里输入

为了美观,可以在某个参数前再插入一个小图标,给某个单元格或者表格加上背景图或者背景色,也可以先加好背景图再添加参数,此步省略。商城界面制作完毕!

界面管理

如何制作竖排商品的商城界面?

商品以多行一列的方式显示时,商城主界面制作方法介绍

本例效果图如下:

商城列表界面的参数作用和添加方法

如下:

{SHOP_SEARCH}参数:商品搜索

设置方法:插入一个1行1列的表格(表格A),直接在单元格里添加{SHOP_SEARCH}商品搜索参数。

{SHOP_TITLE}参数:商品标题栏的参数,用于显示“最新商品、特价商品、热卖商品、推荐商品”四个标题的名称。

设置方法:在表格A的下面,再插入一个1行1列的表格(简称表格B),然后在这个表格里再插入一个1行3列的表格(下称表格C),给表格C的每一列分别插入一张背景图,然后在中间一列输入{SHOP_TITLE}商品标题栏参数。(为了提高网站速度,图片越小越好,我们把标题栏的背景图截成了三段,所以要用1行3列的表格。您也可以直接插入1行1列的表格,然后给表格插入整个背景图)

{SHOP_PHOTO}参数:商品图片的参数

设置方法:在表格C的下面,再插入一个2行1列的表格(下称表格D),在表格D的第一行里再插入一个1行2列的表格(下称表格E),在表格E的第一列(即左列)单元格里输入{SHOP_PHOTO}商品图片的参数,然后在属性面板里设置此单元格的高度为120px,宽度为150px,水平和垂直对齐方式都设为:居中

{SHOP_NAME}参数:商品名称的参数

设置方法:在表格E的右列单元格,再插入一个6行1列的表格(下称表格F),在表格

F的第一行单元格里输入{SHOP_NAME}商品名称参数。

{SHOP_SHORTSHOW}参数:商品的简要说明

设置方法:在表格F的第二行单元格里输入{SHOP_SHORTSHOW}商品简要说明参数。

{SHOP_MARKETPRICE}参数:商品市场价格的参数

设置方法:在表格F的第三行单元格里输入{SHOP_MARKETPRICE}商品的市场价格参数。

{SHOP_MYPRICE}参数:商品的商城价格

设置方法:在表格F的第四行单元格里输入{SHOP_MYPRICE}商品的商城价格参数。

{SHOP_SAVING}参数:节省的钱(就是商城价格和市场价格的差值)

设置方法:在表格F的第五行单元格里输入{SHOP_SAVING}“节省的钱”参数。

{SHOP_BUY}参数:购买商品

设置方法:在表格F的第六行单元格里输入{SHOP_BUY}购买商品参数。

{SHOP_MORESHOW}参数:商品详细说明

设置方法:在{SHOP_BUY}参数后面,输入空格,然后再输入{SHOP_MORESHOW}商品详细说明参数。

接着在表格D的第二行单元格里插入一条分隔线,让每行商品之间有个间隔,便于浏览。

{SHOP_PAGE}参数:商品记录、翻页项

设置方法:在表格B的下方,再插入一个1行1列的表格,直接在这行的单元格里输入

{SHOP_PAGE}商品记录、翻页项参数。

参数添加完毕之后,就要加以下三对标注语句。分别是

A、

这两对标注的作用是:复制行。制作模板时,我们只做了第一个商品的样式,其它商品的样式是不用全部都制作的,而是用这两对标注语句来自动制作,并自动排列整齐。每当用户在网站管理后台添加一个商品时,这对语句就会自动复制两行单元格,用于显示新添加的商品及分隔线。

B、 作用:复制表格。

因为高级商城里除了最新商品栏外,还有特价商品、热卖商品、推荐商品三项。而我们在制作模板时,只制作了第一个“最新商品”栏这个表格的样式!所以要用这对语句,自动往下复制“最新商品”栏这个表格。这样用户在网站管理后台高级商城的“商品”显示标识栏里,选中“推荐、热卖、特价”时,高级商城就会自动显示这三栏。

下面具体介绍一下三对标注语句的添加方法:

A、首先添加 操作步骤如下:

第一步:在“设计”区选中表格D,然后单击“拆分”。

第二步:在被选中的代码里,从上往下找到第一个,把光标放在前,按两次回车键,在上面一个空白行里输入然后在下面的空白行里输入

第三步:重复第一步,然后在被选中的代码里,从下往上找到第一个,把光标放在后,按两次回车键,在上面一个空白行里输入然后在下面的空白行里输入

相关文档