Home / Index / Prev / Next

12.コンテンツのページを作る

コンテンツのページを作ります。
Mozilla を起動して、コンポーネントバーから Composer を開きます。コンポーネントバーからコンポーザーを開く
コンテンツのページのプロパティを設定する
まず、[書式(O)] メニューから [ページの タイトルと プロバティ(G)] を選択し、[ページのプロパ ティ] ダイアログボックスを開きます。
[タイトル(T)] は必須項目です。
[作成者(A)] と [説明(D)] は必須ではありませんが、説明は入れておきましょう。
ページの配色と背景を指定する
次に、 [書式(O)] メニューから [ページの色と背景(U)] をクリックして [ページの配色と背景] ダイアログボックスを開き、ページの文字色とリンク色および背景画像を指定します。
ページの文字色は、ビジターさんにわかりやすいように、トップページと同じ色にします。また、背景画像も、ホームページの統一感を出すために、同じ画像を 使うか、似た感じの画像を使ったほうが良いでしょう。

[背景画像(M)] は絶対パスで指定されていますが、これは、まだ作成中のページを保存していないので、作成中のファイルと背景画像のファイルとの相対的位置がわからないた めです。相対パスにするには、先にページを保存するか、保存した後に、再度 [ページの配色と背景] ダイアログボックスを開いて、[URL をページの場所に相対的にする] にチェックを入れます。
ちなみに、絶対パスの「%20」は空白です。
これでページを作成する準備ができました。
見出し2を選択する
ページのタイトルを入れます。
トップページのタイトルは見出し1<H1>を使ったので、コンテンツのページでは、見出し2<H2>を使います。
書式ツールバー にあるドロップダウンリストから [見出し2<H2>] を選択してから、「北海道のスキー場の紹介」と入力し、センタリングするをクリックして、セ ンタリングします。
さらに、入力した文字列を範囲指定して、書式ツールバーにあるテキストの色を選択ボタンの上の方(黒い方) をクリックするとカラーパレットを開くので、好きな文字色を指定して、 [OK] をクリックします。
こうなります。

北海道のスキー場の紹介


ここからは、表を使って作っていきます。
まず、表に入れる内容(情報)を整理しておきます。
「スキー場の紹介」だから、
これくらいは必要ですね。
でも、こんな情報はどこにでもあります。自分なりの視点で集めた情報を載せないと、ホームページを作る意味がないし、誰も来てくれません。
なども載せてみましょうか。
(見本として作成するので、あまり真剣に読まないでね^^)

こんなレイアウトにします。
名 前
札幌国際 URL
http://www.sapporo-kokusai.co.jp/
場 所
札 幌市南区定山渓(札幌市内から1時間) TEL
011-598-4560
リ フト ゴンドラ×2、 フード付き高速4人乗り(ク ワッド)×1、 ペア×2
料 金
3時間: 3,500円、5時間:3,900 円、7時間:4,300円、ナイター:1,600円、食事付き6時間:4,200円
好 き
雪が多く、シー ズンが長い。
札幌から近い。
嫌 い ペアリフトが遅 く、頂上へはゴンドラを使うしかないが、 いちいちスキーを脱ぐのが面倒。
団体客が多く、初心者コースが混雑。
コースに座っているボーダーが多い。
すべてのコースが一箇所に合流するために、合流地点は危険。
コ メント
数多く練習した い人は、ゴンドラを使わない初心者コースがおすすめ。
シーズン最初の頃はカレーライスの具が多いが、3月くらいになると少なくなる(たまたま?)

作り方説明しときますね。
  1. 構成ツールバーのテーブルアイコンを クリックして、[表の挿入] ダイアログボックスを開きます。
  2. 行数 7、列数 4、幅 700 ピクセルにして、OK をクリックするとこんな表になります。




























  3. 上の 2 行以外は、セル数は 2 つなので、3 行目からは、2 つ目以降のセルを結合します。3 行 2 列目のセルで、右クリック → [セルを右へ結合(J)] を 2 回行い、4 行目以降も同様にします。


















  4. 文字列を入力していきます。
    名前
    札幌国際 URL
    http://www.sapporo-kokusai.co.jp/
    場所
    札 幌市南区定山渓(札幌市内から1時間) TEL
    011-598-4560
    リフト
    ゴンドラ×2、 フード付き高速4人乗り(ク ワッド)×1、 ペア








簡単でしたね。
実際に作る時は、作りながらレイアウトを考えていくので、こんなに簡単にはできないかもしれません。
上の表は、表全体の幅を 700 ピクセル にしていますが、セルの幅は指定していないので、文字数によって幅が変わってしまいます。例えば、続けて他のスキー場について作ると、こうなります。
名 前
札幌国際 URL
http://www.sapporo-kokusai.co.jp/
場 所
札 幌市南区定山渓(札幌市内から1時間) TEL
011-598-4560
リ フト ゴンドラ×2、 フード付き高速4人乗り(ク ワッド)×1、 ペア×2
料 金
3時間: 3,500円、5時間:3,900 円、7時間:4,300円、ナイター:1,600円、食事付き6時間:4,200円
好 き
雪が多く、シー ズンが長い。
札幌から近い。
嫌 い ペアリフトが遅 く、頂上へはゴンドラを使うしかないが、 いちいちスキーを脱ぐのが面倒。
団体客が多く、初心者コースが混雑。
コースに座っているボーダーが多い。
すべてのコースが一箇所に合流するために、合流地点は危険。
コ メント
数多く練習した い人は、ゴンドラを使わない初心者コースがおすすめ。
シーズン最初の頃はカレーライスの具が多いが、3月くらいになると少なくなる(たまたま?)
名 前
ルスツリゾート URL
http://www.rusutsu.co.jp/
場 所
虻田郡留寿都村泉川(札幌市内から2時間) TEL
0136-46-3331
リ フト ゴンドラ×3、高速4人乗り(ク ワッド)×7、ペア×5、シングル×1
料 金
1日: 4,935円、午前:4,095 円、午後:4,305円、ナイター:1,735円、1泊2日:9,030円
好 き
とにかく広くて、コースも長く、バリエーショ ンに富んでいる。
Mt.イゾラ、イーストMt.頂上からカービングでかっとぶ気分は最高!(できないけど)
Mt.イゾラからの洞爺湖方面の景色、ウェストトMt.からの羊蹄山およびニセコ方面の景色は最高。
嫌 い 時間券がないので、半端な時間から滑り始める と高くつく。
コ メント
帰り道の中山峠が吹雪くと、通常2時間が4時 間かかります。

セルの幅がずれているのが気になる場合は、セル幅を統一します。
幅を指定したいセルにカーソルを置いてダブルクリックし(または、右クリック→[セル プロパティ(P)] )、[表のプロパティ] ダイアログボックスを開いて、セルのサイズを指定します。1 列目と 3 列目はタイトル行なので、同じ幅が良いですね。
名 前
札幌国際 URL
http://www.sapporo-kokusai.co.jp/
場 所
札 幌市南区定山渓(札幌市内から1時間) TEL
011-598-4560
名 前
ルスツリゾート URL
http://www.rusutsu.co.jp/
場 所
虻田郡留寿都村泉川(札幌市内から2時間) TEL
0136-46-3331

せっかくだから、スキー場の URL  からスキー場のホームページにリンクを張りましょう。
「http://www.sapporo-kokusai.co.jp/」を範囲指定して、リンクアイコンをクリックすると [リンクのプロパティ] ダイアログボックスが開きます。
リンクのプロパティダイアログ
リンクの文字列が、リンク先の URL の場合は、デフォルトで [リンクの場所] にリンク先 URL が入っているので、そのまま [OK] をクリックするだけでリンクを張ることができます。
見やすいように背景色を指定して、表の位置を中央にすると、こんなページになりました。保存して完成です。
北海道のスキー場の紹介ページ

同じように、表を使って、「スキー日記」のページと「プロフィール」のページを作りました。
スキー日記とプロフィールのページ
「スキー日記」のページは、日にちごとに、1行×3列の表を作って入力していきます。
ホームページに日記を載せる時は、新しいページを上にするのがポイントです。表を 1 つ作ったら、次の日は、作った表の上に、前の日の表全体をコピーすれば、簡単にできます。
表全体のコピーは、コピーする表にカーソルを置いて、右クリック→[表の選択(S)]→[表(T)] で範囲指定してから、再度、右クリック→[コピー(C)]を選択し、コピーしたい場所にカーソルを置い て、右クリック→[貼り付け(P)] を選択します。
もちろん、構成ツールバーのコピーアイコン貼り付けアイコンを使うこともできます。

日記を自分で作らずに、ブログ(Blog)を使うのも良いと思います。


Home / Index / Prev / PageTop / Next
© 超初心者のためのホームペー ジ作成講座