Pjblogテンプレート作成チュートリアル超お勧め_交流体験

2007.1.30更新…http://www.dnxh.cn/blog/article.asp?id=155より転載
Pjblogのユーザーベースはますます大きくなり、ブログはブロガーのオンライン ホームに相当します。個性が追求される現代において、自分の個性に合ったブログ用のスキンを作りたいというのは誰もが願うことです。しかし、やはりある程度の知識が必要ですので、希望を叶えるためにはしっかりと勉強する必要があります。ゼロから始めますが、おそらく次のようなプロセスになります。 準備→スキンのコンセプト→描画→スライス→CSSの作成→プレビュー→互換性のデバッグ→細部の美化というサイクルプロセスです。このチュートリアルを使用して、スキンの作成方法を誰もが理解できるようにしたいと思います。他人が作成したスキンを使用する必要はありません。ブログを美しく個性的に装飾することができます。非常に興味深いので読み進めましょう...
1. 準備
1.1 必要な基礎
知識を学びたいという意欲がなければなりません。これがすべての前提条件です。 Pjblog の使用法をある程度理解していることになります (スキンが何なのか、またそのインストール方法がわからない場合は、読み進めないことをお勧めします)。 Skinをやるときは、慎重で、自分に厳しく、美意識を持たなければなりません。いくつかの描画ソフトウェア (Adobe Potoshop、Fireworks など) に慣れておくことが最善です。 Tomato は CSS に関する非常に優れたチュートリアル を作成しました (登録が必要です)。
2.2 必要なツール
まず第一に、コンピューターが必要です。モニターの色はそれほど悪くありません (私のラップトップの LCD モニターでは、私は唖然としました...）。描画ソフト Adob​​e Potoshop、Fireworks など。 CSS書き込みツールはもちろん、メモ帳を使って書くこともできます。カラーマッチングソフト、スクリーンショットソフト。これらは基本的にこのサイトでダウンロードできます。過剰なトラフィックによってサイトがブロックされるのを防ぐには、ダウンロード レベルを上げるか、ダウンロード アドレスをランダムに変更するしかありません。ぜひ登録してダウンロードしてください、ご協力ありがとうございます！
Macromedia Studio 8.0 公式簡体字中国語版
エミュールのダウンロード アドレス: http://lib.verycd.com/2005/10/14/0000069569.html
同意する Web ページ実稼働ソフトウェアについては、ここでは主にスイートの Fireworks を使用します (チュートリアルで使用されます)。もちろんAdobe Photoshopも使えます。
CSS 作成ツール EditPlus V2.1.2 Build 147 中国語版
ダウンロード アドレス: クリックしてファイルをダウンロード
もちろん、そうではないという人もいますDreamweaverを使った方が良いのでしょうか？ここで使用することはお勧めしません。また、CSS の視覚的な記述は、コードの意味を覚えるのにあまり適していません。本来、視覚的にCSSを書くにはTopStyle3が最適なツールですが、Pjblog間のCSSが複数のファイルに分かれており、使ってみると効果があまり分かりません。
Color Schemer Studio1.5 カラー マッチング ツール
ダウンロード アドレス: クリックしてファイルをダウンロードします
カラー マッチングは発想の第一歩です肌。このツールはカラーマッチングにおいてより専門的です。
Su Yu スタイルシート中国語マニュアル 2.0 (以下「マニュアル」)
ダウンロードアドレス: クリックしてファイルをダウンロードします
デバッグ ソフトウェア Firefox
ダウンロード アドレス: クリックしてファイルをダウンロードします

現在 94% の人が IE を使用していますが、Firefox ユーザーも増加しています。 Firefox がどれほど優れているかについてはここでは詳しく説明しません。ただし、2 つのブラウザ間では CSS の互換性の問題が発生するはずです。
スクリーンショットツール HyperSnap5
ダウンロードアドレス: クリックしてファイルをダウンロードします
これも使ってみて比較的強力だと思うスクリーンショットソフトです。
居眠り[79]をした場合は、休憩してください...
2. スキンをデザインします
2.1 カラーマッチ
ブログの第一印象は視覚的なものなので、色は非常に重要です。

ここでは白、グレー、赤を使用しています。一般的に灰色は、血液型におけるO型と同じように普遍的です。
2.2 レイアウト

ページのレイアウトは、構造を理解すれば、想像力を働かせることができます。ここで話したいのは CSS (Cascading Style Sheets) です。ここで焦点を当てているのはカスケードです。スキンデザインをグラフィックデザインだと言ったら、それは違うと思います。鑑賞の観点からは平面の作品ですが、デザインの観点からは立体です。他に z-index のような属性が存在する可能性はありますか?さらに、CSS のレイヤーは PS または FW のレイヤーと似ています。唯一の違いは、レイヤーの交換順序 - PS は可能ですが、DIV+CSS は可能です。PS は可能ですが、CSS は可能ではありません。 (一部のブラウザでは可能です)。上の図に示すように、Pjblog の構造と DIV の順序がわかります。前者が後者をカバーしています (もちろん、透過にすることもできます)。最初に派手なことはやめましょう。ブログのレイアウトは一般的に次のようなものです。
ここでのヘッダーは、ブログ名、サブタイトル、水平メニューが含まれる head です。
Tbody は、メイン コンテンツが含まれる中央のコンテンツです (mainContent は、このチュートリアルの場所と同様に、私たちが作成するログです) ) 、サイドバー;
足元は、私たちの著作権情報、出願書類などの一部が含まれています。
私たちはPjblogの構造について多くのことを述べてきました。ボックスとボックスの関係になります。そして、Box はどのように構成されているのでしょうか?専門家の Douglas はすでにここで Flash モデルを作成しており、マージン、背景色、背景画像、パディング、境界線、およびそれらの関係を明確に説明しています。
もちろん、これらは Pjblog の主要部分であり、各部分には他の DIV も含まれており、これらの詳細 (水平メニュー、サイドバー コンテンツ パネル、メイン コンテンツ モジュールなど) も美しくなります。要点はブログですが、ゆっくりやっていきましょう。最初に本体を見て、肌の大まかなイメージを頭の中で把握し、次の描画に向けて十分な準備を整えてください。
以下のPjblogの構造モデルを作成しました。
3. 描画
3.1 背景を理解する
背景について特別なセクションがあるのはなぜですか? CSSで使われる画像は全て背景という形で存在しているからです。画像を描画したり切り取ったりするプロセスでは、この点を決して忘れてはなりません。ダウンロード数を減らして改善するために、画像のサイズをできるだけ小さくする必要があります (多くの単純なスキンでは画像が使用されていないか、画像の使用量が少なくなります)。ページの閲覧速度。
次に、背景を見てみましょう:
その属性には、
background-color color
background-image image
background-repeat 繰り返しメソッド
background-attachment スクロールするかどうか
background-position 位置そして描画するときに、必要なものは何ですか？まず、色と画像の関係を見てみましょう。色は常に下に表示され、画像は上に表示されます。この機能は、画像を使用する必要はなく、モノクロの一部の大きな領域にカラーを使用する必要があることです。もう 1 つはリピートで、画像を X または Y に繰り返しまたは非繰り返しで表示できるようにします。この機能は、特定の背景にそのような繰り返しがある場合、画像を切り取るときに幅 (長さ) を 1px に切り取るだけで済み、
Pjblog の構造を組み合わせる必要があるということです。これらの特性を総合的に活用し、独自の立体的思考を養います。
3.2 本体の制作 今使用しているスキンを例に、描画手順を簡単に説明します。
まず、どのようなテーマをやりたいのかを考えてみましょう（これはすでに頭の中に形成されているはずです。または、漠然としたアイデアがあるかもしれません）。

メイントーンは白で両側に少し影があり、側面はグレー(#EEEEEE)幅230pxです。
Fireworks を開き、背景が白の新しい 1000px×768px ファイルを作成します (このスキンのメインの背景は白であるため)。メイン コンテンツの幅が 800 ピクセルであることを確認し、幅 800 ピクセル、高さがキャンバスより大きい四角形を描画し、幅 1 ピクセルの灰色 (#999999) の境界線を追加します。フィルターのグローを使用して影を追加します。フィルターのパラメーターは、幅 5、ソフト化 10、透明度 15、色黒、オフセット 0 に設定されています。
サイドバーを追加し、幅230px、高さがキャンバスより大きい長方形を描画し、1pxの境界線を抑制しないように注意してください。このようにして主要な部分が描かれます。本編を作る際に気を付けるべきことは何ですか？主に考慮しなければならないのはページの高さです。ページの高さはコンテンツによって変わるため、柔軟な高さを作成する必要があります。 Background-repeat を使用して値を y に設定できます。次に、背景が垂直に繰り返されます。
3.2 ヘッドの製作
同様に、まずはどのようなトップを作りたいかを考えてみましょう。

ここで見ているのは、本体に押し付けられた 2 つのテクスチャ付きの半透明の水平バーです。
キャンバスよりも大きな幅を持つ 2 つの長方形を描画します (これら 2 つの適応幅が必要なため)。グラデーションを調整して長方形にテクスチャを追加し、透明度を 80 に調整します。

このようにして、トップの準備が整いました。
3.3 ボトムの制作
ボトムの制作は一般的に比較的単純ですが、ここではトップに対応する横棒も追加されています。ここでは幅を適応させます（もちろんそれも可能です、簡単に始めましょう）。以下は、上部に水平バーが付いた灰色の長方形です。

この時点で、図は基本的に描かれています。ほんの一瞬しか見られないかもしれませんが、構想から完成までに数日かかる場合もあります。効果に見合ったものを得るには、コンテンツを追加するのが最善です。リンクの色を試し、繰り返し変更して、最高の効果を実現します。
3.4 スライス
いわゆるスライスとは、その名の通り、完成した絵を必要な部分に切り分けることです。多くの友人がここで行き詰まっていて、適切に切り取る方法がわかりません。ここで言いたいのは、効果を発揮できるという前提で、写真は小さければ小さいほど良い、小さいほど良いということです。それで、何を切る必要があるのでしょうか？カット方法は？実際には、CSS のニーズに応じて切り取られます。 CSSを学習した後、特定のボックスに背景を設定したい場合は、用意された画像の一部を切り取って使用できます。ゆっくりと写真の切り方を理解していきます。下の写真は、頭の背景画像のスライスです。画像を切り取るためにどのツールが使用されているかもわかります (Fireworks には優れた画像切り取り機能があると思います)。 Fireworks では、スライスは Web ページレイヤーに配置され、スライスに名前を付けることができ、このスライスが必要なときに画像をエクスポートできます。ここでさらに説明したいのは、最適化列のプロパティであるエクスポートされる画像の形式です。個人的には、アルファ チャネル (将来のトレンド) をサポートする PNG32 形式を好みます。不透明な画像が必要な場合は、JPG (サイズが小さい) を選択するのも良いでしょう。

全体的な PNG レイヤード ファイルは、誰もが学習できるように提供されています。 クリックしてこのファイルをダウンロードします
このファイルを開くと確認できます。たとえば、ヘッダー、メイン背景、下部の幅が 800px ではないのは、外側に影を追加したためです。このサイズを必ず考慮してください（通常は必須ですが、影と背景の色があまり変わらない場合は間違いやすいので注意してください）。 CSS を使用して下の白色を作成できるため、グローバル背景をそれほど高くする必要はありません。大きすぎると無駄になります。マウス接触モードがある場合は、2 つの画像に分割せず、CSS を通じて画像の位置を制御することをお勧めします。 CSS について詳しく説明するまでお待ちください。
4. コードの記述
4.1 グローバル スタイル
いよいよコア部分に入ります。 CSS＋DIVを使ってブログを美しくしましょう。多くの友人がいつもこの質問をします。「スキンはどうすればよいですか?」ここで言いたいのは、まず CSS と DIV の関係を理解する必要があるということです。 DIVは家の骨組み（レンガの壁など）のようなもので、CSSは屋内と屋外の装飾です。骨組みがどのように構成されているかを理解していない場合、どうやって装飾できますか？もう 1 つ言及すべき重要な点は、CSS の特性の 1 つは、以前に定義されたものを後で定義したものに置き換えられることです。たとえば、グローバル スタイルでフォントの色を赤に定義し、後で本文でその色を青に定義すると、表示される色は青になります。
本題に入ります。最初にグローバル スタイルについて話しましょう (Pjblog では、Skin フォルダーの下にある global.css ファイルです)。ここでは、ページ全体での特定のタグの外観を定義できます。 body、img、select、th などの特定のタグは組み込みタグです。ここでのスタイルは、内のコンテンツと DIV に対して有効です。コード ( は CSS コード、 は DIV レイアウトとみなされ、次の実行可能なコードで表されます) を見てください。未来はもう繰り返さない）

<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>