راهنمایی برای یادگیری PSD به HTML5 / CSS تبدیل

[ad_1]

طراحی و توسعه یک وب سایت شامل مجموعه ای متفاوت از فعالیت های. هر دو حال وابسته به یکدیگر برای ارائه محصول به پایان رسید. طراحی خود را از فعالیت های خود را شامل زیبایی و نبوغ خلاق برای کمک به شما تحویل تمیز و زیبا وب سایت با استفاده از فتوشاپ, محبوب ترین ابزار ویرایش تصویر از نرم افزار Adobe. اما طراحی خود را به منظور توسعه یافته به یک وب سایت نیاز به تبدیل به یک فایل HTML. بیایید نگاهی به مبانی درک چگونه برای تبدیل PSD به HTML 5 و CSS برای توسعه وب سایت.

گرفتن پیش نیازها در محل

به عنوان یک پیش شرط برای شروع در فرایند تبدیل به یک فایل PSD در محل. PSD پیش فرض پسوند فایل داده شده به تمام فایل های ایجاد شده در فتوشاپ. این خواهد بود که پایه ای برای شما برای شروع تبدیل.

علاوه بر این شما نیاز به یک درک اساسی از HTML5 به منظور برنامه ریزی طرح است. یک درک اساسی مفاهیم HTML مانند تگ صفات و نحو.

راه اندازی مخزن ساختار

قبل از شروع, مطمئن شوید که شما باید مخزن ساختار در محل. پیکربندی ساختار مکانی که فایل ها و پوشه ها میزبانی می شود. شما نیاز به ایجاد یک اصلی یا پوشه ریشه آن را نگه دارید و تمام زیر پوشه ها. ایجاد جداگانه زیر پوشه برای هر عنصر از طراحی خود را یعنی, اسکریپت, CSS, images, متن, و غیره. علاوه بر این ایجاد یک index.html که خود را نگه دارید کل HTML نشانه گذاری. این فایل اصلی خواهد بود که برگرفته توسط مرورگر بر اساس درخواست کاربر.

برش و تاس تصویر

آن را کاملا آشکار است که حتی uninitiated که فایل PSD در آن wholeety نمی توان موجود در فایل HTML. بنابراین آن را به قطعه قطعه به اندازه های کوچکتر. شما می توانید بین دو تصویر با فرمت PNG-24 بیت و JPEG برای صرفه جویی در قطعه قطعه کردن تصاویر. در حالی که PNG-24 بیت است که قطعا گزینه بهتری از نظر کیفیت تصویر JPEG است که به مراتب برتر تا کنون به عنوان بهینه سازی اندازه نگران است. پس از فندک تصاویر بدون شک اولویت اول شما ممکن است بخواهید به سازش در کیفیت در بهترین مورد علاقه خود را در وب سایت.

وارد شدن به کد

اجازه دهید ما در حال حاضر درک کنند که چگونه شما می توانید بافت در قطعه قطعه کردن تصاویر خود را به HTML 5 کد. موقعیت آرم برجسته در HTML 5 صفحه. شامل یک هدر تگ در تگ body. در هدر اضافه کردن یک div با یک لفاف بسته بندی به عنوان کلاس خود ارزش. شامل تگ تصویر با تصویر مسیر در منبع آن ویژگی. لوگو را قابل کلیک با معرفی تگ لنگر و اتصال آن به هر بخش یا صفحه ای از وب سایت خود را. معمولا آرم مربوط به صفحه اصلی به طوری که برای فعال کردن کاربران با ناوبری آسان است. کد خود را پس از تکمیل باید شبیه به این:

استفاده از منو تگ از HTML 5 برای ایجاد نوار ناوبری. یک دستور و یا لیست نامرتب به عنوان مورد نیاز و اضافه کردن

  • برچسب ها شامل گزینه های منو. اضافه کردن یک کلاس منحصر به فرد با نام “فعال” به دپو
  • برچسب است که می تواند مورد استفاده در CSS. شما همچنین نیاز به اضافه کردن یک تگ لنگر به لینک فردی گزینه های منو به یک مقصد خاص در صفحه وب. تبدیل PSD به HTML 5 آسان می شود اگر شما از ابزار مناسب برای کمک به شما آن را انجام دهد. با استفاده از ابزار مانند Dreamweaver کمک می کند تا به طور قابل ملاحظه ای کاهش تلاش های دستی و همچنین ارائه نتایج خوب است.

[ad_2]

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *