بسم الله الرحمن الرحيم
هذا موضوع يشمل مواضيع مميزه في الشبكه يقنعك با الابتعاد عن الجدال في تصميمك واستخدام التصميم بcss او بطريقة الانماط
كلنا نعلم أن استخدام الجداول من أول و أهم المهارات التى يتعلمها مصمم المواقع
فيتعلم كيف يقوم بإنشاء جداول لتنسيق الصفحة، و يضع الكثير من الجداول بداخل بعضها (nested tables) حتى يحصل على الشكل الذى يريده
و لكن هل سألت نفسك، هل هذه هى أفضل وسيلة لتنسيق الصفحات؟
لنجيب عن هذا السؤال دعنى أسألك سؤالا آخر، هل كانت لديك صفحة كبيرة مليئة بالجداول و أردت أن تعدل شيئًا فى الكود؟
لابد أنك قد وجدت الكثير من <td> , </td> , <tr> , </tr> فلا تعلم كل واحد منها لأى خلية فى أى جدول
و ماذا لو عدلت فى الكود، و عن طريق الخطأ وضعت <td> فى غير مكانها؟
يتغير شكل الصفحة تمامًا و ينهار التصميم، فتحاول البحث هنا و هناك عن مكان هذا الـ <td> البائس
و قد يحالفك الحظ، أو ينتهى الأمر بإعدة تصميم الصفحة من البداية !!
مأساة ...
أما المشكلة الحقيقية فهى حين تتجرأ و تفكر فى تغيير تصميم موقعك كله ...
عليك استخراج البيانات من الجداول فى كل الصفحات و إعادة تعبئتها فى جداول جديدة للتصميم الجديد
سنفترض أن موقعك متوسط الحجم (مثلا 200 -500 صفحة)
أظن الموضوع متعب لدرجة أنك قد تتوب عن فكرة تغيير الموقع أصلا !!
إذن فنحن متفقون على أنه على الرغم من أن الجداول تقوم بتنسيق الصفحات بشكل مناسب و لكنها ليست الحل الأمثل
و لكن ما البديل؟
قبل أن أجيب دعنى أسألك، هل يمكنك أن تخبرنى ،بنظرة الخبير (دون رؤية الكود) ما أقل عدد من الجداول يمكن أن تحتويه صفحة مثل هذه: http://www.csszengarden.com
كم قلت؟
لا يوجد بها أية جداول على الإطلاق
لا تصدق؟
افتح كود الصفحة و تأكد بنفسك
افتح تلك الصفحات و تأكد منها و سأنتظرك هنا حتى تعود...
حسنًا ، هل عدت؟ ما رأيك؟
ليست المفاجأة أن هذه الصفحات لا تحتوى على جداول فحسب، و لكن أن كل الصفحات السابقة لها نفس كود HTML تمامًا !!!
كل الفرق بينها أن لكلٍ منها ملف css مختلف
كل التغيير فى الألوان و الصور و التنسيق و الخط ...إلخ موجود فى ملف واحد هو ملف css
ذلك الموقع يوجد به أكثر من 150 تصميم مختلف لنفس صفحة HTML !!
و هل فتحت كود الصفحة؟ كيف يبدو؟
كود بسيط و واضح هكذا
<p class="p1">بعض النص هنا</p>
فقط بلا تعقيدات و لا
<table width="100%" align="center" border="1">
<tr>
<td>بعض النص هنا</td>
</tr>
<table>
يستخدم هذا الموقع تقنية css positioning، حيث يستخدم كود html بسيط و يضع النص داخل وسوم (tags) مثل p , div , span , h1 , ul , li , ...إلخ
ثم يحدد فى ملف css كيف يبدو النص داخل هذه الوسوم
و بالتالى يظل الكود بسيطًا ، سهل التعديل، خفيف و سريع التحميل
ثم ماذا لو أردت أن تقوم بتغيير تصميم الموقع بأكمله؟
لن تمس صفحة html واحدة
كل ما عليك تعديل ملف css واحد و يتغيير تمامًا شكل الموقع كله
بهذه الطريقة تكون قد فصلت تمامًا المحتوى عن التصميم و سهلت التعديل فيهما، و هذا هو الاتجاه فى الفترة القادمة ، و هذا ما أشارت إليه توصيات www.w3c.org
فالجداول كان المقصود من وجودها عرض بيانات مجدولة و ليس تنسيق الصفحات
لن أخوض هنا فى تفاصيل كيفية تطبيق هذه الطريقة ، و إنما يهدف هذا الموضوع إلى لفت الانتباه إلى هذه التقنية، و أترك التفاصيل لهذه الروابط:
درس تحويل ملف بي اس دي الى الى سي اس اس في اقل من
30 ثانيةاقدم لكم درس خفيف وسريع وهو تحويل ملف بي اس دي الى الى سي اس اس في اقل من
30 ثانية :nice:
اولا نقوم بإستيراد الموقع اللي صممناه على الفوتوشوب من خلال
قائمة file ثم open ونحدد الفايل
المرحلة الثانية نقوم بتعديل الفايل عبر ايميج ريدي : من قائمة file نختار Edit in imageready
المرحلة الثالثة تقطيع الصفحة من خلال اداة sliceTool
بعد الانتهاء من تقطيع الملف نقوم بوضع اعدادات slice قبل تصدير الملف الى html
من خلال الذهاب الى قائمة file ثم output settings ثم نختار slice
المرحلة الخامسة نغير الـ Generate Table الى Generate CSS ثم نحدد Referenced
.. طبعا هذا نتركه للخبراء
المرحلة السادسة تصدير الفايل الى HTML من خلال File ثم Save Optimized As
المرحلة الاخيرة انتهينا من تصدير الملف ولنتأكد يمكننا فتح الاكسبلور ا اي متصفح ونذهب الى
السورس لمشاهدة النتيجة .. يبقى علينا تعديل الملف بواسطة اي برنامج محرر مثل الدرم ويفر او الفرونت بيج
المرحلة السادسة تصدير الفايل الى HTML من خلال File ثم Save Optimized As
المرحلة الاخيرة انتهينا من تصدير الملف ولنتأكد يمكننا فتح الاكسبلور ا اي متصفح ونذهب الى
السورس لمشاهدة النتيجة .. يبقى علينا تعديل الملف بواسطة اي برنامج محرر مثل الدرم ويفر او الفرونت بيج
اخير يوفر Dreamweaver CS3
الكثير من الاشكال لاخراج موقعك تصميم متوافق وسلس بcss
ليس لك عذر بعد الان با استخدام الجداول في تصميمك
النمط المتتابع
