Рәсемнәр куллану

Рәсемнәр куллану.

Web – биткә урнаштырылган рәсемнәр кулланучыны җәлеп итәргә, аны кызыклырак һәм күрсәтмәлерәк итәргә ярдәм итәләр. Алар экранда графиклар, схемалар, сызымнар күрсәтергә, электрон кибетләргә товарларын тәкъдим итәргә, гади генә әйткәндә - сайтның тышкы кыяфәтен яхшыртырга булышалар. Шуңа күрә дә без рәсемнәрне Web – биткә урнаштыру һәм аларның параметрларын көйләүне җентекләбрәк карап китик.

Файлга язылган рәсемне сайт битенә ике төрле ысул белән урнаштырырга була – рәсем буларак, яки нинди дә булса объектның (документның яки таблица ячейкасының текстурасы (фоны) буларак.

Фон рәсемен бирү өчен <BODY> һәм <TD> тегларының BACKGROUND параметрын кулланалар. Аның кыйммәте буларак рәсем файлының исемен күрсәтәләр. Файлның форматы теләсә нинди булырга мөмкин, әмма күпчелек браузерларның GIF һәм JPEG форматларын гына “тануларын” истән чыгарырга ярамый. Кайбер тиңдәш программалар PNG форматы белән дә эшли алалар. Башка форматлы файллар (TIFF, мәсәлән) махсус программа модульләре урнаштырганда гына укылалар (TIFF форматындагы файлларны карау өчен Quick Time модуле кирәк). Түбәндә документ фонын бирү мисалы китерелгән.

(Кечкенә оныгым Әмир рәсеме)

Игътибар беләнрәк карасагыз, фонның кабатланучы рәсемнән төзелгәнен күреп була. Бу хәл файлдан укылучы рәсемнең бит мәйданын каплау өчен күп тапкырлар күчерелүеннән (копирование) килеп чыга. Фон һәм биттәге мәгълүмат (битнең эчтәлеге) бер – беренән бәйсез чыгарылалар, шуңа күрә үзара тәэсир итешмиләр. CSS (Cascading Style Sheets — стильләрнең каскадлы таблицаларын кулланганда фонны йөкләү режимын да күрсәтеп була – мәсәлән, фон өчен алынган сурәтнең кабатланышын гомумән туктатырга, яки бер генә яссылыкта кабатланырга һ.б. Фонның бит чикләренә карата торышын да теләгәнчә билгеләргә ярдәм итә бу технология.

Фон сурәтен бирә торган тегларның BGCOLOR параметрын кулланып, сурәт булмаган очрак өчен фон төсен бирә аласыз. Кирәкле файл булмаса, аны йөкләү тәмамланмаган булса яки кулланучы браузер аша рәсемнәр йөкләүне туктаткан булса, Web – битнең фон рәсеме булмаячак. Мондый очраклар өчен фон рәсемендә өстенлек итүче төскә якын төсне фон төсе итеп бирү яхшы була. Бу очракта текстураны йөкләгән вакытта битнең кыяфәте кискен үзгәрмәячәк, тиешле рәсем файлы булмаганда яки браузер аша графика йөкләү туктатылган булса, Web - бит күренешенә килгән зыян минималь булачак.

Искәрмә: Еш очракларда документны йөкләгәндә кулланучы компьютерына фон сурәте соңгы чиратта гына бирелә.

Фон сурәтен сайлаганда вак детальләр белән тулган яисә үтә ачык, чуар төсләр белән тулган рәсемнәр сайламагыз. Текст астына урнаштырылган мондый текстуралар Web – битне карарга комачаулыйлар, сайт белән эшләүчене тиз арыталар. Әгәр игътибар иткән булсагыз, эшлекле һәм фәнни тематикаларга багышланган сайтларда фон рәсемнәре булмый, ә графика минимумга калдырыла. Мондый алым төп информацияне карауны яхшыртудан тыш битнең йөкләнешен дә тизләтә.

Сайтның төс гаммасын сайлауга да игътибарлы булырга кирәк. Кеше тыныч төсмерләрдәге якты фонга язылган караңгы хәрефләрне җиңелрәк укый. Караңгы фондагы якты текст авыррак укыла, мондый текстны укыганда кеше тизрәк ара. Билгеле, һәр аерым очрак өчен, туры килә торган төсләр комбинациясен табарга була.

Web – биткә, фоннан тыш, сайтны матурлау яки андагы текстны бизәү йөзеннән гади рәсемнәр дә урнаштырырга мөмкин. Төгәл функциональ билгеләнеше булуга карамастан (кнопкалар, сылтамалар һ.б.), күпчелек очракларда графика Web – битнең бизәге булып тора, кулланучыны җәлеп итә һәм эш өчен комфортлы шартлар тудыра. HTML – бит текстына сурәтне өстәү өчен (төгәлрәк әйткәндә, рәсем файлларына сылтама бирү өчен) <IMG> тегы (инглиз сүзе image – сурәт) файдаланыла. Түбәндә аның параметрлары исемлеге бирелгән, алар ярдәмендә сез рәсемнең браузер тәрәзәсендә күрсәтелү тәртипләрен бирә аласыз.

· SRC рәсем файлына юлны күрсәтә. Бу параметрның кыйммәтен куш тырнаклар эченә алу яхшы. Шулай ук файл һәм папкалар (каталоглар) исемнәренең дөрес язылышына игътибарлы булыгыз. Кайбер очракларда сервердагы программа символларның регистрын аерырга сәләтле була. Тегның шушы параметр белән язылышына мисал:

· BORDER рәсем тирәсендәге чик сызыгының киңлеген билгели (пикселларда). Чик сызыгы сылтама сыйфатында кулланылучы рәсемнәр өчен дә чыгарыла (махсус күрсәтмә бирелмәгәндә (по умолчанию) браузер андый рәсемне төсле, гадәттә зәңгәр сызык белән күрсәтә). BORDER параметры ярдәмендә сез аның үлчәмнәрен бирә аласыз, аның кыйммәте нольгә тигез булса, рамка булмаячак. Бу параметрны язуга мисал:

Олы оныгым Айнур рәсеме тирәсенә нечкә сызык сызылган (BORDER=1).

· WIDTH һәм HEIGHT параметрлары рәсемнең киңлеген һәм биеклеген билгелиләр. Бу параметрларның кыйммәтләре пикселларда күрсәтелә. Алар ярдәмендә, беренчедән, рәсем файлы йөкләтелгәнче үк күпме урын кирәк булачагын браузерга хәбәр итеп була. Мондый алым кулланучының компьютерында графика йөкләнеше туктатылган булса да, битне тизрәк ачарга булыша. Икенчедән, бу параметрларны рәсем үлчәмнәрен үзгәртү өчен файдаланып була, әмма бу юл белән рәсем масштабларын үзгәртү, кагыйдә буларак, идеалдан ерак тора. Бу параметрларны язуга мисал:

Уртанчы оныгым Илгизәр.

Рәсем масштаблары HTML редакторында (HotDog) WIDTH һәм HEIGHT параметрлары кыйммәтләрен үзгәртү юлы белән кечерәйтелгән.

· ALIGN рәсемне тигезләү режимын сайлау өчен файдаланыла. Тигезләүнең төрле режимнарын кулланып, текст белән камалган рәсемне ул урнашкан юлга карата тигезләп була. Горизонталь һәм вертикаль буенча тигезләүнең берничә режимы бар, түбәндәге таблицада <IMG> тегының ALIGN параметры ала алган кыйммәтләре исемлеге бирелгән.

Параметр кыйммәте	Тигезләү режимы
top	Рәсемнең өске чиге юлдагы иң биек элемент (символ яки башка рәсем) белән бер биеклектә куела.
texttop	Рәсемнең өске чиге юлдагы иң биек текст элементы (хәреф, цифр, махсус символ) белән бер биеклектә урнаштырыла).
middle	Рәсемнең уртасы (вертикаль буенча) юлның база сызыгы (символлар куела торган сызык) белән бер биеклектә урнаштырыла.
absmiddle	Рәсемнең уртасы юл биеклегенең уртасына урнаштырыла.
bottom	Рәсемнең түбән чиге юлның база сызыгы белән бер тигезлектә урнаштырыла.
absbottom	Рәсемнең түбән чиге юлның иң түбән ноктасы (символ яки башка рәсем) белән бер тигезлектә урнаштырыла.
left	Рәсем юлның сул кырыена күчә, текст аны уңнан әйләнеп уза.
right	Рәсем юлның уң кырыена күчә, текст аны уңнан әйләнеп уза.

· ALT альтернатив текст язу өчен файдаланыла. Кулланучы графика күрсәтүне браузер аша туктатканда яки башка сәбәпләр аркасында рәсем файлы ачыла алмаганда бу текст рәсем урынына экранга чыга. Хәзерге браузерлар бу параметрның кыйммәтен тычкан белән рәсем чыгарга тиешле урынга орынганда чыгаралар я (всплывающая подсказка). Рәсемнәр белән ясалган кнопкалар файдаланылган сайтта йөргәндә дә альтернатив текст бик уңайлы – ниндидер сәбәпләр аркасында кнопкалар ачылмаса, кулланучы аларның текстлары буенча сайтт эшли алачак. Альтернатив текст рәсемнәргә аңлатма рәвешендә дә кулланыла ала.

· HSPACE һәм VSPACE рәсем һәм аны әйләндереп алган объектлар арасындагы ераклыкны билгелиләр. HSPACE горизонталь буенча (рәсемнең уң һәм сул якларыннан), ә VSPACE вертикаль буенча (рәсемнең өске һәм аскы якларыннан) ераклыкны күрсәтергә ярдәм итәләр. Ераклык пикселларда күрсәтелә. Бу параметрларны куллану рәсемне аны әйләндереп алган текст яки башка рәсемнәрдән аерып ала, бу үз чиратында документның матурлыгын тәэмин итә. Югарыда санап кителгән мөмкинлекләрдән чыгып рәсем файлын язуны карап китик:

<IMG SRC="images/picturel.jpg" BORDER="0" WIDTH="120"

HEIGHT="120" ALIGN="top" АLТ="Пример рисунка" HSPACE="10" VSPACE="10">

Бу параметрлардан тыш, рәсем тегында ISMAP һәм USEMAP параметрлары күрсәтелергә мөмкин. Алар бу рәсем өчен карта – сурәт барлыгын белдерәләр. Шул ук вакытта рәсем Интернетның берничә объектына беръюлы катлаулы сылтама буларак файдаланыла ала.

Карта – сурәтләрне куллану идеясе шунда ки, рәсемдә махсус рәвештә берничә актив өлкә билгеләнелә, алар кайбер Web – битләргә яки башка ресурсларга сылтама буларак эшлиләр. Актив өлкәләр координаталар рәвешендә язылалар, бу язмалар рәсем белән бәйле түгелләр. Киресенчә, рәсем өчен аның кайсы карта - сурәтне файдаланачагы күрсәтелә. Шуңа күрә дә карта – сурәтне теләсә кайсы рәсем белән “бәйләп” була. Рәсем файлы ачылмаганда браузер рәсем урнаштырылырга тиешле урында рәсемнең рамкасын күрсәтә, ә карта – сурәт бу очракта үзенең эш сәләтен югалтмый.

Монда рәсем өчен бирелгән урынны күрәбез, чөнки рәсем тегында WIDTH һәм HEIGHT параметрлары ярдәмендә аның үлчәмнәре күрсәтелгән. Параметрлар бирелмәгән очракта альтернатив текст, әгәр текст та бирелмәсә - рәсем символы чыгачак.

Мәсәлән:

Югарыдагы рәсемнәрдә рәсемнең альтернатив текстында аның карта – сурәт белән бәйлелеге күренә. Бу язманы күреп, кулланучы рәсемне сервердан йөкләүгә команда бирә ала (әгәр кирәкле файл исән – сау булса, тычканның сул кнопкасын баскач, ул күренәчәк). Моның өчен күпчелек браузерларда рәсемнең махсус контекстлы меню командасы бар. Internet Explorer браузерында шундый команда файдалану түбәндәге рәсемдә бирелгән:

Ә хәзер карта – сурәтләрнең үзләре турында җентекләбрәк сөйләшик. Алар ике төрле – сервер һәм клиент типларында булалар. Сервер тибындагы карта – сурәт файдаланылса, тычкан белән рәсемгә чирттергәндә чиртү координаталары серверга тапшырылалар, анда бу зурлыклар эшкәртелә һәм сорауга җавап бирелә (гадәттә җавап буларак кулланучыга картадагы сылтама күрсәткән Web – бит җибәрелә). Клиент тибындагы карта язмалары Web – битне сурәтләүче HTML – документның үзендә булалар. Эшкәртү кулланучы (клиент) браузеры тарафыннан башкарыла. Хәзерге вакытта клиент тибындагы карта сурәтләр ешрак кулланылалар, чөнке алар җиңелрәк һәм уңайлырак язылалар (аерым файллар кирәкми – барысы да Web – битнең үзендә), моннан тыш, командаларны эшкәртү кулланучы компьютерында башкарыла һәм программаның ничек эшләвен күзәтеп торып була.

Клиент тибындагы карта – сурәтләр HTML – документта рәсемнең актив зоналарын билгеләп язу рәвешендә биреләләр һәм Интернет ресурсларына сылтама буларак хезмәт итәләр. Алар <MAP> тегы белән күрсәтеләләр (ябучы тег куела). Бу тегта рәсемдәге актив зоналар язылышы урнаштырыла. Бу зоналар турыпочмаклык, күппочмак, түгәрәк формасында була алалар. Турыпочмаклыкның югарыдагы сул һәм түбәндәге уң почмаклары координаталары, түгәрәкнең – үзәк һәм радиус координаталары, күппочмаклыкның – барлык түбәләре координаталары бирелә. Координаталардан тыш, һәр зона өчен андагы сылтаманың документы билгеләнә (яки Интернетның башка бер ресурсы, мәсәлән, электрон почта адресы яки файл). Шулай ук тычкан курсорын китергәндә чыга торган альтернатив текстны да кертергә була.

Карта – сурәтнең барлык актив өлкәләрен кулдан билгеләп чыгу бик катлаулы һәм вакыт таләп итә торган эш. Махсус редактордан файдалану эшне күпкә гадиләштерә. Мондый программалар рәсемне йөкләгәннән соң, анда визуаль рәвештә сылтама - өлкәләрне күрсәтеп, аларның параметрларын бирергә ярдәм итәләр. Аннары кулланучы командасы буенча карта – сурәтне тасвирлаучы код языла, аны файлда саклап була. Үз Web – битегезне ясаган вакытта аны куллана аласыз.

Adobe PhotoShop комплектындагы Adobe ImageReady программасы карта – сурәтләр белән эшләргә мөмкинлек бирә. Моннан тыш, шушындый ук функцияләрне үти торган кечерәк программалар да бар. Сез аларны Интернеттан таба аласыз.