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架构ABSTRACTAccordingtoaparticularsocialgroup,artists,whoneedaplatformtodemonstratethemselves,thispaperanalysescharacteristicfunctionalrequirementofartistsandoverallarchitecturedesign,combinedwithuserneeds,designsapersonalwebsiteforartists.Comparedto
6、thesamepersonaldisplaywebsite,thiswebsiteisdesignedtoachieveoutstanding,flexibleconfigurationfeatures.Thelayoutofthecoverpagehighlightsthecontentofthewebsite,dynamicpages,completeback-endmanagementanddatabaseportionstogetherformacompletewebsitesystem,thesyst
7、emhasbetterscalabilityandpracticality,easeofuseandmanagementofnon-professionals.Firstly,thispaperintroducesthedevelopmentbackgroundofthepersonalwebsiteandtheinnovationpointofthissystem.analysesthefunctionalandnon-functionalrequirement,anddescribesparticularlythe
8、systemrequirementbytheflowchartandusecase.Basedontherequirementanalyzing,thispaperputsupthesystemdesigngoalsandprinciples,andanalyseseachlayersfunction.Followingthearchitecturedesign,accordingtotheapresentationlayer(thefrontend)andadataaccesslayer(theb
9、ackend),thispaperdescribeseverymodulesdesign.Basedonthecompositionofeachpart,thispaperputsupthewholestructureofwebsitesystemandeffectscreen-shotsoftesting.Atlast,thispaperintroducestheapplicationofthepersonalwebsitesystem,andproposesanadviceforfurtherimp
10、rovement.Keyword:Artists;Displaysystemofworks;Websiteconstruction;Browser/Serverarchitecture第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艺术家个人作品展示网站系统说明艺术家个人作品展示网站系统是针对目前行业内的艺术家群体中，特别是画家的个人展示需求，实现的动态网站展示系统。该系统由前端页面、后台管理系统和数据库三部分组成，以艺术家本人提供的包括个人简介、经历、艺术作品等在内的展示资料作为
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)性能要求：网站在一般
23、的故意或者意外访问，预防恶意修改网站数据的现象出现。(3)互操作性：用户主要集中在浏览器，要求服务器和客户端有良好的交互性，数据库服务器完成数据逻辑判断，存取展示数据，应用服务器进行动态逻辑处理，将嵌在html标签中的动态语言取出，处理后的信息数据传递给Web服务器，WEB服务器提供静态页面展示支持。该网站不存在与其他系统的数据交换和业务协作等交互操作。(4)易用性：展示网站开始有引导界面明确主题，主界面设计简洁明快，将三个主要板块作为导航卡片放置，避免单调的文字导航，色块分界明显不易误操作，主页的背景音频用户可自行选择播放与暂停，界面元素设计具有易操作、易理解的特性。网站功能模块的开发遵
27、绍展示部分页面的布局风格相对一致，通过调整空白和设置水平分割线来调整布局内容，没有较大的跳跃性，具有逻辑性，易于用户理解。网站配色方面，应使用浏览器支持的216个Web安全颜色，每个页面颜色原则上除黑白外不超过三种，修饰图片、文字、底色要形成同种风格，由于是艺术家的展示网站，因此配色应给客户直接的视觉冲击并留下印象，同时又与其他同类型网站加以区别。3.2艺术家个人作品展示网站系统技术架构设计3.2.1艺术家个人作品展示网站系统架构艺术家个人作品展示网站采用通用的web架构，即采用B/S（浏览器/服务器）架构、通过HTTP协议提供服务。对于基于PC端的网络架构，浏览器/服务器方式分布性强、
28、升级维护方便、开发简单、总体成本低，本地只需要安装一个通用的浏览器即可，数据处理等业务主要集中在服务器端。但其有数据安全性问题，对服务器要求过高、数据传输速度慢。浏览器/服务器模式的通信是基于HTTP协议的，随着网页脚本技术的提高，B/S也逐渐增强本地浏览器端的处理能力，以减轻服务器的负荷【9】。本网站的架构如图3-1所示：HTTPRequestHTTPResponseWeb服务器应用服务器数据库服务器客户群（浏览器）接收用户的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服务器选用ApacheHTTPServer，支持模块多，性能稳定，代码开源，可在大多数电脑操作系统中运行【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扩展，为开发创建接口提供了一个简洁统一的解决方案，使动态网页的开发更加容易。网站开发设计利用跨平台文本编辑器SublimeText，采用编辑器编写加可视化操作数据库方式，控制性强。3.3艺术家个人
34、编辑感悟更新编辑留言浏览删除图3-3后台展示系统功能架构图3.3.2艺术家个人作品展示网站页面流程根据上述网站功能架构，我们可以通过页面流程图表现该展示网站页面之间的流转关系，由于本网站性质为展示，所以除浏览、点击按钮链接之外的用户操作很少，大部分页面属于平行中跳转，因此图中链接线默认操作为用户点击新的页面链接（图片、按钮等），具体如3-4，3-5艺术家个人展示网站流程图所示。图3-4艺术家个人展示网站页面流程图图3-5艺术家个人展示网站后台流程图第4章艺术家个人作品展示网站详细设计经过需求分析和架构设计，我们了解了艺术家个人作品展示网站的基本需求和架构流程。本章在此基础上，进
35、一步分析网站的整体逻辑结构和具体模块结构。4.1艺术家个人作品展示网站整体结构网站的逻辑结构也叫做链接结构，主要是指由页面内部链接所形成的逻辑结构【12】。在艺术家个人作品展示网站的逻辑结构设计中，采用逻辑分层，使代码组织更清晰，更易于维护，具有更好的代码重用性。设计至少遵循了以下四点注意事项，使网站逻辑布局合理，利于网站后序的排名优化：1.在内链的页面中，至少要保证每个网页有一个文本链接达到首页artist.php，这样指向首页的链接，能够为首页集中权重，获得更好的排名优势。2.对于重要的详情模块（例画家简介、作品展示）的内容，能通过首页直接链接到详情页，本网站由于存在模块分类，采用树
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后台管理模块详细设计根据之前树状结构图来划分的页面和模块，着手设计后台管理系统的骨架。艺术家个人作品展示网站
46、0varobj=document.getElementById("ad")functionfloatAD()varL=10varT=10varR=document.body.clientWidth-obj.offsetWidth-10varB=document.body.clientHeight-obj.offsetHeight/obj.style.left=x+document.body.scrollLeftobj.style.top=y+document.body.scrollTopx=x+step*(xin1:
47、-1)if(x
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,每部分中小模块简单的利用水平线
分隔。网站利用html5的audio标签实现背景音乐的播放，并可利用控件可视化控制音乐暂停和播放。在编辑替换网站背景音乐文件时，需要文本框显示当前存储文件名让用户判断是否替换，因为input的t
55、rc="images/newd.jpg"alt=" 56、lass="ui-line">