Column6. 「テキストエディタで作ってみよう」
複雑な構成のフレームページを作ろうとすると、作成ソフトによってはスクリプトを書いても自動修正されてしまい、意図した通りに作ってくれない場合があります。このような時は、「テキストエディタ」と呼ばれるソフトを使って、全て自分で書くより仕方がありません。しかしこれを覚えておくと、スタイルシートの外部ファイルを記述したり、他の様々なプログラムを組むことが出来るようになりますので、簡単なところから始めてみるのも面白いでしょう。作成ソフトに問題がないようなら、スクリプトをHTML編集画面に書き込んでゆけば、通常と同じに作成できます。 さて、Windows にはオマケで付いている「メモ帳」というのがありますよね。これは最も単純なテキストエディタですが、Windowsを使っていれば誰でも持ってるソフトなので大変お手軽です。複雑なプログラムを組むなら、それなりのエディタが必要ですが、フレームの枠組みくらいのものならこれで十分です。これに慣れて、もっと高度なプログラムを組むことに興味が起きるようなら、更にクオリティの高いテキストエディタがフリーソフトやシェアウエアで出回っていますので、ネットで検索して探せばWindows用、Mac用共に簡単に手に入れることが出来ます。 では、まずメモ帳を起動して下さい。単純とはいえせっかくやるんですから、本格的にドキュメントタイプの宣言（Column3）からゆきましょう。冒頭部分には、以下のようにフレームを使えるドキュメントタイプを宣言し、その後の<html>を忘れずに書いてから、<head>〜</head>内に文字コードセットの情報（Column4）を書き込みます。もしどれを指定したらいいのか分からなければ、いつも使っている作成ソフトのHTMLをカンニングして、通常と同じ文字コードセットを書き込んでおけば良いでしょう。そのあとでドキュメント情報（Column5）を書き込みます。これらの詳細については、それぞれのコラムを参照して下さい。なお、ページタイトルもここに書き込まなければならないので、<title>〜</title>の間に入れておいて下さい。
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN" <html> <head> <meta http-equiv="Content-Type" content="text/html; charset="Shift-JIS"> <meta name="author" content="ayako tachibane"> <meta name="description" content="ロードスターファンのページです。"> <meta name="keywords" content="eunos,miata,roadster,ロードスター"> <meta name="generator" content="notepad"> <meta name="robots" content="index,follow"> <title>GARAGE MIATA</title> </head> これでヘッド部分の記述は完了しました。これに続いて、フレームページでは<body>タグではなく<FRAMESET...>を使いますので、 <FRAMESET
COLS="26%,74%"> 書き終わったら最後の</html>をお忘れなく。フレームページに関する詳細は７ページに渡って解説していますので、まだお読みでない方は、こちらから順に読むか、Magazine Workshop の目次から知りたい項目を探して下さい。 書きあがったら、これをHTML文書として保存します。ここで問題になるのが保存先です。使っている作成ソフトが自動的に記述を変えてしまわないなら、いつもと同じWEB用のフォルダの任意の位置に保存すれば良いのですが、ソフトが反抗して書き換えてしまうような場合、そこに保存するとせっかく書いたスクリプトが全く違うものにされてしまいます。そこで、いつものWEB用フォルダではなく、別にフォルダを作って、そこに保存するのが賢いやり方でしょう。 ただし、こうして書いたスクリプトが実際に意図した通り動作するかどうかはブラウザで確認しなければなりません。いつものフォルダならリンク先ページや画像などが一緒に入っているので問題ありませんが、新たにフォルダを作った場合は何も入っていないので確認が出来ないことになります。そこで、以下のような手順で保存先を作ってから保存します。
手順１．作ったフレームページに関連するファイルが入ったフォルダをコピーしてダミー・フォルダとし、その中で本来それがあるべきところに保存するようにしましょう。こうしておけば、ブラウザでのチェックも問題なく出来ます。 手順２．保存する時はテキスト形式とHTML形式の２種類作ります。「ファイル→名前を付けて保存」をクリックしてファイル名を入力し、「名前をつけて保存」という画面が出たら、保存場所を確認してファイル名をつけます。「ファイルの種類」に「テキスト文書」と書かれているのを確認して保存。
手順３.もうひとつは、ファイル名の後に「.htm」もしくは「.html」という拡張子を付けます。例えば roadster_index というファイルであれば、「roadster_index.htm」と入力すればOKです。拡張子はどちらでも同じイミになりますが、リンクを貼る関係がありますので他のページと同じものを付けて下さい。ファイルの種類はそのままで構いませんので、これで保存。ちなみにテキストファイルの拡張子は「.txt」です。
何故ファイルを２種類作るかというと、HTML形式で保存したフレームページのデータを再度メモ帳で開くことが出来ないため、編集用にテキスト形式のファイルが必要になるからです。この２つは同じファルダに保存しておき、編集時はテキスト・ファイルを開きます。ブラウザでの表示確認をするためにはHTMLファイルを使いましょう。編集したらテキストファイルを上書き保存した上で、HTMLで保存したものにも上書きします。形式を変えての保存は、「ファイル→名前を付けて保存」で行いますが、この時、ファイルの種類を「すべてのファイル」に切り替えないと、HTMLで保存したファイルは一覧に出てきませんので注意して下さい。ファイル名に「.htm (.html)」が付いていることを確認して保存。
こうして作成ソフトを通さず保存しておいて、サーバー上に発行する時にあるべきところへアップロードすれば、サーバー上でも問題なく動作するでしょう。アップロードするのは、もちろんHTMLファイルの方です。
|
2006.7.20.
