練習問題

• トップ

• 事前準備

• フォルダー構造作成

• ビルダーの起動

• ビルダーの初期設定

• 編集画面の設定

• Web ページ

• バージョン選択

• ページ作成

• ファイル保存

• ブラウザ確認

• HTML の基礎

• 文字の入力

• 見出しタグ

• 練習１ index.html

• 段落タグ

• 水平線の挿入

• 練習２ dog.html

• 強調表示

• イメージの配置

• リストの挿入

• リストの入れ子

• 住所・著作情報

• 区画

• リンクの挿入

• ページ内リンク

• トップページ

• CSS の基礎

• スタイルの指定

• 文字フォント指定

• 文字色の指定

• 文字位置指定

• 背景画像

• 画像を回り込む

• ボーダー指定

• 間隔・余白指定

• 中央揃え

• リンクの修飾

• 対象限定スタイル

• トップページ装飾

• 外部 CSS

• レイアウト

• １カラム

• ２カラム

• 参考資料

• 参加者作品

• 問い合わせ

～ビルダーの初期設定～

ここではビルダーを使って サイトを作成する前の、準備の説明です。

ビルダーの初期設定

HTML と CSS とでホームページ・ビルダーをページ作りに活用するための、ホームページ・ビルダーの設定です。

ビルダーのメニュー 「ツール」 → 「オプション」 で以下にあげる５つのタブで、設定を変更する必要があります。

［一班］ タブ

• HTML ソースを自動整形しないようにする
  • ［ＨＴＭＬソースを自動整形する］ のチェックを外したままにします。
• HTML構文エラーの自動修正をやめる
  • デフォルトでは、［HTML構文エラーを自動修正する］ にチェックが入っています。このチェックを外します。その上で、［すべてのエラーで、修正ダイアログを開く］ あるいは ［重大なエラーのみ、修正ダイアログを開く］ に設定します。
• ページ作成モードは標準モード
  • スタイルシートを使ってページ作りを行うことから、［標準モード］ でページを作成します。

［表示］ タブ

• フォントサイズを１２へ変更
  • ホームページ・ビルダーのデフォルトは 11 になっていますが、このままだと、Internet Explorer、Firefox、Opera といったグラフィカルブラウザでデフォルトのフォントサイズでプレビューすると、作成時と実際の見映えとの差が大きくなってしまいます。
    作成時とブラウザでのプレビュー時の差をなるべく小さくするためには、Internet Explorer、Firefox、Opera のデフォルトフォントサイズである 12pt に設定する必要があります。
    

［ファイル］ タブ

• 「出力漢字コード」 を設定する
  • ページを保存するときに使う漢字コードをここで指定します。当サイト自身では２１以上の丸囲み数字を使うので、"Unicode (UTF-8)" を指定します。
    
• 「HTMLソースにGENERATORを組み込む」 のチェックを外す
• 「バックアップファイルを作成する」 のチェックを外す
• 「自動保存を行う」 のチェックを外す
• 「文字エンコードを META タグで指定する」 のチェックが入っているのを確認する
  • 文字エンコードを選びます。通常は Shift_JIS あるいは UTF-8 を選びます。「出力漢字コード」もこれに合わせます。
    当サイトでは２１以上の丸囲み数字を使うので "UTF-8" を選びます。
    
• 「基準スタイルシート言語をＭＥＴＡタグで指定する」 のチェックが入っているのを確認する
• 「ＬＡＮＧ属性を指定する」 のチェックが入っているのを確認する
  • 「日本語」を選びます
• ［白紙から新規作成する場合のフォーマット］
  • ［HTML5］を指定します。
• ［新規ファイルを作成する場合のフォーマット］
  • ［HTML］を指定します。

［ソース編集］ タブ

• タグ、属性の出力文字を小文字に設定します
• 行数表示にチェック マークを入れる。
• 文字下げ（インデント）の設定は、インデント量を半角スペースいくつにするかを指定します。

［ビジュアルサイトビュー］ タブ

• 展開レベルで 「エラーのあるページまで展開」 にチェックを入れない

⇒ 編集画面の設定へ進む