CSS மற்றும் jQuery உடன் செங்குத்து தாளத்தை பராமரிக்கவும்

உள்ளடக்கம்

• அடுக்கு வகை
• செங்குத்து தாளம்
• தாளத்தை நடத்துதல்
• படங்களைக் கையாள்வது
• JQuery ஐ மேம்படுத்துதல்
• முடிவுரை

• அறிவு தேவை: CSS, அடிப்படை jQuery
• தேவை: jQuery, CSS, HTML
• திட்ட நேரம்: 30 நிமிடம்
• மூல கோப்புகளைப் பதிவிறக்குக

உள்ளடக்கத்திலிருந்து நீங்கள் வடிவமைக்கிறீர்கள் என்று வைத்துக் கொள்ளுங்கள், உங்கள் வடிவமைப்பை செயல்படுத்துவதற்கான முதல் முடிவு உள்ளது வகை தொடர்புடையதாக இருக்க வேண்டும். கூட இல்லை தட்டச்சுப்பொறியைத் தேர்ந்தெடுப்பது உங்கள் தளத்தை பாதிக்கும் ஒன்றைச் செய்துள்ளீர்கள். அச்சு மற்றும் வலை வடிவமைப்பிற்கு வகை முக்கியமானது, மேலும் இது சிக்கலானது; திரட்டப்பட்ட சொற்கள், நடைமுறைகள், விதிகள் மற்றும் நுட்பங்கள் நிறைய உள்ளன, அவை அதன் நல்ல பயன்பாட்டிற்கு செல்கின்றன. இந்த கட்டுரை வகையின் ஒரு அம்சத்தை நிர்வகிப்பதற்கான ஒரு நுட்பத்துடன் தொடர்புடையது, இது ஆன்லைனில் செய்வது கடினம், ஆனால் அச்சில் வழக்கமாக உள்ளது: ஒரு நிலையான செங்குத்து தாளத்தை பராமரித்தல், இது ஒரு தொழில்முறை அமைப்பை அடைய எங்களுக்கு அனுமதிக்கிறது.

அடுக்கு வகை

அச்சில், கணிசமான அளவு உரையுடன் கூடிய எந்தவொரு பொருளுக்கும், வடிவமைப்பின் அடித்தளம் ஒரு அடிப்படை-கட்டமாக இருக்கக்கூடும். இது பக்கத்திற்கு கட்டமைப்பைக் கொண்டுவர பயன்படுகிறது மற்றும் உள்ளடக்கத்தின் செங்குத்து ஓட்டத்தை வழிநடத்துகிறது. கிட்டத்தட்ட எல்லாமே அந்த அடிப்படை கட்டத்தைப் பொறுத்து வைக்கப்பட்டுள்ளன. நீங்கள் விதிமுறைகளை அங்கீகரிக்கவில்லை என்றால் கவலைப்பட வேண்டாம், அடிப்படை அல்லது அடிப்படை கட்டங்களை யாரும் அறிந்திருக்கவில்லை; நீங்கள் ஏற்கனவே அவர்களைப் பற்றி அறிந்திருக்கிறீர்கள். நீங்கள் சந்தேகத்திற்கு இடமின்றி வரிசையாக காகிதத்தில் எழுதியபோது பள்ளிக்குத் திரும்பிப் பாருங்கள் - நீங்கள் எழுதியது போல் உங்கள் கடிதங்களின் அடிப்பகுதியை காகிதத்தில் உள்ள ஒவ்வொரு வரிகளிலும் அழகாக வைத்தீர்கள். செயல்பாட்டில் உள்ள அடிப்படை மற்றும் அடிப்படை கட்டம். அடிப்படை என்பது ஒரு கற்பனைக் கோடு ஆகும், அதில் எழுத்துக்களின் அடிப்பகுதி சீரமைக்கப்படுகிறது.இந்த கட்டுரையை இப்போது நீங்கள் பார்த்தால், உண்மையில் ஒரு வரி இல்லை என்றாலும், நீங்கள் ஒரு அடிப்படையை "பார்ப்பீர்கள்". உங்கள் மூளை ஒன்றை உங்களுக்காக வைக்கிறது, அதனால்தான் நீங்கள் வாக்கியங்களைப் படிக்க முடியும். வரிசையாக காகிதத்தில் கோடுகள்? அவை ஒரு அடிப்படை கட்டம். நேராக உங்கள் வாக்கியங்கள் நேராகவும், இடைவெளியில் அமைக்கவும், இதனால் உங்கள் உரை வழக்கமான செங்குத்து தாளத்தைக் கொண்டிருக்கும்.

செங்குத்து தாளம்

பக்க உரையில் எங்கு அமைந்துள்ளது என்பதை செங்குத்து தாளம் ஆணையிடுகிறது. இது உரையின் தொகுதிகளை ஸ்கேன் செய்து படிக்கும் திறனைப் பாதிக்கும் ஒரு அங்கமாகும், மேலும் இது எங்கள் உணர்ச்சிபூர்வமான பதில்களைத் தெரிவிக்க உதவுகிறது. உரை ஒரு வலுவான செங்குத்து தாளம் மற்றும் நல்ல இடைவெளியைக் கொண்டிருக்கும்போது, ​​அது தொழில்முறை, கருதப்படுகிறது, அதிகாரப்பூர்வமானது மற்றும் படிக்க வசதியானது என்று நாங்கள் உணர்கிறோம். உரையில் மோசமான தாளமும் இடைவெளியும் இருக்கும்போது, ​​அது குறைவாகவே கருதப்படுவதாகவும், குறைந்த தொழில்முறை மற்றும் பெரும்பாலும் படிக்க கடினமாக இருப்பதாகவும் உணர்கிறோம். செங்குத்து தாளம் ஒரு பகுதி பயன்பாட்டினை மற்றும் ஒரு பகுதி அழகியல்.

தாளத்தை நடத்துதல்

துரதிர்ஷ்டவசமாக வலை வகை தொடர்பான சில அடிப்படை நடைமுறைகளைச் செயல்படுத்தும் திறனைப் பொறுத்தவரை அச்சிடும் மோசமான உறவினர். வலையில் ஒரு அச்சு வடிவமைப்பாளர் (அல்லது பள்ளியில் குழந்தை) செய்வது போலவே அடிப்படை கட்டத்தையும் பயன்படுத்த முடியாது - உரையின் அடிப்படையை ஒரு ஆவணத்தின் அடிப்படை கட்டத்துடன் சீரமைக்க முடியாது. CSS க்கு ஒரு அடிப்படை கட்டத்தின் கருத்து இல்லை. எனவே, எங்கள் உரை ஒரு அடிப்படை கட்டத்தின் வரிகளில் சரியாக அமராது. அதற்கு பதிலாக, இது கோடுகளுக்கு இடையிலான இடைவெளியில் செங்குத்தாக மையப்படுத்தப்படும். இது இணையத்தால் செய்யக்கூடிய சிறந்தது.

எடுத்துக்காட்டு ஆவணத்துடன் நடைமுறைக்கு வருவோம். முதலாவதாக, புலப்படும் அடிப்படை கட்டத்தை உருவாக்குவதன் மூலம் துடிப்பை அமைப்போம். இதைச் செய்ய 22px இடைவெளியில் வழக்கமான கிடைமட்ட கோடுகளை வரைய மீண்டும் மீண்டும் பின்னணி படத்தைப் பயன்படுத்துவோம்:

1. html {பின்னணி: #fff url (baseline_22.png); }

ஹர்ரே, எங்கள் வரிசையாக காகிதம் உள்ளது!

எதுவும் வரிசையாக இல்லை என்பதை நீங்கள் கவனிப்பீர்கள். எல்லாவற்றையும் வரிசைப்படுத்த, எல்லா உறுப்புகளின் கீழ் விளிம்பும் அந்த வரிகளில் ஒன்றைத் தாக்க வேண்டும். அதைச் செய்வதற்கான எளிதான வழி, அனைத்து கூறுகளும் செங்குத்து உயரத்தை (விளிம்புகள் உட்பட) 22 இன் பெருக்கமாக இருப்பதை உறுதிசெய்கின்றன. இங்கே சில CSS தான் அதைச் செய்கிறது. நான் REM அலகு பயன்படுத்துகிறேன், ஆனால் REM ஐப் புரிந்து கொள்ளாத உலாவிகளுக்கு EM குறைவடையும். கருத்துகளில் சமமான PX அலகு என்பதையும் சேர்த்துக் கொள்கிறேன். நீங்கள் இன்னும் REM / EM ஐப் புரிந்து கொள்ளவில்லை என்றால், அதற்கு பதிலாக px மதிப்புகளைப் பயன்படுத்தலாம் - அவை அனைத்தும் சமமானவை:

1. html {/ * எழுத்துரு-அளவு: 16px, வரி-உயரம்: 22px * /
2. எழுத்துரு: 100% / 1.375 "ஹெல்வெடிகா நியூ", ஹெல்வெடிகா, ஏரியல், சான்ஸ்-செரிஃப்;
3. பின்னணி: #fff url (baseline_22.png); }
5. h1, h2, h3, h4, h5, h6 {/ * விளிம்பு-மேல் மற்றும் கீழ் இரண்டும் 22px * /
6. / * em குறைவடையும் * / விளிம்பு: 1.375em 0;
7. விளிம்பு: 1.375rem 0; }
8. h1 {/ * எழுத்துரு அளவு 32px, வரி உயரம் 44px * /
9. / * em குறைவடையும் * / எழுத்துரு அளவு: 2em;
10. எழுத்துரு-அளவு: 2rem; வரி உயரம்: 1.375; }
11. h2 {/ * எழுத்துரு அளவு 26px, வரி உயரம் 44px * /
12. / * em குறைவடையும் * / எழுத்துரு அளவு: 1.75em;
13. எழுத்துரு அளவு: 1.75rem; வரி-உயரம்: 1.5714285714; }
14. h3, h4, h5, h6 {/ * எழுத்துரு அளவு 22px, வரி-உயரம் 22px * /
15. / * em குறைவடையும் * / எழுத்துரு அளவு: 1.375em;
16. எழுத்துரு அளவு: 1.375rem; வரி உயரம்: 1; }
17. p, ul, blockquote {/ * கீழ் விளிம்பு 22px, வரி-உயரம் html (22px) from * /
18. / * em குறைவடையும் * / விளிம்பு-மேல்: 0; விளிம்பு-கீழ்: 1.375em;
19. விளிம்பு-மேல்: 0; விளிம்பு-கீழ்: 1.375rem; }

அது நமக்கு என்ன தருகிறது என்பதைப் பார்ப்போம். அனைத்து உரையும் எவ்வாறு நேர்த்தியாக சீரமைக்கப்படுகின்றன என்பதைக் கவனியுங்கள்? இது அடிப்படை அடிப்படையில் அமரவில்லை, ஆனால் இது ஒரு கணிக்கக்கூடிய செங்குத்து தாளத்தைக் கொண்டுள்ளது. இது நன்றாகவும் நேர்த்தியாகவும் இருக்கிறது.

படங்களைக் கையாள்வது

படங்கள் விஷயங்களை மிகவும் சிக்கலாக்குகின்றன. சிலவற்றைச் சேர்க்கும்போது எங்கள் தாளத்திற்கு என்ன ஆகும் என்பதைப் பாருங்கள். ஒரு பதிவில் தவிர்ப்பது போல் அவர்கள் அதை சீர்குலைக்கிறார்கள் - டெம்போ சரியானது ஆனால் நேரம் முடக்கப்பட்டுள்ளது. சீரமைப்பு மாற்றப்படுகிறது. படங்கள் அடித்தளத்தின் பல மடங்கு உயரத்தைக் கொண்டிருக்க வாய்ப்பில்லை என்பதால், கீழ் விளிம்பில் எங்கள் அடிப்படை கட்டத்துடன் வரிசையாக இல்லை.

அதை சரிசெய்ய நாம் உண்மையில் செய்ய வேண்டியது ஒவ்வொரு படத்திற்கும் ஒரு விளிம்பைச் சேர்ப்பது, விளிம்பு வரிசையின் அடிப்பகுதியை எங்கள் கட்டத்துடன் உருவாக்குகிறது. சிறிய ஜாவாஸ்கிரிப்ட் மூலம் தானியங்குபடுத்துவதற்கு இது மிகவும் எளிது. எங்கள் அடிப்படை திட்டம் இங்கே:

1. ஒவ்வொரு படத்தின் உயரத்தையும் கண்டுபிடிக்கவும்.
2. படம் தற்போது எடுக்கும் செங்குத்து இடத்திற்கு அடிப்படை மதிப்பு எத்தனை முறை பிரிக்கிறது என்பதைப் பாருங்கள், மீதமுள்ளதைப் பெறுங்கள்.
3. படத்தில் நாம் விண்ணப்பிக்க வேண்டிய ஆஃப்செட்டைக் கொடுக்க மீதமுள்ளதை அடிப்படைக் கோட்டிலிருந்து கழிக்கவும்.
4. படத்தின் அடிப்பகுதியில் ஆஃப்செட்டை ஒரு விளிம்பாகப் பயன்படுத்துங்கள்.

படத்தின் செங்குத்து இடத்தின் அடிப்பகுதி இப்போது அடிப்படை கட்டத்துடன் சரியாக சீரமைக்கப்படும். இதைச் செய்யும் jQuery இல் ஒரு அடிப்படை செயல்பாடு இங்கே:

1. window (சாளரம்). பிணை (’சுமை’, செயல்பாடு () {
2. $ ("img"). ஒவ்வொன்றும் (செயல்பாடு () {
3. / * மாறிகள் * /
4. var this_img = $ (இது);
5. var அடிப்படை = 22;
6. var img_height = this_img.height ();
7. / * கணிதத்தைச் செய்யுங்கள் * /
8. var மீதமுள்ள = parseFloat (img_height% baseline);
9. / * நாம் எவ்வளவு சேர்க்க வேண்டும்? * /
10. var ஆஃப்செட் = பார்ஸ்ஃப்ளோட் (அடிப்படை-மீதமுள்ள);
11. / * படத்திற்கு விளிம்பைப் பயன்படுத்துங்கள் * /
12. this_img.css ("விளிம்பு-கீழ்", ஆஃப்செட் + "px");
13. });
14. });

ஏன் window.bind வரி? ஏனென்றால், அவற்றின் அளவுகளை நம்பத்தகுந்ததாகப் பெறுவதற்கு முன்பு படங்கள் ஏற்றப்படும் வரை காத்திருக்க வேண்டும். இந்த அடிப்படை குறியீடு இயங்கும் ஒரு எடுத்துக்காட்டு இங்கே.

JQuery ஐ மேம்படுத்துதல்

உலகம் அரிதாக நேராக முன்னோக்கி உள்ளது, எனவே இது இங்கே மாறிவிடும் - சில செயல்படுத்தல் விவரங்களை நாங்கள் கையாள வேண்டும். எங்களிடம் உள்ள செயல்பாட்டில் என்ன தவறு? ஏராளமான:

• இது மிதக்கும் அல்லது தடுப்பதை விட இன்லைன் படங்களுடன் மோசமான முடிவுகளைத் தருகிறது.
• இது சில படங்களில் தரமற்றதாகத் தெரிகிறது, குறிப்பாக கொள்கலன்களில் உள்ளவை.
• இது திரவ தளவமைப்புகளைக் கையாள்வதில்லை.
• இது மீண்டும் பயன்படுத்த முடியாதது.

எடுத்துக்காட்டில் உள்ள ஸ்மைலி முகம் போன்ற இன்லைன் படங்களுக்கு இந்த நடத்தை பயன்படுத்த நாங்கள் விரும்பவில்லை. இன்லைன் படங்கள் சீரமைக்கப்பட்டுள்ளன, எனவே கீழ் விளிம்பில் உரையின் அதே அடிப்படையிலேயே அமர்ந்திருக்கும் (இல்லை அடிப்படை கட்டம்). அதாவது படம் செங்குத்தாக ஈடுசெய்யப்பட்டுள்ளது. உரை உறுப்புக்கான அடிப்படை எங்கே என்பதைக் கண்டறிய CSS அல்லது JS இரண்டுமே எங்களுக்கு ஒரு வழியைக் கொடுக்கவில்லை, எனவே ஆஃப்செட் எங்களுக்குத் தெரியாது. இன்லைன் படங்களை நாம் புறக்கணிக்க வேண்டும், மேலும் அமைக்கப்பட்ட படங்களுக்கு மட்டுமே எங்கள் பிழைத்திருத்தத்தைப் பயன்படுத்த வேண்டும் காட்சி: தொகுதி (அதிர்ஷ்டவசமாக, எந்த மிதக்கும் படமும் தானாகவே தடுப்பைக் காண்பிக்கும் வகையில் அமைக்கப்படுகிறது).

ஒரு படம் ஒரு கொள்கலனில் இருந்தால், கொள்கலனில் நிரம்பி வழிகிறது என்பதால் படத்திற்கு பயன்படுத்தப்படும் விளிம்பு மறைக்கப்படலாம். மேலும், படத்தின் விளிம்பை நாம் விரும்பாமல் இருக்கலாம், மாறாக கொள்கலன் உறுப்பு மீது. எடுத்துக்காட்டில், பெட்டியின் உள்ளே இருக்கும் படத்தை விட வெள்ளை பெட்டியில் விளிம்புகள் இருப்பதை நாங்கள் விரும்புகிறோம், எனவே பெட்டியில் தோன்றும் வித்தியாசமான இடைவெளிகளைப் பெறுவதைத் தவிர்க்கலாம்.

செயல்பாடு ஒரு முறை மட்டுமே இயங்குகிறது, ஆனால் ஒரு திரவ வடிவமைப்பில் உலாவி மறு அளவைக் கொண்டிருக்கும்போது படங்கள் உயரத்தை மாற்றுகின்றன (இதைக் காண மிகவும் குறுகலான ஒன்றை எடுத்துக்காட்டுவதற்கு முயற்சிக்கவும்). மறுஅளவிடுதல் மீண்டும் தாளத்தை உடைக்கிறது. உலாவி மறுஅளவாக்கப்பட்ட பின் பக்க சுமைக்குப் பிறகு இயங்குவதற்கான செயல்பாடு எங்களுக்குத் தேவை. திரவ தளவமைப்புகள் பிற சிக்கல்களையும் அறிமுகப்படுத்துகின்றன; படங்கள் பகுதியளவு பிக்சல்கள் அதிகமாக இருக்கலாம், எடுத்துக்காட்டாக 132.34px. இது ஒரு பகுதியளவு விளிம்பைப் பயன்படுத்தினாலும் எதிர்பாராத முடிவுகளை ஏற்படுத்தும் (நீங்கள் ஆர்வமாக இருந்தால், இங்கே ஏன்: trac.webkit.org/wiki/LayoutUnit). எனவே, பகுதியளவு பிக்சல்களால் ஏற்படும் தளவமைப்பு பிழைகளைத் தவிர்க்க படத்தை முழு பிக்சல் உயரத்திற்கு மசாஜ் செய்ய வேண்டும்.

கடைசியாக, இதை மீண்டும் பயன்படுத்தக்கூடிய செயல்பாடாக மாற்ற வேண்டும். உண்மையில், தத்துவார்த்த தீர்வுக்கு ஒரு நடைமுறை தீர்வு தேவைப்படும் சிக்கலான நிலையில், பிற திட்டங்களில் மீண்டும் பயன்படுத்தக்கூடிய ஒரு செருகுநிரலை நாம் உருவாக்க வேண்டும்.

கடைசி எடுத்துக்காட்டில் இவை அனைத்தையும் அடையும் குறியீட்டைக் காண்பீர்கள். செருகுநிரல் ஜாவாஸ்கிரிப்ட் பெரிதும் கருத்துரைக்கப்பட்டுள்ளது, எனவே நீங்கள் தொடர்ந்து செல்லலாம். செருகுநிரலை பின்வருமாறு அழைப்பதன் மூலம் நீங்கள் பயன்படுத்தலாம்:

1. window (சாளரம்). பிணை (’சுமை’, செயல்பாடு () {
2. $ ("img"). பேஸ்லைன்அலைன் ();
3. });

அல்லது, படத்தின் பெற்றோராக ஒருவர் இருந்தால், பெயரிடப்பட்ட கொள்கலனுக்கு விளிம்பைப் பயன்படுத்த செருகுநிரலைக் கூறலாம்:

1. window (சாளரம்). பிணை (’சுமை’, செயல்பாடு () {
2. $ ("img"). பேஸ்லைன்அலைன் ({கொள்கலன்: ’. பாப்அப்’});
3. });

முடிவுரை

ஒரு நல்ல செங்குத்து தாளத்தை வைத்திருப்பது ஒரு நுட்பமான ஆனால் பயனுள்ள வடிவமைப்பு நடைமுறையாகும். நீங்கள் இப்போது அடிப்படைக் கொள்கைகளை அறிந்திருக்கிறீர்கள், அடிப்படைகள் மற்றும் அடிப்படை கட்டத்தைப் பற்றிய அறிவைக் கொண்டிருக்கிறீர்கள், மேலும் CSS உரை தளவமைப்பு மற்றும் அச்சுக்கு எதிராக சில வரம்புகளை அறிவீர்கள். அந்த வரம்புகளைச் சுற்றி எவ்வாறு செயல்படுவது, நீங்கள் விரும்பும் எந்த செங்குத்து தாளத்திற்கும் உங்கள் ஆவணங்களை எழுதுவது உங்களுக்குத் தெரியும், மேலும் சீர்குலைக்கும் பட உள்ளடக்கத்தைக் கையாள உதவும் கருவி உங்களிடம் உள்ளது.

CSS முதிர்ச்சியடையும் போது, ​​எங்கள் அச்சு உறவினர்களுடன் தொடர்ந்து கூடுதல் அம்சங்களைப் பெறுகிறோம், எனவே தரமான வலைத்தளங்களை உருவாக்குவதற்கு வகையைப் பற்றிய நல்ல புரிதல் மிகவும் முக்கியமானது. பொதுவாக வகை பற்றி மேலும் அறிய நீங்கள் விரும்பினால், www.thinkingwithtype.com ஐ பரிந்துரைக்கிறேன் (மேலும் புத்தகத்தை வாங்கவும்). வகை சிகிச்சையைப் பற்றிய CSS கட்டுரைகளுக்குப் பிறகு நீங்கள் இருந்தால், இணையத்தில் இங்கேயும் பிற இடங்களிலும் ஏராளமான கட்டுரைகள் உள்ளன. மார்க் போல்டன் மற்றும் எலியட் ஜே ஸ்டாக்ஸ் ஆகியோரிடமிருந்து சமீபத்தியவற்றைப் பிடிக்கவும் நான் பரிந்துரைக்கிறேன், இருவரும் வலை வடிவமைப்பு தொடர்பாக வகை பற்றி அடிக்கடி பேசுகிறார்கள்.

மகிழுங்கள்!