ホームページを作る

テキストエディターやホームページビルダーを使って、ホームページを作ってみましょう。「習うより慣れろ」はホームページ作りにも当てはまります。失敗の積重ねが経験となり、習熟度が高まります。

  • 　メモ帳で作る
  • 　ビルダーで作る
  • 　CSSでデザインする
  • 　テンプレートを利用する
  • 　段組する



メモ帳で作る

メモ帳にＨＴＭＬタグを直接打ってHTMLファイルを作成します。メモ帳のショートカットを、タスクバーや「スタートメニュー」に表示させておくとソフトへのアクセスが便利になります。ジャンプ リストから特定ファイルを立ち上げれば、継続作業にも簡単に入れます。

手順１：メモ帳を起動します

準備編の「メモ帳の起動について」を参考にしながら、メモ帳を起動します。

手順２：ＨＴＭＬタグを直接打ってください

下記のHTMLソース(↓から↑間）をメモ帳に記入してください。メモ帳でHTMLを書くときに、見易いように改行を入れても構いませんが、ブラウザでは改行表示されません。覚えておきましょう。
※練習のためのHTMLファイル作成なので、文書型宣言の記述を省略しています

↓ここから
<html>
<head>
<title>○×小学校のホームページ</title>
</head>
<body>
<h2>ようこそ○×小学校のホームパージに</h2>
<p>○×小学校は〇×市にある小学校です</p>
</body>
</html>
↑ここまで


手順３：「名前を付けて保存」します

文字入力が終わったら、「名前を付けて保存」します。ファイル名はトップページを作ったということで,ここでは「index.htm」とし、保存場所はデスクトップ上に新規フォルダ（名前はとりあえず「練習」）を作成してその中に作成したファイルを保存しておきます。後で使います。
"e" のHTMLアイコンができたらと成功です。Wクリックで、Ｗeｂブラウザが起動します。
※「ファイル名」は半角英数字を使用し、拡張子は「.htm」か「.html」のどちらかに統一します。
ファイルの種類は「テキスト文書」、文字コ－ドは「ANSI」のままです


◎拡張子とファイル名について留意事項を纏めておきます

  • 拡張子は、「htm」か「html」のどちらかで統一します
  • ファイル名に使用する文字は、半角英数、「_（アンダースコア）」、「-（ハイフン）」にする。
  • トップページのファイル名は、「index.htm」か「index.html」にする。（指定あるケースも)





ビルダーで作る

岡山県情報教育センターH15年発行の「ホームページの作成手順」書に従い、練習用小学校ホームページを作って見ましょう。TEXTのビルダーVer.が古いのでGUI等が異なりますが参考になります。構成は以下の通りです。

  1. モジュールＭＢ-０１　文字の入力と装飾
  2. モジュールＭＢ-０２　ロゴ作成
  3. モジュールＭＢ-０３　表の挿入
  4. モジュールＭＢ-０４　画像の挿入
  5. モジュールＭＢ-０５　リ ン ク の 設 定
  6. モジュールＭＢ-０６　画像の編集
  7. モジュールＭＢ-０７　ウェブアートデザイナーで地図を作成

※「岡山県情報教育センター」＆「ホームページビルダー」かモジュール名でWeb検索してください


文字の入力と装飾

ビルダーを起動し、編集画面を開きます。メニューバーから[ファイル]→[標準モードで新規作成]、
または[かんたんメニューバー]→[新規作成]→[ダイアログから白紙から作成する]を選択します。


１，ページタイトルと背景・文字色の設定
まず文書タイトルと色を設定しましょう。　　　

[メニューバー]→[編集]→[背景/文字色の設定]をクリックします。もしくは[かんたんナビバーの「ページの属性]」を選択しても同じ「属性」ダイアログが表示されます。「ページ情報」タブにページのタイトル「〇×小学校」と入力し、「背景/文字色」タブの色指定には背景ををaqua(#00ffff)に、文字色をblack(#000000)にし「OK」します。






２．文字の入力をします

最初のカーソル位置（左上部）から文字（　「ようこそ○×小学校のホームページへ」）を入力していきます。フォーカス枠」（ピンクの四角の枠）が文字を入力すると自動的に表示されます。ナビメニューから「A」（文字の挿入）しても同様です。「ページ編集」タブから「ページ/ソース」画面に切り替えてみてください。画面上部は、そのままですが下部にHTMLソースが表示されています。書いた文字列が<P>タグ(段落タグ)に挟まれて段落として書き込まれています。




３．文字を装飾（大きさ・文字の色・太さを変更）します

入力した文字列を選択した状態で、[メニューバー]→[書式]→[フォント]をクリックします。「フォント」ダイアログアイコンをクリックします。「フォント」ダイアログが開いたらフォントの属性を変更します。ここではフォントサイズを「５」に、文字を「太字」に装飾してみましょう。
※ツールバーのアイコンを使っても変更できますが、属性変更は複数の変更が一度にできです。

  • 色指定で「標準」を選択すると「属性」ダイアログの「背景/文字色」タブで設定した内容が反映されます
  • サイズは１から７までの数値で指定します。省略時の数値は「３」です実サイズは［サンプル］で確認します
  • 初期設定書体は「ＭＳ Ｐゴシック」ですが、これはあくまでもビルダーの画面上に表示される書体です

※実際にネット上で表示される書体は、何も指定がなければブラウザ側で指定された書体となります。ただし指定した書体がページを見る側のコンピュータにない場合は、正しく表示されません。






ページの保存

編集中のページを保存してみましょう。[メニューバー]→[ファイル]→[名前をつけて保存]を選択します。 「名前を付けて保存」ダイアログボックスが表示されたら保存場所を選び、ファイル名に半角の英数字でファイル名を入力し、［保存］ボタンをクリックします。ここではデスクトップに「newpage」という名で保存しておきます。1 つのページは 1つの HTML ファイルが複数の素材ファイルで構成されていたら、ページを保存時に「素材ファイルをコピーして保存」ダイアログボックスが表示されます。




ロゴ作成

さきほど、デスクトップに保管した「newpage.html」を開き、ロゴの作成とデジカメ画像の挿入をします。ロゴはホームページのタイトルを知って貰うための「ロゴタイトル」として、また、画像はホームページの内容を直感的に理解してもらうためのアイキャッチとして挿入します。

ロゴを作成しよう

「○×小学校」のロゴを作ります。ロゴとは図案化・装飾化された文字や文字列のことです。ビルダーで作成したロゴは「logoxx」と言うなのgifファイルとして保存されます。ロゴを挿入したい位置（下図では「ようこそ・・・」の上）にカーソルを移動し、[メニューバー]→[挿入]→[ロゴ]もしくは、ナビメニューのロゴ（飾り文字の挿入）アイコンをクリックして、ロゴの作成」ダイアログを表示します。

画像にしたい文字列を入力したら、文字の大きさ、ロゴ画像の種類をサンプルから選びます。




デジカメ写真の挿入

デジカメで撮影した写真を ホームページに挿入します。デジカメは高画素化が進み、そのままではサイズが大きすぎるのでウイザードに従い、縮小（リサイズ）します。

カーソルを挿入したい位置（ここでは「ようこそ・・・」の下）に下げます。[ナビメニュー]→[写真や画像の挿入]→[デジカメ写真]を選択すると、で写真挿入ウｲザードが表示されるので写真サイズを大中小の任意の大きさの中から選んで変更します。必要なら画像補正や画像の飾りつけもできます。






表の挿入

表を作成したい位置までカーソルを下げます。ツールバーの「表の挿入」を選択し、表の挿入ダイアログに行数・列数の数値を入力し、「OK」をクリックすると画面上に表が挿入されます。表の中に「学校紹介」、「教育目標」、「一年生の部屋」から「六年生の部屋」、「教員室から」、「保健室から」、「図書館から」、「給食室から」の文字を入力します。
※HTMLの基礎知識にも表の作成についてふれています


◎重要です！

セルに文字列を入力すると，入力した文字列の長さ列の幅や行の高さが自動的に広がります。
列の幅はその列に存在するセルの中でもっとも長いセルに合わせられ，行の高さはその行に存
在するセルの中でもっとも高いセルに合わせられます。また，セルの中でEnter を押すと，そ
こに改行が挿入されます。
・必要に応じて行や列の追加をします。
・必要に応じて表や文字位置を中央揃えに
（参考）画像右部分のように、表は数字以外にも枠線無しにして画像や文字を好きな領域に配置したページ作成も可能です





●表の枠が小さいのが気になる場合は
入力した文字幅」の分だけ表の枠が広がります（前述）が、表の幅や高さをあらかじめ決めておきたい場合、<table>タグにwidth属性やheight属性を指定します。また、表全体を選択した状態で、ハンドルマークのポインタが両方向の矢印に変わったら、ドラッグすると幅や高さの調整が感覚的にできます。


※HTMLの基礎知識にも表の作成についてふれています


リンクの設定

文字列に画像へのリンクを設定します

  • 表の中のリンクを設定す文字列「教員室」を選択します
  • ナビメニュー→リンクの挿入でリンク作成ウｲザードがでます。ページやURLへのリンクを作成するを選択します。　リンク先のファイルを指定します。
  • リンクの挿入作業が終わったら、プレビュー画面でリンクの成否を確認します
　　　※リンク作成ウｲザードの中の「ラベルを作成する」も重要な技術です。勉強しておいてください






中央揃え

「標準モード」では入力したばかりの文字や画像は左揃えになっています。ここまででいったん上書き保存しておきます。保存が終わったら段落単位で、中央揃えにしてみましょう。ロゴを選択し、 メニューバーから［書式]→[位置揃え]→[中央揃え］を選択します。文字列、画像も同様にします。表（ｐタグなし）全体を中央揃えにするには，表全体の範囲選択が必要です。選択する場所の違いで，結果が変化するので結構難しいです。表も中央揃えできたら保存せずに終了します。後で使います。
※画像を回り込ませるにはalign属性を使います。
<img src="URL（画像のアドレス）" align="leftまたはright">

※table要素に align="" を追加すると、表の配置位置を指定することができます。
<table align="leftまたはright"> ～ </table>
上記の属性は、HTML 4.01では非推奨とされています。（Strict DTDでは使用できません）

CSSでデザインする

ここまではデザインに関する要素を指定するタグを使い、HTMLファイルを作成しました。ここからはデザインに関する記述はCSSに記述し、HTMLは文書の論理構造（どこが見出しで、段落か等）を記述します。外部スタイルシートをメモ帳とビルダーで作成して、HTMLにデザイン適用してみましょう。


メモ帳を使い、CSSでデザインする

メモ帳を使ってスタイルシートを作成し、外部スタイルシートとして保存します。

手順１：空のCSSファイルを作成する

事前準備（メモ帳を使おう）を参考にメモ帳を起動して外部スタイルシートを作成します。名前は中身が分かる「basic」とか「comon」等にして、拡張子「.css」を付けます。ここでは「basic.css」と付けました。テキストからCSSアイコンに変わります。最初に作った練」（同一）フォルダに入れます。


手順２：CSSファイルをHTMLファイル内に定義します
作成した外部スタイルシートが機能するよう、参照するCSSファイルをHTML内に定義します。
最初に作った「練習」フォルダの中の「index.htm」をメモ帳で開きます。<head></head>の間に次のように入力します。</title>タグの下の行です。

<link rel="stylesheet” type="text/css" href="basic.css"/>

※CSSでは半角スペース・タブ・改行はスタイルに影響しません。コピペした場合、半角スペースが全角スペースになっていないか、確認してください


③CSSを記述します
手順１でなにも記述しなかったCSSファイルをメモ帳で開きます。Wクリックするとビルダーをインストールしていると、CSSエディターが起動してしまいます。以下を記述し、上書き保存します。

↓ここから
body{
background-color: aqua;
{
↑ここまで


④ブラウザで確認する
外部スタイルシートで指定したHTMLファイルをブラウザで開きます。背景色が水色に変わっていれば成功です。変わっていない場合、各単語のスペルや全角半角スペースを確認してみまよう。
「index.html」を上書き保存しておいてください。次のCSSエディター（ビルダー）でデザインするで使います。


ビルダーを使い、CSSでデザインする

ビルダー付属の「CSS エディター」と「スタイルエクスプレスビュー」を使って外部CSS ファイルを作成し、CSSを記述してみましょう。ここではCSSを使って左右のマージンを「自動」にすることで、文字や画像をページ中央に配置してみます。
※1つ前の、段落単位の中央揃え(センタリング）とは違います


手順１：外部CSSファイルを作成する
  1. [メニューバー]→[表示]→[スタイルシートマネージャー]をクリックし、スタイルシートマネージャーを表示させます。
  2. スタイルシートマネージャーの[スタイルシートの追加]（黄丸）をクリックします
  3. 「外部スタイルシートの選択」ダイアログが表示されます。リンクをクリックします。ファイル名を入力します。ここではとりあえず、「common」という名のCSSファイルを作ります
  4. 「HTMLソース」タブをクリックし、、スタイルシートへのリンクが貼られたか確認します

※CSSファイルへのリンクは「href="file:///c:」のパス名で記述されていますが、ファイルを保存すると「href="common.css"」のようにファイル名のみになります。





手順２：全体を囲むレイアウトコンテナを作成する

レイアウトコンテナは、HTMLでは<div>タグで記述されています。

  1. 全体を選択する。[メニューバー]→[編集]→[すべて選択]をクリックします。下図のように選択した範囲が分かるように、選択した文字列や画像が反転しています
  2. [レイアウトコンテナ]を作成します。[メニューバー]→[挿入]→[レイアウコンテナ]をクリック



手順３：全体を中央に配置するスタイルを設定する

スタイルエクスプレスビューを使い、作成したレイアウトコンテナにIDをつけて、そのレイアウトコンテナにのみスタイルを適用するようにします。ID名は半角英数字で分かり易い名を付けますがここでは「wrap」 と入力してみてください。
※wrapは包むの意です

  1. 編集画面右のビュー一覧からスタイルエクスプレスビューの「スタイル構成」タブを選択します。
  2. 先ほど、作成したレイアウトコンテナができているので<div>タグ（赤丸）が追加されていますので、「div」上で右クリック、ルールの新規作成をクリックします
  3. 「ルールの追加」ダイアログされたら、追加するルールにIDをクリック、ボックスに「wrap」と入力、外部スタイルシートの選択（リンク挿入）をしたら「OK」ボタンをクリックします。





下図のように、「スタイルの設定」ダイアログが表示されます。ビルダーでCSSを使った「スタイルの設定はこのダイアログから行います。「外部ＣＳＳファイルの更新確認」ダイアログが表示されたら「はい」を選択します。変更と同時に上書き保存されるので、編集し直すか、削除することとなります。

  1. レイアウトタブをクリックし、左方向を選択し、「マージン」の単位ボックスは「予約語」を選択して自動を選択します
  2. 右方向についても、「マージン」の単位ボックスは「予約語」を選択して自動を選択します
  3. 全体を中央に配置する設定と同時に、幅を設定します。位置タブでし、幅ボックスに「700」（単位はピクセル）と入力し、OKボタンをクリックします。全体が中央に移動すれば成功です。






テンプレートで作る

ビルダーには豊富なテンプレートが無料と有料で用意されています。また、ネット上にはデザイン性やサイト構築/運営において有利な有料テンプレートや、作者のご厚意で手軽に利用できる無料テンプレートが数多く提供されています。HTMLやCSSはなんとかなるが、デザインはからきしという人はテンプレートの利用や、デザインの参考になります。プログラマーとデザイナーの違いでしょうか？

ネット上のテンプレートには完全著作権フリーのもの、出自を明らかにして利用可能なもの、使用料を要するもの等々、利用形態は様々です。利用の際には注意してください。いくつか紹介します。

・ウェブデザインテンプレート集 | 無料配布Pondt.com←無料。リンク文字の変更や削除は不可
・WEB DESIGN TEMPLATE /TEMPLATE PARTY←クレジット（著作権者）外す場合は有償契約
・CSSデザインホームページテンプレート CoolWebWindow ←クレジット無し（テンプレとソース）

。
テンプレートの利用方法

テンプレートには「ここに文字を入力する」と言うことがわかるように、仮の文字があらかじめ入力されています。文字を編集（書き換え、追加、削除）して自分用のコンテンツに合うよう置き換えます。挿入されている画像（写真やイラスト）を入れ替えれば、かなりイメージが変わると思います。CSSで文字色や行間、フォントを変更すれば、更に大きくイメージが変わります。
下図はビルダー保有のフルCSSテンプレート（テーマ：保育/学習）です







段組（マルチカラム）して作る

ウェブページに見映えを求めたら、何らかの「段組(マルチカラム)」構造が欠かせません。「サイドバー」を配したシンプルなものから、新聞紙面のように異なるサイズのボックスが多段に入り交じった複雑な段組構造まで、様々なレイアウトが使われます。当然ながら複雑な段組構造にすればするほど、ハードルが高くなります。

ホームページの歴史を見ると2007年くらいまでは、「テーブルレイアウト」という方法で作られたサイトがほとんどでした。しかし現在では、HTML(またはXHTML）で構造を作り、CSSでレイアウトや装飾し、「構造と見栄えをわける」CSSレイアウトが一般的になりました。

いままではフレームを利用したページも多かったのですが、現在は検索エンジンとの相性がよくないため減少傾向にあります。今では段組構造はスタイルシートを利用して作るのが一般的です。
※ビルダーでも、[メニューバー]→[ファイル]→[フレーム設定ページの作成]をクリックするとフレーム作成ウイザードからフレーム対応のページが作れます。

スタイルシートの「floatプロパティ」を使う

CSS で段組レイアウトをするには float か position を使うのが一般的です。 それぞれに利点と欠点がありますが、ここでは float プロパティを利用した段組の作り方を説明します。
floatプロパティは、指定された要素を左または右に寄せて配置する際に使用します。
float:left は指定した要素を左に寄せ、あとにつづく内容は右に回りこむ
float:right は指定した要素を右に寄せ、あとにつづく内容は左に回りこむ
  • floatを指定したら幅指定=widthを忘れない
  • floatを指定したら解除を忘れない


配置や大きさを調節して「段組のように見せる」方法を使います。

HPBのページ編集画面での編集は困難です。ページ/ソース画面で、ソースプログラムを直接編集してください。スタイルシートは、スタイルシートマネジャで編集できます


























ファイル
inserted by FC2 system