スポンサーサイト

上記の広告は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

トラックバック

コメント

コメントを残す

Secret


スポンサードリンク

最新記事

最新コメント

プロフィール

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

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

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

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