ウェブページを作る前に、これらのいわゆる仕様を見てみましょう

ウェブページを作る前に、これらのいわゆる仕様を見てみましょう

この記事では、Web ページを作成する前に確認すべき、いわゆる仕様をいくつかまとめました。皆様のお役に立てれば幸いです。 この記事では、Web ページを作成する前に確認すべき、いわゆる仕様をいくつかまとめました。皆様のお役に立てれば幸いです。
01 ファイル名の命名基準<br />ファイル名の命名原則: 最もわかりやすい意味を実現するために、文字数を最小限にします。
一般的なファイルとディレクトリの命名規則:
各ディレクトリにはデフォルトのHTMLファイルが含まれている必要があり、ファイル名は一律index.htmです。
ファイル名は、小文字の英語、数字、アンダースコアの組み合わせとし、可能な限り英語に翻訳する必要があります。例: feedback (フィードバック)、aboutus (会社概要)
同じ種類の複数のファイルは、英語の文字と数字を使用して名前が付けられ、文字と数字は _ で区切られます。たとえば、news_01.htm などです。桁数はファイル数に比例し、不足する桁には 0 が埋め込まれることに注意してください。たとえば、ニュース項目が 200 件あり、18 番目の項目の名前が news_018.htm であるとします。
画像の命名規則:
名前は、アンダースコアで区切られた最初と最後の 2 つの部分に分かれています。
ヘッダー部分は、この画像の一般的な性質を示します。たとえば、ページ上部に配置される広告や装飾模様などの長方形の画像には「バナー」という名前を付けます。象徴的な画像には「ロゴ」という名前を付けます。ページ上に固定されていないリンク付きの小さな画像には「ボタン」という名前を付けます。ページ上の特定の位置に連続して表示され、同じ性質を持つリンク列の画像には「メニュー」という名前を付けます。装飾的な写真には「写真」という名前を付けます。タイトルを表すリンクのない画像には「タイトル」という名前を付けます。
末尾の部分は絵の具体的な意味を示すために使われ、英語の文字で表現されます。たとえば、banner_sohu.gif、banner_sina.gif、menu_aboutus.gif、menu_job.gif、title_news.gif、logo_police.gif、logo_national.gif、pic_people.jpg、pic_hill.jpg などです。
オンマウス効果のある画像の場合、2 つの画像の名前は、元のファイル名の末尾に「_on」と「_off」を追加して付けられます。
その他のファイル命名規則
js の命名原則は、関数に英語の単語を使用することです。たとえば、広告バナーの js ファイル名は ad.js です。
すべての CGI ファイルには cgi という接尾辞が付きます。すべてのCGIプログラムの設定ファイルはconfig.cgiです。
02 ディレクトリ構造の仕様<br />ディレクトリ構築の原則: 最小限のレベルで最も明確でシンプルなアクセス構造を提供します。
ディレクトリ名は小文字の英語の文字とアンダースコアで構成されます。 (命名規則を参照)
ルート ディレクトリには通常、index.htm とその他の必要なシステム ファイルのみが格納されます。各主要列には、対応する独立したディレクトリがあります。ルート ディレクトリの下の images は、すべてのページで使用されるパブリック イメージを格納するために使用され、サブディレクトリの下の images ディレクトリには、この列のページで使用されるプライベート イメージが格納されます。すべての JS、ASP、PHP などのスクリプトは、ルート ディレクトリの下の scripts ディレクトリに格納されます。すべての CGI プログラムは、ルート ディレクトリの下の cgi-bin ディレクトリに格納されます。すべての CSS ファイルは、ルート ディレクトリの下の style ディレクトリに格納されます。各言語バージョンは、別のディレクトリに格納されます。例: 簡体字中国語 gb
すべてのフラッシュ、avi、ram、クイックタイム、その他のマルチメディアファイルは、ルートディレクトリの下のメディアディレクトリに保存されます。
03 サイズ仕様<br />実際の状況に応じてサイズ仕様を調整してください。
このページは、800×600の標準解像度と766×430ピクセルの推奨サイズで設計されています。
原則として、ページの長さは3画面を超えてはならず、幅は1画面を超えてはなりません。各標準ページはA4形式、つまり8.5X11インチです。フルサイズのバナーは468*60px、ハーフサイズのバナーは234*60px、小さなバナーは88*31pxです。また、120*90と120*60も小さなアイコンの標準サイズです。画像を含むホームページ以外の静的ページはそれぞれ60Kバイトを超えてはならず、フルサイズのバナーは14Kを超えてはなりません。

04 ホームページのコード標準<br />ホームページのコードの鍵となるのは、ヘッド領域です。ヘッド領域とは、ホームページの HTML コードの <head> と </head> の間のコンテンツを指します。
ヘッドエリアに追加する必要があるロゴと著作権表示<!--- The site is designs by yourcompany,Inc 03/2001 --->
Web ページの表示文字セットの例:
簡体字中国語: <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
繁体字中国語: <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=BIG5">
英語: <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
オリジナル作成者情報 <META name="author" content="[email protected]">
ウェブサイトの紹介<META NAME="DESCRIPTION" CONTENT="ウェブサイトの紹介を記入">
検索キーワード <META NAME="キーワード" CONTENT="キーワード 1,キーワード 2,キーワード 3,...">
ウェブページの CSS 仕様 <LINK href="style/style.css" rel="stylesheet" type="text/css">
ページタイトル <title>これがページタイトルです</title>
ヘッド領域では、ロゴを追加して Web ページの有効期限を設定することができます。 Web ページの有効期限が切れると、サーバーから取得する必要があります。
<META HTTP-EQUIV="有効期限" CONTENT="水曜日、1997 年 2 月 26 日 08:21:57 GMT">
ブラウザがローカル マシンのキャッシュからページ コンテンツにアクセスできないようにします。
<META HTTP-EQUIV="プラグマ" CONTENT="キャッシュなし">
フレーム内で他のユーザーがあなたのページを呼び出すのを防ぐために使用されます。
<META HTTP-EQUIV="ウィンドウターゲット" CONTENT="_top">
自動ジャンプ。
<META HTTP-EQUIV="更新" CONTENT="5;URL=https://www.jb51.net">
5本の指の時間は5秒間続きます。
Web 検索ロボット ウィザード。検索ロボットに、インデックスを作成する必要があるページとインデックスを作成する必要がないページを指示するために使用されます。
<META NAME="ロボット" CONTENT="なし">
CONTENT のパラメータは、all、none、index、noindex、follow、nofollow です。デフォルトはすべてです。
お気に入りアイコン
<link rel = "ショートカットアイコン" href = "favicon.ico">
JS呼び出し仕様すべてのJavaScriptスクリプトは可能な限り外部から呼び出されるべきである
<SCRIPT LANGUAGE="JavaScript" SRC="script/xxxxx.js"></SCRIPT>
CSSの記述基準 すべてのCSSは可能な限り外部から呼び出す必要があります
<LINK href="style/style.css" rel="stylesheet" type="text/css"> 記述する際は、最初に再定義し、次に疑似クラス、最後にカスタマイズします(その中で、a:link、a:visited、a:hover、a:actived の順に記述する必要があります)。そうすることで、自分や他の人が読みやすくなります。
異なるブラウザでフォント サイズが一貫していることを確認するには、ポイント pt とピクセル px を使用してフォント サイズを定義することをお勧めします。pt は通常、中国語宋フォントの 9pt と 11pt を使用し、px は通常、中国語宋フォントの 12px と 14.7px を使用します。これらは最適化されたフォント サイズです。太字または宋フォントを使用する場合は、通常、11pt と 14.7px のフォント サイズを使用する方が適切です。
CSS推奨テンプレート。
<スタイル タイプ="text/css">
<!—
p { テキストインデント: 2em; }
body { font-family: "宋体"; font-size: 9pt; color: #000000; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px}
表 { フォントファミリー: "宋体"; フォントサイズ: 9pt; 行の高さ: 20px; 色: #000000}
a:link { フォントサイズ: 9pt; 色: #0000FF; テキスト装飾: なし}
a:visited { フォントサイズ: 9pt; 色: #990099; テキスト装飾: なし}
a:hover { フォントサイズ: 9pt; 色: #FF9900; テキスト装飾: なし}
a:active { フォントサイズ: 9pt; 色: #FF9900; テキスト装飾: なし}
a.1:link { フォントサイズ: 9pt; 色: #3366cc; テキスト装飾: なし}
a.1:visited { フォントサイズ: 9pt; 色: #3366cc; テキスト装飾: なし}
a.1:hover { フォントサイズ: 9pt; 色: #FF9900; テキスト装飾: なし}
a.1:active { フォントサイズ: 9pt; 色: #FF9900; テキスト装飾: なし}
.blue { フォントファミリー: "宋体"; フォントサイズ: 10.5pt; 行の高さ: 20px; 色: #0099FF; 文字間隔: 5em}
-->
</スタイル>
ブラウザの互換性を確保するには、bodyタグでページの背景を設定する必要があります <body bgcolor="#FFFFFF">
05 イメージデザイン基準<br />ウェブサイト全体のCIイメージには、以下の要素が含まれます。ロゴ
ウェブサイトには独立したロゴが必要です。ロゴは、ウェブサイトの中国語名と英語名を使用してデザインすることも、特別なパターンを使用することもできます。原理はシンプルで覚えやすいです。
ロゴは白黒とカラーではっきりと表示する必要があります。ロゴ画像の名前は「logo_ドメイン名.gif」です。例: logo_sina.gif
ロゴのベクター画像を提供するようにしてください。すべてのページでロゴの標準色を使用するようにしてください。Web サイトには独自の標準色 (メインカラー) が必要です。
原則として、標準色は 2 つ以下にしてください。2 つある場合は、1 つを標準色、もう 1 つを標準補助色にする必要があります。標準色は、216 の Web セーフ カラーの範囲内にする必要があります。標準色の正確な RGB 値と CYMK 値を提供する必要があります。可能な限り標準色を使用してください。標準フォント。Web サイトでは、標準フォント (ロゴや画像で使用されるフォントを指します) を定義する必要があります。
原則として、中国語フォント 1 つと英語フォント 1 つ (テキスト コンテンツ フォントを除く) の 2 つの標準フォントが定義されています。
標準フォントの名前とフォントライブラリを指定する必要があります。可能な限り標準フォントを使用してください。
06 コンテンツ編集基準<br />コンテンツは中国の「コンピュータ情報ネットワークの国際ネットワークの安全保護管理措置」の規定に準拠する必要があります。いかなる組織または個人も、国際ネットワークを使用して、次の情報を作成、コピー、参照、および配布することはできません。
(1)憲法、法律、行政規則の施行に対する抵抗を扇動し、または妨害すること。
(2)国家権力の転覆と社会主義体制の転覆を扇動すること。
(3)国家の分裂を扇動し、または国家の統一を損なうこと。
(4)民族間の憎悪や差別を煽り、民族の団結を弱体化させること。
(5)事実を捏造し、もしくは歪曲し、風説を流布し、または社会秩序を乱すこと。
(6)封建的迷信、わいせつ、ポルノ、賭博、暴力、殺人、テロを広め、または犯罪を扇動すること。
(7)公然と他人を侮辱したり、事実を捏造して他人を誹謗中傷すること。
(8)国家機関の信頼性を損なうこと
(9)その他憲法、法律、行政規則に違反する行為。
転載する場合は必ず原典を探し、原典に連絡を取った上で、短く、目を引く、斬新で魅力的なタイトルをつける必要があります。
伝統的な形式に合わせるため、本文の各段落の始めに 2 つのスペースを空けてください。段落間に 1 つのスペースを空けると、記事が明確になり、読みやすくなります。タイプミス、スペルミス、自作の文字は避けてください。簡体字版では繁体字を混在させないでください。翻訳された名前は、我が国の基準に従う必要があります。たとえば、singapore は「Singapore」と翻訳され、「星加坡」と翻訳することはできません。
全角数字記号(句読点を除く)は半角に変更する必要があります
07 新技術の使用仕様<br />新技術を使用するための原則は、ブラウザの互換性、ダウンロード速度の確保、最大数のユーザーへの対応です。
クッキーは、訪問者を識別、追跡、サポートするために使用されます。クッキーを通じて、ユーザーのアクセス パスを理解し、ユーザーの好みを収集して保存できますが、ユーザーがクッキーをオフにする状況を考慮する必要があります。クッキーを使用する必要がある場合は、包括的なソリューションを提供する必要があります。
Java は、クロスプラットフォームのオブジェクト指向プログラミング言語です。Web 上での主なアプリケーションは Java アプレットです。ただし、Java アプレットのダウンロード速度は遅いため、注意して使用してください。
サーバー側では、SSI 解析をオンにするのが最適ですが、SSI ネストをあまり使用しないでください。 SSI が使用できない場合は、代わりに include Library を使用できますが、効果は満足のいくものではありません。
Flash はすでに一般的なテクノロジであり、使用が推奨されています。
将来の XML との統合を容易にするために、新しい Web ページを作成するときはXHTML 標準を使用することをお勧めします。
XML シリーズのテクノロジはサーバー側で使用できますが、特に必要な場合を除き、クライアント側では推奨されません。追加のプラグインのダウンロードを必要とする Web ページでマルチメディア テクノロジを提供することは推奨されません。PHP、JSP、Java などのクロスプラットフォーム言語が推奨されます。CGI および ASP テクノロジは推奨されません。
08 ナビゲーションの基準<br />ナビゲーションはシンプルで明確である必要があります。リンクの階層は 3 階層以下にすることをお勧めします。ナビゲーションに使用するテキストは簡潔で、単語数は 1 行に制限する必要があります。ホームページの場合、各コラムの第 1 階層ページは相互にリンクされ、各コラムの第 1 階層ページとコラムの第 2 階層ページは相互にリンクされます。3 階層を超えるページの場合は、場所を示すナビゲーション バーをページ上部に設定する必要があります。最新の更新情報を強調表示し、更新時間または新しいロゴを追加します。継続ページには、前のページと次のページのボタンを含める必要があります。1 画面を超えるコンテンツの場合は、下部に先頭へ戻るボタンが必要です。3 画面を超えるコンテンツの場合は、先頭にアウトラインを設定し、テキスト内のアンカー ポイントに直接リンクする必要があります。
09 データベース使用仕様<br />サーバー上のデータベースに関連するすべての操作は、サーバー管理者のみが実行できます。
プログラム内でデータベースにアクセスする場合は、統一されたユーザーと統一された接続ファイルを使用してデータベースにアクセスします。
原則として、各列に対して 1 つのライブラリのみ作成できます。ライブラリ名は各列の英語名と一致している必要があり、ライブラリには複数のテーブルが含まれている必要があります。より大きく重要な列の場合は、別のデータベースを作成することを検討できます。データベース名は、列の英語名と一致する必要があります。
データベース、テーブル、フィールド、インデックス、ビューなど、データベースに関連する一連のものの名前はすべて、内容に関連する英語の単語を使用して命名する必要があります。単語で表現するのが難しい場合は、複数の単語をアンダースコア (_) で接続して (4 語以内) 名前を付けることを検討してください。 (命名規則を参照)
使用されなくなったデータベースとテーブルは削除する必要があり、削除する前にバックアップ (構造とコンテンツを含む) する必要があります。

<<:  CSS BEM 命名標準の概要 (推奨)

>>:  主キーを追加または変更するMySQL SQL文操作

推薦する

Vueはマーキースタイルのテキストの水平スクロールを実装します

この記事では、マーキースタイルのテキストの水平スクロールを実現するためのVueの具体的なコードを参考...

MySQL を解凍してインストールおよび完全に削除する方法の詳細なグラフィック説明

1. MySQLをインストールする(1)ダウンロードしたMySQLの圧縮ファイルをMySQLをインス...

layui をベースにしたログインページの実装

この記事の例では、ログインページを実装するためのlayuiの具体的なコードを参考までに共有しています...

MySQL 最適化技術における Limit クエリの最適化分析

序文実際のビジネスでは、ページングは​​一般的なビジネス要件です。次に、制限クエリを使用します。制限...

ブートストラップ学習体験のまとめ - CSS スタイル デザイン共有

プロジェクトのニーズにより、ブートストラップ フレームワークを慎重に学習する予定です。以前から少しは...

MySQL データベースの詳細な説明 (Ubuntu 14.0.4 LTS 64 ビットベース)

1. MySQLデータベースの構成と関連概念まず、MySQL はリレーショナル データベースである...

Navicat を使用して MySQL データベースをエクスポートおよびインポートする方法

MySql は、私たちが頻繁に使用するデータ ソースです。開発者が練習、小規模なプライベート ゲーム...

Hadoop を使用せずに Linux 環境に Spark のスタンドアロン バージョンをインストールする方法

ビッグデータはますます注目を集めており、ビッグデータのいくつかの構成要素に精通していないと、自慢でき...

テーブルタグ(TAGS)の詳細な紹介

テーブルの基本構文<table>...</table> - テーブルを定義し...

Nodejs と Socket.IO を組み合わせて Websocket の即時通信を実現

目次WebSocketを使用する理由ソケット.ioオープンソースプロジェクト効果プレビューアプリイン...

Nginx proxy_pass の / スラッシュによって引き起こされた殺人事件の詳細な説明

背景nginx サーバー モジュールは 2 つのサーバーにプロキシする必要があるため、異なるサーバー...

TypeScript で時間を費やした場所の概要

TS で時間を過ごした場所をいくつか記録します。 (まず、文句を言わせてください。stackover...

MySQL 5.7.18 バージョンの無料インストール構成チュートリアル

MySQLはインストール版と無料インストール版に分かれていますインストール版の拡張子はmsi、無料イ...

Dockerが新しいイメージをロードした後にリポジトリとタグ名が両方ともnoneになる問題を解決する

次のコマンドを使用できます: docker tag [イメージID] [名前]:[バージョン]例えば...

MySQL 文字セットの変更に関する実践的なチュートリアル

序文: MySQL では、システムが多くの文字セットをサポートしており、異なる文字セット間にはわずか...