ホームページ作成 （ホームページビルダー編）
事前準備
・ホームページ作成ソフト（ビルダー１４など） ・レイアウト・HP の構成をあらかじめ決めて、専用フォルダを作っておく。 （フォルダ構成サンプルを参考にしてください。） ・画像を一つのフォルダにまとめる。（新規でフォルダを作成し、名前はimage 等で） ・容量の大きな画像はリサイズしておく。 ・使用するフォルダ・ファイル名は必ず 半角英数 で！
ホームページ作成にあたっての注意点！
画像（image）ファイルの移動 画像などは、「image」のフォルダに入れるとわ かりやすくできるのですが、画像などを「image」 に入れそこなっていた時など、保存したあとで画像 の移動をしてしまうとページ上で画像のリンクが 切れてしまい、見えなくなってしまいます。 その時は、「画像の挿入」で「image」フォルダ から挿入し直すか、ソース画面で直接画像のリンク 場所を変更します。 また「使用ファイル移動方法」、「未使用・不要フ ァイル削除」も紹介してますので、参考にしてくだ さい。 生徒写真を載せる場合 ホームページに生徒が写った写真などを載せる時は、個人を特定できないよう配慮が必要です。 ・生徒の顔がはっきりわからないようなアングル で撮る。（背面からなど） ・顔がわからないように「モザイク」加工などで 顔をぼかすなどの処理を行う。 リンク切れ
新規にページを作成するには
１．新規ページを立ち上げる ①左上の「新規ページ」をクリックします。 ②モードの選択の画面が表示されますので、「標準 モード」を選んで「OK」を押して立ち上げます。 ※「どこでも配置モード」は見る人のＰＣ環境によ って崩れたりするので、お勧めしません。 ２．ページにタイトルを付ける 作成するページにタイトルを付けます。 ブラウザタイトル に表示されるようになり、サイト の作成時やホームページ閲覧者にも分かりやすくな ります。 ①タイトルをつける時は、画面左上の「ページの属 性」をクリックします。 ②属性の画面が表示されますので、「ページタイトル」①
① ① ①②
① ① ①①
①
②
タイトル（ロゴ）の挿入するには
タイトル（ロゴ）の挿入 ①タイトル（ロゴ）にする文字列を入力します。 入力した文字を範囲選択します。 ②「ロゴの挿入」ボタンをクリックします。 ③表示されたメニューから、「ロゴ（飾り文字）」を クリックします。 ④ロゴの作成画面が表示されるので、お好みの形式 とサイズ、色などを変更して「完了」をクリック します。 ※詳細な設定をしたい時は、「文字の詳細設定」をク リックすると、細かな変更ができます。①
②
③
タイトルなどの配置を変更するには
タイトルやボタン、画像の配置の変更を工夫することで、バランスのとれたページの作成ができます。 配置の変更 ①作成されたロゴをクリックして選択します。 ②選択された状態で、「中央揃え」をクリックします。 選択したロゴが、ページ中央に移動します。 ※配置の調整ボタンは 「左寄せ ｜中央寄せ ｜右寄せ 」の順 で並んでいます。ＣＨＥＣＫ！
通常の文字入力はWORD や一太郎と同じですが、ネット上の関係でフォントサイズは、 ７サイズの範囲での変更しかできません。（標準サイズから上に＋４、下に－２）①
②
ページ背景を変更するには
背景を付けることで見栄えの良いページを作ることができます。 壁紙の挿入をする ①画面左側にある「ナビメニュー」から「壁紙の挿 入」ボタンをクリックします。 ②表示されたメニューから、「素材集から」をクリッ クします。 ③「素材集から開く」という画面が表示されます。 壁紙用素材のテンプレートの一覧から、お好みの 壁紙を選んで挿入します。ＣＨＥＣＫ！
ホームページのカラーをあらかじめ決めておくと、全体的に統一感のあるサイトが出 来ます。 また、ホームページはさまざまな人が閲覧するので、派手になり過ぎて見にくくなら ないよう注意しましょう。 壁紙の挿入①
②
ページの配置バランスを整えるには
HP をさらに見やすくし、作成時のバランスをとりやすくする為には、表を活用します。 表の挿入 表をうまく分割し、その中に文字や画像を入れてページの作成をしましょう。 表自体や表内を中央揃えにしたりして、わかりやす く見やすい構成が素早くできます。 （表はＥxcel のセルと同じで、「列・行の追加」で 追加し、「列・行の削除」で削除します。又、「表の 非表示」の選択で、見えない状態にもできます。） ①表の挿入は、「ナビメニュー」の「表の挿入」ボタ ンで挿入可能です。 下にサンプル図を載せていますが、赤で括っている ように３つの表を挿入しています。 表の挿入
写真・画像を挿入するには
写真・画像（image）の挿入 ①ナビメニューの「写真や画像の挿入」をクリック します。 ②写真の挿入は「デジカメ写真」、イラストなどの画 像挿入は「ファイルから」をクリックします。 ②で「デジカメ写真」をクリックした場合 「写真挿入ウィザード」の画面が表示されます。 ウィザード画面にしたがって、挿入する画像を 選んで、挿入します。 ②で「ファイルから」をクリックした場合 挿入したい画像などのファイルを指定して、挿 入します。 「素材集から」を選択した場合は、 （Ａ）で写真の種類を選択します。 （Ｂ）で写真を選択します。ＣＨＥＣＫ！
段落の変更をしないと同じ段落内の文章や画像などは、中央揃えなどの変更をすると、 段落すべてに変更がかかってしまいます。 段落の変更をかけたい時は、Shift＋Enter で段落改行します。①
②
写真や画像の挿入（Ａ）
（Ｂ）
写真・画像を編集するには
挿入した写真をセピアカラーに変更したり、枠や文字を付けたりと様々な効果・編集を加える事が出 来ます。 写真・画像の編集 編集したい写真・画像をクリックすると、画面上 部に編集項目が表示されます 「デジカメ写真の編集」 簡単な写真編集ができます。 「画像の調整」 画像の回転や合成画像編集ができます。細 かい修正や加工ならウェブアートデザイ ナーで編集します。 「画像の効果」 画像にさまざまな効果（モノクロなど）や フレームを付ける編集ができます。 編集したい内容にあったボタンを選んでクリッ クしましょう。 サンプル画像 ↓
別ページを表示するボタン挿入するには
別のページを表示させたい時や、別のページから戻ってくる時にボタンを使います。 ボタンの挿入 ①ナビメニューの「ロゴの挿入」をクリックします。 ②操作の選択画面から、「ボタン」をクリックします。 ③「ボタンの作成」画面が表示されるので、用途に 合ったボタンを選択し、挿入します。①
②
ロゴの挿入
ボタンの変更・編集するには
別のページを表示させたい時や、別のページから戻ってくる時にボタンを使います。 ボタンの変更・編集 ｖ ①変更したいボタンを右クリックします。 ②一覧が表示されるので、「ボタンの編集」をクリッ クします。 ③ボタン挿入時と同じ「ボタンの作成」の画面が表 示されるので、文字や種類、大きさの変更が可能 です。 ※細かく編集したい場合は「詳細設定」をクリック し変更、編集をします。②
①
右クリック
ボタン等に別ページを表示させる設定をかけるには
ハイパーリンク機能を活用すれば、ボタンなどをクリックすることで別のページを表示させることが 出来ます。（ボタン以外にも、文字列や画像などにも設定できます。） ハイパーリンクの設定 ①「文字列」の場合は、リンクを設定したい文字列 を範囲選択します。 「画像・ボタン」の場合は、リンクを設定したい 画像・ボタンをクリックし選択します。 ②ナビメニューの「リンクの挿入」をクリックしま す。 ③「リンク作成ウィザード」が表示されます。 「ページやＵＲＬへの～」を選択し、次に進みま す。①
②
リンクの挿入③
④リンク先を指定する画面が表示されます。 リンク先の指定をして完了です。 リンク先指定する時は、「選択」から指定すると 簡単に指定できます。 ⑤同じホームページ内のリンク設定の時は、「ターゲ ット」は空欄のままでＯＫです。 ＰＤＦファイルや写真、外部のサイトにリンクを設 定する場合は、ターゲット横の「▼」をクリックし、 「新しいウィンドウ」に変更して完了します。 （外部サイトにリンクを設定する場合は、設定した いサイトの「リンクの規約」を確認する必要があり ます。確認メールや設定できないサイトもあります。）
④
⑤
ページ内での移動を簡単にするには
ページが下に長くなってしまった場合、スクロールでページを閲覧するのは大変です。 ハイパーリンク設定のラベル機能を活用すれば、ページ内でのリンクが出来、スクロール移動を省けます。 ハイパーリンク設定（ラベルを付ける） １、移動先に名前を（ラベル）を付ける ①移動したい場所の文字列や画像・ボタンを選択し ます。 ②ナビメニューの「リンクの挿入」をクリックしま す。 ③「リンク作成ウィザード」が表示されます。 「ラベルを作成する」をクリックして、「次へ」 をクリックします。 ④「ラベルを付ける」をクリックし、「次へ」をクリ ックします。 ⑤「ラベル」に任意のラベル名を記入し、「完了」を クリックします。①
②
③
④
⑤
ハイパーリンク設定（ラベルへ） 移動させるための元となる文字列や画像・ボタンにハイパーリンクの設定をします。 ２、移動元から指定したラベルへの リンク（ハイパーリンク）の設定を行う ①移動元となる文字列（範囲選択）や画像・ボタン をクリックし選択します。 ②ナビメニューの「リンクの挿入」をクリックしま す。 ③「リンク作成ウィザード」が表示されます。 「ラベルを作成する」をクリックして、「次へ」 をクリックします。 この作業は、前ページの①・②・③と同じです。 ④「ラベルへのリンクを作成する」をクリックしま す。 ⑤ラベル名の横「▼」をクリックします。 ⑥「ラベルを付ける」で設定したラベル名を下枠の 一覧から選択し、「ＯＫ」をクリックして完了で す。
