3.6.2 系内概况
图 3-17 系内概况
系内概况又分为3个2级菜单，本系概况，实验室介绍，师资介绍等。本系概况当中介绍数字媒体技术系的近期情况如图3-17所示。并以最新动态的形式展现出来。师资介绍方面介绍任课老师的基本资料，还附上照片，并把这个模块显示在首页的G区域。实验室介绍当中点击实验室介绍会进入实验室介绍页面。具体介绍实验设计建设状况等。 3.6.3 系内新闻
系内新闻分成3个2级菜单，行业资讯，院系动态，系内新闻。制作过程中采用的制作方法和调用的模块内容跟上一个差不多。可是连接不同的数据表。所体现的内容不同。
3.7 本章小结
本章主要介绍了数字媒体技术系网站的具体布局，具体结构。也说明了设计前端的工作流程，还讲述了界面UI设计，交互设计中的一些理理念设计思想，并用图片的形式展现了设计以后的效果图。
第4章 主要功能的实现
4.1 界面设计
设置公开地联系方式；设置网站整体信息与用户为一体；设置完善地个性化
23
地会员管理与交互系统。
完善的网站内容，网站内容下载系统。网站的整体颜色：灰白色为导航颜色；主体颜色：黑色色；字体：宋体；行距：150%。
网站统一顶部为导航条 站标，系内概况，系内新闻，教务信息，专业介绍，选题系统，教学研究，科研创作 。
网站上中部：网站图片结合；位置导航。
网站中部：网站信息；站点数据；网站导航条；图文信息。 网站底部：网站/版面制作；版权信息。
4.2 具体设计文档
内容和功能设计
这个校园网站主要实现新闻，信息等功能，目标用户主要是Internet的在校学生。先明确这个校园网站提供的主要功能：
(1) 管理员登录系统： 管理网站内容，新闻动态等 (2) 网上教学系统： 提供给学生一些必要的电子书供下载 (3) 教学科研专区： 提供学院教师在个方面的成果及新闻的功能
(4) 新闻公告专区： 提供有关学院的公告通知，计算机方面的最新资讯。
4.3 前台新闻文摘显示
可以根据网站的需要，进行各种方式的插入，自动更新。如显示栏目导航，显示某栏目的最新N条新闻等。 使用管理系统制作动态网页时，可在需要的地方插入相应的代码，即可以多种形式显示新闻 文章的栏目或内容。例如：
一级栏目列表，二级栏目列表，栏目导航列表，栏目的最新新闻(文章)显示条数，某一栏目的热门文章可任意调整。该系统也可经后继开发，使之生成JS代码，在一个主机上维护新闻文章，在其他静态网页中插入代码后显示相应的新闻文章。 4.3.1 网站装饰风格
采用了灰白色为主导航颜色，首页中运用最新更新图片，以及文字交错排版，使整个网站看上去符合跳动的风格。
24
4.3.2 网站的链接结构
旅游网站的主要链接关系如下：
步行天下行，牛人专线，旅游线路，旅游专线，其他资讯等。
4.4 可视化设计
网站可视化设计的主要目的是提供给用户一个关于网站的信息展示方案，一个良好有效的网站可视化设计能给用户留下深刻的印象，使得用户能够自然，友好的浏览Web站点所提供的信息，也是网站设计中重要的一环。
可视化设计最重要的是确定网站的页面布局。然后设计网页的表现框架，建立页面模型。
4.5 具体实现技术
4.5.1 CSS在\数字媒体技术系网站\中的应用实例
在数字媒体技术系网站中的页面，增加了以下的定义，使页面有特殊的显示效果。
数字媒体技术系网站中CSS样式表使用的部分代码： #top {
width: 100%; height: 103px;
background-color: green;
background-image: url(Image/top.jpg); background-repeat: no-repeat; }
在上面的样式表中定义了网页头部的背景图片和颜色，以避免因网页浏览器的设置改变而引起的网页头部的背景图片和颜色变化，影响页面浏览者的信息浏览； top这部分是对网页背景颜色和背景图片的设置。 4.5.2 应用JavaScript设计网页
JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的
25
脚本语言。使用它的目的是与HTML超文本标记语言，Java 脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用，从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷[17]。
JavaScript的出现使得信息和用户之间不仅只是一种显示和浏览的关系，而是实现了一种实时的，动态的，可交式的表达能力[18]。从而基于CGI静态的HTML页面将被可提供动态实时信息，并对客户操作进行反应的Web页面的取代。JavaScript脚本正是满足这种需求而产生的语言。它深受广泛用户的喜爱。它是众多脚本语言中较为优秀的一种，与WWW的结合有效地实现了网络计算和网络计算机的蓝图。
在网站制作过程中使用了下面一段JavaScript照片切换特效代码片段： // cancel close timer mcancelclosetime(); // close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id); ddmenuitem.style.visibility = 'visible'; }
// close showed layer function mclose() {
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; }
// go close timer function mclosetime() {
closetimer = window.setTimeout(mclose， timeout); }
26
// cancel close timer function mcancelclosetime() {
if(closetimer) {
Window.clearTimeout(closetimer); closetimer = null; } }
// close layer when click-out Document.onclick = mclose; // --> $(function() {
$(\(slideshow_transition_effect:'Mosaic,Wipe_from_horizontal_blind,Wipe_from_vertical_blind,
Wipe_from_vertical_center,Wipe_from_horizontal_center,Wipe_to_horizontal_center, Wipe_to_vertical_center,Wipe_from_bottom_to_top,Wipe_from_top_to_bottom, Wipe_from_right_to_left', slideshow_time_interval: '2000', slideshow_window_width: '350', slideshow_window_height: '370s', slideshow_background_color: '#FFF', slideshow_border: '#999 solid 2px', text_effect: 'text_fade' }); });
此代码主要是实现前段图片动态特效的JS代码。照片动态切换效果，可以直接涉及到网站是否有活力，也是整个网站集聚吸引力的地方，所以在使用JS调用的时
27