پروژه سوم : طراحی و کد نویسی یک قالب مدرن

دسته بندی: آموزش
زمان مطالعه: ۲ دقیقه
۱۳ اسفند ۱۳۹۳

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

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

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

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

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

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

نویسنده
بیش از 15 سال هست که برنامه نویسی می کنم و از بین همه زبون هایی که کار کردم جاوا، اسمبلی و php رو دوست دارم. دانشجوی دکترای نرم افزارم و توی دانشگاه روی پردازش بیگ دیتا و پردازش موازی کار کردم و عاشق چالش از هر نوعیش هستم! سون لرن مثل بچه منه که 12 سال براش وقت گذاشتم، اینجا همه تلاش می کنیم از شروع یادگیری تا ورود به بازر کار حوزه برنامه نویسی و IT همراهتون باشیم.

جلسات دوره

نظرات کاربران

parisa

استاد میشه توضیحی راجبdata-wow , attribute بدید.

David Gh

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

mohammadali sedaghat

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

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

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

Block Name

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

وحید کاظمیان

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

amirfff

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

علی رضایی

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

لقمان آوند

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

Reza Rajabpur

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

Reza Rajabpur

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

لقمان آوند

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

MRZ65

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

لقمان آوند

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

Ali Bazrafkan

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

لقمان آوند

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

it,one

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

لقمان آوند

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

Ali Bazrafkan

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

لقمان آوند

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

پایان زمان پشتیبانی

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

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

نیاز به لاگین

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