第 3 部 第 3 章 Web サイトの作成 3.3.1 WEB ページ作成ソフト Dreamweaver の基本操作 Web ページは HTML CSS という言語で作成されており これらは一般的なテキストエディタで作成できるのが特徴ですが その入 力 編集は時に煩雑なものです そこで それらの入力 編集作業など Web ページの作成を補助するソフトウェアである Dreamweaver の使い方について解説していきます 1. はじめに Adobe Dreamweaver( アドビドリームウィーバー ) は HTML をワープロソフトのように 見た目通りに 編集できるほか コード整形などの支援機能を豊富に兼ね備えています とても便利なソフトウェアですが あくまで 補助 であり HTML の基礎知識が必要 ( 第 2 章参照 ) なほか 多機能であるため最初からすべて使いこなすことは不可能といえます この章では Web ページの作成に必要な 基本的な機能について解説しますので その他の機能については授業の説明等を聞き 各自の必要に応じて学習を進めてください 執筆時点での Dreamweaver のバージョンは 2014.0 6733 です 2. Dreamweaver の起動 Adobe Dreamweaver を起動するには次のように操作します 3. メインウィンドウのみかた Dreamweaver の画面構成は次のようになっています ただし Dreamweaver はユーザーの設定によってレイアウトを自由に変更可能 なため 必ずしも画像のようなレイアウトになっているとは限りません Campus System Guide- 73
ドキュメントウィンドウ には 現在作成している Web ページの内容が表示されます この画面は 左上の コード 分割 デザイ ン のいずれかを押すことで表示方法を切り替えることができます コード ビューは HTML の内容がそのまま表示されます 現在の見栄えがどのようになっているかが分かりにくいですが デザインビューではできない詳細な編集が可能です デザイン ビューは 実際にブラウザーで閲覧する時の状態に近い見栄えで表示されます Microsoft Word 等のワープロソフトと同じような感覚で使用することが出来ます また左側の ライブ ボタンを押している状態では ライブビュー 表示になり より実際の表示に近づきますが 編集できる内容は限られます ( 後述 ) 分割 を選ぶと コードとデザインを同時に表示することが出来ます プロパティインスペクタ には 選択したオブジェクトまたはテキストのプロパティ( 属性 ) が表示され それらの設定を変更できます ここに表示されるものは ドキュメントウィンドウで選択されているものによって異なります 左側に HTML CSS の 2 つのボタンが表示されている時は その 2 種類を切り替えながら使うことが出来ます 前者は HTML に関するプロパティを 後者は CSS に関するプロパティを調整するものです 4. 新しいファイルを作る Web ページは最初に空のまま保存してから書き始めます そうしないと あとでリンクを設定したり画像を挿入したりするときにうまくいかなくなってしまいます ファイルの新規作成および保存を行なうには 次のように操作します 74- Campus System Guide
第 3 部 第 3 章 Web サイトの作成 このとき HTML ファイルの名前の付け方にはいくつかルールがあります ファイル名は半角全角英数字と一部の記号のみです 全角文字を使わないようにしましょう ファイル名の拡張子は本キャンパスでは W3C の勧告どおり *.htm ではなく *.html に統一しています 5. ファイルを開く ファイルを開くには 右の図のように操作します 6. 保存 ファイルを保存するには 右の図のように操作します なお ファイルの編集中に Ctrl キーと S キーを同時押しすることで すばやく保存できます Campus System Guide- 75
3.3.2 デザインビューで入力 1. ページタイトル ページのタイトル ( ブラウザーで開いた際にタイトルバーに表示される部分 ) を設定するには 右の図のタイトル位置に入力します ここに入力した内容は head 要素内 title タグとして書き込まれます 2. 文章の入力 基本的な入力方法はメモ帳 Word など他のソフトと同じですが 改行の仕方が一部異なります [Enter] キーのみで改行すると 段落区切り (p 要素 ) となります [Shift] キーを押しながら [Enter] キーを押すと 段落内でも強制的に改行することができますが (br 要素 ) 通常は使いません 3. 装飾について 文字を太字にしたり色を変えたりといった装飾は 他の一般的な文書作成ソフト (Word 等 ) と同様に可能です 文字をドラッグして選択し プロパティインスペクタを操作してください なおプロパティインスペクタで設定できる項目には限りがあります より細かい項目の設定を行うには CSS デザイナー 等で行います 4. ページプロパティ ページプロパティ 画面では ページ全体に関する設定を行うことが出来ます ページ全体のフォントや背景画像 リンクの色といった項目はここで設定します 5. リンクの設定 リンク (a 要素 ) を作成する場合も プロパティインスペクタから設定ができます 次のように操作します 76- Campus System Guide
第 3 部 第 3 章 Web サイトの作成 6. テーブル HTML では 表のことをテーブル ( 表 table 要素 ) と呼びます テーブルを挿入するには 以下のように操作します 挿入したテーブルに関する細かい設定はプロパティインスペクタから行ってください 7. 画像を挿入する 画像 ( イメージ img 要素 ) を追加する場合は Dreamweaver のウィンドウに画像をドラッグ & ドロップしてください 画像のサイズはドラッグで変更できます この他細かい設定はプロパティインスペクタから行ってください なお画像は HTML に 取り込まれる のではなく あくまで リンクされた 状態にあります すなわち HTML を違う場所に移動してしまったり画像を削除してしまったりすると 画像は表示されなくなってしまいます ファイル管理には気をつけましょう なお メインメニュー 挿入 イメージ から画像を挿入することも出来ます 8. 要素を挿入する 画像以外の要素を挿入する場合は 挿入したい場所にカーソルを押し メインメニュー 挿入 メニューから挿入したい要素を選択してください このほか 挿入 パネルを使う方法もあります Campus System Guide- 77
9. メインメニューのその他の項目 デザインビューでも この他いろいろな操作を行うことが出来ます 大半の操作は画面上部のメインメニューから行います この他の機能について興味がある方は調べてみてください 78- Campus System Guide
第 3 部 第 3 章 Web サイトの作成 3.3.3 コードビュー ライブビュー CSS デザイナー ここでは コードビュー ライブビュー CSS デザイナーについて解説します これらを使いこなすことで より自由に そして簡単に Web ページを作成することができるでしょう これらの機能に関して細かい解説はしません 興味がある方は調べてみてください 1. コードビュー ここまで見てきたように デザインビューを利用すれば直感的にホームページを作成することができますが ホームページを細部まで 編集するには HTML コードを直接入力する必要があります その場合はコードビューを用います コードビューは ドキュメントウィンドウ を切り替えることで使用できます ( 前述 ) コードビューで HTML の内容を書き換えた場合 コードビュー以外の部分をクリックするか プロパティインスペクタの 更新 ボタンを押すことで Dreamweaver にコードを読み込ませることが出来ます 2. ライブビュー デザインビューは ドキュメントウィンドウ上部の ライブ ボタンを押すことでライブビューに切り替えることができます ライブビューはブラウザーとほぼ同じ方式で表示されるため 通常のデザインビューではうまく表示できない複雑なコードも表示可能です またページ内のスクリプトなども実行可能です ライブビューでも 通常のデザインビューのように編集が可能ですが 一部の機能が制限されます 3. CSS デザイナー CSS デザイナーを用いると デザインビューより細かく CSS の設定を行うことが出来ます CSS デザイナーが画面内にない場合は 上部メインメニュー ウィンドウ CSS デザイナー をクリックすることで表示可能です Campus System Guide- 79
3.3.4 ブラウザーで確認 HTML の編集が完了したら ブラウザーで表示を確認してみましょう 1. ローカルで確認 ここまで作ってきた Web ページが ローカル ( 手元にファイルがある状態 ) において ブラウザーで正しく表示されるかどうか確認してみましょう つまり Web サーバーで公開する前に 手元のファイルを確認します Dreamweaver で編集中に F12 キーを押すと そのページをブラウザーで確認することができます 2. ウェブサーバーへアップロード 確認 作成した Web ページを Web サーバーで公開し 誰でも見られる状態にするには ファイルをアップロード ( ローカルからサーバーへファイルをコピー ) する必要があります ファイルのアップロードについては 本書第 2 部第 3 章第 2 節を参照してください 内容を修正 変更する場合は 手元のファイルを Dreamweaver で編集し 再度アップロードする必要があります 発展 : サイトの定義 Dreamweaver では サイト 定義の仕方によっては サイト内の全てのデータを管理し またアップロードするといった機能を使うことが出来ます その場合 FTP ソフトを使ったアップロードは必要ありません 設定が複雑なため ここでは解説していません 興味がある方は調べてみてください 80- Campus System Guide