前回は、学内の情報系Ｗｅｂサーバーに、皆さんのＷｅｂサイト(Webページ）を、AZUKIとfffpを使って作りました。
今回は、WISWIGで編集できるWebページ作成･サイト管理ソフトDreamweaverを紹介します。３コマ目に筆記試験を行います。
このソフトの概要については、起動してのヘルプから、「ようこそ」-新機能、ガイドツアー、チュートリアル、レッスンなどで見ることができる。これらのほかに、Webでも以下のサイトがある。Dreamweaver 4 の機能などを参照のこと。Macromedia Dreamweaver 4 の機能性は、 Adobe GoLive 5 および Microsoft FrontPage 2000 との機能比較表がある。
このソフトの学習法については、ガイドツアーを見て、「ようこそ」の「チュートリアル」を一通りやってみる。それから、必要に応じて「レッスン」を学習するとよい。
(注) コードウィンドウで、htmlソースが表示されないとき：フォントの指定を「MS明朝」に変えること。メニューの「編集」-「環境設定」をクリックして、環境設定のダイアログボックスを出す。そこで「カテゴリ」の「フォント/エンコーディング」をクリックする。その右にある３つのフォントの窓で、右の▼ボタンをクリックして、「MS明朝」選択する。
前回には、簡単に触れていたが、今回、さらに補足する。以下の内容は、境祐司著、速習WebデザインDREAMWEAVER、技術評論社刊、2001.7.1、pp,17-23を参照し、引用した。
HTML４からは、構造と視覚的表現を分離する。つまり、論理構造の記述はHTML、見栄え（レイアウト、デザイン-カラー文字のサイズなど）は、スタイルシートCSS( Cascading Style Sheet)という使い方を徹底する方針になっている。このやりかたでは、それぞれの端末用に各々Webページを作るのではなく、コンテンツ（HTML）は一つ、あとは、各デバイスに合わせてスタイルシートを記述する方法が推奨されている。構造と視覚的表現を分離する目的は、このアクセシビリティにある。（アクセシビリティ：どんな環境からも等しく情報にアクセスできること。障害者のために、音声読上げ用とか点字ディスプレイ用のスタイルシートなど。）
制作工程は、大まかに下の４つに分けられる。 １）プランニング（企画、仕様決め） ２）プレゼンテーション(プロトタイプ作成） ３）デザインワーク(制作、Webページを構成するエレメント-グラフィックや画像,プログラムなど-の制作も） ４）デリバリー（テスト・デバッグ、公開）
Webサイトのプランニングワークで,Webサイトの提供内容を、他人が理解できるように分かりやすく表現するためには、まず「アウトライン」（概要、あらまし）を作成する必要がある。最初にアウトラインを作成して、Webサイトの全体像を把握しながら、細部のアイデアを考えていく。アウトラインを作成しておくと、頭の中の情報や発想が視覚化され、見えにくかった部分も明確になってくる。
アウトラインは、一般的に階層構造化されたプロットの形式で書かれる。 それに番号を付けると、以下のようになる。 １． ２． ２．１ ２．２ ３． ３．１ ３．１．１ ３．１．２
(注）この番号体系は、篠田義明著「コミュニケーション技術」（中公新書）の６章にある。この本の抜き書き(学内のみ）である。小生は、Ｃ言語プログラムの処理手順の日本語での記述に、これを推奨している。
アウトラインがまとまったら、仕様書を作成する。まず、ページ仕様について，考える。１ページにどのくらいの情報量を盛り込むのか、トップページと項目ページの仕様をまとめる
○トップページ ・タイトル ・キャッチコピー ・目次 ・インフォメーション ・コピーライト ○項目ページ ・タイトル ・見出し ・内容 ・共通インターフェイス ・コピーライト ○閲覧環境を決める ・対象デバイス ・対象ブラウザとそのバージョン
「ドキュメント」ウィンドウ デザインビュー、コードビュー、その両方を表示する分割ビューの切替えができる。 「プロパティ」インスペクタ オブジェクトパネルなどの各種パネル、 「サイト」ウィンドウ Webページを作成する前に「サイトの定義」を行って、ローカルルートフォルダを設定する。 「ヘルプ」を参照しよう。 ○基本操作 「ファイルを開く・保存する」 「ドキュメント」ウィンドウを使う デザインビュー、コードビュー、その両方を表示する分割ビューの切替えができる。 「不可視エレメント」（HTMLタグで、ブラウザに直接表示されないもの）をデザインビューで編集できる。 「プロパティ」インスペクタを使う オブジェクトパネルなどの各種パネルを使う。
ホームに作っているWeb用フォルダを「ローカルルートフォルダ」として指定する。
指定したサイトの構成を確認する。
サイトウィンドウで、ファイルを開いたり、ファイルの移動、ファイル名の変更、ファイル削除、新規作成などができる。このとき、リンク指定も自動的に修正される。(従って、デスクトップで直接に編集しないこと。すべて、手作業になる。）
サイトの定義で編集をクリックし、リモート情報のアクセスをｆｔｐにすると、ホストの設定ができる。つぎにリモートホストに接続をクリックして、Webサーバとの転送(全体や個別のファイル）ができる。詳細はヘルプを参照のこと。
今日は,前回作った皆さんのトップページと自己紹介ページ、これまでのこの授業のまとめのページを、Dreamweaverを使い、更新してみてください。そして、今日のページを新規に作って追加すること。なお、実習時間が少ないので、ftp機能については，Dreamweaverでの設定/接続/転送でなく、ffftpを使ってもよい。
まず、「サイトの定義」(「新規作成」）から始まりです。 次に、定義した「サイト」ウィンドウを開きます。 そこで、目的のアイコンをダブルクリックしてフィアルを開きます。 「コード」ウィンドウで入力し、保存(Ctrl+S)します。 分割表示した「デザイン」ウィンドウでも操作できます。