المساعد الشخصي الرقمي

عرض الإصدار الكامل : تأليف صفحات ويب الجزء الثالث و الأخير


LEO
05-11-2001, 20:19
هل تابعت الجزءين الأول والثاني من هذه السلسلة، ونفذت الخطوات التي أوردناها في المقالين السابقين؟!
هل قلت: نعم؟!
أصبحت إذاً مستعداً للابتعاد قليلاً عن الشاطئ، والغوص معنا عبر هذا المقال!
أما إذا لم تكن قرأتهما، فأنصحك بالعودة إلى الجزءين السابقين في الأعداد 14 والـ 15، وتجربة حركات السباحة الأولى عبر الشبكة، حيث بينّا فيهما كيفية استخدام برنامج Front Page Express لإنشاء صفحات ويب، وإضافة المحتويات إليها، كالنصوص، والصور، والوصلات، والأزرار، والعدادات، وغيرها. واعتمدنا لتوضيح ذلك، على مثال يبين كيفية تأليف موقع شخصي، والاشتراك في موقع يوفر لأعضائه حجماً تخزينياً مجانياً على شبكة إنترنت، ثم رأينا كيفية إرسال الملفات التي أنشأناها إلى مزود الموقع على الشبكة.
هيا سنبدأ الإبحار فوراً!

الجداول
لا بد أنك لم تكتف بتنفيذ الأمثلة التي مرت في الجزءين السابقين، وبدأت بإضافة نصوصك وصورك الخاصة على صفحات ويب التي باشرت بتأليفها. وربما حاولت تنسيق تلك النصوص والصور، لكنك فوجئت بصعوبة تنسيق النص ومحاذاة الصور بالشكل الذي ترغبه تماماً، كما تفعل، عادة، في محررات النصوص، وأحسست بالضيق لذلك، وأرجعت الصعوبة إلى قلة خبرتك في تأليف صفحات ويب، والتعامل مع برنامج FrontPage Express. لكن الأمر ليس كما اعتقدت! إذ لا يمكن تنسيق النصوص أثناء تأليف صفحات ويب، بالطريقة ذاتها التي تنفذ عند التعامل معها من خلال محررات النصوص، ولا يمكن سوى تعيين جهة محاذاة النص والصورة، إلى اليمين أو اليسار أو في الوسط. والحل الوحيد لضبط النص بعد فراغ معين، أو ضمن مربع معين، استخدام إمكانية توفرها لغة HTML، وهي تنسيق محتويات الصفحة ضمن جداول Tables.
تسمح لغة HTML بتعيين عدد أعمدة وصفوف الجداول، وضبط محاذاتها إلى يمين أو يسار أو وسط الصفحة، بالإضافة إلى العديد من الخصائص الأخرى. لكننا، كما فعلنا منذ البداية، سنستخدم برنامج Front Page Express لتعيين تلك الخصائص للجداول، بدلاً من أن نعينها عبر واصفات HTML، إذ يوفر البرنامج قائمة خاصة للجداول، باسم Table يمكن استخدام الجداول لتنسيق النصوص والصور بأسلوب معين، إلا أن الاستخدام الطبيعي لها هو في إظهار جداول على صفحات ويب، وهذا ما سنضرب مثالاً عليه أولاً، ثم سنرى كيفية استخدامها بأساليب أخرى.
تذكر أننا أنشأنا صفحة أدرجنا فيها لائحة الوصلات بالمواقع المفضلة… ما رأيك أن تظهر تلك الوصلات بشكل أكثر ترتيباً، بحيث نضعها ضمن جدول يتضمن ثلاثة أعمدة: الأول لعنوان الموقع، والثاني يصف محتوياته، والثالث يظهر مستوى جودته حسب تصنيفك الخاص، وعلى سلم مكون من خمسة نجوم؟!.
موافق!

إليك خطوات العمل:
افتح ملف صفحة وصلات المواقع المفضلة my favoritepg.htm، مستخدماً برنامج FrontPage Express. انتقل إلى نهاية الصفحة، ثم اختر من قائمة Table، الأمر Insert Table، فيظهر صندوق حوار يطلب عدد الصفوف والأعمدة، ضمن إطار Size، وهيئة الجدول، ضمن إطار Layout، وعرض الجدول، ضمن إطار Width
غير عدد الأعمدة إلى ثلاثة (عنوان الموقع، المحتويات، التقييم)، وعدد الأسطر إلى عدد يساوي عدد المواقع المفضلة التي ترغب بإدراجها في الجدول. (يمكن لاحقاً تغيير عدد الصفوف والأعمدة حسب حاجتك، من قائمة Table ذاتها).
اختر من إطار Layout، ومن لائحة Column Order، الاتجاه RTL من اليمين لليسار، وهو اتجاه الانتقال من حقل إلى آخر، عند الضغط على الزر Tab أثناء إدخال المعلومات في الجدول، بالإضافة إلى أنه يضبط ضمنياً، المحاذاة إلى اليمين داخل خلايا الجدول، وهي المحاذاة الطبيعية في الصفحات العربية.
اختر محاذاة الجدول، في وسط الصفحة، من الإطار Layout، ومن لائحة Alignment
غير عرض حواف الجدول الخارجية، إلى قيمة 2 بكسل، من مستطيل الإدخال Border Size، وضمن إطار Layout أيضاً. إذا أبقيت على قيمة عرض الحواف صفراً، فلن تظهر الحواف الخارجية، أو الحواف الداخلية، عند إظهار الجدول باستخدام المتصفح.
عين قيمة بطانة الخلية Cell Padding، وتباعد الخلايا Cell Spacing بحيث تساوي واحد، حيث تحدد قيمة بطانة الخلية بالبكسل بعد حواف خلية الجدول داخلاً عن محتوياتها من جميع الأطراف، بينما تحدد قيمة تباعد الخلايا المسافة بين حافة الخلية والخلية التي تجاورها بالاتجاه الأفقي أو الشاقولي، بالبكسل أيضاً.
تحدد محتويات الإطار Width عرض الجدول، وذلك حين النقر على مربع الاختيار Specify Width. يمكن عندها تعيين عرض الجدول كنسبة مئوية من الصفحة، عند اختيار in present أو كقيمة محددة بالبكسل عند اختيار in Pixels. اختر in Percent، ثم أدخل قيمة 90 في مستطيل الإدخال، فيكون عرض الجدول المطلوب 90% من عرض الصفحة بغض النظر عن الكثافة النقطية المستخدمة في الإظهار.
انقر زر Ok، فيظهر FrontPage Express الجدول بالهيئة والمحاذاة التي حددتها. لاحظ أنه يمكن التنقل بين خلايا الجدول بالضغط على زر Tab، كما يحدث في برنامج وورد عادة.
إذا لم يعجبك شكل الجدول الظاهر أو أبعاده، يمكن أن تنقر بالزر الأيمن للماوس داخل الجدول وتختار Table Properties… خواص الجدول، فيظهر صندوق حوار يسمح بإجراء التغييرات التي تريدها في هيئة الجدول، أو عرضه، أو محاذاته، بالإضافة إلى أنه يوفر إمكانية تغيير لون أرضيته من داخل الإطار Custom Background، إذ يمكن اختيار اللون من لائحة Background Color. يمكن من خلال صندوق حوار خصائص الجدول تعيين صورة خلفية له، باختيار Use Background Image ثم إدخال اسم ملف الصورة، الذي يجب أن يكون من هيئة GIF أو JPG. إذا كانت أبعاد الصورة الخلفية أصغر من أبعاد الجدول، فإنها تتكرر حتى تملأ كامل أرضيته، أما إذا كانت أبعادها أكبر منه، فيظهر الجزء العلوي منها فقط، بمساحة تساوي مساحة الجدول. لاحظ أنه عند استخدام صورة خلفية فإنها تطغى على اللون المعين للأرضية. ويجب، عند تعيين صورة خلفية للجدول، إرسال ملف الصورة إلى المزود الذي يستضيف الصفحة التي تتضمن الجدول المعني. انتبه عند اختيار صورة خلفية، أن لا تعيق ألوانها وخطوطها قراءة النصوص الموجودة في خلايا الجدول. وينطبق الأمر ذاته عند اختيار لون أرضية للجدول، إذ يجب أن يكون لوناً يسهل تمييز النص الذي يتضمنه، بسهولة.
يمكنك تعيين ألوان حواف الجدول من ضمن إطار Custom Colors، وذلك باختيار اللون من قائمة Border، أو اختيار لوني الظل الخفيف، والداكن من قائمتي Light Border وDark Border
ضع المشيرة داخل الجدول، ثم اختر من قائمة Table الأمر Insert Caption لإدراج عنوان للجدول، ثم أدخل العنوان "جدول المواقع المفضلة" في تلك الخلية الجديدة التي أدرجت. إذا نقرت بالزر الأيمن للماوس داخل خلية عنوان الجدول، يمكنك إظهار خصائصها بأمر Caption Properties، ثم تحديد موقعها أعلى أو أسفل الجدول، بالخيارين Top of Table أو Bottom of Table
أدخل عناوين أعمدة الجدول في الخلية الأولى من كل عمود… أدخل مثلاً "عنوان الموقع"، و"المحتويات"، و"التقييم".
املأ الجدول بقص ونسخ الوصلات الموجودة في الصفحة إلى خلايا العمود الأول "عنوان الموقع"، وأدخل الوصف الذي تعرفه عن كل موقع في العمود الثاني، وتقييمك له في العمود الثالث، على شكل سلم من خمسة نجوم.
احفظ الملف الناتج، ثم اعرضه مستخدماً متصفح إنترنت المتوفر لديك، لتتأكد من أنه يظهر الجدول بالشكل الذي تريده.
ليس هذا كل ما يمكن أن تفعله بالجداول، إذ لا تكتفي لغة HTML بتوفير إمكانية عرض الجداول على صفحات ويب، بل تضيف إلى ذلك إمكانية دمج خليتين متجاورتين، أو تقسيم خلية معينة إلى خليتين. ويخفي برنامج FrontPage Express تفاصيل ذلك عبر أمري Merge Cells و Split Cells، في قائمة Table، بشكل يشبه التعامل الجداول في محرر النصوص وورد. تسمح لغة HTML أيضاً، بتحديد مواصفات أية خلية من خلايا الجدول، وهذا ما يعكسه برنامج FrontPage Express من خلال صندوق حوار خصائص الخلية، الذي يظهر عند نقل المشيرة إلى خلية معينة، واختيار Cell Properties من قائمة Table، أو من القائمة المنبثقة التي تظهر عند النقر بالزر الأيمن ضمن الخلية. يتضمن صندوق حوار خصائص الخلية إمكانية تحديد لون أو صورة الأرضية، في إطار Custom Background، ولون الحواف في إطار Custom Color، بالإضافة إلى إمكانية اختيار محاذاة المعلومات داخلها في إطار Layout، واختيار عرضها الأدنى في إطار Minimum Width
ويتيح برنامج FrontPage Express تغيير خصائص جميع الخلايا التي تخص صفاً أو عموداً في جدول، باختيار Select Row أو Select Column، ثم اختيار Cell Properties. جرب، مثلاً، أن تغير لون خلايا الصف الأول، من الجدول الموجود في ملف المواقع المفضلة.
يمكنك الآن إرسال الملف إلى المزود الذي يستضيف صفحاتك، ثم التأكد من أن النقر على زر "المواقع المفضلة" في الصفحة الرئيسية يؤدي إلى ظهوره، لكن لا تنس أن تعين لها ملف الصورة الأرضية، والعنوان، وأن تضيف إليها زر العودة إلى الصفحة الرئيسية.

الجداول أيضاً:
لا يقتصر استخدام الجداول في تأليف صفحات ويب على استخدامها كجداول فعلاً، إذ يمكن استخدامها كوسيلة لتنسيق النصوص والصور، كما ذكرنا، حيث يمكن أن تتضمن خلية الجدول صورة أو أكثر، أو حتى جداول أخرى.
لنفرض أنك ترغب بعرض صورتك على الصفحة الرئيسية، بجانب نص ترحيبي. يمكن، كي تنفذ ذلك بسهولة، أن تدرج جدولاً يتضمن صفاً واحداً، وعمودين، وتضبط عرض حواف الجدول Border Size على القيمة صفر، أي بدون حواف مرئية، ثم تدخل النص الترحيبي الذي تريده في الخلية اليمنى، وتضع المشيرة في الخلية اليسرى، وتدرج فيها الصورة المرغوب، ثم تضبط قيمة عرض كل من الخليتين Minimum Width، (من خصائص كل خلية)، بحيث تجعل خلية النص أكبر من خلية الصورة، (70% للخلية اليمنى، 30% للخلية اليسرى، مثلاً) يجب أخيراً، كالعادة، حفظ الملف الناتج وإرساله مع ملف الصورة إلى المزود الذي يستضيف صفحتك، فتظهر الصفحة الرئيسية في المتصفح.
يمكن أن تستفيد من الجداول أيضاً، إذا أردت إنشاء صفحة تتضمن مجموعة من الصور المصغرة المرتبة على شكل صفوف وأعمدة، والتي يؤدي النقر على كل منها إلى عرض الصورة ذاتها، لكن بأبعادها الأصلية. ويمكن أن تذيل كل مصغّر صورة بتعليق مناسب. يسمح هذا الأسلوب من عرض الصور بشكل مصغر، بإلقاء نظرة شاملة على مجموعة الصور كلها، ثم مشاهدة الصورة بأبعادها الأصلية عند الرغبة. يمكن تنفيذ ذلك لكي تعرض، صوراً للأماكن التي زرتها، مثلاً، أو للأماكن الشهيرة في مدينتك، أو حتى صور طفلك في سنواته الأولى. يجب أن تكون تلك الصور متوفرة لديك بشكل إلكتروني على هيئة ملفات GIF أو JPG
ابدأ العمل بأن تنشئ ملفاً جديداً من نوع htm، باستخدام برنامج FrontPage Express، وسمه myGalleryPg.htm، مثلاً، ثم أنشئ فيه جدولاً يتضمن عدداً من الخلايا مساوياً لعدد مصغرات الصور التي تريد إظهارها، وبترتيب مناسب لأشكال صورك، ثم أدرج في كل خلية صورة مختلفة، وصغر كل صورة إلى الأبعاد التي ترغبها بنقر الصورة، ثم اسحب وأفلت أحد مربعات التحكم، التي تظهر على زواياها الأربع في البرنامج. انقر بالزر الأيمن للماوس على كل صورة، ثم اختر خصائصها Image Properties، وأدخل في صندوق الحوار الظاهر، وضمن الإطار Default Hyperlink، وفي مستطيل النص Location، عنوان موقعك، مضافاً إليه اسم ملف الصورة ذاتها، يبدو ذلك بالنسبة للصفحة التي أنشأناها في المقال السابق http://members.tripod.com/Shahem/Picture1.jpg ، حيث Picture1.jpg اسم ملف الصورة مثلاً. أرسل ملف myGalleryPg.htm وملفات الصور إلى المزود البعيد الذي يستضيف صفحتك، ثم أنشئ زراً مرتبطاً به على ملف الصفحة الرئيسية واحفظه، ثم أرسله إلى المزود البعيد. انتقل إلى تلك الصفحة الجديدة واختبر النتيجة.

LEO
05-11-2001, 20:20
سجل الزوار Guest Book
تحتوي كثير من مواقع إنترنت سجلاً للزوار، وهو المكافئ لسجل الزوار، الذي تجده عادة في المتاحف أو المعارض، والذي يستطيع الزائر من خلاله، إبداء رأيه وملاحظاته في ما شاهده، أو يطلع على أراء من سبقه من الزوار. يتم إدخال التعليقات في السجل عادة، عبر صفحة تتضمن عدداً من مستطيلات الإدخال، أهمها مستطيل لإدخال اسم الزائر، وآخر لإدخال التعليق ذاته. وتتوفر، عادة، أيضاً، إمكانية عرض التعليقات السابقة حسب تسلسل ورودها. يحتاج إنشاء سجل للزوار إلى معرفة بلغة CGI، التي لا يعرفها معظم المبتدئين في هذا المجال، بالإضافة إلى توفر صلاحيات لدخول دليل CGI، وتنفيذ المزود الذي يستضيف الموقع للبرامج المكتوبة بها، وهذا مالا تسمح به الجهات التي تستضيف الصفحات المجانية. لكن، يمكن على الرغم من هذا، أن تضيف سجلاً للزوار إلى صفحتك، إذ تستضيف كثير من الجهات سجلات زوار مجانية لمن يرغب، بالأسلوب الذي تتوفر فيه الصفحات المجانية، حيث يجب الاشتراك أولاً، لدى الموقع الموفر للخدمة، عبر ملء نموذج تسجيل، يطلب عنوان البريد الإلكتروني، وعنوان الموقع الذي ترغب بإضافة سجل زوار إليه، ثم يرسل مقطعاً من الشيفرة بلغة HTML، تكفي إضافته إلى صفحتك الرئيسية، عبر فتح نافذة View/HTML ونسخ نص الشيفرة في نهاية النص وقبل إغلاق الواصفة body، ليظهر وصلتين: إحداهما لصفحة إدخال التعليق، والأخرى لصفحة عرض التعليقات السابقة.

إبرة في كومة قش!
هذه حال صفحتك في شبكة إنترنت، فكيف تجعل متصفحي إنترنت يجدونها أو يتعرفون عليها؟!
يستخدم معظم متصفحي إنترنت مواقع البحث، للوصول إلى المعلومات التي يريدونها، كموقع ألتافيستا أو ياهو، التي تفهرس باستمرار محتويات صفحات إنترنت المختلفة، لكنها لا تفعل ذلك إلا إذا أُخبرت بوجود تلك الصفحات، حيث تسمح لأصحاب المواقع الجديدة بأن يرسلوا عناوينها إلى مواقع البحث، كي تفهرس آلات البحث Search Engine محتوياتها خلال فترة تتراوح بين يوم أو عدة أيام. أرسلت عنوان الصفحة الشخصية التي أنشأتها إلى آلة بحث موقع ألتافيستا www.altavista.digital.com ، بالنقر على الوصلة Add a Page ، الموجودة أسفل الصفحة الرئيسية فيه، فانتقلت إلى صفحة أخرى، أدخلت فيها عنوان URL لصفحتي الشخصية في المستطيل المخصص لذلك، ونقرت على زر Submit URL، سيظهر تقرير بأن صفحتي ستفهرس خلال يوم أو يومين.
إذا أردت أن تضيف لصفحاتك كلمات مفتاح Keywords بحيث يؤدي البحث عنها إلى ظهور عنوان صفحتك في نتائج البحث، يمكنك أن تدرج في صفحاتك ما يسمى التعليقات Comments، وهي كلمات أو عبارات تضيفها على الصفحة لكن المتصفح يتجاهل عرضها. لإدراج تعليق باستخدام برنامج FrontPage Express، انقر Insert/Commnet وأدخل الكلمات المفتاحية في صندوق الحوار الظاهر.
يمكنك أيضاً إضافة عنوان صفحتك إلى أحد الأدلة Directory الموجودة على إنترنت، والتي توفر وصلات بمئات المواقع مصنفة حسب موضوعها، فيضيف ذلك الدليل وصلة بعنوان موقعك، ويضعه تحت التصنيف الذي تختاره عند إرسال ذلك العنوان.
يمكنك من خلال الموقع www.liquidimaging.com/submit إضافة عنوان صفحتك إلى العديد من آلات البحث والأدلة، كألتافيستا، وAOL NetFind، وExite، وGoto.com، و HotBot وغيرها.

عودة إلى الشاطئ!
وصلنا معاً إلى نهاية هذا المقال وإلى نهاية هذه السلسلة عن تأليف صفحات ويب باستخدام برنامج FrontPage Express. وكان الهدف منها تعريف المبتدئين بالأمور الأساسية في هذا المجال، بحيث يتمكنون في نهاية المطاف، من إنشاء صفحات ويب بسيطة، بشكل سريع وسهل. أغفلنا عمداً بعض الميزات المتوفرة في لغة HTML، كإمكانية إظهار الإطارات أو تشغيل برمجيات جافا وشيفرة CGI، لأنها تتضمن معلومات تفوق مهارات المبتدئين، بالإضافة إلى أنهم لا يحتاجونها في تأليف صفحاتهم البسيطة.
نود أخيراً، أن نشجعكم على تأليف صفحاتكم باللغة العربية بشكل خاص، لزيادة محتويات الشبكة من الصفحات العربية، ولا بأس أن ترافقها اللغة الإنجليزية أو غيرها، إذا كنتم ترغبون بتوجيه صفحاتكم إلى جميع متصفحي إنترنت