საიტების შექმნისას ხშირად გიწევთ ფუნდამენტური საკითხის გადაჭრა: როგორი იქნება ქცევა გვერდზე, როდესაც ის გაიხსნება ეკრანის სხვადასხვა გარჩევადობით? აქ ორი ვარიანტია - საიტის გვერდები "რეზინის" (გაჭიმვა) ან სტატიკური. განხილული იქნება პირველი ვარიანტი. როგორიც არ უნდა იყოს თქვენი განლაგება, მონაკვეთის დიზაინის მთავარი პრინციპი არის შედარებით მასშტაბურობა.
Ეს აუცილებელია
- - HTML– ის ცოდნა;
- - html- კოდის რედაქტირების პროგრამა.
ინსტრუქციები
Ნაბიჯი 1
თქვენი საიტის შაბლონისთვის აირჩიეთ მთავარი ფაილი, რომელიც ასახავს ძირითად ნიშანს. ეს შეიძლება იყოს index.html ან index.php ფაილი. ვიზუალური საიტის შაბლონების რედაქტირების ერთ-ერთი საუკეთესო პროგრამაა Macromedia Dreamweawer. საჭირო რედაქტირება მოხდება ამ პროგრამის საფუძველზე.
გახსენით შაბლონის ფაილი ან შექმენით ახალი ბრძანებით "ფაილი" - "ახალი", კატეგორია - "ძირითადი გვერდი" - "HTML" ან კატეგორიის "დინამიური გვერდი" - "PHP". აქ განვიხილავთ ზოგად შემთხვევას, როდესაც საიტის სტრუქტურა დაფიქსირებულია ზუსტად ორი ფაილიდან ერთში.
ნაბიჯი 2
დიდი ხანია საიდუმლო არ არის, რომ არსებობს სხვადასხვა ტიპის განლაგება - მაგიდებზე, div- ბლოკებზე და კომბინირებული (მაგიდები და ბლოკები ერთდროულად). Html ტეგი პასუხისმგებელია ცხრილის განლაგებაზე
მიუთითეთ პროცენტი (100%) თითოეული თვისებისთვის. ეს მიაღწევს მაგიდის უჯრედების ავტომატურად გაჭიმვის ეფექტს ეკრანებზე ნებისმიერი გეომეტრიით. ეს შეიძლება იყოს 19 დიუმიანი მონიტორი ან სმარტფონი - თითოეული მათგანი სწორად მოახდენს შინაარსის რეპროდუცირებას.
ნაბიჯი 3
თუ საჭიროა ზუსტად მიუთითოთ შესაბამისობა ცხრილის უჯრედებს შორის, გამოიყენეთ შემდეგი მაგალითი:
| … … 1 უჯრედის შინაარსი. … | … … მე –2 უჯრედის შინაარსი. … |
აქ ნახავთ, რომ ერთ-ერთი უჯრედი მითითებულია სიგანეზე 30% ყველაფრისა, რაც თავად ცხრილისთვის არის განსაზღვრული. მარტივი გაანგარიშებით ნაჩვენებია, რომ 100% -30% = 70% რჩება მეორე უჯრედისთვის. გახსოვდეთ, რომ ამ შემთხვევაში ცხრილის ერთ უჯრედში არ უნდა იყოს მითითებული სიგანე ატრიბუტი. ბრაუზერი თავისთავად გააკეთებს ყველა გამოთვლას და სწორად გაჭიმავს მაგიდას უჯრედებით. მაგიდების შიგნით შინაარსი ასევე გაიჭიმება და სწორად შემცირდება სხვადასხვა ეკრანზე.
ნაბიჯი 4
Div განლაგების შემთხვევაში, თეგის ბლოკები ნაგულისხმევად გადაჭიმულია ეკრანის მთელ სიგანეზე და მიჰყვებიან ერთმანეთის მიყოლებით მარცხნიდან მარჯვნივ, ზემოდან ქვევით. მათი გეომეტრიის დასახვეწად შექმენით CCS კლასი ან იდენტიფიკატორი (ID), რომელშიც მიუთითებთ ატრიბუტებს და / ან უჯრის ზომისა და პოზიციის კატეგორიას. არ უნდა დაგვავიწყდეს, რომ მითითებული სტილი დაუკავშიროთ საიტის მარკირების ფაილს და დააკავშიროთ კლასი (ID) სასურველ თეგთან. ჩვეულებრივ, იგი განთავსებულია სკრიპტის დასაწყისში და განსაზღვრავს საიტის მომავალ გეომეტრიას:
… … საიტის შინაარსი. …
ან მოსწონს ეს:
… … საიტის შინაარსი. …
CSS წესის კოდი შემდეგი იქნება:
… ჩემი კლასი {
სიგანე: 30%;
სიმაღლე: 50%;
}
#myID {
სიგანე: 30%;
სიმაღლე: 50%;
}
