無料ホームページ作成マニュアル
無料ホームページ作成マニュアル>基本設定をしよう!

◆基本設定をしよう!

ファイルを保存したら、ホームページを実際に作り始めましょう。

◆基本設定

 念の為作るページを確認。 サンプルページ

まずページ全体の基本的な設定をしておきます。
編集画面で、右クリック>ページのプロパティ(属性の変更) を選択。

ページのプロパティ

すると、ページのプロパティ(ページ設定・属性)のダイアログが表示されます。
Dreamweaverの場合は選択している部分のプロパティが常に下部に表示されています。
ホームページ・ビルダーでは、タグと表記された部分にページのプロパティと表記されているかチェック。 
違う場合はページのプロパティを選択しておいてください。
alphaEDITを例に簡単に説明します。

ページのプロパティ

◆タイトル
ページのタイトルはブラウザの上に表示されるタイトルです。(Internet Explorerなら青いバーのところ)
ファイルの名前とは違うので、ひらがなや漢字を使って構いません。
サイトの名前では無く、ページの名前なので、そのページの内容が判るタイトルを付けておきましょう。

◆基本色
背景とテキストの色を決めます。
ソフトによってタイトルと配色でタブが違う事もあるので注意です。
基本は背景白の文字黒。もしくは逆。
原色を多用して目に疲れる背景や、背景と同系統のテキスト色で、文章が読みにくくならないように気をつけましょう。
後述しますが、文字色はこの様に一部変更も出来ます。

◆リンク
テキストリンクの色を設定します。
これは標準リンク青、アクティブリンク(マウスが上に乗っている状態)赤、訪問済みリンク紫が基本。
最初からそういう風に設定されています。
yahooやgoogleなどの検索エンジンで見慣れている配色なのであまり変えないほうがいいでしょう。
リンクについては後述します。

◆背景画像を使用する
これも後述。

ここではタイトルを設定するに留めておきます。
自己紹介のページを作るので「自己紹介」や「プロフィール」などでいいでしょう。
タイトルだけ記入して、基本色はそのままで構わないと思います。

※作業が終わったら上書き保存。こまめにセーブするクセをつけておきましょう。
上書き 上書き 上書き ←こんな感じのフロッピーディスクの形をしたものが上書き保存のボタンです。
もしくは【Ctrl】+【S】のショートカットキー(Windows)

◆ページテンプレート

このサイトでは共通して一番上にロゴが入っていて、右側にメニューが並んでいて……と似たような形をしてますよね。
これをいちいちページごとに作るのはめんどくさい。
クロはこういう時、ページテンプレートを作っておきます。
ページテンプレートとはページのひな型の事です。

雛型

見た目だけではなく、背景やリンクの色などの基本設定がページによって変わるのはあまり好ましくないですし、前章で説明した画像が見えなくなるミスも無くなるので試してみてください。まずサイト全体に共通する設定を決めたhtml(htm)ファイルを作って、ホームページを作る同じフォルダに「hinagata,html」とでも名前を付けて保存しておきます。
そして新しくページを作成する際に「hinagata.html」を開いて、ファイルの名前を変えて保存すればいいだけです。

無料ホームページテンプレートの素材屋さんとか、シンプレストさんなど、テンプレートを配布しているサイトさんもあります。(テンプレートには上の様なページテンプレートと、テーブルタグのような画像を使わない素材の様なものとがあります。)
元々用意されたひな型に画像や文字を入れていくだけで簡単にかっこいいページが作れますので、どうもうまくレイアウトできないな〜とお悩みの方は、ページテンプレートを利用してみるのをおすすめします。
タグによるテンプレート素材の使い方については、中級編以降を参照にしてください。

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

 

クロのどうでもいいコラム

alphaEDITについている文字コードとは簡単にいうと、どの規格の文字が使われているかです。
これの表示が無いと、ブラウザによって文字化けを起こしてしまいますが、最初から標準的な日本語(
シフトJIS)になっているので、これは特に変更しなくてもいいです。

DOCTYPE宣言は文書における定義の宣言で、htmlソースにおけるタグの定義を決めるものです。
訳分かんないでしょう^^;
クロも実はあんまりよく判っていません。
宣言をしないと、ブラウザによっては変な表示がされるという認識程度です。
これはチェックを入れると最も標準的な
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
という宣言がソースの一番上に入ります。
これなら今時のブラウザ全般と古いブラウザもおおむね問題ないので、気になるならチェックを入れておくようにしておきましょう。
まあこれはyahooやgoogleでも設定されてないので、あんまり気にしなくていいのかもしれません……

<<Back【作ってみよう!】 Next>>【文字を入力しよう!】
【無料ホームページ作成マニュアル】