このページには４つのgifがあります。
バナー部分のbanner8.gif
フッター部分のfooter8.gif
|
左ナビゲーション部分のlftccls.gif |
左ナビゲーション部分のlftccll.gif |
|
|
|
これらのgifをJtrimを使い作成します。
１．最初にbanner8.gifを作成します。Jtrimを起動し、新規作成→画像横サイズを775、画像縦サイズを130とします。次に編集→塗りつぶしを選択し、塗りつぶし色の「左」をクリックします。色の設定パレットを表示しますので「色の作成」を押し、赤0、緑100、青0と入力しOKを押します。
白い部分にマウスカーソルを置き右クリックします。
バナーが緑に着色されます。
塗りつぶしを閉じます。
２．イメージ→角丸切り抜きを選択します。背景色の部分をクリックします。色の設定パレットを表示しますので「色の作成」を押し、赤255、緑255、青204と入力しOKを押します。丸めの半径を30としておきます。枠線を付けるにチェックが付いていないことも確認して下さい。
OKを押すと上下左右の角丸の取れたバナーを表示します。
３．イメージ→切り抜きを選択します。座標１x:2、y:0、座標２x:772、y:70とします。縦横比を維持するのチェックを外します。OKを押します。
これでbanner8.gifが完成です。ファイル→名前を付けて保存から適当な名前を付けて保存します。この際banner8.gifと保存すると教材が上書きされますので適当な名前で保存して下さい。
４．次にfooter8.gifを作成します。上記で解説した１．から２．を繰り返します。
イメージ→切り抜きを選択します。座標１x:2、y:60、座標２x:772、y:130とします。縦横比を維持するのチェックを外します。OKを押します。
これでfooter6.gifが完成です。ファイル→名前を付けて保存から適当な名前を付けて保存します。この際footer6.gifと保存すると教材が上書きされますので適当な名前で保存して下さい。
５．lftccls.gif、lftccll.gifを作成します。lftccls.gifの作成手順を説明します。
新規作成で横サイズ140、縦サイズ160としてください。次に編集→塗りつぶしを選択し、塗りつぶし色の「左」をクリックします。色の設定パレットを表示しますので「色の作成」を押し、赤154、緑205、青120と入力しOKを押します。
イエローグリーンに着色します。
６．イメージ→角丸切り抜きを選択します。背景色の部分をクリックします。色の設定パレットを表示しますので「色の作成」を押し、赤0、緑100、青0と入力しOKを押します。丸めの半径を30としておきます。
「更に罫線をつける」にチェックを付け、「枠の色を」クリックし、「色の作成」を押し、赤128、緑128、青0と入力しOKを押します。
OKを押すと上下左右の角丸の取れたバナーを表示します。
これでfftccls.gifが完成です。ファイル→名前を付けて保存から適当な名前を付けて保存します。この際ftccls.gifと保存すると教材が上書きされますので適当な名前で保存して下さい。
７．lftccll.gifも上記同様の手順で作成して下さい。ftccls.gifとの相違点は新規作成の際、縦サイズが290となる点です。
これで４つの画像ファイルが揃いました。
HTMLの説明にお進み下さい。メニューは上部にあります。