الويب العربي - ليس لك عذر بعد الان با استخدام الجداول في تصميمك

بسم الله الرحمن الرحيم
هذا موضوع يشمل مواضيع مميزه في الشبكه يقنعك با الابتعاد عن الجدال في تصميمك واستخدام التصميم بcss او بطريقة الانماط
كلنا نعلم أن استخدام الجداول من أول و أهم المهارات التى يتعلمها مصمم المواقع
فيتعلم كيف يقوم بإنشاء جداول لتنسيق الصفحة، و يضع الكثير من الجداول بداخل بعضها (nested tables) حتى يحصل على الشكل الذى يريده

و لكن هل سألت نفسك، هل هذه هى أفضل وسيلة لتنسيق الصفحات؟

لنجيب عن هذا السؤال دعنى أسألك سؤالا آخر، هل كانت لديك صفحة كبيرة مليئة بالجداول و أردت أن تعدل شيئًا فى الكود؟
لابد أنك قد وجدت الكثير من <td> , </td> , <tr> , </tr> فلا تعلم كل واحد منها لأى خلية فى أى جدول
و ماذا لو عدلت فى الكود، و عن طريق الخطأ وضعت <td> فى غير مكانها؟
يتغير شكل الصفحة تمامًا و ينهار التصميم، فتحاول البحث هنا و هناك عن مكان هذا الـ <td> البائس
و قد يحالفك الحظ، أو ينتهى الأمر بإعدة تصميم الصفحة من البداية !!
مأساة ...

أما المشكلة الحقيقية فهى حين تتجرأ و تفكر فى تغيير تصميم موقعك كله ...
عليك استخراج البيانات من الجداول فى كل الصفحات و إعادة تعبئتها فى جداول جديدة للتصميم الجديد
سنفترض أن موقعك متوسط الحجم (مثلا 200 -500 صفحة)
أظن الموضوع متعب لدرجة أنك قد تتوب عن فكرة تغيير الموقع أصلا !!

إذن فنحن متفقون على أنه على الرغم من أن الجداول تقوم بتنسيق الصفحات بشكل مناسب و لكنها ليست الحل الأمثل

و لكن ما البديل؟

قبل أن أجيب دعنى أسألك، هل يمكنك أن تخبرنى ،بنظرة الخبير (دون رؤية الكود) ما أقل عدد من الجداول يمكن أن تحتويه صفحة مثل هذه:
http://www.csszengarden.com

كم قلت؟

:)
لا يوجد بها أية جداول على الإطلاق
لا تصدق؟
افتح كود الصفحة و تأكد بنفسك

و ماذا عن هذه الصفحة؟
http://www.csszengarden.com/?cssfile...1.css& page=0

و هذه؟
http://www.csszengarden.com/?cssfile...6.css& page=6

و هذه؟
http://www.csszengarden.com/?cssfile...8.css& page=0

و هذه؟
http://www.csszengarden.com/?cssfile...9.css& page=0

وهذه؟
http://www.csszengarden.com/?cssfile...8.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/...ss_tu torial/
http://www.brainjar.com/css/using/
http://www.wpdfd.com/editorial/basics/index.html
http://www.createwebmagic.com/css101...29 4e84ea30a0
http://www.communitymx.com/content/a...01 3F0E8B6A50
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...n/ boxes.html
http://www.wannabegirl.org/firdamatic/

و هذه صفحات بها الكثير من الروابط الأخرى
http://www.dezwozhere.com/links.html
http://www.d.umn.edu/itss/support/Tr...ig n/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...ti cle&sid=53

و الآن، هل ستظل تستخدم الجداول؟

بعد الفاصل هناك طرق سهله للاستخدام css بسهوله

فاصل اعلاني
----------------------------------------

موقع اكوودا رائع

http://www.dhtmlgoodies.com

يسير على نهج dynamicdrive

عدنــــــــــــــــــــــ ـــا

درس تحويل ملف بي اس دي الى الى سي اس اس في اقل من
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

اذا ييستاهل الموضوع نبي تقييمك