一次網站開發的總結

前段時間改了個網站，當時那個網站使用的就是bootstrap，從那時起才知道什麼是bootsstrap，什麼是響應式佈局。在改網站的過程當中，也寫了兩篇文章，這兩篇文章也主要是使用思路和網站修改中使用bootstrap的功能。文章以下：
【隨筆】前端框架Bootstrap在網站開發中的應用
BootStrap彈出層操做

自從網站功能改完後，對bootstrap就產生了興趣。業餘時間學了下bootstrap，正好本身也想推幾個關鍵詞試試，作作seo，因此就利用晚上時間作了個網站，網站的前端是使用bootstrap,服務器語言是c#，網站地址：shandongit.com

我對css明白一些，知道元素、熟悉怎麼使用。可是我對佈局啊、圖片啊、顏色搭配啊沒什麼感受。因此這個網站是從bootstrap官方提供的實例改版而來。佈局雙欄，加入頭部尾部，再加入網站自身功能相關的元素。因爲使用bootstrap，因此網站的前端很快就完成了，而後就是功能。

功能對我來講很簡單，個人目的首先是搭建起來，而後是完善功能。因此第一步只是實現了基本功能，也就是動態設置頁面標題關鍵詞描述，添加分離，添加關鍵詞，添加文章等。實現這些功能用了不到兩個星期，其它的功能再一點一點的加吧。

網站開發總結

1.開發環境，網站使用的是asp.net應用程序，而不是如今流行的mvc。數據庫爲sql server,使用存儲過程來進行數據操做。使用三層架構。
2.網站佈局，因爲使用bootstrap，css幾乎沒寫幾行代碼。bootstrap官方有很豐富的使用文檔，例如雙欄的實現：

<div class="row">
<div class="col-lg-8">
</div>
<div class="col-lg-4">
</div>
</div>

還有分頁，bootstrap使用li來顯示分頁樣式

 

<ul class='pagination'>
<li><a href='#'>&laquo;</a></li>
<li class='active'><a href='#'>1</a></li>
<li><a href='#'>2</a></li>
<li><a href='#'>3</a></li>
<li><a href='#'>4</a></li>
<li><a href='#'>&raquo;</a></li>
<ul>

至於其它的能夠看bootstrap官方文檔，使用真的太方便了

3.封裝經常使用樣式，方便調用。在網站開發時，有些樣式時經常使用的，須要封裝在類裏，方便調用。經常使用的代碼必定要抽取出來。這一塊有些老生常談，面向對象+重構。

4.若是功能類似，最好將功能封裝在一個頁面。例如文章的添加、修改應該是一個頁面，經過參數來判斷相關操做。

5.seo，首先是須要動態的設置網站標題、關鍵詞和描述等。標題和描述常常使用，因此寫到了web.config中。關於如何寫web.config,能夠看這篇文章讀寫web.config文件 。文章有分類，分類頁能夠設置關鍵詞描述。而文章的關鍵詞，首先判斷表中是否存在，若是不存在就插入，存在就加1，方便之後的統計。關鍵詞也能夠設置seo的相關信息。文章也相似。可是我對h1,h2,h3,h4的使用不合理，之後等文章多了再改吧。我一直想把網站標題設置爲h1，h2爲菜單欄，h3爲標題，h4爲關鍵詞。可是等等吧。僞靜態，方便seo。

6.權限的判斷，主要操做來自於這篇文章：asp.net網站的權限判斷

7.富文本編輯器使用的是ckeditor,具體使用可看：富文本編輯器CKEditor使用總結 。 使用ckeditor主要緣由是不用幾乎不用寫js代碼，減小代碼量。

8.類庫。必定要建一個本身的類庫，開發使用方便。類庫的整理很簡單，如之前開發中經常使用的代碼，別人分享的代碼等。

9.上傳操做。上傳操做分爲兩部分，一部分是ckeditor涉及到到上傳，另外一部分是頭像的設置、文章分類的設置等使用單獨一個頁面。上傳使用的主要技術來自於下面的文章：網站開發經常使用jQuery插件總結(17)上傳插件blueimp asp.net圖片上傳操做總結