推56论坛

 找回密码
 立即注册(限中文)

QQ登录

只需一步,快速开始

查看: 263|回复: 0

[php168教程] php168如何模仿别人的网站风格(仿站图文教程)

[复制链接]
发表于 2019-9-18 15:35:51 | 显示全部楼层 |阅读模式
一般的网站保存之后基本都没有什么问题了,可以打开保存的网页看看.基本和原有的网站差别不大.
当然也有可能和原先的网站差别比较大的.这多是由于样式表的问题造成的.
现在我们打开我们刚才保存的网站看看效果怎么样?

我们查看一下代码看看:
在代码里面搜索:style这个关键字.
找到下面的代码:
<style type="text/css" media="screen">
@import url("/CS_version/css/home.css");
</style>
而我们保存下来的结构是这个样子的:

显然上面的代码的css路径是不对的.
那我们改一下.我们

<style type="text/css" media="screen">
@import url("/CS_version/css/home.css");
</style>
改成:<link href="fangzhi_files/home.css" rel="stylesheet" type="text/css">
再看看,还是不行.那肯定还是样式的问题.
我们打开fangzhi_files/home.css这个文件看看:
最上面两行是这样的:
@import url( /CS_version/Css/cs_home.css );
@import url( /CS_version/css/validform.css );
原来他在home.css这个文件里面又导入了其他两个css文件.但是很明显路径又错了.
我们改一下路径,改成下面的样子.
@import url(cs_home.css );
@import url(validform.css );
之后保存home.css这个文件.再来看看保存的网页,有点像了

但是还有一些图片不能正常显示.这次你应该知道了,肯定是路径问题.
好,那么到home.css文件(还包括cs_home.css和validform.css)里面看看,我们会发现诸如:BACKGROUND-IMAGE: url(/CS_version/CS_img/home/logo_mid.gif);
里面的路径/CS_version/CS_img/home/logo_mid.gif都改为logo_mid.gif,即去掉/CS_version/CS_img/home/.
因为现在所有图片和css文件在同一级目录里面.当然你可以根据实际情况修改这个目录.
再刷新看看,但是还有些图片不能正常显示.那么我们就要考虑有可能没有把部分图片保存下来.那么直接到原来网站保存对应图片到css文件所在目录.
再看看

第二步:去除保存下来的网页里面无用的内容(包括网站内容,无用的html代码,无用的js代码,无用的超级链接等),
把地方留出来,因为这些地方我们要用php168的标签来动态的调用网站的内容.

第三步:分解刚才处理好的网页为三个文件:
head.htm(网页头部,一般在这个部分放置登陆表单,导航菜单,logo,等等)
index.htm(网页主体,一般在这个部分用标签调用网站各个栏目的内容等等)
foot.htm(网页底部,一般在这个部分显示一些版权信息)
第四步:在去除内容的地方加入标签$label
  • ,其中*是以字母开头的字母和数字的任意结合.
    这个$label
  • 可以加到head.htm,index.htm,foot.htm,list.htm,bencandy.htm中。
    [注].标签$label
  • 是什么东西?
    我们打个比方来说明一下。比如你现在有一个漂亮的静态网页框架。你想把这个漂亮的静态网页框架作成动态网页,
    以方便内容的添加及更改。那么你只需要在要显示内容的地方添加诸如$label[**]的标签。然后再做简单的处理。
    那么原来漂亮但是简单的静态网页就会变成功能强大的动态网站。而且美丽依旧。简单的说,
    这个标签$label[**]就象一个旗帜,他插在网页的不同部位。我们可以用这个旗帜显示文章的列表。
    也可以用他来显示几行几列的图片列表。还可以用他来显示falsh,幻灯片图片,文字+部分内容列表等等。
    我们还可以用他来显示一些插件,比如:天气预报,搜索引擎,投票栏目等等。
    第五步:风格的制作
    上面我们简单的说了一下标签$label[**]。我们说他象一面旗帜,可以插在不同的位置显示不同的内容。
    那么我们有了旗帜,要往哪里放呢?下面我们来介绍一下插放这些标签的地方----网页模板文件。
    网页模板总的分为php168默认风格模板和自己制作的风格模板。他们都放在template文件夹下面。
    其中template/default/为默认模板存放的地方。因为是默认的所以我们尽量不要改动他.
    主要默认模板文件说明:
    alonepage.htm(独立页面模板)
    bencandy.htm(内容页面模板)
    comment.htm(评论页面模板)
    comment_ajax.htm(评论ajax页面模板)
    guestbook.htm(留言本页面模板)
    list.htm(列表页面模板)
    login.htm(登陆页面模板)
    post.htm(发布页面模板)
    refreshto.htm(跳转页面模板)
    reg.htm(注册页面模板)
    search.htm(搜索页面模板)
    showerr.htm(指示提示页面模板)
    splist.htm(专题列表页面模板)
    spshow.htm(专题内容页面模板)
    vote.htm(投票页面模板)
    以上是主要的模板文件。你可以根据你的需要制作自己的模板,不一定全部制作。
    一般主要制作head.htm,index.htm,foot.htm,bencandy.htm,list.htm就基本可以满足需要了。
    当浏览着浏览你的网页的时候,你制作的模板就会呈现给浏览者,而你没有制作的模板系统会调用默认的模板文件。
    当然一个网页里面可能包括图片文件。这些图片文件被放置在images文件夹下面。
    默认风格里面的图片被放置在images/default/下面。当然,一个网页模板还需要一些css样式控制。
    这些样式一般放置在对应的图片文件夹里面。例如images/default/default.css
    另外还有一个php文件用来定义这些风格,以便在后台可以自由切换。
    这些风格控制文件是一个个的.php文件。都放在php168/style/下面。例如默认的为:php168/style/default.php
    那我们要创建自己的风格怎么办呢?好,下面我我们举个例子说明一下:比如我想创建一个风格。
    这个风格好比我们的孩子。我们为了以后方便称呼和调用他,我们肯定需要给这个风格起一个名字。
    我们回顾一下上面一个段落里面默认风格的格式。我们会发现,一个风格模板应该包含三个部分。即:
    Tempalte/default/存放风格模板的网页文件
    Images/default/存放风格模板中用到的图片文件
    Php168/style/default.php定义这些风格
    那么你可以新建一个风格模板应该放在下面格式的文件夹里面:
    Template/my168home/这个里面放网页模板
    Images/my168home/这个里面放网页模板用到的图片
    Php168/style/my168home.php 这个文件夹里面的php文件用来控制样式。

    第六步:将模板里面的图片路径改为:$webdb[www_url]/images/$STYLE/
    第七步:加入一些特定的代码
    风格所需基本代码

    *********************************
    head.htm
    头部特定代码
    <!--
    <?php
    print <<<EOT
    -->
    <head>
    <title>$titleDB[title] powered by www.php168.com</title>
    <link rel="stylesheet" type="text/css" href="$webdb[www_url]/images/default/default.css">
    <link rel="stylesheet" type="text/css" href="$webdb[www_url]/images/$STYLE/css.css">
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <meta name="keywords" content="$titleDB[keywords]">
    <meta name="description" content="$titleDB[description]">
    </head>
    <SCRIPT LANGUAGE="JavaScript">
    <!--//导航菜单
    function guide_link(fid){
    if(fid==0){
    window.location.href="$webdb[www_url]/";
    }else{
    window.location.href='$webdb[www_url]/list.php?fid='+fid;
    }
    }
    function killErr(){
    return true;
    }
    window.onerror=killErr;
    //-->
    </SCRIPT>
    <SCRIPT LANGUAGE="JavaScript">
    <!--//处理大分类一行两个小分类
    function autoTable(div){
    fs=document.getElementById(div).getElementsByTagName("TABLE");
    for(var i=0;i<fs.length;i++){
    fs.style.width='49.5%';
    if(i%2==1){
    if (document.all) {
    fs.style.styleFloat="right";
    }else{
    fs.style.csloat="right;";
    }
    }else{
    if (document.all) {
    fs.style.styleFloat="left";
    }else{
    fs.style.csloat="left;";
    }
    }
    }
    }
    //-->
    </SCRIPT>
    <SCRIPT LANGUAGE="JavaScript" src="$webdb[www_url]/images/default/inc.js"></SCRIPT>
    <SCRIPT LANGUAGE="JavaScript" src="$webdb[www_url]/images/default/default.js"></SCRIPT>
    <SCRIPT LANGUAGE="JavaScript" src="$webdb[www_url]/images/default/swfobject.js"></SCRIPT>
    <SCRIPT LANGUAGE="JavaScript" src="$webdb[www_url]/php168/$fidson_menu"></SCRIPT>
    <body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0">
    <SCRIPT LANGUAGE="JavaScript">
    <!--//目的是为了做风格方便
    document.write('<div class="wrap">');
    //-->
    </SCRIPT>

    ______________________
    尾部特定代码
    <!--
    EOT;
    ?>
    -->
    ********************************
    index.htm
    头部特定代码
    <!--
    <?php
    print <<<EOT
    -->
    _________________
    尾部特定代码
    <!--
    EOT;
    ?>
    -->


    ********************************
    foot.htm
    头部特定代码
    <!--
    <?php
    print <<<EOT
    -->
    _____________________________________
    尾部特定代码
    <SCRIPT LANGUAGE="JavaScript">
    <!--//目的是为了做风格方便
    document.write('</div>');
    //-->
    </SCRIPT>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    clickEdit.init();
    //-->
    </SCRIPT>
    </body>
    </html>
    <!--
    EOT;
    ?>
    -->

    **************************
    list.htm
    头部特定代码
    <!--
    <?php
    $listdb_pic=ListPic($rows=4,$leng=30); //图片主题
    $listdb_pic || $hide_listpic='none'; //不存在图片主题的话.要把图片主题的边框隐藏
    $listdb || $hide_listnews='none'; //如果是大分类的话,就不存在标题,就把标题框隐藏
    print <<<EOT
    -->
    ___________________

    尾部特定代码
    <!--
    EOT;
    ?>
    -->

    ****************************

    bencandy.htm

    头部特定代码
    <!--
    <?php
    print <<<EOT
    -->
    尾部特定代码
    <!--
    EOT;
    ?>
    -->

    **********************************

  • 本版积分规则

    关闭

    推56站长论坛推荐上一条 /1 下一条

    站长QQ
    在线咨询
    咨询热线
    QQ:405327411
    站长

    QQ|关于我们|联系我们|免责声明|网站导航|站长论坛 ( 豫ICP备11018337号-5 )

    王宝臣旗下网站 推56论坛(www.tui56.com)站长论坛 SEO论坛 网络营销论坛 新手站长论坛 网络推广论坛 站长社区 站长网

    Powered by Discuz! X3.4 Licensed

    ©2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表