Веб-дизайн саласындағы көшбасшылықты үйрену

Веб-дизайн графикалық және баспа дизайны әлемінен әрдайым басшылар мен анықтамаларды қабылдады. Бұл, әсіресе, веб-типографияға және біздің веб-беттерге хат формаларын алу жолына қатысты дұрыс. Бұл параллельдер әрдайым 1-ден 1 аударма емес, бірақ бір пәннің қайсысына әсер еткенін көруге болады. Бұл, әсіресе, «жетекші» дәстүрлі типография термині мен «сызықтық биіктік» деп аталатын CSS сипаты арасындағы қатынасты қарастырғанда әсіресе айқын.

Жетекшінің мақсаты

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

Веб дизайнында жетекші

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

Веб-дизайнға қатысты «басқарушы» үшін CSS сипаты жоқ. Оның орнына, мәтіннің осы көрнекі көрсетілуін өңдейтін CSS сипаты сызықтық биіктік деп аталады. Мәтіннің көлденең мәтін жолдары арасында қосымша орын болуын қаласаңыз, осы сипатты қолданасыз. Мысалы, тораптың

элементінің ішіндегі барлық абзацтар үшін жолдың биіктігін жоғарылатуды қаласаңыз, сіз осылай істей аласыз:

бастысы p {line-height: 1.5; }

Бұл беттің әдепкі шрифт өлшеміне негізделген қалыпты сызықтың биіктігі 1,5 есе (әдетте 16 пиксель) болады.

Жолдың биіктігі қашан қолданылады

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

Жолдың биіктігі қолданылмайтын кезде

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

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

бастысы p {line-height: 1.5; төменгі шет: 24px; }

Бұл беттің параграфына арналған мәтін жолдары арасында (жолдың ішіндегі

элемент) 1,5 жолдың биіктігі болады. Сол параграфтарда олардың әрқайсысының астында 24 пиксель ақ бос болуы мүмкін, бұл оқырмандарға бір параграфты басқадан оңай анықтауға және веб-сайтты оқуды жеңілдетуге мүмкіндік беретін көрнекі үзілістерге мүмкіндік береді. Сондай-ақ, толтырғыш сипатын төмендегі шеттердің орнына қолдануға болады:

бастысы p {line-height: 1.5; толтыру төменгісі: 24px; }

Барлық жағдайларда, бұл алдыңғы CSS сияқты бірдей көрінеді.

«Қызметтер-меню» класы бар тізім ішіндегі тізім элементтерінің астына аралық қосу керек деп айтыңыз, сол үшін маржаны немесе толтырғышты қолданыңыз, сызықтың биіктігі емес. Сондықтан бұл орынды болар еді.

.services-menu li < Егер сіз әрбір нүкте үшін бірнеше жолға жүгіре алатын ұзын мәтінді жұмыс істейтін болса, мәтіннің аралықтарын тізім ішіндегі элементтерді өздері орнатқыңыз келсе, сызықтық биіктікті ғана пайдаланасыз.