《锐奇使用手册》word版_第1页
《锐奇使用手册》word版_第2页
《锐奇使用手册》word版_第3页
《锐奇使用手册》word版_第4页
《锐奇使用手册》word版_第5页
已阅读5页,还剩29页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

1、界面管理 制作模板界面的注意事项?1、制作任意一个模板前,都要先新建一个tp文件夹(比如在桌面新建tp文件夹),然后在tp文件夹里再新建一个图片文件夹,把模板里用到的图片,全部都放在这个图片文件夹里。(这样一来,在dreamweaver插入图片时,就需要从tp文件夹里,双击图片文件夹,再选中图片插入即可。例如图片的路径是 tp/newsbox01_box/123.jpg,路径如果不对,图片将不能正常显示。)2、制作模板第一步,即在dreamweaver新建一个空白htm文件,然后把代码区里默认的代码要全部删除,再将此网页文件保存好,此网页文件必须与tp文件夹放在同一目录,比如都放在桌面上,然后

2、再开始制作模板。3、各个模板的命名规则异同之处:共同点:所有模板的图片文件名和网页文件名必须相同, 比如图片文件夹名称是newsbox01_box,网页文件是newsbox01_box.htm(注意:网页文件一定要用htm格式,不能用html格式)区别:引导页模板要带_boot后缀,如hhymb01_boot 主页模板不需要加任何后缀,如hhymb01 除此之外,其它的模板文件名都要带_box例如锐奇公司制作的模板文件命名规则:新闻评论界面newsbox01_box为了查找方便,锐奇公司的新闻评论模板文件名都以newsbox开头,接着是数字和_box您也可按这个规则来命名,为了防止您做的模板和

3、锐奇公司的同名,建议您将数字换成客户名称的英文简称,比如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

4、_box新闻评论界面:newscomment001_box主页界面:hhymb引导页界面:hhymb_boot4、所有的模板里,凡是需要插入带BEGIN和END的标注语句的,这些标注语句都必须单独放在一行,而且缺一不可,否则模板无法使用。5、 除了带BEGIN和END的标注语句外,所有模板的参数,即用括起来的参数,可以按建站要求相应地删除,但至少要保留一个参数,否则模板无法使用。 例一:底部区不想显示“网站管理”四个字时,就可以将模板里的底部区参数COUNNECT删除,然后直接在模板里输入底部区的内容。 例二:想制作个性化的FLASH菜单时,您也可以将MENU参数删除,然后将和放在最后一个参数

5、的后面,注意要单独放在一行。最后直接插入已制作好的FLASH菜单即可,注意每个菜单名要做好链接。 例三:网站的所有栏目都不想显示边侧模块时,您可以将边侧模块参数所在的列删除,然后将和放在最后一个参数的后面。备注:某些参数删除后,在网站管理后台相应位置输入的内容,就不会显示在网站上的。6、制作模板时,插入的表格,对齐方式都要统一,比如全部设为居中对齐或者右对齐、左对齐。7、模板里插入的FLASH,必须设为透明的!具体方法是:选中FLASH,在属性面板里单击“参数”按钮,在弹出的对话框里“参数”填wmode“值”填transparent最后确定即可。假设FLASH不设为透明的,网站里的下拉菜单、漂

6、浮广告经过FLASH时,会被FLASH挡住的。8、背景图必须在一个独立的单元格或者表格里。不能放在合并单元格之后所得的表格里。9、把网页的所有文件名统一成小写10、超级链接要使用相对路径,不要用绝对路径,也不要用中文文件名。 11、模板里边侧所在的表格,不可以设为左对齐或者右对齐。要么设为居中对齐,要么用默认的。否则三区的功能列表只能显示一个。12、在单元格里再插入表格时,这个表格的垂直对齐方式要设为居顶对齐13、MENU最好不要放在模板的最后一个表格里,因为放在最后,下拉菜单就不能显示了。如果一定要放在最后,就需要在MENU参数所在表格的后面,再插入一个空白的表格。下拉菜单有多高,这个空白表

7、格就设多高就行。 界面管理 如何添加删除模板模板界面?模板制作完成后,要将模板的网页文件即htm文件,复制到tp文件夹里。接着用ftp工具登录到服务器的根目录,从本地电脑里选择tp文件夹,上传至根目录。最后进入软件的超级后台,点击相应的模板目录,填好添加模板的表格即可。 添加:您需要按以下步骤添加模板界面: 一、先制作好模板界面。二、用FTP软件上传至网站tp目录下。 三、在管理员平台的相应的模板界面管理添写模板界面信息并上传。 (以下是添加主页模板为例:如下图)模板名称:您可以随便取,比如叫金色年华等等 ,只是方便记忆。模板目录名:就是您制作的时候网页和目录取的名字。模板类别:分 公共 私有

8、 两种,公共的模板所有用户均可查看和使用,私有模板只能授权的某一个用户查看和使用,其它用户看都无法看到。私有模板一般适用于给用户订制模板的时候使用,因为订制的模板可能再有某一个企业特定的内容和标志,其它用户用不上,所以订为私有比较合适。模板描述:就是模板简要的介绍,一般填写这个模板适用于哪个行业呀,模板的寓意等。删除:把欲删除的模板打上勾,再点击删除,即可把此模板在数据库的记录清除,然后系统会提示您是否将网页和目录也一并清除,点击确定将会把网页和目录一起删除。点后退按钮则只删除列表中的模板记录,不会删除网页和目录。值得注意的是:正在被用户使用的模板是不能删除的。界面管理 如何制作主模板界面?本

9、例效果图如下:(红色标记处是主页模板需要用到的参数)主页模板所有的参数如下:(注意:参数都是以大括号为准,并且字母必须是大写)。TITLE:网页标题 LOGO:网站顶部logo区LANGUAGE:网站语言MENU:网站栏目和网站栏目的标注语句BODY:网站主体内容COUNNECT:网站底部COUNTER:计数器BOX_TITLE、BOX_BODY:网站边侧模块和网站边侧模块的标注语句另外还需要在网页头部代码区里面添加如下代码:(这两个句代码里面包含的参数是搜索引擎优化参数)。:是指网站描述:是指网站关键字下面介绍一下各个参数的作用的添加方法TITLE参数:网页标题参数,用于显示在网站管理后台输

10、入的网站名称。一个网页的TITLE,网页标题参数,用于显示在网站管理后台输入的网站名称。一个网页的TITLE,通常显示在IE的蓝色标题栏上(如右图标记处)设置方法是:在dreamweaver编辑器窗口的上方,有一个标题选项框,如图所示:在标题项输入TITLE即可LANGUAGE参数:设置网站的语言。Dreamweaver软件的编辑视图窗口有三种状态,分别是:代码、拆分、设计。如图: 操作步骤是:单击“拆分”安钮,在前面几行代码里,,找到gb2312这几个字符,将gb2312改成LANGUAGE即可备注:一般我们制作网页模板时添加表格、图片、文字相关一些资料都是在设计窗口中就可以实现,有时候需要

11、添加一些特殊的代码就需要到代码或者拆分视图窗口;例如制作锐奇模板时,添加LANGUAGE网站语言、栏目与边侧的标注语句时就会用到。LOGO参数:用于显示logo文字、logo图片或者动画等内容的,一般放在网页的顶部。设置方法:在需要放logo的表格里,先插入顶部的背景色或者背景图,然后输入LOGO参数即可。MENU参数:设置主栏目菜单的参数。效果是在网站管理后台,输入各个主栏目名称后,此参数会自动获取各栏目名称显示在网页上。注意事项:、MENU不能是单独放在一个行列的表格里面,所以您在制作模板时,需要先插入行列或者行列的表格或其它行列数,原则就是行数和列数不能同时为,否则会出错)例如插入2行1

12、列的表格,上面一行放LOGO参数,下面一行放MENU参数。、添加MENU参数后,还需要切换到“代码”区。在MENU的前后面加上和这两行标注语句。例如:MENU注意和必须单独放在一行里显示,不能跟其它代码放在同一行里面。这两行标注语句的作用是复制第一个栏目的样式,两行语句缺一不可。以LOGO和MENU放在同一个表格为例,具体方法如下: 第步:把光标放在LOGO参数所在表格的第二行, 先填充好栏目的背景图片或者颜色,然后输入MENU,为了菜单的美观可以在MENU后面插入竖线或者图片作为栏目之间的间隔。第2步:切换到“拆分”区(这时编辑器窗口就会发生变化,上面一部分是代码区,下面一部分是设计区,如右

13、图:在设计区把光标放在MENU后面,然后代码区的光标也会自动移到MENU参数的后面,如下图所示:第步:把光标放在代码窗口里MENU前第一个标记后面,按回车,然后输入第步:把光标放在MENU后第一个标记前面,按回车,然后输入如右边效果图:BODY参数:这是正文区的内容参数。制作方法:正文一般和边侧模块放在一个1行2列的表格里面的。所以我们就插入一个1行2列的表格:一个单元格放正文内容的参数,另一个单元格放边侧模块的参数,单元格的宽度大小和位置不是固定的,可根据需求排版。以左边放正文内容,右边放边侧为例:在左边单元格输入BODY,如下图:BOX_TITLE、BOX_BODY参数:分别是网站边侧模块

14、标题、模块内容的参数(边侧的模块包括网站公告、网站管理、会员登陆、子菜单栏目、站内搜索、问卷调查、友情链接等相关的内容)。其中BOX_TITLE是设置边侧模块的标题,BOX_BODY是设置边侧模块里面的内容。注意事项:添加BOX_TITLE、BOX_BODY参数除了直接在表格里面添加好这个参数,还需要在代码里添加好和两句标注语句。语句的形式如下:BOX_TITLEBOX_BODY其中和必须单独放在一行里,不能和其它代码放在一行。这两行标注语句的作用就是复制第一个边侧模块的表格样式,两行语句缺一不可。具体方法如下:第步:把光标放在BODY参数所在表格的另外一个单元格里。插入一个三行一列的表格,分

15、别先给第一行和第二行填充好相应的背景图片和颜色,然后在第一行里输入边侧模块标题参数BOX_TITLE,在第二行里面输入模块内容参数BOX_BODY。(第三行什么也不放,有了这个空白行,边侧模块与模块之间就会有一个间距)如图所示:第步:单击编辑器上方的“拆分”按钮,然后选中添加好BOX_TITLE和BOX_BODY所在的整个三行一列的表格,这时代码视频的窗口就会有变化了,选中部分就是边侧模块表格的代码,如下图。第步:把光标放在被选中代码的最前面,也就是的前面,敲回车键,输入标注开始语言第步:接着重复第2步,先选中边侧模块的表格,把光标放在被选中代码的最后面,也就是)的后面,敲回车键,输入标注结束

16、语句:。最终代码里的效果图如下图:第5步:单击编辑器窗口的上方的“设计”按钮,回到编辑窗口就可以了。COUNTER参数:计数器的参数设置方法:插入一个1行1列的表格,然后在单元格里输入COUNTER参数即可。CONNECT:网站底部的参数,一般用于放置联系方式、证书编号等内容。设置方法:插入一个1行1列的表格,然后在单元格里输入CONNECT参数即可。添加搜索引擎优化参数的方法:打开需要制作模板的时页面,点击编辑器窗口上方的“拆分”按钮,然后把光标移到上面的代码窗口的最上面,在如下两句代码(也就是下面和上面敲回车键空出两行)无标题文档中间插入我们需要添加的搜索引擎代码:添加好代码后效果如下:无

17、标题文档然后点击编辑器窗口上方的“设计”按钮,回到设计窗口。参数添加设置完成后,模板还是没有完成,接着还需要添加样式。如果没有样式的话,在网民浏览网页时,根据IE浏览器的“查看文字大小”菜单里不同的设置,网页的样式就会发生很大的变化,比如网页文字大小不一、网页变形等。我们先来介绍一下主页的样式表:设置整个网页的边框背景样式是:body一区里面默认引用的样式是:tdLOGO区引用的样式是:.logo网页正文里里面标题的样式是:thMENU导航条引用的样式是:.menu三区子菜单引用的样式是:.menuson底部区引用的样式是:.foot其中,每个文字样式除了一个默认的状态之外,另外还有四个链接状

18、态.分别是:a:link:文字做好链接的状态(没有访问过之前的样式)a:visited:点击过后的状态(访问过后的链接样式)a:hover:鼠标移上去的状态(访问没有点击时的样式)a:active:鼠标点击时的状态(正当访问时鼠标点击下去时的样式)在没有特殊的效果的时候,一般我们把a:link a:visited a:active这状态的颜色或字体设为一致的.只修改鼠标移上去的a:hovert的颜色或字体.另外就是关于菜单样式里面的特殊效果:(比如当前浏览的栏目,它的栏目名称的颜色和其它栏目的不同)方法就是在创建菜单样式表的时候,另外再增加四个链接状态a.menunow:linka.menun

19、ow:visiteda.menunow:hovera.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

20、 font-size: 24px; font-weight: bold; color: #000000;th font-size: 16px; color: #999999; text-decoration: none; letter-spacing: 5px;tdfont-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 c

21、olor: #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:

22、 #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: n

23、one; 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

24、: 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:

25、 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;.f

26、oot 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;您可以根据自己的模板需要更改每个样式里

27、面的颜色、文字大小等相关设置,其中font-szie是字体大小color是字体颜色background-color是背景颜色text-decoration是设置超链接有没有下划线,none代表没有下划线underline代表有下划线2、打开我们首先做的那个模板页面,在dreamweaver窗口右边我们会看到有一个样式的面板(如果没有看到,可以点击菜单栏上面的“窗口CSS样式”把面板调出来)面板如右图:再点击红色标记处的“附加样表”按钮。会弹出如下对话框:点击红色标记“浏览”按钮,选择刚做好保存在图片文件夹里面的style.css,接着在添加为选项里选择“导入”项,点击“确定”即可回到编辑窗口。

28、这时候我们可以看到样式的面板会有变化如右面:样式文字下面多了一个“ style.css”,点击“”号图标还可以展开下面的样式列表。3、然后给LOGO、COUNTER、CONNECT等底部区的参数引用相应的样式。具体操作步骤是:选中参数如LOGO,然后点击dreamweaver窗口最下面的属性面板,在“样式“下拉菜单里(下图红色标记处)选中此参数相对应的样式名即可。每个参数都要按这个步骤去选择自己的样式。参数添加好后,为了美观,可以给某个单元格或者表格加上背景图或颜色。整个主页模板就制作完成了。界面管理 如何制作新闻列表界面?本例效果图如下:(红色标记处是引导页模板需要用到的参) 新闻列表界面所

29、有的参数作用和添加方法如下:MENUNAME参数:新闻系统的栏目名称设置方法:插入一个1行1列的表格(下称表格A),直接在单元格里添加MENUNAME新闻栏目标题参数即可。NEWS_PAGE参数:统计新闻的记录,页码翻页设置方法:在表格A的下面再插入一个1行1列的表格(下称表格B),直接在表格B里添加NEWS_PAGE新闻栏目参数即可。NEWS_TITLE参数:新闻的标题说明:在添加这个新闻标题参数后,还要记得在代码区里加上和新闻列表的标注语句;另外新闻标题参数添加好之后,还要设置超链接,超链接就填NEWS_URL这个链接参数,因为我们发表每一条新闻,在首页显示的都只是一个标题,需要点击新闻标

30、题才会链接到新闻的详细页面,这个链接参数NEWS_URL就起到自动读取新闻详细页面的功能。)设置方法:1、在表格B的下面再插入一个2行1列的表格(下称表格C),在表格C的第一行单元格里输入NEWS_TITLE新闻标题参数,然后在属性面板的“链接”选项文本框里输入NEWS_URL链接参数。2、在表格C的第二行里面插入一张分割线图片(方法:点插入/图像)。3、在代码区加上和标记。这对标记的作用就是:具体步骤是:第一步:选中表格C,切换到拆分区(即点击编辑器窗口上方的“拆分”按钮)第二步:把光标放在被选中代码的第一个前面,按回车键,在空白行里输入。第三步:切换到设计区,再重复第一步,然后把光标放在被

31、选中的代码的最后一个后面,按回车键,在空白行里输入。最终效果如右图:NEWS_DATE参数:新闻发布日期设置方法:在新闻标题参数NEWS_PAGE后面,敲一下空格,然后输入新闻发布日期参数NEWS_DATE即可。这样每条新闻标题后面就会有个新闻发布日期了。说明:因为新闻的记录可能会很多,为了方便网民查看翻页项,我们可以在表格C的后面,再插入一个1行1列的表格D,然后添加NEWS_PAGE新闻栏目参数,这样在新闻标题页的上面和下面都会出来翻页功能了。如果您觉得没必要有两个翻页功能,也可以省去此步.另外,参数添加好之后,为了美观,可以在每个参数前再插入一个小图标,给某个单元格或者表格加上背景图或者

32、背景色,也可以先加好背景图再添加参数,此步省略。至此新闻列表界面我们就制作完成了。界面管理 如何制作新闻内容界面?本例效果图如下:(红色标记处是引导页模板需要用到的参) 新闻内容界面所有的参数作用和添加方法如下:NEWS_TITLE参数:新闻标题设置方法:插入一个1行1列的表格(下称表格A),直接在单元格里添加NEWS_TITLE新闻栏目参数即可。NEWS_DATE参数:新闻发布的日期设置方法:在表格A的下面,再插入一个1行1列的表格(下称表格B),然后在表格B里添加NEWS_DATE新闻发布日期参数即可。NEWS_BODY参数:新闻的详细内容设置方法:在表格B的下面,再插入一个2行1列的表格

33、(下称表格C),直接在表格C的第一行单元格里添加NEWS_BODY新闻详细内容参数即可。NEWS_TOOLS参数:文章的评论,打印、关闭选项设置方法:在表格C第二行的单元格里添加NEWS_TOOLS参数,对齐方式为“右对齐”。ABOUT_TITLE参数:其它相关新闻标题栏设置方法:在表格C的下面,再插入一个2行1列的表格(下称表格D),直接在表格D的第一行单元格里添加ABOUT_TITLE其它相关新闻标题栏。ABOUT_BODY参数:关于其它的相关新闻设置方法:在上面的表格D的第二行单元格里添加ABOUT_BODY参数。参数添加好之后,为了美观,可以在每个参数前再插入一个小图标,给某个单元格或

34、者表格加上背景图或者背景色,也可以先加好背景图再添加参数,此步省略。整个新闻列表界面我们就制作完成.界面管理 如何制作新闻评论界面?本例效果图如下:(红色标记处是引导页模板需要用到的参) 新闻评论界面所有的参数作用和添加方法如下:NEWS_COMMENT参数:新闻评论设置方法:插入一个三行一列的表格(下称表格A),直接在第一行的单元格里添加NEWS_COMMENT新闻评论参数。NEWS_TITLE参数:这是被评论的新闻标题设置方法:直接在 NEWS_COMMENT新闻评论参数后面敲一下空格,然后输入“ NEWS_TITLE”此参数即可。说明:评论者姓名、评论日期和评论内容的参数必须放在同一个表

35、格里面,而且表格的前后面分别要添加和。所以我们首先应该在前面插入的表格A里添加一个小表格,然后把这三个参数添加到小表格里面。具体设置方法如下:COMMENT_NAME参数:评论者姓名(即发布评论的人)第一步:在前面插入的表格A的第二行里插入一个3行1列的表格(下称表格B),然后把光标放在表格B的第一行里面,点击属于面板上的“拆分单元格”按钮,这样表格B的第一行就被拆分两列了。第二步:在表格B的左列里添加好评论者姓名参数,即COMMENT_NAME。COMMENT_DAYTIME参数:评论日期设置方法:在表格B的右列里添加COMMENT_DAYTIME即可。COMMENT_BODY参数:评论的内

36、容设置方法:在前面添加的表格B的第二行里输入COMMENT_BODY即可。三个参数添加完毕后,再按以下步骤操作:、在表格B的第三行里插入水平线、分割线、图片之类的(目的是评论与评论之间有个间隔,便于浏览)。、选中表格B,然后点击编辑器的“拆分”按钮,代码视图里以蓝底显示的代码就是表格B的代码。、把光标放在被选中代码的最前面,也就是的前面,敲回车键,在空白行里输入开始标注语句、重复第2步,再次选中表格B,把光标放在被选中代码的最后面,也就是的后面,敲回车键,在空白行里输入结束标注语句至此,表格B已按要求制作完毕。COMMENT_PAGE参数:评论记录,翻页选项设置方法:在表格A的第三行里面输入C

37、OMMENT_PAGE参数即可。NEWS_WRITE参数:参数:发表评论设置方法:在表格A的下面,再插入一个2行1列的表格(简称表格C),然后表格C的第一行里输入NEWS_WRITE参数即可。NEWS_GUESTBOOK参数:发表评论的表单设置方法:在表格C的第二行里输入NEWS_GUESTBOOK参数即可。所有的参数添加好之后,为了美观,可以在每个参数前再插入一个小图标,给某个单元格或者表格加上背景图或者背景色,也可以先加好背景图再添加参数,此步省略。如何制作产品列表主界面?本例效果图如下:(用括起来的是产品列表主界面需要用到的参数)产品列表界面的参数作用和添加方法如下:LIST_TITLE

38、参数:产品列表的栏目名称设置方法:插入一个2行1列的表格(下称表格A),直接在第一行的单元格里添加LIST_TITLE参数。LIST_PHOTO参数:产品图片设置方法:第一步:在表格A的第二行再插入一个1行1列的表格(下称表格B)。第二步:在表格B再插入一个2行1列的表格(下称表格C),表格的宽度设为98%,在表格C的第一行单元格输入LIST_PHOTO产品图片参数,在属性面板里设置这个单元格的高度设为“120”像素,水平对齐方式为“居中”对齐。LIST_NAME参数:产品名称设置方法:、在表格C第二行的单元格里输入LIST_NAME产品名称参数,水平对齐方式为“居中”对齐。LIST_PAGE

39、参数:产品记录、翻页项设置方法:插入一个1行1列的表格,直接在这行的单元格里输入LIST_PAGE产品记录、翻页项参数。所有参数添加完毕之后,就要加以下三对标注语句。分别是A、和作用:复制列.制作模板时,我们只做了第一个产品的样式,其它产品的样式是不用全部都制作的,而是用这对标注语句来自动制作,并自动排列整齐.因为一行里放几个产品的,需要几列来放,所以就要复制列。每当用户在网站管理后台添加一个产品时,这对语句就会自动复制(或者叫添加)一列单元格,用于显示新添加的产品。B、和作用:复制行。产品太多时一行就放不下,这时就要分多行显示了,所以也要用这对语句自动复制行,自动排版。C、和作用:复制表格。

40、效果图如右下:添加这三对标注语句的详细方法如下:A、首先添加和操作步骤如下:第一步:在“设计”区选中表格C,然后单击“拆分”。第二步:在选中代码最前面,从上往下找到第一个,把光标放在前,按回车键,在空白行输入开始标注语句第三步:重复第一步,然后在选中的代码最后面,从下往上找到第一个,把光标放在后,按回车键,在空白行输入结束标注语句说明:因为这对标记的作用是复制列,所以要分别放在这个表格所在的单元格的列标记的前后面,其中单元格的列的开始标记是,所以把开始标记放在的前面。而列的结束语句是,所以要把结束标记放在的后面。这就可以复制一列单元格了。B、添加和第一步:在“设计”区选中表格C,然后单击“拆分

41、”。第二步:在选中代码最前面,从上往下找到第一个,把光标放在前,按回车键,在空白行输入开始标注语句第三步:重复第一步,然后在选中的代码最后面,从下往上找到第一个,把光标放在后,按回车键,在空白行输入结束标注语句C、添加和第一步:在“设计”区选中表格B,然后单击“拆分”。第二步:把光标放在选中的代码最前面,按回车键,在空白行里输入第三步:重复第一步,把光标放在选中的代码最后面,按回车键,在空白行里输入备注:参数添加好之后,为了美观,可以在每个参数前再插入一个小图标,给某个单元格或者表格加上背景图或者背景色,也可以先加好背景图再添加参数,此步省略。至此,产品列表界面就制作完毕了!如何制作产品展示界

42、面?本例效果图如下:(用括起来的是产品展示界面需要用到的参数)产品展示界面的参数作用和添加方法如下:WARE_TITLE参数:产品列表栏目设置方法:插入一个5行1列的表(下称表格A),直接在第一行的单元格里添加WARE_TITLE产品列表栏目参数。WARE_PHOTO参数:产品图片设置方法:、把光标放在表格A的第二行,再插入一个1行2列的表格(下称表格B),把表格B的宽度为96%,居中对齐。、在表格B的第一列(即左列)单元格里输入WARE_PHOTO参数,水平对齐方式为:居中,单元格宽度设为:150px,高度为:120pxWARE_NAME参数:产品名称设置方法:、在表格B的第二列(即右列)再

43、插入一个2行1列的表格(下称表格C).将表格C的宽度为98%,居中对齐。、在表格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的第四行插入

44、一个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参数。备注:参数添加好之后,为了美观,可以在每个参数前再插入一个小图标给某个单元格或者表格加上背景图或者背景色

45、,也可以先加好背景图再添加参数,此步省略。如何制作横排商品的商城界面?商品分几行几列显示时,商城主界面制作方法介绍本例效果图如下:(用括起来的是商城主界面需要用到的参数)商城列表界面的参数作用和添加方法如下:SHOP_SEARCH参数:商品搜索的参数,用于显示商品搜索条。设置方法:插入一个1行1列的表格(下称表格A),直接在单元格里添加SHOP_SEARCH商品搜索参数。SHOP_TITLE参数:商品标题栏的参数,用于显示“最新商品、特价商品、热卖商品、推荐商品”四个标题的名称。设置方法:在表格A的下面,再插入一个1行1列的表格,然后在这个表格里再插入一个1行3列的表格(下称表格B),给表格B

46、的每一列分别插入一张背景图,然后在中间一列输入SHOP_TITLE商品标题栏参数。(为了提高网站速度,图片越小越好,我们把标题栏的背景图截成了三段,所以要用1行3列的表格。您也可以直接插入1行1列的表格,然后给表格插入整个背景图)SHOP_PHOTO参数:商品图片的参数设置方法:在表格B的下面,再插入一个4行1列的表格(下称表格C),在表格C的第一行单元格里输入SHOP_PHOTO商品图片的参数,然后将此单元格的行高设为120px,单元格里的水平和垂直对齐方式分别都设为“居中”。SHOP_NAME参数:商品名称的参数设置方法:在表格C的第二行单元格里输入SHOP_NAME商品名称参数。为了美观

47、,还可以在这个参数前插入一张小图片。SHOP_MARKETPRICE参数:商品市场价格的参数设置方法:把光标放在表格C的第三行单元格里,再插入一个2行2列的表格(下称表格D),然后在表格D的第一行左边的单元格里,输入SHOP_SHORTSHOW商品的市场价格参数。SHOP_MYPRICE参数:商品的商城价格设置方法:把光标放在表格D的第二行左边的单元格里,输入SHOP_MYPRICE商品的商城价格参数。SHOP_BUY参数:购买商品设置方法:选中表格D右边两行单元格(把光标放在第一行单元格里,拖动鼠标左键不放,向下移动,即可选中),然后在属性面板单击“合并所选单元格”按钮,在这个合并好的单元格

48、里输入SHOP_BUY购买商品参数。在表格C的第四行单元格里插入一条分隔线,让每行商品之间有个间隔,便于浏览。SHOP_PAGE参数:商品记录、翻页项设置方法:在表格D的下方,再插入一个1行1列的表格,直接在这行的单元格里输入SHOP_PAGE商品记录、翻页项参数。参数添加完毕之后,就要加以下三对标注语句。分别是A、和作用:复制列.制作模板时,我们只做了第一个商品的样式,其它商品的样式是不用全部都制作的,而是用这对标注语句来自动制作,并自动排列整齐。因为商品横排时,一行里放几个商品的,所以就要复制列。每当用户在网站管理后台添加一个商品时,这对语句就会自动复制(或者叫添加)一列单元格,用于显示新

49、添加的商品。B、和作用:复制行.商品太多时一行就放不下,这时就要分多行显示了,所以也要用这对语句自动复制行,自动排版。C、和作用:复制表格.因为高级商城里除了最新商品栏外,还有特价商品、热卖商品、推荐商品三项。而我们在制作模板时,只制作了第一个“最新商品”栏这个表格的样式!所以要用这对语句,自动往下复制“最新商品”栏这个表格。这样用户在网站管理后台高级商城的“商品”显示标识栏里,选中推荐、热卖、特价”时,高级商城就会自动显示这三栏。效果如右图(选中的是表格B的代码):下面具体介绍一下三对标注语句的添加方法:A、首先添加和操作步骤如下:第一步:在“设计”区选中表格C,然后单击“拆分”。第二步:在

50、选中代码的最前面,从上往下找到第一个,把光标放在前,按回车键,在空白行输入开始标注语句第三步:重复第一步,然后在选中代码的最后面,从下往上找到第一个,把光标放在后,按回车键,在空白行输入结束标注语句说明:因为这对标记的作用是复制列,所以要分别放在这个表格所在的单元格的列标记的前后面,其中单元格的列的开始标记是,所以把开始标记放在的前面。而列的结束语句是,所以要把结束标记放在的后面。这就可以复制一列单元格了。B、添加和第一步:在“设计”区选中表格C,然后单击“拆分”。第二步:在选中代码的最前面,从上往下找到第一个,把光标放在前,按回车键,在空白行输入开始标注语句第三步:重复第一步,然后在选中代码

51、的最后面,从下往上找到第一个,把光标放在后,按回车键,在空白行输入结束标注语句C、添加和第一步:在“设计”区选中表格B和C,然后单击“拆分”。第二步:把光标放在选中代码的最前面,按回车键,在空白行里输入第三步:重复第一步,把光标放在选中代码的最后面,按回车键,在空白行里输入为了美观,可以在某个参数前再插入一个小图标,给某个单元格或者表格加上背景图或者背景色,也可以先加好背景图再添加参数,此步省略。商城界面制作完毕!界面管理 如何制作竖排商品的商城界面?商品以多行一列的方式显示时,商城主界面制作方法介绍本例效果图如下:商城列表界面的参数作用和添加方法如下:SHOP_SEARCH参数:商品搜索设置

52、方法:插入一个1行1列的表格(表格A),直接在单元格里添加SHOP_SEARCH商品搜索参数。SHOP_TITLE参数:商品标题栏的参数,用于显示“最新商品、特价商品、热卖商品、推荐商品”四个标题的名称。设置方法:在表格A的下面,再插入一个1行1列的表格(简称表格B),然后在这个表格里再插入一个1行3列的表格(下称表格C),给表格C的每一列分别插入一张背景图,然后在中间一列输入SHOP_TITLE商品标题栏参数。(为了提高网站速度,图片越小越好,我们把标题栏的背景图截成了三段,所以要用1行3列的表格。您也可以直接插入1行1列的表格,然后给表格插入整个背景图)SHOP_PHOTO参数:商品图片的

53、参数设置方法:在表格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商品简要说明参数。

54、SHOP_MARKETPRICE参数:商品市场价格的参数设置方法:在表格F的第三行单元格里输入SHOP_MARKETPRICE商品的市场价格参数。SHOP_MYPRICE参数:商品的商城价格设置方法:在表格F的第四行单元格里输入SHOP_MYPRICE商品的商城价格参数。SHOP_SAVING参数:节省的钱(就是商城价格和市场价格的差值)设置方法:在表格F的第五行单元格里输入SHOP_SAVING“节省的钱”参数。SHOP_BUY参数:购买商品设置方法:在表格F的第六行单元格里输入SHOP_BUY购买商品参数。SHOP_MORESHOW参数:商品详细说明设置方法:在SHOP_BUY参数后面,输

55、入空格,然后再输入SHOP_MORESHOW商品详细说明参数。接着在表格D的第二行单元格里插入一条分隔线,让每行商品之间有个间隔,便于浏览。SHOP_PAGE参数:商品记录、翻页项设置方法:在表格B的下方,再插入一个1行1列的表格,直接在这行的单元格里输入SHOP_PAGE商品记录、翻页项参数。参数添加完毕之后,就要加以下三对标注语句。分别是A、 和和 这两对标注的作用是:复制行。制作模板时,我们只做了第一个商品的样式,其它商品的样式是不用全部都制作的,而是用这两对标注语句来自动制作,并自动排列整齐。每当用户在网站管理后台添加一个商品时,这对语句就会自动复制两行单元格,用于显示新添加的商品及分

56、隔线。B、和作用:复制表格。因为高级商城里除了最新商品栏外,还有特价商品、热卖商品、推荐商品三项。而我们在制作模板时,只制作了第一个“最新商品”栏这个表格的样式!所以要用这对语句,自动往下复制“最新商品”栏这个表格。这样用户在网站管理后台高级商城的“商品”显示标识栏里,选中“推荐、热卖、特价”时,高级商城就会自动显示这三栏。下面具体介绍一下三对标注语句的添加方法:A、首先添加 和和操作步骤如下:第一步:在“设计”区选中表格D,然后单击“拆分”。第二步:在被选中的代码里,从上往下找到第一个,把光标放在前,按两次回车键,在上面一个空白行里输入然后在下面的空白行里输入第三步:重复第一步,然后在被选中

57、的代码里,从下往上找到第一个,把光标放在后,按两次回车键,在上面一个空白行里输入然后在下面的空白行里输入效果图如下:B、添加和第一步:在“设计”区选中表格B,然后单击“拆分”。第二步:把光标放在选中的代码最前面,按回车键,在空白行里输入第三步:重复第一步,把光标放在选中的代码最后面,按回车键,在空白行里输入为了美观,可以在某个参数前再插入一个小图标,给某个单元格或者表格加上背景图或者背景色,也可以先加好背景图再添加参数,此步省略。商城界面制作完毕!界面管理 如何制作商品展示界面?本例效果图如下:商品展示界面的参数作用和添加方法如下:SHOP_SEARCH参数:商品搜索设置方法:插入一个6行1列

58、的表格(下称表格A),直接在第一行的单元格里添加SHOP_SEARCH商品搜索的参数。SHOP_TITLE参数:网上商城标题栏设置方法:在表格A第二行的单元格里面输入SHOP_TITLE参数即可。SHOP_PHOTO参数:商城商品的图片设置方法:1、把光标表格A 的第三行,插入一个1行2列的表格(下称表格B),表格的宽度为96%,居中对齐。2、设置表格B的第一列(左列)的宽度为:150px,高度为:120px3、在表格B的左列单元格里输入SHOP_PHOTO商品图片的参数,水平对齐方式为:居中对齐。SHOP_NAME参数:商品的名称设置方法:1、在表格B的右列插入一个6行1列的表格(下称表格C

59、)。宽度设为98%,居中对齐。2、在表格C第一行里面输入SHOP_NAME商品名称的参数。SHOP_SHORTSHOW参数:商品的简要说明设置方法:在表格C里第二行输入SHOP_SHORTSHOW商品简要说明参数。SHOP_MARKETPRICE参数:商品的市场价格设置方法:在表格C里第三行输入SHOP_MARKETPRICE商品的市场价参数。SHOP_MYPRICE参数:商品的商城价格设置方法:在表格里C第四行输入SHOP_MYPRICE商品的商城价格参数。SHOP_SAVING参数:节省的钱(市场价和商城价格中的差值)设置方法:在表格C第五行输入SHOP_SAVING节省钱多少的参数。SH

60、OP_BUY参数:购买商品设置方法:在表格C第六行输入SHOP_BUY购买商品参数。BODY_TITLE参数:详情介绍设置方法:在表格A的第四行单元格里插入一个2行1列的小表格(下称表格D),在表格D的第一行单元格里输入BODY_TITLE参数。SHOP_MOREBODY参数:商品的详情介绍内容设置方法:在表格D的第二行单元格里输入SHOP_MOREBODY参数。SHOP_ABOUT参数:相关商品设置方法:在表格A里的第五行单元格里插入一个2行1列的小表格(下称表格E),在表格E的第一行单元格里输入SHOP_ABOUT参数。SHOP_ABOUTBODY参数:相关商品的内容设置方法:在表格E的第

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论