CSS,HTML

 

طراحی وب سايت  CSS,HTML

 

    امروز تصميم به طراحی  وب سايت  ساده با CSS,HTML گرفتم ولي نه به عنوان نمونه کار بلکه براي آموزش ، من اين کار رو از الف شروع مي کنم و همراه طراحي به توضيحات در مورد نکات مهم که تو اين تالار مشکل عمده افراد هست مي پردازم ، اين آموزش براي افرادي مفيد خواهد بودکه دوست دارندطراحی  وب سايت  با استفاده از استانداردهاي جهاني انجام بدهند ، به دليل کمي وقت اضافه من سعي دارم اين وب سايت رو در پروسه زماني 1 هفته اي براي دوستان عزيز کامل کنم ودر اين اين هروز يک قسمت از اين طرح رو طراحي و کد نويسي مي کنيم ، پيشنهادم براي کساني که تمايل دارند به خوبي ياد بگيرند هر روز همراه با من شروع به طراحي مجدد اين سايت کنند در اين آموزش فرض بر آن است که کاربران عزيز مختصر در مورد html,css آشنايي دارند کد نويسي در اين آموزش بسيار ساده و قابل درک خواهد بود.

 

    شروع کار:

    بهتره قبل از شروع کردن به کد نويسي با استفاده از چشم خود به طرح هاي مختلف به کارهاي هم موضوع با کار ما چه خارج و چه داخل ايران توجه کنيم ، رنگ بندي ها رو ببينيم ، نحوه جايگذاري المنت ها ، جزئيات اضافه شده و هرآن چه که به ذهنمان خطور مي کند.

    خوب فکر کنم بعد از اين کار يک ذهنيتي از چيزي که مي خواهيم تو ذهنمون پديدار شده خوب توسط فتوشاپ و يا هر نرم افزار گرافيکي که به آن مسلط هستيد شروع به ترسيم ذهنيت خودتان بکنيد.

    من طرحي رو که فايلش رو در پايين ضميمه کردم با استفاده از خلاقيت ذهني خودم طراحي کردم و برش هاي لازم نيز داده شده لازم به ذکر هست که من توانايي طراحي با فتوشاپ رو دارم اين طرح رو با فتوشاپ به صورت لايه لايه پياده سازي کردم شايد بعضي از دوستان به برنامه هاي ديگري مسلط باشند.

    خوب پس اولين کار طراحی  وب سايت  در محيط گرافيکي و دومين کار برش تصاوير..

    ما بايد طوري برش دهيم که ميزان استفاده عکس رو در صفحه وب کاهش دهيم و بيشتر از رنگ در صفحه وب استفاده کنيم.فايل psd زير را دانلود کنيد و به برش ها و نحوه مرتب کردن لايه ها دقت کنيد.ما براي طراحي وب سايت فقط به قسمت هاي برش داده شده نياز خواهيم داشت.

    نکات ضروري :

    1- تکه هاي برش داده شده را با پسوند png 24 ذخيره مي کنيم.

    2- اندازه اي که من در فتوشاپ در نظر گرفتم 1000px در عرض و براي طول هم کمي بيشتر چون در دفرم شدن تاثيري ندارد 1500px در نظر گرفته ام.

    3- در زمان طراحی  وب سايت  شايد ايده هاي جديدي داشته باشيم که در پست هاي آينده آن ها را پياده سازي مي کنيم.

    4- ابزار برش در فتوشاپ Slice Tool هست.

    5- براي ذخيره قسمت برش داده نيز مي توانيد از کليد ميانبر alt+ctrl+shift+S استفاده کنيد.

 

 

    لينک اصلاح شده براي 4shared

    لينک اصلاح شده دوم

 

    دوستان اين تاپيک تا اتمام کامل طراحي به دليل منظم بودن پست هاي آموزش پشت سر هم قفل خواهد بود و بعد از اتمام آموزش تاپيک باز ميکنم تا دوستان اگه نظر ، درخواست يا سوالي در اين زمينه داشتند مطرح کنند.

    موفق باشيد..

 

 گرفتم ولي نه به عنوان نمونه کار بلکه براي آموزش ، من اين کار رو از الف شروع مي کنم و همراه طراحی  وب سايت  به توضيحات در مورد نکات مهم که تو اين تالار مشکل عمده افراد هست مي پردازم ، اين آموزش براي افرادي مفيد خواهد بودکه دوست دارند طراحي با استفاده از استانداردهاي جهاني انجام بدهند ، به دليل کمي وقت اضافه من سعي دارم اين وب سايت رو در پروسه زماني 1 هفته اي براي دوستان عزيز کامل کنم ودر اين اين هروز يک قسمت از اين طرح رو طراحي و کد نويسي مي کنيم ، پيشنهادم براي کساني که تمايل دارند به خوبي ياد بگيرند هر روز همراه با من شروع بهطراحی  وب سايت  مجدد اين سايت کنند در اين آموزش فرض بر آن است که کاربران عزيز مختصر در مورد html,css آشنايي دارند کد نويسي در اين آموزش بسيار ساده و قابل درک خواهد بود.

 

   .

    خوب فکر کنم بعد از اين کار يک ذهنيتي از چيزي که مي خواهيم تو ذهنمون پديدار شده خوب توسط فتوشاپ و يا هر نرم افزار گرافيکي که به آن مسلط هستيد شروع به ترسيم ذهنيت خودتان بکنيد.

    من طرحي رو که فايلش رو در پايين ضميمه کردم با استفاده از خلاقيت ذهني خودم طراحی  وب سايت  کردم و برش هاي لازم نيز داده شده لازم به ذکر هست که من توانايي طراحي با فتوشاپ رو دارم اين طرح رو با فتوشاپ به صورت لايه لايه پياده سازي کردم شايد بعضي از دوستان به برنامه هاي ديگري مسلط باشند.

    خوب پس اولين کار طراحي در محيط گرافيکي و دومين کار برش تصاوير..

    ما بايد طوري برش دهيم که ميزان استفاده عکس رو در صفحه وب کاهش دهيم و بيشتر از رنگ در صفحه وب استفاده کنيم.فايل psd زير را دانلود کنيد و به برش ها و نحوه مرتب کردن لايه ها دقت کنيد.ما براي طراحی  وب سايت  فقط به قسمت هاي برش داده شده نياز خواهيم داشت.

    نکات ضروري :

    1- تکه هاي برش داده شده را با پسوند png 24 ذخيره مي کنيم.

    2- اندازه اي که من در فتوشاپ در نظر گرفتم 1000px در عرض و براي طول هم کمي بيشتر چون در دفرم شدن تاثيري ندارد 1500px در نظر گرفته ام.

    3- در زمان طراحي شايد ايده هاي جديدي داشته باشيم که در پست هاي آينده آن ها را پياده سازي مي کنيم.

    4- ابزار برش در فتوشاپ Slice Tool هست.

    5- براي ذخيره قسمت برش داده نيز مي توانيد از کليد ميانبر alt+ctrl+shift+S استفاده کنيد.

 

 

    لينک اصلاح شده براي 4shared