დივზე დაფუძნებული ვებსაიტის საფუძვლები: 7 ნაბიჯი

2024 ავტორი: John Day | [email protected]. ბოლოს შეცვლილი: 2024-01-30 10:22

ეს გაკვეთილი გაჩვენებთ იმ ძირითად საფუძვლებს, თუ როგორ უნდა ავაშენოთ ვებ – გვერდი divs– ით. რადგან მაგიდები, რომლებიც გამოიყენება განლაგებისათვის, ბოროტებაა!: p ამის გასაგები ინსტრუქციისთვის, თქვენ უნდა იცოდეთ ძირითადი html და css. თუ რამეს ვერ გაიგებთ, მოგერიდებათ იკითხოთ. ჩემი პირადი საწყისი გვერდიც იყენებს ამ სახის div სტრუქტურას.

ნაბიჯი 1: შექმენით ძირითადი ფაილები

პირველი შექმენით თქვენი html ფაილი. ჩვენ დავამატებთ მას საფუძვლებს. Css ფაილი ახლა ცარიელი იქნება. Html ფაილი ახლა შეიცავს: ტესტი შეინახეთ თქვენი html ფაილი რაღაც. Html. თქვენ შეგიძლიათ თავად შეარჩიოთ სახელი. თქვენი css ფაილი უნდა იყოს შენახული.css. დარწმუნდით, რომ მიანიჭეთ მას იგივე სახელი, რაც აღნიშნულია html ფაილში. ამ შემთხვევაში "style.css". ჩვენ ახლა გვაქვს უბრალო ცარიელი html გვერდი ჩვენს ბრაუზერში წინასწარ გადახედვისას.

ნაბიჯი 2: შეასწორეთ სხეულის ტეგი ძირითადი ფერების, შრიფტების,…

ჩვენ დავტოვებთ html ფაილს, როგორც არის და შევცვლით მხოლოდ css ფაილს. თქვენს css ფაილს დაამატეთ შემდეგი კოდი: body {background: #444444; font-family: verdana, arial, sans-serif; ფერი: #444444; შრიფტის ზომა: 12px; margin: 0px;} ამ ცოტაოდენი კოდით ჩვენ განვსაზღვრავთ სხეულის ტეგის ყველა თვისებას. ვინაიდან მთელი შინაარსი არის სხეულის ტეგში, ეს პარამეტრები გავლენას მოახდენს მთელ გვერდზე. ფონი და შრიფტის ფერი (ფერი) დაყენებულია მუქ ნაცრისფერზე. შრიფტის ოჯახი (შრიფტი-ოჯახი) დადგენილია verdana. თუ ჩვენს ვებ – გვერდის სანახავად გამოყენებულ კომპიუტერს არ აქვს შრიფტი „verdana“, ის აჩვენებს ჩვენს საიტს შრიფტით „arial“. თქვენ შეგიძლიათ დაამატოთ მეტი შრიფტი სიაში. "Sans-serif" არის ზოგადი ტიპი, რომელიც გამოყენებული იქნება მაშინ, როდესაც თქვენ მიერ მოწოდებული შრიფტი არ იქნება ხელმისაწვდომი. შრიფტის ზომა (შრიფტის ზომა) დაყენებულია 12 პიქსელზე. ეს არის აბსოლუტური მნიშვნელობა. თუ გსურთ სხვა შრიფტის ზომის რედაქტირება (როგორიცაა სათაურები, აბზაცები, მენიუს პუნქტები, …) შეგიძლიათ გამოიყენოთ "em" ნათესავი ერთეული "px"-ის ნაცვლად. ამ გზით, თუ გსურთ თქვენი ვებსაიტის ზომის შეცვლა, თქვენ მხოლოდ სხეულის შრიფტის ზომის შეცვლა მოგიწევთ. ზღვარი დაყენებულია 0px- ზე, ტეგის ოთხივე მხარისთვის. ეს კეთდება იმისათვის, რომ საიტი დარწმუნდეს ფანჯრის ზედა ნაწილში.

ნაბიჯი 3: კონტეინერის დამატება სათაურით და შინაარსით

ჩვენ ახლა დავამატებთ კონტეინერს. ეს არის უბრალოდ ორიენტირებული განყოფილება, რომელიც შეიცავს ჩვენს მთელ ვებსაიტს. ამ კონტეინერში ჩვენ დავამატებთ კიდევ ორ დივიზიონს; შინაარსი div და სათაური div. ჩვენი html ფაილი ახლა ასე გამოიყურება: ტესტი Content Header ჩვენ დავამატებთ შემდეგ კოდს ჩვენს css ფაილში: div#container {width: 800px; ზღვარი: 0px ავტო; ფონი: #FFFFFF; padding: 0px;} div#შინაარსი {სიგანე: 800px; padding-top: 100px; ფონი: ყვითელი;} div#სათაური {სიგანე: 800px; სიმაღლე: 100 პიქსელი; ფონი: ლურჯი; პოზიცია: აბსოლუტური; ზედა: 0px;}. clearfix: შემდეგ {content: "."; ჩვენება: ბლოკი; სიმაღლე: 0; გასაგებია: ორივე; ხილვადობა: დამალული;}. clearfix {ჩვენება: inline-block;}/* დამალვა IE Mac- დან \*/. clearfix {ჩვენება: ბლოკი;} div#კონტეინერი ნიშნავს, რომ ჩვენ გვაქვს div ტეგი id "კონტეინერი". ჩვენ დავამატებთ რამდენიმე ფერს და "margin: 0px auto;" დარწმუნდით, რომ ჩვენი კონტეინერი განთავსებულია გვერდზე. ჩვენ უნდა მივცეთ შინაარსი padding-top და სათაურს აბსოლუტური მნიშვნელობა "top: 0px", რათა დარწმუნდეთ, რომ სათაური განთავსებულია სხვა შინაარსზე მაღლა. მახინჯი ფერები. უბრალოდ იმისათვის, რომ გაადვილდეს ფერების წაკითხვა და სხვადასხვა div- ების დანახვა. ჩვენ დაგვჭირდება ეს უცნაური გამწმენდი კოდი, რომ დავრწმუნდეთ, რომ ჩვენი ნავიგაცია და შინაარსის დივიზიები (დამატებულია შემდეგ ეტაპზე) არ ამოვარდება მიმდებარე განყოფილებიდან.

ნაბიჯი 4: გააკეთეთ ორი დივიზია შინაარსის განყოფილებაში ნავიგაციისა და ფაქტობრივი შინაარსისთვის

ჩვენ ახლა დავამატებთ კიდევ ორ დივიზიას შინაარსის დივიზიონში. ერთი ნავიგაციისთვის და ერთი ფაქტობრივი შინაარსისთვის. შინაარს-ტეგს შორის; თქვენ დაამატებთ ახალ კოდს:

ნავიგაცია ძირითადი შინაარსი ჩვენ დავამატებთ css კოდს სანავიგაციო და ძირითადი შინაარსის divs; div#nav {width: 200px; float: მარცხნივ; ფონი: ნარინჯისფერი;} div#maincontent {სიგანე: 600px; float: მარჯვნივ; ფონი: ვარდისფერი;} გაითვალისწინეთ ის ფაქტი, რომ ეს ორი გამყოფი ორივე მცურავია. თუ ჩვენ წინა ნაბიჯში არ ჩავდებდით დამატებით გამწმენდ კოდს, დივიზიები დაცურავდნენ მიმდებარე დივიდის გარეთ. Clearfix მეთოდით, ჩვენ დავრწმუნდებით, რომ ეს არ მოხდება.

ნაბიჯი 5: დაამატეთ რამდენიმე დამატებითი განყოფილება ნავიგაციის სტრუქტურისთვის

ჩვენ ახლა დავამატებთ დამატებით div- ებს ორივე "nav" div- ზე, რათა შევქმნათ რაიმე სახის სტრუქტურა ჩვენს ვებ გვერდზე. შეცვალეთ კოდის შემდეგი ბიტი:

• ფუ
• ბარი

ჩვენ ახლა გამოვაქვეყნებთ კოდის ნაწილს, რათა განვსაზღვროთ, თუ როგორ უნდა იყოს ნაჩვენები div "navblock". გაითვალისწინეთ, რომ navblock- ს აქვს კლასი და არა id. ამის მიზეზი მარტივია; დივიზიები id– ით მხოლოდ ერთხელ არის ნაჩვენები (სანავიგაციო ბლოკი, სათაური, ქვედა კოლონტიტული,…). კლასები გაყოფილი შეიძლება ნაჩვენები იყოს არაერთხელ. აქ ჩვენ გამოვიყენებთ კლასს. იმ შემთხვევაში თუ გვსურს მოგვიანებით დავამატოთ სხვა სანავიგაციო ბლოკი on.div.navblock {სიგანე: 180px; ზღვარი: 5px ავტომატურად; საზღვარი: 1px მყარი წითელი;} თუ ჩვენ გვსურს დავამატოთ ნავიგაციის კიდევ ერთი ბლოკი, თქვენ უბრალოდ უნდა დაამატოთ ახალი… სტრუქტურა. თქვენი კოდი ახლა ასე გამოიყურება;

• ფუ
• ბარი
• ბუ
• შორს

ნაბიჯი 6: დაამატეთ რამდენიმე დამატებითი განყოფილება სტრუქტურის მთავარ შინაარსში

ჩვენ იგივე გავაკეთებთ ძირითადი შინაარსის div- ისთვის. კოდი ახლა ასე გამოიყურება:

Lorem ipsum dolor sit amet,…

კიდევ ერთხელ, ჩვენ დავამატებთ კოდს ჩვენს css ფაილში, რათა განვსაზღვროთ, თუ როგორ უნდა გამოჩნდეს div: div.contentblock {სიგანე: 580px; ზღვარი: 5px ავტომატურად; საზღვარი: 1px მყარი თეთრი;} ჩვენ შეგვიძლია ახლა დავამატოთ შინაარსის კიდევ ერთი ბლოკი დამატებით სხვა…… მთავარ შინაარსზე div ასე;

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum,…

ნაბიჯი 7: გახადეთ საიტი ცოტა მახინჯი

ახლა მხიარული ნაწილი; ფერები. ახლა, როდესაც ჩვენ გვაქვს მთავარი div სტრუქტურა, ჩვენ შეგვიძლია შევცვალოთ ფერები რაღაც ნაკლებად ქაოტური/მახინჯი/… უბრალოდ ითამაშეთ css ფაილში არსებული ფერებით. აქ არის სურათზე ნაჩვენები ვებ გვერდის სრული html ფაილი: ტესტი

• ფუ
• ბარი
• ბუ
• შორს

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum,…

სათაური და ეს არის სრული css ფაილი: body {background: #444444; font-family: verdana, arial, sans-serif; ფერი: #444444; შრიფტის ზომა: 12px; ზღვარი: 0px;} div#კონტეინერი {სიგანე: 800px; ზღვარი: 0px ავტო; ფონი: #FFFFFF; padding: 0px;} div#შინაარსი {სიგანე: 800px; padding-top: 100px; ფონი: #FFFFFF;} div #სათაური {სიგანე: 800px; სიმაღლე: 100 პიქსელი; ფონი: #888888; პოზიცია: აბსოლუტური; ზედა: 0px;} div#nav {სიგანე: 200px; float: მარცხნივ; ფონი: #FFFFFF;} div #მთავარი შინაარსი {სიგანე: 600px; float: მარჯვნივ; ფონი: #DDDDDD;} div.navblock {სიგანე: 180px; ზღვარი: 5px ავტომატურად; საზღვარი: 1px მყარი #DDDDDD;} div.contentblock {სიგანე: 580px; ზღვარი: 5px ავტომატურად; border: 1px solid #FFFFFF;}. clearfix: after {content: "."; ჩვენება: ბლოკი; სიმაღლე: 0; გასაგებია: ორივე; ხილვადობა: დამალული;}. clearfix {ჩვენება: inline-block;}/* IE Mac– დან დამალვა \*/. clearfix {ჩვენება: ბლოკი;} ახლა თქვენ გაქვთ საფუძვლები. რასაკვირველია, ჯერ კიდევ ბევრია შესაცვლელი ფერების, შრიფტის ზომის, უკეთესი სანავიგაციო ბლოკის… მაგრამ ეს ინსტრუქციები მხოლოდ div სტრუქტურას ეხება. თუ გსურთ ნახოთ სხვა დაკავშირებული ინსტრუქციები, ყოველთვის შეგიძლიათ გკითხოთ. ვნახავ, გამონახავს თუ არა დროს.