へてむるライタ− ここから始めるとホ−ムペ−ジがよくわかるよ! HOME BACK
 @サイ トマップs
ホ-ムペ-ジってな-に!
 設定  メインペ-ジ 「i ndex .html 」 作成  テキスト・文字  画像
ブラウザ設定 タイトルと色の設定 特殊文字 画像の抽入
サイトフォルダの作成 文書の設定 文字の装飾 画像にテキストを回り込ませる
編集の流れ ロボット検索 MARQUEE-文字の移動
ユ−ザ−登録タグ ペ-ジの上下左右の余白の指定 文字を単純に入力
 テ-ブル  et'c  リンク
枠の横への展開と縦への展開 ファイルを配布させる ホ−ムペ−ジ内のリンクと外部へのリンク
テ-ブルをレイアウトに使う ぺ−ジの特定の所にジャンプ
テ−ブルの調整 画像、ボタンにリンクを付ける
テーブルの装飾

へてむるライター FTPクライアントソフト HP素材作成 画像のリサイズ タグデーターを学ぶ
FFFTP 彩彩畑 SmaHey


基本ルール ウィンドウズの設定
全てのファイル名、フォルダ名等には、全て小文字半角の英数字を使用します。大文字、日本語、カタカナ等は使用出来ません。又特殊文字に指定されている「&」、「<」等の記号は表記方法に従って入力します。 全てのファイルの拡張子を表示して、確認出来るようにします。

マイドキュメント _ メニューツール _ フォルダオプッション _ 表示 _ 「 登録されている拡張子は表示しない 」 のチエックを外して 「OK 」ボタンを押します。


ホットメ−ル
ホットメールファイルは、簡単に作れます!以下の作業を行って 「html」 ファイルを作成してみて下さい!
[ タグデーター ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>

<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">

<TITLE>マイホ−ムペ−ジ</TITLE>
</HEAD>

<BODY> みんなのペ−ジだよ!</BODY>
</HTML>
  

ブルーの 「 ホットメールの タグデーター 」 をテキストかメモ帳にコピ−して、メモ帳の拡張子「 ****.txt 」の txt を 「****. html 」 に変えて見てください!ホットメ−ルが出来ているはずです、次にそれを W クリックしてみます、ブラウザに ( みんなのペ−ジだよ ) と表示されているはずです。

ウィンドウズが、パソコンにインスト−ルされていて後は少しホットメ−ルの事を理解していたならホ−ムペ−ジを作れます!まさかメモ帳で編集している人は今時いないとは思いますが。


ホットメ−ルの内容
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>ホットメールファイルの始まり!

<HEAD>ページデーター、情報の始まり!

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">

 * META 検索情報等のページ情報は、ここに)入力する!

<TITLE>ペ−ジ名入力!( ブラウザ上部ステ−タスバ−に表示される)</TITLE>

</HEAD>ページデーター、情報の終わり!

<BODY>

この間にペ−ジの本文が載る ( ブラウザに実際に表示されます! )

</BODY>

</HTML>ホットメールファイルの終わり!
始めの一行目
バ−ジョン情報を以下のように入力します。

通常
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

フレーム使用の場合
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

<html>〜</html>
ホットメールの始まりと終わり。
<head>〜</head>
ページ情報、データー等を入力!ブラウザには、表示されません。
ペ−ジのタイトル、ペ−ジ情報、作者名、文字コ−ド、表示形態を入力。
<body>〜</body>
ブラウザに表示されるデーターを入力


サイトフォルダの作成
ホ-ムペ-ジファイル全てを格納するフォルダをマイドキュメントに作成し、ホ-ムペ-ジに組み込む素材ファイル等を格納するフォルダを 「img 」等と好きに名前を付けてサイトフォルダ内に作ります。後は順次このフォルダにページを追加してゆきます。
サイトフォルダ名 プロバイダからいただいた 「ID 」 と同じ名前にするとよい。(任意でよい)
img フォルダ 素材用フォルダで、素材を格納するフォルダを任意にて名前を付けて作成する。
index.html メインページで、トップページのファイル名は、「index.html」 とする。又は契約のサーバー会社指定のとうりにします。
注意 ファイルは、全て小文字のアルファべットにて作成する。


ブラウザ設定
道具バコ(D)__オプション__ブラウザ選択
インターネットエキスプローラー
IE 使用の場合は、場所(L)より次のファイルを指定します。
C:\Program Files\Internet Explorer\iexplore.exe


メニューバーの以下のアイコンからもIEを起動可能です。



その他のブラウザを指定する
場所(N)より任意のブラウザの起動アイコン 「 ***.exe 」を指定します。
通常のアドレスは、C:\Program Files\任意のブラウザ

他設定は、デフォルト「そのまま」で大丈夫です。


編集の流れ
メニュ−、ツ−ルバ−アイコン、右クリックメニュ−等編集スタイルの選択肢はたくさんあります。作成したhtmlファイルは、ブックマ−クに登録し、以後ブックマークより呼び出して再編集します

* 保存されないデーターはブラウザにて表示出来ません!
* キ−ボ−ドキ−又はツ−ルバ−アイコンがある操作は出来るだけ覚えましょう。

ブックマ−ク こまめに保存してブックマークより開いて編集します。
ユ−ザ−登録タグ 必要な物をここにストックして置きましょう。
多重起動 へてむるライタ−は、多重起動が出来ますのでデーターを他のペ−ジから流用又はデ−タ−を、htmlファイルとして保存して置きそこからデ−タ−を取り出す事で編集作業は素早く出来ます。
保存場所 HTMLファイルはサイトフォルダ内に、素材ファイルは素材専用のフォルダに保存する!


タイトル、色
新規作成選択__メニュ−よりタグ(T)__ホットメ-ルの骨組み(I)選択

タイトル あなたのインタ−ネット上のホ-ムペ-ジ名になります。
「後で変更可能ですが、但し公開後はメインページ(index.html)は出来るだけ変更する事が無いようにしっかりと決めましょう
背景色 好きにする。
テキスト 黒でよい
リンク色 リンク色はペ-ジの背景色にもよります、背景色を黒に指定した場合にはリンク色は標準より明るい色を選択する等の変更する必要が出て来ます。「選択は自由です」
選択中リンク 背景色によります
選択済みリンク 背景色によります

--TAGで-た-------------------------------------------------------------------------------
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" ALINK="#FF0000" VLINK="#800080">

------------------------------------------------------------------------------------------
(ページの余白データーは、載せていません)


文書の設定 _ ドキュメントタイプ宣言の選択


文書宣言は、HTML ファイルの一行目に入力されます

フレ-ムなしのペ-ジ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

フレ-ム使用のペ-ジ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

基準フォントサイズ
ホ-ムペ-ジ全体の一番使用するフォントサイズを必ず指定します!なぜなら基本フォントサイズと同じならサイズ指定しなくても良いからです、反対に合っていない時には、壮大な無駄になります。body の後にbasefont として入力されます。


基本フォントをスタイルで指定する。*pt の数値で調整
<meta http-equiv="Content-Style-Type" content="text/css">を<head>から</head>の間に組み込んでから以下のデ-タ-を同じく<head>から</head>の間に何処でも良いので組み込みます。

<style type="text/css">
<!--
BODY,td,th,div{
font-size : 9pt;
}
-->
</style>


ロボット検索

重要
ペ-ジの説明は短く簡潔に、キ−ワ−ドは正確に組み込みます、又キ−ワ−ドの複数指定は、カンマで区切り3っから5つぐらいが適当だと思います。

--TAGで-た----------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>

<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">
<META NAME="Robots" CONTENT="index,follow">
<META NAME="Description" CONTENT="ペ-ジの説明">
<META NAME="Keywords" CONTENT="キ−ワ−ド">
<META NAME="Classification" CONTENT="ジャンル">

<META NAME="Generator" CONTENT="HETEMULU Writer Ver2.08a">
<TITLE></TITLE>
</HEAD>

---------------------------------------------------------------------


ペ-ジの上下左右の余白の指定

<BODY *********** >TAG の中に組み込まれます。

--TAGで-た----------------------------------------------------------------------------

<BODY BGCOLOR= MARGINWIDTH="0" LEFTMARGIN="0" MARGINHEIGHT="0" TOPMARGIN="0">

---------------------------------------------------------------------------------------
(テキスト、フォント、リンク色データーは載せていません)


ペー-ジの余白をスタイルで指定する。*pt の数値で指定
<meta http-equiv="Content-Style-Type" content="text/css">を<head>から</head>の間に組み込んでから以下のデ-タ-を同じく<head>から</head>の間に何処でも良いので組み込みます。


<style type="text/css">
<!--
BODY{
margin-top : 0pt;
margin-left : 0pt;
margin-right : 0pt;
margin-bottom : 0pt;
}
-->
</style>


ユ−ザ−登録タグ _ タグ(T)__ユ−ザ−登録タグ(U)
真ん中の「l 」 は入力範囲となり、指定範囲を黒くマ−クしてから登録タグを指定して、打ち込むとタグの始りと終わりに正式に打ち込まれます、又一つのタグだけを単独で登録しても構いません。「同時にキ−ボ−ドからも打ち込むキ−も育成されます」


画像の抽入
初めに抽入したい画像、素材等を先に所定の 「 素材用 」 フォルダに入れて置きます。次に抽入したい箇所をマウスで指定して「 Ctri+I 」 で、イメ−ジ抽入画面が出てきます。
* ツ−ルバ−アイコン、右クリックメニュ−等好きな所から行って下さい!

一番上のウインドウから所定のフォルダに入れた画像を指定します、画像のサイズは自動的に設定されます。

画像の枠と画像周りの余白の設定
枠の太さ 外枠の太さで、0で表示されなくなります
横のスペ-ス 画像と横の表示部分との余白です
縦のスペ-ス 画像と縦の表示部分との余白です
画像の配置 表示位置


画像のサイズ指定について
縦横のサイズは、実写真以外なら縦横の割合は多少変更しても構いませんが、サイズを変更する場合は画像を、リサイズしてから抽入するのが基本です。


ファイルを配布させる
クリック(ダウンロ−ド開始部分)する箇所を黒くマウスで指定して、 「 Ctrl+L 」 リンクの抽入画面からファイルを指定します。
送るファイル等は、ウィンドウズ純正対応の 「 ZIP 」 形式を選択して、RAR 等の日本ではあまり一般の人に普及していない形式は避けた方が無難です。

注意
著作権、又はファイルサイズの大きさ等には十分に配慮する必要があります。
,
BACK このペ−ジのTOP