《艺术家个人作品展示网站设计与实现.docx》由会员分享，可在线阅读，更多相关《艺术家个人作品展示网站设计与实现.docx（59页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、摘 要1ABSTRACT2第1章绪论31.1艺术家个人作品展示网站开发背景和意义31. 2艺术家个人作品展示网站创新点31.3 解决的主要问题31.4 本文的主要工作41. 5论文的组织结构4第2章 艺术家个人作品展示网站需求分析62.1 艺术家个人作品展示网站系统概述62.1.1 艺术家个人作品展示网站系统说明62.1.2 艺术家个人作品展示网站项目概述62.2 艺术家个人作品展示网站系统目标72.3 艺术家个人作品展示网站系统需求描述82. 3.1艺术家个人作品展示网站功能性需求83. 3.2艺术家个人作品展示网站非功能性需求10第3章艺术家个人作品展示网站架构设计123.1 艺术家个人作
2、品展示网站设计原则123.2 艺术家个人作品展示网站系统技术架构设计133.2.1 艺术家个人作品展示网站系统架构134. 2.2艺术家个人作品展示网站软件平台规划143.3艺术家个人作品展示网站系统功能架构153. 3.1艺术家个人作品展示网站系统功能组成154. 3. 2艺术家个人作品展示网站页面流程16第4章艺术家个人作品展示网站详细设计184.1 艺术家个人作品展示网站整体结构184.2 艺术家个人作品展示网站系统模块设计194.2.1 前端展示模块详细设计202. 3艺术家个人作品展示网站系统需求描述2. 3.1艺术家个人作品展示网站功能性需求艺术家个人作品展示网站最主要的当属艺术家
3、本身的展示需求，其次有浏 览网站的用户的需求，还有系统完成后更新管理该网站的人员的需求。用例图 是从参与者的角度出发来描述一个系统的功能卬，以一种可视化的方式理解系 统的功能需求。按照网站系统的实际需要，网站前端参与者的需求用例如图2-2, 2-3所不：图2-2展示网站系统艺术家用例图图2-3展示网站系统浏览用户用例图功能性需求指一个系统中有具体完成内容的需求，即一个系统需提供的功 能及服务，根据上面网站各参与者用例图的分析，可以清晰地看出前端展示 所需的功能主要分为四部分：艺术家介绍、艺术家作品、艺术家动态和留言板。网站的后台管理系统是将网页上可替换或应及时更新的信息，如：艺术家 个人经历、
4、艺术作品、新闻动态等集中管理，按某些共性分类，通过操作录入 后台数据库，发布到网站上的一套系统，减轻了网站更新维护的工作量，加快 了信息的传播速度，实现了网站对信息发布更加及时、高效的维护管理。后台 管理系统系统的主要功能是通过以下几个模块来实现的，如2-4用例图所示。图2-4展示网站系统后台使用人员用例图网站后台管理系统需要有数据库技术的支持，只有通过数据库中的表存储 用户日常浏览的数据，才能管理提供方便检索和访问的服务，并保持数据信息 的一致、完整，真正实现网站系统共享和安全。2. 3. 2艺术家个人作品展示网站非功能性需求非功能性需求是指系统为满足用户需求而必须具有且除功能性需求以外的
5、特性，下文根据其中的一些指标对艺术家个人作品展示网站的非功能性需求进 行了详细分析：(1)性能要求：网站在一般情况下会根据用户点击等操作做出实时响应， 不会出现拥塞和长时间故障的问题。由于该网站中存在大量的高清图片、动画 等，页面反应时间稍长，但一般不会超过6秒，根据实际应用中服务器带宽来 判断可支持的同时在线人数，作为参考，1Mbps带宽根据参考公式：支持连接 个人;服务器带宽/页面尺寸大小，大约可支持17人同时在线。(2)安全性：网站的动态数据存放在MYSQL数据库中，MYSQL作为快速、 多线程、多用户的SQL数据库服务器，可运行在不同的操作系统下，具有灵活 并且安全的权限和口令系统。后
6、台管理系统设置用户权限，后台每个页面均 利用session判断管理员是否登录，来保证防止对网站后台的非授权的故意或 者意外访问，预防恶意修改网站数据的现象出现。(3)互操作性：用户主要集中在浏览器，要求服务器和客户端有良好的交 互性，数据库服务器完成数据逻辑判断，存取展示数据，应用服务器进行动态 逻辑处理，将嵌在html标签中的动态语言取出，处理后的信息数据传递给Web 服务器，WEB服务器提供静态页面展示支持。该网站不存在与其他系统的数据 交换和业务协作等交互操作。(4)易用性：展示网站开始有引导界面明确主题，主界面设计简洁明快， 将三个主要板块作为导航卡片放置，避免单调的文字导航，色块分界
7、明显不易 误操作，主页的背景音频用户可自行选择播放与暂停，界面元素设计具有易操 作、易理解的特性。网站功能模块的开发遵循易用性原则，对后台的操作进行 了优化与整合，使网站后台管理易于上手，方便相关人员尽快熟悉网站后台管 理操作，便于对网站内容的增、册人修改提高工作效率。(5)可维护性：该网站开发所需的环境及相关技术代码全部为开源，无暗 码加密部分，网站中的文字、图片等都可通过后台管理系统更新编辑替换，支 持动态属性，便于系统后续扩展及维护。网站在正式上线前可在本地服务器上 测试，具有良好的可分析性。(6)可移植性。采用B/S架构，客户端不需安装多余应用，只需要浏览器 即可，网站兼容目前大部分主
8、流浏览器，如Google, IE, Firefox, 360安全浏览 器等。服务器端Apache、PHP性能优越，具有跨平台性，几乎支持所有的操作 系统平台。MYSQL数据库使用C和C+编写，能够针对不同的客户端用不同的方 式应用不同的SQL模式，保证源代码的可移植性。第3章艺术家个人作品展示网站架构设计3.1艺术家个人作品展示网站设计原则在对艺术家个人作品展示网站的规划设计过程中，根据网站建设目的及其 相关功能，将遵循以下原则进行规划设计：网站设计的基本原则是内容和用户是第一位的，注重的是信息的展示，外 观和设计是第二位的，因此该艺术家展示网站在设计时专注于关注客户群体的 共性，同时也兼顾个
9、性。首先确定客户群应是对纯绘画或艺术作品感兴趣的人 群，抱有了解、学习切磋或投资购买作品的心态浏览艺术家个人网站。因此在 展示内容上，确定分为三部分：画家个人经历介绍、作品介绍和动态文字评论, 全方位多角度了解艺术家的作品及艺术生活。采用动画设计引导页、用框架式 近纯色块布局特性创建首页吸引客户，将信息按大类划分，同时可以引导客户 快速找到所需内容，避免网页充斥无关内容和混乱图像。网站布局是对页面的整体规划，即对页面划分成不同的区域，用于放置不 同的页面元素，该展示网站遵循翻转金字塔样式，通过合理、简明分类，每 分页面中上方标题为用户提供摘要，然后是对细节的链接或者引用，页面尺寸 原则上不能涉
10、及左右拖动页面，长度也不宜过长，页面空间不足，需要分页面 展示详细内容的，在细节最下方给出页面引导链接，让客户自己选择是否进入 更深的链接获得信息。每个介绍展示部分页面的布局风格相对一致，通过调整 空白和设置水平分割线来调整布局内容，没有较大的跳跃性，具有逻辑性，易 于用户理解。网站配色方面，应使用浏览器支持的216个Web安全颜色，每个页面颜色 原则上除黑白外不超过三种，修饰图片、文字、底色要形成同种风格，由于是 艺术家的展示网站，因此配色应给客户直接的视觉冲击并留下印象，同时又与 其他同类型网站加以区别。3. 2艺术家个人作品展示网站系统技术架构设计3. 2.1艺术家个人作品展示网站系统架
11、构艺术家个人作品展示网站采用通用的web架构，即采用B/S （浏览器/服务 器）架构、通过HTTP协议提供服务。对于基于PC端的网络架构，浏览器/服务 器方式分布性强、升级维护方便、开发简单、总体成本低，本地只需要安装一 个通用的浏览器即可，数据处理等业务主要集中在服务器端。但其有数据安全 性问题，对服务器要求过高、数据传输速度慢。浏览器/服务器模式的通信是基 于HTTP协议的，随着网页脚本技术的提高，B/S也逐渐增强本地浏览器端的处 理能力，以减轻服务器的负荷本网站的架构如图3T所示：处理.php文件（，等业务逻辑存取动态数据应用服务器 L/厂HTTP Request zWeb服务器客户群（
12、浏 览器）、：， HTTP Response ）接收用户的Request,然后响 应HTML等给客户 浏览器图3-1展示网站系统架构图展示网站通过接入互联网连接到web服务器上，web服务器是应用服务器 的前提和基础。用户发出HTTP请求，本网站采用POST方式传递用户信息数据, 此方式参数不出现在访问地址后面，而是出现在消息体中。服务器根据请求的 URL的地址连接，找到对应的用文本描述的HTML格式的网页文件，通过浏览器 中的解释器，将文本文件恢复成图文并茂、声影并存的可视页面，再通过WEB 服务器部署的Apache服务转为HTTP协议传递给用户，使用户接收信息。应用服务器处理业务逻辑，将业
13、务处理的信息数据传递给Web服务器，解 析PHP里的逻辑代码，并将解析结果以HTML的格式返回，使用户跟后台的数据 库有了更好的接口。整个展示网站由于属于个人网站，并没有涉及海量数据， 因此读写数据库并没有分开，前端和后台系统实现读操作和写操作只需访问相 同的数据库。3.2.2艺术家个人作品展示网站软件平台规划构建网站需要根据网站功能需求和费用的平衡选择软件平台，包括操作系 统、Web服务器、应用服务器、动态语言、数据库等的选型。由于艺术家个人 作品网站全部开发代码为开源且为个人设计使用，并为了良好的后续开发，本 设计开发均选用目前开发最常用的类型。网站操作系统选用windows,操作简便，可
14、降低维护成本和更新难度。Web 服务器选用Apache HTTP Server,支持模块多，性能稳定，代码开源，可在大 多数电脑操作系统中运行】，由于其跨平台和安全性，并且快速、可靠，可通 过简单的API扩充，便于后续扩展，被广泛使用。应用服务器软件平台选用PHP, PHP有比较完整的支持，性能优越，具有良好的安全性和跨平台性，几乎支持 所有的操作系统平台及数据库系统，占用系统资源少，代码执行速度快。数据 库方面选用MYSQL,作为一个快速、多线程、多用户的SQL数据库服务器，可 运行在不同的操作系统下具有一个非常灵活而且安全的权限和口令系统； 支持大型的数据库，可以方便地支持上千万条记录的数
15、据库，同时代码开源， 可以针对不同的应用进行相应的修改。本网站开发时采用AppServ工具组合包, 将上述开源工具集成安装，包含了 Apache、MySQL和PHP的安装及自动配置， 并通过phpMyAdmin来管理MYSQL。后台动态语言选用PHP,面向对象编程，与MYSQL配合支持多个数据库的 接口，并可跨操作系统平台和Web服务器平台。在前端语言框架选择上，为实 现前端更为轻便简洁的设计，本网站采用Bootstrap框架。Bootstrap是一个 基于HTML. CSS JAVASCRIPT用于快速开发Web应用程序和网站的前端框架, 提供字体排印、窗体、按钮、导航及其他各种组件及Jav
16、aScript扩展，为开发 创建接口提供了一个简洁统一的解决方案，使动态网页的开发更加容易。网站开发设计利用跨平台文本编辑器Sublime Text,米用编辑器编写加可视化操作 数据库方式，控制性强。3. 3艺术家个人作品展示网站系统功能架构3. 3.1艺术家个人作品展示网站系统功能组成为更加明确的体现内部组织关系，理清内部逻辑关系，规范艺术家个人作 品展示网站系统各功能模块，使网站功能条理化，根据以上分析，可以得到艺 术家个人作品展示网站的功能架构图，如图3-2, 3-3所示。前端展示系统个人介绍展示作品展示艺术动态展示留言板个人介绍时间轴展示出版物展示获奖作品展示分类作品展示销售作品展示个
17、人新闻动态艺术礼记个人艺术感悟游客留言画家联系方式图3-2前端展示系统功能架构图后台管理系统留言板管理动态管理作品管理个人信息管理留言浏览删除感悟更新编辑礼记更新编辑新闻更新删除销售作品管理分类作品管理作品类别编辑印象管理时间轴更新编辑个人信息编辑图3-3后台展示系统功能架构图3. 3. 2艺术家个人作品展示网站页面流程根据上述网站功能架构，我们可以通过页面流程图表现该展示网站页面之 间的流转关系，由于本网站性质为展示，所以除浏览、点击按钮链接之外的用 户操作很少，大部分页面属于平行中跳转，因此图中链接线默认操作为用户点 击新的页面链接（图片、按钮等），具体如3-4, 3-5艺术家个人展示网站
18、流程 图所示。3-4艺术家个人展示网站页面流程图图3-5艺术家个人展示网站后台流程图4. 2.2后台管理模块详细设计215. 2.3数据库模块详细设计22第5章 艺术家个人作品展示网站实现与测试255.1 艺术家个人作品展示网站系统总体实现255.1.1 主要代码框架和页面截图展示255.1.2 出现的问题及解决措施435. 2艺术家个人作品展示网站测试46第6章结论48致谢错误!未定义书签。参考文献49附录1英文原文51附录2译文55第4章艺术家个人作品展示网站详细设计经过需求分析和架构设计，我们了解了艺术家个人作品展示网站的基本需 求和架构流程。本章在此基础上，进一步分析网站的整体逻辑结构
19、和具体模块 结构。4.1 艺术家个人作品展示网站整体结构网站的逻辑结构也叫做链接结构，主要是指由页面内部链接所形成的逻辑 结构【。在艺术家个人作品展示网站的逻辑结构设计中，采用逻辑分层，使代 码组织更清晰，更易于维护，具有更好的代码重用性。设计至少遵循了以下四 点注意事项，使网站逻辑布局合理，利于网站后序的排名优化：1 .在内链的页面中，至少要保证每个网页有一个文本链接达到首页 artist.php,这样指向首页的链接，能够为首页集中权重，获得更好的排名优势。2 .对于重要的详情模块(例画家简介、作品展示)的内容，能通过首页直 接链接到详情页，本网站由于存在模块分类，采用树形逻辑结构，最深链接
20、深 度为3,可以为用户所需要的需求，直接能达到页面的情况，获得一定的点击 流量。3 .在网站前端和后台展示的每个主要页面中加上面包屑导航，便于用户知 晓自己所在的页面目录，起到导航效果。4 .在网站不同模块下的页面间不设置链接，例如个人动态模块下的新闻页 面和作品模块间不宜添加链接。UML包图(Package Diagrams)可以更加清晰地展示出网站用户界面及布 局的逻辑结构，如图4-1所示。图4-1艺术家个人展示网站用户界面及布局后台管理系统通过验证登录做出权限判断，只有验证通过的管理员可以进 行新闻动态发布、更新管理作品、审核删除留言等操作。画家需要展示的作品 文章等信息的更新发布均通过
21、数据库自动读出，后台系统中设置各板块信息所 需要的各项字段的编辑录入框，管理员只需按文本框提示录入信息即可，不需 手动修改代码。4.2 艺术家个人作品展示网站系统模块设计整个艺术家个人作品展示网站由三大部分组成：前端展示、后台管理和数 据库，各个部分由若干功能模块和数据表组成，下面详细讨论各个部分模块的 设计。4. 2.1前端展示模块详细设计根据之前的功能架构和页面流程图，我们可以得到前端平台需要实现的展 示功能和大致逻辑框架，前端主要是进行艺术家个人的页面展示，因此要进行 页面的具体规划设计。为实现前端代码模块化和界面的风格统一，本网站采用bootstrap开发框架, bootstr叩是一个
22、CSS和HTML的集合，为Web开发提供了版式、表单、buttons 表格、网格系统等，使开发人员减少设计时长，实现快速开发web程序。Bootstrap 具有以下优点：应用视觉效果一致性，链接、按钮、提醒都有统一的视觉效果, 并可以为不同级别的提醒使用不同的颜色；通过多个浏览器测试，支持市面上 主流的浏览器；完整的框架解决方案，开发人员只需使用它而无需重新制作， 框架专为Web应用设计，各类元素配合度高。在页面设计上，为突出主题添加引导页，通过动画和大标题形式吸引用户 点击进入首页。首页封面采用框架布局，内容页面利用水平分割线分隔，根据 模块布局，大致布局方式如图4-2, 4-3所示。图4-
23、2网站首页封面界面及布局XXXXXXXXXXXXXXXXJOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOCXXX xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx时间轴 (页面链接印象图4-3网站首页内容页界面及布局示例内容页面中上方标题为用户提供摘要，然后是对细节的链接或者引用，上 下采用滚动条拖动页面，页面空间不足需要分页面展示详细内容的，在细节最 下方给出页面引导链接，让客户自己选择是否进入更深的链接获得信息。由于 是画家个人展示网站，因此最重要的是画家作品的展示，由于作品一般的画幅 长宽比是不同的，不适合在固定
24、的div框架中展示图片。因此本网站采用瀑布 流形式展示图片，布局将根据每个作品图片的长宽自动排列，具体实现在第五 章中进行详细介绍。4. 2.2后台管理模块详细设计根据之前树状结构图来划分的页面和模块，着手设计后台管理系统的骨架。 艺术家个人作品展示网站后台管理模块的功能特点分几点：（1）支持艺术家个 人信息页面（包括时间轴、印象部分）的编辑更新。（2）支持作品类别的管理, 可修改作品类别。（3）支持作品图片上传，可自动检测长宽比，并在前端制定 合适布局，可更新、删除、修改作品。4）支持新闻动态等的发布、删除、编辑, 并配图。（5）支持管理员对用户留言的审核删除。根据以上后台模块的特点，后台界
25、面的布局与前端有所区别，大致分为三 部分：主模块（独立的功能模块），次级分类（每个功能模块次级的功能分类）， 功能事件（具体每个功能页面内存在主要的操作），大概的布局方式大概如图 4-3所示：左边为主模块并划分下拉次级层级分类，二级分类列表浮出；具体 功能内上方存在面包屑导航，方便用户切换；右上角放置用户信息快捷按钮， 可退出登录。./artist/admin/index.phpTab 1作品管理Tab 3logo/admin个人信息时间轴时间轴添加时间轴管理印象内容和操作区域作品管理销售作品管理动态管理留言板管理图4-4网站后台内容页界面及布局4. 2.3数据库模块详细设计数据库用于存储艺术
26、家个人网站中需要更新替换的数据，例如画家的个人 经历、作品、文章等。数据库设计是指对于一个给定的应用环境，构造最优的 数据库模式，建立数据库及其应用系统能够有效地存储数据合理的数据库 结构设计可以提高数据存储的效率，保证数据的完整和一致，减少数据冗余以 便节省存储空间。利用E-R模型可在设计数据库时理清思路，更好的构建库中表对象的结构。 E-R模型是描述概念数据模型的主要工具，由实体，属性，联系三个要素构成。 实体是客观存在并可相互区分的事物，属性指实体所具有的每一个特性实 体和属性之间的联系可为一对多或多对一。然后，将各实体转换为对应的表， 将各属性转换为各表对应的列。设计中要避免数据的冗余
27、和各种操作异常，还 要兼顾数据访问性能。在本网站数据库设计中，为了减少表间联接，允许了适 当的数据冗余列存在。经过需求分析得出的实体有：用户信息实体、信息类别实体、新闻文章实 体、留言板实体等。虽然销售作品也属于作品展示模块的大类中，但由于与另 外小类别实体的属性有所区别，因此单独将销售作品作为一个与画家作品实体 并列的实体。作品类别可进行自定义修改，与作品表有所关联。本系统创建的 SQL数据库名称为ARTIST,该数据库设计结构模型图如图4-5所示。图4-5网站数据库E-R模型上图中实体的属性将转化为表中的字段，对应结构为：admin （用户名，密 码）；user （id,姓名，头像，简介，
28、联系电话，电子邮件，微博，联系地址, 介绍个人的网站，个人网站背景音乐）;timeline （id,时间，事件个portfolio （id,封面图片，作品示例图片，简介1,简介2） ； artwork （id,作品名称, 图片，类别，图片长宽，是否获奖，所获奖项，作品简介）；artfam （id,类 别名，摘要，简介，页面名称）；news （id,标题，日期，作者，相关链接， 配图，内容，类别）；salework （id,作品名称，图片，实际作品大小，图片 尺寸，作品销售价格，作品简介）；board （id,游客昵称，留言内容，留言时 间）。其中id为各个表的主键，设置为自动增加的字段。根据以
29、上模型结构， 可以构建出符合实际需要的数据表，包含画家表user,作品表artwork,新闻 动态表news,留言表board等，作品表artwork和动态表news的具体结构如 下图4-6,4-7所示，其余表在此不再赘述。字段类型整理属性Null默认额外操作idint(20)否autojncrement唱X圈彤同titlevarchar(50)utf8_general_ci否唱,X圈的断帚picturevarchar(200)utf8_general_ci否唱X圈时彤用categoryvarchar(30)utf8_general_ci否唱X圃的彤Sheightvarchar(30)utf8
30、_general_ci否畸yX置度财Swidthvarchar(30)utf8_general_ci否X圈的彤Stypicalvarchar(30)utf8_general_ci否唱yX圈鼠彤因prizevarchar(50)utf8_general_ci否唱X圈的彤用infovarchar(300)utf8_general_ci否唱X圈鼠断图4-6网站数据库表artwork结构字段类型整理属性Null默认恚外操作jdint(20)否autojncrement醴7 X醐鼠胞用titlevarchar(50)utf8_general_ci否唱“X圈鼠曲用datevarchar(30)utf8_g
31、eneral_ci否唱dX圈鼠彤园writervarchar(55)utf8_general_ci否唱“ X圈鼠彤而websitevarchar(IOO)utf8_general_ci否7 X圈应限而picturevarchar(300)utf8_general_ci否唱“X圈履1购用contentvarchar(5000)utf8_general_ci否唱7 X圈鼠彤园categoryvarchar(20)utf8_general_ci否唱“X圈鼠吃而图4-7网站数据库表news结构第5章艺术家个人作品展示网站实现与测试5.1 艺术家个人作品展示网站系统总体实现5.1.1 主要代码框架和页面
32、截图展示前端引导页主要用两个JS控制，分别对应两个浮动层，利用html5的canvas 元素实现不同的动态效果。由于实现背景效果的JS代码较多，只选取其中浮动 头像的JS代码作为示例，首先设定浮动层的初始坐标、单位位移和时间间隔， 通过更新坐标浮动区域运动，并设定可控边界，例如document, body. scrollTop 为文档区域的滚动条向下拉的距离，以保证在滚动条下拉时层仍在可见范围内, 进而判断x, y坐标的移动范围，若碰到边界则反方向继续移动，onmouseover 事件实现浮动层在鼠标移上时清除间隔事件，使其停止运动的效果。具体代码 实现如下：var x = 0,y = 0va
33、r xin = true, yin 二 truevar step = 1var delay = 10var obj=document.getElementById(nadH)function floatAD() var L=10var T=10var R= document.body.clientWidth-obj.offsetWidth-10var B= document.body.clientHeight-obj.offsetHeight /obj.style.left = x + document.body.scrollLeftobj.style.top 二 y + document.b
34、ody.scrollTop x = x + step*(xin?l:-l)if (x R) xin = false; x = R y = y + step*(yin? 1:-1)if (y B) yin = false; y = B var itl= setInterval(floatAD()，delay)obj .onmouseover = function。clearlnterval(itl)obj.onmouseout=function()itl=setInterval(nfloatAD(), delay)引导页截图如下:图5-1网站引导页截图网站主页页面在布局和UI设计上采用boots
35、trap统一风格，其中的模块再 加入内嵌的CSS和JS效果，网站结构的三大部分利用弹性盒布局(CSS Flexible Box),通过section子元素对box排列,示例布局代码如下，即设置 div名为bl-main的第一个section元素的位置及背景值：.bl-main section:nth-child( 1) top: 0;left: 0%;background: url(*./images/bl jpg1) no-repeat;- webkit-background-size: cover;- moz-background-size: cover;- o-background-si
36、ze: cover;background-size: cover;position: absolute;width: 45%;height: 100%;)点击section进入相应的box,每部分中小模块简单的利用水平线hr分 隔。网站利用html5的audio标签实现背景音乐的播放，并可利用控件可视化 控制音乐暂停和播放。在编辑替换网站背景音乐文件时，需要文本框显示当前 存储文件名让用户判断是否替换，因为input的type属性值为时本身 不能显示默认value值。实现方法是将value的属性值传给文本框，然后利用JavaScript截取路径中的文件名，通过关键字分割成数组，取分割后数组 的
37、最后一个值，注意字符串中需要2个代表反斜杠的含义。具体代码如 下：var file2 document.getElementById(id-input-file-2);var fileName = document.getElementById(nfileNameH);function handleFile()var str l=file2. value;var regstr=AV;var regresult=new RegExp(regstr)var www=str 1 .split(regresult/100);var need=wwwwww.length-1 ;var a=need.sp
38、lit();fileName. value=a0 ;每个小模块的布局根据内容的不同存在差别，首页和其中一些示例模块的页面截图如5-25-9所示:ARTISTIC，0崂 Lu Hmi - Outiook X127no.1 ocalhort/。，x Q 个人4- C 2j 127.0.0. l/artist/ga7ery/artistphpLIFE AND TIME画家个人介绍图5-2网站主页页面截图艺术家个人作品展示网站设计与实现摘要本文将艺术家这一社会中需要展示平台的特定的群体作为目标对象，通过 分析贴近艺术家特色的功能需求和整体架构，并结合用户需求，设计和实现了 一个针对艺术家的个人作品展示
39、网站系统。相比于同类个人展示主页，本次设计旨在实现风格突出，结构灵活的特点。 主页的封面型布局丰富了页面信息，突出了画面冲击力。动态页面与完整的后 台管理和数据库部分一起构成完整的网站系统，使系统具有更好的延展性和实 用性，便于非专业人员使用和管理。本文首先讨论了开发的背景和该展示系统的创新点，分析了网站的功能需 求和非功能性需求，并对系统需求以用例图和流程图的形式来详细说明。其次, 在需求分析基础上，提出了系统的设计目标和原则，对艺术家个人作品展示网 站的技术架构进行了分析，并且分别讨论了前端展示页面，后台管理系统和数 据库三个模块的详细设计。通过综合详细设计，给出了艺术家个人作品展示网 站
40、系统的各个部分实现和测试的效果截图。最后，本文对艺术家个人作品展示 网站的实际应用情况作了简单描述，并对展示系统进一步完善提出了建议。关键字：艺术家；作品展示系统；网站设计开发；B/S架构0 E：件 Lu Hm Outlook * 2 127.0.0.1 /localhost/c x/王一=C D 127.0.0.1/artist/gallery/artist.phpG代表获奖作品-Representative Works8图5-3艺术作品展第一部分主要代表作品，稣 3 Hn - Outlook x 127.0.0.1 / localhost / , x ) * 个人图5-4艺术作品展第二部分
41、作品分类展示MORE图5-5画家个人介绍时间轴展示ffli Lu Han - Outtook x 127.0.0.1 / localhost / o公人王Tf199/时间轴-Timeline Of Me- C D 127.0.0.1/artist/gallery/artist.php吴国良WUGUOLIANG HUAJ- Q大图ABi 部件-3 Han - Outlook x 弘 127.QA1 / locdhost h x 仆 人王一名 NEXT图5-7画家个人介绍点击出版封面的浮动层y a Ui Hn Outbok x 127.0.0.1 / localhost / c x X图5-8艺术
42、动态个人新闻部分图5-9艺术动态留言板部分页面中涉及到的大部分数据都是从数据库动态读取的，但模块设计是固定的， 有利于网站的稳定运行。由于实现代码较多，只选取其中新闻轮播的实现做简 要叙述，新闻轮播框架由左右两部分构成，左边浮动的图片slides部分和右边 轮播的slogan部分，布局部分伪代码如下：?php$re=nselect * from news where category=个人新闻order by id DESC $rlist=mysql_query($re);while( $nn=mysql_fetch_array($rlist)(if(图片不为空)a href=Hnews/news.php?action=adminSelectSingle&id=n target=n_blanknximg src=,uploads/news/ alt=n title=HVelsea href=,news/news.php?action=adminSelectSingle&id= target=n_blanknimg src=nimages/newd.jpgH alt=nn title=H,7x/aimg src=,uploads/news/n alt=H,