ページの編集

さまざまなビュー / ページプロパティの編集 / 改行 / オブジェクトの配置 / 
画像の配置 / 文字の編集 / テーブルを使ったレイアウト / レイアウトのヒント


●さまざまなビュー●


GoLiveの編集ウインドウは、さまざまな編集モードがあります。


レイアウトビュー・画像やテキストのレイアウトを見ながら編集するモードです。



ソースビュー・htmlタグのみ表示して編集するモードです。



プレビュー・プレビューを確認することができます。






●ページプロパティの編集●


ページプロパティで、リンク文字の色・背景画像・マージン(ページ上下左右の隙間)などを設定することができます。
ビューの右上のボタンを押す   ページプロパティを編集できる





●改行●


画像や文字は、テーブルや改行を使ってレイアウトしていきます。

改行は、Enter(Retern)キーとShiftキーを同時に押します。Enter(Retern)キーだけだと、段落タグが挿入されてしまうので注意しましょう。段落タグは、段落の上下にスペースを空けるため、思い通りにレイアウトできなくなる可能性があります。




●オブジェクトの配置●


画像やテーブルなどを配置する場合は、ツールバーからビューにアイコンをドラッグアンドドロップし、インスペクタメニューで画像を選択したり、プロパティを設定します。

ツールバーのアイコンをビュー内にドラッグアンドドロップ


例・テーブルのインスペクタ





●画像の配置●


画像を入れる場合は、まずツールバーからアイコンをドラッグアンドドロップし、空の画像を配置します。

配置したい場所にドラッグアンドドロップ ↑空の画像のインスペクタ


インスペクタウインドウで、画像を設定します。
ソース左側のボタンをサイトウインドウの目的の画像の上にドラッグアンドドロップするか、ソース右側のボタンを押して画像を選択します。



画像が設定されました。


画像のインスペクタのAltテキストに画像の説明を入れておくと、画像の上にカーソルを置いたときに文章が表示されます。(ブラウザで表示した場合のみ・GoLiveの「ブラウザでプレビュー」でも不可)
Altテキストに画像の説明を入力 ブラウザで表示した場合





●文字の編集●


文字のサイズや色を変更するには、編集する文字を選択(ドラッグして反転させる)し、カラーパレットや文字パレットで設定します。




そのほか、フォントを設定することもできます。
文字を選択し、メニューの書式から選択します。
フォントはホームページを見る人のコンピューター(Mac・Windows・マシンにインストールされているフォント)により違うので、通常は細かく設定しませんが、大まかにゴシック系・明朝系などの設定をすることができます。



  レイアウトビュー プレビュー
ゴシック系フォント
     
明朝系フォント


ゴシック系フォントを選択すると、多くの環境で使われるゴシック形フォントに対応するように設定されます。


実際に記述されるタグはこのようになっています。これら全てのフォントに対応するということです。






●テーブルを使ったレイアウト●


画像や文字は、テーブルや改行を使ってレイアウトしていきます。



テーブルやテーブル内の行揃えは、テーブルのインスペクタメニューから設定できます。



テーブル内に文字を入れる場合は、普通にクリックするとこのような状態になり、入力することができません。

セル内へのテキスト入力は、次のような手順で行います。
セルの境界をクリックし、右図のようにカーソルが変わったら文字を入力します。
1.境界をクリック   2.カーソルの形が変わる


3.文字を入力   4.改行・文字設定・行揃えを使ってレイアウト



複数のセルを一度に選択するには、マウスボタンをドラッグします。この状態でインスペクタウインドウで設定を変更すると、選択したセル全てを一度に変更できます。



テーブルのセルを結合することができます。
セルを選択し、インスペクタウインドウで行連結または列連結を数値入力します。


行を連結すると、このようになります。



列と行を連結することもできます。






●レイアウトのヒント●


このような箇条書きの文章があるとします。一つのテーブルに入れプレビューすると、右の図のようになってしまいます。これを、テーブルを使って修正します。



まずテーブルの行数と列数を変え、番号と文章を一つずつセルに入れます。


番号は折り返して欲しくないので、インスペクタウインドウで「テキストの折り返しなし」を設定します。



番号が折り返した文章の上と揃うように、インスペクタウインドウで配置を設定します。




copyright(c)2006 ToyokoKanetaka All Right Reserved