网页设计课程设计报告

湖南工学院《网页设计》课程设计报告专业：电子商务题目：网络电视台主题网站班级：电商0901姓名：张哲学号：09500930149指导教师：曹毅完成时间：2010年12月23日1目录一、设计目的··········································2二、设计题目··········································2三、设计要求··········································2四、需求分析··········································3五、技术分析··········································4六、创意分析··········································5七、制作过程及要点·····································7八、参考资料··········································10九、设计总结··········································112一、设计目的网页的设计区别于实体化的一些东西，其多为多媒体的存在，意味着它可以容纳更多的信息以及更多的展示形式，网页设计则要求设计者具备一些特殊技能以营造特定浏览情景。网页设计可以在短时间内增强我们的洞察力以更好察觉使用者的兴趣点，只有这样才能满足他们的需要。二、设计的题目中国网络电视台三、设计要求1.课程设计要求一组一题，每题之间不得有雷同现象。2.每个题目至少要有15个不同页面（不能利用模板生成），总页面不少于30个。作品中必须有index.htm为索引页，作品中需包含flash动画、超链接、图片、声音等多媒体元素。3.课程设计过程中，首先要进行项目调研分析、技术设计分析及页面布局。4.设计结束时，每人须按题目分析设计的要求，上交所有的HTML文档和素材，将所有文件只作为压缩包，文件名按“学号+姓名+项目名称”来命名。5.作品内容必须要和课程设计报告中的项目内容要一致，设3计报告要求在15000字左右，报告内容应有课程设计题目、需求分析、设计制作方案及关键制作技术等内容，必要处需要将效果图抓屏后进行插图。课程设计报告要求用A4纸打印后与作品一同上交，无设计报告者不予评定成绩。6.操作系统采用WindowsXP，安装PhotoshopCS3和DreamwCS3软件，要求网络连通能登陆互联网查找下载素材文件，最后一个逻辑分区硬盘不能保护。四、需求分析网页设计是将技术性与艺术性融为一体的创造性活动。网页设计是以功能行为第一指导原则，以技术因素为主要考虑对象，以完成或实现必要的功能为目标。近几年随着网络的发展而逐渐受到人们的重视，它本身已网络为载体，把各种信息以快捷、方便的方式传达给受众，在这种标准的要求下，逐步产生了审美需求和功能需求等。人们对美的追求是不断深入的，网页设计同样如此。如何使受众能更好的和有效率地接受网页上的信息，这就需要从审美方面入手。网页设计的审美需求是对视觉设计美学的一种继承和延伸，两者的表现形式和目的都有一定的相似性。网页设计的主题为网络电视台，它是一种网络视频公共平台，是以视听互动为核心、融网络特色与电视特色于一体的全球化、多语种、多渠道、多终端的立体化传播平台，是开放的网民互动交流平台。网络电视台对国内国际重大政治、经济、社会、文化、体育等活动和事4件以网络视听形式进行快速、真实报道或转播，向全球网民全面、及时地传播中国主流价值观，传播中国历史与文明，分享中国发展与进步成果的责任和使命。通过网络电视台，广大网民不仅可以看电视，还可以在线制作和发布视频并与好友分享，可以参与评论、发表意见、表达观点，具有传民情、聚民意、汇民智的功能。实现必要的功能为目标。五、技术分析1、利用DIV+CSS进行布局，基本思想为：DIV+CSS的基本过程是先布局，对网页进行总体设计，再设计内容，对布局的每一部分进行设计。DIV+CSS对内容的设计也体现内容和表现相分离的思想。对内容的表现的描述都在CSS中，内容可以应用CSS样式，不需要额外的HTML标签进行内容的修饰。CSS网页布局的原理，就是按照HTML代码中对象声明的顺序，以流布局的方式来显示它，而流布局就不得不说到float浮动技术。（所谓流布局意思是从左到右对该容器里面的控件进行布局，当一行不能容纳时候自动换行）。CSS的float属性，作用就是改变块元素对象的默认显示方式。block对象设置了float属性之后，可以在保持block对象特性的基础上，使多个block对象在同一行中显示。使用浮动的时候可以配合使用层的嵌套达到更好的布局效果。2、用iframe定义嵌入式框架，实现视频的播放iframe标记能帮助设计者在浏览器页面上打开一个“小窗口”，5嵌入一张来源于其他位置的网页，而且这个内嵌框架可以同时设置宽度和高度，可以放在页面的任何位置，和frameset标记建立的框架相比，拥有更多的灵活性，也简单很多。3、滚动字幕标记marquee……/marquee标签的使用利用简单的JavaScript语句控制文字的运动状态:onmouseover表示鼠标经过滚动字幕时；stop()意为停止滚动。onmouseout表示鼠标离开滚动字幕时；start()意为开始滚动。实现文字图片的动态效果，给静态网页增加动态效果，使网页内容生动。4、锚点标记的使用实现网页迅速返回指定位置，为网页阅读提供方便，减少读者频繁的翻动鼠标。5、文件的链接的使用以及flash、背景音乐等多媒体的嵌入技术。6、Photoshop及flash等多媒体辅助软件，实现页面的美观效果。六、创意分析1、利用javascript实现图片交替显示的动态网页效果，代码如下：scriptlanguage=javascriptvarcurIndex=0;//时间间隔(单位毫秒)，每秒钟显示一张，数组共有5张图片放在Photos文件夹下。vartimeInterval=1500;vararr=newArray();arr[0]=image/1.jpg;arr[1]=image/2.jpg;arr[2]=image/3.jpg;arr[3]=image/4.jpg;arr[4]=image/5.jpg;arr[5]=image/6.jpg;arr[6]=image/7.jpg;arr[7]=image/8.jpg;6setInterval(changeImg,timeInterval);functionchangeImg(){varobj=document.getElementById(obj);if(curIndex==arr.length-1){curIndex=0;}else{curIndex+=1;}obj.src=arr[curIndex];}/script2、marquee的应用将图片并排插入，利用标签marquee……/marquee实现图片滚动的动态效果，并设置相关链接，给静态网页增加动态效果，使网页内容生动。3、给框架集添加默认连接图片，设置表格的边框，使得框架集呈现黑色显示器屏幕效果。如图所示：7七、制作过程及要点（代码）1、创建文件名为cntv的站点，新建网页，利用css+div进行布局，制作首页，完成整体框架的设计首页index，如图所示：82、导航条的设计：利用css制作，如图代码如下：#menu{}#menutr{list-style-type:none;text-align:center;}#menutd{float:left;}#menutda{display:block;9padding:2px3px2px3px;font-weight:bold;width:100px;color:#444;text-decoration:none;background-color:transparent;line-height:100%;}#menutda: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:华文楷体;font-weight:bold;font-size:18px;}.STYLE7{font-family:华文楷体;font-weight:bold;font-size:large;color:#993366;}--/style3、利用表格进行各个层内容的填充，添加文字连接，实现连接，插入相关图片和文字信息，以及flash动画，美化网站页面。4、完成各个频道页面的布局设计，如经济台：105、设计框架集，创建链接，实现视频的播放功能，如图所示框架集：11将框架插入左边的left层的的代码如下：divid=continerdivid=lefttablewidth=50border=5bordercolor=#000000bgcolor=#FFFFFFtrtdiframesrc=image/pingmu.jpgname=inamewidth=580height=340/iframe/td/trtrtdbgcolor=#000000spanclass=STYLE1marqueedirection=leftonmouseover=stop()onmouseout=start()滚动字幕：本台消息/marquee/span/td/tr/table/divdiv6、将各网页进行链接，实现网站的链接功能八、参考资料《网页配色宝典》华之凤中国电力出版社2006年10月《网页设计与制作》蔡伯峰清华大学出版社2010年5月Adobe公司AdobeFlashCS4中文版经典教程人民邮电出版社《网页设计技术教材》童爱红清华大学出版社2005年1月《网页设计与制作》唐有明清华大学出版社2010年4月《网页设计与制作》蔡伯峰清华大学出版社2010年5月《网页设计技术》顾晓燕清华大学出版社2009年12月九、设计总结经过一周的时间，在同学和老师的帮助下，基本完成本次课程设计，基本完成了网络电视台网站的功能要求。这次网页设计课程设计给我的最大的印象是：基本知识是一切的根本；架构是重要的，想像的还要重要；实践比一切空谈和理论更能学到东西。从做这个网页设计开始无论遇到什么困难，我都没有一丝12的放弃的念头。在设计过程中一定要慎重，仔细。来不得半点马虎。布局是整个课程设计的中心，考虑要全面，分析彻底。才会为后来的设计打下良好的基础。否则，前功尽弃，甚至不能完成任务。从这次课程设计中我也学到了额外的知识，初步认识了动态网页的制作，熟悉了本学期的网页制作与实例教程的知识，受益匪浅。最后，感谢老师的耐心指导和同学的帮助，没有你们的无私教导和帮助，就没有今天的网络电视台网站的实现，衷心感谢你们！