ویب ڈیزائننگ : ٹیبل لیس بنانے کا طریقہ

محترم قارئین!
امید ہے اس تھریڈ کے ذریعے آپ سی ایس ایس سے واقفیت بڑھائیں گے اور ٹیبل لیس ویب ڈیزائننگ میں یہ آپ کو مدد کرے گا۔
ایک زمانہ تھا جب ویب ڈیزائن کے لیے ٹیبل کا استعمال ناگزیر سمجھا جاتا تھا آج کل نیٹ کی دنیا میں بنا ٹیبل والے لے آوٹ یعنی ایسے خاکے جو بنا ٹیبل کے بنے ہوں بڑی اہمیت حاصل کر گئے ہیں۔
اس کی متعدد وجوہات ہیں جیسے

• ٹیبل والی سائیٹیں بری دیری سے لوڈ ہوتی ہیں
• ٹیبل میں ایک خفیہ نقطے(spacer)کا استعمال کرنا پڑتا تھا جو کہ ویسے تو بےکار تھا مگر اس کے بنا ڈیزائن بگڑ جاتی تھی۔
• کلائنٹ مشین یعنی یوزر کو ٹیبل کے لوازمات جیسے <td> اور <tr> ریڈ کرتے کرتے کافی وقت لگتا تھا۔
• اسکرین کے حساب سے اس میں لچکداریت نہیں تھی۔
• جیسے کہ مختلف قسم کے یوزر مختلف سائز کے مانیٹر استعمال کرتے ہیں اس پر ٹیبل والی سائٹس چھوٹی بڑی ہو جاتی تھی۔

جبکہ سی ایس ایس نے ان مشکلات کو حل کر دیا اور یہیں سے ٹیبل لیس کی بیناد پڑی جس کی وجہ سے ڈیزائنر اور کوڈر دونوں کو کافی فائدے ہوئے ،مثلا

• صاف ستھری کوڈنگ
• تیز ڈاونلوڈنگ
• سرچ انجن کے لیے تیار
• ایک ہی کوڈ کی متعدد صفحات تک رسائی
• ڈیزائن کی مستقل یا پائیدار سیٹنگ
• مینٹین کرنے میں سہولت
• ڈیزائن کے چھوٹے سے چھوٹے حصے پر پوزیشن ، پیڈنگ، مارجن وغیرہ کے ذریعے کنٹرول

اس کے علاوہ یوزر کے لیے اتنی سہولت بھی دی جا سکتی ہے کہ وہ خود سے کوئی تبدیلی کر سکے جیسا کہ عام طور پر آپ نے دیکھا ہوگا کہ مختلف سائٹس پر الفاظ کی سائز برھانے کے بٹن ہوتے ہیں۔
اور سب سے بڑھ کر مجھے جو خوبی پسند آئی وہ یہ کہ ڈیزائنر اس کو ڈیزائن کر دے اور پروگرامر اس کو بڑی آسانی سے کوڈ کر دے یعنی ہر چیز واضح۔
ان ابتدائی باتوں کے بعد اب چلاتے ہیں پریکٹیکل لائف میں جہاں ہمیں اور بھی باریکیا سمجھنا ہے۔
ٹیبل لیس کے لیے جو ضروری ہیں وہ یہ کہ
۱۔ ڈیزائن کا تعین اور خاکے کا منصوبہ مثلا ہیڈر ، فوٹر ، نویگیشن، اور اہم چیز کنٹین
اس میں کنٹین کا نمبر پہلے آنا چاہیے کیونکہ سب سے پہلے جو چیز لوڈ ہو وہ کنٹینٹ ہی ہونا چاہیے ۔
ہیڈر فوٹر تو ایک ہی ہوتے ہیں مگر نویگیشن کئی سارے ہوسکتے ہیں تو اس میں مسئلہ نہیں
بنیادی طور پر تین یا چار عناصر (ایلیمنٹ ) کو دھیان میں رکھ کر ہی ڈیزائن بنایا جاتا ہے۔
<div> content </div>
<div> navigation </div>
<div> Header </div>
<div> footer </div>
نوٹ : جیسا کہ پہلے لکھا جا چکا کہ بہت سارے نویگیشن اور دیگر چیزیں ہو سکتے ہیں تو ظاہر ہے اس میں کئی سارے عناصر ان کے "سب نیم" سے آ جائیں گے۔ جیسے سب نیویگیشن، سب ھیڈر بھی ہوسکتا ہے اور سب کنٹینٹ بھی۔
عام طور پر ڈیزائن کرتے وقت "جو جیسا ہے ویسا ہی ملا" جسے انگلش میں 'what you see is what you get' شاید کہ ترجمہ صحیح نہ ہو مگر مطلب واضح کرتا ہے کہ پہلے ڈیزائن کرتے وقت بالترتیب ہیڈر ۔۔ پھر نیویگیشنز ۔۔ پھر کنٹینٹ ۔۔۔ اور آخر میں فوٹر بنایا جاتا تھا جو کہ ابھی بھی ٹیبل والی سائٹس میں استعمال ہو رہا ہے ۔
مگر ڈیو والی سائٹس میں اس کے بر خلاف جہاں چاہے ڈیو رکھ سکتے ہیں کیونکہ یہ کافی کچھ پروگرامنگ سے مشابہ طریقہ ہے اس لیے یہاں کا سارا کنٹرول سی ایس ایس سے چلتا ہے اور سی ایس ایس میں جیسی سائز ، پوزیشن ، حاشیہ دے دیں گے پیج کو وہی فالو کرنا ہوگا۔

۲۔
کاغذ پر ڈیزائن کا خاکہ بنا ئیں اور اس پر اپنے تینوں ایلیمنٹ عناصر کے بارے میں تفصیل لکھیں جیسے لمبائی چوڑائی ، مارجن پیڈنگ، پوزیشن وغیرہ۔ اب ضرورت ہے کہ اصل لے آوٹ کو دیکھتے ہوئے کچھ تفصیل لکھ لی جائے جیسے :
Width of the Content area 749px
Width of Navigation area 229px
Width of Header Image 520px
Height of Header Image and Navigation 267px

یہ سارا کام کاغذ پر تیار کر یں اور پھر ممکنہ کوڈ کو ٹائپ کر لیں جیسے :
div.content {
position: absolute;
margin: 267px 0px 0px 0px;
width: 749px;
z-index: 1;
}

۔۔۔۔۔ جاری باذن اللہ​

ایک اہم سوال : کون کون سیکھنے کے لیے تیار ہے؟؟؟ یا اب اس کے آگے بند کردوں؟؟؟؟؟

 

بہت خوب ! جاری رکھیے ۔ آج کل قوم امتحانات ميں مصروف ہے۔فارغ ہوتے ہی آپ كى كلاس كى رونق بڑھائے گی ان شاء اللہ۔

 

ابو یاسر بھائی، اسے جاری رکھیں ۔ جزاک اللہ خیرا
کچھ ہم نالائقوں کا بھی اللہ بھلا کر ے گا اس تحریر کے ذریعے :00006:۔ ہمیشہ <table> ہی استعمال کیا ہے کبھی <div> استعمال کرنے کی تکلیف نہیں‌ کی :00003: کیونکہ کمبخت کہیں سیٹ ہی نہیں ہوتا ، اور مسئلہ تب ہوتا ہے جب ٹیبل میں بنا ہوا ڈیزایئن انٹرنیٹ یکسپلورر میں تو ٹھیک چلتا ہے پر فائرفاکس میں ٹھیک نہیں چلتا۔ اور پھر اب اگر سی ایم ایس ویب سائٹ بنانی ہو تو پھر تو ٹیبل لیس ڈیزایئن ہی بنانا آنا چاہیے۔ اس لیے آپ جاری رکھیں۔ ان شاءاللہ جیسے ہی کام سے فرصت ملے گی، اسے ٹیسٹ کریں گے۔

 

جزاک اللہ خیر ابویاسر بھائی ماشاءاللہ جاری رکھیں اسے۔

 

ایک بہت ہی اچھا اور معیاری ٹیوٹوریل۔ جو ویب ڈیزائننگ کے ابتدائی طالبعلموں اور متوسط طالبعلموں کے لیے نہایت اہمیت کا حامل ہے ۔ جزاک اللہ بھائی، اسے جاری رکھیے گا۔
اگر آپکی اجازت ہو تو میں اسے کسی اور فورم پر شئر کر سکتا ہوں ؟

 

پوری کوشش کرونگا ان شاء اللہ

آپ کے رپلائے سے سچ مچ خون میں روانی آ گئی ہے ، اللہ سے توفیق کا طلبگار ہوں کہ میں لکھ سکوں۔

شکریہ ارسلان بھائی، تھینکس فور اپریشئیٹ

شکریہ بھائی، اب تو لگتا ہے کہ جلدی ہی دوسرا حصہ لکھنا پڑے گا :00016:

 

ابو یاسر بھائی آپ نے اتنے اچھے ٹیوٹوریل آپ نے بند کیوں کردیا؟
دو مہینے سے کوئی پوسٹ نہیں اس کا مطلب ہے یا تو آپ بہت زیادہ مصروف ہیں یا آپ نے ارادہ ترک کردیا۔
ویسے میں بھی سی ایس ایس ہی استعمال کرتا ہوں لیکن پھر بھی آپ کا یہ تھیرڈ دیکھ کر خواہش ہوئی کہ اگر کوئی معلومات باقی رہ گئی ہوگی تو وہ یہاں پوری ہوجائے گی۔
شکریہ

 

ابو یاسر بھائی۔۔۔ چلیں اب جلد اگلا حصہ شئر کریں، آپ کے طالب علم آپ کا انتظار کر رہے ہیں۔۔۔۔:00006:
ابھی تو ہم نے آپ سے پی ایج پی بھی سیکھنی ہے :00026:

 

جی ہاں بالکل میں بھی پی ایچ پی سیکھنے کے لئے بے تاب ہوں

 

اور ہم وعدہ کرتے ہیں کہ آپ سکھانا شروع کریں ہم آپ کے سچے شاگرد ثابت ہونگے جوکہ بیچ راستے میں ساتھ نہیں چھوڑینگے۔

 

راج بھائی
ہوسکے تو آپ ذرا اپنی قابلیت وغیرہ سے آگاہ کردیں تاکہ کلاس کے دوران سمجھانے میں آسانی رہے۔

 

جزاک اللہ خیر ابویاسر بھائی

 

ابو یاسر بھائی میں ایک عدنا سا ویب ڈیزائنر ہوں اصل میں تو گرافک ڈیزانر تھا مگر ویب میں دلچسپی تھی تو کمپنی نے اسی کام میں ڈھکیل دیا۔ خیر میں نے اپنے آفس کی سائٹ بنائی ہے مگر صرف ڈیزائن اور ایچ ٹی ایم ایل ، سی ایس ایس کوڈنگ میری ہے باقی اے ایس پی ڈاٹ نیٹ میرے ساتھی کی۔
ساتھ ہی کچھ اور سائٹ پر کام کیا ہے یہ دیکھیں
Amroha.info
http://www.nizac.com
[Y K Grafiks] Concept Creation & Print (under Development)
Altamash Rashid (My profile site - under development)
اور کچھ سائٹس تو بند بھی ہوگئی جو کافی پہلے بنائی تھی:00001:

الحمداللہ ایچ ٹی ایم ایل اور سی ایس ایس کا کوئی مسئلہ نہیں بس خواہش پی ایچ پی سیکھنے کی ہے چونکہ پروگرامنگ سے دور دور کا واسطہ نہیں رہا ہے اس لئے کوشش کرتا ہوں کہ بحیثیت ویب ڈیزائنر میں پی ایچ پی میں مہارت نہ سہی اچھی معلومات ضرور حاصل کروں۔