ყველაფერი, რასაც ვიზიტორი ხედავს საიტის გვერდებზე, ბრაუზერს აჩვენებს სერვერის მიერ გამოგზავნილი დეტალური ინსტრუქციების საფუძველზე. ამ ინსტრუქციას ეწოდება გვერდის html- კოდი და შედგება ცალკეული "თეგებისგან", რომლებიც აღწერს თითოეული ელემენტის ტიპს, გარეგნობასა და ადგილმდებარეობას ინდივიდუალურად. ნებისმიერი ახალი ელემენტის (მაგალითად, სურათის) გვერდზე განთავსებისათვის, მის კოდს უნდა დაამატოთ შესაბამისი ინსტრუქცია - ნიშანი. განვიხილოთ ამის უმარტივესი გზა.
ინსტრუქციები
Ნაბიჯი 1
თუ თქვენ იყენებთ ნებისმიერი სახის შინაარსის მართვის სისტემას, დიდი ალბათობით, ის მოიცავს გვერდის რედაქტორს. პირველ რიგში, თქვენ უნდა გახსნათ სასურველი გვერდი ამ რედაქტორში. შემდგომი - შესაძლებელია ვარიანტები. საუკეთესო შემთხვევაში, გვერდის რედაქტორს ექნება "ვიზუალური რეჟიმი", სხვა სიტყვებით რომ ვთქვათ - "WYSIWYG რეჟიმი" (რასაც ხედავთ, რასაც იღებთ - "რასაც ხედავთ არის ის, რასაც მიიღებთ"). ამ რეჟიმში თქვენ აღარ დაგჭირდებათ ორიგინალი html- კოდთან გამკლავება! რედაქტორის გვერდი ისეთივე იქნება, როგორც საიტზე, საკმარისი იქნება მაუსის დაყენება სასურველ ადგილას და რედაქტორის პანელზე დააჭირეთ ღილაკს "ჩადეთ სურათი".
ნაბიჯი 2
შედეგად, გაიხსნება დიალოგური ფანჯარა, რომელშიც უნდა აირჩიოთ სასურველი სურათი. თუ ის ჯერ არ ატვირთეთ, თქვენს კომპიუტერში გამოსახულების არჩევისა და სერვერზე ატვირთვის ღილაკიც არის. გარდა ამისა, ამ დიალოგში შეგიძლიათ დააყენოთ სურათის გარშემო ჩარჩოს ფერი და სიგანე, ჩარჩოსა და სურათს შორის შევსების მანძილი და ფერი, ტექსტი ინსტრუმენტთათვის. აქ არ არის საჭირო ზომების დაზუსტება, მაგრამ გვერდის ჩატვირთვის დაჩქარების მიზეზების გამო და დიზაინის დამახინჯების თავიდან ასაცილებლად, ამის გაკეთება მაინც უკეთესია. როდესაც დიალოგის ყველა საჭირო ველი შეივსება, დააჭირეთ ღილაკს "კარგი" და შემდეგ შეინახეთ შესწორებული გვერდი.
ნაბიჯი 3
იმის გამო, რომ კონტროლის სისტემების ერთიანი სტანდარტი არ არსებობს, თქვენი სისტემის ვიზუალურ რეჟიმში სურათის ჩასმის პროცედურა შეიძლება ოდნავ განსხვავდებოდეს, მაგრამ პრინციპი იგივე იქნება. იმავე მიზეზით, WYSIWYG რეჟიმი შეიძლება არ გამოჩნდეს თქვენი საიტის მართვის სისტემაში. შემდეგ თქვენ კვლავ უნდა დაარედაქტიროთ გვერდის კოდის HTML ფორმატში (HyperText Markup Language - "ჰიპერტექსტის მარკირების ენა"). თქვენ მოგიწევთ კოდის სწორ ადგილას ჩასმა თეგი, რომელიც ბრაუზერს ეუბნება სურათის ჩვენებას აქ. უმარტივესი ფორმით, ის ასე უნდა გამოიყურებოდეს: აქ არის სურათის "ფარდობითი მისამართი" - ამ მისამართზე ბრაუზერი უნდა დაუკავშირდეს სერვერს, რომ მისგან მიიღოს გამოსახულების ფაილი. თუ მისამართი ფარდობითია, მაშინ ბრაუზერი ჩათვლის, რომ ფაილი იმავე სერვერის საქაღალდეშია, როგორც თავად გვერდზე (ან ქვე საქაღალდეში). იმისათვის, რომ არ ვცდეთ, ჯობია მიუთითოთ "აბსოლუტური მისამართი" - მაგალითად, ასე: ბუნებრივია, სერვერმა რომ ნახოს და გაგზავნოს სურათი ბრაუზერში, ის უნდა აიტვირთოს მითითებულ ადგილმდებარეობა ამის გაკეთება უმარტივესია ფაილების მენეჯერის საშუალებით, რომელიც არის ყველა შინაარსის მართვის სისტემაში, ისევე როგორც თქვენი ჰოსტინგის კომპანიის მართვის პანელში. ამის გაკეთება ასევე შეგიძლიათ FTP- პროტოკოლის გამოყენებით (ფაილის გადაცემის პროტოკოლი - "ფაილის გადაცემის პროტოკოლი"), სპეციალური პროგრამის - FTP- კლიენტის გამოყენებით. ბევრი მათგანია, როგორც ფასიანი, ისე უფასო - მაგალითად, Cute FTP, FlashFXP, WS FTP და ა.შ. მაგრამ, რა თქმა უნდა, პროგრამის ინსტალაცია, ათვისება და კონფიგურაცია დასჭირდება, ამიტომ ფაილების მენეჯერი ჩამოტვირთვისთვის საჭირო ყველაფრის ჩამოტვირთვას მოითხოვს ბრაუზერი უფრო მარტივი ვარიანტია.
ნაბიჯი 4
სურათის html- თეგის მისამართის გარდა, შეგიძლიათ მიუთითოთ დამატებითი ინფორმაცია - თეგის "ატრიბუტები". მაგალითად, alt="Image" ატრიბუტი შეიცავს ტექსტს ინსტრუმენტული მინიშნებისთვის, რომელიც გამოჩნდება მაუსის კურსორის გამოსახულების ზემოთ გადასაადგილებლად: ის შეიძლება ჩაანაცვლოს - title ატრიბუტით: - მართკუთხედის ზომა, რომელშიც ბრაუზერი უნდა იყოს სურათის ჩვენება განისაზღვრება სიგანის და სიმაღლის ატრიბუტებით: - საზღვრის ატრიბუტი განსაზღვრავს საზღვრის სიგანეს გამოსახულების გარშემო (პიქსელებში): თუ სურათს მიენიჭა ბმული, ბრაუზერი მის გარშემო ლურჯ საზღვარს დახაზავს.მისგან თავის დასაღწევად საზღვრის მნიშვნელობა დააყენეთ ნულზე: - დანარჩენი ორი ატრიბუტი შეიცავს ინფორმაციას მიმდებარე ელემენტებიდან სურათის ჩაღრმავების ოდენობის შესახებ (ტექსტის ხაზებიდან, სხვა ნახატებიდან და ა.შ.) - hspace ადგენს ზომის ჩაღრმავება ჰორიზონტალურად (მარცხნივ და მარჯვნივ), vspace - ვერტიკალურად (ქვედა და ზედა):
