CSS ナビゲーション メニューをすばやく作成する方法のチュートリアル_CSS/HTML

CSS タブ デザイナーは、CSS を使用してナビゲーション メニューをデザインするビジュアル ソフトウェアです。このソフトウェアには、60 を超えるさまざまな組み込みスタイルがあり、CSS メニューをすばやく生成できます。ソフトウェアによって生成される XHTML コードは Web 標準に厳密に従っており、作成される CSS メニューは、システムに付属する Internet Explorer、Firefox、Opera、Netscape など、さまざまな主流ブラウザと互換性があることは特に注目に値します。

CSSタブデザイナーの操作は非常にシンプルで、メインインターフェイスは項目(Items)、スタイル(Tab Styles)、プレビュー(Preview)の順に配置されており、ほぼすべての操作が完了します。図に示すように、メイン インターフェイス。

新しいメニューを作成する手順は非常に簡単です。さまざまなスタイルのメニュー スタイルが 60 以上用意されています。まず必要なスタイルを選択し、左側の [項目] をクリックします。 「サンプルを入力」すると、「プレビュー」で効果がすぐに確認でき、メニューが生成されます。

もちろん、ソフトウェアの組み込みスタイル テンプレートのメニュー項目はすべて英語なので、中国人ユーザーにはまだ適していません。現在のメニュー項目は、メインウィンドウの左側の「項目」に表示されます。項目ツールバーには、左から「複数の項目の追加」、「項目の追加」、「項目の削除」(項目の削除)、「上へ移動」、「項目の削除」の複数のボタンが配置されています。図に示すように、下に移動して、選択した項目を編集します。

現在のプロジェクトをダブルクリックして編集ダイアログ ボックスに入り、図に示すように、元の英語を必要な中国語に変更できます。

すべてのコンテンツを変更すると、プレビュー領域で効果を確認できます。このとき、メニューの文字が予想どおりの中国語ではなく文字化けしていることがわかりました。これはなぜでしょうか。写真の通り。

CSS Tab Designer は英語のソフトウェアであり、プリセットのエンコーディングは英語の Web ページ用であるため、エンコーディングを手動で中国語に変更する必要があります。ソフトウェア自体にはコード編集機能がないため、CSSメニューWebページファイルが生成された後に修正を加えます。

プレビュー時に文字化けが発生するのはやはり良くありませんが、プレビュー領域の空白部分を右クリックし、右クリックメニューから「エンコード→簡体字中国語(gb2312)」を選択するとプレビュー効果が得られます。写真のように正常に戻ります。

いつの間にか CSS メニューの準備ができています。ファイルをエクスポートしましょう。ソフトウェア ツールバーの [HTML の生成] ボタンをクリックすると、保存ダイアログ ボックスが表示されます。今回の例： 保存先フォルダー：D:web を選択し、ファイル名：メニューを入力して「保存」ボタンをクリックすると完了です。

前述したように、ソフトウェアによって生成される Web ページのエンコーディングはデフォルトでは英語ベースです。次に、エンコーディングの変更を開始します。

D:web ディレクトリに入ると、通常 2 つのファイルが表示されます:

menu.html、生成された CSS メニュー Web ページ。

menu1.gif、CSS メニューによって呼び出される関連画像。実際の環境では、ファイル名は多少異なる場合があります。

menu.html ファイルは、システムに付属の「メモ帳」を使用して開くことができます。

CSS タブ デザイナーによって生成されるファイルのデフォルトのエンコードは「ISO-8859-1」ですが、図に示すように、中国語のエンコード「gb2312」に変更できます。

変更結果を保存して、もう一度 menu.html を開いて確認するだけです。どうですか、コード化けはありません。