网页设计课程设计报告

1、湖 南 工 学 院网页设计课程设计报告专 业：电子商务 题 目：网络电视台主题网站班 级：电商0901姓 名：张哲学 号：指 导 教 师：曹毅完 成 时 间： 2010年12月23日 目录一、设计目的·································&#

2、183;········2二、设计题目········································&

3、#183;·2三、设计要求··········································2四、需求分析····

4、;······································3五、技术分析··········

5、3;·······························4六、创意分析·················

6、83;························5七、制作过程及要点························

7、;·············7八、参考资料···································

8、3;······10九、 设计总结··········································1

9、1一、设计目的 网页的设计区别于实体化的一些东西，其多为多媒体的存在，意味着它可以容纳更多的信息以及更多的展示形式，网页设计则要求设计者具备一些特殊技能以营造特定浏览情景。网页设计可以在短时间内增强我们的洞察力以更好察觉使用者的兴趣点，只有这样才能满足他们的需要。二、设计的题目中国网络电视台三、设计要求1. 课程设计要求一组一题，每题之间不得有雷同现象。2. 每个题目至少要 有15个不同页面（不能利用模板生成），总页面不少于30个。作品中必须有index.htm为索引页，作品中需包含flash动画、超链接、图片、声音等多媒体元素。3. 课程设计过程中，首先要进行项目调研分析、技术设计

10、分析及页面布局。4. 设计结束时，每人须按题目分析设计的要求，上交所有的HTML文档和素材，将所有文件只作为压缩包，文件名按“学号+姓名+项目名称”来命名。5. 作品内容必须要和课程设计报告中的项目内容要一致，设计报告要求在15000字左右，报告内容应有课程设计题目、需求分析、设计制作方案及关键制作技术等内容，必要处需要将效果图抓屏后进行插图。课程设计报告要求用A4纸打印后与作品一同上交，无设计报告者不予评定成绩。6. 操作系统采用Windows XP，安装Photoshop CS3和Dreamw CS3软件，要求网络连通能登陆互联网查找下载素材文件，最后一个逻辑分区硬盘不能保护。四、需求分析

11、 网页设计是将技术性与艺术性融为一体的创造性活动。网页设计是以功能行为第一指导原则，以技术因素为主要考虑对象，以完成或实现必要的功能为目标。近几年随着网络的发展而逐渐受到人们的重视，它本身已网络为载体，把各种信息以快捷、方便的方式传达给受众，在这种标准的要求下，逐步产生了审美需求和功能需求等。人们对美的追求是不断深入的，网页设计同样如此。如何使受众能更好的和有效率地接受网页上的信息，这就需要从审美方面入手。网页设计的审美需求是对视觉设计美学的一种继承和延伸，两者的表现形式和目的都有一定的相似性。网页设计的主题为网络电视台，它是一种网络视频公共平台，是以视听互动为核心、融网络特色与电视特色于一体

12、的全球化、多语种、多渠道、多终端的立体化传播平台，是开放的网民互动交流平台。网络电视台对国内国际重大政治、经济、社会、文化、体育等活动和事件以网络视听形式进行快速、真实报道或转播，向全球网民全面、及时地传播中国主流价值观，传播中国历史与文明，分享中国发展与进步成果的责任和使命。通过网络电视台，广大网民不仅可以看电视，还可以在线制作和发布视频并与好友分享，可以参与评论、发表意见、表达观点，具有传民情、聚民意、汇民智的功能。实现必要的功能为目标。五、技术分析1、利用 DIV+CSS进行布局，基本思想为：DIV+CSS的基本过程是先布局，对网页进行总体设计，再设计内容，对布局的每一部分进行设计。DI

13、V+CSS对内容的设计也体现内容和表现相分离的思想。对内容的表现的描述都在CSS中，内容可以应用CSS样式，不需要额外的HTML标签进行内容的修饰。CSS网页布局的原理，就是按照HTML代码中对象声明的顺序，以流布局的方式来显示它，而流布局就不得不说到float浮动技术。（所谓流布局意思是从左到右对该容器里面的控件进行布局，当一行不能容纳时候自动换行）。CSS的float属性，作用就是改变块元素对象的默认显示方式。block对象设置了float属性之后，可以在保持block对象特性的基础上，使多个block对象在同一行中显示。使用浮动的时候可以配合使用层的嵌套达到更好的布局效果。 2、用<

14、;iframe>定义嵌入式框架，实现视频的播放 <iframe>标记能帮助设计者在浏览器页面上打开一个“小窗口”，嵌入一张来源于其他位置的网页，而且这个内嵌框架可以同时设置宽度和高度，可以放在页面的任何位置，和<frameset>标记建立的框架相比，拥有更多的灵活性，也简单很多。3、滚动字幕标记<marquee> </marquee>标签的使用利用简单的JavaScript语句控制文字的运动状态:onmouseover表示鼠标经过滚动字幕时； stop()意为停止滚动。onmouseout表示鼠标离开滚动字幕时；start()意为开始滚动。

15、实现文字图片的动态效果，给静态网页增加动态效果，使网页内容生动。4、锚点标记的使用 实现网页迅速返回指定位置，为网页阅读提供方便，减少读者频繁的翻动鼠标。5、文件的链接的使用以及flash、背景音乐等多媒体的嵌入技术。6、Photoshop及flash等多媒体辅助软件，实现页面的美观效果。六、创意分析1、利用javascript实现图片交替显示的动态网页效果，代码如下：<script language =javascript >var curIndex=0;/时间间隔(单位毫秒)，每秒钟显示一张，数组共有5张图片放在Photos文件夹下。var timeInterval=1500;

16、var arr=new Array();arr0="image/1.jpg"arr1="image/2.jpg"arr2="image/3.jpg"arr3="image/4.jpg"arr4="image/5.jpg"arr5="image/6.jpg"arr6="image/7.jpg"arr7="image/8.jpg"setInterval(changeImg,timeInterval);function changeImg()

17、 var obj=document.getElementById("obj"); if (curIndex=arr.length-1) curIndex=0; else curIndex+=1; obj.src=arrcurIndex;</script>2、marquee的应用将图片并排插入，利用标签<marquee> </marquee>实现图片滚动的动态效果，并设置相关链接，给静态网页增加动态效果，使网页内容生动。3、给框架集添加默认连接图片，设置表格的边框，使得框架集呈现黑色显示器屏幕效果。如图所示：七、制作过程及要点（代码）1、创

18、建文件名为cntv的站点，新建网页，利用css+div进行布局，制作首页，完成整体框架的设计首页index，如图所示：2、导航条的设计：利用css制作，如图代码如下：#menu #menu tr list-style-type: none; text-align: center; #menu td float: left; #menu td a display: block;padding:2px 3px 2px 3px;font-weight: bold;width:100px;color: #444;text-decoration: none;background-color: trans

19、parent;line-height: 100%; #menu td a:hover color: #fff; background-color:#FF0000 .STYLE1 font-size: large;font-weight: bold;.STYLE2 font-size: small.STYLE3 color: #000033;font-weight: bold;font-family: "楷体"font-size: x-large;.STYLE5 font-weight: bold.STYLE6 font-family: "华文楷体"fon

20、t-weight: bold;font-size: 18px;.STYLE7 font-family: "华文楷体"font-weight: bold;font-size: large;color: #993366;-></style>3、利用表格进行各个层内容的填充，添加文字连接，实现连接，插入相关图片和文字信息，以及flash动画，美化网站页面。4、完成各个频道页面的布局设计，如经济台：5、设计框架集，创建链接，实现视频的播放功能，如图所示框架集：将框架插入左边的left层的的代码如下：<div id="continer"&g

21、t;<div id="left"> <table width="50" border="5" bordercolor="#000000" bgcolor="#FFFFFF"> <tr> <td><iframe src="image/pingmu.jpg" name="iname" width="580" height="340" ></iframe></td> </tr> <tr> <td bgcolor="#000000"><span class="STYLE1"><marquee direction="left" onmouseover="stop()"