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

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

56ec4a2346b717ef3c0e4d60d3ada18d.png

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

运行一下,看看

48b91bbe2ead9deae15ed333345f3d06.png

是这样的

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

放到这个路径下

3c64e2d3d4c1ab81b59f60fa50b91627.png

然后运行一下,看看效果

d929bc31be9064f9db8d086e76b38e65.png

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

4403bff5e976bb5869abbdf8fa60ab1e.png

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

ab0fe8efb56133d99a512a7dd147f233.png

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

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

2d8fdfc97009d41751c5c8191d600dae.png

然后用Dw打开index首页

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

3a2dedfcd603e69393c245081d43b0fc.png

484cb90d5397d68efc4cc717f0426e03.png

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

ctrl f  直接查找,如图

9d82540052e2f133db33a50acc85fb29.png

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

打开phpcms的后台管理

18de8f71d46a5fad4529579fa8c4c850.png

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

看看各项对应着什么路径

Dw中查找,填写内容

2845129fbabff2766af650ceb4e6b9e9.png

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

4f1723e58588e332d31c67b19afcb307.png

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

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

c3ea669ee3965eab9861fa37fa778840.png

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

09b0437fd3ba3a91a6cc7fb56036d8b3.png

已成功被替换

0794855bd291e8b1e7691dd3811feaa5.png

接下来就是替换img

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

6f5f03a551caa35e0ed03c7700f1b2c9.png

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

2ecdb4c2d9132d05452e44bb91183e66.png

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

f6514f140f460c6c67c6d7304140fe6c.png

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

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

a087cb2eb54b6842417c1790354b7703.png

然后替换全部

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

1f269c2f467462b64ea1fc0068ba5a51.png

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

phpcms后台管理更新一下缓存

fd0c1a4a7fec5437a034f8803dc82d80.png

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

4b658550c8b3a05c2d1505ba01db33e8.png

查看站点首页

56b90dcf843fb58045a12759d1e0f2d4.png

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

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

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

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

6c6ad180a18b78835be4de35616f9198.png

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

16dd688e43b3325048723a282c6576da.png

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

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

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

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

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

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

de3c0486ac4976f28cf589f1d30bba9c.png

把header1和往上的内容剪切掉

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

a8584a2aa4aae74869182c85d0b85a55.png

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

再来看底部

719d503ad2a13e24eab01bfaa3006f9b.png

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

3c861c54a752cf83112ee26aeb1675ca.png

然后点击保存

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

460aeb1ca5ec82b555333c3697351290.png

5c87aae8ff1f1073cc3435fc1df87891.png

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

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

d886f0338aa84876fabd1552b5b5b4fd.png

把尾部也引入进去

2a7682991323a172d5dcae76c8c6c3b3.png

然后更新缓存看一下效果

962f3aaefda66c350953d044566ab120.png

头部被成功引入

再看尾部

f40798062aae54da321ede7e59e90636.png

尾部也是被成功引入

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

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

可以看一下

67713cf4ae9d57e6da686bd079525d38.png

这里面的header是怎么做的

有这样一句话

2c5acd280478f5581f9a4a9abb52ce89.png

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

1308afcc71de974b1ffcdd2d8c04d7cf.png

把这个改了

还要再加这样两句话

a86656559c09c4f95e7fc548218fab98.png

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

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

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

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

540495ef7e205b9cb283ff603fd9267d.png

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

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

38d0a4eae258c96fda63c9da4b414aef.png

花括号里面内容的意思就是   pc标签,是phpcms的一个简写,content代表的是内容,

dfceed3c70c99f3f40377628c8d5b252.png代表取的是栏目

cda03fc1fcf6800a906c3f1cc5159856.png写0的话找的是一级栏目,5是代表的数量,最多只能调5个出来,

ab5ab835a5725e306d55bd3b01a24eb9.png是站点

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

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

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

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

aeaad1e3edefd2211942571fc69ebbc3.png

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

c3c62511aec89c7a6f785c72e0c30b3a.png

还有一个网页介绍

aa417e5344ffb54d75f5931e9c145f18.png

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

935a75164a360153e2f48650c19a70ce.png

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

b311473d2432d80db830eed509d002e6.png

运行一下

7b24aac83bf1d233d819b87ad45368bf.png

点击国内

21be1b879d7c446c9b398f8892495764.png

网页跳转相对应的地方

点击关于我们

7f934fb44fb4f8f0881df7b84fa8ab05.png

5a1b0e891902317874ac1993817e89ee.png

也是跳转到相应的地方去

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

首页跳转的部分还需要改

407e6b69363f5416d3c5368feb2bd02c.png

保存运行一下

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

186b570d22d9825215718b1c0c4eddfb.png

点击这里的首页

0e71af9534bfc2cc84b1dbde827675cf.png

也会回到首页

35d2a093018892aa78d8022037ab723f.png

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

看一下首页是怎么变黄的

2cb333f3548c2419906bff0fb27c8485.png

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

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

4fed483180f4dc035ac6453340e6d7cf.png

删掉这一部分

bfd2d241aef0850582edfc607d2c82cf.png

在写下面的判断语句

bdab144d050177a77cb2466ba160d6da.png

写在loop标签里面

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

896e5bbee6fd366213a3a6b3face3ee8.png

运行一下

4acb4481fba4b1a053e0a83c18672976.png

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

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

6c21959b2ddccea1a0a74fade716bbdb.png

c73107e717c07641a03aaee3f93b9613.png

修改完成后,运行

e71ab79b4fb08c1a26801d12800a5dae.png

点击国内

成功跳转

c19e94ded9f028896d6b4ecf4eaf4165.png

再来看index部分

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

14c2ca26b2cebfc5775c990c30af9419.png

5b54873a7586ef0a46aacf43d55e9d9a.png

添加栏目

点击提交

然后给它添加内容

c9567a59dbf7452f76744bdbc908493a.png

点击保存,看一下

这里就有这张图片了

21c0bf27107fe2850384feb1f03d08ff.png

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

把原来的代码改成这样的

80bbd2704134a2ad3671a7e7b5dadb5e.png

然后保存,刷新看一下

f5103dadd57c0356c243d233ec676368.png

图片已经被成功的替换了

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

e392705498025079821d82e3311bdd31.png

点击保存,然后刷新页面

af95e772d6aa53bd5108d51bcb7c5fd5.png

图片被成功替换

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

57d4c937cdd9cb027052552d441605cb.png

导航已经被改变了

5168f1ef3c5015d99d0a686b3ce0654e.png

46faadaa5039b2e7652ed199d974406b.png

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

46e65c5c1c5408c6b46d6bd5d7072c56.png

38bf8e51cd75f4a8bb59fa779a29669b.png

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

f390829c60acf3e8c304a965149b3f46.png

58be11181ba0673f569e903c8a077ce2.png

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

84400bf048c12f3605555809bcea0f73.png

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

48915bd47791ed3cedc19a7b5c31f873.png

运行一下

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

862070252f4317eaa311b9ab2c138a45.png

运行成功

其他部分,明天再发

原文:http://www.cnblogs.com/qishuang/p/6416308.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值