2009年3月5日

超初心者でも簡単にムーバブルタイプでホームページを作成する方法　第二回

手順１？

MTでＷｅｂサイトを作る前に、DWでレイアウトを完璧に整える

…っというのも、MTでＷｅｂサイトを作ってからCSS変更するのって大変なんですよ。ですから、小規模なＷｅｂサイトならすべてDWでもホームページビルダーでもいいから先にＷｅｂサイトを作成指定した方が遠回りなようで近道です。

ちなみに僕は５０ページ程度のＷｅｂサイトなら先に作り込んでしまって、納品前にMT化します。

手順２

テンプレートを作成する

作成するテンプレートは次の通り。
※インストール時からあるテンプレートは削除しないように！

インデックステンプレート
DWで作成したＷｅｂページのCSSを適当なテンプレート名を付けて保存してきます。
僕なら次の表のようなテンプレートを作成します。このあたりは、作成する人それぞれでしょうね。
既存のテンプレートは削除しないようにお願いします。

ちなみに、CSSを登録するときに背景画像の指定をしている場合、オーサリングソフトはおおむね相対指定になっているはずです。絶対指定の方が、安心できるかなぁと思いますので、相対指定の前に<mt:BlogUrl />を入力してください。<mt:BlogUrl />は、ブログを作成したときに指定したURLに変換されます。

テンプレート名 出力ファイル名
CSS:スタイルシートの初期化 initialize.css
CSS:レイアウト common.css
CSS:トップページ   home.css
CSS:セカンドページの書式設定 second.css
css:印刷用CSS   print.css

テンプレートモジュール
次のテンプレートモジュールを作成します。
どのページでも同じような内容ならテンプレートモジュール化してしまった方が効率的です。
分割しすぎるとワケ分からなくなりますけどね。

  • HTMLヘッダー
    HTMLタグから大体共通しているところまでざっくりモジュール化します。
    第三回くらいから、詳細に説明します。
       
  • HTMLフッター 
    おおむね終わりそうなところからHTMLタグ終了までをモジュール化します。
    これも同じく第三回くらいから詳細に説明します。
     
  • グローバルナビ 
    Ｗｅｂサイトを横断的にまたいでいるリンク集
    カテゴリーやフォルダーでわければ自動的にリンクを生成できるけれども、情報をたくさん取り扱うようなサイトならいざ知らず、通常のＷｅｂサイトなら固定で十分。てなわけで、Ｗｅｂページを直接指定したＷｅｂサイトを構築します。
      
  • 左ナビゲーション
    グローバルナビゲーションの下にローカルリンクなんて欲しい場合があるじゃないですか、そのために用意しました。なくても問題はありません。               

修正するテンプレート

  • インデックステンプレート
    メインページ　index.htmlページ
  • アーカイブテンプレート
    ウェブページ

おまけ

僕が使っている初期化CSSはこんな感じ。
YAHOOのライブラリでダウンロードしてきたモノにimgへのスタイル追加したモノを使っておりまする。

では、また次回。

/* タグの初期化用CSS */

html{
 margin: 0px;
 padding: 0px;
 border-top-width: 0px;
 border-right-width: 0px;
 border-bottom-width: 0px;
 border-left-width: 0px;
 border-top-style: none;
 border-right-style: none;
 border-bottom-style: none;
 border-left-style: none;
}

/* Yahoo!User Interface Libraryの初期化CSSを利用 */
body {color:#000;background:#FFF;margin:0;padding:0;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:”;}
abbr,acronym {border:0;font-variant:normal;}
sup,sub {line-height:-1px;vertical-align: text-top;}
sub {vertical-align:text-bottom;}
input, textarea, select{font-family:inherit;font-size:inherit;font-weight:inherit;}

/* イメージをリンクした際に、囲い線がでないようにする */
a img {
 border:0;
 overflow: hidden;
}
 

shimada.keisuke
0
Tags :