>フルサイズ
           2017.02.28 15:18 更新

 

 


こんにちわ、(^ ^)       このページの文字列検索・ジャンプは、”Ctrl + F ”キーで。  
 

 ホームページ開設入門 - index  無料で開設。カウンター・ドロプダウンメニュー・♪、Java Applet・Java Script・DHTML・CSSをらくらく制す…*     ※: ”互換表示”でフロートメニュー作動。
  1. 23 初めてのホームページ開設方法 1        いまご覧になっている、このページ じゃわ。
  2. Webスペース・URLをゲットします。          一例として、忍者ホームページで 。
  3. HTMLを作成します。                 やWordpadで楽に制作する。 FrontPage Expressセットアップ方法
  4. Webサーバーにアップロードします。           FTPソフトのget!、 はここで代表的なFTPソフトの設定例
  5. 開設したページを見てみる。
  6. 公開してみる。                    サーチエンジンに登録します、検索用キーワードの設定や、サーチエンジンの検索窓貼り付け。
  7. ヘルプ (;。;) (-."-;)。
  8. 7.1 高機能版 に挑戦する。             FrontPage Expressで高機能を楽に制す!、止めどない発想をじっくりと自在に発表 …*。(^ ^)
  9. 7.2 アクセスカウンター を付けてみる。          Webで10分で可能。〔プロバイダー依存なし〕
  10. 7.3 ” お気に入りに追加ボタン” を付けてる。  DHTML、詳細      DHTMLとは?DHTMLリファレンス
  11. 7.4 ”ドロップダウンメニュー” を付けてみる。      JavaScript、新しいWinで開く層式゙フレームページへの応用MSのWeb風トップナビバーツリーメニュー
  12. 7.5 "♪" を流してみる。               IE、NN対応、起動時のWinサイズの指定方法2midiオブジェクトの実装サンプル13  も。
  13. 7.6 ”流れるメッセージ” を付けてみる。       JavaScript、詳細 2 
  14. 7.7 ”フレーム付きサンプルページ” を使ってみる。   Java 、Java Script、DHTMLなどのサンプルページ!の項や、応用例
  15. 7.8 ”折り畳みリスト”サンプル を使ってみる。    DHML、ドロプダウンメニューよりも自在な表現可能、編集簡単。応用例
  16. 7.9 ホバーボタン を使ってみる。            Java Applet、ボタン/画像のマウスオーバー/クリックで画像をチェンジ/サウンド演奏/Webを開くなど自在。
  17. 8 ホームページ制作支援のページリンク集。      素材、テクノロジー、無料Webスペース、メール、チャット、bbs、カウンター、バナー交換、ボイスメール・チャットなど
  18. Internet Explorer互換表示             表・フォームなどの罫線が太く表示、崩れる、JavaScriptの非動作、文字がやや小さく表示される、などの解決ヒント!・対策
  19.  Java、DHTML、JavaScript、CSS、XML サンプル   ホームページを多彩に表現、ペーストですぐ使える最新のサンプルいろいろ。 サイトマップ

ホームページ作成 無料” をクリック、サービス提供プロバイダーを見つけます。  (例)として、 “無料でホームページを作成するなら|忍者ホームページ” で、ホームページスペースを無料で貰い、HomePage を作成し、公開する手順です。     FrontPage Express でしばしば遭遇する〔私がぶつかった〕 (-."-;) の解決方法も記しています。

次の 1〜5 の手順で、開設完了です。 \^o^/
 

 1 アカウントを獲得する。  URLをゲットします。このページのトップへ

(1) “忍者ホームページ をクリック開きます。  [⇒ 今すぐこのツールを作成] をクリックします。   [忍者ホームページを新規作成] をクリックします。

(2) [新規ユーザー登録] をクリックします。   【メールアドレスで登録】 メールアドレスをタイプイン・ペーストします。   [この内容を送信] をクリックします。 

(3)  着信メールをチェックします。   『 仮登録が完了しました。  ……   に「忍者ツールユーザー登録のご案内」をお送りしました。  メールに記載されている案内に沿って本登録にお進み下さい。 』 を確認。 

(4) 送られてきた “◆本登録のURL” をクリックし開きます。   表示される案内に沿って、手続きを進めます。

(5) 【新規ユーザー登録】 本登録の手続きを行う。   ユーザー情報を入力し、[本登録をする]をクリックします。 

(6) 以下、ガイドに沿って行う。     ※ : 適時、情報・データーの記録・保存をしながら。

 

 2 HTMLドキュメントの作成(Win版)  ホームページを作成・編集します。このページのトップへ  この項はWebで同じです。 順番はありません。

アップロードの前に、予めHTMLドキュメント、index.html、か index.htm のいずれかを、必ず用意しておきます。(理由)  ダミーでも OK!。

Internet Explorer に付属の”FrontPage Express”を主に使って、HTMLを見ることなく意識せずにワープロで文書を作成する感覚で、 HTMLドキュメント(*.html)を作成できます。  ”FrontPage Express”の操作は、FrontPage とほぼ同じです。    ホームページ(index.html ファイルなど)は、HTML(タグ埋め込みファイル)形式のテキストファイルです。  画像やサウンド、Java などは、個別のファイルを参照するための記述(ハイアパーリンク)をホームページに記述します。  (1) Wordpad(Win)や、SimpleText(Mac)などのテキストエディターでHTMLソース=タグを見ながら作成・編集できます。  HP制作ソフトで制作したページの編集もできます。  (2) HP制作シフトは、HTMLタグを見ないでブラウザーの表示に近い画面で制作できます。〔HTMLタグを見ながらのHTML編集メニューも付いています。〕   他のHP制作ソフトで制作したページの編集時に固有のタグが削除・付加されることがあります。          

FrontPage Express セットアップ方法。

 ・ FrontPage Expressのダウンロード可のサイト。

 ・ 予めInternet Explorer5.5がインストール済みPCには、FrontPage Express は無し(5.01 → 5.5にアップ時は有り)。   Microsoftサポート:Win98SEなどのIE5.5がインストールされている場合Microsoftサポート:WindowsME に FrontPage Express がインストールできない。 などを参考に、Internet Explorer5.5を一旦削除後、5.1(SP2)をセットアップ。

 ・ Office2000のCD-ROMからセットアップできます。 自動起動したCD-ROMは一旦閉じ後、Explorerで開き、 D:\IE5\JA\ などと辿り、FPESETUP.CAB を任意のホルダーにコピーし、展開(解凍)して生成された fpxpress.exe のクリックで起動。 Fpxpress.exe のショートカットを 、[スタートメニュー]ホルダーなどに作成し、【スタート】から起動可。    OfficeXPのCD-ROMから、同様にセットアップできます。 D:\FILES\OSP\1041\IE5\JP\ などと辿り同様に。   IE5セットアップCD-ROMからも同様に。  ※: D: 部分は、お使いのPCやネットワークでさまざまに変わりますぐぁ、皆Good!〜*。

 ・ 他に、Windows2000/WindowsMeへのFrontPage Expressのセットアップ方法 でも。      Internet Explorer5.01のセットアップは、少し古い”インターネットマガジン”(〜2000/9)などの付録CD-ROMや、Internet Explorer 5.01 Service Pack 2 (SP2)をセットアップするで。 

 ・ セットアップ済みPCの、 C:\Program Files\Microsoft FrontPage Express ホルダー(4.74MB)のコピーでOK!。  起動は、C:\ …… \Microsoft FrontPage Express\BIN\と辿り、Fpxpress.exe ”赤羽根ペン”のクリックで。〔※:【スタート】-[プログラム]- … と辿っても表示されない〕    あるいは、【スタート】- [ファイル名を指定して実行] - 名前: Fpxpress(半角)などを入力、Enter キーを押すで。〔インストール有無の確認方法も同じ〕    簡単な起動は、Fpxpress.exeのショートカットを、[スタートメニュー]ホルダーなどに作成し、【スタート】 ……から起動する。     関連、参考情報:ホームページ制作ソフト をget !。   HTMLEditor - Internet Explorer5.5〜。    DHTML Editing ControlDownload sampleを右クリック、”対象をファイルに保存”、editcntrl.exeが保存される。 editcntrl.exe をクリック、実行、解凍ホルダーを指定、Unzipをクリックします。  fulledit.htm をクリック、HTMLエディターが起動します。    ※ : dhtmsamp.EXE をクリック、実行、解凍ホルダーを指定、サンプルを生成。〕

index.html の用意は、下記の サンプルページ Hello!…などを、(1)〜(3)の手順でローカル(=PC)に保存して、編集(タイプイン、コピー、ペースト、カット)すれば簡単です。

(1) サンプルページ Hello!… を左クリックして Internet Explorer で表示し、吟味します。  ダウンロード方法はページに記載しています。  サンプルページ2(ヘッダーフレーム付き) も。

(2) 例えば、保存した”sample_index.html” を ”FrontPage Express” で開いてHTMLドキュメントを編集します。   編集途中にローカル(PC)に保存して、ときどき Internet Explorer でモニターしながら進めます。

(3) ファイル名をコピー元の”sample_index.html”から、”index.html”に変更して保存します。

・ [ファイル] - 【名前を付けて保存】 - [ファイルとして保存]  - [ファイル名] - 〈 index.html 〉 - [保存]

(4) この”index.html”を下記の ”項 の方法でアップロードします。

 

以下、”・ …… ”は必要に応じて参考にしてください。

・ ”FrontPage Express” でHTMLドキュメント(hogehoge.htmや、namae.htm、himitu.html(例))を作成するには、[ファイル] - [新規作成] - 【新しいページ】 - <テンプレートまたはウィザード>: 標準ページ - [OK]をクリックします。  なにかタイプインします。   [ファイル] - [名前を付けて保存] - 【名前を付けて保存】 - <ページタイトル>: 名前をタイプインします〔”お気に入り”に表示される名前”になります、タイトルバーにも表示されます。〕 - <ページの場所>: himitu.html(例) をタイプインします。  [ファイルとして保存] をクリックします。

・ 編集するには、[ファイル] - [開く] - 【ファイルを開く】 - ◎ファイルから - [参照]をクリックします。 【ファイルを開く】で、場所とファイル名を指定し、- [開く]をクリックします。 (ここで、【ダイヤルアップの接続】が起動するときは”×”をクリックして閉じます。)  編集(タイプイン、コピー、ペースト、カット)を行い、[ファイル] - [上書き保存 ]をクリックします。   Microsoft情報:[IE5] ツールバーの [編集] ボタンに FrontPage Express が表示されない場合   

・ ”FrontPage Express” でのHTMLタグの編集方法は、 [表示] - [HTML]を選択します。  【HTMLの表示と編集】、HTMLをタイプインします、 [OK] で完了、で行います。  HTMLタグの直接編集方法は、WordPadを起動して目的の *.html を開き、編集を行い、”テキスト文書”形式で保存します、ファイル名は xxxx.html を保持。   

※:WordpadでHTMLを編集する  1) 〜 3)の手順で Wordpad を起動し、index.html などを開き編集できます。 1)【スタート】 - [ファイル名を指定して実行]  名前: Wordpad(小文字)、[OK]  2)【Wordpad】-[ファイル] - [開く] - index.html を選択します。 ファイルの種類: ”すべてのファイル”  3) Wordpad で HTML を編集完了、保存は必ず”テキスト文書”形式を選択、ファイル名は、xxxxx.html を保持。    HTMLドキュメントはテキストであるため、作成したソフトに依存せず全てのHTMLドキュメントを WordPad や SimpleText などのテキストエディター で開き、編集を行い、テキスト文書で保存できます。〔作成と異なるHP作成ソフトでの編集を行うときは、独自タグの書き換えに注意!。〕     ※: WordpadやSimpleTextなどのテキストエディターや、HP制作ソフトのHTML編集メニューでは、HTMLタグを見ながら編集できます。  これは、アクセスカウンターのタグやJavaScript、Java Appletの挿入、またテキストエディターの置換、検索メニューによる一斉修正に適しています。  

・ ”FrontPage Express” での個別のHTMLタグの挿入方法は、 [挿入] -【HTMLマークアップ】 、HTML編集・ペースト、 [OK] でも行えます。  この方法で挿入した部分は ”FrontPage Express” で開くと、 [?] マーク で表示されます。  [?]黄 マークが表示されないときは、[表示 ] - [書式記号] に ”v” チェックがあるか確認します。   編集は、 [?] を右クリックし、[HTMLマークアップのプロパティ]をクリックし、【HTMLマークアップ】を開いて行います。  [?]を任意のファイルや位置に貼り付けられます。

 ”IBMホームページビルダーでの個別のHTMLタグ゙の挿入方法は、挿入位置をポイントします。  [挿入]メニュー -[その他] -[HTMLタグ] を選択し、HTMLの記述を行い - [OK] にて終了します。  編集はこのコンテンツ部を右クリック、[属性変更]などで行います。  テキストエディターでコピー/カット/編集したテキスト=HTMLドキュメントをこの方法で挿入できます。      全体のHTMLタグ゙の挿入方法は、最下段の[HTMLソース]タブをクリックします。 HTMLの編集(追加/ペースト/変更/削除/カット/移動)を行います。  ローカル(PC)に保存し、[プレビュー]タブをクリックし、モニーターで確認します。    これらのHTMLの挿入方法はアクセスカウンターや、Java AppletJava ScriptDHTMLCSSなどの追加/記述 にも重宝します。    IBMホームページビルダー解説サイト 1 2 3や、IBMホームページビルダーサポート >キーワード検索ファイル転送どこでも配置メニューの制限事項ロールオーバーiモード掲示板アニメーション など。

・ 更新手順・注意ポイント
(1) PCに保存、サーバーからダウンロードした、 index.html などの対象ファイルを準備します。  Internet Explorerなどで内容などを確認します。  Wordpad、SimpleTextなどのテキストエディターや、FrontPage ExpressなどのHP制作ソフトで index.html を開きます。
(2) テキストエディターや、HP制作ソフトのHEML編集メニューでHTMLやスクリプトなどの変更/追加などを、HP制作ソフトではタイプインやペーストなどで、文字や画像、表(テーブル)などを追加/変更など行います。
(3) PCに保存します。 Wordpadで編集後は、きっと”テキスト文書”タイプを選び保存します。 PCに保存した index.html を Internet Explorerで開き更新結果が確認できます。
(4) 更新した、 index.html などをFTPソフトなどでアップロードすると、サーバーにある、同じファイル名の index.html の内容が上書きされ更新されます。
(5) 更新の確認をします。    サーバーのファイル名(index.html)を指定した、個別アクセスで確認します。  アドレス:   http://www.xxxx.xx.jp/xxxxx/xxxxx.html
   〔?:めいめいのものを当てはめる。〕  以下、※:補足、随時参照。
※: ブラウザのキャッシュ〔一時メモリ〕の古いデータが表示されている可能性があるので、下記の手順で、再読込み(≠再アクセス)をおこない、最新データーを読み込む。
目的のページを表示させた状態で、アドレスを確認、Internet Explorerで再読込みのために、F5キーを押す。   〃   Netscape Navigatorでは、  〃   、Ctrl+Rキー を同時に押す。
※: ファイル名の付け方   大小文字は(別物として)区別されます。(例):右は全て別ファイル。 index.html index.htm Index.html   更新させるファイル名は完全に一致させます。〔一致の識別はWinとWebサーバーで少し異なります。〕   PCに保存時や、FTP時にファイル名が変わることがあります、要確認です。   不一致だと、別ファイルとして新たにサーバーに配置されます。
※:アップロード時の注意ポイント!
  0) ダウンロードしたファイル名・大小文字の変化が無いことを吟味します。
  1) ファイルを編集・更新〔コンテンツの追加/削除など〕
  2) PCに上書き保存
  3) 更新ファイルを閉じる。
  4) Internet Explorerで表示、更新結果・ファイル名の変化無しを確認します。
  5) FTPソフト・メニューを起動します。 起動済み時は、転送元ホルダーの更新・再読込みを行い最新情報を準備します。
  6) FTP・アップロード・発行します。
※:古い・更新前ファイルをアップロードしないように配慮します。 注意ポイントは下記。
  ○:HP更新後にPCに必ず保存する、IEでの確認がベター。
  ×:HP制作ソフトでプレビュー → 直ぐアップロードする。
  ○:HP制作ソフトでプレビュー → PCに上書き保存完了後に、アップロードする。        
  ×:HP制作ソフトでプレビュー → PCに上書き保存完了後に、既に起動しているファイル転送メニューでアップロードする。
  ○:HP制作ソフトでプレビュー → PCに上書き保存完了後に、既に起動しているファイル転送メニューで、転送元ホルダー内容の再読込・更新後にアップロードする。

・ 行間を空けない改行は、”Shift+Enter”キーを押します。  ”太字”は対象の文字列を選択し(反転表示) ”Ctrl+B”キーを、斜体は”Ctrl+I”キーを、下線は”Ctrl+U”を押します。

・ ハイパーリンクサンプルページ(例) の作成は、対象の文字列:”サンプルページ”を選択し(反転表示)、”Ctrl+K”キーを押し、【ハイパーリンクの編集】- [WWW] タブを表示させ、〈ハイパーリンクの種類〉: http: を選択します。 〈URL〉:”http://.www3.justnet.ne.jp/~okatohsho/frame1.htm(例)”を入力します。  このURLは挿入先ファイル index.html などと同じホルダーであれば、ファイル名のみ(frame1.htm)でもよい。   サンプルページ のように下線が付き、【ページのプロパティ】背景、ハイパーリンク、で指定した色に変わります。  〔表示 → HTML → 【HTMLの表示と編集】Win でも同様の編集が行えます。〕   ファイル、名前を付けて保存、【名前を付けて保存】 ページタイトル: ……のホームページ  などを入力します、”お気に入り”などに表示される名前です。    [ファイルとして保存] ををクリック、保存する場所: ”めいめいが指定する”ホルダーを選択し、ファイル名: frame1.htm などを入力し、[保存] をクリックします。   作成済みのハイパーリンクの確認方法は、サンプルページ などをポイントし、最下段に http://www03.u-page.so-net.ne.jp/ra5/himitu/nikki.html などが表示されます。   ハイパーリンクの修正方法は、対象の文字列〔サンプルページ〕を選択し(反転表示)、”Ctrl+K”キーを押し、【ハイパーリンクの作成】- [WWW]タブ を表示させます。 〈URL〉: http://www03.u-page.so-net.ne.jp/ra5/himitu/nikki.html 例)などを正しく入力します。     ”file:///C:/……” などは間違い、作成した *.html のモニター では正常?に表示されるためオーナーがしばしば遭遇する誤りです。   この場合はオンラインでのモニターでも、ローカル(=PC)のファイルをモニターしているのです。  

・ 画像ダウンロード用のリンク を作るには、FrontPage Express で *.html を開き、画像を指し、右クリックします。 【画像のプロパティ】Win- [全般]タブが開きます。<規定のハイパーリンク> 場所: に http://www.……記述は省略…/*.lzh などをタイプイ゚ンします。  [OK] を押します。

・ 新しいWinで表示させるには、WordPadで開き、 (例): <a href="http://www02. …… sample_index.html" target="_blank" title="ここをクリックして見ることができます。"> のようにURL末尾に、” target="_blank"”を付加します。 編集を終え、”テキスト文書”で保存します。    FrontPage Expressで、新しいWinで開くリンクを作るには、(1) 対象文字列を選択します。 →  反転表示になります。 (2) Ctrl+K キーを押します。 (3) 【ハイパーリンクの編集】 (4) URL: URLを記述します。 (5) ターゲットフレーム: _blank をタイプインします。 (6) [OK] 完了です。   ※:ほかに、 同じフレーム:target="_self"、ページ全体:target="_top"、親フレーム:target="_parent"。     このWinサイズの指定方法は、このWeb 2 に。

・ ハイパーリンクをポイントした時に、コメントを表示させるには、WordPad で開き、上の(例)のように” title="ここをクリックして見ることができます。"”などコメントを付加します。  改行は、 『 &#13; 』 で。   編集を終え、”テキスト文書”で保存します。

・ FrontPage Express のメニューを使用した、吹き出し文字を表示させる手順    (例)”リンク文字”にマウスカーソルを置くと、”ここにメッセージを記述します”などを吹き出し表示。  FrontPage Express で、”リンク文字”を範囲選択する。 リンク文字 のテキストトが、反転表示に変わります。  Ctrl+Kキーを押します。  【ハイパーリンクの作成】URL: http://www …… をタイプインします。 [拡張]ボタンを押す。【拡張属性】、[追加]ボタンを押す。 【名前と値の組み合わせ】で名前: title をタイプインします。 値: ここにメッセージを記述します  などをタイプイン。   改行は、 『 &#13; 』 で。     [OK]、[OK]、[OK]ボタンを押す。  保存します。  Internet Explorer で開き、吹き出し表示効果を確認します。  変更は、同様に行います。

・ 画像をポイントした時に、コメントを表示させるには、”FrontPage Express”で開いて、右クリック - 【画像のプロパティ】- <代替え表示> - <テキスト>に:『 メール おくれ !』 などのコメントを記述します。    テキストエディターを使用する方法は、次のように記述します。   <a href="http://www./……/xxx.html"><img src="xxxx.gif" alt="吹き出し、バル〜ンa" title="吹き出し、バル〜ンt" border="0" width="15" height="16"></a>  ※:NetscapeNavigator4.7x用の、 alt="吹き出し、バル〜ンa" も併せた記述も可。

・ メールを発信して貰う(ハイパー)リンク、ここをクリックしてメール送ってね!(例)の作成は、対象の文字列を選択し(反転表示)、”Ctrl+K”キーを押し、【ハイパーリンクの作成】で〈ハイパーリンクの種類〉:mailto:  を選択し、〈URL〉:にメールアドレス(例 : mailto:cha-cha@attglobal.net)を入力します。  このアドレスはメールの受け取り人のアドレスです。

・ メール おくれ  封書などの画像にメールを発信して貰う(ハイパー)リンクの作成は、”FrontPage Express”で開いて、右クリック - 【画像のプロパティ】- <既定のハイパーリンク> - <場所>に:メールアドレス(例 : mailto:cha-cha@attglobal.net ) を入力します。

・ 画像の挿入-〔FrontPage Express使用〕  [挿入] - [画像] ◎ 保存場所からを選択、画像のURLを入力。   このURLは*.html ファイルと同じホルダーであれば、ファイル名のみでOK。   あるいは、 画像の挿入場所で、[挿入] - [画像] ◎ ファイルから、[参照]【画像】▼をクリックし、ホルダーを辿り、My Document → new1a.gif などを選択します。  [開く]をクリック、画像が表示。  画像を指し、右クリック→ 画像のプロパティ:画像のソース: file:///C:/My Documents/画像1/new1a.gif など。  file:///C:/My Documents/画像1/new1a.gif  →  new1a.gif に変更します。 壊れたテレビ絵になります。  http://www##.u-page.so-net.ne.jp/###/######/new1a.gif でも同じこと。     〃  〔index.htm、new1a.gif をPCの同じホルダー C:\My Documents\homepage1 に一括してれば表示されます。〕※1  〔index.htm、new1a.gif を同じホルダーにFTP/転送/アップロードします。〕※1   代替表示テキストに、 ”Hello!”  などとタイプインすれば、マウスオーバー時に ”Hello!”(吹き出しテキスト)表示されます。   規定のハイパーリンク:場所: 画像クリック時に、ここに記述したURLにジャンプします。   ターゲットフレーム: _blank をタイプインすると、上のジャンプ先が新しいWinで開きます。  ※:target= は、同じフレーム:target="_self"、ページ全体:target="_top"、親 フレーム: target="_parent" も。     画像と文のレイアウトは を使用すると自在です。   サムネイル画像からフルザイズ画像へのリンクを作成するには、画像を選択、【画像のプロパティ】 - [既定のハイパーリンク] - [場所]:*.jpgや、*.gif を相対パスか、絶対パスで記述します。

・ 画像の右や左に文章を記述・挿入するHTML(例)。   ※:画像ファイル=4-9.jpg、 画像の右にテキスト=align="left"、 画像の左にテキスト=align="right"、画像表示サイズ= width="680" height="451"。

<p><img border="0" src="4-9.jpg" align="left" width="680" height="451"> ここ(画像の右)に、テキストを記述できます。</p>
<p>*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*</p>
<p>*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*</p>
<p>おわり、〜*</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><img border="0" src="4-9.jpg" align="right" width="680" height="451"> ここ(画像の左)に、テキストを記述できます。</p>
<p>*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*</p>
<p>*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*〜〜*</p>
<p>おわり、〜*</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
 

・ 画像挿入-〔WordpadやSimpleTextなどのテキストエディターか、HP制作ソフトのHTML編集メニュー使用〕
WordpadやSimpleTextなどのテキストエディターか、HP制作ソフトのHTML編集メニューで、HTMLを編集します。   1) 〜 4)手順で Wordpad を起動し、index.html などを開き編集します。   1)【スタート】 - [ファイル名を指定して実行]  名前: Wordpad(小文字)、[OK]  などで起動。  2)【Wordpad】-[ファイル] - [開く] - index.html を選択します。 ファイルの種類: すべてのファイル  3) HTMLタグが見えるようになり、タイプインにて編集できます。   4) WordpadでHTMLを編集完了、保存は必ず”テキスト文書”形式を選択します、ファイル名は、xxxxx.html を保持。   
作成した画像挿入HTMLソース(例): 

<p><a href="http://www.xxxx.xx.jp/xxxxx/xxxxx.html"target=" target="_blank"><img src="http://www.xxxx.xx.jp/xxxxx/xxxxx.gif" alt="ここに吹き出しメッセージを記述します。" border="0" width="80" height="50"></a></p>   

  ※:画像のURL+ファイル名:  http://www.xxxx.xx.jp/xxxxx/xxxxx.gif   挿入先ファイルと同じ階層に配置時は、ファイル名のみ(xxxxx.gif)でも可。
  ※:画像のクリックで開くページのURL:  http://www.xxxx.xx.jp/xxxxx/xxxxx.html
  ※:リンク先を新しいWinで開く: target="_blank"   ほかに、Win全体: target="_top"  同じフレーム: target="_self"
  ※:画像のURL http://www.xxxx.xx.jp/xxxxx/xxxxx.gif  挿入先と同じホルダーにある場合は、xxxxx.gif のみ可。
  ※:枠線無し: border="0"
  ※:画像サイズの指定: width="80" height="50"  
  ※:※:target= は、同じフレーム:target="_self"、ページ全体:target="_top"、親フレーム: target="_parent"、フレーム: target="main" 〔main= <frameset で宣言した frame name 〕、なども。

・ 画像のローカルパス → Webパスへの修正手順 〔Webでの画像非表示対応(例)!〕   (例): xxxx:さまざま、画像:gazou.gif、対象URL:http://wwwxx.u-page.so-net.ne.jp/xxx/xxxxx/  
【現象】 http://wwwxx.u-page.so-net.ne.jp/xxx/xxxxx/indexhtm.htm  の、gazou.gif などが表示されない。(制作者のPCだけは表示されますので要注意!。)   原因: gazou.gif のパスがWeb上でなく、ローカルのPCのファイルを表示するようになっています。      Microsoft情報: [IE5] FrontPage Express で画像の挿入後保存、パス表示される

(1) FrontPage Expressを起動し修正対象の、index.html などを開きます。
(2) 画像の挿入場所にカーソルを置き、 [挿入]-[画像] - ◎ ファイルから 参照:【画像】ファイルの場所、ファイル名を指定します。 〔PC内の gazou.gif を指定します。〕 [開く]をクリックします。   画像が表示されます。
(3) 画像をポイント(指し)します、マウス右をクリックします。 【画像のプロパティ】を確認します。  画像のソース: file:///C:/www/gazou.gif  となっています。〔ローカルであり、制作者のみに表示される。〕
(4) 次の ab 何れかで修正するする必要があります。
 a  画像のソース: http://wwwxx.u-page.so-net.ne.jp/xxx/xxxxx/akago.gif をタイプインやペーストし修正します。   [OK]をクリックします。   オンラインでのみ表示されます。  Internet Explorerで開き、[×]画像をポイント右をクリック、【プロパティ】:アドレス: http://wwwxx.u-page.so-net.ne.jp/xxx/xxxxx/gazou.gif  を確認します。   
 b  画像のソース:file:///C:/www ……/gazou.gif の ”file:///C:/www……/”部を削除し、 →  gazou.gif に修正します。    [OK]をクリックします。    index.html と gazou.jpg が同じホルダーに配置時は、オンラインと、オフライン〔制作者とキャッシュに保存者〕とも表示されます。    Internet Explorerで開き、表示された画像をポイント右をクリック、【プロパティ】:アドレス:file:///C:/xxxxxxx/xxxx/gazou.gif  
(5) Webの画像ファイルを個別にアクセスしての、表示確認もケースバイケースで行います。    Internet Explorerのアドレス: http://wwwxx.u-page.so-net.ne.jp/xxx/xxxxx/gazou.gif などで、画像単独にアクセスして表示を確認します。
(6) 【現象】表示されない → (7)、(8)
(7) 画像がサーバーに無い →  http://wwwxx.u-page.so-net.ne.jp/xxx/xxxxx/ に gazou.gif などをFTP=転送する。  
  ※: URL、ファイル名、拡張子が、ハイパーリンクと一致しているか?。 → 修正する。 
  ※: ファイル名、ハイパーリンクの記述に誤りはないか?。
  ※: ハイパーリンク〔ホルダー、ファイル名、URL〕は、半角小文字英数字と、『/』、『.』、『_』、『-』が無難です。 スペースは避け、『_』(アンダーバー)が無難。
  ※: ◎ : index.html  index.htm index_map.htm  abcd-efg.htm
  ※: △ : Nikki.htm  himitu nikki.htm (タイプミスや、スペースはソフトによっては誤動作を誘因)
  ※: × : インデックス.html  画像.gif (全角文字はローカル=PC=Windowsでは表示される。)  
  ※: FTPや、PCへの保存後のファイル名を確かめておく。
(8) ホームページ制作者が、PC(=Windows)とWeb サーバー(=unix系)との違いで注意すべきことは、
  ※: Webサーバー〔unix系〕のソフトは、たいてい 大文字/小文字 を別物として区別し〔Windowsはしない〕、
  ※: そしてURLに 半角英数字以外 が含まれると処理(表示)できない〔Windowsはできる〕。
  ※: Windowsでファイル保存/FTP時に、大文字/小文字 部分が変わったことに気が付かないことです。
  ※: Internet Explorer のメニューで保存すると、index.html → index.htm などに変わることがあります。

・ 画像の圧縮手順 目標、(例): assyukugazou.jpg 200KB  → 20KB  (1) オリジナルを名前を変えて大切に保存しておきます。 Explorerで assyukugazou.jpg をコピー → assyukugazou_org.jpg を作成します。(任意)  (2) FrontPage Express  [ファイル] - [新規作成] - [標準ページ] - [OK]  (3) [挿入] - [画像] ◎ファイルから - [参照] - assyukugazou.jpg を選択。 開く。   (4) 画像上で、右クリックします。【画像のプロパティ】- ◎JPEG 画質 75 → 30(例) に変更します。 [OK]   (5) [ファイル] - [名前を付けて保存] -【名前を付けて保存】 - [ファイルとして保存] ファイル名:sample.htm など新しい名に。 [保存]   (6) 【画像をファイルに保存】- [すべて]   (7) sample.htm と同じホルダーに  assyukugazou.jpg 20KBと、 assyukugazou.jpe 200KB(”jpe”部に注目!)ができている。   (8) FrontPage Express で挿入先 gogo.html を開きます。   (9) 画像上で、右クリックします。【画像のプロパティ】- 画像のソース:[参照] assyukugazou.jpg を指定、[OK] [保存]   (10) 完成、Internet Explorerで確認〔ほとんど見栄えは変わらない!、(^ ^)〕、アップロード。     

・ タイムスタンプ(自動更新)の挿入は、[挿入] -【WebBotコンポーネント】 - [タイムスタンプ] -[OK] 、日付・時刻書式を指定します。  タイムスタンプ-JavaScript(例)

・ JavaScript(ジャバスクリプト)の挿入は、[挿入] -【スクリプト】 で行います。  [挿入] - 【HTMLマークアップ】 、HTMLペースト、 [OK] でも行えます。

・ JavaApplet の挿入は、コピー元の *.html を ”FrontPage Express” で開き、 [J]マーク = JavaApplet のコピー、ペーストでも行えます。   また、WordPad で開き、  <Applet code ……で始まり、……</Applet>  で終わる JavaApplet のコード(HTML)をコピーし、[挿入] - 【HTMLマークアップ】 、HTMLペースト、 [OK] でも行えます。    *.html と 対の *.class は同じホルダーに配置/保存 します、ローカル(=PC)とWebサーバー(tripod)でそうします。  JavaApplet のプロパティで表示サイズなどは変更できます。 Java Applet は、 Java Applet/ Java Boutique などで入手できます。

・ タイトルの付加は、右クリック、【ページのプロパティ】 - [タイトル] に入力します。  ”お気に入りに追加”の”名前”になります、画面下段のタイトルバーにも表示されます。   【IBMホームページビルダー】で目的の *.htm を開きます、右クリックします。[文書のプロパティ]を選択します。 【属性】- <文書タイトル>: ……のホームページ(などのタイトル)をタイプインします。 [OK]をクリックします。 [ファイル]-[上書き保存]をクリックします。  HTMLに、 <HEAD> ……のホームページ</HEAD> のタグが追加されたのを Wordpad などで見ることもできます。   Internet Explorerで開き、(最下段)のタイトルバーに、 ……のホームページ などが表示されることで確認できます。

・ 御参考 :(アドレスバ^ー、ツールバーまた)Internet Explorerの お気に入り”に表示されるアイコンを指定する方法 も。   (1) アイコン用画像ファイルを作成または、用意し、サイズ、16x16(pixel)または、32x32(pixel)に 、PictureManagerなどで編集します。   画像ファイル名を、favicon.icoなど、*.ico の拡張子に、 Explorerで変更します。      〔または、画像ファイルを準備します。   Dynamic Drive CSS Library > FavIcon Generato にアクセスrします。  ”Image to create icon from:” で準備した画像ファイルを指定します。  ”[Create Icon]” をクリック、作成されたIconファイルを、ダウンロードしPCに保存しても、同じです 〕        (2) アイコンファイル favicon.ico などを、index.htm と同じ階層=ディレクトリに配置します。  ※:別階層の場合はパスを変更します。   アイコンファイル名、favicon.ico は、favicon2.ico などに変更 し、複数使用出来ます。   (3) 作動試験は、一旦お気に入りに追加 → ここからアクセスします。  旧お気に入りの削除、Internet Explorer の再起動、 【Internet Explorer】- [ツール] - [インターネットオプション] - <インターネット一時ファイル>- [ファイルの削除]などでのキャッシュクリアなどもケースバイケースで行う。  アイコンファイルのサイズに制限あり。     Internet Explorer 5.01は、HTMLファイルと同じ階層に favicon.ico を配置した場合に、<HEAD>部分に次の(*)記述が必要。    (*) :   <HEAD> <LINK REL="SHORTCUT ICON" href="favicon.ico"> </HEAD>  ”お気に入りアイコン”で検索

・ 背景の指定は、右クリック、【ページのプロパティ】 - [背景] で行います。

 ★ 背景色を指定する方法。 
WordpadやSimpleTextなどのテキストエディターか、HP制作ソフトのHTML編集メニューで、下記の(例)のように、 <body> タグ部を編集し bgcolor="#FFFFFF4D9" などを記述指定します。
  1) 〜 4)手順で Wordpad を起動し、index.html などを開き編集でけます。
  0) ※:テキストエディターによる編集はHP制作ソフト間との整合性が失われません。
 1)【スタート】 - [ファイル名を指定して実行]  名前: Wordpad(小文字)、[OK]  などで起動。
 2)【Wordpad】-[ファイル] - [開く] - index.html を選択します。 ファイルの種類: すべてのファイル 
 3) HTMLタグが見えるようになり、タイプインにて編集できます。
  4) WordpadでHTMLを編集完了、保存は必ず”テキスト文書”形式を選択します、ファイル名は、xxxxx.html を保持。 bgcolor="#FFFFFF4D9" を追加します。 色変更は、#FFFFFF4D9 部分で。
(例):  <body bgcolor="#FFFFFF4D9" link="#460068" vlink="#600005" alink="#007D89">  
※: link="#460068" vlink="#600005" alink="#007D89" は省略可能、  ※: それぞれ、背景色、 リンク色、 表示済みリンク色、 アクティブリンク色です。 ※:色コードは、RGB(色の作成と色コードの獲得)で。

 背景画像の指定は、[ファイル] - [ページのプロパティ] - [背景] - [v] 背景の画像 - [参照] - 【背景画像の選択】 - [ほかの場所] - ◎ファイルから - [参照]〔PCのファイルを指定する〕、 [背景] - [v] 背景の画像 : file:///C:/xxxxxx/xxxxx/xxxx.gif - [OK] (ここで背景画像が表示される)、がPCのローカルパスからURLに修正が必要!。 [ファイル] - [ページのプロパティ] - [背景] - [v] 背景の画像: file:///C:/xxxxxx/xxxxx/xxxx.gif  →  xxxx.gif(挿入先と音源ファイルが同じ階層=ホルダー時)か、http://wwwxx.xxxx/xxxxx/xxxx.gif(全般)、に修正(ここで背景画像が消える)。

 ★ 背景画像を指定する方法。 WordpadやSimpleTextなどのテキストエディターか、HP制作ソフトのHTML編集メニューで、下記の(例)のように、 <body> タグ部を編集します。   background="haikeiguwazou.gif" を追加記述し、同じ階層=ホルダーに配置します。 画像ファイルはURLでも可。  
(例): <body background="haikeiguwazou.gif" bgcolor="#FFFFFF4D9" link="#460068" vlink="#600005" alink="#007D89"> 
※: WordpadでHTMLを編集後は、”テキスト文書”を選択し保存します、ファイル名はxxxx.htmlを保持。
※: haikeiguwazou.gif 背景画像ファイル名 
※: bgcolor="#FFFFFF4D9" link="#460068" vlink="#600005" alink="#007D89" は省略可能、
※:それぞれ背景色、リンク色、表示済みリンク色、アクティブリンク色です。

 ★ 背景画像の中央配置 スタイルシートを使用(例)
WordpadやSimpleTextなどのテキストエディターか、HP制作ソフトのHTML編集メニューで、下記の(例)のように、 <head>部を編集します。  
<head>
<style Type="text/css">
<!--
BODY{
background-image: url(http://www.xxxx.xx.jp/xxxxx/tyuou.jpg);
background-repeat: no-repeat;
background-position: 50% 50%;
}
-->
</style>
</head>

※:背景画像のURL: http://www.xxxx.xx.jp/xxxxx/tyuou.jpg  挿入先ファイルと同じ階層に配置時は  ファイル名のみ tyuou.jpg でも可。
※:関連情報 - スタイルシートリファレンス  

背景画像をスクロールさせないでテキストのみスクロールさせる方法は、次の太字部分を追加します。   <body bgproperties="fixed" background="whrb011.gif" bgcolor="#FFFFFF4D9" link="#460068" vlink="#600005">  実装例   色作成・記号獲得 :(サブWinで開きます)や、見栄えの設定は、スタイルシートリファレンス が便利!。

・ バックグラウンドサウンド(Internet Explorer only)の指定は、[ファイル] - [ページのプロパティ] - [全般] [バックグラウンドサウンド] - [参照] - [ほかの場所] - ◎ファイルから - [参照] 〔PCのファイルを指定する〕、[全般] [バックグラウンドサウンド] ,- [場所] :  file:///C:/xxxxxx/xxxxx/xxxx.mid をPCのローカルパスからURLに修正が必要!。 file:///C:/xxxxxx/xxxxx/xxxx.mid  →  xxxx.mid か、http://wwwxx.xxxx/xxxxx/xxxx.mid に修正。 〔HTMLの(例): <bgsound src="Symphony.mid" loop="1"> 〕します。 ♪演奏はここにいろいろ。     ブロックの背景色の色分けは、 を応用します。   

・ 水平線の挿入は、[挿入] - [水平線] で、変更は選択して、右クリック 、【水平線のプロパティ】 で行います。   Netscape Communicator では表示が異なり、背景色にマスクされたりしますが、下記(例)のように細長い表で代替えすれば表示できます。   HTMLの説明: table border:罫線サイズ、 cellspacing:セルスペース、 width:セル表幅(%) "1000"=1000ピクセル、 bordercolor:セル罫線色、 bgcolor:セル背景色、 セルheigh:高さ(ピクセル)  td width:表幅、bgcolor:表背景色、テキスト:<font face=……/font>、テキストなしは削除    <table border="0" cellspacing="1" width="100%" bordercolor="#50005E" bgcolor="#50005E" height="10"><tr><td width="100%" bgcolor="#D6B8ED"><font face="MS Pゴシック" size="2"> テキストやハイパーリンクが追加できます。</font></td></tr></table>

・ (テーブル)の挿入は、[表] - 【表の挿入】 で行います。 画面や Window サイズなどが変わっても常に画面幅いっぱいに表示する方法は、幅の指定を”100%”のままにしておきます。  枠の非表示は、【表のプロパティ】で[外枠のサイズ]: 0 にします。  表は、画像+文や、背景色区分、段落作成など、レイアウトを”想うがまま”にしかも簡単にできるため、とても重宝します。   ”入れ子”で段落を作成できます。(例)   サンプルページ 本文右中央1列見出し付き本文2列2列メニュー付き3列均等3列メニュー付き3列メニュー、サイドバー付き3列右セクション付き4列 タイトルバー付き6列段落付き 1 2 3 4 などを利用すると簡単。  表は、画像+文や、背景色の区分け、段落作成など、レイアウトを”想うがまま”にしかも簡単にできるため、とても重宝します。  FrontPage Express を使って、表の中に表を”入れ子”にする方法は、[表] - [表の挿入]、【表の挿入】で新しい”親”になる表を作成します。  ”子”の表を範囲指定で選択します、反転表示に変わります。  親の表の挿入先のセルにドラッグ&ドロップします。  

・ さらなる 強力なレイアウト制御 は、サンプルページ レイアウト枠1 で。    行間の制御方法は、このページ などで。  Winサイズ変化に応じてコンテンツを常に中央に表示する方法は、オブジェクトの中央配置2 で。   説明文や画像などのコンテンツを通常隠し〔折り畳み〕クリックで表示する方法は、折りたたみコンンテンツ で。

・ ブックマークと、ブックマークへのハイパーリンク を作成して、ページ内の指定位置にジャンプさせることができます。topへ(例)   ブックマークの作成は、ジャンプさせたい箇所(ジャンプ先)で、[編集] - [ブックマーク] - 【ブックマーク】 を開き、<ブッックマーク名>:” topへ ”(例) を記述します。   ”旗”マークが表示されます。  ”ブックマーク名”を見るには、旗をポインティングし右クリックで、【ブックマークのプロパティ】を表示します。  ブックマークは文字や画像に対しても付けることができ、旗は付きません(例=7.4項”2”)。   別のページの指定位置にジャンプさせるには、URLの末尾にブックマークを付けます(例): list220m.html#4。  同じURLであれば、ファイル名+ブックマークで充分です。     表現力のある漢字、半角カタカナは使えます(例):  list3.html#料理list2.html#秋葉原 . PCショップ゚。 

・ ブックマークへのハイパーリンクの作成は、対象の文字列”topへ”(例)を選択し(反転表示)、”Ctrl+K”キーを押し、【ハイパーリンクの作成】 - [開いているページ] で、(例):”=(^。^)=23 初めてのホームページ……”を選択し、- <ブックマーク>:(例)=”top”を選択します。  7.4項にも応用例があります。  Internet Explorer では、読み込みに遅れがあると、ブックマーク位置が画面の下部あたりに表示されします。  必ず上部にきっちり表示される Netscape Communicator の表示能力は優れています。  ブックマークへのジャンプのテストは、Win の縦幅を小さくして行います。  URL+ブックマークへのジャンプテストは、オンラインにする必要があります。

・ ”FrontPage Express”の起動は、【スタート】-[プログラム]-[アクセサリ]-[インターネットツール]-[FrontPage Express] と、ホルダーを辿ります。 ここ : (Internet Explorer5.x)   あるいは、【スタート】-[プログラム]-[Internet Explorer]-[FrontPage Express] と、ホルダーを辿ります。(Internet Explorer4.0x)    もしくは、[ファイル] - [ Microsoft FrontPage Express で編集] でも起動する環境もあります。   もし見つからない場合は、【ディスクトップ】で”F3”キーを押し、<名前>: FrontPage を入力、<探す場所>: (C:)、[検索開始]ボタンをクリックします。  きっと見つかります。   ”赤い羽根ペン”のアイコン= FrontPage Express を、クリックすると起動します。     【スタート】- [ファイル名を指定して実行] - 名前: Fpxpress (半角)を入力、Enterキーを押しても可(これで起動しなければセットアップなどが必要)。   

・ C:\WINDOWS\SendTo ホルダーに”FrontPage Express”や、”WordPad”、”Netscape Communicator”などHP制作用ツールのショートカットを入れておくと、*.html を”右クリック”、”送る”を選択により、”FrontPage Express”で”編集”が、”WordPad”で”HTML直接編集”が、”Netscape Communicator”で”いつもと違うブラウザでのモニター”がすばやく選べるので、ホームページ制作者には重宝!。   左クリックでは、たぶん Internet Explorer が起動します。

・ 作成したHTMLドキュメントは、PCに保存し、Internet Explorer や Netscape Communicator などで表示テストを済ませてからアップロードします。

・ 練習用のHTMLドキュメント(サーチエンジンへの未登録=公開前)は、Web などからコピーしたものでも可、用済み後に変更・削除できます。

・ HTMLドキュメントの作成は、Word や Excel、一太郎で作成したドキュメントを、”HTML形式で保存”しても可能。 

・ URLの公開に先立ち、ファイル名が ”index.htm”か、”index.html” のファイルを必ず作成しアップロードするようにします。   ” http://www./……/xxx./xxxx/ ”などのファイルを省略した URLの指定で、”index.htm”があればこれ探して表示します。  ”index.htm” ファイルが見つからないと、指定階層のファイル一覧が表示されます。

(a) ”FrontPage Express” で index.html を作成するには、代表的な、トップ(表紙)にしたいページを FrontPage Express で開きます。〔 もし無い場合は、(b) の方法で新規作成を行います。〕  [ファイル] - [名前を付けて保存] - 【名前を付けて保存】 - (ページタイトル): ”……のホームページ”などの名前をタイプイ゚ンします(”お気に入りに追加”の”名前”になります、タイトルバーにも表示されます。)- (ページの場所): index.html をタイプイ゚ンします。  [ファイルとして保存] をクリックします。 この index.html をアップロードします。

(b) ”FrontPage Express” でHTMLドキュメント index.html を作成するには、[ファイル] - [新規作成] - 【新しいページ】 - (テンプレートまたはウィザード): 標準ページ - [OK]をクリックします。  なにかタイプイ゚ンします。   [ファイル] - [名前を付けて保存] - 【名前を付けて保存】 - (ページタイトル): ”……のホームページ”などの名前をタイプイ゚ンします(これは”お気に入りに追加”の”名前”になります、タイトルバーにも表示されます。)- (ページの場所): index.html をタイプイ゚ンします( . に着目!)。  [ファイルとして保存] をクリックします。 この index.html をアップロードします。 

・ ホームページ制作者が、Windows と Webサーバーの違いで注意すべきは、Webサーバーはたいてい、大文字・小文字を区別し(Windowsはこの区別をしません)、そしてURLに半角英数字以外があると処理できません、未だ(-."-;)。   Internet Explorer でファイル保存時に、inex.html が index.htm に変わったり、Windowsで保存時に、大文字 → 小文字 に変わることがあり注意/確認が肝要です。   index.htm などのファイル名を省略した、階層=ホルダーで指定したURLでアクセスすると、Webサーバーは、 index.html 、index.htm の順で探していずれかを表示します。〔空白の index.html などに注意。〕   FTP時にファイル名が変わることもあります。  ペースト時に末尾にスペースが紛れ込むこともあります。   ハイパーリンク(ホルダー、ファイル名、URL、ダウンロードのためのリンク、……など)は、半角小文字英数字と” .”” _” -” が無難です(例): abcd-efg.html。   処理できないソフトがあるため、スペースは避け、”_” (アンダーバー)が無難。        機種依存文字文字化け対策漢字コード。  〔HTMLで、”<” 、” >”、” &”などのキャラクターを表示する時は、それぞれ”&lt;” 、”&gt;” 、”&amp;” と記述します。〕  EUCコードによる文字化け文書型宣言に就いて/文書タイプ宣言の意味 HTML Validation: Choosing a DOCTYPE(jp)DOCTYPE HTML PUBLICで検索 

 

 3 アップロードします。  サーバー にファイルを送ります。このページのトップへ 

isweb無料版のFTP設定

FTPソフトの入手のためのリンク集 > Internet Explorer6.xでFTPFFFTP 1 2 3FTP Explorer 1 解説  FTP Explorer 日本語化モジュール マニュアル 1 2Next FTP  Next FTP Lite 1 2 3 4  NexTools WebAgentWS_Ftp 1  WS_FTP Limited Edition  WS_FTP Pro 6.0 WS_FTP Pro 1 2 3

 

 4 Internet Explorerで確認します。  開設したページを見てみる。このページのトップへ

自分のホームページをアクセスして ”index.html”などを確認します。(表示されないときは、サーバー上のファイル名などを確認します。)  Netscape Communicator( get!はここで )でのモニターも行い、違いを見ます。   サーバーのファイル名まで”正確”に指定した、個別アクセスでWebのファイルを確認します。   ブラウザのキャッシュ〔一時メモリ〕の古データが表示されている可能性があるので、下記の手順で、再読込みを行い最新データを読み込む。   目的のページを表示させた状態で Internet Explorer で再読込みのために、F5 キーを押す。   〃   Netscape Navigator  〃   、Ctrl+R キーを同時に押す。 

IE6/7/8でWebサイトの見栄えを見比べ「Microsoft Expression Web SuperPreview」

 

 5 サーチエンジンに登録して公開します。  全ての人がアクセスできるようにします。このページのトップへ  この項は、全Webで同じです。

下記のURL登録サイトなどで実行する。

サーチエンジンへの登録 : URL登録 1 2 4 5 6 7 8 9 0 1 2、  サーチエンジン登録ガイド  一括登録 0 1 2 3 4 5 6 7 8 9 0  SubmitWolf 1 ホームページ紹介サービス   Web マスター関連情報-ガイドライン(日本Google)   キーワード検索でページが検索されるようにするには や、キーワードを設定するには も。   InfoseekURL登録 > 登録できないページと対処方法 > フレームを使用しているページキーワードとサマリーの設定 (インフォシーク)    キーワードとサマリーの設定 登録拒否ロボット検索禁止タグ 1。   日本の検索エンジン一覧

検索窓を付ける :  alltheWeb  Goole  msn   Infoseek  Excite  Goo  Yahoo  あったよ〜*  Find'X  WWW日本語検索  iSiZE  フレッシュアイ、 Lycos  WebCrawler。   ホームページのサイト内検索をする

 

 6 困った時はこのページのトップへ

日本Googleビジネスソリューション > Webサイト > Webマスターセントラル > Webマスターの為のガイドライン

よくある質問と答(FAQ)

1 2 3 4 5 6 7 8 9 0 1 2 3 4FrontPage Expressガイド 1 2 3 4 5 6 7 8 9 0 など。

用語 最新略語辞典 1 Find'x、   インターネット用語 1 2 3  So-netインターネットアシスタント もけ〜* インターネット用語 1 2 3、  拡張子 1   コンピュータ用語 1 2、  用語リンク

 

 7 おまけ   高機能版や、カウンターなどに挑戦してみる。  フレームや折りたたみリストなどのサンプルページも

 ・  Java、Java Script、DHTMLなどのサンプルページ! で、表(テーブル)や、フレームページ、スタイルシート(下線装飾など)、JavaScript(各種メニューなど)、DHTML(画像制御など)、Java Applet(ホバーボタンなど)、ActiveX(カレンダーなど)が実装できます。

 ・ IPアドレス関連情報 : 検索結果現在使用しているIPアドレス情報を取得する方法 - Windows2000、IPアドレスからホスト名自分のIPアドレスの参照

 

7.1 高機能版に挑戦してみる。このページのトップへ

iswebベーシック (サーバー容量 : 300MB、CGI  : Perl、PHP、Python、Ruby、htaccess、webログ、商用)

 

 7.2 アクセスカウンター を付けてみる。このページのトップへ  この項以降は、全Webで同じです。 順番はありません。

(例) :   このかわいいカウンターを付けるには、LinkExchange を訪れ、 [Sign Up Now !] ボタンを押します。  次に [I agree to Terms and conditions]  ボタンを押して、My Profile を登録し [Next] ボタンで次へ進み、ガイドに応じてタイプイ゚ンを行い、完了します。   カスタマイズされ、[   ] ボックスで提供される下記の(例)のようなHTMLのコピーを目的の”index.html”にペーストすれば完了、(メールでも同じものが、直ちに送られて来ます。)。   ”FrontPage Express” での”HTML”のペースト(貼り付け)方法は、[挿入]−[HTMLマークアップのプロパティ] で開く、【HTMLマークアップ】のエリアにペーストして行います。  これでたちどころにカウンターが作動を開始します。   FastCounter  が表示されるときは、サーバーが手一杯?!\(-."-;)/ なので、時間を置いて再読込(≠再アクセス)を試みます。

(例) :  <!-- BEGIN FASTCOUNTER CODE -->
     <a href="http://member.linkexchange.com/cgi-bin/fc/fastcounter-login? …省略… " target="_top">
         …省略… 
         …省略… 
     </font><!-- END FASTCOUNTER LINK -->

 

 7.3 Internet Explorerで作動する ”お気に入りに追加”ボタン を付けてみる。 このページのトップへ

ボタンをクリックしてみてください。  この作成方法は、ファイル(hpb001.html)を”FrontPage Express”で開き、[<?>]コピーし、任意の位置にペーストします。   ことば=”お気に入りに追加 …*”の編集は、[<?>]を右クリックし、[スクリプトのプロパティ] -【スクリプト】 を開いて行い、[OK]、で完了します。   ”=(^。^)= 23 ホームページの開設入門”(ページタイトル)は、自動的に変わります。  あるいは下記の方法で、Wordpad や SimpleText などのテキストエディターや、HP制作シフトのHTML編集メニューで太字部分を編集します(説明用の彩色自体は意味なし)。  スクリプト中への不要な改行混入は不作動原因。 

 ・ ”お気に入り”や、”タイトルバー”に表示される、サイト名(≠ファイル名)の記述(例):    <heady> 〜 </head> の任意の行間に、<title>=(^。^)= 23 ホームページの開設入門</title>  などを記述。

 ・ ”お気に入りに追加するボタン” は、アップロード後に、作動 します。   ※: ローカル(PC内ファイルのオープン)で非作動。

 

(*1) : hpb001.html   ボタンタイプ       挿入先の  <body> 〜 </body> の、 部分(任意行)にペーストします。   任意位置への配置は、罫線なしの表(テーブル)に嵌めるなどで。

 

   HTMLの編集方法   (*1) をテキストエディターで開き、下記↓のHTMLを挿入ファイル(xxxx.html)にペースト、太字部分を編集、使用。
〔この列ペースト不要〕

吹き出し ボタン文字  (本例:style=' 〜' 部分を省略)=ボタン背景色 文字色 枠線色

 

<SCRIPT LANGUAGE="JavaScript">

<!--

if ((navigator.appVersion.indexOf("MSIE") > 0)

&& (parseInt(navigator.appVersion) >= 4)) {

document.write("<INPUT TYPE='button'  title='=(^。^)= ありがとう祢〜*。' VALUE='お気に入りに追加' style='background-color:#87003D; color:#FBEEFA; border-color:#B6003D' onClick='window.external.AddFavorite(location.href, document.title);'>");

}

//-->

</SCRIPT>

 

 

(*2) : 背景色付文字タイプ         挿入先の  <body> 〜 </body> の、 部分(任意行)にペーストします。  任意位置への配置は、罫線なしの表(テーブル)に嵌めるなどで。

 

   HTMLの編集方法    ↓ をテキストエディター経由で開き、HTMLを挿入ファイル(xxxx.html)にペーストし使用。
〔この列ペースト不要〕

フォント サイズ

文字色 背景色

 

 

 

 

ボタンの表示文字

 

 

 

<p><!--webbot bot="HTMLMarkup" startspan --><FONT face="MSP Gothic" size=3><SPAN

style="COLOR: #FFFFFFAE3; BACKGROUND-COLOR: #8300C5">

<SCRIPT>

<!--

if ((navigator.appVersion.indexOf("MSIE") > 0)

&& (parseInt(navigator.appVersion) >= 4)) {

document.write("<SPAN STYLE='cursor:hand;'onclick='window.external.AddFavorite(location.href, document.title);'>お気に入りに追加します</SPAN></U>");

}

//-->

</SCRIPT>

</SPAN></FONT><!--webbot bot="HTMLMarkup" endspan --></p>

 

 ・ 彩色指定は、HTMLの色指定色見本RGB :(サブWinで開きます)が便利!。

 ・ ”FrontPage Express” でのHTMLタグの編集方法は、コピー元の範囲を左クリックした状態でマウスカーソルでなぞり範囲指定し、反転表示に変えます。  Ctrl+Cキーを押します〔あるいは右クリック → コピー〕。  FrontPage Expressで挿入先のファイルを開き、 [表示] - [HTML]を選択、【HTMLの表示と編集】、 <body> 〜 </body>の間の任意の行、 ”挿入場所=” にカーソルを置き、Ctrl+Vキーを押します。〔あるいは、右クリック → 貼り付け〕でのペーストや、HTMLのタイプインを行い、 [OK] で完了!。 Internet Explorer5.x〜

 ・ ”FrontPage Express” での個別のHTMLタグの挿入方法は、 [挿入] - [HTMLマークアップ]メニューで、HTMLのペースト・編集、 [OK] で完了!。  この場合、[?] などのマークが作成されます。  この[?]マークを任意のHTMLファイル(Webページ)の、任意の位置にペースト(貼り付け)できます。    編集は次の方法で行います。  [?]を右クリックし、[HTMLマークアップのプロパティ]をクリックし、【HTMLマークアップ】を開いて行います。  この[?]を Wordpad にコピーして、広い画面で編集後、再び【HTMLマークアップ】に戻しても同じこと。

※ 他に簡単な Java Script を試してみる。  JavaScriptTips集 :FrontPage Expressで[?] マークのペースト、WordpadでHTMLのペーストで簡単に応用できるJava Script、DHTML集。  ”お気に入り”のアイコン 〃検索 1   

※: 関連・詳細情報 :  これの作り方は、Microsoft MSDN Internet Explorer5に備えて: Webサイト制作者のための Tips にあり。

 

 7.4 ドロップダウンメニュー を付けてみよう。  ページ内のブックマークや、Webサイトにジャンプできます。このページのトップへ

 選択ターゲットに遷移します。
←  ほかに、新しいWinで開くドロップダウンメニュー2層プルダウンメニュー(フレームページへの応用(例):ストフレーム frame2MicrosoftのWeb風のトップナビバー 4aツリーメニュー4aなどいろいろ

このファイル(hpb001.html)を”FrontPage Express”で開きます。  上の [?] ←マークのコピーを任意のHTMLファイル(Webページ)にペースト(貼り付け)します。  次の方法で編集します。  [?] を右クリックし、[HTMLマークアップのプロパティ]をクリックし、【HTMLマークアップ】を開きます。  下記が表示されます。 【HTMLマークアップ】から Wordpad にコピーして広い 画面で制作できます。  あるいは下記の方法で、Wordpad や SimpleText などのテキストエディターや、HP制作シフトのHTML編集メニューで太字部分を編集します(説明用の彩色自体は意味なし)。

 

(*1) : hpb001.html  (例)       挿入先の  <body> 〜 </body> の、 部分(任意行)にペーストします。

   HTMLの編集方法   (*1) をテキストエディターで開き、下記↓のHTMLを挿入ファイル(xxxx.html)にペースト、太字部分を編集、使用。
〔この列ペースト不要〕

フォント サイズ

 

 

 

 

 

 

デフォルトの選択メニュー(移動可)

URL、ブックマーク(アンカー) 背景色(省略は、 style="background-color: #F6F7FF;" 部の削除で) サイト名、ブックマーク名  ※:色記号

以下同様。

リンクの加減は、行単位の追加/削除で。

 

 

<p><font face="MS Pゴシック" size="3"><!--webbot bot="HTMLMarkup" startspan --><SCRIPT language=JavaScript>

<!--

function GoPage( a ){

location = a.options[a.selectedIndex].value;

}

//-->

</SCRIPT>

<FORM><SELECT name=PullList onchange=GoPage(this) size=1>

<OPTION SELECTED VALUE="#0" style="background-color: #F6F7FF;"> index メニュー

<OPTION VALUE="http://dictionary.goo.ne.jp/cgi-bin/ej-top.cgi" style="background-color: #FFFFFF0EB;">EXCEED英和辞典

<OPTION VALUE="http://www.google.com/intl/ja/" style="background-color: #FFFFFF0EB;">Gogle日本

<OPTION VALUE="http://www.so-net.ne.jp/weather/jikei/index.html" style="background-color: #F1E9FF;">時系列天気 so-net

<OPTION VALUE="#1" style="background-color: #FFFFFF;">1 はじめに 

<OPTION VALUE="#2" style="background-color: #FFFFFF;">2

<OPTION VALUE="#3" style="background-color: #FFFFFF;">3

<OPTION VALUE="#4" style="background-color: #FFFFFF;">4

<OPTION VALUE="list220a.html#Apple" style="background-color: #FFFFFFFEB;">アップル > ダウンロード

<OPTION VALUE="#6" style="background-color: F9F3FF;">6

<OPTION VALUE="#7" style="background-color: F9F3FF;">7

<OPTION VALUE="#8" style="background-color: F9F3FF;">8

<OPTION VALUE="#9" style="background-color: F9F3FF;">9

<OPTION VALUE="#10" style="background-color: F9F3FF;"> おわりに

</OPTION></SELECT> 選択ターゲットに遷移します。

</FORM>

<!--webbot bot="HTMLMarkup" endspan --></font>

 

 

この太字の部分を、ご自分のデーターに編集(タイプイン、コピー、ペースト、カット)して使用します。  <OPTION VALUE=" ここにURLブックマークを記述 ">ここにメニューボックスに表示させる文字 を記述します。   ”OPTION VALUE=……” 行の追加、削除ができます、順序や、個数は任意です。  " "内の http://www.so-net…… .html や、 #0〜#10 などは、ジャンプ先のURLもしくは、ブックマーク(=アンカー)です。  < >右の”天気”、”1 はじめに”などは、メニューボックスに表示させる文字です。   【HTMLマークアップ】から Wordpad にコピーして広い画面で編集できます、保存は”テキスト文書”で行い、【HTMLマークアップ】に再び張り付けます。

ブックマーク を作ります。  ジャンプさせたい箇所(ジャンプ先)で、[編集] - [ブックマーク] - 【ブックマーク】 を開きます。   <ブックマーク名>:” 1 ”(例) を記述します。  ここの例では、〜”10” まで作っています。  ”旗”マークが表示されます。  旗の右クリックで、【ブックマークのプロパティ】を表示して、”ブックマーク名”を見ることができます。  ”旗”1〜10 はコピーして任意な位置に貼り付けられます。 誤って同じブックマークを複数作成した場合は、上位置のブックマークにジャンプします。 

1  初めに 

  ここにコンテンツなどを記述します。  以下、同じようにブックマークは、各コンテンツの冒頭などのジャンプさせたい位置に付けます。

 

10  終わりに

 

このページのトップへ  topへ  のようにページトップに作成したブックマークへのリンクを付けておくと、マウス操作でページのトップに戻れます。  topへのブックマークは、”FrontPage Express”で開き、最上行の [?]”旗マーク”初めての…… 部分の”旗マーク”です。 旗の右クリックで、【ブックマークのプロパティ】を表示して、”ブックマーク名 = top ” を見ることができます。

ブックマークへのハイパーリンク の作成は、対象の文字列:”topへ”(例)を選択し(反転表示)、”Ctrl+K”キーを押し、【ハイパーリンクの作成】 - [開いているページ] で”=(^。^)=23 初めてのホームページ……”(例)を選択し、- <ブックマーク>:”top”を選択します。  ブックマークは文字や画像に対しても付けることができ、旗は付きません。(例”2”)  URLにブックマーク( #4 など)を付けることができます。(例): list220m.html#4   ブックマークとドロップダウンメニューに漢字、半角カタカナは使えます。(例): list1.html#談話 . らくがきlist2.html#秋葉原 . PCショップ゚  ブックマークは、大小文字・半全角・スペース有無を正確に記述します。  Internet Explorer では、読み込みに遅れがあると、ブックマーク位置が画面の下部あたりに表示されします。  必ず上部にきっちり表示される Netscape Communicator の表示能力は優れています。  ブックマークへのジャンプのテストは、Win の縦幅を小さくして行います。  URL+ブックマークへのジャンプテストは、オンラインにする必要があります。   ほかに、フレームページから新しいWinを開くプルダウンメニューの 実装方法 も。

 

【ブックマーク(アンカー)の作り方】  テキストエディター使用

※:WordpadやSimpleTextなどのテキストエディターか、HP制作ソフトのHTML編集メニューで編集します。
  1) 〜 4)手順で Wordpad を起動し、index.html などを開き編集でけます。
  0) ※:テキストエディターによる編集はHP制作ソフト間との整合性が失われません。
 1)【スタート】 - [ファイル名を指定して実行]  名前: Wordpad(小文字)、[OK]  などで起動。
 2)【Wordpad】-[ファイル] - [開く] - index.html を選択します。  ファイルの種類: すべてのファイル
 3) HTMLタグ(ソース)が見えるようになり、タイプインにて編集できます。
  4) WordpadでHTMLを編集完了、保存は必ず ”テキスト文書” 形式を選択します、ファイル名は、xxxxx.html を保持。

(1) ”top へ” をクリックしたときに、ページのトップにジャンプ(遷移)させる(例)。
(2) 下記(例)のように、ジャンプ元の <body> 部に、 <p><a href="#top" target="_self">topへ</a> </p>  を、  ジャンプ先の行に   <p><a name="top"></a></p>  を記述します。
  (例)

<body>
<p><a name="top"></a></p>

<p><a href="#top" target="_self">topへ</a> </p>
</body>

 

※:http://www.xxxx.xx.jp/xxxxx/xxxxx.html#top や、 xxxxx.html#top  のように、別のページへのジャンプにも使用できます。

※: target= の種類
同じフレーム target="_self"
ページ全体  target="_top"
親フレーム  target="_parent"   応用例

 

 7.5 "♪"のWebサイトからの 音楽 を流してみる。このページのトップへ

このファイル(hpb001.html)を”FrontPage Express”で開きます。  上の [?] マークのコピーを任意のHTMLファイルの <body> 部の再上行か、WordpadやSimpleTextなどのテキストエディターか、HP制作ソフトのHTML編集メニューで、 <head> 〜 </head> 部にペーストします。

編集する場合は、 [?]黄 を右クリックし、[HTMLマークアップのプロパティ]をクリックし、【HTMLマークアップ】を開きます。  <META HTTP-EQUIV="REFRESH" CONTENT="1800;URL=http://www.real.com/showcase/kingredir.ram" target="_blank> が表示されます。  この太字部分を編集して使用します。   ”*.midi”や、”*.ram”音源のあるWebサイトのURL(=http://www.real.com/showcase/kingredir.ram" target="_blank)や、ページを開いてからサウンド演奏開始までの時間(この例では1800秒です。)などを、任意に変更します。       サンプルを直ぐ聴いてみるには、"♪" をクリックします。 最新の RealPlayer日本語版 を get ! …* (^ ^)RealPlayer の get ! は、Real com >RealPlayer8 Basic >RealPlayer 8 Basic ダウンロード で。   ※:〔音源でなくWebサイトを指定すれば、タイマーでWebサイトに自動的に遷移します。  『 いつもご愛読ありがとう、2秒後に新しいサイトへジャンプいたします。』などの置き手紙を置いた旧ページに、この仕掛けを作成して、新しいWebサイトへ自動的にジャンプして貰う方法などにも使います。   同じページを”5秒”毎に再読みさせるには、次のように記述します。  頻繁に更新するページのキャッシュの古いデーターのリフレッシュなどに応用出来ます。  <META HTTP-EQUIV="REFRESH" CONTENT="5">〕    "♪"演奏は、ほかにも、[挿入] - [バックグラウンドサウンド] - ◎保存場所から : ”*.midi”や、”*.ram”音源のある WebサイトのURL を記述、 - [OK] で完了、の方法もあります。   バックグラウンドサウンド はページオープンで直ちに起動します。(Internet Explorer only)   ※:《 ご注意 》 オフラインでこのページを開いてから、30分後に自動的に回線接続を始動することがあります。

Microsoft Windows Media Player 6.4 日本語版/Windows Media Player 7Apple QuickTime4Real Networks RealJukebox 詳細WinAmpMusicMatch Jukebox v4.3 1 など もあれば世界が広がります。   起動するプラグインが変わってしまった場合は、優先させるものを後から(再び)セットアップ、インストール時のオプション指定などに注意します。  [表示] - [オプション] - [形式] など、それぞれのプラグインの設定も確認します。   参考:Win98関連付けWin95。   Beatnik Plug-in 2.0 の削除方法は特殊です、セットアップによって格納された、該当するActiveX コントロールを ”C:\WINDOWS\Downloaded Program Files” ホルダーで見つけて削除します。    おまけ : MZ Record、『(^^)…*』、『あっ!』、『あかん…*』、『開けたよ!』、『開きま〜*すっ!』、『ヘイッ!、お待〜ち!』、『時間です!』、『お疲れさまでした…*』、『おや、まぁ…*』。   御参考 : Outolook Express5.0で、BGM付きや、*.midファイルを mail に添付する〔新しいWinを開く〕で この(例) を開く。   

EMBED法の実装方法や、MediaPlayer object 法YAMAHA MIDPLUG object 法Java Script、DHTMLのTips集 → ・ 13 "♪"midi〔詳細〕、ie、NetscapeNavigator対応のバックグラウンドサウンド(ページオープン時に自動演奏)の実装方法の詳細NetscapeNavigatorのプラグインの起動時のWinサイズの指定方法2 なども。 

IBMホームページビルダーでBGMを挿入する方法】   挿入場所で、[挿入]-[HTMLタッグ]を選択します。-【HTMLタグ】: <bgsound src="http://www.xxxx.xx.jp/xxxxx/xxxxx/xxxx.mid" loop="1"> などを記述します。 [OK] を押します。(?)マークが作られます。  演奏品目の変更は、(?)を右をクリックします。  【属性】HTMLタグに表示された、 http://www.xxxx.xx.jp/xxxxx/xxxxx/xxxx.mid  部分の記述を新しい音源に変更します。  [OK] を押します。  Internet Explorer で開き、回線接続、自動演奏を確認します。  EMBEDとBGSOUNDタグの共存は可能、この場合、Internet Explorer では、ページオープン時の自動演奏が、EMBEDの随時演奏は双方できます。  BGSOUNDは、プレーヤーが表示されず、演奏中止ができない。  EMBEDは、プレーヤーが表示され鬱陶しく?、演奏中止が可能。   NetscapeNavigator のプラグインの起動時のWinサイズの指定方法は、サンプルページ サブWin にあります。

BGM(ページオープンで起動)Internet Explorer、NetscapeNavigator対応   音楽CDから *.wav ファイルを作成 : CD → wav CD2WAV32 wav編集 音声ファイル変換 1 分割結合

 

BGM(ページオープンで、 "♪"自動演奏)などの挿入方法、8種類。  ※:このページ内記述と、一部重複あり。

FrontPage Express、IBMホームページビルダー、txtエディターなどを使用する(例)  ※:サウンドファイルは、各人で準備します。(予めアップロードを完了し、IEのアドレス: http://www.xxxx.xx.jp/xxxxx/xxxxx/xxxx.mid などを入力、"♪"単独のアクセスを行いURLを確認しておきます。)    xxxx はめいめいの値を当てはめて運用。

1. BGM、ieのみ対応 【FrontPage Expressを使用し挿入する場合】

 (1) FrontPage Expressでの挿入は、開いたページで、右クリックします。
 (2) BGMの挿入/編集/変更は、【ページのプロパティ】バックグラウンドサウンド、場所: http://www.xxxx.xx.jp/xxxxx/xxxxx/xxxx.mid  などを記述します。  
 (3) 挿入するファイルと同じホルダーに heikin01.mid などが配置(アッピロード)済みなら上のURLは、ファイル名のみ heikin01.mid  でもOK!、以下共通。
 (4) 保存、オンラインで、このファイルを開き試聴できます。  

2. BGM、ieのみ対応 【IBMホームページビルダー使用】

  (1) 挿入場所で、[挿入]-[HTMLタグ]を選択します。
 (2) 【HTMLタグ】: <bgsound src="http://www.xxxx.xx.jp/xxxxx/xxxxx/xxxx.mid" loop="1"> などを、 <head> 部に記述します。 
 (3) [OK] を押します。(?)赤 マークが作られます。
 (4) 編集は、(?)赤 マーク をポント、右クリックし、属性変更で。
 (5) オンラインで、IBMホームページビルダーの下や上などの [プレビュー]タブを押さえ、試聴できます。

  IBMホームページビルダーV6使用

 (1)  [挿入] - [BGM] - [ファイルから] -音源ファイルを指定。 [開く]
 (2) リンクを修正します。 オブジェクトを右クリックします。  [属性の変更] -オブジェクト:  file:///C:/Program Files/IBM Hom……/xxxx.mid  (PCのファイルを指定しています。) ×
 (3) xxxx.mid (挿入先ファイルと同じホルダーにアップロード済み時はファイル名のみでも可)あるいは、
 (4) URL(http://www.xxxx.xx.jp/xxxxx/xxxxx/xxxx.mid)のいずれかを記述します。
 (5) (3)は、本人のPCのみ、オフラインでも演奏できます。  (4)は、オンラインで全ての人が演奏できます。

  IBMホームページビルダー200x使用

 (1)  [表示] - [サイトマネージャー] -  【サイトホルダー】 - [サウンド] - xxxx.mid などを選び左クリックします。 
 (2) □で囲まれたのを右クリック掴まえて 、文書中にドラッグ(曳きずり)します。
 (3) リンクを修正します。 オブジェクトを右クリックします。  [属性の変更] -オブジェクト:  file:///C:/Program Files/IBM Hom……/xxxx.mid  (PCのファイルを指定しています。) ×
 (4) xxxx.mid (挿入先ファイルと同じホルダーにアップロード済み時はファイル名のみデモ可)あるいは、
 (5) URL(http://www.xxxx.xx.jp/xxxxx/xxxxx/xxxx.mid)のいずれかを記述します。
 (6) (4)は、本人のPCのみ、オフラインでも演奏できます。  (5)は、オンラインで全ての人が演奏できます。

3.  BGM、Netscape/ie対応 【WordpadやSimpleTextなどのテキストエディターか、HP制作ソフトのHTML編集メニューで、HTMLを編集します。】

<body> 部の任意行に、下記のHTMLソースを記述、音源URL(http://www.……/….mid)などは、準備したもののURLを記述。    ※: 下記のHTMLソースなどは、Wordpadなどに一度ペースト後に挿入先にペーストします。

<!--webbot bot="HTMLMarkup" startspan --><script>
//specify FULL path to midi
var musicsrc="http://www.xxxx.xx.jp/xxxxx/xxxxx/xxxx.mid"
if (navigator.appName=="Microsoft Internet Explorer")
document.write('<bgsound src='+'"'+musicsrc+'"'+' loop="0">')
else
document.write('<embed src=\"'+musicsrc+'\" hidden="true" border="0" width="20" height="20" autostart="true" loop="0">')
//-->
</script><!--webbot bot="HTMLMarkup" endspan -->
 

4. ”EMBED”タグ、Netscape/ie対応 【txtエディター使用。】  

  ※:HTMLソース(タグ)を見ながらの直接編集のための、WordPad起動手順

<body> 部の任意行に、下記のHTMLソースを記述。

<body>
<!--webbot
bot="HTMLMarkup" startspan --><EMBED SRC="http://www.xxxx.xx.jp/xxxxx/xxxxx/xxxx.mid" WIDTH="137" HEIGHT="19" ALIGN="BOTTOM" autostart="false"><!--webbot bot="HTMLMarkup" endspan -->
</body>

  ※:注
  <!--webbot bot="HTMLMarkup" startspan --> <!--webbot bot="HTMLMarkup" endspan --> 部分は削除可能。
  HP作成ソフトで見ると [?] などで表示、コピー、ペースト、移動で簡単な配置換えが可能。
  演奏開始は、自動や、ボタンクリックで!。 プラグインサイズなど可変。
  挿入するファイルと同じホルダーに xxxx.mid などが配置(アッピロード)済みなら上のURLは、ファイル名のみ xxxx.mid でもOK!、以下共通。
  <EMBED SRC="http://www.…… などのwebファイルを参照する記述では、オンラインで演奏できます。
  <EMBED SRC="xxxx.mid"   などの実装ファイルと同じホルダーの xxxx.mid ファイルを参照する記述では、xxxx.mid が配置済みであればオフ・オンラインで演奏できます。

5. BGM、ieのみ対応 【txtエディター使用。】
  ※:演奏開始は、自動。  loop="1"=1回、-1=無限

<head> 部の任意行に、下記のHTMLソースを記述。

<head>
<bgsound src="http://www.xxxx.xx.jp/xxxxx/xxxxx/xxxx.mid" loop="1">
</head>

 

6. リンクのクリックで起動、Netscape/ie対応(音源のリンクのみ)【txtエディター使用。】

  ※:HP作成ソフトのハイパーリンク挿入メニュー使用も可。  <body> 部の任意行に、下記のHTMLソースを記述。

<a href="http://www.xxxx.xx.jp/xxxxx/xxxxx/xxxx.mid" target="_blank" title="ここのクリックで"♪"演奏します!。">ここのクリックで"♪"演奏します!。</a>

 

7. タイマーで音源を開く。 【txtエディター使用】

<head>部に下記のHTMLソースを記述。  Internet Explorerは、<body>部でも可。  タイマー(秒):10  音源:http://www./……/xxx.mid など。 

<META HTTP-EQUIV="REFRESH" CONTENT="10;URL=http://www.xxxx.xx.jp/xxxxx/xxxxx/xxxx.mid" target="_blank">

 

8. ほかに、EMBEDタグ、object法などが下Java、Java Script、DHTMLなどのサンプルページ! ⇒  Java・JavaScript・DHTML・XML・CSS サンプル   ⇒   サウンド・メディア・♪   に!。

 

EMBED法

MediaPlayer object法  

YAMAHA MIDPLUG object法

WMP/Windows Media Player 7 を自動的にWebページに埋め込む(例) → HTMLソース →  ”▼ ここからコピーします” あたり参照。

Windows Media Player 7.x の、Webの midiファイル 対応設定 : 【Windows Media Player】-[ツール]-[オプション]-[形式]-利用できるファイル形式 - [v]MIDIファイル。  AppleQuickTimeなどの設定後は、この [v]オーディオファイル のチェックを一旦外し、改めてチェックを入れます。

マルチメディアタグの詳細     なども。

ページ移動時も、"♪"演奏を持続させる方法 : 新しいWin4新しいWin、隠しフレーム などの常駐ページに"♪"演奏HTMLを記述するなどで。

 

9. RealPlayer を使用したサウンド再生

 Jp.RealNetworks.com > リソース&サポート  JavaScript やActiveXコントロールを使用して Web ブラウザーに RealPlayer を埋め込めます。 > カスタマイズ

 

10. WebにQuickTimeコンテンツを組み込む方法

 

11. Flashムービーファイルをタグ指定する方法   Macromedia Flash - パラメーターオプション

 

 

 

 7.6 ステイタスバーに 流れるメッセージ を表示してみる。このページのトップへ

これは、ステイタスバーへのスクロールメッセージを表示〔Internet Explorer4.x〜、NetscapeNavigator4..x〜対応〕 です。     ・ 編集方法 : 下記の(例)(*1)と、(*2)、を参考に太字部分の編集を行い、メッセージやスピードを変更できます。   説明のための太字、彩色自体に依存なし。     関連・詳細情報 : スクロール文字 - フォーム、流れるメセージ + Winサイズに応じてサイズを変えるタイトルやメッセージ。

 

(*1)  ステイタスバーへのスクロールメッセーシ (例)        挿入先の  <head> 〜 </head>  の、 部分にペーストします。

   HTMLの編集方法  hpb001.html をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕
JavaScript非作動(削除 → 作動)

(1) の実装用HTML

 

ステイタスバーに表示させるメッセージ

<XXscript LANGUAGE="JavaScript">

<!-- Begin

function scrollit(seed) {

var m1 = "    ページの読み込み完了しました …*。        おうっ …* (^ ^)     寒いか?。     元気か、おまえ!、 …*。     どうしたんだよ *〜〜        ちゃんと……ってんのか?。";

var m2 = "     あんたんち …… あるんだろう?。          無いよ、 ……まんだもん。 (^.^ ;)         だるいっしょ〜〜*。";

var m3 = "      どうよっ!、家庭教師 …?。      …… 学だって。         いい奴なの?。      ……って言うか、わりと面白いはなしで …* ";  

var m4 = "      ♪└|∵|┐♪└|∵|┘♪┌|∵|┘♪       ♪└|∵|┐♪└|∵|┘♪┌|∵|┘♪        ♪└|∵|┐♪└|∵|┘♪┌|∵|┘♪ *";

var msg=m1+m2+m3+m4;

var out = " ";

var c = 1;

if (seed > 100) {

seed--;

cmd="scrollit("+seed+")";

timerTwo=window.setTimeout(cmd,100);

}

else if (seed <= 100 && seed > 0) {

for (c=0 ; c < seed ; c++) {

out+=" ";

}

out+=msg;

seed--;

window.status=out;

cmd="scrollit("+seed+")";

timerTwo=window.setTimeout(cmd,100);

}

else if (seed <= 0) {

if (-seed < msg.length) {

out+=msg.substring(-seed,msg.length);

seed--;

window.status=out;

cmd="scrollit("+seed+")";

timerTwo=window.setTimeout(cmd,100);

}

else {

window.status=" ";

timerTwo=window.setTimeout("scrollit(100)",75);

}

}

}

// End -->

</script>

 

(*2)  ステイタスバーへのスクロールメッセーシ (例)          挿入先の  <body> タグ部分を編集します。 

   HTMLの編集方法   hpb001.html をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、編集し使用。
〔この列ペースト不要〕

(1) の実装は<body>を右に変更します。

 

<body onLoad="scrollit(100)">

 

ステイタスバーでなく任意の位置に WordPad で挿入できる、スクロール文字のサンプルscr2.htm もあります。 ローカル(=PC)への保存は、scr.htm を右クリックします。  [対象をファイルに保存] - 【ファイルのダウンロード】、【ファイル名を付けて保存】 - <保存する場所>: (C:sumple など)  <ファイル名>: *.htm(ここでは変更不要) [保存]ボタンを押す、などで行います。    PCに保存したファイルを、WordPad” で開き編集して使用できます。

 

 7.7 フレーム付きページ を使ってみる。このページのトップへ

8種類のフレームページや、インラインフレーム(IFRAME)のサンプルが ダウンロード できます。   このサンプルを使って”FrontPage Express” あるいは WordPad などで、簡単に高度なフレームページが作成できます。   Internet Explorer などで表示し、吟味します。    ダウンロード方法はそれぞれのページ中に記載しています。   詳細は、Java、Java Script、DHTMLなどのサンプルページ! ⇒  Java・JavaScript・DHTML・XML・CSS サンプル   ⇒  FRAME、DOM     、 フレーム サンプル 1  、 フレーム サンプル 2   を!。

 7.8 折りたたみリストを使ってみる。このページのトップへ

4種類の折りたたみリスト(ダイナミックHTML)が ダウンロード できます。  このサンプルページを使って”FrontPage Express” あるいは WordPad などで、簡単に高度なダイナミックHTMLページが作成できます。

折りたたみリスト2(初期折りたたみ・色) を Internet Explorer で表示し、吟味します。   ダウンロード方法はページに記載しています。   [?] をコピーして、貼り付けることで、”折りたたみリスト ……  ”を任意の場所に貼り付けられます。

 

 7.9 ホバーボタンを使ってみる。 このページのトップへ

ホバー ボタンを作成すると、スクリプトを作成しなくても、簡単に Web にアニメーションを追加することができます。  その他のボタンと同様に、ホバー ボタンには他のページまたはファイルへのハイパーリンクを設定できます。   ホバー ボタンは、ユーザーがクリックまたはホバー(ポイント)したときに、光らせたり、ユーザー設定の画像を表示したり、サウンド効果を再生することもできます。  ホバーボタンのサンプルページ を左クリックして Internet Explorer で表示します。  ダウンロード方法はページに記載しています。    PCに保存したファイルを、WordPad などで編集して使用します。

 

 8 ホームページ制作に 役立つページ いろいろこのページのトップへ

 ホームページ作成支援 FrontPage 2000体験版 FrontPage Express(ieに付属) FrontPage 2000体験版FrontPage Expressのセットアップ方法Microsoftサポート:Win98SEなどのIE5.5がインストールされている場合Microsoftサポート:WindowsME に FrontPage Express がインストールできない。 ホームページ制作ソフト をget !。  IBM ホームページ・ビルダー  2001体験版  ホームページ作成 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5   ホームページ作成ソフト  ホームページ作成支援 1  JustNet : ホームページ作成質問箱 ジャストネット  ホームページ紹介  ホームページ制作講座  ホームページパワーアップ

・ HTML 1 3  HTML3.2ガイド 1  HTML4.0仕様書邦訳計画 1  HTMLリファレンス 1 2 3  Super HTML4.0 Reference。    HTMLの色指定色見本RGB 。   とほほのWWW入門MSDN JapanMSDN samples。 W3C CSS Validation Serviceとほほのスタイルシート入門CSS リファレンス編 1CSS 解説編CSSの実際    CSS検索CSS講座*CSS解説CSS作成1

・ ホームページ素材 0 1 2 3 4 5 6 f  イメージ  サウンド  素材集L Y G、   216-Color Palette  CGI  BigNoseBird : FREE CGI   CoolText.com - Logo、Buttons  Dynamic Drive : DHTML  Font Pool : 1000 FONTS PC、MAC!  Free templates   Gif  GraphX Kingdom : icons、images!、   アイコン : Absolutely Free Icon Library Animation Icon icon download Free icon Download バナーなど   壁紙 1   Webpage Graphics and Animations 

↑ このページの先頭行へ。  =(・。・)= に還るWin/Mac関連ソフトのダウンロード(カテゴリー) メーカー あ〜Z ベンダー ゲーム MP3 このページのトップへ               

Copyright (C) 2007 (太陽風ДζΨΠ∀) All rights reserved   96/10/12 ??:??〜17/02/28 15:18:59 "Hello!!"  (1997/03/05〜)