|
制作例を見る
|
|
|
 |
|
 |
|
 |
やさしい作成講座（その１）
|
|
 |
 |
 |
 |
|
テンプレートを利用してホームページを作ってみよう！
ここでは、初めてホームページを作ろうとチャレンジされる方のために開設した講座です。
題材のテンプレートをどのように編集し、でき上がったページをどのようにして公開するのか、基礎の基礎から誰でも理解できるようにとても分かりやすく説明してあります。
実際に公開するまで一緒に頑張って作って見ましょう。 |
| 最初に準備して置くもの |
サーバーとホームページ開設の契約をしてください。 |
（１）サーバーと契約した時のセットアップ情報
ホームページアドレス（例：http://www.###.com)
ＦＴＰホスト（例：ftp123.abc.jp)
ＦＴＰユーザ（例：###.jp-###)
ＦＴＰパスワード（例：AbcEfg)
転送フォルダ（例：/xyz/)
以上の5項目。転送フォルダについてはサーバーによって指定しているものと指定しない場合があります。
指定しない場合は自分で自由にフォルダ名を決めて転送できる場合があります。
詳しくは、契約先のサーバーにお問い合わせください。
（２）ホームページ編集ソフトのインストール
編集できればどのようなソフトでも結構です。ちなみに当教室ではホームページ・ビルダーを使用して説明しております。
ご使用のソフトの使い方については当教室においてあえて解説しておりません。ご自分で勉強されてマスターしてください。
教則本やＤＶＤによる解説を参考にされると理解が早まります。
専用フォルダを作りましょう。
| ホームページの専用フォルダをつくりましょう |
実際には自分の好きなファイル名でよろしいです。 |
アドバイス：デスクトップ上にマウスを右クリック「新規作成(W)」→「フォルダ(F)」を左クリックして「新しいフォルダ」を作ります。
再び右クリックして「名前の変更(M)」を選択しファイルネームを変更します。
ここでは「お店の紹介」と言うフォルダの名前をつけました。このフォルダがこれから作る専用フォルダになります。ホームページの作成に必要な総てのデータはこの中に格納（ファイリング）します。
「お店の紹介」のフォルダに
テンプレートファイルをコピー |
原本はそのまま保存しておきます。 |
アドバイス：テンプレートファイルを開くとＨＴＭＬその他があります。マウスで全部を「コピー」し新しく作ったフォルダ「お店の紹介」を右クリックで開き、白紙の中に「貼り付け」を選択しコピーを完了させます。次の画像はコピー完了の例です。
| 教材のテンプレートを開いて見ましょう |
テンプレートの中にはindex.htmlと書いてあるファイルもあります。 |
アドバイス：「お店の紹介」のフォルダの中のＨＴＭＬのファイルをクリックするとindexファイルがあります。これを右クリックしてください。
| ホームページ・ビルダー##で編集を左クリック |
##は使用しているソフトのバージョンＮＯ．９とか１０が表示されます。 |
アドバイス：ここではホームページ・ビルダー１０のみで解説いたします。
これからトップページの編集に入ります。
| ページの編集画面が表示される |
このファイルがトップページになります。 |
アドバイス→下のような画面が開けましたか？少し時間がかかりましたね。前もって編集ソフトを立ち上げて最小化にした状態で行うとかなり早くなります。プレビューをクリックすると実際にインターネット上で見たものと同じ状態の画面が見られます。
早速く編集に取りかかりましょう。
| お店の名前をかえましょう |
Ｙｏｕｒ Ｃｏｍｐａｎｙ Ｎａｍｅと書かれているところが新しい「お店の名前」にかわります。 |
Ｙｏｕｒ Ｃｏｍｐａｎｙ ＮａｍｅのＯの字の上にカーソルを当ててるとＹとＯの間にこの字の属性を認識して同じ字体になります。キーボードのＢａｃｋ ＳｐａｃｅでＹを消し、その他の文字はＤｅｌｅｔｅで消して新しい文字を記入します。（Ｙの字の上では属性を認識しない場合があります。指定した属性が見えないからです）
| 店名を「青空スポーツ・ショップ」としましょう。 |
字体は「書式」を使って自由にかえられます。ロゴも入れられます |
書き換えた直後の画像です。
アドバイス：プレビューして見ましょう。下の画像のようになりましたか？同じであればまずまずですね。字体、サイズ、色なども後で全体を見ながら検討しましょう。
| カテゴリを作成しましょう |
ＳＥＡＲＣＨと書かれたタグとその上のインプットタグを削除します |
黒いセルにカテゴリと記入します。同じ色だから何も見えません。
文字の色を変えます。
「書式」→「文字色」→「白」を選択します。
文字を中央揃えに修正します。セルを「右クリック」→「属性の変更」→「中央揃い」にし「ＯＫ」をクリックします。次の画像は属性を変えている説明画像です。
完成した画像です。
文字を消して置こう。Ｓｕｂ Ｌｉｎｋの上にカーソルを滑らせて選択します。下図のように色が変わった文字が選択されている範囲になります。
Delete Keyで削除します。
「サッカー用品」と書き直そう
同じ要領で２番目のカテゴリを野球用品、次はテニス用品、ゴルフ用品、バレー用品、卓球用品、スキー用品と文字を入れ替えて、残りは総て削除します。下の画像のようになります。
| リンクボタンを編集しましょう |
Ｈｏｍｅその他の文字を左から順に削除し、書き換えていきます。 |
ボタンの変更、Ｈｏｍｅをホームに書き換えよう。先ほどカテゴリを書き換えた要領で書き直します。
修正した画像です。
この要領で画像のように総て書き換えていきます。ボタンの名称は今回は例として決めてあります。実際はご自分でお好きなように決めると良いでしょう。余る場合は削除、足りない場合はどれでもいいですから「コピー」＆「貼り付け」して増やして修正します。
| コンテンツを編集しましょう |
画像もあるので先に用意しましょう。 |
コンテンツは前持ってどのようにするか決めておく必要があります。
ワープロ感覚で書き込みます。不要な文章は先ほど習った要領で先に削除します。
この教室では画像のように書いて見ました。
画像を入れ替えましょう。
入れ替える画像をダブリクリックしてサイズを知りましょう。幅３１×高さ３１が判りました。ＯＫボタンで終了します。
画像を削除をします。写真を「クリック」→「Ｄｅｌｒｔｅ」を押します。
下の説明画像のように３箇所とも消しましょう。
新しい画像を入れましょう。今回はホームページ・ビルダーの中に入っている素材集から３種選びましょう。「画像ファイルの挿入」→「素材集から」→「イラスト」の中から下画像の３つを選択しました。画像は大きいので説明用に６２×６２に縮小してあります。（挿入画像の２倍）
選択した画像は「新規作成ページ」をつくりそこにコピーしておきます。
  
「コピー」＆「貼り付け」で挿入しましょう。
| 挨拶文を編集しましょう |
文章はメモ帳に予め書いておいてコピー＆ペーストする方法もあります。 |
ここは、挨拶およびお店の案内文を入れて見ましょう。
編集前の文章を削除し、新たに書き込んでいきます。書き込んだら「プレビュー」して文字の大きさや文章の配列を考えながら修正を加えます。次の画像は店長の挨拶文として編集した画像です。
| バック画像の入れ換えをしましょう |
写真はサイズを整えてフォルダに保存しておくと便利です。コピー＆ペーストで挿入できます。 |
この文章の背後にある画像を入れ替えましょう。まず画像のサイズを知ろう。対象の画像を「ダブリクリリック」→サイズが３６８×１９４になっているのが判りました。
挿入写真を選択し同じサイズに編集しましょう。ここではホームページ・ビルダーの画像データを利用して編集します。その方法を次に説明します。
（１）「ファイル（Ｆ）」→「標準モードで新規作成（Ｂ）」→白紙画面になります。
（２）「画像ファイルの挿入」→「素材集から」→「写真」を選びこの中から選択します。
ご自分の写真ファイルがあれば、そこから選ぶと良いでしょう。
ここでは、次の画像を選択しました。
（サイズは３６８×１９４に調整してあります）
コピー＆貼り付けで挿入した状態です。
（プレビューの部分画面）
| 商品の紹介画像を作りましょう。 |
この場合も文章や写真はサイズを整えてフォルダに保存しておくと便利です。コピー＆ペーストで挿入できます。 |
かなりでき上がってきましたね。次は下の画像の部分を編集しましょう。
まずここの画像を総て削除します。次に表を挿入します。
「表（Ａ）」→「表の挿入（Ｂ）」で次の画像が表示されます。行数と列数の数値を変えます。
表作成時の初期状態です。
画像はカーソルが１番目で点滅しています。そのカーソルを２、４、６，８，１０列のみ幅と高さを変更します。上の行に商品画像、下の行にその説明を入れます。１、３、５、７，９列の幅は右と左の間隔を保つために使います。その幅は後で決めましょう。変更したのが次の画像です。
上の画像の状態で「表」をクリックします。下画像は表示された属性が変更できます。
総てのマスの属性を設定します。すると次のような表になります。
では画像を入れます。その後に説明文を書き込んでいきます。画像はホームページ・ビルダーの素材集から応用します。要領は先ほど勉強した手順と同じです。画像にサイズに注意してはめ込みましょう。
これが完成画像です。
| タブ色で表を引き締めるテクニツクを学びましょう。 |
色使いは大変難しいものです。いろいろ試みてデザインして見てください。
|
この辺りでどうなっているのか全体をプレビューして見ましょう。
（ここをクリック）
もう少しで完成ですね。ではもう少し画像を引き締める編集を試みて見ましょう。
画像と画像の間隔に色を付けて見ましょう。
タブ１～１１に色を付けます。２行ありますね。１行目と２行目は色分けして見ましょう。
方法は次の手順で行います。
属性の変更モードになります。
この操作を繰り返し行い色を変えました。次の画像が見本です。色については自分の好みで自由に選んでください。無地のスタイルのものと比較して見てください。良くなりましたね。また幅も広くしたいときは色を変えるとき一緒に変えられます。ここでは１０ピクセルにしました。
修正画像もう一度全体をプレビューして見ましょう。
（ここをクリック）
いよトップページのレイアウトが終盤になりました。
| バナー広告を入れて見ましょう。 |
バナーには画像とＨＴＨＬがあります。後者はまたの機会に説明します。ここでは画像の取り込み方法を説明します。 |
今度はこの下にバナー広告を入れて見ましょう。先ほどと同じく表を作成しその中にバナーを挿入して見ます。
４バナーを計画すると表の行は１行、列は４＋５＝９行にします。
幅、高さを１００×８０ピクセルに設定し、間隔の幅を１５ピクセルにしましょう。
実際にバナーを挿入して見ましょう。例として１箇所のみとします。（バナーはダミーです）
入れる方法は、自分のパソコンにファイルがあることを前提にします。
（１）バナーを挿入する場所にカーソルを当てて点滅しているのを確認してください。
「挿入（Ｉ）」→「画像ファイル（Ｉ）」→「ファイルから（Ｆ）」を選択するとファイルの格納場所が表示されます。
自分の格納場所へ導いていきます。見つかったらそのファイルをクリックします。これで挿入が完了します。
| 文字の色フォントを変えて見ましょう。 |
制作者の好みによって決まるケースが多いです。センスも問われるところです。慎重に編集しましょう。 |
全体を眺めて見ましょう。見にくい文字やアクセントが欲しい部分が出てきます。次の参考画像のように色を変えて見るのも良いと思いますね。試しにいろいろ変えてみてください。
色の変え方は「対象文字をダブルクリックがマウスでナゾルと文字の色が変わります。この状態で、「書式（Ｏ）」→「フォント（Ｆ）」でフォントの属性がでます。ここで文字の大きさ、太さ、フォント、色などが変えられます。
| フッターの編集をしましょう。 |
般的には英数字で記載されることが多いようです。ここでも慣例に従って英数字にしましょう。 |
最後のフッターにコピーライトを記入します。別の場所にダミーを書いて、字体、大きさを決めて「コピー」＆「ペースト（貼り付け）」しておいて後から色を変えます
平面上の位置は好みで「左寄せ」「中央揃え」「右寄せ」に属性の変更で変えられます。ここでは「中央揃え」にしてあります。
コピーが終了したらダミーの文章は削除しましょう。
| リンク構成を設定しましょう。 |
トップページで総てリンク構成を完成しておかないと、各ページにおいて改めてリンク設定をしなければなりません。この手間はかなりかかります。このポイントを覚えておきましょう。 |
ここでは一例として、「ホーム」と「店舗案内」にリンクする方法を学びます。リンクには「ファイルリンク」・「ＵＲＬリンク」・「メールリンク」などの種類があります。「ホーム」や「店舗案内」はサイト内ですから「ファイルリンク」に該当します。別サイトへリンクする場合はすべて「ＵＲＬリンク」になります。「リンクの挿入」モードで選択できます。
まずホームの上で「ダブリクリック」します。すると色が変わります。
右クリックすると下の画像が表示される。「リンクの挿入」をクリックしましょう。
属性が表示されます。「参照（Ｂ）」でもファイル名が入りますが。ここでは手書きでファイル名を記入します。
必ず英数字の小文字のみ有効で大文字やかな、漢字はエラーになります。
書いたら「ＯＫ」ボタンを押すと完了です。同じように「店舗案内」にリンクさせます。
書いたら「ＯＫ」ボタンを押すと完了です。意外と簡単でしたね。
この方法で総てのリンクを完成させます。ただし前もって各ページのファイル名は決めておきましょう。
どんな出来映えかブラウザで表示して見ましょう。
（ここをクリックすると見られます）
どうですか？まあまあの出来映えですね。
| ページを保存しましょう。 |
ページの作成途中でもこまめに保存する習慣をつけましょう。保存忘れは最悪の”泣き”になります。 |
総ての編集が終わりましね。これからこのページを保存します。（１）「ページの保存」→（２）「上書き保存（Ｓ）」で保存されます。ではどこに保存されたのでしょう。このページを作成するときに開いたファイルネームは「index」でしたね。そうですそこに上書きされるのです。改めてこのページを開くときは同じ手順で「index」を右クリックしホームページ・ビルダーで開くを選べばこのページが再び開けます。編集が終わったら必ず「保存」を実行してパソコンを閉じてください。
以上でトップページは終了です。第２章はＳＵＢページ（２ページ）の作成方法です。
|
 |
 |
 |
 |
|
|
 |
|
|
 |
やさしい作成講座