HOME>線上電脳塾>HTMLエディタ>AlphaEdit

インストール | 基本レイアウト法 | 画像の挿入 | FLASHの挿入 | アップロード | スタイル | 縦書き | テンプレート
ソースの編集 | 　　 | 　　 | 　　 | 　　 | 　　 | 　　
　　 | 　　 | 　　 | 　　 | 　　 | 　　 | 　　
　　 | 　　 | 　　 | 　　 | 　　 | 　　 | 　　
　　 | 　　 | 　　 | 　　 | 　　 | 　　 | 　　
ダウンロードとインストール | 設定と接続 | ファイル転送 | ローカル編集 | サーバー編集 | トラブル |
　　 | 　　 | 　　 | 　　 | 　　 | 　　 | 　　
　 　

画像の挿入
基本レイアウトに沿った形で話を進めます。indexファイルの１行目にはwelcomeのFLASHが入っており、３行目に画像を入れと仮定します。
　

（1）１行に１個の画像を挿入
（a） ３行目をクリックします。
（b）「挿入／画像」をクリックしたら「参照」でホームページフォルダ内の画像を選択します。

画像ファイルの場所が左図のようになっていない場合は
indexファイルがホームページと言うフォルダに保存していないか、画像をマイピクチャから選択したなどが考えられます。必ず同じフォルダにあるものを使った方が問題をなくする事ができます。

代替テキストには画像の説明を書いておきます。（オプション）

ボーダーサイズは０のままにしておきます。

幅と高さは自動で入ります。

テキストの配置は作業トラブルを避けるため使用しません。

□画像をHTMLファイルと同じ場所にコピーする
はhtmlファイルと同じフォルダに無い画像を使う時の機能ですが、チェック忘れがあると画像が表示されない問題が出るので、慣れるまでは使用しない方が良いでしょう。
　
※ポイント

セル幅730pixに730pixの画像を入れたので、セル内に収まるはずですが、なぜか３行目に隙間が空いています。
｜は隙間の所にカーソルを持って行った時の点滅を示しています。どうも１文字分空いているようです。

実はテーブルを作成した時、１文字空けるのがこのソフトの既定値になっているのです。（テーブルの仕様により空白セルは無視されセルの線が表示されないのを防ぐための処置です。）
BackSpaceでこの空白を削除すると、良くなります。

今度は空白を削除してから下の部分の画像を４行目に入れてみます。

今度は隙間が無く綺麗に配置されました。

この場合は何も画像を２枚に分けることは無いのですが、仕組み的な所を分かって貰うためにそうしました。
　

（2）ページの背景色

（a）「ファイル／ページのプロパティ／基本設定」の基本色をクリックします。

（b）画像の背景色と同じ色番号を入力したら、「OK]をクリックします。


（3）背景画像の挿入

（2）と同様の画面で
□背景画像を使用する
にチェックを入れ、「参照」で背景にする画像を選択します。
　

（4）１行に１個の画像とその説明を右に配列
画像を左に置いて、その説明文を右に配列するときの方法です。画像が右で説明文が左の場合は下記の手順を逆にします。
　
（a）画像を入れる行をクリック

（b）左図のように設定し「OK」をクリックします。
（c）右側のセルをクリック（｜の所）

（d）右クリックして「セルのプロパティ」を選択
（e）幅を40％位（画像の大きさによって異なりますので一応の目安とします。これは後で調整し直します。）

（f）左のセルをクリック
（g）画像を挿入
（h）右のセルに文字を入力
（i）文字の縦方向の配置や画像との余白は先ほどのセルのプロパティで行います。
％を大きくして左の画像の位置が崩れたら、大き過ぎです。数値を小さくしてやります。

この様に文字を入れるセルのサイズを先に決めて置いた方が作業し易くなります。
もし、これをやらなかったらどうなるか試して見ると良いでしょう。
　

（5）背景画像の模様が右側にも見える時は
背景画像（左端だけに模様があるタイプ）の横サイズより大きな解像度を持ったパソコンで見ると、右側にも左の模様が見える場合があります。この時はスタイルで対処します。
最近は画面解像度が1024pix以上のパソコンが多くなって来たので、こうしておいた方が良いでしょう。

（a）「ファイル／ページのプロパティ／スタイル設定／ボディ／編集」を選択します。
（b）左画像の様に設定します。
　
 
　
Copyright(C) 2006 Owlnet All Rights Reserved.