网页设计毕业设计论文.doc

目录一.绪论11.1 引言11.2 相关术语的阐述11.3汇丰电脑行简介2二.开发工具介绍32.1 Dreamweaver32.2 fireworks32.3 Adobe Photoshop8.032.4完成本次作品所用到的软件4二.需求分析53.2网页的界面设计53.3建站目的53.4网站实现功能6四. 总体设计74.1 建立站点74.2 素材制作处理84.3 CSS分类10五.详细设计115.1设计理念115.2装机硬件125.3扩展配件135.4用户登入135.5用户注册14六.网站测试156.1 IIS配置156.2 数据源（ODBC）配置15七. 网站总结157.1 不要滥用flash157.2 不要让网页看起来杂乱无章157.3 要给人印象深刻157.4 内容才是根本157.5 换位思考，注重细节167.6 留空白未尝不好167.7 选用合适的图片167.8 注意字体与行高16结论16参考文献17致谢18I 一.绪论1.1 引言 中华民族文化源远流长，中国文化博大精深，而中国画在思想内容和艺术创作上，都反映了中华民族的社会意识和审美情趣，体现了中国人对自然、社会及与之相关联的政治、哲学、宗教、道德、文艺等方面的认识。传承中国文化，并将其发扬广大，是我，作为一个华夏之女的心愿。在信息技术飞速发展的今天，人们获取信息的方式更多是来源于互联网。而吸引浏览用户的则是视觉效果出色、信息量丰富、使用起来便捷的网页，所以网页设计尤为重要。互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。网页设计伴随着网络的快速发展而快速兴起，作为上网的主要依托，由于人们使用网络的频繁而变得非常的重要。网页讲究的是排版布局，其功能主要就是提供一种形式给每个上网者，让他们能够了解网站提供的信息。面对日益加快的生活节奏和信息社会日新月异的变化，企业极需要一种快捷，便利的平台来对外宣传企业形象,介绍最新产品和及时售后服务。如何运用现代化信息技术完成这一目标，建立“一座企业与顾客之间畅通无阻的大桥”已成为企业中应该解决的重要课题之一，本网站正是为这一目标设计制作的。1.2 相关术语的阐述l WWW是“World Wide Web"的缩写；HTML的意思则是“Hypertext Markup Language”,中文翻译为“超文本标记语言”。“超文本”就是指页面内可以包含图片、链接、甚至音乐，程序等非文字的元素。URLs是Uniform Resource Locator的缩写，统称为统一资源定位器。可以把它想象成文件名的网络扩展。我们不但可以通过各种不同的方法指出在网络的上哪一台机器的目录下的文件。这个文件可以通过各种不同的方法得到。在URL中还指定了访问这一个文件的协议。在实际应用中，URL经常称为“网址”或URL地址。l TCP/IP协议（Transmission Control Protocol / Internet Protocol传输控制协议/因特网协议）所谓协议，其实应该叫他网络协议，它是计算机与计算机之间，进行信息传输的语言，只有两台计算机具有相同的协议方能进行信息传输，常见协议有IPX协议、TCP/IP协议等。l IPX现广泛应用于局域网中，大多数局域网游戏都使用IPX协议。TCP/IP协议可以说它是你接入因特网的必备条件，因为它是因特网上的通用协议。l FTP协议(File Transter Protocol)也就是文件传输协议。我们知道，在服务器中一般都有大量的共享软件和免费资源，要想从服务器中把文件传送到本地的计算机（术语称“客户机”）上或者把自己机器上的资源传送到服务器上，就必须在两台机器中进行文件传送，那么双方就必须要共同遵守一定的规则，FTP就是用来在客户机和服务器之间进行文件传输以实现文件共享的协议。FTP只是一种协议，必须要有相应的专用软件来执行它，一般称为FTP软件。通过FTP软件可连接到FTP服务器上，执行上载和下载文件的任务。l 常用的FTP软件有LeapFTP、CuteFTP、WS_FTP、FTPX等，这些软件的原理基本相同，只是用户界面和功能略有差异。1.3汇丰电脑行简介 惠丰电脑行是本人借鉴中关村产品报价网模版而做的一个网页。惠丰电脑行站最大的特点是淡雅二字，整个网站以淡红色为主，再加上灰色和黑色作为点缀，即体现了淡雅的主题又让读者眼前一亮。再加上网页清新，使人眼前一亮，和人性化的操作设计会给予读者在视觉的完美享受。 惠丰电脑行网站主要使用了网页制作软件Dream weaver、图像处理软件Photoshop属于HTML语言的静动态网站。 二.开发工具介绍2.1 Dreamweaver Macromedia 公司的产品的另一款“所见即所得”的网页编辑工具。与 Frontpage 不同，Deamweaver 采用的是 Mac 机浮动面版的设计风格，对于初学者来说可能会感到不适应。但当你习惯了其操作方式后，就会发现 Dreamweaver 的直观性与高效性是 Frontpage 所无法比拟的。 Dreamweaver 对于 DHTML 的支持特别好，可以轻而易举地做出很多眩目的页面特效。插件式的程序设计使得其功能可以无限的扩展。Dreamweaver 与 Flash、Firework 并称为 Macromedia 的网页制作三剑客，由于是同一公司的产品，因而在功能上有着一个非常紧密的结合。而最新推出的 Dreamweaver UltraDev 更支持 Asp，Jsp。因此，说Dreamweaver 是高级网页制作的首选并不为过。常见的版本为 Dreamweaver3、Dreamweaver4、DreamweaverMX、Dreamweaver8.0、Dreamweaver CS.所以 我选择的是Adobe Dreamweaver CS6这款软件。2.2 fireworks fireworks 的独特之处在于它能够优化、切分图片映射图，并提供了功能强大的翻滚图工具。它是基于WEB应用的图形/图象处理软件，提供了一种革命性的新方法来创建WEB图形，并且具有所有其他图形处理工具的诸多优点。Fireworks MX的最大优势就在于它在任何时候可以从任何阶段开始设计工作，这样既可以节约时间又可以对产品进行扩展。另外，Fireworks 中的诸多功能都是面向WEB应用的，因此对于WEB设计新手来说也很容易学习的。所以我选择了Macromedia Fireworks 8这款软件。Dreamweaver是个原本由Macromedia公司所开发的著名网站开发工具。它使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。随Macromedia被Adobe收购后，Adobe也开始计划开发linux版本的Dreamweaver了。 Dreamweaver自MX版本开始，使用了Opera的排版引擎"Presto" 作为网页预览。2.3 Adobe Photoshop8.0Photoshop 8.0是目前最流行的图形、图像编辑设计软件，在数码影像处理、图像编辑合成、广告设计、封面设计、美术绘画、网页设计等领域都被广泛地应用。 文字处理更加方便 增加的图层集使图层管理更有序。 新增图像功能：图像的剪切和剪裁更加方便。 将所有工具的选项板改进为工具选项栏放置在工作区顶部，方便先项参数的设置。 为了更方便地用路径绘画，改进增加了几何形状工具，通过选择工具的不同工作模式，可创建路径、几何形状或几何填充区，使得矢量绘图功能得到了加强。2.4完成本次作品所用到的软件 在本网页制作中用到了Dreamweaver CS6和Macromedia Fireworks 8这3款软件。二.需求分析 3.2网页的界面设计由于越来越多个人开始建立自己的网站，网站除了具有传播信息的功能外，还往往代表个人的形象。网站建设商业化和广告化的趋势，对网页设计的艺术性提出了更高的要求。虽然HTML语言提供了对常用Windows标准控件的支持，但是，由于Windows标准控件的形状和颜色十分单一，网页的视觉效果可能会很差。例如：列表框和下拉列表框只能呈现凹陷边框，而且下拉列表的箭头的颜色不能改变，滚动条只能出现在窗口的下边和右边，当网页分成多个帧的时候，滚动条就不可避免的出现在网页的中间，破坏网页的整体性。若在网页的设计中主动配合Windows标准控件的形状和颜色，网页的创作空间就会受到限制。因此，有必要实现网页中的自定义控件，以满足网页设计艺术化的要求。A. 网页界面构成要素与传统媒体不同，网页除了文字和图像以外，还包含声音、视频和动画等新兴多媒体元素，更借助由代码语言编程所实现的各种交互式效果，增加了网页界面的生动性和复杂性，也使得网页设计者需要考虑更多页面元素的排布、优化。 一般来说，网页的界面主要由下面几个因素构成：（1） 文字：文字元素是信息传达的主体部分。网页中的文字主要包括标题、信息、文字链接、几种主要形式。标题和传统媒体中信息传达的基本作用相同，是内容的简概说明一般比较醒目、优先编排。文字作为占据页面重要比率的元素，同时又是信息重要载体，它的字体、大小、颜色和排布对页面整体设计影响极大。（2） 图形：图形在网页界面中具有重要作用。合理的运用图形。可以生动直观、形象地表现设计主题。网页中常用的图形格式包括jpg和gif，这两种格式压缩比高，得到了规范浏览器的支持，下载速度快，具有跨平台 3.3建站目的 Internet是目前世界上最大的计算机互联网络，它遍布全球，将世界各地各种规模的网络连接成一个整体。作为Internet上一种先进的，易于被人们所接受的信息检索手段，World Wide Web(简称WWW)发展十分迅速，成为目前世界上最大的信息资源宝库。据估计，目前Internet上已有上千万个Web站点，其内容范围跨越了教育科研、文化事业、金融、商业、新闻出版、娱乐、体育等各个领域，其用户群十分庞大，因此，建设一个好的Web站点对于一个机构的发展十分重要。近年来，随着网络用户要求的不断提高及计算机科学的迅速发展，特别是数据库技术在Internet中的广泛应用，Web站点向用户提供的服务将越来越丰富，越来越人性化。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。 3.4网站实现功能本网站给客户提供一个了解公司的平台，客户可以很直接的了解本公司的产品 。(1) 用户可以浏览公司所以的产品。(2) 用户可以注册本公司的会员(3) 用户可以查看公司的联系方式。(4) 用户可以下载本公司的客户端(5) 用户可以快速的查询所需要的产品四. 总体设计4.1 建立站点所谓站点，就是将网页文件和素材文件，有条理地放置站点文件夹里，这些文件与文件夹就构成了网站的实质内容。站点文件夹里除了网页文件还有素材文件，所谓素材就是网页中所用到的图像、声音。这些内容是以单独文件的形式存在。4.2 素材制作处理 4.3 CSS分类HTML可以将内容、结构和格式化的信息都包含在同一个Web文档中，这样做虽然简单易行，但也存在很多问题。各种信息存放在一起不利于文档的维护，修改起来费时费力。因此HTML应只负责文档的内容和结构，而格式化信息交给一套新的语言来完成，这就是CSS，它也是本论文的主角。CSS全称为Cascading Style Sheet，中文译为层叠样式表（也有译作级联样式表的）。其作用就是要控制HTML的页面布局和外观样式，使Web文档内容结构和表现形式完全分离。五.详细设计5.1设计理念 设计理念界面展示了公司设计的理念，效果图如下5.2装机硬件5.3扩展配件5.4用户登入5.5用户注册六.网站测试 6.1 IIS配置 当IIS被成功安装后，将在计算机C:Inetpubwwwroot下新建一个默认网站，通过修改默认网站配置可以建立自己的站点。如自己的网页放在D:Wy目录下，首页文件名为Index.asp，其具体步骤如下： 第一步：在“默认Web站点”上单击右键，选“属性”，以进入名为“默认Web站点属性”设置界面。 第二步：转到“主目录”窗口，再在“本地路径”输入（或用“浏览”按钮选择）好自己网页所在的“D:Wy”目录。 第三步：转到“文档”窗口，再按“添加”按钮，根据提示在“默认文档名”后输入自己网页的首页文件名“Index.asp”。 第四步：在“默认Web站点”上单击右键，选“新建虚拟目录”，依次在“别名”处输入“test”，在“目录”处输入“D:Wy”后再按提示操作。6.2 数据源（ODBC）配置 第一步：选择控制面板中的管理工具打开数据源（ODBC）。 第二步：在选项卡系统DNS中添加Microsoft Access Driver(*.mdb)驱动并指定数据源为网站的数据库文件。七. 网站总结7.1 不要滥用flash对于我们一个不专业的人来说，错误的认为Flash是增加网页美感的主要元素，其实不然，一个网页制作的成功与否，不仅是Flash的精彩，更多的是布局设计，能否给人一种整体美，Flash在网页中出现的频率要适当，因为网页是用来展示信息的，而不是展示Flash。7.2 不要让网页看起来杂乱无章网页是一个大杂烩，但缺乏合理结构的网站往往会使信息的浏览变得非常困难，当然我们所做的网站只是个人或者班级，没有面向整个网络，不过以后这些必须得要学以致用。7.3 要给人印象深刻网站看上去漂亮不怎么重要，关键是吸引眼球，想百度、谷歌、一些大网站，虽然它们只是一些搜索引擎，不过使用的人数不胜数。7.4 内容才是根本一个网站缺少内容，就好像人体缺少了骨架，撑不出形状，如果一个网页全部用图片来装饰，那么作出来的将不是网站，变成一个图片查看器，这样会使网站内容匮乏。7.5 换位思考，注重细节 细节是我体验最深刻的一点，要从浏览者的角度思考网页的所有元素，力求最大限度的改良网页元素以适合浏览。从网页的界面来说，一个小的细节可能让浏览者感觉不出来，但细节处理不好的地方多了，就会让人很不舒服，会让浏览者觉得设计的粗糙，设计者的用心不足。从网页的后台代码来说，一个简单的失误会让程序彻底崩溃，比如：记录集的打开而忘记了及时关闭，对于一个记录集可能还不要紧，但若在循环语句里面就很可怕了。因此不管怎样多用心去思考，去琢磨，这可能是一个网页设计者能力提升的体现。7.6 留空白未尝不好网页留出空白，让人感觉格外清新，仿佛刚刚经历了深呼吸一般，我们的眼睛需要被注视物的周围有一定的空间，当然，留“白”不一定是白的，但它必须留出一定的空间。7.7 选用合适的图片图片的选择在网页中也是很重要的一部分，图片不单只是网页整体看起来美观和谐，而且要与内容相符合。例如网站中教学管理系统和学生管理系统的图片，选择即为合理，在教学管理系统中的图片与教师以及学院信息相符合，而学生管理系统的图片是一张铺着地毯的入口，正如学生踏上成功的红地毯。7.8 注意字体与行高为段落中的文字使用适当的行高。一种快速、简单的方法，用段落中字体的大小来测算行高。较为理想的情况是行高大约为字体大小的1.5倍。7.9 文章标题和副标题必须突出这样做的一个好处是可以让读者在第一时间了解这篇文章标题下面的内容是什么。使标题突出显示要做的工作只是使用更大的字体，为字体添加下划线、更改颜色等。结论本毕业设计经过几个月的查资料、整理材料、设计网页、建设网站到写作论文，今天终于可以顺利的完成论文，终于让学生在大学的生活，得以划下了完美的句点。毕业设计是对我们大学生活三年来教学的一个总结性考察，里面包含了我们学过的很多方面的知识，平时的学习都是自己听老师讲解，或者就是做练习之类，缺少了自己的独立思考，通过这次的毕业设计，让自己清楚了解到自己的学习程度，和自我学习思考的能力。从第一眼看到资料的那种眼花缭乱的感觉，到最后看到自己做出的设计论文的成功，体验了一次从茫然到无助，最后的那种成功的欣慰，真的让自己受益匪浅，也使自己明白了，无论今后做什么事情，都要坚持不懈的努力，多从问题的关键出发，分析不同的思路，多做总结与比较，从而得到最佳的结果。在论文的设计中它不仅培养了我严谨的思维方法，更造就了我积极乐观的生活态度。而且还要做到稳重但又不失创新，开朗但不浮躁，兴趣广泛，思路开阔，办事沉稳，团结合作的精神。 总之，在这次毕业设计中，我们学会了许多的知识，是大学三年来所学知识的综合运用，切实感受到设计的苦与乐。在这里希望各位老师提出意见和建议，我们定会努力学习改进，争取作出更大的进步 。参考文献1 汪洋 郝永强 编著·网站设计全程教程·科学出版社·2002年1月2 杨成文 王竹林 戴军峰 编著·轻松打造个性化网站·国防工业出版社·2002年10月3 李海兵 李杰臣 编著·超梦幻动态网页开发·中国青年出版社·2004年2月4 马龙工作室 编著·Dreamweaver MX 2004 & ASP动态网页编程完全自学手册·人民邮电出版社·2005年1月5 刘春 编著·网页制作三剑客标准培训教程·上海科学普及出版社·2003年1月 6 KEVIN Write·How to design your websites ·The sun publishing house of U.S.A · 2004.57 王建军 编著·设计你的个人主页教程·黑龙江出版社·2001年6月8 高强 刘浩才 编著·网页素材的设计简明教程·新疆出版社·2003年5月致谢在本次毕业设计过程中，指导老师超卫东老师给予了极大的帮助。王老师认真负责的工作态度和丰富的理论和实际操作能力都使我收益匪浅。无论在理论上还是在实践中，他都给与我很大的帮助，在他的帮助下使得整个网站能及时的设计完成，并从中学到了很多以前没有学到的知识，所以，非常感谢他耐心的指导。还有，在我设计整个网站的过程中，许多同学也给了我很大的帮助，特别是在论文的排版方面，我请教了多位同学，同学们都乐意指导，在这里我一起表示感谢。 最后要感谢在这三年的学习和生活中给予我关怀和照顾的每一位可敬的系领导和老师，感谢你们的无私奉献！感谢你们的悉心教导！感谢你们的点点滴滴！感谢母校对我们的培养！是你们，教会了我为人民服务的本领，是你们，让我懂得了做人的道理，无论以后我走到那里，我都会记得你们给予我的关怀和帮助。无论何时，我都会以我曾经是你们的学生而感到骄傲，我在这即将毕业离校的时候，我衷心的祝愿各位老师工作顺利，一生幸福。同时，我也祝愿我的同学到可以找的一份好的工作，都有一个好的前程。18