آموزش CSS: صفحه آرایش (2012)

سرفصل ها و درس ها

مقدمه Introduction

• خوش آمدی Welcome

• نحوه استفاده از پرونده های تمرینی How to use the exercise files

1. مبانی طرح بندی 1. Layout Basics

• بررسی مدل جعبه Box model review

• محاسبه ابعاد عنصر Calculating element dimensions

• درک سقوط حاشیه Understanding margin collapse

• محاسبه مقادیر em Calculating em values

• جریان اسناد عادی Normal document flow

• صفحه نمایش عنصر کنترل کننده Controlling element display

• با استفاده از تنظیم مجدد CSS Using CSS Resets

• طرح بندی های ثابت ، روان و پاسخگو Fixed, fluid, and responsive layouts

• ابزارهای اشکال زدایی CSS CSS debugging tools

• با استفاده از بازرس Firebug و WebKit Web Inspector Using the Firebug Inspector and the WebKit Web Inspector

2. ملاحظات طراحی 2. Design Considerations

• گردش کار طراحی صفحه Page design workflow

• ابزار طراحی صفحه Page design tools

• تعیین ساختار صفحه Determining page structure

• ایجاد دارایی های تصویر Creating image assets

• ایجاد ساختار صفحه اولیه Creating initial page structure

• اضافه کردن معنی با کلاس ها و شناسه ها Adding meaning with classes and IDs

• ساختار محتوا با HTML5 Structuring content with HTML5

• ساختمان داخلی Building internal structure

3. کار با Floats 3. Working with Floats

• عناصر شناور Floating elements

• پاکسازی شناورها Clearing floats

• حاوی شناورها Containing floats

• روش Clearfix Clearfix technique

• عناصر درون خطی شناور Floating inline elements

• طرح بندی های دو ستونی Two-column floated layouts

• چیدمان های شناور سه ستونی Three-column floated layouts

• ملاحظات ارتفاع ستون Column height considerations

• ایجاد ستون های با ارتفاع برابر Creating equal-height columns

• شناورها: آزمایشگاه Floats: Lab

• شناورها: راه حل Floats: Solution

4- عناصر موقعیت یابی 4. Positioning Elements

• موقعیت یابی نسبی Relative positioning

• موقعیت مطلق Absolute positioning

• موقعیت یابی ثابت Fixed positioning

• کنترل سفارش انباشت Controlling stacking order

• قطع کردن محتوا Clipping content

• کنترل سرریز محتوای Controlling content overflow

• عناصر موقعیت یابی: آزمایشگاه Positioning elements: Lab

• عناصر موقعیت یابی: راه حل Positioning elements: Solution

5. طرح های ثابت ساختمان 5. Building Fixed Layouts

• ملاحظات طراحی برای طرح بندی های ثابت Design considerations for fixed layouts

• ایجاد شبکه طرح Establishing the layout grid

• تعیین فاصله ستون Defining column spacing

• استفاده از شبکه از طریق CSS Applying the grid through CSS

• ایجاد دارایی های مبتنی بر شبکه Creating grid-based assets

• منابع طراحی شبکه Grid design resources

• طرح بندی های ثابت ساختمان: آزمایشگاه Building fixed layouts: Lab

6. ساختن طرح های انعطاف پذیر 6. Building Flexible Layouts

• طراحی برای طرح بندی های منعطف Designing for flexible layouts

• محاسبه مقادیر درصد Calculating percentage values

• محاسبه مقادیر درصد Calculating percentage values

• مقادیر عرض انعطاف پذیر Setting flexible width values

• انعطاف پذیری تصاویر Making images flexible

• تنظیم حداقل و حداکثر عرض Setting minimum and maximum widths

• ساخت طرح بندی انعطاف پذیر: آزمایشگاه Building flexible layouts: Lab

• ایجاد طرح بندی انعطاف پذیر: راه حل Building flexible layouts: Solution

7. ساختن طرح های پاسخگو 7. Building Responsive Layouts

• نمای کلی طرح پاسخگو Responsive layout overview

• با استفاده از پرس و جوهای رسانه ای Using media queries

• سبک های سازماندهی Organizing styles

• پاسخگو بودن محتوا Making content responsive

• ملاحظات مربوط به طراحی موبایل Mobile design considerations

• طرح بندی پاسخگو ساختمان: آزمایشگاه Building responsive layouts: Lab

• طرح بندی پاسخگو ساختمان: راه حل Building responsive layouts: Solution

8. تقویت صفحه طراحی 8. Enhancing Page Design

• ایجاد متن چند ستونی Creating multi-column text

• استفاده از مرزها برای تقویت طراحی Using borders to enhance design

• گوشه های گرد Rounding corners

• اضافه کردن سایه های قطره ای Adding drop shadows

• کار با کدورت Working with opacity

• استفاده از ویژگی پیش زمینه Utilizing the background property

• کار با sprites CSS Working with CSS sprites

• تقویت صفحه طراحی: آزمایشگاه Enhancing page design: Lab

• تقویت صفحه طراحی: راه حل Enhancing page design: Solution

منابع اضافی Additional Resources

• منابع اضافی Additional resources