我们鼓励设计师开发原创模板,当然也可以从移植模板开始练手
需要的工具:整站下载器
使用这个工具可以轻松的将一个完成的网站保存到本地,代码复原率99%,只有极少数网站保存下来后显示混乱
由于asp、php等是在服务器端运行的,这种源码当然是保存不下来的,保存下来的文件格式为编译好后的html文件
我们可以采用这些html文件来生成S-CMS网站模板
移植步骤
1.将各个页面重命名对应好
参照 2.1文件说明“S1文件夹”将各页面重命名好,放到一个文件夹内,文件夹可以自己命名。
2.修改编码,删掉无关代码
S-CMS的文件编码为utf-8,如果下载的网站为utf-8编码,请自行修改
删掉网站的版权信息等无关代码
3.替换html页面内的css js 图片路径
建议在文件夹内分别新建“css”、“js”、“images”的文件夹用来存放外部调用的文件。
原代码
<link rel="stylesheet" type="text/css" href="templates/xxx5/images/css/css.css" />
<link rel="stylesheet" type="text/css" href="templates/xxx5/images/js/js.js" />
修改后
<link rel="stylesheet" type="text/css" href="{@SL_安装目录}template/yourname/css/css.css" />
<link rel="stylesheet" type="text/css" href="{@SL_安装目录}template/yourname/js/js.js" />
其中“yourname”就是自己命名的文件夹
4.将foot top 重复部分做好
找到各页面之间重复部分,做好top.html和foot.html供个页面调用
5.通用标签的设置
参考所有通用标签(3.1 通用标签),将相应的内容替换好。
原代码
<title>腾讯网</title>
<meta name="description" content="腾讯网(www.QQ.com)是中国浏览量最大的中文门户网站,是腾讯公司推出的集新闻信息、互动社区、娱乐产品和基础服务为一体的大型综合门户网站。腾讯网服务于全球华人用户,致力成为最具传播力和互动性,权威、主流、时尚的互联网媒体平台。通过强大的实时新闻和全面深入的信息资讯服务,为中国数以亿计的互联网用户提供富有创意的网上新生活。" />
<meta name="keywords" content="资讯,新闻,财经,房产,视频,NBA,科技,腾讯网,腾讯,QQ,Tencent" />
修改后
<title>{@SL_网站标题}</title>
<meta name="description" content="{@SL_网站描述}" />
<meta name="keywords" content="{@SL_网站关键字}" />
6.自定义标签的设置
参考自定义标签(5.3 自定义标签)的构建方法,自己设计好config.xml,并将模板中需要替换的地方替换掉
原代码
<div><span style="font-size: 14px;"><strong>诚实、宽容、创新、服务</strong></span></div>
修改后
<div><span style="font-size: 14px;"><strong>{@SL_公司口号}</strong></span></div>
其中{@SL_公司口号}这个标签是自己设计的,需要在config.xml中定义,不然识别不了。
7.各个函数的设置
参考函数文档(4 函数文档)中的函数使用方法,对内容进行替换。
原代码
<li><a href="/?type=index&S_id=1" title="网站首页"><font>网站首页</font></a></li>
<li><a href="/?type=text&S_id=1" title="关于我们"><font>关于我们</font></a>
<ul>
<li><a href="/?type=text&S_id=1" title="公司简介"><span>公司简介</span></a></li>
<li><a href="/?type=text&S_id=2" title="公司文化"><span>公司文化</span></a></li>
</ul>
</li>
<li><a href="/?type=product&S_id=1" title="产品展示"><font>产品展示</font></a>
<ul>
<li><a href="/?type=product&S_id=3" title="尼康"><span>尼康</span></a></li>
<li><a href="/?type=product&S_id=2" title="佳能"><span>佳能</span></a></li>
<li><a href="/?type=product&S_id=4" title="莱卡"><span>莱卡</span></a></li>
</ul>
</li>
<li><a href="/?type=news&S_id=1" title="新闻中心"><font>新闻中心</font></a>
<ul>
<li><a href="/?type=news&S_id=2" title="行业动态"><span>行业动态</span></a></li>
<li><a href="/?type=news&S_id=1" title="公司新闻"><span>公司新闻</span></a></li>
</ul>
</li>
修改后
{$getmenu(<li ><a href="%主菜单链接%" title="%主菜单标题%"><font>%主菜单标题%</font></a>%子菜单%</li>,<li><a href="%子菜单链接%" title="%子菜单标题%"><span>%子菜单标题%</span></a></li>,<ul>%子菜单样式%</ul>)}
这里使用了{$getmenu(main_style,sub_style,sub_inc)}获取菜单函数,可以轻松的将网站导航栏显示出来。
8.各页面标签的设置
参考标签文档(3 标签文档)中的标签使用方法,对内容进行替换。
原代码(以简介页面举例)
<h1>公司简介</h1>
<p>XXX有限公司是于1966年为了通过试验评价技术的支援以提高产业技术而成立的试验评价机构,是和先进(发达)国家的试验、认证机构进行交流和合作的大韩民国代表性机构。为了保护本国产业的各种认证制度日渐完善,为保护消费者安全和环境的各种制度的重要性日趋增加,KTL为适应形势的发展,从产品开发到获得认证的整个阶段提供支援,以帮助企业提高技术能力以及拥有更强的竞争力。</p>
<img src="media/about.jpg">
修改后
> <h1>{@SL_简介标题}</h1>
> <p>{@SL_简介内容}</p>
> <img src="{@SL_安装目录}{@SL_简介配图}">
使用简介页面举例,刻意简化了示例代码以说明替换方法,实际代码中需仔细找寻“简介标题”“简介内容”等部分。
9.完善细节