為更好的學習軟件工程這門課，我做出如下規划：
一、自主學習一門網課（在MOOC學習《網頁設計》）
| 第一周 | 了解網站的概念與開發流程 |
| 第二周 | 了解網站的整體規划 |
| 第三周 | 網頁效果圖的設計制作 |
| 第四周 | Dreamweaver軟件操作 |
| 第五周 | CSS樣式 |
| 第六周 | DIV+CSS |
| 第七周 | 功能模塊應用 |
| 第八周 | IFRAME框架 |
二、學習進度報告
到目前為止，已學習網站的概念與開發流程，了解網站的整體規划，且正在學習網頁效果圖的設計制作，從這段時間的學習中，我了解到網站設計與開發的流程如下：
1、網站的開發流程
（1）需求分析：當拿到一個項目時，必須進行需求分析，清楚知道網站的類型、具體功能、業務邏輯以及網站的風格，此外還要確定域名、網站空間或者服務器以及網站備案等。
（2）規划靜態內容：重新確定需求分析，並根據用戶需求規划出網站的內容板塊草圖。
（3）設計階段：根據網站草圖由美工制作成效果圖。就好比建房子一樣，首先畫出效果圖然后才開始建房子，網站開發也是如此。
（4）程序開發階段：根據草圖划分頁面結構和設計，前端和后台可以同時進行。前端根據美工效果負責制作靜態頁面；后台根據頁面結構和設計，設計數據庫數據結構和開發網站后台.
（5）測試和上線：在本地搭建服務器，測試網站是否存在Bug。若無問題，則可以將網站打包，使用FTP上傳至網站空間或者服務器
（6）維護推廣：在網站上線之后，根據實際情況完善網站的不足，定期修復和升級，保障網站運營順暢，然后對網站進行推廣宣傳等。
2、網站的整體規划
（1）定位網頁的主題和CI形象
（2）確網站的欄目板塊和目錄結構
（3）確定網站的風格
（4）了解網頁風格的發展趨勢
3、網頁效果圖的設計制作
3.1、盒子hover盒子
這里插入一個規則。覆蓋優先級規則：1、同級 有長寬空div 文字 圖片先有誰誰就全顯示，排在后面的地方不夠排就被覆蓋。覆蓋優先級位置決定。
主要知識點：position：fixed固定在界面中央。position：relative 用在外框。position：absolute用在內盒。
text-align：center ------>局中位置總結：a）文字局中，text-align：center 。b）盒子局中，margin：0 auto；
鼠標停滯動態圖片總結：先想到用hover，a）兩個盒子，鼠標停滯后顯示的盒子，格式為 標簽屬性（先顯示） ：hover 標簽屬性（后顯示），常用，hover，visibility屬性，hidden和visible值。b）一個盒子鼠標停滯先顯示的透明，然后顯示效果。常用比如，border：20px，solid，transparent。
兩種圖片透明：opacity：0.6 background-color：rbga(0,0,0,0.7)注意一定帶着a
3.2、邊框效果
3.2.1、去邊框閃爍
效果：鼠標放在內容上時，邊框不自然呈現，有閃爍現象。
本質：未處理的，在鼠標放置時，因為多加了邊框所以大小變化了。導致閃爍的效果。 處理的思路就是先加上邊框設置為透明。
3.2.2、利用邊框構圖
利用邊框特性構造一個小的黑色三角形。當兩邊都出現不一致的顏色邊框的時候就會出現銳角。兩種顏色在一起匯聚到一個直角，就會按照各自的寬度比例產生銳角。
使用margin-top或margin-left移動位置。如下例子鼠標停滯后尖角在原位置改變指向。注意：這里盒子顯示時 間距調節用的margin-top，在hover調節時使用margin-bottom不起作用，hover只能用margin-top調節位置。 這可能由於display：inline-block的原因，inline無論怎么移動都不能將圖標移動出界面，但是block是可以。
3.3、引入更形象的圖案
3.3.1、原理及使用方法簡介
基於unicode編碼格式制圖，每個小圖標都對應一個unicode編碼。加載awesome的.CSS文件，使用時引用即可。
下載網址http://www.fontawesome.com.cn/
注意：他們不是內容，只是CSS渲染效果。
3.3.2、偽類和偽元素
：：before是偽元素，修飾元素后作用在選擇器
：before偽類，修飾選擇器。
3.3.4、模態對話框
引用E:\python\zuoye\chouti\appro\loadIcon
top：50%；是以圖形的左上角為基准，用margin-top：-1px；調節。z-index：2；確定顯示順序。
局中用fixed。用JS實現模態對話框
小結
常見樣式的構造思路：
1）拼接，a）多圖基本拼接。b）多圖position。3）附加圖漂浮在基礎圖之上或附近。注意在某種程度position可以代替flowt.
2）層疊，a） hover及hover+標簽。b）透明transparent。c）隱藏+可見，使用visibility：visible和hidden。
3）局域以上的所有帶有非覆蓋效果，均可使用設置內部內容帶有內邊距的辦法。
綜上，元素定位margin，組合定位position，元素內容定位padding。基本可以解決一切定位問題。