You are on page 1of 11

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

‫آﻴﻔﻴﺔ اﻟﻜﺘﺎﺑﺔ ﺑﺎﻟﻌﺮﺑﻴﺔ‬

:‫ اﻓﺘﺢ اﻟﻤﻠﻒ‬،‫ﻣﻦ داﺧﻞ اﻟﺒﺮﻧﺎﻣﺞ‬


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‬‬ ‫‪١١‬‬ ‫دروس اﻟﻤُﺼﻤﻢ ﻓﻲ اﻟﺪرﻳﻢ وﻳﻔﺮ‬