关于网站制作的毕业设计.doc

毕业设计 设计题目 寒舍网站的设计与制作选题性质：设计 论文 其他 院 系 专 业 班 级 学 号 学生姓名 指导教师 教务处制年 月 日 摘 要随着社会的发展时代的前进,it行业的发展也是日新月异,对人类的生产和生活方式产生了很大影响网络传播以其特有的快速高效便捷的传输方式被人们所接受,越来越多的走进了千家万户随之网站也以它独有的优点，迅速的侵入了我们的生活中，且今已与我们密不可分 本文论述了个人网站的设计与实现,本网站采用了dream weaver作为开发工具主要实现了浏览图片，观看视频，在线听歌等主要娱乐功能，并且还为用户提供了在线交流的平台等功能，本网站操作简单,界面友好 应用fireworks、flash、photoshop等软件辅助完成。关键字：网页传播、个人网页、在线交流、网络平台ii目 录摘 要i目 录ii前 言1第章网页设计概述21.1 网页设计概述21.2 网页设计的要素21.3 网页中html的语言介绍21.4 常用的html语言编译软件31.4.1 dream weaver31.4.2 javascript3第2章网站的总体设计思想52.1 网页的设计原则52.2 网页题材的选择52.3 网页包括的元素52.4 网页的构建6第3章网页的主要制作流程83.1 素材的准备83.2 制作工具的选择与应用93.3 网页制作的具体步骤9第4章网站的后期维护204.1 如何提高网站的点击率204.2 数据的更新224.3 网站如何维护22总 结23参考文献24致 谢25前 言人类将步入信息时代，网络越来越强烈地介入我们的生活。在数字信息时代中，网络扮演着重要的角色，他不仅传递信息，也丰富了我们的休闲生活，网络逐渐揭开了神秘的面纱。在因特网的早期，网站还只能保存单纯的文本。互联网的发展从根本上改变了网站的发展命脉，随着电子商务，个人博客等功能的诞生，网站产业也进入到了一个新的时代。随着中国第一波互联网浪潮的兴起，众多的网站如潮般涌现，从此人们开始在网络上在线听歌、购物、浏览阅读、观看视频等。在互联网的各种功能中,网站无疑已成为整个网络体系的主要组成元素，数量庞大的的网站群体,无疑为中国信息产业市场带来了光明的前景和巨大的发展空间。第章网页设计概述随着21世纪的到来，人们更深切地感受到计算机在生活和工作中的作用越来越重要，越来越来的职业需要具有计算机的应用技能。掌握计算机是职业的需要，更是事业发展的需要。网页设计与制作是计算机能力的具体表现，本章主要介绍网页设计的相关知识。1.1 网页设计概述网站是企业向用户和网民提供信息(包括产品和服务)的一种方式,是企业开展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站）去谈电子商务是不可能的。企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站是internet上宣传和反映企业形象和文化的重要窗口。1.2 网页设计的要素网页设计的两大要素是：整体风格和色彩搭配。一、确定网站的整体风格二、网页色彩的搭配1、用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。2、用两种色彩。先选定一种色彩，然后选择它的对比色。3、用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。三、在网页配色中，还要切记一些误区：1、不要将所有颜色都用到，尽量控制在三至五种色彩以内。2、背景和前文的对比尽量要大(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。1.3 网页中html的语言介绍html（hypertext mark-up language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。html文本是由html命令组成的描述性文本，html命令可以说明文字、图形、动画、声音、表格、链接等。html的结构包括头部（head）、主体（body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。1.4 常用的html语言编译软件1.4.1 dream weaverdream weaver是美国adobe(原macromedia，2005年被adobe收购)公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。它不仅是优秀的wysiwyg编辑器，更是优秀的代码编辑器，有代码加亮，代码提示等丰富功能，提供各种示例代码，并支持javascript,php,asp,jsp等多种脚本语言。最新版本为cs4，发布于2008年9月。1.4.2 javascriptjavascript是一种基于对象(object)和事件驱动(event driven)并具有安全性能的脚本语言。使用它的目的是与html超文本标记语言、java 脚本语言（java小程序）一起实现在一个web页面中链接多个对象，与web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的html语言中实现的。它的出现弥补了html语言的缺陷，它是java与html折衷的选择，具有以下几个基本特点： 一、是一种脚本编写语言javascript是一种脚本语言，它采用小程序段的方式实现编程。像其它脚本语言一样,javascript同样已是一种解释性语言,它提供了一个易的开发过程。它的基本结构形式与c、c+、vb、delphi十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与html标识结合在一起，从而方便用户的使用操作。 二、基于对象的语言。javascript是一种基于对象的语言，同时以可以看作一种面向对象的。这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。 三、简单性javascript的简单性主要体现在：首先它是一种基于java基本语句和控制流之上的简单而紧凑的设计, 从而对于学习java是一种非常好的过渡。其次它的变量类型是采用弱类型，并未使用严格的数据类型。 四、安全性javascript是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。 五、动态性的javascript是动态的，它可以直接对用户或客户输入做出响应，无须经过web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页(home page)中执行了某种操作所产生的动作，就称为“事件”(event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。 六、跨平台性javascript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持javascript的浏览器就可正确执行。从而实现了“编写一次,走遍天下”的梦想。第2章网站的总体设计思想2.1 网页的设计原则个人网站的设计是展现用户的形象，一个有特色的个人网站，适合什么样的表现方式，拥有别的网站所没有的风格，就会让访问者愿意多停留些时间，细细品尝该站的内容，甚至该站会得到多人的鼓励与注目。个人网站也不例外，应该遵循这一原则。在设计规划之初同样考虑建设网站的目的是什么？明确建立网站的目标和用户需求，依据用户的客观需求列出网站的主要功能模块，再结合成本和其他元素对网站做一个整体的规划，最后实施该计划。2.2 网页题材的选择定位网站的主题环绕名称，网站的主题也就是网站的题材，是网站设计开始首先遇到的问题。网站题材千奇百怪,琳琅满目.只要想的到，就可以把它制作出来。一、本网站的名字是“我的小窝”。二、素材应与整个页面的色彩相协调。本网站主体大方沉稳，整个页面以黑色为主色调。三、插入特效将会使整个网页看起来比较生动。适当的插入flash与gif动画效果。四、整个网站内容上主要围绕休闲娱乐展开，在内容上要符合整体的实用性。2.3 网页包括的元素无论是经常上网冲浪的老手，还是初次领略internet风光的新手，在初次页面设计之前，都必须先认识一下构成网页的基本元素。只有这样，才能真正的在设计工作中得心应手，还根据需要合理的组织和安排网页上的内容，从而达到期望的目标。网页设计的目的主要是发布信息。因此，文本和图像作为信息载体也就成了网页的基本组成部分，其web的核心超级链接，使它将互联网网中无数的网页链接在了一起，如果没有它，web就无从谈起。除此之外，还有动画、表格、音乐和交互表单等信息的组织、表现，以及交互元素在网页中也具有举足轻重的地位，但是在此我们就不做过多阐述。一、文本文本一直是人类最重要的交流工具和信息载体，网页中的信息大多也以文本为主，与图像相比，文字虽然不如图像那样能够很快的引起浏览者的注意，但却能够准确的表达消息的含义和内容，同时为了克服文字固有的缺点，人们就赋予了网页中文本更多的属性，例如字号、字形、底纹、颜色和边框等，通过不同格式的区别，突出显示重要的内容，此外，用户还可以在网页中设计各种样式的文字列表来清晰表达一系列项目，这些功能都给网页中的文本赋予了新的生命力。二、图像图像在网页中具有展示作品、提供信息、装饰网页、表达个人风格和情调的作用。用户可以在网页中使用gif、jpeg、png 3种格式的图像文件，其中使用最广泛的是jpeg和gif两种格式。三、超级链接超级链接技术可以说是互联网流行起来的最主要的因素，它是从一个起始页面指向另一个目的端的链接，例如指向另一个网页或相同网页上的不同位置。这个目的端通常是另一个网页，但也可以是一个电子邮件地址，一幅图片，一个文件，一个程序或本网页中的其他位置，其载体通常是图片、文本或图片中的区域，也可以是一些不可见的脚本程序。当浏览者点击超级链接时，其目的端将显示在web浏览器上，并根据目的端的类型以不同的方式链接。例如，当指向一个网页的超级链接，则该网页将显示在web浏览器上；但是，如果指向一个avi文件的超级链接被单击后，该文件将在媒体播放软件中打开。2.4 网页的构建一、网页的整体风格本网站以简洁明快的灰黑色经典颜色为主体，给人以质感的体会，让浏览者感受到舒适愉悦的心情，沉稳大方是永不褪色的经典选择，时尚的人说黑色代表神秘，前卫的人说黑色代表酷，成熟的人说黑色代表庄重，黑色给人的感觉是高贵、沉默、安静、莫测高深。二、网页的功能模块本网站的主要功能模块有日志模块、相册模块、音乐模块、视频模块、个人资料模块、留言板模块等。 部分模块的功能有：1、日志模块：实现日志的查看和阅读功能。2、相册模块：可方便的浏览收藏的照片。3、音乐模块：可以收听音乐，有多首音乐随意听。4、视频模块：可随意观看本地视频，调节音量、进度等。5、个人资料模块：自我介绍页面。6、留言板模块：提供用户交流的工具。第3章网页的主要制作流程3.1 素材的准备一、明确建立网站的目标和用户需求 二、总体设计方案主题鲜明在目标明确的基础上，完成网站的构思创意即总体设计方案。对网站的整体风格和特色做出定位，规划网站的组织结构。web站点应针对所服务对象的不同而具有不同的形式。有些站点只提供简洁文本信息；好的web站点把图形表现手法和有效的组织与通信结合起来。要做到主题鲜明突出，要点明确，以简单明确的语言和画面体现站点的主题。调动一切手段充分表现网站点的个性和情趣，办出网站的特点。web站点主页应具备的基本成分包括三、网页的版式设计 网页设计作为一种视觉语言，要讲究编排和布局，虽然主页的设计不等同于平面设但它们有许多相近之处，应充分加以利用和借鉴。版式设计通过文字图形的空间组合，表达出和谐与美。一个优秀的网页设计者也应该知道哪一段文字图形该落于何处，才能使整个网页生辉。多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要处理好页面之间和页面内的秩序与内容的关系。为了达到最佳的视觉表现效果，应讲究整体布局的合理性，使浏览者有一个流畅的视觉体验。 四、色彩在网页设计中的作用色彩是艺术表现的要素之一。在网页设计中，根据和谐、均衡和重点突出的原则，将不同的色彩进行组合搭配来构成美丽的页面。根据色彩对人们心理的影响，合理地加以运用。 五、网页形式与内容相统一要将丰富的意义和多样的形式组织成统一的页面结构，形式语言必须符合页面的内容，体现内容的丰富含义。运用对比与调和、对称与平衡、节奏与韵律以及留白等手段，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。如对称原则在页面设计中，它的均衡有时会使页面显得呆板，但如果加入一些富有动感的文字、图案，或采用夸张的手法来表现内容往往会达到比较好的效果。点、线、面作为视觉语言中的基本元素，要使用点、线、面的互相穿插、互相衬托、互相补充构成最佳的页面效果。网页设计中点、线、面的运用并不是孤立的，很多时候都需要将它们结合起来，表达完美的设计意境。 3.2 制作工具的选择与应用一、dream weaver等软件 dream weaver网页制作工具使用方便操作简单，所以用dream weaver做网页的排版布局和基本构架，设计网页的主体结构。dream weaver还可以实现简单的网页标记，基本结构如下：标题文档二、fireworks和photoshopfireworks和photoshop可用作图片处理软件，网页要做得美观必须要使用颜色和形状都合适的图片，但是往往已有的图片并不能达到我们想要的效果，所以必须要用这两款图片处理软件对图片做处理达到我们想要的效果。三、flashflash该软件也是网页制作中必不可少的，许多网页特效都需要flash作为辅助工具才能达到想要的效果。3.3 网页制作的具体步骤材料有了，工具也选好了，下面就需要按照规划一步步地把自己的想法变成现实了，这是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小，就是说在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改。在制作网页时要多灵活运用模板，这样可以大大提高制作效率。一、首先主页部分的制作结果如图所示: 图1.1 网站首页 1、主页部分我采用的模板是上方固定，左侧嵌套的方式制作。上方我添加了标题还有导航栏，左侧是我的个人信息。右侧放了一个背景音乐还有滚动图片，文字等。效果如图所示：图1.2模板2、模板上方插入动态的标题“我的小窝-寒舍”，使首页整体部分看起来比较生动。效果图如图所示：图1.3 标题标题是会上下浮动的，代表主要由script语言构成的，其主要代码如图所示：图1.4 特效代码3、模板上方标题下面插入导航栏，导航栏中的筋斗云随鼠标的移动而移动，使首页整体部分看起来比较生动。效果图如图所示：图1.5 导航栏导航栏的部分特效代码如图所示：图1.6 导航栏在body中的代码4、第四步，我把左侧划分为上下2个层，一个层插入图片，一个层输入自己的个人简单信息。5、下面我要做的是将右侧分为3个层，一层插入播放器，一层输入文字，最后一层做一个图片展览。播放器的插入效果如图所示：图1.7 播放器播放器的代码如图所示：图1.8播放器代码6、下面将图片进行滚动，首先挑选几张图片放入层中，把它们从左到右，依次排列好。最后在相应位置编写代码，使图片具有滚动效果。如图所示：图1.9 图片滚动效果滚动图片效果的代码如图所示：图1.10 滚动图片效果代码7、首页的最后一步，就是把最后一行添加一个层，在里面输入版权声明，具体代码如图所示：图1.11 版权声明代码二、相册部分的制作结果如图所示:图2.1 相册的首页1、首先利用首页的框架，将里面的东西删掉，右面放入一张图片，左面输入超链接。具体链接地址的设置如图所示：图2.2链接地址2、下面展示三个页面的相册，如图所示：图2.3各个相册的展示效果图其实每个页面的代码都是相似的，都是利用java特效做的，具体的部分代码如图所示：图2.4 相册的部分代码展示3、我在每个相册页面都添加了一个超链接，使其返回主页，使页面更具有人性化操作。图2.5超链接代码显示三、留言板部分的制作结果如图所示:图3.1 留言板1、制作留言板，第一步应该先插入4行2列的表格，如图所示：图3.2插入表格2、将表格的第4行合并单元格，用来添加按钮。分别在左单元格的1，2，3行输入姓名，qq，留言内容。左侧添加文本域，留言内容添加文本区域，如图所示：图3.3插入文本域图3.4文本区域3、最后一步，在最后一行添加2个按钮，一个是提交按钮，一个是重置按钮，提交按钮可以是浏览客人的留言记录下来，重置按钮可以重新编辑浏览客人的留言内容。首先是选中菜单栏下面的插入，然后在子菜单里选中表单，在下拉菜单中在选中“按钮”，这样按钮就添加到了页面中，刚添加进来的按钮默认为提交按钮，如图所示：图3.5 提交按钮属性然后依次在添加一个按钮，将按钮属性里面的提交表单换成重设表单。四、音乐盒部分的制作结果如图所示: 图4.1 音乐页面1、首先利用首页的框架，上方模板不变，下方合并为1个模板，在下面的模板插入2张图片，插入图片的方法如图所示： 图4.2 插入图片2、图片插入完成，将带菜单的音乐播放盒插入2张图片之间，然后间隔利用“ ”隔开，使其看起来美观。具体的代码如图所示：图4.3 音乐盒与图片的代码3、播放器插入进去后，还要设置链接歌曲，因为是带菜单的播放器，所以有一个“list.xml”，里面要将路径设置好，还有一些代码，具体看图： 图4.4 链接1首歌曲的代码4、最后就是去网站下载歌曲，放入“image”文件里面，通过如上的代码形式，放入网页音乐盒中，进行播放。五、其他页面的浏览：个人资料页面如图所示：图5.1 个人资料页面1、个人资料页面的制作只要注意下表格的插入还有超链接的应用即可。日志页面如图所示：图5.2日志页面2、日志页面的制作与相册首页的制作类似。不过链接的页面有所不同。日志比较简单，只要绘画一个层，在里面输入对应的文本即可。第4章网站的后期维护4.1 如何提高网站的点击率一、改造你的站点 主页的设计需要一些技术,而更多的是对整个网络的了解,即使你投入了非常大的精力,但只是获得了失败,这就是现在许多非常优秀的个人主页还默默无闻的道理。所以我们要努力改造自己的站点,使得它产生更多吸引力,而这又是提高访问量的关键,不好的站点,没有人会喜欢。当我们在开始改造自己站点的时候, 我们拥有自己的站点,是因为自己想获得别人的肯定或者寻找某种机遇,而还有的人只是为了兴趣爱好。不管处于什么目的,你都会把站点规划成某种类型,比如新闻或者文学,而选择好的类型是站点成功的第一步。 目前有两种类型:第一种,为别人,即提供大多数人喜欢的内容;第二,为自己,即把自己喜欢的内容提供给别人。而这两种类型中,第一种更容易获得大家的青睐。 当你定位好自己的站点类型后,就要考虑那些人该是你的访客。其实这个问题在定位网站类型时,已经作了回答,如果你选择文学类型,那么爱好文学就会是你的访客,之所以要知道谁是你的访客,是因为在确定了访客喜好后,可以更有信心去提供合适的内容。 所以,你要思考,是什么会使得访客再次来。每天更新,还是内容独特,下面是笔者的经验: 1、华丽的页面 尽量使用最新的web技术来设计你的页面。因为即使内容是站点的关键,但没有好的视觉享受,会使得访客有枯燥无味的感觉,但在使用新技术时,不要凌驾于访客之上,尽量与每一个人的系统兼容; 2、随时更新 一个长时间不更新的站点,没有人会喜欢,所以,要随时更换站点上的内容,哪怕只是变化一个图片; 3、有价值的内容 网络上,获取信息变得十分容易,所以如果你的站点能经常提供有价值的信息,将更能吸引访客,而如果你只是照搬别人的信息,时间长了,就会令访客感到厌倦; 4、网站速度快 作为个人站点,在选择免费空间服务器时,要选择速度快的,而不是连接超时了,还没有见到半点动静的服务器; 5、交互的内容 越来越多的访客希望有互动的内容,他们不想只是看,还想动动手,在你的站点上加点什么,所以,增加一个bbs或者聊天室,这些都会提高站点的流量。改造站点是提高站点访问量最关键的一步,没有好的站点呈现给访问者,再做什么也是惘然。 二、访客来自那里 一个站点的流量由两部分组成，一部分为固定的访客，另一部分是新的访客。固定的访客是站点流量固定增加的保证，而新的访客是站点流量随时增加的保证。一般来说，固定访客的来源是书签，也就是访客把你的站点作上了标记，以便下次的访问。而新的访客就会来自网络的四面八方了，可能是其它站点的连接或者在搜索引擎搜索到的，总之，考虑访客来自那里，可以确定自己的宣传策略是否成功。 过去，想知道自己站点客源的分布是件不可能的事情，而随着相关免费服务的推出，使得我们可以随时了解站点的访问情况。目前国内两大流量分析站点网易和热讯都能提供相关的服务，但因为设置的不同，使得两个站点在分析同一个站点时，发生结果相差很远的情况。所以，当我们在选择国内此类服务时，最好再申请一个国外同样的服务，这样，结果相对来说正确些。 流量分析服务能让我们确定访客是如何找到站点的,而另外的访客为什么没有找到你的站点。比如,当你把站点登陆到搜索引擎后,通过分析没有发现访客来自那里,那么你要确定自己的站点是否成功的列在搜索引擎目录里,如果发现没有自己的站点,那么,你就可以重新进行登记。 三、注册到搜索引擎 把站点注册到搜索引擎是每一个人都会做的,但却没有人真正了解这样做是否真有效。以笔者的经验,即使你把站点注册到搜索引擎里,也并不能提高站点的流量,可能的机会是,当有一万次搜索时,搜索到你网站点并进入的机会只可能会是1次,更有可能一次机会都没有,我并没有夸张。我们要了解一下注册的技巧,而不是简单的告诉搜索引擎我在那。 搜索引擎分为两种,一种为人工登记,另一种为自动登记的,这是目前最多的类型。人工登记,就是靠人把站点的资料输入数据库,它的好处是目录会清晰明了,相对来说内容较少,但被搜索到的机会就会增加。而自动登记的站点,内容十分丰富,但这样一来,搜索时,会把不相关的站点也搜索出来。这两种站点,对于我们来说,都可以利用,但要知道一些技巧。 在这里,我要提议的是,如果你的站点是中文的,最好登记到中文的搜索引擎里去。因为这样被找到的机会就能增加不少,而中文搜索引擎站点,首推百度,但因为它的品牌深入人心,所以访问者非常多。而且它目前所含的内容不丰富,这样,当你把站点成功登记到百度后,被发现的机会要比其它站点多。 就像上面提到的,一个搜索站点可能会包含十分多的内容,这样,当你搜索某一个站点时,会搜索出成千上万个,而更多的站点已经埋没在了后面。怎样提高自己站点的排位变成了成功登记的关键,因为即使你登记到一个搜索站点上面,但被排在了后面,那么,一点效果都没有,这种情况在自动登记的站点出现的多些。对于提高站点的排位是件值得研究的问题，而网络上也出现了为站点提升排位的服务，当然是有代价的，但我们要记住第一位只能有一个。 4.2 数据的更新网站要注意经常维护更新内容，保持内容的新鲜，不要一做好就放在那儿不变了，只有不断地给它补充新的内容，才能够吸引住浏览者。4.3 网站如何维护一、静态页面的添加修改 静态页面的更新需要使用专业的网页设计工具，然后将修改后的网页通过ftp上传到相应的位置，在此同时还要保证不能破坏其他的页面程序。一般来说，企业没有必要配备这种专业人才，所以我们建议企业最好选择在服务上、技术上都不错的网络公司来负责全面的维护。金夏科技通常为我们的网站建设客户提供6个月的免费维护，维护内容包括：不计次的页面修改、图片更换、功能修复。免费期过后，如果客户对我们的服务很满意，我们要根据网站的具体情况每年收取8005000的维护费用，维护内容与上面所述相同。 二、动态功能支持在线更新如果企业信息量很大，如产品经常需要更新，有更多的企业资讯需要告诉访问者，这时候我们通常建议企业建立动态数据库系