ホームページビルダー（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
© Copyright 2024 Paperzz
