前端頁面開發步驟詳解

    老闆或甲方是一位真正有需求的發起者，也是個基礎idea的夢想師，產品是需求專業化梳理或進行有效評估細化需求負責的，而設計是前端的上游，前端是設計的下游。設計的工作目的是把產品宏觀的思考結果做專業的處理，因為依照一般的習慣，產品最終的結果是原型圖，而原型圖可以理解為設計的草圖，

    對真正的使用者來說，這個草圖過於簡單或不符合使用的操作習慣，所以需要設計師進行專業的處理，例如色彩搭配，佈局分隔，有時候還兼互動的一部分工作，設定使用者與頁面發生互動的預訂流程，

    那有人問，不需要設計不行嗎？直接讓前端寫頁面不就得了，還需要麻煩設計師來做個圖出來。

因為這裡邊有一個成本風險控制的一個概念，因為在前期，尤其是設計，主觀感受大於理性的思考，所以每天的結果都不一樣，所以需要設計師去消化掉這部分主觀感受帶來的誤區，而且從成本上來講，有些場景設計師改圖比改程式碼要容易控制一些。

    設計師的結果是psd文件，他是許多圖層疊在一起的結果，而前端的工作結果html頁面，是把很多圖層上的效果，有機的用html組織起來的過程。

前端是把轉換後html交給下游服務端開發工程師，或叫後台開發，這個html裡邊包括一些互動的js檔案等。總的來說前端是個承前啟的崗位。 也有的公司把前端的責任放大，負責整個前台view層頁面的開發，這樣的好與壞在前面的文章中已經探討過就不一一細表了。

background屬性

#　　background屬性是css中應用比較多，且比較重要的一個屬性，它是負責為盒子設定背景圖片和背景顏色的，background是一個複合屬性，它可以分解成如下幾個設定項：

　　a、background-color 設定背景色

# b、background-image 設定背景圖片位址

　　c、background-repeat 設定背景如何重複平鋪

　　d、background-position 設定背景圖片的位置

　　e、background-position 設定背景圖片的位置

　　e、 background-attachment 設定背景圖片是固定還是隨著捲軸滾動實際應用程式中，我們可以用background屬性將上面所有的設定項目放在一起，而且也建議這樣做，這樣性能更高，而且相容性更好。

例如：background:#f00 url(bg.png)  no-repeat   left  center fixed

　　　background:#f00 url(bg.png) #　　　background:#f00 url(bg.png) #　　　background:#f00 url(bg.png) #　　　background:#f00 url(bg.png) #　-repng 25px  fixed前端頁面開發流程

　　a、建立頁面專案目錄。

　　b、使用Photoshop對效果圖切圖，切出網頁製作中所需的小圖片。

　　c、將裝飾類別影像合併，製作雪碧圖。

###　　d、結合Photoshop和程式碼編輯器，參考效果圖，進行html和css程式碼書寫，製作頁面。 ###

以上是前端頁面開發步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！