“摄影基础”教学网站的设计与建设

维普资讯

２００６．２教育传播与技术（总第４９期）　专题学习网站　

‘　

潘燕郭根生　

（山东师范大学传播学院教育技术系，山东济南２０００１４）　

摘要：本文主要从“摄影基础”教学网站的定位、界面设计、资源建设、导航设计以及建站技术五个方面详细介绍了　

“摄影基础”教学网站是如何设计和建设的。　

关键宇：教学网站网站定位界面设计资源建设导航设计建站技术　

“摄影基础”教学网站是山东师范大学传播学院　

经过三年时间建设而成的摄影学科教学网站。网站以　

（二）网站的目标访客定位　

“摄影基础”教学网站的目标访客定位主要是针　

学生为中心进行设计与建设，以摄影技术为基础、摄　对第一类访客，即最初是针对大中专院校开设摄影课　

影艺术为核心，拥有丰富的摄影理论资源和图片资源，　

程的学习者。网站的内容主要是根据山东师范大学传　

是国内高等院校教育技术学专业一个实用的摄影教学　播学院所使用的摄影教材的内容编制的。随着网站建　

网站，也是高等院校学生学习摄影基础、开展美学教　

设的不断深入，网站资源储备的日渐丰富，“摄影基础”　

育、第二课堂的教学网站。下面从网站的定位、界面　教学网站也逐渐纳入第二类目标，即面向摄影爱好者、　

设计、资源建设、导航设计以及建站技术五个方面介　

摄影专业人员，并针对他们的需要开设一些专题性的　

绍网站的特点。　

栏目，如新闻摄影、婚礼摄影、时装摄影等等。　

“摄影基础”教学网站在建设时也考虑到了第二　

网站的定位　

一

、

要建设一个好的站点，首先要有一个准确、合理　

的定位才能设计出一个有特色的教学网站。“摄影基　

础”教学网站是从网站的类型、目标访客、功能三个　

方面进行定位的。　

）网站的类型定位　

“摄影基础”教学网站在网站的策划初期就已经　

把网站定位在以学习者为本，紧紧围绕学习者的学习　

展开建设，开设了“学习艺苑”和“摄影论坛”两大　

模块，为学习者创设了良好的学习交流环境。“学习艺　

苑”模块是学习者们交流学习摄影的体会以及展示摄　

影作品的地方。在“摄影论坛”中，学习者可以提出　

在学习摄影时遇到的问题，等待解答，也可以发布一　

类目标访客，因此十分重视网页的页面设计。网站整　

体采用黑色作为背景，给人一种“酷”的感觉，增加　

了网站的艺术氛同。在首页中使用Ｆｌａｓｈ动画，图文　

声并茂，十分吸引浏览者的目光。同时，网站中大量　

的艺术作品展示，也是吸引第二类目标访客的重要因　

素。　

ｃ－）网站的功能定位　

“摄影基础”教学网站的功能主要定位在摄影教　

学、艺术摄影和交流上。　

教学功能是“摄影基础”教学网站的主要功能。　

针对此项功能开设了“立体教材”模块，这是网站中　

最主要的一个模块。这个模块主要是在教学理论的指　

导下，根据比较权威的摄影教材进行栏目设置。此外，　

些网站中没有的知识，以丰富网站的知识内容。此外，　

为了更好的完成教学功能，网站还设立了“课程简介”　

学习者还可以在论坛中讨论网站中所设置的“课后练　

和“教学信息”模块，这两个模块设置在“立体教材”　

习”，以此来巩固学习。　

模块的前面，使学习者在进行系统的学习之前，对整　

“摄影基础”教学网站以学习者为中心，为学习　

体课程有一个系统的了解。　

者提供一个自主探索、合作学习的互动环境。网站除　

摄影不仅是一门技术，更是一门艺术，特别是随　

了具有互动学习的特点，还因为拥有大量与摄影相关　

着科学技术的发展，数码照相机的兴起，摄影技术变　

的信息资源，又具有主题咨询类教学网站的特点。　

４５　

维普资讯

专题学习网站　

得越来越简单，而人们的审美意识、艺术的修养越来　

越高，拍摄具有较高艺术水平、赢得人众喜爱的照片　

越来越难。因此，“摄影基础”教学网站的功能定位重　

点在艺术上。网站的知识结构建设、界面设计都要围　

绕艺术来进行。因此，网站中设置了大量关于摄影艺　

术方面的栏目，如摄影构图、色彩分析等等。同时把　

大量的摄影作品作为页面设计元素用于美化网页，为　

浏览者创设良好的艺术氛同。　

交流功能也是“摄影基础”教学网站的一个重要　

功能。由于在类型定位中将网站定位为互动学习类型，　

因而其最鲜明的特点就是要为学习者提供自主探索和　

合作学习的互动环境。为了实现这个功能，网站提供　

了“学习艺苑”和“摄影论坛”两个交流平台，方便　

学习者在这里交流对摄影的心得体会。　

二、网站的界面设计　

“摄影基础”教学网站以摄影艺术为核心，界面　

风格的设计同样也体现了艺术性的特征。　

）网站的版式设计　

“摄影基础”教学网站网页的顶部区域是导航部　

分，中间部分是主内容区，底部区域用来放置相关站　

点链接、版权信息。在主要内容区，每一个页面的版　

式设计各有不同，一般采用对称结构。如首页版式设　

计采用严格的对称构图形式，配合左右两侧变化的图　

标、上方滚动变化的图案、文字给人以庄重、变化、　

醒目、均衡的感觉。　

（二）网站的色彩运用　

“摄影基础”教学网站使用黑色作为整个网站的　

背景色。在网页设计中，黑色具有高贵，稳重，科技　

的意象，是一种永远流行的主要色彩，适合同许多色　

彩搭配，是众多设计师喜爱的色彩。黑色能够给人以　

无限的遐想和神秘感，衬托效果显著。黑色衬托亮色　

则会显得更亮，衬托暗色则显得更有层次，衬托鲜艳　

色泽时鲜艳色显得纯度更高，衬托复色则复色显得更　

沉重、成熟，尤其是黑色的底衬托彩色的图片或照片　

时，可以使其更加突出绚丽。因此，照片较多的摄影　

教学网站比较适宜采用黑色背景来衬托网站中的摄影　

作品。比如在“婚礼摄影”网页中，无论是身穿白色　

婚纱新娘的照片还是穿红色中式礼服新娘的照片，在　

黑色背景的衬托下，色彩都更加鲜艳、亮丽。白色的　

文字在黑色背景的衬托下，也更加醒目。　

（三）网站的文字排版　

“摄影基础”教学网站使用黑色作为网站背景是　

为了突出醒目。网站中的文字大多使用对比鲜明的色　

彩，像白色、黄色、蓝色等明度较高的颜色，其中以　

（总第４ｇ期）教育传播与技术　

白色字体为主。有时为了突出强调重点内容，还使用　

红色字体，像“立体教材”栏目的导航页。　

图１　“摄影基础”教学网站一立体教材　

文字作为页面组成元素，它的设计要和整个页面　

的设计相统一。例如，“黄昏映像”网页中，整体以暖　

色调为主，冈此字体的颜色也采用了黄色，与图片和　

整个网页内容相协调。　

“摄影基础”教学网站中正文的字体主要以宋体　

为主，方便浏览者阅读。正文的标题一般使用艺术字　

的形式，增加网页的美感。　

（四）网站的浏览页设计　

“摄影基础”教学网站的图片浏览页主要采用“相　

册形”版面设计，将每张图片分成缩略图、放大图两　

个部分，再将缩略图按照３×４排列方式排成相册的　

版式。再分别为每张缩略图做好链接，点击可以浏览　

到相应的放大图。　

每张缩略图都会加上不同样式的相框，或者是白　

色线形相框，或者是标签形相框等等，使页面的设计　

富于变化。在缩略图下方是每张摄影作品的名称，点　

击浏览放大图时，还会发现每张放大图中还会有对这　

幅摄影作品的简单赏析，有利于学习者的学习。　

三、网站的信息资源建设　

“摄影基础”教学网站的信息资源最初主要是以　

郭根生教授编写的《摄影与艺术》）为主，《美国纽约　

摄影学院摄影教材　为辅，《中国摄影》《大众摄影》　

《人像摄影》等杂志为参考资料，并结合郭根生教授　

多年的摄影教学经验及实践经验建设而成。后又经过　

几次改版扩充，网站的信息资源日趋完善。　

维普资讯

２００６．２教育传播与技术（总第４９期）　

（一）网站的理论资源建设　

专题学习网站　

爱好者。作为一个教育网站，由于含有大量的教学资　

料，同时对信息的传达效率要求也比较高，导航系统　

应该设计得引人注目、操作简便，让浏览者能够以最　

快的速度找到有用的学习信息，从而达到最优的学习　

效率。　

（一）功能导航　

网站的“立体教材”模块从最基本的照相机的简　

单原理开始讲起，详细介绍了胶卷相机和数码相机所　

涉及的基本概念及原理，这部分资源是每个初学者都　

需要了解的。网站遵循从简入繁、循序渐进的原则，　

基本上涵盖了摄影领域的方方面面，使浏览者能对摄　

影有一个全方位的了解，使自己的摄影水平得到逐步　

网站根据内容分为课程简介、教学信息、立体教　

的提高。在这个模块中，除了使用文字信息资源外，　

还采用了大量的图像信息资源，几乎每一个页面中都　

会展示大量的与文字信息相符的摄影作品，浏览者在　

学习基本理论时也得到了艺术的熏陶。　

为了提高网站浏览者的艺术修养，在选择网站信　

息资源时始终坚持以摄影技术为基础，以摄影艺术为　

核心，重点放在摄影艺术信息资源的建设上。为了突　

出摄影艺术的重要地位，在进行信息资源建设时，把　

“摄影与艺术”作为“立体教材”模块中的第一部分，　

充分讲解摄影艺术的重要性和美学特征，并且以袁毅　

平等著名摄影家的作品为例，告诉大家如何才能拍摄　

出高水平的作品。在这一章的页面设计中还加入了大　

量国内外优秀的摄影作品，既起到美化页面的作用，　

又可以提高学习者的艺术欣赏水平。　

（二）网站的图片资源建设　

“摄影基础”教学网站中收集了火量的图像信息　

资源。在“作品赏析”模块中，图像信息资源被分为　

“世界优秀摄影作品”“中国优秀摄影作品”“郭根生　

专题摄影作品”和“研究生作品展”四个栏目。在“世　

界优秀摄影作品”中共有８００幅摄影作品，分为风光　

摄影、广告摄影、人像摄影等九个专题，浏览者可以　

根据自己的需要欣赏不同专题的作品。在“中国优秀　

摄影作品”栏目中共收集了２００幅中国近代优秀摄影　

作品，并对每幅作品的用光、构图等方面作了详细的　

赏析。“郭根生专题摄影作品”和“研究生作品展”两　

个栏目中分别展示了郭根生教授的优秀摄影作品和他　

所带研究生的作品，是本网站的特色栏目，也是更新　

速度比较快的栏目。　

除了在“作品赏析”模块中有专门的图像信息资　

源外，在“学习艺苑”模块的“学生作品”中还收集　

了山东师范大学传播学院不同年级学生的摄影作品，　

其中不乏优秀作品。　

网站还提供了关于人像摄影、摄影构图、景深的　

教学录像，图文声并茂的教学录像极大地吸引了学习　

者的目光，提高了学习摄影的兴趣。　

四、网站的导航系统　

“摄影基础”教学网站是一个针对性较强的网站，　

主要是针对开设摄影课程的大中专院校的师生和摄影　

材、作品赏析、学习艺苑、摄影论坛六个一级栏目。　

为了突出强调这几个一级栏目，在首页的顶部采用了　

一

般网站经常使用的文字横排导航设置，同时又在页　

面的左右两侧采用了图片导航，图片既起到了美化页　

面的作用，又充当了栏目导航，让浏览者很容易注意　

到这六个栏目。　

除了首页上存在功能导航之外，在主要的二级分　

页上也存在功能导航，作用也是为了让浏览者了解网　

站的具体内容，引导浏览者进一步找到所需要的知识　

内容。在二级页面上的功能导航主要采用按钮的样式。　

进入“立体教材”栏目的二级页面，页面中十一个导　

航按钮呈弧线状依次排开，与右边图片中的弧线交相　

呼应，一目了然，同时给人以对称均衡的美感。　

（二）路径导航　

路径导航的意义是告诉浏览者现在“在哪儿”。网　

站的每一页都有一个路径导航，清楚地告诉浏览者当　

前所处的位置，通过路径导航浏览者可以随时回到上　

一

级栏目。　

网站的路径导航位于网页ＬＯＧＯ的下方，网页主　

要内容的上方，用一条水平线与主要内容分开，位置　

突出醒目，同时又不会影响整个网页页面的设计。　

（三）本站地图导航　

“摄影基础”教学网站是一个知识信息量很大的　

教学网站，包括课程简介、教学信息、立体教材、作　

品赏析、学习艺苑、摄影论坛六个一级栏目，每个一　

级栏目下又包括很多子栏目，为了方便浏览者理清整　

个网站的逻辑关系，特意设计了本站地图。地图采用　

书本分章节的方法设计了一个章节图表，分为左右两　

大栏，左边一栏是每一节的标题名称，右边对应这一　

节的内容，又以内容页面为单位分成若干小栏目，每　

个小栏目都设置了超级链，用鼠标单击就可以进入到　

这一页面。这样的设计让浏览者在理清整个网站结构　

的同时，方便地进入自己所需要的页面，充分显示了　

网站地图的优势。　

（四）其他形式导航　

网站的导航系统除了上述三种主要的导航形式之　

外，根据内容多少在某些页面中使用了页面导航，像　

在介绍“从拂晓到黄昏”的拍摄技巧时，就使用了“上　

４７　

维普资讯

专题学习网站　（总第４ｇ期）教育传播与技术２００６．２　

“电影之旅’’专题网站的设计与建设　

罗胤臻　

（晋元高级中学附属学校．卜海２００３３３）　

摘要：本文主要阐述了建设“电影之旅”专题网站的缘由、意义及构建网站的理念、结构、特点，提出建网过程中值　

得思考的问题，为学习资源的建设提供一定的借鉴意义。　

关键词：电影专题网站　

一

、

建设“电影之旅”专题网站的目的　

的现代科幻、栩栩如生的人物、绚丽多彩的画面、曲　

在信息化时代，将现有的教育经验、成果与资源，　

通过“网络”这一媒体进行传播已是必然的趋势。笔　

折动人的情节、优美动听的音乐，在校园网上建立以　

“电影之旅”为主题的专题网站，将世界上最优秀的　

电影献给孩子、让知识信息跨越时空传递给孩子，为　

学生自主学习、自主发展提供一个宽广的学习平台，　

也为广大教师提供丰富的教育、教学素材，也可以为　

者所在的学校开展以影视为学习资源的教育、教学已　

近５年，所积累的经验、成果和资源也比较丰富，这　

些影视资源中有人类数千年积累的文明成果。作为信　

息技术与科技活动的教师，可以充分利用电影中奇异　家长了解孩子、了解教师、了解学校创造条件。　

一

页”“下一页”的页面导航来连接讲述早晨、中午、　

黄昏、夜晚这四个不同时段拍摄技巧的网页，方便学　

习者依次学习。　

分和主要的功能导航。图像处理软件主要使用的是　

网站的最下方是本网站的站外导航，它提供了照　

Ｐｈｏｔｏｓｈｏｐ工具。　

相机网站、摄影教学网站、摄影学会网站的名称以及　

网站中的图像资源特别丰富，为了使网页的界面　

链接的网址，基本上涵盖了国内外与摄影有关的著名　

设计更加美观，在制作网页之前，首先在Ｐｈｏｔｏｓｈｏｐ　

网站，方便浏览者查找本网站未能详尽介绍或者缺少　

里将这些图像处理成需要的样式，然后再进入　

的信息。　

Ｄｒｅａｍｗｅａｖｅｒ编辑器进行网页布局。在Ｄｒｅａｍｗｅａｖｅｒ　

点击网站的版权声明，可以进入“联系我们”的　

中一般用表格设计网页布局。使用表格进行网页布局　

帮助页面，这里提供了有关本网站组织者的信息。如　

与分辨率无关。　

果浏览者在浏览时有什么意见或者遇到什么问题，都　

“摄影基础”教学网站现在己成为山东师范大学　

可以通过这里提供的信息与网站组织者取得联系，解　

传播学院的学生学习摄影技术、提高摄影水平的重要　

决问题。　

网站以Ｄｒｅａｍｗｅａｖｅｒ网页编辑器为主要的制作工　

具，使用Ｆｌａｓｈ软件设计网站的Ｌｏｇｏ、首页的引言部　

途径。　

五、网站的技术实施方案　

由于网站在内容方面强调艺术，因此在策划网站　

参考文献　

［１］刘成新．网络教学资源的设计、开发与评价［Ｊ］．电化教育　

研究，２０００（３）　

时决定把网站建设的重点放在页面设计上，网站建设　

的技术方案决定采用比较简单但又功能强大的静态技　

术方案。同时为了增强本网站的互动功能，特意为网　

站制作了“论坛”模块。　

［２］冯向春．高校图书馆导航系统网页的设计［Ｊ］．现代情报，．　

２００３（９）　

［３］柳林等编著．字体设计与创意　．武汉大学出版社