Мазмұны
- Қажетті білім: CSS, негізгі jQuery
- Талап етеді: jQuery, CSS, HTML
- Жоба уақыты: 30 минут
- Бастапқы файлдарды жүктеңіз
Мазмұннан дизайн жасадыңыз деп ойласаңыз, сіздің дизайныңызға әсер ететін алғашқы шешім бар типке байланысты болу. Тіпті емес қаріп таңдау, сіз өзіңіздің сайтыңызға әсер ететін нәрсе жасадыңыз. Түрі басып шығару және веб-дизайн үшін негізгі болып табылады және ол күрделі; оны қолдануда көптеген жинақталған терминдер, тәжірибелер, ережелер мен әдістер бар. Бұл мақала түрдің бір аспектісін басқарудың бір тәсіліне қатысты, оны желіде жасау қиын, бірақ әдеттегідей баспаға шығарады: тұрақты ритмді сақтау, бұл өз кезегінде кәсіби орналасуға қол жеткізуге мүмкіндік береді.
Шығарма түрі
Баспа түрінде, қандай-да бір көлемді мәтіні бар кез-келген элемент үшін, дизайнның негізі базалық тор болуы мүмкін. Ол құрылымды параққа келтіру үшін және мазмұнның тік ағымын бағыттау үшін қолданылады. Барлығы дерлік осы бастапқы торға қатысты орналастырылған. Шарттарды танымасаңыз, алаңдамаңыз, ешкім негізгі сызықтармен немесе негізгі торлармен таныс емес; сіз олар туралы білесіз. Мектептегі есіңізді еске түсіріңіз, сызылған қағазға жазған кезде - өзіңіз жазғаныңыздай, әріптеріңіздің төменгі бөлігін қағаздың әр жолына ұқыпты орналастырғансыз. Іс-әрекеттегі бастапқы және бастапқы тор. Бастапқы сызық - әріптердің төменгі жағы тураланатын қиял сызығы.Егер сіз қазір осы мақаланы қарасаңыз, онда сіз шынымен де сызық болмаса да, бастапқы сызықты «көресіз». Сіздің миыңыз сізге біреуін қояды, сондықтан сіз сөйлемдерді оқи аласыз. Сызық қағаздағы сызықтар? Олар бастапқы тор. Сіздің сөйлемдеріңіз түзу болатындай етіп, белгілі бір аралықта орнатыңыз, сонда сіздің мәтініңіз тұрақты тік ритмге ие болады.
Тік ырғақ
Тік ритм мәтіннің қай жерде орналасқандығын анықтайды. Бұл мәтіндік блоктарды сканерлеуге және оқуға қабілетімізге әсер ететін және эмоционалды реакциялар туралы хабарлауға көмектесетін компоненттердің бірі. Мәтіннің тік ритмі және аралықтары жақсы болған кезде біз оны кәсіби, қарастырылған, беделді және оқуға ыңғайлы деп санаймыз. Мәтіннің ырғағы мен аралықтары нашар болған кезде, біз оны аз қарастырылатынын, кәсіби деңгейдің төмендігін және көбінесе оқуды қиындайтындығын сеземіз. Тік ырғақ - бұл қолданылудың бір бөлігі және эстетиканың бір бөлігі.
Ырғақты жүргізу
Өкінішке орай, веб типке қатысты кейбір фундаментальды тәжірибелерді енгізу қабілеті жағынан әлі күнге дейін баспа ісінің нашар туысы болып табылады. Интернетте біз баспа дизайнері сияқты (немесе мектептегі бала) базалық торды қолдана алмаймыз - мәтіннің бастапқы сызбасын құжаттың негізгі торына сәйкестендіре алмаймыз. CSS-те базалық тор туралы түсінік жоқ. Сонымен, біздің мәтін негізгі тордың сызығына дәл отырмайды. Оның орнына, ол сызықтар арасындағы алшақтықта тігінен орталықтандырылады. Бұл вебтің қолынан келетін ең жақсы нәрсе.
Мысал құжатымен практикалық жұмыс жасайық. Біріншіден, біз көрінетін бастапқы торды жасау арқылы жылдамдықты орнатамыз. Ол үшін бір-бірінен 22px кәдімгі көлденең сызықтар салу үшін қайталанатын фондық суретті қолданамыз:
- html {background: #fff url (baseline_22.png); }
Ура, бізде сызылған қағаздар бар!
Сіз ештеңе түзілмейтінін ескересіз. Барлығын бір қатарға келтіру үшін барлық элементтердің төменгі жиектері сол жолдардың біріне соғылғанын қалаймыз. Мұны жасаудың ең оңай жолы - барлық элементтердің тік биіктігін (шектерін қосқанда), яғни 22-ге еселік болатындығын тексеріңіз. Міне, осының кейбіреуі CSS. Мен REM қондырғысын қолданамын, бірақ REM-ді түсінбейтін браузерлер үшін EM қайтарымын беремін. Сондай-ақ, мен түсініктемелерге PX бірлігінің баламасын қосамын. Егер сіз REM / EM-ді әлі түсінбейтін болсаңыз, оның орнына px мәндерін қолдануға болады - олардың барлығы баламалы:
- html {/ * қаріп өлшемі: 16px, жолдың биіктігі: 22px * /
- қаріп: 100% / 1.375 «Helvetica Neue», Helvetica, Arial, sans-serif;
- фон: #fff url (baseline_22.png); }
- h1, h2, h3, h4, h5, h6, h6 {/ * жоғарғы және төменгі жиектер 22px * /
- / * em fallback * / margin: 1.375em 0;
- маржа: 1.375rem 0; }
- h1 {/ * қаріп өлшемі 32px, жолдың биіктігі 44px * /
- / * em fallback * / қаріп өлшемі: 2em;
- қаріп өлшемі: 2 рем; сызық биіктігі: 1.375; }
- h2 {/ * қаріп өлшемі 26px, жолдың биіктігі 44px * /
- / * em fallback * / қаріп өлшемі: 1.75em;
- қаріп өлшемі: 1,75 рем; сызық биіктігі: 1.5714285714; }
- h3, h4, h5, h6 {/ * қаріп өлшемі 22px, жолдың биіктігі 22px * /
- / * em fallback * / қаріп өлшемі: 1.375em;
- қаріп өлшемі: 1.375рем; сызық биіктігі: 1; }
- p, ul, blockquote {/ * төменгі шеті 22px, жолдың биіктігі html (22px) * /
- / * em fallback * / margin-top: 0; шеткі-төменгі: 1.375em;
- margin-top: 0; шеткі-төменгі: 1,375рем; }
Бізге не беретінін қарастырайық. Барлық мәтіннің қалай жақсы тураланғанына назар аударыңыз? Ол бастапқы сызықта отырмайды, бірақ оның болжамды тік ырғағы бар. Жақсы және ұқыпты.
Кескіндермен жұмыс
Суреттер нәрсені күрделендіреді. Кейбіреулерді қосқанда біздің ырғағымызға не болатынын қараңыз. Олар оны жазбадағы скип сияқты бұзады - қарқыны дұрыс, бірақ уақыты өшірілген. Туралау жылжытылады. Себебі кескіндердің биіктігі бастапқы сызықтан бірнеше есе көп болуы екіталай, сондықтан төменгі шеті біздің негізгі сызығымызбен сәйкес келмейді.
Мұны түзету үшін, әр суреттің шетіне шекара қосып, шетінен төменгі бөлігін тормен қатарластыру керек. Кішкентай JavaScript көмегімен автоматтандыруға болатын қарапайым. Біздің негізгі жоспарымыз:
- Әр кескіннің биіктігін анықтаңыз.
- Бастапқы мән суреттің қазіргі уақытта алатын тік кеңістікке қанша рет бөлінетінін көріңіз, ал қалғанын алыңыз.
- Бастапқы сызықтан қалдықты алып тастап, кескінге қолдану қажет офсетті беріңіз.
- Суретті төменгі жағына жылжытқыш ретінде қолданыңыз.
Кескіннің тік кеңістігінің төменгі жағы енді негізгі тормен дұрыс тураланатын болады. Мұнда jQuery-дегі негізгі функция бар:
- $ (терезе) .bind (’жүктеу’, функция () {
- $ («img»). әрқайсысы (function () {
- / * айнымалылар * /
- var this_img = $ (бұл);
- var baseline = 22;
- var img_height = this_img.height ();
- / * математиканы орындау * /
- var remainder = parseFloat (img_height% бастапқы деңгей);
- / * бізге қанша қосу керек? * /
- var offset = parseFloat (базалық-қалдық);
- / * суретке маржаны қолдану * /
- this_img.css («margin-bottom», ofset + «px»);
- });
- });
Неге терезе. байланыстыру түзу? Олардың өлшемдерін сенімді түрде алу үшін біз кескіндер жүктелгенше күтуіміз керек. Міне, осы негізгі код жұмыс істейтін мысал.
JQuery жетілдірілуде
Әлем сирек алға жүреді, сондықтан да осында болады - біз іске асырудың бірнеше бөлшектерімен айналысуға тура келеді. Біздегі функцияда не қате бар? Молшылық:
- Ол өзгертілген немесе блокталмағаннан гөрі ішкі суреттермен жағымсыз нәтижелер береді.
- Кейбір суреттерде, дәлірек айтқанда, контейнерлерде қате көрінеді.
- Бұл сұйық схемалармен айналыспайды.
- Бұл өте ыңғайлы емес.
Біз бұл әрекетті мысалдағы смайлик тәрізді ішкі суреттерге қолданғымыз келмейді. Ішкі кескіндер тураланған, сондықтан төменгі шеті мәтінмен бірдей сызықта орналасқан (емес бастапқы тор). Бұл кескін тігінен ығысқан дегенді білдіреді. CSS те, JS де бізге мәтіндік элементтің бастапқы сызығының қай жерде екенін анықтауға мүмкіндік бермейді, сондықтан ығысуды білмейміз. Кірістірілген кескіндерді елемеуіміз керек және түзетуді тек орнатылған суреттерге қолдануымыз керек дисплей: блок (Бақытымызға орай, кез-келген өзгермелі кескін блокты көрсетуге автоматты түрде орнатылады).
Егер кескін контейнерде болса, суретке салынған шектер контейнердегі толып кету параметрлеріне байланысты жасырылуы мүмкін. Сондай-ақ, біз кескіннің шетін емес, оның орнына контейнер элементін алғымыз келуі мүмкін. Мысалда, қораптың ішіндегі кескіннен гөрі, ақ қорапта жиектер болғаны жөн, сондықтан қорапта пайда болатын біртүрлі бос жерлерге жол бермейміз.
Функция тек бір рет жұмыс істейді, бірақ сұйық дизайн кезінде суреттер браузердің өлшемін өзгерткен кезде биіктігін өзгертеді (мұны көру үшін мысалдың өлшемін өзгертіңіз). Өлшемді өзгерту қайтадан ырғақты бұзады. Бізге функция браузердің өлшемі өзгертілгеннен кейін де, парақ жүктелгеннен кейін де жұмыс істеуі керек. Сұйық орналасулар басқа мәселелерді де ұсынады; кескіндердің биіктігі бөлшек пикселден тұруы мүмкін, мысалы 132.34px. Бұл өз кезегінде күтпеген нәтижелерге әкелуі мүмкін, тіпті егер біз бөлшек маржаны қолдансақ та (егер сізді қызықтыратын болса, міне, сондықтан: trac.webkit.org/wiki/LayoutUnit). Сонымен, бөлшек пикселдерден туындаған қателіктерден аулақ болу үшін кескінді тұтас пиксель биіктігіне массаж жасау керек болады.
Ақырында, біз мұны қайтадан қолдануға болатын функцияға айналдыруымыз керек. Шындығында, теориялық шешімге қарағанда практикалық шешім қажет болған жағдайда, біз басқа жобаларда қайта пайдалануға болатын қосылатын модуль жасауымыз керек.
Соңғы мысалда сіз мұның бәріне қол жеткізетін кодты таба аласыз. JavaScript қосылатын модуліне көп түсініктеме беріледі, сондықтан сіз әрі қарай жүре аласыз. Плагинді келесідей қоңырау шалу арқылы пайдалануға болады:
- $ (терезе) .bind (’жүктеу’, функция () {
- $ («img»). baselineAlign ();
- });
Немесе плагинге суреттің ата-анасы болса, аталған контейнерге маржаны қолдану туралы айтуға болады:
- $ (терезе) .bind (’жүктеу’, функция () {
- $ («img»). baselineAlign ({контейнер: ’. қалқымалы '});
- });
Қорытынды
Жақсы тік ырғақты сақтау - бұл үнемі баспа түрінде қолданылатын нәзік, бірақ тиімді дизайн тәжірибесі. Сіз енді негізгі қағидаларды білесіз, негізгі сызықтар мен негізгі торды білесіз және CSS мәтінді орналастырудың баспаға қатысты кейбір шектеулерін білесіз. Сіз сондай-ақ осы шектеулерді қалай өңдеу керектігін білесіз, құжаттарыңызды кез-келген тік ырғаққа құра аласыз және сізде кескінді бұзатын мазмұнмен күресуге көмектесетін құрал бар.
CSS жетіле бастаған кезде біз баспа туыстарымызбен қатар көптеген мүмкіндіктер ала береміз, сондықтан сапалы веб-сайттар құру үшін типті жақсы түсіну маңызды болады. Егер сіз жалпы тип туралы көбірек білгіңіз келсе, www.thinkingwithtype.com сайтына кеңес беремін (және онымен бірге кітап сатып алу керек). Егер сіз типтік емдеу туралы CSS мақалаларынан кейін болсаңыз, осы жерде және Интернеттегі басқа мақалаларда көптеген мақалалар бар. Сонымен қатар, Марк Боултон мен Эллиот Джей Стокстың соңғы нұсқаларын білуге кеңес беремін, олардың екеуі де веб-дизайнға қатысты тип туралы жиі айтады.
Масайрау!
