Skip to main content

Adobe Dreamweaverの使い方

[Learn Dreamweaver CS6] 01 Dreamweaverとは? (六月 2025)

[Learn Dreamweaver CS6] 01 Dreamweaverとは? (六月 2025)
Anonim

Adobe Dreamweaverは、Webデザイナーにとって非常に多くのことができるため、このような強力なツールです。もちろん、あなたができるすべてのことは、学習することを挑戦します。最新バージョンであるCS5の変更を含め、Dreamweaverが実行できる多くの機能の一部をご紹介します。 Dreamweaver CS5に欠けているものをチェックすることを忘れないでください。

サイトの定義

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

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

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

Webページの作成

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

CSS

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

テキスト

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

リンク

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

イメージ

  • ページにグラフィックスを追加する
  • 画像を編集する
  • 画像のサイズ変更
  • 画像に代替テキストを追加する
  • 画像にアクセシビリティオプションを追加する
  • 画像とテキストの整列
  • ロールオーバーイメージを作成する
  • イメージマップを使用する
  • トレース画像を使用する
  • イメージプレースホルダを使用する
  • Fireworks HTMLを挿入する
  • Photoshopファイルを挿入する

レイアウト

  • 付属のフリーテンプレートを使用する* CS5の新しいCSSスターターレイアウト
  • レイアウトのdivを挿入する
  • CSSスタイルパネルでdivを編集する
  • 絶対配置された要素を挿入する
  • プロパティインスペクタで絶対配置された要素の書式設定
  • ルーラー、グリッド、およびガイドを使用する

リスト

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

テーブル

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

フォーム

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

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

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

フレーム

  • フレームに入れられたウェブサイトを構築する
  • 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つのファイルを含める
  • 検索と置換の使用