campaign-edianeh-98

دوره مجازی طراحی وب (جلسه 14): ویژگی های CSS - قسمت چهارم



visibility  
mode_comment   ۳۴

امروز آخرین جلسه از آموزش ویژگی های CSS3 و CSS رو برای شما خواهیم داشت . ویژگی هایی که در این جلسه خواهیم گفت بیشتر مربوط به جداول، لیست ها و ستون بندی ها هست . این جلسه آخرین جلسه مربوط به آموزش ویژگی های CSS بود و از جلسه بعد آموزش های عملی و کاربردی رو شروع خواهیم کرد.

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

  • ویژگی z-index و کاربردهای آن
  • ویژگی border-collapse و کاربردهای آن
  • ویژگی border-spacing و کاربردهای آن
  • ویژگی caption-side و کاربردهای آن
  • ویژگی empty-cells و کاربردهای آن
  • ویژگی table-layout و کاربردهای آن
  • ویژگی counter-increment و کاربردهای آن
  • ویژگی counter-reset و کاربردهای آن
  • ویژگی list-style و کاربردهای آن
  • ویژگی list-style-image و کاربردهای آن
  • ویژگی list-style-position و کاربردهای آن
  • ویژگی list-style-type و کاربردهای آن
  • ویژگی content و کاربردهای آن
  • ویژگی cursor و کاربردهای آن
  • ویژگی outline و کاربردهای آن
  • ویژگی outline-color و کاربردهای آن
  • ویژگی outline-offset و کاربردهای آن
  • ویژگی outline-style و کاربردهای آن
  • ویژگی outline-width و کاربردهای آن
  • ویژگی resize و کاربردهای آن
  • ویژگی text-overflow و کاربردهای آن
  • ویژگی columns و کاربردهای آن
  • ویژگی column-count و کاربردهای آن
  • ویژگی column-fill و کاربردهای آن
  • ویژگی column-gap و کاربردهای آن
  • ویژگی column-rule و کاربردهای آن
  • ویژگی column-rule-color و کاربردهای آن
  • ویژگی column-rule-style و کاربردهای آن
  • ویژگی column-rule-width و کاربردهای آن
  • ویژگی column-span و کاربردهای آن
  • ویژگی column-width و کاربردهای آن
info توجه

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

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

comment دیدگاه کاربران
Mahdi replyپاسخ

ممنون از زحماتتون… ❓

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

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

لقمان آوند

قول نمیدم ولی این مورد رو بررسی می کنیم .

Syd Ali Bararsani

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

لقمان آوند

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

افشین زندی

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

لقمان آوند

سعی می کنیم نکاتی رو در این مورد بگیم .
موفق باشید

sadaf replyپاسخ

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

لقمان آوند

بله ایشالله

سمیرا replyپاسخ

سلام استاد عزیز
یه سوال : من دوتا فرم یکسان در دو صفحه html دارم . با این تفاوت که فرم در صفحه دوم 3 بار تکرار شده برای چاپ و برش. چطوری میتونم فرم دومم رو طوری تنظیم کنم که هر آنچه که در فرم اول تیک میخوره مثل چک باکس ها یا ردیو باتم ها و اطلاعات دیگر که نوشته میشوند عینا در فرم دوم هم اطلاعات اتوماتیک منتقل شوند وموارد تیک بخورند ؟ آیا با چیزهایی که تا این جلسه خوندیم ممکنه ؟

لقمان آوند

خیر، برای انجام اینکار باید جاوااسکریپت بلد باشید …

سمیرا replyپاسخ

و ایا ایندو متفاوتند؟

{“…”:li : before {contant

{“…”:li :: before {contant

لقمان آوند

سلام
تا حدودی تفاوت دارند . مخصوصا تو css3 .
این مقاله رو بخونید تفاوتوشون رو گفته .

Mohsen replyپاسخ

جناب آوند اگر بخواهیم برای list-style از فونت آیکون استفاده کنیم چه باید کرد؟

لقمان آوند

css list style font icon رو در گوگل سرچ کنید به نتیجه دلخواه خواهید رسید .

zahra zolfaghari replyپاسخ

سلام استاد پارتهای 14و15و16و17 نصفه دانلود میشن چیکارکنم راهنمایی کنید ممنون

لقمان آوند

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

miladcr7 replyپاسخ

سلام جناب اوند .قبل از هر چیزی خسته نباشید میگم واقعا خدمتتون .کاری بسیار خوب و عالی انجام دادید .خیلی ممنون .ولی یه سری اشکالات هم هستش که گفتم خدمتتون عرض کنیم شااید به درد بخوره .راستش از جلسات 9 به بعد تا اینجا یه نکته ای که یکم تو ذوق میزنه و کیفیت کارتون رو پایین میاره اینه که از قبل باید مثالایی که میخواین بزنید رو انجام بدید .این کار 2 مزیت داره : اولا اینکه به توضیحاتتون مسیر درستی میده ثانیا نیازی نیست وسط توضیحات فکر کنید که چه مثالایی باید بزنید .چون مثلا یه مثال میزنید و خروجی مطابق انتظار نیستش و این یکم از کیفیت کارتون رو پایین میاره

لقمان آوند

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

Amir Th replyپاسخ

سلام خسته نباشید استاد آوند من در بعضی مباحث واقعن گیج میشم مثلن فلوت رو فهمیدم ولی مثلن تو منو های ابشاری که به کار میره گیج میشم و نمی فهمم چی شد میخواستم بدونم که چی کار باید کرد تا در مباحث درست کردن منوی سایت که همیشه اذیت میشم و مسلط نیستم و مبحث قرار دادن قسمت های مختلف سایت کنار هم مثلن قرار دادن چند بخش متفاوت کنار هم مبدن که کا های باید از position right left وکجا باید از float و margin استفاده کنم

لقمان آوند

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

Arash Taghavi replyپاسخ

سلام.خسته نباشید.من به یه مشکل خوردم.فرض کنید یک دیو ساختم و عرضشو 100 درصد گذاشتم.حالا میخوام محتوا رو توو یه دیو دیگه با عرض 960 پیکسل بزارم.بصورتی که دیوی که 960 پیکسل عرضش داره،درون دیو با عرض 100 درصد قرار داره.حالا به دیوی که عرض 960 داره اگه مارجین چپ و راست بدم مشکلی نیست.اما مارجین از بالا میدم علاوه بر اینکه خود دیو 960 پیکسلی اون فاصله رو میگیره؛اون دیو اصلی که عرض 100 درصد هم داره به اندازه ی مارجینی که دادم از بالا فاصله میگیره،چرا این اتفاق میافته برای مارجین بالا؟ البته ناگفته نمونه وقتی به دیو که عرض 100 درصد داره یه پدینگ غیر صفر میدم این مشکل برطرف میشه.ممنون میشم راهنمایی کنید

Arash Taghavi replyپاسخ

مرسی که فقط سوال رو تایید کردین.یک هفته س منتظر جوابم.واقعا نمیدونم این چه روشیه شما دارین که هرررررجا (چه اینجا،چه انجمن،چه ایمیل) سوال میپرسم جواب نمیدین

وحید صالحی

ابتدا عذر خواهی می کنم باور کنید حجم سوالات بالاست و بعضا بعضی هاش از دستمون در میره وگرنه قصدی در این کار نیست

Arash Taghavi

شما تاج سرمایی آقای صالحی.ولی باور کنید وقتی یک هفته منتظر میمونم واسه جواب سوالی که با سرچ پیدا نکردم واقعا کلافه میشم :((

Arash Taghavi replyپاسخ

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

وحید صالحی

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

Arash Taghavi

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

وحید صالحی

مجددا بنده از شما عذر خواهی می کنم دوست عزیز واقعا همونطور بود که عرض کردم

مهدی جی اج replyپاسخ

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

http://s8.picofile.com/file/8267786134/tamrin.zip.html

میشه نظرتون رو راجع بهش بدید؟
اصولی و با توجه به آموزش هاتون بوده؟

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

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

ممنون میشم زود پاسخ بدید

مرسی

وحید صالحی

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

سوال اول برای چسبیدن قسمت های سبز و ابی به کلاس tags مقدار width برابر 30% هست که به 50% افزایش بدید اما لازم به ذکر هست به خاطر ltr بودن یا چپ چین بودن قالب ممکنه در جاهای دیگه هم به مشکل برخورد کنید

سوال دوم برای قرار دادن کپشن در وسط :ابتدا آی دی #titles رو مقدار width برابر 60% هست که برابر 100% قرار بدید بعدش باید درون همین عنصر با آی دی #titles دو تا div دیگه ایجاد کنید و هر یک از متن هار رو درون یکی از این div ها قرار بدید و پراپرتی text-align هریک از div ها رو برابر center قزاز بدید

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

مهدی جی اج

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

وحید صالحی

سلام خیر دنبال نمی کنم دوست عزیز شما نظر بنده رو خواستید و بنده هم گفتم اگر کار روی قالب ltr بوده پس ادامه بدید آقای آوند فعلا مشغلشون زیاده و بنده هم خواستم که مشکلتون حل بشه و منتظر نمونید…

ارسال نظرات

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