無料ホームページ作成マニュアル
無料ホームページ作成マニュアル>作ってみよう!

◆作ってみよう!
ソフトを手に入れたら、さっそくホームページを作ってみましょう!

ホームページとはhtml(htm)ファイルの事です。
要するにInternet ExplorerやNetscape等のブラウザで表示されるものですね。
普段インターネット上で公開されているものを見ているためか、作る時もインターネットをつないでおく必要があると勘違いされてる方もいるようですが、そんな必要はありません。
※定義としてはホームページとはブラウザを起動した時に最初に表示されるページの事らしいのですが、定義が随分とあいまいになってるのが現状なので、当サイトではhtmlファイルをホームページと呼ばせていただきます。

まずこちらの サンプルページ のホームページを自分のパソコン上で作ってみましょう。
これは貴方のパソコンに保存するファイルでネット上から見れはしないので、失敗を恐れずに作りながらホームページの作成方法を覚えていきましょう。

◆起動

ソフトを起動すると編集画面が表示されます。
Dreamweaverの場合は、ファイル>新規を選択し、一般タグの基本ページ、HTMLを選んで作成をクリック。
ホームページ・ビルダーの場合は、ファイル>標準モードで新規作成を選択。
また、モードはスタンダードにしてください。
ホームページマネージャーでは便利なプロジェクト機能があって、その前にやらなければならない事があるので、プロジェクト機能  を参考にしてください。

各ソフトでは画面の左上に「WYSIWYG(デザイン・ページ編集)」「HTMLソース(コード)」「プレビュー」といった編集の仕方を変更するタブがあって、文字のところをクリックすると編集画面を変える事が出来ます。

新規作成画面

フロントページエクスプレスの場合は、表示>HTML で別のウィンドウが開きます。
ちゃんとWYSIWYG(ページ)編集になってるかどうか確認してください。
白紙の画面になっていればいいです。

以下WYSIWYG編集画面での編集を前提とします。

◆まずはじめに

ホームページを作る前に、まずやっておかなければならない事があります。
それはhtml(htm)ファイルの保存です。
これは画像を使用する際に保存をしておかないと、画像が表示されないという現象が起こってしまう為です。
新しいページを作る時は後で変更する事も出来るので、まず最初に名前を付けて保存するクセをつけておきましょう。

では今開いている白紙のページを最初に作ったhomepageフォルダに保存してみましょう。
とりあえず名前は「 profile 」としておいてください。

 ファイル>名前を付けて保存 ファイルの名前は必ず半角英数字で!

フロントページエクスプレスは上の後ダイアログが開くので、「ファイルとして保存」を選んでください。

ファイル>名前を付けて保存 名前は必ず半角英数字で!

 

◆何故ファイルの保存が必要なのか

下の画像を見てください。

クロ わざと表示させていません

右の画像が表示されていないと思います。
しかしクロのパソコンから見ると、同じ画像が並んでいるように見えています。
これはよく初心者の方がしてしまうミスで、色んなホームページを見ているとたまに見かけたりもします。
html(htm)ファイルを保存せずに画像を貼り付けると、こうなってしまうんです。
画像を探すのに目印となるファイルが無いので、パソコンがファイルからでは無くどのドライブのどこにある画像なのか、という認識のしかたをしてしまってこうなります。
また、ファイルの名前が半角英数字でない場合もこうなります。

画像の上で右クリックしてプロパティを見てみると、どちらも neko01ew.gif という名前のGIFファイルではありますが、置いてある場所(アドレス)が違うのが判ります。
左がhttp://kuro・・・neko01ew.gif なのに対し、
右がfile:///C:/homepage/neko01ew.gif となってますね。

左は当サイトが借りているフリースペース上に置いてあるGIFファイルを表してますが、右はクロの持っているパソコンのファイルを表しているんです。
他の人のパソコンの中身なんて、ウィルスに感染してでもいない限り表示されません。
表示されるとしたら、偶然Cドライブのhomepageフォルダにneko01ew.gifという名の左と同じ画像が置いてあった場合です。滅多に、というか無いでしょう、こんな偶然^^;
これの厄介なところは、自分のパソコンではしっかりと表示されるので、ミスしているのに気付かないところなんですね。
確認するには他の人のパソコンから見るか、全ての画像を一個づつプロパティを見て確認するしか無いので、ミスしてしまったら自分ではまず気付きません。
しかし他の人のパソコンから見るとミスが一目瞭然なので気をつけましょう。
当サイトでもこういうものがあったら報告お願いします^^;

alphaEDITでは画像を貼る時にhtml(htm)ファイルが保存されていなければ下の警告が出るので安心です。

これが出たら続行しちゃダメ!

これが出たらキャンセルしてhtml(htm)ファイルの保存をまずしておきましょう。

◆トップページヘ
無料HP作成マニュアル
◆作成初級編
作ってみよう!
基本設定をしよう!
文字を入力しよう!
画像を貼ってみよう!
レイアウトを決めよう!
【alphaEDIT】
【Dreamweaver】
【Homepage Builder】
【Homepage Mnager】
【FrontPage Express】
リンクを貼ろう!
<<Back【ソフトを手に入れよう!】 Next>>【基本設定】
【無料ホームページ作成マニュアル】