Blog-Design Webdesign-Debüt

Die erste Webseite, die ich entworfen habe, sieht wie folgt aus:

Ich bin seit 7 Jahren in dieser Branche tätig und habe mich mit Programmierung und Projektmanagement beschäftigt. Ich habe mich nie mit künstlerischem Design beschäftigt, bin aber jeden Tag damit konfrontiert und wurde beim Verschachteln von Seiten von der Kompatibilität von IE6, Firefox und anderen Browsern gequält. Dadurch habe ich mir eine gewisse Grundlage im Webdesign angeeignet. Nach der umfassenden Überarbeitung der Website des Unternehmens habe ich mich schließlich dazu entschlossen, selbst eine Blog-Oberfläche zu erstellen.

Schließlich habe ich schon programmiert, daher kann die Ästhetik der Benutzeroberfläche, insbesondere des Codes, nicht zu schäbig sein. Also habe ich viele tolle CSS-Frameworks zu Rate gezogen und für den Anfang ein leichtes ausgewählt.

Am Anfang ist alles schwer. Ich verstehe noch nicht ganz, was Div+Css-Layout ist, aber ich weiß ungefähr, dass es nur darum geht, die Ebenen hier und da schweben zu lassen, also habe ich angefangen, basierend auf dem Framework zu schweben. Links- und Rechtsstruktur, zweispaltiges Layout, feste Breite und Höhe, links und rechts schwebend, der Seitenrahmen erschien bald, es scheint ganz einfach zu sein.

Der zweite Schritt besteht darin, den Rahmen mit Inhalt zu füllen. Nachdem ich den Avatar eingefügt hatte, sah er nicht gut aus, also dachte ich, lass es uns rund machen. Die Avatare des Blogs werden jedoch von Benutzern hochgeladen, und Benutzer können selbst keine abgerundeten Ecken erstellen. Es scheint, dass ich immer noch die Stilsteuerung verwenden muss. Ich habe im Internet nachgeschaut, mein Gott, CSS ist so mühsam, und ich musste lange an 4 DIVs herumbasteln. Ich gab auf und suchte nach einem Fertigprodukt. Google suchte und fand „Rounded Corner Frame Component – ​​Bingjifeng“. Ich sah, dass der Code in JS war, in China erstellt wurde und gut geschrieben war. Er bot eine Vielzahl von Möglichkeiten, abgerundete Ecken zu implementieren, und war einfach aufzurufen. Also verwendete ich ihn, und das Problem der abgerundeten Ecken des Avatars war gelöst.

Schritt 3: Tab-Effekt. Wie implementiere ich den Kategoriewechsel eines Blogs mithilfe des Tab-Effekts? Die Antwort lautet ------- Jquery. Wer möchte schon selbst damit experimentieren, wenn er es gewohnt ist, die vorgefertigten zu verwenden? Ich habe online gesucht und viele gefunden. Ich habe sie geprüft und ausgewählt und mich schließlich für eine einfache Version entschieden, mit der sich Wechsel- und Überblendeffekte erzielen lassen. Ich habe den Code eingefügt und leichte Anpassungen am Stil und an den Bildern vorgenommen. Oh, es ist unglaublich. Bin ich zu talentiert oder ist es wirklich so einfach?

Schritt 4: Fügen Sie einige dynamische Effekte hinzu. Ich persönlich bevorzuge ausgefallene Dinge. Ich freue mich über Flugeffekte auf der Website, aber was kann schon ausgefallen sein im Blog? Da gibt es wirklich nichts. Lassen Sie uns also unten einen kleinen Effekt für die Teammitglieder erstellen. Wie das Sprichwort sagt: Wer möchte das selbst machen, wenn er es gewohnt ist, vorgefertigte Effekte zu verwenden? Ich habe die JQuery-Spezialeffekte geöffnet, die ich zuvor sortiert hatte, und schließlich einen gefunden, den ich verwenden kann. Der Effekt sieht ziemlich cool aus. Das Ding sieht gut aus, aber es ist ziemlich schwierig, es zusammenzusetzen. Aber ich habe es endlich geschafft. Schauen wir uns den Effekt an.

Schritt 5: Registrierung, Anmeldeschaltflächen, Listen und andere Inhalte. Das ist einfach und im Handumdrehen erledigt. Dann begann ich, die Kompatibilität anderer Browser ohne IE7 in Frage zu stellen. Sobald IE6 geöffnet wurde, verdammt, wurde die Seite nicht wiederzuerkennen und schrecklich. Was soll ich tun? Ist die von mir erstellte Benutzeroberfläche so fragil? Nein, ich öffnete die CSS-Wissensdatenbank und begann, etwas über den 3-Pixel-Bug in IE6, die speziellen Stile von Firefox usw. zu lernen. Nachdem ich mit dem Lernen fertig war, stellte ich fest, dass es bereits Nachmittag des nächsten Tages war. Ich hatte es nicht umsonst gelernt. Ich änderte es. Ich passte den Stil Stück für Stück an. Schließlich war ich am dritten Abend fertig und atmete erleichtert auf. Die Leistung mehrerer Browser war im Grunde gleich. Ich brauchte dreieinhalb Tage, um eine Seite zu entwickeln, was weit weniger effizient war als unser Kunstdesign. Es gab jedoch immer noch viele Details, die bemerkenswert waren. Ich verspürte ein unerklärliches Erfolgsgefühl und weinte vor Freude, als ich mein erstes Meisterwerk betrachtete!

Als Webprogrammierer ist es traurig, CSS und JS nicht zu kennen, und als Künstler ist es ebenso traurig, Programmen und JS-Frameworks gleichgültig gegenüberzustehen. An der Schnittstelle zwischen Programmen und Kunst gibt es viel zu tun und viele Details zu handhaben. Aus dieser Erkenntnis heraus hat der Autor in den sauren Apfel gebissen und an der Schnittstelle gearbeitet. Am Ende bewiesen die Fakten auch, dass die Schnittstelle von Leuten entworfen wurde, die mit Programmen vertraut sind, da sie die Schwierigkeiten und ungünstigen Faktoren berücksichtigt, auf die Programmierer beim Verschachteln von Seiten stoßen, und sie im Voraus optimiert, sodass Programmierer beim Verschachteln von Codes mit halbem Aufwand das doppelte Ergebnis erzielen und viel Entwicklungskosten und Debugging-Zeit sparen können. Heutzutage legen Unternehmen immer mehr Wert auf Zusammenarbeit und Verbindung. Wenn Sie den leeren Bereich der Verbindung zwischen Programmen und Kunst füllen möchten, müssen Sie Kollegen einbeziehen und mehr in den Bereichen des anderen forschen und gleichzeitig mehr Verständnis und Unterstützung haben. Unterschätzen Sie diesen kleinen Fortschritt nicht, er kann Ihnen eine qualitative Verbesserung bringen.

Derzeit wurde das Schnittstellenprogramm verschachtelt und zum Testen online gestellt. Die Zugriffsadresse lautet http://blog.transnal.com. Alle sind herzlich eingeladen, vorbeizukommen und Kritik zu äußern!