《多媒体网站设计》实验指导书.docx
《《多媒体网站设计》实验指导书.docx》由会员分享，可在线阅读，更多相关《《多媒体网站设计》实验指导书.docx（44页珍藏版）》请在冰豆网上搜索。
《多媒体网站设计》实验指导书
《多媒体网站设计》
指导书
计算机科学与技术与学院计算机科学与技术系
1多媒体网站设计概述
1.1课程设计的性质和目的
多媒体网站设计是在学习了面向对象程序设计，JAVA程序设计，数据库原理等课程之后进行的一个重要的实践环节，目的在于将多媒体技术、程序设计和数据库课程的理论和实践联系起来，在老师的指导下完成多媒体网站的规划、设计和管理。
它对巩固所学课程的理论知识、培养学生运用所学知识解决实际问题的能力有着十分重要的作用，有利于启发学生的创新思维和提高学生的工程设计能力和实践动手能力。
1、培养学生根据需要选学参考书，查阅手册，图表和文献资料的自学能力，通过独立思考﹑深入钻研有关问题，初步具备独立分析、解决问题的能力。
2、掌握以网站为代表的多媒体应用系统的设计与制作技术,进一步巩固、深化和扩展学生的理论知识与专业技能。
3、训练和培养学生获取信息和处理信息的能力，提高学生的动手能力，学会运用网站、书籍、素材光盘等方式收集、编辑所需的多媒体素材和网页特效等技能，理解掌握多媒体应用系统的规范化设计与开发方法。
4、训练和培养团队协作精神和共同开发网站的综合能力。
5、培养严谨的工作作风和科学态度，能按课程设计任务书的技术要求，编写设计说明，能正确反映设计和实验成果。
1.2课程设计的任务及要求
1、课程设计的基本要求
（1）了解网站的软、硬件平台，会发布和维护一个实际的网站，学会设计和制作网站，包括完成设计报告。
（2）能够使用相关工具（AdobePhotoshop，MacromediaDreamWeaverMX）的熟练制作网页。
（3）尽量运用业界默认的网站开发规范，努力使自己的站点专业化。
（4）根据教学案例库与教师指导能够够独立完成整个网站项目。
2、课程设计的选题：
在下列选题中任选一个，完成多媒体网站的设计（也可自拟题目，但必须符合设计的总要求）
（1）远程教育网站。
基本要求：
教师可以和学生，在网上进行交互，
如通过讨论区等。
同时学生可以在网上浏览讲义。
（2）娱乐网站。
基本要求：
包括歌曲、影片及其管理界面。
（3）企业网站。
基本要求：
包括企业信息发布及其管理界面。
（4）个人博客网站。
基本要求:
包括个人简介、博客文章、留言三个模块。
3、设计要求：
（1）在网站的主页中包含文字、图形、图像、声音、视频和动画等多媒体元素，各元素排列、摆放整洁、有序，网站界面颜色搭配合理。
（2）在网站主页中，各媒体元素根据需要应具有超级链接功能，可以是页内链接也可以是页间链接。
（3）网页具有动态交互能力，能够和后台数据库动态交互数据。
（4）充分利用多媒体技术使网页或单个媒体下载时间尽量短。
1.3多媒体网站设计的基本原则
1、以客户为中心进行网站设计
网页设计是一个感性思考与理性分析相结合的复杂过程。
它的方向取决于设计的任务，它的实现依赖于网页的制作。
网页站点是展现企业形象、介绍产品和服务、体现企业发展战略的重要途径，因此必须明确设计站点的目的和用户的需求，以消费者为中心，根据市场的状况、企业自身的情况等进行综合分析，从而做出切实可行的设计计划。
2、总体设计方案主题明确
在目标明确的基础上，对网站的整体风格和特色做出定位，对网站的组织结构进行规划。
一个好的网站应该主题鲜明、要点明确，充分利用各种技术手段表现网站的个性和情趣，体现网站的特色。
3、网页形式与内容统一
运用对比与调和、对称与平衡、节奏与韵律以及留白等手段，利用空间、文字、图形之间的相互关系来表达整体的均衡以及和谐的美感。
如对称原则的运用在页面设计时有可能会使页面显得呆板，但如果加入一些有动感的文字、图案，或者采用夸张的手法来表现内容往往会达到更好的效果。
4、网站的结构
网站的结构设计应遵循接哦故清晰、导向清楚、使用方便的原则。
应使用一些醒目的标题或文字来突出产品与服务，在导航设计中使用超文本链接或图片链接，并且页面之间的链接关系要一目了然。
5、访问速度
应想方设法提高网页的访问速度，例如通过网页减肥、Ajax技术来加快访问速度。
绝大多数访问者不会进入等待时间在1分钟以上的站点。
设计网页应尽量避免使用过多的图片及尺寸多大的图片。
设计时最好将主要页面的容量控制在50KB以内，平均30KB左右，以确保普通浏览者等待页面的时间不超过10秒。
6、充分利用多媒体技术
为了吸引浏览者的注意力，页面内容应采用多媒体形式来表现网页内容，但是要注意考虑客户端的传输速度。
7、站点信息的动态发布
站点信息不断更新，会使浏览者了解企业的最新发展动态和网上服务等，同时也会帮助企业建立良好的形象。
应在后台建立信息的动态发布机制计时更新企业站点的内容。
8、提供用户相互沟通的渠道
在企业网站上，应建立和用户沟通的渠道，例如建立留言板和在线E-mail系统、短消息等。
1.4多媒体网站设计的一般方法
要想设计和制作出一个非常出色的网站，必须用心去把握网站建设步骤中每一个环节，基本上可分为以下几个步骤。
1、确定网站的主题、内容、功能：
在网站设计工作之前一定要明确网站的主题（如：
学习、体育、娱乐、慈善、儿童、女性、军事、生活等等），要搞清楚该网站应该包含哪些方面的具体内容，必须具备哪些功能等；否则就不能做到有的放矢，制作一个出色的网站也就无从谈起了。
如果是设计自己的个人主页，想要获得很高的访问率，确定主题一定要注意以下三点：
（1）主题要小而精，千万不要面面俱到，否则给人的感觉就是没有主题，没有特色，样样有却样样都很肤浅；
（2）题材最好是你自己擅长或者喜爱的内容。
比如：
您对足球感兴趣，可以报道最新的战况，球星动态等；
（3）主题需要创新，换句话说：
也就是要有自己的特色，对于一些已经具有相当知名度的相同题材的网站，你要超过它是很非常困难的。
如果是为他人、企事业单位、社会团体等设计网页，在主题的确定方面同样需要注意以下几点：
（1）全面的了解和掌握客户方的背景、文化、业务流程等方面的情况；
（2）要求客户方以书面的形式提供网站主题、内容、功能方面的需求；
（3）对于客户提出的书面报告，每一项都要全面而深刻的理解，及时与客户进行沟通交流，切不可自以为是。
2、网站的整体设计
网站是各个单位、部门在互联网中的门面，一个好的网站能够通过非常出色的整体风格和版式设计将主题鲜明的表现出来；同时，页面看上去还要非常的美观。
在完全了解客户的需求后，就可以进行网站的整体风格和版式设计阶段。
在设计过程中，一定要周到考虑，耐心细致，绘制出相应的草图并附之以说明，从而形成详细而全面的设计文档资料。
网站的整体风格和版式设计完成之后，将设计资料交由客户方审核；对客户提出的意见要做好记录并确定修改方案，经过多次的反复修订后，最终客户满意从而形成定稿，就可以开始下一阶段的工作。
网站的整体风格和版式设计分为以下几个部分：
（1）网站板式设计：
网页版面布局以导航栏位置为界，大致可分为：
上下结构式、左右结构式、上左右结构式、上左中右结构式、综合结构式、无规则结构式。
上下结构式
上下结构式是一种上下框架结构式，通常上方为导航条，或者动态的企业形象、广告区域。
下方为正文、内容部分。
此类结构在内容较少的企业网站或者个人网站较常出现。
有时只在首页使用，二级页面另换相应结构。
左右结构式
左右结构式又称二分栏式。
清晰的分列两旁的框架结构。
一般左侧为导航条，右侧是正文。
由于网站内容较少，因此多数网站都采用上下结构式和左右结构式为框架，展示区域添加大的图片作为公司形象、新产品的展示，以提升公司的整体形象。
上左右结构式
上左右结构式是大中型企业较喜欢的框架式。
通常上方为主要的菜单导航条，左侧为点击出现的细分栏目导航条，下方为较主要栏目及小广告等，右侧为内容区域。
上左中右结构式
上左中右结构式又称三分栏式，是大型企业、电子商务、政府网站、教育机构较喜欢的框架式。
同上左右框架式稍有区别的是中间部分为内容区域，右侧为网站较重要的内容导航区域，或是登陆、搜索区域、小广告等。
综合结构式
综合结构式网站较复杂，特点是功能模块多，信息分类详细，因此根据需要采用区域版面结构较合适。
如有些著名网站，第一页很可能采用的是上下结构式，而第二页根据内容的需要改为上左右结构式，有可能根据区域的需要划分为多种框架结构。
又有的在同一页面或纵深页面里，可以拆分出几个不同的框架结构类型，都是为合理配合信息内容的需要，有针对性地进行排版设计。
较常见的是信息储量大的门户网站，框架中的结构变化，使该网站风格有别于其他网站。
不规则结构式
不规则结构式有别于上面的框架结构式。
相对来说，页面的信息量少，通常一张形象、广告图片下来，重在渲染这个网站的气氛。
类似封面类型，有点击进入下页的入口。
无规则框架式风格较随意自由，凸出网站个性意图，能给浏览者带来强烈的视觉冲击，以致于以产品宣传为目的的企业和个人网站的爱好者，都热衷于此种框架式。
少见的结构式
通常使用这类结构式的网站有两种情况，一是放置更多的信息栏目和内容的网站；二是追求个性的企业、组织或者个人的网站。
（2）网站的目录结构和导航栏的设计：
网站的目录是指建立网站时创建的目录。
目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的维护，以后内容的扩充和移植有着重要的影响。
所以建立目录结构时要注意以下几个方面：
不要将所有文件都存放在根目录下。
将所有文件都放在根目录下，很容易造成：
文件管理混乱，搞不清哪些文件需要编辑和更新，哪些无用的文件可以删除，哪些是相关联的文件，影响工作效率；上传速度变慢，服务器一般都会为根目录建立一个文件索引，如果将所有文件都放在根目录下，那么即使只上传更新一个文件，服务器也需要将所有文件再检索一遍，建立新的索引文件，很明显，文件量越大，等待的时间也将越长。
按栏目内容建立子目录。
子目录的建立，首先按主栏目建立。
友情连接内容较多，需要经常更新的可以建立独立的子目录。
而一些相关性强，不需要经常更新的栏目，例如：
网站简介、站长情况等可以合并放在一个统一目录下。
所有程序一般都存放在特定目录，例如：
CGI程序放在cgi-bin目录，所有提供下载的内容也最好放在一个目录下，便于维护管理。
在每个主目录下都建立独立的Images目录。
一般来说，一个站点根目录下都有一个默认地Images目录。
将所有图片都存放在这个目录里很不方便，比如在栏目删除时，图片的管理相当麻烦。
所以为每个主栏目建立一个独立的Images目录是方便管理的。
网站的导航栏其实就是一组超链接，这种超链接使站点的结构清晰、连接简单、查找方便，导航栏可以是按钮或者文本超链接，使访问者可以既快速又容易地转向站点的主要网页。
导航栏对整个网站内容有提纲的作用。
站点的浏览导航必须要设计得简洁、易用。
常见的方法是整个网站网页的顶部或者左侧放置一个菜单条。
由于导航对于可用性和内容查找来说非常关键，因此要尽可能标准化主导航。
（3）数据库的选择：
动态网站，总要涉及到数据库操作，在网站的总体建设中，首先面对的就是采用哪一种数据库？
现今在国内，进行网站建设所使用的主流数据库有以下几种:
ACCESS
ACCESS数据库适用于数据量较小、数据运算速度要求不高的中小型企业的网站建设，但由于数据库与网站文件存放在一起，因此安全性会较低。
MS-SQL
MS-SQL数据库由于是独立的服务系统，与文件完全分开，安全性和运行速度都非常快，适用于大中型企业网站建设。
MY-SQL
MY-SQL技术性和稳定性更高一层，尤其是便于备份和管理，安全性更高，适用于电子商务网站和大型门户网站的建设。
ORACLE
ORACLE数据库是一个对象—关系数据库管理系统。
它提供开放的、全面的和集成的信息管理方法。
它具有场地自治性（SiteAutonomy）和提供数据存储透明机制，以此可实现数据存储透明性，因此，比较适用于电子商务网站和大型门户网站的建设。
（4）功能设计：
网站的功能设计在网站的建设当中起到的作用是相当重要的，它是整个网站策划中最为核心的一步。
设计出新颖强大的功能，对于网站的建设和推广营销来说这是一个关键的环节，没有它可以说网站的建设与推广举步维艰。
网站在功能设计中要注意以下几点：
功能的可用性：
如果网站的功能只有少数几个人会用，或者说看起来很强大，实际用起来很繁杂的话，用户也不会接受。
功能的实用性：
实用性的功能是对于用户使用该网站有实质性意义的功
能，是为网站的核心思想服务的功能。
满足够用性原则设置实用的性功能对于树立整个网站的专业形象和核心形象是非常有必要的。
功能的可扩展性：
在功能设计时要考虑今后的需求变化，为其发展留下可扩展的空间，根据市场的变化需求寻求功能的不断的强大和完善。
3、网页的详细设计
总体设计阶段以比较抽象概括的方式提出了解决问题的办法。
详细设计阶段的任务就是把解法具体化。
详细设计主要是针对程序开发部分来说的。
但这个阶段的不是真正编写程序，而是设计出程序的详细规格说明。
这种规格说明的作用很类似于其他工程领域中工程师经常使用的工程蓝图，它们应该 包含必要的细节，例如：
程序界面，表单，需要的数据等。
程序员可以根据它们写出实际的程序代码。
4、网站的测试与发布
网站完成后在上传到服务器之前应该在安装不同浏览器的环境中进行测试，测试目的主要是察看：
（1）网站是否能够在不同的浏览器下能正常打开（如：
Flash动画、JavaScript程序等）；
（2）测试所有的网页元素是否正常显示（如：
字体、图片、色彩等）；
（3）测试网站中是否存在中断的链接等。
如果以上测试都很正常就可以将整个网站上传到服务器中。
5、网站的更新与维护
网站运行一段时间后，通常会出现以下问题：
（1）网页的内容随着时间的推移会过时；
（2）先前没有发现的问题和不足逐步暴露出来。
所以网站的更新与维护通常是不可少的；更新后的网站同样需要经过测试，然后再上传到服务器中覆盖旧的文件。
1.5网站开发规范
任何一个项目或者系统开发之前都需要定制一个开发约定和规则，这样有利于项目的整体风格统一、代码维护和扩展。
由于Web项目开发的分散性、独立性、整合的交互性等，所以定制一套完整的约定和规则显得尤为重要。
定制一系列约定和规则，包括组件团队、文件夹命名规则、文件名命名规则、程序代码编程风格、数据库设计约定。
这些规则和约定需要与开发人员、设计人员和维护人员共同讨论定制，将来开发都将严格按规则或约定开发。
每个团队开发都应有自己的一套规范，一个优良可行的规范可以使我们工作得心应手事半功倍，这些规范都不是唯一的标准不存在对与错，也许有些地方与你当前使用的习惯相驳，很多地方都有争议。
。
非常明显在Web项目开发中有前后台开发之分，前台开发主要是指非程序编程部分，主要职责是网站AI设计、界面设计、动画设计等。
而后台开发主要是编程和网站运行平台搭建，其主要职责是设计网站数据库和网站功能模板的实现。
下面的这些规范主要是从这2个方面来定制的，比较适合中小型网站或者Web项目的开发规范。
1．组建开发团队
在接手项目后的第一件事是组建团队。
根据项目的大小团队可以有几十人，也有可以是只有几个人的小团队，在团队划分中应该含有6个角色，这6个角色是必须的，分别是项目经理，策划，美工，程序员，代码整合员，测试员。
也许你的团队还没有6个人，没有关系一个人可以有多个角色，比如项目经理还可以有策划这个角色，如程序员还可以含有代码整合和测试这2个角色，如果你的项目够大人数够多那就分为6个组，每个组分工再来细分。
下面简单介绍一下这6个角色的具体职责。
项目经理：
项目总体设计，开发进度的定制和监控，定制相应的开发规范，负责各个环节的评审工作，协调各个成员（小组）之间开发。
策划：
提供详细的策划方案和需求分析。
还包括后期网站推广方面的策划。
美工：
根据策划和需求设计网站AI，界面，Logo等。
程序员：
根据项目总体设计来设计数据库和功能模块的实现。
代码整合员：
负责将程序员的代码和界面融合到一起，代码整合员可以制作网站的相关页面，
测试员：
负责测试程序。
2．开发工具
Web开发工具主要分为3部分，第一部分是网站前台开发工具，第二部分是网站后台开发环境，第三部分是项目管理和辅助软件。
下面分别简单介绍这三部分需要使用的软件。
网站前台开发主要是指Web界面设计。
包括网站整体框架建立、常用图片、Flash动画设计等等，主要使用的相关软件是：
AdobeIllustrator、AdodbPhotoshop、DreamweaverMX、FlashMX等。
网站后台开发主要指网站动态程序开发、数据库建模，主要使用的相关软件是：
PowerDesigner（数据库建模），PowerDesigner在数据库设计方面应用非常强大，用它可以快速创建数据库概念和物理模型。
RationalRose（程序建模），这是Rational公司出品的一种面向对象的统一建模语言的可视化建模工具。
用于可视化建模和公司级水平软件应用。
RationalRose允许开发人员，项目经理，系统工程师和分析人员在软件开发周期内在将需求和系统的体系架构转换成代码，消除浪费的消耗，对需求和系统的体系架构进行可视化，理解和精练。
网站项目管理主要指对开发进度和代码版本的控制。
开发进度用MicrosoftProject来制定，代码版本控制采用VisualSourceSafe，当然还有其他的选择比如CVS和RationalClearCase。
网站测试采用VS.net的附带工具MicrosoftApplicationCenterTest，它可以进行并行、负载测试等。
程序文档编写采用Word，用WPS也可以。
3.网站开发流程
在项目开始实施之前一个很重要的工作步骤也就是制订工作流程，图1的开发流程可以比较好地体现开发的整个环节。
图1
从图1可以看到2条主线，这2条主线分别是前台开发和后台开发。
前后台开发在项目开发早期互相没有交叉，当然不是绝对没有，Web策划和需求分析都是互相有关系的，一个是网站表现形式和风格的策划另一个是网站功能的策划，它们是衣服和躯干的关系。
到了开发后期就需要把界面和功能模块结合起来形成一个统一，也就是即将发布的网站。
4．数据库开发规范
数据文件命名采用系统名+_+文件类型，比如系统名为kupage,则数据库文件命名为kupage_database.mdf，有的数据库文件有多个，比如SQLServer就有2个，一个是数据库文件，另一个是日志文件，那么他们的文件命名分别为kupage_database.mdf，kupage_log.log。
文件名全部采用小写。
数据库表命名规范，表名长度不能超过30个字符，表名中含有单词全部采用单数形式，单词首写字母要大写，多个单词间不用任何连接符号。
若库中有多个系统，表名采用系统名称+单词或多个单词，系统名是开发系统的缩写，系统名称全部采用小写英文字符,如bbsTitle,bbsForumType。
若库中只含有一个系统，那么表名仅用一个单词或多个单词。
单词选择能够概括表内容的一个或多个英文单词，如UserInfo,UserType。
关联表命名规则为Re_表A_表B,Re是Relative的缩写，如：
Re_User_ArticleType,Re_User_FormType。
数据库字段命名规范，数据库字段名全部采用小写英文单词，单词之间用”_”隔开，命名规则是表别名+单词，如：
user_name,user_pwd。
表别名规则，如果表名是一个单词，别名就取单词的前4个字母；如果表名是两个单词，就各取两个单词的前两个字母组成4个字母长的别名；如果表的名字由3个单词组成，你不妨从头两个单词中各取一个然后从最后一个单词中再取出两个字母，结果还是组成4字母长的别名。
视图名采用规则View_表A_表B_表C,View表示视图。
这个视图由几个表产生就用”_”连接几个表的名，如果表过多可以将表名适当简化，但一定要列出所有表名。
存储过程命名规则P_表名_存取过程名（缩写），比如P_User_Del，P_ArticleType_AddData。
SQL语句编写规则，关键字必须大写，其他书写按上述命名规则，比如：
SELECTuser_id,user_nameFROMUserWHEREuser_id=‘tom’
5．文件夹文件名命名规范
文件夹命名一般采用英文，长度一般不超过20个字符，命名采用小写字母。
除特殊情况才使用中文拼音，一些常见的文件夹命名如：
images（存放图形文件），flash（存放Flash文件），style（存放CSS文件），scripts（存放Javascript脚本，inc（存放include文件），link（存放友情链接）,media（存放多媒体文件）等。
文件名称统一用小写的英文字母、数字和下划线的组合。
命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，二是当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作。
（1）图片的命名原则名称分为头尾两部分，用下划线隔开，头部分表示此图片的大类性质例如广告、标志、菜单、按钮等等。
✧放置在页面顶部的广告、装饰图案等长方形的图片取名：
banner
✧标志性的图片取名为：
logo
✧在页面上位置不固定并且带有链接的小图片我们取名为button
✧在页面上某位置连续出现，性质相同的链接栏目的图片我们取名：
menu
✧装饰用的照片我们取名：
pic
✧不带链接表示标题的图片我们取名：
title
下面是几个范例：
banner_sohu.gif、banner_sina.gif、menu_aboutus.gif、menu_job.gif、title_news.gif、logo_police.gif、logo_national.gif、pic_people.jpg。
（2）动态语言文件命名规则性质_描述，描述可以有多个单词，用”_”隔开，性质一般是该页面的概要。
范例：
register_form.asp，register_post.asp,topic_lock.asp
6．程序代码编程规范
一个良好的程序编码风格有利于系统的维护，代码也易于阅读查错。
在此只讨论ASP的编程风格和约定。
在ASP中所有变量是弱变量，无需定义就可以直接使用，而且代码不区分大小写。
但其他语言一般这些都要定义的，为了养成良好的编程习惯，编写代码可按照以下规则：
（1）每个变量名必须定义，在ASP文件的最开始添加语句，强制定制每个变量。
（2）出于易读和一致性的目的，在代码中使用以下变量命名约定：
子类型
前缀
示例
Boolean
bln
blnFound
Byte
byt
bytRasterData
Date（Time）
dtm
dtmStart
Double
dbl
dblTolerance
Error
err
errOrderNum
Integer
int
intQuantity
Long
lng
lngDistance
Object
obj
objCurrent
Single
sng
sngAverage
String
str
strFirstName
（3）程序代码需要有缩进，缩进采用键盘Tab键，不采用空格键。
并
升级会员 