ホームページ作成

ホームページに使用されているファイルはHTML形式のテキストで書かれている。
これは命令語　<…>、</…>（タグと終了タグ）を使って記載される。HTML形式のファイルをブラウザというアプリを使って文字や画像が配置されたページを見ることができる。HTML形式のファイルのソースを見るには、「メニュー」の「表示」→「ソース」をクリックすればよい。またはページを「右クリック」「ソースの表示」をクリックすればよい。このHTML形式でファイルを作成すれば高度な編集ができる。しかし、この講座ではホームページ作成ソフトを使って作成するので、HTML形式の知識がなくても作れる。

ホームページ作成ソフトには
　　　ホームページビルダー（初心者～上級者用）
　　　Dream weaver（上級者用）
等がある。
ホームページにはアドレスがある。一例としてhttp://www.○○○.comの形で表す。○○○.comをドメインと言う。おもなドメインとして
　　　○○○.net
　　　○○○.org
　　　○○○.jp
　　　○○○.ne.jp
　　　○○○.ac.jp
　　　○○○.go.jp
等がある。

ホームページをインターネット上に開設するにはホームページのファイルを設置するサーバーが必要である。サーバーの種類としては
　　　プロバイダー
　　　レンタルサーバー
　　　自社サーバー
がある。

本講座ではレンタルサーバーを使う。レンタルサーバーには
　　　Yahoo!ジオシティーズ
　　　FC2ホームページ
　　　livedoorレンタルサーバー
等があり、本講座では「FC2ホームページ」（無料）を使う。
FC2のホームページでは次のようなアドレスを使用する。
　　　http://○○○.web.fc2.com  （○○○の部分をサブドメインと言う）
ホームページの構成としてトップページとサブページがある。 

ホームページを家に例えるとトップページは玄関に、サブーページは各部屋に相当する。トップページ、サブページ相互間の移動を「リンク」と言う。
本講座で作成するホームページは、サイト名：雑貨屋、そのファイル名は：ZAKKAYAとし、次のような構成となる。
 なおトップページのファイル名はサーバーから指定され、殆どの場合拡張子は「index.html」または「index.htm」となる。
ここで拡張子について、エクスプローラーまたはコンピューターを開いた時に、ファイル名に拡張子が付いていない場合がある。
これを表示するにはメニューの「表示」を選択し、「表示/非表示」の中の「ファイル名拡張子」にチェックを入れる。

 
　サイトの新規作成

ホームページ作成に入ります。ホームページビルダーを起動します。ガイドメニューが表示されますが、これは閉じます。ホームページビルダーの画面が表示されます。編集スタイルは３つあります。
　　　「かんたん」スタイル
　　　「スタンダード」スタイル
　　　「エディターズ」スタイル
本講座では「スタンダード」スタイルで編集します。編集スタイルの変更方法はメニューの「表示」→「編集スタイルの切り替え」→「スタンダード」を選択する。

まず、サイトの作成からはじめる。
 編集スタイル「スタンダード」にて、メニューの「サイト」→「サイトの新規作成」をクリックする。
サイト名「雑貨屋」を入力し、「次へ」をクリック。
「新規にトップページを作成する」をクリックし「次へ」。
トップページのファイル名「index.html」を選択して、
これを保存するフォルダーを作成するために「参照」をクリックする。
入力するフォルダーの位置を指定して、「新しいフォルダーの作成」をクリックして、「新しいフォルダー」の文字を「ZAKKAYA」に変更する。

 続いて画像用のフォルダーを、今作成したフォルダー「ZAKKAYA」中に作る。「詳細設定」をクリックする。
画像ファイルの「参照(2)」を選択。「ZAKKAYA」選択、「新規フォルダーの作成」をクリック、「新しいフォルダー」の名前を「image」に変更し、OKをクリックする。
「完了」をクリックする。
次に白紙ページを作成する。「白紙から作成する」をクリック。
「転送設定」を行うかを聞きに来るので「いいえ」を選択。
白紙のページが作成される。
以上でサイトの作成作業が完了する。
サイトが作成出来たか確認する。メニューの「サイト」「サイト一覧」をクリックしてサイトの存在を確かめる。またコンピュータの中にフォルダーとファイルの存在も確認しておく。 

　ページタイトルの設定

ナビバーの「ページの属性」をクリックする。（ナビバーの左端が「サイトを開く」になっている時は「サイトを開く」クリック → サイト名を選択・「開く」をクリック → ファイル名(index.html)をクリックすると次の画面になる。） 
「属性」ダイアログが表示される。ページタイトルに「雑貨屋」を入力してOK
ページタイトルが設定できた。
 

　背景の色付け
「先程と同様「ページの属性」を選択して、「属性」ダイアログを開く。「背景/文字色」タグを選択する。色指定の背景右の▼をクリックして色パレットを表示して希望の色を選択する。または、この下の「その他」をクリックして上記以外の色を選択することが出来る。色を選択すれば「OK」ボタンをクリック。
背景色を「解除」するには「リセット」をクリックして「OK」ボタンをクリック。

模様の付いた背景にするには、ナビメニューの「壁紙の挿入」→「素材集から」背景の模様を選択する。この講座では「y6b」を採用する。

 　ページの上書き保存

「上書き保存」ボタンをクリックする
「素材ファイルをコピーして保存」ダイアログが表示され、ファイル名と、保存場所を確認、「上書き時に自動的にファイル名を変更する」にチェックを入れ、保存をクリックする。
 

　サイトを閉じる

閉じるボタン「×」をクリック
「サイトを閉じる」をクリック
「すべて閉じますか?」 で「はい」、「保存しますか?」 で「はい」をクリック

 
　サイトを開く

ナビバーの「サイトを開く」をクリックするか、またはメニューの「サイト」 →「サイトを開く」をクリックしてもよい。
 開くサイト名を選択 → 「開く」をクリック
ビジュアルサイトビューが表示され、ページをダブルクリックしてページを開く。

　ページの編集

タイトルロゴ、写真の挿入等のページ編集を行うための文字を入力する。
 
　タイトルロゴの作成

タイトルロゴを作る方法には、ダイレクトに作る方法とロゴを作るソフトを使用して作る方法があるが、ここではダイレクトに作る方法を受講した。
カーソルを「ロゴ作成」位置に置き、ナビメニューの「ロゴ（飾り文字）の挿入」→「ロゴ（飾り文字）」をクリック 
「ロゴの作成」ダイアログ表示される。文字（ここではZAKKAYA）入力、デザインを選択（000t01）、続いて「文字の詳細設定」をクリックする。
「文字サイズ」を30に設定して「次へ」をクリック
「テクスチャ」ボタンを選択、テクスチャの一覧からwall16を選択、「次へ」。
縁取りの種類、ここでは「通常」を選択し「次へ」。
文字の効果で「影」を選択、「影の色」をクリック
ここではグレイを選択してOK 
元に戻り、影の位置を横5、縦5にして「完了」、「完了」。
タイトルロゴが作成された。
ロゴの変更にはロゴを選択して、ナビバーの「ロゴの編集」をクリックするか、或いは右クリックして「ロゴの編集」をクリックして行う方法がある。

　写真・画像の挿入

ページに写真或いは画像を挿入する。ナビメニューの「写真、画像の挿入」をクリックし、「デジカメ写真」を選択。
挿入する画像ファイルを指定する。ここでは「ファイルから」を選択。
「ファイルのある場所」を指定し、「ファイル」を選択、「開く」をクリック。

挿入ファイルが表示された。「次へ」をクリック。
サイズを決める。先ず「大きさを指定」を選択して、「縦横比を保持する」にチェックを入れ、「幅」を700に指定する、高さは自動的に変更される。「次へ」、「次へ」、「次へ」、で画像が挿入される。
続いて写真、画像のトリミングをする。写真・画像を選択し、ナビバーの「画像の調整」クリックして「画像の切り取り」を選択。
「画像の切り取り」ダイアログが表示。「位置とサイズ」の形状の「縦横の比率を固定」のチェックをはずして、幅700、高さ300を設定する。点線で囲まれた四角の部分をドラッグして位置を決めめ、ＯＫをクリック。
写真・画像のトリミングが完了。

　ボタンの作成

リンク先を選択するボタンの作成をします。ボタンの挿入位置にカーソルを置き、ナビメニューの「ロゴの挿入」を選択し、この中の「ボタン」をクリックする。
「ボタンの作成」ダイアログが表示される。文字「トップページ」を入力、ボタンのデザインに「000m05」を選択、文字の大きさ「11」に設定、次に「詳細設定」をクリックする。
「ボタンの詳細設定」ダイアログが表示され、オブジェクト一覧の「ボタン」を選択、「縦横比保持」のチェックを外し、幅140、高さ35と入力、「編集」をクリックする。
形状の選択で「button21」を選び、「次へ」をクリック。

色の選択で、種類に「テクスチャ」、一覧で「wall16」を選択し「完了」をクリック。
戻って次は、オブジェクト一覧の「ロゴ」を選択し、「整列」の「中央揃え」をクリックして「ＯＫ」
ボタンが完成した。上書き保存をしておく。保存場所が「image」かを必ず確認しておく。

「トップページ」のボタンの右側に「商品一覧」、「イベント」、「アクセス」そして「会社概要」の４つのボタンを作成する。
トップページのボタンの右にカーソルをを置き、「トップページ」と同様に、ナビメニューの「ロゴの挿入」を選択し、この中の「ボタン」をクリックする。「ボタンの作成」ダイアログが表示される。文字「商品一覧」を入力、ボタンのデザインは前回の「トップページ」と同様でよいので「前回の設定」を選択する。次に「詳細設定」を選択し、文字のみを変更したのでオブジェクト一覧でロゴを選択して、「整列」、「中央揃え」を選択して「OK」、「完了」で終わり。
残りの「イベント」、「アクセス」そして「会社概要」のボタンは別の作成方法で作る。
「商品一覧」を選択してその位置で「右クリック」して「コピー」をクリックする。
カーソルを「商品一覧」の右に置き、再び「右クリック」して「貼り付け」をクリックする。さらに「貼り付け」をもう２度実施する。
「商品一覧」ボタンが４つできるが、後ろの３つは「イベント」、「アクセス」、「会社概要」と文字を変更して完了となる。文字の変更方法は「商品一覧」で行った要領でする。