タグ: Dreamweaverの使い方

Webサイトのコードを記述するときに便利な、Dreamweaverの使い方を紹介しています。

Dreamweaverはコードの候補を表示してくれたり、コードのエラーをぱっと分かる形で表示してくれたりと非常に便利です。

Dreamweaverのテンプレート機能は基礎的なDreamweaver活用のためのキーワードの一つで、これを使うことが主目的でも、十分にDreamweaverを使う理由になる。PHPやCMSが普及してきてはいるが、同じ形のファイル・同じ内容のパーツなどを一つの雛形をもとに、生成したり・更新したり・除去することに特化した機能。Dreamweaverテンプレートと呼ばれるもので、拡張子はdwtやdtw.php。これらに結びついたindex.htmlやindex.phpなどはテンプレート部分を更新するだけで、共通部分を更新することが可能。phpならばパーツ化するとそれほど恩恵を感じないが、すべてがすべてphpやCMS、他の優れたシステムにとって変わらなければ、まだまだHTMLの更新というものは続く。HTMLの更新を手助けしてくれるDreamweaverはスグレモノ。

スニペットを使うことにより、コードの再利用が可能で、予め用意しておいたもの・前に使ったけれども再利用する頻度の高いものは、登録しておくと次回の作業時間が大幅に短縮できる。タグを今日もいちからコーディングするなんてバカバカしい。ぽんと、表示される格闘ゲームの必殺技のようなトリガーキーや、トリガーキーを登録していなくとも、スニペットのフォルダを開いて、コードをダブルクリックだけで、再利用できるのはとっても素敵。

登録しておいて損はない箇所としては、ナビゲーションメニュー・カラム・新着情報の一覧・ギャラリーなど。

Dreamweaverの特徴的で、便利な機能の紹介・活用方法については各見出しのついた記事にその内容が載っているが、プレビュー機能では、完成形の画面を見ながらコードを書くことができる。エディタが好きって人にとってはあまり興味が湧いてこないことかもしれないけれども。

    Dreamweaverの便利な、これは使えるかもしれないショートカット

    Dreamweaverの便利な、これは使えるかもしれないショートカット コードに関するショートカット DreamweaverはプレビューができるWebコーディング・制作用のツールだが、やはり真価が問われる機能はコードの入力をミスなく効率的に作成していけるかというところ。 コードの候補(タグの補助)、自動インデントなど便利な機能は標準で備わっているが、コマンドを打ったり設定しないと使わないものも。 便利な機能は...

    Dreamweaverのクローク用拡張子コピーアンドペーストメモ

    Dreamweaverでサイトにデータをアップロード・ダウンロードする際に、ファイルの拡張子を指定して、同期・アップロード対象から省く機能があります。クロークの拡張子でよく使用するものをコピーペーストで利用できるようにまとめました。 よく使用される拡張子 .ai .bmp .css .cgi .gif .jpg .js .png .psd .zip .aviのみ .avi 特別なファイルを除外 .avi .back .bak .bmp .csv .dat .db .htaccess .ico .l...

    Dreamweaverの複製機能を意味するショートカットCtrl + D

    Dreamweaver上では複製・コピーアンドペーストという意味合いを持っていそうなショートカット。 コードを選択している状態で、Ctrl + Dをタイプすると、 選択しているコードを複製(コピーアンドペースト)することができる。 コメントや、タグのブロック、あるいはCSSのまとまった記述を複製したいときなどに便利な機能。 ファイルパネル(ファイルを操作するための画面)上で、ファイルやフォルダを選択している状態で...

    DreamweaverのCtrl+Tのショートカットを使って、選択しているタグを囲む

    「あ」という文字を囲む時には<div>あ</div>というふうに、タイピングしないといけない。 Dreamweaverを使うと、 あを選択した状態で、Ctrl+Tをショートカットで打ち込むと、タグの候補が現れて<div>と打ち込むと、<div>あ</div>というふうに打ち込むことが出来る。 <span>あ</span>を<div>で囲みたいときも同じ、 <span>あ</span>を選択した状態で、Ctrl+T...

    Dreamweaverのプレビュー画面を使ってできること

    テストサーバーの実行結果が確認できる テストサーバーの設定を行うと、実行結果が確認できる。PHPのIncludeやRequireならそのパーツの中身が表示される。 HTMLの構造などコピーアンドペーストができる Webサイトの一部をコピーして、新規ドキュメントを立ち上げる、その後、プレビュー画面にコピーしたソースコードを貼り付けると、HTMLなどの構造が残ったままで、設置できる。 その後、検索置換などを使ってタグの除去...

    Dreamweaverの機能でファイルの文字コードを変更・指定する方法

    ショートカットで、Ctrl+Jをタイプすれば、ポップアップが立ち上がるので、タイトル/エンコーディングのメニューを選択する。 エンコーディングからUTF-8やShift_JISなどを選択すれば、ファイルの文字コードを指定できる。変更したら、ファイルの保存を行う。 開く時に文字コードが勝手に意図しない文字コードに変換される時は他のエディタで保存したり、コメントにmetaのcharsetを指定する。 文字コードの問題 多くのサ...

    Dreamweaverで通常表示されない不可視のファイルをファイル一覧に表示させる方法

    Dreamweaverでデフォルトでは表示されない、.LCKファイルや_notesフォルダなどを表示させるには、右側(デフォルトで)にあるファイルの一覧が表示されているファイルウィンドウのタイトル右にあるプルダウンアイコンをクリック(黒矢印の)。 表示(V)→非表示ファイルの表示(H)をクリックするだけで表示させることができる。 鬱陶しいな、また表示を消したいなと思ったらもう一度コチラを選択すればいい。

    Dreamweaverを使って正規表現・検索・置換する方法

    固定された文字列を省いたり、置き換えたりすることそういうことはできる。"固定"なら。ただ、規則性のあるものも削除したい、置換したいって時には厄介。そういう時は正規表現を利用した検索置換を利用する。 一例は以下のとおり。Dreamweaver内でCtrl + Fを押して、検索窓を開き、オプションの右下にある正規表現を使用(X)という項目にチェックを入れる。 特定の数字がランダムで入っている文字列を削除する。 検索...

    Dreamweaverを使って、PHPインクルードを利用したサイトの運営・構築を行う方法

    DreamweaverでPHPテンプレートを利用すると共通部品の更新を行うときにあとあと楽になります。テンプレートを作成する際に「空白のテンプレート」を選択し、「PHPテンプレート」で作成する。そうすると、DWTの拡張子が.phpとなって作成される。 その後そのテンプレートに、部品化するPHPやINCないしHTMLファイルを読み込むincludeを記述する。例えば下記のとおり記載した時。 <?php include("../inc/header.inc")...

    Dreamweaverの文字化け対策:WindowsでUTF-8のHTML文書を作成する時は日本語のコメントを付けるとかどうかな

    XHTML文書の最初にBOMを付けるとxml宣言より前に文字が入ってしまうので、ちょっと。 文字化けや文字コード変換を防ぐための一つのアイデア ただ、Windowsだとちょっとひな形を作ってUTF-8で保存した時に日本語の文字が含まれていないと、次に開いたときにUTF-8で保存したはずなのに、Shift_JISとして開かれてしまいます。 それを避けるために文書内に<!-- 日本語 -->こんな感じで日本語のコメントを入れるだけで、...