1.初級編開始 |
|
御自分のサイトにアップロード出来る方を対象に、画像と文章の違い、
レイアウト枠のの功罪について、ビルダーを使いながら、順に解説してまいります。
題材は、写真アルバムの紹介にしましょうか、旅行記や趣味の紹介等に、応用できます。
Templateは20番にして見ます、
では、20番をダウンロード・解凍し、フォルダの中身だけ全部を、
前回のフォルダ内にコピーまたは移動してください。
上書き確認は勿論「OK」です。
では、トップページを変更します。
トップページとは、
ブラウザで呼び出したときに最初に表示されるページとでも覚えて置いてください。
トップページは、一部の例外を除き「index.html」の名前と決まっています。
名前が違うと、ブラウザが戸惑ってしまいますから、この様になっているのでしょうね。
では、ビルダー開始、前回のサイトを開いてください。
前回のトップページが、左上に、下のほうに、
前回の「26_index.html」と今回の「20_index.html」が並んでいるはず。
アイコンの見方は、上段がタイトル、下段がファイル名なんです、
下段のファイル名で確認してください。
「20_index.html」アイコンをダブルクリックして、表示してください。
続いて、ファイルメニューから、
「名前を付けて保存」、「index.html」に名前を変更して、「保存」、勿論上書き保存です。
トップページが変わりました、ブラウザで確認してみると良いでしょう。 |
|
2.ページの説明 |
|
ページの大きさは、1000×1200、
高さ(height、ヘイト)1000px(ピクセル)、横幅(width、ワイズ)1200px(ピクセル)です。
カタカナ表記は、単語を覚え易くする為の小生なりの読み方、
今後は、総て、英単語表記にします。
全体を3分割してますので、其の説明をしておきます。
上段がheader(ヘッダー)、サイズは1000px×55pxです。
左側が、左Paine(ペイン)、サイズは200px×1145pxです。
右側が、本文、サイズは800px×1145pxです。
この表記方法に馴れてください、今後は、この表記方法が入り混じる事になるでしょう。
各部の説明、
ヘッダーは、バナー表示用の左側部分と、タイトル表示用の右部分に分かれていて、
用途は其の名のとおり、バナー&タイトル表示用です。
左ペインは、現状はメニューを表示していますが、
お知らせや広告等、本文とは別の内容を表示する為のスペース。
右の本文は、コンテンツを表示します。横幅800px、結構大きな画像も表示できます。 |
|
3.ページの改造其の1 |
|
3つに分かれてますので、先ずは、ヘッダーから、改造していきます。
左のバナー、右のタイトル共に、ビルダーで作成できます。
では、作成方法を
ビルダーの左側「ナビメニュー」から、「ロゴ(飾り文字)の挿入」をクリック、
文字の入力と外枠をっ設定します。
こんな感じ、色々試してみて・・・
完了すると、何処かに張り付きますが、何処に張り付いてもいいのです。 |
|
では、合成画像の編集
画像を右クリック、合成画像の編集
先ずは、背景、イメージを選択してから、
縦横比の保持のチェックを外し、幅200px、高さ55px
続いて、ロゴ、こちらは、背景イメージに合うように、マウスで調整しましょう。
終わりましたら、再び右クリックから、切り取り、所定の場所に貼り付けですね。 |
|
今度は、タイトルですね。
タイトルだけは、見かけ上では、たった一つのレイアウト枠に収めて有ります。
最上段に置くレイアウト枠は、問題を起こさないんです。
これも、先ほどのバナーと作り方は同じ、でも背景は無い方が良いでしょうか?
好みの問題なんですが。
最後に、ヘッダーの最も右、ここは無くても良いし、
バナーをもう1つ置いてみるのも良いでしょう。
お好みで、後から、バランス調整すれば良いでしょう。 |
|
4.ページの改造其の2 |
|
左ペインは、将来的には、アフェリエイト広告や、
掲示板などを表示すれば良いのですが、
当座は、文字などを一度総て消去し、アニメーション等、適当に入れておいてください。
ナビメニューの上から4つ目「画像の挿入」→「素材集から」→「アニメーション」から
適当に追加してみて下さい。
続いて、本文の部分
上段はサイトの照会文を書き込みます。
コンテンツの紹介や、何の為のホームページなのか、何方に見せる為なのか、
簡単な照会文を書き込んでください。
初期は画像も挿入して有ります、これは、特殊文字を使うと正常に再現できない方のために、
文字を画像に変換したもの。
何かの画像処理ソフトで、「PNG」を作れば、実現可能、
ソフトは、「彩彩畑」「Paint.NET」がお勧め。
小生は「GIMP」を含めて3種類を使い分けています、
総てフリーソフトで、大変便利なソフトです。
照会文の例 |
「私の旅行記録・旅の思い出写真集」
私の旅行記 私旅行と写真が趣味なんです、一人で何処にでも出かけて、
写真を沢山写してくるんです。
旅行記と写真を紹介して、楽しんで頂きたいと、このサイトを立ち上げました。
時間の許す範囲で結構です、ゆっくり私の旅行記と写真集を楽しんで行って下さい。」 |
|
この場合、「旅行」と「写真」の字句を多用するのが、ベター、
Google検索などでかかりやすくなります。
それから、「私」の部分はご自身の名前「ゆうこ」等やニックネームを使用するとよりベター
ここまでで、初級講座第1回終了です。
|
|
|
|
|
ここまでで、こんな感じ、如何ですか?
次回はページを増やしたり、タイトルを変更してみたり、
いよいよホームページの形が整っていきます。
|