首页 > 代码库 > 用phpcms如何将静态页面制作成企业网站,头部加尾部

用phpcms如何将静态页面制作成企业网站,头部加尾部

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

技术分享

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

技术分享

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

技术分享

运行一下

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

技术分享

运行成功

其他部分,明天再发

用phpcms如何将静态页面制作成企业网站,头部加尾部