Back to page

− Links

 Print 

ホームページ・ビルダー マニュアル​/準備 :: ホームページ・ビルダーのページ

wiki:ホームページ・ビルダー マニュアル/準備

Table of contents
  • ホームページ・ビルダー 使用前準備
    • ホームページビルダーとは
    • 機能紹介
      • 編集スタイル
      • テンプレートと素材集
      • CSS(スタイルシート)機能
      • サイト管理
      • ホームページ チェック機能
      • 携帯サイト対応
      • 様々な付属ツール
  • インターネットの仕組み
    • WEBブラウザとは?
    • URLとは?
    • プロバイダとは?
  • ホームページを作成するにあたって
    • 構造
    • 公開の流れ
    • 作成前の確認事項
      • HTMLファイルの拡張子の変更方法
      • ファイル名は半角英数字
      • ファイルの名前や保存場所を勝手に変更しない
      • ファイル保存場所について

ホームページ・ビルダー 使用前準備 anchor.png[1]

ホームページ・ビルダーを使用する前に、このソフトに関する事を記述していきます。 あとは、おおまかなインターネットの仕組み、ホームページ作成前に知っておいた方が良い事などを記述していきます。

Page Top

ホームページビルダーとは anchor.png[2]

ホームページ・ビルダーは、ホームページ作成支援ソフトです。

作成するにあたっては、HTMLを知らなくてはスムーズに作成出来ませんが、このソフトを使えばHTMLを知らなくてもホームページが簡単に作成出来ます。

ホームページ・ビルダーは主に初級者向けのソフトとして設計されています。

初心者向けですが、付属ソフトウェアの機能(文字入り画像、GIFアニメーション、ビデオ作成等)が充実していて、ホームページ作成には欠かせない機能が沢山装備されています。

近年発売されたものでは、ブログ支援機能も搭載され、ますます幅広くなっています。

Page Top

機能紹介 anchor.png[3]

ホームページ・ビルダーには多くの機能があります。

Page Top

編集スタイル anchor.png[4]

好みに応じて3つの編集スタイルがあります。またこれらを自由にいつでも切り替えられます。

  • 「かんたん」スタイル・・・「かんたんナビ」で操作、HTML編集不可
  • 「スタンダード」スタイル・・・「かんたんナビ」、「メニューバー」で操作
  • 「エディターズ」スタイル・・・HTMLソースとページ編集を同時に編集、自由な編集が可能

詳細は、各種設定の編集スタイル[5]を参照して下さい。

Page Top

テンプレートと素材集 anchor.png[6]

標準で収録されているテンプレートでホームページのレイアウトを簡単に設定出来ます。 素材集は、ロゴ画像やリスト画像などサンプルが多数収録、サンプルを使ってホームページの飾りつけも出来ます。 また、これらを使い、「フォトアルバム」、「アニメーションGIF」、「動画作成」なども製作可能です。

Page Top

CSS(スタイルシート)機能 anchor.png[7]

スタイリッシュ エフェクトと呼ばれる機能でサイトデザインをテーマに合わせて一新出来ます。

(CSS Level 1 および Level 2 をサポート(一部を除く))

Page Top

サイト管理[8] anchor.png[9]

サイト管理[8]機能「ビジュアルサイトビュー」を使って簡単にサイト管理[8]が出来ます。

  • ホームページの構造がツリー形式で表示
  • サイト内リンクエラーを検出
  • サーバー上の未使用ファイルを検出
Page Top

ホームページ チェック機能 anchor.png[10]

作成したページのHTMLをチェックしたり、サイト全体をまるごとチェック出来ます。

  • HTML構文チェック
  • HTMLクリーンアップ
  • アクセシビリティ チェック
Page Top

携帯サイト対応 anchor.png[11]

通常のWEBブラウザ用に作成したページを携帯用サイトに一発変換が可能。

携帯用、サムネイル画像なども作成可能、QLコードにも対応しています。
iモード、Yahoo!ケータイ、EZweb、WorkPad(Palmscape)、MobileWeb仕様端末、【新】ネットTV端末仕様、1/4 VGA、VGAなどのページ編集が可能です。

Page Top

様々な付属ツール anchor.png[12]

  • 「ウェブアート デザイナー」 (ロゴやボタンや図形の画像を作成するツール)
  • 「ウェブ アニメータ」 (文字や画像のアニメーションGIFを作成するツール)
  • 「ウェブビデオ スタジオ」 (ビデオ画像を編集するツール)
  • 「HotMedia編集 クリエーター」 (HotMedia編集 コンテンツを作成する専用ツール)
  • 「デジすたマーカー2」 (電子透かしを画像に埋め込むツール)
  • 「ファイル転送」 (FTP転送するツール)
Page Top

インターネットの仕組み anchor.png[13]

インターネットは、コンピューター同士を繋ぐ世界的規模の巨大ネットワークです。

主にインターネットでは、「メール」と「ホームページ」が利用されています。

Page Top

WEBブラウザとは? anchor.png[14]

ウェブブラウザ(Web browser)は、ブラウザを見る為のアプリケーションです。 ウェブブラウザは、おおまかに以下の3つの役割をします。

  • サーバと通信をして、指定されたURIに対応するリソースを取得
  • 取り寄せたリソースを、その種類(HTML、XHTML、XML、画像、テキスト[15]など)に応じて解析
  • 解析結果をもとに文字や画像を適切に配置し、文字装飾、色付けなどで、視覚効果を得る

高機能なブラウザでは、さらにいろいろな機能が搭載されています。

  • JavaScriptなどのスクリプトエンジンを搭載
  • プラグインなどの仕組みでブラウザの機能が拡張可能(Javaプラグイン、Adobe Flashなど)

近年では、タブブラウザ方式のウェブブラウザが主流となっています。 主なウェブブラウザは以下の通りです。

ホームページを作成する上で、様々なブラウザに対応する事が望ましいと思います。 複数ブラウザで自分のホームページを確認しておくと良いでしょう。

Page Top

URLとは? anchor.png[23]

URLとは、Uniform Resource Locator(ユニフォーム[24]リソースロケータ)の略で、「http://~」と表記され、いわばインターネットの住所を指すものです。

ウェブブラウザでは「アドレス」と呼ばれています。

Page Top

プロバイダとは? anchor.png[25]

プロバイダとは、インターネット接続業者のことで、正式には「インターネット サービス プロバイダ(ISP)」という。

電話回線やISDN回線、ADSL回線、光ファイバー回線、データ通信専用回線などを通じて、私達の家庭(企業)のパソコンからインターネットに接続する時に、この業者を経由する。

その業者は、付加サービスとして、メールアドレスやホームページ開設用のディスクスペースを貸し出したりします。 このプロバイダは、沢山の業者が存在し、サービスや料金体系など異なります。 初めは無料でサーバーを貸してくれるレンタルサーバーを選びましょう。

参考リンク

Page Top

ホームページを作成するにあたって anchor.png[28]

Page Top

構造 anchor.png[29]

ホームページの構造は、大抵複数のファイルから成り立っています。

ホームページには、まずトップページ(index.html など)があります。このトップページ以外のページと結び(リンク)、各ページをつなぎます。

index.htmlなどのURL構造は、下記の例で説明します。

アドレス構造, URL.gif
 
  1. 規則名・・・ホームページの情報をやりとりする上での決まり事
  2. ホストサーバー名・・・wwwは「World Wide Web」の略、複数サーバー所有の場合は異なる場合もある
  3. 組織名・・・組織・団体名は「ibm」、組織種・地域コードは「com」
  4. ディレクトリ名・・・フォルダ毎に分類し管理する為に使う、複数の場合は「/」で区切る
  5. ファイル名・・・「taiken」がファイル名、「html」が拡張子となる、上階層の「abcd」の中のファイル
Page Top

公開の流れ anchor.png[30]

大きく分けて4つの手順でホームページを公開する流れとなります。

  1. ホームページを作成
  2. プレビューで実際に外観やリンクなどを確認
  3. プロバイダのサーバーに転送
  4. WEBプラウザで確認
Page Top

作成前の確認事項 anchor.png[31]

ホームページのファイルを作成する前に確認する事があります。
詳しくは、ホームページ・ビルダー マニュアル​/各種設定[32]で説明しています。

トップページは、「index.html」と言いましたが、プロバイダによって、この拡張子は、「html」と「htm」のどちらかに分かれます。
これは自分の契約しているプロバイダで確認して下さい。

ホームページ・ビルダーは、初期設定では「html」となっています。お使いのプロバイダが「htm」となっている場合は、変更する必要があります。

Page Top

HTMLファイルの拡張子の変更方法 anchor.png[33]

  1. 「ツール」→「オプション」をクリックし、「ファイル」タブをクリックします。
  2. HTMLファイルの拡張子という項目の右の欄に「htm」と記入します(初期設定は、html)
  3. 「OK」をクリックします。

この作業は、ファイル作成前にやっておきましょう。
お使いのプロバイダが「htm」と指定されているのに、「html」ファイルで作成し、アップロードしても表示されません。

Page Top

ファイル名は半角英数字 anchor.png[34]

ホームページで使うファイル(HTMLファイル、画像ファイルなど)やフォルダの名前は、必ず半角英数字を使用して下さい。以下の名前にしてしまうと表示されません。

  • 全角英数字
  • 日本語(かな、漢字など)
  • スペース(空白文字)
  • 「?」「!」などの特殊記号
Page Top

ファイルの名前や保存場所を勝手に変更しない anchor.png[35]

作成したページにリンクが設定されている場合、ファイルの名前や保存場所を変更してしまうと、リンク先へジャンプ出来なくなってしまいます。(リンク切れ)

ホームページ・ビルダーの機能で、リンクを保持したまま名前の変更などが出来ます。 もし変更したい場合は、ホームページ・ビルダー マニュアル​/サイト管理[8]を参照して下さい。

Page Top

ファイル保存場所について anchor.png[36]

ファイル名などの変更でリンク切れになってしまうと説明しましたが、沢山のファイルを作成をしていくと、フォルダ毎に整理したくなります。

その場合は、初めから作成コンテンツ種別にフォルダを作っておいておくのも手です。
しかし最初の慣れないうちは、全てのファイルを一つのフォルダに保存しておいても全く問題ありません。


Last-modified: 2009-03-05 (Thu) 09:28:12 (JST) (554d) by hpb