《PHP编程基础与实例教程 工业和信息化普通高等教育“十二五”规划教材立项项 教学课件 ppt 作者 孔祥盛 13》由会员分享，可在线阅读，更多相关《PHP编程基础与实例教程 工业和信息化普通高等教育“十二五”规划教材立项项 教学课件 ppt 作者 孔祥盛 13（18页珍藏版）》请在金锄头文库上搜索。
1、PHP编程基础与实例教程 PHP Fundamentals & Practices,第 13 章 新闻发布系统的页面美工,主讲：孔祥盛,本章大纲,13-1 JavaScript脚本语言 13-2 FCKeditor在线编辑器 13-3 新闻发布系统页面布局的实现 13-4 新闻发布系统静态和动态页面的嵌入,13-1 JavaScript脚本语言,1删除新闻信息前弹出用户确定对话框 2提供新闻编辑的撤销功能,13-2 FCKeditor在线编辑器,1. FCKeditor使用前的准备工作 2. FCKeditor类的成员变量和成员方法 FCKeditor类中的成员变量及功能 public $In
2、stanceName：定义了在线编辑器的名称（例如：content），该成员变量需要和FCKeditor类的构造方法一起使用才有意义。例如代码：$oFCKeditor = new FCKeditor(content)构造了一个名称为content的在线编辑器，该在线编辑器的实例名为$oFCKeditor。在线编辑器的名称（content）类似于多行文本框表单控件textarea的名称；通过实例名（$oFCKeditor）可以访问FCKeditor实例中的其它成员变量，并可以调用FCKeditor类中的成员方法。,13-2 FCKeditor在线编辑器,1. FCKeditor使用前的准备工作
3、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。,
4、13-2 FCKeditor在线编辑器,1. FCKeditor使用前的准备工作 2. FCKeditor类的成员变量和成员方法 FCKeditor类中的成员变量及功能 public $Value：定义了在线编辑器的内容，一般对应于多行文本框表单控件textarea的值。例如代码：$oFCKeditor-Value = “请在此输入新闻的内容！“。 public $ToolbarSet：定义了在线编辑器实例的工具栏集合。默认情况下FCKeditor提供了Default和Basic工具栏集合，工具栏集合类似于Word窗口中的格式工具栏与常用工具栏。例如：$oFCKeditor-ToolbarSe
5、t = “Default“或$oFCKeditor-ToolbarSet = “Basic“。,13-2 FCKeditor在线编辑器,1. FCKeditor使用前的准备工作 2. FCKeditor类的成员变量和成员方法 FCKeditor类中的成员变量及功能 public $Config：定义了在线编辑器的额外配置，$Config是一个数组，数组中的“键”来自于fckconfig.js文件中的“属性名”。例如：$oFCKeditor-ConfigEnterMode = br。,13-2 FCKeditor在线编辑器,1. FCKeditor使用前的准备工作 2. FCKeditor类的成
6、员变量和成员方法 FCKeditor类中的成员方法 public function _ _construct( $instanceName )：FCKeditor类的构造方法。需要和FCKeditor类的成员变量$InstanceName一起使用才有意义。 public function CreateHtml()：返回某个在线编辑器实例的HTML代码。例如：$fckeditor = $oFCKeditor-CreateHtml() ; public function Create()：在网页上显示某个在线编辑器实例的HTML代码，例如：$oFCKeditor-Create() ;,13-2 F
7、CKeditor在线编辑器,3. FCKeditor的高级配置 1修改语言配置 2修改皮肤配置 3添加中文字体 4设置回车键模式 5设置工具栏展开 6设置在线编辑器的文字颜色列表 7设置在线编辑器的文字字号列表 8设置工具栏集合ToolbarSet 9设置在线编辑器表情文件所在目录 10设置在线编辑器表情文件列表 11在线编辑器中表情按钮的其它设置,13-2 FCKeditor在线编辑器,4. FCKeditor在新闻发布系统中的应用,BasePath = fckeditor/; / 设置FCKeditor实例的根目录 $oFCKeditor-Width = 550; / 设置FCKedito
8、r实例的宽度 $oFCKeditor-Height = 350; / 设置FCKeditor实例的高度 $oFCKeditor-Value = “请在此输入新闻的内容！“; / 设置FCKeditor实例的内容 $oFCKeditor-ToolbarSet = “Default“; /设置FCKeditor实例的工具栏集合 $oFCKeditor-ConfigEnterMode = br;/设置FCKeditor实例的额外配置 $oFCKeditor-Create() ; /显示在线编辑器的HTML代码 ?,13-2 FCKeditor在线编辑器,5. FCKeditor的文件管理 1“文件浏
9、览”功能的设置 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 aut
10、o; #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 wi
11、dth: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 新闻发布系统页面布局的实现,6. header层的实现 7. pagebody层的实现 8. footer层的实现,13-4 新闻发布系统静态和动态页面的嵌入,1. 将用户管理功能嵌入到login层 2. 修改menu层代码 3. 将主要功能嵌入到mainfunction层 4. sidebar层和mainbody层的高度自适应功能 5. 防止图片太宽撑破mainbody层,
