USARA-Net Logo USARA-Net HOME Previous Page 文字サイズ[ ]推奨 ソース表示ボタン >>
Updated 2005/10/04

Previous Page
Frontpage Express の使い方 4
ホームページ? - パソコン設定など - 使ってみる - ティップス - 色作成ツール
Need to Play with MIDI Decode Plugin   "Pavane" Music by Ravel. Midi Sequenced by Jack Sirulnikoff.
Pushon to Start.
このボタン表示がされない場合はこちら
Bookmark | Hyperlink+Bookmark | Target Frame | Previous Page | Jump to New Page
Close Window | Print Window | Popup(On Mouse) Text | PNG Image | GIF/JPEG Image
Background Image | Watermark | File Size | Table Size
Linkage Path | Midi(Plugin) Insert | JScript/JavaScript| Frameset
下記文章中、『ソース』と『スクリプト/構文』は同義です。
●ブックマーク
 ページ内指定場所へジャンプ。
A.例えばページの終わりにトップへジャンプ(一番上へスクロール)させるには
 クリック対象が画像(イメージ)の時は画像上で右クリックして画像のプロパティを選択。
 【既定のハイパリンク】の【場所】に半角小文字で#topと記述します。
 クリック対象が文字の時は相当部分の文字(例えば”トップヘ”など)をドラグ反転表示して
 【挿入】→【ハイパリンク】→【WWW】タブのURL 欄に#topと記述。
 または【編集】→【ハイパリンク】→【WWW】タブでも同様。
 このリンク記述には〔受け〕のブックマークは無くても動きます。

B.指定の場所にジャンプさせるには、
・上記と同様にハイパリンクの記述をしますが#topに代えて指定の場所名を入れます。
  場所名の頭に#をつけて、例えば#bookmark1とします。

・ブックマーク先〔受け〕には画像の場合は画像左にカーソルを置いて、
  文字部分の場合は相当行頭にカーソルを置いて【編集】→【ブックマーク】の
  【ブックマーク名】に例えばbookmark1と記述。
  文字の場合、ドラグ反転して指定することもできます。
  その時は編集中に文字が破線アンダライン付で表示されブックマークの旨を表示。
  カーソルを指定行の頭に置き(ポインティングして)ブックマークの指示をした時は、
  フラグ表示が編集中に表示されてブックマークを示します。
  フラグ表示分だけ編集中の表示文字位置がずれます。実表示ではずれません。
  (ブックマーク先のタグは<a name>---</a>となります。)

●他ページへの
 ブックマーク
 他ページ指定場所へジャンプ。
ハイパリンク先記述+ブックマーク記述ですから例えば
 相対位置関係(階層)が一つ上の場合は、../column/index.html#boolmark1
 (../ はドットの2連+スラッシュ)、
 相対位置関係が下の場合は、column/index.html#bookmark1となります。
 同階層であれば、index.html#bookmark1となります。
●ターゲットフレーム
 新しく開くページの
 開き方などを指定。
 無指定では、
 新規ページにそのまま
 移動します。

 別ページで開くは、
 ブラウザコンテキストメニュの
 【新しいウィンドウで開く】と
 同じ機能。
※コンテキストメニュとは
 右クリックで出てくる
 メニュボックスのことです。
 ( context: 前後関係の )

Frameset

ハイパリンクを記述する時に、【挿入】→【ハイパリンク】→【WWW
 (または【編集】→【ハイパリンク】→【WWW】)タブのURL にリンク先を記述し、
 下段の【ターゲットフレーム】に_blankと記述。

主に他サイトへのリンクに使用。自分のサイトに容易に戻ってもらえるようにです。
自サイト内で使う時はポップアップ的なページに使うと良いようです。
おおげさでないテキスト(拡張子txt)フォーマットのページなどに。
本サイトではギャラリページのイメージ拡大ページへのリンクで多用しています。

最近流行らない?フレームセットを構成している場合は、ここでジャンプ先フレームの
指示をします。ただしメインページ記述では【ターゲットフレーム】にcontentなど。
すると、例えば左側メインフレームは残りますが右側フレームだけジャンプします。
※フレームセット構成は例として、以下のファイル構成になります。
1.index.html: フレ−ムページ指定のファイル。
 (画面では表示されないファイル。Body Tagは原則使いません)
 このファイルで以下の各ページ幅、フレーム境界表示有無などを指定。
2.menu.html: 例えば左側のメニュページファイル。
3.index2.html: 右側のトップページコンテンツファイル。
 (home.htmlなどは使わない。サーバにより表示されない時があります)
4.xxx.html: 各コンテンツページファイル。
以上のような構成で、2以下のページファイルをブラウザが表示します。

※フレームセットは画面上では1枚ですが、印刷時は通常1フレームを1枚として印刷。
 従って上部に
2フレームなんか置かれるとタイトルだけの無用印刷が2枚されます。
 私はフレームセット構成は閲覧者に利便性のないものと思っています。

●”戻る”
 元のページへ戻るリンク
例えば戻ると書いて”戻る”をドラグ反転表示し、ハイパリンク欄に下のように記述。
javascript:history.go(-1) 、または javascript:history.back()
勿論全て半角で記述します。Header(head/head)javascriptの記述は不要。
画像の場合は【画像のプロパティ】で【既定のハイパリンク】に同様に記述。
このページ右上の"Previous Page" を右クリックしますと、
プロパティのアドレスに記述が見えます。
●自動ページジャンプ
 次ページへ自動ジャンプ
URLやページアドレス変更時に、自動で新ページへジャンプさせる場合等に使用。
headに以下メタ例を挿入。contentはジャンプまでの秒数、URLはアドレス。
アドレスは自サイトなら相対リンク、他サイトならhttpで始まる絶対リンク。
<meta http-equiv="refresh" content="8; URL=index2.html">
●ウィンドウを閉じる
 Javascript
例えば閉じると書いて”閉じる”をドラグ反転表示し、ハイパリンク欄に下のように記述。
javascript:close() 。Header(head/head)へのjavascript記述は不要。
to Sample Page
"閉じる"ボタン <Form>
<Input Value="
閉じる" Type="button" onClick="window.close();">
</Form>
to
Sample Page(詳しい解説)
●印刷する
 Javascript
  印 刷 】
例えば印刷と書いて”印刷”をドラグ反転表示し、ハイパリンク欄に以下のように記述。
javascript:print() 。Header(head/head)へのjavascript記述は不要。
"印刷"ボタン
 
印刷ボタンを入れる。ソースに以下を記入。
<button class="input" onclick="window.print();" style="width=100">
<font face="Verdana">Print Button</font></button>
下線部は印刷ボタンとかに変えても良い。デフォルトフォントであればfontタグ不要。
後でボタンの場所を変える時はFrontpage Expressでマークアップごと
切り張りすれば可能です。
Frontpage Expressでは、閉じるボタンサンプルページに関連解説。
●ポップアップテキスト
(マウスオーバテキスト)
テキストがマウスオーバ状態になった時にポップアップテキストを表示します。
この上にマウスを置いてください。ポップアップテキストが表示されます。
リンクの有無には関係なく表示されます。

ソース編集でSpan Tagを挿入記述してください。
該当テキスト部分直前に、
<span title=" *** " >を追加。" *** " に表示テキスト記述。
例えば<span title="マウスオーバテキストです">この上</span title>

PNGフォーマット
 画像
PNGフォーマット画像はFrontpage Expressでは蹴られます。ページ保存時に、
挿入した画像を『新規に保存するか』と聞いてきてGIFに変換して保存しようとします。
どうしてもPNGフォーマットを使う場合は、テキストエディタで構文(Script)を書きます。
そういったこともありTERA PADなどの高機能のエディタが有用になってきます。
※この悪さを逆用すればPNGGIF変換のツールになりますが?
GIFJPEGの違い
 (透過と不透過)
 (インタレース)
最も異なるのが透過の問題です。
一般的に、透過とは画像の何も無い部分が透明(クリア)なことを指しています。
透過しないというのは白です。
GIFは透過選択機能を備えていますがJPEGでは全面不透明になります。
従ってJPEGイメージの後ろ(下)の画像は前(上)へは出てこられません。
イメージを重ねたい場合に、最下位にはGIFJPEGいずれも使えますが
その上には透過フォーマットのGIF、またはPNGイメージを載せないと
下のイメージはスポイルされてしまいます。
GIF256色しかサポートしていませんので写真イメージなどはJPEGを使用します。

透過GIFJust Systemの”花子”などでもサポートしていますから
”ファイル→ 一部保存→GIF形式選択→透過・256色選択→保存”します。
PhotoshopでのGIF保存は不要部分を透明状態にして
 (必要部分をコピーし新規透明レイヤにペースト)
”ファイル→書き出し→GIF89a”となります。Photoshop Elementでは
書き出しなどの面倒がなくなりました。

インタレースは初めに間引き表示(プロファイルを表示)してやがてはっきりした
イメージにする形式です。
GIFではそのままGIFインタレースといい、JPEGではプログレッシブJPEGといいます。
NTSC-TVフォーマットと類似です。
TVでは初めの1/2sec262.5line30frame走査し、
次ぎの1/2secで前の走査を埋める形で間に262.5line30frame走査しています。
走査完了時に525line30frameの画像になります。0.5lineの端数は
画面左上端で始まり中央下で終わるのと中央上から始まり右下端で終わるためです。)

GIFインタレースの場合で、標準に比べて1割程ファイルサイズが大きくなります。
※プログレッシブJPEGFrontpage Express編集中にイメージ表示されません

JPEG
JPEG(jpg)
不透過GIF
NonThru GIF(gif)
透過GIF
Clear GIF(gif)
●背景に画像の場合の
 注意
このセルのように、背景に画像を用いると画像の上に文字を重ねる
 レイヤのようなことができます。
Frontpage Expressで表・セル内にこれを行うと選択画像のリンクを
file:///C:/Web/---/ab.gifなどとして自動的にフルパスで記述します。
ローカルではこのままで背景表示されますが、アップすると表示されません。
パスを相対リンクに書き換えてください。つまりfile:///C:/Web/---/ab.gifの内の
不要な頭の部分を削ります。
どこが不要・必要な記述かは、下の相対リンクをお読み下さい。

※模様ではなく定形の写真やアニメなどを背景に用いる場合は、
 セルの幅と高さをリンクイメージサイズと同じピクセル数で指定します。
 そうしないと2重になったりします。
 【セルのプロパティ】で【最小幅】、【拡張】→【追加】で【名前】にheight
 【値】にピクセル高さを入れます。
※このセル上にカーソルを置き右クリックすると背景ファイルの保存ができます。
※表の中に表を挿入するなどの工夫でかなりイメージを重ねることが可能。

●ウォータマーク ウォータマークとは背景に画像を使用した時に、背景画像は固定したまま
ページスクロールする機能です。よって背景に画像を使用した時に設定できます。
【ページのプロパティ】→【背景】タブで背景選択ボタンの右のボックスをチェック。
ソース表記は以下例のようになります。
<body background="Img/Bkgnd.jpg" bgproperties="fixed">
to
Sample PageNetscape, Mozillaではノンサポートです。
●ページファイル
 サイズ
ページのファイルサイズはhtmlファイルだけ見てもダメ。ローカルで該当ページを開き
---.htmlファイルと ---.filesというフォルダのサイズの合算になります。
IE5以降の場合はWebアーカイブ(mht)で保存してファイルをチェック。
Webアーカイブ(mht)では前述より10-30KB大きくなります。
各ページは100KB程度までが望ましいようで、接続が28.8kbpsの場合は
3.6KB/secMaxですから1page転送に30秒近くかかります。
この値30秒を超えるとつらいものになってきませんか?
時々200KB位の画像多用のきれいなトップページを見受けますが感心できません。

画像は画質低下が目立たないよう軽くし多用せず、
(多少画質を落としてPhotoshopで標準=3-4MS PhotoEditor75保存が目安)
ブラウザの持っているレンダリング機能を上手に利用してデザインします。

サムネイルも馬鹿にはできません。160x120pix4-9KBです。
10枚で〜90KBですからかなり重くなります。
--- 〔不言実行〕のおしかりは覚悟しております。クシュン ---

※ファイルサイズ等を表す場合のKBで補助単位に大文字を使用するのは
 
K=1024 で通常のk=1000ではないからでしょうか。
 但しMは元が大文字なので区別しません。
 100KB=100x1024=102,400bytes
 100MB=100x1024x1024=10,485,760bytesです。
 基本的なことで、1byte=8bitsで単位・補助単位は大・小文字が決まってますから
 混用は避けます。
 付け加えてB=byte, b=bit or bau と使い分けする場合があるようです。
 さらにHDDなどでは違う換算をしている場合がありますから、単位には注意。
※サーバの容量契約はbytes管理です。ファイルまたはフォルダプロパティの
 実バイト数が契約を超えないようにします。超えていると
Uploadできません。

●テーブル(表)
 サイズ
テーブルの横幅は800pix以下。なぜならプリントアウト時のからみがあるからです。
プリンタ余白ゼロの時に800pixA4縦フルなので、余白を考え720pixあたりが最適。
ただし、このテーブルは760pixですが。IE5.5以降ですと印刷プレビューで確認可能。
●絶対リンクと
 相対リンク
まず説明のために簡単なウェブページのフォルダ・ファイル構成を示します。
赤字はフォルダ名です。

●エリア表示(こういう言い方でいいかわかりませんが)。枠はフォルダです。
Area.gif

●ツリー表示
Tree
・絶対リンクとはジャンプ先のファイル名あるいは貼り込み挿入する画像の指定を
 ローカルマシンの絶対位置(フルパス)で書いていくものです。
 ハードディスクのDパーティションのweb 内のmain フォルダ内のindex.html
 travel フォルダ内のtravel1.jpg という画像ファイルを挿入貼り付ける場合は、
 D:/web/main/travel/travel1.jpg という、いわゆるフルパスで記述したリンク。
 データ全体の保管場所を変更できないなど、不都合を生じます。
・絶対リンクのもう一つの形としてhttp://www.---.com/travel1.jpgのように
 サーバマシンの絶対位置(フルパス)での指定がありますが、
 他サイトリンクの場合を除き、ローカルで閲覧できないなどの不都合を生じます。

・これに対して相対リンクとはリンク先パスを相対位置関係で書きます。
 同様にハードディスクのDパーティションのweb 内のmain フォルダ内のindex.html
 travel フォルダ内のtravel1.jpg という画像ファイルを挿入貼り付ける場合は、
 travel/travel1.jpg となります。
 【挿入】→【画像】で画像の挿入をすると自動的に相対パスで記述されます。

travel フォルダのindex.html からindex.html (トップページ)へ戻るリンクを
 書く(張る)場合は上りリンクですから、
 ../../index.html となります。../../ 2回上がることを指示しています。
 ../index.html ではmainフォルダのindex.html へのリンクとなります。

Frontpage Express では相対パスで書きます。
 
そうしないと編集中に画像の表示がされません。
 また、作成したウェブページ全体の移動もままなならない状態になります。

Midi Insert Midi Fileなどを挿入して音楽再生ができるようにします。別ページで説明
ページプロパティでバックグラウンドを設定するとBGMを付加できますが、
押し売りをしている形になり、最悪です。聞きたくない時はVolを絞れば良いのですが。
なお、GM(GS)音源でないと再生できないオーディオカードがあります。
JScript/JavaScript
 (I.EN.N)
Internet Explorer Netscape Navigator では
Java Scriptの扱いが一部違いますのでIEに合わせてScriptを書いた場合に
NNでとんでもない表示になることがあります。
Javascript1.2などとなっている部分をJScriptと書き直すと
IEでしかScriptを認識しなくなるようです。
NNではJavaScript作動(表示)がされなくなりますが、とりあえず逃げで。

JavaScriptなどを用いた面白いものを集めたサイトをおすすめサイトで紹介。
 説明通りに切り貼りしてリンク部分・変数などを自分に合わせればできあがります。
 Script 内の著作者・権利部分等の抹消・変更はしないように。

Bookmark | Hyperlink+Bookmark | Target Frame | Previous Page | Jump to New Page
Close Window | Print Window | Popup(On Mouse) Text | PNG Image | GIF/JPEG Image
Background Image | Watermark | File Size | Table Size
Linkage Path | Midi(Pluin) Insert | JScript/JavaScript | Frameset

  Frontpage Express以外のフリーウエアツール

Netscape/Mozilla Browser付属のComposerがあります。
こちらはソースエディタも付属しており、タグを含めた解りやすい表示で作業可能。
Netscape: http://channels.netscape.com/ns/browsers/default.jsp
Mozilla:
http://www.mozilla.org/
両方生まれ育ちが同じです。Char.Code Set 変換は非常に使いやすい。
なんでもそうですが、慣れればFrontpage Expressより使いやすいでしょう。


ホームページ? - パソコン設定など - 使ってみる - ティップス - 色作成ツール
Previous | Page Top

上記中の固有名称等には、一般に各権利者の登録商標または商標を含みます。

  うさらぎゃらりGIFアニメおすすめフリーソフトおすすめサイトPCローカルインフォ
 

Copyright © 1999-2004 USARA-Net. All Rights Reserved.
http://www.usara.net/