上篇博客中讲到了该修改网页的中间部分

中间的内容是这样的,有标题和内容,里面的内容被代码替代,运行起来就这样的

里面的内容就可以在后台管理那里添加

再来看代码部分

<div class="dt-double" style="left: 18.5%;">
<!--标题-->
<div class="dt-title">
<span class="dt-sp1">行业动态</span>
<a href="{$CATEGORYS[14]['url']}"><span class="dt-sp2" style="color: white;">更多>></span></a>
</div>
<!--展示项-->
{pc:content action="lists" catid="14" order="id DESC" num="4"}
{loop $data $val}
<div class="dt-item">
<a href="{$val[url]}">
<div class="dt-item-title">{$val[title]}</div>
</a>
<div class="dt-item-context">
{$val[description]}
</div>
</div>
{/loop}
{/pc}
</div>

这是行业动态的,资料库和行业动态一样,改个catid根据phpcms后台管理的id来写

 <!--资料库-->
<div class="dt-double" style="right: 18.5%;"> <!--标题-->
<div class="dt-title">
<span class="dt-sp1">汉企一一资料库</span>
<a href="{$CATEGORYS[8]['url']}"><span class="dt-sp2" style="color: white;">更多>></span></a>
</div>
<!--展示项-->
{pc:content action="lists" catid="8" order="id DESC" num="4"}
{loop $data $val}
<div class="dt-item">
<a href="{$val[url]}">
<div class="dt-item-title">{$val[title]}</div>
</a>
<div class="dt-item-context">
{$val[description]}
</div>
</div>
{/loop}
{/pc} </div>

然后从后台管理修改试试

在后台中加了这两项

更新缓存,看一下站点首页

从后台添加的内容已在首页显示

再给资料库加内容

更新缓存看一下首页

资料库的内容也被添加上

再来操作这方面的内容

先在header页面改个数

原先是5,现在改成6

然后在后台多加一栏目

然后再往里面添加上三项内容先

然后再来看代码部分

先审查元素,找到其中的一项内容,保留一项的代码,其他的都删掉

 <!--优秀产品展示  开始-->
<div class="yxxm">
<div class="yxxm-title">优秀产品展示</div>
<!--展示项-->
{pc:content action="lists" catid="16" order="id DESC" num="6" moreinfo="1"}
{loop $data $val}
<div class="yxxm-item">
<a href="{$val['url']}">
<img src="{$val['thumb']}" /></a>
<div class="yxxm-name">
项目名称:
<span>{$val['title']}</span>
</div>
<div class="yxxm-user">
客  户:
<span>{$val['keywords']}</span>
</div>
<div class="yxxm-context">
功  能:
<span style="width: 77%;">{$val['description']}</span>
</div>
<div class="yxxm-context">
开发人员:
<span>
{php list($copyfrom) = explode('|', $val['copyfrom'])}
{$copyfrom}</span>
</div>
</div> {/loop}
{/pc}
<!--占位勿删-->
<div style="clear: both"></div>
</div>
<!--优秀产品展示 结束-->

刷新页面

这样刚改的内容就显示在了首页上

接下来是公司承接

和上面的操作一样,只保留一个,然后更改代码

     <!--公司业务承接 开始-->
        <div class="yw">
            <div class="yw-title">公司业务承接</div>
            <div class="yw-items">
                {pc:content  action="lists" catid="13" order="id DESC" num="8" moreinfo="1"}
                 {loop $data $val}
                
                <div class="yw-item">
                    <img src="{$val['thumb']}" />
                    <div class="yw-item-title">
                    {php list($copyfrom) = explode('|', $val['copyfrom'])}
                    {$copyfrom}
                    </div>
                    <div class="yw-item-context">
                        {$val['description']}
                    </div>
                    <div class="yw-item-price">
                        <span class="price-sp">{$val['title']}</span>
                        <span class="price-sp1">价格:
                            <span class="price-sp2">{$val['keywords']}</span>
                            元</span>
                    </div>
                    <a href="{$val['url']}"><input class="btn_buy" type="button" value="点击订购" /></a>
                </div>
                {/loop}
            {/pc}
               
            </div>
            <img src="{IMG_PATH}/images/bk2.png" />
        </div>
        <!--公司业务承接 结束-->

然后给承接栏目添加内容

更新缓存,然后查看首页

下一项是人才

和上面的承接产品一样

 <!--优秀人才推荐 开始-->
        <div class="rc">
            <div class="rc-title">优秀人才推荐</div>             <div class="rc-items">
                <!--人才项-->
                {pc:content  action="lists" catid="11" order="id DESC" num="8" moreinfo="1"}
                 {loop $data $val}
                <div class="rc-item">
                    <a href="{$val['url']}">
                        <img src="{$val['thumb']}" />
                        <div class="rc-item-title">{$val['title']}</div>
                    </a>
                    <div class="rc-item-context">{$val['description']}</div>
                </div>
                {/loop}
            {/pc}
                <!--占位勿删-->
                <div style="clear: both"></div>
            </div>
        </div>
        <!--优秀人才推荐 结束-->

然后在后台管理那里添加内容,运行后

操作 成功

加上上篇博客,这样首页就已经替换完了,由静态页面变成动态页面了

再做它的子页面

在静态页面中,它的子页面应该是这个

在静态页面中是这个文件

现在把它复制到phpcms里面,和index路径一样

还要改一下文件名,如果是内容页,名字是list

然后再打开站点首页,点击导航栏就会打到子网页

是这个样子的

打开list文件,把头部分的代码删掉,引入header文件,如图

再把页脚部分代码替换一下

再来运行看一下

头部有了

页脚也有了

然后图片替换,只有一个

刷新运行一下

导航栏的背景图就出来了

但是还缺样式

在list代码中,再加上一个list样式

这样样式就出来了

再来替换里面的内容

把一侧的内容,替换成导航栏

 <!--二级导航 开始-->
<div class="left">
<div style="width: 100%; height: 50px; text-align: center; line-height: 50px; font-size: 18px; font-weight: bold;">导航</div> <a href="{siteurl($siteid)}">
<div class="left-item">首页</div>
</a>
{pc:content action="category" catid="0" order="listorder ASC" num="10" siteid="$siteid"} {loop $data $v}
{if $catid==$v[catid] || $top_parentid==$v[catid]}<!--判断显示的catid,如果是显示的catid-->
<a href="{$v[url]}"><div class="left-item xuanzhong">{$v[catname]}</div></a>
{else}
<a href="{$v[url]}"><div class="left-item">{$v[catname]}</div></a>
{/if} {/loop}
{/pc} </div>
<!--二级导航 结束-->

运行一下

操作成功

 <!--列表区 开始-->
<div class="right">
<div class="list-title">&nbsp;&nbsp;&nbsp;&nbsp;{$CATEGORYS[$catid][catname]}列表</div>

点测导航栏的人才

上面的导航栏会有选中的状态

点击侧导航承接,列表名,会出现对应的名字

再来替换一下列表项的内容

 <!--列表项-->

            {pc:content  action="lists" catid="$catid" order="id DESC" num="10" page="$page"}
{loop $data $val}
<div class="right-item">
<a href="{$val['url']}">
<div class="item-context">{$val['title']}</div>
</a>
<div class="item-time">{date('Y-m-d H:i:s',$val[inputtime])}</div>
</div>
{/loop}
{/pc}

运行一下

运行成功

这个页面还有一个友情链接,把友情链接替换一下

在后台管理中

这里可以添加友情链接,可以添加几个

然后代码部分再改一下

  <!--友情链接 分割区-->
<div style="width: 100%; height: 40px; line-height: 40px; text-align: center; background-color: #e0e0e0;">
友情链接:
{pc:link action="type_list" typeid="0" siteid="1" linktype="0" order="listorder DESC" num="4" return="pic_link"}<!---linktype="0" 是文字连接,linktype="1" 是logo链接-->
{loop $pic_link $v}
<a href="{$v['url']}">{$v['name']}</a>&nbsp;&nbsp;
{/loop}
{/pc} </div>

运行后

后台的模块友情链接一共有四个,其中这两个是文字链接,其他两个是logo链接,设置的是显示文字连接,所以出来的是这两个

这样友情链接也操作完成了

用phpcms如何将静态页面制作成企业网站(中)的更多相关文章

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

    首先,先要准备好这个静态网页的源文件,如图 bs里面是一些css和js的文件,img则是放图片的,文件中的index是网页的首页 运行一下,看看 是这样的 然后打开phpcms文件,上篇博客中有提到, ...

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

    首先,先要准备好这个静态网页的源文件,如图 bs里面是一些css和js的文件,img则是放图片的,文件中的index是网页的首页 运行一下,看看 是这样的 然后打开phpcms文件,上篇博客中有提到, ...

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

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

  4. 通过a标签在页面上显示视频网站中的视频

    1.把视频传到优酷.腾讯等视频网站中 <!DOCTYPE html> <html> <head lang="en"> <meta char ...

  5. (转载)ecshop制作成手机网站的方法

    ecshop用手机访问的时候,会自动跳转到  /mobile 目录下,ecshop自带的wap模板是用wml制作的,如果按这种情况,又需要制作一套模板,太麻烦,现在都是智能手机时代,wml模板已经不能 ...

  6. 浅谈php生成静态页面

    一.引 言 在速度上,静态页面要比动态页面的比方php快很多,这是毫无疑问的,但是由于静态页面的灵活性较差,如果不借助数据库或其他的设备保存相关信息的话,整体的管理上比较繁琐,比方修改编辑.比方阅读权 ...

  7. 静态页面如何实现 include 引入公用代码

    一直以来,我司的前端都是用 php 的 include 函数来实现引入 header .footer 这些公用代码的,就像下面这样: <!-- index.php --> <!DOC ...

  8. 【京东个人中心】——Nodejs/Ajax/HTML5/Mysql爬坑之静态页面

    一.引言 接着上一篇,京东个人中心的所有功能数据分析完成之后,现在需要把静态页面完成,实现过程中要用到的技术有:Bootstrap.html5表单新特性等.除此之外,还要利用Node.js的Expre ...

  9. 使用Git Bash远程添加分支和简单部署你的静态页面

    新建一个分支:git branch mybranch(mybranch你的分支名字) 切换到你的新分支: git checkout mybranch 将新分支发布在github上: git push ...

随机推荐

  1. IOS即时通讯XMPP搭建openfire服务器

    一.下载并安装openfire 1.到http://www.igniterealtime.org/downloads/index.jsp下载最新openfire for mac版 比如:Openfir ...

  2. Maven的安装环境配置

    一.Maven的安装 二.Maven的配置 Settings.xml可以用来定义本地仓库.远程仓库.联网代理 Settings.xml文件可以存在两个地方: 1.多用户情况 conf目录下 2.单用户 ...

  3. leangoo

    leangoo网址:https://www.leangoo.com/

  4. C++中的IO流

    一,标准输入流 1.基本功能(头文件为iostream) char ch = cin.get();// 一次读取一个字符,如果遇到EOF则结束. cin.getline(buf,length);// ...

  5. Angular - - $q 承诺与延迟

    $q 一个帮助处理异步执行函数的服务.当他们做完处理时,使用它们的返回值(或异常). 受 Kris Kowa’s Q 的启发,这是一个实现promise/deferred对象的启用. $q的两种方式- ...

  6. Intent对象详解——使用Intent启动系统组件

    Android的应用程序包含三种重要组件:Activity.Service.BroadcastReceiver,应用程序采用一致的方式来启动它们——都是依靠Intent来启动的,Intent就封装了程 ...

  7. Java打印

    Java打印 import java.awt.Color; import java.awt.Font; import java.awt.FontMetrics; import java.awt.Gra ...

  8. netcat工具的使用

    用途:网络管理工具. 可以读,写TCP或UDP 网络连接.简写为:nc 常见参数: -h  帮助信息 -l 坚挺模式 -n 指定IP地址 -p 指定端口号 -v 详细输出 1 客户端:很容易建立一个客 ...

  9. jQuery事件绑定、解绑、命名空间

    jQuery事件绑定.解绑.命名空间 <%@ page language="java" import="java.util.*" pageEncoding ...

  10. jQuery删除DOM节点

    jQuery删除DOM节点 <%@ page language="java" import="java.util.*" pageEncoding=&quo ...