الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

هل مازلت تستخدم الجداول ؟!

مثبّترائج
بدأه medmuseum في 16 مارس 2005 · 64 رد · 34,180 مشاهدة · في المواضيع المميزة
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

كلنا نعلم أن استخدام الجداول من أول و أهم المهارات التى يتعلمها مصمم المواقع

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

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

لنجيب عن هذا السؤال دعنى أسألك سؤالا آخر، هل كانت لديك صفحة كبيرة مليئة بالجداول و أردت أن تعدل شيئًا فى الكود؟

لابد أنك قد وجدت الكثير من <td> , </td> , <tr> , </tr> فلا تعلم كل واحد منها لأى خلية فى أى جدول

و ماذا لو عدلت فى الكود، و عن طريق الخطأ وضعت <td> فى غير مكانها؟

يتغير شكل الصفحة تمامًا و ينهار التصميم، فتحاول البحث هنا و هناك عن مكان هذا الـ <td> البائس

و قد يحالفك الحظ، أو ينتهى الأمر بإعدة تصميم الصفحة من البداية !!

مأساة ...

أما المشكلة الحقيقية فهى حين تتجرأ و تفكر فى تغيير تصميم موقعك كله ...

عليك استخراج البيانات من الجداول فى كل الصفحات و إعادة تعبئتها فى جداول جديدة للتصميم الجديد

سنفترض أن موقعك متوسط الحجم (مثلا 200 -500 صفحة)

أظن الموضوع متعب لدرجة أنك قد تتوب عن فكرة تغيير الموقع أصلا !!

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

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

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

http://www.csszengarden.com

كم قلت؟

لا يوجد بها أية جداول على الإطلاق

لا تصدق؟

افتح كود الصفحة و تأكد بنفسك

و ماذا عن هذه الصفحة؟

http://www.csszengarden.com/?cssfile=/151/151.css&page=0

و هذه؟

http://www.csszengarden.com/?cssfile=/096/096.css&page=6

و هذه؟

http://www.csszengarden.com/?cssfile=/148/148.css&page=0

و هذه؟

http://www.csszengarden.com/?cssfile=/149/149.css&page=0

وهذه؟

http://www.csszengarden.com/?cssfile=/088/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/academy/css_tutorial/

http://www.brainjar.com/css/using/

http://www.wpdfd.com/editorial/basics/index.html

http://www.createwebmagic.com/css101/whati...fb3294e84ea30a0

http://www.communitymx.com/content/article...A87013F0E8B6A50

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/conver..._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/tutorials...sson/boxes.html

http://www.wannabegirl.org/firdamatic/

و هذه صفحات بها الكثير من الروابط الأخرى

http://www.dezwozhere.com/links.html

http://www.d.umn.edu/itss/support/Training...design/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.php?n...=article&sid=53

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

تم تعديل هذه المشاركة بواسطة medmuseum في 16 مارس 2005 في 11:39

3
#2

جزاك الله خيرا دكتور حاتم :)

إحنا نعمل لوووبى طبى فى المنتدى ونضرب بقية المبرمجين .. وتبقى حرب عالمية :lol:

#3

لوبى طبى ...

فكرة مش بطالة

لكن خلينا نفكر فى موضوع حرب عالمية ده ...

#4

بارك الله فيك أخي

معلومات قيمة في الحقيقة ،، إن شاء الله أكون من المستفيدين منها ...

#5

جزاك الله خيراً، مع الإضافة أن كثرة الجداول وخاصة المتداخلة قد تبطء تحميل الصفحة لحاجة المتصفح أن يقرأ جميع الجداول قبل أن يبدأ بالعرض..

Mohamad Al-Karbi

www.mkarbi.me

#6

فعلا معلومات قيمة وجزاك الله كل خير

#7

بارك الله فيك

ابو علاء

#8

هل من الممكن أن يتم تثبيت هذه المشاركة ؟!!

فهي مفيدة جدا لم يريد البدأ في الـcss

#9

بارك الله فيك أخي

معلومات قيمة في الحقيقة ،، إن شاء الله أكون من المستفيدين منها

#10

موضوع رائع فعلا جزاك الله خيرا

#11

شكرا جزيلاً لكاتب الموضوع وفقه الله

شكر جزيلا لمن ثبت هذا الموضوع الرائع والفكرة الذكية.

شكرا لمن اقترح التثبيت.

#13

ما شاء الله

جزاكم الله خيراً

#14

مشكووور وماقصرت والف شكر

#15

السلام عليكم ورحمة الله

بارك الله فيك اخى الكريم, شئ رائع فى الحقيقه, واروع ما فى الموضوع عرضك الشيق جدا , لدرجة ان واحد مثلى ليس له اى علاقة بتصميم الصفحات قرات الموضوع كاملا بكل تركيز ,

وكده هتخلينى افكر اصمم مواقع وانافسكم :lol:

بالتوفيق ان شاء الله,,,

أشهد أن لا إله إلا الله وأشهد أن محمدا رسول الله

bnr025.gif

مـــوقـــعـــى

#16

جزاك الله كل خير

#17

رائع

ولكن هل سيظل لل HTML مكان بعد الPHP وال ASP و ال JSP ؟

Moore’s Law

– “Number of transistors in chips doubles every 18 
months”.
–  Every 10 years, processors are 100 times more 
powerful.

Gilder’s Law

– “Bandwidth grows at least three times faster than 
computer power”.
– Assuming bandwidth doubles every 12 months; 
every 10 years, it is 1000 times better.
#18

الأستاذ medmuseum

شكرا على موضوعك المفيد كثيرا ز أرجو أن يتسع لى صدرك بسؤالى:

أنا طالب فى كلية العلوم جامعة القاهرة قسم نباتات و كنت قد قمت بتصميم موقع كامل عن النباتات و خصائصها و حياتها ة تركيبها و كل ما يتعلق بها مع صورة لكل نبات .. و الصفحة تتكون من جدول ذو 3 أعمدة و 32 صف و كل خانة من هذا الجدول تحتوى على صورة مصغرة للنبات و نبذة صغيرة عنه و عند الضغط على الصورة يقوم الموقع بالإنتقال إلى صفحة النبات

سؤالى هو كيف يمكننى عمل ملف من النوع Css مع العلم أننى لا أعرف شيئا عن هذه اللغة و لا أى لغة بل قمت بالتصميم من خلال برنامج frontpage

أرجو التفصيل التام

و شكرا

#19

شكرا لك يا أخ ألف شكر على الموضوع القيم

سؤلي هل بإمكان أن نعمل سويا صفحة واحدة لكي يكون الأمر عمليا

شكرا لك مرة ثانية

#20

بسم الله الرحمن الرحيم

اقتباس
لوبي طبي

والله اللي بتابع مشاركاتكم ما بحكي أطباء بل أعظم المبرمجين

ما شاء الله عليكم

موضوع أكثر من رائع

عندي تعليق على التصميم بواسطة الجداول والتعديل عليها

بالنسبة لصعوبة ذلك ما بحكي الا يخلف على الفرونت بيج

همسه في أذن anwarica

موقعك غير خاضع لمواصفات الISO CSS

لكن فعلا موضوع شيق ومقالتك أقنعتني بالاطلاع على هذه التقنية الرائعة

والسلام عليكم ورحمة الله وبركاته

تم تعديل هذه المشاركة بواسطة البريشي في 5 يونيو 2006 في 14:46

********************* ******************** *********************

(( أشــهد أن لا اله الا الله ..... وأشهد أن محمد رسول الله ))

********************* ******************** *********************

لا تقـل من أيـن أبدأ

طـاعـة الله الـبدايـة

***

لا تقـل أين طـريـقي

شــرع الله الهـدايـة

***

لا تـقـل أيـن نعـيمي

جـنـة الله كـفـايـــــة

***

لا تقـل في الغـد أبدأ

ربمـــا تأتـي النهـايـــة

**************** **************** ****************

#21
i_samy كتب:
الأستاذ medmuseum

شكرا على موضوعك المفيد كثيرا ز أرجو أن يتسع لى صدرك بسؤالى:

أنا طالب فى كلية العلوم جامعة القاهرة قسم نباتات و كنت قد قمت بتصميم موقع كامل عن النباتات و خصائصها و حياتها ة تركيبها و كل ما يتعلق بها مع صورة لكل نبات .. و الصفحة تتكون من جدول ذو 3 أعمدة و 32 صف و كل خانة من هذا الجدول تحتوى على صورة مصغرة للنبات و نبذة صغيرة عنه و عند الضغط على الصورة يقوم الموقع بالإنتقال إلى صفحة النبات

سؤالى هو كيف يمكننى عمل ملف من النوع Css مع العلم أننى لا أعرف شيئا عن هذه اللغة و لا أى لغة بل قمت بالتصميم من خلال برنامج frontpage

أرجو التفصيل التام

و شكرا

#22

الدكتور حاتم مشغول من أكثر من 4 شهور وربما لم يدخل النت من يومها! (h)

البريشي كتب:
همسه في أذن anwarica

موقعك غير خاضع لمواصفات الISO CSS

إنه لا يحتوى على css أساسا :D

أو بمعنى آخر، الأكواد المتفرقة من css هدفها العمل على IE, FF للناحية الجمالية فقط ..

#23

بسم الله الرحمن الرحيم

anwarica كتب:
أو بمعنى آخر، الأكواد المتفرقة من css هدفها العمل على IE, FF للناحية الجمالية فقط ..

هذا يعني أنه لا يهمك جمال موقعك

على كل أنا لست Ghost2010 لأستفزك

لكن

IE هو Internet Explorer

اذا ما هو FF .

والسلام عليكم ورحمة الله وبركاته

********************* ******************** *********************

(( أشــهد أن لا اله الا الله ..... وأشهد أن محمد رسول الله ))

********************* ******************** *********************

لا تقـل من أيـن أبدأ

طـاعـة الله الـبدايـة

***

لا تقـل أين طـريـقي

شــرع الله الهـدايـة

***

لا تـقـل أيـن نعـيمي

جـنـة الله كـفـايـــــة

***

لا تقـل في الغـد أبدأ

ربمـــا تأتـي النهـايـــة

**************** **************** ****************

#24

شكراً جزيلاً أخي الكريم medmuseum

و اسمح لي بنقل أجزاء من الشرح الرائع مع شيء من التصرف الذي يناسب المجموعة التي عندي

و جاري الاطلاع على الروابط و الاستفادة منها

شكراً لكم

و أوافق الإخوة في طلب الجزء العملي لهذا الشرح الجميل

مع معرفتنا أن الهدف كان الاطلاع على التقنية

و لكن لا مانع من إضافة هذا الشيء خاصة أنه رغبة البعض هنا

و لكم جزيل الشكر و التقدير

خارج الموضوع

--------------

FF

هو متصفح الفايرفوكس FireFox و في الحقيقة هو متصفح رائع جداً و فيه ميزات خيالية خاصة أنه مفتوح المصدر

و شكراً :)

#25

الموضوع فعلا مميز وقد استخدمت css في تصميم أحد المواقع........لكن أحتاج إلى المزيد من المعلومات........ أين أستطيع أن أجد كتبا عن css بعض النظر عربية أم أنجليزية

سؤال :

هل هذا الموقع يستخدم تقنية css؟؟؟

http://ar.wikipedia.org/

My_Sign.jpg

مواضيع مشابهة