HTML5 CSS3 Bootstrap響應式Web前端設計（慕課版）（第2版）-項目評分標準全 項目1-14

項目一評審標準頁面能夠正確顯示（50分）中文能夠正確顯示（10分）文檔正確結構化（10分），圖片正確顯示（10分）樣式正確設置（20分）網頁能夠正確發(fā)布（50分）Iis能夠正確安裝（10分）Web服務器能夠正確配置（20分）網頁能夠通過ip地址或者localhost來訪問（10分）項目二評審標準文件能夠正確命名（10分）能夠正確使用網頁開發(fā)工具（10分）能夠根據頁面效果，如P57項目圖2-1所示，進行文檔結構化（80分）注意：1.如設置錯一個標簽項，減5分。2.如網頁出現(xiàn)亂碼，減10分項目三評分規(guī)則：請參照電子版說明中的項目圖3-1，下面每個部分都是10分，請準備評閱，扣分請寫出扣分點。（1）

能夠正確的命名文件（10分）（2）

主導航和子導航列表設置正確（10分）（3）

能夠在準確位置插入兩張圖片，并在網頁中正常顯示。（10分）（4）

準確的設置了蹉跎歲月部分的標簽，并在網頁中正確顯示。（10分）（5）

準確的設置了賦歌而終部分的標簽，并在網頁中正確顯示。（10分）（6）

插入視頻，并能夠正確播放。（10分）（7）

設置錨點，并能夠在網頁上正確鏈接。（10分）（8）

制作表格，并能夠在網頁上準確顯示。（10分）（9）

設置iframe框架，并能夠在網頁上正確顯示。（10分）（10）按項目圖3-9，正確劃分網頁結構。此部分在執(zhí)行時，完全看不到效果，需要評閱同學認真讀代碼?。?0分）項目四評審標準文件能夠正確命名（10分）能夠正確設置<form>的action屬性，頁面能夠以post方式提交到ok.html頁面中。（10分）能夠利用<table>標簽進行頁面布局，并能正確設置其背景圖片。（20分）錯一項扣5分。能夠根據頁面效果，分析并靈活運用表單控件，最終完成項目圖4-1。（50分）錯一項扣5分。能夠準確設置頁腳部分，在“聯(lián)系我們”項目，可以正確發(fā)送郵件。（10分）項目五評分標準：（1）正確對網頁結構化，<header>及<nav>標簽，<aside>

標簽，<main>

標簽，<footer>標簽。（10分）（2）正確設置<nav>導航欄，各個菜單項添加正確。（10分）（3）正確設置<content>中的各項元素，<h2><pre><p>標記使用正確。（10分）（4）<aside

id=”story”>部分的<h3><p>標記使用正確。（10分）（5）<footer>部分的<nav>、<ul>、<li>、<address>標記使用正確。（10分）（6）插入三幅圖片位置準確，能正常顯示：<nav>標簽之下，添加圖片“l(fā)ogo.png”；在“1

導讀”部分，插入圖片daodu.png；在“2

綜述”部分，插入圖片libai1.jpg。（每個圖片10分，共30分）（7）音頻文件插入正確，且能播放。（10分）（8）滾動字幕添加正確。（10分）項目六評分標準1、頁面區(qū)域劃分正確：<header>、<nav>、<main>、<section>、<footer>等語義標簽和<div>標簽劃分正確。（5分，錯誤一個扣1分）2、添加內部樣式正確（共20分）（1）

給body添加背景圖片正確。（5分）（2）

正確設置id為top的div標簽。（5分）（3）

正確設置id為mount的img標簽。（5分）（4）

正確設置類名為.text的div標簽。（5分）評分規(guī)則：項目七給出正確的文件名libai-representativeworks3.html和libai-representativeworks.css。（5分）

1、guidance子目錄部分（20分）

（1）#guidance：5分；

（2）#guidance

ul

li：5分；

（3）-（6）子目錄項：共設置6項，錯1項扣2分，都正確給10分；

2、main主體部分（20分）

共4個小題，每個小題5分。

3、#themeIntro表格部分（10分）

4、設置名句賞析的列表（10分）

5、設置所有的section（10分）

6、設置文本（20分）

（1）5分

（2）5分

（3）共4項，錯1項扣2分，都正確給10分。

7、Footer部分（5分）項目八評分標準：1.main.css樣式設置（每個小題5分，共45分）頁面主體設置：（1）清除內外邊距（2）設置main外邊距正確主目錄部分設置：（1）主目錄顯示正確（2）將header部分的左內邊距設置為100px（3）設置header內img為左浮動（4）設置header內ul右外邊距為400px（5）設置header內nav下li元素：去掉圓點，左浮動頁面底部（1）設置footer上下內邊距正確（2）設置footer內nav的下外邊距正確2.questionnaire.css文件樣式設置（每個小題5分，共20分）（1）頁面主體設置，設置body部分的寬度為1200px，上下邊距為0，左右居中（即margin:0auto;）。（2）設置table部分為合并邊框，寬度1000px，左右居中。（3）表格列td的內邊距是5px。（4）設置id為intr部分：字體為"huawenxinwei"，字號20px，內邊距為10px。3.libai-representativeworks.css文件樣式設置（每個小題5分，共15分）（1）利用后代選擇器選擇單元格maintabletrtd，設置內邊距10px。（2）設置main部分的section元素，內邊距5px，外邊距3px。（3）設置main部分的h2元素，下外邊距5px。以上三個css文件能正確引入到頁面中，整體效果顯示正確，共20分，如果有部分問題，酌情扣分。項目九評分標準：1.

整體布局，效果如圖，共25分。（1）<main>部分：內邊距1px；邊框粗細是2px，直線，顏色#e0d4af；注意：在前面的項目中，在main.css文件已經將其寬度設置為1200px。（5分）（2）<header>部分設置寬度為1200px，其他設置遵循main.css中的樣式。（5分）（3）id為content部分：寬度750px；邊框粗細是1px，直線，顏色#e0d4af；左浮動。（5分）（4）id為story部分：寬度350px；邊框粗細是1px，直線，顏色#e0d4af；左浮動。（5分）（5）story中的div部分：邊框粗細是1px，直線，顏色#e0d4af。（5分）2.main部分樣式設定，效果如圖：（5分）3.

左側內容，ID為“content”部分。共15分，根據完成效果可酌情給分。4.“導讀”，ID為“daodu”部分，此部分完成效果如下圖。共15分，根據完成效果可酌情給分。

5.“故事”，

ID為“story“部分，完成后效果如下圖所示共20分，根據完成效果可酌情給分。

6．“背景音樂“部分共20分，根據完成效果可酌情給分。項目十1、正確添加圖片（10分）2、guidance部分(30分)共4個小部分，效果如下圖，如果有問題酌情扣分。3、main部分（40分）共5個小部分，每部分8分，共40分。效果如下圖，如果有問題酌情扣分。4、main部分的彈性設置（20分）一共20分，錯誤一個扣2分。頁面整體效果如下圖，如果有問題酌情扣分。項目十一評分規(guī)則項目設置內容較多，無法一一列出，大家在評閱的時候查看局部效果圖是否相同，主要樣式設置類似即可，如果有差異根據每一部分的總分酌情扣分。1．main主體部分（5分）設置其上邊距為60px2．content部分（1）id為“content”部分和id=“content”部分中的“pre”設置正確。效果圖如下所示。（5分）（2）“content”部分的“fommer”和“l(fā)atter”兩個文字段效果設置正確，效果如下圖所示。（5分）

（3）定義關鍵幀動畫“showContentImg”，將其透明度設置為從“0”到“1”。（5分）（4）id=“l(fā)atter”部分中的“h3”標簽效果設置正確，效果如下圖所示。（5分）

3．poets部分（1）id=“poets”部分，（2）class=“poet”部分，（3）class=“poet”部分中的“img”標簽。此上部分效果設置正確，效果圖如下所示。（15分）（4）class=“poem”部分，（5）class=poet部分的hover

與class=intro部分（.poet:hover.intro{}），（6）class=poet部分的hover

的“img”（.poet:hoverimg{}），（7）class=poet部分的hover

與class=poem部分（.poet:hover.poem{}）。此上部分效果設置正確，效果圖如下所示。（20分）

（8）class=“intro”，（9）class=“intro”部分中的“h2”標簽。此上部分效果設置正確，效果圖如下所示。（10分）

4．flower部分（1）class=“flowers”部分，（2）class=“flower”部分，（3）id=“flowerRight”部分，（4）id=“flowerLeft”部分。此上部分效果設置正確，效果圖如下所示。（20分）

設置落花的動畫效果：設置關鍵幀動畫“flowerMove1”，“flowerMove2”“flowerMove3”正確。（5分）第一朵落花（.flower:nth-of-type(1){}），第二朵落花（.flower:nth-of-type(2){}），第三朵落花（.flower:nth-of-type(3){}）。（5分）

整體頁面效果如下圖所示（注意看右下角花朵飄落）。項目十二項目設置內容較多，無法一一列出，大家在評閱的時候查看局部效果圖是否相同，主要樣式設置類似即可，如果有差異根據每一部分的總分酌情扣分。最終效果：1、引入資源文件正確

（10分）2、構建頁面（1）導航欄部分（20分），效果如下所示：

（2）內容區(qū)域（共70分）表單左側部分（35分）

表單右側部分（35分）（100.0分）項目十三項目設置內容較多，無法一一列出，大家在評閱的時候查看局部效果