neko1y.gif


このページは、Adobe Dreamweaver CS3 "最近使用したファイル" が表示されないようにすることと、 マウスがのった場所の背景色が変わるテーブルの作り方などが、簡単に書いてあります。 あくまでも自分の覚え書きですので、訪問された方の役に立つかどうかは定かではありません。



mrs_img/square.png　Adobe Dreamweaver CS3 "最近使用したファイル" が表示されないようにする

C￥Documents and Settings￥ユーザネーム￥Application Data￥Adobe￥Dreamweaver 9￥Configuration￥Content￥Welcome￥Flash￥resources￥config.xml　を編集します。Adobe￥Dreamweaver9とはAdobe￥Dreamweaverのバージョン番号。Dreamweaver CS3はDreamweaver 9。


<?xml version="1.0"?>
<startpage version="2.0">
<layout>
<!-- list of the columns used -->
<column>
<!--can be one of recentitems, newitems or sampleitems-->
<recentitems max="10" />
</column>
<column>
<!--can be one of recentitems, newitems or sampleitems-->
<newitems max="10"/>
</column>
<column>
<!--can be one of recentitems, newitems or sampleitems-->
<sampleitems max="5"/>
<extenditems max="1"/>
</column>
</layout>

<recentitems max="10"/> max="10" の値を 1 に変更します。0 にしてしまうと " 開く " のフォルダーが開けなくなってしまいますから、 1 にしておきます。
max="1"　これで、OK。　ようこそ画面で、最近使用したファイルは表示されなくなりました。
私とは反対にこの表示するファイル数を増やしたい場合には数字の数を大きくすればいいことになりますか？？？
試してないので、どういう結果になって、どういう表示になるのかわかりませんが・・・・

次には ファイルメニュー の項目から " 最近使ったファイル " の項目そのものを消してしまいます。
だって、うるさいんですもん♪　じゃまですし・・・

以下のファイルを編集します。
C￥Documents and Settings￥ユーザーネーム￥Application Data￥Adobe￥Dreamweaver 9￥Configuration￥Menus￥Cache￥Menus￥DWMenu_File.xml　の


<menus xmlns:MMString="http://www.macromedia.com/schemes/data/string/">
<menuitem id="DWMenu_File_New" name="新規(_N)..." key="Cmd+N" enabled="true" command="dw.newDocument()" domRequired="false" />
<menuitem id="DWMenu_File_Open" name="開く(_O)..." key="Cmd+O" enabled="dw.getDocumentDOM() == null || (dw.getDocumentDOM() != null && !dw.getDocumentDOM().getEditNoFramesContent())" command="dw.openDocument()" domRequired="false" />
<menuitem id="DWMenu_File_BrowseInBridge" name="Bridge で参照(_B)..." key="Cmd+Opt+O" file="Menus/MM/BrowseInBridge.htm" domRequired="false" />
<menu id="DWMenu_File_RecentFiles" name="最近使用したファイルを開く(_T)"></menu>
<menuitem id="DWMenu_File_OpenInFrame" name="フレーム内に開く(_F)..." key="Cmd+Shift+O" enabled="dw.canOpenInFrame()" command="dw.openInFrame()" />

<menu id="DWMenu_File_RecentFiles" name="最近使用したファイルを開く(_T)"></menu>
の一行を私は以下のようにコメントアウトしてしまいました。はい。

<!-- <menu id="DWMenu_File_RecentFiles" name="最近使用したファイルを開く(_T)"></menu> -->

これでファイルメニューからもこの項目が消えました。


"Bridge で参照(_B) " という項目も邪魔なようでしたら、上記と同じようにコメントアウトすることで表示をさせることをできなくなります。
もちろん、元へ戻すには、コメントアウトをはずせばいつでも元へ戻すことは可能です。




mrs_img/square.png　テーブルの行にマウスを乗せただけで選択した行の背景色が変化する表

javascript を使わず、テーブルの行にマウスを乗せただけで選択した行の背景色が変化する表を作りたくて、あちこちwebをさまよい、 いろいろな情報をあさりながらいろいろとやってみました。

通常のテーブルは以下のようなもの。

テキスト１
テキスト２
テキスト３
テキスト４
テキスト５

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


<table border=1 >
 <tr>
  <td>テキスト１</td>
 </tr>
 <tr>
  <td>テキスト２</td>
 </tr>
 <tr>
  <td>テキスト３</td>
 </tr>
 <tr>
  <td>テキスト４</td>
 </tr>
 <tr>
  <td>テキスト５</td>
 </tr>   
</table>

上のテーブルに onmouseover を使ってマウスが乗ったときに変化する色を#cccccc に、マウスが外れた時に変わる背景色を#ffffffと指定して、以下のようなテーブルにしてみました。

テキスト１
テキスト２
テキスト３
テキスト４
テキスト５

このテーブルのコードは下のようなものです。


<table border=1>
 <tr onmouseover="this.style.backgroundColor='#cccccc'" onmouseout="this.style.backgroundColor='#ffffff'">
  <td>テキスト１</td>
 </tr>
 <tr onmouseover="this.style.backgroundColor='#cccccc'" onmouseout="this.style.backgroundColor='#ffffff'">
  <td>テキスト２</td>
 </tr>
 <tr onmouseover="this.style.backgroundColor='#cccccc'" onmouseout="this.style.backgroundColor='#ffffff'">
  <td>テキスト３</td>
 </tr>
 <tr onmouseover="this.style.backgroundColor='#cccccc'" onmouseout="this.style.backgroundColor='#ffffff'">
  <td>テキスト４</td>
 </tr>
 <tr onmouseover="this.style.backgroundColor='#cccccc'" onmouseout="this.style.backgroundColor='#ffffff'">
  <td>テキスト５</td>
 </tr> 
</table>

グレーの背景色の色を変更するには、#cccccc を、マウスをはずした時の色を変更するには#ffffffを書き換えます。


今度は１行１列のテーブルではなく、もう少し列があるテーブルにしてみたいと思います。


テキスト１ テキスト２ テキスト３
テキスト４ テキスト５ テキスト６
テキスト７ テキスト８ テキスト９
テキスト１０ テキスト１１ テキスト１２
テキスト１３ テキスト１４ テキスト１５

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


<table border=1>
 <tr onmouseover="this.style.backgroundColor='#cccccc'" onmouseout="this.style.backgroundColor='#ffffff'">
  <td>テキスト１</td>
  <td>テキスト２</td>
  <td>テキスト３</td>
 </tr>
 <tr onmouseover="this.style.backgroundColor='#cccccc'" onmouseout="this.style.backgroundColor='#ffffff'">
  <td>テキスト４</td>
  <td>テキスト５</td>
  <td>テキスト６</td>
 </tr>
 <tr onmouseover="this.style.backgroundColor='#cccccc'" onmouseout="this.style.backgroundColor='#ffffff'">
  <td>テキスト７</td>
  <td>テキスト８</td>
  <td>テキスト９</td>
 </tr>
 <tr onmouseover="this.style.backgroundColor='#cccccc'" onmouseout="this.style.backgroundColor='#ffffff'">
  <td>テキスト１０</td>
  <td>テキスト１１</td>
  <td>テキスト１２</td>
 </tr>
 <tr onmouseover="this.style.backgroundColor='#cccccc'" onmouseout="this.style.backgroundColor='#ffffff'">
  <td>テキスト１３</td>
  <td>テキスト１４</td>
  <td>テキスト１５</td>
 </tr>
</table>

<tr> </tr> の中の <td> </td> タグが増えているのに気づかれましたか？
<td> </td> タグを増やすことによって、列が増えます。



では、今度は上のコードをちょっとアレンジしなおして、マウスが乗ったセルの背景色が変わるように変更したいと思います。

テキスト１ テキスト２ テキスト３
テキスト４ テキスト５ テキスト６
テキスト７ テキスト８ テキスト９
テキスト１０ テキスト１１ テキスト１２
テキスト１３ テキスト１４ テキスト１５

コードは下のようになります。


<table border=1>
 <tr>
  <td onmouseover="this.style.backgroundColor='#c0ffc0'" onmouseout="this.style.backgroundColor='#ffffff'">テキスト１</td>
  <td onmouseover="this.style.backgroundColor='#c0ffc0'" onmouseout="this.style.backgroundColor='#ffffff'">テキスト２</td>
  <td onmouseover="this.style.backgroundColor='#c0ffc0'" onmouseout="this.style.backgroundColor='#ffffff'">テキスト３</td>
 </tr>
 <tr>
  <td onmouseover="this.style.backgroundColor='#c0ffc0'" onmouseout="this.style.backgroundColor='#ffffff'">テキスト４</td>
  <td onmouseover="this.style.backgroundColor='#c0ffc0'" onmouseout="this.style.backgroundColor='#ffffff'">テキスト５</td>
  <td onmouseover="this.style.backgroundColor='#c0ffc0'" onmouseout="this.style.backgroundColor='#ffffff'">テキスト６</td>
 </tr>
 <tr>
  <td onmouseover="this.style.backgroundColor='#c0ffc0'" onmouseout="this.style.backgroundColor='#ffffff'">テキスト７</td>
  <td onmouseover="this.style.backgroundColor='#c0ffc0'" onmouseout="this.style.backgroundColor='#ffffff'">テキスト８</td>
  <td onmouseover="this.style.backgroundColor='#c0ffc0'" onmouseout="this.style.backgroundColor='#ffffff'">テキスト９</td>
 </tr>
 <tr>
  <td onmouseover="this.style.backgroundColor='#c0ffc0'" onmouseout="this.style.backgroundColor='#ffffff'">テキスト１０</td>
  <td onmouseover="this.style.backgroundColor='#c0ffc0'" onmouseout="this.style.backgroundColor='#ffffff'">テキスト１１</td>
  <td onmouseover="this.style.backgroundColor='#c0ffc0'" onmouseout="this.style.backgroundColor='#ffffff'">テキスト１２</td>
 </tr>
 <tr>
  <td onmouseover="this.style.backgroundColor='#c0ffc0'" onmouseout="this.style.backgroundColor='#ffffff'">テキスト１３</td>
  <td onmouseover="this.style.backgroundColor='#c0ffc0'" onmouseout="this.style.backgroundColor='#ffffff'">テキスト１４</td>
  <td onmouseover="this.style.backgroundColor='#c0ffc0'" onmouseout="this.style.backgroundColor='#ffffff'">テキスト１５</td>
 </tr>
</table>

今度は、<tr> </tr> のところではなく、<td> </td> のところにonmouseover=以下のコードが入っています。


なお、行と列、両方に onmouseover の指定をした場合は、ブラウザ依存になる可能性もあり、おかしな挙動を起こす可能性が大です。
思ったような挙動をしてくれないということになりますので、使わない方がよろしいかと思われます。



上のようなことをちまちまやっていたら、http://www.softcomplex.com/products/tigra_tables/demo.html　にありました。
う～ん・・・でも、やっぱりjs なんです・・・・。


mrs_img/square.png　thead, tbody, tfootタグを使ってみたテーブル

テーブルには、table,thead,tbody,tfoot,td,tr,th,tdの8つの要素がありますが、 このうち"table"は、テーブルを作成することを明示する宣言であり、"thead"は、テーブルのヘッダ部を示す宣言であり、ひとつのテーブル内で１度しか宣言できません。ヘッダがない場合は省略してもかまわないことになっています。
"tbody"は、テーブルの本体部分になり、省略されてしまうことも度々ですが、正式には必要とされています。
"tfoot"は、テーブルのフッターを示すもので、ひとつのテーブル内にひとつしか記述できませんが、フッターがない場合は省略してもかまわないとされています。"tbody"よりも前に記述しますが、未対応ブラウザでは無視されてしまい、本体部よりも前に表示されてしまう事もあります。

この行が thead 部分 thead ２ thead ３
ここが tfoot 部分
本文１ 本文２ 本文３
本文４ 本文５ 本文６
本文７ 本文８ 本文９

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


<table align="center"width="80%" border="1" cellspacing="0" cellpadding="5" bordercolor="#333333" >
 <thead>
  <tr>
   <th bgcolor="#a52a2a" width="30%"><font color="#ffffff">この行が thead 部分</font></th>
   <th bgcolor="#a52a2a" width="35%"><font color="#ffffff"> thead ２</font></th>
   <th bgcolor="#a52a2a" width="35%"><font color="#ffffff"> thead ３</font></th>
  </tr>
 </thead>
 <tfoot>
  <tr>
   <td colspan="3" bgcolor="#f8f8f8" align="right">ここが tfoot 部分</td>
  </tr>
 </tfoot>
 <tbody>
  <tr>
   <td bgcolor="#ffffff" align="right">本文１</td>
   <td bgcolor="#ffffff" valign="top" width="150">本文２</td>
   <td bgcolor="#ffffff" valign="top" width="200">本文３</td>
  </tr>
  <tr>
   <td bgcolor="#ffffff" align="right">本文４</td>
   <td bgcolor="#ffffff" valign="top" width="150">本文５</td>
   <td bgcolor="#ffffff" valign="top" width="200">本文６</td>
  </tr>
  <tr>
   <td bgcolor="#ffffff" align="right">本文７</td>
   <td bgcolor="#ffffff" valign="top" width="150">本文８</td>
   <td bgcolor="#ffffff" valign="top" width="200">本文９</td>
  </tr>    
 </tbody>
</table>


mrs_img/square.png　table のちょっとしたヒント

■　テーブルをページのどの位置へおくのか、また、大きさなどを指定する方法は、<table align="center" width="80%"　などというように記述します。もちろん、% ではなく、px で指定してもかまわないと思いますが、その場合には固定値になるようです。

■　空白のセルを作りたい場合には、<td>&nbsp;</td>　というように赤い文字の部分を記述しておくと間隔が広がったままのセルができます。
※ &nbsp;は、半角スペースの事

■　行を結合させるには、<td colspan="3" 、列を結合させるには、<td rowspan="3"　などとというように指定します。
この場合の"３"という数値は結合させたい行とかセルの数ですから、実際に用いる時には変更されてくださいますように。

table001.png

ソースは以下のようになります。


<table align="center"width="80%" border="1" cellspacing="0" cellpadding="5" bordercolor="#cd5c5c" >
 <thead>
  <tr>
   <th bgcolor="#a52a2a" width="30%"><font color="#ffffff">この行が thead 部分</font></th>
   <th bgcolor="#a52a2a" width="150"><font color="#ffffff"> thead ２</font></th>
   <th bgcolor="#a52a2a" width="200"><font color="#ffffff"> thead ３</font></th>
  </tr> 
 </thead>
 <tfoot>
  <tr>
   <td colspan="3" bgcolor="#f8f8f8" align="right">ここが tfoot 部分</td>
  </tr>
 </tfoot>
 <tbody>
  <tr>
   <td rowspan="3" align="left" bgcolor="#ffe4e1" >本文１本文１本文１</td>
   <td bgcolor="#ffffff" valign="top" width="150">本文２</td>
   <td bgcolor="#ffffff" valign="top" width="200">本文３</td>
  </tr>
  <tr>
   <td colspan="2" valign="top" bgcolor="#32cd32">本文２本文３</td>
   </tr>
  <tr>
   <td bgcolor="#ffffff" valign="top" width="150">本文２</td>
   <td bgcolor="#ffffff" valign="top" width="200">本文３</td>
  </tr>    
 </tbody>  
</table>

こうして見ていただけると tfoot 部分も同じように colspan="3" で結合させてあるのがわかっていただけると思います。


■　テーブルの線の太さや色を指定するのは、 border="1" cellspacing="0" cellpadding="5" bordercolor="#333333" などとします。
cellspacing="0"　を指定すると、普通の平面的な線になります。

最終更新日時: 2009年7月11日(土)