ウェブデザイン制作/ウェブ・ポジショニングのウェブZYCO'S [ ファイルの構成 ]

ファイルの構成

はじめに basic-1

自分が制作するフォルダとマニュアルのフォルダの二階層

 zyco_s_templateのフォルダの第一階層(下のツリーメニューでzyco_s_templateをクリックすると開くファイルとフォルダ)にはこれから新規でウェブ制作していくのに必要なファイルが全て入っています。

 この中でmanual(マニュアル)のフォルダにはマニュアルで使われる全てのファイルが入っていますので、自分専用のファイルをこのフォルダに関連付けしないようにしてください。アップの再は不要になります。

 自分のフォルダを作って制作を進行させる場合は、マニュアルのフォルダを除く全てのファイルとフォルダを自分のフォルダへコピー&ペーストして進めてください。尚、全ての説明はこのデフォルトのフォルダ構成を基本にして進行しますのでご留意ください。

  • zyco_s_template
    • mybody.html…自分専用のボディをこのファイルで制作します。自分用のヘッダーイメージ、サイドメニュー、フッターなどを完成させ、自分専用のテンプレートを制作します。
    • イメージファイル…ツリーメニュー用のファイルが4ファイル。
    • *.html…ここに自分用のページを追加していきます。mybody.htmlを読み込んで、別の名前でここに保存してからテンプレートからレイアウトを貼り付けて編集し自分のページを完成させます。(既存ファイルは存在しません)
    • css
      • 全てのページのデザインとレイアウトを設定したカスケーディング・スタイル・シートが保存。
      • style.cssは自分専用のヘッダーイメージを編集してセットします。
    • images
      • テンプレートで使用するイメージファイルが保存。
    • img
      • マニュアルで使用するイメージファイル(※このフォルダはウェブをアップする際は不要ですが、テンプレートを使う場合に必要です。)
    • js
      • ウェブに演出・効果をもたらすJavaScriptファイルが保存。
    • manual…マニュアル(以下は種類別のまとめ)
      • はじめに…7page
      • ライセンス…1page
      • タイトル…1page 8items
      • ページエンド・ナビ…1page
      • レイアウト…6page
      • 段落リスト…6page
      • テーブル…5page
      • JavaScript…3page
      • インデックス…3page
      • メニュー…1page
      • アイコンの作り方…1page
      • スペシャル…1page
      • css
        • 全てのページのデザインとレイアウトを設定したカスケーディング・スタイル・シートが保存。
      • images
        • テンプレートで使用するイメージファイルが保存。
      • img
        • マニュアルで使用するイメージサンプルファイルが保存。
      • js
        • ウェブに演出・効果をもたらすJavaScriptファイルが保存。
      • psd
        • フォトショップのpsdファイル、jpgファイルが保存されていますので、テンプレートに添ったイメージの再利用ができます。
      • ssi
        • ServerSideIncludeを設定したサンプルファイルが保存。

ページのトップへ

comment out(コメントアウト)について

 コメントアウトとはhtmlについての「注釈」を表します。この注釈の多くはその内容に応じてブロックを形成するように括弧で閉じられます。例えばこのページのソースを表示すると確認できます。

コメントアウト  左図はそのhtml sourceを開いた場合を示しています。括られている内容は独立した構成ですので、この範囲をコピーしたり削除したりしてページのレイアウトを容易に構成することができます。そしてこのコメントアウト表示が全てのテンプレートの骨組みになっています。

<!--┏コメントアウト┓-->と<!--┗コメントアウト┛-->で囲まれた範囲が対象になります。入れ子の構成は左図のように括弧の太さが太いもの(大括弧)と細いもの(小括弧)や▼の数で区別できるように記述されています。

テンプレートを実行するテーマ別INDEXにはブロック単位で切り出したhtmlソースが用意されていますので、説明に従ってコピー&ペーストします。

※htmlを編集するツール

htmlを編集するにはテキストエディタ(例えばTeraPad)がベストです。メモ帳でもいいのですが、複数のファイルを同時に開けないデメリットがあります。アプリケーション(例えばホームページビルダーなど)を使われる場合は、「HTML ソースを自動整形する」などのオプションを外してご利用ください。ここを外さないとコメントアウトの表示が崩れ編集作業に支障をきたします。またアプリケーションをお使いの場合は各自の責任においてご使用ください。

お奨めのテキストエディタ→TeraPad( 詳しい説明とダウンロード

ページのトップへ

自分専用のテンプレートを作る

mybody.htmlを自分専用に手直しする

mybody  追加する全てのページは自分専用のテンプレートmybody.htmlをベースにしてコンテンツが付加されることになります(「テンプレートを使うコツ」で詳しく説明されています)。追加ページを制作する前にこのデザインを完成させておくと無駄な時間は無くなります。

 ヘッダーに使用する画像は後から同じ名前のファイル名で差し替えるだけで新しい画像にチェンジしますので、画像はゆっくり検討していっていいものをアップさせれば良いということです。

ページのトップへ

ヘッダーのイメージを編集する

mybody.htmlを自分専用に手直しする→ヘッダーイメージを変更

 用意されているテンプレート(mybody.html)を開きます。ここをクリックすると現在のmybody.htmlが表示されます。ファイルの場所も併せてご確認ください。ヘッダーイメージはブルーグラデションのみが表示され、メニューもフッターもこのファイルを編集して自分専用を完成させていきますが、まずイメージからとりかかりましょう。

 イメージを制作するには以下ファイルを利用します。[manual/psd]フォルダの中に保存されています。

  • header_blue.psd
    フォトショップをお持ちの方はpsdのフォルダから[header_blue.psd]を開いてヘッダーイメージの編集をします。編集が終わりましたら、[my_header.jpg]の名前で[images]の中へ保存してください。既に同じ名前のファイルが存在しますので、上書き保存になります。
  • header_blue.jpg
    フォトショップをお持ちでない方は[header_blue.jpg]のファイルを開いてこのサイズの画像を編集してください(高さは変更可能です)。編集が終わりましたら、[my_header.jpg]の名前で[images]の中へ保存してください。既に同じ名前のファイルが存在しますので、上書き保存になります。
  • my_header.png or my_header.gif
    画像の拡張子がpngもしくはgifで保存したい場合は、『css/style.css』のファイルを開いてファイル名の拡張子を修正してください。

 イメージのファイル名やサイズを変更した場合は、css/style.cssを編集してください。このファイルを開くと説明が書かれています。テキストエディタで編集し上書き保存します。

ページのトップへ

mybody.htmlにSSIのモジュールを加える(補足)

SSIで効率アップする

 どのページにも共通した内容を載せるサイドメニューやフッターを別のファイルで制御することが出来ます。ページが増えて100ページになったとしてもサイドメニューの1ファイル、フッターの1ファイルを訂正するだけで100ページの全てに反映させることが出来ます。

 これを実現するにはSSI(Server Side Include)という技術を使います。SSIの利用が可能なサーバーが必要ですが、殆どのレンタルサーバーでは現在対応しているようです。この技術を使うには拡張子のhtmlをshtmlに変更しなければなりません。また、ローカルではブラウザを通してチェックできません(サーバーで動かすからです)が、このふたつのことを除けば、合理的で迅速なウェブサイトの更新が可能になりますので奨励します。

 SSIを使う場合はmybody.shtml(※ローカルではSSIの部分が表示されませんのでレイアウトが崩れて表示されます)のファイルと[SSI]のフォルダにfooter.htmlsidemenu.htmlを用意していますのでソースを参考にしてください。SSIを使う場合は以上のフォルダとファイルを自分専用の場所に作る必要があります。また、SSIについての詳しい説明は「SSIでホームページらくらく更新術」がとても分りやすく説明されています。時間的にも技術的にも取り掛かってしまえば簡単に仕上がります。

ページのトップへ