ススメ 2008年09月

ラクガキ帳と言ってしまえばそれまでなんですがッ!

前回作った背景画像やインラインイメージを使ってまずは大枠となるブロックをコーディングします。HTMLは前回載せましたソースをベースに各タグ(段落タグなど)と全体の状態を見る為に仮の文章を挿入していきます。

デザイン、レイアウトを確認する場合に注意しなければいけないのが、トップページと記事ページの表示内容の違いを把握しなければいけません。(後々の忍者ブログ独自タグを挿入する場合にも重要)
違いを簡単に説明すると、トップページでは記事本文を複数表示(デフォルトでは5件だったかな?)し、記事ページでは1件の記事本文と追記記事、コメント、トラックバックを表示します。(カテゴリ表示やカレンダーでの表示はトップページと同じくくりになります。)

まずは、大まかなブロックをスタイルシートでコントロールしてレイアウトしようと思いますので比較的HTMLが短いトップページから進めていきます。

HTMLはこんな感じ・・・(bodyタグ内)
PR
テンプレートのデザインが決まったらHTMLにコーディングするワケですが、デザインをHTML化する場合、テーブルタグを主体にコーディングする方法とスタイルシート主体にする方法の大別して2種類の手法があります。ワタクシの場合は基本的に後者のスタイルシートを使ってデザインをHTML化していますので、説明等はスタイルシートを主体としたものになります。

では、コーディングを始める前に・・・
いきなりエディタでタグを書き始めると大変ですが、予めどのように「組む」かという々考えておくとコーディングが進めやすいのでオススメです。
具体的には、下図のような感じでデザインを構成するブロックを考えます。
(シンプルなレイアウトなので構成もシンプルになりますw)


ブログ [PR]転職サイト 英会話|©2008 ススメ::342.blog/TemplateDesign by 比呂有希