PR

ホームページ作成

スポンサーリンク
スポンサーリンク

・いよいよホームページの作成です。    
ホームページを作成するにあたって以下の項目を決める必要があります。

・テーマ

これはブログの時と同じで何を書いていくのかを決める必要があります。

・ホームページの画面レイアウト

ホームページは1画面の中に見出し、本文、メニューなど幾つかの
内容を記載していくのでどのような配置にするか決める必要があります。

これらを書くにはHTMLとCSSの知識が必要となりすが
今回はホームページビルダーを使用したいと思いますので
知識なしで実行したいと思います。(願望)

・レイアウトの決定            
今回は
ヘッダー  1
メニュー  1
サイド領域 2
本文領域  1
フッター  1

で行きたいと思います。

このレイアウトにしたのは深い意味はないのですが
最近のパソコンは画面領域が大きいのでこれくらいの表示は
問題ないのではないかと思ってのことです。

<<イメージ図>>

ヘッダー
 メニュー
左サイド 本文 右サイド
フッター

では挑戦してみたいと思います。

・実際の作り方           

ホームページの凄く大雑把な考え方は
1htmlファイルに1画面分を書くことですので
記載をする画面分のファイルの数が必要となります。

ではまずトップ画面を作成しましょう。

ホームページビルダーを開いてツールバーから
ファイル→標準モードで新規作成を選択します。
※今回はテンプレート使用ではなく白紙状態から作成してみます。

一番簡単な作成方法は左サイドバーのレイアウト部品の挿入から
レイアウト枠の挿入を行って上図のように枠を作って作成をすれば
ワープロ感覚で作成できるのですがその方法だと
以下のような問題が有りましたので今回は見送りました。

・位置が固定となってしまうため画面解像度が違う機械だと表示が崩れる可能がある。
・今回fc2の無料サービスを利用しているのだがフレームを使用すると
各フレームごとに宣伝用コンテンツが表示されてしまう。
→これはどうも原因が違うらしいという事があとで判りました。

・手順1 各領域の作成を行う。

白紙の状態から

ヘッダー と入力して改行
メニュー と入力して改行

を繰り返してフッターまでを入力

ヘッダー
メニュー
左サイド
本文
右サイド
フッター

となっていると思います。

ここで問題が発覚

<div>ヘッダー</div>
<div>メニュー</div>
<div>左サイド</div>
<div>本文</div>
<div>右サイド</div>
<div>フッター</div>

となるはずが

<div>ヘッダー</br>
メニュー</div>

となっている場所がある事が判り結局HTMLソースを直接書いた方が
確実だと判りました。

早くも最初の目論見は挫折してしまいました。

次回は気を取り直して挑戦します。

コメント

スポンサーリンク