首先,先要准备好这个静态网页的源文件,如图

bs里面是一些css和js的文件,img则是放图片的,文件中的index是网页的首页

运行一下,看看

是这样的

然后打开phpcms文件,上篇博客中有提到,把首页的文件index要放到指定的文件夹下

放到这个路径下

然后运行一下,看看效果

网页中没有了图片和样式表,接下来就是把它的图片和样式表放到指定的文件夹中,把图片放到images文件夹里,如图

bs里面有js文件也有css文件,所以,把它放在css和js文件任何一个都可以。如图

第一步做的就完成了,复制文件到指定文件夹中

运行一下index首页,还是没有变,如图

然后用Dw打开index首页

一些文件的路径都是原来的,所以找不到,包括图片也是

所以我们要做的第二步就是替换目录

ctrl f  直接查找,如图

第一个要替换的是bs,看看要替换成什么

打开phpcms的后台管理

设置安全配置中基本配置那一项

看看各项对应着什么路径

Dw中查找,填写内容

{JS_PATH}就代表着,这个路径,如图

替换的话,只要含有bs的就全部替换成那个路径,万一其中有单词含有bs那也会被替换,所以还要改

在前面加上双引号就可以了,基本上bs打头的,前面都是双引号

点击替换全部,一共找到了三项

已成功被替换

接下来就是替换img

查找一下img 看看有什么规律

也是双引号打头的可以操作

替换全部看一下,有没有完全替换成功

有class名也是双引号打头的被替换掉了,所以这种替换方式不行,撤销一下

前面的标志重复不行,那就看后面的

然后替换全部

查看一下,替换的都没有错

两个路径都更换完了,网页应该就可以正常运行了

phpcms后台管理更新一下缓存

更新完成后,再点击生成首页

查看站点首页

这个静态页面就可以在phpcms中显示出来了

然后就可以对这个静态页面进行操作了

可以通过phpcms提供的一些标签,来把静态网页变成动态网页

换个标准点的静态网页来重新操作,如图

运行后是这样的一个静态网页

还是重复上面说的那些步骤,复制文件

复制完成后,再就是把index里面的内容更改替换

然后在phpcms后台管理中更新缓存,生成首页,查看站点首页

和第一个静态页面的操作步骤一样

接下要把index首页,分出两个部分,头部和尾部

导航栏的部分是头部,来看一下审查元素

把header1和往上的内容剪切掉

新建一个文件,把内容复制,起的名字也是固定的,为header然后保存到和index同一路径里去

头部操作好了,再把尾部拆出来

再来看底部

同样的方法,剪切复制到一个新的文件里去,名字也是固定的,footer

然后点击保存

更新缓存,生成首页,看一下站点首页变成什么样子了

头部没有了,可以在里面把头部再放进去

使用的是phpcms里面的标签,如图

把尾部也引入进去

然后更新缓存看一下效果

头部被成功引入

再看尾部

尾部也是被成功引入

头部和尾部被拆出来的原因就是,到时候可以重复使用,每个页面都需要头部和尾部,如果 有需要的话可以引入就好

下一步做的就是,把header变成动态的

可以看一下

这里面的header是怎么做的

有这样一句话

标题,可以在后台管理操作的,不能写死了,可以复制粘贴一下

把这个改了

还要再加这样两句话

phpcms里的标签都是带花括号的,这两句话不加也行,加上最好,网络优化用的

再往下看是logo,logo在企业网站上很少会更换,所以这里就不做动态了

再往下看是栏目,栏目肯定是要改成动态的

只留这两项,然后其他的都删掉

然后用phpcms的标签把栏目循环遍历出来

可以参照phpcms v9手册,去找标签

花括号里面内容的意思就是   pc标签,是phpcms的一个简写,content代表的是内容,代表取的是栏目写0的话找的是一级栏目,5是代表的数量,最多只能调5个出来,是站点

根据栏目添加的顺序来升序排,相当于王里面填一些参数

查到的数据怎么来显示?loop标签。是用来循环遍历数组的,data代表查到的数据,r代表的小数组

loop中间的内容会循环输出,把刚才的产品放进去,把产品改为动态的,所以就不能写产品了

这样显示的就是名称了,先运行一下,看看

出现的是phpcms后台管理里面的内容

还有一个网页介绍

改成是,它就会在导航栏上出现

栏目已经改好了,每个栏目的连接是#,现在把每个栏目的href地址改一下

运行一下

点击国内

网页跳转相对应的地方

点击关于我们

也是跳转到相应的地方去

由于ceshi文件里面只有三个文件,并没有相对应的list列表,所以它会找默认的内容

首页跳转的部分还需要改

保存运行一下

点击首页,网址后面不会带有#

点击这里的首页

也会回到首页

导航的内容和连接都改完了

看一下首页是怎么变黄的

首页比其他的多了一下class名

在上面加一个判断语句,判断一下它是不是首页

删掉这一部分

在写下面的判断语句

写在loop标签里面

然后再把,这一块,删掉它

运行一下

可以指到那一项,选中哪一项,这样头部部分已经改完了,可以直接从后台管理去操作它,接下来操作footer部分

footer部分和头部的一样,logo不用改,电话地址等也不用,下面有个导航栏,把这一块换掉

修改完成后,运行

点击国内

成功跳转

再来看index部分

因为这个页面,导航下面就是一个大图,为了以后方便换,也换成动态的,需要在后台管理那里的栏目再加一行栏目

添加栏目

点击提交

然后给它添加内容

点击保存,看一下

这里就有这张图片了

把首页的大图换成这张图片,看看怎么换

把原来的代码改成这样的

然后保存,刷新看一下

图片已经被成功的替换了

在后台管理再修改另一张图片

点击保存,然后刷新页面

图片被成功替换

到管理栏目那里,删除没有用的,然后再添加栏目

导航已经被改变了

第一个是承接,承接在管理栏目是13

第二个是人才,人才在管理栏目上是11

第三个是资源,资源在管理栏目上是12

操作的是首页大图上的三张小图

运行一下

点击人才,达到的是人才页面

转载于:https://www.cnblogs.com/daochong/p/10434592.html

用phpcms如何将静态页面制作成企业网站(上)相关推荐

  1. 用phpcms如何将静态页面制作成企业网站(中)

    上篇博客中讲到了该修改网页的中间部分 中间的内容是这样的,有标题和内容,里面的内容被代码替代,运行起来就这样的 里面的内容就可以在后台管理那里添加 再来看代码部分 <div class=&quo ...

  2. 用phpcms如何将静态页面制作成企业网站(下)

    上篇讲到了子页部分 这样的 有分页选择 列表项的代码部分 最后输出变量pages就可以了 看一下运行的效果 点击下一页 再来改一下子页显示的样式 点击人才将会出来的一个子页面 路径要统一 再来更改后台 ...

  3. HTML5期末大作业——中华传统文化题材学生网页设计成品(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 DW静态页面制作 web网页成品

    HTML5期末大作业--中华传统文化题材学生网页设计成品(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 DW静态页面制作 web网页成品 常见 ...

  4. (私有云)客户给的VMware镜像磁盘如何制作成自定义镜像上传至openstack镜像服务器供客户使用

    (私有云)客户给的VMware镜像磁盘如何制作成自定义镜像上传至openstack镜像服务器供客户使用 目录 1.准备工作 2.修改域xml配置文件以及是否缩容 3.在镜像更新服务器上启动这个自定义镜 ...

  5. 使用html5静态页面的总结,幸福西饼:静态页面制作项目总结

    在coursera上学完了密歇根大学开的前端入门课,仍然不得要领,听朋友建议从网上找了个实站项目跟着撸了一遍代码,感悟比单纯上课多得多. 这个项目主要是复刻[幸福西饼]的主站和产品列表页,纯静态页面, ...

  6. 微享商盟系统功能与小程序开发方案(静态页面制作)

    在平时开发程序的过程中,自己经常会写一些控制台小程序进行测试某个功能,事后我们会寻找这些小程序, 如果不仔细管理,经常会找不到. 由于每个控制台小程序都有自己独立的 Main方法,所以我们不能把他们都 ...

  7. 静态页面制作—Magnet

    利用html+css进行制作静态网页制作,熟悉项目制作流程,建立起编写代码习惯. 一.项目分析 1.以下为静态网页的效果图,此文章目的利用html+css完成效果图: 2.此页面为三栏式结构,div+ ...

  8. HTMLCSS仿京东详情页静态页面制作总结

    目录 1.页面效果 2.页面分析 3.页面制作 (1)产品介绍模块​编辑 (2)产品细节模块​编辑 1.页面效果 接上面 2.页面分析 头部导航栏和底部栏跟前面的大相径庭,这里就不再总结了. 详情页的 ...

  9. 利用循环栏目导航标签及自定义页面制作帝国CMS网站地图

    网站地图,又称站点地图,它就是一个页面,上面放置了网站上所有页面的链接.也简洁地表现了网站栏目关系,一般就包含顶级栏目和二级栏目.搜索引擎蜘蛛非常喜欢网站地图.在帝国CMS中没有生成网站地图的功能,所 ...

最新文章

  1. linux下uptime命令详解
  2. 若谷歌实用量子计算机难产,拉里·佩奇会把它砍掉吗?
  3. python中s和t_Python中关于序列化的讨论,以及dump、dumps和load、loads区别的对比
  4. Python第三方模块tesserocr安装
  5. Nginx教程-日志配置
  6. 如何保证执行异步方法时不会遗漏 await 关键字
  7. 【学习笔记】第五章——I/O(设备分类、控制方式、软件层次结构、假脱机、缓冲)
  8. oracle里子连接查询,pc端页面滚动到底部加载更多数据......
  9. 华为P50首发麒麟9000L:5nm EUV工艺打造 配置有所缩减
  10. 活得自我一点,做自己想做的事情,有意义的事情
  11. 神经网络的归一化(batch normalization)
  12. 如何查看jdkApi在线帮助文档(下载)
  13. 邻接表拓扑排序算法【C/C++】
  14. Zynq AXI总线
  15. html5 plus 图片下载保存到手机相册
  16. 论文阅读笔记:ShuffleNet
  17. VS2012工具箱控件
  18. 【python】使用py3-bencode打开torrent文件
  19. 启动MyEclipse时报错,An error has occurred see the log file 出现此类错误提示
  20. MacM1下使用opencv

热门文章

  1. iOS逆向工程- 工具详解
  2. PowerDesigner逆向工程导入MYSQL数据库总结
  3. (转)HapMap简介
  4. HTML5通信机制与html5地理信息定位(gps)
  5. linux通过mail命令发送到外部邮件
  6. Oracle数据库的DDL操作
  7. 在 .NET 中设置页面元素的 javascript 事件 - IEBrowser [5]
  8. 三中好用的数组去重方式
  9. 【SQL Server备份恢复】维护计划实现备份:每周数据库完整备份、每天差异备份、每小时日志备份...
  10. 关于JS中和||用法技巧