×

[PR]この広告は3ヶ月以上更新がないため表示されています。
ホームページを更新後24時間以内に表示されなくなります。

トピック

◎レイアウトを決める

◎文字を入力する

◎DIVタグを設定する

◎各パーツの詳細決定

◎ヘッダー画像の作成

◎サブコンテンツの作成

◎SEO対策

お気に入り

FXのお勉強

保険のしくみ

日傘館

水着ビキニ館

スポンサードリンク

【ホームページの作り方】の目的

ホームページの作り方をDreamWeaverを使って、わかりやすく丁寧にご紹介します。

HomePageBuilder版も後程ご紹介する予定です。

画像ソフトはGIMPというソフトを使って紹介します。

また、SEO対策についても紹介していきます。

また、アフェリエイトなどホームページを使って稼ぐ方法なども紹介していきます。

よろしくお願いします!

@目的・テーマ・伝えたい内容を決める

例えば、当サイトの場合で言ったら、『誰でも簡単にホームページを作れるようになる』事を第一目的として、さらに『アフェリエイトとかで稼ぐのノウハウを提供する』事を目的にしています。

Aタイトルを決める

作りたいサイトの目的が決まったら、そのサイトのタイトルを決めます。そのサイトの内容と一致するようにする。検索エンジンから引っ掛かかりやすいタイトルにするとSEO対策にもなります。

B全体像を決める(サイトマップ作成)

サイトの全体像を一目で見られるようなリストを作成する。

 ・トップページ
 |--・プロフィール
 |--・目的
 |--・リンク集
 |--・用語集
 |--

のような形で作成します。

Cレイアウトを決める

上記のようにざっくりと紙に書き出します。

わかりやすいホームページにする為に、

一番上に大きくタイトルを置き、

タイトルの下にどの画面からでもすぐにアクセスしたいページをリンクしたナビゲーションバーを置き、

左サイドにコンテンツを羅列したサイドメニューを置き、

一番目立つ真ん中にコンテンツを置きます。

そして、一番下にコピーライト、タイトル名を書くフッターを置きます。

DDreamWeaverを使ってレイアウトの準備

上記のように、

ヘッダー、ナビゲーションメニュー、左サイドメニュー、

コンテンツ、フッターと各ブロックの名前を記入します。

そして、その文字に対して、

DIVタグで囲っていきます。

ヘッダーという文字をドラッグして選択します。

そのままの状態で、A(※DIVタグを挿入)をクリック。

DIVのIDにheaderと入力します。

同じ要領で、footerまで行います。

footerまで行ったら、今度は左サイドメニューとコンテンツを同時に選択してから"DIVタグを挿入"をクリックして、IDをmainと指定します。

さらに、headerからfooterまで全体を選択してから"DIVタグを挿入"をクリックして、IDをcontainerと指定します。

E各部分の幅高さを決めます

スタイルシートを作成します。

上の丸で囲ったボタンをクリック。

セレクタの入力域に、IDで設定するので、前に#を付けて設定するDIV名を入力。

セレクタタイプは、詳細を選択する。

定義場所は、新規スタイルシートファイルを選択。

OKをクリックすると以下のようなスタイルシートを細かく設定するダイアログが表示されます。

まずは、ボックスを選択して、幅に740ピクセル、高さ300ピクセルを設定します。

次に、ボーダーと言って、周りを囲む線を設定しておきます。