ホームページビルダー14・13・12・11 使い方解説


JAVA、CSSなどをページに直接記述するのではなく、ファイルの外に置いてリンクさせる方法をご紹介いたします。

外部ファイルの設定・・その前に
外部にファイルを置く場合、出来る限りパソコン側でfileという名前のフォルダを「image」フォルダ同様htmlファイルと同じ場所に作成しておく事をお勧めします。
JavaScriptの場合
殆んどフリーの配布サイトのプログラムを使用すると思いますので、ビルダーの機能は省略します。
配布されているスクリプトの記述をメモ帳などのエディターにコピーする。コピーする範囲は直接挿入する時とは違い、プログラムと書かれたところのみです。配布サイトによって宣言の記述が以下の様に異なりますが、コピーする箇所は同じです。
<SCRIPT type="text/javascript"><!--プログラム//--></SCRIPT>
<SCRIPT LANGUAGE="JavaScript"><!--プログラム//--></SCRIPT>
<script language="JavaScript"type="text/javascript"><!--プログラム//--></SCRIPT>
コピーしたメモ帳を保存する。
保存の際、ファイル名に任意の名前を付け拡張子に「.js](ドットjs)として、先に作成したfileフォルダに保存する。
ファイルの名前はwindow.jsとかご自身でわかりやすい名前を付けて下さい。
作成した「window.js」ファイルを、サーバー側のfileという名前のフォルダにアップロードする
作成していない場合は、接続後その場で作成しましょう。(サーバー側で右クリックで新規作成できます)
FTPツール又はFFFTPを使ってアップロードしましょう。
ページに外部ファイルへのリンク設定をする。
JAVAを使用するページの指定場所に<SCRIPT src="windouw.js" type="text/javascript"></SCRIPT>と記述する。以上で終了です。複数ページで同じスクリプトを使用する際、同じ作業をします。スクリプトの設置方法はJAVA/CGI編で確認してください。

スタイルシートの場合
外部ファイルとして扱うには、あらかじめ出来ているcssファイルにリンクを設定するか、新しく設定ファイルを作成し、そのファイルをページ内ではなく外部に置く2通りあります。ここは後者の解説です。
スタイルシートマネージャーを起動し、「リンク」右の▼をクリックし、メニューから「外部スタイルシートの新規作成/リンク」を選択する。
ファイル名の入力画面が出ますので、任意の名前(ここでは「test」としましょう)を考え入力しOK→次へ
あらかじめ作成されているものを使う場合は、上の図の「外部スタイルシートを洗濯してリンク」をクリック→
参照→対象ファイルを選択してください。

外部スタイルシートの追加を選択し、詳細を設定する。設定方法は
文書編のスタイルシートの設定で解説しております。このページへ
お戻りなるときはジャンプ先のページ下の「BACK」でお戻り下さい。
設定が終了したら、OKでスタイルシートが作成され、自動的にソースに以下のタグが書き込まれ、その場で設定が反映されます。<LINK rel="stylesheet" href="test.css" type="text/css">
※作成されたCSSファイルは、自動的にHTMLファイルと同じところに保存されますので、fileフォルダには入りません。CSSファイルをHTMLファイルと違うフォルダ(fileフォルダ内)へアップロードする場合は、ページのソースを書き換える必要がありますので注意してください。href="file/test/.cssとなり、file/を加えて書き換えなければなりません。
アップロードします。
簡単操作・・お勧め
一度ページにCSSを作成し、必要部分をコピーしてcssファイルを作成→外部に置く。
編集画面でスタイルシートを作成すると、ソースにスタイルシートが記述されます。記述された必要部分<STYLE type="text/css"><!--プログラム--></STYLE>のプログラムと書かれたところをコピーし、メモ帳に貼り付ける。{や}のカッコも忘れずにコピーする。
コピーしたメモ帳を保存する。
保存の際、ファイル名に任意の名前を付け拡張子に「.css](ドットcss)としてfileフォルダに保存する
スタイルシートマネージャーを起動し、今度は「リンク」選択します。外部スタイルシートの選択画面にて、「参照」からfileフォルダ→目的のスタイルシート(test.css)を選択。OKをします。パソコン内でリンクが貼られ、HTMLソースに「file:///My Documents/ホームページ/travel/file/test.css」と書き込まれます。ただし、保存場所によって異なります。
パソコン側のcssフォルダのtest.cssを、3で指定したサーバー側にアップロードします。

| 外部ファイルの設定 |