０. これからホームページ制作をしようと思っているアナタへ
このページをご覧になったという事はホームページ制作に興味をもたれているはず。
でも「難しいかな…」「ソフト買ったりお金かかるかな…」「諦めようかな…」なんて不安になる必要は全くありません。
このコーナーではお金を一切かけず、流れにそっていくだけで自然とホームページの制作方法が身に付くよう構成されています。きっと「やってみると以外と簡単！」と思って頂ける事と思います。

１. ファイル名に関する注意事項
ホームページを制作する上でまず注意して頂きたいのがファイル名。
HTML ファイル（ホームページを表示するファイル）や GIF ファイル（ホームページに表示する画像ファイル）など、様々なファイルがありますが、ファイル名に使ってはいけない文字やルールがあります。
以下の表を見て注意するようにして下さい。
index.html○ 問題ナシ（ファイル名は半角文字で）profile-01.html○ 問題ナシ（ハイフン・アンダーバー・数字はファイル名に使えます）

profile 01.html

× アウト！（スペースがファイル名に含まれてはいけません）

ｄｉａｒｙ．ｈｔｍｌ

× アウト！（全角文字を使ってはいけません）

趣味ページ.html

× アウト！（日本語を使ってはいけません）

２. ホームページ制作の準備をしましょう！
ホームページを制作するにあたって「テキストエディタ」と呼ばれるものが必要になります。
これは Windows でいう「メモ帳」、Macintosh でいう「SimpleText」がこれにあたります。どちらも最初からパソコンに入っている物なので、そんなの持ってないよと言う方もご自分のパソコンの中をちょっと探してみて下さい。
他に必要なのはホームページを見る為のブラウザ。これは InternetExplorer や Netscape の事です。
これも最初からパソコンに入っていますよね。
Windows

Machintosh

３. ホームページの保存場所を作りましょう！
ホームページのファイルを保存する為の場所を用意しておきましょう。
▼Windows の場合
デスクトップ上で右クリックし、現れたメニューの中の「新規作成」の「フォルダ」を選択して下さい。すると「新しいフォルダ」が出来るので、そのフォルダ名を「html」に変えて下さい。
▼Machintosh の場合
Finder 上で「ファイル」メニューの「新規フォルダ」を選択（図１参照）して下さい。するとデスクトップ上に「名前未設定フォルダ」が出来るので、そのフォルダ名を「html」に変えて（図２参照）下さい。次に
その「html」フォルダを開き、その中に同様の手順で「img」という名のフォルダを作成しておいて下さい。

５. こんなホームページを作る事から初めてみよう！
「タグを覚えればホームページが出来る事はわかったけれど、どれから覚えていけばいいのかわからない…」と誰もが悩むと思います。ここはまず練習に以下のようなホームページを１ページ作ってみましょう。流れに沿っていけば簡単に作れますよ！

６. 画像を準備しよう！
上のサンプルには、黄色と緑のラインが交差している背景画像と、WHAT'S Bfit?と書かれたロゴの２点の画像が使われています。この画像を手に入れましょう。下のリンクからそれぞれダウンロードして下さい。そのファイルを「３.ホームページの保存場所を作りましょう！」にて作成した「image」フォル
ダ内に保存して下さい。
●ロゴの画像を手に入れる【title.gif】●背景の画像を手に入れる【background.gif】

７. ホームページ制作スタート！
これでホームページ制作の準備は整いました！まずテキストエディタで「A.始める前に知っておきたい基礎知識＆準備」で覚えた基本となる HTML を書いてみましょう。次にこのページのタイトルを<TITLE>タグに書いてみましょう。

<HTML><HEAD><TITLE>What's Bfit ?</TITLE></HEAD><BODY></BODY></HTML>

現段階で出来るのはここまで。この段階でまずファイルを保存しましょう。「３.ホームページの保存場
所を作りましょう！」にて作成した「html」フォルダ内に、ファイル名を「index.html」として保存して下さい。
【CHECK!】何故「index.html」というファイル名にする必要があるのか？
インターネットを閲覧していると「http://bfit.jp/service.html」のように「.html」で終わっている URL を見かけます。これは「service.html」を表示しているんだな〜と、わかるのですが、「http://bfit.jp/」では何という名前のファイルを表示しているのかわかりません。
実はこれ、「index.html」というファイルを表示しているのです。例をあげると、「http://bfit.jp/study/」
では「study」フォルダにある「index.html」ファイルが表示されます。その証拠に「http://bfit.jp/study/index.html」にアクセスしても同じページが表示されます。このように「index.html」という名前のファイルは他とは少し違う役割をします。
Bfit では規約によりトップページが存在しないホームページの開設を禁止しております。誰にでも閲覧して頂けるように、トップページは必ず「http://bfit.jp/home/user-ID/」のスタイルで「index.html」を表示するようにしておきましょう。
では次に様々なタグを覚えて、少しずつホームページを構築していきましょう。「C.順を追って基本的なタグを覚えていこう」へ GO！

８. まずは背景画像を設定してみよう！
まずは背景画像（黄色と緑色のラインが交差しているもの）を設定してみましょう。この背景画像は<BODY>タグで設定します。といっても<BODY></BODY>で挟まれた中に記述するのではなく、以下のように<BODY>タグ内に記述します。
<HTML><HEAD><TITLE>What's Bfit ?</TITLE></HEAD><BODY background="image/background.gif"></BODY></HTML><BODY bakuground="背景画像にしたいファイルを指定">のスタイルで背景画像を設定する事が出来ます。
では何故「background.gif」ではなく「image/background.gif」なのか？答えは「index.html」と「background.gif」が同じ場所に保存されていないからです。両ファイルが同じ場所にあれば「image/」
はいりませんが、「background.gif」は「image」フォルダ内にある為、「image/background.gif」と書く必要があるのです。
【CHECK!】絶対パスと相対パスについて
絶対パスとは上の背景画像を指定したような書き方ではなく、画像の URL を直接指定する方法です。例えば自分のホームページで、友達のホームページ内にある画像を表示させたい場合、「image/background.gif」のような書き方をする事は不可能です。例を上げて説明すると、背景画像にBfit の背景画像を設定したい場合、

<HTML><HEAD><TITLE>What's Bfit ?</TITLE></HEAD><BODY background="http://bfit.jp/image/background.gif"></BODY></HTML>といったように「http://」から URL 全てを記述する方法を絶対パスといいます。逆に上のように「image/background.gif」といった記述方法を相対パスと呼びます。覚えておくと便利ですので、覚えておきましょう。

９. ロゴ画像を表示させよう！
次にこのホームページのロゴ画像を載せてみましょう。画像を表示させるのに使うタグは<IMG>タグです。このタグは</IMG>といった閉じるタグは必要なく、<IMG>のみで OK です。

<HTML><HEAD><TITLE>What's Bfit ?</TITLE></HEAD><BODY background="image/background.gif"><IMG src="image/title.gif"></BODY></HTML><IMG src="表示させたい画像を指定">のスタイルで画像を設定する事が出来ます。
ここで一度ファイルを保存してブラウザでどのように表示されるか確認してみましょう。下の画像のよ
うに背景とロゴの画像が表示されていれば OK です。
※ここからも随時ファイルを保存してキチンと間違えなく表示されるかブラウザで確かめながら制作していきましょう。

１０. テキストと改行
次に「『Bfit』ってどんなホームページなの？そんな謎を解明するべく制作したホームページ、『What's
Bfit ?』へようこそ！」の文章を書いてみましょう。
<HTML><HEAD><TITLE>What's Bfit ?</TITLE></HEAD>

<BODY background="image/background.gif"><IMG src="image/title.gif">『Bfit』ってどんなホームページなの？そんな謎を解明するべく制作したホームページ、『What's
Bfit ?』へようこそ！
</BODY></HTML>
このように書いてしまうと以下の画像のように、ロゴから一行で文章がダラダラと書かれてしまいます。

そこで改行するタグ<BR>タグを使ってみましょう。このタグも<IMG>タグと同じで、閉じるタグは必要ありません。

<HTML><HEAD><TITLE>What's Bfit ?</TITLE></HEAD><BODY background="image/background.gif"><IMG src="image/title.gif"><BR><BR>『Bfit』ってどんなホームページなの？<BR>
そんな謎を解明するべく制作したホームページ、<BR>『What's Bfit ?』へようこそ！
</BODY></HTML>
これで以下の画像のように表示されます。<IMG>タグの後ろに<BR>タグが２つ書いてあるのは、画像と文章の間に一行スペースを空ける為に書いてあります。

１１. <table>タグを覚えよう！
次に、ホームページを閲覧しているとよく見かけるテーブル（表組み）の書き方、<table>タグを覚えましょう。
<HTML><HEAD><TITLE>What's Bfit ?</TITLE></HEAD><BODY background="image/background.gif"><IMG src="image/title.gif"><BR><BR>『Bfit』ってどんなホームページなの？<BR>
そんな謎を解明するべく制作したホームページ、<BR>『What's Bfit ?』へようこそ！<BR><BR><table border="2" width="80%"><tr><td>1 行目の 1 コマ目</td><td>1 行目の 2 コマ目</td>
</tr>
<tr>
<td>2 行目の 1 コマ目</td><td>2 行目の 2 コマ目</td>
</tr>
<tr>
<td>3 行目の 1 コマ目</td><td>3 行目の 2 コマ目</td></tr></table></BODY></HTML>
このように記述すると下の画像のように表示されるようになります。

上の HTML を見てわかるように、テーブルを作るには、<table>タグ、<tr>タグ、<td>タグの３つが必要になります。
まずは<table>タグ。これはテーブルを表示させる為の基本的なもので、テーブルの内容をこの<table></table>に挟まれた部分に記述していきます。

またこのテーブルに関する設定もこのタグにて行えます。HTML にある「border="2"」と「width="80%"」がそれです。「border="数字"」でこのテーブルの枠線の太さが設定出来、「width="数字%"」でウィンドウに対してのテーブルの幅が設定出来ます。
次に<tr>タグ。これはテーブルの行を定義するものです。HTML を見て頂ければわかるように、<tr></tr>が３つあります。つまりこのテーブルは３行のテーブルだという事がわかります。このタグは必ず<table></table>で挟まれた部分に記述する事になります。
最後に<td>タグ。これはテーブルのマス目を定義するものです。HTML を見て頂くと１行目を表している<tr></tr>に<td>タグが２つあります。これでテーブルの１行目には２マスあるという事がわかります。このタグは<tr></tr>で挟まれた部分に記述する事になります。
<table border="2" width="80%">←テーブルの線の太さが２、幅がウィンドウに対して 80%になる。
<tr>←テーブルの１行目を表している<td>1 行目の 1 コマ目</td><td>1 行目の 2 コマ目</td></tr>←テーブルの１行目はここまで<tr>←テーブルの２行目を表している<td>2 行目の 1 コマ目</td><td>2 行目の 2 コマ目</td></tr>←テーブルの２行目はここまで<tr>←テーブルの３行目を表している<td>3 行目の 1 コマ目</td><td>3 行目の 2 コマ目</td></tr>←テーブルの３行目はここまで</table>１２. テーブルのマス目に色をつけよう！
タイトル通り、テーブルのマス目に色を付けていきましょう。これは色を付けたい<td>タグに記述します。 ※HTML が長くなってきましたので、ここから便宜的に<table>タグ内のみ記述していきます。
<table border="2" width="80%"><tr><td bgcolor="pink">1 行目の 1 コマ目</td><td>1 行目の 2 コマ目</td>
</tr>
<tr>
<td bgcolor="pink">2 行目の 1 コマ目</td><td>2 行目の 2 コマ目</td>
</tr>
<tr>
<td bgcolor="pink">3 行目の 1 コマ目</td><td>3 行目の 2 コマ目</td></tr></table>
このように色を付けたい<td>タグ内に「bgcolor="色"」を記述すれば OK です。

１３. テーブルに文字を入れていこう！
「11.<table>タグを覚えよう」ではテーブルの仕組みを理解して頂けるように「1 行目の 1 コマ目」といったダミーの文章を入れていましたが、これを書き換えていきましょう。
<table border="2" width="80%"><tr><td bgcolor="pink">What's New !!!</td><td>2005.7.7.<BR>Link Link Link に３件追加！</td>
</tr>
<tr>

<td bgcolor="pink">Contents !!!</td><td>・『Bfit』って何？<BR>・自己紹介です。<BR>・日記です。<BR>・掲示板です。</td>
</tr>
<tr>
<td bgcolor="pink">Link Link Link !!!</td><td>リンク集です！</td></tr></table>１４. 文字の修飾をしてみよう！
テーブル内の文字を使って、文字の修飾の方法を覚えていきましょう。１行目の１コマ目の「What's
New !!!」を変更してみましょう。右が HTML で、それを表示すると左の文字のように修飾されます。
１ What's New !!!

What's New !!!

２

What's New !!!

<FONT size="+1">What's New !!!</FONT>

３

What's New !!!

<FONT size="+1" color="red">What's New !!!</FONT>

４

What's New !!!

<B><FONT size="+1" color="red">What's
New !!!</FONT></B>「１」は修飾する前の原型になります。
「２」は文字サイズを大きくするタグです。<FONT size="文字サイズ">で文字の大きさを設定出来ます。<FONT></FONT>で挟まれている部分に適用されます。
「３」は文字の色を設定しています。<FONT color="色">で文字の色を設定出来ます。これも「２」と同じく FONT></FONT>で挟まれている部分に適用されます。
「４」は文字を太くするタグです。<B>タグを使うと、<B></B>で挟まれている部分の文字が太字になります。
これと同じように「Contents !!! 」と「Link Link Link !!! 」を「４」のように修飾しておきましょう。

１５. 文字にリンクをはってみよう！
「『Bfit』って何？」の部分に「http://bfit.jp/」へ移動するようにリンクをはってみましょう。
<A href="http:/bfit.jp/">『Bfit』って何？</A>
このようにリンクには<A>タグを使います。<A href="移動先の URL">のスタイルでリンクをはる事が出来ます。リンクは<A></A>で挟まれた部分に適用されます。
同じように「自己紹介です」「日記です」「掲示板です」「リンク集です！」にもリンクをはってみましょう。
※この説明では「８.まずは背景画像を設定してみよう！」で覚えた絶対パスを用いましたが、相対パスを用いる事も出来ます。「index.html」と同じフォルダに「index2.html」があり、そこへリンクをはりた
い場合は<A href="index2.html">といった感じにすれば OK です。

１６. 区切りのラインを入れてみよう！
次に区切りのラインを覚えましょう。これは<HR>タグを使います。HTML に<HR>と書くだけで以下のようなラインをひく事が出来ます。このタグに閉じるタグは必要ありません。

１７. メールアドレス用のリンクを作ろう！
色々なホームページを閲覧していると「メールはこちら」と書かれていて、それをクリックすると使用しているメールソフトが起動する。といった仕組みをよく見かけます。それを作ってみましょう。
<I>メールは<A href="mailto:test@bfit.jp">こちら</A>に送って下さいねぇ〜。</I>「15.文字にリンクをはってみよう！」と同じ<A>タグを使うのですが、違うのがリンク先の設定。ここに
メールアドレスを入力する時、メールアドレスの前に「mailto:」を入れれば、このリンクをクリックするとメールソフトが自動的に起動するようになります。
また上記 HTML にある<I>タグは文字を斜体にする為のタグです。「14.文字を修飾してみよう！」と同じく文字を修飾するタグの１つですので覚えておきましょう。

１８. 画面中央に揃えて完成！
これまでに作っていったロゴ画像から最後のメールアドレスのリンクまで、全てを常にウィンドウの中央に表示されるようにしてみましょう。これは<CENTER>タグを使い、<CENTER></CENTER>で挟まれた部分全てに適用されます。
<HTML><HEAD><TITLE>What's Bfit ?</TITLE></HEAD><BODY background="image/background.gif"><CENTER><IMG src="image/title.gif"><BR><BR>『Bfit』ってどんなホームページなの？<BR>
そんな謎を解明するべく制作したホームページ、<BR>『What's Bfit ?』へようこそ！<BR><BR><table border="2" width="80%">

<tr><td bgcolor="pink"><B><FONT size="+1" color="red">What's New !!!</FONT></B></td><td>2005.7.7.<BR>Link Link Link に３件追加！</td>
</tr>
<tr>
<td bgcolor="pink"><B><FONT size="+1" color="red">Contents !!!</FONT></B></td><td>
・<A href="http//bfit.jp/">『Bfit』って何？</A><BR>・<A href="http//bfit.jp/">自己紹介です。</A><BR>・<A href="http//bfit.jp/">日記です。</A><BR>・<A href="http//bfit.jp/">掲示板です。</A>
</td>
</tr>
<tr>
<td bgcolor="pink"><B><FONT size="+1" color="red">Link Link Link!!!</FONT></B></td><td><A href="http//bfit.jp/">リンク集です！</A></td></tr></table><BR><HR><BR><I>メールは<A href="mailto:bfit@bfit.jp">こちら</A>に送って下さいねぇ〜。</I></CENTER></BODY></HTML>

これで練習用のホームページは完成！少しはホームページの制作方法をご理解頂けましたでしょうか？上の画像と同じようなページが出来たかブラウザでチェックして下さいね。
では次に覚えた様々なタグを応用してみましょう。「D.覚えたタグで思い通りのホームページ制作を」

へ GO！

19. テーブルタグの応用「11.<table>タグを覚えよう！」で覚えた<table>タグ。これを応用して自由自在にテーブルを操りましょう！
▼練習用のホームページに使ったテーブルです。
<table border="2" width="80%"><tr><td>1 行目の 1 コマ目</td><td>1 行目の 2 コマ目</td>
</tr>
<tr>
<td>2 行目の 1 コマ目</td><td>2 行目の 2 コマ目</td>
</tr>
<tr>
<td>3 行目の 1 コマ目</td><td>3 行目の 2 コマ目</td></tr></table>1 行目の 1 コマ目

1 行目の 2 コマ目

2 行目の 1 コマ目

2 行目の 2 コマ目

3 行目の 1 コマ目

3 行目の 2 コマ目▼線の太さを４に、幅を 100%に、１行３列にテーブルを変更した例です。
<table border="4" width="100%"><tr><td>1 行目の 1 コマ目</td><td>1 行目の 2 コマ目</td><td>1 行目の 3 コマ目</td>
</tr>
<tr>
<td>2 行目の 1 コマ目</td><td>2 行目の 2 コマ目</td><td>2 行目の 3 コマ目</td></tr></table>1 行目の 1 コマ目 1 行目の 2 コマ目 1 行目の 3 コマ目
2 行目の 1 コマ目 2 行目の 2 コマ目 2 行目の 3 コマ目▼線の太さを０に、幅の指定をなくし、３行１列にテーブルを変更した例です。
<table border="0"><tr><td>1 行目の 1 コマ目</td>
</tr>
<tr>
<td>2 行目の 1 コマ目</td>
</tr>
<tr>
<td>3 行目の 1 コマ目</td></tr></table>1 行目の 1 コマ目
2 行目の 1 コマ目
3 行目の 1 コマ目

20. フォントタグの応用「11.<table>タグを覚えよう！」で覚えた<table>タグ。これを応用して自由自在にテーブルを操りましょう！

▼練習用のホームページに使ったテーブルです。

<B><FONT size="+1" color="red">What's New !!!</FONT></B>

What's New !!!

▼文字サイズを-1 に、文字の色を緑に、太字を斜体に変更した例です。

<I><FONT size="-1" color="green">What's New !!!</FONT></I>

What's New !!!

▼文字サイズを+3 に、文字の色を指定せず、斜体に変更した例です。

<I><B><FONT size="+3">What's New !!!</FONT></B></I>

What's
New !!!

21. オリジナリティ溢れたホームページを！
練習用のホームページ制作で覚えた様々な知識。それを応用するだけでもホームページ制作の幅は広がりますが、タグは他にもたくさんあります。一度にたくさん覚える必要は全くありません。少しづつで良いのでホームページ制作の知識を身に付け、よりよいホームページを制作してみて下さい！
最後にホームページ制作に使えるテンプレートもご用意しておりますので、そちらも是非ご利用下さい。それでは「E.テンプレートも活用してみよう」へ GO！

22. テンプレート・ダウンロードコーナー
少しでもホームページ制作の手助けになればと、テンプレートをご用意させて頂きました。もし使いたいテンプレートがございましたら、ご自由にダウンロードしご利用下さい。

▼テンプレート１
左右に分割されたフレームです。
○サンプルを見る○ダウンロードする▼テンプレート２
上下に分割されたフレームです。
○サンプルを見る○ダウンロードする▼テンプレート３
上左右に分割されたフレームです。
○サンプルを見る○ダウンロードする▼テンプレート１
縦に３分割されたフレームです。
○サンプルを見る○ダウンロードする▼色見本<FONT color="black">文字</A>
色を指定する場合、解説ページでは
上記のように説明しましたが、「#CC0000」のような値で色を指定する事も出来ます。一度色見本を見て試して下さい。
<FONT color="black">と<FONT color="#000000">は同じ色として扱われます。
○色見本を開く#FF0000 #FF3300 #FF6600 #FF9900#FF0033 #FF3333 #FF6633 #FF9933#FF0066 #FF3366 #FF6666 #FF9966#FF0099 #FF3399 #FF6699 #FF9999#FF00CC #FF33CC #FF66CC #FF99CC#FF00FF #FF33FF #FF66FF #FF99FF

23. 最後にホームページ制作について少しは理解を深めて頂けましたでしょうか？これを機にホームページ作りの楽しさを知って頂ければ幸いです。しかしまだホームページを作っただけで、世界中の方に公開する作業があります。FTP のコーナーで詳しく解説しておりますので、是非ご覧下さい。世界中の方々があなたのホームページの公開を待ってます！

１. インストールする
最初に FFFTP をダウンロードします。
2005/04/02 現在のバージョンは Ver.1.92a となります。
ダウンロードしたファイル ffftp-1.92a.exe を実行してください。

ffftp-1.92a.exe を実行 するとインストーラーが立ち上がりますので「次へ」をクリックしてください。

内容をよく確認しましたら「次へ」をクリックしてください。

プログラムのインストール先を決定します。
デフォルトのインストール先は C:¥Program Files¥ffftp¥です。
インストール先を変更したい場合は「参照（Ｒ）」ボタンを押してインストール先を変更します。

「次へ」のボタンをクリックして次へ進みます。

下記のような画面が表示されますが「はい（Ｙ）」をクリックして次へ進みます。

確認の画面が表示されますので画面の内容で正しければ「次へ」をクリックします。

下記のようにインストールが開始されます。

インストールが完了すると自動的に FFFTP が起動します。
下記のようにインストールが開始されます。

２. 設定するお客様の「ユー
ザーID」「パスワード」「FTP
サーバー名」をご用意下さい。
FFFTP が起動すると「ホスト
一覧」という画面が表示されますので「新規ホスト（N）」というボタンをクリックします。

「ホストの設定」という画面が表示されますのでそれぞれの項目について入力します（下記参考）ホストの設定名

お客様側でご自由にお決めいただく接続先名となります。

ホスト名（アドレス）

お客様の「FTP サーバー名」を入力してください。
サブドメインタイプのお客様はユーザーID.ドメイン（例：****.peacefully.jp）、独自ドメインタイプのお客様は取得されたドメインとなります。

ユーザ名

お客様の「ユーザ ID」を入力してください。
ユーザ ID とはサブドメインタイプの場合、例えば下記の"*****"の部
分となります。 http://*****.peadefully.jp/
独自ドメインタイプの場合、URL には現れていませんので、仮登録完了メール内に記載された内容をご確認ください。

パスワード/
パスフレーズ

お客様の「パスワード」を入力してください。

ローカルの初期フォルダ

お客様側のパソコン内で接続時に最初に表示されるフォルダのパスの指定となります。 たとえば「C:¥Program Files」と指定するとProgram Files のフォルダの一覧がデフォルトで表示されます。 よくわ
からない場合は空白のままにしておいてください。

ホストの初期フォルダ

必ず「/public̲html」を指定してください。

次に「ホストの設定」という画
面内で「基本」の右側にあります「拡張」をクリックしてください。
その中で「PASV モードを使う(V)」にチ
ェックが入っているか確認してください。
もしチェックが入っていない場合はチェック
を入れてください。 （ffftp1.92a のバージョンからは標準で PASV モードが使用されます。）
最後に「OK」をクリックしてください。

「ホスト一覧」の画面に戻りますので「ホストの設定名」で設定した接続先を選択して「接続(S)」 のボタンをクリックしてください。 （もし接続先を再度編集する場合は「設定変更(M)」をクリックして「ホストの設定」で 再度編集を行ってください。）

正常に接続が完了すると下記のような画面表示となります。
（もし接続に失敗した場合は「ホストの設定」の画面へ戻り各設定項目を再度確認してください。）

以上で弊社サーバでの設定は完了です。
あとはお客様側で実際にデータをアップロードされて Web 上からお客様の URL へアクセスして確認をしてください。

１. InternetExplore を起動する

デスクトップにある InternetExplore のアイコンをダブルクリックして下さい。
（アイコンの表示がない場合は スタート → プログラム → Internet Explore をクリッ
クして下さい。）

２. FTP 接続
会員様の「ユーザーID」「パスワード」「FTP サーバー名」をご用意下さい。
ブラウザのアドレスバー 「アドレス（D）」 へ ftp://と入力し、続けて「FTP サーバー名」を入力してください。 入力後キーボードの"Enter"キーを押してください。

すると下記のような画面が表示されますので会員様のユーザー名とパスワードを入力してください。
また「パスワードを保存する（S）」にもチェックを入れてください。
入力が完了しましたら「ログオン（L）」のボタンをクリックして下さい。

正常にログオンが出来た場合、下記のような画面表示となります。
（ログオンに失敗した場合は再度ユーザ ID、パスワード、FTP サーバ URL を確認してください。）

３.アップロードする新規お申し込み頂きましたお客様の初期状態では上記フォルダがあらかじめ用意されてます。
これらのファイルは絶対に消さないで下さい。
次にその中にある「public̲html」というフォルダをダブルクリックしてください。
すると下記のように表示されます。s表示されましたらお客様のデータをドラッグアンドドロップしてその中へ移動して下さい。
最後に「お客様の URL」へアクセスして更新されているか確認してみてください。

※ 注意事項 ※・public̲html（Web 公開用フォルダ）
HTML・CGI・PHP などの WEB 公開ファイルは全てこの中に入れて下さい。 このフォルダは絶対に消さないで下さい。もし誤って消去されると WEB ページが全く見れなくなります。
その他フォルダへアップされますと内容が全く更新されませんので十分にご注意下さい。

１. FTP の設定をする
ホームページビルダーのツールバーで「ツール」→「FTP ツールの起動」をクリックすると、以下のよ
うな画面が開きます。

「サーバープロファイル名」には、お好きな名前を入力してください。
「プロバイダーの選択」は「その他」を選択。
「FTP サーバー名」には、会員様の「FTP サーバー名」を入力。
「FTP アカウント名」には、会員様の「ユーザーID」を入力。
「FTP パスワード」には、会員様の「パスワード」を入力してください。
入力できましたら、「OK」ボタンをクリックして下さい。

２. 接続する
設定が完了すると、以下のような画面が開いているはずです。
（開いていない場合は、ツールバー「ツール」→「FTP ツールの起動」をクリックして下さい。）
画面左側（マイコンピュータ）が会員様のパソコン、画面右側がサーバーになります。
「接続」ボタンをクリックして下さい。

接続に成功すると、サーバー側にファイル一覧が表示されます。
接続に失敗した場合は、「FTP サーバー名」「FTP
アカウント」「FTP
パスワード」に間違いがないか確
認をして下さい。

３.ファイルを転送する作成したホーム
ページは全て「public̲html」というフォルダーの中に転送します。
「public̲html」フォ
ルダーをクリック
して下さい。

アップロードしたいファイルを選択し、「転送ボタン」をクリックして下さい（下記図参考）

アップロードに成功
すると、左図のようになります。

※ 注意事項 ※・public̲html（Web 公開用フォルダ）
HTML・CGI・PHP などの WEB 公開ファイルは全てこの中に入れて下さい。 このフォルダは絶対に消さないで下さい。もし誤って消去されると WEB ページが全く見れなくなります。
その他フォルダへアップされますと内容が全く更新されませんので十分にご注意下さい。

１. FTP の設定をする
Dreamweaver のツールバーで「サイト」→「サイトの管理」をクリックすると、
以下のような画面が開きます。

「サイト名」には、会員様の好きな名前を入力してください。
「ローカルルートフォルダ」は、作成したホームページを保存している場所を指定してください。
「HTTP アドレス」には、会員様の URL を入力してください。
入力をしたら「カテゴリ」の「リモート情報」を選択してください。

初めて設定する場合は、以下のような画面になります。
「アクセス」のセレクトボックスで「FTP」を選択してください。

「FTP ホスト」には、会員様の「FTP サーバー名」を入力。
「ホストディレクトリ」は特に設定いただく必要はありません。
「ログイン」には、会員様の「ユーザーID」を入力、「パスワード」には、会員様の「パスワード」を入力下さい。
全て入力できましたら、「OK」ボタンをクリックして下さい。

２. ファイルを転送する

Dreamweaver の画面右側に、左図のような画面が御座いますので、 「リモートホストに接続」ボタンをクリック
し、接続を行って下さい（左図参考）

接続が出来ると左図のようにリストが表示されます。
接続に失敗した場合は、ユーザーID
やパスワード、FTP ホスト等に間違いが無いか確認をして下さい。
「展開／折りたたむ」ボタンをクリックすると以下のような画面に切り替わります（左図参考）

左がサーバー側（リモートホスト）、右が会員様のファイル一覧（ローカル）になります。

転送するファイルを選択し、「ファイルをPUT する」ボタンをクリックして下さい（左記図参考）

サーバー（リモートホ
スト）にファイルが転送されました。

会員様の URL にアクセスして、ページが表示または更新されているか確認してみてください。
※ 注意事項 ※・public̲html（Web 公開用フォルダ）
HTML・CGI・PHP などの WEB 公開ファイルは全てこの中に入れて下さい。 このフォルダは絶対に消さないで下さい。もし誤って消去されると WEB ページが全く見れなくなります。
その他フォルダへアップされますと内容が全く更新されませんので十分にご注意下さい。

１. ログインするユーザー専用ページにログインし、「ホームページ管理」で ファイルマ
ネージャー ボタンをクリックして下さい。

すると以下のような画面が表示されます。

２. アップロードする「ファイル名」枠にある「参照」
ボタンをクリックし、アップロー
ドするファイルを指定してください。１度に５つまで同時にアップロードする事が出来ます。
ファイルサイズが 300KB を超える場合は、FTP ソフトをご利用下さい。

アップロードが成功すると、左記のようにファイル一覧に、今アップロードしたファイルが追加されます。
ファイル名のリンクをクリックすると、そのページを確認する事が出来ます。

※ 注意事項 ※・public̲html（Web 公開用フォルダ）
HTML・CGI・PHP などの WEB 公開ファイルは全てこの中に入れて下さい。 このフォルダは絶対に消さないで下さい。もし誤って消去されると WEB ページが全く見れなくなります。
その他フォルダへアップされますと内容が全く更新されませんので十分にご注意下さい。

３.フォルダーを作成する

フォルダーを作成する場合は、「フォルダ作成」枠にあるテキストボックスに、お好きなフォルダー名を入力し、「作成」ボタンをクリックして下さい。
※全角文字は使えません。

フォルダー作成が成功すると、左記のようにファイル一覧に作成したフォルダーが追加されます。
作成したフォルダー内にファイルをアップロードする場合は、「２.アップロードする」の作業を行ってください。