FC2ブログ

スポンサーサイト

  1. トップ
  2. スポンサー広告
  3. スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサー広告 | コメントを書いてくれる人はこちら(-) | トラックバック(-) | [編集]
このページのトップへ移動する。

職業訓練WEBクリエーター科19日目

  1. トップ
  2. WEB制作ソフトの勉強
  3. 職業訓練WEBクリエーター科19日目

職業訓練WEBクリエーター科19日目

感想

今日でDW&FWトレーニングブックの中の内容が終了した。

これで一通りDreamweaverFireworksの機能を学ばせてもらった。

ゆくゆくは、この学習した機能をWEBに公開していこうと考えています。

使用ソフト

DreamweaverFireworks

使用教科書

DW&FWトレーニングブックホームページ辞典

授業の内容

1コマ目

ホットスポット解説 ホームページ辞典 P116~119

イメージタグで画像を挿入

<img src="~画像のファイル~" usemap="#任意で名前を選択">

ホットスポットの定義はHTMLの文章のどこに記述しても作動する。

ホットスポットのタグ

<map></map>で囲んだ部分

<area >タグが範囲の選択の部分・・・一枚の画像で複数のホットスポットを使用したい場合は、この<area>タグを選択する。

ホットスポットの範囲選択図形は3種類で、

  • 四角・・・rect
  • 円・・・circle
  • 多角形・・・poly

になる。

記述のしかたは、<area>の後ろに、<area shape="この部分が図形の定義">と記述する。

範囲選択は、X座標・Y座標の2つの数値を一組として記述し、座標の始まりは左上から数えて座標を記述する。

記述のしかたは、<area shape="この部分が図形の定義" coords="この部分に座標を記述する。">

座標を指定する数は、図形により異なりそれぞれ

  • 四角・・・rect   左上のX・Y座標と、右下のX/Y座標の4点
  • 円・・・circle   中心座標のX・Yと半径の3点
  • 多角形・・・poly 多角形の頂点(線の方向が変わる場所)の各X・Y座標を指定

まとめると、

<map name="上で任意に名前を選択した名前">
<area shape="この部分が図形の定義" coords="この部分に各座標を記述する。">
</map>

ファイアーワークスでドリームウィバーでナビゲーションバーを作成 DW&FWトレーニングブック P162~169

ドリームウィバーのシンボルボタン機能を使う

通常・・・ボタンに対応する画面は表示されていない

オーバー・・・マウスポインタが重なっている

ダウン・・・ボタンに対応するページが表示されている

オーバーダウン・・・上記+マウスポインタが重なっている

作業

●シンボルに変換・・・

ボタンの画像の部分を選択して、修正メニュー→シンボル→シンボルに変換を選択

※シンボルを解除する場合は、修正メニュー→シンボル→シンボルを解除をした後にグループ化になっているので、それも解除してあげる。

 

2コマ目

●シンボルを編集・・・

通常・オーバー・ダウン・オーバーダウンのボタンを編集する。

●ボタンシンボルの複製・・・

メニューバーのボタンは複数あるので、ボタンをシンボルごと複製する。

CTRL+ALT+SHIFTを押しながらドラックして、複製したい場所に持っていく。

●ボタン名の設定・・・

ボタンの名前を変えたいシンボルを選択すると、プロパティインスペクタにテキストの項目があるので、この部分で名前を変更する。

●スライスの設定・・・

ボタン以外の部分を書き出すために、タイトルロゴをスライスツールで選択する。

●イメージの書き出し・・・

ファイル→書き出しを選択します。 CTRL+SHIFT+R

※書き出す際に、HTMLファイルとイメージを設定して、スライスのない領域も含めるをOFF(チェックを外す)サブフォルダにイメージを置くをON(チェックマークを入れる)

●ナビゲーションボタンの配置・・・

ドリームウィバーを起動して、leftFreameに設定されたdummy.htmとP3_B_menu.htmを入れ替える。

●リンクの設定・・・

ナービゲーションボタンを選択し、タグパネルのビヘイビアタグの+マークをクリックして、中のメニューのナビゲーションバーイメージの設定を選択して、立ち上がったウインドウのクリック時にURLに移動の部分にリンクを設定する。

 

3コマ目

ドリームウィバーでサブウィンドウを設定する。 DW&FWトレーニングブック P170~173

●サブウィンドウを開いてそこにコンテンツを表示させる方法・・・

サブウィンドウにしたい部分を選択して、ビヘイビアパネルの+からブラウザウィンドウを開くウィンドウの項目を入力する。

●イベントの設定・・・

このままだと、ページが表示された時にサブウィンドウが立ち上がってしまうので、これを変更する。

サブウィンドウを選択した項目を選択してビヘイビアパネルのブラウザウィンドウを開くの右に「on Load」と書いてる部分を選択する、右側に下向きの矢印を選択し、「onClick」に切り替える。

 

4コマ目

ドリームウィバーでポップアップメニューとジャンプメニューの設定 DW&FWトレーニングブック P174~182

やり方はいろいろあるが、教科書の方法は、

●ポップアップメニューは・・・

ファイアーワークスでポップアップまで作成する。(部品を作成する。)・・・

図形をスライスにして、ビヘイビアの設定をする。

ビヘイビアポップアップエディターを使用する。

●ドリームウィバーでリンク先を設定する・・・

ビヘイビアパネルのポップアップを表示項目をダブルクリックしてそれぞれの項目のリンクを編集する。

 

5コマ目

●ジャンプメニューは ホームページ辞典 P142~144

ドリームウィバーで設定する。(タグによるり設定する。)

ツールバーのジャンプメニューの挿入で挿入できる。

最初のプルダウンメニューに、「移動先項目を選択してください」みたいな案内を入れておくと使いやすい。

今回作ったタグは

<form name="form1">
<select name="menu1" onChange="MM_jumpMenu('parent',this,0)">
<option selected>移動先を選択してください</option>
<option value="linksaki_A.htm">ケーキの作り方</option>
<option value="linksaki_B.htm">ケーキ用語</option>
<option value="linksaki_C.htm">人気ランキング</option>
<option value="linksaki_D.htm">リンク</option>
</select>
</form>

<form>タグで形成されている。

<select>タグは下向き三角のプルダウンメニューを表示するタグ

<option>タグは選択項目

 

6コマ目

ファイアーワークスで点滅をするGIFを作成する。 DW&FWトレーニングブック P186~187

作成したGIFの書き出し方が異なるので、注意すること。

ロールオーバー等と異なり、アニメーションGIFは一つのファイルとして書き出す。

書き出す際には書き出しプレビューからアニメーションGIFに選択して書き出す。

ファイアーワークスで回転をするGIFを作成する。 DW&FWトレーニングブック P186~187

モーションパスを使用して作成する。

アニメーメーションプロパティ

オブジェクトの移動・・・シンボル化したオブジェクトを移動させる。

方向・・・どの方向に移動するか決める。

拡大・縮小・・・大きくするのか、小さくするのかを決める

不透明度・・・透明にするのか、しないのか決定する

回転・・・オブジェクトを回転させる。

ファイアーワークスで直線移動をするGIFを作成する。 DW&FWトレーニングブック P192~197

2種類の方法がある。

トゥーイーンによる設定

スポンサーサイト
このページのトップへ移動する。

評価・感想を書いてくれた人の内容

この記事に対する評価・感想を投稿

管理者にだけメッセージを送る

トラックバック トラックバックURL:
http://hamacom.blog4.fc2.com/tb.php/41-62195c97
サイズ変更ボタン サイズ縮小ボタン サイズ拡大ボタン サイズリセットボタン
RSSフィード

ブロとも申請フォーム
ブログ内検索

最近のエントリ
ユーザータグ
カレンダー

08 | 2018/09 | 10
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 - - - - - -

ハマーにメールを送る

私ハマーにご意見・ご感想・調べてほしい事・オススメサイト等ありましたら気軽にメールしてください。

最近のコメント
全ての記事を表示する
カテゴリー
QRコード

QRコード

覗いてくれた人

月別アーカイブ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。