有限责任公司网站建设方案电子商务.doc

1、摘 要网站指在Internet上，根据一定的规则使用Html等工具制作的用于展示特定内容的相关网页的集合。网站对于企业实现信息共享、扩大宣传范围、发展电子商务等具有重要的作用。报告详细阐述了豪索中视公司的网站设计思路与网页制作过程和想法，目的是为豪索中视公司制作实用性强、内容全面、信息动态更新的网站页面。报告共分为五个部分。第一章介绍实习公司北京豪索中视电子有限责任公司；第二章介绍实习工作；第三章介绍了豪索中视的网站建设流程，主要包括收集资料、制定网站主题和制定网站架构；第四章介绍了豪索中视网站设计与网页制作；第五部分是结束语。关键词：网站；网站建设；网站设计；主页制作目 录1 实习公司介绍4

2、1.1 北京豪索中视介绍41.2 实习部门42 实习工作介绍52.1 工作内容52.2 工作量63 豪索中视网站建设流程73.1 收集网站前期资料及所需文档73.2 制定网站主题、确定网站风格83.3 制定网站架构84 豪索中视网站设计与网页制作104.1主页模式具体搭建104.2 完善主页12结束语15参考文献161 实习公司介绍1.1 北京豪索中视介绍北京豪索中视电子有限责任公司成立于1998年，是专业从事安防监控系统的系统提供商。公司提供适用于各个行业、不同应用环境和规模的多种远程数字监控系统及解决方案，可承接各种安防系统工程。公司拥有的远程数字监控系统具有自主知识产权，独立开发完成，可

3、为用户提供定制开发。公司产品主要包括监控系统和监控设备。监控系统主要包括：豪索中视远程数字监控系统、豪索中视 HSZS GUARD3000 远程数字监控系统和豪索中视 HSZS GUARD1000 远程数字监控系统等。监控设备主要包括：网络视频服务器、网络硬盘录像机和视频监控服务器等。公司与多家合作兄弟公司合作，给兄弟公司提供全方位的技术支持，项目技术规划。方案定位，技术实现，定向软、硬件开发，软硬件环境应用测试。公司目前的成功案例主要包括：中国人民解放军总参谋部XX部队司令部大院（车辆、人员）监控系统、中国人民解放军XX部队XX装甲师师部视频监控系统、中国人民解放军总装备部XX家属区视频监控

4、系统、信息产业部第54所、中关村科技园区管理委员会、首创集团办公视频系统、物美大卖场视频监控系统和海淀区花园二小校园视频监控系统等。1.2 实习部门公司规模不大，目前有员工12人。公司主要部门为研发部和市场部。本人实习期间主要在研发部，实习岗位为网站建设工程师。研发部主要负责公司监控系统的软件开发，编程语言为C和Java。市场部主要面向不同的领域实行不同的营销方式。在保证工业级别工程项目的同时，积极开展民用市场的营销，市场前景非常乐观。2 实习工作介绍2.1 工作内容本人的实习工作内容主要围绕公司的网站建设，主要工作包括：1、了解网站设计与网页制作的基本流程由于本人是电子商务专业，在大学三年期

5、间对于网站相关知识有些肤浅的了解，但是进入企业，实际与理论存在不小差距。因此，初到公司时，通过网络与书本的查询和向相关人员的请教，学习网站设计与网页制作的具体流程，以便于更有条理地进行实习工作。网站设计与网页制作的具体流程主要包括：站点策划、构思草图、美工设计、图形制作、脚本编辑、图形页面整合和测试发布。2、学习网页制作软件网页制作不是一个单一过程，在实习中本人需要独立完成网页设计的一系列工作，尤为重要的一点是网页制作需要多个软件相互配合完成，例如：图像处理软件photoshop、动画制作 Flash、可视化网页开发工具Dreamweaver。这些软件之前学过，但是在实际应用中还需进一步学习与

6、了解，所以，实习的第二步工作内容是对于网页制作软件的学习。以Dreamweaver软件使用为例，之前本人对Dreamweaver有初步了解和认识，在学校期用这个软件做过网页，但是很肤浅。本人在 进行了Dreamweaver的学习，按照逻辑和网页制作的步骤进行，从站点，站点下文件、站点结构、HTML代码基本结构、网页主题抬头设置（META语句等）、设置页面属性、添加文本、制作图文混排页面、链接外部图像编辑器、插入FLASH动画、制作鼠标经过图像、网页交互效果、插入音频、插入视频、调整音频播放模式、滚动文字建立、网页链接、表格（表格是Dreamweaver可视化操作很重要的一个环节，是网页排版的基

7、本环节）、表格属性、制作复杂页面等知识点。通过这些知识点的汇聚，将我的设计、思路、前期资料和其他软件的内容结合在主页上。在学习的过程中，因为是通过网络视频学习，所以当有没看懂的知识点的时候，我会重复进行观看，同教程一起进行操作，巩固了对于知识点的学习。同时通过书本了解更详细的知识点，便于更好地操作软件，将自己不懂的知识点在书中画出，通过网络搜索与相关人员交流。3、网站设计与制作在了解网站设计与网页制作基本流程和相关软件后，需要进行具体的网站设计与制作。主要包括：网站Logo的设计，网站栏目、色彩、导航设计，各级页面内容的设计等等。LOGO指网站的标志，标志可以是中文、英文字母，也可以是符号、图

8、案等。标志的设计创意应当来自网站的名称和内容。例如：专业网站可以本专业有代表的物品作为标志。最常用和最简单的方式是用自己网站的英文名称作标志，采用不同的字体、字母的变形、字母的组合可以很容易制作好自己的标志。网站设计应把握以下原则：（1）具有较强的可识别性，充分体现企业的基本元素，例如：标志、标准字体、标准色等；（2）页面设计以简洁大方为宜，充分考虑访问速度；（3）要有良好的导航，符合绝大多数网民的访问习惯；（4）要考虑与搜索引擎的友好性，注意网站的结构和层次。在实习过程中，本人发现网站设计的步骤主要包括：（1）用“原型法”细化网站设计需求；（2）网页链接的深度、广度和耦合程度；（3）网页基本

9、布局；（4）网页空间中的视觉导向；（5）网页空间的秩序及运动趋势；（6）网页中的留白；（7）文字信息的设计和编排；（8）图片和动画；（9）使用Web标准设计网页。2.2 工作量实习期间，主要的工作量包括：（1）每天通过网络与书籍学习网站设计与网页制作的基本流程；（2）每天收集网站的资料，利用Dreamweaver软件制作网页；（3）学习网站开发工具，尝试做网站后台程序。3 豪索中视网站建设流程3.1 收集网站前期资料及所需文档豪索中视电子有限责任公司主要做远程视频监控软件与硬件，提供硬件与软件支持，所以有硬件与软件相关资料以及公司基本信息收集如下：1、公司相关简介豪索中视远程数字监控系统采用C

10、/S体系结构，基于TCP/IP网络平台。前端采用H.264压缩标准的嵌入式网络视频服务器DVR/DVS、网络摄像机NC，适用于通过网络进行远程视频监控的各种场合。2、软件基本信息豪索中视远程数字监控系统具有集中用户管理、集中控制系统资源、数字录像、前端录像存储、远程集中录像存储、网络传输、远程控制、移动侦测、电子地图、支持报警输入输出、云台控制、视频回放、短信报警和视频浏览分组管理等功能。3、软件具体功能介绍豪索中视 HSZS GUARD3000 远程数字监控系统采用C/S体系结构，基于TCP/IP网络平台。前端采用H.264标准的嵌入式网络视频服务器DVS/DVR，适用于需要网络远程监控的各

11、种场合。豪索中视 HSZS GUARD3000 远程数字监控系统具有数字录像、网络传输、远程监控、移动侦测、电子地图、支持报警输入输出、云台控制、回放文件和视频浏览分组管理等功能。4、部分硬件设备信息HSZS-600 系列网络视频服务器采用嵌入式实时多任务操作系统（RTOS）和嵌入式处理器，具有视频信号和音频信号的H.264硬件同步压缩功能，压缩码流通过网络进行传输，通过网络可进行实时视频和音频预览，也可以发生报警信号和接收控制信号，支持流协议（RTP/RTCP）、支持IE浏览、支持双向语音对讲等功能。HSZS-800 系列网络硬盘录像机是结合IT领域多项最新技术（如视音频压缩/解压缩、大容量

12、硬盘记录/检索、TCP/IP网络等技术），专为安全技术防范领域设计的数字监控产品。它同时具备数字视音频录像机（DVR）和数字视音频服务器（DVS）的特性，既可本地独立工作，也可联网组成一个强大的安全监控网，广泛用于银行、电力、公安、司法、交通、电信、小区、工矿、企业、水利设施等各领域、各部门的安全防范。HSZS-1000 系列视频监控服务器采用MPEG4标准进行实时音视频压缩，利用计算机、网络、通讯技术实现对模拟音视频信号的数字化，实现对音视频信号的预览、存储、管理、控制和网络传输，具有数字录像、网络传输、远程监控、IE浏览、动态检测、电子地图、支持报警输入输出、云台控制、回放文件和系统管理等

13、功能。3.2 制定网站主题、确定网站风格豪索中视是专业从事安防监控系统的系统提供商。因此，网站主题应围绕远程开发系统与相关硬件设备和公司项目案例搭建网站，主要以介绍公司产品、宣传公司产品和服务为主。网站风格（style）是抽象的，指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI（标志、色彩、字体、标语）、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义、站点荣誉等等诸多因素。因为豪索中视网站是产品介绍类网站，因此，网站风格要考虑浏览者的兴趣偏好，以实用风格为主。3.3 制定网站架构网站架构是根据客户需求分析的结果，准确定位网站目标群体，设定网站整体架构，规划、设计网

14、站栏目及其内容，制定网站开发流程及顺序，以最大限度地进行高效资源分配与管理的设计。网站架构主要包括程序架构，呈现架构和信息架构三种表现。而步骤主要分为硬架构和软架构两步程序。网络架构是现代网络学习和发展的一个必须的基础技术。因为第一次实际独立操作网页设计，所以思路比较匮乏，没有网页大体框架，询问相关人员后得到意见，多看看别的设计、多参考，然后，结合自己想法就有自己的设计。本人参考了海康威视官方网站、东华软件官方网站主页架构，因为公司产品软件性质相似，所以借鉴质量很高。对于主页架构公司有明确目的，简洁、明了、能够大体上展现公司基本信息，一目了然。因此，本人制定以矩形为框架分层分类的框架结构，将硬

15、件与软件信息分开展示，同时，在主页注入部分公司简介使浏览者可以清楚的看到各项信息，最后分出部分空间给予相关联系信息与合作伙伴链接，完成初始主页框架格式构思建立。主页草稿图如图1：图1 主页草稿4 豪索中视网站设计与网页制作4.1主页模式具体搭建在网站初始主题定义和初始设计中，对主页已经有了大概的构思，主页分布内容和注入信息分类。由上述数据可以看出，数据类型很多数据内容庞大，所以肯定不能全都在主页显示，所以要将数据信息分类，把主要大类划分出来，比如：硬件，软件等等，将几大类在主页显示，并且显示主要信息，以便于查找。主页分为三大矩形，从上到下依次是网站LOGO及主页标题栏、主页内容及相关信息和版权

16、编号。网站logo及标题栏通过photoshop软件静态图片处理，将文字、背景图片、公司资料照片容为一体，共同形成主页标题栏，如图2：图2 主页标题栏LOGO下方要有导航条，导航条可以清楚的让浏览者看到网站的页面分类，以及可以快速的转换到相对子页中，已便于查看相关信息，如图3：图3 主页导航条主页内容分为五大类，依次是：公司简介、技术文档、监控系统软件、监控设备、下载中心。将这五块内容左右搭建，将公司简介、技术文档和下载中心放在一侧，并列于监控系统软件和监控设备模块，如图4：:图4 主页内容 相关基本信息和版权编号放在最下，相关基本信息包括首页设置选项、首页网址收藏等等，以及合作伙伴链接。主页

17、草图如图5：图5 主页架构草图至此，主页结构具体搭建完成，如图:6：图6 公司主页架构图4.2 完善主页在草稿完成以后，大体结构已经形成，开始从上到下对我的草稿进行细化。主页最上端是LOGO和标题栏。通过photoshop的配合，将LOGO进行更细致的修改并且将标题栏补充完整，加入公司信息与图片，最后将LOGO与标题栏结合，形成我的第一块区域，如图7：图7 网站Logo图在中间分类信息部分，我对草图进行了改进，将分类信息改到左侧，因为左侧会让我在寻找分类的时候更加舒适，这是作为用户的一种用户体验。同时，将草图中的大块部分分割成小块，用来展示硬件、软件等产品信息，并将它们一一罗列。图8 网页首页

18、中部页面最后，补充了其他分类信息，比如：下载信息、相关合作伙伴、一些图片展示，还有版权编号等等，将它们放在底部，这样完成了主页的细化。至此主页基本全部完成，如图9：图9 网站首页结束语首先，感谢豪索中视电子有限责任公司给了我这次实习的机会，因为我比较喜欢电脑，所以想做一些与电脑相关又可以和本专业结合的实习工作，豪索中视给了我这次机会。在工作中，我完善了自己的学习方法，通过一边学习教程一边自己实际操作来更高的巩固自己的知识，使我意识到，实践有的时候真的要比书本上的理论更重要。在这次实习中，我感受最深的就是对于解决问题的方法和思路，就像我在论文中提到的，思路不同，也许对应的结果相同，但是过程会有很大的差异，也会使工作量和工作效率发生很大的变化。同时，此次实习不光用到了课本上的知识，还掌握了新知识，在实践中推翻了书本上旧有的不合实际的知识，这才真正体现了知识的真正价值，学以致用。参考文献 1 雷喜. Dreamweaver自学一本通M. 电子工业出版社, 20122 Adobe公司. FLASH CS5中文经典教程M. 人民邮电出版社, 20113 网站设计. 15