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



visibility  
mode_comment   ۸۸

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

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

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

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

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

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

comment دیدگاه کاربران
حمیدرضا

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

وحید صالحی

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

حمیدرضا

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

وحید صالحی

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

Ali Bazrafkan

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

لقمان آوند

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

Ali Bazrafkan

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

Ali Bazrafkan

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

لقمان آوند

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

it,one

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

لقمان آوند

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

MRZ65

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

لقمان آوند

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

Reza Rajabpur

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

لقمان آوند

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

Reza Rajabpur

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

علی رضایی

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

لقمان آوند

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

amirfff

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

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

mohammadali sedaghat

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

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

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

ارسال نظرات

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

1 2 3 4