FC2ブログ

スポンサーサイト

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

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

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

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

使用ソフト

DreamweaverFireworks

使用教科書

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

授業の内容

1コマ目

●フレームを作成した場合の削除のしかた・・・

削除したいフレームの幅を0にするとフレームがなくなる。

ドリームウィバーでデザインの統一 DW&FWトレーニングブック P130~137

ライブラリ・・・共通する要素を全てのページに適用させる方法

テンプレート・・・ページデザインを共通化して全てのHTMLファイルに適用させる。

ライブラリの作成

●ライブラリに登録する・・・

登録したいコンテンツ、この教科書だとテーブルをライブラリに登録する。

ファイルパネルのアセットを選択し、パネルの左側のアイコンの中の一番下の本の絵が描かれたアイコンを選択

ライブラリのパネルになったら、ライブラリに登録したい部分を選択して、パネル右下のアイコンの右から3番目の「新規ライブラリ項目」を選択するとライブラリに登録される。

拡張子は.lbiで登録され、ファイルは定義サイトにLibraryフォルダが作成される。

記述タグは、ドリームウィバーで認識するため、コメント部分に定義されている。

<!-- #BeginLibraryItem "/Library/P2_14A.lbi" -->・・・ここから
<table width="570" border="1" align="center" cellpadding="3" cellspacing="0">
<tr>
<td bgcolor="#FFFF00"><strong>■5周年記念キャンペーンのお知らせ■</strong></td>
</tr>
<tr>
<td><p>7月12日~17日にお申し込み頂いたお客様に<strong>受講料10%オフ</strong>のサービス!!  お申し込みはこちら</p></td>
</tr>
</table><!-- #EndLibraryItem -->・・・ここまでがドリームウィバーでの認識タグ

●ライブラリを挿入する・・・

ライブラリを挿入したい部分を選択して、ファイルパネルからアセットのライブラリからドラック&ドロップしてもっていく。

●ライブラリを編集・・・

アセットパネルからライブラリ登録したファイルをダブルクリックすると画面が立ち上がるので、ファイルを編集して保存する。

するとライブラリ項目の更新画面が立ち上がるので、「更新」ボタンを押す。

すると、ページの更新ウィンドウが立ち上がるので、「閉じる」を押す

使用方法としては

ページで共通のコンテンツ(メニューバーやサイトのリンク等)をライブラリに登録すると、ページを更新する手間が省ける。

 

2コマ目

ドリームウィバーでテンプレートの作成 DW&FWトレーニングブック P135~137

●テンプレートの作成・・・

ファイルメニュー→テンプレートへ保存を選択

※拡張子は、.dwt

保存名を付けて保存をする。

●編集可能領域の指定・・・

編集したい部分を選択して、挿入メニュー→テンプレートオブジェクト→編集領域を選択

※CTRL+ALT+Vでも同じ効果ができる。

新規編集可能領域ウィンドウが立ち上がるので、名前を記入して「OK」を押す。

※間違って名前を付けた場合・・・

その部分を選択しすると、プロパティインスペクタから名前を変更する。

●テンプレートから作成・・・

ファイル→新規を選択すると、ウィンドウが立ち上がるので、テンプレートタブを選択し、今保存したテンプレートを選択する。

データを入力し、新しくファイルを作成する。

●テンプレートの編集・・・

元のテンプレートファイルを変更すると、その変更が適用される。

アセットパネルのテンプレートボタン(左側のアイコンの下から2番目、ページの絵が書かれたアイコン)を選択して、

テンプレート化したテンプレートをダブルクリックするとテンプレートファイルが立ち上がるので、そこから編集する。

使用方法として・・・

テンプレートの使用方法として、ページのデザインを統一して、数多くのページを作成する場合等に使用すると、作業が早くなる。

 

3コマ目

ファイアーワークスでスライス機能を使う DW&FWトレーニングブック P138~142

スライスとは分割する機能である。

画像データの空白部分をスライスでそぎ落として画像の部分されているものを保存する。

ドリームウィバーで表示させる場合は、テーブルタグを使用して表示させる。

●スライスの作成・・・

ツールボックスのWEBセクションにあるスライスツールを使用し、必要なグラフィックが入るように、最小限の矩形で分割する。

※あまり細かく分割しないよう注意する。

●スライスの書き出し・・・

ファイルメニューから書き出しを選択すると書き出される。

書き出しを選択すると、HTML(テーブルタグ)と画像ファイル(分割した画像)が新しくフォルダに作成され、そこに書き出される。

●書き出した画像をドリームウィバーに挿入する場合は、挿入したい部分にカーソルを合わせて、挿入→イメージオブジェクト→FireworksHTMLを選択して、ウィンドウが表示されるので、ファイアーワークスで作成したHTMLを選択する。

※ツールバーのボタンの一般のイメージを挿入から選択も可能

 

4コマ目

ドリームウィバーでリンクボタンを作る DW&FWトレーニングブック P144~151

絶対パスと相対パスについて DW&FWトレーニングブック P144

●絶対パス・・・他人のホームページにリンクをかける場合に使用する

(例)

<a href="http://www.jc-21.co.jp/web/pk19007/10422/">左のようなhttpから始まるリンク先</a>

●相対パス・・・自分のホームページ同士にリンクをはる場合はこちらの場合を使用します。

(例)

<a href="jc-21/test>自分の今いるフォルダからみてどこにファイルがあるか示した方法</a>

つまり、絶対パスの中でリンクをのパスが被ってる部分を省略して記述している形。

ドリームウィバーでテキストリンクを設定する DW&FWトレーニングブック P149

●リンク先の設定・・・

テキスト・またはイメージを選択して、プロパティインスペクタのリンクからリンク先を設定する。

ターゲットアイコンをドラック&ドロップして、ファイルパネルからリンクしたいファイル先を選択するとリンクができる。

●ロールオーバーボタンを作成する

ツールバーのイメージ挿入から「ロールオーバーイメージ」を選択します。

ウィンドウが立ち上がるので、各イメージを選択して挿入する。

出来上がったタグは下記

<a href="P3_A_toy_a.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('toy','','image/toy_a_over.gif',1)"><img src="image/toy_a.gif" alt="お気にいりおもちゃ" name="toy" width="100" height="80" border="0"></a>

onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('toy','','image/toy_a_over.gif',1)"の部分がJavaScriptでロールオバーをする記述

onMouseOut="MM_swapImgRestore()"で、マウスポイントが外れた場合に起こす行動で、ここでは何も記述されていないので元にもどる。

onMouseOver="MM_swapImage('toy','','image/toy_a_over.gif',1)"で、マウスポインタが重なった場合toy_a_over.gifの画像を表示させるとゆうこと。

 

5コマ目

ドリームウィバーでスワップイメージを作成する DW&FWトレーニングブック P152~157

スワップイメージとは、マウスを重ねたとき、別の場所の画像が切り替わるようにする。

●スワップイメージで表示させたいイメージに名前を付ける。・・・

名前はプロパティインスペクタの左端のイメージの下に名前を付ける。

●スワップイメージの設定・・・

タグパネルを開き、ビヘイビアのタグに切り替える。

タグパネルの+マークをクリックして、スワップイメージを選択する。

先ほど名前を付けたイメージを選択して、ソースの設定部分に入れ変えたい画像のイメージを選択させる。

出来上がったタグがこんな感じ

<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('front','','image/front_over.gif',1);MM_swapImage('photo','','image/etc_photo_02.jpg',1)"><img src="image/front.gif" alt="前" name="front" width="50" height="50" border="0"></a>

JavaScriptでスワップイメージの記述がされている。

イメージプレースホルダ DW&FWトレーニングブック P165

画像の大きさをあらかじめ挿入したい場合、ツールバーのイメージからイメージプレースホルダを作成する。

ドリームウィバーでテキストにスワップイメージを設定する P156~157

●スワップイメージで表示させたいイメージに名前を付ける。・・・

名前はプロパティインスペクタの左端のイメージの下に名前を付ける。

●テキストにリンクを張る・・・

ドリームウィバーだとリンクにしかスワップイメージが張れないので、現在のページにリンクを張る。

●あとは先ほど画像で行った処理と同じ・・・

タグパネルを開き、ビヘイビアのタグに切り替える。

タグパネルの+マークをクリックして、スワップイメージを選択する。

先ほど名前を付けたイメージを選択して、ソースの設定部分に入れ変えたい画像のイメージを選択させる。

 

6コマ目

ドリームウィバーでホットスポットを作成する。 DW&FWトレーニングブック P158~161

●ホットスポットの作成・・・

ホットスポットを作成したい画像を選択して、プロパティインスペクタのマップの多角形スポットツールを使い、ホットスポットを作りたい部分を囲む。

●ホットスポットにリンクを張る・・・

ホットスポット部分を選択して、プロパティインスペクタからリンクを設定する。

●ホットスポットをタグで実現するためには・・・

タグは、

<img src="image/mychi_photo_01.jpg" alt="" name="photo" width="120" height="160" border="0" usemap="#photoMap" id="photo">

usemap="#photoMap"がイメージタグについている。

さらに、ホットスポットの定義として、<map name="photoMap"></map>で囲まれた部分がホットスポットの定義

<map name="photoMap">
<area shape="poly" coords="35,1,29,21,27,27,28,31,23,38,22,45,28,51,27,64,29,82,33,97,37,117,37,139,38,146,46,146,47,128,60,128,69,122,68,147,80,154,76,127,82,100,99,76,94,63,91,57,99,48,97,34,102,27,101,16,94,10,81,16,65,16,43,6" href="linksaki.htm">・・・この部分がポインタの座標で、2つでX・Yの座標位置
</map>

が記述されている。

 

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

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

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

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

トラックバック トラックバックURL:
http://hamacom.blog4.fc2.com/tb.php/40-cf306b98
サイズ変更ボタン サイズ縮小ボタン サイズ拡大ボタン サイズリセットボタン
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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。