パート1
あなたの顧客
現在実行しているプロジェクトに関係のない各クライアント用のフォルダーが必要です。 このフォルダー内には、各プロジェクトのフォルダーが必要です。 最初は、website /というフォルダーしかありませんが、ロゴ/、レポート/、競合分析/などのフォルダーがすぐに表示されます。また、このフォルダーにデザインファイルを入れて、おそらくそれらのために作成することも理にかなっていますサブフォルダーのデザイン/またはグラフィックス/。
このフォルダーをApacheと共有しないでください。 機密情報を保存します。 使用する開発ツールに応じて、このフォルダーにコードを保存するか、サイトフォルダーの外にコードを移動するかを選択できます。 それをコード/と呼ぶことができます。または、他のプロジェクトのために別のコードがあると思う場合は、website-code /と呼びます。 他のプロジェクトのほとんどがデザインやビジネスに関連している場合、別のフォルダーをまったく必要としないランダムスクリプトを除き、おそらくプロジェクトにはコードがまったくありません。
クライアントの作業フォルダーに加えて、クライアントが表示してはならないドキュメント用に完全に別のフォルダーを作成することもできます。 確かにあなたは定期的に仕事に関係するクライアント文書を見せます、そしていつかあなたは彼にフォルダ全体へのアクセスを与えたいと思うでしょう（そして、いくつかのクライアントはこれについて間違いなく尋ねます：「すべてのファイルをアーカイブして、私にそれらをドロップできますか？」 「すべてのコピーがあることを確認したいだけです。」） 誤って「私が嫌いなもの10個」というファイルを誤って送信するリスクを回避するために、これらのファイルをクライアントの個別の個人用フォルダーに入れてください。
一般に、ここに構築したばかりの構造の例を示します。
YourBusiness/ Accounts/ Documents/ Customers/ bEat/ Minutes/ 10 , .doc Proposal.doc CustomerProjects/ bEat/ website/ ... .... code/ ... ... reports/ graphics/
次に、上記の「code /」および「website /」フォルダについて説明しましょう
画像
画像には、ほとんどの場合、デザインの一部である画像と、サイトに表示されるコンテンツの一部である画像の2種類があります。 後者は、リソースフォルダー（またはダウンロード、またはマルチメディア）、たとえば画像/サブフォルダーにある必要があります。 あなたがほとんど探す必要のないデザイン画像は、画像/フォルダに入れることができます。
デザインがもう少し複雑な場合は、ボタン、アイコン、ナビゲーション、ページ背景などの画像を用意する必要があります。この場合、すぐにこのフォルダに10〜20枚の画像があるので、サブフォルダに分割する価値があります。 最上位のフォルダーに汎用画像を入れておけばいいのですが、同時に、サブフォルダーは膨大な数の小さなファイルを制御するのに役立ちます。 ファイルに機密性が高く覚えやすい名前を付けます（たとえば、form-warning-icon.png）。
スタイルの表
ほとんどのサイトでは、スタイルシートを非常に大きくする必要はありません。 小規模なサイト、または多数の異なるセクション（それぞれ独自のデザイン）を持たない大規模なサイトでも、通常は1つのCSSファイルのみが必要です。 この場合、単にmain.cssまたはstyles.cssと呼ぶことができます。
それにもかかわらず、多くの人はスタイルシートを複数のファイルに分割することを好みます。 これを行うにはいくつかの方法があります。 最も一般的なオプションは、1つのレイアウトテーブル、1つはフォント用、もう1つは色用です。 考え方は悪くはありませんが、実際には管理が複雑になります-多数のクラスを3回（またはそれ以上）割り当てると行き詰まってしまい、バグの追跡は悪夢になります。
「マークアップ」と「コンテンツ」のスタイルを分ける方が良いと思います。 「レイアウト」には、ナビゲーション、フッター、サイドバー、フィールド、セクションなどの要素が含まれます。 「コンテンツ」には、段落、見出し、引用、リスト、フローティング画像、リンクなどの要素が含まれます。 次に進むと、「フォーム」スタイルのファイルを作成するのが理にかなっています。 ただし、Web上のコンテンツがよりインタラクティブになっているため、フォームとコンテンツの境界線はすぐに消去されます。
繰り返しますが、スペードをスペードと呼びます。したがって、これらのファイルは、layout.css、content.css、forms.cssと呼ばれます。 presentation.css、model.css、page.cssなど、より不正確な名前を付ける場合は、開くファイルを決定する前に毎回考える必要があります。
独自の設計要件を持つ個々のページに個別のCSSファイルを用意すると便利な場合があります。 しかし、このようなページの複雑さに応じて、これはより高価になる場合があります。 特定の要素に適したCSSファイルを見つけるためにエディターのタブをクリックする必要がある場合は、とにかくCSSを単純化することをお勧めします。 また、CSSをより魅力的でクリーンにするために、SassまたはLESSを使用することを検討することも役立ちます。 さまざまなマルチメディアファイル用に個別のスタイルシートを用意することもできますが、それらは必ず個別のファイルにする必要があります。 さて、いつものように、例えばprint.cssのように機密性の高い名前を付ける必要があります。
複数のCSSファイルがある場合は問題ありませんが、それらを表示する前に、自動化ツールを使用して1つにマージします。そうしないと、サイトの読み込み速度が非常に遅くなります。 完全にレイアウトされたCSSを手動で組み合わせないでください。 コンピューター自体は、チェスマシンでこれを簡単に行うことができます。 これには、Minify（PHP）またはJuicer（Ruby）を使用できます。
ジャバスクリプト
ほとんどのサイトのJavaScriptファイルとCSSファイルの構成には、多くの共通点があります。 似たような（ただし異なる）機能があり、両方とも解釈のためにブラウザーに提示され、両方ともDOM（正しく使用されている場合）と対話し、またしばしば相互に対話します。 JavaScriptは、CSSがスタイルを作成するために使用する要素の同じセットに機能を追加するためによく使用されます。
通常、JavaScriptライブラリファイル（jquery.js、mootools.jsなど）、いくつかのウィジェット（datepicker.jsやdropdown.jsなど）、および各サイトのいくつかのコードファイル（たとえば、my -image-slider.js）。 これらすべての情報を別々のファイルに保存することは間違いなく理にかなっていますが、多くの場合、サイト用の小さなJavaScriptがあります。
これらすべてのファイルをjavascript /というフォルダーに入れます。 jQueryなどのサードパーティライブラリを使用する場合、このフォルダーを共有する必要があるほど複雑なサイトを作成することはほとんどありません。
テンプレート
テンプレートはコンテンツではなく、コードでもプレゼンテーションでもありません。 テンプレートには、これらの要素の特定の側面が含まれている場合がありますが、正しく使用されている場合、それらの要素の単なるヒントが含まれています。 これは、パターンをスケルトンとして理解するのに役立ちます。 サーバーコードは、テンプレートがコンテンツ（データベースからのコンテンツ、エラーメッセージ、データフィールド値など）を成長させるのに役立ち、ブラウザはそれを美的なシェルで補完し、最終結果を達成できるようにします。
もちろん、テンプレートには、ボタン、ドロップダウンメニューなどのために、人間が読めるテキストがランダムに含まれている場合があります。 これは正常です-そのようなテキストは、原則として、コンテンツではなくページの機能に密接に関連しています。
すべてのテンプレートをテンプレート/フォルダーに入れます。 上記にもかかわらず、テンプレートは実際にはサーバー側のコードであるため（機密性が高い）、共有されないようにしてください。 サイトが電子メールを送信する場合は、プレーンテキストテンプレートとHTMLの電子メールメッセージ用に、このフォルダーにいくつかのサブフォルダーを作成します。 サイトが単なる広告以上のものである場合は、アプリケーションのさまざまなページや画面に対応する多くのテンプレートが必要になります。 スマートフォン用のWebサイトバージョンがある場合は、そのための個別のサブフォルダーも必要です。 このようなサブフォルダーに適切な構造を作成します。 これが良い例です：
templates/ blog/ sidebar.tpl post.tpl comment.tpl emails-plaintext/ subscribe.tpl change-password.tpl emails-html/ subscribe.tpl change-password.tpl social/ twitter-feed.tpl facebook-sidebar.tpl mobile/ base.tpl contact.tpl customer-profile.tpl friend.tpl homepage.tpl reviews.tpl base.tpl contact.tpl customer-profile.tpl friend.tpl homepage.tpl reviews.tpl