ホームページ ウェブフロントエンド htmlチュートリアル Web デザインの標準サイズ_html/css_WEB-ITnose

Web デザインの標準サイズ_html/css_WEB-ITnose

Jun 24, 2016 am 11:40 AM

ウェブサイトは、インターネットの急速な発展に伴い急速に出現し、インターネットにアクセスするための主な基盤として、インターネットの頻繁な使用により非常に重要になりました。なぜなら、企業はWebサイトを通じて製品、サービス、コンセプト、文化を提示したり、特定の機能的なサービスを視聴者に提供したりする必要があるからです。したがって、Webデザインでは、まずサイトをデザインする目的とユーザーのニーズを明確にし、実用的なデザインソリューションを作成する必要があります。

Web デザインの標準サイズ:

1. 800*600 未満の場合、Web ページの幅が 778 以内に保たれる場合、高さはレイアウトとコンテンツによって決まります。

2. 1024*768 未満では、Web ページの幅は 1002 以内に保たれます。フレーム全体が表示される場合、高さは 612 ~ 615 になります。水平スクロール バーや垂直スクロール バーは表示されません。 (dwには標準値が設定されています。1024*768のページの標準サイズは955*600です。そのサイズに従ってください。)

3. psで作成したWebページは800*600の状態でも表示可能 Full画面では、ページの下部にスライド バーはなく、サイズは約 740*560 です

4. PS で作成された写真は、色などがインターネット上で異なります。なぜなら、256 個しかないからです。 WEB セーフ カラーは WEB で使用されます。PS の RGB または CMYK および LAB または HSB は色域が非常に広いため、当然色落ちが発生します

ページの標準は 800*600 の解像度で作成されています。実際のサイズは778*434pxです

ページ 原則として、長さは3画面を超えてはならず、幅は1画面を超えてはなりません

各標準ページはA4フォーマット、つまり8.5X11インチです

フルサイズのバナーは468*60px、半角バナーは234*60px、小バナーは88*31pxです

さらに、120*90と120*60も小さいアイコンの標準サイズです

ホームページ以外の各静的ページ画像バイト数は 60K を超えず、フルサイズのバナーは 14K を超えません

標準 Web ページ広告サイズ仕様

1、120*120、この広告仕様は製品またはニュース写真の表示に適しています。

2. 120*60、この広告仕様は主にロゴに使用されます。

3. 120*90、主に製品のデモンストレーションや大規模なロゴに使用されます。

4. 125*125、この仕様は写真効果を示すイメージ広告に適しています。

5. 234*60、この仕様はフレームまたは左右のホームページ内の広告リンクに適しています。

6. 392*72、主に多くの写真を含む広告バナーに使用され、ヘッダーまたはフッターに使用されます。

7. 468*60、最も広く使用されている広告バナー サイズで、ヘッダーまたはフッターに使用されます。

8. 88*31、主に Web リンクまたは小さな Web サイトのロゴに使用されます。

広告フォーマットの最大ピクセルサイズに関する注意事項

BUTTON120*60 (必ずGIFを使用してください)

215*50 (必ずGIFを使用してください)

7K

7K

バナー 760*100

43 0*5 025K

15K の静止画像はモーション効果を軽減する可能性があります

スーパーバナー 760*100 ~ 760*200 合計 40K の静止画像またはモーション効果を軽減します

巨大な広告 336*280

585*12035K

縦型広告 13 0*30025K

全画面広告 80 0 *60040K 静止画像、FLASH 形式である必要があります

グラフィックとテキストの混合、異なるチャンネル 15K

ポップアップ ウィンドウ 400*300 (GIF を使用してみてください) 40K

BANNER468*60 (GIF を使用してみてください) ) 18K

ホバーボタン 80*80 (GIF を使用する必要があります) 7K

ストリーミングメディア 300*200 (不規則な形状にすることもできますが、サイズは 300*200 を超えることはできません) 30K 再生時間は 5 秒未満 60 フレーム ( 1 秒/12 フレーム)

Web ページの広告サイズ ... 、内側ページの上部バー、サイズは 468*60 です

6. 内側ページの上部バー、サイズは 760*60 です

7. 内側ページの左上、サイズは 150*60 または 300*300 です

8. ダウンロードアドレスページ、サイズは 560*60 または 468*60 です

9. 内側ページの下部バー、サイズ 760*60

10. フロート左、サイズ 80*80 または 100*100

11. 右フロート、サイズ 80*80 または 100*100

IAB と EIAA が新しいオンライン広告サイズ基準をリリースしました

このうち6フォーマットとは、IABが昨年リリースした「Universal Advertising Package」の160x600、300x250、180x150、728x90の4フォーマットに加え、新たに発表された468x60と120x600(Optimus Prime)の2種を加えたもの。

推奨書籍:

10 の没入型 404 ページ

20 の主要な UI デザイン原則

2015 グラフィック デザイン ソフトウェア ランキング

著作権表示: この記事はオリジナルの記事ですブロガーによって作成され、公開されていません. ブロガーの許可なく転載することはできません。


このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、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衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

HTMLは初心者のために簡単に学ぶことができますか? HTMLは初心者のために簡単に学ぶことができますか? Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1)HTMLの学習曲線はスムーズで簡単に開始できます。 2)基本タグをマスターして、Webページの作成を開始します。 3)柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用​​できます。 4)豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTML、CSS、およびJavaScriptの役割:コアの責任 HTML、CSS、およびJavaScriptの役割:コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLでの開始タグの例は何ですか? HTMLでの開始タグの例は何ですか? Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

HTML、CSS、およびJavaScriptの理解:初心者向けガイド HTML、CSS、およびJavaScriptの理解:初心者向けガイド Apr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript:1)htmlStructuresContent、2)cssStylesit、および3)Javascriptaddsinteractivity、形成、

WebアノテーションにY軸位置の適応レイアウトを実装する方法は? WebアノテーションにY軸位置の適応レイアウトを実装する方法は? Apr 04, 2025 pm 11:30 PM

Y軸位置Webアノテーション機能の適応アルゴリズムこの記事では、単語文書と同様の注釈関数、特に注釈間の間隔を扱う方法を実装する方法を探ります...

Giteeページ静的なWebサイトの展開に失敗しました:単一のファイル404エラーをトラブルシューティングと解決する方法 Giteeページ静的なWebサイトの展開に失敗しました:単一のファイル404エラーをトラブルシューティングと解決する方法 Apr 04, 2025 pm 11:54 PM

GiteEpages静的Webサイトの展開が失敗しました:404エラーのトラブルシューティングと解像度Giteeを使用する

HTML、CSS、およびJavaScript:Web開発者に不可欠なツール HTML、CSS、およびJavaScript:Web開発者に不可欠なツール Apr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

CSS3とJavaScriptを使用して、クリック後に周囲の写真を散乱および拡大する効果を実現する方法は? CSS3とJavaScriptを使用して、クリック後に周囲の写真を散乱および拡大する効果を実現する方法は? Apr 05, 2025 am 06:15 AM

画像をクリックした後、散乱と周囲の画像を拡大する効果を実現するには、多くのWebデザインがインタラクティブな効果を実現する必要があります。特定の画像をクリックして周囲を作成してください...

See all articles