احترف تصميم المواقع مع CoffeeCup - دروس

[Dark Gamer]

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

الصراحة برنامج الـ Coffee Cup برنامج أكثر من رائع :)
وان شاء الله راح اقدم لكم بعض الدروس عن هذا البرنامج .. وان شاء الله تفيدكم الدروس وتصيرون محترفين في تصميم المواقع ;)

لتحميل الـ CoffeeCup HTML Editor (http://mercedes.coffeecup.com/CoffeeHTML2006.exe)
الحجم : 14.4 ميجا
===================
الدرس الأول
===================

بعنوان : كيف تصمم صفحة رئيسية لموقعك مع اضافة سكرول بار ( شريط التمرير )

****************

1- أولا نقوم بقتح هذا الموقع
Colors Schemer (http://colorschemer.com/online.html)

-------------------

2- افتح برنامج الـ Coffee Cup اللي هو ( CoffeeCup HTML Editor )
ونقوم بفتح صفحة جديدة :
http://darkgamer.jeeran.com/coffeecup/drs-1.gif

-------------------

3- وبعدين تضع هذي الألوان :
http://darkgamer.jeeran.com/coffeecup/drs-2.gif

-------------------

4- وبعدين .. اضغط على علامة التبويب Custom Scrollbars :
http://darkgamer.jeeran.com/coffeecup/drs-3.gif

-------------------

5- وبعدين ضع الـ Scrollbar و Arrow و Border و Background و Shadow باللون الأسود ( فقط للتجريب ) :
http://darkgamer.jeeran.com/coffeecup/drs-4.gif

-------------------

6- اضغط على Cool وراح يفتح لك صفحة اكواد .. شوف الاكواد اللي فيها Scrollbar بس :
http://darkgamer.jeeran.com/coffeecup/drs-5.gif

-------------------

7- الحين غير الكود اللي في بدايته علامة # لأنها الوان السكرول بار ... حطه باللون اللي يعجبك :
( ملاحظة : أكواد الألوان تلقاها من موقع Colors Schemer (http://colorschemer.com/online.html) )
http://darkgamer.jeeran.com/coffeecup/drs-6.gif

-------------------

8- بعد ما تختار الألوان اللي تبغاها ... اضغط على علامة التبويب Preview :
http://darkgamer.jeeran.com/coffeecup/drs-7.gif

-------------------

9- الحين روح خزن الصفحة من File >>> Save As
واحفظها باسم Index عشان لما ترفعها تكون صفحتك الرئيسية :)
http://darkgamer.jeeran.com/coffeecup/drs-8.gif

-------------------

.
.
.

انتهى الشرح للدرس الأول :)
وان شاء الله يكون شرح واضح

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

[H.Y.M]

ما شاء الله ،، الشرح جميل ،، و البرنامج أيضاً إمكانياته ممتازة ..

جزاك الله خير اخوي دارك ،، و أرجو مواصلة الدروس :)

---
لكن الموضوع مكانه ليس هنا ،، فتم نقله إلى المنتدى العام لتصميم و استضافة المواقع :)

[Dark Gamer]

الســلام


ما شاء الله ،، الشرح جميل ،، و البرنامج أيضاً إمكانياته ممتازة ..

الصراحة برنامج جميل جدا وسهل الاستخدام :)


جزاك الله خير اخوي دارك ،، و أرجو مواصلة الدروس :)

وياك ان شاء الله H.Y.M

وستتم مواصلة الدروس بإذن الله -.^


لكن الموضوع مكانه ليس هنا ،، فتم نقله إلى المنتدى العام لتصميم و استضافة المواقع :)


شـــــكرا ع النقل

الصراحة احترت وين أحطه ~.~

.
.

تسـلم ع المرور H.Y.M

منور الموضوع بردك -_^

والسـلام خير ختام ^^

[Dark Gamer]

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

في الدرس الأول عرفنا كيف نسوي الصفحة الرئيسية مع السكرول بار :)

والحين في الدرس الثاني راح تتعلمون كيف تضيفون نص مع وصلة
ملاحظة : الدرس سيتم على الصفحة الرئيسية التي تم تصميمها -_^

===================
الدرس الثاني
===================

بعنوان : كيف تضيف نص مع وصلة

****************

1- افتح صفحة الانديكس ( الصفحة الرئيسية )
http://darkgamer.jeeran.com/coffeecup/drs-9.gif

-------------------

2- اضغط على علامة التبويب Visual Editor
http://darkgamer.jeeran.com/coffeecup/drs-10.gif

-------------------

3- بعد الضغط سيطلب منك حفظ الصفحة .. احفظها وبعدين راح ينفتح لك الـ Visual Editor
http://darkgamer.jeeran.com/coffeecup/drs-11.gif

-------------------

4- اضغط على الـ Links
http://darkgamer.jeeran.com/coffeecup/drs-12.gif

-------------------

5- راح يفتح لك نافذة اضافة الوصلات :
http://darkgamer.jeeran.com/coffeecup/drs-13.gif

1) اكتب اي نص ..
2) ضع الوصلة للنص ..
3) اضغط هنا بعد الانتهاء ..

-------------------

6- راح يطلع لك النص وفيه الوصلة للموقع اللي انت كتبتها
http://darkgamer.jeeran.com/coffeecup/drs-14.gif

-------------------

7- احفظ الصفحة الرئيسية حتى يتم التعديل عليها في الدروس القادمة =)
للحفظ ( File >>> Save As )
http://darkgamer.jeeran.com/coffeecup/drs-15.gif

-------------------

انتهى الشرح للدرس الثاني :)
وان شاء الله يكون شرح واضح

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

[Dark Gamer]

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

شباب أعذروني لتأخر الدرس الثالث مع انه بسيط .. لأن كانت عندي أشغال واايد :dead:

المهم في الدرس الثاني عرفنا كيف نضيف نص مع وصلة :)

والحين في الدرس الثالث راح تتعلمون كيف تضيفون صورة مع وصلة
ملاحظة : الدرس سيتم على الصفحة الرئيسية التي تم تصميمها -_^

===================
الدرس الثالث
===================

بعنوان : كيف تضيف صورة مع وصلة

****************

1- افتح صفحة الانديكس ( الصفحة الرئيسية )

http://darkgamer.jeeran.com/coffeecup/drs-9.gif

-------------------

2- اضغط على علامة التبويب Visual Editor

http://darkgamer.jeeran.com/coffeecup/drs-10.gif


-------------------

3- اضغط على الـ الصور "Image"

http://darkgamer.jeeran.com/coffeecup/drs-16.gif

-------------------

4- راح تنفتح لك صفحة " اضافة الصور "

http://darkgamer.jeeran.com/coffeecup/drs-17.gif

1) سطح المكتب ..
2) الذهاب الى مستوى اعلى ..
3) مكان الصورة المراد وضعها ..
4) تصغير الصورة المراد وضعها ..
5) العرض ..
6) الطوال
7) اضافة وصلة للصورة ( اذا كنت لا ترغب في اضافة صورة .. اتركه فاضيا ) ..

اضغط على " Cool "
-------------------

5- راح تنوضع لك الصورة اللي اخترتها .. مع الوصلة اللي حطيها .. :)

http://darkgamer.jeeran.com/coffeecup/drs-18.gif

-------------------

6- احفظ الصفحة الرئيسية حتى يتم التعديل عليها في الدروس القادمة =)
للحفظ ( File >>> Save As )

http://darkgamer.jeeran.com/coffeecup/drs-15.gif

-------------------

انتهى الشرح للدرس الثالث :)
وان شاء الله يكون شرح واضح

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

[Cenrak]

السلام عليكم أخوي Dark Gamer
بصراحة جهد تشكر عليه
و قاعد أحمل البرنامج للتجربة :D
بس بصراحة للحين مالقيت شئ يغلب dreamweaver ;)
و جزاك الله ألف خير ,,, :)

هذا و الله أعلم
أخوكم Cenrak

[Dark Gamer]

السلام عليكم أخوي Dark Gamer

وعليـــكم الســلام والرحمـــة أخــوي Cenrak :)


بصراحة جهد تشكر عليه

العفــو

بس المهم يستفيد باقي الأعضاء :)


و قاعد أحمل البرنامج للتجربة :D

حلو .. وتراه ما ياخذ مساحة كبيرة ( 14 ميقا بس ) :أفكر:


بس بصراحة للحين مالقيت شئ يغلب dreamweaver ;)

ما عندي شي ضد الـ دريم ويفر

الصراحة برنامج Dream Weaver امكانيات عالية وجميلة :)

بس برنامج Coffee Cup برنامج بسيط .. وسهل ^_^


و جزاك الله ألف خير ,,, :)

وياك ان شاء الله أخــوي Cenrak :)

منور الموضوع بمرورك -_^

والســلام خير ختام

[Dark Gamer]

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

في الدرس الثالث عرفنا كيف نضيف صورة مع وصلة وبدون وصلة :)

والحين في الدرس الرابع راح تتعلمون كيف تضيفون كود " جافا سكربت " لصفحة الانديكس
ملاحظة : الدرس سيتم على الصفحة الرئيسية التي تم تصميمها -_^

===================
الدرس الرابع
===================

بعنوان : كيف تضيف كود " جافا

سكربت "

****************

1- افتح صفحة الانديكس ( الصفحة الرئيسية )

http://darkgamer.jeeran.com/coffeecup/drs-15.gif

-------------------

2- ستظهر لك أكواد كثيرة " وهي لستايل الصفحة " =)
اضغط على آخر نقطة بالصفحة .. واذا لم تعرف كيف ( انظر الى الصورة )

http://darkgamer.jeeran.com/coffeecup/drs-19.gif

-------------------

3- الآن سنضيف كود الـ " جافا سكربت " للصفحة

ادخل الكود :


<script language="JavaScript">
<!-- 3D_ish Space Trip Script
Nstars=10;
Ystars=new Array();
Xstars=new Array();
Sstars=new Array();
Dstars=new Array();
Brwsr=(document.layers)?1:0;
WinHeight=(document.layers)?window.innerHeight:window.document.body.clientHeight;
WinWidth=(document.layers)?window.innerWidth:window.document.body.clientWidth;
offvis=(document.layers)?'hide':'hidden';
onvis=(document.layers)?'show':'visible';
for (i=0; i < Nstars;i++)
{
Ystars[i]=WinHeight/2;
Xstars[i]=WinWidth/2;
Dstars[i]=Math.round(Math.random()*360);
Sstars[i]=Math.round(Math.random()*5+1);
}
if (Brwsr){
for (i=0; i < Nstars;i++)
document.write("<LAYER NAME='nstar"+i+"' TOP=0 LEFT=0 BGCOLOR=#BBBBBB WIDTH=1 HEIGHT=1></LAYER>");
}
else{
document.write('<div id="Outer" style="position:absolute"><div style="position:relative">');
for (i=0; i < Nstars;i++)
{document.write('<div id="istar" style="position:absolute;width:1px;height:1px;background:#bbbbbb;font-size:1px"></div>')}
document.write('</div></div>');
}
function fly(){
WinHeight=(document.layers)?window.innerHeight:window.document.body.clientHeight;
WinWidth=(document.layers)?window.innerWidth:window.document.body.clientWidth;
hscrll=(document.layers)?window.pageYOffset:document.body.scrollTop;
wscrll=(document.layers)?window.pageXOffset:document.body.scrollLeft;
for (i=0; i < Nstars;i++){
var layer=(document.layers)?document.layers["nstar"+i]:istar[i].style;
//Dstars[i]+=2; //Can spin using this!!
Ystars[i]+=Math.round(Sstars[i]*Math.sin(Dstars[i]*Math.PI/180));
Xstars[i]+=Math.round(Sstars[i]*Math.cos(Dstars[i]*Math.PI/180));
if ((Ystars[i] > WinHeight) || (Ystars[i] < 0 ) || (Xstars[i] > WinWidth) || (Xstars[i] < 0))
{
Ystars[i]=WinHeight/2;
Xstars[i]=WinWidth/2;
Dstars[i]=Math.round(Math.random()*360);
Sstars[i]=Math.round(Math.random()*1+2);
}
layer.top=Ystars[i]+hscrll;
layer.left=Xstars[i]+wscrll;
if ((Xstars[i] < (WinWidth/2)-10 ) || (Xstars[i] > WinWidth-(WinWidth/2)+10 ) ||
(Ystars[i] < (WinHeight/2)-10) || (Ystars[i] > WinHeight-(WinHeight/2)+10))
layer.visibility=onvis;
else
layer.visibility=offvis;
if ((Xstars[i] < WinWidth/2-WinWidth/9.5) || (Xstars[i] > WinWidth/2+WinWidth/9.5) ||
(Ystars[i] < WinHeight/2-WinHeight/9.5) || (Ystars[i] > WinHeight/2+WinHeight/9.5))
{
{
Sstars[i]+=1;
if (Brwsr) layer.bgColor='888888';
else layer.background='888888';
}
if ((Xstars[i] < WinWidth/2-WinWidth/8) || (Xstars[i] > WinWidth/2+WinWidth/8) ||
(Ystars[i] < WinHeight/2-WinHeight/8) || (Ystars[i] > WinHeight/2+WinHeight/8))
if (Brwsr) {layer.bgColor='999999';layer.clip.height=2;layer.clip.width=2}
else {layer.background='999999';layer.height=2;layer.width=2;layer.fontSize=2}
if ((Xstars[i] < WinWidth/2-WinWidth/6) || (Xstars[i] > WinWidth/2+WinWidth/6) ||
(Ystars[i] < WinHeight/2-WinHeight/6) || (Ystars[i] > WinHeight/2+WinHeight/6))
if (Brwsr) layer.bgColor='bbbbbb';
else layer.background='bbbbbb';
if ((Xstars[i] < WinWidth/2-WinWidth/4) || (Xstars[i] > WinWidth/2+WinWidth/4) ||
(Ystars[i] < WinHeight/2-WinHeight/4) || (Ystars[i] > WinHeight/2+WinHeight/4))
if (Brwsr) layer.bgColor='dddddd';
else layer.background='dddddd';
if ((Xstars[i] < WinWidth/2-WinWidth/2.5) || (Xstars[i] > WinWidth/2+WinWidth/2.5) ||
(Ystars[i] < WinHeight/2-WinHeight/2.5) || (Ystars[i] > WinHeight/2+WinHeight/2.5))
if (Brwsr){layer.bgColor='ffffff';layer.clip.height=3;layer.clip.width=3}
else {layer.background='ffffff';layer.height=3;layer.width=3;layer.fontSize=3}
}
else
{
if (Brwsr){layer.bgColor='999999';layer.clip.height=1;layer.clip.width=1}
else {layer.background='999999';layer.fontSize=1;layer.height=1;layer.width=1}
}
}
setTimeout('fly()',10);
}
window.onload=fly;
//-->
</script>

-------------------

4- ستظهر الصورة معك كالآتي :-

http://darkgamer.jeeran.com/coffeecup/drs-20.gif

-------------------

5- اضغط على علامة التبويب Preview

http://darkgamer.jeeran.com/coffeecup/drs-7.gif

-------------------

6- راح ينطبق الكود في الصفحة .. وراح تشوف تأثير للكود كالآتي :-

http://darkgamer.jeeran.com/coffeecup/drs-21.gif

( بس متحركة ;) )

-------------------

7- احفظ الصفحة الرئيسية حتى يتم التعديل عليها في الدروس القادمة =)
للحفظ ( File >>> Save As )

http://darkgamer.jeeran.com/coffeecup/drs-15.gif

-------------------

انتهى الشرح للدرس الرابع :)
وان شاء الله يكون شرح واضح

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

[H.Y.M]

جهد رائع ،، و تُشكر عليه يا Dark Gamer ..

و إن شاء الله قريباً تتم إضافة الموضوع إلى فهرس المواضيع المميزة :)

[Dark Gamer]

جهد رائع ،، و تُشكر عليه يا Dark Gamer ..

و إن شاء الله قريباً تتم إضافة الموضوع إلى فهرس المواضيع المميزة :)

الصراحة ما كنت متوقع ان موضوعي البسيط بيصير مميز ^__^

وما اعرف كيف أشـكرك أخـوي H.Y.M :)

يسـلمووووو

وان شاء الله راح اكمل الدروس :)

وشــكرا لمرورك حبيبي =)

منور -_^

[Dark Gamer]

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

شباب اعذروني ع التأخر في الدرس الخامس .. بسبب مشاكل في موقع التحميل http://www.montada.com/images/smilies/new_icons/dead.gif

المهم في الدرس الرابع عرفنا كيف نضيف كود " جافا سكربت " للخلفية :)

والحين في الدرس الخامس راح تتعلمون كيف تضيفون ساعة بالـ" جافا سكربت " للانديكس


===================
الدرس الخامس
===================

بعنوان : كيف تضيف ساعة بالـ" جافا سكربت "

****************

1- افتح صفحة الانديكس ( الصفحة الرئيسية )

http://darkgamer.jeeran.com/coffeecup/drs-9.gif

-------------------

2- ستظهر لك أكواد كثيرة " وهي لستايل الصفحة وكود الجافا للخلفية " =)
اضغط على آخر نقطة بالصفحة .. واذا لم تعرف كيف ( انظر الى الصورة )

http://darkgamer.jeeran.com/coffeecup/drs-22.gif

-------------------

3- الآن سنضيف الساعة للصفحة

ادخل الكود :


<HTML><HEAD><TITLE>Java Script Clock</TITLE>

<script langauge="JavaScript">

<!-- klocka p? sk?rmen och statusrad,STOPPA/STARTA

klockan -->

var timerID = null;

var timerRunning = false;

var id,pause=0,position=0;



function stopclock ()

{



if(timerRunning)



clearTimeout(timerID);



timerRunning = false;



}





function showtime ()

{



var now = new Date();

var hours = now.getHours();

var minutes = now.getMinutes();

var seconds = now.getSeconds()

var timeValue = "" + ((hours >12) ? hours -12 :hours)



timeValue += ((minutes < 10) ? ":0" : ":") + minutes

timeValue += ((seconds < 10) ? ":0" : ":") + seconds

timeValue += (hours >= 12) ? " P.M." : " A.M."

document.clock.face.value = timeValue;

window.status = timeValue;



timerID = setTimeout("showtime()",1000);



timerRunning = true;



}





function startclock ()

{

stopclock();

showtime();

}



</SCRIPT>

</HEAD>

<BODY BGCOLOR="white" onLoad="startclock ()">



<FORM name="clock" onSubmit="0">



<INPUT type="text" name="face" size="13" value="">

<font size=5><B><font color=black>



<INPUT TYPE="BUTTON" VALUE="قف" onClick="stopclock()">

<INPUT TYPE="BUTTON" VALUE="ابدأ" onClick="startclock()">



</FORM></BODY></HTML>

-------------------

4- ستظهر الصورة معك كالآتي :-

http://darkgamer.jeeran.com/coffeecup/drs-23.gif

-------------------

5- اضغط على علامة التبويب Preview

http://darkgamer.jeeran.com/coffeecup/drs-7.gif

-------------------

6- راح ينطبق الكود في الصفحة .. وراح تشوف تأثير للكود كالآتي :-

http://darkgamer.jeeran.com/coffeecup/drs-24.gif

* اضغط على الزر " ابدأ " لتشغيل الساعة :)
-------------------

7- احفظ الصفحة الرئيسية حتى يتم التعديل عليها في الدروس القادمة =)
للحفظ ( File >>> Save As )

http://darkgamer.jeeran.com/coffeecup/drs-15.gif

-------------------

انتهى الشرح للدرس الخامس :)
وان شاء الله يكون شرح واضح

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

[callcall]

يعطيك العافية الك

اتمنالك التوفيق

[Dark Gamer]

يعطيك العافية الك

اتمنالك التوفيق

الله يعافيك أخوي callcall ^_^

وان شاء الله استفدت من الدروس :)

منور ..

[سامي.خ]

الله يجزاك خير يا Dark Gamer

[Dark Gamer]

الله يجزاك خير يا Dark Gamer

وياك ان شاء الله أخوي ساموجي ^_^

واتمنى انك تستفيد من الدروس :)

منور ..

[Royal Slayer]

بصراحه يا اخى دروس فى غاية الروعه

وانا عملتها كلها معك

جزاك الله خيرا

انا دخلت دورات تصميم مواقع كثيره ولكنى لم ارى اسهل من شرحك

فى انتظار بقية الدروس

دمتم فى حفظ الله ورعايته،،

[d.o.d.y]

دروس رائعة وشرح أروع أخوي
حمستني اسوي بس بحمل البرنامج اولا ^^
جزاك الله الف خير ^^

[Dark Gamer]

===
Royal Slayer
===


بصراحه يا اخى دروس فى غاية الروعه

وانا عملتها كلها معك

تسـلم ع الاطراء .. هذا من ذوقك اخوي Royal Slayer ^^


انا دخلت دورات تصميم مواقع كثيره ولكنى لم ارى اسهل من شرحك

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


جزاك الله خيرا

وياك ان شاء الله اخوي =)


فى انتظار بقية الدروس

ستتم بإذن الله ..


دمتم فى حفظ الله ورعايته،،

امين ..

منور الموضوع اخوي ^__^

===
d.o.d.y
===



دروس رائعة وشرح أروع أخوي

تسلمين ع الاطراء اختي d.o.d.y :)


حمستني اسوي بس بحمل البرنامج اولا ^^

حياك الله .. والبرنامج تلقينه في بداية الموضوع =)


جزاك الله الف خير ^^

وياك ان شاء الله ..

منورة الموضوع اختي ^__^

[فارس دارين]

مشكووووووووووووووور ثانك

[Dark Gamer]

مشكووووووووووووووور ثانك

العفـو اخوي فارس دارين :)

;) U R Welcome

[بنت الاماكن2010]

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