هل مازلت تستخدم الجداول ؟!
كلنا نعلم أن استخدام الجداول من أول و أهم المهارات التى يتعلمها مصمم المواقع
فيتعلم كيف يقوم بإنشاء جداول لتنسيق الصفحة، و يضع الكثير من الجداول بداخل بعضها (nested tables) حتى يحصل على الشكل الذى يريده و لكن هل سألت نفسك، هل هذه هى أفضل وسيلة لتنسيق الصفحات؟ لنجيب عن هذا السؤال دعنى أسألك سؤالا آخر، هل كانت لديك صفحة كبيرة مليئة بالجداول و أردت أن تعدل شيئًا فى الكود؟ لابد أنك قد وجدت الكثير من <td> , </td> , <tr> , </tr> فلا تعلم كل واحد منها لأى خلية فى أى جدول و ماذا لو عدلت فى الكود، و عن طريق الخطأ وضعت <td> فى غير مكانها؟ يتغير شكل الصفحة تمامًا و ينهار التصميم، فتحاول البحث هنا و هناك عن مكان هذا الـ <td> البائس و قد يحالفك الحظ، أو ينتهى الأمر بإعدة تصميم الصفحة من البداية !! مأساة ... أما المشكلة الحقيقية فهى حين تتجرأ و تفكر فى تغيير تصميم موقعك كله ... عليك استخراج البيانات من الجداول فى كل الصفحات و إعادة تعبئتها فى جداول جديدة للتصميم الجديد سنفترض أن موقعك متوسط الحجم (مثلا 200 -500 صفحة) أظن الموضوع متعب لدرجة أنك قد تتوب عن فكرة تغيير الموقع أصلا !! إذن فنحن متفقون على أنه على الرغم من أن الجداول تقوم بتنسيق الصفحات بشكل مناسب و لكنها ليست الحل الأمثل و لكن ما البديل؟ قبل أن أجيب دعنى أسألك، هل يمكنك أن تخبرنى ،بنظرة الخبير (دون رؤية الكود) ما أقل عدد من الجداول يمكن أن تحتويه صفحة مثل هذه: http://www.csszengarden.com كم قلت؟ لا يوجد بها أية جداول على الإطلاق لا تصدق؟ افتح كود الصفحة و تأكد بنفسك و ماذا عن هذه الصفحة؟ http://www.csszengarden.com/?cssfile...151.css&page=0 و هذه؟ http://www.csszengarden.com/?cssfile...096.css&page=6 و هذه؟ http://www.csszengarden.com/?cssfile...148.css&page=0 و هذه؟ http://www.csszengarden.com/?cssfile...149.css&page=0 وهذه؟ http://www.csszengarden.com/?cssfile...088.css&page=7 افتح تلك الصفحات و تأكد منها و سأنتظرك هنا حتى تعود... حسنًا ، هل عدت؟ ما رأيك؟ ليست المفاجأة أن هذه الصفحات لا تحتوى على جداول فحسب، و لكن أن كل الصفحات السابقة لها نفس كود HTML تمامًا !!! كل الفرق بينها أن لكلٍ منها ملف CSS مختلف كل التغيير فى الألوان و الصور و التنسيق و الخط ...إلخ موجود فى ملف واحد هو ملف CSS ذلك الموقع يوجد به أكثر من 150 تصميم مختلف لنفس صفحة HTML !! و هل فتحت كود الصفحة؟ كيف يبدو؟ كود بسيط و واضح هكذا <p class="p1">بعض النص هنا</p> فقط بلا تعقيدات و لا <table width="100%" align="center" border="1"> <tr> <td>بعض النص هنا</td> </tr> <table> انظر كيف تبدو الصفحة دون CSS http://www.csszengarden.com/zengarden-sample.html إذن كيف استطاعوا فعل هذا؟ يستخدم هذا الموقع تقنية CSS positioning، حيث يستخدم كود HTML بسيط و يضع النص داخل وسوم (tags) مثل p , div , span , h1 , ul , li , ...إلخ ثم يحدد فى ملف CSS كيف يبدو النص داخل هذه الوسوم و بالتالى يظل الكود بسيطًا ، سهل التعديل، خفيف و سريع التحميل ثم ماذا لو أردت أن تقوم بتغيير تصميم الموقع بأكمله؟ لن تمس صفحة HTML واحدة كل ما عليك تعديل ملف CSS واحد و يتغيير تمامًا شكل الموقع كله بهذه الطريقة تكون قد فصلت تمامًا المحتوى عن التصميم و سهلت التعديل فيهما، و هذا هو الاتجاه فى الفترة القادمة ، و هذا ما أشارت إليه توصيات www.w3c.org فالجداول كان المقصود من وجودها عرض بيانات مجدولة و ليس تنسيق الصفحات لن أخوض هنا فى تفاصيل كيفية تطبيق هذه الطريقة ، و إنما يهدف هذا الموضوع إلى لفت الانتباه إلى هذه التقنية، و أترك التفاصيل لهذه الروابط: هذه بعض المواقع التى تعطى فكرة بسيطة عن CSS http://www.westciv.com/style_master/.../css_tutorial/ http://www.brainjar.com/css/using/ http://www.wpdfd.com/editorial/basics/index.html http://www.createwebmagic.com/css101...b3294e84ea30a0 http://www.communitymx.com/content/a...87013F0E8B6A50 http://www.digital-web.com/articles/css_101/ http://www.w3.org/TR/CSS21/ و هذه بعض المواقع لمناقشة الموضوعات الأكثر تقدمًا http://css.maxdesign.com.au/index.htm http://www.brainjar.com/css/positioning/ http://www.digital-web.com/articles/...a_page_to_css/ http://www.w3.org/TR/REC-CSS2/box.html http://www.positioniseverything.net/index.php http://cssvault.com/resources.php هذه مواقع تقدم تنسيق جاهز للصفحات بأشكال مختلفة يمكنك استخدامها مباشرة http://intensivstation.ch/css/template.php http://www.glish.com/css/#techniques http://www.bluerobot.com/web/layouts/ http://www.thenoodleincident.com/tut...son/boxes.html http://www.wannabegirl.org/firdamatic/ و هذه صفحات بها الكثير من الروابط الأخرى http://www.dezwozhere.com/links.html http://www.d.umn.edu/itss/support/Tr...esign/css.html http://www.cbel.com/style_sheets/ و هذا موقع رائع به الكثير من المقالات التى غيرت نظرتى لتصميم المواقع http://www.alistapart.com/topics/css/ و موقع سردال كان من المواقع العربية الرائدة فى تبنى هذه التقنية http://www.serdal.com/css و هذا ملف لشرح CSS باللغة العربية ( إعداد : سامى محمود الرباعية ) http://www.cb4a.com/book/netpro/CSS/css.htm و هذا موقع يقدم دروسًا باللغة العربية http://www.c4arab.com/showasection.php?lssid=115 و هذه مواقع أخرى مفيدة http://www.w3schools.com/css/default.asp http://www.htmlhelp.com/reference/css/ هذا كتاب من أفضل الكتب التى صدرت فى هذا المجال More Eric Meyer on CSS http://babyblue.thuthao.info/modules...article&sid=53 و الآن، هل ستظل تستخدم الجداول؟ |
رد: هل مازلت تستخدم الجداول ؟!
يعطيك العافيه ,, لاعدمناك ننتظر جديدك ,, لك خالص الشكر ,, |
رد: هل مازلت تستخدم الجداول ؟!
الف شكر على الموضوع القيم
|
رد: هل مازلت تستخدم الجداول ؟!
ثانكيييييووووووووووووووووو
|
رد: هل مازلت تستخدم الجداول ؟!
الله يعطيك العافية
|
الساعة الآن 07:12 AM. |
Powered by vBulletin™ Version 3.8.7
Copyright copy; 2024 vBulletin Solutions, Inc
SEO by vBSEO 3.6.0