آموزش ایجاد یک طراحی وب Responsive

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

مقدمه Introduction

• مقدمه ای بر این دوره Introduction to This Course

• درباره این دوره About This Course

• شرایط و فناوری مورد پوشش شما Terms and Technology You'll Be Covering

• آنچه برای تکمیل این دوره به آن نیاز دارید What You'll Need to Complete This Course

• درباره فایلهای تمرینی About the Exercise Files

آماده سازی محتوا و ساختار HTML Preparing the HTML Content and Structure

• راه اندازی پروژه شما Setting up Your Project

• استراتژی HTML برای طرح شما The HTML Strategy for Your Layout

• ایجاد محفظه های اصلی HTML Creating the Main HTML Containers

• افزودن محتوا به عنوان Adding Content into the Header

• افزودن محتوا به بخش اصلی Add Content to Main Section

• افزودن محتوا به بخش جو Add Content to Atmosphere Section

• محتوا را به بخش نحوه ورود اضافه کنید Add Content to the How-to Section

• افزودن پیمایش Adding the Navigation

• افزودن محتوای پاورقی Adding the Footer Content

ایجاد سبک و چیدمان با CSS Creating the Style and Layout with CSS

• وارد کردن Google Font Importing a Google Font

• تعریف سبک های اصلی متن Defining the Basic Text Styles

• به عنوان و صفحه Container سبک دهید Style the Heading and Page Container

• به آرم و مورد قهرمان سبک دهید Style the Logo and Hero Item

• ایجاد سبک دکمه ای Creating the Button Style

• تنظیم ردیف سه ستونی Setting up Three-column Row

• افزودن گرافیک به بخش اصلی Adding Graphics to the Main Section

• پاکسازی شناورها با عناصر شبه CSS Clearing Floats with CSS Pseudo-elements

• یک ظاهر طراحی بخش جو Styling the Atmosphere section

• سبک بخش عناصر جداگانه Styling the How-To Section Aside Elements

• سبک کردن عنصر Blockquote بخش How-To Styling the How-To Section Blockquote Element

• افزودن محتوا با عناصر شبه Adding Content with Pseudo-elements

• یک ظاهر طراحی پاورقی Styling the Footer

ایجاد سیستم منو با CSS Creating a Menu System with CSS

• موقعیت یابی مجدد Nav Re-positioning the Nav

• سبک کردن موارد Nav List و پیوندها Styling the Nav List-items and Links

• نمایش و پنهان کردن منوهای زیر Nav Showing and Hiding the Nav Sub Menus

• گزینه های سازگاری دستگاه برای Nav Device Compatibility Options for Nav

• اضافه کردن فلش های نشانگر Adding Indication Arrows

ایجاد تنظیمات چیدمان برای صفحه های بزرگ و متوسط Making Layout Adjustments for Large and Medium Screens

• ایجاد تنظیمات جزئی برای صفحه های بزرگتر Making Minor Adjustments for Larger Screens

• ایجاد تنظیمات برای صفحه های بزرگ Making Adjustments for Large Screens

• ایجاد تنظیمات برای صفحه های متوسط Making Adjustments for Medium Screens

تنظیمات برای صفحه های کوچک Making Adjustments for Small Screens

• انتقال پیمایش برای صفحه های کوچکتر Moving the Navigation for Smaller Screens

• تنظیم به عناصر آرم و قهرمان Adjusting to the Logo and Hero Elements

• تنظیم مجدد بخشهای اصلی و جوی Rearranging the Main and Atmosphere Sections

• تنظیم مجدد بخش How to to Rearranging the How-to Section

• تنظیم مجدد پیمایش Rearranging the Navigation

• تنظیم فاصله مسیریابی و پاورقی Adjusting the Spacing of the Navigation and Footer

تنظیمات برای کوچکترین صفحه نمایش ها Making Adjustments for the Smallest Screens

• تنظیمات Header و Hero Adjustments for the Header and Hero

• تنظیم بخش نحوه کار Adjusting the How-to Section

• تنظیم پاورقی Adjusting the Footer

تنظیم چیدمان و تنظیمات محتوا برای چاپ Making Layout and Content Adjustments for Print

• استراتژی چاپ Strategy for Printing

• پیوند دادن یک پرونده CSS برای چاپ Linking a CSS File for Print

• تنظیم Base Styles Setting up the Base Styles

• تنظیم سرصفحه Setting up the Header

• نمایش URL ها هنگام چاپ Displaying URLs When Printing

• راه اندازی بخش اصلی Setting up the Main Section

• راه اندازی بخش جو Setting up the Atmosphere Section

• تغییر برچسب های تصویر ما با CSS Switching Our Image Tags with CSS

• یک ظاهر طراحی پاورقی Styling the Footer

• تنظیم شکستگی صفحه با CSS Setting Page Breaks with CSS

از کجا برویم Where to Go from Here

• از کجا برویم Where to Go from Here