最初にバナーの作成方法を説明します。banner2.gifです
sample2.htmlの特徴は両サイドのラインです。このバナーの両サイドにもgifがあります。
１．簡単バナーを起動させます。横幅が短い場合は広げます。
「バナーのサイズを変更します」ボタンを押し、バナー幅を740にバナー高さを119にします。
２．文字列１に、「HTMLCSS.biz-ホームページ制作講座」と入力します。
太字にチェックします。フォントをMS UI Gothicとし、フォントサイズは16とします。フォントの色は白にします。文字列１の部分にマウスカーソルを運びエンターを押します。上部の枠の中に文字が入りますが、背景も白のため見えはしません。
３．背景タブをクリックします。次の画面が表示しますので、グラデーションを押しスタート色とエンド色を決めます。（好きな色にしてみてください）種類を縦１を選びます。
終わりましたら、文字タブを押します。
４．HTMLCSS.biz-ホームページ制作講座の部分にマウスカーソルを運びエンターを押します。
５．文字位置タブを押します。
画面が変わりましたら、基準位置を左下とします。X方向を20程とし、Y方向を10程とします。
HTMLCSS.biz-ホームページ制作講座の部分にマウスカーソルを運びエンターを押すと図のように文字位置が左下の適切な位置に移動します。
６．一度終わりにします。ファイル→名前を付けて保存で、ファイルの種類をgifにした上で、適当な名前を付けて保存します。尚、banner2.gifとすると本製品のgifが上書きされますので、sample2-1.gifとかにして下さい。「gifファイルに保存しました」というメッセージ表示します。
７．次にバナー両サイドのラインを簡単バナーで作ります。新規作成を押し新たなバナー作成に入ります。
「バナーのサイズを変更します」ボタンを押し、バナー幅を10にバナー高さを119にします。
８．背景タブを押します。
背景の色に薄いグレーを選びます。（好きな色で構いませんが覚えておいてください）
文字タブを押し戻ります。
９．空白の文字欄にマウスカーソルを運びエンターを押すと図のようにラインに色が付きます。
１０．ライン作成はこれで完了です。ファイル→名前を付けて保存で、ファイルの種類をjpgにした上で、適当な名前を付けて保存します。当講座でのファイル名はheaderside.jpgですので、topside.jpgとにでもしておきます。「jpgファイルに保存しました」というメッセージ表示します。
１１．上記と同様の手順でコンテンツ部分の両サイドのライン（line.jpg）も作成します。バナー幅を10、バナー高さを１０とし、適当な名前で保存しておきます。
１．Jtrimを起動させ、簡単バナーで作成したsample2-1.gifを開きます。
２．編集→合成を選びます。合成する画像ファイルに今作成したtopside.jpgを選択しOKを押します。
左側にラインが入ります。
３．今度は右側にラインを入れます。そのために、イメージ→左（ないし右）へ９０度回転を２回繰り返します。
画像がひっくり返ります。
４．先程行った作業と同様に、編集→合成を選びます。合成する画像ファイルに今作成したtopside.jpgを選択しOKを押します。
左側にラインが入ります。
５．ひっくりかえっている画像を戻します。イメージ→左（ないし右）へ９０度回転を２回繰り返します。画像は元に戻ります。これでバナー画像は完成です。上書き保存を押し、終了させます。
コンテンツ上部にある写真ですが、元のサイズは1600×1200のサイズでした。これをリサイズし700×250としたのです。その手順を説明します。
１．まずオリジナルの写真を開いてみます。original.jpg
このように写真は非常に大きくはじの部分しか表示していません。
２．イメージ→リサイズで横のみ700と指定しOKを押します。縦横の比率を保持するにチェックが入っていることを確認して下さい。
３．Jtrimの縦を伸ばします。
４．イメージ→切り抜きで座標１をX：０、Ｙ：１５０、座標２をＸ：７００、Ｙ：４００とし、OKを押します。
５．これで完成です。当講座でのファイル名はmain.jpgですので、重複させないように、ファイル→名前を付けて保存でsample2-2.jpgとして保存します。
１．簡単バナーを起動させます。横幅が短い場合は広げます。
「バナーのサイズを変更します」ボタンを押し、バナー幅を740にバナー高さを100にします。（画像はありませんので分からない方は前の方を参照して下さい）
２．背景タブ→グラデーション、スタート色を白、エンド色を薄いグレーにし、種類を縦１を選択し、文字タブに戻り、空白の文字入力欄にマウスカーソルを当てエンターを押すと次の画像が作成されます。
３．一度終わりにします。ファイル→名前を付けて保存で、ファイルの種類をgifにした上で、適当な名前を付けて保存します。尚、footer2.gifとすると本製品のgifが上書きされますので、sample2-3.gifとかにして下さい。「gifファイルに保存しました」というメッセージ表示します。（ここから以後画像はありませんので、解らない方は前のページを参考にして下さい）
４．次にバナー両サイドのラインを簡単バナーで作ります。作成方法は先程バナー部分の両サイドを作成したのと全く同様の手順です。新規作成を押し新たなバナー作成に入ります。 そして、「バナーのサイズを変更します」ボタンを押し、バナー幅を10にバナー高さを100にします。
５．背景タブを押します。
背景の色に薄いグレーを選びます。（バナーで使った色と同じにして下さい）
文字タブを押し戻ります。
６．空白の文字欄にマウスカーソルを運びエンターを押しラインに色を付けます。
７．ライン作成はこれで完了です。ファイル→名前を付けて保存で、ファイルの種類をjpgにした上で、適当な名前を付けて保存します。footerside.jpgとにでもしておきます。「jpgファイルに保存しました」というメッセージ表示します。
１．Jtrimを起動させ、簡単バナーで作成したsample2-3.gifを開きます。
２．編集→合成を選びます。合成する画像ファイルに今作成したfooterside.jpgを選択しOKを押します。左側にラインが入ります。
３．今度は右側にラインを入れます。そのために、イメージ→左（ないし右）へ９０度回転を２回繰り返します。画像がひっくり返ります。
４．先程行った作業と同様に、編集→合成を選びます。合成する画像ファイルに今作成したfooterside.jpgを選択しOKを押します。左側にラインが入ります。
５．ひっくりかえっている画像を戻します。イメージ→左（ないし右）へ９０度回転を２回繰り返します。画像は元に戻ります。これでバナー画像は完成です。上書き保存を押し、終了させます。
以上で３つの画像の説明は終了です。オリジナルなものを作成してみて下さい。要領が理解出来れば簡単です。
HTMLの説明にお進み下さい。メニューは上部にあります。