各HTMLエンコーダーは、将来のサイトのレイアウトから.psd画像をカットする必要があり、このタスクは非常にありふれたものであり、経験豊富なタイプセッターが自動的に行います。 脳に負担をかけずに、単に画像を切り取り、適切な形式と最適化設定を選択し、神がそれをあなたの魂にどのように入れるかを名前を付け、画像とともにフォルダに入れます。
しかし、すべてのHTMLエンコーダーは、/ img /フォルダーを開いて雪に覆われたロゴやクリスマスツリーの装飾、または長い間忘れられていたプロジェクトのその他の「簡単なスタイル変更」を追加するときに、すでに何も理解していないことに気付きました。 hueta.jpgとsmallpic.gifの名前は何の意味もありません。3x3ピクセルの画像とほとんど目立たない半透明の.pngシャドウの目的は謎のままであり、コードを掘って物事の順序を復元するのに時間をかける必要があります。 おなじみの状況？
Webプロジェクトの画像命名の問題を体系化し、次の画像名のスキームを提供しようとしました。
宛先[_name] [_ネスティング] [_バックグラウンド] [_位置] [_サイズ] [_アクティビティ] .extension
区切り文字としてハイフンに慣れている開発者向けの代替手段：
宛先[-name] [-ネスティング] [-バックグラウンド] [-位置] [-サイズ] [-アクティビティ] .extension
図からわかるように、写真の目的とその拡大の指定のみが必須です。 残りのパラメーターは本質的に明確になっています。
すべてのパラメーターと許容値について説明します。
予定
「写真の要素は何ですか？」という質問に答えます。 これは必須パラメーターであり、一般に名前関数を置き換えることができます。
汎用要素- ロゴ（ロゴ）-ロゴ
- icon（アイコン）-アイコン
- li（リストアイテム）-リストアイテムマーカー
- title（title）-グラフィックタイトル
- header（header）-グラフィックヘッダー
- フッター（フッター）-グラフィックフッター
- hz（=））-目的を判断するのが難しい要素
ナビゲーション- ボタン（ボタン）-ボタン
- リンク（link）-リンク
- prev（前のページ）-前のページへのリンク
- next（次のページ）-次のページへのリンク
区切り記号- hr（水平ルール）-水平セパレーター
- vr（垂直規則）-垂直区切り文字
役職
名前は、写真の主な本質を反映する必要があります。 一般的なケースでは、そうでない場合があります、その後、画像の主な識別の役割が想定されます。
ネスティング
アイテムがネストされているかどうかを決定します。 たとえば、第1レベルよりも深いメニューや第2レベルのリスト要素に使用されます。
背景
画像が背景画像かどうかを決定します
役職
親（論理）要素内の画像の位置。 丸みのある要素を指定するのに適しています。 たとえば、area_tl.gifは左上のフィレットの素晴らしい名前です。
- _t（上部）-上部
- _r（右）-右
- _b（下）-下
- _l（左）-左
- _c（中央）-中央に
- _tl（左上）-左上
- _tr（右上）-右上
- _bl（左下）-左下
- _br（右下）-右下
大きさ
画像のサイズ。 少なくとも2つのオプションが使用されることを前提としています。 _sがある場合、_mまたは_lが必要です。 たとえば、プレビューやフルサイズの画像を示すのに適しています。
アクティビティ
要素のアクティビティの指定。 主にリンク、メニュー項目、ボタンに使用されます。
- _hov（ホバー）-フォーカスを受け取った要素
- _cur（現在）-現在の要素
- _vis（訪問済み）-訪問済みアイテム
- _dis（無効）-非アクティブな要素
延長
Webアプリケーションの有効な画像拡張子。
この記事が、HTMLコーダー、プログラマー、コンテンツマネージャーに役立ち、長い間忘れられていた、または初めて見られた外国のプロジェクトのサポートで作業を促進することを願っています。 幸せになり、時間を有効に活用して管理しましょう！