webt - Webページの作成Ⅱ（専用ソフトを使って）

	Web技術実習
	戻る〔３．Webページの作成Ⅰ（メモ帳を使って）〕　次へ〔５．Webページの公開と閲覧〕　目次

　Webページ作成用のアプリケーション・ソフトウェアとして「ホームページ・ビルダー(IBM社)」を使用する。テキストでは、このソフトウェアを「HPBソフト」と表記する。

　まず、デスクトップにある「HPBソフト」のアイコンをダブルクリックして起動する。表示されたダイアログ・ボックスは、［キャンセル］をクリックして閉じる。

・新しくWebページを準備

　操作１　新しいページを作成する。メニューバーから次のように選択する。

［ファイル(F)］　→　［標準モードで新規作成(B)］

・タイトルバーに表示する文字を設定

　操作２　メニューバーから次のように選択して、属性のダイアログ・ボックスを表示する。

［編集(E)］　→　［ページの属性(I)...］

結果　⇒　　属性　のダイアログ・ボックスが表示される。

　操作３　表示された属性のダイアログ・ボックスの［ページ情報］タブ、［ページタイトル(P):］の入力欄に「はじめてのWebページ2」と入力して、［OK］ボタンをクリックする。

・文字データの入力

　操作４　次のようにデータ（文字）を入力し、ファイル名(hajime2.htm)で保存する。

　入力したデータ（3行）がピンク色の枠で囲まれる。この枠が1つのタグにはさまれた部分を表している。
　ウィンドウ右上に　<P>　と表示されており、この枠が段落を表す<P>タグと</P>タグにはさまれた部分であることを表している。

　操作５　Webブラウザで、ファイルhajime2.htmを閲覧する。

結果　⇒　行で表示される。
結果　⇒　Webブラウザのタイトルバーにと表示される。

　データにHTMLのタグを入力していないが、Webブラウザには正しく表示される。
　次に、HPBソフトで、どのようにタグが入っているのか確認する。

　操作６　［HTMLソース］タブをクリックして、タグが入っていることを確認する。

タグ（青色で表示）は自動的に挿入されている。
このウィンドウで編集することもできる。

・見出し部の設定

　操作７　学校名を大きな文字に変更する。［ページ編集］タブをクリックして、学校名の行末で[Shift]＋[Enter]を押す。

結果　⇒　学校名とほかの2行が別の段落になる。

　「総合学科」の上の改行マークは削除しておく。

　操作８　学校名の段落にカーソルを移動して、メニューバーから次のように選択する。

［編集(E)］　→　［段落(P)］　→　［見出し1(1)］

上書き保存する。

　操作９　Webブラウザの更新ボタンをクリックして、再表示させる。

結果　⇒　学校名がな文字で表示される。

・文字の色を設定

　操作１０　学科名をドラッグで範囲指定して、メニューバーから次のように選択する。

［編集(E)］　→　［フォント(C)］

ダイアログで色指定から赤色を選択する。上書き保存する。

　操作１１　Webブラウザの更新ボタンをクリックして、再表示させる。

ダイアログ・ボックス (dialog box): 　エラーメッセージの表示や操作の確認要求などに使用されるウィンドウのこと。略して、ダイアログとも呼ぶ。
タブ (tab): 　本やノートに見出しとして貼り付けるものの意味から、同じウィンドウで内容を切り替えるために使われるもののこと。

戻る〔３．Webページの作成Ⅰ（メモ帳を使って）〕　次へ〔５．Webページの公開と閲覧〕　目次
Web技術実習	Copyright © 2006,2007 Hiroshi Masuda