Professional Documents
Culture Documents
و اﻟﺼﻼة و اﻟﺴﻼم ﻋﻠﻰ ﺳﯿﺪﻧﺎ ﻣﺤﻤﺪ اﻟﻨﺒﻲ اﻟﻜﺮﻳﻢ و ﻋﻠﻲ آﻟﻪ و ﺻﺤﺒﻪ
أﺟﻤﻌﯿﻦ
إھــــــــــﺪاء..
إھـــــﺪاء ﺧـﺎص..
ﻟﻤُﻄﻮﱢر ﻣﻮﻗﻌــًﺎ و أدارة و أﻋﻀـــﺎء و زاﺋﺮﻳﻦ
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
اوﻻ:
ﺛﺎﻧﯿﺎ:
-ﺷﺮح اﻟﻘﻮاﻟﺐ واﻟﺜﯿﻤﺎت اﻟﺨﺎﺻﺔ ﺑﺠﻤﻠﻪ)ﺗﺮﻛﯿﺒﮫﺎ-اﻟﺨﯿﺎرات وﺷﺮﺣﮫﺎ-ﻛﯿﻔﯿﺔ
اﻟﺘﻌﺪﻳﻞ(
-ﺑﺪءا ﻣﻦ ھﺬا اﻟﺠﺰء راح ﻧﻨﺘﻘﻞ ﻟﺠﺰﺋﯿﺔ اﻟﺘﺼﻤﯿﻢ واﻟﺘﻌﺪﻳﻞ ﻋﻠﻰ اﻟﻘﻮاﻟﺐ
ﻳﺸﻤﻞ ذﻟﻚ:
٢
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
-١ﺷﺮح ﻟﻜﯿﻔﯿـﺔ ﺗﺮﻛﯿـﺐ +اﻟﺘﻌﺎﻣـﻞ اﻟـﺴﺮﻳﻊ ﻣـﻊ اﻟﻤﺠﻠـﺔ ﻣـﻦ ﺣﯿـﺚ اﻷﺳـﺘﺨﺪام
-٢ﺗﻌﻠـــــــــــــــﻢ ﻓﻨـــــــــــــــﻮن ﺗـــــــــــــــﺼﻤﯿﻢ أﺟـــــــــــــــﺰاء اﻟﻤﺠﻠـــــــــــــــﺔ
-٣ﺗﻌﻠﻢ ﻛﯿﻔﯿﺔ اﻟﺘﻌﺪﻳﻞ ﻋﻠﻰ ﺑﻠﻮﻛﺎت اﻟﻤﺠﻠﺔ
وﻓﻰ اﻟﻨﮫﺎﻳﺔ راح ﻳﻜﻮن ﻓﯿﻪ ﻣﻮﺿﻮع ﻟﻠﻨﻘﺎش ﻟﻠﺮد ﻋﻠﻰ اﺳﺘﻔﺴﺎرات اﻻﻋﻀﺎء
ﻓﻰ ﻛﻞ درس ﻳﺘﻢ ﺷﺮﺣﻪ ،ﺣﺘﻰ ﻧﻮﺻﻞ اﻟﻤﻌﻠﻮﻣﺔ ﻟﻠﻤﺸﺘﺮك ﻓﻰ اﻟﺪورة ﺑﺄﻗﺼﻰ
درﺟﺔ
ﻣﻤﻜﻨﺔ.
ﻣﻊ اﻟﺘﺤﯿﺔ
أﺧﻮﻛﻢvista-design
٣
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
ﻣﺘﻄﻠﺒﺎت اﻟﺪورة
] [joomla1ﺷﺮح ﺗﻨﺼﯿﺐ اﻟﻤﺠﻠﺔ وﺗﺮﻛﯿﺒﮭﺎ ﻋﻠﻰ اﻟﺴﯿﺮﻓﺮ اﻟﻤﺤﻠﻰ أو ﻣﻮﻗﻌﻚ
] [joomla2ﺷﺮح ﻟﻮﺣﺔ ﺗﺤﻜﻢ اﻟﻤﺠﻠﺔ وﺗﻌﺮﻳﻒ ﻟﻠﻘﻮاﻟﺐ-اﻟﻤﻮدﻳﻼت-اﻟﻜﻮﻣﺒﻮﻧﯿﻨﺖ
] [joomla3ﺷﺮح اﻟﻘﺎﻟﺐ templateﺗﻌﺮﻳﻔﻪ-أﺟﺰاﺋﺔ اﻟﺒﺮﻣﺠﯿﺔ-اﻟﺒﻮﺳﺸﻨﺎت
] [joomla4ﺷﺮح ﺗﺼﻤﯿﻢ اﻟﮫﯿﺪر واﻟﻔﻮﺗﺮ ﻟﻠﻘﺎﻟﺐ واﻟﺘﻌﺪﻳﻞ ﻋﻠﯿﻪ
] [joomla5ﺷﺮح ال cssاﻟﺨﺎص ﺑﻜﻞ ﻗﺎﻟﺐ وﻛﯿﻔﯿﺔ اﻟﺘﻌﺪﻳﻞ ﻋﻠﯿﻪ
] [joomla6ﺷﺮح ﺗﻨﻈﯿﻢ أﻣﺎﻛﻦ اﻟﻤﻮدﻳﻼت+ﺗﻌﺪﻳﻞ ﺧﻄﻮط اﻟﻘﺎﻟﺐ ﻟﺮؤﻳﺔ أوﺿﺢ
] [joomla finalدرس ﺑﺮﻣﺠﺔ ﻗﺎﻟـﺐ ﻣﺠﻠـﺔ ﺟﻤﻠـﺔ ﺑﻨﻔـﺴﻚ ﻣـﻦ اﻟـﺼﻔﺮ )أﻗـﻮى درس ﻓـﻰ
اﻟﺪورة(
] [mkportal1ﺷﺮح ﺗﺮﻛﯿﺐ اﻟﻤﺠﻠﺔ ﻋﻠﻰ اﻟﺴﯿﺮﻓﺮ اﻟﻤﺤﻠﻰ وﺗﺸﻐﯿﻠﮫﺎ
] [mkportal2درس ﺗﺄﻃﯿﺮ وﺗﺼﻤﯿﻢ ﺑﻠﻮﻛﺎت اﻟﻤﺠﻠﺔ
ﻟﻠﺘﺤﻤﯿﻞ:
-2ﻣﺠــــﻠﺔjoomla
اﺿﻐــــﻂ ھـــﻨﺎ
-3ﻣﺠـــﻠﺔmkportal
اﺿﻐــــﻂ ھــــﻨﺎ
٤
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
اﺿﻐــﻂ ھﻨـــﺎ
ﻟﻠﺘﺤﻤﯿﻞ:
http://uploading.com/files/433Q5YNT/...part1.rar.html
http://uploading.com/files/W7GSIEB4/...part2.rar.html
http://uploading.com/files/4R4FXBKH/...part4.rar.html
http://uploading.com/files/G51ADMER/...part3.rar.html
اﻟﺴﯿﺮﻳﺎل :
http://uploading.com/files/SHED0RTX/key.rar.html
ﻣﻊ اﻟﺘﺤﯿﺔ
vista-design
٥
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
-١ﺑﻌﺪ ﺗﺮﻛﯿﺐ اﻟﺴﯿﺮﻓﺮ اﻟﻤﺤﻠﻰ(راﺟﻊ ھﺬا اﻟﺪرس ﻟﻤﻌﺮﻓﺔ ﻃﺮﻳﻘﺔ ﺗﺮﻛﯿﺐ اﻟﺴﯿﺮﻓﺮ
اﻟﻤﺤﻠﻰ),ﻗﻢ
ﺑﻌﻤﻞ ﻗﺎﻋﺪة ﺑﯿﺎﻧﺎت ﺟﺪﻳﺪه ﻟﻠﻤﺠﻠﺔ ﻣﻦphpmyadmin
٦
MTWER.COMﻣٌﻄﻮر
______________________________________________________
٧
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
٨
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
اﻟﯿﻮزر:admin
www.localhost/joomla/administrator
٩
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
اﻗﺘﺒﺎس:
Fatal error: Allowed memory size of 8388608 bytes exhausted (tried to
allocate 43 bytes) in
C:\AppServ\www\mnm\libraries\joomla\language\language.php on line
وﺳﺒﺐ ذﻟﻚ ان اﻟﺬاﻛﺮة اﻻﻓﺘﺮاﺿﯿﺔ ﻟﻠﺴﯿﺮﻓﺮ ﻏﯿﺮ ﻛﺎﻓﯿﺔ ﻟﺘﻨﺼﯿﺐ اﻟﻤﺠﻠﺔوﻟﺤﻠﮫﺎ
ﺷﻮف اﻟﺼﻮرة
١٠
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
ﺷﻮف...
اﺧﻮﻛﻢvista-design
١١
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
ﻓﻰ ھﺬا اﻟﺪرس راح ﻧﺸﺮح ﻟﻮﺣﺔ ﺗﺤﻜﻢ اﻟﻤﺠﻠﺔ واﻟﺘﻌﺮف ﻋﻠﻰ وﻇﯿﻔﺔ اﻻﻏﺮاض
اﻟﻤﮫﻤﺔ اﻟﺘﻰ راح ﻧﺴﺘﺨﺪﻣﮫﺎ ﻓﯿﻤﺎ ﺑﻌﺪ
١٢
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
١٣
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
ﻣﺜﺎل :ﻛﻮﻣﺒﻮﻧﯿﻨﺖ اﻟﺘﻌﻠﯿﻘﺎت اﻟﺬى ﻳﺘﻢ ﺗﺮﻛﯿﺒﻪ ﻟﻌﻤﻞ ﺗﻌﻠﯿﻘﺎت ﻋﻠﻰ اﻟﻤﻘﺎﻻت
ﻣﺜﻞ ﻣﻌﺮض اﻟﺼﻮر ﻓﮫﻮ ﻛﻮﻣﺒﻮﻧﯿﻨﺖ ﻻﺑﺪ ﻣﻦ ﻋﻤﻞ ﻗﺴﻢ وﻓﺮع ﺣﺘﻰ ﺗﻨﺪرج اﻟﺼﻮر
ﻓﯿﻪ )ﺳﻮف ﻳﺸﺮح ﻓﻰ اﻟﻔﯿﺪﻳﻮ ﻓﻰ ﻧﮫﺎﻳﺔ اﻟﺪرس)
دﻋﻮﻧﺎ ﻧﺘﺎﺑﻊ ھﺬا اﻟﻔﯿﺪﻳﻮ وﻧﺸﻮف ﻛﯿﻔﯿﺔ ﺗﺮﻛﯿﺐ ﻛﻞ اﺿﺎﻓﺔ ﻣﻊ ﻣﺜﺎل ﺣﻰ ﻟﮫﺎ
ﻟﺘﺤﻤﯿﻞ اﻟﻔﯿﺪﻳﻮ:
اﺿﻐــــﻂ ھـــــﻨﺎ
اﺿﻐــــــﻂ ھــــــــﻨﺎ
اﻟﻤﻄﻠﻮب ﻣﻦ اﻻﻋﻀﺎء:
ﺗﺮﻛﯿﺐ ﻣﻮدﻳﻞ اﻟﺴﻼﻳﺪ ﺷﻮ اﻟﻤﺮﻓﻖ ورؤﻳﺔ ﺻﻮره ﻟﺨﯿﺎرات اﻟﺘﺤﻜﻢ وﻣﻜﺎﻧﻪ ﻋﻠﻰ
رﺋﯿﺴﯿﺔ اﻟﻤﺠﻠﺔ
١٤
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
ﻓﻰ ھﺬا اﻟﺪرس راح ﻧﻨﻄﻠﻖ ﺧﻄﻮة ﺑﺨﻄﻮة ﻓﻰ ﻃﺮﻳﻖ ﺗﻌﻠﻢ ﺗﺼﻤﯿﻢ وﺗﻌﺪﻳﻞ
ﻗﻮاﻟﺐ ﺟﻤﻠﺔ ﻣﺜﻞ ﻣﺎ ﻳﺤﻠﻮ ﻟﻚ
أوﻻ :ﺗﻌﺮﻳﻒ اﻟﻘﺎﻟﺐ :ﺑﻜﻞ إﺧﺘﺼﺎر ھﻮ اﻟﺜﯿﻢ اواﻻﺳﺘﺎﻳﻞ اﻟﺬى ﻳﻐﯿﺮ اﻟﺸﻜﻞ اﻟﻌﺎم
ﻟﻠﻤﺠﻠﺔ
أﺟﺰاﺋﻪ:
اى ﻗﺎﻟﺐ ﻳﺘﻢ ﺗﺮﻛﯿﺒﻪ ﻟﻪ اﻻﺟﺰاء اﻻﺗﯿﻪ ﺑﺎﻟﻨﺴﺒﺔ ﻟﻠﺨﯿﺎرات ﻓﻰ ﻟﻮﺣﺔ اﻟﺘﺤﻜﻢ:
ﻟﻨﺮى اﻟﺼﻮره:
١٥
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
ﺑﻌﺪ اﻟﺘﻌﺮف ﻋﻠﻰ أﺟﺰاء اﻟﻘﺎﻟﺐ ﺧﻠﻮﻧﺎ ﻧﻌﺮف ﻧﻘﻂ ﻣﮫﻤﻪ وھﻰ:
ﻟﺬﻟﻚ ،اى ﻗﺎﻟﺐ ﻳﺘﻢ ﺑﺮﻣﺠﺘﮫﺎ ﻣﻦ اى ﺷﺮﻛﺔ ،ﻳﻜﻮن ﻣﺪﻋﻮم ﺑﺄﻣﺎﻛﻦ او ﺑﻮﺳﺸﻨﺎت
ﺗﺘﯿﺢ ﻟﻚ اﺧﺘﯿﺎر اﻻﻣﺎﻛﻦ ﺑﺴﮫﻮﻟﺔ
١٦
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
وﻃﺒﻌﺎ راح ﺗﻔﯿﺪك ﻋﻨﺪﻣﺎ ﺗﺮﻳﺪ اﺧﺘﯿﺎر ﻣﻜﺎن ﻟﻤﻮدﻳﻞ ﻣﺎ وﻟﯿﻜﻦ اﻟﺴﻼﻳﺪ ﺷﻮ
١٧
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
١٨
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
-١اﻟﮫﯿﺪر:
ﺷﻮف :
١٩
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
ﻃﺒﻌﺎ أﻧﺎ ﺷﺮﺣﺖ أﺟﺰاء اﻟﻘﺎﻟﺐ ﺑﺮﻣﺠﯿﺎ ,ﺣﺘﻰ ﺗﺴﺘﻔﺎد ﻣﻨﮫﺎ ﻓﻰ اﻻﺗﻰ:
ﺗﺤﯿﺎﺗﻰvista-design
٢٠
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
ﻓﻰ ھﺬا اﻟﺪرس راح ﻧﺘﻌﺮف ﻋﻠﻰ ﻛﯿﻔﯿﺔ ﺗﺼﻤﯿﻢ اﻟﮫﯿﺪر واﻟﻔﻮﺗﺮ ﻋﻠﻰ اى ﻗﺎﻟﺐ
ﺗﺮﻳﺪه
واﻧﺎ ﻓﻰ ھﺎﻟﻤﺜﺎل راح اﺻﻮر اﻟﺸﺎﺷﺔ ﻋﻨﺪى ،وراح أﺧﺬ اﻟﮫﯿﺪر اﻟﺨﺎص ﺑﺎﻟﻤﻮﻗﻊ
ھﻨﺎ ﻣﻄﻮر
٢١
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
ﺑﻌﺪ ﻣﺎ ﻗﻄﻌﻨﺎ
ﺑﻌﺪﻳﻦ ﻧﺨﺘﺎرsave
وﻧﺨﺘﺎر ﻣﺜﻞ اﻻﺗﻰ:
٢٢
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
ﺷﻮف.........
٢٣
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
٢٤
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
1-ﻗﻒ ﻋﻠﻰ اﻟﺠﺪول اﻻوﺳﻂ،ﺛﻢ اﺿﻐﻂ ﻛﻠﯿﻚ ﻣﺮﺗﯿﻦ ،راح ﺗﻔﺘﺢ ﺧﺎﻧﺔ’،
اﺧﺘﺎر generalﻣﻦ ﻓﻮق واﻧﺴﺦ راﺑﻂ اﻟﺼﻮرة اﻟﻮﺳﻄﻰ
٢٥
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
اﻟﺤﯿﻦ ﺑﻌﺪ ﻧﺴﺦ راﺑﻂ اﻟﺼﻮرة اﻟﻮﺳﻄﻰ ،ﻧﻘﻮم ﺑﺤﺬف ھﺬه اﻟﺼﻮرة ﻣﻦ ﺟﺪوﻟﮫﺎ
ﺛﻢ وأﻧﺖ واﻗﻒ ﻋﻠﻰ ﻧﻔﺲ اﻟﺠﺪول اﻻوﺳﻂ ﺑﻌﺪ ﻣﺎ ﺣﺬﻓﻨﺎ اﻟﺼﻮرة اﻟﻮﺳﻄﻰ
اﻟﺨﺎﺻﺔ ﺑﻪ
٢٦
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
٢٧
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
ﺷﻮف,,,,,,,,
اﺿﻐﻂ ﻋﻠﻰ اﻟﺼﻮرة اﻟﯿﺴﺮى ﻣﺮﺗﯿﻦ ،ﺛﻢ اﺣﻔﻆ ﻣﻘﺎﺳﺎت اﻟﺼﻮرة ﻓﻰ ﺑﺎﻟﻚ
٢٨
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
٢٩
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
اﻟﺤﯿﻦ ارﺟﻊ ﻟﺨﺎﻧﺔ اﻟﻜﻮد codeﻣﻦ اﺳﻔﻞ ،ﺛﻢ اﻧﺴﺦ اﻟﻘﺎﻟﺐ واﺳﺘﺒﺪﻟﻪ ﺑﺪل اﻟﻠﻰ
ﻓﻰ ﻟﻮﺣﺔ اﻟﺘﺤﻜﻢ وﺳﻮى ﺣﻔﻆ
٣٠
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
ﻻن اﻟﺪرس اﻟﻘﺎدم راح ﻳﻜﻮن ﺧﺎص ﺑﻜﯿﻔﯿﺔ ﺗﻌﺪﻳﻞ رواﺑﻂ اﻟﺼﻮر
اﻟﻤﻄﻠﻮب ﻣﻦ اﻻﻋﻀﺎء:
٣١
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
ﻃﺒﻌﺎ اﻧﺎ ﻣﺎراح اﻋﻘﺪ اﻟﻤﻮﺿﻮع واﺟﻌﻞ اﻟﻤﻮﺿﻮع ﻛﻠﻪ ﺑﺮﻣﺠﺔ،ﻻﻧﻰ اﻋﻠﻢ ﺗﻤﺎﻣﺎ
ان ال cssﺣﺘﻰ ﺗﻔﮫﻤﻪ ﻻزم ﺗﻜﻮن ﻓﺎھﻤﻪ ﺑﻔﻜﺮة ﺑﺮﻣﺠﯿﺔ وﻟﯿﺲ ﺗﺼﻤﯿﻢ ،ﻻن ھﺬا
ﺑﯿﺴﮫﻞ ﻣﻠﯿﻮن ﻣﺮه ﺳﺮﻋﺔ اﻟﺘﻌﺪﻳﻞ ﻋﻠﻰ اى ﻗﺎﻟﺐ
ﻟﻦ اﺗﻜﻠﻢ ﻛﺜﯿﺮ ﻋﻦ ﻣﻌﻨﺎھﺎ واﻻﻛﺜﺎر ﻣﻦ اﻟﻜﻼم اﻟﻨﻈﺮى ﻻن اﻟﻠﻰ ﻳﮫﻤﻨﻰ اﻧﻚ
ﺗﻌﺮف ﺷﻰء ﻋﻤﻠﻰ
اوﻻ :اى ﻗﺎﻟﺐ ﻋﻨﺪ ﺗﺮﻛﯿﺒﻪ ﻋﻠﻰ ﺟﻤﻠﺔ ،ﻋﻨﺪﻣﺎ ﺗﺬھﺐ ﻟﻞ template manager
وﺗﺨﺘﺎر اى ﻗﺎﻟﺐ
ﺷﻮف....
٣٢
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
واﻧﺎ راح اﺗﻜﻠﻢ ﻋﻠﻰ ﻋﺪة ﻧﻘﻂ ﻣﮫﻤﺔ راح ﺗﺨﻠﯿﻚ ﺗﻔﮫﻢ الcss
-1اى ﻣﻠﻒ cssراح ﺗﺠﺪ ﺑﺪاﺧﻠﻪ اﻧﻪ ﻣﺠﺰء ﻻﺟﺰاء ،وﻳﻜﻮن ﻟﮫﺎ ﻋﻨﻮان،وﻛﻞ ﺟﺰء
ﻳﻮﺟﺪ ﻛﻮد ال cssاﻟﺨﺎص ﺑﻪ
٣٣
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
وﻳﻘﺼﺪ ﺑﻪ اﻧﻪ ھﺬا اﻟﺠﺰء ﺧﺎص ﺑﺎﻟﺘﻌﺪﻳﻞ ﻋﻠﻰ ﻣﻨﻄﻘﻪ اﻟﮫﯿﺪر اﻟﺨﺎﺻﺔ ﺑﺎﻟﻘﺎﻟﺐ
ﻣﻨﮫﺎ:
backgroundاﻟﺨﻠﻔﯿﺔ
bodyاﻟﺠﺴﻢ
borderﺣﺪود اﻟﺠﺪول او اﻟﺒﻠﻮك
font-sizeﺣﺠﻢ اﻟﺨﻂ
font-familyﻧﻮﻋﯿﺔ اﻟﺨﻂ
٣٤
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
٣٥
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
ﺛﺎﻟﺜﺎ :ﻋﻨﺪﻣﺎ ﺗﺮﻳﺪ ﺗﻐﯿﯿﺮ ﻟﻮن اى ﻣﻨﻘﻄﺔ ،ﻓﺄﻧﮫﺎ ﻟﻜﻞ ﻟﻮن رﻗﻢ ﻣﻌﯿﻦ
اﻓﺘﺢ اﻟﻔﻮﺗﻮﺷﻮب
وﺷﻮف..........
٣٦
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
ﻣﺜﻼ راح ﺗﺠﺪ ان اول اﻟﻘﺎﻟﺐ ﻳﺒﺪأ ﺑﺴﻮرس ال bodyاى ﺟﺴﻢ اﻟﻘﺎﻟﺐ
٣٧
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
ﺑﻌﺪﻳﻦ ﻓﯿﻪheader
ﺑﻌﺪﻳﻦfooter
وھﻜﺬا...........
ﻃﺒﻌﺎ ﻻزم ﺗﺠﺮب ﻣﺮه واﺗﻨﯿﻦ وﻋﺸﺮة ﻟﺤﺪ ﻣﺎ ﺗﺒﺪأ ﺗﺄﺧﺬ ﻋﻠﻰ اﻟﻤﻮﺿﻮع وﺗﺘﺄﻗﻠﻢ
ﻣﻌﺎه
ﺗﺤﯿﺎﺗﻰ
٣٨
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
ﻧﺴﺘﻜﻤﻞ ﻣﻌﻜﻢ ﻣﺸﻮار اﻟﺪورة وھﺎﻗﺪ اوﺷﻜﻨﺎ ان ﻧﻨﺠﺰ اﻟﻌﻤﻞ اﻟﺬى ﺑﺪأﻧﺎ ﺑﻪ
ﻓﻰ ھﺬا اﻟﺪرس راح ﻧﺘﻌﺮف ﻋﻠﻰ ﻛﯿﻔﯿﺔ ﺗﻨﻈﯿﻢ أﻣﺎﻛﻦ اﻟﻤﻮدﻳﻼت ﻟﻠﻤﺠﻠﺔ
ﻣﺠﻠﺪ اﻟﻘﺎﻟﺐtemplate
٣٩
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
ﺑﺤﯿﺚ ﻋﻨﺪ ﺗﻨﺼﯿﺐ اﻟﻤﺠﻠﺔ راح ﺗﺠﺪ اﻟﻘﺎﻟﺐ رﻛﺐ اوﺗﻮﻣﺎﺗﯿﻚ دون ﺗﺪﺧﻞ ﻣﻨﻚ
ﻟﮫﺎ ﻣﯿﺰة ﻛﺒﯿﺮة ،وھﻰ اﻧﻚ ﺑﺘﻨﺼﯿﺐ quick startﺑﺪﻻ ﻣﻦ ﺗﺮﻛﯿﺐ اﻟﻘﺎﻟﺐ ﺑﻌﺪ
ﺗﻨﺼﯿﺐ اﻟﻤﺠﻠﺔ ،راح ﺗﺠﺪ ان positionsاى اﻣﺎﻛﻦ اﻟﻤﻮدﻳﻼت ﻛﻠﮫﺎ ﻣﻮﺟﻮدة
٤٠
MTWER.COMﻣٌﻄﻮر
______________________________________________________
٤١
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
٤٢
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
ﺛﻢ ﻧﺨﺘﺎرtemplate.css
ﺷﻮف......
٤٣
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
ﻛﻮد:
;font-family: "Tahoma", Arial, Tahoma, sans-serif
ال "" ﻣﻔﯿﺪة ﺣﺘﻰ ﺗﻌﺘﻤﺪ ھﺬا اﻟﺨﻂ ھﻮ اﻟﺨﻂ اﻟﺮﺳﻤﻰ ﻟﻠﻘﺎﻟﺐ
٤٤
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
ﻗﺒﻞ:
ﺑﻌﺪ:
ﺷﻮﻓﺘﻮا اﻟﻔﺮق:
أروع
٤٥
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
ﺑﮫﺬا اﻟﺪرس اﻻﺧﯿﺮ راح ﻧﺨﺘﻢ اﻟﻠﻘﺎء ﻣﻊ ﻣﺠﻠﺘﻨﺎ اﻟﺮاﺋﻌﺔ joomla ,وﺑﻌﺪھﺎ ﻧﻨﺘﻘﻞ
ﻟﺸﺮح ﻣﺠﻠﺔmkportal
ھﺬا اﻟﺪرس ﻟﻢ ﻳﺸﺮح ﻣﻦ ﻗﺒﻞ ،واﻟﺪرس راح ﻳﻜﻮن ﻻول ﻣﺮه ﻻﻋﻀﺎء اﻟﺪورة ﻓﻘﻂ
1-ﻣﻠﻒtemplatedetails.xml
2-ﻣﻠﻒindex.php
#ﺻﻮره ١
٤٦
MTWER.COMﻣٌﻄﻮر
______________________________________________________
:ﻛﻮد
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN"
"http://dev.joomla.org/xml/1.5/template-install.dtd">
<install version="1.5" type="template">
<name>temp_mtwer</name>
<creationDate>31-01-2009</creationDate>
<author>Nettut Fan</author>
<authorEmail>your@email.com</authorEmail>
<authorUrl>http://www.siteurl.com</authorUrl>
<copyright>You 2009</copyright>
<license>GNU/GPL</license>
<version>1.0.0</version>
<description>temp_mtwer</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>css/template.css</filename>
</files>
<positions>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>footer</position>
</positions>
</install>
٤٧
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
ﻛﻮد:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
>"transitional.dtd
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php
">? ;echo $this->language; ?>" lang="<?php echo $this->language
>
><head
><jdoc:include type="head" /
></head
اﺷﺮح اﻟﻜﻮد :اول ﻋﺒﺎرة doctyype...ھﻰ ﻋﺒﺎرة ﻣﮫﻤﻪ ﺟﺪا ﺗﺴﺘﺨﺪم ﻓﻰ اى
ﻣﻠﻒ اﻧﺪﻛﺲ ﺑﺎﻟﺬات
وﻓﺎﺋﺪﺗﮫﺎ اﻧﮫﺎ ﺗﺤﺎﻓﻆ ﻋﻠﻰ اﺑﻌﺎد اﻟﺘﻨﺴﯿﻖ ﺑﺎﻟﻈﺒﻂ ﻣﺜﻞ ﻣﺎ ﺳﻮﻳﻨﺎھﺎ ﻓﻰ ﻣﻠﻒcss
#########################
ﻣﺜﺎل ﻧﻈﺮى ﻟﻼﻃﻼع ﻓﻘﻂ:
ﻟﻮ وزﻋﻨﺎ اﻟﻌﺮض اﻟﻜﻠﻰ ٥٠٠ﻋﻠﻰ ھﺬه اﻟﻤﻨﺎﻃﻖ ﻓﺮاح ﺗﻜﻮن ﻋﻠﻰ ﺳﺒﯿﻞ اﻟﻤﺜﺎل
ﻛﺎﻻﺗﻰ:
ﻣﻦ ھﻨﺎ ﺟﺎءة ﻓﺎﺋﺪة اﻟﺠﻤﻠﺔ ھﺬه ﺣﺘﻰ ﻣﺎ ﺗﺴﺘﮫﺒﻞ اى ﻣﺘﺼﻔﺤﺎت وﺗﻀﯿﻒ اى
٤٨
MTWER.COMﻣٌﻄﻮر
______________________________________________________
#######################
ﻧﺄﺗﻰ ﻟﺠﻤﻠﺔ
PHP:ﻛﻮد
<jdoc:include type="head" />
:ﻛﻮد
<jdoc:include type="component" />
ﻟﻠﺼﻔﺤﺔ ﺑﺤﯿﺚ راح ﻳﺼﺒﺢ اﻟﻜﻮد ﻛﺎﻣﻼ ھﻜﺬاbody وﻟﻜﻦ ﻓﻰ
:ﻛﻮد
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php echo $this->language; ?>" lang="<?php echo
$this->language; ?>" >
<head>
<jdoc:include type="head" />
</head>
<body>
</body>
</html>
٤٩
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
#ﺻﻮره ٢
#ﺻﻮره ٣
واو ﺟﻤﯿﻞ
٥٠
MTWER.COMﻣٌﻄﻮر
______________________________________________________
:ﻛﻮد
<positions>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>footer</position>
</positions>
ﻛﯿﻒ؟
:ﻛﻮد
<jdoc:include type="modules" name="left" />
:ﻛﻮد
<jdoc:include type="modules" name="footer" />
:ﺑﺤﯿﺚ ﻳﺼﺒﺢ اﻟﻜﻮد ﻛﻠﻪ ﻛﺎﻻﺗﻰ
:ﻛﻮد
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php
echo $this->language; ?>" lang="<?php echo $this->language; ?>"
>
<head>
٥١
MTWER.COMﻣٌﻄﻮر
______________________________________________________
<body>
اﻟﺤﯿﻦ ﻧﺮﻳﺪ اﻇﮫﺎر ﻛﻮد اﻟﻔﻮﺗﺮ ﻋﻠﻰ ﺳﺒﯿﻞ اﻧﻪ ﻏﯿﺮ ﻣﻮﺟﻮد ﻣﻦ ﻗﺒﻞ
٥٢
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
#ﺻﻮره ٥
ﻧﺨﺘﺎر اﻟﺒﻮﺳﺸﻦfooter
#ﺻﻮره ٦
ﻃﺒﻌﺎ ھﺎﻻﺷﯿﺎء ﻛﺎﻧﺖ ﻣﻮﺟﻮده ﻻﻧﻨﺎ ﻧﺼﺒﻨﺎھﺎ ﻟﻤﺎ اﺧﺘﺮﻧﺎ ﻋﺒﺎرة install simple
٥٣
MTWER.COMﻣٌﻄﻮر
______________________________________________________
ﻛﻞ ﺟﺰء ﻋﻠﻰ ﺣﺪا ﺣﺘﻰindex.php ﻟﻜﻦ ﻗﺒﻞ ذﻟﻚ ﻧﺮﻳﺪ ان ﻧﺤﺪد ﻓﻰ ﻣﻠﻒ ال
ﻋﻠﯿﻪcss ﻧﺤﺪد اﻟﺠﺰء اﻟﻤﺮاد اﻻﺧﺘﯿﺎر وﺗﻨﻔﯿﺬ الcss ﻓﻰ ﻛﻮد
<body>
<div id="container">
<div id="header"><jdoc:include type="modules" name="top" />
</div>
<div id="sidebar_left" class="float"><jdoc:include type="modules"
name="left" /></div>
<div id="content" class="float">
<jdoc:include type="component" />
</div>
<div id="sidebar_right"class="float"><jdoc:include type="modules"
name="right" /></div>
<div id="footer" class="clear"><jdoc:include type="modules"
name="footer" /></div>
٥٤
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
></div
></body
></html
#ﺻﻮره ٨
ﻛﻮد:
{*
;padding: 0
;margin:0
}
{ ul
;list-style:none
}
{ .float
;float: left
}
{ .clear
;clear: both
}
{ #container
;width:960px
٥٥
MTWER.COMﻣٌﻄﻮر
______________________________________________________
margin: auto;
}
#header {
background-color:#999999;
height: 150px;
}
#content {
width: 660px;
text-align: center;
}
#sidebar_left {
text-align: center;
background-color:#CCCCCC;
width: 150px;
}
#sidebar_right {
background-color:#CCCCCC;
width: 90px;
}
#footer {
background-color:#999999;
text-align:center;
}
module managerﻧﺮوح ل
newﺛﻢ
٥٦
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
ﺑﮫﯿﻚ ﻳﻜﻮن اﻧﺘﮫﻰ درﺳﻨﺎ ﻋﻠﻰ أﻣﻞ ان ﺗﻜﻮﻧﻮا ﻋﺮﻓﺘﻮا ﻃﺮﻳﻘﺔ ﻋﻤﻞ ﻗﻮاﻟﺐ ﺟﻤﻠﺔ
ﺑﺒﺴﺎﻃﺔ
وﻓﻰ دروس ﻗﺎدﻣﺔ راح ﻧﺤﺎول ﻧﺘﻌﻤﻖ ﻟﻌﻤﻞ ﻗﺎﻟﺐ اﺣﺘﺮاﻓﻰ ﻣﻦ اﻟﺪرﺟﺔ اﻷوﻟﻰ
ﺗﺤﯿﺎﺗﻰ
٥٧
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
ifile.it
اﺿﻐــــﻂ ھـــﻨﺎ
ﺑﻌﺪ اﻟﺘﺤﻤﯿﻞ:
-2ﺑﻌﺪ وﺿﻊ ﻣﺠﻠﺪ اﻟﻤﺠﻠﺪ ﻓﻰ > wwwﻓﻚ اﻟﻀﻐﻂ وراح ﺗﺠﺪ ﻣﺠﻠﺪ > upload
٥٨
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
ﻛﻮد:
C:\AppServ\www\upload\mkportal\include
٥٩
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
ﻛﻮد:
http://localhost/upload/mkportal/mk_install.php
٦٠
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
-7ﻧﻜﻤﻞ اﻟﺘﻨﺼﯿﺐ..............
٦١
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
10-ﻧﻜﻤﻞ اﻟﺘﻨﺼﯿﺐ...........
٦٢
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
ﺗﺤﯿﺎﺗﻰ
ﻧﺮﺟﻮ ﻣﻦ اﻟﺠﻤﯿﻊ ﺗﻄﺒﯿﻖ اﻟﺪرس وﺗﺮﻛﯿﺐ اﻟﻤﺠﻠﺔ +وﺿﻊ ﺻﻮرة ﻟﻠﻤﺠﻠﺔ ﻋﻨﺪك
٦٣
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
اول ﺷﻰء رح ﻧﺮوح ﻟﻤﺴﺎر اﻟﺼﻮر اﻟﺨﺎﺻﺔ ﺑﺎﻟﻤﺠﻠﺔ ﺑﻌﺪ ﺗﺮﻛﯿﺒﮫﺎ ﺣﺘﻰ ﻧﺒﺪأ ﻓﻰ
اﻟﺘﻌﺪﻳﻞ ﻋﻠﯿﮫﺎ
#ﺻﻮره ١
#ﺻﻮره٣
٦٤
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
اﻟﺤﯿﻦ ﻧﺮﻳﺪ ﻋﻤﻞ ﻣﺜﻞ ھﺬا اﻟﺒﻠﻮك وﻧﻘﻄﻌﻪ ﺑﺎﻟﻤﺜﻞ ،وﻃﺒﻌﺎ ﻋﺮﻓﻨﺎ ھﺬه اﻟﻤﻌﻠﻮﻣﻪ
ﻣﻦ اﻟﺼﻮر اﻟﻤﻘﻄﻌﻪ ﻓﻰ ﻣﺠﻠﺪ اﻟﺼﻮر
ﻧﻔﺘﺢ اﻟﻔﻮﺗﻮﺷﻮب وﻧﺼﻮر ﺻﻮرة ھﺬا اﻟﺒﻠﻮك اﻻزرﻗﺖ وﻧﻔﺘﺤﻪ ﺑﺎﻟﻔﻮﺗﻮﺷﻮب وﻧﺤﻮﻟﻪ
ل rgb
#ﺻﻮره٤
اﻟﺠﺰء اﻟﻌﻠﻮى)اﻳﺴﺮ+اوﺳﻂ+اﻳﻤﻦ(
اﻟﺠﺰء اﻟﺴﻔﻠﻰ)اﻳﺴﺮ+اوﺳﻂ+اﻳﻤﻦ(
٦٥
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
ﺳﮫﻠﻪ روح ﻟﻠﻤﺠﻠﺔ وﻗﻒ ﺑﺎﻟﻤﺎوس ﻋﻠﻰ ﺣﺎﻓﺔ اﻟﺒﻠﻮك وﺷﻮف راﺑﻂ اﻟﺼﻮرة ﺑﻌﺮض
ﺧﺼﺎﺋﺼﮫﺎ ﺑﺎﻟﻀﻐﻂ ﻛﻠﯿﻚ ﻳﻤﯿﻦ
#ﺻﻮره٦
اﻟﺤﯿﻦ اﻧﺎ ﻋﻤﻠﺖ ﺗﺄﻃﯿﺮ ﺑﺴﯿﻂ ﻣﻮ دﻗﯿﻖ وﻣﺤﺘﺎج ﻇﺒﻂ اﻛﺜﺮ ،ﻻن ﻇﺒﻄﻪ ﻣﺤﺘﺎج
ﺗﻜﻮن دﻗﯿﻖ ﻓﻰ
٦٦
ﻣٌﻄﻮرMTWER.COM
______________________________________________________
#ﺻﻮره ٧
وﻳﻮﺟﺪ ﻃﺮق اﺧﺮى اﺻﻌﺐ ﺷﻮى ﻟﻜﻦ ھﺬه راح ﺗﻔﻰ ﺑﺎﻟﻐﺮض ﻃﺎﻟﻤﺎ ﺗﺪرﺑﺖ
ﻋﻠﯿﮫﺎ ﺟﯿﺪا
ﻓﻰ ﻧﮫﺎﻳﺔ ھﺬه اﻟﺪورة أرﺟﻮ ﻣﻨﻜﻢ اﻟﺪﻋﺎء ﻟﻰ ﺑﺄن ﻳﻮﻓﻘﻨﻰ اﷲ ﻓﻰ دﻳﻨﻰ ودﻧﯿﺎى
وان ﻳﻐﻔﺮ ﻟﻮاﻟﺪاى
أﺧﻮﻛﻢ :ﻣﺤﻤﺪ
Vista-design
ا
٦٧