《Web应用基础》课程结业报告
目录
前言
这次Web课程大作业是要设计一个静态网站或动态网站,并部署到网站托管服务器上,主要目的是练习CSS框架。我选择了较为简单的静态网站,来对这次课程的学习画上一个暂时的句号。
一、网站主题及结构
这次的网站主题我选择介绍我比较喜欢的小众音乐风格——说唱,希望能让大家对说唱这种街头艺术有更多了解,在情绪困扰时可以听这种释放型的音乐来放松自己。
网页结构我采用了Bootstrap的CSS框架。
二、开发环境及工具
设备16GB、64位操作系统笔记本,软件Visual Studio Code。
三、遇到的问题及解决方法
- 第一个问题是挑CSS框架时原本想选最熟悉的教学网上的MDB框架,因为之前练习过实例,结果设备出了点问题一直配置不好,重新下载也无济于事,最终放弃,选择了也接触过一点的Bootstrap,模仿网上的例子写了一段。
- 第二个问题是想在静态页面稍微做一些动态的设计,看过几个实例后决定在首页设计一个轮播图。于是用了swiper插件,下载和插入到HTML文件中都很顺利,不过一些具体的轮播形式还是要参考插件的帮助文档。例:
<div class="swiper-wrapper"><div class="swiper-slide"><img src="./images/geisongyuetingdexin.png" alt=""></div>
- 第三个问题是将网页挂载到GitHubpage上,刚开始一直不成功,找的教程里边有选主题选项,我的页面却没有。查了下知道错误在哪但是不会改,于是我又找了别的教程一步步地进行,但总是有新的地方出错。一次次推翻重头再来,试了很多方法,下载了GitHub Desktop,从网页版和桌面版两边尝试,一遍遍重新上传,折腾了好久终于成功了。
四、网站源码展示【部分】
1.HTML文件
这次一共做了五个HTML文件,每个文件都是一个单独页面的内容。
2.CSS文件
这次把CSS框架都放在一个文件中,看着有点乱。
3.JS文件
这次js文件用得少,主要是最后的页面设计了几个音频。
document.addEventListener('DOMContentLoaded', function () {
var songList = document.querySelector('.songList'),
btnPlay = songList.querySelectorAll('.btn-play'),
fixedSong = document.querySelector('.fixedSong audio'),
songSrc = [
'images/xiaohetangshui.mp3',
'images/chuleshuochang.mp3',
'images/longlidiansi.mp3',
'images/xingkongquaiqu.mp3',
'images/taimeiyisile.mp3'
]
btnPlay.forEach((item, index) => {
item.songSrc = songSrc[index]
})
songList.addEventListener('click', function (e) {
if (e.target.className != 'btn-play') return
fixedSong.src = e.target.songSrc
fixedSong.play()
})
})
4.images
找图片这次费了不少功夫,因为图片尺寸和页面适配度是密切相关的,所以一致且高清的照片挺难找的,尤其是首页设计的轮播banner。虽然最终艰难完成,但图片高清度还是有问题。
五、网站页面展示【部分】
首页有一个轮播图的设计,鼠标点击图片下方的横条即可跳转不同banner。
首页下滑长页面有几个板块内容,鼠标移到图片上会显示视频播放效果的按钮,但此处并没有设置视频播放功能,只是样式。
歌曲页面应用js插入了音频,可以实现播放。
登录界面及底部的作业报告链接
页面之间可以通过点击实现跳转
总结
在这次Web课学习过程中,我对前端开发产生了浓厚兴趣,也许是因为我接触时间短,而且只学到了皮毛,所以才会觉得这项技术很简单很能带来成就感,但不可否认,我感受到的确实是开心和充足。
前端设计就像老师最开始授课时所说,容易上手,但要学精学细却要付出更多努力和精力,与时俱进、不断更新和拓展自己的技术,以此到达熟能生巧、炉火纯青的地步。
感谢王老师带我进入前端设计的世界。