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

[Dark Gamer]

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

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

لتحميل الـ CoffeeCup HTML Editor
الحجم : 14.4 ميجا
===================
الدرس الأول
===================

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

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

1- أولا نقوم بقتح هذا الموقع
Colors Schemer

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

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://darkgamer.jeeran.com/coffeecup/drs-6.gif

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

8- بعد ما تختار الألوان اللي تبغاها ... اضغط على علامة التبويب Preview :


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

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]

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

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

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

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

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

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

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

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
بصراحة جهد تشكر عليه
و قاعد أحمل البرنامج للتجربة
بس بصراحة للحين مالقيت شئ يغلب dreamweaver
و جزاك الله ألف خير ,,,

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

[Dark Gamer]

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

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

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

العفــو

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

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

حلو .. وتراه ما ياخذ مساحة كبيرة ( 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



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

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]

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

شباب اعذروني ع التأخر في الدرس الخامس .. بسبب مشاكل في موقع التحميل

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

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


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

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

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

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



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

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

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

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

منور ..