スポンサーサイト

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

dreamweaverCS6でタブを作成し記事を切り返る「タブ付きパネル」

タブ付きパネルの作成です。
タブをクリックするとページを移動せずにその部分だけ表示の切り替えができます。

dreamweaverを使用すればコードを打ち込む事なく簡単に作成ができます。

バージョンCCとCS6では選択する項目が異なります。
初心者の私としてはCCよりもCS6の方が編集等が簡単でわかりやすかった為
今回のみCS6で作成します。

余談ですが、
dreamweaverに関しては通常のライセンスを取得しCCを導入されている時点で
CS6も新規でダウンロード・インストールできるので使いやすい方で作成できる所が良いですね。
全体的にCS6の方が断然使いやすいと感じているのは自分だけでしょうか、、、。

話を戻して、では実際にCS6で作成していきます。

メニュー 「挿入パネル」- 「Spry」 - 「タブ付きパネル」

20140113.jpg


選択するとタブフォームが挿入されます。
ソースコードにタブ用のコードが挿入される他、以下2つのファイルが作成されます。
SpryTabbedPanels.js(JavaScript)
SpryTabbedPanels.css (CSS)
ファイルはSpryAssetsというフォルダが作成されその中に格納されます。
アップロードする際はこの二つのファイルも一緒に行うようにします。


文字サイズは、タブのサイズを変更する際はCSSスタイルからTabbedPanelsTabを選択し
通常通り設定を編集する事がでいますが、CSSファイルを直接編集する事も可能です。
直接CSSを確認しながら設定する方がわかりやすい場合はそれでも構いません。

20140113.jpg

タブ内の文字サイズ変更 .TabbedPanelsTab の font-size: 0.7em; → 1.0em;
選択中タブの背景を変更 .TabbedPanelsTabSelected { background-color: #DDD → #E88693
コンテンツ内容のサイズ .TabbedPanelsの width:やmargin:等で調整

設定例
.TabbedPanelsTab {
position: relative;
top: 1px;
float: left;
padding: 4px 80px;
margin: 0px 1px 0px 0px;
background-color: #E88693;
list-style: none;
border-left: solid 1px #CCC;
border-bottom: solid 1px #999;
border-top: solid 1px #999;
border-right: solid 1px #999;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
font-family: sans-serif;
font-size: 1em;
font-weight: normal;
}

.TabbedPanels {
overflow: hidden;
margin: 2px;
padding: 0px;
clear: none;
width: 996px;
}





画像ではありますが、作成したタブ付きパネルを載せておきます。
20140222_1.jpg
スポンサーサイト

マウスオーバー時に画像を切り替える2

サムネイルのような小さな画像を3つ並べて、

画像にマウスを合わせた時に大きな画像として一箇所に表示するように設定します。

1.まずは小さな画像3枚と大きな画像1枚を貼り付けます。

ソースの例は以下のとおり


  <p><img src="images/onsen.jpg" width="580" height="386" alt="温泉" /></p>
 
  <p>
  <img src="images/onsen.jpg" width="100" height="77" alt="温泉" />
  <img src="images/himawari.jpg" width="100" height="77" alt="ひまわり" />
  <img src="images/ichigo.jpg" width="100" height="77" alt="いちご" />
 </p>


2.大きな画像の方を選択したらプロパティのIDに「change1」を入力します。
  これで、大きな画像のIDがchange1になりました。

3.小さな画像の方を選択したら、メニューのウィンドウからビヘイビアーを選択し、+マークをクリックしたら 「スワップイメージ」を選択します。

  先ほどID登録した イメージ "change1"を選択し、ソースの設定欄に実際に大きく表示させたい画像のURLを入力
  もしくは「参照」から選択します。
 
  3.の作業を他の2つの画像に対しても行います。

 20131010_20131010221958f0a.jpg

最終的なソースは以下になりました。

  <p><img src="images/onsen.jpg" alt="温泉" name="change1" width="580" height="386" id="change1" /></p>
  <br />
  <p>
  <img src="images/onsen.jpg" alt="温泉" width="100" height="77" onmouseover="MM_swapImage('change1','','images/onsen.jpg',1)" onmouseout="MM_swapImgRestore()" />
  <img src="images/himawari.jpg" alt="ひまわり" width="100" height="77" onmouseover="MM_swapImage('change1','','images/himawari.jpg',1)" onmouseout="MM_swapImgRestore()" />
  <img src="images/ichigo.jpg" alt="いちご" width="100" height="77" onmouseover="MM_swapImage('change1','','images/ichigo.jpg',1)" onmouseout="MM_swapImgRestore()" />
  </p>
 


マウスオーバー時に画像を切り替える「ロールオーバー」

いろいろなサイトでよく見かけるのが、

画像やメニューなどでマウスオーバー時に、画像が切り替わったり色が少し変わったりするものです。

実際javascriptでfunctionを作成するのですが、操作としてはjavascriptを知らなくても簡単にできてしまいます。

まず、挿入パネルの”イメージ”の文字の左側にある逆三角形をクリックし、ロールオーバーイメージを選択します。

ロールオーバーイメージの挿入画面で

マウスオーバー時以外の時に表示している画像を ”元イメージ”で選択
マウスオーバー時に表示する画像を”ロールオーバーイメージ”で選択

20131008.jpg 

OKを押せば完成。

実際にjavascriptを記述していないが、htmlを見てみると以下のコードが自動生成されている。

■SCRIPTはここから

<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>


■通常htmlコード (一部抜粋)
<p><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','images/c2.jpg',1)"><img src="images/c1.jpg" alt="roll" width="160" height="108" id="Image1"></a></p>

よく使うコードは「スペニットの登録」

よく使うコードは記憶しておいて必要の時にすぐ呼び出せたら便利ですよね。

繰り返し使うコードを「スペニット」として登録しておく事で 
スピーディにコードを挿入する事が可能になります。

登録したいソースコードを選択して右クリック→ 「新規スペニットの作成」を選択
(スペニットが見つからない場合は、メニューのウィンドウから表示させて下さい)

わかりやすいように名前をつけて 

ブロックの挿入にチェックをつけてokで登録



スペニットパネルに登録されるので、

呼び出すときは、スペニットパネルから登録した名前のスペニットを選択して

下の挿入ボタンを押すと挿入されます。



ドラッグでの挿入もできます。

サイト全体を中央に表示させる

サイト全体を中央寄せする場合は、サイト全体を囲んでいるDIVタグに対して中央揃えをしてあげれば良いです。

例えば下記コードのように全体をwrapperという名前のDIVタグで囲んでいる場合
(囲んでいいない場合はbodyでも可)

<body>
<div id="wrapper">"Wrapper" 
  <div id="header">"header"</div>
  <div class="menu">"menu"</div>
  <div id="main">"main"</div>
  <div id="footer">"footer"</div>
</div>
</body>

wrapperに対するCSSを下記のように設定します。
(余分なコードは省いてあります)

左右のマージンをautoにする。
#wrapper {
 margin-right: auto;
 margin-left: auto;
}

これでサイト全体が中央寄せされます。



スポンサードリンク

最新記事

最新コメント

プロフィール

かっこいいデザイン、にぎやかなデザイン、きゅ~となデザイン、シンプルで洗練されたデザイン。
想像するだけで心がモワモワしてきます♪
いいデザインにいっぱい出会いますように★

好きな言葉は、旋律と色彩

ブログランキングに参加しています。こちらにも是非♪

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