Grafika és forgalom
A weblapok tervezésének szépségével és kifejezőképességével szemben támasztott követelmények állandóan ellentmondanak a modern webtárhely technikai lehetőségeinek. Ezért a weboldal tervezőjének közvetítővé kell válnia a tervező és a felhasználó között, és szigorúan fenn kell tartania az egyensúlyt a vizuális vonzerő és az információk ésszerű sebessége között a weben. A probléma sikeres megoldásához ismernie kell az interneten használt összes grafikus formátumot, meg kell értenie a köztük lévő különbségeket, alkalmazási területeiket és felhasználási jellemzőit.
Megérteni az interneten elfogadott nagyszámú formátumot és protokollt, és építeni saját oldal, ki kell választania az Ön konkrét céljainak legmegfelelőbbet. Egyes formátumok csak egy böngészőre vonatkozhatnak, míg mások speciális beépülő modult igényelnek.
A legkülönfélébb formátumok közül csak azokat választottuk ki, amelyeket a népszerű oldalak szerzői a leggyakrabban használnak, és amelyeket a felhasználók elfogadnak. A GIF és a JPEG a két legnépszerűbb grafikai formátum, amelyek már régóta de facto szabványokká váltak a WWW-en. Mindkettő meglehetősen univerzális, a legtöbb böngészővel olvasható, és nem igényel különlegeset szoftver
A vektorgrafikus formátumok sokkal vonzóbbak az interneten való használatra. A bittérképekkel ellentétben a vektorgrafikák az adatok matematikai (geometriai) ábrázolásán alapulnak. Az ilyen képek tárolási/átviteli mennyiségét tekintve lényegesen kisebbek, könnyen méretezhetők, és gyakorlatilag nem veszítenek minőségükből egyetlen átalakítás során sem. Sajnos a vektoros formátumokat még mindig kevesen használják az interneten, de a szabványok már kialakultak, és érdekesnek kell lenniük a tervezők számára.
A közelmúltban számos vektorszabványt javasoltak, és a PGML és VML formátumokat jelenleg a World Wide Web Consortium (W3C) mérlegeli. A VML-t népszerűsítő Macromedia azonban már régen megnyitotta vektorformátumát Shockwave Flash más fejlesztők, és további modulokat implementáltak az ilyen formátumú grafikák megtekintéséhez a népszerű böngészőkben.
Az új termékek azonban nem feltétlenül jobbak minden alkalmazáshoz. Az interneten leggyakrabban közzétett képek továbbra is a digitális fényképek, rajzok és szkennelt képek, amelyek nagyon munkaigényesek, és aligha célszerű vektoros formátumba konvertálni.
Ezért a formátum kiválasztása végső soron az Ön céljaitól és az igényeinek leginkább megfelelő képektől függ. célközönség, neked kell eldöntened.
GIF - formátum a tervezéshez
A CompuServe eredetileg interaktív alkalmazásokhoz szánta GIF formátumát, a személyi számítógépek szabványos grafikai képességeinek korlátozottsága mellett. Eredetileg 4 bites, majd 8 bites raszteres formátum volt, meghatározott színpalettával, amely maximum 256 színt támogat. A formátum egyik jelentős előnye, hogy a képek egy adott palettára (színkészletre) indexelhetők, míg a JPEG képeket nem lehet palettára „zárni”, és nem mindig lehetséges a „helyes” megjelenítésük.
Ez a tulajdonság különösen fontos azoknak a fejlesztőknek, akik palettaindexelést használnak a képek átvitelének optimalizálására minden platformon (legyen az PC, Mac, Web-TV vagy más), függetlenül attól, hogy az adott rendszer milyen színmélységgel működik. Ez a sokoldalúság a 216 színből álló korlátozott paletta révén érhető el, amely magában foglalja a Windowsban és például a MacOS-ben használt összes általános színt. Egy webhely univerzális palettán történő tervezése garantálja a konzisztens, platformfüggetlen és hardverfüggetlen megjelenítést. Ezenkívül a GIF formátum veszteségmentes tömörítési sémát használ (egy egyszerű ismétléskódoló algoritmussal: az azonos színű bájtok sorozatát egy két bájtos szó helyettesíti, amelyek közül az egyik tartalmazza az árnyékolási mintát, a második pedig a számot határozza meg ismétlések), hogy az ebben a formátumban lévő grafikus adatok ne veszítsenek információt a tömörítési és helyreállítási folyamat során.
Így a GIF formátum fő előnyei a veszteségmentes tömörítés alkalmazása, valamint a szilárd színterületek gazdaságos megőrzése világos határvonallal és szigorú színátmenetekkel. A JPEG formátum abban különbözik a leírtaktól, hogy a tömörítés mértékétől függően a szilárd területek megsemmisülnek, és az éles színátmenetek kisimulnak vagy elmosódnak.
A GIF formátum kiválasztásának fő kritériuma: ha saját maga rajzolt egy képet egy grafikus csomagban, például a Photoshopban vagy a Painterben, amelyen nagy, azonos színű területek vannak, vagy egy meglévő képet dolgozott fel, és meg akarja őrizni a nagy kontrasztot (szükséges pl. szöveg megjelenítése), majd mentse el ebben a formátumban (ez elsősorban a fekete-fehér vagy rossz színű rajzokra vonatkozik).
A sima színátmeneteket (átmeneteket) használó fényképekhez, videókhoz vagy más színes képekhez használja a JPEG formátumot.
Azt is fontos megjegyezni, hogy ha folyamatos tónusú képeket próbál GIF-ként menteni, akkor valószínűleg sok információt el kell dobnia a kép előkészítése során (ha fix palettára alakítja), és a GIF tömörítését. módszer annyira hatástalan lesz, hogy anyagilag is veszít (mind a munkaerőköltség, mind a fájlméret tekintetében).
Többek között a GIF formátum biztosítja az úgynevezett váltottsoros megjelenést, amely a lassú csatornákkal rendelkező felhasználókat a vétel legelején segíti a kép tartalmának kiértékelésében (a hatás hasonló a kimaradt kép fokozatos rajzolásához). fókuszkép) és a teljes átvitelhez szükséges idő, és ennek eredményeként elfogadja annak eldöntését, hogy folytatja-e a felvételt, vagy jobb, ha abbahagyja.
A progresszív JPEG-től eltérően azonban itt a hatás inkább pszichológiai, mint valós (lásd az ábrát).
Ne felejtse el a GIF formátum egyik fontos előnyét is, amely bizonyos esetekben még az összes hiányossága ellenére sem kerülhető el, az átlátszóság támogatása (GIF89a kiterjesztés), amely lehetővé teszi a nem téglalap alakú kontúrok sziluettjének megjelenítését meglévő háttéren. . Az átlátszóság a GIF formátumban primitíven van megvalósítva - egy szín (általában a háttér) átlátszóként van hozzárendelve. Ezt az előnyt gyakran használják gombok és ikonok létrehozásakor az oldaltervezésben (a JPEG nem támogatja az átlátszóságot). Összegzésként a következőket mondhatjuk: GIF - a meglévő hardver és szoftver közötti hatékony kompromisszum eléréséhez, valamint a 8 bites GIF-kép 216 univerzális színnel való indexelésének képessége elengedhetetlen, ha a képeket különféle böngészőkön és ismeretlen platformokon kívánják megjeleníteni.
JPEG - fényképek és videokockák formátuma
A JPEG formátum nevét a Joint Photographic Experts Group bizottság rövidítéséből kapta, amely ezt a szabványt a 80-as évek végén és a 90-es évek elején hozta létre. A JPEG formátum veszteséges tömörítési algoritmuson (diszkrét koszinusz transzformáció) alapul, amely a képet olyan területekre bontja (általában 8x8 pixeles négyzetekre), amelyeken belül a színeloszlást egy matematikai függvény helyettesíti, és csak ennek a függvénynek az együtthatóit tárolja, lehetővé téve a rekonstruálni a megjelenését. Természetesen némi minőségi veszteséggel kell találkozni (a képhelyettesítő funkció bonyolultságától függően), és a helyreállítás után már nem valódi képet kap, hanem annak matematikai „helyettesítőjét”. Az eredeti minőségétől és a tömörítés mértékétől függően azonban előfordulhat, hogy a minőségvesztés teljesen láthatatlan a néző számára.
De a JPEG formátum fő előnye a GIF-fel szemben, hogy míg a GIF csak 8 bites (256 szín), addig a JPEG 24 bites, és akár 16,7 millió színt is képes megjeleníteni. Emiatt a színes JPEG természetesen lényegesen több videó információt reprodukál, mint a GIF. Ez a formátum a legalkalmasabb a valós képekhez - szkennelt képek ill digitális fényképek
, valamint digitalizált videokockák vagy renderelt 3D számítógépes grafikai jelenetek.
A JPEG másik előnye, hogy a GIF-fel ellentétben lehetővé teszi a forrásképre alkalmazott tömörítési fok önálló beállítását, ami lehetővé teszi a méret és a minőség közötti szükséges egyensúly fenntartását.
Tehát, ha JPEG formátumú fotóval dolgozik, lehetősége van egy 24 bites képet menteni 16,7 millió színnel, és a tömörítés során bekövetkező minőségromlás ellenére még mindig sokkal konzisztensebb az eredetivel, mint a 256-os kép. színes GIF teljesítmény. Ebben az esetben az elkerülhetetlen minőségromlás erősen függ az eredeti kép méretétől, minőségétől és típusától.
Ezenkívül a JPEG lehetővé teszi az úgynevezett progresszív megjelenítés definiálását, vagyis amikor betöltéskor a kép „durva” megjelenítése azonnal megjelenik a képernyőn, amely vételkor további információk, fokozatosan javul (ugyanakkor már a letöltés befejezése előtt megismerheti a benyújtott anyag lényegét, és bármely szakaszban megszakíthatja a folyamatot, ami jelentősen megtakarítja az online tartalmak megtekintését).
Ezeket az eszközöket tetszés szerint használhatja, és egy ilyen lépésről lépésre történő megnyilvánulás jó segítséget jelenthet a csatornatorlódások elleni küzdelemben. Az egyetlen probléma a progresszív JPEG-el (szemben a váltottsoros GIF-fel), hogy a régebbi böngészők nem támogatják.
PNG - univerzális raszteres újdonság
A raszteres formátumok következő generációja, a PNG, mind a JPEG, mind a GIF legjobb tulajdonságait használja, és saját egyedi megközelítést ad a képmegjelenítéshez, amely lehetővé teszi ugyanannak a képnek a különböző verzióinak egyetlen fájlba ágyazását alacsony, közepes és magas értékekhez. határozatok.
A PNG (Portable Network Graphics) formátum egy viszonylag új raszteres grafikai formátum, amelyet szabványként hagyott jóvá a W3C konzorcium, és fokozatosan fel kell váltania mindkét „elavult” formátumot: mind a GIF-et, mind a JPEG-et. A PNG színindexelést (legfeljebb 256 színig), támogatja a 24 és 48 bites színeket (True-Color), valamint egy átlátszósági csatornát (alfa csatorna) is kínál, és sokkal hatékonyabb, mint a hagyományos raszteres képtárolás. formátumok.
A színes képek tömörítési algoritmusa minőségében jobb, mint a JPEG, és a korlátozott indexelt paletta támogatásával (akár 256 színig), az új formátum veszteségmentes tömörítést biztosít 10-30%-kal jobb, mint a GIF formátumban. ami minden esetben optimálissá teszi a felhasználást. Sajnos az új formátum nem teszi lehetővé a képminőség feláldozását a nagyobb tömörítési arányért cserébe, mint például.
Az átlátszóság támogatása a PNG formátumban, a GIF-fel ellentétben, teljes értékű, vagyis áttetsző képeket vagy szegélyeket készíthet, így a „tiszta” szegélyek problémája, amelyet olyan nehéz megoldani, amikor átlátszóságot használnak egy GIF-fájlban, könnyen megoldható. itt.
A PNG által kínált összes fejlesztés ellenére azonban az új formátum csak akkor fog beindulni, ha a webhelyek tervezői és szoftvergyártók használják a képek új formátumban való megjelenítésére és a közzétételre való előkészítésére. Eközben meglehetősen nehéz PNG-képeket találni bárhol az interneten, annak ellenére, hogy a közelmúltban a Netscape Navigator és a Microsoft Internet Explorer is támogatja ezt a formátumot.
És bár ők legújabb verzióiés támogatják a PNG-t, ezt nagyon korlátozott módon teszik. Jelenleg az egyetlen megoldás azoknak a felhasználóknak, akik teljes PNG-fájlt szeretnének látni önálló telepítés külső modul (például PNG Live).
Úgy tűnik, a fejlesztők késlekednek, és arra várnak, hogy a felhasználók teljesen átálljanak az új formátumokra. Nos, az egészséges konzervativizmus soha nem árt, de továbbra is erősen javasoljuk, hogy fokozatosan térjen át a PNG-re, legalább a GIF formátum minden eddigi felhasználását lecserélve.
Vektoros ábrázolás
Mind a JPEG, mind a GIF, mind a PNG raszteres formátum, amely egy kép diszkrét (pixel vagy pont) ábrázolásán alapul, míg a vektoros formátumok matematikai képleteken (alakzatok geometriai megjelenítésén) alapulnak. A vektorgrafikák jelentős előnyöket nyújtanak a raszterrel szemben, különösen, ha diagramokról, szövegekről és ipari grafikákról van szó (és a költséghatékony formátumok nagy jelentőséggel bírnak az internet számára).
Tehát az első előny a vektoros képek lényegesen kisebb mérete a bittérképekhez képest, mivel nem a kép minden egyes pixele van leírva, hanem a teljes ábra (például kör megadásához 3-4 számot kell átadni: sugár, középponti koordináták, esetleg a vonal típusa vagy vastagsága és attribútumai). A vektoros ábrázolást leíró matematikai képletek sokkal kevesebb helyet foglalnak el, mint az egyes pixelek és attribútumaik.
A vektoros ábrázolás másik fontos előnye, hogy szinte korlátlanul méretezhet egy képet (vagy annak részleteit) anélkül, hogy a kép felbontása vagy tisztasága romlana. Nincs szükség erőfeszítésre a vektorábrázolás egy adott palettához, platformhoz, hardverhez vagy tervezési jellemzőihez való igazításához; a tömörítési séma és a megjelenítési minőség összehangolása pedig problémamentesen megy végbe.
Azonban nem minden raszteres kép vektoros formába konvertálható (például fényképek, szkennelt képek vagy raszteres rajzok nehezen vektorizálhatók). De egyszerűen hülyeség speciálisan elkészített vektoros rajzokat (például vonalas rajzokat, piktogramokat, műszaki illusztrációkat, térképeket, információs grafikákat és más, történelmileg vektoros grafikákat) raszteres formára konvertálni az interneten való közzététel céljából, ami manapság mindenhol megtörténik.
A vektorgrafikák világhálón való megjelenítésével kapcsolatos problémák abból adódtak, hogy a raszteren kívül nem volt más megjelenítési mód, illetve a PDF formátumú fájlok megjelenítésére megjelenő beépített modul nem biztosított kellő rugalmasságot, és megkövetelte az összes tartalom egy formában történő tárolását - PDF.
A vektorgrafikák hagyományos HTML formátumba történő zökkenőmentes beágyazása érdekében további szoftverek nélkül, két új vektorszabványt vizsgál a W3C szabványügyi bizottság: a PGML-t (Precision Graphics Mark-up Language) és a VML-t (Vector Mark-up Language). ). A PGML-t az Adobe Systems, az IBM, a Netscape és a Sun Microsystems, a VML-t pedig a Microsoft, a Hewlett-Packard, az Autodesk, a Macromedia és a Visio támogatja. Mindkét szabvány az XML jelölőnyelv kiterjesztésein alapul, amelyeket a HTML utódjaként népszerűsítenek az interneten, és a W3C ajánlja a jövőbeni használatra.
Jelenleg azonban egyik böngésző sem támogatja a vektorgrafikus szabványokat, bár további modulok (plug-inek) már elérhetőek. A statikus vektorképek weben való megjelenítésének manapság legnépszerűbb módjai közé tartozik a Macromedia SWF (Shockwave Flash) formátuma és a még mindig alulértékelt Xara Flare formátum.
Fellobbanás- jó döntés, amely lehetővé teszi olyan vektoros képek beillesztését, amelyek szinte korlátlanul teszik lehetővé az oldal részletezettségének növelését, miközben méretük a Shockwave Flash-éhoz hasonlítható. Ez nem azt jelenti, hogy olyan kényelmetlen a további modulok használata a képek megtekintéséhez, de amikor ilyen eszközöket használ az oldalain, mindenképpen figyelmeztesse erre a felhasználót, és adjon lehetőséget a megfelelő modul letöltésére, mielőtt az oldalra lép. amely tartalmazza majd ezeket az elemeket. Rövid távon ez természetesen lelassítja a böngészési folyamatotúj felhasználók
, de fokozatosan egyre több követőre tesz szert, mígnem a megfelelő eszközök végre bekerülnek a böngésző következő verziójába, és a kezdőknek már nincs szükségük a kiegészítő modulra.
Animáció, interaktivitás és interakció Általánosságban elmondható, hogy a GIF-képek speciális kötegként helyezhetők el egy fájlba, és az így létrejött „film” (flipbook) egy egyszerű raszteranimáció létrehozásával reprodukálható. A Netscape és a Microsoft is támogatja az animált GIF-eket a böngészők harmadik verziója óta, így a weben való jelenlétüket ma már nehéz elkerülni. Számos GIF-animátor, amely lehetővé teszi hasonló GIF-halmok létrehozását, széles körben elterjedt (kereskedelmi és nyilvánosan elérhető). A GIF formátum "újraélesztése" azonban ellenőrizhetetlenséghez vezethet
fájlméretek
, mert egy ilyen verem minden „szintje” egy egyedi GIF-kép, így a számítógépes animációra jellemző, másodpercenkénti 15 képkocka számtalan kilobájtot képes „termelni”.
Java vagy JavaScript használatával interaktív animációt hozhat létre, amely válaszol a felhasználónak. Most nézzük meg a webes animáció és az interaktív felhasználói interakció egyéb megoldásait, és itt továbbra is a Macromediaé a főszerep, amely Shockwave és Flash programjaival régóta belépett a piacra, és folyamatosan fejleszti termékeit, növelve azok hatékonyságát a megfelelő módon. a felhasználók és a tervezők igényei szerint. Eredetileg a Macromedia Director formátumaként jött létre, a Shockwave egy protokollcsalád, amely elsősorban interaktív és grafikus tartalmak előállítását célozza, amelyeket kifejezetten internetes használatra készítettek. Mi az a Shockwave Flash? egyedi hangszer animáció létrehozásához és egy weboldalon való közzétételéhez. A Shockwave Flash nagyon kicsi fájlokat hoz létre (mivel túlnyomórészt vektoros ábrázolási formátumot használ), és más formátumokhoz képest az előkészítés szempontjából a legkényelmesebb.
Amikor ilyen animációt tesz közzé az oldalain, ne felejtse el értesíteni erről a felhasználót, hogy előre készletezzen egy további modult, és felkészüljön a letöltés fárasztó várakozására. A legújabb verziók azonban mind a Netscape Navigator, mind a Internet Explorer még az alapcsomagban is vannak megtekintő modulok a Flash-animációkhoz. A Netscape megerősítette, hogy a Navigator jövőbeli verziói már kódszinten is támogatni fogják a Flash-t.
A végső döntés a tiéd
Változik tehát a webes tartalmak megjelenítéséhez való hozzáállás, megjelennek az új adatformátumok és ezeket támogató fejlesztőeszközök. A régebbi formátumok (GIF és JPEG grafikák megjelenítéséhez) azonban még mindig meglehetősen népszerűek. Szinte minden böngésző támogatja őket, és a legtöbb fejlesztő széleskörű tapasztalattal rendelkezik a velük való munka során. Fontos, hogy az adott célnak megfelelő formátumot használjunk, hogy biztosítsuk az egyensúlyt a képminőség és a fájlméret között. Például egy GIF formátumú kép több helyet foglalhat el, és gyengébb minőségű eredményt hozhat, mint a JPEG formátumban, míg egy másik esetében ennek az ellenkezője igaz.
A raszteres képek ábrázolásakor azonban a PNG lesz az előnyben részesített formátum, és ha még tovább megy, és megpróbálja vektoros képet használni, akkor ma a Macromedia Shockwave Flash formátuma áll az Ön szolgálatában.
Az SWF (Shockwave Flash) formátum nem egy általánosan használt, hanem egy belső vektorformátum Flash programok Macromedia (lásd a „Leckék Macromedia Flash"CD-ROM-on), így saját kép vagy animáció beszerzéséhez meg kell vásárolnia a megfelelő multimédiás csomagot a Macromedia-tól, és a felhasználónak egy további modult kell telepítenie az eredmény megjelenítéséhez.
Így ahhoz, hogy egyszerűen vektorképet helyezzen el a weboldalán, számos kellemetlenséget kell leküzdenie.
Azonban más vektorformátumok is készülnek, és hamarosan szabványossá válnak.
ComputerPress 5"1999 (P 1. táblázat). Ennek a címkének az attribútumai beállítják az oldalon elhelyezett kép összes paraméterét. Az SRC attribútum kötelező, amely meghatározza a grafikus fájl címét és nevét. Ha az SRC attribútum nincs beállítva, csak az üres kép ikonja jelenik meg.
Címke szerkezete az SRC attribútummal így néz ki:
.
Ha grafikus fájl Intézet névvel ugyanabban a mappában található, mint a weblap, majd az elhelyezéshez írja be:
.
Fájlnév Formátum
A D:\Collection\Cities\MINSK.GIF címen található MINSK nevű grafikus fájl elhelyezéséhez írja be .
Címke használata A weboldal egy grafikus fájlt tartalmaz, amely egy másik számítógépen található az interneten.
Egy weboldal létrehozása intézetünk fényképével, amely az ábrán látható. 4.1, meg kell adnia a következő HTML-kódot:
Intézetünk
Rizs. 4.1. Weboldal az intézet fényképével
A fenti példában a fénykép magassága (HEIGHT) 200 képpont, a szélessége (WIDTH) 300 képpont. A fénykép elhelyezéséhez egy bekezdés jön létre középre igazítással.
Vízszintes vonalak
A vízszintes vonalak egyetlen címke használatával kerülnek a weboldalra
. A SIZE, WIDTH, COLOR és ALIGN attribútumok módosítják a vonalak vastagságát, szélességét, színét és igazítását.
Nézzünk néhány példát a vízszintes vonalak elhelyezésének magyarázatára:
1.
- egy vízszintes vonal az egész oldalon, 2 képpont vastag.
2.
WIDTH = "200" ALIGN="RIGHT"> – zöld színű vízszintes vonal, 15 képpont vastag, 200 pixel széles és jobbra igazítva.
3.
– a teljes oldalt lefedő vízszintes kék vonal, 25 pixel vastagságban.
4.
WIDTH = "300" ALIGN = "LEFT"> – vízszintes vörös színű vonal, 20 képpont vastag, 300 képpont széles és balra igazítva.
A négy felvett példa vonalkijelzése az ábrán látható. 4.2.
Rizs. 4.2. Vonalak egy weboldalon
TÁBLÁZATOK
Táblázatok készítése
A táblázat párosított címke használatával jön létre
HTML kódban.
Bármely táblázat sorokból áll, a sorok pedig cellákból. A következő címkéket használják táblázatsorok és cellák létrehozására:
Ezek a címkék egy páros címkébe vannak írva
A táblázat soronként kerül kialakításra - először egy sor kerül megadásra, és a szükséges cellák száma, majd a második sor stb.
ábrán látható táblázat eléréséhez. 5.1, be kell írnia a következő HTML-kódot:
| Autók | Ár | Ford | 5000 | Golf | 6000 |
|---|
akkor a külső szegély vastagsága 6 pixel lesz. A táblázatszegélyek megjelenítésének megakadályozásához a BORDER attribútumot 0-ra kell állítani, vagy egyszerűen ki kell hagynia ezt az attribútumot.
A weboldalon elhelyezett grafikus képek nemcsak az információk jobb észleléséhez járulnak hozzá, hanem élénkebbé és emlékezetesebbé teszik az oldalakat. Grafikus képeket készíthet saját maga, vagy igénybe veheti a tervezők szolgáltatásait. Használhat grafikus könyvtárakat is szoftver termékek, mint pl Microsoft Office, CorelDraw stb.
Helyezzen el egy grafikus képet a Microsoft Office-ban található Clip Art könyvtárból az általunk létrehozott webhely kezdőlapjára. Ehhez kövesse az alábbi lépéseket:
- Nyissa meg a létrehozott webhelyet.
- Nyitott kezdőlap kattintson duplán az index.htm fájl nevére a panelen Mappalista(Mappalista).
- A menüben Beszúrás(Beszúrás) válassza ki a parancsot Rajz Képek(Clip Art). Megjelenik egy panel a FrontPage program ablakában Kép beszúrása(ClipArt beszúrása).
- Válassza ki a parancsot erről a panelről Képek gyűjteménye(Médiagaléria). Megnyílik egy párbeszédpanel, amely lehetővé teszi egy grafikus kép kiválasztását (15.8. ábra).
Rizs. 15.8.
A párbeszédablak tetején az ablakban megjelenő objektumok megjelenítését vezérlő, valamint az objektumok másolását és törlését vezérlő gombokon kívül hozzárendelési gombok találhatók (lásd a táblázatot).
- Panel Gyűjtemények listája tartalmazza a számítógépe multimédiás fájlokat tartalmazó mappáit, valamint a Clip Art könyvtár képfájljait. Nyissa meg az Önt érdeklő képkategória mappáját. IN munkaterület ebbe a kategóriába tartozó képek jelennek meg az ablakban. Amikor a kurzort egy képre helyezi, megjelenik egy eszköztipp, amely jelzi a kép és a benne lévő fájl nevét, méretét, valamint a grafikus kép formátumát (15.9. ábra).
- Kattintson a kiválasztott kép jobb oldalán található nyílra. Megjelenik egy helyi menü.
- Válassza ki a parancsot a helyi menüből Másolat(Sora).
- Lépjen egy weboldalra, és illesszen be egy képet a vágólapról bármilyen kényelmes eszközzel. Például nyomja meg a billentyűkombinációt
+. - Mentse el a grafikus képet tartalmazó weboldalt a gombra kattintva Megtakarítás(Mentés) a szabványos eszköztáron. Megjelenik egy párbeszédpanel Beágyazott fájlok mentése(Beágyazott fájlok mentése) (15.10. ábra), felajánlja az oldalon elhelyezett kép mappába való mentését képeket Webhely azon a néven, amellyel a fájl a könyvtárban volt. Ez az ablak a következő gombokat tartalmazza:
- Átnevezés(Átnevezés) - lehetővé teszi a fájl átnevezését.
- Mappa módosítása(Mappa módosítása) – párbeszédpanelt nyit meg Mappa módosítása(Mappa módosítása), amely az aktuális webhely mappáit tartalmazza, lehetővé téve egy másik mappa kiválasztását a fájl mentéséhez.
- Akció(Művelet beállítása) párbeszédpanelt nyit meg cselekvési feladat, lehetővé teszi az érték megváltoztatását Megtakarítás Mentse a Művelet oszlopot ide Ne mentsd meg(Ne mentse el az értéket). Megtakarítás A rajz az Ön által megadott webhelymappába kerül mentésre, ellenkező esetben a weboldal a Clip Art könyvtárban található képre mutató hivatkozást tartalmaz.
Régió Rajz(Kép előnézete) az éppen elhelyezett képet mutatja. A párbeszédpanelen történő beállítással Beágyazott fájlok mentése kívánt paramétereket, nyomja meg a gombot RENDBEN. A grafikus fájl az Ön által megadott webhelymappába kerül mentésre.
Rizs. 15.10.
Grafikus kép elhelyezése fájlból
Megnéztük, hogyan helyeztünk el egy grafikus képet a Clip Ait könyvtárból egy weboldalon. Ha egy fájlból grafikus képet szeretne elhelyezni egy oldalon, tegye a következők egyikét:
- A menüben Beszúrás(Beszúrás) válassza ki a parancsot Rajz(Kép), majd a megnyíló almenüben - az opció Fájlból(Fájlból)
- Kattintson a gombra Kép hozzáadása fájlból(Kép beszúrása fájlból) a szabványos eszköztáron
- Kattintson a gombra Kép hozzáadása fájlból(Kép beszúrása fájlból) az eszköztáron Rajzok(Képek)
A műveletek bármelyikének végrehajtásakor megnyílik egy párbeszédpanel Rajz(Kép) (15.11. ábra). Ebben az ablakban keresse meg a kívánt grafikus fájlt, és kattintson a gombra, hogy elhelyezze a weboldalon Beszúrás(Beszúrás). A párbeszédpanel bezárul, és a kép az oldalra kerül.
Rizs. 15.11.
A kép tulajdonságainak beállítása
Miután elhelyezett egy képet egy weboldalon, a párbeszédpanelen be kell állítania annak tulajdonságait Kép tulajdonságai(Kép tulajdonságai) (15.12. ábra). A megnyitáshoz kattintson a képre, majd tegye a következők egyikét:
- A menüben Formátum(Formátum) válassza ki a parancsot Tulajdonságok(Tulajdonságok)
- Válasszon ki egy csapatot helyi menü Kép tulajdonságai(Kép tulajdonságai)
- Nyomja meg a billentyűkombinációt
+
Párbeszédpanel Kép tulajdonságai három lapot tartalmaz: Általános(Általános), Videofelvétel(Videó) Kilátás(Megjelenés). Nézzük meg közelebbről a testreszabási lehetőségeket ezen a képernyőn.
Színek a táblázatban
Hogyan építsünk táblázatot egy oldalon
Listák a listákon belül
Definíciók listája
Számozott lista
Felsorolásos lista
Hogyan készítsünk listát egy oldalon
A listáknak három fő típusa van: felsorolásjeles, számozott és definíciós listák. A felsorolt típusok közötti fő különbség a számozási mód és a szerkezet.
A leggyakrabban használt számozatlan, ill pontozott lista. A felsorolásjeles listát címkék határozzák meg, a címkék közötti listaelemeket pedig egy címke határozza meg
Számozott lista nagyon emlékeztet a megjelöltre. Az egyetlen különbség az, hogy egy számozott listában a grafikus jelölők helyett automatikusan sorszámok vagy betűk kerülnek minden elem elé.
A számozott lista címkék segítségével kerül megadásra. Mint benne pontozott lista, minden elemet egy címke határoz meg
- kulcsszó SZALAG.
- . Címke
- külön elemet ad meg, azaz egy definiált kifejezést és a címkét
- - a többi információ, amely a következő sorban jelenik meg, behúzva. Az információ második sorát ún meghatározás. A definíciós lista ugyanúgy megadható, mint a többi lista. Az egyetlen különbség az, hogy minden elemhez két címkére van szükség.
A listák egyik nagyszerű tulajdonsága, hogy egymásba ágyazhatók. Lista beágyazása egy listába ugyanaz, mint egy lista létrehozása. Erre nincsenek speciálisak HTML címkék. A böngésző összetévesztésének elkerülése érdekében minden belső listát zárjon be egy címkével. Akár egymásba is befektethettek különféle típusok listákon.
Játssza le az összes fenti listát
A listáknak van egy hátránya - egydimenziósak. Ez azt jelenti, hogy csak egymást követő sorokban helyezhet el információkat. A táblázatok segítségével nem csak sorokba, hanem oszlopokba is rendezheti az adatokat.
A táblázatok meghatározásához számos címkét használnak. Címkék
És
keretbe foglalja a teljes táblázatot, és számos más címke határozza meg, hogyan jelenjenek meg az információk. A táblázat mutatja teljes leírás táblázat címkék.HTML-címkék táblák felépítéséhez:
Címkék Leírás
és Ezek a címkék fedik a táblázatot. Címke
azt mondja a böngészőknek, hogy az alábbiakban a táblázat leírása található. Ha azt szeretné, hogy a sorokat és oszlopokat elválasztó rács látható legyen, adja hozzá a BORDER kulcsszót.
és ezekkel a címkékkel jelölt szöveg az fejlécként jelenik meg. A cím beállításához címkéket is használhat
És .És A címkék a szöveget sor- vagy oszlopfejlécként jelenítik meg, kissé nagyobb, félkövér betűtípussal.És A címkék határozzák meg a táblázat minden sorát. Címke opcionális, de teljesebbé és érthetőbbé teszi a HTML-kódot.És Ez a pár címke elválasztja az egyes táblázatcellák szövegét.Hozzon létre egy fájlt, amelyben öt sorból és öt oszlopból álló táblázatot készít.
Számos címke létezik, amelyek lehetővé teszik a háttérszínek és a táblázatrácsok beállítását. Az első esetben a BGCOLOR kulcsszó kerül a címkébe
következő képek:
A BGCOLOR kulcsszó mellett más módok is vannak a szín szabályozására:
BORDERCOLOR A táblázatrács színének módosítása
BORDERCOLORDARK/ A rács megváltoztatására szolgál
BORDERCOLORLIGHT egy további háromdimenziós hatással
Az asztalrács színének megváltoztatása 3D-s hatással.
lecke 12-13. Grafika használata
A képek és grafikák nagyon fontosak a WWW-n. Ez az egyetlen internetes eszköz, amely lehetővé teszi a képek és a szöveg egyidejű megtekintését a képernyőn.
Ha képet szeretne elhelyezni egy weboldalon, tudnia kell, hogyan kell alkalmazni a címkét
. Adjon meg egy címkét
és az SRC= kulcsszó a betöltendő grafikák megadásához.
A címke beírásakor vegye figyelembe, hogy a fájlnak ugyanabban a mappában kell lennie, mint a HTML-fájlnak.
HTML képek címkével hozzáadva a weboldalakhoz
. A grafika használata vizuálisan vonzóbbá teszi a weboldalakat. A képek segítenek jobban átadni a webdokumentum lényegét és tartalmát.
HTML címkék használata
Képek beszúrása HTML dokumentumba
1. Címke
Elem
egy képet és annak tartalék tartalmát képviseli, amely az alt attribútum használatával kerül hozzáadásra. Mivel az elem
kisbetűs, ajánlott egy blokkelem belsejébe helyezni, pl.
Vagy
.Címke
rendelkezik egy kötelező src attribútummal, amelynek értéke a kép abszolút vagy relatív elérési útja:
Címkéhez
A következő attribútumok állnak rendelkezésre:
1. táblázat Címke attribútumok
Attribútum Leírás, elfogadott érték alt Az alt attribútum alternatív szöveget ad a képhez. Megjelenik, ahol a kép megjelenik a betöltés előtt, vagy ha a grafika le van tiltva, és eszköztippként is megjelenik, amikor az egeret a kép fölé viszi.
Szintaxis: alt="képleírás" . !}kereszteredet A crossorigin attribútum lehetővé teszi, hogy képeket töltsön be egy másik tartomány erőforrásaiból CORS-kérésekkel. A CORS-kérésekkel a vászonra betöltött képek újra felhasználhatók. Engedélyezett értékek:
névtelen – A kereszteredetű kérelmek HTTP-fejléc használatával készülnek, és nem küldenek át hitelesítő adatokat. Ha a szerver nem ad hitelesítési adatokat annak a szervernek, amelyről a tartalmat kérik, a kép megsérül, és a használata korlátozott lesz.
use-credentials — A kereszt-eredetű kérelmet hitelesítő adatok átadásával hajtják végre.
Szintaxis: crossorigin="anonymous" .magasság A height attribútum a kép magasságát adja meg px-ben.
Szintaxis: height="300" .ismap Az ismap attribútum azt jelzi, hogy a kép a szerveren található térképkép része (a térképkép egy kattintható területekkel rendelkező kép). Ha egy térképképre kattint, a koordináták URL-lekérdezési karakterláncként kerülnek elküldésre a szervernek. Az ismap attribútum csak akkor engedélyezett, ha az elem az elem leszármazottja érvényes href attribútummal.
Szintaxis: ismap.longdesc Kibővített képleíró URL, amely kiegészíti az alt attribútumot.
Szintaxis: longdesc="http://www.example.com/description.txt" .src Az src attribútum adja meg a kép elérési útját.
Szintaxis: src="virág.jpg" .méretek Beállítja a képméretet a megjelenítési beállításoktól függően. Csak akkor működik, ha az srcset attribútum meg van adva. Az attribútum értéke egy vagy több karakterlánc, vesszővel elválasztva. srcset Létrehoz egy listát a képernyőfelbontás alapján kiválasztott képforrásokról. Használható az src attribútummal együtt vagy helyett. Az attribútum értéke egy vagy több karakterlánc, vesszővel elválasztva. 
használati térkép A usemap attribútum a képet képtérképként határozza meg. Az értéknek a # szimbólummal kell kezdődnie. Az érték a címke nevének vagy id attribútumának értékéhez van társítva szélesség A width attribútum adja meg a kép szélességét px-ben.
Szintaxis: width="500" .1.1. Kép címe
A kép címe megadható teljes egészében (abszolút URL), például:
url (http://anysite.ru/images/anyphoto.png)Vagy egy relatív útvonalon keresztül dokumentum vagy gyökérkönyvtár weboldal:
url(../images/anyphoto.png) - relatív elérési út a dokumentumból,
url(/images/anyphoto.png) - relatív elérési út a gyökérkönyvtárból.Ez a következőképpen értelmezhető:
../ - azt jelenti, hogy egy szinttel feljebb, a gyökérkönyvtárba,
images/ - lépjen a képeket tartalmazó mappába,
anyphoto.png - egy képfájlra mutat.1.2. Kép méretei
A képméretek beállítása nélkül a rajz a tényleges méretében jelenik meg az oldalon. A kép méreteit a szélesség és magasság attribútumok segítségével szerkesztheti. Ha csak az egyik attribútum van megadva, a második automatikusan kiszámításra kerül a kép arányainak megőrzése érdekében.
1.3. Grafikus fájlformátumok
JPEG formátum (Közös fotószakértői csoport). A JPEG képek ideálisak fényképekhez, és több millió különböző színt tartalmazhatnak. A képek jobban tömörítenek, mint a GIF-ek, de a szöveg és a nagy, egyszínű területek foltossá válhatnak.
GIF formátum (Grafikus csereformátum). Ideális olyan képek tömörítésére, amelyeken egyszínű területek találhatók, például logók. A GIF-ek lehetővé teszik, hogy az egyik színt átlátszóra állítsa, így a weboldal háttere átlátszóvá válik a kép egy részén. A GIF fájlok is tartalmazhatnak egyszerű animáció. A GIF-képek mindössze 256 árnyalatot tartalmaznak, ami miatt a képek foltosnak és irreális színűnek tűnnek, mint a plakátok.
PNG formátum (Hordozható hálózati grafika). A GIF és JPEG formátumok legjobb tulajdonságait tartalmazza. 256 színt tartalmaz, és lehetővé teszi az egyik szín átlátszóvá tételét, miközben a képeket kisebb méretűre tömöríti, mint egy GIF fájl.
APNG formátum (Animált hordozható hálózati grafika). A PNG formátumon alapuló képformátum. Lehetővé teszi animációk tárolását, és támogatja az átláthatóságot is.
SVG formátum (Skálázható vektorgrafika). Az SVG rajz XML formátumban leírt geometriai alakzatok halmazából áll: vonal, ellipszis, sokszög stb. A statikus és animált grafika egyaránt támogatott. A függvénykészlet különféle átalakításokat, alfamaszkokat, szűrőeffektusokat és sablonhasználati lehetőséget tartalmaz. Az SVG képek minőségromlás nélkül átméretezhetők.
BMP formátum (Bittérképes kép). Ez egy tömörítetlen (eredeti) bittérképes kép, amelynek sablonja egy pixelekből álló téglalap alakú rács. A bittérképes fájl fejlécből, palettából és grafikus adatokból áll. A fejléc információkat tárol a grafikus képről és a fájlról (pixelmélység, magasság, szélesség és színek száma). A paletta csak azokban a bittérképes fájlokban jelenik meg, amelyek palettaképeket (8 vagy kevesebb bitet) tartalmaznak, és legfeljebb 256 elemből állnak. A grafikus adatok magát a képet reprezentálják. A színmélység ebben a formátumban 1, 2, 4, 8, 16, 24, 32, 48 bit lehet pixelenként.
ICO formátum (Windows ikon). Fájl ikon tárolási formátum Microsoft Windows. Ezenkívül a Windows ikon ikonként használatos az internetes webhelyeken. Ez egy ilyen formátumú kép, amely a webhely címe vagy könyvjelzője mellett jelenik meg a böngészőben. Egy ICO fájl egy vagy több ikont tartalmaz, amelyek mérete és színe külön-külön beállítható. Az ikonok mérete tetszőleges lehet, de a leggyakoribbak a négyzet alakú, 16, 32 és 48 pixeles oldalak.
2. Címke
Címke
A címkének elérhető egy név attribútuma, amely megadja a térkép nevét. A címke name attribútumának értéke
Elem
3. Címke
Címke csak egy aktív régiót ír le az ügyféloldali képtérkép részeként. Az elemnek nincs záró címkéje. Ha egy aktív terület átfedésben van egy másikkal, akkor a területek listájából az első hivatkozás kerül megvalósításra.
2. táblázat Címke attribútumok
Attribútum Rövid leírás alt Alternatív szöveget állít be az aktív térképterülethez. koordináták Meghatározza a terület helyzetét a képernyőn. A koordinátákat hosszegységben adjuk meg, és vesszővel választjuk el:
Mert kör— a kör középpontjának és sugarának koordinátái;
Mert téglalap— a bal felső és a jobb alsó sarok koordinátái;
Mert poligon— a sokszög csúcsainak koordinátái a kívánt sorrendben, az ábra logikai kiegészítéséhez ajánlott az elsővel megegyező utolsó koordinátákat is feltüntetni.letöltés Kiegészíti a href attribútumot, és közli a böngészővel, hogy az erőforrást abban a pillanatban kell betölteni, amikor a felhasználó rákattint a hivatkozásra, ahelyett, hogy például először meg kellene nyitnia (mint egy PDF-fájl). Egy attribútum nevének megadásával így nevet adunk a betöltött objektumnak. Egy attribútum használata az érték megadása nélkül megengedett. href Megadja a hivatkozás URL-jét. Abszolút vagy relatív hivatkozási cím is megadható. hreflang Meghatározza a társított webdokumentum nyelvét. Csak a href attribútummal együtt használatos. Az elfogadott értékek a nyelvkódot jelző betűpárból álló rövidítés. média Meghatározza, hogy a fájl milyen típusú eszközökre lesz optimalizálva. Az érték bármilyen médialekérdezés lehet. rel Kibővíti a href attribútumot az aktuális és a kapcsolódó dokumentum közötti kapcsolatra vonatkozó információkkal. Elfogadott értékek:
alternatív - hivatkozás a dokumentum egy alternatív verziójára (például nyomtatott formában oldalak, fordítás vagy tükör).
szerző – hivatkozás a dokumentum szerzőjére.
könyvjelző – A könyvjelzőkhöz használt állandó URL.
help - link a segítséghez.
licenc – link a webdokumentum szerzői jogi információira.
következő/előző – az egyes URL-ek közötti kapcsolatot jelzi. Ennek a jelölésnek köszönhetően a Google meg tudja állapítani, hogy ezeknek az oldalaknak a tartalma logikai sorrendben kapcsolódik-e egymáshoz.
nofollow – tiltja keresőmotor kövesse az ezen az oldalon található hivatkozásokat vagy egy adott linket.
noreferrer - azt jelzi, hogy egy hivatkozás követésekor a böngészőnek nem szabad HTTP kérés fejlécet (Referrer) küldenie, amely információt rögzít arról, hogy az oldal látogatója melyik oldalról érkezett.
prefetch - azt jelzi, hogy a céldokumentumot gyorsítótárban kell tárolni, pl. böngésző be háttér betölti az oldal tartalmát a gyorsítótárába.
keresés – Azt jelzi, hogy a céldokumentum keresőeszközt tartalmaz.
címke – az aktuális dokumentum kulcsszavait adja meg.alak Megadja az aktív terület alakját a térképen és koordinátáit. A következő értékeket veheti fel:
rect — téglalap alakú aktív terület;
kör — kör alakú aktív terület;
poli — sokszög alakú aktív terület;
alapértelmezett - az aktív terület a kép teljes területét elfoglalja.cél Meghatározza, hogy a hivatkozásra kattintva hova kerüljön letöltésre a dokumentum. A következő értékeket veszi fel:
_self — az oldal betöltődik az aktuális ablakba;
_blank — az oldal új böngészőablakban nyílik meg;
_parent — az oldal betöltődik a szülő keretbe;
_top - az oldal a teljes böngészőablakban töltődik be.típus Megadja a hivatkozásfájlok MIME típusát, pl. fájl kiterjesztését. 4. Példa képtérkép készítésére
1) Jelölje be az eredeti képet a kívánt alakú aktív területekre. A területek koordinátái egy fotófeldolgozó programmal kiszámíthatók, pl. Adobe Photoshop vagy Festék.
Rizs. 1. Példa képjelölésre térkép létrehozásához 2) Állítsa be a kártya nevét úgy, hogy hozzáadja a címkéhez
Jpg" alt="flowers_foto" width="680" height="383" usemap="#flowers"> !}
Rizs. 2. Példa képtérkép létrehozására, amikor az egérmutatót egy virágra kattint, egy leírást tartalmazó oldalra lép.
TAPE=1 – Szabványos számozás (1,2,3,4,5, …)
TAPE=A – nagybetűk (A, B, C, D, …)
TAPE=a – Sürgős betűk (a, b, c, d, …)
SZALAG=I – római számok (I, II, III, IV, …)
TAPE=i – kisbetűs római számok (i, ii, iii, iv, …)
A definíciós listák kissé eltérnek a többi listától. Ebben az esetben két címkét használunk az egyes listaelemek leírására, nem pedig egy címkét
