საგანმანათლებლო ტექნოლოგიები - ციფრული რესურსების პორტალი

მოგესალმებით! სურათები თანამედროვე ვებგვერდების დიზაინის განუყოფელ ნაწილს წარმოადგენს. სურათი მრავალგვარია, ლოგოტიპი, ფოტოგრაფია, ილუსტრაცია, ნახატი, სქემა ანდა სულაც დიაგრამა. ამ ვიდეოგაკვეთილში თქვენ ნახავთ თუ როგორ უნდა ჩართოთ სურათი ვებგვერდზე. სურათის განთავსების დროს უნდა გაითვალისწინოთ შემდეგი მომენტები: სურათი უნდა შეესაბამებოდეს გვერდის შინაარსს უნდა ჰქონდეს საინფორმაციო დატვირთვა (და არა უბრალოდ ლამაზი სურათი) შექმნას სწორი განწყობა უნდა შეესაბამებოდეს საიტის ფერთა გამას ადვილად უნდა იტვირთებოდეს იმის გათვალისწინებით, რომ მონიტორების გამომსახველობითი უნარი არ აღემატება 72 ppi სურათის ეს პარამეტრიც 72 პიქსელის ტოლი უნდა იყოს. ზომა უნდა ერგებოდეს ეკრანის სხვადასხვა რეჟიმს სურათებისთვის სასურველია შექმნათ ცალკე საქაღალდე images სახელწოდებით დაცული უნდა იყოს საავტორო უფლებები ვებ გვერდზე სურათის გამოსატანად გამოიყენება ტეგი img. ა ემ ჯი ეს არის ცარიელი ტეგი. ანუ ამ ტეგს არ გააჩნია დამხურავი ტეგი. ამ ტეგს აუცილებლად უნდა მიეთითოს ატრიბუტი scr, (ესსიარ) რომელიც მიუთითებს სურათის სახელს. (შესაძლებელია სახელს და მდებარეობას). ვებ გვერდზე img ტეგის საშუალებით შეიძლება გამოტანილი იყოს .jpg, . png და .gif ფორმატის სურათები. ასევე .svg ეს ვი ჯი ფორმატის გრაფიკა. იმისთვის, რომ გაიაზროთ რისი გაკეთება მინდა, ნახეთ საბოლოო პროდუქტი: უნდა შევქმნათ ვებ გვერდის კოდი, რომლის შესრულების შემდეგ ბრაუზერი გამოიტანს ერთ სურათს სხვადასხვა გრაფიკულ ფორმატში. თითოეული სურათისთვის გაკეთებული იქნება მოკლე ანოტაცია მაშ ასე მე უკვე გახსნილი მაქვს Notepad++, სადაც თქვენ ხედავთ ბოლო ნამუშევარ დოკუმენტს. ეს ფაილი შეინახეთ მე-5 გაკვეთილის საქაღალდეში. ფაილის სახელად image დაარქვით. შეცვალეთ კომენტარის, title და h3 ტეგის შიგთავსი ტექსტით „გრაფიკული ფორმატები“. სანამ კოდის აკრეფას დაიწყებდეთ, მინდა გითხართ, რომ დაგჭირდებათ სურათები, რომლებიც განთავსებულია ეკრანზე მოცემულ მისამართზე. https://goo.gl/Qx4Ra8 ჩამოტვირთეთ ეს ფაილები. Summer.jpg ფაილი განატავსეთ იმავე საქაღალდეში სადაც ამ კოდს წერთ. აქვე შექმენით ახალი საქაღალდე image და მასში ჩატვირთეთ ინტერნეტში არსებული ფაილები summer.gif, summer.png და summer.svg Body ტეგის დახურვამდე არსებული ყველა ჩანაწერი წაშალეთ. ასევე ცხრილის სტილები body ტეგების შიგნით h3 სათაურის შემდეგ აკრიფეთ პარაგრაფის გამხსნელი და დამხურავი ტეგები 4 აბზაცისთვის. http://www.aconvert.com/image/png-to-svg/ პირველი პარაგრაფის ტეგის შიგნით აკრიფეთ ტექსტი: ეს სურათი ჩაწერილია .jpg (Joint Photographic Experts Group) ფორმატში. ამ ფორმატისთვის დამახასიათებელია მცირე მოცულობა და ფერების აღწერის ფართო სპექტრი. ეს არის 24 ბიტი/პიქსელი ფორმატის ფაილი. რომელიც აღიქვამს 16 მლნ ფერს. ამ სურათის ზომა არის 292 კბ. მეორე ტეგში ჩაწერეთ შემდეგი ტექსტი. წინა პარაგრაფში მოცემული სურათი ონალინ კონვერტორის დახმარებით მე დავაკონვერტირე .png (portable Network Graphics) ფორმატში, რომელიც წარმოადგენს რასტრული გრაფიკის ფორმატს. ის იყენებს მონაცემთა შეკუმშვას დანაკარგის გარეშე. არ არის შეზღუდული ფერების რაოდენობაში (32 ბიტი) და ახასიათებს მაღალი ხარისხი. .png ფორმატის ფაილი შეიძლება იყოს გამჭვირვალე. ამ ფაილის ზომა არის 541 კბ. მესამე პარაგრაფში ჩაწერეთ ტექსტი: ეს არის .gif (Graphics Interchange Format) ფორმატის ფაილი. ეს ფორმატი ინახავს შეკუმშულ მონაცემებს ინფორმაციის დაკარგვის გარეშე, მაგრამ აღიქვამს მხოლოდ 256 ფერს (8 ბიტი). ერთერთი სახალისო თვისება არის ანიმირებული გიფები. თქვენ ახლა ეკრანზე ხედვათ ამ ვიდეოგაკვეთილისთვის ფაილის კონვერტაციის პროცესს .giff ფორმატში. შედარებისთვის შემიძლია გითხრათ რომ პირველი პარაგრაფში მოცემული სურათის gif ფორმატში ფორმატირების შედეგად ფაილის ზომა 216კბ გახდა. მეოთხე ტეგში ჩაწერეთ შემდეგი ტექსტი. .svg არის Scalable Vector Graphics არის ვექტორული გრაფიკის ფორმატი. ასეთი ფაილის ზომაში გაზრდის შემთხვევაში ტეხილი ნაწიბურები არ ჩნდება მომრგვალებულ ელემნეტებზე. ახასიათებს მაღალი ხარისხი. ის შექმნილია w3c კონსორციუმის მიერ. მიღებული ფაილის ზომა არის 732 კბ. კოდში შემდეგი ცვლილებების შეტანამდე მინდა დავრწმუნდე რომ ყველაფერი უშეცდომოდ გააკეთეთ. დაიმახსოვრეთ შეტანილი ცვლილებები და დააჭირეთ Run-Lanch in chrome. რაიმე შეცდომის აღმოჩენის შემთხვევაში დააკვირდით კოდის შესაბამის ლისტინგს და შეიტანეთ ცვლილებები. კვლავ შეამოწმეთ შეტანილი ცვლილებების სისწორე. თქვენს ეკრანზე უნდა გამოჩნდეს ოთხი პარაგრაფი შესაბამისი ტექსტებით. ახლა ვეცდები ამ პარაგრაფებში ჩავსვა შესაბამისი სურათები. კურსორი გადაიყვანეთ პირველი პარაგრაფის დასაწყისში და აკრიფეთ შემდეგი კოდი img scr="summer.jpg". შეამოწმეთ მიღებული კოდი. ამისთვის შეტანილი ცვლილებები დისკეტის ნახატზე დაჭერით დაიმახსოვრეთ. დააჭირეთ Run-Lunch in Chrome. წესით პირველი აბზაცის წინ უნდა გამოვიდეს ზაფხულის სურათი. თუ დააკვირდებით ტექსტი იწყება სურათის დამთავრებისთანავე მარჯვენა ქვედა კუთხეში. ამ ეტაპზე შესაძლებელია გამოვიყენოთ კიდევ ერთი ცარიელი ტეგი br რომელიც უზრუნველყოფს ტექსტის ახალ სტრიქონზე გამოტანას. ამ ტეგს დამხურავი ტეგი არ გააჩნია. დაუბრუნდით კოდს. ვინაიდან მეორე პარაფრაფშიც საჭიროა სურათის ჩასმა, შეგიძლიათ მონიშნოთ პირველ პარაგრაფში არსებული მთელი img ელემენტი და გააკეთოთ ასლი. აქ მინდა გაგაცნოთ კიდევ ერთი ცარილი ტეგი hr ის გამოიყენება სხვადასხვა თემების გასაყოფად. /p პარაგრაფის დასრულების ტეგის შემდეგ აკრიფეთ hr. კურსორი გადაიყვანეთ მეორე პარაგრაფის დასაწყისში და ჩასვით დამახსოვრებული კოდი. ამჯერად სურათი uimage საქაღალდიდან ჩასვით. ამისთვის კოდში scr ატრიბუტის მნიშვნელობა შეცვალეთ "/images/summer.gif", ანუ მთელი scr ელემენტი ისე უნდა გამოიყურებოდეს, როგორც ეკრანზეა ნაჩვენები. მიქციეთ ყურადღება /images/ ჩანაწერს. საქაღალდეების მიმანიშნებელი დახრილი ხაზი მარჯვნივაა დახრილი, და არა მარცხნივ, როგორც ეს მიღებულია Windows ოპერაციულ სისტემაში. ამრიგად ჩანაწერი /images/ მიუთითებს რომ ვებ გვერდზე გამოსატანი სურათი განთავსებულია images საქაღალდეში. შეამოწმეთ მიღებული კოდი. ამისთვის შეტანილი ცვლილებები დისკეტის ნახატზე დაჭერით დაიმახსოვრეთ. დააჭირეთ Run-Lunch in Chrome. წესით მეორე აბზაცს უნდა დაემატოს ანიმირებული გიფი, სადაც ჩანს ზაფხულის სურათის კონვერტაციის პროცესი. აქაც დაამატეთ hr ტეგი ახალი თემის დაწყების აღსანიშნავად. კურსორი გადაიყვანეთ მესამე პარაგრაფის დასაწყისში და ჩასვით დამახსოვრებული კოდი. კოდში scr ატრიბუტის მნიშვნელობა შეცვალეთ "/images/summer.png", ანუ მთელი scr ელემენტი ისე უნდა გამოიყურებოდეს, როგორც ეკრანზეა ნაჩვენები. დაამატეთ br ტეგი. შეამოწმეთ მიღებული კოდი. დააჭირეთ დისკეტის ნახატს, შემდეგ Run-Lunch in Chrome. წესით მესამე აბზაცის წინ უნდა გამოვიდეს ზაფხულის სურათი. დაამატეთ hr ტეგი კურსორი გადაიყვანეთ მეოთხე პარაგრაფის დასაწყისში და ჩასვით დამახსოვრებული კოდი. კოდში scr ატრიბუტის მნიშვნელობა შეცვალეთ "/images/summer.svg", ანუ მთელი scr ელემენტი ისე უნდა გამოიყურებოდეს, როგორც ეკრანზეა ნაჩვენები. დაამატეთ br ტეგი. საბოლოოდ მე ასეთი ლისტინგი მივიღე. შეადარეთ თქვენს ნამუშევარს. დაიმახსოვრეთ და შეამოწმეთ ეკრანზე ჩანს ოთხი სურათი, რომელიც გამოტანილია img ტეგის გამოყენებით როგორც ნახეთ ვებ გვერდზე სურათის ჩასასმელად გამოიყენეთ ტეგი img. img ტეგს დამხურავი ტეგი არ გააჩნია სურათის მდებარეობის მისათითებლად გამოიყენეთ scr ატრიბუტი. სორს კოდიდან ერთი დონით ქვევით მდებარე საქაღალდის მისათითებლად გამოიყენეთ მარჯვნივ დახრილი ხაზი. ტექსტის ახალი სტრიქონიდან დასაწყებად გამოიყენეთ br ტეგი. ვებ გვერდზე ახალი თემატური ერთეულის მისათითებლად გამოიყენეთ დაამატეთ hr ტეგი. ხოლო ერთი დონით ზევით მდებარე ფაილის მისათითებლად გამოიყენეთ .. ორი წერტილი ( და არა ორწერტილი) ინტერნეტ სერვერზე განთავსებული სურათის გამოსტანად scr პარამეტრში გამოიყენეთ სურათის სრული URL (მაგალითად.....) ..................................... ასევე თქვენთვის შეიძლება საინტერესო იყოს ვიდეოგაკვეთილი სურათის ატრიბუტების შესახებ, რომელიც განთავსებულია ამავე ვებგვრდზე. ამით დაგემშვიდობებით გისურვებთ წარმატებას გმადლობთ ყურადღებისთვის!