استایل دهی و تکمیل پروژه یک

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

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

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

  • نمایش خروجی قالب و ساختار آن
  • مرور و توضیح کلی در مورد تگ های قالب
  • آشنایی با نحوه استاندارد نوشتن استایل ها و جداسازی آنها با کامنت های توضیحی
  • استایل دهی بخش هدر قالب، عنوان سایت و توضیح آن
  • ایجاد منوی بالای سایت و استایل دهی به آن
  • رفع مشکل بیرون زدن تصاویر از باکس محتوا با یک ترفند ساده!
  • استایل دهی بخش اسلایدر قالب
  • چینش سایدبار و محتوا در کنار هم و استایل دهی کلی آن
  • استایل دهی سایدبار قالب و محتوا و لیست های درون ان
  • استایل دهی مقالات و لینک ادامه مطلب و تاریخ انتشار آن
  • استایل دهی فوتر قالب
  • آشنایی با نحوه لینک دادن به بخشی از صفحه کنونی
  • استایل دهی عمومی جدول ها با استفاده از CSS
  • معرفی ابزاری خاص برای ایجاد استایل های مربوط به جدول ها
  • ذکر نکات و موارد مورد نیاز برای ادامه دوره
:: توجه

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

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

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

جلسات دوره

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

علی صالحی

4 روز

علی صالحی

واقعا برام سواله !
ینی اینقد کامنتاتون زیاده که 3 روز جواب یه کامنت نمیدین ؟؟؟؟؟؟

علی صالحی

سلام جناب اوند
رفتم یکم قالب و کامل ترش کردم که اگه یه سر به وبلاگ بزنی میبینی فقط الان دو تا مشکل دارم رفتم سایت https://validator.w3.org/ یه اسکن کردم سایتو 3 تا ارور 2 تا warning داده میشه بگین مشکلش چیه ؟ http://uupload.ir/files/9j4s_validator.png
ینم سرعت وبلاگه ولی چند تا ارور داده پایین که خودم فک کنم مشکل از سیسستم بلاگفاس از کوکی ها دقیق سر در نمیارم ولی شمام یه نگا بندازین . http://uupload.ir/files/0r8l_speed.png

منتظر جوابم ممنون

علی صالحی

سلام جناب اوند
خواستم یه نظر خواهی راجب کارم از شما بپرسم
درسته هنوز به قسمت تبدیل قالب به بلاگفا و … نرسیدم ولی بعد این که این جلسه رو تموم کردم همین قالب که این جسه بود رو تبدیل کردم به قالب بلاگفا ( با 4 ساعت تلاش :/ البته ) خلاصه کلی راهنمای داخل سایت بلاگفا رو خوندم بالاخره یه چیزی در اومد دیگه ! 🙂
یه سر به یه وبلاگ که ساختم بزنید امیدوارم خوشتون بیاد
http://eby259.blogfa.com
البته میدونم خیلی چیزاش ناقصه !

متین نوروزی

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

متین نوروزی

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

وحید صف آرا

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

الان سوالی که دارم اینه:
من فایل شما رو که توی این جلسه ساختیم رو بردمش به w3c validator و این رو توی ارور بهم گفت
Warning: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.

یعنی چی؟!

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

سلام دوست عزیز. به صورت استاندارد اگر بخوایم از section استفاده کنیم باید در داخل اون از تگ های h1 تا h6 یکیشون رو نیز استفاده بشه.

єѕмαιℓ

سلام خسته نباشید ، من این جلسه رو مشاهده کردم و سوالی واسه من پیش اومد .
شما در مابقی جلسه ها و آمورش ها به همین صورت آموزش خواهید داد ؟ یعنی اول HTML را درست می کنید و بعد میاید CSS بهش اضافه می کنید ؟

تشکر از تدریس خوبتون 🙂

لقمان آوند

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

amirfff

سلام با اینکه جزو کاربران vip silver هستم با این حال چند روزی می شه از تاریخ سوال کردنم می گذره اما همچنان جوابی دریافت نکرده ام ……

لقمان آوند

ببخشید چند مدتیه به خاطر مشکلی که دارم با تاخیر پاسخ می دم

amirfff

خواهش می کنم استاد ,امیدوارم مشکلتون هرچه زودتر حل بشه

amirfff

درود
در بعضی مواقع با اینکه محتوایی را درون تگ div قرار می دهم اما زمانیکه باکس مدل تگ div را مشاهده می کنم height آن برابر با مقدار 0 می باشد,در صورتی که کلی محتوا درون آن قرار دارد اما height آن برابر با 0 می باشد,,مثلا اگه به تگ div پدر پس زمینه بدهم ,در خروجی نمایش داده نمی شود چونکه height آن 0 است ,,,لطفا راهنماییم کنید که چطور این مشکل را برطرف کنم؟؟؟
ممنون

وحید صالحی

سلام طول و عرض تصویرتون رو باید براش قرار بدید

amirfff

طول براش در نظر گرفته بودم ولی بازهم نتیجه نداده,,به طور کلی من در داخل div پدر ,مواردی چون لینک ,پاراگراف ,متن ,تگ h1 ,,, قرار می دم ولی اصلا اثر نمی کنه و ارتفاع div پدر برابر با 0 می شه

amirfff

براتون ایمیل کردم استاد

لقمان آوند

نمونه کدیتون که این مشکل رو داره بدید که ببینیم

amirfff

سپاس گزارم از راهنماییتون

sima momeni

با سلام و احترام فراوان به استاد بزرگوارم جناب آقای مهندس وحید صالحی با اجازه ای استادبنده تجربه ای با ویندوزم دارم رو در اختیار دوست عزیزمون بزارم : هر بار که برنامه phpstorm بهتون پیغام خطا داد و ازتون خواست مجدد نصبش کنید یک بار کلا برنامه رو با نرم افزار your uninstaller حذف کنید و پوشه ی برنامه رو از app data فایل های local و rooming پاک کنید داخل رجیستری داخل پوشه های local machine و local user i هم در قسمت software چک کنید اگر داشتینش حتما پوشش رو کامل پاک کنید بعد سیستم رو ریستارت کنید و مجدد نصب رو انجام بدین بعد از اون نباید ارور بده اما اگر ارور داد فقط فایل server را باز کنید و مجدد برنامه را اجرا کنید بر روی گزینه ی سوم قرار دهید و مجدد آدرسی که داخل فایل سرور براتون
گذاشته رو وارد کنید این باعث میشه نرم افزارتون مجدد کرک بشه من خودم خیلی با این مشکل مواجه میشم الان دیگه به لحظه کرک میکنم و ادامه کارم روانجام میدم

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

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

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

نیاز به لاگین

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