Dreamweaver効率的サイトデザイン術 目次ダイジェスト
◆Dreamweaver概要
- [ローカルサイト]と[リモートサイト]の仕組み
- つねに拡張子が表示されるようにする
- [CS Live]メニューの[SiteCatalyst NetAverages]で Webサイトの動向をチェックする
◆制作環境の向上ワザ
- パネルやウィンドウをカスタマイズして オリジナルの[ワークスペース]を登録する
- [挿入]パネルを上側に配置して CS3の[挿入]バーの状態に戻す
- よく使う挿入ボタンを[お気に入り]に登録して すばやくアクセスできるようにする
- [デザイン]ビューや[コード]ビューの文字を大きく見やすくする
- [コード]ビューで開けないテキストファイルを ファイル形式を指定して開けるようにする
- Dreamweaverから外部コードエディターを 直接起動できるようにする
- Webブラウザーでの見え方を Dreamweaver上でプレビューする
- モバイルデバイスでの見え方を Dreamweaver上でプレビューする
- スマートフォン、タブレット、デスクトップでの見え方を Dreamweaver上で一度にまとめてプレビューする
◆ドキュメント制作の便利ワザ
- 複数のWebブラウザーでの見え方を [BrowserLab]で確認&比較する
- WebページをDreamweaver上に直接表示して 動的コンテンツの動作をチェック&編集する
- 外部サイトをDreamweaver上に直接表示して CSSやJavaScriptファイルの構造を確かめる
- Extensionをインストールして Dreamweaverの機能を拡張する
- インターネットに接続して 最新の拡張機能をチェックする
- Dreamweaver CSのアップデートファイル[Dreamweaver CS5 HTML5パック]をインストールする
- 現在のファイルに関連するCSSファイルやJSファイルを 現在のドキュメントから直接開いて編集する
- ツールバーに表示する関連ファイルを絞り込む
- つねに同じ拡張子&ドキュメントタイプ&文字コードで新規ドキュメントを作成する
- 新規ドキュメント作成時にCSSブロックデザインも自動作成させる
- 新規ドキュメントをHTML5形式で作成する
- iPad & iPhone用のドキュメントを効率的に作成する
◆CSSコーディングの便利ワザ
- HTML5&CSS3のコードヒントを利用する
- 現在のファイルに関係するファイルだけを 一気にまとめて保存する
- 元データの構造を保ったまま エディタで書いたテキストをペーストする
- 元データの書式を保たずに 他アプリケーションのテキストをペーストする
- 「登録商標」や「著作権」の特殊文字を効率的に挿入する
- [デザイン]ビュー上で必要なタグすべてをもれなく確実に選択する
- [クイックタグ編集]で[デザイン]ビューでもタグや属性をすばやく編集する
- サイト内の他のファイルにすばやく確実にリンクする
- サイトルートからのリンクをすばやく指定する
- 他ページの任意の位置にジャンプするリンクを設定する
- ページ最下層からページ先頭に戻るリンクを設定する
- 飛び先のない[ヌルリンク]を設定する
- CSSコードの記述を簡略化して長くなりがちなCSSルールをコンパクトにする
- フォーマットを変更して CSSコードを読みやすくする
- CSSコードのカラーリングを変更して 使いやすい状態にする
- CSSルールをダブルクリックしたときに、該当ファイルの該当行が自動的に開くようにする
- 選択範囲に関連するCSSコードを すばやく確認して編集する
- CSSのブロックデザインを着色して ボックスモデルの入れ子構造を把握しやすくする
- [インスペクト]モードに切り替えて CSSボックスモデルのプロパティを確認する
- IDセレクターの新規CSSルールを設定して 見出しに適用する
- 挿入ポインタの位置の要素を読みとらせて セレクター名の入力を自動化する
- 編集したい箇所のCSSルールを[CSSスタイル]パネルの[現在]モードに読み込んで編集する
- CSSプロパティの特異性や適用の問題点を[CSSスタイル]パネルの[現在]モードで検証する
- CSSプロパティのルールを無効化する
- 無効化したCSSプロパティのルールをすべて削除する
- CSSファイルをHTMLファイルにリンクしてCSSを共有できるようにする
- 「メディアタイプ]でメディアを選んで CSSを適用させるデバイスやソフトウェアを指定する
- 指定したメディアタイプでの見え方や CSSの表示/非表示をDreamweaver上で確かめる
- XHTMLファイルに条件付きコメントを追加して Internet Explorerの特定バージョン専用のCSSを適用させる
- タグに記述されたCSSスタイルをCSSルールに変換して外部CSSファイルに書き出す
- head要素に書き込まれたCSSルールを 外部CSSファイルに書き出す
- CS3をコードヒントで入力する
◆コード編集の便利ワザ
- コードのカラーリングを変えて 重要なコードが一目でわかるようにする
- 環境や用途に合わせて インデントさせるコードの間隔や種類を設定する
- 任意の選択範囲のみ コードのインデントを解除する
- タグ前後や自動挿入される改行やインデントの コードフォーマットを変更する
- 大文字のタグや属性を一気にまとめて小文字に変換する
- 大文字の属性値を一気にまとめて小文字に変換する
- 機種依存文字や半角カタカナなどを一気にまとめて正規の記述に変換する
- 膨大な行数のコードのうち必要な2か所を1画面に効率的に表示する
- 部分的にコードも確認しながら[デザイン]ビューでデザインする
- クリックした位置のコードの変化をリアルタイムにチェックする
- 動的ページの動作をリアルタイムにチェックする
- 必要なタグや属性、属性値をすばやく正確に入力する
- 必要な[コードヒント]だけが表示されるようにする
- 一覧にない属性値を[コードヒント]に追加する
- 一覧にないタグや属性を[コードヒント]に追加する
- 文字列としての半角「<」や「"」を[コード]ビュー上でも効率的に挿入する
- Internet Explorerの条件付きコメントをコードヒントで効率的に挿入する
- 選択されている範囲に開始タグと終了タグをセットにしてすばやく追加する
- タグの機能や文法を確かめながら選択範囲にタグを追加する
- [Zen Coding]でショートカットでスピーディにコードを入力する
- コメントを挿入してコードの区切りや内容を判別しやすくする
- よく使うコメントの定型文をすばやく再利用できるようにする
- 終了タグ(閉じタグ)の前に閉じタグ用コメントを自動的に挿入する
- ファイルを開いたときに問題のあるコードを自動修正させる
- ドキュメント編集中に問題のあるコードをハイライト表示させる
- コードの編集中に不要なタグを確実にすばやく削除する
- 不要なタグやマークアップを一気にまとめて削除する
- サイト内にある任意のタグを一括して置き換える
- 特定のタグに含まれる複数の属性をまとめて削除する
- 特定のタグに含まれる複数の属性を1つの特定のタグに置き換える
- 検索&置換の設定情報を書き出して、他の環境で流用する
- Wordで作ったWebページをDreamweaverで成形する
- Excelで作ったWebページをDreamweaverで成形する
- WordPressのダッシュボードをDreamweaverのドキュメントウィンドウに表示して編集する
- Web WidgetでWeb用の仕掛けを効率的に作成する
- Web Widget BroesweにないWeb Widgetを効率的にダウンロードする
- 行数&列数を指定してテーブルを挿入する テーブル内の各要素を確実にもれなく選択する
◆コンテンツ制作の便利ワザ
- 値で指定されたテーブルを比率指定のテーブルに変更する
- テーブル幅や列幅、行高の値を一気にまとめて消去する
- CSVやタグ区切りテキストを読み込んですばやく効率的にテーブルを作成する
- Excelデータを直接読み込んでテーブルを作成する
- Excelデータを部分的にコピーしてDreamweaverで手堅く再利用する
- 必要な代替テキストをスピーディに入力する
- Photoshopの画像をDreamweaverドキュメントに直に挿入する
- Photoshopの画像の一部をDreamweaverドキュメントに直に挿入する
- イメージプレースホルダーからFireworksを直に軌道してイメージを作成する
- 電子メールアドレス入力の有無を検証できるテキストフィールドを挿入する
- 生年月日のドロップダウンメニューをスピーディに設定する
◆効率アップの編集ワザ
- 一連の操作を登録して自動的に実行させる
- よく使う操作を[コマンド]に登録する
- よく使うソースコードを他のドキュメントでも利用できるようにする
- スニペットにショートカットキーを登録してさらなる高速入力を実現する
- 使用済みイメージやリンクを他のドキュメントでも再利用する
- 「お気に入り」に登録してよく使うアイテムを再利用しやすくする
- 複数のドキュメントに共通で使うコンテンツを変更時に一斉更新されるようにする
- オリジナルの.lbiファイルを編集して配置したライブラリ項目を一斉に更新する
- 折りたたみのアコーディオンパネルを効率的に挿入する
- クリック時に領域内の表示が変化する仕掛けをテーブルデータとSpryで効率的に作成する
- XMLファイルを[Spryデータセット]に関連付けて列のソートが可能なSpryテーブルを作成する
- Spryテーブルにイメージが表示されるようにする
- 共通デザインのWebページを効率的に制作する
- テンプレートを編集してテンプレートから作ったドキュメントを一気に更新する
- テンプレートの「編集できない領域」を部分的に表示/非表示を切り替える
- テンプレートの「編集できない領域」のタグ属性を編集できるようにする
- 増減や入れ替えが頻発する繰り返しデータをテンプレートで効率的に入力する
- [リピート領域]と[編集可能領域]を同時に自動的に作成する
- タイトルや大見出し、パンくずリストを[オプション領域]を活用して一気に置き換える
◆サイト管理&更新の便利ワザ
- なりすましや盗聴を排除可能なSSHでの接続を設定する
- サイト情報をファイルに書き出して他のマシンに読み込んで流用する
- 404 Not Foundファイルを作成して、リンク切れ発生の際のエラーメッセージを変更する
- 重複する入れ子のタグや削除可能な空タグなどドキュメントの問題点をまとめてチェックする
- ブラウザーのバージョンと問題点をまとめてチェックする Validator ExtensionでCS5でもバリデートの機能を利用できるようにする
- 特定ファイルをアップロードされないように転送の対象から外す
- 指定した期日内に修正したファイルを選んでリモートサイトにアップロードする など