大二网页制作实习总结
整體流程
目標(biāo)確立
第一天討論確定下要做的內(nèi)容，打算制作傳統(tǒng)節(jié)日相關(guān)的。
因?yàn)樾枰止ず献?#xff0c;使用的工具也都不同，所以不能使用腳手架和webpack來(lái)工程化開發(fā)。
搭建的目錄結(jié)構(gòu)如下：
每個(gè)文件夾內(nèi)留出一個(gè)index.html與其他模塊進(jìn)行鏈接，我負(fù)責(zé)制作中秋模塊。
制作
之后的幾天可以直接開寫了，我用了vue的一些基礎(chǔ)，這樣寫起來(lái)方便，也可以用element-ui，加快速度
比如這個(gè)輪播圖，手寫實(shí)在是麻煩
優(yōu)化
全部完成之后，頁(yè)面的數(shù)據(jù)分散在各個(gè)頁(yè)面中，因?yàn)閖s沒有采用模塊化，所以可以把數(shù)據(jù)都集中在一個(gè)文件中統(tǒng)一管理（我也不清楚這樣好不好，反正是這么干了）
制作過(guò)程
整體結(jié)構(gòu)
首先肯定要制作整體結(jié)構(gòu)
將結(jié)構(gòu)復(fù)制粘貼到各個(gè)頁(yè)面（這里可以優(yōu)化使用路由，重復(fù)的內(nèi)容實(shí)在太多了）
這樣剩下的區(qū)域放一小點(diǎn)內(nèi)容就可以了，老師要求寫10頁(yè)，我也不想花太多的時(shí)間，只能縮減每個(gè)頁(yè)面的內(nèi)容了。
素材
素材都是現(xiàn)找的
- 圖片直接復(fù)制在線地址
- 音樂去網(wǎng)易云下載
- 視頻去B站下載然后轉(zhuǎn)碼。
B站的視頻下載要用到edge瀏覽器的插件，一搜就有。
下載完之后是flv格式，需要轉(zhuǎn)為mp4格式
在線視頻編輯器
這個(gè)網(wǎng)頁(yè)可以處理很多日常的剪輯需要
組件庫(kù)
組件庫(kù)使用了element-ui，但這個(gè)組件庫(kù)整體風(fēng)格跟我想要的不符，很多零碎的部分都來(lái)自于bilibili 的一位up主艾恩小灰灰
bilibili艾恩小灰灰的個(gè)人首頁(yè)
艾恩小灰灰的gitee地址
css學(xué)藝不精，也沒什么美感，實(shí)在做不出這么漂亮的效果
新知識(shí)
視頻和音頻
之前沒有用過(guò)這些東西，也不知道video和audio標(biāo)簽應(yīng)該怎么用。在這里總結(jié)一下。
瀏覽器新增加的video和audio標(biāo)簽，可以在不使用flash的情況下播放媒體文件，audio（音頻）和video（視頻）都屬于媒體文件。
標(biāo)簽創(chuàng)建
//簡(jiǎn)單的寫法 <audio src="test.mp3"></audio> <video src="test.mov" width=300 height=300></video>因?yàn)闉g覽器對(duì)不同格式的媒體文件支持程度不同，有更保險(xiǎn)的寫法
<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>也可以通過(guò)js來(lái)創(chuàng)建標(biāo)簽
new Audio(); new Video();媒體控制
可以使用js來(lái)修改以下屬性控制媒體
| src | 媒體資源的路徑 |
| play() | 播放媒體資源 |
| pause() | 暫停媒體資源 |
| currentTime | 指定播放器應(yīng)該跳過(guò)播放的時(shí)間，單位秒，取值區(qū)間為initialTime和duration之間 |
| volume | 設(shè)置音量，0~1 |
| muted | 為true進(jìn)入靜音模式 |
| playbackRate | 指定媒體播放速度，0~1表示慢放，1正常，大于1快進(jìn)，為負(fù)表示回退 |
| controls | 為true時(shí)表示顯示播放控件 |
| loop | 為true時(shí)表示循環(huán)播放 |
| proload | 指定用戶在開始播放媒體之前，是否或者多少媒體內(nèi)容需要預(yù)加載：其值有以下幾種：1、none：不需要預(yù)加載2、metadata：加載諸如時(shí)長(zhǎng)、比特率、幀大小這樣的元數(shù)據(jù)，而非媒體數(shù)據(jù)3、auto：預(yù)加載瀏覽器認(rèn)為適量的媒體內(nèi)容（默認(rèn)值） |
| autoplay | 為true時(shí)自動(dòng)播放媒體，此屬性為true相當(dāng)于高度瀏覽器需要預(yù)加載媒體內(nèi)容 |
在標(biāo)簽上添加controls屬性可以添加默認(rèn)的音頻控件，如果不滿意可以通過(guò)上面的屬性和下面的狀態(tài)自定義控件。
| paused | 如果是暫停狀態(tài)，返回true |
| seeking | 如果播放器正跳到一個(gè)新的播放點(diǎn)，返回true |
| ended | 播放完畢并且停下來(lái)了返回true |
| duration | 媒體時(shí)長(zhǎng)，單位秒，如果在元數(shù)據(jù)未加載之前查詢此屬性，返回NaN |
| initialTime | 已經(jīng)緩存的數(shù)據(jù)的最早時(shí)間以及能夠回退到的最早時(shí)間 |
| played | 返回已經(jīng)播放的時(shí)間段 |
| buffered | 返回當(dāng)前已經(jīng)緩沖的時(shí)間段 |
| seekable | 返回當(dāng)前播放器需要跳到的時(shí)間段 |
以上涉及到時(shí)間段的字段返回的都是TimeRanges對(duì)象，包含length屬性和start()/end()方法，length指當(dāng)前的一個(gè)時(shí)間段，start()和end()指當(dāng)前時(shí)間段的起始時(shí)間點(diǎn)和結(jié)束時(shí)間點(diǎn)
媒體事件
| loadstart | 當(dāng)媒體元素開始請(qǐng)求媒體資源的時(shí)候觸發(fā) |
| progress | 正在通過(guò)網(wǎng)絡(luò)加載媒體資源的時(shí)候觸發(fā)，此事件一般每秒觸發(fā)2-8次 |
| loadedmetadata | 元數(shù)據(jù)加載完畢時(shí)觸發(fā) |
| loadeddata | 當(dāng)前播放位置的媒體內(nèi)容首次加載完畢 |
| canplay | 已經(jīng)加載一些媒體內(nèi)容，可以開始播放，但需要緩沖更多數(shù)據(jù)，此時(shí)readyState為HAVE_CURRENT_DATA |
| canplaythrough | 所有媒體內(nèi)容已加載完畢，可以流暢播放 |
| suspend | 已經(jīng)緩沖大量數(shù)據(jù)，可以暫停下載，此時(shí)NetworkState為NETWORK_IDLE |
| stalled | 嘗試加載數(shù)據(jù)，但無(wú)法獲取到數(shù)據(jù)，此時(shí)NetworkState為NETWORK_LOADING |
| play | 調(diào)用play()方法或設(shè)置相應(yīng)的autoplay屬性為true時(shí)觸發(fā)，如果已經(jīng)加載了足夠多的緩存，緊接著會(huì)觸發(fā)palying事件，否則觸發(fā)waiting事件 |
| waiting | 由于未緩存足夠的數(shù)據(jù)，導(dǎo)致播放未能開始或者播放停止 |
| playing | 已經(jīng)開始播放媒體文件 |
| timeupdate | currentTime屬性發(fā)生改變時(shí)觸發(fā)，此事件每秒會(huì)觸發(fā)4-60次 |
| pause | 調(diào)用pause()方法時(shí)觸發(fā) |
| seeking | 通過(guò)腳本或用戶通過(guò)播放控件將當(dāng)前播放時(shí)間調(diào)至一個(gè)還未緩沖的時(shí)間點(diǎn)，導(dǎo)致在內(nèi)容沒有加載完時(shí)，停止播放。此時(shí)seeking屬性值為true |
| seeked | seeking值又變?yōu)閒alse |
| ended | 播放完畢時(shí)，播放停止時(shí)觸發(fā) |
| durationchange | duration屬性發(fā)生變化時(shí)觸發(fā) |
| volumechange | 聲音發(fā)生變化時(shí)觸發(fā) |
| ratechange | playbackRate或defaultPlaybakcRate發(fā)生改變時(shí)觸發(fā) |
| abort | 用戶要求停止加載媒體內(nèi)容時(shí)觸發(fā),此時(shí)error.code為MEDIA_ERR_ABORTED |
| error | 由于發(fā)生網(wǎng)絡(luò)錯(cuò)誤或者其它錯(cuò)誤阻止媒體內(nèi)容的加載時(shí)觸發(fā)，此時(shí)error.code不會(huì)是MEDIA_ERR_ABORTED |
| emptied | 發(fā)生了錯(cuò)誤或者中止，導(dǎo)致networkState屬性值又變回MEDIA_ERR_ABORTED |
第三方
不知道有沒有更好的替代品
音頻使用雅虎播放器
雅虎媒體播放器為您的用戶提供的是一個(gè)小型的播放按鈕，而不是完整的播放器。不過(guò)，當(dāng)您點(diǎn)擊該按鈕，會(huì)彈出完整的播放器。
請(qǐng)注意，這個(gè)播放器始終停靠在窗框底部。只需點(diǎn)擊它，就可將其滑出。
視頻使用優(yōu)酷播放器
如果您希望在網(wǎng)頁(yè)中播放視頻，那么您可以把視頻上傳到優(yōu)酷等視頻網(wǎng)站，然后在您的網(wǎng)頁(yè)中插入 HTML 代碼即可播放視頻：
之后有時(shí)間自己定義一個(gè)視頻、音頻的播放器。
排他算法
雖然vue有別的寫法，但我覺得還是學(xué)習(xí)一下的好，js的基礎(chǔ)真的太薄弱了。
排他算法的思路就是先將所有元素去除，然后為當(dāng)前元素添加。
可以封裝成函數(shù)
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);})// 為當(dāng)前選中項(xiàng)添加active樣式this.classList.add(selector);} }一些css樣式
css真的有太多沒見過(guò)的屬性了，艾恩小灰灰讓我大開眼界。
其實(shí)并沒有太多新的css屬性，主要原因在于某些css的組合做出了漂亮的效果。
font-awesome
雖然有阿里的icon-font，但多學(xué)一個(gè)總是不虧的。
這也是一個(gè)字體圖標(biāo)庫(kù)。
很詳細(xì)很基礎(chǔ)的教程，與阿里的icon-font差別不大
font-awesome基礎(chǔ)用法
總結(jié)
以上是生活随笔為你收集整理的大二网页制作实习总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 哈工大软件构造lab1
- 下一篇： 用ajax实现dropdownlist多