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ソースに組み込みます。組み込む場所に予め目印(画像貼り付けなど)
上記タグをHTMLソースに組み込みます。シークバーを表示させたい場所に予め |
||
| ステップ5〜疑問点は質問しよう〜 ここまで進めてきたら、恐らくどこかで分からなくなることがあると思います。 そういう場合は悩んでいないで、すぐ質問してください。私もできるだけ力に なるつもりです。質問掲示板への投稿の際は分かりやすい題名と、詳しい 本文を心がけてください。細かく書かれているほど回答は早いです。 質問掲示板 |
||