Dreamweaverに関する10のハック–Web開発者向けの最高のコードエディタ

公開: 2017-07-19

Dreamweaverは、インターネット上のすべてのWebベースのアクティビティの母です。ほとんどの人にとって、DreamweaverはWebサイトを作成するための単なるツールですが、Dreamweaverが強力であることを知っているのは専門家だけです。

Dreamweaverには多くの機能とオプションがあり、Web開発者の最もお気に入りのツールになっています。間違いなく、このソフトウェアは、現在の市場で他のWeb開発ソフトウェアにはない最もよく知られているIDE（統合開発環境）を備えています。 Dreamweaverは、開発ツール、コラボレーションツール、コーディングツールのいずれかを使用して、Web開発者に適切な範囲を提供します。そのため、初心者のWeb開発者にとって、Dreamweaverを最大限に活用する方法を知ることが重要です。

エキスパートWeb開発者と通常のWeb開発者を区別するすべての側面は、残念な直感的なメニューのレイヤーの下に隠されています。そのため、新しいWeb開発者はスキルを向上させるのが難しいと感じています。ただし、この記事では、今日の市場の需要を満たすために知っておくことが非常に重要なDreamweaverの隠された強力な機能を紹介します。この記事は、これらの機能にすばやくアクセスするのに役立ち、作業の品質を向上させ、コーディングを大幅に向上させる役立つハックのトップ10を提供します。

1.ダイナミックビューとライブビュー：

Dreamweaverが静的ビューまたは開いているファイルを提供することは誰もが知っています。ただし、WordPressなどのアプリケーションの動的ビューについては未回答のままです。動的ビューを設定するには、動的ビューに使用する設定についてDreamweaverに通知する必要があります。これを設定するには、[表示]>[ライブビュー]>[オプション]メニューをクリックしてHTTPリクエスト設定に移動し、アプリケーションを正しく表示するために必要なGETまたはPOSTを入力します。

その後、Dreamweaverのライブビューを切り替えます。これにより、デザインビューパネルが、ページのピクセルパーフェクトにレンダリングされたライブWebKitに置き換えられます。次に、デザインビューインターフェイスのプレースホルダーアイコンの代わりに、ライブJavascript、DOM操作、データベースクエリ、サーバー側コード、レンダリングされたCSSを使用して完了します。

2.ナビゲーションを強化するためのブートストラップ：

ナビゲーションは、レスポンシブWebサイトの1ページのコンポーネントであり、Bootstrapが大いに役立つ小さな画面のニーズを満たすための適応機能を備えている必要があります。 Bootstrapを使用すると、ナビゲーションバーを簡単に設定し、水平ストリップから垂直パネルに切り替えることができます。背後にある理由は、DreamweaverがBootstrapのナビゲーションの柔軟性をすべてサポートしており、効果的でレスポンシブなWebサイトの開発に関してはこの機能を簡単に使用できるためです。

簡単に説明するために、開発でBootstrapを使用する方法の簡単なデモを以下に示します。

Bootstrapを使用してナビゲーションを強化することは、Dreamweaverの新しいドキュメントダイアログから始まります。新しいドキュメントダイアログの[ブートストラップフレームワーク]ボタンをクリックし、[ビルド前のレイアウトオプション]チェックボックスをオンにするだけで、次のようなフル機能のナビゲーションオプションを使用できます。

標準の、順序付けられていない、意味的に正しいリンクのリスト。
ブランドイメージを配置するためのロゴ配置用の領域。
送信ボタンと検索フィールドをアクティブにする準備ができました。
サブナビゲーションアイテムのドロップダウンメニューのプリセットを作成し、仕切りを付けて完成させます。
必要に応じて位置合わせできる左右のセクション。
組み込みの応答性。

難しい場合は、別のオプションがあります。 Dreamweaverを使用すると、カスタマイズされたナビゲーションバーを作成できます。暗いパレットが必要な場合は、.navbar-inverseクラスを<nav>タグに追加するだけです。あなたもそれで遊ぶことができます。ナビゲーションを常にページの上に表示する場合は、.navbar-fixe-topと入力します。以下に表示する場合は、.navbar-fixed-bottomと入力します。これらのBootstrapクラスはすべて標準であり、Dreamweaverのコードヒントもこれらのコーディングをサポートしているため、コーディング全体を念頭に置く必要はありません。要素の表示に.navbarと入力するだけで、希望のオプションを選択できるポップアップリストが表示されます。

3. JavaScriptのフリーズ：

Ajaxは非常に動的な性質を持っています。これが、最初のページの読み込み時にアイテムが使用できない、またはレンダリングされていないページを操作する必要がある理由です。これらのアイテムは、しばらくロードした後にページに挿入される可能性があるため、最初のロードでは表示されません。たとえば、JavaScriptに完全に実装されているツールチップのスタイルを変更したい場合は、スクリプトを系統的に検索して、どのアイテムがどこで作成されたかを見つけていました。スクリプトを検索する代わりに、次のことを試してください。

Dreamweaverをライブビューに配置して、ページをレンダリングします。次に、F6キーを押して、いつでもJavaScriptをフリーズします。これにより、ページ内の動的アイテムのコードを分析してターゲットにできます。これは、動的アイテムの正確なコードをターゲットにするのに役立つだけでなく、動的Webサイト内のコードを検索する時間を短縮することで開発を迅速化します。

4.コードの強調表示：

複雑なコーディングを毎日、夜に見ることに慣れていない場合、コーディングのスクリプトは非常に混乱する可能性があります。これは、コードの強調表示がスクリプト全体で分離を作成するのに役立つ場所です。 Dreamweaverには、最先端で目を動かす代わりに、読みやすくするコーディングを強調表示する機能があります。これを行うには、Dreamweaverの設定を開き、テクノロジープレビューセクションをオンにします。次に、[コードの強調表示を有効にする]オプションをクリックして、Dreamweaverに処理を任せます。ただし、この機能は最新バージョンでのみ使用できるため、Dreamweaverのバージョンを更新する必要がある場合があります。

強調表示オプションを有効にしたら、任意のタグをダブルクリックするだけで、現在のページのタグのすべてのインスタンスが強調表示されます。ただし、パラメータを定義する必要があります。このツールは、類似した要素をすばやく識別して移動するのに最適です。要素を強調表示したら、PCではキーボードショートカットf3、MacではCMD-Gを使用して、強調表示された要素から次の要素にジャンプします。また、シフト修飾子は前のセクションに戻ることができます。さらに、コードの強調表示はHTMLタグの属性と値でも機能するため、特定のクラスを簡単に見つけることができます。

5.自動JavaScript完了：

Dreamweaverは、インテリジェントで完全なHTMLおよびCSSコードを備えた優れたプラットフォームです。ただし、JavaScriptが完全ではないと考える人もいます。 jQueryまたはPrototypeの場合、Dreamweaverには、Javascript完了コードを提供するAPI拡張機能があることを知っておく必要があります。これらのコードを使用すると、スクリプト全体を入力する必要がなく、高速なコーダーにとって非常に便利なため、これらのコードは開発プロセスのペースを上げます。

Dreamweaverは、このようなタイプのjQueryおよびプロトタイプ完了コードを使用できる唯一のWeb開発ソフトウェアであり、すべてのWeb開発者が最小限の労力でタスクをスピードアップし、可能な限り最高の製品を作成するのに役立ちます。

6.関連ファイルに簡単にアクセスします。

CSSとJavaScriptは、HTMLファイルとPHPファイルを開いたときに表示される独立したファイルの名前です。 PHPファイルを開くと、ウィンドウの上部に表示されます。これらのすべてのオプションは前面に配置されているため、これらのファイルに簡単に切り替えて変更を加えることができ、ファイルを開かなくても保存できます。関連ファイルバーでファイルをクリックすると、コードビューにソースが表示され、デザインビューに親ページが表示されます。

さらに、任意のコードナビゲーターツールを使用して、現在のソリューションに影響を与えるCSSソースコードにすばやくアクセスすることもできます。このCSSソースコードへの迅速なアクセスにより、コーディングの時間が短縮され、Web開発者は開発プロセスのさまざまな側面に集中できます。

7.コードをその場で美化します。

整理されていない乱雑なコード行は、このコーディングの開発者が、コードを順番に書くのに十分な専門家やスキルを持っていなかったことを示しています。これはまた、ウェブサイトの検索エンジン最適化の際に非常に重要なことです。ただし、コードを整理して美化することは、人々が信じているほど難しくはありません。 Dreamweaverオプションの正しい知識があれば、コードをその場で整理できます。「ソースフォーマットを適用」オプションを使用して、好みに合わせて修正するだけです。コーディングをすっきりと整理するには、コーディングツールバーの下部にある[ソースコードのフォーマット]をクリックし、[編集]>[ツールバー]>[コーディング]に移動し、[コードフォーマット設定]を選択して好みの設定を設定します。

スクリプトを整理するもう1つの方法は、[コマンド]> [ソースフォーマットの適用]からフォーマットオプションにアクセスするか、[ソースフォーマットを選択に適用]オプションを選択してコーディングブロックにのみ適用することです。

8.リントフリーコーディング：

アドビがDreamweaverに強力なツールや機能をどれだけ装備していても、Webサイトで作業するほど、コーディング側で行う必要のある作業が増えます。これはあなたのスキルを向上させることができますが、コーディングの書きすぎは簡単な仕事ではないため、無限のエラーの扉を開くことにもなります。 Dreamweaverはそれを認識しているため、最新バージョンのDreamweaverであるCreative Cloud（CC）には、リンティングサポートと呼ばれる機能があります。リンティングは、CSS、HTML、およびJavaScriptで使用できる基本的なプログラミング構文チェックツールです。これにより、Dreamweaverは問題やエラーを特定するたびに、一般的なフレアと特定のフレアの両方を送信します。

テストを実行するには、Dreamweaverでコードでいっぱいのページを開くと、ステータスバーの右側にある円の中に小さな緑色のチェックマークが表示されます。丸で囲まれた小さな緑色のチェックマークしかない場合は、コードですべて問題ありません。赤で囲まれた赤い十字マークがある場合は、コーディングに問題があるため、Webサイトを適切に実行するために修正する必要があります。さらに、エラーのマークをクリックすると、エラーの説明を間違えた列と行に移動できます。この機能の最大の利点は、この機能に制限がなく、緑色のマークが表示されなくなるまで使用できることです。

9.ブラウザの互換性を確認します。

ブラウジング機能は、すべてのWeb開発プロセスの最も基本的なものの1つです。これが、Dreamweaverによって簡単になり、Web開発を開始する前にこれらの基本的なことを見逃すことは決してない理由です。互換性を確認するDreamweaverでドキュメントを開きます。コード、分割、デザインビューのオプションのアイコンが配置されているメニューバーから、「ページの確認」ボタンと呼ばれる別のオプションがあります。

クリックすると、ドロップダウンメニューが開き、ブラウザの互換性の確認を選択して、互換性の結果を別のウィンドウで確認できます。

10.コードの最小化：

大きなWebサイトのコーディング中に、コードのチャンクが画面上でイライラし始めることがよくあります。キーボードからボタンを1つ押すだけで、このコーディングのチャンクを最小限に抑えることができることを知っている人はほとんどいません。コーディングのチャンクを変更する必要がないことが確実な場合は、そのブロックを選択して、コード行番号の横にある「-」をクリックするだけです。そのチャンクは最小化され、展開するまで気になりません。