الصفحة الرئيسية>دروس تصميم الويب>البرنامج التعليمي لبرنامج دريمويفر

برنامج Dreamweaver 4 التعليمي الموجز (7. تخطيط صفحة الويب)

الكاتب：Eve Cole وقت التحديث：2009-05-30 18:35:53
7. تخطيط صفحة الويب

 استخدام الجداول


تعد الجداول عنصرًا مهمًا جدًا لصفحات الويب نظرًا لأن لغة HTML نفسها لا توفر المزيد من أساليب التخطيط، فغالبًا ما نحتاج إلى استخدام الجداول لتحقيق تخطيط جيد لصفحات الويب. يمكن القول أن الجداول هي أهم مهارة في إنتاج صفحات الويب. إن مدى جودة استخدام الجداول يعكس بشكل مباشر مستوى مصممي الويب.


انقر على لوحة الكائن ، سيظهر لك مربع الحوار التالي:



① الصفوف: عدد الصفوف في الجدول؛ الأعمدة: عدد الأعمدة في الجدول؛

② العرض: عرض الجدول، يمكن أن تكون الوحدة بالبكسل (عدد البكسل) أو النسبة المئوية (النسبة المئوية). حجم الجدول المحدد بالبكسل ثابت، بينما الجدول المحدد بالنسب المئوية سيتغير وفقًا لحجم المتصفح. وسيتم شرح الفرق بين طريقتي التعريف بالتفصيل لاحقًا؛

③ الحدود: عرض خط الطاولة؛

④ حشوة الخلية: تباعد الخلايا: هامش الخلية. تشير الخلية المسماة إلى كل خلية صغيرة في الجدول.

بعد الضبط كما هو موضح في الشكل، سوف تحصل على النموذج التالي:



انقر على سطر الجدول لتحديد الجدول بأكمله. يمكنك رؤية ذلك في لوحة الخصائص:



① الصفوف والأعمدة: صفوف وأعمدة الجدول؛

② W، H: عرض الطاولة وارتفاعها في العادة، لا نحدد ارتفاع الطاولة؛

③ CellPad، CellSpace: تباعد الخلايا وهوامش الخلايا؛ الحدود: عرض خطوط الجدول؛

④ Ailgn: محاذاة الجدول، يمكنك نقل الجدول إلى اليسار (يسار)، الوسط (الوسط)، أو اليمين (يمين)

⑤ : إزالة إعدادات ارتفاع الصف؛
: إزالة إعدادات عرض العمود؛
: تحويل إعداد عرض الجدول من النسبة المئوية إلى البكسل؛
: تحويل إعداد عرض الجدول من البكسل إلى النسبة المئوية؛

⑥ لون Bg: تعيين لون خلفية الجدول؛

⑦ لون Brdr: اضبط لون خط الجدول؛

⑧ صورة Bg: قم بتعيين صورة خلفية الجدول إذا تم تعيين صورة الخلفية، فسيكون لون الخلفية غير صالح؛ انقر فوق زر الحقيبة في الخلف لتحديد صورة الخلفية؛


إذا قمنا بتحريك المؤشر إلى إحدى الخلايا، فإن لوحة الخصائص التي نراها مختلفة:



① : دمج الخلايا (يجب عليك أولاً تحديد الخلايا المقابلة المراد دمجها)؛
: تقسيم الخلايا إلى صفوف أو أعمدة متعددة؛

② Horz: محاذاة أفقية داخل الخلية، الوظيفة هي نفسها مشابه؛
Vert: محاذاة عمودية داخل الخلية؛

③ W، H: عرض الخلية وارتفاعها؛

④ Bg: صورة خلفية الخلية؛

⑤ Bg: لون خلفية الخلية؛

⑥ Brdr: لون حدود الخلية.
مقالات ذات صلة