＊作例はMacOS9で説明してありますが、MacOSXでもWindowsでもほぼ同じです＊
●サイトのページと画像を入れるフォルダ２つをページを作成する前に作っておきます。
●画像は、photonic（Mac用）や縮小専用（Windows用）・GIMP for Windowsなどの画像加工ソフトを使って、予めサイズ（大きさ・容量）を小さくしておきます。
| 1) |
まず始めに 新規フォルダを作成し、フォルダ名にmyHPと名前を付けます （フォルダ名は任意で） |
| 2) |
そのフォルダの中にまた１つサブフォルダを作成し、imgと名前を付けます。 これは画像を集めておくフォルダです。 写真などupしたい画像は、加工してあらかじめここに集めておきましょう。 |
| 3） |
UPするサーバーにもサブフォルダimgを作っておく必要があります。 ジオ拡張のかたは、ファイルマネージャーのページの「サブフォルダの作成」を予めしておき PC内と同じ状態にするためにフォルダ名も揃えてimgとしてください。 ＊ジオシティーズ以外の方は、各プロバイダー提供のツールを使うか、MacならFetch ・WindowsならFFFTPといったFTPソフトが利用できます。 |
■それではネットスケープを起動して、composerを開きましょう。
または、メニューバーより
ウインドウ＞Composer
（コマンド＋４）
このようなcomposerのツールバーがあらわれましたか？
このツールバーアイコンを使って、簡単にホームページの作成ができますよ
ページの内容を作成する前に、新しいページのタイトルをつけておきましょう。
タイトルを入力するとウインドウの最上部バーにタイトルが表示されます。
ファイル＞名前を付けて保存タイトルをつけたなら、これから作成するページを先に一旦ＨＤに保存しておきます。
ページの内容を作成した後でもファイル名は付けられますが、作成中にフリーズしてしまうとせっかく作ったものが全て消えてしまいます。作成中にもこまめに保存するためにも、先にファイルの名前をつけて保存しておいた方が賢明です。
ファイル名は、半角英数文字にします。
日本語はダメです。
長い文字数のファイル名をつけないでなるべく８文字くらいに収まるようにしましょう。
ファイル名の後に 拡張子.htmlを付けます。
サーバーによっては、拡張子が.htmでも良い場合がありますが、どちらかに統一しましょう。
（例） recipi.html
| 【ファイル名に使えない文字】 |
|||
| . |
ピリオド |
+ |
プラス |
| , |
カンマ |
= |
イコール |
| / |
スラッシュ |
¥ |
円マーク |
| : |
コロン |
| |
パイプ |
| ; |
セミコロン |
|
半角スペース |
| * |
アスタリスク |
~ |
チルダ |
| < |
左向き不等号 |
? |
クエスチョン |
| > |
右向き不等号 |
” |
ダブルクォーテーション |
準備が整ったので いよいよ 作成していきましょう。
今回は、画像と文字のレイアウトが崩れにくい方法で作成していきます。
画像と文字のレイアウトが崩れないようにするためには、下記ような 表を作ってレイアウトしていきます。
枠線の太さを0にするとブラウザでは 非表示になります。
見えない枠の中で文字や画像をバランス良く配置してゆきます。
コンポーザーでは わかりやすくするために0だと赤い点線枠で表示されます。
| タイトル |
|
| 写真を挿入 |
写真の説明を入れる |
|
写真を挿入
|
写真の説明を入れる |
| 写真を挿入 |
写真の説明を入れる |
| [Home] |
|
＊完成例＊
挿入＞表
【レイアウトの為の表を作成しましょう】
ツールバーの表アイコンをクリック
（または、メニューバーの 挿入より表をクリック）
列2・行数5 表の幅80％ 枠線を0に
設定し、[OK] をクリック
このような表が挿入されましたか？
| |
|
| |
|
| |
|
| |
|
＊作成した表の中でダブルクリックすると表のプロパティが表示され、設定の変更ができます。
幅は ％のほかに、ピクセルでも指定できます。
基本的に幅は、640ピクセルまでにおさめる方がよいでしょう。
枠は、線のの太さ
間隔は セルとセルのすき間
余白は １つ１つのセルの線と中に文字や画像が入る場合に余白をとる場合の設定値です。
| タイトル |
|
| |
|
| |
|
| |
|
| Home |
|
↑
文字の横位置揃えを決める
【表のレイアウトをします】
表に編集を加えて行きましょう。
タイトル行と最下部行の２列を１列にします。
表の最上行にカーソルを置き、メニューより
表＞右のセルに連結 を選択する。
同じ事を表の最終行でも行う。
タイトルと Homeと入力 し
ツールバーのアイコンで選択。
または、 ツールバーよりセンタリングをクリック
＊画面の表示が崩れておかしくなったら、
右端ウインドウをドラッグし広くしたり狭くしたりすると直ります。
*途中でフリーズしたら困るので
作業中は こまめに コマンド＋Ｓ で保存するように心がけましょう。
挿入＞リンク
【文字にリンクをはります】
Homeにリンクを貼って、トップページに戻れるようにしましょう。
Home の文字を選択します。
ツールバーのリンクアイコン
をクリックリンクの場所に index.html と入力
[OK] ボタンを押します。
挿入＞画像
＊代替えテキストは 何の画像なのか 名前をつけます。これは、視覚障害者がこのページの見たときに音声で何の画像が案内するものになるので、名前を付けて入れておくこと。普段は、画像にポインターをもってくると吹き出しで、にゅ〜っとでてくるものです。
【画像をセルに挿入します】
画像を入れたい場所にカーソルを置き、
ツールバーの画像アイコン
をクリックまたは、メニューから
挿入＞画像
画像の場所は、ファイルを選択ボタンを押し、自分のＰＣより選びます。
[OK]ボタンを押すと 画像が挿入されます。
ツールバーのアイコンを使って 入力した文字の体裁を整えます。
位置そろえ 
フォントの大きさ 
文字色と背景色 等々 ツールバーで選択できます。ここでいったん保存しましょう
または、 コマンド＋Ｓ「置き換えますか」 のメッセージがでれば、置き換えるを選びます。
ウインドウ下のタブをみてください。
プレビューをクリック
さて、いかがでしょうか？
下記のように上手く配置できましたか？
プレビューに切り替えるとサーバーに繋がなくても
実際の様子をシミュレーションすることができます。
プレビューに切り替えるとサーバーに繋がなくても
実際の様子をシミュレーションすることができます。
| タイトル |
|
写真を挿入 |
写真の説明を入れる ○○○○○○ ○○○○○○ ○○○○○○ |
|
写真を挿入 |
写真の説明を入れる ○○○○○○ ○○○○○○ ○○○○○○ |
写真を挿入 |
写真の説明を入れる ○○○○○○ ○○○○○○ ○○○○○○ |
| [Home]
|
|
ただし、プレビューと実際upされたものをブラウザーでみたときと異なることもあるので
最終チェックは、ブラウザーにURL（自分のアドレス）を入力して 確認しましょう。
さあ、いよいよ作成したページをサーバーに送ります。
編集＞発行サイトの設定【ページをサーバに送る設定をします】
ツールバーの発行アイコンをクリックすると
ページの発行ウインドウが開きます。
●サーバー情報●
サイト名：任意の名前をいれます
発行アドレス：プロバイダ指定のもの
| （ジオ拡張の例） ftp://ftp.geocities.jp/ |
ホームページのHTTPアドレス：
アクセスする自分のページアドレス（URL）をいれます。
（ファイル名は入れません）
| （ジオ拡張の例） 何も記入せず 空白のまま |
●ログイン情報●
ユーザー名： プロバイダーHPへのログインID
パスワード： 自分で決めたもの
上部のタブで[発行]に切り替え
下記のように設定します。
| 【ファイル名に使えない文字】 |
|||
| . |
ピリオド |
+ |
プラス |
| , |
カンマ |
= |
イコール |
| / |
スラッシュ |
¥ |
円マーク |
| : |
コロン |
| |
パイプ |
| ; |
セミコロン |
|
半角スペース |
| * |
アスタリスク |
~ |
チルダ |
| < |
左向き不等号 |
? |
クエスチョン |
| > |
右向き不等号 |
” |
ダブルクォーテーション |
サイト名：すでに表示されています
（設定タブで入力したもの）
ページタイトル： 始めに設定したものが入力されています。なければ、入力してください。日本語の方がわかりやすくて良いでしょう。
ファイル名： xxx.html
（半角英数文字で。
日本はダメです。）
＊ファイル名の後にはかならず拡張子の .htmlか .htmを付けてください。
このページのサイトサブディレクトリ：
ここは何も入れないで空白のままに
画像と他のファイルを含めるにチェックを入れる
◎このサイトサブディレクトリを使用する
を選び
下の枠に下記のように入力
| img/ |
＊このように設定すれば、画像は、サーバーのサブフォルダimgにupされます。サイト内で、ページと画像が混在すると管理が大変なので、画像はimgといったような名前のサブフォルダに集めておくのがよいでしょう。
発行ボタンを押します。
サイトにアクセスされるウインドウが現れ、ページがupされます。
発行が失敗した場合は、もう一度発行の設定を開き、入力した文字が正しいか確認しましょう。英語文字は、必ず日本語モードをオフにして入力してください。
うまくいかない場合は、発行タブから 再度「新しいサイト」をクリックし、新規作成で、一から設定し直して見てください。
＊編集をした場合はかならず一旦保存してから発行します。
ファイル＞保存ネットスケープナビゲーターで自分のURL（アドレス）を入力し、upされているか確かめてみましょう