第9章網(wǎng)站設計綜合實訓網(wǎng)頁設計與Web前端開發(fā)案例教程CONTENT目錄網(wǎng)站的規(guī)劃01素材準備及管理02外觀設計及布局03向頁面添加內(nèi)容04使用CSS設置頁面05添加網(wǎng)頁特效及功能06站點的測試、發(fā)布及維護07課程設計及要求0801網(wǎng)站的規(guī)劃網(wǎng)站設計項目書核心內(nèi)容市場分析（行業(yè)特點、競爭對手）功能定位（宣傳型/電商型/服務型）技術解決方案（服務器、操作系統(tǒng)、安全措施）案例對比??例9-1：信息項目部（側重市場分析）例9-2：集團網(wǎng)站（側重需求與設計）1.建設網(wǎng)站前的市場分析2.建設網(wǎng)站目的及功能定位3.網(wǎng)站技術解決方案4.網(wǎng)站內(nèi)容規(guī)劃5.網(wǎng)頁設計6.網(wǎng)站維護7.網(wǎng)站測試8.網(wǎng)站發(fā)布與推廣9.網(wǎng)站建設日程表10.費用明細網(wǎng)站設計項目書包含的內(nèi)容網(wǎng)站主要規(guī)劃過程及創(chuàng)建020301確定網(wǎng)站主題教學類網(wǎng)站，主題為“課程教學及交流平臺”確定網(wǎng)站風格淺藍色主色調(diào)，營造專業(yè)學習氛圍構思網(wǎng)站欄目結構劃分5大功能模塊及15個子欄目，搭建清晰層級，便于內(nèi)容分類與用戶瀏覽導航。網(wǎng)站主要規(guī)劃過程及創(chuàng)建04規(guī)劃網(wǎng)站目錄結構邏輯清晰的文件組織02網(wǎng)站的素材準備及管理?網(wǎng)站的素材準備及管理0201準備文本搜集文字資料，整理為Word或文本文件（命名科學）準備圖片及按鈕搜集或自制圖片，確保主題一致初始頁面效果圖0403準備動畫使用CSS3/JavaScript或專業(yè)軟件（如AdobeAnimate）建立模板??定義可復用組件（如版權區(qū)）03網(wǎng)頁外觀設計及布局網(wǎng)頁外觀布局0201紙上布局法草圖繪制，避免隨意設計軟件布局法使用Photoshop等工具創(chuàng)建實體模型（結合層功能）實踐建議紙上構思后軟件實現(xiàn)，參考第1章實例網(wǎng)頁布局的方案常見布局技術HTML5/CSS3/JavaScript課程網(wǎng)站應用??拐角型風格，彈性布局方案響應式布局（自適應設備）流式布局（百分比寬度）彈性布局（Flexbox）網(wǎng)格布局（Grid）固定布局（尺寸固定）浮動布局（傳統(tǒng)方式）定位布局（精確控制）布局方式主要頁面布局方案04向頁面添加內(nèi)容向頁面添加內(nèi)容步驟設置頁面屬性、插入元素、定義HTML結構設置標題為“網(wǎng)絡課程”插入導航動畫和背景div定義當前位置HTML結構（如<divclass="guild">）創(chuàng)建導航菜單（無序列表）添加主體內(nèi)容（標題和列表）[例9-4]：以“網(wǎng)絡課程”頁面為例頁面內(nèi)容效果圖05使用CSS設置頁面?使用CSS設置頁面?方法公用CSS文件統(tǒng)一風格（如style.css），額外樣式表處理特殊頁面示例課程網(wǎng)站公用CSS代碼（定義body、布局容器、導航區(qū)樣式）關鍵代碼：彈性布局、最小高度、背景顏色設置調(diào)用方式：<linkhref="css/style.css"rel="stylesheet">實踐結合頁面需求修改CSS（如課程簡介頁面調(diào)用jxdg.css）06添加網(wǎng)頁特效及功能添加網(wǎng)頁特效-浮動廣告示例?實現(xiàn)方法下載/修改現(xiàn)有JavaScript代碼（如浮動廣告）查找代碼資源（關鍵詞搜索）修改HTML：插入div和img標簽，調(diào)整路徑和尺寸添加JavaScript文件（fdgg.js）：控制移動邏輯步驟資源頁面參考參數(shù)調(diào)整下載/修改現(xiàn)有JavaScript代碼（如浮動廣告）效果圖添加網(wǎng)頁功能-顯示/隱藏答案JavaScript按鈕事件編程函數(shù)定義：showhide()控制顯示/隱藏狀態(tài)HTML結構：按鈕與嵌套表格（id綁定）功能實現(xiàn)點擊后效果圖（顯示答案）初始效果圖（顯示答案前）添加網(wǎng)頁功能-自測練習JavaScript按鈕表單編程數(shù)組定義：標識正確答案（如ans數(shù)組）函數(shù)：Engine()統(tǒng)計正確數(shù)，total()處理交卷邏輯顯示答案功能：一鍵控制所有題目功能實現(xiàn)測試結果提示頁面效果圖確認對話框07站點的測試、發(fā)布及維護上傳文件使用FTP工具（如FileZilla）方法上傳下載界面設置站點管理器文件放置Web目錄（如www、web、htdocs）注意點獲取網(wǎng)站地址?獨立域名（如）獨立IP（如95）目錄空間（如/JudgeOnline）訪問方式非80端口需額外指定端口處理實機測試及日常維護?必要性：本地環(huán)境與網(wǎng)絡環(huán)境差異測試內(nèi)容：兼容性、安全性、性能工具建議：WebZIP抓取或手動測試實機測試任務：內(nèi)容更新、數(shù)據(jù)備份安全監(jiān)控：處理違規(guī)內(nèi)容（如論壇留言）維護制度化：制定定期更新計劃日常維護08課程設計課程設計的基本目的?目標：全面掌握網(wǎng)站建設理論及實踐技能培養(yǎng)：網(wǎng)站規(guī)劃、設計、開發(fā)、維護全流程成果：完成一般性網(wǎng)站建設內(nèi)容要點課程設計的基本要求?任務、要求及軟件環(huán)境網(wǎng)站規(guī)劃（市場分析、功能定位）欄目結構與導航圖設計報告根據(jù)能力選擇題目（可自定義但需教師認可）選題要求獨立完成，避免隨意更改方案設計總要求指導教師當場運行測試驗收流程書面文檔（固定規(guī)格）內(nèi)容制作過程測試及發(fā)布情況總結與體會課程設計的考核方式與評分方法??網(wǎng)站設計外觀、功能及效果（40%）課程設計報告質量（20%）平時成績與學習態(tài)度（20%）考核提問表現(xiàn)（20%）考核標準優(yōu)、良、中、及格、不及格成績評定