(4)ウェブ・ページの作成と編集

トップ頁の作成:

 ウェブ・サイトの新規作成で最初にすることは、トップ頁の作成です。
新しいウェブ・ページの作成は、下図の@の新規ファイル作成のツール・ボタンをクリックすることによって、その骨組みは自動的に作成されます。即ち、<html>, </html>, <head>, </head>, <body>, 及び</body>は自動的に生成され、右側の編集画面に表示されます。

 後は、ウェブの作成者が<head>〜 </head>の間にヘッダーの内容を入力し、次いで<body>〜</body>の間にその頁の内容を入力すれば良いのです。内容の入力の方法は徐々にこの後説明することとしますが、入力が終わった段階で、ファイル・メニューの中の「名前を付けて保存」によって、先ず、ファイル名は必ずトップ頁の必須として「index.html」として指定したウェブ・サイトのフォルダの中に(上の例では「test_web_site」の中に)保存する。

 ここで特に注意しなければならない点は、「名前を付けて保存」のダイアログ・ウィンドウの保存場所の指定欄に必ずウェブ・サイトのフォルダ(上の例では「test_web_site」)を指定しなければならないことです。若し、これを怠ると、折角今作成されたウェブ・ページがどこか別の場所に保存されてしまって、ez-HTMLの左側区画のファイル階層図にこのファイルが表示されず、結局折角今作ったウェブ・ページが使い物にならなくなってしまいます。これは至極当たり前のことですが、多くの人がこの過ちを犯すことによって、その先途方に暮れてしまうのです。若し、今保存したファイルがez-HTMLの左側区画のファイル階層図に現れない場合は、この過ちを犯したと言ってよいでしょう。或いは、ファイル階層図に「newfile.html」のような身に覚えの無いファイル名が現れたとしおたら、矢張りこの「名前を付けて保存」の指定をミスしたといって良いでしょう。

 トップ頁の保存がされると、ez-HTMLの画面左側区画のファイル階層図に「index.html」が追加されて現れるので、確認する。  トップ頁以外の新規作成の場合は、上と同様な手順で、下図の@の新規ファイル作成のツール・ボタンをクリックすることによって作成されるが、ファイル名は「index.html」以外の名前、例えば「page_02.html」のように名付ける。但し、いかなる場合も、ファイル名は半角英数字でなければなりません。

既存のウェブ頁の編集:

 トップ頁を含めて既存のウェブ頁は、ez-HTMLを立上げ、目的とするウェブ・サイトのフォルダー(上の例では「test_web_site」)を画面左側区画のファイル階層図に表示した段階で、その編集しようとするファイルはウェブ・サイトのフォルダーの中に表示されます。下の図の例では「index.html」及び「page_02.html」が既存のウェブ頁として「test_web_site」の下に表示されています。

 このような既存のウェブ頁を呼び出すには、その画面左側区画のファイル階層図の中の目的のファイル名をダブル・クリックすることによって自動的に画面右側の編集画面に呼び出されます。 編集作業はこの画面上で行い、終了した段階で上書き保存をすれば良いのです。上書き保存はファイル・メニューの「上書き保存」で行っても良いし、下図Bの保存ツール・ボックスを利用しても良い。 ここで現在編集中のウェブ頁名はファイル階層図の直ぐ上にに表示されています。

ウェブ・ページの全体のプロパティーの編集:

 現在編集中のウェブ・ページの全体の性格を表すプロパティーも簡単に規定することが「出来ます。
例えば、そのページのタイトルなどは、上の図の5段目のツール・ボックスの最左端のCのプロパティー・ボックスをクリックすると、そのページのプロパティーを規定するダイアログが表示されますので、その中のタイトル欄に望みのタイトル名を記入すればよいのです。その他のプロパティーの例として、そのページに設定されるハイパーリンクの色やその出方などもこの方法で規定できます。

既存のHTMLタブの属性の指定:

 上の図の例では<body>とか<table>のタグ<>の中に、そのタブの性質を規定するbgcolor="#00fcc"とかwidth="300"のような記述があります。これをタブの属性といいます。これらの属性もいちいち記憶していなくても指定できるような仕組みがez-HTMLには組み込まれてれています。

 例えば、今編集中のページに背景色がまだ塗られていないとします。当然編集画面に表示されている<body>タグには属性がまだ記入されていません。そこで<body>タグのbodyの直ぐ右側にカーサー・ポインターを置き、半角英数字のスペースを挿入します。すると、そこにそのタグの属性の候補リストがプルダウン・リストとして表示されますので、この場合そのリストの中からbgcolor=""を選択すれば良いのです。””の中の実際のカラー・コードは””の中にカーサー・ポインターを置いてから、上の図のFのカラー・パネルから望みの色を選択すれば、””の中に自動的にそのカラー・コードが挿入され、結局のところそのページ全体に指定した背景色が塗られます。<table>のタブの横幅を規定する属性のwidth=""の””の中には手入力で半角英数字の300を挿入すれば良いのです。

ウェブ頁の編集後の確認:

 ウェブ・ページの編集の途中や完成後、その頁の出来具合をブラウザーで確かめて見る事が出来ます。
ez-HTML画面の上段4段目のツール種類のタブ列の最右端に「ブラウザー」というタブがあります。
このタブをクリックすると5段目に各種のブラウザーのアイコンが表示されます。通常使用するブラウザーであるIE(Internet Explorer)のアイコンはそれらの最左端に表示されるので、そのアイコンをクリックすると、現在編集画面に表示されている頁がIEによって表示されるので、編集結果の良し悪しがその場で確認できます。

 ここで注意することは、編集が終わってこの確認する前には必ず編集後の頁を「上書き保存」しておかなければなりません。