プレビュー用のサムネイル画像を作る

使用ソフトはIBM ホームページビルダー付属の「ウェブデザイナー」及びスクリーンショットを取るのに便利なフリーソフト「WinShot」です。

WinShot：http://www.woodybells.com/winshot.html

WinShotについて
WinShotはパソコン画面の保存・印刷等を行うことができる、スクリーンキャプチャソフトです。シンプルかつ効率的な操作性を持ち、クリップボードに画像として取り込む場合もJPEGやBMPファイルとして保存する場合も「アクティブウィンドウ」「矩形選択領域」「デスクトップ」など簡単にキャプチャ部分を選んで操作できます。セットアップ版をダウンロードしてインストールしてくださいませ。

プレビュー画面のスクリーンショットをPrintScreenで取る際に表示部のサイズを変更したい場合の参考にしてください。

ブラウザの右端をドラッグするとリサイズされます。サイズを上手く調整してからひな形をプレビューするとそのサイズで表示されます。
PrintScreenキーでスクリーンショットを取り、グラフィックスソフトでひな形表示部分だけを切り取ります。
後はサイズ変更して縮小画像にして保存します。サムネイル作成ソフトがあれば便利ですが、グラフィックスソフトで縦横比を変えずに縮小（解像度変更）すると可能です。

サムネイル画像を100px×63pxに揃えるとする。美しい比率とされる黄金比は約1.6:1なので100px:63pxになります。
黄金比になっているものとして名刺やハイビジョンテレビ画面などがあります。
ドラッグしてブラウザの表示サイズを1000px×630px（800px×504pxでもいい）にしてスクリーンショットを取り、グラフィックスソフトで100px×63px画像にします。
パソコンモニタ解像度は通常約1.3:1比率です。これは100px×77pxとほぼ同比率です。この比率にしたければ1000px×770px（800px×616pxでもいい）に調整するといいでしょう。

現在の表示部横サイズ=      現在の表示部縦サイズ=
※スクロールバー・マージン・ボーダー・余白の幅も含む（body.offsetWidthとbody.offsetHeight使用）。

【方法】

WinShotとウェブデザイナーを起動しておきます。

ブラウザで表示部のサイズをこのページで調整しておきます。
それではひな形をブラウザで表示させてください。

上の画面では800×616に調整した表示サイズにしてます。

タスクトレイにWinShotのアイコンがありますから右クリックして「クリップボードコピー」=>「コントロール/クライアント」を選んでください。
今ブラウザがひな形を表示した状態になっていますので、表示部分の内部にカーソルを移動させると赤い枠で囲まれます。
そのまま表示部分内でクリックします。これで長方形で表示部分の画面を範囲指定した形で、クリップボードに画像データが一時記憶されます。

取ったスクリーンショットをウェブデザイナーに貼り付けます。
貼り付け方法：「編集」メニューから「貼り付け」をクリックします。※[Ctrl]+[V]キーでも同じく貼り付けになります。

下のようなダイアログが出ますが「はい」をクリックします。

以下のようにウェブデザイナーに張り付きます。(グレー部分は作業エリアで画像ではありません）

800px×616px

それではサムネイル用に縮小しましょう。

「オブジェクトの選択」ツールで貼り付けた画像をクリック（これで選択状態になります）、更にそのまま右クリックして「オブジェクトの編集」を選びます。

「オブジェクトの編集」画面で「縦横比保持」のチェックを入れた状態で、幅のみ数値を入力します。
例えばサムネイル画像を200px×154pxにする場合は、幅に200をを入力します。縦横比を維持しますから表示部分のサイズの横幅と縦幅の比率のまま縮小されます。
[×]でオブジェクトの編集画面を閉じると小さくなります。キャンパスのサイズは気にしません。

後は「ファイル」メニューの「Web用保存ウィザード」で縮小した画像をJPEGまたはGIF保存してください。

200px×153px(今回の場合は「縦横比を保持」でウェブデザイナーでは高さ153pxになりました）。
800px：616px≒200px：153px≒1.2987：1

プレビューHTMLファイルへのリンク
<a href="dragonscroll/dragonscroll.htm" target="_blank"><img src="dragonscroll.gif" width="200" height="153" border="0"></a>

ダウンロードファイルへのリンク
<a href="dragonscroll.exe">dragonscroll.exe</a>