ステップ２〜原稿を書く〜
ステップ2では原稿を書きます。
記入するセルの位置さえ間違えなければすぐに終わります
原稿を書く
原稿をセルの位置を間違えないように書いていきます
丸ごとコピーして置き換えてもいいですし、原稿部分だけコピーして貼り付けてもいいです。
<table id="structure">
<!-- ********* ヘッド ******** -->
<tr>
<td colspan="2" id="head">
<IMG src="./img/logo.gif" alt="WEB工房きくちゃん" width="150" height="50">
<IMG src="./img/catch.gif" alt="はじめましょ！CSSでWEBデザイン" width="497" height="50">
</td>
</tr>
<!-- ********* メイン ******** -->
<tr>
<!--======メイン左====== -->
<td id="main-left">
<!-- イメージ画像 -->
<IMG src="./img/img.jpg" alt="ようこそ" width="290" height="150">
<!-- 更新履歴 -->
What's New !
9/30 初心者の館基礎知識編を刷新
9/26 デザイン論１つ、CSSテク１つ追加
<!-- ぼやっきー -->
管理人のぼやき
制作実習編LV2ではテーブルタグを使って、
ハイブリッドデザインに挑戦。
ハイブリッドデザインは、レイアウトが簡単にできる上に
デザインも崩れにくく、スタイルシートをほとんど使用しない
テーブルデザインよりも更新のしやすさが数段上です。
スタイルシートの使い方に慣れてきたら、
このタイプのデザインに挑戦することをおすすめします。
</td>
<!--======メイン右====== -->
<td id="main-right">
<!-- 初心者の館 -->
初心者の館
スタイルシートでデザインされたページに興味のある方へ贈るページ。
CSSでページをデザインしていく工程や知っておきたい知識紹介しています。
ここを読めばあなたも「脱・CSS初心者」
一覧 現在26項目
最新のデーター
制作実習編LV1
制作実習編LV2
<!-- 私的デザイン論 -->
私的デザイン論
デザインに関するよもやま話がいろいろ。
もっとカッコいいページを作りたいっ！という人が見るとヒントがあるかもね。
一覧 現在25項目
最新のデーター
見た目か？中身か？
フォント de 素材
<!-- CSSテクニック -->
スタイルシートテクニック
スタイルシートでどんなことができるのかをあれこれ試した成果です。
ワンランク上の使い方を知りたい方はぜひご覧あれ。
一覧 現在11項目
最新のデーター
四角を描く
ulタグでメニュー
</td>
</tr>
<!-- ********* フット ******** -->
<tr>
<td colspan="2" id="foot">
<!-- 著作権 -->
©きくちゃん 2004 - All Rights Reserved mail:**********
スタイルシートをフル活用しているので、一部の環境では表示が崩れてしまいます。
</td>
</tr>
</table>
ポイント
ここでのポイントは、
- 書き込む位置を間違えないこと
の１つです。
とにかく場所を間違えないことです。
td・trタグを見失わないようにtabキーなどを使ってインデントを取るのもいいかもしれません。
確認
できたらブラウザーでどのように表示されるか見てみましょう
なんとな〜くですがレイアウトに合わせて配置されているのが分かると思います。
次のステップでタグを使ってマークアップをすれば、よく分かりますよ。