初心者のためのホームページ・ビルダーネット学院 =講習マニュアル、実例リンク集、サンプルページ、アフィリエイト、入門通信講座=
ホームページ・ビルダー12 ホームページ・ビルダーネット学院
最新版!IBM ホームページ・ビルダー12で、あなたもいっそう進化した楽しいホームページ&ブログライフを楽しみましょう♪NEW!
講習マニュアル実例リンク集サンプルページアフィリエイト入門通信講座

「初心者向け【ホームページ・ビルダー】の楽しい使い方〜ラクラク入門通信講座〜」 無料体験有

ネット講座 受講者募集中!ネットで
学べる!
ネット講座


ホームページ・ビルダー12
ホームページ・ビルダー11


ホームページの意味とは?
おすすめをする訳は?
あなたのご希望テーマは?


WEBビジネスの可能性は?
権利収入を得る方法は?
新しい活用方法とは?


テキスト・ガイドブック
イーラーニング、通信講座
ひな形、テンプレート
商用動画マニュアル
アクセスアップ、SEO


ナレッジサーブ 入門検定
IBM 検定試験
IBM 認定試験

講師:藤田晋也

■講師:藤田晋也
出身:兵庫県神戸市
ホームページ・ビルダー歴:8年
詳しいプロフィールはこちら。


ネット講座 講師募集中!あなたの知識でネットに講座が開けます!

■更新情報■






Just MyShop(ジャストシステム)
> ホーム > 講習マニュアル 【ホームページビルダー12 初級編】

 ホームページ・ビルダークイック | ホームページ・ビルダーウェブアートデザイナー |

ホームページ・ビルダーを使って講習マニュアル用に作成したのは
わたしの夢とライフワーク 宗@神戸』です。(2008.0319)

作成の手順を下記のステップにあわせて、画像解説
併記しながら、これからご紹介してゆきたいと思います。

ちなみに、ホームページ・ビルダーの、ようこそ画面では3つの編集スタイル
紹介されていますので、この中からワープロ的にホームページを作成できる
スタンダードスタイルを元に、一連の流れをまとめてみました。

講習用のサンプルは、入門用PCページの中から、選びました。
初めてホームページを作成する方にもおすすめ、ですね。


(1)編集モードの選択

(2)カテゴリの選択 

(3)ページのテーマ、レイアウトの決定 

(4)ページのタイトル、背景の決定

(5)ページ内容の設定

(6)保存場所の設定

さらに、実際のサイト運用では必須のステップとして、公開更新があります。

(7)FTPツール=ファイル転送の設定 ・・・ プロバイダのホームページ容量でもOKですが
                           より自由度の高い、無料のサービスを利用します。
                           有料レンタルサーバーの設定も同様に可能です。

(8)公開する ・・・ ホームページのインターネットデビュー! : ファイル転送活用!

(9)更新する ・・・ ホームページの内容の追加、修正、削除 : ファイル転送活用!



スタート⇒すべてのプログラム
⇒ホームページ・ビルダーを
選択して、クリックします。
ホームページ・ビルダー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
となって、更新されていることがわかりますね。
では、いったんサーバーとの接続を切りたいと思いますので、切断ボタンをクリックします。
切断ボタンが、接続ボタンに変わり、ファイル転送の右側に表示されていたサーバー側のファイルが見えなくなりました。
では、インターネット上にアクセスし
ホームページで確認をしましょう。
それぞれのボタンの下の文字が
二段に揃いましたね。更新完了!

基本的な更新の手順はこのようになります。今は文章のみの更新でしたが、画像を更新する場合には、更新した画像の転送も必要になることを、忘れずに覚えておきましょう。


 ホームページ・ビルダークイック | ホームページ・ビルダーウェブアートデザイナー |

> ホーム > 講習マニュアル 【ホームページビルダー12 初級編】



 ホーム | ホームページ・ビルダーネット学院 ブログ | ホームページ・ビルダー12 新機能リクエストブログ
 | ホームページビルダーブログレポート | ホームページビルダー 入門検定 | ChatRoom Pensse(パンセ) | 
旧ホーム


(Yahoo!JAPAN ホームページ・ビルダー カテゴリー登録サイト様一覧  敬意を表し掲載させていただきます。
ホームページ作成ソフトホームページビルダー10,9,8,7の使い方
ホームページビルダー・グレート初心者講座
ホームページビルダー作成報告
イプシロン-ホームページの作り方
3日間 ホームページビルダー
ホームページ・ビルダーで作るはじめてのWebページ

ホームページビルダーv12・11・10・9・8の使い方講座

ホームページ・ビルダー」は日本IBM社の商標または登録商標です。

Copyright (C) 2005-2008 hpb-edu.com. All Rights Reserved.
ホームページ・ビルダー12 ホームページ・ビルダーネット学院 ホームページ・ビルダー12 ホームページ・ビルダーネット学院 ホームページ・ビルダー12 ホームページ・ビルダーネット学院 ホームページ・ビルダー12 ホームページ・ビルダーネット学院 ホームページ・ビルダー12 ホームページ・ビルダーネット学院