GONE WITH THE WIND

--tomorrow is another day

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  30 随笔 :: 19 文章 :: 0 评论 :: 0 Trackbacks

2009年4月1日 #

LI代码的格式化:
A).运用CSS格式化列表符: ul li{
list-style-type:none;
}
B).假如你想将列表符换成图像,则: ul li{
list-style-type:none;
list-style-image: url(/blog/images/icon.gif);
}
C).为了左对齐,可以用如下代码: ul{
list-style-type:none;
margin:0px;
}
D).假如想给列表加背景色,可以用如下代码: ul{
list-style-type: none;
margin:0px;
}
ul li{
background:#CCC;
}
E).假如想给列表加MOUSEOVER背景变色效果,可以用如下代码: ul{ list-style-type: none; margin:0px; }
ul li a{ display:block; width: 100%; background:#ccc; }
ul li a:hover{ background:#999; }说明:display:block;这一行必须要加的,这样才能块状显示!

F).LI中的元素水平排列,要害FLOAT:LEFT: ul{
list-style-type:none;
width:100%;
}
ul li{
width:80px;
float:left;
}
<ul><li>的区别
<LI> 的参数设定(常用):
 


例如: <li type="square" value="4">

type="square"
只适用于非顺序清单,设定符号款式,其值有三种,如下,内定为 type="disc":
符号 是当 type="disc" 时的列项符号。
符号 if" width=10 height=10 border=0> 是当 type="circle" 时的列项符号。
符号 是当 type="square" 时的列项符号。
value="4"
只适用于顺序清单,设定该一项的数目,其後各项将以此作为起始数目而递增,但前面各项则不受影响,其值只能是 1,2,3.. 等整数,没有内定值。
<UL>称为无序清单标记。
所谓无序清单就是在每一项前面加上 、、等符号,故又称符号清单。
<UL> 的参数设定(常用):
例如: <UL type="square">

type="square"
设定符号款式,其值有三种,如下,内定为 type="disc":
符号 是当 type="disc" 时的列项符号。
符号 是当 type="circle" 时的列项符号。
符号 是当 type="square" 时的列项符号。

<ul>是项目列表,<li>是列表项,项目列表就是用符号来列的,所以你列出来默认的就是黑点啦,还有一个是<ol>这个是编号列表,用数字来列的,也是用<li>做列表项

 


<li>是 list item 即列表项,但列表有很两种,所以外面得有 <ul> 或者 <ol> 用来区别无序列表(小点点)和有序列表(1,2,3...)。

posted @ 2009-04-13 09:22 张永耀 阅读(390) | 评论 (0)编辑 收藏

(from:http://www.0574dh.com/article.asp?id=420)

/* mozilla.org Base Styles
* maintained by fantasai
* (classes defined in the Markup Guide - http://mozilla.org/contribute/writing/markup)
*/
/* Suggested order:
//显示属性
* display
* list-style
* position
* float
* clear
//自身属性
* width
* height
* margin
* padding
* border
* background
//文本属性
* color
* font
* text-decoration
* text-align
* vertical-align
* white-space
* other text
* content
*
*/
posted @ 2009-04-08 12:31 张永耀 阅读(176) | 评论 (0)编辑 收藏

(from: http://www.webwoo.net/bc/bencandy-38-20144-1.htm)
优化代码:网页技术CSS的font属性的缩写的技巧,缩写有利于减少代码,优化CSS,使之更加合理。

  css font属性是用来控制文字字体、颜色、大小等。而font的属性有多种,在通常情况下,我们用缩写的办法将多种属性概括在一句css代码中。这样极大的减小了代码,优化css文件。

  我们常用的font属性有下面这六种:

font-style设定斜体 如:font-style: italic;
font-weight设定文字粗细 如:font-weight: bold;
font-size设定文字大小 如:font-size: 12px;
line-height设定行距 如:line-height: 150%;
color设定文字颜色(注意不是font-color) 如:color: red;
font-family设定字体 如:font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;

  上述的属性,我们可以概括写在一行font属性里。需要注意的是color属性我们需要单独定义。

font: italic bold 12px/150% "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;}

  上面的例子用一行来定义font属性,分别是:font-style font-weight font-size line-height font-family;而color设定文字颜色需要单独进行定义。

posted @ 2009-04-08 12:30 张永耀 阅读(185) | 评论 (0)编辑 收藏

使用PHP编程的人都会碰到这样一个问题:当PHP代码和HTML代码在一起的时候,看PHP代码很费劲,整个文件也无法用Dreamweaver来编辑,这对于PHP程序员和美工来讲,修改这样的文件就象一个噩梦。
PHP中的模板(Template)技术就是为了解决这个问题而出现的。PHP模板类有很多,比较常见的是 FastTemplate 和 PHPLib, 因为出现得早,在PHP编程界名声很大。PHP程序员不知道这两个类,就象VB程序员不知道MsgBox函数一样,是一件不可思议的事情。
以前我们需要去下载PHP模板类,现在PHP4有了自己的模板类 IntegratedTemplate 和 IntegratedTemplateExtension,功能和PHPLib 差不多。这两个类是子类和父类的关系。一般我们用 IntegratedTemplateExtension 就可以了。让人感到不可思议的是 IntegratedTemplate 不是从 PEAR 类继承过来,无法用到 PEAR 类的 debug 功能。
以下举例子说明它们的用法,假设 IntegratedTemplate 类和 IntegratedTemplateExtension 类分别在 C:\php4\pear\HTML\ITX.php 和 C:\php4\pear\HTML\ITX.php 中。我们写的代码放在C:\TestPHP\PHP4\Welcome.htm 和 C:\TestPHP\HTML\Welcome.php 中。将C:\TestPHP\PHP4 在Web Server 上设成虚拟目录 /testphp 并且给与脚本执行权限,确认C:\TestPHP\HTML\Welcome.htm 无法通过远端浏览器访问。在 php.ini 里面设置 include_path = ".;C:\php4\pear"
例1:
我们在HTML文件中放置变量的标记,用PHP代码设置变量的值,然后将HTML中的标记替换掉,最后输出到客户浏览器。
以下是 Welcome.htm 代码,我们放了三个PHP tag(变量标记)为: {WelcomeTitle}、{UserName}、{WelcomeMessage}



您好,{UserName}


{WelcomeMessage}



以下是Welcome.php代码
<?php
require_once "HTML/ITX.php";

//以下是给变量赋值,在实际代码中可能从Database中取得数据然后赋值
$WelcomeTitle = "欢迎来到网页天堂";
$UserName = "皮皮鲁";
$WelcomeMessage = "您的到来让我们深感荣幸!";

//一般来说这种全局变量放在单独的一个文件中,便于维护
$HTML_CODE_FILE_ROOT = "../HTML/";

$tpl = new IntegratedTemplateExtension($HTML_CODE_FILE_ROOT);

指定要替换 tag 的 HTML 文件
$tpl->loadTemplatefile("Welcome.htm");

替换HTML 文件中的 tag
$tpl->setVariable( array (
"WelcomeTitle" => $WelcomeTitle,
"UserName" =>$UserName,
"WelcomeMessage" =>$WelcomeMessage
) );

输出替换后的 HTML
$tpl->show();
?>

这样写好后,Welcome.htm 仍然可以使用网页编辑器如Dreamweaver、FrontPage 进行编辑,Welcome.php中是纯粹的PHP代码,不含HTML,方便以后的代码修改和维护。
如果将 IntegratedTemplateExtension 类和 PHP4中的 Cache 类 联合使用,在速度上可以得到很好的效果。
PHP4 模板类还可以使用 Block,配合其他 PHP4 中的类 可以很轻松地实现数据库数据检索的翻页,可以很轻松写出论坛之类的软件。

补充说明:为了防止用户直接用 Welcome.htm 看网页,将 Welcome.htm 放在客户访问不到的目录(只要不在Web Server 的虚拟目录下即可)。对于大型的PHP项目,图片、PHP代码、HTML文件、多语言字符串文件都应该放在不同的目录,这样在多人共同做一个项目时不至于混乱。
posted @ 2009-04-08 12:29 张永耀 阅读(359) | 评论 (0)编辑 收藏

分离内容和表现
HTML从来就不是表现的手段,但从用户端结合元素来格式化文本,开发者从中找到操作布局的方法。CSS的强大,使得现在不再需要用HTML做任何表现了,而内容也可以完全从表现(CSS)中分离出来。

这样做有很多好处──通常可以压缩文件容量,有着用一个主要样式表就可控制整个网站而不是单个页面的灵活性,也可能使页面更易用,更具亲和力。

遵循这些基本原则基本上意味着你不应该在HTML内使用样式化的任何事物了。比如font的标签,比如bgcolor的属性不应该再使用。甚至在图像标签img内的边框属性border在XHTML 1.1中也是非法的了。别担心,过时的HTML可以样式化,CSS更可以样式化,而且可以做得更好。

不仅仅是从HTML内剥离表现,内容的结构意味着在适合的地方使用明确的HTML标签。比如,h1,h2等应用在标题上──而不仅仅是使用CSS使字体变大而已。

最佳指引就是一个可视化的浏览器上使用其默认的样式来呈现一个没有样式表(或者有样式表,但不支援样式表的文本浏览器,比如lynx——译者注)的页面。

表格不应该用在布局上──表格用来表示表格式的数据(我们已经不厌其烦地说了很多次──译者注)。也许对于已经习惯传统结构的HTMLer来说,完全改变有很大的技术难度。这个方法很大程度上压缩了文件,而且,基于这些显性代码,它变得更易用,更具亲和力。

关于更多,请阅读CSS高级指南的布局。


在XHTML中所有的标签都必须小写和关闭。没有闭合标签的(如br和img)必须用英文半角正斜杠“/”在后面自关闭(如<br />)。注意在斜杠前应该有一个英文半角空格。

标记也必须是合式的,使元素正确嵌套(比如<strong><em>this</em></strong>,而不是<strong><em>this</strong></em>)。

所有的文档都要有html,head,title和body元素。也必须从文档类型声明开始。

文档主体应该从 p, h1,h2, h3,h4,h5,h6,div, pre,address,ins或者del开始。

属性
所有的属性必须是小写的,它们的值也要用英文半角引号括(")起来。

精简属性是不允许的(比如<input type="checkbox" checked />)。按惯例,精简属性必须给出跟属性名称一样的值(如 <input type="checkbox" checked="checked" />)。

名字 name属性不再是合法的了(除了在表单元素中),应该使用id来代替。

目标属性target不是一个合法的属性。庆幸吧,它有些癫狂。

在img里,alt属性是必须的。

亲和力
为残障人士制做具有亲和力网页的理由是不证而明的。不仅是人道的,而且也对老年用户和五官功能减退的用户有利(想一想,有一天我们老了,视力消退,五官不灵,怎么浏览互联网?为年老积点德,现在就考虑亲和力吧!——译者注)。亲和力不仅与有严重残障人士方便,也使大部分少量消退功能(特别是视觉)的用户更为易用。

这个问题越来越牵涉法律问题了,比如美国的“508条款”的采用,试图积极推动强制使用亲和力;在英国,所有的政府网站必须有一个指定的亲和力程度。什么时候才可以有像在建筑物上的亲和措施的立法,以便普遍用在商业网站上?(中国还不知道什么时候有这种立法呢!但不等于我们就不要关注我们设计的网页的合法性。——译者注)

如果能遵循上述的建议,你的HTML应该已经具备了为残障用户服务的高度亲和力。还有更多的创作使你的亲和力更上一层楼,而且不难。见亲和连接和亲和表单指南。

posted @ 2009-04-08 12:28 张永耀 阅读(352) | 评论 (0)编辑 收藏

怎么改善现有网站

我们大部分的设计师依旧在采用传统的表格布局、表现与结构混杂在一起的方式来建立网站。学习使用XHTML CSS的方法需要一个过程,使现有网站符合网站标准也不可能一步到位。最好的方法是循序渐进,分阶段来逐步达到完全符合网站标准的目标。如果你是新手,或者对代码不是很熟悉,也可以采用遵循标准的编辑工具,例如Dreamweaver MX 2004,它是目前支持CSS标准最完善的工具。

1.初级改善

  • 为页面添加正确的DOCTYPE

很多设计师和开发者都不知道什么是DOCTYPE,DOCTYPE有什么用。DOCTYPE是document type的简写。主要用来说明你用的XHTML或者HTML是什么版本。浏览器根据你DOCTYPE定义的DTD(文档类型定义)来解释页面代码。所以,如果你不注意设置了错误的DOCTYPE,结果会让你大吃一惊。XHTML1.0提供了三种DOCTYPE可选择:

(1)过渡型(Transitional )

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

(2)严格型(Strict )

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

(3)框架型(Frameset )

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

对于我们初级改善来说,只要选用过渡型的声明就可以了。它依然可以兼容你的表格布局、表现标识等,不至于让你觉得变化太大,难以掌握。

Tip:你懒得输入上面过渡型代码的话,可以访问http://www.macromedia.com/网站的首页,然后查看源代码,把head区同样的代码拷贝粘贴就可以了。

  • 设定一个名字空间(Namespace)

直接在DOCTYPE声明后面添加如下代码:

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

一个namespace是收集元素类型和属性名字的一个详细的DTD,namespace声明允许你通过一个在线地址指向来识别你的namespace。只要照样输入代码就可以。

  • 声明你的编码语言

为了被浏览器正确解释和通过标识校验,所有的XHTML文档都必须声明它们所使用的编码语言。代码如下:

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

这里声明的编码语言是简体中文GB2312,你如果需要制作繁体内容,可以定义为BIG5。

  • 用小写字母书写所有的标签

XML对大小写是敏感的,所以,XHTML也是大小写有区别的。所有的XHTML元素和属性的名字都必须使用小写。否则你的文档将被W3C校验认为是无效的。例如下面的代码是不正确的:

<TITLE>公司简介</TITLE>

正确的写法是:

<title>公司简介</title>

同样的,<P>改成<p>,<B>改成<b>等等。这步转换很简单。
  • 为图片添加 alt 属性

为所有图片添加alt属性。alt属性指定了当图片不能显示的时候就显示供替换文本,这样做对正常用户可有可无,但对纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的。只有添加了alt属性,代码才会被W3C正确性校验通过。注意的是我们要添加有意义的alt属性,象下面这样的写法毫无意义:

<img src="logo_unc_120x30.gif" alt="logo_unc_120x30.gif">

正确的写法:

<img src="logo_unc_120x30.gif" alt="UNC公司标志,点击返回首页">

  • 给所有属性值加引号

在HTML中,你可以不需要给属性值加引号,但是在XHTML中,它们必须被加引号。

例:height="100",而不能是height=100。

  • 关闭所有的标签

在XHTML中,每一个打开的标签都必须关闭。就象这样:

<p>每一个打开的标签都必须关闭。</p>

<b>HTML可以接受不关闭的标,XHTML就不可以。</b>

这个规则可以避免HTML的混乱和麻烦。举例来说:如果你不关闭图像标签,在一些浏览器中就可能出现CSS显示问题。用这种方法能确保页面和你设计的一样显示。需要说明的是:空标签也要关闭,在标签尾部使用一个正斜杠"/"来关闭它们自己。例如:

<br />

<img src="webstandards.gif" />

经过上述七个规则处理后,页面就基本符合XHTML1.0的要求。但我们还需要校验一下是否真的符合标准了。我们可以利用W3C提供免费校验服务(http://validator.w3.org/)。发现错误后逐个修改。在后面的资源列表中我们也提供了其他校验服务和对校验进行指导的网址,可以作为W3C校验的补充。当最后通过了XHTML验证,恭喜你已经向网站标准迈出了一大步。不是想象中的那么难吧!

2.中级改善

接下来我们的改善主要在结构和表现相分离上,这一步不象第一步那么容易实现,我们需要观念上的转变,以及对CSS2技术的学习和运用。但学习任何新知识都需要花点时间的,不是吗?诀窍在于边做边学。假如你一直采用表格布局,根本没用过 CSS,也不必急于跟表格布局说再见,你可以先用样式表代替 font 标签。随着你学到的越多,你能做的就越多。好,一起来看看我们需要做哪些事:

  • 用CSS定义元素外观

我们在写标识时已经养成习惯,当希望字体大点就用<h1>,希望在前面加个点符号就用<li>。我们总是想<h1>的意思是大的,<li>的意思是圆点,<b>的意思是“加粗文本”。而实际上, <h1>能变成你想要的任何样子,通过CSS,<h1>能变成小的字体,<p>文本能够变成巨大的、粗体的,<li>能够变成一张图片等等。我们不能强迫用结构元素实现表现效果,我们应该使用CSS来确定那些元素的外观。例如,我们可以使原来默认的6级标题可以看起来大小一样:

h1, h2, h3, h4, h5, h6{ font-family: 宋体, serif; font-size: 12px; }

  • 用结构化元素代替无意义的垃圾

许多人可能从来都不知道HTML和XHTML元素设计本意是用来表达结构的。我们很多人已经习惯用元素来控制表现,而不是结构。例如,一段列表内容可能会使用下面这样的标识:

句子一<br /> 句子二<br /> 句子三<br />

如果我们采用一个无序列表代替会更好:

<ul> <li>句子一</li> <li>句子二</li> <li>句子三</li> </ul>

你或许会说“但是<li>显示的是一个圆点,我不想用圆点”。事实上,CSS没有设定元素看起来是什么样子,你完全可以用CSS关掉圆点。

  • 给每个表格和表单加上id

给表格或表单赋予一个唯一的、结构的标记,例如

<table id="menu">

接下来,在书写样式表的时候,你就可以创建一个“menu”的选择器,并且关联一个CSS规则,用来告诉表格单元、文本标签和所有其他元素怎么去显示。这样,不需要对每个<td>标签附带一些多余的、占用带宽的表现层的高、宽、对齐和背景颜色等等属性。只需要一个附着的标记(标记“menu”的id标记),你就可以在一个分离的样式表内为干净的、紧凑的代码标记进行特别的表现层处理。

中级改善我们这里先列主要的三点,但其中包含的内容和知识点非常多,需要我们逐步学习和掌握,直到最后实现完全采用CSS而不才用任何表格实现布局。

posted @ 2009-04-08 12:21 张永耀 阅读(127) | 评论 (0)编辑 收藏

CREATE USER 'dream2008'@'%' IDENTIFIED BY 'dream1234';
GRANT ALL PRIVILEGES ON *.* TO 'dream2008'@'localhost' IDENTIFIED BY 'dream1234'WITH GRANT OPTION


MAX_QUERIES_PER_HOUR 0 MAX_CONNECTIONS_PER_HOUR 0 MAX_UPDATES_PER_HOUR 0 MAX_USER_CONNECTIONS 0;

MYSQL数据库实用学习资料之常用命令集合
2007-10-12 源自:赛迪网 网友评论 0 条 进入视频教程
Mysql数据库是一个多用户,多线程的关系型数据库,是一个客户机/服务器结构的应用程序。它是对个人用户和商业用户是免费的.


Mysql数据库具有以下优点:


1.同时访问数据库的用户的数量不受限制

2.可以保存超过5千万条的记录

3.是目前市场上现有数据库产品中运行速度最快的数据库系统

4.用户权限设置简单、有效。


Mysql数据库常用命令:


启动Mysql数据库


C:/>cd Mysql5.0/bin

C:/Mysql5.0/bin>mysqld –install 安装Mysql服务

C:/Mysql5.0/bin>net start mysql 启动Mysql服务

请求的服务已经启动。


连接mysql

用户需要提供Mysql的用户名和密码来连接服务器,如果服务器不是在本机,则还需要一个主机名或IP来指定服务器的位置。

C:/Mysql5.0/bin>mysql -h localhost -u root -p

Enter password: ****

Welcome to the MySQL monitor. Commands end with ; or /g.

Your MySQL connection id is 6 to server version: 5.0.18-nt


Type 'help;' or '/h' for help. Type '/c' to clear the buffer.


mysql>

使用一条简单的查询语句


mysql> select version(),current_date;

mysql> select version();select now();


新建或删除一个数据库


Mysql>create database mydb;

Mysql> drop database mydb;


打开的数据库的命令


mysql> use mysql

Database changed


查看数据库的命令


mysql> show databases;


查看数据表的详细结构


mysql> desc func;


新建数据库


mysql> create database school;

Query OK, 1 row affected (0.00 sec)


新建表


mysql> create table user01(

-> id varchar(20) NOT NULL,

-> userName varchar(10) NOT NULL,

-> age int(11) default'0',

-> sex char(2) NOT NULL default'm',

-> PRIMARY KEY (id)

-> )TYPE=InnoDB;

Query OK, 0 rows affected, 1 warning (0.02 sec)mysql>desc student;


插入和删除表中的数据


Create table student(stuName varchar(20),age varchar(20),id varchar(20),set0 char(1));


插入


mysql> insert into student(id,stuName) values('1','tomcat');

Query OK, 1 row affected (0.00 sec)


删除


mysql> delete from student where id='1';

Query OK, 1 row affected (0.01 sec)


删除表中所有数据


mysql> truncate table student;

Query OK, 1 row affected (0.01 sec)


删除表


mysql> create table temp(t varchar(1));

Query OK, 0 rows affected (0.00 sec)


mysql> drop table temp;

Query OK, 0 rows affected (0.00 sec)


创建新用户并给予权限


mysql> grant all privileges on *.* to dbuser@localhost identified by '1234'

with grant option;


更改Mysql用户密码


c:/Mysql5.0/bin>mysqladmin -u root -p password 1234

Enter password: ****


备份数据库及表


我们用mysqldump命令来备份数据库

c:/mysql/bin/>mysqldump –u root –p 3306 mysql>d:/backup.sql

执行此语句将把mydb 备份到D盘的backup.sql文件中


备份多个数据库表


c:/mysql/bin/>mysqldump –u root –p 3306 school user01 user >d:/backup.sql

此句的意思是把school库中的user01表和user表的内容和表的定义备份到D盘backup.sql文件中。


备份所有的数据库


c:/myql/bin>mysqldump –u root –p 3306 –all –database>d:backup.sql


还原Mysql数据库

c:/mysql/bin/mysql –u root –p 3306 school

还原其中的一个表


mysql> source d:/books.sql;

ERROR:

Unknown command '/b'.

Query OK, 0 rows affected (0.00 sec)

Query OK, 1 row affected (0.00 sec)


退出Mysql连接


mysql>quit(exit)


关闭mysql服务


C:/mysql/bin>net mysql

(责任编辑:卢兆林)


mysql4.0.26 win32 下载及安装方法
[color=blue]mysql4.0.26安装方法:[/color]
  
     解压下载后的mysql-4.0.26-win32.rar,执行setup.exe,默认安装,一路NEXT就可以了.
    
     安装完毕后,在“开始”菜单的“运行”中输入:C:\MySQL\bin\mysqld-nt.exe -install ([color=Red]这个版本建议安装在C盘[/color]),运行成功之后再在“开始”菜单的“运行”输入:net mysql start ,将会启动 MySQL 服务.
    
     默认管理员root 密码空 请使用PHPMYADMIN 修改.

[color=red]注: 这个版本建议安装在C盘,如果安装后不能启动,重启服务器后,请直接到系统服务里面去启动MYSQL.

[/color][color=Blue]怎么删除mysql服务?[/color]
开始-运行-CMD-进入MYsql的安装目录下的bin目录输入下面命令
D:\mysql5\bin>mysqld-nt.exe -remove

 


 

posted @ 2009-04-02 15:10 张永耀 阅读(620) | 评论 (0)编辑 收藏

PHPCMS2008模板教程 默认模板解析及模板制作教程 PHPCMS2008官方默认 模板解读 首先打开后台,官方默认模板的存放位置,存放在 ./templates/default/ php cms/ 目录里,从这里我们就知道如果我们要新那建一套模板应该怎么做了: 方法:把全套模板放在一个文
  

PHPCMS2008模板教程 默认模板解析及模板制作教程
首先打开后台,官方默认模板的存放位置,存放在 ./templates/default/phpcms/ 目录里,从这里我们就知道如果我们要新那建一套模板应该怎么做了:
方法:把全套模板放在一个文件夹内,如:W3ZZ,然后上传至templates下面,进入后台,我们在方案管理处就可以看到我们刚刚上传的W3ZZ了,把该方案设置成默认方案,更新模板缓存,然后更新首页就完全是我们W3ZZ里面的模板了,就这样简单……
如图:
 这里就是我们W3ZZ文件夹下面PHPCMS里的所有模板,也就是整站核心的模板,包括首页,栏目首页,列表页,内容页,标签模板……
接下来看一下header.html、index.html、footer.html 三个模板文件。这是首页模板的灵魂!不仅是首页,其它页面的头部文件和页脚文件也是header.html,footer.html这个不用我说了,因为看看模板中的{template 'phpcms','header'}{template 'phpcms','footer'}说一下这三个参数的含义:
第一个template,是整个系统的模板文件夹,也就是前面讲的为什么要传到templates下面的原因,因为系统定义的模板文件夹就为templates,也就是这里的template;第二个phpcms,就是目前你的模板所在phpcms文件夹名称,如果你要新建一个头部,只要在phpcms里面新建一个文件,如:header_w3zz.html,然后用{template 'phpcms','header_w3zz'}就可以了,这样第三个header这个就明白了,是要包含的模板文件的名称,footer这个就一样了。
完整页面模板是header+index+footer,有了这三部分,首页模板就可以说结构完整了。
对应2008的默认模板看:(因为都有默认的,所以就不贴出来了,占地方,也不方便看)
现在我们开始分析header.html的构造
1、<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    w3c国际标准


2、<meta http-equiv="Content-Type" c />     

这里定义字符编码,也就是我们下载的时候是GBK还是UTF-8的,这个{CHARSET}就是编码变量,这个你在安装的时候就已经确定,所以以后的任何操作都要在该编码下操作,否则就会出现乱码,也就是说,出现乱码这些的原因就在于此。

3、<title>{$head[title]}</title>               
这个就是网站名称-网站标题,在后台系统设置--基本设置--网站名称-网站标题,在首页会两个都显示出来,其它的页面就只显示网站名称

4、<meta c name="keywords" />     
在后台系统设置--基本设置--网页关键词

5、<meta c name="description" />   
在后台系统设置--基本设置--网页描述

6、<base href="{SITE_URL}" _fcksavedurl=""{SITE_URL}"" />              
这是全部定义的,就相当于2007里面的{PHPCMS_PATH},同时2008也用。但是在这里定义之后你的模板里面的调用任何文件都不用定义{PHPCMS_PATH}了,如:我要调用images下面的一个图片,你只要写<img src="images/w3zz.jpg">这样就好。{SITE_URL}这个就是你网站的在后台系统设置--基本设置--网站地址

7、<link href="favicon.ico" rel="shortcut icon" />   
这个效果就是:  就是网站地址前面的标识,也就调用images/favicon.ico文件,这个可以制作,有制作工具

8、<link href="{SKIN_PATH}{$mod}.css" rel="stylesheet" type="text/css" />   
引用全部CSS文件,即templates/default/skins/default下面的CSS文件{SKIN_PATH}就是templates/default/skins/default这个地址,{$mod}是当前模型的变量,如:当前是phpcms那就说明CSS文件是phpcms.css

9、<link rel="alternate" type="application/rss+xml" title="{$head[title]}" href="/rss.php?rssid={$catid}" />  
网站标题,即订阅的地址

10<script language="JavaScript" src="data/config.js"></script>  _fcksavedurl=""data/config.js"></script> "        
配置js文件      

<script language="JavaScript" src="images/js/jquery.min.js"></script>  
框架js文件

<script language="JavaScript" src="images/js/css.js"></script>              
cssjs文件

<script language="JavaScript" src="images/js/common.js"></script>      
配置js包括添加收藏夹,设置为首页
<script language="JavaScript" src="images/js/login.js"></script>            
登陆js文件

<script language="JavaScript" src="images/js/validator.js"></script>         
cookie等的js文件

出现相对应的问题,首先检查这里的js是否调用
 

11、<body   
页面载入的时候调用输出catid或者mod,所以说$catid和$mod即栏目ID和模型名称是全局变量

12、<div id="top">
{if isset($MODULE['search'])}
{php $types = cache_read('search_type.php');}
  <div class="f_r">
     <form name="site_search" action="{$MODULE[search][url]}" target="_blank">
   <input type="hidden" name="type" value="all"/>
      <input type="text" name="q" size="20"/>
      <select>
        <option value="all">全部</option>
  {loop $types $k $name}
        <option value="{$k}">{$name}</option>
  {/loop}
      </select>
      <input type="submit" name="s" id="button" value="搜索" />
  </form>
  </div>
{/if}
  <div class="f_l">
    <div id="div_login" style="display:block">
  <form action="{$MODULE[member][url]}login.php" method="post" name="login" >
  用户名:<input type="text" name="username" size="12"/>
  密码:<input type="password" name="password" size="12"/>
     <input type="submit" name="dosubmit" value="登录" />
     <input type="button" name="register" value="注册" />
     <input type="hidden" name="cookietime" value="0"/>
  </form>
</div>
    <div id="div_logined" style="display:none">
  <strong id="logined_username" ></strong>,<a href="{$MODULE[member][url]}">会员中心</a> |
        <a href="{if $PHPCMS['uc']}{$MODULE[member][url]}logout.php{else}javascript:logout('{$MODULE[member][url]}logout.php?action=ajax');{/if}">退出登录</a>
</div>
  </div>
</div>   

这就是网站首页顶站的搜索框和登陆框,以及登陆后的效果。
如图: 
13、<div id="head">
  <div id="logo">
    <a href="{SITE_URL}"><img src="images/logo.gif" _fcksavedurl=""images/logo.gif"" alt="{$PHPCMS[sitename]}" /></a>
    <a href="{SITE_URL}rss.php" target="_blank"><img src="images/rss.jpg" alt="rss信息聚合" /></a></div>
<div class="ad" id="topbanner"><script language="javascript" src="data/js.php?id=1"></script></div>
</div>
<div id="menu">
<ul>
   <li><a href="" id="menu_phpcms"><span>首页</span></a></li>
   {tag_一级栏目}
</ul>
</div>     
头部里面的head  包括logo,订阅标志,banner,导航
效果如图: 

主体页面index.html代码解析
1、第一个div  <div id="main"></div>   这个主要控制页面的宽度,框加显示,具体样式对应看CSS文件里面的#main这样就明白了,所以说看了模板就知道CSS样式是如何的了,这里就告诉需要修改样式的朋友,要修改哪里,先看那里的模板,然后对应<div>的class或者id去相应的CSS里面查找,然后按着你的想法修改
同时我们也可以这样实现。如:我要把整个页面改成960px的宽度,<div id="main" style="width:960px;"></div>这样改是最保险的,既不会影响全局的CSS,也不会影响其它页面的,我只是举个例子,其它的当然也可以这样改,这样操作最方便。
2、第二个div <div id="main_l"></div>   这个一看就知道是main里面的left了,这就id是main_l,如果要修改可参考1的说明。这个div里面包含了幻灯片,搜索框,栏目首页列表。下面我们具体分析:
第一块:幻灯片 首页头条首页推荐
<div class="cribox_bdr">
      <!--幻灯片-->
      <div id="slide">{tag_首页幻灯片}</div>
      <!--热点文章-->
      <div id="hotnews" class="f_r"> {tag_网站首页头条}
        <ul class="text_list">
          {tag_网站首页推荐}
        </ul>
      </div>
    </div>这个里面有注释一看就懂了,里面也就是三个标签,{tag_首页幻灯片}  {tag_网站首页头条}  {tag_网站首页推荐}这个在PHPCMS2008里面分别通过三个推荐位置来实现的,幻灯片是首页焦点,首页头条就是首页头条,首页推荐就是首页推荐,这个一看标签设置就可以明白了,同样你也可以修改这些设置。标签设置的教程我以后补上。
第二块:搜索框
<!--{if isset($MODULE['search'])}-->      这里判断是否安装最搜索模块,安装了就显示,否则不显示
<script type="text/javascript">
function set_type(type)
{
$('#type').val(type);
$('#search_tag>span').removeClass('selected');
$('#type_'+type).addClass('selected');
}
</script>                   这里是用JSfunction调用全站搜索的分类,分类设置在模块管理--全站搜索--分类管理
    <form name="search" action="{$MODULE[search][url]}" target="_blank">    全站搜索的表单里面包含name和动作action
      <div class="search_tag_top mar_10">
        <p id="search_tag"> <span id="type_all" class="selected" >全部</span> {php $types = cache_read('search_type.php');}       搜索条件的读取如:图片,资讯,cache_read()读取缓存文件函数,只要保存在缓存文件里面的都可以直接用该函数读取。
          {loop $types $type $name} <span id="type_{$type}" >{$name}</span> {/loop}   循环出全站搜索的分类  $types是在cache_read()函数读取缓存的时候将所有数据保存在该数组里面的,$type就是你在模块管理--全站搜索--类别管理的类别,如:news。$name是你想要保存的变量,可以自己定义,注意下面的输出是由这个变量控制的。
</p>
      </div>     
      <div class="cribox_bdr_1">
        <input type="hidden" name="type" value="all" id="type"/>
        <input type="text" name="q" size="50"/>
        <input type="submit" name="s" id="button" value="搜索" />
      </div>
    </form>
    <div class="cribox_btm"></div>
<!--{/if}-->
效果图:
 
posted @ 2009-04-01 10:32 张永耀 阅读(1305) | 评论 (0)编辑 收藏