«Элементті тексеру» - кез келген веб -бетте HTML кодын бақылау үшін қолдануға болатын Firefox браузеріндегі әзірлеуші құралы. Веб -беттің HTML және CSS стиль кестелерін «Элементті тексеру» көмегімен өңдеуге болады. Сіз өңдеген веб -бетті қайта жүктеу арқылы бетті өзіңіз қалағандай өңдеуге және оны бұрынғы күйіне қайтаруға тырысуға болады.
Қадам
2 бөлімнің 1 бөлігі: Элементтерді тексеру
Қадам 1. Firefox жаңарту (міндетті емес)
Егер сіз Firefox -тың ескі нұсқасын қолдансаңыз, осы мақалада талқыланған мүмкіндіктерге қол жеткізе алмауыңыз мүмкін. Жаңарту Firefox -тың қай нұсқасын қолданғаныңызды тексерген кезде автоматты түрде орнатылады.
Firefox 9 және одан бұрынғы нұсқаларында «Элементті тексеру» құралы мүлде жоқ
Қадам 2. Кез келген веб-бет элементін тінтуірдің оң жақ түймешігімен нұқыңыз
Кез келген суретті, мәтінді, фонды немесе элементті тінтуірдің оң жақ түймешігімен басуға болады. Егер тышқанның бір ғана батырмасы болса, тінтуірдің сол жақ батырмасы мен Басқару пернесінің тіркесімі тінтуірдің оң жақ батырмасын шертеді.
Қадам 3. Ашылмалы мәзірден «Элементті тексеру» түймесін басыңыз
Терезенің төменгі жағында құралдар тақтасы пайда болады. Құралдар тақтасының астындағы панель пайда болады және HTML -кодты белсенді бетте көрсетеді.
Қадам 4. Бар құралдар тақтасы мен панельдермен танысыңыз
«Элементті тексеру» функциясын қолданған кезде шолғыш терезесінің астында бірнеше панельдер ашылады. Төменде «Элементті тексеру» ішіндегі құралдар тақтасы мен панельдердің атаулары мен функциялары сипатталған:
- Жоғарғы қатарда құралдар тақтасының құралдар тақтасы орналасқан. Мұнда бірнеше құралдарды табуға болады, бірақ біз сол жақтағы инспектор батырмасына назар аударамыз. Бұл нұсқаулықта осы түйменің белсенді екеніне көз жеткізіңіз (белсенді кезде көк түске айналатын түйменің түсімен көрсетіледі).
- Оның астында қазіргі таңда таңдалған элементтің орналасқан жерін көрсететін HTML элементтерінің нан үгіндісі бар.
- Шарлау нұсқауларының астындағы тақта веб -беттің HTML ағашын немесе «Белгілеу көрінісін» көрсетеді. Таңдалған элементтің HTML -і осы тақтада белгіленіп, ортасында болады.
- Оң жақтағы тақта ағымдағы веб -беттің CSS стиль кестесін көрсетеді.
Қадам 5. Басқа элементті таңдаңыз
Құралдар тақтасы ашық болғанда, басқа элементтерді оңай таңдауға болады. Мұны істеудің үш әдісі бар:
- Таңдалған элементті белгілеу үшін HTML жолының үстіне апарыңыз (бұл мүмкіндікке Firefox 34+ қажет). Бұл элементті таңдау үшін HTML түймесін басыңыз.
- Құралдар тақтасының сол жақ бұрышындағы «Элементті таңдау» құралын нұқыңыз: қораптың үстінде курсор тәрізді белгіше бар. Элементті белгілеу үшін курсорды веб -бетте жылжытыңыз және оны таңдау үшін шертіңіз.
Қадам 6. HTML кодын қадағалаңыз
HTML тақтасының кез келген жерін басыңыз. Кодтан кодқа өту үшін пернетақтадағы солға және оңға бағытталған пернелерді пайдаланыңыз (бұл функция Firefox 39+ талап етеді). Бұл әдіс курсормен таңдалуға болмайтын элементтерді таңдауда пайдалы.
- Сұр түсті HTML бетте көрсетілмейтін элементтерді көрсетеді. Бұған енгізілген элементтер - түйіндер сияқты түсініктемелер және CSS көрсету қасиеті жасырған басқа элементтер.
- Мазмұнды көрсету немесе жасыру үшін жолақтың сол жағындағы көрсеткіні нұқыңыз. Бүкіл мазмұнды көрсету үшін көрсеткіні басу кезінде alt=«Image» немесе опцияны басып тұрыңыз.
Қадам 7. Элементті табыңыз
Нан үгінділерінің жолының оң жақ шетінде іздеу өрісін (цикл тәрізді белгіше) іздеңіз. Іздеу өрісін кеңейту үшін басыңыз және іздегіңіз келетін HTML кодын теріңіз. Сіз терген кезде сәйкес келетін іздеу нәтижелерін көрсететін қалқымалы терезе пайда болады. Іздеу нәтижелеріндегі элементті нұқыңыз және HTML тақтасын іздеген кодқа жылжытыңыз.
2/2 бөлімі: HTML өңдеу
Қадам 1. Қайта бастау үшін бетті қайта жүктеңіз
Егер сіз веб -сайтты әзірлеу құралдарын жаңадан білетін болсаңыз, сіз өңдейтін беттерге тұрақты өзгерістер енгізбейтіндігіңізді ескеріңіз. Өзгертулер бетті қайта жүктегенше немесе жапқанша экранда ғана пайда болады. Егер сіз не болатынын білмесеңіз де, тәжірибе жасаңыз.
Қадам 2. Өңдеу үшін HTML екі рет басыңыз
Кірістірілген HTML екі рет нұқыңыз. Өзгерістерді сақтау үшін жаңа мәтінді енгізіп, enter пернесін басыңыз.
Қадам 3. Қосымша опцияларды алу үшін құралды нұқыңыз
Қарапайым құралдар тақтасы HTML ағашы мен оның үстіндегі құралдар тақтасының арасында орналасқанын ескеріңіз. Басқа мәзірлерді ашу үшін осы қатардағы құралды басып тұрыңыз. Төменде қол жетімді нұсқалар бар (толық емес):
- «HTML ретінде өңдеу» әр жолды өңдеудің орнына HTML ағашының барлық HTML мазмұнын өңдеуге мүмкіндік береді.
- «Ішкі HTML -ді көшіру» түйін ішіндегі барлық мазмұнды көшіреді, ал «Сыртқы HTML -ді көшіру» мазмұны мен түйіндерді көшіреді (мысалы, немесе
- «Қою →» көшірмені қайда қою керектігі туралы бірнеше нұсқаларды ұсынады, мысалы түйінге дейін немесе түйіннің бірінші баласынан кейін.
- : апару,: белсенді және: фокус пайдаланушы өзара әрекеттескен кезде элементтің көрінісін өзгертеді. Өзгертілген әсерлер CSS стиль кестесінен анықталады (оң жақтағы панельден өңдеуге болады).
Қадам 4. Сүйреп апарыңыз
Кодтағы элементтерді қайта реттеу үшін HTML нүктелі сызық пайда болғанша басып тұрыңыз. Жолды ағаштан жоғары және төмен жылжытыңыз және сызық қалаған кезде тышқан түймесін жіберіңіз.
Бұл функция Firefox 39 және одан кейінгі нұсқаларын қажет етеді
Қадам 5. Әзірлеуші құралдар тақтасын жабыңыз
Элементті тексеру терезесін түгел жабу үшін CSS тақтасының үстінде орналасқан құралдар тақтасының оң жақ жоғарғы бұрышындағы X түймесін басыңыз.
Кеңестер
- Сонымен қатар құралдар тақтасын терезенің жоғарғы жағындағы мәзір параметрлерінен ашуға болады:
- Windows: Firefox → Web Developer → Қосу құралдары
- Mac немесе Linux: Құралдар → Веб -әзірлеуші → Қосу құралдары
- Firefox 40 -те CSS тақтасын жасыру мүмкіндігі бар, осылайша сізде HTML -ді өңдеуге көбірек орын болады. Нан үгіндісі жолының оң жақ шетінде және іздеу өрісінің оң жағындағы көрсеткі белгішесін іздеңіз. CSS тақтасын жасыру үшін осы белгішені нұқыңыз және оны шығару үшін қайтадан басыңыз.
- Сіз сонымен қатар CSS панельдерін өңдей аласыз, бірақ олар бұл мақалада көрсетілмеген. Сіз Интернетте CSS кодын өңдеу бойынша нұсқауларды таба аласыз.
