دورة تصميم المواقع

‫ﺩﻭﺭﺓ‬web 0.2٢
‫ﻣ‬ ‫ﺑﺮﻋﺎﻳﺔ‬‫ﺍﻟﺘﻄﻮﻳﺮﻯ‬ ‫ﻄﻮﺭ‬‫ﻣ‬ ‫ﻮﻗﻊ‬
vb/com.mtwer.www
‫ﺗﺄﻟﻴﻒ‬
vista-design
‫ﺍﻟﻜﺘﺎﺏ‬ ‫ﻭﲡﻤﻴﻊ‬ ‫ﺗﺮﺗﻴﺐ‬
‫ﻧﻮﺭ‬ ‫ﺍﻟﻌﻠﻢ‬

‫ﺩﻭﺭﺓ‬web 0.2٣
‫ﺍﻟﺮﺣﻴﻢ‬‫ﺍﻟﺮﲪﻦ‬‫ﺍﷲ‬‫ﺑﺴﻢ‬
‫ﺑﺄﺳﻠﻮﺏ‬ ‫ﺍﳌﻮﺍﻗﻊ‬ ‫ﺗﺼﻤﻴﻢ‬ ‫ﺩﻭﺭﺓ‬
‫ﺍﶈﺘﺮﻓﲔ‬
Web 0.2

‫ﺩﻭﺭﺓ‬web 0.2٤
‫ﻓﻬﺮﺱ‬‫ﺩﻭﺭﺓ‬web2.0
-‫ﺍﻟﺘﻄﺒﻴﻖ‬‫ﺗﺒﺪﺃ‬‫ﺃﻥ‬‫ﻗﺒﻞ‬‫ﺑﺮﺍﻣﺞ‬‫ﻣﻦ‬‫ﺍﻟﺪﻭﺭﺓ‬‫ﻣﺘﻄﻠﺒﺎﺕ‬
-‫ﺑﺄﺳﻠﻮﺏ‬‫ﺍﳌﺘﻄﻮﺭ‬‫ﺍﳌﻮﺍﻗﻊ‬‫ﺗﺼﻤﻴﻢ‬‫ﺩﻭﺭﺓ‬‫ﻭﻓﻬﺮﺱ‬‫ﻣﻘﺪﻣﺔ‬2.0web
-]‫ﺍﻷﻭﻝ‬‫ﺍﻟﺪﺭﺱ‬[‫ﲟﻔﻬﻮﻡ‬‫ﺗﻌﺮﻳﻒ‬‫ﺍﻷﺳﻠﻮﺏ‬‫ﺍﳌﺘﻄﻮﺭ‬‫ﰲ‬‫ﺍﳌﻮﺍﻗﻊ‬‫ﺗﺼﻤﻴﻢ‬2.0web
-]‫ﺍﻟﺪﺭﺱ‬‫ﺍﻟﺜﺎﱐ‬[‫ﻣﻘﺪﻣﺔ‬‫ﰲ‬css+xhtml‫ﺍﻷﻭﻝ‬‫ﺍﳉﺰﺀ‬
-]‫ﺍﻟﺜﺎﻟﺚ‬‫ﺍﻟﺪﺭﺱ‬[‫ﻣﻘﺪﻣﺔ‬‫ﰲ‬ssc+xhtml‫ﺍﳉﺰﺀ‬‫ﺍﻟﺜﺎﱐ‬
-]‫ﺍﻟﺮﺍﺑﻊ‬‫ﺍﻟﺪﺭﺱ‬[‫ﻣﻬﻤﺔ‬‫ﺃﺳﺎﺳﻴﺎﺕ‬‫ﰲ‬‫ﺍﺳﺘﺨﺪﺍﻡ‬css+xhtml
-]‫ﺍﳋﺎﻣﺲ‬‫ﺍﻟﺪﺭﺱ‬[‫ﻣﻊ‬‫ﻟﻠﺘﻌﺎﻣﻞ‬‫ﺍﳌﺴﺘﻮﻳﺎﺕ‬‫ﻣﺘﻌﺪﺩﺓ‬‫ﻣﻜﺜﻔﺔ‬‫ﻓﻴﺪﻳﻮ‬‫ﺩﺭﻭﺱ‬css
-]‫ﺍﻟﺴﺎﺩﺱ‬‫ﺍﻟﺪﺭﺱ‬[‫ﻛﻴﻔﻴﺔ‬‫ﻟﺼﻔﺤﺔ‬‫ﲣﻄﻴﻂ‬‫ﻋﻤﻞ‬layout‫ﺏ‬‫ﻟﺘﺼﻤﻴﻤﻬﺎ‬‫ﲤﻬﻴﺪﺍ‬css
-]‫ﺍﻟﺴﺎﺑﻊ‬‫ﺍﻟﺪﺭﺱ‬[‫ﻭﺍﳌﺘﻌﺪﺩﺓ‬‫ﺍﳌﺘﺤﺮﻛﺔ‬‫ﺍﻟﻘﻮﺍﺋﻢ‬‫ﻋﻤﻞ‬‫ﻛﻴﻔﻴﺔ‬‫ﺷﺮﺡ‬css menus
-]‫ﺍﻟﺜﺎﻣﻦ‬‫ﺍﻟﺪﺭﺱ‬[‫ﺍﻟﺼﻮﺭ‬‫ﻣﻊ‬‫ﺍﻟﺘﻌﺎﻣﻞ‬‫ﺷﺮﺡ‬images‫ﺍﳌﺨﺘ‬‫ﻭﺍﻟﺘﺄﺛﲑﺍﺕ‬‫ﻋﻠﻴﻬﺎ‬‫ﻠﻔﺔ‬
-]‫ﺍﻟﺘﺎﺳﻊ‬‫ﺍﻟﺪﺭﺱ‬[‫ﻋﻠﻴﻬﺎ‬‫ﺍﳌﺨﺘﻠﻔﺔ‬‫ﻭﺍﻟﺘﺄﺛﲑﺍﺕ‬‫ﻭﺍﳌﺆﺷﺮﺍﺕ‬‫ﺍﻷﺯﺭﺍﺭ‬‫ﻣﻊ‬‫ﺍﻟﺘﻌﺎﻣﻞ‬‫ﺷﺮﺡ‬
-]‫ﺍﻟﻌﺎﺷﺮ‬‫ﺍﻟﺪﺭﺱ‬[‫ﲟﻜﺘﺒﺔ‬‫ﺗﻌﺮﻳﻒ‬jquery‫ﺍﻟﺒﺪﺀ‬‫ﻗﺒﻞ‬‫ﰲ‬‫ﻣﻌﻬﺎ‬‫ﺍﻟﺘﻌﺎﻣﻞ‬
-]‫ﺍﻟﺪﺭﺱ‬‫ﺍﳊﺎﺩﻱ‬‫ﻋﺸﺮ‬[‫ﲟﻜﺘﺒﺔ‬‫ﺍﻟﺘﻌﺎﻣﻞ‬‫ﺷﺮﺡ‬jquery‫ﻭﻋﻤﻞ‬‫ﺍﻟﺘﺄﺛﲑﺍﺕ‬‫ﳌﻮﻗﻌﻚ‬‫ﺍﻟﺮﺍﺋﻌﺔ‬
-]‫ﺍﻟﺪﺭﺱ‬‫ﺍﻟﺜﺎﱐ‬‫ﻋﺸﺮ‬[‫ﺗﻨﺒﻴﻬﺎﺕ‬+‫ﺍﻟﺸﺎﻣﻞ‬‫ﺍﻟﺘﺨﻄﻴﻂ‬+‫ﺍﻟﺪﺭﺱ‬‫ﺗﻄﺒﻴﻖ‬‫ﻗﺒﻞ‬‫ﻧﺼﺎﺋﺢ‬
-]‫ﺍﻟﺪﺭﺱ‬‫ﺍﻟﺜ‬‫ﺎﱐ‬‫ﻋﺸﺮ‬٢[‫ﻣﻮﻗﻊ‬‫ﻟﺘﺼﻤﻴﻢ‬‫ﻛﺎﻣﻞ‬‫ﺗﻄﺒﻴﻖ‬‫ﺍﺣﺘﺮﺍﰲ‬‫ﺍﳉﺰﺀ‬‫ﺍﻷﻭﻝ‬‫ﺍﻟﺘﺼﻤﻴﻢ‬
-]‫ﺍﻟﺪﺭﺱ‬‫ﺍﻟﺜﺎﱐ‬‫ﻋﺸﺮ‬٣[‫ﻣﻮﻗﻊ‬‫ﻟﺘﺼﻤﻴﻢ‬‫ﻛﺎﻣﻞ‬‫ﺗﻄﺒﻴﻖ‬‫ﺍﺣﺘﺮﺍﰲ‬‫ﺍﳉﺰﺀ‬‫ﺍﻟﺜﺎﱐ‬‫ﺍﻟ‬‫ـ‬html
-]‫ﺍﻟﺪﺭﺱ‬‫ﺍﻟﺜﺎﱐ‬‫ﻋﺸﺮ‬٤[‫ﻣﻮﻗﻊ‬‫ﻟﺘﺼﻤﻴﻢ‬‫ﻛﺎﻣﻞ‬‫ﺗﻄﺒﻴﻖ‬‫ﺍﺣﺘﺮﺍﰲ‬‫ﺍﻟﺜﺎﻟﺚ‬‫ﺍﳉﺰﺀ‬‫ﻭﺍﻷﺧﲑ‬‫ﺍﻟﺘﻘﻄﻴﻊ‬+css
-]‫ﺍﻟﺪﺭﺱ‬‫ﺍﻟﺜﺎﻟﺚ‬‫ﻋﺸﺮ‬‫ﻭﺍﳋﺘﺎﻣﻲ‬[‫ﻣﻮﺍﻗﻌﻚ‬‫ﻭﺑﺮﳎﺔ‬‫ﺗﺼﻤﻴﻢ‬‫ﰱ‬‫ﻋﻠﻴﻬﺎ‬‫ﺍﻋﺘﻤﺪ‬‫ﺟﺎﻫﺰﺓ‬‫ﻭﺗﺄﺛﲑﺍﺕ‬‫ﺃﻛﻮﺍﺩ‬

‫ﺩﻭﺭﺓ‬web 0.2٥
‫ﻫﺎﻣﻪ‬‫ﻣﻼﺣﻈﻪ‬:
‫ﺍﻟﻜﺘﺎﺏ‬‫ﻣﻊ‬‫ﻳﻮﺟﺪ‬‫ﳝﻜﻨﻚ‬‫ﺟﺪﺍ‬‫ﻣﻬﻤﻪ‬‫ﻋﻤﻠﻴﺔ‬‫ﻭﺗﻄﺒﻴﻘﺎﺕ‬‫ﻣﺮﻓﻘﺎﺕ‬
‫ﻣﺒﺎﺷﺮﺓ‬‫ﺍﳌﺘﻮﺍﺿﻊ‬‫ﻣﻮﻗﻌﻰ‬‫ﻣﻦ‬‫ﲢﻤﻴﻠﻬﺎ‬
‫ـ‬‫ﻫ‬‫ﺃﺿﻐﻂ‬‫ـ‬‫ـ‬‫ـ‬‫ـﻨ‬‫ـ‬‫ـ‬‫ـ‬‫ـ‬‫ﺎ‬com.advphp
.

‫ﺩﻭﺭﺓ‬web 0.2٦
‫ﺍﻵﺗﻴﺔ‬‫ﺍﻟﱪﺍﻣﺞ‬‫ﺗﺜﺒﻴﺖ‬‫ﻋﻠﻴﻚ‬‫ﳚﺐ‬‫ﺍﻟﻔﺎﺿﻞ‬‫ﺃﺧﻲ‬‫ﺗﺒﺪﺃ‬‫ﺃﻥ‬‫ﻗﺒﻞ‬:-
١.‫ﺍ‬‫ﺑﺮﻧﺎﻣﺞ‬‫ﺍﶈﻠﻲ‬‫ﻟﺴﲑﻓﺮ‬)localhost(‫ﻟﻠﺘﺤﻤﻴﻞ‬
٢.‫ﺍﻟﺼﻔﺤﺎﺕ‬‫ﲢﺮﻳﺮ‬‫ﺑﺮﻧﺎﻣﺞ‬)phpdesigner2008(‫ﻟﻠﺘﺤﻤﻴﻞ‬
٣.‫ﺍﳌﺸﻬﻮﺭ‬‫ﺍﻟﺼﻮﺭ‬‫ﻣﻌﺎﳉﺔ‬‫ﺑﺮﻧﺎﻣﺞ‬)photoshop cs2(‫ﻟﻠﺘﺤﻤﻴﻞ‬
‫ﺗﻨﺒﻴﻪ‬:-
‫ﻗﺮﻳﺐ‬‫ﺇﺫﺍ‬‫ﺍﻹﺻﺪﺍﺭ‬‫ﻓﺎﺭﻕ‬‫ﻣﺎﻧﻊ‬‫ﻓﻼ‬‫ﻣﺜﺒﺖ‬‫ﺍﻟﱪﺍﻣﺞ‬‫ﺃﺣﺪ‬‫ﻋﻨﺪﻙ‬‫ﻛﺎﻥ‬‫ﺇﺫﺍ‬
‫ﺑ‬‫ﻋﻨﺪﻙ‬‫ﻣﺜﺎﻝ‬‫ﺮﻧﺎﻣﺞ‬photoshop‫ﻭﺻﻠﺖ‬‫ﺍﷲ‬‫ﺷﺎﺀ‬‫ﺇﻥ‬‫ﺍﳌﺨﺮﺟﺎﺕ‬‫ﺷﻲﺀ‬‫ﺃﻫﻢ‬‫ﳝﺸﻲ‬‫ﺇﺻﺪﺍﺭ‬‫ﺃﻱ‬
‫ﺍﳌﻌﻠﻮﻣﺔ‬

‫ﺩﻭﺭﺓ‬web 0.2٧
‫ﺍﻟﻌﺎﳌﲔ‬‫ﺭﺏ‬‫ﷲ‬‫ﺍﳊﻤﺪ‬
‫ﺃﲨﻌﲔ‬‫ﺻﺤﺒﻪ‬‫ﻭ‬‫ﺁﻟﻪ‬‫ﻋﻠﻲ‬‫ﻭ‬‫ﺍﻟﻜﺮﱘ‬‫ﺍﻟﻨﱯ‬‫ﳏﻤﺪ‬‫ﺳﻴﺪﻧﺎ‬‫ﻋﻠﻰ‬‫ﺍﻟﺴﻼﻡ‬‫ﻭ‬‫ﺍﻟﺼﻼﺓ‬‫ﻭ‬
‫ـﺪﺍﺀ‬‫ـ‬‫ـ‬‫ـ‬‫ـ‬‫ـ‬‫ـ‬‫ـ‬‫ـ‬‫ـ‬‫ﻫ‬‫ﺇ‬..
‫ـﻲ‬‫ﻌ‬‫ﻳﺴ‬‫ـﺺ‬‫ﺨ‬‫ﺷ‬‫ﻟﻜﻞ‬‫ـﺪﺍﺀ‬‫ـ‬‫ﻫ‬‫ﺇ‬‫ﻭ‬‫ﻟﻠﺘﻌﻠﻢ‬‫ﺍﻻﺳﺘﻔﺎﺩﺓ‬..
‫ﺃﺻﻞ‬‫ﺃﻥ‬‫ﺳﺎﻋﺪﱐ‬‫ﻭ‬‫ﹰ‬‫ﺎ‬‫ـ‬‫ﻓ‬‫ﺣﺮ‬‫ـﻲ‬‫ﻨ‬‫ﻋﻠﻤ‬‫ﻣﻦ‬‫ﻟﻜﻞ‬‫ـﺪﺍﺀ‬‫ـ‬‫ﻫ‬‫ﺇ‬‫ﺇﱃ‬‫ـﺎ‬‫ﻣ‬‫ﻋﻠﻴﻪ‬‫ﺃﻧﺎ‬..
‫ـﺪﻡ‬‫ﺨ‬‫ﻣﺴﺘ‬‫ﻟﻜﻞ‬‫ـﺪﺍﺀ‬‫ـ‬‫ﻫ‬‫ﺇ‬‫ﻣﺴﻠﻢ‬‫ﻣﻄﻮﺭ‬‫ﻟﻴﺼﺒﺢ‬‫ﻳﺴﻌﻲ‬..
‫ـﺎﺹ‬‫ﺧ‬‫ـﺪﺍﺀ‬‫ـ‬‫ـ‬‫ـ‬‫ـ‬‫ﻫ‬‫ﺇ‬..
‫ﻭ‬‫ﹰ‬‫ﺎ‬‫ـ‬‫ـ‬‫ﻌ‬‫ﻣﻮﻗ‬‫ﺭ‬‫ﻮ‬‫ﹸﻄ‬‫ﳌ‬‫ﺇ‬‫ﺯﺍﺋﺮﻳﻦ‬‫ﻭ‬‫ـﺎﺀ‬‫ـ‬‫ـ‬‫ﻀ‬‫ﺃﻋ‬‫ﻭ‬‫ﺩﺍﺭﺓ‬
‫ﰲ‬‫ﻫﺬﻩ‬‫ﺍﻟﺪﻭﺭﺓ‬‫ﺍﻟﱵ‬‫ﺍﻟﺪﻭﺭﺍﺕ‬‫ﺃﻗﻮﻯ‬‫ﻣﻦ‬‫ﻌﺪ‬‫ﺗ‬‫ﺍﻟﱵ‬‫ﻳﺘﻢ‬‫ﺳﻮﻑ‬‫ﺇﺩﺭﺍﺟﻬ‬‫ﺎ‬‫ﻄﻮﺭ‬‫ﻣ‬‫ﺩﻭﺭﺍﺕ‬‫ﺿﻤﻦ‬
‫ﺍﻟﺘﻌﻠﻴﻤﻴﺔ‬،‫ﺍﻟﺪﻭﺭﺓ‬‫ﻓﻬﺬﻩ‬‫ﻫﻲ‬‫ﺍﻟﺘﺼﻤﻴﻢ‬‫ﻣﻔﻬﻮﻡ‬‫ﻟﺘﺪﺧﻞ‬‫ﻣﻔﺘﺎﺣﻚ‬‫ﺍﶈﺘﺮﻓﲔ‬‫ﺑﺄﺳﻠﻮﺏ‬‫ﻟﻠﻤﻮﺍﻗﻊ‬
‫ﺴﺘﺨﺪﻣﺎ‬‫ﻣ‬‫ﺍﻷﺳﺎﺱ‬‫ﺍﻟﱪﳎﻲ‬‫ﰲ‬‫ﻋﻦ‬‫ﻭﺍﻻﺑﺘﻌﺎﺩ‬‫ﺍﻟﺘﺼﻤﻴﻢ‬‫ﺍﻷﺩﻭﺍﺕ‬‫ﺍﻟﱵ‬‫ﺗﻘﻠﻴﺪﻳﺔ‬‫ﺑﺎﺗﺖ‬‫ﰲ‬
‫ﻣﺜﻞ‬‫ﺍﺳﺘﺨﺪﺍﻣﻬﺎ‬‫ﻭﻧ‬‫ﺍﻟﻔﺮ‬‫ﺖ‬‫ﺑﺒﺞ‬.....‫ﺍﱁ‬
‫ﺍﻟﺪﻭﺭﺓ‬‫ﺗﺘﻤﺜﻞ‬‫ﰲ‬‫ﺍﻟﺘﺼﻤﻴﻢ‬‫ﻛﻴﻔﻴﺔ‬‫ﺑﺎﺳﺘﺨﺪﺍﻡ‬‫ﻣﺒﺪﺃ‬web 2.0‫ﺍﻟﺬﻱ‬‫ﺃﻗﻮﻡ‬‫ﺳﻮﻑ‬
‫ﺍﷲ‬‫ﺑﺄﺫﻥ‬‫ﺍﻟﺪﻭﺭﺓ‬‫ﺑﺪﺍﻳﺔ‬‫ﻣﻊ‬‫ﻣﻔﻬﻮﻣﻪ‬‫ﺑﺸﺮﺡ‬.

‫ﺩﻭﺭﺓ‬web 0.2٨
‫ﳌﺼﻄﻠﺢ‬‫ﺗﻌﺮﻳﻒ‬‫ﻭﻫﻮ‬‫ﺍﻟﺪﻭﺭﺓ‬‫ﺩﺭﻭﺱ‬‫ﺑﺄﻭﻝ‬‫ﺍﻟﻜﺮﺍﻡ‬‫ﺃﻋﻀﺎﺀﻧﺎ‬‫ﻣﻌﻜﻢ‬‫ﻧﺒﺪﺃ‬web 2.0
‫ﺍﻟﺬﻱ‬‫ﺍﻟﻜﺎﻣﻞ‬‫ﻣﻔﻬﻮﻣﻪ‬‫ﺍﻟﻜﺜﲑ‬‫ﻳﻌﻠﻢ‬‫ﻻ‬‫ﻗﺪ‬
‫ﹰ‬‫ﻻ‬‫ﺃﻭ‬:‫ﰲ‬‫ﻋﺎﻡ‬٢٠٠٤‫ﻃﻔﺮﺓ‬‫ﺣﺪﺛﺖ‬‫ﰲ‬‫ﺍﻟﻮﻳﺐ‬‫ﻭﺃﺻﺒﺤ‬‫ﺖ‬‫ﺗﺘﻄﻮﺭ‬‫ﺍﳌﻮﺍﻗﻊ‬‫ﰲ‬‫ﳏﺘﻮﺍﻫﺎ‬
‫ﻟﻠﻮﻳﺐ‬‫ﹲﺴﺘﺨﺪﻡ‬‫ﳌ‬‫ﺍ‬‫ﻣﻊ‬‫ﺗﻮﺍﺻﻠﻬﺎ‬‫ﻭﻃﺮﻳﻘﺔ‬،‫ﻛﺜﲑﺓ‬‫ﺗﻐﻴﲑﺍﺕ‬‫ﺣﺪﺛﺖ‬‫ﺍﻟﺘﺎﺭﻳﺦ‬‫ﻫﺬﺍ‬‫ﻓﺒﻌﺪ‬
‫ﻧﺴﻤﻴﻪ‬‫ﻣﺎ‬‫ﻭﻫﻮ‬‫ﺍﳌﻮﺍﻗﻊ‬‫ﻫﻴﻜﻠﺔ‬‫ﺃﺳﻠﻮﺏ‬‫ﻇﻬﻮﺭ‬‫ﻭﻣﻨﻬﺎ‬web2.0
2.0web:‫ﻫﻲ‬‫ﻣﻦ‬‫ﻣﺘﻜﺎﻣﻠﺔ‬‫ﳎﻤﻮﻋﺔ‬‫ﻋﻦ‬‫ﻋﺒﺎﺭﺓ‬‫ﺍﻷﺩﻭﺍﺕ‬‫ﻭﺍﻟﻮﻇﺎﺋﻒ‬‫ﻭﺍﳋﻴﺎﺭﺍﺕ‬‫ﺍﻟﱵ‬
‫ﻭﺍﺣﺪﺓ‬‫ﺑﻴﺌﺔ‬‫ﲢﺖ‬‫ﺗﻮﺟﺪ‬،‫ﻤﻮﻋﺔ‬‫ﺍ‬‫ﻫﺬﻩ‬‫ﺍﻟﱪﳎﺔ‬‫ﻟﻐﺎﺕ‬‫ﻣﻦ‬‫ﳎﻤﻮﻋﺔ‬‫ﻃﺮﻳﻖ‬‫ﻋﻦ‬‫ﻋﻤﻠﻬﺎ‬‫ﻳﺘﻢ‬
‫ﺍﳌﺨﺘﻠﻔﺔ‬،‫ﺍﻟﺒﻌﺾ‬‫ﺑﻌﻀﻬﺎ‬‫ﻣﻊ‬‫ﻭﺗﻜﺎﻣﻞ‬‫ﺑﺘﻨﺎﻏﻢ‬‫ﻟﺘﻌﻤﻞ‬

‫ﺩﻭﺭﺓ‬web 0.2٩
‫ﹰ‬‫ﻻ‬‫ﺃﻭ‬:‫ﻣﺎ‬‫ﻫﻲ‬‫ﻫﺬﻩ‬‫ﺍﻷﺩﻭﺍﺕ‬‫؟‬‫ﻭﺍﻟﻮﻇﺎﺋﻒ‬‫ﻭﺍﳋﻴﺎﺭﺍﺕ‬
‫ﻣﺜﺎﻝ‬‫ﻟﻨﻀﺮﺏ‬‫ﻋﻤﻠﻲ‬:‫ﻣﻄﻮﺭ‬‫ﻣﻮﻗﻊ‬!
‫ﻣﺘﻜﺎﻣﻠﺔ‬‫ﺑﺮﳎﻴﺔ‬‫ﺑﻴﺌﺔ‬‫ﲢﺖ‬‫ﻣﻨﺘﺪﻯ‬‫ﻋﻦ‬‫ﻋﺒﺎﺭﺓ‬‫ﻣﻄﻮﺭ‬‫ﻣﻮﻗﻊ‬vbulletin
‫ﺍﻟ‬‫ـ‬vbulletin‫ﺍﻻﺗﻰ‬‫ﺎ‬‫ﲡﺪ‬‫ﺭﺍﺡ‬‫ﳍﺎ‬‫ﻧﻈﺮﺕ‬‫ﻟﻮ‬:
١-search:‫ﺍﻋﻀﺎﺀ‬‫ﻣﻮﺍﺿﻴﻊ‬‫ﺍﻭ‬‫ﻣﻮﺍﺿﻴﻌﻚ‬‫ﻋﻦ‬‫ﻟﺘﺒﺤﺚ‬‫ﺗﺴﺘﺨﺪﻣﻪ‬‫ﺍﻟﺬﻯ‬‫ﺍﻟﺒﺤﺚ‬‫ﳏﺮﻙ‬‫ﻭﻫﻮ‬
‫ﻣﺎ‬‫ﻣﻮﺿﻮﻋﺎ‬‫ﻋﻦ‬‫ﺗﺒﺤﺚ‬‫ﺍﻭ‬‫ﺍﺧﺮﻯ‬
٢-links:‫ﻳﻮﺟﺪ‬‫ﻓﺄﻧﺖ‬‫ﰲ‬‫ﺍﻋﻼﻧﻴﺔ‬‫ﻟﻨﻜﺎﺕ‬‫ﺍﳍﻴﺪﺭ‬-‫ﻟﻠﻮﺣﺔ‬‫ﺍﺭﺷﺎﺩﻳﺔ‬‫ﻟﻨﻜﺎﺕ‬‫ﺑﺎﺭ‬‫ﻭﺍﻟﻨﺎﻑ‬
‫ﻭﺍﳌﺸﺎﺭﻛﺎﺕ‬‫ﻭﺍﻟﺒﺤﺚ‬‫ﺍﻟﺘﺤﻜﻢ‬‫ﺍﻻﺧﲑﺓ‬.......‫ﺍﱁ‬
٣-authoring:‫ﺍﻻﻋﻀﺎﺀ‬‫ﻗﺒﻞ‬‫ﻣﻦ‬‫ﻛﺘﺎﺑﺘﻬﺎ‬‫ﲤﺖ‬‫ﻣﻮﺍﺿﻴﻊ‬‫ﲡﺪ‬‫ﻓﺄﻧﺖ‬،‫ﲡﺪ‬‫ﺍﳌﻮﺍﺿﻴﻊ‬‫ﻫﺬﻩ‬
‫ﻳﻮﻣﻴﺎ‬‫ﲢﺪﺙ‬‫ﲡﺪﻳﺪﺍﺕ‬‫ﻟﻪ‬‫ﻭﲡﺪ‬‫ﺭﺩﻭﺩ‬‫ﳍﺎ‬
٤-tags:‫ﺍﻟﺒﺤﺚ‬‫ﺍﻟﻮﺻﻮﻝ‬‫ﻋﻨﺎﺀ‬‫ﻟﻚ‬‫ﺗﺴﻬﻞ‬‫ﻣﺎ‬‫ﻓﻬﻰ‬‫ﺍﻻﺭﺷﺎﺩﻳﺔ‬‫ﺍﻟﻜﻠﻤﺎﺕ‬،‫ﺍﻻﻛﺜﺮ‬‫ﻟﻚ‬‫ﺗﺒﲔ‬‫ﻓﻬﻰ‬
‫ﺍﻻﻋﻀﺎﺀ‬‫ﺑﲔ‬‫ﻣﻦ‬‫ﲝﺜﺎ‬‫ﻛﻠﻤﺎﺗﺎ‬.....
٥-Rss:‫ﻣﻔ‬‫ﻭﻫﻰ‬‫ﻭﺍﳌﻮﺍﻗﻊ‬‫ﺍﻟﺒﺤﺚ‬‫ﳏﺮﻛﺎﺕ‬‫ﻋﻠﻰ‬‫ﻣﻜﺎﻧﻪ‬‫ﺧﺎﺭﺝ‬‫ﺍﳌﻨﺘﺪﻯ‬‫ﻣﻮﺍﺿﻴﻊ‬‫ﻧﺸﺮ‬‫ﺘﺎﺡ‬
‫ﺍﻻﺧﺮﻯ‬.

‫ﺩﻭﺭﺓ‬web 0.2١٠
‫ﺛﺎﻧﻴﺎ‬:‫ﻣﺎ‬‫ﻫ‬‫ﻲ‬‫ﺍﻟﱪﳎﻴﺔ‬‫ﺍﻟﻠﻐﺎﺕ‬‫ﺍﻟﱵ‬‫ﺍﺳﺘﺨﺪﺍﻣﻬﺎ؟‬‫ﻳﺘﻢ‬
1-css+html:‫ﻣﻘﺴﻢ‬‫ﺍﻧﻪ‬‫ﲡﺪ‬‫ﺭﺍﺡ‬‫ﻣﻄﻮﺭ‬‫ﻓﻤﻮﻗﻊ‬‫ﺇﱃ‬‫ﻭﻣﻨﺘﺪﻯ‬‫ﻫﻴﺪﺭ‬)‫ﺟﺪﺍﻭﻝ‬(‫ﻭﻓﻮﺗﺮ‬،
‫ﻭﺃﻳﻀﺎ‬‫ﻭﻟﻠﺮﺩﻭﺩ‬‫ﻣﻮﺿﻮﻉ‬‫ﻟﻜﺘﺎﺑﺔ‬‫ﺧﺎﻧﺎﺕ‬‫ﲡﺪ‬‫ﺭﺍﺡ‬....‫ﺍﱁ‬
‫ﻫﺬﻩ‬‫ﻳﺘﻢ‬‫ﻛﻠﻪ‬‫ﺗﻨﺴﻴﻘﻪ‬‫ﺑ‬‫ـ‬html-css
2-ajax:‫ﲢﻤﻴﻞ‬‫ﺍﻋﺎﺩﺓ‬‫ﺩﻭﻥ‬‫ﺍﺿﺎﻓﺘﻪ‬‫ﻳﺘﻢ‬‫ﻣﻮﺿﻮﻉ‬‫ﻋﻠﻰ‬‫ﺭﺩ‬‫ﺗﻜﺘﺐ‬‫ﻋﻨﺪﻣﺎ‬‫ﺗﻼﺣﻆ‬‫ﻟﻌﻠﻚ‬
‫ﺍﺧﻰ‬‫ﻣﺮﺓ‬‫ﺍﻟﺼﻔﺤﺔ‬،‫ﻟﻐﺔ‬‫ﺎ‬‫ﺍ‬ajax‫ﺍﻟﺮﺍﺋﻌﺔ‬
3-php:‫ﺍﻟﺒﺎﻟﻐﺔ‬‫ﺍﻟﺴﻬﻮﻟﺔ‬‫ﺗﻼﺣﻆ‬‫ﻟﻌﻠﻚ‬‫ﰲ‬‫ﻣﻮﺿﻮﻉ‬‫ﻛﺘﺎﺑﺔ‬،‫ﻭﻣﻮﺍﺿﻴﻌﻚ‬‫ﺑﻴﺎﻧﺎﺗﻚ‬‫ﻭﲣﺰﻳﻦ‬
‫ﺗﺸﺎﺀ‬‫ﻭﻗﺘﻤﺎ‬‫ﻭﺍﺳﺘﺪﻋﺎﺋﻬﺎ‬،‫ﺍﻟﺒﻨﺎﺋﻴﺔ‬‫ﺍﻟﻠﻐﺔ‬‫ﺎ‬‫ﺍ‬‫ﻭﺍﻟﱴ‬‫ﻟﻠﻤﻨﺘﺪﻯ‬‫ﺍﻟﺒﻴﺎﻧﺎﺕ‬‫ﻗﻮﺍﻋﺪ‬‫ﲢﺎﻛﻰ‬mysql
‫ﻣﻔﻬﻮﻡ‬‫ﻋﺮﻓﻨﺎ‬‫ﻗﺪ‬‫ﻧﻜﻮﻥ‬‫ﺳﺒﻖ‬‫ﳑﺎ‬‫ﻣﻦ‬web 2.0‫ﺩﻗﻴﻖ‬‫ﺑﺸﻜﻞ‬
‫ﺭﺍﺳﻚ‬‫ﻣﻦ‬‫ﻳﻄﲑ‬‫ﻭﻣﺎ‬‫ﺍﳌﻌﲎ‬‫ﻟﺘﺘﺬﻛﺮ‬‫ﺍﻟﺼﻮﺭﺓ‬‫ﻫﺬﻩ‬‫ﻭﺍﻟﻴﻜﻢ‬

‫ﺩﻭﺭﺓ‬web 0.2١٢
‫ﺑﻌﺪ‬‫ﺃﻥ‬‫ﻣﻔﻬﻮﻡ‬‫ﻋﻠﻰ‬‫ﺗﻌﺮﻓﻨﺎ‬web 2.0‫ﺻﺤﻴﺢ‬‫ﺑﺸﻜﻞ‬‫ﺩﺭﻭﺱ‬‫ﺑﺄﻭﻝ‬‫ﻧﺒﺪﺃ‬‫ﺩﻋﻮﻧﺎ‬‫ﻭﻫﻰ‬‫ﺍﻟﺪﻭﺭﺓ‬
‫ﺇﻋﻄﺎﺀ‬‫ﻋﻦ‬‫ﻧﺒﺬﺓ‬xhtml+css‫ﳜﺪﻡ‬‫ﲟﺎ‬‫ﺩﻭﺭﺗﻨﺎ‬.
‫ﻛﺜﲑﺍ‬‫ﻳﻄﻮﻝ‬‫ﻗﺪ‬‫ﺍﻟﻜﻼﻡ‬‫ﻻﻥ‬‫ﻳﻬﻤﻨﺎ‬‫ﻣﺎ‬‫ﻋﻠﻰ‬‫ﻓﻴﻬﺎ‬‫ﺃﺭﻛﺰ‬‫ﺭﺍﺡ‬‫ﻭﺍﻟﻨﺒﺬﺓ‬‫ﰲ‬‫ﺍﻟﺘﺤﺪﺙ‬‫ﻋﻦ‬
xhtml+css‫ﻟﻪ‬‫ﺗﻮﺻﻠﺖ‬‫ﻣﺎ‬‫ﺧﻼﻝ‬‫ﻣﻦ‬‫ﺍﳋﻼﺻﺔ‬‫ﻧﻌﻄﻴﻜﻢ‬‫ﺩﻋﻮﻧﺎ‬‫ﻭﻟﻜﻦ‬‫ﺍﳌﻮﺿﻮﻉ‬‫ﺍﺷﺮﺡ‬‫ﻭﺭﺍﺡ‬
‫ﺍﷲ‬‫ﺷﺎﺀ‬‫ﺍﻥ‬‫ﳑﺘﻊ‬‫ﺑﺸﻜﻞ‬‫ﺃﺳﺎﺳ‬‫ﺗﻌﺮﻑ‬‫ﺍﻥ‬‫ﻋﻠﻴﻚ‬‫ﺗﺒﺪﺃ‬‫ﺍﻥ‬‫ﻗﺒﻞ‬‫ﻭﻟﻜﻦ‬‫ﻴﺎﺕ‬‫ﺍﻟﺼﻔﺤﺎﺕ‬‫ﻫﻴﻜﻴﻠﺔ‬‫ﺑﺸﻜﻞ‬
‫ﺃﺳﺎﺳﻰ‬‫ﻟﺪﻭﺭﺓ‬‫ﺑﺎﻟﺘﻮﺟﻪ‬‫ﺃﻧﺼﺢ‬‫ﻟﺬﺍ‬html‫ﺗﻔﻴﺪﻙ‬‫ﺭﺍﺡ‬‫ﻓﻬﻰ‬‫ﻣﻄﻮﺭ‬‫ﻋﻠﻰ‬‫ﻛﺜﲑ‬
‫ﻗﺒﻞ‬‫ﺗﻨﺒﻴﻪ‬‫ﺍﻟﺒﺪﺀ‬:‫ﻭﺣﺘﻤﺎ‬‫ﻻﺑﺪ‬‫ﻭﺇﻟﺰﺍﻣﺎ‬‫ﺃﻥ‬‫ﺑﻨﻔﺴﻚ‬‫ﺍﻻﻛﻮﺍﺩ‬‫ﻭﺣﻔﻆ‬‫ﻛﺘﺎﺑﺔ‬‫ﻋﻠﻰ‬‫ﻧﻔﺴﻚ‬‫ﺗﻌﻮﺩ‬
‫ﻭﻟﺼﻖ‬‫ﻧﺴﺦ‬‫ﻭﻟﻴﺲ‬،‫ﻻﻥ‬‫ﺍﻹﺑﺪﺍﻉ‬‫ﻟﻦ‬‫ﻳﺄﰐ‬‫ﺇﻻ‬‫ﻋﻤﻠﻪ‬‫ﻭﻃﺮﻳﻘﺔ‬‫ﺍﻟﻜﻮﺩ‬‫ﺣﻔﻆ‬‫ﻣﻦ‬
‫ﲟﺜﺎﻝ‬‫ﻧﻨﻄﻠﻖ‬‫ﻋﻤﻠﻲ‬‫ﺃﻭﺳﻊ‬‫ﺑﺸﻜﻞ‬‫ﻧﻔﻬﻢ‬‫ﺣﱴ‬:
‫ﺃﻭﻻ‬:‫ﺍﻻﺗﻰ‬‫ﺍﻟﺮﺍﺑﻂ‬‫ﺍﻓﺘﺢ‬‫ﺍﺿﻐﻂ‬‫ﻫ‬‫ﻨﺎ‬
‫ﺍﻟﺼﻔﺤﺔ‬‫ﻋﻠﻰ‬‫ﻭﺍﻗﻒ‬‫ﻭﺃﻧﺖ‬‫ﳝﲔ‬‫ﻛﻠﻴﻚ‬‫ﺑﻌﻤﻞ‬‫ﻗﻢ‬،‫ﺍﻟﺼﻔﺤﺔ‬‫ﻫﺬﻩ‬‫ﻣﺼﺪﺭ‬‫ﻋﺮﺽ‬‫ﻭﺍﺧﺘﻴﺎﺭ‬view
source code
‫ﺍﻟﺴﻮﺭﺱ‬‫ﻧﺸﻮﻑ‬‫ﺭﺍﺡ‬‫ﺍﻟﱪﳎﻲ‬‫ﺑﺎﻟﺼﻮﺭﺓ‬‫ﻛﻤﺎ‬‫ﺍﻟﺼﻔﺤﺔ‬‫ﳍﺬﻩ‬:

‫ﺩﻭﺭﺓ‬web 0.2١٣
‫ﺍﻟﺼﻔﺤﺔ‬‫ﻫﺬﻩ‬‫ﳓﻠﻞ‬‫ﺩﻋﻮﻧﺎ‬:
‫ﻛﻮﺩ‬:
<!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">
‫ﺍﳉ‬‫ﻫﺬﻩ‬‫ﻭﺿﻌﻬﺎ‬‫ﻣﻦ‬‫ﻭﻻﺑﺪ‬‫ﺟﺪﺍ‬‫ﻣﻬﻤﺔ‬‫ﻤﻠﺔ‬‫ﰲ‬‫ﺻﻔﺤﺔ‬‫ﺍﻯ‬‫ﺑﺪﺍﻳﺔ‬،‫ﻭﻭﻇﻴﻔﺘﻬﺎ‬
‫ـ‬‫ﻟ‬‫ﻃﺒﻘﺎ‬‫ﺍﳌﺘﺼﻔﺤﺎﺕ‬‫ﲨﻴﻊ‬‫ﻋﻠﻰ‬‫ﻮﺣﺪ‬‫ﻣ‬‫ﺍﻟﺼﻔﺤﺔ‬‫ﻧﺴﻖ‬‫ﲜﻌﻞ‬‫ﺗﻘﻮﻡ‬‫ﺎ‬‫ﺍ‬w3‫ﺍﳌﺆﺳﺴﺔ‬
‫ﻟ‬‫ـ‬html
‫ﻣﻮﻗﻊ‬‫ﲡﺪ‬‫ﻗﺪ‬‫ﻓﻤﺜﻼ‬‫ﰲ‬‫ﺑﺸﻜﻞ‬‫ﻳﻌﻤﻞ‬‫ﺍﻟﻔﺎﻳﺮﻓﻮﻛﺲ‬‫ﻭﻋﻠﻰ‬‫ﺍﻻﻛﺴﺒﻠﻮﺭ‬‫ﻋﻠﻰ‬‫ﻓﺮﺍﻍ‬‫ﻓﻮﻗﻪ‬‫ﺍﳍﻴﺪﺭ‬
‫ﺳﻠﻴﻢ‬،‫ﺍﳉﻤﻠﺔ‬‫ﻫﺬﻩ‬‫ﺍﻥ‬‫ﺑﺴﺒﺐ‬‫ﻭﻫﺬﺍ‬‫ﺍﻻ‬‫ﻻﺗﺪﻋﻢ‬‫ﻗﺪ‬‫ﺍﻛﺴﺒﻠﻮﺭﺭ‬‫ﻧﺘﺮﻧﺖ‬٦

‫ﺩﻭﺭﺓ‬web 0.2١٤
‫ﻧﻜﻤﻞ‬.......
‫ﻭﲰﻰ‬‫ﺑﲔ‬‫ﺍﻧﻪ‬‫ﺗﻼﺣﻆ‬‫ﻟﻮ‬head‫ﺍﻻﺗﻰ‬‫ﻭﺿﻊ‬‫ﰎ‬:
‫ﻛﻮﺩ‬:
<title>‫ﺍﳌﺴﺘﺪﻳﺮﺓ‬‫ﺍﻟﺰﻭﺍﻳﺎ‬‫ﻭﺗﺼﻤﻴﻢ‬‫ﲣﻄﻴﻂ‬‫/<ﺩﺭﺱ‬title>
‫ﺍﻟﺼﻔﺤﺔ‬‫ﺑﻌﻨﻮﺍﻥ‬‫ﺧﺎﺹ‬‫ﻭﻫﻮ‬‫ﺍﻟﻠﻲ‬‫ﻳﻈﻬﺮﻟﻚ‬‫ﺭﺍﺡ‬‫ﰲ‬‫ﺍﳌﺘﺼﻔﺢ‬:
‫ﻛﻮﺩ‬:
<meta http-equiv"content-type"
content="text/html;charset=windows-1256" />
‫ﺟﺪﺍ‬‫ﻣﻬﻤﺔ‬‫ﺍﳉﻤﻠﺔ‬‫ﻫﺬﻩ‬،‫ﺗﻜﻤﻦ‬‫ﻭﻭﻇﻴﻔﺘﻬﺎ‬‫ﰲ‬‫ﺑﺎﻟﺼﻔﺤﺔ‬‫ﺍﳋﺎﺹ‬‫ﺍﻟﺘﺮﻣﻴﺰ‬‫ﺗﻌﺮﻳﻒ‬‫ﻻﺣﻆ‬‫ﺃﻥ‬
windows-1256‫ﺍﻟﻌﺮﺑﻴﺔ‬‫ﻟﻠﻐﺔ‬‫ﻭﺍﳌﻨﺎﺳﺐ‬‫ﺑﺎﻟﺼﻔﺤﺔ‬‫ﺍﳋﺎﺹ‬‫ﺍﻟﺘﺮﻣﻴﺰ‬‫ﻫﻮ‬‫ﺃﻧﻮﺍﻉ‬‫ﻭﻳﻮﺟﺪ‬
‫ﺗﺮﻣﻴﺰ‬‫ﺃﺧﺮﻯ‬‫ﻙ‬utf-8‫ﻭ‬iso-8859-1‫ﻣﺜﻼ‬‫ﲣﻴﻞ‬‫ﺇﻧﻨﺎ‬‫ﺗﺮﻣﻴﺰ‬‫ﺑﺘﻐﻴﲑ‬‫ﻗﻤﻨﺎ‬‫ﻫﺬﻩ‬
‫ﻟ‬‫ﺍﻟﺼﻔﺤﺔ‬‫ـ‬iso-8859-1‫ﺍﻟﻠﺨﺒﻄﺔ‬‫ﺷﻮﻓﻮﺍ‬‫ﺍﻟﻠﻲ‬‫ﲢﺼﻞ‬‫ﺭﺍﺡ‬:

‫ﺩﻭﺭﺓ‬web 0.2١٥
<link rel="stylesheet" href="style.css"
media="screen" />
‫ﻣﻠﻒ‬‫ﳌﻜﺎﻥ‬‫ﺗﺸﲑ‬‫ﻭﻫﻰ‬‫ﻣﻬﻤﺔ‬‫ﲨﻠﺔ‬css‫ﺍﳌﺴﻤﻰ‬style.css‫ﻛﻴﻒ‬‫ﻧﺘﻌﺮﻑ‬‫ﺭﺍﺡ‬‫ﻻﺣﻘﺎ‬‫ﺍﻟﻠﻰ‬
‫ﺍﻟﺼﻔﺤﺔ‬‫ﺗﺼﻤﻴﻢ‬‫ﻧﻐﲑ‬‫ﺭﺍﺡ‬‫ﻃﺮﻳﻘﻪ‬‫ﻋﻦ‬‫ﳌﻠﻒ‬‫ﺻﻮﺭﺓ‬css
‫ﻋﻦ‬‫ﺍﳌﺴﺌﻮﻝ‬‫ﺍﳌﻠﻒ‬‫ﻫﻮ‬‫ﻫﺬﺍ‬‫ﻳ‬‫ﺇﺳﺘﺎ‬‫ﻞ‬‫ﳝﻜﻨﻚ‬‫ﺧﻼﻟﻪ‬‫ﻣﻦ‬‫ﺍﻟﺼﻔﺤﺔ‬‫ﺧ‬‫ﺗﻐﲑ‬‫ﻄﻮﻁ‬+‫ﺍﻟﻠﻮﻥ‬+‫ﻧﻮﻉ‬
‫ﻭﺍﻟﻜﺜﲑ‬‫ﺍﳋﻂ‬‫ﻋﻠﻴﻚ‬‫ﺍﻹﺑﺪﺍﻉ‬‫ﻧﺪﻉ‬

‫ﺩﻭﺭﺓ‬web 0.2١٦
‫ﺬﺍ‬‫ﻭ‬‫ﻭﺳﻢ‬‫ﺑﲔ‬‫ﻣﺎ‬‫ﺍﻧﺘﻬﻰ‬head،‫ﻭﻻﺣﻆ‬‫ﺃﻥ‬‫ﺍﻟﻮﺳﻢ‬‫ﻫﺬﺍ‬‫ﺑﲔ‬‫ﻮﺿﻊ‬‫ﺗ‬‫ﻭﺍﻥ‬‫ﻻﺑﺪ‬‫ﺍﻻﻛﻮﺍﺩ‬‫ﻫﺬﻩ‬
‫ﻭﻟﻴﺲ‬‫ﰲ‬‫ﻣﻜﺎﻥ‬‫ﺍﻯ‬‫ﻧﺄﰐ‬‫ﺃﺧﺮ‬‫ﺍﻵﻥ‬‫ﺍﻟ‬‫ﻟﻮﺳﻢ‬‫ـ‬body‫ﺍﻟﺼﻔﺤﺔ‬‫ﲜﺴﻢ‬‫ﺧﺎﺹ‬‫ﻭﻫﻮ‬‫ﻭﳏﺘﻮﺍﻫﺎ‬
<div id="container">
<div id="header">
<h1><a href="http://vistacompany.org" title="‫ﻋﻤﻞ‬‫ﺩﺭﺱ‬
‫ﻣﺴﺘﺪﻳﺮﺓ‬‫ﻭﺯﻭﺍﻳﺎ‬‫ﲣﻄﻴﻂ‬ ">vista-design</a></h1>
</div>
<div id="content">
<h2>‫/<ﺍﶈﺘﻮﻯ‬h2>
<p>‫ﺑﺘﻘﻨﻴﺔ‬‫ﺃﻓﻌﻞ‬‫ﺃﻥ‬‫ﳝﻜﻦ‬‫ﻣﺎﺫﺍ‬ CSS‫؟‬
CSS ‫ﻭﺛﻴﻘﺔ‬‫ﺷﻜﻞ‬‫ﲢﺪﺩ‬‫ﺗﺼﻤﻴﻢ‬‫ﻟﻐﺔ‬‫ﻫﻲ‬ HTML،
‫ﻭﺍﻻﺭ‬‫ﻭﺍﻟﻌﺮﺽ‬،‫ﺍﳍﺎﻣﺶ‬،‫ﺍﻷﻟﻮﺍﻥ‬،‫ﺑﺎﳋﻄﻮﻁ‬‫ﺘﻢ‬‫ﻓﻬﻲ‬،‫ﺗﻔﺎﻉ‬
</br>
‫ﻛﺜﲑ‬‫ﺃﺧﺮﻯ‬‫ﻭﺃﺷﻴﺎﺀ‬‫ﺍﳌﺴﺎﺣﺎﺕ‬‫ﺗﻮﺯﻳﻊ‬‫ﻭﻛﻴﻔﻴﺔ‬،‫ﺍﳌﻮﻗﻊ‬‫ﺧﻠﻔﻴﺔ‬‫ﺻﻮﺭﺓ‬
‫ﻭﺳﺘﺮﻯ‬‫ﻓﻘﻂ‬‫ﺍﻧﺘﻈﺮ‬،‫!ﺓ‬
</br>
HTML ‫ﺗﺼﻤﻴﻢ‬‫ﻹﺿﺎﻓﺔ‬‫ﺧﺎﻃﺊ‬‫ﺑﺸﻜﻞ‬‫ﺗﺴﺘﺨﺪﻡ‬‫ﺃﻥ‬‫ﳝﻜﻦ‬
‫ﻟﻠﻤﻮ‬
‫ﻟﻜﻦ‬،‫ﺍﻗﻊ‬ CSS ،‫ﻭﻋﻤﻠﻴﺔ‬‫ﺩﻗﺔ‬‫ﺃﻛﺜﺮ‬‫ﻭﻫﻲ‬‫ﺍﳋﻴﺎﺭﺍﺕ‬‫ﻣﻦ‬‫ﺍﳌﺰﻳﺪ‬‫ﺗﻮﻓﺮ‬
‫ﺍﻟﻴﻮﻡ‬‫ﺍﻟﺮﺋﻴﺴﻴﺔ‬‫ﺍﳌﺘﺼﻔﺤﺎﺕ‬‫ﻗﺒﻞ‬‫ﻣﻦ‬‫ﻣﺪﻋﻮﻣﺔ‬‫.ﻭﻫﻲ‬
</br>
</div>
<div id="footer">
coded by <a href="http://vistacompany.org.com"
title="css xhtml valid">vistacompany.org</a>
</div></div>

‫ﺩﻭﺭﺓ‬web 0.2١٧
‫ﻻﺣﻆ‬‫ﺇﻥ‬‫ﺍﲰﻪ‬‫ﻭﺳﻢ‬‫ﺑﲔ‬‫ﻭﺿﻌﻬﺎ‬‫ﰎ‬‫ﺍﳉﻤﻠﺔ‬‫ﻫﺬﺍ‬div
‫ﻭﺳﻢ‬>div></div<‫ﻣﻜﺮﺭ‬‫ﺑﺸﻜﻞ‬‫ﻳﺴﺘﺨﺪﻡ‬‫ﻭﺭﺍﺡ‬‫ﺟﺪﺍ‬‫ﻣﻬﻢ‬

‫ﺩﻭﺭﺓ‬web 0.2١٨
‫ﻳﻌﺘﱪ‬‫ﺍﻧﻪ‬‫ﻭﻓﺎﺋﺪﺗﻪ‬‫ﺇﺷﺎﺭ‬‫ﺓ‬‫ﻟﻠﻤﻨﻄﻘﺔ‬‫ﺍﻟﻠﻲ‬‫ﻣﻠﻒ‬‫ﺧﻼﻝ‬‫ﻣﻦ‬‫ﻋﻠﻴﻬﺎ‬‫ﻧﻌﺪﻝ‬‫ﺭﺍﺡ‬css
‫ﻓﻬﻤﺖ‬‫ﻣﺎ‬!!!!‫ﺃﻧﺎ‬‫ﺃﻗﻮﻟﻚ‬
‫ﻻﺣﻆ‬‫ﰲ‬‫ﻭﺳﻢ‬‫ﺑﺪﺍﻳﺔ‬div
‫ﲨﻠﺔ‬id‫ﻫﻲ‬‫ﺤﺪﺩ‬‫ﻣ‬‫ﻋﻦ‬‫ﻋﺒﺎﺭﺓ‬‫ﺇﻥ‬‫ﻟﻠﺘﻌﺪﻳﻞ‬‫ﲣﻀﻊ‬‫ﺭﺍﺡ‬‫ﺍﳌﻨﻄﻘﺔ‬‫ﻫﺬﻩ‬،‫ﺍﻟ‬‫ﻣﻠﻒ‬‫ﺷﻮﻑ‬‫ـ‬css‫ﻭﺭﺍﺡ‬
‫ﺗﻔﻬﻢ‬‫ﻗﺼﺪﻱ‬:

‫ﺩﻭﺭﺓ‬web 0.2١٩
‫ﺍﳊﲔ‬‫ﻓﻬﻤﻨﺎ‬‫ﺃﻥ‬‫ـ‬‫ﻟ‬‫ﺍ‬id‫ﺍﻧ‬‫ﺑﻴﻘﻮﻟﻨﺎ‬‫ﻪ‬‫ﰲ‬‫ﻣﻠﻒ‬css‫ﻋﻼﻣﺔ‬‫ﺑﺎﺳﺘﺨﺪﺍﻡ‬‫ﻟﻪ‬‫ﻧﺸﲑ‬‫ﺭﺍﺡ‬#‫ﺗﻌﲎ‬‫ﻭﻫﻰ‬
‫ـ‬‫ﻟ‬‫ﺍ‬id‫ﻭﺍﻟﺰﻭﺍﻳﺎ‬‫ﻭﺍﻟﺼﻮﺭ‬‫ﺍﳋﻄﻮﻁ‬‫ﺣﺠﻢ‬‫ﻣﻦ‬‫ﺍﻟﺼﻔﺤﺔ‬‫ﻣﻦ‬‫ﺍﳌﻨﻄﻘﺔ‬‫ﻫﺬﻩ‬‫ﺑﺘﻐﻴﲑ‬‫ﻧﻘﻮﻡ‬‫ﻟﻜﻰ‬
.....‫ﺍﱁ‬
‫ﻧﺸﻮﻑ‬‫ﺁﺧﺮ‬‫ﻣﺜﺎﻝ‬‫ﺍﻟﺼﻔﺤﺔ‬‫ﺁﺧﺮ‬‫ﺍﻟ‬‫ﻟﻮﺳﻢ‬‫ـ‬div
<div id="footer">
coded by <a href="http://vistacompany.org.com"
title="css xhtml valid">vistacompany.org</a>
</div>
‫ﻻﺣﻆ‬‫ﺃﻥ‬‫ﺍﻝ‬id‫ﻭﺍﲰﻪ‬‫ﺍﺧﺘﻠﻒ‬‫ﻣﻌﺮﻓﻪ‬footer
‫ﺍﻯ‬‫ﺃﻧﻨﺎ‬‫ﰲ‬‫ﻣﻠﻒ‬css‫ﻛﺎﻻﺗﻰ‬‫ﻟﻪ‬‫ﻧﺸﲑ‬‫ﻋﻨﺪﻣﺎ‬:
‫ﻛﻮﺩ‬:css
#footer{
padding:50px 60px;
background:url(steps_10.gif) no-repeat 0 0;
color:#ffffff;
}

‫ﺩﻭﺭﺓ‬web 0.2٢٠
‫ﻓﻘ‬‫ﺍﻟﻔﻮﺗﺮ‬‫ﻣﻨﻄﻘﺔ‬‫ﻋﻠﻰ‬‫ﻭﺍﻟﺘﻐﻴﲑ‬‫ﺍﻟﺘﻌﺪﻳﻞ‬‫ﻳﺘﻢ‬‫ﺭﺍﺡ‬‫ﺟﺰﺀ‬‫ﻋﻠﻰ‬‫ﺍﻟﺘﺄﺛﲑ‬‫ﺩﻭﻥ‬‫ﻂ‬‫ﺃﺧﺮ‬‫ﺍﻟﺼﻔﺤﺔ‬‫ﻣﻦ‬
‫ﺬﺍ‬‫ﻳﻜﻮﻥ‬‫ﺃﺧﺬﻧﺎ‬‫ﻣﺜﺎﻝ‬‫ﻋﻤﻠﻲ‬‫ﻟﻠﺠﺰﺀ‬‫ﺍﻷﻭﻝ‬‫ﻋﻠﻰ‬‫ﺍﻟﺘﻌﺮﻑ‬‫ﻣﻦ‬html+css
‫ﻭﺃﻧﺒﻪ‬‫ﻭﺍﻛﺮﺭ‬،‫ﻣﻦ‬‫ﻻﺑﺪ‬‫ﺇﻟﻘﺎﺀ‬‫ﺩﻭﺭﺓ‬‫ﻋﻠﻰ‬‫ﻧﻈﺮﺓ‬html‫ﺃﻛﺜﺮ‬‫ﺍﻟﺼﻮﺭﺓ‬‫ﻟﻚ‬‫ﺗﻀﺢ‬‫ﺣﱴ‬

‫ﺩﻭﺭﺓ‬web 0.2٢١
‫ﺍﻟﺴﺎﺑﻖ‬‫ﺍﳌﺜﺎﻝ‬‫ﻧﻔﺲ‬‫ﻧﻔﺘﺢ‬‫ﺭﺍﺡ‬‫ﻣﺼﺪﺭ‬‫ﻭﺭﺅﻳﺔ‬‫ﳝﲔ‬‫ﻛﻠﻴﻚ‬‫ﺑﺎﻟﻀﻐﻂ‬‫ﻛﻮﺩ‬‫ﺍﻟﺴﻮﺭﺱ‬‫ﺍﺳﺘﻌﺮﺽ‬
‫ﺍﻟﺼﻔﺤﺔ‬viewsource‫ﻣﺮﺓ‬‫ﺃﺧﺮﻯ‬:
‫ﻭﻣﻠﻒ‬‫ﻛﻮﺩ‬‫ﺍﻟﺴﻮﺭﺱ‬‫ﻋﻦ‬‫ﺍﻟﺘﺤﺪﺙ‬‫ﻳﻜﻮﻥ‬‫ﺭﺍﺡ‬‫ﻭﺍﳊﲔ‬css‫ﻭﺟﻮﺍﺏ‬‫ﺳﺆﺍﻝ‬‫ﻫﻴﺌﺔ‬‫ﻋﻠﻰ‬
١-‫ﻣﻠﻒ‬‫ﻣﺎﻫﻮ‬css.style‫ﺃﳘﻴﺘﻪ؟‬‫ﻫﻰ‬‫ﻭﻣﺎ‬
-‫ﻣﻠ‬‫ﻋﻦ‬‫ﻋﺒﺎﺭﺓ‬‫ﻫﻮ‬‫ﺍﻟﺼﻔﺤﺔ‬‫ﺷﻜﻞ‬‫ﻣﻦ‬‫ﻧﻐﲑ‬‫ﺭﺍﺡ‬‫ﻃﺮﻳﻘﺔ‬‫ﻭﻋﻦ‬‫ﻒ‬‫ﰲ‬‫ﻧﺮﻳﺪﻩ‬‫ﳓﻦ‬‫ﺟﺰﺀ‬‫ﺍﻯ‬،‫ﺳﻮﺍﺀ‬
-‫ﻟﻠﺼﻔﺤﺔ‬‫ﺧﻠﻔﻴﺔ‬‫ﻭﺿﻊ‬background
-‫ﺍﳋﻄﻮﻁ‬‫ﺗﻐﻴﲑ‬text‫ﺍﻟﻮﺍﻥ‬‫ﻣﻦ‬color‫ﻭﺍﺣﺠﺎﻡ‬font-size‫ﻭﻧﻮﻋﻬﺎ‬font-
family tahoma...timesnewroman....etc
-‫ﺟﺪﻭﻝ‬‫ﻭﺿﻊ‬border‫ﻭﺍﻟﺘﺤﻜﻢ‬‫ﰲ‬‫ﻭﻟﻮﻧﻪ‬‫ﻭﲰﻜﻪ‬‫ﺍﳊﺪ‬‫ﺣﺠﻢ‬‫ﻣﻦ‬‫ﺧﺼﺎﺋﺼﻪ‬..‫ﺍﱁ‬
٢-‫ﻣﻠﻒ‬‫ﺍﺳﺘﺪﻋﻰ‬‫ﻛﻴﻒ‬css.style‫ﰲ‬‫ﺑﻌﻤﻞ‬‫ﻳﻘﻮﻡ‬‫ﺣﱴ‬‫ﻣﺴﻮﻳﻬﺎ‬‫ﺃﻧﺎ‬‫ﺍﻟﻠﻰ‬‫ﺍﻟﺼﻔﺤﺔ‬
‫ﺑﻪ؟‬‫ﺍﺩﺭﺍﺟﻬﺎ‬‫ﰎ‬‫ﺍﻟﻠﻰ‬‫ﺍﻟﺘﺄﺛﲑﺍﺕ‬
-‫ﻭﲰﻰ‬‫ﺑﲔ‬‫ﻭﻭﺿﻌﻬﺎ‬‫ﺍﳉﻤﻠﺔ‬‫ﻫﺬﻩ‬‫ﻃﺮﻳﻖ‬‫ﻋﻦ‬head‫ﺳﺎﺑﻘﺎ‬‫ﺫﻛﺮﻧﺎ‬‫ﻛﻤﺎ‬:
‫ﻛﻮﺩ‬:
<link rel="stylesheet" href="style.css"
media="screen" />
‫ﻫﻮ‬‫ﻳﻬﻤﻨﺎ‬‫ﻣﺎ‬‫ﻛﻞ‬href‫ﻣﻜﺎ‬‫ﲢﺪﺩ‬‫ﺭﺍﺡ‬‫ﻭﻓﻴﻬﺎ‬‫ﻣﻠﻒ‬‫ﻥ‬css‫ﻣﻠﻒ‬‫ﺍﻧﻪ‬‫ﻻﺣﻆ‬style.css‫ﻟﻮﻛﺎﻥ‬
‫ﺍﻟﺼﻮﺭ‬‫ﳎﻠﺪ‬‫ﺩﺍﺧﻞ‬Images‫ﺳﺒﻴﻞ‬‫ﻋﻠﻰ‬‫ﻫ‬‫ﻳﻜﻮﻥ‬‫ﺭﺍﺡ‬‫ﺍﳌﺜﺎﻝ‬‫ﺬﺍ‬‫ﻣﺴﺎﺭﻩ‬
‫ﻠﺪ‬‫ﺍ‬‫ﺃﺳﻢ‬‫ﺃﺿﺎﻓﻨﺎ‬‫ﻭﻫﻮ‬‫ﺗﻐﲑ‬‫ﰲ‬‫ﺃﻥ‬‫ﺗﻼﺣﻆ‬‫ﺍﻟﻜﻮﺩ‬‫ﺇﱃ‬‫ﺃﻧﻈﺮ‬‫ﻣﺜﺎﻝ‬)images:(
<link rel="stylesheet" href="images/style.css"
media="screen" />

‫ﺩﻭﺭﺓ‬web 0.2٢٢
٣-‫ﺍﺑﺪﺃ‬‫ﻛﻴﻒ‬‫ﰲ‬‫ﺗﻌﻠﻢ‬css‫؟‬‫ﺍﻟﺼﻔﺤﺔ‬‫ﻋﻠﻰ‬‫ﺍﻟﺘﻐﻴﲑ‬‫ﻛﻴﻔﻴﺔ‬‫ﺃﻓﻬﻢ‬‫ﺃﻗﺪﺭ‬‫ﺣﱴ‬‫ﺑﺎﺣﺘﺮﺍﻑ‬‫؟‬
-‫ﻻﺑﺪ‬‫ﺃﺳﺎﺳﻴﺔ‬‫ﻭﻣﻔﺎﻫﻴﻢ‬‫ﻛﺜﲑ‬‫ﻟﺘﻄﺒﻴﻖ‬‫ﲢﺘﺎﺝ‬‫ﺍﻟﻨﻘﻄﺔ‬‫ﻫﺬﻩ‬‫ﺇﻥ‬‫ﻣﺎ‬‫ﲜﺎﻧﺐ‬‫ﺗﺮﻓﻌﻬﺎ‬‫ﺃﺳﺮﺩﻩ‬‫ﺭﺍﺡ‬‫ﺍﻵﻥ‬
،‫ﺧﱪﺗﻚ‬‫ﺎ‬‫ﺗﺰﻭﺩ‬‫ﺗﻘﺪﺭ‬‫ﻣﺼﺎﺩﺭ‬‫ﻟﻚ‬‫ﺍﺣﺪﺩ‬‫ﻭﺭﺍﺡ‬‫ﻭﺃﻧﺎ‬‫ﻫﺬﻩ‬‫ﻣﻦ‬‫ﺍﻻﻧﻄﻼﻕ‬‫ﻣﻔﺘﺎﺡ‬‫ﺃﻋﻄﻴﻚ‬‫ﺭﺍﺡ‬
‫ﻭﻋﻰ‬‫ﻋﻠﻰ‬‫ﺗﻜﻮﻥ‬‫ﺣﱴ‬‫ﺍﻟﺪﺭﻭﺓ‬‫ﲟﻔﻬﻮﻡ‬css‫ﻭﺍﺿﺢ‬‫ﺑﺸﻜﻞ‬،‫ﺍﻟﺜﺎﻟﺚ‬‫ﻟﻠﺴﺆﺍﻝ‬‫ﺍﺳﺘﻜﻤﺎﻝ‬:‫ﳒﺎﻭﺏ‬
‫ﻋﻠﻰ‬‫ﺍﻷﺳﺌﻠﺔ‬‫ﺍﻵﺗﻴﺔ‬:-
١-‫ﰲ‬css‫ﻣﺎ‬‫ﻫﻲ‬‫ﺍﻟﻜﻮﺩ‬‫ﻟﻜﺘﺎﺑﺔ‬‫ﺍﻟﻌﺎﻣﺔ‬‫ﺍﻟﺼﻴﻐﺔ‬:
-‫ﺍﻟﺼﻴﻐﺔ‬‫ﻫﻲ‬:
p {color:red;text-align:center}
p:‫ﺍﻟ‬‫ﻭﺳﻢ‬‫ﻭﻫﻰ‬‫ـ‬html‫ﺍﻟﻠﻲ‬‫ﻋﻠﻴﻪ‬‫ﻧﻌﺪﻝ‬‫ﺭﺍﺡ‬،‫ﺍﳌﺜﺎﻝ‬‫ﺳﺒﻴﻞ‬‫ﻋﻠﻰ‬‫ﻳﻌﲎ‬‫ﰲ‬‫ﺍﳌﺜﺎﻝ‬‫ﺍﻟﻠﻲ‬‫ﻗﻤﻨﺎ‬
‫ﻋﺒﺎﺭﺓ‬‫ﲡﺪ‬‫ﺭﺍﺡ‬‫ﺑﺴﺮﺩﻩ‬
<h2>‫/<ﺍﶈﺘﻮﻯ‬h2>
h2:‫ﺍﻝ‬‫ﺗﻌﲎ‬headings2‫ﺍﶈﺘﻮﻯ‬‫ﻛﻠﻤﺔ‬‫ﻋﻠﻰ‬‫ﺍﻟﺘﻐﲑ‬‫ﻧﺮﻳﺪ‬‫ﻭﻋﻨﺪﻣﺎ‬‫ﻧﺴﺘﺪﻋﻴﻬﺎ‬‫ﺭﺍﺡ‬‫ﰲ‬
‫ﻣﻠﻒ‬css‫ﺑﻜﺘﺎﺑﺔ‬h2‫ﺍﳉﻤﻠﺔ‬‫ﻭﺗﺼﺒﺢ‬:
h2{color:red;text-align:center}
‫ﻣﻼﺣﻈﻪ‬:‫ﻟﺪﻭﺭﺓ‬‫ﺍﺫﻫﺐ‬html‫ﻟﺘﻔﻬﻢ‬‫ﻛﻼﻣﻲ‬
‫ﻧﻜﻤﻞ‬......

‫ﺩﻭﺭﺓ‬web 0.2٢٣
color:red
color:‫ﺍﳋﺎﺻﻴﺔ‬‫ﻭﻫﻰ‬‫ﺍﻟﻠﻲ‬‫ﻧﺴﺘﺨﺪﻣﻬﺎ‬‫ﺭﺍﺡ‬‫ﺍﻟﻠﻮ‬‫ﻟﺘﻐﲑ‬‫ﻥ‬‫ﻟﻮ‬‫ﻓﻤﺜﻼ‬‫ﻣﻦ‬‫ﻓﻼﺑﺪ‬‫ﺍﻟﻠﻮﻥ‬‫ﺗﻐﲑ‬‫ﺃﺭﺩﺕ‬
‫ﺍﺳﺘﺨﺪﺍﻡ‬‫ﻋﺒﺎﺭﺓ‬color
‫ﺗﻜﻮﻥ‬‫ﺭﺍﺡ‬‫ﻟﻠﺨﻄﻮﻁ‬‫ﻛﺎﻧﺖ‬‫ﻭﻟﻮ‬font
‫ﺗﻜﻮﻥ‬‫ﺭﺍﺡ‬‫ﻟﻠﺨﻠﻔﻴﺔ‬‫ﻛﺎﻧﺖ‬‫ﻭﻟﻮ‬background
‫ﻭﻫﻜﺬﺍ‬،‫ﺑﻌﺪ‬‫ﻓﻴﻤﺎ‬‫ﺍﻻﺷﻴﺎﺀ‬‫ﻛﻞ‬‫ﺍﺳﺮﺩ‬‫ﺭﺍﺡ‬‫ﻭﺍﻧﺎ‬
‫ﻧﻜﻤﻞ‬
red:‫ﺍﻟﻠﻮﻥ‬‫ﻗﻴﻤﺔ‬‫ﻫﻰ‬،‫ﺍﳌﺘﺼﻔﺢ‬‫ﳔﱪ‬‫ﻳﻌﲎ‬‫ﺃﻧﻨﺎ‬‫ﻧﺮﻳﺪ‬‫ﺃﻥ‬‫ﻟﻮﻥ‬‫ﻳﻜﻮﻥ‬‫ﻫﻮ‬‫ﺍﶈﺘﻮﻯ‬‫ﻛﻠﻤﺔ‬‫ﺍﻷﲪﺮ‬
red
‫ﺍﻟﻌﻼﻣﺔ‬‫ﻻﺣﻆ‬‫؛‬‫ﺑﲔ‬‫ﺍﻟﻔﺎﺻﻠﺔ‬color:red‫ﻭﺑﲔ‬text-align:center
‫ﺃﻣﺮﻳﻦ‬‫ﺑﲔ‬‫ﻟﻠﻔﺼﻞ‬‫ﺗﺴﺨﺪﻡ‬‫ﺍﻟﻌﻼﻣﺔ‬‫ﻫﺬﻩ‬
‫ﲡﺪ‬‫ﺭﺍﺡ‬‫ﺍﻟﻌﻼﻣﺔ‬‫ﻫﺬﻩ‬‫ﺑﻌﺪ‬‫ﻓﻤﺜﻼ‬text-align:center
‫ﻭﻫﻰ‬‫ﺃﻣﺮ‬‫ﳜﱪﻧﺎ‬‫ﺃﻧﻨﺎ‬‫ﺍﻟﻜﻠﻤﺔ‬‫ﺗﻮﺳﻴﻂ‬‫ﻧﺮﻳﺪ‬center‫ﻭﺟﻌﻠﻬﺎ‬‫ﰲ‬‫ﺎ‬‫ﻣﻜﺎ‬‫ﻭﺳﻂ‬
‫ﺃﺧﲑﺍ‬:
‫ﺍﻟﻄﺮﻳﻘﺔ‬‫ﻧﻌﺮﻑ‬‫ﺍﻟﻠﻲ‬‫ﻛﻮﺩ‬‫ﺎ‬‫ﺗﻜﺘﺐ‬‫ﺭﺍﺡ‬css
١-‫ﻋﻠﻴﻪ‬‫ﺗﻐﲑ‬‫ﺭﺍﺡ‬‫ﺍﻟﻠﻰ‬‫ﺍﳌﻜﺎﻥ‬‫ﺣﺪﺩ‬‫ﰲ‬‫ﻭﻟﻴﻜﻦ‬‫ﺻﻔﺤﺘﻚ‬h2
٢-‫ﻭﺳﻢ‬‫ﺍﻓﺘﺢ‬{}
٣-‫ﺿﻊ‬‫ﺍﻟﻮﺳﻢ‬‫ﺑﲔ‬‫ﺍﻷﻭﺍﻣﺮ‬‫ﺍﻟﱵ‬‫ﺗﻨﻔﻴﺬﻫﺎ‬‫ﺗﺮﻳﺪ‬color:red
٥-‫ﻟﻌﻤﻞ‬‫ﺃﻛﺜﺮ‬‫ﺍﻟﻮﺳﻢ‬‫ﻧﻔﺲ‬‫ﻋﻠﻰ‬‫ﺗﺄﺛﲑ‬‫ﻣﻦ‬h2‫ﺍﳌﻨﻘﻮﻃﺔ‬‫ﺑﺎﻟﻔﺎﺻﻠﺔ‬‫ﺍﻣﺮﻙ‬‫ﺍﻓﺼﻞ‬‫؛‬
٦-‫ﺍﺧﺮ‬‫ﻣﻜﺎﻥ‬‫ﻋﻠﻰ‬‫ﺗﺄﺛﲑ‬‫ﻟﻌﻤﻞ‬،‫ﺟﺪ‬‫ﺃﻣﺮ‬‫ﻋﻠﻰ‬‫ﺍﻟﺘﻐﻴﲑ‬‫ﺑﺪﺃ‬‫ﰒ‬‫ﺍﻟﻮﺳﻢ‬‫ﺍﻏﻼﻕ‬‫ﻣﻦ‬‫ﻻﺑﺪ‬‫ﻳﺪ‬
‫ﻣﺜﺎﻝ‬:
p{color:red;text-align:center}
h2{color:green;text-align:left}

‫ﺩﻭﺭﺓ‬web 0.2٢٤
‫ﻧﻜﻤﻞ‬...
‫ﻣﻠﻒ‬‫ﻓﺘﺤﻨﺎ‬‫ﻟﻮ‬style.css،‫ﻫﺬﺓ‬‫ﻣﺜﻞ‬‫ﻋﺒﺎﺭﺓ‬‫ﳒﺪ‬‫ﺭﺍﺡ‬:
‫ﻛﻮﺩ‬:
#container{
margin:0 auto;
width:850px;
text-align:left;
}
‫ﺗﻌﲎ‬‫ﻣﺎﺫﺍ‬container#‫؟‬
‫ﻟﺼﻔﺤﺔ‬‫ﺭﺟﻌﻨﺎ‬‫ﻟﻮ‬html‫ﺑﻨﺎ‬‫ﺍﳋﺎﺻﺔ‬
‫ﳒﺪ‬‫ﺭﺍﺡ‬‫ﺍﻟﻌﺒﺎﺭﺓ‬‫ﻫﺬﻩ‬:
<div id="header">
<h1><a href="http://vistacompany.org" title="‫ﻋﻤﻞ‬‫ﺩﺭﺱ‬
‫ﻣﺴﺘﺪﻳﺮﺓ‬‫ﻭﺯﻭﺍﻳﺎ‬‫ﲣﻄﻴﻂ‬ ">vista-design</a></h1>
</div>
<div id="content">
‫ﺃﻭﻝ‬‫ﻛﻠﻤﺔ‬:
id="container"
‫ﻫﺬﻩ‬‫ﻫﻲ‬‫ﺍﳌﻌﺮﻑ‬‫ﺍﻟﻠﻲ‬‫ﺭﻣﺰﻧﺎ‬‫ﻭﻗﺪ‬‫ﻋﻠﻴﻪ‬‫ﻧﻐﲑ‬‫ﺭﺍﺡ‬‫ﰲ‬‫ﻣﻠ‬‫ﻒ‬css‫ـ‬‫ﻠ‬‫ﻟ‬id‫ﺑﺎﻟﻌﻼﻣﺔ‬#‫ﺍﳊﻘﻨﺎﻩ‬‫ﰒ‬
‫ـ‬‫ﻟ‬‫ﺍ‬‫ﻫﺬﺍ‬‫ﺑﺎﺳﻢ‬id
‫ﻭﻻﺣﻆ‬‫ﺎ‬‫ﺃ‬‫ﻭﺳﻢ‬‫ﺩﺍﺧﻞ‬‫ﺿﻤﻬﺎ‬‫ﰎ‬div‫ﻭﻋﺮﻓﻨﺎ‬‫ﺳﺎﺑﻘﺎ‬‫ﺷﺮﺣﻨﺎ‬‫ﻛﻤﺎ‬‫ﺃﳘﻴﺘﻪ‬:
‫ﻭ‬‫ﰲ‬‫ﲡﺪ‬‫ﺭﺍﺡ‬‫ﺍﻟﺼﻔﺤﺔ‬‫ﻧﻔﺲ‬id‫ﳐﺘﻠﻔﺔ‬،‫ﻛﻞ‬id‫ﻣﻦ‬‫ﻣﻌﲔ‬‫ﺟﺰﺀ‬‫ﻟﺘﻐﻴﲑ‬‫ﻳﺴﺘﺨﺪﻡ‬‫ﺭﺍﺡ‬‫ﺻﻔﺤﺘﻨﺎ‬
‫ﺃﻣﺜﻠﺔ‬:
<div id="header">

‫ﺩﻭﺭﺓ‬web 0.2٢٥
‫ﺍﳍﻴﺪﺭ‬‫ﻋﻠﻰ‬‫ﻟﻠﺘﻐﻴﲑ‬......
<div id="content">
‫ﺍﶈﺘﻮﻯ‬‫ﻋﻠﻰ‬‫ﻟﻠﺘﻐﻴﲑ‬.....
‫ﻧﻜﻤﻞ‬‫ﺍﻷﺳﺌﻠﺔ‬:
٢-‫ﻣﺎ‬‫ﻫﻲ‬‫ﺍﳌﺘﻐﲑﺍﺕ‬‫ﺑ‬‫ﺍﳋﺎﺻﺔ‬‫ﻭﺍﻟﻘﻴﻢ‬‫ـ‬css‫؟‬
-‫ﺇﺟﺎﺑﺔ‬‫ﻫﺬ‬‫ﺍﻟﺴﺆﺍﻝ‬‫ﺍ‬‫ﳊﺎﳍﺎ‬‫ﻛﺎﻣﻠﺔ‬‫ﺩﻭﺭﺓ‬‫ﳏﺘﺎﺟﻪ‬:
‫ﻝ‬‫ﺍﻟﺬﻫﺎﺏ‬‫ﺍﻻﺗﻰ‬‫ﺑﻌﻤﻞ‬‫ﺃﻧﺼﺤﻚ‬‫ﻟﺬﺍ‬w3schools‫ﻫﺬﺍ‬‫ﻣﻦ‬‫ﺍﻟﺮﺍﺑﻂ‬
‫ﻣﺴ‬‫ﺍﻧﻪ‬‫ﲡﺪ‬‫ﺭﺍﺡ‬‫ﰒ‬‫ﺘ‬‫ﺃﻭﺍﻣﺮ‬‫ﻟﻜﻞ‬‫ﻛﺎﻣﻞ‬‫ﻣﺮﺟﻊ‬‫ﻮﻯ‬css
‫ﻋﻠﻰ‬‫ﺗﻌﺮﻓﻠﻚ‬‫ﻳﻮﻡ‬‫ﻛﻞ‬‫ﺍﻷﻗﻞ‬٥‫ﺃﻭ‬٦‫ﺍﳌﺜﺎﻝ‬‫ﻋﻠﻰ‬‫ﻭﺗﺪﺭﺏ‬‫ﻣﻔﺎﻫﻴﻢ‬،‫ﲡﺪ‬‫ﻭﺭﺍﺡ‬‫ﺃﻥ‬‫ﻣﺜﺎﻝ‬‫ﻟﻪ‬‫ﺃﻣﺮ‬‫ﻛﻞ‬
‫ﻋﻤﻠﻲ‬‫ﺗﻄﺒﻴﻘﻪ‬‫ﳝﻜﻨﻚ‬.

‫ﺩﻭﺭﺓ‬web 0.2٢٦
‫ﻭﺃﻧﺎ‬‫ﰲ‬‫ﺃﻧﻮﻩ‬‫ﺭﺍﺡ‬‫ﺩﻭﺭﺗﻨﺎ‬‫ﻟﻸﺷﻴﺎﺀ‬‫ﺍﻟﱵ‬‫ﺑﻜﺜﺮﺓ‬‫ﳓﺘﺎﺟﻬﺎ‬‫ﺳﻮﻑ‬
‫ﻟﻠﺼﻮﺭﺓ‬‫ﺍﻧﻈﺮ‬‫ﺍﻵﺗﻴﺔ‬‫ﺍﳌﻬﻢ‬‫ﺗﻌﺮﻑ‬‫ﻭﺭﺍﺡ‬‫ﻭﺍﻟﻠﻲ‬‫ﺭ‬‫ﺍﷲ‬‫ﺑﺄﺫﻥ‬‫ﺩﻭﺭﺗﻨﺎ‬‫ﳜﺪﻡ‬‫ﺍﺡ‬
‫ﺟﻴﺪﺍ‬‫ﻋﻠﻴﻪ‬‫ﻭﺗﺪﺭﺏ‬.

‫ﺩﻭﺭﺓ‬web 0.2٢٧
‫ﺑﻌﻤﻠﻬﺎ‬‫ﻗﻤﺖ‬‫ﺍﻟﺼﻮﺭﺓ‬‫ﻫﺬﻩ‬‫ﰲ‬٦‫ﺍﷲ‬‫ﺑﺄﺫﻥ‬‫ﻟﻚ‬‫ﺳﺮﻳﻊ‬‫ﻣﺮﺟﻊ‬‫ﺗﻜﻮﻥ‬‫ﺣﱴ‬‫ﻣﺘﻮﺍﺻﻠﺔ‬‫ﺳﺎﻋﺎﺕ‬
‫ﺍﷲ‬‫ﺑﺄﺫﻥ‬‫ﺍﻟﻘﺎﺩﻡ‬‫ﺍﻟﺪﺭﺱ‬‫ﻣﻦ‬‫ﻋﻠﻴﻬﺎ‬‫ﻧﺘﺪﺭﺏ‬‫ﺭﺍﺡ‬‫ﺍﻟﺼﻮﺭﺓ‬‫ﻫﺬﻩ‬‫ﺩ‬‫ﻓﻴﻪ‬‫ﻳﻜﻮﻥ‬‫ﻭﺭﺍﺡ‬‫ﻣﻜﺜﻒ‬‫ﺭﺱ‬
‫ﺍﻝ‬‫ﻋﻠﻰ‬‫ﺍﻟﺘﺪﺭﻳﺐ‬‫ﻋﻠﻰ‬‫ﳐﺼﺺ‬css‫ﻓﻴﺪﻳﻮ‬‫ﻳﻜﻮﻥ‬‫ﻭﺭﺍﺡ‬‫ﺍﻟﻜﺘﺎﺑﺔ‬‫ﻃﺮﻳﻘﺔ‬‫ﺗﺸﻮﻓﻮﺍ‬‫ﺣﱴ‬‫ﰲ‬css
‫ﺍﳌﻄﻠﻮﺏ‬:‫ﻓﻴﻬﺎ‬‫ﺗﻘﻮﻡ‬‫ﺑﺴﻴﻄﺔ‬‫ﺻﻔﺤﺔ‬‫ﻋﻤﻞ‬‫ﺑﺎﺳﺘﺨﺪﺍﻡ‬‫ـ‬‫ﻟ‬‫ﺍ‬)html‫ﻭ‬css(

‫ﺩﻭﺭﺓ‬web 0.2٢٨
‫ﰲ‬‫ﺍﳌﻬﻤﺔ‬‫ﺍﻷﺳﺎﺳﻴﺎﺕ‬‫ﻋﻠﻰ‬‫ﻧﺘﻌﺮﻑ‬‫ﺭﺍﺡ‬‫ﺍﻟﺪﺭﺱ‬‫ﻫﺬﺍ‬‫ﰲ‬‫ـ‬‫ﻟ‬‫ﺍ‬‫ﺍﺳﺘﺨﺪﺍﻡ‬)css+xhtml(
‫ﻳﻜﻮﻥ‬‫ﺭﺍﺡ‬‫ﺍﻟﺪﺭﺱ‬‫ﰲ‬‫ﺗﺬﻛﺮ‬‫ﺻﻮﺭﺓ‬!
١-‫ﺗﺬﻛﺮ‬‫ﻭﺳﻢ‬‫ﻋﻠﻰ‬‫ﺍﻟﺘﻐﻴﲑ‬‫ﺗﺮﻳﺪ‬‫ﻋﻨﺪﻣﺎ‬html‫ـ‬‫ﺑ‬css‫ﳐﺘﻠﻔﺔ‬‫ﻃﺮﻕ‬‫ﻓﻴﻮﺟﺪ‬
‫ﰲ‬‫ﺍﻟﻜﻮﺩ‬‫ﻛﺘﺎﺑﺔ‬:
‫ﺃﻣﺜﻠﺔ‬‫ﻧﺄﺧﺬ‬:
١-‫ﻭﺳﻢ‬div‫ﺑﺪﺍﺧﻠﺔ‬id‫ﳏﺪﺩ‬‫ﻟﻮﺳﻢ‬:
<div id="container"></div>
‫ﻣﻦ‬‫ﺍﻟﺘﻐﻴﲑ‬‫ﺗﺮﻳﺪ‬‫ﻋﻨﺪﻣﺎ‬css‫ﺍﻟﻜﻮﺩ‬‫ﺗﻜﺘﺐ‬‫ﺭﺍﺡ‬‫ﻛﺎﻷﰐ‬:
#container{.....‫}....ﺃﻭﺍﻣﺮﻙ‬
‫ﺍﻭ‬
div#container{.....‫}....ﺃﻭﺍﻣﺮﻙ‬
٢-‫ﻟ‬‫ﻭﺳﻢ‬‫ﺑﺪﺍﺧﻞ‬‫ﻮﻛﺎﻥ‬div‫ﺃﻭﲰﺔ‬‫ﺃﺧﺮﻯ‬،‫ﺍﻟﻜﻮﺩ؟‬‫ﺗﻜﺘﺐ‬‫ﺭﺍﺡ‬‫ﻛﻴﻒ‬
‫ﻣﺜﺎﻝ‬:
<h1>Online File Storage</h1>
</div>
‫ﻋﻠﻰ‬‫ﺍﻟﺘﻐﻴﲑ‬‫ﻳﺘﻢ‬‫ﺭﺍﺡ‬h1‫ﻛﺎﻻﺗﻰ‬:
#container h1{.....‫}....ﺃﻭﺍﻣﺮﻙ‬
‫ﺍﻭ‬
div#container h1{.....‫}....ﺃﻭﺍﻣﺮﻙ‬
٣-‫ﻟﻮ‬‫ﻧ‬‫ﺴﺘﺨﺪﻡ‬class‫ﻣﻦ‬‫ﺑﺪﻻ‬id،‫ﺗﻜ‬‫ﺭﺍﺡ‬‫ﻛﻴﻒ‬‫ﻛﻮﺩﻙ‬‫ﺘﺐ‬:
‫ﻣﺜﺎﻝ‬:
<h1 class="center">Center-aligned heading</h1>

‫ﺩﻭﺭﺓ‬web 0.2٢٩
‫ﺍﻟﻮﺳﻢ‬‫ﻫﺬﺍ‬‫ﻋﻠﻰ‬‫ﺗﻐﲑ‬‫ﺭﺍﺡ‬h2‫ﺑ‬‫ـ‬css‫ﺑﺎﻻﰐ‬:
.center{.......‫}......ﺃﻭﺍﻣﺮﻙ‬
٤-‫ﺗﺬﻛﺮ‬‫ﺃﻥ‬‫ﲨﻠﺔ‬‫ﻛﻞ‬‫ﺗﻨﻬﻰ‬‫ﰲ‬css‫ﺑﺎﻟﻔﺎﺻﻠﺔ‬‫ﺍﳌﻨﻘﻮﻃﺔ‬‫؛‬
div#container
{
width: 600px;
margin: 0px auto;
border: 1px solid #e6eef6;
background-color: #ffffff;
}
٥-‫ﺗﺬﻛﺮ‬‫ﺃﻥ‬xhtml‫ﻫﻲ‬‫ﻧﻔﺲ‬html‫ﺍﻟﻔﺮﻕ‬‫ﻭﻟﻜﻦ‬‫ﺃﻥ‬xhtml‫ﺃﺻﺒﺤﺖ‬‫ﻫﻲ‬‫ﺍﳌﻌﺘﻤﺪﺓ‬
‫ﻻﻥ‬c3w‫ﺍﻝ‬‫ﺑﺘﻄﻮﻳﺮ‬‫ﻗﺎﻣﺖ‬html‫ﻝ‬xhtml‫ﳐﺘﻠﻔﺔ‬‫ﻓﺮﻭﻕ‬‫ﻭﻳﻮﺟﺪ‬
‫ﻣﺜﻼ‬:‫ﻣﺎ‬‫ﺍﳉﻤﻠﺔ‬‫ﻫﺬﻩ‬‫ﺑﲔ‬‫ﺍﻟﻔﺮﻕ‬:
<b><i>This text is bold and italic</b></i>
‫ﻭﻫﺬﻩ‬‫ﺍﳉﻤﻠﺔ‬:
<b><i>This text is bold and italic</i></b>
‫ﺍﳌﺘﺼﻔﺢ‬‫ﻋﻠﻰ‬‫ﺍﻟﻨﺎﺗﺞ‬‫ﻧﻔﺲ‬‫ﺗﻌﻄﻰ‬‫ﺭﺍﺡ‬‫ﺍﳉﻤﻠﺘﲔ‬‫ﻛﻼ‬‫ﻳﻮﺟﺪ‬‫ﺍﻧﻪ‬‫ﻭﻻﺣﻈﺖ‬‫ﺩﻗﻘﺖ‬‫ﻟﻮ‬‫ﻟﻜﻦ‬
‫ﺍﺧﺘﻼﻑ‬‫ﰲ‬‫ﻭﺳﻢ‬‫ﺎﻳﺔ‬‫ﻭ‬‫ﺑﺪﺍﻳﺔ‬‫ﺗﺮﺗﻴﺐ‬>b<‫ﻭ‬>i<‫ﺩﻗﻴﻘﺔ‬‫ﺗﻌﺘﱪ‬‫ﻻ‬‫ﺍﻷﻭﱃ‬‫ﻓﺎﳉﻤﻠﺔ‬
‫ﺍﻟﻘﺪﱘ‬‫ﻟﻠﻨﻈﺎﻡ‬‫ﻭﺗﺘﺒﻊ‬html،‫ﺃﻣﺎ‬‫ﺍﻟﻨﻈﺎﻡ‬‫ﻭﺗﺘﺒﻊ‬‫ﻭﻣﻨﻈﻤﺔ‬‫ﺩﻗﺔ‬‫ﺃﻛﺜﺮ‬‫ﺍﻟﺜﺎﻧﻴﺔ‬‫ﺍﳉﻤﻠﺔ‬
‫ﺍﳉﺪﻳﺪ‬xhtml‫ﻭﻫﻜﺬﺍ‬.............
٦-‫ﺗﺬﻛﺮ‬‫ﺃﻥ‬‫ـ‬‫ﻟ‬‫ﺍ‬‫ﺗﻌﻠﻢ‬css‫ﻟﻦ‬‫ﻳﺄﰐ‬‫ﺇﻻ‬‫ﺻﻔﺤﺎﺕ‬‫ﻭﺗﱰﻳﻞ‬‫ﺍﳌﻜﺜﻒ‬‫ﺍﻟﺘﺪﺭﻳﺐ‬‫ﻣﻦ‬
‫ﻣﻠﻒ‬‫ﻋﻠﻰ‬‫ﻭﺍﻟﺘﻌﺪﻳﻞ‬‫ﻭﻳﺐ‬css‫ﻭﻋﺸﺮﺓ‬‫ﻭﺍﺛﻨﲔ‬‫ﻣﺮﺓ‬
‫ﻫﺬﻩ‬‫ﻫﻲ‬‫ﺍﳌﻼﺣﻈﺎﺕ‬‫ﺃﻫﻢ‬‫ﺍﻟﱵ‬‫ﺃﺣﺒﺒﺖ‬‫ﺃﻥ‬‫ﻋﻨﻬﺎ‬‫ﺍﻧﻮﻩ‬‫ﰲ‬‫ﺍﻟﺪﺭﺱ‬‫ﻫﺬﺍ‬‫ﻣﻦ‬‫ﻭﺃﲤﲎ‬‫ﻫﺬﺍ‬‫ﺑﻌﺪ‬
‫ﺍﻟﺪﺭﺱ‬‫ﺃﻥ‬‫ﻋﻦ‬‫ﺑﺴﻴﻄﺔ‬‫ﻭﻟﻮ‬‫ﺧﻠﻔﻴﺔ‬‫ﻟﺪﻳﻚ‬‫ﺗﻜﻮﻧﺖ‬‫ﺗﻜﻮﻥ‬css‫ﺍﻟﺪﺭﺱ‬‫ﻣﻦ‬‫ﺑﺪﺀﺍ‬‫ﻧﻨﻄﻠﻖ‬‫ﺣﱴ‬
‫ﺑﺎﻟﺘﻄﺒﻴﻖ‬‫ﺍﻟﻘﺎﺩﻡ‬‫ﺍﻟﻌﻤﻠﻲ‬،‫ﺩﺭﺱ‬‫ﻓﻴﻪ‬‫ﻳﻜﻮﻥ‬‫ﻭﺭﺍﺡ‬‫ﺇﺿﺎﰲ‬‫ﺩﺭﻭﺱ‬‫ﻋﻠﻰ‬‫ﺍﻟ‬‫ﺪﻭﺭﺓ‬،‫ﻋﻦ‬‫ﻋﺒﺎﺭﺓ‬
‫ﻣﻠﻔﺎﺕ‬‫ﻋﻠﻰ‬‫ﻟﻠﺘﻌﺪﻳﻞ‬‫ﻓﻴﺪﻳﻮ‬‫ﺩﺭﻭﺱ‬css‫ﳐﺘﻠﻔﺔ‬‫ﻭﻳﺐ‬‫ﻟﺼﻔﺤﺎﺕ‬.

‫ﺩﻭﺭﺓ‬web 0.2٣٠
‫ﻣﻌ‬‫ﻧﺴﺘﻜﻤﻞ‬‫ﺩﻭﺭﺗﻨﺎ‬‫ﺩﺭﻭﺱ‬‫ﺍﻟﻜﺮﺍﻡ‬‫ﺃﻋﻀﺎﺀﻧﺎ‬‫ﻜﻢ‬‫ﻣﻊ‬‫ﺍﻟﺘﻌﺎﻣﻞ‬‫ﺃﺳﺎﺳﻴﺎﺕ‬‫ﻋﻠﻰ‬‫ﺗﻌﺮﻓﻨﺎ‬‫ﺃﻥ‬‫ﻭﺑﻌﺪ‬
xhtml-css‫ﺩﻋﻮﻧﺎ‬،‫ﻋﻠﻰ‬‫ﺍﻟﺘﻌﺪﻳﻞ‬‫ﻛﻴﻔﻴﺔ‬‫ﻟﺘﺮﻯ‬‫ﺑﻌﻤﻠﻬﺎ‬‫ﻗﻤﺖ‬‫ﻓﻴﺪﻳﻮ‬‫ﺩﺭﻭﺱ‬‫ﻧﺸﻮﻑ‬
‫ﺍﻟﻮﻳﺐ‬‫ﺻﻔﺤﺎﺕ‬‫ﻭﺍﻧ‬‫ﺎ‬‫ﻗ‬‫ﺴﻤ‬‫ﳌﺴﺘﻮﻳﺎﺕ‬‫ﺍﻟﺪﺭﻭﺱ‬‫ﺖ‬:
١-‫ﺍﻷﻭﻝ‬‫ﺍﳌﺴﺘﻮﻯ‬:‫ﺍﳌﺮﻓﻘﺎﺕ‬‫ﰲ‬‫ﻣﻮﺟﻮﺩ‬)‫ﺷﺮﺡ‬‫ﻓﻴﺪﻳﻮ‬(
٢-‫ﺍﳌﺴ‬‫ﺘﻮﻯ‬‫ﺍﻟﺜﺎﱐ‬:‫ﺍﳌﺮﻓﻘﺎﺕ‬‫ﰲ‬‫ﻣﻮﺟﻮﺩ‬)‫ﺷﺮﺡ‬‫ﻓﻴﺪﻳﻮ‬(
‫ﺍﳌﻠﻔﺎﺕ‬‫ﺍﻟﱵ‬‫ﺷﺮﺣﻬﺎ‬‫ﰎ‬‫ﰲ‬‫ﺑﺎﻟﺸﺮﺡ‬‫ﺗﺴﺘﻤﺘﻌﻮﺍ‬‫ﺍﻟﻔﻴﺪﻳﻮﺃﲤﲎ‬‫ﻣﻠﻔﺎﺕ‬‫ﺑﻨﻔﺲ‬‫ﻣﺮﻓﻘﺔ‬‫ﺍﻟﻔﻴﺪﻳﻮ‬
‫ﺍﳌﻄﻠﻮﺏ‬:
‫ﺍﻟﺼﻔﺤﺔ‬‫ﻋﻠﻰ‬‫ﺗﻌﺪﻳﻞ‬‫ﺍﻯ‬‫ﺗﻮﺿﺢ‬‫ﺻﻮﺭﺓ‬‫ﻋﻤﻞ‬‫ﺍﻟﱵ‬‫ﰎ‬‫ﺇ‬‫ﺭﻓﻘﻬﺎ‬‫ﰲ‬‫ﺩﺭﺱ‬‫ﻛﻞ‬‫ﺍﻟﻮﺍﻥ‬‫ﺳﻮﺍﺀ‬
‫ﺧﻄﻮﻁ‬‫ﺧﻠﻔﻴﺎﺕ‬......‫ﺍﱁ‬
+
‫ﺍﻟﺴﻮﺭﺱ‬‫ﻭﺿﻊ‬‫ﳌﻠﻒ‬‫ﻛﻮﺩ‬css

‫ﺩﻭﺭﺓ‬web 0.2٣١
‫ﺗﻌﻠﻤﻨﺎﻩ‬‫ﻣﺎ‬‫ﺍﺳﺘﻐﻼﻝ‬‫ﺍﻟﺪﺭﺱ‬‫ﻫﺬﺍ‬‫ﻣﻦ‬‫ﺍﻧﻄﻼﻗﺎ‬‫ﻣﻌﻜﻢ‬‫ﻧﺒﺪﺃ‬‫ﰲ‬‫ﺍﻟﺴﺎﺑﻘﺔ‬‫ﺍﻟﺪﺭﻭﺱ‬‫ﻫﺬﻩ‬‫ﻣﻦ‬‫ﻭﺑﺪﺀ‬
‫ﺍﻟﺪﺭﻭﺱ‬،‫ﻓﻼﺑﺪ‬‫ﺍﻻﺳﺘﻴﻌﺎﺏ‬‫ﺗﺘﻌﻠﻢ‬‫ﺣﱴ‬‫ﺍﳌﻜﺜﻒ‬‫ﻭﺍﻟﺘﻄﺒﻴﻖ‬‫ﺟﻴﺪﺍ‬‫ﺑﺈﺗﻘﺎﻥ‬‫ـ‬‫ﻟ‬‫ﺍ‬css
‫ﰲ‬‫ﺗﺼﻤﻴﻤ‬‫ﻗﺒﻞ‬‫ﻟﺼﻔﺤﺔ‬‫ﳔﻄﻂ‬‫ﻛﻴﻒ‬‫ﻧﻌﺮﻑ‬‫ﺭﺍﺡ‬‫ﺍﻟﺪﺭﺱ‬‫ﻫﺬﺍ‬‫ﺏ‬‫ﻬﺎ‬css‫ﺗﻜﻮﻥ‬‫ﺣﱴ‬
‫ﻣﻨﻈﻤﺔ‬‫ﰲ‬‫ﺳﻬﻠﻪ‬‫ﻭﺗﻜﻮﻥ‬‫ﺗﻘﺴﻤﻴﻬﺎ‬‫ﰲ‬‫ﺳﻬﻮﻟﺔ‬‫ﺑﻜﻞ‬‫ﻋﻠﻴﻬﺎ‬‫ﺍﻟﺘﻌﺪﻳﻞ‬‫ﰲ‬‫ﺗﺮﻳﺪﻩ‬‫ﺟﺰﺀ‬‫ﺍﻯ‬
‫ﺍﻟﺼﻔﺤﺔ‬‫ﻣﻦ‬‫ﺇﺫﺍ‬‫ﻻﺣﻘﺎ‬‫ﺫﻟﻚ‬‫ﺃﺭﺩﺕ‬:
‫ﺃﻭﻻ‬:‫ﺗﺸﻤﻞ‬‫ﲝﻴﺚ‬‫ﻟﺼﻔﺤﺘﻨﺎ‬‫ﳐﻄﻂ‬‫ﻧﻀﻊ‬‫ﺭﺍﺡ‬‫ﺍﻷﰐ‬:
١-‫ﺍﳍﻴﺪﺭ‬:‫ﺍﳌﻮﻗﻊ‬‫ﻟﻮﺟﻮ‬‫ﻭﻳﺸﻤﻞ‬+‫ﺍﻟﺪﺧﻮﻝ‬‫ﺗﺴﺠﻴﻞ‬
٢-‫ﺑﺎﺭ‬‫ﺍﻟﻨﺎﻑ‬:‫ﺍﻟﺮﺋﻴﺴﻴﺔ‬‫ﺍﳌﻮﻗﻊ‬‫ﻟﻨﻜﺎﺕ‬‫ﻭﻳﺸﻤﻞ‬
٣-‫ﻗ‬‫ﳝﲎ‬‫ﺎﺋﻤﺔ‬:‫ﻟﻠﻤﻮﻗﻊ‬‫ﺍﻟﺪﺍﺧﻠﻴﺔ‬‫ﺍﻷﻗﺴﺎﻡ‬‫ﻟﻨﻜﺎﺕ‬‫ﻭﺗﺸﻤﻞ‬
٤-‫ﻳﺴﺮﻯ‬‫ﻗﺎﺋﻤﺔ‬:‫ﻣﻘﺎﻻﺕ‬‫ﻣﻦ‬‫ﺍﳌﻮﻗﻊ‬‫ﳏﺘﻮﻯ‬‫ﻭﺗﺸﻤﻞ‬....‫ﺍﱁ‬
٥-‫ﺍﻟﻔﻮﺗﺮ‬:‫ﺍﳌﻮﻗﻊ‬‫ﺣﻘﻮﻕ‬‫ﻭﻳﺸﻤﻞ‬.....
٦-‫ﺍﻟﺮﺋﻴﺴﻰ‬‫ﺍﶈﺘﻮﻯ‬main:‫ﺍﻟﻴﺴﺮﻯ‬‫ﻭﺍﻟﻘﺎﺋﻤﺔ‬‫ﺍﻟﻴﻤﲎ‬‫ﺍﻟﻘﺎﺋﻤﺔ‬‫ﺑﺪﺍﺧﻠﺔ‬‫ﻳﺸﻤﻞ‬‫ﻭﺭﺍﺡ‬
٧-‫ﺍﻟﻜﻠﻰ‬‫ﺍﶈﺘﻮﻯ‬container:‫ﺍﳍﻴﺪﺭ‬‫ﻭﺭﺍﺡ‬+‫ﺑﺎ‬‫ﺍﻟﻨﺎﻑ‬‫ﺭ‬+‫ﺍﻟﺮﺋﻴﺴﻰ‬‫ﺍﶈﺘﻮﻯ‬+‫ﺍﻟﻔﻮﺗﺮ‬
‫ﺍﻵﻥ‬:‫ﺍﻟﻜﻼﻡ‬‫ﳍﺬﺍ‬‫ﳐﻄﻂ‬‫ﻧﺮﺳﻢ‬‫ﺩﻋﻨﺎ‬........
‫ﺍﳌﻌﲎ‬‫ﺗﻔﻬﻢ‬‫ﻭﺭﺍﺡ‬‫ﺍﻟﺼﻮﺭﺓ‬‫ﳍﺬﻩ‬‫ﺍﻧﻈﺮ‬:

‫ﺩﻭﺭﺓ‬web 0.2٣٢
‫ﻧﺮﻳﺪ‬‫ﺍﻟﺼﻮﺭﺓ‬‫ﻫﺬﺍ‬‫ﻣﻦ‬‫ﺍﳊﲔ‬‫ﺃﻥ‬‫ﻛﻮﺩ‬‫ﻧﻜﺘﺐ‬html‫ﺍﻟﺼﻔﺤﺔ‬‫ﳍﺬﻩ‬
‫ﻳﻜﻮﻥ‬‫ﻭﺭﺍﺡ‬‫ﻛﺎﻷﰐ‬:
١-div‫ﺍﻟﻜﻠﻰ‬‫ﻟﻠﻤﺤﺘﻮﻯ‬container
٢-‫ﺍﻝ‬‫ﺑﺪﺍﺧﻞ‬div‫ﻓﻴﻪ‬‫ﻳﻜﻮﻥ‬‫ﺭﺍﺡ‬‫ﺍﻟﺴﺎﺑﻖ‬div‫ﻟﻸ‬‫ﰐ‬:
١-div‫ﻟﻠﻬﻴﺪﺭ‬=‫ﺍﻝ‬‫ﻫﺬﺍ‬‫ﻭﺑﺪﺍﺧﻞ‬div‫ﻳﻮﺟﺪ‬‫ﺭﺍﺡ‬:
-‫ﺍﻟﻠﻮﺟﻮ‬‫ﺭﺍﺑﻂ‬
-‫ﺍﻟﺪﺧﻮﻝ‬‫ﺗﺴﺠﻴﻞ‬‫ﺧﺎﻧﺔ‬

‫ﺩﻭﺭﺓ‬web 0.2٣٣
٢-div‫ﺑﺎﺭ‬‫ﻟﻠﻨﺎﻑ‬=‫ﻳﻮﺟﺪ‬‫ﺭﺍﺡ‬‫ﻭﺑﺪﺍﺧﻠﺔ‬
-‫ﺍﻟﺮﺋﻴﺴﺔ‬‫ﻟﻨﻚ‬
-‫ﺍﳌﻨﺘﺪﻯ‬‫ﻟﻨﻚ‬
-‫ﺑﻨﺎ‬‫ﺍﺗﺼﻞ‬‫ﻟﻨﻚ‬
٣-div‫ﺍﻟﺮﺋﻴﺴﻰ‬‫ﻟﻠﻤﺤﺘﻮﻯ‬main=‫ﻳﻮﺟﺪ‬‫ﻭﺑﺪﺍﺧﻠﺔ‬div‫ﺍﻷﺗﻰ‬:
١-div‫ﺍﻷﻳﺴﺮ‬‫ﺍﻟﻌﻤﻮﺩ‬)‫ﻟﻠﻤﻘﺎﻻﺕ‬(‫ﺍﻟ‬‫ﺑﺪﺍﺧﻠﺔ‬‫ﻭﺍﳌﻘﺎﻻﺕ‬‫ﻭﺍﻟﺘﺎﺭﻳﺦ‬‫ﻌﻨﻮﺍﻥ‬
٢-dic‫ﺍﻷﳝﻦ‬‫ﺍﻟﻌﻤﻮﺩ‬)‫ﺍﻷﻗﺴﺎﻡ‬‫ﻟﻨﻜﺎﺕ‬(‫ﻗﺴﻢ‬‫ﻟﻨﻜﺎﺕ‬‫ﺑﺪﺍﺧﻠﺔ‬...‫ﻭﻗﺴﻢ‬....‫ﻭﻗﺴﻢ‬.....
‫ﺍﱁ‬.....
٤-div‫ﺍﻝ‬‫ﺑﲔ‬‫ﻣﺴﺎﻓﺔ‬‫ﻟﻔﺼﻞ‬main‫ﻧﺴﻤﻴﻪ‬‫ﻭﺭﺍﺡ‬‫ﻭﺍﻟﻔﻮﺗﺮ‬space
div-5‫ﺍﻟﻔﻮﺗﺮ‬

‫ﺩﻭﺭﺓ‬web 0.2٣٤
‫ﻛﺎﻷﺗﻰ‬‫ﺍﻟﺼﻔﺤﺔ‬‫ﻛﻮﺩ‬‫ﻳﻜﻮﻥ‬‫ﺭﺍﺡ‬‫ﺬﺍ‬‫ﻭ‬:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<**** ************"content-type"
content="text/html; charset=windows-1256">
<**** name="author" content="">
<link rel="stylesheet" type="text/css"
media="screen" href="style.css" />
<title>‫ﻟﺘﺼﻤﻴﻤﻬﺎ‬‫ﲤﻬﻴﺪﺍ‬‫ﻭﲣﻄﻴﻄﻬﺎ‬‫ﺻﻔﺤﺔ‬‫ﲣﻄﻴﻂ‬‫ﺩﺭﺱ‬ </title>
</head>
<body>
<div id="header">
<div id="logo"><img src="‫ﺍﻟﻠﻮﺟﻮ‬‫>/"ﺭﺍﺑﻂ‬ </div>
<div id="form">
<form>
‫:ﺍﻟﻴﻮﺯﺭ‬ <input type="text" name="username">
<br>
‫:ﺍﻟﺒﺎﺳﻮﺭﺩ‬ <input type="password" name="password">
</form>
</div>
</div>
<div id="navbar">
<a href="index.html?home">‫ﺍﻟﺮﺋﻴﺴﻴﺔ‬ </a>
<a href="index.html?forum">‫/<ﺍﳌﻨﺘﺪﻯ‬a>
<a href="mailto:vista-design@email.com">‫ﺑﻨﺎ‬‫/<ﺍﺗﺼﻞ‬a>
</div>
<div id="main">
<div id="leftcloumn">
<h1>‫ﻣﻘﺎﻝ‬‫/<ﺍﺿﻒ‬h1>
<h2>8 january 2010</h2>
<p>‫ﺍﻛﺘﺐ‬ ‫ﻫﻨﺎ‬‫/<ﻣﻘﺎﻟﻚ‬p>

‫ﺩﻭﺭﺓ‬web 0.2٣٥
</div>
<div id="rightcolumn">
<h3>‫ﺍﻷﻗﺴﺎﻡ‬ </h3>
‫ﺍﻷﻗﺴﺎﻡ‬‫ﺍﻛﺘﺐ‬
</div>
<div class="spacer"></div>
</div>
<div id="footer">© 2010 vista-design </div>
</div>
</body>
</html>
‫ﻋﻠﻴﻬﺎ‬‫ﺍﻟﺘﻌﺪﻳﻞ‬‫ﻗﺒﻞ‬‫ﺍﻟﺼﻔﺤﺔ‬‫ﻫﺬﻩ‬‫ﺷﻜﻞ‬‫ﺷﻮﻓﻮﺍ‬‫ﺏ‬css‫ﺷﻜﻠﻬﺎ‬‫ﻛﻴﻒ‬
‫ﺍﻝ‬‫ﺳﺤﺮ‬‫ﺷﻮﻑ‬‫ﺍﳊﲔ‬css‫ﺍﻟﻠﻲ‬‫ﺑﻜﻞ‬‫ﺍﻟﺼﻔﺤﺔ‬‫ﻫﺬﻩ‬‫ﻋﻠﻰ‬‫ﻧﺴﻮﻳﻪ‬‫ﺭﺍﺡ‬‫ﺑﺴﺎﻃﺔ‬

‫ﺩﻭﺭﺓ‬web 0.2٣٦
‫ﻗﻴﻤﺔ‬‫ﳍﺎ‬‫ﺻﻔﺤﺔ‬‫ﳒﻌﻠﻬﺎ‬‫ﺣﱴ‬‫ﻨﻈﻤﺔ‬‫ﻣ‬‫ﻭ‬.
‫ﻧﺄﰐ‬‫ﺍﻵﻥ‬‫ﺇﱃ‬‫ﻣﻠﻒ‬style.css
‫ﺃﻭﻻ‬‫ﺍﻟﺼﻮﺭﺓ‬‫ﺷﻮﻑ‬‫ﺍﻵﺗﻴﺔ‬‫ﻣﺮﺓ‬‫ﺃﺧﺮﻯ‬‫ﺏ‬‫ﺍﻟﺘﺨﻄﻴﻂ‬‫ﺳﻴﻜﻮﻥ‬‫ﻛﻴﻒ‬‫ﻧﻔﻬﻢ‬‫ﺣﱴ‬css
‫ﺍﻟﺼﺤﻴﺢ‬‫ﺍﳌﻄﻠﻮﺏ‬‫ﻫﻮ‬‫ﻫﺬﺍ‬‫ﻭﺍﻟﻠﻲ‬‫ﻣﻔﺮﻭﺽ‬‫ﺃﻥ‬‫ﺍﻟﺼﻔﺤﺔ‬‫ﺗﻘﺴﻴﻢ‬‫ﺃﺳﺎﺳﻪ‬‫ﻋﻠﻰ‬‫ﻳﺘﻢ‬
‫ﻭﺑﻌﺪ‬‫ﺇﺿﺎﻓﺔ‬‫ﻛﻮﺩ‬‫ﻳﺼﺒﺢ‬‫ﺭﺍﺡ‬‫ﺍﻷﻭﺍﻣﺮ‬‫ﺑﻌﺪ‬css‫ﺍﻟﺸﻜﻞ‬‫ﺬﺍ‬:
/* ------------------------------
css vista-design layout
‫ﺍﳌﺎﻭﺱ‬‫ﻣﺮﻭﺭ‬‫ﻭﺗﺄﺛﺮ‬‫ﺍﳋﻄﻮﻁ‬‫ﻭﻧﻮﻉ‬‫ﺧﻄﻮﻁ‬‫ﻣﻦ‬‫ﺍﻟﺼﻔﺤﺔ‬‫ﻣﻦ‬‫ﺍﻟﺮﺋﻴﺴﻰ‬‫ﺑﺎﻟﺘﻨﺴﻴﻖ‬‫ﺧﺎﺹ‬‫ﻫﺬﺍ‬
------------------------------ */
body{font-family:tahoma, Helvetica, sans-serif;
font-size:12px; margin:20px; padding:0;}
input, form, textarea
h1, h2, h3, h4, h5, h6{margin:0; padding:0;}
h1{font-size:18px;}
h2{font-size:14px; color:#999999;}

‫ﺩﻭﺭﺓ‬web 0.2٣٧
h3{font-size:13px; border-bottom:solid 1px #DEDEDE;
padding:4px 0; margin-bottom:10px;}
a:link, a:visited{color:#0033CC;}
a:hover{text-decoration:none;}
/* ------------------------------
PAGE STRUCTURE
‫ﻣﻮﺿﺢ‬‫ﻫﻮ‬‫ﻛﻤﺎ‬‫ﺍﻟﺼﻔﺤﺔ‬‫ﻳﻘﺴﻢ‬‫ﺭﺍﺡ‬‫ﺍﻟﻠﻰ‬‫ﺍﳌﻬﻢ‬‫ﺍﻟﺘﻐﻴﲑ‬‫ﻫﻮ‬‫ﻫﺬﺍ‬
------------------------------ */
#container{width:800px; height:auto; border:1px
solid; margin:0 auto;}
#header{border:1px
solid;width:auto;display:block;height:60px;}
#header form{float:right;text-align:right;
padding:5px 10px;}
#navbar{text-align:right; font-size:small ;
width:auto; border:1px solid; display:block;
height:30px;}
#navbar a{height:28px; line-height:28px; padding:0
4px; display:inline;}
#main{border:1px solid;width:auto; display:block;
padding:10px 0;}
#rightcolumn{width:100px ;border:1px
solid;height:300px; margin-right:20px; float:right;
text-align:right;
padding-right:3px;}
#rightcolumn h3{text-align:center;}
#leftcolumn{width:590px ;border:1px
solid;height:300px; text-align:right; margin-
left:10px; padding:3px 5px 3px 10px; float:left;}
div.spacer{clear:both; height:10px;

‫ﺩﻭﺭﺓ‬web 0.2٣٨
display:block;}
#footer{width:auto; display:block; padding:10px 5px
9px 3px; font-size:11px; color:#666666;}
‫ﺭﺍﺡ‬‫ﺍﻷﻭﺍﻣﺮ‬‫ﺑﻌﺾ‬‫ﻳﻮﺟﺪ‬‫ﺗﻼﺣﻆ‬‫ﻟﻮ‬‫ﺃﻭﺿﺤﻬﺎ‬‫ﻟﻚ‬:
display:block
‫ﻭﻇﻴﻔﺘﻬﺎ‬‫ﺎ‬‫ﺃ‬‫ﺍﻟﻠﻨﻜﺎﺕ‬‫ﺑﺼﻒ‬‫ﺗﻘﻮﻡ‬‫ﺭﺍﺡ‬‫ﺃﻭ‬‫ﺑﻠﻮﻙ‬‫ﻫﻴﺌﺔ‬‫ﻋﻠﻰ‬‫ﻭﺍﺣﺪﻩ‬‫ﺻﻒ‬‫ﻋﻠﻰ‬‫ﻛﻠﻤﺎﺕ‬‫ﺍﻯ‬،‫ﻣﺎ‬‫ﻣﺜﻞ‬
‫ﺑﻨﺎ‬‫ﺍﺗﺼﻞ‬‫ﺍﳌﻨﺘﺪﻯ‬‫ﺍﻟﺮﺋﻴﺴﻴﺔ‬‫ﺑﺎﺭ‬‫ﺍﻟﻨﺎﻑ‬‫ﻟﻨﻜﺎﺕ‬‫ﻧﺸﻮﻑ‬...
height:auto
‫ﺃﺭﻳﺪ‬‫ﺃﻥ‬‫ﻟﻠﻘﻴﻤﺔ‬‫ﺍﻧﻮﻩ‬auto‫ﻓﻬﻲ‬‫ﺟﺪﺍﺍﺍﺍﺍﺍﺍ‬‫ﻣﻬﻤﺔ‬
‫ﳚﺐ‬‫ﺃﻥ‬‫ﺍﻯ‬‫ﻳﺄﺧﺬﻩ‬‫ﺭﺍﺡ‬‫ﺍﺭﺗﻔﺎﻉ‬‫ﺍﻯ‬‫ﺍﻧﻪ‬‫ﺍﳌﻔﺮﻭﺽ‬‫ﻣﻦ‬‫ﺍﻧﻪ‬‫ﺗﻌﻠﻢ‬‫ﺩﺍﺧﻞ‬‫ﻭﺳﻢ‬
‫ﻃﻮﻟﻪ‬‫ﻗﻴﻤﺔ‬‫ﲢﺪﻳﺪ‬‫ﰎ‬‫ﻭﺳﻢ‬‫ﺃﻥ‬‫ﻗﻴﻤﺘﻪ‬‫ﺗﻜﻮﻥ‬auto
‫ﻣﺜﻼ‬:‫ﻭﺳﻢ‬‫ﻟﻮ‬main‫ﺑﺘﻌﻴﲔ‬‫ﻗﻤﻨﺎ‬‫ﻗﻴﻤﺘﻪ‬‫ﺇﱃ‬:
height:300px
‫ﻭﺳﻢ‬‫ﻭﻟﻨﻔﺮﺽ‬‫ﺩﺍﺧﻠﻪ‬‫ﻭﺳﻢ‬‫ﺍﻯ‬leftcolumn‫ﺇﺫﺍ‬‫ﺃﺭﺩﻧﺎ‬‫ﺍﺭﺗﻔﺎﻋﻪ‬‫ﲢﺪﻳﺪ‬‫ﻓﺎﳌﻔﺮﻭﺽ‬‫ﺃﻥ‬‫ﻳﻜﻮﻥ‬
‫ﺃﻥ‬‫ﻫﻜﺬﺍ‬‫ﺍﺭﺗﻔﺎﻋﻪ‬
height:auto
‫ﳌﺎﺫﺍ؟‬
‫ﻷﻧﻪ‬‫ﺍﳌﺜﺎﻝ‬‫ﺳﺒﻴﻞ‬‫ﻋﻠﻰ‬‫ﺃﻧﺎ‬‫ﻭﻗﺪ‬‫ﻣﻘﺎﻝ‬‫ﻛﺘﺒﺖ‬‫ﻃﻮﻟﻪ‬‫ﲡﺎﻭﺯ‬٣٠٠px‫ﻟﻮ‬‫ﺃﻧﺖ‬‫ﺍﻟﻄﻮﻝ‬‫ﻋﻴﻨﺖ‬٣٠٠px
‫ﲡﻌﻠﻪ‬‫ﻭﱂ‬auto‫ﺍﳌﻘﺎﺱ‬‫ﻫﺬﺍ‬‫ﻋﻨﺪ‬‫ﺍﳌﻘﺎﻝ‬‫ﻳﺘﻮﻗﻒ‬‫ﺳﻮﻑ‬،‫ﺃﻣﺎ‬‫ﺟﻌﻠﺘﻪ‬‫ﻟﻮ‬auto‫ﻳﺘﻤﺪﺩ‬‫ﺭﺍﺡ‬
‫ﻗﻴﻤﺘﻪ‬‫ﻋﻴﻨﺖ‬‫ﻃﺎﳌﺎ‬‫ﺣﺠﻤﻪ‬‫ﺣﺴﺐ‬‫ﻋﻠﻰ‬‫ﺍﳌﻘﺎﻝ‬auto

‫ﺩﻭﺭﺓ‬web 0.2٣٩
‫ﻭﻻﺣﻆ‬‫ﺃﻥ‬‫ﰲ‬‫ﺻﻔﺤﺘﻨﺎ‬‫ﻛﻮﺩ‬‫ﺃﻥ‬‫ﻫﻴﻚ‬‫ﺃﺳﻮﻯ‬‫ﱂ‬،‫ﻣﲎ‬‫ﺧﻄﺄ‬‫ﻳﻌﺘﱪ‬‫ﻭﻫﺬﺍ‬‫ﻗﻴﻢ‬‫ﺣﺪﺩﺕ‬‫ﺃﻧﺎ‬‫ﻭﻟﻜﻦ‬
‫ﺍﻝ‬height‫ﻟﻠﺼﻔﺤﺔ‬‫ﻟﻴﻜﻮﻥ‬‫ﻓﻘﻂ‬‫ﺍﻟﺪﺍﺧﻠﻴﺔ‬‫ﺃﺑﻌﺎﺩ‬‫ﳝﻜﻨﻜﻢ‬‫ﺎ‬‫ﻣﺸﺎﻫﺪ‬‫ﻣﺜﺎﻝ‬‫ﻣﺸﺎﻫﺪﺓ‬‫ﳝﻜﻨﻜﻢ‬
‫ﻋﻤﻠﻲ‬‫ﻟﻠﺼﻔﺤﺔ‬‫ﺍﺿﻐﻂ‬‫ﻫﻨﺎ‬
‫ﺍﻟﻔﻘﺮﺓ‬‫ﻫﺬﻩ‬‫ﻣﻦ‬‫ﺍﻧﺘﻬﻰ‬‫ﻳﻜﻮﻥ‬‫ﺬﺍ‬.
‫ﺍﳌﻄﻠﻮﺏ‬:‫ﺍﻟﺼﻔﺤﺔ‬‫ﻫﺬﻩ‬‫ﻋﻠﻰ‬‫ﺗﻌﺪﻳﻞ‬‫ﻋﻤﻞ‬‫ﺑﺎﻷﰐ‬:-
١-‫ﺇﺿﺎﻓﺔ‬‫ﻟﻨﻚ‬‫ﰲ‬‫ﺑﺎﺭ‬‫ﺍﻟﻨﺎﻑ‬.
٢-‫ﺇﺿﺎﻓﺔ‬div‫ﻭﻗ‬‫ﺍﻟﻔﻮﺗﺮ‬‫ﻓﻮﻕ‬‫ﺑﻪ‬‫ﺍﳋﺎﺹ‬‫ﺍﳊﺪﻭﺩ‬‫ﺑﺘﺤﺪﻳﺪ‬‫ﻢ‬border solid

‫ﺩﻭﺭﺓ‬web 0.2٤٠
‫ﰲ‬‫ﺍﻟﺪﺭﺱ‬‫ﻫﺬﺍ‬‫ﺍﷲ‬‫ﺷﺎﺀ‬‫ﺇﻥ‬‫ﺍﳌﺘﺤﺮﻛﺔ‬‫ﺍﻟﻘﻮﺍﺋﻢ‬‫ﻋﻤﻞ‬‫ﻛﻴﻔﻴﺔ‬‫ﻧﺘﻌﻠﻢ‬‫ﺭﺍﺡ‬‫ﻧﺸﺮﺡ‬‫ﺭﺍﺡ‬‫ﻟﻠﻮﻗﺖ‬‫ﻭﺍﺧﺘﺼﺎﺭ‬
‫ﺍﳋﻼﺻﺔ‬‫ﻟﻜﻢ‬،‫ﻷﻧﻪ‬‫ﰲ‬‫ﳚﺐ‬‫ﻭﺑﺮﳎﺘﻬﺎ‬‫ﺍﳌﻮﺍﻗﻊ‬‫ﺗﺼﻤﻴﻢ‬‫ﺃﻥ‬‫ﺗﺴﺘﺨﺪﻡ‬‫ﻛﺜﲑﺓ‬‫ﺃﺷﻴﺎﺀ‬‫ﻓﻴﻪ‬‫ﺍﻧﻪ‬‫ﺗﻌﻠﻢ‬
‫ﻻﺑﺪ‬‫ﺃﻥ‬‫ﺍﻫﺘﻤﺎﻣﻬﺎ‬‫ﻭﺗﻌﻄﻴﻬﺎ‬‫ﻟﻚ‬‫ﻭﻗﺘﻚ‬‫ﺗﻔﺮﻍ‬‫ﺍﻷﻭﻝ‬‫ﺍﻷﺷﻴﺎﺀ‬‫ﻣﻦ‬‫ﻳﻌﺘﱪ‬‫ﺍﳌﺘﺤﺮﻛﺔ‬‫ﺍﻟﻘﻮﺍﺋﻢ‬‫ﻭﻣﻮﺿﻮﻉ‬
‫ﺍﻟﻠﻲ‬‫ﻣﻮﻗﻊ‬‫ﺍﻯ‬‫ﻣﻦ‬‫ﻋﻠﻴﻬﺎ‬‫ﲢﺼﻞ‬‫ﳑﻜﻦ‬‫ﺍﻟﺘﻌﺪﻳﻞ‬‫ﻛﻴﻔﻴﺔ‬‫ﺗﻌﻠﻤﻚ‬‫ﻭﲟﺠﺮﺩ‬،‫ﻳﻜ‬‫ﻓﻬﺬﺍ‬‫ﻔﻲ‬‫ﻳﺆﺩﻯ‬‫ﻻﻥ‬
‫ﻭﻗﺘﻚ‬‫ﺗﻌﻄﻰ‬‫ﺣﱴ‬‫ﻃﻠﺒﻚ‬‫ﻟﻠﻤﻮﻗﻊ‬‫ﺍﻟﺪﺍﺧﻠﻴﺔ‬‫ﻟﻠﱪﳎﺔ‬..........
‫ﺃﻭﻻ‬:‫ﺍ‬‫ﺍﻟﻘﻮﺍﺋﻢ‬‫ﺃﺳﺎﻟﻴﺐ‬‫ﺃﺳﻬﻞ‬‫ﺃﺷﺮﺡ‬‫ﺭﺍﺡ‬‫ﺃﻧﺎ‬‫ﻗﻮﺍﺋﻢ‬‫ﻭﻫﻮ‬‫ﳌﺘﺤﺮﻛﺔ‬tabs
‫ﺛﺎﻧﻴﺎ‬:‫ﰲ‬‫ﺷﺎﻣﻞ‬‫ﻣﻠﻒ‬‫ﻳﻮﺟﺪ‬‫ﺍﳌﺮﻓﻘﺔ‬‫ﺍﳌﻠﻔﺎﺕ‬‫ﻷﻣﺜﻠﺔ‬‫ﻛﺜﲑﺓ‬‫ﻣﺘﺤﺮﻛﺔ‬‫ﻗﻮﺍﺋﻢ‬
‫ﻣﻼﺣﻈﻪ‬:‫ﻣﻮﻗﻊ‬‫ﻣﻦ‬‫ﺃﺧﺬﻩ‬‫ﰎ‬‫ﺍﳌﻠﻒ‬dynamicdrive.com‫ﺍﳌﱪﳎﲔ‬‫ﻭﺃﺩﻭﺍﺕ‬‫ﻟﻼﻛﻮﺍﺩ‬
‫ﻟﻠﺤﻘﻮﻕ‬‫ﺣﻔﻈﺎ‬
‫ﺍﻟﺜﺎﱏ‬‫ﺍﳌﺜﺎﻝ‬‫ﻣﻨﻬﺎ‬‫ﻧﺄﺧﺬ‬‫ﺭﺍﺡ‬example2‫ﻋﻠﻴﻪ‬‫ﺍﻟﺘﻌﺪﻳﻞ‬‫ﻃﺮﻳﻘﺔ‬‫ﻭﻧﺸﺮﺡ‬:
‫ﺍﻭﻻ‬:‫ﻣﻠﻒ‬‫ﺑﻔﺘﺢ‬‫ﻗﻢ‬‫ﺻﻔﺤﺔ‬dropdowntabsdemo.htm‫ﺑﱪﻧﺎﳎﻨﺎ‬
phpdesigner
‫ﻟﻜﻮﺩ‬‫ﺍﻧﻈﺮ‬example2:

‫ﺩﻭﺭﺓ‬web 0.2٤١
‫ﺍﻟﻜﻮﺩ‬‫ﻫﺬﺍ‬‫ﲡﺪ‬‫ﺭﺍﺡ‬
<div id="bluemenu" class="bluetabs">
<ul>
<li><a
href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/"
rel="dropmenu1_b">CSS</a></li>
<li><a href="http://www.site.com"
rel="dropmenu2_b">Partners</a></li>
<li><a
href="http://tools.dynamicdrive.com">Tools</a></li>
</ul>
</div>
‫ﻫ‬‫ﻫﺬﻩ‬‫ﻲ‬‫ﺃ‬‫ﻛﻮ‬‫ﺍ‬‫ﺍﻟﺮﺋﻴﺴﻴﺔ‬‫ﺍﻟﻘﻮﺍﺋﻢ‬‫ﺩ‬،‫ﺍﳋﺎﺹ‬‫ﺍﻟﺮﺍﺑﻂ‬‫ﺗﻐﻴﲑ‬‫ﳝﻜﻨﻚ‬‫ﺑﺄﻱ‬‫ﺗﺸﺎﺀ‬‫ﻣﺜﻠﻤﺎ‬‫ﺗﺮﻳﺪﻩ‬‫ﻟﻨﻚ‬،
‫ﻭﳝﻜﻨﻚ‬‫ﺇﺿﺎﻓﺔ‬‫ﻻ‬‫ﻋﺪﺩ‬‫ﺎﺋﻲ‬‫ﺍﻟﻘﻮﺍﺋﻢ‬‫ﻣﻦ‬‫ﺑﺈﺿﺎﻓﺔ‬‫ﺍﻟﻠﺴﺖ‬‫ﻭﺳﻢ‬
‫ﻣﺜﺎﻝ‬:
<li><a href="http://tools.dynamicdrive.com">contact
us</a></li>
‫ﺍﻟﺮﺋﻴﺴﻴﺔ‬‫ﺍﻟﻘﻮﺍﺋﻢ‬‫ﻋﺮﻓﻨﺎ‬‫ﺍﳊﲔ‬،‫ﻧﺘﻨﻘﻞ‬‫ﻗﺴﻢ‬‫ﲢﺖ‬‫ﺍﳌﺪﺭﺟﺔ‬‫ﺍﻟﻔﺮﻋﻴﺔ‬‫ﻟﻠﻘﻮﺍﺋﻢ‬‫ﺍﳊﲔ‬‫ﺭﺋﻴﺴﻲ‬
‫ﻟﺰﺭ‬‫ﻧﻀﻴﻔﻬﺎ‬‫ﺭﺍﺡ‬‫ﻛﻴﻒ‬‫ﺭﺋﻴﺴﻲ‬‫ﻫﺬﻩ‬‫ﻣﻦ‬‫ﺍﻷﺯﺭﺍﺭ‬
‫ﺃﻭﻻ‬:‫ﻻﺑﺪ‬‫ﺫﻟﻚ‬‫ﺗﻔﻌﻞ‬‫ﺣﱴ‬‫ﺃﻥ‬‫ﺗﺸﲑ‬‫ﰲ‬‫ﺍﻟﺴﺎﺑﻖ‬‫ﺍﻟﺮﺋﻴﺴﻴﺔ‬‫ﺍﻟﻘﻮﺍﺋﻢ‬‫ﻛﻮﺩ‬‫ﻟﻪ‬‫ﻧﻀﻴﻒ‬‫ﺭﺍﺡ‬‫ﺑﺄﻧﻨﺎ‬‫ﺃﺯﺭﺍﺭ‬
‫ﺩﺍﺧﻠﻴﺔ‬‫ﻓﺮﻋﻴﺔ‬‫ﻭﺫﻟﻚ‬‫ﺑﺎﺳﺘﺨﺪﺍﻡ‬‫ﺍﻟﻌﺒﺎﺭﺓ‬‫ﺍﻵﺗﻴﺔ‬:
rel="‫ﺍﻟﻔﺮﻋﻴﺔ‬‫ﺍﻟﻘﻮﺍﺋﻢ‬ id"
‫ﺍﻟﻜﻮﺩ‬‫ﻫﺬﺍ‬‫ﲡﺪ‬‫ﻭﺭﺍﺡ‬‫ﺍﻟﺮﺋﻴﺴﻴﺔ‬‫ﺍﻟﻘﻮﺍﺋﻢ‬‫ﻛﻮﺩ‬‫ﺭﺍﺟﻊ‬:
<li><a href="http://www.site.com"
rel="dropmenu2_b">Partners</a></li>
‫ﺍﻟﻜﻮﺩ‬‫ﺍﳌﻠﻮﻥ‬‫ﺑﺎﻷﲪﺮ‬‫ﻓﺎﺋﺪﺗﻪ‬‫ﺃﻧﻨﺎ‬‫ﺍﻟﺰﺭ‬‫ﻫﺬﺍ‬‫ﺍﺧﱪﻧﺎ‬‫ﺍﻟﺮﺋﻴﺴﻲ‬‫ﻓﻴﻪ‬‫ﺍﻧﻪ‬‫ﺃﺯﺭﺍﺭ‬‫ﺗﻨﺪﺭﺝ‬‫ﺭﺍﺡ‬‫ﻓﺮﻋﻴﺔ‬
‫ﳍﺎ‬‫ﻭﺍﺳﺘﺨﺪﻣﻨﺎ‬‫ﲢﺘﻪ‬id‫ﺍﲰﻪ‬dropmenu2_b

‫ﺩﻭﺭﺓ‬web 0.2٤٢
‫ﻧﺄﰐ‬‫ﺍﻵﻥ‬‫ﻟﻸﺯﺭﺍﺭ‬‫ﺍﻟﻔﺮﻋﻴﺔ‬
‫ﻛﺎﻻﺗﻰ‬‫ﻛﻮﺩﻫﺎ‬‫ﻳﻜﻮﻥ‬‫ﻭﺭﺍﺡ‬:
<div id="dropmenu2_b" class="dropmenudiv_b"
style="width: 150px;">
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript
Kit</a>
<a href="http://www.codingforums.com">Coding
Forums</a>
<a
href="http://www.javascriptkit.com/jsref/">JavaScri
pt Reference</a>
</div>
‫ﺍﳌﻠﻮﻥ‬‫ﺍﻟﻜﻮﺩ‬‫ﻻﺣﻆ‬‫ﺑﺎﻷﲪﺮ‬‫ﻓﻬﻮ‬id‫ﺍﻟﺬﻱ‬‫ﻟﻪ‬‫ﺍﺷﺮﻧﺎ‬‫ﰲ‬‫ﺍﻟﺰﺭ‬‫ﺍﻟﺮﺋﻴﺴﻲ‬partners‫ﺣﱴ‬
‫ﺃﺳﻔﻠﻪ‬‫ﺍﻟﻔﺮﻋﻴﺔ‬‫ﺍﻟﻘﺎﺋﻤﺔ‬‫ﻫﺬﻩ‬‫ﺗﻨﺪﺭﺝ‬‫ﺍﻟﻘﻮﺍﺋﻢ‬‫ﳍﺬﻩ‬‫ﻋﻤﻠﻰ‬‫ﻣﺜﺎﻝ‬‫ﻟﺮﺅﻳﺔ‬‫ﻫﻨﺎ‬‫ﺃﺿﻐﻂ‬
‫ﺬﺍ‬‫ﺍﻧﺘﻬﻴﻨﺎ‬‫ﺑﺎﻟﺪﺭﺱ‬‫ﺍﺳﺘﻤﺘﻌﺘﻢ‬‫ﺗﻜﻮﻧﻮﺍ‬‫ﺃﲤﲎ‬‫ﻭﺍﳌﺘﻌﺪﺩﺓ‬‫ﺍﳌﺘﺤﺮﻛﺔ‬‫ﺍﻟﻘﻮﺍﺋﻢ‬‫ﻋﻤﻞ‬‫ﻛﻴﻔﻴﺔ‬‫ﺩﺭﺱ‬‫ﻣﻦ‬
‫ﻋﻠﻰ‬‫ﺗﻌﺪﻳﻞ‬‫ﻋﻤﻞ‬‫ﺍﻟﻘﺎﺋﻤﺔ‬‫ﻫﺬﻩ‬‫ﻭﺇﺿﺎﻓﺔ‬‫ﺃﺯﺭﺍﺭ‬‫ﺇﺿﺎﻓﻴﺔ‬‫ﳍﺎ‬‫ﻭﻓﺮﻋﻴﺔ‬‫ﺃﻭ‬‫ﻓﻘﻂ‬‫ﺻﻮﺭﺓ‬‫ﻭﺿﻊ‬
‫ﻟﻠﺘﻌﺪﻳﻞ‬.

‫ﺩﻭﺭﺓ‬web 0.2٤٣
‫ـ‬‫ﺑ‬‫ﺍﻟﺼﻮﺭ‬‫ﻣﻊ‬‫ﺍﻟﺘﻌﺎﻣﻞ‬‫ﻛﻴﻔﻴﺔ‬‫ﻭﻫﻮ‬‫ﺍﻟﺪﻭﺭﺓ‬‫ﺩﺭﻭﺱ‬‫ﻣﻦ‬‫ﻭﺃﲨﻞ‬‫ﺃﻗﻮﻯ‬‫ﻟﺪﺭﺱ‬‫ﻧﻨﺘﻘﻞ‬‫ﺭﺍﺡ‬css
‫ﺃﻭﻻ‬:‫ﻧﺘﻜﻠﻢ‬‫ﺭﺍﺡ‬‫ﺷﻰﺀ‬‫ﺍﻯ‬‫ﻋﻦ‬‫ﻧﻌﺮﻑ‬‫ﺧﻠﻮﻧﺎ‬‫ﰲ‬‫ﺍﻟﺪﺭﺱ‬‫ﻫﺬﺍ‬.....
‫ﻟﻠﺼﻮﺭﺓ‬‫ﺍﻧﻈﺮ‬:
‫ﻛﺜﲑ‬‫ﻟﺘﺪﺭﻳﺐ‬‫ﻭﲢﺘﺎﺝ‬‫ﺍﳌﻬﻤﺔ‬‫ﺍﻷﺷﻴﺎﺀ‬‫ﻣﻦ‬‫ﻳﻌﺘﱪ‬‫ﺍﻟﺼﻮﺭ‬‫ﻣﻊ‬‫ﺍﻟﺘﻌﺎﻣﻞ‬‫ﰲ‬‫ﻭﺍﺧﻀﺎﻏﻬﺎ‬‫ﺍﺳﺘﺨﺪﺍﻣﻬﺎ‬
‫ﺗﺮﻳﺪﻩ‬‫ﺷﻰﺀ‬‫ﻻﻯ‬‫ﰲ‬‫ﺍﻟﺼﻔﺤﺔ‬‫ﺃﻋﺘﻤﺪ‬‫ﺳﻮﻑ‬‫ﻭﺃﻧﺎ‬‫ﰲ‬‫ﲢﻘﻖ‬‫ﻭﻛﻴﻒ‬‫ﺍﻟﺸﺮﺡ‬‫ﺳﻬﻮﻟﺔ‬‫ﻋﻠﻰ‬‫ﺩﺭﺳﻨﺎ‬
‫ﺗﺮﻳﺪﻫﺎ‬‫ﺻﻮﺭﺓ‬‫ﺍﻯ‬‫ﻣﻦ‬‫ﻃﻠﺒﻚ‬.....

‫ﺩﻭﺭﺓ‬web 0.2٤٤
‫ﺃﻭﻻ‬:‫ﺃﻧﺎ‬‫ﻟﻮ‬‫ﺃﻛﻴﺪ‬‫ﻋﻨﺪﻱ‬‫ﳓﺘﺎﺟﻬﺎ‬‫ﺭﺍﺡ‬‫ﺃﻧﻨﺎ‬‫ﻓﺄﻋﺘﻘﺪ‬‫ﺍﻟﺼﻮﺭﺓ‬‫ﻣﻦ‬‫ﳎﻤﻮﻋﺔ‬‫ﰲ‬‫ﻫﺬﻩ‬‫ﺍﻻﺷﻴﺎﺀ‬‫ﰲ‬
‫ﺍﻟﻐﺎﻟﺐ‬
١-‫ﺻﻮﺭﺓ‬‫ﻭﺿﻊ‬‫ﻛﻴﻔﻴﺔ‬‫ﰲ‬‫ﻭﺍﻟﺘﺤﻜﻢ‬‫ﺍﻟﺼﻔﺤﺔ‬‫ﰲ‬‫ﺃﺑﻌﺎﺩﻫﺎ‬.
٢-‫ﺑﺎﻟﺼﻮﺭ‬‫ﻟﻠﺼﻔﺤﺔ‬‫ﺧﻠﻔﻴﺎﺕ‬‫ﻋﻤﻞ‬‫ﻛﻴﻔﻴﺔ‬‫ﰲ‬‫ﺃﺑﻌﺎﺩﻫﺎ‬‫ﻭﲢﺪﻳﺪ‬‫ﺍﻟﻮﻳﺐ‬‫ﺻﻔﺤﺎﺕ‬.
٣-‫ﺻﻮﺭ‬‫ﻣﻌﺮﺽ‬‫ﻫﻴﺌﺔ‬‫ﻋﻠﻰ‬‫ﺻﻮﺭ‬‫ﳎﻤﻮﻋﺔ‬‫ﻋﻤﻞ‬‫ﻛﻴﻔﻴﺔ‬.
٤-‫ﺭﻏﺒﺘﻚ‬‫ﺣﺴﺐ‬‫ﻋﻠﻰ‬‫ﺍﻷﺧﺮ‬‫ﺗﻠﻮ‬‫ﻭﺍﺣﺪﻩ‬‫ﻭﲢﺮﻳﻜﻬﺎ‬‫ﻟﻠﺼﻮﺭ‬‫ﺷﻮ‬‫ﺳﻼﻳﺪ‬‫ﻋﻤﻞ‬‫ﻛﻴﻔﻴﺔ‬.
‫ﺃﺑﺪ‬‫ﺭﺍﺡ‬‫ﺍﳊﲔ‬‫ﺀ‬‫ﻓﺎﻷﺻﻌﺐ‬‫ﺍﻷﺳﻬﻞ‬‫ﺑﺸﺮﺡ‬‫ﻣﻌﻜﻢ‬.......
١-‫ﺻﻮﺭﺓ‬‫ﻭﺿﻊ‬‫ﻛﻴﻔﻴﺔ‬‫ﰲ‬‫ﻭﺍﻟﺘﺤﻜﻢ‬‫ﺍﻟﺼﻔﺤﺔ‬‫ﰲ‬‫ﺃﺑﻌﺎﺩﻫﺎ‬!
‫ﺍﻧﻪ‬‫ﻧﻌﺮﻑ‬‫ﺃﻛﻴﺪ‬‫ﰲ‬html‫ﻭﺳﻢ‬‫ﺑﲔ‬‫ﻧﻀﻌﻬﺎ‬‫ﺭﺍﺡ‬‫ﺻﻮﺭﺓ‬‫ﻭﺿﻊ‬‫ﺍﺭﺩﻧﺎ‬‫ﺍﺫﺍ‬img
‫ﻣﺜﺎﻝ‬:
<img src="banner.jpg" alt="vista-design"
width="100" height="90" />
‫ﻭﺍﻝ‬width‫ﻭﺍﻝ‬height‫ﻟﻠﺘﺤﻜﻢ‬‫ﰲ‬‫ﺃﺑﻌﺎﺩﻫﺎ‬،‫ﻣﺜﺎﻝ‬‫ﻧﺄﺧﺬ‬‫ﺧﻠﻮﻧﺎ‬:

‫ﺩﻭﺭﺓ‬web 0.2٤٥
‫ﺻﻔﺤﺔ‬html:
Transitional//EN"
<html>
<head>
<**** ************"content-type"
content="text/html; charset=iso-8859-1">
<title>Untitled 1</title>
</head>
<body>
<img src="banner.gif" />
</body>
</html>
‫ﳐﺘﻠﻔﺔ‬‫ﺑﺘﺄﺛﲑﺍﺕ‬‫ﺍﻟﺼﻮﺭﺓ‬‫ﻫﺬﻩ‬‫ﻋﻠﻰ‬‫ﺍﻟﺘﻐﻴﲑ‬‫ﻧﺮﻳﺪ‬‫ﺍﳊﲔ‬:
١-‫ﲟﺠﺮﺩ‬‫ﺍﻟﺼﻮﺭﺓ‬‫ﻫﺬﻩ‬‫ﻋﻠﻰ‬‫ﺧﻔﻮﺕ‬‫ﻋﻤﻞ‬‫ﺃﺑﻌﺎﺩ‬‫ﻋﻨﻬﺎ‬‫ﺍﳌﺎﻭﺱ‬:
‫ﺭﺍﺡ‬‫ﻳ‬‫ﻫ‬‫ﺍﻟﻜﻮﺩ‬‫ﺼﲑ‬‫ﺬﺍ‬‫ﻧﺴﺘﺨﺪﻡ‬‫ﻭﺭﺍﺡ‬‫ﺃﻣﺮ‬‫ﺍﳋﻔﻮﺕ‬opacity
‫ﻭﺃﻣﺮ‬‫ﺑﺎﳌﺎﻭﺱ‬‫ﺍﳌﺮﻭﺭ‬‫ﻋﻨﺪ‬‫ﺍﻟﺘﺄﺛﲑ‬‫ﻋﻤﻞ‬onmouseover
<img src="banner.gif"
style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alph
a.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alp
ha.opacity=40" />
‫ﺍﻟ‬‫ﻗﻴﻤﺔ‬‫ﺍﻥ‬‫ﻭﻻﺣﻆ‬‫ـ‬opacity‫ﺍﳋﻔﻮﺕ‬‫ﺩﺭﺟﺔ‬‫ﺯﺍﺩﺕ‬‫ﻛﻠﻤﺎ‬‫ﻗﻠﺖ‬‫ﻛﻠﻤﺎ‬‫ﻟﻠﺨﻔﻮﺕ‬‫ﺩﺭﺟﺔ‬‫ﻭﺍﻛﱪ‬‫ﻫﻲ‬
٠,١‫ﺩﺭﺟﻪ‬‫ﻭﺍﻗﻞ‬‫ﻫﻲ‬٠,٩‫ﺇﱃ‬‫ﺃﻥ‬‫ﺑﺎﻟﻘﻴﻤﺔ‬‫ﺧﻔﻮﺕ‬‫ﻳﻮﺟﺪ‬‫ﻻ‬١

‫ﺩﻭﺭﺓ‬web 0.2٤٦
‫ﻣﺜﺎﻝ‬‫ﻋﻤﻠﻲ‬:‫ﻫ‬‫ﺃﺿﻐﻂ‬‫ﻨﺎ‬
٢-‫ﺧﻠﻔﻴﺔ‬‫ﻭﺟﻌﻠﻬﺎ‬‫ﺍﻟﺼﻮﺭﺓ‬‫ﻋﻤﻞ‬‫ﻛﻴﻔﻴﺔ‬backgorund‫ﺍﻟﺼﻔﺤﺔ‬‫ﺑﻜﺎﻣﻞ‬.
‫ﻳﻌﺮﻓﻬﺎ‬‫ﻻ‬‫ﺍﶈﺘﺮﻓﲔ‬‫ﺍﳌﺼﻤﻤﲔ‬‫ﻣﻦ‬‫ﺟﺪﺍ‬‫ﻛﺜﲑ‬‫ﺍﻟﻨﻘﻄﺔ‬‫ﻫﺬﻩ‬‫ﻷﻧﻚ‬‫ﺻﻮﺭﺓ‬‫ﺗﻮﺿﻊ‬‫ﺟﺮﺑﺖ‬‫ﻟﻮ‬
‫ﺗﻘﻠﻴﺪﻳﺔ‬‫ﺑﻄﺮﻳﻘﺔ‬‫ﻛﺨﻠﻔﻴﺔ‬‫ﺍﳌﺸﺎﻛﻞ‬‫ﻣﻦ‬‫ﻭﺍﺣﺪ‬‫ﲡﺪ‬‫ﺭﺍﺡ‬‫ﺍﻵﺗﻴﺔ‬:
١-‫ﻓﺮﺍﻍ‬‫ﻭﺟﻮﺩ‬‫ﰲ‬‫ﺍﳉﺰﺀ‬‫ﺍﻟﻌﻠﻮﻱ‬‫ﻟﻠﺼﻔﺤﺔ‬
٢-‫ﻛﺨﻠﻔﻴ‬‫ﺍﻟﺼﻮﺭﺓ‬‫ﺍﻛﺘﻤﺎﻝ‬‫ﻋﺪﻡ‬‫ﺔ‬‫ﺃﻭ‬‫ﻣﻨﻬﺎ‬‫ﺟﺰﺀ‬‫ﺍﻗﺘﻄﺎﻉ‬
‫ﻛﺨﻠﻔﻴﺔ‬‫ﻭﺿﻌﻬﺎ‬‫ﺗﺮﻳﺪ‬‫ﺻﻮﺭﺓ‬‫ﻣﻊ‬‫ﺍﳌﺸﻜﻠﺔ‬‫ﻫﺬﻩ‬‫ﻟﻨﺤﻞ‬‫ﻟﺬﻟﻚ‬‫ﺍﻻﺗﻰ‬‫ﺍﺳﺘﺨﺪﺍﻡ‬:
‫ﻛﻮﺩ‬html:
<div id="bg">
<div>
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="vistaultimate.jpg" alt=""/>
</td>
</tr>
</table>
</div>
</div>
‫ﺭ‬‫ﺗﻐﻴﲑ‬‫ﻣﻼﺣﻈﺔ‬‫ﻣﻊ‬‫ﺍﻟﺼﻮﺭﺓ‬‫ﺍﺑﻂ‬vistaultimate.jpg
‫ﻛﻮﺩ‬css:
* {
margin: 0;
padding: 0;
}
html, body, #bg, #bg table, #bg td {
height:100%;
width:100%;
overflow:hidden;
}

‫ﺩﻭﺭﺓ‬web 0.2٤٧
#bg {
position: fixed;
}
#bg div {
height:200%;
left:-50%;
position:absolute;
top:-50%;
width:200%;
}
#bg td {
text-align:center;
vertical-align:middle;
}
#bg img {
margin:0 auto;
min-height:50%;
min-width:50%;
}
٣-‫ﺏ‬‫ﻟﻠﺼﻮﺭ‬‫ﻣﻌﺮﺽ‬‫ﻋﻤﻞ‬‫ﻛﻴﻔﻴﺔ‬css:
‫ﺍﳉﻤﻴﻠﺔ‬‫ﺍﻷﺷﻴﺎﺀ‬‫ﻣﻦ‬‫ﻳﻌﺘﱪ‬‫ﺍﻟﺼﻮﺭ‬‫ﻣﻌﺮﺽ‬‫ﺍﻟﱵ‬‫ﺍﻟﻜﺜﲑ‬‫ﳛﺘﺎﺟﻬﺎ‬‫ﻭ‬‫ﰲ‬‫ﻟﻚ‬‫ﺃﺿﻊ‬‫ﺭﺍﺡ‬‫ﺍﻟﺪﺭﺱ‬‫ﻫﺬﺍ‬
‫ﺍﻟﺼﻮﺭ‬‫ﳌﻌﺮﺽ‬‫ﺑﺴﻴﻂ‬‫ﻣﺜﺎﻝ‬‫ﻭ‬‫ﰲ‬‫ﺍﻟﺪﺭﺱ‬‫ﺍﳋﺘﺎﻣﻲ‬‫ﺃﻛﺜﺮ‬‫ﻣﺘﻄﻮﺭﺓ‬‫ﻟﻜﻢ‬‫ﺃﺿﻊ‬‫ﺭﺍﺡ‬‫ﺍﻟﺪﻭﺭﺓ‬‫ﳍﺬﻩ‬‫ﺩﺍﺧﻞ‬
‫ﲜﺎﻧﺐ‬‫ﺍﻻﺟﺎﻛﺲ‬‫ﻓﻴﻪ‬css
‫ﺃﻭﻻ‬:‫ﺻﻔﺤﺔ‬html
Transitional//EN"
<html>
<head>
<**** ************"content-type"
content="text/html; charset=windows-1256">

‫ﺩﻭﺭﺓ‬web 0.2٤٨
<title>‫ﺒﺴﻂ‬‫ﻣ‬‫ﺻﻮﺭ‬‫ﻣﻌﺮﺽ‬ </title>
</head>
<body>
<div class="img">
<a target="_blank" href="http://vistacompany.org/">
<img src="gal.jpg" alt="vista" width="200"
height="250" />
</a>
<div class="desc">‫ﻫﻨﺎ‬‫ﺍﻟﺼﻮﺭﺓ‬‫ﲢﺖ‬‫ﺷﻰﺀ‬‫ﺍﻯ‬‫/<ﺃﻛﺘﺐ‬div>
</div>
<div class="img">
height="250" />
</a>
</div>
<div class="img">
height="250" />
</a>
</div>
<div class="img">
height="250" />
</a>
</div>
</body>
</html>

‫ﺩﻭﺭﺓ‬web 0.2٤٩
‫ﻛﻮﺩ‬css:
body{
}
div.img
{
margin:2px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:right;
text-align:center;
}
div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}
‫ﻧﺸﺮﺡ‬‫ﺍﻵﻥ‬‫ﲢﺐ‬‫ﻣﺎ‬‫ﻣﺜﻞ‬‫ﺍﳌﻌﺮﺽ‬‫ﻋﻠﻰ‬‫ﺗﻌﺪﻝ‬‫ﻛﻴﻒ‬‫؟‬
١-‫ﺑﻚ‬‫ﺍﳋﺎﺹ‬‫ﺍﻟﺼﻮﺭﺓ‬‫ﺭﺍﺑﻂ‬‫ﺗﻐﲑ‬‫ﻛﻴﻒ‬:
height="250" />

‫ﺩﻭﺭﺓ‬web 0.2٥٠
‫ﺍﻟ‬‫ﺗﻐﲑ‬‫ﺭﺍﺡ‬‫ـ‬gal.jpg‫ﻟﻠﺼﻮﺭﺓ‬‫ﺍﻟﻠﻲ‬‫ﺗﺮﻳﺪﻫﺎ‬‫ﺗﻨﺴﻰ‬‫ﻭﻻ‬‫ﺃﺑﻌﺎﺩﻫﺎ‬‫ﺣﱴ‬‫ﻋﺎﺭﻓﻬﺎ‬‫ﺗﻜﻮﻥ‬‫ﻭﺍﻧﻚ‬
‫ﺍﻟ‬‫ﺗﻐﲑ‬‫ـ‬width‫ﻭﺍﻟ‬‫ـ‬height‫ﺎ‬‫ﺍﳋﺎﺹ‬‫ﻭ‬‫ﺃﻧﻮﻩ‬‫ﺍﻥ‬alt‫ﰲ‬‫ﻓﺮﺿﺎ‬‫ﻟﻮ‬‫ﺍﻧﻪ‬‫ﻭﻇﻴﻔﺘﻬﺎ‬‫ﺍﻟﻜﻮﺩ‬
‫ﺧﻄﺄ‬‫ﺭﺍﺑﻄﻬﺎ‬‫ﻛﺎﻥ‬‫ﺍﻭ‬‫ﺗﻈﻬﺮ‬‫ﱂ‬‫ﺍﻟﺼﻮﺭﺓ‬،‫ﻛﻠﻤﺔ‬‫ﺍﻟﺼﻮﺭﺓ‬‫ﻣﻜﺎﻥ‬‫ﻳﻈﻬﺮ‬‫ﻓﺮﺍﺡ‬vista
٢-‫ﺍﻟﺼﻮﺭﺓ؟‬‫ﻋﻠﻰ‬‫ﺭﺍﺑﻂ‬‫ﺗﻀﻊ‬‫ﻛﻴﻒ‬
‫ﺍﻟﺮﺍﺑﻂ‬‫ﻭﺗﻐﲑ‬‫ﰲ‬href‫ﻣﻮﻗﻌﻚ‬‫ﺑﺮﺍﺑﻂ‬
٣-‫ﻟﻜﺘﺎﺑﺔ‬‫ﺷﻲﺀ‬‫ﺍﻟﺼﻮﺭﺓ؟‬‫ﺃﺳﻔﻞ‬
‫ﺍﻟﺼﻮﺭ‬‫ﻣﻌﺮﺽ‬‫ﻣﻦ‬‫ﺍﻧﺘﻬﻴﻨﺎ‬‫ﺬﺍ‬‫ﻭ‬
‫ﻋﻤﻠﻲ‬‫ﻣﺜﺎﻝ‬:‫ﻫﻨﺎ‬‫ﺃﺿﻐﻂ‬
٤-‫ﺷﻮ؟‬‫ﺍﻟﺴﻼﻳﺪ‬‫ﻋﻤﻞ‬‫ﻛﻴﻔﻴﺔ‬
‫ﺃﺭﻭﻉ‬‫ﻣﻦ‬‫ﺷﻮ‬‫ﺍﻟﺴﻼﻳﺪ‬‫ﻃﺒﻌﺎ‬‫ﺍﻷﺷﻴﺎﺀ‬‫ﺍﻟﱵ‬‫ﻟﻠﻤ‬‫ﺭﺍﺋﻊ‬‫ﺍﻧﻄﺒﺎﻉ‬‫ﻭﺗﻌﻄﻰ‬‫ﺍﻻﻧﺘﺒﺎﻩ‬‫ﺗﻠﻔﺖ‬‫ﻮﻗﻊ‬
‫ﻓﻴﻪ‬‫ﺍﳌﺴﺘﺨﺪﻣﺔ‬‫ﻭﺍﻟﱪﳎﺔ‬،‫ﺍﳌﺨﺘﻠﻔﺔ‬‫ﺷﻮ‬‫ﺍﻟﺴﻼﻳﺪ‬‫ﻣﻦ‬‫ﺍﻟﻜﺜﲑ‬‫ﻳﻮﺟﺪ‬‫ﺣﻘﻴﻘﺔ‬‫ﺍﻟﱵ‬‫ﳝﻜﻦ‬
‫ﺍﺳﺘﺨﺪﺍﻣﻬﺎ‬‫ﺍﻟ‬‫ﻣﻜﺘﺒﺔ‬‫ﺩﻣﺞ‬‫ﺍﻷﺭﻭﻉ‬‫ﻭﻣﻦ‬‫ـ‬jquery‫ﻟﺘﻀ‬‫ﻣﻌﻬﺎ‬‫ﺍﻟﺮﺍﺋﻌﺔ‬‫ﻔﻲ‬‫ﺭﺍﺋﻌﺔ‬‫ﳌﺴﺔ‬
‫ﺷﻮ‬‫ﺍﻟﺴﻼﻳﺪ‬‫ﻋﻠﻰ‬‫ﻛﻴﻔﻴﺔ‬‫ﻭﺷﺮﺡ‬‫ﺷﻮ‬‫ﺍﻟﺴﻼﻳﺪ‬‫ﺃﻧﻮﺍﻉ‬‫ﺃﻓﻀﻞ‬‫ﺃﻋﻴﻄﻚ‬‫ﻭﺭﺍﺡ‬‫ﺍﺳﺘﺨﺪﺍﻣﻪ‬
‫ﺃﻭﻻ‬:‫ﻣﺮﻓﻘﺔ‬‫ﺷﻮ‬‫ﺍﻟﺴﻼﻳﺪ‬‫ﻣﻠﻔﺎﺕ‬‫ﲨﻴﻊ‬‫ﺃﺿ‬‫ﻫﻨﺎ‬‫ﻐﻂ‬
‫ﺛﺎﻧﻴﺎ‬:‫ﻣﺜﺎﻝ‬‫ﻟﺮﺅﻳﺔ‬‫ﻋﻤﻠﻲ‬‫ﺷﻮ‬‫ﻟﻠﺴﻼﻳﺪ‬‫ﻫﻨﺎ‬‫ﺃﺿﻐﻂ‬
‫ﺛﺎﻟﺜﺎ‬:‫ﻛﻴﻔﻴﺔ‬‫ﺍﻻﺳﺘﺨﺪﺍﻡ‬‫؟‬
‫ﺍﻭﻻ‬:‫ﺍﻻﻧﺪﻛﺲ‬‫ﻣﻠﻒ‬‫ﺍﻓﺘﺢ‬index.htm‫ﺍﻟﻜﻮﺩ‬‫ﲡﺪ‬‫ﻭﺭﺍﺡ‬‫ﺍﻻﺗﻰ‬

‫ﺩﻭﺭﺓ‬web 0.2٥١
‫ﺑﺎﻟﺼﻔﺤﺔ‬:
<ul>
<li><img alt="abc defrg thysu ooip jkifbtg fff"
src="http://www.mtwer.com/vb/images/cortina_gray.jp
g" /></li>
src="http://www.mtwer.com/vb/images/cortina_heaven.
jpg" /></li>
src="http://www.mtwer.com/vb/images/cortina_hell.jp
g" /></li>
src="http://www.mtwer.com/vb/images/cortina_leaf.jp
g" /></li>

src="http://www.mtwer.com/vb/images/cortina_olive.j
pg" /></li>
</ul>
‫ﹲﻄﻮﻝ‬‫ﳌ‬‫ﺍ‬‫ﺍﻟﺪﺭﺱ‬‫ﻫﺬﺍ‬‫ﻣﻦ‬‫ﺍﻧﺘﻬﻴﻨﺎ‬‫ﻧﻜﻮﻥ‬‫ﺬﺍ‬
‫ﻣﻨ‬‫ﺍﳌﻄﻠﻮﺏ‬‫ﻚ‬:
١-‫ﺻﻔﺤﺔ‬‫ﻛﺨﻠﻔﻴﺔ‬‫ﺻﻮﺭﺓ‬‫ﻋﻤﻞ‬
٢-‫ﺑﻪ‬‫ﺧﺎﺹ‬‫ﺻﻮﺭ‬‫ﻣﻌﺮﺽ‬‫ﻋﻤﻞ‬
٣-‫ﺑﻪ‬‫ﺧﺎﺹ‬‫ﺷﻮ‬‫ﺳﻼﻳﺪ‬‫ﻋﻤﻞ‬
‫ﺍﻟﺘﻄﺒﻴﻖ‬‫ﻣﻨﻚ‬‫ﻭﺃﺭﺟﻮ‬‫ﺗﻌﻤﻞ‬‫ﻛﻴﻒ‬‫ﻭﺗﻌﺮﻑ‬‫ﺑﺄﻳﺪﻙ‬‫ﺍﻻﻛﻮﺍﺩ‬‫ﺗﻜﺘﺐ‬‫ﻭﺣﺎﻭﻝ‬‫ﻓﻮ‬‫ﻻ‬‫ﺍﻟﺬﻯ‬‫ﺍﷲ‬
‫ﺍﻟﻪ‬‫ﺇﻻ‬‫ﻫﻮ‬‫ﺃﻧﺎ‬‫ﻫﺬﺍ‬‫ﺗﻌﻠﻤﺖ‬‫ﻛﺜﲑ‬‫ﻭﺗﻜﺮﺍﺭ‬‫ﻋﻨﺎﺀ‬‫ﺑﻌﺪ‬‫ﻭﺃﻧﺎ‬‫ﰲ‬‫ﻟﻜﻢ‬‫ﺑﻘﺪﻡ‬‫ﺍﻟﺪﻭﺭﺓ‬‫ﻫﺬﻩ‬
‫ﺗﻌﻠﻤﺖ‬‫ﳑﺎ‬‫ﺍﳋﻼﺻﺔ‬
‫ﺍﻟﺪﺭﺱ‬‫ﻫﺬﺍ‬‫ﻣﺸﺎﺭﻳﻊ‬‫ﺗﻨﺒﻴﻪ‬:
‫ﻭ‬‫ﺍﻷﻣﺜﻠﺔ‬‫ﲨﻴﻊ‬‫ﺍﻷﻛﻮﺍﺩ‬‫ﺍﻟﱵ‬‫ﺍﳌﻮﺿﻮﻉ‬‫ﰲ‬‫ﻣﺮﻓﻘﺔ‬‫ﺍﻟﺪﺭﺱ‬‫ﰲ‬‫ﺷﺮﺣﻬﺎ‬‫ﰎ‬
١-‫ﺍﻟﺼﻮﺭﺓ‬‫ﻋﻠﻰ‬‫ﺧﻔﻮﺕ‬‫ﻭﻋﻤﻞ‬‫ﺍﻟﺼﻔﺤﺔ‬‫ﺧﻠﻔﻴﺔ‬‫ﺗﻐﻴﲑ‬‫ﻣﻠﻒ‬
٢-‫ﺍﻟﺼﻮﺭ‬‫ﻣﻌﺮﺽ‬‫ﻣﻠﻒ‬

‫ﺩﻭﺭﺓ‬web 0.2٥٢
٣-‫ﺷﻮ‬‫ﺍﻟﺴﻼﻳﺪ‬‫ﻣﻠﻒ‬
‫ﰲ‬‫ﻭﺍﳌﺆﺷﺮﺍﺕ‬‫ﺍﻷﺯﺭﺍﺭ‬‫ﻋﻠﻰ‬‫ﺗﺄﺛﲑﺍﺕ‬‫ﻋﻤﻞ‬‫ﻛﻴﻔﻴﺔ‬‫ﻋﻠﻰ‬‫ﻧﺘﻌﺮﻑ‬‫ﺭﺍﺡ‬‫ﺍﻟﺪﺭﺱ‬‫ﻫﺬﺍ‬
‫ﺃﻭﻻ‬:‫ﻧﻌﺮﻑ‬‫ﺃﻥ‬‫ﻻﺑﺪ‬‫ﰲ‬‫ﺍﻝ‬css‫ﺍﳌ‬‫ﻔﺎﻫﻴﻢ‬‫ﺍﻵﺗﻴﺔ‬:-
a:link ‫ﺍﻟﻠﻨﻚ‬‫ﺷﻜﻞ‬‫ﰲ‬‫ﺍﻟﻄﺒﻴﻌﻴﺔ‬‫ﺣﺎﻟﺘﻪ‬
a:visited ‫ﺯﻳﺎﺭﺗﻪ‬‫ﰎ‬‫ﺍﻟﺬﻯ‬‫ﺍﻟﻠﻨﻚ‬‫ﺷﻜﻞ‬
a:hover ‫ﻋﻠﻴﻪ‬‫ﺍﳌﺎﻭﺱ‬‫ﻣﺮﻭﺭ‬‫ﻋﻨﺪ‬‫ﺍﻟﻠﻨﻚ‬‫ﺷﻜﻞ‬
a:active ‫ﻋﻠﻴﻪ‬‫ﺍﻟﻀﻐﻂ‬‫ﻋﻨﺪ‬‫ﺍﻟﻠﻨﻚ‬‫ﺷﻜﻞ‬
‫ﻭﻻﺑﺪ‬‫ﺃﻥ‬‫ﺗﻌﺮﻑ‬‫ﺃﻥ‬‫ﻻﺑﺪ‬‫ﺃﻥ‬hover‫ﺃﻥ‬‫ﺑﻌﺪ‬‫ﺗﺄﺗﻰ‬link‫ﻭ‬visited‫ﳚﻮﺯ‬‫ﻭﻻ‬‫ﺃﻥ‬‫ﺗﻜﺘﺐ‬
‫ﺏ‬‫ﻣﺒﺘﺪﺃ‬‫ﻛﻮﺩﻙ‬hover‫ﺑﺪ‬‫ﺑ‬‫ﺗﺒﺪﺃ‬‫ﻣﺎ‬‫ﻭﻥ‬‫ـ‬link ,visted
‫ﻣﺜﺎﻝ‬‫ﻧﺄﺧﺬ‬‫ﻋﻤﻠﻲ‬:‫ﻫﻨﺎ‬‫ﺃﺿﻐﻂ‬
‫ﻫﻮ‬‫ﻭﻛﻮﺩﻫﺎ‬:
‫ﻛﻮﺩ‬html:
<ul>
<li><a href="#">‫ﺍﻟﺮﺋﻴﺴﻴﺔ‬ </a></li>
<li><a href="#">‫/<ﺍﳌﻨﺘﺪﻯ‬a></li>
<li><a href="#">‫ﺍﻟﺼﻮﺭ‬‫/<ﺍﻟﺒﻮﻡ‬a></li>
<li><a href="#">‫ﺍﻟﻔﻴﺪﻳﻮ‬‫/<ﻣﻜﺘﺒﺔ‬a></li>
<li><a href="#">‫ﺑﻨﺎ‬‫/<ﺍﺗﺼﻞ‬a></li>
</ul>
‫ﻭﻛﻮﺩ‬css:
ul
{
list-style-type:none;
margin:0;
padding:0;

‫ﺩﻭﺭﺓ‬web 0.2٥٣
overflow:hidden;
}
li
{
float:right;
}
a:link ,a:visited{
display:block;
width: 120px;
font-weight: bold;
color:#ffffff;
background:#36004e;
padding:4px;
text-align:center;
text-decoration:none;
}
a:hover,a:active{
background:#922ebf;
}
‫ﻻﺣﻆ‬‫ﺃﻥ‬‫ﺍﳋﻠﻔﻴﺔ‬‫ﺣﺪﺩﻧﺎ‬background‫ﻟﻠﺰﺭ‬‫ﰲ‬‫ﺍﻟﻌﺎﺩﻳﺔ‬‫ﺍﳊﺎﻟﺔ‬link‫ﻭ‬visited
‫ﺑﺎﻟﻠﻮﻥ‬‫ﺍﻟﺒﻨﻔﺴﺠﻲ‬background:#36004e
‫ﻭﺃﻧﻨﺎ‬‫ﺣﺪﺩﻧﺎ‬‫ﰲ‬‫ﺍﳌ‬‫ﻋﻨﺪ‬‫ﺍﻟﺰﺭ‬‫ﺣﺎﻟﺔ‬‫ﺑﺎﳌﺎﻭﺱ‬‫ﻋﻠﻴﻪ‬‫ﺮﻭﺭ‬hover‫ﻋﻠﻴﻪ‬‫ﺍﻟﻀﻐﻂ‬‫ﻭﻋﻨﺪ‬active
‫ﺑﺎﻟﻠﻮﻥ‬‫ﺍﻟﻮﺭﺩﻱ‬background:#922ebf
‫ﺍﻳﻀﺎ‬‫ﻣﻬﻤﺔ‬‫ﺍﺷﻴﺎﺀ‬‫ﻓﻴﻪ‬‫ﺍﻟﻜﻮﺩ‬‫ﻭﺑﻘﻴﺔ‬:
li
{
float:right;
}

‫ﺩﻭﺭﺓ‬web 0.2٥٤
‫ﻟﻠﺴﺖ‬‫ﺟﻌﻠﻨﺎ‬list)‫ﺍﻟﻘﻮﺍﺋﻢ‬(‫ﻋﻠﻰ‬‫ﻭﻟﻴﺲ‬‫ﺑﻌﺾ‬‫ﺟﺎﻧﺐ‬‫ﻋﻠﻰ‬‫ﻛﻼ‬‫ﻳﻜﻮﻧﻮﺍ‬‫ﺣﱴ‬‫ﻟﻠﻴﻤﲔ‬‫ﺍﻟﻄﻔﻮ‬‫ﺃﻣﺮ‬
‫ﺑﺎﻟﻄﻮﻝ‬‫ﻣﺮﻗﻤﻪ‬‫ﻗﺎﺋﻤﺔ‬‫ﻫﻴﺌﺔ‬‫ﻭﺣﺪﺩﻧﺎ‬‫ﰲ‬‫ﺍﻟﻜﻮﺩ‬‫ﺍﻟﺰﺭ‬‫ﻋﺮﺽ‬width‫ﺎﻭﺭ‬‫ﺍ‬‫ﺍﻟﺰﺭ‬‫ﻋﻦ‬‫ﻭﳏﺎﺫﺍﺗﻪ‬
padding‫ﻭﺇﻇﻬﺎﺭ‬‫ﺑﻠﻮﻙ‬‫ﻫﻴﺌﺔ‬‫ﻋﻠﻰ‬‫ﺍﻟﻘﺎﺋﻤﺔ‬black‫ﻭ‬‫ﺬﺍ‬‫ﻋﻠﻰ‬‫ﺫﻟﻚ‬‫ﺗﻄﺒﻴﻖ‬‫ﳝﻜﻨﻚ‬‫ﺯﺭ‬‫ﺍﻯ‬
‫ﺗﺮﻳﺪﻩ‬‫ﺑﻌﻨﺎﻧﻚ‬‫ﻭﺍﻧﻄﻠﻖ‬‫ﺍﻟﻔﻜﺮﺓ‬‫ﺍﻋﺮﻑ‬
‫ﺑ‬‫ﳝﻜﻨﻚ‬‫ﻞ‬‫ﺍﻹﺑﺪﺍﻉ‬‫ﻛﺨﻠﻔﻴﺔ‬‫ﺍﻟﺼﻮﺭ‬‫ﺗﺴﺘﺨﺪﻡ‬‫ﻭﺍﻥ‬‫ﺑﻨﻔﺴﻚ‬‫ﻟﻸﺯﺭﺍﺭ‬‫ﺑﺪﻝ‬‫ﺍﻷﻟﻮﺍﻥ‬
‫ﻛﺎﻻﺗﻰ‬:
background:#f45322 url(' ‫ﺍﻟﺼﻮ‬‫ﺭﺍﺑﻂ‬‫ﺭﺓ‬ ') no-repeat;
‫ﺍﻟﺪﻗﺔ‬‫ﺗﺮﺍﻋﻰ‬‫ﺃﻥ‬‫ﻭﻻﺑﺪ‬‫ﰲ‬‫ﺍﻟﺼﻮﺭﺓ‬‫ﻣﻘﺎﺳﺎﺕ‬‫ﻟﻠﺰﺭ‬‫ﺍﻻﻓﺘﺮﺍﺿﻴﺔ‬‫ﺍﻟﺼﻮﺭﺓ‬‫ﻣﻘﺎﺳﺎﺕ‬‫ﺗﻜﻮﻥ‬‫ﻭﺍﻥ‬‫ﻫﻲ‬
‫ﺍﳌﺎﻭﺱ‬‫ﻣﺮﻭﺭ‬‫ﻋﻨﺪ‬‫ﺍﻟﺼﻮﺭﺓ‬‫ﻣﻘﺎﺳﺎﺕ‬‫ﻧﻔﺲ‬)‫ﺍﳌﺜﺎﻝ‬‫ﺑﺎﳌ‬‫ﺮﻓﻘ‬‫ﺎﺕ‬(
‫ﺎ‬‫ﻟﻮ‬‫ﺗﺘﻐﲑ‬‫ﻗﺎﺋﻤﺔ‬‫ﻋﻤﻞ‬‫ﻟﻸﲪﺮ‬‫ﻋﻠﻴﻬﺎ‬‫ﺍﳌﺎﻭﺱ‬‫ﲟﺮﻭﺭ‬
‫ﺗﺴ‬‫ﺍﻧﻚ‬‫ﻭﻳﻔﻀﻞ‬‫ﻭﺑﻨﻔﺴﻚ‬‫ﺍﻟﺼﻔﺮ‬‫ﻣﻦ‬‫ﻫﺎﻟﻜﻮﺩ‬‫ﻮﻯ‬

‫ﺩﻭﺭﺓ‬web 0.2٥٥
‫ﺃﻭﻻ‬:‫ﺍﻟ‬‫ﲟﻜﺘﺒﺔ‬‫ﺗﻌﺮﻳﻒ‬‫ـ‬jquery:
‫ﺍﻟ‬‫ـ‬jquery:‫ﺍﻟﱪﳎﻴﺔ‬‫ﺍﳌﻜﺘﺒﺎﺕ‬‫ﺃﺣﺪﺙ‬‫ﻫﻰ‬‫ﺍﻟﱵ‬‫ﺗﺴﺘﺨﺪﻣﻬﺎ‬‫ﺃﺷﻬﺮ‬‫ﺍﻟﻮﻳﺐ‬‫ﻋﻠﻰ‬‫ﺍﳌﻮﺍﻗﻊ‬
‫ﻭﺍﻟﻮﺭﺩﺑﺮﻳﺲ‬‫ﻛﺠﻮﺟﻞ‬...‫ﺍﱁ‬،‫ﺍﻻﺟﺎﻛﺲ‬‫ﻟﻐﺔ‬‫ﻋﻦ‬‫ﻋﺒﺎﺭﺓ‬‫ﻭﻫﻰ‬ajax‫ﻣﻜﺘﺒﺔ‬‫ﻫﻴﺌﺔ‬‫ﻋﻠﻰ‬‫ﻭﻟﻜﻦ‬
‫ﺟﺎﻫﺰ‬‫ﻟﻜﺘﺎﺑﺔ‬‫ﺍﳊﺎﺟﺔ‬‫ﺩﻭﻥ‬‫ﻣﺒﺎﺷﺮﺓ‬‫ﺍﺳﺘﺨﺪﺍﻣﻬﺎ‬‫ﳝﻜﻨﻚ‬‫ﺓ‬‫ﺍﻟﺼﻔﺮ‬‫ﻣﻦ‬‫ﺍﻻﺟﺎﻛﺲ‬‫ﻛﻮﺩ‬،‫ﻭﻟﻜﻦ‬‫ﻛﻼﻣﻲ‬
‫ﺍﻟﺴﻬﻮﻟﺔ‬‫ﺬﻩ‬‫ﺍﻷﻣﺮ‬‫ﻫﺬﺍ‬‫ﺍﻥ‬‫ﻳﻌﲎ‬‫ﻻ‬‫ﻫﺬﺍ‬‫ﺻﻌﺐ‬‫ﻣﻌﻬﺎ‬‫ﺍﻟﺘﻌﺎﻣﻞ‬‫ﻓﺎﳌﻜﺘﺒﺔ‬‫ﻷﻱ‬‫ﻳﺴﺒﻖ‬‫ﱂ‬‫ﻣﺒﺘﺪﺃ‬
‫ﻣﻌﻬﺎ‬‫ﺍﻟﺘﻌﺎﻣﻞ‬،‫ﺃﻭ‬‫ﻻ‬‫ﻳﻌﺮﻑ‬‫ﺍﻟ‬‫ﻳﺴﺘﺨﺪﻡ‬‫ﻛﻴﻒ‬‫ـ‬ajax‫ﺗﻜﻤﻦ‬‫ﻭﺍﻟﺼﻌﻮﺑﺔ‬‫ﰲ‬‫ﻻﻥ‬‫ﻣﻌﺮﻓﺘﻚ‬‫ﻛﻴﻔﻴﺔ‬
‫ﻟﺘ‬‫ﺍﳌﻜﺘﺒﺔ‬‫ﻫﺬﻩ‬‫ﺗﺴﺘﻐﻞ‬‫ﺍﳋﻴﺎﻟﻴﺔ‬‫ﺍﻟﺘﺄﺛﲑﺍﺕ‬‫ﻣﻨﻬﺎ‬‫ﺨﺮﺝ‬‫ﺍﻟﱵ‬‫ﺍﻟﺮﺍﺋﻌﺔ‬‫ﺍﳌﻜﺘﺒﺔ‬‫ﻫﺬﻩ‬‫ﺗﻔﻌﻠﻬﺎ‬:
‫ﺳﺆﺍﻝ‬:‫ﺍﻝ‬‫ﺗﻔﻌﻞ‬‫ﻣﺎﺫﺍ‬query،‫ﺣﻴﺔ؟‬‫ﺃﻣﺜﻠﺔ‬‫ﻭﺭﻳﻨﺎ‬
‫ﺍﻟ‬‫ـ‬Query‫ﺃﻋﺘﻘﺪ‬‫ﺎ‬‫ﺃ‬‫ﻻ‬‫ﺩﺍﺧﻠﻴﻪ‬‫ﺑﺮﳎﻴﺔ‬‫ﻓﻴﻪ‬‫ﻣﻮﻗﻊ‬‫ﺍﻯ‬‫ﻣﻦ‬‫ﲣﻠﻮ‬:
‫ﺍﻟ‬‫ﺍﺳﺘﺨﺪﻣﺖ‬‫ﺃﻳﻦ‬‫ﻭﻧﺸﻮﻑ‬‫ﻣﻮﺍﻗﻊ‬‫ﻧﺄﺧﺬ‬‫ﺧﻠﻮﻧﺎ‬‫ـ‬query:
١-‫ﻣﻄﻮﺭ‬‫ﻣﻮﻗﻊ‬:‫ﺍﳌﻮﺿﻮﻉ‬‫ﻋﻠﻰ‬‫ﺭﺩ‬‫ﺑﺎﺿﺎﻓﺔ‬‫ﺗﻘﻮﻡ‬‫ﻋﻨﺪﻣﺎ‬،‫ﺩﻭﻥ‬‫ﺍﻭﺗﻮﻣﺎﺗﻴﻜﺎ‬‫ﻳﻀﺎﻑ‬‫ﻓﺎﻧﻪ‬‫ﲢﻤﻴﻞ‬
‫ﺍﻟﺼﻔﺤﺔ‬،‫ﺍﻻﺟﺎﻛﺲ‬‫ﺎ‬‫ﺍ‬ajax‫ﻧﻘﻮﻝ‬‫ﺍﻭ‬jquery
٢-‫ﺟﻮﺟﻞ‬‫ﻣﻮﻗﻊ‬:‫ﺗﺬﻫﺐ‬‫ﻋﻨﺪﻣﺎ‬‫ﻷﺩﻭﺍﺕ‬‫ﺍﻟﻠﻐﺔ‬،‫ﺍﳌﺘﺮﺟﻢ‬‫ﻟﻴﺘﺮﲨﻬﺎ‬‫ﻛﻠﻤﺔ‬‫ﺗﻜﺘﺐ‬‫ﻋﻨﺪﻣﺎ‬،
‫ﺍﻧﻚ‬‫ﺳﺘﻼﺣﻆ‬‫ﻛﺘﺎﺑﺘ‬‫ﲟﺠﺮﺩ‬‫ﻚ‬‫ﻳﺘﻢ‬‫ﺭﺍﺡ‬‫ﻭﺍﺣﺪ‬‫ﺣﺮﻑ‬‫ﺇﻋﻄﺎﺋﻚ‬‫ﻣﺎ‬‫ﺣﱴ‬‫ﺑﺪﻭﻥ‬‫ﺍﻟﺘﺮﲨﺔ‬‫ﻧﺎﺗﺞ‬
‫ﺯﺭ‬‫ﻋﻠﻰ‬‫ﺗﻀﻐﻂ‬‫ﺍﻟﺘﺮﲨﺔ‬،‫ﺍﻻﺟﺎﻛﺲ‬‫ﺎ‬‫ﺍ‬ajax‫ﺍﻭ‬jquery
٣-‫ﺑﻮﻙ‬‫ﺍﻟﻔﻴﺲ‬‫ﻣﻮﻗﻊ‬:‫ﺩﻭﻥ‬‫ﺻﻔﺤﺘﻚ‬‫ﻋﻠﻰ‬‫ﻳﱰﻝ‬‫ﻓﺎﻧﻪ‬‫ﻣﻮﺿﻮﻉ‬‫ﺗﻜﺘﺐ‬‫ﲢﺐ‬‫ﻋﻨﺪﻣﺎ‬‫ﺍﻧﻚ‬‫ﺗﻼﺣﻆ‬
‫ﺍﻟﺼﻔﺤﺔ‬‫ﲢﻤﻴﻞ‬،‫ﻭﺃﻳﻀﺎ‬‫ﺍﻟ‬‫ﺧﺎﺻﻴﺔ‬‫ـ‬livefeedback،‫ﺎ‬‫ﻓﺈ‬‫ﺗﺴﺘﺪﻋﻰ‬‫ﺑﲔ‬‫ﺟﺪﻳﺪ‬‫ﻛﻞ‬
‫ﺃﺻﺤﺎﺑﻚ‬‫ﻭﺗﺪﺭﺟﻪ‬‫ﰲ‬‫ﺍﻟﺼﻔﺤﺔ‬‫ﲢﻤﻴﻞ‬‫ﺑﺪﻭﻥ‬‫ﺻﻔﺤﺎﺗﻚ‬،‫ﺎ‬‫ﺃ‬‫ﺍﻻﺟﺎﻛﺲ‬

‫ﺩﻭﺭﺓ‬web 0.2٥٦
‫ﻳﺎ‬vista-design‫ﻫﺎﳌ‬‫ﺎ‬‫ﻗﻮ‬‫ﻋﻠﻰ‬‫ﻳﺎﺳﻼﺍﺍﺍﺍﺍﻡ‬‫ﻜﺘﺒﺔ‬
‫ﺍﳌﻜﺘﺒﺔ‬‫ﻣﺴﺘﻐﻞ‬‫ﻣﻮﻗﻊ‬‫ﻛﻞ‬‫ﺍﻥ‬‫ﲡﺪ‬‫ﺭﺍﺡ‬‫ﻣﻮﻗﻊ‬‫ﻭﻣﺴﻜﺖ‬‫ﻟﻠﺼﺒﺎﺡ‬‫ﺟﻠﺴﺖ‬‫ﻟﻮ‬‫ﻭﺍﻋﺘﻘﺪ‬‫ﳐﺘﻠﻒ‬‫ﺑﺸﻜﻞ‬،
‫ﺍﺳﺘﺨﺪﺍﻣﻬﺎ‬‫ﺃﺳﺎﺳﻴﺎﺕ‬‫ﻛﻞ‬‫ﻭﻋﻨﺪﻩ‬‫ﻳﺴﺘﻐﻠﻬﺎ‬‫ﻛﻴﻒ‬‫ﻳﻌﺮﻑ‬‫ﳌﻦ‬‫ﺗﺮﺟﻊ‬‫ﻭﺍﳋﱪﺓ‬‫ﺍﻟﱪﳎﻴﺔ‬
‫ﺳﺆﺍﻝ‬:‫ﺃﻳﻦ‬‫ﻣﻦ‬‫ﺃﺗﻌﻠﻢ‬‫ﺍﻟ‬‫ـ‬jquery‫؟‬
‫ﺃﻋﺘﻘﺪ‬‫ﺃﻥ‬‫ﻣﻮﻗﻌﻬﺎ‬‫ﺍﻻﻟﻜﺘﺮﻭﱐ‬‫ﺃﻓﻀﻞ‬‫ﻫﻮ‬‫ﺷﻲﺀ‬‫ﻣﻨﻪ‬‫ﺗﺘﻌﻠﻢ‬‫ﺭﺍﺡ‬،‫ﲟ‬‫ﺭﺍﺋﻊ‬‫ﻓﺎﳌﻮﻗﻊ‬‫ﺍﻟﻜﻠﻤﺔ‬‫ﻌﲎ‬‫ﻓﻬﻮ‬
‫ﺩﺍﻟﺔ‬‫ﻛﻞ‬‫ﻟﻚ‬‫ﻳﺸﺮﺡ‬‫ﺃﻭ‬‫ﻣﺜﺎﻝ‬‫ﻭﻳﻌﻄﻴﻚ‬‫ﻛﻮﺩ‬‫ﻋﻤﻠﻲ‬‫ﰲ‬‫ﻟﺘﻌﺮﻑ‬‫ﺍﻟﺼﻔﺤﺔ‬‫ﻧﻔﺲ‬‫ﺍﻷﻣﺮ‬‫ﻫﺬﺍ‬‫ﺗﺄﺛﲑ‬
‫ﺳﺆﺍﻝ‬:‫ﺃﻧﺎ‬‫ﻫﻞ‬‫ﻗﺎﺭﺉ‬‫ﺻﻌﻮﺑﺔ‬‫ﺃﻭﺍﺟﻪ‬‫ﺭﺍﺡ‬‫ﺍﻟﺪﻭﺭﺓ‬‫ﰲ‬‫ﻣﻌﻬﺎ‬‫ﺍﻟﺘﻌﺎﻣﻞ‬‫ﻛﻮﱐ‬‫ﻣﺒﺘﺪﺃ‬،‫ﻻ‬‫ﺃ‬‫ﻋﺮﻑ‬‫ﺣﱴ‬
‫ﻛﻮﺩ‬‫ﻳﻜﺘﺐ‬‫ﻛﻴﻒ‬html‫ﺑﻌﻀﻪ؟‬‫ﻋﻠﻰ‬‫ﻛﺎﻣﻞ‬
‫ﺍﻟﺴﺆﺍﻝ‬‫ﻫﺬﺍ‬‫ﻃﺒﻌﺎ‬‫ﺃﻛﻴﺪ‬‫ﻳﻌﺮﻑ‬‫ﻳﺮﻳﺪ‬‫ﺇﺟﺎﺑﺘﻪ‬،‫ﻭﻟﻜﻦ‬‫ﺩﻋﲏ‬‫ﺃﻗﻮﻟﻚ‬‫ﻻ‬‫ﺍﻧﻚ‬‫ﺗﻘﻠﻘﻚ‬‫ﻷﱐ‬
‫ﺍﳌﻜﺘﺒﺔ‬‫ﺗﺄﺛﲑﺍﺕ‬‫ﺗﺴﺘﺨﺪﻡ‬‫ﻭﻛﻴﻒ‬‫ﺍﳋﻼﺻﺔ‬‫ﺳﺄﻋﻄﻴﻚ‬jquery‫ﺗﻜﻮﻥ‬‫ﻻﻥ‬‫ﺍﳊﺎﺟﺔ‬‫ﺩﻭﻥ‬
‫ﳏﺘﺮﻑ‬‫ﰲ‬‫ﺍﳌﻜﺘﺒﺔ‬‫ﻣﻊ‬‫ﺍﻟﺘﻌﺎﻣﻞ‬.
‫ﳚﺐ‬‫ﻭﻟﻜﻦ‬‫ﺃﻥ‬‫ﺗﻌﻠﻢ‬‫ﺃﻥ‬‫ﻗﻮﺓ‬‫ﻳﻌﻄﻴﻚ‬‫ﻟﻦ‬‫ﻫﺬﺍ‬‫ﺍﻹﺑﺪﺍﻉ‬‫ﻭﺍﻻﺑﺘﻜﺎﺭ‬‫ﰲ‬‫ﻣﻊ‬‫ﺍﻟﺘﻌﺎﻣﻞ‬‫ﺍﳌﻜﺘﺒﺔ‬‫ﻷﻧﻚ‬‫ﺭﺍﺡ‬
‫ﺗﺴﺘﻄﻴﻊ‬‫ﻭﻟﻦ‬‫ﻓﻘﻂ‬‫ﳏﺪﺩﺓ‬‫ﻭﻇﺎﺋﻒ‬‫ﺗﻌﺮﻑ‬‫ﺃﻥ‬‫ﻟﻌﻨﺎ‬‫ﺗﻌﻄﻰ‬‫ﺍﻻﻧﻄﻼﻕ‬‫ﻧﻚ‬‫ﰲ‬‫ﻫﺬﻩ‬‫ﻣﻊ‬‫ﺍﻟﺘﻌﺎﻡ‬
‫ﺍﳌﻜﺘﺒﺔ‬‫ﻣﻌﻬﺎ‬‫ﺍﻟﺘﻌﺎﻣﻞ‬‫ﻳﺮﻳﺪ‬‫ﳌﻦ‬‫ﺍﻧﺼﺢ‬‫ﻟﺬﻟﻚ‬‫ﺃﻥ‬‫ﻣﻮﻗﻌﻬﺎ‬‫ﻣﻦ‬‫ﻳﺒﺪﺃ‬‫ﺍﻻﻟﻜﺘﺮﻭﱐ‬.
‫ﺳﺆﺍﻝ‬:‫ﻣﺎﺫﺍ‬‫ﻳﻠﺰﻣﲏ‬‫ﻟﻠﺪﻭﺭﺓ‬‫ﻣﻨﺘﺴﺐ‬‫ﻛﻌﻀﻮ‬‫ﺃﻥ‬‫ﺍﻋﺮﻑ‬‫ﰲ‬jquery
‫ﺃﻧﺎ‬‫ﻻﺑﺪ‬‫ﺍﳊﲔ‬‫ﺧﻔﻴﻔﺔ‬‫ﺃﺳﺎﺳﻴﺎﺕ‬‫ﺃﺷﺮﺡ‬‫ﺭﺍﺡ‬‫ﺃﻥ‬‫ﻋﻠﻰ‬‫ﺗﻌﺮﻓﻬﺎ‬‫ﺍﻷﻗﻞ‬:
١-‫ﻹﺩﺭﺍﺝ‬‫ﻣﻠﻒ‬‫ﺍﳌﻜﺘﺒﺔ‬،‫ﻳﻜﻮﻥ‬‫ﺭﺍﺡ‬‫ﺑﺎﻟﻀﺒﻂ‬‫ﻣ‬‫ﻣﺎ‬‫ﺜﻞ‬‫ﻳﻨﺪﺭﺝ‬‫ﻣﻠﻒ‬css:
‫ﻣﺜﺎﻝ‬:
<script

‫ﺩﻭﺭﺓ‬web 0.2٥٧
src="http://ajax.googleapis.com/ajax/libs/jquery/1.
2.6/jquery.min.js" type="text/javascript"></script>
‫ﻻﺣﻆ‬‫ﺃﻥ‬‫ﺍﳌﻜﺘﺒﺔ‬‫ﻣﺮﻓﻮﻋﺔ‬‫ﺟﻮﺟﻞ‬‫ﺳﲑﻓﺮﺍﺕ‬‫ﻋﻠﻰ‬،‫ﺍﳌﻜﺘﺒﺔ‬‫ﻣﻠﻒ‬‫ﲢﻤﻴﻞ‬‫ﻭﳝﻜﻨﻚ‬‫ﻭﺗﱰ‬‫ﻋﻠﻰ‬‫ﻳﻠﻪ‬
‫ﻭ‬‫ﺟﻬﺎﺯﻩ‬‫ﺍﻹﺷﺎﺭﺓ‬‫ﺇﻟﻴﻪ‬
‫ﻣﺜﺎﻝ‬:
<script src="jquery.min.js"
type="text/javascript"></script>
‫ﻣﻼﺣﻈ‬‫ﺔ‬:‫ﺑﺎﻣﺘﺪﺍﺩ‬‫ﺑﺴﻴﻂ‬‫ﻣﻠﻒ‬‫ﻋﻦ‬‫ﻋﺒﺎﺭﺓ‬‫ﺍﳌﻜﺘﺒﺔ‬js‫ﻓﻘﻂ‬،‫ﺗﺘﺨﻴﻞ‬‫ﻻ‬‫ﻳﻌﲎ‬‫ﻭﻫﻜﺬﺍ‬‫ﻛﺘﺐ‬‫ﺍﳌﻜﺘﺒﺔ‬
٢-‫ﻻﺑﺪ‬‫ﺃﻥ‬‫ﺍﳌﻜﺘﺒﺔ‬‫ﻣﻊ‬‫ﻭﺍﻟﺘﻌﺎﻣﻞ‬‫ﺍﻻﺟﺎﻛﺲ‬‫ﺃﻭﺍﻣﺮ‬‫ﻛﺘﺎﺑﺔ‬‫ﻳﺘﻢ‬‫ﻭﲰﻰ‬‫ﺑﲔ‬script‫ﺍﻟ‬‫ﻭﺳﻢ‬‫ﺑﲔ‬‫ـ‬
head
‫ﻣﺜﺎﻝ‬:
<head>
<title></title>
<**** ************"Content-Type"
content="text/html; charset=UTF-8">
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.
2.6/jquery.min.js"></script>
<link rel="stylesheet" href="css/default.css" />
<script type="text/javascript">
$(function() {
$('#submit').click(function() {
$('#container').append('<img src="img/loading.gif"
alt="Currently Loading" id="loading" />');
var name = $('#name').val();
var email = $('#email').val();
var comments = $('#comments').val();
$.ajax({
url: 'submit_to_db.php',
type: 'POST',
data: 'name=' + name + '&email=' + email +

‫ﺩﻭﺭﺓ‬web 0.2٥٨
'&comments=' + comments,
success: function(result) {
$('#response').remove();
$('#container').append('<p id="response">' + result
+ '</p>');
$('#loading').fadeOut(500, function() {
$(this).remove();
});
}
});
return false;
});
});
</script>
</head>
٣-‫ﺍﻻﺟﺎﻛﺲ‬‫ﻧﻔﺴﻬﺎ‬‫ﻟﻠﻐﺔ‬‫ﺑﺎﻟﻨﺴﺒﺔ‬‫ﻃﺒﻌﺎ‬،‫ﻓﻴﻜﺘﻔﻲ‬‫ﻣﺴﺘﻮﻯ‬‫ﻋﻠﻰ‬‫ﺍﻷﻋﻀﺎﺀ‬‫ﻫﻨﺎ‬‫ﺃﻥ‬‫ﻟﻜ‬‫ﺍﺷﺮﺡ‬‫ﻢ‬
‫ﻣﺒﺎﺷﺮﺓ‬‫ﺗﺴﺘﺨﺪﻣﻬﺎ‬‫ﻭﻛﻴﻒ‬‫ﺟﺎﻫﺰﺓ‬‫ﺍﻟﺘﺄﺛﲑﺍﺕ‬‫ﺍﷲ‬‫ﺷﺎﺀ‬‫ﻭﺍﻥ‬‫ﰲ‬‫ﺍﻟﻘﺎﺩﻣﺔ‬‫ﺍﻟﺪﻭﺭﺍﺕ‬،‫ﻳﻜﻮﻥ‬‫ﻓﻘﺪ‬
‫ﻟﻸ‬‫ﺑﺮﳎﻴﺔ‬‫ﺩﻭﺭﺓ‬‫ﻫﻨﺎﻙ‬‫ﺟﺎﻛﺲ‬

‫ﺩﻭﺭﺓ‬web 0.2٥٩
‫ﻧﺒﺪﺃ‬‫ﺍﻵﻥ‬‫ﻟﻠﻤﻜﺘﺒﺔ‬‫ﺍﳌﺨﻠﺘﻔﺔ‬‫ﺍﻟﺘﺄﺛﲑﺍﺕ‬‫ﻭﻧﺴﺘﻐﻞ‬‫ﻧﺴﺘﺨﺪﻡ‬‫ﺭﺍﺡ‬‫ﻛﻴﻒ‬‫ﻧﻌﺮﻑ‬‫ﰱ‬‫ﺍﳋﻮﺽ‬‫ﺩﻭﻥ‬
‫ﺍﻟﱪﳎﻴﺔ‬‫ﺃﻛﻮﺍﺩﻫﺎ‬‫ﻃﻼﺳﻢ‬،‫ﺫﻟﻚ‬‫ﻣﻦ‬‫ﺣﺰﻳﻦ‬‫ﺍﱏ‬‫ﺭﻏﻢ‬،‫ﺃﻭﺩ‬‫ﻓﻜﻨﺖ‬‫ﺍﺷﺮﺣﻠﻜﻢ‬‫ﺍﻥ‬‫ﺍﻟ‬‫ـ‬jquery
‫ﺑﺮﳎﻴﺎ‬‫ﻣﻌﻬﺎ‬‫ﺍﻟﺘﻌﺎﻣﻞ‬‫ﻭﻛﻴﻔﻴﺔ‬،‫ﻛﺎﻧﺖ‬‫ﻭﻫﺬﻩ‬‫ﺩﺭ‬‫ﻟﺴﻠﺴﺔ‬‫ﲢﺘﺎﺝ‬‫ﻓﻴﺪﻳﻮ‬‫ﻭﺱ‬،‫ﻧﻜﺘﻔﻰ‬‫ﻟﺬﻟﻚ‬
‫ﳝﻜﻨﻚ‬‫ﻭﻛﻴﻒ‬‫ﺍﳌﺨﺘﻠﻔﺔ‬‫ﺎ‬‫ﺑﺘﺄﺛﲑﺍ‬‫ﲟﻌﺮﻓﺘﻚ‬‫ﺇﺩﺭﺍﺟﻬﺎ‬‫ﰲ‬‫ﻣﻮﻗﻊ‬‫ﺍﻯ‬‫ﳌﺴﺎﺕ‬‫ﺍﺿﺎﻓﺔ‬‫ﺗﺮﻳﺪ‬
‫ﺍﻟ‬‫ـ‬jquery‫ﻟﻪ‬:
‫ﻧﺴﺘﺨﺪﻣﻬﺎ‬‫ﺭﺍﺡ‬‫ﻭﻛﻴﻒ‬‫ﻟﻠﻤﻜﺘﺒﺔ‬‫ﺍﳌﺨﺘﻠﻔﺔ‬‫ﺍﻟﺘﺄﺛﲑﺍﺕ‬‫ﺃﻫﻢ‬‫ﻟﻨﺄﺧﺬ‬‫ﻟﻠﺼﻮﺭﺓ‬‫ﺍﻧﻈﺮ‬:

‫ﺩﻭﺭﺓ‬web 0.2٦٠
‫ﺍﷲ‬‫ﺑﺮﻛﺔ‬‫ﻋﻠﻰ‬‫ﻧﺒﺪﺃ‬:
١-‫ﺑ‬‫ﻟﻠﺼﻮﺭﺓ‬‫ﻣﻜﱪ‬‫ﻋﺮﺽ‬‫ﻋﻤﻞ‬‫ﻛﻴﻔﻴﺔ‬‫ـ‬jquery:
‫ﻣﺜﺎﻝ‬‫ﺷﺎﻫﺪ‬‫ﻋﻤ‬‫ﻠﻲ‬:‫ﻫﻨﺎ‬‫ﺃﺿﻐﻂ‬
‫ﻭﺍﻟﺘﻌﺪﻳﻞ‬‫ﺍﻻﺳﺘﺨﺪﺍﻡ‬‫ﻛﻴﻔﻴﺔ‬:
‫ﺍﻟ‬‫ﻣﻠﻒ‬‫ﺍﻓﺘﺢ‬‫ـ‬index.htm:‫ﻫﺎﻟﻜﻮﺩ‬‫ﲡﺪ‬‫ﻭﺭﺍﺡ‬:
<a href="one.jpg"><img src="oneTN.jpg" alt="image" /></a>
<a href="two.jpg"><img src="twoTN.jpg" alt="image" /></a>
<a href="three.jpg"><img src="threeTN.jpg" alt="image"
/></a>
‫ﲟﻘﺎﺳﲔ‬‫ﺻﻮﺭﺓ‬‫ﺗﺴﻮﻯ‬‫ﻫﻮ‬‫ﻋﻠﻴﻚ‬‫ﻣﺎ‬‫ﻛﻞ‬:١-‫ﻣﺼﻐﺮﺓ‬‫ﺻﻮﺭﺓ‬٢-‫ﻣﻜﱪﺓ‬‫ﺻﻮﺭﺓ‬
‫ﺍﳌﺼﻐﺮﺓ‬‫ﺍﻟﺼﻮﺭﺓ‬:
‫ﳍﺎ‬‫ﺍﳌﻜﱪﺓ‬‫ﺍﻟﺼﻮﺭﺓ‬:

‫ﺩﻭﺭﺓ‬web 0.2٦١
‫ﺍﳌﺼﻐﺮﺓ‬‫ﺍﻟﺼﻮﺭﺓ‬‫ﻫﻲ‬‫ﺍﻟﻄﺒﻴﻌﻴﺔ‬‫ﺍﻟﻠﻲ‬‫ﺍﳌﺎﻭﺱ‬‫ﻣﺮﻭﺭ‬‫ﺑﺪﻭﻥ‬‫ﺗﻈﻬﺮ‬‫ﺭﺍﺡ‬‫ﻣﺴﺎﺭﻫﺎ‬‫ﻳﻜﻮﻥ‬‫ﻭﺭﺍﺡ‬‫ﰲ‬‫ﻫﺬﺍ‬
‫ﺑﻔﺮﺽ‬‫ﺍﻟﻜﻮﺩ‬‫ﺃﺧﺬﻧﺎ‬‫ﺍﻟﺼﻮﺭﺓ‬‫ﺍﻷﻭﱃ‬‫ﺍﻟﻜﻮﺩ‬‫ﻣﻦ‬:
<img src="oneTN.jpg" alt="image" />
‫ﺍﳌﻜﱪﺓ‬‫ﺍﻟﺼﻮﺭﺓ‬‫ﺗﻜﻮﻥ‬‫ﻭﺭﺍﺡ‬‫ﻫﻲ‬‫ﺍﻟﱵ‬‫ﺍﳌﺎﻭﺱ‬‫ﻣﺮﻭﺭ‬‫ﲟﺠﺮﺩ‬‫ﺗﻈﻬﺮ‬‫ﺭﺍﺡ‬:
‫ﻳﻜﻮﻥ‬‫ﺭﺍﺡ‬‫ﻭﻛﻮﺩﻫﺎ‬:
<a href="one.jpg"></a>
‫ﺳﻬﻠﻪ‬‫ﺍﻟﻄﺮﻳﻘﺔ‬‫ﻃﺒﻌﺎ‬.
٢-‫ﺇﻇﻬﺎﺭ‬‫ﺍﳌﺎﻭﺱ‬‫ﻣﺮﻭﺭ‬‫ﲟﺠﺮﺩ‬‫ﻣﺘﻄﻠﺒﺎﺕ‬‫ﻣﺮﺑﻊ‬:
‫ﺍ‬‫ﻣﻦ‬‫ﺍﻟﺮﺍﺋﻌﺔ‬‫ﻟﻄﺮﻕ‬‫ﰲ‬jquery،‫ﳝﻜﻨﻚ‬‫ﺍﻟﻄﺮﻳﻘﺔ‬‫ﺬﻩ‬‫ﺍﻧﻚ‬‫ﻓﺘﺨﻴﻞ‬‫ﻋﻠﻰ‬‫ﺍﳌﺎﻭﺱ‬‫ﲟﺮﻭﺭ‬
‫ﻭﺍﺣﺪﺓ‬‫ﻛﻠﻤﺔ‬،‫ﺃﻥ‬‫ﻛﺎﻣﻞ‬‫ﻣﻘﺎﻝ‬‫ﺑﺈﻇﻬﺎﺭ‬‫ﺗﻘﻮﻡ‬‫ﺍﻟﺼﻔﺤﺔ‬‫ﲢﻤﻴﻞ‬‫ﺑﺪﻭﻥ‬.
‫ﻣﺜﺎﻝ‬‫ﺷﺎﻫﺪ‬‫ﻋﻤﻠﻲ‬:‫ﻫﻨﺎ‬‫ﺃﺿﻐﻂ‬
)‫ﻭﺍﻟﺘﻌﺪﻳﻞ‬‫ﺍﻻﺳﺘﺨﺪﺍﻡ‬‫ﻛﻴﻔﻴﺔ‬(‫ﲡﺪ‬‫ﺭﺍﺡ‬‫ﰲ‬‫ﺍﻟ‬‫ﻛﻮﺩ‬‫ـ‬ajax:‫ﻫﺎﳉﻤﻠﺔ‬:
html += '<h4>‫ﺍﻟﺘﻠﻘﺎﺋﻴﺔ‬‫ﺍﻟﻜﺘﺎﺑﺔ‬‫ﻛﻴﻔﻴﺔ‬‫ﻋﻦ‬‫ﻣﻘﺎﻝ‬ </h4>';
html += '<img src="image.jpg" alt="image"
/>';
html += '<p>‫ﻋﻠﻰ‬‫ﺍﳌﺎﻭﺱ‬‫ﻣﺮﻭﺭ‬‫ﲟﺠﺮﺩ‬‫ﳌﻘﺎﻝ‬‫ﻋﺮﺽ‬‫ﻋﻤﻞ‬‫ﻛﻴﻔﻴﺔ‬‫ﻋﻦ‬‫ﻳﺘﺤﺪﺙ‬‫ﺍﳌﻘﺎﻝ‬‫ﻫﺬﺍ‬
‫/<ﺯﺭ‬p>';
‫ﻭ‬‫ﺍﻟﻜﻮﺩ‬‫ﻣﻦ‬‫ﺟﺰﺀ‬‫ﻛﻞ‬‫ﻻﺣﻆ‬‫ﺍﻟﺼﻮﺭﺓ‬‫ﺷﻮﻑ‬‫ﺍﻵ‬‫ﺗﻴﺔ‬‫ﺎ‬‫ﺍﳋﺎﺹ‬‫ﺍﻟﺘﻌﺪﻳﻞ‬‫ﺗﻌﺮﻑ‬‫ﺣﱴ‬:
‫ﺍﻋﺘﻘﺪ‬‫ﺎ‬‫ﺇ‬‫ﺳﻬﻠﺔ‬‫ﹰ‬‫ﺍ‬‫ﺟﺪ‬

دورة تصميم المواقع

دورة تصميم المواقع

Recommended

Recommended

More Related Content

More from احمد الجسار

More from احمد الجسار (20)

دورة تصميم المواقع