Pjblog-Vorlagen-Erstellungs-Tutorial Sehr empfehlenswert_Erfahrungsaustausch

Aktualisiert am 30.01.2007...Nachdruck von http://www.dnxh.cn/blog/article.asp?id=155
Pjblogs Benutzerbasis ist Ein Blog wird immer größer und entspricht dem Online-Zuhause eines Bloggers. Im heutigen Zeitalter des Strebens nach Individualität ist es der Wunsch eines jeden, einen personalisierten Skin für seinen Blog zu erstellen, der zu seinen eigenen Eigenschaften passt. Aber dazu gehört schließlich einiges an Wissen, und wir müssen hart lernen, um unsere Wünsche zu erfüllen. Ich fange bei Null an, was wahrscheinlich ein Prozess wie dieser ist: Vorbereitung → Konzept der Haut → Zeichnen → Schneiden → CSS schreiben → Vorschau → Kompatibilität debuggen → Details verschönern ist ein zyklischer Prozess . Ich möchte dieses Tutorial nutzen, um jedem zu helfen, zu verstehen, wie man Skins erstellt. Sie müssen keine Skins anderer verwenden. Sie können sich auf Ihre eigenen Bemühungen verlassen, um Ihren Blog schön und mit Persönlichkeit zu dekorieren. Sehr spannend, lass uns weiterlesen...
1. Vorbereitung
1.1 Einige notwendige Grundlagen
Du Man muss den Wunsch haben, Wissen zu erlernen, das ist die Voraussetzung für alles. Sie haben ein gewisses Verständnis für die Verwendung von Pjblog (wenn Sie nicht wissen, was Skin ist und wie man es installiert, empfehlen wir Ihnen, nicht weiterzulesen). Wenn Sie Skin machen, müssen Sie vorsichtig sein, streng mit sich selbst umgehen und einen gewissen Sinn für Ästhetik haben. Es ist am besten, mit einer Zeichensoftware (Adobe Potoshop, Fireworks usw.) vertraut zu sein. Tomato hat ein sehr gutes Tutorial zu CSS erstellt (Registrierung erforderlich).
2.2 Benötigte Werkzeuge
Zuallererst benötigen Sie einen Computer und die Farbe des Monitors ist nicht sehr schlecht (der LCD-Monitor meines Laptops macht das). ich war verblüfft...). Zeichensoftware Adobe Potoshop, Fireworks und dergleichen. CSS-Schreibtool, natürlich können Sie auch Notepad zum Schreiben verwenden. Farbanpassungssoftware, Screenshot-Software. Diese stehen grundsätzlich auf dieser Seite zum Download bereit. Um zu verhindern, dass die Seite aufgrund von übermäßigem Datenverkehr blockiert wird, kann ich nur den Download-Level erhöhen und die Download-Adresse nach dem Zufallsprinzip ändern. Bitte registrieren und herunterladen, vielen Dank für Ihre Mitarbeit!
Offizielle vereinfachte chinesische Version von Macromedia Studio 8.0
Emule-Download-Adresse: http://lib.verycd.com/2005/10/14/0000069569.html
Webseite, der ich zustimme Für Produktionssoftware verwenden wir hier hauptsächlich Fireworks in der Suite (es wird im Tutorial verwendet). Natürlich können Sie auch Adobe Photoshop verwenden.
CSS-Schreibtool EditPlus V2.1.2 Build 147 Chinesische Version
Download-Adresse: Klicken Sie hier, um die Datei herunterzuladen
Natürlich sagen einige Leute, dass das nicht der Fall ist. Ist es nicht besser, Dreamweaver zu verwenden? Es wird nicht empfohlen, es hier zu verwenden. Es ist einfacher, sich die Bedeutung des Codes per Handschrift zu merken. Außerdem ist das visuelle Schreiben von CSS nicht sehr ideal. Ursprünglich ist TopStyle3 das beste Tool zum visuellen Schreiben von CSS, aber das CSS zwischen Pjblog ist in mehrere Dateien aufgeteilt und der Effekt ist bei der Verwendung nicht sehr offensichtlich.
Color Schemer Studio1.5 Farbanpassungstool
Download-Adresse: Klicken Sie hier, um die Datei herunterzuladen
Farbanpassung ist der erste Schritt für Sie, schwanger zu werden Haut. Dieses Tool ist professioneller bei der Farbabstimmung.
Su Yu Style Sheet Chinese Manual 2.0 (im Folgenden als „Handbuch“ bezeichnet)
Download-Adresse: Klicken Sie hier, um die Datei herunterzuladen
Debugging-Software Firefox
Download-Adresse: Klicken Sie hier, um die Datei herunterzuladen

94 % der Menschen verwenden mittlerweile den IE, aber auch die Anzahl der Firefox-Benutzer nimmt zu. Ich werde hier nicht näher darauf eingehen, wie gut Firefox ist. Allerdings muss es Kompatibilitätsprobleme mit CSS zwischen den beiden Browsern geben.
Screenshot-Tool HyperSnap5
Download-Adresse: Klicken Sie hier, um die Datei herunterzuladen
Dies ist auch eine Screenshot-Software, die meiner Meinung nach nach der Verwendung relativ leistungsfähig ist .
Wenn Sie eingenickt sind[79], ruhen Sie sich aus...
2. Gestalten Sie Ihre Haut
2.1 Farbanpassung
Der erste Eindruck Ihres Blogs ist visuell, daher ist Farbe sehr wichtig.

Hier verwenden wir Weiß, Grau und Rot. Im Allgemeinen ist Grau universell, genau wie die Blutgruppe O bei den Blutgruppen.
2.2 Layout

Das Layout der Seite ist nicht allzu kompliziert. Nachdem Sie die Struktur verstanden haben, können Sie Ihrer Fantasie freien Lauf lassen. Worüber ich hier sprechen möchte, ist CSS (Cascading Style Sheets). Der Schwerpunkt liegt hier auf der Kaskadierung. Wenn wir sagen, dass Skin-Design Grafikdesign ist, halte ich das für falsch. Aus würdigender Sicht handelt es sich um ein zweidimensionales Werk, aus gestalterischer Sicht ist es jedoch dreidimensional. Wie sonst könnte es ein Attribut wie Z-Index geben? Darüber hinaus können wir einen Vergleich mit den Ebenen in PS oder FW anstellen. Der einzige Unterschied liegt in der Reihenfolge des Ebenenaustauschs – PS kann, aber DIV+CSS nicht – PS kann, aber CSS nicht (Einige Browser können). Wie im Bild oben gezeigt, können wir die Struktur von Pjblog und die Reihenfolge der DIVs sehen. Ersteres deckt Letzteres ab (natürlich kann es auch transparent sein). Lassen Sie uns zunächst nicht allzu ausgefallen sein, das Layout eines Blogs sieht im Allgemeinen so aus.
Der Header ist hier der Kopf, der den Blognamen, den Untertitel und das horizontale Menü enthält.
Tbody ist der mittlere Inhalt, der den Hauptinhalt enthält (mainContent ist das Protokoll, das wir schreiben, genau wie dort, wo sich dieses Tutorial befindet ), Seitenleiste;
Fuß ist die Unterseite, die einige unserer Urheberrechtsinformationen, Einreichungen usw. enthält;
Wir haben so viel über die Struktur von Pjblog gesagt die Beziehung zwischen Box und Box sein. Und wie ist Box aufgebaut? Der Experte Douglas hat hier bereits Flash-Modelle erstellt, die Rand, Hintergrundfarbe, Hintergrundbild, Innenabstand, Rand und den Zusammenhang zwischen ihnen anschaulich erklären.
Natürlich sind dies der Hauptteil von Pjblog, jeder Teil enthält auch einige andere DIVs und diese Details (wie horizontales Menü, Seitenleisten-Inhaltsbereich, Hauptinhaltsmodul usw.) verschönern auch unser Blog Die wichtigsten Punkte, aber machen wir es langsam. Schauen Sie sich zunächst den Hauptkörper an, damit Sie sich im Kopf eine ungefähre Vorstellung von der Haut machen und sich optimal auf unsere nächste Zeichnung vorbereiten können.
Ich habe unten ein Strukturmodell von Pjblog erstellt.
3. Zeichnen
3.1 Den Hintergrund verstehen
Warum gibt es einen speziellen Abschnitt zum Hintergrund? Denn die in CSS verwendeten Bilder liegen alle in Form von Hintergründen vor. Diesen Punkt sollten wir beim Zeichnen und Ausschneiden von Bildern nie vergessen. Wir sollten die Größe der Bilder so weit wie möglich reduzieren (viele einfache Skins verwenden jetzt keine Bilder oder verwenden weniger Bilder), um die Anzahl der Downloads zu reduzieren und zu verbessern Geschwindigkeit beim Durchsuchen von Seiten.
Dann werfen wir einen Blick auf Hintergrund:
Zu seinen Attributen gehören
Hintergrundfarbe Farbe
Hintergrundbild Bild
HintergrundwiederholungWiederholungsmethode
HintergrundanhangOb gescrollt werden soll
HintergrundpositionPosition
Und wenn wir zeichnen, wir brauchen Worauf achten Sie? Schauen wir uns zunächst die Beziehung zwischen Farbe und Bild an. Die Farbe wird immer unten und das Bild oben angezeigt. Die Funktion besteht darin, dass wir in einigen großen Schwarzweißbereichen kein Bild, sondern Farbe verwenden müssen. Die andere Funktion besteht in der Wiederholung, wodurch das Bild in X- oder Y-Richtung wiederholt oder nicht wiederholt angezeigt werden kann. Die Funktion besteht darin, dass wir beim Ausschneiden des Bildes nur die Breite (Länge) auf 1 Pixel reduzieren müssen, um die Struktur von Pjblog zu kombinieren Nutzen Sie diese Funktionen umfassend und pflegen Sie unser eigenes 3D-Denken.
3.2 Herstellung des Hauptkörpers
Nehmen wir den Skin, den ich jetzt verwende, als Beispiel, um den Zeichenprozess kurz zu beschreiben.
Lass uns zunächst einen Blick darauf werfen, was für ein Thema wir machen wollen (dies sollte sich bereits in deinem Kopf gebildet haben, oder du hast vielleicht eine vage Vorstellung).

Der Hauptton ist weiß mit etwas Schatten auf beiden Seiten, und die Seiten sind grau (#EEEEEE) 230 Pixel breit.
Öffnen Sie Fireworks und erstellen Sie eine neue 1000px×768px-Datei mit weißem Hintergrund (da der Haupthintergrund dieses Skins weiß ist). Stellen Sie sicher, dass unser Hauptinhalt 800 Pixel breit ist, zeichnen Sie ein Rechteck mit einer Breite von 800 Pixel und einer Höhe, die größer als die Leinwand ist, und fügen Sie einen 1 Pixel breiten grauen Rand (#999999) hinzu. Verwenden Sie den Filter Glow, um einige Schatten hinzuzufügen. Die Parameter des Filters sind auf Breite 5, Weichzeichnung 10, Transparenz 15, Farbe Schwarz und Offset 0 eingestellt.
Fügen Sie eine Seitenleiste hinzu, zeichnen Sie ein Rechteck mit einer Breite von 230 Pixel und einer Höhe, die größer als die Leinwand ist, und platzieren Sie es auf der linken Seite. Achten Sie darauf, den 1 Pixel großen Rand nicht zu unterdrücken. Auf diese Weise wird unser Hauptteil gezeichnet. Worauf sollten wir bei der Herstellung des Hauptteils achten?Das Wichtigste, was wir berücksichtigen müssen, ist die Höhe der Seite, da sich die Höhe der Seite mit unterschiedlichem Inhalt ändert, sodass wir eine flexible Höhe festlegen müssen. Wir können Background-repeat verwenden, um den Wert auf y zu setzen. Dann wiederholt sich unser Hintergrund vertikal.
3.2 Herstellung des Kopfes
In ähnlicher Weise schauen wir uns zunächst an, was für ein Oberteil wir herstellen möchten.

Was wir sehen, sind zwei strukturierte, durchscheinende horizontale Balken, die gegen den Hauptkörper gedrückt werden.
Wir zeichnen zwei Rechtecke mit einer Breite, die größer als die Leinwand ist (weil wir diese beiden adaptiven Breiten wollen). Fügen Sie dem Rechteck etwas Textur hinzu, indem Sie den Farbverlauf anpassen und die Transparenz auf 80 einstellen.

So ist unser Top fertig.
3.3 Herstellung des Bodens
Die Herstellung des Bodens ist im Allgemeinen relativ einfach. Hier wird auch eine horizontale Leiste hinzugefügt, die der Oberseite entspricht adaptive Breite hier (natürlich kann es auch gemacht werden, fangen wir einfach an). Unten ist ein graues Rechteck mit einem horizontalen Balken oben.

An diesem Punkt ist unser Diagramm im Grunde genommen gezeichnet. Möglicherweise sehen Sie es nur für eine Weile, aber manchmal kann es mehrere Tage von der Konzeption bis zur Fertigstellung dauern. Um den Effekt anzupassen, ist es am besten, etwas Inhalt hinzuzufügen. Spielen Sie mit der Linkfarbe und ändern Sie sie wiederholt, um den besten Effekt zu erzielen.
3.4 Slicing
Das sogenannte Slicing besteht, wie der Name schon sagt, darin, das fertige Bild in die benötigten Stücke zu schneiden. Viele Freunde stecken hier fest und wissen nicht, wie sie es richtig machen sollen. Was ich hier sagen möchte, ist, dass unter der Voraussetzung, dass es Ihre Wirkung zeigen kann, je kleiner das Bild ist, desto besser und je kleiner, desto besser. Was müssen Sie also schneiden? Wie schneidet man? Tatsächlich wird es entsprechend Ihren CSS-Anforderungen zugeschnitten. Sie können dies zunächst überspringen, wenn Sie den Hintergrund in einer bestimmten Box festlegen möchten. Anschließend können Sie einen Teil des vorbereiteten Bildes ausschneiden und verwenden. Langsam werden Sie verstehen, wie man das Bild schneidet. Das Bild unten ist ein Ausschnitt des Kopfhintergrundbildes. Wir können auch sehen, welches Werkzeug zum Ausschneiden des Bildes verwendet wird (ich denke, Fireworks hat eine bessere Bildausschneidefunktion). In Fireworks werden Slices in der Webseitenebene platziert. Wir können die Slices benennen und wenn wir dieses Slice benötigen, können wir das Bild exportieren. Worüber ich hier sprechen möchte, ist das Format des exportierten Bildes, also die Eigenschaften der Optimierungsspalte. Persönlich bevorzuge ich das PNG32-Format, das den Alpha-Kanal unterstützt (zukünftiger Trend). Wenn Sie ein undurchsichtiges Bild wünschen, empfiehlt es sich auch, JPG zu wählen (die Größe ist klein).

Die gesamte PNG-Ebenendatei steht jedem zum Lernen zur Verfügung. Klicken Sie hier, um diese Datei herunterzuladen
Wir können sie sehen, wenn wir diese Datei öffnen. Beispielsweise beträgt die Breite der Kopfzeile, des Haupthintergrunds und der Unterseite nicht 800 Pixel, wie wir zu Beginn gesagt haben. Das liegt daran, dass wir außen Schatten hinzugefügt haben. Berücksichtigen Sie unbedingt diese Größe (im Allgemeinen ist dies erforderlich, es kann jedoch leicht zu Fehlern kommen, wenn die Schatten- und Hintergrundfarbe nicht sehr unterschiedlich sind. Seien Sie also vorsichtig). Der globale Hintergrund muss nicht sehr hoch sein, da wir CSS verwenden können, um die weiße Farbe unten zu erstellen. Wenn er zu groß ist, wird er verschwendet. Es gibt auch das Schaltflächenhintergrundbild. Es wird empfohlen, es nicht in ein Bild aufzuteilen und die Position des Bildes über CSS zu steuern Ich werde warten, bis wir über CSS sprechen. Weitere Details.
4. Code schreiben
4.1 Globaler Stil
Endlich haben wir den Kernteil erreicht, wir werden es tun Verwenden Sie CSS+DIV, um unseren Blog zu verschönern. Viele Freunde stellen immer diese Frage: Wie mache ich Skin? Was ich hier sagen möchte ist, dass Sie zunächst die Beziehung zwischen CSS und DIV verstehen müssen. DIV ist wie das Skelett eines Hauses (Ziegelmauern usw.) und CSS ist die Innen- und Außendekoration. Wenn Sie nicht verstehen, wie das Skelett zusammengesetzt ist, wie können Sie es dekorieren? Ein weiterer wichtiger Punkt ist, dass eine der Eigenschaften von CSS darin besteht, dass das, was später definiert wird, das ersetzt, was zuvor definiert wurde. Wenn ich zum Beispiel im globalen Stil die Schriftfarbe Rot definiere und später im Haupttext die Farbe Blau definiere, sehen wir Blau.
Kommen wir zum Punkt, sprechen wir zunächst über globale Stile (in Pjblog befindet sich die Datei global.css im Skin-Ordner). Hier können wir das Erscheinungsbild bestimmter Tags auf der gesamten Seite definieren. Bestimmte Tags wie body, img, select, th usw. sind integrierte Tags. Der Stil hier gilt für den Inhalt und DIV innerhalb von .Schauen Sie sich den Code an ( ist CSS-Code, wird als DIV-Layout betrachtet und wird durch diesen ausführbaren Code dargestellt die Zukunft. Keine Wiederholungen mehr)

<style type="text/css"> <!-- body { font-family: Arial, Helvetica, sans-serif;/*设置字体*/ background-color: #FFFFFF;/*背景颜色*/ background-repeat: repeat-x;/*背景图像的重复方向*/ margin: 0px;/*边距为0*/ padding: 0px;/*补白为0，这里假如你不要边框和补白一般最好设置一下0值。就像做表格里的一样*/ background-image: url(skins/dnxh10/bg.jpg);/*背景图像位置*/ color: #888888;/*前景颜色*/ } img { max-width: 100%;height:auto;/*图片的宽度（max-width只对非IE核心浏览器有效）*/ border: none;/*无边框*/ } select { font-family: "Times New Roman", Times, serif; } --> </style>