FrontPage 2003 操作ガイド ― ホームページ作成・編集機能編 ― この操作ガイドは、FrontPage2003（以下、FrontPage と呼びます）のホームページ作成・編集機能について、 その操作法を解説するものです。FrontPage にはこのほか、ホームページの管理機能がありますが、ここでは触 れません。またこのガイドでは、ホームページ作成における基本機能を中心に解説します。より詳しい操作法に ついては、次の図書が参考になります。 ・Microsoft Office FrontPage 2003 基本操作編 / 日経 BP ソフトプレス/著・制作 ・ひと目でわかる Microsoft Office 2003 / 日経 BP ソフトプレス/編 1 FrontPage の起動と終了 起 動 ほかのソフトと同様、タスクバー上の［スタート］メニ ュー−［プログラム］あるいは、デスクトップ上のショー トカットアイコンから FrontPage を選択して起動します。 FrontPage を起動すると、図 1 のような画面が表示され ます。図のように、ページウィンドウ、右側に作業ウィン ドウが表示されます（作業ウィンドウは、必要がなければ、 閉じておくこともできます）。中央のページウィンドウ上で は、このまま新たなページを書き始めることができます。 このように起動直後は通常、標準のページを作成する状態 になります。ここで標準のページを新たに作成するのであ れば、このまま画面上で作成をはじめればよいわけですが、 図1 後述のようにテンプレートを使用したりフレームを使用し Frontpage 2003 の起動時画面 たページを作成するときは、 「新規作成」の操作が必要にな ります。 終 了 FrontPage の終了は、［ファイル］メニューの［終了］あるいはウィンドウの右肩にある［×］ボタンによっ てできます。ホームページの作成や編集をおこなったあとに終了しようとすると、そのページを保存するかどう かの確認が求められることがあります。これは作成・編集したページがまだ保存されていないためです。保存の 要否を判断して答えてください。保存の方法は、ワープロなどの文書の保存と同様です。 2 ホームページとその提供 ホームページは図 2 のように、インターネットに 接続された Web（あるいは WWW）サーバと呼ばれ ブラウザ ･ ･ ･ ･ るコンピュータから行われます。これを閲覧するに 閲覧 は、インターネットに自分のコンピュータ（パソコ Internet ンなど）を接続し、Web サーバにアクセスして閲覧 アップロード Web サーバ ホームページ 作成 を要求するということになります。したがって、自 分のコンピュータ上でホームページを作っただけで は、インターネットや LAN を通してほかの人に見 図2 てもらうということはできません。 ホームページの作成と提供 そこで、作成したホームページを提供するときは、 Web サーバとして働いているコンピュータに必要なファイル（ホームページを構成するファイル）を送って、そ こに載せる必要があります。これをサーバへのアップロードといいます。こうしてはじめて、ネットワークを通 して見てもらうことが可能になります。自分のコンピュータを Web サーバにすることもできますが、通常はイン −1− ターネットから直接アクセスするようにはしないので、Web サーバ用に特別に用意されたコンピュータを利用す ることになります。Web サーバは、あなたが所属する機関（学校など）やインターネット接続業者（プロバイダ ー）のところにあり、利用することができます。 3 ホームページ新規作成の準備 FrontPage の起動時には通常、標準的なページの新規作 成状態となり、すぐに新しいページの作成を始めることが できるので、特に準備は必要ありません。ただ、すでに作 成中のページがあって、新たにホームページを作成すると き、あるいは予め用意されている様式（テンプレート）を 利用したいときやフレームを使用したページを作成すると きは、次の手順でその準備をします。 図 1 の画面上、右側に表示される［新規作成］作業ウィ ンドウで作業を行います。（開かれていない場合はツール 図3 新規作成時のテンプレート選択の ダイアログボックス バーの［ファイル］−［新規作成］を選択すると表示され ます。 ） 「新規作成」作業ウィンドウの「新しいページ」−［その メニュー 他のページテンプレート…］をクリックして、図 3 のよう な「ページテンプレート」ダイアログボックスを表示させ ツールバー ます。ここには、 「全般」「フレームページ」「スタイルシー ト」の 3 つのタブがあります。通常は「全般」の中から、 編集・作成領域 作成しようとするページの種類にしたがって、テンプレー ト（雛形）を選びます。フレームやスタイルシートを使用 するときは、それぞれのタブを開いて、その中から選択し ます。フレームやスタイルシートの利用は少し高度になる ので、これについては、あらためて解説します。 「全般」の 中のテンプレートは、ワープロのテンプレートと同様に考 図4 FrontPage の作成・編集画面 えればよいでしょう。特にテンプレートを必要としなけれ ば、 「標準ページ」を選びます。ここでは「標準ページ」が 選択されたものとして話を進めます。「標準ページ」が選ばれたときの画面は図 4 の通りです。 メニューとツールバー 画面上には、ページを作成する領域を中央に、最上段にメニューが、その下によく使用されるボタンを配置し たツールバーが表示されています。これらのメニューやボタンには、ページ作成領域上でページを作成するとき に必要な機能が割り当てられています。どのメニューあるいはボタンを使うと何ができるかを理解することによ って、ホームページを自由に作成できるようになります。なお、これらのツールバーはユーザの設定により表示 させたり閉じたりすることができます。また、図 4 にある以外にもいくつかのツールバーがあります。その表示/ 非表示の選択は［表示］メニューで行います。 ページビューの 3 種類の画面 ページ作成領域の左下を見て下さい。4 つのタブ（付箋）が見られます。「デザイン」「分割」 「コード」「プレ ビュー」の 3 つです。このようにページ作成領域の表示には通常、4 種類があり、これらを切り換えて見ること ができます。次に、それぞれの表示画面について説明をします。 (1) デザイン ページの作成をするときの標準的な表示画面です。できあがり（ブラウザで見たときの表示）に近い形で表示 され、その上で作成・編集をワープロ感覚でおこなうことができます。通常、この画面上で作成・編集を行いま す。 −2− (2) 分割 デザインと HTML コードを参照しながら編集を行うことができます。 ホームページは HTML と呼ばれる言語を使って書かれます。ページのどこに何をどのように表示するかなど、 ホームページについてのすべての指示は、HTML と呼ばれる記述法（書き方）に従って行われます。ただ、 FrontPage でホームページを作成する場合、作成者は HTML を意識することなく、 「標準」画面上でワープロ感 覚でページを作成することができます。FrontPage はそのとき、自動的に「HTML」を作成しています。HTML の画面では、 「標準」の画面で作成したページが HTML を使ってどのように表されているかを見ることができま す。これを直接、編集することによってページの作成・編集を進めることもできます。ほとんどのことは「標準」 画面でできますが、微妙な調整や高度な機能の組み込みでは、HTML を直接編集する必要が生じる場合がありま す。また、繰り返し同様の記述をしたり、同じ変更を複数の個所に対して行うときなどは、「HTML」画面で行 う方が能率的なときがあります。 (3) コード HTML コードのみを表示します。 (4) プレビュー ブラウザで見たときの完全なイメージが表示されます。プレビューには Internet Explorer が使用されます。 Internet Explorer がインストールされていない場合は、このタブは表示されません。他のブラウザでプレビュー する場合は、［ファイル］メニューの［ブラウザのプレビュー］を使用することができます。 4 簡単なページの作成 ではここで、FrontPage を使って簡単なホームページを作ってみましょう。標準の画面で、次の文字を図 5 の ように入力してください。なお、改行は各段落の最後でのみ行ってください。ウィンドウの大きさによって文章 途中の改行位置は変わりますが、ワープロのときと同様に、改行しないで入力を続けてください。 ようこそ葛野家のホームページへ このたび葛野家では、インターネット上にホー ムページを開設することになりました。ホームページの作 成ははじめたばかりで、まだまだ勉強することがたくさん あります。まずはシンプルなスタイルで、葛野家をご紹介 したいと思います。 葛野家の紹介 父 光男 46 歳、会社員。電気関係のメーカーに勤務しています。 趣味はカラオケと休日のごろ寝。最近、妻の「華子」の影 響で、インターネットへの興味を示しています。 母 華子 42 歳、専業主婦。趣味はお菓子作りやテニス。最近、知 的魅力に誘われてパソコンを始め、ついにホームページの 作成に挑戦。 長男 光一郎 18 歳、花（？）の高校 3 年生。受験地獄の真っ最中。 長女 華恵 13 歳、中学 1 年生。母の作るお菓子の食べすぎで少し太 りぎみ。それがちょっぴり気になる 13 歳です。 図5 文字だけのホームページ このようなページは、文字だけを入力し、まったく編集を施さない最も単純なページです。これを保存して、実際にど のように表示されるかを、ブラウザで見てみることにします。 作成・編集したページの保存 まず［ファイル］メニューの［名前を付けて保存］を選びます。表示されるダイアログボックスで、保存先（ドライ ブとフォルダ）を指定し、さらに保存時のファイル名を入力して［保存］ボタンを押します。ここではファイル名とし て、 「kadono0」という名前を付けて保存することにします。「ファイルの種類」は「Web ページ」が選択されているの で、保存されるファイルには、拡張子として「htm」が付き、実際には「kadono0.htm」というファイル名で保存され −3− ます。 ここで、ブラウザ上で閲覧した際にタイトルバーに表示される、 ページタイトルを変更したい場合は、「ページタイトル」の右にあ る［タイトルの変更］をクリックします。図 6 のような「ページ タイトルの設定」ダイアログボックスが表示されますので、変更 したいタイトルを入力し、変更をおこなってください。 ブラウザでの閲覧 まずブラウザを起動します。ブラウザは通常、WWW サーバに アクセスして、そこでサービスされているホームページを閲覧す るものですが、自分のコンピュータ上に保存されている（フロッ 図6 ページの保存とページタイトルの設定画面 ピーを含む）ファイルを表示させることもできます。 ファイルを表示するにはまず、ブラウザの［ファイル］ メニューの［開く］または［ファイルを開く］を選びます。 ブラウザやそのバージョンによっては（Internet Explorer の各バージョンなど）、［ファイルを開く］というメニュー はなく、その場合はインターネット上のホームページと同 様、 ［開く］や［ページを開く］を使用します。これらを選 択すると、ファイルの所在を入力するダイアログボックス が表示されます。通常は、 ［ファイルを選択］といったボタ ンがあり、（Internet Explorer では［参照］） 、これを押し て目的のファイルを探します。 図 7 は Internet Explore を使って、先に保存したファイル （kadono0.htm）を表示したものです。 図7 kadono0.htm をブラウザで表示させたところ 5 テキストの編集 ここで、テキスト部分についてのいくつかの主要な編集法を紹介します。これらの編集を加えることにより、テキス ト部分を見やすくしたり表現力を高めたりすることができます。 見出し 「見出し」は通常、それだけを単独の行に表示し、本文よりも目立つように表示させます。「見出し」に指定すると、 文字を大きく太く表示させることができます。「見出し」の大きさは 6 段階が用意されています。 ある行を「見出し」にするにはまず、その行を選択します（その行をクリックします）。そこで、上部のツールバーの 2 段目（図 4 参照）の左端にあって通常「標準」と表示されたボックスを開き、その中から目的の「見出し」を選択し ます。この操作は、ツールバー［書式］メニューの［段落］でも行うことができます。 （以後このボックスを「スタイル の変更ボックス」と呼びます。） 図 8 の「ようこそ葛野家のホームページへ」の部分は、このようにして「見出し 1」に設定したものです。 フォントの変更 文字の書体、大きさ、色を変更することができます。ただフォントの変更は、使用するブラウザによっては期待通り に表示されないことがあります。これらの変更を行うには、まず、対象の文字または文字列を選択してから、次の操作 を行います。 大きさを変えるには、ツールバー上の通常「3（12 ポイント）」と表示されているボックスで目的の大きさを選択しま す。1（8 ポイント）から 7（36 ポイント）まで選択できます（「標準」は「3（12 ポイント）」に設定されています）。ま た、フォント サイズの拡大 、フォント サイズの縮小 でもサイズの変更ができます。書体を変えるには、ツー ルバー上の 通 常 「 M S P ゴ シ ック」と表示されているボックスで目的のフォントを選びます（「（標準フォント）」は 「MS P ゴシック」に設定されています）。さらに文字の色を変えるには、 の右側の「▼」のボタンを押して目的 の色を選択します。ボタン上の を押すと、「A」の下に表示されている色が適用されます。 図 8 ではこれらの機能により、「葛野家のご紹介」の部分で、文字のサイズを「5（18 ポイント）」にしています。見 −4− 出しの場合と違って、太字にはなりません。また、行の一部の文字だけを大きくすることもできます。 図8 様々なテキスト編集を加えたページの例 文字飾り 文字は、太字、斜体、アンダーライン付けなどの修飾をすることができます。これを行うには、ツールバー上の ボタンのいずれかを押します。図 8 では、「葛野家のご紹介」の部分にアンダーラインを引いています。 改 行 改行には 2 通りあります。図 7 の例では、行間を空けるようにした改行を使用しています。入力確定後に Enter キー で改行を行うと、自動的に段落として認識され、次の段落との間に適度な行間が空けられます。この例では、このよう に行間が空いている方が見やすくて良いでしょう。 これに対して、行間を空けずに密着改行にすることもできます。密着改行をするには、入力時に改行する際、SHIFT キ ーを押しながら改行をおこないます。また、既に入力したものを変更するときは、BS キーなどで一度、改行を取り消 してから同様に操作します。図 7 に比べ、図 8 では、人物紹介の後の間隔がもう少し広くなっています。これは、人物 紹介の後に密着改行が入っているためです。 図 7 よりさらに、見やすくなったのではないでしょうか。 水平線 図 8 のようにページの任意の箇所に水平線を挿入することができます。水平線を挿入するには、挿入したい箇所にカ ーソルを置いて、 ［挿入］メニューの［水平線］を選びます。図 8 では、ページの冒頭の挨拶文の上下に水平線を挿入し ています。挿入した水平線は、これを右クリックで選択した後、 ［水平線のプロパティ］を使って、長さや太さを変更す ることができます。 リスト表示 リスト表示とは箇条書きのことです。次の 3 通りがあります。 ・記号付きリスト ・番号付きリスト ・用語リスト (1) 記号付きリスト 図 9 の「記号付きリスト」のように、「●」などの記号を各行の前に付けて箇条書きにします。この設定をするには、 −5− ボタンを押してからその行を入力します。2 行目以降はそ のまま続けて入力し、何も入力しないで Enter キーを押すと、 そこでリストは終わります。また、既に入力された行を記号付 きリストにするときは、その行にカーソルを置いて ボタン を押すと、その行が記号付きリストになります。 (2) 番号付きリスト 図 9 の「番号付きリスト」のように、各行の前に番号を付け て箇条書きにします。この設定をするには、 ボタンを押し てからその行を入力します。2 行目以降はそのまま続けて入力 し、何も入力しないでリターンキーを押すと、そこでリストは 終わります。また、既に入力された行を番号付きリストにする ときは、その行にカーソルを置いて ボタンを押すと、そ の行が番号付きリストになります。 図9 リスト表示の例 (3) 用語リスト 図 9 の「用語リスト」のように、用語としての行とその説明の形で少し行頭を下げた文書で構成される箇条書きです。 用語リストを作成するにはまず、ツールバーの左端にある「スタイルの変更」ボックスで「定義された用語」を選択し ます。その後でここに定義される用語あるいはタイトルを入力して改行します。すると次の行は、自動的にその用語の 説明の行（「定義」行）となります。そこにその用語の解説を入力します。既に用語やその説明が入力されているときは、 その行にカーソルを置いて、「スタイルの変更」ボックスで「定義された用語」あるいは「定義」を選択します。 インデント インデントとは字下げのことです。字下げをしたい部分（複数行でも可能）を選択して、ツールバーの します。これを解除するときは ボタンを押 ボタンを押します。前出の図 8 の「家族の紹介」のところではこれを利用して、字下 げがしてあります。 中央配置と右詰め配置 文字列の配置は通常、ワープロなどと同様に左詰めです。これを中央に配置したり右詰めで配置したりすることがで きます。これをおこなうには、ツールバー上の や ボタンを使用します。再度同 じ ボタンを押すと、標準の左詰め 配置に戻すことができます。後出の図 12 では、 「ようこそ葛野家のホームページへ」を中央配置に、 「By Hanae Kadono」 を右詰め配置にしています。 行間の調整など FrontPage2002 では、行間を調整することができます。標準で は図 10 のように、日本語はほとんど行間のない状態で表示されま す。これを広げることができます。行間の調整は段落、つまり「改 行」 （「SHIFT+改行」を除く）と改行の間にはさまれたブロック ごとに適用されます。 標準の行間 行間を調整するには、調整する範囲を反転して選択した後、 「書 式」メニューの「段落」を選択します。表示されるダイアログボ ックスで、 「行間」から適当な行間を選択します。選択できるのは 行間 1.5 行 1、1.5、2 行で、これらと異なる行間のときは、数字部分をキーボ ードから変更します。たとえば「130%」といった形で指定ができ ます。この機能ではあわせて、インデント、段落の前後のスペー ス、文字間の調整を行うこともできます。 図 10 −6− 行間調整 6 タイトルと背景 6.1 タイトル タイトルとはページの表題で、ブラウザで表示されたとき通常、ブラウザ上端のタイトルバーの位置に表示されます。 FrontPage では、作成するページで最初に入力した 1 行の文字列がタイトルとして設定されます。ただし、1 度これを 保存した後でこの行を修正してもタイトルは変わりません。 タイトルを変更するには、［ファイル］メニューの［プロパティ］を選択します。表示される「ページのプロパティ」 ダイアログボックスの「全般」タブを選択するとタイトルの入力箇所があります。ここでタイトルの入力・修正を行い ます。また「ページのプロパティ」ダイアログボックスは、 ［書式］メニューの［背景］でも表示させることができます。 6.2 背景 背景としては、背景色の設定と画像を並べる形の背景の設定ができ ます。いずれもタイトルと同様、「ページのプロパティ」で行います。 上記のいずれかの方法で「ページのプロパティ」を表示し、図 11 のよ うに「書式設定」タブを選択します。背景色を変更するにはここで、 「色」の「背景」の中で目的の色を選択します。 背景に画像を配置するときは、同じく「背景」タブの中で図 11 のよ うに「書式設定」−「背景の画像」をチェックし、 ［参照］ボタンを使 って背景として使用する画像を選択します。図 11 では、背景の画像に 「kadono.gif」を選んでいます。その結果をブラウザで表示したもの が図 12 のページです。「KADONO」として薄い文字が背景に並べら 図 11 「ページのプロパティ」の「背景」タブ れています。 図 12 背景に画像を使用したページの例 −7− 7 画像の挿入 別途用意された写真や絵などの画像ファイルをページに挿入することができます。また FrontPage には様々なクリ ップアートも用意されており、これを挿入することもできます。挿入できる画像ファイルの形式としては、JPEG また は GIF を主に使用します。さらに最近では、PNG 形式も用いられます。PNG 形式は Web 用に最適化された形式で、 今後は主に PNG 形式が使用されることが考えられます。 7.1 画像の準備 デジタル化されていない画像 まだコンピュータ用のファイルとして用意されていない画像については、まずその準備が必要です。通常はスキャナ によりこれを読み込んで画像ファイルとして保存します。保存する際に GIF、JPEG または PNG 形式で保存します。 単にその画像を表示させるだけのときは JPEG がよいでしょう。背景を透明化したり画像上でクリックするポイントを 設定するような場合には GIF がよいでしょう。PNG はいずれの場合も使用できます。保存するときのファイル容量は 大きくなりますが、BMP や DIB といった非圧縮形式で保存をしておいて、必要に応じて形式を変更する方法もありま す。また、JPEG や GIF 間での形式変換も可能です。 デジタル化された画像 上記のような目的に応じて、必要であれば JPEG、GIF、あるいは PNG 形式に変換します。 画像の編集・加工 用意された画像をそのまま使用することもあるでしょうが、明暗やコントラストを変えたり、一部何かを書き加えた りあるいは修正したり、文字を挿入したりして、何らかの加工を加えてから使用したい場合もあるでしょう。画像を編 集する場合は、図 13 の［図］ツールバーを使用して編集します。このツールバーは、画像を選択すると自動的に表示さ れますが、表示されない場合は、［表示］メニューの［ツールバー］から「図」を選択します。 図 13 7.2 ［図］ツールバー 画像の挿入法 用意された画像をページに挿入する作業は次の通りです。 まず、 ［挿入］メニューの［図］−［ファイルから］を選択します（ツ ールバーの をクリックしても同様の画面が表示されます）。図 14 のような「画像」ダイアログボックスが表示されます。ここで目的のフ ァイルを指定して［挿入］ボタンをクリックします。図 14 では 、 「Welcome.gif」というファイル名の GIF ファイルを選んでいます。こ うすると図 15 のように、ページの中にこの画像ファイルが挿入されます。 注意）新規作成し未保存の状態にあるページに画像を挿入すると、 「ファ 図 14 挿入する画像の選択 イル名」の前に、そのファイルの所在位置（パス）を示す記述が自動的 に挿入されることがあります。これは、サーバにアップロードしたとき に、画像が表示されないなどの問題を起こす原因になります。これを避 けるには、画像を挿入するより前にそのページを保存するようにします。 画像を挿入したときは、これを必ず確認するようにしましょう。 7.3 挿入された画像の編集 画像ツールバーの利用 FrontPage には挿入された画像を編集する機能があります。図の明暗 やコントラストの変更、回転、図の書き加え、文字の挿入、画像の縁へ の傾斜付け、モノクロ化などができます。この操作は、対象の画像をク 図 15 −8− 画像を挿入したページ リックした後、画面下の「画像ツールバー」で行います。画像ツールバーが表示されていないときは、 ［表示］メニュー の［画像ツールバー］をチェックします。 この方法による画像の編集は表示上のものです。画像ファイルそのものは変更されないので、縮小してもファイルサ イズは小さくなりませんし、拡大すると画像が不鮮明になります。最適なファイルサイズで鮮明な画像ファイルを挿入 するには、挿入前に専用の画像処理ソフトで編集するのがよいでしょう。 画像プロパティの変更（画像枠、表示位置、余白） 対象の画像を選択して［編集］メニューの［画像のプロパティ］を選択すると、 「画像のプロパティ」ダイアログボッ クスが表示されます。ここで「外観」タブにより、画像の周りの枠、画像の表示位置、画像と周りのテキストとの間隔 を指定することができます。 とくに、画像にハイパーリンク（8.2 参照）を設定した場合、周りに枠線が引かれることがあります。これを取り除く にはここで、外枠の太さを 0 に設定します。 画像表示位置 標準では、挿入された画像はページの左に寄せて表示されます。これを変更するには これを元に戻すときは、同じボタンをもう 1 度押します。 や ボタンを使用します。 も同じ左寄せの意味ですが、画像などを左寄せして、その 横（右）に複数の文字行が表示されるようにするという特殊な意味を持ちます。 画像の横への複数行のテキスト表示 画像の右や左に複数行のテキストを表示するには、その画像を選んで、 または ボタンで左詰めまたは右詰めを指 定します。これにより、画像の横に複数の行を表示させることができます。文字列が図の上と下に分かれてしまう場合 は、図をダブルクリックし、 「画像のプロパティ」ダイアログボックスを表示させます。 「折り返しのスタイル」で「左」 か「右」選択すると、文字列は図の横に表示されます。図の解説文を加えたり、文書の途中に体裁良く図を挿入したり するのに便利でしょう。 7.4 クリップアートなどの挿入 FrontPage にはホームページ上で利用できるさまざま なクリップアート（画像集）が準備されています。簡単な 操作でページ内に挿入することができます。 クリップアートを挿入するには、まず画像を挿入した場所 にカーソルをおいておきます。次に［挿入］メニューの［図］ クリック −［クリップアート］を選択すると、画面右側が、図 16a のように「クリップアートの挿入」ウィンドウへ変わりま す。ここで、挿入したい図を探します。「検索文字列」ボッ クスに、挿入したい図のキーワードを入力し、［検索］ボタ ンをクリックします。検索が実行され、図 16b のような検 「クリップアートの挿入」ウィンドウ 索結果が表示されます。挿入したいクリップアートをクリ ックすると、編集領域のカーソルを置いていた位置にクリ ップアートが挿入されます。「クリップアート」のほか、 「写真」 「アニメーション」「サウンド」が用意されており、 図 16 a）「クリップアートの挿入」ウィンドウ（左側） b）挿入後の画面（右側） これらも「クリップアート」同様に挿入することができま す。 8 ハイパーリンク ハイパーリンクとは、Web ページ最大の特徴の 1 つです。クリックすることによって、次々と目的のページを開いて いくことができます。このような文章をハイパーテキストと呼びます。ホームページでは、他の Web サイトのホームペ ージへのリンクを設定することにより、巨大なハイパーテキストが構成されます。ここでは、その仕組みと作り方（リ ンクの設定法）について説明します。 −9− 8.1 ハイパーリンク設定の基本手順 ここで「葛野家のホームページ」を図 17a のように変更し、 ここには各家族の名前だけを表示し、各家族のページは別途用 意することにしましょう。そしてこのページに図 17b のような 各家族のページをリンクし、図 17a の中で各家族の名前をクリ ックするとその家族のページが開くようにします。これには、 図 16a の家族名をその家族のページにリンクします。その手順 は次のとおりです。ここで図 17a は「リンク元」、図 17b の方 リンク は「リンク先」のページと呼びます。 まず、リンク先とリンク元のページを用意します。次にリン ク元のページ上（ファイル名「kadono.htm」）でリンクしよう とする文字列（図 17a 上の「父 図 17 光男」）を選択します（ドラ ッグして反転表示させる）。そこで、ツールバーの a)リンク元のページ（左側） b)リンク先のページ（右側） ボタンを 押すと（あるいは［挿入］メニューの［ハイパーリンク］を選択 すると） 、図 18 のダイアログボックスが表示されます。ここで、 表示されているファイル（ページ）の一覧からリンク先のページ を選択します。この例では、図 17b のページのファイル（ファイ ル名「mitsuo.htm」）がリンク先なので、ウィンドウにそのペー ジの名前が表示されています。最後に［OK］ボタンを押すと、 リンクが完成します。 注意）リンク元のファイルを保存しないでこの作業をしようとす ると、図 18 のダイアログボックスにリンク先のページが表示され 図 18 ハイパーリンク作成のダイアログボックス ません。リンクを行う前にリンク元のファイルは 1 度、保存をするようにしましょう。 リンク先のファイルがリンク元と異なるフォルダにあるときは、図 18 の「検索場所」を利用してリンク先のファイル があるフォルダを探して、リンク先のファイルをしています。 図 18 のダイアログボックスには「ファイルにリンク」 のボタンがありますが、これを使用するとリンク先の表現が 不適切となり、作成したホームページをサーバにアップロードしたときに、リンク先のページが見つからないといった エラーが発生することがあります。 ハイパーリンク先の確認 ハイパーリンク先の設定は、以上のように大変微妙です。次の「ハイパーリンクの修正」を利用して確認するとよい でしょう。 ハイパーリンクの修正 ハイパーリンクの設定を解除したり変更したりするには、設定のときと同様にして行います。 まずハイパーリンクを設定した箇所を選択し、 ボタンを押します。図 18 のダイアログボックスが表示されるので、 必要な修正を行います。設定を解除するには、ハイパーリンク先のファイル名を削除します。 8.2 ハイパーリンクの応用操作 画像からのリンク リンクは文字列だけでなく画像からも行うことができます。方法はまったく同じで、リンクしようとする画像をクリ ックして選択した後、 ボタンを押します。 Web サイトへのリンク リンク先には他の Web サイトを選ぶこともできます。この場合、図 18 のダイアログボックスで直接、アドレス欄へ そのアドレスを入力するか、 ボタンを押してそのサイトを探します。 −10− 8.3 同一ページ内へのリンク（ブックマークの利用） リンクは通常、他のページとの間で張られるものですが、同一ページ内でもこ れを利用することができます。これを利用すると、長いページの場合、容易に目 的の箇所に飛ぶことができます。たとえば「あいうえお」順に整理された名簿の ようなページでは、あ行、い行、．．．といった具合に分類し、その先頭へ飛ぶよう な仕組みを作っておくと便利です。 このように同一ページ内に飛ぶようなリンクを設定するには、リンク先（飛び 先）にブックマークと呼ばれるマークを付けておき、これとリンク元の文字や画 像との間でリンクを設定します。したがってまず、飛び先にブックマークを設定 することが必要です。 図 19 ブックマークの設定 ブックマークを設定するにはまず、これを設定しようとする箇所にカーソルを置きます。次に［挿入］メニューの［ブ ックマーク］を選択し、図 19 のダイアログボックスを表示させます。ここにブックマーク名（ここでは「chichi」と入 力しています）を入力して［OK］ボタンを押せば設定が終わります。ブックマークを設定した箇所すべてについて、 この操作を行います。これによりブックマークは、ファイル間のリンクの際のリンク先ファイル名のように扱うことが できます。 図 20 は「葛野家のご紹介（父、母、長男、長女）」の「父」の所にブックマーク「chichi」へのリンクを張ろうとし たものです。ブックマークをリンク先としてリンクの設定をするにはまず、リンクを設定しようとする文字列あるいは 画像を選択します。次に ボタンを押して「ハイパーリンクの挿入」ダイアログボックスを表示させます。ここでダ イアログボックスの右側に並んでいるボタ ンの中から、 ［ブックマーク］をクリックし ます。 「ドキュメント内の場所の指定」が表 示されるので、リンクさせたいブックマー クを選び、［OK］をクリックすると、「ハ イパーリンクの挿入」ダイアログボックス に戻ります。アドレス欄に「#chichi」と表 示されていることを確認し、 ［OK］をクリ ックすると、設定ができあがります。「母」 「長男」「長女」にも同様の設定を行うと、 「葛野家のご紹介（父、母、長男、長女）」 とそれぞれの紹介箇所とがリンクされ、た とえば「長女」をクリックすると、「長女」 の紹介欄へ飛ぶことができます。 9 表 図 20 ブックマークへのリンクの設定 組 ホームページには図 21 のような表を挿入することができます。表組は HTML で記述するにはやや複雑ですが、 FrontPage ではこれも、ワープロとまったく同様の感覚で作成することができます。 表組をおこなうにはまず、表を挿入しようとする位置にカーソルを置 きます。ここで ボタンを押して、表の行と列のサイズを設定します。 これで標準的な表組ができあがります。あとは、表のセルに文字などを 挿入すれば完成です。また必要に応じて、罫線のサイズやセルの色の設 定などを行うことができます。またセルには文字だけでなく、画像など を入れることもできます。 表の様式の変更は［表］メニューで行います。セルの結合、分割、列 幅や行高の統一、表のプロパティの設定・変更を行うことができます。 その表あるいはセルを選択後、［表］メニューの中の適当な項目を選択 して必要な操作をします。表、行、列、あるいはセルの選択は、このメ −11− 図 21 表組の例 ニューの中でも行うことができます。 表組みを利用したレイアウト ホームページ上での文書や画像のレイアウトは、ワープロのように自由になりません。そこで表組みを利用すると、 ある程度、レイアウトを自由に行うことができます。その原理は、表のセルを利用して表示位置を制御しようというも のです。セルの結合を利用すれば、かなり自由に表示位置を設定することができます。また、セルの背景色を設定する ことによって、異なる色の背景をページ上に配置することもできます。 ページの新規作成時に用意されているさまざまなレイアウトも、このような表組みの機能によるものです。 10 画像マップとホットスポット ホットスポットとは、画像内の特定の場所に他のページやブックマークとのリンクを設定するものです。画像内の特 定の箇所をクリックすると、そのページやブックマークに移動するようにすることができます。たとえば、地図上にホ ットスポットを設定すると、そのポイントにある店の紹介のページが表示されるといった仕組みを作ることができます。 ホットスポットを組み込んだ画像は、画像マップ、イメージマップあるいはクリッカブルマップと呼ばれます。 10.1 画像マップの準備 画像マップを作成するにはまず、ホットスポットを設定しようとする画像と、ホットスポットをリンクしようとする リンク先のページあるいはブックマークの準備が必要です。画像はどのようなものでも構いません。またリンク先は他 の Web サイトとすることもできます。このように、リンク元が画像の中に設定された特定の箇所であるという点を除 けば、通常のリンクと同じ仕組みです。 10.2 画像へのホットスポットの設定 まずホットスポットを設定しようとする画像をクリックして選択します。画像を選択すると、画面下の画像ツールバ ーが使用可能な状態になります。画像ツールバーが表示されていないときは、 ［表示］メニューの［画像ツールバー］を 選択すれば表示されます。ここでは 1 例として、図 22 の日本地図に円形のホットスポットを設定する手順を説明しまし ょう。 円形のホットスポットを設定するにはまず、画像ツールバーの円を選択します。その上でマウスを画像上に移動する と、マウスカーソルが鉛筆マークに変わります。その鉛筆の先を円の中心に置いてクリックします。その後、マウスを 円の外側へ向かって動かすと、ホットスポットとして設定される円が大きくなっていきます。描かれる円が適当な大き さになったところで離します。すると「ハイパーリンクの挿入」ダイアログボックスが開きます。ここで、リンク先の ページやブックマークを指定します。その方法は 8.1 節（ハイパーリンク設定の基本手順）と同じです。以上で、ホッ トスポットの設定ができあがります。これを必要なだけ繰り返 して完成させます。 ホットスポットの形状は、円のほか、矩形あるいは多角形を 使用することができます。また文字列をホットスポットとする こともできます（テキストのホットスポット）。多角形を使用す ることにより、ほとんどの形状に対して設定が可能です。これ らも、基本的には円形の場合と同じで、図形描画の要領で画像 上にホットスポットの範囲を指定し、そのリンク先を指定しま す。文字列も基本的には矩形のホットスポットと同じです。文 字列を入れるテキストボックスとしての矩形がホットスポット として設定されると考えてください。ただし、テキストのホッ トスポットは GIF 形式の画像に限られ、他の形式の画像に設定 しようとすると、その画像は GIF 形式に変換されます。 図 22 ホットスポットを設定した画像マップとページ 注意）ホットスポットを設定する画像を挿入するときは、画像を挿入するページをあらかじめ保存しておきます。これ は通常の「画像の挿入」と同様ですが、ホットスポットを設定する場合にはさらに、リンク先のページの URL にも余 分な記述が入り、あとで変更が必要になります。 ホットスポットが正常に動作しないときの処置 ホットスポットを設定した画像が表示されないなど、ページが正常に動作しないとき、その原因のほとんどは上記の −12− 「注意」にある不具合によるものです。つまり、画像のソース（保存場所とファイル名）やリンク先の記述に余分な記 述があります。これを修正するには、次のようにします。まず、画像を選択して、［書式］メニューから［プロパティ］ を選択し、表示される「画像のプロパティ」ダイアログボックスで、 「画像のソース」の記述を修正（余分な記述を消去） します。次に、各ホットスポットのリンク先を修正します（下記参照）。 10.3 ホットスポットの削除と修正 削除 設定したホットスポットを削除するには、そのホットスポットをクリックして選択した後、キーボード上の DEL （Delete）キーを押します。 移動 ホットスポットをクリックして選択すると、マウスで自由にドラッグして移動することができます。 サイズの変更 ホットスポットをクリックした際にその角に表示されるハンドルをマウスでドラッグすることにより、拡大・縮小す ることができます。 リンク先の変更 ホットスポットをダブルクリックすると、「ハイパーリンクの挿入」ダイアログボックス（図 17 参照）が開きます。 ここで変更することができます。 11 フォーム フォームは閲覧者によるデータ入力と送信を可能にす るものです。フォームには図 23 のように、文字を入力さ せるテキストボックスやいくつかの選択肢から選択させ るドロップダウンボックス、オプションボタン、チェッ テキストボックス クボックスなどを配置することができます。こられを使 って送信したい情報を入力させ、プッシュボタンを押し ドロップダウンボックス て送信できるようにすることができます。通常、送信と 同時に、これを受けて処理を行うプログラムが起動する オプションボタン ように設定しますが、その設定はフォームのプロパティ として行います。 このようにフォームを使用すると、ページを一方的に チェックボックス 閲覧者に表示するだけでなく、閲覧者からの情報の収集 や閲覧者の要求に応じた処理をおこなったりすることが スクロールテキストボックス 可能になります。たとえば、ページを見ての感想の受取、 プッシュボタン アンケート調査、各種申込みの受付、データベースの検 図 23 索などのサービスを実現することができます。 フォームの例 ここでは、ページへのフォームの挿入について説明す ることにします。フォームからの情報を受け取ってこれを処理する仕組みの作り方については、最初にあげた図書を参 照してください。 11.1 フォーム要素とその挿入 フォームに用意する部品をフォーム要素と呼びます。フォーム要素には次のものがあります。 テキストボックス 1 行の文字列を入力するボックスです。 スクロールテキストボックス 複数行の文字列を入力するボックスです。 −13− ドロップダウンボックス いくつかの選択肢をメニュー状に表示し、そこから値を選択できるようにします。 オプションボタン いくつかの選択肢を並べ、その前に円形のボタンを用意し、これをチェックすることによって 1 つを選択できるよ うにします。 チェックボックス その項目を選択するかどうかのチェックができるようにします。 プッシュボタン フォームに入力されたデータの送信とプログラムの実行を指示します。また、入力を取り消す操作にも利用します。 基本操作手順 フォーム要素の挿入には、 ［挿入］メニューの［フォーム］をポイントしま す。さらにメニューが表示され、その中に、上記のフォーム要素が用意され ているので、そこから必要なフォーム要素を選択します。 フォーム領域の設定 最初のフォーム要素を挿入すると、図 24 のようにそのフィールドと合わせ て「送信」および「リセット」の 2 つのプッシュボタンが挿入されます。そ のとき、フォームの領域が破線で示されます。その後に挿入するフォーム要 素は、この破線の領域の中に配置します。この外にフォーム要素を挿入する と、新たなフォーム領域が設定されます。このようにして、複数のフォーム 領域を同じページ上に配置することもできます。 この領域のサイズは、最初は挿入したフィールドを含む行だけのサイズで、 図 24 テキストボックスを入力した直後 図 25 フォーム領域内の拡大とアレンジ プッシュボタンも挿入したフィールドに密着して表示されるので、図 25 のよ うに適当に改行コードを入れて領域を拡大し、プッシュボタンとの間を空け るようにしておくと、作業がしやすいでしょう。 テキストボックス 挿入したい位置にカーソルを置いて、 ［挿入］メニューの［フォーム］から ［テキストボックス］を選択します。基本的な設定は自動的に行われますが、 これを変更したい場合はまず、挿入されたテキストボックスをダブルクリッ クして、図 26 のダイアログボックスを表示させます。ここでボックスの名前 やボックスに入る文字数の設定を変更することができます。ボックスのサイ ズ（入力文字数）は、画面上でマウスを使って変更することもできます。 スクロールテキストボックス 挿入したい位置にカーソルを置いて、 ［挿入］メニューの［フォーム］から「スク ロールテキストボックス」を選択します。設定の変更はテキストボックスと同様で す。 ドロップダウンボックス 挿入したい位置にカーソルを置いて、 ［挿入］メニューの［フォーム］から「ドロ 図 26 テキストボックスの設定 ップダウンボックス」を選択します。ドロップダウンボックスでは選択肢の設定が 必要です。これを設定するにはまず、挿入したフィールドをダブルクリックして図 27 のダイアログボックスを表示させ、 ［追加］ボタンを押して選択肢を追加します。 オプションボタン 挿入した位置にカーソルを置いて、 ［挿入］メニューの［フォーム］から「オプシ ョンボタン」を選択します。さらにそのフィールドをダブルクリックして、図 28 のダイアログボックスで設定をおこないます。オプションボタンはグループ内での −14− 図 27 ドロップダウンボックスの設定 択一となるので、グループ名が必要です。さらに、選択されたときの値と初期状 態を設定します。初期状態が「オン」に設定されたボタンはフォームを開いた時 点で「選択」状態になります。したがって、グループ内で 1 つだけ「オン」にし ておくことができます。 チェックボックス 挿入したい位置にカーソルを置いて、 ［挿入］メニューの［フォーム］から「チ 図 28 オプションボタンの設定 図 29 チェックボックスの設定 ェックボックス」を選択します。さらに図 29 のダイアログボックスで設定をおこ ないます。この設定はほぼオプションボタンの場合と同様ですが、チェックボッ クスはそれぞれ独立しており、個々に「オン」「オフ」を指定できるので、グルー プではなく個々のボックスの名前を指定することになります。 プッシュボタン プッシュボタンは最初のフィールドを挿入したときに既に挿入されています。 通常は図 23 のようにデータを送ってプログラムを実行させるボタン「送信」と入 力を取り消すボタン「リセット」の組み合わせとなるでしょう。このほか、 「標準」 のボタンがあります。プッシュボタンの設定については次節で説明します。 11.2 フォームデータの送信とその処理 フォームに入力されたデータは、用意されたプッシュボタンが押されると、そのプッシュボタンに定義された処理へ と送られます。したがってデータ送信をおこなうプッシュボタンには、送られたデータを受けて実行される処理を定義 しておく必要があります。その処理には次の 3 通りがあります。 ・指定したプログラムへ送って処理をさせる ・指定された宛先へメールとして入力データを送る ・指定されたファイルへ入力データを保存する 処理の設定 プッシュボタンへの処理の設定を行うには、まず挿入ポインタを そのフィールド領域内に置いた状態で、 ［挿入］メニューの［フォー ム］から「フォームのプロパティ」を選択します。図 30 のダイアロ グボックスが表示されるので、 「送信先」または「ほかの送信先」を 選んで、上記の 3 種類いずれかの方法による処理を設定します。そ の詳細については、巻頭に上げた図書を参照してください。 フォームに入力されたデータをテキストファイルに保存するだけ であれば設定は簡単で、 「送信先」を選択して保存先の「ファイル名」 を指定します。保存先は、このページのファイルが保存されたフォ ルダを基準とするので、そこからのパスを「ファイル名」として記 入します。 自分で用意したプログラムを起動させる場合は、結果の保存先と 図 30 フォームのプロパティの設定 して「ほかの送信先」を選び、ダイアログボックス上の「オプショ ン」ボタンを押して、表示されるダイアログボックスで処理プログラムを指定します。 入力データの引き渡し 入力データの引き渡しは、フィールドに付けた名前で行われます。たとえば、あるプログラムを実行するようにした 場合は、そのプログラムの中でフィールドに付けた名前を変数名として用いることにより引用することができます。 12 フレーム フレームとはブラウザの画面をいくつかの枠（フレーム）に分割して、そのひとつひとつに別々のページを表示する 機能です。フレームを使用すると、いくつかのページを同時に 1 つのページの中に表示することができます。フレーム の中のページからリンクを張るページは、その表示先のフレームを指定することができます。 フレームは通常このような機能を利用して、常に目次やバナーを表示しておくことに利用されます。こうすると、目 −15− 次のページに戻らなくても、どのページを表示中であっても希 望のページを表示させることができます。 12.1 フレームの準備 フレームを利用するときはまず、フレーム自体のページ（フ レームのページ）を作成します。これを FrontPage で作成す るときの手順は次のとおりです。 ①画面右側の［新しいページまたは Web］作業ウィンドウから 「テンプレートから新規作成」の「ページテンプレート」をク リックします。すると、図 31 のような、ページテンプレートの 図 31 ダイアログボックスが表示されます。 ②図 31 のように「フレームページ」タブを選び、その中から適 「ページテンプレート」ダイアログボックス 「フレームページ」タブを選択 当なフレームスタイルを選択して［OK］ボタンを押します。 図 32 のようなフレームに分割された新しいページの画面が表 示されます。 ③各フレームの「新しいページ」をクリックすると、それぞれ白 紙のページが表示されます。 すでに各フレームに入れるページが用意されているときは、 「初期 ページの設定」を選んで、そのフレームに入るページを指示しま す。 ④フレームページと各フレームに入れるページを保存します。 メニューの「ファイル」−「名前を付けて保存」を選び、各ペ ージとフレームに適当なファイル名を付けて保存します。ファイ ル名には半角の英字と数字だけを使用するのがよいでしょう。こ こで保存した各ページが、このフレームが表示されたときの初期 図 32 フレームページ作成の画面 ページとなります。 すでに各フレームに入れるページが用意されているときは、フレームページだけの保存になります。 ⑤フレームページを閉じる メニューの［ファイル］−［閉じる］でフレームと各ページを閉じます。以上でフレームの準備は終わりです。 12.2 初期ページの編集 フレームの準備で用意したフレームを構成する初期ページを編集して完成させます。その手順は、通常のページを編 集するときと同じです。まず、「ファイル」−「開く」でページを開き、その内容を作成します。 12.3 その他のページの作成 フレームのページからリンクする先のページを作成します。これは「新規作成」として作成します。新たなページを 作成する際の通常の手順と同じです。 12.4 リンクの設定 フレーム内のページから他のページにリンクを張るときは、表示するフレームを指定する必要があります。たとえば、 左側のフレームを「メニュー」とし、その中の項目が選ばれたときに、選ばれたページが右側のフレームに表示される ようにする場合などです。そのような設定をするには、次のような手順でリンクの設定をする必要があります。これに より、リンク先のページの表示フレームを指定します。標準ではリンク先のページはリンク元と同じページに表示され るので、そのような場合は、表示先のフレームを表示する必要はありません。 ①フレームのページを開く 表示先のフレームを指定するには、フレームページの中にそのページが開かれている必要があります。 ②リンク個所を選択し、［ハイパーリンク］ボタンを押す。 「ハイパーリンクの挿入」ダイアログボックス（図 17 参照）が表示されます。リンク設定の基本操作は通常通りです が、次のように表示先のフレームの指定が必要です。 この①②の順序は重要です。逆にすると、表示先の指定ができません。順序を間違ったときは、一度各ページを閉じ て、正しい順序で開きなおします。 −16− ③リンク先のアドレスを入力した後、 「ハイパーリンクの挿入」ダ イアログボックスの右に並んでいるボタンの中にある「対象フ レーム」ボタンを押す。 図 33 のダイアログボックスが表示されます。 ④「作業中のフレーム」で表示先のフレームをクリックし、 「OK」 ボタンを押す。 「ハイパーリンクの挿入」ダイアログボックスに戻ります。 ⑤「OK」ボタンを押す。 これでリンクの設定が完了します。 12.5 フレームページとフレームの変更 フレームページおよびフレームの表示様式などの設定は必要に 応じて変更することができます。これをおこなうにはまず、次の 図 33 表示先フレームの指定 手順で「フレームのプロパティ」ダイアログボックスを開きます。 ①いずれかのフレームを選択する 特定のフレームの設定をおこなう場合は、そのフレームを選択 します。フレームページ全体の設定をおこなうときは、どのフレ ームでも構いません。 ②メニューから［フレーム］−［フレームのプロパティ］を選択 する。 図 34 の「フレームのプロパティ」ダイアログボックスが開きま す。 スクロールバーの表示／非表示 選択されたフレームに入るページにスクロールバーを表示する かどうかを設定することができます。 「表示しない」、 「必要に応じ て表示する」 、「表示する」の中から選択することができます。ス クロールバーは、そのフレームの内容が表示しきれないほどの幅 図 34 フレームのプロパティ編集画像 や長さになったときに必要になるもので、このオプションはその 際の対応を指示するものです。 スクロールバーの表示に関する指示は、図 34 の「フレームのプロパティ」上の「オプション」−「スクロールバーの 表示」で行います。 フレームのサイズの変更 図 34 の「フレームのプロパティ」上の「フレームのサイズ」で指定します。幅および高さが、「相対比」「ピクセル」 および「パーセント」単位で指定できます。 また、フレームのサイズの変更はフレームページの編集画面（図 32 参照）でフレームの境界をドラッグして行うこと もできます。 初期ページの変更 初期ページを当初設定したものから別のページ（ファイル）に 変更することができます。変更は、 「フレームのプロパティ」上の 「初期ページ」の欄で行います。 フレームページ全体に関する変更 フレームページ全体の仕様を変更するには、図 34 上の「フレー ムページ」ボタンを押し、図 35 の「ページのプロパティ」ダイア ログボックスを表示させます。ここでは、次のような変更ができ ます。 図 35 −17− フレームページのプロパティ編集画面 ・フレームを分割する枠線 フレームを分割する枠線は、その幅を変更したり非表示にしたりすることができます。この変更は、 「ページのプロパ ティ」ダイアログボックスの「フレーム」タブで行います。 ・フレームページのタイトル フレームページのタイトルは、このフレームページがブラウザ上に表示されたときにタイトルバー（ブラウザの最上 部）上に表示される文字列です。その変更は、 「ページのプロパティ」ダイアログボックスの「全般」タブで行います。 −18−
© Copyright 2024 Paperzz
