الفصل الرابع تنفيذ الصفحة الرئيسية لمدونة Doking
الآن بعد أن أصبح كل شيء جاهزًا، يجب أن نبدأ بتصميم صفحة مدونة Doking وتنفيذ الواجهة الأمامية لقاعدة البيانات.
هنا، لن نتحدث عن معرفة إنشاء فن الويب، ولكن سنشرح أفكار وطرق بناء الصفحات الداخلية لموقع الويب في Dreamweaver MX2004.
4.1.1 أفكار تصميم مواقع الويب
قبل البدء في كل صفحة ويب، يجب أن يتم تصميم التصميم الأساسي للصفحة بشكل عام باستخدام برنامج Firworks أو برنامج تصميم الصور مثل Photoshop. الشكل 4-1-1 هو التصميم الأساسي للصفحة المصمم في Photoshop.
الشكل 4-1-1 تم ترقيم التصميم الأساسي للصفحة في مدونة Doking
في الشكل 4-1-1 ①الجزء المميز بدائرة مربعة حمراء هو العمود الأيسر من صفحة الويب وهو فارغ حاليًا وستتم مناقشة أعمدته ما تمت إضافته واحدًا تلو الآخر، والجزء المميز بدائرة مربعة حمراء عند الرقم التسلسلي ② هو شريط التنقل الخاص بموقع الويب، والذي يتم إنشاؤه ديناميكيًا من جدول LM في قاعدة بيانات dkblog.mdb المنشأة في الفصل. 3. بعد أن تتضح الأفكار الأساسية، ابدأ في بناء القالب الخاص بالموقع.
4.1.2 أفكار تصميمية لبناء قوالب موقع الويب
: قم ببناء قوالب موقع الويب وتوحيد تصميم موقع الويب. يتم إنشاء محتوى قائمة أعمدة موقع الويب بواسطة LM الديناميكي لجدول البيانات، مما يسهل أيضًا تعديل محتوى قائمة أعمدة موقع الويب.
(1) افتح [ملف] → [جديد]، افتح مربع الحوار [مستند جديد]، حدد "الفئة:" كـ "صفحة قالب"، وحدد "صفحة القالب:" كـ "قالب ASP.NET VB"، والنتيجة كما هو موضح في الشكل كما هو موضح في 4-1-2.
الشكل 4-1-2 مربع حوار قالب جديد
(2) انقر فوق الزر "إنشاء"، وأدخل الطبقة، في نافذة خصائصها، واضبط المعرف على "رئيسي"، وقم بتغيير "يسار (L)" و"أعلى (T)" )" إلى 0px، واضبط "العرض (W)" على 100%، واضبط المحاذاة على المركز. هذا هو توسيط صفحة الويب.
(3) أدخل جدولًا، واضبط المعرف على "bodyT"، واضبط العرض على 780 بكسل (تم تصميم هذا بناءً على عرض تصميم صفحتك الأساسي)، واضبط الهوامش والتباعد لخلية الوحدة على 0، واضبط تم ضبط سمك الحدود على 0.
(4) قم بتعيين المحاذاة الرأسية للصف الثاني من جدول "bodyT" إلى الأعلى، ثم قم بتقسيمه إلى عمودين. اضبط عرض العمود الأول على 220 بكسل وعرض العمود الأول على 560 بكسل (العرض). من الأعمدة المخصصة أيضًا (يتم تعيينها بواسطة تصميم صفحتك الأساسي)، قم بتعيين لون خلفية العمود 1 إلى RGB (236، 236، 236).
(5) أدخل صور الخلفية المقابلة في الصفين الأول والثالث من جدول "bodyT"، واضبط المحاذاة الرأسية للصف الأول إلى الأسفل والمحاذاة الأفقية إلى اليمين.
(6) يمكنك أيضًا تصميم العنوان أو حجم الخط أو لون خط الاتصال أو نظام الألوان حسب الحاجة.
(7) إنشاء شريط التنقل للموقع.
① ابدأ تشغيل Access2003، وافتح قاعدة البيانات dkblog.mdb، وأدخل أربعة سجلات بالترتيب، بما في ذلك التصميم الجرافيكي والتصميم ثلاثي الأبعاد وتصميم الويب وبرمجة الشبكة، في حقل LM بجدول LM، كما هو موضح في الشكل 4-1-3 .
الشكل 4-1-3 إدخال بيانات جدول LM
② ارجع إلى Dreamweaver، وانتقل إلى لوحة [Server Behavior]، وانقر فوق الزر "+"، وحدد "Data Set" في القائمة المنسدلة، كما هو موضح في الشكل 4- 1-4.
الشكل 4-1-4 إضافة مجموعة بيانات
③ في مربع الحوار [مجموعة البيانات] المنبثق، أدخل اسم مجموعة البيانات كـ "menuda"، وحدد "dkconn" في القائمة المنسدلة للاتصال، وحدد جدول LM في القائمة المنسدلة للجدول، وحدد العمود هو الخيار "الكل"، ثم حدد الحقل "LMID" في القائمة المنسدلة للفرز، واضبط الفرز على ترتيب تصاعدي، وتظهر النتيجة في الشكل 4-1-5 :
الشكل 4-1-5 مربع حوار مجموعة البيانات
④ انقر فوق الزر "اختبار"، وسيظهر مربع الحوار الموضح في الشكل 4-1-6، للإشارة إلى أنه تم إنشاء مجموعة البيانات بنجاح، انقر فوق الزر "موافق" لإكمالها .
الشكل 6-1-4 مربع حوار اختبار مجموعة البيانات
⑤ انتقل إلى علامة التبويب [الربط] وقم بتوسيع حقول مجموعة البيانات (القوائم)، كما هو موضح في الشكل 7-1-4:
الشكل 4-1-7 علامة تبويب الربط
⑥ اسحب الحقل LM إلى الصف الأول من الجدول bodyT، كما هو موضح في الشكل 4-1-8:
الشكل 4-1-8 اسحب الحقل LM
⑦ حرر الماوس، وسيتم إضافة حرف مظلل إلى السطر الأول: {menuda.LM}، أدخل "الصفحة الرئيسية | " أمامه، ثم أدخل الرمز " |. اتصل بنا”، والنتيجة موضحة في الشكل 4-1-9:
الشكل 4-1-9 ربط البيانات بجدول bodyT
⑧ حدد الحرف المظلل {menuda.LM} والحرف التالي "|"، حدد قائمة [إدراج] → [كائن التطبيق] → [منطقة التكرار]، في القائمة المنبثقة لأعلى في مربع الحوار [منطقة التكرار]، حدد مجموعة البيانات كـ "قائمة" وحدد السجلات المعروضة كـ "جميع السجلات"، كما هو موضح في الشكل 4-1-10 انقر فوق الزر "موافق" لإكمال التنقل في موقع الويب قائمة طعام.
الشكل 4-1-10 مربع حوار منطقة التكرار
(7) حرك الماوس إلى الصف الثاني والعمود الثاني من نص الجدول، حدد قائمة [إدراج] → [كائن قالب] → [منطقة قابلة للتحرير]، وانقر فوق [منطقة جديدة قابلة للتحرير] في مربع الحوار، أدخل اسم "الجسم الرئيسي" واضغط على مفتاح "موافق"، كما هو موضح في الشكل 4-1-11:
الشكل 11-1-4 قم بإنشاء منطقة جديدة قابلة للتحرير
يؤدي هذا إلى إكمال العمل الأولي لقالب موقع الويب. احفظ القالب باسم bkblog.dwt.aspx.
4.1.3 أفكار تصميمية لتصميم الصفحة الرئيسية
: بعد الانتهاء من أعمال إنشاء قالب موقع الويب، استخدمه لإنشاء موقع الويب وتحديثه.
(1) قم بإنشاء صفحة ديناميكية "ASP.NET VB" جديدة، افتح قائمة [تعديل] → [قالب] → [تطبيق القالب على الصفحة]، في مربع الحوار [تحديد قالب] المنبثق، حدد القالب "dkblog "، وانقر على زر "تحديد"، كما هو موضح في الشكل 4-1-12:
الشكل 4-1-12 تحديد القالب
(2) حرك الماوس إلى المنطقة القابلة للتحرير "الجسم الرئيسي"، وأدخل جدولاً، واضبط المعرف الخاص به على "ztre". في الواقع، تم تصميمه كما هو موضح في الشكل 4-1-13 وهذا ما ستظهره كل مذكرة دراسية.
الشكل 13-1-4 المحتوى الذي سيتم عرضه في كل ملاحظة دراسية
إن إدراج مجموعة البيانات الموضحة في هذا القسم ليس بهذه البساطة كما هو موضح في القسم السابق. أولاً، انظر إلى الشكل 4-1-13 ستعرض كل ملاحظة دراسية الموضوع ووقت النشر وفئة الملاحظة (أي العمود الفرعي الذي تنتمي إليه) والمؤلف (الاسم) والردود (الرقم). انظر إلى مخطط تصميم جدول ZT (الشكل 3-2-2 في القسم 3.2)، لا يوجد سوى LMID (معرف عمود التصنيف) ولا يوجد اسم عمود، والذي يمكن الحصول عليه عن طريق الاتصال بجدول LM هناك؛ هو YHID فقط (معرف الناشر)، ولكن لا يوجد اسم المؤلف، ولا يمكن الحصول عليه إلا من جدول YH، ويمكن الحصول على بيانات أخرى من جدول ZT. "الأمر معقد جدًا!" في الواقع، لا تقلق، يمكن حل جميع الصعوبات في Access.
4.2.1 إنشاء استعلام اتصال جدول البيانات
(1) ابدأ Access2003، حدد [استعلام] → انقر نقرًا مزدوجًا فوق [إنشاء استعلام في عرض التصميم]، وستنبثق نافذة [إظهار الجدول]، كما هو موضح في الشكل 4-2-1 :
الشكل 4-2-1 إضافة جدول اتصال الاستعلام
(2) قم بإضافة جدول LM وجدول ZT وجدول YH بالترتيب. وتظهر النتائج في الشكل 4-2-2:
الشكل 2-4-2 عرض اتصال جدول البيانات
(3) قم بتصميم حقل الاستعلام كما هو موضح في الشكل 4-2-3:
الشكل 4-2-3 مخطط تصميم حقل الاستعلام
(4) احفظ هذا الاستعلام باسم ZTRE وأكمل استعلام اتصال جدول البيانات في Access.
4.2.2 إدراج مجموعة بيانات
(1) ارجع إلى Dreamweaver، وانتقل إلى لوحة [Server Behavior]، وانقر فوق الزر "+"، وأضف مجموعة البيانات Ztre، وحدد الجدول كاستعلام ZTRE تم إنشاؤه للتو في Access، وغير ذلك من الأمور ذات الصلة الإعدادات، كما هو موضح في الشكل 4-2-4:
الشكل 4-2-4 إعدادات مجموعة بيانات Ztre
(2) قم بالتبديل إلى علامة التبويب [Binding]، وقم بتوسيع مجموعة البيانات (Ztre)، واسحب الحقل ZTNAME لاستبدال "موضوع ملاحظة الدراسة" في الجدول ztre، واسحب الحقل ZTTIME ليحل محل وقت "النشر"، اسحب الحقل LM لاستبدال "الفئة"، اسحب الحقل ZYTEXT إلى المساحة الفارغة في الصف الثاني من الجدول ztre، وتظهر التصميمات الأخرى في الشكل 4-2-5:
الشكل 4-2-5 ربط البيانات بجدول ztre
(3) قم بالتبديل إلى لوحة [Server Behavior] يمكنك أن ترى أنه تمت إضافة الكثير من النص الديناميكي (Ztre.ZYTEXT) وحدد التنسيق كتنسيق "Encoding-HTML Encoding"، كما هو موضح في الشكل 4-2-6:
الشكل 4-2-6 إعداد تنسيق النص الديناميكي
(4) حدد الصفوف الأول والثاني والثالث من الجدول ztre، وقم بتعريفها كمساحات متكررة، الإعدادات كما هو موضح في الشكل 4-2-7.
الشكل 7-2-4 تحديد منطقة التكرار
وبذلك يكتمل عمل إدراج مجموعة البيانات وربط البيانات في الصفحة الرئيسية.
(1) حدد "الصفحة الرئيسية"، في لوحة [سلوك الخادم]، انقر فوق الزر "+"، حدد [ترحيل مجموعة البيانات] → [الانتقال إلى الصفحة الأولى]، كما هو موضح في الشكل 4-3-1:
الشكل 4-3-1 قائمة ترحيل مجموعة البيانات
(2) في مربع الحوار المنبثق، حدد مجموعة البيانات كـ Ztre واضغط على مفتاح "موافق"، كما هو موضح في الشكل 4-3-2:
الشكل 4-3-2 الانتقال إلى مربع حوار الصفحة الأولى
(3) حدد "الصفحة السابقة" وقم بتعريفها على أنها "الانتقال إلى الصفحة السابقة" لترحيل مجموعة البيانات وحدد "الصفحة التالية" وقم بتعريفها كمجموعة بيانات " الانتقال إلى الصفحة التالية" لترقيم الصفحات؛ حدد "الأخير" لتحديد "الانتقال إلى الصفحة الأخيرة" لترقيم الصفحات لمجموعة البيانات.
(4) قم بتغيير "رقم الصفحة" إلى "رقم الصفحة الحالية:" في لوحة [سلوك الخادم]، انقر فوق الزر "+" وحدد [إظهار عدد السجلات] → [إظهار رقم الصفحة الحالية].
(5) احفظ ملف Index.aspx، وبذلك يكتمل تصميم الصفحة الرئيسية. أدخل بعض السجلات في جدول ZT وجدول YH المطابقين في Access، وتصفحها في متصفح IE (إذا لم تكن هناك تعليمات خاصة في الفصول التالية، الملاحظات كلها تابعة لعمود "برمجة الشبكات" كما هو موضح في الشكل 4-3-3:
الشكل 4-3-3 صورة تصفح الصفحة الرئيسية