آموزش طراحی وب

آموزش ایجاد صفحات one page

تو این مقاله ی آموزشی، به درخواست یکی از دوستان قصد دارم نحوه ی ایجاد صفحات single page و یا one page رو خدمتتون آموزش بدم؛ البته این مورد رو در ماهنامه شماره اول منتشر کرده بودم که با کمی تغییر در این مقاله مجدد خدمتتون آموزش میدم.

onepage

 

آموزش ایجاد صفحات Single page

سلام خدمت همراهان همیشگی مدرسه مجازی ایرانیان

تو این مقاله ی آموزشی، به درخواست یکی از دوستان قصد دارم نحوه ی ایجاد صفحات single page و یا  one page رو خدمتتون آموزش بدم؛ البته این مورد رو در ماهنامه شماره اول منتشر کرده بودم که با کمی تغییر در این مقاله مجدد خدمتتون آموزش میدم.

 

وب سایت های single page  و یا  one page

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

 

چه زمانی از طراحی one page استفاده کنیم؟

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

 

چگونه سایت های one page طراحی کنیم؟

قبل از شروع آموزش پروژه رو دانلود کنید تا روی کدهای پروژه نحوه ی پیاده سازی رو براتون توضیح بدم.

برای دانلود پروژه کلیک کنید

خوب دوستان پروژه رو که دانلود کردید فایل index.html رو باز کنید اول اینکه عملکرد این صفحه رو ببینید و بعد کدهای اون رو باز کنید.

پیاده سازی این سایت ها بسیار سادست ، کافیه مراحل زیر رو طی کنید:

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

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

حالا باید تعریف کنیم زمانی که روی گزینه ها کلیک کردیم ؛ محتویات مربوط به اون گزینه رو برامون بیاره؛ مثلا اگر روی خانه کلیک کردیم اسلاید مربوط به خانه رو برامون بیاره. برای درک بهتر قسمت خانه ی پروژه رو مثال میزنیم.

به کد html زیر دقت کنید :

این کد گزینه ی مورد نظر مارو در منوی بالا تشکیل میده که قراره روش کلیک کنیم و به ابتدای صفحه یا صفحه ی نخست بریم و اسلاید خانه رو برامون بیاره .  حالا به کد زیر دقت کنید ، این کد باکس #home رو نشون میده که محتویات صفحه نخست مارو تشکیل میده :

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

علامت # در جی کوئری نشان دهنده id یک عنصر هست .

در این کد جی کوئری گفتیم زمانی که روی گزینه خانه یعنی  nav-home کلیک کردیم ، صفحه به سمت اسلاید و بخش اطلاعات مربوط به خانه یعنی #home اسکرول بخوره.

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

اگر بخوایم برای تمامی اسلایدهامون این حالت رو تعریف کنیم به شکل زیر عمل می کنیم:

 

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

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

خوب نکاتی که برای ایجاد صفحات one page یا  single page باید میگفتم رو گفتم. حالا باید یک استایل زیبا و شکیل برای صفحه ی وبتون در نظر بگیرید.

تو قسمت css سایتتون این مورد رو در نظر داشته باشید که برای هر اسلاید و بخش که background در نظر میگیرید به اون پس زمینه خاصیت fixed بدید.

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

موفق و پاینده باشید

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

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

دیدگاه ۲۵

  • سلام
    من یک آموزش درباره ساخت صفحات one page ، برای سیستم وردپرس دارم آماده میکنم ، که ان شالله در اختیار شما قرار خواهم داد.

  • سلام
    خیلی خوب آموزش دادید
    ببخشید من یک سوال داشتم ولی هرچی تلاش کردم موفق به ثبت نام در سایت نشدم
    تا در قسمت پرسش وپاسخ مطرحش کنم
    اگه امکان داره به من یاد بدید که چه جوری با php سبد خرید درست کنم
    لطفا اگه امکان داره برام ایمیل کنید اگه هم کمی زمان بره خبرم کنید که صبر کنم
    بازهم از سایت مفیدتون تشکر میکنم

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

  • سلام
    ممنون از وبسایت بسیار مفیدتون
    ببخشید امکان داره برای دسترسی به وب سایتمون از پورت۴۴۳ به جای پورت ۸۰ استفاده کنیم
    منظورم اینه که آدرس سایت کامل سایت ما به جای http://www.mysite.com
    https://www.mysite.com fhan
    اگه امکان داره چه جوری
    اگه جواب دادن به سوالم زمان بره خبرم کنید که صبر کنم اگه هم هر کدوم از سوالات من هزینه ای داره بفرمایید و شماره حساب را به ایمیلم بفرستید تا پرداخت کنمظش

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

  • سلام
    آقای همت یار عزیز من اصلا قصد بی احترامی نداشتم اگه ناخواسته جسارتی کردم ببخشید
    ولی من بیشتر از ۱۰ بار سعی کردم که توی سایت شما ثبت نام کنم ولی همچنان منتظرم که ایمیل تایید حساب کاربری از طرف سیستم شما به ایمیلم ارسال بشه ولی هنوز خبری نیست
    امروزم که اصلا صفحه پرسش وپاسخ بالا نمیاد
    بازم اگه جسارتی به شما کردم معضرت میخوام

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

  • سلام
    ممنون از آموزش خوبتون بنده یک سایت single page دارم ولی متاسفانه بزرگترین مشکلم اینه که نمی تونم خوب سئو کنم و متمعن هستم تمام وب سایتهای singel page این مشکل رو دارند . مشکلم هم از این قراره که مثلا وقتی کاربر کلمه “تماس با آرش ابراهیم پور “رو جستجو میکنه و از طریق گوگل وارد سایت بنده می شود باید اسکرول کنه بیاد پایین تا بتونه قسمت تماس با آرش ابراهیم پور رو پیدا کنه . و مشکله بزرگتر و بدتر اینه که نمی تونم برای عنوان های اصلی سایتم از meta description استفاده کنم. که این واقعا فاجعست. اگه بتونید کمکم کنید که چطور میشود به عنوانهای سایتم meta description اضافه کنم ممنون می شم.

    • سلام دوست عزیز
      تا حدودی مشکل شمارو متوجه شدم که تقریبا کاریش نمیشه کرد، اما اینکه meta description نمیتونید بذارید رو متوجه نشدم ، اگر یه صفحه دارید خوب مسلما نمیتونید بیشتر از یه متا توضیحات داشته باشید.

  • سلام.
    واقعا آموزش شسته و رفته ای بود
    فقط یه ابهام باقی مونده برام ؛ اون کد آخری که مربوط به ارتفاع صفحه بود رو میشه در پروژه های دیگه هم استفاده کرد؟
    منظورم اینه که یه کد عمومی هستش یا اینکه نه، مقادیرش فقط مربوط به همین پروژه هست؟
    ممنون از آموزش های خوبتون …

    • سلام دوست عزیز
      بله عمومی هست فقط باید کلاس content رو نسبت به کد خودتون بهش بدید.
      موفق و پاینده باشید.

  • سلام
    من قسمت
    (function scrollToElement(selector, time, verticalOffset)(با زیر مجموعه)
    نمفهمم اگه می شه یه لینک بدید که توش توضیح بدید برای چی استفاده میشه

    • سلام دوست عزیز
      ما تو این قسمت یه تابع تعریف کردیم با سه ورودی . چیز خاصی نیست فقط تعریف توابع در جی کوئری هست .
      ما توابع رو تعریف می کنیم و چندین و چند مرتبه میتونیم صدا بزنیم و ازشون استفاده کنیم.

  • اینو میدونم مقادیر داخلشو متوجه نمیشم

    var time = typeof(time) != ‘undefined’ ? time : 1000;

    var verticalOffset = typeof(verticalOffset) != ‘undefined’ ? verticalOffset : 0;

    var element = $(selector);

    var offset = element.offset();

    var offsetTop = offset.top + verticalOffset – 93;

    $(‘html, body’).animate({

    scrollTop: offsetTop

    }, time);

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

  • آقای همت یار عزیز وب سایت سینگل پیج رو چطور می شه سئو کرد که مثلا عنوانهای مهم بنده در گوگل یافت بشه ؟ و زیر عنوانها توضیحی که خودم تایپ کنم نمایش داده بشود ؟ تو سایر سایت ها این کار با tage title va meta description انجام می شود و لی در سینگل از آنجایی که یک تایتل و متا دیسکریپت شن داریم نمی دونم برای بقیه عوانها چکار باید کرد . مثلا برای عنوان تماس با ما و یا عنوان درباره ما.

    • سلام دوست عزیز
      در صفحات سینگل پیج نمیتونید سئوی خوبی داشته باشید، ولی تا جایی که امکان داره از hn ها استفاده کنید ، مثلا برای عناوینتون از h2 و برای توضیحات زیرش از h3 استفاده کنید فقط دقت کنید توضیحاتتون زیاد نباشه ، اگر ساختار semantic هم رعایت بشه که چه بهتر میتونه به سئوی شما کمک کنه.
      موفق و پاینده باشید

  • سلام ، تشکراز شما بابت اموزش های منحصربفردتون
    سوالی که داشتم اینه ، که پوسته های تک صفحه رو چه طور باید به وردپرس تبذیل کرد

    با قالبهای معمولی فرق داره؟

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

    • سلام دوست عزیز
      بله بیس single page ها به همین صورت هست ، حالا میتونه تکنولوژی های دیگه ای مثل پارالاکس هم باهاش ادغام بشه.
      برداشت شما چیه؟!؟!
      موفق باشید

  • Single Page Web App ها اصولا برای داشبورد های مدیریتی کاربرد داره. جایی که یه نرم افزار تحت وب دقیقا شبیه به یه نرم افزار ویندوزی کار می کنه. بهبود Single Page Web App ها نسبت به تکنولوژی Ajax ، تولید url های متفاوت برای هر دستور می باشد. بهترین کامپوننت برای توسعه این نرم افزار ها Angular است که نمونه اون رو ۱۰۰ % در gmail خودتون مشاهده می کنید. در ویژوال استادیو ۲۰۱۳ به بالا تولید نرم افزار های Single Page به صورت پروژه های مجزا می باشد و تکنولوژی استفاده شده در آن طبیعتا MVC است.
    موفق باشید.

    • ممنون از اطلاعاتی که فرمودید ، نظر شما محترمه اما مگه ما single page web app آموزش دادیم؟
      چیزی که ما آموزش دادیم دقیقا single page و یا با نامی دیگر one page هست ، اونی که شما میفرمایید کاملا متفاوت از اون چیزی هست که بنده آموزش دادم. فکر میکنم برداشتتون اشتباه بوده دوست عزیز
      موفق باشید

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین