艺术家个人作品展示网站设计与实现

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艺术家个人作品展示网站功能性需求82.3.2 艺术家个人作品展示网站非功能性需求10第3章 艺术家个

2、人作品展示网站架构设计123.1 艺术家个人作品展示网站设计原则123.2 艺术家个人作品展示网站系统技术架构设计133.2.1 艺术家个人作品展示网站系统架构133.2.2 艺术家个人作品展示网站软件平台规划143.3 艺术家个人作品展示网站系统功能架构153.3.1 艺术家个人作品展示网站系统功能组成153.3.2 艺术家个人作品展示网站页面流程16第4章 艺术家个人作品展示网站详细设计184.1 艺术家个人作品展示网站整体结构184.2 艺术家个人作品展示网站系统模块设计194.2.1 前端展示模块详细设计204.2.2 后台管理模块详细设计214.2.3 数据库模块详细设计22第5章

3、艺术家个人作品展示网站实现与测试255.1 艺术家个人作品展示网站系统总体实现255.1.1 主要代码框架和页面截图展示255.1.2 出现的问题及解决措施435.2 艺术家个人作品展示网站测试45第6章 结论48致谢49参考文献50附录1 英文原文52附录2 译文562艺术家个人作品展示网站设计与实现摘 要本文将艺术家这一社会中需要展示平台的特定的群体作为目标对象，通过分析贴近艺术家特色的功能需求和整体架构，并结合用户需求，设计和实现了一个针对艺术家的个人作品展示网站系统。相比于同类个人展示主页，本次设计旨在实现风格突出，结构灵活的特点。主页的封面型布局丰富了页面信息，突出了画面冲击力。动态

4、页面与完整的后台管理和数据库部分一起构成完整的网站系统，使系统具有更好的延展性和实用性，便于非专业人员使用和管理。本文首先讨论了开发的背景和该展示系统的创新点，分析了网站的功能需求和非功能性需求，并对系统需求以用例图和流程图的形式来详细说明。其次,在需求分析基础上，提出了系统的设计目标和原则，对艺术家个人作品展示网站的技术架构进行了分析，并且分别讨论了前端展示页面，后台管理系统和数据库三个模块的详细设计。通过综合详细设计，给出了艺术家个人作品展示网站系统的各个部分实现和测试的效果截图。最后，本文对艺术家个人作品展示网站的实际应用情况作了简单描述，并对展示系统进一步完善提出了建议。关键字：艺术家

5、；作品展示系统；网站设计开发；B/S架构 ABSTRACTAccording to a particular social group,artists,who need a platform to demonstrate themselves,this paper analyses characteristic functional requirement of artists and overall architecture design,combined with user needs, designs a personal website for artists.Compared to

6、the same personal display website, this website is designed to achieve outstanding, flexible configuration features. The layout of the cover page highlights the content of the website, dynamic pages, complete back-end management and database portions together form a complete website system, the syst

7、em has better scalability and practicality, ease of use and management of non-professionals.Firstly, this paper introduces the development background of the personal website and the innovation point of this system.analyses the functional and non-functional requirement ,and describes particularly the

8、 system requirement by the flow chart and use case . Based on the requirement analyzing, this paper puts up the system design goals and principles,and analyses each layers function. Following the architecture design,according to the a presentation layer (the front end) and a data access layer (the b

9、ack end),this paper describes every modules design. Based on the composition of each part,this paper puts up the whole structure of website system and effect screen-shots of testing.At last ,this paper introduces the application of the personal website system , and proposes an advice for further imp

10、rovement. Keyword: Artists; Display system of works; Website construction;Browser/Server architecture第1章 绪论1.1 艺术家个人作品展示网站开发背景和意义当代艺术家通常拥有独特的个人风格，需要特定的平台展示自己的独具一格的艺术创作和活动，从而突出其个人特点、扩大影响力或得到大众的审美认可。传统展示平台包括艺术展览，艺术活动基地、书本印刷作品等，随着网页制作技术的流行，个人展示网站也逐渐成为用来自我介绍、展现个性特点的平台。在此环境背景下，对于艺术家来说，通过个人展示网站这样一个宣传个人、展现

11、作品的平台，可吸引更多客户群，为其交流提供综合的网络环境，同时也为个人的宣传发展，提供了一个积极的平台。本网站选取一中国当代画家作为平台设计对象，通过分析中国画家特有的作品风格和特色，设计个人展示页面，并完成独立的B/S架构网站系统，具有实际应用价值。1.2 艺术家个人作品展示网站创新点通过在搜索引擎中搜索的结果来看，中国画家个人网站布局一般为“国”字型或拐角型【1】，最上方为网站的标题和导航条，或者上面是标题及横幅图片，左侧或上方为导航链接，右列或下方为网站主题部分，形式较单一，画面简洁。本课题通过设计实现风格丰富，结构灵活的展示网站，更能体现艺术家独具一格的特点。将首页设计为封面型布局【2

12、】吸引用户，丰富了页面信息，通过大标题链接进入内容页面后将展示部分重新分类，直接以大框架结构布局展现，突出画面冲击力。相比于一般的个人展示主页，本次课题设计将加入完整的后台管理和数据库部分，使系统具有更好的延展性和实用性，便于非专业人员使用和管理。1.3 解决的主要问题艺术家个人作品展示网站是建立在个人主页、后台管理平台和数据库上的网站系统，该系统通过前端展示页面，展示艺术家作品及其他个人信息，并通过后台管理系统对艺术家的作品、信息等进行编辑更新，使其动态地在数据库中进行存取。如何根据艺术家需求和浏览者需求，设计符合艺术家需要的个人作品展示系统是本文要解决的主要问题。在需求分析方面，要在充分理

13、解艺术家展示内容的基础上，获得用户目标和展示需求，需求包括功能需求和非功能需求，通过分析需求制定合理的架构设计和模块开发思路。在网站设计方面，考虑一般网站的网络架构和逻辑架构，设计要符合艺术家本身的特点，并且满足网站系统的可维护性，灵活性和可扩展性。在系统实现方面，在实现前文设计基础上，主要解决对分析技术的选择和逻辑模块的建立。本文采用B/S架构模式，Bootstrap框架，PHP和MYSQL技术进行网站开发。1.4 本文的主要工作本文在现有一般网站架构的基础上，对艺术家进行个人展示的实际需求分析和网站逻辑模块的划分，并描述了开发所需的技术架构和功能架构，结合后台和数据库动态管理的思想，设计和

14、实现了艺术家个人作品展示网站。1.5 论文的组织结构第一章 绪论，重点叙述艺术家个人作品展示网站的开发背景和意义、本网站开发角度的创新点，本文的主要工作和论文的组织结构。第二章 艺术家个人作品展示网站需求分析，主要利用叙述、图表等方式，概括性的描述网站项目背景及有关开发流程和总体目标要求；本部分重点为对功能需求和非功能性需求两部分进行描述。第三章 艺术家个人作品展示网站架构设计，分为技术架构和功能架构，主要描述选择该架构的原因，以及这样设计的好处。第四章 艺术家个人作品展示网站详细设计，分为整体结构和具体模块设计的描述，主要描述设计中的问题，设计的方法，包括设计模式，以及设计的结果。第五章 艺

15、术家个人作品展示网站实现与测试，通过主要模块代码展示和页面截图等形式，从系统实现总体的角度用一节对网站的设计实现给出一个总体性的论述。第六章 结论部分，主要介绍艺术家个人作品展示网站设计实现的情况和效果，能进一步改进的地方等，为将来进一步的设计开发奠定基础。第2章 艺术家个人作品展示网站需求分析2.1 艺术家个人作品展示网站系统概述2.1.1 艺术家个人作品展示网站系统说明艺术家个人作品展示网站系统是针对目前行业内的艺术家群体中，特别是画家的个人展示需求，实现的动态网站展示系统。该系统由前端页面、后台管理系统和数据库三部分组成，以艺术家本人提供的包括个人简介、经历、艺术作品等在内的展示资料作为

16、基本展示数据在前端展现，通过后台可视界面实现非技术人员的直接数据编辑管理，便于展示系统的后续扩展使用。网站可以给画家提供除实体展览、书本印刷展示之外的宣传自我的途径，具有无地域限制、传播广泛、涉及人群丰富度大等优势，为画家和赏析浏览人群双方提供便利。2.1.2 艺术家个人作品展示网站项目概述艺术家个人作品展示网站系统是根据艺术家个人的展示需求设计，针对性强，便于艺术家通过互联网扩大自己的作品展示范围、拓宽作品销售渠道，并为想要了解艺术动态的人群提供了及时、快速、准确地浏览、服务及相关行业信息。艺术家（本文主要指画家）的作品和相关新闻动态、艺术感悟通过网站前端以不同的分类和展示形式呈现给用户，用

17、户可通过留言功能实现线上交互。下面简单的介绍艺术家个人作品展示网站系统整体的体系结构。艺术家个人作品展示网站系统采用基于Web三层模式的Browser/Server结构，由浏览器（客户端）-WEB服务器-应用服务器-WEB数据库服务器组成，开发环境采用最常用的Apache（WEB服务器）-PHP（应用服务器）-MYSQL（WEB数据库服务器）架构，动态网页开发语言选用PHP。B/S结构下客户端只需要浏览器，不再需要其他应用程序，这意味着用户完全可以通过浏览器直接浏览开发的网站，具有异地浏览和信息采集的灵活性【3】。艺术家个人作品展示网站的整体架构如图2-1所示：采用B/S结构，整个系统可以进行

18、利用可视化后台进行快速修改更换网站内容，客户端免安装和零维护，实现客户端、WEB服务器、应用服务器、WEB数据库服务器的合理分布和群集技术。客户端主要模块有艺术家个人介绍部分、作品展示部分、艺术动态部分和留言板；WEB服务器提供静态页面展示支持；应用服务器进行动态逻辑处理，将处理的信息数据传递给Web服务器；数据库服务器完成数据逻辑，提供数据库的管理与维护。图 2-1 网站整体架构图2.2 艺术家个人作品展示网站系统目标艺术家个人作品展示网站主要目标是选取与艺术家展示内容有关的风格，使整个网站看起来和谐统一，符合主题，并在展示呈现方式上运用CSS灵活布局、JAVASCRIPT增加动态效果、实现

19、可视编辑可替换内容等使网站具有一些创新点。本课题预期完成一个独立的艺术家展示网站系统，区别于目前互联网中典型的中国画家个人网站结构与风格，突出新颖个性的特点，并兼顾实用性，能够适用于大多数中国当代画家的展示需求，并具有一定的延展性和可操作性，非技术人员也可利用后台管理系统后期灵活管理网站数据和内容。技术关键为后台管理系统的动态存储和读取，以及前端动态展示效果的技术实现。2.3 艺术家个人作品展示网站系统需求描述2.3.1艺术家个人作品展示网站功能性需求艺术家个人作品展示网站最主要的当属艺术家本身的展示需求，其次有浏览网站的用户的需求，还有系统完成后更新管理该网站的人员的需求。用例图是从参与者的

20、角度出发来描述一个系统的功能【4】，以一种可视化的方式理解系统的功能需求。按照网站系统的实际需要，网站前端参与者的需求用例如图2-2，2-3所示：图 2-2 展示网站系统艺术家用例图图 2-3 展示网站系统浏览用户用例图功能性需求指一个系统中有具体完成内容的需求，即一个系统需提供的功能及服务【5】，根据上面网站各参与者用例图的分析，可以清晰地看出前端展示所需的功能主要分为四部分：艺术家介绍、艺术家作品、艺术家动态和留言板。网站的后台管理系统是将网页上可替换或应及时更新的信息，如：艺术家个人经历、艺术作品、新闻动态等集中管理，按某些共性分类，通过操作录入后台数据库，发布到网站上的一套系统，减轻了

21、网站更新维护的工作量，加快了信息的传播速度，实现了网站对信息发布更加及时、高效的维护管理。后台管理系统系统的主要功能是通过以下几个模块来实现的，如2-4用例图所示。图 2-4 展示网站系统后台使用人员用例图网站后台管理系统需要有数据库技术的支持，只有通过数据库中的表存储用户日常浏览的数据，才能管理提供方便检索和访问的服务，并保持数据信息的一致、完整，真正实现网站系统共享和安全。2.3.2 艺术家个人作品展示网站非功能性需求非功能性需求是指系统为满足用户需求而必须具有且除功能性需求以外的特性，下文根据其中的一些指标对艺术家个人作品展示网站的非功能性需求进行了详细分析：(1) 性能要求：网站在一般

22、情况下会根据用户点击等操作做出实时响应，不会出现拥塞和长时间故障的问题。由于该网站中存在大量的高清图片、动画等，页面反应时间稍长，但一般不会超过6秒，根据实际应用中服务器带宽来判断可支持的同时在线人数，作为参考，1Mbps带宽根据参考公式：支持连接个人 = 服务器带宽/页面尺寸大小，大约可支持17人同时在线【6】。(2) 安全性：网站的动态数据存放在MYSQL数据库中，MYSQL作为快速、多线程、多用户的SQL数据库服务器，可运行在不同的操作系统下，具有灵活并且安全的权限和口令系统【7】。后台管理系统设置用户权限，后台每个页面均利用session判断管理员是否登录，来保证防止对网站后台的非授权

23、的故意或者意外访问，预防恶意修改网站数据的现象出现。(3) 互操作性：用户主要集中在浏览器，要求服务器和客户端有良好的交互性，数据库服务器完成数据逻辑判断，存取展示数据，应用服务器进行动态逻辑处理，将嵌在html标签中的动态语言取出，处理后的信息数据传递给Web服务器，WEB服务器提供静态页面展示支持。该网站不存在与其他系统的数据交换和业务协作等交互操作。(4) 易用性：展示网站开始有引导界面明确主题，主界面设计简洁明快，将三个主要板块作为导航卡片放置，避免单调的文字导航，色块分界明显不易误操作，主页的背景音频用户可自行选择播放与暂停，界面元素设计具有易操作、易理解的特性。网站功能模块的开发遵

24、循易用性原则，对后台的操作进行了优化与整合，使网站后台管理易于上手，方便相关人员尽快熟悉网站后台管理操作，便于对网站内容的增、删、修改提高工作效率。(5) 可维护性：该网站开发所需的环境及相关技术代码全部为开源，无暗码加密部分，网站中的文字、图片等都可通过后台管理系统更新编辑替换，支持动态属性，便于系统后续扩展及维护。网站在正式上线前可在本地服务器上测试，具有良好的可分析性。(6) 可移植性。采用B/S架构，客户端不需安装多余应用，只需要浏览器即可，网站兼容目前大部分主流浏览器，如Google,IE,Firefox,360安全浏览器等。服务器端Apache、PHP性能优越，具有跨平台性，几乎支

25、持所有的操作系统平台。MYSQL数据库使用C和C+编写，能够针对不同的客户端用不同的方式应用不同的SQL模式，保证源代码的可移植性。第3章 艺术家个人作品展示网站架构设计3.1 艺术家个人作品展示网站设计原则在对艺术家个人作品展示网站的规划设计过程中，根据网站建设目的及其相关功能，将遵循以下原则进行规划设计：网站设计的基本原则是内容和用户是第一位的，注重的是信息的展示，外观和设计是第二位的，因此该艺术家展示网站在设计时专注于关注客户群体的共性，同时也兼顾个性。首先确定客户群应是对纯绘画或艺术作品感兴趣的人群，抱有了解、学习切磋或投资购买作品的心态浏览艺术家个人网站。因此在展示内容上，确定分为三

26、部分：画家个人经历介绍、作品介绍和动态文字评论，全方位多角度了解艺术家的作品及艺术生活。采用动画设计引导页、用框架式近纯色块布局特性创建首页吸引客户，将信息按大类划分，同时可以引导客户快速找到所需内容，避免网页充斥无关内容和混乱图像。网站布局是对页面的整体规划，即对页面划分成不同的区域，用于放置不同的页面元素，该展示网站遵循翻转金字塔样式【8】，通过合理、简明分类，每分页面中上方标题为用户提供摘要，然后是对细节的链接或者引用，页面尺寸原则上不能涉及左右拖动页面，长度也不宜过长，页面空间不足，需要分页面展示详细内容的，在细节最下方给出页面引导链接，让客户自己选择是否进入更深的链接获得信息。每个介

27、绍展示部分页面的布局风格相对一致，通过调整空白和设置水平分割线来调整布局内容，没有较大的跳跃性，具有逻辑性，易于用户理解。网站配色方面，应使用浏览器支持的216个Web安全颜色，每个页面颜色原则上除黑白外不超过三种，修饰图片、文字、底色要形成同种风格，由于是艺术家的展示网站，因此配色应给客户直接的视觉冲击并留下印象，同时又与其他同类型网站加以区别。3.2 艺术家个人作品展示网站系统技术架构设计 3.2.1 艺术家个人作品展示网站系统架构艺术家个人作品展示网站采用通用的web架构，即采用B/S（浏览器/服务器）架构、通过HTTP协议提供服务。对于基于PC端的网络架构，浏览器/服务器方式分布性强、

28、升级维护方便、开发简单、总体成本低，本地只需要安装一个通用的浏览器即可，数据处理等业务主要集中在服务器端。但其有数据安全性问题，对服务器要求过高、数据传输速度慢。浏览器/服务器模式的通信是基于HTTP协议的，随着网页脚本技术的提高，B/S也逐渐增强本地浏览器端的处理能力，以减轻服务器的负荷【9】。本网站的架构如图3-1所示：HTTP RequestHTTP ResponseWeb服务器应用服务器数据库服务器客户群（浏览器）接收用户的Request，然后响应HTML等给客户浏览器处理.php文件等业务逻辑存取动态数据图 3-1 展示网站系统架构图展示网站通过接入互联网连接到web服务器上，web

29、服务器是应用服务器的前提和基础。用户发出HTTP请求，本网站采用POST方式传递用户信息数据，此方式参数不出现在访问地址后面，而是出现在消息体中。服务器根据请求的URL的地址连接，找到对应的用文本描述的HTML格式的网页文件，通过浏览器中的解释器，将文本文件恢复成图文并茂、声影并存的可视页面，再通过WEB服务器部署的Apache服务转为HTTP协议传递给用户，使用户接收信息。应用服务器处理业务逻辑，将业务处理的信息数据传递给Web服务器，解析PHP里的逻辑代码，并将解析结果以HTML的格式返回，使用户跟后台的数据库有了更好的接口。整个展示网站由于属于个人网站，并没有涉及海量数据，因此读写数据库

30、并没有分开，前端和后台系统实现读操作和写操作只需访问相同的数据库。3.2.2 艺术家个人作品展示网站软件平台规划构建网站需要根据网站功能需求和费用的平衡选择软件平台，包括操作系统、Web服务器、应用服务器、动态语言、数据库等的选型。由于艺术家个人作品网站全部开发代码为开源且为个人设计使用，并为了良好的后续开发，本设计开发均选用目前开发最常用的类型。网站操作系统选用windows，操作简便，可降低维护成本和更新难度。Web服务器选用Apache HTTP Server，支持模块多，性能稳定，代码开源，可在大多数电脑操作系统中运行【10】，由于其跨平台和安全性，并且快速、可靠，可通过简单的API扩

31、充，便于后续扩展，被广泛使用。应用服务器软件平台选用PHP，PHP有比较完整的支持，性能优越，具有良好的安全性和跨平台性，几乎支持所有的操作系统平台及数据库系统，占用系统资源少，代码执行速度快。数据库方面选用MYSQL，作为一个快速、多线程、多用户的SQL数据库服务器，可运行在不同的操作系统下【11】，具有一个非常灵活而且安全的权限和口令系统；支持大型的数据库，可以方便地支持上千万条记录的数据库，同时代码开源，可以针对不同的应用进行相应的修改。本网站开发时采用AppServ工具组合包，将上述开源工具集成安装，包含了Apache、MySQL和PHP的安装及自动配置，并通过phpMyAdmin来管

32、理MYSQL。后台动态语言选用PHP，面向对象编程，与MYSQL配合支持多个数据库的接口，并可跨操作系统平台和Web服务器平台。在前端语言框架选择上，为实现前端更为轻便简洁的设计，本网站采用Bootstrap框架。Bootstrap 是一个基于 HTML、CSS、JAVASCRIPT 用于快速开发 Web 应用程序和网站的前端框架，提供字体排印、窗体、按钮、导航及其他各种组件及JavaScript扩展，为开发创建接口提供了一个简洁统一的解决方案，使动态网页的开发更加容易。网站开发设计利用跨平台文本编辑器Sublime Text，采用编辑器编写加可视化操作数据库方式，控制性强。3.3 艺术家个人

33、作品展示网站系统功能架构3.3.1 艺术家个人作品展示网站系统功能组成为更加明确的体现内部组织关系，理清内部逻辑关系，规范艺术家个人作品展示网站系统各功能模块，使网站功能条理化，根据以上分析，可以得到艺术家个人作品展示网站的功能架构图，如图3-2，3-3所示。前端展示系统个人介绍展示作品展示艺术动态展示留言板个人介绍时间轴展示出版物展示获奖作品展示分类作品展示销售作品展示个人新闻动态艺术礼记个人艺术感悟游客留言画家联系方式图 3-2 前端展示系统功能架构图后台管理系统个人信息管理作品管理动态管理留言板管理个人信息编辑时间轴更新编辑印象管理作品类别编辑分类作品管理销售作品管理新闻更新删除礼记更新

34、编辑感悟更新编辑留言浏览删除图 3-3 后台展示系统功能架构图3.3.2 艺术家个人作品展示网站页面流程根据上述网站功能架构，我们可以通过页面流程图表现该展示网站页面之间的流转关系，由于本网站性质为展示，所以除浏览、点击按钮链接之外的用户操作很少，大部分页面属于平行中跳转，因此图中链接线默认操作为用户点击新的页面链接（图片、按钮等），具体如3-4，3-5艺术家个人展示网站流程图所示。图 3-4 艺术家个人展示网站页面流程图图 3-5 艺术家个人展示网站后台流程图第4章 艺术家个人作品展示网站详细设计经过需求分析和架构设计，我们了解了艺术家个人作品展示网站的基本需求和架构流程。本章在此基础上，进

35、一步分析网站的整体逻辑结构和具体模块结构。4.1 艺术家个人作品展示网站整体结构网站的逻辑结构也叫做链接结构，主要是指由页面内部链接所形成的逻辑结构【12】。在艺术家个人作品展示网站的逻辑结构设计中，采用逻辑分层，使代码组织更清晰，更易于维护，具有更好的代码重用性。设计至少遵循了以下四点注意事项，使网站逻辑布局合理，利于网站后序的排名优化：1. 在内链的页面中，至少要保证每个网页有一个文本链接达到首页artist.php，这样指向首页的链接，能够为首页集中权重，获得更好的排名优势。2. 对于重要的详情模块（例画家简介、作品展示）的内容，能通过首页直接链接到详情页，本网站由于存在模块分类，采用树

36、形逻辑结构，最深链接深度为3，可以为用户所需要的需求，直接能达到页面的情况，获得一定的点击流量。3. 在网站前端和后台展示的每个主要页面中加上面包屑导航，便于用户知晓自己所在的页面目录，起到导航效果。4. 在网站不同模块下的页面间不设置链接，例如个人动态模块下的新闻页面和作品模块间不宜添加链接。UML包图（Package Diagrams）可以更加清晰地展示出网站用户界面及布局的逻辑结构，如图4-1所示。图 4-1 艺术家个人展示网站用户界面及布局后台管理系统通过验证登录做出权限判断，只有验证通过的管理员可以进行新闻动态发布、更新管理作品、审核删除留言等操作。画家需要展示的作品文章等信息的更新

37、发布均通过数据库自动读出，后台系统中设置各板块信息所需要的各项字段的编辑录入框，管理员只需按文本框提示录入信息即可，不需手动修改代码。4.2 艺术家个人作品展示网站系统模块设计整个艺术家个人作品展示网站由三大部分组成：前端展示、后台管理和数据库，各个部分由若干功能模块和数据表组成，下面详细讨论各个部分模块的设计。4.2.1 前端展示模块详细设计根据之前的功能架构和页面流程图，我们可以得到前端平台需要实现的展示功能和大致逻辑框架，前端主要是进行艺术家个人的页面展示，因此要进行页面的具体规划设计。为实现前端代码模块化和界面的风格统一，本网站采用bootstrap开发框架，bootstrap是一个C

38、SS和HTML的集合，为Web开发提供了版式、表单、buttons、表格、网格系统等，使开发人员减少设计时长，实现快速开发web程序。Bootstrap具有以下优点：应用视觉效果一致性，链接、按钮、提醒都有统一的视觉效果，并可以为不同级别的提醒使用不同的颜色；通过多个浏览器测试，支持市面上主流的浏览器；完整的框架解决方案，开发人员只需使用它而无需重新制作，框架专为 Web 应用设计，各类元素配合度高。在页面设计上，为突出主题添加引导页，通过动画和大标题形式吸引用户点击进入首页。首页封面采用框架布局，内容页面利用水平分割线分隔，根据模块布局，大致布局方式如图4-2，4-3所示。图 4-2 网站首

39、页封面界面及布局图 4-3 网站首页内容页界面及布局示例内容页面中上方标题为用户提供摘要，然后是对细节的链接或者引用，上下采用滚动条拖动页面，页面空间不足需要分页面展示详细内容的，在细节最下方给出页面引导链接，让客户自己选择是否进入更深的链接获得信息。由于是画家个人展示网站，因此最重要的是画家作品的展示，由于作品一般的画幅长宽比是不同的，不适合在固定的div框架中展示图片。因此本网站采用瀑布流形式展示图片，布局将根据每个作品图片的长宽自动排列，具体实现在第五章中进行详细介绍。4.2.2 后台管理模块详细设计根据之前树状结构图来划分的页面和模块，着手设计后台管理系统的骨架。艺术家个人作品展示网站

40、后台管理模块的功能特点分几点：（1）支持艺术家个人信息页面（包括时间轴、印象部分）的编辑更新。（2）支持作品类别的管理，可修改作品类别。（3）支持作品图片上传，可自动检测长宽比，并在前端制定合适布局，可更新、删除、修改作品。4）支持新闻动态等的发布、删除、编辑，并配图。（5）支持管理员对用户留言的审核删除。根据以上后台模块的特点，后台界面的布局与前端有所区别，大致分为三部分：主模块（独立的功能模块），次级分类（每个功能模块次级的功能分类），功能事件（具体每个功能页面内存在主要的操作），大概的布局方式大概如图4-3所示：左边为主模块并划分下拉次级层级分类，二级分类列表浮出；具体功能内上方存在面包

41、屑导航，方便用户切换；右上角放置用户信息快捷按钮，可退出登录。图 4-4 网站后台内容页界面及布局4.2.3 数据库模块详细设计数据库用于存储艺术家个人网站中需要更新替换的数据，例如画家的个人经历、作品、文章等。数据库设计是指对于一个给定的应用环境，构造最优的数据库模式，建立数据库及其应用系统能够有效地存储数据【13】。合理的数据库结构设计可以提高数据存储的效率，保证数据的完整和一致，减少数据冗余以便节省存储空间。利用E-R模型可在设计数据库时理清思路，更好的构建库中表对象的结构。E-R模型是描述概念数据模型的主要工具，由实体，属性，联系三个要素构成。实体是客观存在并可相互区分的事物，属性指实

42、体所具有的每一个特性【14】，实体和属性之间的联系可为一对多或多对一。然后，将各实体转换为对应的表，将各属性转换为各表对应的列。设计中要避免数据的冗余和各种操作异常，还要兼顾数据访问性能。在本网站数据库设计中，为了减少表间联接，允许了适当的数据冗余列存在。经过需求分析得出的实体有：用户信息实体、信息类别实体、新闻文章实体、留言板实体等。虽然销售作品也属于作品展示模块的大类中，但由于与另外小类别实体的属性有所区别，因此单独将销售作品作为一个与画家作品实体并列的实体。作品类别可进行自定义修改，与作品表有所关联。本系统创建的SQL数据库名称为ARTIST，该数据库设计结构模型图如图4-5所示。图 4

43、-5 网站数据库E-R模型上图中实体的属性将转化为表中的字段，对应结构为：admin（用户名，密码）；user（id，姓名，头像，简介，联系电话，电子邮件，微博，联系地址，介绍个人的网站，个人网站背景音乐）；timeline（id，时间，事件）；portfolio（id，封面图片，作品示例图片，简介1，简介2）；artwork（id，作品名称，图片，类别，图片长宽，是否获奖，所获奖项，作品简介）；artfam（id，类别名，摘要，简介，页面名称）；news（id，标题，日期，作者，相关链接，配图，内容，类别）；salework（id，作品名称，图片，实际作品大小，图片尺寸，作品销售价格，作品简

44、介）；board（id,游客昵称，留言内容，留言时间）。其中id为各个表的主键，设置为自动增加的字段。根据以上模型结构，可以构建出符合实际需要的数据表，包含画家表user，作品表artwork，新闻动态表news，留言表board等，作品表artwork和动态表news的具体结构如下图4-6,4-7所示，其余表在此不再赘述。图 4-6 网站数据库表artwork结构图 4-7 网站数据库表news结构第5章 艺术家个人作品展示网站实现与测试5.1 艺术家个人作品展示网站系统总体实现5.1.1 主要代码框架和页面截图展示前端引导页主要用两个JS控制，分别对应两个浮动层，利用html5的canva

45、s元素实现不同的动态效果。由于实现背景效果的JS代码较多，只选取其中浮动头像的JS代码作为示例，首先设定浮动层的初始坐标、单位位移和时间间隔，通过更新坐标浮动区域运动，并设定可控边界，例如document.body.scrollTop为文档区域的滚动条向下拉的距离，以保证在滚动条下拉时层仍在可见范围内，进而判断x,y坐标的移动范围，若碰到边界则反方向继续移动，onmouseover事件实现浮动层在鼠标移上时清除间隔事件，使其停止运动的效果。具体代码实现如下：var x = 0,y = 0 var xin = true, yin = true var step = 1 var delay = 1

46、0 var obj=document.getElementById("ad") function floatAD() var L=10var T=10 var R= document.body.clientWidth-obj.offsetWidth-10 var B= document.body.clientHeight-obj.offsetHeight /obj.style.left = x + document.body.scrollLeft obj.style.top = y + document.body.scrollTop x = x + step*(xin?1:

47、-1) if (x < L) xin = true; x = L if (x > R) xin = false; x = R y = y + step*(yin?1:-1) if (y < T) yin = true; y = T if (y > B) yin = false; y = B var itl= setInterval("floatAD()", delay) obj.onmouseover=function()clearInterval(itl) obj.onmouseout=function()itl=setInterval("

48、;floatAD()", delay) 引导页截图如下：图 5-1 网站引导页截图网站主页页面在布局和UI设计上采用bootstrap统一风格，其中的模块再加入内嵌的CSS和JS效果，网站结构的三大部分利用弹性盒布局【15】(CSS Flexible Box)，通过section子元素对box排列，示例布局代码如下，即设置div名为bl-main的第一个section元素的位置及背景值：.bl-main > section:nth-child(1) top: 0;left: 0%;background: url('./images/b1.jpg') no-rep

49、eat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute;width: 45%;height: 100%;点击section进入相应的box,每部分中小模块简单的利用水平线<hr>分隔。网站利用html5的audio标签实现背景音乐的播放，并可利用控件可视化控制音乐暂停和播放。在编辑替换网站背景音乐文件时，需要文本框显示当前存储文件名让用户判断是否替换，因为input的t

50、ype属性值为file时本身不能显示默认value值。实现方法是将value的属性值传给文本框，然后利用JavaScript截取路径中的文件名，通过'关键字分割成数组，取分割后数组的最后一个值，注意字符串中需要2个代表反斜杠的含义。具体代码如下：var file2 = document.getElementById("id-input-file-2"); var fileName = document.getElementById("fileName"); function handleFile() var str1=file2.value; v

51、ar regstr=/; var regresult=new RegExp(regstr) var www=str1.split(regresult,'100'); var need=wwwwww.length-1; var a=need.split(''); fileName.value=a0;每个小模块的布局根据内容的不同存在差别，首页和其中一些示例模块的页面截图如5-25-9所示：图 5-2 网站主页页面截图图 5-3 艺术作品展第一部分主要代表作品图 5-4 艺术作品展第二部分作品分类展示图 5-5 画家个人介绍时间轴展示图 5-6 画家个人介绍出版物展

52、示图 5-7 画家个人介绍点击出版封面的浮动层图 5-8 艺术动态个人新闻部分图 5-9 艺术动态留言板部分页面中涉及到的大部分数据都是从数据库动态读取的，但模块设计是固定的，有利于网站的稳定运行。由于实现代码较多，只选取其中新闻轮播的实现做简要叙述，新闻轮播框架由左右两部分构成，左边浮动的图片slides部分和右边轮播的slogan部分，布局部分伪代码如下：<ul class="ui-banner-slides"><?php $re="select * from news where category='个人新闻' order

53、by id DESC"$rlist=mysql_query($re); while( $nn=mysql_fetch_array($rlist) if(图片不为空)<li><a href="news/news.php?action=adminSelectSingle&id=<?php echo $nn"id"?>" target="_blank"><img src="uploads/news/<?php echo $nn"picture"?

54、>" alt="<?php echo $nn"title"?>" title="<?php echo $nn"title"?>"/></li> else <li><a href="news/news.php?action=adminSelectSingle&id=<?php echo $nn"id"?>" target="_blank"><img s

55、rc="images/newd.jpg" alt="<?php echo $nn"title"?>" title="<?php echo $nn"title"?>"/></a> </li></ul> <ul class="ui-banner-slogans"> <?php 从数据库中读出列表 while( $nn=mysql_fetch_array($rlist) ?> <li c

56、lass="ui-line"> <div class="ullinehover"> <?php if(图片不为空) ?> <div class="ui-bnnerimg floatLeft"> <img src="uploads/news/<?php echo $nn"picture"?>" alt="" width="103" height="80"/> </di

57、v> <?php echo $nn"title"?><?php echo mb_strlen($nn'content', 'utf-8')> 32 ? mb_substr($nn'content', 0, 32, 'utf-8').'.' : $nn'content'?></h3> </ul>JS控制轮播开始的条目以及鼠标悬停的效果，部分代码如下： $(document).ready(function() $('

58、#banners').bannerize( shuffle: 1, interval: "5" ); $(".ui-line").hover(function() $(this).addClass("ui-line-hover"); $(this).find(".ui-bnnerp").addClass("ui-bnnerp-hover"); ,function() $(this).removeClass("ui-line-hover"); $(this).find(".ui-bnnerp").removeClass("ui-bnnerp-hover"); ); );其中展示数据较多的内容模块通过按钮