Webページ作成のヒント

Dec 16, 2016 pm 02:17 PM
Webページ制作

1. ホームページにビデオ アニメーションを追加する
次のコードを Web ページに追加するだけで、Windows ビデオ アニメーションまたはその他の RralMedia 形式のビデオ アニメーションをホームページに追加できます。
test.avi (40M バイト)このコードでは、dynsrc の値はアニメーション ファイルの名前であり、接尾辞 avi、ra、または ram が付いているファイルである必要があり、アニメーションが自動的に再生されるように、start の値は通常「fileopen」です。 ; width と height の値は、それぞれアニメーションが再生されるときの画像の幅と高さです (ピクセルまたはパーセントで表されます)。 alt の値はアニメーション ファイルの非表示の説明です。ページの左側からの画像の距離 ( (ピクセル単位)、vspace は画像とページの上部の間の距離 (ピクセル単位) です。ここで、test.avi ファイルを目的のビデオ ファイルに変更できます。必要。

2. ハイパーリンクの色を自動的に変更します
ご存知のとおり、Web ページに動的な効果を持たせたい場合は、通常、Web ページにアニメーション画像を挿入するか、Java を使用して動的な効果をデザインする必要があります。アニメーションは多くのバイトを消費します。Java を使用して動的効果を設計するには、特定の設計基盤が必要です。以下の著者は、Web ページが動的に見えるように、ページ上のハイパーリンクの色を連続的に変更する方法を提供します。この効果を実現するには、Web ページの

と の間に次のソース コードを貼り付けるだけです。具体的なソースコードは以下の通りです:
<script Language="Javascript"> 
<! - - Begin 
function initArray( ) { 
for ( var i = 0 ; i < initArray.arguments.length; i + + ) 
{this[i] = initArray.arguments[i];} 
this.length = initArray.arguments.length; 
} 
var colors = new initArray ("red","blue","green","black","purple","blue","tan","red");delay = .5; // seconds
link = 0 ; 
vlink = 0 ; 
function linkDance ( ) { 
link= (link + 1)%colors.length; 
vlink=(vlink+1)%colors.length; 
document.linkColor = colors[link]; 
document.vlinkColor = colors[vlink]; 
setTimeout("linkDance( )",delay*1000);} 
linkDance( ); 
// End - -> 
</script>
ログイン後にコピー

3. ウェブページのオンライン背景画像をいつでも変更できます
私たちが普段見ているウェブページの背景画像は、一般に、ウェブページの背景パターンを自分で変更する権利を持っていません。 Web ページを作成して、訪問者が背景画像を自分で変更できるようにすることはできますか?このアイデアがある場合は、以下のコードを使用すると、そのような機能を簡単に実装できます。必要なのは、以下に提供されているソース コードをコピーして、独自の Web ページの HTML コードの適切な位置に貼り付けるだけです。とても便利とは言えませんが、うまく使えば間違いなく素晴らしいものになるでしょう。さて、まずはコードを見てみましょう。
<フォーム>
<select onChange="document.body.style.background=this.options[this.selectedIndex].value">
<option value="url('背景1のアドレス')" selected>最初の1つ背景
<option value="url('背景2のアドレス')"> 2つ目の背景
<option value="url('背景3のアドレス')"> 3つ目の背景
....他の選択形式は上記の通りです...
</selected>
</form>
このコードを使用する場合、最初に必要な背景を自分で選択または作成し、次に各背景画像の URL を置き換えることができます。上記のコードを使用すると、背景画像をランダムに簡単に変更できます。

4. 画像とブラウザウィンドウ間のシームレスな接続
Web ページに画像を挿入するとき、画像とブラウザウィンドウの境界線の間のシームレスな接続を実現するのが難しいことに気づくことがあります。ちょっと距離が不自然です。では、画像と閲覧ウィンドウとの間のシームレスな接続を実現して、画像がウィンドウの背景に自然に溶け込むようにするにはどうすればよいでしょうか?実は、挿入した画像がブラウザの境界線と隙間ができてしまうのは、ページ余白を設定していないためです。シームレスな接続を解決するには、ページソースの

タグに以下のソースコードを追加します。 code: topmargin = "0" leftmargin = "0" ここで、topmargin はブラウザ ウィンドウの上部からの距離を表し、この時点では 0 に設定されており、画像はブラウザ ウィンドウにシームレスに接続されます。 leftmargin="0" は、ブラウザ ウィンドウの左側からの距離が 0 であることを意味します。

5. 画像を表示するにはサムネイルを使用します
画像の送信速度が比較的遅いことを考慮して、Web ページに大きなサイズの画像を配置する必要がある場合は、訪問者が画像が何を表しているかをすぐに知ることができます。コンテンツについては、サムネイル表示方式を採用してもよいでしょう。つまり、元の画像を表示する前に、ブラウザがすばやく表示できるように、まず解像度が低く、サイズが小さい画像を「低ソース」として提供し、その後、元の画像を徐々に高画質または大きいサイズで表示します。 。ユーザーは、サムネイルに表示されているコンテンツが希望のものでない場合、待たずに直接他のコンテンツにアクセスできるため、閲覧効率が向上します。サムネイル表示を実現する具体的な方法は、WebページのHTMLソースファイルに以下のコードを追加します。
<img src="view.gif" lowsrc="PReview.gif" width="x" height="y" >
ここで、view.gif は元の画像、preview.gif はサムネイル、width は元の画像の幅、height は元の画像の高さです。

6. オンサイト検索エンジンを確立する
ページのコンテンツが増加し続けるにつれて、サイト内の特定のコンテンツを迅速かつ正確に取得することがますます困難になってきています。訪問者が欲しい情報をすぐに見つけられるようにするには、サイト上に検索エンジンを設置する必要があります。サイト検索エンジンを構築するには、Web サイトのネットワーク ゾーン http://netzone.swatou.com/personal/ に直接リンクし、「サイト エンジンに申請」をクリックして申請フォームに記入し、サイト ページ データベースを構築します。要求に応じ 。

7. バックグラウンド ミュージックを再生し続けます。バックグラウンド ミュージックのあるページを開くと、メロディアスな音楽が聞こえますが、マウスを使用してページ内のリンクをクリックしたり、別のページにアクセスしたりすると、メロディアスな音楽が聞こえます。を開くとBGMの再生が突然止まってしまいますが、特定のページのBGMを流し続ける方法はあるのでしょうか? 答えは「はい」です。実際に必要なのは、上部フレームと下部フレーム構造を持つ Web ページを作成し、下部フレームのページ コンテンツにサウンド ファイルを含め、下部フレームの幅を 0 ピクセルに設定し、上部フレームの幅を 0 ピクセルに設定することだけです。フレームには通常のページのコンテンツが含まれています。下のフレームはウィンドウのスペースを占有しないため、BGM を含む Web ページを離れるときに、下のフレームのページのコンテンツを配置するのと同じです。変化していない場合、サウンドは引き続き再生できます。

編集の都合上、すべてのコードの山括弧が全角になっておりますので、申請の際は半角に変更してください。

上記は Web ページ制作のヒントの内容です。その他の関連記事については、PHP 中国語 Web サイト (www.php.cn) をご覧ください。


このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

< Progress>の目的は何ですか 要素? < Progress>の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

この記事では、HTML< Progress>について説明します。要素、その目的、スタイリング、および< meter>との違い要素。主な焦点は、< Progress>を使用することです。タスクの完了と< Meter> statiの場合

< datalist>の目的は何ですか 要素? < datalist>の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

この記事では、HTML< Datalist>について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

< meter>の目的は何ですか 要素? < meter>の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

この記事では、html< meter>について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化< Meter> < Progress>およびex

ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? Mar 20, 2025 pm 05:56 PM

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? Mar 12, 2025 pm 04:05 PM

この記事では、html5< time>について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

< iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? < iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

この記事では、< iframe>外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

See all articles