ホームページ制作Dreamweaverの使い方
     
   

















 
 
 

Dreamweaverの使い方(操作方法)をアニメーションで覚えよう

このサイトでは、代表的なホームページ制作ソフトであるAdobe Dreamweaverの使い方を、FLASHによる操作アニメーションを使い、説明します。
ホームページの制作・WEBサイトの構築にお役立てください。

なお、 操作アニメーションは、Macromedia Captivateというソフトウェアを用いて作成しています。

海外デザイナーによるホームページのテンプレートサイト

XOOPSスッキリ!!まるわかり講座  Google Analytics 使い方、絶対活用講座  HTMLソースコードを保護

Dreamweaver使い方(動画操作説明)の収載内容一覧

テキスト
テキストを揃える(左揃え、中央揃え、右揃え)
テキストを揃える(段落をあらわすタグに対して適用される説明)
テキストをインデントする
テキストのインデントを解除する
次行を自動的にインデントさせてテキスト入力する
テキストのフォントを指定する
テキストを太字(ボールド)にする
テキストを太字(ボールド)にする(クラススタイルによる方法)
テキストをイタリック(斜体)にする
テキストにアンダーラインを設定する
テキストに取り消し線を設定する
テキストに背景色を設定する
段落に対して背景色を設定する
テキストの背景にイメージを表示する
リスト
入力済みテキストをリスト表示する
リスト表示されたテキストをリスト解除する
入力済みテキストを番号つきリスト表示する
番号つきリスト表示されたテキストをリスト解除する
テキスト入力をしながらリストを作成する
テキスト入力をしながら番号つきリストを作成する
ネストしたリストを作成する
リストの記号を■に変更する
途中の番号から番号つきリストを作成する
番号つきリストの記号をアルファベットにする
リストの記号にイメージを使う
リスト記号を内側に表示する
ページの作成
新規にページを作成する(ファイルメニューから新規を選ぶ方法)
新規にページを作成する(スタートページを用いる方法)
ページの表示サイズを設定する
ページにタイトルをつける(ページプロパティによる設定)
ページにタイトルをつける(ドキュメントツールバーによる設定)
metaタグで、基準となるスタイルシート言語(CSS)、スクリプト言語(JavaScript)を指定する
JavaScriptの利用
自動的にジャンプするページをつくる
ロールオーバーイメージを作成する
作成済みロールオーバーイメージの「元のイメージ」を変更する
作成済みロールオーバーイメージの「ロールオーバーイメージ」を変更する
作成済みの画像に、ロールオーバーイメージの設定をする
ボタンつきジャンプメニューを作成する
ボタンなしジャンプメニューを作成する
作成済みジャンプメニューの項目の順番を並び替える
ナビゲーションメニューを作成する(フレームにメインコンテンツを表示)
ナビゲーションメニューを作成する(各ページにナビゲーションメニューを設定する)
ステータスバーにテキストを表示する
ポップアップメッセージを表示する
スワップイメージを設定する
スペーサーイメージ
スペーサーイメージ(spacer.gif)をDreamweaverで作成する
スペーサーイメージ(spacer.gif)の使用方法(空きスペースとして利用する)
スペーサーイメージ(spacer.gif)の使用方法(段落間の調整として利用する)
スペーサーイメージ(spacer.gif)の使用方法(テーブルのセル幅を確保するために利用する)
ローカルサイト
ローカルサイトの新規作成
ローカルサイト情報を編集する
ローカルサイトを削除する
ローカルサイトの定義「初期設定イメージフォルダ」の説明
Shiftキーを押しながら、テキスト入力時に改行したときのHTMLタグの違い
既存HTMLファイル
最近使用したファイルを開く(ファイルメニューによる方法)
最近使用したファイルを開く(スタートページを用いる方法)
リンク
リンクを設定する
電子メールリンクを設定する(挿入メニューからの方法)
電子メールリンクを設定する(プロパティからの方法)
アプリケーション設定
スタートページを表示させないようにする(編集メニューより環境設定ダイアログを利用する方法)
スタートページを表示させないようにする(スタートページによる設定)
スタートページを表示させる(編集メニューより環境設定ダイアログを利用する方法)
画像の拡張子とグラフィックソフトを関連づける
イメージを関連づけたグラフィックソフトで編集する
特殊文字
区切り線を挿入する
区切り線のプロパティを変更する
現在の日時を挿入する
特殊文字「<br>」を挿入する
特殊文字「区切りなしスペース &nsbp;」を挿入する
特殊文字「著作権©」を挿入する
特殊文字「登録®」を挿入する
特殊文字「商標™」を挿入する
特殊文字「ポンド£」を挿入する
特殊文字「円¥」を挿入する
特殊文字「ユーロ€」を挿入する
特殊文字「開始引用符“」を挿入する
特殊文字「終了引用符”」を挿入する
特殊文字「Mダッシュ—」を挿入する
その他の特殊文字「ú、Ö、‰など」を挿入する
テーブル
テーブルのセルに画像を挿入する
テーブルを作成する
キャプションつきのテーブルを作成する
テーブルを削除する
テーブルのサイズを変更する(マウスドラッグによる方法)
テーブルのサイズを変更する(プロパティで数値を入力する方法)
テーブルをマウスドラッグで移動する
テーブルのサイズを変更する(プロパティで数値を%で指定する方法)
テーブルの位置を左揃え、中央揃え、右揃えにする
テーブルのセルにテキストを入力する
テーブルのセルに見出しを設定する
テーブルに行を挿入する
テーブルの行を削除する
テーブルに列を挿入する
テーブルの列を削除する
テーブルに複数の行、列を挿入する
テーブルの特定の行の幅を変更する
テーブルの特定の列の幅を変更する
テーブルの行を移動する
テーブルの列を移動する
テーブルの列内のテキスト、画像に中央揃え、右揃えを適用する
テーブルの列内のすべてのテキストに文字揃え(左揃え、中央揃え、右揃え)を適用する
テーブルの行内のすべてのテキスト、画像を上揃え、中央揃え、下揃え、ベースライン揃えにする
テーブルのセルに余白を設定する
テーブルのセルの間隔を設定する
テーブルのセル内のイメージにテキストの回りこみを適用する
数値を入力してテーブルの列の幅を変更する
数値を入力してテーブルの行の高さを変更する
テーブルのセルに背景色を設定する
行単位でテーブルのセルに背景色を設定する
テーブルで複数のセルを選択する
列単位でテーブルのセルに背景色を設定する
テーブルにテーブルのフォーマットを適用しデザインを変更する
テーブルに背景色を設定する
テーブルのボーダーを変更する
テーブルのボーダーに色をつける(ボーダーカラー)
テーブルのすべてのセルを選択する方法(マウスドラッグによる方法)
テーブルの背景に画像を表示する
テーブルのセルに背景イメージを表示する
外部データ(タブ、カンマ、コロン、セミコロン区切りテキストデータ)を読み込んでテーブルを作成する
テーブルの列をソートする(第1ソート条件、第2ソート条件を設定して並び替える)
拡張テーブルモードにする
テーブルで複数のセルを選択する2
テーブルのセルを結合する
テーブルのセルを分割する
フレーム
既存のページにフレームを設定する
フレームセットを保存する
フレームを保存する
フレーム名を変更する
フレームのサイズを変更する
数値を入力してフレームのサイズを変更する
パーセント(%)を指定してフレームのサイズを変更する
フレームを追加する
フレームを削除する
既存のページをフレーム内に表示する
フレームのボーダーを非表示にする
フレームのボーダーに色を設定する
フレームのサイズ変更を可能にする
フレームのサイズ変更を禁止にする(入れ子になったフレームの場合の注意点)
3段組の真ん中のフレームを上下中央に表示する
入れ子にした3段フレームを作成する方法と通常の3段組フレームとのソースの違い
フレームでスクロールを表示しないようにする
フレームにスクロールを表示する
フレームに自動スクロールを設定する
フレームのサイズを指定する(ネストしたフレームに対する設定)
レイアウトテーブル
レイアウトモードを表示する
レイアウトテーブルを作成する
レイアウトセルを作成する
レイアウトテーブルのサイズを変更する
レイアウトセルのサイズを変更する
レイアウトセルを移動する
ピクセル単位でレイアウトセルを移動する
レイアウトセルが別のレイアウトセルに吸着しないように作成する
レイアウトセルにテキストを入力し、画像を読み込む
レイアウトセル内のテキストや画像を揃える(左揃え、中央揃え、右揃え、下揃え、上揃え)
レイアウトセル内のテキストの折り返しを解除する
レイアウトテーブル内のすべてのレイアウトセルに余白と間隔を設定する
レイアウトセル内のテキストを画像の左または右に回りこむようにする
レイアウトセルにスタイルシート(css)を適用し、テキストカラー、セル余白などを設定する
スペーサーイメージ(spacer.gif)を挿入して、レイアウトテーブルのセル幅を固定する
レイアウトテーブルに対し自動伸縮ボタンを選択し、ブラウザウィンドウの横幅にあわせて右列だけを伸縮させる
レイアウトテーブルの特定の列を自動伸縮にする
レイアウトテーブル、テーブル内にコンテンツすべてを作成した場合、ページの左マージン、上マージンを0にする
CSS・スタイル
テキストにCSSスタイルが自動的に設定されるのを確認する
段落(テキスト)に既存のCSSスタイルを適用する
段落の一部のテキストに既存のCSSスタイルを適用する
テキストに設定したCSSスタイルを解除する
既存のCSSスタイルの名前を変更する
CSSスタイルを削除する
テキストのフォントサイズを変更する
テキストのフォントカラーを設定する
段落を選択してスタイルを適応する
既にスタイルが適用されているテキストにさらにスタイルを適用したときのクラススタイルを確認する1
既にスタイルが適用されているテキストにさらにスタイルを適用したときのクラススタイルを確認する2
既存の見出しタグにCSSスタイルを設定する
段落タグにCSSスタイルを適用する
CSSスタイルを設定し、段落の1行目をインデントする
CSSスタイルを用い、文字間隔を設定する
CSSスタイルでイメージにフロートを設定する
CSSスタイルの修正
イメージ
イメージを挿入する
イメージを挿入する(挿入メニューからの方法)
イメージを挿入する(フォルダ内のイメージをドラッグ&ドロップで挿入する方法)
イメージを挿入する(ローカルサイト内のイメージをドラッグ&ドロップで挿入する方法)
イメージを差し替える
イメージを削除する
イメージを移動する
イメージを中央に揃える
イメージを右に揃える
イメージをコピーしながら移動する
イメージをコピーして別の場所へ貼り付ける
イメージのサイズを縦横比を変えずに変更(拡大・縮小)する(マウスドラッグによる方法)
イメージの縦横サイズを自由に変更する(マウスドラッグによる方法)
イメージのサイズを変更する(プロパティによる方法)
変更したイメージのサイズをオリジナルの画像のサイズにリセットする
イメージをトリミング(切り抜き)する
イメージの明るさ/コントラストを調整する
イメージをシャープにする
イメージの横に続けてテキストを入力する
イメージの上にテキストを揃える
イメージに対してテキストを中央揃えにする
イメージをテキストの下またはベースラインに揃える
イメージに対して余白を設定する
イメージに対してボーダーを設定する
ダミーのイメージを配置する
イメージプレースホルダーを使って作成したダミーのイメージを実際のイメージに差し替える
粗いイメージにリサンプリングを行い粗さを取り除く
レイヤー
マウスドラッグでレイヤーを作成する
レイヤーを作成する(挿入メニューによる方法)
デフォルトのレイヤーサイズを設定する
レイヤーを選択する
レイヤー名を設定する
レイヤーを削除する
レイヤーのサイズを変更する(マウスドラッグによる方法)
矢印キーによりレイヤーを移動する
矢印キーによりレイヤーのサイズを変更する
プロパティインスペクタによりレイヤーのサイズと位置を変更する
レイヤーを移動する(マウスドラッグによる方法)
レイヤーパネルでレイヤーを選択する
レイヤーにイメージを挿入する
レイヤー内にテキストを入力する
レイヤーに背景色を設定する
レイヤー内のテキストにスタイルを設定する
レイヤーにスタイルを適用する
レイヤーを重ねて描画する
レイヤーを重ねる順序を変更する
Zインデックスを入力して、レイヤーの重ね順を変更する
レイヤーを一時的に非表示にする
レイヤーをネストする
複数のレイヤーを上揃えにする
複数のレイヤーを左揃えにする
複数のレイヤーのサイズを統一する
レイヤーをテーブルに変換する
テーブルをレイヤーに変換する
レイヤーをテーブルに変換したときに空セルを作成しない
Netscape4.xでのレイアウト崩れを防ぐためのJavaScriptがレイヤー作成時に自動的に埋め込まれるように設定する
Netscape4.xにおけるレイヤーのレイアウト崩れを防ぐJavaScriptをレイヤーの作成後に挿入する
イメージを時間で切り替える
レイヤーをドラッグする


 
[テキスト][リスト][ページの作成][JavaScriptの利用][スペーサーイメージ][ローカルサイト][既存HTMLファイル][リンク][アプリケーション設定][特殊文字][テーブル][フレーム][レイアウトテーブル][CSS・スタイル][イメージ][レイヤー]

お問い合わせ

本コンテンツについてご意見・ご要望がございましたら、 まで電子メールでお問い合わせください。

   
 

Copyright (C) 2006-2009 インターネットテクノロジー教育研究会 All Rights Reserved