دروس الفرونت بيج
<div class="taxonomy-description"><p>دروس الفرونت بيج front page</p> </div>السلام عليكم ورحمة الله وبركاته
شرح طريقة إنشاء شريط متحرك بالفورنت بيج
::__IHACKLOG_REMOTE_IMAGE_AUTODOWN_BLOCK__::0
نضغط دبل كلك على : شاشة إسمية
ننتقل لنافذة التالية:
1- النص المطلوب
2- إتجاه مسار النص
3- سرعة حركة النص
4- ذهاب وإياب أم ذهاب والظهور من نفس نقطة البداية
5- حركة الشريط بشكل مستمر ام تحديد عدد المرات
بالتوفيق
المصدر: منتديات ألم الإمارات
|
تصميم فريم اطار للمنتدى |
|
السلام عليكم ورحمة الله وبركاته طريقة تصميم إطار أو فريم للمنتدى الخطوه الاولى بتكون تصميم الإطار على الفوتوشوب طبعا كل واحد وأبداعه الشخصي وعلى سبيل المثال هذا الإطار اللي راح نشتغل عليه بعد مانكون إنتهينا من التصميم ملاحظه حجم الاطار 800 على 600 بكسل والباك راوند شفاف قبل لا نبداء تصميم الاطار يكون احسن الخطوه الثانيه تقطيع الإطار إلى أربع زوايا وأربع أوساط ::__IHACKLOG_REMOTE_IMAGE_AUTODOWN_BLOCK__::1 طبعا مافي داعي اقطع اربع زوايا بكتفي بزوايه وحده واقدر اعكس الاتجاه واتحكم فيها مثل ماهو موضح
راح تنعكس معانا الصور وتصبح الزاويه اليمين نخزن اليمين (( بيكون معانا يمين ويسار الزوايا اللي فوق )) الحين معانا الزاويه اليمين ارضيه باقي اليسار تابع الشرح بالطريقه هاي بيكون معانا اربع زوايا باقي الأوساط الأربعه راح نتبع نفس الخطوات ولابد يكون حجم الصوره اللي نقصها نفس الحجم السابق وهذا يعتمد على نوع الإطار والزوايا اللي فيه والشكل .. علشان تطلع الزوايا نفس حجم الأوساط نتبع الخطوه التاليه لاحظ في الصوره رقم واحد حددت مكان القص نفس الزوايا في الصوره رقم اثنين احرك التحديد بأزرار الكيبور جهة اليمين وراح اقص الوسط بحيث يطلع نفس حجم الزاويه ومايكون اختلاف اربع اوساط للمربع :::::::::::::::::::: الخطوه التاليه رايت كلك على الجدول ونختار الخصايص مثل ماهو موضوح بالصوره اتبع الخطوات التاليه في الصوره واحد توسيط راح يكون معانا 9 جداول شفافه والحين نجمع الصور (( ملاحظه هامه )) السبب الاوساط تتمدد مع المنتدى لو ادرجناها صوره من ملف راح تطلع بحجمها الطبيعي بالمنتدى .. 1- ادراج صوره من ملف لزواااااااااااايا واول صوره مثال اعلى اليمين
وبطلع معانا الشكل هذا وراح نكمل مع باقي الزوايا نفس الخطوات ادراج صوره من ملف :::::::::::::::::: الخطوه التاليه الاوساط عباره عن خلايا لاحظ الخطوات اول خليه الوسط اليمين مثل ماهو موضح بالصوره تابع وبيكون معانا الشكل التالي وراح نلاحظ تكرر الوسط اليمين طنششششش وكمل باجي الاوساط بعد مانكمل باجي الاوساط راح يطلع لنا الشكل التالي الخطوه التاليه شد الزوايا بالمواس لين يصبح الشكل متناسق لاحظ الصوره التاليه طبعا هذا في الوضع العادي اما في وضع المعاينه برفيووو راح يتغير الشكل لاحظ ::::::::::::::::::::: الحين المرحله الأخير وضع الكود حق التمبلت وعلى سبيل المثال تمبلت forumhome راح نختار توسيط مثل ماهو باين في الصوره الماوس في الوسط ::__IHACKLOG_REMOTE_IMAGE_AUTODOWN_BLOCK__::28 نختار بعدها من الاسفل وضع كود html ونفس المكان اللي راح نحصل فيه الماوس نسوي لصق لمحتويات التمبلت بدون مانغير ماكان الماوس الخطوه التاليه معايه برفيووووووو وراح يطلع معاك تمبلت الفروم هوم كامل يعني محتويات الهدر والفاوتر والمجالس كلهم في الاطار وطبعا هذا يعتمد على رغبتك
الخطوه الأخيره نرفع الصور (( 8 )) لمجلد الــvb
المصدر: منتديات ألم الإمارات |
|
خاصية البوك مارك |
|
السلام عليكم ورحمة الله وبركاته في النافذة التالية: ثم نذهب إلى النص اللي نبغيه ينقلنا للأغلى ثم نضع الرابط #top ثم نضغط موافق بالتوفيق للجميع المصدر: منتديات ألم الإمارات |
|
إستخدام القوالب الجاهزة لتصميم |
|
السلام عليكم ورحمة الله وبركاته بيطلع لنا النافذة التالية: بعد إختيار أحد القوالب بيطلع لنا الشكل هذا: الان حتى نتحكم بأكواد كل صفحة بشكل مستقل بعد إختار الخيار السابق بيطلع معانا الشكل التالي: أتمنى يكون الشرح مفيد للجميع
المصدر: منتديات ألم الإمارات |
السلام عليكم ورحمة الله وبركاته
لإضافة سكرور بار لصفحة كما هو موضح بالصوره التالية:
إفتح الصفحة المطلوبة بالفرونت بيج
ثم إضغط على (html) من الأسفل جهة اليسار
ثم ضع الكود التالي كما هو في الصوره
مع تغير الألوان حسب لون الموقع:
<STYLE type=text/css>BODY {
SCROLLBAR-FACE-COLOR: #D6AE82; SCROLLBAR-HIGHLIGHT-COLOR: #965B35; SCROLLBAR-SHADOW-COLOR: #965B35; SCROLLBAR-3DLIGHT-COLOR: #965B35; SCROLLBAR-ARROW-COLOR: #965B35; SCROLLBAR-TRACK-COLOR: #D6AE82; SCROLLBAR-DARKSHADOW-COLOR: #965B35
}
</STYLE>
بالتوفيق للجميع إن شاء الله
السلام عليكم ورحمة الله وبركاته
شرح طريقة إدراج فلم في الصفحة
عباره عن ملف: rm
على سبيل المثال: Dragon-Ball.rm
ثم ننتقل لنافذة التالية:
1- نختار عناصر تحكم متقدمة
2- دبل كلك على توصيل
من النافذة التالية نختار التالي:
1- نضع مسار الملف
2- الرسالة اللي تظهر لشخص اللي ماعنده نفس البرنامج المستخدم
3- العرض والارتفاع
ثم موافق
بيطلع لنا الشكل التالي نضغط على زر التشغبل
حتى يتم عرض الفلم
العرض بيكون بالشكل التالي:
بالتوفيق للجميع
السلام عليكم ورحمة الله وبركاته ..
حبيت أفيدكم بهالدرس المفيد والرائع .. وهوه عن كيفية إنشاء ألبوم
سواء للصور أو تصااميم أو أي شي تبونه .. الألبوم يطلع شكله منسق
ومرتب عالنت .. ويمكن أصحاب المواقع الشخصيه بيستفيدون منّه أكثر ..
وهذي صورة توضيحيه للألبوم + شرح توضيحي لأقسام الألبوم ..:
مثل مابتشوفون الألبوم بيتكون من شريط علوي يتم فيه استعراض
جميع الصور على شكل مصغّرات .. وعند اختيار إحداها يتم عرضها
بحجمها الطبيعي فوسط الشاشه .. + عنوان للصوره فأسفلها ..
لإنشاء الألبوم نفتح صفحه يديده فالفرونت بيج و نتبع التالي :
a- نذهب إلى Insert –>web component
ومثل ماهو موضح بالصور تحت .. :
1- نختار من القائمه اليسرى PhotoGallery .
2- نختار من القائمة اليمنى شكل الألبوم الذي نرغب به .. وهنيه انا
اخترت Slideshow layout لأنه أحلى واحد فيهن ..طبعا
كلن يختار اللي يعيبه .. الأفقي ولا الرأسي ولا العشوائي ..
3- نضغط على Finish .
:: Insert PhotoGallery ::
بتطلع لنا web gallery properties window فنقوم بالخطوات التاليه :
1- نضغط على Add ونختار Add from file ومنها نقوم بتنزيل جميع
الصور المرغوب بضمها للألبوم …. (من ملف بجهازك).
2- لتنسيق النص تحت كل صوره .. ( *إختياري).
3- هنا تتم كتابة رقم الصوره .. وشرح تفصيلي عنها .. (* إختياري).
4- OK
:: Add Photos ::
أتمنى أنكم استفدتم من الدرس … وتحياتي لكم ..
إدراج ملف الفلاش في صفحة ويب
إن إدراج فيلم الفلاش في صفحة ويب يعتبر من الأمور المهمة جداً , حيث أن الفلاش أصبح يستخدم وبشكل كبير من أجل إضافة التأثيرات الحركية والجمالية في موقع الانترنيت إضافة إلى الأكشن سكريبت وما تعطيه من إمكانيات تقنية … ولذلك فإن تعلم هذا الأمر يعتبر من الأمور الأساسية وهذا الأمر بسيط جداً وهو ينقسم إلى قسمين إدراج ملف الفلاش عن طريق فرونت بيج وإدراجه عن طريقة لغة 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″ height=”400″ src=”http://www.sadaagroup.com/sadaa.swf”
type=”application/x-shockwave-flash”>
انسخ الكود أعلاه وألصقه في المكان الذي تريد أن تدرج فيه الفيلم في صفحة الويب , لا تنسى تغير وصلة الملف لتتلاءم مع عنوان موقعك الشخصي والمجلد الذي نقلت إليه ملف الفلاش إضافة إلى أبعاد فيلم الفلاش الخاص بك حيث أننا هنا وضعنا الأبعاد الافتراضية وهي 400 * 550 بكسل ( لا تنسى الأبعاد بالبكسل ) .
وهكذا تعلمت كيف تدرج فيلم فلاش في صفحة ويب وقد لاحظت أن هذا الأمر بغاية السهولة وخاصة إذا تم في فرونت بيج …
السلام عليكم ورحمة الله وبركاته
شرح إدراج ملف صوتي في الصفحة بدون ظهور الشكل
بمجرد دخول الصفحة نستمع لملف الصوت
الملف بصيغة: mid
وهذا الملف الصوتي لتجربة: miozc.zip
الشرح
نفتح الصفحة اللي راح نضيف لها ملف الصوت
رايت لك في الصفحة ونختار التالي: خصائص الصفحة
بيطلع لنا النافذة التالية:
1- الخيار( عام )
2- نستعرض الملف من الجهاز والافضل نضع مسار الملف في الموقع
3- هذا الخيار يخلي ملف الصوت بعد ماينتهي يرجع يعيد من جديد لو حبيت او تقدر تعطل الخيار او تحدد عدد مرات التكرار ثم يتوقف الملف الصوتي
4- نختار موافق
الأن لمشاهدة كود الملف الصوتي نضعط على
في الصوره التاليه نجد الكود الخاص بملف الصوت:
::__IHACKLOG_REMOTE_IMAGE_AUTODOWN_BLOCK__::3
الكود:
<bgsound src="../فرونت/miozc.mid" loop="-1">
يجب تعديل التالي إلى مسار الموقع:
بالتوفيق للجميع واتمنى يكون شرح مفيد
|
تأثيرات DHTML |
|
السلام عليكم ورحمة الله وبركاته الصوره الثانية: ندخل على برنامج الفرونت بيج ونستعرض الصوره رقم واحد نختار كما هو موضح بالصوره تابع الخيار الثاني: تابع الخيار الثالث: نختار الصوره الثانية نرجع إلى العمل إنزل تحت وإضغط على زر (معاينة) |
التعرف على صفحات الأنماط
هي عبارة عن وسيلة تتيح التحكم في سمات معينة داخل موقع الويب بأكمله . بعبارة أخرى ، تتيح لك صفحات الأنماط التحكم في سمات معينة داخل موقع الويب بأكمله . أي أنها تتيح لك التحكم في كافة مظاهر النص الذي يظهر داخل صفحات الويب . أما ما يتعلق بمواصفات صفحات الأنماط ، فبإمكانك أن تقرأها بأكملها وترى مثالاً على استخدامها بانتقالك إلى http://w3c.org/style/ ( انظر الشكل 20-1 ) .
1-20
أيضاً توجد طريقة أسهل للحصول على نفس النتائج . حيث يتيح لك فرونت بيج استخدام ما يسمى بـ ” الفكرة العامة ” theme لتغيير هيئة وشكل مواقع الويب الخاصة بك . كما تبين الأشكال 20-2 و 20-3 أمثلة على بعض الأفكار التي يمكنك تطبيقها على مواقع الويب باستخدام فرونت بيج .
2-20
تطبيق الأفكار العامة على موقع الويب
إن أردت تطبيق إحدى الأفكار العامة الجاهزة على موقع الويب يمكنك القيام بذلك بسهولة بتطبيق إحدى أو كل الأفكار العامة ولكن إن أردت تطبيقها جميعاً مرة واحدة .
لتطبيق فكرة عامة على موقع الويب الخاص بك :
1- حدد الموقع الذي تريد أن تطبق عليه الفكرة العامة ثم افتح هذا الموقع داخل فرونت بيج .
2- من قائمة Format . اختر أمر Theme لتفتح مربع حوار Themes ( انظر الشكل 20-5 )
5-20
3- لتطبيق الفكرة العامة على موقع الويب بأكمله ، حدد زر الخيار All Pages الذي يوجد في جزء Apply Theme To لكن لتطبيقها على صفحات معينة ، فانقر زر الخيار (s)Selected Page .
4- في مربع Theme ، استخدم شريط التمرير إلى أسفل حتى تصل إلى الفكرة العامة التي تريدها . عند نقر كل فكرة عامة موجودة سترى تمثيلاً لها داخل نافذة Sample of Theme الموجودة في يمين مربع الحوار .
5- عندما ترى الفكرة العامة التي تريدها ، انقر زر ok ، سيبدأ فرونت بيج بتطبيق الفكرة العامة على الصفحات التي حددتها أو على الموقع بأكمله .
6- عندما ينتهي فرونت بيج من تطبيق الفكرة العامة الجديدة ، ستظهر الصفحة التي حددتها لتطبيق الفكرة العامة عليها ( انظر الشكل 20-6 ) .
6-20
تعديل الفكرة العامة في فرونت بيج
لتحديد فكرة وتبدأ في تعديلها ، لعمل ذلك ، اتبع الخطوات التالية :
1- اختر أمر Themes من قائمة Format لتفتح مربع Themes (شكل 20-7 ).
7-20
2- حدد الفكرة العامة التي تريد تعديلها من بين الأفكار العامة المتاحة . ستظهر الفكرة العامة داخل نافذة Sample of Theme .
3- انقر زر Modify وستظهر في مربع الحوار ثلاثة أزرار إضافية ، وهي Colors و Text و Graphics . انقر أحد الأزرار الثلاثة بحسب العنصر الذي تريد تعديله في الفكرة العامة . إذا أردت تعديل أكثر من عنصر في النص ، فانقر زر Text . سيظهر لك مربع حوار Theme Modify ليعرض عناصر النص التي يمكن تعديلها ( انظر الشكل 20-8 ) .
4- من قائمة Item ، حدد العنصر الذي تريد تغييره . فمثلاً ، حدد Heading1 لتعرض الخط المستخدم في عناوين Heading1 ( انظر الشكل 20-9 )
8-20
9-20
5- حدد خطاً مختلفاً يستخدم في Heading1 ، وسيحدد هذا الخط الجديد الشكل الذي ستظهر به كافة رؤوس Heading1 ( انظر الشكل 9-20 ) .
6- إذا أردت تغيير أي إعدادات خاصة بحجم بقية الرؤوس الأخرى ، فقم بهذه التغييرات مثلما فعلت في الخطوات من 4 إلى 6 ثم انقر بعد ذلك زر ok .
7- كي تتأكد من أنك لم تحذف الفكرة العامة الموجودة لديك ، انقر زر Save As لتحفظ التغييرات باسم جديد . في الوضع الافتراضي سيقدم فرونت بيج اسماً للفكرة العامة الجديدة هو Copy of theme . تستطيع أن تقبل هذا الإسم أو تقوم بتغييره ، انقر ok مرة أخرى لإغلاق مربع حوار Themes .
التعرف على العناصر النشطة في فرونت بيج
تمثل العناصر النشطة active elements مجموعة من الأدوات التي تضيف قدراً من الإثارة إلى صفحة الويب ، وتعد الأزرار المتحركة hover buttons أكثر العناصر النشطة استخداماً في فرونت بيج ، يتيح لك بعض التأثيرات الخاصة إلى أزرار التحرك التي تريد إنشاءها داخل موقعك ، دعنا نفترض أنك أنشأت ارتباطات إلى الأقسام Support و Download و Personal داخل الموقع ( انظر الشكل 19-1 )
بإمكانك أن تجعل هذه الأزرار تتوهج عندما يقوم المستخدم بتمرير مؤشر الفأرة فوقها وأيضاً تستطيع تشغيل أصوات أو عرض صورة معينة .
1-19
بالإضافة إلى الأزرار المتحركة ، تستطيع استخدام عناصر أخرى نشطة مثل عداد الزيارة hit counter والنص المتحرك marquee . أما العنصر النشط الأول فهو عبارة عن وسيلة عرض تبين عدد الزوار لموقعك . والنص المتحرك هو عنوان نصي قابل للحركة .
إنشاء الأزرار المتحركة
في هذا المثال سترى كيفية إنشاء ارتباطات التجول باستخدام الأزرار المتحركة وستقوم بإنشاء هذه الارتباطات من إحدى الصفحات الرئيسية إلى ثلاث صفحات مختلفة باستخدام الأزرار المتحركة :
1- افتح صفحة جديدة
2- من قائمة Insert ، حدد أمر Component ثم Hover Button لتفتح مربع حوار Hover Button Properties ( انظر الشكل 19-2 ) .
3- في مربع نص Button text ، اكتب الاسم الذي تريده أن يظهر على الزر المتحرك ، في مثالنا هذا ، اكتب ساودينت . إذا أردت تغيير نمط الخط وحجمه الذي يظهر على الزر فانقر زر Font ثم حدد الخيارات المطلوبة .
4- في مربع نص Link to ، اكتب عنوان URL الخاص بالموقع أو الصفحة التي تريد أن يكون ارتباط هذا الزر إليها . في مثالنا اكتب http://www.saudint.com
5- إذا أردت تغيير اللون الافتراضي الذي سيظهر به الزر أو تغيير التأثير الافتراضي لهذا الزر ( تأثيرالتوهج ) فبإمكانك القيام بهذه التغييرات من خلال مربعات القوائم المنسدلة المختلفة .
6- إذا أردت إضافة تأثيرات صوتية إلى الزر المتحرك ، فانقر زر Custom ( انظر الشكل 19-3 ) يمكنك استخدام كافة الملفات الصوتية .
7- عندما تنتهي من الإعدادات الخاصة بالزر المتحرك داخل مربع حوار Hover Button Properties ، انقر زر ok لحفظ تلك الإعدادات وإغلاق مربع الحوار .
3-19
8- كرر الخطوات من 2 إلى 7 لتنشئ أزراراً متحركة تأخذ أسماء ساودينت و البداية سيكون ارتباطاً إلى http://www.saudint.com وزر سجل الزوار إلى صفحة الويب الشخصية الخاصة بك ينبغي أن تظهر الأزرار الثلاثة كما في ( الشكل 19-4 ) .
4-19
9- احفظ صفحتك وقم بنشرها على خادم الويب عند عرض صفحتك يجب أن تشبه تلك المبينة في ( الشكل 19-5 )
5-19
إنشاء النص المتحرك
يمكنك إضافة النص المتحرك إلى الويب باستخدام فرونت بيج .
لإنشاء نص متحرك في صفحة ويب :
1- افتح الصفحة التي تريد إدراج النص المتحرك بها .
2- من قائمة Insert ، حدد أمر Component ثم Marquee لتفتح مربع حوار Marquee Properties ( انظر الشكل 19-6 ) .
3- في مربع Text ، اكتب الرسالة التي تريد عرضها في النص المتحرك .
6-19
4- تستطيع أيضاً التحكم في عوامل أخرى خاصة بالنص المتحرك مثل سرعة واتجاه النص المتحرك .
5- بعد أن تنتهي من إدخال الإعدادات الخاصة بالنص المتحرك ، انقر زر ok لحفظ تلك الإعدادات وإغلاق مربع الحوار .
6- لمعاينة النص المتحرك انقر علامة تبويب Preview داخل النافذة الرئيسية لفرونت بيج .
عداد الزيارة
عداد الزيارة hit counters عبارة عن مقياس يظهر على الشاشة بهدف عرض عدد الأشخاص الذين قاموا بزيارة موقع الويب الخاص بك .
لإنشاء عداد الزيارة داخل صفحة الويب :
1- افتح الصفحة التي تريد أن تضع فيها عداد الزيارة .
2- ضع المؤشر في المكان الذي تريد أن تدرج فيه عداد الزيارة .
3- من قائمة Insert ، حدد خيار Component ثم Hit Counter لتفتح مربع حوار Hit Counter Properties ( انظر الشكل 19-8 ) .
8-19
4- حدد نوع عداد الزيارة الذي تريد إنشاءه ، وذلك بنقر أحد أزرار الخيارات الموجودة في جزء Counter Styles .
5- حدد إذا كنت تريد تحديد العداد برقم معين لعدد الزيارات خلاف رقم صفر ، وإذا أردت تحديد عدد خانات الأرقام في العداد ، فاكتب رقماً أعلى أو أقل من 5 في خانة Fixed number of digits .
6- انقر زر ok لحفظ إعداداتك وإغلاق مربع الحوار .
7- احفظ الصفحة وبداخلها عداد الزيارة ثم قم بنشرها على خادم الويب .
8- لمعاينة الصفحة بعد إنشاء عداد الزيارة بداخلها ، افتح الصفحة داخل المستعرض الخاص بك ( انظر الشكل 19-9
) .
