ホームページビルダー小技編
ページ、レイアウト関連
- 「お気に入りに追加」したときに表示されるアイコンの設置
- ビルダーにある、サンプルCGIを利用する(メールフォーム)
- 角の丸い表の作成
- 数秒後に別サイトへジャンプ
- ページを閉じるときアニメーションのようにして閉じる
- リンクをはった文字列にマウスポインタが乗ったとき短い説明文を表示する
- テーブルを使ってレイアウト(フレームを使っているようで使っていないページ)
- サンプル画像を使って、テーブルでレイアウトしてみる
角の丸い表の作成
まず、角の丸みの部分の画像を作成します。
ウェブデザイナーで作成
キャンバスのサイズは40×40ピクセル
塗りつぶしの●を作成します。キャンバスいっぱいに作画してください。
メニューバより、表示→「グリッド表示」と「グリッドに合わせる」にチェックをいれておくと便利です。
この時、まん丸を描く時はシフトを押しながら描くとまん丸になります。
先ほど作成した、●を4等分になるように切り抜きます。
右の図のように、ツールの形は四角がやりやすいです。
追加・・・・切り取るときは、表示→グリッドに合わせる を選択し画像をグリットに合わせておき、それから切り取ると便利です
オブジェクトスタックに4等分に切り抜いた一つの図が作成されています。
あとはこれをメニューバーより編集→複製を選択し、4つの角の数ぶん複製します。
複製した画像は、オブジェクト→左回転、右回転、反転などを使って向きを変更します。
これで、角に配置する画像の作成が完了しました。次はこの画像を表の中に配置していきます。
(4つ複製しないで、ひとつの画像を回転させながらビルダーへ直接送ることも可能です。)
※円周の画像の粗さが気になるとき
画像を保存する際、保存ウィザードで「透明化のチェックをはずし」、背景色にページの背景色を選択すると画像の周りが背景と馴染むので綺麗に仕上がります。この場合、貼り付けようと思っているページをビルダーの編集画面に開いている必要があります。
テーブルに配置する
先ほど作成した画像を配置していきます。
まず表を作成します。最低、行と列は3つずつ必要です
画像を配置したら、つぎはセルに色をつけます。
だんだんと丸い角らしくなってきましたね
次に、表の余白を取り除きます。
表をフォーカス枠にして右クリック→属性の変更→
<罫線の幅 0ピクセル> <余白 0ピクセル>
<枠表示 0ピクセル>「オン」にチェックを入れる。
以上で完成です。