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

【图文】002号模板|第18讲|PbootCMS仿美食招商加盟响应式网站仿站教程|制作菜品展示内容页caipin.html(上)

微脉网络2020-01-07已有48人围观

简介做完了菜品展示列表页之后不要着急去PbootCMS中进行应用,我们要先把内容页也制作完成后再一同配置,现在我们就开始制作菜品展示内容页caipin.html01. 我们现在Dreamweaver中打开···

做完了菜品展示列表页之后不要着急去PbootCMS中进行应用,我们要先把内容页也制作完成后再一同配置,现在我们就开始制作菜品展示内容页caipin.html

01. 我们现在Dreamweaver中打开我们已经创建的caipin.html文件,然后复制原网站的菜品展示内容页的源代码到Dreamweaver中,并重新排版一下。

167.jpg

168.jpg

169.jpg

170.jpg

171.jpg

02. 使用我们已经编辑好的菜品列表页caipinlist.html的标题/关键词/描述的代码替换下我们caipin.html页面的相应的代码

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

替换

<title>新鲜大虾 -</title>

172.jpg

173.jpg

174.jpg

03. 查看小我们这个caipin.html页面中调用的css及js文件是否我们已经本地化了,如果有的话修改下路径,如果没有的话,缺少的文件需要本地化。

将<head></head>中的

<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>

改为

<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>

175.jpg

将页面底部的

<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>

改为

<script src="/js/respons.js"></script>
<script type="text/javascript" src="/js/swiper.min.js"></script>
<script src="/js/product.js"></script>

176.jpg

04. 将页面的公共头部替换成我们的头部模板 {include file=head.html} ,公共尾部替换成我们的尾部模板 {include file=foot.html}

177.jpg

178.jpg

到这里我们这个菜品内容页的模板公共部分就算是改好了,下一讲我们说一下如何替换内部的一些调用标签。

很赞哦! (48)



网站推荐 TOP 01

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

站点信息

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