"შეამოწმეთ ელემენტი" არის Firefox ბრაუზერში შემქმნელი ინსტრუმენტი, რომლის საშუალებითაც შეგიძლიათ გამოიყენოთ HTML კოდი ნებისმიერ ვებ გვერდზე. ვებ გვერდის HTML და CSS სტილის ფურცლების რედაქტირება შესაძლებელია "შეამოწმეთ ელემენტი". თქვენ შეგიძლიათ სცადოთ შეცვალოთ გვერდი, როგორც მოგწონთ და დაუბრუნოთ ის ისე, როგორც იყო, უბრალოდ გადატვირთეთ შესწორებული ვებ გვერდი.
ნაბიჯი
ნაწილი 1 2 -დან: ელემენტების შემოწმება
ნაბიჯი 1. განაახლეთ Firefox (სურვილისამებრ)
შესაძლებელია, რომ თქვენ არ გექნებათ წვდომა ამ სტატიაში განხილულ ფუნქციებზე, თუ იყენებთ Firefox– ის ძველ ვერსიას. განახლება ავტომატურად დაინსტალირდება, როდესაც შეამოწმებთ Firefox– ის რომელ ვერსიას იყენებთ.
Firefox 9 -სა და უფრო ადრეულ ვერსიებს საერთოდ არ აქვთ "შეამოწმეთ ელემენტი" ინსტრუმენტი
ნაბიჯი 2. მარჯვენა ღილაკით დააწკაპუნეთ ვებგვერდის რომელიმე ელემენტზე
თქვენ შეგიძლიათ დააწკაპუნოთ მარჯვენა ღილაკით ნებისმიერ სურათზე, ტექსტზე, ფონში ან ელემენტზე. თუ თქვენს მაუსს აქვს მხოლოდ ერთი ღილაკი, მარცხენა დაწკაპუნებისა და საკონტროლო ღილაკის კომბინაცია გამოიწვევს მარჯვენა ღილაკს.
ნაბიჯი 3. დაწკაპეთ "შეამოწმეთ ელემენტი" ჩამოსაშლელი მენიუდან
ინსტრუმენტთა პანელი გამოჩნდება ფანჯრის ბოლოში. პანელის პანელის ქვემოთ ასევე გამოჩნდება და გამოჩნდება HTML კოდი აქტიურ გვერდზე.
ნაბიჯი 4. გაიცანით არსებული ინსტრუმენტთა პანელები და პანელები
როდესაც იყენებთ "შეამოწმეთ ელემენტი", ბრაუზერის ფანჯრის ქვემოთ გაიხსნება რამდენიმე პანელი. ქვემოთ აღწერილია ინსტრუმენტების პანელის სახელები და ფუნქციები "შეამოწმეთ ელემენტი":
- ზედა რიგში არის Toolbox Toolbar. აქ არის რამოდენიმე ინსტრუმენტი, მაგრამ ჩვენ ყურადღებას გავამახვილებთ ინსპექტორის ღილაკზე მარცხნივ. დარწმუნდით, რომ ეს ღილაკი აქტიურია (მითითებულია ღილაკის ფერით, რომელიც ხდება ცისფერი) ამ სახელმძღვანელოს განმავლობაში.
- ქვემოთ არის HTML ელემენტების პურის ნამცეცების ხაზი, რომელიც მიუთითებს ამჟამად არჩეული ელემენტის ადგილმდებარეობას.
- ნავიგაციის მოთხოვნათა ფანჯარაში ნაჩვენებია ვებ – გვერდის HTML ხე ან „მარკირების ხედი“. არჩეული ელემენტის HTML იქნება მონიშნული და ცენტრირებული ამ ფანჯარაში.
- ფანჯარა მარჯვნივ აჩვენებს მიმდინარე ვებ გვერდის CSS სტილის ცხრილს.
ნაბიჯი 5. აირჩიეთ სხვა ელემენტი
როდესაც ინსტრუმენტთა პანელი ღიაა, შეგიძლიათ მარტივად შეარჩიოთ სხვა ელემენტები. ამის გაკეთების სამი გზა არსებობს:
- მოათავსეთ HTML ხაზზე მონიშნული ელემენტის აღსანიშნავად (ეს ფუნქცია მოითხოვს Firefox 34+). დააწკაპუნეთ HTML ამ ელემენტის ასარჩევად.
- დააწკაპუნეთ "ელემენტის არჩევა" ინსტრუმენტზე პანელის მარცხენა კუთხეში: მას აქვს კურსორის ფორმის ხატი ყუთის ზემოთ. გადაიტანეთ კურსორი ვებ გვერდზე ელემენტის აღსანიშნავად და დააწკაპუნეთ მის ასარჩევად.
ნაბიჯი 6. მიჰყევით HTML კოდს
დააწკაპუნეთ სადმე HTML პანელში. გამოიყენეთ მარცხენა და მარჯვენა მიმართულების ღილაკები კლავიატურაზე კოდიდან კოდზე გადასასვლელად (ეს ფუნქცია მოითხოვს Firefox 39+). ეს მეთოდი სასარგებლოა იმ ელემენტების შესარჩევად, რომლებიც ძალიან მცირეა კურსორის შესარჩევად.
- ნაცრისფერი HTML მიუთითებს ელემენტებზე, რომლებიც არ არის ნაჩვენები გვერდზე. მასში შემავალი ელემენტებია კომენტარები, როგორიცაა კვანძები და სხვა ელემენტები, რომლებიც დამალულია CSS ჩვენების თვისებით.
- დააწკაპუნეთ ისარი ყუთის მარცხნივ, შინაარსის საჩვენებლად ან დასამალად. მთლიანი შინაარსის საჩვენებლად, დააჭირეთ ისარი ღილაკზე დაჭერით alt="სურათი" ან ვარიანტი.
ნაბიჯი 7. იპოვეთ ელემენტი
მოძებნეთ საძიებო ველი (მარყუჟის ფორმის ხატი) პურის ნამცხვრის მწკრივის მარჯვენა ბოლოში. დააწკაპუნეთ საძიებო ველის გასაფართოებლად და ჩაწერეთ HTML კოდი, რომლის ძებნა გსურთ. აკრეფისას, გამოჩნდება ამომხტარი ფანჯარა, რომელშიც ნაჩვენებია შესაბამისი ძიების შედეგები. დააწკაპუნეთ ძებნის შედეგების ელემენტზე და გადაახვიეთ HTML პანელი იმ კოდზე, რომელსაც ეძებთ.
მე -2 ნაწილი 2: HTML- ის რედაქტირება
ნაბიჯი 1. გადატვირთეთ გვერდი, რომ დაიწყოთ თავიდან
თუ თქვენ ახალი ხართ ვებსაიტის შემუშავების ინსტრუმენტებში, გაითვალისწინეთ, რომ თქვენ არ ახდენთ მუდმივ ცვლილებებს თქვენს მიერ რედაქტირებული გვერდებზე. თქვენი რედაქტირებები მხოლოდ თქვენს ეკრანზე გამოჩნდება, სანამ არ გადატვირთავთ ან დახურავთ გვერდს. მოგერიდებათ ექსპერიმენტი მაშინაც კი, თუ არ იცით რა მოხდება.
ნაბიჯი 2. ორჯერ დააწკაპუნეთ HTML რედაქტირებისთვის
ორჯერ დააწკაპუნეთ შიდა HTML- ზე. ჩაწერეთ ახალი ტექსტი და დააჭირეთ Enter- ს ცვლილებების შესანახად.
ნაბიჯი 3. დააწკაპუნეთ და დაიჭირეთ ინსტრუმენტი breadcrumb– ში, რათა გამოიტანოთ მეტი ვარიანტი
გაითვალისწინეთ, რომ breadcrumb ინსტრუმენტთა პანელი ზის HTML ხესა და მის ზემოთ მდებარე ინსტრუმენტთა პანელს შორის. დააწკაპუნეთ და გამართეთ ინსტრუმენტი ამ სტრიქონში მეტი მენიუს გასახსნელად. ქვემოთ მოცემულია არსებული ვარიანტების მინიშნება (არა ამომწურავი):
- "რედაქტირება როგორც HTML" გაძლევთ საშუალებას შეცვალოთ ყველა HTML შინაარსი HTML ხიდან პირდაპირ თითოეული სტრიქონის რედაქტირების ნაცვლად.
- "დააკოპირეთ შინაგანი HTML" აკოპირებს მთელ შინაარსს კვანძის შიგნით, ხოლო "დააკოპირეთ გარე HTML" კოპირებს შინაარსს და კვანძებს (როგორიცაა ან
- "ჩასმა →" აჩვენებს რამდენიმე ვარიანტს, თუ სად უნდა ჩასვათ ასლი, მაგალითად კვანძამდე ან კვანძის პირველი შვილის შემდეგ.
- : hover,: აქტიური და: ფოკუსი შეცვლის ელემენტის გარეგნობას მომხმარებლის ურთიერთქმედებისას. შეცვლილი ეფექტები განისაზღვრება CSS სტილის ფურცლიდან (რედაქტირებადი პანელიდან მარჯვნივ).
ნაბიჯი 4. გადაათრიეთ და ჩამოაგდეთ
კოდში ელემენტების გადასალაგებლად დააწკაპუნეთ და გააჩერეთ HTML სანამ წერტილოვანი ხაზი არ გამოჩნდება. გადაიტანეთ ხაზი ხეზე ზემოთ და ქვემოთ და გაათავისუფლეთ მაუსის ღილაკი, როდესაც ხაზი არის იქ, სადაც გსურთ.
ეს ფუნქცია მოითხოვს Firefox 39 და უფრო გვიან
ნაბიჯი 5. დახურეთ დეველოპერის ინსტრუმენტთა პანელი
მთელი Inspect Element ფანჯრის დახურვისთვის დააწკაპუნეთ X ღილაკზე, რომელიც მდებარეობს CSS პანელის ზემოთ მდებარე ინსტრუმენტთა პანელის ზედა მარჯვენა კუთხეში.
Რჩევები
- თქვენ ასევე შეგიძლიათ გახსნათ ინსტრუმენტების პანელი მენიუს პარამეტრებიდან ფანჯრის ზედა ნაწილში:
- Windows: Firefox → ვებ შემქმნელი → Toggle Tools
- Mac ან Linux: ინსტრუმენტები → ვებ შემქმნელი → გადართვა ინსტრუმენტები
- Firefox 40– ს აქვს შესაძლებლობა დაიმალოს CSS პანელი, ასე რომ თქვენ გექნებათ მეტი ადგილი HTML– ის რედაქტირებისთვის. მოძებნეთ ისრის ხატი პურის ნამცხვრის მწკრივის უკიდურეს მარჯვენა კუთხეში და საძიებო ველის მარჯვნივ. დააწკაპუნეთ ამ ხატზე, რომ დაიმალოთ CSS პანელი და კვლავ დააწკაპუნეთ მის გასახსნელად.
- თქვენ ასევე შეგიძლიათ შეცვალოთ CSS პანელები, მაგრამ ისინი არ არის ჩამოთვლილი ამ სტატიაში. ინტერნეტში შეგიძლიათ იხილოთ CSS კოდის რედაქტირების ინსტრუქცია.
