ホームページ　作成編　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　（ホームページ・ビルダー19)

Transcription

1 ホームページ作成編 ( ホームページ ビルダー 19) 明治大学教育の情報化推進本部 ( 和泉 )

2 目次 ホームページ作成編 ( ホームページ ビルダー 19) 1. はじめに この講習会でマスターすること ホームページの作り方 HTML とタグ ページ公開の仕組み ホームページ ビルダー 19 の紹介 コンテンツ ( 素材 ) の作成 準備 ホームページ ビルダー 19 の起動 新たにページを作成する ページを保存する ページにタイトルを付ける 文字の入力 ( 見出しの作成 ) 文の入力 ( 段落の作成 ) 文字のフォント ( 書式 ) の変更 水平線の入力 壁紙の挿入 リンクの設定 1 ( ページ内のリンク ) リンクの設定 2(URL を指定 ) 画像の挿入 ページの保存 ( 画像ファイルも合わせて保存する ) 付録 A. 表の挿入 B. ロゴの作成 C. 箇条書きの作成 D. サイト機能を使ってホームページを作成する E. ヘルプ

3 1. はじめに 1.1. この講習会でマスターすること ホームページの仕組みを理解します ホームページ作成ソフト ホームページ ビルダー 19 を利用して 自分のホームページをつくります 作成したホームページを 明治大学学内のネットワークで公開します 1.2. ホームページの作り方 HTML などの技術的な知識を持たない個人がホームページを作るには 大きく分けて3 通りの方法があります (1) ホームページ作成ソフトを利用して作る (2) Web サービスを利用して作る (3) テンプレートを利用して作る それぞれのメリット デメリットなどを以下に紹介します ホームページ作成ソフト Web サービステンプレート 概要メリットデメリット具体例 市販ソフトを購入して使う方法です 初心者向け プロ向けなど様々なソフトウェアが販売されています 技術的な知識がなくても作成できる マウス操作で部品を貼り付けるだけで様々な機能を追加できる たくさんの素材が付属している 購入にお金がかかる ( 特にプロ向けのソフトは価格が高い ) ソースがそのソフト流の記述に修正されるため 直接編集しにくい ホームページ ビルダー Dreamweaver Expression Web など インターネット上で公開されている ホームページを作るサービス を使う方法です 技術的な知識がなくても作成できる テンプレートを切り替えによりサイトのデザインを簡単に変更できる 作成から公開まで ブラウザだけで完結できる カスタマイズする場合は HTML や CSS に関する知識が必要 インターネットに接続していないと使えない 会員登録が必要 FC2 ホームページ Yahoo! ジオシティーズ Ameba ブログなど インターネット上で公開されている 無料のテンプレートファイル を使う方法です デザイン性に優れたテンプレートが揃っている 基本的な構成やメニューが最初から完成しているため 素早く作成できる 会員登録不要 ( サイトによっては必要 ) カスタマイズする場合は HTML や CSS に関する知識が必要 好みのデザインが見つからない場合がある Flash Natural Nikukyu-Punch Design Template など 2

4 3つの方法を併用して作る上記 3つの方法は 併用して使うこともできます 例えば 1 基本部分は無料テンプレートを利用して作るが 2 細かい変更やカスタマイズにはホームページ作成ソフトを使う 3 ブログ部分に関しては Web サービスを利用する といったこともできます 本テキストでは ホームページ作成ソフト の内容について説明しています 1.3. HTML とタグ ホームページは HTML(Hyper Text Markup Language) というテキスト形式のファイルを核として ほか画像 音声ファイルなど様々なファイルから構成されています HTML ファイルには 文書構造や見栄え ハイパーリンクなどを指定する タグ と呼ばれる標識が埋め込まれています HTML 文書の作成 Web ブラウザで閲覧 タグ ( テキストエディタで作成 ) (Internet Explorer で閲覧 ) テキストエディタでタグを直接入力して HTML 文書を作成しようとすると タグの種類と役割を理解している必要があります この講習で使う ホームページ ビルダー は タグの意味を知らなくても マウスの操作でデータにタグを自動的に埋め込みながら 直感的にホームページの作成が可能なソフトです 3

5 1.4. ページ公開の仕組み ホームページを作成しただけでは 自分のパソコン上でしかそのページを見ることができません WWW(World Wide Web ワールドワイドウェブ ) というシステムに基づき インターネット上のサーバにデータを転送すれば そのページはインターネットに接続しているどのパソコンからでも閲覧できるようになります データの所在は もしくは で始まる URL(Uniform Resource Locator) によって インターネット上のどこにあるのか表わされます 駿河台 和泉の利用者がホームページを公開する場合 下記の4つの手順が必要です 1. リムーバブルディスク等に local_html( 学内公開 ) または public_html( 学外公開 ) というフォルダを作成します 2. そのフォルダの中に 作成したホームページのファイルや画像を保存します 3.local_html または public_html フォルダを FFFTP ソフト等を利用してサーバに転送 ( アップロード ) します 4. web ブラウザ上で下記の URL を入力し 公開されていることを確認します 公開方法アップロード先転送したデータの URL 学内のみ公開 suruga2 の local_html へ ユーザー ID/ ファイル名 学外へも公開 suruga2 の public_html へ ユーザー ID/ ファイル名 ホームページを公開するに当たっては MIND 利用基準 を遵守しなければなりません 以下のサイトを参照してください 学校法人明治大学総合情報ネットワーク (MIND) 利用基準 MIND 利用上の遵守事項ガイドライン~インターネットを使う上で~ 詳しくは別冊の 14. ホームページのアップロード (HPB,FFFTP).pdf を参照してください 4

6 1.5. ホームページ ビルダー 19 の紹介 本テキストでは ホームページ作成ソフトの中の ホ ムページ ビルダー 19 を使用します このソフトを使用することで ホームページ作成の知識がなくてもホームページ作成が可能です またホームページ ビルダー 19 には2つのソフトが入っています * ホームページ ビルダー 19 SP テンプレートを元に様々なパーツを配置していくことで簡単にホームページが作成できるソフトです ただし 必ずテンプレートを使用しないといけないため 自由度が損なわれます 短時間で洗練されたデザインのホームページを作るためには向いています * ホームページ ビルダー 19 クラシック何もない白紙の状態から自由なホームページの作成ができます 従来のホームページ ビルダーの機能をそのまま引き継いだソフトです HTML や CSS の編集機能も充実していて Dreamweaver に引けを取らない仕様です ただし 2 つのソフトに互換性はないため注意 * 本テキストでは主に ホームページ ビルダー 19 クラシック を使って ホームページ作成の基礎を勉強していきます * ホームページ作成からアップロードまでを行い 今後一人で簡単なホームページが作れるようになることを目標として作業していきます

7 2. コンテンツ ( 素材 ) の作成 ホームページ作成編 ( ホームページ ビルダー 19) 学内用に公開するホームページ ( ホームページで表示される文章ファイル 画像 等 ) の作成を行います 注意することは コンテンツ ( 素材 ) やフォルダの名前は全て半角英数で入力するということです 全角 日本語等で名前を入力するとホームページを公開した時に正しく表示されないことがあります 2.1. 準備 最初に MyDocs(X:) に local_html ( 学内に公開するためのフォルダ ) を作成してください 上部にある[ 新しいフォルダ ] を左クリック ( またはフォルダ上で右クリック 新規作成 フォルダー をクリック) local_html ( 半角英数 ) という名前をつける _ ( アンダーバー ) Shift + ろろは Enter の左下にあります USB メモリなどのリムーバブルディスクの中に local_html を作成することもできます 以後 作成したページや画像は全てこのフォルダに保存します また サーバへの転送もこのフォルダごと行います 右クリックでフォルダ作成の例 左上のショートカットボタンからフォルダ作成 (local_html) 注意 : 一つのフォルダにすべてのコンテンツが入っていないとホームページを更新した時に画像が表示されないなどの不具合が生じます フォルダ分けをする場合は階層構造を理解したうえで分けましょう サイト機能の紹介 : ホームページ ビルダーには 上記でフォルダを作成するのと同じ目的で サイト作成 という機能を利用することもできます サイト作成をするとサイト単位でファイルの読み込みができ またサイト内のファイルのツリー構造が確認できます 詳細は 付録 D. サイト機能を使ってホームページを作成する を参考にしてください 6

8 2.2. ホームページ ビルダー 19 の起動 ホームページ ビルダー 19 を起動してください スタート ボタンから すべてのプログラム クリック 一番下の ホームページ作成 クリック ホームページ ビルダー 19 クラシック を選択して下さい 2.3. 新たにページを作成する (1) 様々な新規作成 ホームページ ビルダー 19 の起動 1ホームページ ビルダーが起動します 2また かんたんナビ が表示されていない場合は メニューより 表示 (V) かんたんナビ(N) をクリックします 4 すると画面が変わり 初めての方には使いやすくなります 3 1 起動画面 2 かんたんナビ表示後の画面 [ 表示 ] から [ かんたんナビ ] へ 7

9 (2) ホームページビルダーの画面 かんたんナビバー タイトルバー メニューバー ツールバー かんたんナビメニュー ページ編集領域 パレットスタイル ステータスバー 操作方法は一通りではないホームページ ビルダーの全ての機能は メニューバー から実行できます それに加えて よく使う機能は ツールバー などや ナビメニュー などに アイコンの形で分かりやすくまとめられています つまり操作方法は一通りではなく 何通りも存在するということです この講習会では メニューバーからの操作を中心にして 操作方法を説明しています 8

10 (3) 新規作成 ホームページ ビルダーでは 様々なホームページの形式を設定することができますが ここでは 白紙の状態からホームページを新規作成していきます 画面内の ファイル ボタンをクリックして 標準モードで新規作成 (B) を選択してください 1 1 標準モードで新規作成 参考 : フル CSS テンプレート からの作成 ホームページ ビルダー でホームページを作る方法は 真っ新な状態から自由に作成していく方法と あらかじめ用意されたテンプレート ( ひな形 ) を元に作成していく方法の 2 つがあり ここでの 標準モードで新規作成 は前者の方法となります ただし 一からデザインの整ったホームページを作るとなると 画像素材の用意 レイアウトや色彩の設定 文章の作成など 非常に手間がかかるのに対し テンプレートを用いるとセンスの良いデザインを土台とした効率的なホームページ作成が可能です とくに ホームページ ビルダー 16 には ページ内デザインが細かく設定された CSS(Cascading Style Sheet) ファイルとともに構成される フル CSS テンプレート が加わっています 現在では Web サイトの多くが CSS ファイルを用いて構成されており ホームページ ビルダー での作成も CSS テンプレートからの作成が主流にあるといえます 基礎を学んだ後には この フル CSS テンプレート からの作成にチャレンジしてみましょう 白紙ページの作成 画面が表示されます ( 図 1) ホームページを編集する領域を ページ編集領域 と呼びます ページ編集領域 は [ ページ編集 ] [HTML ソース ] [ ページ / ソース ] [ プレビュー ] の 4 つの表示方法があります ( 図 2) ページを編集するときは [ ページ編集 ] タブを 実際のページ表示を確認するときは [ プレビュー ] を HTML を直接編集するときなどは [HTML ソース ] や [ ページ / ソース ] を利用します 表示タブ ページ編集領域 図 1 白紙の新しいページが開く ページ編集 HTML ソース 図 2 ページ編集領域 の表示タブ ( 左 ) と [ ページ / ソース ] タブ選択時の表示画面 ( 右 ) 9

11 2.4. ページを保存する ファイル (F) メニュー 名前を付けて保存 (A) を 選択します 2.1. 準備で作成した local_html フォルダの中へ index.html という名前を 半角英数で入力して保存してください 名前を付けて保存 index.html というファイル名について 明治大学の WWW サーバでは ある閲覧者からアクセスが来た際 URL にサーバ名 ( 例 : やディレクトリ名 ( 例 : が指定された場合 つまりファイル名が指定されない場合 index.html または index.htm というファイルを発信します これにより 同階層にある他のファイルやディレクトリが丸見えになるのを防ぐ働きがあります インターネット上の多くの WWW サーバはそのような設定になっています トップページ以外のファイルには 半角英数であればどのような名前をつけても構いませんが トップページのファイル名は index.html が基本です index.html ではなく top.html などで作成した場合はアドレスにファイル名まで入力する必要があります 詳しくは別冊の 14. ホームページのアップロード (HPB,FFFTP).pdf を参照してください ページに付けるファイル名は必ず半角英数で パソコンではファイルやフォルダの名前には アルファベットや数字だけでなく ひらがな カタカナ 漢字等様々な文字を使うことが可能です しかし ファイル名に漢字等を使用すると FTP ソフトによっては正しく表示されない場合や ページを公開する際にページ名が文字化けを起こしたり 別の形式の文字列に変換されてしまうことがよくあります よって ページや画像 写真に付ける ファイル名は必ず半角の英数字のみとして下さい 全角や漢字などの名前をつけた場合 作成したホームページは 正しく表示されない場合があります 10

12 2.5. ページにタイトルを付ける タイトル とはホームページ上の名前のことで Web ブラウザで閲覧した際に タイトルバー やタブに表示されます タイトルはページごとに設定できます 見出し ( 本文の文頭 ) とは異なります ( 見出しは 13 ページで作成します ) 例 Internet Explorer で明治大学の公式ウェブサイトを閲覧した場合 ここに表示されるのが タイトル です 画面上何も選択されていない状態で 編集 (E) 1 属性の変更 (A) 2 を選択してください なお この操作は 画面右上にある [ 編集 ] ツールバー の 属性の変更 ボタンからも行うことができます 1 [ 編集 ] ツールバー [ 編集 ] ツールバーからの操作 属性 ダイアログボックスの ページ情報 タブにある ページタイトル (P) に名前を入力し( ここでは 例として 花 と入力します ) OK をクリックしてください 3 ここで入力した文字列が 編集中のページのタイトルになります 4 属性の変更 ページタイトルが表示される ページタイトルを入力 保存時から何か変更した 編集中の場合は * マークがついています 保存をすると消え また編集し始めると * が付きます 11

13 2.6. 文字の入力 ( 見出しの作成 ) 次にページに見出しをつけましょう ページ編集 の画面内で適当な個所をクリックしてください 文字を入力すると ピンクの フォーカス枠 が表示され (1) 現在編集している部分 ( 段落 ) である ことを示しています ホームページ ビルダーではこの枠内の文章が一まとまりのパーツとして扱われ 枠単位で様々な設定をすることも可能です 最初に 初めての作成 と文字を入力してください 標準モードでは画面ではピンクの枠 ( どこでも配置モードでは水色の枠 ) 1 文字を入力したら 編集 ツールバーに表示されている 属性の変更 ボタンをクリックしてください 表示される 段落 の中で 見出し 1 を選択してください すると 選択されている部分の文字が 見出し の レベル1 に設定されます 2 * 見出し 設定は 文字のフォントや大きさなどを指定するものではありません インターネット上でどのように表示されるかは基本的に各ブラウザ (InternetExploer FireFox GoogleChrome など ) の設定に委ねられています 2 属性タグで見出しを設定 3 この 見出し の変更の操作は 画面左上の [ 書式ツールバー ] にあるプルダウンリストからも 同じように変更が可能です 3 [ 書式ツールバー ] からの選択でも同じ 12

14 2.7. 文の入力 ( 段落の作成 ) 見出しの設定ができたら 通常の文章を入力してみましょう 見出し 初めての作成 の下をクリックするか カーソル の下向き矢印 キーを押します ( このとき見出し 初めての作成 編集時に表示されていたピンク の枠が消えていることを確認しましょう ) そこに これからホームページを作ります と入力します 文字を入力すると 新たにピンクの枠が表示され 新しい段落で編集していることが確認できます 新しい段落での入力 段落分け ( キー ) と 改行 (Enter キー ) 段落 は文章の一まとまりで 行 はその段落内を構成するものです ホームページ ビルダーで 編集する際には 段落 と 行 の違いを明確にし 下記の操作も区別しなくてはいけません 段落分け : 下向き矢印 キーを押す 改 行 :Enter キーを押す * 実際に HTML ソース表示をしてみると 段落で囲まれる文章は <P> </P> というタグで囲まれていること 改行した箇所には <br> というタグが埋め込まれていることを確認できます 注意 : 下記の文字はコンピューターの機種によって表示できない場合があります 使用はできるだけ避けましょう 半角カナ文字 : KK ミリキロセンチメートルク ラムトンアールヘクタールリットルワットカロリート ルセントハ ーセントミリハ ールヘ ーシ など丸付きの数字 : 上下左右などその他 : 明治大正昭和平成mmcmkmmgkgccなど 13

15 2.8. 文字のフォント ( 書式 ) の変更 文字の色や大きさ 形を変更します 初めての作成 の文字列のうち 作成 の文字だけ大きくし 色を変えてみましょう 変更したい文字列がある段落をクリックします 1 作成 の文字列のみを選択 ( ドラッグ ) します 2 メニューの 書式 (O) フォント (F) を選択します 3 文字列をクリック 作成 の文字列のみを選択 ( ドラッグ ) フォントを選択 フォント ダイアログボックスが表示されます ここで 色指定やサイズ 書体 文字飾りなどを 変更することができます サンプル欄には 変更した場合の文字が表示されます 4では 色指定 :Red サイズ:+4 文字飾り: 斜体 の設定をしています サンプル画面で表示を確認した後 OK をクリックしてください 4 フォント内容を変更 右図のように文字のフォントの変更ができました 5 5 フォントの変更 14

16 書式ツールバーからの変更 文字書式の変更 : 文字の書式は書式ツールバーにある 以下のボタンでも同様の操作ができます 左から 太字 斜体 取り消し線 ( をクリックすることで下線なども設定可能 ) 文字サイズ拡大 文字サイズ縮小 文字色の変更 フォントの変更 などの ボタンが配置されています 段落内の文字列配置設定 段落内での文字列の配置についても 書式ツールバーにある 以下のボタンで操作ができます 左から 左揃え 中央揃え 右揃え となります 文字を選択する時の注意 : 文字列を囲うピンクの 枠 のみが表示されている ( 段落選択 ) 状態で右クリックし メニューの 属性の変更 (A) を選択すると 段落 に対しての属性指定になってしまい 文字の色や形状の変更はできません 必ず文字をドラッグ ( 選択 ) してからフォント設定を行ってください 文字の大きさの指定について : 文字の大きさは 1~7 までの数字 あるいは -2~+4 の割合で指示します 特に指示がない場合 文字の大きさは3(0) になります ただし 大きさの違いは実際にブラウザで表示しないとわかりませんので 注意してください 15

17 2.9. 水平線の入力 次は 水平線 ( 区切り線 ) を引いてみましょう ( 下向き矢印 ) を一回押してください 挿入(I) メニューの 水平線 を選択してください 1 これで水平線の入力ができました 2 1 水平線を選択 2 水平線の入力 なお かんたんナビ表示時は 画面左側のナビメニューから [ レイアウト部品の挿入 ] をクリックして 水平線 を選択することで 水平線の入力を行うこともできます 3 3 水平線の入力 ( かんたんナビ表示 ) 16

18 2.10. 壁紙の挿入 背景にホームページの内容にふさわしい壁紙をつけます 挿入 (I) 画像ファイル 素材集から壁紙として を選択してください 1 1 [ 素材集から壁紙として ] を選択 すると 図 3 のように 素材集から開く ダイアログ ボックスが開きます この中から好きなデザインを選択して 開く をクリック します ( 今回は wallppr016.gif を選択します )2 2 図 3 壁紙のデザインを選択 背景に壁紙が設定されました 3 3 壁紙設定後 17

19 2.11. リンクの設定 1 ( ページ内のリンク ) (1) リンク先の用意 次はリンクの設定をします まず初めにリンク先のページを用意します リンクとは 複数の文書を結び付ける役割を担う 参照 のことであり ジャンプ先を指定して別ページに行くことを指します ファイル(F) メニューから 標準モードで新規作成(B) を選択し新しい画面を開いてください (2.3.(1) の様々な新規作成を参照してください I8) これから作成するページは index.html からのリンク先として用意するページです 新規画面が開いたら編集領域に リンク先のページ と入力してください sub.html という名前を付けて 先程と同じ local_html フォルダ内に保存してください (2.1. 準備を参照してください ) 保存できたら 右側の ページ一覧 タブをクリックしてみましょう 1 現在開いているページの一覧が表示されます ( 編集中のページ欄に index.html と sub.html という2つのファイルが表示されています ) * 複数のページを開いている場合は この中から編集したいページを選択することができます 1 ページ一覧 では この中の index.html をクリックしてください 18

20 (2) 設定 index.html から sub.html へファイル移動するためのリンクを設定しましょう 現在開いている index.html の画面上で 先ほど入力した水平線の下 に下向き矢印 ( ) でカーソルを移動してください そこに 次のページへ と入力してください 2 次に 次のページへ の部分をドラッグ ( 選択 ) します ( この 次のページへ のどこかをクリックした時 別のページへ移動する設定をリンクと言います ) 挿入(I) メニューの リンク(L) を選択してください 3 2 リンクする文字の入力 3 リンク先の設定 属性 ダイアログボックスで ファイルへ タブの 参照 を クリックして表示されるメニューから ファイルから を クリックします 4 4 属性の参照 開く ダイアログボックスが開くので sub.html を選択し 開く をクリックします 5 属性 ダイアログボックスに戻りますので OK をクリックします 5 sub.html をリンク先に選択 すると 先ほど選択した 次のページへ の箇所に下線が 引かれ 青く表示されます これで リンクの設定ができました 6 6 リンク設定 19

21 正しく設定できたか確認するために プレビュー タブを クリックしてください 7 7 プレビュー画面でリンク設定を確認 プレビュー タブでは 編集中のページがブラウザ でどのように見えるかを確認することができます この画面上で 次のページへ をクリックします この時 先ほど作った sub.html ファイルの画面が表示されれば OK です ( 図 4 のようにリンク部分をポイントすると ページ編集領域の上にリンク先のファイルの場所が表示されます ) 図 4 リンクの確認 リンク先の場所 なお かんたんナビ表示時は 画面左側のナビメニュー から [ リンクの挿入 ] をクリックして リンクの設定を行 うこともできます 8 8 リンクの挿入 ( かんたんナビ表示時 ) 参考 : リンクは文字や画像を選択し マウスの右クリック メニュー リンクの挿入 (L) を 選択しても同様の設定ができます 注意 : ページ編集を続けるにはページ編集画面に戻ってください プレビュー画面では編集することはできません 20

22 2.12. リンクの設定 2(URL を指定 ) リンク先にインターネット上の別のホームページを指定することもできます ここでは 明治大学へ の部分にインターネット上の明治大学のホームページをリンクしてみましょう 次のページへ の下に 明治大学へ と入力をします リンクを設定する文字列 明治大学へ をドラッグして選択し 右クリックして表示されるメニューから リンクの挿入(L) を選択します 1 1 属性 ダイアログボックスが表示されるので 上部にあるタブから URL へ タブをクリックします http(p): にチェックが入っているのを確認し URL(R) 欄にリンク先の URL を入力してください ( ここでは htttp:// と入力します) 右クリックからリンクの設定 最後に OK をクリックします 2 2 * プレビュー タブをクリックして 編集中のページでリン ク先のホームページに飛べることを確認しておきましょう URL を指定 なお かんたんナビ表示時は 画面左側のナビメニューから [ リンクの挿入 ] をクリックして リンクの設定を行うこともできます (I21 ページ図 8) 参考 : リンク先の URL はブラウザのアドレスを事前にコピーしておくとよいでしょう その際下記のショートカットを使うと便利です コピー :[Ctrl] キー + [C] ( コントロールキーを押しながらアルファベットの C を押す ) 貼り付け :[Ctrl] キー + [V] ( コントロールキーを押しながらアルファベットの V を押す ) 21

23 2.13. 画像の挿入 次は画像を挿入しましょう 今回はホームページ ビルダーに添付されている素材集の画像を使用します 画像を挿入したい場所にカーソルを移動し ピンクの 枠 が表示されていない状態にしてください ( ここでは 次のページへ の下に画像を挿入してみます ) 挿入 (I) メニューの 画像ファイル (I) から 素材集か ら (G) を選択してください 1 1 素材集から画像を選ぶ なお かんたんナビ表示時は 画面左側のナビメニューから [ 写真や画像の挿入 ] をクリックして 素材集から を選択する ことで 同様の操作を行うこともできます 2 画像の挿入 ( かんたんナビ表示時 ) 2 次に 素材集から開く ダイアログボックスが開きます 左側のフォルダから イラスト 植物 をクリックし 好きな画像を選択してください 開く をクリックします (3では img_h015.gif を選択しています ) 3 画像を選択 22

24 カーソル位置に画像が挿入されます 4 画像の大きさを変えたい時画像を選択し画像の四隅に表示される四角いハンドルをマウスで両向き矢印 ( ) の状態で ドラッグしながら調節してください 5 4 画像の挿入 5 画像の拡大 縮小 ホームページ ビルダー 19 で使用できる画像ファイルは GIF( 拡張子.gif) JPEG( 拡張子.jpg) PNG( 拡張子.png) BMP( 拡張子.bmp) など ホームページに画像を掲載する際の注意ホームページ作成時には使用する画像データの 著作権 に十分ご注意ください また 自分で撮影した写真でも個人を特定できる第三者が写っている場合は 肖像権 に触れることがあります 23

25 2.14. ページの保存 ( 画像ファイルも合わせて保存する ) では ここまでの作業の結果をすべて保存しましょう ファイル (F) メニューの すべて保存 (V) を選択してください すると 図 5 の画面が表示され 先ほど挿入した壁紙とイラストの画像ファイルをどこに保存しますか? と尋ねてきます HTML ファイルはテキストのみで構成されるファイルで ホームページ ビルダー編集画面でページ内に挿入されたかのように見える画像は HTML ファイル上ではその画像ファイルを表示する という内容が書き込まれているにすぎません そのため 挿入した画像ファイルを別に保存する必要があります 図 5 の画面はその保存実行のためのダイアログボックスです 基本的にページ内で用いる画像等の素材ファイルも html ファイルと同じフォルダの中に保存します ( ここでは保存場所が HTML ファイルと同じフォルダ と指定してあります ) 図 5 素材ファイルをコピーして保存 図 5 のファイル名と保存場所を確認し 変更する必要がある場合には その下の 選択項目の変更 で変 更します ファイル名は半角英数字のみです また保存場所は参照 (B) ボタンから選びましょう 最後に 下部の 上書き時に自動的にファイル名を変更する にチェックをして保存をクリックします 名前をつけて保存 上書き保存 と すべて保存 の違い 名前を付けて保存 や 上書き保存 は 現在編集中の HTML ファイル ( およびそれに関わる画像等の素材ファイル ) のみを保存します これに対し すべて保存 は開いているすべての HTML ファイル ( およびそれに関わる画像等の素材ファイル ) を保存します 以上でホームページの作成は完了です あとは これらのページをサーバへ転送し ネット上に公開します 別冊のアップロード編を参照ください 24

26 3. 付録 A. 表の挿入 表を挿入したい場所にカーソルを移動してください ( ここでは 桜の画像の下にカーソルを移動しています ) 表(A) メニューの 表の挿入(B) を選択します 1 かんたんナビ表示時は 画面左側のナビメニューから [ 表の挿入 ] 挿入することも可能です をクリックして 1 図 62 表の挿入 表の挿入 ダイアログボックスが表示されます ここで行数 列数を指定して OK をクリックします 2 ( ここでは 4 行 4 列と指定しています ) 2 画面上に表が挿入されました 3 最初にクリックしたカーソル位置に四角い枠が指定した数だけ表示されます 枠をクリックすることで その表の中に文字や画像を挿入することができます 図 63 行数 列数を指定 3 表の挿入 25

27 B. ロゴの作成 ロゴ は以下の手順で作成します ロゴを入れたい箇所にカーソルを移動してください ( ここでは はじめて作成 の下にカーソルをおきます ) メニューから挿入 ロゴを選択してください ロゴの挿入かんたんナビ表示時は 画面左側のナビメニューから [ ロゴ ( 飾り文字 ) の挿入 ] をクリックして挿入することも可能です 2 1 ロゴの挿入 ( ナビメニューから ) すると ロゴの作成 ダイアログボックスが 表示されます 3 文字 (T) 欄に適当な文字を入力し 文字の大きさ 文字の形状を選択してください プレビューで確認し よければ完了をクリックしてください 3 ロゴの作成画面 カーソル位置にロゴが挿入されました 4 4 ロゴの挿入 26

28 ロゴの再編集のために作成されるフォルダロゴを作成した場合には 保存した際に下記メッセージが出てきて _HPB _Recycled という名前のフォルダが local_html フォルダ内に作成されます 挿入したロゴを再編集するためのもので このフォルダを削除してしまうと ロゴの編集ができなくなりますので注意しましょう C. 箇条書きの作成 箇条書きを作成してみましょう まず カーソルを移動しピンクの枠が表示されていない状態にしてください 箇条書きの種類は 番号なしの箇条書き (,, などが先頭に表示される ) 番号つきの箇条書き (1,2,3 など ) などがあります 箇条書きは 挿入 (I) メニュー リスト(S) と選択します ここでは 箇条書きの種類の番号なしリスト (B) を選択します 1 また 箇条書きは 書式ツールバーにあるボタンでも 1 同じ操作ができます 番号なしリスト (B) を選択すると カーソル位置に が表示されます 箇条書きの入力 カーソルの点滅している所から さくら と入力し Enter キーを押してください すると 2 番目の文が入力できるようになります 2 2 入力時 箇条書きは この操作の繰り返しで必要な分だけ入力します 続けて うめ と入力し 次に もも と入力しましょう リストが完成します 3 3 リスト例 27

29 D. サイト機能を使ってホームページを作成する ホームページ ビルダーにはサイト機能があります これはホームページの中で使われるファイル 画像などをまとめて管理 ( 保存 ) し サイト単位でファイルの読み込みなどができる機能です サイトを作成する場合は 新たに ホームページ ビルダー 19 クラシック を立ち上げてください 1. サイトを新規作成する メニューバーにある サイト サイトの新規作成 を 選択してください 1 1 サイトの新規作成 サイト新規作成 のダイアログボックスが表示されます まず サイト名の指定 を行います サイト名を入力 ( ここでは mysite) して 次へ をクリックします 2 2 サイト名の指定 次に トップページの指定方法の選択 を行います ここでは 新規にトップページを作成する を クリックして 次へ をクリックします 3 3 新規にトップページを作成 続いて トップページのファイル名と作成先のフォルダの指定 を行います 4 トップページのファイル名(P) で index.html を選択し トップページの作成先フォルダの指定 (F) では 参照(R) をクリックします 4 トップページのファイル名の指定 28

30 フォルダーの参照 ダイアログボックスが表示されます 今度はお持ちの USB メモリ内に新規に local_html フォルダを作成してみましょう コンピューター USB メモリ ( 任意のドライブ ) を選択し 新しいフォルダーの作成 をクリックしてでてくるフォルダーに local_html を入力して 最後に OK をクリックしてください 5 その後 先程の トップページのファイル名と作成先のフォル ダの指定 4 に戻るので 完了 をクリックします local_html フォルダの新規作成 5 ページ作成方法の選択 ダイアログボックスが開きます ので 白紙ページ (B) をクリックしましょう 転送設定のメッセージがでてきたら いいえ を クリックします サイトが作成されました 2. サイト作成後 ファイルページを作成します 以下 3 つのページ (HTML ファイル ) を 標準モードで新規作成 より作成してみましょう index.html ファイル名 :index.html 書式設定 お茶のページ 見出し 1 中央揃配置 お茶のいろいろ 見出し 2 中央揃配置 お茶のおとも 見出し 2 中央揃配置リンク設定 お茶のいろいろ に sub1.html へのリンク お茶のおとも に sub2.html へのリンク素材画像 pic_f01.jpg( 素材集から 写真 食べ物 ) 29

31 sub1.html ファイル名 :sub1.html リンク設定 ホームへ戻る に index.html へのリンク素材画像 pic_f038.jpg( 素材集から 写真 食べ物 ) sub2.html ファイル名 :sub2.html リンク設定 ホームへ戻る に index.html へのリンク素材画像 pic_f054.jpg( 素材集から 写真 食べ物 ) 3. 作成したファイルをサイトに保存します ファイル すべて保存 を選択する 全てのファイルが local_html フォルダ内に 保存されます 6 参考までに local_html フォルダを開いて確認しまし ょう 6 local_html フォルダを開いた画面ここでは 3 つの html ファイルを作成しましたが フォルダ内にはそれに付随する複数のファイル ( 画像など ) が自動的に保存されていますね これらのファイルが別のフォルダに保存されてしまうと ホームページ更新時に画像が表示されない等の不具合が生じますので 作成時には十分注意しましょう 30

32 4. サイト単位でファイルを読み込む 作成したファイルをサイト名でまとめて読み込むことが できます サイト サイトを開く を選択します 7 7 サイト単位でファイルを読み込む I29~I30 ページで設定したサイト名 ( ここでは mysite ) を選択して 開く をクリックします 8 8 サイトを選択 すると 下記のような ビジュアルサイトビュー が開き サイト内のリンク構造が表示されます 編集したいファイルをダブルクリックすると編集画面が開きます それぞれ + をクリックして展開 index.html から sub1.html と sub2.html へのリンク sub1.html と sub2.html から index.html へのリンク 5. ファイルの転送 ページの公開はアップロード編を参照してください 31

33 E. ヘルプ この講習会で紹介した内容以外にも ホームページ ビルダーには多くの便利な機能があります ホームページ ビルダーの使い方については ガイドマップ に詳しくまとめられていますので 活用して下さい 32