毕业设计制作说明(小型企业网站设计)

作品制作说明 课题 小型企业网站设计小型企业网站设计 学学院院电子信息工程学院电子信息工程学院 专专业业（方方向向）计算机应用技术专业（信息管理方向）计算机应用技术专业（信息管理方向） 班班级级微机微机 094094 学学号号 姓姓名名 完成日期完成日期20132013 年年 1212 月月 9 9 日日 指导教师指导教师 南通职业大学电子信息工程学院作品制作说明 1 小型企业网站设计 作品简介 21 世纪将是电子商务飞速发展的时代， 越来越多的企业建立了自己的网站， 越来越 多的人开始习惯从互联网上获取各种各样的信息， 尤其是利用互联网来寻觅各种商业机 会早已成为众多商业赢家的首选。网络可以给企业不分地域，不分国别的大量客户，带 来无限商机，为了获得本行业的领先地位，抓住不断涌现的机会，企业建立一个具有特 色的、集多功能为一体的企业网站就显得十分必要了。 本网站通过互联网向社会展示自己的网站，从而吸引投资者前来投资，扩大企业品 牌知名度，增加企业的综合竞争力，从而获得更多的商业利润。 本网站主要由首页、企业介绍、产品展示、新闻中心、家纺加盟、人才招聘、联系 我们七大模块组成。 首页主要展示了企业的情况：新闻中心，产品展示等，以黑色作为企业网站的背景 色， 显得企业成熟稳重， 值得投资者信赖，企业 logo 由英文 “Bluesky” 和中文组成“蓝 天家纺” ，以蓝色为底色，显示了蓝天家纺拥有如天空广阔般的胸怀。 企业介绍主要企业的发展历程和主要经营的项目， 让投资者更进一步的的了解我们 的网站。 产品展示主要向大众展示我们企业的产品， 让顾客能够深入了解我们产品的特点和 优势，从而对我们的产品产生信心，购买我们的产品。 新闻中心主要向客户展示我们企业最新的企业动态， 让客户了解我们企业最新的情 况，展示企业文化，拉近客户与企业的距离，让客户感觉企业就在他的身边。 家纺加盟主要向客户介绍成为企业经销商的要求和具体流程， 并提供了企业的联系 方式。 人才招聘主要面向社会向各界精英提供一个成为我们企业人才的平台， 为企业招贤 纳士，源源不断为企业输送新鲜血液。 联系我们主要给企业和客户提供一座沟通的桥梁， 客户和游客如果对我们企业有任 何意见和建议都可以通过留言的方式联系我们。 南通职业大学电子信息工程学院作品制作说明 2 一个界面友好、互动性强的页面往往能在企业推广中起到事半功倍的效果，本网站 恰恰也遵循这一原则。 明确建立网站的目标和用户需求 企业网站的设计是展现企业形象、 介绍产品和服务、 体现企业发展战略的重要途径， 因此必须明确设计站点的目的和用户需求，从而做出切实可行的设计计划。要根据消费 者的需求、市场的状况、企业自身的情况等进行综合分析，牢记以消费者为中心，而不 是以美术为中心进行设计规划。在设计规划之初同样考虑：建设网站的目的是什么?为 谁提供服务和产品?企业能提供什么样的产品和服务?网站的客户的特点是什么?企业产 品和服务适合什么样的表现方式? 网页形式与内容相统一 要将丰富的意义和多样的形式组织成统一的页面结构， 形式语言必须符合页面的内 容，体现内容的丰富含义。 运用对比与调和、对称与平衡、节奏与韵律以及留白等手 段，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。如 对称原则在页面设计中， 它的均衡有时会使页面显得呆板，但如果加入一些富有动感 的文字、图案，或采用夸张的手法来表现内容往往会达到比较好的效果。 点、线、面 作为视觉语言中的基本元素，要使用点、线、面的互相穿插、互相衬托、互相补充构成 最佳的页面效果。网页设计中点、线、面的运用并不是孤立的，很多时候都需要将它们 结合起来，表达完美的设计意境。 多媒体功能的利用 网络资源的优势之一是多媒体功能。要吸引浏览者注意力，页面的内容可以用三维 动画、FLASH 等来表现。但要注意页面加载的速度。 本网站主要运用了 Dreamwaver、Access、fireworks 等软件，使用了 ASP 动态网页 技术，Access 作为后台数据库，制作了一个小型的企业网站，实现了企业网站的动态交 互的基本功能。 南通职业大学电子信息工程学院作品制作说明 3 1 1 开发工具介绍开发工具介绍 本网站主要使用了 Macromedia Dreamweaver8、Macromedia fireworks8 和 Access 2003 等软件。Dreamweaver 与其他脚本语言组合使用提供各种面向对象的开发工具，能 较好的完成网页的设计、布局及 ASP 程序。利用 Access 的方便性、快捷性来建设数据 库。 1.11.1 MacromediaMacromedia DreamweaverDreamweaver 8 8 介绍介绍 Macromedia Dreamweaver8是由macromedia公司设计开发的一款可视化的网页设计 和网站管理工具，支持最新的 Web 技术，包含 HTML 检查、HTML 格式控制、HTML 格式化 选项、可视化网页设计、图像编辑、全局查找替换、全 FTP 功能、处理 Flash 等富媒体 格式和动态 HTML、基于团队的 Web 创作。 1.21.2 MacromediaMacromedia fireworksfireworks 8 8 介绍介绍 Fireworks是 Macromedia公司发布的一款专为网络图形设计的图形编辑软件， 它大大简化了网络图形设计的工作难度，无论是专业设计家还是业余爱好者，使 用 Fireworks 都不仅可以轻松地制作出十分动感的 GIF 动画，还可以轻易地完成 大图切割、动态按钮、动态翻转图等，因此，对于辅助网页编辑来说，Fireworks 将是最大的功臣。 1.31.3 MicrosoftMicrosoft OfficeOffice AccessAccess 介绍介绍 Microsoft Office Access 是由微软发布的关联式数据库管理系统。它结合了 Microsoft Jet Database Engine 和 图形用户界面两项特点，是 Microsoft Office 的 系统程式之一。 南通职业大学电子信息工程学院作品制作说明 4 2 2 IISIIS 的安装与配置的安装与配置 要实现所建的网站的发布，就必须建立 IIS(互联网信息服务)，安装配置完成 IIS 后在浏 览器地址栏中输入“”即可实现网页的浏览。 2.12.1 安装安装 IISIIS 打开”控制面板”，然后单击启动“程序和功能” ，单击打开“打开或关闭 Windows 功能” ，选中 Internet 信息服务，如图 2.1 所示: 图 2.1 安装 IIS 单击“完成”等待几分钟后完成 IIS 的安装。 2.22.2 IISIIS 的配置的配置 右击“计算机” ，单击“管理”-“服务和应用程序”-“Internet 信息服务管 理器”-“网站”如图 2.2 所示: 南通职业大学电子信息工程学院作品制作说明 5 图 2.2 配置 IIS 右击“default web site”-单击“高级设置” ，如图 2.3 设置，单击“确定”完 成 IIS 配置: 图 2.3 IIS 配置 南通职业大学电子信息工程学院作品制作说明 6 3 3 主页的设计主页的设计 本网站主页由 logo 与导航栏、正文内容和版权内容三大部分组成。 3.13.1 logologo 与导航栏与导航栏 本网站 logo 由本人利用 Fireworks 制作完成, 企业 logo 由英文“Bluesky”和中 文组成“蓝天家纺” ，以蓝色为底色，显示了蓝天家纺拥有如天空广阔般的胸怀。Logo 与导航栏如图 3.1 所示: 图 3.1 logo 与导航栏 3.23.2 正文内容正文内容 正文部分由新闻展示、产品展示、家纺加盟三部分组成，为浏览者展示了企也的最 近动态，了解了企业的主要产品等一系列信息，正文部分如图 3.2 所示: 图 3.2 正文内容 3.33.3 版权部分版权部分 在网页的底部插入如图 3.3 所示的版权部分，版权部分由企业的电话、传真、邮箱 组成，体现了一个网站的完整性: 图 3.3 版权部分 南通职业大学电子信息工程学院作品制作说明 7 4 4 关于蓝天关于蓝天 关于蓝天页面主要向浏览者介绍企业的发展历程， 以及企业的主营产品和企业产品 的设计理念，通过应用已经建立好的模板构成页面的主体框架，然后再插入层，在层里 输入介绍企业的文本，见附图: 附图 关于蓝天 南通职业大学电子信息工程学院作品制作说明 8 5 5 家纺产品家纺产品 产品展示主要向大众展示我们企业的产品， 让顾客能够深入了解我们产品的特点和 优势，从而对我们的产品产生信心，购买我们的产品。通过已建立好的模板建立页面的 大体框架，通过插入层来插入图片，如图 5.1、5.2 所示: 图 5.1 家纺产品展示 图 5.2 家纺产品 南通职业大学电子信息工程学院作品制作说明 9 6 6 新闻中心新闻中心 新闻中心主要向客户展示我们企业最新的企业动态， 让客户了解我们企业最新的情 况， 展示企业文化， 拉近客户与企业的距离。 通过已建立好的模板建立页面的大体框架， 新建几个层，在层中插入图片和文本，如图 6.1 所示: 图 6.1 新闻中心 新闻页面主要由图片和文字组成，通过应用建立好的模版，完成网页大体框架的建 设，再插入几个层来插入图片和文本，如图 6.2 所示: 图 6.2 新闻页面 南通职业大学电子信息工程学院作品制作说明 10 7 7 家纺加盟家纺加盟 家纺加盟主要向客户介绍成为企业经销商的要求和具体流程， 并提供了企业的联系 方式。 通过已建立好的模板建立页面的大体框架， 新建几个层， 在层中插入图片和文本， 见附图: 附图 家纺加盟 南通职业大学电子信息工程学院作品制作说明 11 8 8 精英人才精英人才 人才招聘主要面向社会向各界精英提供一个成为我们企业人才的平台，为企业招贤 纳士，源源不断为企业输送新鲜血液。通过已建立好的模板建立页面的大体框架，新建 几个层，在层中插入图片和文本，见附图: 附图 精英人才 南通职业大学电子信息工程学院作品制作说明 12 9 9 留言板的实现和显示留言板的实现和显示 留言板主要给企业和客户提供一座沟通的桥梁， 客户和游客如果对我们企业有任何 意见和建议都可以通过留言的方式联系我们，企业会认真听取这些要求和建议，从而改 正企业发展过程中的不足。留言板主要包括留言页面 liuyan.asp 和留言显示页面 liuyanxianshi.asp，数据库 liuyan.mdb 用来存储留言信息。 9.19.1 留言板的实现留言板的实现 通过应用已经建立好的模板建立页面的主要框架，然后在页面中插入一个 686*326 的层，在层里面插入一个 9 行 4 列的表格，在表格中输入您的姓名、联系电话等信息， 如图 9.1 如示: 图 9.1 留言板页面 在表格最下面插入“表单”-“按钮”提交，动作为提交表单，执行菜单栏“窗 口”-“服务器”命令，打开“服务器命令”面板。单击“+”按钮。选择“插入记录” 命令，则打开“”输入记录对话框，进行如图 9.2 设置: 图 9.2 插入记录 南通职业大学电子信息工程学院作品制作说明 13 建立数据库连接，执行菜单栏“窗口”-“数据库”命令，打开“数据库”面板， 单击该对话框中的 “+” 按钮， 选择 “数据源名称(DNS)” 命令。 打开 “数据源名称(DNS)” ， 进行如图 9.3 进行设置: 图 9.3 数据库连接 9.29.2 建立建立 liuyan.mdbliuyan.mdb 数据库数据库 数据库用来存储留言信息，通过 ASP 实现与网页连接，数据库结构设计如图 9.4 所 示: 图 9.4 数据库设置 9.39.3 留言板的实现留言板的实现 此动态页面主要实现留言的实现，通过应用已经建立好的模板建立页面的主要框 架，然后在页面中插入一个 678*409 的层，在层里面插入一个 8 行 2 列的表格，在表格 中输入游客姓名、联系电话等信息，执行菜单栏上的“窗口“-”绑定“命令，打开 “绑定”面板，单击该对话框中的“+”按钮，选择“记录集查询命令”命令。打开“记 录集”对话框，如图 9.5,设置成如图 9.6 如示: 南通职业大学电子信息工程学院作品制作说明 14 图 9.5 记录集 图 9.6 留言显示设置 南通职业大学电子信息工程学院作品制作说明 15 通过本次专题网站的制作自己对 Dreamweaver 有了进一步的深入了解，觉得自己 学到了许多知识，在制作网站技术上也有了一定的提高。 满怀信心的开始了本次的项目设计，在设计的过程中真的是问题不断，大大小小的 问题全有，不过我并没有放弃，通过了自己的努力学习以及向老师同学请教，几乎都一 一解决了这些问题。有句话说得好，问题并不可怕，可怕的是你在遇到这些问题时选择 了放弃。 通过不断地学习，不断地努力，在制作网页时为让我的网页更加丰富多彩，在网页 中插入图像、动态特效等，让浏览者更加直接，方便地了解我们的网站，同时在视觉上 给人一种赏心悦目的感受。 在制作网站中，我使用了 Firew