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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

Ескертпе: «#submenu:көбірек» кез келген сөз болуы мүмкін, мысалы: #submenu:портфель немесе #submenu:aboutus

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ол қалай жұмыс істейді:
1) Бет параметрлері > жалпы бетке арналған мекенжайды орнату
2) Сілтеме өрісінде мәзір элементі үшін бөлек бетке сілтемені көрсету

Ол қалай әрекет етеді:
Бөлімдер мен кіші бөлімдерді қамтитын кеңейтілген бүйірлік мәзір. Мәзірде беттің кез келген жеріне кіруге мүмкіндік беретін бекітілген позиция бар.

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

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

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

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

Сілтеме ретінде беттің толық мекенжайын, соның ішінде http:// немесе салыстырмалы мекенжайын - тек бет атауын (мысалы, /page7890.html немесе /about) көрсету қажет.

Бет ішіндегі шарлауды жасау үшін зәкірлік сілтемелерді (мысалы, #contacts) пайдалануға болады. Бетке зәкір қосу үшін Басқа > Зәкір сілтемесі блогын пайдаланыңыз.

Егер экран ені 1500px-тан үлкен болса, мәзір ашық күйінде қалады.

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


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

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

Мәзірде қажетті белгішелерді көрсету үшін ұяшықтарға құсбелгі қою → Content → Cart, Search & Favorions → бетіне ME401 мәзір блогын қосыңыз.

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

Содан кейін арбаға арналған ST100, іздеу үшін T985 және бетке таңдаулылар үшін ST110 блоктарын қосып, бетті жариялаңыз.

Дайын.

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

Көрсету параметрлері:

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

Виджет белгішесін тек ST100 сауда арбасы мен T985 іздеуі үшін ажыратыңыз — екі блоктың параметрлері қойындысындағы «Кеңейтілген параметрлер» қойыншасында «Ашық виджет батырмасын көрсетпеу» құсбелгісін қойыңыз. Бетті жариялау.

Дайын! Мәзірде үш белгіше көрсетілген және таңдаулыларға арналған жеке виджет бар. Осыған ұқсас түрде арба виджетінің көрінуін конфигурациялауға немесе іздеуге болады.

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

Міндеттемені конфигурациялау үшін Нөлдік блок → параметрлері → орны және Толып кету бөліміне өтіп, блокты жасау үшін Бекітілген параметріне орнатыңыз.

Блок беттің жоғарғы немесе төменгі жағында бекітілуі, сондай-ақ X пикселден кейін пайда болуы үшін орнатылуы мүмкін (Офсет пайда болады). Бұл жағдайда сыртқы көрініс анимациясының екі параметрінің бірін конфигурациялауға болады - Жоғары/төмен сөніп қалу. Бұл ыңғайлы болуы мүмкін, мысалы, сайт тақырыбының бірден емес, бірнеше айналдырудан кейін пайда болуын қаласаңыз.

Біз мәзірлердің негізгі түрлерін қарап шықтық. Егер басқа жолмен келсеңіз және оны ортақ пайдалануды қаласаңыз, веб-сайтыңызға сілтемені «Мәзір дизайны» деп белгіленген team@tilda.cc жіберіңіз. Рахмет.

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