அட்டவணைகள் இல்லாமல் எழுத்துமுறை உருவாக்க CSS நிலைப்படுத்தல் பயன்படுத்துவது எப்படி

Tableless எழுத்துமுறை புதிய வடிவமைப்பு எல்லைகளை திறக்க

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

CSS நிலைப்படுத்தல் உலாவி ஆதரவு

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

நீங்கள் ஒரு பக்கத்தை உருவாக்க எப்படி சிந்திக்கிறீர்கள்

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

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

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

ஒரு மேஜையில் அந்த ஐந்து உறுப்புகளை வைத்து விட, உள்ளடக்கத்தை பல்வேறு பகுதிகள் வரையறுக்க HTML5 sectioning கூறுகளை பயன்படுத்த, பின்னர் பக்கம் உள்ளடக்க கூறுகளை வைக்க CSS பொருத்துதல் பயன்படுத்த.

உங்கள் உள்ளடக்க பிரிவுகளை அடையாளப்படுத்துதல்

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

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

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

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

உள்ளடக்கத்தை நிலைநிறுத்துகிறது

CSS ஐ பயன்படுத்தி, உங்கள் ID'd உறுப்புகளுக்கான நிலையை வரையறுக்கவும். உங்கள் நிலை தகவலை இது போன்ற ஒரு பாணியில் சேமிக்கவும்:

# உள்ளடக்கம் {

}

இந்த உறுப்புகளுக்குள்ளான உள்ளடக்கம், எவ்வளவு முடியுமோ அவ்வளவு இடமாக இருக்கும், அதாவது தற்போதைய இருப்பிடம் அல்லது பக்கத்தின் 100 சதவிகித அகலம். நிலையான அகலத்தை கட்டாயப்படுத்தாமல் பிரிவின் இருப்பிடத்தை பாதிக்க, திணிப்பு அல்லது விளிம்பு பண்புகளை மாற்றவும்.

இந்த தளவமைப்புக்கு, இரண்டு நெடுவரிசைகளை நிலையான அகலங்களுக்கு அமைத்து, பின்னர் அவர்களின் நிலைப்பாட்டை முழுமைப்படுத்தவும், அதனால் அவர்கள் HTML இல் கண்டுபிடிக்கப்படுவதால் அவை பாதிக்கப்படாது.

# இடது நெடுவரிசை {
நிலை: முழுமையான;
இடது: 0;
அகலம்: 150px;
விளிம்பு-இடது: 10px;
விளிம்பு மேல்: 20px;
நிறம்: # 000000;
திணிப்பு: 3px;
}
# வலது நெடுவரிசை {
நிலை: முழுமையான;
இடது: 80%;
மேல்: 20px;
அகலம்: 140px;
திணிப்பு-இடது: 10px;
z- குறியீட்டு எண்: 3;
நிறம்: # 000000;
திணிப்பு: 3px;
}

பிறகு, உள்ளடக்க பகுதிக்கு, வலது புறத்தில் உள்ள விளிம்புகளை அமைக்கவும், இடது புறம் இரண்டு வெளிப்புற நிரல்களையும் உள்ளடக்கியதாக இருக்காது.

# உள்ளடக்கம் {
மேல்: 0px;
விளிம்பு: 0px 25% 0 165px;
திணிப்பு: 3px;
நிறம்: # 000000;
}

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