احترف تصميم المواقع (بالامثلة)

[[Drunk Virus]]

مقدمة :
حقيقة .. يحزنني وضع اغلب المنتديات العربية المهتمة بتصميم المواقع ... فلا نجد اي اسئلة جيدة .. او حتى معلومات ... لاتتعدى طريقة التسجيل رفع الملفات او استخدام بعض البرامج ... والاسواء من هذا ... نجدها مليئة بالاعلانات ...
بشكل عام لايوجد اهتمام بتصميم المواقع سوا ببعض السكربتات الجاهزة ... nuke ... fourms ... تركيبها ادارتها ... وننتهي عند هذا الحد ...
انا لا اقصد ان مستوى المصمم العربي متواضع ... لكن اغلب المصممين يتجهون الى المنتديات الاجنبية ... وحتى لو حاول المساعدة هنا ... لن يجد اي تجاوب او حتى اهتمام ...
انا لا اصنف نفسي كمحترف ... بل مجرد مبتدأ احاول ان تبدؤا معي ...
لذلك افكر ان ابدأ بسلسلة بسيطة .. احاول شرح بعض الافكار ... لكن لا اعرف مستوى الاعضاء ... لذا سافترض ان لديهم معلومات حول html ...
--------------------------------------------------------------------------------------------------------
(( المنتدى اتجاه من اليمين الى اليسار ... لذا ارجوا نسخ اي كود الى برنامج نصوصو و تغيير الاتجاه لتستطيع قراءةته بالشكل الصحيح))
--------------------------------------------------------------------------------------------------------

= المؤشر
اكيد لاحظتوا بعض المواقع تقوم بتغيير المؤشر ... المسألة بسيطة ... نستخدم القليل من css ... لكن هناك نوعين من التغيير ... ممكن نغير المؤشر الى احد المؤشرات الموجودة اساسا (مثلا نغير المؤشر الى مؤشر الانتظار او المساعدة) الموجودة اساسا بنظام التشغيل ... ببساطة نظيف في اعلى الصفحة وتحديدا قبل <head/> ..
<style>
body{cursor:HELP);}
</style>
كما تلاحظ body مثل المتأثر بالتغيير ... نستطيع ادخال اي وسم اخر مثلا a ليتاثر بالتغيير اللنكات (الوصلات) او table تتاثر به الجداول .. و هكذا ...
HELP تمثل المؤشر المراد استخدامه هذه قائمة تمثل بعض المؤشرات (تختلف شكلها حسب نظام التشغيل)
help
hand
text
crosshair
wait
move
all-scroll
col-resize
no-drop
not-allowed
progress
row-resize
كما يمكن استخدام مؤشرات خاصة بك .. (ساقوم بتوفير بعض النماذج لاحقا) ببساطة بذل اسم المؤشر نضيف
url(myCur.cur)
حيث myCur.cur يمثل اسم المؤشر ومكان وجوده.... (لايدعم هذه الطريقة سوا ie6)
--------------------------------------------------------------------------------------------------------
بسبب ضيق الوقت ساكتفي بهذه المعلومة البسيطة ... ساكمل لاحقا ... بانتظار ملاحظاتكم ....

[absba]

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

تحياتي

[outlander]

السلام عليكم

جزاك الله خير أخي [Drunk Virus] على التركيز والأهتمام بهذا الجانب المهم في التصميم.

طيب بما أنك قمت بشرح بعض الاوامر , أريد ان أسئلك ماذا تقصد css هل هذا أختصار لشىء؟؟

أنت قلت :

= المؤشر
اكيد لاحظتوا بعض المواقع تقوم بتغيير المؤشر ... المسألة بسيطة ... نستخدم القليل من css ... لكن هناك نوعين من التغيير ... ممكن نغير المؤشر الى احد المؤشرات الموجودة اساسا (مثلا نغير المؤشر الى مؤشر الانتظار او المساعدة) الموجودة اساسا بنظام التشغيل ... ببساطة نظيف في اعلى الصفحة وتحديدا قبل <head/> ..

اقتباس:
--------------------------------------------------------------------------------
<style>
body{cursor:HELP);}
</style>
--------------------------------------------------------------------------------

بعد أتباع هذه الخطوة هل سوف أحصل على نتائج ؟؟


في انتظارك

[[Drunk Virus]]

اخي العزيز .. اشكرك لتفاعلك .. css هي اختصار ل cascading style sheets .. و هي قد نعتبرها لغة .. مهمتها تحديد شكل ظهور الاجسام بالصفحة .. اجمل مميزاتها امكانية و ضع ملف واحد و توصيله بكل الصفحات ومن هناك نتحكم بعرض كل الموقع ... و بالتالي سهولة التغيير بمجرد تغيير ملف واحد .... لوضع ال css بنفس الصفحة نضعه في قسم ال head .. و نضيف <style> و <style/> .. و بينهما نضيف css .... طريقة كتابته .. اول نكتب المتاثر من الخصائص . بالمثال و ضعت لكم body .. ممايعني كل الصفحة .. ممكن تضع مثلا a للتاثير على الوصلات ... او ان تضع جسم معين بواسطة تسميته (بالخاصية id) مثلا عندك جدول تضع داخل <table> ..
id=mytable ... سمينا الجدول mytable .. بواسطة الستايل نكتب بدل من body .. mytable# .. (نضيف # قبل الاسم) لنخبر المتصفح باننا نقصد الجدول هذا .....
بعدد تحديد المتاثر من الخصائص نفتح قوس { .. ثم نكتب الخاصية (بالمثال cursor) ثم : . ثم القيمة ... ثم ; .. اما ان نضيف خواص و قيم جديدة او ان نقفل القوس ...
اللغة بسيطة بس تحتاج شوية وقت تتعلم عليها .. اذا لقيت وقت بحالو اتكلم لكم عنها ...
----------------------------------------------------------------
اشكرك اخي "الحمادي" على ردك الجميل ....
------------------------------------------------------------------
• اضافة فلاش
كما تعلمون هناك طريقتين لاضافة الفلاش .. الطريقة القديمة .. وطريقة جديدة بعد اصدار HTML 4 ... بهذا المثال ساجمع بينهما .. لنستطيع دعم جميع المتصفحات
-------------------------------------------------------------------------
(( اذكر لاتنسخ الكود .. قص والصق ببرنامج تحرير نصوص اخر وغير الاتجاه ))
--------------------------------المثال---------------------------------
<object codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" width="Width" height="Height" align="Align" name="Name">
<param name="loop" value="Loop">
<param name="movie" value="FlashFile">
<param name="quality" value="Quality">
<param name="play" value="Play">
<embed src="FlashFile" type="application/x-shockwave-flash" width="Width" height="Height" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" quality="Quality" play="Play" align="Align" name="Name" loop="Loop">
</object>
---------------------------------------------------------------------------
FlashFile: موقع ملف الفلاش
Loop: تكرار الملف (true = ليتكرر طوال وقت عرض الصفحة) ( false = ليتم عرضه مرة واحد ثم يتوقف)
Quality: جودة الملف (best = الافضل ) ( high = عالية ) ( auto high = تلقائية عالية ) ( auto low = تلقائية منخفضة ) ( low = منخفضة )
Play: هل يعمل الملف بمجرد تحميل الصفحة ( true = نعم ) ( false = لا )
Name: اسم الفلاش ليتم مناداته بواسطة ********** او css (اذا لم تفهم تجاهله)
Align: اضف هذه الخاصية بحالة اردت تحديد وضع الملف ( center = وسيط ) ( left = الى اليسار ) ( right = الى اليمين )
Width: عرض الملف
Height: ارتفاع الملف

[[Drunk Virus]]

مثال بسيط في DHTML
انا احب التقنية هذي :D المثال بسيط جدا .. بس يحتاج شوية معلومات في html . و شوي تركيز ...
ممكن لاحظتوا ببعظ المواقع اذا حطيت الماوس على لنك مثلا يكون في مربع يطلع في كلام (غالبا شرح للنك) اذا شلت الماوس يروح ... الفكرة بسيطة جدا .. اول شي نسوي function جافا سكربت .. بحث اننا نناديها و نعطيها كلمات معينة لتضعها في المربع ...
الدالة function سنكتبها بهذا الشكل .. و طبعا سنضعها قبل <head/>
----------------------------------------
((انسخ الكود الى محرر نصوص وغير الاتجاه لتستطيع قراءته بالشكل الصحيح))
----------------------------------------
<script>
function writeIt(newText,objectID){
var dom;
if (document.getElementById){dom=document.getElementB yId(objectID)}
else if(document.all){dom=document.all[objectID]}
dom.innerHTML=newText;}
</script>
-------------------------------------------
شرح بسيط: اولا لاتحتاج فهمها لتستخدمها .. لكن ساحاول شرحها

-السطر الاول: <script> لنخبر المتصفح بان القادم عبارة عن سكربت (نستطيع اخباره باللغة المستخدمه لكن لاجل التبسيط لان اعقد المسالة لانه يستطيع اكتشاف ذلك)

-السطر الثاني: function ليعلم المتصفح باننا نريد انشاء دالة ... writeIt اسم انا اخترته لها (newText,objectID) هنا عبارة عن متغيرين نقوم بارسالها عند استدعاء الدالة (تخيل جهاز لتغيير قناة رادو مثلا .. نرسل له اسم الرادو و القناة الجديدة ثم يقوم بالمهمة) ثم وضعنا { لنبدأ بكتابة الدالة

-السطر الثالث: var dom; انشانا متغير لنسجل به عنوان المربع الذي سنغير محتواه ...

-السطر الرابع و الخامس: لا يوجد اي اهمية لفهمها حاليا ... ببساطة نقول للمتصفح اذا كان يدعم getElementById نستخدمها لايجاد عنوان objectID (سنرسله عند استدعاء الدالة) ... اذا لم يدعم هذه التقنية .. وكان يدعم all نستخدم هذا التقنية .. ((اذا كنت مبتدأ لايفترض ان تفهم :D ))

-السطر السادس: الان dom تحتوي العنوان .. نضع نقطة بعد dom م نكتب innerHTML اي اننا نريد الدخول الى الخاصية innerHTML في تلك ذلك الجسم المعطى عنوانه في dom ... innerHTML تحتوي كل مايوجد بين الوسمين اذا غيرناهما يتغير الكلام الموجود لذا نستبدلها بلمتغير newText الذي سنرسله عند استدعاء الدالة ...

(( الفكرة بسيطة لكن ممكن تظهر و كانها معقدة بالبداية لكن اعد اي شخص يمشي معي بانه باقل من اسبوع بيتعلم الكثييير ... ))

حتى الان كتبنا الدالة ... ساكمل طريقة مناداتها واستخدامها بالدرس القادم ....

[Q8LadY]

انا من المتابعين للموضوع :)

ياريت نتعلم اكثر

[outlander]

السلام عليكم


:(

اخي الكريم شكراً لك على التوضيح , ولكن أنا ما زلت أعاني من فهم ما تقصدة .. لعلك تشرح للمستويات التي هي فوق مستواي :D عشان كده أنا معلق ومش راضي الموضوع يعدي بسهولة.


شكراً لك

[[Drunk Virus]]

اخوي والله لاعيد الى ان تفهم ... مع اني اعتقد انك تحتاج شرح للغة نفسها .. لكن بعطيك مقدمة ...
------------------
CSS
-----------------
كما تعلمون اكثر مواقع الانترنت عبارة عن نصوص اساسا .. و بعض الصور والاصوات ... لكن جميل الملفات html php css cgi shtml ... كلها عبارة عن نصوص .. اهتمامنا هنا حول لغة html ... اللغة كما تعلم قديمة جدا جدا (بمقياس الانترنت طبعا) فكرتها ... عبارة عن اعلام (الحين قاعد اجيبك لك تشبيه :D الله يعينك) يعني تخيل عندنا نص نضعه بين علمين الاول يخبر المتصفح ان اي شي ياتي يتاثر فيه والثاني يخبر المتصفح ان تاثير الاول انتهى :D ممكن يوجد اعلام داخل الاعلام .. حاااول تتخيل ... لكن مايجوز انك تسوي شبكات ... يعني مثلا بدأ علم اسمه A ... و داخله بدا علم اسمه B ... لايجوز ان ينتهي A قبل B ... فهمت ... لذلك اي علمين يشكلون Object يعني جسم فهمت ... الجسم يحتوي نصوص او اجسام اخرى ... فكرة ال css اننا نسمي اي جسم بالصفحة (او اجسام) و نغير بخصائصها .. اللون المكان نوع الخط شكل الماوس عليه .. الخ ...
كيف نسمي جسم معين .. فيه ثلاث طرق ...

--------------------------
تحديد جسم (اجسام) بالصفحة
--------------------------
=الاولى: اننا نعطيه id .. تخيل انها بطاقة احوال .. طبعا بكل صفحة لايجوز ان نعطي اكثر من جسم نفس البطاقة ... كيف نعطيه بطاقة ؟؟ بسيطة داخل علم البداية للجسم نضيف id=MyID .. حيث MyID الاسم او البطاقة اللي بتعطيها لهذا الجسم .. (لاتنسى ترك فراغ قبل كتابة هذه الخاصية)

=الثانية: اننا نعطي جسم او عدة اجسام (تخيل) ثوب معين :D طبعا ممكن نلبس اكثر من جسن نفس الثوب لكن ما نقدر نلبس نفس الجسم اكثر من ثوب :D ... كيف نلبسه .. ببساطة نضيف class=MyClass .. طبعا MyClass تمثل اسم الثوب (لاتنسى ترك فراغ قبل كتابة هذه الخاصية)... و بواسطة css نتحكم بخواص الثوب .. مثلا نعطيه اللون الاحمر .. فاي جسن نلبسه الثوب يكون النص فيه بلون احمر ....

=الثالثة: اننا نحدد امر معين .. مثلا امر اللنكات a ... او امر الجداول table .. و نغير خصائصه .... بالطريقة هذي يتغير اي جسم بالصفحة بيدأ بهذا الامر ...

------------------------------------
مكان كتابة ال css .... سنناقش مكانين والثالث نتركه لاحقا ...
-------------------------------

=المكان الاول داخل الصفحة .. وقبل <head/> .. ببساطة نكتب <style> و نبدأ بكتابة css .. و بعد الانتهاء من كتابته نكتب <style/>

=المكان الثاني: في ملف خارجي ... لابد من ان يكون امتداده css. ..
ثم نضيف باعلى الصفحة المراد تطبيق الستايل الموجود بالملف الخارجي عليها
==========
((انسخ والصق بمحرر نصوص لتستطيع قراءته بالشكل السليم))
<link href="MyStyle.css" type="text/css" rel="stylesheet">
=========
MyStyle تمثل اسم الملف تغيره حسب اسم ملفك ....
(لاتنسى بالملف الخارجي لاتكتب <style>ولا <style/> مجرد ال css)

----------------------------------
طريقة كتابة ال css
---------------------------------
اولا نحدد المتأثر بالخصائص (بعد تطبيق الخطوات باول قسم من الدرس)
اذا كنا سنؤثر على جسم ببطاقة id .. نكتب # ثم البطاقة
واذا كنا سنؤثر على ثوب معين :D class نكتب . (نقطة) ثم اسم الثوب
اما اذا كنا سنؤثر على امر معين نكتب اسمه مباشرة
(في حالة اردت التاثير على اكثر من شي اكتب الاوا ثم فاصلة , ثم الثاني ثم فاصة وهكذا [تستطيع التاثير على عدة انواع بنفس الوق لكن لاتنسى الفاصلة])
بعد ان نحدد المتاثر نفتح قوس كبير { ثم نكتب جميع الخصائص ثن نقفله } ثم نحدد متاثر(او متاثرين)و نفتح قوس ثم الخصائص ثم نغلقه وهكذا ....

كيف نكتب الخصائص :D ... اسم الخاصية ثم : ثم القيمة ثم ; ثم اسم الخاصية الثانية ثم : ثم القيمة للخاصية الثانية ثم ; وهكذا.....
-------------------------------------------------------------------------------------
تبقى ان تعرف الخواص و قيمهم الممكنة :D بعطيك موقع يذكرهم جميعا ..
(عشان تجرب بعطيك مجموعة بسيطة :D )
color:اللون للنص في الجسم
font-size:حجم الخط
border-width: عرض الاطار (او الحدود)
...... :D
اذا فيه اي اسئلة لاتستحي :D