个人商业网站的创作与实现.doc

1、 目 录1.引言11.1.课题来源11.2.系统现状及发展趋势11.3.系统开发的目的和意义22.关键技术介绍22.1.MVC模式介绍32.2.ASP介绍32.3.Dreamweaver介绍32.4.PHOTOSHOP介绍42.5.CSS+DIV介绍43.系统需求分析53.1.系统目标53.2.系统可行性分析63.2.1.系统可行性分析方法63.2.2.技术可行性分析63.2.3.经济可行性分析63.2.4.可行性分析结论63.3.系统需求分析63.3.1.系统需求分析概述63.4.系统功能需求分析74.系统总体设计74.1.系统总体设计方法74.2.系统整体框架图74.3.整个系统功能模块图

2、84.3.1.数据库逻辑结构设计104.4.开发环境135.系统设计和实现135.1.系统模块设计135.1.1.Flash特色页面的实现135.1.2.周杰伦相册的实现175.1.3.音乐试听功能的实现185.1.4.视频观看功能的实现195.1.5.新闻浏览功能的实现215.1.6.自动变化隐现功能的实现225.1.7.主页友情链接 排行榜以及新闻自动浮动功能的实现245.2.网站测试265.2.1.网站运行环境265.2.2.链接测试265.2.3.检查布局的一致性266.总结与展望266.1.关于网站建设的总结266.2.关于网站建设的展望277.结束语27致 谢28参考文献29个人商

3、业网站的创作与实现摘要：为了推动未来未来个人网站的快速形成,我们的社会应该降低文化创意领域的创业门槛。最近关于个人商业网站甚至偶像个人网站的议论非常多,其中对此最敏感的当属偶像网站个人站长。为个人偶像创作的商业网站体现的是对个人偶像明星的崇拜与致敬,大多数的明星商务论坛都是是以个人网站的形态开始的。本文就个人偶像商业网站的设计与制作，以软件工程的方法对全过程进行了分析与研究.Web站点是向用户或潜在客户提供信息(包括产品和服务)的一种方式，其多代表的是大部分个人对偶像的信息掌握的欲望与期望，它所代表的一般就是信息提供与功能实现，所以一般体现在偶像明星的音乐试听实现与视频功能实现，如果还要加一句

4、的话，那可能就是通过后台登陆实现商业购买音乐版权以及实现最新音乐试听以及下载时所体现的商业购买行为，这种行为所代表的是个人通过商业网站的一种自给自足的方式，实现了自我欲望的实现，也有自我价值的实现，是一个很好的双向或单向的音乐交流与购买网站实现。所以个人商业网站，我们也可以称其为“音乐主题网站”，围绕着周杰伦先生的个人图片及音乐的展播投入了大量的设计与创作，能够很好体现个人商业网站的特点与优势。关键词：ASP；个人商业网站的创作与实现；HTMl纯文本网页；Dreamweaver；CSS；系统的设计与开发；Hyper text1. 引言在线听音乐适合年轻一代以及潮流的一代.它给人们提供了查找音乐

5、的便利和下载音乐的快速,尤其对于喜爱各种音乐的人来说,可以省掉很多时间. 音乐网站的设计有动态与静态之分还有可简可繁.本人制作的是静态音乐网站。而本网站使用了CSS+DIV网页布局。外加了js特效而成的原创作品。这个音乐网站体现的主要特色是在运用的技术HTML文本创作网站和css方式以及DIV布局，在接下来的论文分析中，我会主要的 介绍这些技术的产生与成功运用。关于js特效也会有较大篇幅教科书式的介绍，让读者能够更好的了解分析一篇成功的论文的意义或重要性。1.1. 课题来源World Wide Web是Internet上发展最快的领域，最初WWW的发展目的碍于通过网络来传输，一个可以同时显示文

6、字，声音，图形及影响的多媒体系统，是得网络上的信息实现交换，不仅仅局限于文字模式，Web是在超文本基础上面形成的巨大信息网，Web时有许多的站点构成。在这种背景下各种企业，公司，学校等的网站诞生了，这种网站一般都体现与表达了这个企业或单位的基本信息与 环境。在21世纪的今天，越来越凸显出来的网站泛滥问题引起了社会的思考，个人网站的出现更加体现了网站的普及以及技术的公众化。青少年会在青春期特别迷恋或者说喜欢自己所向往的偶像明星或者对象。本课题的出现体现的当下最流行的偶像明星周杰伦的一个个人音乐网站，并不是想通过这个网站来达到宣传个人主义的目的而是通过个人明星的网站的建设更加体现js特效以及asp

7、语言的特殊应用，让网页不止停留在HTML这种古老的年代。1.2. 系统现状及发展趋势个人商业网站，即Individual Commercial Website System 。它利用计算机技术，使各种音乐与偶像爱好者能够更好的与偶像接触，从而形成由计算机网络技术构成的服务于普通的音乐爱好者的一个商业网站系统。明星个人商业网站在国内外很多地方使用已经相当的普遍，国外的该类网站系统发展的相对比较成熟。在国内，计算机使用比较盛行，有一些名人的个人网站发展的比较成熟。如现在让大家耳熟能详的黄晓明，周杰伦，以及许嵩等明星的个人网站或论坛。这些给粉丝或者音乐或者电影爱好者（潜在消费者）带来极大的方便。但由

8、于人们的生活水平越来越高，对自己关注的各类偶像明星的信息也越来越在意与要求具体，现行的许多综合型网站或论坛已经无法满足各类社会网民的需要与要求，许多功能还亟待完善与更新。虽然国内的大部分个人商业网站维护与保持较不完善，但在我国科技迅速发展的今天，其发展前景将十分令人期待。尤其是在近几年，伴随着计算机网站建设技术在社会上的高速普及，越来越多的人能够单独的完成一个网站的建立与维护，让明星个人网站的更新与升级的呼声也越来越高，在这种背景与氛围下面一个良好界面，功能齐全，互动方式齐全的网站是对一个明星艺人形象的维护与基本尊重。对于专业方向出现的HTML，css，div，以及jsp技术要求也越来越高。1

9、.3. 系统开发的目的和意义伴随着21轰炸性量信息时代的到来，信息的种类、数量越来越多，容量也越来越大。对于出现的各类网络瘫痪与拥挤问题当今社会越来越凸显出来，这就尤其体现在了社会名人的个人网站对于网络网民所造成的困扰与担忧。在竞争越来越激烈的今天，随着科学技术的不断提高,计算机科学日渐成熟，其强大的功能已为人们深刻认识。 Valerie Morse Archives and Museum Informatics, Volume 13, Number 1 / 1999年3月 ：17-18页计算机已进入人类社会的各个领域并发挥着越来越重要的作用。而使用计算机对网络信息管理已经成为一种趋势，使用计

10、算机软件编辑名人个人商业网站，搭建个人网站的优良框架与形式已经成为必然。周杰伦中文网就是在这样环境下应运而生，其开发的整体任务是实现明星个人信息的系统化、规范化、科学化，从而达到有效名人生活信息公开的目的。因此，开发这样一个网站是非常有必要的。在制作网页的过程中，使用了js特效，产生的一些图片切换特效，使用了csss+div的方式为主体，使用了行为这一功能，能够以最好的方式回敬社会上面支持个人明星的群众与团体。2. 关键技术介绍本设计构架采用MVC分层设计思想，分别为模型层、视图层、与控制层，这样的目的是使项目耦合度低、可扩展性高，便于维护。其中模型层则表示现实事物所抽象出的代码数据库模型，由

11、于本设计所设计的数据量较小，所以后台数据库采用Access数据库。2.1. MVC模式介绍MVC（Model、 View、 Controller），是一种软件设计的思想典范，是把数据显示与业务逻辑分离的方法。如图2.1所示：图1 MVC设计思想MVC思想把WEB项目分成三层，视图层、模型层、控制器：2.2. ASP介绍ASP是一种服务器端脚本编写环境，可以用来创建和运行动态网页或Web应用程序。ASP网页可以包含HTML标记、普通文本、脚本命令以及COM组件等 杨惠 ASP.NET 程序设计专家门诊 清华大学出版社 2005年5月第1版。利用ASP可以向网页中添加交互式内容（如在线表单），也可

12、以创建使用HTML网页作为用户界面的web应用程序。2.3. Dreamweaver介绍Dreamweave 马云 ASP网络编程技术与实例 人民邮电出版社 2004年5月第1版r是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。帧(frames)和表格的制作速度快的令人无法想象。进阶表格编辑功能使用户简单的选择单格、行、栏或作不连续的选取。甚至可以排序或格式化表格群组。Dreamweaver 支持精准定位，可轻易转换成表格的图层以拖、拉、置、放的方式进行版面配置。所见即所得 Dreamweaver成功整合动态式

13、视觉编辑及电子商务功能，提供超强的支持能力给Third-party厂商，包含ASP， Apache，BroadVision， Cold Fusion，iCAT，Tango与自行发展的应用软件。当使用Dreamweaver设计动态网页时，所见即所得的功能，使得不需要透过浏览器就能预览网页。梦幻模版和XML Dreamweaver将内容与设计分开，应用于快速网页更新和团队合作网页编辑。建立网页外观的模版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容。即使不小心改变既定的样式，也可以使用样版正确地输入或输出XML内容。 全方位的呈现利用Dreamweaver设计的网页，可以呈现在

14、任何平台的热门浏览器上。对于cascading style sheets的动态HTML支持和鼠标换图效果，声音和动画的DHTML效果资料库可在Netscape和Microsoft浏览器上执行。使用不同浏览器指示功能，Dreamweaver可以告知在不同浏览器上执行的效果如何。当有新的浏览器上市时，只要从Dreamweaver的网站上下载它的描述档，便可得知详尽的成效报告。2.4. PHOTOSHOP介绍Adobe Photoshop，简称“PS”，是一个由Adobe Systems开发和发行的图像处理软件。Photoshop主要处理以像素所构 牛丽 .NET设计规范人民邮电出版社成的数字图像。

15、使用其众多的编修与绘图工具，可以更有效的进行图片编辑工作。2003年，Adobe将Adobe Photoshop 8更名为Adobe Photoshop CS。因此，最新版本Adobe Photoshop CS6是Adobe Photoshop中的第13个主要版本。2.5. CSS+DIV介绍 徐文琦 ASP网络编程技术与实例 人民邮电出版社 2004年5月第1版级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet），它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一

16、种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。当我们把 CSS-P 用到 DIV 中去以后，我们就可以严格设定它的位置。首先我们需要给这个可以被 CSS-P 控制的 DIV 一个 ID 或说是它的名字。比如说我们给下面这个 DIV 的名字是 truck。给名字的目的是我们以后可用JavaScript来控制它， 比如说移动它或改变它的一些性质等等。给层次取什么名字是随意的，名字可以是任何英文字母和数字，但第一个必须是字母。有两种把 CSS-P 应用到 DIV 的

17、方法。当我们把 CSS-P 用到 DIV 中去以后，我们就可以严格设定它的位置。首先我们需要给这个可以被 CSS-P 控制的 DIV 一个 ID 或说是它的名字。比如说我们给下面这个 DIV 的名字是 truck。给名字的目的是我们以后可用JavaScript来控制它， 比如说移动它或改变它的一些性质等等。给层次取什么名字是随意的，名字可以是任何英文字母和数字，但第一个必须是字母。有两种把 CSS-P 应用到 DIV 的方法3. 系统需求分析在软件工程中，需求分析指的是在建立一个新的或改变一个现存的电脑系统时描写新系统的目的、范围、定义和功能时所要做的所有的工作。 3.1. 系统目标个人商业网

18、站可为各种不同的明星歌迷或影迷建立登录页面，本网站主要实现以下几个功能：l 周杰伦的信息浮动与显示，提高各类商业或者纯理论性信息提供的效率，克服传统论坛带来的各类信息冗余以及重复率高的问题，减少纸张浪费，实现低碳环保。l 周杰伦音乐赏析，能够为明星本人的音乐信息提供较新的查询与应用，试听音乐在这种情景下面的产生也能算是适时逢时。音乐歌曲的自动排行也算得上是一种较为前沿的功能与总用。l 系统界面简洁美观、易使用、易维护，能够适用于非计算机人员使用。能够完成对周杰伦新闻与信息存储和查询，并提供数据数据下载功能，可以查找、下载、试听与浏览最近最新的官方信息。从而使面对一个庞大的名人信息数据库时，依然

19、可以全面、准确、有效的了解到名人出席或缺席各种信息，及时掌握名人信息的动态变化，更方便地对网站商业的运作进行铺垫。l 可靠运行，技术成熟。超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是名人个人网站盛行的原因之一，超级文本标记语言版本升级采用超集方式，从而更加灵活方便。可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。3.2. 系统可行性分析3.2.1. 系统可行性分析方法互联网商业的普及应用已经成为网络经济的大势所趋。本章介绍的周杰伦中文网站是建立在用户和明星信息之间的，用户可以方便

20、、快捷地查找到自己所需要了解的有关于周杰伦的信息。3.2.2. 技术可行性分析技术性上面网站提供给客户了了解周杰伦的基本信息和各种音乐信息，使客户能够更好的在本站内了解周杰伦。 技术可行性研究的任务，是从总体上鉴别和选择技术系统，是研究现有的技术条件能否顺利完成开发工作，软、硬件配置能否满足开发的需求等等。本系统的开发使用ACCESS+ASP+Dreamweaver+IIS作为系统开发工具和环境。综述，技术上面的众多建立网站技术已经成熟，可以投入开发。3.2.3. 经济可行性分析经济可行性分析需要估算新系统的成本效益分析，其中包括估计项目开发的成本，开发费用和今后的运行、维护费用；估计新系统将

21、获得的效益，估算开发成本是否回高于项目预期的全部经费。所以可行性分析中非常重要的一环便是经济可行性分析，因为这种分析体现出了很好的实际应用能力。本次所做网站-周杰伦中文网的开发成本非常低，除了部分版权的问题的支付以外，成本代价仅体现在程序员对技术学习的前期投入与加深。而且运行要求环境也非常的低，本次开发在win7系统下面进行。但是总体来说运行环境仅为win98以上版本即可。3.2.4. 可行性分析结论综上所述，开发的周杰伦名人信息管理网站非常的具有实用性，在经济，系统，技术方面都体现了很好的可行性。所以，本系统可以进行设计与开发。3.3. 系统需求分析3.3.1. 系统需求分析概述将要做的是一

22、个个人网站，主要做网站设计，因此建设网站的目的主要有两个：一是使浏览者或潜在的客户迅速了解明星个人大部分已经完成或正在进行的通告新闻及相关的资料，这就要求网站的文字要简练，尽量减少大篇幅的文字叙述，项目效果图要精彩，当然网页的页面效果也要漂亮，以使浏览者或潜在的客户感觉到网站的设计水平高；二是使浏览者或潜在的客户迅速了解公司对业务的一般操作流程，以便能够与公司方便快捷地进行联系和沟通，减少不必要的中间环节及由此带来的麻烦。3.4. 系统功能需求分析商业网站系统随着中国经济的高速发展发生了巨大的变化。专做明星消息发布的专业网站随着群众消费水平的增长迅速成长起来，但同时也带来了这一行业激烈的竞争。

23、4. 系统总体设计4.1. 系统总体设计方法总体设计即对有关系统全局问题的设计，也就是设计系统总的处理方案，又称系统概要设计。在系统设计阶段需要回答的中心问题是“如何做？”，即通过给出新系统物理模型的方式描述如何实现在需求分析中规定的系统功能。它对整个网站系统功能进行分析，并划分和构建系统功能模块。4.2. 系统整体框架图网站系统整体框架图如图4.1所示：图2 系统整体框架图4.3. 整个系统功能模块图9Index主页Banner广告条网站logo设计尾部logo及签名登录系统前期主页logo设计变化后logo设计Flash页面动画载入主页链接音乐试听导航栏音乐触发类音乐主页导航栏音乐排行榜导

24、航网页背景音乐触发可控制音乐海报观看导航栏点击主页图片点击浮动窗口图片点击流动可控制性导航弹出性可控制导航第一区图片第二区图片视频观看演出会视频导出页面下部图片音乐开关及赏析个人商业网站系统事先下好视频插入超链导入视频视频声音鉴定视频质量鉴定联系我们收藏网站关于退出图3 整个系统功能模块图4.3.1. 数据库逻辑结构设计逻辑结构设计阶段的任务是将概念结构设计阶段所得到的概念模型转换为具体DBMS所能支持的数据模型（即逻辑结构），并对其进行优化。个人商业网站系统数据库各表的具体定义如下：表1 用户信息表定义字段名字段说明数据类型长度允许空值ID主键自动编号长整型否UserName用户名文本255

25、是Password密码文本255是AdminPower权限数字长整型是Working用户状态数字长整型是LaseLoginTime最后登录时间日期/时间 自动是LastLoginIP最后登陆IP文本255是AddDate添加时间日期/时间自动是M_Random随机Cookie文本255是Realname真空姓名文本255是birthday生日日期/时间自动是表2 日记回复表定义字段名字段说明数据类型长度允许空值EP_id回复ID，主键自动编号长整型否EP_username用户名文本50是EP_content内容文本1000是EP_addtime添加时间日期/时间自动是EP_diaryid日记I

26、D数字长整型是表3 日记信息表定义字段名字段说明数据类型长度允许空值EP_id日记ID，主键自动编号长整型否EP_title标题文本100是EP_ok状态数字长整型是EP_content内容文本1000是EP_date日期日期/时间自动是EP_addtime添加时间日期/时间 自动是EP_ipIP文本50是EP_author作者ID数字长整型是表4 财务小类表定义字段名字段说明数据类型长度允许空值id小类ID，主键自动编号长整型否smallclass小类名文本255是Id_bigclass所属大类数字长整型是表5 账户表定义字段名字段说明数据类型长度允许空值id账户ID，主键自动编号长整型否n

27、ame账户名文本255是type类型数字长整型是amount数量数字长整型是Bezhu备注文本1000是date日期日期/时间自动是表6 财务表定义字段名字段说明数据类型长度允许空值id主键自动编号长整型否beizhu备注文本255是Id_login登录ID数字长整型是login登录名文本50是selldate登录时间日期/时间自动是type类型数字 长整型是Id_bigclass大类ID数字长整型是id_smallclass小类ID数字长整型是price价值数字双精度型是isok激活是/否2是addtime添加时间日期/时间自动是zhanghu账户数字长整型是wanglai往来人员ID数字长

28、整型是zhanghu1账户数字长整型是表7 往来人员表定义字段名字段说明数据类型长度允许空值id主键自动编号长整型否name姓名文本255是tel电话文本50是fax传真文本50是emaile-mail文本50是address地址文本50是addtime添加时间日期/时间自动是4.4. 开发环境硬件环境内存：2G 以上； CUP：Inter i2310 2.27GHz以上 ； 硬盘：500G。操作系统Microsoft Windows XP/7软件环境数据库：Microsoft Office Access 2003。开发工具：Adobe Dreamweaver cs4，Flash CS5.0，

29、PhotoShop CS5.0，Eclipse, IE9等。5. 系统设计和实现5.1. 系统模块设计5.1.1. Flash特色页面的实现为了体现美观性与实用性，本系统采用了特色flash引导开始index画面方法。flash登录界面如图5.1所示：图4 用户登录界面以下为实现点击flash页面两个链接时运用到的代码：body margin-left: 5px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;background-color: #000;background-image: url(html/images/baclgro

30、und.jpg); 周杰伦中文网 全球最大的杰迷中心#FlashID text-align: center;当跳过flash页面，点击链接后看到如图5.3所示界面。图5 系统主界面图6 成员系统主界面这些界面的实现用到了框架，通过使用框架，可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。可以使用户选择每个菜单项后，界面的基本框架不发后改变，而只改变左边的子菜单项和中间的内容显示项。以下代码是实现大类菜单项的重要函数,head文件如下： 本站首页 杰伦资料 推荐资源 动画海报 杰闻轶事 杰式魅声 视频欣赏 新闻试看 全国后援会 会员登录 &

31、nbsp; 你现在的位置是：杰伦中文网首页 5.1.2. 周杰伦相册的实现 在flash和index界面这样的背景下面，接下来相信观众与粉丝最热切想知道的便是关于偶像明星的个人海报写真描述。为了方便浏览，也为了方便用户使用。用户可直接在主页中点击“杰式靓相”，也可以点击主页浮动变化窗中的图片超链。相册的实现主要还是一个触发的js特效，通过点击相册左右翻页实现浏览海报功能。如图5.4所示为“杰式靓相”界面:图7 杰式靓相界面以下是js特效的jqery.min.js和lrtk.js的部分代码：);c.fn.attr.call(a,b,true)else a=f.createElement(a1);

32、elsea=sa(d1,f);a=(a.cacheable?a.fragment.cloneNode(true):a.fragment).childNodesreturn c.merge(this,a)elseif(b=s.getElementById(d2)if(b.id!=d2)return T.find(a);this.length=1;this0=bthis.context=s;this.selector=a;return thiselse if(!b&/w+$/.test(a)this.selector=a;this.context=s;a=s.getElementsByTagNam

33、e(a);return c.merge(this,a)else return!b|b.jquery?(b|T).find(a):c(b).find(a);else if(c.isFunction(a)return T.ready(a);if(a.selector!=w)this.selector=a.selector;this.context=a.contextreturn c.makeArray(a,this),selector:,jquery:1.4.2,length:0,size:function()return this.length,toArray:function()return

34、R.call(this,0),get:function(a)return a=null?this.toArray():a0?this.slice(a)0:thisa,pushStack:function(a,b,d)var f=c();c.isArray(a)?ba.apply(f,a):c.merge(f,a);f.prevObject=this;f.context=this.context;if(b=find)f.selector=this.selector+(this.selector? :)+d;else if(b)f.selector=this.selector+.+b+(+d+);

35、return f,each:function(a,b)return c.each(this,a,b),ready:function(a)c.bindReady();if(c.isReady)a.call(s,c);else Q&Q.push(a);return this,eq:function(a)return a=-1?this.slice(a):this.slice(a,+a+1),first:function()return this.eq(0),last:function()return this.eq(-1),slice:function()return this.pushStack

36、(R.apply(this,arguments),slice,R.call(arguments).join(,),map:function(a)return this.p5.1.3. 音乐试听功能的实现在相册功能的初步实现基础上面再加上一个音乐试听功能大概是对海报设计功能的最基本尊重。音乐试听功能主要应用的background自己触发的backgroundsound函数添加本地音乐，然后通过photoshop创作的图片添加绚丽效果。如图5.5所示为杰式魅声界面：图8 音乐试听界面以下是head文件的部分代码：listen to jay!-td text-align: left;vertical

37、-align: top;font-family:Tahoma;font-size:9px;color:#666254;formmargin:0px;a text-decoration: underline;color:#666254;a.1 text-decoration: none;color:#A3A4A4;a.2 text-decoration: underline;color:#565245;以上代码仅仅代表的是head文件对整个网页的控制与主导，其中主要的功能的实现与音乐的试听还要通过查阅body函数的各种功能的实现。5.1.4. 视频观看功能的实现在整个网站功能不断成熟化与完整化的实现，越来越多的目光会朝向视频功能的实现，因为视频观看功能的实现体现的是对一个歌手艺人的一种魅力最好体现。其中运用到的超级链接为本地的视频文件jieshi.flv.通过dreamweaver的自带功能很好的诠释了超级链接视频播放的功能，体现了很好的网站视频播放功能如图5.6视频观看界面：图9 视频观看界面以下代码为添加整个视频过程用到的表格table td tr等标签，还有存在的css加上dive格式的过程： td colsp