Сабақтың тақырыбы: Растрлік (bmp, jpeg,gif) векторлық (AI, cdr) форматтарды қолдану
HTML-құжаттамадағы бейнелер немесе суреттер
жүктеу/скачать 216,97 Kb.
|
| HTML-құжаттамадағы бейнелер немесе суреттер
Веб – беттерді құрумен бірінші рет айналысып жатқандар үшін әдетте мұндағы графиканы пайдалану иллюстрацияларды қоюмен шектелетін болып көрінуі мүмкін, кітаптардағы немсе журналдардағы сияқты. Бірақ веб – беттерді қабылдау басқа заң бойынша өтеді. Ақпараттарды бетке орналастыру қарапайым міндетінен басқа мұнда веб – дизайнер алдында бірқатар спецификалық проблемалар тұрады: Веб-беттер автоматты түрде браузер терезесінің талаптарына сай автоматты түрде қайта түрлене алады. Көріп танысушылар құжаттамаларды браузер терезесіне шығаруды басқара алады. Веб-беттер көпшілік жағдайда әртүрлі сыртқы көрініске ие болады, ол негізінен пайдаланушы браузер типіне байланысты болып келеді. Браузердің сол бір типінің әртүрлі версиялары үшін веб – беттердің бастапқы көрінісін мүлде танымастай етіп өзгерутелер де кездеседі. Көріп қараушылармен жүргізілген браузер орнатылуының өзгертілуі веб – беттер концепциясын бұзуға алып келеді. Басқаша айтқанда веб – авторлар веб – беттердің соңғы нұсқасының үстінен толық бақылауға ие емес. Көрушілер веб – беттердің бір жола соңғы жасалған беттеріне өзгерістер енгізіп жіберуі мүмкін, яғни мониторға шыққан кезде ол соңғы бекітілген түрінен басқа түрге ие болуы да ғажап емес. Ол, мысалы, суреттерді көрсетуді ажыратып тастап немесе шрифттер өлшемін кішірейтіп, сол арқылы графикалық элементтердің орналасқан орнының өзгеруіне алып келуі мүмкін. Осы бөлімде біз негізінен веб – беттерге суреттер немесе бейнелерді орналастырудың тек қана техникалық аспектілерін қарастыратын боламыз. Дизайн мәселелері болса, басқа бөлімде жеке қарастырылатын болады. Веб-авторлар әруақта бұл туралы есінде сақтап және осы факторлардың әсерінің мүмкіндігінше төмен болуына жұмыс жасау қажет. Әрбір веб – автор суреттерді максималды тиімділікпен пайдалануға және әрбір суреттің визуальды артықшылықтарын уақытқа байланысты салыстырып отыруға, және көрушілер үшін ең тиімдісін жүктеп отыруға міндетті. Тәжірибеден әрбір беттегі файл жалпы өлшемі 50-100 Кб аспауы қажет екендігі белгілі. Осыдан суреттер өлшемін анықтауда пайдалануға болады. Веб – бетке неғұрлым көп сурет жүктелетін болса, солғұрлым әрқайсының өлшемі кіші болуы қажет. Бірнеше нұсқаулар бар, оларды сақтаған жағдайда сурттерді тиеу уақытын үнемдеуге қол жеткізуге болады. Қажет болмаған жағдайда суреттерді пайдаланудан сақтаныңыз. Егер сурет веб – беттің дизайнына өз үлесін көркемділік жағынан қоса алмаса, онда тиелудің жылдам болуы үшін қолданудың қажет болмайды. Сукреттің өлшемін максималды кішірейтуге ұмтылыңыз, оның сапасы және түстік тереңдігі де өзгермегені дұрыс. Мүмкін болғанша сұүр түстерді пайдалануға тырысыңыз. Суреттерді экранда веб – бет пайда болған кезде көрінетін өлшемге тең өлшемде құрыңыз. Оларды графикалық редакторда өңдеу қажет болған жағдайда, қажетті өлшемдегі суретті алуға тырысыңыз. Суреттер өлшемін тега IMG атрибуттарын пайдалана отырып кішірейтпеген жөн. Браузер сурет өлшемін өзгертуі мүмкін, бірақ кіші өлшемдегі суретті ұлғайту оның сапасының нашарлауына - өткізу жолақтарын рационалды емес пайдалануға алып келуі мүмкін, ол негізінен мәліметтердің көп мөлшерін тиеумен байланысты, яғни экранға шығару өлшемінен жоғары өлшем берудің қажеті жоқ. Беттегі нақты суреттелудің орнына мүмкіндігінше оның кішірейтілген өлшемін қоған дұрыс, ол бастапқы сурет үшін жасалған сілтеме түрінде болады және қалқымалы жазбаға ие болады (ALT), және сурет мазмұнына түсіндірме және оның шын мәніндегі өлшемін нұсқаушы болып табылады. Суретті барлық уақытта қайталама пайдаланыңыз, егер мүмкін болса. Барлық дерлік браузерлер жақында пайдаланылған суреттердің көшірмесін сақтайды, ол негізінен локальды қатаң дискіде КЭШ сақталады. Белгілі бір суретті қайтара пайдаланған кезде басқа орында немесе сол веб – бетте браузер өзінің КЭШ жадысында сақталған суретті қалпына келтіре алады, қайтадан жүктеудің қажеті болмайды. Тетіктер және логотиптер – қайтара пайдалану үшін арналған алғашқы кандидаттар болып табылады. Ең тьиімді болып саналатын файл форматын пайдаланған жөн, және ол әрбір сурет үшін қажет нәрсе. Барлық уақытта браузер жылдам байқап және веб – бетке соңғы нұсқасын жылдам жүктеуге қабілетті болатындай сурет өлшемін беріңіз және барлық суреттердің ашылуын күтпестен сол қажетті суретті жүктеуге көшеді. Сізге бәлкім графикалық файлдардың рұқсат етілуі туралы оқу бұрын кездескен болатын. Мысалы, бір тамаша кітапта "ADODE Web-дизайн және басқа басылымдарда. Немес Пайдаланушының энциклопедиясы 1998 жылы шыққан нөмірінде келесідей жазылған: "Іс жүзінде ең төменгі рұқсат ету шегін пайдаланыңыз. Көптеген мониторлар 72-96 шегіндегі көрсету қабілетіне ие 72-96 dpi (дюйм шаққандағы нүкте).Рұсат ету немесе көрсету қабілеті 96 dpi жоғары болатын суреттерді пайдаланған кезде мониторда файлдар өлшемі едәуір шамада артады, мұнда экрандың көріністің сапасы қанша тырыссақ та жоғарылатуға болмайды. Осыны тексеріп көріңіз! Тапсырма 2.2.12. Өлшемдері экранның көріну бөлігінен азғана кіші болатын төрт файл құрыңыз, мысалы, қабырғаларын қоса алғанда өлшемі 400 пиксел болатындай етіп. Біріншісі үшін дюймге 72 пиксел рұқөсат ету шегін беріңіз, ал екінші үшін 96, үшінші үшін 300, баспа үшін қажетті шама, ал төртінші үшін (о масқара) – дюимге 1 пиксел ғана рұқсат етілу шегін беріңіз. Әрбірінде горизонтальды, вертьикальды және диагональды сызықтарды салып, бірақ мұнда тік сызықтарды салу міндетті болып саналмайды. Осы файлдарды бір форматта сақтаңыз., мысалы, JPG және жоғары сапаны көрсетіңіз. Файлдар өлшемдерін салыстырыңыз. Таңқаларлық жағдай, барлық файлдар өлшемі бір біріне сәйкес келеді. осы файлдардың барлығын веб – бетке орналастырып және оны браузерде тамашалаңыз. Міне енді өлшемдерінде және суреттер сапасындағы айырмашылықтарды байқауға болады. Біз сонда барлық мүмкін болатын бағыттардағы сызықтарды босқа салған болдық па. Себебі біз суреттерді салыстырудағ айтарлықтай айырмашылықты байқамай отырмыз. Бірақ осы суреттерді принтерде басып шығаруға әрекет жасамаңыз, егер солй болатын болса, айырмашылық айдан анық көрінетін болады. Суреттер бірнеше сантиметрге тең өлшемде болады. Және кейбірі метрден асып түседі. Мұндағы рұқсат ету шегі болса үлкен роль атқарады. Мұнда ұзындығы жәнее енінде пикселдер айырымы байқалады. Мұндағы әрбір пиксел белгілі бір ақпаратқа ие болады. Ене себепті экранда біз айырмашылықтарды кқрмегеніміз түсінікті болды. Рұқсат етуіне байланыссыз әрбір сурет әрбір бет бойынша өзара 400 пиксел өлшемге ие болады. Оларды біз солай көрген болатынбыз. Тапсырма 2.2.13. Ал енді жоғары сапалы суретпен аталған экспериментті қайталаңыз, яғни ол үшін пайдаланылатын сурет рұқсат етілуі жоғары сканер арқылы түсірілуі тиіс. Суреттің көшірмесін жасап және оны бірдей өлшемдермен (бастапқылармен салыстырғанда салыстырмалы кішірейтілген) және әртүрлі рұқсат етілу шегімен сақтаңыз. Нәтижеде алынған суреттерді салыстырып және олардың файлдарының өлшемін де салыстырыңыз. Қорытынды жасаңыз. Тапсырма 2.2.14. Соңғы эксперимент алдыңғы эксперименттен тек қана бастапқы сапалы суреттің жоғарғы рұқсат етілу шегі аз болатындығымен, ал оның көшірмесінде сақтау кезінде әртүрлі форматтардағы рұқсат етілу шегі әртүрлі болуымен ерекшеленуі тиіс. Сирек пайдаланылатын, бірақ қызықты болып саналатын атрибут GALLERYIMG тега IMG назар аударыңыз. Ол негізінен суретт ері бар құралдар панелінен тарта алады. Аталған құралдар панелі тышқанның нұсқаушысын суретке алып барып табуға және картинаны жылдам сақтауға мүмкіндік береді, сонымен қатар оны басып шығаруға, почта арқылы жіберуге, Менің суреттерім деп аталатын папканы құруға мүмкіндік береді. Өздігінен осы панель тек қана 130 жоғары пикселге тең өлшемдерде ашылады. Бірақ оны жоғарыда аталған атрибут көмегімен қосып қоюға болады. Ол келесі yes (немесе true) және no (немесе false) мәндерін қабылдай алады. Келесіні жасап көріңіз. Гипермәтінді құжаттамалар негізінен дизайнерге өздігінен өрнектеу үшін орасан зор еркіндікті береді. Мұндағы қиылыспалды сілтемелер, мультимедиялық объектілер, тұрғызылған немесе жүктелген графиканы басқару және құжаттамаларды көру процесін басқару – мұндай қуатты құралдарды баспалық басылымдарды дайындаудың дәстүрлі технологиялары ұсына алмайды. Осындай бейнелерді қолданудың бірнеше мысалын тізіп шығайық. Бұл ең алдымен горизонталь немесе көлденеңі бойынша бос орындар. Өлшемдері 1 пиксел болатын бейнелер реттеуді қажет ететін қатарлар басына қарай орнатылады, мысалыға, азат жолды тастау. Бос орыннның іздеп отырған шамасын бейнелердің горизонтальды өлшемін беру есебінен алуға (WIDTH) немесе көпшілік жағдайда көлденең поляларды беру арқылы (HSPACE) немесе IMG беру арқылы. Сол схеманы қажетті қатар аралық қашықтыққа тапсырыс беру үшін де пайдалануға, сонымен қатар арасы ашылған әріптерден құралған тақырыпты құруға, сөздер арасындағы бос орындарды арттыруға және кптеген басқа да әрекеттерді орындау үшін пайдалануға болады. Тапсырма 2.2.15. Беттерде авторлар туралы оң жақ жоғарғы бұрышқа «ақпарат» сөзін, сөз ішінде әрбір келесі әріпке дейінгі қашықтық 2 пикселге артатындай етіп орналастырыңыз.
жүктеу/скачать 216,97 Kb. Достарыңызбен бөлісу:
|