大道芸フェスタのHP作成例です。ここでは、スタイルシートも自分で設定していきます。
- 検定試験問題（2級） をクリック。
- 問題の処理条件を見て作成します。
- データ2級 をデスクトップに保存します。
- ダブルクリック（右クリック）し、（すべて）展開します。
- フォルダの名前を変更します。
- kompozer-0.8b3.ja.win32.zip をデスクトップに保存・展開して起動します。
- サイトを編集をクリック。
- 名前を変えたフォルダを選びます。
- サイト名をわかりやすい名前に変えます。
- OKをクリック。
- 保存をクリック。
- ページタイトルを入力します。
- 保存先を聞いてくるので、展開したフォルダを開きます。
- index と入力。
- 保存をクリックします。
- サイトマネージャのサイト名（図ではHP2_大道芸フェスタ）の左側（＋）をクリックすると、フォルダの中のファイルが一覧で見れます。
入力したindex.htmlの名前も確認できます。
- 準備が終わり、ここからはページの中身を作成していきます。
まず、最初にスタイルシート（style.css)を作成していきます。 - CSSエディタをクリック。
- 新しいｌｉｎｋ要素をクリック。
- URLの欄に style.css と入力し、スタイルシートの作成をクリックします。
- 左側に style.css と表示されます。
- 次に、bodyに背景画像を設定していきます。
- style.css をクリック。
- 新しい規則をクリック。
- 右側の ｖ をクリック。
- body(body直下) をクリック。
- スタイル規則の作成をクリック。
- 背景をクリック。
- 選択をクリック。
- back.gif を開きます。
- タイリングの欄から 水平方向に並べる を選びます。
- OKをクリック。
- サイトマネージャ のリロードをクリック。
- style.cssをダブルクリック。
すると、右側に表示されます。
bodyのかっこの中に、画像とrepeat-x が設定されていることがわかります。 - 確認したら、閉じましょう。
- つぎに、ワードを使う感覚で、ページを作成していきますが、スタイルシートの設定が違うところです。
- まず、問題のレイアウトのように表を作成していきます。
- ENTERを押して、3行ほど空けてから、テーブルをクリック。
マウスを動かし、３×３になったところで、クリック。
- 1行目の3つのセルをドラッグ（選択）します。
- 3つのセルのどれかのセルの真ん中あたりを右クリックします。
- 選択されたセルを結合 をクリック。すると、1行目が１つのセルになります。
- 大道芸フェスタと入力。
- ドラッグします。
- 見出し1 を選びます。
- スタイルシートに見出し（H1）の設定をしていきます。
- CSSエディタをクリック。
- style.cssをクリック。
- 新しい規則 をクリック。
- h1（見出し１）をクリック。
- スタイル規則の作成 をクリック。
- テキストをクリック。
- フォントサイズ に 0% を選びます。
- 上の▲を押していき、400% に設定します。
- 行揃え の欄から中央を選びます。
- 前景色の空欄の横をクリック。
- 赤を51、緑と青に102を入力します。（空欄に、直接#336666 と入力してもできます。）
- OKを2回押して、設定完了です。
- 注意）時々、戻ってきたとき、反映されず、さらに、左側の見出し１の欄がグレーになったまま、動かなくなる時があります。
その場合は、
１．一度保存し、Kompozerを閉じます。
２．Kompozerを起動します。
３．左側のindex.html をダブルクリックします。
４．見出し１の欄がもとに戻っているのを確認します。
５．大道芸フェスタをドラッグし、見出し１にしましょう。 - 次に、2行目に画像を挿入し、リンクを張っていきます。
- まず、2行目の左側（2行1列）をクリック。
- 画像をクリックします。
- 右のフォルダアイコン（ファイルを選択）をクリック。
- icon1.gif を開きます。
- 代替テキストの欄に、日時ページと入力します。
- リンク対象をクリック。
- 右側のフォルダアイコンをクリック。
- page1.html を開きます。
- 相対URLを使用する にチェックが入っているのを確認します。
- OKをクリックします。
これで、1つ目のメニューが完成です。
- 2つ目のメニューの作成に移ります。
- 2行2列目のセルをクリックし、画像をクリック。
- icon2.gif を開きます。
- 代替テキストの欄に、催し物ページ と入力します。
- リンク対象をクリックし、page2.htmlを開きます。
- 相対URLのチェックを確認。
- OKをクリック。
- 3つ目のメニューの作成に移ります。
- 2行3列目のセルをクリックし、画像をクリック。
- icon3.gif を開きます。
- 代替テキストの欄に、フリーマーケットページ と入力します。
- リンク対象をクリックし、page3.htmlを開きます。
- 相対URLのチェックを確認。
- OKをクリック。これでメニューの作成が終わります。
- 次に3行目をクリック。
- 画像をクリック。
- pic.jpg を開きます。
- 代替テキストの欄に、大道芸フェスタの写真と入力します。
- OKをクリック。
- 画像の右側をクリック。
- カーソルが表示されるのを確認して、ENTERを押します。
- すると、次の行に移動します。
- 問題を見ながら文字を入力します。
- 6行目の動体視力～を打ち終わったら、Enterを押して改行します。
- 挿入から水平線を選びます。
- 残りの文字を入力します。
- お知らせをドラッグ。
- 見出し２を選びます。
- CSSをクリック。
- 新しい規則をクリック。
- h2を選択します。
- スタイル規則の作成をクリック。
- テキストをクリック。
- フォントサイズを250％、前景色を#336666、フォントウェイトを通常に設定します。
- OKをクリックします。
- メールでのお問い合わせをドラッグします。
- リンクをクリックします。
- festa@goukaku.ne.jp と入力します。
- 電子メールアドレスとして扱うにチェック。
- OKをクリックします。
- CSSエディタをクリック。
- 新しい規則をクリック。
- aと入力。
- スタイル規則の作成をクリック。
- テキストをクリック。
- フォントサイズを150％に設定する。
- 背景をクリック。
- 背景色の欄に、直接#ffff99 と入力。
- OKをクリック。
- ソースをクリック。
- 赤い線を引いたところを削除（変更）します。
- 完成です。
- スタイルシートは css と照らし合わせて、確認します。余計な設定がされていれば、削除します。
- 完成です。