「Dreamweaver」カテゴリーアーカイブ

Dreamweaverに関する記事です。

ソースフォーマットの適用の振る舞いは、タグ毎に個別にカスタマイズできます。

[操作手順]
→Dreamweaver＞環境設定　にアクセスする。
※command＋U のショートカットで開けます。

→コードフォーマット＞タグライブラリ　の順にアクセスする。

→inputタグを選択する。
※今回はinputタグを指定して設定します。（理由は後述）

→改行：改行なし　に変更する。
※デフォルト値は、改行：タグの前後

以上で完了です。

[inputタグを改行なしに設定した理由]
Dreamweaverのデフォルトでは、inputタグは改行されます。
改行が原因でデザイン上の不都合が生じることがあります。

例えば、テキストボックスとフォームボタンを横並びで配置するデザインの場合は、以下のように二つのinputタグを併記します。
<input name=”” type=”text” placeholder=”検索キーワードを入力してください” class=”textBox”><input name=”” type=”submit” value=”検索” class=”searchButton”>

ここでソースフォーマットの適用をすると、以下のように改行されます。
ブラウザ上では改行コード＝スペースとしてレンダリングされる為、デザイン通りになりません。
<input name=”” type=”text” placeholder=”検索キーワードを入力してください” class=”textBox”>
<input name=”” type=”submit” value=”検索” class=”searchButton”>

ちなみに、aタグについては、デフォルトで改行なしになっています。

[確認環境]
Mac OS X 10.9 Mavericks
Dreamweaver CS4 10.0

Dreamweaver

Dreamweaverの「ソースフォーマットの適用」で改行あり/なしをタグ毎に設定する方法

2015年2月20日 yellow

ソースフォーマットの適用（Alt＞C＞A）の振る舞いは、タグ毎に個別にカスタマイズできます。

[操作手順]
→Dreamweaver＞編集＞環境設定　にアクセスする。
※Ctrl＋U のショートカットで開けます。

→コードフォーマット＞タグライブラリ　の順にアクセスする。

→inputタグを選択する。
※今回はinputタグを指定して設定します。（理由は後述）

→改行：改行なし　に変更する。
※デフォルト値は、改行：タグの前後

以上で完了です。

ちなみに、aタグについては、デフォルトで改行なしになっています。

[確認環境]
Windows 7 SP1
Dreamweaver CS3 9.0

Dreamweaver, Mac

[Mac]Dreamweaverのテーブル操作で覚えるべき6つのショートカット

2015年2月17日 yellow

[ショートカット]
control＋command＋M 　　　　セルのマージ（デザインビューで選択中の複数のセルを結合する）
control＋command＋S 　　　　セルの分割（デザインビューで選択中の結合済みセルを分割する）
command＋M 　　　　行の追加（デザインビューで選択中のセルの隣に行を追加する）
command＋shift＋A　　　　列の追加（デザインビューで選択中のセルの隣に列を追加する）
command＋shift＋M　　　　行の削除（デザインビューで選択中のセルの行を削除する）
command＋shift＋-　　　　列の削除（デザインビューで選択中のセルの列を削除する）

※Dreamweaver＞修正＞テーブル　の順にアクセスすると、テーブル関連のショートカットを確認できます。

[確認環境]
Mac OS X 10.9 Mavericks
Dreamweaver CS4 10.0

Dreamweaver

Dreamweaverのテーブル操作で覚えるべき6つのショートカット

2015年2月17日 yellow

[ショートカット]
Ctrl＋Alt＋M 　　　　セルのマージ（デザインビューで選択中の複数のセルを結合する）
Ctrl＋Alt＋S 　　　　セルの分割（デザインビューで選択中の結合済みセルを分割する）
Ctrl＋M 　　　　行の追加（デザインビューで選択中のセルの隣に行を追加する）
Ctrl＋Shift＋A　　　　列の追加（デザインビューで選択中のセルの隣に列を追加する）
Ctrl＋Shift＋M　　　　行の削除（デザインビューで選択中のセルの行を削除する）
Ctrl＋Shift＋-　　　　列の削除（デザインビューで選択中のセルの列を削除する）

※Dreamweaver＞修正＞テーブル　の順にアクセスすると、テーブル関連のショートカットを確認できます。

[確認環境]
Windows 7 SP1
Dreamweaver CS3 9.0

Dreamweaver

[Mac]Dreamweaverのコードインスペクタ（コードビューの別窓）の使い方とショートカットキー

2015年2月16日 yellow

コーディング最中、別の箇所を並行して編集したい時はコードインスペクタを使います。
コードインスペクタで編集した結果は、リアルタイムでコードビューに反映します。（その逆も）

[操作手順]
→Dreamweaverでコードビューを開く

→以下のショートカットを押す。
option＋F10

→コードインスペクタが表示される。

→コードビューとコードインスペクタを行き来して編集作業をする。

以上で完了です。

[確認環境]
Mac OS X 10.9 Mavericks
Dreamweaver CS4 10.0

Dreamweaver

Dreamweaverのコードインスペクタ（コードビューの別窓）の使い方とショートカットキー

2015年2月16日 yellow

[操作手順]
→Dreamweaverでコードビューを開く

→以下のショートカットを押す。
F10

→コードインスペクタが表示される。

→コードビューとコードインスペクタを行き来して編集作業をする。

以上で完了です。

[確認環境]
Windows 7 SP1
Dreamweaver CS3 9.0

Dreamweaver

Dreamweaverでエラーダイアログ「現在のエンコーディングではドキュメント内のすべての文字を正しく保存できません。UTF-8またはこのドキュメント内の特殊文字をサポートするエンコードに変更してください。」の対処方法

2015年2月3日 yellow

HTMLページへ掲載予定の原稿に、特殊文字が混入しているかを目視で丹念にチェックします。
特殊文字が混入していた場合は、除去することで解決します。

考えられる原因
・HTMLページがUTF-8ではない
・特殊文字が混入している

例えば、以下のようなHTMLページ（昔のページ、英語のページ）で、文書内に「、」句読点を残して保存すると、上記エラーダイアログが出ます。（「、」句読点が「?」クエスチョンマークに置き換わっていました。）
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html lang=”en”>
<head>
<meta http-equiv=”content-type” content=”text/html;charset=iso-8859-1″>
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

最近のHTMLページはUTF-8なのでこのような問題は起きません。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

[確認環境]
Windows 7 SP1
Dreamweaver CS3 9.0

Dreamweaver