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

ابو یاسر نے 'ویب ماسٹرز کا فورم' کی ذیل میں اس موضوع کا آغاز کیا، ‏15 جنوری 2011

  1. ابو یاسر

    ابو یاسر رکن

    مراسلے:
    622
    محترم قارئین!
    امید ہے اس تھریڈ کے ذریعے آپ سی ایس ایس سے واقفیت بڑھائیں گے اور ٹیبل لیس ویب ڈیزائننگ میں یہ آپ کو مدد کرے گا۔
    ایک زمانہ تھا جب ویب ڈیزائن کے لیے ٹیبل کا استعمال ناگزیر سمجھا جاتا تھا آج کل نیٹ کی دنیا میں بنا ٹیبل والے لے آوٹ یعنی ایسے خاکے جو بنا ٹیبل کے بنے ہوں بڑی اہمیت حاصل کر گئے ہیں۔
    اس کی متعدد وجوہات ہیں جیسے
    • ٹیبل والی سائیٹیں بری دیری سے لوڈ ہوتی ہیں
    • ٹیبل میں ایک خفیہ نقطے(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;
    }

    ۔۔۔۔۔ جاری باذن اللہ​
  2. ابو یاسر

    ابو یاسر رکن

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

    سلیمان منتظم

    مراسلے:
    1,599
    اسلام و علیکم
    محترم بھائی فورم پہ خوشش آمدید اللہ آپ کا آنا مبارک کرے مہربانی فرما کے تعارف والے سیکشن میں اپنا کچھ تعارف بھی کروا دیں
    بالکل میں سیکھنے کے لیئے تیار ہوں آپ جاری رکھیں
  4. محمد ارسلان

    محمد ارسلان رکن

    مراسلے:
    2,556
    جزاک اللہ خیرا ابویاسر بھائی
  5. بشیراحمد

    بشیراحمد ناظم رکن عملہ

    مراسلے:
    875
    ابویاسر بھائی آپ کو یہاں دیکھ کر خوشی ہوئی میں تو ویسی ہی آپ کا پرانا شاگرد ہوں :)
  6. ابو یاسر

    ابو یاسر رکن

    مراسلے:
    622
    آپ شاید غلط لکھ گئےآپ کو "استاد" لکھنا تھا
  7. بشیراحمد

    بشیراحمد ناظم رکن عملہ

    مراسلے:
    875
    استاد ! ایچ ٹی ایم ایل اور پی ایچ پی تھوڑی ہے کہ غلطی کروں ؟!!!!!!!!
  8. ابو یاسر

    ابو یاسر رکن

    مراسلے:
    622
    ویسے، آپ نے سیکھی ہی کہاں ؟؟
    اس لیے میں استاد نہیں
  9. jobsikd

    jobsikd زیر نگرانی

    مراسلے:
    123
  10. بشیراحمد

    بشیراحمد ناظم رکن عملہ

    مراسلے:
    875
    جی بھائی ایسے ہی سمجھ لیں پر پر ابویاسر گذشتہ کئی دنوں سے پرسرار طریقے سے غائب ہیں ہم تو قلم کاپی لے کر مزید سیکھنے کے انتظار میں ہاتھ دھرے ہی بیٹھے گئے :)

اس صفحے کی تشہیر