کتاب ۱۰۱ نکته و ترفند برای استفاده از CSS در طراحی وب

۱۳۹۷-۱۰-۰۴
موجود است ...

tip and trick to using css in web design book 5286 تصویر

موجود است

کتاب ۱۰۱ نکته و ترفند برای استفاده از CSS در طراحی وب

نویسنده:ریچل اندرو

مترجم:امیر عباس عبدالعلی

ناشر:ناقوس

سال انتشار:۱۳۹۷

نوبت چاپ:پنجم

تعداد صفحات:۳۶۰

شابک:۹۷۸-۹۶۴-۹۴۷۸۳-۸-۲

زبان:فارسی

۴۲,۰۰۰ تـــــومان

توضیحات

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

فهرست مطالب کتاب

فصل اول – شروع کار با CSS

  • مشکلات در استفاده از زبان HTML
  • تعریف سبکها با استفاده از CSS
  • گزینشگر های CSS

فصل دوم – سبک دهی به متن و سایر مسائل مقدماتی

  • چگونه دستورات FONT را با CSS جایگزین کنیم؟
  • باید از کدام یک از واحد های pixel ، point  ، ems استفاده کنم ؟ آیا به واحد دیگری جز این موارد هم نیاز است؟
  • چگونه تعیین کنم که متن مورد نظر من با فونت معینی نمایش داده شود؟
  • چگونه خطوط زیرین لینک ها را حذف کنم؟
  • چگونه لینکی ایجاد کنم که در زمانی که نشانگر ماوس بر روی آن قرار می گیرد، تغییر رنگ بدهد؟
  • چگونه لینک هایی با دو سبک متفاوت را در یک صفحه نمایش دهم؟
  • چگونه به بخش عنوان، رنگ پس ز مینه اضافه کنم؟
  • چگونه به عناوین، خط زیرین اضافه کنم؟
  • چگونه از دست فاصله زیاد بین عناوین ایجاد شده توسط دستور <h1> و پاراگرافی که بعد آن میاید خلاص شوم
  • چگونه بدون استفاده از برچسب های font یک متن را در صفحه با فونت ضخیم نمایش دهم؟
  • چگونه با استفاده از خصوصیت line – height فاصله بین خطوط متن را تغییر دهم؟
  • چگونه متن را در صفحه تراز کنم؟
  • چگونه یک خط افقی را در صفحه سبک دهی کنم؟
  • چگونه متن را از کناره صفحه فاصله دهم؟
  • چگونه متن را در میانه صفحه متمرکز کنم؟
  • چگونه تمامی حروف یک عبارت متنی را به وسیله CSS با حروف بزرگ نمایش دهم؟
  • چگونه نشانه های کوچکی را که به فرم مربع یا دایره در فهرست ها به کار گرفته می شود حذف کنم و یا تغییر دهم؟
  • چگونه یک تصویر را به جای نشانه های مربع یا دایره مربوط به فهرست قرار دهم؟
  • چگونه فاصله هایی را که میان یک فهرست و لبه سمت چپ سند دیده می شود حذف کنم؟
  • چگونه یک فهرست را به شکل افقی نمایش دهم؟
  • چگونه به یک فایل CSS توضیحاتی را اضافه کنیم؟
  • چگونه از دست فاصله هایی که در اطراف سند ظاهر می شود خلاص شوم ؟ البته بدون دستکاری برچسب <body>

فصل سوم – CSS و تصاویر

  • چگونه می توانم به یک تصویر، خط مرزی (خط دور) اضافه کنم؟
  • چگونه خط مرزی را که HTML به طور پیش فرض به تصاویر لینک میدهد با خصوصیات CSS جایگزین کنم؟
  • چگونه می توانم با استفاده از CSS یک تصویر را پس زمینه صفحه خود قرار دهم؟
  • چگونه می توانم محل قرارگیری تصویر پس زمینه را تعیین کنم؟
  • چگونه می توانم تصویر را در پس زمینه قرار دهم به طوری که وقتی صفحه پیمایش می شود تصویر ثابت بماند و فقط عناصر پیش زمینه scroll شوند؟
  • چگونه می توانم برای عناصر دیگر صفحه، تصویر پس زمینه تعیین کنم؟
  • چگونه می توانم بر روی تصویر پس زمینه متن قرار دهم؟
  • چگونه می توانم بیش از یک تصویر را در پس زمینه صفحه قرار دهم؟

فصل چهارم – ایجاد بخش ناوبری سایت با استفاده از CSS

  • چگونه بخش ناوبری مبتنی بر تصاویر را با CSS جایگزین کنم؟
  • چگونه یک فهرست ساخت یافته را سبک دهی کنم و از آن به عنوان یک بخش ناوبری استفاده کنم؟
  • چگونه از CSS برای ایجاد و سبک دهی بخش ناوبری پویا استفاده کنم؟
  • آیا من می توانم با استفاده از CSS یک بخش ناوبری ایجاد کنم که دارای زیر مجموعه نیز باشد؟
  • چگونه به کمک فهرست ها و CSS یک فهرست افقی ایجاد کنیم؟
  • چگونه به اجزای درون فهرست که شبیه به دکمه های ساده سبک دهی شده اند، جلوه سه بعدی بدهم؟
  • چگونه بخش ناوبری را به شکل سربرگ و به کمک CSS بسازیم؟
  • چگونه شکل مکان نمای ماوس را تغییر دهم؟
  • چگونه جلوه rollover را بدون Javascript و تنها با استفاده از CSS ایجاد کنم؟

فصل پنجم – داده های جدولی

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

فصل ششم – فرم ها و واسط های کاربری

  • چگونه می توانم عناصر مربوط به فرم را با استفاده از CSS سبک دهی کنم؟
  • چگونه می توانم سبک های متفاوتی را به فیلد های مختلف یک فرم اختصاص دهم؟
  • چگونه می توانم از اضافه شدن فضای سفید به اطراف فرم جلوگیری کنم و چطور فرم را در وسط یک خط قرار دهم؟
  • چگونه یک دکمه تایید ایجاد کنم که شبیه به دکمه های متنی باشد؟
  • چگونه اطمینان داشته باشم که آن دسته از کاربران که از مرورگر های متنی استفاده می کنند، قادر به درک فرمها و پرکردن آنها خواهند بود؟
  • چگونه می توانم به جای استفاده از برچسب <tabel> یک فرم با طرح دو ستونی را با استفاده از CSS ایجاد کنم؟
  • چگونه می توانم چند فیلد مرتبط با هم را به شکل گروه در آورم؟
  • چگونه با استفاده از CSS در صفحات وب، کلید های دسترسی را ایجاد و سبک دهی کنم؟
  • چگونه یک لیست پایین افتادنی ایجاد کنم که هر گزینه داخل لیست با رنگ متفاوتی نمایش یابد؟
  • من در طرح خود فرمی دارم که به کاربران اجازه می دهد، اطلاعاتی را در آن وارد کنند و محیط این فرم، کاملاً شبیه محیط برنامه های صفحه گسترده است. چگونه می توانم این فرم را با استفاده از CSS سبک دهی کنم؟
  • چگونه فیلد های داخل فرم را سبک دهی کنم تا وقتی که کاربر بر روی فیلد ها کلیک کرد، نمای فیلد انتخاب شده از بقیه فیلد ها متمایز شود؟

فصل هفتم – پشتیبانی از مرورگر ها و ابزار های مختلف

  • سایت طراحی شده خود را باید در چه مرورگر هایی تست کنم؟
  • بر روی سیستم من فقط یک سیستم عامل نصب شده است. چگونه می توانم سایت خود را در مرورگر های یک سیستم عامل دیگر تست کنم؟
  • آیا خدماتی وجود دارد که سایت طراحی شده مرا در محیط مرورگر های مختلف به من نشان دهد؟
  • آیا من می توانم چندین نسخه متفاوت از مرورگر Internet Explorer را بر روی ویندوز نصب کنم؟
  • چگونه می توانم سایت خود را در مرورگر هایی که فقط متن را پشتیبانی می کنند تست کنم؟
  • چگونه می توانم سایت خود را در یک برنامه صفحه خوان تست کنم؟
  • چگونه می توانم فایل CSS را از دید مرورگر Netscape 4 مخفی کنم؟
  • چگونه می توانم برگه سبکی مخصوص مرورگر Netscape 4 ایجاد کنم؟
  • چگونه می توانم برای کسانی که از مرورگر های نسخه ۴ استفاده می کنند، یک پیغام قرار دهم و دلیل درست نمایش داده نشدن سایت را برای آنها شرح دهم؟
  • چگونه می توانم فابل CSS را از دید دیگر مرورگر ها مخفی کنم؟
  • چرا سایت طراحی شده توسط من در مرورگر های Internet Explorer 6 و موزیلا به شکل متفاوتی نمایش داده می شود؟
  • من فکر می کنم که یک اشکال در CSS پیدا کرده ام حالا باید چیکار کنم؟
  • بخشی از محتوای سایت من در مرورگر Internet Explorer 6 گاهی ظاهر و دوباره محو می شود باید چیکار کنم ؟
  • پیغام های هشدار یا خطایی که هنگام تایید کردن سند در تایید کننده W3C دریافت می کنم بیان کننده چیست؟
  • چگونه می توانم برای ابزار خاص مانند ابزار های صفحه خوان یک برگه سبک مخصوص ایجاد کنم؟
  • چگونه می توانم برگه سبک مخصوص چاپ ایجاد کنم؟
  • بعضی از مرورگر ها به کاربران این اجازه را می دهند که از بین چند برگه سبک موجود، یکی را انتخاب کنند. چگونه می توانم چند برگه سبک را به صفحه خود متصل کنم تا کاربران بتوانند یکی را به دلخواه انتخاب کنند؟
  • چگونه می توانم یک تعویض کننده برگه سبک ایجاد کنم؟
  • چگونه از برگه های سبک انتخابی استفاده کنم، بدون اینکه لازم باشد همه دستورات CSS برگه سبک اصلی را در برگه سبک دوم کپی کنم؟

فصل هشتم – طراحی و موقعیت دهی عناصر با استفاده از CSS

  • چگونه متوجه شوم که در چه زمانی باید از کلاس در چه زمانی باید از شناسه استفاده کنم؟
  • آیا من می توانم یک عنصر درون خطی را همانند یک عنصر بلوک و یا یک عنصر بلوک را همانند یک عنصر درون خطی نمایش دهم؟
  • چگونه حاشیه ها و فاصله درونی را در CSS تعریف کنم؟
  • چگونه من می توانم متن را در کنار تصویر منظم کنم، بدون اینکه از ویژگی align در HTML  استفاده کنم؟
  • چگونه از حرکت عناصر به سمت بالا در هنگام استفاده از خصوصیت float جلوگیری کنم؟
  • چگونه می توانم لوگو و تیتر سایت را در سمت چپ و یا راست منظم کنم، بدون اینکه از برچسب <table> استفاده کنم؟
  • چگونه موقعیت یک عنصر را در صفحه با استفاده از CSS تعیین کنم؟
  • چگونه یک بلوک را با استفاده از CSS در وسط صفحه موقعیت دهی کنم؟
  • آیا من می توانم همان طرح قبلی را به شکل معکوس در آورم، به طوری که فهرست در سمت راست و محتوا در سمت چپ باشد؟
  • چگونه من می توانم یک طرح دو ستونی با عرض ثابت و متمرکز در وسط صفحه ایجاد کنم؟
  • چگونه می توانم یک طرح سه ستونی را با استفاده از CSS ایجاد کنم؟
  • چگونه یک پاورقی مناسب را با استفاده از CSS به صفحه اضافه کنم؟
  • چگونه یک گالری از تصاویر بند انگشتی را بدون استفاده برچسب <table> ایجاد کنم؟

فصل نهم – خصوصیات ویژه CSS برای مرورگر های خاص، و تکنیک های قابل استفاده در آینده

  • چگونه می توانم نوار پیمایش طولی را با رنگی متفاوت سبک دهی کنم؟
  • چگونه می توانم یک فهرست برای سایت خودم ایجاد کنم که هنگام پیمایش صفحه در جای خود ثابت بماند؟
  • چگونه می توانم بخش ناوبری را به شکل ثابت در صفحه قرار دهم به طوریکه در Internet Explorer نیز این بخش در صفحه ثابت باشد و پیمایش (scroll) نشود؟
  • آیا من می توانم ک پاورقی در صفحه ایجاد کنم که همانند یک فریم، هنگام پیمایش صفحه در جای خود ثابت بماند و حرکت نکند؟
  • آیا می توانم یک فهرست پایین افتادنی را تنها با استفاده از CSS ایجاد کنم؟
  • آیا من می توانم با استفاده از CSS گوشه های گرد برای عناصر صفحه ایجاد کنم؟
  • آیا می توانم برای عناصر صفحه، گوشه های گرد ایجاد کنم به طوی که بر روی تمامی مرورگر ها قابل استفاده باشد؟
  • چگونه یک عنصر را در صفحه به شکل نیمه شفاف در آورم به طوری که در مرورگر های Internet Explorer و مرورگر های نسل موزیلا به خوبی کار کند؟
  • چگونه می توانم با استفاده از CSS به کاربران نشان دهم که کدام لینک ها، لینک به مطالب داخلی و کدام لینک ها، لینک به صفحات خارج سایت است؟
  • آیا من می توانم با استفاده از CSS متنی را به صفحه خود اضافه کنم؟
  • چگونه می توانم حرف اول یا خط اول یک بلوک متن را به شکل متفاوتی از بقیه متن سبک دهی کنم؟
  • آیا استفاده از جلوه هایی که فقط در گروه خاصی از مرورگر ها اجرا می شوند، کار اشتباهی است؟

نوشته کتاب ۱۰۱ نکته و ترفند برای استفاده از CSS در طراحی وب اولین بار در سورس سرا - آموزش برنامه نویسی. پدیدار شد.