ホームページビルダー（HPB)で ホームページを作る

ホームページビルダー（HPB)で
ホームページを作る
T-net パソコン教室
ホームページ作成講座
2007.10.13
講師 志賀
1
「北摂SITA」ホームページ http://www014.upp.so-net.ne.jp/hokusetsuSITA/
「参考資料」のページからカラーｐｄｆファイルがダウンロード出来ます
3
ホームページを構成するファイル 1
html ファイル 必ず必要
ホームページを構成するファイル ２
画像など
＊.htm あるいは ＊.html
基本的にはテキスト・ファイル タグというフォントや図の
位置などを指定する記号が入っている。（次図参考）
 ホームページビルダーはワードで文書を作る感覚でhtml
ファイルを作ってくれる。（写真なども挿入可能。ただし、
htmlファイルに取り込まれるわけではない）
 ブラウザ（エクスプローラなど）はhtmlファイルを読み取り
パソコン画面に正しく表示するソフト


2



4
画像、ロゴ
＊．jpg、 ＊.gif 等（標準サイズ 640×480）
動画（アニメ・ビデオなど）
アニメーション gif 、＊.avi 等
音声、音楽
＊.wav, ＊.mp3 等
文書
＊.ｐｄｆ （ワード文書をhtml 化してもよい）
いずれもサイズに注意
1
表 紙
サイトとフォルダー
サブフォルダ




１つのホームページは１つのサイト
PC上では１つのフォルダ（MyHP とする）に入れ
る
Index.htm (表紙に対応）は必ず必要
MyHP 内のファイルを プロバイダーのWebサー
バー（FTP サーバともいう）に転送することによ
り完成
7
5
ページとリンク




6
ファイル名その他
１つのhtml ファイルが１ページに対応
Index.htm が本来のホームページ
Index（表紙）ページと各ページはリンクでつなが
る。各ページ間の相互リンクも可
各ページとそれに付属する図などのファイルは
サブフォルダに入れておくとよい（必ずしもその
必要はないがサイトが大きくなると便利）



8
ファイル名は必ず半角英数字で
Web サーバーのOSは Windowsでないので
全角文字を認識しない
特殊文字”&，＊、<,>” はだめ
“_” （半角アンダーバー）、”-” (ハイフン)はOK
装飾子は小文字で
Web サーバーは 大文字小文字を区別する
ファイル名に日付をつけておくと便利
例：7a13syasin.jpg (07年10月13日作成）
a=10,b=11,c=12
2
ファイルの保存場所


どこでも配置モードか標準モードか？
Index.htm ファイルはMyHPフォルダに作りそこ
に保存する。
写真などの元ファイルはPC内のどこにあっても
いいが保存するときは必ずMyHPフォルダーま
たはその下のサブフォルダを指定する。
ページまたはサイトを保存するとき必要なファイ
ルの保存場所を指定すればよい
なお、ファイル名は半角英数字でなければなら
ない

11
9
トータル ファイルサイズ


10
HPB にはhtml ファイルを作る方法として、
1. どこでも配置モードと
２． 標準モードがあるが
標準モードを推奨
どこでもモードは後で改訂するのが面倒
違った環境（コンピュータ）で見ると字がはみ出し
たりすることがある
プロバイダのＦＴＰサーバーの容量に注意
5MB,10MB,50MB,100MB,1GB ??
広告付きの無料サーバーも使用可
サイト内（ＭｙＨＰ フォルダー内）の全容量をそれ
以下にする
html ファイルは小容量
写真は640×480 程度のjpg ファイルに
動画（*.avi）、音楽（*.wav)は容量を食うので必
ず圧縮する
（HPB Ver.6 以上では可能）
表作成機能を活用する

特にトップページは文字や写真の配置を工夫す
る必要がある。
標準モードで見栄えのいい配置を実現するには
表作成機能を利用するとよい
例 北摂SITAのトップページ
12
3
文字 小
13
15
文字 大
文字の大きさと表示の確認


14
ページが完成したら（作成途上でも時々）
ブラウザでどのように表示されるか確認しておく
ツールバー「ｅ」をクリックするとブラウザが立ち
上がる
プラウザの文字表示設定を少なくとも「小」「中」
サイズで確認しておく
16
4
どんなホームページを作るか？
目的とテクニック
目


2．写真（静止画像）
的

個人
旅の記録、動物や植物、郷土自慢、自己紹介
趣味、意見、専門、掲示板
企業・団体
どんな組織？、製品情報、活動、アクセス、
Q＆A



17
19
色々なテクニック １． リンク




18
単純貼り付け
説明文の付け方、下、左（右）よせ
最後の改行はctrlキーを押しながら
サムネイル表示
html タブを操作することにより順序変更、追加
など可能
表への割付
スライドショウ
３． 動画、音声

サイト内リンク
ページ内リンク
ラベルを付ける
ラベルへジャンプ（他のページでもOK）
URLへのリンク
イメージマップによるリンク




ビデオ 編集・貼り付け（音声付き）
（ウエッブビデオ スタジオ
動くパノラマ写真（Vistaでは動作しないことがある）
HotMedia クリエータ
アニメーション画像
ウエッブアニメータ
静止画を動かす
ウエッブアニメータ、MS フォト ストーリー3
音声・BGM
組み込みファイルを使用、CD から取り込む
20
5
転送先名
設定をクリック
４． その他




アクセスカウンター
プロバイダーのCGI
アンケート
プロバイダーのCGI
掲示板
TeaCup、ロケット 等
サイト内検索
Googleサイト内検索サービス 等
21
ＰＣサイト内
ファイル
PC内のファイル
23
サイト内ファイルの転送

ＦＴＰ ツールの使い方
HPBのサイト作成機能を使えばサイト内のファイ
ルを一括転送できるがFTP機能を使って個々の
ファイルの転送法を知っておくと便利
HPBのメニュー →ツール→FTP 機能の起動
よければ ＯＫ
22
24
6
１． ここをクリック
４．最後に切断
３．ここをクリック
して転送
ここをクリックすると
日付順に整列
２．転送したいファイルを
選択
プロバイダーＦＴＰ
サーバー内のファイル
27
25
アクセスビリティーの向上のために
（多くのひとに見てもらうには）



26
何より内容の充実
簡単なキーワードでYahooやGoogle の検索で
上位にランクされること
順位は主に他のサイトからのリンク数が決め手
といわれる
キーワードとしてはタイトルや項目名が重視され
る？
いずれも順位付けは企業秘密
28
7