宅新築・住宅リフォームなど、工事費用に疑問を持つ人のための専門サイトホームページビルダーを用いてホームページ作成

TOP
WORKS
見積・積算とは
新築・リフォームの見積もり
見積もり査定
大規模修繕工事
建築うらばなし
関連リンク集
料金について
無料ご相談
概要
特定商取引法に基づく表示

実践!リフォームガイド
リフォームのプロセス
リフォームの必要性
内容検討・情報収集
リフォームの資金計画
リフォームの業者選択
リフォームの見積もり徴収
リフォームの見積もり査定
リフォームの設計決定
リフォームの契約
リフォームの工事日程
リフォームの工事準備
リフォームの工事開始
リフォームの工事チェック
リフォームの工事中対応
リフォームの工事竣工
引越し
工事費用支払い
リフォームの適正価格
リフォーム部位別工事費用
リフォーム成功事例
リフォーム最新情報
リフォーム関連書籍

NET WORK (情報)
目指せ!一級建築士
有限会社のつくり方
写真加工 あれこれ
日常の建築知識
パソコンの便利知識
クエン酸で体質改善
北海道発 ショップ情報

Home Page
ホームページを作ろう
ブログサービス比較
サイドビジネスガイド!
アフィリエイガイド!
アクセスアップへの道



◎超簡単ホームページ作成方法!
【2】 ホームページ作成 (by Homepage Builder)
【2-1】 新規サイトの登録
【2-2】 トップページを作る
【2-3】 サブページを作る

【2-1】 新規サイトの登録
【2-1-1】 サイト用フォルダの作成
これから作ろうとするサイトの保存場所を確保しておきます。
 [スタート]→[すべてのプログラム]→[アクセサリ]
→[エクスプローラ] 
と開くとPCの構成が表示されます。
「マイコンピュータ」をクリックし、(D)ドライブをクリック。
[ファイル]→[新規作成]→[フォルダ] で「新しいフォルダ」ができますので、フォルダ上で右クリック、[名前の変更]で「HOME」等、好きな名前を入力します。
【2-1-2】 新規にトップページを作る準備をする
作成ソフトを起動し、
 メニューバー[サイト]→[サイトの新規作成]
→サイト名を入力する                →[次へ]
「新規にトップページを作成する」を選択    →[次へ]
「トップページのファイル名」の▼をクリック、
「サーバより指定されたトップページファイル名」を選択。
(※通常は index.html 又は、 index.htm)
「トップページの作成先フォルダの指定」
・・・サイトを自分のPCのどこに保存するかの設定・・・
「参照」をクリックし
「ドライブ」の中から
    <d:> を選択し、
「フォルダ」の中から
    <d:¥HOME> を選択し、
「フォルダの作成」→「新規フォルダの作成」 で
”mitumori”等、任意のフォルダ名を入力し   →[OK]
    "d:¥HOME¥mitumori¥” 
と保存先のフォルダが設定される。
「詳細設定」をクリックし、
「画像ファイル」の「参照」をクリック、
「フォルダの作成」で新しいフォルダを作成し、
右クリックで「名前の変更」、” image ” と入力、
→[OK]
    "d:¥HOME¥mitumori¥image”
と画像ファイルの保存先のフォルダが設定される。
→[OK]
「転送設定の選択」
・・・サイトが完成し、アップロードする時に設定します・・・

「後で転送設定をする」を選択し          →[完了]

「トップページ作成画面」が表示される。
作成画面の右上×
クリックし閉じる。
メニューバー「サイト
→「サイトを閉じる」
「ファイル」→「終了」 で作成ソフトを終了する。

【2-2】 新規にトップページを作成する
最初は、
なにをテーマとしたサイト

なんの為のサイトか(サイトの目的)
をある程度決めておいただけですので、サイトの構成、レイアウトやデザイン・盛り込む内容などは、ページの基本の作りかたを覚えた後で決めていった方がサイトを作りやすいと思います。
  ■ホームページ作成の基本
【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】 全体を整える
ロゴや写真、文字などを配置したなら、全体のイメージを整えます。
整えたい表を右クリックし、「属性の変更」を選択。
そこで、枠線の表示・非表示、背景の色や画像などを設定します。
【2-3】 サブページを作成する
トップページができたなら、そこからリンクさせる、商品の詳細情報などのページを作ります。
「新規作成」ツールバーをクリックするか、
「ファイル」→「新規作成」とし、新規編集画面を表示させます。
作り方はトップページとまったく同じですが、トップページと同じイメージで作成したいのであれば、トップページをまるごとコピーして加工・編集していくと簡単です。

メニューバー「ウィンドウ」をクリックし、「index.htm」ファイルをクリック、「編集」→「すべてを選択」し、右クリックより「コピー」を選び、
メニューバー「ウィンドウ」をクリックし、「(新規ファイル名).htm」ファイルをクリック、右クリックより「貼り付け」でindexページがまるごと新規ページにコピーされます。
あとはこれを加工・編集していけば良いわけです。

サブページが完成したなら、「編集」→「ページのプロパティー」を選択。「ページ情報」のページタイトルに好きなタイトルを入力します。
これは、ウェブ上で表示される、一番上のバーに表示されるページタイトルになります。

最後に「ファイル」→「名前を付けて保存」を選択。
保存場所を選択し、ファイル名(たとえばsub1)を入力、「保存」

ページに写真を挿入していれば、保存ファイル一覧に写真のファイルが表示されますので、ファイル名をクリックし、写真ファイルの保存場所を決めます。
そのまま「OK」とすると、トップページ、サブページと同列で同じフォルダに保存されますが、そのフォルダの下に新たにフォルダを作り保存します。
保存場所の「参照」をクリックし、「フォルダの作成」をクリック、「image」等(任意)と入力し→「
OK」
保存ファイル一覧画面でOK」をクリックして、サブページが保存されます。
←back next→