ホームページの作り方
2008 年５月更新 明治大学講習の前に
この講習は「ホームページ・ビルダー10」を利用してホームページを作成し、 駿河台地区設置の WWW サー バーで公開する手順を実習する講習です（注１ 最新のバージョンと異なる場合もあります）。 • 講習では２つ、ページを作成します。 • 作成したページは、FD または USB メモリに保存します。 なお、このテキストはパソコンの基本的な操作は一通りできるものとして作成されています。 ブラウザ(NetscapeNavigator や Internet Explorer)の使い方はこの講習ではふれません。 また、ホームページを公開す るためには、基盤サービスの電子メイル利用申請が必要です。
目次
1.ページ公開の仕組み ...3
2.ＨＴＭＬと タグ ...4
3.準備 ...4
4.ホームページ・ビルダーの立ち上げ ...5
5.新たにページを作成する...5
(1)通常の新規作成 ...5
(2)フレームを使いたい場合などの新規作成 ...6
6.見出しの作成 ...7
7.文の入力（段落の作成） ...8
8.水平線の入力...9
9.箇条書きの作成...9
10.ページにタイトルを付ける... 11
11.ページを保存する ... 12
12.リンクの設定 ... 13
(1)リンク先の用意 ... 13
(2)設定... 13
13.画像の貼り込み... 16
14.ページの保存（画像ファイルも合わせて保存する）... 17
15.ページのアップロード（転送と公開） ... 18
付録... 20
A.文字の書式の変更... 20
B.リンクの設定（URLで指定） ... 21
C.表の作成... 22
D.FFFTPでのサーバー側のファイル操作 ... 23
(1)ファイルの削除 ... 23
(2)フォルダの作成 ... 23
E.FTPツールによるファイル転送 ... 24
F.ロゴの作成... 26
1.ページ公開の仕組み
ホームページは WWW(World Wide Web・ワールドワイドウェブ)というシステムを利用して情報を発信する際に 作成します。作成したデータを WWW サーバー(情報を実際に発信するコンピュータ)上に用意することで、イン ターネット上のコンピュータから、そのデータが閲覧されるようになります。 駿河台・和泉の利用者がホームページを公開する場合は、作成したデータを、 • suruga2 あるいは、 kjk2-kws, kjk3-kws というコンピュータに転送(アップロード)します。その際には、必要に応じて事前に各自の転送先に、 • local_html あるいは public_html というディレクトリー(フォルダー)を用意し、 • 「学内へのみ公開」にしたいならば、suruga2 のlocal_htmlへ(練習用) • 「学外へも公開」にしたいならば、suruga2 のpublic_htmlへ 転送します。なお、転送したデータは、以下の URL で参照できます。 • 学内のみの公開・・・http://local.kisc.meiji.ac.jp/~ユーザーID/ファイル名/ • 学外への公開 ･･･http://www.kisc.meiji.ac.jp/~ユーザーID/ファイル名/ なお、ホームページを公開するに当たっては、「MIND 利用基準」を遵守しなければなりません。以下を参照し てください。 • 学校法人明治大学総合情報ネットワーク(MIND)利用基準 • MIND利用上の遵守事項ガイドライン～明治大学で、インターネットを使う上で～
2.ＨＴＭＬと タグ
ホームページは HTML（Hyper Text Markup Language） という形式で記述します。
<HTML> <HEAD> <TITLE>ホームページだよ～ん</TITLE> </HEAD> <BODY> <H1>ホームページだよ～ん</H1> <IMG SRC=”my_face.gif”> <HR> ほにゃほにゃ・ふげふげ ・ ・ </BODY> </HTML> この中の ＜H1＞ や </H1> をタグといい、データの「どういう要素であるか」を指定しています。この HTML の データはテキストデータですので、「メモ帳」などでも作成可能ですが、その場合は「タグ」の種類・意味を覚えて いないと作成できません。 この講習で使う「ホームページ・ビルダー」は、「タグ」を知らなくても、マウスの操作でデータにタグを自動的に 埋め込みながらホームページの作成を行なえるソフトです。
3.準備
講習会では学内用に公開するページの作成を行います。 用意した FD または USB（フラッシュメモリ）に local_html という名前のフォルダを作成してください。以後、作 成したページなどはこのフォルダに保存します。また、この講習では、サーバーへの転送は、このフォルダーごと 行います。4.ホームページ・ビルダーの立ち上げ
ホームページ・ビルダーは以下の順にメニューをたどって立ち上げてください。 「スタート」 → 「すべてのプログラム(P)」 → 「その他」 → 「ホームページ・ビルダー」 これでホームページ・ビルダーが立ち上がります。 「すべてのプログラム」から「IBM ホームページ・ビルダー10」 → 「ホームページ・ビルダー」の順で立ち上げても 同様です。5.新たにページを作成する
(1)通常の新規作成
ホームページ・ビルダーが立ち上がると、最初に「スタート」ウィンドウが表示されます。この中から、「ページを 作成する（N）」をクリックしてください。 次いで、「ページ作成方法の選択」ウィンドウから「白紙ページ(B)」を選択してください。 「白紙ページの作成」ウィンドウが現れるので「編集モード（E）」メニューから「標準モード」を選択します。 これで、ページの作成が始められます。(2)フレームを使いたい場合などの新規作成
「白紙ページの作成」ウィンドウで「ページの種類（P）」メニューから「フレームページ」を選択するとフレームを使 用したホームページを作成できます。 • ページを閲覧するであろう対象のシステム（PC,携帯電話など）の指定は 「白紙ページの作成」ウィンド ウの「表示環境（D）」メニューから選択できます。 • 白紙から作成するか、予め用意された雛形（テンプレート）を元に作成を始めるかの指示は「ページ作 成方法の選択」ウィンドウから選択できます。 • 詳細なレイアウトの指示を含むページを作成するか否かの指示 も同様に「ページ作成方法の選択」ウ ィンドウから選択できます。 はじめて利用する場合や、意味がよくわからない場合には、 (1)通常の新規作成の手順で進めるのがよいでしょう。 注）このテキストでは初心者用の編集スタイルである「かんたん」モードで作成していきます。あら かじめ「表示（V）」の「編集のスタイルの切り替え（O）」を選択し「かんたん」モードに切り替えてお きましょう。6.見出しの作成
はじめにページに見出しをつけましょう。「ページ編集」の画面内で適当にクリックしてください。 この状態で文字を入力すると、通常の文として文字が入力されます。 文字が入力されている間、色つきの枠が表示されます。この枠が、現在編集している対象(あるいはページの 「部分」を示していて、この枠内の箇所に対して様々な設定を指示することが可能です。色つきの枠内の文字（列）に対して属性等が指示できる。
文字を入力したら、ツールバーにある「かんたん編集」の「属性の変更（A）」をクリックし、「属性」ウィンドウの 「段落(P)」メニューの中から「見出し 1」を選択してみてください。すると、入力した文字に対して、それが「見出 し」の「レベル１」であることが指示されて、画面上の表示も変化します。 この操作は画面左上のメニューから選択することでも可能です。 「見出し」は新聞でいう「見出し」と同じ意味で、表示される文字の大きさについての指示とは異なります。 「見出し」がブラウザー上（ネットスケープナビゲーターやインターネットエクスプローラー）で、どのような文字・ 大きさで表示されるかという点については、基本的にはブラウザー次第です。 通常の文を入力している際に、単純に文字の大きさを変更したい場合は、「書式」メニューの「サイズ」を選択 し、文字の大きさを変更してください。 実際の手順は「付録 A.文字の書式の変更」を参照してください。7.文の入力（段落の作成）
見出しの設定ができたら、通常の文章を入力してみましょう。 まず、見出しの下をクリックしてください。このとき見出しにあった枠の表示が消えた場合は、そこから、新しい 段落が開始できます。まだ、見出しに枠があり、見出し文の末尾にカーソルが残っている場合は、下向き矢印 （↓）をクリックしてください。 ドキュメント アウトライナを使っていると、矢印キーで見出しレベルが変更されることがあります。このような場合 は、一旦、編集ウィンドウをクリックしてください。 ホームページビルダーでは、通常、下向きのカーソルキー（矢印キー ↓）を押して、新しい文、段落を開始し ます。 カーソルが次の行に移動していたら、そこから適当に文字（文）を入力してみてください。 ホームページ・ビルダーで「エンター(Enter)」キーを押すと、行は変わりますが段落が変更になったとはみなされ ません。 段落と改行 「改行」の指示は行を変えるという<BR>タグをページに埋め込みます。 一方「段落」の変更は<P>タグが埋め込まれます。 ホームページを作成する際に「使わない方が良い文字」 世の中には様々なコンピュータがあり、機種によっては表示できない文字があります。例えば 半角カナ文字 丸付きの数字 などがそれにあたります。ページを作成する際には、このような文字の使用は避けた方がよいでしょう。8.水平線の入力
次は水平線（区切り線）を引いてみましょう。左側の「ナビメニュー」から「水平線の挿入」を選択する。 これで水平線が入ります。9.箇条書きの作成
今度は箇条書きを作成してみましょう。ホームページで使われる箇条書きには、 • 番号なしの箇条書き（通常の箇条書き） • 番号つきの箇条書き などがあります。では、カーソルを移動し、「枠」が表示されていない状態にしてください。 箇条書きは、左側の「ナビメニュー」から「リストの挿入」を選択し、「リストの挿入」ウィンドウで箇条書きの種類 を指定することではじめます。「通常」を選択すると、カーソル位置に、「・」が表示されるので、何か文を入力し、「Enter」キーを押してみてく ださい。すると、２番目の文が入力できるようになります。箇条書きは、この操作の繰り返しで必要な分だけ入力し ます。
10.ページにタイトルを付ける
作成したページには必ずタイトルを付けるようこころがけましょう。「タイトル」と「見出し」は異なりますので注意 してください。 ページ余白部分をクリックしてから「編集(E)」メニュー → 「属性の変更(A)」の順に選択してください。 「ページ情報」タブにある「ページタイトル(P)」に適当にタイトルを入力し、「OK」をクリックしてください。 ここで入力した文字列が、編集中のページのタイトルになります。ページの背景色や表示文字の色の変更な ども、ページの属性として指示することができます。11.ページを保存する
保存は「ファイル(F)」メニューから「名前を付けて保存(A)」を選択し、FD(または USB メモリ)へ、index.html と いう名前で保存してください。「保存する場所」を指定しないと「マイドキュメント」にページが保存されてしまうの で注意してください。 index.html という名前について 明治大学で運用している WWW サーバーは、あるクライアント（ブラウザ）からページのリクエストを受け取ったと きに、ページの名前が省略されていると、index.html (または index.htm)という名称のファイルを応答します。たと えば、http://www.kisc.meiji.ac.jp /manuals/ という要求を受け付けた場合、応答として、 http://www.kisc.meiji.ac.jp/manuals/index.html を応答します。 WWW サーバーでは、ファイル名が省略された場合に、この名前「index.html(あるいは index.htm)」というファイ ルを応答するという設定がされている場合が多くあります。 ページに付けるファイル名 パソコンではファイルやフォルダの名前には、アルファベットや数字だけでなく、ひらがな、カタカナ、漢字等さま ざまな文字を使うことが可能です。しかし、ページの名前（ファイル名）に漢字等を使用すると、ページを公開す る際に、ページ名が文字化けを起こしたり、別の形式の文字列に変換されてしまうことがよくあります。よって、ペ ージに付ける名前は、英数字（半角）をのみを使うよう注意してください。
12.リンクの設定
(1)リンク先の用意
次はリンクの設定ですが、その前にリンク先のページを用意しておきましょう。もう一度、「ファイル(F)」メニュー から、「標準モードで新規作成(B)」を選択してください。 こちらのページは単純に index.html からのリンク先として用意するだけですので、適当に文字を入力し、 sub.html という名前を付けて保存してください。(余裕があれば、こちらのページにもタイトルを。 ) 保存できたら、右側にある「ページ一覧」タブを見てください。現在開いているページの一覧が表示されていま す。複数のページを開いている場合は、この中から編集したいページを選択できます。 では index.html を選択してください。(2)設定
最初に作成・保存した index.html に、そこから sub.html へ移動するためのリンクを設定しましょう。先ほど練習 した箇条書きの後にカーソルを移動してください。その場所に、今回は、「次のページへ」と入力してください。さ らに「次のページへ」の部分をドラッグして、色が反転した状態にしてください。 このドラッグした文字列のどこかをクリックしたときに、別のページへ移動する設定をします。このままの状態で、左側｢ナビメニュー｣タブから「リンクの挿入」を選ぶと、リンク作成ウィンドウが表示されます。 ここで「ページや URL へのリンクを作成する（P）」を選択し「次へ」をクリックし、「リンク作成ウィザード（文字列、 画像ファイルの設定）」ウィンドウではそのまま「次へ」をクリック。「リンク作成ウィザード（ページや URL へのリンク 作成）」ウィンドウで｢選択｣ボタンをクリックし「ファイルから…」を選択、｢開く｣ウィンドウが表示されるので sub.html を選択して「開く」、「完了」の順にクリックしてください。 すると、先ほどドラッグした箇所に下線が引かれます。これでリンクの設定は終了です。 正しく設定できたか確認するには、「プレビュー」を選択し、実際に設定したリンクの箇所をマウスでクリックして みます。クリックしたときに、意図したページが表示されれば、正しく設定がなされていることになります。 「プレビュー」の状態では編集はできません。設定が間違っていた場合などは、「ページ編集」をクリックし、リン クの設定した箇所を一旦クリックしてから、リンク先の再指定をしてください。 リンクは、「ドラッグ」した状態で右クリックし、メニューの「リンクの挿入(L)」を選択しても同じ様に設定できます。
「属性」ウィンドウで先ほどのようにリンク設定を行うことができます。
13.画像の貼り込み
今度は画像を貼り込んでみましょう。今回は、ホームページ・ビルダーに添付されている素材集の画像を貼り 込んで見ます。 カーソルを移動し、「枠」が表示されていない状態にしてください。次に「ナビメニュー」タブの「画像ファイルの 挿入」から「素材集から」を選択してください。 左側の素材タブからも画像ファイルを選択することができます。 素材集の中から好きな画像を選択して「開く(O)」をクリックすれば、カーソル位置に、その画像が貼り込まれま す。 カーソル位置に画像が 入る 画像を貼るときに、、、 ページに貼り込む画像データの「著作権」や、デジカメなどで撮影した写真の場合、そこに自分以外の人物が写 っている場合の「肖像権」などには、十分注意してください。 ページに貼る画像の形式通常、ページに画像ファイルを貼る場合、GIF(拡張子 .gif)や JPEG(拡張子 .jpg) PNG(拡張子 .png)といった形 式であらかじめ画像を用意しますが、Windows の「ペイント」で作成した BMP(拡張子 .bmp)の画像でも、ホーム ページ・ビルダーでは貼り込むことが可能です。（ホームページ・ビルダーが形式を変換してくれます）
14.ページの保存（画像ファイルも合わせて保存する）
では、ページの用意ができたので、すべてを保存しましょう。すべてを保存するにはまず編集スタイルを「スタ ンダード」モードに変更します。（この操作は現在の編集スタイルである「かんたん」モードには「すべて保存（V）」 の項目が無い為、必要になります。慣れてくれば、始めから「スタンダード」モードでページを作成しても構いま せん。） ｢表示（V）｣メニューの「編集スタイルの切り替え（O）」を選択し 編集スタイルをスタンダードに変え、「OK」をクリック。 「ファイル（F）」から「すべて保存（V）」を選択する。 現在開いているページは index.html と sub.html の２つですが、変更があったページについて、保存の方法 を尋ねてきます。ここで、index.html には先ほど貼り込んだ画像があるので、その画像ファイルをどこに保存する か、ホームページビルダーはたずねてきます。 画像を含むページを作成した場合は、画像ファイルの保存場所に注意してください。ホームページ・ビルダー は、ページとそのページに使われている画像ファイルを、同じフォルダに保存しようとします。特に理由がない限 り、ページと画像は同じフォルダに保存しておくとよいでしょう。（特に素材集から画像ファイルを貼り込んだ場合 など） Index.html と同じ場所 画像ファイルの名前を変更する必要がある場合には、ここで変更しておきましょう。 画像ファイルを一つのフォルダにまとめて保存しておきたい場合は、ページと画像ファイルを無理に同じフォ ルダにする必要はありませんが、画像を保存してあるフォルダも、ページを転送・公開する際には、合わせて転 送する必要がありますので、注意してください。 以上で作成は終了です。 では、これらのページをサーバーへ転送し、実際にブラウザで表示してみましょう。15.ページのアップロード（転送と公開）
作成したページはサーバーへ転送して、初めて公開されます。公開には FFFTP というファイル転送のための ソフトを利用しましょう。 ホームページ・ビルダーにも作成したファイル（ページ）をサーバーへ転送するためのツール「FTPツール」が ありますが、そちらについては、別に紹介します。 駿河台地区でページを公開する際には、作成したページを suruga2, kjk2-kws, kjk3-kws のいずれか に転送する必要があります。 では、「スタート」メニューから「すべてのプログラム(P)」を選択し、FFFTP を立ち上げてください。 suruga2, kjk2-kws, kjk3-kws のいずれかを選択し、「接続」をクリックしてください。接続先のサーバーとしては ３種類が選択可能になっていますが、どこに接続しても、サーバーにあるファイル、ディレクトリ（フォルダ）は同一 になるように管理されています。 本来はこの後、接続のための ID とパスワード(パソコンへログインするための ID,パスワードと同じ)を入力する 必要があるのですが、教室・実習室ではその必要がないよう設定してありますので、即座に接続され、転送先に あるファイル名、ディレクトリ名（フォルダ名）が表示されます。 一旦接続を切ってしまった場合などは、ID,パスワードの入力が必要になります。いったん接続を切った後、再度 接続しようとすると、ID,パスワー ドを入力する必要がある。 PC 側を FD(または USB メモリ)に指定し、local_html フォルダごと転送すれば、アップロードは終了です。 サーバー側に local_html ディレクトリがない場合は作成されます。 すでにサーバー側に local_html ディレクト リがある場合は、上書きされてしまいますので、必要に応じて名前を変更しておく等をしてからアップロードしてく ださい。 以上で転送は終了しました。「切断」ボタンをクリックして FFFTP を終了してください。 では、ブラウザ（インターネットエクスププローラーかネットスケープナビゲーター）を立ち上げて、 • http://local.kisc.meiji.ac.jp/~ユーザーID/ にアクセスしてみてください。 講習は以上です。 最後に、ホームページ・ビルダーなど、立ち上がっているソフトウェアを終了してください。また、席を立つ際には、 以下の事項にも注意してください。
•
FD、USB メモリなどが PC に入ったままになっていな
いか？
•
ログオフしたか？
付録
A.文字の書式の変更
文中の文字の色や大きさ、形を変更したい場合は、以下の手順で行います。 変更したい文字列をドラッグして反転せる。 このとき、「枠」は段落全体にかかっているので、右クリックをして表示されるメニューの「属性の変更(A)」を選択 すると、「段落」に対しての属性の指定になってしまい、文字の色や形状の変更はできない。 よって、この時点では、そのままの状態で「書式(O)」メニューを開き、指定したい内容を選択する。指定できる 内容は以下の通り。 主な項目 指定できる内容 「フォント(F)」 文字の色、大きさ、形状（太字、斜体 など） 「文字飾り(M)」 太字、斜体、下線付などの指示 「位置揃え(A)」 右寄せ、左寄せ、センタリングの指示 ここで、「フォント（F）」を選択し「フォント」ウィンドウ上で色を赤、サイズを「+2」と指定すると、このようになる。 これを再度変更したい場合は、変更部分をドラッグすると、その部分だけに「枠」が表示されるので、右クリック でひょうじされるメニューから「属性の変更(A)」を選択すればよい。 以上です。なお、「書式(O)」メニューを開かずに、書式を変更することも可能です。 左から、「太字」、「斜体」、「打ち消し線」を指示するボタン（打ち消し線は「かんたん」モード では表示されない場合があります） 左から「文字拡大」、「文字の縮小」、「フォント(大きさ、色、形状など)の変更」を指示するボ タン 左から、「左寄せ」、「センタリング」、「右寄せ」を指示するボタン 文字の大きさの指定について 文字の大きさは、１～7 までの数字、あるいは、-2～+4 の割合で指示します。 特に指示がない場合、文字の大きさは３(0)になります。 ただし、大きさの違いは実際にブラウザで表示しないとわかりませんので、注意してください。
B.リンクの設定（URL で指定）
リンク先にインターネット上の別のサーバーを指定する場合は、文字列をドラッグして右クリックし、「リンクの挿 入(L)」を選択したあと、属性指定のウィンドウで「URL へ」を選択し、リンク先の指定をしてください。C.表の作成
表の作成は、「表(A)」メニューの「表の挿入(B)」を選択する、あるいは、「表の挿入」ボタンのクリックでできます。 （「表の挿入」ボタンは「かんたん」モードでは表示されません） すると、「表の挿入」ウィンドウが表示されますので、ここで行数、列数を指定して「OK」をクリックしてください。 カーソル位置に四角い枠が指示した数だけ表紙されます。あとは、この枠をクリックし、文字などを埋めていけば、 表ができあがります。D.FFFTP でのサーバー側のファイル操作
(1)ファイルの削除
たとえば転送の際にフォルダーごと転送した場合、フォルダー内のすべてのファイルが転送されてしまうので、 ホームページ・ビルダーが作成したバックアップ用ファイル＊＊＊.bak.といった不要なものまで転送されてしま います。 これらを削除したい場合は、不要なファイルを右クリックし「削除」を選択し、ファイル名を確認のうえ「はい(Y)」 をクリックしてください。(2)フォルダの作成
フォルダの作成は、サーバー側に作成する場合は、いったんサーバー側で右クリックし、表示されるメニュー から「フォルダ作成(K)」を選択し、名前を指定して「OK」をクリックしてください。 (「フォルダ作成」ボタンをクリックしても作成できます。)E.FTP ツールによるファイル転送
ホームページ・ビルダーに添付されている FTP ツール（ファイル転送）を使用したファイル転送の手順は以下 のとおりです。 ホームページ・ビルダーの「ツール」メニューから「FTP ツールの起動(F)」を選択する。 「ファイル転送設定」ウィンドウが表示されたら、以下を入力する。 • サーバープロファイル名・・・これはなんでもよい • プロバイダの選択・・・いじらなくてよい。指示をするなら「その他」を選択する。 • FTP サーバー名(S)・・・ suruga2, kjk2-kws, kjk3-kws のいずれかひとつ • FTP アカウント名(U)・・・自分のユーザーID • FTP パスワード(P)・・・なにも入力しない あるいは自分のパスワードを入力する。 ここで 入力しない場合、接続を始めたときにパスワードをきかれるので、 そのときに入力する。 「OK」をクリックし「接続」ボタンをクリックし、次いでパスワードを入力する。左側には PC のファイルが表示されるので、必要なものを選択し、上向き矢印をクリックすれば、それがサーバ ーに転送される。
