第13章 新闻发布系统的 页面美工.

Presentation on theme: "第13章 新闻发布系统的 页面美工."— Presentation transcript:

1 第13章 新闻发布系统的 页面美工

2 13.1 JavaScript脚本语言 1.删除新闻信息前弹出用户确定对话框 2.提供新闻编辑的撤销功能

3 13.2 FCKeditor在线编辑器 13.2.1 FCKeditor使用前的准备工作
public $InstanceName：编辑器名称（例如：content），它需要和FCKeditor类的构造方法一起使用才有意义。例如代码：$oFCKeditor = new FCKeditor('content')构造了一个名称为content的在线编辑器，该编辑器的实例名为$oFCKeditor。编辑器的名称（content）类似于多行文本框表单控件textarea的名称；通过实例名（$oFCKeditor）可以访问FCKeditor实例中的其它成员变量，并可以调用FCKeditor类中的成员方法。

4 FCKeditor类中的成员变量 public $BasePath：定义了FCKeditor的根目录，FCKeditor的根目录实际上是fckeditor_php5.php文件和fckconfig.js文件所在的目录。例如：$oFCKeditor->BasePath = 'fckeditor/'。 public $Width：定义了在线编辑器实例的宽度（单位像素），例如：$oFCKeditor->Width = 550。 public $Height：定义了在线编辑器实例的高度（单位像素），例如：$oFCKeditor->Height = 350。

5 FCKeditor类中的成员变量 public $Value：定义了在线编辑器的内容，一般对应于多行文本框表单控件textarea的值。例如代码：$oFCKeditor->Value = "请在此输入新闻的内容！"。 public $ToolbarSet：定义了在线编辑器实例的工具栏集合。默认情况下FCKeditor提供了Default和Basic工具栏集合，工具栏集合类似于Word窗口中的格式工具栏与常用工具栏。例如：$oFCKeditor->ToolbarSet = "Default"或$oFCKeditor->ToolbarSet = "Basic"。

6 FCKeditor类中的成员变量 public $Config：定义了在线编辑器的额外配置，$Config是一个数组，数组中的“键”来自于fckconfig.js文件中的“属性名”。例如：$oFCKeditor->Config['EnterMode'] = 'br'。

7 2.FCKeditor类中的成员方法 public function __construct( $instanceName ) 功能：FCKeditor类的构造方法。需要和FCKeditor类的成员变量$InstanceName一起使用才有意义。 public function CreateHtml() 功能：返回某个在线编辑器实例的HTML代码。例如：$fckeditor = $oFCKeditor->CreateHtml() ; public function Create() 功能：在网页上显示某个在线编辑器实例的HTML代码，例如：$oFCKeditor->Create() ;

8 13.2.3 FCKeditor的高级配置 （1）修改语言配置 （2）修改皮肤配置 （3）添加中文字体 （4）设置回车键模式
（5）设置工具栏展开 （6）设置在线编辑器的文字颜色列表 （7）设置在线编辑器的文字字号列表 （8）设置工具栏集合ToolbarSet （9）设置在线编辑器表情文件所在目录 （10）设置在线编辑器表情文件列表 （11）在线编辑器中表情按钮的其它设置

9 13.2.4 FCKeditor在新闻发布系统中的应用
以新闻添加页面news_add.php代码为例，将news_add.php程序中的代码片段： <textarea cols="60" rows="16" name="content"></textarea> 修改为如下代码。 <?php include("fckeditor/fckeditor.php");//载入FCKeditor类文件 $oFCKeditor = new FCKeditor('content'); // 创建名称为content在线编辑器，实例名为$oFCKeditor $oFCKeditor->BasePath = 'fckeditor/'; // 设置FCKeditor实例的根目录 $oFCKeditor->Width = 550; // 设置FCKeditor实例的宽度 $oFCKeditor->Height = 350; // 设置FCKeditor实例的高度 $oFCKeditor->Value = "请在此输入新闻的内容！"; // 设置FCKeditor实例的内容 $oFCKeditor->ToolbarSet = "Default"; // 设置FCKeditor实例的工具栏集合 $oFCKeditor->Config['EnterMode'] = 'br'; // 设置FCKeditor实例的额外配置 $oFCKeditor->Create() ; // 显示在线编辑器的HTML代码 ?>

10 13.2.5 FCKeditor的文件管理 13.2.6 FCKeditor的瘦身 1、“文件浏览”功能的设置
2、“快速文件上传”功能的设置 3、中文乱码问题的解决 4、文件管理的高级配置 FCKeditor的瘦身

11 13.3 新闻发布系统页面布局的实现 FCKeditor的文件管理DIV+CSS概述 界面布局图

12 使用DIV实现页面布局 准备图片素材

13 13.3.5 CSS热身 #banner{ body{ width:778px; font:12px "宋体"; height:177px;
margin:0px auto; background:url('../images/banner.jpg') no-repeat; } #pagebody{ height:500px; #sidebar{ width:163px; float:left; background-color:#BDBDBD; #login{ margin:10px 0px 0px 0px; body{ font:12px "宋体"; text-align:center; margin:0px; background-color:#FFF; } #container{ width:800px; margin:0px auto; #header{ #menu{ height:74px; background:url("../images/logo.gif") no-repeat; #mainbody{ text-align:left; width:610px; height:500px; float:right; background-color:#D8D8D8; } #mainfunction{ margin:10px 0px 0px 10px; #footer{ width:778px; height:40px; margin:0px auto; background-color:#FFCC00;

14 header层的实现 pagebody层的实现 footer层的实现

15 13.4 新闻发布系统静态和动态页面的嵌入 13.4.1 将用户管理功能嵌入到login层 13.4.2 修改menu层代码
将主要功能嵌入到mainfunction层 sidebar层和mainbody层的高度自适应 防止图片太宽撑破mainbody层