პროფესიონალი ვებდიზაინერები ქმნიან ვებ – გვერდების შაბლონებს, როგორც წესი, მძლავრ გრაფიკულ რედაქტორებში, როგორიცაა Adobe Photoshop. სამუშაოს შედეგია ფაილი გამოსახულებით, რომელიც ამ ფორმით მიეწოდება მომხმარებელს. იმისათვის, რომ გამოიყენოთ მზა დიზაინი, ანუ ვებ-გვერდის დასახვა, საჭიროა შაბლონის მოჭრა.
აუცილებელია
რასტრული გრაფიკის რედაქტორი Adobe Photoshop
ინსტრუქციები
Ნაბიჯი 1
გახსენით შაბლონის ფაილი გრაფიკული რედაქტორი Adobe Photoshop- ში. მენიუდან აირჩიეთ File და Open, ან დააჭირეთ კლავიშების კომბინაციას Ctrl + O. დიალოგში, რომელიც გამოჩნდება ამის შემდეგ, გადადით კატალოგში ფაილთან ერთად, აირჩიეთ სიაში და დააჭირეთ ღილაკს "გახსნა".
ნაბიჯი 2
შაბლონის სურათის სანახავად აირჩიეთ მოსახერხებელი მასშტაბი. გამოიყენეთ მასშტაბის ხელსაწყო ან კონტექსტური მენიუს ელემენტები. აირჩიეთ მასშტაბი, რომელიც საშუალებას გაძლევთ დააყენოთ კურსორი პიქსელის სიზუსტით. ეს აუცილებელია მითითების ხაზების ზუსტად დასადგენად.
ნაბიჯი 3
ჩამოაყალიბეთ მითითების ხაზების ნაკრები შაბლონის სურათის ზემოთ. ჩართეთ მმართველთა ჩვენება დოკუმენტის ფანჯრებში, თუ ის ჯერ არ არის ჩართული. ამისათვის დააჭირეთ Ctrl + R ან მენიუდან აირჩიეთ View and Rulers.
ნაბიჯი 4
მაუსის კურსორის გადატანა ზედა მმართველზე ჰორიზონტალური მითითების ხაზის დასამატებლად. დააჭირეთ მარცხენა კლავიშს. მაუსის კურსორის გადატანა სურათის არეზე ქვემოთ. ასევე, სწორი მმართველის გამოყენებით შეგიძლიათ დაამატოთ ჰორიზონტალური ხაზები.
ნაბიჯი 5
დაამატეთ საცნობარო ხაზების საჭირო რაოდენობა და განათავსეთ ისინი შაბლონის რეგიონების დაყოფის საზღვრების გასწვრივ. ხაზებმა უნდა გაიაროს ყველა ის ადგილი, სადაც გსურთ შაბლონის მოჭრა. მათ უნდა შემოიფარგლონ ყველა სურათი და ლოგიკური არე (ლოგო, საიტის სათაური, ჰორიზონტალური და ვერტიკალური მენიუები და ა.შ.), რომლებიც წარმოდგენილი იქნება ვებ გვერდზე.
ნაბიჯი 6
გაააქტიურეთ Slice Tool. მისი ღილაკი ვერტიკალურ პანელზეა.
ნაბიჯი 7
Slice Tool- ის გამოყენებით შექმენით ჭრის ადგილების საჭირო რაოდენობა. შაბლონის ჩვენებისთვის აირჩიეთ მოსახერხებელი მასშტაბი. გამოიყენეთ მაუსი ტერიტორიების საზღვრების დასადგენად. მესამე ეტაპზე დამატებული სახელმძღვანელო მითითებები უზრუნველყოფს თქვენს მიერ შექმნილ ობიექტთა საზღვრების ზუსტ პოზიციონირებას. საჭიროების შემთხვევაში მოაწესრიგეთ არსებული ადგილები Slice Select Tool- ის გამოყენებით.
ნაბიჯი 8
შეცვალეთ ჭრის რეგიონების თვისებები, როგორც საჭიროა. გაააქტიურეთ Slice Select Tool. მარჯვენა ღილაკით დააჭირეთ სასურველ არეს. კონტექსტური მენიუში აირჩიეთ რედაქტირების ნაჭრის ოფციები. ნაჩვენები Slice Options დიალოგში აირჩიეთ ზონის ტიპი (სურათი, ცარიელი არე, ცხრილი), ფონის შევსების რეჟიმი, საჭიროების შემთხვევაში მიუთითეთ სახელი, სამიზნე URL, alt="Image" ატრიბუტის შინაარსი და სხვა მნიშვნელობები. დააჭირეთ OK- ს.
ნაბიჯი 9
შაბლონის გაჭრა. მენიუდან აირჩიეთ ფაილი და შეინახეთ ვებსა და მოწყობილობებისთვის, ან დააჭირეთ Shift + Ctrl + Alt + S. დიალოგის შენახვა ვებსა და მოწყობილობებისთვის მიუთითეთ ფორმატისა და სურათის შეკუმშვის პარამეტრები, რომელშიც მოჭრილი იქნება შაბლონი. დააჭირეთ ღილაკს შენახვა. გამოჩნდება დიალოგის შენახვა ოპტიმიზირებული როგორც.
ნაბიჯი 10
აირჩიეთ HTML და სურათები (*.html) ფაილის ტიპის ჩამოსაშლელ სიაში და ფაილის სახელის ველში შეიყვანეთ ფაილის სახელი, სადაც განთავსდება შაბლონის HTML მარკირება. ნაჭრების სიაში აირჩიეთ ყველა ნაჭერი. მიუთითეთ გამომავალი დირექტორია და დააჭირეთ ღილაკს "შენახვა".
ნაბიჯი 11
HTML ფაილი განთავსდება სამიზნე კატალოგში, რომელიც, ფაქტობრივად, მზა ვებ გვერდის შაბლონია. სურათების ქვე დირექტორიას შეიცავს სურათების ერთობლიობა, რომელშიც ორიგინალი შაბლონი იქნა მოჭრილი.
