الصفحة الرئيسية

تصميم مواقع الإنترنت

الدرس الأول

مفهوم المواقع والتخطيط لبنائها

مفاهيم أساسية :

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

وفيما يلي سنتناول بالشرح مفهوم المواقع وأساسيات التخطيط لبنائها .

الصفحة

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

 الموقع :

هو مجموعة من الصفحات المرتبطة ببعضها البعض .

ويقسم الموقع إلى صفحة واحدة رئيسية وصفحات فرعية .

والصفحة الرئيسية هي التى تظهر بمجرد كتابة اسم الموقع في متصفح الإنترنت وغالبا مايكون اسم الموقع في متصفح الإنترنت وغالبا مايكون اسم الملف الخاص بها Index.htm أو index.html أو default.htm أو default.html أو main.htm أو main.html  .

عادة مايتم إنشاء الموقع على حاسوبك الشخصي ولكي يكون متاحا للآخرين يجب نشره عن طريق نسخه إلى الملقم .

الملقم

هو جهاز حاسوب يتضمن برامج خاصة ترسل إلى المستخدم محتويات الصفحة والملفات المقترنة بها للمواقع المنشورة على هذا الملقم عند طلبها من متصفح الإنترنت .

خصائص الموقع الجيد

عند تصميم موقع يجب مراعاة ما يلي :

1- أن يتوافق شكل الموقع مع إعدادات الشاشة المختلفة .

2- أن يكون عنوان الموقع بسيطا يعبر عن الهدف منه .

3- الإطلاع على المواقع ذات العناوين المشابهة لعنوان الموقع المقترح للمقارنة وتأكيد الاختيار .

4- أن تفدم الصفحة الرئيسية فكرة واضحة عن الموقع وأهدافه .

5- أن تكون لكل صفحة من صفحات الموقع على شكل جدول . وأن تتضمن الصفحة الرئيسية شعارا للموقع وشريط للتنقل بين صفحات الموقع .

6- تجزئة النصوص الطويلة إلى فقرات صغيرة تسهل قراءتها .

7- استخدام أنواع الخطوط المتوافرة في معظم أجهزة الحواسيب .

☺خطوات تصميم موقع :

لضمان تصميم ناجح لموقعك على شبكة الإنترنت يجذب المستخدمين لزيارته . يفضل وضع خطة تتضمن المراحل الثلاث التالية :

Θ التخطيط لبناء الموقع .        Θ إنشاء الموقع .        Θ نشر الموقع .

Ω التخطيط لبناء موقع :

تكمن أهمية هذه المرحلة في إعداد خطة العمل المتكاملة وتحديد الاحتياجات من المادة المطلوبة وفريق العمل والبرمجيات وغيرها . وينبغي في هذه المرحلة مراعاة مايلي :

١- تحديد الهدف من إنشاء الموقع .

۲- الإطلاع على مواقع مشابهة للاستفادة منها .

3- إعداد بناء هيكلي للموقع .

4- إنشاء رسم توضيحي للصفحات .

5- تحديد البرامج المستخدمة .

6- تحديد نوع الملقم .

7- مصادر محتوى الموقع .

8- وضع خطة العمل .

أساسيات برنامج تصميم مواقع الإنترنت

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

• واجهة البرنامج

    عند تشغيل البرنامج تظهر لك

 الشاشة التالية :

تنقسم واجهة البرنامج إلى ثلاث مناطق رئيسية :

☼ شجرة التنقل .

☼ جزء المهام .

☼ منطقة الموقع والصفحات  .

شجرة التنقل :                                           

ويظهر في هذه المنطقة إما قائمة المجلدات أو جزء التنقل .

قائمة المجلدات والملفات :

عبارة عن مستكشف لمحتويات الموقع من مجلدات وملفات

وتتضمن شريط أدوات يستخدم لإنشاء ملف أومجلد

أو إخفاء قائمة المجلدات .

يتم التعامل مع محتويات قائمة المجلدات من خلال اختيار الأمر المناسب من القائمة المختصرة لهذا الملف أو المجلد ولإظهار  أو إخفاء قائمة المجلدات من قائمة "عرض " اختر الأمر " قائمة مجلدات " .

جزء التنقل :

لعرض البناء الهيكلي لصفحات

الموقع في بناء شجري .

ولإظهار أو إخفاء جزء التنقل من

قائمة "عرض " اختر الأمر "جزء التنقل" .

جزء المهام :

يظهر أهم الأوامر اللازمة للمستخدم  .

حيث تستطيع التعامل مع تلك الأوامر أثناء

 استمرار العمل ضمن الموقع او الصفحة .

ولإظهار أو إخفاء هذا الجزء من قائمة

" عرض " أختر الأمر "جزء المهام ".

منطقة الموقع والصفحات

هي المنطقة الرئيسية في البرنامج

وتنقسم بدورها الى الأجزاء التالية :

شريط التنقل :

يتضمن اسم الموقع وأسماء الملفات المفتوحة

ويتم من خلاله التنقل بين الموقع والصفحات

المفتوحة .

منطقة العمل :

يتم في هذه المنطقة معاينة الموقع بالطرق المختلفة . وكذلك تصميم ومعاينة محتوى الصفحة .

أزرار طرق العرض :

تتضمن أزرار للتنقل بين طرق العرض المختلفة وتختلف هذه الأزرار حسب محتوى منطقة العمل كما يلي :

أزرار التنقل للموقع :

أزرار التنقل للصفحة:

ملاحظة :

عند تشغيل برنامج FrontPage  فإنه وفقا لإعداداته الافتراضية سيقوم بفتح آخر موقع تم التعامل معه .

  أعلي الصفحة

الدرس الثالث

التعامل مع الصفحات

العمليات على الصفحات :

لكل صفحة من صفحات الموقع :

• اسم : يمثل اسم الملف الذي تحفظ فيه .

• عنوان : يمثل النص الذي يظهر في سطر عنوان متصفح الإنترنت عند تصفحها .

إنشاء صفحة فارغة :

1- اختر من قائمة ملف الأمر " جديد " .

2- اختر من جزء المهام " صفحة جديدة " الأمر "صفحة فارغة".

حفظ صفحة وعنونتها :

لحفظ الصفحة داخل مجلد الموقع اتبع الخطوات التالية :

1- اختر من قائمة ملف  الأمر "حفظ " حيث

يظهر صندوق المحاورة المجاور .

2- اكتب اسم الصفحة في خانة اسم الملف .

3- اضغط على الزر " حفظ " 

ملاحظات :

    * الزر " تغيير العنوان " يستخدم لتغيير عنوان الصفحة ( استخدم عنوانا يعبر عن محتوى الصفحة )

    * يفضل أن يكون اسم الملف باللغة الإنجليزية ولايحتوى على مسافات أو رموز خاصة

استيراد صفحة

لإضافة صفحة سبق إعدادها إلى الموقع الحالي اتبع الخطوات التالية :

1- من قائمة ملف اختر الأمر " استيراد "

يظهر صندوق المحاورة المجاور .

2- اضغط على الزر " إضافة ملف "

3- اختر اسم الصفحة المطلوب استيرادها .

4- اضغط على الزر " موافق " .

       ملحوظة :

    يمكنك استخدام الأمر "استيراد" لإضافة أى نوع من أنواع الملفات أو المجلدات ووضعها ضمن محتويات الموقع

حذف صفحة من موقع :

1- أظهر قائمة المجلدات

2- اختر من القائمة المختصرة للصفحة المراد حذفها الأمر " حذف ".

يظهر صندوق محاورة                   

" تأكيد الحذف " .

3- اضغط على الزر " نعم" .

معاينة الصفحة :

للإطلاع على شكل الصفحة في مستعرض الإنترنت استخدم الأمر "معاينة في المستعرض" من قائمة "ملف"

او باستخدام الأداة

            ملاحظات :

            *    يجب حفظ الصفحة قبل معاينتها .

            *    لمعاينة الموقع كاملا عاين الصفحة الرئيسية وتتبع الارتباطات التشعبية .

  أعلي الصفحة

الدرس الرابع

طرق عرض الصفحة :

هناك أربعة طرق لعرض وتحرير ومعاينة محتوى الصفحة .

           ♣  طريقة العرض " تصميم " :

لتحرير محتوى الصفحة بإدراج النصوص والجداول والصور وتنسيقها .

 ♣  طريقة العرض " تعليمات برمجية ":

لعرض التعليمات البرمجية المكتوبة

 بلغة html مع إمكانية تعديلها .

♣  طريقة العرض " انقسام " .

وفيها تنقسم منطقة العمل إلى قسمين أفقيين

 يعرض في اعلاهما طريقةعرض

 " تعليمات برمجية " وفي الأسفل طريقة

عرض " تصميم " .

 ♣   طريقة العرض " معاينة " :

لعرض الصفحات كما ستبدو في متصفح الإنترنت .

  أعلي الصفحة

الدرس الخامس

■ تصميـم صفحـة :

عند بدء تصميم أية صفحة لابد من مراعاة الاعتبارات التالية :

*إذا كانت الصفحة الرئيسية فإنها يجب أن تتمتع بمواصفات خاصة من حيث الاسم والشكل والمحتوى .

* إذا كانت الصفحة فرعية يجب تحديد كيفية عرضها من حيث :

    ♦ ظهورها في نفس نافذة المتصفح بدلا من الصفحة الحالية أو ظهورها في نافذة جديدة .

    ♦ عرض الصفحة في كامل شاشة المتصفح أو في جزء منها .

■ عناصر الصفحــة :

تحتوى أية صفحة على عناصر مختلفة مثل النصوص والجداول والصور ... وهذه العناصر إما أن تكون :

♦ داخلية : وتكون جزءا من ملف الصفحة مثل النصوص والجداول ...

♦ خارجية: وتكون في ملفات منفصلة يتم استدعاؤها عند استعراض الصفحة في المتصفح مثل الصور والأصوات.

    ملحوظة :

    يفضل استيراد العناصر الخارجية الموجودة على القرص الصلب لكى تكون ضمن مجلد الموقع وذلك من خلال الأمر  " استيراد " .

عند حفظ الصفحة التي تتضمن عنصرا خارجيا على القرص الصلب وليس من ملفات الموقع .

يظهر صندوق المحاورة التالي :

الزر " تغيير المجلد " :

لتحديد المجلد الذي سوف يتم حفظ

العنصر فيه .

الزر " إعادة تسمية " :

لتحديد اسم العنصر الذي سوف

يتم حفظه .

  أعلي الصفحة

الدرس السادس

خصائص الصفحة :

1- من القائمة المختصرة للصفحة في طريقة العرض " تصميم"

أختر الأمر " خصائص بطاقة تنسيق " .

2- حدد لون الخلفية .

3- إضغط على الزر " موافق " .

إدراج صورة كخلفية للصفحة :

1- من القائمة المختصرة للصفحة في طريقة العرض

" تصميم"اختر الأمر "خصائص" بطاقة " تنسيق" .

2- اضغط الزر "استعراض " .

3- اختر الصورة .

4- إضغط على الزر "موافق" .

اتجاه الصفحة :

 1- من القائمة المختصرة للصفحة في طريقة العرض "تصميم "

اختر الأمر خصائص " بطاقة عام " .

2- حدد اتجاه الصفحة (يمين -يسار أو يسار يمين )

3- إضغط على الزر "موافق" .

إدراج صوت الخلفية  :

1- من القائمة المختصرة للصفحة في طريقة

hلعرض " تصميم"اختر الأمر "خصائص"

 بطاقة " عام" .

2- اضغط الزر "استعراض " تحت العنوان

 صوت في الخلفية .

3- اختر ملف الصوت المطلوب  .

4- أشر على الاختيار (على الدوام) لتشغيل الصوت عددا محددا من المرات . ثم حدد عدد مرات التكرار .

5- أضغط على الزر "موافق" .

  أعلي الصفحة