ホームページ ウェブフロントエンド CSSチュートリアル Webページアート制作仕様書_CSS/HTML

Webページアート制作仕様書_CSS/HTML

May 16, 2016 pm 12:12 PM

1. 全文検索が可能なページでは、インターネット上の検索エンジンが効果的に検索できるように、チャンネルのホームページの HTML の

の間にキーワードと説明メタ タグを追加する必要があります。ページを作成するときに、顧客の Web サイトを忘れずに追加してください。特に一般的なURLのページは必ずキーワードを追加してください~!これで宣伝もしやすくなりますよ!
例:



2. Web サイトを作成する場合、ページにはヘッダー ファイルとテール ファイルが統一されます。必ず単一の上部ヘッダー ファイルと下部テール ファイルを作成し、ページ内でそれらをネストしてください。これは簡単に変更できます。ネストされたコード:
1. (推奨)
2. (使用する場合は青い部分を変更するだけです)

3. プラグイン スタイルを統一して使用します。テーブル~!関連コード:
a:link a:visited a:hover a:actived の順序は、元の順序と一致している必要があることに注意してください。
最初に再定義、2 番目に疑似クラス、そして最後にカスタマイズです。
異なるブラウザでフォント サイズの一貫性を確保するには、ポイント pt とピクセル px を使用してフォント サイズを定義することをお勧めします。pt は通常、中国宋時代の 9pt と 11pt を使用し、px は通常中国宋時代を使用します。王朝 12px および 14.7px これは、太字フォントまたは Song フォントを太字にする場合、通常は 11pt および 14.7px のフォント サイズが適切です。

4. Web ページでは、大きなテーブル全体の使用を避ける必要があります
ブラウザーがページの要素を解釈するとき、Web ページがテーブル単位で 1 つずつ表示されるため、すべてのコンテンツはこの大きなテーブル内にネストされます。埋め込み 大きなテーブルに配置すると、訪問者が URL を入力すると、最初は長い間空白のスペースが表示され、その後、すべての Web コンテンツが同時に表示されるという結果が考えられます。これを行う必要がある場合は、 タグを使用して、大きなテーブルをチャンクで表示できるようにします。
テーブルのネストを 3 レベル以内で制御するようにしてください
5.幅と高さの書き方についても統一された仕様があり、1列のみのテーブルの場合はのタグに幅を記述し、
のタグに高さを記述します。複数の行と列があるテーブルの場合、幅と高さは最初の行または列の
タグに書き込まれます。つまり、同じセルのサイズを制御する高さと幅は 1 つだけであってはなりません。つまり、幅と高さの値を変更する場合は、それが有効であることを確認してください。変更はブラウザに表示されます。これを行うのは簡単ではなく、長い時間の練習と思考が必要です。

◆レイアウト:
1. テキストを安易に中央揃えにしたり、太字や斜体を使用したりしないでください。視覚的に乱雑であることに加えて、多くのブラウザでは斜体が適切に表示されず、文字の傾きによって生じる空白の変化が補正されません。
2. 各ページで異なるスタイルのアイコンを使用しないでください。
3. img行にaltタグを追加します。これにより、テキストベースのブラウザを使用している読者には [IMAGE] 以外のものが表示され、画像が正常に読み込まれなかった場合でもグラフィカル ブラウザを使用している読者には何かが表示され、HTML ファイルも非常にきれいに作成できます。
4. ボタンのように見えてもボタンとして機能しないものを使用しないでください。

◆Web カラーマッチングのテクニック
1. 1 つの色を使用します。これは、最初に色を選択し、次に透明度または彩度を調整して (より簡単に言うと、色を明るくしたり暗くしたりすることを意味します)、Web ページで使用する新しい色を生成することを指します。このようなページは色が統一されており、階層感があります。
2. 2色を使います。まず色を選択し、次にその対照的な色を選択します (Photoshop で Ctrl+Shift+I を押します)。こうして私のホームページは青と黄色で決まりました。ページ全体はカラフルですが、過度にカラフルではありません。
3. カラーシステムを使用します。簡単に言うと、ライトブルー、ライトイエロー、ライトグリーン、またはアースイエロー、アースグレー、アースブルーのような色を使用します。色を決定する方法は人によって異なります。Photoshop で前景色のカラー ボックスをクリックし、表示されるカラー ピッカー ウィンドウで「カスタム」を選択し、「カラー ライブラリ」でそれを選択します :)
4 . 黒と 1 色を使用します。たとえば、真っ赤なフォントに黒い枠線があると、非常に「人気」があるように感じられます。
Web のカラー マッチングにおけるタブーは次のとおりです。
1. すべての色を使用せず、3 色に制限するようにしてください。
2. 本文の内容を強調するために、背景と前のテキストのコントラストをできるだけ大きくする必要があります (複雑なパターンを背景として使用しないでください)
◆ 点滅すると頭痛がします
ロゴを使用すると、ホームページの特別セクションに訪問者を引き付けることができますが、訪問者にとっては頭痛の種にもなります。訪問者がサイトに戻ってくるようにしたい場合は、この方法は慎重に使用してください。
◆ アニメーションの装飾
アニメーションは 1 つだけ使用してください
「空白万歳」
空白を残すように注意してください。たとえ十分なスペースがあるとしても、Web ページを画像、テキスト、不必要なアニメーション GIF で乱雑にしないでください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、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)

スクリーンリーダーの分解:アクセス可能なフォームとベストプラクティス スクリーンリーダーの分解:アクセス可能なフォームとベストプラクティス Mar 08, 2025 am 09:45 AM

これは、フォームアクセシビリティについて行った小さなシリーズの3番目の投稿です。 2番目の投稿を逃した場合は、「ユーザーフォーカスの管理:Focus-Visible」をご覧ください。で

Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する Mar 07, 2025 am 11:33 AM

このチュートリアルでは、Smart Formsフレームワークを使用して、プロフェッショナルなJavaScriptフォームの作成を示しています(注:使用できなくなりました)。 フレームワーク自体は利用できませんが、原則とテクニックは他のフォームビルダーに関連しています。

WordPressブロックと要素にボックスシャドウを追加します WordPressブロックと要素にボックスシャドウを追加します Mar 09, 2025 pm 12:53 PM

CSS Box-Shadowおよびアウトラインプロパティは、WordPress 6.1でTheme.jsonサポートを獲得しました。実際のテーマでどのように機能するか、そしてこれらのスタイルをWordPressブロックと要素に適用するために必要なオプションのいくつかの例を見てみましょう。

GraphQLキャッシングの使用 GraphQLキャッシングの使用 Mar 19, 2025 am 09:36 AM

最近GraphQLの作業を開始した場合、またはその長所と短所をレビューした場合、「GraphQLがキャッシュをサポートしていない」または

最初のカスタムSvelteトランジションを作成します 最初のカスタムSvelteトランジションを作成します Mar 15, 2025 am 11:08 AM

Svelte Transition APIは、コンポーネントがカスタムSVELTE遷移を含むドキュメントを入力または離れるときにアニメーション化する方法を提供します。

ショー、Don' t Tell ショー、Don' t Tell Mar 16, 2025 am 11:49 AM

あなたのウェブサイトのコンテンツプレゼンテーションの設計にどれくらいの時間に費やしますか?新しいブログ投稿を書いたり、新しいページを作成したりするとき、あなたは考えていますか

上品でクールなカスタムCSSスクロールバー:ショーケース 上品でクールなカスタムCSSスクロールバー:ショーケース Mar 10, 2025 am 11:37 AM

この記事では、Scrollbarsの世界に飛び込みます。私は知っています、それはあまりにも魅力的ではありませんが、私を信じてください、よく設計されたページは手をつないで行きます

NPMコマンドは何ですか? NPMコマンドは何ですか? Mar 15, 2025 am 11:36 AM

NPMコマンドは、サーバーの開始やコンパイルコードなどの1回限りのプロセスまたは継続的に実行されるプロセスとして、さまざまなタスクを実行します。

See all articles