HP作成講座

 

         ステップ
ステップ1〜HPスペースを見つけよう〜 
こちら
ステップ2〜文書を書いてみよう〜    こちら
ステップ3〜Web上に公開しよう〜     こちら
ステップ4〜HTMLタグを使ってみよう〜 こちら
ステップ5〜疑問点は質問しよう〜     こちら
ステップ6〜中級講座に進もう〜       こちら
ステップ7〜HP用語集を見よう〜      こちら

 

      ステップ1〜HPスペースを見つけよう〜
早速HPを作成するわけですが、その前にやっておかなければいけないことがあります。
HPスペースを見つけることです。HPスペースはHPを設置してくれるサーバーのことで、
無料のものから有料のものまで幅広くありますが、ここでは無料のものをお薦めします。
慣れてきたら「ゲーム攻略・裏技」のように有料で独自ドメインを取るのもいいでしょう。
無料HPスペースの中で私が薦めるのはfc2webです。
HPスペースを決めたら、そのサイトの指示に従って登録をしてください。
どのHPスペースにおいても登録が完了したら登録内容のメールが届くと思います。
そこにある(FTP)ユーザーID(FTP)パスワードは重要ですのでメモしておいてください。

 

        ステップ2〜文書を書いてみよう〜
HPスペースを確保したら、いよいよHPの作成に取り掛かります。ここではエディタとして
『Front Page Express』を使用して説明していきます。Front Page Express(以下FPE)は
Microsoft社が提供するソフトです。OfficeのCD-ROMの中などに含まれています。
OfficeのCD-ROMからFPEをインストールする方法を説明します。

Office2000からFPEをインストール>
Office2000のCD-ROMをパソコンにセット→デスクトップに「Front Page Express」という
フォルダを新規作成→「マイコンピュータ」→CD-ROM用のドライブ→「IE5」→「JA」→
「FPESETUP.CAB」と選択します。次に「FPESETUP.CAB」を開いて中身を全てデスク
トップの「Front Page Express」フォルダにコピーします。コピーが終わったらこちらから
おだ様の作成されたプログラム「fpxsetup.vbs」をダウンロードして、「Front Page Express」
フォルダに追加します。プログラムを作成したおだ様に感謝です!!
最後に「fpxsetup.vbs」を起動して、セットアップしてください。セットアップが完了すると
「スタート」−「プログラム」−「アクセサリ」もしくは「スタート」−「プログラム」−「アクセサリ」
−「インターネットツール」のどちらかに「Front Page Express」のショートカットが作成
されます。使いやすいようにデスクトップにコピーしておきましょう。

OfficeXPからFPEをインストール>
OfficeXPのCD-ROMをパソコンにセット→デスクトップに「Front Page Express」という
フォルダを新規作成→「マイコンピュータ」→CD-ROM用のドライブ→「Files」→「Osp」→
「1041」→「IE5」→「Jp」→「FPESETUP.CAB」と選択します。次に「FPESETUP.CAB」を
開いて中身を全てデスクトップの「Front Page Express」フォルダにコピーします。コピーが
終わったらこちらからおだ様の作成されたプログラム「fpxsetup.vbs」をダウンロードして、
「Front Page Express」フォルダに追加します。プログラムを作成したおだ様に感謝です!!
最後に「fpxsetup.vbs」を起動して、セットアップしてください。セットアップが完了すると
「スタート」−「プログラム」−「アクセサリ」もしくは「スタート」−「プログラム」−「アクセサリ」
−「インターネットツール」のどちらかに「Front Page Express」のショートカットが作成
されます。使いやすいようにデスクトップにコピーしておきましょう。

FPEがどうしても用意できない方はVectorなどに紹介されているフリーのエディタソフトを
使ってください。以下はFPE専用の操作になります。

まずはサイトのトップページを作成します。サイトのトップページのファイル名は
index.htm」か「index.html」である必要があります。ここでは後者で説明します。
(HPスペースにfc2webを利用するときは前者である必要があります。この先
index.htmlと説明しているところは全てindex.htmと解釈してください)

・「Front Page Express」を起動してください。

・「ファイル」−「名前をつけて保存」−「ファイルとして保存」と選択してください。

・HP用のフォルダをデスクトップなどに作成してください。

・ファイル名を「index.html」に変更して保存してください。

・自由に「index.html」をカスタマイズしてトップページを作成してください。

基本的な機能
背景・・・「書式」−「背景」 画像・・・「画像の挿入」 表・・・「表の挿入」
文字サイズ拡大・・・「テキストサイズの拡大」 字体の変更・・・「フォントの変更」
ハイパーリンク・・・「挿入」−「ハイパーリンク」

このハイパーリンクがHPを作成するうえで最も重要の機能の1つです。
HP上ではページ間の移動にハイパーリンクの設定がされています。
要するに行かせたい次のページのURLのことです。


次にプロフィール(別になんでもいいですけど)のページを作ります。

・「Front Page Express」を起動してください。

・「ファイル」−「名前をつけて保存」−「ファイルとして保存」と選択してください。

・ファイル名を自由に変更して保存してください(例:profile.html)。

・同じようにカスタマイズしてください。

 

       ステップ3〜Web上に公開しよう〜
文書を書いただけでは全国のユーザーに情報は届きません。Web上に公開することで
初めて一般のユーザーが閲覧できるようになります。自分のパソコン(ローカル)の
ファイルをHPスペース(サーバー)に送信することをアップロードと言います。
アップロードしないと公開したことにはなりません。ファイルをアップロードするには
FTPソフトが必要です。FTPソフトは無料(フリー)でも質の良いものがたくさんあります。
その中で私がオススメするのがFFFTPというソフトです。私も愛用しているソフトです。
新規ホストの設定について軽く説明します。

-----------------------------------------------------------------------
ホストの設定名・・・HPスペース名(例:トクトク,fc2webなど)
ホスト名(アドレス)・・・HPスペースごとに決まっているFTPサーバー名
              (例:ftp.***.com , www.***.comなど)
ユーザ名・・・HPスペースでのアカウント名(例:matukin,cgo23920など)
パスワード・・・HPスペースでのFTPパスワード(例:12345678など)
ローカルの初期フォルダ・・・ローカルのHP用のフォルダ
                 (例:C:\WINDOWS\デスクトップ\homepageなど)
ホストの初期フォルダ・・・ホストのHP用のフォルダ
                (指定しない場合が多いです)
-----------------------------------------------------------------------

ここまでしっかり設定したらそのホストで接続してください。設定が正しかったら無事
ホストのFTPサーバーに接続されます。いよいよアップロードするわけですが、
ここで転送モードについて少し触れておきます。転送モードとはホストにファイルを
アップロードするときに指定する転送形態で、これが間違っているとアップロード
してもファイルが壊れてしまう可能性があるので注意してください。ファイルごとの
転送モード一覧は以下のとおりです。またFFFTPの中央やや左上にある「A」が
アスキーモード、「B」がバイナリモードと言います。

-----------------------------------------------------------------------
txt,htm,html,cgi,dat,log,plなど→→→アスキーモード

mid,gif,jpg,png.lzh,zipなど→→→バイナリモード
-----------------------------------------------------------------------

これらの判別するのが難しいという方は「B」の横に「AB」というボタンがあります。
これを選択するとファイルの種類ごとに転送モードを自動的に設定してくれます。
初心者はこれを使うといいでしょう。ローカルの中からアップロードしたいファイルを
選択して、転送モードを設定して「↑」ボタンを押します。アップロードに成功すると
今アップロードしたファイルがホスト側のFTPサーバー(画面右側)に表示されます。
また、既存のファイルを上書きするときは上書きの種別が表示されることがあります。
上書きにチェックを入れて、アップロードしてください。

「index.html」がサーバーにアップロードされると一応自分のHPができたことになります。
早速、HPスペースからもらったURLをブラウザのURLバーに打ち込んでみてください。
あなたがアップロードした「index.html」は表示されましたか?表示されたのならアップ
ロードは成功です。表示されなかったのならアップロードの過程で何らかのミスがあった
と考えられます。もう一度確認しながら再試行してみてください。

 

      ステップ4〜HTMLタグを使ってみよう〜
これで一応あなたのHPが完成したわけですが・・・もちろんこれで満足はしていませんね?
いろいろなサイトを見てみるとレイアウトが整っていて、見栄えがあると思います。
FPEではHP作成には限界があり、充実したHPを作るにはHTMLタグの使用が必要不可欠
になってきます。HTMLタグとはWeb上のサイトのHTMLファイルを構成する部品のような
ものです。実はFPEで作ってきたHPもアップロードする際にHTMLソース(タグの集合)に
変換されていて、それをブラウザを通してまた閲覧可能な状態に戻しているわけです。
これは絶対に覚えておいたほうがいいと選ばせて頂いたものを紹介します。
また、FPEでHTMLタグを編集する方法は「表示」−「HTML」です。

リンクタグ
リンクとはWeb上のページ間を繋ぐための機能です。ほぼ全てのWeb上のページにリンク
設定がされています。HP作成のうえで最も大事なタグです。



上記タグをHTMLソースに組み込みます。組み込むための方法はまず普通にFPE上で
文字を書きます(リンクさせたい,クリックさせたい文字です)。次にHTMLソースを開いて
今入力した文字を探します。その文字の直前に<a href="http://www.***.com/##.html">
を入れます。タグ中のURLは、もちろん自分のHPスペースのリンク先のページを指定
してください。次にその文字の直後に</a>を入れます。入力し終えたら「OK」を押して
ください。リンクされた文字は初期設定では青色になります。

画像タグ
その名の通りWeb上のページに画像を表示させる機能です。先にホストに画像をアップ
ロードしておく必要があります。ついでにWeb上の素材を使う方法を軽く説明します。

----------------------------------------------------------------------------
Windowsの場合
1:Web上で好きな素材を見つける
2:その素材がフリー(自由使用可)なのかどうか確かめる
3:その素材の上で右クリックして「名前をつけて画像を保存」を選択する
4:HP用のフォルダに保存する
5:FFFTPで素材をサーバー(ホスト)にアップロードする
6:画像タグで画像を呼び出す
----------------------------------------------------------------------------

上記タグをHTMLソースに組み込みます。組み込む場所に予め目印(画像貼り付けなど)
の文字を打っておいて、HTMLソースを見ると分かりやすいです。入力し終えたら「OK」を
押してください。サンプルは画像がGIFの場合です。JPEGやPNGのときは拡張子が
異なりますので注意してください。

音楽タグ
その名の通りWeb上のページに音楽を流す機能です。先にホストに音楽をアップロード
しておく必要があります。ついでにWeb上の素材を使う方法を軽く説明します。

----------------------------------------------------------------------------
Windowsの場合
1:Web上で好きな素材を見つける
2:その素材がフリー(自由使用可)なのかどうか確かめる
3:その素材のリンク(拡張子mid)の上で右クリックして「対象をファイルに保存」を選択する
  (lzhなどの圧縮ファイルに入っていることが多いです。その場合は解凍して音楽ファイルを
  HP用のフォルダに保存してください)
4:HP用のフォルダに保存する
5:FFFTPで素材をサーバー(ホスト)にアップロードする
6:音楽タグでシークバー(音楽を操作するパネル)を表示させる
----------------------------------------------------------------------------

上記タグをHTMLソースに組み込みます。シークバーを表示させたい場所に予め
目印(シークバー貼り付けなど)の文字を打っておいて、HTMLソースを見ると
分かりやすいです。入力し終えたら「OK」を押してください。またそれぞれの属性の
意義を簡単に説明します。
----------------------------------------------------------------------------
width・・・シークバーの横幅(ピクセル指定)
height・・・シークバーの縦幅(ピクセル指定)
panel・・・シークバーの種類(1か2)
hidden・・・シークバーの表示の有無(trueで表示しなくなります,trueにした場合は↑の3つの
                      属性はカットしてください。表示する場合はこの属性を
                      組み込む必要はありません)
autostart・・・音楽の自動再生の有無(trueで自動再生し、falseで自動再生しません)
loop・・・音楽のループ機能の有無(trueでループし、falseでループしません)
----------------------------------------------------------------------------

 

     ステップ5〜疑問点は質問しよう〜
ここまで進めてきたら、恐らくどこかで分からなくなることがあると思います。
そういう場合は悩んでいないで、すぐ質問してください。私もできるだけ力に
なるつもりです。質問掲示板への投稿の際は分かりやすい題名と、詳しい
本文を心がけてください。細かく書かれているほど回答は早いです。

        質問掲示板

 

 

総合トップページ  別館トップページ