شرح كامل للفرونت بيج

برنامج الفرونت بيج هو برنامج يساعدك في بناء موقعك بطريقة صحيحة وسريعة في وقت قريب كان على من يريد أن يبني موقعاً له على الإنترنت أن يتعلم لغة الـ
HTML وعن طريق برنامج الفرونت بيج تستطيع أن تبني الموقع بدون أن تتعلم هذه اللغة سنحاول أن نلقي الضوء على أمور كثيرة في هذا البرنامج لنذلل بإذن الله بعض الصعوبات التي من الممكن أن تواجه المستخدم لهذا البرنامج سنبدأ أولاً

بتوضيح أمر يقوم البرنامج بعمله بعد تثبيتك للبرنامج ألا وهو :.
أن البرنامج يقوم بإضافة مجلد اسمه ( My webs ) وسيضعه في القرص الصلب تحت ملف
My .................................................. .............. ، هذا المجلد سيضع فيه البرنامج تلقائياً ( عندما تطلب منه أن ينشئ ويب ) ملفات الويب ،إذا ما قمت بعمل ملف ويب عن طريق الفرونت بيج فإن هذا البرنامج أتوماتيكياً سيقوم بعمل عدة ملفات وستجدها في ملف الويب الذي عملته ربما تستغرب وجود هذه الملفات وقد تقوم بحذفها لأنك لم تعملها وهذا غلط فلا تحذف أي ملف أنشئه البرنامج مهما كان ، لتعرف على هذه الملفات سنذكر أسمائها :
يخزن فرونت بيج الملفات المستخدمة لتنظيم وإدارة الويب في هذا المجلد. يجب أن تدع هذا المجلد وشأنه فلا تحاول أن تلغي شيء أو تضيف شيء له .

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

أخى الحبيب لتفتح موقع ويب موجود لديك اتبع الخطوات التالية :.
1
. انقر على File>Open . ( ملف => فتح )


2. ستجد مربع حوار فتح ملف قد فتح أمامك :.


1- Look in ( بحث في ):

في هذه الخانة حدد المكان الذي وضعت فيه موقع الويب أو صفحة الإنترنت التي تريد فتحها .

2- القائمة التي في اليسار :

تعتبر هذه القائمة اختصار سريع لتصل إلى الملفات الموجودة في Desktop, My .................................................. ..............s, Favorites,History ، وأيضاً ملفات الإنترنت التي قمت بفتحها عن طريق البرنامج من الإنترنت مباشرة وتجدها تحت
Web Folders .

3- file name ( اسم الملف ):

من الممكن لو كان لديك عدد كبير من الملفات أن تكتب اسم الملف فقط في هذه الخانة والبرنامج يفتحه لك وقد تجد أنك عندما تكتب الحرف الأول قد أظهر لك البرنامج تكملة اسم الملف وطبعاً ذلك أفتراضياً على أن يكون هو هذا الملف الذي تريده

4- Files of type ( أنواع الملفات):

اختر الملفات التي تريد لها أن تظهر أمامك من هذه الخانة لديك عدد كبير من الخيارات

5- Search the web

يمكنك هذا الإختيار من البحث في الإنترنت عن طريق عدة محركات بحث مثل ****** عند الضغط على هذا المربع ستجد البرنامج قد أغلق نافذة الفتح وفتح بدلاً منها المتصفح الذي لديك وأظهر خانة البحث

6- Delete
لتحذف ملف أو صورة أو ملف ويب اضغط على هذا الزر بالطبع سيظهر لك البرنامج رسالة تأكيد تسألك إذا كنت متأكد من الحذف أم لا

7- Create Ne
لتنشئ ملف جديد اضغط على هذا الزر وهو ينشئ ملف عادي وليس ملف ويب .

8- views

لتختار الطريقة التي تريد للملفات أن تعرض بها .

Open -9 :

لتفتح الملف الذي اخترته .

10- Cancel :

لتغلق نافذة فتح ملف ولن يتم فتح أية صفحات ويب .


إغلاق موقع ويب :
بعد أن فتحت موقع الويب وقمت بمعاينته في برنامج التصفح ما رأيك لو تغلقه لنبدأ بعد ذلك بتعلم إنشاء ويب جديد :

1- من قائمة File>Close Web .



2- اضغط على الزر رقم واحد لتغلق البرنامج كله وموقع الويب .



3- اضغط على زر رقم 2 حيث ستغلق صفحة الويب فقط .


4- يمكنك الخروج من البرنامج عن طريق File>Exit .


لاحظ الفرق بين الشريطان بعد إغلاق موقع الويب لتجد أن بعد إغلاق الموقع اصبح يحتوي الشريط على اسم البرنامج فقط .

عندما تقوم بإنشاء موقع أو صفحة ويب أخى العزيز لابد أن يخطر على بالك الكيفية التي ستظهر بها هذه الصفحة عندما تفتح بأحد متصفحات الإنترنت يلاحظ أن برنامج الفرونت بيج يقوم بقلب الكتابة العربية وعدم ترتيبها أي أنها تظهر في البرنامج بصورة غير التي تظهر بها في المتصفح لذلك ينبغي لك دائماً أن تستعرض صفحتك أو موقع الويب الخاص بك من خلال طرق المعاينة الموجودة في البرنامج لتطمئن على شكل الصفحة ولكي تعاين الصفحة في الفرونت بيج هناك طريقتان!
الأولى: عن طريق زرPreview ( معاينة )
لتعاين الصفحة بهذه الطريقة اضغط على لسان التبويب
الموجود في أسفل البرنامج Preview
هذه الطريقة من المعاينة لا تتطلب أن تكون قد قمت بعمل حفظ للصفحة لكي تشاهد النتيجة كما أنها تتميز بأنها طريقة سريعة لمشاهدة التغييرات بدون الحاجة للذهاب للمتصفح والعودة مرة أخرى للبرنامج !



الطريقة الثانية: عن طريق الأمر
Preview in Browser (معاينة في مستعرض)
تستطيع أن تشاهد صفحة أو موقع الويب الذي لديك عن طريق هذا الأمر وعند اختيارك له ستجد أن الفرونت بيج قد فتح لك برنامج الاستعراض الذي تستخدمه لتصفح الإنترنت سواء كان هذا البرنامج الإكسبلورر أو النتسكيب
لتصفح عن طريق هذا الأمر اختر
File> Preview in Browser
(ملف => معاينة في مستعرض)

سيفتح لك المتصفح مربع حوار معاينة في المستعرض!


Browser( المستعرض) :يكتب البرنامج اسم المتصفح الذي ستظهر به الصفحة يمكنك أن تضيف برنامج معاينة آخر عن طريقAdd(إضافة) كما يمكنك أن تحدد الحجم الذي تريد أن تشاهد به الصفحة من خلال الاختيار من خانةWindow size ( حجم الإطار ) إذا وضعت إشارة بجانبAutomatically save page ( حفظ الصفحة تلقائيا ) فسيحفظ البرنامج الصفحة تلقائياً بمجرد أن تضغط على الزرPreview ( معاينة ) ويعني هذا الزر الموافقة على عرض الصفحة
إذا لم تضع إشارة بجانب الزر السابق لن يقوم البرنامج بحفظ الصفحة تلقائياً وسيسألك إذا كنت تريد حفظها أو لا في كل مرة تطلب المعاينة بهذه الطريقةClose ( إغلاق ) ستغلق مربع حوار المعاينة ولن تتم المعاينة أي كأنك قمت بإلغاء

أو من خلال هذا الزرفي شريط الأدوات القياسي


أو من خلال الضغط على
Ctrl+ Shift+ B
بهتان الطريقتان لن يتم فتح مربع حوار
المعاينة وستتم المعاينة مباشرة بعد سؤالك عن حفظ الصفحة

يتطلب منك أن تقوم بحفظ صفحة الويب التي لديك حتى تتمكن من معاينتها إن لم تكن قد قمت بعمل حفظ لهذه الصفحة سيُظهِر برنامج الفرونت بيج رسالة يسألك إن كنت تريد الحفظ أو لا
إذا اخترت نعم سيقوم البرنامج بحفظ الصفحة ومعاينتها في المستكشف الخاص باستعراض صفحات الإنترنت
وإذا اخترت لا لن يقوم البرنامج بمعاينة الصفحة ولا بحفظ
والان أنشاء مجلد:.
إذا قمت بعمل موقع ويب جديد ستجد أن البرنامج قد قام بعمل ملفان وصفحة ويب واحدة وهي صفحة Index
أي الصفحة الرئيسية للموقع.



بإ مكانك أن تنشاء ملف جديد وتضع فيه ما تريده من صفحات ويب أو أي ملفات أخرى لكي تقوم بترتيب عملك
لتنشئ ملف جديد:

1- إذا لم تكن ملفات واضحة أمامك اختر:
View>Folder List (عرض=> قائمة المجلدات )

أو اضغط على هذا الزر في شريط الخواص

2- اضغط بزر الفأرة الأيمن عند العنوان الذي يوجد فيه موقع الويب كما تشاهد في الصورة
New Folder




3- احذف الاسم المكتوب واكتب الاسم الذي تريده للملف وطبعاً لا بد أن يكون باللغة الإنجليزية حتى لا يحصل مشاكل عند فتحه على الإنترنت
في برنامج الفرونت بيج لاحظ أنه توجد عدة طرق لتتوصل لأمر ما وفي الحقيقة هناك أكثر من طريقة لعمل ملف جديد

الطريقة الثانية:1-اختر
File>New>Folders
2- احذف الاسم المكتوب للملف وضع الاسم الذي تريده أ
لتنشئ موقع ويب جديد اختر
File>New>Web ( ملف => جديد => صفحة او ويب)


لاحظ مربع مواقع الويب ستجد أنواع متعددة من المواقع التي يمكن لك أن تنشئها سنحاول أن نوضح الصورة عن كل ويب
يمكن لك أن تحدد المكان الذي تريد لموقع الويب أن يوضع فيه من خانة
Specify the Location of the new web ( حدد موقع صفحة ويب الجديدة )
كذلك ستجد شرح مبسط عن أي موقع ويب تختاره تحت كلمة
Description ( الوصف )
الآن سنحاول أن نشرح لك كل طريقه من طرق إنشاء موقع ويب

1- موقع ويب ذات صفحة واحدة
إذا اخترت أن تنشاء موقع الويب الخاص بك فإن البرنامج سينشأ لك ويب فارغ ولا يحتوي إلا على صفحة واحدة فارغة ولن تكون لديك سوى صفحة
Index
ومجلدان


2- معالج تواجد الشركة لتنشأ موقع لمؤسستك بطريقة احترافية إذا اخترت أن تنشأ موقع الويب بهذه الطريقة(ولا تخترها إلا لو كنت تعمل موقع لمؤسسه) سيظهر لك البرنامج المساعد السحري لتنفيذ الموقع وسوف يسألك ما ذا تريد في الموقع إذا كنت تريد أن ينهي البرنامج الموقع بسرعة وعدم التعرض للأسئلة أضغط على إنهاء
لينشأ لك البرنامج الموقع بدون أن يسألك
أما لو كنت تريد أن تجاوب على الأسئلة فاضغط على التالي
وإذا كنت تريد أن تبني الموقع بالصفحات التي تريدها أنت من دون أن ينشأ لك البرنامج أي صفحات فاضغط إلغاء الأمر


طبعاً الفرق واضح بين اختيار إنهاء وبين اختيار إلغاء الأمر فالأول يأمر البرنامج بإنشاء الموقع بدون أن يسألك عن الإيميل أو أي سؤال آخر وطبعاً ينشأ صفحات والأخر يأمر البرنامج بأن يترك الأمر لك لتنشأ ما تريد من الصفحات


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

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


ستظهر لك الصفحة التي تطلب منك بيانات ما الجديد فاختر أن كنت تريده أن يظهر التغييرات التي حصلت في الموقع و المقالات والمراجعات ثم اضغط على زر التالي


بعد أن تحدد عدد الصفحات التي تريدها للمنتجات والخدمات سيطلب منك البرنامج تحديد ما تريد أن يظهر في كل صفحة من الصفحات الخاصة بالخدمات والمنتجات بالنسبة للخدمات عليك الاختيار إن كنت تريد أن تظهر صورة للمنتج وسعر المنتج واستمارة لتسجيل المعلومات. كذلك الحال بالنسبة للخدمات اضغط على التالي

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

في هذا المربع الذي يسألك عن ما تريد أن يظهر في أعلى الصفحة اختر الذي تريده أن يظهر سواء شعار مؤسستك و عنوان الصفحة ورابطة لصفحة الرئيسية لموقعك.
وأيضاً في هذا المربع عليك الاختيار فيما تريد أن يظهر في أسفل الصفحة: رابط لصفحة الرئيسية (اختره في مكان واحد الأعلى أو الأسفل) وبريد مدير المؤسسة وحقوق الطبع وأخر مرة تم فيها تحرير الصفحة اضغط على التالي

سيسألك البرنامج في هذا المربع إن كنت تريد أن تظهر صورة تدل على أن الصفحة تحت البناء لأن الصفحات أغلبها لم تكتمل بعد إن كنت تريد ظهور الصورة اختر نعم وإن كان لا فاختر لا اضغط على التالي



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


خلال هذا المربع أكتب رقم تلفون الشركة ورقم الفاكس والبريد الإلكتروني للمدير والمسؤول عن الموقع وبريد الإلكتروني للمسؤول العام ثم اضغط على التالي


ستختار شكل موحد لموقع الويب من حيث شكل الأزارير والخلفية وأسلوب الخط من خلال خصية تدعى الـ
Theme ( سمات )
سنتعرف عليها في درس آخر. اضغط على الزر (اختيار سمة لصفحة ويب )
سيفتح لك مربع لتختار منه الشكل الذي تريده لاحظ وجود كمية كبيرة من الأشكال الجاهزة كما يمكنك أن تنشأ شكلك الخاص تستطيع أن تعدل في الشكل الذي اخترته لاحقاً فلا تتوقف كثيراً أمام اختيار الشكل اضغط على
Ok ثم التالي



سنكون قد انتهينا من بناء موقع الويب إذا أردت أن يظهر لك البرنامج المهام التي يجب عليك إنجازها ضع إشارة هنا


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



3 -Customer Support Web ( صفحة لدعم العملاء )
لتنشئ موقع لدعم الزبائن ويكون مثل الهمزة الوصل لترتبط بزبائنك فما عليك إلا أن تختار هذا الطريقة لبناء موقع الويب بها
لن يسألك البرنامج أية أسئلة سوف ينشأ موقع الويب وفيه 19 صفحة ويب تقريباً ستحد فيها صفحات لتحميل وصفحه بها الأسئلة المتكررة وصفحة لما هو جديد وتستطيع أن تحذف النص المكتوب وتكتب نصك مكانه بكل سهولة



4- Project Web ( صفحة مشروع )
لعمل موقع ويب تتحدث فيه عن خطة عمل معينة وتشترك فيه مع عدة أشخاص اختر هذه الطريقة. سيقوم البرنامج بعمل عدد كبير من الصفحات تتضمن صفحة رئيسية وصفحة لذكر أعضاء العمل وصفحة لجدول مواعيد واستمارة لتعبئتها وصفحة بحث والكثير من الصفحات الخاصة بالمشروع

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




ولفتح موقع ويب جديد نتبع الأتي : من قائمة ملف => جديد => صفحة أو ويب=> تظهر لنا قائمة في الجهة اليسرى نختار منها صفحة ويب فارغة => ستظهر لنا نافذة قوالب موقع ويب نختار منها صفحة ويب فارغة
هكذا نكون قد فتحنا موقعا جديدا سنقوم الآن بفتح صفحة لبدأ التصميم


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


قبل أن نبدأ في تصميم الصفحة لابد لنا من معرفة أمور هامة وأساسية عن التصميم في فرونت بيج
1- يقوم البرنامج بإنشاء مجلد image مع كل موقع ويب نضع في هذا المجلد جميع الصور الموجودة في الموقع لاحظ ذلك في قائمة المجلدات
2- حتى يكون التصميم ثابتا في جميع المتصفحات نستخدم الجداول وسنلاحظ لك في الدروس القادمة بإذن الله
3- استخدام الحروف الإنجليزية الصغيرة عند تسمية الصفحات والصور

الخطوة الأولى : تصميم الصفحة

لتغير لون خلفية الصفحة من القائمة تنسيق => خلفية
ستظهر لنا هذه النافذة



الآن قم بإدراج ما تشاء من الصور ثم أكتب النص الذي تريد مثلا ( هذه أول صفحة أقوم بإنشائها وما زال الموقع تحت الإنشاء ) ثم قم بإجراء التنسيق الذي تريد من لون الخط ونوعه وحجمه كما تفعل ذلك في برنامج الورد


يمكنك عمل معاينة لمشاهدة الصفحة كيف تظهر عند رفعها في الموقع بأختيار الوضع معاينة من أسفل الصفحة .

بعد أن تنتهي من تصميم وتنسيق الصفحة سنقوم بحفظها وذلك بإتباع التالي

من قائمة ملف => حفظ باسم=> نقوم بتسمية الصفحة بالاسم index (استخدم حروف صغيرة ) إذا كان الموقع يحتوى على صور فستظهر لك هذه النافذة التي تطلب منك حفظ هذه الصور قم بتحديد الصورة ثم أضغط تغير المجلد وحدد مجلد image حتى يتم حفظ جميع الصور في مجلد واحد


لاحظ بأن اسم الصفحة قد تغير هكذا نكون قد انتهينا من أعداد وتنسيق الصفحة يمكنك الآن عمل معاينة لها في المستعرض انترنيت اكسبلورر أو أي مستعرض آخر

من قائمة ملف => اختر معاينة في مستعرض => ثم اختر افتراضي =>معاينة



الخطوة الثانية : رفع الملف إلي الموقع

من قائمة ملف => نشر في ويب => ستظهر لنا هذه النافذة


قم بكتابة FTP التي حصلت عليها عند حجز الموقع ثم اضغط موافق

وأكتب أسم المستخدم وكلمة المرور ثم اضغط موافقستظهر لك نافذة اضغط على نشر ثم انتظر حتى يتم نقل الملفات إلي الموقع

صورة توضح أن البرنامج يحاول الاتصال بالملقم



انتظر حتى يتم تحميل الملفات جميعها وتظهر لك هذه النافذة



يمكننا أن نقولك لك مبرووووووك فهذي اول صفحة ويب من تصميمك

قم بكتابة العنوان الذي حجزته لتشاهد نتيجة عملك

استخدام الجداول وعمل نص متحرك

إن ما قمنا بعمله في الدرس السابق هي صفحة index مؤقتة نقوم بإزالتها بعد الإنتهاء من تصميم الموقع كاملا
وستقوم بإذن الله في الدروس القادمة بتصميم وتعلم بعض المهارات في فرونت بيج وبعد الإنتهاء من تصميم الموقع كاملا عندها سنقوم بحذف الصفحة المؤقتة ورفع الموقع كاملا


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

من قائمة جدول => إدراج => جدول
حدد عدد العامود بواحد وعدد الصف بواحد


ثم أضغط بالزر الأيمن داخل الخلية وأختر خصائص الخلية


اضغط على نمط =>تنسيق => حدود


يمكنك عن طريق هذه النافذة التحكم في حدود الخلايا

ولإظهار شريط الجداول من قائمة عرض => أشرطة الأدوات =>ضع علامة صح على جداول



سيظهر لك شريط الجداول قم بتحديد المرسمة لرسم خلايا الجدول

لاحظ الجدول الذي قمنا برسمه



نقوم برسم الجداول حسب احتياج محتويات الموقع

لعمل نص متحرك :

أدراج => مكون ويب => تأثيرات حيوية =>شاشة اسمية



ستظهر لنا هذه النافذة



التأخير : يمثل عدد الميللي ثانية التي تريد أن تمر بين كل حركة وأخرى للنص
المقدار : تمثل المسافة بالبكسل التي تريد أن يتحركها النص في كل مرة

بعد أن تنتهي من اختيار الخصائص سيظهر لك النص في المكان المحدد ولتغير نمط ونوع الخط في النص قم بتحديد النص ومن قائمة تنسيق => خط



طريقة عمل رابط :

حدد النص الذي تريد عمل رابط له ثم اضغط بالزر الأيمن واختر ارتباط تشعبي





ولعمل ارتباط إلي بريد إلكتروني



بعد أن تنتهي من تصميم الصفحة قم بتسميتها index ومن ثم حفظها بالطريقة السالفة الذكر

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

ثم أكتب اسم الموقع الذي تريد مثلا ( alsalaf)



سيرسل لك الموقع بعد فترة من الزمن معلومات عن الموقع و في أخر الإيميل ستجد المعلومات التالية :


إن أكثر ما يهمنا من هذه المعلومات هي FTP Server و User ID و Password



الآن يمكننا أن نقول لك مبروك فقد أصبحت تملك أحد الموقع وبقي
لك تصميم صفحاتها

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


من قائمة إدراج => إشارة مرجعية=> أكتب أي اسم تريد => موافق


سنلاحظ بظهور إشارة العلم لدلالة عن وجود إشارة مرجعية في هذه المنطقة

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


ملاحظة هامة : عند عمل صفحات فرعية في الموقع من الأفضل وضع رابط للصفحة الرئيسية حتى يتمكن الزائر من العودة بكل سهولة



إضافة صوت للخلفية :
بحيث يتم تشغيله تلقائيا عن فتح الصفحة مع مراعاة أن يكون نسق الملف الصوتي هو أحد التنسيقات الشائعة مثل midi أو wave لكي نضمن أن تتمكن معظم المستعرضات من تشغيله
حدد في أي مكان من الصفحة التي تريد عمل خلفية صوت لها

من قائمة ملف => خصائص

إضافة ازرار حيوي وإزالة خلفية الصورة
جعل خلفية الصور شفافة :
لإزالة خلفية صورة هذه الخلفية مكونة من لون واحد كالصورة التالية :



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


إضافة أزرار حيوي :

لاحظ هذا الرز قبل مرور الماوس عليه


ولاحظه بعد مرور الماوس عليه


لإضافة وعمل مثل هذه الأزرة نتبع الآتي :
إدراج => مكون ويب => تأثيرات حيوية =>زر التحويم


ثم نتبع ما هو موجود في الصورة



ولتجربة الزر قم بعمل معاينة

طريقة عمل شريط الارتباطات :
لعمل شريط يحتوي على مجموعة من الارتباطات نتبع الأتي

إدراج => مكون ويب => أشرطة الارتباط =>شريط الارتباط المخصصة


ثم نضغط على التالي :.



نحدد شكل وسمة التي ستظهر بها الشريط ثم نضغط على التالي :.



حدد طريقة عرض الأشرطة هل هيا أفقية أم عامودية ثم اضغط على إنهاء



اضغط على إضافة ارتباط


كرر إضافة الارتباطات حسب عدد الروابط التي تريدها

عمل نسخة مصغرة من الصورة

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

حدد الصورة التي تريد عمل نسخة مصغرة لها



ثم اختر الأداة ( صورة مصغرة تلقائية )

لاحظ كيف تم تصغير الصورة


عند حفظ موقع ويب سيقوم الفرونت بيج تلقائيا بحفظ الصورة المصغرة كجزء من الصفحة

توفير نص بديل للصورة :

سيظهر هذا النص كبديل للصورة إذا لم تظهر على الصفحة كما انه يوفر للزائرين الذين لا يرون الصور معلومات عن الصورة المفقودة كما تفيد الزائرين الذين يوقفون عرض الصور في مستعرضاتهم لكي يتمكنوا من استعراض الويب بصورة أسرع

حدد الصورة التي تريد عمل نص بديل لها
من قائمة تنسيق => خصائص



وسوف تلاحظ النتيجة بنفسك

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

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

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

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

يمكنك تصميم الموقع على صفحات كاملة إما بطريقة الإطارات Fram أو بأسلوب الجداول Table ..

وسنبدأ من الأخير لسهولة التحكم بالجداول وسهولة تنسيق الموقع بواسطتها.

في البداية هذه صورة توضح طريقة تحديد الجدول حسب أعداد الصفوف:



طبعاً بعد أن نضغط بالماوس على هذه الأيقونة سنجد مساحة 4*4 من الصفوف والأعمدة وإذا أردنا زيادة الأعمدة كل ماعلينا هو الضغط على زر اليمين من الكيبورد وكذالك في حال زيادة الصفوف كما هو بالصورة:



وفي هذه الصورة نجد عدد الأعمدة عامود واحد بينما الصفوف هي:



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

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


تتكون خصائص الجدول من التالي:



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

ففي المحاذات الأولى أربع حالات لوضع الجدول على الصفحة الحالية وهي (الإفتراضي - اليسار - اليمين - الإفتراضي)
قم بتجربة كل خيار ستجد أن الإفتراضي سيقوم بوضع الجدول في وضعه الحلي والذي في حالتنا هذه يتوسط المسافة بين اليمين واليسار ..
ستلاحظ التغير عن المحذات ناحية اليسار أو ناحية اليمن وتكتشف الفرق -جرب بنفسك- وبهذا تستطيع أن تغير محاذات الجدول حسب رغبتك في تنسيق الصفحة بعد ذالك ..

القسم الثاني من التخطيط هو عملية الإتجاة للكتابة كما ذكرنا وهو إما الإفتراضي أو اليسار أو اليمين , عند التغير هنا ستلاحظ تحرك المؤشر حسب الوضع الذي قمت بإختياره -جرب ولاحظ المؤشر- وهذه الحالات تعطي لمستخدم الجداول المرونه عند إضافة جداول أخرى داخل الجداول السابقة بحيث تتطابق الحدود عند تحديد الإتجاه .

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

القسم 3 :
هذا الجزء هام جداً في تنسيق الصفحة وطريقة عرضها .. عند رسم الجدول تكون المقاسات بالعادة كما هو موضح أي 100% بكسل حسب عرض الصفحة وهذا الحجم يسمح بعرض الصفحة على أي متصفح بنفس التسيق الذي يظهر بة الجدول عند تصميمك الأول .. ما أقصده هنا أن ترك العرض 100% يظهر نفس التصميم على جميع مقاسات عرض الشاشة -600*800 أو اي مقاس أصغر أو أكبر من ذالك ..
وطول الجدول غير مهم إذا اردنا تشكيل جداول أخرى داخل خلايا الجدول الأساسي لأن الطول يأخذ المقاس الأخر للجداول أو حتى لأسطر الكتابة -سنتعرف على ذالك أثناء تنفيذ مشروعنا الصغير
القسم 4 :
هنا كما هو موضح فإن الحجم هو صفر (0) أي أن حدود الجدول غير ظاهرة وبذالك فعند عرض التصميم على المتصفح ستكون هذه الحدود الشفافة غير موجودة وما سيظهر هو ما يحوي الجدول من صورة أو كلام أو أي شي آخر ..

كلمة -اللون- هي تختص بلون الحد إذا كان الحجم أكبر من (1) وفي حالتنا هذه لايظهر اللون لأن الحد شفاف أو بدون لون ..

الحد الفاتح والحد الغامق أيضاً تأخذ نفس الأسلوب عندما تكون الحدود للجدول (0) وإذا اردت إكتشاف ذالك قم بتغير حجم الحد وإختار الألوان التي تريد لترى النتيجة .

القسم 5 :
هذا القسم هو بالأساس قسم الخلفية مع القسم 6 وهذا القسم يقوم بتغير خلفية الجدول حسب اللون المحدد من القائمة المنسدلة ..

القسم 6 :
يمكنك تغير خلفية الجدول بصورة ما أن تحددها من جهازك .

===نأتي الآن للتعرف على خصائص الخلية من جدول ما ===

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

بعد تحديد خلية أو عدة خلايا قم بإظهار الخصائص لهذه الخلية بنفس طريقة خصائص الجدول (كلك يمين خصائص الخلية) ستجد التالي:



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

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

طبعاً من أهم العوامل التي تجذب الزائر للموقع هي حسب الأولوية كما يلي:

1- المعلومة المفيدة.
2- سهولة التنقل بين صفحات الموقع.
3- سرعة تصفح الموقع.
4- المظهر الجميل.

العامل الأول وهو المعلومة المفيدة يرجع للمصمم والتخصص الذي يرغب بناء الموقع على أساسه وبالتالي طبيعة الزوار لموقعه.

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

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

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

لنبدأ الآن بعمل المشروع ===

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

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

التشكيل الأساسي للصفحة الرئيسية لموقع يهتم بالبرامج وعتاد الحاسب الآلي هو (ليس من الضروري هذا التقسيم) :

1- قسم البرامج Software
2- قسم العتاد Hardware
3- قسم الدعم الفني
4- الأسئلة المتكررة AFQs
5- المساعدة

اخترت هذا التخصص لسهولة تطبيق المشروع علية و لتنوع الأقسام مما يسمح لنا بتجربة الجداول بشكل أكثر سهولة ومرونة .


في البداية للتنفيذ نفتح ونختار (ملف > جديد > صفحة أو ويب.. )



سيظهر لنا مع XP نافذة على اليسار نختار صفحة ويب فارغة .. تظهر لنا نافذة أخرى:



هذه النافذة هي نافذة قوالب مواقع ويب .. ما يهمنا هنا هو صفحة ويب ذات صفحة واحدة واسم المشروع الذي ننوي تنفيذه .. كما هو موضح فقد اخترتsahab كعنوان للمشروع .. يقوم FrontPage بعد اختيار الاسم وضغط موافق بحفظ المشروع تلقائياً في المجلد الافتراضي الموجود على المسار (C:My .................................................. ..............sMy Webs........) طبعاً هذا المسار افتراضي إذا لم يكن قد تم اختيار مسار آخر ..

فتحت الآن صفحة بيضاء فارغة باسم Index.htm إذا لم تكن ظاهرة اضغط على هذه الأيقونة

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

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

طبعاً يوجد حدود سوداء اللون للجدول المرسوم وهذا يشوه مستقبلاً من مظهر الصفحة .. يمكن إخفاء الحدود بطريقتين الطريقة الأولى موضحة في بداية الموضوع عن طريق (خصائص الجدول) والطريقة الأخرى هي عن طريق الشريط القياسي والضغط على الأيقونة الموضحة بالصورة :



هذه الأيقونة تسمح بإظهار جهة معينة من حدود الجدول أو إخفاء جزء آخر أو إظهار الحدود الفاصلة بين الخلايا (جرب بنفسك) وما نحتاجه هنا للإخفاء هو الشكل الثاني من اليسار في الصف الثاني كما هو بالصورة .

نستكمل ما تعلمناه سابقآ فى طريقة تصميم الجداول مع الفرونت بيج:

أولا :.
نبدأ العمل على الصف الأول ووضع شعار الموقع ولنفرض أن الشعار هو شعار شبكة سحاب:


هذا الـشعار حجمه 200X65 Pix ونريد إدراجه مع المحافظة على المساحة المتبقية من الخلية .. الحل هو رسم جدول آخر داخل هذا الصف (الخلية) مكون من خليتين عموديتين كالتالي :



ستشاهد عند استعراضك لخصائص إحدى الخليتين أن النسبة المئوية لعرض الخلية هو 50% والطول غير موجود:



وعند إدراج الشعار سنخسر من مساحة الخليتين الشيء الكثير لذلك ستحدد العرض بوحدة ( البكسل ) ونضع في الخانة العرض رقم كمقاس الشعار الذي لدينا و نحدد الارتفاع بعد تحديد المربع الفارغ بـ رقم كما موضح بالبكسل و كما هو ارتفاع الشعار :


سنجد الآن أن الخلية زادت في الارتفاع والعرض كما هو والمؤشر انحرف ناحية المركز قليلاً الحل هو التغيير من حجم الخلية الثانية لأن مساحتها الآن هو 50% كما كانت الخلية التي أجرينا عليها التعديل .. سنستخدم حيلة صغيره مع الخلية الأخرى وهي إلغاء التحديد الموجود أمام العرض ونضغط موافق ونلاحظ أن خليتنا الأولى أخذت حجمها الطبيعي والخلية الأخرى أخذت المساحة المتبقية وهي المساحة الكبيرى مثل ماهو بالصورة :



الآن يمكننا أن ندرج الشعار في الخلية اليمنى ذات الحجم المناسب وإدراج الشعار (إدراج > صورة > من ملف > "تحديد الشعار من ملفات الجهاز).

لم يبقى علينا هنا سوى إخفاء حدود هذا الجدول ذو الخليتين والانتقال للعمل على الصف الثاني من جدولنا الرئيسي .

ثانيآ :.

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

سنقوم بالدخول لخصائص هذا الصف (الخلية) وتغير حجم الارتفاع لـ 80 بكسل وضبط المحاذاة العمودية لهذه الخلية للوسط وترك بقية العدادات كما هي:



نجد أن ارتفاع الخلية قد زاد حسب الحجم الذي وضعناه ..

الآن نريد تحديد مكان البنر الإعلاني في هذه الخلية حسب الحجم الذي حددناه مسبقاً بشرط أن يتوسط خليتنا ..كيف؟

الطريقة سهلة جداً وهو بوضع جدول جديد داخل هذه الخلية ويكون الجدول بمقاس 1x1 أي صف واحد وعامود واحد كما هو موضح:


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



سيكون ناتج عملنا كما يلي:


يمكن أن نعطي البنر لون محدد بحيث يتناسب مع موقعنا والألوان التي نختارها .. سأختار اللون الموجود في شعار الموقع وهو اللون الأزرق المائل للبنفسجي بالطريقة التالية



سنختار ألوان إضافية وسيظهر لنا لوحة ألوان أخرى:


نختار تحديد .. سيتبدل شكل الماوس كما هو على الزر لنتمكن من تحديد اللون وذالك بالذهاب على النقطة الموجودة بالشعار .. كما ترى اللون رقمه الست عشري في FrontPage هو (90,94,B0) انتهت العملية .. موافق وسنجد اللون قد ملأ المساحة المخصصة للبنر:

خصائص الجدول(جدول البنر أقصد) ==> الخلفية:


الحدود لهذا الجدول لا يهم إخفاءها أو إظهارها فهي لن تؤثر على الشكل العام .

انتهينا في السابق من عمل شعار الموقع وتخصيص مساحة البنر الإعلاني لموقعنا في الصفين الأول والثاني ويبقى من خلايا الجدول الرئيسي ثلاثة صفوف أخرى !!

وصلنا الآن للصف الثالث من الجدول الرئيسي .. هذا الصف من الجدول سنستخدمه لعمل شريط التصفح للأقسام الرئيسية في الموقع وهي كما ذكرنا سابقاً ستكون :
1- قسم البرامج Software
2- قسم العتاد Hardware
3- قسم الدعم الفني
4- الأسئلة المتكررة AFQs
5- المساعدة

سنضيف إضافة بسيطة هنا وهي "الصفحة الرئيسية" كتبويب يسبق هذه الأقسام الخمسة لنتمكن من عمل مواضيع وارتباطات تساعد زوار الموقع من الوصول للمعلومة ومشاهدة آخر الإضافات التي تمت بالموقع.

الصف الثالث
في البداية سنقوم بتحديد جدول جديد داخل هذا الصف (الخلية) يتكون من 6 أعمدة و صف واحد -6X1- حسب الأقسام الرئيسية الستة التي سنقوم بعملها:


الجدول الجديد لن نقوم بتغير أي شيء من حجمه وسنتركه كما هو كل ما سنقوم به هنا هو تضليل كل الخلايا لهذا الجدول واختيار (خصائص الخلية) بالنقر بالزر اليمين للماوس على المساحات المضللة واختيار لون الخلفية بلون يتناسب مع اللون الذي اخترناه للبنر .. سأختار لون قريب من درجة اللون وهو (Hex=00,66,99) على FrontPage وتكوين الرقم الست عشري #006699)) ونختار موافق:


قم الآن بإلغاء الحدود لهذا الجدول أو يمكننا إضافة لمسة جمالية هنا بتغير لون الحدود للجدول باللون الأبيض كخلفية الموقع (خصائص الجدول > حدود اللون) أصبح الجدول الآن جاهز للعمل:


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


لمزيد من الإضافات الجميلة على النصوص حاول دائماً استخدام الخطوط التي تعتمدها المتصفحات كخطوط افتراضية مع مراعاة أن الخط قد ليكون بالضرورة موجود على جميع أجهزة الزوار .. وأيضاً حجم الخط المستخدم للصفحة المفعّلة (التي يتصفحها الزائر) يجب أن يختلف عن الحجم لبقية الروابط الأخرى من شريط التصفح الرئيسي.

لنفرض أن الخط الذي سنستخدمه هنا هو Tahoma و فارق الحجم بين الرابط المفعّل والروابط الأخرى هو +1 أي أن الرابط المفعّل يكون حجمه (2 (10 pt)) والروابط الأخرى (1 ( 8 pt)) حسب وحدات الحجم التي يعتمدها FrontPage سيصبح شكل الجدول بعد التنسيق كما يلي:


سنلاحظ أن ارتفاع الجدول قد تناقص بعد تعديل حجم الخط دون تدخل منا وهذا سيساعدنا في عملية تنسيق الموقع بسبب استخدامنا طبعاً للجداول ..

الصفحة المفعلة تبرز للزائر بحجم الخط المختلف عن بقية الروابط الأخرى وهذا غير كافي لإبراز الرابط .. من الأفضل تغيير لون الخط ولون الخلية أيضاً لعنوان الصفحة الرئيسية .. سنستخدم اللون الذي استخدمناه للبنر وذالك بالطريقة التي تعلمناها لتغيير لون الخلفية للخلية (خصائص الخلية) والخط سنستخدم اللون الأبيض لإبراز عنوان الصفحة:


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

ننتقل الآن للصف الرابع من الجدول الرئيسي ولنوضح الأفكار الرئيسية لعملنا هنا..
هذا الصف سيكون مساحة لعرض الروابط الفرعية للصفحة الرئيسية وأيضاً لعرض المعلومات التي نرغب بأن يطلع عليها الزائر عند زيارته لموقعنا.

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

1- عن الموقع
2- خدماتنا
3- أسعار التوصيل
4- حسابات العملاء
5- إدارة الموقع

نحتاج لجدول مكون من عامود و احد وخمسة صفوف لتنسيق الخمس روابط السابقة ولكن سيكون من السابق لأوانه تحديد هذا الجدول الآن والسبب أن المساحة المتبقية من الخلية اليمنى التي سنعمل عليها ستصبح عديمة النفع في المستقبل !! ما الحل ؟

الحل سهل جداً وهو التفكير بما سنحتاج هذه المساحة المهمة ؟ وماذا سنوفر من خدمات لزوارنا في صفحتنا الرئيسية؟ ..

بعض الحلول التي من الممكن أن تساعدنا في تجاوز هذه المشكلة هي:

1- خدمة تسجيل اسم المستخدم وكلمة السر لأعضاء الموقع.
2- خدمة التصويت وقوائم الاستفتاء .
3- خدمة محرك بحث للموقع.
4- خدمة القوائم البريدية .

والعديد من الحلول المنطقية لاستغلال المساحات الفارغة والتي تصب في مصلحة الموقع وتجذب العديد من الزوار الجدد والمحافظة على الزوار الدائمين للموقع ..

لنتفق على أن الخلية اليمنى من الجدول ستكون لعمل الآتي:

1- الروابط الفرعية للصفحة الرئيسية.
2- خدمة دخول أعضاء الموقع.
3- خدمة محرك البحث للموقع.
4- خدمة قائمة الاستفتاء.
5- خدمة القائمة البريدية للموقع.

الصف الرابع
سنستخدم مصطلح "مساحة العرض" لهذا الصف

قبل البدأ بعمل أي إضافات لهذا الصف الفارغ سنقوم بعمل الآتي:
زيادة ارتفاع الخلية ونجعل الارتفاع 50 بكسل وجعل المحاذاة العمودية للخلية لناحية الوسط (كلك يمين > خصائص الخلية ):

الآن سنقوم برسم جدول وحيد الأعمدة والصفوف (1X1) لتنسيق عملنا على هذا الصف:



بعد إخفاء الحدود لهذا الجدول سنجعل لون الخلفية له بنفس اللون الذي اخترناه لتبويب "الصفحة الرئيسية" بنفس الطريقة السابقة التي غيرنا لون الخلفية للخلايا السابقة (يمكن هنا استخدام خصائص الجدول أو خصائص الخلية للقيام بنفس العمل .. النتيجة واحده):

سنقوم الآن بتحديد جدول آخر داخل هذا الجدول مكون من عامودين وصف واحد (2X1) لمواصلة عملنا بإعداد سليم لمساحة العرض لصفحتنا الرئيسية:


الخلية اليمنى سنجعل العرض لها بـ 20% والمحاذاة الأفقية لليمين بينما المحاذاة العمودية للأعلى (خصائص الخلية) كما يلي:


الخلية الأخرى سنغير فقط العرض لـ80% بنفس الطريقة السابقة:


يبقى علينا الآن الحدود لهذا الجدول ولنجعل اللون لها كاللون الأزرق الذي استخدمناه في شريط التصفح الرئيسي أو اللون الأبيض:

:نيو::نيو:

:مر: :مر:
:5: