從Photoshop模型轉換到語義HTML和CSS的最佳方式是什麼？

Question

我一般使用手動過程：

1. 看網頁，找出語義元素，並建立HTML
2. 片了，我覺得我的圖像將需要
3. 開始寫CSS
4. 根據需要調整和重複不同的步驟

有更好的方法或工具嗎？

Answer 1

我有編碼的一種相當自然的方式。關鍵是要像文檔或文章那樣處理頁面。如果你覺得它像下面這樣的變成邏輯清晰：

1. 頁標題是一個頂級標題

   • 無論你做網站的標題或實際頁面標題H1是由你 - 我個人會讓關於我們h1而不是堆棧溢出。

2. 導航是一個目錄，因此一個有序列表 - 你不妨使用醇通過UL認證。

3. 部分標題是h2，這些部分中的部分是h3等。將它們堆疊起來。

4. 儘可能使用塊引號和引號。不要只用」括起來。

5. 不要使用B和I，使用強和他們。這是因爲HTML是結構性的，而不是表示性標記。強和EM phasis標籤應使用在那裏你會注重這個詞。

6. <label>你的表單元素。

7. 使用<acronym> S和<abbr> S其中可能的，但只在第一個實例。

8. 最簡單的：總是，總是給你的圖像一些替代文字。

9. 有很多您可能使用的HTML標籤，您可能沒有 - 地址爲郵政地址，屏幕代碼輸出。看看HTML Dog對於一些人來說，這是我最喜歡的參考。

這只是一些指標，我敢肯定我能想到更多。

哦，如果你想要挑戰，先寫你的XHTML，然後寫CSS。在CSS中，您不允許觸摸HTML。這實際上比你想象的要難（但我發現它使我更快）。

Answer 2

我知道的一些設計師通常使用Illustrator來製作設計元素。

Answer 3

沒有捷徑:)但每個人的工作方式稍有不同。

This tutorial昨天在我的feedreader中彈出的過程顯示了從頭到尾的過程，可能會幫助以前從未做過的人，但是因爲您是一個老手，所以簡化了您自己的方法。

編輯： 的listapart環節肯定是其中兩個ImageReady中和煙花爆竹已經從一開始有不錯的支持，它有更好，更多的語義與每一個版本，但「平」的設計更自動化的，如果你有一個更復雜的設計這是令設計變得簡單，而且必須由人手完成的。

Answer 4

This page顯示瞭如何做到更自動一點。

Answer 5

那麼，當我建立一個網站時，我傾向於在寫HTML的時候完全忘記設計。我這樣做，所以我不會結束任何設計特定的標記，所以我可以專注於元素的語義意義。

一些指點如何標記的東西：

• 菜單 - 使用UL（無序列表）元素，因爲這是一個菜單到底是什麼。一個無序的選擇列表。例如：

  <ul id="menu"> 
      <li id="home"><a href="/" title="Go to Homepage">Home</a></li> 
      <li id="about"><a href="/about" title="More about us">About</a></li> 
  </ul> 
  

  ，如果你想一個水平的菜單，你可以這樣做：

  #menu li { 
      display: block; 
      float: left; 
  } 
  

• 標誌 - 使用H1（標題）元素爲標誌，而不是image.Example：

  <div id="header"> 
      <h1>My website</h1> 
  </div> 
  

  而CSS（同樣的技術可以應用到上面的菜單，如果你想用的圖形項目的菜單）：

  #header h1 { 
      display: block; 
      text-indent: -9999em; 
      width: 200px; 
      height: 100px; 
      background: transparent url(images/logo.png) no-repeat; 
  } 
  

• ID和類 - 使用ID來標識只有一個實例的元素。使用類標識您獲得多個實例的元素。

• 使用文本瀏覽器（例如，lynx）。如果以這種方式進行導航是有意義的，那麼在可訪問性方面你做得很好。

我希望這有助於:)

Answer 6

我基本上是做同樣的事情喬恩的做法，但這裏有一些其他的想法：

1. 在Photoshop中使用指南（並鎖定他們）。提前確定每個盒子/區域的所有尺寸。

2. 將所有尺寸和顏色十六進制值收集到信息文件（我使用txt文件），您可以輕鬆參考。這將減少您的alt-tab稅和多次在Photoshop中選擇顏色。

3. 畢竟我的指南到位後，我會將整個網站分成我的圖片文件夾，從照片和分組元素開始，以各種背景圖片/圖片結尾，如果它們存在。 （提示：使用ctrl - 點擊圖層預覽選擇該圖層的內容）。

注意事項使用Photoshop：

• 使用指南或電網。
• 對任何相關信息使用註釋功能
• 對相似的元素始終使用圖層組。我們需要能夠一次點擊關閉整個區域。將所有'標題'內容放在一個圖層組中。
• 總是命名你的圖層。
• 您可以將每個頁面模板放在一個PSD文件中，並使用嵌套的圖層組來組織它們。這樣我們就不必爲網站上的每個頁面模板設置所有的指南和註釋。

Answer 7

我只是覺得值得指出的是，除了迄今爲止的出色建議之外，我還建議您使用紅色筆標記所有塊元素在設計上，你認爲你可以在設計中發現並坐下半個小時，並談論他們如何設計他們的設計，以適應不適合靜態設計的用例。

• 將更多文本放在導航中時會發生什麼？
• 這個寬度是固定的還是流體的？
• 此內容窗格是否位於右側固定高度或流體？如果它很流暢，你爲什麼要放置一個不能重複的背景？
• 你有一個沿頁面向下延伸的邊框，它打破了另外兩個連接的元素。從視覺上來說它是有道理的，但從語義上講，我不能僅僅使用李來安置這些元素。你認爲更重要的是什麼？

它還可以幫助你發現潛在的問題，否則你可能沒有意識到，直到你的手肘深入CSS。

不僅讓您的工作在幾次後變得更輕鬆您的設計師將更清楚地瞭解他們的工作是什麼 - 一些設計師在理解爲什麼他們認爲看起來非常簡單將需要幾天的CSS調整才能工作。

Answer 8

另外，瞭解「圖層補償」功能。我用它來改變按鈕狀態。

1. 爲正常，懸停和活動創建圖層複合。
2. 在其中的每一箇中，設置屬於該狀態的效果/顏色疊加層和可見層。
3. 保存爲網頁：爲每個狀態轉到其他文件夾，除非重命名每個切片更容易（否則您的懸停按鈕切片將覆蓋您的常規切片）。