我是通過this tutorial創造在Photoshop web layout閱讀最終的東西是這樣的：您如何開始將網頁設計版式轉換爲HTML實現？
alt text http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial215/final.jpg
這似乎產生一個圖像文件，但是並沒有對如何解釋將其轉換爲web application implementation。
我的意思是，你需要有功能的，當有人點擊的「About Us」，「Services」等
那麼，什麼是你需要爲了去執行下一步從這static圖像到更多dynamic功能的Web應用程序？
你是否應該將圖像分成多個部分並將它們作爲背景圖像放置在頁面上？
這個答案與他的問題有關？他詢問如何將大圖片轉換爲網頁。 – monksy 2009-10-12 02:31:18
這是獲取關於如何將圖像切片並切片成網頁的知識的一種方式 - 觀察「野外」技術。 – roosteronacid 2009-10-12 12:43:31
是的。您將需要使用切片工具將圖像分解成多個區域。從那裏，我相信你可以「保存爲Web」，它會生成表格的HTML和圖像，你自己可以轉換成頁面。 Photoshop只是一個難題。
@Nathan Taylor：我有一種感覺，我們的好朋友喬納森費因伯格想懲罰你，因爲我們在我們早期的混亂中站穩腳跟。我投票給你。他的侮辱性答案似乎是自我刪除或主持。 – 2009-10-10 15:41:37
我甚至沒有投票他的粗魯答案;我只是禮貌地建議他是公民。噢，我希望這對你有幫助。 :) – 2009-10-10 15:47:39
爲了擴展在之前的評論：
除非你有興趣花了很多時間學習CSS佈局，你成功的最簡單的途徑是將Photoshop文件發送關閉以你這樣的人psd2html，這確實這種事情非常快速，一個令人震驚的低價格。這將允許您將開發工作集中在應用程序功能上。
在Photoshop中設計一個網頁模板非常棒，因爲您不受任何以前知道如何處理CSS的概念的限制。但是出於同樣的原因也很危險。某些佈局模式非常完善，並且易於使用CSS，而其他看起來應該很容易的東西卻不是。
我同意這一點。如果您真的不知道自己在做什麼，將圖像轉換爲網頁會花費大量時間學習。特別是，要讓設計在所有瀏覽器中都能正常工作，需要很多小技巧，並且需要很長時間才能獲得這個技巧庫。 – wheresrhys 2009-10-11 09:19:43
使用圖像編輯工具將圖像切分爲必要的圖像以製作頁面。知道在哪裏，什麼切片來自經驗，但這裏有一些指針 -
所有圖像是矩形的，因此它可以幫助思考「列」和「行」做切片的時候。但是請僅使用表格數據而不是佈局:)
如果您在圖像中有重複模式，請切割圖像的最小尺寸，以允許模式進行tesselate並使用css重複該模式。
在正確的工作中使用正確的圖像類型，例如用於小動畫的.gif，用於疊加的.png，用於照片的.jpg等。wiki page may be of help here
使用正確的圖像文件大小和尺寸作業。我通常會盡量減小圖像文件的大小，而不會丟失圖像的整體效果。請記住，較大的圖像=更多的帶寬=更長的時間來下載
一旦你有你的圖片，我建議在尋找使用Firefox與pixel perfect plugin和Firebug把頁面在一起。像素完美插件允許您將圖像疊加到網頁上，以便您可以將所有內容對齊以匹配原始模型。
一旦你有一個使用HTML和CSS的基本功能頁面，那麼我將通過JavaScript/JavaScript框架介紹客戶端功能。在完成佈局之前做這件事可能會讓人感到困惑，所以我會到達您對所擁有的東西感到滿意的地步，然後介紹這些功能。這樣做也有助於progressive enhancement並鼓勵unobtrusive JavaScript。
切片圖像通常是這樣做的方式，但請注意，寫入的教程已將您繪製在角落。
請注意，整個圖像（我假設是爲了填充瀏覽器作爲一個網站）只有766 x 700像素。這只是現代顯示器尺寸的一半，因此您將在內容的右側（或中間內容的任一側）擁有大量的空白區域。
平均顯示器尺寸因地理位置而異，因此請熟悉您的觀衆的典型用途，並製作尺寸更大或更大的背景圖層。五年前，我的所有網站的尺寸都是800 x 600的顯示器，現在它們的尺寸是1024 x 768。但是我正在觀看我的網站的流量數據，因爲將近一半的訪問者使用了較大的顯示器。
您用於創建HTML以顯示圖像和文本的方法取決於您這樣做的原因。如果這是一種嗜好或副業，請使用任何所見即所得網站創建軟件包或在線工具。如果您打算學習如何將其作爲職業，那麼請幫助自己，並學習如何使用Web標準（語義HTML/CSS）創建網站。每個人都通過查看其他人的代碼來學習，但要小心誰是你學習的代碼。
查看關於CSS的Eric Meyer書籍和關於網站標準的Jeffrey Zeldman書籍，以瞭解如何使網站不僅適用於當今的瀏覽器，還適用於現代移動設備和明年的瀏覽器。在他們的網站上，查看他們的文章和帖子，並查看他們的HTML源代碼，看看他們是如何做到的。
此外，請查看這七個不同的PSD到HTML教程這article看看其他設計師將如何解決這個問題。
這裏是你需要的東西： Step by step process for CSS/HTML layout?
這是爲了加強上面的鏈接了一些額外的指導： https://stackoverflow.com/questions/97/seo-where-do-i-start/1321284#1321284
不要切片圖像，正如其他人推薦，如果你沒有到。這是非常低效的。圖像切片是一種過時的做法，會導致許多不同的圖像被髮送給用戶，每張圖像都有自己的HTTP標頭。這會浪費帶寬並浪費人們的時間。儘可能少地爲用戶提供圖像文件，並使用CSS使其在您的佈局中工作。查找稱爲CSS Sprites的技術，查看可以在單個文件中提供多少個各種圖像來表示佈局的各種組件。
我用的一種常用方法是使用包括Photoshop，Illustrator等
先設計頁面佈局一旦你的佈局檢查從高層看的圖像是如何佔據頁面上對稱的形狀設計。
接下來確定可以平鋪哪些圖像，如何提前（如前所述）或在CSS中重新創建圖像。例如在上面的圖片中，您可以主要使用CSS創建平鋪框。
您當然可以將其作爲一張圖片進行分片，但是這會造成大量浪費的像素，從而降低頁面性能並增加加載時間。
遠離在您的設計中使用表格，並注意使用div標籤/圖層 使用div標籤與正確格式化的CSS相結合，將產生一個反映上述確切佈局的輕型頁面。
在你的設計中，我還會考慮一些項目（其中一些是上面提到的）設計流體表示的頁面。如果您必須將圖像鎖定到特定尺寸（即700px），請設計頁面，使其位於頁面的中心，並呈現乾淨的圖像以獲得更大的屏幕分辨率。
使用CSS儘可能多的，你可以和多種瀏覽器交叉測試（即Safari瀏覽器，火狐等）的Internet Explorer的不同會從其他瀏覽器渲染CSS所以你應該在開發過程中瞭解和測試這一點。
嘗試創建一個可以平鋪的背景圖像或在較大分辨率下具有快速加載時間的背景圖像。 例如，如果您的網站佈局最佳，請在1024x768的分辨率下使用小尺寸的彩色托盤創建背景，這種顏色托盤的尺寸和漸變可以與多面的共同背景顏色相媲美。這將允許您的背景成爲網站設計的一部分，但也支持更大的分辨率。定位可以在css中爲後臺處理。
如果您是編碼頁面的新手，那麼我認爲它可以幫助使用一些像Photoshop，Illustrator等應用程序將圖像轉換爲html。請注意，當你這樣做的時候，你會得到大量的多餘的代碼，使頁面膨脹，你也會在構成背景的頁面中獲得大量不必要的圖像。
總之，沒有替代品可以開始能夠自己閱讀，解讀和手動編寫文檔。您將在設計中獲得更多的靈活性，並獲得一些所見即所得應用程序中無法訪問的樣式，屬性和屬性。
對CSS的互聯網搜索和DIV標籤的使用將返回給您大量的示例和入門指南。 祝你好運！
在Microsoft Expression Web SuperPreview中，您可以將圖像作爲疊加層覆蓋在您的html上。更新html，直到它們在您計劃支持的所有瀏覽器中看起來相同。
這不是這個問題的正確網站，這是更多的網頁設計問題。 – thomasrutter 2013-03-01 00:40:37