FrontPage97ならできるはじめてのホームページ作成にチャレンジ！

hegapeom

254 INTERNET magazine 1997/2

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

ホームページ作成は難しいと思っていた人へ「だれにでも簡単にホームページが作れる」そんな時代がとうとマイクロソフト株式会社から発売された「FrontPage97」は、うやってきました。

これらの問題をひととおり解決しました。作成から発行まで専門

インターネットはだれでも情報を発信できるメディアといわれて的な知識は必要ありません。そこで今回の集中企画では、このいます。すでに多くのユーザーが自分のホームページを持ち、「FrontPage97」の便利な機能の数々を紹介するとともに、さまざまなコンテンツを世界に向けて発表しています。

ホームページの作成からサーバーへの発行までを順を追って解さて、実際にこれを作ろうとすると面倒な問題に直面します。暗説します。この機会に、今まであきらめていた人も「はじめての号のような HTML タグや、画像の処理など、多くの知識が必要ホームページ作成」にチャレンジしてみてください。になります。
入門書などを読んで、なんとかホームページを作成します。
次はこれをプロバイダーが提供するサーバーに置かなくてはなりません。アップロードと呼ばれるこの作業 1つをとっても「だれでも情報を発信できる」とはいいにくいのが現実です。

マイクロソフトFrontPage97 for Windows with Bonus Pack 日本語版
発売元：マイクロソフト株式会社
価 格：35,000 円 発売日：12月13日
1997 年1月31日までの期間限定試用版（ベータ版）が以下のサイトからダウンロードできます。
jhttp://www.microsoft.co.jp/office/frontpage/

これがマイクロソフトFrontPage97 だ！
ホームページ作成に必要なすべてがそろう
マイクロソフト FrontPage97 は、ホーー」、そして作業の進行状況を記録しておムページの作成から発行や管理まで、必く「FrontPage To Doリスト」がこれに要なツールを 1 つのパッケージにまとめたあたります。多機能なだけに最初は戸惑う総合的なソフトウェアです。難解な HTMLかもしれませんが、実際にホームページをやプログラムの知識がなくても、簡単に使作っていくうちにこれらのツールの必要性

い こ な せ る の が 特 徴 で す 。

がわかってくるはずです。
もう1つうれしい

FrontPage97 は大きく分けて 3 つのツことに、FrontPage97 には多くのクリッールから構成されます。ページ全体を管理プアートが付属しています。背景画像からするための「FrontPageエクスプローラ」、GIFアニメーションまで、本当にこれだけページを編集する「FrontPage エディタでホームページができてしまうのです。

● FrontPage エディター
WWW ブラウザーで見るのと同じ画面でホームページの編集ができます。画像やリンクの挿入もマウスで好みの場所に引っ張ってくるだけです。最も使う機会が多いのがこのツールでしょう。

● FrontPage To Do リスト
ページの数が増えてくると、どれが完成していて、どれが作業中のものかがわからなくなってきます。
作業中のページは To Do リストに登録しておいて、完成したものには「完了」マークを付けていきます。

● FrontPage エクスプローラ
あるページから別のページへと、どのようにリンクが張られているか、またどの画像が埋め込まれているかなどがひと目でわかります。リンク先のページがなくなった場合は、破れたアイコンが表示されるため、面倒なリンクチェックも必要なくなりました。左のウィンドウに表示されたファイルを別のフォルダーに移動すると、自動的にリンクが修正されます。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1997/2

255

STEP 1
ホー

ム

ペー

ジを作

る

ホームページって何だろう
最近では「ホームページ」という用語を、WWW体の趣旨や内容を知ります。次に、興味のあブラウザーで見られるページ全体という意味る話題を読むためにリンクからリンクへと内で使うことが多くなりました。本来「ホーム容をたどっていきます。自分がどこにいるのかページ」は、コンテンツ全体の表紙にあたるがわからなくなったら、「ホームページへ」なトップページのことを指します。
どんなサイトにどのボタンを押して、トップページに帰ります。

も必ず1 つは「ホームページ」があり、その多FrontPage97でもこの「ホームページ」を作

くは最もデザインに凝った「顔」としての役割成することからすべてが始まります。そして基を果たしています。サイトにアクセスしたユー

本的なページの編集方法はこの中に凝縮さザーはまず「ホームページ」を見て、サイト全れているのです。
MSN のホームページ。目次、表紙、ガイドといった機能がすべて詰め込まれています。デザ

1 Web を作ろう

インも凝っていて、「顔」としての役割もしっかり果たしています。
jhttp://www.msn.com/

FrontPage97ではページ全体を、ホームページと区別して「Web」（ウェブ）と呼びます。
この中には画像や音声などさまざまなファイルが含まれます。実際には指定した場所にページの要素が入ったフォルダーが作られます。
まず、この「入れ物」に当たる「Web」を作成しましょう。

12

3

FrontPage97 を起動すると上図のウィン作りたいWeb のタイプを選びます。ここでW e b に 名 前 を 付 け ま す 。「 新 し いドウが現れます。
「ウィザードテンプレート

は「標準のWeb」を選択して「OK」を押FrontPage Web の名前」の欄にサイト全を使用する」をチェックして「OK」を押します。

体を表すような名前を入力して、「OK」を押します。

します。

4

5

「FrontPage エクスプローラ」に「ホームページ」というアイコンができます。これがこれから作成するホームページになります。これから新しいページを作るたびに、このウィンドウにアイコンが増えていきます。

「ホームページ」アイコンをダブルクリックすると「FrontPage エディター」が起動します。ここに文字を書いたり画像を挿入したりして、ホームページができあがります。

256 INTERNET magazine 1997/2

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

2 ページの基本設定をしよう
FrontPageエディターが起動したら、いよいよホームページの編集です。文字や画像を入力する前に、背景の色や文字の色といったページの基本設定をします。
この設定は何度でもやり直せるので、気に入った組み合わせができるまでいろいろと試してみましょう。

背景と文字の色を決めよう
初めにページの背景の色と、文字の色を決めます。
「ページのプロパティー」ウィンドウの「背景」タブで「背景の色を指定する」をチェックします。
「背景」で背景の色を、「テキスト」で文字の色をそれぞれ指定します。すべてが決まったら「OK」を押します。

「書式」メニューから「背景」を選びます。

ページの背景に画像を使うにはページの背景に画像を使うこともできます。
「背景の画像」をチェックして「参照」ボタンを押します。
「背景画像の選択」ウィンドウで「クリップアート」を選び、「分類」の欄を「背景」にします。ここにいくつかの背景画像が用意されているので、好きなものを選んで「OK」を押します。

h 自分で用意した画像を使う場合は「他の場所」を選び、「参照」ボタンを押して画像ファイルの場所を指定します。

文字を書いてみよう
背景と文字の設定が終わったら、いよいよ文字を入力しましょう。操作方法はとても簡単です。ワープロを使うのと同じように、F r o n t
Page エディターに好きな文字を入力してください。ここで書いた文字はWWW ブラウザーでも同じように表示されます。

ワープロと同じように文字を入力できます。

改行をしたい場合はEnter（Return）キーを押します。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1997/2257

3 文字のスタイルを変えてみよう
文字が入力できたら、次は文字のスタイルを変えてみましょう。
「書式設定ツールバー」
を使えば文字の大きさ、書体、配置、箇条書きなどがボタン1 つで設定できます。基本的な操作方法は、変更したい文字全体をマウスで選んで、それぞれのボタンを押すだけです。

便利な書式設定ツールバー

・文字の大きさを変える

・書体を変える・文字の配置を変える

・箇条書きとインデントを設定する

文字の大きさを変えよう

大きさを変えたい文字をマウスで選択します。

「A」ボタンを押します。

文字の大きさが変わります。

太字にするために「B」ボタンを押します。

書体が太字に変わります。

書体を変えよう書体を変えたい文字をマウスで選択します。

文字の配置を変えよう

配置を変えたい文字をマウスで選択します。

258 INTERNET magazine 1997/2

中央揃えにするために上図のボタンを押します。 文字の配置が中央揃えになります。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

箇条書きに挑戦しよう

文字を入力する前に上図のボタンを押しておきます。項目の前に番号がふ文字を入力する前に上図のボタンを押しておきます。項目の前に記号が付られます。Enter（Return）キーを押して改行すると、自動的に番号の数けられます。Enter（Return）キーを押して改行すると、次の項目にも同が増えていきます。

じ記号が付けられます。

箇条書きの番号と記号を変更しよう
h 箇条書きをやめるには番号と記号を変更したい箇条書

最後の項目を入力したあとにEnter（Return）

きの上で右クリックをします。

キーを押して改行します。ここでBackspace

メニューから「リストのプロパ（BS）キーを押すと記号や番号が削除され、通ティー」を選択すると左図のウ常の入力モードに戻ります。

ィンドが表示されます。ここで好 きな番 号 や記 号 を選 んで「OK」を押します。

インデントと箇条書きを組み合わせてみよう

12

箇条書きの文字列の最後部にマウスのカーソルを置き、Enter（Return） 上図のインデントボタキーを押します。

3

箇条書きがインデントされます。

ンを2 回押します。

45

6「リストのプロパティー」から別の記号や番号を指定した記号が付けられたら、文字を入力しまEnter（Return）キーを押すと自動的に記号選び、「OK」を押します。

す。

が付けらます。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&DINTERNET magazine 1997/2259

4 線や画像を使ってみよう
最近では、文字だけのホームページはあまり見かけません。画像や線を使ったグラフィカルな演
出はページ作りには欠かせないテクニックです。FrontPage97なら、水平線はもちろん、画像の挿入から背景の透明化まで、マウスの操作だけで簡単にできてしまいます。

画像をページに入れてみよう

画像を入れたい場所にカーソルを置いて、画像ファイルをこの場所にマウスで引っマウスから手を離すと、カーソルの位置に画像が入り張っていきます。

ます。

画像の背景を透明にしよう

画像をマウスで1 回クリックすると、右上に「画像右端のボタンを押すと、マウスのカー画像の背景の部分（この部分は白）をクリックするツールバー」が現れます。

ソルがペンの形に変わります。と、背景が透明になります。

たくさんの画像が詰まった FrontPage97の CD-ROM
前 述 の「 ク リップ ア ート」の ほ か に 、「 I m g C o m p 」の 中 の「 S e t u p 」をダブルFrontPage97 の CD-ROM には多くの画クリックして「マイクロソフトイメージコンポー像が入っています。CD-ROM を右クリックしザー」（英語版）という画像編集ソフトをセッて「開く」を選択するといくつかのフォルダートアップします。次に上記の画像ファイルをダが現れます。この中の「ImgComp」の中のブルクリックしてイメージコンポーザーに読み「Mmfiles」を開いてください。
「Photos」に込みます。これを「 G I F 」または「 J P E G 」形写真が、「Web」にホームページのデザイン式で保存してください。この集中企画で使用専用の画像がそれぞれ入っています。

しているのはすべてこの C D - R O M の中のこ れ ら の ク リップ ア ート を 使 う に はクリップアートです。

260 INTERNET magazine 1997/2

イメージコンポーザーで読み込んだ画像は「JPEG」か「GIF」形式で保存してから使います。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

線をページに入れてみよう

線を入れたい部分にカーソルを置き「挿入」メ

線の上で右クリックをして「水平線のプロパテこれで出来上がりです。もう一度設定をやり直ニューから「水平線」を選びます。これでペーィー」を選びます。上図のウィンドウで線の色したい場合は、右クリックをして「水平線のプジに線が描かれます。

や長さなどを設定して「OK」を押します。

ロパティー」ウィンドウに戻ります。

画像（線）を入れたい部分にカーソルを置き、ツ上図のウィンドウで「クリップアート」を選び、カーソルの部分に画像を使った線が入ります。

ールバーから右上図のボタンを押します。

「分類」の欄を「線」にします。好きな画像を画像を使って線を作ろう

選んで「OK」を押します。

【完成】WWW ブラウザーで見てみよう

これでホームページはひととおり完成しました。WWW ブラウザーで見るとどうなるか、実際に表示させてみましょう。
h インターネットエクスプローラを使っている場合、左図のボタンを押すとダイアルアップネットワークが起動してプロバイダーに接続しようとすることがあります。この場合は、インターネットエクスプローラの「表示」メニューから「オプション」を選び、「接続」タブの「必要時にインターネットに接続する」のチェックをはずしツールバーから上図のボタンを押します。
「画像てください。

をFrontPage Web に保存」ウィンドウが現れたら「すべて」を押します。作成したホームページがWWW ブラウザーに表示されます。

FrontPage エディタで見るのと同じ内容が表示されます。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1997/2

261

STEP 2

いろんなページにリンクさせよう

リンクって何だろう「ホームページ完成したら、いよいよ中身を作成します。通常はホームページのある項目をマウスでクリックすると、自動的にページが切り替わって該当するページが表示されます。
クリックすると別のページへジャンプするこの項目のことを「リンク」と呼びます。文字や画像、またはボタンなどがリンクとして使われます。
リンク先のページは自分のページの中だけでなく、別の Webサイトを指定しても構いません。FrontPage97ではこのリンクの設定も驚くほど簡単にできてしまうのです。
さらにここでは、リンク先のページを演出する 表やフレーム作成にも挑戦してみましょう。1つの画像に複数のリンクを設定する「クリッカブルイメージマップ」
も、マウスの操作だけであっという間にできてしまいます。

1

リンクを作 ってみよう

FrontPage97でリンクを作る方法は何種類かあります。
リンク先のページがすでにある場合、項目だけでページはあとから作る場合など、作業の工程に合わせて選びます。
リンクを作成すると「FrontPageエクスプローラ」にページの関係がツリー状に表示されます。

文字からリンクを作ってみよう

1

2

リンクを設定したい文字列を選択して、ツー次のウィンドウで「新しいページ」を選んで「OK」を押します。次のルバーから上図のボタンを押します

ウィンドウで「標準ページ」を選んで「OK」を押します。

3

4

これがリンク先のページです。

ツールバーから上図のボタンを押します。

5

選択した文字列にリンクが設定されます。

新しいページからリンクを作ろう「ファイル」メニューから「新規作成」を選び、新しいページを作成します。これを名前を付けて保存します。ここで「ページタイトル」の欄に入力した文字がリンクの項目になります。
「FrontPage エクスプローラ」の左の欄にこのページのアイコンが表示されたら、これをマウスでリンクもとのページに引っ張っていきます。
これだけでリンクができてしまいます。

262 INTERNET magazine 1997/2

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

イメージマップを作ってみよう

挿入した画像をクリックして画像ツールバーを表示させます。四角や丸の次のウィンドウで「作業中のFrontPage Web」を選んで「参照」を押しボタンを押し、カーソルがペンの形に変わったら、リンクを作りたい部分ます。次のウィンドウでリンク先のページを指定して「OK」を押します。

を囲みます。

これでイメージマップの完成です。

2

表 を作 ってみよう

いろいろな使い道がある「表」は、ページをデザインするうえで欠かせない要素です。アルバムのように画像を貼り付けたり、ページを2 段組にしたりと、工夫次第ではさまざまな演出ができます。FrontPage97では出来上がりを見ながら、簡単に表を作成できます。

1

2

3

作りたい表の行数と列の数を決めて、ツール点線で描かれた表が現れたら、セルの中に文セルを結合させるには、表の左端（列）か上端バーから上図のボタンを押します。マウスでマ字や画像を入れていきます。カーソルを別の（行）にカーソルを置き「→」の形にして、結ス目をなぞり、色が変わったら手を離します。

セルに移動するには「→」キーを使います。

合したいセル全体を選択します。
「表」メニューから「セルの結合」を選択します。

45

文字や画像が入ったら、細かな設定をします。セルの中の設定は、それぞれのセルの中で右クリ上の完成図ではタイトル部のセルに色を付け、ックをして「セルのプロパティー」を選択します。表全体の設定は、表の一部を右クリックして文字の配置を「中央」に設定しました。表の「表のプロパティー」を選択します。プロパティーウィンドウでは「レイアウト」で配置や罫線のプロパティーでは「外枠のサイズ」を4 に指定サイズを、「背景の色」で背景や罫線の色をそれぞれ設定します。

しています。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&DINTERNET magazine 1997/2263

3

フレームを作 ってみよう

この集中企画の作成編の最後は、いよいよフレームの作成です。1つのページをいくつかに分割して、それぞれの枠の中に別のページを表示します。FrontPage97 の「フレームウィザード」
を使えば、枠の数や分割の形式などが思い通りに、簡単に指定できます。

1

2

ここでは3 つに分割されたフレームを作成します。それぞれのフレーファイルメニューの「新規作成」を選び、「フレームウィザード」をムに表示されるページを作成しておきます。

選んで「OK」を押します。次のウィンドウで「ユーザー設定のグリッドを作成する」にチェックを付けて「次へ」を押します。

3

4

5

次にフレームの行を1 に、列を2 にそれぞれShift キーを押しながら右の枠をクリックし左のフレームを選んで「参照」ボタンを押指定します。枠の大きさはマウスで境界線て、「分割」を押します。行を2 に、列を1 にします。

を引っ張って調整します。

それぞれ指定します。
「次へ」を押します。

678

次のウィンドウから左のフレームに表示さ5 → 6 ですべてのフレームにページを割り当

FrontPage エディターに戻ったら上図のせるページを選んで「OK」を押します。同てて「次へ」を押すと上図のウィンドウが「上書き保存」ボタンを押してフレームを様に上、右とそれぞれページを選びます。

現れます。
「完了」を押します。

保存します。

9完成

これでフレームを使ったページが完成しました。左図のボタンを押してWWW ブラウザーで表示させてみましょう。

これまで作成してきたページは「FrontPage エクスプローラ」にツリー状に表示されます。

264 INTERNET magazine 1997/2
インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

STEP 3

Webを

発

行

しよう

アップロードって何だろう

ホームページやリンク先のページの作成が終わり「Web」が完成しました。
さて、世界に向けて情報発信するためには、これをプロバイダーなどが提供する「サーバー」に置かなくてはなりません。通常はこのために「アップロード」という作業を行います。
一般的には「FTP」というプロトコルを使って、自分のコンピュータにあるデータをサーバー側のコンピュータに転送します。FrontPage97ではこの「アップロード」
も、ウィザードに沿って簡単にできてしまいます。準備として、プロバイダーの指示に従ってホームページの登録を行ってください。その際に「ホームページのID」と「ホームページのパスワード」が発行されます。
これらの情報を手元に置いて、それでは自分のWebを発行しましょう。

1

2

3

FrontPage エクスプローラの「ファイル」

上 の欄 に自 分 のホームページの U R L「Web 発行ウィザード」が始まります。
「次メニューから「FrontPage Web の発行」

（http://www.impress.co.jp/˜user など）へ」を押します。次のウィンドウもこのまを選びます。

を下の欄に発行するWeb の名前（˜ u s e r）

ま「次へ」を押します。

をそれぞれ記入して「OK」を押します。

4

5

6

「新規」を押します。上の欄にプロバイダ

自分のホームページのURL（http://www.

「ダイアルアップネットワークを〜」にチェー名を記入し、下の欄を＜その他のインタ

impress.co.jp/˜user など）L を入力して、ックを付けて「次へ」を押します。プロバーネットプロバイダー＞にして「次へ」を「次へ」を押します。

イダーにダイアルアップ接続します。

押します。

789

上図のウィンドウが現れたら「次へ」を押

ユーザー名にホームページのID を、パスワ

上の欄にプロバイダーからindex.htm を置します。警告の画面が出ますが、問題はなードにホームページのパスワードをそれぞれくように指示されたフォルダー名を、下のいので「OK」を押します。次のウィンド記入して「次へ」を押します。次のウィン欄に自分のホームページのURL をそれぞれウで「FTP-ファイル転送プロトコル」にチドウで、FTP サーバー名に、プロバイダー記入します。
「次へ」を押します。次のウ

ェックを付けて「次へ」を押します。

から聞いたホームページを発行するFTP サィンドウも「次へ」、最後に「完了」を押ーバー名を記入して「次へ」を押します。

すとファイルの転送が始まります。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1997/2265

［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この PDF ファイルは、株式会社インプレス R&D（株式会社インプレスから分割）が 1994 年～2006 年まで発行した月刊誌『インターネットマガジン』の誌面を PDF 化し、「インターネットマガジン バックナンバーアーカイブ」として以下のウェブサイト「All-in-One INTERNET magazine 2.0」で公開しているものです。

http://i.impressRD.jp/bn
このファイルをご利用いただくにあたり、下記の注意事項を必ずお読みください。
z 記載されている内容（技術解説、URL、団体・企業名、商品名、価格、プレゼント募集、アンケートなど）は発行当時のものです。
z 収録されている内容は著作権法上の保護を受けています。著作権はそれぞれの記事の著作者（執筆者、写真の撮影者、イラストの作成者、編集部など）が保持しています。
z 著作者から許諾が得られなかった著作物は収録されていない場合があります。
z このファイルやその内容を改変したり、商用を目的として再利用することはできません。あくまで個人や企業の非商用利用での閲覧、複製、送信に限られます。
z 収録されている内容を何らかの媒体に引用としてご利用する際は、出典として媒体名および月号、該当ページ番号、発行元（株式会社インプレス R&D）、コピーライトなどの情報をご明記ください。
z オリジナルの雑誌の発行時点では、株式会社インプレス R&D（当時は株式会社インプレス）と著作権者は内容が正確なものであるように最大限に努めましたが、すべての情報が完全に正確であることは保証できません。このファイルの内容に起因する直接的および間接的な損害に対して、一切の責任を負いません。お客様個人の責任においてご利用ください。

このファイルに関するお問い合わせ先
All-in-One INTERNET magazine 編集部
im-info@impress.co.jp
Copyright © 1994-2007 Impress R&D, an Impress Group company. All rights reserved.