كيفية ادراج فلاش فى صفحة ويب Html

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

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

يمكن متابعة الدروس السابقة :
1.كيف أبدأ تعلم التصميم على الإنترنت
2.مقدمة عن أكواد Html وفائدتها
3. كيفية تصميم موقع بلغة Html

فالفلاش يستعين به كثير من أصحاب المواقع كهيدر فلاشى أو إضافة ألعاب الفلاش ولكن يفضل التقليل من الإضافات الفلاشية فى الصفحة حتى تكون سريعة التحميل.

الخطوة الأولى:

صنع ملف فلاش بإستخدام البرامج المخصصة لذلك مثل برنامج Adobe Flash Studio أو Flash Banner Maker  أو برنامج adobe flash professional أو برنامج Swishmax  ,............... وغيرها من البرامج الكثيرة المهم أن يكون الملف بصيغة SWF

الخطوة الثانية:

رفع الفلاش على شبكة الإنترنت على أى موقع إستضافة برابط مباشر بمعنى ينتهى الرابط بإمتداد الملف الفلاشى SWf

إذا كنت لا تمتلك موقع إستضافة يمكن إستخدام الدروبوكس Dropbox   فى حفظ الملفات والحصول على رابط مباشر.

الخطوة الثالثة: 

بعد الحصول على الرابط المباشر للفلاش يمكن إستبداله بالرابط الملون باللون الأزرق بالكود التالى ثم نسخ الكود إلى صفحة الويب 

 

<embed src="https://dl.dropboxusercontent.com/u/80212138/%D9%85%D8%AF%D9%88%D9%86%D8%A9%20%D9%83%D9%86%20%D8%AF%D8%A7%D8%B9%D9%8A%D8%A7%20%D9%84%D9%84%D8%AE%D9%8A%D8%B1/demo/%D8%A3%D9%84%D9%88%D8%A7%D9%86%20%D8%A7%D9%84%D9%88%D9%8A%D8%A8.swf" 
                    quality="high" allowscriptaccess="always" 
                    type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" 
                    align="middle" height="150" 
                    width="150"></embed>

أما إذا كنت تريد إضافة الفلاش مع خلفية شفافة فيمكن إستخدام هذا الكود
 

<br />
<center>
<embed height="150" src="https://dl.dropboxusercontent.com/u/80212138/%D9%85%D8%AF%D9%88%D9%86%D8%A9%20%D9%83%D9%86%20%D8%AF%D8%A7%D8%B9%D9%8A%D8%A7%20%D9%84%D9%84%D8%AE%D9%8A%D8%B1/demo/%D8%A3%D9%84%D9%88%D8%A7%D9%86%20%D8%A7%D9%84%D9%88%D9%8A%D8%A8.swf" type="application/x-shockwave-flash" width="150" wmode="transparent"></embed>
<center>

يمكن التحكم فى طول وعرض الفلاش بتغيير قيم الطول والعرض بالكود width ,height

إستخدام محرر Html للإضافة فلاش إلى صفحات الويب:

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

إذهب إلى محرر أكواد Html  

 ثم إضغط على أيقونة الفلاش الموجودة بشريط الأدوات

 ثم كتابة رابط الفلاش المباشر بالجدول الخاص بإعدادات الفلاش وضبط الطول والعرض بتبويب general
 ولضبط المحاذاة والشفافية والجودة من تبويب properties

وللحصول على الكود إضغط علىsource أعلى شريط الأدوات بالمحرر

ثم إنسخ الكود داخل أى صفحة Html أو داخل موضوع بمدونة بلوجر أو وورد بريس

الرجاء عدم نسخ الموضوع بدون ذكر مصدره ورابط المدونة

قراءة المزيد

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

بسم الله الرحمن الرحيم

للفيس بوك خدع وخفايا يجهلها كثير منا معنا فى مدونة "الوان الويب" سوف نقوم بشرح تفصيلى لكل خفايا وخدع الفيس بوك .

سوف استعرض عليكم موقع تقدر وانتا بتنزل اى حاجة على الفيسبوك تقدر تنسبها الى جميع انواع شركات المحمول فى العالم وجميع 

المنتجات العالمية كانك منزلها من جوة الشركة 

اولا: عليك بالدخول للرابط التالى  :

www.fbstatusvia.com

الموقع يوجد بداخلة اغلب شركات الهاتف وشركات البرامج وضامم اشياء عدة قم بالضغط على اى اسم من القائمة سوف تظهر 

هذة النافذة 

قم بادخال البوست الذى تريد نشره ثم اضغط shere 

اذا كنت تمتلك هاتف محمول نوكيا مثلا وتريد ان يظهر انك ترسل البوست من هاتف سامسونج s4

اختار من القائمة سامسونجs4 وضع البوست الذى تريدة يظهر لك انك قمت من هاتف سامسونج s4 كما مبين فى الصورة 

شكرا لمتابعتكم لنا

قراءة المزيد

تعليم كيفيه تصميم موقع بلغه (HTML) الدرس الاول

بسم الله الرحمن الرحيم 

 

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

بدایة استطیع القول ان الاسلوب المناسب في شرح مثل ھذه المواضیع ھوالتركیزعلى الجانب العملي وضرب الامثلة وھذا ھو الاسلوب الذي ساحاول ان اتبعھا في الشرح.

اولا:- عليك عزيزى المصمم بتواجد برنامج لتحریر النصوص ولذلك یمكنك استخدام  Notepad الذي ینزل تلقائیا عند تنزیل الویندوز وھناك برامج اخرى مثل
Text padبكونھا یعمل على تلوین العناصر الاساسیة للغة الھتمل  والذي یمتاز عن Notepad و بالتالي يمكن اكتشاف الاخطاء الاملائیة حال حدوثھا و یمكن تنزیل البرنامج من الموقع التالي:   www.textpad.com

نبدأ اولا: بالوسوم يتم كتابة أوامر اللغة HTML على شكل ما يعرف ب " الوسوم ".

الوسوم هي أقواس ذات شكل خاص .. لها الشكل التالي..

<الأمر>

حيث يتم وضع الأمر بين القوسين.
وهناك نوعان من الوسوم لكل أمر..
وسم بداية أو فتح مثل:

<الأمر>

ووسم نهاية أو غلق مثل:

<الأمر/>

وهناك بعض الأوامر التي ليس لها سوى وسم بداية (فتح) فقط.

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

وسم البداية	وسم النهاية	وظيفة الأمر
<html>	<html/>	يستخدم هذا الأمر في كل صفحة كوسيلة للتعريف باللغة
<head>	<head/>	هذا الأمر يختص بإحداث تغييرات في شريط العنوان
<title>	<title/>	هذا الأمر لتغيير عنوان الصفحة العلوي في شريط العنوان
<body>	<body/>	هذا الأمر يختص بتغيير شكل الصفحة ومحتوياتها من نصوص وصور

قم بفتح برنامج notepad وسوف استعرض عليكم بعض الاكواد لتجربتها ولمعرفة
استخدام كل كود وماذا يفعل ولابد بتجريب الاوامر بطريقة عملية عليها لمعرفة استخدام كل منها وفيما يستخدم هذا الوسم ولابد بعمل  save as لصفحة notepad وكتابة الامتداد باسم الموقع ثم html.
مثال : الصورة توضح طريقة حفظ العمل ينتهى اسم الموقع بى html.

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

<html>
<head>
<title>
صفحتي الأولى
</title>
</head>
<body>
<center>
أھلا وسھلا بكم
<br>
في موقعي
</center>
</body>
</html>

شرح استخدام كل كود 

<html>~~~~~~~~~~~~~~~~~~~~~~ </html>

HTML یمثل كود </html> وبین ال <html> ما بین

<head>~~~~~~~~~~~~~~~~~~~~~~</head>
(head) یمثل ما سیكون في جزء الراس </head> و بین ال <head> ما بین

<title>~~~~~~~~~~~~~~~~~~~~~~~~~~ </title>
یمثل  العنوان و الذي سوف یكون في الراس وفي مثالنا سوف نطبع" صفحتي </title> و بین ال <title> ما بین
الاولى"

<body>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~</body>
(body) یمثل ما ھو موجود في جزء الجسم </body> و بین ال <body> ما بین

<center>~~~~~~~~~~~~~~~~~~~~~~~~~~</center>
یتم لھ عملیة توسیط </center> وبین <center> ما بین
وھنا لاحظ ان العبارتین" أھلا وسھلا بكم " و عبارة" في موقعي" تم طباعتھن في منتصف الصفحة

<br>
او
<br />
(Enter وذلك للنزول الى السطر التالي ( اي تعمل عمل ال
السؤال الان : ماذا لو كتبنا الكود كما یلي
أھلا وسھلا بكم
في موقعي
ھل سیطبع" أھلا وسھلا بكم" ثم ینزل سطر الى الاسفل لیطبع "في موقعي" ؟ <br> دون استخدام
بالاضافة <br> الجواب: للاسف لا سوف یقوم بطباعة الجملتین في نفس السطر و لذلك نحن نقوم باستخدام
الى طرق اخرى سوف یتم ذكرھا

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

وبعد فتح notepad ووضع الاكواد لا تنسوا ان تحفظ ويوضع بعد اسم الموقع 

html. 

يظهر العمل بهذا الشكل ولقدت نجحت عزيزى المصمم فى تصميم اول صفحة لك على الانترنت 

الدرس القادم سوف نستعرض فية طريقة كتابة النصوص وكيفية ادراج الالوان عليها وطريقة عمل الجداول .

نتمنى ان يكون نال الشرح اعجابكم

قراءة المزيد

اكواد الالوان Html للمصممين

أكواد الألوان Html 

قم بإختيار اللون المناسب ثم إنسخ الكود الخاص باللون

قراءة المزيد

تحميل خطوط عربية وانجليزية لمحبى التصاميم روووووووووعة

بسم الله الرحمن الرحيم 

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

لتحميل الخطوط العربية اضغط هنا 

لتحميل الخطوط الانجليزية اضغط هنا 

قراءة المزيد

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

بسم الله الرحمن الرحيم 

تنفرد مدونة "الوان الويب" بتقديم مخطوطات رمضانية فى غاية الروعة تستخدم لعدة استخدامات فى تصاميم رمضان ( المجموعة الاولى )

 كل عام وانتم بخير بمناسبة الشهر الكريم ونسال الله تعالى ان يتقبل منا صيامنا

عند تحميل المخطوطات يوجد بداخلها اكثر من 70 شكل بطريقة فى غاية الروعة لاصحاب التصاميم

 لتحميل كل المخطوطات اضغط هنا

نسال الله عز وجل ان يكون الموضوع نال اعجابكم وشكرا لمتباعتكم لنا

قراءة المزيد

كيف تصمم شعار او لوجو من الحروف

بسم الله الرحمن الرحيم

كثير منا يحتاج الى تصميم شعار او لوجو خاص له . وفى الغالب ان الشركات الكبرى تعمل على اخذ اول حرفين لها وعمل 

شكل مميز بطريقة احترافية . معنا فى مدونة "الوان الويب" سوف نقوم بشرح طريقة عمل شعار او لوجو عن طريق 

برنامج الفوتوشوب 

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

اولا بعد التفكير جيد فى الاسم الذى ترغب فيه عليك ان تختار اسم يتماشى مع الاستخدام . اذا كان محل او شركة او منتج غذائى 

سوف استعرض معكم طريقة بسيطة وسهلة لعمل الحروف على شكل لوجو :-

1- قم بفتح برنامج الفوتوشوب واختار المقاسات كما مبين فى الصورة

2- سوف استعرض معكم طريقة لعمل اسم مدونة "الوان الويب" بطريقتى الخاصة بعد اختيار مقاس الصفحة
اختر font لعمل الاسم الخاص بالمدونة يكون بمظهر مختلف وجذاب اسم المدونة Colors Wep سوف تبداء بحرف C
اذا علينا اختيار font يجعل من حرف C شكل جذاب لقد قمت بكتابة الحرف C لتحمل الفونت من هنا 
بعد تحميل الفونت افتح الكنترول بانل سوف تجد كلمة fonts ضع الفونت بداخلها
سوف يظهر حرف C بهذا الشكل قم بتكبير الحرف

ثم اختار اللون المناسب لك من Gradient
ثم من قائمة Bevel and Emboss هذه القائمة تقوم بوضع تأثير على الاشكال من اطرافها
ثم من قائمة Stroke اختار اللون الاسمر حتى تعطيك اللون الموجود على  اطراف حرف C
بهذا نكون قد انتهينا من حرف C وجعلنا شكلة مناسب

ثم ناتى الى حرف W هذا ثانى حرف من كلمة Colors Wep لابد ان يكون له شكل مختلف باسلوب مختلف
حتى يعطى شكل مناسب لابد من اختيار فونت مختلف للحرف حتى يعطى شكل فية ابداع
ولقد قمت بتغير الفونت لحرف W لتحميل الفونت اضغط هنا

بعد كتابة حرف W اختر لون اخر للحرف وقم بعمل Stroke  لتحديدها بالون الاسود

ناتى الى حرف ep حتى ننتهى من كلمة Wep لقد استخدمت الفونت بتاع حرف C وقمت بنسخ الخصائص التى
فعلتها فى حرف C على حرف ep من خلال copy layer style ثم الذها الى اللير الخاص بكلمة ep ثم ضعها
past layer style
 

وبعد ذلك قمت بتحويل حرف ep الى صورة . اضغط كلك يمين ثم اختار Rasterize type  حتى يمكن التحكم فى تغير اللوان لك حرف بسهولة
ويمكن تغير اللوان لكل حرف على حدا ولكن هذه الطريقة سريعة فى الوقت

ناتى الى باقى كلمة Colors وهى olors لقد قمت بتغير الفونت لباقى هذه الكلمة ولكن لابد من تناسق الخطوط مع بعضها 
حتى تظهر الكلمة بشكل لائق

لقد قمت بكتابة olors فى layer اخر وقمت بعمل stroke اوختيار اللون الاسود للكلمة حتى تظهر من الخارج باللون الاسود
ثم قمت بعمل Bevel and Emboss حتى تعطى تأثير بارز بعض الشى للكلمة

ثم قم بتحويل layer الى صورة حتى تسطيع التحكم فى تغير اللوان الكلمة بسهولة من Rasterize type ثم قم بتحديد كل حرف
تريد تغير لونة كما مبين فى الصورة  بعد فتح لير جديد واختيار اللون قم بتلوين الجزء المحدد هذه الطريقة لتسريع عملية تغير
الالوان 

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

 ولكل منا ذوقة المختلف عن الاخر ولكن لابد من تناسق الالوان وحجم الكتابة حتى تبهر الناظر لها

نسال الله ان نكون قد افدناكم بهذا الدرس

قراءة المزيد