今回のねらい いよいよ登場した、Adobe Creative Suite 3。Dreamweaverのバージョンも、Dreamweaver CS3 となりました。
今回は、Dreamweaver CS3 バージョンアップされた機能を紹介します。 第二回目は、「Spry Widgetの“Spryタブ付きのパネル”」について見てみましょう。
Spry効果Dreamweaver CS3には、新しく「Spry Widget」（スプライ ウィジェット）という機能が追加されました。 今回は、Spry Widgetの“Spryタブ付きのパネル”を紹介します。 ■ ここで作成したサンプルページ “Spryタブ付きのパネル”の作成方法 - 新規ページを作成し、ファイル名をつけて保存します。
- [挿入バー]を「Spry」に切り替えます。
- タブ付きパネルを挿入するページの場所にカーソルを移動します。
- [Spryのタブ付きのパネル]をクリックします。
- Spryのタブ付きパネルが作成されます。「タブ付きパネル」の青色のタブをクリックします。
- 「タブ付きパネル」のプロパティで、＋ボタンをクリックして、タブを追加します。
- ページにあるタブ名をクリックし、タブ名を直接書き換えます。
- 一番手前のタブの内容を書き込みます。
- 次のタブ名をクリックしてマウスポインタを置き、タブの右に表示される目のアイコンをクリックします。
- 次のタブの内容を書き込みます。
- 同様の方法で、次のタブの内容も書き込みます。
- ページを保存します。「依存ファイルのコピー」画面が表示されるので、「OK」ボタンをクリックします。
※“Spryタブ付きのパネル”では、Javascriptファイル（SpryTabbedPanels.js）とCSSファイル（SpryTabbedPanels.css）を必要とします。その2つのファイルがこのタイミングでSpryAssetsフォルダに保存されます。
- ページをブラウザで確認すると、タブで切り替えることが出来るコンテンツが作成されています。
 用語解説Spry（スプライ）とは？Adobeによって開発されたAjaxライブラリです。 XMLデータ処理するライブラリ、エフェクト効果のためのライブラリ、ユーザーインターフェースのためのライブラリがあります。 今回ご紹介したSpry wigietの「Spryのタブ付きパネル」は、ユーザーインターフェースのためのライブラリの一つです。 プログラミング技術がないと使えないAjaxをライブラリ化することで、手軽に利用することができます。
Ajax( Asynchronous JavaScript：エイジャックス )とは？JavaScript言語を拡張したもので、ブラウザでページの再読み込みをしなくてもページに変化をつけるようなコンテンツを作成することができます。 技術には、従来から使われていたJavascript言語にXMLによる非同期なデータ送受信機能やDHTML（ダイナミックHTML）を加えたもの。これらの技術の総称ともいえます。 Ajaxを利用した、代表的なコンテンツには、Googleマップなどがあります。
※Googleマップの地図を操作するためのインターフェースはAjaxにて作られています。
Widget（ウィジェット）とは？Webページで特定の機能を実行するアプリケーションの総称です。 「Yahoo! Widgets」、「MovableTypeのWidget機能」など、さまざまな場所で、Widgetの形態が利用されています。
r360studioからのお知らせ
|
職種からお仕事情報を探す
Webディレクター│
Webデザイナー│
コーダー│
ネットショップ運営│モバイルサイト│その他
今週の特集
