從psd檔案到html教學分享

綱要

• 計劃佈局，劃分整體結構

• #內容區域，從整體到局部，局部中的通用部分，根據上下文應用樣式

• 公共頭部（public-header）、尾部（public-footer）

• 公共容器（public-container /inner-center）

• css文件，html結構，多考慮

• 不要讓內聯元素與區塊層級元素處於同一層級下

• reset.css、common.css、index.css

• 需要浮動的元素，父元素統統進行清理，給予統一的類別clearfix

• 寬高度：使用偶數單位。

• 良好的程式碼規格與命名

• #不超過三級命名

• #巧妙屬性和元素配合，還有沒有更好的方案

• #活用overflow，針對一些圖片、文字超出隱藏的情況。

• text-overflow，超出的文字部分，省略號顯示。

• a標籤可以嵌套任何p，h，div等標籤（按照新的規範）一般見於同一組標題、圖片文字組合等鏈接同一個地方的，那麼大一塊地方都需要連結樣式去跳轉，這樣做比較方便。

  <a href="#" class="title">
      <h4>Voluptate cillum fugiat.</h4>
      <p class="comment">Cheese, tomato, mushrooms, onions.</p>
  </a>

• 相容與細節的處理（放大100%以上，才能看出端倪）

• 反思HTML結構是否合理

• css Hack處理

• # 

• 如果你還沒準備好，我們建議您閱讀完這個教學系列的第一部分

• #: 

• 用

• photoshop

• 設計一個小型、現代的

• 產品首頁

•  

• ，

• # 

• 因為第二部分需要第一部分做好了的

• psd

• #檔。

•  

• 如果你想跳過第一部分，你可以直接在第一部分下載來源文件，下面將會需要它才能繼續。

•  

• 建立檔案結構，準備檔案

•  

• 1 

• 在桌面上建立新的空目錄，取名

• portfolio

• 。

•  

• 2 

• #在

• portfolio

• 目錄下方繼續建立

• images

• 目錄用於存放圖片。

•  

• 3 

• #接下來建立兩個空白檔案

•  

• styles.css

• #和

• ##index.html

•  

整體結構

##page -content
header
section-feature（可增/刪除）
• section-feature（可增/刪除）

• section-main

• section-postscript（可增/刪）

#footer

##公共部分

inner-center

or

• # #page-content
header
section-feature（可增/刪除）

• ##section-feature（可增/刪除）

• section-name-1

• section-name-2

...

footer

公共部分

• #inner-center/public-container

• section-main
• 無側邊欄設計

  section.section-main>.inner-center

  左邊欄設計

section.section-main>.inner-center
    aside.aside-left
    main.main>.content

雙邊欄設計

section.section-main>.inner-center
    aside.aside-left
    main.main>.content
    aside.aside-right

特定需求

• 響應式設計

• 百分比設計

固定寬度設計

• #程式碼規格

• HTML(fex-team)

• #CSS(fex-team)

• 命名約定與應用程式
  常見class關鍵字

• 佈局類別：header, footer, container, main, content, aside, page, section

• 包裹類別：wrap, inner

• 區塊類別：region, block, box

• 結構類別：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span############列表類別：list, item, field###### #######主次類別：primary, secondary, sub, minor############# 大小類別：s, m, l, xl, large, small####### ######狀態類別：active, current, checked, hover, fail, success, warn, error, on, off###

• 导航类：nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last

• 交互类：tips, alert, modal, pop, panel, tabs, accordion, slide, --scroll, overlay,

• 星级类：rate, star

• 分割类：group, seperate, divider

• 等分类：full, half, third, quarter

• 表格类：table, tr, td, cell, row

• 图片类：img, thumbnail, original, album, gallery

• 语言类：cn, en

• 论坛类：forum, bbs, topic, post

• 方向类：up, down, left, right

• 其他语义类：btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading...

• 图片命名与图标命名，index-header-logo,index-footer-logo.

• iconfont平台

约定规则

• 关键词间以中划线-连接 以中划线连接，如.item-img

• 使用两个中划线表示特殊化，如.item-img.item-img--small表示在.item-img的基础上特殊化

• 状态类直接使用单词，参考上面的关键词，如.active, .checked

• 图标以icon-为前缀（字体图标采用.icon-font.i-name方式命名）。

• 模块采用关键词命名，如.slide, .modal, .tips, .tabs，特殊化采用上面两个中划线表示，如.imgslide--full, .modal--pay, .tips--up, .tabs--simple

• js操作的类统一加上js-前缀

• 不要超过四个class组合使用，如.a.b.c.d

• 一个类名，不要超过三个单词的连接。

• 主体结构命名前加上该页的命名，如index-banner，index-main。

实践应用

• 通过添加前缀修饰关键词

  public-header,article-header，index-banner,index-panel

• 通过层级关系特殊化类，一般子元素接着父元素的最后一个单词（继承式）

  ul.card-list 
      li.list-item 
          a.item-img-link>img.item-img 
          h3.item-tt>a.item-tt-link 
          p.item-text
  <ul>
       <li> 
          <a href="#"><img src="" alt=""></a> 
          <h3><a href="#"></a></h3> 
          <p></p> 
      </li> 
  </ul>

参考资料

• 什么鬼，又不知道怎么命名class了

• HTML整站结构设计

• 慕课网《从psd到html》

以上是從psd檔案到html教學分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！