دروس تعليم فرونت بيج للمبتدئين - الصفحة 2

ابو فهد · #11 04-21-2010, 11:37 PM

الدرس الثاني عشر من دروس دورة فرونت بيج XP
العناصر النشطة و صفات الأنماط

إضافة المؤثرات الحركية و الجمالية إلى موقع الانترنيت الخاص بك

التعرف على العناصر النشطة :

العناصر النشطة active elements مجموعة من الأدوات التي تضيف قدراً من الإثارة إلى صفحة الويب، وهي على سبيل المثال لا الحصر الأزرار المتحركة hover buttons و عداد الزيارة hit counter والنص المتحرك marquee . أما الأزرار المتحركة فهي عبارة عن أزرار لها تأثيرات خاصة وأما عداد الزيارة فهو عبارة عن وسيلة عرض تبين عدد الزوار لموقعك . والنص المتحرك هو عنوان نصي قابل للحركة .

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

من أجل إضافة أزرار متحركة :
1- من Insert اختر Web Component لتفتح مربع حوار Insert Web Component اختر من Component Type أمر Dynamic Effects ومن Choose an effect اختر Hover Button ( الشكل 1 - 12 ) .

1 - 12
2- أضف ما تراه مناسباً من التأثيرات من حيث اسم الزر والرابط الذي سيربط إليه الزر ولون الزر و التأثير الحركي للزر ... ألخ من التأثيرات ( الشكل 2 - 12 ) .

الشكل 2 - 12
ثانياً عداد الزيارة : من Insert اختر Web Component لتفتح مربع حوار Insert Web Component اختر من Component Type أمر Hit Counter ومن Choose a counter style اختر شكل العداد الذي ترغب به ( الشكل 3 - 12 ) .

3 - 12
ثالثاً النص المتحرك : من Insert اختر Web Component لتفتح مربع حوار Insert Web Component اختر من Component Type أمر Dynamic Effects ومن Choose an effect اختر Marquee .
وهنا يفتح مربع حوار Marquee properties الذي تستطيع من خلاله إضافة النص المتحرك إضافة إلى تطبيق التأثيرات الحركية واللونية المختلفة عليه ( الشكل 4 - 12 ) .

4 - 12

التعرف على صفحات الأنماط :
هي عبارة عن وسيلة تتيح التحكم في سمات معينة داخل موقع الويب بأكمله . بعبارة أخرى ، تتيح لك صفحات الأنماط التحكم في سمات معينة داخل موقع الويب بأكمله . أي أنها تتيح لك التحكم في كافة مظاهر النص الذي يظهر داخل صفحات الويب .
أيضاً توجد طريقة أسهل للحصول على نفس النتائج . حيث يتيح لك فرونت بيج استخدام ما يسمى بـ " الفكرة العامة " theme لتغيير هيئة وشكل مواقع الويب الخاصة بك .
تطبيق الأفكار العامة على موقع الويب :
إن أردت تطبيق إحدى الأفكار العامة الجاهزة على موقع الويب يمكنك القيام بذلك بسهولة بتطبيق إحدى أو كل الأفكار العامة ولكن إن أردت تطبيقها جميعاً مرة واحدة .
لتطبيق فكرة عامة على موقع الويب الخاص بك :
1- حدد الموقع الذي تريد أن تطبق عليه الفكرة العامة ثم افتح هذا الموقع داخل فرونت بيج .
2- من قائمة Format اختر أمر Theme لتفتح مربع حوار Themes ( انظر الشكل 5 - 12 ) .

هذه الصورة تم تصغيرها . إضغط على هذا الشريط لرؤية الصورة بحجمها الطبيعي . أبعاد الصورة الأصلية 644x396 .

5 - 12
3- لتطبيق الفكرة العامة على موقع الويب بأكمله ، حدد زر الخيار All Pages الذي يوجد في جزء Apply Theme To لكن لتطبيقها على صفحات معينة ، فانقر زر الخيار Selected Page(s) l كما تستطيع أن تجعل الفكرة نطبق بكاملها أو بعض أجزائها من خلال الخيارات الموجودة أسفل أنواع الأفكار .
4- في مربع Theme ، استخدم شريط التمرير إلى أسفل حتى تصل إلى الفكرة العامة التي تريدها . عند نقر كل فكرة عامة موجودة سترى تمثيلاً لها داخل نافذة Sample of Theme الموجودة في يمين مربع الحوار .
5- عندما ترى الفكرة العامة التي تريدها ، انقر زر ok ، سيبدأ فرونت بيج بتطبيق الفكرة العامة على الصفحات التي حددتها أو على الموقع بأكمله .
6- عندما ينتهي فرونت بيج من تطبيق الفكرة العامة الجديدة ، ستظهر الصفحة التي حددتها لتطبيق الفكرة العامة عليها .

تعديل الفكرة العامة في فرونت بيج :
لتحديد فكرة وتبدأ في تعديلها ، لعمل ذلك ، اتبع الخطوات التالية :
1- اختر أمر Themes من قائمة Format لتفتح مربع Themes .
2- حدد الفكرة العامة التي تريد تعديلها من بين الأفكار العامة المتاحة . ستظهر الفكرة العامة داخل نافذة Sample of Theme .
3- انقر زر Modify وستظهر في مربع الحوار ثلاثة أزرار إضافية ، وهي Colors و **** و Graphics . انقر أحد الأزرار الثلاثة بحسب العنصر الذي تريد تعديله في الفكرة العامة . إذا أردت تعديل أكثر من عنصر في النص ، فانقر زر **** . سيظهر لك مربع حوار Theme Modify ليعرض عناصر النص التي يمكن تعديلها .
4- من قائمة Item ، حدد العنصر الذي تريد تغييره . فمثلاً ، حدد Heading1 لتعرض الخط المستخدم في عناوين Heading1 .
5- حدد خطاً مختلفاً يستخدم في Heading1 ، وسيحدد هذا الخط الجديد الشكل الذي ستظهر به كافة رؤوس Heading1 .
6- إذا أردت تغيير أي إعدادات خاصة بحجم بقية الرؤوس الأخرى ، فقم بهذه التغييرات مثلما فعلت في الخطوات من 4 إلى 6 ثم انقر بعد ذلك زر ok .
7- كي تتأكد من أنك لم تحذف الفكرة العامة الموجودة لديك ، انقر زر Save As لتحفظ التغييرات باسم جديد . في الوضع الافتراضي سيقدم فرونت بيج اسماً للفكرة العامة الجديدة هو Copy of theme . تستطيع أن تقبل هذا الاسم أو تقوم بتغييره ، انقر ok مرة أخرى لإغلاق مربع حوار Themes .

ابو فهد · #12 04-21-2010, 11:38 PM

الدرس الثالث عشر من دروس دورة فرونت بيج XP

إدراج ملف الفلاش في صفحة ويب

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

أدراج ملف الفلاش في الفرونت بيج :

1 - قم بعمل فيلم فلاش .
2 - من القائمة الرئيسية للفلاش أختر File>Export Movie احفظ الملف في القرص الصلب باسم sadaa على سبيل المثال وبصيغة swf اضغط Save ثم OK ثم OK مرة أخرى .
لاحظ بأن البرنامج قد قام بتصدير الفيلم على هيئة Flash Player باسم sadaa.swf الملفات ذات الامتداد swf هي التي يمكن أن تدرج في صفحات الويب وتعرض في الإنترنت .
3 - الآن نقوم بفتح برنامج الفرونت بيج ثم نفتح الصفحة اللي سنصدر العمل إليها ثم نختار من القائمة الرئيسة insert > web component > advansed > Plug-in
أما بالنسبة لمستخدم فرونت بيج باللغة العربية يختار من القائمة الرئيسية إدراج > مكون ويب > عناصر تحكم متقدمة > توصيل الشكل ( 1 ) .

الشكل 1

4 -الآن فتح لنا مربع حوار نقوم بتحديد الملف الذي سندرجه في الفرونت بيج وذلك بالضغط على Browser ثم نختار الملف المطلوب ثم OK بعد ذلك قم بتحديد أبعاد الفيلم من طول وعرض .... الشكل ( 2 ) .... هذا كل شيء في الفرونت بيج ....

الشكل 2

إدراج ملف الفلاش عن طريق لغة html :
طبعاً أولاً عليك القيام بالعمليتين السابقتين 1 , 2 حتى تقوم بحفظ الملف بصيغة swf .

كود:
<embed width="550" ******="400" src="http://www.6smem.com/test.swf"

type="application/x-shockwave-flash"> انسخ الكود أعلاه وألصقه في المكان الذي تريد أن تدرج فيه الفيلم في صفحة الويب , لا تنسى تغير وصلة الملف لتتلاءم مع عنوان موقعك الشخصي والمجلد الذي نقلت إليه ملف الفلاش إضافة إلى أبعاد فيلم الفلاش الخاص بك حيث أننا هنا وضعنا الأبعاد الافتراضية وهي 400 * 550 بكسل ( لا تنسى الأبعاد بالبكسل ) .
وهكذا تعلمت كيف تدرج فيلم فلاش في صفحة ويب وقد لاحظت أن هذا الأمر بغاية السهولة وخاصة إذا تم في فرونت بيج ...

ابو فهد · #13 04-21-2010, 11:41 PM

الدرس الرابع عشر من دروس دورة فرونت بيج XP

إنشاء سجل زوار

إن سجل الزوار يتيح لزوار موقعك إعطاء رأيهم في الموقع , وطريقة عمل سجل الزوار أمر سهل باستخدام برنامج فرونت بيج , طبعاً لا يمكن تجريب سجل الزوار إلا بعد أن تقوم بنشر الموقع على مخدم يدعم امتداد برنامج فرونت بيج .
أنشئ موقعاً جديداً كما تعلمت في الدروس السابقة , ومن ثم من جديد اختر صفحة أو ويب ومن ثم قوالب الصفحة , من قوالب الصفحة اختر دفتر الضيوف أو guestbook بالنسبة للفرونت بيج باللغة الإنكليزية . الشكل ( 14 - 1 ) .

الشكل ( 14 - 1 )

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

ابو فهد · #14 04-21-2010, 11:43 PM

الدرس الخامس عشر من دروس دورة فرونت بيج XP

.: إنشاء فورم بريدي :.

إن الفورم البريدي يتيح لزوار موقعك إرسال رسائل مباشرة لك من موقعك إلى عنوان بريد الكتروني أنت تقوم بتحديده , وطريقة عمل الفورم البريدي أمر سهل باستخدام برنامج فرونت بيج , طبعاً لا يمكن تجريب الفورم البريدي إلا بعد أن تقوم بنشر الموقع على مخدم يدعم امتداد برنامج فرونت بيج .
أنشئ موقعاً جديداً كما تعلمت في الدروس السابقة , ومن ثم من جديد اختر صفحة أو ويب ومن ثم قوالب الصفحة , من قوالب الصفحة اختر نموذج المعلومات أو formmail بالنسبة للفرونت بيج باللغة الإنكليزية ومن ثم موافق , الشكل ( 15 - 1 ) .

الشكل ( 15 - 1 )

ومن ثم تقوم بتخصيص الفورم البريدي كما تشاء من إضافة حقول جديدة أو حذف حقول زائدة .... الخ ... وذلك من خلال ادارج ومن ثم نموذج ومن ثم مربع نص ...
وبعد تخصيص حقول النموذج البريدي اضغط داخل النموذج بالزر اليمين للماوس ومن ثم خصائص النموذج , وفي لوحة خصائص النموذج ضع عنوان الإيميل الذي ترغب أن تصل إليه النتائج في حقل عنوان البريد الالكتروني , الشكل ( 15 - 2 ) .

الشكل ( 15 - 2 )

ابو فهد · #15 04-21-2010, 11:44 PM

الدرس الخامس عشر من دروس دورة فرونت بيج XP

.: شرح برنامج ws_ftp :.

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

الاتصال مع موقعك :
سوف تتعلم الآن كيفية الاتصال مع موقعك عن طريق إدخال كلمة المرور واسم المستخدم وهذه العملية تتم بسهولة تامة .
عند فتح البرنامج سوف تظهر لك هذه النافذة :

1- ضع هنا ftp موقعك.
في الغالب يكون كالتالي:
ftp.sitename.com
قم بمراسلة الشركة المستضيفة لموقعك لمزيد من التفاصيل.
2- ضع هنا اسم المستخدم لموقعك.
3- ضع هنا كلمة المرور لموقعك.
4- استخدم هذا الخيار لحفظ كلمة المرور.
قم بالضغط عل زر OK بعد التعبئة البيانات.
سوف يبدأ البرنامج الآن بالاتصال مع الموقع، انتظر بعض الوقت إلى أن تظهر لك ملفات موقعك.

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

1- هنا توجد ملفات جهازك والتي سوف تقوم بتحميلها إلى موقعك .
2- هنا توجد ملفات موقعك .
3- يستخدم هذا الزر لنقل أي ملف من موقعك إلى جهازك بعد أن تكون قمت بتعيين الملف أو الملفات التي ترغب بنقلها ثم الضغط عليه.
4- يستخدم هذا الزر لنقل أي ملف من جهازك إلى موقعك بعد أن تكون قمت بتعيين الملف أو الملفات التي ترغب بنقلها ثم الضغط عليه.

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

1- يستخدم هذا الزر لصنع مجلد جديد ويتم ذلك عن طريق الضغط على هذا الزر ثم تفتح لك نافذة قم بكتابة اسم المجلد الذي تريد إنشاءه ، ثم إضغط على زر "OK" ... وهكذا تكون قد أنشأت المجلد.
2- يستخدم هذا الزر لتغيير اسم مجلد أو ملف أو صورة إلى الاسم الذي ترغب به ويتم ذلك عن طريق تعيين الملف الذي ترغب بتغيير اسمه ثم الضغط عل هذا الزر وكتابة الاسم الجديد للمجلد أو الملف أو الصورة.
3- يستخدم هذا الزر لحذف أي مجلد أو ملف أو صورة ويتم ذلك عن طريق تعيين الملف الذي ترغب بحذفه ثم الضغط عل هذا الزر.
4- يستخدم هذا الزر لتحديث صفحات الموقع ويتم ذلك فقط بالنقر على هذا الزر.

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

التراخيص :
التراخيص ثلاث مجموعات وهي :
1 - المالك ( Owoer )
2 - المجموعة ( Group )
3 - العالم ( World أو Other )

كيفية إعطاء التراخيص :
1- قم بتحديد الملف الذي ترغب بإعطائه الترخيص.
2- انقر بالزر الأيمن بالفأرة على الملف المعين ، تظهر لك مثل هذه القائمة :

اختر من القائمة chmod UNIX كما هو مبين في الصورة السابقة .

3- ثم قم بإعطاء التراخيص حسب ما طلب منك في البرنامج الذي ترغب بتركيبه.

وهذا بيان للتراخيص وكيفية وضع الأسهم في كل منها:

الترخيص 755:

الترخيص 777:

الترخيص 666:

الترخيص 644:

التحكم بصيغة الملف الذي ترغب بنقله:
كل ملف من الملفات التي ترغب بنقلها يجب نقله بصيغة معينة ، ولمعرفة كيفية التحكم بصيغة الملف الذي ترغب بنقله أنظر إلى الصورة التالية :

هذه الصورة تبين أنواع الصيغ التي يمكن نقل الملفات أو الصور بها ، وهي تنقسم إلى نوعين ، وهما :
1- ASCII : وهذه الصيغة تستخدم لنقل جميع الملفات النصية.
2-Binary : وهذه الصيغة تستخدم لنقل الصور من كل الأنواع (gif , jpg , png , bmp , tif , wmf .... ) وكذلك باقي الملفات ماعدا الملفات النصية.

ملاحظة : قم بوضع سهم على Auto إذا كنت ترغب أن يقوم البرنامج تلقائيا بتغيير صيغة الملف حسب نوعه .

كيفية التحكم بملف نرغب بنقله :
1- قم بتعيين الملف الذي سوف نضع نوع الخاصية له.
2- اختر نوع الخاصية التي سوف تقوم بنقله بها حسب نوعه كما هو مبين في الأعلى.
3- إضغط على زر نقل الملفات والذي إما يكون :

ِأ- من موقعك إلى جهازك:

ب- من جهازك إلى موقعك:

تم بعونه تعالى والحمد لله رب العالمين

الإنتهاء من دورة فرونت بيج XP

وأسأل الله لي ولكم كل التوفيق

emisseFraurry · #16 05-05-2012, 11:44 AM

http://xanax.name
xanax
<a href="http://xanax.name">xanax</a>

أدوات الموضوع
مشاهدة صفحة طباعة الموضوع أرسل هذا الموضوع إلى صديق
انواع عرض الموضوع
العرض العادي الانتقال إلى العرض المتطور الانتقال إلى العرض الشجري