欢迎来到我的网上家园,谢谢关心和支持!

帝国模板制作笔记(仿phpabc.cn)首页head部分

2019-03-07 16:03:13 帝国CMS 帝国
 这部分是首页模板,在后台》模板管理》首页模板  同时,我们在浏览器中打开我们的目标网站:http://www.phpabc.cn/。 右击网页空白处,选择查看源代码,可以一条条对照着修改。建议不要用IE浏览器,用其他浏览器可以将所用到的资源用链接的形式出现,我们可以直接右接下载,包括我们用到的js和css资源,以及需要用到的图片等,都可以下载。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

这句可以改成 <!DOCTYPE html> ,也可以不改

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

头部开始,下面的内容不会在浏览器里显示出来,但它们是网站的一些关键设置。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

这句是网站编码,一般不用修改。

<title> [!--pagetitle--] - Powered by EmpireCMS</title>

这句是标题,会在浏览器标题栏上显示,[!--pagetitle--]这个标签是页面标题,后面的Powered by EmpireCMS是帝国的版权声明,可以删除,也可以改成自己的。
 我改成了<title>[!--pagetitle--] - Powered by Frjy.cn</title>。

<meta name="keywords" content="[!--pagekey--]" />

这句是网页关键字,[!--pagekey--]是关键字标签。栏目页面可以在栏目管理中设置,内容页面是发表信息时设置的关键字。

<meta name="description" content="[!--pagedes--]" />

这句是网页描述,设置方法同上,内容页如果不设置,应当就是信息标题。
以上两句要设置好,关系到网站的SEO,不可随便。 但这段代码不用做任何更改。当然,如果你全站都用得到的,不需要分开设置的也可以直接写在这里。但这样就不灵活了,不建议这样做。

<link href="[!--news.url--]skin/default/css/style.css" rel="stylesheet" type="text/css" />

这句是设置css文件路径,根据实际情况设置,相对于网站根目录。[!--news.url--] 这个标签的含义是网站地址,在后台》系统设置》系统参数设置》基本设置中设置。 我把css文件和其用到的图片等放在skin/tux目录中,所以把它改成了<link href="[!--news.url--]skin/tux/style.css" rel="stylesheet" type="text/css" />。

<script type="text/javascript" src=" [!--news.url--] skin/default/js/tabs.js"></script>

这句是网页要用到的js特效,不用可以删除。不过,这个网站还是要用到js特效的,它引入了两个js,所以将网站的两个js照抄下来:
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://www.phpabc.cn/wp-content/themes/tux/js/tux.js"></script>
第一句看域名,是百度的,不用改,第二句是这个网站的,我们当然也可以直接引用,不过我们要把它改成自己的,
<script src=" [!--news.url--] skin/tux/js/tux.js"></script>
在它们的下面还有这么一段代码:
<!--[if lt IE 9]>
  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <script src="http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.js"></script>
  <![endif]-->
这是兼容ie9浏览器的,这个要写下来。
另外,这个网站上还有这么一句<link rel="shortcut icon" href="/wp-content/themes/Tux/images/favicon.ico" type="image/x-icon" />
这个设置的是网站的图标文件,它将出现在浏览器的标签上,可以换成自己的图标文件<link rel="shortcut icon" href=" [!--news.url--] skin/tux/images/favicon.ico" />

其余的代码不用管,那是广告和其他我们用不到的代码。
 

</head>

这句是头部结束。html标签是成对出现的,要及时关闭,不然会出现一些莫明其妙的错误。

<body class="homepage" >

页面开始,以body开始,class="homepage" 对应着css文件中homepage的样式设置。phpabc用的是<body class="home blog"> ,我们照抄。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表