MASHの「ホームページのススメ (Windows版)」 |
|||
|
|||
MASHのお友達Katzeさんのサイトです。===>
|
KatzenGaruten |
||
|
|||
ホームページを今すぐ作ってみよう!「テキスト・エディター編(その11)」 |
|||
どうしても、お金を掛けずに自分でホームページ(以降
HPと呼ぶ)を作ってみたい人は、テキスト・エディターを使ってトライしてみよう。テキスト・エディターっていうのは、テキストが書けるソフトなどを指す。(フリーウエアも一杯ある)例としては、Windowsにオマケで付いている「メモ帳」などである。
|
|||
---|---|---|---|
以前、MASHもフレームを使ったHPを作ったり、いじったりしていました。それなりに工夫すれば、ステキなものになるのですが、やはり、コンテンツ数がある程度多くないと、空き地だらけになったり、同じコンテンツが異なるフレームにダブってたりと、フレームの必要性を感じなくなってきました。でも、それは、あくまで、MASHの問題であり、前述の通り、うまく使えばいいわけですので、MASHの苦い経験と合わせて解説させていただきます。 |
|||
注)事前に拡張子が見える設定になっていないと付けたつもりの拡張子がファイル名の一部として誤認される。だから、エクスプローラー →メニュー「表示」→ フォルダーオプション→タブ「表示」→「登録されているファイルの拡張子は表示しない」にチェック(v)が入っていたら、外すこと。 | |||
フレームをいくつにしようか? 2〜4個のフレーム構成が 一般的と思われる。それ以上だと、重たくなる可能性が高い。 下の<html>〜</html>の間を全て、コピーして、メモ帳へペーストしたら、cursol.html という名前でファイルしてみよう。他の名前でもOKだけど、拡張子は、html,またはhtmであること! |
|||
<html> <head> <!-- 左のメニューにあたるページ名を、ここでは、sidemenu.html 右上のお知らせにあたるページ名を、ここでは、inform.html 右下のメイン・ページ名を、ここでは、maincontents.html とします。これら3つのページを先に作成しておいて下さい。 <title>フレーム自由自在</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <!-- 下のcolsは、ひとつのページをタテ割りにして左右に二つのフレームを並べるという意味。 数字の170は、170ピクセルの幅でsidemenu.htmlを表示し、残りのピクセルでinform.htmlと maincontents.htmlを表示するという意味。frame nameは、適当に名前をつけて良いが、 そのframeがどの部分に相当するか判るような名前が望ましい。 frameborderは、frame間の境界線の幅を 示す。ここに数字を入れると線幅が設定される。 --> <frameset cols="170,*" frameborder="NO"> <frame name="leftName" src="sidemenu.html"> <!-- 下のrowsは、ひとつのページをヨコ割りにして上下に二つのフレームを並べるという意味。 数字の100は、100ピクセルの高さでinform.htmlを表示し、残りのピクセルで maincontents.htmlを表示するという意味。 --> <frameset rows="100,*" frameborder="NO"> <frame name="topFrame" src="inform.html"> <frame name="rightFrame" src="maincontents.html"> </frameset> <!-- 冒頭に、3つのページを予め作るようにお願いしたが、その内のメニューページから各コンテンツへジャンプ する設定時、各ページをHP全体で見せるのか、右下のメイン・ページのみで見せるのかなどを よく考えておきましょう。タグは、target="rightFrame"で、右下に、また、target="_top"で HP全体に、ジャンプ先ページを開く指定を行う。少なくとも、メニューから左のメニュー自体のところに 開かないように、target="_self"は避けること。詳しくは、下の枠外に、3つのページをバラバラにアップしておくので、 それらのソースを覗いてみて欲しい。 noframesのタグは、フレーム未対応ブラウザーでアクセスしてきた場合に、所定のメッセージを 表現できるタグ。最近では、フレーム未対応ブラウザーを利用する人が、どの程度、おられるか判らないが・・・ --> <noframes><body bgcolor="#FFFFFF"> フレーム対応ブラウザーでご覧下さい。 </body></noframes> </html> |
|||
結果として、このようになります。 更に、sidemenu.html inform.html maincontents.html も個々にご紹介。 |
|||
FLASHについて: |
|||
有名・強力壁紙関連サイトへのリンク
MASH厳選 素材リンク集
次回 「テキスト・エディター編(その12)」 をお楽しみに! |
|||