摘" 要：黄河文化是中华文明的根与魂，展现着中华儿女的风骨与精神，是维系全国人民的精神纽带。目前我国各界对黄河文化的挖掘力度不足，致使黄河文化缺乏系统整合，文化传播效果有限。文章借助软件“HBuilder X”，基于Web前端开发技术，利用HTML、CSS制作网页，构建黄河文化传播网站，对黄河文化进行分层研究、系统整合，为黄河文化的传播提供了新的途径和平台。
关键词：黄河文化；Web前端开发技术；网站构建；HTML；CSS
中图分类号：TP311" " 文献标识码：A" 文章编号：2096-4706（2024）22-0092-05
Construction of Yellow River Culture Diffusion Website Based on Web Front-end Development Technology
Abstract： The Yellow River culture is the root and soul of Chinese civilization， showing the character and spirit of the Chinese people， and maintaining the spiritual bond of the whole country. At present， the excavation degree of the Yellow River culture in China is insufficient， resulting in the lack of systematic integration of the Yellow River culture and the limited cultural diffusion effect. With the help of the software “HBuilder X”， based on the Web front-end development technology， the paper uses HTML and CSS to make webpages， and constructs the Yellow River culture diffusion website. It carries out hierarchical research and systematic integration of Yellow River culture， and provides a new way and platform for the diffusion of Yellow River culture.
Keywords： Yellow River culture; Web front-end development technology; website construction; HTML; CSS
0" 引" 言
随着科学技术的发展，互联网技术得到广泛普及，人们更倾向于在较短的时间内获取大量有效信息的信息获取方式。我国进入互联网时代后，互联网为文化传播提供了全新的渠道和平台，网站已经成为人们获取信息、交流沟通等活动的主要场所。黄河文化是中华文明的摇篮，千百年来经久不衰，历久弥新。如何利用互联网技术帮助黄河文化在新时代焕发出新的光彩是时代的话题。本文将借助软件“HBuilder X”，重点研究如何利用Web前端开发技术构建黄河文化传播网站，促进黄河文化的传播与发展。以下为软件“HBuilder X”创建项目的页面截图，如图1所示。
1" Web前端开发技术
计算机网站前端开发技术主要是指通过建立APP和网页等开发设计前端页面，为网络用户展示系列流程[1]。开发基本的静态网页所采用的基础技术手段主要有HTML（超文本标记语言）、CSS（层叠样式表）和JavaScript，图2为Web前端基础开发技术的基本情况。
本文所提到的以Web前端开发技术助推黄河文化传播主要是指利用计算机网站前端开发技术构建黄河文化传播网站，将河湟文化、三晋文化、中原文化等进行分类整合，融入黄河地域的历史演变、风土人情、民风民俗等，对黄河文化进行多维度传播，使不同区域、不同阶层的受众可以通过该网页更加快捷方便地获取信息，让黄河文化走进社会的各个角落[2]。
2" 黄河文化传播网站的制作
HTML作为前端设计的重要组成技术，在黄河文化传播网站的设计中发挥着不可或缺的作用，而CSS则为网页设计注入活力。HTML已经发展到Web发布者必然使用CSS设置样式的程度。基于受众对网页界面的新要求，下文将详细研究HTML和CSS在黄河文化传播网站制作中的具体操作。
2.1" 基于HTML技术制作网页结构
HTML属于网页的内容层，作用是组织和显示网页基本信息，构建和呈现网页内容的标准，为网页搭建整体的框架[3]。黄河文化传播网站应注重体现各流域黄河地区及黄河文化的内容及特点。除简介、咨询、评论交流等基本内容以外，还可以设置黄河流域数字展厅、黄河流域民俗故事、黄河流域风土人情等内容栏目[4]，具体框架设计如图3所示。
黄河文化传播网站的设计与制作应用了HTML的众多内容，下面以视频插入和超级链接两项核心功能为例，分析HTML在黄河文化传播网站制作中的应用。
2.1.1" 视频插入
在HTML中，Video标签是用于定义视频播放器的，它可以设置视频的大小并实现视频的播放、暂停、进度等功能。为在视频上插入其他元素，我们使用设置盒子的方式，将视频及其他元素置于盒子中。在黄河文化传播网站的首页采用视频导入的方式向观众展示黄河流域生态环境，引领观众走进黄河，效果如图4所示，具体操作如下：
lt;div class=\"heziyi\"gt;
lt;div class=\"shipinyi\"gt;lt;video" autoplay loop muted width=\"100%\"gt;
lt;source src=\"video/shipin（1）.mp4\" type=\"\"gt;
lt;/videogt;lt;/divgt;
lt;div class=\"tuyi\"gt;lt;img src=\"img/首页箭头白.png\" alt=\"\"gt;
lt;a href=\"ditu.html\"gt;lt;h1gt;\"走进黄河\"行lt;/h1gt;lt;/agt;lt;/divgt;
lt;/divgt;
2.1.2" 静态网页的互相链接
超链接是HTML文档中最重要的应用之一，使用超链接后，用户点击被称为超链接的文本或图形即可跳转到其他页面。为构建一个较为完整的信息体系，方便用户获取系列相关知识，在网站建构的过程中，使用超链接技术将多个网页链接起来，达到网页之间互相跳转的效果。除此之外，超链接还可以链接各种媒体，如图像、音频、视频等，也可以跳转到网页的某一特定位置，比较常见的应用就是网页导航和返回顶部。
超链接是使用标签lt;agt;来定义的，a元素最重要的属性是href属性，最常用的属性是href和target。href指示链接的目标，是目标资源的有效位置，target决定目标打开的方式。
在黄河文化传播网站中，用户在黄河流域地图上点击相应区域的坐标即可跳转到对应的网页，效果如图5所示，具体操作如下：
lt;div class=\"zuobiao1\"gt;
lt;a href=\"1.html\"gt;lt;img src=\"img/2dianjitubian.png\" alt=\"\" /gt;lt;/agt;
lt;/divgt;
lt;div class=\"zuobiao2\"gt;
lt;a href=\"2.html\"gt;lt;img src=\"img/2dianjitubian.png\" alt=\"\" /gt;lt;/agt;
lt;/divgt;
lt;div class=\"zuobiao3\"gt;
lt;a href=\"3.html\"gt;lt;img src=\"img/2dianjitubian.png\" alt=\"\" /gt;lt;/agt;
lt;/divgt;
lt;div class=\"zuobiao4\"gt;
lt;a href=\"4.html\"gt;lt;img src=\"img/2dianjitubian.png\" alt=\"\" /gt;lt;/agt;
lt;/divgt;
2.2" 基于CSS技术优化网页布局
CSS属于网页的样式层，作用是调整网页样式，解决网页布局排版的难题。CSS不仅可以使各种元素静态化呈现，还可以配合各种脚本语言使元素动态化呈现，达到动静态交互的需求。CSS最大的特点是可以将网页的内容与表现格式进行分离，使网页更加结构化和标准化，网页代码更为清晰。合理的网页布局不仅增强了用户的视觉体验，也方便了网页的维修检查。
创建CSS有四种方式：内联样式、内部样式表、链接外部样式表和导入外部样式表[5]。内联样式表是混合在HTML标签中使用的，且只能作用于当前页面中的标签，例如：lt;p style=”color：#0066ff;font-size：12px;text-decoration：underline;”gt;内容lt;/pgt;。内部样式表一般位于HTML的头部位置，集中放置在HTML网页中的lt;stylegt;标签中，以lt;/stylegt;结束，例如：lt;stylegt; p {color：#0066ff;} lt;/stylegt;。外部样式表是将CSS代码单独创建在一个或多个CSS文件中，达到了CSS代码与HTML分离的效果。在网站建设中这种方式最为常见且效果最好。在创建完CSS文件后，通过使用lt;linkgt;标签指令与HTML进行链接。例如：lt;headgt; lt;！-- href表示引入的css文件路径和文件名；type表示文件的类型是样式表文件，其值为text/css;rel是指在页面中使用外部的样式表，其值为stylesheet--gt; lt;link href=”test.css” type=”text/css” rel=”stylesheet”gt; lt;/headgt;[6]。
CSS代码在网页布局设计中发挥着巨大的作用，可以设置各要素的属性、图片的动画等，还可以与DIV结合，共同构建盒子模型。
2.2.1" CSS盒模型
盒模型又名框模型，可以理解为网页是由框按照一定规则排列组合所构成的。HTML中所有元素都可以看成是由框组成的，这些框通过浮动或者定位机制排列在一起，构成用户所看到的网页界面，框就是盒子模型。CSS盒模型包含外边距（Margin）、内边距（Padding）、边框（Border）、内容（Content）四部分[7]，结构如图6所示。
盒模型在实际的黄河文化传播网站建设中是十分复杂的。一个网页通常包含大量的盒子，并相互影响，因此我们需要用CSS对盒子进行排版布局。CSS提供了三种基本的定位机制，即标准文档流、浮动和绝对定位。除专门指定的定位方式外，所有元素都在标准流中定位，即由元素在HTML中的位置决定。
标准流是指在不使用其他与排列和定位相关的特殊CSS规则时，各种元素默认的排列规则为：从上到下、从左到右、遇块（块级元素）换行。但是仅通过标准流方式对其进行布局时，很多排版是无法实现的。因此浮动和定位发挥着不可替代的作用，下文将对其展开详细阐述。
2.2.2" 浮动
由上文得知，在默认情况下，块级元素是按照从上到下的顺序排列的，即每个块级元素独占一行。为了使网页更加美观，排版更加合理，我们有时需要将两个块级元素在一行内显示，这就需要采用元素浮动的方式来实现。
浮动（float）属性可以把网页的元素移动到网页的一边，脱离常规文档流表现为向左、右浮动。浮动的框可以向左或向右移动，直至其边缘碰到包含框或另一个浮动框的边框。需要明确的是，浮动的框只能左右移动，不可上下移动[8]。移动的基本语法为float：right/left/none;。在黄河文化传播网站中的具体应用如下：
.nav ul{
display： flex;
font-wrap： wrap;
justify-content： space-between;
overflow： hidden;
float： left;
position： absolute;
left： 180px;
}
图7为没有设置浮动命令的效果，图8为设置了浮动命令的效果。
2.2.3" CSS绝对定位
定位广义上是指将元素放在网页的某一位置，狭义上是指在CSS中使用position属性来对元素进行位置固定，基本语法为：{position：static/relative/absolute/fixed};。position属性具有四种不同类型的定位[9]，分别为：
1）静态定位（position：static）是默认的属性，即如果没有指定元素的定位方式，就按照静态定位的方式显示。块级元素生成一个矩形框，行内元素创建一个或多个行框，置于其父元素中。在网页中定义两个div，其中一个嵌套在另一个div中，且两个div都是静态定位，网页将按照文档流的标准流进行展示，效果如图9所示，核心代码如下。
lt;headgt;
lt;style type=”text/css”gt;
#id1{
width：200px;
height：200px;
border：1px;}
#id2{
position：static;
width：100px;
height：100px;
border：1px;}
lt;/stylegt;
lt;/headgt;
lt;bodygt;
lt;div id=id1gt;
lt;div id=id2gt;
lt;/divgt;
lt;/divgt;
lt;/bodygt;
2）相对定位（position：relative）的元素是相对于它本身原来的位置进行定位的，没有脱离文档流，只是按照left、right、top、bottom的值进行了位置的偏移。相对定位后若元素没有设置宽度，则宽度保持不变，若按照百分比的方式来设置宽度则元素的宽度根据文档流中父元素的宽度进行计算。
3）绝对定位（position：absolute）的元素是相对于最近的已经定位的祖先元素进行定位，若没有符合条件的祖先元素则相对于浏览器窗口进行定位[10]。元素绝对定位后则脱离文档流。元素相对定位可以使用z-index属性进行层叠，控制层级次序。以黄河文化资源网站为例，设置绝对定位的代码如下，其中nav和sousuo都是相对于daohanglan进行定位的。
lt;div class=\"daohanglan\"gt;lt;/divgt;
lt;div class=\"nav\"gt;
lt;ulgt;
lt;ligt;lt;a href=\"1.html\"gt;甘肃黄河lt;/agt;lt;/ligt;
lt;ligt;lt;a href=\"2.html\"gt;宁夏黄河lt;/agt;lt;/ligt;
lt;ligt;lt;a href=\"4.html\"gt;内蒙古黄河lt;/agt;lt;/ligt;
lt;ligt;lt;a href=\"3.html\"gt;山西黄河lt;/agt;lt;/ligt;
lt;ligt;lt;a href=\"#diwu\"gt;留言互动lt;/agt;lt;/ligt;
lt;/ulgt;
lt;/divgt;
lt;div class=\"sousuo\"gt;
lt;input type=\"text\" placeholder=\"搜索..\"gt;
lt;/divgt;
.nav ul{
display： flex;
font-wrap： wrap;
justify-content： space-between;
overflow： hidden;
float： left;
position： absolute;
left： 180px;}
.sousuo {
overflow： hidden;
background-color： #ffffff;
position： absolute;
top： 70px;
right： 180px;
z-index： 13;}
4）固定定位（position：fixed）时，元素框的表现类似于将position设置为absolute，差异在于固定元素的包含块是视窗本身。
3nbsp; 结" 论
由以上具体案例可见，Web前端开发技术对构建黄河文化传播网站具有举足轻重的作用，对促进黄河文化的传播与发展具有实际意义，为黄河文化的传播提供了全新的途径和平台。黄河文化传播网站可以带给观众更为简单快捷的信息获取途径、更为丰富有趣的文化体验，让用户更深入地了解黄河背后的历史文化，让更多人了解和感受非遗文化的魅力。
参考文献：
[1] 李林凡.计算机网站的前端开发技术与优化措施探讨 [J].信息记录材料，2022，23（1）：77-79.
[2] 王兆敏.新时代以来黄河题材纪录片的叙事策略研究 [D].曲阜：曲阜师范大学，2024.
[3] 许含坤.Web前端开发技术研究 [J].无线互联科技，2022，19（8）：85-86.
[4] 樊欢瑶.数字赋能黄河非物质文化遗产资源开发利用研究 [D].郑州：郑州航空工业管理学院，2022.
[5] 周传婷.基于HTML5的非遗数字博物馆网站的设计与实现 [J].现代信息科技，2024，8（6）：127-131+135.
[6] 吴晶.探讨网页设计中CSS技术的应用 [J].科学技术创新，2019（35）：67-68.
[7] 齐慧.基于HTML5技术的移动Web前端研究与实现 [D].济南：齐鲁工业大学，2020.
[8] 杨志琴，张桂莲.DIV+CSS三种布局方式探讨 [J].软件，2022，43（3）：71-74.
[9] 刘心美.DIV+CSS网页布局的设计与实现 [J].科技资讯，2021，19（30）：14-16.
[10] 吴锋珍.DIV+CSS技术在网页布局中的应用研究 [J].湖南邮电职业技术学院学报，2022，21（3）：40-42+80.
