用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

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

运行一下

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

运行成功

其他部分,明天再发

时间: 2024-10-02 18:23:05

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

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

上篇讲到了子页部分 这样的 有分页选择 列表项的代码部分 最后输出变量pages就可以了 看一下运行的效果 点击下一页 再来改一下子页显示的样式 点击人才将会出来的一个子页面 路径要统一 再来更改后台管理的设置 运行后点击人才 再来看如何更改内容页 点开,里面的内容就是内容页 静态页面的内容页是这样的 把静态的内容页面放入content文件中,内容页的名字是show.html 然后刷新页面,再点击内容页就是这样的一个页面了 说明这个模板已经成功拿进来了,但是现在还是静态页面,现在要把他改成动态的

将静态库制作成动态库

一.系统说明 Ubuntu12.04TLS 64位 二.制作静态库 (1)编写需要制作成静态库的程序(根据实际情况进行编写,这里只是一个简单例子)     //bar.h              #ifndef _BAR_H     #define _BAR_H          void bar(int i);          #endif     //bar.c     #include <stdio.h>     #include <stdlib.h>     #incl

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

网站地图,又称站点地图,它就是一个页面,上面放置了网站上所有页面的链接.也简洁地表现了网站栏目关系,一般就包含顶级栏目和二级栏目.搜索引擎蜘蛛非常喜欢网站地图.在帝国CMS中没有生成网站地图的功能,所以嗨分享今天就给大家介绍一种方法生成它的网站地图. 主要用到帝国CMS中的两个重要知识点: 一.循环栏目导航标签(listshowclass) 二.自定义页面 第一步:增加标签模板 帝国CMS网站后台--[模板]-左侧[标签模板]-[管理标签模板] 可以增加一个标签模板,也可以直接使用 ID为1,模

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

在平时开发程序的过程中,自己经常会写一些控制台小程序进行测试某个功能,事后我们会寻找这些小程序,如果不仔细管理,经常会找不到.由于每个控制台小程序都有自己独立的 Main方法,所以我们不能把他们都放在一个Solution里面,这样在编译整个项目的时候会通不过,但是又不想为每个小程序都单独建立一个项目,这样又太浪费,因为每个都是一个非常简单的代码文件.微享商盟小程序制作流程是怎样,下面会一一给大家详解! 微享商盟系统开发找:张丽185*6541*3369(微电)微享商盟小程序模式定制,微享商盟排队

静态页面制作:6HTML布局(基线的应用)

我们首先来看看现在的理想和现实. 虽然我们现在现实还没有达到理想的效果,但现在至少我们已经明白为什么课后帮和HWHelper为什么不在一行了,为什么呢?那就是因为他们都是块元素.那么有没有什么办法让这两个元素编程行内元素,一旦成为行内元素,他们不就跑到一行去了吗.所以我们来看看方法一. 方法一就是使用行内元素,行内元素可以摆在一行,我们现在明确的知道,h1标签和p标签他们都是块元素,所以我们该用哪个元素呢? 我们接触过的行内元素就是a标签,我们是否可以使用a标签来解决这个问题呢?其实a标签是不合

静态页面制作:5HTML布局

上节课我们大概是得到了下图的一个效果,课后帮和HomeWorkHelper分别获得了带下以及样式.但是他们俩实际上是分在两行的. 我们来看一下理想与现实的一个对比. 我们看到现实与理想之间还是有一定差距的.我们的理想效果是课后帮与HWHelper是在一行,但现实情况却是在两行.我们期望的效果是在一行并且HWHelper在课后帮的右上角.其实实现这个效果并不难,我们先来对现在的情况进行一些分析. 我们想要将两行文字合为一行,会通过两种方式来实现,我们从这两种方式中管中窥豹来了解网页是如何布局的.我

静态页面制作:9标题栏—样式的重复利用

.paragraph { width: 80%; margin: 50px auto; color: #666; font-size: 20px; text-align: left; line-height: 200%; padding: 30px } 首先我们来看一下现在所做到的效果以及我们的理想效果. 我们发现标签栏的左上角的部分,我们已经完成了. 在标题栏这一层,还有右上角的部分需要我们完成.其实完成这部分就很容易了,我们来到sublime中实现以下. 其实右上角的内容是可以被点击的,所以

静态页面制作:1HTML的基本认知

有一句名言,Talk is cheap,show me the code.这句话无论放到那里都非常合适 我们也废话少说,首先给大家展示一下我们PC端最终实现的效果. 上面的网页很简单,但也很完整.麻雀虽小,但五脏俱全. 我们可以通过这个案例,将HTML5+CSS3中主要的功能以及响应式布局全都掌握. 我们期望通过8天的时间,让大家可以: 网页入门知识 我们都上过各种网站,百度.谷歌.新浪.facebook等等.这些网站看着很庞大,像是一个整体.但其实他们是由一些很小的部分构成的. 我们说九层之台

静态页面制作:13padding的用法

这一节我们来说说留白 留白有什么用?padding到底有什么用,我们在分析之前,先回顾一下我们之前遇到的那几层结构. 在结构中我们有边距.边框和留白,在这里我们提出一个问题, 就是一个元素的宽度和高度边界到底在哪里? 我们通过图片为大家展示: 我们在这里直接告诉大家,一个元素的宽度就等于内容宽度+左右留白, 一个元素的高度就等于内容高度+上下留白. 虽然公式很简单,但有句话说越简单的公式其中越有料. 有什么料呢?我们通过一个例子来看看这个公式能有什么作用? 假设我们有一个div,然后宽度是100