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

作品制作说明 课题 小型企业网站设计小型企业网站设计 学学 院院电子信息工程学院电子信息工程学院 专业 方向 专业 方向 计算机应用技术专业 信息管理方向 计算机应用技术专业 信息管理方向 班班 级级微机微机 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 1 3 3 MicrosoftMicrosoft OfficeOffice AccessAccess 介绍介绍 Microsoft Office Access 是由微软发布的关联式数据库管理系统 它结合了 Microsoft Jet Database Engine 和 图形用户界面两项特点 是 Microsoft Office 的系统程式之一 南通职业大学电子信息工程学院作品制作说明 4 2 2 IISIIS 的安装与配置的安装与配置 要实现所建的网站的发布 就必须建立 IIS 互联网信息服务 安装配置完成 IIS 后在 浏览器地址栏中输入 127 0 0 1 即可实现网页的浏览 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 所示 南通职业大学电子信息工程学院作品制作说明 10 图 6 2 新闻页面 南通职业大学电子信息工程学院作品制作说明 11 7 7 家纺加盟家纺加盟 家纺加盟主要向客户介绍成为企业经销商的要求和具体流程 并提供了企业的联 系方式 通过已建立好的模板建立页面的大体框架 新建几个层 在层中插入图片和 文本 见附图 附图 家纺加盟 南通职业大学电子信息工程学院作品制作说明 12 8 8 精英人才精英人才 人才招聘主要面向社会向各界精英提供一个成为我们企业人才的平台 为企业招 贤纳士 源源不断为企业输送新鲜血液 通过已建立好的模板建立页面的大体框架 新建几个层 在层中插入图片和文本 见附图 附图 精英人才 南通职业大学电子信息工程学院作品制作说明 13 9 9 留言板的实现和显示留言板的实现和显示 留言板主要给企业和客户提供一座沟通的桥梁 客户和游客如果对我们企业有任 何意见和建议都可以通过留言的方式联系我们 企业会认真听取这些要求和建议 从 而改正企业发展过程中的不足 留言板主要包括留言页面 liuyan asp 和留言显示页面 liuyanxianshi asp 数据库 liuyan mdb 用来存储留言信息 9 19 1 留言板的实现留言板的实现 通过应用已经建立好的模板建立页面的主要框架 然后在页面中插入一个 686 326 的层 在层里面插入一个 9 行 4 列的表格 在表格中输入您的姓名 联系电话等信息 如图 9 1 如示 图 9 1 留言板页面 在表格最下面插入 表单 按钮 提交 动作为提交表单 执行菜单栏 窗 口 服务器 命令 打开 服务器命令 面板 单击 按钮 选择 插入记 录 命令 则打开 输入记录对话框 进行如图 9 2 设置 南通职业大学电子信息工程学院作品制作说明 14 图 9 2 插入记录 建立数据库连接 执行菜单栏 窗口 数据库 命令 打开 数据库 面板 单击该对话框中的 按钮 选择 数据源名称 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 如示 南通职业大学电子信息工程学院作品制作说明 15 图 9 5 记录集 图 9 6 留言显示设置 南通职业大学电子信息工程学院作品制作说明 16 通过本次专题网站的制作自己对 Dreamweaver 有了进一步的深入了解 觉得自己 学到了许多知识 在制作网站技术上也有了一定的提高 满怀信心的开始了本次的项目设计 在设计的过程中真的是问题不断 大大小小 的问题全有 不过我并没有放弃 通过了自己的努力学习以及向老师同学请教 几乎 都一一解决了这些问题 有句话说得好 问题并不可怕 可怕的是你在遇到这些问题 时选择了放弃 通过不断地学习 不断地努力 在制作网页时为让我的网页更加丰富多彩 在网 页中插入图像 动态特效等 让浏览者更加直接 方便地了解我们的网站 同时在视 觉上给人一种赏心悦目的感受 在制作网站中 我使用了 F