毕业设计（论文）：静态企业网页制作.doc

1、内蒙古化工职业学院毕业设计（ 论文）用纸 内蒙古化工职业学院 毕业设计 (论文、专题实验 )任务书 姓 名 专业 计算机应用技术 班级 计应 11-1 指导教师 题 目 静态企业网页 原始数据 说明书 (论文、实验 ) 主要内容 本次设计了解了静态网页设计与制作的内涵和意义。运用Dreanweaver 软件，采用 div+css 为企业网页进行设计与制作，根据其内容、策划等确定基本思路，制定方案，并按思路认真完成本次设计。 图纸要求 对学生 综合训 练方面 的要求 根据所学课程 的理论知识，将理论与实践相结合，设计制作出一套完整的作品。 完成期限 2013 年 11 月 25 日至 2013

2、年 12月 15 日 备 注 : 签发 : 日期 : 2013 年 12 月 内蒙古化工职业学院毕业设计（ 论文）用纸 内蒙古化工职业学院 毕业设计 (论文 )评阅意见表 专 业 计算机应用 班 级 计应 111 姓 名 毕业设计 (论文 )题目 静态企业网页制作 指 导 教 师 评 语 答 辩 委 员 会 评 语 成绩 内蒙古化工职业学院毕业设计（ 论文）用纸 摘 要 计算机和计算机网络的飞速发展，人们对计算机网络的依赖是越来越大。人们在网上聊天交友，在网上请教问题，查阅资料，还在网上听音乐。除此之外，人们还会在网上进行商务交易、下载信息，有着众多的使用者。尤其是电子商务大大的减少了人们对周

3、围环境的依赖，无论是哪里的网友，都可以浏览到世界各地的各类信息，非常的方便，由于以上的优势，各类网站如雨后春笋般的出现，企业网站也不例外。 本论文着重对 div+css 布局与美化公司网页进行了讨论；同时根据客 户需求，采用 div+css 实现了咨询公司网页的设计，具体实现了首页、公司简介、品牌历史与技术创新、产品展示、用户注册与登录联系我们、在线留言等功能，系统符合公司网站的需求。 关键词： 网页设计 Dreamweaver div+css 企业网页 内蒙古化工职业学院毕业设计（ 论文）用纸 第 1 页 目 录 第 1章 前言 . 1 第 2章 静态网页制作概述 . 2 2.1 静态页面

4、. 2 2.2 网页开发技术 . 2 2.3 网页布局 . 2 2.3.1网页布局方法 . 2 2.3.2网页布局技术 . 3 2.4网页配色 . 3 2.5 网页设计流程 . 3 2.6 网页设计原则 . 3 第 3章 网页需求分析 . 5 3.1 课题来源 . 5 3.2 需求分析 . 5 第 4章 相关技术 . 7 4.1网页制作软件 DREAMWEAVER . 7 4.2 DIV+CSS . 7 4.2.1 div . 7 4.2.2 CSS . 8 4.2.3 样式 . 8 4.2.4 层叠 . 8 4.3 DIV+CSS 简介 . 8 第 5章 企业网页的实现 . 10 5.1 布

5、局与配色 . 10 5.2企业首页 . 10 5.3 公司简介 . 11 5.4产品展示 . 11 5.4用户注册 . 12 5.5 在线留言 . 13 毕业设计总结 . 14 内蒙古化工职业学院毕业设计（ 论文）用纸 第 2 页 参考文献 . 15 致 谢 . 16 内蒙古化工职业学院毕业设计（ 论文）用纸 第 1 页 第 1 章 前言 网页和网站在如今的 Internet网络中已经成为重要的基础，是作为政府和事业单位工作、公司宣传、电子商务等社会和经济内容的网络平台支持。政府、事业单位和企业对于网页的设计与制作也越来越重视。 由于 Web2.0 的成熟和广泛应用，网页设计和制作也和以 前截

6、然不同。尤其是Div+CSS 技术的应用对于网站样式和内容的维护起到了至关重要的作用。 Adobe 公司对于网络整合软件 Dreamweaver 在这方面做了很大的改进， Dreamweaver CS5 操作更加方便简捷，给予 Div+CSS 布局全面的支持。 当今世界已进入信息时代， Internet 成为 21世纪最受关注的焦点之一 ,它的飞速发展和在全球范围的普及应用正在给人类生活带来革命性变化。网络技术的发展也取得了巨大的成就，为网站开发提供了很好的技术支持。网站已经成为现阶段众多企业不可或缺的网络营销平台，互联网应用 规模正在不断扩大。其中，特别是中小型企业，对于网络平台搭建的需求相

7、当的迫切。各大门户网，企业网都在 WEB2.0的标准上 ,采用 div+css来布局，因此有了此次的选题。 企业网站是一个企业不可缺少的部分，它能介绍企业文化、经营理念、特色服务及企业在全国的网点分布。拓宽顾客市场，增加企业与客户之间的联系，缩短二者之间的距离。提高企业知名度，为企业今后的业务发展开辟一个良好的社会环境。它的内容对于企业来说至关重要 ,企业概况、企业论谈、企业特色服务、最新企业新闻动态等部分应该能够为用户提供充足的信息。企业网站做成检 索迅速、查找方便、可靠性高、存储量大、保密性好、寿命长、成本低、维护方便、信息实时性强的功能完善的大型企业网站。这些优点能够极大地提高了企业网站

8、的效率 ,也是企业走向科学化、信息化与世界接轨的重要条件。 内蒙古化工职业学院毕业设计（论文）用纸 第 2 页 第 2 章 静态网页制作概述 静态网页有时也被称为平面页。静态网页的网址形式通常为 htm（超文本标记语言）结尾 ，还有就是以超文本标记语言 （ .htm、 .html）、 .shtml、 .xml（可扩展标记语言）等为后缀的。在超文本标记语言格式的网页上，也可以出现各种动态的效果，如 .GIF 格式的动画、 FLASH、滚动字 幕等，这些 “ 动态效果 ” 只是视觉上的，与下面将要介绍的动态网页是不同的概念。静态网页面通常是超文本标记语言文档存储为文件在文件系统里头，并且可以通过

9、HTTP 访问网络服务器。 2.1 静态页面 静态页面是网页的代码都在页面中，不需要执行 asp， php， jsp， .net 等程序生成客户端网页代码的网页。静态页面不能自主管理发布更新的页面 ,如果想更新网页内容 ,要通过 FTP 软件把文件 DOWN 下来用网页制作软件修改（通过 fso 等技术例外）。但是静态页面最大的好处是下载速度快，因为不需要程序运算和数据库连接。常见的静态页面以 .html、 .htm 为扩展名的。并非网站上没有动画的就是静态页面。 2.2 网页开发技术 HTML（ HyperTextMark-upLanguage）即超文本标记语言，是 WWW 的描述语言。严格

10、的来讲， HTML 不能算做一门编程语言，因为它没有自己的数据类型，也没有分支、循环等控制结构。它的设计简单，结构灵活，允许在 Web 浏览器及其它兼容的应用程序中显示文本和图像，并且文档的某些部分可以成为超链接。完成后把这些文档保存为*.html 文件，然后用浏览器打开。 HTML 是网络的通用语言 ,一种简单、通用的全置标记语言 。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。 2.3 网页布局 网站主页就好象是宣传栏或者店面 对访问者产生第一印象，都希望尽量给人留下好的印象。网页应该力求抓住而不是淹没浏览者的注意力

11、，过多的闪烁、色彩、下拉菜单框、图片等会让访问者无所适从。 2.3.1 网页布局方法 网页布局的方法有两种，第一种为纸上布局；第二种为软件布局。 企业网页布局方法采用软件布局法，利用 Photoshop 软件所具有的对图像的编辑功能用到设计网页布局上 更显得心应手。利用 Photoshop 可以方便的使用颜色，使用图形，并且可以利用层的功能设计出用纸张无法实现的布局意念。 内蒙古化工职业学院毕业设计（论文）用纸 第 3 页 2.3.2 网页布局技术 企业网页布局技术采用层叠样式表的应用，在新的 HTML4.0标准中， CSS(层叠样式表 )被提出来，它能完全精确的定位文本和图片。 CSS 有点

12、复杂，但它的确是一个好的布局方法。曾经无法实现的想法利用 CSS 都能实现。目前在许多站点上，层叠样式表的运用是一个站点优秀的体现。 2.4 网页配色 企业网页的配色主要采用白色和灰色这样一种大众化的配色，使网页简洁大方而且方便浏览者浏览 ，同时带给用户一种新的体验。 颜色可以瞬间改变我们的情绪和意见。颜色会让我们感觉到舒适、敬畏，或者激动。颜色是平衡中的重要部分，不能忽略。 2.5 网页设计流程 网页设计是一个互动的过程，不仅是设计师构思设计就可以完成的。从客户提出需求到最终发布，期间需要客户与设计人员共同参与协商才可以，具体流程如下： 首先，获取客户需求和资料。在设计网站页面之前，设计师需

13、要知道客户的需求，从而确定客户建立网站的目的。客户提出网站需求是非常重要的一个环节。没有详细的需求，设计人员无法凭空进行设计制作。在这个步骤中，双方的沟 通与交流是非常重要的。 其次，确定网站内容。设计人员选择适合自己的图像编辑软件、动画制作软件和网页制作软件进行网页的初步设计，这中间可能还需要和客户进行多次沟通才能达到客户满意的效果。在具体设计时，设计人员应该为网站定位一个主题，从而保证所有网页都围绕这个主题进行设计制作，保证风格的和谐统一。 然后，申请域名和空间。使用该方法能够有效同步管理文件。还可以通过 FTP软件连接到服务器空间上，然后上传发布文件。 最后，后期维护。一般静态网站上传后

14、，如果客户方没有专业人员维护，这样就需要设计人员从客户方获取新资料进 行定期或不定期的更新。如果是动态网站，设计人员需要负责培训客户方如何使用后台管理，这样客户就可以自己通过后台管理添加信息，设计人员只要及时更正动态网站的错误即可。 2.6 网页设计原则 1、目的性 任何一个网站，必须首先具有明确的目的和目标群体。网站是面对客户、供应商、消费者还是全部？主要目的是为了介绍企业、宣传某种产品还是为了试验电子商务？如果目的不是唯一的，还应该清楚的列出不同目的的轻重关系。建站包括类型的选择、内容功能的筹备、界面设计等各个方面都受到目的性的直接影响，因此目的性是一切原则内蒙古化工职业学院毕业设计（论文

15、）用纸 第 4 页 的基础。 2、 专业性 网站的信息内容应该充分展现企业的专业特性，对外介绍企业自身，最主要的目的是向外界介绍企业的业务范围、性质和实力，从而创造更多的商机。 3、实用性 网站提供的功能服务应该是切合浏览者实际需求的且符合企业特点的。例如网上银行提供免费电子邮件和个人主页空间就既不符合浏览者对网上银行网站的需求也不是银行的优势，这样的功能服务提供不但会削弱浏览者对网站的整体印象，还浪费了企业的资源投入，有弊无利。 4、层次性 条理清晰的结构，表现为网站的板块划分的合理性，信息内容的获取和功能服务的过程都应该尽量将所需要进 行的步骤控制在 3-5步以内，不得不需要更多的步骤的时

16、应该有明确的提示。 5、一致性 页面整体设计风格的一致性：整体页面布局和用图用色风格前后一致。界面元素的命名的一致性：同样的元素应该用同样的命名；同类元素命名满足一致性，做到即使某个元素的表述不清楚也能从上下文推断其义。功能一致性：完成同样的功能应该尽量使用同样的元素。元素风格一致性：界面元素的美观风格、摆放位置在同一个界面和不同界面之间都应该是一致的。 内蒙古化工职业学院毕业设计（论文）用纸 第 5 页 第 3 章 网页需求分析 3.1 课题来源 信息产业的发展，促使相关技术也得到相应的发展。电子商务作为未 来商务、流通等领域的热门从 1999 年开始也得到飞速发展，而基于网上的网站建设、网

17、页制作和发布也得到了重视。 建立网站的好处： 1、可以利用网站及时得到客户的反馈信息。 2、可以降低通信费用。 3、可以与潜在客户建立商业联系。 4、可以与客户保持密切联系。 5、可以全面详细地介绍美食及其制作方法。 3.2 需求分析 网站是企业向用户和网民提供信息的一种方式，是企业开展电子商务的基础设施和信息平台。企业的网址被称为 “ 网络商标 ” ，也是企业无形资产的组成部分，而网站则是反映企业形象和文化的重要窗口。 在 IT 行业迅速 发展的今天 ,企业网站的建设已经成为一个企业发展必不可少的存在。对于创意设计有限公司来说，我们将建立一个以宣传为目的的网站类型。将于短期内强力打造公司的宣

18、传力度，让更多的客户了解，信任公司。网站的建设，也是公司对于宣传方面的长期投资。 本网站需要设置一下几个模块： 1、企业品牌形象 对于一个以生产为主的大型企业而言，企业的品牌形象至关重要。 特别是对于互联网技术高度发展的今天，大多客户都是通过网络来了解企业产品、企业形象及企业实力，因此，企业网站的形象往往决定了客户对企业产品的信心。建立具有国际水准的网站，能够 极大的提升企业的整体形象。 2、企业首页 网站首页体现的是一个网站的门面，也显示了企业的一些相关的消息，是网站设计中比较重要的一部分，它以网站综合平台的形式展示整个企业网站各部分的主体内容，是整个网站的导航，能够让浏览者在第一时间内领略到企业特色所在。 3、 企业 介绍 具体介绍出 企业的背景，经营项目，荣誉资质和 公司的发展史，结构，业务流程等等一系列来加大公司的宣传力度，好让客户能全面的了解公司 便于树立企业形象。 2、产品展示 一般其他营销模式的企业网站都是注重产品展示来加强企业的宣传力度，但是对于