《多媒体技术及应用》
课程设计报告
课程名称 多媒体技术及应用 设计题目 网页设计与制作 专业班级
学生姓名 学号
指导教师
起止日期 2013 年 9月 2日至 9 月 5日
数理与信息工程学院
目 录
摘要„„„„„„„„„„„„„„„„„„„„„„„„„„„1 关键字„„„„„„„„„„„„„„„„„„„„„„„„„„1
一、概述„„„„„„„„„„„„„„„„„„„„„„„„„2
1.1 课题的意义和解决的问题„„„„„„„„„„„„„„„„2
1.2 系统实现的具体功能„„„„„„„„„„„„„„„„„„3
1.3 系统的特点与创新点„„„„„„„„„„„„„„„„„„3
1.4 软件与硬件的运行环境„„„„„„„„„„„„„„„„„4
二、功能需求分析„„„„„„„„„„„„„„„„„„„„„4
2.1 课题的社会和技术背景„„„„„„„„„„„„„„„„„4
2.2 客户与功能的需求分析„„„„„„„„„„„„„„„„„5
2.3 系统运行软件和硬件环境的分析及确定„„„„„„„„„„6
2.4 系统的具体功能要求„„„„„„„„„„„„„„„„„„6
三、系统设计„„„„„„„„„„„„„„„„„„„„„„„6
3.1 软件与开发平台„„„„„„„„„„„„„„„„„„„„6
3.2 框架与模板间的联系„„„„„„„„„„„„„„„„„„7
3.3 项目的详细设计„„„„„„„„„„„„„„„„„„„„7
四、技术实现„„„„„„„„„„„„„„„„„„„„„„„8
4.1 主要功能模板的实现„„„„„„„„„„„„„„„„„„8
4.2 主要技术问题的解决方法„„„„„„„„„„„„„„„10
4.3 亮点和创新点的实现„„„„„„„„„„„„„„„„„11
五、总结„„„„„„„„„„„„„„„„„„„„„„„„12 参考文献„„„„„„„„„„„„„„„„„„„„„„„„13
附录„„„„„„„„„„„„„„„„„„„„„„„„„„14
多媒体技术及应用
设计者：莫仁宗 学号：11600122
摘 要 《多媒体技术及应用》是计算机科学与技术专业的一门专业选修课。课程综合讲述了多媒体计算机的基本原理、关键技术及其开发和应用。在信息技术飞速发展的今天，人们获取信息的方式更多是来源于互联网。而吸引浏览用户的则是视觉效果出色、信息量丰富、使用起来便捷的网页，所以网页设计尤为重要。本文从网页设计的角度出发，介绍一些设计中要素和技巧，最为基本的框架和运用PS处理图片，DW的使用，以及用Adobe premiere对一些视屏的剪辑等等。
关键字：多媒体 网页设计 框架 PS DW premiere
一、 概述
1.1 课题的意义和解决的问题
自己动手实践制作html网页，初步了解Dreamweaver软件的功能布局和一些基本操作；掌握对网页内容排版的操作，做到网页内容将来在浏览器中显示效果美观；初步了解并可以使用脚本语言对网页内容的控制，了解其基本语法结构；将自己做好的网页放在上面，以实现他人通过网络访问到此网页。调整好网页布局，使其各表格应尽可能对齐，整体界面简
洁、美观。网页应实现对输入内容的纠错检验，实现上传照片的功能。要用Tomcat架构服务器，使做好的html网页可以在其他电脑上通过地址访问得到。
1.2 系统实现的具体功能
制作一个网页，使第三方可通过网络访问的我们的网页。我会对想相关照片和视屏进行处理，以便我的队友可以快速的在网页上添加照片与视屏。
1.3 系统的特点与创新点
我们小组的作品首页特点是整体框架干净，唯美，有层次感。色调给人一种视觉美，使第三方不会有视觉疲劳。而且，我们大胆的创新了栏目的信息多样化。而，我对素材的处理则十分的带美感。
1.4 软件与硬件的运行环境
由于我们小组的分工明确，对于后台我不是十分了解。我们一般在XP的电脑系统中运行软件，而我对照片和视频的处理都是用PS CS5和premiere完成的。
二、 功能需求分析
2.1 课题的社会和技术背景
当今社会发展的速度非常快，21世纪电脑的飞速发展互联网已成为人们快速获取、发布和传递信息的重要渠道，正以一种前所未有的冲击力影响着人类的活动。虽然这个时代准备过去，但下个时代大部分人都认为是移动信息时代。而，网页的却还要不停的发展，所以网页时代还有很长的路要走。今天的网页技术已近是非常有火候的了，基本的问题都是可以解决的。
2.2 客户与功能的需求分析
在Internet飞速发展的今天，互联网已成为人们快速获取、发布和传递信息的重要渠道，正以一种前所未有的冲击力影响着人类的活动。它在人们
政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显的格外重要，它已成为政府、企事业单位信息化建设中的重要组成部分。
现今的社会，人们已经离不开了网络，网络已经成为人与人之间交流的一种形式，它能够把事情的复杂化转为简单化，摆脱了时间和空间的限制。网站为很多人提供了一个网络生活空间，通过其网页展示了企业介绍、城市文化、校园文化介绍、招商信息、加盟程序、留言等一系列内容的介绍。为了更好的宣传和服务于经济发展，我通过制作一个网站来介绍宣传一下我的家乡。本文比较系统的阐述了有关网站建设方面的相关理论知识及该网站开发设计，充分体现了计算机技术服务于经济建设的重要思想。
2.3 系统运行软件和硬件环境的分析及确定
硬件：操作系统：Microsoft Windows XP Professional
软件：Macromedia Dreamweaver 8
Dreamweaver
Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着Dreamweaver 8的发布，更坚定Dreamweaver在该领域的地位。它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前网站设计、开发、制作的首选工具。 Adobe Photoshop CS5
Adobe Photoshop是公认的最好的通用平面美术设计软件。由Adobe公司开发设计。其用户界面易懂，功能完善，性能稳定，所以，在几乎所有的广告、出版、软件公司，Photoshop都是首选的平面工具。 Adobe premiere
Premiere是视频编辑爱好者和专业人士准备的必不可少的编辑工具。它可以提升您的创作能力和创作自由度，它是易学、高效、精确的视频剪辑软件。Premiere提供了采集、剪辑、调色、美化音频、字幕添加、输出、DVD刻录的一整套流程，并和其他Adobe软件高效集成，使您足以完成在编辑、制作、工作流上遇到的所有挑战，满足您创建高质量作品的要求
2.4 系统的具体功能要求
掌握对网页内容排版的操作，做到网页内容将来在浏览器中显示效果美观；初步了解并可以使用脚本语言对网页内容的控制，了解其基本语法结构；将自己做好的网页放在上面，以实现他人通过网络访问到此网页。调整好网页布局，使其各表格应尽可能对齐，整体界面简洁、美观。网页应实现对输入内容的纠错检验，实现上传照片的功能。要用Tomcat架构服务器，使做好的html网页可以在其他电脑上通过地址访问得到。
三、 系统设计
3.1 软件与开发平台
Macromedia Dreamweaver 8, Adobe Photoshop CS5, Adobe premiere
3.2 框架与模板间的联系
最开始网页呈现在你面前的时侯，它就好像一张白纸，它需要任意挥洒设计才思。虽然我们能控制一切你所能控制的东西，在开始的时候，但最好明白网页布局的基本概念。
网页主要是做一个表格样式，相对简单。在做时，一开始可以多生成几行几列，方便后面对单元格进行合并操作，最终调成自己需要的24（行）×6（列）样式。
添加文本输入框后，主要就是调整网页布局。开始可以直接拖动来调整，但这往往会牵一发而动全身，后面的调整动作很可能会把前面调好的部分再次破坏，所以应十分注意。可以在大体调的差不多后，在左侧点击拆分，然后直接在文本框的代码中调整数据大小，来实现对文本框长度的调整。
我们的目的是使文本输入框正好填充整个单元格，并且确保文本框左侧的文字不会因为太长儿发生折行现象，为照片上传预留空间，调整好整个页面的文字格式和大小以及各边框的颜色，最终目的是保证整个页面整齐、简洁、美观
3.3 项目的详细设计
静态页面是网页的代码都在页面中，不需要执行asp,php,jsp,.net等程序生成客户端网页代码的网页。静态页面不能自主管理发布更新的页面,如果想更新网页内容,要通过FTP软件把文件DOWN下来用网页制作软件修改。但是静态页面最大的好处是下载速度快，因为不需要程序运算和数据库连接。常见的静态页面以.html、.htm为扩展名的。并非网站上没有动画的就是静态页面。动态页面是通过执行asp、php、jsp、.net等程序生成客户端网页代码的网页。动态页面通常可以通过网站后台管理系统对网站的内容进行更新管理。发布新闻，发布公司产品，交流互动，博客，网上调查等，这都是动态网站的一些功能，也是我们常见的。动态网页是需要语言环境支持的，动态页面常见的扩展名有：.asp、 .php、 .jsp 、.cgi 等。动态页面的“动态”是网站与客户端用户互动的意思，而非网页上有动画的就是动态页面[4]。
动态网页是最常用的网站建设的一种表达形式，其优点在于可以根据先前所制定好的程序界面，根据用户的不同请求返回相应的数据。可以说是一对多的关系。从而达到资源的最大利用和节省服务器上的物理资源。如果今后需要改变站点风格，只需要重新制作前台所访问的数据即可。只要数据库结构不变，可以很快的进行改版的。
四、 技术实现
4.1 主要功能模板的实现
网页设计是一个互动的过程，不仅是设计师构思设计就可以完成的。从客户提出需求到最终发布，期间需要客户与设计人员共同参与协商才可以，具体流程如下：
首先，获取客户需求和资料。在设计网站页面之前，设计师需要知道客户的需求，从而确定客户建立网站的目的。客户提出网站需求是非常重要的一个环节。没有详细的需求，设计人员无法凭空进行设计制作。在这个步骤中，双方的沟通与交流是非常重要的。
其次，确定网站内容。设计人员选择适合自己的图像编辑软件、动画制作软件和网页制作软件进行网页的初步设计，这中间可能还需要和客户进行多次沟通才能达到客户满意的效果。在具体设计时，设计人员应该为网站定位一个主题，从而保证所有网页都围绕这个主题进行设计制作，保证风格的和谐统一。
然后，申请域名和空间。使用该方法能够有效同步管理文件。还可以通过FTP软件连接到服务器空间上，然后上传文件。
最后，后期维护。一般静态网站上传后，如果客户方没有专业人员维护，这样就需要设计人员从客户方获取新资料进行定期或不定期的更新。如果是动态网站，设计人员需要负责培训客户方如何使用后台管理，这样客户就可以自己通过后台管理添加信息，设计人员只要及时更正动态网站的错误即可。
网站实际上是由很多网页组成的，那么网页之间是如何联系的呢？这就是本章要讲的内容----网页的“链接”。“链接”，又称“超链接"（Hyperlink）,它作为网页的桥梁。网页中的很多对象都可以加入“链接”属性。在Dreamweaver 8中，如果以“链接”的媒介来划分的话，则“链接”可以分为“文字链接”、“图像链接”、“图像地图链接”、“内部链接和外部链接”、“E-mail链接”、“命名锚记链接”、“文件下载链接”和“跳转菜单”，共8种。
4.2 主要技术问题的解决方法
由于小组的的分工，我会对一些图片进行处理，有时会遇到点问题。
比如，将一张婚纱照的人物换到有浙师大的背景后，透明婚纱的部分不怎么好，后来我将透明婚纱的部分复制一层，添加黑色蒙版，进行曲线调色，并调节这一图层的透明体，这样透明婚纱就处理的差不多了，再用高斯模糊处理下，照片的效果就比较好了。还有对一些网上照片素材的修复，有些照片的噪点比较多，我用PS CS5处理后效果也不怎么好，我就下载了一个滤镜：NeatImage，对其进行了降噪处理这样图片的效果就挺好了。记得有一张人物照，其眼睛部分不怎么突出，我就对其眼圈用椭圆工具建立选区，经过曲线，涂抹处理。而，人物的双眼皮非常不明显，我就用钢笔画出其双眼皮，填色，涂抹做出双眼皮。最后还对其头发做了点高光部分处理。
4.3 亮点和创新点的实现
网站充斥着枯燥的设计，这样一种标准化的界面可以使浏览更方便，但同时带给用户一种很世俗的体验，并不能与访客产生一种积极的联系。
面对这种单调的设计，有一种解决方法，就是使用颜色。可能没有其他设计元素能像颜色一样能影响人们对世界感受。颜色可以瞬间改变我们的情绪和意见。颜色会让我们感觉到舒适、敬畏，或者激动。在界面设计中，颜色组合对设计非常有用。可以区分设计让用户更加难忘、引导用户使用户专注于交互、吸引用户使页面布局更舒适，更有魅力。
我将网站的色调做的很醒目，尤其是一些照片比较让人感觉深刻。
五、 总结
本设计根据课程论文要求细则的要求制作，功能基本实现。网页对填写的内容有一定的纠错检验机制，大量寻找素材，上传照片并做适当的剪裁,和用PS对一些特殊照片进行处理，以及运用premiere对一些视屏的剪辑。
这是我首次运用Dreamweaver、java语言进行网页的制作，一切都是从零开始学习，所以制作的时候难免会过于简单，考虑的也不是很周全。在设计过程中不可避免地遇到了各种各样的问题，由于整个设计是我们小组三人一起完成的，而我的主要分工是用PS对框架的简单处理，寻找合适的素材，对一些照片用PS进行美化或其他处理，以及对相关视屏用premiere剪辑。
在制作的过程中碰到过一些比较棘手的问题都一一解决了，让我们小组在解决问题方面的能力得到了提高。
当然，最终的做品还是有一些不完善的地方，我们也不是非常满意。虽然存在各种各样的问题，但是，这次动手实践经历的意义也是显而易见的。整个开发的过程对我来说是一次将理论应用于实践的过程，是将以前所学知识充分利用的过程，是一次真正的实践过程。另外，亲自动手也让自己看到了自身能力的不足，看到了理想与现实之间的差距，这一切都需要今后进一步加强学习理论知识与真正动手做一些课题来弥补。
网页设计与制作毕业设计是在指导教师的悉心指导下独立完成的。虽然内容
还有很多不足，但是我的确能够感到在我制作过程中技能的提高。在今后的学习生活中，我将不断提高自己网页设计与制作的能力和水平，从而弥补本次设计中的不足。
虽然我在小组的分工让我没有太深的对代码进行处理，但是我也对代码的编写有了更深的理解与掌握。对于网页的排版的倒是深有体会，由于我不停的对网页的排版进行更改，所以对于排版我相信我以后会更加的掌握。还有以前我没有接触过Dreamweaver，经过这次的网页制作我对Dreamweaver有了新的体会，我觉得以后再做网页设计时可以灵活的运用Dreamweaver。记得刚开的时候我找来的素材都是直接给队友的，经过小组的协商后，我会把所有的素材都经过PS CS5处理后再给队友，这样减轻了队友的压力，还不知不觉中提高了我对PS的运用。最后有一段视频的剪辑，虽然要给队友的剪辑视频不怎么搞笑，但我后来经常的对许多视频进行剪辑，有时候不知不觉的沉浸在自己的搞笑气氛中，当然，最好的还是让我体会到了视频剪辑的快乐。
记得以前我很少参加小组的共同活动，而这次我们三人一起完成了这个课题。有时候，发现当自己和队友在奋斗的时，自己会偷看一下队友，发现队友的激情与奋斗在激励着我，野激励着我们这个团队，还有奋斗时的队友还挺可爱的。也不知道在我偷看队友一眼的时候，队友是否也曾这样悄悄的看过我，我想，应该是有的，这会让我油然而生一种开心的感觉。时间总是在悄悄的流逝，我相信我的队友也会想我一样，当回忆起那一起奋斗的日子，我们的脸上会有一种笑容。我也坚信这种团队精神会陪伴着我，让我在往后的日子依旧充满对生活的向往与激情。
当然，也许我们的导师对我没有什么印象，但当老师指点我的那一刹那，老师伟大的奉献就已经深深的印在我的脑海。千年前的古人的那句：一日为师，终身为师。对于21世纪今天的我们此刻的心情依旧管用。我也曾想过假如我们老师不戴眼镜会不会更加的有男人味，我觉得不管带不带眼镜，李老师依旧是那么的男人。在以后的学习与生活中，我希望自己不会让老师对我有所失望，因为我们是祖国的新动脉。
这次的网页设计与制作课题，让我学到的不止是学习上的问题，更多的是为人处世总体说来，在这次网页设计中，学到了很多在课堂内所学不到的知识真正拓展了自己的能力，是一次难得的历练经历收获很大。
参考文献
唐永明.浅议网页设计与制作[J].科技信息.2009年
李东生 清华大学出版社 《Deamweaver网页设计与配色技术精粹》 胡燕洁 中国青年出版社 《HTML标准教程》
附录
代码：
'请勿改动下面这三行代码
const ChannelID=2
Const ShowRunTime="Yes"
MaxPerPage=20
strFileName="Article_Class2.asp?ClassID=" & ClassID & "&SpecialID=" & SpecialID
Set rsArticle= Server.CreateObject("ADODB.Recordset")
Set rsPic= Server.CreateObject("ADODB.Recordset")
%>
onmousemove='HideMenu()'>
dim sqlRoot,rsRoot,trs,arrClassID,TitleStr
sqlRoot="select
C.ClassID,C.ClassName,C.RootID,L.LayoutFileName,L.LayoutID,C.Child,C.ParentPath From ArticleClass C inner join Layout L on
C.LayoutID=L.LayoutID where C.ParentID=" & ClassID & " and
C.IsElite=True and C.LinkUrl='' and C.BrowsePurview>=" & UserLevel & " order by C.OrderID"
Set rsRoot= Server.CreateObject("ADODB.Recordset")
rsRoot.open sqlRoot,conn,1,1
%>
set rsArticle=nothing set rsPic=nothing call CloseConn() %> |
《多媒体技术及应用》
课程设计报告
课程名称 多媒体技术及应用 设计题目 网页设计与制作 专业班级
学生姓名 学号
指导教师
起止日期 2013 年 9月 2日至 9 月 5日
数理与信息工程学院
目 录
摘要„„„„„„„„„„„„„„„„„„„„„„„„„„„1 关键字„„„„„„„„„„„„„„„„„„„„„„„„„„1
一、概述„„„„„„„„„„„„„„„„„„„„„„„„„2
1.1 课题的意义和解决的问题„„„„„„„„„„„„„„„„2
1.2 系统实现的具体功能„„„„„„„„„„„„„„„„„„3
1.3 系统的特点与创新点„„„„„„„„„„„„„„„„„„3
1.4 软件与硬件的运行环境„„„„„„„„„„„„„„„„„4
二、功能需求分析„„„„„„„„„„„„„„„„„„„„„4
2.1 课题的社会和技术背景„„„„„„„„„„„„„„„„„4
2.2 客户与功能的需求分析„„„„„„„„„„„„„„„„„5
2.3 系统运行软件和硬件环境的分析及确定„„„„„„„„„„6
2.4 系统的具体功能要求„„„„„„„„„„„„„„„„„„6
三、系统设计„„„„„„„„„„„„„„„„„„„„„„„6
3.1 软件与开发平台„„„„„„„„„„„„„„„„„„„„6
3.2 框架与模板间的联系„„„„„„„„„„„„„„„„„„7
3.3 项目的详细设计„„„„„„„„„„„„„„„„„„„„7
四、技术实现„„„„„„„„„„„„„„„„„„„„„„„8
4.1 主要功能模板的实现„„„„„„„„„„„„„„„„„„8
4.2 主要技术问题的解决方法„„„„„„„„„„„„„„„10
4.3 亮点和创新点的实现„„„„„„„„„„„„„„„„„11
五、总结„„„„„„„„„„„„„„„„„„„„„„„„12 参考文献„„„„„„„„„„„„„„„„„„„„„„„„13
附录„„„„„„„„„„„„„„„„„„„„„„„„„„14
多媒体技术及应用
设计者：莫仁宗 学号：11600122
摘 要 《多媒体技术及应用》是计算机科学与技术专业的一门专业选修课。课程综合讲述了多媒体计算机的基本原理、关键技术及其开发和应用。在信息技术飞速发展的今天，人们获取信息的方式更多是来源于互联网。而吸引浏览用户的则是视觉效果出色、信息量丰富、使用起来便捷的网页，所以网页设计尤为重要。本文从网页设计的角度出发，介绍一些设计中要素和技巧，最为基本的框架和运用PS处理图片，DW的使用，以及用Adobe premiere对一些视屏的剪辑等等。
关键字：多媒体 网页设计 框架 PS DW premiere
一、 概述
1.1 课题的意义和解决的问题
自己动手实践制作html网页，初步了解Dreamweaver软件的功能布局和一些基本操作；掌握对网页内容排版的操作，做到网页内容将来在浏览器中显示效果美观；初步了解并可以使用脚本语言对网页内容的控制，了解其基本语法结构；将自己做好的网页放在上面，以实现他人通过网络访问到此网页。调整好网页布局，使其各表格应尽可能对齐，整体界面简
洁、美观。网页应实现对输入内容的纠错检验，实现上传照片的功能。要用Tomcat架构服务器，使做好的html网页可以在其他电脑上通过地址访问得到。
1.2 系统实现的具体功能
制作一个网页，使第三方可通过网络访问的我们的网页。我会对想相关照片和视屏进行处理，以便我的队友可以快速的在网页上添加照片与视屏。
1.3 系统的特点与创新点
我们小组的作品首页特点是整体框架干净，唯美，有层次感。色调给人一种视觉美，使第三方不会有视觉疲劳。而且，我们大胆的创新了栏目的信息多样化。而，我对素材的处理则十分的带美感。
1.4 软件与硬件的运行环境
由于我们小组的分工明确，对于后台我不是十分了解。我们一般在XP的电脑系统中运行软件，而我对照片和视频的处理都是用PS CS5和premiere完成的。
二、 功能需求分析
2.1 课题的社会和技术背景
当今社会发展的速度非常快，21世纪电脑的飞速发展互联网已成为人们快速获取、发布和传递信息的重要渠道，正以一种前所未有的冲击力影响着人类的活动。虽然这个时代准备过去，但下个时代大部分人都认为是移动信息时代。而，网页的却还要不停的发展，所以网页时代还有很长的路要走。今天的网页技术已近是非常有火候的了，基本的问题都是可以解决的。
2.2 客户与功能的需求分析
在Internet飞速发展的今天，互联网已成为人们快速获取、发布和传递信息的重要渠道，正以一种前所未有的冲击力影响着人类的活动。它在人们
政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显的格外重要，它已成为政府、企事业单位信息化建设中的重要组成部分。
现今的社会，人们已经离不开了网络，网络已经成为人与人之间交流的一种形式，它能够把事情的复杂化转为简单化，摆脱了时间和空间的限制。网站为很多人提供了一个网络生活空间，通过其网页展示了企业介绍、城市文化、校园文化介绍、招商信息、加盟程序、留言等一系列内容的介绍。为了更好的宣传和服务于经济发展，我通过制作一个网站来介绍宣传一下我的家乡。本文比较系统的阐述了有关网站建设方面的相关理论知识及该网站开发设计，充分体现了计算机技术服务于经济建设的重要思想。
2.3 系统运行软件和硬件环境的分析及确定
硬件：操作系统：Microsoft Windows XP Professional
软件：Macromedia Dreamweaver 8
Dreamweaver
Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着Dreamweaver 8的发布，更坚定Dreamweaver在该领域的地位。它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前网站设计、开发、制作的首选工具。 Adobe Photoshop CS5
Adobe Photoshop是公认的最好的通用平面美术设计软件。由Adobe公司开发设计。其用户界面易懂，功能完善，性能稳定，所以，在几乎所有的广告、出版、软件公司，Photoshop都是首选的平面工具。 Adobe premiere
Premiere是视频编辑爱好者和专业人士准备的必不可少的编辑工具。它可以提升您的创作能力和创作自由度，它是易学、高效、精确的视频剪辑软件。Premiere提供了采集、剪辑、调色、美化音频、字幕添加、输出、DVD刻录的一整套流程，并和其他Adobe软件高效集成，使您足以完成在编辑、制作、工作流上遇到的所有挑战，满足您创建高质量作品的要求
2.4 系统的具体功能要求
掌握对网页内容排版的操作，做到网页内容将来在浏览器中显示效果美观；初步了解并可以使用脚本语言对网页内容的控制，了解其基本语法结构；将自己做好的网页放在上面，以实现他人通过网络访问到此网页。调整好网页布局，使其各表格应尽可能对齐，整体界面简洁、美观。网页应实现对输入内容的纠错检验，实现上传照片的功能。要用Tomcat架构服务器，使做好的html网页可以在其他电脑上通过地址访问得到。
三、 系统设计
3.1 软件与开发平台
Macromedia Dreamweaver 8, Adobe Photoshop CS5, Adobe premiere
3.2 框架与模板间的联系
最开始网页呈现在你面前的时侯，它就好像一张白纸，它需要任意挥洒设计才思。虽然我们能控制一切你所能控制的东西，在开始的时候，但最好明白网页布局的基本概念。
网页主要是做一个表格样式，相对简单。在做时，一开始可以多生成几行几列，方便后面对单元格进行合并操作，最终调成自己需要的24（行）×6（列）样式。
添加文本输入框后，主要就是调整网页布局。开始可以直接拖动来调整，但这往往会牵一发而动全身，后面的调整动作很可能会把前面调好的部分再次破坏，所以应十分注意。可以在大体调的差不多后，在左侧点击拆分，然后直接在文本框的代码中调整数据大小，来实现对文本框长度的调整。
我们的目的是使文本输入框正好填充整个单元格，并且确保文本框左侧的文字不会因为太长儿发生折行现象，为照片上传预留空间，调整好整个页面的文字格式和大小以及各边框的颜色，最终目的是保证整个页面整齐、简洁、美观
3.3 项目的详细设计
静态页面是网页的代码都在页面中，不需要执行asp,php,jsp,.net等程序生成客户端网页代码的网页。静态页面不能自主管理发布更新的页面,如果想更新网页内容,要通过FTP软件把文件DOWN下来用网页制作软件修改。但是静态页面最大的好处是下载速度快，因为不需要程序运算和数据库连接。常见的静态页面以.html、.htm为扩展名的。并非网站上没有动画的就是静态页面。动态页面是通过执行asp、php、jsp、.net等程序生成客户端网页代码的网页。动态页面通常可以通过网站后台管理系统对网站的内容进行更新管理。发布新闻，发布公司产品，交流互动，博客，网上调查等，这都是动态网站的一些功能，也是我们常见的。动态网页是需要语言环境支持的，动态页面常见的扩展名有：.asp、 .php、 .jsp 、.cgi 等。动态页面的“动态”是网站与客户端用户互动的意思，而非网页上有动画的就是动态页面[4]。
动态网页是最常用的网站建设的一种表达形式，其优点在于可以根据先前所制定好的程序界面，根据用户的不同请求返回相应的数据。可以说是一对多的关系。从而达到资源的最大利用和节省服务器上的物理资源。如果今后需要改变站点风格，只需要重新制作前台所访问的数据即可。只要数据库结构不变，可以很快的进行改版的。
四、 技术实现
4.1 主要功能模板的实现
网页设计是一个互动的过程，不仅是设计师构思设计就可以完成的。从客户提出需求到最终发布，期间需要客户与设计人员共同参与协商才可以，具体流程如下：
首先，获取客户需求和资料。在设计网站页面之前，设计师需要知道客户的需求，从而确定客户建立网站的目的。客户提出网站需求是非常重要的一个环节。没有详细的需求，设计人员无法凭空进行设计制作。在这个步骤中，双方的沟通与交流是非常重要的。
其次，确定网站内容。设计人员选择适合自己的图像编辑软件、动画制作软件和网页制作软件进行网页的初步设计，这中间可能还需要和客户进行多次沟通才能达到客户满意的效果。在具体设计时，设计人员应该为网站定位一个主题，从而保证所有网页都围绕这个主题进行设计制作，保证风格的和谐统一。
然后，申请域名和空间。使用该方法能够有效同步管理文件。还可以通过FTP软件连接到服务器空间上，然后上传文件。
最后，后期维护。一般静态网站上传后，如果客户方没有专业人员维护，这样就需要设计人员从客户方获取新资料进行定期或不定期的更新。如果是动态网站，设计人员需要负责培训客户方如何使用后台管理，这样客户就可以自己通过后台管理添加信息，设计人员只要及时更正动态网站的错误即可。
网站实际上是由很多网页组成的，那么网页之间是如何联系的呢？这就是本章要讲的内容----网页的“链接”。“链接”，又称“超链接"（Hyperlink）,它作为网页的桥梁。网页中的很多对象都可以加入“链接”属性。在Dreamweaver 8中，如果以“链接”的媒介来划分的话，则“链接”可以分为“文字链接”、“图像链接”、“图像地图链接”、“内部链接和外部链接”、“E-mail链接”、“命名锚记链接”、“文件下载链接”和“跳转菜单”，共8种。
4.2 主要技术问题的解决方法
由于小组的的分工，我会对一些图片进行处理，有时会遇到点问题。
比如，将一张婚纱照的人物换到有浙师大的背景后，透明婚纱的部分不怎么好，后来我将透明婚纱的部分复制一层，添加黑色蒙版，进行曲线调色，并调节这一图层的透明体，这样透明婚纱就处理的差不多了，再用高斯模糊处理下，照片的效果就比较好了。还有对一些网上照片素材的修复，有些照片的噪点比较多，我用PS CS5处理后效果也不怎么好，我就下载了一个滤镜：NeatImage，对其进行了降噪处理这样图片的效果就挺好了。记得有一张人物照，其眼睛部分不怎么突出，我就对其眼圈用椭圆工具建立选区，经过曲线，涂抹处理。而，人物的双眼皮非常不明显，我就用钢笔画出其双眼皮，填色，涂抹做出双眼皮。最后还对其头发做了点高光部分处理。
4.3 亮点和创新点的实现
网站充斥着枯燥的设计，这样一种标准化的界面可以使浏览更方便，但同时带给用户一种很世俗的体验，并不能与访客产生一种积极的联系。
面对这种单调的设计，有一种解决方法，就是使用颜色。可能没有其他设计元素能像颜色一样能影响人们对世界感受。颜色可以瞬间改变我们的情绪和意见。颜色会让我们感觉到舒适、敬畏，或者激动。在界面设计中，颜色组合对设计非常有用。可以区分设计让用户更加难忘、引导用户使用户专注于交互、吸引用户使页面布局更舒适，更有魅力。
我将网站的色调做的很醒目，尤其是一些照片比较让人感觉深刻。
五、 总结
本设计根据课程论文要求细则的要求制作，功能基本实现。网页对填写的内容有一定的纠错检验机制，大量寻找素材，上传照片并做适当的剪裁,和用PS对一些特殊照片进行处理，以及运用premiere对一些视屏的剪辑。
这是我首次运用Dreamweaver、java语言进行网页的制作，一切都是从零开始学习，所以制作的时候难免会过于简单，考虑的也不是很周全。在设计过程中不可避免地遇到了各种各样的问题，由于整个设计是我们小组三人一起完成的，而我的主要分工是用PS对框架的简单处理，寻找合适的素材，对一些照片用PS进行美化或其他处理，以及对相关视屏用premiere剪辑。
在制作的过程中碰到过一些比较棘手的问题都一一解决了，让我们小组在解决问题方面的能力得到了提高。
当然，最终的做品还是有一些不完善的地方，我们也不是非常满意。虽然存在各种各样的问题，但是，这次动手实践经历的意义也是显而易见的。整个开发的过程对我来说是一次将理论应用于实践的过程，是将以前所学知识充分利用的过程，是一次真正的实践过程。另外，亲自动手也让自己看到了自身能力的不足，看到了理想与现实之间的差距，这一切都需要今后进一步加强学习理论知识与真正动手做一些课题来弥补。
网页设计与制作毕业设计是在指导教师的悉心指导下独立完成的。虽然内容
还有很多不足，但是我的确能够感到在我制作过程中技能的提高。在今后的学习生活中，我将不断提高自己网页设计与制作的能力和水平，从而弥补本次设计中的不足。
虽然我在小组的分工让我没有太深的对代码进行处理，但是我也对代码的编写有了更深的理解与掌握。对于网页的排版的倒是深有体会，由于我不停的对网页的排版进行更改，所以对于排版我相信我以后会更加的掌握。还有以前我没有接触过Dreamweaver，经过这次的网页制作我对Dreamweaver有了新的体会，我觉得以后再做网页设计时可以灵活的运用Dreamweaver。记得刚开的时候我找来的素材都是直接给队友的，经过小组的协商后，我会把所有的素材都经过PS CS5处理后再给队友，这样减轻了队友的压力，还不知不觉中提高了我对PS的运用。最后有一段视频的剪辑，虽然要给队友的剪辑视频不怎么搞笑，但我后来经常的对许多视频进行剪辑，有时候不知不觉的沉浸在自己的搞笑气氛中，当然，最好的还是让我体会到了视频剪辑的快乐。
记得以前我很少参加小组的共同活动，而这次我们三人一起完成了这个课题。有时候，发现当自己和队友在奋斗的时，自己会偷看一下队友，发现队友的激情与奋斗在激励着我，野激励着我们这个团队，还有奋斗时的队友还挺可爱的。也不知道在我偷看队友一眼的时候，队友是否也曾这样悄悄的看过我，我想，应该是有的，这会让我油然而生一种开心的感觉。时间总是在悄悄的流逝，我相信我的队友也会想我一样，当回忆起那一起奋斗的日子，我们的脸上会有一种笑容。我也坚信这种团队精神会陪伴着我，让我在往后的日子依旧充满对生活的向往与激情。
当然，也许我们的导师对我没有什么印象，但当老师指点我的那一刹那，老师伟大的奉献就已经深深的印在我的脑海。千年前的古人的那句：一日为师，终身为师。对于21世纪今天的我们此刻的心情依旧管用。我也曾想过假如我们老师不戴眼镜会不会更加的有男人味，我觉得不管带不带眼镜，李老师依旧是那么的男人。在以后的学习与生活中，我希望自己不会让老师对我有所失望，因为我们是祖国的新动脉。
这次的网页设计与制作课题，让我学到的不止是学习上的问题，更多的是为人处世总体说来，在这次网页设计中，学到了很多在课堂内所学不到的知识真正拓展了自己的能力，是一次难得的历练经历收获很大。
参考文献
唐永明.浅议网页设计与制作[J].科技信息.2009年
李东生 清华大学出版社 《Deamweaver网页设计与配色技术精粹》 胡燕洁 中国青年出版社 《HTML标准教程》
附录
代码：
'请勿改动下面这三行代码
const ChannelID=2
Const ShowRunTime="Yes"
MaxPerPage=20
strFileName="Article_Class2.asp?ClassID=" & ClassID & "&SpecialID=" & SpecialID
Set rsArticle= Server.CreateObject("ADODB.Recordset")
Set rsPic= Server.CreateObject("ADODB.Recordset")
%>
onmousemove='HideMenu()'>
dim sqlRoot,rsRoot,trs,arrClassID,TitleStr
sqlRoot="select
C.ClassID,C.ClassName,C.RootID,L.LayoutFileName,L.LayoutID,C.Child,C.ParentPath From ArticleClass C inner join Layout L on
C.LayoutID=L.LayoutID where C.ParentID=" & ClassID & " and
C.IsElite=True and C.LinkUrl='' and C.BrowsePurview>=" & UserLevel & " order by C.OrderID"
Set rsRoot= Server.CreateObject("ADODB.Recordset")
rsRoot.open sqlRoot,conn,1,1
%>
set rsArticle=nothing set rsPic=nothing call CloseConn() %> |