‫‪١٣٨٨‬‬

‫آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ‬
‫ﻃﺮاﺣﯽ ﻗﺎﻟﺐ در ﻓﺘﻮﺷﺎپ ﺗﺎ ﮐﺪﻧﻮﯾﺴﯽ ‪CSS‬‬

‫‪Ittutorial.ir‬‬
‫‪Member of TopDesign Group‬‬

‫‪۱۳۸۸‬‬

‫در اﯾﻦ ﺧﻮد آﻣﻮز ﺷﻤﺎ ﺧﻮاﻫﯿﺪ ﺗﻮاﻧﺴﺖ ﯾﮏ وب ﺳﺎﯾﺖ ﺑﺎ ﺳﺎده ﺗﺮﯾﻦ روش و ﺑﻪ ﺻﻮرت ﻣﺮﺣﻠﻪ ﺑﻪ ﻣﺮﺣﻠﻪ ﺑﺴﺎزﯾﺪ‪.‬‬
‫در ﻃﻮل اﯾﻦ ﺧﻮد آﻣﻮز ﻣﻼﺣﻈﻪ ﺧﻮاﻫﯿﺪ ﮐﺮد ﮐﻪ در ﭼﻨﺪﯾﻦ ﻗﺴﻤﺖ ﺑﺮاي ﺗﺼﺤﯿﺢ ﮐﺪﻫﺎي اوﻟﯿﻪ ﺑﻪ ﻣﺮاﺣﻞ ﻗﺒﻞ ﺑﺎز ﺧﻮاﻫﯿﻢ ﮔﺸﺖ ﮐﻪ در ﻃﺮاﺣﯽ ﺑﻪ‬
‫ﺻﻮرت ﻋﻤﻠﯽ اﯾﻦ اﻣﺮﯾﺴﺖ اﺟﺘﻨﺎب ﻧﺎﭘﺬﯾﺮ ‪.‬‬
‫اﯾﻦ وب ﺳﺎﯾﺖ ﺑﺮ ﻃﺒﻖ اﺳﺘﺎﻧﺪاردﻫﺎي روز ﻃﺮاﺣﯽ وب ﺳﺎﺧﺘﻪ ﺧﻮاﻫﺪ ﺷﺪ و ﺷﻤﺎ اﯾﻦ اﺳﺘﺎﻧﺪاردﻫﺎ را ﺑﻪ ﺳﺎده ﺗﺮﯾﻦ روش و ﺑﻪ ﺻﻮرت ﻋﻤﻠﯽ ﻓﺮا‬
‫ﺧﻮاﻫﯿﺪ ﮔﺮﻓﺖ‪.‬‬
‫ﻣﺘﻦ ﺧﻮد آاﻣﻮز ‪ ،‬ﮐﺪﻫﺎ و ﻓﺎﯾﻞ ﮔﺮاﻓﯿﮑﯽ اﯾﻦ وب ﺳﺎﯾﺖ ﻧﯿﺰ ﺑﺮاي ﺳﻬﻮﻟﺖ در ﯾﺎد ﮔﯿﺮي ﺷﻤﺎ دوﺳﺘﺎن در اﺧﺘﯿﺎر ﺷﻤﺎ ﻗﺮار ﺧﻮاﻫﺪ ﮔﺮﻓﺖ‪.‬‬
‫اﯾﻦ ﺧﻮد آﻣﻮز از ﭼﻬﺎر ﺑﺨﺶ ﺑﻪ ﺻﻮرت زﯾﺮ ﺗﺸﮑﯿﻞ ﺷﺪه اﺳﺖ ‪:‬‬
‫ﻗﺴﻤﺖ اول ‪ :‬ﮔﺮاﻓﯿﮏ وب ﺳﺎﯾﺖ ) ﻃﺮاﺣﯽ ﯾﮏ ﻃﺮح ﭘﯿﺶ ﻓﺮض ﮔﺮاﻓﯿﮑﯽ (‬
‫ﻗﺴﻤﺖ دوم ‪ :‬ﺑﺮش ﻃﺮح ) ﺑﺮش دادن ﺗﺼﺎوﯾﺮ ﺑﺮاي اﺳﺘﻔﺎده در ﮐﺪ ﻫﺎ و ﺻﻔﺤﺎت وب (‬
‫ﻗﺴﻤﺖ ﺳﻮم ‪ :‬ﮐﺪﻫﺎي ‪ ) html‬ﻧﻮﺷﺘﻦ ﮐﺪﻫﺎي ‪ html‬و ﺗﻌﯿﯿﻦ ﺳﺎﺧﺘﺎر ﺻﻔﺤﻪ وب (‬
‫ﻗﺴﻤﺖ ﭼﻬﺎرم ‪ :‬ﮐﺪﻫﺎي ‪ ) css‬ﺷﮑﻞ دﻫﯽ ﮐﺪﻫﺎي ‪ html‬ﺑﺎ اﺳﺘﻔﺎده از ﮐﺪﻫﺎي ‪( css‬‬

‫ﻗﺴﻤﺖ اول – ﮔﺮاﻓﯿﮏ وب ﺳﺎﯾﺖ‬
‫ﻣﺮﺣﻠﻪ اول – ﺑﻪ ﮐﺠﺎ ﺧﻮاﻫﯿﻢ رﺳﺪ ؟‬

‫ﯾﮏ وب ﺳﺎﯾﺖ ﺳﺎده و ﻣﻌﻤﻮﻟﯽ ﺑﺮاي ﻃﺮاﺣﯽ و ﮐﺪ ﻧﻮﯾﺴﯽ در ﻧﻈﺮ ﮔﺮﻓﺘﻪ ﺷﺪه وﻟﯽ ﮐﺎر ﮐﺮدن ﺑﺮ روي اﯾﻦ وب ﺳﺎﯾﺖ ﺑﺴﯿﺎر آﻣﻮزﻧﺪه ﺧﻮاﻫﺪ ﺑﻮد‪.‬‬
‫ﺑﻨﺎﺑﺮاﯾﻦ ﻣﺮاﺣﻞ را دﻧﺒﺎل ﮐﻨﯿﺪ و ﺑﻪ ﺻﻮرت ﻋﻤﻠﯽ ﯾﺎد ﺑﮕﯿﺮﯾﺪ و ﺗﺠﺮﺑﻪ ﮐﻨﯿﺪ‪.‬‬
‫در زﯾﺮ ﻧﻤﺎﯾﯽ ﻧﻬﺎﯾﯽ ﺻﻔﺤﻪ وب ﻣﻮرد ﻧﻈﺮ را ﻣﯽ ﺑﯿﻨﯿﺪ‪.‬‬

‫‪) ٢‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬

‫ﻣﺮﺣﻠﻪ دوم – آﻣﺎده ﺷﺪن ‪:‬‬
‫ﺑﻪ ﭼﻪ ﭼﯿﺰﻫﺎﯾﯽ اﺣﺘﯿﺎج دارﯾﺪ ؟‬
‫ﺳﻌﯽ ﺷﺪه اﺳﺖ ﻣﺮاﺣﻞ ﻃﺮاﺣﯽ و ﮐﺪﻧﻮﯾﺴﯽ اﯾﻦ وب ﺳﺎﯾﺖ ﺑﻪ ﺳﺎده ﺗﺮﯾﻦ روش و ﺑﺮاي اﻓﺮاد ﻣﺒﺘﺪي ﺗﻮﺿﯿﺢ داده ﺷﻮد وﻟﯽ ﺑﺮاي ﺷﺮوع اﺣﺘﯿﺎج ﺑﻪ‬
‫داﻧﺶ ﻣﻘﺪﻣﺎﺗﯽ و آﺷﻨﺎﯾﯽ ﺑﺎ ﺑﺮﺧﯽ از ﻧﺮم اﻓﺰارﻫﺎ دارﯾﺪ‪:‬‬

‫‪) ٣‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬

‫•‬
‫•‬
‫•‬
‫•‬
‫•‬

‫ﻧﺮم اﻓﺰار ﻓﺘﻮ ﺷﺎپ ‪ Photoshop‬ﯾﺎ وﯾﺮاﯾﺸﮕﺮﻫﺎي ﺗﺼﻮﯾﺮ ﻣﺸﺎﺑﻪ‬
‫ﻧﺮم اﻓﺰارﻫﺎي ﺗﻮﻟﯿﺪ ﮐﺪ ﻣﺎﻧﻨﺪ ‪Dreamweaver‬‬
‫آﺷﻨﺎﯾﯽ ﻣﻘﺪﻣﺎﺗﯽ ﺑﺎ ﮐﺪﻫﺎي ‪html‬‬
‫آﺷﻨﺎﯾﯽ ﻣﻘﺪﻣﺎﺗﯽ ﺑﺎ ﮐﺪﻫﺎي ‪Css‬‬
‫اﺳﺘﻔﺎده از وﯾﺮاﯾﺸﮕﺮﻫﺎي اﺳﺘﺎﻧﺪارد ) ‪ – ( FireFox , IE+٧‬در اﯾﻦ ﺧﻮدآﻣﻮز از ‪ FireFox‬اﺳﺘﻔﺎده ﺷﺪه اﺳﺖ‬

‫در ﺻﻮرت ﻧﯿﺎز ﻣﯽ ﺗﻮاﻧﯿﺪ ﺑﻪ وب ﺳﺎﯾﺖ ‪ W٣Schools‬ﻣﺮاﺟﻌﻪ ﻧﻤﺎﯾﯿﺪ و ﻧﮑﺎت آﻣﻮزﻧﺪه ﺑﺴﯿﺎري را ﻓﺮا ﺑﮕﯿﺮﯾﺪ‪.‬‬

‫ﺳﺎﺧﺘﺎر و ﻻﯾﻪ ﻫﺎ‬
‫ﺑﺮاي ﺷﺮوع ﺳﺎﺧﺘﺎر ﺑﺴﯿﺎر ﺳﺎده و ﻋﻤﻮﻣﯽ را در ﻧﻈﺮ ﻣﯿﮕﯿﺮﯾﻢ ﮐﻪ ﺑﺴﯿﺎري از ﺷﻤﺎ دوﺳﺘﺎن ﺑﺎ اﯾﻦ ﺳﺎﺧﺘﺎر آﺷﻨﺎ ﻫﺴﺘﯿﺪ ‪.‬‬
‫‪header, content, sidebar and footer‬‬

‫اﯾﻨﻬﺎ ﻫﺮ ﮐﺪام از اﺟﺰاء ﺗﺸﮑﯿﻞ دﻫﻨﺪه وب ﺳﺎﯾﺖ ﻣﺎ ﺧﻮاﻫﻨﺪ ﺑﻮد و ﻧﺤﻮه ﻗﺮارﮔﯿﺮي و ﺟﺎﯾﮕﺎه آﻧﻬﺎ در وب ﺳﺎﯾﺖ ﺑﺴﯿﺎر ﻣﻬﻢ اﺳﺖ‪.‬‬
‫‪) ۴‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬

‫اﯾﻦ اﯾﺪه ﺧﻮﺑﯽ ﻫﺴﺖ ﮐﻪ ﻗﺒﻞ از ﺷﺮوع ﺑﻪ ﮐﺎر ﮐﺪ ﻧﻮﯾﺴﯽ ﻧﻤﻮﻣﻨﻪ اي از وب ﺳﺎﯾﺖ و ﺻﻔﺤﻪ وب را در ﻧﺮم اﻓﺰارﻫﺎي ﻃﺮاﺣﯽ ﮔﺮاﻓﯿﮑﯽ ﻣﺎﻧﻨﺪ‬
‫ﻓﺘﻮﺷﺎپ ﻃﺮاﺣﯽ ﮐﻨﯿﻢ و ﺳﭙﺲ آن را در ﻧﺮم اﻓﺰارﻫﺎي ﺗﻮﻟﯿﺪ ﺻﻔﺤﺎت وب ﺑﺴﺎزﯾﻢ‪.‬‬

‫ﻣﺮﺣﻠﻪ ﺳﻮم – ﺷﺮوع ﺑﻪ ﮐﺎر ‪:‬‬
‫ﺧﻮب ﺑﺮاي ﺷﺮوع ﺑﻪ ﻣﺤﯿﻂ ﻧﺮم اﻓﺰار ﻓﺘﻮﺷﺎپ ﻣﯽ روﯾﻢ و ﯾﮏ ﺑﺮﮔﻪ ﺑﺎ ﻋﺮض و ﻃﻮل ‪ ١٠٠٠px‬در ‪ ١٢٠٠px‬اﯾﺠﺎد ﻣﯽ ﮐﻨﯿﻢ ‪ .‬در اﯾﻨﺠﺎ ﺳﻌﯽ‬
‫ﺷﺪه ﻋﺮض ﻣﻮرد ﻧﻈﺮ ﺑﯿﺸﺘﺮ از ﻋﺮض واﻗﻌﯽ وب ﺳﺎﯾﺖ در ﻧﻈﺮ ﮔﺮﻓﺘﻪ ﺷﻮد ﺗﺎ ﻣﺤﯿﻂ ﺑﺎز ﺗﺮي ﺑﺮاي ﮐﺎر وﺟﻮد داﺷﺘﻪ ﺑﺎﺷﺪ و در اﻧﺘﻬﺎ اﯾﻦ ﺑﺮﮔﻪ ﺑﻪ‬
‫اﻧﺪازه واﻗﻌﯽ ﺧﻮد در ﺧﻮاﻫﺪ آﻣﺪ‪.‬‬
‫اﮔﺮ ﺑﺎ ﻣﺤﯿﻂ ﻧﺮم اﻓﺰار ﻓﺘﻮﺷﺎپ آﺷﻨﺎﯾﯽ ﮐﺎﻓﯽ داﺷﺘﻪ ﺑﺎﺷﯿﺪ ﮐﺎر ﺑﺎ اﯾﻦ ﺧﻮد آﻣﻮز ﺑﺮاي ﺷﻤﺎ ﺑﺴﯿﺎر راﺣﺖ ﺧﻮاﻫﺪ ﺑﻮد‪ .‬ﺑﺮاي ﺳﻬﻮﻟﺖ در ﮐﺎر از ﺧﻂ ﮐﺶ‬
‫و ﺧﻂ ﻫﺎي ﮐﻤﮑﯽ اﺳﺘﻔﺎده ﻣﯿﮑﻨﯿﻢ ‪ .‬ﻣﻘﯿﺎس ﺧﻂ ﮐﺶ را ﺑﺮاي ‪ Pixel‬ﺗﻨﻈﯿﻢ ﮐﻨﯿﺪ )واﺣﺪ اﻧﺪازه ﮔﯿﺮي در ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ ‪ Pixel‬اﺳﺖ (‪.‬‬

‫‪) ۵‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬

‬ﺑﺎ اﺳﺘﻔﺎده از اﺑﺰارﻫﺎ ) ﮐﻠﯿﺪ ﻣﯿﺎﻧﺒﺮ ‪( U‬‬ ‫ﯾﮏ ﻣﺴﺘﻄﯿﻞ ﺑﻪ ارﺗﻔﺎع ‪ ١٧٠ px‬و ﺑﺎ رﻧﮓ ‪ #٢٣b۶eb‬اﯾﺠﺎد ﮐﻨﯿﺪ ‪ .‬‬ ‫ﯾﮏ ﻣﺴﺘﻄﯿﻞ دﯾﮕﺮ ﻣﺎﻧﻨﺪ ﺗﺼﻮﯾﺮ روي ﻣﺴﺘﻄﯿﻞ اوﻟﯿﻪ ﺧﻮد اﯾﺠﺎد ﮐﻨﯿﺪ ﺑﻪ ارﺗﻔﺎع ‪ ٣٠px‬و رﻧﮓ ‪ ) #۵d۵a۵a‬ﻣﺴﺘﻄﯿﻞ ﺗﯿﺮه رﻧﮓ در ﺑﺎﻻي‬ ‫‪( header‬‬ ‫ﻣﺮﺣﻠﻪ ﭘﻨﺠﻢ – ‪ – Navigation Bar‬ﻧﻮار ﻣﻨﻮﻫﺎ ‪:‬‬ ‫‪) ۶‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ .( ٩٠٠px‬ﺑﻌﺪ ازاﯾﺠﺎد اﯾﻦ دو ﺧﻂ ﮐﻤﮑﯽ ﯾﮏ ﺧﻂ دﯾﮕﺮ در‬ ‫اﻧﺪازه ‪ ۶٣٠px‬اﯾﺠﺎد ﮐﻨﯿﺪ‪ .‬‬ ‫ﻣﺮﺣﻠﻪ ﭼﻬﺎرم – ‪: Header‬‬ ‫ﭘﺲ از ﻧﺸﺎﻧﻪ ﮔﺬاري ﻣﺮزﻫﺎي وب ﺳﺎﯾﺖ در ﻣﺮﺣﻠﻪ ﻗﺒ ﻞ ﺑﻪ ﻗﺴﻤﺖ ‪ Header‬وب ﺳﺎﯾﺖ ﻣﯽ رﺳﯿﻢ ﮐﻪ ﯾﮑﯽ از ﻣﻬﻤﺘﺮﯾﻦ اﺟﺰاء ﺗﺸﮑﯿﻞ دﻫﻨﺪه ﻫﺮ‬ ‫وب ﺳﺎﯾﺖ اﺳﺖ‪ .‬در ﺣﺎل ﺣﺎﺿﺮ ‪ 3‬ﺧﻂ ﮐﻤﮑﯽ در اﯾﻦ ﺑﺮﮔﻪ اﯾﺠﺎد ﺷﺪه اﺳﺖ‪ .‬در ﺣﺎل ﺣﺎﺿﺮ ﻋﺮض وب ﺳﺎﯾﺖ ‪٨٠٠px‬‬ ‫در ﻧﻈﺮ ﮔﺮﻓﺘﻪ ﺷﺪه اﺳﺖ ) ﺑﯿﻦ ﺧﻂ ﮐﻤﮑﯽ روي ‪ ١٠٠px‬و ﺧﻂ ﮐﻤﮑﯽ روي ‪ .‬در ﺻﻮرت ﻧﯿﺎز ﻣﯽ ﺗﻮاﻧﯿﺪ ﺑﺎ ﮐﺸﯿﺪن ﺧﻂ ﻫﺎ و ‪Drag‬‬ ‫ﮐﺮدن آﻧﻬﺎ ﺑﺮ روي ﺧﻂ ﮐﺶ آﻧﻬﺎ را ﭘﺎك ﮐﻨﯿﺪ‪.‫ﻃﺒﻖ ﺗﺼﻮﯾﺮ دو ﺧﻂ ﮐﻤﮑﯽ ﻋﻤﻮدي ﯾﮑﯽ در اﻧﺪازه ‪ ١٠٠px‬و دﯾﮕﺮي در ‪ ٩٠٠px‬اﯾﺠﺎد ﮐﻨﯿﺪ ‪ .‬ﺳﻌﯽ ﮐﻨﯿﺪ ﮐﻪ از ﻧﻮار اﺑﺰار ﻓﺘﻮﺷﺎپ ﺑﺮاي اﻧﺪازه ﮔﺬاري دﻗﯿﻖ اﺟﺰاء و‬ ‫ﻫﻤﭽﻨﯿﻦ ﭼﯿﻨﺶ دﻗﯿﻖ اﺟﺰاء در ﺻﻔﺤﻪ اﺳﺘﻔﺎده ﮐﻨﯿﺪ ‪.‬ﺷﻌﺎر ﺗﺒﻠﯿﻐﺎﺗﯽ ‪ ،‬ﻟﻮﮔﻮ و ﺗﺼﺎوﯾﺮ ﺗﺒﻠﯿﻐﺎﺗﯽ وب ﺳﺎﯾﺖ ﺷﻤﺎ در اﯾﻦ ﻗﺴﻤﺖ ﻗﺮار ﺧﻮاﻫﺪ ﮔﺮﻓﺖ ‪.

‫ﺑﺮاي اﯾﺠﺎد ﻧﻮار ﻣﻨﻮﻫﺎ ﻃﺒﻖ ﺗﺼﻮﯾﺮ ﯾﮏ ﻣﺴﺘﻄﯿﻞ ﺑﺎ ارﺗﻔﺎع ‪ ۶٠px‬اﯾﺠﺎد ﮐﻨﯿﺪ ‪ ،‬در اﺑﺘﺪا رﻧﮓ اﯾﻦ ﻣﺴﺘﻄﯿﻞ ﻣﻬﻢ ﻧﯿﺴﺖ زﯾﺮا ازﮔﺮادﯾﺎﻧﺖ ﻫﺎ ﺑﺮاي‬ ‫زﯾﺒﺎﺗﺮ ﺷﺪن آن اﺳﺘﻔﺎده ﺧﻮاﻫﯿﻢ ﮐﺮد‪ .‬ﺑﺮاي آﺷﻨﺎﯾﯽ ﺑﺎ ﮔﺮادﯾﺎﻧﺖ ﻫﺎ ﻣﯽ ﺗﻮاﻧﯿﺪ ﻣﻄﻠﺐ ﻓﻮق را ﻣﻄﺎﻟﻌﻪ ﻧﻤﺎﯾﯿﺪ‪.‬در اﯾﻨﺠﺎ ارﺗﻔﺎع ‪ ۵٠px‬ﮐﺎﻓﯿﺴﺖ‪ .‬‬ ‫ﻣﺮﺣﻠﻪ ﺷﺸﻢ – ‪: Footer‬‬ ‫ﺑﺮاي اﯾﺠﺎد ‪ footer‬ﻧﯿﺰ از ﯾﮏ ﻣﺴﺘﻄﯿﻞ ﺑﺎ رﻧﮓ ‪ #۵d۵a۵a‬اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪ .‬ﯾﮏ ‪ footer‬ﺧﻮب و‬ ‫اﺳﺘﺎﻧﺪارد ﻧﻘﺶ ﺑﺴﯿﺎر ارزﻧﺪه اي در ﺑﺎﻻ ﺑﺮدن دﺳﺘﺮﺳﯽ ﭘﺬﯾﺮي وب ﺳﺎﯾﺖ و ﺣﺘﯽ زﯾﺒﺎﯾﯽ آن دارد و ﯾﮑﯽ از اﺟﺰاي ﻣﻬﻢ ﯾﮏ وب ﺳﺎﯾﺖ اﺳﺖ ‪.‬‬ ‫‪) ٧‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ .‬‬ ‫اﺳﺘﻔﺎده از ﮔﺮادﯾﺎﻧﺖ در ﻃﺮاﺣﯽ‬ ‫ﭘﺲ از اﯾﺠﺎ د اﯾﻦ ﻣﺴﺘﻄﯿﻞ ‪ ،‬ﮔﺮادﯾﺎﻧﺘﯽ ﺑﺎ اﺳﺘﻔﺎده از رﻧﮓ ‪ #e٢e٣e۴‬ﺗﺎ ‪ #bebdbd‬ﺑﺎ زاوﯾﻪ ‪ ٩٠‬درﺟﻪ اﯾﺠﺎد ﮐﻨﯿﺪ‪.

‬در ﻟﯿﻨﮏ زﯾﺮ ﻣﯽ ﺗﻮاﻧﯿﺪ ﻣﻄﺎﻟﺐ ﻣﻔﯿﺪي را در ﻣﻮرد ﻃﺮاﺣﯽ و اﺳﺘﺎﻧﺪاردﻫﺎي ﯾﮏ ﻟﻮﮔﻮ ﺑﺨﻮاﻧﯿﺪ‪.‬‬ ‫ﺷﻤﺎ ﻣﯽ ﺗﻮاﻧﯿﺪ ﻟﻮﮔﻮي ﺧﻮد را ﺑﻪ ﺻﻮرت ﺟﺪا ﮔﺎﻧﻪ اﯾﺠﺎد ﻧﻤﺎﯾﯿﺪ و در ﻗﺴﻤﺖ ﮐﺪ ﻧﻮﯾﺴﯽ ﺑﻪ ﺷﻤﺎ آﻣﻮزش داده ﺧﻮاﻫﺪ ﺷﺪ ﮐﻪ ﭼﮕﻮﻧﻪ آن را وارد وب‬ ‫ﺳﺎﯾﺖ ﺧﻮد ﻧﻤﺎﯾﯿﺪ‪ .‬‬ ‫‪) ٨‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ .‫ﻣﺮﺣﻠﻪ ﻫﻔﺘﻢ – ‪ – Logo‬ﻟﻮﮔﻮ ‪:‬‬ ‫ﻟﻮﮔﻮ ﯾﮑﯽ از اﺟﺰاء ﻣﻬﻢ ﺗﺸﮑﯿﻞ دﻫﻨﺪه ﯾﮏ وب ﺳﺎﯾﺖ اﺳﺖ ﮐﻪ ﻣﻌﻤﻮﻻ ﺑﺎﯾﺪ ﮔﻮﯾﺎي ﻧﻮع ﻓﻌﺎﻟﯿﺖ و ﺧﺪﻣﺎت وب ﺳﺎﯾﺖ ﺷﻤﺎ ﺑﺎﺷﺪ ‪.‬‬ ‫ﭼﮕﻮﻧﻪ ﻣﯿﺘﻮان ﯾﮏ ﻟﻮﮔﻮي ﺣﺮﻓﻪ اي و ﺗﺎﺛﯿﺮ ﮔﺬار ﺳﺎﺧﺖ؟‬ ‫ﺑﺮاي اﯾﺠﺎد ﻟﻮﮔﻮ ﻃﺒﻖ ﻣﺮاﺣﻞ زﯾﺮ ﻋﻤﻞ ﺷﺪه اﺳﺖ و اﻟﺒﺘﻪ ﺷﻤﺎ ﻧﯿﺰ ﻣﯽ ﺗﻮاﻧﯿﺪ از ﻟﻮﮔﻮي ﻣﻮرد ﻧﻈﺮ ﺧﻮدﺗﺎن اﺳﺘﻔﺎده ﻧﻤﺎﯾﯿﺪ‪.

‫‪) ٩‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ .

‫‪) ١٠‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ .

( LOGO‬‬ ‫•‬ ‫•‬ ‫•‬ ‫•‬ ‫‪Font: Myriad Pro‬‬ ‫‪Style: Bold‬‬ ‫‪Size: ۶٠px‬‬ ‫‪Color: #٣۶٨٠٩a‬‬ ‫‪) ١١‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ .‫ﮐﻠﻤﻪ ﻣﻮرد ﻧﻈﺮ ﺧﻮد را ﺑﺎ اﺳﺘﻔﺎده از ﻣﺸﺨﺼﺎت زﯾﺮ ﺑﺮ روي ﻃﺮح ﻣﯽ ﻧﻮﯾﺴﯿﻢ ) ‪.

‫ﻣﺮﺣﻠﻪ ﻫﺸﺘﻢ – ‪: tagline‬‬ ‫ﺑﺎ اﺳﺘﻔﺎده از ﻣﺸﺨﺼﺎت زﯾﺮ ﺷﻌﺎر ﺗﺒﻠﯿﻐﺎﺗﯽ ﺧﻮد را در ﺟﻠﻮي ﻟﻮﮔﻮي ﻃﺮاﺣﯽ ﺷﺪه ﻣﯽ ﻧﻮﯾﺴﯿﻢ‪.‬‬ ‫•‬ ‫•‬ ‫•‬ ‫•‬ ‫‪Font: Arial‬‬ ‫‪Style: Bold‬‬ ‫‪Size: ٣٠pt‬‬ ‫‪Color: #e۴dfdf‬‬ ‫‪) ١٢‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ .

.‬‬ ‫•‬ ‫•‬ ‫•‬ ‫•‬ ‫‪Font: Arial‬‬ ‫‪Style: Bold‬‬ ‫‪Size: ٣٠pt‬‬ ‫‪Color: #۶٧۶۶۶۶‬‬ ‫ﻣﺮﺣﻠﻪ دﻫﻢ – ﻣﺤﺘﻮﯾﺎت و ﻧﻮﺷﺘﻪ ﻫﺎ ‪:‬‬ ‫ﻣﯽ ﺗﻮان ﺑﺎ ﺗﻮﺟﻪ ﺑﻪ ﺗﺼﺎوﯾﺮ و ﺑﺎ اﺳﺘﻔﺎده از ﻣﺸﺨﺼﺎت زﯾﺮ ﻣﺤﺘﻮﯾﺎت و ﻧﻮﺷﺘﻪ ﻫﺎ را ﻧﯿﺰ در ﺟﺎي ﻣﻨﺎﺳﺐ ﻗﺮار داد ﺗﺎ ﻃﺮﺣﯽ ﮐﻠﯽ و ﭘﯿﺶ ﻓﺮض از‬ ‫ﺻﻔﺤﻪ وب ﺑﺮاي اداﻣﻪ ﮐﺎر ﺑﺪﺳﺖ آﯾﺪ‪.‬‬ ‫اﯾﻦ ﻧﮑﺘﻪ در اﯾﻨﺠﺎ ﻗﺎﺑﻞ ذﮐﺮ اﺳﺖ ﮐﻪ اﯾﺠﺎد ﯾﮏ ﻃﺮح ﮔﺮاﻓﯿﮑﯽ ﻗﺒﻞ از ﺷﺮوع ﮐﺪ ﻧﻮﯾﺴﯽ ﯾﮏ وب ﺳﺎﯾﺖ ﺧﻮﺑﯿﻬﺎي ﻓﺮاواﻧﯽ دارد ﮐﻪ ﺑﻪ ﭼﻨﺪ ﻧﮑﺘﻪ از‬ ‫اﺷﺎره ﻣﯽ ﺷﻮد‬ ‫اﯾﺠﺎد ﯾﮏ ﻧﻘﺸﻪ راه ﺑﺮاي اﯾﻨﮑﻪ ﺑﺪاﻧﯿﻢ ﺑﻪ ﮐﺠﺎ ﺧﻮاﻫﯿﻢ رﺳﯿﺪ‪.‫ﻣﺮﺣﻠﻪ ﻧﻬﻢ – ﻣﻨﻮ ﻫﺎ ‪:‬‬ ‫ﺑﺎ اﺳﺘﻔﺎده از ﻣﺸﺨﺼﺎت زﯾﺮ ﻣﻨﻮ ﻫﺎ را ﺑﺎ اﻧﺪازه و رﻧﮓ ﻣﻮرد ﻧﻈﺮ ﻃﺮاﺣﯽ ﻣﯽ ﮐﻨﯿﻢ‪..‬‬ ‫‪h٢ Header:‬‬ ‫‪) ١٣‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ .‬‬ ‫اﺳﺘﻔﺎده از ﺗﺼﺎوﯾﺮ ﻃﺮح ﮔﺮاﻓﯿﮑﯽ ﺑﺮاي ﺳﺎﺧﺘﻦ وب ﺳﺎﯾﺖ‪.‬؟ (‬ ‫ﮐﺎر ﮐﺮدن ﺑﺮ روي ﯾﮏ ﻃﺮح ﮔﺮاﻓﯿﮑﯽ ﺑﺴﯿﺎر راﺣﺖ ﺗﺮ از ﮐﺪ ﻧﻮﯾﺴﯽ آن اﺳﺖ ﺑﻨﺎﺑﺮاﯾﻦ ﻣﯽ ﺗﻮاﻧﯿﻢ ﺗﻤﺎﻣﯽ اﯾﺪه ﻫﺎ ي ﺧﻮد ﺑﺮاي ﯾﮏ ﺻﻔﺤﻪ وب را در‬ ‫ﯾﮏ ﻃﺮح ﮔﺮاﻓﯿﮑﯽ ﭘﯿﺎده ﻧﻤﺎﯾﯿﻢ و ﺳﭙﺲ ﺑﻪ آﻣﺎده ﺳﺎزي آن ﺑﭙﺮدازﯾﻢ‪.‬‬ ‫رﻓﻊ اﯾﺮاد ﻫﺎ و ﻧﻮاﻗﺺ ﻗﺒﻞ از ﺷﺮوع ﺑﻪ ﮐﺪ ﻧﻮﯾﺴﯽ ) ﻣﺨﺼﻮﺻﺎ ﺑﺮاي ﮐﺎر ﺑﺎ ﻣﺸﺘﺮي ﻫﺎ ‪!.

Font: Arial Style: Bold Size: ٣۶pt Color: #٠e۵d٧a • • • • h٣ Header: Font: Arial Style: Bold Size: ٢۴pt Color: #۴۴۴۴۴۴ • • • • Paragraph: Font: Arial Style: Normal Size: ١۴pt Color: #۵٩۵٨۵٨ Member of TopDesign Group | ITTutorial ( ‫ )آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ‬١۴ • • • • .

‬‬ ‫ﻟﯿﻨﮑﻬﺎ‬ ‫‪) ١۵‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ .‫ﻣﺮﺣﻠﻪ ﯾﺎزدﻫﻢ – ‪: Side Bar‬‬ ‫اﺑﺘﺪا ﻣﺴﺘﻄﯿﻠﯽ ﺑﺎ اﺑﻌﺎد ﻣﺘﻨﺎﺳﺐ و ﺑﺎ رﻧﮓ ‪ #d۴d۶d٣‬ﻫﻤﺮاه ﺑﺎ ﯾﮏ ‪ ) stroke‬ﺧﻂ دور ﻃﺮح در ﻧﺮم اﻓﺰار ‪ ( photoshop‬ﺑﻪ اﻧﺪازه ‪ ١px‬و‬ ‫رﻧﮓ ‪ #bebdbd‬اﯾﺠﺎد ﻧﻤﺎﯾﯿﺪ‪.

‬‬ ‫‪) ١۶‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ .‬‬ ‫‪h٣ Headers:‬‬ ‫•‬ ‫•‬ ‫•‬ ‫•‬ ‫‪Font: Arial‬‬ ‫‪Style: Normal‬‬ ‫‪Size: ٢۴pt‬‬ ‫‪Color: #٠۴۴٠۵۵‬‬ ‫‪List items:‬‬ ‫•‬ ‫•‬ ‫•‬ ‫•‬ ‫‪Font: Arial‬‬ ‫‪Style: Normal‬‬ ‫‪Size: ١٨/١۴pt‬‬ ‫‪Color: #٣٧٣٧٣٧‬‬ ‫‪Button‬‬ ‫ﺑﺮاي ﺳﺎﺧﺖ اﯾﻦ ‪ button‬از ﮔﺮادﯾﺎﻧﺘﯽ ﮐﻪ در ﻃﺮاﺣﯽ ﻟﻮﮔﻮ اﺳﺘﻔﺎده ﺷﺪ ﺑﺎ ﻫﻤﺎن ﺗﺮﮐﯿﺐ رﻧﮓ اﺳﺘﻔﺎده ﺷﺪه اﺳﺖ و در ﻣﺤﯿﻂ اﯾﻦ ‪button‬‬ ‫ﯾﮏ ‪ stroke‬ﺑﻪ اﻧﺪازه ‪ ١px‬و رﻧﮓ ‪ #c٧c٧c٧‬ﻧﯿﺰ اﯾﺠﺎد ﺷﺪه اﺳﺖ‪.‫ﻟﯿﻨﮑﻬﺎ را ﻣﯿﺘﻮان ﺑﺎ ﻣﺸﺨﺼﺎت زﯾﺮ ﺑﻪ راﺣﺘﯽ اﯾﺠﺎد ﻧﻤﻮد‪.

‫ﻣﺮﺣﻠﻪ دوازدﻫﻢ – ﻣﺤﺘﻮﯾﺎت و ﻧﻮﺷﺘﻪ ﻫﺎي ‪: footer‬‬ ‫در اﻧﺘﻬﺎي اﯾﻦ ﺑﺨﺶ ﺑﻪ ﭘﺎﯾﯿﻦ ﺗﺮﯾﻦ ﻧﻘﻄﻪ وب ﺳﺎﯾﺖ ﯾﻌﻨﯽ ‪ footer‬ان ﻣﯽ رﺳﯿﻢ ﮐﻪ ﺑﺎ اﯾﺠﺎد ﯾﮏ ﻣﺴﺘﻄﯿﻞ در ﻣﺮاﺣﻞ ﻗﺒﻞ اﯾﺠﺎد ﺷﺪه اﺳﺖ ﺑﺮاي‬ ‫ﻧﻮﺷﺘﻦ ﻣﺤﺘﻮﯾﺎت و ﮐﺎﻣﻞ ﮐﺮدن اﯾﻦ ﺑﺨﺶ از ﻣﺸﺨﺼﺎت زﯾﺮ ﺑﺮاي ‪ font‬اﺳﺘﻔﺎده ﻣﯽ ﻧﻤﺎﯾﯿﻢ‪.‬‬ ‫•‬ ‫•‬ ‫•‬ ‫•‬ ‫‪Font: Arial‬‬ ‫‪Style: Normal‬‬ ‫‪Size: ١۴pt‬‬ ‫‪Color: #e٠e٢e٢‬‬ ‫‪) ١٧‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ .

‬‬ ‫ﺑﺮاي ﺑﺮش ﺗﺼﺎوﯾﺮ و اﺳﺘﻔﺎده از آﻧﻬﺎ در ﺻﻔﺤﻪ وب روﺷﻬﺎي ﻣﺘﻔﺎوﺗﯽ وﺟﻮد دارد ﮐﻪ در اﯾﻨﺠﺎ ﺳﻌﯽ ﺷﺪه ﺳﺎده ﺗﺮﯾﻦ و در ﻋﯿﻦ ﺣﺎل ﻣﻔﯿﺪ ﺗﺮﯾﻦ‬ ‫روش ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﮔﯿﺮد‪.‬ﺑﺮاي درك ﺑﻬﺘﺮ در اﯾﻦ ﻗﺴﻤﺖ اﺟﺰاء ﺑﻪ ﺻﻮرت ﺟﺪاﮔﺎﻧﻪ ﺑﺮش داده ﻣﯽ ﺷﻮﻧﺪ‪.‬ﺑﺮاي ﺗﺒﺪﯾﻞ اﯾﻦ ﻃﺮح ﺑﻪ ﯾﮏ وب ﺳﺎﯾﺖ ﻧﮑﺎت ﺑﺴﯿﺎر دﯾﮕﺮي ﻧﯿﺰ وﺟﻮد دارد ﮐﻪ ﺳﻌﯽ ﻣﯽ ﺷﻮد ﺑﻪ ﺻﻮرت ﺑﺴﯿﺎر‬ ‫ﺳﺎده ﺑﯿﺎن ﺷﻮد‪.‬ﻟﻮد ﺷﺪن ﺳﺮﯾﻊ ﺗﺼﺎوﯾﺮ ﻫﻤﺮاه ﺑﺎ ﮐﯿﻔﯿﺖ ﻣﻄﻠﻮب آﻧﻬﺎ ‪ ،‬ﺟﻠﻮه ﺧﻮﺑﯽ‬ ‫را ﺑﻪ ﺻﻔﺤﻪ وب ﻣﺎ ﺧﻮاﻫﺪ داد‪ .‬ﺣﺎل ﺑﺎﯾﺪ اﯾﻦ ﻃﺮح را در ﻗﺎﻟﺐ ﯾﮏ ﺻﻔﺤﻪ وب اﯾﺠﺎد ﮐﻨﯿﻢ ‪ ،‬ﯾﮑﯽ از‬ ‫ﻣﻬﻤﺘﺮﯾﻦ ﻧﮑﺎت ﮐﻪ ﺑﺎﯾﺪ در اﯾﻦ ﮐﺎر در ﻧﻈﺮ ﮔﺮﻓﺘﻪ ﺷﻮد ﺣﺠﻢ ﻣﻨﺎﺳﺐ در ﮐﻨﺎر ﮐﯿﻔﯿﺖ ﻣﻄﻠﻮب ﺗﺼﺎوﯾﺮ اﺳﺖ ‪ .‬‬ ‫‪Header‬‬ ‫‪) ١٨‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ .‬ﺑﺮاي ﺑﺮش ﻃﺒﻖ‬ ‫ﺗﺼﺎوﯾﺮ زﯾﺮ ﻋﻤﻞ ﻧﻤﺎﯾﯿﺪ‪ .‬ﺑﻪ اﯾﻦ ﻣﻌﻨﯽ ﮐﻪ ﮐﯿﻔﯿﺖ و ﺣﺠﻢ‬ ‫ﺗﺼﺎوﯾﺮ ﻧﺒﺎﯾﺪ ﻓﺪاي ﯾﮑﺪﯾﮕﺮ ﺷﻮﻧﺪ و ﯾﮏ ﺗﻌﺎدل ﺑﯿﻦ اﯾﻦ دو ﻣﻮﺿﻮع ﺑﺮ ﻗﺮار ﺑﺎﺷﺪ‪ .‬‬ ‫ﻣﺮﺣﻠﻪ ﺳﯿﺰدﻫﻢ – اﺑﺰار ﺑﺮش ‪:‬‬ ‫در اﯾﻦ ﻣﺮﺣﻠﻪ ﻣﯽ ﺗﻮان از اﺑﺰار ‪ Slice‬و ‪ Crop‬ﺑﺮاي ﺑﺮش دادن ﺗﺼﺎوﯾﺮ اﺳﺘﻔﺎده ﮐﺮد و ﻧﻮع ﺑﺮش ﺗﺼﺎوﯾﺮ ﺑﺴﯿﺎر ﻣﻬﻢ اﺳﺖ‪ .‫ﻗﺴﻤﺖ دوم – ﺑﺮش دادن ﻃﺮح‬ ‫در ﺣﺎل ﺣﺎﺿﺮ ﯾﮏ ﻧﻤﺎي ﮐﻠﯽ از وب ﺳﺎﯾﺖ ﺧﻮد را ﻃﺮاﺣﯽ ﮐﺮده اﯾﻢ ‪ .

‬‬ ‫‪Footer‬‬ ‫ﺑﺮاي ﺑﺮش ﺗﺼﺎوﯾﺮ در ﻗﺴﻤﺘﻬﺎي ‪ Footer‬و ‪ button‬ﻧﯿﺰ از ﻫﻤﯿﻦ روش ﺑﺮاي ﺑﺮش اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪ .‫ﯾﮏ ﻧﻮار ﺑﺎرﯾﮏ ﺑﺮاي اﺳﺘﻔﺎده در ﮐﺪﻫﺎي ‪ html‬ﺻﻔﺤﻪ وب از ﻃﺮح ﺟﺪا ﺷﺪه اﺳﺖ و ﺑﺎ ﺗﮑﺮار آن در ﺻﻔﺤﻪ وب در ﺟﻬﺖ اﻓﻘﯽ ﻣﯽ ﺗﻮان ﺑﻪ ﺷﮑﻞ‬ ‫ﻣﻮرد ﻧﻈﺮ رﺳﯿﺪ‪.‬‬ ‫‪) ١٩‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ .‬اﺳﺘﻔﺎده از اﯾﻦ روش ﺑﺎﻋﺚ ﮐﻢ ﺷﺪن‬ ‫ﺣﺠﻢ ﺗﺼﺎوﯾﺮ ﻣﻮرد اﺳﺘﻔﺎده در ﺻﻔﺤﻪ وب و در ﻧﺘﯿﺠﻪ ﺣﺠﻢ ﭘﺎﯾﯿﻦ ﺻﻔﺤﻪ وب و ﻟﻮد ﺷﺪن ﺳﺮﯾﻊ ﺗﺮ ﺻﻔﺤﻪ وب ﻣﯽ ﺷﻮد‪.

‫‪Button‬‬ ‫ﻣﺮﺣﻠﻪ ﭼﻬﺎردﻫﻢ – ذﺧﯿﺮه ﺗﺼﺎوﯾﺮ ﺑﺮاي وب ﺳﺎﯾﺖ ‪:‬‬ ‫‪) ٢٠‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ .

and "selected slices only.‫ﺑﺎ اﺳﺘﻔﺎده از ‪ Save For Web‬ﺑﺮش ﻫﺎ را ﻃﺒﻖ ﺗﺼﻮﯾﺮ ذﺧﯿﺮه ﻣﯽ ﮐﻨﯿﻢ ‪ .‬‬ ‫‪) ٢١‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ .‬‬ ‫"‪"images only".‬در اﯾﻨﺠﺎ از ﻓﺮﻣﺖ ‪ Png ٢۴‬ﺑﺮاي ذﺧﯿﺮه ﺗﺼﺎوﯾﺮ اﺳﺘﻔﺎده ﺷﺪه‬ ‫اﺳﺖ‪.‬‬ ‫ﭘﺲ از ﺗﻨﻈﯿﻤﺎت زﯾﺮ و اﻧﺘﺨﺎب ﻣﺤﻞ ذﺧﯿﺮه ﺳﺎزي ﺗﺼﺎوﯾﺮ آﻧﻬﺎ را ذﺧﯿﺮه ﮐﻨﯿﺪ‪. "default settings".

‬اﯾﻦ ﺗﺼﺎوﯾﺮ در ‪Browser‬ﻫﺎي ‪ FireFox‬ﺑﻪ ﺻﻮرت‬ ‫‪ Transparent‬ﻧﻤﺎﯾﺶ داده ﻣﯽ ﺷﻮﻧﺪ و اﻣﺎ در ‪ IE‬ﻧﻤﺎﯾﺶ آﻧﻬﺎ ﺑﺎ ﻣﺸﮑﻼﺗﯽ ﻫﻤﺮاه اﺳﺖ ﮐﻪ اﻟﺒﺘﻪ ﺑﺎ اﺳﺘﻔﺎده از ﭼﻨﺪ ‪ Script‬ﻗﺎﺑﻞ ﺣﻞ اﺳﺖ ‪.‬اﺳﺘﻔﺎده از ﻓﺮﻣﺖ‬ ‫‪ png‬ﺑﺎ ﭘﺲ زﻣﯿﻨﻪ ‪ Transparent‬ﻣﺸﮑﻼت و ﻣﺰاﯾﺎي ﻣﺨﺘﻠﻔﯽ دارد‪.‬‬ ‫‪) ٢٢‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ .‬ﺑﺮاي ذﺧﯿﺮه ﺳﺎزي و ﺑﺮش ﻟﻮﮔﻮ و آﯾﮑﻮن ﻫﺎ‬ ‫ﺑﻘﯿﻪ اﺟﺰاء در ﻃﺮح ﻓﺘﻮﺷﺎﭘﯽ ﻏﯿﺮ ﻓﻌﺎل ﺷﺪه اﻧﺪ و ﻃﺒﻖ ﺗﺼﺎوﯾﺮ ‪ Background‬ﺑﻪ ﺻﻮرت ‪ Transparent‬در آﻣﺪه اﺳﺖ‪ .‫آﯾﮑﻮن ﻫﺎ و ﻟﻮﮔﻮ ﻧﯿﺰ ﻃﺒﻖ ﺗﺼﺎوﯾﺮ زﯾﺮ و ﺑﺎ اﺳﺘﻔﺎده از روش ﻣﺸﺎﺑﻪ ﺑﻪ ﺻﻮرت ﻣﺠﺰا ذﺧﯿﺮه ﻣﯽ ﺷﻮﻧﺪ‪.

‬‬ ‫‪) ٢٣‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ .‫ﻣﺮﺣﻠﻪ ﭘﺎﻧﺰدﻫﻢ – ﻧﺎﻣﮕﺬاري ‪:‬‬ ‫ﺗﺼﺎوﯾﺮ اﺿﺎﻓﯽ ﺣﺬف ﻣﯽ ﺷﻮﻧﺪ و ﻧﺎﻣﻬﺎي ﻣﻨﺎﺳﺒﯽ ﺑﺮاي ﻗﻄﻌﺎت ﺑﺮش داده ﺷﺪه اﻧﺘﺨﺎب ﻣﯽ ﺷﻮﻧﺪ‪ .‬اﻧﺘﺨﺎب ﻧﺎﻣﻬﺎي ﻣﻨﺎﺳﺐ در راﺣﺘﯽ و اﺳﺘﺎﻧﺪارد ﮐﺎر‬ ‫ﺷﻤﺎ ﺑﺴﯿﺎر ﺗﺎﺛﯿﺮ ﮔﺬار ﻫﺴﺘﻨﺪ‪.

html‬‬ ‫اوﻟﯿﻦ ﻣﺮﺣﻠﻪ اﯾﺠﺎد ﯾﮏ ﺻﻔﺤﻪ ﺑﺎ ﻧﺎم ‪ index‬ﺑﺮاي ﺷﺮوع اﺳﺖ ‪ . js .‬‬ ‫ﻣﺮﺣﻠﻪ ﻫﻔﺪﻫﻢ – ﺳﺎﺧﺘﻦ ﻓﻮﻟﺪر ﻫﺎ ‪:‬‬ ‫اﯾﻦ ﻧﮑﺘﻪ ﺑﺴﯿﺎر ﻣﻬﻢ اﺳﺖ ﮐﻪ ﺷﻤﺎ ﺑﺮاي ﺗﻤﺎﻣﯽ ﻗﺴﻤﺘﻬﺎي وب ﺳﺎﯾﺖ ﺧﻮد ﺑﺮﻧﺎﻣﻪ اي داﺷﺘﻪ ﺑﺎﺷﯿﺪ و از روي آن ﺑﺮﻧﺎﻣﻪ ﺑﻪ ﭘﯿﺶ ﺑﺮوﯾﺪ‪ .‬‬ ‫اﻟﺒﺘﻪ در اﯾﻨﺠﺎ از ﻓﺎﯾﻠﻬﺎي ‪ js‬ﯾﺎ ‪ javascript‬ﺧﺒﺮي ﻧﯿﺴﺖ و اﯾﻦ ﻓﻮﻟﺪر ﺑﻪ ﺻﻮرت ﻧﻤﻮﻧﻪ ﺳﺎﺧﺘﻪ ﺷﺪه اﺳﺖ و در ﻃﺮح ﻣﺎ ﮐﺎرﺑﺮدي ﻧﺪارد‪.w٣.‬اﺳﺘﻔﺎده ﯾﮑﺴﺎن از ﺣﺮوف ﮐﻮﭼﮏ و ﺑﺰرگ‬ ‫ﻧﯿﺰ در ﻧﺎﻣﮕﺬازي ﻓﻮﻟﺪرﻫﺎ و ﺻﻔﺤﺎت وب ﺗﻮﺻﯿﻪ ﻣﯽ ﺷﻮد‪.‬در داﺧﻞ اﯾﻦ ﻓﻮﻟﺪر ﻓﺎﯾﻠﻬﺎي ﻣﺮﺑﻮط ﺑﻪ وب ﺳﺎﯾﺖ ﺷﻤﺎ ﺟﺎي ﺧﻮاﻫﻨﺪ ﮔﺮﻓﺖ‪ .‬‬ ‫‪4.‬ﺷﻤﺎ ﻣﯽ ﺗﻮاﻧﯿﺪ ﺑﺮاي اﯾﺠﺎد و وﯾﺮاﯾﺶ ﮐﺪﻫﺎ از ﻧﺮم اﻓﺰارﻫﺎي دﯾﮕﺮ ﻧﯿﺰ‬ ‫اﺳﺘﻔﺎده ﻧﻤﺎﯾﯿﺪ‪( notepad ).‬ﺑﺴﯿﺎري از وﯾﺮاﯾﺸﮕﺮﻫﺎي ﮐﺪ اﯾﻦ ﺗﮓ ﻫﺎ ي اﺻﻠﯽ و اوﻟﯿﻪ را ﺑﻪ ﺻﻮرت ﭘﯿﺶ‬ ‫ﻓﺮض اﯾﺠﺎد ﻣﯽ ﮐﻨﻨﺪ‪ .‬ﻫﻤﭽﻨﯿﻦ ﻓﻮﻟﺪرﻫﺎي دﯾﮕﺮي ﺑﺎ ﻧﺎم‬ ‫”‪ “css‬و ”‪ “js‬ﺑﺮاي ﻗﺮار ﮔﯿﺮي ﻓﺎﯾﻠﻬﺎي ‪ css‬و ﻫﻤﭽﻨﯿﻦ ”‪ “ JavaScript‬ﺑﺴﺎزﯾﺪ ‪ .org/١٩٩٩/xhtml‬‬ ‫>‪<head‬‬ ‫>‪<meta http-equiv="Content-Type" content="text/html.‬ﺑﻪ ﻃﻮر ﻣﺜﺎل در اﯾﻨﺠﺎ ﺑﺮاي اﻧﺘﺨﺎب ﻧﺎم ﻓﻮﻟﺪرﻫﺎ از ﺣﺮوف ﮐﻮﭼﮏ اﺳﺘﻔﺎده ﺷﺪه اﺳﺖ‪.‬ﻓﻮﻟﺪري ﺑﺎ ﻧﺎم‬ ‫”‪ “images‬در داﺧﻞ اﯾﻦ ﻓﻮﻟﺪر ﺑﺴﺎزﯾﺪ و ﺗﻤﺎﻣﯽ ﺗﺼﺎوﯾﺮ ﻣﺮﺑﻮط ﺑﻪ وب ﺳﺎﯾﺖ را در داﺧﻞ آن ﻗﺮار دﻫﯿﺪ‪ .‬ﺳﻌﯽ ﮐﻨﯿﺪ روﯾﻪ ﯾﮑﺴﺎﻧﯽ را ﺑﺮاي اﻧﺘﺨﺎب ﻧﺎم ﻓﻮﻟﺪر‬ ‫ﻫﺎ و ﺣﺘﯽ ﺻﻔﺤﺎت ﺧﻮد اﻧﺘﺨﺎب ﮐﻨﯿﺪ ﺗﺎ ﻫﺮ ﺷﺨﺼﯽ ﺑﺎ دﯾﺪن اﯾﻦ ﻧﺎﻣﻬﺎ ﻣﺘﻮﺟﻪ ﻣﺤﺘﻮﯾﺎت داﺧﻞ آﻧﻬﺎ ﺷﻮد‪.‬‬ ‫‪2.dtd‬‬ ‫>"‪<html xmlns="http://www.w٣.‬دﺳﺘﻪ ﺑﻨﺪي‬ ‫ﻓﺎﯾﻠﻬﺎي ﺗﺸﮑﯿﻞ دﻫﻨﺪه وب ﺳﺎﯾﺖ و ﺟﺎﯾﮕﯿﺮي آﻧﻬﺎ در ﻓﻮﻟﺪرﻫﺎي ﻣﺨﺘﻠﻒ ﺑﺴﯿﺎر ﻣﻬﻢ اﺳﺖ‪.‫ﻗﺴﻤﺖ ﺳﻮم – ﮐﺪﻫﺎي ‪html‬‬ ‫ﻣﺮﺣﻠﻪ ﺷﺎﻧﺰدﻫﻢ – وﯾﺮاﯾﺸﮕﺮ ﮐﺪ ‪:‬‬ ‫ﺑﺮاي ﺷﺮوع ﺑﻪ ﮐﺎر ﮐﺪﻧﻮﯾﺴﯽ ﺑﺮاي وب ﺳﺎﯾﺖ ﻃﺮاﺣﯽ ﺷﺪه اﺣﺘﯿﺎج ﺑﻪ ﯾﮏ وﯾﺮاﯾﺸﮕﺮ ﮐﺪ دارﯾﻢ ﮐﻪ در اﯾﻨﺠﺎ از ﻧﺮم اﻓﺰار ‪ DreamWeaver‬ﺑﺮاي‬ ‫اﯾﺠﺎد و وﯾﺮاﯾﺶ ﮐﺪﻫﺎ اﺳﺘﻔﺎده ﺷﺪه اﺳﺖ‪ .‬‬ ‫‪3.‬‬ ‫‪) ٢۴‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ . images‬ذﺧﯿﺮه ﻧﻤﺎﯾﯿﺪ و در آدرس دﻫﯽ ﻫﺎ ﺑﺴﯿﺎر دﻗﺖ ﮐﻨﯿﺪ‪.‬‬ ‫ﺻﻔﺤﺎت وب ﺧﻮد را ﻧﯿﺰ در ﻓﻮﻟﺪر اﺻﻠﯽ و در ﮐﻨﺎر ﻓﻮﻟﺪرﻫﺎي ‪ css .‬‬ ‫"‪<!DOCTYPE html PUBLIC "-//W٣C//DTD XHTML ١.‬در زﯾﺮ اﯾﻦ ﺗﮕﻬﺎ را ﻣﻼﺣﻈﻪ ﻣﯽ ﻧﻤﺎﯾﯿﺪ‪.‬‬ ‫ﺑﺮاي ﺷﺮوع ﻓﻮﻟﺪري ﺑﺎ ﻧﺎم ”‪ “Mywebsite‬ﺑﺴﺎزﯾﺪ ‪ .org/TR/xhtml١/DTD/xhtml١-transitional.٠ Transitional//EN‬‬ ‫>"‪"http://www.‬اﺳﺘﻔﺎده از اﯾﻦ ﻧﺮم اﻓﺰار ﺑﺮاي ﭘﯿﺎده ﺳﺎزي و ﺳﺎﺧﺖ ﺻﻔﺤﺎت وب زﯾﺎد ﺳﺨﺖ ﻧﯿﺴﺖ اﻣﺎ اﯾﻦ ﻫﻨﺮ ‪ ،‬ذوق و‬ ‫ﺳﻠﯿﻘﻪ و ﻫﻤﭽﻨﯿﻦ ﺗﮑﻨﯿﮏ اﺳﺖ ﮐﻪ ﻃﺮاﺣﺎن را از ﯾﮑﺪﯾﮕﺮ ﻣﺘﻤﺎﯾﺰ ﻣﯿﮑﻨﺪ‪ .‬‬ ‫ﻣﺮﺣﻠﻪ ﻫﺠﺪﻫﻢ – اﯾﺠﺎد ﺻﻔﺤﻪ ‪: Index. charset=utf-٨" /‬‬ ‫>‪<title>Untitled Document</title‬‬ ‫‪1.‬‬ ‫‪5.

.‬‬ ‫‪7..‬‬ ‫‪2..‬‬ ‫>‪<head‬‬ ‫>‪<meta http-equiv="Content-Type" content="text/html.‬‬ ‫اﺳﺘﻔﺎده ﻣﻨﺎﺳﺐ از ﮐﺪﻫﺎي اﺳﺘﺎﻧﺪارد ﻣﯽ ﺗﻮاﻧﺪ در ﺣﺠﻢ ‪ ،‬زﯾﺒﺎﯾﯽ و راﺣﺘﯽ ﮐﺎر ﺷﻤﺎ ﺗﺎﺛﯿﺮ ﺑﺴﯿﺎري داﺷﺘﻪ ﺑﺎﺷﺪ‪.‬‬ ‫‪) ٢۵‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ . side bar .‬ﻫﻤﺎﻧﻄﻮر ﮐﻪ در ﮐﺪﻫﺎ‬ ‫ﻣﻼﺣﻈﻪ ﻣﯽ ﻧﻤﺎﯾﯿﺪ ﺗﻮﺿﯿﺤﺎﺗﯽ در اﻧﺘﻬﺎي ﻫﺮ ﺗﮓ ﺑﺮاي راﺣﺘﯽ ﮐﺎر ﻗﺮار ﮔﺮﻓﺘﻪ اﺳﺖ‪ div . side bar .‬‬ ‫‪9..‬در اﯾﻦ ﺧﻮد اﻣﻮز ﺗﻼش ﺷﺪه از ﮐﺪﻫﺎي‬ ‫اﺳﺘﺎﻧﺪارد و از روش ‪ ) tableless‬اﺳﺘﻔﺎده از ﺗﮕﻬﺎي ‪ ( div‬ﺑﺮاي ﮐﺪ ﻧﻮﯾﺴﯽ اﺳﺘﻔﺎده ﺷﻮد‪..‬‬ ‫‪9.‬‬ ‫>‪<body‬‬ ‫>"‪<div id="header‬‬ ‫>‪</div><!--end header --‬‬ ‫>"‪<div id="content‬‬ ‫>‪</div><!--end content--‬‬ ‫>"‪<div id="sidebar‬‬ ‫>‪</div><!--end sidebar--‬‬ ‫>"‪<div id="footer‬‬ ‫>‪</div><!--end footer--‬‬ ‫>‪</body‬‬ ‫‪1.‬و ﺑﺮاي ﻣﺨﺎﻃﺒﺎن وب ﺳﺎﯾﺖ ﺷﻤﺎ ﻗﺎﺑﻞ‬ ‫روﯾﺖ ﻧﻤﯽ ﺑﺎﺷﺪ‪ .‬‬ ‫در ﺑﺨﺶ ﻫﺎي اﺑﺘﺪاﯾﯽ ﺗﻮﺿﯿﺢ داده ﺷﺪ ﮐﻪ ﺻﻔﺤﻪ وب ﻣﺎ از ﭼﻨﺪ ﺑﺨﺶ ) ‪ ( header.‬‬ ‫اﯾﻦ روش ﺧﻮﺑﯽ ﺑﺮاي ﺷﺮوع ﮐﺪ ﻧﻮﯾﺴﯽ ﯾﮏ ﺻﻔﺤﻪ وب اﺳﺖ اﻣﺎ ﺑﺮاي اداﻣﻪ راه و اﯾﻨﮑﻪ در ﻣﯿﺎﻧﻪ راه دﭼﺎر ﺳﺮدرﮔﻤﯽ و دوﺑﺎره ﮐﺎري ﻧﺸﻮﯾﻢ اﺑﺘﺪا‬ ‫ﺑﺎﯾﺪ ﻣﺴﯿﺮ ﺧﻮد را ﺗﻌﯿﯿﻦ ﻧﻤﺎﯾﯿﻢ ‪..‬‬ ‫‪8....‬‬ ‫‪10. footer‬و ‪.‬‬ ‫در ﺑﯿﻦ ﺗﮓ ‪ head‬اﻃﻼﻋﺎﺗﯽ در ﻣﻮرد ﺻﻔﺤﻪ وب ﺷﻤﺎ ﻗﺮار ﻣﯽ ﮔﯿﺮد ) ﻣﺎﻧﻨﺪ ﻋﻨﻮان و ﮐﻠﻤﺎت ﮐﻠﯿﺪي و‪ (..‬‬ ‫‪3.‬‬ ‫‪4.‬اﯾﻦ ﺗﮕﻬﺎ در ﺑﺎﻻ ﺑﺮدن رﺗﺒﻪ وب ﺳﺎﯾﺖ ﺷﻤﺎ در ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ ﻧﯿﺰ ﺑﺴﯿﺎر ﻣﻬﻢ ﻫﺴﺘﻨﺪ‪.‬‬ ‫‪5.‬‬ ‫در اﯾﻨﺠﺎ ﺑﺮاي ﺷﺮوع ﻫﺮ ﯾﮏ از اﯾﻦ ﻗﺴﻤﺘﻬﺎ را ﮐﻪ در ﺑﯿﻦ ﺗﮓ ‪ body‬ﻗﺮار دارﻧﺪ ﺑﻪ ﺻﻮرت ﺗﮓ ‪ div‬در ﻧﻈﺮ ﻣﯿﮕﯿﺮﯾﻢ ‪ .‬‬ ‫‪7.‬‬ ‫ﺗﮓ ‪ body‬ﯾﺎ ﻫﻤﺎن ﺑﺪﻧﻪ ﺻﻔﺤﻪ وب ﺷﺎﻣﻞ ﻗﺴﻤﺘﻬﺎﯾﯽ از وب ﺳﺎﯾﺖ ﻣﯽ ﺑﺎﺷﺪ ﮐﻪ ﺑﺮاي ﻣﺨﺎﻃﺒﺎن ﻗﺎﺑﻞ روﯾﺖ اﺳﺖ ﻣﺎﻧﻨﺪ ‪header .‬‬ ‫ﺗﮕﻬﺎي ‪ meta‬ﮐﺎرﺑﺮد ﺑﺴﯿﺎر در ﺻﻔﺤﻪ وب ﺷﻤﺎ دارﻧﺪ ‪ ،‬از ﺟﻤﻠﻪ ﺗﻌﯿﯿﻦ ﻓﺮﻣﺖ ‪ Text‬ﻫﺎ و زﺑﺎن ﺻﻔﺤﻪ وب ‪ ،‬ﮐﻠﻤﺎت ﮐﻠﯿﺪي ‪ ،‬ﺗﻮﺿﯿﺤﺎت در‬ ‫ﻣﻮرد ﻣﺤﺘﻮﯾﺎت ﺻﻔﺤﻪ وب و ‪.‬اﺷﺎره ﮐﺮد‪..‬‬ ‫‪2. charset=utf-٨" /‬‬ ‫>‪<title>MyWebSite</title‬‬ ‫>‪</head‬‬ ‫‪1. content‬‬ ‫‪ .‬‬ ‫‪3..‬‬ ‫‪4.‬‬ ‫‪8. content .‬‬ ‫‪6..‬ﻫﺎ ﻣﺰﯾﺖ ﻫﺎي ﺑﺴﯿﺎري ﻧﺴﺒﺖ ﺑﻪ ‪ table‬ﻫﺎ دارﻧﺪ از‬ ‫ﺟﻤﻠﻪ اﯾﻦ ﻣﺰﯾﺖ ﻫﺎ ﻣﯽ ﺗﻮان ﺑﻪ ﭘﺎﯾﯿﻦ آوردن ﺣﺠﻢ ﺻﻔﺤﺎت ‪ ،‬ﻗﺪرت ﻣﺎﻧﻮر ﺑﯿﺸﺘﺮ ﺑﺮاي ﻃﺮاﺣﺎن و‪ . footer‬ﺗﺸﮑﯿﻞ ﺷﺪه اﺳﺖ ‪.‫>‪</head‬‬ ‫>‪<body‬‬ ‫>‪</body‬‬ ‫>‪</html‬‬ ‫‪6.

‬‬ ‫‪2.‬‬ ‫‪) ٢۶‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ .‬‬ ‫‪7.‬‬ ‫‪10.‬‬ ‫‪3.‫ﻣﻄﺎﺑﻖ ﺗﺼﻮﯾﺮ ﺻﻔﺤﻪ وب را ﺑﻪ دو ﻗﺴﻤﺖ ﻣﺠﺰا ﺑﺎ ﻧﺎﻣﻬﺎي ‪ main‬و ‪ footer‬ﺗﻘﺴﯿﻢ ﻣﯽ ﮐﻨﯿﻢ ) ﮐﺎدر ﺑﻨﻔﺶ رﻧﮓ و آﺑﯽ رﻧﮓ ( در ﺳﯿﺴﺘﻢ ﻫﺎي‬ ‫ﻃﺮاﺣﯽ ‪ tabelless‬ﻣﻌﻤﻮﻻ از ﯾﮏ ﺗﮓ ‪ div‬اﺻﻠﯽ ﺑﻪ ﻋﻨﻮان ﻧﮕﻪ دارﻧﺪه ﺻﻔﺤﻪ )ﻣﺎﻧﻨﺪ ‪ (#main‬اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪.‬‬ ‫‪9.‬‬ ‫‪8.‬‬ ‫‪6.‬‬ ‫‪12.‬‬ ‫‪11.‬‬ ‫>"‪<div id="main‬‬ ‫>"‪<div class="container‬‬ ‫>"‪<div id="header‬‬ ‫‪1.‬‬ ‫‪4.‬‬ ‫‪3.‬‬ ‫‪2.‬‬ ‫در اﯾﻨﺠﺎ ﻣﺤﺘﻮﯾﺎت ‪ div‬ﻫﺎي ‪ #main‬و ‪ #footer‬را ﺑﺮاي ﮐﻨﺘﺮل ﺑﯿﺸﺘﺮ و ﻫﻤﭽﻨﯿﻦ ﻣﺠﺰا ﮐﺮدن آﻧﻬﺎ از ﯾﮏ دﯾﮕﺮ داﺧﻞ ﯾﮏ ‪ div‬دﯾﮕﺮ ﺑﺎ‬ ‫ﻧﺎم ‪ #container‬ﻗﺮار ﻣﯽ دﻫﯿﻢ ‪.‬‬ ‫‪5.‬‬ ‫>‪<body‬‬ ‫>"‪<div id="main‬‬ ‫>"‪<div id="header‬‬ ‫>‪</div><!--end header --‬‬ ‫>"‪<div id="content‬‬ ‫>‪</div><!--end content--‬‬ ‫>"‪<div id="sidebar‬‬ ‫>‪</div><!--end sidebar--‬‬ ‫>‪</div><!--end main--‬‬ ‫>"‪<div id="footer‬‬ ‫>‪</div><!--end footer--‬‬ ‫>‪</body‬‬ ‫‪1.

‬‬ ‫‪8.‫>‪</div><!--end header --‬‬ ‫>"‪<div id="content‬‬ ‫>‪</div><!--end content--‬‬ ‫>"‪<div id="sidebar‬‬ ‫>‪</div><!--end sidebar--‬‬ ‫>‪</div><!--end main container--‬‬ ‫>‪</div><!--end main--‬‬ ‫>"‪<div id="footer‬‬ ‫>"‪<div class="container‬‬ ‫>‪</div><!--end footer container--‬‬ ‫>‪</div><!--end footer--‬‬ ‫‪4.‬‬ ‫‪5.‬‬ ‫‪Header‬‬ ‫اﯾﻦ ﺑﺨﺶ اوﻟﯿﻦ و ﯾﮑﯽ از ﻣﻬﻤﺘﺮﯾﻦ اﺟﺰاء ﺗﺸﮑﯿﻞ دﻫﻨﺪه ﺻﻔﺤﻪ وب اﺳﺖ ﮐﻪ از ‪ Logo .‬‬ ‫‪6.‬ﺳﺎﺧﺘﺎر ﮐﻠﯽ وب ﺳﺎﯾﺖ ﭘﯿﺶ از اﯾﻦ ﺗﻮﺳﻂ ﻧﺮم اﻓﺰار ‪ photoshop‬ﻃﺮاﺣﯽ ﺷﺪه اﺳﺖ ‪.‬‬ ‫‪14.‬‬ ‫‪12.‬‬ ‫‪7.‬‬ ‫ﻣﺮﺣﻠﻪ ﻧﻮزدﻫﻢ – ﺗﮑﻤﯿﻞ ﻣﺤﺘﻮا ‪:‬‬ ‫ﭘﺲ از ﻣﺸﺨﺺ ﺷﺪن ﺳﺎﺧﺘﺎر ﮐﻠﯽ ﺻﻔﺤﻪ وب ﻧﻮﺑﺖ ﺑﻪ ﺗﮑﻤﯿﻞ اﯾﻦ ﺳﺎﺧﺘﺎر و ﺗﮑﻤﯿﻞ ﻣﺤﺘﻮاي ﺻﻔﺤﻪ وب ﺑﺮ ﻃﺒﻖ ﭘﯿﺶ ﻓﺮض ﻫﺎي ﻃﺮاﺣﯽ ﺷﺪه‬ ‫ﻣﯿﺮﺳﺪ ‪ .‬‬ ‫‪9.‬‬ ‫‪10.‬‬ ‫‪) ٢٧‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ .‬‬ ‫‪13. Tagline .‬‬ ‫‪11.‬در اﺑﺘﺪا ﮐﺪﻫﺎ در ﺑﺨﺶ ‪ header‬ﺑﻪ ﺻﻮرت زﯾﺮ ﺧﻮاﻫﻨﺪ ﺑﻮد ‪. Navigation‬ﺗﺸﮑﯿﻞ ﺷﺪه اﺳﺖ )‬ ‫ﻟﻮﮔﻮ ‪ ،‬ﺷﻌﺎر ﺗﺒﻠﯿﻐﺎﺗﯽ و ﻣﻨﻮﻫﺎ ( ‪ .

‬‬ ‫‪6.‬‬ ‫‪4.‬‬ ‫‪9.. . . <h٢> .‬‬ ‫ﺑﺎ ﺗﮑﻤﯿﻞ ﺗﺮ ﺷﺪن اﯾﻦ ﻗﺴﻤﺖ و اﺿﺎﻓﻪ ﻧﻤﻮدن ﻟﻮﮔﻮ ‪ ،‬ﻣﻨﻮﻫﺎ و ﺷﻌﺎر ﺗﺒﻠﯿﻐﺎﺗﯽ ﮐﺪﻫﺎ ﺑﻪ ﺻﻮرت زﯾﺮ ﺗﻐﯿﯿﺮ ﺧﻮاﻫﻨﺪ ﮐﺮد‪.‬‬ ‫‪7.‬‬ ‫ﺑﺮاي ﺳﺎﺧﺖ ﻣﻨﻮﻫﺎ از ﻟﯿﺴﺖ ﻫﺎ و ﯾﺎ ﺗﮕﻬﺎي >‪ <ul‬و >‪ <li‬اﺳﺘﻔﺎده ﺷﺪه اﺳﺖ ﮐﻪ ﮐﺎرﺑﺮدﻫﺎي ﺑﺴﯿﺎر زﯾﺎدي در ﻃﺮاﺣﯽ و ﺳﺎﺧﺖ ﻣﻨﻮﻫﺎي ﮐﺎر آﻣﺪ‬ ‫و ﭘﯿﺸﺮﻓﺘﻪ دارﻧﺪ‪ .‬ﺗﮕﻬﺎي >‪ <a‬در داﺧﻞ ﺗﮕﻬﺎي >‪ <li‬ﻗﺮار ﮔﺮﻓﺘﻪ اﻧﺪ‪.‬‬ ‫ﻣﻘﺪار ادرس ﺗﮕﻬﺎي >‪ <a‬ﺑﺎ ‪ #‬ﻣﺸﺨﺺ ﺷﺪه اﺳﺖ اﯾﻦ ﺑﻪ ﻣﻌﻨﯽ ﻟﯿﻨﮏ ﺷﺪن ﺑﻪ ﺑﺎﻻي ﺻﻔﺤﻪ اﺳﺖ وﺑﺮاي ﺧﺎﻟﯽ ﻧﺒﻮدن ﻣﻘﺪار ‪ href‬از ان‬ ‫اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد و ﮐﺎرﺑﺮدﻫﺎي دﯾﮕﺮي ﻧﯿﺰ دارد‪ ).‬‬ ‫‪5.‬ﺑﺎ ﮐﻠﯿﮏ ﮐﺮدن ﺑﺮ روي ﻟﯿﻨﮑﻬﺎﯾﯽ ﮐﻪ ﻣﻘﺪار ‪ href‬آﻧﻬﺎ ﺑﺎ ‪ #‬ﻣﺸﺨﺺ ﺷﺪه ﺑﻪ ﺑﺎﻻي ﺻﻔﺤﻪ ﻣﯽ‬ ‫روﯾﺪ (‬ ‫‪Content‬‬ ‫در ﻣﺤﺘﻮاي ‪ content‬از ﻧﻮﺷﺘﻪ ﻫﺎي ﻣﺘﻔﺎوت ﺑﺎ رﻧﮕﻬﺎ و اﻧﺪازه ﻫﺎي ﻣﺘﻔﺎوﺗﯽ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد و اﯾﻦ ﻧﮑﺘﻪ را در ﻧﻈﺮ داﺷﺘﻪ ﺑﺎﺷﯿﺪ ﮐﻪ در ﻃﺮاﺣﯽ‬ ‫ﯾﮏ وب ﺳﺎﯾﺖ درﺟﻪ اﻫﻤﯿﺖ ﻫﺮ ﻧﻮﺷﺘﻪ ﺑﺎ اﻧﺪازه ﯾﺎ ‪ Size‬و رﻧﮓ ﯾﮏ ﻧﻮﺷﺘﻪ ﺗﻌﯿﯿﻦ ﻣﯽ ﺷﻮد و ﺑﺮاي اﯾﻦ ﮐﺎر از ﺗﮕﻬﺎي ‪<h١> .‬‬ ‫‪12.‬اﺳﺘﻔﺎده از ‪ Text‬ﻫﺎ ﺑﻪ ﺟﺎي اﺳﺘﻔﺎده ار ﺗﺼﺎوﯾﺮ در ﻃﺮاﺣﯽ ﯾﮏ وب ﺳﺎﯾﺖ ﻣﺰﯾﺖ ﻫﺎي ﺑﺴﯿﺎري دارد‬ ‫و از ان ﺟﻤﻠﻪ ﺷﻨﺎﺧﺘﻪ ﺷﺪن اﯾﻦ ‪ Text‬ﻫﺎ ﺗﻮﺳﻂ ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ اﺳﺖ‪.‬‬ ‫‪13..‬‬ ‫‪10.‬‬ ‫‪14. <p> .‬‬ ‫‪6.‬‬ ‫‪4.‬‬ ‫‪3.‬‬ ‫>"‪<div id="content‬‬ ‫>‪</div><!--end content--‬‬ ‫‪1.‬‬ ‫‪2.‬‬ ‫>‪ <h٣>.‬‬ ‫>"‪<div id="header‬‬ ‫>"‪<div id="logo‬‬ ‫>‪<h١>Logo</h١‬‬ ‫>‪</div‬‬ ‫>"‪<div id="tagline‬‬ ‫>‪<h٣>And a little tagline.‬‬ ‫ﺑﺮاي ﻟﻮﮔﻮ از ﺗﮓ >‪ <h١‬ﮐﻪ ﻣﻌﺮف اﻫﻤﯿﺖ ﻟﻮﮔﻮ اﺳﺖ اﺳﺘﻔﺎده ﺷﺪه اﺳﺖ و ﺑﺮاي ﺷﻌﺎر ﺗﺒﻠﯿﻐﺎﺗﯽ از ﺗﮓ >‪ <h٣‬ﮐﻪ از اﻫﻤﯿﺖ ﮐﻤﺘﺮي ﻧﺴﺒﺖ ﺑﻪ‬ ‫ﺗﮓ >‪ <h١‬ﺑﺮﺧﻮردار اﺳﺖ اﺳﺘﻔﺎده ﻣﯿﮑﻨﯿﻢ ‪ .‬‬ ‫‪2.‫>"‪<div id="header‬‬ ‫>"‪<div id="logo‬‬ ‫>‪</div‬‬ ‫>"‪<div id="tagline‬‬ ‫>‪</div‬‬ ‫>‪</div><!--end header --‬‬ ‫‪1.‬‬ ‫‪8.</h٣‬‬ ‫>‪</div‬‬ ‫>"‪<ul id="menu‬‬ ‫>‪<li><a href="#">Home</a></li‬‬ ‫>‪<li><a href="#">About</a></li‬‬ ‫>‪<li><a href="#">Portfolio</a></li‬‬ ‫>‪<li><a href="#">Contact</a></li‬‬ ‫>‪</ul‬‬ ‫>‪</div><!--end header --‬‬ ‫‪1. <small‬اﺳﺘﻔﺎده ﺷﺪه اﺳﺖ‪.‬‬ ‫‪) ٢٨‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ .‬‬ ‫‪11.‬‬ ‫ﻗﺒﻞ از ﺗﮑﻤﯿﻞ ﻣﺤﺘﻮاي ﺑﺨﺶ اﺻﻠﯽ ﺗﺸﮑﯿﻞ دﻫﻨﺪه ﺻﻔﺤﻪ وب ) ‪ ( #content‬ﮐﺪ ﻫﺎ ﺑﻪ ﺻﻮرت زﯾﺮ ﺧﻮاﻫﻨﺪ ﺑﻮد‪.‬‬ ‫‪2. too.‬‬ ‫‪5.‬‬ ‫‪3.

6. 3. d apibus non nulla. 8. Praesent luctus egestas nisl. Aenean pretium aliquet velit. 10. Mauris id purus turpis. 15. Dolor sit</h٢> <h٣>Nullam vulputate felis id odio interdum nec malesuada mi pretium. 3.gravi da vulputate urna tempus vel.Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus. 11. ‫ ﺧﻮاﻫﯿﻢ رﺳﺪ‬sidebar ‫ ﺑﻪ ﺑﺨﺶ‬content ‫ﺑﻌﺪ از ﻗﺴﻤﺖ‬ <ul> . Nulla suscipit sagittis sodales. 2. 2. Curabitur et ultricies quam.Etiam laoreet ante in purus laoreet id malesuada dui pretium. 6. 9. Mauris id purus turpis.Phasellus consequat arcu eu neque convallis eu vulputat e diam vehicula.‫ﻣﯽ ﺷﻮد‬ 1.<a href="# "> Read More</a></p> </div><!--end news--> </div><!--end content--> Sidebar ‫ ﻫﺮ ﯾﮏ از‬. gravida vulputate urna tempu vel. 8. Aliquam metus arcu. Nulla suscipit sagittis sodales.<a href="# "> Read More</a></p> <h۴>Vestibulum id nulla eu sapien pellentesque</h۴> <small>June ١. <div id="content"> <h٢>Lorem ipsum. 5. 7. 4. </p> <div id="news"> <h٣>Latest Updates</h٣> <h۴>Vestibulum id nulla eu sapien pellentesque</h۴> <small>June ١. 11. Aliquam metus arcu.‫< ﺑﺮاي ﭘﯿﻮﻧﺪ و ﻟﯿﻨﮏ اﺳﺘﻔﺎده ﺷﺪه اﺳﺖ‬a> ‫< ( و در داﺧﻞ اﯾﻦ ﺗﮕﻬﺎ ﻧﯿﺰ از ﺗﮓ‬li> 1.‫ اﯾﻦ ﻣﺘﻦ ﻫﺎ ﻣﻌﻨﯽ و ﻣﻔﻬﻮم ﺧﺎﺻﯽ ﻧﺪارﻧﺪ‬.‫ﭘﺲ از ﺗﮑﻤﯿﻞ ﻣﺤﺘﻮاي اﯾﻦ ﺑﺨﺶ و ﺑﺎ در ﻧﻈﺮ ﮔﺮﻓﺘﻦ ﻗﺴﻤﺘﻬﺎي ﭘﯿﺶ ﻓﺮض ﻣﻮﺟﻮد در ﺻﻔﺤﻪ وب و درﺟﻪ اﻫﻤﯿﺖ آﻧﻬﺎ ﮐﺪﻫﺎي اﯾﻦ ﻗﺴﻤﺖ ﺑﻪ‬ ‫ ﺗﻮﺟﻪ ﮐﻨﯿﺪ ﮐﻪ در ﻃﺮاﺣﯽ ﺻﻔﺤﺎت وب ﺑﻪ ﺻﻮرت ﭘﯿﺶ ﻓﺮض از ﻣﺘﻦ ﻫﺎي ﺑﺨﺼﻮﺻﯽ ﺑﺮاي ﻧﻤﺎﯾﺶ ﺑﻬﺘﺮ ﺻﻔﺤﻪ وب اﺳﺘﻔﺎده‬. 14.Etiam laoreet ante in purus laoreet id malesuada dui pretium. d apibus non nulla. </p> <p>Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. 4. ‫ اﯾﻦ ﺑﺨﺶ ﻃﺒﻖ ﭘﯿﺶ ﻓﺮض از ﺳﻪ ﻗﺴﻤﺖ ﻣﺠﺰا ﺗﺸﮑﯿﻞ ﺷﺪه اﺳﺖ‬. 7. </h٣> <p>Praesent luctus egestas nisl. ٢٠٠٩</small> <p>Ut vel turpis a orci pulvinar tincidunt. In eget venenatis nisl. vitae vehicula eros rhoncus vel. 13. 9. 12.Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus. Aenean pretium aliquet velit. In eget venenatis nisl.Curabitu r et ultricies quam. ‫< و اﺟﺰاء آن ﺗﻮﺳﻂ ﻟﯿﺴﺖ ﻫﺎ ) ﺗﮕﻬﺎي‬h٣> ‫ ﺑﻪ وﺟﻮد ﻣﯽ آﯾﻨﺪ ﮐﻪ ﻋﻨﻮان آن ﺗﻮﺳﻂ ﯾﮏ ﺗﮓ‬div ‫اﯾﻦ ﺳﻪ ﻗﺴﻤﺖ ﺗﻮﺳﻂ ﯾﮏ ﺗﮓ‬ .‫ﺷﮑﻞ زﯾﺮ ﺧﻮاﻫﻨﺪ ﺑﻮد‬ . 5.facilisis quis pellentesque vitae. ٢٠٠٩</small> <p>Ut vel turpis a orci pulvinar tincidunt. 10. <div id="sidebar"> <div id="subscribe"> <h٣>Subscribe!</h٣> <ul> <li><a href="#">Subscribe via RSS</a></li> <li><a href="#">Get Email Updates</a></li> <li><a href="#">Follow us on Twitter</a></li> </ul> </div> <div id="popular"> <h٣>Popular Items</h٣> Member of TopDesign Group | ITTutorial ( ‫ )آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ‬٢٩ . Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. vitae vehicula eros rh oncus vel.facilisis quis pellentesque vitae. Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula.

‫ﻃﺮاﺣﯽ ﻫﺎي ﻣﺪرن ﮐﺎرﺑﺮدﻫﺎي ﺑﺴﯿﺎري ﭘﯿﺪا ﮐﺮده اﺳﺖ‬ 1. 13. ‫ و ﺟﺎن ﮔﺮﻓﺘﻦ‬css ‫اﺳﺖ ﺑﺮاي ﻧﻮﺷﺘﻦ ﮐﺪﻫﺎي‬ Member of TopDesign Group | ITTutorial ( ‫ )آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ‬٣٠ . 23. editor</a></li> <li><a href="#">John Smith. 21. 2. 26. 25. 4. ‫ﺑﻌﺪ از ﺗﮑﻤﯿﻞ ﺗﻤﺎﻣﯽ اﻃﻼﻋﺎت ﭘﯿﺶ ﻓﺮض و ﻧﻮﺷﺘﻦ ﮐﺪﻫﺎي ﻣﺮﺑﻮﻃﻪ ﺻﻔﺤﻪ وب ﻣﺎ ﺑﻪ ﺷﮑﻞ زﯾﺮ ﺑﻪ ﻧﻤﺎﯾﺶ در ﺧﻮاﻫﺪ آﻣﺪ‬ ‫!؟‬. 28. 29.12. 24. 5.. martketing</a></li> </ul> <a href="#">Join Our Team</a> </div> </div><!--end sidebar--> Footer ‫ در ﻗﺴﻤﺖ‬. 14. Mauris id</a></li> <li><a href="#">Lorem ipsum dolor site amet</a></li> <li><a href="#">Proin tempor erat sit tene</a></li> </ul> </div> <div id="contributors"> <h٣>Contributors</h٣> <ul> <li><a href="#">John Smith. 18. 17. 19. freelance writer</a></li> <li><a href="#">Jack McCoy. 27. 16. 15. 22. 3. designer</a></li> <li><a href="#">Lenny Briscoe. 20. 6. <ul> <li><a href="#">Lorem ipsum dolor site amet</a></li> <li><a href="#">Ulvinar tincidunt. ‫ ( را ﻧﯿﺰ ﺗﮑﻤﯿﻞ ﻣﯽ ﻧﻤﺎﯾﯿﻢ‬footer ) ‫ﻗﺒﻞ از اﯾﻨﮑﻪ ﮐﺪ ﻫﺎﯾﯽ را ﮐﻪ ﻧﻮﺷﺘﯿﻢ در داﺧﻞ ﯾﮏ ﻣﺮورﮔﺮ ﺑﺮرﺳﯽ ﮐﻨﯿﻢ آﺧﺮﯾﻦ ﻗﺴﻤﺖ‬ ‫ و ﯾﺎ اﻃﻼﻋﺎت ﺗﻤﺎس ﻗﺮار ﻣﯽ ﮔﯿﺮﻧﺪ ﮐﻪ در وب ﺳﺎﯾﺘﻬﺎﯾﯽ ﺑﺎ‬، ‫ ﺳﯿﺎﺳﺖ ﻫﺎ‬، ‫ ﻟﯿﻨﮑﻬﺎ‬، ‫ ﻣﻌﻤﻮﻻ ﻧﻮﺷﺘﻪ ﻫﺎﯾﯽ در ﻣﻮرد ﻗﻮاﻧﯿﻦ ﮐﭙﯽ راﯾﺖ‬footer . <div id="footer"> <div class="container"> <p>Copyright © ٢٠٠٩ MySite <br /> All Rights Reserved</p> </div><!--end footer container--> </div><!--end footer--> ‫ ﺻﻔﺤﻪ وب ﻣﺎ آﻣﺎده‬.

‫‪) ٣١‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ .

‬‬ ‫در آدرس دﻫﯽ ﺑﻪ ﻧﺎم ﺻﻔﺤﺎت ﻧﯿﺰ دﻗﺖ ﻧﻤﺎﯾﯿﺪ ) ‪ ( MyStyle.‬اﯾﻦ ﮐﺪ در ﻗﺴﻤﺖ ‪ head‬ﻗﺮار ﺧﻮاﻫﺪ ﮔﺮﻓﺖ ‪.‬‬ ‫ﻧﻮع ‪ font‬ﺑﺮاي ﺗﻤﺎﻣﯽ ﺻﻔﺤﻪ وب ﺗﻌﯿﯿﻦ ﺷﺪه اﺳﺖ و ﻋﺮض ﻣﺤﺘﻮﯾﺎت ﺻﻔﺤﻪ وب ﻧﯿﺰ ) ﻃﺒﻖ ﭘﯿﺶ ﻓﺮض اوﻟﯿﻪ ( ‪ ٨٠٠px‬ﺗﻌﯿﯿﻦ ﺷﺪه اﺳﺖ‪.‪. Helvetica.‬در اﯾﻨﺠﺎ از ﯾﮏ ﻓﺎﯾﻞ ﺳﯽ اس اس ﺧﺎرﺟﯽ ) ﻣﺠﺰا ( اﺳﺘﻔﺎده ﺷﺪه اﺳﺖ ﮐﻪ ﺑﻪ‬ ‫وﺳﯿﻠﻪ ﮐﺪﻫﺎي زﯾﺮ ﺑﻪ ﺻﻔﺤﻪ وب ﻟﯿﻨﮏ ﻣﯽ ﺷﻮد‪. margin: ٠ auto‬‬ ‫‪1.‬ﭘﺲ از وارد ﻧﻤﻮدن اﯾﻦ ﮐﺪﻫﺎي ﺳﯽ اس اس ﺻﻔﺤﻪ وب ﺑﻪ ﺻﻮرت زﯾﺮ ﺧﻮاﻫﺪ در‬ ‫آﻣﺪ‪.‬‬ ‫‪2.‬‬ ‫در ‪ class‬ﺗﻌﯿﯿﻦ ﺷﺪه ﺑﺮاي ﺗﮓ ﺑﺎ ﻧﺎم ‪ #Container‬ﻣﻼﺣﻈﻪ ﻣﯽ ﻧﻤﺎﯾﯿﺪ ﮐﻪ ﭘﺲ از ﺗﻌﯿﯿﻦ ‪ margin:٠‬از ‪ auto‬اﺳﺘﻔﺎده ﺷﺪه اﺳﺖ ﮐﻪ‬ ‫ﮐﺎرﺑﺮد آن ‪ center‬ﮐﺮدن اﯾﻦ ‪ div‬در ﻣﺮﮐﺰ ﺻﻔﺤﻪ اﺳﺖ‪ .container { width: ٨٠٠px.‬‬ ‫} . sans-serif‬‬ ‫}.‬‬ ‫ﻣﺮﺣﻠﻪ ﺑﯿﺴﺖ و ﯾﮑﻢ – ‪: CSS Reset‬‬ ‫ﺑﺮاي اﯾﻨﮑﻪ ﺳﺮ و ﺷﮑﻞ اوﻟﯿﻪ اي ﺑﻪ ﺻﻔﺤﻪ وب ﺑﺪﻫﯿﻢ اﺑﺘﺪا ﻋﺮض ﻣﺤﺘﻮﯾﺎت ﺻﻔﺤﻪ وب ) ‪ ( #container‬و ﻫﻤﭽﻨﯿﻦ ﻧﻮع ‪ font‬را ﻣﺸﺨﺺ‬ ‫ﻣﯽ ﮐﻨﯿﻢ‪.‬‬ ‫‪) ٣٢‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ .‫ﻗﺴﻤﺖ ﭼﻬﺎرم – ﮐﺪﻫﺎي ‪css‬‬ ‫ﻣﺮﺣﻠﻪ ﺑﯿﺴﺘﻢ– وارد ﮐﺮدن ﻓﺎﯾﻞ ‪: css‬‬ ‫ﻗﺒﻞ از ﺷﺮوع اﯾﻦ ﻗﺴﻤﺖ ﯾﮏ ﻓﺎﯾﻞ ﺳﯽ اس اس ﺑﺎ ﻧﺎم ”‪ “MyStyle.css‬ﺑﺰرﮔﯽ و ﮐﻮﭼﮑﯽ ﮐﻠﻤﺎت ﮔﺎﻫﯽ دردﺳﺮ ﺳﺎز ﺧﻮاﻫﻨﺪ ﺷﺪ ﺑﻨﺎﺑﺮاﯾﻦ ﺑﻪ اﯾﻦ ﻧﮑﺘﻪ‬ ‫ﻧﯿﺰ ﺗﻮﺟﻪ ﮐﻨﯿﺪ‪.‬ﻓﺎﯾﻠﻬﺎي ﺳﯽ‬ ‫اس اس ﺑﻪ ﭼﻨﺪ روش در ﺻﻔﺤﺎت وب ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﻣﯽ ﮔﯿﺮﻧﺪ ‪ .css‬ﺑﺴﺎزﯾﺪ و آن را داﺧﻞ ﻓﻮﻟﺪر ﻣﺮﺑﻮﻃﻪ ) ‪ ( css‬ﺑﮕﺬارﯾﺪ‪ .css" rel="stylesheet" type="text/css" media="screen" /‬‬ ‫‪1.‪body { font-family: Arial.‬‬ ‫>‪<link href="css/MyStyle.

Css Reset Member of TopDesign Group | ITTutorial ( ‫ )آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ‬٣٣ .

‬‬ ‫‪.‬ﺑﻪ ﺻﻮرت ﭘﯿﺶ ﻓﺮض ‪ padding‬و ‪ margin‬ﻫﺎي ﻣﺘﻔﺎوﺗﯽ‬ ‫را ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﻣﯽ دﻫﻨﺪ ‪ .‬‬ ‫‪3.. h۴. h٢.‬ﺑﻪ دﻟﯿﻞ اﺳﺘﺎﻧﺪارد ﺳﺎزي و ﯾﮑﺴﺎن ﺳﺎزي ﻧﻤﺎﯾﺶ ﺻﻔﺤﺎت وب ﺑﺮاي ﺗﻤﺎﻣﯽ ﻧﻤﺎﯾﺸﮕﺮﻫﺎ ﺗﻤﺎﻣﯽ اﯾﻦ ‪ padding‬و‬ ‫‪ margin‬ﻫﺎ ﺑﻪ ﺻﻮرت ﯾﮑﺴﺎن در ﻣﯽ آﯾﻨﺪ‪.. p. h۶. h١.‬‬ ‫‪2.‬‬ ‫{ ‪#main‬‬ ‫. h۵. ul.jpg) repeat-x‬‬ ‫}‬ ‫‪1. div. img {margin:٠px.‬ﺑﺮاي ﺷﮑﻞ دادن ﺑﻪ اوﻟﯿﻦ ﻗﺴﻤﺖ اﯾﻦ ﺻﻔﺤﻪ وب ) ‪( header‬‬ ‫از ﺗﺼﻮﯾﺮ ﺑﺮش داده ﺷﺪه در ﺑﺨﺶ دوم ﺑﺮاي ﺗﺼﻮﯾﺮﭘﺲ زﻣﯿﻨﻪ اﺳﺘﻔﺎده ﺧﻮاﻫﯿﻢ ﮐﺮد‪. FireFox .‬‬ ‫اﯾﻦ ﺗﺼﻮﯾﺮ درﭘﺲ زﻣﯿﻨﻪ ‪ #main‬ﺑﻪ ﺻﻮرت ﺗﮑﺮار ﻗﺮار ﻣﯽ ﮔﯿﺮد ‪ ،‬ﺑﻪ دﻟﯿﻞ اﯾﻨﮑﻪ ﺧﺎﺻﯿﺖ ﮔﺴﺘﺮش در ﺗﻤﺎﻣﯽ رزوﻟﻮﺷﻦ ﻫﺎ و ﻧﻤﺎﯾﺸﮕﺮﻫﺎ را داﺷﺘﻪ‬ ‫ﺑﺎﺷﺪ‪.Opera .‫ﺑﺴﯿﺎري از ﻧﻤﺎﯾﺸﮕﺮ ﻫﺎي ﺻﻔﺤﺎت وب ) ‪ ( IE .. padding:٠px‬‬ ‫ﻣﺮﺣﻠﻪ ﺑﯿﺴﺖ و دوم – ‪: header‬‬ ‫ﺣﺎﻻ ﻫﻤﻪ ﭼﯿﺰ ﺑﺮاي ﺷﺮوع ﺑﻪ ﺷﮑﻞ دﻫﯽ ﺻﻔﺤﻪ وب از ﺑﺎﻻ ﺑﻪ ﭘﺎﯾﯿﻦ آﻣﺎده اﺳﺖ ‪ .‪background: url(images/header_slice.‪body.‬‬ ‫‪) ٣۴‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ . h٣.1‬‬ ‫} .

png) no-repeat‬‬ ‫.‬ﻋﺪم وﺟﻮد اﯾﻦ ﺗﮓ ﺷﺎﯾﺪ ﺑﻪ ﻧﻈﺮ ﺷﻤﺎ ﻣﺸﮑﻠﯽ را ﺑﺮاي ﺻﻔﺤﻪ وب اﯾﺠﺎد ﻧﻤﯽ ﮐﻨﺪ‬ ‫اﻣﺎ ﻓﻘﻂ در ﻇﺎﻫﺮ‪!.‬ﺗﮓ ﻫﺎي >‪ <h١‬ﯾﮑﯽ از ﻣﻬﻤﺘﺮﯾﻦ‬ ‫ﺗﮕﻬﺎ از ﻧﻈﺮ ﺑﻬﯿﻨﻪ ﺳﺎزي وب ﺳﺎﯾﺖ ﺑﺮاي ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ ﻫﺴﺘﻨﺪ ﮐﻪ در ﺑﺎﻻي ﺻﻔﺤﻪ و ﯾﺎ اﺑﺘﺪاﯾﯽ ﺗﺮﯾﻦ ﺧﻂ در ﺻﻔﺤﻪ وب ﻗﺮار ﻣﯿﮕﯿﺮﻧﺪ ﺗﺎ‬ ‫ﺗﻮﺿﯿﺤﯽ ﻫﺮ ﭼﻨﺪ ﮐﻮﺗﺎه در ﻣﻮرد ﻣﺤﺘﻮﯾﺎت وب ﺳﺎﯾﺖ ﺷﻤﺎ ﺑﺎﺷﻨﺪ‪.‪width: ٢٣۵px‬‬ ‫}‬ ‫‪1.‪background: url(images/logo. ( repeat-x‬در ﺻﻮرت ﺗﻐﯿﯿﺮ ﻋﺮض ﺻﻔﺤﻪ ﻧﻤﺎﯾﺸﮕﺮ و ﯾﺎ رزوﻟﻮﺷﻦ ﻋﺮض ‪ #header‬ﻧﯿﺰ ﺑﻪ ﺻﻮرت ﻫﻤﺎﻫﻨﮓ ﺗﻐﯿﯿﺮ ﻣﯽ ﮐﻨﺪ‪.‬‬ ‫) اﻟﺒﺘﻪ ﺣﺪاﻗﻞ ﻋﺮض اﯾﻦ ﺻﻔﺤﻪ وب ‪ ٨٠٠px‬ﺧﻮاﻫﺪ ﺑﻮد – ‪( #container‬‬ ‫ﻣﺮﺣﻠﻪ ﺑﯿﺴﺖ و ﺳﻮم – ‪: logo‬‬ ‫در ﻣﺮﺣﻠﻪ ﻗﺒﻞ و در ﻗﺴﻤﺖ ﻟﻮﮔﻮ از ﺗﮓ >‪ <h١‬در داﺧﻞ ‪ div‬ﺑﺮاي ﺟﺎﯾﮕﺰﯾﻨﯽ ﻟﻮﮔﻮ اﺳﺘﻔﺎده ﺷﺪ اﺳﺖ ‪ .‬؟‬ ‫اﯾﻦ ﻧﮑﺘﻪ را در ﻧﻈﺮ داﺷﺘﻪ ﺑﺎﺷﯿﺪ اﺳﺘﻔﺎده از ﺗﮑﻨﯿﮑﻬﺎي ﻏﯿﺮ اﺳﺘﺎﻧﺪارد در ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و اﺳﺘﻔﺎده از ﻣﺘﻦ ﻫﺎي ﻣﺨﻔﯽ در ﺻﻔﺤﻪ وب ﺑﺮاي ﮔﻮل‬ ‫زدن ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ از ﭼﺸﻢ ﻋﻨﮑﺒﻮت ﻫﺎي ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ ﻧﺎدﯾﺪه ﻧﻤﯽ ﻣﺎﻧﺪ و ﻣﻤﮑﻦ اﺳﺖ وب ﺳﺎﯾﺖ ﺷﻤﺎ ﺑﺎ ﺗﺤﺮﯾﻢ از ﻃﺮف اﯾﻦ ﻣﻮﺗﻮرﻫﺎي‬ ‫ﺟﺴﺘﺠﻮ ﻣﻮاﺟﻪ ﺷﻮد ‪ .‬‬ ‫‪4.‬‬ ‫‪5.‬‬ ‫‪2.‬ﺑﻨﺎﺑﺮ اﯾﻦ ﻓﮑﺮ اﺳﺘﻔﺎده از ﺗﮑﻨﯿﮑﻬﺎي ﻏﯿﺮ اﺳﺘﺎﻧﺪارد و زﯾﺮﮐﺎﻧﻪ را از ذﻫﻦ ﺧﻮد ﺧﺎرج ﮐﻨﯿﺪ و ﺑﻪ ﻣﺤﺘﻮاي وب ﺳﺎﯾﺖ ﺧﻮد ﺑﭙﺮدازﯾﺪ‪.‬‬ ‫{ ‪#logo‬‬ ‫.‪height: ٨۴px‬‬ ‫.‬‬ ‫ﺑﺮاي ﻗﺮار دادن ﻟﻮﮔﻮ در ﺟﺎي ﭘﯿﺶ ﻓﺮض از ﺗﮑﻨﯿﮏ ﺳﺎده زﯾﺮ اﺳﺘﻔﺎده ﺷﺪه اﺳﺖ‪.‬‬ ‫‪) ٣۵‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ .‫ﻃﺒﻖ ﮐﺪﻫﺎي ﺑﺎﻻ ﻣﻼﺣﻈﻪ ﻣﯽ ﻧﻤﺎﯾﯿﺪ ﮐﻪ ﺗﺼﻮﯾﺮ ‪ header_slice.jpg‬ﺑﻪ ﺻﻮرت اﻓﻘﯽ ﺗﮑﺮار ﻣﯽ ﺷﻮد ﺗﺎ ﺗﻤﺎﻣﯽ ﻋﺮض ﺻﻔﺤﻪ وب را ﭘﻮﺷﺶ‬ ‫دﻫﺪ ) ‪ .‬‬ ‫‪3..

‫در ﺻﻮرت ﺗﻌﯿﯿﻦ ﻧﮑﺮدن اﻧﺪازه ﺑﺮاي ‪ #logo‬ﺗﺼﻮﯾﺮ ﭘﺲ زﻣﯿﻨﻪ ﺑﻪ ﻃﻮر ﮐﺎﻣﻞ ﻧﻤﺎﯾﺶ داده ﻧﺨﻮاﻫﺪ ﺷﺪ‪ .‬‬ ‫‪3.‬ﺗﻔﺎوت‬ ‫اﺳﺘﻔﺎده از ‪ margin‬و ﯾﺎ ‪ padding‬در اﯾﻦ اﺳﺖ ﮐﻪ در ﺻﻮرت اﺳﺘﻔﺎده از ‪ margin‬ﮐﻞ ﻣﺮزﻫﺎي ﺗﮓ ﺟﺎﺑﻪ ﺟﺎ ﺧﻮاﻫﻨﺪ ﺷﺪ و در ﺻﻮرت‬ ‫اﺳﺘﻔﺎده از ‪ padding‬ﻓﻘﻂ ﻣﺤﺘﻮﯾﺎت ﺗﮓ ﺟﺎﺑﻪ ﺟﺎ ﻣﯽ ﺷﻮﻧﺪ و ﻣﺮزﻫﺎي ﺗﮓ در ﺟﺎي ﺧﻮد ﺑﺎﻗﯽ ﺧﻮاﻫﻨﺪ ﻣﺎﻧﺪ‪.‬‬ ‫‪2.‪padding-top: ۴٠px‬‬ ‫}‬ ‫‪1.‬‬ ‫‪3.‬ﺑﻨﺎﺑﺮ اﯾﻦ ﺑﺎ در ﻧﻈﺮ ﮔﺮﻓﺘﻦ اﻧﺪازه ﺗﺼﻮﯾﺮ ‪،‬‬ ‫اﻧﺪازه آن را ﺑﺮاي ‪ #logo‬ﻣﺸﺨﺺ ﻧﻤﻮده اﯾﻢ و ﺑﺮاي ﭘﻨﻬﺎن ﮐﺮدن ﻧﻮﺷﺘﻪ ‪ Logo‬در داﺧﻞ ﺗﮓ >‪ <h١‬از ﮐﺪ زﯾﺮ اﺳﺘﻔﺎده ﻧﻤﻮده اﯾﻢ ‪.‬‬ ‫{ ‪#logo h١‬‬ ‫.‬‬ ‫‪2.‬‬ ‫{ ‪#header‬‬ ‫.‪text-indent: -٩٩٩٩px‬‬ ‫}‬ ‫‪1.‬ﺑﺮاي اﯾﺠﺎد ﻓﺎﺻﻠﻪ در ﺑﺎﻻي ﺻﻔﺤﻪ وب از ﺧﺎﺻﯿﺖ ‪ Padding‬ﺑﺮاي ‪ #header‬اﺳﺘﻔﺎده ﻣﯽ ﻧﻤﺎﯾﯿﻢ ‪ .‬‬ ‫در ﺣﺎل ﺣﺎﺿﺮ ﻧﻤﺎﯾﺶ ﺻﻔﺤﻪ وب ﺑﻪ ﺻﻮرت زﯾﺮ ﺧﻮاﻫﺪ ﺑﻮد‪.‬ﻣﻼﺣﻈﻪ ﻣﯽ ﻧﻤﺎﯾﯿﺪ ﮐﻪ اﺛﺮي از ﻧﻮﺷﺘﻪ ‪ Logo‬در زﯾﺮ ﺗﺼﻮﯾﺮﻟﻮﮔﻮ ﻧﯿﺴﺖ و ﻟﻮﮔﻮ ﺑﻪ‬ ‫ﺑﺎﻻي ﺻﻔﺤﻪ ﭼﺴﺒﯿﺪه اﺳﺖ‪ .‬‬ ‫‪) ٣۶‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ .

‬‬ ‫‪6.‪height: ٨۴px‬‬ ‫.‬‬ ‫‪2.‪float: left‬‬ ‫}‬ ‫‪1.‬ﺧﺎﺻﯿﺖ ‪ float‬ﺑﺎﻋﺚ ﺷﻨﺎور ﺷﺪن ﺗﮕﻬﺎي ‪ div‬در‬ ‫ﺻﻔﺤﻪ وب ‪ .‬‬ ‫ﺑﺎ ﻧﮕﺎﻫﯽ ﺑﻪ ﻃﺮح ﭘﯿﺶ ﻓﺮض ﻃﺮاﺣﯽ ﺷﺪه و ﻧﻮع ﺗﮓ ﻫﺎي ‪ html‬اﺳﺘﻔﺎده ﺷﺪه ﺑﺎﯾﺪ راﻫﯽ ﺑﺮاي ﻗﺮار دادن ﻟﻮﮔﻮ و ﺷﻌﺎر ﺗﺒﻠﯿﻐﺎﺗﯽ در ﮐﻨﺎر ﯾﮑﺪﯾﮕﺮ‬ ‫ﭘﯿﺪا ﻧﻤﻮد ‪ .‬‬ ‫‪5.‬ﺑﺮاي ﺣﻞ اﯾﻦ ﻣﺸﮑﻞ از ﺧﺎﺻﯿﺖ ‪ float‬در ﺗﮕﻬﺎي ‪ div‬اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد‪ .‬‬ ‫{ ‪#logo‬‬ ‫.‬‬ ‫‪4.‫ﻣﺮﺣﻠﻪ ﺑﯿﺴﺖ و ﭼﻬﺎرم – ‪ ) tagline‬ﺷﻌﺎر ﺗﺒﻠﯿﻐﺎﺗﯽ (‪:‬‬ ‫در ﻣﺮﺣﻠﻪ ﻗﺒﻞ در ﻣﻮرد اﺳﺘﻔﺎده از ﺗﮕﻬﺎي >?‪ <h‬و ﻫﻤﭽﻨﯿﻦ ﻣﺰﯾﺖ ﻫﺎي آن ﺑﺤﺚ ﺷﺪ‪ .‬‬ ‫‪) ٣٧‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ .png) no-repeat‬‬ ‫.‬ﺑﺮاي اﯾﺠﺎد ﺷﻌﺎر ﺗﺒﻠﯿﻐﺎﺗﯽ ﺑﻪ ﺻﻮرت ﭘﯿﺶ ﻓﺮض و ﺷﮑﻞ‬ ‫دﻫﯽ ﺑﻪ آن ﻃﺒﻖ ﻣﺮاﺣﻞ زﯾﺮ ﻋﻤﻞ ﻣﯽ ﮐﻨﯿﻢ‪.‬‬ ‫‪3.‪background: url(images/logo.‬و اﻓﺰاﯾﺶ ﻗﺪرت ﻃﺮاﺣﺎن وب ﺑﺮاي اﯾﺠﺎد ﺻﻔﺤﺎت ﺟﺬاب ﺗﺮ ﻣﯽ ﺷﻮد‪.‪width: ٢٣۵px‬‬ ‫.‬‬ ‫ﺑﺮاي ﻗﺮار دادن ﻟﻮﮔﻮ در ﺳﻤﺖ ﭼﭗ ) ‪ ( left‬ﺧﺎﺻﯿﺖ ‪ float‬را ﺑﺎ ﻣﻘﺪار ‪ left‬ﺑﻪ ‪ #logo‬اﺿﺎﻓﻪ ﻣﯽ ﮐﻨﯿﻢ ‪.‬‬ ‫ﺑﺎ ﻧﮕﺎﻫﯽ ﺑﻪ ﺗﺼﻮﯾﺮ ﻣﻼﺣﻄﻪ ﻣﯽ ﻧﻤﺎﯾﯿﺪ ﮐﻪ ‪ div‬ﻫﺎي ‪ tagline‬و ‪ navigation‬از ﭘﺎﯾﯿﻦ ‪ #logo‬ﺑﻪ ﺳﻤﺖ راﺳﺖ آن ﺗﻐﯿﯿﺮ ﻣﻮﻗﻌﯿﺖ داده‬ ‫اﻧﺪ‪.

‬ﻗﺒﻞ از اﺿﺎﻓﻪ ﻧﻤﻮدن ﺧﺎﺻﯿﺖ ‪ float‬ﻣﻼﺣﻈﻪ ﻧﻤﻮده اﯾﺪ ﮐﻪ ﺗﮕﻬﺎي ‪ div‬ﻣﻮرد‬ ‫اﺳﺘﻔﺎده در ‪ header‬ﺻﻔﺤﻪ ﺑﻪ ﺻﻮرت ﭘﻠﻪ اي در زﯾﺮ ﯾﮑﺪﯾﮕﺮ ﻗﺮار ﮔﺮﻓﺘﻪ ﺑﻮدﻧﺪ و ﻫﺮ ﯾﮏ ﻓﻀﺎي اﻃﺮاف ﺧﻮد را ﻧﯿﺰ اﺷﻐﺎل ﻧﻤﻮده و اﺟﺎزه ﻗﺮار‬ ‫ﮔﺮﻓﺘﻦ ﺗﮕﻬﺎي دﯾﮕﺮ را در ﮐﻨﺎر ﺧﻮد ﻧﻤﯽ دادﻧﺪ‪.‫اﺳﺘﻔﺎده از ‪ float‬ﺗﮓ را ﺑﻪ اﻧﺪازه واﻗﻌﯽ ﺧﻮد ﻣﻘﯿﺪ ﻣﯽ ﮐﻨﺪ ‪ .‬‬ ‫‪) ٣٨‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ .

‬‬ ‫‪6.‬‬ ‫} .‬اﯾﻦ ﺗﮑﻨﯿﮏ ﮐﺎرﺑﺮد زﯾﺎدي در ﻃﺮاﺣﯽ ﺻﻔﺤﺎت وب ﺑﺎ اﺳﺘﻔﺎده از ‪ div‬ﻫﺎ دارد‪.</h٣‬‬ ‫>‪</div‬‬ ‫>‪<div style="clear:both"></div‬‬ ‫‪1.‬ﺑﺮاي رﻓﻊ اﯾﻦ ﻣﺸﮑﻞ ﻣﯽ ﺗﻮان از ﺗﮑﻨﯿﮏ زﯾﺮ اﺳﺘﻔﺎده ﻧﻤﻮد‪. too.‪float: left‬‬ ‫.‬‬ ‫‪3.‪padding-left: ٢٠px‬‬ ‫.‬‬ ‫‪) ٣٩‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ .‪#tagline h٣ {font-size: ٣٠px.‬‬ ‫ﺑﻪ ﮐﺪﻫﺎي ‪ html‬ﻣﺮﺣﻠﻪ ﻗﺒﻞ ﺑﺎز ﮔﺮدﯾﺪ و ﯾﮏ ‪ div‬ﺑﺎ ﯾﮏ ﮐﺪ ﺳﯽ اس اس ﮐﻮﭼﮏ ﺑﻪ ﺑﺨﺶ ‪ header‬اﺿﺎﻓﻪ ﻧﻤﺎﯾﯿﺪ ) ﺑﻪ ﺧﻂ ﻫﺸﺘﻢ در‬ ‫ﮐﺪﻫﺎي ﺑﺎﻻ دﻗﺖ ﻧﻤﺎﯾﯿﺪ (‪.‬‬ ‫>"‪<div id="header‬‬ ‫>"‪<div id="logo‬‬ ‫>‪<h١>Logo</h١‬‬ ‫>‪</div‬‬ ‫>"‪<div id="tagline‬‬ ‫>‪<h٣>And a little tagline. color: #e۴dfdf‬‬ ‫‪1.‬‬ ‫‪8.‬‬ ‫ﺳﺮ و ﺷﮑﻞ ﻣﻨﺎﺳﺒﯽ ﺑﻪ رﻧﮓ و اﻧﺪازه ﺷﻌﺎر ﺗﺒﻠﯿﻐﺎﺗﯽ ﺧﻮد ﺑﺪﻫﯿﺪ‪.‪width: ۴٠٠px‬‬ ‫}‬ ‫‪2.‬‬ ‫‪3.‬‬ ‫‪2.‬‬ ‫‪4.‬‬ ‫ﭘﺲ از اﺿﺎﻓﻪ ﻧﻤﻮدن اﯾﻦ ﺧﺎﺻﯿﺖ ﺑﻪ ‪ #tagline‬ﻣﻼﺣﻈﻪ ﻣﯽ ﻧﻤﺎﯾﯿﺪ ﮐﻪ ‪ #navigation‬ﻧﯿﺰ در ﺳﻤﺖ راﺳﺖ ‪ #tagline‬ﻗﺮار ﮔﺮﻓﺘﻪ و ﺗﻐﯿﯿﺮ‬ ‫ﻣﻮﻗﻌﯿﺖ داده اﺳﺖ ‪ .‬‬ ‫‪6.‬‬ ‫‪2.‬‬ ‫‪4.‬‬ ‫‪7.‬‬ ‫‪5.‬‬ ‫و ﺟﺎي آن را ﻃﺒﻖ ﻃﺮح ﭘﯿﺶ ﻓﺮض ﺗﺼﺤﯿﺢ ﮐﻨﯿﺪ‪.‬‬ ‫‪5.‫ﺣﺎل ﺑﺮاي ‪ #tagline‬ﻧﯿﺰ از ﺧﺎﺻﯿﺖ ‪ float:left‬اﺳﺘﻔﺎده ﻣﯽ ﻧﻤﺎﯾﯿﻢ‪.‬‬ ‫{ ‪#tagline‬‬ ‫.‬‬ ‫{ ‪#tagline‬‬ ‫.‪padding-top: ٢٠px‬‬ ‫.‬‬ ‫‪7.‬‬ ‫ﺣﺎل ﻧﮕﺎﻫﯽ ﺑﻪ ﺻﻔﺤﻪ وب ﻣﯽ اﻧﺪازﯾﻢ‪.‪float: left‬‬ ‫}‬ ‫‪1.‬‬ ‫‪3.‬ﺑﺎ اﺳﺘﻔﺎده از ﺧﺎﺻﯿﺖ ) ‪ ( clear:both‬ﺑﺮاي اﯾﻦ ‪ div‬ﺗﻤﺎﻣﯽ ﺗﮓ ﻫﺎي ﭼﭗ و راﺳﺖ ﺑﻪ زﯾﺮ اﯾﻦ ‪ div‬ﺗﻐﯿﯿﺮ‬ ‫ﻣﻮﻗﻌﯿﺖ ﺧﻮاﻫﻨﺪ داد و ﻣﺸﮑﻞ ﺑﺮ ﻃﺮف ﺧﻮاﻫﺪ ﺷﺪ‪ .

‪list-style: none‬‬ ‫}‬ ‫{ ‪ul#menu li a‬‬ ‫.‬‬ ‫در ﻃﺮاﺣﯽ ﻫﺎي اﻣﺮوزي از ﻟﯿﺴﺘﻬﺎ ) ﺗﮕﻬﺎي >‪ ( <li> ، <ul‬ﺑﺮاي ﻃﺮاﺣﯽ ﻣﻨﻮﻫﺎ اﺳﺘﻔﺎده ﻣﯽ ﺷﻮد ‪..‬‬ ‫{ ‪ul#menu‬‬ ‫.‬‬ ‫ﻃﺒﻖ ﮐﺪﻫﺎي ﺑﺎﻻ ﻣﻼﺣﻈﻪ ﻣﯽ ﻧﻤﺎﯾﯿﺪ ﮐﻪ ﺑﺎ اﺳﺘﻔﺎده از ﺧﺼﻮﺻﯿﺖ ‪ list-style : none‬اﺷﮑﺎل ﻣﻮرد اﺳﺘﻔﺎده در ﻟﯿﺴﺖ ﻫﺎ را از ﮐﻨﺎر اﺟﺰاء آن‬ ‫ﺣﺬف ﻧﻤﻮدﯾﻢ و اﻧﺪازه ‪ ،‬رﻧﮓ و‪ .‪text-decoration: none‬‬ ‫}‬ ‫‪1.‪font-size: ٣٠px‬‬ ‫..‬‬ ‫‪) ۴٠‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ .‬را ﺑﺮاي ﻟﯿﻨﮏ ﻫﺎ ﺗﻌﯿﯿﻦ ﮐﺮدﯾﻢ‪.‬‬ ‫ﺑﺎ ﺗﻮﺟﻪ ﺑﻪ ﻣﺮﺣﻠﻪ ﻗﺒﻞ و ‪ navigation‬ﻃﺮاﺣﯽ ﺷﺪه ﺑﻪ ﺻﻮرت ﭘﯿﺶ ﻓﺮض از ﮐﺪﻫﺎي ﺳﯽ اس اس زﯾﺮ ﺑﺮاي ﻃﺮاﺣﯽ ﺳﺎﺧﺘﺎر ‪navigation‬‬ ‫اﺳﺘﻔﺎده ﻣﯽ ﻧﻤﺎﯾﯿﻢ‪.‬‬ ‫‪4.‬‬ ‫‪3.‬‬ ‫‪6.‪color: #۶٧۶۶۶۶‬‬ ‫.‫ﻣﺮﺣﻠﻪ ﺑﯿﺴﺖ و ﭘﻨﺠﻢ– ‪: navigation‬‬ ‫ﻣﻨﻮﻫﺎ ﯾﮑﯽ از ﻣﻬﻤﺘﺮﯾﻦ اﺟﺰاء ﺗﺸﮑﯿﻞ دﻫﻨﺪه ﻫﺮ وب ﺳﺎﯾﺖ ﻫﺴﺘﻨﺪ ﮐﻪ ﻋﻼوه ﺑﺮ اﻓﺰاﯾﺶ زﯾﺒﺎﯾﯽ ﺑﺎﯾﺪ ﺑﻪ دﺳﺘﺮﺳﯽ ﭘﺬﯾﺮي وب ﺳﺎﯾﺖ ﻧﯿﺰ ﮐﻤﮏ ﮐﻨﻨﺪ‬ ‫و اﺳﺘﻔﺎده از آﻧﻬﺎ ﺑﺮاي ﻋﻤﻮم ﻣﺨﺎﻃﺒﺎن ﺑﺴﯿﺎر ﺳﺎده ﺑﺎﺷﺪ‪.‬‬ ‫‪8.‬‬ ‫‪5.‬‬ ‫‪7.‬‬ ‫{ ‪ul#menu li‬‬ ‫‪1.‬‬ ‫‪2.‬‬ ‫ﺑﺮاي ﺷﻨﺎور ﻧﻤﻮدن ‪ #menu‬و ﭼﯿﻨﺶ آن در ﺳﻤﺖ ﭼﭗ از ﺧﺼﻮﺻﯿﺖ ‪ float:left‬ﺑﺮاي ﺗﮕﻬﺎي >‪ <li‬ﻣﻮﺟﻮد در زﯾﺮ ﺷﺎﺧﻪ ‪#menu‬‬ ‫اﺳﺘﻔﺎده ﻣﯽ ﻧﻤﺎﯾﯿﻢ‪.

‫.‬‬ ‫ﺑﺮاي اﯾﺠﺎد ﻓﺎﺻﻠﻪ ﻣﻨﺎﺳﺐ و ﺟﺎﯾﮕﯿﺮي ﻣﻨﻮﻫﺎ در ﺟﺎي ﭘﯿﺶ ﻓﺮض ﮐﺪﻫﺎي ﺳﯽ اس اس ﺑﻪ ﺻﻮرت زﯾﺮ ﺗﺼﺤﯿﺢ ﺧﻮاﻫﻨﺪ ﺷﺪ‪.‬‬ ‫‪4.‬‬ ‫‪5.‬‬ ‫‪6.‬‬ ‫‪4.‬ﺗﮓ ‪ div‬ﺑﺎ ﺧﺼﻮﺻﯿﺖ ‪ clear:both‬اﺿﺎﻓﻪ ﺷﺪه اﺳﺖ (‬ ‫>"‪<ul id="menu‬‬ ‫>‪<li><a href="#">Home</a></li‬‬ ‫>‪<li><a href="#">About</a></li‬‬ ‫>‪<li><a href="#">Portfolio</a></li‬‬ ‫>‪<li><a href="#">Contact</a></li‬‬ ‫>‪</ul‬‬ ‫>‪<div style="clear:both"></div‬‬ ‫>‪</div><!--end header --‬‬ ‫‪1.‬‬ ‫‪7.‬‬ ‫‪2.‬‬ ‫‪) ۴١‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ .‬‬ ‫‪3.‬‬ ‫‪2.‪list-style: none‬‬ ‫.‬‬ ‫‪8.‬‬ ‫‪3.‪float: left‬‬ ‫}‬ ‫‪2.‪padding-top: ۵0px‬‬ ‫}‬ ‫‪1.‬‬ ‫{ ‪ul#menu‬‬ ‫.‬‬ ‫‪3.‬‬ ‫اﮔﺮ ﻧﮕﺎﻫﯽ دوﺑﺎره ﺑﻪ ﺻﻔﺤﻪ وب در ﻣﺮورﮔﺮ ﺧﻮد داﺷﺘﻪ ﺑﺎﺷﯿﻢ ﺧﻮاﻫﯿﻢ دﯾﺪ ﻣﺸﮑﻞ ﻣﺮﺣﻠﻪ ﻗﺒﻞ در اﺳﺘﻔﺎده از ﺧﺎﺻﯿﺖ ‪ ) float‬ﻗﺮار ﮔﺮﻓﺘﻦ اﺟﺰاء‬ ‫ﭘﺎﯾﯿﻨﯽ در ﮐﻨﺎر ‪ ( #menu‬ﺗﮑﺮار ﺷﺪه اﺳﺖ و ﺑﺮاي ﺣﻞ آن از ﺗﮑﻨﯿﮏ ﻣﺮﺣﻠﻪ ﻗﺒﻞ اﺳﺘﻔﺎده ﺧﻮاﻫﯿﻢ ﮐﺮد ‪ ،‬ﺑﻨﺎ ﺑﺮاﯾﻦ ﺑﻪ ﻣﺮﺣﻠﻪ ﮐﺪ ﻧﻮﯾﺴﯽ ‪html‬‬ ‫ﺑﺎز ﻣﯽ ﮔﺮدﯾﻢ و ﮐﺪ ﻫﺎ را ﺑﻪ ﺻﻮرت زﯾﺮ ﺗﻐﯿﯿﺮ ﻣﯽ دﻫﯿﻢ ‪ ) .

‬‬ ‫‪22.‬‬ ‫‪24.‬‬ ‫‪6.‪font-weight: bold‬‬ ‫.‬ﻃﺒﻖ ﮐﺪﻫﺎي ‪ html‬ﻧﻮﺷﺘﻪ ﺷﺪه ﺑﺮاي ﻫﺮ ﯾﮏ از اﯾﻦ ﺗﮕﻬﺎ ﻣﯽ ﺗﻮان ﯾﮏ ‪ style‬ﺧﺎص ﻧﻮﺷﺖ و آﻧﻬﺎ را ﺑﻪ راﺣﺘﯽ ﮐﻨﺘﺮل ﻧﻤﻮد‪.‬‬ ‫‪2.‪color: #٠١۵٨٧٨‬‬ ‫}‬ ‫{ ‪#content h٣‬‬ ‫. Helvetica.‬‬ ‫‪11.‬‬ ‫‪13.‪color: #٣٧٣٧٣٧‬‬ ‫.‪font-size: ١٨px‬‬ ‫.‬‬ ‫‪25.‪padding-left: ٣٠px‬‬ ‫.‬‬ ‫‪26.‪color: #٠f۶c٨d‬‬ ‫.‬‬ ‫‪18.‬‬ ‫‪8..‬ﻓﺎﺻﻠﻪ ﺑﯿﻦ ﭘﺎراﮔﺮاف ﻫﺎ ‪ ،‬ﻋﻨﺎوﯾﻦ ﺑﺎ درﺟﻪ اﻫﻤﯿﺖ‬ ‫ﻣﺘﻔﺎوت و ‪.‬‬ ‫ﻣﺮﺣﻠﻪ ﺑﯿﺴﺖ و ﺷﺸﻢ – ‪: content‬‬ ‫ﻃﺒﻖ ﻃﺮح ﭘﯿﺶ ﻓﺮض در اﯾﻦ ﻗﺴﻤﺖ از ﻓﻮﻧﺖ ﻫﺎي ﻣﺨﺘﻠﻒ ﺑﺎ رﻧﮕﻬﺎ و اﻧﺪازه ﻫﺎي ﻣﺨﺘﻠﻒ ﺑﺮاي ﻧﺸﺎن دادن درﺟﻪ اﻫﻤﯿﺖ ﻣﻄﺎﻟﺐ اﺳﺘﻔﺎده ﺷﺪه‬ ‫اﺳﺖ‪ .‬‬ ‫‪20.‬‬ ‫‪5.‬‬ ‫ﭘﺲ از اﻧﺘﺨﺎب رﻧﮓ ﭘﺲ زﻣﯿﻨﻪ ﻣﻨﺎﺳﺐ ﺑﻪ ﻧﮑﺘﻪ اي دﯾﮕﺮ ﺑﺮاي ﻫﺮ ﭼﻪ ﺑﻬﺘﺮ ﺷﺪن ﺧﻮاﻧﺎﯾﯽ و ﻇﺎﻫﺮ ﺻﻔﺤﻪ وب ﺧﻮاﻫﯿﻢ رﺳﯿﺪ ‪ .‬‬ ‫‪8.‬‬ ‫‪23.‬‬ ‫‪3.‪color: #۵٩۵٨۵٨‬‬ ‫}‬ ‫{ ‪#content small‬‬ ‫.‬‬ ‫{ ‪body‬‬ ‫.‪float: left‬‬ ‫.‬اﯾﻦ ﻧﮑﺘﻪ رﻋﺎﯾﺖ‬ ‫ﻓﻮاﺻﻞ ﻣﻨﺎﺳﺐ ﻣﺎ ﺑﯿﻦ اﺟﺰاء ﺗﺸﮑﯿﻞ دﻫﻨﺪه ﯾﮏ ﺻﻔﺤﻪ وب و در اﯾﻨﺠﺎ ﻣﺎ ﺑﯿﻦ ﻣﺘﻮن اﺳﺖ‪ .‬‬ ‫ﺧﻮاﻧﺎﯾﯽ ﻣﺘﻮن در ﯾﮏ ﺻﻔﺤﻪ وب ﺟﺰﺋﯽ از اﺻﻮل اﺑﺘﺪاﯾﯽ اﺳﺖ ﮐﻪ ﺑﺎ ﻧﮕﺎﻫﯽ ﺑﻪ ﺻﻔﺤﻪ وب ﻣﺘﻮﺟﻪ ﺧﻮاﻫﯿﺪ ﺷﺪ ﮐﻪ ﻫﻨﻮز رﻧﮕﯽ را ﺑﺮاي ﭘﺲ زﻣﯿﻨﻪ‬ ‫ﻣﺤﺘﻮاي ﺻﻔﺤﻪ وب اﻧﺘﺨﺎب ﻧﻨﻤﻮده اﯾﻢ ‪ . sans-serif‬‬ ‫.‪font-size: ١٢px‬‬ ‫..‬‬ ‫‪15.‬‬ ‫‪9.‬‬ ‫‪6.‪text-decoration: none‬‬ ‫}‬ ‫‪1.‬‬ ‫‪21.‪font-weight: normal‬‬ ‫}‬ ‫{ ‪#content p‬‬ ‫.‪color: #٣٧٣٧٣٧‬‬ ‫}‬ ‫{ ‪#content a‬‬ ‫.‬‬ ‫ﻗﺒﻞ از اﻧﺠﺎم ﺗﻐﯿﯿﺮات ﺗﮑﻤﯿﻠﯽ ﺻﻔﺤﻪ وب ﺑﻪ ﺷﮑﻞ زﯾﺮ ﺧﻮاﻫﺪ ﺑﻮد‪.‬‬ ‫ﺧﻮب ﮐﺪﻫﺎي اوﻟﯿﻪ ﺑﺮ ﻃﺒﻖ ﭘﯿﺶ ﻓﺮض ﺑﻪ ﺻﻮرت ﺑﺎﻻ ﺧﻮاﻫﻨﺪ ﺑﻮد و در اداﻣﻪ ﺑﻪ اﺻﻼح وﺗﮑﻤﯿﻞ آﻧﻬﺎ ﺧﻮاﻫﯿﻢ ﭘﺮداﺧﺖ‪.‪width: ٩۵px‬‬ ‫‪5.‪padding-right: ٧۵px‬‬ ‫} .‪font-size: ٢۴px‬‬ ‫..‪background: #ebe٨e٨‬‬ ‫}‬ ‫‪1.‬‬ ‫‪3.‪color: #۴۴۴۴۴۴‬‬ ‫}‬ ‫{ ‪#content h۴‬‬ ‫.‬‬ ‫‪4.‫{ ‪ul#menu li‬‬ ‫.‬‬ ‫‪19.‬‬ ‫{ ‪#content h٢‬‬ ‫..‬رﻧﮓ ﭘﯿﺶ ﻓﺮض ﺳﻔﯿﺪ اﺳﺖ و ﺑﺎ ﺗﻮﺟﻪ ﺑﻪ رﻧﮓ ﺑﻨﺪي ﺻﻔﺤﻪ وب و ﻃﺮح ﭘﯿﺶ ﻓﺮض رﻧﮓ ‪#ebe٨e٨‬‬ ‫را ﺑﺮاي ﺗﮓ ‪ body‬اﻧﺘﺨﺎب ﻣﯽ ﻧﻤﺎﯾﯿﻢ و ﮐﺪﻫﺎي ﺳﯽ اس اس اوﻟﯿﻪ را ﺑﻪ ﺻﻮرت زﯾﺮ ﺗﮑﻤﯿﻞ ﻣﯽ ﻧﻤﺎﯾﯿﻢ‪.‬‬ ‫‪16.‬‬ ‫‪9.‬‬ ‫‪7.‬‬ ‫‪2.‬‬ ‫‪14.‬‬ ‫‪4.‬‬ ‫‪) ۴٢‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ .‪font-size: ١۴px‬‬ ‫.‬‬ ‫‪17.‪font-family: Arial.‬‬ ‫‪10.‬‬ ‫‪12.‪font-size: ٣۶px‬‬ ‫.‬‬ ‫‪7.

‬‬ ‫‪2.‬‬ ‫‪4.‬‬ ‫‪4.‬‬ ‫‪3.‫اﯾﺠﺎد ﻓﺎﺻﻠﻪ ﻣﺎﺑﯿﻦ ‪ navigation‬و ﺗﮓ >‪ <h٢‬ﻋﻨﻮان ﻣﺘﻦ ‪content‬‬ ‫{ ‪#content h٢‬‬ ‫.‪color: #۵٩۵٨۵٨‬‬ ‫.‬‬ ‫‪) ۴٣‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ .‪font-size: ٣۶px‬‬ ‫.‬‬ ‫‪3.‪padding : ٢٠px 0px‬‬ ‫}‬ ‫‪1.‪font-size: ١۴px‬‬ ‫.‪padding-top: ٢۵px‬‬ ‫}‬ ‫‪1.‬‬ ‫‪5.‬‬ ‫‪4.‬‬ ‫اﯾﺠﺎد ﻓﺎﺻﻠﻪ ﻣﺎﺑﯿﻦ ﺗﮓ >‪ <h٢‬و >‪ <h٣‬ﺑﺎ درﺟﺎت اﻫﻤﯿﺖ ﻣﺘﻔﺎوت‪.‬‬ ‫{ ‪#content h٣‬‬ ‫.‪padding-top: ٢٠px‬‬ ‫}‬ ‫‪1.‪color: #۴۴۴۴۴۴‬‬ ‫.‬‬ ‫ﺑﻬﺘﺮ اﺳﺖ ﻧﮕﺎﻫﯽ ﺑﻪ ﻧﺘﯿﺠﻪ ﮐﺎر ﺗﺎ اﯾﻨﺠﺎ داﺷﺘﻪ ﺑﺎﺷﯿﻢ ‪.‬‬ ‫‪5.‬‬ ‫‪2.‬‬ ‫‪2.‬‬ ‫‪5.‪color: #٠١۵٨٧٨‬‬ ‫.‬‬ ‫اﯾﺠﺎد ﻓﺎﺻﻠﻪ ﻣﺎﺑﯿﻦ ﭘﺎراﮔﺮاف >‪ <p‬و >‪<h٣‬‬ ‫{ ‪#content p‬‬ ‫.‪font-size: ٢۴px‬‬ ‫.‬‬ ‫‪3.

‬‬ ‫‪2.‬‬ ‫‪9.‬‬ ‫‪) ۴۴‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ .‬‬ ‫‪3.‪padding-top: ١٠px‬‬ ‫}‬ ‫{ ‪#news h٣‬‬ ‫.‬‬ ‫و ﻧﺘﯿﺠﻪ آن ﺑﻪ ﺻﻮرت زﯾﺮ ﺧﻮاﻫﺪ ﺑﻮد‪.‬‬ ‫‪5.‬‬ ‫‪10.‬‬ ‫‪8.‬‬ ‫{ ‪#news‬‬ ‫.‪padding-bottom: ١۴px‬‬ ‫}‬ ‫‪1.‬‬ ‫‪7.‫ﻃﺒﻖ ﻃﺮح ﭘﯿﺶ ﻓﺮض ﮐﺪﻫﺎي ﺳﯽ اس اس ‪ #news‬را ﻧﯿﺰ ﺑﻪ ﺻﻮرت زﯾﺮ ﻣﯽ ﻧﻮﯾﺴﯿﻢ ‪.‬‬ ‫‪4.‪padding-top: ١٠px‬‬ ‫.‪padding-bottom: ١٠px‬‬ ‫}‬ ‫{ ‪#news p‬‬ ‫.‬‬ ‫‪6.

‬‬ ‫‪2.‪float: left‬‬ ‫}‬ ‫‪1.‬‬ ‫‪7.‬‬ ‫اﮔﺮ ﻫﻢ اﮐﻨﻮن ﻧﮕﺎﻫﯽ ﺑﻪ ﺻﻔﺤﻪ وب ﺧﻮد ﺑﯿﺎﻧﺪازﯾﺪ ﻣﺘﻮﺟﻪ ﻣﺸﮑﻠﯽ ﮐﻪ در ﻣﺮاﺣﻞ ﻗﺒﻞ ﻧﯿﺰ ﺑﺎ ﺗﮓ ﻫﺎي ﺷﻨﺎور داﺷﺘﯿﻢ ﺧﻮاﻫﯿﺪ ﺷﺪ ) ‪ #footer‬ﺑﻪ‬ ‫ﺳﻤﺖ راﺳﺖ ‪ #sidebar‬ﺗﻐﯿﯿﺮ ﻣﮑﺎن داده اﺳﺖ ( و ﺑﺮاي ﺣﻞ آن ﻃﺒﻖ ﻣﺮاﺣﻞ ﻗﺒﻞ از ﯾﮏ ‪ div‬ﺑﺎ ﺧﺼﻮﺻﯿﺖ ‪ clear:both‬در اﻧﺘﻬﺎي‬ ‫‪ #sidebar‬اﺳﺘﻔﺎده ﻣﯽ ﻧﻤﺎﯾﯿﻢ ‪.‬‬ ‫‪4.‬‬ ‫‪7. martketing</a></li‬‬ ‫‪1.‬‬ ‫‪6.‬‬ ‫‪) ۴۵‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ .‪width: ۵١٠px‬‬ ‫. freelance writer</a></li‬‬ ‫>‪<li><a href="#">Jack McCoy.‬‬ ‫‪4.‫ﻣﺮﺣﻠﻪ ﺑﯿﺴﺖ و ﻫﻔﺖ – ‪: Side bar‬‬ ‫ﺑﺮاي اﯾﺠﺎد و ﺳﺮ و ﺷﮑﻞ دادن ﺑﻪ اﯾﻦ ﺟﺰء اﺑﺘﺪا ﻻزم اﺳﺖ ‪ #content‬را ﻃﺒﻖ ﻃﺮح ﭘﯿﺶ ﻓﺮض ﺑﺎ اﺳﺘﻔﺎده از اﻧﺪازه ﻫﺎ ﻣﻘﯿﺪ ﮐﻨﯿﻢ و ﭼﯿﻨﺶ آن‬ ‫را ﺑﺎ اﺳﺘﻔﺎده از ‪ float‬ﺗﻌﯿﯿﻦ ﮐﻨﯿﻢ و آن را ﺑﻪ ﺻﻮرت ﯾﮏ ‪ div‬ﺷﻨﺎور در ﺑﯿﺎورﯾﻢ ﺗﺎ ﺑﺘﻮاﻧﯿﻢ ‪ #sidebar‬را در ﮐﻨﺎر آن ﻗﺮار دﻫﯿﻢ ‪.‪float: left‬‬ ‫}‬ ‫{ ‪#sidebar‬‬ ‫.‬‬ ‫‪6.‬‬ ‫‪5.‬‬ ‫‪2.‬‬ ‫>"‪<div id="contributors‬‬ ‫>‪<h٣>Contributors</h٣‬‬ ‫>‪<ul‬‬ ‫>‪<li><a href="#">John Smith.‬‬ ‫{ ‪#content‬‬ ‫.‬‬ ‫‪3.‬‬ ‫‪5.‬‬ ‫‪3. designer</a></li‬‬ ‫>‪<li><a href="#">Lenny Briscoe. editor</a></li‬‬ ‫>‪<li><a href="#">John Smith.

} ul#subscribe li a { font-size: ١٨px. 10. 22. 23. font-weight: normal. 27. 13. 11. 16. color: #٠۴۴٠۵۵. 14. padding-bottom: ٢٠px. padding: ١۵px. 20. 9. 21. 18. border: ١px solid #BEBDBD. 12. color: #٣٩٣٨٣٨. } #sidebar ul { list-style: none. 6. 4. margin-left: ۵۵px. padding-left: ١۵px. } #sidebar h٣ { font-size: ٢۴px. 3. } Member of TopDesign Group | ITTutorial ( ‫ )آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ‬۴۶ . 7. 2. 29. } ul#subscribe li { padding-bottom: ۵px. 24.‫و ﻫﺪاﯾﺖ ﻣﯽ ﮐﻨﯿﻢ‬ 1. 13. 14. margin-top: ٣۵px. </ul> <a href="#">Join Our Team</a> </div> </div><!--end sidebar--> <div style="clear:both"></div> </div><!--end main container--> </div><!--end main--> ‫ ﺑﻨﺎﺑﺮ اﯾﻦ ﺑﺎ اﺳﺘﻔﺎده از ﮐﺪﻫﺎي ﺳﯽ اس‬، ‫ ﻓﺎﺻﻠﻪ ﻫﺎ و رﻧﮕﻬﺎي ﻣﺨﺘﻠﻒ ﺗﺸﮑﯿﻞ ﺷﺪه اﺳﺖ‬، ‫ از ﺳﻪ ﻗﺴﻤﺖ ﻣﺘﻔﺎوت ﺑﺎ اﻧﺪازه ﻫﺎ‬#sidebar ‫ﺑﺨﺶ‬ ‫ ﻫﺎ در ﻃﺮح ﭘﯿﺶ ﻓﺮض ( آﻧﻬﺎ را ﺑﻪ ﺷﮑﻞ و ﻣﮑﺎن ﭘﯿﺶ ﻓﺮض در ﺧﻮاﻫﯿﻢ آورد‬text ‫اس ﻃﺒﻖ ﻃﺮح ﭘﯿﺶ ﻓﺮض ) ﻣﺸﺨﺼﺎت اﺳﺘﻔﺎده ﺷﺪه ﺑﺮاي‬ . 5. 11. 19. 28. 17. 8.8. 26. 12. background: #d۴d۶d٣. 10. 15. #sidebar { float: left. 25. padding-bottom: ٢۵px. 9. } #sidebar ul li a { font-size: ١۴px.

‬‬ ‫و ﮐﺪﻫﺎي ﺳﯽ اس اس ﺑﺮاي ﻫﺮ ﮐﺪام از اﺟﺰاء‬ ‫{ ‪li#rss‬‬ ‫.‪padding-bottom: ۵px‬‬ ‫.‬‬ ‫>”‪<ul id=”subscribe‬‬ ‫>‪<li id=”rss”><a href=”#”>Subscribe via RSS</a></li‬‬ ‫>‪<li id=”email”><a href=”#”>Get Email Updates</a></li‬‬ ‫>‪<li id=”twitter”><a href=”#”>Follow us on Twitter</a></li‬‬ ‫>‪</ul‬‬ ‫‪1.‬‬ ‫‪3.png) no-repeat‬‬ ‫}‬ ‫‪1.‬‬ ‫‪2.‬‬ ‫ﺳﭙﺲ ﺑﺎ اﻧﺪﮐﯽ ﺗﻐﯿﯿﺮ در ﮐﺪﻫﺎي ‪ html‬اﯾﻦ ﻗﺴﻤﺖ و دادن ‪ id‬ﻫﺎي ﻣﺠﺰا ﺑﺮاي ﮐﻨﺘﺮل ﺑﯿﺸﺘﺮ ﺑﺮ روي اﺟﺰاء آﯾﮑﻮن ﻫﺎ را ﺑﺎ اﺳﺘﻔﺎده از‬ ‫ﺧﺼﻮﺻﯿﺖ ‪ background‬وارد ﻣﯽ ﻧﻤﺎﯾﯿﻢ‪.‬‬ ‫‪4.‬‬ ‫{ ‪ul#subscribe li‬‬ ‫.‬‬ ‫اﺑﺘﺪا ﺑﺎ اﺳﺘﻔﺎده از ‪ Padding‬ﯾﮏ ﻓﻀﺎي ﺧﺎﻟﯽ ﺑﺮاي آﯾﮑﻮن ﻫﺎ در ﺗﮕﻬﺎي >‪ <li‬زﯾﺮ ﺷﺎﺧﻪ ‪ #subscribe‬اﯾﺠﺎد ﻣﯽ ﻧﻤﺎﯾﯿﻢ ‪.‬‬ ‫‪4.‬‬ ‫‪5./images/rss_icon.‬‬ ‫‪2.‬‬ ‫‪3.‫ﻃﺒﻖ ﻃﺮح ﭘﯿﺶ ﻓﺮض از ﺳﻪ آﯾﮑﻮن ﺑﺮاي ﻣﻌﺮﻓﯽ ﺧﺪﻣﺎت وﺑﻼگ اﺳﺘﻔﺎده ﺷﺪه اﺳﺖ ﮐﻪ ﺑﺎ اﺳﺘﻔﺎده از ﮐﺪﻫﺎي ﺳﯽ اس اس آﻧﻬﺎ را در ﺻﻔﺤﻪ وب‬ ‫ﺧﻮد ﺟﺎ ﮔﺬاري ﻣﯽ ﻧﻤﺎﯾﯿﻢ‪.‪background: url(.‪padding-left: ٣5px‬‬ ‫}‬ ‫‪1.‬‬ ‫‪) ۴٧‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ .‬‬ ‫‪3..‬‬ ‫‪2.

‬ﺑﺮاي آدرس دﻫﯽ اﺑﺘﺪا ﯾﮏ رﯾﺸﻪ ﺑﺎﻻ آﻣﺪه و ﺳﭙﺲ در ﻓﻮﻟﺪر ‪ images‬آدرس‬ ‫دﻫﯽ ﻣﯽ ﮐﻨﯿﻢ ‪ .‪margin-left: 14px‬‬ ‫.‬‬ ‫‪7.‬‬ ‫‪5.‪background: url(..‬‬ ‫‪6.‬‬ ‫‪) ۴٨‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ .‬‬ ‫‪5.‬‬ ‫و در اﯾﻨﺠﺎ ﻧﮕﺎﻫﯽ ﺑﻪ ﺻﻔﺤﻪ وب ‪.jpg) repeat-x‬‬ ‫...‬‬ ‫‪4.‬‬ ‫‪6.png) no-repeat‬‬ ‫}‬ ‫‪4.‪color: #٣٩٣٨٣٨‬‬ ‫./images/button_slice.‪padding: ١٣px ٢٣px‬‬ ‫}‬ ‫‪2.‬‬ ‫>‪<a href="#" class="button">Join Our Team</a‬‬ ‫‪1.‬‬ ‫ﺑﻪ آدرس دﻫﯽ ﻫﺎ در ﮐﺪﻫﺎي ﺳﯽ اس اس ﺑﺴﯿﺎر دﻗﺖ ﻧﻤﺎﯾﯿﺪ ‪ ./images/twitter_icon.‬‬ ‫‪3.‬‬ ‫‪9.‬‬ ‫ﻃﺒﻖ ﻃﺮح ﭘﯿﺶ ﻓﺮض ﺟﺎي ‪ button‬ﺳﺒﺰ رﻧﮓ در زﯾﺮ ‪#sidbar‬ﺧﺎﻟﯽ اﺳﺖ ﮐﻪ ﺑﺎ ﻣﻘﺪاري ﺗﺼﺤﯿﺢ در ﮐﺪﻫﺎي ‪ html‬و ﭼﻨﺪ ﺧﻂ ﮐﺪ ﺳﯽ‬ ‫اس اس آن را ﻧﯿﺰ در ﺟﺎي ﻣﻨﺎﺳﺐ ﻗﺮار ﺧﻮاﻫﯿﻢ داد‪.‪background: url(.‬ﺗﻮﺟﻪ داﺷﺘﻪ ﺑﺎﺷﯿﺪ ﮐﻪ ﮐﺪﻫﺎي ﺳﯽ اس اس درﻓﻮﻟﺪر ‪ css‬ﻗﺮار داده ﺷﺪه اﻧﺪ‪.‬‬ ‫ﻃﺒﻖ ﮐﺪﻫﺎي ﺑﺎﻻ ﻣﻼﺣﻈﻪ ﻣﯽ ﻧﻤﺎﯾﯿﺪ ﮐﻪ ﺑﺎ اﺳﺘﻔﺎده از ﻋﻼﻣﺖ ﮔﺬاري ﺗﮓ >‪ <a‬ﺑﺎ اﺳﺘﻔﺎده از ‪ id‬ﮐﻨﺘﺮل ﺑﯿﺸﺘﺮي ﺑﺮ روي آن ﺑﻪ وﺳﯿﻠﻪ ﮐﺪﻫﺎي‬ ‫ﺳﯽ اس اس اﻧﺠﺎم ﺧﻮاﻫﺪ ﮔﺮﻓﺖ‪.‬‬ ‫‪8.‬‬ ‫‪7.png) no-repeat‬‬ ‫}‬ ‫{ ‪li#twitter‬‬ ‫.‫{ ‪li#email‬‬ ‫.‬‬ ‫‪8.button‬‬ ‫.‬‬ ‫{ ‪a.‪text-decoration: none‬‬ ‫./images/email_icon.‪background: url(.

‬‬ ‫ﺑﺎ اﻧﺠﺎم ﺗﺼﺤﯿﺤﺎﺗﯽ در ﮐﺪﻫﺎي ﺳﯽ اس اس ‪ #sidebar‬ﻣﮑﺎن آن را ﺑﻪ دﻗﺖ ﺗﻨﻈﯿﻢ و ﺗﺼﺤﯿﺢ ﻣﯽ ﻧﻤﺎﯾﯿﻢ‪.‫ﺑﺎ اﻧﺪازه ﮔﺬاري دﻗﯿﻖ و اﺳﺘﻔﺎده از ﺧﺼﻮﺻﯿﺖ ﻫﺎي ‪ margin‬و ‪ padding‬ﻣﯽ ﺗﻮاﻧﯿﺪ ﺑﻪ ﺧﻮﺑﯽ ﻣﮑﺎن ﻗﺮار ﮔﯿﺮي اﺟﺰاء را ﺗﻐﯿﯿﺮ دﻫﯿﺪ و ﮐﻨﺘﺮل‬ ‫ﻧﻤﺎﯾﯿﺪ‪.‬‬ ‫‪) ۴٩‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ .

border: ١px solid #BEBDBD. margin-left: ۵۵px. padding: ١۵px ١۵px ٣٠px ١۵px. } . #footer { background: url (. 2. 6. 7. 5.. margin-top: ۴٠px. 3./images/footer_slice. } : footer –‫ﻣﺮﺣﻠﻪ ﺑﯿﺴﺖ و ﻫﺸﺖ‬ ‫ ﺗﺼﻮﯾﺮ‬. 3. 7.‫و در اﻧﺘﻬﺎ ﻫﻤﻪ ﭼﯿﺰ آﻣﺎده اﺳﺖ ﺑﺮاي ﺑﻬﺮه ﺑﺮداري‬ Member of TopDesign Group | ITTutorial ( ‫ )آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ‬۵٠ . 4.‫ ﺗﮑﺮار ﺧﻮاﻫﺪ ﺷﺪ‬#footer ‫ در ﭘﺲ زﻣﯿﻨﻪ‬footer_slice. 6.1. 8. ‫ ﺻﻔﺤﻪ وب دارد و ﻫﻤﺎﻧﻨﺪ ﮔﺬﺷﺘﻪ و ﻣﺮاﺣﻞ ﻗﺒﻞ ﺑﻪ ﺻﻮرت زﯾﺮ ﻋﻤﻞ ﻣﯽ ﻧﻤﺎﯾﯿﻢ‬header ‫اﯾﻦ ﻗﺴﻤﺖ ﻧﯿﺰ ﺷﺒﺎﻫﺖ زﯾﺎدي ﺑﻪ ﺑﺨﺶ‬ . padding-top: ٢٠px. 5. 2. background: #d۴d۶d٣. 4.jpg 1. padding-bottom:۶٠px. #sidebar { float: left.jpg) repeat-x. color: #fff. margin-top: ٣۵px.

‬در ﺻﻮرت ﻣﺸﺎﻫﺪه ﻫﺮ ﮔﻮﻧﻪ اﺷﺘﺒﺎه و ﯾﺎ ﻧﻘﻄﻪ ﻧﻈﺮ‬ ‫ﺗﮑﻤﯿﻠﯽ ﺧﻮﺷﺤﺎل ﻣﯽ ﺷﻮﯾﻢ ﺗﺎ ﺑﺎ ﻣﺎ ﮔﻔﺘﮕﻮ ﮐﻨﯿﺪ ﺣﺘﯽ ﺑﻪ ﺑﻬﺎﻧﻪ ﯾﮏ ﺳﻼم ‪.‬‬ ‫دوم اﯾﻨﮑﻪ ‪ ،‬ﻃﺮاﺣﺎن ﻣﺨﺘﻠﻒ ﺑﺎ ﺳﺒﮏ ﻫﺎ و ﻣﺘﺪ ﻫﺎي ﻣﺨﺘﻠﻔﯽ اﻗﺪام ﺑﻪ ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ ﻣﯽ ﻧﻤﺎﯾﻨﺪ ‪ .‫در اﻧﺘﻬﺎي اﯾﻦ ﺧﻮد آﻣﻮز ﻻزم داﻧﺴﺘﻢ ﺗﺎ ﻧﮑﺎﺗﯽ در ﻣﻮرد ﻃﺮاﺣﯽ ﯾﮏ وب ﺳﺎﯾﺖ را ﺑﻪ ﺻﻮرت ﻋﻤﻠﯽ ﮔﻮﺷﺰد ﮐﻨﻢ ‪.‬روش ﺷﻤﺎ روﺷﯿﺴﺖ ﮐﻪ ﺷﻤﺎ را زودﺗﺮ و ﺑﻬﺘﺮ‬ ‫ﺑﻪ ﻫﺪﻓﺘﺎن ﻧﺰدﯾﮏ ﮐﻨﺪ‪.‬‬ ‫ﻫﯿﭻ ﻃﺮاﺣﯽ از اﺷﺘﺒﺎه ﻣﺒﺮا ﻧﯿﺴﺖ و ﺳﻌﯽ ﺷﺪه در ﻃﻮل اﯾﻦ ﺧﻮد آﻣﻮز از اﺷﺘﺒﺎﻫﺎت اﺟﺘﻨﺎب ﺷﻮد ‪ .‬‬ ‫ﺑﺎ اﻣﯿﺪ ﻣﻮﻓﻘﯿﺖ روز اﻓﺰون‪ .‬اﻣﯿﺮ ﺳﺮوري‬ ‫‪) ۵١‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ .‬‬ ‫اوﻟﯿﻦ ﻧﮑﺘﻪ اﯾﻨﮑﻪ ‪ ،‬ﻃﺮاﺣﯽ وب اﻣﺮﯾﺴﺖ ﺳﻠﯿﻘﻪ اي اﻟﺒﺘﻪ ﺑﺎ ﭼﻬﺎر ﭼﻮب ﻫﺎي ﻣﺸﺨﺺ و اﺳﺘﺎﻧﺪارد ﻫﺎي اوﻟﯿﻪ و ﺷﻤﺎ ﻣﯽ ﺗﻮاﻧﯿﺪ ﺑﺎ داﻧﺶ ﮐﺎﻓﯽ و‬ ‫اﺳﺘﻔﺎده از ﺗﮑﻨﯿﮑﻬﺎي ﻣﻨﺎﺳﺐ اﯾﺪه ﻫﺎي ﺧﻮدﺗﺎن را در ﻏﺎﻟﺐ ﯾﮏ وب ﺳﺎﯾﺖ ﭘﯿﺎده ﺳﺎزي ﻧﻤﺎﯾﯿﺪ‪.

‫‪) ۵٢‬آﻣﻮزش ﻃﺮاﺣﯽ وب ﺳﺎﯾﺖ و ﻧﺮم اﻓﺰارھﺎی ﮔﺮاﻓﯿﮑﯽ ( ‪Member of TopDesign Group | ITTutorial‬‬ .