CSS: طرح‌بندی صفحه (2012)

مدرس James Williamson

انتشار 2012/02/08

مدت زمان 8h 57m

سطح مبتدی

فایل تمرینی دارد

آموزش CSS: Float-Based Page Layouts (2012)

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

Cascading Style Sheets (CSS) Layout Design Web Design

Introduction

Welcome ()

How to use the exercise files ()

1. Layout Basics

Box model review ()

Calculating element dimensions ()

Understanding margin collapse ()

Calculating em values ()

Calculating percentage values ()

Normal document flow ()

Controlling element display ()

Using CSS Resets ()

Fixed, fluid, and responsive layouts ()

CSS debugging tools ()

Using the Firebug Inspector and the WebKit Web Inspector ()

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 ()

Structuring content with HTML5 ()

Building internal structure ()

3. Working with Floats

Floating elements ()

Clearing floats ()

Containing floats ()

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. Positioning Elements

Relative positioning ()

Absolute positioning ()

Fixed positioning ()

Controlling stacking order ()

Clipping content ()

Controlling content overflow ()

Positioning elements: Lab ()

Positioning elements: Solution ()

5. Building Fixed Layouts

Design considerations for fixed layouts ()

Establishing the layout grid ()

Defining column spacing ()

Applying the grid through CSS ()

Creating grid-based assets ()

Grid design resources ()

Building fixed layouts: Lab ()

6. Building Flexible Layouts

Designing for flexible layouts ()

Calculating percentage values ()

Setting flexible width values ()

Making images flexible ()

Setting minimum and maximum widths ()

Building flexible layouts: Lab ()

Building flexible layouts: Solution ()

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. Enhancing Page Design

Creating multi-column text ()

Using borders to enhance design ()

Rounding corners ()

Adding drop shadows ()

Working with opacity ()

Utilizing the background property ()

Working with CSS sprites ()

Enhancing page design: Lab ()

Enhancing page design: Solution ()

Additional Resources

Additional resources ()

Ex_Files_CSS_Page_Layout.zip (54.4 MB)

دانلود فایل فشرده

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

در حال به روزرسانی اطلاعات

درخواست لینک دانلود

در حال به روزرسانی اطلاعات

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

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