الخطوة الأولى :- افتح مجلد جديد على الهارد دسك لديك على القسم C أو D وسمه MyWeb حيث سيكون موقعك بهذا المجلد ... ثم افتح داخل هذا المجلد مجلد آخر وسمه images انظر الشكل - 1 .. والغرض من تلك المجلدات هو وضع الصفحات والصور المطلوبه في الموقع مثل صور الأزرة أو صور المناظر الطبيعية أوما شابه ذلك .. وسنضع الصور بالمجلد images أما الصفحات فستكون بالمجلد MyWeb .. ليست هذه قاعدة ولكن هذا هو المتبع في تصميم المواقع .. كذلك هناك مجلد ثالث يمكنك وضعة فيما لو رغبت وهو مجلد Download والذي يوضع بداخلة الملفات الخاصة بالتنزيل .

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

الخطوة الثالثة :- افتح برنامج الفرنت بيج انظر الشكل 2 .. سيفتح البرنامج صفحة افتراضية ويسميها Untitled Normal Page قبل كل شيء يجب حفظ الصفحة بمجلد الصفحات MyWeb .. ولكن كيف ذلك حسنا انقر على قائمة File ثم اختر من القائمة المنسدلة Save as لتظهر لك الناافذة الموضحة في الشكل - A .. أنقر على As File ثم حدد المجلد الخاص بالصفحات MyWeb وأكتب اسم الصفحة index.htm يجب ان يكون امتداد الاسم htm أو html .. على العموم ليس ضروري أن تكتب الامتداد انت بنفسك اكتب الاسم فقط والبرنامج يضع الامتداد تلقائيا . بعد حفظ الصفحة ستعود ثانية لبرنامج الفرنت بيج كما في الشكل -2 ..

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

الخطوة الخامسة :- في هذه الخطوة سننشيء الصفحة الاولى .. طبعا لا تحذف الصفحة الأم او تغلقها فقط أنقر على زر انشاء صفحة جديدة لإنشاء صفحة .. ثم افعل كما فعلت في الخطوة الثالثة أي انقر على قائمة File ثم اختر من القائمة المنسدلة الأمر Save As وإحفظها بمجلد الصفحات MyWeb بإسم allosh.htm واكتب بمتن الصفحة الجملة التي على يمينك .... بعد كتابة الجملة انقر على زر الحفظ لحفظ المتغبرات ..

الخطوة السادسة :- كذلك في هذه الخطوة سننشيء صفحة وهي الصفحة الثانية .. لا تحذف او تغلق أيا من الصفحات السابقة سواء الصفحة الام أو الصفحة الأولى .. فقط أنقر على زر انشاء صفحة جديدة لإنشاء صفحة أخرى أو الصفحة الثانية في الموقع .. ثم افعل كما فعلت في الخطوات السابقة .. أي انقر على قائمة File ثم اختر من القائمة المنسدلة الأمر Save As وإحفظها بمجلد الصفحات MyWeb بإسم lastpage.htm واكتب بمتن الصفحة الجملة التي على يمينك .... بعد كتابة الجملة انقر على زر الحفظ لحفظ المتغيرات ..

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

الخطوة الثامنة :- أستعرض الصفحة الأم .. كيف ذلك أنقر على قائمة Window الموجود في شريط القوائم والمحاطة بالدائرة الحمراء انظر الشكل - 4 ثم انقر على الصفحة D:\MyWeb/index.htm لأستعراضها لأنها لا تزال موجودة ببرنامج الفرنت بيج .. حدد كلمة ( الصفحة الأولى ) ثم انقر على زر الربط التشعبي ستظهر لك نافذة Edit Hyperlink والمبينة بالشكل -4 اكتب بخانة URL اسم الصفحة الأولى اي allosh.htm وتأكد من صحة السبلنق كذلك الامتداد إذا كان الفرنت بيج لديك يجعل الامتداد html فيجب أن تكتب allosh.html بدل allosh.htm .. ثم انقر على OK .. بعد ذلك حدد كلمة ( الصفحة الثانية ) طبعا في نفس الصفحة الأم .. ثم انقر على زر الربط التشعبي وأكتب اسم الصفحة الثانية lastpage.htm كما فعلت مع الكلمة السابقة . وبهذا نكون انتهينا من الصفحة الأم ..

الخطوة التاسعة :- .. في هذه الخطوة أولا استعرض الصفحة الأولى .. كيف ذلك أنقر على قائمة Window الموجود في شريط القوائم والمحاطة بالدائرة الحمراء انظر الشكل - 4 ثم انقر على الصفحة D:\MyWeb/allosh.htm .. حدد كلمة ( الصفحة الثانية ) المكتوبة بمتن هذه الصفحة .. ثم انقر على زر الربط التشعبي وأكتب اسم الصفحة الثانية lastpage.htm ثم حدد كلمة ( الصفحة الرئيسة ) وأنقر على زر الربط التشعبي وأكتب اسم الصفحة الأم index.htm وبهذا نكون انتهينا من الصفحة الأولى والصفحة الأم .. طبعا ما يجب عمله في الصفحة الثانية لن يحتاج إلى شرح .. لأن الأمر اصبح مفهوم .. وسأقول فقط استعرض الصفحة الثانية وحدد الكلمة انقر على زر ..... إلخ ..

الخطوة الأولى :- اغلق متصفح الأنترنت ثم ارجع إلى برنامج الفرنت بيج وكبر البرنامج واستعرض الصفحة الأم .. إذا كنت قد اغلقت برنامج الفرنت بيج .. فبكل بساطة شغل برناج الفرنت بيج ولعرض صفحات موقعك فيه .. انقر على قائمة File ثم اختر منها Open ستحصل على نافذة Open File حدد الاختيار From File وأكتب عنوان الصفحة الأم D:\MyWeb\index.htm أو انقرعلى الزر Browse وأبحث عن مجلد الموقع وحدد الصفحة الأم ثم انقر على Open بكل تأكيد سيعرض لك البرنامج الصفحة الأم .

الخطوة الثانية :- انقر هنا ونزل هذه الصور في المجلد المسمى images وهي عبارة عن صور خاصة سنستخدمها بهذا الدرس

الخطوة الثالثة :- بعد عرض الصفحة الأم ببرنامج الفرنت بيج تبدو مختلفة قليلا عما تراه في المتصفح .. انقل المشيرة بواسطة الماوس أو الأسهم إلى اسفل الصفحة وتحت الكلام الذي كتبته من قبل .. ثم انقر على زر ادراج جدول وأدرج جدول مكون من عمودين وسطر واحد .. الآن ضع المشيرة في الخلية الأولى اليمنى من الجدول ثم انقر على زر إدراج الصورة ( انظر الشكل - 2 ) .. طبعا ستفتح لك نافذة ادراج صورة Image حدد الاختيار From File وأكتب اسم وعنوان الصورة images/next.jpg .. ( بإمكانك نقر الزر Browse وتحديد الصورة من المجلد images ) انقل المشيرة إلى الخلية الثانية .. وأدرج الصورة images/Prdmail.gif بنفس الطريقة الأولى بعد ادراج الصور تبدوا الصفحة كما في الشكل-12 تقريبا ..

ملاحظة :- ليس ضروريا الجدول لإدراج الصور غير انه ينضم عملية صف الصور فقط ويعطيها مظهر حسن ..

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

طبعا الآن تحتاج إلى إضافة رابط للصورة أي كما فعلنا مع كلمة ( الصفحة الأولى ) المكتوبه في متن الصفحة الأم .. لاحظ الشكل-12 الكلمات تحتها خط أي أنه موجود رابط لهذه الكلمات . الآن انقر على الصورة الأولى ( next.gif ) بزر الماوس الأيمن واختر من القائمة المنسدلة Image Properties .. ستحصل على النافذة المبينة في الشكل-11 .. انظر الى الشكل وإلى الاقسام التالية ..

القسم الأول :- وهو أهم الأقسام ( عنوان الصورة ) أي مكان وجود الصورة إذا كان العنوان بهذا الشكل ( D:\MyWeb/images/next.gif ) فيجب تغييرة كما في الشكل-11 تماما .. وهذا يعني مكان وجود الصورة سواء في الموقع أو على الجهاز وفي عملية النشر سننشيء مجلد بنفس الاسم . بالنسبة للقسم الثاني يوضح درجة ونوع الصورة وهو ليس ضروريا ..

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

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

http://www.allosh.com

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

الخطوة الخامسة :- انقر على الصورة الأخرى بزر الماوس الأيمن ثم اختر من القائمة المنسدلة Image Properties لتحصل على النافذة الموضحة في الشكل-11 .. طبعا سترى عنوان الصوة images/Prdmail.gif في مكان عنوان الصورة .. اكتب في القسم الثالث ( Email me ) ثم انتقل للقسم الرابع وأكتب بريدك الالكتروني وسنفرض أن بريدك هو [email protected] اذا تكتب بهذا الشكل في القسم الرابع mailto:[email protected] بهذا نكون انتهينا من الصفحة الام وبمجرد أن ينقر الزائر على الصورة الأولى سينتقل إلى الصفحة الأولى وإذا نقر على الصورة الثانية سيفتح لديه برنامج Microsoft Outlook ...الآن يمكنك استعراض بقية الصفحات وإضافة الأسهم او الصور التي تريد مع اضافة الروابط لكل صورة ..

الخطوة السادسة :- في هذه الخطوة سنغير من خلفية الصفحة طبعا سنستخدم الصورة المستخدمة في هذا الموقع ..اولا افتح قائمة File من شريط القوائم انظرالشكل-2 في اعلى هذه الصفحة .. واختر من القائمة المنسدلة Page Properties ستحصل علي النافذة المبينة في الشكل-13 حدد الاختيار Background Image ثم اكتب عنوان الصورة التي ستستخدمها كخلفية للصفحة .. بشرط أن تكون هذه الخلفية موجودة في المجلد images .. اكتب اسم الصورة كما هو موضح في الشكل-13 .. إذا كنت تريد استخدام صورة أخري غير تلك التي ارسلت لك يمكنك أن تضعها في المجلد images وأكتب اسمها مع الامتداد .. ( يمكنك أن تنقر على الزر Browse ثم حدد الصورة من المجلد المذكور ) .. بعد ذلك انقر على الزر OK في اسفل النافذة ( للأسف الزر غير واضح في الشكل-13 .. )