目 录
- 设计思路 …………………………………………………………….XX
- 设计内容………………………………………………………………XX
- 设计过程………………………………………………………………XX
- 作品及特点……………………………………………………………XX
- 参考资料………………………………………………………………XX
- 致 谢………………………………………………………………XX
1.2、设计意义与价值
互联网已经成为了我们获取信息的一种工具，也是我们在互联网时代必备的交流工具，也正因为互联网的发展，让我们能够轻松了解乐器，也能让我们了解到其他的一些快要失传的乐器种类，普及乐器的知识，让美妙的乐曲能够悠远流长，也让人们了解到各种不了解的乐器种类。正应互联网的飞速发展，让乐器展示更加便捷，飘飘乐器大全网站通过提供乐器的图片、介绍、音频、视频等多种形式的资料，帮助用户全面了解乐器的特点、历史及演奏方式等方面的信息。也能宣传古典音乐及其文化价值，通过这个网站展示古典乐器的演奏方式及各种不常见的乐器类型，让更多人了解古典音乐的魅力，并认识到古典乐器对于文化传承的重要性。
1.3、设计目标
制作网站就是为了，在线上推广更多乐器让用户了解跟多乐器，历史，制作工艺， 演奏，现在大多数的年轻人生活节奏快，当他们想了解各种乐器，学习乐器就可以浏览我们的网站，学习制作，网站上都有许多乐器的详细信息，还有视频，用户还可以在我们网站上留言，让更多人了解到更多乐器的知识，也可以给我们网站提出建议，我们现在所见到的乐器种类大都是一代一代改良下来的，是先人的智慧。因此网站制作的的主要需求为以下几点：
(1) 要让用户了解一些乐器的基本信息；
(2) 乐器介绍页面简洁明了，便于用户理解；
(3) 做到让用户感到满意并且舒服的页面；
(4) 给到用户些建议以及帮助。；
(5) 实现用户和网站的交互。
1.4、设计目标
设计网站之前，先是大量浏览了网上的网站，通过他们的网站得到了启发，有了 大概的设计思路，以及观看一些好看的动画效果进行修改，运用到自己的网站上。确 定飘飘乐器大全网站主要包括：首页、键盘、管乐、弦乐、吹奏、弹奏、打击、联系我们等八个模块。 我们在 windows10 操作系统环境中使用 html5 技术开发，采用 Web 开发工具 HBuild 软件及 Photoshop 和美图秀秀完成 logo 设计以及图片的美化。引用 HTML5+CSS3+JavaScript 以及 JQuery 进行开发。
（1） 使用 HTML5 进行开发。 给站点带来了更多的多媒体元素(视频和音频)。静态的页面开始动起来，视觉效果更美观，提高了用户观感。
（2） 使用 CSS3 进行开发的优势。 网页的表现统一,容易修改，丰富的样式,使得页面布局更加灵活,增加网页的浏览速度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>打击</title>
<link rel="stylesheet" href="style/hover.css">
<link rel="stylesheet" href="style/bootstrap.min.css">
<link rel="stylesheet" href="style/swiper-bundle.min.css">
<link rel="stylesheet" href="style/daji.css">
<link rel="stylesheet" href="style/common.css">
</head>
<body>
<div class="zti">
<div class="headermain navbar-fixed-top">
<!-- 头部 -->
<div class="tbu ">
<!-- LOGO -->
<div class="container">
<div class="logo fl " id="logo1">
<a href="#"><img src="images/logo.png"></a>
</div>
<!-- 搜索框 -->
<div class="ssk col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="请输入乐器名~~~">
<span class="input-group-btn">
<button class="btn btn-default" type="button">搜索</button>
</span>
</div>
</div>
</div>
</div>
<div class="dhang" id="dhang1">
<ul class="nav nav-tabs nav-justified ">
<li role="presentation" class="">
<a href="shouye.html">首页</a>
</li>
<li role="presentation" class="bw dhitem" id="tbu_br">
<a href="jianpan.html">键盘</a>
</li>
<li role="presentation" class="bw dhitem" id="tbu_niao">
<a href="guanyue.html">管乐</a>
</li>
<li role="presentation" class="bw dhitem " id="tbu_hai">
<a href="xianyue.html">弦乐</a>
</li>
<li role="presentation" class="bw dhitem" id="tbu_hai">
<a href="chuizou.html">吹奏</a>
</li>
<li role="presentation" class="bw dhitem" id="tbu_hai">
<a href="tanzou.html">弹奏</a>
</li>
<li role="presentation" class="bw dhitem active" id="tbu_hai">
<a href="daji.html">打击</a>
</li>
<li role="presentation" class="bw dhitem" id="tbu_hai">
<a href="lxiwm.html">联系我们</a>
</li>
</ul>
</div>
</div>
<!-- 轮播部分 -->
<div class="lunbo">
<img src="images/daji.png" alt="" srcset="">
</div>
<!-- 乐器展示部分 -->
<div class="zwbt ">
<div class="bw">
<h3 id="xiniu">十大打击乐器</h3>
<p>
<a href="#xiniu">架子鼓、</a>
<a href="#hu">定音鼓 、</a>
<a href="#yuan">马林巴、</a>
<a href="#lang">跋、</a>
<a href="#hou">腰鼓、</a>
<a href="#xiong"> 排钟、</a>
<a href="#shi">编钟、</a>
<a href="#gui">福善牛皮鼓、</a>
<a href="#xing">锣、</a>
<a href="tun"> 非洲鼓</a>
</p>
</div>
<nav class="fr" aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">翻页
<span aria-hidden="true">«</span>
</a>
</li>
<li id="yi">
<a>1</a>
</li>
<li id="er">
<a>2</a>
</li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="dwzs">
<div class="dyy">
<!-- 第一页 -->
<div class="hdw" id="hdw1">
<div class="dw fl">
<img src="images/daji1.png" alt="" class="dwimg hvr-grow">
</div>
<!-- 详细介绍 -->
<!-- 架子鼓 -->
<div class="xxjs fr">
<p>架子鼓</p>
<div class="text" id="hu">爵士鼓即架子鼓，是爵士乐队中十分重要的一种打击乐器，它通常由一个脚踏的低音大鼓（Bass Drum，又称“底鼓”）、一个军鼓、二个或以上嗵鼓（Tom Drum）、一个或两个吊镲（Crash Cymbal）、一个节奏镲（Ride Cymbal）和一个带踏板的踩镲（Hi-Hat）等部分组成。当然有时因演奏需要会增设一些如牛铃、木鱼、沙槌、三角铁、音树，不管增设多少器件，都是由一人演奏。鼓手用鼓槌击打各部件使其发声。爵士乐中常用的鼓槌有木制的鼓槌，由钢丝制成的鼓刷，由一捆细木条捆成的束棒等。
架子鼓形成于20世纪40年代，它包含着各种不同类型、不同音色的手击乐器和脚击乐器。手击乐器有小鼓、嗵鼓、吊镲等，脚击乐器有大鼓、踩镲。
</div>
</div>
</div>
<div class="hdw">
<!-- 单个乐器 -->
<div class="dw fl">
<img src="images/daji2.png" alt="" class="dwimg hvr-grow">
</div>
<!-- 详细介绍 -->
<!-- 定音鼓 -->
<div class="xxjs fr">
<p>定音鼓</p>
<div class="text" id="yuan">定音鼓，英语称timpani，此字源自于意大利语，为timpano的复数形，这是由于定音鼓绝少单独击奏。有时亦拼写作tympani或tympany等。
定音鼓是由一个铜制或黄铜制的共鸣胴（似面盆状），上面紧绷着小牛皮或是塑胶制的面皮。皮面由木头圈固定再用金属环套住，并可用几个螺丝钉调节松紧度，演奏者就是借此来调节定音鼓的音高。
现代的定音鼓则是用踏板来控制音高，甚至可利用踏板制造出滑音的效果，但不论是古代手调式或现代踏板式的定音鼓都具有相同的音域和音质。
定音鼓通常以两个以上为一组，演奏时使用两支前头包着毛毡的木制鼓棒，常用基本奏法有单奏及滚奏。
</div>
</div>
</div>
<div class="hdw">
<!-- 单个乐器 -->
<div class="dw fl">
<img src="images/daji3.png" alt="" class="dwimg hvr-grow">
</div>
<!-- 详细介绍 -->
<!-- 马林巴 -->
<div class="xxjs fr">
<p>马林巴</p>
<div class="text" id="lang">马林巴（英语：Marimba）为打击乐器的一种。是木琴的一种，将木制琴键置于共鸣管之上，以琴槌敲打以产生旋律，但琴键较木琴阔，音域较广，音色冰凉，也有较多特殊打法。马林巴的键数有49键、52键、56键、61键、66键、69键。
马林巴传入拉丁美洲大约是在17、18世纪，后来成为印第安人的乐器。而且，演奏马林巴也已成为某些印第安部族的仪式的一部分。这些仪式祈求的是宇宙的和谐以及人们的幸福，危地马拉的圣马可斯德古纳地方演奏的马林巴乐曲与非洲加纳的西斯沙拉人的乐曲十分相似。
马林巴（marimba）是世界上广泛流行，而且深受人们喜爱的一种旋律型打击乐器。关于马林巴的起源世界上还没有较明确的记载和考证，众说不一。据文史资料介绍，马林巴的诞生地是在危地马拉，但在东南亚和非洲等地都有同时存在的可能性。
</div>
</div>
</div>
<div class="hdw">
<!-- 单个乐器 -->
<!-- 跋 -->
<div class="dw fl">
<img src="images/daji4.png" alt="" class="dwimg hvr-grow">
</div>
<!-- 详细介绍 -->
<div class="xxjs fr">
<p>跋</p>
<div class="text" id="hou">铜质圆形的乐器，中心鼓起，两片相击作声 [cymbals]。古称“铜钹”、“铜盘”。初流行西域，南北朝时传至内地。钹源于西亚，流行于北魏。明清后成为戏曲的重要伴奏乐器。 钹：古称“铜钹”、“铜盘”，民间叫做“镲”。是常见的打击乐器。历史久远，表现力强。不仅在民族音乐、地方戏剧、吹打乐和锣鼓乐中使用，还广泛用于各族的民间歌舞和文娱、宣传活动中。 钹源于西亚，最早在埃及、叙利亚，以后在波斯、罗马等古国都有流传；在东方，先见于印度，后而中亚，据《北帝书.神武记》记载：钹大约是在公元350年左右，随《天竺乐》传入我国中原
</div>
</div>
</div>
<div class="hdw">
<!-- 单个乐器 -->
<div class="dw fl">
<img src="images/daji5.png" alt="" class="dwimg hvr-grow">
</div>
<!-- 详细介绍 -->
<!-- 腰鼓 -->
<div class="xxjs fr">
<p>腰鼓</p>
<div class="text" id="xiong">腰鼓是汉族传统棰击膜鸣乐器之一，它来源于生活，又很好地表现了生活。历史悠久，发音脆亮，在民间广泛被流传，独具魅力的安塞腰鼓掀起了黄土地上的狂飙，展示出西北黄土高原农民朴素而豪放的性格，张扬出独特的艺术性。2019年4月12日，一项新的吉尼斯世界纪录在四川绵阳南山中学实验学校诞生，“南实千人腰鼓队”以1344人参与挑战并认证成功。
<br>
</div>
</div>
</div>
</div>
<!--第二页-->
<div class="dey yc">
<div class="hdw" id="hdw1">
<!-- 单个乐器 -->
<div class="dw fl">
<img src="images/daji6.png" alt="" class="dwimg hvr-grow">
</div>
<!-- 详细介绍 -->
<!-- 排钟 -->
<div class="xxjs fr">
<p>排钟</p>
<div class="text" id="shi">排钟（Tubular Bell ）又称“管钟”，由一些长短有别的钢管或铜管组成。它悬挂在一个较高的架子上，演奏者手持一根或两根木槌击奏，成套的排钟按各调自然音阶铸造。是打击乐器的一种。把金属管挂在铁架上，以木槌敲打以产生旋律。金属管排列方式类似于钢琴键盘。音色神秘，像教堂钟声。在音乐会中，演奏者根据乐谱要求悬挂所需排钟。排钟发音庄严而洪亮，余音很长，听起来音高似乎不很确定。
</div>
</div>
</div>
<div class="hdw">
<!-- 单个乐器 -->
<div class="dw fl">
<img src="images/daji7.png" alt="" class="dwimg hvr-grow">
</div>
<!-- 详细介绍 -->
<!-- 编钟 -->
<div class="xxjs fr">
<p>编钟</p>
<div class="text" id="gui">中国汉族古代大型打击乐器 [1] ，编钟兴起于周朝，盛于春秋战国直至秦汉。中国是制造和使用乐钟最早的国家。它用青铜铸成，由大小不同的扁圆钟按照音调高低的次序排列起来，悬挂在一个巨大的钟架上，用丁字形的木锤和长形的棒分别敲打铜钟，能发出不同的乐音，因为每个钟的音调不同，按照音谱敲打，可以演奏出美妙的乐曲。引在木架上悬挂一组音调高低不同的铜钟，由侍女用小木槌敲打奏乐。
根据文献记载和出土文物，发现中国在西周时期就有了编钟，那时候的编钟一般是由大小3枚组合起来的。春秋末期到战国时期的编钟数目就逐渐增多了，有9枚一组的和13枚一组的等等。1957年，在我国河南信阳城阳城址出土的第一套编钟13枚演奏的东方红乐曲随着我国第一颗人造卫星唱响太空。
</div>
</div>
</div>
<div class="hdw">
<!-- 单个乐器 -->
<div class="dw fl">
<img src="images/daji8.png" alt="" class="dwimg hvr-grow">
</div>
<!-- 详细介绍 -->
<!-- 福善牛皮鼓 -->
<div class="xxjs fr">
<p>福善牛皮鼓</p>
<div class="text" id="xing">福善牛皮鼓制作技艺早在清朝时期就已经在当地广为流传。当地民间匠人受传统工艺的启发，利用本地山地多养水牛的资源，加上传统皮鼓制作手艺，通过摸索钻研，成功制作出特色鲜明的福善牛皮鼓，并一直保存下来。牛皮鼓在古代用于鼓舞士兵，后来，在各种婚丧嫁娶宴会上伴奏助兴，成为一种当地广为流传的音乐文化。福善牛皮鼓传承了传统皮鼓的制作工序，包括选材、撑皮、晒皮、下料、削皮、浸泡、鼓皮定型、箍桶、上索、上楔等，重点是选取当地水牛韧性最佳的前肋皮子。其作品古朴典雅，其音质纯正、粗犷、深沉、淳厚，其纯手工制作技艺达到很高的水准，且易于保护与传承传统技艺。
</div>
</div>
</div>
<div class="hdw">
<!-- 单个乐器-->
<div class="dw fl">
<img src="images/daji9.png" alt="" class="dwimg hvr-grow">
</div>
<!-- 详细介绍 -->
<!-- 锣 -->
<div class="xxjs fr">
<p>锣</p>
<div class="text" id="tun">锣属于金属类的打击乐器。锣是用铜冶炼而成的，它的结构比较简单，锣身呈一个圆形的弧面，四周是以锣身的边框固定，演奏者用木棰敲击锣身正面的中央部分，产生振动而发音。 [1]
锣无固定音高。其音响低沉、洪亮而强烈，余音悠长持久。通常，锣声用于表现一种紧张的气氛和不祥的预兆，具有十分独特的艺术效果。
</div>
</div>
</div>
<div class="hdw">
<!-- 单个乐器 -->
<div class="dw fl">
<img src="images/daji10.png" alt="" class="dwimg hvr-grow">
</div>
<!-- 详细介绍 -->
<!-- 非洲鼓 -->
<div class="xxjs fr">
<p>非洲鼓</p>
<div class="text">非洲鼓，是一个俗称，通常指的是来自西非的Djembe（金贝鼓，坚贝鼓），是西非曼丁文化的代表性乐器。传统上，Djembe是徒手演奏，主要有低、中、高三个音，而且需要和Dunun（墩墩鼓）配合，演奏与特定生活场景相关的鼓曲，来给舞者和歌手伴奏。现在Djembe已经传播到世界各地，在不同的音乐、培训领域发挥着它独特的价值。
</div>
</div>
</div>
</div>
</div>
<!-- 底部 -->
<div class="db">
<a href="#"> <img src="images/dibu1.png" alt=""></a>
<a href="#"> <img src="images/dibu2.png" alt=""></a>
<a href="#"> <img src="images/dibu3.png" alt=""></a>
<!-- 底部的文字 -->
<div class="dbp">
<a href="shouye.html">网站首页 </a> |
<a href="jianpan.html"> 键盘</a> |
<a href="guanyue.html"> 管乐</a> |
<a href="xianyeu.html">弦乐</a> |
<a href="chuizou.html"> 吹奏</a> |
<a href="tanzou.html"> 弹奏</a> |
<a href="daji.html">打击</a>
</div>
<div class="dianh">请拨打000-121212</div>
<div class="dianh1">乐器所演奏的音乐美妙，我们需要传承这些乐器</div>
</div>
</div>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/swiper-bundle.min.js"></script>
<script src="js/js.js"></script>
</body>
</html>
