lr_main.htm  ホームへ(ページ全体新しいWin)  topへ(右)  ジャンプのデモは左記リンクのクリックで!。

<説明> 

(1) サンプルページ 左右フレームページ frame4(lr_frame4.htm) は、左フレーム(lr_left.htm)と、メインフレーム(右)(lr_main.htm)の3ファイルから構成します。

(2) 左フレーム中のハイパーリンクによって、メインフレーム(右)が変わります。  フレームの境界はブラウザ上で可変できます、左右フレームとの境界は、幅が狭いため見えません。   コンテンツサイズが画面や、Win、フレームサイズより大きい時は、スクロールバーが自動付加されます。

(3) このサンプルは、左フレーム、メインフレームからなるフレームページが作成済み。   top … 1…7 … end(文字列編集可能) のブックマークと、これらにジャンプするハイパーリンクが作成済みです。   タグの直接編集には、WordPad などのテキストエディターを使用します。

(4) ローカル(=PC)への保存は、lr_frame4.htmlr_left.htmlr_main.htm をそれぞれ右クリックします。  [対象をファイルに保存] - などで。  *.html などの拡張子部分などの変化は修正します。  lr_frame4.htm のクリックで開けます。

(5) 編集は、ローカル(=PC)への保存した lr_frame4.htm、lr_left.htm、lr_main.htm の3ファイルを、個別に FrontPage Express や、WordPad で開き、コンテンツのインデックスタイトルや、コンテンツの追加、削除など編集を行います。   HTMLの直接編集を、Wordpad や シンプルテキスト などのテキストエディターや、HTMLタグ編集メニューで行っても同じです。   左フレーム lr_left.htmのハイパーリンク追加は、”追加ページ1”をコピー、編集(URL変更)、ペーストすれば簡単です、この方法でも。   左右フレームの境界フレーム幅の変更は、 lr_frame4.htm を WordPad で開きタグを編集します、 <frameset framespacing="1" border="false" frameborder="0" cols="14%,*"> 部分の 1を 2〜5〔非表示は、0〕 に、左フレーム幅の変更は、14  を変更し、”テキスト文書”で保存します。   背景テキストハイパーリンク表示済みリンクアクティブリンクの色変更/指定は左記部分の記述で行います。  <body bgcolor="#FFF5EA" text="#151717" link="#310051" vlink="#670109" alink="#FF0080">ページのタイトル変更は、lr_frame4.htm を開き左記部分を変更します。 <title>サンプルページ  左右フレーム frame4</title>編集を終え、”テキスト文書”で保存します。    <説明>文など使用しないブックマーク、ハイパーリンクなどは削除します。   御参考 : HTMLの色指定色見本rgb.htm

(6) 作動テストは、lr_frame4.htm を Internet Explorer などで開き行います。   これらの3ファイルを、Webサーバーにアップロードします。

 

フレームページのハイパーリンクのHTML記述(例):

  テキストエディターで開き、下記、1)〜9) から選び、 ”<  >”で囲んだHTML を挿入先ファイルにペーストします、太字部分は編集し使用。


1)

2)

3)

 

4)

5)

6)

 

7)

 

8)

 

9)

※: 説明文であり、HTMLへの記述は不要。
  ※1:同じ階層=ホルダーのファイル指定のURLは、ファイル名のみでも可。

<a href="http://www.google.com/intl/ja/" target="_top">Googleを(フレームを破棄し)ページ全体で表示します。</a>

<a href="http://www.google.com/intl/ja/" target="_self">Googleを同じフレームで表示。</a>

<a href="http://www.apple.co.jp/quicktime/preview/index.html" target="_blank">Apple-QuickTime5を新しいWinで表示。</a>

<a href="hpb001.html#i72" target="_blank">”アクセスカウンターを付けてみる”の行を新しいWinで表示。</a>

<a href="http://www.google.com/intl/ja/" target="left">Googleを”左フレーム”で表示。</a>   ※3

<a href="http://dictionary.goo.ne.jp/ej/" target="right">英和辞典EXCEEDを”右フレーム”で表示。</a>  ※3と同様。

<a href="lr_main.htm" target="right">右フレームをデフォルトで表示に戻します。</a>  ※1

※2:lr_main.htm" は、右フレームファイル名、また target="right" は、フレームページで定義した ”frame name”、(例)= <frame name="right"

<a href="lr_left.htm" target="left">左フレームをデフォルトで表示に戻します。</a>

※3:lr_left.htm" は、左フレームファイル名、また target="left" は、フレームページで定義した ”frame name”、(例)= <frame name="left"

<a href="lr_main.htm#4" target="right">右フレームのブックマーク”4”(アンカー)に遷移(ジャンプ)します。</a>

※4:lr_main.htm のジャンプ先に、<a name="4">4</a> 、あるいは、<a name="4"></a> の記述をした場合。

<a href="#top">このページのtopへ遷移します。</a>

※5:このページの最上行に、<a name="top"></a> の記述をした場合。

 

 

HTMLソース(タグ)を見ながらの直接編集のための、WordPad の起動手順。

※:テキストエディターによる編集はHP制作ソフト間との整合性が失われません。   HP制作ソフト間は、書き替えが少し発生する。

  a、b、c、d いずれの方法でも可能。
a

(1) Winディスクトップのタスクバー左下、【スタート】 - [ファイル名を指定して実行]  名前: Wordpad(小文字)をタイプイン、[OK] Enterキーを押さえます。  

(2) 起動します。

(3) 【Wordpad】-[ファイル] - [開く] - index.html など(編集対象のファイル)を選択します。  ファイルの種類: ”すべてのファイル” を選択。

(4) HTMLタグが見えるようになり、タイプインやコピー&ペーストにて編集できます。

(5) WordpadでHTMLを編集完了。  

(6) 保存は必ず ”テキスト文書” 形式を選択します、ファイル名は、xxxxx.html などを保持します。

(7) Explorer で保存した xxxxx.html などのファイル名や、クリックでの閲覧を行い確認しておきます。

 

b (1) Winディスクトップのタスクバー左下、【スタート】 -[プログラム] - [アクセサリー] - [ワードパッド] クリックします。

(2) 起動します。  以降、 a と同じ。

 

c (1) WordPad をクリックします。

(2) メモとペンのアイコン付きの、 Wordpad.exe をクリックします。 起動します。  以降、 a と同じ。

 

d (1) Explorer で編集対象のあるホルダーを辿り、xxxxx.html などをポイント、反転表示に変わります。

(2) Shiftキーを押さえながら、右クリックします。  [アプリケーションから開く] - 【ファイルを開くアプリケーションの選択】 - ”WORDPAD” を指定します。

(3) 起動します。  以降、 a と同じ。

※: (2)で Wordpad で開く メニューが出現する環境もあります。

 

 

 


ここに内容などを記述します。

 

 

 

 

 

 

 

 

 

ここに内容などを記述します。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ここに内容などを記述します。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ここに内容などを記述します。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ここに内容などを記述します。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ここに内容などを記述します。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ここに内容などを記述します。

 

 

 

 

 

 

 

 

 

 

 

 

 

end

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

topへ