フレームセットの作成

フレームセットとは / フレームセットの作成 / フレームセットの編集
各フレームの編集 リンク作成時の注意 / インラインフレームの作成


●フレームセットとは●


フレームセットとは、フレームを設定したhtmlの各範囲に、他のhtmlを読み込んで表示する仕組みです。
上下・左右など、さまざまな方法でフレームを分けることができます。
また、フレーム内にもフレームを作成することが可能です。(入れ子)






●フレームセットの作成●


フレームセットは通常、上下(上にメニュー・下にメインコンテンツ)か、左右(左にメニュー・右にメインコンテンツ)に分けることが多いです。よくある形式は、ほとんどのWEB制作ツールではテンプレートが用意されています。
Goliveのツールバーをフレームに切り替えると、フレームセットのテンプレートが表示されます。


フレームセットを作成するには、フレーム用のhtmlを作成し、編集の表示をフレームエディタに切り替えます。



ツールバーから、任意のフレームセットを編集ビューにドラッグアンドドロップします。



Doctype を変更ウインドウが表示された場合は、OKボタンを押します。



htmlにフレームが作成されます。(画像は、左右に分けるフレームを設定しています。)



☆ファイルメニューから新規ページを作成する時に、フレームセットにすることもできます。





●フレームセットの編集●


フレームの境界線の太さや色など、フレームセットhtmlを編集するには、編集ビューでフレームセットの境界をクリックし、インスペクタウインドウで設定をします。



フレームセットhtmlで境界線の設定をすると、フレームに境界線が表示されるようになります。(ブラウザでプレビューしています)






●各フレームの編集●


各フレームの部分をクリックすると、淵が黒い状態になり、そのフレームが選択されます。
インスペクタウインドウで、表示するhtml・フレームの幅・サイズ変更ありなし・スクロールバーなどを設定します。



フレームの幅や高さが決まっている場合は指定します。(普通は、左メニューの場合は左フレームの幅を、上フレームの場合は上フレームの高さを指定し、メインコンテンツのフレームサイズは設定しません。)
表示されるhtmlでフレームサイズを固定(変更できないように)するには、「サイズの変更を許可する」のチェックを外しておきます。
フレーム内に表示するhtmlがフレームサイズよりも大きい場合にスクロールバーを出すには、スクロールを「自動」に設定します。スクロールバーを出したくない場合は「なし」にします。
フレームには必ず名前を付けます。メニューフレームとコンテンツフレームに分かれていて、メニューフレームのボタンや文字をクリックしてコンテンツフレームのhtmlを入れ替える場合、ターゲットとしてフレーム名を指定するからです。



各フレームの範囲にhtmlを設定すると、このように表示されます。






●リンク作成時の注意●


フレームセット内の画像や文字からリンクを張る場合は、目的に応じてターゲットを指定します。



メニューフレームなどがあり、リンクボタンやリンクを設定した文章のあるフレームとは別のフレームの表示を変える場合(左や上にメニューフレームがあり、右や下のフレームのhtmlを切り替えたい場合)は、リンク先のターゲットに目的のフレーム名を指定します。ターゲットのリストに出てこない場合は直接フレーム名を入力します。



リンク画像やリンクを設定した文章のあるフレーム自体の表示を変える場合は、ターゲットに「_self」を指定します。


リンク先のhtmlを新しいウインドウで表示する場合は、ターゲットに「_blank」を指定します。


リンク先のhtmlがフレームセットになっていてフレームセット全体を入れ替え読み込む場合、または、リンク先のhtmlをブラウザ画面全体に読み込む場合は、ターゲットに「_top」を指定します。


リンク先のhtmlが自サイトの上の階層のフレームセットになっていて、ブラウザの表示をそのフレームセットに入れ替えたい場合は、ターゲットに「_parent」を指定します。





●インラインフレームの作成●


インラインフレームは、html内に小さな領域を作り、フレームセットのように他のhtmlを表示します。

フレームのツールバーから、インラインフレームのアイコンを編集ビュー内にドラッグアンドドロップします。



編集ビューにインラインフレームが作成されます。選択し、インスペクタメニューで編集していきます。



幅と高さを設定します。必要があれば、名前/IDもつけておきます。
ソースに、読み込みたいhtmlを設定します。



プレビューでインラインフレームを確認します。



copyright(c)2006 ToyokoKanetaka All Right Reserved