مقاله تبدیل psd به html و xhtml
سلام در این مطلب میخوام مقاله ای درمورد تبدیل فایل پی اس دی که با فتوشاپ طراحی میشه رو به اچ تی ام ال یاد بدم .
برای تبدیل ما باید مراحل زیر را بگذرانیم :
طراحی بدون استفاده از جداول
پیاده سازی با قابلیت انعطاف بالا (جهت فراهم بودن امکان اعمال تغییرات با کمترین هزینه در آینده)
استفاده از css3
تبدیل psd به html/xhtml بطور کاملا سازگار با تمام مرورگرهای رایج (full web browser compatibility)
استفاده از تصاویر با پایین ترین حجم و بالاترین کیفیت
پیاده سازی به صورت کم حجم و سبک جهت لود سریع صفحات
رعایت کردن اصول کد نویسی html به صورت semantic
رعایت اصول تگ گذاری – اصول SEO در استفاده از کدهای html
پیاده سازی اسکریپت های jQuery دلخواه مشتری
فشرده سازی کدها در صورت تمایل مشتری جهت لود فوق العاده سریع
و …
طراحی صفحات وب سه مرحله ی کلی دارد:
1 . طراحی طرح گرافیکی (طراحی فایل psd): که باید به صورت لایه باز طراحی شده و معمولا از نرم افزار فتوشاپ برای این منظور استفاده می شود. حاصل نهایی این مرحله یک فایل psd می باشد که طرح گرافیکی کلی سایت را در بر دارد .
2 . تبدیل psd به html و xhtml: در مرحله ی بعدی، طرح گرافیکی طراحی شده (به فرمت psd)، باید تبدیل به فرمتی شود که توسط مرورگرهای صفحات وب شناخته شود. از آنجایی که مرورگرهای صفحات وب فرمت html را می شناسند و در آن می توانند تمام فایل های فلش، اسکریپت ها و … را (البته در صورتی که پلاگین مربوط به اجرای فایل های فلش فعال بوده و جاوااسکریپت مرورگر نیز فعال باشد) بخوانند و از آن ها استفاده کنند، صفحات به فرمت psd به html تبدیل می شوند .
3 . به کارگیری صفحات html به صورت پویا: در این مرحله، صفحاتی که آن ها را از psd به html و xhtml تبدیل کرده بودیم را به سیستم مدیریت محتوای مورد نظرمان اتصال می دهیم تا بتوانیم با استفاده از آن یک وب سایت پویا را ایجاد کنیم. بعنوان مثال ممکن است شما خواسته باشید از سیستم های مدیریت محتوای وردپرس، جوملا، مامبو و یا …. برای ایجاد یک وب سایت پویا استفاده کنید. و یا همچنین ممکن است که قصد داشته باشید یک سی ام اس اختصاصی طراحی کنید. اما به هر حال مراحل استاندارد و کلی کار را می توان به همین سه بخش توضیح داده شده، تقسیم کرد.
بزودی آموزش های بیشتری میگذارم اگر وقت کنم ...
--------------
موفق باشید
