AdobeDreamweaverの使用方法

Adobe Dreamweaverは、Webデザイナーにとって非常に強力なツールです。これは、AdobeDreamweaverを使用して実行できることが非常に多いためです。 もちろん、あなたができるすべてのことは学ぶのを難しくします。 最新バージョンのCS5での変更など、Dreamweaverで実行できる多くのことのいくつかをご覧ください。 そして、あるものをチェックすることを忘れないでください DreamweaverCS5にありません.

AdobeDreamweaverを使用している人のイラスト
ライフワイヤー/ブリアナギルマーティン

サイトの定義

  • 新しいウェブサイトを開始する
  • ウェブサイトを作成する
  • 必要なときに必要なサイトの部分のみを設定する* CS5の新機能
  • より完全なワークフローのためにリモート、QA、およびテストサーバーをセットアップする* CS5の新機能
  • 新しいディレクトリを作成して公開する
  • Doctypeを変更します
  • ページにメタデータを含める

あなたのサイトをライブにする

  • リモートサイトを定義する
  • WebサーバーへのFTPファイル
  • バージョン管理システムを使用して、ファイルをチェックインおよびチェックアウトします
  • より高度なバージョン管理のためにSubversionに接続する* CS5の新機能
  • チームメイトにメモを残す

Webページの作成

  • WYSIWYGモードでページを作成する
  • HTMLでページを書く
  • テンプレートから新しいページを作成する
  • 新しいページを最初から作成する
  • テンプレートを作成する
  • ファイルをサイトディレクトリに保存します
  • ページのプロパティを定義する

CSS

  • CSSスタイルシートを使用する
  • インラインスタイルの追加
  • 外部スタイルシートを作成する
  • 外部スタイルシートを添付する
  • クラス、ID、タグ、および複合CSSセレクターを作成します
  • 既存のCSSルールを編集する
  • 印刷可能なページのCSSを作成する
  • スタイルプロパティの有効化と無効化* CS5の新機能
  • CSSボックスモデルを視覚的に検査する* CS5の新機能

文章

  • テキストを変更する
  • 別のフォントを使用する
  • 改行を挿入します
  • 特殊文字を使用する
  • 今日の日付を含める
  • コメントを書く
  • 申し込み HTMLタグ テキストに
  • タグにHTML属性を追加する

リンク

  • テキストと画像をリンクする
  • サイトのリンクを確認する
  • デフォルトのリンクの色を変更します(リンク、訪問済み、ホバー、アクティブ)
  • リンクにツールチップを作成する
  • mailtoリンクを作成する
  • Webページアンカーを作成する

画像

  • ページにグラフィックを追加する
  • 画像を編集する
  • 画像のサイズを変更する
  • 画像に代替テキストを追加する
  • 画像にユーザー補助オプションを追加する
  • 画像とテキストを揃える
  • ロールオーバー画像を作成する
  • 使用する 画像マップ
  • トレース画像を使用する
  • 画像プレースホルダーを使用する
  • FireworksHTMLを挿入します
  • Photoshopファイルを挿入する

レイアウト

  • 付属の無料テンプレートを使用する* CS5の新しいCSSスターターレイアウト
  • レイアウト用のdivを挿入
  • CSSスタイルパネルでdivを編集する
  • 絶対位置の要素を挿入します
  • プロパティインスペクターで絶対位置の要素をフォーマットします
  • 定規、グリッド、ガイドを使用する

リスト

  • 箇条書きと番号付きリストを追加する
  • リストの箇条書きと番号をカスタマイズする

テーブル

  • テーブルを作成する
  • ヘッダーの行と列を追加します
  • 使用する 透明な画像 テーブルセルを開いたままにする
  • 固定幅と柔軟幅の列を作成する
  • 表の境界線のスタイルを変更する
  • テーブル内にテーブルを埋め込む
  • 表形式のデータをインポートする

フォーム

  • mailtoフォームを使用する
  • フォームアクションを定義する
  • テキスト、ラジオ、チェックボックス、ファイル、画像、選択ボックス、および非表示のフォームフィールドを追加します
  • フィールドセットフィールドとラベルフィールドを使用してフォームにアクセスできるようにします
  • カスタム送信ボタンを作成する
  • JavaScriptでフォームを検証する(Spry)

データベースとPHPスクリプティング

  • あなたのサイトをデータベースに添付する
  • PHP / mySQLサイトをセットアップする
  • Spry要素を使用してデータベースに接続します
  • ページにデータオブジェクトを挿入します
  • Spryデータソースまたはディスプレイをテストおよび更新します
  • デザインビューで複雑な動的サイトを編集する
  • 動的に関連するすべてのファイルを検出して、PHP CMSサイト(WordPress、Joomla、およびDrupal)をアセンブルします* CS5の新機能
  • Zendフレームワークなどのサードパーティフレームワークを含む、PHPコードのカスタムクラスヒント* CS5の新機能

フレーム

  • フレーム付きのWebサイトを構築する
  • noframesコンテンツを編集する
  • フレームのフォーマットとスタイル設定
  • フレーム間にデフォルトのリンクターゲットを設定する

双方向性を追加する

  • フォトアルバムを作成する(CS5ではなくなりました)
  • Webページにサウンドを追加する
  • ドロップダウンメニューを作成する
  • Dreamweaverの動作を使用して、ポップアップウィンドウを開いたり、ジャンプメニューを作成したり、サウンドを再生したり、画像を交換したりします。
  • RSSフィードをサイトに追加する
  • ロールオーバーとしてFlashテキストを挿入します
  • CSSテキストをロールオーバーとして挿入します
  • 他のプラグインを挿入する
  • Spryメニューバー、タブ付きパネル、アコーディオン、ツールチップ、折りたたみ可能なパネルを追加します
  • JavaScriptを知らなくても、ウィジェットブラウザを使用してサイトの新しいウィジェットを見つけることができます

あなたのページをテストする

  • ライブビューでページをテストして、JavaScriptとインタラクティブ機能による変更を確認します* CS5の新機能
  • HTMLを検証します
  • 複数のブラウザでページをプレビューする
  • BrowserLabを使用して、他のオペレーティングシステムでページをプレビューします* CS5の新機能
  • Device Centralを使用して、モバイルデバイスでページがどのように表示されるかを確認します
  • ブラウザの互換性を確認する
  • サイトが機能するために必要なものに一致するように設定を変更します
  • 内部サイトのリンクを確認する
  • サイトのアクセシビリティをテストします(CS5ではなくなりました)
  • 変換する Word文書 HTMLへ

Dreamweaverをカスタマイズする

  • 拡張機能を追加する
  • 拡張機能を無効にする
  • ショートカットでDreamweaverをカスタマイズする

効率を上げる

  • 組み込みのキーボードショートカットを使用する
  • コードスニペットを使用する
  • テンプレートを作成して使用する
  • カスタムテンプレートから新しいページを生成する
  • テンプレートを更新する
  • Dreamweaverライブラリを使用して1つのファイルを別のファイルに含める
  • ライブラリアイテムを更新する
  • SSIを使用して1つのファイルを別のファイルに含める
  • 検索と置換を使用する