初心者向けの10のシンプルだが便利なDreamweaverのヒントとコツ

Adobe Dreamweaverは、Webデザイナーにとって強力なツールです。 Dreamweaverは、Webサイトを開発するためのビジュアルデザインサーフェスとコードエディターを提供します。 それは長所と短所の両方を持っていますが、その幅広い機能はあなたが効果的にウェブサイトを構築することを可能にします。

ここでは、初心者向けの10のシンプルで便利なDreamweaverのヒントとコツを紹介します。

1.改行を削除します。

ドキュメント、電子メール、またはWordファイルからDreamweaverにテキストをコピーしているときに、段落または行の終わりで改行が発生することになります。 リンク区切り文字<br>は行の終わりを示すため、それ以降のテキストはその下の行に表示されます。 これらの文字は表示されないため、削除するのは困難です。 Dreamweaverは通常、これらの文字を強調表示しませんが、設定メニューの設定を変更して、改行を示す小さな黄色のアイコンをプログラムに表示させることができます。 改行が表示されたら、簡単に削除できます。

2.サイトを定義することを忘れないでください：

人々は、Dreamweaverでの作業をワードドキュメントでの作業と混同することがよくあります。 ただし、サイトの設計とは、1つのファイルを作成することではなく、画像、JavaScriptファイル、Webページ、CSSファイルなどの相互に関連するファイルのコレクションを使用してサイトを作成することです。 これを理解していないユーザーは、サイトを設定することの重要性を忘れがちです。 Dreamweaverは、セットアップが簡単なサイトプロセスを提供します。 サイトのファイルの場所に関する情報を提供し、多くのDreamweaver管理ツールの1つを選択できます。 これらのツールは、ファイルをWebサーバーに転送し、壊れたリンクを確認し、テンプレートを使用してサイトを構築します。

3.コードのフォントサイズを大きくします。

フォントサイズを調整するDreamweaverの機能を使用すると、いくつかの簡単な手順でコードサイズを増やすことができます。 フォントサイズを大きくするには、最初に[Dreamweaver]> [設定]を選択し、[フォント]カテゴリをクリックしてから、新しいサイズを選択して[OK]をクリックします。 これにより、コードが読みやすくなり、目を痛めることなく、長期間にわたってWebサイトの開発に取り組むことができます。

4.CSSバックグラウンドの省略形をオフにします。

CSSの機能の1つは、背景プロパティです。 この機能を使用すると、背景に色や画像を追加できます。 Dreamweaverのbackgroundshorthandプロパティは、3行のコードを1行に短縮して、画像、色、繰り返しのプロパティを定義します。 これにより、背景プロパティの定義が確実に簡単になりますが、短縮バージョンに1つのプロパティを残した場合、Webブラウザは「なし」として扱います。 たとえば、画像プロパティのみを指定した場合に背景を変更すると、Webブラウザは前の背景から既存の色を削除します。 したがって、この問題を回避するには、CSSバックグラウンドの省略形をオフにすることをお勧めします。

5.CSSDesignerでスタイルをコピーします。

CSS Designerを使用すると、Webページのスタイルを視覚的に強化できます。 CSSデザイナのその他の機能を使用する場合は、セレクターを右クリックして、コピーまたは複製操作を使用します。 これらのオプションを使用すると、あるセレクターから別のセレクターにスタイルをコピーできます。 これらのスタイルには、背景、テキスト、アニメーション、または境界線が含まれます。 セレクター全体をコピーする場合は、標準の複製または複製をメディアクエリコマンドに使用して、ターゲットを絞ったアプローチを実行します。 これらのショートカットを使用すると、時間を大幅に節約でき、一貫したスタイルを維持できます。

6.ナビゲーションバーを削除します。

Adobe Dreamweaver CS5には、ブラウザのナビゲーションツールバーが付属しています。 このツールバーは、Dreamweaverのライブビューオプションで使用するために作成されています。 これらのオプションは両方ともドキュメントウィンドウにあります。 ライブビューは、Webページのプレビューを表示するために使用されます。 ライブビューでは、リンクをクリックして特定のページに移動できます。 ナビゲーションツールバーには新しいページの場所が表示され、ページ間を簡単に移動できます。 [表示]>[ツールバー]セクションの[ブラウザ]ナビゲーションオプションをオフにすると、使用していないときにこのツールバーを非表示にできます。

7.ファイルを管理します。

Dreamweaverを使用してサイトを設定すると、すべてのファイルが[ファイル]パネルに表示されます。 このファイルパネルは、ファイル名の名前変更、移動、強調表示などの多くの機能に使用できます。 これはおそらく一般的であり、これをすべて知っているかもしれませんが、Webページは通常のファイルとは異なります。 Webページには、画像、他のWebページへのリンク、および外部スタイルシートファイルからのCSSスタイルがあります。 通常、Windowsエクスプローラーを使用して画像、Webページ、またはCSSファイルの名前を変更すると、リンクが壊れることがあります。 一方、Dreamweaverでは、ファイルパネルを使用してファイルを移動または名前変更すると、リンクを自動的に更新できます。 このように、壊れたリンクはありません。

8.タグセレクターを選択します。

CSSクラススタイルを適用している間、タグを正確に追加または削除するのは難しい場合があります。 正確な線を選択するには、Dreamweaverのタグセレクターが最適です。 タグセレクターは、ドキュメントウィンドウの左下に配置されています。 このセレクターは、テキストの周囲に存在するすべてのHTMLおよびその他のタグを表示します。 タグセレクターバーにあるタグをクリックすると、特定のタグを選択できます。 強調表示されたタグは、タグが選択されていることを表します。

9.スニペットを使用します。

Dreamweaverは、多くの時間を節約できるコードのコアビットであるスニペットを提供します。 スニペットはCreativeCloudを介して同期されるため、すべてのシステムで利用できるようになります。 最もよく使用するものをキーボードショートカットとして割り当てることができます。 ショートカットを編集する場合は、キーボードショートカットのデザインを開き、標準セットを複製します。 次に、コマンドセクションの下にあるスニペットカテゴリを選択して、お気に入りを選択します。 次に、作成したスニペットを含む、使用可能なすべてのスニペットのリストが表示されます。 最も難しい部分は、どのキーボードの組み合わせが使用されていないかを把握することです。 しかし、これは修飾子を使用することで解決できます。

10.WordPressとDreamweaverを接続します。

DreamweaverとWordPressは素晴らしいチームを作ります。 Dreamweaverの動的ファイルツールセットを使用して、WordPressページをデザインおよび変更できます。 このツールセットには、カスタムフィルタ、動的に関連するファイル、およびサイト固有のコードヒントが含まれています。 難しいのは、Dreamweaverで他のサイトページを操作する方法を理解することです。 まず、WordPressサイトのルートにあるindex.phpファイルから始めて、そこからナビゲートする必要があります。 パスをWebアドレスに直接追加するか、Dreamweaver機能を使用してリンクをクリックすることができます。 ページが表示された後、DreamweaverのCSSおよびその他のツールを制御できます。

Adobe Dreamweaverは、Webサイトの構築に最適です。 コードの補完、コードの折りたたみ、構文の強調表示などの基本機能に加えて、コードのイントロスペクションやリアルタイムの構文チェックなどの高度な機能が付属しています。 これらの言及されたヒントはあなたがあなたのウェブサイトをより効率的に構築するのを助けるでしょう。 多くのコーディングなしでウェブサイトを構築するためのツールを探しているなら、これらのウェブサイト構築ツールをチェックしてください。