導航:首頁 > 萬維百科 > 模板網頁設計psd

模板網頁設計psd

發布時間:2020-09-19 00:12:03

1、如何將psd網站模板轉換成html網頁形式

將psd網站模板轉換成html網頁形式,首先需要理解,psd的模版,只是對於網站的一個整理布局,使用圖片的形式來做的,而在瀏覽器上需要過html+css+js等等這些技術手段才可以來做出來,如PSD的網站的背景顏色,在網頁中,需要去使用background:#f00,來實現,psd其實就是一種參考,具體我們看下,一些小的代碼設計:
<html>
<head>
<style>
body{
width:960px; //限定網頁的寬度
margin:0 auto;
boreder:1px solid #f00 //加個邊框利於觀察
}

</style>
</head>
<body>
<p>我是測試文字</p>
</body>
</html>

2、PSD網頁模板怎麼用?

用photoshop打開後,編輯修改部分圖片或文字,符合自己需要後,點菜單上的-文件-存儲為web所用格式,輸出就是html網頁。
你要保存為GIF或JPEG在粘到現有網頁中去也隨你,那要就要用網頁編輯軟體了,比如常見的Dreamweaver、FrontPage 。

推薦幾個現國內比較知名的素材網站吧
大圖網 一個非常優秀的免費素材網站,優點是素材的質量比較好,而且素材更新速度也比較快。
愛圖網 一個很老的素材網站 素材也比較多 素材比較全,素材比較多,大部分是免費的,圖片素材很多都是打包的素材。
思緣論壇 非常多的影樓素材,PS素材,和設計素材,國內素材論壇發展最好的一個,還可以學習PS教程和設計技巧

3、怎樣用psd模板做網頁啊

首先先建立一個PSD文檔 色彩模式RGB 72像素 尺寸根據你網站的大小制定
然後就在PS里設計你的網站 就當一個平面圖設計
需要放數據文字的模塊先放一個框子空著他
這樣貼好圖後 就直接切 你在PS里切的一塊塊的 到dreamweaver 里就是一個方框的 自動分開的
基本上平面部分在PS里就能做這么多了
然後拖到dreamweaver 做鏈接 做效果 等等
簡單直白的說就是用PS的方便快捷的操作給你的網站打框架 做美工

4、如何利用現有的psd模板製作網頁

可以用切片工具,把想放文字的地方切成一塊一塊的(背景最好是白色的部分)
然後Ctrl+shift+alt+S 輸出
存儲的時候,選html格式
用DW打開,切成塊的圖片刪掉,添上文字就可以了
如果有腳本,可以在剛刪掉的地方寫腳本,
然後保存就可以了
因為是內網,所以不用考慮文件容量問題

5、網頁製作中如何使用PSD模版

其實標準的網製作完成的工作實際是:psd to html,一般情況下,我們會拿到美工的psd,這時候不同的人會有不同的做法:

1.打開fireworks將圖片切割導出為html。

2.直接在dreamweaver之類的工具去拖拉布局,導入相關的圖片,flash資源。

3.先在ps中完成切圖後,在文本編輯器中看著效果圖一步步的製作。

以上是大多被採用的方法,但都不好:

第一種方法最為不好,這樣的代碼根本不具維護性和可讀性。

第二種方法也不好,代碼難免會有冗餘,做出來的東西基本需要排查一遍。

第三種方法也不好,因為你需要看效果圖一點點的拼,也就是說寫html標簽的時候,你在不斷的假設這塊要怎麼去顯示。

正確的做法是:

1.拿到psd後,先不要做別的,直接在文本編輯器中將網頁的框架寫出來,不要假設這塊將來css要去怎麼渲染,完全自然化的標簽,不加任何的css。

2.寫完之後在各個瀏覽器運行之後確保大體定位都沒有問題。

3.書寫總體css,這里的css只負責大塊的定位及樣式。

4.切出需要的圖片資源,在寫好的框架中一點點的去構造,不斷的調試,最終為成品。

5.最後,為自己的代碼添加註釋,在css,html中都要合適的為自己的代碼添加註釋。

要想做出能靈活切換皮膚,讓css主導表現,還有很多要注意的地方,但大體的流程就是這樣的,當然我們一開始不能直接就做到先寫html,但起碼要有這個意識,循序漸進。。。

謝謝熱心會員"linxz"提供實際經驗,我貼上來供大家參考:
PSD出網站從兩個大點考慮
一、一個獨立的頁面
1、分析這個頁面,先在腦袋中或者草稿紙上描繪大概的結構
2、根據設計稿的的情況,分析背景圖的分布、ICO圖的分布等
3、切割相應的圖片,導出、合並圖片
4、在編輯器中寫整體結構XHTML代碼,包括頁面中出現的所有元素的結構
5、編寫CSS樣式中的整體以及模塊代碼
6、細節調整
7、收工,瀏覽器驗證是否正確

二、由多個頁面組成的小站點或者大站點
1、瀏覽所有設計稿,統一規劃站點模塊、圖片、文件分布
2、開始第一點的操作,但規劃站點的內容分布很重要

整體考慮點:
圖片的合並,減少請求量
結構的合理性,語義化
樣式的簡潔,便於後期維護
多為後期的維護以及程序開發著想,如何簡單實現效果

6、哪裡有漂亮完整的整站PSD格式的網頁模版啊?

http://bbs.jianjie8.com/forum-88-1.html
這里有大量的整站的網頁模版,都是PSD的 容易修改哦。。

簡潔設計網
http://www.jianjie8.com
就有大量的設計素材和資源提供下載的。。。來了不會後悔的。。O(∩_∩)O哈哈~,一般人我可不告訴。。

7、套用psd網頁模板

直接把你看到的頁面資源都下載下來。psd一般都是人家設計出的,除非你是在資源站看到的頁面,要不然除了出頁面的設計師沒有人會有你指定的psd文件

8、個人網站主頁PSD模板

每一個對的···

9、網頁設計中很多PSD模版,該怎麼使用PS做好了後然後是不是要用CSS+DIV布局

psd做好了未必一定需要使用div+css方式來布局,還可以做好輔助線,然後根據需要裁剪圖片,然後使用Dreamweaver建立表格,將圖片按照既定的布局插入,也是可以的。
其實不要恐懼切片,切片結束之後,選擇按照web方式保存,你可以迅速得到一個帶切好圖片的網頁,不明白的話可以1414
739聯系我

與模板網頁設計psd相關的知識