تعلم:: بناء موقع في 60 دقيقة باستخدام Front Page
((بسم الله الرحمان الرحيم))
`````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````` ```````````````````````````````````````````````````
سنتناول في هذه الموضوع كيفية عمل موقع كامل سواء للمحترفين أو الغير المحترفين في 5 دقائق فقط وذلك باستخدام خاصية غير منتشرة أو عدد قليل من مستخدمي برنامج FrontPage يعرفونها وهي خاصية Dynamic Web Template وهي عبارة عن تحكم كامل في الإطارات والخلايا والصور الرئيسية أو بمعنى أصح التصميم الخاص بكل الموقع من خلال التعديل في صفحة واحدة فقط ومن ثم يتم التعديل في باقي الصفحات تلقائياً.
```````````````````````````````````````````````````````````````````````````````````````````````````` ``````````````````````````````````````````````````````````````````````
1- فتح برنامج FrontPage ونرى في الصورة التالية كيفية بدأ تصميم موقع جديد (نضغط على السهم المجاور لأيقونة الصفحة البيضاء ثم اختيار Web site)
2- بعد الخطوة الأولى ستظهر النافذة التالية نقوم باختيار Empty Web site ثم زر OK
3- وكما نرى في الصورة التالية أنه موقع خالي تماما من أي شيء حتى الصفحات فنقوم بإنشاء صفحتين, الأولى سيتم تسميتها تلقائيا من خلال البرنامج إلى Index.htm والثانية يمكنك التحكم في اسمها وفي هذه الخطوة نقوم بتسميتها أي اسم ولكن الشرط هنا أن نضع بدلاً من HTM نضع الامتداد التالي DWT
4- في الخطوة التالية سنقوم بعمل خريطة الموقع Sitemap وتوزيع الصفحات الخاصة بك والمطلوب تصميمها. كما نرى بالأعلى زر Web Site ومن ثم نضغط على زر Navigation في الأسفل كما هو موضح بالصورة التالية.
5- والآن نقوم بعمل صفحات داخلية تحت الصفحة الرئيسية كما هو موضح في الصورة التالية. نضع السهم على الصفحة Index.htm وستظهر القائمة كما في الصورة وبعدها نختر New ثم Page ونكرر تلك الخطوة في كل مرة لتخطيط الموقع ثم وضع اسم لكل صفحة ليمكنك الوصول إليها بكل بساطة.
6- الصورة التالية عبارة عن خريطة كاملة للموقع وقد قمت بتخطيط الموقع كما هو موضح في الصورة الصفحة الرئيسية ومتفرعة إلى عدة صفحات ثانوية وإحدى تلك الصفحات مقسمة إلى صفحات أخرى وهكذا ولا تقلق في كم الوقت المستغرق في تصميم كل هذه الصفحات فجميعهم سيكون من ضمن الخمس دقائق المذكورة.
7- وبعد أن قمنا بعمل الخريطة نقوم الآن نبدأ التصميم فنقوم بالضغط مرتين على الصفحة romio.dwt وهي صفحة التصميم التي سنعمل عليها. وكما نرى في الصورة التالية نرى كيفية التعامل مع الصفحة. نضع المؤشر (السهم) على الجزء الفارغ من الصفحة ومن ثم نضغط على Page Properties لتحديد خصائص الصفحة
بعد الخطوة السابعة ستظهر النافذة التالية وهي نافذة التحكم الكامل في مظهر الصفحة والألوان والاتجاه وغير ذلك.
8- من خلال قائمة General نختار اتجاه الصفحة Page Direction في الوضع من اليمين إلى الشمال Right-to-left بالطبع هذه اختياري فيمكنك اختيار الوضع المناسب للصفحة على حسب الموقع نفسه بالطبع.
معلومة مفيدة: كما ترون في أسفل النافذة نجد Background sound وهي لوضع صوت عند تصفح الموقع فيمكنك وضع آية قرآنية أو ما شابه.
9- والآن ومن خلال القائمة التالية Formatting نرى التحكم في الخلفية Background وكما نرى إمكانية وضع الصورة التي ترغب بها من خلال زر Browse لتكون خلفية للموقع. وخاصية Make it a watermark مفيدة جدا إذا كانت الصفحات طويلة فتجعل هذه الخاصية صورة الخلفية ثابتة والكلام هو ما يتحرك عليها فهي خاصية رائعة حقاً. وفي حالة الألوان فيمكن اختيار ما تشاء من الألوان فالألوان التي قمت باختيارها إنما هي للشرح فقط فمثلا Background هي لون الخلفية إذا لم تكن تنوي وضع صورة. و Text هي لون الكتابة التي ستوضع في الموقع فيما بعد. أما الألوان على اليمين إنما هي ألوان الوصلات في الحالات المختلفة لها على سبيل المثال صفحة مقروءة أو لون الوصلة قبل فتحها أو أثناء فتحها.
10- والآن انتبه معي في هذه الخطوة: بعد أن قمنا بعمل صورة للخلفية واختيار الألوان والتنسيق الخاص بالموقع نقوم الآن بعمل برواز أو جدول ليمكننا التحكم فيه بسهولة ويسر وهي إحدى الطرق لعرض الموقع بطريقة أكثر احترافية.
نقوم بإدراج جدول في الصفحة كما هو موضح بالصورة التالية.
11- بعد الخطوة 10 ستظهر النافذة التالية : في الاختيار Size عدد الأعمدة والصفوف فقط 1 و 1 لأن هذا الجدول مجرد إطار خارجي فقط وسنقوم إن شاء الله فيما يلي بتقسيمه من الداخل ووضع جداول أخرى. وفي الاختيار Layout نجعل العرض Width على الاختيار In percent ونجعلها 100 وبالمثل مع الاختيار Height وهو الارتفاع.. وفي الاختيار Borders نجعلها 0 وهو حجم الإطار نفسه أو شكله (يفضل عمل هذا الجدول كما هو في الصورة وذلك لأن هذا الجدول مجرد وسيلة للتصميم وليس التصميم نفسه.
12- وبعد أن قمنا بعمل جدول تحديد الإطار نقوم الآن بخطوة مهمة وهي توسيط الموقع في منتصف الشاشة بحيث أن أي شخص يتصفح الموقع يجده دائما في منتصف الشاشة وليس على اليمين أو اليسار كما نرى في بعض المواقع. نضع المؤشر داخل الجدول السابق ونضغط على الزر الأيمن للماوس ومن ثم نختر Cell Properties.
13- ومن النافذة التي ستظهر وفي الاختيار تصميم Layout نجعل المظهر الأفقي في الوضع Centre والوضع الرأسي نجعله على الحالة Top ثم الضغط على الزر OK وبهذه قد أعطينا الأمر بجعل ما يوضع في الصفحة يكون أعلى منتصف الصفحة.
14- والآن سنقوم بعمل جدول داخلي لوضع الموقع بداخله وكما هو موضح في الشكل التالي نجعل العرض 800 فقط وهو عرض الشاشات الأكثر انتشارا حول العالم وهو الحجم الذي سنعمل عليه. وفي حالة الاتجاه يمكنك اختيار أي اتجاه تريد من اليمين إلى اليسار أو العكس.
15- ومن داخل الجدول السابق نقوم الآن بإدراج جدول آخر وهو الموقع في الحقيقة... نجعل عدد الصفوف 6 والأعمدة 2 (كمثال ويمكنك عمل أي عدد تشاء على حسب الموقع الذي ترغب في تصميمه)...هنا نجعل العرض 100% ونترك الطول على حسب الصفحة (تلقائيا) وكما ترون في الاختيار Border جعلت الحجم 3 وهو البرواز واللون جعلته كما ترون (هذا شيء اختياري فيمكنك اختيار ما تشاء من ألوان أو حتى إلغاءه كما هو منتشر)
16- كما هو موضح في الشكل التالي قد تم إدراج البرواز. والآن نقوم بدمج الخليتين العلويتين لوضع الرمز أو الصورة الرئيسية للموقع Banner , نقوم بالتعليم على الخليتين ثم ضغطة يمنى على الماوس ومن ثم اختيار Merge Cells لكي نقوم بعمليه الدمج.
17- نقوم الآن بتنسيق الموقع بسحب العمود الموجود في وسط الجدول بالماوس (ضغطة طويلة عليه مع الاستمرار فيكون قابل للتحكم), ثم نكرر الخطوة السابقة لدمج الخلايا الموجودة على يسار الجدول حتى نضع بها الوصلات الموجودة في الموقع كما سنرى في الخطوات التالية.
18- والآن سنقوم بإدراج الصورة الرئيسية الخاصة بالموقع Banner في الخلية العلوية للجدول بوضع المؤشر على تلك الخلية ثم من قائمة Insert>>>Picture>>> From file من النافذة التي ستظهر اختر الصورة التي ترغب في وضعها
19- كما هو موضح في الصورة التالية قد وضعنا الصورة بنجاح... والآن سنقوم بتنسيق الخانة الخاصة بالوصلات لكي تكون بكفاءة... نضع المؤشر في تلك الخلية ثم بالضغطة اليمنى على الماوس ومن القائمة نختر خصائص الخلية Cell Properties
20- كما هو موضح في الشكل التالي نجعل الوضع الأفقي في المنتصف Centre والوضع الرأسي في الأعلى Top ثم OK
21- والآن وبعد أن قمنا بتنسيق الخلية التي سنقوم بوضع الوصلات بداخلها نضع المؤشر الآن على الخلية من قائمة Insert>>>Web Component .
22- ومن النافذة التي ستظهر نختر Link Bars ثم Bar Based on navigation structure ومن ثم نضغط على Next
23- من النافذة التالية نختر شكل الأزرار التي سنضعها في هذا الجزء ويمكنك اختيار اللون والشكل المناسب للموقع من أكثر من 30 شكل مختلف للموقع. ثم نضغط على Next
24- في هذه الخطوة نقوم بتحديد ما إذا كنت ترغب في وضع الوصلات أفقيا أم رأسيا. سنقوم بجعلها رأسيا على حسب ما قمنا به من اختيار سابق لشكل الخلايا. ثم Finish
25- والآن نقوم بتحديد ما ترغب في جعل الوصلات تقرأ ماذا. هذه الوصلات سيكون عليها أن تقرأ الوصلات الرئيسية داخل الموقع أو بمعنى أصح الصفحات التي تندرج تحت الصفحة الرئيسية للموقع. نختر Child pages under Home وأيضا نختر الصفحة الرئيسية لتكون معهم Home page ثم نضغط على القائمة التالية Style لتحديد شكل الأزرار وإمكانياتها ومنها أيضاً يمكنك تغيير شكل الأزرار.
26- كما نرى في هذه الصورة يمكننا تغيير شكل الأزرار وما إذا كانت أفقية أم رأسية ونقوم منها أيضا بالتحكم في ما إذا كانت الأزرار ذات صورة عالية الجودة والألوان ومتغيرة أم ثابتة كما هو موضح في الشكل. ثم الضغط على زر OK
27- نقوم الآن بدمج بعض الخلايا في المنتصف لتكون هي محتوى باقي الصفحات كما سنرى ولكن هذه المرة نترك الخلية الأخيرة في الأسفل دون الباقي كإحتياطي في حالة ما إذا أردنا إضافة أي شيء آخر إلى التصميم الرئيسي ببساطة.
28- نقوم الآن بتنسيق الخلية بطريقة جيدة ورائعة لتكون مناسبة لما نرغب في وضعه. بوضع المؤشر على هذه الخلية ثم نختار من القائمة Cell Properties أو خصائث الخلية.
29- كما نرى نجعل المؤشر في أي حالة أو ما ترغب في وضعه في أعلى اليسار ليكون متناسق مع الموقع ككل.
30- وها هي أهم خطوة في الموضوع كله وهو تحديد ما يمكن تغييره في الصفحات التالية وأين يمكننا ذلك... بوضع المؤشر في الخلية الوسطى ونضغط الزر الأيمن للماوس ثم نختر Manage Editable Regions ..
31- ومن هذه النافذة نكتب اسم المربع الذي نرغب فيه (هذا المربع هو ما سنقوم بالتعديل فيه في باقي الصفحات ولن يمكننا تعديل أي شيء في باقي الصفحات إلا في ذلك المربع)... في خانة Region Name نقوم بكتابة أي اسم وليكن Romio ثم نقوم بالضغط على زر Add ومن ثم زر Close
32- كما نرى قد تم إضافة مربع واسمه romio ليكون هذا هو ما يمكننا التعديل فيه.
33- وهذه أيضاً خطوة مهمة جدا جدا لتفعيل ما قمنا بعمله .
نقوم الآن بجعل كل الصفحات تقوم بقراءة صفحة التصميم romio.dwt لكي يكون لها نفس التصميم.
1- تحديد الصفحة المراد إدراجها ضمن التصميم ولتكن الصفحة index.htm or romio1.htm
2- نفتح قائمة Format>>>Dynamic Web Template>>>Attach Dynamic Web Template
34- بعد الخطوة السابقة ستظهر النافذة التالية وسيكون ملف romio.dwt واضح أمامنا كما هو بالشكل التالي. نقوم بتحديده ثم الضغط على زر Open
35- بعد الضغط على open في الخطوة السابقة ستظهر الرسالة التالية كل ما عليك فعله هو الضغط على زر Close وبهذه قد جعلت هذه الصفحة لها نفس التصميم الخاص بالصفحة romio.dwt ولن يمكن تحرير أي شيء في الصفحة إلا المربع الذي قمنا بإضافته في الخطوات 30-31-32
36- نقوم الآن بتكرار الخطوات 33-34-35 مع باقي الصفحات لجعلها جميعا بنفس التصميم والشكل المراد.
والآن أهنئك فقد قمت بتصميم موقع كامل بكل بساطة وموقع على أعلى مستوى وقد قمت في وقت سابق بعمل موقع وهو بنفس الطريقة التي رأيتموها ولكن بتشكل مختلف فيمكنكم عمل أي شيء الآن فقط كل ما عليك فعله هو تخيل الموقع وتصميمه ومن ثم عمل أي شيء ترغب به والصورة التالية شكل لموقع شخصي قمت بتصميمه بنفس الطريقة السابقة. ولكن في وقت أكثر من 5 دقائق بالطبع
:: منقول ::
المشاركة الأصلية كتبت بواسطة الخيال
رد: تعلم:: بناء موقع في 60 دقيقة باستخدام Front Page
