آموزش دست در طراحی وب Responsive است

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

ساخت یک پرونده شروع پاسخگو Building a Responsive Start File

• مقدمه Introduction

• دستور جلسه Agenda

• ساختمان بدن Body Structure

• شیوه نامه ها Stylesheets

• دروغ نگو Do Not Lie

• تغییر اندازه قلم Font Resize

• مدل جعبه Box Model

• اینترنت اکسپلورر IE Fix

• پیوند جی کوئری jQuery Link

• قلم های گوگل Google Fonts

• خلاصه Summary

پیمایش با استفاده از CSS خالص Navigation Using Pure CSS

• بررسی اجمالی Overview

• پیاده سازی تلفن خالص CSS را پیاده سازی کنید Implement Pure CSS Phone Navigation

• بهبود پیمایش تبلت Tablet Navigation Enhancement

• پیشرفت ناوبری دسک تاپ Desktop Navigation Enhancement

• آزمایش مرورگر چندگانه Multiple Browser Testing

• خلاصه Summary

پیمایش با استفاده از نمایش/پنهان کردن jQuery Navigation Using jQuery Show/Hide

• بررسی اجمالی Overview

• جی کوئری را متصل کرده و دکمه ای اضافه کنید Connect jQuery and Add a Button

• سبک پیمایش تلفن را انتخاب کنید Style the Phone Navigation

• به Tablet Navigation و Test سبک دهید Style the Tablet Navigation and Test

• خلاصه Summary

پیمایش با استفاده از گزینه/Select و Suckerfish برای دسک تاپ Navigation Using Option/Select and Suckerfish for Desktop

• بررسی اجمالی Overview

• اتصال جی کوئری Connect jQuery

• سبک پیمایش تلفن را انتخاب کنید Style the Phone Navigation

• به Tablet and Desktop Navigation سبک دهید Style the Tablet and Desktop Navigation

• آزمایش کردن Testing

• خلاصه Summary

پیمایش با استفاده از یک دکمه ناوبری در حال گسترش Navigation Using an Expanding Navigation Button

• بررسی اجمالی Overview

• برپایی Setup

• پیمایش تلفنی قسمت 1 Phone Navigation Part 1

• پیمایش تلفنی قسمت 2 Phone Navigation Part 2

• یک ظاهر طراحی شده روی دسک تاپ Styling the Desktop

• آزمایش کردن Testing

• خلاصه Summary

ستون های پاسخگو با استفاده از یک شبکه 12 ستونی Responsive Columns Using a 12-column Grid

• بررسی اجمالی Overview

• برپایی Setup

• تک ستون Single Column

• دو ستون Double Columns

• ستون های سه گانه Triple Columns

• عرض ستون مخلوط Mixed Column Width

• شش ستون با تصاویر Six Columns With Images

• تست دستگاه و مرورگر Device and Browser Testing

• خلاصه Summary

تصاویر پاسخگو Responsive Images

• مقدمه Introduction

• برپایی Setup

• قهرمان ساخت تصویر در فتوشاپ Hero Image Creation in Photoshop

• کدگذاری تصویر قهرمان Coding the Hero Image

• ایجاد عکس عکس در فتوشاپ Photo Image Creation in Photoshop

• کدگذاری عکس Coding the Photograph

• ایجاد تصویر قابل تغییر در فتوشاپ Swappable Image Creation in Photoshop

• کدگذاری تصویر قابل تغییر Coding the Swappable Image

• آزمایش کردن Testing

• خلاصه Summary

نمادها Icons

• مقدمه Introduction

• برپایی Setup

• ساخت یک ورق تک ستونی در فتوشاپ Building a Single Column Sprite Sheet in Photoshop

• ساخت یک ورق دو ستون در فتوشاپ Building a Double Column Sprite Sheet in Photoshop

• کدگذاری نمادهای اجتماعی در هدر تلفن Coding the Social Icons in the Phone Header

• کدگذاری نمادهای اجتماعی در سربرگ Tablet و Desktop Coding the Social Icons in the Tablet and Desktop Header

• کدگذاری نمادهای اجتماعی در پاورقی Coding the Social Icons in the Footer

• وارد کردن و استفاده از قلم برای نمادها Importing and Using a Font for Icons

• آزمایش کردن Testing

• خلاصه Summary

پیش پردازنده CSS CSS Preprocessor

• مقدمه Introduction

• برپایی Setup

• پردازش پرونده ها Processing the Files

• خلاصه Summary