آموزش جامع طراحی سایت ریسپانسیو landingpage

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

تا ظاهر سایت زیبایی خود را از دست ندهید.

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

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

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

حتما تا به حال سایت‌های زیادی دیده‌اید و این سوال برایتان پیش آمده که کدام سایت دارای طراحی landing page هست؟ اصلاً صفحه فرود یعنی چه؟ در بعضی سایت‌ها، مثل سایت وی لرن، صفحات متعددی بنا به نیاز طراحی می‌شوند.

ولی گاهی اوقات برای بعضی از سایت‌ها نیازی به وجود چندین صفحه نیست، و می توان بیشتر محتوای سایت را در یک صفحه قرار داد (مثل قالبی که در این آموزش طراحی کردیم).

به این حالت، طراحی landing page یا طراحی صفحه فرود می گویند.

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

ما در دوره آموزش طراحی سایت ریسپانسیو landing page قصد داریم تا یک نمونه سایت ریسپانسیو طراحی کنیم، که لندینگ پیج landing page هم باشد.

تا بتواند نیازِ تمام وی لرنی های عزیز، در زمینه طراحی سایت ریسپانسیو landing page را برای ورود به بازار کار برطرف نماید.

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

همچنین از کتابخانه هایی مثل Colorbox ، Carousel Slider ، ResponsiveSlides ، MsScrollbar ، Font-Awesome ، Wow Animate در این طرح بهره گرفته شده است.

**توجه** : قالب ریسپانسیو landing page که در این دوره آموزش داده می‌شود، کاملاً کاربردی بوده و صرفاً یک طرح آموزشی نیست.

هزینه‌ طراحی این قالب، چندین برابر هزینه دوره آموزش طراحی سایت ریسپانسیو landing page می باشد.

سلام وی لرنی عزیز با دوره بسیااااااااار جذاب و دیدنی طراحی سایت ریسپانسیو Responsive در خدمتتون هستیم.

یکی از انواع سایت‌ها که بسیار جذاب و کاربر پسند هست همین سایت ریسپانسیو لندینگ پیج landing page هست.

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

البته سایت‌های landing page هم ممکنه صفحات دیگه ای داشته باشن.

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

باید یک صفحه دیگه داشته باشیم تا بقیه تصاویر که در طرح landing page موجود نیست رو تو اون صفحه بگذاریم.

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

از این جلسه طراحی سایت Responsive رو شروع می‌کنیم.

تو این درس کدهای ریست رو، داخل فایل style.

css پروژه میزنیم.

همون‌طور که در دوره آموزش html و css هم گفتیم، کدهای ریست برای این هستن که سایتمون تا حد امکان در همه مرورگرها نمایش یکسانی داشته باشه.

برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

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

برای طراحی این بخش از کتابخونه کم حجم و مناسبِ responsiveslides استفاده می‌کنیم.

برای دریافت کتابخونه responsiveslides می‌تونین به لینک ” http://responsiveslides.

com “ مراجعه کنین.

برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

تو درس قبلی طراحی اسلایدر ریسپانسیو رو تموم کردیم .

حالا طراحی عنوان ، دکمه های ثبت نام و تماس با ما رو انجام میدیم .

برای توضیحات بیشتر فیلم آموزشی طراحی سایت ریسپانسیو در این درس رو تماشا کنین.

برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

حالا نوبت بخش بعدی میرسه.

درسته، نوبت طراحی منو هست.

منو رو با توجه به دانسته هامون از دوره آموزش html و css می‌تونیم تکمیل کنیم.

برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

بعد از طراحی منو، به طراحیِ بخش خدمات سایت می‌رسیم.

این بخش شامل عنوان و شش تا بخش برای توضیح خددمات سایت هست.

فیلم آموزشی طراحی سایت ریسپانسیو رو حتماً ببینین.

برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

طراحی بخش خدمات رو ادامه میدیم تا این بخش هم به اتمام برسه.

در این بخش، از آیکون فونت Font Awesome استفاده می‌کنیم.

برای دریافت کتابخونه Font Awesome میتونین به این لینک ” http://fontawesome.

io ” برین.

برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

به بخش درباره ما رسیدیم.

این بخش شاامل یک تگ p و یک تگ img هست.

اگر دقت کرده باشین این بخش تمام صفحه رو پوشش نمیده.

برای همین یک div با عرض 1100px تعریف می‌کنیم و المان های مربوط به این بخش رو داخلش قرار میدیم.

فیلم آموزش طراحی سایت ریسپانسیو رو از دست ندین.

برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

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

این کار با استفاده از خاصیت background-attachment امکان پذیر هست.

فیلم آموزشی طراحی سایت ریسپانسیو Responsive در این قسمت رو حتماً تماشا کنین.

برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

خب، حالا نوبتِ بخش نمونه کارهاست.

برای طراحی بخش نمونه کارها از دو تا تگ figure و figcaption استفاده می‌کنیم .

تگ img و تگ figcaption داخل تگ figure قرار میگیرن … فیلم آموزشی طراحی سایت واکنش گرا در این درس رو حتماً ببینین.

برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

بخش آخرین اخبار هم یک پس زمینه داره که در حالت fixed هست.

همچنین چند تا article داره که تو هر article یک خبر قرار میدیم.

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

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

برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

به بخش همکاران – مشتریان رسیدیدم.

این بخش رو با کتابخونه OwlCarousel پیاده می‌کنیم.

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

برای دانلود کتابخونه OwlCarousel می‌تونین به این لینک ” https://owlcarousel2.

github.

io/OwlCarousel2 ” برین.

فیلم آموزشی طراحی ریسپانسیو سایت در این درس رو حتماً حتماً ببینین.

برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

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

نقشه رو که از طریق گوگل مپ میگیریم و تو سایت میگذاریم .

فرم تماس با ما رو هم طراحی می‌کنیم .

فیلم آموزشی طراحی سایت ریسپانسیو در این درس رو ببینین.

برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

به بخش انتهایی قالب یا همون فوتر (foote ) رسیدیم.

ولی هنوز تا آخر دوره طراحی landing page کلی راه هست.

تو این بخش از آیکون فونت های Font Awesome برای گذاشتن نماد شبکه های اجتماعی استفاده می‌کنیم (برای رفتن به درس آیکون فونت های Font Awesome اینجا کلیک کنید).

فیلم آموزشی طراحی سایت ریسپانسیو رو حتماً تماشا کنین.

برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

خب میخوایم سراغ بخش ثبت نام بریم.

در ابتدا فقط یک دکمه برای بخش ثبت نام طراحی کردیم.

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

برای دانلود کتابخونه colorbox میتونین به لینک ” http://www.

jacklmoore.

com/colorbox “ مراجعه کنین.

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

برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

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

حالا میخوایم برای اون متن یک اسکرول اختصاصی رو توسط کتابخونه  Custom Scrollbar پیاده کنیم.

برای دانلود کتابخونه Custome Scrrollbar به لینک “http://manos.

malihu.

gr/jquery-custom-content-scroller/” مراجعه کنین.

این پایین میتونین فیلم آموزشی طراحی سایت ریسپانسیو Responsive رو تماشا کنین.

برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

همون‌طور که قبلاً هم گفتیم، میخوایم قابلیتی رو به قالب اضافه کنیم که با کلیک کردن روی هر کدوم از گزینه های منو، با یک افکت زیبا به بخش مربوطه بریم.

این کار رو با استفاده از کتابخونه Animate Scroll انجام میدیم.

برای دانلود کتابخونه Animate Scroll به لینک ” https://plugins.

compzets.

com/animatescroll ” مراجعه کنین.

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

برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

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

برای این کار احتیاج به اندکی کد نویسی جاوا اسکریپت هست و دیگه با css نمیشه انجامش داد.

قیلم آموزشی طراحی سایت ریسپانسیو landing page در این درس رو با دقت فراوان ببینین.

برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

از این جلسه طرح landing page رو که ساختیم برای نسخه موبایل ریسپانسیو می‌کنیم.

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

چون تو این آموزش از فریم ورک استفاده نمی‌کنیم خودمون باید برای نمایشگرهای مختلف media query تعریف کنیم.

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

برای این که انواع media query  رو ببینین به ” https://css-tricks.

com/snippets/css/media-queries-for-standard-devices ” مراجعه کنین.

برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

خب ادامه کارِ طراحی ریسپانسیو برای نسخه موبایل رو پیش میبریم.

اول ریسپانسیو کردن قالب برای حداکثر عرض 721px رو انجام میدیم.

بعدش ریسپانسیو کردن برای حداکثر عرض 480px رو انجام میدیم.

حتماً فیلم آموزش طراحی سایت ریسانسیو در این درس رو ببینین.

برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

فقط یه چیز دیگه از ریسپانسیو کردن سایت landing age میمونه.

اونم منوی ریسپانسیو هست.

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

این جلسه منوی ریسپانسیو رو تموم می‌کنیم.

یه نکته کوچولو هم براتون میگم.

همون‌طور که تا حالا دیدین کد ریسپانسیو در css چیز خاصی نیست.

همین کدهایی هست که همیشه استفاده می‌کنیم.

فقط باید با توجه به قالب ببینیم که با چه کدی به شکل مناسب در میاد.

پس دنبال کد ریسپانسیو در css نباشین.

فیلم آموزشی طراحی سایت واکنش گرا Responsive در این درس رو از دست ندین.

برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

حالا میخوایم یک بخش کوچیک رو به قالبمون اضافه کنیم.

اون چیزی که میخوایم اضافه کنیم، اصطلاحاً تولتیپ (tooltip) گفته میشه.

اصلاً تولتیپ (tooltip) چیست؟ نحوه ایجاد تولتیپ (tooltip) چطور هست؟ همون‌طور که خود شما هم تو سایت های مختلف دیدین، وقتی موس رو روی بعضی از قسمت های سایت میبریم یه کادر ظاهر میشه که داخلش اطلاعاتی در مورد اون قسمت داره.

به ایی کادر تولیپ میگن.

همچنین، میتونین آموزش ساخت تولتیپ (tooltip) بااستفاده از HTML و CSS رو ، داخل فیلم آموزشی این قسمت ببینین.

برای دانلود کتابخونه wow.

js به لینک ” https://github.

com/matthieua/WOW “ مراجعه کنین.

برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

خب دیگه به جلسه آخر آموزش طراحی سایت ریسپانسیو رسیدیم.

تو این جلسه میخوایم به بعضی از قسمت های سایت با استفاده از کتابخونه wow.

js افکت‌های زیبایی رو اضافه کنیم.

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

فیلم آموزش طراحی سایت ریسپانسیو landing page در این درس رو حتماً حتماً ببینین.

برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

دانلود فایل نهایی تم برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام کنید ما تصمیم گرفتیم اغلب آموزش های ویلرن رو رایگان کنیم و سعی مون بر این خواهد بود که حدود ۷۰% آموزش های web رایگان باشن! همونطور که می دونید، منبع درآمد اساتید ویلرن از سایر فعالیت هاشون هست، لذا ما در ویلرن چندان تمرکز بر درآمدزایی مستقیم نداشتیم ( البته طبیعتا از پول بدمون نمیاد ;) ) به هرحال اولویت و دغدغه اول ما، آموزش و کمک به دانشجویان برای یادگیری تکنولوژی های وب هست تا بلکه سهم بسیار کوچکی در کارآفرینی و رشد فناوری این مملکت داشته باشیم.

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

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

.

.

تمامی حقوق برای آکادمی وی لرن محفوظ است.

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