《数据采集技术（初级）》实验手册项目2：制作慕课网首页.docx
项目二：制作慕课网首页实验手册作者：年月日更改控制页序号版本号更改时间更改内容描述填写人11.02020-5-8建立代敏目录实验目的4实验环境4实验要求4实验步骤4总结与提高17实验一制作慕课网首页实验目的1. 掌握HTML、JavaScriptCSS三种技术的原理与应用;2. 熟悉DreanlweaVer工具的应用。实验环境1. 硬件环境要求PC机至少4G内存，有一定的硬盘空间。2. 软件要求Windows7及以上操作系统DreamWeaVer工具(可选)下载地址：http:ParLxxxx2实验要求1. 使用HTML+CSS制作慕课网首页界面2. 使用JavaScript进行慕课网首页界面交互实验步骤1分析慕课网首页1.1 任务描述分析慕课网布局的思路如下：(1)打开慕课网站首页。(2)分析慕课网站首页布局。(3)确定慕课网站使用的HTML标签。1.2 任务步骤1.2.1 打开慕课网站首页。效果如图5-1所示。开发后铁开发潞动开发'WKa+W8utttPHPKttMUHBitWewnasaw令AnekOid攻城瘴图5-1慕课网首页整体效果图1.2.2 分析慕课网站头部部分。慕课网头部可以分为四部分，分别是log。、导航、输入框、登录和注册入口。效果如图5-2所示。OcMJ、B JMAr)图5-2头部结构1.2.3 分析慕课网站中间部分。慕课网中间部分又分为上下两部分，其中上面部分包括切换菜单和轮播图,图5-3中间部分点击左边切换菜单，会弹出相关方向的分类目录，效果如图5-4所示。g Web前代攻城崇. AndrolCHSt(X可 JdvaISKUiPHPKW图54中间部分中分类目录其中： 轮播图可以使用img标签引入对应的图片内容，之后通过JavaScript实现。 轮播图的切换按钮可以使用a标签实现。 轮播图左侧的切换菜单可以使用列表编写。 切换菜单的分类目录中标题可以使用H4标签，分类目录内容可以使用无序列表标签。文字部分可以使用SPan标签。 轮播图下方的图片可以使用img标签。1.2.4尾部部分。慕课网尾部部分是由几个应用的图标组成，效果如图55所示。可以使用a标签和img标签实现。图5-5尾部部分2编写慕课网首页2.1任务描述实现编写慕课首页思路如下：（1）根据任务1中的分析，编写HTML部分。（2）使用CSS对HTML部分进行美化。2.2任务步骤2.2.1编写慕课首页导航部分。编写慕课首页导航部分的HTML代码如下。<divid="header"><1-头部左侧内容<divclass="header-leftfl,><ul><li><ahref="#"ximgsrc="imguizl.png"><a><li><liclass="margin-l60,><ahref="#">实战<a><li><li><ahref=5">路径<a><li><li><ahref=5">实战<a><li><li><ahref="#">猿问<a><li><li><ahref=5">手记<a><li><ul><div><1-头部右侧内容<divclass="header-rightfr"><!-输入框<divclass="search-barmargin-r60flposition-re"><divid="searchption"><aclass=,search-promptposition-ab"href="#">前端小白<a><aclass="search-promptposition-ableft-70"href="#">Java11<a><div><inputid="searchlnput"type="text"><ahref=,"><imgclass="search-promptposition-abtop-30right-O"src="imguiz4.png"><a><div><ulclass="login-registerfl"><lixahref="#">登录<axli><li><ahref=5">注册<a><li><ul><div><div>设置头部样式，CSS核心代码如下。/*页面导航部分*/.header-leftIifloat:left;).header-leftapadding:020px;font-size:16px;)*顶部输入框的样式*/.search-barwidth:240px;height:60px;)*输入框*/.search-barinputwidth:240px;height:40px;border:Opx;border-bottom:Ipxsolid#ccc;line-height:40px;font-size:14px;padding-left:10px;background:transparent;).search-promptfont-size:14px;z-index:3;)*注册，登录样式*/.login-registerIifloat:left;).login-registerapadding-right:30px;效果如图5-8所示。球酶朝.实战痴司手记皿、臼E入Q登录三图5-6头部效果图2.2.2编写慕课网站首页中间部分。编写中间部分HTML代码如下：<divid="content"class="mainposition-re"><1-轮播图<divclass="bg-carouselposition-ab"><1-存放轮播图切换所需的图片<divid=,list,class="picposition-re"style="left:-1200px,><!-当前左边距为0,Ieft=O,当轮播图左切换到Ieft=O时，马上把Ie代=-3600-><imgsrc="imguiz23.jpg"><imgsrc="imguiz21.jpg"><imgsrc="imgiz22.jpg"><!-left=-3600-><imgsrc="imguiz23.jpg"><!-left=-4800当轮播图右切换到Ieft=-4800时.，马上把left=-1200><imgsrc="imguiz21.jpg"><div><div><!一轮播图的切换按钮-><divclass="pic-module"><aid="next"class="prevright-0"href="#">></a><aid="prev"class=',next"href="#"><</a><div><!-轮播图左侧的切换菜单-><divclass="menuwrap"><ul><liclass="menuwrap-option"><ahref=,W,>前端开发<spanclass=,menu-arrow,>><spana><!-隐藏的div,鼠标移至菜单div显示-><divclass="inner-boximg-backgl5"><1-分类目录-><divclass="sort-list"><h4ClaSS="title"分类目录<h4><ul><li><spandass="fl”>基础：<span><divclass="tag-box"><ahref="">HTMLCSS<a><ahref=',">JavaScript<a><ahref="">jQuery<a><div><li><li><spanCIaSS="fl">进阶：<span><divclass="tag-box,><ahref="#">Html5</a>/<ahref=',">CSS3<a><ahref="">Node.js<a><ahref=',">AngularJS<a><ahref="">Bootstrap<a><ahref=',">React<a><ahref=',">SassLess<a><ahref="">Vue.js<a><ahref="#">WebApp</a><div><li><li><span>其他:</spanxahref="W,>前端工具<a><li><ul><div><!-课程的推荐<divclass="course-recommend"><h4ClaSS="title"分类目录<h4><pclass=,path-recom"><ahref="#"xspanClaSS="cate-tag">职业路径<span>前端小白手册<a><p><pclass=,path-recom"><ahref="#"><spanClaSS="cate-tag">职业路径<span>HTML5与CSS3实现动态网页<a><p><P><ahref="#"><spanClaSS="cate-tag">实战<span>Vue2.0高级实战-开发移动端音乐App<a><p><P><ahref="#"><spanClaSS="cate-tag">实战<span>Web前后端漏洞分析与防御<a><p><P><ahref="#"xspanClaSS="cate-tag">课程<span>携程C4技术分享沙龙<a><p><div><div><li><liclass="menuwrap-option"><ahref='W>后端开发<spanclass=,menu-arrow,<>><spana><!-隐藏的div,鼠标移至菜单div显示内容暂时为空，减少代码量-><divclass="inner-boximg-backgl6"><div><li><liclass="menuwrap-option"><ahref="#">移动开发<spanclass=,menu-arrow,>><spana><divclass="inner-boximg-backgl7"><div><li><liclass="menuwrap-option"><ahref="#">数据库<spanclass=,menu-arrow">><span><a><divclass="inner-boximg-backgl8"><div><li><liclass="menuwrap-option"><ahref=,W,>云计算&大数据<spanclass=",menu-arrow,>><span><a><divclass
