المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : تعليم تصميم المواقع عن طريق الفرونت بيج للمبتدئين



7oodaa
07-06-2005, 09:29 AM
تعليم تصميم المواقع عن طريق الفرونت بيج للمبتدئين


هذا نظام تعليمي دراسي لتصميم المواقع خاص للمبتدئين
..
وجدته فحبيت انقله لكم بكل ترتيب انشالله

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

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

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

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

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

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

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

مجلد الموقع:

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



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

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


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




http://www.maknoon.com/mon/images/articles/screen.gif عرض فلاشي (http://www.maknoon.com/mon/images/flashes/webEmpty_viewlet_swf.html) http://www.maknoon.com/mon/images/articles/screen.gif






شجرة الموقع:

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

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

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





http://www.maknoon.com/mon/images/articles/screen.gif عرض فلاشي (http://www.maknoon.com/mon/images/flashes/navication_viewlet_swf.html) http://www.maknoon.com/mon/images/articles/screen.gif





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



النصوص:

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

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



http://www.maknoon.com/mon/images/articles/ed_align_right.gif محاذاة لليمين http://www.maknoon.com/mon/images/articles/ed_format_bold.gifسميكhttp://www.maknoon.com/mon/images/articles/ed_align_center.gif محاذاة للوسطhttp://www.maknoon.com/mon/images/articles/ed_format_italic.gif مائلhttp://www.maknoon.com/mon/images/articles/ed_align_left.gif محاذاة لليسارhttp://www.maknoon.com/mon/images/articles/ed_format_underline.gif مخطط

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




http://www.maknoon.com/mon/images/articles/screen.gif عرض فلاشي (http://www.maknoon.com/mon/images/flashes/addFormatText_viewlet_swf.html) http://www.maknoon.com/mon/images/articles/screen.gif



html

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


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

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



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

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

http://www.maknoon.com/mon/images/articles/hyperlink.gif


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




http://www.maknoon.com/mon/images/articles/screen.gif عرض فلاشي (http://www.maknoon.com/mon/images/flashes/hyperlinks_viewlet_swf.html) http://www.maknoon.com/mon/images/articles/screen.gif




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

html

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


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

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

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

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





http://www.maknoon.com/mon/images/articles/screen.gif عرض فلاشي (http://www.maknoon.com/mon/images/flashes/baground_viewlet_swf.html) http://www.maknoon.com/mon/images/articles/screen.gif


الصور:

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






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

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





http://www.maknoon.com/mon/images/articles/screen.gif عرض فلاشي (http://www.maknoon.com/mon/images/flashes/pictures_viewlet_swf.html) http://www.maknoon.com/mon/images/articles/screen.gif





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

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


http://www.maknoon.com/mon/images/articles/screen.gif عرض فلاشي (http://www.maknoon.com/mon/images/flashes/pictures2_viewlet_swf.html) http://www.maknoon.com/mon/images/articles/screen.gif






html



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


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


الأيقونة

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



الجداول:

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



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

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





http://www.maknoon.com/mon/images/articles/screen.gif عرض فلاشي (http://www.maknoon.com/mon/images/flashes/tables_viewlet_swf.html) http://www.maknoon.com/mon/images/articles/screen.gif




الشكل التالي سيوضح لنا نافذة خصائص الجدول (Table Properties):
http://www.maknoon.com/mon/images/articles/tableProporties.gif

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


والشكل التالي سيبين بعضاً من خصائص الخلية ( Cell Properties):
http://www.maknoon.com/mon/images/articles/cellProporties.gif

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

للتحكم أكثر في إدارة الجداول ، اظهر شريط الأدوات الخاص بالجداول ، بالضغط على:
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 (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://www.tripod.lycos.com/guides/frontpage.html)

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





http://www.maknoon.com/mon/images/articles/screen.gif عرض فلاشي (http://www.maknoon.com/mon/images/flashes/puplish_viewlet_swf.html) http://www.maknoon.com/mon/images/articles/screen.gif



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

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





http://www.maknoon.com/mon/images/articles/screen.gif عرض فلاشي (http://www.maknoon.com/mon/images/flashes/puplishftp_viewlet_swf.html) http://www.maknoon.com/mon/images/articles/screen.gif



وها نحن قد انتهينا من دروس الفرونت بيج للمتبدئين أسأل الله أن ينفعك بهذه الدروس ، ونرجوا منك الدعاء الصالح.
تمت

تحياتي

ALHOOL
07-06-2005, 07:18 PM
شكرا على الموضوع الرائع

مع انى زعلان لأنك خدت صورتى الرمزية

بس مش مشكلة

وبالمرة ده برنامج Front Page Express حجمه 1.5 ميجا بايت فقط

للتحميل من هنا :

http://geocities.com/wama_55555/Front_Page_Express.zip

7oodaa
07-06-2005, 09:02 PM
العفو يا باشا
وبانسبة للصورة اغيرها علشانك يا باشا
وشكرا علي رابط التحميل لأن دي حاجة فاتتني

ميــــم
09-06-2005, 08:15 PM
*8* ألف شكر يا حمودة , وتسلم أيدك ع النقل المتميز *8*
*8* وشكر يا إنكريدابل ع الرابط *8* بس مع الأسف هو *13* مش شغال*13*


*7* معلش حتقل عليكم *7*
ممكن رابط لتحميل البرنامج

ALHOOL
09-06-2005, 08:24 PM
لأ الرابط شغال

بس متضغطش عليه بالزرار الشمال للماوس

بالزرار الأيمن واختر Save Target As

وشكراً

ميــــم
09-06-2005, 08:28 PM
متشكر أوي أوي بجد تسلم أيدك
*8* *8* *8* *8* *8* *8* *8* *8*

:d معلش أصل أنا غشيم أوي في حكاية الروابط:d

جاري التحميل

7oodaa
09-06-2005, 08:46 PM
شكرا يا ميم علي ردك
وأتمني الموضوع عجبك

بسمة الحياة
10-06-2005, 11:17 AM
تسلم على هدا الموضوع المفيد

بصراحة استفدت منه كثير

تقبل كل تقدير

7oodaa
10-06-2005, 01:59 PM
شكرا يا بسمة الحياة علي ردك
واتمني الموضع عجبك
وابي اينا عنوان موقعك لما تعميليه علشان نحتفل

سمسمة
30-06-2005, 03:22 PM
شكرا ياحودة على الموضوع

*82**83**84*

7oodaa
09-07-2005, 05:15 PM
العفو
واتمني الموضوع عجبك

badry_1986
08-05-2006, 11:33 AM
الله ينور يا حودا

7oodaa
04-01-2007, 09:21 PM
ده نورك
واتمني الموضوع عجبك فعلا

ahmedzaza000
15-01-2007, 01:19 AM
درس جميل جدآ جدآ