Was ist der beste Weg, von einem Photoshop-Modell zu semantischem HTML und CSS zu gelangen?

https://stackoverflow.com/questions/19487

html
css

09-06-2019
|

Frage

Ich verwende im Allgemeinen einen manuellen Prozess:

Schauen Sie sich die Seite an, finden Sie die semantischen Elemente heraus und erstellen Sie den HTML-Code
Schneiden Sie die Bilder auf, von denen ich glaube, dass ich sie brauche
Beginnen Sie mit dem Schreiben von CSS
Passen Sie die verschiedenen Schritte nach Bedarf an und wiederholen Sie sie

Haben Sie einen besseren Ansatz oder ein Tool?

Lösung

Ich habe eine ziemlich natürliche Art zu programmieren.Der Schlüssel liegt darin, die Seite wie ein Dokument oder einen Artikel zu behandeln.Wenn man es sich so vorstellt, wird logischerweise Folgendes klar:

Der Seitentitel ist eine Überschrift der obersten Ebene
- Ob Sie den Seitentitel oder den tatsächlichen Seitentitel als h1 festlegen, bleibt Ihnen überlassen. Persönlich würde ich „About Us“ als h1 festlegen und nicht als Stack Overflow.
Die Navigation ist ein Inhaltsverzeichnis und somit ein Bestellliste - Sie können genauso gut ein Ol anstelle eines Ul verwenden.
Abschnittsüberschriften sind h2, Abschnitte innerhalb dieser Abschnitte sind h3s usw.Stapeln Sie sie.
Verwenden Sie nach Möglichkeit Blockzitate und Anführungszeichen.Umgeben Sie es nicht einfach mit „.
Verwenden Sie nicht b und i.Verwenden Sie stark und em.Dies liegt daran, dass es sich bei HTML eher um strukturelles als um präsentationsbezogenes Markup handelt. Stark Und emPhasen-Tags sollten dort verwendet werden, wo Sie das Wort hervorheben möchten.
<label> Ihre Formularelemente.
Verwenden <acronym>s und <abbr>s wo möglich, aber nur in der ersten Instanz.
Das einfachste:stets, stets Geben Sie Ihren Bildern einen alternativen Text.
Es gibt viele HTML-Tags, die Sie verwenden könnten, die Sie wahrscheinlich nicht haben – Adresse für Postanschriften, Bildschirmcode-Ausgabe.Schauen Sie mal vorbei HTML-Hund Für manche ist es meine Lieblingsreferenz.

Das sind nur ein paar Hinweise, mir fallen sicher noch mehr ein.

Oh, und wenn Sie eine Herausforderung suchen, schreiben Sie zuerst Ihr XHTML und dann das CSS.Beim CSS-ing dürfen Sie den HTML-Code nicht berühren.Es ist tatsächlich schwieriger als Sie denken (aber ich habe festgestellt, dass es mich schneller macht).

Andere Tipps

Nun, wenn ich eine Website erstelle, neige ich dazu, beim Schreiben des HTML-Codes das Design völlig zu vergessen.Ich mache das, damit ich kein designspezifisches Markup bekomme und mich auf die semantische Bedeutung der Elemente konzentrieren kann.

Einige Hinweise zum Markieren von Dingen:

Menü – Verwenden Sie das UL-Element (ungeordnete Liste), da genau das ein Menü ist.eine ungeordnete Liste von Auswahlmöglichkeiten.Beispiel:
```
<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>
```
Wenn Sie ein horizontales Menü wünschen, können Sie Folgendes tun:
```
#menu li {
    display: block;
    float: left;
}
```
Logo – Verwenden Sie ein H1-Element (Überschrift) für das Logo anstelle eines Bildes.Beispiel:
```
<div id="header">
    <h1>My website</h1>
</div>
```
Und das CSS (dieselbe Technik kann auf das Menü oben angewendet werden, wenn Sie ein Menü mit grafischen Elementen wünschen):
```
#header h1 {
    display: block;
    text-indent: -9999em;
    width: 200px;
    height: 100px;
    background: transparent url(images/logo.png) no-repeat;
}
```
IDs und Klassen – verwenden Sie IDs, um Elemente zu identifizieren, von denen Sie nur eine Instanz haben.Verwenden Sie die Klasse, um Elemente zu identifizieren, von denen Sie mehrere Instanzen haben.
Verwenden Sie einen Textbrowser (z. B. Lynx).Wenn es sinnvoll ist, auf diese Weise zu navigieren, haben Sie in puncto Barrierefreiheit gute Arbeit geleistet.

Ich hoffe das hilft :)

Ich mache im Wesentlichen dasselbe wie Jon, aber hier sind ein paar andere Ideen:

Verwenden Sie Hilfslinien in Photoshop (und binden Sie sie ein).Ermitteln Sie im Voraus alle Abmessungen für jede Box/Region.
Sammeln Sie alle Ihre Abmessungen und Farb-Hex-Werte in einer Infodatei (ich verwende eine TXT-Datei), auf die Sie leicht verweisen können.Dadurch werden Ihre Alt-Tab-Steuer und die Farbauswahl in Photoshop um ein Vielfaches reduziert.
Nachdem alle meine Anleitungen vorhanden sind, teile ich die gesamte Website in meinen Bilderordner, beginnend mit Fotos und gruppierten Elementen und endend mit den verschiedenen Hintergrundkacheln/-bildern, falls vorhanden.(Tipp:Verwenden Strg-Klicken Sie auf die Ebenenvorschau, um den Inhalt dieser Ebene auszuwählen.

Hinweise zur Verwendung von Photoshop:

Verwenden Sie Hilfslinien oder das Raster.
Verwenden Sie die Notizenfunktion für alle relevanten Informationen
Verwenden Sie immer Ebenengruppen für ähnliche Elemente.Wir müssen in der Lage sein, ganze Regionen mit einem Klick auszuschalten.Platzieren Sie den gesamten „Header“-Inhalt in einer Ebenengruppe.
Benennen Sie Ihre Ebenen immer.
Sie können jede Seitenvorlage in einer PSD-Datei ablegen und sie mithilfe verschachtelter Ebenengruppen organisieren.Auf diese Weise müssen wir nicht alle unsere Anleitungen und Notizen für jede Seitenvorlage auf einer Website einrichten.

Keine Abkürzungen :), aber jeder arbeitet etwas anders.

Dieses Tutorial Das, was gestern in meinem Feedreader aufgetaucht ist, zeigt den Prozess von Anfang bis Ende und hilft vielleicht Leuten, die es noch nie zuvor gemacht haben, aber da Sie ein alter Hase sind, geht es nur darum, Ihre eigenen Methoden zu optimieren.

BEARBEITEN:Der Listapart-Link ist sicherlich stärker automatisiert für „flache“ Designs, bei denen sowohl Imageready als auch Fireworks vom ersten Tag an ziemlich gute Unterstützung hatten, und er wird mit jeder Veröffentlichung besser und semantischer, aber wenn Sie ein komplexeres Design haben, sind es die kleinen Details, die das ausmachen Entwerfen Sie, was es ist, und diese müssen von Hand gemacht werden.

Ich dachte nur, es lohnt sich, darauf hinzuweisen, dass ich zusätzlich zu den hervorragenden Ratschlägen, die Sie bisher erhalten haben, empfehlen würde, sich eine gedruckte Version des Entwurfs anzuschaffen und mit einem roten Stift alle Blockelemente auf dem Entwurf zu markieren, die Sie für richtig halten können den Designer erkennen, eine halbe Stunde lang mit ihm zusammensitzen und besprechen, wie er sich sein Design für die Anwendungsfälle vorgestellt hat, die nicht zum statischen Design passen.

Was passiert, wenn mehr Text in die Navigation eingefügt wird?
Ist diese Breite fest oder fließend?
Hat dieser Inhaltsbereich die richtige feste Höhe oder ist er flüssig?Wenn es flüssig ist, warum haben Sie einen Hintergrund hinzugefügt, der nicht wiederholt werden kann?
Sie haben einen Rand, der sich über die Seite erstreckt und zwei ansonsten verbundene Elemente trennt.Optisch macht es Sinn, aber semantisch gesehen kann ich nicht einfach ein Li verwenden, um diese beiden Elemente unterzubringen.Was ist Ihrer Meinung nach wichtiger?

Es wird Ihnen auch dabei helfen, potenzielle Probleme zu erkennen, von denen Sie sonst vielleicht nicht gewusst hätten, dass es sich um Probleme handelt, bis Sie mit dem Ellbogen tief in CSS versunken sind.

Es erleichtert nicht nur Ihre Arbeit, nachdem Sie es ein paar Mal gemacht haben, Ihr Designer wird ein viel besseres Gespür dafür bekommen, was mit der Auszeichnung seiner Arbeit zu tun hat – manche Designer haben auch echte Probleme zu verstehen, warum etwas, das ihrer Meinung nach optisch sehr einfach aussieht, ein paar Mal braucht Tagelange CSS-Optimierungen, damit es funktioniert.

Einige der Designer, die ich kenne, verwenden normalerweise Illustrator, um die Designelemente zu erstellen.

Diese Seite zeigt, wie es etwas automatisierter geht.

Lernen Sie außerdem die Funktion „Layer Comps“ kennen.Ich verwende dies zum Ändern des Schaltflächenstatus.

Erstellen Sie Ebenenkompositionen für Normal, Hover und Aktiv.
Richten Sie in jedem dieser Bereiche die Effekte/Farbüberlagerungen und sichtbaren Ebenen ein, die zu diesem Status gehören.
Für das Web speichern:Wechseln Sie für jeden Bundesstaat in einen anderen Ordner, es sei denn, es ist einfacher, jedes Slice umzubenennen (andernfalls überschreiben Ihre Hover-Button-Slices Ihre regulären Slices).

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow