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

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