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



visibility  
mode_comment   ۸۲

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

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

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

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

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

comment دیدگاه کاربران
Farhad Ashtari

سلام استاد
ببخشید اگه زحمت نیست این سایت رو ببینید:
http://www.colorsontheweb.com/colorwizard.asp
کاری که این سایت می کنه اینه که با انتخاب یک رنگ میاد و رنگ های دیگه مرتبط به اون رو به شما پیشنهاد می ده که شما بتونید از اون در طراحی هاتون استفاده کنید. اما من متوجه نمی شم از این ترکیب های رنگی پیشنهاد داده شده چطور باید استفاده کرد؟ این سایت رنگ های پیشنهادی رو در سه دسته Hue , Saturation , Tint & Shade دسته بندی می کنه. ولی من دقیقا نمی دونم چطور باید از رنگ های پیشنهاد داده شده در طراحی های خودم استفاده کنم. جواب این سوال خیلی برام ضروریه ممنون میشم اگر توضیح بدید.
با تشکر

وحید صالحی

hue مقدار رنگ اولیه هست مثل زنگ آبی Saturation مقدار غلظت رنگ اولیه هست مثل آبی تیره Tint & Shade مقداره سایه روشن موجود در رنگ هست حالا بنا به رنگی که با اون دستگیره ها ایجاد میکنید این مقادیر تغییر میکنه که من رنگ آبی رو مثال زدم بعد از اینکه رنگ مورد نظر رو بدست آوردی مقادش رو کپی و در جای دلخواه استفاده کن مقدارشم همون اعداد و حروفی هست که جلوی هر رنگ با علامت # مشخص شده فقط هر مقداری رو کپی کردی جایی که خواستی استفاده کنی علامت # در ابتداش بزار

Farhad Ashtari

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

وحید صالحی

در css بطور مستقیم پراپرتی برای این کار وجود نداره و باید از یک ترفند استفاده کنید طبق الگویی که در لینک زیر موجوده عمل کنید نیاز به توضیح نداهر خیلی ساده هست:

لینک

Pouriya

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

وحید صالحی

سلام باز زبان های مثل php و asp میشه نوشت و انتخاب هر کدوم بستگی به خودتون داره کدام یک رو تمایل دارید فرا بگیرید

بهرام آزادی

سلام
یه سوال
در کدنویسی های صورت گرفته در پروژه ها گاهی به خاصیت href مقدار # داده شده است
این به چه معناست؟

وحید صالحی

برای این هست که خاصیت لینک رو به متن بدیم اما لینک به جایی نباشه در بعضی موارد هم برای نصبت دادن یک آی دی از یک عنصر به یک لینک استفاده میشه که بیشتر در جاوااسکریپت کاربرد داره

Mohsen Abedi

سلام
phpStorm من مشکل داره بعضی تگ های رایج رو نمیشناسه مثلا تگ hgroup رو که میخوام استایل بده(عین آموزش استاد آوند) اصلا اعمال نمیکنه دقیقا مو به مو عین اموزش رفتم جلو ولی اصلا قبول نمیکنه

لقمان آوند

سلام
تو آخر آموزش توضیح دادیم. این تگ منسوخ شده و دیگه استفاده نمیشه. دیگه کجا ها چیزی رو نمیشناسه؟

Pouriya

استاد hgroup منسخ شده
w3sch رو نگاه کردم نبودش میخواستم بببینم جایگزین داره یا نه
جایگزین نداره یا مهم نیست؟

لقمان آوند

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

amirfff

سلام خدمت اساتید و دوستان
زمانی که نرم افزار php storm را اجرا می کنم , با پیغام Your PhpStorm evaluation has expired روبرو می شم ,ونمی تونم وارد نرم افزار بشم ,چجوری می تونم این مشکل رو برطرف کنم؟؟؟؟؟؟

وحید صالحی

باید مجددا نصب کنید و کرک کنید نرم افزارتون الان تارخ مصرفش گذشته و به عبارتی expire شده

sima momeni

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

amirfff

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

amirfff

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

وحید صالحی

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

amirfff

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

لقمان آوند

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

amirfff

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

amirfff

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

لقمان آوند

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

amirfff

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

єѕмαιℓ

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

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

لقمان آوند

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

وحید صف آرا

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

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

یعنی چی؟!

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

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

ارسال نظرات

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

1 2 3