②次に下記ウィンドーが開きますので、まず、横を800pixel、縦を200pixelにして頂きます。そして、キャンパスカラーを「カスタムカラー」にチェックを入れ、色のボックスをクリックし「黒」を選択して頂きます。最後に「OK」を押して下さい。

③新規ファイルが開きましたら、上のメニューバーの「ファイル」から「読み込み」選んで頂きます。
ファイル選択画面が出てきますので、予め用意（保存）しておきました、写真データを選択して開いて頂きます。
※同じ手順で4枚の写真を開きます。
※また読み込みの際に写真を選び「コントロール」キーを押しますと、何枚か同時に開くことができます。

④画像（写真）が4つ開きましたら、左のツールボックスの「選択ツール」を押して頂き、写真をマウスで配置します。

⑤次はバナーにタイトル文字を入れます。まずは、ツールボックスの「テキストツール」を選択し、バナー上で一度、マウスを左クリックします。次に使いたいフォントの種類を「プロパティ」から選び、入れたい文字を入力します。入力後、必ず「選択ツール」を押して入力した文字を押してから、文字の大きさの変更、色の変更、フォントを再度変更して下さい。「選択ツール」で文字を選択しないと、反映されませんので、ご注意ください。
※また入力した文字の移動も、「選択ツール」が選択されてないとできませんのでご注意ください。

⑥最後にメニューバーの「ファイル」から「書き出しのプレビュー」を押して頂きますと、「書き出しのプレビュー」のウィンドーが開きますので、「JPEG」を選択して頂き、「書き出し」を押します。
「書き出し」を押しますと、書き出し先のフォルダーの選択が出てきますので、予め作成しておいた、ホームページ用のフォルダー「alaska」の中に入っている「image」フォルダーを選択し保存します。

⑦最後に、予め作ったホームページ用フォルダー「alaska」とは別に「alaska_fireworks」みたいな名前にフォルダーをつくり、FIREWORKSのファイルを保存しておくと、再度編集する際に大変便利です。

④写真の位置が決まりましたら、枠を作っていきます。
１）　左のツールバーから、「矩形ツール」を選んで頂きます。※通常「■」などを作る時に使います。
２）　今回は枠を作りたいので、下のプロパティーのペンキマークの塗を「なし」にして頂きます。
３）　鉛筆マーク部分の色を「黒」にして、隣にある太さを「5」にします。
４）　作業画面にマウスの左クリックを押しながらスクロールし適当な大きさで左クリックを離すと、画面に矩形ができます。
５）　矩形ができましたらツールバーの「選択ツール」を選び、作成した矩形を選択して頂きます。
※選択されている場合は、矩形の四つの角に青い●が表示され選択されていることを確認できます。
６）　四角形の大きさを画面下のプロパティの幅と高さで確認できます。この幅の数値を「275」にし、高さを「70」にします。
７）　「選択ツール」を使って、矩形が作業画面の真ん中に表示されるようにします。
８）　画面下のプロパティから「角丸の半径」を「２０」にします。
※この数値を変える事によって、矩形の角を丸くする事ができます。

⑤次はバナーにタイトル文字を入れます。まずは、ツールボックスの「テキストツール」を選択し、バナー上で一度、マウスを左クリックします。次に使いたいフォントの種類を「プロパティ」から選び、入れたい文字を入力します。入力後、必ず「選択ツール」を押して入力した文字を押してから、文字の大きさの変更、色の変更、フォントを再度変更して下さい。「選択ツール」で文字を選択しないと、反映されませんので、ご注意ください。
※また入力した文字の移動も、「選択ツール」が選択されてないとできませんのでご注意ください。

④マージンの設定が完了しましたら、メニューバーの「挿入」からテーブルを選んで頂きます。下図のようなウィンドーが開きますので、（行）を「3」　　（列）を「1」　　（テーブルの幅）を「810」pixel　　
（ボーダー、セル内余白、セル内間隔）は、後ほど別のレッスンでご説明しますので、とりあえずは「0」にして、最後に「OK」を押してください。

 

⑤ＯＫを押しましたら、「デザインビュー」編集部分にテーブルが表示されますので、選択されている事を確認し、ページ下の「プロパティ」から行揃えを「中央」にしましょう。
※プロパティが表示されていない場合は、メニューバーの「ウィンドー」から「プロパティ」を選択しましょう。ページ下記にプロパティが表示されます。

②一番上のセルにトップバナーの挿入をします。
まず、一番上のセルを選択します。次にメニューバーから「挿入」を押して頂き「イメージ」を押して頂きます。画像の選択をするウィンドーが開きますので、予め「alaska」フォルダーの中の「image」フォルダーに保存しておきました、「top_banner.jpg」を開きます。

③真ん中のセルを2つに分けます。
画面下のプロパティの「セル分割」マークを押して頂き、セル分割のウィンドーが開きましたら、「列」にチェックを入れて、列の値を「2」にして下さい。

④先ほど2列に分けた左側のセルに新たなテーブルを挿入して、メニューを作ります。
まず、メニューバーの「挿入」から「テーブル」を選択し、行を「1」、列を「1」、幅を「200」pixel、ボーダーを「0」、セル余白を「10」、セル間隔を「3」pixelにし、「ＯＫ」を押します。


⑤テーブルの挿入が完了しましたら、テーブルが選択されている事を確認し、画面下のプロパティから「背景色」を「白」にします。次にテーブルの中のセルを選択し、プロパティから「背景色」を「黒」にします。
※テーブルの選択は、テーブルの枠にマウスを置き左クリック。
※セルの選択は、テーブルの中のセル部分でマウスを左クリック。

 

⑥次に作成したテーブルのセルが選択されている事を確認し、セルの中にメニューを書き込みます。
文字を改行する場合は、「SHIFT」キーを押しながら、「ENTER」で改行して下さい。「ＥＮＴＥＲ」だけだと、1.5倍の改行になります。

サンプルのホームページの「アラスカ」では、トップページ（ごあいさつ）、アラスカの歴史、アラスカの自然、 アラスカの暮らし、アラスカへのアクセスが、メニュー項目になります。



⑦メニューの書き込みが終わりましたら、隣のセル（右側のセル）を選択し新たにテーブルを挿入します。挿入するテーブルは、行が「2」、列が「1」、テーブルの幅「590」ピクセル、ボーダー「0」、セル余白を「10」、セル間隔を「0」にし、「ＯＫ」を押します。

テーブルの挿入が完了しましたら、テーブルが選択されていることを確認し、画面下のプロパティにある「背景色」を「白」にします。



⑧テーブルの背景色を変更しましたら、2行にした上のセルを選択し、また新たなテーブルを挿入します。テーブルは、行が「1」、列が「2」、テーブルの幅「100」パーセント、ボーダー「0」、セル余白を「5」、セル間隔を「0」にし、「ＯＫ」を押します。
※テーブルの幅の単位を「ピクセル」ではなく「パーセント」にする事を忘れないようにして下さい。

⑨作成したテーブルの左側のセルに、予め保存していたバナーボタンを挿入します。
メニューバーの「挿入」から「イメージ」を選択し、「alaska」フォルダーの中の「image」フォルダーから、バナーボタンを選択し「開く」を押して頂きます。
続いて、右側のセルを選択し、同じように予め作成したバナーボタンを挿入します。

⑩最後に下図に表記されているセルに文章を書き込みます。
セルに文章を書き込む場合や貼り付ける場合は、必ず書き込みたいセルが選択されている事を確認して下さい。

一番下のセルには、著作権の表示が必要な場合は、ここに書き込みます。今回はサンプルとして「(c) copyrights ○●●会社 ALASKA homepage」と表記します。
※(c) は著作権の略になります。

入力が完了しましたら、メニューバーの「ファイル」から「保存」を押してトップページの完成です。

②新規保存で、alaska_nature.htmlが出来ましたら、ページのタイトルとページの文章を変更します。

②他のメニュー項目にも、各ページにリンクされるように同じようにリンクを付けて下さい。

※リンクを付けますと、テキストの場合文字色が変わります。リンクの色を変えたい場合は、メニューバーの「修正」から「ページプロパティ」を押して頂き、カテゴリの「リンク」を選び、色を指定します。

③次は、作成した「アラスカの動物」と「アラスカの植物」のバナーボタンにリンクを付けます。
画像をクリックして選択して頂き、下のプロパティーのリンクから同じように、ファイルで参照し、「alaska」フォルダーに入っている、リンクさせたいページを選んで頂きます。
※画像からリンクする場合は、プロパティのリンクの位置が少し違います。

④メニュー項目とバナーボタンにリンクを貼り終えましたら、リンク出来ているかの確認にしていきます。まずメニューバーのファイルから「保存」をして頂きます。※キーボードの「ctrl」を押しながら「ｓ」を押して頂いても同じように保存されます。
次にキーボードの「Ｆ１２」を押して頂きますと、ブラウザでファイルを開く事ができますので、開きましたら、左のメニュー項目を押してリンクされているか確認して下さい。