HPB19 | HPB18 コンテンツ一覧
ホーム > HPB19 > ホームページビルダー19 フレームの作り方
目次 | 元のページ 前のページ | 次のページ サイトマップ | ページEND

ホームページビルダー19 フレームの作り方


ホームページビルダー19 フレームの作り方



フレームとは、ひとつのページの中に、別々の複数のページを同時に表示する手法です



例えば、画面上部に共通的な事柄を記述しておき、個別のコンテンツは、画面下を入替えて表示するとか、画面の左側に、常にメニューを表示しておくとかできます


それぞれのページに、メニューそのものを記述してしまうと、変更が入った際、全ページ修正になってしまいますが、フレームを利用して、ある1ページ(=メニューページ)を表示しておくだけにしておくと、その1ページを修正するだけで、全ページの表示が置き換わります



注.フレーム構造はSEO的には不利なため、SEOを気にしなくていいところで、ご使用下さい
SEOって何?という方は、「 SEO対策 」をご参照下さい



ホームページビルダー19 フレーム設定ページの新規作成




メニューバーから、「ファイル」 → 「フレーム設定ページの新規作成」をクリックします
ホームページビルダー19 フレーム構造の選択




フレーム構造と境界線の有無を選択します

この例では、「2分割 縦-1」を選択しています

境界線は、画面のデザイン次第ですが、ここでは、「なし」としています

「次へ」をクリックします
ホームページビルダー19 フレーム表示ページの選択 上部




このまま完了を押すと、フレームページとその中の2つのページ、計3つのページそれぞれにに名前を付けての保存を求められます

つまり計3ファイル作成されます

今回は、フレーム内は、既存のページを選択します
ホームページビルダー19 フレーム表示ページの選択 下部




デフォルトの「フレーム名」「top」と「bottom」は、ここで任意の名前に変更することもできます

「フレーム名」「top」と「bottom」それぞれについて、「参照」をクリックして、既存のページファイルを選択して、「完了」をクリックします
ホームページビルダー19 フレームページの完成




上下で別々のページを足し合わせたページができあがりました
ホームページビルダー19 フレームページの保存 指示




メニューバーから、「すべて保存」をクリックします
ホームページビルダー19 フレームページの保存




フレームページに名前をつけて、保存します
ホームページビルダー19 フレームページの表示




ブラウザで確認してみますと、別々の二つのページが、あたかも一つのページであるかのように表示されます
ホームページビルダーの編集画面で、「HTML ソース」タブをクリックすると、フレーム内各ページ(子ページ)のソースコードが表示されます




ホームページビルダーの編集画面で、「HTML ソース」タブをクリックすると、フレーム内各ページ(子ページ)のソースコードが表示されます
「プレビュー」タブをクリックすると、ブラウザ表示時のイメージが表示されます




「プレビュー」タブをクリックすると、ブラウザ表示時のイメージが表示されます
「フレーム HTML ソース」タブをクリックすると、フレーム構造ページ(親ページ)のソースコードが表示されます




「フレーム HTML ソース」タブをクリックすると、フレーム構造ページ(親ページ)のソースコードが表示されます
「フレームなし」タブをクリックすると、フレームに対応していないブラウザで表示された際のイメージが表示されます

「フレームなし」タブをクリックすると、フレームに対応していないブラウザで表示された際のイメージが表示されます

デフォルトでは、「このページを表示するには、フレームをサポートしているブラウザーが必要です。」文字列が表示されるよう設定されています



お断り  説明内容に支障のないところでは、ホームページビルダー18、19 のハードコピーが使われておりますこと、ご了承下さい

目次 | 元のページ 前のページ | 次のページ サイトマップ | ページTOP
ホーム > HPB19 > ホームページビルダー19 フレームの作り方
   

© 2014 abhp.net All Rights Reserved.
ページTOP
ページTOP
ページTOP
ページTOP
ページTOP
ページTOP