トップページ   ホームページのテンプレート  

無料でイチからホームページを作る

まずは無料でホームページを立ち上げる手順を紹介したいと思います。
テンプレート(出来上がったデーター)を使ってホームページを作成していきます。
内容としてはデーターをサーバーに渡すかっこうになります
その「サーバーに渡す」となると少し難しく聞こえますが、
実際には簡単な作業で済みますので、その辺も解り易く解説したいと思います
イメージとしては
[自分のパソコン内にあるメモ帳などのファイルをサーバーにコピーして渡すといった感覚です]


ナビ画像0


ファイルをサーバーへ渡す【詳しい方法】


今回作るホームページはこのような作りになります


ホームページの構造


全部で5ページあります。
トップページとメニューページから各ページへリンクをしています。
作りはいたってシンプルではありますが、
今回は練習の第一歩と思って実際にホームページを公開するまでを目標としてみて下さい。
その後でレイアウトやデザインなどは変えることもできますので、
いったんは技術だけを覚えるようにしてのちに、デザインなども学ぶとよいと思います。


実際のページ

では早速ホームページのテンプレートを使っての手順をまとめてみます

1.メールアドレスを使ってfc2の無料サーバーに登録をします
2.登録を済ませると自分のアドレスの管理画面が用意されます
3.まずはホームページの管理画面へと進んでいき段取りを見てみます
4.私が作ったテンプレートをダンロードします
5.データーをアップロードしていきます


まずはじめにホームページを作る為には公開する場所が必要になります。
そのホームページを公開する場所として、
ここでは有名どころのFC2を例にして進めていきたいと思います


1.メールアドレスを使ってfc2の無料サーバーに登録をします
自分のメールアドレスを持っていればそのメールアドレスを使って登録をします
持っていなければヤフーなどでメールアドレスと作り登録をする形になります
fc2の登録画面へ行き新規作成から
自分の好きなアドレスを作り
メールで本人確認が取れれば、fc2の無料のサービスが受けれるようになります。

fc2への登録方法

ホームページを公開する流れ


2.登録を済ませると自分のアドレスの管理画面が用意されます
これは以前に使っていた私のホームページのアドレスになります
http://survivalin.web.fc2.comです
survivalinの所が自分の好きなオリジナルの部分です
これを用いて一緒に説明していきたいと思います


ナビ画像1


以前に使っていたころはデーターがありましたが、
今現在は消去して何もない状態ですので、条件は同じになりました。
ホームページのアドレスを打ち込んでも、ページ自体がないので表示されません
新しく作成した時は
サーバー側のスペース(用意されたフォルダ)の中には何もない状態ですので
例えば
http://survivalin.web.fc2.comにアクセスしても
データーがないのでページは表示されません


ナビ画像2


そのページを表示させるには、トップページとなるindex.htmlを渡さなければなりません
そのindex.htmlとはそのフォルダーのトップを意味します。
もし閲覧者からそのファルダーに要求があった場合には
そのフォルダーのindex.htmlがを表示する結果になります。


ナビ画像3


3.まずはホームページの管理画面へと進んでいき段取りを見てみます
管理画面へ行くと「ファイルのアップロード」といった項目があると思います
これは2012年現在ですので
変更がなければ「ファイルのアップロード」となっていると思います。
もし変更していた場合には、似たような項目を探してみて下さい


ナビ画像4


ファイルのアップロードへ進むと次のような画面になります。


ナビ画像5


この場所からデーター渡せるようになります
「参照」をクリックすると自分のパソコン内のファイルの選択ができます
例えばそのフォルダーがデスクトップ上に置いてある場合は
c:\users\desktopとなります
これは、自分のパソコン内のパスなので若干に違いがありますが
たいていの場合には、デスクトップはdesktopとなっていると思います。
アプロードしたいファイルを指定します
もしデスクトップ上にjpnといったフォルダの中のindex.htmlファイルをアップロードしたい場合には
c:\users\desktop\jpn\index.htmlといったフォルダーの位置が示されます


ナビ画像6


そのデスクトップ上にあるjpnフォルダーの中のindex.htmlファイルを選択してOKを押します。
そうするとフォームに反映されますので
下の方にあるアップロードといったボタンをクリックします。
これでトップページとなるindex.htmlをサーバー側に渡した事になります
そうすると
http://survivalin.web.fc2.comのアドレスにアクセスするとページが表示されます


ナビ画像7


※アップロードにつきましてはこの後にもう少し詳しく説明します


4.私が作ったテンプレートをダンロードします
ここに私が作ったテンプレートが圧縮してあります。
この「テンプレートをダウンロードする」といった項目をクリックすると
圧縮されたファイルが指定したダウンロード先に作られます。
その圧縮されたファイルを展開すると、いくつかのファイルがあります。
そのファイルをサーバーに送る形になります。
このテンプレートのレイアウトは、シンプルですが
練習も兼ねていますので使ってみて下さい。
それと下の方に著作権が入っています。
もしどうしてもその著作権の部分が気に入らなければ
連絡をしていただければ消しても良い事にします。
できれば消さずにつけてほしいのですが
とうしても邪魔で消したいとなれば消しても良いです

テンプレートをダウンロードする

ダウンロードと解凍方法


5.データーをアップロードしていきます


ダウンロードをすると jpnフォルダーといったファイルがダウンロードされますそれを解凍、展開すると
次のようなファイル構成になっています


ナビ画像8


いくつかのフォルダーとファイルが存在します。
この階層通りにアップロードしたいので取りあえず
一つずつアップロードして解説していきたいと思います


ナビ画像9


その前にこのダウンロードしたファイルの中身は
タイトルや内容がデフォルトのままになっていますので
その場所に書かれている内容を削除して
そこに自分の好きなタイトル名と内容を書き換えて下さい


-----内容を書き換えて変更する-----


まずはトップページとなるindex.htmlファイルをアップロードします


ナビ画像10


これでトップページが出来上がりました


この状態ではただトップページを置いただけなので
レイアウトもされていません。
画像も位置とサイズは指定してありますが
肝心な画像をアップロードしていませんので
画像の所はばってん印と枠しかありません


ナビ画像15


次に同じようにCSSファイルであるstceetを同じようにアップロードします
CSSファイルはメモ帳で作られたファイルで、文字の色を変えたりする指示を与えます


今度は画像などが入っているフォルダーをアップロードするために
あらかじめサーバーの方でフォルダーを作りたいと思います
フォルダー作成といったボタンをクリックすると
フォルダー名の要求があります
そこへ
nextpege フォルダー
picturebox フォルダーを
一つずつ作ってみて下さい
作り方は違うページで載せてあります


サーバー側でディレクトリ(フォルダ)を作る





ページの上へ戻る

目指そう!物知り博士TOPへ



↑このページの先頭へ