عزيزي القارئ···في الحلقات السابقة، كنا نتعرف على برنامج دريم ويفر لأول مرة، وكنا نكون مفهوماً عاماً عن موقع الإنترنت؛ مم يتكون، وما الذي يمكن إدراجه به، وغير ذلك من المعلومات، لذا فقد فضلت أن أصنع معك موقعاً بسيطاً باستخدام CSS حيث يتم إنشاء موقع جاهز التصميم، وما عليك إلا تغيير المحتويات، ولكن···هذا الأمر ليس هو السائد، فما أجمل أن تبني موقعك على هواك وتضع بصماتك عليه في كل شيء، وبهذا تكون محتاجاً إلى طريقة أخرى لصنع الموقع، وهي تلك التي تستخدم الجداول في تصميم صفحات الإنترنت، وهذا ما سنتعرض له في هذا العدد فتابعنا·
أولاً: لماذا نستخدم الجداول في تصميم الصفحات؟
باختصار الجداول تساعدك على تنظيم محتويات الصفحة بصورة جيدة، كما أن بإمكانك تحويلها فيما بعد إلى طبقات Layers، كما أنها أيضاً تتناسب مع كل متصفحات الإنترنت، فلن تجد مشكلة في استعراض محتوياتها حتى لو كان المتصفح قديماً، بعكس الـ Css مثلاً·
ثانياً: كيف أبدأ التخطيط؟
يمكنك أن تبدأ التخطيط على الورق أولاً، مثلاً تصمم الصفحة، لتعرف كم صفاً تحتاج، وأي الصفوف ينقسم لأعمدة وأيها لا، وكم عموداً تحتاج في الصف؟، وغير ذلك من الأسئلة التي تحتاج لإجابة، ويمكنك أيضاً أن تصمم باستخدام البرنامج مباشرة على سبيل التجربة أولاً، ثم إذا استقر رأيك ابدأ التصميم في مستند آخر، بشكل نهائي، وبدون محاولات صواب وخطأ، لأن التعديل في تصميم الجداول المشتملة على المحتويات أمر به صعوبة·
ثالثاً: إدراج الجدول
·1أنشئ صفحة جديدة، وذلك بأن تفتح الموقع (إذا كنت أنشأته) ثم تفتح قائمة (ملف File) ثم تختار (جديد New) فيظهر الشكل التالي:
·2تأكد أن تبويب (عام General) هو المحدد، واختر من قسم (الفئات Category) أمر Basic Page.
·3ومن قسم (Basic Page) اختر أمر HTML. فتظهر صفحة جديدة بمساحة العمل في دريم ويفر·
·4تأكد أنك في وضع التصميم Designe، ثم افتح قائمة (إدراج Insert) واختر أمر (جدول Table) فيظهر الشكل التالي:
·5سنفترض أن التخطيط الذي أنشأناه على الورق لتصميم هذه الصفحة قد أسفر عن حاجتنا لثلاثة أعمدة، وثلاثة صفوف، وسنملأ خانات المربع السابق على النحو التالي:
·6لتحديد عرض الجدول، اتجه للخانة المقابلة لخانة (عرض الجدول Table Width ) ومكتوب فيها (في الشكل السابق) بيكسيل Pixels ، فيمكنك أن تجعل وحدة الاختيار كما هي البيكسل، ثم تكتب الرقم الذي تريده في الخانة المقابلة· ويمكنك أن تجعل تحديد العرض يكون بالنسبة المئوية Persent، وهذا ما سنفعله في مثالنا، ثم نكتب في خانة (عرض الجدول Table Width) رقم (100) أي أن عرض الجدول سيكون بكامل عرض الصفحة·
·7في خانة (سمك الحد Border thickness) اكتب الرقم الذي تريده لسمك حدود خلايا الجدول، ولكننا هنا لا نريد حدوداً لخلايا الجدول، فهو جدول لتصميم الصفحة فقط، وليس لعرض بيانات مجدولة، لذا سنكتب في هذه الخانة (صفر)، ولاحظ أن بإمكانك عمل حدود (بوضع رقم هنا) ثم إلغائها في أي وقت تريد (بوضع صفر) دون أية مشاكل في تصميم الصفحة·
·8في خانة Cell Padding اكتب المسافة بالبيكسيل بين حدود الخلية وبين محتوياتها (نصوص، أو صورة) ، ولتكن (10) بيكسيل·
·9في خانة Cell Spacing اكتب المسافة بالبيكسل بين الخلايا، ونحن هنا لا نحتاج لها، لذا سنجعل هذه المسافة (0)
·10في قسم (Header) اختر (بلا None) لأننا لا نريد أن نضع عناوين في الجدول، أما إذا كنت تنشئ جدولاً لعرض بيانات مجدولة وتريد لها عناوين رأسية فاختر (أعلى Top) كي تجعل الصف الأول هو صف العناوين، أو اختر ( يسار Left) كي تجعل العناوين أفقية ويكون العمود الأيسر هو عمود العناوين، أو اختر (كلاً منهما Both) كي يظهر عنوان رأسي وآخر أفقي·
·11يمكنك عمل عنوان للجدول يظهر فوقه، (ولكننا هنا لا نحتاجه) وذلك بكتابته في خانة (العنوان Caption).
·12 بعد الانتهاء من الخطوات السابقة انقر موافق فيظهر الجدول كما بالشكل التالي:
رابعاً: إضافة المحتويات داخل الجدول
الآن عزيزي القارئ يمكنك الكتابة داخل الخلايا لإضافة النصوص، أو يمكنك إدراج الصور والمكونات كما ذكرنا في الحلقات السابقة، والتنقل بين خلايا الجدول يكون بالماوس أو بلوحة المفاتيح، فإن كنت من هواة لوحة المفاتيح، فتنقل كالتالي:
·1اضغط مفتاح Tab للانتقال للخلية التالية·
·2لاحظ أنك إذا كنت في آخر خلية، ثم ضغطت مفتاح Tab فستضيف صفاً جديداً للجدول· أي أن الجدول السابق سيصبح أربعة صفوف بدلاً من ثلاثة·
·3اضغط مفتاحي Shift+ Tab معاً للرجوع للخلية السابقة·
·4استخدم مفاتيح الأسهم الأربعة للتنقل بين خلايا الجدول التي يشير لها سهم المفتاح·
وبهذا عزيزي القارئ··نكون قد تعرفنا على كيفية تصميم الصفحة باستخدام الجدول، وكيفية إدراجه، والتنقل بين خاناته، وإضافة محتوياته، وسنوالي الحديث عن تنسيق الجدول كي تظهر صفحة الإنترنت كما تريد لها، فتابعنا في الأعداد القادمة بإذن الله·
إعداد/ رحاب زناتي
rehab_zanaty@hotmail.com
عدد اليوم
