Dreamweaver 関連
使い慣れたホームページビルダー22 からDreamweaver に変更する時のメモを少し整理しました。
- Dreamweaver での「サイト」定義
- Dreamweaver の 主な機能
- Dreamweaver の 主な操作
- Dreamweaver ユーザーガイド(メーカー)
Dreamweaver での「サイト」定義
- 「サイト」単位でファイルを管理します。
移行後、最初に行うべき重要な設定です。これにより、ファイル管理やリンク設定が容易になります - メニューバーから「サイト」>「新規サイト」を選択します
- 「サイト名」を入力します（任意の名前）
- 「ローカルサイトフォルダー」で、ホームページのファイルが保存されているフォルダー又はこれから保存に使用するフォルダーを指定します
サイト内のファイルやリンクを正しく管理するために必要 - サーバー情報を設定
- Webサーバーへのアップロード（FTP接続）が必要な場合は、「サーバー」カテゴリを選択します
- 「＋」ボタンをクリックし、ご利用のサーバー情報（FTPアドレス、ユーザー名、パスワードなど）を入力して設定を保存します
Dreamweaver の 主な機能
- 直感的な「見たまま編集」機能（デザインビュー）はありますが、
より高度なコーディング（コードビュー）に強みがあります - 表示モードの切り替え
画面上部の「コード」「分割」「ライブ」ビューを切り替えて作業します。
ホームページビルダーの視覚的な操作に慣れている場合は、「ライブ」ビューや「分割」ビューから始めるとわかりやすい - プロパティインスペクター
要素（テキスト、画像など）を選択すると、画面下部（または指定位置）にプロパティインスペクターが表示され、リンク設定やスタイルの適用などが行えます - CSSデザイナー
CSSを使ってデザインを詳細にコントロールするための強力なパネルです。
ホームページビルダーよりも詳細なスタイル設定が可能です - FTP機能
サイト設定時にサーバー情報を登録しておけば、Dreamweaverから直接ファイルをアップロード（同期）できます - サイト管理機能
サイト全体のリンク切れチェックやファイルの一括管理機能が優れています。
これらの機能を活用して、サイトの品質を維持できます
Dreamweaver の 主な操作
サイト設定から始まり、コードビューとデザインビューを切り替えながらHTMLやCSSを編集し、レスポンシブなWebサイトを効率的に作成することが出来ます。
- サイトの設定
- 上記の Dreamweaver での「サイト」定義 を参照
- ファイルの作成と編集
- コードビュー
HTMLやCSS、JavaScriptなどのコードを直接記述・編集するモードです。
コードヒントやコード補完機能があり、効率的なコーディングをサポートします - 分割ビュー
コードと ライブやデザインビューを、上下や左右に同時に確認しながら編集できるので便利です - ライブビュー
ブラウザで表示される状態に近い形でページを確認しながら編集できます。
特にレスポンシブデザインの確認に役立ちます - デザインビュー
Webページのデザインを視覚的に確認しながら編集できるモードです。
ただし、再現エディターではないため、正確なレイアウト
画像やテキストの配置、CSSの適用結果などをリアルタイムで確認できます。
ただし、WYSIWYG（見たままを再現）エディターではないため、正確なレイアウトにはCSSの理解が重要です
- コードビュー
- 主な機能と操作
- 画像の挿入と操作（ライブビューの場合）
ライブビューの画像を挿入したい場所をクリックして、
メニューの「挿入」＞「image」＞「挿入場所」を選択する- 「前」は例えばカーソル位置の先頭の<p>の前に挿入される
- 「後」は例えばカーソル位置の最後の</p>の後に挿入される
- 「ネスト」は例えばカーソル位置の先頭の<p>の後に挿入される
- 画像の挿入と操作（コード画面の場合）
コード画面上で画像を挿入したい場所をクリックして、
メニューの「挿入」＞「image」＞画像を選択するすればその場所に挿入される - テキストや画像にリンク先を指定・解除する時は
- リンクを指定したいテキストや画像を選択し、「ウインドウ」＞「プロパティ」で設定画面を開きリンク先ファイルを指定する
- リンクを解除する時は、「プロパティ」で指定したリンク先を削除する
- ライブビュー画面上のリンク先のページを表示する
- ジャンプする時は、「CTRL」を押下したままリンク上をクリック
表示したリンク先ページの編集はできません - 元の画面に戻る時は、画面上の任意の場所を右クリックし「戻る」
- ジャンプする時は、「CTRL」を押下したままリンク上をクリック
- 編集画面上のリンク先ページに移動する時は
- デザインビューの画面で、リンクが貼られた箇所を右クリックし
「リンクされたページを開く」で移動 - 移動したページの編集もできます
- デザインビューの画面で、リンクが貼られた箇所を右クリックし
- テンプレートとライブラリ
共通のデザイン要素（サイドバーなど）をテンプレートやライブラリ機能として登録し、複数ページで一括管理・更新することができます - CSS デザイナーパネル
CSSのスタイルルールを視覚的に作成・編集するためのパネルです。
ブレークポイントの設定や、メディアクエリーを使用したレスポンシブデザインの作成に利用されます - フォーム作成
ユーザーからの情報収集のために、フォームやフォームエレメントをページに挿入し開発することができます
- 画像の挿入と操作（ライブビューの場合）
