[ 網頁設計教程 ] 教你如何使用模板生成HTML+CSS文件- 其他教程 - 骨子愛創意

教學主題: 教你如何使用模板生成HTML+CSS文件

大家好!! 小編今天來和大家分享關於 其他教程中的網頁設計教程教學

今天的這個教學主題是: 教你如何使用模板生成HTML+CSS文件

這教學的重點為這幾點 [ 文件,生成,使用,模板,如何,CSS,添加,一個,現在,樣式 ]

希望你可以從這幾點中領悟到修圖的精華

本文重點

在上個教程中我們學習了如果使用Photoshop來設計網頁模板,這一節我們就來學習如何把這個頁面生成標準的html+css文件.

在上個教程中我們學習了如果使用Photoshop來設計網頁模板,這一節我們就來學習如何把這個頁面生成標準的html+css文件.
相關教程(Photoshop製作方蘋果風格的網頁模板：http://www.missyuan.com/viewthread.php?tid=429191)

先看看效果圖吧：

2.在寫HTML之前我們來分析一下頁面的結構,因為一個好的HTML結構,對寫CSS樣式來是很重要的.下圖是頁面的DIV圖.

3.打開PSD文件,首先我們要把頭部的背景用切片工具切出一個切片來,如圖;

4.切片出LOGO,另存為WEB格式.

5.現在來切片標題.因為標題的文字字體不是標準的WEB字體,還有標題的陰影用CSS很難實現,所以要把標題切片出來.

6.把電腦也切片出來,在這之前要把電腦里的圖像給關掉.

7.關閉側欄的內層,只顯示背景,然後使用選區工具選中大部分的區域,如圖:

8.把上面的選中的區域複製並粘貼到一個新的文件里.使用變形工具擴大垂直.(為什麼要做這一部,因為這樣就可以有足夠的空間來填寫內容了.)

9.現在回到網頁中,把下面的一部分也切片出來.

10.把按扭複製並粘貼到一個新的圖層,在一步里我們要把按扭的漸變頭尾調換一下,這樣就可以一個動態的效果.

11.把圖像導出來,並且保存gif格式.

12.把這些圖像保存在一個文件夾內.

貼心提醒: 按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前 ( 或者可以
使用歷史面板中的菜單來使用這些命令 )。結合還原 ( Edit／Undo )命令使
用這些熱鍵可以自由地在歷史記錄和當前狀態中切 換。

 

下面就是HTML+CSS部分

 

 

13.在DW中創建一個新的HTML文件.按照第2步寫入div布局.然後在頭部寫入一個無序列表來做導航.

PS:如果覺得圖片看不清楚,就點此下載大圖並清晰圖片.

貼心提醒: 使用選框工具( Marquee Tools )的時候，按住Shift鍵可以劃出 正方形和正圓
的選區；按住Alt鍵將從起始點為中心勾劃選區。

14.填充無序列表的內容,並加一個"alt"來為描述列表項目.

15.現在開始填充內容.因為最後消息是兩欄的形式.所以不要忘了添加一個class.

16.現在來寫右側邊的代碼.

17.好了,現在來為頁腳添加代碼,因為頁腳分為三列,所以在頁腳div容器里再加三個div.

18.現在來寫CSS樣式,首先清除下瀏覽器默認值.再添加字體大小,背影,和頁面大小.

19.為頭部添加CSS(木木:導航的設置請參考:如何使用CSS讓菜單橫向)

20.續繼添加頭部的CSS樣式,在瀏覽器的效果如下:

 

21.下面是內容的CSS樣式.為內容做一個左浮動的效果,消息欄目也是設置為左浮動.

 

22.現在可以添加右側內容的CSS樣式.在10步我們來做按扭效果,現在為按扭添加它的CSS樣式.

 

23.下面是頁腳的灰色地帶的CSS樣式.

 

24.續繼為頁腳添加CSS樣式.

 

25.現在來為沒有開啟javascript用戶來添加CSS樣式.

 

 

26.完成HTML+CSS的代碼.現在來為電腦圖片添加幻燈片顯示功能.添加javascript文件.

 

27.為javascript添加代碼.

 

28.最終完成的效果.

 

進入論壇參與討論：http://www.missyuan.com/viewthread.php?tid=434854

看完小編分享的教學之後 是不是對網頁設計教程中的其他教程教學更熟悉了呢?

希望我們所介紹的 教你如何使用模板生成HTML+CSS文件 這教學會喜歡

文章標題: 骨子愛創意- 教你如何使用模板生成HTML+CSS文件–轉載請註明來源處

本教學分類為網頁設計教程中的 其他教程相關教學

文章相關關鍵字為: 文件,生成,使用,模板,如何,CSS,添加,一個,現在,樣式

本文永久連結 :教你如何使用模板生成HTML+CSS文件

本文轉載自 :VIA