Von der PSD-Datei bis zum Teilen von HTML-Tutorials

Gliederung

• Layout planen, Gesamtstruktur aufteilen

• Inhaltsbereich, vom Ganzen zum Teil, dem gemeinsamen Teil im Teil, je nach Kontext Stile anwenden

• Öffentlicher Header (public-header), Tail (public-footer)

• Public Container (public-container /inner-center)

• CSS-Datei, HTML-Struktur, denken Sie mehr über

• Don Lassen Sie nicht zu, dass Inline-Elemente und Blöcke Level-Elemente auf der gleichen Ebene sind

• reset.css, common.css, index.css

• Elemente die schweben müssen, die übergeordneten Elemente sind alle sauber, geben Sie einheitliche Klassen klar, beheben Sie

• Breite und Höhe: Verwenden Sie gerade Einheiten.

• Gute Codierungsstandards und Benennung

• Nicht mehr als drei Benennungsebenen

• Geniale Kombination von Attributen und Elementen, gibt es eine bessere Lösung?

• Verwenden Sie Überlauf, um mit der Situation umzugehen, in der einige Bilder und Texte nicht ausgeblendet werden können .

• Textüberlauf, der überschüssige Textteil wird mit Ellipsen angezeigt.

• Ein Tag kann in beliebige p-, h-, div- und andere Tags verschachtelt werden (gemäß den neuen Spezifikationen wird es im Allgemeinen in derselben Gruppe von Titel-, Bild- und Textkombinationen angezeigt). usw., die auf denselben Ort verweisen. Daher sind große Link-Stile erforderlich, um zu Orten zu springen, was praktischer ist.

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

• Kompatibilität und Detailverarbeitung (vergrößern Sie mehr als 100 %, um die Hinweise zu sehen)

• Reflexion Ob die HTML-Struktur angemessen ist

• CSS-Hack-Verarbeitung

• Bevor Sie beginnen

• Wenn Sie noch nicht bereit sind, empfehlen wir Ihnen, den ersten Teil dieser Tutorial-Reihe zu Ende zu lesen

• :

• Verwenden Sie

• Photoshop

• , um eine kleine, moderne

• Produkthomepage zu gestalten

• ,

• weil der zweite Teil wird benötigt. Der erste Teil ist die fertige

• psd

• -Datei.

• Wenn Sie den ersten Teil überspringen möchten, können Sie die Quelldatei direkt im ersten Teil herunterladen, Sie benötigen sie dazu Weiter unten.

• Erstellen Sie die Dateistruktur und bereiten Sie die Datei vor

• 1

• Erstellen Sie ein neues leeres Verzeichnis auf dem Desktop und nennen Sie es

• Portfolio

• .

• 2

• in

• Erstellen Sie weiterhin das Verzeichnis

• Bilder

• unter dem Verzeichnis Portfolio

• zum Speichern von Bildern.

• 3

• Als nächstes erstellen Sie zwei leere Dateien

• styles.css

• und

• index.html

Gesamtstruktur

• Seiteninhalt

• Kopfzeile

• Abschnittsmerkmal (kann hinzugefügt/gelöscht werden)

• section-main

• section-postscript (kann hinzugefügt/gelöscht werden)

• footer

• Öffentlicher Teil

• Innenzentrum

oder

• Seiteninhalt

• Kopfzeile

• Abschnittsmerkmal (kann hinzugefügt/gelöscht werden)

• Abschnittsname-1

• Abschnittsname-2

• ...

• Fußzeile

• Öffentlicher Teil

• inner-center/public-container

Abschnitt-Haupt

Kein Seitenleisten-Design

section.section-main>.inner-center

Linkes Seitenleisten-Design

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

Doppeltes Seitenleisten-Design

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

Spezifische Bedürfnisse

• Responsives Design

• Prozent-Design

• Design mit fester Breite

Codespezifikationen

• HTML(fex-team)

• CSS(fex-team)

Namenskonventionen und Anwendungen

Gemeinsame Klassenschlüsselwörter

• Layoutklassen: Kopfzeile, Fußzeile, Container, Hauptzeile, Inhalt, Seite, Seite, Abschnitt

• Wrap-Klasse: Wrap, Inner

• Blockklasse: Region, Block, Box

• Strukturklasse: hd, bd, ft, oben, unten, links, rechts, Mitte, Spalte, Zeile, Raster, Spanne

• Listenklasse: Liste, Element, Feld

• Primäre und sekundäre Kategorien: primär, sekundär, untergeordnet, untergeordnet

• Größenkategorien: s, m, l, xl, groß, klein

• Statusklasse: aktiv, aktuell, geprüft, schweben, fehlgeschlagen, Erfolg, Warnung, Fehler, ein, aus

• 导航类：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》

Das obige ist der detaillierte Inhalt vonVon der PSD-Datei bis zum Teilen von HTML-Tutorials. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!