億貝CALL

此次我們組參賽的主題是一個手機通訊軟件的官方網站，因當前所學課程為DIV+CSS分層布局實現靜態頁面的布局，為了體現這一點，故參賽作品全部采用DIV+CSS的布局方式，整個作品按所學的W3C規范，實現結構與樣式分離的web規范，所有頁面均有獨離的樣式表文件，以便后期的更改與整合工作!

網頁設計前的準備工作

1. 為了整個項目在完成時能夠順利整合在一起，各組員按規定的格式存取代碼源文件(如圖)，這個工作在任務分配時寫成文檔發給各組員，這樣做可以讓文件統一，有條不紊，便于查找!

2. 同時，為了保持網站整體風格統一，我們組采用模板頁的方式實現頂部與底部復用，中間內容部分采用高度自適應的方式，以適應各組員的頁面完成后能順利的放到模板中去(如圖：模板頁)

模板頁(mod.dwt)

任務分配及完成情況

1. 本次作品共6個導航頁面，小組成員4人，徐軍與吳鏡平兩位在職人員每人分配1個頁面，其余4個頁面由我與曾豐勝每人2頁面

2. 本項目從制作到整合完成，用了一周左右的時間

項目完成效果圖展示

首頁(index.html)

億貝CALL(yibeicall.html)

留言板(liuyan.html)

最后在所有項目完成之余，我在模板頁中添加了一個小模塊，將參與本次項目制作的成員展現出來，這個小模塊在每個頁面的最左邊，鼠標懸浮時展開，同時擴展了一個頁面展示利用表格規整數據的布局，顯示小組項目制作人員

信息。每個成員的名字都加入了錨鏈接，鏈接至詳細的擴展頁面，如下圖：

小組項目制作人員(center.html)

項目完成主要用到的知識點

1. Div+css全局布局(項目)

2. Position之absolute , relative , fixed 定位的使用

3. Float浮動定位

4. Background-position背景偏移技術的使用

5. Div+ul+li無序列表布局

6. Div+dl+dt+dd圖文布局

7. Table-tr-td表格布局

8. Form表單的使用

9. a鏈接，錨鏈接的使用

10. hover , target , focus等偽類樣式的使用

11. table之caption , thead , tbody , tfoot 規整數據顯示

項目完成的心得與收獲

通過此次小組項目的制作，使我對分層布局的掌握更加深入，通過項目實踐，能讓自己發現自己在學習中的不足，在學習上須要提升與改進的地方!同時在項目實踐中，能真正的發現問題，而自己在解決時，自然而然也就有了更多的收獲!整個項目上從制作到完成，不僅是對我們在這一時段知識的掌握程度的考驗，也是在鍛煉我們解決問題的能力，更加深了我們對代碼使用的熟練成度!

項目能夠順利的完成，與小組每位成員的努力是分不開的!這也更加體現了團隊協作的重要性!如同以后參加工作一樣，我們須要同團隊一起共同完成同一個項目!而小組就是我們學時的團隊!互相配合，互相學習，最終能事半功倍!

感謝小組的每位成員付出的努力，同時也感謝我們的老師對我們的指點，課后提供的資料使我在學習之余擴展了知識面!也希望在日后的學習中，大家能繼續互相學習，互相勉勵，學到扎實的技能!