PSDファイルからHTMLへのチュートリアル共有

アウトライン

• レイアウトを計画し、全体構成を分割

• コンテンツエリア、全体から部分、部分内の共通部分、コンテキストに応じてスタイルを適用

• public-header( public-header)、tail (public-footer)

• パブリックコンテナ(public-container/inner-center)

• cssファイル、HTML構造、もっと考えてください

• インライン要素を許可しないでくださいとブロックレベルの要素は同じレベルにあります

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

• フロート化する必要がある要素、親要素はすべてクリーンアップされ、統一クラスのclearfixが与えられます

• 幅と高さ: 偶数単位を使用します。

• 適切なコーディング標準と名前付け

• 名前付けのレベルは 3 つまで

• 属性と要素の賢い組み合わせはありますか

• 一部の画像を対象とするためにオーバーフローを使用します。 、テキストは隠された状況を超えています。

• 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処理

• 始める前に

• まだ準備ができていない場合は、このチュートリアル シリーズの最初の部分を読み終えることをお勧めします

• :

• 写真を使用して、小さくてモダンな

• をデザインしますショップ

• 製品ホームページ

• 、

• 2 番目の部分には

• psd
  が必要です最初の部分で完成した
• ファイル。

• 最初のパートをスキップしたい場合は、最初のパートのソース ファイルを直接ダウンロードできます。続行するには以下で必要になります。

• ファイル構造を作成し、ファイルを準備します

• 1

• デスクトップに新しい空のディレクトリを作成し、

• という名前を付けますリオ

• 。

• 2

• ポートフォリオ

• の下に

• 画像

を作成し続けますディレクトリ
• ディレクトリは写真を保存するために使用されます。

• 3

• 次に、2 つの空のファイル

• styles.css

• を作成します
  index.html
全体構成

ページコンテンツ

ヘッダー
セクション-特集（追加/削除可能）

• セクション-メイン

• セクション追記（追加可能） /delete)

• フッター

• パブリックセクション
インナーセンター
または

• ページコンテンツ

ヘッダー

• セクション-特集(追加/削除可能)

• セクション名-1

• セクション名-2

• ...

• フッター

• 公開セクション
インナーセンター/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)

• 命名規則とアプリケーション

共通クラスキーワード
レイアウトクラス: ヘッダー、フッター、コンテナ、メイン、コンテンツ、サイド、ページ、セクション

ラッピングクラス:wrap、inner

• ブロッククラス:リージョン、ブロック、ボックス

• 構造クラス:hd、bd、ft、top 、bottom、left、right、middle、col、row、grid、span

• リストクラス: list、item、field

• 一次および二次クラス: プライマリ、セカンダリ、サブ、マイナー

• サイズカテゴリ: s、m、l、xl、大、小

• ステータスカテゴリ: アクティブ、現在、チェック済み、ホバー、失敗、成功、警告、エラー、オン、オフ

• 导航类：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 中国語 Web サイトの他の関連記事を参照してください。