jQueryライブラリを使用して、サイト制作を行うことがあるだろう。その場合は、Dreamweaverに標準搭載されていない機能を追加するために用意されたWeb Widgetを利用すれば、jQueryライブラリを簡単に実装できる。

Web WidgetにjQueryライブラリを追加するには、アプリケーションバーの左から3番目にある歯車アイコンをクリックして、“Web W idgetの参照”を選び、ブラウザを起動させる【1】。米Adobe Systems社公認の拡張機能ダウンロードページ（Dreamweaver Web Widgets）に移動したら【2】、サイトに掲載されているライブラリの中から使用したいものを選んでダウンロードする。ダウンロードファイルをダブルクリックすると、「Extension Manager」が起動し拡張機能がインストールされる。このとき、Dreamweaverの再起動が必要になる【3】。

追加したjQueryライブラリを実装するには、実装したいページに対して挿入パネルから、追加されたWidget（本記事では「JQuery UI」）を選択し挿入する【4】。これで関連したjQueryファイルがサイト内に自動コピーされ、ページ内にソースコードが挿入される【5】。また、ライブビューやライブコードで確認すると、jQueryライブラリが正しく動作しているのがわかる【6】。

【1】テキストのプロパティでも、テキストのエフェクトは可能だが操作方法が異なる



【2】Widgetのダウンロードサイトが開いたら、License typeをOpen Sourceにして「Filter」を押し、
表示されたものの中からjQueryライブラリを選ぶ。ここでは、Extension Manager形式のアーカイブファイルがダウンロードできる


【3】ダウンロードしたファイルをダブルクリックすると、Extension ManagerでjQuery UIがインストールされる


【4】インストールされたWeb Widgetは、挿入パネルに追加される


【5】jQueryのタブUI機能を挿入したところ。ファイルを保存すると、自動的にサイトにjQueryのソースが保存される


【6】挿入したjQueryライブラリは、ライブビューで確認できる