2009年11月
タグの種類
タグには、様々な種類がありますが、当サイトでは、ＤＲＥＡＭＷＥＡＶＥＲも用いてホームページ制作をしますので、ここでは基本的なタグをご紹介します。
まず、ＨＴＭＬファイルを作る為のタグ
このタグは必ず必要になりまして、<html>で始まり、</html>で終わるようにします。
<html> </html>
タイトルにホームページ名を入れるタグ
<title> </title>
ホームページに内容を表示する為のタグ
<body> </body>
テキストを改行する
<br>
見出しを作る（h1,h2,h3,h4,h5,h6とありまして、h1が一番文字が大きく表示され、h6が一番小さく表示されます）
<h1> </h1>
バナーや画像を挿入させる為のタグ
<img src>="半角英数字のファイル名">
テキストに別のページへリンクさせる為のタグ
<a href>="リンク先のファイル名もしくはＵＲＬ"> </a>
テキストに色を付ける為のタグ
<font color="色番号を入れて頂きます"> </font>
テキストの大きさを変えるタグ
テキストのサイズは、１～７までありまして、１が一番小さく、７が一番大きくなります。
<font size="1～7の数字を入れて下さい"></font>
ページの背景に色を付ける為のタグ
<body bgcolor>="色番号を入れて頂きます">
テーブル（表）を入れる為のタグ
①テーブル
<table> </table>
②テーブルの中に入るセル（行を構成）のタグ
<tr> </tr>
③セルの中に入れるデータ（文章、画像）
<td> </td>
トップページを作成（新規作成・保存）
DREAMWEAVERを開いて頂き、上にある「ファイル」タブを押して頂き、「新規作成」を押して頂きます。
HTMLページの編集① （デザインビュー・コードビュー）
新規のHTMLページを開きましたら、編集方法を選びます。「コード」で編集するか「デザイン」で編集するか、それか上部にコードを表示し、下部にデザインで表示する「分割」のいずれかを選びます。
ここでは、両方とも見れる「分割」を選びましょう。
基本的には、下部分の「デザイン」の編集で作業を行います。
例えば、「デザイン」編集部分に、「大自然を紹介するアラスカのホームページ」と書くとします。
そうしますと、自動的に上部の「コード」部分にHTMLが書かれていきます。
HTMLページの編集② （テーブルの作成）
HTMLの編集は、「テーブル」を使うことによって、文章を入れたい場所や画像を入れたい場所を作ります。それでは、「テーブル」を作ってみましょう。
まず、上部タブ部分の「挿入」を押して頂き、その中の「テーブル」を選んで頂きます。
「テーブル」を選びますと、「テーブル」のウィンドウが開きますので、「行」と「列」を何行、何列づつ入れるか決めて頂き、テーブルの大きさを決めて頂きます。
ここでは、練習として、「行」を「１」、「列」を「１」、「テーブルの幅」を400にして、単位を「ピクセル」にして頂き、「OK」を押して頂きます。
さいとについて。
こんにちわ。メール用のパソコンがなかったので、こちらから失礼いたします。
内容ですが、しっかり考えて作ってください。
初めてホームページを作る人が見てわかるように、しっかり考えましょう。
木を見て森を見ず 的な内容では誰もわかりません。
まず、どうやってホームページが出来上がり、それをどうして見ることができるのか？
ローカルにフォルダも作らずに、どうしていきなり作業が始められるのか？
など、実際に始めてホームページを作る人のことを考えていません。
また、初めてホームページを作るのであれば、一緒にこんなものを作ります。的な内容が良いのではないでしょうか。事務所によい書籍があったと思うので、参考に。
ソフトウェアの使い方を解説するのであれば、タイトルが異なります。
ドリームウィーバーの使い方。とか、ファイヤーワークスの使い方。とかでしょう。（もちろん、基本的な解説は必要ですが）
何をするかもわからず、いきなり、テーブルを作り始めても、初めての人は何がなんだかわかりません。
以上再確認して改良してください。
見てもらうものを作らなければ、作る意味がなくなります。
ホームページ保存用フォルダの作成
ホームページを作るにあたって、保存するフォルダーを予め作成しておきます。このフォルダーと同じ内容をインターネットのサイト（ホームページデータをおいておく場所）に転送します。
※インターネットサイトに転送したくないデータは間違って転送してしまう場合がありますので、置かない方が良いでしょう。
また、フォルダー名は、必ず半角英数文字で付けましょう。ここでは「アラスカ」のホームページをサンプルとして作成するので、フォルダー名を「alaska」にします。
また、素材やHTMLページが増えると分りにくいので、画像などは、「alaska」フォルダーの中に「image」フォルダーを作って画像とHTMLファイルを分けましょう。
ローカルサイトとリモートサイトの定義
DREAMWEAVERでホームページを作成する場合、ローカルサイトとリモートサイトを指定して、サイトの定義を行います。
ローカルサイトとは、自分のパソコン内に予め作成した画像やHTMLデータが入るフォルダーです。
※ここでは、STEP 3 で作成した「alaska」フォルダーになります。
リモートサイトとは、契約しているプロバイダー（レンタルサーバー）などのホームページをインターネット上においておく場所になります。
DREAMWEAVER画面の上の「サイト」メニューから「新規サイト」を選んで頂きますと、サイト定義のウィンドーが開きます。
①
②
③
④
⑤
⑥
サイトの定義が完了しますと、画面上右側にありますパネルからファイルを選んで頂き、ローカルフォルダーの中身とリモートフォルダーの中身が見れるようになります。
ドリームウィーバー画面の説明
挿入バー ・・・ 写真や図、テーブルなどを挿入する時に使います。ツールバー ・・・画面の表示、ファイル管理やプレビューをする時に使います。
ページタイトル ・・・ページのタイトルを入力します。
コードビュー ・・・HTMLコードで編集する場合に使います。
ドキュメントウィンドー ・・・文章を入れたり、画像を入れたり、HTMLを書かずに簡単にHTMLデータを作れます。
プロパティーインスペクタ ・・・ドキュメントウィンドーで編集している時に、文字大きさ、色、行間、リンクなどの指定を行えます。
各種パネル ・・・主に使うのが、ファイルになりまして、ローカルサイトやリモートサイトの表示、またローカルからリモートへの転送や、リモートからローカルへのダウンロードができます。
トップページで使う素材の紹介と完成図
サンプルホームページのトップページで使う画像は、一番上にくるバナーが１つと、ページにリンクするボタンが２つになります。
トップページバナーの作成
まず、幅148×縦186 pixelの写真を4枚、予め「image」フォルダーとは別の場所に保存し用意します。サイズが合わない場合は、縦が186pixelであれば、問題ございません。
（画像サイズの変更は、当サイト「100_画像編集FIREWORKS」の中の「画像（写真）の大きさの変更」を参照ください。）
①上のメニューバーの「ファイル」から「新規作成」選んで頂きます。
②次に下記ウィンドーが開きますので、まず、横を800pixel、縦を200pixelにして頂きます。そして、キャンパスカラーを「カスタムカラー」にチェックを入れ、色のボックスをクリックし「黒」を選択して頂きます。最後に「OK」を押して下さい。
③新規ファイルが開きましたら、上のメニューバーの「ファイル」から「読み込み」選んで頂きます。
ファイル選択画面が出てきますので、予め用意（保存）しておきました、写真データを選択して開いて頂きます。
※同じ手順で4枚の写真を開きます。
※また読み込みの際に写真を選び「コントロール」キーを押しますと、何枚か同時に開くことができます。
④画像（写真）が4つ開きましたら、左のツールボックスの「選択ツール」を押して頂き、写真をマウスで配置します。
⑤次はバナーにタイトル文字を入れます。まずは、ツールボックスの「テキストツール」を選択し、バナー上で一度、マウスを左クリックします。次に使いたいフォントの種類を「プロパティ」から選び、入れたい文字を入力します。入力後、必ず「選択ツール」を押して入力した文字を押してから、文字の大きさの変更、色の変更、フォントを再度変更して下さい。「選択ツール」で文字を選択しないと、反映されませんので、ご注意ください。
※また入力した文字の移動も、「選択ツール」が選択されてないとできませんのでご注意ください。
⑥最後にメニューバーの「ファイル」から「書き出しのプレビュー」を押して頂きますと、「書き出しのプレビュー」のウィンドーが開きますので、「JPEG」を選択して頂き、「書き出し」を押します。
「書き出し」を押しますと、書き出し先のフォルダーの選択が出てきますので、予め作成しておいた、ホームページ用のフォルダー「alaska」の中に入っている「image」フォルダーを選択し保存します。
⑦最後に、予め作ったホームページ用フォルダー「alaska」とは別に「alaska_fireworks」みたいな名前にフォルダーをつくり、FIREWORKSのファイルを保存しておくと、再度編集する際に大変便利です。
