このページには４つのgifがあります。
バナー部分のbanner6.gif
フッター部分のfooter.6gif
コンテンツ部分のcontent1.gif
コンテンツ部分のcontent2.gif
まずはこれらのgifをJtrimを使い作成します。
１．最初にbanner6.gifを作成します。Jtrimを起動し、新規作成→画像横サイズを724、画像縦サイズを120とします。次に編集→塗りつぶしを選択し、塗りつぶし色の「左」をクリックします。色の設定パレットを表示しますので「色の作成」を押し、赤0、緑0、青128と入力しOKを押します。
白い部分にマウスカーソルを置き右クリックします。
バナーがネービーに着色されました。
塗りつぶしを閉じます。
２．イメージ→角丸切り抜きを選択します。背景色の部分をクリックします。色の設定パレットを表示しますので「色の作成」を押し、赤0、緑191、青255と入力しOKを押します。丸めの半径を30としておきます。
OKを押すと上下左右の角丸の取れたバナーを表示します。
３．イメージ→切り抜きを選択します。座標１x:0、y:0、座標２x:724、y:100とします。縦横比を維持するのチェックを外します。OKを押します。
これでbanner6.gifが完成です。ファイル→名前を付けて保存から適当な名前を付けて保存します。この際banner6.gifと保存すると教材が上書きされますので適当な名前で保存して下さい。
４．次にfooter6.gifを作成します。上記で解説した１．から２．を繰り返します。
イメージ→切り抜きを選択します。座標１x:0、y:18、座標２x:724、y:118とします。縦横比を維持するのチェックを外します。OKを押します。
これでfooter6.gifが完成です。ファイル→名前を付けて保存から適当な名前を付けて保存します。この際footer6.gifと保存すると教材が上書きされますので適当な名前で保存して下さい。
５．content1.gif、content2.gifを作成します。content1.gifの作成手順を説明します。
新規作成で横サイズ460、縦サイズ90としてください。
丸めの半径を３０、背景色を押しカラーパレットから白を押し選択します。
更に枠線を付けるにチェックします。枠線の幅を３とします。
枠の色をクリックしますと色のカラーパレットが表示しますので、色の作成を押します。赤を０、緑を０、青を１２８と入力します。
OKを押すとこのように角丸の無いブルーの枠の図が完成します。名前を付けて適切な名前で保存します。
最後にcontent2.gifを作成しますが、content1.gifとの相違点は、縦サイズが１６０となります。
上記の手順を繰り返し作成してみて下さい。これで画像の準備は整いました。
HTMLの説明にお進み下さい。メニューは上部にあります。