（課設(shè)）HTML+CSS+JavaScript網(wǎng)站的設(shè)計(jì)與開發(fā)

時(shí)間：2022-08-22 11:24:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2022-08-22 11:24:01 來源：網(wǎng)站運(yùn)營

1 課設(shè)題目

基于HTML+CSS+JavaScript網(wǎng)站的設(shè)計(jì)與開發(fā)

2 課設(shè)目的

通過本課程設(shè)計(jì)，學(xué)生需要掌握web前端開發(fā)技術(shù)的基本技能和專業(yè)能力，培養(yǎng)學(xué)生如下技能：

知識(shí)目標(biāo)：復(fù)習(xí)、鞏固Web前端的基礎(chǔ)知識(shí)，進(jìn)一步加深對(duì)Web前端技術(shù)的理解和掌握；

能力目標(biāo)：理解網(wǎng)站設(shè)計(jì)的四個(gè)階段：網(wǎng)站的前期準(zhǔn)備、網(wǎng)站的結(jié)構(gòu)架設(shè)、網(wǎng)站的效果設(shè)計(jì)和網(wǎng)站的人機(jī)交互，綜合應(yīng)用 HTML、CSS、JavaScript等技術(shù)來開發(fā)網(wǎng)站；

素養(yǎng)目標(biāo)：課程設(shè)計(jì)為學(xué)生提供了一個(gè)既動(dòng)手又動(dòng)腦，獨(dú)立實(shí)踐的機(jī)會(huì)，將課本上的理論知識(shí)和實(shí)際有機(jī)的結(jié)合起來，鍛煉學(xué)生的分析 解決實(shí)際問題的能力。培養(yǎng)學(xué)生在項(xiàng)目開發(fā)中團(tuán)隊(duì)合作精神、創(chuàng)新意識(shí)及能力。

3 選題依據(jù)及內(nèi)容

我做的是我自己想做的一個(gè)MIUI 10的官網(wǎng)。我是參考小米原MIUI 10官網(wǎng)的設(shè)計(jì)，然后加入了自己的想法做的。這個(gè)網(wǎng)頁的制作包含了我們所學(xué)的浮動(dòng)，定位，JavaScript等等，還有一些我們未學(xué)過的知識(shí)。當(dāng)親自動(dòng)手自己做網(wǎng)頁的時(shí)候并沒有自己想想的那么簡(jiǎn)單也沒有那么的難，從一開的無從下手到最后的完成，中間我在網(wǎng)上搜索大量的知識(shí)和操作，還在書上資料尋找那些解決問題的辦法。通過動(dòng)手實(shí)踐，覺得我有點(diǎn)喜歡敲代碼了，很有成就感，并且對(duì)所學(xué)的知識(shí)進(jìn)行了鞏固，還學(xué)了更有意思和難度的方法。

下面就是我所選做的MIUI 10網(wǎng)頁主頁，MIUI 10介紹子頁，登錄注冊(cè)頁和下載頁這四個(gè)頁面。

4 設(shè)計(jì)過程

4.1 總體設(shè)計(jì)

我認(rèn)為做一個(gè)網(wǎng)站首先要明白它的網(wǎng)頁設(shè)計(jì)步驟:

• 確定網(wǎng)站主題
• 分析網(wǎng)站的功能，將網(wǎng)站所有的功能在文檔中體現(xiàn)。
• 分析網(wǎng)站的主題，選擇符合網(wǎng)站主題的方法。

編寫步驟：

• 先用html寫出結(jié)構(gòu)。
• 用CSS寫出樣式。
• 用js寫出動(dòng)態(tài)效果。

4.2 詳細(xì)設(shè)計(jì)

4.2.1 MIUI官方網(wǎng)站

一，整體分析

二、局部分析

（1）分析效果圖

網(wǎng)頁的頭部為選項(xiàng),以及主頁面和子頁面的超鏈接?？梢酝?br>
表單來定義，需要在表單外加一層大盒子。

（2）準(zhǔn)備圖片素材

根據(jù)原網(wǎng)頁的觀察，其背景圖片即黑底，所以不需要圖片素材，只需要將盒子的背景顏色定義為黑色，各個(gè)

• 內(nèi)的字體顏色#666（偏白）。
  （3）搭建結(jié)構(gòu)
  在html頁面添加結(jié)構(gòu)代碼。定義head的兩對(duì)
  
  標(biāo)簽，內(nèi)嵌和

來設(shè)置單元格，插入導(dǎo)航欄。




（4）控制樣式

設(shè)置單元格的寬和高。以及內(nèi)邊距padding。文字都設(shè)為超鏈接<a href=

“”>;在鼠標(biāo)點(diǎn)到單元格上時(shí)，單元格的背景色background-color變紅,同時(shí)還要清除超鏈接的格式。







（1）分析效果圖

大型MIUI10海報(bào)。

（2）準(zhǔn)備圖片素材

從原網(wǎng)頁按照原始比例截取。

（3）搭建結(jié)構(gòu)

在html頁面添加結(jié)構(gòu)代碼。定義

盒子，在里面放入原網(wǎng)頁比例大小海報(bào)，并為其添加跳轉(zhuǎn)下載頁的超鏈接。
（4）控制樣式
設(shè)置盒子及海報(bào)圖居中，位置居中。



(1）分析效果圖
主頁的三個(gè)分欄頁，分別跳轉(zhuǎn)到不同的頁面。
（2）準(zhǔn)備圖片素材
從原網(wǎng)頁內(nèi)鏈接下載。
（3）搭建結(jié)構(gòu)
在html頁面添加結(jié)構(gòu)代碼。先定義一個(gè)最大的盒子，里面有三個(gè)小盒子，通過左浮動(dòng)使得小盒子并排排列。每個(gè)盒子里面放入相應(yīng)圖片和內(nèi)容，并為其加超鏈接，使其跳轉(zhuǎn)至相應(yīng)內(nèi)容。
（4）控制樣式
設(shè)置單元格的寬和高。以及內(nèi)邊距padding。文字都設(shè)為超鏈接;在鼠標(biāo)點(diǎn)到單元格上時(shí)，單元格的背景色background-color變深,同時(shí)還要清除超鏈接的格式


（1）分析效果圖
包括原網(wǎng)站網(wǎng)址和個(gè)人信息
（2）搭建結(jié)構(gòu)
在html頁面添加結(jié)構(gòu)代碼。定義一對(duì)

標(biāo)簽，來控制盒子。
（3）準(zhǔn)備圖片素材
無
（4）控制樣式
控制盒子的寬和高，以及內(nèi)邊距padding。以及外邊距margin讓信息和版權(quán)居中
4.2.2 小米賬號(hào)登陸/注冊(cè)



（1）分析效果圖
網(wǎng)頁的頭部為選項(xiàng),以及主頁面和子頁面的超鏈接?？梢酝?br>表單來定義，需要在表單外加一層大盒子。
（2）準(zhǔn)備圖片素材
根據(jù)原網(wǎng)頁的觀察，其背景圖片即黑底，所以不需要圖片素材，只需要將盒子的背景顏色定義為黑色，各個(gè)
內(nèi)的字體顏色#666（偏白）。
（3）搭建結(jié)構(gòu)
在html頁面添加結(jié)構(gòu)代碼。定義head的兩對(duì)

標(biāo)簽，內(nèi)嵌和

來設(shè)置單元格，插入導(dǎo)航欄。
（4）控制樣式
設(shè)置單元格的寬和高。以及內(nèi)邊距padding。文字都設(shè)為超鏈接<a href=
“”>;在鼠標(biāo)點(diǎn)到單元格上時(shí)，單元格的背景色background-color變紅,同時(shí)還要清除超鏈接的格式。






1 分析效果圖
建一個(gè)一個(gè)大盒子插曲背景圖片。大盒子嵌套一個(gè)小盒子，然后小盒子里面有多個(gè)盒子，并以表格形式編寫登陸界面樣式。插入小圖標(biāo)和超鏈接。
2 準(zhǔn)備圖片素材
準(zhǔn)備小圖標(biāo)圖片及大背景圖片
3 搭建結(jié)構(gòu)
在html頁面添加結(jié)構(gòu)代碼。定義head的兩對(duì)

標(biāo)簽，內(nèi)嵌和
來設(shè)置單元格，插入按鈕。
4 控制樣式
設(shè)置單元格的寬和高。以及內(nèi)邊距padding。文字都設(shè)為超鏈接;在鼠標(biāo)點(diǎn)到單元格上時(shí)，單元格的背景色background-color變白色字體色變黑色,同時(shí)還要清除超鏈接的格式。用type和value來手機(jī)號(hào)登錄和注冊(cè)。
用js語言控制當(dāng)鼠標(biāo)從輸入欄移走時(shí)若無輸入，網(wǎng)頁彈出相應(yīng)提醒（見上面效果圖）。
4.23 MIUI 10
一，整體分析



二，局部分析



1 分析效果圖
網(wǎng)頁的頭部為選項(xiàng),以及主頁面和子頁面的超鏈接?？梢酝?br>表單來定義，需要在表單外加一層大盒子。
2 準(zhǔn)備圖片素材
根據(jù)原網(wǎng)頁的觀察，其背景圖片即黑底，所以不需要圖片素材，只需要將盒子的背景顏色定義為黑色，各個(gè)
內(nèi)的字體顏色#666（偏白）。
3 搭建結(jié)構(gòu)
在html頁面添加結(jié)構(gòu)代碼。定義head的兩對(duì)

標(biāo)簽，內(nèi)嵌和

來設(shè)置單元格，插入導(dǎo)航欄。
4 控制樣式
設(shè)置單元格的寬和高。以及內(nèi)邊距padding。文字都設(shè)為超鏈接<a href=
“”>;在鼠標(biāo)點(diǎn)到單元格上時(shí)，單元格的背景色background-color變紅,同時(shí)還要清除超鏈接的格式。



1 分析效果圖
網(wǎng)頁的宣傳海報(bào)，其超鏈接指向MIUI 10的宣傳視頻。
2 準(zhǔn)備圖片素材
按照原網(wǎng)頁比例截取，視頻從原網(wǎng)頁下載。
3 搭建結(jié)構(gòu)
在html頁面添加結(jié)構(gòu)代碼。用盒子控制海報(bào)的大小和位置。
4 控制樣式
設(shè)置單元格的寬和高。以及內(nèi)邊距padding，外邊距margin。



1 分析效果圖
MIUI 10的特色之一，白噪音類型介紹輪播圖
2 準(zhǔn)備圖片素材
按照原網(wǎng)頁比例截取。
3 搭建結(jié)構(gòu)
在html頁面添加結(jié)構(gòu)代碼。用盒子控制海報(bào)的大小和位置。
4 控制樣式
設(shè)置單元格的寬和高。以及內(nèi)邊距padding，外邊距margin。使得輪播圖按要求在網(wǎng)頁中顯示。用js控制圖片的輪播的速度與方式。















1 分析效果圖
對(duì)MIUI 10 的各個(gè)特色功能的介紹和分析
2 搭建結(jié)構(gòu)
在html頁面添加結(jié)構(gòu)代碼。定義一對(duì)

標(biāo)簽，來控制盒子。在盒子內(nèi)加入相應(yīng)功能的圖片及文字介紹。
3 準(zhǔn)備圖片素材
原網(wǎng)頁同比例圖片通過截取和原網(wǎng)頁下載獲得。
4 控制樣式
控制盒子的寬和高，以及內(nèi)邊距padding。同時(shí)注意文字與圖片的和諧性，不斷通過邊距及字體樣式進(jìn)行調(diào)整。



1 分析效果圖
對(duì)MIUI 10 的運(yùn)行效率測(cè)評(píng)視頻以及對(duì)小米AI在實(shí)際生活中應(yīng)用便利性的介紹。
2 搭建結(jié)構(gòu)
在html頁面添加結(jié)構(gòu)代碼。定義一對(duì)

標(biāo)簽，來控制盒子。在盒子內(nèi)video標(biāo)簽插入視頻以及文字介紹，注意：在加入視頻時(shí)video標(biāo)簽在IE兼容性存在問題，還要加入control和loop控件。
3 準(zhǔn)備圖片素材
原網(wǎng)頁下載相應(yīng)視頻。
4 控制樣式
控制盒子的寬和高，以及內(nèi)邊距padding。同時(shí)注意文字與視頻的和諧性，不斷通過邊距及字體樣式進(jìn)行調(diào)整。



1 分析效果圖
包括原網(wǎng)站網(wǎng)址和個(gè)人信息
2 搭建結(jié)構(gòu)
在html頁面添加結(jié)構(gòu)代碼。定義一對(duì)

標(biāo)簽，來控制盒子。
3 準(zhǔn)備圖片素材
無
4 控制樣式
控制盒子的寬和高，以及內(nèi)邊距padding。以及外邊距margin讓信息和版權(quán)居中
4.24 MIUI 10 下載頁
一，總體介紹



二，局部介紹



1 分析效果圖
網(wǎng)頁的頭部為選項(xiàng),以及主頁面和子頁面的超鏈接?？梢酝?br>表單來定義，需要在表單外加一層大盒子。
2 準(zhǔn)備圖片素材
根據(jù)原網(wǎng)頁的觀察，其背景圖片即黑底，所以不需要圖片素材，只需要將盒子的背景顏色定義為黑色，各個(gè)
內(nèi)的字體顏色#666（偏白）。
3 搭建結(jié)構(gòu)
在html頁面添加結(jié)構(gòu)代碼。定義head的兩對(duì)

標(biāo)簽，內(nèi)嵌和

來設(shè)置單元格，插入導(dǎo)航欄。
4 控制樣式
設(shè)置單元格的寬和高。以及內(nèi)邊距padding。文字都設(shè)為超鏈接<a href=
“”>;在鼠標(biāo)點(diǎn)到單元格上時(shí)，單元格的背景色background-color變紅,同時(shí)還要清除超鏈接的格式。



1 分析效果圖
主體內(nèi)容包含下載標(biāo)題欄，以及各個(gè)機(jī)型的MIUI 10的下載跳轉(zhuǎn)鏈接（考慮到和諧性，在尾部加了一個(gè)視頻彌補(bǔ)空缺）。
2 準(zhǔn)備圖片素材
從原網(wǎng)頁源代碼中獲取的圖片下載鏈接下載，視頻則由網(wǎng)易云提供。
3 搭建結(jié)構(gòu)
在html頁面添加結(jié)構(gòu)代碼。定義多對(duì)

標(biāo)簽，來控制上中下的盒子。
4 控制樣式
需要通過盒子嵌套以及盒子內(nèi)外邊距進(jìn)行調(diào)整以達(dá)到整體對(duì)頁面居中的樣式。



1 分析效果圖
主體內(nèi)容包含信息和版權(quán)。
2 搭建結(jié)構(gòu)
在html頁面添加結(jié)構(gòu)代碼。定義一對(duì)

標(biāo)簽，來控制盒子。內(nèi)嵌和
來設(shè)置單元格。
3 準(zhǔn)備圖片素材
4 控制樣式
控制盒子的寬和高，以及內(nèi)邊距padding。以及外邊距margin讓信息和版權(quán)居中。
5調(diào)試過程
用QQ瀏覽器和IE打開，看網(wǎng)頁上的效果是否是自己所需要的，存不存在不兼容的問題，沒達(dá)到的效果或有兼容性問題再在編譯器中進(jìn)行調(diào)試。
在制作主頁面時(shí)，鼠標(biāo)放在超鏈接上不能出現(xiàn)背景顏色，通過查閱資料，知道在加樣式的時(shí)候，是在ul上加樣式，而不是在a,表示當(dāng)鼠標(biāo)放在單元格時(shí)，出現(xiàn)單元格的背景顏色。做輪播圖的時(shí)候一點(diǎn)思路都沒有。在網(wǎng)上借鑒了很多，還是沒有理解，后來老師講過之后，又問了一些同學(xué)，終于把我想要的輪播圖做出來了。
在制作登錄界面時(shí),注冊(cè)和登錄按鈕的長度及背景不能出來，這是需要使用display屬性block屬性值，讓按鈕本身的樣式不顯示出來，才能進(jìn)行樣式的添加。且判斷輸入框是否為空的JS語句不被調(diào)用，最后詢問老師發(fā)現(xiàn)原來是沒有加調(diào)用語句。
在制作banner動(dòng)效時(shí)，在插入完所有圖片之后，圖片都顯示在頁面上，沒有讓需要轉(zhuǎn)換的圖片隱藏，查看課本后知道要用display屬性進(jìn)行隱藏。最先是看課本上的代碼去理解，但是，一直不能成功，后來用老師使用的方法，沒出現(xiàn)什么太大的問題。
在插入視頻時(shí)，首先使用的時(shí)embed標(biāo)簽，后來發(fā)現(xiàn)IE兼容不了，而后改用video標(biāo)簽，發(fā)現(xiàn)仍存在兼容問題，經(jīng)過查找資料，發(fā)現(xiàn)原來是video的格式控件在IE需要用明確代碼寫出來。
寫登陸注冊(cè)頁面時(shí)，出現(xiàn)多次js語句不調(diào)用的情況，后來求助于老師，發(fā)現(xiàn)判斷條件不足，最后加了判斷條件解決了。
6 收獲及體會(huì)
動(dòng)手寫了一個(gè)網(wǎng)站之后，除了讓自己的技術(shù)上得以提升，在敲代碼的整體思路和步驟上也有了收獲。而且有了很棒的成就感。在之前敲代碼的時(shí)候，沒有先進(jìn)行整體構(gòu)思，就直接敲，也沒有思路，沒有想法。在剛開始做這個(gè)網(wǎng)站的時(shí)候，我還是有以前的壞習(xí)慣，直接寫，但是發(fā)現(xiàn)效率太慢。
后來我就看到頁面的時(shí)候，先看頁面，想一下把頁面分成幾個(gè)部分，用幾個(gè)div盒子做出整個(gè)網(wǎng)頁的結(jié)構(gòu)；然后在看每個(gè)部分的div盒子，需要在里邊添上什么內(nèi)容,是表格還是超鏈接，還是要插入圖片；在加入這些內(nèi)容的時(shí)候我需要用什么方法；整個(gè)頁面的結(jié)構(gòu)出來之后，去考慮需要添加什么樣式；需要加動(dòng)效的就想一想，需要添加的是什么動(dòng)效，需要用什么方法。在心里邊有個(gè)大概需要敲什么的思路再去動(dòng)手，這樣的效率高了很多。在每做完一個(gè)步驟之后就查看調(diào)試一下，對(duì)不理想的地方進(jìn)行修改。
做完網(wǎng)站之后，我有一個(gè)特別深切的體會(huì)。在做一個(gè)網(wǎng)站的時(shí)候，就像在建一幢大樓，html就像是大樓的地基，要打牢；然后css就像是對(duì)整個(gè)大樓的樣式進(jìn)行設(shè)計(jì)；js就像最后對(duì)房間進(jìn)行裝修、住人。不僅在構(gòu)造上，在思想上也像在建大樓，一步一步慢慢來，一點(diǎn)都急不得。在把一個(gè)方法寫好，整個(gè)網(wǎng)頁出來之后，會(huì)很有成就感。雖然來起來沒有很高大上，但是這次課設(shè)讓我對(duì)我的專業(yè)有了更深一層的了解。
在網(wǎng)頁制作時(shí)遇到的最大的難題就是盒子的擺放和視頻插入，還好在老師和同學(xué)的幫助下解決了盒子擺放問題，而視頻插入則是在查閱大量資料和網(wǎng)頁博客解決的，一開始用的是embed標(biāo)簽寫的，發(fā)現(xiàn)在用IE打開網(wǎng)頁是會(huì)卡住，后來通過查資料發(fā)現(xiàn)IE存在一定的兼容性問題，而后根據(jù)博主建議改用了video標(biāo)簽插入，發(fā)現(xiàn)還是會(huì)存在類似問題，然后參考html+css+javascrapt網(wǎng)頁設(shè)計(jì)從入門到精通》 這本書里的視頻插入介紹，發(fā)現(xiàn)原來需要調(diào)用瀏覽器相應(yīng)視頻控件方可以兼容。試了下書中的方法，果然成功了。
7 參考文獻(xiàn)
《html+css+javascrapt網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程》 北京：人民郵電出版
《html+css+javascrapt網(wǎng)頁設(shè)計(jì)從入門到精通》 胡曉霞著 清華大學(xué)出版社
CSDN博客論壇
MIUI 10官網(wǎng)
8附錄：源代碼