整体流程

目标确立

第一天讨论确定下要做的内容，打算制作传统节日相关的。

因为需要分工合作，使用的工具也都不同，所以不能使用脚手架和webpack来工程化开发。

搭建的目录结构如下：

每个文件夹内留出一个index.html与其他模块进行链接，我负责制作中秋模块。

制作

之后的几天可以直接开写了，我用了vue的一些基础，这样写起来方便，也可以用element-ui，加快速度

比如这个轮播图，手写实在是麻烦

优化

全部完成之后，页面的数据分散在各个页面中，因为js没有采用模块化，所以可以把数据都集中在一个文件中统一管理（我也不清楚这样好不好，反正是这么干了）

制作过程

整体结构

首先肯定要制作整体结构

将结构复制粘贴到各个页面（这里可以优化使用路由，重复的内容实在太多了）

这样剩下的区域放一小点内容就可以了，老师要求写10页，我也不想花太多的时间，只能缩减每个页面的内容了。

素材

素材都是现找的

• 图片直接复制在线地址
• 音乐去网易云下载
• 视频去B站下载然后转码。

B站的视频下载要用到edge浏览器的插件，一搜就有。
下载完之后是flv格式，需要转为mp4格式
在线视频编辑器
这个网页可以处理很多日常的剪辑需要

组件库

组件库使用了element-ui，但这个组件库整体风格跟我想要的不符，很多零碎的部分都来自于bilibili 的一位up主艾恩小灰灰
bilibili艾恩小灰灰的个人首页
艾恩小灰灰的gitee地址
css学艺不精，也没什么美感，实在做不出这么漂亮的效果

新知识

视频和音频

之前没有用过这些东西，也不知道video和audio标签应该怎么用。在这里总结一下。
浏览器新增加的video和audio标签，可以在不使用flash的情况下播放媒体文件，audio（音频）和video（视频）都属于媒体文件。

标签创建

//简单的写法
<audio src="test.mp3"></audio>
<video src="test.mov" width=300 height=300></video>

因为浏览器对不同格式的媒体文件支持程度不同，有更保险的写法

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

<audio controls="controls">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
Your browser does not support this audio format.
</audio>

也可以通过js来创建标签

new Audio();
new Video();

媒体控制

可以使用js来修改以下属性控制媒体

在标签上添加controls属性可以添加默认的音频控件，如果不满意可以通过上面的属性和下面的状态自定义控件。

以上涉及到时间段的字段返回的都是TimeRanges对象，包含length属性和start()/end()方法，length指当前的一个时间段，start()和end()指当前时间段的起始时间点和结束时间点

媒体事件

第三方

不知道有没有更好的替代品
音频使用雅虎播放器
雅虎媒体播放器为您的用户提供的是一个小型的播放按钮，而不是完整的播放器。不过，当您点击该按钮，会弹出完整的播放器。
请注意，这个播放器始终停靠在窗框底部。只需点击它，就可将其滑出。

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

<a href="song1.mp3">Play Song 1</a>
<a href="song2.mp3">Play Song 2</a>

视频使用优酷播放器
如果您希望在网页中播放视频，那么您可以把视频上传到优酷等视频网站，然后在您的网页中插入 HTML 代码即可播放视频：

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" width="480" height="400" type="application/x-shockwave-flash">
</embed>

之后有时间自己定义一个视频、音频的播放器。

排他算法

虽然vue有别的写法，但我觉得还是学习一下的好，js的基础真的太薄弱了。
排他算法的思路就是先将所有元素去除，然后为当前元素添加。

// 获取所有.item元素
let items=document.querySelectorAll('.item');

// 设置选中态样式
function setActive(){ 
   
    // 遍历所有.item元素，移出active样式
    items.forEach((item)=>{ 
   
        item.classList.remove('active');
    })
    // 为当前选中项添加active样式
    this.classList.add('active');
}
// 遍历所有.item元素，分别为其设置点击事件
items.forEach((item)=>{ 
   
    item.addEventListener('click',setActive);
})

可以封装成函数

function removeOtherClass (selector, className){ 
   
	let items = document.querySelectorAll(selector);
	items.forEach(item => { 
   
		item.addEventListener('click',setActive);
	})

	function setActive(){ 
   
	    // 遍历所有.item元素，移出active样式
	    items.forEach((item)=>{ 
   
	        item.classList.remove(className);
	    })
	    // 为当前选中项添加active样式
	    this.classList.add(selector);
	}
}

一些css样式

css真的有太多没见过的属性了，艾恩小灰灰让我大开眼界。

1. background-size

/* 背景图片保持原有尺寸比例，裁切长边 */
  background-size: cover;

2. object-fie

  /* 保持原有尺寸比例，裁切长边 */
  object-fit: cover;

3. scroll-snap-type

father{ 
   
	  /* 设置滚动贴合的方式：沿Y轴滚动 mandatory表示强制滚动 */
  scroll-snap-type: y mandatory;
  /* 需要把滚动条设置到直接父容器，scroll-snap-type才能生效 */
  /* 溢出时，垂直保留滚动条，水平隐藏滚动条 */
  overflow-y: scroll;
  overflow-x: hidden;
}

son { 
   
	/* 设置下一页的内容会滚动贴合到顶部 */
  scroll-snap-align: start;
}

其实并没有太多新的css属性，主要原因在于某些css的组合做出了漂亮的效果。

font-awesome

虽然有阿里的icon-font，但多学一个总是不亏的。
这也是一个字体图标库。
很详细很基础的教程，与阿里的icon-font差别不大
font-awesome基础用法

今天的文章大二网页制作实习总结分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。