للبدء في هذا الدرس لا بد ان تكون ان قمت بخطوتين اساسيتين:-
1- ان تحجز موقع خاص بك كما هو مبين في شرح حجز دومين عن طريق شركة مجانية
2- ان تصمم صورة او واجهة الموقع في الفوتوشوب ويتم تقطيعها كما هو مبين في شرح تصميم واجهة الموقع عن طريق الفوتوشوب
بعد الانتهاء من الخطوتين السابقتين سابدا من برنامج الفرونت بيج
بعد فتح برنامج الفرونت بيج يتم عمل الاتي :-
1- في وسم الmeta الخاصية التابعة ل charset والتي تساوي في وضعها الافتراضي
windows-1252 يتم تغيير الرقم الى 1256 وذلك حتى يتم دعم حروف اللغة العربية ويتم اضهارها بشكل صحيح

2- يتم ادراج الجدول حسب ماتم تقسيم الصورة من صفوف واعمدة ففي مثالنا هذا التطبيقي تم تقسيم الصورة الى 4 صفوف
3- يتم تعديل بعض خصائص الجدول وهي ( نطاق الخلايا = 0 , المسافة بين الخلايا =0 , اتجاه الجدول = من اليمين الى اليسار , الحجم =0 )
ملحوظة :- يتم اظهار خصائص الجدول عن طريق النقر بزر الماوس الايمن في اي مكان على الجدول واختيار من القائمة خصائص الجدول

الصف الاول في الجدول هو الجزء الخاص بـheader
4- يتم تقسيم الصف الاول الى ثلاثة اعمدة حسب تقسيم الصورة لدينا
5- نوقف الموشر في الخلية الاولى من الصف الاول (جهة اليمين) , حيث يتم ادراج الصورة من الاداة المخصصة لادراج الصور في الفرونت بيج

نلاحظ انه في مكان الاستعراض وجود اجزاء الصور للصورة الاصل بعد تقطيعها , كما انها موجودة في المجلد images
6- يتم اختيار الجزء الخاص بالخلية كما هو موضح اعلاه ومن ثم النقر على زر ادراج
7- تلاحظ ظهور الصورة في الخلية الاولى من الجدول كما توضحه الصورة

ارجو التركيز فيما سيقال لانه مهم جدا لانجاز العمل بشكل صحيح
8- بعد اندراج الصورة نلاحظ ان حدود الاعمدة في الصف الاول متقاربة جدا في جهة اليسار لذلك يتم سحب اول حد الى بداية الصورة وذلك حتى يتم استيعاب الخلية للصورة وتجنباً للفراغات .