公众号【地质掘墓人】曾经发布了 《中国地质图集》电子版,其中的图片内容很完整,但网页却无法正常使用,故我基于原文件中的图文,参考其网页设计效果,重新制作了一版网页程序。
1. 《中国地质图集》介绍
《中国地质图集》(以下简称《图集》)是一部以地质图为主,兼有各种附图、附表、照片及相关文字说明的综合性专业学科著作。在内容上,《图集》囊括了全球、亚洲、中国、中国各大区域及各省、直辖市、自治区的地质图,以利于读者从全球或较大区域地质背景的基础上,深入理解某一地区的地质构造及发展历史,它们是组成图集的主体部分。此外,《图集》还编制了一系列全国性地学分支学科图件。
《图集》力求客观准确地表达地质记录,并尽可能在图面上反映更多的地质信息;文字、地层表及附图、附表和照片均是对《图集》所表示的各类地质体的进一步说明。
2. 文件说明
2.1 begin.exe
这一文件为图集中自带的程序文件。
双击打开 begin.exe,在图 1 所示的程序界面点击 “进入” 即可看到编委会、主要编者、出版人员、序言等内容,如图 2 所示。此时再单击信息界面会在 IE 浏览器中打开同级文件 index.htm。
现在我已经完成了 index.htm 的重新编写,但跳转过程中可能会出现闪退的现象。如果出现闪退重新在程序中单击跳转即可。
除此之外,由于 IE 浏览器本身的原因,默认情况下会限制网页脚本的运行,导致图片切换等由 JavaScript 语言编写的部分功能在网页中无法实现,需要单击网页界面最下方的 “允许阻止的内容” 按键解除其限制。
图 1:begin.exe 程序界面
图 2:图集信息
2.2 index.htm
该界面展示效果如图 3 所示,其网页设计灵感来源于图 4 所示的图集自带的背景图片。
这一文件为我重新编写的网站首页,可以通过 begin.exe 跳转到该网页,也可在浏览器中直接打开该网页。
建议在 Edge、Google 等其他浏览器中直接打开此网站,因为这些浏览器一直在更新维护,可以直接正常运行 JavaScript 语言编写的代码,无需另行做解除限制等操作。
背景渐变色为在原背景图片上拾取颜色后在 ColorSpace 中生成的三色渐变代码。网页左上角的图由 ArcGIS Pro 制作,底图也是软件自带的中国地图彩色版。根据该底图图层元数据可知,该底图为北京捷泰天域信息技术有限公司版权所有。图片保存后通过 remove.bg 网站进行抠图,从而得到网页中所展示的效果。
网页中部分代码在开源 JavaScript 库 jQuery 基础上编写。网页字体为免费开源字体——霞鹜文楷,可在 猫啃网 中下载该字体。这些年来,我了解到了很多开源项目,也通过这些开源项目在学习与工作中得到了很多便利,在此向所有无私奉献的开源工作者们致敬!
在网站中可实现跳转网页的超链接部分在鼠标指针悬停时会变为青色,单击其中的世界地质图等超链接即可打开对应的图集网页。
最下方的网站说明同样附带超链接,单击网页制作者部分的【琴书地理阁】可直接跳转到博主所运营的公众号的《联系方式》界面,单击页面参考及图文来源部分的【中国地质图集】可直接跳转到先前提到的公众号【地质掘墓人】的那篇文章,单击网页字体部分的【霞鹜文楷】可跳转到字体开发者发布的bilibili相关介绍视频。
图 3:index.htm 网页界面
图 4:背景图片原文件
2.3 Materials
该文件夹包括首页超链接对应的其他各个网页、所有网页相关的 css、js 文件以及相关图片及字体等内容。
以世界地质图为例,如图 5 及图 6 所示,该网页中包含两幅图片,分别为世界地质文本说明以及世界地质图,通过两侧的左右箭头可实现图片切换。
前言、目录、参考文献等源文件中有可以正常查看的网页,我们也在此之上进行了一些调整,例如重新设计了网页显示效果,以及将其中图片里的文字转换成了正常的文字等,参考文献最后一条原为图片形式的俄文文献,我通过文本识别软件将其转换为了正规的俄文。
图 5:世界地质图网页界面 1
图 6:世界地质图网页界面 2
3. 文件分享
百度网盘链接:
链接:https://pan.baidu.com/s/1nlEbAN6Y38WML67YOhi2gQ
提取码:8zio
单击网站中任一网页最下方制作者部分的【琴书地理阁】都可直接跳转到博主所运营的公众号的《联系方式》界面,里边有我的详细联系方式。对于此程序,如在使用过程中发现任何问题,或有什么建议,都请随时联系我。谢谢!
标签:网页,单击,地质图,跳转,中国,界面,图集 From: https://www.cnblogs.com/qsgeo/p/17075327.html