МАЗМҰНЫ:

КІРІСПЕ

Интернет желісінжегі суреттер

Графикалық файлдар параметрлері

Графикалық файлдар форматтары

Растрлық форматтар

JPEG (JPG)

GIF

PNG

Растрлық форматтар артықшылықтары мен кемшіліктері

Кемшіліктері

Векторлы форматтар

Векторлы форматтар артықшылықтары

Метафайлдар

Қосымша ақпараттар

Графикалық редакторлар

Веб беттердегі графикалар

Веб-беттер үшін графикалық файлдар құру

Мөлдір графика

Графикалық файлда HTML-құжаттамаларымен байланыстыру

HTML-құжаттамалардағы бейнелемелер

Қорытынды

Кіріспе

Осы лекцияда сіздер графикалық файлдар форматтарымен, олардың артықшылықтары мен кемшіліктерімен, веб беттерде қолдану мүмкіндіктерімен танысасыздар. HTML –құжаттамаларында бейнелерді қоюмен, олардың көрінетін өлшемдерін басқарумен және беттерде орналасуын үйренесіздер.
Кілттік сөздер: растрлық формат, векторлық формат, метафайлдар, бейнелеме рамкасы, теңестіру, айналға ағу.

Интернет желісіндегі суреттер

Алдыңғы лекцияларда біз веб беттердің құрудың бірнеше мысалдарын қарастырған болатынбыз. Оларда графикалық элементтер пайдаланылмаған болатын. Бастапқыда Желіде тек қана мәнітдік файлдар жүктеліп жіберілетін болды. Қазіргі уақытта графикалық элменттері жоқ беттерді сирек кездестіресіз.

Графикалық файл параметрлері

Web үшін арналған бейнелемелер файл өлшеміне, түстік модельдер және файл типіне қойылатын талаптарға байланысты болады.

Өлшем. World Wide Web үшін графикалар құру мәселелерін талқылау әдетте файл өлшемін қарастырудан және оның қажетті шамасын анықтаудан басталады. Мұнда бейнелемелер қойылатын беттер сипаттамаларын ескеру қажет болады. Көптеген дизайнерлер үшін веб – беттер үшін файлдар өлшеміне байланысты болатын шектеулер белгілі болғандықтан, олардың көпшілігі пайдаланылатын бейнелемелер фактілі өлшемдеріне жеткіліксіз назар аударады.
интернет үшін графиканы құру кезінде монитордың рұқсат етілетін қабілетін ескеру маңызды, себебі құрылатын сайттарды көптеген пайдаланушылар сол монитор арқылы көретін болады. Мысалы, орнату рұқсат ету шамасы 800 х 600 пиксел болатын мониторда құрылған графикалық символ шамамен 25 пайызға жоғары болады, яғни рұқсат ету қабілетін 640 х 480 пиксел (800/640 =600/480 =1,25) мониторда көру кезінде ол шамамен 25 пайызға үлкен болады. Дәлдігінде ол тек сонымен бірдей болатын мониторлар үшін ғана сәйкес келеді.

Көрнекі болуы үшінені 250 пиксел болатын бейнелемелер 1000 пикселге ені бойынша экранның ¼ бөлгін алатын және егер 500 пиксел болатын экран үшін жартысына ғана тең болатын айтып өтуге болады, және ол экранның өлшеміне байланысты да болады.

Монитордың рұқсат ету қабілеті белгілі бір шектерде пайдаланушымен өзгертілуі мүмкін, және ол компьютердің техникалық мүмкіндіктеріне және пайдаланушының қалауына да байланысты болады.

Пиксел (рх) - өзінің сипаттамаларына ие, мысалы, түсі («пиксел» қысқартылған сөзі негізінен "picture element" – бейнелеу элементі сөзінен шыққан) экранда бейнеленетін минимальды элемент болып табылады.

Браузерлерде көру кезінде бейнелемелердің өлшемі пикселде берілетін болғандықтан, тек пикселдерді пайдалана отырып қана дизайнмен жұмыс істеген жақсы болар еді.

Растрлық графикалар (нүктелік) үшін файл өлшемдері бейнелеменің өлшеміне тікелей байланысты болады және оларды қысқартуға немесе кішірейтуге тырысу қажет болады. Іс жүзінде бейнелемелердің өлшемдерінің кез келген өзгеруі сапасының жоғалуына алып келеді. төмендеу негізінен кіші бөлшектердің жоғалуына және тональды өзгерістерге ұшырауға алып келеді (мысалы, киім текстурасы, шаштар және адам терісі). Бірақ сипаттамалар интерполяциясының процедурасын пайдалану тіпті жоғары шамады үлкейту кезінде бейненің тұтас алғандағы қажетті сапасын алуға мүмкіндік береді. Бейненің ұлғайған кезінде әрбір пиксел жоғарылайды, байқалмайтын немесе айыру мүмкін емес нүктенің өзі көрінетін тік бұрышқа айналады. Мұнда сызықтар, шекаралар және бейне тұтас алғанда жуылып кетеді және қажетті тура келетін сапаны қарапайым әдістермен немесе тәсілдермен алу мүмкін болмайды.

Бейненің өлшемдерінің әрбір өзгерісі, оның бұрылуы және басқа түрленулері айну немесе ауытқуға алып келеді, олай болса тек қана бейнелер көшірмелерімен жұмыс істеуге тура келеді.

Түстік режим

Бейнелермен жұмыс істеу кезінде дұрыс келетін түстік режимді табу білу қажет. Бұл таңдау негізінен бейнелеудің сапасы мен файл өлшеміне әсер етеді. Графикалық редакторларда (мысалы, Photoshop) веб-графикалар үшін көпшілік жағдайда үш түстік режим пайдаланылады: Grayscale, RGB Color и Indexed Color (Lab).
Түстік бейнелеулерді сақтаған кезде оларды веб-беттерде пайдалану үшін әдетте келесі RGB Color режимін таңдау қажет болады, себебі ол 16,7 млн түске дейін көтере алады. Бірақ бұл түстердің барлығы әртүрлі браузерлермен қамтамасыз етілетін болады. Бұл негізінен жартылай түстерді көптеген бейнелеулерде сиретіп пайдалануға мүмкіндік береді.

Жартылай түстерді сирету ұнтақ ақ және қара нүктелер түрінде көрініп және бейнелеулерде өткір көріністі алуға алып келеді.

Түстерді ұқсастарына алмастыру үшін, бірақ сиретпейтін болсақ, RGB-мәндерді ең жақын болып келетін мәндермен алмастыру қажет болады, яғни 51 мен. Яғни алдыңғы бөлімдерде суреттеліп өткен веб-түстерді пайдалну қажет болады.

Пайдаланылған түстер саны неғұрлым аз болатын болса, онда файл көлемі солғұрлым кіші болады. Бірақ түстердің шектен тыс аз санын пайдалану бейнелеу сапасының нашарлауына алып келеді.
Пайдалану үшін ең қарапайым түстік режим болып - Grayscale (сұр жолақтар) есептеледі, ол барлық компьютерлер үшін қолайлы болғандықтан да қарапайым жеңіл болып саналады. Егер түс маңызды болып көрнекіленбесе, онда бейнелеуді көтеруші файл өлшемін тұс жолақтарға алмастыру арқылы едәуір шамада азайтуға болады.

Тапсырма 2.1.1. Кез келген графикалық редакторда экран өлшеміне ие бейнені салыңыздар. Оны горизонтальды түрде ақ түстің үстінен қара түспен бояңыз. Бұл жағдайдағы жолақтардың ені роль ойнамайды. Осй бейненің көшірмесін салып және оны 90 градусқа бұрыңыз, бұру кезінде жолақтар вертикальды жағдайға ауысатындай болуын қадағалаңыз.

Екі суретті де BMP форматында (немесе TIFF), GIF және JPEG форматтарында сақтаңыз. Алынған файлдарды салыстыру бейненің көрінісінің әртүрлі форматтармен сығылу дәрежесіне әсерін, сонымен қатар форматтардың өзінің ролін анықтауға мүмкіндік береді.

Тапсырма 2.1.2. 2.1.1 Тапсырмасындағы барлық операцияларды қайталаңыз және сол түстерді орындаңыз. Алдын ала ВМР (ТІҒҒ) форматында сақталған бейнелерді алыңыз. Ақ жәна қара жолақтарды басқа екі түске ауыстырыңыз. Екі нұсқаны да алдыңғы тапсырмада айтылған форматтарда сақатңыз, бірақ аталуы басқаша болсын. Нұсқалардың бірін ВМР (ТІҒҒ) форматында таңдаңыз. Оны түстердің әртүрлі санына ие – 24 разрядты, 256 – түсті, 16-түсті, монохромды әртүрлі етіп сурет түрінде сақтаңыз. Мұндағы сақтаған суреттерді салыстыру сақталған файлдар көлемінің түстік режимге байланыстылығын көрсетеді.

Тапсырма 2.1.3. 2.1.2 тапсырмасында жасалған барлық операцияларды градиентті боялмалы түсті бейнелеулер үшін қайталаңыз, мұнда градиенттің бағыты жолақтардың бағытымен сәйкес келеді. алынған файлдарды өзара салыстыру, сонымен қатар алдыңғы тапсырмаларды орындау кезіндегі алынған файлдармен салыстыру форматтың бейнелер сапасына әсерін және файлды бір түсті бояуда сығу дәрежесіне және баяу бір түстен екінші бір түске өтетін бейнемен салыстырудағы әсерін байқауға мүмкіндік береді.

Тапсырма 2.1.4. Алдыңғы тапсырмалар және зерттеулер нәтижелері бойынша график тұрғызыңыз. Форматтың бейне сапасына және оның файл өлшеміне байланыстылығы немесе әсері туралы қорытындылар жасаңыз.

Графикалық файлдар форматтары

Веб-дизайнер, графиканы пайдалана отырып көптеген эффектілерге қол жеткізуге мүмкіндік береді. Мұндағы құпия негізінен, бейненің қандай да бір текстура, элемент дизайны, сурет, мәтін блогы, логотип, диаграмма, пиктограмма, фотография және т.б. бола алуынан тұрады. Мұндағы жалғыз ғана талап, дизайнердің файлдардың форматтарының бірінде бейнені ең әлгілі браузерлермен көтеруі мүмкін болатын түрінде құру және сақтау қажеттігінен тұрады.

Растрлық форматтар

WWW жүйесінде стандарттар ретінде негізінен екі формат – GIF және JPEG қабылданған. Тағы бір формат – PNG (Portable Network Graphics) – мүмкін болатын болашақта қосылатындығы туралы түсініктемелерді қарастыруға тұрарлық. Ол растрлық форматтар болып табылады. Мұнда бейнелер жеке нүктелермен – растрлармен суреттеледі. Экран үшін нүктелер пикселге эквивалентті.

Әрбір пикселмен сандық сипаттама байланысады, ол оның жалпы тақталық түсін (егер бейне ақ қара түсті болса) немесе түсті (түрлі түсті бейнелер үшін) суреттейді.

JPEG (JPG)

Көп түсті және жартылай түсті бейнелер, алап қарастыратын болсақ фотографиялар негізінен JPEG форматында сақталады. Бұл атау негізінен жасап шығарушылар тобының аталуынан шыққан: Joint Photographic Experts Group – фотографиялар бойынша біріккен эксперттық топ.

JPEG – 16 миллион түсті көтере алады және олардың ашықтығын және фотографиялардағы жолақтарын сақтай алады. JPEG файлдарды мәліметтерді таңдамалы түрде бөліп тастау арқылы сығады, сондықтан JPEG сығу процесі жоғалымдар арқылы сығу деп аталады. JPEG әдіс суреттердегі ауытқуларды енгізе алады, әсіресе мәтінге ие немесе жұқа сызықтарға ие бейнелерді.

JPEG форматында сақтау кезінде сығу дәрежесінің анағұрлым жоғары мәніне қол жеткізуге, яғни СІҒ формарына қарағанда жоғары дәрежеде сығуға қол жеткізуге болады. Бірақ ол үшін елеулі мөлшерде ақы төлеу қажет болады. Күшті сығу картинаға жол берілмейтін ауытқуларды беруге дейін жетуі мүмкін. Файлдың әрбір сақталуы, тіпті сығу дәрежесі үлкен болмайтын болса да, картинаға өзіндік ауытқу үлесін қосуы мүмкін. Осы операцияны көп ретті қайталау бейненің елеулі шамада деградациялануына алып келуі мүмкін.

Фотографияларды барлық ақпараттарды сақтауға мүмкіндік беретін форматтарда өңджеңіз, атап айтатын болсақ– TIFF, BMP және т.б. Әруақта бейне түпнұсқасының көшірпмесін сақтауға әдеттеніңіз. Тек қана өңделуден шыққан бейненің бір жола жасалған нұсқасын ғана JPEG форматында сақтауды жүргізіңіз.

Сығу процесі жоғалулармен орын алатын болғандықтан, өте мұқият болу қажет. Атап айтатын болсақ бағдарлама Photoshop, мысалы, бейнені JPEG форматында сақтау кезінде бейненің сапа параметрлерінің мәндерін ұсынады. Әдетте ол нольден жүзге дейінгі аралықта түрленіп отырылады. Төменгі мәндері сығу кезінде JPEG формарында ақпараттар көп бөлігін алып тастайды, соның нәтижесінде кіші өлшемдерге ие файлдар алынады. Және ол керісінше де болуы мүмкін.

Мұндағы қулық негізінен парам етрлердің ең кіші мәндерінде көрінбейцтін немесе елеусіз ғана нашарлауға ие болған бейнені алу сапасының қамтамасыз етілуінде. Ең алдымен орташа мәндерден бастап және алынған нәтиижелерді мұқият бағалап отыру қажет. Егер кейбір нашарлауды байқап қалатын болсаңыз, параметр мәнін үлкейтуге әрекет етіңіз, ал егер олай болмаса – онда оны кішірейтуге тырысыңыз. Бейнені қарау кезінде келесі мезеттерге көңіл аударуыңыз қажет: бейнелер немесе бояу араларындағы анықтылық, бұрыштар арасындағы анықтылық, мысалы, мәтін айналасында немесе бейне бөлшектерінің контурлары, және оларды жалпы қабырғалық түстегі көріну айқындығы. Ол көпшілік жағдайда байқалатын болады, яғни «майланған» немесе сызық «қимылдап» тұрады.

GIF

Түстердің аз санына ие, анық шекаралары бар немесе ұсақ бөлшектері бар, мысалы, мәтінге ие бейнелерді иллюстрациялау өзіміз жоғарыда айтып өткеніміздей GIF (Graphic Interchange Format) форматында сақталуы тиіс.

GIF – негізінен 256 түс пайдаланады және тұтас түрлі түсті облыстарды тиімді сығады, және мұнда бейненің бөлшектері жоғалусыз сақталады.. Формат GIF сонымен қатар анимацияланған суреттерді құру үшін де кеңінен пайдаланылады. Ол мөлдір облыстардан тұра алады.

Пейзаждың көп түстерге ие және түстерджің бір біріне өтуі өте баяу болатын суреттерде түс ойыны және қабырғалық көлеңкелі түстер болған кезде өзінің тартымдылығының көп бөлігін жоғалтады және сол форматта сақталу кезінде елеулі ауытқуларға ие болады. Және керісінше ол тетіктер, беттер навигациялық элементтері, диаграммалар, схемалар және іскерлік графиктер және т.б. үшін жақсы таңдау болуы да мүмкінг.

PNG

Интернетте пайдалануға болатын растырлық форматтарға сонымен қатар PNG форматы да жатқызылады, бірақ ол кеңінен таралуға ие болған жоқ, және көптеген браузерлер үшін қажетті көтеретін шамада емес.

Растырлық форматтардың артықшылықтары

Қарапайымдылығы. Бейнелеудің әрбір пикселі жеке суреттеледі, және ол оның орналасуы және роліне, яғни суретте қандай роль ойнайтындығына байланысты болмайды.
Бейнеленуші ақпараттың енгізілуін (цифрлануын) автоматтандыру техникалық жеңіл жүреді. Бейнелерді енгізу үшін арналған сыртқы құрылғылардың көп түрі құрылған (сканерлер, сандық фотоаппараттар және бейне камералар, графикалықө планшеттер).
Реалистикалық тірі өнер туындыларының бірқатар эффектілерін алуға болады, мысалы, тұман немесе түтін, түстің өте жұқа етіп берілуіне қол жеткізу, болашақты перспективалы түс тереңдігін құру және тармақтылығы мен жайылғандығының тамаша дәрежесіне қол жеткізу.
Нүктелік бейнелерді сақтау үшін арналған файл форматтары стандартты болып табылады, сондықтан олар қандай графикалық редакторда нақты бейне сомдалғандығы маңызға ие болмайды.

Кемшіліктері

Нүктелік графикалар файлының көлемі бейнелеудегі пикселдер санына және түстің тереңдігіне бір жола байланысты болып табылады. Мұнда фотографияда бейнеленген екендігі мүлде маңызға ие емес: ақ дастархан типті фондағы қара нүктелер немесе солтүстік шашырау, яғни мұнда әрбір нүкте өзінің түсіне ие болады. Егер екі парам етр де бірдей болатын болса, онда файл өлшемі іс – жүзінде бірдей болып келеді.
Бейненің өлшемі негізінен монитор өлшеміне және рұқсат ету шамасына байланысты болады.
Бейнені азғана бұрышқа бұруға әрекет еткен кезде, мысалы, анық бөлінген вертикальды сызықтармен, мұнда сызықтар негізінен анық байқалатын баспалдақ тәрізді көрінеді (ол, кез келген трансформацияларда: бұрылыста, еңкеюде және т.б. нүктелік графикада ауытқуларсыз әрекет ету тіптен мүмкін еместігін білдіреді).
Растрлық бейнелерді ұлғайтқан кезе ешқандай қосымша бөлшектерді көру мүмкін болмайды. Себебі бейне нүктелерден тұрады, олай б олса бейненің өлшемінің артуы, осы нүктелердің іріленетіндігін, және тік бұрыштарға түрленетіндігін, сол арқылы бейненің көрінісінің өзгерістерге ұшырайтындығын білдіреді.

Векторлық форматтар

Бұл графикалық форматтар негізінен бейнелер туралы мәліметтерді сақтау үшін, яғни векторлық түрде ұсынылған көріністердегі мәліметтерді сақтау үшін, атап айтсақ: сызықтар, овалдар, тік бұрыштар, доғалар және т.б. сақтау үшін арналған. Осы форматтың артықшылықтарының бастыларының бірі болып, бейненің өлшемінің кез келген жағдайда өлшемінің өзгеруінде файл өлшемінің өзгермейтіндігі.

Қазіргі уақытқа дейін векторлық бейнелер негізінен веб – беттерде өте сирек кездесіп келді. Бұл жағдай Macromedia фирмасының Flash форматының қарқынды таралуымен өзгеріп кетті. Ол интернетте пайдалану үшін арнайы жасалған және гипермәтінді сілтемелерді, графикалар және анимацияларды сақтау үшін қабілетті болып табылады. Бұл Flash графикаларды қарап көру үшін арнайы бағдарламалық модуль қажет. Ол бағдарлама кіші көлемде сол форматты жасаған Macromedia фирмасымен таралады.

Векторлық формсаттың артықшылықтары мен кемшіліктері

Экономикалылығы. Дискіде көп орынның қажеті жоқ, яғни бейнені сақтау үшін көп орын жұмсалмайды: ол негізінен суреттің зі емес, ал тек қана негізгі мәліметтер сақталатындығымен түсіндіріледі, яғни сол мәліметтерді пайдалана отырып бағдарлама әрқашанда да бейнені қайтадан құрып бере алады. Файл өлшемі бейненің өлшеміне мүлде байланысты емес. Одан басқа, түстік сипаттамаларды суртеу де өз кезегінде файл өлшемін аса өсіре қоймайды.
Векторлық графикалар объектілері жай ғана трансформацияланады және ол бейнелеудің сапасына ешқандай да әсер тигізбейді.
Векторлық графика негізінен кез келген шығару құрылғысының рұқсат ету қабілеттерінің мүмкіндіктерін максималды пайдаланады: бейне әруақта сол құрылғының қабілеті қаншалықты жоғары болған сайын сапасы да жоғары болады.

Кемшіліктері

Бағдарламалық тәуелділік: әрбір бағдарлама өзінің меншікті форматында мәліметьтерді сақтайды, сондықтан бір векторлық реадакторда құрылған бейне қағида бойынша екінші бір бағдарламаның форматына қателіктерсіз конвертеле алмайды.
Векторлық принциптің күрделілігі бейнелерді суреттеуде негізінен графикалық ақпараттарды енгізілуін автоматтандыруға мүмкіндік бермейді және растрлы графика үшін сканерге ұқсас құрылғыны конструкциялау қажет болады. Растрлық бейнелерді векторлық бейнелергне түрлендіре алатын бағдарламалар әлі жетілдірілмеген.
Векторлық графика тек қана живопистік құрылғылармен шектеледі және нақты шынайы бейнелерді сомдау үшін арналмаған.

Метафайлдар

Метафайлдар растрлы және векторлық бейнелер туралы ақпараттарды және оларды көрнекілеу, яғни көзбен көрінетін түрге келтіру туралы командаларды сақтай алады. Интернетте мегафайлдарды пайдаланудың аздаған мысалдарының қатарында бірінші кезекте келесі PDF (Portable Document Format) атап көрсетуге болады, ол негізінен Adobe фирмасымен ұсынылған және белсенді әрекет етуде, сонымен қатар , Macromedia фирмасының Flash форматын да атап көрсетуге болады.

Қосымша ақпараттар

Кез келген форматта түстер санын азайту олардың ағаруына немесе көрнекілігінің сиреуіне және оның пастеризациялануына алып келуі мүмкін.

Ағып келіп қосылу – градиентте тұтас сызықты түстердің пайда болуы немесе көлеңкенің пайда болуы, олар бір бірінен өту кезеңіндегі әлсіз айырмашылықтарға ие болуы қажет.
Пастеризация бұл да ағып келіп қосылуға ұқсас, бірақ бейненің кез келген облысында түстер санының азаюында орын алауы мүмкін, ол жағдайда - бірдей түске ие дақтар пайда болады, ол түстердің баяу өзгеретін аумақтарында орын алады.

Мұндай құбылыстармен күресу үшін үлкен бейнелерді кіші бейнелерге бөлу қажет болады, бірақ негізінен басқарылатын бөліктерін бөлген дұрыс.

Графикалық редакторлар

Графикалармен бағдарламаның жұмыс істеуі, басқа құралдар сияқты қазіргі кезде өте жиі кездесетін жағдай. Егер сіз қандай да бір бағдарламамен жұмыс істеу тәжірибесіне қазірдің өзінде ие болған болсаңыз – онда тіптен жақсы. Мұндай жағдайда таныс бағдарламаларды пайдалануға болады. Егер компьютерлерде суреттермен немесе бейнлермен ешқашан жұмыс істеу сәті тумаған болса, онда оны үйренуге тура келеді. бірақ кімде кім компьютер алдында бір екі рет отырған болса да, оның Windows құрамына кіретін сурет салу - Paint бағдарламасына тап келуі немесе оны міндетті түрде пайдалануы көп кездесетін жағдай деп айтуға болмайды, аталған бағдарлама сіздің компьютеріңізде келесі мекен жай бойынша орналасқан: Іске қосу>Бағдарламалар>Стандарттылар>Paint. Бұл бағдарламамен картинкалардың көптеген түрлерімен жұмыс істеудің өзі үшін жеткілікті мүмкіндіктер бар. Осы бағдарламалардың соңғы версиялары GIF және JPEG форматтарының файлдарымен жұмыс істей алады. Графикалық редакторлар негізінен қатаң көшірмелер түрінде (қағазда) және файлдар түрінде графикалық бейнелерді құру, редакторлау және алуға мүмкіндік береді. Ол файлдар немесе қатаң көшірмелерді одан ары басқа бағдарламаларға туралауға немесе одан ары редакторлау үшін сақтауға болады. Олар негізінен тек статикалық қана емес, сонымен бірге экранда қозғалып жүре алатын анимациялық, яғни іс қимылдық картиналарды құруға мүмкіндік береді. Графикалық редакторлар негізінен әртүрлі құралдарды пайдалана алады: әртүрлі пішіндерге ие щеткалар, ластиктер, аэрографтар, қандай да бір бейнелеу бөлшектері үшін арналған кіші жұқа сызықтар салатын лупалар және т.б. сонымен қатар суреттердің кез келген бөлігін бөліп алуға және олармен жұмыс істеуге мүмкіндік береді: өзгертуге, көшіруге, алмастыруға, графикалық бейнелер кітапханасынан дайын суртерді алуға және одан ары операцияларды жасау мүмкіндігі де бар. Екі өлшемді суреттерді құру, және сонымен қатар үшөлшемді бейнелерді құру үшін де қажетті графикалық редакторлар бар. Графикалық редакторлардың мысалдары болып Ресейде кеңінен таралғандарының ішінен Paint, Photoshop, CorelDraw, ACDSee және т.б. атауға болады.
Adobe Photoshop (http://www.adobe.com) – бұл қазіргі уақыттағы ең қуатты графикалық редактор болып табылады. Оның бірқатар мүмкіндіктері төменде келтірілген:

Веб – бейнелерді оптимизациялау үшін тура келетін растрлы графиктер құру;
Бейнелермен жұмыс істейтін қуатты құралдар – қабатын пайдалану;
Мөлдір және кезектесіп келетін бейнелерді салуға мүмкіндік беретін экспорт функциясы Gif89.
Веб үшін графикаларды оптимизациялауда пайдалы болып саналатын веб – түстер палитрасы;
Фоторграфиялық операциялардың толық қатары және сүзгілер, олар негізінен түсірілімдер сапасын жақсартуға және оларды сыртқы қалауы бойынша өзгертуге мүмкіндік береді.
Типографиялық терудің қуатты функциялары және сүзгілеу мүмкіндіктері.

Adobe Illustrator (http://www.adobe.com) – векторлық графиканы құру үшін арналған тамаша құрал, ол типографиялықө терудің күрделі операцияларын орындауға мүмкіндік береді.
CorelDraw (http://www.corel.com) – векторлық гриафиканы құру үшін ең кеңінен таралған құралдардың бірі. Жеткілікті беделмен пайдаланылады, әсіресе бизнес және өнеркәсіпте аса беделге ие.
GIF Construction Set (http://www.mindworkshop.com) – РС платформасында анимациялық қимылдарға ие GIF – бейнеерді салу үшін белгілі шартты – тегін өнім.
ACDSee (http://www.acdsystems.com) – графикалық файлдарды көру үшін арналған әйгілі қарап көруші, ол әртүрлі графикалық форматтарға конвертирлеу мүмкіндігіне және редакторлау құралдарына ие болып табылады.
Macromedia Flash (http://www.macromedia.com) – анимациялар, сайттар, интерактивті қосымшаларды құру үшін арналған жеткілікті қуатты редактор.
бастаушылар үшін немесе алғашқы үйренушілер үшін Windows жүйесі негізінен графикалық редактор Paint – қа ие болып табылады, оның көмегімен компьютерлік графикамен және объектілермен жұмыс істеу нгізгі тәсілдеріңн үйренуге болады.

Веб – беттердегі графикалар

Веб – беттер үшін арнап графикалық файлдар құру

Веб – беттерге бейнелерді немесе суреттерді қою үшін не олардың дайынын алу қажет немесе оларды өзіміз жасап қоюымыз қажет. Кез келген сурет салу бағдарламасында қарапайым суреттерді салуға болады. Мысалы, оны Windows соңғы версияларындағы арнайы жасалған Paint бағдарламасының көмегімен құруға болады. Егер бағдарлама, яғни сурет салу бағдарламасы GIF немесе JPG форматтарын тарта алмайтын болса, онда алынған файлдарды арнайы бір графикалық форматты екінші бір басқа форматқа түрлендіру үшін арналған бағдарламаларды пайдалана отырып түрлендіру қажет болады. Сонымен қатар интернеттегі веб – беттердегі әртүрлі бағдарламалық пакеттерді, және кітапханаларға еркін қол жеткізетін немесе көркемдік бейнелер мол қорына ие веб – беттерден де алмасып немесе сұрап алуға болады. Ьраузер бейнесі бар веб – бетті шығарған кезде, сәйкес графикалық файл болса компьютер жадысында уақытша сақталады. Көпшілік жағдайларда файлды локальды дискіде сақтау үшін берілетін команда болады. Ең болмаған жағдайда компьютер жадысында қажетті бейнесіне ие экран бейнесін де сақтап қалуға болады. Одан ары қандай да бір редакторда бейненің қажетті бөлігін кесіп алып және өзіміздің папкамызда GIF немесе JPG форматында сақтай аламыз.
аталған жағдайлардың көпшілігінде ең әйгілі болып саналатын Photoshop пакетін пайдаланумен ғана шектелуге болады.

Сонымен қатар графикалық файлдарды алудың басқа да нұсқалары бар.

Тапсырма 2.2.1. Кез – келген веб – беттен бейнені көшіріп және сақтап қойыңыз (және бұл кезде авторлық құқық туралы мәселені де ұмытпау қажет).
Ол үшін тышқанның оң жақ клавиатурасын басып суроеттің үстіне және пайда болған контекстік мәтіннен «Суретті сақтау...» қатарын таңдап және бейнені сақтау үшін қажетті папаканың аталуын нұсқаңыз. Осы тәсілмен бастапқы сипаттамаларымен бірге суретті бастапқы форматта сақтай аласыз.

Тапсырма 2.2.2. Кез келген веб – беттен суретті көшіріп алып және оны графикалық редакторда түрлендіріңіз және форматтарда GIF және JPG сақтаңыз.
ол үшін сурет үстіне барып контекстік сәзірді шақырып (алдыңғы тапсырмадағы секілді) ішінен көшіру командасын таңдап алыңыз. Графикалық редакторды ашып және жаңа файл құрып ішіне көшірген суретті салыңыз. Көптеген редакторлар үшін қою операциясы мәзір арқылы Түзеті – Қою командасын таңдау арқылы жүзеге асырылады. Графикалық редакторда, сонымен қатар Word, PowerPoint және көптеген басқа бағдарламаларда компьютердің буферінен алған ақпараттарды Ctrl+V клавиатураларының комбинациясын басу арқылы жүзеге асыруға болады. Суретті өңдеңіз: өлшемін кішірейтіңіз. Қажет болған жағдайда сәйкес білгірлік және алғырлықпен суреттің сипаттамаларын өзгертіңіз: түстер санын, анықтылығын, контрастілігін және т.б. суреттің бір бөлігін өшіріңіз. Мәзірден Файл пунктін және одан ары Сақтау қажет командасын таңдап және сақталатын файл үшін атау беріңіз де GIF және JPG формсаттарында сақтаңыз. Екі файлда да суреттің көлемі мен сапасының қалай ерекшеленетіндігін аңғарыңыз.

Тапсырма 2.2.3. Веб – бет үшін құралдар панелінің көмегімен Суреттеу бағдарламасында Word немесе PowerPoint арқылы суреті бар бет құрыңыз. Ол үшін аталған бағдарламалардың кез келген бірін ашып, құралдарды шақрыңыз. Мысалы, Автофигуралар – Жұлдызшалар және таспалар – Вертикальды орама. Немесе "Добавить объект WordArt" дегенді таңдаңыз. Мәтінді енгізіп. Мәтіннің түсі және қаьырғалық түсін алмастырыңыз. Суретті бөліп алып және оны компьютер буферіне көшіріп қойыңыз, мысалы Ctrl+C клавиатураларының комбинациясын басу арқылы жүзеге асыруға болады. Графикалық редакторды ашып жаңа файл құрып және оған өзіңіз бөліп алған суретті компьютер буферінен алып қойыңыз. Мұнда да Ctrl+V клавиатураларының комбинациясы басылады. Алынған суретті өңдеп және оны GIF немесе JPG форматында сақтаңыз. .

Тапсырма 2.2.4. Графикалық редакторда тікелей веб – беттер үшін арналған комбинирленген суретті құрыңыз. Ол үшін графикалық редакторды ашып. Жұмыс істеу қажет болатын суретті ашыңыз. Оны редакторлаңыз: суреттің бір бөлігін алып тастап және жаңа суретті қосыңыз, фрагментті қайта салып толықтырып, ол үшін редактор құралдарын пайдаланыңыз. Суретті өзіңізге қажетті папкада аталған форматтарда сақтаңыз.
ескерту: Барлық жоғарыда аталған тапсырмаларды қарапайым Paint редакторында, және Photoshop бағдарламасында орындауға болады.

Мөлдір графика

Әрбір сурет веб – беттерде тік бұрышты формаға ие. Ол негізінен қолайлы болып табылады, себебі картинкалардың, диаграммалардың, тьетіктердің көпшілігі – тік бұрыштар болып келеді. бірақ дөңгелектер, логотиптер, карталар және басқа бейнелер дұрыс емес формаға иелері де сол түк бұрышты формаға келтірілуі тиіс. Осының нәтижесінде бейнелер тікбұрыштарды толықтыру үшін арналған өзінің меншікті қабырғалық түсіне ие болады. Егер құрылған сурет және веб – беттер бірдей түске ие болатын болса, онда ешқандай проблема туындамайды. Егер олардың қабырғалық түстері бір бірінен ерекшеленетін болса, онда тік бұрышты пішіндегі сурет көрінетін болып және беттің айқындылығы немесе көрнекілігі төмендейді. Өкінішке орай, бұл жағдайды HTML тілінің құралдарымен өзгертуге біз дәрменсізбіз. Бірақ оны суреттерді құру кезінде реттеуге болады. Суреттің қабырға түсін алып тастап және оны мөлдір ету қажет. Ол үшін файлды құру кезіндегі қабырға түспен үйлесетіндей ету қажет. Одан ары файлды GIF89A нұсқада және GIF форматта сақтаймыз.

Бағдарлама Photoshop және көптеген белгілі суреттер құруға арналған бағдарламалар суреттерді құру үшін сәйкес форматқа экспорттай алады. Суретті GIF-файл ретінде мөлдір қабырғалық түспен сақтағаннан кейін барлық дерлік браузерлер сол эффекті тарта алады және суретті экранға дұрыс шығара алады.

Тапсырма 2.2.5. Тікбұрышты емес формада суреттер логотипін мөлдір қабырғалық суретте құрыңыз және оны авторлық бетке орналастырыңыз.
файлды Photoshop бағдарламасынгда құру кезінде оның қаьырғалық түсін мөлдір ретінде анықтаңыз: File>New>Transparent. Қажетті суретті салыңыз. Файлды сақтау кезінде негізінен File>Export as>GIF89A командасын пайдаланыңыз, ол мөлдір қабырғалық түске ие суретті салу үшін жасалады. Ол үшін GIF89A экспортының арнайы сүзгісін пайдалану қажет болуы мүмкін, ол үшін арнайы құрал пайдаланылады. Осы сүзгіні Adobe (http://www.adobe.com) компаниясының сайтынан жүктеп алуға болады. Жұмысты орындаудың екінші нұсқасы. Суретті Indexed Color режиміне өткізіп және мөлдірлікті сақтауды нұсқаңыз және файлды GIF-форматында сақтаңыз.

Үшінші нұсқа: Графикалық редакторлардың заманға сай версияларында негізінен көпшілік жағдайда суреттерді тікелей веб үшін сақтауға мүмкіндік бар (Save for Web …). Мұнда негізінен әртүрлі форматтарды таңдау мүмкіндігіне ие, сонымен қатар түс тереңдігі және мөлдірлігін және т.б. параметрлерін таңдау мүмкіндігіне ие терезе ашылады. Мұнда сонымен қатар мөлдір қабырғалық түске ие суреттерді салу үшін қажетті негізгі принциптер де көрсетіледі. Бөлшектер бағдарлама версиясына байланысты және оның локальдылығына байланысты ерекшеленуі мүмкін.

Графикалық файлды HTML- құжаттамасымен байланыстыру

Веб – беттерде суреттермен жұмыс істеу құралдары шекті қарапайым болып келеді. бетте сурет орналасатын орында қарапайым түрде HTML-код енгізіледі, ол негізінен сол жерге қою қажет суреттің тұрған орнына сілтеме береді. Суреттегі теңестірулерді басқару және оның айналасына мәтін енгізуді басқару қажет болған жағдайда арнайы орнату құрылғысын туралауға немесе жұмысшы жағдайға келтіруге болады, ол суреттің көрініп тұрған өлшеміне өзгертулер енгізу үшін арналады. Браузердің бағдарламалық қамтамасыз етілуі қалғанының барлығын өзі орындайды., ол қалған мазмұнымен бірге веб – бетті экранға шығарады.
суретті ретке келтіру немесе қажетті жағдайға келтіру үшін құжаттамаларда бірыңғайлық тег IMG (Image) пайдаланылады, ол жалғыз ғана міндетті атрибутқа ие болып табылады SRC (SouRCe, негізгі көзі), суреті бар файл мекен жайын анықтап береді (URL). Мекен жайды абсолютті түрде, мысалы

<IMG SRC=http://www.eidos.ru/my.jpg>,

Сонымен қатар және салыстырмалы түрде, мысалы

Көрсетуге болады.

Бұл веб – дизайнердің басқаға алмастыруға бергісіз ең белгілі элементтерінің бірі болып табылады. Элемент негізінен суреттерді JPEG орнатуға (соның ішінже қара аралық тармақтау арқылы) және GIF форматына (мөлдір және іс-қимылға ие мүмкіндіктерді қоса алғанда) орнатуға мүмкіндік береді. Браузерлердің соңғы версиялары сонымен қатар PNG форматын да пайдалануға мүмкіндік береді, бірақ әзірге бұл форматты пайдаланудың қажет жоқ PNG.
Суреттер тегі IMG әлі бірқатар міндетті емес, бірақ қызықты және пайдалы атрибуттарға ие. Біз олардың кейбірлерін қарастырайық.
Атрибут ALT – суреттің орнынан браузермен бірге шығарылатын, графиканы көрсетуге немесе көтеруге қабілетсіз болып табылатын мәтінді көрсетуге мүмкіндік береді. Кейбір жағдайларда, негізінен сызықтардың жеткіліксіз өткізгіштік қабілеттерінде пайдаланушылар графиканың бейнеленуі ажыратып тастайды. Және соңында картина бетте толық мәтіннен кейін әлдеқайда кеш пайда болуы мүмкін. Картинаның орнына аталуының болуы барлық аталған шарттарда веб – беттерді қабылдауды жеңілдетеді. Егер бетте сурет бар болатын болса, онда ALT нұсқаланған жазба суреттің қасына тышқангды апарған сәтте қалқып шығатын болады. Параметрдегі мәтін alt міндетті түрде жақшаға алынған түрдле болуы қажет. Мәтінде алмастыру тетіктерін пайдалану және құру жүруі де мүмкін, олай болса көп қатарлы сілтеушілер де болады.

Заманауи талаптарға сай HTML тіліндегі атрибут ALT суреттеу тегі үшін міндетті болып табылады.

Тапсырма 2.2.6. Қалқып шығатын жазба сурети көлемінен үлкен бола алама соны тексеріңіз, егер олай болса қаншалықты шамаға? Бірнеше бос орындарды қатырынан жүктеуге болады ма: Бос орындарсыз әрбір қатар ұзындығы қандай шамада болады? Мәтін жазуларының түсін беруге болады ма? Мұнда сізді таңқалдыратын жағдайлар аз емес. Мысалы, соңғы сұрақты зерттеу кезінде толықтай көптеген жағдайларда қателік орын алуы мүмкін – мәтіннің бір бөлігі жазбада қалады, ал қалған бөлігі – негізгі мәтінге өтіп кетеді. Бұл не үшін болатынын ойлап көріңіз. Сізбе бір нұсқау: жақша ішіне жазылу қажет деген атрибутты қайта оқып шығыңыз. Пайда болған қателіктен қалай құтылу қажеттігін ойланыңыз.
АLIGN – бұл суреттің оны қоршап тұрған мәтінге қатысты орналасу жағдайын анықтап береді. Аргументтің мүмкін болатын мәндері — ["left" | "right" | "top" | "middle" | "bottom"] (сәйкесінше "сол жақта", "оң жақта", "жоғарыда", "ортасында", "төменінде").
ALIGN="left" мәтінмен басылатын суретті анрықтап береді. Сурет негізінен құжаттамының сол жақ полясынан бастап орналасады, ал мәтіннің келесі қатарлары оны оң жағынан басады.
ALIGN="right" Мәтінмен жабылатын суретті анықтап береді. Сурет негізінен құжаттамының оң жақ полясынан бастап орналасады, ал мәтіннің келесі қатарлары оны сол жағынан басады.

Тапсырма 2.2.7. Ойланып көріңіз атрибуттың басқа мәндерінде немсе басқа жағдайларында суреттер мәтінге қатысты қалай орналасатындығын ойланып көріңіз ALIGN. Блокнотта кодты жаза отырып және браузерде нәтижесін көре отырып тексеру жүргізіңіз. Айтпақшы, алдыңғы тапсырмаға берілетін жауап бірінші бөлімде келтірілген. Атрибуттың ұзындығы 1024 символдан аса алмайды. Басқаша айтқанда сурет өлшеміне ол байланысты емес және оның өлшемінен үлкен де бола алмайды. Атрибут BORDER – суреттің айналасындағы рамканың қалыңдығы немесе жуандығын пикселде анықтап береді. Егер ол мән нольге тең болатын болса, онда рамка жоқ деген сөз.
Атрибут LOW SRC (төмен көрсету қабілетіне ие сурет) – төмен сапаға ие және түс тереңдігі жоғары емес, соның салдарынан өлшемдері кіші және тиелудің анағұрлым жоғары қабілетіне ие картинаның мекен жайын нұсқайды. Ол негізгі суретті тек соңғысын тиеген уақыт ішінде ғана орнын алмастырады.
АтрибутНSРАСЕ – бұл атрибуттың мәні пикселде суреттің оң және сол жағынджағы бос кеңістіктің өлшемін береді. Әсіресе мәтіні бар сурет ағып келіп түскен кезде ол көкейкесті болып табылады. Бұл жағдайда негізінен мәтін суретке тығыз жабысып қалмауы үшін оның айналасына бос кеңістікті орналастырған немесе сол үшін орын қалдырған жөн.
АтрибутVSPACE – Суреттің жоғарғы және төменгі жағындағы бос орынның өлшемін пикселде көрсетеді., және ол өз кезегінде беттің сыртқы көрінісін жақсартады, суртті мәтінен бөліп тұрады.

Атрибуттар WIDTH және HEIGHT – екі атрибут та пикселдерде немесе пайыздық түрде суреттің көлденең және тік бойынша өлшемін сәйкесінше береді. Бұл негізінен графикасы бар бетті тиеудің уақытын төмендетуге мүмкіндік береді. Браузер бірден сурет үшін қөажетті рамканы бөліп және бетке мәтінді орналастыруды немесе жүктеуді жалғастырады. Графика жүктеліп болғанша, пайдаланушы мәтінді оқуды бастап жіберуі мүмкін. Суреттің өлшемін анықтау қиын емес, ол үшін графикалық файлдарды көрудің қажетті бағдарламасын пайдалану жеткілікті, мысалы, ACDSee немесе графикалық редактор Adobe Photoshop.
Сурет тегасын пайдалану мысалы:

Тапсырма 2.2.8. Графикалық редакторда үлкен емес суретті (қабырғалары 50-100 пиксел болатын) және оның дәл өлшемдерін анықтаңыз.
Тапсырма 2.2.9. Алдыңғы тапсырмада алынған картинаны мәтіннің орнасына бірінші абзацтан бастап орнатыңыз, ол файлда avtor.htm жүзеге асырылады. Мұнда негізінен тек қана атрибуттар SRC және ALT пайдаланылады. Алынған нәтижені браузерде талдаңыз. Атрибут SRC міндетті болғандықтан, бұдан ары атрибуттарды тега IMG нұсқаған кезде, біз қағида бойынша оны еске түсірмейтін боламыз. Картинаның өзін әріп секілді тұтатындығына назар аударыңыз. Ол қатарларды негізінен әріп түұрінде көрсетіп және қажетті өлшемгше келтіретін болады. Картинаның төменгі шекарасы қарапайым әріптер сияқты деңгейде орналасуы қажет. Және ол әріптен кейін мәнітінде сурет тегасы қойылған орынға орналасатын болады.
Тапсырма 2.2.10. Компьютер буферіне барлық тега IMG жүктеңіз. Оны артынан бірінші тегқа орналастырыңыз. Олардың арасындағы қашықтық арасында тіпті бос орын болмағанын қадағалаңыз. Алынған нәтижені браузерде бақылап және талдау жүргізіңіз. Тегтар сурет файлының атымен сәйкес келуі үшін сіз екі бірдей карптинаны көре аласыз, олар бір біріне тығыз байланысқан немесе тығыз орналасқан болуы шарт. Яғни сол бір картинаны мәтінге көптеп қоюға болады (және сонымен қатар әртүрлі веб – беттерге де қоюға болады).

Тапсырма 2.2.11. Картиналардың бірінде виртикальды өлшемі барын алып эксперимент жүргізіңіз. Оны үлкен және кіші етіп, яғни қасындағы басақа картиналармен салыстырғанда көлемін өзгертумен шынығыңыз. Картиналардың қайсысының мәтін қатары арасындағы ара қашықтығын қалай анықтайтындығын және қандай айырмада болатындығын қараңыз. Сонымен қатар эксперименттерде өзгеріп отырған картинаның ені өзін қалай ұстайтындығына да назар аударыңыз. Мұнда негізінен екі картина туралы сөз болып отыр, оларды дәлірек айтатын болсақ картиналардың көшірмелері туралы сөз болып отыр. Мұндағы тег әрбір суреттің сипаттамасын анықтап береді және соның ішінде көшірмелерін де анықтауға мүмкіндік береді. Бірақ егер бастапқы файлды өлшемін екінші бір картинамен алмастыратын болсаңыз, онда ол бірден барлық көшірмелерде пайда болады, барлық көшірмелерде сол сипаттамалар қайталанады. Картинаның өлшемдерінің бірі өзгерген кезде екінші өлшемі пропорционалды өзгеріп отыратындығын байқадыңыз ба? Ол негізінен барлық браузерлер үшін орындалады, сондықтан картина ауытқуларға ие болады. Мұндай орын алмауы үшін екі өлшемді де нұсқау қажет болады. Екі өлшемді де нұсқау қажеттігі бірқатар себептерге байланысты болады. Ол беттітиеу жылдамдығын бірнеше шамаға арттырады, себебі браузерге әрбір суреттің оны алғаннан кейін есептеуіне қажеттілік туындамайды. Бұл қағида негізінен кестелер ішіне орналасатын суреттер үшін нақты болып саналады.

Веб – суреттердегі барлық суреттердің өлшемдерін міндетті түрде беріңіз.

Суреттердің еннін және биіктігін тегта кіші жағына жән сонымен бірге үлкен жағына қарай өзгертуге болады. Бірақ суретті тиеу жылдамдығына бұл ешқандай да әсерін тигізбейді, себебі файл өлшемі болса өзгеріссіз қалады. Сондықтан абайлап суреттің өлшемін мүмкіндігінші кішірейтуге тырысыңыз, бірақ шектен тыс кішірейту көрушілердің ол суреттегі түсініксіздігін тудырады және шексіз кіші көлемджегі суреттерді жүктеу де қиынға соғады, себебі ондағы ақпараттар бір бөлігін жасырын болады. Ал өлшемдерді арттыру болса кері эффектіге алып келеді – сурет өлшемі орасан зор, бірақ файл жылдам тиеледі. Бірақ суретті олардың өлшемін өзгерту арқылы өлшемін өзгерту тегта ерекше жағдайларда ғана қажет болады, себебі картинаның сапасы шексіз ұлғайтуда нашарлайды. Ең жақсысы ол үшін қандай да бір графикалық редакторды пайдаланған дұрыс.
Әрбір сурет веб – беттерде тік бұрышты формаға ие. Ол негізінен қолайлы болып табылады, себебі картинкалардың, диаграммалардың, тьетіктердің көпшілігі – тік бұрыштар болып келеді. бірақ дөңгелектер, логотиптер, карталар және басқа бейнелер дұрыс емес формаға иелері де сол түк бұрышты формаға келтірілуі тиіс. Осының нәтижесінде бейнелер тікбұрыштарды толықтыру үшін арналған өзінің меншікті қабырғалық түсіне ие болады. Егер құрылған сурет және веб – беттер бірдей түске ие болатын болса, онда ешқандай проблема туындамайды. Егер олардың қабырғалық түстері бір бірінен ерекшеленетін болса, онда тік бұрышты пішіндегі сурет көрінетін болып және беттің айқындылығы немесе көрнекілігі төмендейді. Өкінішке орай, бұл жағдайды HTML тілінің құралдарымен өзгертуге біз дәрменсізбіз. Бірақ оны суреттерді құру кезінде реттеуге болады. Суреттің қабырға түсін алып тастап және оны мөлдір ету қажет. Ол үшін файлды құру кезіндегі қабырға түспен үйлесетіндей ету қажет. Одан ары файлды GIF89A нұсқада және GIF форматта сақтаймыз.

Айтпақшы, уақытиша сурет ретінде өлшемі 1 пиксел болатын қажетті биіктік пен енге ие суреттерді пайдалануға да болады.

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 пикселге артатындай етіп орналастырыңыз.

Ақпарат

Жоғарыдағы үшін файл құрып және 1 GIF бейнесін пайдалана отырып өлшемі 1 пиксел болатын веб – бет құрыңыз.

Қорытынды

Бөлімнің материалын оқи отырып сіз графикалық файлдардың әртүрлі форматтарымен таныстыңыз және олардың веб – беттерде пайдалнылу мүмкіндіктерін үйрендіңі. Жалпы қабырғалық ауысуларсыз немесе түрленулерсіз түстердің аз санына ие бейнелерді сақтауды үйрендіңіз және сонымен қатар анық графика жағдайына келгенде GIF форматын пайдаланған жөн екенін білдіңіз. Сіз веб – беттерде пайдаланылатын бейнелер үшін суреттің өлшеміне, түсінің тереңдігіне қатаң талаптар қойылатындығын және нәтиже ретінде олардың файл көлеміне әсері болатындығын білдіңіз. Мүмкіндігінше беттің жалпы көлемі 100 килобайттан жоғары болмау қажеттігін білдіңіз. Графикалық веб – дизайнның кеібір экономикалы тәсілдерін меңгердіңіз. Бейнелерді HTML – құжаттамаларға қалай қоятындығын және оның өлшемі мен ороналасуын реттеуді үйрендіңіз. Веб – беттің жақсы түріне ие болу мақсатында бейненің көрініп тұрған суретін өзгертуді және браузерге жүктеу үшін жұмсалатын уақыттьы үнемдеу мақсатында файлдардың нақты өлшемін қысқарту арқылы файл жалпы көлемін кішірейтуді үйрендіңіз. Енді сіз анағұрлым көрекі және пісіп жетілген және ақпаратты қаныққан веб – беттерді өз бетіңізше құруды үйрендіңіз.

Мактематикалық формулалармен тұман бейнесін суреттеп көріңіз :).

Әдебиеттер:

Р.Дарнелл. JavaScript: Справочник. – СПб: ПИТЕР, 1998.-192 с.
С.Дунаев.INTRANET-технологии. –М., ДИАЛОГ-МИФИ,1997.-288 с.
А.Федоров. JavaScript для всех. – М.: КомпьютерПресс, 1998.-384 с.
С.Айзекс DynamicHTML:пер. с англ.-СПб.-BHV-Санкт-Петербург,1998.-496 с.

Мәлімет сізге көмек берді ма

Жарияланған-2014-03-12 21:04:30 Қаралды-29744