PHP编程基础与实例教程第二版课件13.ppt

PHP编程基础与实例教程第二版 PHP Fundamentals & Practices2nd Edition,第 13 章 新闻发布系统的页面美工,主讲：孔祥盛,本章大纲,13-1 JavaScript脚本语言 13-2 FCKeditor在线编辑器 13-3 新闻发布系统页面布局的实现 13-4 新闻发布系统静态和动态页面的嵌入,13-1 JavaScript脚本语言,1删除新闻信息前弹出用户确定对话框 2提供新闻编辑的撤销功能,13-2 FCKeditor在线编辑器,1. FCKeditor使用前的准备工作,13-2 FCKeditor在线编辑器,2. FCKeditor类的成员变量和成员方法 FCKeditor类中的成员变量 public $InstanceName：定义了在线编辑器的名称（例如：content），该成员变量需要和FCKeditor类的构造方法一起使用才有意义。例如代码：$oFCKeditor = new FCKeditor(content)构造了一个名称为content的在线编辑器，该在线编辑器的实例名为$oFCKeditor。在线编辑器的名称（content）类似于多行文本框表单控件textarea的名称；通过实例名（$oFCKeditor）可以访问FCKeditor实例中的其它成员变量，并可以调用FCKeditor类中的成员方法。,13-2 FCKeditor在线编辑器,2. FCKeditor类的成员变量和成员方法 FCKeditor类中的成员变量 public $BasePath：定义了FCKeditor的根目录，FCKeditor的根目录实际上是fckeditor_php5.php文件和fckconfig.js文件所在的目录。例如：$oFCKeditor-BasePath = fckeditor/。 public $Width：定义了在线编辑器实例的宽度（单位像素），例如：$oFCKeditor-Width = 550。 public $Height：定义了在线编辑器实例的高度（单位像素），例如：$oFCKeditor-Height = 350。,13-2 FCKeditor在线编辑器,2. FCKeditor类的成员变量和成员方法 FCKeditor类中的成员变量 public $Value：定义了在线编辑器的内容，一般对应于多行文本框表单控件textarea的值。例如代码：$oFCKeditor-Value = “请在此输入新闻的内容！“。 public $ToolbarSet：定义了在线编辑器实例的工具栏集合。默认情况下FCKeditor提供了Default和Basic工具栏集合，工具栏集合类似于Word窗口中的格式工具栏与常用工具栏。例如：$oFCKeditor-ToolbarSet = “Default“或$oFCKeditor-ToolbarSet = “Basic“。,13-2 FCKeditor在线编辑器,2. FCKeditor类的成员变量和成员方法 FCKeditor类中的成员变量 public $Config：定义了在线编辑器的额外配置，$Config是一个数组，数组中的“键”来自于fckconfig.js文件中的“属性名”。例如：$oFCKeditor-ConfigEnterMode = br。,13-2 FCKeditor在线编辑器,2. FCKeditor类的成员变量和成员方法 FCKeditor类中的成员方法 public function _construct( $instanceName ) 功能：FCKeditor类的构造方法。需要和FCKeditor类的成员变量$InstanceName一起使用才有意义。 public function CreateHtml() 功能：返回某个在线编辑器实例的HTML代码。例如：$fckeditor = $oFCKeditor-CreateHtml() ; public function Create() 功能：在网页上显示某个在线编辑器实例的HTML代码，例如：$oFCKeditor-Create() ;,13-2 FCKeditor在线编辑器,3. FCKeditor的高级配置 （1）修改语言配置 （2）修改皮肤配置 （3）添加中文字体 （4）设置回车键模式 （5）设置工具栏展开 （6）设置在线编辑器的文字颜色列表 （7）设置在线编辑器的文字字号列表 （8）设置工具栏集合ToolbarSet （9）设置在线编辑器表情文件所在目录 （10）设置在线编辑器表情文件列表 （11）在线编辑器中表情按钮的其它设置,13-2 FCKeditor在线编辑器,4. FCKeditor在新闻发布系统中的应用,以新闻添加页面news_add.php代码为例，将news_add.php程序中的代码片段： 修改为如下代码。 BasePath = fckeditor/; / 设置FCKeditor实例的根目录 $oFCKeditor-Width = 550; / 设置FCKeditor实例的宽度 $oFCKeditor-Height = 350; / 设置FCKeditor实例的高度 $oFCKeditor-Value = “请在此输入新闻的内容！“; / 设置FCKeditor实例的内容 $oFCKeditor-ToolbarSet = “Default“; / 设置FCKeditor实例的工具栏集合 $oFCKeditor-ConfigEnterMode = br; / 设置FCKeditor实例的额外配置 $oFCKeditor-Create() ; / 显示在线编辑器的HTML代码 ?,13-2 FCKeditor在线编辑器,5. FCKeditor的文件管理 1“文件浏览”功能的设置 2“快速文件上传”功能的设置 3中文乱码问题的解决 4文件管理的高级配置,13-2 FCKeditor在线编辑器,3. FCKeditor瘦身,13-3 新闻发布系统页面布局的实现,DIV+CSS概述 界面布局图,13-3 新闻发布系统页面布局的实现,3. 使用DIV实现页面布局 4. 准备图片素材,13-3 新闻发布系统页面布局的实现,5. CSS热身,body font:12px “宋体“; text-align:center; margin:0px; background-color:#FFF; #container width:800px; margin:0px auto; #header width:800px; margin:0px auto; #menu width:800px; height:74px; margin:0px auto; background:url(“/images/logo.gif“) no-repeat; ,#banner width:778px; height:177px; margin:0px auto; background:url(/images/banner.jpg) no-repeat; #pagebody width:778px; height:500px; margin:0px auto; #sidebar width:163px; height:500px; float:left; background-color:#BDBDBD; #login margin:10px 0px 0px 0px; ,#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; ,13-3 新闻发布系统页面布局的实现