PDA

توجه ! این یک نسخه آرشیو شده میباشد و در این حالت شما عکسی را مشاهده نمیکنید برای مشاهده کامل متن و عکسها بر روی لینک مقابل کلیک کنید : مقاله تبدیل psd به html و xhtml



amirdesigner.ir
2013-02-02, 21:16
سلام در این مطلب میخوام مقاله ای درمورد تبدیل فایل پی اس دی که با فتوشاپ طراحی میشه رو به اچ تی ام ال یاد بدم .

برای تبدیل ما باید مراحل زیر را بگذرانیم :
طراحی بدون استفاده از جداول
پیاده سازی با قابلیت انعطاف بالا (جهت فراهم بودن امکان اعمال تغییرات با کمترین هزینه در آینده)
استفاده از 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 تبدیل کرده بودیم را به سیستم مدیریت محتوای مورد نظرمان اتصال می دهیم تا بتوانیم با استفاده از آن یک وب سایت پویا را ایجاد کنیم. بعنوان مثال ممکن است شما خواسته باشید از سیستم های مدیریت محتوای وردپرس، جوملا، مامبو و یا …. برای ایجاد یک وب سایت پویا استفاده کنید. و یا همچنین ممکن است که قصد داشته باشید یک سی ام اس اختصاصی طراحی کنید. اما به هر حال مراحل استاندارد و کلی کار را می توان به همین سه بخش توضیح داده شده، تقسیم کرد.
بزودی آموزش های بیشتری میگذارم اگر وقت کنم ...

--------------
موفق باشید

rahim2
2015-05-10, 15:18
نرم افزار جدید ادوبی برای تبدیل psd به html خیلی کاربرد داره اسمش هست adobe muse

طراحی وب سایت ([Only registered and activated users can see links])