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種類の方法がある。

トゥーイーンによる設定

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

職業訓練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>

が記述されている。

 

このページのトップへ移動する。

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

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

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

使用ソフト

Dreamweaver

使用教科書

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

授業の内容

1コマ目

DW&FWトレーニングブックpart2の内容 P86~142

テキストデザイン P86~105 DW&FWトレーニングブック

DW&FWトレーニングブックのP86~91は書式設定方法が記述されている。

ドリームウィバーで「プロパティインスペクタ」でデザインする。 DW&FWトレーニングブック P92~95

●本文の設定・・・

ページのプロパティからページのフォント・サイズ・テキストカラー・背景色を指定する。

今回は、ページ内にスタイルシートを記述する。

●Style1の設定・・・

Style1クラスを新たに設定して、文字の大きさ、太字設定、文字の色を設定。

設定の仕方は、プロパティインスペクタで設定する。

●Style2の設定・・・

上記と同様に スタイルをかけたい文字を選択して適用する。

別の段落にもスタイルを適用する。

スタイルをかけたい文字を選択し、プロパティインスペクタからスタイル項目からスタイル2を選択する。

●リストを選択する・・・

リスト項目にしたい部分を選択し、プロパティインスペクタからリストボタンを押す。

※リストの項目の中にさらにリストの項目を入れたい場合、リスト項目にしたい部分を選択し、プロパティインスペクタからインデントボタンを押す。

●番号リストを作成する・・・

番号リストにしたい部分を選択して、プロパティインスペクタから番号リストボタンを押す。

ドリームウィバーで「CSSスタイル定義」でデザインする。 DW&FWトレーニングブック P96~98

●スタイル1の変更・・・

CSSスタイルパネルからスタイルの編集ボタン(右から2番目)をクリックして、スタイル1の設定を変更する。

または、プロパティインスペクタからスタイル項目を選択して、スタイルの管理をクリックして、スタイル番号を選択すると同様な設定になる。

ここでは、文字のカラー・背景色・テキストの行揃えを変更した。

●スタイル2の変更・・・

上記と同様の設定方法。

ここでは、スタイル2の下線部分にボーダーを設定する。

注意ポイント!!

ブラウザ上では異なるデザインがある。

この場合は、ドリームウィバー上では、実線で表示されているが、上で、ボーダーのスタイルをダッシュ(破線)を設定したので、ブラウザ上では破線で表示される。

●スタイルの新規作成・・・

CSSスタイルから、style3の名前を付けて、下のクラスの設定をすると、設定項目がでてくるので、ボックスの下に1emsのマージンを設定する。

style3を適用したい部分を選択して、プロパティインスペクタから、スタイル項目の中からstyle3を選択する。

●スタイルの削除方法・・・

HTMLの記述で、いらなくなったスタイルがある場合、CSSスタイルパネルから削除したいスタイルを選択し、右下にあるのゴミ箱の絵を押す。

●スタイルの名前の変更方法・・・

プロパティインスペクタからスタイルを選択して名前の変更を選択する。

 

2コマ目

ドリームウィバーでドキュメントにCSSスタイルシートをリンクさせる DW&FWトレーニングブック P99~101

これは、1コマ目に作成したHTMLの中に直接記入したCSSを書き出して、新たなHTMLに外部リンクでスタイルを適用させる方法。

●CSSファイルの書き出し・・・

メニュー項目のファイルを選択し、書き出し項目のCSSファイルを選択する。 

※メニュー→ファイル→書き出し→CSS

●CSSファイルのリンク・・・

新しいHTMLを開き、CSSスタイルパネルから、右下にあるアイコンの右から4番目(スタイルシートの添付)を押して、書き出したCSSをリンクする。

新しいHTMLの適用したい部分を選択して、スタイルを選択し、決定していく。

元のファイル(HTMLの中に直接記入したファイル)に外部CSSリンクを設定する・・・

元のファイルにも上記と同様にCSSファイルをリンクさせる。

そのままだと、直接CSSを記述下部分のCSSが適用されてしまうので、直接記述したCSSをCSSスタイルパネルから削除する。

 

3コマ目

●CSSファイルの設定を変更する・・・

CSSスタイルパネルからスタイルを変更すると、変わる。

ここで、リンクさせてHTMLファイルを変更すると、リンクさせたHTMLファイルの見栄えが変わる。

 

ドリームウィバーで表組 DW&FWトレーニングブック P106~111

●テーブルの挿入

挿入メニュー→テーブルを選択すると、テーブルの画面になる。

今回は、行4 列3 ボーダー3ピクセル セル内余白5 セルの間隔2 ヘッダを両方に選択

できた表が下記

     
     
     
     

●文字を入力・・・

文字を記入したいセルを選択して下記のように入力した。

接続方法 通信速度  
ADSL 12Mbps(下り) 900kbps(上り)
CATV 512k~30Mbps(下り) 10Mbps(上り)
FTTH 10M~100Mbps(下り)  

●セルの結合・・・

結合したいセルを複数選択し、プロパティインスペクタの「選択したセルの結合」ボタン(左下の方にセルと書かれた文字の下のアイコン)をクリックしますと、下記のように結合されます。

接続方法 通信速度
ADSL 12Mbps(下り) 900kbps(上り)
CATV 512k~30Mbps(下り) 10Mbps(上り)
FTTH 10M~100Mbps(下り)

●テーブルのデザイン

テーブル全体を選択して、ボーダーカラーを変更すると下記のようにデザインが変更します。

接続方法 通信速度
ADSL 12Mbps(下り) 900kbps(上り)
CATV 512k~30Mbps(下り) 10Mbps(上り)
FTTH 10M~100Mbps(下り)

●セルのデザイン・・・

デザインを変更したいセルを選択して、プロパティインスペクタで変更していくと下記のようになる。

接続方法 通信速度
ADSL 12Mbps(下り) 900kbps(上り)
CATV 512k~30Mbps(下り) 10Mbps(上り)
FTTH 10M~100Mbps(下り)

テーブルのコードは下記のようになります。

<table border="3" cellpadding="5" cellspacing="2" bordercolor="#3333ff">  ここで、余白5ピクセル セルの間隔2ピクセル 線の色#3333ffと設定される。
<tr bgcolor="3333ff">  行に#3333ffの色を背景指定
<th scope="col">接続方法</th>  scope="colで行をグループとしている。
<th colspan="2" scope="col">通信速度</th>  scope="colで行をグループとしている。
</tr>
<tr>
<th bgcolor="#6699FF" scope="row">ADSL</th>  scope="rowで列をグループとしている。#6699FFの色を背景指定
<td bgcolor="#99CCFF">12Mbps(下り)</td>   #99CCFFの色を背景指定
<td bgcolor="#99CCFF">900kbps(上り)</td>   #99CCFFの色を背景指定
</tr>
<tr>
<th bgcolor="#6699FF" scope="row">CATV</th>  scope="rowで列をグループとしている。#6699FFの色を背景指定
<td bgcolor="#99CCFF">512k~30Mbps(下り)</td>   #99CCFFの色を背景指定
<td bgcolor="#99CCFF">10Mbps(上り)</td>   #99CCFFの色を背景指定
</tr>
<tr>
<th bgcolor="#6699FF" scope="row">FTTH</th>  scope="rowで列をグループとしている。#6699FFの色を背景指定
<td colspan="2" bgcolor="#99CCFF">10M~100Mbps(下り)</td>   #99CCFFの色を背景指定
</tr>
</table>

4コマ目

ドリームウィバーでレイアウト DW&FWトレーニングブック P112~129

●レイアウトの種類

  • テーブル
  • レイヤー<div>タグ
  • フレーム・・・ブラウザの画面分割(現在では使わないように推奨される)

ドリームウィバーでテーブルでレイアウトする DW&FWトレーニングブック P114~121

●テーブルモードの設定・・・

表示メニュー→テーブルモード→レイアウトモード

もしくは、ツールバーを一般からレイアウトに変更し、標準からレイアウトに選択する。

●テーブルの作成・・・

レイアウトテーブルを選択し、テーブルを作成する。

●セルの作成・・・

レイアウトセルを描画をクリックし、テーブル上で範囲を指定して決定すると、できる。

●連続してセルを作成・・・

レイアウトセルを描画をクリックし、CTRLキーを押しながらセルを作ると連続でセルを作成することができる。

※セルを作る際もCTRLキーを話さないでセルを作成する

●イメージの挿入・・・

ファイルパネルから選択したいイメージをドラック&ドロップしてレイアウトのパネルに貼り付ける。

●テキストの挿入・・・

ファイルパネルからテキストを開いて、全文をCTRLキー+Aで全部を選択し、CTRLキー+Cでコピーをする。

テキストを挿入したいレイアウトセルに選択し、文字を打てる状態にしたらペーストをする。

●レイアウトの修正・・・

自動伸縮をする場合、スペーサーイメージをスペーサーイメージを作成して自動伸縮したくない部分にそのスペーサーイメージを挿入する。

スペーサーイメージとは、縦横1ピクセルの白いドットである。

この画像の横幅の幅を固定したい幅に設定(widthタグでスペーサー画像を指定)して、固定させている。

スペーサーが入った部分は下の幅の大きさを記入した部分が二重線になる。

 

5コマ目

●イメージテキストの位置関係・・・

マージンと回り込み設定を駆使してレイアウトをすることも可能

ここでは、写真を左に寄せて画像の横幅にマージンを取りることで似たようなレイアウトにすることが可能になる。

ドリームウィバーでレイヤーでレイアウトする DW&FWトレーニングブック P122~125

●レイヤーの作成・・・

挿入メニュー→レウアウト→レイヤーを描くからレイヤーを作成する。

またはツールバーからレイアウトを選択し、標準の左にあるレイヤーを描くをクリック

クリックしたら、テーブルと同様にCTRLキーをおしながらドラック&ドロップでレイヤー枠を作成する。

レイヤーは<div>タグを使用して、絶対位置で位置を選択している。

例・・・<div id="Layer1" style="position:absolute; left:9px; top:54px; width:317px; height:267px; z-index:1"></div>

これは、position:absoluteで、親要素に対して絶対表示の意味で左から9px上から54pxの位置に幅317px・高さ267pxのボックスを表示する設定z-index:1は重なるときの順番なので、番号が大きくなると前に表示されるので、重なった場合は最背面になる。

変更方法は、プロパティインスペクタのZインデックスで変更するか、レイヤーパネルから変更する。

この方法では、ブラウザによっては形が崩れる場合があるので注意する。

 

6コマ目

ドリームウィバーでフレームでレイアウトする DW&FWトレーニングブック P126~129

ブラウザの画面を分割する方法で現在では減少傾向にある。

やり方は、2分割で作るならば2つのHTMLから成り立つ。3分割なら3つ、といったように分割数だけHTMLファイルを作成していく。

●フレームセットの作成・・・

ファイル→新規またはCTRL+Nから新規ファイルを立ち上げる。

左の項目からフレームセットを設定して、真ん中の項目で左固定を選択すると分割方法を記述するHTMLが作成される。

フレームタグは下記参照

<frameset cols="200,*" frameborder="NO" border="0" framespacing="0">・・・ここがフレームタグ
<frame src="file:///C|/Documents%20and%20Settings/jc-21/My%20Documents/SampleSite/UntitledFrame-2" name="leftFrame" scrolling="NO" noresize>・・・ここが左部分のフレームで、HTMLファイルを指定する場所
<frame src="file:///C|/Documents%20and%20Settings/jc-21/My%20Documents/SampleSite/Untitled-5" name="mainFrame">ここが右フレーム
</frameset>フレームタグの終わり。

cols="200,*"・・・横幅の指定左200px,自動幅

frameborder="NO" border="0" framespacing="0"・・・フレームの線なし・幅0px・幅の間隔0px

scrolling="NO"・・・スクロールをしないとゆう記述

●左フレームの表示設定・・・

ウィンドウメニューからフレームを選択すると、右側のパネル欄にフレームパネルがでる。

フレームパネルから左フレームをクリックして選択する。

プロパティインスペクタのソース部分に左フレームのHTMLファイルを選択する。

●フレーム内ドキュメントの修正・・・

左のフレーム部分を選択すると、左フレームの中にあるファイルを選択できるようになる。

ここでは、テーブルタグを真ん中に揃える修正をしている。

●メインフレームの表示設定・・・

左フレームと同様に、フレームパネルで右のメインフレームを選択し、プロパティインスペクタからメインのHTMLファイルを選択する。

●フレームの分割・・・

分割したいフレームをフレームパネルで選択して、ツールバーのレイアウトツールの右から2番目フレームを選択して、分割したい場所を選択する。

課題の場合、上フレームを選択して、上の部分にフレームを追加した。

●フレーム表示ができないブラウザに対しては、<noframes><body>この部分にコンテンツを記述 </body></noframes>が表示される。

このページのトップへ移動する。

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

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

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

今日のテーマ・・・課題で出されたWEBページを作成してみよう。

1コマ目~5コマ目

WEB制作

ここではまず、使用しているソフトの紹介から始めます。

ソフトは2種類で、いずれもWEB制作会社の使用率が高いソフトです。

Dreamweaver(ドリームウィーバー)

このソフトは、WEB制作業界のシェアー率が高いソフトで、ワープロ感覚で、WEBサイトの制作が出来るソフトです。

HTMLのタグ打ちが出来ない人でも簡単にサイトを作成できます。

現在Adobe Dreamweaver CS3.0 (V9.0)が最新バージョンになっています。

WEBサイトデザインソフトDreamweave(ドリームウィーバー)について詳しく見てみる。

Fireworks(ファイアーワークス)

このソフトは、ドリームウィバー同様WEB制作業界のシェアー率が高いソフトで、グラフィック制作・編集ソフトです。

画像を加工・イラストの作成・簡単なGIFアニメーションが作成できます。

現在、Adobe Fireworks CS3 が最新バージョンになっています。

グラフィックソフトFireworks(ファイアーワーク)について詳しく見てみる。

WEBサイト制作内容

今回は、この4日間で学習したDreamweaveFireworksの技術を生かして1ページ分のWEBサイトを作成することになりました。

テーマは、病院で佐藤クリニック(仮想クリニック)のWEBページ制作でした。

手順

①WEBページの大体のレイアウトデザインを紙に起こす。

ここでは、最初からDreamweaveでレイアウトしていくのではなく、あらかじめ紙で構想を練っておく。

こうすることで、WEBページの大まかなレイアウトを作っておくことでサイトの作成の効率がよくなる。

今回は病院がテーマなので、清潔感を出すため白色をベースに薄い青色系の色を使い清潔感を出してみた。

Dreamweaveにて、大まかなレイアウトを作成

今回は、CSS(スタイルシート)を習っていなかったので、テーブルにてレイアウトを施した。

実際のレイアウトでは現在CSSでのデザインが主流なようだ。

テーブルを使用して、ページのセンターにレイアウトしてみた、なお横幅はヤフーのサイトと同様に710ピクセルにて制作を行った。

Fireworksにて、写真の加工、ロゴの作成等ページのデザインを作成

今回作成した画像は11点

1点目・・・ヘッダーの背景として雲の画像を加工して、挿入した。

使った技法は、マスク処理にて背景が徐々に透明になるように設定した。・・・FWスーパーリファレンス P103~P111

2・3・4点目・・・ヘッダーに入る佐藤クリニックのロゴ・連絡先のロゴ・クリニックの施設紹介ロゴ

使った技法は、ロゴデザインにてストロークカラーの設定とエフェクト設定のドロップシャドウ・・・DW&FWトレーニングブック P26~P31

GIFで書き出し、透明処理を施して、背景が出るように施した。

5・6・7点目・・・写真の加工

佐藤クリニックの外観・入り口・待合室の写真のサイズを変更し、さらにマスク処理を施した。・・・FWスーパーリファレンス P103~P111 DW&FWトレーニングブック P61

8点目・・・予約診察の画像

夜の予約診察の画像で、マスク処理を施した FWスーパーリファレンス P103~P111

9点目・・・見出しの背景

青色をベースに見出しの背景を作成 ベクターツールを使用 FWスーパーリファレンス P61~P62

10点目・・・アクセスマップの作成

ベークター系のツールを使い地図を作成 FWスーパーリファレンス P58~P79

11点目・・・住所のロゴ

写真にマスク処理を施しその上から住所をテキストツールを使用して記入。 FWスーパーリファレンス P65~P69・P103~P111

6コマ目

全員の成果を確認

それぞれが作成したWEBサイトを見て回った。

感想

24人が同じ課題でWEBサイトを作成したが、全員が違ったデザインや色づかいで作成していていろんなデザインが見れてとっても参考になった。

改善点

始めて作成した割りにはよく出来たと思う。

これからは、HTMLの構文を理解し、さらには最新デザインのスタイルシートでのWEBデザインで同じように作成していきたい。

このページのトップへ移動する。

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

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

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

使用教科書

DW&FWトレーニングブックFWスーパーリファレンス

今日の大まかな内容

今日は、Fireworksは、写真の切り抜きについて勉強しました。

ようは、写真の一部の素材を切り出したり、写真を合成する時に使う手法です。

Dreamweaverは、ソフトの基本的な使い方(CSSの使い方以外)を覚えました。

授業の内容

1コマ目

写真のトリミング DW&FWトレーニングブック P69~P73 FWスーパーリファレンス P106

コツ・・・被写体を効果的に見せるには、その周りの空間の見せ方を考える。

トリミングの種類

切り抜きツール・・・選択ツールの切り抜きツールを使用し、切り抜きをしたい部分を選択する。
※写真の一部分しか使用しない場合にしようする

書き出し領域ツール・・・選択ツールの書き出し領域ツールを使用し、切り抜きしたい部分を選択し、その領域を新たなデータとして書き出す。
※元の写真を加工したくない場合、この方法で新たに画像を書き出して切り抜く。

ペンツールを使用して切り抜く方法・・・
※画像の被写体だけを切り出して切り抜く場合にしようします。画像の合成等に使用するテクニックです。

2コマ目

いろいろなマスクの方法 FWスーパーリファレンス P103~P107

マスクとは、自分が表示させてい部分以外を見えなくさせる処理で、いくつかのやりかたがあります。

基本的には見え方は同じなので、この3つのやり方で、シチュエーションに合った方法を用いる。

ベクターツールで使用した場合ベクターツール部分に明暗をつけると透過処理がかかる。
※黒に近づくと透過処理が強くなり、白に近づくと透過処理が弱くなる。

マスクとしてグループ化する方法は3種類

ベクターツール選択した部分と画像を合体させて表示させる方法。

選択した部分が画像より下にあると切り抜きしたい部分が無くなるので注意

内部にペーストする方法

ベクターツールで選択した部分に元の切り取った画像を編集の内部にペーストを選択する方法

選択ツールを使用してマスクをかける方法

これは主に自動選択ツールで選択した時に使用する方法です。

3コマ目

レイヤの基本的な操作 FWスーパーリファレンス P92~P98

レイヤーとはオブジェクト(図形や写真等の素材)が格項目ごとに階層状に分かれて表示されているもの。

Fireworksで制作する場合に覚えておいたほうが役に立つ。

レイヤーの非表示

今まで作った素材なのかで一時的に見えなくして作業をする場合使用する。

レイヤーパレットから目のマークを操作する。

新規レイヤーの作成

これはパソコンのデータをフォルダごとにまとめるように、まとまった素材(キャラクター等)とは別に新たに素材(他のキャラクターや背景等)を作成する際に使用すると便利です。

レイヤーパレットの下の方にあるホルダーのアイコンで作れる。

レイヤーに名前をつける

こらは素材に名前をつけていたほうがわかり易い時にしようします。レイヤーの数が多くなってきた場合につけていた方がわかり易い。

レイヤーパレットのレイヤー名をダブルクリックをすると変えることができる。

レイヤーにロックをかける

背景などの動かしたくないレイヤーを動かさないように設定することができる。

レイヤーパレットのエンピツマークをクリックして鍵マークにする。

レイヤーごとに削除する

作成していったが、必要がなくなった時にレイヤーごと削除することができる

レイヤーパレットの下の方にあるゴミ箱ボタンを消したいレイヤーを選択してクリックする。

地図の作成

地図制作の手順

道路を描く

①ベクター系ツールで道のりを描く

4コマ目

地図の作成続き 道路を描く

②アウトライン化

修正からパスの操作のアウトラインでアウトライン化する。

③パスの結合

修正からパスの結合→合体を選択

④色をつける

プロパティインセペクタから色を選択する。

線路の作成

①ベクター系ツールで路線を描く

②破線の設定

ストロークオプション→破線→詳細設定で設定

③線を重ねる

新たにせんを作成し、破線の線に重ねる。
※僕の場合、破線のパスをコピーしそれをアウトライン化してストロークで色をつけて重ねた。

課題で出された佐藤クリニックの地図の作成

このテクニックで課題でだされたものを作成

5コマ目

Dreamweaverでのページの作成

使用したテクニック

表の作成

ツールバー上にある表の作成から作成する。

表に見出しをつける

表の上段を選択し、プロパティインスペクタにあるヘッダにチェックマークを入れる。

表の幅を指定する。

テーブルタグを選択して、プロパティインスペクタから幅を指定する。

表の列を指定する。

列を指定して、プロパティインスペクタから幅を指定する。

セルの文字位置を設定する。

セルを選択し、プロパティインスペクタから縦・横の位置を指定する。

箇条書き

箇条書きしたい段落<P>を選択し、プロパティインスペクタから箇条書きボタンをクリックする。

下線のつけ方

下線をつけたい文章を選択して、テキスト→スタイル→アンダーラインから指定する。

見出し

見出しにしたい文章を指定し、プロパティインスペクタからフォーマットで見出しを選択する。

文章をページの真ん中にレイアウトする。

文章をテープルで囲い、それを中央揃えにする。

※テーブルに枠をつけると、枠がつくので注意

6コマ目

Dreamweaverで作成したWEBページを装飾しよう。

このページのトップへ移動する。

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

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

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

今日で、Fireworksの操作については大体教わり、一通りの画像処理はできるようになりました。

1コマ目

ここでは、画像のデータの補正の仕方を練習しました。

DW&FWトレーニングブックFWスーパーリファレンス

●写真の修正 DW&FWトレーニングブック P50~P55

●簡単な写真の補正 DW&FWトレーニングブック P51~P52 FWスーパーリファレンス P189

●高度なカラー補正 DW&FWトレーニングブック P52~P55 FWスーパーリファレンス P187,P189

2コマ目

もっと簡単な写真の修正・・・自動レベル補正をかける。 DW&FWトレーニングブック P55 FWスーパーリファレンス P188

●画像の大きさを変える DW&FWトレーニングブック P61 FWスーパーリファレンス P185

画像を小さくなる場合アンシャープマスクをかける。 FWスーパーリファレンス P185
このフェクトは、画像の編集の最終工程で行うとよい。

●写真の部分修正 DW&FWトレーニングブック P56~P59

●赤目の修正 DW&FWトレーニングブック P57・FWスーパーリファレンス P185

これは、画像で目の部分が赤い部分の修正をする編集で、ビットマップツールの赤目補修ツールを使用します。

●汚れの除去 DW&FWトレーニングブック P58~P59

これは、画像の一部に汚れや傷がある時にそれを除去する作業で、ビットマップツールのスタンプツールと指先ツールを使用します。

3コマ目

●写真の最適化 DW&FWトレーニングブック P60~P65

これは、WEBページで使用する際に、表示速度を速めるために行います。

●イメージサイズの変更 DW&FWトレーニングブック P60

これはWEB上で、使う画像が実際の画像より小さい場合にのみ使用します。

小さい画像を大きくすると画像が荒くなるので、汚くなります。

また、小さくした後に、アンシャープマスクをかけるとよりきれいに見えます。

●パッチ処理による一括変換 DW&FWトレーニングブック P63~P65 FWスーパーリファレンス P291~P295

これは、同じような画像処理を行うデータが複数存在する場合に、一括で同じ作業を繰り返し行う時に使用します。

●一枚の写真で圧縮率を変える DW&FWトレーニングブック P66~P68・FWスーパーリファレンス P176~177

●JPEG圧縮機能 DW&FWトレーニングブック P67~P68

これは、写真の画像の一部分の圧縮比を下げないで、周りの部分だけ、圧縮率を落とすために使用します。

4コマ目

●野菜で、顔を作成してみよう。

いままで練習した、選択ツール・拡大縮小・コピー&ペースト等を使って、顔を作る。

ファイアーワークスの総合演習

5コマ目

Dreamweaverで背景を設定しよう。 DW&FWトレーニングブック P78~P82

※背景にイメージを表示する時の注意点は、できるだけファイルサイズの小さいものにすること。

※背景なので、地味で薄い色にする。

やりかたが2種類あって、ページプロティから設定する方法と、CSSでの設定方法があります。

CSSでの設定の場合は、背景を繰り返し表示を行うか(Y軸でのリピート、X軸でのリピート)繰り返し表示を行わない等の設定ができる。

大きな画像を1つだけ表示させる場合等はCSSで設定を行う。

※最近はCSSでのページデザインが主流になってきている。

6コマ目

これまで習った部分の復習

ここまでやってきて、実感としてはFireworksの操作法は一通りマスターできたように思える。

このページのトップへ移動する。

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

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

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

今日の内容

1コマ目

今日は最初Fireworksでカエルのイラストを書くことになりました。

ビットマップグラフィックとベクターグラッフィックの違い

ビットマップグラフィックは、ピクセル(ドット)と呼ばれ小さな四角の集合でかかれたイラストです。
拡大していくと画像が荒くなってしまいます。

ベクターグラッフィックは、イメージのポイントとポイントの間を曲線で結んでかかれたイラストです。
拡大しても画像が荒れにくくなっています。

ドット絵(ビットマップグラフィック)・・・ピットマップツールを使用します。 DW&FWトレーニングブック P34~P36

ここで、ドットを使いカエルのドット絵を描きました。

2コマ目

イラスト絵(ベクターグラフィック)・・・ベクターツールを使用します。 DW&FWトレーニングブック P37~41

ここで、ベクター線や図形を使いかえるを描きました。

3コマ目

ボタンの作り方 DW&FWトレーニングブック P42~P49

4コマ目

ボタンの作り方で、ロールオーバーの別方法

  • フレームパレットを使う方法
  • ボタンをフィットさせる。
  • ①フレームパレットを使い、フレームを複製する
  • ②2番目のフレームを使いボタンに色等の変化をつける。
  • ④スライスツールを使い、ボタン全体を選択する。
  • ⑤書き出しをする。

5コマ目

透過GIFの作成 DW&FWトレーニングブック P74~P77
アンチエイリアス処理を行っていて、透明処理をする場合、背景色に近い色で透明化処理を行う。

6コマ目

Dreamweaverの作り方

  • WEBページで、透過処理を行った画像を掲載したサイトを作る。
  • テキストを入力
  • テーブルを作成する。
  • テーブルの中にイメージを挿入する。
  • テーブルに背景を設定する。

今日は、Fireworksでイラストを作成するのと、Dreamweaverのちょっとした使い方を行いました。

このページのトップへ移動する。

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

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

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

今日からいよいよ本格的な授業がスタートしました。

今日はパソコンでの実演だったので、あっとゆうまに時間が過ぎていきましたね。

学校教材は、Dreamweaver&Fireworksトレーニングブック・Fireworksスーパーリファレンス

楽天ブックスで確認したい方はDW&FWトレーニングブックFWスーパーリファレンスをクリックしてみて下さい。

内容

  • 1コマ目 ヤフーメールアドレスの取得
  • 2コマ目 必要なソフトの確認とダウンロード
  • 3コマ目 Fireworksの操作方①
  • 4コマ目 Fireworksの操作方②
  • 5コマ目 Fireworksの操作方③
  • 6コマ目 Fireworksの操作方④

1コマ目 ヤフーメールアドレスの取得

職業訓練をしてる間のメールアドレスを取得するために、全員でヤフーのメールアドレスを取得しました。

2コマ目 必要なソフトの確認とダウンロード

WEB制作を行うために必要なソフトの紹介とそのソフトのダウンロード

  1. Dreamweaver
    このソフトはアドビから発売されている、WEB制作業界の定番ツールといっても過言ではありません。
    WEB制作ソフトで、詳しくはAdobe Dreamweaverで確認してみて下さい。
  2. Fireworks
    このソフトもDreamweaver同様アドビから発売されており、WEB制作業界の定番ツールといっても過言ではありません。
    WEB用のグラッフィックの編集及び作成ソフトで、詳しくはAdobe Fireworksで確認してみて下さい。
  3. Flash
    このソフトはフラッシュの作成ソフトで、同じくWEB制作業界の定番のソフトです。
    詳しくはAdobe Flashで確認してみて下さい。
  4. Acrobat
    このソフトはPDFとゆうデータを見る時に使用するソフトで誰でも無料でダウンロードできます。
    ダウンロードはAdobe Readerでダウンロードしてみて下さい。
  5. FFFTP
    このソフトはWEBページを作成してもサーバーにアプロードしないとインターネット上では公開されません。
    FFFTPはサーバーにデータをアップロードするためのソフトです。
    フリーソフトでダウンロードできます。FFFTPで確認してみて下さい。
  6. TeraPad
    テキストエディターでフリーソフトとしてインターネットでダウンロードできます。
    TeraPadで確認してみて下さい。
  7. +Lhaca
    解凍ソフトで、圧縮ファイルを解凍します。
    フリーソフトで+Lhacaで確認してみて下さい。

3コマ目 Dreamweaverの設定とFireworksの操作方①

Dreamweaverの設定
・サンプルデータをドリームウィバーに設定するために、DW&FWトレーニングブックのP23~P24の手順をした。

Fireworksの操作方①
・解像度について・・・FWスーパーリファレンス P25~P26
・Fireworksの画面の見方・・・FWスーパーリファレンス P39
・Fireworksのズームツールの使い方・・・FWスーパーリファレンス P40~P41

4コマ目 Fireworksの操作方②

・Fireworksで図形ツールの作り方・・・FWスーパーリファレンス P61~P62
・Fireworksで直線ツールの使い方・・・FWスーパーリファレンス P58
・Fireworksでペンツールの使い方・・・FWスーパーリファレンス P59

5コマ目 Fireworksの操作方③

・グリット線の表示の仕方・・・FWスーパーリファレンス P51
・ペンツールで閉じた図形を描く・・・FWスーパーリファレンス P59
・ペンツールで曲線を描く・・・FWスーパーリファレンス P59~P60
・ペンツールでらくだのコブを描く・・・FWスーパーリファレンス P60
・ダイレクト選択ツールでポイントの選択と移動・・・FWスーパーリファレンス P79
・オブジェクトを他の場所にコピーする・・・FWスーパーリファレンス P77
・オブジェクト移動・・・FWスーパーリファレンス P77
・文字を作る・・・DW&FWトレーニングブック P26~P27
・ロゴの作成・・・DW&FWトレーニングブック P28

6コマ目 Fireworksの操作方④

・ロゴの作成の塗りカラーの設定・・・DW&FWトレーニングブック P29
・ロゴの作成のストロークカラーの設定・・・DW&FWトレーニングブック P30
・ロゴのエフェクト効果・・・DW&FWトレーニングブック P31
・エフェクト効果・・・FWスーパーリファレンス P141~P147
・オブジェクトの合体・・・FWスーパーリファレンス P167~P168
・最後総合演習で、エンピツのグラフィックとエンピツのグラフィックの作成

このページのトップへ移動する。

サイズ変更ボタン サイズ縮小ボタン サイズ拡大ボタン サイズリセットボタン
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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。