Web Design Note

基本操作

画面の拡大・縮小

ズームツール利用時（ツールパネル＞虫眼鏡のアイコン）

• ズームツールで画面上クリックで拡大
• ズームツール+Altキーを押しながらクリックで縮小
• ズームツールで画面上ドラッグで一気に拡大
• ズームツール上でWクリックで100%表示

 キーボードショートカット利用時

• Ctrl+スペースで一時的に拡大ツール
• Ctrl+Alt+スペースで一時的に縮小ツール

画面のスクロール

• ツールパネル＞手のひらツールで画面をドラッグする
• 他のツール利用時、スペースで一時的に手のひらツール
• 手のひらツールWクリックで全画面表示

作業の取り消し・やり直し

• Ctrl+Z　取り消し
• Ctrl+Shift+Z　やり直し

最後に実行した操作のくり返し

Ctrl+D

塗りと線の設定

丸い点線の作り方

線パネルで…

1. 「破線」にチェック
2. 最初の「線分」を「0」
3. 「線端」を「丸形線端」に
4. 破線の「間隔」と「線幅」で調整

アピアランスパネル

• オブジェクトの見た目を総合的に管理する
• １つのオブジェクトに対して、複数の「塗り」や「線」を付けることができる。

例）太い線、細い線を組み合わせて2重線を作ったり…。

パターン

パターンの作り方

1. パターンにしたいグラフィックを作成
2. 作成したオブジェクトをスウォッチパネルにドラッグ&ドロップする
3. パターンを適用したいオブジェクトを選択し、スウォッチパネルに登録したパターンをクリックし適用する

パターンをオブジェクト（パス）に分割する

1. オブジェクトメニュー＞分割・拡張を実行する
• グループ編集モードで編集する方法

1. オブジェクトをWクリックし、グループ編集モードに入る
2. 何重にもグループ化されているので、オブジェクトのパスが表示されるまで何度かWクリックする

• ダイレクト選択ツールを利用する方法

• ダイレクト選択ツールでオブジェクトを選択する

• パスファインダパネルを使う方法

• パスファインダパネルの「分割」を実行する

シンボル

• グラフィックを使い回しできる
• シンボルに登録したオブジェクトは使い回してもデータの量が増えない。
• シンボルの元データを編集すれば書類に配置されたデータも編集される

9スライス

図形を変形する際に、変形する部分としない部分を設定できる。

例）角丸長方形の場合は、角丸を変形せずに拡大・縮小できる。

シンボルスプレーツール

シンボルに登録したグラフィックをランダムに配置できる。

拡大・縮小ツール（回転ツール、シアーツール、リフレクトツール共通）

基準点をずらしつつ数値入力する場合

Altキーを押しながら基準にしたい所をクリックすると、そこが基準になりつつ数値入力画面が出てくる。

Dreamweaver 応用編メモ

JavaScriptライブラリの活用

• 画像をクリックで大きく表示する。

• Lightbox
• thickbox

• ページをするするスクロール
• マウスオーバーで画像を入れ替える

今回は以上３つをまとめたものを使用します。→yuga.js

ページ内リンク

• １リンク先に名前をつける。
  （DWでは挿入パネル＞アンカーポイント）

※htmlにidを付けていれば、リンク先の名前として
使用できる。１の工程がなくてもいい。

• ２リンクを設定する
  その際「#付けた名前」にする。

コメントアウト

ソースコードを無効にする。ということは、単純に無効にするだけでなく、コメントを書いたりすることができる。
コメント内は全角、日本語も使える。
コメントアウトした部分は画面上にはあらわれません。

コメントの書式

html　　　<!– この間がコメントになる –>
css　　　　/* この間がコメントになる */
javascript　// を先頭につける。

DWでは、画面左にあるツールの吹き出しアイコンから
簡単に設定できる。

コメントの削除は、画面左にあるツールの吹き出しに×の
アイコンから簡単に設定できる。

さらに、右クリック＞選択、からコメントの適用、削除
ができる。

ロールオーバーの仕方
yuga.jsを使う場合
1, ２枚目の画像を作る。
2, ファイル名の最後に「_on」をつける
3, htmlのimgタグに「class=”btn”」をつける

DWを使う場合
１, ビヘイビアパネルの「＋」ボタンのメニューから
「スワップイメージ」を開く
2, 「参照」ボタンで、2枚目の画像を選択する

※ビヘイビアパネルとは、DWで設定できるJavaScriptの管理画面

Flashのオブジェクトの重なり順を入れ替える方法です。

Action Script 3です。

以下、参考サイト。

• インスタンスの重なりを入れ替える
• フラッシュ・ラボ　重なり順変更処理
• ムービークリップオブジェクト

1. Photoshopで背景を透明にする
2. Web用保存で形式をPNG-24にする。
3. 「透明」にチェックを入れる。
4. 書き出す

※IE6ではサポートしてません。
※ファイルの容量が重くなる

1. 画像をスライスする。（スライスツール、スライス選択ツール）
2. スライスの名前をつける。（スライスをWクリック）
3. ファイルメーニュー　→　WEB用に保存
4. スライスを選択し、最適化の設定を行う。
5. 作成したスライスをすべて選択。（shiftキーで複数選択）
6. 「保存ボタン」を押す
7. 保存場所を選ぶ（画像1参照）
8. 「ファイルの種類」→画像のみを選ぶ（画像1参照）
9. 「スライス」→選択したスライスのみ（画像1参照）
10. 「設定」→その他…（画像2参照）

画像1

画像2

このサイトはWordPressで作成しています。豊富なプラグインを利用することにより様々な機能を追加することができます。

今回、WordPressをiPhoneレイアウトに対応させるプラグイン「wptouch」を導入することにより、iPhoneでアクセスした際に自動的にiPhoneレイアウトで表示されるようになりました。

iPhoneをご利用の方は快適にアクセスできます。

WordPressをiPhoneレイアウトに対応させるプラグイン「wptouch」

Dreamweaver基礎のメモ

全文を読む

そして、こうやってみるとソーシャルメディアの主戦場はもはやTwitter、Facebook、Youtube、Flickrに絞られてるのね。
類似サービスは使わないもんね。

50 SocialMedia Tacticsを日本語に訳してみた

CSSの講義メモ

全文を読む

HTMLの講義メモ

全文を読む