html中使用什么标签做的导航栏_phpcms做后台的网站制作

a8e8e519005d2ad13f76972eeec1107f.png

目标:给自己写的静态网页整一个后台,让这个网页能够在后台操作前台数据。能够在后台发布新闻,发布产品,更改信息等。

说白了还是为了给静态网页整个后台。实现一个真正的网站。

一.   准备自己的静态网页(如一般公司官网类型,必须按照以下命名)

首页:index.html

关于我们:page.html

新闻列表:list.html            新闻详情:show.html

产品列表:listimg.html       产品详情:show.html

网页制作必须规范,一个html对应一个css文件,不能写在一个css里。

二.    下载安装phpcms程序

浏览器搜索phpcms,下载解压后,将install_package下的子文件全部拷贝到www目录下,打开本地环境wamp;浏览器输入localhost/install回车,开始安装程序:

一路下一步,数据库哪里就填自己的数据库名称和密码即可,安装完成后,登录进入后台。输入localhost查看前台,是默认的前台页面。

三.    将你的静态网页放进phpcms程序里面

进入C:\wamp\www\phpcms\templates\default\content这个目录下,就是默认的前端页面文件,把这里面所有的默认html全部删除,然后把自己的静态页面全部拷贝进来。再运行localhost查看,是不是就已经成了你的页面了。

a32d4ed7d0629327942e8d474ad4469a.png

到此,我们就要开始和后台连接起来,一页一页连接。

四.    首先来连接关于我们页面(page.html)

①进入后台 ----内容------栏目管理------添加单网页-----填写名称----模板设置----默认模板和单网页page.html

4a4427b7d7320201f1082a673ffbb6e3.png

74668f0877688ab52c0040980d6ec441.png

63fb579497a4494ee6d6e1bd77afb56a.png

be39c661feac131cb281325886ad8aee.png

d8311395ba3b0c42112728a6d9cc7815.png

bfb577ebb7bc4674613dd872d7a37a25.png

进入page.html查看,并没有展示出来。

我们打开page.html的代码,用{$content}标签替换关于我们页面原来的文本内容。

a0b4f9a99ff9db5817b2a83909aa6a0e.png

  到此,在查看page页面,就已经是你刚才后台填写的内容了。

这个标签就代替了后台的你填写的内容。他可以直接调出后台的内容。

至此,page关于我们的页面已经完成和后端的链接了,你可以修改后台的内容,前台就会动态展示。

像这样的不用跳转二级页面的单页,直接就使用单网页即可,不用新建栏目。它的作用就是只展示无点击部分。

五.    新闻中心页面链接后台

进入后台 ----内容------栏目管理

3a37a0f745879d811e65872d07f6661c.png

56e2e541fb00c1b446596afe7c2ca819.png

List.html是新闻列表页

Show.html是新闻内容页

de87140338a818020767f85c3e18fe66.png

a36dcf905ec3736bfec717d5206a439b.png

b38a6590a610eddbd210742af8d2d28c.png

05d6095bdf9f220804da87bd41b3624b.png

例如添加3条:

546c989f882c85ef3ce7ec22ddf6201a.png

访问新闻页面,并没有显示刚才填写的内容:

ce29780627c81cc7bfa35e34457c5611.png

那接下来就是标签替换数据了:

我们先用编辑器打开list.html:

删除静态的新闻条数,只留下一条即可,就是只留下一个li标签,然后用标签

{pc:content action="lists" catid="$catid"num="8" order="listorder DESC" page="$page"moreinfo="1"}

{loop $data $r}

 

{date('Y-m-d',$r[inputtime])}

         {$r['title']}

{/loop}

{/pc}

替换。

d3eb437df6ca1fb7cf037a380040d5a7.png

要注意的是:这里还有时间替换,href链接替换

然后再查看新闻列表页就是你刚才填写新闻标题了:

82112ef02522db5379fac0762a809867.png

但是点进去还是静态的新闻内容, 是因为新闻内容页show.html还没有连接。

接下来:

用编辑器打开show.html:

将静态的新闻标题{$title}和内容{$content}用对应标签替换:

416f0919cadd4a8c0fc8aa9e32d1bc3f.png

然后再看新闻列表点击每条新闻,就可以正确的点进内容页了。

e4cf1190729869ef8c277a636895f05a.png

到此,新闻中心页面已完成,你可以在后台发布新闻了。

六.  产品中心页连接后台

还是栏目管理----添加栏目:

dd5105c160295524b68b6b958828b9c0.png

ba45ead55f58998eba4bfad774aa8d96.png

d2bca64efa5775da6de7e1360bb8d728.png

23ba1c41a7c75100bc84585db2a57555.png

例如添加四个:

59b13c14ca9c7e342d2f65c8beb5fe5a.png

点击访问:还是静态的,然后开始标签替换数据:

10ee644e04a41402463360b7f25a8f68.png

编辑器先打开listimg.html:

删除其他留下一条产品数据,然后替换:

{pc:content action="lists" catid="$catid"num="8" order="listorder DESC" page="$page"moreinfo="1"}

{loop $data $r}

                  

                     

                       

{/loop}

{/pc}

9979321de1e1a9608c480d78b4d8ea66.png

再编辑器打开show、、、哦哦,这里不用再show了,因为产品内容页和新闻内容页用了同一个页面:show.html,因为展示的内容是一样的,所以可用同一个,都是图片文字内容。

到此产品中心完成,你可以到后台发布产品了。

最后,就剩首页了,因为首页的内容是由子页面组成的,所以把子页面的部分内容调出来显示在首页就Ok了。

七. 关键的是导航栏部分

因为导航栏是每个页面都有的组件,可以把它单独放在一个名为header.html的页面中。导航栏替换标签:

  首页

 {pc:content action="category" catid="0"num="25" siteid="$siteid" order="listorder ASC"}

{loop $data $r}

{$r[catname]}

  {/loop}

  {/pc}

a80f5d3f4f35a5a477facae78e84503c.png

把每个页面的导航栏部分都用

{template"content","header"}替换掉。

56f714dba51f67f3e80b07e0e9d85a63.png

到此,各个页面就能相互切换跳转了。

同理:footer部分也是公用部分,也可以提出来再引用。

提出来到:footer.html

dc6355ae4cd5969b8febef394b56c602.png

引用到各个页面:{template"content","footer"}

e8d471167079fd37ee01d257acb00697.png

八 .  首页内容:

  1.  首页调用子页的内容展示在首页:

例如要在首页展示关于我们页面的文本内容:

用标签:{pc:get sql="SELECT * FROMv9_page where catid=9"}

 {loop $data $val}

{$val[title]}

{str_cut(strip_tags($val[content]),400,"")}

    ......

{/loop}

{/pc}

替换

ee8b196c8fcfcf0931fa7b1f61dfe395.png

  1.  例如首页有一个按钮点击要跳转到某个子页:

用标签:(注意这里必须在a标签里面)

{$CATEGORYS[9]['url']}替换

692a7a9524bfd576b8f17e343d2f3f47.png

到这里:原本静态的网页就拥有后台了, 一个简单的网站已经制作完成,可以在后台发布新闻,发布产品,修改一些内容等操作。

其实就是利用phpcms的开源程序,把自己写好的静态网页按照规定的命名放到指定的目录下,再通过后台创建对应的栏目,再利用标签将后台的数据调用出来替换掉静态的数据。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值