Веб-сайт мәзірін құрастыру және қолданба практикада

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

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

Орындау әдісі:

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

Негізгі параметрлер > Позициялау мінез-құлқы — келесі блокқа жапсырумен, бірақ түзетусіз
Мәзір өңі > Мәзір өңінің мөлдір еместігі - 0%

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

Орындау әдісі:

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

Негізгі параметрлер → Орналасу мінез-құлқы → жылжыту фиксациясы
Мәзір аясы → мәзір аясының түсі - Қосымша
Мәзір өңі → Мәзір өңінің мөлдір еместігі - 0%
Мәзір өңі → жылжыту басталғаннан кейінгі мәзір фонының мөлдір еместігі - 80%

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

Қалай істеу керек:

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

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

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

Ол қалай әрекет етеді:
Экранның бұрышындағы үш жолақ түріндегі мәзір, оны басқан кезде толық нұсқасын ашады.

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

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

Қалай істеу керек:

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

Біздің мысалда параметрлер келесідей болады:
Негізгі параметрлер → Позициялау тәртібі — Айналдырудағы құлыптау
Мәзір белгішесі → Түс - Қара
Мәзір фонды → Жабық мәзір фонының түсі - мөлдір
Мәзір фоны → Ашу мәзірінің өң түсі — ақ

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

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

Қалай істеу керек:


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

Мәзір элементтері бар бетке кез келген мәзір блогын қосыңыз.

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

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

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

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

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

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

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

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

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

Ескертпе : "#submenu: more" кез келген сөз болуы мүмкін, мысалы: #submenu:portfolio немесе #submenu:aboutus

Ол қалай әрекет етеді:
Әрбір сілтеме белгілі бір қойынды белсенді болғанда (пайдаланушы басқан кезде) көрсетілетін мазмұнға сәйкес келеді.

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

Қалай істеу керек:

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

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

Маңызды: Блок идентификаторын әр блоктың «Параметрлер» мәзірінде, ең төменгі жағында табуға болады.

Ол қалай әрекет етеді:
Мәзірдегі нүктені басқанда беттегі белгілі бір блокқа өтіңіз

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

Орындау әдісі:

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

Ескертпе: бұл бірлік тек үлкен экрандарға арналған (960px-тан).

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

1) Әрбір бөлімнің алдында зәкірлік буыны бар блок қосу ("Басқа" санатында орналасқан). Оларды мағынасы бойынша атау ыңғайлы, мысалы: шамамен, команда, галерея
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 жіберіңіз. Рахмет.

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