PAGEPAGE2考生姓名 準考證號2020年下半年 Web前端開發(fā)中級 實操考試（考試時間14:00-16:30共150分鐘）1.本試卷共4道題，滿分100分。2.請在指定位置或開發(fā)環(huán)境下作答。試題一（20分）閱讀下列說明、效果圖，打開“實操素材/news”文件夾，使用bootstrap4框架進行靜態(tài)網(wǎng)頁開發(fā)，在空（1）至（10）處填寫正確代碼，操作完成后保存素材?！菊f明】這是一個bootstrap4實現(xiàn)的靜態(tài)頁面效果，包含首頁和登錄頁?，F(xiàn)在我們需要編寫該網(wǎng)站效果圖部分代碼。項目名稱為news，包含首頁index.html、login.html,web文件夾，其中web文件夾包含用到的資源，其中images文件夾包含用到的圖片。Dist文件夾是bootstrap4框架用到的文件，css是樣式文件夾。首頁點擊“登錄”，會跳轉(zhuǎn)到登錄頁面，登錄頁面點擊“提交”會驗證用戶名是否為空。頁面效果如下圖所示?！拘Ч麍D】首頁效果登錄頁效果【問題】（20分，每空2分）打開“實操素材/news”中的文件“index.html”，進行靜態(tài)網(wǎng)頁開發(fā)，補全代碼，在（1）至（8）處填入正確的內(nèi)容，完成后保存文件“index.html”。2、打開“實操素材/news”中的文件“l(fā)ogin.html”，進行靜態(tài)網(wǎng)頁開發(fā)，補全代碼，在（9）至（10）處填入正確的內(nèi)容，完成后保存文件“l(fā)ogin.html”。注意：除刪除（1）至（10）填入正確的內(nèi)容外，不能修改或刪除素材中其它任何內(nèi)容。試題二（28分）閱讀下列說明、效果圖，打開“實操素材/mysite”文件夾中的素材，閱讀HTML代碼和js代碼進行靜態(tài)網(wǎng)頁開發(fā)，在空（1）至（14）處填寫正確代碼，操作完成后保存素材?！菊f明】這是使用HTML5實現(xiàn)的響應(yīng)式頁面效果。當設(shè)備寬度大于1440px的時候主體內(nèi)容顯示為三列布局，當設(shè)備寬度在1000px和1440px之間的時候主體內(nèi)容顯示為兩列布局，當設(shè)備寬度小于1000px的時候主體內(nèi)容顯示為一列布局，輪播圖部分會根據(jù)頁面大小自動縮放，使用ajax向后臺發(fā)起請求。項目名稱為mysite，包含首頁index.html、images文件夾、js文件夾、php文件夾、css文件夾等，其中images文件夾包含用到的圖片，css文件夾包含樣式文件?！拘Ч麍D】大于1440px的頁面效果1000px到1440px之間的效果小于1000px頁面效果【問題】（28分，每空2分）進行靜態(tài)網(wǎng)頁開發(fā)，補全代碼：1、打開“實操素材/mysite”文件夾中的文件“index.html”，在空（1）至（4）處填入正確的內(nèi)容，完成后保存文件“index.html”。2、打開“實操素材/mysite/js”文件夾中的文件“l(fā)unbo.js”，在空（5）至（6）處填入正確的內(nèi)容，完成后保存文件“l(fā)unbo.js”。3、打開“實操素材/mysite/js”文件夾中的文件“search.js”，在空（7）至（14）處填入正確的內(nèi)容，完成后保存文件“search.js”。注意：除刪除（1）至（14）填入正確的內(nèi)容外，不能修改或刪除素材中其它任何內(nèi)容。試題三（40分）閱讀下列說明、效果圖，打開“實操素材/dormitory”中的素材，閱讀代碼進行動態(tài)網(wǎng)頁開發(fā)，在空（1）至（20）處填寫正確代碼，操作完成后保存素材?！菊f明】這是一個使用laravel框架實現(xiàn)的學(xué)生宿舍管理系統(tǒng)，實現(xiàn)了添加學(xué)生違紀和展示學(xué)生違紀列表。效果如下所示。項目名稱為dormitory，包含了laravel框架的目錄結(jié)構(gòu)。具體要求：首先導(dǎo)入DB目錄下邊的sql文件，編寫路由，實現(xiàn)添加學(xué)生違紀信息和展示學(xué)生違紀列表兩個功能?！拘Ч麍D】首頁效果添加違紀信息頁面展示違紀信息頁面【問題】（40分，每空2分）根據(jù)注釋，補全代碼：1、打開“實操素材/dormitory/routes”中的文件“web.php”，在空（1）至（3）處填入正確的內(nèi)容，完成后保存文件“web.php”。2、打開“實操素材/dormitory/app/Http/Controllers/school”中的文件“DisciplineController.php”，在空（4）至（12）處填入正確的內(nèi)容，完成后保存文件“DisciplineController.php”。3、打開“實操素材/dormitory/resources/views/school/muban”中的文件“temp.blade.php”，在空（13）至（14）處填入正確的內(nèi)容，完成后保存文件“temp.blade.php”。4、打開“實操素材/dormitory/resources/views/school/”中的文件“addDiscipline.blade.php”，在空（15）至（20）處填入正確的內(nèi)容，完成后保存文件“addDiscipline.blade.php”。注意：除刪除（1）至（20）填入正確的內(nèi)容外，不能修改或刪除其它任何內(nèi)容。試題四（12分）閱讀下列說明、效果圖，打開“實操素材/upload”文件夾中的素材，進行動態(tài)網(wǎng)頁開發(fā)，在空（1）至（6）處填寫正確代碼，操作完成后保存素材。【說明】本題實現(xiàn)了上傳圖片功能的案例，效果如圖所示。項目名稱為upload，包含前端上傳頁面index.html、后端處理上傳的upload.php頁面，存放上傳圖片的文件夾?！拘Ч麍D】上傳頁面上傳結(jié)果頁面【問題】（12分，每空2分）1、根據(jù)注釋，補全代碼，打開“實操素材/upload”中的文件“index.html”，在空（1）至（2）處填入正確的內(nèi)容，完成后保存文件“index