摘 要 近些年，随着社会经济和文化的快速发展，我国人民对于物质和精神生活的要求逐步提升，在这个趋势下，我国的乐器产业得到了较为快速的发展。在电子商务和物联网的联合冲击下，互联网对人们的消费观念造成了改变，从而影响了人们购买乐器的方式，产生更多的购买途径。本人浏览了一些国外调查报告，其统计结果显示，在美国，2019年排名在前200位的琴行基本上都拥有自己的网站，这说明大多数零售商都在凭借网络平台发布广告信息来吸引客户，提高知名度。其中有多数较大的琴行都搭建了自己的网站，而且有些网站的更新也很及时。有些琴行的网站甚至还有语音和视频形式的在线客服，所以网络平台的经营销售是琴行主营业务的一个重要补充，但这种销售方式也很难占据主导地位。ABSTRACTIn recent years, with the development of economy and society, our peoples demand for material life has gradually increased. In this case, our musical instrument industry has been developing rapidly. Under the impact of e-commerce and the Internet of things, peoples views on musical instrument consumption have changed in the process of adjustment and development of the Internet. According to the statistical results of foreign survey reports, in 2019, all the top 200 music companies in the United States have their own websites, and all the retailers are using the Internet to advertise and attract customers. 52% of the retailers said they have had the experience of
 *51今日免费论文网|www.jxszl.com +Q: ^351916072* 
directly using the Internet to sell musical instruments. At present, most of the top-grade piano firms in China have their own websites, and some websites are well built, as well as voice and even video online customer service, so online sales is a supplement to the main business of piano firms, but it is also difficult to become the main way of sales. KEYWORDS: Baird Musical Instruments、Internet sales一、网站概述 1（一）网站结构 1（二）功能分配 3二、网站建设规划 4（一）确定主题 4（二）搜集资料 4（三）资料整理 5（四）站点建立 5（五）编辑CSS样式表 5三、网站的排版与布局 5（一）div排版布局网页 5（二）主页面 5（三）页眉 5（四）页脚 5四、网站的风格与形象设计 6（一）网站整体风格的设计 6（二）网站的形象设计 6五、详细操作说明 6（一）网站首页 7（二）品鉴Baird贝尔德 7（三）艺术活动 7（四）联系我们 7结束语 7致谢 8附录 9一、网站概述本次设计和制作的Baird乐器网站主要是介绍贝尔德乐器的种类及特点，主要有铜管乐器和木管乐器这两种，为人们展示了一个高品质的管乐器销售网站。（一）乐器行业概述乐器行业属于文化产业的一部分，同时在其属性划分上又属轻工业制造业的一部分。它与电视广播平台、商业文化演出、乐器产业与音乐行业等文化产业的分支有着较为紧密的关系，其他一些文化产业的发展也较为直接地受到乐器行业的发展的影响。而音乐出版物的质量也直接地受到乐器产品质量的影响，乐器行业的整体发展情况在一定程度上可以体现出一个国家的文化发展水平。同时，这个国家的文化发展水平和人民的精神需求也在一定程度上影响着乐器产业的发展。目前我国钢琴、吉他、口琴等乐器的产量均居世界第一位。乐器生产厂家处在消费路径的源头，多是以生产为主要运作的企业;乐器产业链的中端是乐器商贸企业，一般表现为种类繁复的大型贸易公司和地区品牌代理商，此类企业的数量不是很密集，是资源在地区上的集中点，它们往往也处于本地区本商品业的相对垄断地位；而一般的琴行、微型网络销售店铺等零售型企业则处在产业队列的下游。（二）2019年乐器行业的现状2019年，我国乐器行业累计完成主营业务收入406.61亿元，同比增长3.6%；2017年我国乐器行业营收占整个音乐产业营收的11.7%。虽然乐器行业主营业务收入增速放缓，出口交货值下滑，但通过打造实体店面连锁运营、网络销售、音乐教育、技术服务和文化推广等衍生产业链，2017年乐器产业保持稳中有升。2017年我国乐器行业利润总额为30.08，同比增长4%。我国的乐器制作厂家，虽然已经具备良好的体系和规模，但仍然有着多种问题和弊端，如这些厂家的整体制作技术水平偏低、品牌的公信力不足和缺乏自主创新能力，有些企业还存在着融资困难等较为严重的问题。这些当下广泛存在的问题，也并非单独在出现在某个企业，这些问题的存在还是较为普遍的。我们试着探讨其原因，与企业人员组成，企业的管理模式，产业规模以及行业性质都有关系。长期的代工制作与技术模仿使企业在长期的战略规划方面显得十分薄弱无力，短时间的经营方式的调整规划或许能使企业获得一些增益，但是从长期的发展来看，还得需要整体的规划布局。（三）乐器行业发展趋势1、巨大的行业潜在市场近年来随着人们收入的增加，人们在文化生活方面的消费也保持着持续增长的态势。第一，随着社会经济的不断进步和人民生活水平的提高，人们对于高品位的生活的追求逐渐增加，其中就包含对于音乐、乐器等方面的喜好。第二，因受各种媒体节目、视频APP以及文化演出的影响，越来越多的年轻人开始认知并关注音乐，并且有相当一部分人将掌握一种乐器当成生活的一项必修课。第三，随着教育观念的日渐开放，更多的家长认识到教育应该丰富多彩，应该更加自由更加多远化，他们会支持自己的孩子去学习一项艺术技能，促进孩子的综合全面发展。所以，总的来说，人们对乐器的需求是逐年增加的。2、产品向高端突破在国内，近管人们对乐器的需求量正在逐年增加，但是我国自己的乐器产品大部分仍处于中低端定位。在国内人们的一般观念中，乐器的价格不应该太高，于是这种观念就造成的国内乐器市场的产品定位绝大多数就维持在了中低端的位置。人们不会在购买乐器这件事上做出过高的支出准备，在这种观念的决定性影响下，大多数的生产厂家为了盈利和运转于是就将投资转向中低端产品的生产中去。近些年由于国内社会经济水平、人民生活水平和社会教育水平的不断提高，更多的消费者对乐器进行了更广泛和更有深度的了解，也开始了解和关注高端的乐器产品了，再加上国外品牌对中国市场的资金投入越来越多，并且正在迅速占领着中国乐器行业的高端市场领域，以此国内的一些乐器企业也顺遂着市场格局，开始逐步地关注国内乐器的高端市场了。    （四）网站结构1.首页介绍Baird（贝尔德）乐器 2.子页（1）品鉴Baird贝尔德展示不同型号的乐器产品、名称及细节。图片是展示一个产品优劣的最直接的方式，它不仅可以反映本企业乐器产品最别致新颖的外观设计，更能体现乐器的制作精细，优秀的材质，和力求极致的美学理念。（2）艺术活动介绍萨克斯。企业会联合一些乐团和媒体做一些艺术推广，也会积极参与一些音乐方面的社会活动，为求共同进步与发展。（3）联系我们贝尔德微信号二维码和留言区域。（4）行业新闻展示本公司最新的生产、销售信息，以及公司在产品研究上的最新进展与成果。（五）功能分配1.导航栏网页最上方的导航栏可以实现各个页面之间的相互跳转，主要是利用html的超链接标签，只要在想跳转的位置加入这个标签，在填写要跳转的网址，就可实现跳转。代码如下

• 联系我们
• 艺术活动
• 品鉴Baird贝尔德
• 行业新闻
• 网站首页

2.选项卡功能品鉴Baird贝尔德页面中的介绍铜管乐器和木管乐器的地方，是选项卡的效果，点击类别，对应的产品就会显示。如图3所示/图3 选项卡3.留言区域如图4所示/图4 留言（六）开发工具/语言介绍“DW”及Adobe Dreamweaver，其意译为 "梦想编织者"，这款软件最初是由AMERECA MACROMEDIA公司开发，之后在2005年由Adobe公司所收购。DW拥有制作网站和管理网站两大功能，并将这两项功能紧密结合，并且还可以支持CSS、HTML、JavaScript等内容，因而此款软件的用户几乎在任何地方都可以快速地进行网站的制作和搭建。Adobe Dreamweaver视图窗口最大的特点就是“所见即所得”，也有编辑HTML的功能，它可以借助简化过的智能编码引擎，使用户可以轻松地搭建、管理动态网站。你只需访问提示代码，即可快速了解HTML、CSS和其他Web标准。其视觉使用功能既可以减少制作过程中的错误，也可以提高网站的制作速度。超文本标记语言HTML，是适用于计算机编程的一种标识性的编码语言。它是由一系列标签所组成。通过这些标签统一网页上的文档格式，使松散的Internet文档整合成一个逻辑整体。HTML文本是由HTML命令组成的描述性文本， 文字，图形、动画、声音、表格、链接等都可以通过HTML来说明。超文本是整合信息的一种形式，其凭借超链接方式将文档中的文字信息、图象信息与其他的媒体信息相关联。这些互相联系的文本信息媒体可能是其他的文件，也可能是在同一个文本中，或者是处在其他地区的某台计算机上的文件。这种对信息等组织方式用随机等方式将分布在各个位置等信息进行整合，方便人们翻阅和查找想要的信息。Cascading Style Sheets及层叠样式表，是一种计算机语言，它通常用来表现XML或HTML文本格式的程序语言。CSS可以用来搭建和修改静态的网页，也可以协调其他各种各样等脚本语言来动对各种网页元素进行动的格式化调整。CSS对网络页面中的元素进行的格式排版和控制可以达到像素级，它几乎可以支持所有官方品牌的字体好任意大小等字号样式，其具备对网站模板和网页样式的修改和编辑功能。JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。其虽然是基于对Web页面的脚本语言的制作而出发的，但是在很多非浏览器环境中也经常能够用到它，JavaScript 是建立在原型编程、多范式环境之上的动态脚本语言，而且可以面向等多种风格。 JavaScript的操作运行标准为ECMAScript。在二〇一二年之前， ECMAScript 5.1可以被所有版本的浏览器所支持，而旧版本的浏览器也至少可以支持ECMAScript 3 标准。二〇一五年六月十七日，ECMA官方面向国际发布了ECMAScript第六版，这个版本的正式命名为 ECMAScript 2015，但在国内其一般被称为ECMAScript 6 或者ES6。JavaScript有一个快速、简洁的框架—jQuery，它是紧接Prototype之后的新一代代码库（或JavaScript框架）。jQuery的设计有一项宗旨为“write Less，Do More”，意思即写的更少而能做的更多了，及事半功倍。其包含JavaScript所有使用率较高的功能性代码，它可以提供一套简便易上手的设计模式，使HTML文档的操作变得更为简便、进行事件处理操作、动画设计操作和Ajax交互功能。jQuery的功能特点大概能归纳为具备独特的链式语言和简短明了的多功能路径；具备效率很高的css选择功能，而且能够将CSS选择器给扩展；其具备乐更加方便快捷的扩展插件的自主功能和各种各样的插件。jQuery可以适配绝大多数的主流浏览器，如Safari2.0+/FF1.5+/IE 6.0+/Opera 9.0+等。 二、网站制作规划（一）立定主题 首先就是要确定所建网站的主题是什么，而后就围绕它来逐一搭建网站但整体构架、具体内容，网站最基本的一个要求就是能够让浏览者一看就懂，风格上要向大众化靠拢，但也要有自身的独到之处，内容要积极向上、具备一定的吸引力，这样才能易于让浏览者接受，并激发访问者的兴趣，给访问者留下一个好的印象。（二）搜集资料围绕咱的主题，通过各种咱能想的到的途径去搜素相关信息和资料，比如去浏览相关的网页，研究其文字内容的规范，图文的排版，各级之间的结构关系。然后咱把自己通过各种方式搜集来的资料进行分类挑选，并且将图片进行一定的加工处理和去伪存真，最后做成自己网站制作的素材。（三）资料整理将搜索摘录来的文件资料进行分类汇总，新建文件夹“Baird网站设计制作站点”,将为搭建网站所准备的的文本、图片、多媒体文件分别建立文件夹images、css、js来归类存放。有条理但存放可便于后期的查找和更新管理，以便在网站制作中工作界面右侧的文件面板里各个元素能够快捷清晰得调整修改。（四）建立站点打开Dreamweaver CS6,点击工作界面上方菜单栏的“站点”→“新建站点”，在弹出的文本框中输入“Baird乐器网站”为所建网站的名称。命名完成后，面板组中的文件面板会出现新的站点“Baird乐器网站”和它的根文件夹,之后在搭建网站的过程中所涉及到的图片、文本样式、音频视频文件等都将存储在根文件夹中。后期如果需要更改网站站点，只需在管理站点中选中自己之前建立的站点进行编辑和修改就可以了。（五）编辑CSS样式表CSS为Cascading Style sheets简称，是当今时代网页制作中不可或缺的一项新技术，它能够弥补HTML的一些缺点，致使网页的格式代码编辑变得更加简单清晰。本网站的页面制作涉及到了模板页创建，模板页中导航栏的字体、字号、段落、行距、超链接、边框样式及粗细、列表中的文字信息、版权信息等等都可以通过选择CSS样式表来设置，应用CSS的样式表。CSS的功能便于保持网站风格形象和页面的格式统一，减少了网页所占的内存，同时也省去了不必要的工作流程，比如重复编辑网页元素。 三、网站排版与整体布局（一）以div+css排版布局网页用div+css来排版布局网页可以起到精简代码的作用，提升了网页访问速度，有利于优化，使网页看起来整齐美观。首先将网页所有元素的边框、间距、填充都设为“0”。再写内容居中的元素的样式，这样所有居中的元素可使用同一个类名。用div+css来排版布局，在重构页面时可以做到修改过程较为简便（div css改版比较简便）通常情况下DIV+CSS页面皆是html和css文件分离的，也就是说，对于一个网页来说，其在内容上与在表现形式上出现不能统一的局面，通常只需修改很小一部分css文件里css的样式属性便能够达到修改真站的样式版面的目的，比如背景颜色、字体颜色、字体大小、网站宽度和高度等具有table所没有具备的方便性。div+css页面新增了网页打开速度这项功能它们的性能这里是由其特性决定的，因为div css页面是由div的html和css两种文件分开所得到的，在浏览器上打开本网页时，就会同时下载本网页的html和css，故而这样能够提高网页的打开速度，在使用浏览器打开table的时候浏览器必须等到下载以开始,并以结束的代码后才能够显示该页面的内容，而div的html则可以一边加载一边将内容呈现到浏览器上，div css网站在很大程度上优化了用户体验，给浏览者更多的舒适感。我们通常能够感觉到，在打开网页的时候每多等待一秒钟，就都会稍微降低浏览量。（二）主页面在主页面的上方是网站标题、Logo及Banner，中间分成两个区块，一块是介绍贝尔德品牌，另一个是品鉴贝尔德的入口。（三）页眉网页顶端的页眉可以进行设定网站名称、主旨、口号以及Logo等，并配上自己设计的合适的有创意的图片，拥有一个美观的页眉可以使浏览者留下美好的印象。本网站的页眉由Logo、Banner、网站名称、导航条、官方微博和微信等构成，使浏览者便于直观地看懂页面的内容，方便快捷。（四）页脚页脚的设计，除其本身的文字意义外，是其上与页眉相呼应，照应到整个页面的协调性。本站页脚如下，如图5所示/图5 页脚（本站页脚所使用的字体为“宋体”，18px，#999） 四、网站风格与形象的设计（一）整体风格的设计本站首页的设计类型属于形象展示型，包含的文字信息较少，图像信息占主体。网站色调以白色为主，极尽简约，干净大方，不是品位。图片的设计须注重格调和档次，并富有艺术气息。同时利用企业最近热卖的产品图片及文字信息排版成一幅和谐悦目的页面，一种独有的风格会给人以一种深刻的形象，使访客产生浏览的欲望，从而点击进入浏览本网站。（二）网站的形象设计1. Logo设计本网站的Logo是用网站的英文名称“Baird”进行拉伸变形设计而成，其结构又可以可以拆分成音符“????”同时在外围加上英文字样，格调上来带一定的稳重古朴之感，传承历史，又不断得进行技术革新。显示了我们网站产品的大气一定的底蕴。如下图6所示/图6标志 Logo2.色彩搭配一网站的吸引力通常不是来自于它的内容，亦非它的布局和结构，而是来自于它的整体色彩，视觉效果，决定了网站访问者对本网站的第一印象，所以，一个网站设计的颜色搭配与这个网站的制作是否成功有着密切的关联。本网站的色调以白色和深褐色为主，给人安静，永恒，理智，诚实的感觉。3.标准字体导航栏的设计就好比人的衣领，它是浏览者在想深入浏览本站时所必看的一个区块。所以其字体选择不易过于花哨，须大小适中，让人一目了然，本站的导航栏字体设置为“宋体”，18px。文字信息所选择的字体是“宋体”，14px。见下图6所示/图6网站导航栏五、详细操作说明（一）网站首页导航栏实现了各个页面之间的相互跳转；移动鼠标至品鉴Baird贝尔德区域，点击“了解更多”，就会跳转到品鉴Baird贝尔德页面，介绍会更加具体。（二）品鉴Baird贝尔德移动鼠标至“品鉴Baird贝尔德”，单击一下，您现在的位置是首页>>品鉴Baird贝尔德。移动鼠标至“木管乐器”，单击一下，下方对应的乐器会变为木管乐器的介绍，再点击“铜管乐器”则会跳转回去，这个效果是引用jquery实现的。鼠标移至商品图片，图片会放大。关键代码如下$(".type li").click(function () { $(this).addClass("active").siblings().removeClass("active"); var index = $(this).index(); $(".conduct").eq(index).addClass("active").siblings().removeClass("active");});鼠标移至商品图片，图片放大代码

• 

  大号

  Tuba CTU-3093

  降B调/Tone bB

  黄铜/Brass Material

  表面漆金/Gold Lacquer

css如下.conduct li .image:hover>img{ transform: scale(1.2); }（三）艺术活动在导航条内找到“艺术活动”，鼠标单击一下，然后您可以进入到首页>>艺术活动。该页面介绍了本站的萨克斯乐器。（四）联系我们在导航条内找到“联系我们”，单击一下，然后您可以进入首页>>联系我们。下方的留言区域，是用html5的标签结合css完成的。代码如下

姓名
电话
邮箱
微信号
地址
留言
	提交

（五）行业新闻移动鼠标至“行业新闻”，点击一下，跳转到行业新闻页面，您现在的位置是首页>>联系我们，它主要有两个部分，全部以列表形式呈现，一部分是比较详细的新闻介绍，浮动在左边，另一部分是热点关注新闻，只有题目。页面如图7所示/图7 行业新闻页面结束语在这次实践过程中本认遇到了诸多困难，比如: 一开始对dreamweaver的掌握并不全面，各种操作功能还不是很了解。之后遇到包括搜索栏的、时间栏的、天气栏的、还有就是滚动图片的，最大的莫过于初始时表格布局没做好，尺寸错了，结果网页乱成一团。这个简单的错误却很致命，因为我花了大量的时间才发现。最后，能成功也是基于此的。所以，认真仔细真的很重要。通过这次网站设计制作激发学习兴趣，促进学习自觉性，做到自己动脑、动手，动口，充分利用网络途径搜集资源，并结合课本知识以及老师的说明指导，然后通过亲身实践操作，创作出集聚个人风格与个性的网站。总体来说，通过这个学期的认真学习，我掌握了很多知识和技能。在本次网站设计制作中，我很珍惜和注重这次学习实践的机会，全心全意投入到网页设计的世界，开始不断的学习和充实自己，去不断的探索和发现，同时去也不断的改正缺点，不停地进行自我完善，在网络的世界中摸索探寻自己的职业技能，积累相关经验以提升自我。经过这一段时间血拼，我终于完成了Baird乐器网站的设计与制作，这是本学期我个人所完成的最有分量的一份作业。在设计与制作的同时也学到了很多，边做边了解它的各个功能，一开始对Dreamweaver软件的功能操作不熟悉，然后逐渐积累和学习，能运用它的来完善我的网站，同时还了解到Fireworks和Flash两个软件的知识，与DW合称“网页三剑客”。看着自己制作的网站越来越成型像样了，成就感油然而生。致谢本网站制作报告是本人在导师的悉心指导下独立完成的。在制作毕业设计的过程中,遇到了很多的问题,在教师的耐心指导下,问题都得以解决。指导老师精湛的专业学识、严谨的工作作风以及精益求精的治学态度,诲人不倦的传统师德,严明律己、宽以待人的行为风范,平易近人的相处态度对本人影响深远。其不仅让本人树立了明确的学习目标、熟练掌握了基本的技能知识,亦使本人学得了许多为人处事的道理。本次毕业设计从选题到制作完成,每一步都是在导师的悉心指导下进行的,倾注了导师很多的心血。在此,谨向导师表示衷心的感谢好崇高的敬意! 附录首页代码
目录

原文链接：http://www.jxszl.com/dzxx/txgc/80190.html