国开《网页设计》实训9响应式网页设计(必做,权重10%)!

资源下载
下载价格:3 金币
下载文件建议用电脑操作,需word打开,手机可能乱码,有问题请联系微信客服解决!

实训9  响应式网页设计

1. 实训目的

本实训的目的是让学生学会借助第三方的前端框架Bootstrap,优化页面的设计及实现一些高级功能。需要掌握Bootstrap环境安装、基本元素的使用,了解高级插件的使用,从而实现响应式网页的设计。

2. 实训内容

本实训的主要内容包括以下几个方面:

登录页面的设计:使用Bootstrap框架的按钮、标签及文本框设计一个登录界面。

页面的跳转:可以通过登录界面,填写用户名、密码点击登录按钮,可通过超链接等方式跳转到另一个界面。

个人介绍页的设计:通过使用Bootstrap框架中的基本元素、导航栏及轮播等设计一个尽可能多的使用框架中技术的个人介绍页的界面。

3. 实训要求

要求学生掌握Bootstrap框架和VSCode的结合,即在VSCode工具中引入Bootstrap框架,并熟练使用框架的基本元素及一些基本插件,了解高级插件的使用。最后通过使用此框架设计一个带有登录界面的个人介绍的前端网站。

4. 实训条件

(1)实验设备:计算机一台。

(2)工具:Visual Studio Code。

(3)其他:笔,实训报告纸。

5. 实训步骤

(1) 设计一个登录页面

使用Bootstrap中的label、input、超链接及button等标签,设计一个可以跳转的登录界面。

(2) 设计个人介绍页

此页面的设计主要涉及导航栏(可以设计多个模块),使用轮播插件可以展示自己的照片等。尽可能多的使用Bootstrap框架中的功能,学生可以自由发挥,设计出富有个性的个人介绍页。

此内容查看价格为3金币,请先
新注册用户随机送2-10金币,如有问题,请联系微信客服解决!
此内容查看价格为3金币,请先
新注册用户随机送2-10金币,如有问题,请联系微信客服解决!
资源下载此资源下载价格为3金币,请先
下载文件建议用电脑操作,需word打开,手机可能乱码,有问题请联系微信客服解决!

社交账号快速登录

微信扫一扫关注
微信扫一扫关注
如已关注,请在公众号内回复“登录”二字获取验证码