Веб-сайт мәзірін құрастыру және қолданба практикада
Мәзір түрлері, баптау нұсқаулары және қолданба ұсыныстары
Веб-сайтта біз 10 түрлі мәзір түрін қарастырамыз. Біз әрқайсысы үшін орнату нұсқауларын және оларды пайдалану орынды болған кездегі сценарийлерді ұсындық.
Бұл мақала мәзір дизайнын — мәзірлер қалай жұмыс істейтінін және олардың қалай көрінетінін қамтиды. Егер сізге веб-сайт мәзірін жасауды, мәзірді барлық беттерге бірден қосуды немесе бет ішінде шарлауды қалай жасау керектігін түсіну қажет болса, осы мақаланы оқыңыз:
Мәзір - бұл басқа веб-сайт беттеріне немесе бір беттің белгілі бір бөлімдеріне сілтемелер жиынтығы. Әрбір сілтеме мәзір элементі болып табылады. Мәзір шарлау үшін өте маңызды: беттер арасында немесе бір беттің бөлімдері арасында жылжу.
Жалпы ұсынымдар
>
Мәзір келушіге қажетті ақпаратты тез табуға көмектесуі тиіс.
>
Мәзір қысқа болуы керек.
>
Мәзір элементтері тым көп болмауы керек.
>
Мәзір элементтерінің оңтайлы саны 5 және одан да аз.
>
Мәзір элементтерінің аттарын бір сөзден жасаған дұрыс.
>
Сөздер тым ұзақ болмаса жақсы.
>
Мәзір ауыр болмауға және мазмұнынан алшақтап кетуге тиіс.
Жақсы мәзірлердің мысалдары
Мұқабаның үстіндегі мөлдір статикалық мәзір
Ол қалай әрекет етеді:
Ол әрқашан беттің жоғарғы жағында болады, мазмұннан арылтпайды, қажет болған жағдайда қолданушы оған оңай сілтеме жасай алады, өйткені ол әдеттегі жерде орналасқан.
Қалай істеу керек:

ME301N блогын бетке қосып, блок параметрлерінде келесі параметрлерді орнатыңыз:

Негізгі параметрлер > Орналастыру әрекеті - Келесі блокпен қабаттасу, бірақ түзетілмеген
Мәзір фоны > Мәзір фоны мөлдірлігі - 0%
Бекітілген мәзір
Ол қалай әрекет етеді:
Пайдаланушыға әрқашан көрінетін және беттің кез келген жерінен кіруге болатын мәзір. Бұл мәзірде әдетте беттің жоғарғы жағында (мұқаба бетінде) мөлдір фон болады, ол пайдаланушы айналдырған сайын мөлдір болып өзгереді.
Қалай істеу керек:

ME301N блогын бетке қосып, блок параметрлерінде келесі параметрлерді орнатыңыз:

Негізгі параметрлер → Орналастыру тәртібі → Айналдыру кезінде құлыптау
Мәзір фоны → Мәзір фонының түсі - міндетті емес
Мәзір фоны → Мәзір фоны мөлдірлігі - 0%
Мәзір фоны → Жылжыту басталғаннан кейінгі мәзір фоны мөлдір емес — 80%
Екі түрлі мәзір: біреуі беттің жоғарғы жағында, екіншісі айналдырғанда пайда болады
Ол қалай әрекет етеді:
Параметр алдыңғысына ұқсас, тек айналдырғанда ғана әр түрлі мазмұны бар мәзір пайда болады. Мысалы, беттің басында мәзірде логотип, элементтер (сайт бөлімдеріне сілтемелер) және әлеуметтік желілерге сілтемелер бар. Ал пайдаланушы бет арқылы айналдыра бастағанда, логотипі бар мәзір, әрекетке қоңырау шалу және қоңырау шалу түймешігі пайда болып, көрініп қалады.
Қалай істеу керек:

Бетке екі ME301N блогын қосып, олар үшін келесі параметрлерді орнатыңыз:

Бірінші мәзір (мұқабада қалады)
Негізгі параметрлер > Орналастыру әрекеті - Келесі блокпен қабаттасу, бірақ түзетілмеген
Мәзір фоны > Мәзір фоны мөлдірлігі - 0%

Екінші мәзір (айналдырған кезде пайда болады)
Негізгі параметрлер > Орналастыру әрекеті - Айналдыруды құлыптау
Негізгі параметрлер > N пиксельдер - 600 пиксель арқылы айналдырған кезде мәзірдің көрінісі
Мәзір фоны > Мәзір фонының түсі - теңшелетін
Мәзір фоны > Мәзір фоны мөлдірлігі - 70%
Гамбургер мәзірі
Ол қалай әрекет етеді:
Экранның бұрышындағы үш жолақ түріндегі мәзір, оны басқан кезде толық нұсқасын ашады.

Ол не үшін қолданылады:
Мазасыздықты азайту және пайдаланушының назарын тек мазмұнға аудару маңызды болған кезде, гамбургер мәзірі веб-сайттың мобильді нұсқаларында жиі пайдаланылады. Мәзірдің әртүрлі құрылғыларда қалай көрінетінін реттеуге болады.

Мысалы, кәдімгі мәзірді қосып, оның көрінуін "тек жұмыс үстелі" етіп орнатуға болады, содан кейін "гамбургер" мәзірін қосып, оның көрінуін "тек мобильді" етіп орнатуға болады.
Қалай істеу керек:

Бетке ME401/402/403/404/405 блогын қосыңыз, орналастыру әрекетін, мәзір белгішесінің түсін, мәзірдің өзінің фон түсін және мәзір элементтерінің фон түсін конфигурациялаңыз.

Біздің мысалда параметрлер келесідей болады:
Негізгі параметрлер → Орналастыру әрекеті — Айналдыруды құлыптау
Мәзір белгішесі → Түс - Қара
Мәзір фоны → Жабық мәзір фоны түсі - Мөлдір
Мәзір фоны → Мәзірді ашу фонының түсі — ақ
Көп деңгейлі мәзір
Ол қалай әрекет етеді:
Мәзір элементін басқанда, кірістірілген элементтердің ашылмалы тізімі пайда болады.

Ол не үшін қолданылады:
Күрделі құрылымы бар ірі учаскелерде.
Қалай істеу керек:


Негізгі құрылғыға ішкі мәзір элементтерін қосыңыз немесе ME301N мәзірінің (немесе мәзір элементтері бар кез келген басқа мәзірдің) және ME601 тіркесімін пайдаланыңыз.
Негізгі бірлік ішкі өлшем элементтері
Мәзір элементтері бар бетке кез келген мәзір блогын қосыңыз.

Мазмұнды блоктау → Мәзір элементтерінің тізімі → «Екінші деңгейдегі элементтерді қосу» түймесін басыңыз – мәзір элементтерінің жанында плюс пішінді белгішелер пайда болады.

Екінші деңгейлі элемент қосқыңыз келетін элементтің жанындағы қосу белгішесін басыңыз. Элементтің аты мен сілтемесі үшін пайда болатын өрістерді толтырыңыз.

Жаңа ішкі мәзір элементін қосу үшін қосу белгішесін қайтадан басыңыз.

Мәзірдің ішкі элементтері меңзерді апарғанда ашылмалы мәзір ретінде пайда болады. Мобильді нұсқаларда мәзір түрту арқылы ашылады.

Маңызды : Негізгі мәзір элементінің өзі басылмайтын болады. Оның сілтемесі болуын қаласаңыз, ашылмалы мәзірдегі элементтің көшірмесін жасаңыз.

ME301N блогын бетке қосыңыз, мәзірді жоғарыдағы мысалдардағыдай конфигурациялаңыз және ME601 блогын қосыңыз (Мәзір: екінші деңгей).

Block ME601 негізгі мәзір элементтеріне кіші бөлімдерді қосуға мүмкіндік береді. Олар тінтуірді апарған кезде ашылмалы мәзір ретінде пайда болады. Мобильді нұсқаларда мәзір түрткен кезде ашылады.

Ол қалай жұмыс істейді :
1) ME601 блогында: #submenu:more сияқты сілтеме жазыңыз
2) Негізгі мәзірде: сілтеме өрісінде, кіші бөлімдер жасағыңыз келетін элементтің қарама-қарсы жағында #кіші мәзір:көбірек көрсетіңіз.

Маңызды : Негізгі мәзір элементінің өзін басу мүмкін болмайды. Егер сіз оның сілтемесін қаласаңыз, ашылмалы мәзірде элементті көшіріңіз.

Ескерту : "#submenu:more" кез келген сөз болуы мүмкін, мысалы: #submenu:portfolio немесе #submenu:aboutus
Қойындылар
Ол қалай әрекет етеді:
Әрбір сілтеме белгілі бір қойынды белсенді болғанда (пайдаланушы басқан кезде) көрсетілетін мазмұнға сәйкес келеді.

Ол не үшін қолданылады:
Портфолио жұмысы сияқты санатталған ұқсас мазмұнды көрсету үшін.
Қалай істеу керек:

ME602A/ME602B блогын бетке қосыңыз. Бұл блок сізге бетте қойындылар жасауға және сол беттегі сәйкес қойындыны басу арқылы әртүрлі мазмұнды көрсетуге мүмкіндік береді. Содан кейін, қойындыны ретімен басқан кезде өзгеретін барлық блоктарды төмендегідей орналастырыңыз.

Ол қалай жұмыс істейді :
1) ME602A/ME602B құрылғысының Мазмұн мәзіріне қойындылардың атауын жазыңыз.
2) Осы қойындыны басқан кезде көрінуі керек блоктардың идентификаторларын көрсетіңіз (үтірмен және бос орынсыз бөлінген).

Маңызды: Блок идентификаторын блок параметрлері мәзірінде немесе контекстік мәзір тізімінде көруге болады.
Егер қосылған мәзір элементтерінің барлығы бір жолға сыймаса, айналдыру жолағы пайда болады. Параметрлерде айналдыру түрін таңдай аласыз: қолмен немесе шеңбермен.
Нүкте шарлауы бар мәзір
Ол қалай әрекет етеді:
Мәзірдегі нүктені басқанда беттегі белгілі бір блокқа өтіңіз

Ол не үшін қолданылады:
Мазмұны көп беттегі белгілі бір бөлімге қайта бағыттау
Қалай істеу керек:

Мәзір санатынан бетке ME604 блогын қосыңыз. Бұл блок беттегі бөлімдер арасында тік шарлау жасауға мүмкіндік береді.

Ескерту: Бұл блок тек үлкен экрандарға (960 пиксель және одан жоғары) арналған.

Ол қалай жұмыс істейді:

1) Әр бөлімнің алдында тірек сілтемесі бар блок қосыңыз («Басқа» санатында орналасқан). Оларды сипаттамалық түрде атау ыңғайлы, мысалы: about, team, galery
2) Әр бөлімнің мәзір элементтерінің тізіміне "#" белгісімен атаулар мен сілтемелерді енгізіңіз. Мысалы, сілтеме сілтемесі: #about
Кептірілген нан
Ол қалай әрекет етеді:
Мәзір элементін басу сізді белгілі бір бөлімге немесе ішкі бетке апарады.

Ол не үшін қолданылады:
Нан үгіндісі мәзірін басты беттен ағымдағы бетке дейінгі жолды көрсету үшін пайдалануға болады.
Қалай істеу керек:

Мәзір санатынан бетке ME605 блогын қосыңыз. Блоктың мазмұнында, Мәтін 1, Мәтін 2, Мәтін 3 өрістерінде, басты беттен бастап пайдаланушының ағымдағы бетімен аяқталатын сайттың шарлау тізбегін көрсетіңіз. Төменде, Сілтеме 1, Сілтеме 2, Сілтеме 3 өрістерінде мәзір элементінің бет сілтемесін көрсетіңіз.

Ол қалай жұмыс істейді :
1) Беттің мекенжайын Бет параметрлері > Негізгі бөлімінде орнатыңыз
2) Сілтеме өрісінде мәзір элементі үшін бөлек бетке сілтемені көрсетіңіз
Кіші бөлімдер бар бүйірлік мәзір
Ол қалай әрекет етеді:
Бөлімдер мен кіші бөлімдерді қамтитын кеңейтілген бүйірлік мәзір. Мәзірде беттің кез келген жеріне кіруге мүмкіндік беретін бекітілген позиция бар.

Ол не үшін қолданылады:
Сайттың ішкі бөлімдері мен кіші бөлімдері арқылы егжей-тегжейлі шарлауды жасауға, сондай-ақ бет іздеуді қосуға мүмкіндік береді.
Қалай істеу керек:

ME901 блогын бетке қосыңыз, блок параметрлерін пайдаланып мәзірді көрсету стильдерін конфигурациялаңыз.

ME901 блогы негізгі мәзір элементтеріне кіші бөлімдерді қосуға мүмкіндік береді. Кіші бөлімдерге сілтемелер блок мазмұны > мәзір элементтерінің тізімінде көрсетілуі керек.

Сілтеме ретінде сіз беттің толық мекенжайын, соның ішінде http:// мекенжайын немесе салыстырмалы мекенжайды көрсетуіңіз керек - тек беттің атауын (мысалы, /page7890.html немесе /about).
Бет ішінде шарлау жасау үшін анкерлік сілтемелерді (мысалы, #контактілер) пайдалануға болады. Бетке якорь қосу үшін Басқа санаттағы T173 блогын пайдаланыңыз.

Егер экран ені 1500 пиксельден үлкен болса, мәзір ашық қалады.
Арбасы бар мәзір, іздеу және таңдаулылар
Ол қалай әрекет етеді:
Арбадағы элементтерді көрсетеді, таңдаулыларға бөлек қойып, шарлау бөлімінің жанындағы мәзірдегі сайтты іздейді.


Ол не үшін қолданылады:
Мәзір қолданатын пайдаланушылар үшін ыңғайлы болады КідіртуӨнім атлогыарба, сайт іздеу және таңдаулыларды ықшамдап көрсету үшін.
Қалай істеу керек:

ME401 мәзір блогын бетке қосыңыз → Мазмұн → Себет, Іздеу және Таңдаулылар → мәзірде қажетті белгішелерді көрсету үшін құсбелгілерді қойыңыз.

Тек мәзірде белгішелерді көрсету үшін «Жеке виджет түймелерін көрсетпеу» құсбелгісін қойыңыз.
Содан кейін арбаға арналған ST100, іздеу үшін T985 және бетке таңдаулылар үшін ST110 блоктарын қосып, бетті жариялаңыз.
Дайын.

Барлық мәзір блоктары үшін ME4XX нөмірлерімен жұмыс істейді.
Дисплей опциялары:

Егер сіз мәзірде белгішелерді де, «Таңдаулылар» виджетінің түймесін де көрсеткіңіз келсе, ME401 блогының мазмұны бөліміндегі «Жеке виджет түймелерін көрсетпеу» құсбелгісін алып тастаңыз.
Виджет белгішесін тек ST100 сауда арбасы мен T985 іздеуі үшін ажыратыңыз — екі блоктың параметрлері қойындысындағы «Кеңейтілген параметрлер» қойыншасында «Ашық виджет батырмасын көрсетпеу» құсбелгісін қойыңыз. Бетті жариялау.
Дайын! Мәзірде үш белгіше көрсетілген және таңдаулыларға арналған жеке виджет бар. Осыған ұқсас түрде арба виджетінің көрінуін конфигурациялауға немесе іздеуге болады.
Нөлдік блоктағы мәзір
Нөлдік блокта өз мәзірін элементтерді қалағаныңызша реттеу арқылы жасауға болады, содан кейін осы блокты құлыптай аласыз.

Міндеттемені конфигурациялау үшін Нөлдік блок → параметрлері → орны және Толып кету бөліміне өтіп, блокты жасау үшін Бекітілген параметріне орнатыңыз.
Блокты беттің үстіңгі немесе астыңғы жағына бекітуге болады және X пиксельден кейін пайда болатындай етіп конфигурациялауға болады (Көрсетілген ығысу). Бұл жағдайда өшетін анимация қолжетімді болады. Бұл, мысалы, сайт тақырыбының бірден емес, бірнеше айналдырудан кейін пайда болуын қаласаңыз, пайдалы болуы мүмкін.
Біз мәзірлердің негізгі түрлерін қарап шықтық. Егер басқа жолмен келсеңіз және оны ортақ пайдалануды қаласаңыз, веб-сайтыңызға сілтемені «Мәзір дизайны» деп белгіленген team@tilda.cc жіберіңіз. Рахмет.

Тәжірибелеріңіз құтты болсын!
Made on
Tilda