グラフィックとトラフィック
Webページのデザインの美しさと表現力の要件は、最新のWebホスティングの技術的機能と常に矛盾しています。 したがって、サイトデザイナーは、デザイナーとユーザーの仲介役となり、視覚的な魅力とWeb上での情報配信の合理的な速度とのバランスを厳密に維持する必要があります。 この問題をうまく解決するには、インターネットで使用されているすべてのグラフィック形式を理解し、それらの違い、適用分野、および使用パターンを理解する必要があります。
インターネットで採用されている多数のフォーマットやプロトコルに対応し、構築する 自分のページ、特定の目的に最も適したものを選択する必要があります。 一部のフォーマットは1つのブラウザのみに固有である場合がありますが、他のフォーマットには特別なプラグインが必要です。 さまざまな形式から、人気のあるサイトの作成者が最も頻繁に使用し、ユーザーに受け入れられている形式のみを選択しました。
GIFとJPEGは最も人気のある画像形式の2つであり、長い間WWWで使用するための事実上の標準となっています。 どちらも非常に普遍的で、ほとんどのブラウザで読み取られ、特別なものは必要ありません ソフトウェア（または追加のモジュール）。 GIFとJPEGはラスター画像形式であり、それぞれ、そのような画像を画面に表示するときに固定形式（解像度）を決定します。 （一部のブラウザで提供されている）拡大縮小しようとすると、ビットマップ（ピクセル）画像の品質が大幅に低下します。 さらに、8ビット（256色）GIF形式の場合、カラーパレットの選択は深刻な問題です。
ベクターグラフィックス形式は、Webでの使用にはるかに魅力的です。 ビットマップとは異なり、ベクターグラフィックは、データの数学的（幾何学的）表現に基づいています。 このような画像は、保存/送信の点ではるかに小さく、簡単に拡大縮小でき、変換中に品質が実際に失われることはありません。 残念ながら、ベクター形式はインターネットではまだほとんど使用されていませんが、標準はすでに作成されており、設計者の関心を引くはずです。
比較的最近、いくつかのベクター標準が提案されており、PGMLおよびVML形式は現在World Wide Web Consortium（W3C）によって検討されています。 ただし、VMLを促進するMacromediaは、長い間そのベクター形式を開いてきました。 Shockwaveフラッシュ他の開発者に提供し、人気のあるブラウザ用にこの形式でグラフィックを表示するための追加モジュールを実装しました。
ただし、新しいツールが必ずしもすべてのアプリケーションに最適であるとは限りません。 インターネットで公開されている最も一般的な画像は、依然としてデジタル写真、図面、スキャンされた写真です。これらは非常に手間がかかり、ベクター形式に変換することはほとんどお勧めできません。
したがって、フォーマットの選択は、最終的にはタスクと、ニーズにより適した画像に依存します。 ターゲットオーディエンス、 それはあなた次第です。
GIF-デザインのフォーマット
CompuServeは当初、パーソナルコンピュータの標準グラフィックスの限られた容量でのインタラクティブアプリケーション用のGIF形式を意図していました。 これは元々4ビットで、後に最大256色をサポートする8ビットのカラーマップビットマップ形式でした。 この形式の重要な利点の1つは、画像を特定のパレット（色のセット）にインデックス付けできることですが、JPEG画像をパレットに「リンク」することはできず、「正しい」表示が常に可能であるとは限りません。 このプロパティは、パレットインデックスを使用して、このシステムまたはそのシステムが動作する色深度に関係なく、例外なくすべてのプラットフォーム（PC、Mac、Web-TVなど）の画像レンダリングを最適化する開発者にとって特に重要です。 この汎用性は、WindowsとMacOSなどの両方で使用されるすべての一般的な色を含む216色の限られたパレットで実現できます。 ユニバーサルパレットでサイトを設計すると、一貫性のあるクロスプラットフォームでハードウェアに依存しない表示が保証されます。 さらに、GIF形式はロスレス圧縮方式を使用します（単純な繰り返しエンコードアルゴリズムを使用：同じ色のバイトのシーケンスが2バイトのワードに置き換えられ、そのうちの1つには塗りつぶしパターンが含まれ、2つ目は数を決定します繰り返しの）、したがって、この形式のグラフィックデータは、圧縮と回復の過程で情報を失うことはありません。
ただし、これらの組み込みの色制限のために、GIF形式は、白黒スキームなどの限られた数の色の画像、または漫画などの1つの色の広い領域を含む画像にのみ使用できます。単色のフレームまたはデジタル図面。塗りつぶし。 もちろん、いわゆるカラートーンのスムージング（ディザリング）を適用することで任意の画像をGIF形式で保存できるため、かなり適切な品質が得られますが、この場合、適用後にファイルサイズが大幅に増加するリスクがあります。上記のメモリ圧縮の繰り返し（縮退した場合、画像に隣接する繰り返しがない場合、圧縮されていない元のファイルと比較して、ファイルが正確に2倍に増加します）。
したがって、GIF形式の主な利点は、ロスレス圧縮の使用と、明確な境界線と厳密な色遷移を備えた色の単色領域の経済的な保存です。 JPEG形式は、圧縮レベルに応じて、そこで塗りつぶされた領域が破壊され、鋭い色の変化が滑らかになるか、色あせてしまうという点で説明されている形式とは異なります。
GIF形式を選択するための主な基準：同じ色の大きな領域を持つPhotoshopやPainterなどのグラフィックパッケージで画像を描画した場合、または既存の画像を処理して高コントラストを維持したい場合（たとえば、テキストを表示するとき）、それをこの形式で保存します（特に白黒または色の悪い図面の場合）。
写真、ビデオフレーム、またはスムーズな色遷移（グラデーション）を備えたその他のフルカラー画像の場合は、JPEG形式を使用します。
連続トーンのGIF画像を保存しようとしている場合は、画像の準備プロセス（固定パレットに変換する場合）とGIFの圧縮で多くの情報を破棄する必要があることを覚えておくことも重要です。この方法は非常に非効率的であるため、経済的にも損失が発生します（人件費とファイルサイズの両方の点で）。
とりわけ、GIF形式は、いわゆるインターレース外観（インターレース）を提供します。これは、受信の最初の段階でチャネルが遅いユーザーが画像の内容を評価するのに役立ちます（効果は、不鮮明な画像の段階的な描画に似ています）写真）とその完全な送信に必要な時間、そして結果としてそれを取り続けるかどうか、またはそれを拒否する方が良いかどうかの決定を受け入れます。 ただし、プログレッシブJPEGとは異なり、ここでの効果は実際よりも心理的です（図を参照）。
また、GIF形式の重要な利点の1つを覚えておく必要があります。これは、すべての欠点があっても省略できない場合があります。これは、透明度（拡張GIF89a）のサポートであり、長方形以外の輪郭のシルエットを表示できます。既存の背景。 GIF形式の透明度は基本的に実装されます。1つの色（通常は背景）が透明として割り当てられます。 この利点は、ページデザインでボタンやアイコンを作成するときによく使用されます（JPEGは透明度のサポートを提供していません）。
結論として、私たちは次のように言うことができます：GIF- 最良の選択既存のハードウェアとソフトウェアの間の効果的な妥協点を実現し、画像を複数のブラウザや不明なプラットフォームで表示する場合は、最大216色の8ビットGIF画像にインデックスを付ける機能が不可欠です。
JPEG-写真およびビデオフレームの形式
JPEG形式の名前は、80年代後半から90年代初頭にこの標準を作成したJoint Photographic Experts Group Committee（Joint Committee of Photographic Experts）の略語に由来しています。 JPEG形式は、非可逆圧縮アルゴリズム（離散コサイン変換）に基づいています。これにより、画像が領域（通常は8x8ピクセルの正方形）に分割され、その中で色の分布が数学関数とこの関数は保存され、フォームを復元できます。 当然、品質がいくらか低下し（画像の置換に使用される関数の複雑さに応じて）、復元後は実際の画像ではなく、数学的な「代理」が得られます。 ただし、オリジナルの品質と圧縮の程度によっては、品質の低下が視聴者に完全に見えない場合があります。 ただし、GIFに対するJPEGの主な利点は、GIFが8ビット（256色）しかないのに対し、JPEGは24ビットであり、最大1,670万色を表示できることです。
このため、フルカラーJPEGは、GIFよりもはるかに多くのビデオ情報を自然に再生します。 この形式は、実際の画像（スキャンした画像または デジタル写真、およびデジタル化されたビデオフレームまたはレンダリングされた3Dコンピュータグラフィックスシーン。
JPEGのもう1つの利点は、GIFとは異なり、元の画像に適用される圧縮の量を設定できることです。これにより、サイズと品質の必要なバランスを維持できます。
JPEGの圧縮率は、使用する画像編集プログラムによって大きく異なりますが、Webページでは通常10：1または20：1（元の画像に対するボリュームの比率で表される）の比率を使用し、通常は許容できる品質を提供します。 それにもかかわらず、100：1の極端な値まで画像を圧縮することは可能です（もちろん、品質が大幅に低下します）。
したがって、JPEG形式の写真で作業する場合、1670万色の色合いで24ビット画像を保存する機会があり、圧縮中に品質が低下しても、256色のGIFよりもはるかに元の画像と一致します。 。表現。 この場合、必然的な品質の低下は、元の画像のサイズ、品質、およびタイプに大きく依存します。
さらに、JPEGを使用すると、いわゆるプログレッシブディスプレイを定義できます。つまり、ロード時に画像の「大まかな」表現が画面にすぐに表示され、より多くの情報が受信されると、徐々に改善されます（同時に、ダウンロードが完了する前でも供給されている素材の本質について必要なアイデアを得ることができ、任意の段階でプロセスを中断することができます。これにより、ネットワークコンテンツの閲覧時間を大幅に節約できます）。
これらのツールは自由に使用できます。このような段階的な表示は、チャネルの輻輳との戦いに役立ちます。 プログレッシブJPEG（インターレースGIFとは対照的に）の唯一の問題は、古いブラウザがそれをサポートしていない可能性があることです。
PNG-ユニバーサルラスターノベルティ
次世代のラスター形式であるPNGは、JPEGとGIFの両方の最高の機能を採用し、画像を提供する独自のアプローチを追加しました。これにより、同じ画像のさまざまなバージョンを低、中、高の解像度で埋め込むことができます。 1つのファイル。
PNG（Portable Network Graphics）形式は、W3Cコンソーシアムによって標準として承認された比較的新しいラスターグラフィック形式であり、GIFとJPEGの両方の「廃止された」形式を徐々に置き換える必要があります。 PNGは、カラーインデックス（最大256色）、24ビットカラーと48ビットカラー（True-Color）の両方のサポート、および透明チャネル（アルファチャネル）の両方を提供し、さらに、従来のビットマップストレージよりもはるかに効率的です。フォーマット。
フルカラー画像の圧縮アルゴリズムは、品質がJPEGを上回り、限定されたインデックス付きパレット（最大256色）のサポートにより、新しい形式は、GIF形式で実装されたものよりも10〜30％優れたロスレス圧縮を実行します。どんな場合でも使用するのに最適です。 残念ながら、新しいフォーマットでは、圧縮率を高くする代わりに画質を犠牲にすることはできません。 JPEG形式.
PNGの透明度のサポートは、GIFとは異なり、本格的です。つまり、半透明の画像や境界線を作成できるため、GIFファイルで透明度を使用する場合に解決するのが非常に難しい「きれいな」境界線の問題はここで簡単に解決できます。 。
ただし、PNGによって提供されるすべての改善にもかかわらず、新しい形式は、Webサイトの設計者とソフトウェアメーカーが新しい形式で画像をレンダリングし、公開の準備をするために使用した場合にのみ有効になります。 それまでの間、NetscapeNavigatorとMicrosoftInternet Explorerの両方でこの形式のサポートが最近含まれているにもかかわらず、インターネット上のどこでもPNG画像を見つけるのはかなり困難です。
そして彼らは 最新バージョン PNGをサポートしているので、非常に限られた方法でサポートしています。 現在、完全なPNGファイルを見たいユーザーのための唯一の解決策は 自己インストール外部モジュール（PNG Liveと同様）。
どうやら、開発者は速度を落とし、ユーザーが新しいフォーマットに完全に移行するのを待っているようです。 まあ、健全な保守主義は決して害にはなりませんが、少なくとも既存のGIF形式のすべての使用法を置き換えて、徐々にPNGに移行することを強くお勧めします。
ベクトル表現
JPEG、GIF、およびPNGはどちらも、画像の離散（ピクセルまたはドット）表現に基づくラスター形式ですが、ベクトル形式は数式（形状の幾何学的表現）に基づいています。 ベクターグラフィックスは、特にダイアグラム、テキスト、および産業用グラフィックスに関して、ラスターグラフィックスに比べて大きな利点を提供します（そして、フォーマットの費用対効果はインターネットにとって非常に重要です）。
したがって、最初の利点は、ビットマップと比較してベクトル画像のサイズが大幅に小さいことです。これは、画像のすべてのピクセルが記述されているわけではなく、図全体が記述されているためです（たとえば、円を設定するには、3〜4個の数値を転送する必要があります。半径、中心座標、場合によっては、線のタイプまたは太さとその属性）。 ベクトル表現を記述する数式は、個々のピクセルとその属性よりもはるかに少ないスペースで済みます。
ベクトル表現のもう1つの重要な利点は、画像の解像度や鮮明さを損なうことなく、画像を事実上無制限に拡大縮小（またはその部分を詳細化）できることです。 ベクトル表現を特定のパレット、プラットフォーム、ハードウェア、またはデザインに適合させるための努力は必要ありません。 圧縮方式と表示品質は問題なく一致しました。
ただし、すべてではありません ビットマップベクトル形式に変換できます（たとえば、写真、スキャンした画像、ラスター描画はベクトル化が困難です）。 しかし、特別に準備されたベクター図面（線画、ピクトグラム、テクニカルイラストレーション、地図、情報グラフィックなど、歴史的にベクターであるもの）は、インターネット上で公開するためにラスター化するのはばかげています。これは今日の場合です。
ラスター以外の表示方法がなく、PDF形式でファイルを表示するためのプラグインが必要な柔軟性を提供せず、すべてのコンテンツを1つの形式（PDF）に保存する必要があるため、ワールドワイドWebでのベクターグラフィックの表示に関する問題が発生しました。
追加のソフトウェアなしでベクターグラフィックを従来のHTML形式にシームレスに埋め込むことができるように、W3C標準委員会は現在2つの新しいベクター標準を検討しています。PGML（Precision Graphics Mark-up Language）とVML（Vector Mark-up Language）です。 PGMLはAdobeSystems、IBM、Netscape、およびSun Microsystemsによってサポートされており、VMLはMicrosoft、Hewlett-Packard、Autodesk、Macromedia、およびVisioによってサポートされています。 どちらの標準もXMLマークアップ言語の拡張に基づいており、HTMLの後継としてWebでの使用が促進され、将来の使用のためにW3Cによって推奨されています。
ただし、プラグインはすでに利用可能ですが、現在、どのブラウザもベクターグラフィックス標準をサポートしていません。 今日Web上で静的なベクター画像を表示する最も一般的な方法の中には、MacromediaのSWF（Shockwave Flash）形式と、まだ過小評価されているXaraFlare形式があります。
フレア- 英断、これにより、ページの詳細レベルをほぼ無制限に上げることができるベクター画像を含めることができますが、そのサイズはShockwaveFlashに匹敵します。 これは、画像を表示するために追加のモジュールを使用することが非常に不便であるということではありませんが、ページでそのようなツールを使用する場合は、ユーザーにこれについて警告し、ユーザーがに行く前に適切なモジュールをダウンロードする機会を与えるようにしてくださいこれらの要素を含むページ。 短期的には、これはもちろんブラウジングプロセスを遅くします 新しい利用者、しかし徐々に、対応するツールがブラウザの次のバージョンに最終的に含まれ、初心者が追加のモジュールを必要としなくなるまで、ますます多くの支持者を獲得するでしょう。
アニメーション、双方向性、相互作用
一般的に、GIF画像は1つのファイルに特別なスタックとして配置でき、結果の「ムービー」（フリップブック）は、単純なビットマップアニメーションを作成することで再生できます。 NetscapeとMicrosoftはどちらも、ブラウザの3番目のバージョンから「アニメーション」GIF形式をサポートしているため、Web上での存在を避けることは困難です。 このようなGIFスタックを作成できる多数のGIFアニメーターが広く使用されています（商用および公開の両方）。 ただし、GIF形式の「活性化」は管理不能につながる可能性があります ファイルサイズ、このようなスタックの各「レベル」は個別のGIF画像であるため、コンピュータアニメーションの通常の1秒あたり15フレームは、数え切れないほどのキロバイト数を「生成」する可能性があります。
JavaまたはJavaScriptと組み合わせて、ユーザーに応答するインタラクティブなアニメーションを作成することもできます。
それでは、Webアニメーションとインタラクティブなユーザーインタラクションの他のソリューションを見てみましょう。ここでの主な役割は、ShockwaveおよびFlashプログラムで市場に参入し、製品を継続的に改善して効率を高めているMacromediaが引き続き果たしています。ユーザーやデザイナーのニーズに応じて。
もともとMacromediaDirectorのフォーマットとして作成された、Shockwaveは、インターネットで使用するために特別に作成されたインタラクティブでグラフィックなコンテンツを作成することを主な目的としたプロトコルのファミリーです。 そしてShockwaveFlashは一般的に ユニークな楽器そして最も より良い方法アニメーションを作成してWebページに公開します。 Shockwave Flashは、非常に小さなファイルを生成し（主にベクトル表現形式を使用するため）、他の形式と比較して、準備の点で最も便利です。
このようなアニメーションをページに公開するときは、ユーザーにこのことを通知することを忘れないでください。そうすれば、ユーザーは事前に追加のモジュールを購入して、ダウンロードを待つ面倒な準備をすることができます。 ただし、NetscapeNavigatorと インターネットエクスプローラ基本パッケージでもFlashアニメーションのビューアがあります。 Netscapeは、ナビゲーターの将来のバージョンで、コードレベルでもFlashがこのようにサポートされることを確認しています。
最終決定はあなた次第です
そのため、Webコンテンツの表示に対する態度は変化しており、新しいデータ形式とそれをサポートする開発ツールが登場しています。 ただし、古い形式（グラフィックを表すための形式はGIFとJPEG）は依然として非常に人気があります。 これらはほとんどすべてのブラウザでサポートされており、ほとんどの開発者はそれらを使用した豊富な経験があります。 画質とファイルサイズのバランスを確保するには、特定のアプリケーションに適した形式を使用することが重要です。 たとえば、1つのGIF画像は、JPEG画像よりも多くのスペースを占有し、低品質の結果を生成する可能性がありますが、別のGIF画像はその逆になります。
ただし、ビットマップイメージを表現する場合は、PNGの方が適しています。さらに進んでベクターイメージを使用しようとすると、MacromediaのShockwaveFlash形式がすでに利用可能になっています。
SWF（Shockwave Flash）形式は一般的に使用されていませんが、内部ベクトル形式です。 フラッシュプログラム Macromediaによる（CD-ROMの「MacromediaFlashチュートリアル」を参照）ので、独自の画像またはアニメーションを取得するには、Macromediaから適切なマルチメディアパッケージを購入する必要があり、ユーザーは視覚化するための追加モジュールをインストールする必要があります結果。 したがって、Webページにベクター図面を配置するだけでは、多くの不便を克服する必要があります。
それにもかかわらず、他のベクター形式が進行中であり、まもなく標準になります。
ComputerPress 5 "1999
単一のタグを使用して、Webページのテキストに画像を挿入します。 （表P1）。 このタグの属性は、ページに配置される画像のすべてのパラメータを設定します。 必須は、グラフィックファイルのアドレスと名前を指定するSRC属性です。 SRC属性が設定されていない場合、空白の画像アイコンのみが表示されます。
タグ構造 SRC属性は次のようになります。
.
もしも グラフィックファイル名前付きInstituteはWebページと同じフォルダーにあり、配置するには次のように記述します。
.
ファイル名形式
D：\ Collection \ Cities \ MINSK.GIFにあるMINSKという名前のグラフィックファイルを配置するには、次のように記述します。 .
タグ付き Webページは、インターネット上の別のコンピューターにあるグラフィックファイルをホストします。
図1に示す当研究所の写真を掲載したWebページを作成します。 4.1、次のHTMLコードを入力する必要があります。
当研究所
米。 4.1。 研究所の写真が掲載されたWebページ
上記の例では、写真の高さ（HEIGHT）は200ピクセル、幅（WIDTH）は300ピクセルです。 写真を配置するために、中央揃えで段落が作成されます。
水平線
Webページへの水平線の配置は、単一のタグを使用して実行されます
。 SIZE、WIDTH、COLOR、およびALIGN属性は、それぞれ線の太さ、幅、色、および配置を変更します。
水平線の配置を説明するいくつかの例を考えてみましょう。
1.
-2ピクセルの太さのページ全体の水平線。
2.
WIDTH = "200" ALIGN = "RIGHT"> –太さ15ピクセル、幅200ピクセル、右揃えの緑色の水平線。
3.
-ページ全体に25ピクセルの太さの青色の水平線。
4.
WIDTH = "300" ALIGN = "LEFT"> –太さ20ピクセル、幅300ピクセル、左揃えの赤い水平線。
記録された4つの例のラインマッピングを図1に示します。 4.2。
米。 4.2。 Webページの行
テーブル
テーブルの作成
テーブルはペアタグを使用して作成されます
HTMLコードで。
すべてのテーブルは行で構成され、行はセルで構成されます。 次のタグは、テーブルの行とセルを形成するために使用されます。
これらのタグはペアタグ内に書き込まれます
テーブルは行ごとに形成されます。最初の1行が指定され、必要なセル数がその中に示され、次に2行目などが示されます。
図に示すテーブルを取得するために。 5.1、次のHTMLコードを入力する必要があります。
| 車 | 価格 | フォード | 5000 | ゴルフ | 6000 |
|---|
その場合、外側の境界線の太さは6ピクセルになります。 テーブルの境界線が表示されないようにするには、BORDER属性に0に等しい値を割り当てるか、この属性を単に省略する必要があります。
Webページに配置されたグラフィック画像は、情報の認識を向上させるだけでなく、ページをより鮮やかで思い出深いものにします。 グラフィック画像を自分で作成することも、デザイナーのサービスを利用することもできます。 グラフィックライブラリを使用することもできます ソフトウェア製品、 そのような マイクロソフトオフィス、CorelDrawなど。
作成しているWebサイトのホームページに、MicrosoftOfficeの一部であるクリップアートライブラリのグラフィックイメージを配置してみましょう。 これを行うには、次の手順に従います。
- 新しく作成したWebサイトを開きます。
- 開いた ホームページパネルのindex.htmファイル名をダブルクリックします フォルダリスト（フォルダリスト）。
- メニューに 入れる（挿入）selectコマンド 写真 画像（クリップ・アート）。 FrontPageウィンドウにパネルが表示されます。 画像を挿入（クリップアートを挿入）。
- このパネルからコマンドを選択します 写真集（メディアギャラリー）。 ダイアログボックスが開き、グラフィックイメージを選択できます（図15.8）。
米。 15.8。
ダイアログボックスの上部には、ウィンドウに表示されるオブジェクトの表示を制御するボタン、およびオブジェクトのコピーと削除を制御するボタンに加えて、割り当てボタンがあります（表を参照）。
- パネル コレクションのリストマルチメディアファイルとクリップアートライブラリの画像ファイルを含むコンピュータ上のフォルダが含まれています。 興味のある写真のカテゴリのフォルダを開きます。 の 作業領域ウィンドウには、このカテゴリの画像が表示されます。 画像にカーソルを合わせると、画像の名前、サイズ、画像が含まれているファイル、およびグラフィック画像の形式を示すツールチップが表示されます（図15.9）。
- 選択した画像の右側にある矢印ボタンをクリックします。 コンテキストメニューが表示されます。
- コンテキストメニューからコマンドを選択します コピー（ソル）。
- Webページに移動し、便利なツールを使用してクリップボードから画像を貼り付けます。 たとえば、キーの組み合わせを押します
+. - ボタンをクリックして、グラフィックが配置されたWebページを保存します 保存（保存）標準ツールバー。 ダイアログボックスが表示されます 埋め込みファイルの保存（埋め込みファイルの保存）（図15.10）、ページに配置された画像をフォルダーに保存することを提案 画像ファイルがライブラリにあったという名前のWebサイト。 このウィンドウには、次の目的のボタンが含まれています。
- 名前を変更（名前の変更）-ファイルの名前を変更できます。
- フォルダを変更する（フォルダの変更）-ダイアログボックスを開きます フォルダの変更（フォルダの変更）現在のWebサイトのフォルダが含まれており、別のフォルダを選択してファイルを保存できます。
- アクション（アクションの設定）ダイアログボックスを開きます アクションの設定値を変更できます 保存（保存）列アクション（アクション）オン 保存しない（保存しないでください）値を選択するとき 保存画像は指定したWebサイトフォルダに保存されます。保存されていない場合、Webページはクリップアートライブラリの画像にリンクします。
領域 写真（画像プレビュー）は配置された画像を表示します。 ダイアログボックスで設定する 埋め込みファイルの保存必要なパラメータについては、ボタンを押してください わかった。グラフィックファイルは、指定したWebサイトフォルダに保存されます。
米。 15.10。
ファイルからのグラフィックイメージの配置
ClipAitライブラリのグラフィックイメージをWebページに配置することを検討しました。 ファイルのグラフィックをページに配置するには、次のいずれかを実行します。
- メニューに 入れる（挿入）selectコマンド 写真（画像）、そして開いたサブメニューで-オプション ファイルから（ファイルから）
- ボタンをクリックします ファイルから画像を追加する（ファイルから画像を挿入）標準ツールバー
- ボタンをクリックします ファイルから画像を追加する（ファイルから画像を挿入）ツールバー 図面（ピクチャー）
これらのアクションのいずれかを実行すると、ダイアログボックスが開きます。 写真（写真）（図15.11）。 このウィンドウを使用して必要なグラフィックファイルを見つけ、ボタンをクリックしてWebページに配置します。 入れる（入れる）。 ダイアログボックスが閉じ、画像がページに配置されます。
米。 15.11。
画像プロパティの設定
Webページに画像を配置した後、ダイアログボックスを使用してそのプロパティを設定する必要があります 画像のプロパティ（画像のプロパティ）（図15.12）。 それを開くには、画像をクリックしてから、次のいずれかを実行します。
- メニューに フォーマット（フォーマット）selectコマンド プロパティ（プロパティ）
- コンテキストメニューコマンドを選択します 画像のプロパティ（画像のプロパティ）
- キーの組み合わせを押す
+
ダイアログウィンドウ 画像のプロパティ 3つのタブが含まれています： 全般的（全般的）、 ビデオ録画（ビデオ） 意見（外観）。 このディッシュボックスを使用した設定について詳しく見ていきましょう。
テーブルの色
ページ上にテーブルを作成する方法
リスト内のリスト
定義リスト
番号付きリスト
箇条書き
ページ上にリストを作成する方法
リストには、箇条書き、番号付き、定義リストの3つの主要なタイプがあります。 リストされているタイプの主な違いは、番号付けと構造の方法です。
最も一般的に使用される番号なし、または 箇条書き。箇条書きはタグで指定され、これらのタグ間のリスト項目はタグで指定されます
番号付きリストマークされたものと非常によく似ています。 唯一の違いは、番号付きリストでは、グラフィックマーカーではなく、連続した数字または文字が各アイテムの前に自動的に配置されることです。
番号付きリストは、タグを使用して指定されます。 箇条書きのように、各アイテムにはタグが付けられます
- キーワードテープ。
- 。 鬼ごっこ
- 単一の要素、つまり定義された用語とタグを指定します
- -次のインデントされた行に表示される残りの情報。 情報の2行目は 意味。定義のリストは、他のリストと同じ方法で指定されます。 唯一の違いは、各要素に2つのタグが必要なことです。
リストの優れた点の1つは、リストを相互にネストできることです。 リスト内にリストをネストすることは、単にリストを作成するのと同じ方法で行われます。 特別なものはありません HTMLタグ。 ブラウザの混乱を避けるために、各内部リストをタグで閉じるようにしてください。 あなたもお互いに投資することができます 他の種類リスト。
上記のリストをすべて再生する
リストには1つの欠点があります。それは、1次元です。 これは、連続した行にのみ情報を配置できることを意味します。 一方、テーブルを使用すると、データを行だけでなく列にも配置できます。
テーブルを定義するために、いくつかのタグが使用されます。 タグ
と
テーブル全体をフレーム化し、他の多くのタグが情報の表示方法を決定します。 表は次のとおりです 完全な説明テーブルタグ。テーブルを作成するためのHTMLタグ：
タグ説明
これらのタグはテーブルをカバーします。 鬼ごっこ
テーブルの説明が続くことをブラウザに通知します。 行と列を区切るグリッドを表示する場合は、BORDERキーワードを追加します。
およびこれらのタグでマークされたテキスト、 ヘッダーとして表示されます。 タグを使用してタイトルを設定することもできます。
と .と タグは、テキストを行または列の見出しとして少し大きい太字で表示します。と タグは各テーブル行を定義します。 鬼ごっこオプションですが、HTMLコードがより完全で理解しやすくなります。と このタグのペアは、各テーブルセルのテキストを区切ります。5行5列のテーブルを作成するファイルを作成します。
テーブルの背景色とグリッド色を設定できるタグがいくつかあります。 最初のケースでは、キーワードBGCOLORがタグに挿入されます
次の画像：
BGCOLORキーワードに加えて、色を制御する他の方法があります。
BORDERCOLORテーブルグリッドの色を変更します
BORDERCOLORDARK/グリッドをから変更するために使用されます
追加の3次元効果のためのBORDERCOLORLIGHT
3D効果でテーブルグリッドの色を変更する.
レッスン12-13。グラフィックの使用
写真とグラフィックスはWWWにとって非常に重要です。 これは、画面上で画像とテキストを同時に表示できる唯一のインターネットツールです。
Webページに画像を配置するには、タグを適用する方法を知っている必要があります
。 タグを入力してください
また、SRC =キーワードを使用して、ロードするグラフィックを指定します。
このタグを入力するときは、ファイルがHTMLファイルと同じフォルダにある必要があることに注意してください。
HTML画像タグを使用してWebページに追加
。 グラフィックを使用すると、Webページが視覚的に魅力的になります。 画像は、Webドキュメントの本質と内容をよりよく伝えるのに役立ちます。
HTMLタグの使用
HTMLドキュメントへの画像の挿入
1.タグ
エレメント
画像とそのフォールバックコンテンツを表し、alt属性を使用して追加されます。 要素以来
がインラインの場合、たとえば、ブロック要素内に配置することをお勧めします。
または
.鬼ごっこ
必須の属性srcがあり、その値は画像への絶対パスまたは相対パスです。
タグ用
次の属性を使用できます。
表1.タグ属性
属性 説明、許容値 alt alt属性は、画像に代替テキストを追加します。 画像が読み込まれる前、またはグラフィックが無効になっているときに画像が表示される場所に表示されます。また、画像の上にマウスカーソルを置くとツールチップとして表示されます。
構文：alt = "（！LANG：image description" . !}クロスオリジン crossorigin属性を使用すると、CORSリクエストを使用して別のドメインのリソースから画像を読み込むことができます。 CORSリクエストを使用してキャンバスにアップロードされた画像は再利用できます。 許可される値：
匿名-クロスオリジンリクエストはHTTPヘッダーを使用して行われ、クレデンシャルは渡されません。 サーバーがコンテンツの要求元のサーバーに資格情報を提供しない場合、画像は破損し、その使用は制限されます。
use-credentials-クロスオリジンリクエストは、渡されたクレデンシャルを使用して行われます。
構文：crossorigin="anonymous"。高さ height属性は、画像の高さをpxで指定します。
構文：height="300"。ismap ismap属性は、画像がサーバー上にある地図画像の一部であることを示します（地図画像はクリック可能な領域のある画像です）。 マップ画像をクリックすると、座標がURLクエリ文字列としてサーバーに送信されます。 ismap属性は、要素が次の場合にのみ許可されます 要素の子です 有効なhref属性を使用します。
構文：ismap。longdesc alt属性を埋め込んだ画像の拡張説明URL。
構文：longdesc="http://www.example.com/description.txt"。src src属性は、画像へのパスを指定します。
構文：src="flower.jpg"。サイズ 表示設定に応じて画像サイズを設定します。 srcset属性が設定されている場合にのみ機能します。 属性値は、コンマで区切られた1つ以上の文字列です。 srcset 画面の解像度に基づいて選択される画像ソースのリストを作成します。 src属性と一緒にまたはその代わりに使用できます。 属性値は、1つ以上のコンマ区切りの文字列です。 
usemap usemap属性は、画像を画像マップとして定義します。 値は＃文字で始まる必要があります。 値は、タグのnameまたはid属性の値に関連付けられています 幅 width属性は、画像の幅をpxで指定します。
構文：width="500"。1.1。 画像アドレス
画像アドレスは、完全に（絶対URL）で指定できます。次に例を示します。
url（http://anysite.ru/images/anyphoto.png）またはからの相対パスを介して 資料また ルートディレクトリサイト：
url（../ images / anyphoto.png）—ドキュメントからの相対パス、
url（/images/anyphoto.png）は、ルートディレクトリからの相対パスです。これは次のように解釈されます。
../-ルートディレクトリまで1レベル上に移動することを意味します。
images /-画像のあるフォルダに移動し、
anyphoto.png-画像ファイルを指します。1.2。 画像の寸法
画像のサイズを設定しない場合、図面は実際のサイズでページに表示されます。 幅と高さの属性を使用して、画像のサイズを編集できます。 属性の1つだけが設定されている場合、画像の比率を維持するために2番目の属性が自動的に計算されます。
1.3。 グラフィックファイル形式
JPEG形式 （Joint Photographic Experts Group）。 JPEG画像は写真に最適で、何百万もの異なる色を含めることができます。 画像はGIFよりも圧縮率が高くなりますが、テキストや単色の広い領域がにじむ可能性があります。
GIF形式 （グラフィックス交換フォーマット）。 ロゴなどの単色の領域がある画像の圧縮に最適です。 GIFを使用すると、色の1つを透明に設定して、Webページの背景が画像の一部を通して表示されるようにすることができます。 GIFには次のものも含まれる場合があります シンプルなアニメーション。 GIFには256の色合いしか含まれていないため、ポスターのように画像がにじみ、非現実的に見えます。
PNG形式 （ポータブルネットワークグラフィックス）。 GIFおよびJPEG形式の最高の機能が含まれています。 256色が含まれており、画像をGIFファイルよりも小さいサイズに圧縮しながら、いずれかの色を透明にすることができます。
APNG形式 （アニメーションポータブルネットワークグラフィックス）。 PNG形式に基づく画像形式。 アニメーションを保存でき、透明度もサポートします。
SVG形式 （スケーラブルベクターグラフィックス）。 SVG図面は、XML形式で記述された一連の幾何学的形状（線、楕円、多角形など）で構成されています。 静的グラフィックとアニメーショングラフィックの両方がサポートされています。 機能のセットには、さまざまな変換、アルファマスク、フィルター効果、テンプレートを使用する機能が含まれます。 SVG画像は、品質を損なうことなくサイズ変更できます。
BMP形式 （ビットマップ画像）。 テンプレートがピクセルの長方形グリッドである非圧縮（元の）ビットマップを表します。 ビットマップファイルは、ヘッダー、パレット、およびグラフィックデータで構成されます。 ヘッダーには、グラフィックイメージとファイルに関する情報（ピクセルの深さ、高さ、幅、色数）が格納されます。 パレットは、パレット画像（8ビット以下）を含み、256個以下の要素で構成されるビットマップファイルでのみ指定されます。 グラフィックデータは画像自体を表します。 この形式の色深度は、1ピクセルあたり1、2、4、8、16、24、32、48ビットです。
ICOフォーマット （Windowsアイコン）。 ファイルアイコンを保存するための形式 マイクロソフトウィンドウズ。 また、Windowsアイコンは、インターネット上のWebサイトのアイコンとして使用されます。 ブラウザのサイトアドレスまたはブックマークの横に表示されるのは、この形式の画像です。 1つのICOファイルには、それぞれのサイズと色が個別に設定された1つ以上のアイコンが含まれています。 アイコンのサイズは任意ですが、最も一般的なアイコンは、辺が16、32、48ピクセルの正方形のアイコンです。
2.タグを付ける
鬼ごっこ
name属性は、マップの名前を指定するタグで使用できます。 タグのname属性の値
エレメント
3.タグを付ける
鬼ごっこ クライアント側のイメージマップ内の1つのホットスポットのみを記述します。 要素には終了タグがありません。 1つのホットスポットが別のホットスポットとオーバーラップする場合、ホットスポットのリストの最初のリンクが実装されます。
表2.タグ属性
属性 簡単な説明 alt マップのアクティブエリアの代替テキストを指定します。 座標 画面上の領域の位置を指定します。 座標は長さの単位で指定され、コンマで区切られます。
ために サークル—円の中心と半径の座標。
ために 矩形—左上隅と右下隅の座標。
ために ポリゴン—ポリゴンの頂点の正しい順序での座標。図を論理的に完成させるために、最初の座標と同じ最後の座標を指定することもお勧めします。ダウンロード href属性を補完し、たとえばPDFファイルのように事前に開くのではなく、ユーザーがリンクをクリックした瞬間にリソースをロードする必要があることをブラウザに通知します。 属性に名前を付けることで、ロードされたオブジェクトに名前を付けます。 値を指定せずに属性を使用できます。 href リンクのURLを指定します。 絶対リンクアドレスまたは相対リンクアドレスを指定できます。 hreflang 関連するWebドキュメントの言語を指定します。 href属性と組み合わせてのみ使用されます。 受け入れられる値は、言語コードを示す1組の文字で構成される略語です。 メディア ファイルが最適化されるデバイスタイプを指定します。 値は任意のメディアクエリにすることができます。 rel 現在のドキュメントとリンクされたドキュメントの関係に関する情報をhref属性に埋め込みます。 許容値：
代替-ドキュメントの代替バージョンへのリンク（たとえば、印刷可能なページ、翻訳、またはミラー）。
author-ドキュメントの作成者へのリンク。
ブックマークは、ブックマークに使用される永続的なURLです。
ヘルプ—ヘルプへのリンク。
ライセンス-このWebドキュメントの著作権情報へのリンク。
next/prev-個々のURL間の関係を示します。 このマークアップを通じて、Googleはこれらのページのコンテンツが論理的な順序でリンクされていることを確認できます。
nofollow-禁止 検索エンジンこのページまたは特定のリンクのリンクをたどってください。
noreferrer-リンクをたどるときに、ブラウザがHTTPリクエストヘッダー（Referrer）を送信しないことを示します。このヘッダーには、サイト訪問者がどのページからアクセスしたかに関する情報が含まれています。
プリフェッチ-ターゲットドキュメントをキャッシュする必要があることを示します。 のブラウザ バックグラウンドページのコンテンツをキャッシュにロードします。
searchターゲットドキュメントに検索ツールが含まれていることを示します。
tag-現在のドキュメントのキーワードを指定します。形 マップ上のホットスポットの形状とその座標を指定します。 次の値を取ることができます。
rectは長方形のアクティブエリアです。
円-円の形のアクティブエリア。
poly-ポリゴン形式のアクティブエリア。
デフォルト—ホットスポットは画像の全領域を占めます。目標 リンクがクリックされたときにドキュメントがロードされる場所を指定します。 次の値を取ります。
_self-ページが現在のウィンドウに読み込まれます。
_blank-ページが新しいブラウザウィンドウで開きます。
_parent-ページが親フレームにロードされます。
_top-ページは完全なブラウザウィンドウにロードされます。タイプ リンクファイルのMIMEタイプを指定します。 ファイル拡張子。 4.画像マップの作成例
1）ソース画像を目的の形状のアクティブな領域にマークします。 面積座標は、たとえば、写真処理プログラムを使用して計算できます。 アドビフォトショップ また ペイント.
米。 1.地図を作成するための画像マークアップの例 2）地図名をタグに追加して設定します
Jpg "alt ="（！LANG：flowers_foto" width="680" height="383" usemap="#flowers"> !}
米。 2.画像マップの作成例では、花をクリックすると、説明のあるページに移動します
TAPE = 1-標準の番号付け（1,2,3,4,5、...）
TAPE = A-大文字（A、B、C、D、...）
TAPE = a-緊急の手紙（a、b、c、d、...）
TAPE = I-ローマ数字（I、II、III、IV、...）
TAPE = i-小文字のローマ数字（i、ii、iii、iv、...）
定義リストは、他のタイプのリストとは少し異なって見えます。 この場合、1つのタグではなく、2つのタグが各リストアイテムの説明に使用されます
