 |
スタート⇒すべてのプログラム
⇒ホームページ・ビルダーを 選択して、クリックします。 |
 |
ホームページ・ビルダー12の
本体が立ち上がってきます。
無限の可能性を感じますね! |
 |
ホームページ・ビルダー12へ
ようこそ画面が表示されます。
編集スタイルはスタンダードを
選択してOKをクリックします。
|
 |
初期画面の左側には、とても親切なかんたんナビが表示されています。
ただ、編集画面がかなり狭くなりますのでひとまず、かんたんナビを消しておきましょう。
|
 |
表示→かんたんナビにチェックが
入っていますので、クリックして
このチェックを外しておきます。 |
 |
同じく画面の上側にも、とても親切な
かんたんナビツールバーが表示されていますので、同じようにクリックしてこのチェックを外しておきます。 |
 |
これでかなり編集画面が広くなりましたね。通常はこの状態で使用するのが何かと便利だと思います。
では、いよいよスタートしましょう! |
 |
ファイル→かんたんページ作成をクリックします。
|
 |
ページの種類は入門用PCページ、
次へをクリックします。 |
|
 |
(1)編集モードの選択
編集モードは標準モードとします。
ワープロ的に作成することができ、
レイアウトには、表の機能をうまく使って綺麗にまとめることができます。
次へをクリックします。 |
|
 |
(2)カテゴリの選択
カテゴリは複数ページ、
ジャンルはデザインを選択します。
次へをクリックします。 |
|
 |
(3)ページのテーマ、
レイアウトの決定
テーマはシック・エレガント、
レイアウトはプレーンを選択します。
次へをクリックします。 |
|
 |
(4)ページのタイトル、背景の決定
ページのタイトルが初期状態では、
シックページとなっています。
これを、希望のタイトルに編集して
ゆきます。 |
 |
今回は、下記のようにしてみました。
わたしの夢とライフワーク 宗@神戸
あなたのホームページのタイトルを決めて入力してみましょう。
後ほど変更することも可能です。
入力できたら、次へをクリックします。 |
 |
ページの色や壁紙は、そのまま
テーマの初期値を選択します。
次へをクリックします。 |
|
 |
(5)ページ内容の設定
トップページのロゴに入る文字を
編集できます。
ここでは
Welcom to My Homepage
をそのまま使いたいと思います。
次へをクリックします。 |
 |
ページのアイコンを設定します。
文字1〜文字3までのそれぞれ、
項目1、項目2、項目3を編集します。 |
 |
例として下記のように入力します。
文字1 宗@神戸 自己紹介
文字2 宗@神戸 夢
文字3 宗@神戸 ライフワーク
次へをクリックします。 |
 |
トップページの文章を編集します。
内容は自由に編集可能です。 |
 |
例として下記のように入力します。
わたしの夢とライフワークを
綴ってみたいと思います。
次へをクリックします。 |
 |
区切り線を設定します。
今回はそのままの状態とします。
次へをクリックします。 |
 |
メールアドレスを設定します。
ホームページへメールアドレスを
公開したくない場合は不要です。
次へをクリックします。 |
 |
トップページに続いて、サブページの設定に進みましょう。
次へをクリックします。 |
 |
各ページからトップページへ戻るためのリンクは必須ですね。
次へをクリックします。 |
 |
サブページ1のサブタイトルを編集します。 |
 |
例として宗@神戸 自己紹介
とします。
次へをクリックします。 |
 |
本文を編集します。
ワープロ的に入力ができますので、自由に編集を楽しみましょう。
次へをクリックします。 |
 |
サブページ2のサブタイトルを編集します。 |
 |
例として宗@神戸 夢
とします。
次へをクリックします。 |
 |
本文を編集します。
ワープロ的に入力ができますので、自由に編集を楽しみましょう。
次へをクリックします。 |
 |
サブページ3のサブタイトルを編集します。 |
 |
例として宗@神戸 ライフワーク
とします。
次へをクリックします。 |
 |
本文を編集します。
ワープロ的に入力ができますので、自由に編集を楽しみましょう。
次へをクリックします。 |
|
 |
(6)保存場所の設定
サンプルからの作成が終了です。
ここでひとまず保存をします。
ホームページ・ビルダー12の本体では、保存場所を自由に設定することができます。この点が、自動保存のホームページ・ビルダークイックとは大きく違うところですね。参照ボタンをクリックします。 |
 |
フォルダの指定で、ドライブから順番に選択をしてゆきます。
ここでは、新しいホームページのファイルを保存するための、新規フォルダを、Cドライブのマイドキュメントの中に作成しましょう。新規フォルダの作成をクリックします。 |
 |
新規フォルダの作成ウインドウには、
ここでは例として dream と入力をしてから、OKをクリックします。 |
 |
マイドキュメントの中に、新しいフォルダとしてdreamが作成されました。
良く見ると、フォルダが開いた形になっていますので、ここへホームページのファイルを保存することになります。OKをクリックします。 |
 |
ホームページファイルの保存場所を確認しましょう。
C:\Documents and Settings
\Administrator\My dream
ページ保存後サイトを作るには
チェックマークを入れません。
完了後、すべてのファイルを開く
チェックマークは入ったままで、
完了をクリックします。 |
 |
ホームページの原型が出来ました! |
|
 |
(7)FTPツール
=ファイル転送の設定
では、さっそくインターネット上で見ることができるように、公開してみるとしましょう。
ツール→FTPツールの起動
をクリックします。 |
 |
ファイル転送というホームページ付属のとっても便利な転送用ソフトが立ち上がってきます。
画面の左側はマイコンピュータつまり手元のパソコン、画面の右側がインターネット上のサーバーと呼ばれるホームページ公開用の場所を表しています。
転送に必要な、設定をまずはクリックします。 |
 |
ファイル転送設定画面です。
赤枠で囲った内容は一般的に
FTP設定情報と呼ばれています。
使用するサーバー毎に設定が必要となります。
新規プロファイルの作成をクリックします。 |
 |
サーバープロファイル名を入力
します。
例では、ホームページのタイトルと
合わせて、わたしの夢とライフワークとします。
ログイン情報の設定では、使用するプロバイダを選択できますが、一覧に無い場合(FC2等の各種レンタルサーバー)は、その他を選択します。 |
 |
FTP設定情報を入力後、OKをクリックします。 |
|
 |
(8)公開する
ファイル転送画面の左上に、いま設定した、サーバープロファイル名が
表示されています。
例として表示されているのは、
わたしの夢とライフワークです。
では、いよいよパソコンとサーバーを接続をクリックして繋いでみましょう。 |
 |
右側にサーバー側のファイルが表示されました。
ちなみに右側にはホームページ・ビルダークイックで作成したホームページ用ファイルが表示されています。
このまま転送してしまうと、上書きしていますことになりますので、注意が必要です。 |
 |
上書きを回避するために、サーバーに新しいフォルダを作成しましょう。
余白で右クリック→新しいフォルダの作成、をクリックします。
サーバー側に何も表示されない場合でも、新しいフォルダを作る練習をしてみましょう。
|
 |
新しいフォルダの名前には、
例として dream とします。
dreamフォルダをダブルクリックして
開きましょう。 |
 |
サーバーの中に、さらにフォルダが作成されましたので、その中へホームページ用のファイルを転送します。
ホームページのURLは、フォルダ名を追加した形になることを覚えておきましょう。
例 http://www.aaa.com/dream/ |
 |
パソコンの中のホームページ用ファイルを選択します。
余白で右クリック
→すべて選択をクリックします。 |
 |
転送するすべてのファイルが青く反転します。
右上に向いた→がサーバーへの転送用のボタンになります。 |
 |
では、さっそくサーバーへ転送してみましょう。
マウスをポイントすると、PC上のファイルをサーバーへ転送します、とガイドが表示されます。
右上に向いた→をクリックします。 |
 |
パソコンからサーバーへファイルが順番に転送されてゆきます。
全部でいくつあるファイルの何番目を転送しているかをグラフと文字で表しています。
ブロードバンドの場合はほとんど待ち時間は無いと思います。 |
 |
画面の右側つまりサーバー側にホームページのファイルがすべて転送されました。
ちなみに、画面の左側にある再編集用の画像データが入っているフォルダ(_HPB_Recycled)は、転送不要と判断されて右側のサーバーには転送されません。 |
 |
ひとまず、パソコンとサーバーとの接続を切っておきますので、切断ボタンをクリックします。
|
 |
サーバーとの接続が切れて、画面の右側のファイルが見えなくなりました。 |
 |
インターネットへアクセスしてさっそくホームページの状態を確認してみましょう。
http://hpbedu.web.fc2.com/dream/
無事に公開されました!
右端のボタン下の文字が不自然になっている点を、さっそく更新して修正したいと思います。
|
|
 |
(9)更新する
ホームページ・ビルダーの編集画面で、それぞれのボタンの下の文字に
改行を入れて、二段に編集し直してみましょう。
これは、更新作業の練習にちょうど良い題材となりました(笑) |
 |
修正したトップページのファイルを
保存しましょう。
ファイル→名前を付けて保存、をクリックします。
ここからが、大事なポイントです! |
 |
ファイル名には、もともとの名前が
表示されています。
例では、index.html ですね。 |
 |
いま更新した修正ファイルには、
新しい名前を付けて保存をします。
例えば、20080319- のように
ファイル名の前に日付を付ける
というアイデアです。
例では、20080319-index.html
という名前を付けて保存します。 |
 |
ファイルが保存されましたら、画面の
ファイル名を確認しておきましょう。
タイトルを見てみると、
20080319-index.html と
なっていますね。
これで万が一の際に、ファイルの状態を特定の日時の状態に戻したり、内容を参照できるようになります! |
 |
では、さっそく新しく更新したファイルをサーバーへ転送してみましょう。
ツール→FTPツールの起動を
クリックします。 |
 |
ファイル転送画面が開き、左側には更新したファイルが見えますね。
今回は更新したファイルのみ、つまり20080319-index.html のみを、サーバーへ転送します。
(ちなみに、20080319-index.bakや、20080319-index.htm は特に
転送する必要はありません)
では接続ボタンをクリックしましょう。 |
 |
ファイル転送の画面右側にサーバー側のファイルとフォルダが表示されています。
dreamフォルダをダブルクリックして開きましょう。 |
 |
最初に転送したファイルが表示されています。 |
 |
では、ファイル転送画面左側、
マイコンピュータにある更新した
ファイル 20080319-index.html を
クリックしてから、右上に向いた→
をクリックしましょう。 |
 |
転送状況表示の画面が開きます。
転送は一瞬で終わると思います(笑)
|
 |
ファイル転送画面の右側、
つまりサーバー側に転送後の
20080319-index.htmlが、無事に
転送されて、表示されていますね。 |
 |
いま転送をしたファイルの名前
20080319-index.html から、
前半の日付とハイフンを削除して
サーバー側で index.html へ
上書き保存をして更新する、という
アイデアを採用します。
ここが最も重要なポイントです。
20080319-index.htmlを右クリックし
ファイル名の変更をクリックします。 |
 |
20080319-index.html が index.htmlへサーバー側で上書き保存されて、更新が完了しました。
更新日時を確認してみましょう。
index.html以外は2008/03/19/19:48
index.htmlのみが2008/03/19/21:18
となって、更新されていることがわかりますね。 |
 |
では、いったんサーバーとの接続を切りたいと思いますので、切断ボタンをクリックします。 |
 |
切断ボタンが、接続ボタンに変わり、ファイル転送の右側に表示されていたサーバー側のファイルが見えなくなりました。 |
 |
では、インターネット上にアクセスし
ホームページで確認をしましょう。
それぞれのボタンの下の文字が
二段に揃いましたね。更新完了!
基本的な更新の手順はこのようになります。今は文章のみの更新でしたが、画像を更新する場合には、更新した画像の転送も必要になることを、忘れずに覚えておきましょう。 |