“唐代诗人白居易”专题网站的设计与开发*

2016-06-22李晓霞咸阳师范学院教育科学学院陕西咸阳712000

中小学电教 2016年4期

☆李晓霞（咸阳师范学院教育科学学院，陕西咸阳　712000）

☆李晓霞
（咸阳师范学院教育科学学院，陕西咸阳712000）

摘要：“唐代诗人白居易”专题网站的设计与开发是以Dreamweaver软件为开发平台，根据教学内容设计了五大导航，包括首页、诗人简介、诗词精讲、名句赏析以及后世评价。学习者可以随时更换页面学习想要掌握的知识，真正地实现以学生为主的学习模式，使学习者成为学习的主体，极大地激发了学习者的兴趣，寓教于乐。

关键词：白居易；Dreamweaver；专题学习网站

随着时代的不断进步，越来越多的人逐渐认识到传统教学不再能够满足学习者的求知需求，而专题学习网站却不同，它融合了视频、声音、动画、文字、图片等多种元素，传统教学的缺点可以得到有效改进，学习者可以随时随地学习，并可以有针对性地进行学习，对于无法一次性全部吸收掌握的部分进行多次学习直至掌握为止。通过专题学习网站不仅可以节约课堂教学时间，更可以使学生明确学习目标，结合动画视频培养发散思维。因此，本课题选择白居易的诗词作为课件开发的主要内容。

一、专题网站整体框架的设计

“唐代诗人白居易”专题网站设计与开发主要包括五大模块：首页、诗人简介、诗词精讲、名句赏析、后人评价。在诗人简介部分又可分为视频、家世生平、个人成就、诗歌理论、秩事典故；诗词精讲部分讲解六首诗词，包括：《长恨歌》、《琵琶行》、《观刈麦》、《忆江南》、《钱塘湖春行》、《卖炭翁》。每首诗会呈现出整篇文章的学习框架，继而是课文内容，课前准备（学习目标、学习重难点、文章背景等），学习视频部分会对整首诗进行分析品读，课文解释部分首先对字词进行解释，然后是整体文章的白话文翻译，文章赏析部分对整首诗进行一个艺术性的评价，最后是课后练习，旨在使学习者进行自我检测，对不足部分可以进行反复学习，所有的练习题目是在学习网站中下载的标准的题目，附带答案与分析。在名句赏析部分选择了各位名家具有代表性的句子进行艺术鉴赏，包括雨、梅花、离别、柳树四大模块，每个模块选择了十句名句，为方便学习者找到更多的关于此类的句子在这一部分做了站外链接，站外链接需要在联网情况下打开。框架设计如图1所示。

图1　“唐代诗人白居易”专题网站设计框架图

二、专题网站素材的准备

本网站是针对中小学生自学及复习白居易的诗作而制作的，而当前中小学生课本中共有八首白居易的诗作，分别是《赋得古草原送别》、《池上》、《忆江南》、《观刈麦》、《钱塘湖春行》、《琵琶行》、《长恨歌》、《卖炭翁》。

诗词精讲模块选择了具有代表性的几首诗作，《长恨歌》是描写唐玄宗与杨贵妃的爱情故事，《卖炭翁》是讽刺社会现实的代表作，《琵琶行》是白居易被贬之后心情郁愤偶遇琵琶女作下的一首诗，《观刈麦》则是白居易描写农民疾苦的，《钱塘湖春行》是白居易被任命为杭州刺史时游览西湖时所作，《忆江南》全诗共有三首，诗人在青年时期曾游历江南，留下了深刻的印象，因此作下了《忆江南》诗三首。

在选择好内容之后，借助优酷网下载了大量的教学视频及诗词解读视频，在格式工厂中进行转化；并在Chinaz.com中下载了与主题相符合的Flash动画，在Flash 8软件中进行修改；课件中的所有图片、导航条、按钮均是在好搜中搜索下载的，由于课件是古诗文的，所以，选择了青花瓷这一比较古典的主题，并将其在Photoshop中进行处理添加文字，使之适用于课件。

三、专题网站的开发

本网站主要是以计算机作为硬件平台开发的，素材搜集环节需要连接网络，处理器CORE I3,网络设备等。开发软件主要以Dreamweaver 8、Flash CS4、Photoshop软件为主。

（一）欢迎界面模块

（1）双击打开Dreamweaver页面，在创建新项目下打开HTML。

（2）打开之后创建站点，点击“站点-创建站点”会出现图2所示界面，命名本网站的站点为bs，并将其保存在电脑f盘的“毕业”文件夹中，之后的所有图片、按钮也都要保存在此，否则会出现无法打开的现象。创建完成后系统会给出提示（如图3）。

图2　

图3　

（3）用Anvsoft Photo Flash Maker对白居易古诗词的相关图片做成一个相册视频，并加入了《春江花月夜》的古筝版的音乐，制成一个欢迎界面，起到一个引导作用，视频播放时可以随时点击按钮进入到主页面中，无需等到视频全部播放完（如图4）。

图4　欢迎界面展示

（二）首页模块

首页是网站的灵魂，其好坏决定着网站是否开发成功，一个网站的首页会对学习起到引导作用，让学习者迅速了解到网站的主要内容使之进入学习者的角色中。

1.首页模板的制作

为了保证网页页面风格统一，这个模板主要应用于首页以及名句赏析部分。

首先要确认的是网站的几大模块，在这一部分首先要做的就是课件的布局，在布局的标准模式下点击表格，把页面顶部分为两个大的部分，一部分放网站的题目，另一部分放网站导航条，这两部分的背景图像是一致的，背景图像的设置方法为：页面属性-背景图像-浏览，选择合适的图像插入，就设置好了背景。接下来是导航条的插入，在开始设置的右半部分插入一行五列的一个表格，将表格边框设置为0，然后插入导航条，调整导航条的大小为166*64。导航条设置好之后，将其链接到对应的页面中，如：诗人简介链接到文件夹shirenji⁃anjie.html中，设置页面留白部分的背景方法步骤与网站顶部的背景一样，继而将页面中的留白部分设置为可编辑区域，方法为：插入-模板对象-可编辑区域，一般情况下，尽量将可编辑区域放在空白部分的左上角，即水平左对齐，垂直顶端对齐。设置完成之后，便可直接生成模板，方法为：插入-模板对象-创建模板。在模板下方创建站外链接，包括诗词网站的链接和站长信箱，站长信箱需要学习者登录自己的邮箱再提出问题发到站长信箱，每一个链接都需要在连接网络状态下打开，最下方是版权信息。模板示意图如图5、图6所示。

图5　模板顶部示意图

图6　模板底部示意图

2.首页的制作

首先，将制作好的模板套用到页面，修改-模板-套用模板到页。首页主要分为五个部分，首先是选取了部分重要的诗人简介使学习者对诗人有一个整体的印象，下面是一个两行两列的表格，包括唐诗文学常识、唐诗欣赏、诗人简介和小测试。小测试在首页只展示了四道题，完整版共有八道题，只需点击更多就可以查看全部题目。在小测试的制作中包括一个Flash动画，对学习者进行提问，“你对白居易的了解有多少”，用Flash动画呈现出来，可以吸引学习者的注意使其深入思考，应用的Flash是从网上下载的，在Flash 8中进行修改并添加文字。Flash中插入了一段背景音乐，音乐可以随学习者的需要在Flash的右上角进行打开或关闭，Flash的插入使得网站的整体页面动起来。紧接着有一组完整版的关于白居易的问题，如：唐代诗人有称“诗圣”的杜甫和“诗仙”的李白，你可知道被人颂称为“诗魔”的是谁？在做测试这部分时笔者是在表单模式下做的，题目有单选题也有填空题，单选题先将题目录入页面中，再在标签文字中将选项依次输入（如图7）。选择题部分，学习者可以直接点击进行选择，填空题需要学习者自行在空白处填入答案。在学习者做完所有的题目之后会看到网页下面的提交按钮，直接点击链接到的页面是题目答案。

图7　单选选项输入

填空题也是先将题目输入，再添加文本字段，方法与图7一样。

3.首页效果（如图88所示）

图8　网站首页

空白部分是插入的Flash，在网页保存中无法显示。

如图8所示是该网站首页，第一，展示了本网站的五大模块；第二，该界面明确清晰地给出了本网站的学习任务，点击相应的模块导航条就可以进行相应的学习；第三，习题的存在可以让学生了解自己之前的学习情况。

（三）“诗人简介”模块

诗人简介部分是为学习者进行诗词学习的准备阶段，只有了解诗人的生平才更能体会到诗人在作诗过程中的心境，了解了诗歌背景之后，有助于学习者整体把握诗词情感基调。

这一部分又包括五个小导航，分别是：视频、家世生平、个人成就、诗歌理论以及秩事典故，为了方便学习者在学习过程中在任何页面都可以随意跳转，将五个导航条全部链接完成后，制作新的模板（如图9）。

图9　诗人简介部分模板示意图

在制作每部分的时候可以直接套用模板，然后将所需的图片、文字内容等粘贴进来，在家世生平和秩事典故的制作过程中，首先将重要事件放在页面开始，如在家世生平中是人的一生大抵可以分为六个部分，分别是：出生乱世、仕官生活、贬谪江州、任职苏杭、晚年生活、洛阳安逝，学习者在接触到诗词的时候可以大致了解这是白居易哪个时期的作品，然后直接点击链接就可以直接跳转到这一时期作者的生活状态介绍，从而掌握诗词创作的背景，在这一部分制作中文字性内容比较多，学习者学习完之后要先返回顶部再进行页面的跳转，无论是返回顶部，还是从六个时期的大标题直接到内容都是同一页面内容的跳转，在此做链接时首先要命名锚点，点击“插入-命名锚点-锚记名称”。然后选中要链接的文字创建链接，创建链接时方法为：#+锚记名称。

由于网站素材大多都已经是搜集好的，所以文字性东西只要直接复制粘贴就可以了，文字在复制过来的时候比较乱，需要稍微调整先选择左对齐再进行文本缩进，段落就自动形成。在此网页还插入了图片，与背景图片插入的不同之处在于图片插入方式是：插入-图像。

（四）诗词精讲模块

与诗人简介部分相同的是要建立一个专属于这一部分的模板，创建好每一部分的链接。

在诗词精讲总页面首先介绍学习的总框架图，在这一页面会有一个简短的视频介绍诗词的学习方法。这里的框架是在Word里面制作而成的，方法是：插入-图片-组织结构图，做好之后直接复制粘贴到Dreamweaver中，同时就会在文件夹中生成GIF格式的图片。以下以《长恨歌》为例进行分析。

在长恨歌网页第一页制作时首先选择了比较符合古诗内容的书卷的一个Flash进行修改与文字的添加，这个Flash中的梅花只会在刚进入页面的时候出现一个绽放的动画，之后一直呈现开放状态。之后的每一首诗也是用了这幅动画只是将文字性内容进行修改。

这一部分的框架图直接可以链接到之后关于这一首诗的每一个页面，由于框架导入之后是一个整体的图片，因此只能选择热区。用矩形工具分别选择学习视频、课文解析、文章赏析、课后练习所在的区域，即成为热区，然后创建链接，分别链接到chg1、2、3、4等。

诗词内容的学习是整个课件的核心部分，整个课件的学习内容包含五部分的内容，通读全篇内容，对整首诗有一个整体的把握。之后是一系列的课前准备，包括教学目的、教学重难点、背景介绍，学习目标是这个课程的学习任务，通过学习目标可以使学习者清楚地认识到这个课程的主要内容，学习要达到什么样的效果等。重难点的分析可以使学习者在学习中着重学习重难点部分。背景介绍是学习中重要的辅助工具，可以使学生了解到作者的创作缘起。

这一部分内容是比较多的，一个页面中虽然可以放下所有的内容，但会使网站显得拥堵不堪，整个篇幅的文字性内容也会使学习者无法耐心看完，因此，与之前网页不同的一点是在网页中插入上下页的翻转，而且每一个下一页都能很好地与上一页面衔接，循序渐进地进行学习，在课文解析中先给出字词的翻译，学习者可以跳转回诗词部分试着进行翻译，再学习提高的全文翻译，两者进行比较找出差距会对自己的古文学习能力有很大的提升。

之后是文章整体的一个赏析，通过这一部分学习者可以对比自己学习过程中对于感情基调的把握，在赏析部分首先是分析文章的艺术特点，其次是对文章每一句的推敲，以及全文中心思想的把握。

最后是课后练习部分，课后练习部分是对学习效果的一个检测，一方面可以考查学习者在本网站中的学习成果；另一方面还可以巩固重要的知识点，使学习者对其加深印象。这一部分的题目考查是比较丰富的，考查学生对于文中修辞、文章意思、主人公形象特点、文章中心思想的掌握情况，最后针对每一个题目进行详细讲解查漏补缺。课后练习截图如图10所示。

图10　课后练习部分习题

（五）名句赏析模块

名句赏析部分是古诗词知识点的延伸，旨在拓宽学生的视野、学习的层面及艺术修养，在这一部分主要选择了比较常见的四个类型的句子进行赏析，分别是雨、梅花、柳树、离别。首先在这一部分会展示出所有的句子，并全部链接，学习者可以根据自身需要选择句子直接进行赏析，赏析页面左边导航条可以直接跳转到名句赏析的主页面，赏析句子时会先对句子的出处做以简介，再进行具体的赏析。

（六）后世评价模块

在后世评价这一模块中主要讲解了以下几部分内容，包括：历史上的今天、个人影响、以及在唐、宋、清、中国近现代以及日本的影响。制作方法与前几模块的制作方法相同。历史上的今天是一个新闻视频的展示，讲的是白居易的诞辰是在772年2月28日以及好友、唐玄宗对于诗人的评价；个人影响则是白居易在整个历史长河中的影响，是继杜甫之后的又一位现代主义诗人，同时也对诗人在各个朝代和国家的影响进行详细分析。在页面底部有返回顶部的按钮，如果需要转换至其他页面则首先需要返回顶部之后再进行模块之间的跳转。

四、专题网站开发中出现的问题及解决对策

（一）表格中内容的不稳定

因为层是很不稳定的，在层上做的内容换个浏览器就会偏离当时定位的位置，于是在这次的网页制作过程中笔者基本都是在布局模式下做的，先进行一个基本的布局，后续需要的时候再添加表格，因此，内容还是比较稳定的，但是在表格中添加的文字在Dreamweaver中浏览的时候与在浏览器中浏览的时候位置总是不同，后来重新添加表格再添加内容之后才得以解决，在以后的制作过程中发现，在属性中直接将光标定位单元格中的垂直属性定位顶端，便不再会出现表格中其他单元格添加内容时，最开始添加内容的单元格中文字自动下滑的现象。

（二）在使用Photoosshhoopp处理图片水印时图片会看起来不完整

在网上下载的图片大多数是有水印的，无法直接使用，因此，需要在Photoshop中进行处理，如果在处理时使用的是橡皮擦工具，虽然会直接擦除水印中的文字，但是擦除后的部分大多会与图片整体格格不入，解决办法是：先用吸管工具在文字旁边吸取与文字背景颜色相同或相近的颜色，再使用橡皮擦。

（三）网站视频的插入和FFllaasshh的插入区别

视频的插入方法是：插入-媒体-插件，但是在制作Flash的时候会发现导出的Flash也是视频格式，如果用与视频一样的插入方法会导致视频无法打开，解决办法是:在插入Flash时应该是“插入-媒体-Flash”，Flash的格式为SWF，视频可插入格式为MPG、AVI等。

（四）框架图的建构

在制作诗词精讲部分的网页时，需要一个大的学习框架图，使学生对于学习内容一目了然，但是在Dreamweaver中无法直接制作，可使用Word制作组织框架图，利用“插入-图片-组织结构图”，做好之后Word中的内容是无法保存为图片的，使其无法导入到网站中，可通过直接复制粘贴的方式导入，该方式会自动生成GIF格式的图片。

（五）背景音乐的插入

虽然音乐可以直接插入，但是之前做过的网页中这种方法存在一定的问题，之后为了保证音乐播放的稳定性，在网络中搜集出一种代码方式的音乐插入，只需将光标定位在网页中的任意位置，然后在代码模式中输入代码，“bgsound”再键入空格键，双击“src”出现浏览，只要把背景音乐的路径输入或者直接打开浏览找到背景音乐，再输入空格键双击“loop”选择“-1”，音乐就会循环播放了。

（六）网页文字内容过多

网站内容需要使图片、文字和视频相结合制作，如果网站中文字内容过多，会失去网站开发的意义，学习者也会在学习过程中失去耐心。在诗词精讲部分就出现了这一问题，一个页面内足以放下所有的内容，直接在框架图中使用热区进行链接就可以完成，在这里有两种办法添加文字性内容，一种是使用滚动条，会使页面显得简单干净，学习者根据需要自行翻动，但是需要用层来做，而Dreamweaver中层是不稳定的，因此，这种方法是不可行的；另一种是直接在页面添加文字，显然一个页面是不足以显示所有内容的。因此最终决定在这一部分运用上下页的按钮，直接跳转。

五、结束语

该专题网站以白居易生平及诗词的学习为主，包括白居易的生平、典故、作品以及后世评价等内容，通过使用Photoshop、Flash等相关软件加工素材，如图片、文字、视频等，集中展示了一个真实的白居易，为传统的教学课堂增添很多生动性、直观性，提高了教学效率和学习效果。但是，在设计开发制作过程中，也遇到了一些问题，如尝试连接数据库以实现更强大的功能。因此，在以后专题网站的设计与开发中，应注重技术能力提升，加强专题网站与学习者的互动，注重激活学习者的思维和提高他们的创新能力。

参考文献:

[1]李显萍.网页设计与制作[M].北京:高等教育出版社,2007.

[2]王秀娟.Flash动画制作实例教程[M].北京:机械工业出版社, 2012.

[3]麓山文化.Photoshopcs4数码照片处理与设计经典208例[M].北京:机械工业出版社,2010.

[4]谢松云.现编网页制作综合教程[M].西安:西北工业大学出版社, 2006.

[5]陈友琴.白居易资料汇编[M].北京:中华书局,2005.

[6]谢思炜.白居易诗集校注[M].北京:中华书局,2006.

[7]王志军.多媒体教学软件设计与开发[M].北京:高等教育出版社, 2006.

[8]贺晓霞,吴东伟等.Flash 8动画制作[M].北京:清华大学出版社, 2006.

[9]谢幼如,李克东.教育技术学研究方法基础[M].北京:高等教育出版社,2006.

[10]武法题.网络课程设计与开发[M].北京:高等教育出版社,2007.

[11]李建珍.多媒体CAI网站设计与制作[M].北京:中国水利水电出版社,2003.