DOI:10.19551/jki.issn1672-9129.2021.06.057
数字化文创馆的网页设计及实现
兰㊀岚㊀许新华㊀王㊀楠㊀赵琼妮(湖北师范大学计算机与信息工程学院㊀黄石㊀435002)
基金项目：湖北省大学生创新创业训练计划项目 文化印迹  数字化新文创馆 ㊂(项目编号:s202010513048X)
摘要：非遗文化传承至今，却仍然与人们有着较深的距离感㊂我们希望用文创文化为非遗注入新鲜血液并带来活力，让人们在欣赏传统非遗文化魅力的同时还能看到存在于我们身边的文创文化，用文创打破非遗带给人们的距离感㊂因此我们通过HTML5,CSS3,JavaScript,Bootstrap框架以及Layui框架等技术设计了一个将非遗文化与文创产品相结合的网站，让大家在欣赏非遗文化的同时还能迅速的到对应文创商品，将非遗以一种大家喜闻乐见的方式呈现在众人眼前，不仅帮助人们了解了非遗文化还能够促进文创行业的发展㊂
关键词：网站；页面设计;HTML5;CSS3；非遗文化
中图分类号:TP311㊀㊀㊀文献标识码:A㊀㊀㊀文章编号:1672-9129(2021)06-0062-02
㊀㊀引言：近年来，随着国家文化自信建设的方针和理念在全社会的贯彻，国潮文化逐渐兴起[1]㊂数字化文创馆以传统和创新为载体，为大众提供一个同时享受非遗文化和欣赏文创之美的机会㊂人们在为非遗文化感到惊艳的同时又能够快速的获得与之相关的文创商品的信息㊂这既是对非遗文化的传承也是对文创的良好宣传㊂
1㊀相关技术介绍
①HTML5网站开发特点㊂目前,HTML5技术被大量运用于移动运用以及网站开发中，它是网站制作和网站文件中较为关键的语言之一[2]㊂它强化了Web页面的表现性能，除了原来的图片外，还增加了音频，视频的标签，在网页设计中融入多样化的视觉形式，给用户带来更丰富的体验㊂而数字文创馆中文创产品有市场的前提就是非遗的特殊魅力，视频，音频的出现无疑是增加了展现非遗魅力的方式㊂因此我们运用HTML5与CSS3来共同开发数字化文创馆的网站㊂②CSS3技术㊂CSS3技术在原版的基础上增加了许多新的模块，有较强的功能模块化的特点，在颜渐变以及投影上做了巨大改进，设计者可以根据自身需要来改变网页边框大小，颜，图形等属性[3]㊂结合HTML5能够共同开发出互动性较强的页面㊂
③框架使用㊂框架近年来较多运用于网站开发中，由于它使用方法简单快捷，页面风格多样多变㊂越来越多开发人员使用框架来节省开发时间以及提高开发效率㊂
本网站主要使用layui以及bootstrap两种框架㊂Layui 是一款采用自身模块规范编写的前端UI框架，风格
简洁明了㊂而Bootstrap框架是目前最受欢迎的前端框架之一，它是基于HTML,CSS,JavaScript的一种前端框架，风格简洁灵活，容易把握使用㊂使用框架缩短网站开发时间，帮助我们快速的搭建具有自身特的网站㊂
2㊀网站整体设计
网站前台界面以暖调为主，整体为深棕调加以金点缀，背景大多选用中国传统元素，如祥云，仙鹤等，在于突出非遗文化的历史感和神秘感㊂
网站主要由首页㊁资讯㊁名录㊁展览㊁公约㊁百科㊁文创产品等七个主要页面构成㊂首页和文创板块均设有轮播图，可及时推送非遗文化相关知识和文化创意产品㊂展览板块分别利用视频㊁图集㊁音频的形式进行介绍宣传非遗，增强了用户体验感的同时让大众以多种形式去领略非遗的独特魅力㊂文创商城板块为用户提供一个文化创意产品的交易渠道，鼓励大众挖掘文化内涵，唤醒非遗文化之美㊂百科板块将中国23个省㊁5个自治区㊁4个直辖市㊁2个特别行政区及国家的数字博物馆入口汇总于中国地图上，以拓展用户获取非遗知识的渠道，公约板块为用户普及‘非物质文化遗产保护公约“相关知识，鼓励大众保护非遗
㊂
后台管理界面以白绿为主，简洁明了，所有需要管理的项目都以表格的形式呈现，方便管理员查以及后期管理㊂以上七个主要页面和后台管理页面共同组成我们的数字化文创馆㊂总体设计图如下:
3㊀详细设计及实现
本项目主要使用的技术有HTML5,CSS3,JavaScript, Bootstrap框架以及layui框架等㊂以下是网页部分内容的
实现㊂
①CSS3中transition属性及实现
CSS3中的transition属性允许属性值在一定时间内平滑的过渡，定义初始状态后再用transition属性定义需要改变的属性，定义一个鼠标hover状态下改变后的属性值，从而实现动画效果㊂
本项目中通过使用该属性对图片宽度进行平滑变化，当鼠标出现在设置了该属性的div上方时，改变div宽度㊂用三个这样的div设置不同图片背景从而达到推图的效果㊂关键代码如下:
#WF div{
float:left;
width:17.4%;
height:400px;
㊃26㊃
DOI:10.19551/jki.issn1672-9129.2021.06.058
CAD 图形中自动处理悬挂的探讨
谢世力(自然资源部第六地形测量队㊀四川㊀成都㊀610500)
摘要：南方CASS 软件的优点是操作简单，图形编辑功能非常强大㊂ARCGIS 软件的数据管理功能卓越㊂两者软件生成的图形也有显著区别,CAD 图形简单，清晰明了，而ARCMAP 图形层次分明㊂为了将拓扑处理的功能简单化，本文探讨在CAD 图形下处理线段的悬挂问题㊂
关键词：悬挂点；端点；最近点；首点；尾点；方位角；交点；虚交点；相邻多段线
中图分类号:TP391.72㊀㊀㊀文献标识码:A㊀㊀㊀文章编号:1672-9129(2021)06-0063-02
㊀㊀1㊀引言
目前，我国正在大规模地进行农村不动产权籍调查，摸清农村农房存量㊁破损房屋存量，房屋是否合法合规，为国家进一步深化改革打下坚实的基础㊂在调查过程中，首先要进行大规模的实地测绘,CAD 成图时，不可避免的产生很多悬挂，造成图形数据不能入库㊂悬挂问题在ARCGIS 里可以处理，但比较麻烦，因为CAD 图形一条线，有可能转入ARCGIS 时，根据图层的需要，会产生多条形状相同㊁属性不同的线，这会增加几倍的工作量㊂为了更高效的处理这一问题，本文讨论在CAD 图形里处理悬挂问题㊂
2㊀悬挂处理
2.1悬挂的产生㊂在进行CAD 图形编辑时，由于捕捉不到位，不可避免地会产生悬挂㊂什么是悬挂呢?当一条地形要素多段线，首尾的端点与其他要素不相关时，有可能产生悬挂(如图一)㊂
有些不相关不是悬挂，如加固坎或加固斜坡等等㊂但有些不相关，离相邻要素非常近，且根据逻辑分析，就需要跟相邻要素相关，这种情形为悬挂㊂悬挂的端点就是悬挂点，如图一的1号点㊂左边的1号点，未达到相邻要素，右边的1
号点超过相邻要素
㊂
处理悬挂点的简约流程(如图二)，通过点P 构造微小的选择框，选择相邻多段线㊂求点P 到相邻多段线的最近点Q，根据方位角AQ -方位角QB =0，出相邻线段的A㊁B 点，再求2P 与AB 的交点R(未实相交产生虚交点)，再将点R 坐标置换点表中点P 的坐标，然后通过新点表绘制新的多段线㊂
2.2自动处理悬挂的程序框图㊂一般情况下,CAD 图形里的悬挂都是手动处理，通过延伸和裁剪进行处理㊂手动处理，工作量大而繁，不能一次性处理完整，故本文探讨如何用AutoLisp 程序进行自动处理㊂程序基于南方CASS 平台，用AUTOLISP 语言开发而成，其框图(如图三)㊂
㊀㊀transition:width 0.5s;
}html网页边框代码
#WF div:hover{width:50%;
transition:width 0.5s;}
<div id ="WF">古典刺绣
<div class ="gs">毛笔艺术</div><div class ="lt">文化故宫</div><div class ="gw">传统古琴</div><!--每个div 可以设置不同背景--></div>
②HTML5中的热区链接实现㊂热区是指在网页中把图片划分为不同区域链接到不同网址的一种方式㊂其中<area >标签是指带有可以点击区域的图像映射㊂这个标签中shape 属性用于设置热点形状,coords 属性用于设置热点大小,href 属性用于设置跳转界面㊂本项目中运用热区为百科界面设置中国各地博物馆入口，代码如下:
<areastyle ="outline:0;"shape ="rect"coords ="518,239,544,271"href =" /"alt =""/>
4㊀结语
本文主要对数字文创馆的前端设计与相关技术实现进行了简单介绍㊂前端主要运用HTML5,CSS3,JavaScript,Bootstrap 框架及layui 框架等技术，结合查看最新文创非遗咨询，欣赏非遗文化，购买文创产品等众多功能，网站将文创融入到非遗文化中，让人们在欣赏传统非遗文化魅力的同时还能看到存在于我们身边的文创文化㊂为非遗注入新鲜血液带来活力，用文创打破非遗带给人们的距离感，帮助人们了解非遗文化的同时也促进文创行业的发展㊂
习总书记一直强调中国需要 文化自信 ㊂传统与现代技术的结合也是必然趋势[4]㊂基于数字化文创馆的网站将非遗与文创有机结合起来，用创新的方式将古早文化以崭新形式展现在人们眼前㊂通过网站的宣传，非遗文化得以更好的被大众熟知，文创市场也将涌现出新的机遇㊂
参考文献:
[1]向子琦，杨婧一. 互联网+ 背景下文创产业开发建议[J].合作经济与科技,2021(05):10-12.
[2]武建业.Web 前端开发技术和其对网站性能的影响[J].电子世界,2021(02):174-175.
[3]宫道.基于HTML5+CSS3的网页设计实现与优化[J].信息通信,2020(07):291-292.
[4]张竞羚.传统设计思想对于当代设计的利弊分析[J].大众文艺,2015(07):73.
作者简介：兰岚(2001-)，女，湖北师范大学计算机与信息工程学院本科生,AndiOS 工作室成员;
本文通信作者：许新华(1968-)，男，湖北师范大学An-diOS 工作室指导老师,
王楠(2001-)，女，湖北师范大学计算机与信息工程学院本科生,AndiOS 工作室成员;
赵琼妮(2000-)，女，湖北师范大学计算机与信息工程学院本科生,AndiOS 工作室成员㊂
㊃
36㊃

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。