‫واﻟﺤﻤﺪ ﷲ رب اﻟﻌﺎﻟﻤﯿﻦ‬

‫و اﻟﺼﻼة و اﻟﺴﻼم ﻋﻠﻰ ﺳﯿﺪﻧﺎ ﻣﺤﻤﺪ اﻟﻨﺒﻲ اﻟﻜﺮﻳﻢ و ﻋﻠﻲ آﻟﻪ و ﺻﺤﺒﻪ‬
‫أﺟﻤﻌﯿﻦ‬

‫إھــــــــــﺪاء‪..‬‬

‫إھــﺪاء ﻟﻜﻞ ﺷﺨـﺺ ﻳﺴﻌـﻲ ﻟﻠﺘﻌﻠﻢ و اﻷﺳﺘـﻔﺎدة‪..‬‬

‫إھــﺪاء ﻟﻜﻞ ﻣﻦ ﻋﻠﻤﻨـﻲ ﺣﺮﻓـﺎً و ﺳﺎﻋﺪﻧﻲ أن أﺻﻞ اﻟﻰ ﻣـﺄﻧﺎ ﻋﻠﯿﻪ‪..‬‬

‫إھــﺪاء ﻟﻜﻞ ﻣﺴﺘﺨـﺪم ﻋﺮﺑﻲ ﻳﺴﻌﻲ ﻟﯿﺼﺒﺢ ﻣﻄﻮر‪..‬‬

‫إھـــــﺪاء ﺧـﺎص‪..‬‬
‫ﻟﻤُﻄﻮﱢر ﻣﻮﻗﻌــًﺎ و أدارة و أﻋﻀـــﺎء و زاﺋﺮﻳﻦ‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫ﻓﮫﺮس اﻟﺪورة ‪:‬‬

‫اﻟﺪورة ﻣﻘﺴﻤﻪ ﻟﺠﺰﺋﯿﻦ‪:‬‬

‫اوﻻ‪:‬اﻟﺘﻌﺎﻣﻞ ﻣﻊ ﻣﺠﻠﺔ ‪ joomla‬ﺑﻜﻞ ﺷﻰء ﻓﯿﮫﺎ ان ﺷﺎء اﷲ‬

‫وﻓﮫﺮﺳﮫﺎ ﻳﺸﻤﻞ اﻷﺗﻰ‪:‬‬

‫‪-1‬ﺷﺮح ﺗﻨﺼﯿﺐ اﻟﻤﺠﻠﺔ ﻋﻠﻰ ﻣﻮﻗﻌﻚ او اﻟﺴﯿﺮﻓﺮ اﻟﻤﺤﻠﻰ‬

‫‪-٢‬ﺷﺮح اﻟﺘﻌﺎﻣﻞ ﻣﻊ ﻟﻮﺣﺔ اﻟﺘﺤﻜﻢ اﻟﺨﺎﺻﺔ ﺑﺎﻟﻤﺠﻠﺔ‬
‫وﻳﻨﻘﺴﻢ ھﺬا اﻟﺠﺰء ﻟﻘﺴﻤﯿﻦ‪:‬‬

‫اوﻻ‪:‬‬

‫‪-‬ﺷﺮح ﻛﯿﻔﯿﺔ ﺗﺮﻛﯿﺐ اﻻﺿﺎﻓﺎت واﻟﻘﻮاﻟﺐ واﻟﻤﻠﺤﻘﺎت اﻟﺨﺎﺻﺔ ﺑﺎﻟﻤﺠﻠﺔ‬

‫‪-‬اﻟﺘﻌﺮف ﻋﻠﻰ اﻟﻤﻮدﻳﻼت ‪-‬اﻟﻘﻮاﻟﺐ‪-‬اﻟﺘﻤﺒﻼت‪-‬اﻟﻜﻮﻣﺒﻮﻧﯿﻨـﺖ)ﻣـﺎھﻰ‪-‬اھﻤﯿﺘﮫـﺎ‪-‬‬

‫ﻛﯿﻔﯿﺔ اﻟﺘﺤﻜﻢ ﺑﮫﺎ(‬

‫ﺛﺎﻧﯿﺎ‪:‬‬
‫‪-‬ﺷﺮح اﻟﻘﻮاﻟﺐ واﻟﺜﯿﻤﺎت اﻟﺨﺎﺻﺔ ﺑﺠﻤﻠﻪ)ﺗﺮﻛﯿﺒﮫﺎ‪-‬اﻟﺨﯿﺎرات وﺷﺮﺣﮫﺎ‪-‬ﻛﯿﻔﯿﺔ‬
‫اﻟﺘﻌﺪﻳﻞ(‬
‫‪-‬ﺑﺪءا ﻣﻦ ھﺬا اﻟﺠﺰء راح ﻧﻨﺘﻘﻞ ﻟﺠﺰﺋﯿﺔ اﻟﺘﺼﻤﯿﻢ واﻟﺘﻌﺪﻳﻞ ﻋﻠﻰ اﻟﻘﻮاﻟﺐ‬

‫ﻳﺸﻤﻞ ذﻟﻚ‪:‬‬

‫‪-‬ﺗﻌﻠﻢ ﻓﻨﻮن ﺗﻌﺮﻳﺐ اﻟﻘﻮاﻟﺐ‬

‫‪-‬ﺗﻌﻠﻢ ﻓﻨﻮن اﻟﺘﻌﺪﻳﻞ ﻋﻠﻰ اﻟﻮان اﻟﻘﺎﻟﺐ ﺑﺎﺳﺘﺨﺪام‪css‬‬

‫‪-‬ﺗﻌﻠﻢ ﻓﻨﻮن ﻛﯿﻔﯿﺔ ﺗﺼﻤﯿﻢ ھﯿﺪر‪+‬ﻓﻮﺗﺮ ﻟﻠﻘﺎﻟﺐ‬

‫‪-‬ﺗﻌﻠﻢ ﻓﻨﻮن ﺗﻨﻈﯿﻢ اﻣﺎﻛﻦ اﻟﻤﻮدﻳﻼت ﻓﻰ اﻟﻘﺎﻟﺐ‬

‫‪٢‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫ﺛﺎﻧﯿﺎ‪ :‬اﻟﺘﻌﺎﻣﻞ ﻣﻊ ﻣﺠﻠﺔ ‪mkportal‬‬

‫وﻓﯿﮫــــــــــــــــــــﺎ راح ﻧﺘﻌــــــــــــــــــــﺮف ﻋﻠــــــــــــــــــــﻰ اﻷﺗــــــــــــــــــــﻰ‪:‬‬

‫‪-١‬ﺷﺮح ﻟﻜﯿﻔﯿـﺔ ﺗﺮﻛﯿـﺐ‪ +‬اﻟﺘﻌﺎﻣـﻞ اﻟـﺴﺮﻳﻊ ﻣـﻊ اﻟﻤﺠﻠـﺔ ﻣـﻦ ﺣﯿـﺚ اﻷﺳـﺘﺨﺪام‬
‫‪-٢‬ﺗﻌﻠـــــــــــــــﻢ ﻓﻨـــــــــــــــﻮن ﺗـــــــــــــــﺼﻤﯿﻢ أﺟـــــــــــــــﺰاء اﻟﻤﺠﻠـــــــــــــــﺔ‬
‫‪-٣‬ﺗﻌﻠﻢ ﻛﯿﻔﯿﺔ اﻟﺘﻌﺪﻳﻞ ﻋﻠﻰ ﺑﻠﻮﻛﺎت اﻟﻤﺠﻠﺔ‬

‫وﻓﻰ اﻟﻨﮫﺎﻳﺔ راح ﻳﻜﻮن ﻓﯿﻪ ﻣﻮﺿﻮع ﻟﻠﻨﻘﺎش ﻟﻠﺮد ﻋﻠﻰ اﺳﺘﻔﺴﺎرات اﻻﻋﻀﺎء‬
‫ﻓﻰ ﻛﻞ درس ﻳﺘﻢ ﺷﺮﺣﻪ ‪ ،‬ﺣﺘﻰ ﻧﻮﺻﻞ اﻟﻤﻌﻠﻮﻣﺔ ﻟﻠﻤﺸﺘﺮك ﻓﻰ اﻟﺪورة ﺑﺄﻗﺼﻰ‬
‫درﺟﺔ‬
‫ﻣﻤﻜﻨﺔ‪.‬‬

‫أﻳﻀﺎً ﻳﻄﻠﺐ ﻣﻦ ﻛﻞ ﻣﺘﺪرب أن ﻳﻌﻤﻞ ﻋﻠﻰ ﺗﻄﺒﯿﻖ دروس اﻟﺪورة‬

‫وﺑﺎﻟﻨﮫﺎﻳﺔ ارﻓﺎق اﻹﺳﺘﺎﻳﻞ ‪ +‬ﺻﻮرة ﻣﻨﻪ ﻟﻤﺎ ﻗﺎم‬
‫ﺑﺘﻄﺒﯿﻘﻪ ﺧﻼل اﻟﺪورة ﻟﺘﻘﯿﯿﻢ ﻋﻤﻠﻪ‪،‬‬
‫ﻛﻤﺎ ﻳﻄﻠﺐ ارﻓﺎق ﺻﻮر ﻟﻜﻞ ﺧﻄﻮات اﻟﺪورة وذﻟﻚ ﺑﻤﻮاﺿﯿﻊ اﻟﻨﻘﺎﺷﺎت ﻟﻜﻞ درس‪.‬‬

‫ﺗﻨﺒﯿﻪ‪ //:‬اﻟﺪورة ھﻲ ﻣﺸﺎرﻛﺔ وﺗﻔﺎﻋﻞ ﺑﯿﻦ اﻷﻋﻀﺎء واﻟﻤﺸﺎرﻛﯿﻦ واﻟﻤﺘﻠﻘﯿﻦ‬

‫ﻟﺬﻟﻚ اﺣﺮص ﻋﺰﻳﺰي اﻟﻤﺘﻠﻘﻲ أن ﻳﻜﻮن ردك ﻓﻌﺎﻻً ﻣﺸﺎرﻛﺎً‬
‫وﻟﻮ ﺑﻤﻌﻠﻮﻣﺔ إن ﻟﻢ ﻳﻜﻦ ﺗﻄﺒﯿﻘﺎً ﻟﯿﻜﻮن ردك ﻣﻔﯿﺪاً ﻧﺎﻓﻌًﺎ‬
‫وﺗﻜﻮن ﻣﺴﺎھﻤﺎً ﺑﺈﻟﻘﺎء اﻟﺪورة ﺑﺸﻜﻞ أو ﺑﺂﺧﺮ‪.‬‬

‫وﻓﻰ اﻟﻨﮫﺎﻳﺔ أﻃﻠﺐ ﻣﻨﻜﻢ اﻟﺪﻋﺎء ﻟﻰ‬

‫ﺑﺄن ﻳﻮﻓﻘﻨﻰ اﷲ ﻓﻰ دﻳﻨﻰ ودﻧﯿﺎى‬
‫وأن ﻳﺮﺣﻤﻨﺎ وﻳﺮﺣﻢ اﻟﻤﺴﻠﻤﯿﻦ ﺟﻤﯿﻌﺎ اﻻﺣﯿﺎء‬
‫ﻣﻨﮫﻢ واﻻﻣﻮات‬

‫ﻣﻊ اﻟﺘﺤﯿﺔ‬

‫أﺧﻮﻛﻢ‪vista-design‬‬

‫وھﺬا واﷲ وﻟﻰ اﻟﺘﻮﻓﯿﻖ‬

‫‪٣‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫ﻓﮫﺮس اﻟﻮﺻﻮل اﻟﺴﺮﻳﻊ ﻟﻠﺪروس‪:‬‬

‫ﻣﺘﻄﻠﺒﺎت اﻟﺪورة‬
‫]‪ [joomla1‬ﺷﺮح ﺗﻨﺼﯿﺐ اﻟﻤﺠﻠﺔ وﺗﺮﻛﯿﺒﮭﺎ ﻋﻠﻰ اﻟﺴﯿﺮﻓﺮ اﻟﻤﺤﻠﻰ أو ﻣﻮﻗﻌﻚ‬
‫]‪ [joomla2‬ﺷﺮح ﻟﻮﺣﺔ ﺗﺤﻜﻢ اﻟﻤﺠﻠﺔ وﺗﻌﺮﻳﻒ ﻟﻠﻘﻮاﻟﺐ‪-‬اﻟﻤﻮدﻳﻼت‪-‬اﻟﻜﻮﻣﺒﻮﻧﯿﻨﺖ‬
‫]‪ [joomla3‬ﺷﺮح اﻟﻘﺎﻟﺐ‪ template‬ﺗﻌﺮﻳﻔﻪ‪-‬أﺟﺰاﺋﺔ اﻟﺒﺮﻣﺠﯿﺔ‪-‬اﻟﺒﻮﺳﺸﻨﺎت‬
‫]‪ [joomla4‬ﺷﺮح ﺗﺼﻤﯿﻢ اﻟﮫﯿﺪر واﻟﻔﻮﺗﺮ ﻟﻠﻘﺎﻟﺐ واﻟﺘﻌﺪﻳﻞ ﻋﻠﯿﻪ‬
‫]‪ [joomla5‬ﺷﺮح ال‪ css‬اﻟﺨﺎص ﺑﻜﻞ ﻗﺎﻟﺐ وﻛﯿﻔﯿﺔ اﻟﺘﻌﺪﻳﻞ ﻋﻠﯿﻪ‬
‫]‪ [joomla6‬ﺷﺮح ﺗﻨﻈﯿﻢ أﻣﺎﻛﻦ اﻟﻤﻮدﻳﻼت‪+‬ﺗﻌﺪﻳﻞ ﺧﻄﻮط اﻟﻘﺎﻟﺐ ﻟﺮؤﻳﺔ أوﺿﺢ‬
‫]‪ [joomla final‬درس ﺑﺮﻣﺠﺔ ﻗﺎﻟـﺐ ﻣﺠﻠـﺔ ﺟﻤﻠـﺔ ﺑﻨﻔـﺴﻚ ﻣـﻦ اﻟـﺼﻔﺮ )أﻗـﻮى درس ﻓـﻰ‬
‫اﻟﺪورة(‬
‫]‪ [mkportal1‬ﺷﺮح ﺗﺮﻛﯿﺐ اﻟﻤﺠﻠﺔ ﻋﻠﻰ اﻟﺴﯿﺮﻓﺮ اﻟﻤﺤﻠﻰ وﺗﺸﻐﯿﻠﮫﺎ‬
‫]‪ [mkportal2‬درس ﺗﺄﻃﯿﺮ وﺗﺼﻤﯿﻢ ﺑﻠﻮﻛﺎت اﻟﻤﺠﻠﺔ‬

‫ﺑﺴﻢ اﷲ اﻟﺮﺣﻤﻦ اﻟﺮﺣﯿﻢ‬

‫ﻧﺒﺪأ اﻧﻄﻼﻗﺔ اﻟﺪورة راﺟﯿﺎ ﻣﻦ اﻟﻌﻠﻰ اﻟﻘﺪﻳﺮ ان ﺗﺘﻢ ﻋﻠﻰ ﺧﯿﺮ‬

‫اوﻻ‪ :‬ﻣﺘﻄﻠﺒﺎت اﻟﺪورة‪:‬‬

‫‪-1‬اﻟﺴﯿﺮﻓﺮ اﻟﻤﺤﻠﻰ ‪،‬وﻳﻔﻀﻞ ‪ appserv‬اﻻﺻﺪار ‪٢٫٥٫٩‬‬

‫ﻟﻠﺘﺤﻤﯿﻞ‪:‬‬

‫اﺿﻐﻂ ھـــﻨﺎ راﺑﻂ ﻣﺒﺎﺷﺮ‬

‫‪-2‬ﻣﺠــــﻠﺔ‪joomla‬‬

‫اﺿﻐــــﻂ ھـــﻨﺎ‬

‫‪-3‬ﻣﺠـــﻠﺔ‪mkportal‬‬

‫اﺿﻐــــﻂ ھــــﻨﺎ‬

‫‪٤‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫‪-5‬ﺑﺮﻧﺎﻣﺞ اﻟﻔﻮﺗﻮﺷﻮب ‪ photoshop csME‬اﻟﺪاﻋﻢ ﻟﻠﻌﺮﺑﯿﺔ ‪ +‬اﻟﻜﯿﺠﻦ‬

‫ﻟﻠﺘﺤﻤﯿﻞ ﺑﺮاﺑﻂ واﺣﺪ ﻓﻘﻂ ﻳﺪﻋﻢ اﺳﺘﻜﻤﺎل اﻟﺘﺤﻤﯿﻞ‪:‬‬

‫اﺿﻐــﻂ ھﻨـــﺎ‬

‫اﻟﺤﺠﻢ‪ ٣٩٣ :‬ﻣﯿﺠﺎ‬

‫‪-6‬ﺑﺮﻧﺎﻣﺞ اﻟﻔﺮوﻧﺖ ﺑﯿﺞ ‪ ٢٠٠٣‬ﺑﺮاﺑﻂ واﺣﺪ ﻓﻘﻂ ﻳﺪﻋﻢ اﺳﺘﻜﻤﺎل اﻟﺘﺤﻤﯿﻞ‪:‬‬

‫ﻟﻠﺘﺤﻤﯿﻞ‪:‬‬
‫‪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‬‬
‫______________________________________________________‬

‫]‪[joomla1‬ﺷﺮح ﺗﻨﺼﯿﺐ اﻟﻤﺠﻠﺔ وﺗﺮﻛﯿﺒﮫﺎ ﻋﻠﻰ اﻟﺴﯿﺮﻓﺮ اﻟﻤﺤﻠﻰ أو ﻣﻮﻗﻌﻚ‬

‫ﻧﺒﺪأ اﻧﻄﻼﻗﺔ اﻟﺪورة ﺑﺄذن اﷲ‬

‫اوﻻ‪:‬ﺷﺮح ﺗﻨﺼﯿﺐ ﻣﺠﻠﺔ ﺟﻤﻠﺔ ﻋﻠﻰ ﺳﯿﺮﻓﺮك اﻟﻤﺤﻠﻰ‪:‬‬

‫‪-١‬ﺑﻌﺪ ﺗﺮﻛﯿﺐ اﻟﺴﯿﺮﻓﺮ اﻟﻤﺤﻠﻰ(راﺟﻊ ھﺬا اﻟﺪرس ﻟﻤﻌﺮﻓﺔ ﻃﺮﻳﻘﺔ ﺗﺮﻛﯿﺐ اﻟﺴﯿﺮﻓﺮ‬
‫اﻟﻤﺤﻠﻰ‪),‬ﻗﻢ‬
‫ﺑﻌﻤﻞ ﻗﺎﻋﺪة ﺑﯿﺎﻧﺎت ﺟﺪﻳﺪه ﻟﻠﻤﺠﻠﺔ ﻣﻦ‪phpmyadmin‬‬

‫‪-٢‬ﺿﻊ ﻣﺠﻠﺪ اﻟﻤﺠﻠﺔ ﻓﻰ ﻣﻠﻒ‪www‬‬

‫‪-٣‬اﺳﺘﺪﻋﻰ راﺑﻂ اﻟﻤﺠﻠﺔ ﻣﻦ اﻟﻤﺘﺼﻔﺢ ﺑﻜﺘﺎﺑﺔ ‪ www.localhost.com/xxx‬ﺣﯿﺚ‬

‫‪xxx‬ھﻮ اﺳﻢ ﻣﺠﻠﺪ اﻟﻤﺠﻠﺔ‬

‫‪-٥‬ﺗﺎﺑﻊ ﻃﺮﻳﻘﺔ ﺗﻨﺼﯿﺐ اﻟﻤﺠﻠﺔ ﻛﺎﻷﺗﻰ‪:‬‬

‫‪٦‬‬
 MTWER.COM‫ﻣٌﻄﻮر‬
______________________________________________________

٧
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫ﻣﻼﺣﻈﻪ ‪:‬ﺧﻄﻮة ﻛﺘﺎﺑﺔ ﺑﯿﺎﻧﺎت ‪ ftp‬ﻣﮫﻤﻪ ﻟﻮ ﻛﺎن اﻟﺴﯿﺮﻓﺮ ﻋﻠﻰ ﻣﻮﻗﻌﻚ)وﻟﯿﺲ‬

‫اﻟﺴﯿﺮﻓﺮ اﻟﻤﺤﻠﻰ )ﻣﻔﻌﻞ اﻟﺴﯿﻒ ﻣﻮد‬

‫‪٨‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫ﺑﻌﺪ اﻧﺘﮫﺎء اﻟﺘﺮﻛﯿﺐ‬

‫ﻗﻢ ﺑﺤﺬف ﻣﺠﻠﺪ اﻟﺘﺜﺒﯿﺖ‪installation‬‬

‫وﺑﮫﯿﻚ ﺗﻜﻮن رﻛﺒﺖ اﻟﻤﺠﻠﺔ‬

‫وﻳﻤﻜﻨﻚ اﻟﺪﺧﻮل ﻛﺎﻻﺗﻰ‪:‬‬

‫اﻟﯿﻮزر‪: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‬‬
‫وﺳﺒﺐ ذﻟﻚ ان اﻟﺬاﻛﺮة اﻻﻓﺘﺮاﺿﯿﺔ ﻟﻠﺴﯿﺮﻓﺮ ﻏﯿﺮ ﻛﺎﻓﯿﺔ ﻟﺘﻨﺼﯿﺐ اﻟﻤﺠﻠﺔوﻟﺤﻠﮫﺎ‬

‫ﻣﻦ ﻗﺎﺋﻤﺔ ‪ start‬ﻣﻦ اﻟﻮﻳﻨﺪوز ﻧﺨﺘﺎر ‪ appserv‬ﺛﻢ ﻧﻔﺘﺢ ﻣﻠﻒ‪php.ini‬‬

‫ﺷﻮف اﻟﺼﻮرة‬

‫ﺑﻌﺪﻳﻦ اﻧﺰل ﻟﺤﺪ ﻣﺎ ﺗﺠﺪ ھﺬه اﻟﺒﯿﺎﻧﺎت‬

‫وﺑﺪل اﻻرﻗﺎم ﻛﻤﺎ ﺑﺎﻟﺼﻮرة‬

‫‪١٠‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫ﺛﻢ ﺑﻌﺪ ﺣﻔﻆ اﻟﻤﻠﻒ‬

‫ﻧﺮوح ﻧﻘﻮم ﺑﺎﻋﺎدة ﺗﺸﻐﯿﻞ اﻟﺴﯿﺮﻓﺮ ﻟﺘﺘﻐﯿﺮ اﻻﻋﺪدات‬

‫ﺷﻮف‪...‬‬

‫ﻻﻳﻮﺟﺪ ﺗﻄﺒﯿﻖ ﻣﻄﻠﻮب ﻓﻰ ھﺬا اﻟﺪرس‬

‫اﺧﻮﻛﻢ‪vista-design‬‬

‫‪١١‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫]‪[joomla2‬ﺷﺮح ﻟﻮﺣﺔ ﺗﺤﻜﻢ اﻟﻤﺠﻠﺔ وﺗﻌﺮﻳﻒ ﻟﻠﻘﻮاﻟﺐ‪-‬اﻟﻤﻮدﻳﻼت‪-‬اﻟﻜﻮﻣﺒﻮﻧﯿﻨﺖ‬

‫ﻓﻰ ھﺬا اﻟﺪرس راح ﻧﺸﺮح ﻟﻮﺣﺔ ﺗﺤﻜﻢ اﻟﻤﺠﻠﺔ واﻟﺘﻌﺮف ﻋﻠﻰ وﻇﯿﻔﺔ اﻻﻏﺮاض‬
‫اﻟﻤﮫﻤﺔ اﻟﺘﻰ راح ﻧﺴﺘﺨﺪﻣﮫﺎ ﻓﯿﻤﺎ ﺑﻌﺪ‬

‫اوﻻ‪:‬أﺷﯿﺎء ﻻﺑﺪ ان ﺗﻌﺮﻓﮫﺎ ﺑﺨﺼﻮص ﺗﺮﻛﯿﺐ اﻻﺿﺎﻓﺎت ﻋﻠﻰ اﻟﻤﺠﻠﺔ‪:‬‬

‫‪-‬اى اﺿﺎﻓﺔ راح ﺗﻀﯿﻔﮫﺎ راح ﺗﺜﺒﺘﮫﺎ ﻣﻦ ﻣﺪﻳﺮ اﻟﺘﺜﺒﯿﺖ‬

‫ﺻﻮره‪:‬‬

‫‪-‬اى اﺿﺎﻓﺔ ﻳﺠﺐ ان ﺗﻜﻮن ﻣﻠﻒ ﻣﻀﻐﻮط وﺑﺄﻣﺘﺪاد ‪ zip‬وﻟﯿﺲ‪rar‬‬

‫‪-‬اى اﺿﺎﻓﺔ راح ﺗﺮﻛﺒﮫﺎ ﻻﺑﺪ ان ﻳﻜﻮن اﻟﺴﯿﻒ ﻣﻮد ﻣﻘﻔﻞ ﺣﺘﻰ ﻳﺘﻢ رﻓﻌﮫﺎ‪ ،‬واذا‬
‫ﻛﺎن اﻟﺴﯿﻒ ﻣﻮدﺷﻐﺎل ﻋﻠﻰ اﻟﺴﯿﺮﻓﺮ‬
‫ﻳﺠﺐ ﺗﻔﻌﯿﻞ ﻧﻈﺎم ال ‪ftp‬ﻓﻰ اﻟﻤﺠﻠﺔ واﻧﺎ ﻧﻮھﺖ ﻟﮫﺬه اﻟﻨﻘﻄﻪ اﺛﻨﺎء ﺗﻨﺼﯿﺐ‬
‫اﻟﻤﺠﻠﺔ‬

‫‪١٢‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫ﺛﺎﻧﯿﺎ‪:‬ﺗﻌﺮﻳﻒ ﻟﻼﺿﺎﻓﺎت اﻟﺨﺎﺻﺔ ﺑﺎﻟﻤﺠﻠﺔ‪:‬‬

‫‪-‬اﻟﻤﻮدﻳﻞ= ‪module‬ھﻮ ﻋﺒﺎرة ﻋﻦ اﺿﺎﻓﺔ ﺑﺮﻣﺠﯿﺔ ﻳﺘﻢ ﺗﺮﻛﯿﺒﮫﺎ ﻋﻠﻰ ﻣﺠﻠﺔ)ﻣﺜﻞ‬

‫اﻟﮫﺎك ﻓﻰ اﻟﻤﻨﺘﺪﻳﺎت ( ﺗﻌﻄﯿﻚ ﺧﺼﺎﺋﺺ‬
‫اﻣﻜﺎﻧﯿﺎت ﻣﻔﯿﺪه ﻟﻠﻤﺠﻠﺔ‬

‫ﻣﺜﺎل‪:‬ﻣﻮدﻳﻞ اﻟﺴﻼﻳﺪ ﺷﻮ واﻟﺬى ﻳﻌﺮض ﻟﻚ ﺻﻮر اوﺗﻮﻣﺎﺗﯿﻜﺎ ﺑﺎﺳﺘﻤﺮار )ﺳﻮف‬

‫ﻳﺸﺮح ﻓﻰ اﻟﻔﯿﺪﻳﻮ ﻓﻰ ﻧﮫﺎﻳﺔ اﻟﺪرس)‬

‫ﻣﺜﺎل ﺻﻮره ﻟﺨﯿﺎرات ﻣﻮدﻳﻞ اﻻﺣﺼﺎﺋﯿﺎت‪:‬‬

‫‪-‬اﻟﻘﺎﻟﺐ=‪template‬ھﻮ ﻋﺒﺎرة ﻋﻦ أﺷﻜﺎل)ﻣﺜﻞ اﺳﺘﺎﻳﻞ اﻟﻤﻨﺘﺪى( ﻳﺘﻢ ﺗﺮﻛﯿﺒﮫﺎ‬

‫ﻋﻠﻰ اﻟﻤﺠﻠﺔ ﻟﺘﻐﯿﯿﺮ ﺷﻜﻠﮫﺎ‬

‫‪١٣‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫ﻣﺜﺎل‪ :‬ﻗﺎﻟﺐ ﺷﺮﻛﺔ ‪ joomlart‬اﻟﻤﺸﮫﻮر( ‪ ja edenite‬ﺳﻮف ﻳﺸﺮح ﻓﻰ اﻟﻔﯿﺪﻳﻮ‬

‫ﻓﻰ ﻧﮫﺎﻳﺔ اﻟﺪرس)‬

‫‪-‬اﻟﻜﻮﻣﺒﻮﻧﯿﺖ=ھﻮ ﻋﺒﺎرة ﻋﻦ ﻧﻈﺎم ﺑﺮﻣﺠﻰ ﻣﺜﻞ اﻟﻤﻮدﻳﻞ وﻟﻜﻦ ذو ﺧﺼﺎﺋﺺ‬

‫وﺧﯿﺎرات ﺗﺤﻜﻢ اﻛﺒﺮ‬

‫ﻣﺜﺎل‪ :‬ﻛﻮﻣﺒﻮﻧﯿﻨﺖ اﻟﺘﻌﻠﯿﻘﺎت اﻟﺬى ﻳﺘﻢ ﺗﺮﻛﯿﺒﻪ ﻟﻌﻤﻞ ﺗﻌﻠﯿﻘﺎت ﻋﻠﻰ اﻟﻤﻘﺎﻻت‬

‫ﻣﻼﺣﻈﻪ‪ :‬ﻣﻌﻈﻢ اﻟﻜﻮﻣﺒﻮﻧﺘﺎت ﻻﺑﺪ ﻣﻦ ﻋﻤﻞ ﻗﺴﻢ ‪ section‬وﻓﺮع ‪category‬‬

‫ﺧﺎص ﺑﮫﺎ‬

‫ﻻن اﻟﻜﻮﻣﺒﻮﻧﯿﺖ ﻳﻤﻜﻨﻚ ﻣﻦ ﻋﻤﻞ ﻗﺴﻢ ﺧﺎص ﺑﮫﺬا اﻟﻜﻮﻣﺒﻮﻧﯿﺖ‬

‫ﻣﺜﻞ ﻣﻌﺮض اﻟﺼﻮر ﻓﮫﻮ ﻛﻮﻣﺒﻮﻧﯿﻨﺖ ﻻﺑﺪ ﻣﻦ ﻋﻤﻞ ﻗﺴﻢ وﻓﺮع ﺣﺘﻰ ﺗﻨﺪرج اﻟﺼﻮر‬
‫ﻓﯿﻪ )ﺳﻮف ﻳﺸﺮح ﻓﻰ اﻟﻔﯿﺪﻳﻮ ﻓﻰ ﻧﮫﺎﻳﺔ اﻟﺪرس)‬

‫اﻟﺤﯿﻦ ﺑﻌﺪ ﻣﺎ ﺗﻌﺮﻓﻨﮫﺎ ﻋﻠﻰ أھﻢ اﻷﺷﯿﺎء ﻓﻰ ﻟﻮﺣﺔ اﻟﺘﺤﻜﻢ‬

‫دﻋﻮﻧﺎ ﻧﺘﺎﺑﻊ ھﺬا اﻟﻔﯿﺪﻳﻮ وﻧﺸﻮف ﻛﯿﻔﯿﺔ ﺗﺮﻛﯿﺐ ﻛﻞ اﺿﺎﻓﺔ ﻣﻊ ﻣﺜﺎل ﺣﻰ ﻟﮫﺎ‬

‫ﻟﺘﺤﻤﯿﻞ اﻟﻔﯿﺪﻳﻮ‪:‬‬

‫اﺿﻐــــﻂ ھـــــﻨﺎ‬

‫راﺑﻂ اﺧﺮ ﻋﻠﻰ اﻟﻤﯿﺪﻳﺎ ﻓﺎﻳﺮ ﻣﻦ اﻟﻌﻀﻮ اﻟﺰاﺑﻦ ﻣﺸﻜﻮرا ﻟﻪ‬

‫اﺿﻐــــــﻂ ھــــــــﻨﺎ‬

‫اﻟﻤﻄﻠﻮب ﻣﻦ اﻻﻋﻀﺎء‪:‬‬

‫ﺗﺮﻛﯿﺐ ﻣﻮدﻳﻞ اﻟﺴﻼﻳﺪ ﺷﻮ اﻟﻤﺮﻓﻖ ورؤﻳﺔ ﺻﻮره ﻟﺨﯿﺎرات اﻟﺘﺤﻜﻢ وﻣﻜﺎﻧﻪ ﻋﻠﻰ‬
‫رﺋﯿﺴﯿﺔ اﻟﻤﺠﻠﺔ‬

‫‪١٤‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫]‪[joomla3‬ﺷﺮح اﻟﻘﺎﻟﺐ ‪ template‬ﺗﻌﺮﻳﻔﻪ‪-‬أﺟﺰاﺋﺔ اﻟﺒﺮﻣﺠﯿﺔ‪-‬اﻟﺒﻮﺳﺸﻨﺎت‬

‫ﻓﻰ ھﺬا اﻟﺪرس راح ﻧﻨﻄﻠﻖ ﺧﻄﻮة ﺑﺨﻄﻮة ﻓﻰ ﻃﺮﻳﻖ ﺗﻌﻠﻢ ﺗﺼﻤﯿﻢ وﺗﻌﺪﻳﻞ‬
‫ﻗﻮاﻟﺐ ﺟﻤﻠﺔ ﻣﺜﻞ ﻣﺎ ﻳﺤﻠﻮ ﻟﻚ‬

‫أوﻻ ‪:‬ﺗﻌﺮﻳﻒ اﻟﻘﺎﻟﺐ ‪:‬ﺑﻜﻞ إﺧﺘﺼﺎر ھﻮ اﻟﺜﯿﻢ اواﻻﺳﺘﺎﻳﻞ اﻟﺬى ﻳﻐﯿﺮ اﻟﺸﻜﻞ اﻟﻌﺎم‬
‫ﻟﻠﻤﺠﻠﺔ‬

‫أﺟﺰاﺋﻪ‪:‬‬

‫اى ﻗﺎﻟﺐ ﻳﺘﻢ ﺗﺮﻛﯿﺒﻪ ﻟﻪ اﻻﺟﺰاء اﻻﺗﯿﻪ ﺑﺎﻟﻨﺴﺒﺔ ﻟﻠﺨﯿﺎرات ﻓﻰ ﻟﻮﺣﺔ اﻟﺘﺤﻜﻢ‪:‬‬

‫ﻟﻨﺮى اﻟﺼﻮره‪:‬‬

‫‪١٥‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫ﻣﻦ اﻟﺼﻮرة أﺟﺰاء اﻟﻘﺎﻟﺐ ھﻰ‪:‬‬

‫‪-١‬اﻷﻧﺪﻛﺲ=‪=index‬رﺋﯿﺴﯿﺔ اﻟﻤﺠﻠﺔ أو اﻟﻘﺎﻟﺐ‬

‫‪-٢‬ﻣﻠﻔﺎت ال =‪css‬اﻟﺨﺎﺻﺔ ﺑﺄﻟﻮان وﺧﻄﻮط اﻟﻘﺎﻟﺐ‬
‫‪-٣‬ﺧﯿﺎرات اﻟﺘﻌﺪﻳﻞ ﻋﻠﻰ اﻟﻘﺎﻟﺐ)اﻻﻟﻮان اﻟﻤﺘﺎﺣﻪ‪-‬اﻟﻌﺮض‪-‬ﺧﯿﺎرات أﺧﺮى(‬

‫ﺑﻌﺪ اﻟﺘﻌﺮف ﻋﻠﻰ أﺟﺰاء اﻟﻘﺎﻟﺐ ﺧﻠﻮﻧﺎ ﻧﻌﺮف ﻧﻘﻂ ﻣﮫﻤﻪ وھﻰ‪:‬‬

‫‪-١‬ﻳﻘﺴﻢ اﻟﻘﺎﻟﺐ اﻟﻰ أﺟﺰاء او أﻣﺎﻛﻦ او ﻧﻘﻮل ﺑﻮﺳﺸﻦ ‪ postion,‬واﻟﺘﻰ ﻳﺘﻢ‬

‫اﺳﺘﺨﺪﻣﮫﺎ ﻓﻰ اﺧﺘﯿﺎر ﻣﻜﺎن اﻟﻤﻮدﻳﻞ ﻓﻰ رﺋﯿﺴﯿﺔ اﻟﻤﺠﻠﺔ‪:‬‬

‫ﻣﺜﻼ‪:‬أرﻳﺪ ان ﺗﻜﻮن اﻟﻘﺎﺋﻤﺔ اﻟﺮﺋﯿﺴﯿﺔ ﻟﻠﻤﺠﻠﺔ ﻋﻠﻰ اﻟﯿﻤﯿﻦ‪ ،‬ﻓﺮاح ﻧﺨﺘﺎر‬

‫اﻟﺒﻮﺳﺸﻦ ﻳﻤﯿﻦ‪right‬‬

‫ﻣﺜﻼ ‪:‬أرﻳﺪ ان ﻳﻜﻮن ﻣﻮدﻳﻞ اﻟﺴﻼﻳﺪ ﺷﻮ ﻓﻰ اﻟﻔﻮﺗﺮ‪ ،‬ﻓﺮاح ﻧﺨﺘﺎر اﻟﺒﻮﺳﺸﻦ‬

‫اﻟﻔﻮﺗﺮ ‪footer‬وھﻜﺬا‪.........‬‬

‫ﻟﺬﻟﻚ‪ ،‬اى ﻗﺎﻟﺐ ﻳﺘﻢ ﺑﺮﻣﺠﺘﮫﺎ ﻣﻦ اى ﺷﺮﻛﺔ ‪،‬ﻳﻜﻮن ﻣﺪﻋﻮم ﺑﺄﻣﺎﻛﻦ او ﺑﻮﺳﺸﻨﺎت‬
‫ﺗﺘﯿﺢ ﻟﻚ اﺧﺘﯿﺎر اﻻﻣﺎﻛﻦ ﺑﺴﮫﻮﻟﺔ‬

‫ﻧﺄﺧﺬ ﻣﺜﺎل ﻋﻤﻠﻰ‪:‬‬

‫ﻗﺎﻟﺐ ‪ perihelion‬ﻣﻦ ﺷﺮﻛﺔ‪rocket theme‬‬
‫ﺷﻮف ﺻﻮرة اﻟﻘﺎﻟﺐ‪:‬‬

‫ﻃﺒﻌﺎ اﻧﺎ ﻛﺎﺗﺐ ﻋﻠﻰ اﻟﺼﻮرة ﺑﻌﺾ اﻟﺒﻮﺳﺸﻨﺎت‬

‫‪١٦‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫ﻃﺐ ﻛﯿﻒ راح اﻋﺮف ھﺎﻟﺒﻮﺳﺸﻨﺎت؟‬

‫ﺑﺴﯿﻄﺔ‪:‬اﻟﺸﺮﻛﺎت اﻟﻤﺤﺘﺮﻣﻪ ﻣﺜﻞ ‪ rocket theme‬او ‪ joomlart‬ﺗﻘﻮم ﺑﺄرﻓﺎق‬

‫ﺻﻮره ﺑﮫﺎ ﺟﻤﯿﻊ اﻟﺒﻮﺳﺸﻨﺎت ﻓﻰ اﻟﻘﺎﻟﺐ‪,‬‬

‫ﻓﻤﺜﻼ ﻓﻰ ھﺬا اﻟﻘﺎﻟﺐ ‪ ،‬ﻟﻤﺎ ﺗﯿﺠﻰ ﺗﻨﺰﻟﻪ‬

‫راح ﺗﺠﺪ ﻣﻌﻪ ﻣﺮﻓﻖ ھﺎﻟﺼﻮرة‪:‬‬

‫وھﺬه ھﻰ اﻟﺒﻮﺷﻨﺎت ﻛﻠﮫﺎ‬

‫وﻃﺒﻌﺎ راح ﺗﻔﯿﺪك ﻋﻨﺪﻣﺎ ﺗﺮﻳﺪ اﺧﺘﯿﺎر ﻣﻜﺎن ﻟﻤﻮدﻳﻞ ﻣﺎ وﻟﯿﻜﻦ اﻟﺴﻼﻳﺪ ﺷﻮ‬

‫ﺷﻮف اﻟﺨﯿﺎرات اﻟﺒﻮﺷﻨﺎت ﻓﻰ ﻣﻮدﻳﻞ اﻟﺴﻼﻳﺪ ﺷﻮ‪:‬‬

‫‪١٧‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫اﻟﺤﯿﻦ ﺧﻠﻮﻧﺎ ﻧﻌﺮف اﻷﺟﺰاء اﻟﺒﺮﻣﺠﯿﺔ ﻟﮫﺬه اﻟﺒﻮﺳﺸﻨﺎت ﻓﻰ اﻟﻘﺎﻟﺐ‬

‫اﺿﻐﻂ ﻋﻠﻰ ‪ edit html‬ﻓﻮق ﻋﻠﻰ اﻟﯿﻤﯿﻦ‪:‬‬

‫ﺑﻌﺪﻳﻦ راح ﺗﺠﺪ اﻟﺴﻮرس اﻟﺒﺮﻣﺠﻰ ﻟﻠﻘﺎﻟﺐ‬

‫ﺑﺮﻣﺠﯿﺔ اﻟﻘﺎﻟﺐ ﻳﺘﻢ ﺗﻘﺴﯿﻤﮫﺎ ﻻﺟﺰاء‬

‫ﺧﻠﻮﻧﺎ ﻧﺄﺧﺬ اﻟﻘﺎﻟﺐ ﻣﻦ ﻓﻮق ﻻﺳﻔﻞ وﻧﺸﻮف أﺟﺰاﺋﻪ‪:‬‬

‫‪١٨‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫‪-١‬اﻟﮫﯿﺪر‪:‬‬

‫ﺷﻮف ‪:‬‬

‫ﺑﻌﺪﻳﻦ ﻧﻨﺰل ﺷﻮف‪:‬‬

‫راح ﺗﺠﺪ اﻟﻤﻮدﻳﻠﺰ واﻟﺒﻮﺳﺸﻦ اﻟﺨﺎص ﺑﮫﻢ‬

‫‪١٩‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫ﺑﻌﺪﻳﻦ ﻧﻨﺰل ﻟﻸﺧﺮ راح ﺗﺠﺪ ﻛﻮد اﻟﻔﻮﺗﺮ‪:‬‬

‫ﻃﺒﻌﺎ أﻧﺎ ﺷﺮﺣﺖ أﺟﺰاء اﻟﻘﺎﻟﺐ ﺑﺮﻣﺠﯿﺎ ‪,‬ﺣﺘﻰ ﺗﺴﺘﻔﺎد ﻣﻨﮫﺎ ﻓﻰ اﻻﺗﻰ‪:‬‬

‫‪1-‬ﺣﺬف او ﺗﻌﺪﻳﻞ ﺟﺰء ﻣﻦ اﻟﻤﻮدﻳﻞ‬

‫‪2-‬ﻻﺣﻘﺎ‪:‬راح ﺗﺘﻌﻠﻢ ﻛﯿﻒ ﺗﻀﯿﻒ ھﯿﺪر‪+‬ﻓﻮﺗﺮ ﺑﻜﯿﻔﻚ‬

‫اﻟﻰ ھﻨﺎ اﻧﺘﮫﻰ اﻟﺪرس‬

‫اﻟﻤﻮﺿﻮع ﻣﺠﺮد ﺗﻌﺮﻳﻒ‬

‫وأﻛﯿﺪ راح ﻳﻜﻮن ﻓﯿﻪ ﻧﻘﺎش ﻟﻠﺮد ﻋﻠﻰ اى ﺳﺆال‬

‫ﺗﺤﯿﺎﺗﻰ‪vista-design‬‬

‫‪٢٠‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫]‪[joomla4‬ﺷﺮح ﺗﺼﻤﯿﻢ اﻟﮭﯿﺪر واﻟﻔﻮﺗﺮ ﻟﻠﻘﺎﻟﺐ واﻟﺘﻌﺪﯾﻞ ﻋﻠﯿﮫ‬

‫ﻓﻰ ھﺬا اﻟﺪرس راح ﻧﺘﻌﺮف ﻋﻠﻰ ﻛﯿﻔﯿﺔ ﺗﺼﻤﯿﻢ اﻟﮫﯿﺪر واﻟﻔﻮﺗﺮ ﻋﻠﻰ اى ﻗﺎﻟﺐ‬
‫ﺗﺮﻳﺪه‬

‫اوﻻ‪ :‬دﻋﻮﻧﺎ ﻧﺸﺮح ﻛﯿﻔﯿﺔ ﺗﺼﻤﯿﻢ اﻟﮫﯿﺪر واﻟﻔﻮﺗﺮ‬

‫ﻧﻔﺘﺢ اﻟﻔﻮﺗﻮﺷﻮب ‪،‬ﺑﻌﺪﻳﻦ ﻧﺴﻮى ﻋﻤﻞ ﺟﺪﻳﺪ ﺑﻤﻘﺎﺳﺎت ‪ ٧٧٧‬ﻋﺮض ﻓﻰ ‪٦٦٦‬‬

‫ﻃﻮل‬

‫واﻧﺎ ﻓﻰ ھﺎﻟﻤﺜﺎل راح اﺻﻮر اﻟﺸﺎﺷﺔ ﻋﻨﺪى‪ ،‬وراح أﺧﺬ اﻟﮫﯿﺪر اﻟﺨﺎص ﺑﺎﻟﻤﻮﻗﻊ‬
‫ھﻨﺎ ﻣﻄﻮر‬

‫وراح اﺳﺤﺒﻪ ﻻﻋﻠﻰ ﺻﻔﺤﺔ اﻟﻌﻤﻞ‬

‫وﺑﻌﺪﻳﻦ راح ﻧﺒﺪأ ﺑﺘﻘﻄﯿﻌﻪ ﺑﺎداة اﻟﺘﻘﻄﯿﻊ‬
‫ﻟﺜﻼﺛﺔ ﻗﻄﻊ )ﺷﻤﺎل‪-‬وﺳﻂ –ﻳﻤﯿﻦ(‬

‫‪٢١‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫وﻳﻔﻀﻞ ﻋﻨﺪ اﻟﺘﻘﻄﯿﻊ ان ﺗﺠﻌﻞ ﻣﻘﺎس اﻟﺠﺰء اﻻﻳﺴﺮ=ﻣﻘﺎس اﻟﺠﺰء اﻻﻳﻤﻦ‬

‫ﺑﻌﺪ ﻣﺎ ﻗﻄﻌﻨﺎ‬

‫راح ﻧﺤﻔﻆ اﻟﺸﻐﻞ‬

‫اﺿﻐﻂ ﻣﻦ ﻓﻮق ﻋﻠﻰ‪save for web‬‬

‫ﺑﻌﺪﻳﻦ ﻧﺨﺘﺎر‪save‬‬
‫وﻧﺨﺘﺎر ﻣﺜﻞ اﻻﺗﻰ‪:‬‬

‫ﺑﻌﺪ اﻟﺤﻔﻆ‪ ،‬راح ﺗﺠﺪ ﺗﻜﻮن ﻣﻠﻒ ﺻﻮر ﺑﻪ ﺛﻼث ﺻﻮر‬

‫ﺷﻮف‪,,,,,,,,‬‬

‫‪٢٢‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫اﻟﺤﯿﻦ ﺗﻤﺎم ﺧﻠﺼﻨﺎ ﻣﻦ اﻟﺘﺼﻤﯿﻢ‪ ،‬وﻃﺒﻌﺎ اﻟﻔﻮﺗﺮ ھﻮ ﻧﻔﺲ اﻟﻤﻮﺿﻮع‬

‫وﻗﻢ ﺑﻨﺴﺦ اﻟﺴﻮرس اﻟﺨﺎص ﺑﺎﻟﻘﺎﻟﺐ‪index.html‬‬

‫ﻣﻦ ﻟﻮﺣﺔ ﺗﺤﻜﻢ اﻟﻤﺠﻠﺔ ﻛﻤﺎ ﺷﺮﺣﻨﺎ ﺳﺎﺑﻘﺎ‬

‫‪template manageràedit indexàcopy‬‬

‫ﻣﻼﺣﻈﻪ ‪:‬راح اﺷﺘﻐﻞ ﻋﻠﻰ ﻗﺎﻟﺐ ‪ JA_Purity‬اﻟﺬى ﻳﺄﺗﻰ ﻣﻊ اﻟﻤﺠﻠﺔ ﺟﺎھﺰ‬

‫اﻟﺤﯿﻦ اﻓﺘﺢ ﺑﺮﻧﺎﻣﺞ اﻟﻔﺮوﻧﺖ ﺑﯿﺞ‪front page‬‬

‫ﺛﻢ اﻧﺘﻘﻞ ﻟﺨﺎﻧﺔ ال ‪code‬ﻣﻦ اﺳﻔﻞ‬

‫وﻗﻢ ﺑﻠﺼﻖ اﻟﺴﻮرس اﻟﺒﺮﻣﺠﻰ ﻟﻠﻘﺎﻟﺐ‬

‫ﺑﻌﺪﻳﻦ ﻓﻰ اﻟﻤﻨﻄﻘﻪ اﻟﻤﺸﺎره ﻗﻢ ﺑﺄﺿﺎﻓﺔ ﺛﻼث ﺟﺪاول‬

‫ﺷﻮف‪.........‬‬

‫‪٢٣‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫اﻟﺤﯿﻦ ﻧﺮﺟﻊ ﻟﺨﺎﻧﺔ ‪ design‬ﻣﻦ أﺳﻔﻞ‬

‫وﻧﻘﻮم ﻓﻰ ﻛﻞ ﺟﺪول ﺑﻮﺿﻊ اﻟﺼﻮرة اﻟﺨﺎﺻﺔ ﺑﻪ‬

‫اﻟﺠﺪول اﻻﻳﺴﺮ=اﻟﺼﻮرة اﻟﯿﺴﺮى‬

‫اﻟﺠﺪول اﻻوﺳﻂ=اﻟﺼﻮرة اﻟﻮﺳﻄﻰ‬

‫اﻟﺠﺪول اﻻﻳﻤﻦ=اﻟﺼﻮرة اﻟﯿﻤﻨﻰ‬

‫‪٢٤‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫ﺑﺤﯿﺚ ﻳﻜﻮن اﻟﺸﻜﻞ اﻟﻨﮫﺎﺋﻰ ھﻜﺬا‬

‫اﻟﺤﯿﻦ ﻧﺮﻛﺰ ﻓﻰ اﻟﺨﻄﻮات اﻟﻘﺎدﻣﺔ‬

‫اوﻻ‪:‬ﻋﻤﻞ اﻟﺼﻮرة اﻟﻮﺳﻄﻰ ﻛﻨﻘﻄﺔ ﺗﻤﺪد‪ ،‬ﺣﺘﻰ ﻳﺘﻤﺪد اﻟﮫﯿﺪر ﻣﻊ اى ﻣﻘﺎس‬

‫ﺷﺎﺷﺔ‬

‫‪1-‬ﻗﻒ ﻋﻠﻰ اﻟﺠﺪول اﻻوﺳﻂ‪،‬ﺛﻢ اﺿﻐﻂ ﻛﻠﯿﻚ ﻣﺮﺗﯿﻦ ‪ ،‬راح ﺗﻔﺘﺢ ﺧﺎﻧﺔ’‪،‬‬
‫اﺧﺘﺎر ‪general‬ﻣﻦ ﻓﻮق واﻧﺴﺦ راﺑﻂ اﻟﺼﻮرة اﻟﻮﺳﻄﻰ‬

‫‪٢٥‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫اﻟﺤﯿﻦ ﺑﻌﺪ ﻧﺴﺦ راﺑﻂ اﻟﺼﻮرة اﻟﻮﺳﻄﻰ‪ ،‬ﻧﻘﻮم ﺑﺤﺬف ھﺬه اﻟﺼﻮرة ﻣﻦ ﺟﺪوﻟﮫﺎ‬

‫ﺛﻢ وأﻧﺖ واﻗﻒ ﻋﻠﻰ ﻧﻔﺲ اﻟﺠﺪول اﻻوﺳﻂ ﺑﻌﺪ ﻣﺎ ﺣﺬﻓﻨﺎ اﻟﺼﻮرة اﻟﻮﺳﻄﻰ‬
‫اﻟﺨﺎﺻﺔ ﺑﻪ‬

‫ﻧﻀﻐﻂ ﻛﻠﯿﻚ ﻳﻤﯿﻦ وﻧﺨﺘﺎر‪cell properties‬‬

‫‪٢٦‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫ﺑﻌﺪﻳﻦ ﻧﻌﻠﻢ ﺑﺎﻻﺳﻔﻞ وﻧﻘﻮم ﺑﻠﺼﻖ راﺑﻂ اﻟﺼﻮرة‬

‫‪٢٧‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫ﺛﺎﻧﯿﺎ‪:‬ﺑﺎﻟﻨﺴﺒﺔ ﻟﻠﺼﻮرة اﻟﯿﺴﺮى واﻟﯿﻤﻨﻰ‪ ،‬راح ﻧﺠﻌﻠﮫﺎ ﻣﻘﺎﺳﺎﺗﮫﺎ‬

‫ﻓﻰ اﻟﺨﻠﯿﺔ ﺣﺘﻰ ﻧﺴﺎوى ﻣﻘﺎس اﻟﺼﻮرة ﺑﻤﻘﺎس اﻟﺠﺪول‬

‫ﺷﻮف‪,,,,,,,,‬‬

‫اﺿﻐﻂ ﻋﻠﻰ اﻟﺼﻮرة اﻟﯿﺴﺮى ﻣﺮﺗﯿﻦ‪ ،‬ﺛﻢ اﺣﻔﻆ ﻣﻘﺎﺳﺎت اﻟﺼﻮرة ﻓﻰ ﺑﺎﻟﻚ‬

‫ﺛﻢ ﻧﻀﻐﻂ ﻋﻠﻰ اﻟﺼﻮرة ﻛﻠﯿﻚ ﻳﻤﯿﻦ وﻧﺨﺘﺎر‪cell properties‬‬

‫ﺛﻢ ﻧﻠﺼﻖ اﻟﻤﻘﺎﺳﺎت ﻓﻰ اﻟﺠﺪاول اﻟﻤﻮﺿﺤﻪ‬

‫‪٢٨‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫ﺛﺎﻟﺜﺎ ‪:‬ازاﻟﺔ ﺣﺪود اﻟﺠﺪاول اﻟﺜﻼﺛﺔ‪......‬‬

‫ﻗﻒ ﺑﺎﻟﻤﺎوس ﻋﻠﻰ اى ﺟﺪول واﺿﻐﻂ ﻛﻠﯿﻚ ﻳﻤﯿﻦ واﺧﺘﺎر‪table properties‬‬

‫ﺛﻢ ﺳﻮى اﻟﺨﯿﺎرات اﻟﻤﺸﺎرة ﻛﺎﻻﺗﻰ‪:‬‬

‫‪٢٩‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫ﺑﮫﯿﻚ ﻧﻜﻮن اﻧﺘﮫﯿﻨﺎ‪...............‬‬

‫اﻟﺤﯿﻦ ارﺟﻊ ﻟﺨﺎﻧﺔ اﻟﻜﻮد ‪code‬ﻣﻦ اﺳﻔﻞ‪ ،‬ﺛﻢ اﻧﺴﺦ اﻟﻘﺎﻟﺐ واﺳﺘﺒﺪﻟﻪ ﺑﺪل اﻟﻠﻰ‬
‫ﻓﻰ ﻟﻮﺣﺔ اﻟﺘﺤﻜﻢ وﺳﻮى ﺣﻔﻆ‬

‫وﻓﻰ اﻟﻨﮫﺎﻳﺔ راح ﺗﺠﺪ اﻟﺸﻜﻞ ﻛﺎﻻﺗﻰ ﻋﻠﻰ اﻟﺮﺋﯿﺴﯿﺔ‬

‫‪٣٠‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫ﻣﻼﺣﻈﻪ ھﺎﻣﻪ ‪/:‬ﻻزم ﺗﻜﻮن ﺷﻐﺎل ﻋﻠﻰ ﻣﺘﺼﻔﺢ اﻻﻧﺘﺮﻧﺖ اﻛﺴﺒﻠﻮرر‬

‫وﻟﯿﺲ ﻣﺘﺼﻔﺢ اﺧﺮ‬

‫ﻻن اﻟﺪرس اﻟﻘﺎدم راح ﻳﻜﻮن ﺧﺎص ﺑﻜﯿﻔﯿﺔ ﺗﻌﺪﻳﻞ رواﺑﻂ اﻟﺼﻮر‬

‫ﺣﺘﻰ ﻟﻮ ﺟﯿﻨﺎ ﻧﺮﻓﻌﮫﺎ ﻋﻠﻰ ﻣﻮﻗﻌﻨﺎ ﺗﺸﺘﻐﻞ ﺗﻤﺎم‬

‫وﺑﺎﻟﻤﺜﻞ ﺳﻮى اﻟﻔﻮﺗﺮ‬

‫اﻟﻰ ھﻨﺎ ﻳﻨﺘﮫﻰ اﻟﺪرس‬

‫اﻟﻤﻄﻠﻮب ﻣﻦ اﻻﻋﻀﺎء‪:‬‬

‫ﺗﺼﻤﯿﻢ اى ھﯿﺪر ووﺿﻌﻪ اﻟﻤﺜﺎل ﺻﻮرة‪..........‬‬

‫‪٣١‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫]‪[joomla5‬ﺷﺮح ال ‪css‬اﻟﺨﺎص ﺑﻜﻞ ﻗﺎﻟﺐ وﻛﯿﻔﯿﺔ اﻟﺘﻌﺪﻳﻞ ﻋﻠﯿﻪ‬

‫دﻋﻮﻧﺎ ﻧﻨﻄﻠﻖ ﻓﻰ ھﺬا اﻟﺪرس ﺑﺎﻟﺘﻜﻠﻢ ﻋﻦ ‪ css‬ﺑﺸﻰء ﺑﺴﯿﻂ‬

‫ﻃﺒﻌﺎ اﻧﺎ ﻣﺎراح اﻋﻘﺪ اﻟﻤﻮﺿﻮع واﺟﻌﻞ اﻟﻤﻮﺿﻮع ﻛﻠﻪ ﺑﺮﻣﺠﺔ‪،‬ﻻﻧﻰ اﻋﻠﻢ ﺗﻤﺎﻣﺎ‬

‫ان ال ‪css‬ﺣﺘﻰ ﺗﻔﮫﻤﻪ ﻻزم ﺗﻜﻮن ﻓﺎھﻤﻪ ﺑﻔﻜﺮة ﺑﺮﻣﺠﯿﺔ وﻟﯿﺲ ﺗﺼﻤﯿﻢ‪ ،‬ﻻن ھﺬا‬
‫ﺑﯿﺴﮫﻞ ﻣﻠﯿﻮن ﻣﺮه ﺳﺮﻋﺔ اﻟﺘﻌﺪﻳﻞ ﻋﻠﻰ اى ﻗﺎﻟﺐ‬

‫اوﻻ ﻣﺎ ﻣﻌﻨﻰ ‪css:‬‬

‫ال ‪css‬ﺗﻌﻨﻰ ‪ Cascading Style Sheets‬اى ﺑﺎﻟﻌﺎﻣﻰ اﻟﻌﺮﺑﻰ اﻟﺸﻜﻞ اﻟﺠﻤﺎﻟﻰ‬

‫ﻟﻠﺼﻔﺤﺔ‬

‫واﻗﺼﺪ ﺑﺎﻟﺸﻜﻞ اﻟﺠﻤﺎﻟﻰ)اﻟﻮان‪-‬ﺧﻄﻮط‪-‬ﺣﺪود ﺟﺪاول‪-‬ﺟﺪاول واﺑﻌﺎد ‪-‬‬

‫ﺧﻠﻔﯿﺎت‪......‬اﻟﺦ(‬

‫ﻟﻦ اﺗﻜﻠﻢ ﻛﺜﯿﺮ ﻋﻦ ﻣﻌﻨﺎھﺎ واﻻﻛﺜﺎر ﻣﻦ اﻟﻜﻼم اﻟﻨﻈﺮى ﻻن اﻟﻠﻰ ﻳﮫﻤﻨﻰ اﻧﻚ‬
‫ﺗﻌﺮف ﺷﻰء ﻋﻤﻠﻰ‬

‫اوﻻ‪ :‬اى ﻗﺎﻟﺐ ﻋﻨﺪ ﺗﺮﻛﯿﺒﻪ ﻋﻠﻰ ﺟﻤﻠﺔ ‪ ،‬ﻋﻨﺪﻣﺎ ﺗﺬھﺐ ﻟﻞ ‪template manager‬‬
‫وﺗﺨﺘﺎر اى ﻗﺎﻟﺐ‬

‫راح ﺗﺠﺪ ﻓﻮق ﻋﻠﻰ اﻟﯿﺴﺎر‪edit css‬‬

‫ﻓﻠﻨﻔﺮض اﻧﻨﺎ راح اﺷﺘﻐﻞ ﻋﻠﻰ ﻗﺎﻟﺐ ‪ ja purity‬ﻣﺜﻞ اﻟﺴﺎﺑﻖ‬

‫وﺧﻠﻮﻧﺎ ﻧﺮوح ﻧﺸﻮف ﺧﯿﺎرات ال ‪css‬ﻓﯿﻪ‬

‫ﺷﻮف‪....‬‬

‫‪٣٢‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫اﻟﺤﯿﻦ ﻟﻤﺎ ﻧﻔﺘﺢ راح ﺗﺠﺪ ھﺎﻟﺨﯿﺎرات‬

‫وﻣﺎ ﻳﮫﻤﻨﺎ ھﻮ‪template.css‬‬

‫ﻻﻧﻪ ھﻮ اﻟﺘﻌﺪﻳﻞ اﻟﺮﺋﯿﺴﻰ ﻟﻠﻘﺎﻟﺐ‬

‫اﻟﺤﯿﻦ ﺑﻌﺪ ﻣﺎ ﻧﻔﺘﺢ راح ﻳﻈﮫﺮ ﻟﻨﺎ اﻟﻜﻮد اﻟﺨﺎص ﺑﺎﻟﻘﺎﻟﺐ‬

‫واﻧﺎ راح اﺗﻜﻠﻢ ﻋﻠﻰ ﻋﺪة ﻧﻘﻂ ﻣﮫﻤﺔ راح ﺗﺨﻠﯿﻚ ﺗﻔﮫﻢ ال‪css‬‬

‫‪-1‬اى ﻣﻠﻒ ‪ css‬راح ﺗﺠﺪ ﺑﺪاﺧﻠﻪ اﻧﻪ ﻣﺠﺰء ﻻﺟﺰاء‪ ،‬وﻳﻜﻮن ﻟﮫﺎ ﻋﻨﻮان‪،‬وﻛﻞ ﺟﺰء‬
‫ﻳﻮﺟﺪ ﻛﻮد ال ‪css‬اﻟﺨﺎص ﺑﻪ‬

‫ﻣﺜﺎل‪ :‬ﺷﻮف اﻟﺼﻮرة‪:‬‬

‫‪٣٣‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫راح ﺗﻼﺣﻆ اﻧﻪ ﻓﻮق اﻟﺨﻂ اﻟﻤﻨﻘﻂ ﻳﻮﺟﺪ ﻋﻨﻮان اﺳﻤﻪ‪header‬‬

‫وﻳﻘﺼﺪ ﺑﻪ اﻧﻪ ھﺬا اﻟﺠﺰء ﺧﺎص ﺑﺎﻟﺘﻌﺪﻳﻞ ﻋﻠﻰ ﻣﻨﻄﻘﻪ اﻟﮫﯿﺪر اﻟﺨﺎﺻﺔ ﺑﺎﻟﻘﺎﻟﺐ‬

‫ﺛﺎﻧﯿﺎ‪ :‬ﺗﻮﺟﺪ ﻣﺼﻄﻠﺤﺎت ﻣﮫﻤﻪ ﻓﻰ اى ﻣﻠﻒ ‪ css‬راح ﺗﻘﺎﺑﻠﻪ‬

‫ﻣﻨﮫﺎ‪:‬‬

‫‪background‬اﻟﺨﻠﻔﯿﺔ‬
‫‪body‬اﻟﺠﺴﻢ‬
‫‪border‬ﺣﺪود اﻟﺠﺪول او اﻟﺒﻠﻮك‬
‫‪font-size‬ﺣﺠﻢ اﻟﺨﻂ‬
‫‪font-family‬ﻧﻮﻋﯿﺔ اﻟﺨﻂ‬

‫‪٣٤‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫ﻧﺄﺧﺬ ﻣﺜﺎل ‪:‬‬

‫ده ﻛﻮد اﻟﺨﻠﻔﯿﺔ ﻓﻰ اول ﻣﻠﻒ‪template.css‬‬

‫واﻟﻤﻨﻄﻘﺔ اﻟﺨﺎﺻﺔ ﺑﻪ‬

‫راح ﺗﺠﺪھﺎ ﻛﺎﻻﺗﻰ‪:‬‬

‫‪٣٥‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫ﺛﺎﻟﺜﺎ‪ :‬ﻋﻨﺪﻣﺎ ﺗﺮﻳﺪ ﺗﻐﯿﯿﺮ ﻟﻮن اى ﻣﻨﻘﻄﺔ‪ ،‬ﻓﺄﻧﮫﺎ ﻟﻜﻞ ﻟﻮن رﻗﻢ ﻣﻌﯿﻦ‬

‫وﻟﺘﻌﺮف اﻟﺮﻗﻢ ﻳﺸﯿﺮ ﻻى ﻟﻮن‬

‫اﻓﺘﺢ اﻟﻔﻮﺗﻮﺷﻮب‬

‫ﺑﻌﺪﻳﻦ اﺿﻐﻂ ﻋﻠﻰ ﻋﻼﻣﺔ اﻟﻠﻮن ﻋﻠﻰ اﻟﯿﺴﺎر‬

‫وﺷﻮف‪..........‬‬

‫‪٣٦‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫راﺑﻌﺎ‪ :‬اﻛﻮاد ال ‪css‬ﺗﻘﺴﻢ ﻻﺟﺰاء ﻛﺜﯿﺮة‬

‫ﻣﺜﻼ راح ﺗﺠﺪ ان اول اﻟﻘﺎﻟﺐ ﻳﺒﺪأ ﺑﺴﻮرس ال ‪body‬اى ﺟﺴﻢ اﻟﻘﺎﻟﺐ‬

‫‪٣٧‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫ﺑﻌﺪﻳﻦ ﻓﯿﻪ‪header‬‬

‫ﺑﻌﺪﻳﻦ ﻓﯿﻪ ‪ main navigation‬وﻳﻘﺼﺪ ﺑﻪ اﻟﻘﻮاﺋﻢ اﻟﺮﺋﯿﺴﯿﺔ‬

‫ﺑﻌﺪﻳﻦ‪footer‬‬

‫وھﻜﺬا‪...........‬‬

‫ﻃﺒﻌﺎ ﻻزم ﺗﺠﺮب ﻣﺮه واﺗﻨﯿﻦ وﻋﺸﺮة ﻟﺤﺪ ﻣﺎ ﺗﺒﺪأ ﺗﺄﺧﺬ ﻋﻠﻰ اﻟﻤﻮﺿﻮع وﺗﺘﺄﻗﻠﻢ‬
‫ﻣﻌﺎه‬

‫ﻻﻧﻰ زى ﻣﺎ ﻗﻠﺖ اﻟﻤﻔﺮوص ان ال ‪css‬ﺗﺸﺮح ﺑﻠﻐﺔ ﺑﺮﻣﺠﺔ‪ ،‬وﻟﯿﺲ ﺑﻠﻐﺔ ﺗﺼﻤﯿﻢ‬

‫ﺣﺘﻰ ﺗﺴﮫﻞ ﻋﻠﯿﻚ اﻛﺘﺮ‬

‫أﺗﻤﻨﻰ ﺗﻜﻮن وﺻﻠﺖ اﻟﻔﻜﺮة‬

‫اﻟﻤﻄﻠﻮب ﻣﻦ اﻻﻋﻀﺎء‪ :‬وﺿﻊ ﺻﻮرة ﻻى ﺟﺰء ﻣﻦ اﻟﻘﺎﻟﺐ ﻗﻤﺖ ﺑﺘﻐﯿﯿﺮ اﻟﻠﻮن‬

‫اﻟﺨﺎص ﺑﻪ‬
‫ﺳﻮاء ﺧﻠﻔﯿﺔ ﺣﺪود ﺟﺪول اى ﺷﻰء‪........‬اﻟﺦ‬

‫ﺗﺤﯿﺎﺗﻰ‬

‫‪٣٨‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫]‪[joomla6‬ﺷﺮح ﺗﻨﻈﯿﻢ أﻣﺎﻛﻦ اﻟﻤﻮدﻳﻼت‪+‬ﺗﻌﺪﻳﻞ ﺧﻄﻮط اﻟﻘﺎﻟﺐ ﻟﺮؤﻳﺔ‬

‫أوﺿﺢ‬

‫ﻧﺴﺘﻜﻤﻞ ﻣﻌﻜﻢ ﻣﺸﻮار اﻟﺪورة وھﺎﻗﺪ اوﺷﻜﻨﺎ ان ﻧﻨﺠﺰ اﻟﻌﻤﻞ اﻟﺬى ﺑﺪأﻧﺎ ﺑﻪ‬

‫ﻓﻰ ھﺬا اﻟﺪرس راح ﻧﺘﻌﺮف ﻋﻠﻰ ﻛﯿﻔﯿﺔ ﺗﻨﻈﯿﻢ أﻣﺎﻛﻦ اﻟﻤﻮدﻳﻼت ﻟﻠﻤﺠﻠﺔ‬

‫أوﻻ‪ :‬ﻧﺼﯿﺤﺔ ﻣﮫﻤﻪ ﻗﺪ ﻳﻐﻔﻞ ﻋﻨﮫﺎ اﻟﻜﺜﯿﺮ ﺟﺪااا>>>>>>>>>>>>>‬

‫ﻋﻨﺪ رﻏﺒﺘﻚ ﻓﻰ ﺗﺮﻛﯿﺐ ﻗﺎﻟﺐ ﻋﻠﻰ اﻟﻤﺠﻠﺔ‬

‫ﻳﻔﻀﻞ ان ﺗﻨﺼﺐ اﻟﻤﺠﻠﺔ‪+‬اﻟﻘﺎﻟﺐ ﻣﻌﺎ ﺑﻤﺠﻠﺪ‪quick start‬‬

‫ﻣﺎ ﻓﮫﻤﺖ ﺷﻰء‬

‫ﻧﻔﮫﻤﻚ ‪ ،‬ﻋﻨﺪﻣﺎ ﺗﻨﺰل اى ﻗﺎﻟﺐ ﻣﻦ اى ﻣﻮﻗﻊ اﺟﻨﺒﻰ‬

‫راح ﺗﺠﺪ ان اﻟﻘﺎﻟﺐ ﺑﻪ ﻣﺠﻠﺪﻳﻦ‬

‫ﻣﺠﻠﺪ اﻟﻘﺎﻟﺐ‪template‬‬

‫ﻣﺠﻠﺪ اﺧﺮ اﺳﻤﻪ‪quick start‬‬

‫‪٣٩‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫ﻣﺠﻠﺪ ‪ quick start‬ھﻮ ﻋﺒﺎرة ﻋﻦ ﻣﺠﻠﺔ ﺟﻤﻠﺔ ‪ ،‬ﻣﺪﻣﺞ ﻣﻌﮫﺎ اﻟﻘﺎﻟﺐ‬

‫ﺑﺤﯿﺚ ﻋﻨﺪ ﺗﻨﺼﯿﺐ اﻟﻤﺠﻠﺔ راح ﺗﺠﺪ اﻟﻘﺎﻟﺐ رﻛﺐ اوﺗﻮﻣﺎﺗﯿﻚ دون ﺗﺪﺧﻞ ﻣﻨﻚ‬

‫ﺑﺪل ﻣﻦ اﻟﻘﺎﻟﺐ اﻻﻓﺘﺮاﺿﻰ‬

‫ﻟﻜﻦ ﻣﺎاﻟﻤﯿﺰة ﻓﻰ ذﻟﻚ!!!‬

‫ﻟﮫﺎ ﻣﯿﺰة ﻛﺒﯿﺮة‪ ،‬وھﻰ اﻧﻚ ﺑﺘﻨﺼﯿﺐ ‪ quick start‬ﺑﺪﻻ ﻣﻦ ﺗﺮﻛﯿﺐ اﻟﻘﺎﻟﺐ ﺑﻌﺪ‬
‫ﺗﻨﺼﯿﺐ اﻟﻤﺠﻠﺔ‪ ،‬راح ﺗﺠﺪ ان ‪ positions‬اى اﻣﺎﻛﻦ اﻟﻤﻮدﻳﻼت ﻛﻠﮫﺎ ﻣﻮﺟﻮدة‬

‫ﻋﻠﻰ ﻋﻜﺲ ﻋﻨﺪﻣﺎ ﻧﺮﻛﺐ اﻟﻘﺎﻟﺐ ﺑﻌﺪ ﺗﻨﺼﯿﺐ اﻟﻤﺠﻠﺔ‪,‬‬

‫ﻗﺪ ﺗﺠﺪ ﺑﻌﺾ ھﺬه اﻻﻣﺎﻛﻦ ﻏﯿﺮ ﻣﻮﺟﻮدة‬

‫‪٤٠‬‬
 MTWER.COM‫ﻣٌﻄﻮر‬
______________________________________________________

٤١
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫ھﺬا ﻣﺜﺎل ﻻﻣﺎﻛﻦ اﻟﻤﻮدﻳﻼت ﻓﻰ ھﺬا اﻟﻘﺎﻟﺐ‬

‫أﻋﺘﻘﺪ ﺑﮫﯿﻚ وﺻﻠﺖ اﻟﻤﻌﻠﻮﻣﺔ!!‬

‫ھﺬه ﻛﺎﻧﺖ أھﻢ ﻧﻘﻄﺔ ﺣﺒﯿﺖ أوﺿﺤﮫﺎ ﺑﺨﺼﻮص اﻟﻤﻮدﻳﻼت‬

‫اﻟﺤﯿﻦ ﻧﻨﺘﻘﻞ ﻟﻠﻨﻘﻄﺔ اﻟﺜﺎﻧﯿﺔ‪:‬‬

‫ﺗﻐﯿﯿﺮ ﺧﻄﻮط اﻟﻘﺎﻟﺐ ﺣﺘﻰ ﻳﺘﻮاﻓﻖ ﻣﻊ ﻟﻐﺘﻨﺎ اﻟﻌﺮﺑﯿﺔ‬

‫اوﻻ ﻣﻦ ‪ template manager‬ﻧﺮوح وﻧﺨﺘﺎر ﻗﺎﻟﺒﻨﺎ‬

‫ﺑﻌﺪﻳﻦ ﻧﺨﺘﺎر‪edit css‬‬

‫‪٤٢‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫ﺛﻢ ﻧﺨﺘﺎر‪template.css‬‬

‫راح ﻧﺠﺪ ﻓﻰ اول اﻟﻜﻮد ‪ font family‬ﺗﺤﺖ ﻋﻨﻮان‪body‬‬

‫راح ﻧﻐﯿﺮه ‪ ،‬او ﺣﺘﻰ ﻧﻀﯿﻒ ﻟﻪ ﺧﻂ‪tahoma‬‬

‫ﺷﻮف‪......‬‬

‫‪٤٣‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫وھﺬه ﺟﻤﻠﺔ ﺟﺎھﺰة ﻟﻮ ﺗﺤﺐ ﺗﻀﯿﻔﮫﺎ‬

‫ﻛﻮد‪:‬‬
‫;‪font-family: "Tahoma", Arial, Tahoma, sans-serif‬‬

‫ال "" ﻣﻔﯿﺪة ﺣﺘﻰ ﺗﻌﺘﻤﺪ ھﺬا اﻟﺨﻂ ھﻮ اﻟﺨﻂ اﻟﺮﺳﻤﻰ ﻟﻠﻘﺎﻟﺐ‬

‫دﻋﻮﻧﺎ ﻧﺸﻮف اﻟﻔﺮق ﻗﺒﻞ وﺑﻌﺪ اﺿﺎﻓﺔ ﺧﻂ‪tahoma‬‬

‫‪٤٤‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫ﻗﺒﻞ‪:‬‬

‫ﺑﻌﺪ‪:‬‬

‫ﺷﻮﻓﺘﻮا اﻟﻔﺮق‪:‬‬

‫أروع‬

‫ﺑﮫﯿﻚ ﻳﻜﻮن اﻧﺘﮫﻰ درﺳﻨﺎ‬

‫وﻧﺮﺟﻮ ﻣﻦ اﻟﺠﻤﯿﻊ ﺗﻄﺒﯿﻖ اﻟﺪرس‬

‫‪٤٥‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫]‪[joomla final‬درس ﺑﺮﻣﺠﺔ ﻗﺎﻟﺐ ﻣﺠﻠﺔ ﺟﻤﻠﺔ ﺑﻨﻔﺴﻚ ﻣﻦ اﻟﺼﻔﺮ‬

‫)أﻗﻮى درس ﻓﻰ اﻟﺪورة(‬

‫ﺑﮫﺬا اﻟﺪرس اﻻﺧﯿﺮ راح ﻧﺨﺘﻢ اﻟﻠﻘﺎء ﻣﻊ ﻣﺠﻠﺘﻨﺎ اﻟﺮاﺋﻌﺔ ‪ joomla ,‬وﺑﻌﺪھﺎ ﻧﻨﺘﻘﻞ‬
‫ﻟﺸﺮح ﻣﺠﻠﺔ‪mkportal‬‬

‫ھﺬا اﻟﺪرس ﻟﻢ ﻳﺸﺮح ﻣﻦ ﻗﺒﻞ ‪ ،‬واﻟﺪرس راح ﻳﻜﻮن ﻻول ﻣﺮه ﻻﻋﻀﺎء اﻟﺪورة ﻓﻘﻂ‬

‫ﻓﮫﯿﺎ ﻧﺒﺪأ ﻃﺮﻳﻖ ﺑﺮﻣﺠﺔ ﻗﻮاﻟﺐ اﻟﻤﺠﻠﺔ ﻣﻦ ھﻨﺎ>>>>>>>>>>‬

‫اوﻻ‪ :‬اذھﺐ اﻟﻰ ﻣﺠﻠﺪ ‪ templates‬اﻟﺨﺎص ﺑﺎﻟﻘﻮاﻟﺐ‬

‫ﺛﻢ أﻧﺸﺄ ﻣﻠﻒ ﺟﺪﻳﺪ وراح ﻧﺴﻤﯿﻪ ‪temp_mtwer‬‬

‫ﺑﺪاﺧﻞ ﻣﺠﻠﺪ ‪ temp_mtwer ,‬راح ﻧﻨﺸﺄ ﻣﻠﻔﯿﻦ‪:‬‬

‫‪1-‬ﻣﻠﻒ‪templatedetails.xml‬‬
‫‪2-‬ﻣﻠﻒ‪index.php‬‬

‫‪#‬ﺻﻮره ‪١‬‬

‫‪٤٦‬‬
 MTWER.COM‫ﻣٌﻄﻮر‬
______________________________________________________

:‫ ﺛﻢ ﺿﻊ ﺑﻪ اﻟﻜﻮد اﻷﺗﻰ‬templatedetails.xml ‫اﻓﺘﺢ ﻣﻠﻒ‬-١

:‫ﻛﻮد‬
<?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‬‬
‫______________________________________________________‬

‫‪-٢‬اﻓﺘﺢ ﻣﻠﻒ ‪ index.php‬ﺛﻢ ﺿﻊ ﺑﻪ اﻟﻜﻮد اﻷﺗﻰ‪:‬‬

‫ﻛﻮد‪:‬‬
‫‪<!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‬‬

‫‪#########################‬‬
‫ﻣﺜﺎل ﻧﻈﺮى ﻟﻼﻃﻼع ﻓﻘﻂ‪:‬‬

‫ﻟﻮ اﻓﺘﺮﺿﻨﺎ ان ﻋﺮض ﻣﻨﻄﻘﺔ ﻓﻰ اﻟﺼﻔﺤﺔ اﻟﻜﻠﻰ = ‪px٥٠٠‬‬

‫ال‪px ٣٠٠‬ﻓﻰ ال ‪css‬ﺗﻘﺴﻢ ﻛﺎﻷﺗﻰ‪:‬‬

‫)‪width content+padding(lt&rt)+border (lt+rt)+margin(lt+rt‬‬

‫ﻟﻮ وزﻋﻨﺎ اﻟﻌﺮض اﻟﻜﻠﻰ ‪ ٥٠٠‬ﻋﻠﻰ ھﺬه اﻟﻤﻨﺎﻃﻖ ﻓﺮاح ﺗﻜﻮن ﻋﻠﻰ ﺳﺒﯿﻞ اﻟﻤﺜﺎل‬
‫ﻛﺎﻻﺗﻰ‪:‬‬

‫‪width content=400 px‬‬

‫‪padding=10 px‬‬
‫‪border=10 px‬‬
‫‪margin=5px‬‬

‫ﺑﮫﯿﻚ راح ﻳﻜﻮن اﻻﺟﻤﺎﻟﻰ ‪ ٥٠٠‬ﺑﻜﺴﻞ‬

‫ﻧﺄﺗﻰ اﻻن ﻟﻔﺎﺋﺪة ﺟﻤﻠﺘﻨﺎ‬

‫ﻓﻰ ﺑﻌﺾ اﻟﻤﺘﺼﻔﺤﺎت ﻛﺎﻻﻛﺴﺒﻠﻮرر اﻟﻘﺪﻳﻢ ﻳﺘﻢ اﺿﺎﻓﺔ ﻗﯿﻤﺔ زﻳﺎده ﻟﻠﻤﺤﺎذاة‬
‫‪padding‬ﺑﺪل ﻣﺎ ﺗﻜﻮن ‪ ١٠‬راح ﺗﺼﯿﺮ ﻣﺜﻼ ‪١٥‬‬
‫زﻳﺎدة اﻟﻘﯿﻤﺔ راخ ﺗﺆﺛﺮ ﺑﺎﻟﺴﻠﺐ ﻋﻠﻰ ﺷﻜﻞ اﻟﺼﻔﺤﺔ ﺑﺎﻟﻜﺎﻣﻞ‬

‫ﻣﻦ ھﻨﺎ ﺟﺎءة ﻓﺎﺋﺪة اﻟﺠﻤﻠﺔ ھﺬه ﺣﺘﻰ ﻣﺎ ﺗﺴﺘﮫﺒﻞ اى ﻣﺘﺼﻔﺤﺎت وﺗﻀﯿﻒ اى‬

‫‪٤٨‬‬
 MTWER.COM‫ﻣٌﻄﻮر‬
______________________________________________________

‫ﻗﯿﻤﺔ ﻋﻠﻰ ﻛﯿﻔﮫﺎ‬

#######################

:‫ﻧﻜﻤﻞ ﺷﺮح ﺑﻘﯿﺔ اﻟﻜﻮد‬

‫ﻧﺄﺗﻰ ﻟﺠﻤﻠﺔ‬

PHP:‫ﻛﻮد‬
<jdoc:include type="head" />

title‫ﻓﮫﻰ ﻣﮫﻤﻪ ﻻدراج ھﯿﺪر اﻟﻘﺎﻟﺐ ﺣﺘﻰ ﻳﻈﮫﺮ ﻋﻨﻮان اﻟﺼﻔﺤﺔ‬

‫اﻻن ﻧﻜﻤﻞ اﻟﺸﺮح‬

‫ﻧﻨﻄﻠﻖ اﻷن ﻟﻌﻤﻞ اﻟﻘﺎﻟﺐ وﺗﺠﻤﯿﻠﻪ‬

:‫ اﻻﺗﻰ‬index.php ‫اﻻن راح ﻧﻀﯿﻒ ﻟﻠﻜﻮد اﻟﺴﺎﺑﻖ ﻓﻰ ﺻﻔﺤﺔ‬

:‫ﻛﻮد‬
<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>

<jdoc:include type="component" />

</body>
</html>

٤٩
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫اﻻن ﻧﺮﻳﺪ ان ﻧﻨﻄﻠﻊ ﻋﻠﻰ ﺷﻜﻞ ﻗﺎﻟﺒﻨﺎ ﻛﺸﻜﻞ ﻣﺒﺪﺋﻰ اوﻟﻰ‬

‫ادﻟﺦ ﻟﻠﻮﺣﺔ اﻟﺘﺤﻜﻢ ﺛﻢ ‪ template manager‬وراح ﺗﺠﺪ ان اﺳﻢ اﻟﻘﺎﻟﺐ اﻟﺨﺎص‬

‫ﺑﻨﺎ‬

‫ﺑﻌﺪﻳﻦ اﺧﺘﺎره واﺿﻐﻂ ﻋﻠﻰ ‪ default‬ﺣﺘﻰ ﻳﺼﯿﺮ ﻗﺎﻟﺒﻨﺎ ھﻮ اﻷﻓﺘﺮاﺿﻰ‬

‫‪#‬ﺻﻮره ‪٢‬‬

‫اﻟﺤﯿﻦ ﻧﺮوح ﻟﻤﺘﺼﻔﺤﻨﺎ وﻧﺸﻮف ﺷﻜﻞ اﻟﻘﺎﻟﺐ‬

‫‪#‬ﺻﻮره ‪٣‬‬

‫واو ﺟﻤﯿﻞ‬

‫‪٥٠‬‬
 MTWER.COM‫ﻣٌﻄﻮر‬
______________________________________________________

:‫ﻟﺴﻪ راح ﻧﺴﻮى ﻓﯿﻪ ﺷﻐﻞ ﻛﺜﯿﺮ‬

‫اﻟﺤﯿﻦ راح ﻧﺘﻌﻠﻢ ﻛﯿﻒ ﻧﻀﯿﻒ ﺑﻮﺳﺸﻦ ﻟﻠﻘﺎﻟﺐ‬

:‫ ﻛﺎن ﻓﯿﻪ اﻻﺗﻰ‬xml ‫ﻟﻮ ﺗﺘﺬﻛﺮ ﻛﻮد‬

:‫ﻛﻮد‬
<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>

‫راح ﻧﺤﺪد ﺑﻮﺳﺸﻦ وﻧﺨﻠﯿﻪ ﻳﻈﮫﺮ‬

‫ﻛﯿﻒ؟‬

‫ وﻧﻀﯿﻒ ﻟﻪ ﺑﻮﺳﺸﻦ اﻟﻘﺎﺋﻤﺔ اﻟﯿﺴﺮى واﻟﻔﻮﺗﺮ‬index.php ‫ﻧﻔﺘﺢ ﻣﻠﻒ‬

:‫ﻛﻮد‬
<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‫ﻣٌﻄﻮر‬
______________________________________________________

<jdoc:include type="head" />

</head>

<body>

<jdoc:include type="component" />

<jdoc:include type="modules" name="left" />
<jdoc:include type="modules" name="footer" />
</body>
</html>
‫ﻣﻦ ﻟﻮﺣﺔ اﻟﺘﺤﻜﻢ‬module manager ‫اﻟﺤﯿﻦ ﻟﻮ رﺣﻨﺎ ل‬

main menu‫راح ﻧﺠﺪ ﻣﻮدﻳﻞ اﺳﻤﻪ‬

‫وھﻮ ﻛﺎن ﻣﻀﺎف ﺳﺎﺑﻘﺎ‬

‫ﺣﺘﻰ ﻳﻈﮫﺮ اﻟﻘﺎﺋﻤﺔ اﻟﯿﺴﺮى‬

٤ ‫ﺻﻮره‬#

‫اﻟﺤﯿﻦ ﻧﺮﻳﺪ اﻇﮫﺎر ﻛﻮد اﻟﻔﻮﺗﺮ ﻋﻠﻰ ﺳﺒﯿﻞ اﻧﻪ ﻏﯿﺮ ﻣﻮﺟﻮد ﻣﻦ ﻗﺒﻞ‬

٥٢
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫ﻧﺮوح ل ‪module manager‬ﺛﻢ ﻧﺨﺘﺎر ‪ new‬ﺛﻢ ﻧﺨﺘﺎر ال‪footer‬‬

‫‪#‬ﺻﻮره ‪٥‬‬

‫ﻧﺨﺘﺎر اﻟﺒﻮﺳﺸﻦ‪footer‬‬
‫‪#‬ﺻﻮره ‪٦‬‬

‫ﻧﺮوح ﻧﺸﻮف وراح ﺗﺠﺪ اﻟﻔﻮﺗﺮ ﻣﻮﺟﻮد‬

‫‪#‬ﺻﻮره ‪٧‬‬

‫ﻃﺒﻌﺎ ھﺎﻻﺷﯿﺎء ﻛﺎﻧﺖ ﻣﻮﺟﻮده ﻻﻧﻨﺎ ﻧﺼﺒﻨﺎھﺎ ﻟﻤﺎ اﺧﺘﺮﻧﺎ ﻋﺒﺎرة ‪install simple‬‬

‫‪٥٣‬‬
 MTWER.COM‫ﻣٌﻄﻮر‬
______________________________________________________

‫واﺣﻨﺎ ﺑﻨﺼﺐ اﻟﻤﺠﻠﺔ‬data

‫ﻧﻜﻤﻞ وﻧﻀﯿﻒ اﻟﻤﺰﻳﺪ ﻣﻦ اﻟﺒﻮﺳﺸﻦ واﻟﻤﻮدﻳﻠﺰ‬

‫ ﺑﺠﺎﻧﺐ اﻟﻤﻠﻔﺎت اﻟﺴﺎﺑﻘﺔ‬css ‫اﻟﺤﯿﻦ راح ﻧﺴﺘﺨﺪم ﻣﻠﻒ‬

‫ﻛﻞ ﺟﺰء ﻋﻠﻰ ﺣﺪا ﺣﺘﻰ‬index.php ‫ﻟﻜﻦ ﻗﺒﻞ ذﻟﻚ ﻧﺮﻳﺪ ان ﻧﺤﺪد ﻓﻰ ﻣﻠﻒ ال‬
‫ﻋﻠﯿﻪ‬css ‫ ﻧﺤﺪد اﻟﺠﺰء اﻟﻤﺮاد اﻻﺧﺘﯿﺎر وﺗﻨﻔﯿﺬ ال‬css ‫ﻓﻰ ﻛﻮد‬

‫ ﻟﺘﺤﺪﻳﺪ اﻟﺠﺰء ﺑﺄﺳﻢ ﻣﻌﯿﻦ ﻳﻤﻜﻨﻨﺎ‬id ‫ ﻣﻊ‬division ‫وراح ﻧﺴﺘﺤﺪم ﺗﻨﺼﯿﺺ‬

‫اﺧﺘﯿﺎره ﻟﻨﻌﺪل ﻋﻠﯿﻪ‬

link‫ ﺑﺎﻻﻣﺮ‬css ‫وﻻ ﻧﻨﺴﻰ ان ﻧﺸﯿﺮ ﻟﻤﻜﺎن ﻣﻠﻒ‬

‫ ﺑﮫﺬه اﻟﺼﻮرة‬index.php ‫ﻳﻌﻨﻰ ﺑﻌﺪ ھﺬا اﻟﺘﻌﺪﻳﻼت راح ﻳﺼﺒﺢ ﻛﻮد‬

:‫ﻛﻮد‬
<!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" />
<link rel="stylesheet" href="<?php echo $this->baseurl
?>/templates/temp_mtwer/css/template.css" type="text/css" />
</head>

<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‬‬

‫اﻟﺤﯿﻦ ﻓﻰ داﺧﻞ ﻣﺠﻠﺪ اﻟﻘﺎﻟﺐ ‪ temp_mtwer‬راح ﻧﺴﻮى ﻣﺠﻠﺪ وﻧﺴﻤﯿﻪ‪css‬‬

‫داﺧﻞ ھﺬا اﻟﻤﺠﻠﺪ ﻧﺴﻮى ﻣﻠﻒ وﻧﺴﻤﯿﻪ‪template.css‬‬

‫‪#‬ﺻﻮره ‪٨‬‬

‫وراح ﻧﻀﯿﻒ ﻟﻪ ھﺬا اﻟﻜﻮد اﻟﺨﺎص ﺑﺎﻟﺘﻌﺪﻳﻞ ﻋﻠﻰ اﻟﺒﻮﺳﺸﻦ واﻟﻤﻮدﻳﻼت‬

‫ﻛﻮد‪:‬‬
‫{*‬
‫;‪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‫ﺛﻢ‬

login‫ وﻣﺮه اﺧﺮه ل‬search ‫ﺛﻢ ﻧﺨﺘﺎر‬

............‫وﻧﺨﺘﺎر اﻟﺒﻮﺳﺸﻦ اﻟﺨﺎص ﺑﮫﻢ وھﻜﺬا‬

٥٦
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫ﺑﮫﯿﻚ ﻳﻜﻮن اﻧﺘﮫﻰ درﺳﻨﺎ ﻋﻠﻰ أﻣﻞ ان ﺗﻜﻮﻧﻮا ﻋﺮﻓﺘﻮا ﻃﺮﻳﻘﺔ ﻋﻤﻞ ﻗﻮاﻟﺐ ﺟﻤﻠﺔ‬
‫ﺑﺒﺴﺎﻃﺔ‬

‫وﻓﻰ دروس ﻗﺎدﻣﺔ راح ﻧﺤﺎول ﻧﺘﻌﻤﻖ ﻟﻌﻤﻞ ﻗﺎﻟﺐ اﺣﺘﺮاﻓﻰ ﻣﻦ اﻟﺪرﺟﺔ اﻷوﻟﻰ‬

‫ﻧﺮﺟﻮ ﻣﻦ اﻟﺠﻤﯿﻊ اﻟﺘﻄﺒﯿﻖ‬

‫ﺗﺤﯿﺎﺗﻰ‬

‫‪٥٧‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫اﻟﺠﺰء اﻟﺜﺎﻧﻰ ﻣﻦ اﻟﺪورة ‪ :‬اﻟﺘﻌﺎﻣﻞ ﻣﻊ ﻣﺠﻠﺔ ‪mkportal‬‬

‫]‪ [mkportal1‬ﺷﺮح ﺗﺮﻛﯿﺐ اﻟﻤﺠﻠﺔ ﻋﻠﻰ اﻟﺴﯿﺮﻓﺮ اﻟﻤﺤﻠﻰ وﺗﺸﻐﯿﻠﮫﺎ‬

‫ﺑﻌﺪ ﻣﺎ اﻧﺘﮫﯿﻨﺎ ﻣﻦ اﻟﺘﻌﺎﻣﻞ ﻣﻊ ﻣﺠﻠﺔ ‪ joomla‬ﺑﻜﻞ ﻣﺎ ﻳﺨﺼﮫﺎ‬

‫راح ﻧﻨﺘﻘﻞ ﻟﻠﻤﺠﻠﺔ اﻟﺜﺎﻧﯿﺔ اﻟﺮاﺋﻌﺔ‪mkportal‬‬

‫اوﻻ‪ :‬ﺣﻤﻞ اﻟﻤﺠﻠﺔ ﻧﺴﺨﺔ اﻟﻤﺠﻠﺔ‬

‫‪ifile.it‬‬

‫اﺿﻐــــﻂ ھـــﻨﺎ‬

‫ﺑﻌﺪ اﻟﺘﺤﻤﯿﻞ‪:‬‬

‫‪1-‬ﻧﺮوح ﻟﻞ ‪phpmyadmin‬ﻓﻰ اﻟﺴﯿﺮﻓﺮ اﻟﻤﺤﻠﻰ‪ ،‬وﻧﻘﻮم ﺑﻌﻤﻞ ﻗﺎﻋﺪة ﺑﯿﺎﻧﺎت‬

‫ﺧﺎﺻﺔ ﺑﺎﻟﻤﺠﻠﺔ‬

‫‪-2‬ﺑﻌﺪ وﺿﻊ ﻣﺠﻠﺪ اﻟﻤﺠﻠﺪ ﻓﻰ >‪ www‬ﻓﻚ اﻟﻀﻐﻂ وراح ﺗﺠﺪ ﻣﺠﻠﺪ > ‪upload‬‬

‫‪٥٨‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫ﺧﺬه ‪ cut‬واﺟﻌﻠﻪ ھﻮ اﻟﻠﻰ ﻓﻰ ‪ www‬ﻣﺒﺎﺷﺮة‬

‫‪-3‬اذھﺐ ﻟﻤﻠﻒ ‪ mk_mysql.php‬ﺣﺘﻰ ﻧﻐﯿﺮ ﺑﯿﺎﻧﺎت اﻟﻜﻮﻧﻔﺞ ﻟﻼﺗﺼﺎل ﺑﺎﻟﻘﺎﻋﺪة‬

‫وراح ﺗﺠﺪه ﻋﻠﻰ ھﺬا اﻟﻤﺴﺎر ﻋﻠﻰ اﻓﺘﺮاض ان اﻟﺴﯿﺮﻓﺮ ﻋﻠﻰ‪c‬‬

‫ﻛﻮد‪:‬‬
‫‪C:\AppServ\www\upload\mkportal\include‬‬

‫‪-4‬ﺑﻌﺪﻳﻦ ﻧﻔﺘﺤﻪ وﻧﻐﯿﺮ ﺑﯿﺎﻧﺎت اﻻﺗﺼﺎل ﺑﺎﻟﻘﺎﻋﺪة‬

‫‪٥٩‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫‪-5‬ﻧﺴﺘﺪﻋﻰ اﻟﻤﺠﻠﺔ ﻣﻦ اﻟﻤﺘﺼﻔﺢ ﻟﺘﻨﺼﯿﺒﮫﺎ ﺑﮫﺬا اﻟﻤﺴﺎر‬

‫ﻛﻮد‪:‬‬
‫‪http://localhost/upload/mkportal/mk_install.php‬‬

‫‪6-‬ﻧﺨﺘﺎر ﻧﻮع اﻟﻤﻨﺘﺪى اﻟﻠﻰ راح ﻧﺮﻛﺒﻪ ﻣﻊ اﻟﻤﺠﻠﺔ‬

‫‪-6‬ﻧﺘﺮك ھﺬه اﻻﻋﺪادات ﻛﻤﺎ ھﻰ‬

‫‪٦٠‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫‪-7‬ﻧﻜﻤﻞ اﻟﺘﻨﺼﯿﺐ‪..............‬‬

‫‪-9‬ﻧﻜﺘﺐ اﻟﺒﯿﺎﻧﺎت اﻟﺨﺎﺻﺔ ﺑﻘﺎﻋﺪة اﻟﺒﯿﺎﻧﺎت‪+‬ﻋﻀﻮﻳﺔ اﻷدﻣﻦ‬

‫‪٦١‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫‪10-‬ﻧﻜﻤﻞ اﻟﺘﻨﺼﯿﺐ‪...........‬‬

‫‪٦٢‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫‪11-‬ﻣﺒﺮوك رﻛﺒﺖ اﻟﻨﺴﺨﺔ‬

‫‪12-‬وھﺬه ھﻰ اﻟﻤﺠﻠﺔ واﻟﻤﻨﺘﺪى‬

‫ﺑﮫﯿﻚ اﻧﺘﮫﻰ ﺗﺮﻛﯿﺐ اﻟﻤﺠﻠﺔ ﺑﻨﺠﺎح‬

‫ﺗﺤﯿﺎﺗﻰ‬

‫ﻧﺮﺟﻮ ﻣﻦ اﻟﺠﻤﯿﻊ ﺗﻄﺒﯿﻖ اﻟﺪرس وﺗﺮﻛﯿﺐ اﻟﻤﺠﻠﺔ ‪+‬وﺿﻊ ﺻﻮرة ﻟﻠﻤﺠﻠﺔ ﻋﻨﺪك‬

‫‪٦٣‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫]‪[mkportal2‬درس ﺗﺄﻃﯿﺮ وﺗﺼﻤﯿﻢ ﺑﻠﻮﻛﺎت اﻟﻤﺠﻠﺔ‬

‫ﺑﺴﻢ اﷲ اﻟﺮﺣﻤﻦ اﻟﺮﺣﯿﻢ‬

‫ﻓﻰ ھﺬا اﻟﺪرس راح ﻧﺘﻌﺮف ﻋﻠﻰ ﻛﯿﻔﯿﺔ ﻋﻤﻞ درس ﺗﺄﻃﯿﺮ ﺑﻠﻮﻛﺎت اﻟﻤﺠﻠﺔ واﻧﺎ‬
‫راح اﺷﺮح اﺑﺴﻂ ﻃﺮﻳﻘﺔ رﻏﻢ اﻧﮫﺎ ﻟﮫﺎ ﻋﺪة ﻃﺮق‬

‫ﻧﺒﺪا ﻋﻠﻰ ﺑﺮﻛﻪ اﷲ‪.......‬‬

‫اول ﺷﻰء رح ﻧﺮوح ﻟﻤﺴﺎر اﻟﺼﻮر اﻟﺨﺎﺻﺔ ﺑﺎﻟﻤﺠﻠﺔ ﺑﻌﺪ ﺗﺮﻛﯿﺒﮫﺎ ﺣﺘﻰ ﻧﺒﺪأ ﻓﻰ‬
‫اﻟﺘﻌﺪﻳﻞ ﻋﻠﯿﮫﺎ‬

‫‪#‬ﺻﻮره ‪١‬‬

‫اﻟﺤﯿﻦ ﻓﻠﻨﻔﺮض اﻧﻨﺎ ﻧﺮﻳﺪ اﻟﺘﻌﺪﻳﻞ ﻋﻠﻰ اﻟﺘﺄﻃﯿﺮ ﺣﻮل اﻟﺒﻠﻮﻛﺎت‬

‫ﻓﻠﻨﺄﺧﺬ ﻋﻠﻰ ﺳﺒﯿﻞ اﻟﻤﺜﺎل ھﺬا اﻟﺒﻠﻮك‬
‫‪#‬ﺻﻮره‪٢‬‬

‫ھﺬا اﻟﺘﺄﻃﯿﺮ ﻣﻘﻄﻊ ﻧﻔﺲ اﻟﺸﻜﻞ اﻷﺗﻰ‬

‫‪#‬ﺻﻮره‪٣‬‬

‫‪٦٤‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫اﻟﺤﯿﻦ ﻧﺮﻳﺪ ﻋﻤﻞ ﻣﺜﻞ ھﺬا اﻟﺒﻠﻮك وﻧﻘﻄﻌﻪ ﺑﺎﻟﻤﺜﻞ‪ ،‬وﻃﺒﻌﺎ ﻋﺮﻓﻨﺎ ھﺬه اﻟﻤﻌﻠﻮﻣﻪ‬
‫ﻣﻦ اﻟﺼﻮر اﻟﻤﻘﻄﻌﻪ ﻓﻰ ﻣﺠﻠﺪ اﻟﺼﻮر‬

‫ﻧﻔﺘﺢ اﻟﻔﻮﺗﻮﺷﻮب وﻧﺼﻮر ﺻﻮرة ھﺬا اﻟﺒﻠﻮك اﻻزرﻗﺖ وﻧﻔﺘﺤﻪ ﺑﺎﻟﻔﻮﺗﻮﺷﻮب وﻧﺤﻮﻟﻪ‬
‫ل ‪rgb‬‬

‫‪#‬ﺻﻮره‪٤‬‬

‫ﺑﻌﺪﻳﻦ راح ﻧﺴﻮى ﺗﺄﻃﯿﺮ ﻣﺜﻠﻪ ﺑﺎﻟﻈﺒﻂ وﻧﻘﻮم ﺑﺘﻘﻄﯿﻌﻪ ل‪ ٦‬اﺟﺰاء‬

‫اﻟﺠﺰء اﻟﻌﻠﻮى)اﻳﺴﺮ‪+‬اوﺳﻂ‪+‬اﻳﻤﻦ(‬
‫اﻟﺠﺰء اﻟﺴﻔﻠﻰ)اﻳﺴﺮ‪+‬اوﺳﻂ‪+‬اﻳﻤﻦ(‬

‫‪٦٥‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫ﻃﯿﺐ ﺑﻌﺪ ﻣﺎ ﻧﺤﻔﻆ اﻟﺼﻮر اﻟﻤﻘﻄﻌﻪ ھﺬه راح ﻧﺴﺘﺒﺪﻟﮫﺎ ﺑﺎﻻﺻﻞ‬

‫ﻛﯿﻒ ﻧﻌﺮف اﺳﻤﮫﺎ؟‬

‫ﺳﮫﻠﻪ روح ﻟﻠﻤﺠﻠﺔ وﻗﻒ ﺑﺎﻟﻤﺎوس ﻋﻠﻰ ﺣﺎﻓﺔ اﻟﺒﻠﻮك وﺷﻮف راﺑﻂ اﻟﺼﻮرة ﺑﻌﺮض‬
‫ﺧﺼﺎﺋﺼﮫﺎ ﺑﺎﻟﻀﻐﻂ ﻛﻠﯿﻚ ﻳﻤﯿﻦ‬

‫‪#‬ﺻﻮره‪٦‬‬

‫اﻟﺤﯿﻦ اﻧﺎ ﻋﻤﻠﺖ ﺗﺄﻃﯿﺮ ﺑﺴﯿﻂ ﻣﻮ دﻗﯿﻖ وﻣﺤﺘﺎج ﻇﺒﻂ اﻛﺜﺮ ‪ ،‬ﻻن ﻇﺒﻄﻪ ﻣﺤﺘﺎج‬
‫ﺗﻜﻮن دﻗﯿﻖ ﻓﻰ‬

‫‪٦٦‬‬
 ‫ﻣٌﻄﻮر‪MTWER.COM‬‬
‫______________________________________________________‬

‫‪1-‬ﻣﻘﺎس اﻟﺼﻮرة اﻟﻤُﻘﻄﻌﻪ ﻋﺮﺿﺎ وﻃﻮﻻ‬

‫‪2-‬ﺗﺴﺎوى اﻟﺘﻘﻄﯿﻊ ‪ ،‬اى ان اﻟﺰاوﻳﺔ اﻟﯿﺴﺮى اﻟﻌﻠﻮﻳﺔ ﻻﺑﺪ ان ﻳﻜﻮن ﺗﻘﻄﯿﻌﮫﺎ‬
‫ﻳﻄﺎﺑﻖ ﺑﺎﻟﻤﺜﻞ اﻟﺰاوﻳﺔ اﻟﯿﻤﻨﻰ اﻟﻌﻠﻮﻳﺔ‬

‫وھﺬا ﺗﻘﻄﯿﻌﻨﺎ اﻟﺒﺴﯿﻂ وھﻮ ﻣﺤﺘﺎج ﻇﺒﻂ اﻛﺜﺮ‬

‫‪#‬ﺻﻮره ‪٧‬‬

‫ﻃﺒﻌﺎ ھﺬه ھﻰ اﻟﻔﻜﺮة اﻟﻌﺎﻣﻪ ﻟﺘﺼﻤﯿﻢ اﻟﻤﺠﻠﺔ‬

‫وﺑﺎﻟﻤﺜﻞ ﻃﺒﻖ ﺷﻐﻠﻚ ﻋﻠﻰ ﺑﺎﻗﻰ اﻟﺼﻮر ﺳﻮاء ھﯿﺪر او ﻓﻮﺗﺮ‬

‫وﻳﻮﺟﺪ ﻃﺮق اﺧﺮى اﺻﻌﺐ ﺷﻮى ﻟﻜﻦ ھﺬه راح ﺗﻔﻰ ﺑﺎﻟﻐﺮض ﻃﺎﻟﻤﺎ ﺗﺪرﺑﺖ‬
‫ﻋﻠﯿﮫﺎ ﺟﯿﺪا‬

‫أﺗﻤﻨﻰ ﻳﻜﻮن اﻟﺪرس ﻣﻔﮫﻮم‬

‫ﻓﻰ ﻧﮫﺎﻳﺔ ھﺬه اﻟﺪورة أرﺟﻮ ﻣﻨﻜﻢ اﻟﺪﻋﺎء ﻟﻰ ﺑﺄن ﻳﻮﻓﻘﻨﻰ اﷲ ﻓﻰ دﻳﻨﻰ ودﻧﯿﺎى‬
‫وان ﻳﻐﻔﺮ ﻟﻮاﻟﺪاى‬

‫أﺧﻮﻛﻢ‪ :‬ﻣﺤﻤﺪ‬

‫اى اﺳﺘﻔﺴﺎرات أﺧﺮى‬

‫ﻳﻤﻜﻨﻜﻢ اﻟﺘﻮاﺻﻞ ﻋﺒﺮ ﻋﻀﻮﻳﺘﻰ ﻓﻰ ﻣﻮﻗﻊ ﻣﻄﻮر‪:‬‬

‫‪Vista-design‬‬

‫ا‬

‫‪٦٧‬‬