毕业设计（论文）-机械类实验管理中心平台设计.doc

诚信声明本人郑重声明：本论文及其研究工作是本人在指导教师的指导下独立完成的，在完成论文时所利用的一切资料均已在参考文献中列出。 本人签名： 年 月 日毕业设计任务书设计题目： 机械类实验管理中心平台设计 系部： 机械工程系 专业： 机械电子工程 学号： 112012113 学生： 秦泽西 指导教师（含职称）： 刘晓 （讲师） 1课题意义及目标 当前，学校学生人数不断增加，实验室基础设施的建设不断扩大，实验室教学规模不断扩大，为了更好的进行信息的统计和处理，更好的为实验教学和科研服务，建设一个信息化平台的实验管理平台是很有必要的。设计并建立一个机械类实验管理中心平台，对信息进行更好的统计和处理，方便数据的管理，提高实验室管理的工作效率，更好的为学生的成才及教师的发展提供更好的服务。2主要任务(1)收集相关材料,请教老师，学习DREAMWEAVER的使用方法，并熟悉掌握。(2)运用DREAMWEAVER设计网站，实现对机械实验楼实验的管理。(3)对建立的网页进行实验3主要参考资料1 朱世坤. 开放性实验教学模式的探索与实践J. 大学物理实验, 20072 李俊杰. 高校实验建设的实践探索J. 襄樊职业技术学院报, 20063 董国强. 高校开放性实验室建设探讨J. 实验技术与管理, 20074进度安排设计各阶段名称起 止 日 期1查阅文献，完成开题报告2014.12.10至2014.12.302完成对机械类实验管理中心平台的设计2014.12.31至2015.04.203对设计好的网页进行实验并运用2015.04.21至2015.05.104对设计缺陷进行修改并撰写论文2015.05.11至2015.05.315完成毕业论文及答辩工作2015.06.01至2015.06.18审核人： 年 月 日机械类实验管理中心平台设计摘 要：当今时代是一个信息化的时代，传统的手工记录已经被计算机的数据处理所取代，所以使实验室管理中心网页化已成为必然趋势。首先运用Photoshop软件设计制作了网站所用图片，详细说明了图片的制作过程。而后对Dreamweaver软件进行了简要的说明，并使用Dreamweaver软件对实验管理中心的平台进行了设计制作，实现了网站功能。通过对整个网站的设计，熟悉的掌握了一些HTML相关的知识和制作网页的技巧。关键词：图片处理，网页制作，实验管理Design of central platform for mechanical experiment managementAbstract: Today is an age of information technology, the traditional manual records have been replaced by computer data processing.So make laboratory management center website has become an inevitable trend.Firstly, the paper design pictures of the site by Photoshop software and describe the production process of the pictures detailedly. Use Dreamweaver software that is introduced briefly to design and create experimental management center of the platform and achieve the site function.Through the design of the entire site, grasp some knowledge and skills familiarly to create web pages HTML.Keywords: Image Processing，Web production，Experiment Management目 录1 绪论11.1 课题的背景及其意义11.2 实验管理信息系统发展概述11.3 国内外发展概述21.3.1 国内发展概述21.3.2 国外发展概述31.4 太原工业学院实验管理中心现状42 实验管理系统开发技术52.1 网页设计工具Dreamweaver软件52.1.1 Dreamweaver界面介绍62.2 网页图片设计工具Photoshop软件82.2.1Photoshop软件界面介绍82.3 相关术语解释83 实验管理系统的设计开发93.1 实验管理系统功能分析93.2 主页的设计143.2.1 导航栏143.2.2 主体部分153.2.3 网页信息栏163.2.4 站点的规划163.3 网页的制作过程173.4 运用CSS+div对网页进行管理的优势234 使用Dreamweaver处理图片255 结论31参考文献32致 谢33I太原工业学院毕业设计1 绪论1.1 课题的背景及其意义当今时代是一个信息化、网络化的时代，人们在传统意义上的手工记录和检索操作已经被计算机的数据处理所替代，随着网络技术的高速发展，使得信息具有了共享性和实时性，计算机网络技术在信息管理上所发挥的重要作用也被人们越来越清晰的认识到。在网络技术日新月异的今天，对学生的成才起着至关重要的作用的高校实验室成为了高等学校教学中的一个重要环节，高校实验室在实验教学中的有效性不仅仅取决于实验室的课程的开设也取决于实验室的管理方法。近年来，随着我们学校的师生人数不断增长，基础设施的不断完善，办学规模的进一步扩大，在开设实验课程的时候不仅要应对本专业的学生，还需要对整个学院的公选课学生及跨专业选课学生进行开放，实验室除了对学生开放外还需要承担学校教师的科研项目，在实验室大量使用中，实验室管理教师需要对实验室使用的设备仪器进行维护和记录，需要对实验室耗材进行申报和管理，需要对实验室基础设备的维修维护进行申请，实验室办公室人员需要对教师上报的各种信息进行统计和统一上报处理，现在太原工业学院已经完成了校园网络的基础建设，为了更好的进行信息的统计和处理更好的为实验教学和科研服务，建设一个信息化平台的“实验管理信息系统”是很有必要的。一个数字化的信息管理系统可以保证数据的规范性，实时性，方便数据的管理提高实验室管理的工作效率，更好的为学生的成才及教师的发展提供更好的服务。1.2 实验管理信息系统发展概述近几年来LIMS从功能上来看有以下的变化:1、信息的处理方面的变化趋势主要体现在有以下几个功能：实验室业务流程信息管理功能，实验室数据汇总功能和智能干预功能，第一个功能主要是针对于实验室日常工作流程的管理，第二个功能主要是对实验中数据经过汇总统计通过表或数据层次进行表现，第三个功能是LIMS未来需求发展趋势。 2、实验设备的管理的变化主要体现在：传统的实验记录是一种老式的、传统的、静态的需要通过自律来保证数据的有效性，而现在使用LIMS管理系统后设备的预约、权限、使用都通过系统来完成对接和统筹可以避免人工管理所带来的各种误差，这也是LIMS发展的一个趋势。3、数据信息的网络化：所有数据在网络上进行一元化的管理，用户权限不同调用不同的数据进行操作，能够很好的避免数据在处理过程中的不一致性。 4、C/S 向 B/S 系统的转化：B/S 系统是浏览器/服务器系统平台比起传统的C/S 具有易部署，易维护，资源集成化高的优点。1.3 国内外发展概述1.3.1 国内发展概述虽然近年来我国计算机网络软件的高度发展，但就实验室信息管理系统而言国外发达国家的在技术上和应用上比国内成熟，现在我国的实验室信息管理系统经过的多年发展体现出了在实验管理中的便利性使得很多实验室都认识到了信息化在管理的作用纷纷引入了 LIMS“实验室信息管理系统（Laboratory Information Management System）是将信息化技术与实验室管理需求相结合的信息化管理工具。以ISO/IEC17025:2005-5-15检测和校准实验室能力的通用要求（国标为GB 15481）规范为基础，结合网络化技术，将实验室的业务流程和一切资源以及行政管理等以合理方式进行管理。通过 LIMS 系统，配合分析数据的自动采集和分析，大大提高了实验室的检测效率；降低了实验室运行成本并且体现了快速溯源和痕迹，使传统实验室手工作业中存在的各种弊端得以顺利解决”。现如今我国的LIMS有很多专业公司和高校进行研究，针对不同的实验环境进行开发和应用，有高校实验室，也有公司政府部门如（石油化工，疾病监控、环境监测、水资源监测）等实验室，通过对不同实验室的不同需求对其进行分层次设计以满足客户的需求，在技术特点上来看，很多商业 LIMS 软件达到了以下一些技术 ：1、支持物理式分布，2、跨平台支持多种浏览器，3、自定义界面设置，4、模块组件的拆分满足客户要求，5、流程的自定义，6、支持一些普通格式的文件在线浏览，7、易于集成方便的获取实验及业务数据，8、划分不同版本控制使用成本提供给不同用户使用，9、支持在线更新。我国的高校实验室信息管理软件在设计时大多都是量身打造，主要以满足资源共享，无纸化办公，提高工作效率而进行设计。 1.3.2 国外发展概述 国外是最先进行 LIMS 系统的研究和应用至今为止发展了三个阶段，第一阶段为 80 年代，第二阶段为 90 年代中期，第三阶段为现在现阶段；其技术基本采用 B/S 模式的三层结构,通过服务器浏览器用户之间的交互进行数据的管理和交换 。目前来看 LIMS 系统已经打破了传统的实验室单独运行模式，实现了远程的信息的交换访问、登录，与企业的信息系统进行集成，通过仪器接口直接采集实验仪器数据避免了人工输入和干预实验数据，使用 LIMS软件对实验室形成了全方位的管理。 国外 LIMS 软件在设计方面对某一实验室的工作进行总结抽象化，然后将其变成语言。但是在 LIMS 系统中没有涉及到国外实验室的管理水平，只是通过软件描述其管理模式，主要侧重于工作的管理，而国外实验室管理的内容和幅度都不大，而我们国内的实验室管理的内容多幅度大，层次复杂，很难用语言来描述，所以说不能照搬国外的LIMS软件进行开发和管理。 现在从全球范围来看，目前 LIMS 在欧美日澳等发达国家的实验室广泛的应用，安装实验室管理系统的部门已经超过上万家，每年的产值为几亿美元，而这个速度以每年13%的速度增加。 1.4 太原工业学院实验管理中心现状太原工业学院机械工程实验中心是我院省级实验教学示范中心，中心主要面向全校机械类及近机类专业学生开展实验、实践教学、科研和社会服务工作。中心下设机械基太原工业学院机械工程实验中心是我院省级实验教学示范中心，中心主要面向全校机械类及近机类专业学生开展实验、实践教学、科研和社会服务工作。由于学校的实验室资源紧张，在实验室安排的过程中常常会出现不同的系争抢实验室的情况，为了将有限的资源进行合理的分配而成立了太原工业学院机械实验管理中心，在实验管理中心中心下设机械基础实验室、技术测量实验室、机电工程实验室、数控技术实验室、工艺工装实验室、材料分析实验室、材料成型实验室和力学性能实验室8个实验室，中心面积约2500平米，实验仪器、设备1800多台（套），资产价值约1400万元。实验中心目前从事实验教学的专职、兼职教师12人，可开设机械类、近机类的基础实验、专业实验、各种综合实验和实践教学等，课内实验开出率100%。在如此多的实验室中，常常有实验室人员的调动，物资的请购，设备维护，实验运行记录，药品的管理，设备的借用，仪器损坏记录，值班管理等诸多的管理和信息记载和查询，现在通过人工的方式发现工作量大，信息冗余大，记录不规范，信息准确度差等诸多缺点。所以急需一个实验室管理软进行管理和统一的部署。实验管理信息系统是一个对太原学院实验与教学管理中心进行业务流程管理的一个系统，它通过对业务流程进行数据化的管理能更好的提高各部门间的协作，提高实验室运行数据的规范性和准确性，对统计的数据起到一个准确直观的展示和分析基于太原工业学院实验与资源管理中心对实验管理信息系统的要求，通过用Dreamweaver编写管理系统并将系统部署在网络上的正常运行，在系统的使用中能减少实验管理教师的工作量，防止收集的数据出现错误。 在此系统中本人主要负责系统整体模块和框架的编写和设计开发，设计并制作出管理系统的主体网页并实现其基本功能，在开发好之后对系统进行测试及在日常的维护中对系统的功能进行升级并修改使用过程中存在的BUG。2 实验管理系统开发技术实验管理系统的开发主要通过一些制作网页的软件进行网页的软件进行设计开发，构建出机械管理中心平台，实现基本模块的功能。目前制作网页一般使用的软件主要有Dreamweaver，Fireworks，Flash，俗称网页制作三剑客。Dreamweaver 是一个“所见即所得”的可视化网站开发工具，主要用于动态网页和静态网页的开发；Fireworks主要是用于对网页上常用的jpg、gif的制作和处理，也可用于制作网页布局；Flash主要用来制作动画，现推出Flash平台，可预见有极好的前景。所以我本次设计主要选用Dreamweaver cs6结合Photoshop cs6处理图片2.1 网页设计工具Dreamweaver软件Dreamwraver软件是Adobe 公司推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计软件。它将可视化布局工具，应用程序开发功能和代码编辑支持组合为一个功能强大的工具系统，使每个级别的开发人员和设计人员都可以利用它快速地创建网页界面。该软件在目前的最新版是Dreamweaver CS6，它支持代码拆分设计实时视图等多种方式来创建编写和修改网页。对于初级人员来说，可以无须编写任何代码救恩那个快速创建Web页面，而其成熟的代码编辑工具更适合于Web开发高级人员的创作。新版本还使用了自适应网格版面创建页面，在发布前使用多屏幕预览审阅设计，可以大大提高工作效率。改善FTP性能，可更高效地传输大型文件。实时视图和多屏幕预览面板可呈现HTML5代码，帮助用户方便地检查所做工作。Dreamweaver和同类的其它软件相比而言，主要有以下得一些优点：1、可视化的网页编辑器。Dreamweaver会把用户的操作自动转化成HTML的代码，不会生成生涩难懂的代码。Dreamweaver的代码简单精炼，不会生成生涩难懂的代码，避免了许多不必要的劳动。2、便捷的编辑代码。3、强大的动态页面。即使用户不懂java script，也可以使用Dreamweaver的Behavior功能，在网页里添加各种的动态效果,能够设计完成华丽的动态层效果。4、操作简单。Dreamweaver里有历史面板、html样式、模版、库等功能，可以通过历史面板、html样式、模版、库等的使用，使用户不用重复的劳动。2.1.1 Dreamweaver界面介绍 打开Dreamweaver cs6软件，操作界面如图2.1所示：图2.1 Dreamweaver cs6操作界面操作界面的上部菜单栏分别是“文件”、“编辑”、“查看”、“插入”、“修改”、“格式”、“命令”、“站点”、“窗口”和“帮助”菜单。“文件”菜单中的命令主要是针对文件和素材的一些基本操作，如新建文档、打开文档和保存文档等。“编辑”菜单中包含一些常用的编辑命令，比如复制剪切粘贴查找替换撤销重做等。“查看”菜单中的命令主要帮助用户查看文档的各种视图，切换成代码视图或设计视图，并且可以显示和隐藏不同类型的页面元素及各种工具。“插入”菜单用来插入各种元素，例如图片、表格、框架、多媒体组件等。“修改”菜单可以用来对页面元素进行修改，例如修改页面属性、表格、框架等。“格式”菜单中的命令主要为了方便用户设置网页的文本格式。“命令”菜单中的命令主要用来提供对各种命令的访问。“站点”菜单中的命令主要用于创建、打开和编辑站点，以及用于管理当前站点中的文件。“窗口”菜单提供对Dreamweaver CS6中所有面板检查器和和窗口的访问。“帮助”菜单提供对Dreamweaver CS6中文件的访问，包括如何使用Dreamweaver CS6，如何使用Business Catalyst，并且包括各种代码的参考材料。新建一个空白文件，如图2.2所示：图2.2 空白文件在设计网页时，先在“代码”页面输入代码，然后再到“设计”中查看，点击“实时视图”，查看实时效果。2.2 网页图片设计工具Photoshop软件Photoshop是世界顶尖级的图像设计与制作工具软件。图像处理是对已有的位图图像进行编辑加工处理以及运用一些特殊效果，其重点在于对图像的处理加工。在表现图像中的阴影和色彩的细微变化方面或者进行一些特殊效果处理时，使用位图形式是最佳的选择，它在这方面的优点是矢量图无法比拟的。我所使用的版本为Photoshop cs6，和以前版本相比有以下优点：1、复杂更加简单，使用新的细化工具自动改变选区边缘并改进蒙版。 2、内容感知型填充3、出众的 HDR成像4、最新的原始图像处理5、出众的绘图效果6、操控变形。2.2.1Photoshop软件界面介绍打开Photoshop软件，操作界面如图2.3所示：图2.3 Photoshop操作界面菜单栏位于界面最上方，包含了用于图像处理的各类命令，共有11个菜单，每个菜单下又有若干个子菜单，选择子菜单中的命令可以执行相应的操作。标题栏位于工具选项栏下方，显示了文档名称、文件格式、窗口缩放比例和颜色模式等信息。工具箱的默认位置位于界面左侧，通过单击工具箱上部的双箭头，可以在单例和双列间进行转换。调版区的默认位置位于界面右侧，主要用于存放Photoshop cs5提供的功能调板。2.3 相关术语解释HTML是超文本标记语言英文（Hyper Text Markup Language）的缩写。CSS是Cascading Style Sheets的简称，也成为“层叠样式表”。DIV是层叠样式表中的定位技术，全称Division，即为划分。3 实验管理系统的设计开发3.1 实验管理系统功能分析实验管理中心是我们学校的对外展示自身形象的名片，每一个网页都有自己的特色，每一个网页都有自己的个性。根据学校的特点、内容形式的不同，规划建设不同的网页表达方式，在设计和创意方面既体现学校的特色，又兼顾其展的方向。做到既量身定做、又兼容并蓄。从设计风格上分析，由于网站属性为专业性网站，设计风格总体上应为清新、简约风格（蓝色为主），应有一个统一的logo图案。从网页的信息布局分析，学校网站的主体信息结构及布局，它是总体网站的框架，所有的内容信息都会以此为依据进行布局，清晰明了的布局会使浏览者能方便快捷地取得所需信息，主体为总分结构，顶端为导航，以实现清晰明了的信息布局。如图3.1和3.2所示，为北京大学实验室与设备管理部首页，最上面为北京大学校徽，基本色为蓝色、红色，导航栏里有“网站首页”、“机构设置”、“规章制度”、“服务指南”、“实验室管理”、“设备查询共享”、“设备查询共享”、“安全环保”、“下载专区”。整体为国字型布局，左侧为“快速导航”和“相关链接”，右侧为实验管理系统等的登录入口和下载专区，中间为工作动态和通知公告。图3.1 北京大学实验室与设备管理部首页最下面为版权信息和联系方式。图3.2 版权信息和联系方式如图3.3所示，为上海交通大学实验室与设备处首页，最上面为上海交通大学校徽，基本色为蓝色，导航栏里有“首页”、“机构设置”、“规章制度”、“办事指南”、“文档下载”、“实验室建设”、“简报”、“院系风采”、“党务之窗”、“院系园地”。整体为列式型布局，背景为一张图片，左侧为实验管理系统等的登录入口，中间为简讯、通知和院系风采。右侧为版权信息和联系方式。图3.3上海交通大学实验室与设备处首页如图3.4、3.5和3.6所示，为吉首大学实验室与设备管理中心首页，最上面为吉首大学的校徽基本色为蓝色。网页的布局从上到下，分为四块，最上面为导航栏，下面为主体部分，再下面为一个仪器设备展示区，最下面为网页信息栏。导航栏里有“首页”、“机构设置”、“信息公告”、“规章制度”、“服务指南”、“实验室一览”、“设备一览”、“三大中心”、“下载专区”。主题部分分左右两块，左侧分四小块，从上而下分别为快速导航、常用系统、友情链接和联系方式；右侧也分四小块，从上而下分别为实验室展示区、新闻动态、通知公告及服务指南和一张装饰网页用的图片。仪器设备展示区里放了一些图片，从右向左循环移动。最下面的网页信息栏主要内容有版权信息、地址、邮编、联系方式等。图3.4 吉首大学实验室与设备管理中心首页图3.5 主题部分图3.6 网页信息栏3.2 主页的设计通过借鉴其他学校的实验设备管理中心主网页，我的设计为上中下三层布局，最上层为导航栏，中间层为主体部分，最下层为网页信息栏，如图3.7所示：图3.7 主页设计图3.2.1 导航栏 导航栏分为上中下三层，如图3.8所示，从上而下分别为时间日期栏、首页的logo和主要功能模块。时间日期栏左边写有“欢迎访问机械实验中心！”，右边为具体日期，划分的块定义为top-top。首页的logo是一张宽为1002像素，高为100像素的图片，通过Photoshop软件制作而成（第四节会具体介绍），在事先划分好的区域，通过插入图片的代码完成。最下面的功能模块主要划分两块，左边分七块，分别为首页、教学动态、实验室一览、设备一览、社会服务、规章制度和资料下载，每个上面都添加超级链接，点击可以转到子网页里面；右边为站内搜索和中英版本切换的功能。 图3.8导航栏3.2.2 主体部分 主体部分主要分为左、右两块，如图3.9所示，左边又分为上、下两块，上面这块划分为图片展示区域，主要展示图片，由切换图片的脚本控制；下面的左块为教学动态栏，用来放一些教学过程的新闻、动态、通知等内容，下右块为实验室简介栏，主要介绍了实验管理中心的一些简单介绍。右边为从上而下的结构。最上边为快速导航，可以直接链接到实验室管理、实验室建设、实验设备管理、实验室安全、大学生创新训练中心等网页的页面；快速导航下面放着一张宽为295像素，长为113像素的图片，用来装饰网页，使网页不显得枯燥、单调；图片的下面为学生实验信息查询系统的入口，由一张图片和一个一行三列的表格，输入班级信息进行查询；学生实验信息查询系统的下面放另一张宽为295像素，长为120像素的图片，用来装饰网页；最下边为友情连接模块，可以方便的链接到比较常用的一些网站。图3.9 主体部分3.2.3 网页信息栏网页信息栏分为左右两块，如图3.10所示，左边里为地址栏和邮政编码；右边为联系电话、电子邮箱和互联网准入证、备案号等。图3.10 网页信息栏3.2.4 站点的规划在创建站点之前，一定要对站点进行合理的规划，这样能使站点中的文档管理起来更轻松，也能提高工作效率。一般来说，在规划站点结构时，应遵循以下一些规则。 1.文件分类保存。如果是一个复杂的站点，它包含的文件会很多，而且各类型的文件内容也不尽相同。为了能更合理地管理文件，就要将文件分门别类地存放在相应的文件夹中。如果将一切网页文件都存放在一个文件夹中，当站点的规模越来越大时，管理起来就会很不容易。用文件夹来合理构建文档的结构时，应先为站点在本地磁盘上创建一个根文件夹，然后再根文件夹中分别创建多个子文件夹，比如网页文件夹、媒体文件夹、图像文件夹等，接着将相应的文件放在相应的文件夹中。站点中的一些特殊文件，比如模版、库等最好存放在系统默认创建的文件夹中。2. 合理命名文件。为了方便管理，文件夹和文件的名称最好要有具体的含义。这点非常重要，特别是在网站的规模变得很大时，若文件名容易理解，人们一看就明白网页描述的内容。否则，最着站点中文件的增多，不易理解的文件名会影响工作效率。还有，应该尽量避免使用中文文件名，因为很多的Internet服务器使用的是英文操作系统，不能对中文文件名提供很好的支持，但可以使用汉语拼音。图3.11所示为本设计中文件夹的设置:图3.11 文件夹设置3.3 网页的制作过程1.打开Dreamweaver软件，选择“站点”命令中的“新建站点”命令如图3.12所示建立站点。图3.12 建立站点2.创建index.html文件和css.css文件。在index文件中划分区域，如图3.13所示。图3.13 创建index.html文件3.如图3.14所示，在css文件中定义块的大小、颜色、字体、背景、间隙、边距和相对位置等。图3.14 创建css文件4.如图3.15所示，点击“设计”按钮，查看设计效果。图3.15 设计效果5.如图3.16所示，在空白处点击插入按钮，选择“图象”按钮，插入要插的图片。图3.16 插入图片6.如图3.17所示，在需要添加超级链接的地方，选中“插入”按钮，选择“超级链接”，然后填入文本名称，最后确定。图3.17 创建超链接7.如图3.18所示，添加超级链接后，在鼠标点击到后，属性面板里的HTML面板里会在链接的里面显示已经添加的链接。图3.18 显示超链接添加8.如图3.19所示，在需要添加表格的地方，选中“插入”按钮，选择“表格”，选择好行数列数等数据，然后确认。图3.19 添加表格9.如图3.20所示，将鼠标悬浮在表格的边框上，可以对表格进行拉伸压缩等动作，改变表格的长度和宽度。图3.20 改变表格长度与宽度10. 如图3.21所示为完成后的网页。图3.21 设计完成的网页3.4 运用CSS+div对网页进行管理的优势在本设计中，运用了CSS+div布局对网站进行了优化，链接如图3.22所示，运用CSS+div对代码进行优化的好处。图3.22 CSS+div布局连接一.精简代码，降低重构难度。将CSS+div布局使用到网页后，会使代码变得很精简，在网页的任何一个页面都可以对css文件进行调用。若是使用css+div布局修改部分页面只需修改css文件中的一个代码即可。若是用其他布局，则需手动改很多页面，显得很麻烦。二.网页访问速度使用了CSS+div布局的网页，精简了许多页面的代码，从而提升了网页的访问速度，也自然而然的提升了网站的用户体验度。三.SEO优化采用CSS+div布局的网站对于搜索引擎很是友好的，因此其避免了Table嵌套层次过多而无法被搜索引擎抓取的问题，而且简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。在本次设计中，完成的主页部分源代码仅为256行，如图3.23所示，而一般同类网页一般在1000行以上。图3.23 源代码4 使用Dreamweaver处理图片1.如图4.1和图4.2所示，新建文件，打开蓝天白云素材，选择裁剪工具，宽度选择1002像素，高度选择100像素，按比例裁剪。图4.1 新建文件图4.2 素材2.将裁剪过后的图像拖动到空白文件里，如图4.3和4.4所示：图4.3 裁剪图像图4.4 拖动裁剪图像3.如图4.5和图4.6所示，选择鸽子的素材图片，用魔棒工具选区，将选区拖动到文件中，对选区进行调整大小。图4.5 选择鸽子素材图4.6 调整选区大小4.如图4.7所示，选择院徽素材，由于背景是透明的，所以不用魔棒工具，直接将其拖到文件中，并调整图片的大小和位置。图4.7 选择院徽素材4.如图4.8所示，调整院徽在图片中的大小和位置。图4.8 调整院徽在图片中的大小和位置6.如图4.9和图4.10所示，选择文本工具，输入“机械工程实验中心”，修改字体的大小，选择长城魏碑字体。图4.9 输入“机械工程实验中心”图4.10 修改字体7.由于ps中的图片格式为psd格式，而网页中一般用到的图片格式为jpg格式或gif格式，将做好的图片储存为gif格式，如图4.11所示。图4.11 图片储存为gif格式5 结论通过本毕业设计经过几个月的查资料、整理材料、学习软件、设计网页到写作论文，今天终于可以顺利的完成论文，终于让学生在大学的生活，得以划下了完美的句点。 毕业设计是对我们大学生活四年来教学的一个总结性考察，里面包含了我们学过的很多方面的知识，平时的学习都是自己听老师讲解，或者就是做练习之类，缺少了自己的独立思考，通过这次的毕业设计，让自己清楚了解了自己，提升了自我学习思考的能力。从第一眼看到资料的那种眼花缭乱的感觉，到最后看到自己做出的设计论文的成功，体验了一次从茫然到无助