静态企业网页制作毕业论文.doc

毕业设计（论文） 毕业设计(论文、专题实验)任务书 姓 名专业计算机应用技术班级 指导教师 题 目静态企业网页 原始数据 说明书 (论文、实验) 主要内容 本次设计了解了静态网页设计与制作的内涵和意义。运用 dreanweaver 软件，采用 div+css 为企业网页进行设计与制作，根 据其内容、策划等确定基本思路，制定方案，并按思路认真完成 本次设计。 图纸要求 对学生 综合训 练方面 的要求 根据所学课程的理论知识，将理论与实践相结合，设计制作出一 套完整的作品。 完成期限 2013 年 11 月 25 日至 2013 年 12 月 15 日 备 注: 签发: 日期: 2013 年 12 月 毕业设计（论文） 毕业设计毕业设计( (论文论文) )评阅意见表评阅意见表 专 业计算机应用班 级计应 111姓 名赵玉 毕业设计 (论文)题目 静态企业网页制作 指 导 教 师 评 语 答 辩 委 员 会 评 语 成 绩 毕业设计（论文） 摘 要 计算机和计算机网络的飞速发展，人们对计算机网络的依赖是越来越大。 人们在网上聊天交友，在网上请教问题，查阅资料，还在网上听音乐。除此 之外，人们还会在网上进行商务交易、下载信息，有着众多的使用者。尤其 是电子商务大大的减少了人们对周围环境的依赖，无论是哪里的网友，都可 以浏览到世界各地的各类信息，非常的方便，由于以上的优势，各类网站如 雨后春笋般的出现，企业网站也不例外。 本论文着重对 div+css 布局与美化公司网页进行了讨论；同时根据客户 需求，采用 div+css 实现了咨询公司网页的设计，具体实现了首页、公司简 介、品牌历史与技术创新、产品展示、用户注册与登录联系我们、在线留言 等功能，系统符合公司网站的需求。 关键词： 网页设计 dreamweaver div+css 企业网页 毕业设计（论文） 第 1 页 目 录 第 1 章 前言 .1 第 2 章 静态网页制作概述 .2 2.1 静态页面.2 2.2 网页开发技术.2 2.3 网页布局.2 2.3.1 网页布局方法.3 2.3.2 网页布局技术.3 2.4 网页配色.3 2.5 网页设计流程.3 2.6 网页设计原则.4 第 3 章 网页需求分析 .5 3.1 课题来源.5 3.2 需求分析.5 第 4 章 相关技术 7 4.1 网页制作软件 dreamweaver.7 4.2 div+css 7 4.2.1 div7 4.2.2 css.8 4.2.3 样式 8 4.2.4 层叠 8 4.3 div+css 简介8 第 5 章 企业网页的实现 10 5.1 布局与配色10 5.2 企业首页10 5.3 公司简介11 5.4 产品展示11 5.4 用户注册12 毕业设计（论文） 第 2 页 5.5 在线留言13 毕业设计总结 .14 参考文献 .15 致 谢 16 毕业设计（论文） 第 1 页 第 1 章 前言 网页和网站在如今的 internet 网络中已经成为重要的基础，是作为政府和事业单位 工作、公司宣传、电子商务等社会和经济内容的网络平台支持。政府、事业单位和企业 对于网页的设计与制作也越来越重视。 由于 web2.0 的成熟和广泛应用，网页设计和制作也和以前截然不同。尤其是 div+css 技术的应用对于网站样式和内容的维护起到了至关重要的作用。adobe 公司对 于网络整合软件 dreamweaver 在这方面做了很大的改进，dreamweaver cs5 操作更加方 便简捷，给予 div+css 布局全面的支持。 当今世界已进入信息时代，internet 成为 21 世纪最受关注的焦点之一,它的飞速发展 和在全球范围的普及应用正在给人类生活带来革命性变化。网络技术的发展也取得了巨 大的成就，为网站开发提供了很好的技术支持。网站已经成为现阶段众多企业不可或缺 的网络营销平台，互联网应用规模正在不断扩大。其中，特别是中小型企业，对于网络 平台搭建的需求相当的迫切。各大门户网，企业网都在 web2.0 的标准上,采用 div+css 来布局，因此有了此次的选题。 企业网站是一个企业不可缺少的部分，它能介绍企业文化、经营理念、特色服务及 企业在全国的网点分布。拓宽顾客市场，增加企业与客户之间的联系，缩短二者之间的 距离。提高企业知名度，为企业今后的业务发展开辟一个良好的社会环境。它的内容对 于企业来说至关重要,企业概况、企业论谈、企业特色服务、最新企业新闻动态等部分应 该能够为用户提供充足的信息。企业网站做成检索迅速、查找方便、可靠性高、存储量 大、保密性好、寿命长、成本低、维护方便、信息实时性强的功能完善的大型企业网站。 这些优点能够极大地提高了企业网站的效率,也是企业走向科学化、信息化与世界接轨的 重要条件。 毕业设计（论文） 第 2 页 第 2 章 静态网页制作概述 静态网页有时也被称为平面页。静态网页的网址形式通常为 htm（超文本标记语言） 结尾 ，还有就是以超文本标记语言（.htm、.html） 、.shtml、.xml（可扩展标记语言）等 为后缀的。在超文本标记语言格式的网页上，也可以出现各种动态的效果，如.gif 格式 的动画、flash、滚动字幕等，这些“动态效果”只是视觉上的，与下面将要介绍的动态 网页是不同的概念。静态网页面通常是超文本标记语言文档存储为文件在文件系统里头， 并且可以通过 http 访问网络服务器。 2.1 静态页面 静态页面是网页的代码都在页面中，不需要执行 asp，php，jsp，.net 等程序生成客 户端网页代码的网页。静态页面不能自主管理发布更新的页面,如果想更新网页内容,要 通过 ftp 软件把文件 down 下来用网页制作软件修改（通过 fso 等技术例外） 。但是静 态页面最大的好处是下载速度快，因为不需要程序运算和数据库连接。常见的静态页面 以.html、.htm 为扩展名的。并非网站上没有动画的就是静态页面。 2.2 网页开发技术 html（hypertextmark-uplanguage）即超文本标记语言，是 www 的描述语言。严 格的来讲，html 不能算做一门编程语言，因为它没有自己的数据类型，也没有分支、 循环等控制结构。它的设计简单，结构灵活，允许在 web 浏览器及其它兼容的应用程序 中显示文本和图像，并且文档的某些部分可以成为超链接。完成后把这些文档保存为 *.html 文件，然后用浏览器打开。html 是网络的通用语言,一种简单、通用的全置标记 语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何 其他人浏览到，无论使用的是什么类型的电脑或浏览器。 2.3 网页布局 网站主页就好象是宣传栏或者店面对访问者产生第一印象，都希望尽量给人留 下好的印象。网页应该力求抓住而不是淹没浏览者的注意力，过多的闪烁、色彩、下拉 菜单框、图片等会让访问者无所适从。 2.3.1 网页布局方法 网页布局的方法有两种，第一种为纸上布局；第二种为软件布局。 企业网页布局方法采用软件布局法，利用 photoshop 软件所具有的对图像的编辑功能 用到设计网页布局上更显得心应手。利用 photoshop 可以方便的使用颜色，使用图形，并 且可以利用层的功能设计出用纸张无法实现的布局意念。 毕业设计（论文） 第 3 页 2.3.2 网页布局技术 企业网页布局技术采用层叠样式表的应用，在新的 html4.0 标准中，css(层叠样 式表)被提出来，它能完全精确的定位文本和图片。css 有点复杂，但它的确是一个好的 布局方法。曾经无法实现的想法利用 css 都能实现。目前在许多站点上，层叠样式表的 运用是一个站点优秀的体现。 2.4 网页配色 企业网页的配色主要采用白色和灰色这样一种大众化的配色，使网页简洁大方而且 方便浏览者浏览，同时带给用户一种新的体验。 颜色可以瞬间改变我们的情绪和意见。颜色会让我们感觉到舒适、敬畏，或者激动。 颜色是平衡中的重要部分，不能忽略。 2.5 网页设计流程 网页设计是一个互动的过程，不仅是设计师构思设计就可以完成的。从客户提出需 求到最终发布，期间需要客户与设计人员共同参与协商才可以，具体流程如下： 首先，获取客户需求和资料。在设计网站页面之前，设计师需要知道客户的需求， 从而确定客户建立网站的目的。客户提出网站需求是非常重要的一个环节。没有详细的 需求，设计人员无法凭空进行设计制作。在这个步骤中，双方的沟通与交流是非常重要 的。 其次，确定网站内容。设计人员选择适合自己的图像编辑软件、动画制作软件和网页 制作软件进行网页的初步设计，这中间可能还需要和客户进行多次沟通才能达到客户满 意的效果。在具体设计时，设计人员应该为网站定位一个主题，从而保证所有网页都围 绕这个主题进行设计制作，保证风格的和谐统一。 然后，申请域名和空间。使用该方法能够有效同步管理文件。还可以通过 ftp 软件 连接到服务器空间上，然后上传发布文件。 最后，后期维护。一般静态网站上传后，如果客户方没有专业人员维护，这样就需 要设计人员从客户方获取新资料进行定期或不定期的更新。如果是动态网站，设计人员 需要负责培训客户方如何使用后台管理，这样客户就可以自己通过后台管理添加信息， 设计人员只要及时更正动态网站的错误即可。 2.6 网页设计原则 1、目的性 任何一个网站，必须首先具有明确的目的和目标群体。网站是面对客户、供应商、 消费者还是全部？主要目的是为了介绍企业、宣传某种产品还是为了试验电子商务？如 果目的不是唯一的，还应该清楚的列出不同目的的轻重关系。建站包括类型的选择、内 容功能的筹备、界面设计等各个方面都受到目的性的直接影响，因此目的性是一切原则 毕业设计（论文） 第 4 页 的基础。 2、专业性 网站的信息内容应该充分展现企业的专业特性，对外介绍企业自身，最主要的目的 是向外界介绍企业的业务范围、性质和实力，从而创造更多的商机。 3、实用性 网站提供的功能服务应该是切合浏览者实际需求的且符合企业特点的。例如网上银 行提供免费电子邮件和个人主页空间就既不符合浏览者对网上银行网站的需求也不是银 行的优势，这样的功能服务提供不但会削弱浏览者对网站的整体印象，还浪费了企业的 资源投入，有弊无利。 4、层次性 条理清晰的结构，表现为网站的板块划分的合理性，信息内容的获取和功能服务的 过程都应该尽量将所需要进行的步骤控制在 3-5 步以内，不得不需要更多的步骤的时应 该有明确的提示。 5、一致性 页面整体设计风格的一致性：整体页面布局和用图用色风格前后一致。界面元素的 命名的一致性：同样的元素应该用同样的命名；同类元素命名满足一致性，做到即使某 个元素的表述不清楚也能从上下文推断其义。功能一致性：完成同样的功能应该尽量使 用同样的元素。元素风格一致性：界面元素的美观风格、摆放位置在同一个界面和不同 界面之间都应该是一致的。 毕业设计（论文） 第 5 页 第 3 章 网页需求分析 3.1 课题来源 信息产业的发展，促使相关技术也得到相应的发展。电子商务作为未来商务、流通 等领域的热门从 1999 年开始也得到飞速发展，而基于网上的网站建设、网页制作和发布 也得到了重视。 建立网站的好处： 1、可以利用网站及时得到客户的反馈信息。 2、可以降低通信费用。 3、可以与潜在客户建立商业联系。 4、可以与客户保持密切联系。 5、可以全面详细地介绍美食及其制作方法。 3.2 需求分析 网站是企业向用户和网民提供信息的一种方式，是企业开展电子商务的基础设施和 信息平台。企业的网址被称为“网络商标” ，也是企业无形资产的组成部分，而网站则是 反映企业形象和文化的重要窗口。 在 it 行业迅速发展的今天,企业网站的建设已经成为一个企业发展必不可少的存在。 对于创意设计有限公司来说，我们将建立一个以宣传为目的的网站类型。将于短期内强 力打造公司的宣传力度，让更多的客户了解，信任公司。网站的建设，也是公司对于宣 传方面的长期投资。本网站需要设置一下几个模块： 1、企业品牌形象 对于一个以生产为主的大型企业而言，企业的品牌形象至关重要。 特别是对于互联 网技术高度发展的今天，大多客户都是通过网络来了解企业产品、企业形象及企业实力， 因此，企业网站的形象往往决定了客户对企业产品的信心。建立具有国际水准的网站， 能够极大的提升企业的整体形象。 2、企业首页 网站首页体现的是一个网站的门面，也显示了企业的一些相关的消息，是网站设计 中比较重要的一部分，它以网站综合平台的形式展示整个企业网站各部分的主体内容， 是整个网站的导航，能够让浏览者在第一时间内领略到企业特色所在。 3、企业介绍 具体介绍出企业的背景，经营项目，荣誉资质和公司的发展史，结构，业务流程等 等一系列来加大公司的宣传力度，好让客户能全面的了解公司便于树立企业形象。 2、产品展示 一般其他营销模式的企业网站都是注重产品展示来加强企业的宣传力度，但是对于 毕业设计（论文） 第 6 页 创意设计有限公司来说，没有其实际物品展示，只有展现其出众的业绩实例才能让客户 信服，才能从侧面展现出公司的实力，让客户更放心的把业务交给公司处理。 4、用户注册 使用户成为会员，可以足不出户通过互联网向客服了解产品的情况，在降低企业内 部资源顺好、减低成本、加强企业员工与员工，企业与员工之间的联系和沟通等方面发 挥巨大的作用，最终使企业的运营和运作打到最大的优化。 5、在线留言 在线留言是浏览者对我们提出的意见和建议，在留言过后我们也可以通过这个发现 我们的不足和好的地方，要是发现我们的不好，我们也可以接收到您的宝贵意见并给您 最满意的答复，对于好的我们也可以让更多的浏览者看到，顾客的评价是对其他的浏览 者的最大的信任。 毕业设计（论文） 第 7 页 第 4 章 相关技术 4.1 网页制作软件 dreamweaver dreamweaver 是创建和管理网页的专业化可视编辑器。使用 dreamweaver 可以轻松创 建跨平台、跨浏览器的页面。macromedia 的 roundtrip html 技术允许用户随意导入 html 文档而无需重新设置代码格式。 dreamweaver 可以为用户做到：使用动态 html 功能（例如具有动态效果的层和行 为）而不用写一行代码。它甚至还可以检查用户的工作成果在所有流行的平台和浏览器 中可能发生的错误。 dreamweaver 还是一个可以完全自定义的应用程序。用户可以创建自己的对象和命令 修改菜单和快捷键，甚至编写 javascript 代码扩展 dreamweaver 的行为和属性检查器。 至于 dreamweaver 工作区是非常灵活的，因此它可以适应各种不同的工作风格和使 用水平。常用的 dreamweaver 工作区组件有以下若干种： 1、文档窗口可显示当前文档，文档的外观和浏览器中看到的非常相似。 2、装载器中包含一些打开和关闭常用检查器和模板的按钮。 3、对象工具栏包含创建不同类型的对象（例如 图象、表格和层等）的按钮。 4、属性检查器显示选定对象的属性。 5、快捷菜单可以使用户对当前选择或区域快速执行某些命令。 6、可固定的浮动工具栏允许用户将浮动窗口、检查器和工具栏组合在一个或多个选 择窗口中。 4.2 div+css 4.2.1 div div 标签和其他 html 标签没有什么区别，需要由关闭标志。如果不加入任何 css 样 式，它的效果类似标记。div 示例代码如下： 内容 把 css 的扩展属性放入 div 标签中，就可以控制 div 容器中的所有 html 元素显示在屏 幕上的具体位置，为了实现这种 1:1 的精确控制，必须给当前的 div 加上唯一的 id，用来 区分其他 div 标记。还有一种情况是：你想让一类或者说几个 div 具有相同的样式属性时， 可以给每个 div 加上 class 属性，这样具有同样 class 属性的 div 标记样式相同。代码如下： 内容 毕业设计（论文） 第 8 页 内容 4.2.2 css css 是英文 cascading style sheet 缩写形式，中文译为层叠样式表或级联样式表。 web 设计者可利用它来定义文档的样式，这里指的文档不仅限于（x）html。通过 css，设计者可控制文档的字体、颜色、图像、表格、链接和布局格式，同时设计者也可 以将表示样式外观的信息从内容中分离出来，集中放置在页面的某一部分，甚至可保存 为独立的文件，从而减少文件的大小，节省网络的宽带、节约 web 设计者维护代码的时 间。css 有如此多的好处，掌握和使用好它对于 web 设计者来说是非常必要的。 4.2.3 样式 样式一词对于我们来说并不陌生，即使尚未接触 css 的人也不难理解样式的含义。 当你使用 microsoft word 一类的字处理程序时，几乎总要更爱某些样式以达到更好的效果， 比如设定标题为加粗的三号黑体字，每一段的开始流出两个空格等。样式表不能孤立地 使用，因为它本身并不包含任何内容信息。当然 css 也不仅仅能同 web 文档一起使用， 它还能定义 xml 甚至软件界面的样式。 4.2.4 层叠 与样式相比，了解层叠一词的 css 初学者可能就比较少了，层叠是 css 中的术语， 它包含了一系列的规则，浏览器根据这个规则来确定样式应该如何应用到页面的各个元 素中去。 4.3 div+css 简介 div+css 是网站标准（或称“web 标准” ）中常用术语之一，div+css 是一种网页的 布局方法,这一种网页布局方法有别于传统的 html 网页设计语言中的表格（table）定位 方式,真正地达到了 w3c 内容与表现相分离。html 语言自 html4.01 以来，不再发布 新版本，原因就在于 html 语言正变得越来越复杂化、专用化。xhtml 语言是一种可 以将 html 语言标准化，用 xhtml 语言重写后的 html 页面可以应用许多 xml 应用 技术。使得网页更加容易扩展，适合自动数据交换，并且更加规整。在 xhtml 网站设 计标准中，不再使用表格定位技术，而是采用 div+css 的方式实现各种定位。以下是 div+css 的特点简介： 1、符合 w3c 标准。微软等公司均为 w3c 支持者。这一点是最重要的，因为这保证 您的网站不会因为将来网络应用的升级而被淘汰。 2、支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是 ie7 或者是火 狐，您的网站都能很好的兼容。 3、搜索引擎更加友好。相对与传统的 table, 采用 div+css 技术的网页，对于搜索 毕业设计（论文） 第 9 页 引擎的收录更加友好。 4、样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。 现在 yahoo,msn 等国际门户网站，网易，新浪等国内门户网站，和主流的 web2.0 网站，均采用 div+css 的框架模式，更加印证了 div+css 是大势所趋。 5、css 的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽， 而且众所周知，搜索引擎喜欢清洁的代码。 6、表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。 毕业设计（论文） 第 10 页 第 5 章 企业网页的实现 5.1 布局与配色 本网站布局技术采用层叠样式表的应用，使用 css 实现出一个完美的网站。布局方 法采用软件布局法，利用 photoshop 软件对图像进行编辑。网页配色选用白色与灰色的色 彩搭配，来实现企业网站的简单大方。 5.2 企业首页 网站首页体现的是一个网站的门面，也显示了企业的一些相关的消息，是网站设计 中比较重要的一部分，它以网站综合平台的形式展示整个企业网站各部分的主体内容， 是整个网站的导航，能够让浏览者在第一时间内领略到企业特色所在。如图 5-1 企业首 页，导航部分插入 div 标签编辑 css，代码如下 首页 公司简介 品牌历史 技术创新 车型图片 车型视频 用户工具 在线留言 中间部分插入“布局对象” “spry 选择卡式面板” ，让浏览者可以选择性的浏览图 片信息。在 spry 选择卡式面板的下方分别为会员登录、新闻中心、联系我们，让浏览者 可以直接看到所需要的信息。 毕业设计（论文） 第 11 页 图 5-1 公司首页 5.3 公司简介 具体介绍出企业的背景，经营项目，荣誉资质和公司的发展史，结构，业务流程等 等一系列来加大公司的宣传力度，好让客户能全面的了解公司便于树立企业形象。如图 5-2 公司简介，中间部分左侧为产品系列，右侧为公司简介。 图 5-2 公司简介 5.4 产品展示 主要介绍企业的产品，让浏览者可以真实地看到企业的产品、进一步了解产品。如 图 5-3 图片展示，中间部分左侧为产品系列，右侧为产品图片展示。图 5-4 视频展示， 中间部分左侧为产品系列，右侧为产品视频展示。 毕业设计（论文） 第 12 页 图 5-3 图片展示 图 5-4 视频展示 5.4 用户注册 使用户成为会员，可以足不出户通过互联网向客服了解产品的情况。如图 5-5 用户 注册，中间部分左侧为产品系列，右侧为用户注册。 毕业设计（论文） 第 13 页 图 5-5 用户注册 5.5 在线留言 在线留言是浏览者对我们提出的意见和建议，在留言过后我们也可以通过这个发现 我们的不足和好的地方，要是发现我们的不好，我们也可以接收到您的宝贵意见并给您 最满意的答复，对于好的我们也可以让更多的浏览者看到，顾客的评价是对其他的浏览 者的最大的信任。如图 5-7 在线留言，中间部分左侧为产品系列，右侧为在线留言。 图 5-7 在线留言 毕业设计（论文） 第 14 页 毕业设计总结 随着毕业日子的到来，毕业设计也接近了尾声。经过几周的奋战我的毕业设计终于 完成了。在没有做毕业设计以前觉得毕业设计只是对这几年来所学知识的单纯总结，但 是通过这次做毕业设计发现自己的看法有点太片面。毕业设计不仅是对前面所学知识的 一种检验，而且也是对自己能力的一种提高。通过这次毕业设计使我明白了自己原来知 识还比较欠缺。自己要学习的东西还太多，以前老是觉得自己什么东西都会，什么东西 都懂，有点眼高手低。通过这次毕业设计，我才明白学习是一个长期积累的过程，在以 后的工作、生活中都应该不断的学习，努力提高自己知识和综合素质。 大学三年就会在这最后的毕业设计总结划上一个圆满的句号。我曾经以为时间是一 个不快不慢的东西，但现在