امروزه کاربران، وبسایت‌ها را در انواع مختلفی از صفحه‌نمایش‌ها -از کامپیوترهای ثابت گرفته تا تبلت‌ها و موبایل‌ها با اندازه نمایش‌گرهای گوناگون- مشاهده می‌کنند؛ بنابراین لازم است اصولی رعایت گردند که جایگیری صفحات وب و محتوای کلی آنها در صفحه‌نمایش‌های مختلف با اِشکال مواجه نشود. این دوره‌ی آموزشی تصویری، کاربران را با اصول طراحی و ساخت وبسایت واکنش‌گرا (Responsive) با رویکرد نمایشِ بهینه و بدون مشکل صفحات آن در تمامی صفحه‌نمایش‌های رایج در دستگاه‌های گوناگون آشنا می‌کند. مهارت‌ها و تکنیک‌های تدریس شده در این دوره دارای سطح مبتدی بوده و از آغاز تا پایان روند ساخت سایت واکنش‌گرا را پوشش داده است. مهارت‌هایی که شامل استفاده از فتوشاپ برای خلق ایده‌های تصویری همچنین استفاده از HTML و CSS برای پیش‌بُرد اهداف موردنظر به همراه بسیاری موارد مهم دیگر هستند.
محتوای آموزش:
1- آشنایی با سخت‌افزارهای موردنیاز
2- طرح‌بندی
3- اضافه کردن مضامین، محتوا و لینک‌ها
4- ایجاد و برش بنرهای چنداندازه در فتوشاپ
5- لینک کردن به فایل‌های CSS با مدیا کوئری
6- تنظیم مقیاس دید
7- موارد مهم مربوط به سرفصل، متن و پاورقی
8- اقدامات مربوط به Navigation Links
9- مبادله گرافیک‌های وضوح بالا برای صفحه‌نمایش‌های Retina
تولید کننده: Lynda.com
تاریخ انتشار: 04-10-2012 آپدیت شده در تاریخ 18-02-2015
سطح: مبتدی
مدت زمان آموزش: 2 ساعت و 20 دقیقه
مدرس: Chris Converse
فهرست کامل سرفصل‌ها و عناوین آموزش (به همراه زمان دقیق آنها) :
Introduction - 7m 39s
Previewing the final project - 4m 0s
About the exercise files - 1m 15s
Exploring the software you'll need to complete this course - 49s
Beginning your project - 1m 35s
1. For Those Using Dreamweaver - 3m 45s
What to expect with Design view in Dreamweaver - 2m 1s
Accessing code for HTML and CSS in Dreamweaver - 1m 44s
2. Setting Up Your Project - 9m 19s
Planning your layout - 2m 47s
Adding the main HTML containers - 1m 47s
Adding the promo containers - 31s
Adding links and the copyright - 1m 47s
Adding sample content into the HTML containers - 2m 27s
3. Creating Web Graphics - 8m 37s
Creating and slicing multiple-sized banner images - 5m 53s
Exporting content and template artwork - 2m 44s
4. Preparing the HTML File - 7m 27s
Linking CSS files for all screen sizes - 1m 42s
Linking CSS files based on screen size with media queries - 2m 13s
Enabling Internet Explorer 7 and 8 to understand HTML5 - 1m 25s
Setting the viewport scale - 2m 7s
5. Creating CSS Rules Across All Screens - 9m 0s
Adding the background pattern and the page container color - 3m 43s
Styling the headings - 2m 17s
Styling the body text and the links - 1m 15s
Styling the footer - 1m 45s
6. Preparing the HTML File - 9m 49s
Understanding compound rules - 2m 58s
Styling the promo links with a CSS sprite - 2m 48s
Styling the promo text - 1m 26s
Adding the promo images with CSS - 2m 37s
7. Creating the Content and the Layout Containers - 7m 46s
Adding CSS rules for layout - 2m 8s
Styling the header on large screens - 2m 34s
Styling the article on large screens - 3m 4s
8. Styling the Promos - 6m 29s
Styling the navigation links - 2m 1s
Styling the navigation for large screens - 1m 16s
Positioning the navigation for large screens - 1m 37s
Clearing the float for the promos - 1m 35s
9. Working with CSS Rules - 2m 47s
Adding CSS rules with inline media queries - 2m 47s
10. Styling for Medium Screens - 6m 0s
Styling the header for medium screens - 2m 32s
Styling the navigation for medium screens - 1m 10s
Styling the promos for medium screens - 2m 18s
11. Styling for Small Screens - 12m 7s
Styling the header for small screens - 2m 27s
Styling the navigation for small screens - 1m 12s
Styling the navigation links for small screens - 4m 13s
Styling the promos for small screens - 2m 57s
Styling the footer for small screens - 1m 18s
12. Supporting High-Definition (Retina) Screens - 13m 12s
Additional exercise files for this chapter - 1m 4s
Creating double-sized graphics for high-definition screens - 4m 45s
Replacing the promo graphics with CSS media queries - 2m 42s
Replacing the logo and banner graphics with CSS media queries - 4m 41s
13. Creating Markup and Styles for Print - 35m 46s
Additional exercise files for this chapter NEW - 1m 7s
Creating graphics optimized for printing NEW - 3m 35s
Including additional content for printed pages NEW - 2m 0s
Creating print-friendly CSS rules NEW - 5m 14s
Revealing hyperlink URLs for a printed page NEW - 4m 28s
Redefining the promo and footer styles NEW - 2m 19s
Background images vs. image tags NEW - 1m 52s
Image option one: Using background images NEW - 5m 15s
Image option two: Adding image tags NEW - 6m 44s
Adding CSS page breaks NEW - 3m 12s
Conclusion - 57s
Where to go from here - 57s
نکات:
1- این آموزش به زبان انگلیسی است.
2- آموزش به صورت فیلمهای جداگانه برای هر فصل است.
3- فرمت فایلها MP4 است.
4- فایل های دانلودی قابلیت تعمیر با WinRAR در صورت دانلود ناقص را دارا می باشند.