您现在的位置是:网址首页 > PbootCMS学习 > 建站教程建站教程

【图文】002号模板|第23讲|PbootCMS仿美食招商加盟响应式网站教程|制作新闻中心列表页xinwenlist.html(上)

微脉网络2020-01-14已有70人围观

简介接下来我们来制作新闻中心的列表页xinwenlist.html,制作这个页面和制作菜品展示列表页一样的流程,看一下网页源码调用的CSS及JS文件是不是我们已经本地化的,然后再替换PbootCMS的标签···

接下来我们来制作新闻中心的列表页xinwenlist.html,制作这个页面和制作菜品展示列表页一样的流程,看一下网页源码调用的CSS及JS文件是不是我们已经本地化的,然后再替换PbootCMS的标签即可。

01. 先用Dreamweaver创建一个新的html页面

225.jpg

02. 然后打开原网站,在新闻中心的列表页右键查看源代码

226.jpg

03. 复制所有代码到我们新建的html文件中

227.jpg

228.jpg

229.jpg

04. 保存到我们模板文件夹的WeiMaiDS_002文件夹中,名称存储为xinwenlist.html

230.jpg

05. 首先我们先替换页面的标题、关键词和描述代码

<title>{pboot:pagetitle}</title>
<meta name="Keywords" content="{pboot:pagekeywords}" />
<meta name="Description" content="{pboot:pagedescription}" />

替换

<title>新闻中心 -</title>

231.jpg

06. 然后查看下这个页面所调用的CSS及JS文件我们是否已经本地化了,如果是就直接更改下调用的路径即可,如果不是需要本地化后修改路径。(这个页面调用的CSS及JS文件我们已经本地化了,所以我们直接修改路径就行了,下面三个JS文件的位置在页面的底部)

<link rel="stylesheet" href="/Theme/v014/static/css/reset.css" />
<link rel="stylesheet" href="/Theme/v014/static/css/swiper.min.css" />
<link rel="stylesheet" href="/Theme/v014/static/css/index.css" />
<link rel="stylesheet" href="/Theme/v014/static/css/product.css" />
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="/Theme/v014/static/js/respons.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/Swiper/4.4.2/js/swiper.min.js"></script>
<script src="/Theme/v014/static/js/product.js"></script>

改为

<link rel="stylesheet" href="/css/reset.css" />
<link rel="stylesheet" href="/css/swiper.min.css" />
<link rel="stylesheet" href="/css/index.css" />
<link rel="stylesheet" href="/css/product.css" />
<script src="/js/jquery.js"></script>
<script src="/js/respons.js"></script>
<script type="text/javascript" src="/js/swiper.min.js"></script>
<script src="/js/product.js"></script>

232.jpg

233.jpg

07. 然后使用头部模板标签 {include file=head.html} 和尾部模板标签 {include file=foot.html} 替换相应的代码

234.jpg

235.jpg

这样,我们新闻中心列表页xinwenlist.html模板的公共框架代码算是做完了,下一讲我们说一下如何替换内部的调用标签。

很赞哦! (44)



网站推荐 TOP 01

    【No:001】蓝色产品展示型网站模板带手机端模板

站点信息

  • 建站时间:2020年01月01日
  • 网站程序:PBOOTCMS
  • 标签管理标签云
  • 网站地图XML网站地图
  • 微信公众号:扫描二维码,关注我们
  • 公众号