تعليم تصميم المواقع عن طريق الفرونت بيج للمبتدئين

[حسامH]

جدول المحتويات
• مقدمة.
o ما هو الفرونت بيج
o ما هو html
o لمن هذه الدروس
o متطلبات الدروس
• مجلد الموقع
• شجرة الموقع او مخطط التنقل
• النصوص
• الارتباطات التشعبية
• تحديد خصائص الصفحة
• الصور
• الجداول
• نشر الموقع

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

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

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

Html (اتش تي ام ال) هي اللغة المستخدمة في تصميم المواقع وهي تقرأ من قبل المتصفح (الانترنت اكسبلورر أو نتسكيب ) وذلك لمعرفة هيئة عرض الصفحة التي ستظهر للرائي. أي أن أي صفحة تظهر في شبكة الانترنت ، مكتوبة بهذه اللغة. وتستطيع معاينة كود الصفحة المكتوبة بهذه اللغة عن طريق الضغط بالزر الأيمن ، واختيار ( view source ).

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

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

إذا كنت مستعداً ، فلنبدأ إذاً.




--------------------------------------------------------------------------------


مجلد الموقع:

في هذا الدرس سنتعلم:
• ما هو مجلد الموقع
• كيفية انشاء مجلد الموقع

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

ملاحظة:
عادة ما يكون هذا المجلد موجوداً في المجلد (My webs ) الموجود في مجلد my documents .


العرض:
سنقوم في هذا المثال بإنشاء مجلد موقع فارغ ، وسنسميه maknoon .





شجرة الموقع:

في هذا الدرس سنتعلم:
• ما هي شجرة الموقع
• كيفة انشاء شجرة الموقع

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

العرض:
سننشأ شجرة الموقع كثلاث صفحات (صور ، أخبار و مواقع ) ، أسفل الصفحة الرئيسة.




ملاحظة
غالبا ما يسمى ملف الصفحة الرئيسة index.htm ، وبهذا الاسم يعرف السيرفر ، أن هذه الصفحة هي الصفحة الرئيسة ، أو أول صفحة تفتح عند فتح الموقع ، ولكن تسمية هذه الصفحة ، يختلف من سيرفر ( مستضيف ) إلى سيرفر آخر.




--------------------------------------------------------------------------------


النصوص:

في هذا الدرس سنتعلم كيفية:
• إضافة نص
• تغيير نوع الخط
• تغيير حجم الخط
• تغيير لون الخط
• تغيير محاذاة الخط

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

محاذاة لليمين سميك
محاذاة للوسط مائل
محاذاة لليسار مخطط


العرض:
سنكتب النص ( السلام عليكم ورحمة الله ) في الصفحة الرئيسة ، بخط ( Tahoma ) وبلون أحمر ، اما حجم الخط فهو نقطتين.




html

<font face="Tahoma" size="2" color="#FF0000">السلام عليكم ورحمة الله </font>





--------------------------------------------------------------------------------


الارتباط التشعبي:

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

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

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




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





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

html

<a href="news.htm">اضغط هنا</a>





--------------------------------------------------------------------------------




خصائص الصفحة:

في هذا الدرس سنتعلم كيفية:
• تغيير عنوان الصفحة
• تغيير خلفية الصفحة
• تغيير اتجاه الصفحة ليكون من اليمين إلى اليسار
• تغيير تشفير الصفحة إلى العربية

من أهم خصائص الصفحة:
- اتجاه الصفحة فالخيار الافتراضي هو من اليسار إلى اليمين ، ولكي تظهر النصوص العربية بشكل مرتب ، يجب أن نغير من اتجاه الصفحة ليكون من اليمين إلى اليسار.
- تشفير الصفحة ، والخيار الافتراضي هو الانجليزية ( charset=windows-1252 ) وبالتالي لن تظهر الحروف العربية إذا لم يحددها المصمم إلا إذا قام الزائر بتغيير تشفير الصفحة ( Encoding ) بطريقة يدوية إلى العربية ( charset=windows-1256 ).
- عنوان الصفحة وهو العنوان الذي سيظهر أعلى المتصفح ، وهو أيضاً العنوان الذي سيظهر في محركات البحث ووضعه ضروري جداً لمحركات البحث ، لذا يفضل أن يدل على محتوى الصفحة.

العرض:
سنغير عنوان الصفحة ، الخلفية ، اتجاه الصفحة وكذلك تشفير الصفحة.



html

تغيير اتجاه الصفحة
<html dir="rtl">

تغيير تشفير الصفحة
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">

تغيير عنوان الصفحة
<title>أهلاً وسهلاً بكم في مكنون</title>

تغيير خلفية الصفحة
<body bgcolor="#FFFF99">





--------------------------------------------------------------------------------

الصور:

في هذا الدرس سنتعلم كيفية:
• ادراج صورة
• تنسيق محاذاة الصورة
• جعل صورة كأيقونة أو وصلة
• وضع الصور في المجلد الصحيح



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

العرض:
سنضع نصاً مكون من ثلاث فقرات في صفحة الصور، وسندرج صورة محاذية لليمين ومتداخلة مع النص ، وكذلك سنجعل من صورة أيقونةً للدخول إلى صفحة الأخبار.






ملاحظة:
يجب أن تسمى الصور بأسماء انجليزية أما العربية فلن تعرض في أغلب السيرفرات

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





html

الصورة الكبيرة

<img border="0" src="images/noUserPic.jpg" align="right">

الأيقونة

<a href="news.htm"><img border="0" src="images/aurep.gif" align="absmiddle"></a>




--------------------------------------------------------------------------------

الجداول:

في هذا الدرس سنتعلم كيفية:
• انشاء جدول
• تغيير خصائص الجدول والتعرف عليها

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

العرض:
في هذا العرض ، سننشأ جدول مكون من صفين وعمودين ، الصف الأول لوضع العناوين ، والصف الثاني لوضع الصور ، وسنخفي حد الجدول ، وسنحاذي الكلام والصور إلى الوسط.





الشكل التالي سيوضح لنا نافذة خصائص الجدول (Table Properties):


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


والشكل التالي سيبين بعضاً من خصائص الخلية ( Cell Properties):


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

للتحكم أكثر في إدارة الجداول ، اظهر شريط الأدوات الخاص بالجداول ، بالضغط على:
View >> Toolbars >> Tables

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

html

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">

<tr>

<td width="50%" align="center"> أخبار محلية</td>

<td width="50%" align="center">أخبار عالمية</td>

</tr>

<tr>

<td width="50%" align="center">

<img border="0" src="images/folder.jpg"></td>

<td width="50%" align="center">

<img border="0" src="images/worldFolder.jpg"></td>

</tr>

</table>





--------------------------------------------------------------------------------

نشر الموقع:

نشر الموقع ، هو نقل ملفات مجلد الموقع إلى السيرفر ليتم عرضها وفتح الموقع عن طريق الانترنت.

قبل أن نبدأ في نشر الموقع ، يجب أن نختار السيرفر أو المستضيف لموقعنا ، وهناك الآلاف من السيرفرات المجانية وغير المجانية ، ويختلف كل منها عن الآخر في كثير من الأمور ، أهمها مساحة التخزين المتاحة. وهذه قائمة لبعض المواقع المستضيفة المجانية.
- geocities.com
- freeservers.com
- 0catch.com
- tripod.com
- bizhosting.com


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

خطوات الاشتراك في سيرفر tripod المجاني:
- نفتح صفحة السيرفر:
www.tripod.com
- نفتح صفحة الاشتراك ( ويستدل عليها ب Sinup أو Join Us )
- قم بإملاء البيانات ، والأهم اسم المشترك ( Member Name ) ، فبها سيحدد عنوان الموقع ، وانتبه إلى كود التأكيد آخر الصفحة ، ومن ثم اضغط I Agree
- اضغط تنشيط الحساب لديهم ( Activate Your Account ).



هناك طريقتين لنشر الموقع ، إما عن طريق :
1- برنامج الفرونت بيج:
لا يمكنك نشر الموقع عن طريق برنامج فرونت بيج ، إلا إذا كان السيرفر ( المستضيف ) ، يدعم خاصية فرونت بيج اكستنجن ( Front Page Extension ).

- افتح صفحة المساعدة (help Tripod) وابحث عن Enable Front Page Extension . ويجب أن تشغل هذه الميزة. ربما تكون الوصلة:
http://www.tripod.lycos.com/guides/frontpage.html

- تابع العرض التالي




- افتح صفحة موقعك وفي حالتي هي:
http://maknoon0.tripod.com

2- برنامج ftp :
لا يمكنك نشر الموقع عن طريق ftp إلا إذا كان المستضيف يدعم ذلك ، هناك العديد من برامج ftp ولقد اخترنا برنامج cuteFtp.
والعرض التالي سيوضح عملية نشر الموقع في سيرفر tipod عن طريق برنامج cuteftp:

[القرش]

أخي حسام موضوعك رائع

وأتمنى من الإدارة نقله لقسم التصميم

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

لكي يسهل قرائته من الجميع أرجوا بأني ماأزعجتك

[رمز الوفاء]

اي واله ياريت


انا ما شوف زين وانا أنتظرك


ولي عوده



رمز

معلومات جميلة وغزيرة عن هذا البرنامج المميز

شكرا يا حسام

تم نقل الموضوع لقسمه المناسب