《Web应用基础》课程结业报告

最新推荐文章于 2024-05-18 11:09:56 发布

宇航员145

最新推荐文章于 2024-05-18 11:09:56 发布

阅读量69

点赞数

分类专栏： web 文章标签：前端

本文链接：https://blog.csdn.net/weixin_62856358/article/details/131235400

版权

web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

《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课学习过程中，我对前端开发产生了浓厚兴趣，也许是因为我接触时间短，而且只学到了皮毛，所以才会觉得这项技术很简单很能带来成就感，但不可否认，我感受到的确实是开心和充足。
前端设计就像老师最开始授课时所说，容易上手，但要学精学细却要付出更多努力和精力，与时俱进、不断更新和拓展自己的技术，以此到达熟能生巧、炉火纯青的地步。
感谢王老师带我进入前端设计的世界。