Boks இனை பயன்படுத்தி அழகிய இணையத்தளம் ஒன்றை உருவாக்குவோம்.

இணையத்தளம் ஒன்றினை உருவாக்குவது மிகமிக இலகுவான ஒன்றாக இந்நாட்களில் மாறியுள்ளது. Dreamweaver போன்ற மென்பொருட்கள் கொண்டு உங்கள் கற்பனைத்திறத்திற்கேற்ப இலகுவாக இணையத்தளங்களை வடிவமைத்துக்கொள்ள முடியும்.

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

இதற்காக நாங்கள் இரண்டு மென்பொருள்களை பயன்படுத்தப்போகின்றோம்.

1. Boks – இம்மென்பொருளை முன்னர் நான் ஒரு பதிவில் அறிமுகப்படுத்தி இருக்கின்றேன். பார்த்து தரவிற்க்கி கொள்ளுங்கள்.

2. உங்களுக்கு விரும்பிய Code editor. வின்டோஸ் இயங்குதளம் பயன்படுத்துவோருக்கு நான் பிரேரிப்பது Notepad++ இனை. இலவசமானதும் சிறந்ததுமான ஒரு மென்பொருள் இதுவாகும். மக் இயங்குதளம் பயன்படுத்துபவர்கள் Coda அல்லது Espresso பயன்படுத்தலாம்.

இவ்விரு மென்பொருள்களும் இன்னமும் உங்கள் கணினியில் இல்லாவிடின் தரவிறக்கி நிறுவிக்கொள்ளுங்கள்.

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

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

இப்பொழுது எங்கள் Boks இனை பயன்படுத்தி இந்த வடிவமைப்பிற்கு அடிப்படையான Layout இனை உருவாக்கி எடுத்துக்கொள்ளுவோம்.

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

இப்பொழுது நாங்கள் எங்கள் Layout இனை கீழ்காட்டியது போல வரைந்துகொள்ளுவோம்.

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

சேமிக்கப்பட்ட உங்கள் கோப்புறையில் பின்வரும் கோப்புகள் காணப்படும்.

இவற்றில் நாங்கள் output.html மற்றும் screen.css ஆகிய இரு கோப்புகளை மட்டும் மேம்படுத்துவதனூடாக ஒரு அழகிய இணையத்தளத்தை உருவாக்கிக்கொள்ள போகின்றோம். அதனை அடுத்த பதிவில் காண்போம்.

குறிச்சொற்கள்:

10 பின்னூட்டங்கள்

  1. நீச்சல்காரன் சொல்லுகின்றார்: - reply

    நல்ல தகவல். அடுத்தப் பதிவுக்கு காத்திருக்கிறேன்.

  2. நிமல் சொல்லுகின்றார்: - reply

    நல்ல பயனுள்ள பதிவு… நானும் முயற்சித்துப் பார்க்கிறேன்.

  3. radha சொல்லுகின்றார்: - reply

    i am a pharmacist kindly guide me in which way i may work as part time job in computer

    • பகீ சொல்லுகின்றார்: - reply

      ஒரு மருந்தாளராக இணையம் மூலமாக சம்பாதிப்பது என்பது சிரமமான காரியம். ஆனால் உங்களால் இது தொடர்பான ஆங்கில கட்டுரைகளை எழுத முடியும் எனில் pharmacist article writing வேலைகளுக்கு முயற்சிக்கலாம்.

  4. radha சொல்லுகின்றார்: - reply

    dear bagi i saw your reply with many thanks shall i learn web desining through yous oorodi.com

    • பகீ சொல்லுகின்றார்: - reply

      ராதா வாங்க,

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

  5. ravi சொல்லுகின்றார்: - reply

    பகீ. விரைவில் இதன் மீதிப் பதிவையும் வெளியிடுங்களேன்!

  6. ravi சொல்லுகின்றார்: - reply

    உங்களின் பதிவு சார்ந்த சந்தேகங்களை இங்கேயே கேட்கவா? OR ask.oorodi.com ல் கேட்கட்டுமா?

  7. […] உருவாக்குவது பற்றி ஒரு ஆரம்பப்பதிவை இங்கே எழுதியிருந்தேன். இப்பொழுது அதன் […]