zoukankan      html  css  js  c++  java
  • phpcms v9模板制作教程(转载)

    第一节

    1、首先下载phpcms v9的集成安装包并安装,这里就不详细说明了。

    2、本地调试建议大家使用APMserver,或者wampserver等,可以到PHPCMS吧官方网站首页链接下载。安装好打开v9的根目录“phproot→phpcms→templates”文件夹把“default”文件夹复制一份起名“redu”。

    3、登陆v9后台登录地址:http://localhost/admin.php
    用户名:phpcms 密码:phpcms

    4、打开界面→模板风格→风格标识redu下的详细列表下的content文件夹

    1、首先修改首页模板index.html
    修改前向大家介绍下v9的工作模式,v9和他的前身phpcms 2008是一样的都是“标签调用头部 +首页部分+ 标签调用底部”
    所以按照从头开始的顺序
    第一步打开heard.html
    现在我们开始分析header.html的构造:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    上面是W3C网页标准
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" />{CHARSET}" =字符集 (gbk或者utf-8)
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <title>{if isset($SEO['title']) && !empty($SEO['title'])}{$SEO['title']}{/if}{$SEO['site_title']}</title>
    判断语句 翻译:如果设置了标题并且标题不为空,则显示标题,否则显示网站名称

    <meta name="keywords" content="{$SEO['keyword']}">
    <meta name="description" content="{$SEO['description']}">
    <link href="{CSS_PATH}reset.css" rel="stylesheet" type="text/css" />
    <link href="{CSS_PATH}default_blue.css" rel="stylesheet" type="text/css" />
    上面2行是外部css的调用{CSS_PATH}
    <script type="text/javascript" src="{JS_PATH}jquery.min.js"></script>
    <script type="text/javascript" src="{JS_PATH}jquery.sGallery.js"></script>
    <script type="text/javascript" src="{JS_PATH}search_common.js"></script>
    上面3行是网页的js调用
    </head>
    <body>
    <div class="body-top">
    <div class="content">
    {pc:content action="position" posid="9" order="id" num="10" cache="3600"}
    <div id="announ">
    <ul>
    {loop $data $k $v}
    <li><a href="{$v[url]}">{$v[title]}</a></li>
    {/loop}
    </ul>
    </div>
    {/pc}
    <script type="text/javascript">
    $(function(){
    startmarquee('announ',22,1,500,3000);
    })
    </script>
    <div class="login lh24 blue"><a href="{APP_PATH}index.php?m=content&c=rss&siteid={get_siteid()}" class="rss ib">rss</a><span class="rt"><script type="text/javascript">document.write('<iframe src="{APP_PATH}index.php?m=member&c=index&a=mini&forward='+encodeURIComponent(location.href)+'&siteid={get_siteid()}" allowTransparency="true" width="300" height="24" frameborder="0" scrolling="no"></iframe>')</script></span></div>
    </div>
    </div>
    <div class="header">
    <div class="logo"><a href="/"><img src="{IMG_PATH}v9/logo.jpg" /></a></div>


    下面是搜索部分

    <div class="search">
    <div class="tab" id="search">
    {php $j=0}
    {php $search_model = getcache('search_model_'.$siteid, 'search');}
    {loop $search_model $k=>$v}
    {php $j++;}
    <a href="javascript:;" style="outline:medium none;" hidefocus="true" {if $j==1 && $typeid=$v['typeid']} class="on" {/if}>{$v['name']}</a>{if $j != count($search_model)}<span> | </span>{/if}
    {/loop}
    {php unset($j);}
    </div> <div class="bd">
    <form action="{APP_PATH}index.php" method="get" target="_blank">
    <input type="hidden" name="m" value="search"/>
    <input type="hidden" name="c" value="index"/>
    <input type="hidden" name="a" value="init"/>
    <input type="hidden" name="typeid" value="{$typeid}" id="typeid"/>
    <input type="hidden" name="siteid" value="{$siteid}" id="siteid"/>
    <input type="text" class="text" name="q" id="q"/><input type="submit" value="搜 索" class="button" />
    </form>
    </div>
    </div>

    搜索部分结束
    <div class="banner"><script language="javascript" src="{APP_PATH}index.php?m=poster&c=index&a=show_poster&id=1"></script></div>
    <div class="bk3"></div>
    <div class="nav-bar">
    <map>
    {pc:content action="category" catid="0" num="25" siteid="$siteid" order="listorder ASC"}
    <ul class="nav-site">
    <li><a href="{siteurl($siteid)}"><span>首页</span></a></li>
    {loop $data $r}
    <li class="line">|</li>
    <li><a href="{$r[url]}"><span>{$r[catname]}</span></a></li>
    {/loop}
    </ul>
    {/pc}
    </map>
    </div>
    {if $top_parentid}
    <div class="subnav">
    {pc:content action="category" catid="$top_parentid" num="15" siteid="$siteid" order="listorder ASC"}
    {loop $data $r}
    <a href="{$r[url]}">{$r[catname]}</a><span> | </span>
    {/loop}
    {/pc}
    {if $modelid}<a href="{APP_PATH}index.php?m=content&c=search&catid={$catid}">搜索</a>{/if}
    </div>
    {/if}
    </div>


    建议下载个opera浏览器 他的检查页面元素功能超赞!

    {template "content","header"}

    调用根目录下phpcms/template/content/header文件
    <!--main-->这个是模版注释!建议一定要养成写代码加注释的习惯

    这个是div标签,不知道什么是div可以的去网上找些教程学习下,这个都不了解就没必要继续看了


    <!--这里是pc标签{pc:content 参数名="参数值" 参数名="参数值" 参数名="参数值"}-->
    {pc:content action="position" posid="2" order="listorder DESC" num="4"}

    <!--显示PC标签中的数据-->

    {loop $data $r}

    {str_cut($r[title],36)}

    {if $n==1}{/if}{str_cut($r[description],112)}

    {/loop}
    {/pc}

    <!--结束标签-->

     

    <!--这里还是pc标签-->
    {pc:content action="position" posid="1" order="listorder DESC" thumb="1" num="5"}

    {loop $data $r}

    {/loop}

    {/pc}

     


    推广


    {pc:block pos="index_block_1"}

    {/pc}

     

    图片新闻
    {pc:content action="position" posid="12" thumb="1" order="id DESC" num="10"}


    {loop $data $r}

    {str_cut($r[title],20)}

    {/loop}

    {/pc}

     

    {loop subcat(0,0,0,$siteid) $r}
    {php $num++}

     

    {$r[catname]}更多>>


    {pc:content action="lists" catid="$r[catid]" num="1" thumb="1" order="id DESC" return="info"}
    {loop $info $v}

     

    {str_cut($v['title'],28)}
    {str_cut($v['description'],100)}

    {/loop}
    {/pc}


    {pc:content action="lists" catid="$r[catid]" num="5" order="id DESC" return="info"}

     

    {loop $info $v}

    ·{str_cut($v['title'],40)}
    {/loop}

    {/pc}


    {if $num%2==0}
    {/if}
    {/loop}

     


    公告


    {pc:announce action="lists" siteid="$siteid" num="2"}


    {loop $data $r}

    {$r['title']}
    {/loop}

    {/pc}

     

     

    专题更多>>


    {pc:special action="lists" siteid="$siteid" elite="1" listorder="3" num="2"}
    {loop $data $r}
    {if $n!=1}
    {/if}

     

    {str_cut($r[title],'18')}
    {str_cut($r['description'],50)}

    {/loop}
    {/pc}

     

     

    热点 | 评论 | 关注排行

     


    {pc:content action="hits" catid="35" num="10" order="views DESC"}
    {loop $data $r}

    {$r[title]}
    {/loop}
    {/pc}

     

    {pc:comment action="bang" num="10" cache="3600"}
    {loop $data $r}

    {$r[title]}
    {/loop}
    {/pc}

     

    {pc:content action="hits" catid="35" num="10" order="views DESC"}
    {loop $data $r}

    {$r[title]}
    {/loop}
    {/pc}

     

     

     

    调查问卷更多>>

     

     

     

    更多>>友情链接申请链接

     


    {pc:link action="type_list" siteid="$siteid" linktype="1" order="listorder DESC" num="8" return="pic_link"}
    {loop $pic_link $v}


    {/loop}
    {/pc}

    {pc:link action="type_list" siteid="$siteid" order="listorder DESC" num="10" return="dat"}

     


    {loop $dat $v}
    {if $type==0}
    {$v[name]} |
    {else}

    {/if}
    {/loop}

    {/pc}

     


    $(function(){
    new slide("#main-slide","cur",310,260,1);//焦点图
    new SwapTab(".SwapTab","span",".tab-content","ul","fb");//排行TAB
    })


    {template "content","footer"}

    养成书写规范的DIV标签

    搜索引擎优化(seo)中,对代码的优化也是一个很关键的步骤。为了更加符合SEO的规范,下面是目前流行的CSS+DIV的命名规则:
    DIV ID命名
    页头:header
    登录条:loginBar
    标志:logo
    侧栏:sideBar
    广告:banner
    导航:nav
    子导航:subNav
    菜单:menu
    子菜单:subMenu
    搜索:search
    滚动:scroll
    页面主体:main
    内容:content
    标签页:tab
    文章列表:list
    提示信息:msg
    小技巧:tips
    栏目标题:title
    友情链接:friendLink
    页脚:footer
    加入:joinus
    指南:guild
    服务:service
    热点:hot
    新闻:news
    下载:download
    注册:regsiter
    状态:status
    按钮:btn
    投票:vote
    合作伙伴:partner
    版权:copyRight
    CSS ID的命名
    外套:wrap
    主导航:mainNav(globalNav)
    子导航:subNav
    页脚:footer
    整个页面:content
    页眉:header
    页脚:footer
    商标:label
    标题:title

    顶导航:topNav
    边导航:sideBar
    左导航:leftsideBar
    右导航:rightsideBar
    标识:logo
    标语:banner
    菜单1内容:menu1Content
    菜单1容量:menu1Container
    子菜单:submenu
    边导航图标:sidebarIcon
    注释:note
    面包屑:breadCrumb(即页面所处位置导航提示)
    容器:container
    内容:content
    搜索:search
    登陆:login
    功能区:shop(如购物车,收银台)
    当前的current
    样式文件命名
    全站标签默认样式:general.css或global.css
    布局版式设计样式:layout.css或container.css
    通用样式(如文字、表单等):style.css
    专栏/频道样式:columns.css
    打印输出样式:print.css
    主题模板样式:themes.css

    如何利用v9仿制一个网站
    一、准备工具1、
    css手册
    2、phpcms手册
    3、dw cs5 没有的可以用记事本
    4、ps
    5、屏幕尺子
    6、好色鬼
    7、网站下载器
    8、各种浏览器 ie6 ie7 ie8 ie9 火狐 谷歌 Opera Safari 用ie 和火狐基本就够了
    9、有条件的可以准备个php手册和html手册
    10、亦歌(这个挺好用的听歌软件,我每次写代码都会打开他听歌)
    11、测试环境没有下个phpcm v9的集成包
    12、还没想到······想到了在写(呵呵,为了多写点·····哈)
    二、准备素材
    1、用网站下载器下载准备仿的网站文件
    2、按照目标网站制作相应尺寸的图片(如logo)有些需要改,有些不需要改(这里也是为了多写点···)

    3、还没想到还需要准备什么······想到了在写(呵呵,还是为了多写点·····哈)
    三、开始仿站
    1、先打开亦歌听音乐吧
    2、打开需要仿的站,查看页面源代码!(在网页空白区右建就能看到)
    3、先找到网页的css文件(下载下来放到根目录staticscss下改名reset.css)为什么这么做<link href="{CSS_PATH}reset.css" rel="stylesheet" type="text/css" />
    {CSS_PATH}reset.css等于根目录staticscss下reset.css文件(如果用网站下载器下载了那么在下载文件里找到css文件复制过去会更方便)
    注:statics目录下的文件部分是属于后台模版的,所以建议新建个目录放入你自己写好的css、js或者图片文件{CSS_PATH}reset.css是后台的css代码,这里千万别改!改了后台就跑偏了
    4、编辑头部文件用dwcs 5或记事本打开v9模版目录下header.html文件。

  • 相关阅读:
    PKI的签密体制学习(含信息安全基础)
    Linux软件安装
    Linux基础
    JSP EL表达式入门1
    Tomcat 错误: 代理抛出异常错误: java.rmi.server.ExportException: Port already in use: 1099 解决方法
    JSP JSTL入门
    JSP组件
    JSP动作
    实现序列化的java类中的serialVersionUID的作用
    [Noip2016]蚯蚓
  • 原文地址:https://www.cnblogs.com/zoubizhici/p/5681386.html
Copyright © 2011-2022 走看看