《数据采集技术（初级）》实验手册项目2：制作慕课网首页.docx

《《数据采集技术（初级）》实验手册项目2：制作慕课网首页.docx》由会员分享，可在线阅读，更多相关《《数据采集技术（初级）》实验手册项目2：制作慕课网首页.docx（20页珍藏版）》请在优知文库上搜索。

1、项目二：制作慕课网首页实验手册作者：年月日更改控制页序号版本号更改时间更改内容描述填写人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进行慕课网首页界面

2、交互实验步骤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 分析慕课网站中间部分。慕课网中间部分又分为上下两部分，其中上面部分

3、包括切换菜单和轮播图,图5-3中间部分点击左边切换菜单，会弹出相关方向的分类目录，效果如图5-4所示。g Web前代攻城崇. AndrolCHSt(X可 JdvaISKUiPHPKW图54中间部分中分类目录其中： 轮播图可以使用img标签引入对应的图片内容，之后通过JavaScript实现。 轮播图的切换按钮可以使用a标签实现。 轮播图左侧的切换菜单可以使用列表编写。 切换菜单的分类目录中标题可以使用H4标签，分类目录内容可以使用无序列表标签。文字部分可以使用SPan标签。 轮播图下方的图片可以使用img标签。1.2.4尾部部分。慕课网尾部部分是由几个应用的图标组成，效果如图55所示。可以使用

4、a标签和img标签实现。图5-5尾部部分2编写慕课网首页2.1任务描述实现编写慕课首页思路如下：（1）根据任务1中的分析，编写HTML部分。（2）使用CSS对HTML部分进行美化。2.2任务步骤2.2.1编写慕课首页导航部分。编写慕课首页导航部分的HTML代码如下。1-头部左侧内容实战路径实战猿问手记1-头部右侧内容!-输入框前端小白Java11登录注册设置头部样式，CSS核心代码如下。/*页面导航部分*/.header-leftIifloat:left;).header-leftapadding:020px;font-size:16px;)*顶部输入框的样式*/.search-barwidt

5、h: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

6、所示。球酶朝.实战痴司手记皿、臼E入Q登录三图5-6头部效果图2.2.2编写慕课网站首页中间部分。编写中间部分HTML代码如下：1-轮播图1-存放轮播图切换所需的图片><前端开发h4ClaSS=title分类目录基础：HTMLCSSJavaScriptjQuery进阶：Html5/CSS3Node.jsAngularJSBootstrapReactSassLessVue.jsWebApp其他:前端工具!-课程的推荐h4ClaSS=title分类目录职业路径前端小白手册职业路径HTML5与CSS3实现动态网页实战Vue2.0高级实战-开发移动端音乐App实战Web前后端漏洞分析与防御课程携程C4技术分享沙龙后端开发spanclass=,menu-arrow,移动开发数据库云计算&大数据divclass