作品名稱：網頁開發
學校名稱：湖南民族職業學院
參賽隊伍：卓越民院
參賽老師：李維龍
《網頁開發》是計算機應用技術專業的專業核心課程，通過本課程的學習主要培養學生WEB網站開發的應用能力。本課采用以任務為驅動的案例教學法，即以案例為載體，以任務為驅動，案例以若干個任務組成。課程共分13個項目，內容涵蓋網站開發入門，HTMI標簽及CSS樣式基礎，使用CSS設置與美化 文字效果、圖片效果、網頁背景、導航欄、表格、表單的方法，CSS與瀏覽器的兼容問題，使用CSS+DIV 對網頁進行布局(標準流布局、浮動布局和定位布局)的方法等。本課程注重實際操作，將相關知識融入到了案例中，使學生在完成各案例的過程中輕松掌握HTML 和 CSS的精髓，掌握使用DIV+CSS進行網頁布局的各種方法和技巧。
本次課標題： 使用CSS設置縱向導航欄
一、引入案例
你所在岳陽市月亮巴巴科技有限公司接到一個私人訂單業務，要求給其制作一個個人空間網站，而你所接到的任務是為其制作一個簡單縱向導航欄。附：簡單縱向導航欄效果圖。
二、案例分析
根據客戶需求，分析案例，將案例分解成多個任務，讓學生根據任務要求討論哪些內容可以實現，應該怎么制作，哪些不能完成？并告知本次課程的知識目標、技能目標和情感目標。
三、制作案例
教師示范操作。
1、構建HTML的導航欄結構
2、構建美化導航欄的CSS樣式
四、同步實踐
1、教師：輔助、答疑。
2、學生：實戰演練-制作簡單縱向導航欄。
具體步驟：
（1） 啟動DW建站
（2） 在DW的代碼界面中編輯：
在body部分輸入文字，并為文字添加列表標簽項中。
（3） 為文本添加空超鏈接
（4） 使用內嵌樣式，在<head></head>標簽對之間插入樣式代碼
（5） 使用CSS設置導航欄
1） 消除列表項前黑色小圓點并設置一些列表樣式
2） 設置超鏈接樣式，如消除下劃線，設置文字大小和顏色，設置背景顏色和內邊距等。
3） 設置鼠標經過樣式，如超鏈接顏色變化加粗等。
保存文件。
五、歸納總結
1、合理利用display:block屬性
display屬性規定元素的顯示類型，其具有多個不同的屬性值，其中display:block表示將元素轉換為塊級元素。
2、利用margin-bottom設置間隔效果
在制作縱向導航欄或者列表一類的縱向HTML結構時，如果設計要求導航欄的每一項之間有一定間隔的時候，可以使用margin-bottom屬性來實現這個效果。
對于單個的元素來講，margin-bottom屬性是設置此元素和它下面的元素的間隔，當此屬性被設置在縱向菜單或者列表結構里面時，就可以產生均勻的間隔效果。
3、利用border設置特殊邊框
特殊邊框的設置并不困難， border可以對4個方向的邊框分別進行設置。那么在設置邊框的時候，可以單獨設置一個方向的邊框，也可以對多個方向的邊框分別進行不同的樣式設置。
六、作業布置
思考：橫向導航欄又該如何制作？
七、后記
1、亮點
（1）充分發揮了多媒體和自媒體的優勢，服務于課堂，提高了教學效率。
（2）注重以學生為主體，以培養學生實踐技能為目標。
（3）信息化教學工具應用廣泛。
2、不足
（1）創新思維有待加強。
（2）考核評價方式有待優化。
八、考核評價
考核評價=過程考核（50%）+考勤考核（20%）+作品考核（30%）。
