تصميم المواقــــع

 

 

 تمهيـــد :


أهلا بك عزيزي الزائر .. في قسم الفرونت بيج 2000 وإليك هذه الخطوات السهلة التي بعد اكمالها وتطبيقها سيصبح موقعك جاهز بإذن الله :
أولا : قبل البدء في تصميم موقعك عليك تحديد موضوعه هل هو شخصي - برامج - تعليم - ثقافي .. إلخ .
ثانياً : ماهي البرامج اللازمة لتصميم صفحات الويب ؟ 
1- المفكرة ( Notepad ) : وهي موجودة ضمن البرامج الملحقة بويندوز ... ويتم استخدامها لتحرير النصوص التي ستضعها في موقعك ومن ثم نسخها ولصقها في الفرونت بيج .
2- مايكروسوفت فرونت بيج 2000 (FrontPage):وهو موضوع شرحنا ، وقد اخترناه لأنه من عائلة ميكروسوفت أوفيس التي اعتاد الكل تقريبا على استخدامها وهذا سيسهل من استخدامه . وهو برنامج قوي تستطيع أن تصمم صفحات بمستوى احترافي بواسطته . ويوجد هذا البرنامج ضمن مجموعة أوفيس 2000 كما ذكرنا ( وهو غير معّرب ) .
3- برنامج رسومي : لإضافة لمسات جمالية للصفحة كالخلفيات والعناوين .. إلخ . ومن هذه البرامج ما يلي :
* فوتوشوب (Photo Shop)
* بينت شوب (Paint Shop Pro)
* فلاش (Flash)
* الرسام المرفق بويندوز 
أو أي برنامج رسومي آخر تجيد استخدامه .
وسيكون هناك دروس لبعض هذه البرامج في الموقع بمشيئة الله .

# تعّرف على واجهة فرونت بيج 2000

ولكن قبل البدء في شرح رموز البرنامج وأدواته نورد هذه المعلومة عن صفحة الويب 
* تبدأ صفحة html أو الإتش تي ام ال بـالوسم <html> وتنتهي بـالوسم </html> .
* تنقسم الصفحة إلى منطقتين هما : 
1- منطقة الرأس أو الهيد: وتبدأ بـالوسم <head> وتنتهي بـالوسم </head> وتحتوي على عنوان الصفحة .
2- منطقة الجسم أو البودي: وتقع بين الوسمين <body> و </body> .. وكل ما سيظهر في الصفحة سيكون موجود في هذه المنطقة .
والآن افتح الفرونت بيج2000 ، ستجد أن الإطار أسفل البرنامج يحتوي على ثلاث قسام هي Normal / HTML / Preview .
* القسم Normal : هو منطقة العمل التي سيتركز فيها شرحنا .
* القسم HTML : لمشاهدة الكود الذي يكتبه البرنامج خلف الصفحة .
* القسم Preview : لمشاهدة الصفحة كما ستظهر للمتصفح .. لذلك بعد أن تضيف شيء للصفحة في قسم Normal قم بمشاهدة طريقة ظهوره في منطقة Preview

.

الوصله التشعيبيه

ما هي الوصلة يا ترى؟

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

كيف يمكنني إضافتها ..؟؟
من اسهل الأشياء اللتي تستطيع القيام بها في هذا البرنامج هو إضافة الوصلات ...

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

هناك  أربع أنواع من الوصلات

ما هي خصائص الوصلة؟؟

ليس عليك أن تضع اي شئ هنا إلا إذا احببت .. إذا لم تضع في هذا المكان شئ.. فسوف..تفتح الوصلة الجديدة في نفس النافذة.

إنشاء جدول
استخدام الجداول في صفحتك يجعل منها اكثر تنظيماً واحترافاً ... فمن غير الجداول لن تستطيع توسيط نص بجانب صورة أو تضع نصوص على شكل أعمدة متجاورة أو تضع خط رأسي أو أو ... إلخ . لذلك نحن نصحك باستخدام الجداول في صفحتك واتقانها !!
# والآن ابدأ باستخدام الجداول :
اضغط على رمز ادراج جدول في شريط الأدوات العلوي ( راجع شرح الرموز في الخطوة الأولى ) واختر عدد الأعمدة والصفوف التي تريدها . أو استخدم insert>table وحدد عدد الخلايا .
* ستلاحظ أن حدود الجدول الداخلية والخارجية بارزة .. فماذا لو كنت تريد حدود الجدول مخفية في (Preview) وظاهرة في قسم (Normal) للتعامل معها وتدرج ما تريد ؟؟ ... بسيطة !!
ضع المؤشر في أي خلية داخل الجدول وانقر يمين الفارة ستفتح قائمة اختر منها Table Propeties ستفتح لك نافذة توضح خصائص الجدول

** ملاحظة **
( أي اختيار ستختاره من خصائص الجدول سينطبق على جميع خلايا الجدول ) .
ولكن ماذا لو أردت تطبيق خصائص معينة على خلية واحدة أو مجموعة من الخلايا دون البقية ؟؟ الأمر بسيط ..!!

1- لخلية واحدة ضع المؤشر بداخلها .. ولعدة خلايا قم بتحديد هذه الخلايا . 
2- اضغط يمين الفارة واختر Cell Properties ستظهر لك النافذة التي توضح خصائص الخلية :

3- كما تلاحظ أنها شبيهة بخصائص الجدول .. اختر منها ما تريد من خصائص لتطبيقها على خلية واحدة أو خلايا محددة ثم اضغط OK .
** ملاحظة **
( لفهم الجداول والتعرف إلى تعقيداتها بشكل أفضل احفظ الصفحات التى ترى تعقيداً في تصميمها وافتحها في الفرونت بيج 2000 ) .