基于工作过程的网页设计与网站开发教程 主编：张洪斌 刘万辉 机械工业出版社.

Presentation on theme: "基于工作过程的网页设计与网站开发教程 主编：张洪斌 刘万辉 机械工业出版社."— Presentation transcript:

1 基于工作过程的网页设计与网站开发教程 主编：张洪斌 刘万辉 机械工业出版社

2 第12章静态网站的动态化 情境1书法家庄辉动态网站建设 1. 项目展示与项目目标 2. 项目资讯 3. 项目计划与决策 4. 项目实施
5. 项目检查与评估 基于工作过程的 网页设计与制作教程

3 项目展示与项目目标 1项目展示与项目目标 掌握搜索CMS系统的能力 掌握静态与动态代码的整合方法
掌握栏目设置、内容添加与模板设置的方法与技巧 掌握动态代码的调试与调用的方法

4 项目资讯 动态网站从功能上简单可以分成前台静态模块和后台动态模块。前面制作的效果图与网页编辑以及动画制作简单可以理解为静态模块，而后台模块主要采用两种方式进行解决： 方式一：下载免费的网站管理平台，然后与前台整合，称之为代码融合。 方式二：所有功能完全自主开发，根据客户的要求定制，逐一实现功能。 以实两种方式各有利弊，方式一使用与初期网页设计的初学者，能够满足大多数通用网站，使用方法简单，但是不能随心所欲的实现通用以外的功能：方式二完全开发，对初学者要求较高，要求能够编写程序，属于网站开发的高级阶段，能够随心所欲实现各种功能。

5 3. 项目计划与决策 书法家庄辉个人动态网站主要是利用第三章制作的主页效果图导出作为主页，利用第四章制作的网站模板效果图导出的网页为模板基础，利用第五章制作的动画应用到项目中去，在第六章的网页基础编辑之上运用CSS样式表，最终由第八章制作出的“庄辉个人网站CSS设计改进完整版”作为静态网页的模型。网站利用代码融合的结构示意图如图所示。 庄辉个人网站CSS设计 改进完整版（主页效果 图、动画、表格布局 后的网页、网站模板） 动态网站CMS系统 （搜索CMS系统、配置IIS 系统，静态与动态的融 合、添加栏目、添加 内容、前台调用） 书法家庄辉个人动态网站 + =

6 3. 项目计划与决策 主要步骤 1）搜索网站管理平台。 2）网站管理平台与静态页面的整合。 3）IIS的安装与配置。 4）栏目的设置。 5）网站内容的添加。 6）网站模板的添加。 7）前台网站调用后台程序。 8）后期完善。

7 搜索网站管理平台 1.讯时网的网址： “讯时程序”栏目

8 搜索网站管理平台 “讯时网站管理系统3.7”下载

9 网站后台与静态页面的整合 1）首先创建文件夹“庄辉个人网站动态完整版”，将前面做好的静态页面index.html、grjj.html等静态界面和flash、images、style文件夹拷贝到“庄辉个人网站动态完整版”文件夹中，将下载的讯时网站管理系统“News3.7.rar”也拷贝至“庄辉个人网站动态完整版”文件夹中，如图所示。

10 网站后台与静态页面的整合 2）将“庄辉个人网站动态完整版”文件夹中的讯时网站管理系统“News3.7.rar”压缩包进行解压缩至“庄辉个人网站动态完整版”文件夹，然后将其重命名为“admin”，同时删除“News3.7.rar”文件，如图所示。

11 IIS的安装与配置 1）执行“开始” →“设置”→“控制面板”命令，在“控制面板”窗口中，点击“添加或删除程序”按钮。 “添加/删除程序”窗口

12 IIS的安装与配置 2）点击“添加/删除Windows组件”按钮，单击“下一步”按钮，直到安装完成为止 。 “Windows组件向导”对话框

13 IIS的安装与配置 3）“新建”虚拟目录” 创建新“虚拟目录”

14 IIS的安装与配置 4）输入虚拟目录别名 zh

15 IIS的安装与配置 5）输入主目录的路径 虚拟目录路径

16 IIS的安装与配置 6）设置站点的访问权限，完成。

17 系统登录与栏目的设置 1）打开IIS，鼠标选中刚创建的虚拟目录“zh”，然后鼠标打开右窗口的“admin”文件夹，选中“login.asp”文件，然后右键执行“浏览”命令，或在浏览器地址栏中输入测试网址

18 程序调试 2）后台管理用户名和密码默认是 admin”，用户名、密码都输入“admin”，输入验证码后，点击“登录”按钮即可进入系统，后台系统的主界面如图所示。

19 程序调试 3）设置栏目界面。 栏目添加主界面

20 程序调试 4）在图中首先删除原有的“国内新闻”模块，依次添加 “书法作品”、“国画作品”、“楷书作品”、“篆书作品”、“草书作品”、“行草作品”、“扇面作品、“论文展示”、“相关评论”等栏目，添加完成后如图所示。

21 程序调试 网站内容的添加

22 程序调试 7）“新闻修改”与浏览新闻。 新闻内容修改页

23 程序调试 网站模板的添加

24 程序调试 模板设置

25 程序调试 3）网页“mb.htm”进入“代码”视图，快捷键<Ctrl+A>将所有的代码全部选取，然后复制代码，进入“书法作品模板”的修改页面，将“新闻显示页面”里的代码全部替换，同样的方式制作“更多新闻列表”页的模板（只需在mb.htm中修改为$$列表$$），如图所示。同样的方式制作“图片模板”页的模板（只需在mb.htm中修改为$$列表$$），如图所示。

26 程序调试 前台网站调用后台程序 1）现在开始调用网站信息，鼠标点击“代码调用”超级链接，之后页面进入如图12-27所示的页面，鼠标点击“请选择栏目”下拉框，选择“书法作品”选项，然后显示代码调用“书法作品”栏目的文本信息，包括文字说明以及调用“书法作品” 的方法。

27 程序调试 前台网站调用后台程序 新闻JS调用代码： <script TYPE="text/javascript" language="javascript" src="/zh/admin/newscodejs.asp?lm2=169&list=10& icon=1&tj=0&font=9&hot=0&new=1&line=2&lmname=0&open=1&n=20&more=1&t=0&week=0&zzly=0&hit=0&pls=0"></script> 图片JS调用代码： <script TYPE="text/javascript" language="javascript" src="/zh/admin/piccodejs.asp?lm2=169&x=1&y=1& w=100&h=100&open=1&n=20"></script>

28 程序调试 piccode.asp?lm=169&lm2=169&n=20&open=1&w=150&h=150&nr=0&nrtop=100&pic=1&bg=ffffff 说明 lm2　　　　 栏目的ID，一般不用改动它。如果lm2=0，就显示所有的栏目。(lm2=0只针对JS调用) n=20　　　　每个标题显示的字数。默认是20个字，如果n=0那么不显示标题 w=150　　　 图片的宽度，默认是150。 h=150　　　 图片的高度，默认是150。 open=1　　　是否新开窗口浏览新闻内容，0不新开　1为新开 nr=0　　　　是否在图片的右边显示一部分新闻内容 0为不显示 1为显示。默认为0 nrtop=100　 如果nr=1显示一部分的新闻内容，那么nrtop=100就是显示内容前多少字，默认是100。 pic=1　　　 显示多少张图片，pic=1，就是显示1张。 bg=ffffff　 新闻调用窗口的背景颜色，默认是白色(ffffff)，切记不要加#。 JS调用参数： x=1         横排显示多少图片  默认是1 y=1　　　   竖排显示多少图片　默认是1

29 程序调试 <script TYPE="text/javascript" language="javascript" src="/zh/admin/piccodejs.asp?lm2=169&x=1&y=10& w=500&h=500&open=1&n=20"></script> 2）使用Dramweaver打开主页“sfzp.html”，鼠标聚焦“书法作品”栏目，进入代码编辑视图，将“JS调用”部分的图片调用代码复制到“书法作品”栏目，然后用浏览器浏览“sfzp.html”页面，“书法作品”栏目如图12-1所示，国画作品、楷书作品等其它栏目都类似。 注意，“论文展示”与“相关评论”栏目进行JS脚本调用的方法。

30 项目检查与评估 学习目标 评价项目 掌握搜索网站CMS系统的能力 能搜索到并下载网站CMS系统 掌握静态与动态代码的整合
掌握栏目设置、内容添加与模板设置 能进行栏目设置、内容添加与模板设置 掌握模板设置 能进行模板设置 掌握动态代码的调试与调用 能进行动态代码的调试与调用

31 第12章静态网站的动态化 教学小结 1. 项目展示与项目目标 2. 项目资讯 3. 项目计划与决策 4. 项目实施 5. 项目检查与评估
基于工作过程的 网页设计与制作教程