Tutoriel sur la façon de créer rapidement un menu de navigation CSS_CSS/HTML

Alors que le concept de standardisation des pages Web prend racine dans le cœur des gens, de plus en plus de sites Web adoptent l'architecture CSS. Les pages Web structurées en CSS sont non seulement conformes aux normes du W3C, mais sont également très belles. Les pages Web standardisées commencent par de superbes menus CSS. Comme nous le savons tous, les menus CSS sont écrits dans un morceau de code pour générer un beau menu. Aujourd'hui, je vais vous présenter un petit logiciel : CSS Tab Designer !

CSS Tab Designer est un logiciel visuel qui utilise CSS pour concevoir des menus de navigation. Le logiciel dispose de plus de 60 styles intégrés différents. Il vous suffit de modifier les modèles de style prêts à l'emploi pour générer rapidement des menus CSS. Il convient particulièrement de mentionner que le code XHTML généré par le logiciel suit strictement les normes du Web et que le menu CSS créé est compatible avec divers navigateurs grand public, qu'il s'agisse d'Internet Explorer fourni avec le système ou de Firefox, Opera et Netscape.

Le fonctionnement de CSS Tab Designer est très simple. L'interface principale adopte une disposition en trois colonnes : les éléments (Items), les styles (Tab Styles) et l'aperçu (Preview) sont classés dans l'ordre. l'interface principale, comme le montre la figure .

Les étapes pour créer un nouveau menu sont très simples. Il existe plus de 60 styles de menu avec différents styles prédéfinis dans « Styles d'onglets ». Sélectionnez d'abord le style dont vous avez besoin, puis cliquez sur les « Éléments » sur le à gauche "Remplir avec des échantillons", vous pouvez immédiatement voir l'effet dans "Aperçu", et le menu est généré.

Bien entendu, les éléments de menu du modèle de style intégré au logiciel sont tous en anglais, ce qui ne convient pas aux utilisateurs chinois. Nous devons encore apporter quelques modifications. Les éléments de menu actuels sont affichés dans « Éléments » sur le côté gauche de la fenêtre principale. La barre d'outils des éléments est organisée avec plusieurs boutons, de gauche à droite : Ajouter plusieurs éléments, Ajouter un élément, Supprimer un élément (Supprimer un élément), Monter, Descendez, modifiez l'élément sélectionné, comme indiqué dans la figure.

Double-cliquez sur n'importe quel projet en cours pour accéder à la boîte de dialogue d'édition. Ici, nous pouvons modifier l'anglais original en chinois requis, comme indiqué sur l'image.

Après avoir modifié tout le contenu, vous pouvez voir l'effet dans la zone d'aperçu. À ce moment-là, nous avons constaté que le texte sur le menu n'était pas le chinois attendu, mais des caractères tronqués. Pourquoi ? Comme le montre l'image.

CSS Tab Designer est un logiciel en anglais et l'encodage prédéfini est destiné aux pages Web en anglais, nous devons donc modifier manuellement l'encodage en chinois. Étant donné que le logiciel lui-même n'a pas de fonction d'édition de code, nous apporterons des modifications après la génération du fichier de page Web du menu CSS.

Il n'est toujours pas bon de faire face à des caractères tronqués lors de la prévisualisation. Vous pouvez cliquer avec le bouton droit dans l'espace vide de la zone de prévisualisation et sélectionner "Encodage → Chinois simplifié (gb2312)" dans le menu contextuel, et l'effet de prévisualisation. reviendra à la normale, comme le montre l'image.

Avant que vous ne vous en rendiez compte, le menu CSS est prêt, exportons le fichier. Cliquez sur le bouton « Générer HTML » dans la barre d'outils du logiciel et le système entrera dans la boîte de dialogue d'enregistrement. Cet exemple : sélectionnez le dossier de sauvegarde : D:web, entrez le nom du fichier : menu et cliquez sur le bouton "Enregistrer" pour terminer.

Comme mentionné précédemment, l'encodage de la page Web généré par le logiciel est basé sur l'anglais. Ensuite, nous commençons à modifier l'encodage.

Entrez dans le répertoire D:web et vous verrez généralement deux fichiers :

menu.html, la page Web du menu CSS généré.

menu1.gif, l'image associée appelée par le menu CSS, le nom du fichier peut être légèrement différent dans les circonstances réelles.

Vous pouvez ouvrir le fichier menu.html avec n'importe quel éditeur de texte. L'auteur utilise le "Notepad" fourni avec le système. Après avoir ouvert le fichier, vous trouverez le contenu suivant :

L'encodage par défaut des fichiers générés par CSS Tab Designer est "ISO-8859-1", qui peut être remplacé par l'encodage chinois "gb2312", comme le montre la figure :

C'est aussi simple que ça, enregistrez les résultats de la modification, ouvrez à nouveau menu.html et regardez, comment ça se passe, il n'y a pas de code tronqué !