campaign-edianeh-98

دوره مجازی طراحی وب (جلسه 20): پروژه سوم : طراحی و کد نویسی یک قالب مدرن



visibility  
mode_comment   ۸۹

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

دموی قالب آموزش داده شده و طراحی شده در این جلسه

عموم مطالب ارائه شده در این جلسه عبارتند از :

  • توضیح در مورد مراحل انجام پروژه
  • طراحی ساختار قالب بر روی کاغذ
  • روند کدنویسی قالب و تبدیل طرح روی کاغذی به قالب html و css
  • طراحی قالب به صورت تمام عرض با ایجاد یک محدودیت در عرض
  • طراحی منوی بالای سایت : navigation menu
  • ایجد اسلایدر محتوا با افکتی زیبا
  • ترفند : نحوه ایجاد یک تگ با ارتفاع 100% مرورگر
  • معرفی پلاگین اسلایدر محتوا و نحوه کار با آن
  • ایجاد بخش درباره ما در قالب
  • ایجاد بخش معرفی محصولات در قالب
  • ایجاد بخش معرفی تیم کاری
  • ایجاد بخش و فرم تماس با ما و اطلاعات تماس
  • استفاده از نقشه گوگل در قالب
  • ایجاد بخش فوتر قالب
  • اکتیو شدن لینک متناسب با بخش قالب در منوی بالای سایت هنگام اسکرول به کمک جاوااسکریپت
  • لود اجزای قالب با انیمیشن های مختلف در هنگام اسکرول به پایین
  • ذکر نکات مهم در مورد طراحی قالب های مختلف
info توجه

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

ثبت نام در آموزش طراحی سایت حرفه ای

comment دیدگاه کاربران
مجتبی replyپاسخ

حلالـــــــــت استاد…!
سپاسگزارم

لقمان آوند

قربانت
ممنون

مازیار replyپاسخ

با سلام و عرض ادب
استاد آوند عزیز یک دنیا ممنون هنوز فیلم رو ندیدم ،اما دموی قالب رو دیدم همون چیزی هست که می خواستم.
خدا خیرتون بده که پیشنهادهای دانشجوهاتون رو لحاظ می کنید.
سپاس بی نهایت ❓ ❓ ❓ ❓ ❓ ❓ ❓

لقمان آوند

خواهش می کنم
موفق باشی

علی یوسفی replyپاسخ

تدریسش با خودتون هست آقای آوند ؟ راستی پروژه واکنشگرا چی ؟

لقمان آوند

بله خود بنده این جلسه رو تدریس کردم .
در جلسه واکنشگرا همین قالب ها رو رسپانسیو می کنیم …

nader70 replyپاسخ

با سلام
بازم مثل همیشه عالی 20
1 سوال؟؟؟
آیا این پلاگین wow فقط برای scroll استفاده میشه یا میتونیم برای load صفحه هم استفاده کرد منظور رفتن به یک پیج دیگر میباشد

با درود فراوان

لقمان آوند

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

Abbas412 replyپاسخ

دمو رو دیدم عالی بود
ممنون استاد؛ موفق باشید

لقمان آوند

خواهش می کنم
موفق باشید

sadaf replyپاسخ

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

لقمان آوند

سلام و ممنون
عمدا چنین قالبی رو برای پروژه ایجاد کردیم که متوجه بشید قالب های جالب و نسبتا حرفه ای که تو سطح وب می بینید واقعا کار سختی نیست پیاده سازیشون …
فقط کافی با بعضی ترفندها و پلاگینها و نحوه به کار گیریشون آشنا باشید و html و css رو خوب بلد باشید که در این دوره پوشش دادیم .
باز هم از لطف شما سپاسگزارم
موفق باشید

Negar Ghavidel replyپاسخ

سلام
واقعا خسته نباشید.
یه سوالی داشتم من هنوز فرصت نکردم فیلم ها رو نگاه کنم تو بحث ریسپانسیو media ها رو هم میگید؟
یا اینکه گفتید؟

لقمان آوند

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

Negar Ghavidel

واقعا ممنووووون

افشین زندی replyپاسخ

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

لقمان آوند

ممنونم جناب زندی
لطف دارید نسبت به بنده

mehdi karimi replyپاسخ

عااالی بود استاد ، واقعا خسته نباشید
جسارتا یک ایمیل هم من فرستادم دیشب واستون ، یک سوال در مورد سئو داشتم ، منتظر جوابتون هستم اگه راهنمایی کنید یه دنیا ممنون میشم
یا علی

لقمان آوند

خواهش می کنم
پاسخ می دم …

امید فیروزه replyپاسخ

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

لقمان آوند

سلام و ممنون
لزوما نه ولی بعضی پلاگین ها هستند که یه سری فایل ها ضروری در فولدرشون هست که باید حتما باشن . مثل پلاگین font-awesome که فونتهاش باید همراهش باشن . برای اطمینان چیزی رو حذف نکنید …

کیان کیانی replyپاسخ

استاد دست خوش …
کی بشه شروع جاوا اسکریپت …
دمت گرم کاکو …

لقمان آوند

ممنون
ایشالله اواخر فروردین

رستم سوداگری replyپاسخ

مثل همیشه کامل و بی نقص
واقعا یه دنیا ممنون استاد آوند ❓ ❓

لقمان آوند

خواهش می کنم.
انجام وظیفه است …

زمان الله ابراهیمی replyپاسخ

اولا” خیلی قشنگه این قالب من که شوکه شودم استاد در این دورها هرچی بگیرد حلال شما باشد
فقد یک سوال این قالب به وردپرس تبدیل میکنید یا خیر ❓ ❓ ❓ ❓ ❓ 😆 😆 😆

لقمان آوند

سلام و ممنون
خود ایجاد قالب وردپرس یه دوره جامع لازم داره !
البته تو همین دوره در یه جلسه نکات مربوط به نحوه تبدیل قالب ها رو میگیم …
یکی از همین قالب ها رو روش کار میکنیم …

دانشجو replyپاسخ

جلسه بیستــه واقعا بیستـــــــــــــــه 😉

لقمان آوند

خودتون بیستید…

زمان الله ابراهیمی replyپاسخ

باسلام
استاد درمورد آیکونهای زنده یک اطالاعات میدد که چطور روی قالب های به کار میره خیلی ممنون

لقمان آوند

آموزشش اینجا هست .

Mahdi replyپاسخ

خیلی عالی و کاربردی بود ممنونم.فقط یه سوالی دارم ازتون.بنده دنبال اسلایدری مثل اسلایدر این سایت هستم http://basij.aut.ac.ir/ میتونین راهنماییم کنین؟

لقمان آوند

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

امید فیروزه replyپاسخ

سلام استاد خسته نباشید
یه سوال داشتم …..
من با تبلت برخی از سایت های ریسپانسیو رو نگاه میکنم … برخی از سایت های ریسپانسیو قابلیت زوم ندارند ولی بعضی از انها زوم میشه کرد …
میشه راهنماییم کنید چطور میشه قابلیت زوم رو از قالبهای ریسپانسیو حذف کرد …
قالب سایت 7learn هم قابلیت زوم کردن رو نداره

لقمان آوند

برای اجبار به زوم نشدن چنین تگ متایی استفاده میشه که برای حذفش می تونید اونو بردارید از قالب :

امید فیروزه

ممنون

mhty replyپاسخ

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

لقمان آوند

سلام
تو بخش نظرات مطالب دوره بپرسید همواره پاسخ میدیم

Mahdi replyپاسخ

ممنون از پاسختون…

Negar Ghavidel replyپاسخ

سلام
خسته نباشید.
یه خواهشی داشتم
امکانش هست فایل psd این قالب رو هم برامون واسه دانلود قرار بدید؟ 🙄

لقمان آوند

همونطور که در اول جلسه گفته شد برای این قالب طرح فتوشاپی نداشتیم و از روی طرح اولیه و ساده ای که روی کاغذ رسم کردیم کدنویسی رو انجام دادیم …

Negar Ghavidel

ممنون

امین خلیلی replyپاسخ

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

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

ممنون

لقمان آوند

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

امین خلیلی

برای ورژن خاصی از اکسپلور نمیخام میخام اگه کلا مرورگر اکسپلور بود اون کد براش استفاده بشه مثل کد فایر فاکس که در بالا گذاشتم

لقمان آوند

خوب شرط رو به این شکل استفاده کنید :

Abbas412 replyپاسخ

سلام
جناب آوند اوایل جلسه در مورد رنگ بندی درست قالب و سایت های کمکی در این زمینه صحبت کردید
میتونید چند سایت که خودتون برای رنگ بندی مناسب قالب هاتون ازشون استفاده کردید معرفی کنید؟

سوال دوم اینکه برای ابزار googlemap که استفاده کردید عرض تعیین شده بود
میشه طوری تعریفش کرد که عرضش تمام صفحه باشه؟ در رزولوشن ها و دستگاه های مختلف

لقمان آوند

سلام
ایشالله در جلسه آخر در مورد رنگبندی و ابزارهاش صحبت می کنیم .
در مورد اون ابزار هم دقیقا نمی دونم که 100% بشه یه نه ! چون عرض رو فقط یه عدد میگرفت! در عین حال می تونید بگردید و ابزارهای دیگه که این قابلیت رو هم داشته باشند پیدا کنید .زیاد هست …

امین خلیلی replyپاسخ

سلام و پیشاپیش تبریک به مناسبت عید نوروز
جناب اوند من از فونت byekanبرای قالبم استفاده میکنم و در مرورگر کروم و فایر فاکس مشکلی ندارم ولی در اکسپلور هر جایی در متن هام از اسپیس استفاده کردم به جاش مربع نشون داده میشه مشکل را چه جوری باید برطرف کنم
ممنون

لقمان آوند

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

امین خلیلی

منظورتون را از بد تبدیل شده متوجه نمیشم

لقمان آوند

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

shahriar rad replyپاسخ

با سلام و درود
آقای آوند عرض خسته نباشید
یه سوالی داشتم من اومدم خودم کد زدم ولی با کمی تغیییر مثلا من برای قسمت منو اومدم یک دایو کلی زدم بعد داخلش منو و لوگو را تفکیک کردم
بعد از قرار دادن clr رفتم و یک دایو برای اسلاید زدم با ازتفاع مشخص ولی وقتی از این پلاگین اسلاید استفاده کزدم
همون طوری که شما استفاده کردین یعنی متغییر هاشو از روی شما برداشتم ، رقت گوشه بالا و چشمک میزد
حالا میخواستم ببینم تنطیمات خاصی داره؟ یعنی حتما باید از بالا که منو باشه مثلا ارتفاعشو بزنیم 100% و اینا؟………
با تشکر

لقمان آوند

سلام
خوب موقعیت عناصر در اون اسلایدر وابسته به عرض و ارتفاع تگ در برگیرندش هست . متغیرهایی که من دادم مناسب طرح خودم بود . اگر شما تگ دیو دیگه ای با عرض و ارتفاع دیگه بکار بردید باید اون موارد رو هم خودتون تنظیم کنید دوباره …

Mani Soft replyپاسخ

بسیار بسیار لذت بردم عالی بود

Abbas412 replyپاسخ

سلام مجدد

یه مشکلی این قالب داره
اونم وقتی عرض مرورگر رو کم کنیم
چون عرض ها 100% تعریف شدن؛ بک گرامد ها فقط به 100 درصدی که در حال نمایش هست اعمال می شود و اگر با اسکرول افقی جابجا شویم، کناره های صفحه استایل نگرفته
راه حلش چیه؟

لقمان آوند

سلام
بله شما درست می فرمایید . البته نکته اینجاست که این قالب رسپانسیو نیست …
برای رفع این مورد می تونید یه min-width به div ها بدید …

مهدی خسروی replyپاسخ

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

لقمان آوند

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

Mahdi Hashemi replyپاسخ

سلام و وقت بخیر.
با آموزش این جلسه تان مانند شما از پلاگین fractionslider استفاده کردم.اما نمایش آنها ثابت و باعث برهم ریختن منوی قالب می شود. درضمن تمام فایل ها را به درستی لود کردم.اگر فرصت داشتید بنده را راهنمایی بفرمایید.با تشکر.
http://m-hashemi.ir/example.jpg
http://m-hashemi.ir/html.zip

لقمان آوند

تو خط 92 به جای .slider باید از #slider استفاده کنید. چون آیدی ست کردید برای تگ اسلایدرتون نه کلاس !

hossein replyپاسخ

سلام استاد
وقتی تگ nav را fix میکنیم مطالب میرن زیر منو مثل همین عکسی که شما برای اسلایدر قراردادید برای اینکه این اتفاق نیفته چه باید کرد؟
از clear هم استفاده میکنم باز هم میرن زیر قسمت nav

لقمان آوند

خوب fix که می کنید رو قرار میگیره دیگه !
می تونید به محتوا از بالا یه فاصله ای بدید که به اندازه ارتفاع منو باشه …

hossein

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

hasan_elc replyپاسخ

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

لقمان آوند

متوجه نشدم چی گفتید . اگه ممکنه یه اسکرین شات از این مورد برام بفرستید …

حمیدرضا replyپاسخ

سلام استاد دوست دارم نظرتون رو راجع به این قالب بگید. قالب رو از روی تصویر زیر کد زدم خودم خیلی خوشم اومده.
تصویر دمو اصلی:
http://8pic.ir/images/co8brfqwwa32b6ecw13l.jpg
قالب:
http://w….net/

وحید صالحی

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

حمیدرضا

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

وحید صالحی

ممنون دوست عزیز لطف دارید

Ali Bazrafkan replyپاسخ

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

لقمان آوند

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

Ali Bazrafkan

مرسی استاد حتما

Ali Bazrafkan replyپاسخ

ایا خصوصیت float و position باهم برای یک سلکتور میتوان بکار برد؟؟

لقمان آوند

خیر استفاده نکنید با هم

it,one

به چه دلیل ؟؟میشه یه توضیح در مورد بدید 😳

لقمان آوند

چون خیلی عرف نیست. ضمن اینکه وقتی یکی رو استفاده می کنید دیگری معمولا بی اثر میشه.
مثلا اگر از پوزیشن fix یا absolute استفاده کنید دیگه فلوت اثری نداره!

MRZ65 replyپاسخ

سلام استاد عزیز!…از زحماتتون صمیمانه سپاسگذارم.سوالی داشتم در مورد نرم افزارهای آماده برای طراحی قالب(مثل آرتیستیر) …استفاده از این نرم افزارها را توصیه میکنید؟آیا امکان دارد به سئوی سایت لطمه بزنه؟طرف اینجور نرم افزارها بریم یا نه؟(البته برای قالبهای ساده)

لقمان آوند

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

Reza Rajabpur replyپاسخ

با سلام
یه سوال داشتم در مورد بخشی از این جلسه (20)
من در قسمت slider در بخشی که مربوط به نوشتن پلاگین برای نمایش Pager به مشکل برخوردم. با اینکه Pager:true قرار میدم، اما دکمه ها رو در پایین اسلایدر نمایش نمیده. در صورتی که موس رو پایین اسلایدر میبرم جای دکمه ها رو بدون اینکه اونها رو نشون بده تشخیص میده. هرچی هم دنبال عیبش گشتم نتونستم پیداش کنم. دلیلش چیه؟
ممنون

لقمان آوند

ممکنه رنگبندی همرنگ پسزمینه باشه. پلاگین درست کار نکنه. z-index نامناسب باشه و …

Reza Rajabpur replyپاسخ

یعنی میتونه از Z-index باشه؟

علی رضایی replyپاسخ

سلام استاد آوند
من دارم واقعا دیوونه میشم
شما در طول دوره خیلی جاها یه کدی رو کپی میکنید و توضیح میدید برای اینکه وقت اضافی ایجاد نشه
خب چطوری اینکار رو انجام میدید ؟ من دقت کردم مانیتور شما 1024*768 هست و با همین رزولوشن فیلمبرداری میکنید اما موقعی که میخواید کد کپی کنید از یه جایی , اون مراحل توی ویدئو نمایش داده نمیشه ولی حتی صدای موس هنگام کلیک روی پوشه ها به گوش میرسه
میشه بفرمایید این کار رو چجوری انجام میدید ؟

لقمان آوند

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

amirfff replyپاسخ

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

وحید کاظمیان replyپاسخ

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

Block Name replyپاسخ

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

mohammadali sedaghat replyپاسخ

سلام آقای آوند
از برنامه Adobe Muse برای طراحی سایت استفاده میشه، برای پیاده سازی طرح کلی و اولیه مناسب هست؟

کیوان علی محمدی

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

ارسال نظرات

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