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