初心者のための10の有用なDreamweaverのコツ＆トリック

Dreamweaverユーザーは間違いなくそれが大国であることを考慮に入れるでしょう。今日の市場で最もよく知られているIDE（統合開発環境）の中には、たくさんの機能、オプション、そして議論の余地があるものが詰まっています。ただし、一部の開発者が要求した基準を満たしていない可能性がありますが、Dreamweaverはまともな範囲の開発、共同作業、およびコーディングツールを提供しています。これらのオプションやツールは、残念ながら直感的ではないメニューのレイヤーの下に隠れています。そのため、今日の記事でチュートリアルを提供しています。.

開発時間を短縮し、コード品質を大幅に向上させる他の便利なテクニックとともに、Dreamweaverの最も強力な機能をすばやくアクセスできるようにするためのいくつかを紹介します。ジャンプ後の全リスト.

1.ダイナミックビュー “ライブビュー”

DWは開いているファイルを静的に表示することを既に知っていますが、どうでしょう。 「動的ビュー」 WordPressなどのアプリケーションの例?

まず、する必要があります言う DW私たちに提示するためにどの設定を使うべきか「動的ビュー」 正しくこれを行うには、 HTTPリクエスト設定 から 表示>ライブビューオプション メニューを開き、 取得する または役職アプリケーションを正しく表示するために必要なパラメータ.

その後に切り替えることで ライブビュー DWでは、それは古いものを置き換えます デザインビュー あなたのページのライブでピクセルパーフェクトなWebKitレンダリングのペイン。実際のJavascript、DOM操作、データベースクエリ、サーバーサイドコード、およびレンダリングされたCSSが含まれています。プレースホルダアイコンには表示されません。 デザインビュー.

2. "Code Navigator"はDWのFirebugです

さらに一歩踏み出すことは、 コードナビゲータ そしてときに ライブビュー ウィンドウ内の任意の場所でAltキーを押しながらクリック（MacではCommandキーを押しながらクリック）すると、そのアイテムをレンダリングしたコードが即座に表示されます。 Firefox / Firebugで現在見られるものと似ています.

3. JavaScriptを凍結する

Ajaxの動的な性質のため、最初のページのロード時に特定のアイテムがレンダリングされないか使用できないページと対話する必要があることがよくあります。これらは、ページのロード後しばらくしてページに挿入される項目です。これが一例です。

JavaScriptで完全に実装されているツールチップのスタイルを変更したいと思うかもしれません。今日より前は、自分のスクリプトを系統的に検索して、作成されているものと場所を特定する必要がありました。.

代わりに、これを試してください：

ページをにレンダリングする ライブビュー, それからヒット F6 いつでもJavaScriptをフリーズして、ページ内の動的項目に関連するコードをターゲットにして分析することができます。.

4.ライブビューの次のベストフレンド - "Live Code"

使用するとき ライブビュー, あなたもオンにすることができます ライブコード. ライブコード マウスを移動すると、コードが更新されます。 ライブビューウィンドウ!

5. JavaScriptの自動補完

Dreamweaverには、インテリジェントで完全なHTMLおよびCSSコード補完機能が付属しています。, しかし、Javascriptsはどうでしょうか。? DreamweaverでjQueryまたはPrototypeをコーディングする場合は、Javascriptのコード補完を提供するAPI拡張機能があることを知っておく必要があります。それは必要なタイピングを減らし、速いコーダーのためにかなり便利になることができます.

詳細を読む、またはダウンロードするにはここをクリックしてください。

Dreamweaver用のjQuery APIエクステンション
Dreamweaver用のプロトタイプAPI拡張

6.その場でコードを美化する

あなたのコードページは整理されていない、厄介なコード行のように見えますか？使用 ソースフォーマットを適用 機能を追加し、それを自分の好みに合わせて再フォーマットします。すばやくクリーンアップするには、 ソースコードのフォーマット の下部にあるアイコン コーディングツールバー （編集>ツールバー>コーディング） そして選択 コードフォーマット設定 好みのフォーマットを設定する.

フォーマットオプションにアクセスすることもできます。 コマンド>ソースフォーマットの適用 またはを選択して、選択したコードブロックにのみ適用します。 選択範囲にソースフォーマットを適用する オプション.

7.ウィジェットを取得する

クリックするだけ Dreamweaverの拡張アイコン アプリケーションバーで（歯車のように見えます）、選択します。 Webウィジェットをブラウズする. これによりAdobe Exchangeに移動し、そこでYahoo！、JQuery、その他多数のベンダーから追加のウィジェットを見つけることができます。.

8. SubversionとDreamweaver

そして、はい、DreamweaverはSubversion（SVN）をサポートしています。プロジェクトのリビジョン管理を維持するためにSVNを使用する開発者にとって、これは良いニュースになるかもしれません。 Dreamweaverの開発者Andrew Voltmerが話し合いました DreamweaverでSubversionを使用する方法.

9.これ以上冗長なスタイル

ワードプロセッサのように、コンテンツを視覚的に更新する方法としてDreamweaverを使用する人が多くいます。 Dreamweaver CS4より前のバージョンでは、次のような冗長なCSSルールが発生する可能性がありました。 .クラス1, .クラス2, 等々。 Dreamweaver CS4では、単にあなたの プロパティインスペクター に HTML モード（インスペクタの左側にあるHTMLアイコンをクリック）をクリックすると、適切なHTMLマークアップのみを挿入して、冗長なCSSすべてに別れを告げるでしょう。.

10.フォーム検証が簡単に

フォームフィールドを検証したいのですが、最初から再構築する必要があることを心配していませんか。心配ない。テキストフィールドなどの既存のフォーム要素を選択して、 元気検証ウィジェット から 挿入> Spryメニュー. 次に、最小文字数や最大文字数などの検証要件を直接、 プロパティインスペクター.

ボーナス：さらに3

11.関連ファイルに簡単にアクセスする

HTMLまたはPHPファイルを開くと、ドキュメントウィンドウの上部に、CSS、Javascript、さらにはPHP用のインクルードファイルなど、一連の依存ファイル名が表示されます。あなたは簡単にこれらのファイルに切り替え、変更を加えそしてそれらを保存することができます。 Related Filesバーのファイルをクリックすると、そのソースがコードビューに表示され、親ページがデザインビューに表示されます。または、コードナビゲータを使用して現在の選択に影響するCSSソースコードにすばやくアクセスする.

12.ブラウザの互換性を確認する

互換性を確認したい文書を開きます。コード/分割/デザインビューにアクセスするのと同じメニューバーから、右端の「」を探します。チェックページ'ボタン.

クリックするとドロップダウンメニューが展開されます。ブラウザの互換性を確認する'。の ブラウザ互換性結果ウィンドウ あなたが対処する必要があるすべての問題とともにウィンドウの下部に表示されます.

注：これはMac上のIEの新しいバージョンをチェックしません！テストに使用するブラウザを選択するには、 チェックページ > 設定メニューから.

13. PHPページをプレビューする

Dreamweaverを使用すると、ソフトウェア内でPHPコードを実行してプレビューすることができます。これをセットアップする方法は次のとおりです。.

入門

まず、選択 サイト -> 新しいサイト トップナビゲーションから.
あなたは両方を見るでしょう基本そして 高度なサイト定義 オプションタブ選択して進みましょう 詳細サイト定義タブ.
該当するボックスにサイトのフォルダ名を入力します（この例では、フォルダ名として "myphp"を使用します）。.
[デフォルトの画像フォルダ]フィールドに名前を入力して、「画像」という名前の別のフォルダを作成します。.
下 地域情報, 以下の値をフィールドに入力します。
- サイト名：サイトの名前Dreamweaverでのみ使用する
- ローカルルートフォルダ：これはあなたが仕事をするサイトの名前です。競合を最小限にするような方法でサイトに名前を付けるようにしてください。.
- デフォルトの画像フォルダ注：これはオプションですが、ほとんどのサイトではある程度イメージを使用するため、今すぐ作成することをお勧めします。これは、DWがコーディングフェーズ中にドキュメントに画像を挿入するように「見える」場所です。.
- 関連リンクこれは、Dreamweaverでのドキュメントリンクの処理方法を定義します。ドキュメントまたはルートを選択できます。両者の違いは次のとおりです。
  - ドキュメント相対 - 作業中のファイルとリンクされているアイテムへの相対パスを挿入します。.
  - Root Relative - /を使用します。これにより、ドキュメント/ファイルはROOTフォルダに関連してリンクされます。.
  - もう1つの方法は、サーバー設定ファイルに設定を追加することです。より高度なタスクなので、今のところはDocument-relativeを使用することに固執します。.
- HTTPアドレス：プロジェクトのサイトルートフォルダを入力してください
- 大文字と小文字を区別するリンクDreamweaverは、サーバーにアップロードするときに、プロジェクト内のファイルで大文字と小文字が区別される問題があるかどうかを確認します。あなたが使用するときに通知が表示されます：サイト - >サイト全体のリンクをチェック。必要に応じてチェックしたままにしておくことができます。私は個人的にはファイル名を常に小文字にしているのでチェックしたままにしていません。大文字はお勧めできません.
- キャッシュ：キャッシュを有効にする.
の中に リモート情報 FTP、またはリモートサーバへの他のアクセスを設定するか、[アクセス]を[なし]のままにします。.
の中に テストサーバー テストするファイルの種類/システムに関連するオプションを選択します。.
バージョン管理 この例では使用されませんので、よく知らない限り空白のままにしておくことができます。.
クローキング .psd、.fla、およびその他のソースファイルをあなたのサイトフォルダ内に置くことを可能にし、あなたのサイトをアップロード/更新するときにDWはそれらを無視します.
デザインノート ファイルに加えられた変更に関するメモを保持しているので、Webデザインチームにとって理想的です。これはデフォルトでチェックされており、この方法を使用するのは問題ありません。.
立ち去る ファイルビュー列, 寄付する, そして テンプレート デフォルトとして.
の 元気がない ページは、Dreamweaverに自動的に含まれるSpryアセットフォルダーを単に指すだけです。これを変更する必要はありません。すべての設定が終わったら、をクリックします OK.

DreamweaverでPHPをプレビューする

それではPHPファイルを開き、必要な変更を加えてください。このファイルをDreamweaverで単純に表示するには F12を押す 結果はデフォルトのブラウザに表示されます。あなたはどのブラウザで使用されているかを変更することができます 編集する -> 設定 -> ブラウザでプレビュー. これにより、編集からプレビューまでの時間が短縮され、ブラウザバーに長いURLを入力したり、別のサーバーソフトウェアを使用してPHPファイルをレンダリングしたりする必要がなくなり、時間の節約になります。!

それで全部です。幸せなDreamweaver'ing :-)

編集者注： この投稿はによって書かれています ジェシーマトロック Hongkiat.comのために。この6年間、JesseはUIデザイン、アプリ開発、そしてウェブのトレンドに没頭してきました。彼はオーダーメイドのアプリ開発に焦点を当てている、非常に才能があるが小さい開発チームの創設者でありデザインリーダーです。.