No:毕业设计报告课题:网页技术相关探讨与静态网页设计系部:软件工程系班级:软件0910学号:2009005195学生:关英琦指导教师:李法平装订交卷日期:2011.3.15毕业设计成绩评定表指导教师评语:(包含学生在毕业设计期间的表现)成绩(平时成绩):指导教师签名:年月日评阅教师评语:(毕业设计与设计报告的质量与水平)成绩(评阅成绩):评阅教师签名:年月日答辩情况记录:(不安排答辩的学生此表不填)答辩成绩:答辩委员会主任(或答辩教师小组组长)签名:年月日总评成绩:装订顺序:(1)封面、(2)毕业设计成绩评定记录、(3)毕业设计任务书、(4)目录、(5)正文、(6)附录、(7)参考文献。打印要求:双面打印;其中封面的反面为空白页;目录的首页、正文的首页打印在右面;正文首页的页码号从1开始编码。成绩评定:总评成绩以优秀、良好、中等、及格、不及格五级计分制计分,平时成绩、评阅成绩、答辩成绩不受限制,但须统一。参加答辩学生的平时成绩、卷面评阅成绩、答辩成绩分别占总评成绩40%、20%和40%;未安排答辩学生的平时成绩与评阅成绩分别占总评成绩40%、60%。平时成绩、评阅成绩、答辩成绩任意一项不及格,则总评成绩不及格。软件工程系制毕业设计任务书一、设计课题:网页技术相关探讨与静态网页设计二、设计目的:巩固一些已学了网页知识,并且在制作中加入一些新学的东西,做出更好的静态网页效果来,力求给以后动态网页的制作打下基础三、设计要求无硬性要求,根据自己所接触的东西加工创造四、毕业设计报告要求:毕业设计报告由以下几部分组成:1、标题封面:标题要求简洁、鲜明2、毕业设计成绩评定记录表(教师等填写)3、毕业设计任务书(指导教师提供)4、目录5、正文6、附录五、设计进度计划:11月15日---11月25日查阅资料、网页功能分析、模块设计12月1日---2月25日主界面完工,调试细节和图片大小以及其他参数3月1日---3月25月撰写毕业设计报告4月初---毕业设计答辨(如有变动,另行通知)六、毕业答辨需提交的材料:1.完整的系统代码(光盘或磁盘)2.毕业设计报告学生:关英琦指导教师签名:李发平2011年12月6日目录1绪论............................................................11.1网页简介.......................................................11.2网页设计.......................................................21.3网页设计现状...................................................42相关技术........................................................62.1网页制作软件(以DREAMWEAVER举例)...................................62.2网页基本HTML代码................................................72.2.1静态网页HTML以及DIV+CSS(举例说明)...............................82.3图像处理软件...................................................102.4动态编程语言...................................................103网站地图.......................................................113.1为何要建立网站地图.............................................113.2我的网站地图...................................................114详细设计.......................................................124.1网站主体以及基本框架............................................124.2网页部分细节的设计代码...........................................134.3网站全部页面的图片以及主页代码....................................235结束语.........................................................556参考文献.......................................................557致谢...........................................................5511绪论网页(webpage),是网站中的一页,通常是HTML格式(文件扩展名为.html或.htm或.asp或.aspx或.php或.jsp等)。网页通常用图像档来提供图画。网页要使用网页浏览器来阅读。(MMORPG游戏魔兽世界官方网站)1.1网页简介什么是网页网页是构成网站的基本元素,是承载各种网站应用的平台。通俗的说,您的网站就是由网页组成的。如果您只有域名和虚拟主机而没有制作任何网页的话,您的客户仍旧无法访问您的网站。网页(Webpage)是一个文件,他存放在世界某个角落的某一部计算机中,而这部计算机必须是与互联网相连的。网页经由网址(URL)来识别与存取,当我们在浏览器输入网址后,经过一段复杂而又快速的程序,网页文件会被传送到你的计算机,然后再通过浏览器解释网页的内容,再展示到你的眼前。是万维网中的一“页”,通常是HTML格式(文件扩展名为.html或.htm)。网页通常用图像档来提供图画。网页要透过网页浏览器来阅读。21.2网页设计网页设计--------网站是企业向用户和网民提供信息(包括产品和服务)的一种方式,是企业开展电子商务的基础设施和信息平台,离开网站(或者只是利用第三方网站)去谈电子商务是不可能的。企业的网址被称为“网络商标”,也是企业无形资产的组成部分,而网站是INTERNET上宣传和反映企业形象和文化的重要窗口。企业网站设计显得极为重要,下面是一些网站设计中应注意的原则。一、明确建立网站的目标和用户需求Web站点的设计是展现企业形象、介绍产品和服务、体现企业发展战略的重要途径,因此我们必须明确设计站点的目的和用户需求,从而做出切实可行的设计计划。我们会根据消费者的需求、市场的状况、企业自身的情况等进行综合分析,以“消费者(customer)”为中心,而不是以“美术”为中心进行设计规划。在设计规划时我们会考虑:建设网站的目的是什么?为谁提供服务和产品?企业能提供什么样的产品和服务?网站的目的消费者和受众的特点是什么?企业产品和服务适合什么样的表现方式(风格)?二、网页设计总体方案主题鲜明在目标明确的基础上,完成网站的构思创意即总体设计方案。对网站的整体风格和特色作出定位,规划网站的组织结构。Web站点应针对所服务对象(机构或人)的不同而具有不同的形式。有些站点只提供简洁文本信息;有些则采用多媒体表现手法,提供华丽的图像、闪烁的灯光、复杂的页面布置,甚至可以下载声音和录像片段。好的Web站点把图形表现手法和有效的组织与通信结合起来。为了做到主题鲜明突出,要点明确,我们将按照客户的要求,以简单明确的语言和画面体现站点的主题;调动一切手段充分表现网站点的个性和情趣,办出网站的特点。建立网站的要点网页设计的两大要点是:整体风格和色彩搭配。一、确定网站的整体风格网站的整体风格及其创意设计是最难以学习的。难就难在没有一个固定的模式可以参照和模仿。给你一个主题,任何两人都不可能设计出完全一样的网站。3风格(style)是抽象的。是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI(标志、色彩、字体、标语)、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义、站点荣誉等等诸多因素。举个例子:我们觉得网易是平易近人的,迪斯尼是生动活泼的,IBM是专业严肃的。这些都是网站给人们留下的不同感受。在这里,我提供给大家一些参考经验:1.将你的标志logo,尽可能的放在每个页面上最突出的位置。2.突出你的标准色彩。3.总结一句能反映贵站精髓的宣传标语!4.相同类型的图像采用相同效果,比如说标题字都采用阴影效果,那么在网站中出现的所有标题字的阴影效果的设置应该是完全一致的!二、网页色彩的搭配无论是平面设计,还是网页设计,色彩永远是最重要的一环。当我们距离显示屏较远的时候,我们看到的不是优美的版式或者是美丽的图片,而是网页的色彩。关于色彩的原理有许多,在此我们不可能一一阐述,大家可以看看相关设计书籍,有利于系统地理解。在此我们仅仅想告诉大家一些网页配色时的小技巧。1.用一种色彩。这里是指先选定一种色彩,然后调整透明度或者饱和度,这样的页面看起来色彩统一,有层次感。2.用两种色彩。先选定一种色彩,然后选择它的对比色。3.用一个色系。简单的说就是用一个感觉的色彩,例如淡蓝,淡黄,淡绿;或者土黄,土灰,土蓝。在网页配色中,还要切记一些误区:1.不要将所有颜色都用到,尽量控制在三至五种色彩以内。2.背景和前文的对比尽量要大(绝对不要用花纹繁复的图案作背景),以便突出主要文字内容。4制作网页的常见工具1、dreamweaver,用与编辑HTML、ASP、JSP、PHP时的辅助工具2、Frontpage跟dreamweaver一样,不过个人感觉还是dreamweaver好。3、FLASH网页需要画面流动时的首选择4、PS图象处理软件,一般网页都需要有图片的相搭配,PS是款很强大的工具。5、FW跟PS一样都是图象处理软件,但FW偏向与对网页的处理。[我一般用PS]6、Fireworks跟PS很象的一种处理软件,主要用于制做动态图片格式。1.3网页设计现状(一)垃圾还是经典网页技术更新很快,一个网站的界面设计寿命仅仅2-3年而已。不管是垃圾还是精品,都没有所谓的经典。经典只存在于是哪个首次成功创新性的应用。一个闭门造车者做出的东西,是远远赶不上综合借鉴者的。网页设计不同于其他艺术,在模仿加创新的网页设计领域当中,即便是完全自己设计的,也是沿用了人们已经认同的大部分用户习惯,而且这种沿袭的痕迹是非常的明显!还有哪个设计者敢腆着脸说,这都是我自己的原创设计?对于业界来说,经典只是个理念和象征!(二)国内网页设计环境不可否认,国内网页设计环境目前还停留在初级的认知阶段,也就是说,绝大多数人不知道网络的真正的可用之处,你去做一个业务的时候,不得不去做大量的说服教育工作。以乙方的身份去说服甲方,以专业角度去教育非专业认识,结果是可想而知的。也正是这种全体社会普遍的低认知水平,导致了大量网络垃圾的产生。(三)什么是好的网页设计(1)内容和功能决定表现形式和界面设计常常拿到的任务是一张小纸条,上面两句话,叫你去做一个网站设计。有的人看看纸条就去设计页面了,凭两句话,你就可以为客户做一个页面设计,以别人一些资深专家7、8年的设计经验,都不敢去做,真是偶像啊!做网页设计,需要了解客户的东西很多:1、建站目的2、栏目规划及每个栏目的表现形式及功能要求3、主色、客户性别喜好、联系方式、旧版网址、偏好网址4、根据行业和客户要求,那些要着重表现5、是否分期建设、考虑后期的兼容性6、客户是否有强烈的建站欲望7、你是否能在精神意识上控制住客户58、面对你未接触的技术知识,你有底吗?9.网站类型等等...当把这些内容都了解清楚了时候,你的大脑中就已经给这个网站有个全面而形象的定位了,这时才是有的放矢去做界面设计的时候了。(2)界面弱化一个好的