|
【2-2-1】 |
●ホームページビルダーを起動する
オープニングダイアログが開いたなら、「キャンセル」をクリックして閉じる。 |
|
【2-2-2】 |
●サイトを開く
メニュー「サイト」→「サイトを開く」→作成したサイト名を選択し、「開く」をクリック、サイトが開いたので、「閉じる」をクリックし、[サイト一覧]を閉じる。 |
|
【2-2-3】 |
●編集画面を開く
サイト/素材ビュー及び、ページ編集画面が表示されていることを確認し、サイト/素材ビューの中から、「サイト」→「フォルダ」を選択し、「index.htm]を右クリック、「編集」をクリックする。 |
|
【2-2-4】 |
●配置用スペースを作る
無地の編集画面が開き、これがこれからサイトを作る編集領域となります。
|
いわゆるExcelなどでいうところの”セル”の役目をする「表」をまず配置する。
これを使わずに文字などを配置しようとすると、縦型の単調なデザインになってしまいます。
|
1) |
外枠を作る |
|
メニューバー「表」→「表の挿入」とクリックし、
(同様の作業は対応したツールバーをクリックすることでもできます。今後の他の作業も同様です。)
行数・列数を共に1として →[OK] |
|
四角の囲いができるので、これの右下角をクリックしたまま画面の右下に引っ張っていき、ある程度の大きさにする。
ここで表(セル)の大きさですが、表の高さについては、そのページの内容に左右されるだけですので特に問題は無いのですが、表の幅は、見ているPCの画面サイズに左右されるので、(人それぞれ見ている環境が異なるので)、ある程度は決めておいたほうが良いです。
表の中で右クリックし、一番下のメニュー「属性の変更」をクリックします。
「セル」をクリックするとセルの幅を指定することができます。
今では、通常、表示解像度 「1024×768ドット」での表示が一般的だと思われます。
「お気に入り」を表示させて見る場合、ノートPCで見る場合等の”見る側”の環境の違いを考慮し、セルの幅 =700ピクセルに設定します。 |
|
ピクセル :ディスプレイ上に表示される画像や文字の構成単位。ディスプレイ上での表示の有無、もしくは色や輝度を制御できる最小単位。
ドット :ピクセルと同義で使われるが、ドットは色や色深度は含まない「点」を意味する。 | |
2) |
間仕切を作る |
|
外枠ができたなら、サイトのレイアウトを考えながら、外枠の中に「表の挿入」ウィンドウで「行数」と「列数」を指定し、配置用スペースを作っていきます。 |
|
外枠と同じ方法で、メニューバー「表」→「表の挿入」とクリックし、行数・列数を共に2として →[OK] |
|
”2×2”のセルができますので、外枠と同様に任意の大きさに拡大させます。
・1つのセルを分割し、2つにすること
・2つのセルを結合し、1つにすること
・行を追加すること
・列を追加すること
などが自由にできますので、想定したレイアウトに合わせて、セルの大きさと配置を設定します。
順序は前後しますが、この様な感じで配置用スペースの作りかたが解れば、トップページとしての全体レイアウトの概略を決めます。 |
|
|
【2-2-5】 |
●全体のレイアウトを考える
トップページのレイアウトを考えます。
ビルダーからは少し離れ、トップページ全体のレイアウトをスケッチ程度で決めていきます。
トップページに入れる要素としては、次の様なものがあります。
|
・タイトルもしくはタイトルロゴ
・サイトイメージを表す写真画像
・トピックスや新着情報
・お店やネットショップであれば、商品メニュー・商品画像、宣伝分など |
|
これらを、いかに読者にアピールできるかを考えながら、更にページの間仕切を念頭におきながら配置していきます。 |
|
【2-2-6】 |
●間仕切(表)を調整する
レイアウトの概略を作成したなら、それに合わせて間仕切(表)の調整を行います。
行・列の追加、削除、又、分割、結合等で枠組を作り、文字・ロゴ・画像等を配置していきます。
ここで注意すべき点は、一つの表(セル)の中に、左寄せ、中央寄せ等の違う内容のものを配置したい場合、一つの表(セル)を分割させると、一つの幅を変えようとすると、他の境界線も同じに動いてしまいます。
一つの表の中にさらに表を挿入すると、それぞれ単独で設定できますので、「表(セル)の中にさらに表(セル)を配置する」という感覚で作業すると良いでしょう。
|
|
【2-2-7】 |
●ロゴの作成方法
サイト名・店名などをテキスト(文字)による表現ではなく、画像としてデザイン化したものを「ロゴ」といいます。
ホームページビルダーには、ロゴ作成機能が付いていますので、それを利用すると良いです。
「挿入」→「ロゴ」 でロゴ作成ウィンドウが表示されますので、指示に従って入力・選択していくだけです。
編集画面にロゴが挿入されたなら、ロゴをクリックして選択し、右下角をクリックして大きさを調整します。
注意することは、テキストに比べ画像であるため重くなり、表示速度が遅くなるので、使い過ぎないようにすることです。
|
|
【2-2-8】 |
●画像の加工・保存・挿入方法 |
@ |
ホームページで使用できる写真は 「JPEG(ジェイペグ)」
「GIF(ジフ)」形式のみです。
主に写真がJPEG形式、ロゴ・ボタン・イラスト等の画像がGIF形式です。デジカメで撮影した写真は一般的にJPEG形式ですので、そのままでOKです。 |
A |
又、写真の大きさにも2通りあり、いわゆる見た目の大きさと写真の容量(データ量=ファイルサイズ)です。
見た目小さな写真でも容量が大きい写真を使うと、ホームページ自体の使用可能容量を減らしてしまうばかりでなく、表示時間が長くなったり、表示されなかったり、といったことになります。 |
|
|
B |
写真を編集画面に挿入するには、
1)サイト/素材ビューより、「素材」→「フォルダ」を選択し、
My Pictures等に保存した写真ファイルを選択し、「挿入」するか
2)メニューバーの「挿入」→「画像ファイル」→「ファイルから」を選び、写真ファイルを選択し、「開く」で挿入される。 |
|
|
C |
撮影した写真をそのまま保存したものを編集画面に挿入すると極端に大きなものになります。
表・ロゴなどと同様に、右下角をクリックしながら大きさを小さくすることはできますが、それだけでは写真が小さくなっただけで、容量は変わっていません。
次の作業でファイルサイズを小さくすることを忘れずに。
●調整したサイズで画像を保存する
ツールバーの「画像の編集」ボタンをクリックするか
メニューバーの「編集」→「画像の編集」を選択し
「保存時オプション」より「表示サイズで保存」を選択し、
→「OK」
画像の大きさの変更については、ホームページビルダーの
「ウェブアートデザイナー」機能を使う方法や、windowsオプションの「ペイント」を利用する方法、又、「デジカメの達人」や「フォトショップデザイナー」などの市販ソフトやフリーシェアの加工ソフトを利用する方法などがあります。
|
-画像のホームページ上でのファイルサイズ-
写真(小) |
|
3〜4KB |
写真(大) |
|
12KB前後 |
ロゴ |
|
3〜5KB |
ページ全体 |
|
50KB前後 |
|
|
|
-画像の縮小率と大きさ(ピクセル)の関係-
|
|
|
(幅) |
|
(高さ) |
|
10 |
(%) |
|
205 |
× |
154 |
(ピクセル) |
15 |
|
|
307 |
|
230 |
|
20 |
|
|
410 |
|
307 |
|
25 |
|
|
512 |
|
384 |
|
30 |
|
|
614 |
|
461 |
|
35 |
|
|
717 |
|
538 |
|
40 |
|
|
819 |
|
614 |
|
45 |
|
|
922 |
|
691 |
|
50 |
|
|
1024 |
|
768 |
|
|
|
|
|
【2-2-9】 |
●文字を挿入
文字は配置用スペースヘ直接打ち込むか、あらかじめ画像化しておいて挿入するかです。
ただ、SEO対策上、画像化してしまうと、検索ロボットが拾っていかないので、直接打ち込むのが良いでしょう。
文字のデザイン、大きさ、色などの設定方法は、Excelなどとそう変わりはないので、特に難しいことはないと思います。
|
|
【2-2-10】 |
●全体を整える
ロゴや写真、文字などを配置したなら、全体のイメージを整えます。
整えたい表を右クリックし、「属性の変更」を選択。
そこで、枠線の表示・非表示、背景の色や画像などを設定します。 |