作成したページや使用している画像ファイルなどを整理するためのフォルダおよびHPBの画面の見方・使い方を説明します。フォルダの準備ページを作成する前に、フォルダを準備します。ホームページは多くの種類のファイルがたくさん集まって構成("サイト"と呼ばれます)されます。HTMLファイル(拡張子.html)・・・テキストです。トップページが一つあり、トップページからリンクされる複数のページから成り立ちます。.png)・・・テキストで使用する画像ファイルです。その他ファイル・・・音楽ファイル、動画ファイル、その他ファイルトップページを入れるトップフォルダを作るトップページはURIで呼ばれたときに最初に表示されるページです。my-homepageを作る。my-homepageの中に、作成したトップページをファイル名"index.html"で保存する。トップフォルダにサブフォルダを作るホームページのファイルを管理するため、サブフォルダを作ります。フォルダフォルダにindex.htmlのファイルがないと、そのフォルダが呼ばれた時、フォルダの内容を表示するサーバがありますのでご注意ください。フォルダ"my-homepage"開くと、以下のように表示されます。(詳細表示)拡張子(ファイル名.以下の文字列)にご注意ください。「登録されている拡張子は表示しない」のチェックを外してください。ページ編集中に画像ファイルやリンクを挿入すると、編集中のページからみた相対位置(画像やリンク先のページが、「同じフォルダか」「下位や上位のフォルダか」)で設定されます。サイトの編集中にフォルダを変えると、その相対関係が崩れますので、ご注意ください。ホームページを開いたときに常に表示されます。メニューバーページ作成・編集用の機能がアイコンで表示されます。ツールバーよく使う機能がアイコンで表示されます。標準ツールバーのみにしてください。最初はこの画面で編集してください。HTMLソース・・・生成されたソースプログラムが表示されます。ソースプログラムを直接修正する時に使います。ページ/ソース・・・ページ編集画面とHTMLソース画面が同時に表示されます。ページ編集中のソースプログラムの確認やソースプログラムの修正時の確認などに使います。プレビュー・・・編集中のページがブラウザ(IE7または8)で表示されます。編集に便利な機能がタブで表示されます。詳しくは、ビューウィンドウをご覧ください。これからHPBを使ってページを作成していきます。ここでは、HPBの編集画面の基本的な使い方を説明します。作成するページには必ずページタイトルを設定します。タイトルは、ブラウザのタイトルバーに表示されます。「属性の変更」ページタイトル欄に、ページの内容を簡潔に記述してください。その他の項目は記入不要です。フォーカスタイトルを設定したページに適当なテキストを入力してください。標準段落(p要素・・・<p></p>で囲まれた内容)として入力され、周囲にピンクの枠が表示されます。この枠は、入力中(正確には選択されている)の要素(フォーカス要素)を示しています。(要素はタグで囲まれた文字列です)入力後、Enterキーで新しい段落を作ります。新しいp要素を作ります。改行のみの場合には、Shift+Enterキーです。新しいp要素は作りません。カーソルHPBでの編集時には、カーソルの位置にご注意ください。HPBで開いてください。適当な場所をクリックしてください。カーソルが表示されます。要素の中にある時はテキストの左右に動きますが、要素外になると、左端にカーソルが移動します。カーソルを移動すると、要素になります。(フォーカスを確認ください)フォーカスの表示例1カーソルは、新しい標準段落にあります。フォーカスの表示例2カーソルキーでカーソルを上に移動してくださいカーソルがフォーカス枠の左端にある状態です。ここで入力すると、タグがないテキストになります。段落に変えてください。フォルダビューウィンドウビューウィンドウ画面の右端にあるビューウィンドウを利用して、フォーカス要素の属性やスタイル、要素の配置状況の確認および修正ができます。ここでは、ビューウィンドウの概要を理解してください)ビューウィンドウには縦のタブがあります。使うタブは以下の5つです。新しい用語が出てきますが、HP作成で詳しく説明します。ページ編集(またはページ/ソース)画面に表示されるビューの概略説明ですので、「こんな機能がある」程度の理解で十分です。first.htmlで、適当な場所にカーソルを置き、タブをクリックしてください。「タグ一覧」タブフォーカス要素のタグが表示され、そのタグの各種設定の確認・修正ができます。テキストや画像の場合には、属している要素の中にあることが表示されます。表示されているタグをクリックすると、その領域にフォーカスを当てることができます。フォーカスしたい領域が選択しにくい場合などに便利です。「スタイルエクスプレス」タブ要素のスタイルを確認・修正ができます。フォントの大きささ色)を設定するためのものです。詳しくは次章で説明します。最上段を「カーソル位置」タブにしてください。上段に、フォーカス要素と適用されているスタイルシートが表示されます。下段に、フォーカス要素に適用されている具体的なスタイルが表示されます。マウスを置くとツールチップが表示されます。プロパティは英字(ソースコード)で表示されていますが、右クリックで、ソース表示をoffにすると、日本語表示されます。「属性」タブ要素の"属性”と呼ばれるものを表示・編集します。この例は、カーソルのあるテキストがp要素(標準段落)の例です。属性タブは、通常、使用しないようにしてください。