اموزش طراحی وبسایت تک صفحه ای

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

امروزه سایت های تک صفحه ای در بیشتر وبسایت ها مورد توجه قرار گرفته است.

برای همین منظور مجاب شدیم ، تا مقاله ای در این باب بنویسیم و طراحی وبسایت تک صفحه ای را به صورت کامل بررسی نماییم.

هدف ساخت سایت های تک صفحه ای چیست؟

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

به یک وبسایت خیلی شلوغ فکر کنید.

این وبسایت ممکن است ، از صفحات زیادی تشکیل شده باشد.

صفحه ی فروشگاه درباره ما تماس با ما ثبت سقارش دوره های اموزشی و …

در چنین مواقعی طراح وبسایت ، باید از چندین صفحه برای سایت استفاده نماید.

اما برخی از وبسایت ها مانند: وبسایت های رزومه یا وبسایت های نمونه کار که تمامی المان های سایت روی صفحه ی اصلی جای داده میشوند و سایت دیتای زیادی ندارد میتوانیم از وبسایت های تک صفحه ای استفاده نماییم.

سایت تک صفحه ای چیست؟

همانطور که در بالا گفتیم ، وبسایت هایی با حجم بالا دارای صفحات زیادی هستند.

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

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

تمامی المان ها روی صفحه ی اصلی باشد و این سایت به هیچ صفحه ی دیگری لینک نشده باشد.

موارد استفاده سایت تک صفحه ای

سایت های تک صفحه ای توسط طراحان سایت برای افراد زیر پیاده سازی میشود.

• افرادی که نیاز به سایت رزومه دارند.
• افرادی که نیاز به سایت نمونه کار دارند.
• سایت های معرفی شرکت و کمپانی
• و…

اموزش طراحی وبسایت تک صفحه ای

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

ضمنا این اموزش توسط cms وردپرس انجام شده است.

تمامی چالش هایی که در طراحی این وبسایت وجود دارد، را برای شما عزیزان مورد بررسی قرار میدهیم.

در طراحی سایت های تک صفحه ای باید به یک سری نکات توجه نمایید.

این نکات شامل موارد زیر میشوند:

۱. طراحی هدر و فوتر در سایت های تک صفحه ای:

اولین چیزی که در یک وبسایت به چشم میخورد هدر سایت است.

مواردی که در هدر یک سایت به کار میرود در یک سایت تک صفحه و سایت چند صفحه ای تقریبا مشابه است، اما لینک ها نباید به صفحات دیگری متصل شوند.

در این اموزش ما قصد داریم، یک پروژه ی کامل طراحی سایت تک صفحه ای را بررسی نماییم.

به تصویر بالا نگاه کنید!

این تصویر هدر یه سایت تک صفحه ای است، همانطور که گفتم با هدر یک سایت چند صفحه ای هیچ تفاوتی ندارد.

در بالا فقط گزینه هایی که در فهرست سایت آمده است، با یک سایت تک صفحه ای تفاوت دارد.

این تفاوت در نحوه ی لینک دهی است.

نحوه ی لینک دهی در سایت های تک صفحه ای:

همه ی ما میدانیم که برای ساخت فهرست سایت باید از گزینه ی نمایش وارد قسمت فهرست ها شویم و در این قسمت فهرست خود را تولید نمائیم.

برای سایت های چند صفحه ای که ما میتوانیم در ساخت فهرست از برگه های مختلف سایت تشکیل شده است استفاده نمائیم.

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

در تصویر بالا فهرست یک وبسایت تک صفحه ای را مشاهده می نمائید:

همانطور که میبینید بغیر از صفحه اصلی تمامی موارد از پیوند سفارشی استفاده شده است.

برای لینک دهی به پیوند های سفارشی بالا از روش زیر عمل مینمائیم.

دقت کنید که باید به هر گزینه جوری لینک دهیم، که زمانی که کاربر روی لینک ها کلیک نمود ما به صفحه ی دیگری منتقل نشویم.

لینک دهی به گزینه های فهرست:

تصور کنید که یکی از قسمت های صفحه اصلی شما اعضای تیم شما را نمایش دهد.

برای اینکه بتوانیم کاربر را پس از کلیک کردن روی لینک تیم ما به مکانی که تیم وبسایت طراحی شده است هدایت نمائیم.

ابتدا باید از ویژگی ID در html استفاده نمائیم.

به تصویر زیر دقت نمائید:

المانی که تیم ما در آن قرار دارد را انتخاب نمائید.

به تب پیشرفته بروید.

در این قسمت میتوانید ویژگی شناسه (ID) را بنویسید، دقت کنید که این نام دلبخواه است و میتوانید از هر نامی استفاده نمائید.

نکته : ویژگی کلاس و شناسه در html تعریف میشود و مانند نام عمل میکند یعنی زمانی که ما برای یک المان شناسه یا کلاس تعریف میکنیم در واقع برای آن المان یک نام گذاشته ایم.

حال نوبت به اتمام کار رسیده است.

در آخر فهرستی که ساختید را ویرایش نمائید.

حال فهرست را ذخیره نمائید.

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

بقیه ی موارد را نیز به روش بالا لینک دهی کنید.

نکاتی در خصوص طراحی وبسایت های تک صفحه ای:

در طراحی سایت تک صفحه ای فقط لینک ها مهم هستند که در بالا به آنها اشاره شد

بقیه مطالب را به صورت نکته در اختیار شما عزیزان قرار می دهیم.

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

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