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

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

العنوان: كيفية عمل موقع
عن الكتاب:

ملىء بكل التفاصيل ومتتاز وشرح مفصل
تأليف: عبدالله فتحى البوهى

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


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

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

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

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

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

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

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

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



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


مجلدالموقع:

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

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

ملاحظة:
عادة ما يكون هذا المجلد موجوداً فيالمجلد (My ***s ) الموجود في مجلد 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=******s-1252 ) وبالتالي لن تظهر الحروف العربيةإذا لم يحددها المصمم إلا إذا قام الزائر بتغيير تشفير الصفحة ( Encoding ) بطريقةيدوية إلى العربية ( charset=******s-1256 ).
- عنوان الصفحة وهو العنوان الذيسيظهر أعلى المتصفح ، وهو أيضاً العنوان الذي سيظهر في محركات البحث ووضعه ضروريجداً لمحركات البحث ، لذا يفضل أن يدل على محتوى الصفحة.

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

عرض فلاشي


html

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

تغيير تشفير الصفحة
++++++ http-&@#&@#&@#&@#&@#="&@#&@#&@#&@#&@#&@#&@#-Type" &@#&@#&@#&@#&@#&@#&@#="****/html; charset=******s-1256">

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

تغيير خلفية الصفحة
<**** 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 المجاني:
- نفتح صفحةالسيرفر:
http://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 عنطريق برنامج

المصدر: ملتقى شذرات