Dreamweaverの設定

Dreameaverとは

何をするためのツールなのか
  • 初心者にとっては、HTMLの入力を助けてくれるツール(ただし、勝手に何かをしてくれるわけではありません)
  • 仕事の種類によっては、Dreamweaverを使用しないでテキストエディターを利用することを求められる場合もあります


初心者にとってのメリット

  • 入力支援機能を利用することにより、ミスタイプを防ぐことができる(支援機能はオフにすることも可能)
  • フォルダー管理をするため、不必要なフォルダー・ファイルなどを触ってしまうミスがなくなる
メリットを活かすための条件
  • デザインビューは利用しない
  • プロパティパネルは利用しない

この2つはメインの機能ではありますが、初心者がプロになっていく過程での勉強には利用しません。

テキストエディターとしてのDreamweaver

サイトの管理(サイトの定義)

  • Dreamweaverは起動後に、必ず「サイトの管理」の設定を求められます
  • 管理するフォルダーを指定して、作業時の効率化をはかる
  • 「サイトの管理」により相対パスの自動更新が可能になる

Dreamweaverでは、Webサーバーにアップロードするのと同じ階層構造をローカルのハードディスクに作成して管理することを「サイトの管理」と呼びます。

サイト管理(ローカルサイトを定義する)
  • 起動後、最初に現れる画面の「サイトの管理」をクリックするか[サイト]メニューから「新規サイト」を選択する。

https://cdn-ak.f.st-hatena.com/images/fotolife/d/dreamweaver/20111112/20111112114826.jpg

https://cdn-ak.f.st-hatena.com/images/fotolife/d/dreamweaver/20111112/20111112115449.jpg


新規作成

  • 通常、ローカルでの作業のみであれば、管理するフォルダーを選択し、管理名(サイト名)をつけて保存します

https://cdn-ak.f.st-hatena.com/images/fotolife/w/web-dreamweaver/20121105/20121105222802.jpg

https://cdn-ak.f.st-hatena.com/images/fotolife/w/web-dreamweaver/20121105/20121105223114.jpg

ワークスペースのレイアウト
  • 「開発者」か「コーダー」を選択する

https://cdn-ak.f.st-hatena.com/images/fotolife/w/web-dreamweaver/20121028/20121028174829.jpg

https://cdn-ak.f.st-hatena.com/images/fotolife/w/web-css-design/20121126/20121126002045.jpg

環境設定

コードヒント

  • 環境設定」→「コードヒント」
  • あえて「コードヒント」が表示されない設定にします

https://cdn-ak.f.st-hatena.com/images/fotolife/w/web-css-design/20121109/20121109181350.png


大文字と小文字を区別する

https://cdn-ak.f.st-hatena.com/images/fotolife/d/dreamweaver/20111112/20111112115923.jpg


各パネルを非表示・表示

  • コーディングに集中する場合は、パネルが不要です

https://cdn-ak.f.st-hatena.com/images/fotolife/w/web-dreamweaver/20121028/20121028172451.jpg

https://cdn-ak.f.st-hatena.com/images/fotolife/w/web-dreamweaver/20121028/20121028173429.jpg

Dreamweaverの環境

新規ドキュメント


《HTMLの設定》

https://cdn-ak.f.st-hatena.com/images/fotolife/w/web-design-js/20111101/20111101180722.jpg


JavaScriptの設定》

https://cdn-ak.f.st-hatena.com/images/fotolife/w/web-design-js/20111101/20111101181114.jpg


《改行タイプの設定》

https://cdn-ak.f.st-hatena.com/images/fotolife/w/web-design-js/20111101/20111101181518.jpg


《インデントの設定》

  • 「改行タイプの設定」画面の「インデント使用」にチェック


コーディング規約
コーディング規約には、「インデントはスペース2つでなければならない」とあります。
Dreamweaverでは、タブで入力したインデントを自動的にスペースに変換することができません。

そこで、置換機能を使います。

  • タブ記号を表示する

https://cdn-ak.f.st-hatena.com/images/fotolife/w/web-design-js/20111101/20111101182803.jpg

  • タブをスペースに変換(変換したい場所を選択して)

https://cdn-ak.f.st-hatena.com/images/fotolife/w/web-design-js/20111101/20111101183153.jpg

JavaScript支援機能
  • 「Ctrl」+「space」

https://cdn-ak.f.st-hatena.com/images/fotolife/w/web-design-js/20111105/20111105192703.jpg


Macの場合》
「Spotlight」のショートカットキーと重なります。
オフにしないと、機能しません。

https://cdn-ak.f.st-hatena.com/images/fotolife/w/web-design-js/20111105/20111105193146.jpg

広告を非表示にする

求職者支援訓練 フェリカテクニカルアカデミー