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

‫و اﻟﺼﻼة و اﻟﺴﻼم ﻋﻠﻰ ﺳﯿﺪﻧﺎ ﻣﺤﻤﺪ اﻟﻨﺒﻲ اﻟﻜﺮﻳﻢ و ﻋﻠﻲ آﻟﻪ و ﺻﺤﺒﻪ‬
‫أﺟﻤﻌﯿﻦ‬
‫إھــــــــــﺪاء‪..‬‬
‫إھــﺪاء ﻟﻜﻞ ﺷﺨـﺺ ﻳﺴﻌـﻲ ﻟﻠﺘﻌﻠﻢ و اﻷﺳﺘـﻔﺎدة‪..‬‬
‫إھــﺪاء ﻟﻜﻞ ﻣﻦ ﻋﻠﻤﻨـﻲ ﺣﺮﻓـﺎً و ﺳﺎﻋﺪﻧﻲ أن أﺻﻞ اﻟﻰ ﻣـﺄﻧﺎ ﻋﻠﯿﻪ‪..‬‬
‫إھــﺪاء ﻟﻜﻞ ﻣﺴﺘﺨـﺪم ﻋﺮﺑﻲ ﻳﺴﻌﻲ ﻟﯿﺼﺒﺢ ﻣﻄﻮر‪..‬‬
‫إھـــــﺪاء ﺧـﺎص‪..‬‬
‫ﻟﻤُﻄﻮﱢر ﻣﻮﻗﻌــًﺎ و أدارة و أﻋﻀـــﺎء و زاﺋﺮﻳﻦ‬

‫ﻣٌﻄﻮر‪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‬‬
‫ا‬

‫‪٦٧‬‬

Sign up to vote on this title
UsefulNot useful