دروس الدريم ويفر

‫ﺟﻤﻴﻊ اﻟﺪروس اﻟﺘﻲ هﻨﺎ ﻣﺄﺧﻮذة ﻣﻦ ﻣﻮﻗﻊ ‪:‬‬

‫آﻴﻔﻴﺔ اﻟﻜﺘﺎﺑﺔ ﺑﺎﻟﻌﺮﺑﻴﺔ‬ :‫ اﻓﺘﺢ اﻟﻤﻠﻒ‬،‫ﻣﻦ داﺧﻞ اﻟﺒﺮﻧﺎﻣﺞ‬ C:/Program Files/Macromedia/Dreamweaver Configuration/Encodings/EncodingMenu.xml

:‫" و اﺳﺘﺒﺪل اﻟﺴﻄﺮ اﻷﺧﻴﺮ‬Code View" ‫ﻗﻢ ﺏﺈﻇﻬﺎر ﻣﺼﺪر اﻟﻤﻠﻒ‬ <mm:encoding name="Other" charset="" fontgroup="Other" filename="other.xml"/> :‫ﺏﻬﺬا اﻟﺴﻄﺮ‬ <mm:encoding name="Arabic" charset="windows-1256" fontgroup="Other" filename="other.xml"/>

.‫ و أﻋﺪ ﺕﺸﻐﻴﻞ اﻟﺒﺮﻧﺎﻣﺞ‬،‫ﺧﺰّن اﻟﻤﻠﻒ‬

.Ctrl+U ‫ أو إﺿﻐﻂ‬Preferences ‫ ﺛﻢ‬Edit ‫ إذهﺐ إﻟﻰ‬.‫ﺏﻌﺪ ﺕﺸﻐﻴﻞ اﻟﺒﺮﻧﺎﻣﺞ ﻣﺮّة أﺧﺮى‬

.Fonts/Encoding ‫ اﺧﺘﺮ‬،‫ ﻋﻠﻰ اﻟﻴﺴﺎر‬Categories ‫ﻣﻦ ﻗﺎﺋﻤﺔ‬

‫ و ﻋﻨﺪ‬Other ‫ ﻗﻢ ﺏﺎﺧﺘﻴﺎر‬Font Settings ‫ و ﻋﻨﺪ‬Western Latin1 ‫ ﺏﺪ ًَﻻ ﻣﻦ‬Arabic ‫ اﺧﺘﺮ‬Default Encoding ‫ﻋﻨﺪ‬ .Arabic Transparent ‫ أو‬Tahoma Arabic ‫ ﻗﻢ ﺏﺎﺧﺘﻴﺎر‬Proportional Font

!!‫ إﻧﺘﻬﻴﻨﺎ‬.Ok ‫اﺿﻐﻂ‬

. ‫ م‬٢٠٠٢ \ ‫ \ ﺳﺒﺘﻤﺒﺮ‬١١ ‫ﺗﻤﺖ آﺘﺎﺑﺔ هﺬﻩ اﻟﻤﻘﺎﻟﺔ ﺑﺘﺎرﻳﺦ‬ . ‫ﺗﻤﺖ آﺘﺎﺑﺔ هﺬا اﻟﺪرس ﺑﻤﺴﺎﻋﺪة ﻣﻦ اﻷخ ﻃﻼل‬

www.almosamem.net

٢

‫دروس اﻟﻤُﺼﻤﻢ ﻓﻲ اﻟﺪرﻳﻢ وﻳﻔﺮ‬

‫آﻴﻔﻴﺔ اﻟﻜﺘﺎﺑﺔ ﺑﺎﻟﻌﺮﺑﻴﺔ –‪٢‬‬ ‫ﻟﻤﺎذا ‪ Dreamweaver‬؟‬ ‫ﻣﻨﺬ اﻹﺻﺪار اﻟﺜﺎﻟﺚ ﻟﻬﺬا اﻟﺒﺮﻧﺎﻣﺞ وأﻧﺎ أﺳﺘﺨﺪﻣﻩ ﻟﺒﻨﺎء ﻣﻮاﻗﻊ اﻟﻮﻳﺐ‪ ،‬وﻗﺪ آﻨﺖ ﻣﻌﺠﺒﺎً ﺑﻄﺮﻳﻘﺔ أداﺋﻩ اﻟﺘﻲ ﻓﺎﻗﺖ اﺳﻠﻮب اﻟﺒﺮاﻣﺞ اﻷﺧﺮى‪ ،‬إذا أﻧﻩ‬ ‫ﺑﺎﻹﺿﺎﻓﺔ إﻟﻰ ﺷﻜﻠﻩ اﻟﺠﺬاب وﻣﺡﺮرﻩ اﻻﺡﺘﺮاﻓﻲ ﻳﻘﻮم ﺑﺘﻮﻓﻴﺮ ﺑﻴﺌﺔ ﻣﻨﺎﺳﺒﺔ ﻟﺘﻄﻮﻳﺮ ﺻﻔﺡﺎت اﻟﻮﻳﺐ ﺑﺸﻜﻞ ﺡﻴﺎدي ﺑﺎﻟﻨﺴﺒﺔ ﻟﻠﻤﺴﺘﻌﺮﺿﺎت اﻟﻤﺨﺘﻠﻔﺔ‬ ‫)وأﻗﺼﺪ ﺑﺬﻟﻚ ﻣﺜﻼً ‪ IE‬و ‪ NS‬ﺑﻜﻞ إﺻﺪاراﺗﻬﻤﺎ( وﻟﻐﺎت ﺑﺮﻣﺠﺔ اﻟﻮﻳﺐ اﻟﻤﺨﺘﻠﻔﺔ ﺳﻮاء ﺗﻠﻚ اﻟﻤﺮﺗﺒﻄﺔ ﺑﺠﺎﻧﺐ اﻟﻤﺴﺘﻌﺮض ‪ Client Side‬أو اﻟﻤﺰود ‪Server‬‬ ‫‪Side،‬ﻓﻬﻮ ﺑﺬﻟﻚ ﻳﻌﺎﻣﻠﻚ ﻣﻌﺎﻣﻠﺔ اﻟﻤﺡﺘﺮف ﺡﺘﻰ وإن ﻟﻢ ﺗﻜﻦ آﺬﻟﻚ ﻓﺈﻧﻩ ﺳﻴﻮﺻﻠﻚ إﻟﻰ ذﻟﻚ اﻟﻤﺴﺘﻮى ﺑﺎﻟﺘﺄآﻴﺪ‪.‬‬ ‫وﻗﺪ ﻗﺎﻣﺖ ﺷﺮآﺔ ‪ Macromedia‬ﺑﺘﻄﻮﻳﺮ هﺬا اﻟﺒﺮﻧﺎﻣﺞ ﻋﺒﺮ ﻧﻘﻠﺘﻴﻦ ﻧﻮﻋﻴﺘﻴﻦ ﻣﻊ اﻹﺻﺪار اﻟﺮاﺑﻊ وﺡﺘﻰ اﻹﺻﺪار اﻷﺧﻴﺮ ‪ MX‬وﺟﻌﻠﺖ ﻣﻨﻩ ﺑﺡﻖ ﺑﺮﻧﺎﻣﺠﺎً‬ ‫اﺡﺘﺮاﻓﻴﺎً ﻟﻘﻲ إﻋﺠﺎﺑﺎً ﻣﻨﻘﻄﻊ اﻟﻨﻈﻴﺮ ﻣﻦ ﻗﺒﻞ آﺎﻓﺔ ﻣﻄﻮري اﻟﻮﻳﺐ ﺑﺎﻟﺮﻏﻢ ﻣﻦ اﺧﺘﻼف اﺗﺠﺎهﺎﺗﻬﻢ ﻓﻬﻮ اﻵن ﻳﻌﺘﺮ اﻟﻤﺡﺮر اﻷﻣﺜﻞ ﻟﻜﻞ ﻣﻦ ‪HTML,‬‬ ‫‪XHTML‬ﺑﺎﻻﺳﻠﻮﺑﻴﻦ اﻟﻤﺼﺪري واﻟﻤﺮﺋﻲ‪ ،‬آﻤﺎ ﻳﺪﻋﻢ آﻞ ﻣﺎ ﻳﺮﺗﺒﻁ ﺑﻬﻤﺎ أو ﺑﺎﻟﻮﻳﺐ ﺑﺪءاً ﻣﻦ ﻟﻐﺎت اﻟﺒﺮﻣﺠﺔ اﻟﺨﻄﻴﺔ ‪ JavaScripts, VBScripts‬وﻣﺮوراً‬ ‫ﺑﺼﻔﺡﺎت ﺗﺨﺼﻴﺺ اﻷﻧﻤﺎط ‪ CSS‬ووﺻﻮﻻً إﻟﻰ ﻟﻐﺎت ﺑﺮﻣﺠﺔ اﻟﻤﻮاﻗﻊ اﻟﺘﻔﺎﻋﻠﻴﺔ ‪ CF, PHP, ASP, ASP NET, JSP‬وﻏﻴﺮهﺎ‪.‬‬

‫دﻋﻢ اﻟﻠﻐﺔ اﻟﻌﺮﺑﻴﺔ‬ ‫ﻳﺰﻋﻢ اﻟﺒﻌﺾ أن ﺑﺮﻧﺎﻣﺞ ‪ Frontpage‬ﻳﺘﻔﻮق ﻋﻠﻰ ‪ Dreamweaver‬ﻓﻲ أﻧﻩ ﻳﺪﻋﻢ اﻟﻠﻐﺔ اﻟﻌﺮﺑﻴﺔ ﻓﻲ ﺡﻴﻦ ﻳﻮاﺟﻩ اﻵﺧﺮ ﺻﻌﻮﺑﺎت ﻓﻲ اﻟﺘﻌﺮف ﻋﻠﻴﻬﺎ‪،‬‬ ‫واﻟﻮاﻗﻊ أن هﺬا ﻟﻴﺲ ﺻﺡﻴﺡﺎً إذا أن ﺑﺈﻣﻜﺎن ‪ Dreamweaver‬اﻟﺘﻌﺎﻣﻞ ﺑﺎﻟﻠﻐﺔ اﻟﻌﺮﺑﻴﺔ ﺑﺸﻜﻞ ﻣﻤﺘﺎز‪ ،‬وﻻ ﻳﺡﺘﺎج إﻻ ﻟﺒﻌﺾ اﻟﺘﺨﺼﻴﺺ‪ ،‬وﻷن‬ ‫‪Dreamweaver‬اﺡﺘﺮاﻓﻲ ﻓﻬﻮ أﻳﻀﺎً ﻳﺴﻤﺡ ﻟﻤﺴﺘﺨﺪﻣﻴﻩ ﺑﺘﻐﻴﻴﺮ أداﺋﻩ ﻟﻴﻨﺎﺳﺒﻬﻢ ﺑﻞ وﻳﺴﻤﺡ ﺑﺘﻄﻮﻳﺮ أدوات إﺿﺎﻓﻴﺔ إن اﺡﺘﺎج اﻷﻣﺮ‪ ،‬ﻟﺬﻟﻚ ﻗﻤﺖ‬ ‫ﺑﺎﺳﺘﻐﻼل هﺬﻩ اﻟﻤﻴﺰة وﻗﻤﺖ ﺑﻌﻤﻞ أداة إﺿﺎﻓﻴﺔ ﻟﺘﺴﺎﻋﺪﻧﻲ ﻋﻠﻰ ﺗﺡﺮﻳﺮ ﺻﻔﺡﺎت اﻟﻮﻳﺐ ﺑﺎﻟﻠﻐﺔ اﻟﻌﺮﺑﻴﺔ‪ ،‬وﻧﻈﺮاً ﻻﻧﺘﺸﺎر ﺑﺮﻧﺎﻣﺞ ‪ Dreamweaver‬ﻓﻲ‬ ‫اﻷوﺳﺎط اﻟﻌﺮﺑﻴﺔ وﺡﺼﻮﻟﻩ ﻋﻠﻰ إﻗﺒﺎل ﻣﺘﺰاﻳﺪ رأﻳﺖ أن أﻗﻮم ﺑﻮﺿﻊ هﺬﻩ اﻷداة ﻋﻠﻰ ﺷﻜﻞ ﺑﺮﻧﺎﻣﺞ ﻳﻘﻮم ﺑﺘﺮآﻴﺐ هﺬﻩ اﻷداة وإﻋﺪاد اﻟﺘﺮﻣﻴﺰ )اﻟﺘﺸﻔﻴﺮ(‬ ‫اﻟﻤﻨﺎﺳﺐ ﻟﻠﻐﺔ اﻟﻌﺮﺑﻴﺔ اﻷآﺜﺮ ﺷﻬﺮة ‪ Windows-1256 Encoding‬ﺑﺡﻴﺚ ﻳﺼﺒﺡ ﺑﺮﻧﺎﻣﺞ ‪ Dreamweaver‬ﻗﺎدراً ﻋﻠﻰ اﻟﺘﻌﺎﻣﻞ ﻣﻊ اﻟﻨﺼﻮص اﻟﻌﺮﺑﻴﺔ ﻓﻲ‬ ‫ﺻﻔﺡﺎت اﻟﻮﻳﺐ دون ﻣﺸﺎآﻞ ﻳﻤﻜﻨﻜﻢ اﻟﺡﺼﻮل ﻋﻠﻰ هﺬا اﻟﺒﺮﻧﺎﻣﺞ ﺑﺘﺡﻤﻴﻠﻩ ﻣﺒﺎﺷﺮة ﻣﻦ هﻨﺎ‬

‫‪http://www.php4arab.info/mmdw/MMDWMX_Arabic.exe‬‬ ‫‪http://www2.php4arab.info/mmdw/MMDWMX_Arabic.exe‬‬ ‫‪http://www3.php4arab.info/mmdw/MMDWMX_Arabic.exe‬‬ ‫وهﻮ ﻳﻀﻴﻒ أﻳﻀﺎً أداة ﺧﺎﺻﺔ ﻟﺘﺡﺮﻳﺮ اﻟﻨﺼﻮص اﻟﻌﺮﺑﻴﺔ ﻟﺡﻞ ﻣﺸﻜﻠﺔ اﻻﻟﺘﻔﺎف اﻟﻤﺮﺋﻲ ﻣﻦ اﻟﻴﻤﻴﻦ إﻟﻰ اﻟﻴﺴﺎر‪ .‬وﻟﻤﻌﺮﻓﺔ ﻃﺮﻳﻘﺔ اﺳﺘﺨﺪاﻣﻩ ﻳﻤﻜﻨﻜﻢ‬ ‫اﻻﻃﻼع ﻋﻠﻰ اﻟﻤﻨﺘﺪﻳﺎت واﻟﻤﻮاﻗﻊ اﻟﺘﻲ آﺘﺐ ﻓﻴﻬﺎ ﻋﻦ ‪ Dreamweaver‬ﻓﻲ اﻟﻔﻘﺮة اﻟﺘﺎﻟﻴﺔ‪ .‬آﻤﺎ ﻳﻤﻜﻨﻚ زﻳﺎرة هﺬﻩ اﻟﺼﻔﺡﺔ ﻣﻦ وﻗﺖ ﻵﺧﺮ إذ أﻧﻨﻲ‬ ‫ﺳﺎﺡﺎول ﻗﺪر اﻹﻣﻜﺎن أن أﺻﻨﻊ اﻟﻤﺰﻳﺪ ﻣﻦ اﻷدوات اﻟﻤﻔﻴﺪة ﻟﻠﺒﺮﻧﺎﻣﺞ ﺳﻮاء ﻣﺎ ﻳﺘﻌﻠﻖ ﺑﺎﻟﻠﻐﺔ اﻟﻌﺮﺑﻴﺔ أو ﻣﺎ ﻳﺘﻌﻠﻖ ﺑﺒﺮﻣﺠﺔ اﻟﻘﻮاﻟﺐ أو ﺑﺨﺼﻮص ﻟﻐﺔ‬ ‫‪PHP،‬آﻤﺎ ﺳﺄﺡﺎول أن أﺿﻴﻒ اﻟﻤﺰﻳﺪ ﻣﻦ اﻟﻤﻌﻠﻮﻣﺎت واﻟﻤﻮاﻗﻊ اﻟﺘﻲ ﺗﺘﺡﺪث ﻋﻨﻩ‪.‬‬

‫اﻟﺸﺮح‬ ‫واﻟﺒﺮﻧﺎﻣﺞ اﻟﻤﻌﺪ ﺑﻠﻐﺔ اﻟﻔﻴﺠﻮل ﺑﻴﺴﻚ ﺳﻴﻘﻮم ﺑﺘﺮآﻴﺐ اﻟﻤﻠﻔﺎت اﻟﻼزﻣﺔ ﻓﻲ أﻣﺎآﻨﻬﺎ اﻟﺼﺡﻴﺡﺔ ﻓﻲ ﻣﺴﺎر ﺑﺮﻧﺎﻣﺞ ‪ Dreamweaver MX،‬وهﻮ ﻋﻨﺪﺋﺬ‬ ‫ﺳﻴﻘﻮم أوﻻً ﺑﺈﺿﺎﻓﺔ اﻟﺘﺮﻣﻴﺰ ﻟﻠﻐﺔ اﻟﻌﺮﺑﻴﺔ ‪ Windows-1256‬وﺗﻬﻴﺌﺔ إﻋﺪادات اﻟﺨﻁ ﻟﻌﺮﺿﻩ ﺑﺸﻜﻞ ﺳﻠﻴﻢ أﺛﻨﺎء اﻟﺘﺡﺮﻳﺮ‪) .‬ﺗﺄآﺪ ﻣﻦ اﺧﺘﻴﺎر اﻟﺘﺮﻣﻴﺰ ﺑﺸﻜﻞ‬ ‫اﻓﺘﺮاﺿﻲ ﻓﻲ إﻋﺪادات اﻟﺼﻔﺡﺔ ﺑﻌﺪ اﻟﺘﺮآﻴﺐ آﻤﺎ ﻓﻲ اﻟﺼﻮرة ‪.‬‬

‫آﻤﺎ ﻳﻘﻮم اﻟﺒﺮﻧﺎﻣﺞ ﺑﺘﺮآﻴﺐ إﺿﺎﻓﺔ ﺧﺎﺻﺔ ﻟﺘﺡﺮﻳﺮ اﻟﻨﺼﻮص اﻟﻌﺮﺑﻴﺔ‪ ،‬وهﻮ ﻋﺒﺎرة ﻋﻦ ﺑﺮﻧﺎﻣﺞ ﻣﺘﺡﺴﺲ ﻟﻠﻨﺼﻮص داﺧﻞ ‪ HTML،‬ﺑﺡﻴﺚ ﺗﻈﻬﺮ ﻟﻮﺡﺔ‬ ‫إﻋﺪادت ﺧﺎﺻﺔ ﻋﻨﺪﻣﺎ ﺗﻀﻊ اﻟﻤﺆﺷﺮ ﻋﻠﻰ أي ﻧﺺ‪ ،‬آﻤﺎ ﻓﻲ اﻟﺼﻮرة اﻟﺘﺎﻟﻴﺔ‪) :‬ﺗﺄآﺪ ﻣﻦ وﺿﻊ اﻟﻤﺆﺷﺮ داﺧﻞ اﻟﻨﺺ دون اﻟﺘﺡﺪﻳﺪ(‬

‫دروس اﻟﻤُﺼﻤﻢ ﻓﻲ اﻟﺪرﻳﻢ وﻳﻔﺮ‬

‫‪٣‬‬

‫‪www.almosamem.net‬‬

‫وﻋﻨﺪﺋﺬ ﻳﻤﻜﻦ ﺗﺡﺮﻳﺮ اﻟﻨﺺ ﺑﺸﺎﺷﺔ ﺧﺎﺻﺔ ﺑﺎﻟﻀﻐﻁ ﻋﻠﻰ زر )ﺗﺡﺮﻳﺮ اﻟﻨﺺ( وﺳﺘﻈﻬﺮ اﻟﻨﺎﻓﺬة آﻤﺎ ﻓﻲ اﻟﺼﻮرة اﻟﺘﺎﻟﻴﺔ‪:‬‬

‫ﺡﻴﺚ ﻳﻤﻜﻦ ﺑﺴﻬﻮﻟﺔ ﺗﻐﻴﻴﺮ اﻹﺗﺠﺎﻩ ﺑﺰري ‪ Ctrl+Right Shift‬وﺗﺡﺮﻳﺮ اﻟﻨﺺ ﺑﺎﻟﻠﻐﺔ اﻟﻌﺮﺑﻴﺔ واﻹﻧﺠﻠﻴﺰﻳﺔ دون أي ﻣﺸﺎآﻞ‪.‬‬ ‫آﻤﺎ ﻳﻤﻜﻦ اﺧﺘﻴﺎر ﻣﺮﺑﻊ اﺗﺠﺎﻩ اﻟﻨﺺ ﻣﻦ اﻟﻴﻤﻴﻦ إﻟﻰ اﻟﻴﺴﺎر ﻹﺿﺎﻓﺔ اﻟﺨﺎﺻﻴﺔ ‪ dir=rtl‬واﻟﺘﻲ ﺳﺘﺠﻌﻞ ﺻﻔﺡﺔ اﻟﻮﻳﺐ ﺗﻈﻬﺮ ﻧﺺ اﻟﻠﻐﺔ اﻟﻌﺮﺑﻴﺔ ﺑﺸﻜﻞ‬ ‫ﺳﻠﻴﻢ ﻋﻨﺪ اﻟﻌﺮض )ﺑﻤﺎ ﻓﻲ ذﻟﻚ اﻹﺷﺎرات واﻟﺮﻣﻮز(‪.‬‬ ‫هﺬا اﻟﺒﺮﻧﺎﻣﺞ ﻣﺠﺮب ﻋﻠﻰ ‪ Dreamweaver MX‬وﻋﻠﻰ اﻟﻨﻈﺎم ‪ Windows XP،‬وأﻋﺘﻘﺪ أﻧﻩ ﺳﻴﻌﻤﻞ ﺟﻴﺪاً ﻣﻊ اﻷﻧﻈﻤﺔ اﻷﺧﺮى أﻳﻀﺎً‪.‬‬

‫ﺗﻤﺖ آﺘﺎﺑﺔ هﺬﻩ اﻟﻤﻘﺎﻟﺔ ﺑﺘﺎرﻳﺦ ‪ \ ١٢‬إﺑﺮﻳﻞ \ ‪ ٢٠٠٣‬م ‪.‬‬ ‫ﺗﻤﺖ آﺘﺎﺑﺔ هﺬا اﻟﺪرس ﺑﻤﺴﺎﻋﺪة ﻣﻦ اﻷخ ﺻﻼح ﻓﺎﻳﻊ ‪.‬‬

‫دروس اﻟﻤُﺼﻤﻢ ﻓﻲ اﻟﺪرﻳﻢ وﻳﻔﺮ‬

‫‪٤‬‬

‫‪www.almosamem.net‬‬

‫أهﻢ اﻷدوات‬ ‫إذا ﻟﻢ ﺕﻜﻦ هﺬﻩ اﻟﻘﺎﺋﻤﺔ ﻇﺎهﺮة ﻟﻚ ﻓﻀﻐﻂ ‪.windowÎobjects‬‬

‫ﺳﻨﺒﺪأ ﻣﻦ أول زر‬

‫هﺬا اﻟﺰر ﻱﻘﻮم ﺏﺈﺿﺎﻓﺔ ﺹﻮرة إﻟﻰ اﻟﺼﻔﺤﺔ اﻟﺘﻲ ﺕﻌﻤﻞ ﻋﻠﻴﻬﺎ ‪.‬‬

‫هﺬا اﻟﺰر ﻱﻘﻮم ﺏﺈﺿﺎﻓﺔ أي ﺏﺮﻱﺪ اﻹآﺘﺮوﻧﻲ ﺕﺮﻱﺪﻩ ﺡﻴﺚ ﺳﻴﻈﻬﺮ ﻟﻚ ﻣﺮﺏﻌﺎن ﺿﻊ ﻓﻲ اﻷول اﻟﺠﻤﻠﺔ اﻟﺘﻲ ﺕﺮﻱﺪهﺎ أن ﺕﻈﻬﺮ ﻟﻠﺰوار‬ ‫وﻓﻲ اﻟﻔﺮاغ اﻟﺜﺎﻧﻲ ﺿﻊ اﻟﺒﺮﻱﺪ اﻹﻟﻜﺘﺮوﻧﻲ اﻟﺬي ﺕﺮﻱﺪﻩ‪.‬‬

‫هﺬﻩ اﻷزرار هﻲ اﻟﺘﻲ ﺡﺒﺒﺘﻨﻲ ﻓﻲ اﻟﺪرﻱﻢ وﻱﻔﺮ ﺡﻴﺚ ﻣﻦ اﻟﺰر اﻷﺧﻀﺮ ﻱﻤﻜﻨﻚ رﺳﻢ ﺝﺪول ﺡﺴﺐ اﻟﻤﻘﺎس اﻟﺬي ﺕﺮﻱﺪﻩ واﻟﺰر‬ ‫اﻷزرق ﻱﻤﻜﻨﻚ رس ﺧﻼﻱﺎ داﺧﻞ هﺬا اﻟﺠﺪول وﺳﻨﺸﺮح آﻴﻔﻴﺔ إﺳﺘﺨﺪاﻣﻬﺎ ﻓﻲ وﻗﺖ ﻻﺡﻖ‪.‬‬

‫إﺿﻐﻂ ﻋﻠﻰ ‪ common‬وإﺧﺘﺮ ‪ frames‬آﻤﺎ هﻮ ﻣﻮﺿﺢ ﻓﻔﻲ اﻟﺼﻮرة‪.‬‬

‫ﺳﻮف ﻱﻈﻬﺮ ﻟﻚ هﺬا اﻟﺸﻜﻞ ﺡﻴﺚ آﻞ واﺡﺪة ﺕﻤﺜﻞ ﺵﻜﻞ ﻓﻤﺜﻼ أول واﺡﺪة ﻋﻠﻰ اﻟﻴﻤﻴﻦ ﺕﻘﺴﻢ ﻟﻚ اﻟﺼﻔﺤﺔ ﻗﺴﻤﻴﻦ ﻗﺴﻢ ﻋﻠﻰ اﻟﻴﺴﺎر وﻗﺴﻢ‬ ‫ﻋﻠﻰ اﻟﻴﻤﻴﻦ وﻟﻜﻲ ﺕﻔﻬﻢ ﻣﺎذا أﻗﺼﺪ ﺝﺮﺏﻬﺎ ﻓﻲ ﺝﻬﺎزك‪.‬‬ ‫دروس اﻟﻤُﺼﻤﻢ ﻓﻲ اﻟﺪرﻳﻢ وﻳﻔﺮ‬

‫‪٥‬‬

‫‪www.almosamem.net‬‬

‫ﺗﻤﺖ آﺘﺎﺑﺔ هﺬا اﻟﺪرس ﺑﺘﺎرﻳﺦ اﻟﻤﻮاﻓﻖ ‪ \ ٣‬اﻏﺴﻄﺲ \ ‪ ٢٠٠٢‬م ‪.‬‬ ‫ﺗﻤﺖ ﺗﺠﺮﺑﺔ هﺬا اﻟﺪرس ﻋﻠﻰ اﻟﻨﺴﺨﺔ رﻗﻢ ‪ ٤‬و ‪MX‬ﻣﻦ ﺑﺮﻧﺎﻣﺞ اﻟـ‪DreamWeaver .‬‬

‫دروس اﻟﻤُﺼﻤﻢ ﻓﻲ اﻟﺪرﻳﻢ وﻳﻔﺮ‬

‫‪٦‬‬

‫‪www.almosamem.net‬‬

‫أدراج اﻟﺼﻮر‬ ‫‪.‬‬

‫أوﻻ اﺿﻐﻂ ﻋﻠﻰ هﺬا اﻟﺰر‬

‫وﺳﻮف ﺕﺨﺮج ﻟﻚ اﻟﻨﺎﻓﺬة اﻟﻤﻮﺿﺤﺔ ﻓﻲ اﻟﺼﻮرة ‪ ،‬وﻣﻦ ﻣﺰاﻱﺎ درﻱﻢ وﻱﻔﺮ أﻧﻪ ﻱﻤﻜﻨﻚ إﺿﺎﻓﺔ أي ﺹﻮرة ﻣﻦ أي ﻣﺠﻠﺪ ﻓﻲ اﻟﺠﻬﺎز ‪ ،‬ﻣﺜﻼ‬ ‫ﻣﻦ ﻣﺠﻠﺪ اﻟـ‪ .my picture‬وﻟﻴﺲ اﻟﺤﺎل ﻣﺜﻞ اﻟﻔﺮوﻧﺖ ﺏﻴﺞ ﺡﻴﺚ ﻱﺠﺐ أن ﺕﻜﻮن اﻟﺼﻮرة ﻓﻲ ﻣﻠﻒ اﻟﻤﻮﻗﻊ اﻟﺬي ﺡﺪدﺕﻪ أو ﻓﻲ اﻹﻧﺘﺮﻧﺖ‪.‬‬

‫ﺳﻮف ﺕﻈﻬﺮ ﻟﻚ رﺳﺎﻟﺔ اﺿﻐﻂ ‪. ok‬‬

‫ﺳﻮف ﺕﺨﺮج ﻟﻚ ﻧﺎﻓﺬة اﺿﻐﻂ ‪ yes‬آﻤﺎ هﻮ ﻣﻮﺿﺢ ﻓﻲ اﻟﺼﻮرة ‪.‬‬

‫أﻧﺼﺢ اﻟﺠﻤﻴﻊ ﺏﻮﺿﻊ ﻣﺠﻠﺪ ﺕﻀﻊ ﻓﻴﻪ اﻟﺼﻮر ﻓﻲ اﻟﻤﻮﻗﻊ ‪.‬‬

‫ﺳﻮف ﺕﻈﻬﺮ ﻟﻚ ﻧﺎﻓﺬة ﺡﺪد اﻟﻤﻜﺎن اﻟﺬي ﺕﺮﻱﺪ أن ﺕﺤﻔﻆ اﻟﺼﻮرة ﻓﻴﻪ وأﺿﻐﻂ ‪ save‬وﻻ ﺕﻨﺲ أن ﺕﺤﻔﻆ اﻟﺼﻮرة داﺧﻞ ﻣﺠﻠﺪ اﻟﻤﻮﻗﻊ ‪.‬‬

‫ﺗﻤﺖ آﺘﺎﺑﺔ هﺬا اﻟﺪرس ﺑﺘﺎرﻳﺦ اﻟﻤﻮاﻓﻖ ‪ \ ٣‬اﻏﺴﻄﺲ \ ‪ ٢٠٠٢‬م ‪.‬‬ ‫ﺗﻤﺖ ﺗﺠﺮﺑﺔ هﺬا اﻟﺪرس ﻋﻠﻰ اﻟﻨﺴﺨﺔ رﻗﻢ ‪ ٤‬و ‪MX‬ﻣﻦ ﺑﺮﻧﺎﻣﺞ اﻟـ ‪. DreamWeaver‬‬

‫دروس اﻟﻤُﺼﻤﻢ ﻓﻲ اﻟﺪرﻳﻢ وﻳﻔﺮ‬

‫‪٧‬‬

‫‪www.almosamem.net‬‬

‫ﺕﻐﻴﻴﺮ ﺧﺼﺎﺋﺺ اﻟﻨﺼﻮص‬ ‫أآﺘﺐ أي آﻠﻤﺔ ﺕﺮﻱﺪهﺎ ‪ ،‬ﻓﻲ ﻡﺜﺎﻟﻨﺎ هﺬا ‪ ،‬آﺘﺒﺖ اﻥﺎ آﻠﻤﺔ )اﻟﻤﺼﻤﻢ( ‪.‬‬

‫وﻟﺘﻐﻴﺮ اﻟﻠﻮن إﺿﻐﻂ ﻋﻠﻰ اﻟﺸﻜﻞ اﻟﻤﻮﺿﺢ ﻓﻲ اﻟﺼﻮرة‬ ‫اﻟﻤﺮﺑﻊ ﻓﻲ اﻟﻤﻜﺎن اﻟﺬي وﺿﻌﺖ أﻥﺎ ﻓﻴﻪ هﺬا اﻟﻜﻮد ‪. #٠٠٠٠٠٠‬‬

‫وإﺧﺘﺮ اﻟﻠﻮن اﻟﺬي ﺕﺮﻱﺪﻩ أﻡﺎ إذا آﺎن ﻟﺪﻱﻚ آﻮد اﻟﻠﻮن ﻓﻀﻌﻪ ﻓﻲ اﻟﻔﺮاغ اﻷﺑﻴﺾ ﺑﺠﺎﻥﺐ‬

‫وﻟﺘﻐﻴﺮ ﺵﻜﻞ اﻟﺨﻂ إﺿﻐﻂ ﻋﻠﻰ أﺣﺪ اﻷزرار اﻟﻤﻴﻨﺔ ﻓﻲ اﻟﺼﻮرة‬

‫‪.‬‬

‫وﻟﺘﻐﻴﺮ ﺣﺠﻢ اﻟﺨﻂ إﺹﻐﻂ ﻋﻠﻰ اﻟﻘﺎﺋﻤﺔ اﻟﻤﻨﺴﻠﺪة اﻟﻤﻮﺿﺤﻪ ﻓﻲ اﻟﺼﻮرة‬

‫‪.‬‬

‫وﻻآﻦ ﻟﻸﺱﻒ ﻓﺎﻟﺪرﻱﻢ وﻱﻔﺮ ﻻ ﻱﻜﺘﺐ ﺑﺎﻟﻠﻐﺔ اﻟﻌﺮﺑﻴﺔ ‪ ،‬وﻻآﻦ‬ ‫أﻡﺎ ﻟﺘﻐﻴﺮ ﻥﻮع ﻟﺨﻂ ﻓﺈﺿﻐﻂ ﻋﻠﻰ اﻟﻘﺎﺋﻤﺔ اﻟﻤﻨﺴﻠﺪة اﻟﻤﻮﺿﺤﺔ ﻓﻲ اﻟﺼﻮرة‬ ‫ﺕﻮﺹﻞ أﺣﺪ اﻟﺰﻡﻼء إﻟﻰ ﻃﺮﻱﻘﺔ اﻟﻜﺘﺎﺑﺔ ﺑﺎﻟﻌﺮﺑﻲ ﻓﻲ اﻟﺪرﻱﻢ وﻱﻔﺮ وﺱﻮف ﺕﺠﺪ اﻟﺪرس ﺿﻤﻦ دروس اﻟﺪرﻱﻢ وﻱﻔﺮ ‪.‬‬

‫ﺗﻤﺖ آﺘﺎﺑﺔ هﺬﻩ اﻟﻤﻘﺎﻟﺔ ﺑﺘﺎرﻳﺦ ‪ \ ٣٠‬اﻏﺴﻄﺲ \ ‪ ٢٠٠٢‬م ‪.‬‬ ‫ﺗﻤﺖ ﺗﺠﺮﺑﺔ هﺬا اﻟﺪرس ﻋﻠﻰ اﻟﻨﺴﺨﺔ رﻗﻢ ‪ ٤‬و ‪ MX‬ﻣﻦ ﺑﺮﻧﺎﻣﺞ اﻟـ‪DreamWeaver .‬‬

‫دروس اﻟﻤُﺼﻤﻢ ﻓﻲ اﻟﺪرﻳﻢ وﻳﻔﺮ‬

‫‪٨‬‬

‫‪www.almosamem.net‬‬

‫ﻡﻮﻗﻊ ﺝﺪﻱﺪ‬ ‫اﺿﻐﻂ ﻋﻠﻰ اﻟﻘﺎﺋﻤﺔ ‪Site‬‬

‫‪.‬‬

‫اﻵن إﺿﻐﻂ ﻋﻠﻰ ‪. new site‬‬

‫ﺿﻊ ﻓﻲ اﻟﻔﺮاغ اﻷول إﺳﻢ ﻣﻮﻗﻊ أﻣﺎ اﻟﺜﺎﻧﻲ ﻓﻀﻊ ﻣﻜﺎن اﻟﻤﺠﻠﺪ اﻟﺬي ﺕﺮﻱﺪ أن ﺕﻀﻊ ﻓﻴﻪ ﺕﺼﻤﻴﻢ ﻣﻮﻗﻌﻚ أﻣﺎ اﻟﺜﺎﻟﺚ واﻷﺧﻴﺮ ﻓﻀﻊ ﻟﻨﻚ ﻣﻮﻗﻌﻚ وإذا ﻟﻢ ﻱﻜﻦ ﻟﺪﻱﻚ‬ ‫ﻣﻮﻗﻊ ﻓﺘﺮآﻪ ﺧﺎﻟﻴﺎ وأﺿﻐﻂ ﺛﻢ إﺿﻐﻂ ‪. ok‬‬

‫وﺳﻮف ﻱﻈﻬﺮ ﻟﻚ هﺬا اﻟﺸﻜﻞ‪.‬‬

‫إﺿﻐﻂ اﻟﺰر اﻷﻱﻤﻴﻦ ﻟﻠﻔﺄرة )اﻟﻤﺎوس( ‪.‬‬

‫هﺬا اﻟﺨﻴﺎر‬

‫ﺕﺤﺖ اﻟﺨﻴﺎر اﻷول وهﻮ ﻹﻧﺸﺎء ﺹﻔﺤﺔ ﺝﺪﻱﺪة‪.‬‬

‫ﺳﻮف ﻱﻈﻬﺮ ﻟﻚ هﺬا اﻟﺨﻴﺎر‬

‫وهﺬا ﻹﻧﺸﺎء ﻣﺠﻠﺪ ﺝﺪﻱﺪ‪.‬‬

‫ﺗﻤﺖ آﺘﺎﺑﺔ هﺬا اﻟﺪرس ﺑﺘﺎرﻳﺦ اﻟﻤﻮاﻓﻖ ‪ \ ٢١‬ﺳﺒﺘﻤﺒﺮ \ ‪ ٢٠٠٢‬م ‪.‬‬ ‫ﺗﻤﺖ ﺗﺠﺮﺑﺔ هﺬا اﻟﺪرس ﻋﻠﻰ اﻟﻨﺴﺨﺔ رﻗﻢ ‪ ٤‬و ‪ MX‬ﻣﻦ ﺑﺮﻧﺎﻣﺞ اﻟـ ‪. DreamWeaver‬‬

‫دروس اﻟﻤُﺼﻤﻢ ﻓﻲ اﻟﺪرﻳﻢ وﻳﻔﺮ‬

‫‪٩‬‬

‫‪www.almosamem.net‬‬

‫رﺱﻢ اﻟﺠﺪاول ﻓﻲ اﻟﺪرﻱﻢ وﻱﻔﺮ‬ ‫ﻓﻲ اﻟﺪرﻱﻢ وﻱﻔﺮ ﺧﺎﺹﻴﺔ رﺳﻢ اﻟﺠﺪاول وهﻲ ﻣﻦ أﻓﻀﻞ ﺧﻮاﺹﻪ ﻓﻲ اﻋﺘﻘﺎدي واﻟﻴﻮم ﺳﻮف ﻧﺸﺮح ﻟﻜﻢ آﻴﻒ ﺕﺮﺳﻤﻮﻧﻬﺎ ‪.‬‬

‫ﻓﻲ أوﺏﺠﻴﻜﺖ ‪.‬‬

‫ﺳﻮف ﺕﺠﺪ هﺬﻩ اﻷزرار‬

‫اﺿﻐﻂ ﻋﻠﻰ اﻷﺧﻀﺮ‬

‫وأرﺳﻢ اﻟﺠﺪول اﻟﺬي ﺕﺮﻱﺪﻩ ﻓﻲ اﻟﺪرﻱﻢ وﻱﻔﺮ‪.‬‬

‫ﺛﻢ أرﺳﻢ اﻟﺨﻼﻱﺎ ﻋﻦ ﻃﺮﻱﻖ اﻟﻀﻐﻂ ﻋﻠﻰ اﻟﺰر اﻷزرق‬

‫وﻻآﻦ ﻻ ﺕﻨﺴﻰ أن رﺳﻢ اﻟﺨﻼﻱﺎ ﻱﻜﻮن داﺧﻞ اﻟﺠﺪول اﻟﺬي رﺳﻤﻨﺎﻩ ‪.‬‬

‫واﻵن أآﺘﺐ ﻣﺎﺕﺮﻱﺪ داﺧﻞ اﻟﺨﻼﻱﺎ ‪.‬‬

‫ﺗﻤﺖ آﺘﺎﺑﺔ هﺬا اﻟﺪرس ﺑﺘﺎرﻳﺦ اﻟﻤﻮاﻓﻖ ‪ \ ٣‬اﻏﺴﻄﺲ \ ‪ ٢٠٠٢‬م ‪.‬‬ ‫ﺗﻤﺖ ﺗﺠﺮﺑﺔ هﺬا اﻟﺪرس ﻋﻠﻰ اﻟﻨﺴﺨﺔ رﻗﻢ ‪ ٤‬و ‪ MX‬ﻣﻦ ﺑﺮﻧﺎﻣﺞ اﻟـ‪. DreamWeaver‬‬

‫دروس اﻟﻤُﺼﻤﻢ ﻓﻲ اﻟﺪرﻳﻢ وﻳﻔﺮ‬

‫‪١٠‬‬

‫‪www.almosamem.net‬‬

‫]‪Œ†{{{{{ã{{{Ë{{{Ö‬‬

‫اﻟﻠﻐﺔ اﻟﻌﺮﺑﻴﺔ – ‪٢‬‬

‫اﻟﻠﻐﺔ اﻟﻌﺮﺑﻴﺔ – ‪١‬‬

‫اﻟﺼﻔﺡﺔ ‪٣‬‬

‫اﻟﺼﻔﺡﺔ ‪٢‬‬

‫|‬

‫ﻃﺮﻳﻘﺔ أﺧﺮى ﻟﺡﻞ ﻣﺸﻜﻠﺔ اﻟﻜﺘﺎﺑﺔ ﺑﺎﻟﻌﺮﺑﻴﺔ ﻓﻲ‬ ‫اﻟﺪرﻳﻢ وﻳﻔﺮ ‪..‬‬

‫ﻣﻦ اﻟﻤﻌﺮوف أن اﻟﺪرﻳﻢ وﻳﻔﺮ ﻻ ﻳﺴﺘﻄﻴﻊ اﻟﻜﺘﺎﺑﺔ‬ ‫ﺑﺎﻟﻠﻐﺔ اﻟﻌﺮﺑﻴﺔ ‪ ،‬ﻓﻲ هﺬا اﻟﺪرس ‪ ،‬ﻧﻘﻮم ﻣﻌﺎً‬ ‫ﺑﺡﻞ هﺬﻩ اﻟﻤﺸﻜﻠﺔ ‪.‬‬ ‫أهﻢ اﻷدوات‬

‫إدراج ﺻﻮرة‬

‫اﻟﺼﻔﺡﺔ ‪٥‬‬ ‫|‬

‫اﻟﺼﻔﺡﺔ ‪٥‬‬

‫|‬ ‫هﻞ ﺗﺮﻳﺪ إدراج ﺻﻮرة ﻓﻲ ﻣﻮﻗﻌﻚ ؟ إذا اﺳﺮع‬ ‫ﺑﺪﺧﻮل هﺬا اﻟﺪرس ‪.‬‬

‫ﺗﻌﺮف ﻋﻠﻰ ﺑﻌﺾ أهﻢ اﻷدوات ﻓﻲ اﻟﺒﺮﻧﺎﻣﺞ ‪.‬‬

‫ﻣﻮﻗﻊ ﺟﺪﻳﺪ‬

‫ﺗﻐﻴﻴﺮ ﺧﺼﺎﺋﺺ اﻟﻨﺼﻮص‬

‫اﻟﺼﻔﺡﺔ ‪٥‬‬

‫|‬

‫اﻟﺼﻔﺡﺔ ‪٥‬‬

‫|‬ ‫هﻞ ﺗﺮﻳﺪ ﺻﻨﻊ ﻣﻮﻗﻊ آﺎﻣﻞ ﻋﺒﺮ اﻟﺪرﻳﻢ وﻳﻔﺮ ؟‬ ‫إذن ﺗﻔﻀﻞ هﺬا اﻟﺪرس ﻓﻬﻮ ﻣﺒﺘﻐﺎك ‪.‬‬

‫هﻞ ﺗﺮﻳﺪ ﺗﻐﻴﺮ ﺡﺠﻢ أو ﻟﻮن أو ﻧﻮع ﺧﻁ ﻣﻮﺟﻮد‬ ‫ﻓﻲ ﻣﻮﻗﻌﻚ ؟‬ ‫رﺳﻢ اﻟﺠﺪاول‬

‫|‬

‫اﻟﺼﻔﺡﺔ ‪٥‬‬

‫هﻞ ﺗﺮﻳﺪ إدراج ﺟﺪاول ﻟﺘﻨﻀﻴﻢ ﻣﻮﻗﻌﻚ ؟ إذن‬ ‫ﺗﻔﻀﻞ ﻓﻲ هﺬا اﻟﺪرس ‪.‬‬

‫دروس اﻟﻤُﺼﻤﻢ ﻓﻲ اﻟﺪرﻳﻢ وﻳﻔﺮ‬

‫‪١١‬‬

‫‪www.almosamem.net‬‬