Tutorial zum schnellen Erstellen eines CSS-Navigationsmenüs_CSS/HTML

Da sich das Konzept der Webseitenstandardisierung in den Herzen der Menschen festsetzt, übernehmen immer mehr Websites die CSS-Architektur. CSS-strukturierte Webseiten entsprechen nicht nur den W3C-Standards, sondern sind auch sehr schön. Standardisierte Webseiten beginnen mit schönen CSS-Menüs. Wie wir alle wissen, werden CSS-Menüs in einen Code geschrieben, um ein schönes Menü zu generieren. Heute stelle ich Ihnen eine kleine Software vor: CSS Tab Designer!

CSS Tab Designer ist eine visuelle Software, die CSS zum Entwerfen von Navigationsmenüs verwendet. Die Software verfügt über mehr als 60 verschiedene integrierte Stile. Sie müssen nur die vorgefertigten Stilvorlagen ändern, um schnell CSS-Menüs zu erstellen. Besonders hervorzuheben ist, dass der von der Software generierte XHTML-Code strikt den Webstandards folgt und das erstellte CSS-Menü mit verschiedenen gängigen Browsern kompatibel ist, sei es der mitgelieferte Internet Explorer oder Firefox, Opera und Netscape.

Die Bedienung des CSS Tab Designer ist sehr einfach. Die Hauptoberfläche verwendet ein dreispaltiges Layout: Elemente (Items), Stile (Tab Styles) und Vorschau (Preview) sind in der richtigen Reihenfolge angeordnet die Hauptschnittstelle, wie in der Abbildung gezeigt.

Die Schritte zum Erstellen eines neuen Menüs sind sehr einfach. Über 60 Menüstile mit unterschiedlichen Stilen sind unter „Tab-Stile“ vorgefertigt. Wählen Sie zunächst den gewünschten Stil aus und klicken Sie dann auf „Elemente“. „Mit Proben füllen“ können Sie den Effekt sofort in der „Vorschau“ sehen und das Menü wird generiert.

Natürlich sind die Menüpunkte in der integrierten Stilvorlage der Software alle auf Englisch, was für chinesische Benutzer nicht geeignet ist. Wir müssen noch einige Änderungen vornehmen. Die aktuellen Menüelemente werden unter „Elemente“ auf der linken Seite des Hauptfensters angezeigt. Die Elementsymbolleiste ist von links nach rechts mit mehreren Schaltflächen versehen: Mehrere Elemente hinzufügen, Element hinzufügen, Element löschen (Element löschen), Nach oben verschieben, Gehen Sie nach unten und bearbeiten Sie das ausgewählte Element, wie in der Abbildung gezeigt.

Doppelklicken Sie auf ein beliebiges aktuelles Projekt, um das Bearbeitungsdialogfeld aufzurufen. Hier können wir das ursprüngliche Englisch in das erforderliche Chinesisch ändern, wie im Bild gezeigt.

Nachdem Sie den gesamten Inhalt geändert haben, können Sie den Effekt im Vorschaubereich sehen. Zu diesem Zeitpunkt stellten wir fest, dass der Text auf der Speisekarte nicht dem erwarteten Chinesisch entsprach, sondern einige verstümmelte Zeichen. Warum ist das so? Wie im Bild gezeigt.

CSS Tab Designer ist eine englische Software und die voreingestellte Kodierung ist für englische Webseiten, daher müssen wir die Kodierung manuell auf Chinesisch ändern. Da die Software selbst über keine Codebearbeitungsfunktion verfügt, werden wir Änderungen vornehmen, nachdem die CSS-Menü-Webseitendatei generiert wurde.

Es ist immer noch nicht gut, bei der Vorschau verstümmelte Zeichen zu sehen. Sie können mit der rechten Maustaste in den leeren Bereich des Vorschaubereichs klicken und im Kontextmenü „Kodierung → Vereinfachtes Chinesisch (gb2312)“ auswählen, um den Vorschaueffekt zu aktivieren wird wieder normal, wie im Bild gezeigt.

Bevor Sie es wissen, ist das CSS-Menü fertig. Lassen Sie uns die Datei exportieren. Klicken Sie in der Software-Symbolleiste auf die Schaltfläche „HTML generieren“ und das System öffnet das Dialogfeld „Speichern“. Dieses Beispiel: Wählen Sie den Speicherordner: D:web, geben Sie den Dateinamen ein: im Menü und klicken Sie zum Abschluss auf die Schaltfläche „Speichern“.

Wie bereits erwähnt, basiert die von der Software standardmäßig generierte Webseitenkodierung auf Englisch. Als Nächstes beginnen wir mit der Änderung der Kodierung.

Geben Sie das D:web-Verzeichnis ein und Sie werden im Allgemeinen zwei Dateien sehen:

menu.html, die generierte CSS-Menü-Webseite.

menu1.gif, das zugehörige Bild, das vom CSS-Menü aufgerufen wird. Unter tatsächlichen Umständen kann der Dateiname geringfügig abweichen.

Sie können die Datei „menu.html“ mit jedem Texteditor öffnen. Der Autor verwendet den „Notepad“, der dem System beiliegt. Nach dem Öffnen der Datei finden Sie folgenden Inhalt:

Die Standardkodierung der vom CSS Tab Designer generierten Dateien ist „ISO-8859-1“, die in die chinesische Kodierung „gb2312“ geändert werden kann, wie in der Abbildung gezeigt:

So einfach ist das: Speichern Sie die Änderungsergebnisse, öffnen Sie menu.html erneut und schauen Sie nach, wie es ist, es gibt keinen verstümmelten Code!