HTML でのフレームの使用。 フレームの作成 ウィンドウの外観をカスタマイズするための Frame タグの属性

フレームとは何ですか?

サイトをより機能的にし、大量の情報やリンクを訪問者にとって最も便利な形式で配置するには、Flash テクノロジを使用する必要はまったくありません。 これはすべて、フレームを作成できる HTML 言語を使用して行うことができます。

平たく言えば、フレームは 1 つのウィンドウ内の追加のスクロール バーです。 サイトにアクセスすると、訪問者は同じページ上に 2 つのウィンドウを同時に表示します。通常、1 つはメニュー項目またはその他の重要な情報を表示し、もう 1 つはコンテンツ (テキスト、価格など) を表示します。 この場合、訪問者はかなり大量のページをより簡単に閲覧できると同時に、最も重要な情報を目の前に置くことができます。

詳細を詳しく見てみると、フレームを含むページは、一度に少なくとも 3 つの HTML ページで構成されます。ユーザーに表示される 2 つと、(フレームの表示を調整する) 1 つのサービスです。 表示可能なページは、個別または同時にアクセスできるフレームです。

間違いなく、フレームを使用する重要な利点は、高品質の使いやすさです。 ページ インターフェイスは、標準のマークアップ方法を使用する場合よりも何倍も便利になります。

5 ～ 6 年前、フレームは多くのウェブマスターの間で人気を博しました。 残念なことに、フレームにはプロモーションの点で重大な欠点があるため、今日ではフレームなしで行うことが不可能なサイトでのみ使用されています。

フレーム – 良いのか悪いのか?

ユーザーの立場、SEO スペシャリスト、ウェブマスターの立場の 3 つの立場からフレームの有用性を検討できます。

最初のケースでは、フレームに対する態度があいまいです。 一方で、これらがないとやっていけない場合もあり、他のウィンドウで開くサービス ページをうまく置き換えることもあります。 また、ユーザーはいつでも別のウィンドウでメニューを使用できるため、フレームは大きなページの使いやすさを向上させるだけです。

一方で、ページのデザインは実際には改善されません。 フレームを使用すると、見栄えを良くするのは非常に困難です。 そしてもちろん、すべてのブラウザがフレームをサポートしているわけではないため、潜在的な購入者、顧客、または単なる訪問者全体を遠ざける可能性があります。

ウェブマスターの観点から見ると、フレームを使用するとページの構成が容易になり、インターフェイスが洗練されます。 結局のところ、メニュー全体とその他の重要な情報を含む 1 ページを作成する方が、サイトのすべてのページにコンテンツを配置するよりもはるかに簡単です。 ただし、これで単純化は終わり、専門家以外が知る必要のない複雑さが始まります。 さらに、現在では純粋な HTML を扱う人はほとんどいません。CMS を使用すると、すべてを自動的に行うことができます。

SEOスペシャリストの立場ははるかに厳しいです。 フレームでは、検索ロボットがメイン ページを越えて通過することはできません。 もちろん、サイトの内部ページのインデックスを作成できるようにするいくつかのトリックはありますが、これらは依然としてどの検索エンジンにも承認されていない「トリック」です。

ウェブサイトのプロモーションにおけるフレームの影響。

Web サイト プロモーションのスペシャリストがどれほど経験豊富であっても、リソースにフレームが使用されている場合、プロモーションを保証することはできません。 残念ながら、このテクノロジーは、フラッシュ コンテンツや盗まれたコンテンツとともに、検索エンジンのプロモーションを複雑にする要素の「ブラック リスト」に含まれています。 しかし、後者についてはまだ気づいていないかもしれませんが、フレームについても同じことが言えません。

では、フレームの使用はプロモーションにどのように、またどのような影響を与えるのでしょうか?

影響は深刻です。 実際、サイトの内部ページへの重要なリンクはすべてフレーム上に配置されています。 それらを登録するために、レイアウト設計者はタグを使用する必要はありません。 …。 つまり、検索ロボットは、このタグによって、その前に別のページに移動してインデックスを付けることができるリンクがあると判断します（またはリンクの重みにさらにいくつかの「ブレッドクラム」を追加します）。

検索ロボットは、サードパーティのリソースから取得する最初のメイン ページのみにインデックスを付けます。 他のページは Yandex と Google に対して閉鎖されたままです。結局のところ、フレームがページの本当のアドレスを隠しているため、他のサイトからであってもそれらにリンクすることは不可能です。

今日では、1 つのメイン ページを効果的に宣伝することはもはや不可能です。そのページにすべてのリクエストを示すことは不可能であり、PS はそのような「概要ページ」に対してはるかに疑念を抱くでしょう。

もちろん、「伝統的な職人」は、フレームのインストール ドキュメントに内部ページへのリンクを配置することで、内部ページにインデックスを付ける方法をすでに考え出しており、フレーム ページを個別に開くことでアドレスを見つけることができます。 しかし、そのようなテクノロジーを放棄することでより多くのことを達成できるのであれば、これらすべての複雑さは必要なのでしょうか?

ブログ サイトの読者の皆さん、こんにちは。 今日はHTMLのフレームについてお話します。 最初から、つまりこれがどのような種類の動物なのかから始めることは明らかです。 また、現在のバージョンのハイパーテキスト マークアップ言語および を備えた新しい Html 5 標準におけるこれらの要素の現在 (Frame) と将来 (Iframe) についても説明します。

記事の最後では、HTML コードで組み込みフレームとその古典的な構造 (すでにほとんど使用されていません) を作成するプロセスを詳細に説明した後、それらのフレーム上にサイトを構築することの関連性について触れ、可能なことについても説明します。私のブログの例を使用して、現在の期間でそれらを使用する方法を説明します。

Iframe とは何ですか?また、Frame とどう違うのですか?

それは何ですか？ これらは、Web サイトだけでなく、プログラムのあらゆるアプリケーションでも使用できることがわかりましたが、Web ページまたはアプリケーションのウィンドウがいくつかの領域に分割され、それぞれに別のドキュメントが読み込まれるという点で異なります。 。 さらに、これらのフレーム領域は互いに独立して動作します。

おそらく、ほとんどすべての人が遭遇したことがある最もわかりやすい使用例は、コンピュータにインストールされている多くのプログラムに含まれる、いわゆるヘルプ ファイルです。

ヘルプ メニューを含むファイルが左側のウィンドウにロードされ、選択したメニュー項目に対応するドキュメントが右側のウィンドウに表示されます。 この構造により、右側のウィンドウで新しいドキュメントを開いたときに、メニューを含むファイルを左側のウィンドウに再ロードする必要がないことは注目に値します。 まさにこれで構成されています フレームを使用する主な利点 HTMLで。

実際には、これらの要素の名前自体が独立したウィンドウとして解釈される必要があります。 フレームの助けを借りて、1 つの大きなウィンドウをいくつかのフラグメントに分割する機会が得られ、それぞれが互いに独立した個別のドキュメント (ページ、テキスト、画像、ビデオなど) の受信機として機能することができます。

ハイパーテキストマークアップ言語ではフレーム構造はどのように作成されるのでしょうか? 現時点で主要なものである Html 4.01 標準 (分類による) について話すと、これには Frame、Frameset、Noframes の 3 つの要素が使用されます。

Iframe - HTML 5 標準の組み込みフレーム

Html 5 標準 (私たちの将来、その一部の要素は多くのブラウザーですでにサポートされています) について話す場合、古典的なフレーム構造と同様に、Frame、Frameset、および Noframes タグは存在せず、代わりに 1 つのタグが存在します。単一の Iframe タグ (埋め込みフレーム) については最初に説明します。次に、現在実際に使用されているバージョン 4.01 の古典的なスキームに注目します。

iframe は、以下で説明する古典的なものとは異なり、Body タグを Frameset タグに置き換える必要がありません。 それらの。 このタグは、段落内などの通常のページに挿入できます。 この要素の中核は、すでに検討した Img タグと非常によく似ています。

これは、インライン要素とまったく同じように動作するため、置換可能なコンテンツを持つインライン要素ですが、表示されます。 無関係な外部コンテンツ。 HTML 言語には、そのような要素は Img、Iframe、Object、Embed の 4 つだけです。 したがって、このヒーローは、このタグの属性を使用してサイズが設定された領域にロードされる外部ファイルの存在を暗示します。

それ。 Iframe は、外部オブジェクト (ビデオなど) がロードされるシンク要素です。 また、ページにロードする必要があるこのファイルへのパスを指定するには、特別な Src 属性を使用します。 ただし、Img とは異なり、Iframe 要素はペアになっています。 終了タグもあります:

この例は、Iframe を使用した Youtube ビデオ ページの出力を示しています。 外部ファイルが読み込まれるフレーム（ウィンドウ）の領域を制限するために、属性が提供されます 幅と高さ、その値はピクセルで指定されます。

それらの。 このタグは、外部オブジェクトが読み込まれる領域を作成します (サイトからのものか、別のリソースからのものかは関係ありません)。 領域の幅と高さは、Width と Height を使用して指定され、Src 属性はこのオブジェクトへのパスを指定します。

Iframe 要素は、同様のインライン タグからこれらすべての属性を継承し、コンテンツが置き換えられました (前述の Img など)。 まあ、彼は写真から属性も取得しました Hspace と Vspaceを使用すると、フレームの境界線からフレームを囲むテキストまでのインデントを設定できます。

また、組み込みフレームの位置合わせが、Html で画像を調べたときとまったく同じ方法で実行されることも重要です。 全く同じです 整列ただし、可能な値が Bottom、Top、Middle、Left、Right である Iframe タグの場合です。

ただし、この要素は、古典的なフレーム構造の Frame タグからいくつかの属性も取得しています。これについては、本文で詳しく説明します。 これらの属性には、名前が含まれます。この値は、リンクをクリックしたときに必要なドキュメントがこのフレームのウィンドウで開くように値として使用できます (詳細は下記を参照)。

また、Iframe では、Frameborder 属性が Frame タグから移行されました。この属性には、0 (フレームの周囲のフレームが表示されない) または 1 (フレームが表示される) の 2 つの値しかありません。 デフォルト値は Frameborder=1 なので、これを削除するには Frameborder="0" と入力する必要があります。

Scrolling 属性も Frame からこの要素に転送されており、デフォルト値は Auto です。コンテンツが表示対象のウィンドウのサイズより大きい場合、必要に応じてフレーム内のスクロール バーが表示されます。

Marginwidth 属性と Marginheight 属性も Frame 要素から移動されました。 これらについては本文で詳しく説明しますが、簡単に言うと、フレームの端からそこに配置されるコンテンツまでの幅と高さのインデントを設定できます。

すでに述べたように、Iframe の使用例は次のとおりです。

Iframe を Web ページに直接挿入すると、YouTube からビデオの出力を受け取ります。 この要素は、コンテンツが置き換えられたインライン要素と、実際にはクラシック フレームとを組み合わせたものであると結論付けられます。これについては、これから説明します。

Frame タグと Frameset タグに基づくフレーム - その構造

したがって、古典的なフレーム構造の作成は、通常どのドキュメントにも存在する必要がある開始タグと終了 Body タグの代わりに Html コードを記述し、それを要素ベースのコンテナーに置き換えることから始まります。 フレームセット.

基本的なポイントは、この場合、Body 要素 (通常のドキュメントの場合) または Frameset (ドキュメント フレーム構造の作成時) のいずれも使用できないことです。

メインフレーム内に作成する各フレームは、別個の要素を使用して作成されます。 フレーム。 このタグは 1 つで、その中にこのウィンドウにロードされるドキュメントへのパスを設定します。

まだ触れていない 3 番目の要素は、 フレームなし。 これはペアになっており、内部にテキストを書き込むことができます。テキストはブラウザーによって処理され、同じブラウザー (または他の表示デバイス) がフレームをサポートしていない場合にのみ Web ページに表示されます。 これは、たとえばモバイル デバイス用のブラウザを使用している場合に発生する可能性があります。

通常、Noframes では、フレーム構造を処理できない現在の状況に関する情報が追加されるだけでなく、フレーム構造を使用せずに作業を続行できる他のページに移動する機能も追加されます。 彼についてこれ以上言うのは難しいので、続けましょう。

Body タグの代わりに使用される Frameset 要素が表示領域に割り当てられたすべてのスペースを占め、フレームは個々の Frame 要素を使用してこの領域内に作成されることがわかります。 この点で、表示領域を別々のウィンドウにどのように分割するか、言い換えれば、それぞれのウィンドウのサイズをどのように設定するかという問題が生じます。

これは、適切な属性を Frameset 要素に追加することによって行われます。 そのうちの2つがあります - 列と行。 Cols では、大きなウィンドウを垂直のフレームまたは列に分割するように設定し、Rows では水平のウィンドウまたは行に分割できます。

Frameset とその Cols 属性と Rows 属性に基づいた構造の作成

Html Frameset タグの Cols と Rows の値は、カンマ (スペースなし) で区切られた数値です。 これらの数値は、結果として取得するウィンドウの比率を設定します。 したがって、Cols または Rows にカンマ区切りの数値をいくつ書いても、結果はフレーム数になります。

たとえば、この表記法を使用すると、幅が 2:5:3 の比率に対応する 3 つの垂直列が得られます。

3 つのフレームの比率を設定したため、追加の属性を指定しなくても、Frameset の開始タグと終了タグの間に 3 つの Frame 要素を含める必要があります。

その結果、3 つの空のウィンドウで構成されるフレーム構造は次のようになります。

この例では、表示領域の幅 (列を使用する場合) または高さ (行) から取得されるパーセンテージを使用してウィンドウ サイズ (フレーム) を設定します。 ビューポートを変更すると、フレーム サイズ間のパーセンテージ関係が維持されます。 ただし、パーセンテージの代わりに、意味する単純な数値を使用することもできます。 ここでも、理解に困難が生じるべきではないと思います。

ただし、サイズ指定にはかなり珍しいオプションもあります。 アスタリスク「*」。 さらに、単に「*」を使用することも、「3*」のように先頭に数字が付いたアスタリスクを使用することもできます。 これはパーセンテージとよく似た賢い機能で、フレームのスペースを比例的に分割することを意味します。

例を見てみましょう。 ここで、Rows を使用してビューポートを水平の行に分割することを選択しましょう。

このエントリは何を意味しますか? 垂直方向に利用できる表示領域全体が 3 つのラインに分割されます。 最初の行の高さは 200 ピクセル、2 番目の行は 500 ピクセルで取得されますが、3 行目の高さは残りのスペースをすべて占有します。 サイズは「*」を使用しました。

注目に値するのは、「*」と「1*」の値が同じことを意味することです。残りのすべてのスペースを 1 つに分割し、その 1 つの部分をこのフレームに割り当てます (つまり、残りのスペースすべて)。

しかし、値「*」を数値とともに使用して比例分割するとどうなるかを見てください。

この場合、フレームの寸法はどのくらいになると思いますか? 2 行目の高さが確実に 100 ピクセルであることは明らかです。 しかし、残りのスペースは高さで 3 列目と 1 列目にどのように分割されるのでしょうか?

計算は非常に簡単です。4 (4*) と 2 (2*) を足し、この分母 (学校のカリキュラムの分数を思い出してください) 2 と 4 で割るだけです。 それらの。 フレームのある最初の列が残りのスペースの高さの 3 分の 1 を占め、3 番目の列が 3 分の 2 を占めることがわかります。 言い換えると、3 番目の高さは最初の 2 倍になります。

1 つの属性でフレーム ウィンドウのサイズを設定するには、3 つの方法すべてを使用できます。次に例を示します。

その結果、最初のフレーム列の幅は利用可能な領域全体の 10 パーセント、2 番目のフレーム列は 100 ピクセル、残りの 3 列の幅は 4、3、9 分の 2 の割合になります。残りの幅スペース。 したがって、すべてがシンプルかつ明確です。

メイン ウィンドウを水平フレームと垂直フレームに分割するだけでなく、たとえばそれらの組み合わせにも分割したい場合は、フレームセット要素の入れ子構造を列ごとに、行ごとに個別に使用できます。 たとえば、以下のスクリーンショットに示されている構造を取得するには、次の構造を使用するだけで十分です。

それらの。 まず、「frameset Cols=”20%,80%"” を使用して、利用可能なすべてのスペースを垂直方向に 2 つの列に分割し、右側の列のコンテンツを「frame」タグで設定します。ただし、「frame」要素を追加する代わりに、左側の列では、新しい「frameset rows=“10%,*”」を開きます。

これを利用して、右側の列をフレームを含む 2 行に分割します。その内容は 2 つの「frame」タグを使用して設定され、その後、両方の「frameset」コンテナを閉じます。 すべてがシンプルで論理的です。

Frame要素のSrc属性にパスを指定する

しかし、私たちは皆、Frameset 要素とその Cols 属性と Rows 属性について話し合い、これを利用して構造を形成し、そのサイズを設定しました。 次に、必要なフレームに必要なドキュメントを表示する方法と、それらのウィンドウ間の対話を構成する方法を考えてみましょう。

では、作成するウィンドウの外観を制御するにはどうすればよいでしょうか? これらすべては Frame タグの属性に含まれています。 最初に言及する価値があるのは、 送信元。 HTML コードへの画像の挿入を検討したときに、Img タグでそれをすでに確認しました。 その本質は変わっておらず、フレームにロードする必要があるドキュメントへのパスを指定することができます。

Src 内のドキュメントへのパスは、 として指定できます。 通常、独自のリソース上にあるドキュメントには相対パスが使用されますが、別のサイトからフレーム ウィンドウにドキュメントをロードする場合は絶対パスが必要になります。

目的のドキュメントへのパスを示す Src 属性が指定されていない場合、空のドキュメントがウィンドウにロードされます。 個人的に、私はかつて自分のブログで同様のことを (追加のナビゲーション要素として) 行い、同時にホスティング サーバー上にブログ用の別のフォルダーを作成し、そこにフレーム構造を持つ HTML ファイル (インデックスと呼びました) を配置しました。 .html）だけでなく、背景として使用された画像ファイルだけでなく、さまざまなドキュメント ウィンドウにもすべてロードされます。

したがって、Frame タグの Src 属性で相対リンクを使用するのが最も簡単でした。

注目すべき点は、このコードで指定されているすべてのリンクを相対リンクから絶対リンク (https://site/navigator/joomla.html など) に置き換えてブラウザでこのファイルを開くと、Frame で指定されたドキュメントが読み込まれることです。私のサーバーから送信すると、ブラウザに同様の画像が表示されます。 さらに、フレーム構造を含むファイル (index.html) がコンピュータ上またはホスティング上のどこにあるかは関係ありません。

図の例では、左フレームのウィンドウに通常メニューであるあるメニューのページが読み込まれています。 しかし、重要なのは、メニューがどのように形成されるかではなく、そのリンクをクリックした後に何が起こるかです。

これを実行すると、すべてが正しく行われ、右下のウィンドウにドキュメントが開きます。 しかし、このためには、小さなトリックを 1 つ使用する必要がありました。デフォルトのバージョンでは、ドキュメントがウィンドウ全体のサイズで開き、フレーム構造が置き換えられました。これは、左側と上部のフレームにナビゲーション メニューがあるため、まったく必要ありませんでした。消えた。

フレーム内のリンクからドキュメントを開く方法

したがって、ハイパーリンクについて説明したときに、「A」タグ属性を Target=_blank として説明しました。 それが何のためにあるのか覚えていますか？ リンクされたドキュメントを新しいウィンドウで開くのが正しいです。 デフォルトでは、同じウィンドウで開く必要があります。これは、target="_self" と同等です。

しかし、これらはチャンスです 目標限定されるものではありません。 それに値を追加できることがわかりました フレーム名としてこれは、Frame タグの特別な Name 属性で事前に指定されます。 このリンクを介したドキュメントは、すべてのスペースを占める同じウィンドウ内ではなく、指定したフレーム内で開きます。 それは明らかだ？ 完全にではないにしても、例を分析すると明らかになるでしょう。

それでは、上の図に示した例に戻りましょう。 右下の (大きな) フレームの左側のウィンドウからリンクを使用してページを開く必要があります。 したがって、最初に、Frame タグの Name 属性を使用して、この大きなウィンドウに名前を付ける必要があります。

彼らはそれを作り、「ktona」と名付けました。 これで、左側のウィンドウにメニューとして読み込まれたファイルを安全に開き、そのファイル内のすべての A タグに Target="ktona" 属性を追加できます。

Joomla と VirtueMart コンポーネントの歴史

もちろん、検索と置換ツールを使用すれば、すべてのハイパーリンクにこのツールを配置することは難しくありませんが、使用する絶好の機会があるときに、なぜ不必要にコードをロードする必要があるのでしょうか。 特別なBaseタグこれについては、ターゲットの空白の使用について説明したときに、ハイパーリンクに関する同じ記事ですでに説明しました。

基本の target="ktona" 要素を Head タグの開始タグと終了タグの間に配置するだけで十分です。このドキュメントの HTML コード内のすべてのリンクは、「ktona」という指定されたフレームで新しいページを開きます。

ところで、私がかつて存在していたツールを例として考えると、上部の水平ウィンドウからのすべてのリンクが、私の左側のメニューとして機能する左側の垂直フレームでページを開くようにする必要があります。 そのためには何をする必要があるのでしょうか?

まず、左側の垂直フレームに名前を付ける必要があります。

そして、上部のウィンドウにロードされるファイル (gor.html) に、ベースの target="gor" 要素を追加する必要があります。

これですべてが正しく完了しました。 上部のフレームからのリンクに続くすべてのドキュメントは左側のウィンドウで開き、そこからのすべてのリンクは中央の最大のフレームでドキュメントを開きます。 私の意見では、すべてはシンプルで論理的です。

ウィンドウの外観をカスタマイズするためのフレームタグ属性

次に、Src と Name 以外にどのような属性を Frame タグで使用してフレームの外観をカスタマイズできるかを見てみましょう。 まずは始めましょう スクロール。 これを使用すると、フレーム構造の各ウィンドウのスクロール バーの表示を個別に構成できます。

スクロールのデフォルト値は自動です。ブラウザは、フレームにロードされたドキュメントのサイズに基づいて、スクロール バーを表示するかどうかを自動的に決定します。 文書がウィンドウに完全に収まらない場合は、スクロール バーが表示され、文書を最後まで表示できます。

[はい] (ドキュメントがウィンドウに完全に収まる場合でも、ウィンドウ内のスクロール バーは常に表示されます) および [いいえ] (ドキュメントの一部が収まらない場合でも、スクロール バーはまったく表示されません) の値を使用することもできます。スクロールの値として。

かつて存在していたツールでは、デフォルト値の Auto を使用し、必要に応じてフレーム内のスクロール バーが表示されました。

Frame タグの次の属性は、 ノレサイズ- は単一です (値がありません)。 登録すると、デフォルトではフレームの境界線をマウスでドラッグするだけで変更できるサイズの変更が禁止されます。

マウス カーソルを境界線に移動すると、カーソルが両方向の矢印に変わり、マウスの左ボタンをクリックすると、境界線を自由に移動できるようになります。 Noresize はこの故意を禁止します (マウス カーソルをウィンドウの境界線に移動すると、双方向矢印が表示されなくなります)。

もう一つの視覚的属性は、 枠線。 これを使用すると、フレームとフレームの間にフレーム（境界線）を描画するかどうかを指定できます。 Frameborder には、0 (フレームを描画しない) または 1 (境界線を表示する) の 2 つの値のみを指定できます。 もちろん、デフォルト値は 1 です。

微妙な点が 1 つあります。 表示される境界線を削除したい場合は、表示される境界線を削除したいフレームのすべての Frame タグに Frameborder=0 を追加する必要があります。

さて、Frame タグのいくつかの属性をまだ考慮する必要があります。 マージン幅とマージン高さこれは、ウィンドウの境界からそこに読み込まれたコンテンツまでの幅 (右と左) と高さ (上と下) のパディングを設定します (数字はパディングのピクセル数を意味します)。

なぜフレームでウェブサイトを作成できないのですか?

古典的な構造の根本的な欠点が何であるかを見てみましょう。これにより、Web サイトを作成する際の使用は基本的に終了します。 それは、このフレーム構造によれば、 彼女の状態を追跡することは不可能です.

複雑な構造には何千もの異なる状態 (さまざまなフレーム ウィンドウで開かれたドキュメントのバリエーション) が存在する可能性がありますが、この構造そのものの URL アドレスは変わりません。 このため、 ブラウザのブックマークが使えないまたは、お気に入りのページへのリンクを他のユーザーに送信します。 なぜ？

アドレスは変更されないため、ブラウザのブックマークまたは電子メールからアドレスを開くと、保存したい状態ではなく、フレーム構造の開始状態を含むページが表示されます。

もちろん、この問題は HTML ツールではなく、サーバー (Php など) またはクライアント プログラミング言語 (JavaScript) の助けを借りて解決できますが、これらのソリューションは 100% 効率的ではありません。 実際、このようなソリューションでは、現在の状態に関する追加データをフレーム構造の URL アドレスに追加できますが、これは簡単ではなく、信頼性も絶対的ではありません。

これは、フレームを使用して Web サイトを作成する場合の最初の欠点であり、非常に重要な欠点ですが、もう 1 つ大きな欠点があります。 もちろん、検索エンジンは長い間、文書にインデックスを付け、そこからウィンドウに読み込まれる文書のアドレスを抽出する方法を学習してきました。 問題は違います。

ユーザーが Yandex または Google の検索結果から、フレーム構造に基づいて構築された Web サイトに移動すると、構造全体ではなく、フレームの 1 つに読み込まれたドキュメントのみが開きます。 私の言っていることが分かりますか？

ユーザーはドキュメントを見て、 サイトにナビゲーションが表示されません他のウィンドウでは保護されており、構造全体の一部としてのみ読み込まれるためです。

その結果、フレーム上に構築されたサイトは単純に使用できなくなります。 繰り返しになりますが、個々のドキュメントのアドレスから望ましい状態のフレーム構造へのリダイレクトが実行される場合、サーバー スクリプトに基づいてこの問題を解決する方法はありますが、これも非常に困難であり、常に信頼できるわけではありません。

一般に、結論は明確に導き出すことができます。 フレーム上にウェブサイトを作成する必要はありません。 ただし、これらはさまざまなアプリケーションのヘルプを作成するために常に使用されており、他の小さなことにも役立ちます。

たとえば、私は「ナビゲーター」と名付けたフレーム構造を作成しました（現在は一時的に削除されています）。これはブログの一種の拡張外部メニューとなっています。これにより、リソースの操作が簡素化されると思われます。したがって、「ナンセンス」を改善することは、サイトの宣伝に非常に強い影響を及ぼします。

ただし、検索エンジンの問題を避けるために、このフレーム構造全体を非表示にし、念のためすべての HTML ファイルに Rodots メタ タグを追加して、インデックス作成を禁止しました。

ただし、これらの制限はすべて、Frame タグと Frameset タグの構造にのみ適用されます。 Iframe タグに埋め込まれたフレーム目に見える欠陥はなく、少なくとも YouTube からビデオを挿入する場合には、プロジェクトで使用できますし、使用すべきです。

頑張って！ ブログサイトのページでお会いしましょう

興味があるかもしれません

HTML コードのコメント ディレクティブと Doctype、およびブロックとインライン要素 (タグ) の概念
埋め込みとオブジェクト - Web ページにメディア コンテンツ (ビデオ、フラッシュ、オーディオ) を表示するための HTML タグ
Img - 画像の挿入 (Src)、テキストの配置とその周りの折り返し (align)、および背景 (background) の設定のための HTML タグ
ハイパーテキスト マークアップ言語 HTML とは何か、および W3C バリデーターですべてのタグのリストを表示する方法 選択、オプション、テキストエリア、ラベル、フィールドセット、凡例 - ドロップダウン リストおよびテキスト フィールドのフォーム用の HTML タグ
HTML コード内のリスト - UL、OL、LI、DL タグ
フォント (文字、サイズ、色)、Blockquote および Pre タグ - 純粋な HTML での従来のテキスト書式設定 (CSS は使用されません)
Html および CSS コードでの色の設定方法、テーブルでの RGB シェードの選択、Yandex 出力およびその他のプログラム

「フレーム」という用語は英語から来ています。 翻訳すると、この言葉は「フレーム」を意味し、ウィンドウの別の領域を表します。 その構造上、このようなセクションは完全に完成した HTML ドキュメントです。

個々のフレームは、ブラウザ ウィンドウを並べて配置されるセクションに分割します。 この場合、各フレームには独自の完全なページがロードされます。 フレーム技術は今でも多くの論争を巻き起こしていますが、その人気のピークはすでに過ぎたと言わざるを得ません。 このテクノロジーは現在非推奨とみなされており、通常のフレームは HTML5 でサポートされなくなりました。

技術の歴史

今日、フレームテクノロジーの使用から離れるという決定が最終的に下されたと言えます。 サイト https://www.w3.org/TR/html5-diff/#obsolete-elements には、そのような構造を作成するための通常の Frame、frameset、および noframes タグが非推奨であることが明確に記載されています。 議論として、そのような構造の使用がインターネット上のサイトの使いやすさとそのアクセシビリティに悪影響を与えるというデータが提供されています。

しかし、最新のテクノロジーは IFRAME 要素をサポートしています。 これを使用すると、ページ上のテキスト ブロックにフレームを挿入できます。 さらに、そのような要素はテキスト自体に対して位置合わせすることができます。 注意点：内蔵フレームのサイズは原則変更できません。 これらには、サイズ変更に対応する属性がありません。

将来的には、技術の飛躍がなければ、フレームがさらに使用される可能性は低くなります。 そして、インターネット技術の標準化を主導する組織である W3C が、Web サイト開発者はそのような構造を使用すべきではないと明確に示していることは覚えておく価値があります。

つまり、原則として、新しいリソースを作成するときにページを構造化するためにフレームを使用すべきではありません。 しかし、既存のサイトのサポートと改善があれば、テクノロジーの機能とその使用法に関する知識は非常に役に立ち、生産的になります。

フレームの利点

フレーム テクノロジーの利点には、使いやすさ、高速性、ウィンドウの特定の領域に情報を正確に配置できる機能などがあります。

フレームを使用すると、サイトでの作業中に送信されるトラフィックの量が節約されます。 結局のところ、情報の別のセクションにアクセスする場合、通常はページの 1 つのセクションだけが更新され、コード全体が更新されるわけではありません。

この構造は、リソース コンテンツを通じて興味深いナビゲーション オプションを提供します。 結局のところ、ブラウザ ウィンドウ内で隣接するフレーム内にさまざまな情報ブロックを表示できます。 ユーザーにとって、フレーム内での検索は、別のページでそのような操作を実行することと同等であることを知っておくことが重要です。

サイトでの作業中に、別のセクションのサイズを動的に変更できますが、これは他の技術ソリューションを使用して実装するのが困難です。

考えられるデメリット

フレームを使用する Web サイトの問題は徐々に蓄積されましたが、現在ではしきい値レベルに達しています。 主な欠点としては次のようなものがあります。

1. 使用感が不満。 現在、画面解像度の小さなモバイル デバイスやタブレットのユーザーの割合が増加しており、デスクトップ コンピューターやラップトップからサイトにアクセスするユーザーの数をすでに上回っています。 そして、ここでフレームを使用すると、さまざまなデバイスで表示されるページの応答性に重大な問題が発生します。 この問題には現在、実用的な解決策がありません。
2. さまざまなプログラムのサイトへのアクセシビリティの低下。 追加プログラム (スクリーン リーダーなど) の数が増えると、読むための情報へのアクセスが大幅に悪化することが明らかになります。
3. ページが正しく表示されません。 多くの場合、このような構造を持つページのレイアウトは、デザインの観点からブラウザーでは正しく見えません。 そしてこれはテクノロジーの特性によるものです。 SEO の観点からすると、ページの HTML レイアウトでフレームを使用することは非常に望ましくありません。
4. 構造全体に対して単一のアドレスを使用可能。 その結果、そのようなサイトの内部ページはブックマークできなくなります。 これはユーザーにとって不便につながります。
5. 検索エンジンによる不適切なインデックス作成。 1 ページを構成する複数の本格的な文書が Web サイト上に存在すると、検索エンジンの作業が大幅に複雑になります。 これにより、インデックス作成時に重大なエラーが発生します。 その結果、トピックとページ アドレスの定義が正しくないと、インデックス作成から重要なコンテンツが失われることになります。
6. 軽蔑する。 これは、ネットワーク上のリソースにとってはかなり珍しい欠陥です。 しかし、フレーム上のサイトのレイアウトが時代遅れになりつつあるという事実は、そのようなリソースの作成者や所有者が逆行していると見なされているという事実につながっていると言わなければなりません。 ただし、いくつかの例外もあります。 チャット ルームをホストする最近のサイトでも、通常はフレームを使用します。

検索エンジンによるフレームのインデックス作成

検索エンジンから得られる情報によれば、フレームのあるサイトのインデックス作成が著しく遅くなることが明らかです。 この場合、構造自体に関連してエラーが発生することがよくあります。 結局のところ、各フレームには本格的なインターネット ページが表示されます。 そして、サイトのまさにそのような部分がインデックスデータベースに含まれる可能性があります。

このようなインデックス作成のマイナス面は、ページの内部に移動すると、通常、ユーザーにはメニューやその他のナビゲーション メカニズムが表示されないことです。 そしてこれは驚くべきことではありません。 この場合、フレームの更新は問題の解決策ではないことを理解する必要があります。 結局のところ、すべてのナビゲーション メカニズムは別のコンテナーに配置されます。

もう 1 つの問題は、多くの場合、コンテナ構造のメイン ページにはタイトル、メタ ディスクリプション タグ、および FRAMESET タグしか含まれていないことです。 そして、これは論理的であるように思えます。結局のところ、意味のあるコンテンツは別のドキュメントに配置されます。 サイト訪問者がページ上でフレーム内に表示するのはこれらです。

しかし、検索ロボットがそのようなページにインデックスを付けることはほとんどありません。 訪問者にとって有益なコンテンツは見つかりませんでした。 検索ボットは、body タグ内に配置された情報を取得してインデックスを作成しようとするように構成されています。 ここで、ユーザーにとって役立つコンテンツの検索が行われます。 しかし、フレーム ページにはそのようなタグはなく、FRAMESET に置き換えられます。

この問題は、NOFRAMES を使用することで部分的に解決できます。 しかし、多くのサイトでは、アクセスすると、ブラウザがフレームをサポートしていないという情報のみが表示されます。 また、ページを表示するには、別のプログラムを使用する必要があります。

このような場合、ユーザーがサイトにアクセスしたときに、表示されるべきメニューやその他の情報が表示されないという多くの問題が発生します。 Web サイトにフレームが配置されると、SEO の観点からのパラメータが低下します。 同時に、ユーザーの行動統計は、検索エンジン間のリソースの権威が低下していることを示しています。 これは間違いなくウェブサイトのトラフィックに悪影響を及ぼします。

検索エンジンやインデックス作成ボットにとって、ネストされた複数の人員構造を処理するのは特に困難です。 各コンテナには個別のドキュメントのすべての機能が含まれていますが、完全なナビゲーションやその他の情報が含まれていないという事実が、状況をさらに複雑にしています。

ページに正しいリンクを使用すると、検索エンジンの作業が容易になります。 この場合、すべてのメニュー リンクを複製して、ページの個々の部分内で見つけられるようにする必要があります。 しかし、これにより、サイトの最適化とサイト上の情報の更新の作業が大幅に複雑になり、速度が低下します。

多くのオプティマイザーやウェブマスターの経験からも、フレーム上のページは検索結果で上位にランクされないことがわかります。 これは、それらがインデックスデータベースに含まれている場合でも発生します。

フレームでのWebサイトプロモーションの特徴

一部の検索エンジンは、フレーム化されたファイルのインデックスを正しく作成しないか、非常に間違っています。 その結果、インデックス データベースには (当然のことながら) 親リソースのアドレスではなく、子サイトへのリンクが書き込まれます。

フレームに基づいてサイトのインデックスを作成する際の問題を最小限に抑えるために、サイトを記述するときに特別なタグとパラメータが使用されます。 コンテナ構造の主な要素はフレームセットです。 ソースコード内の標準本体を置き換えるのは彼です。 構造内の個々のコンテナはフレームによって記述されます。 ページ コード内のその量は、閲覧時にブラウザ ウィンドウに表示される個々のセクションの数に対応します。

これらのタグはサイトのメイン ページに配置し、それぞれのタグ内のコンテンツを複製する必要があります。