آموزش InDesign برای طراحی وب

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

مقدمه Introduction

• خوش آمدی Welcome

• با استفاده از پرونده های تمرینی Using the exercise files

• آنچه باید قبل از تماشای این دوره بدانید What you should know before watching this course

1. تنظیم اسناد 1. Setting Up Documents

• چاپ در مقابل وب: کار با صفحات ، پیکسل ها و مدل جعبه Print vs. web: Working with pages, pixels, and the box model

• ایجاد یک سند برای وب Creating a document for the web

• تنظیم فضای کاری سفارشی برای طراحی وب Setting up a custom web design workspace

• کار با رنگ های وب Working with web colors

• ایجاد شبکه و قالب صفحه وب Creating web page grids and templates

• با استفاده از صفحات اصلی Using master pages

• یادداشتی درباره کار با ابعاد دقیق پیکسل A note about working with exact pixel dimensions

2. کار با سبک و نوع 2. Working with Type and Type Styles

• چاپ در مقابل وب: امتیازات و پیکسل ها ، سبک ها و CSS Print vs. web: Points and pixels, styles and CSS

• با استفاده از قلم های وب Using web fonts

• استفاده از سبک ها برای تقلید از رفتار CSS Using styles to mimic CSS behavior

• سازماندهی گروه های سبک بر اساس محتوای سایت Organizing style groups based on site content

3. کار با اشیاء و تصاویر 3. Working with Objects and Images

• چاپ در مقابل وب: کار با سبک ها و شکافها Print vs. web: Working with object styles and divs

• ساخت فریم های InDesign مانند divs کار می کند Making InDesign frames work like divs

• تعریف و استفاده از سبک های شی Defining and using object styles

• با استفاده از اشیاء لنگر برای اتصال محتوا Using anchored objects to connect content

• با استفاده از اشیاء لنگر دار و بسته بندی متن برای شبیه سازی شناورها Using anchored objects and text wrap to simulate floats

4- استفاده از جداول 4. Taking Advantage of Tables

• چاپ در مقابل وب: استفاده از جداول برای طراحی ، نه برای طرح HTML Print vs. web: Using tables for design, not for HTML layout

• طراحی یک نوار افقی ساده با جداول Designing a simple horizontal navbar with tables

• طراحی یک نوار گرد گوشه ای گرد با جداول Designing a rounded-corner navbar with tables

• طراحی یک نوار عمودی چند سطحی با جداول Designing a multi-level vertical navbar with tables

• ایجاد یک ناوبر دو سطح در حال گسترش با جداول Creating an expanding two-level navbar with tables

5. قرار دادن آن با هم: پروژه نمونه اولیه وب سایت 5. Putting It Together: Website Prototype Project

• چاپ در مقابل وب: درک اهمیت الگوهای Print vs. web: Understanding the importance of templates

• تنظیم قالب سیم فریم Setting up a wireframe template

• طراحی هدر و پاورقی Designing the header and the footer

• با استفاده از فایلهای InDesign جداگانه برای یک الگوی مدولار Using separate InDesign files for a modular template

• اضافه کردن تغییرات طرح با صفحات اصلی Adding layout variations with master pages

• اضافه کردن محتوای صفحه سفارشی Adding custom page content

• مدیریت دارایی با کتابخانه های شی Managing assets with object libraries

6. استفاده از طرح های مایع و جایگزین 6. Using Liquid and Alternate Layouts

• چاپ در مقابل وب: کاوش در صفحه انعطاف پذیر Print vs. web: Exploring the flexible page

• درک چیدمان اصلی مایعات: مقیاس و تازه Understanding basic Liquid Layout: Scale and Recenter

• با استفاده از قانون طرح مایع مبتنی بر راهنما Using the guide-based Liquid Layout rule

• تنظیم قوانین چیدمان مایع مبتنی بر شی Establishing object-based Liquid Layout rules

• استفاده از طرح مایع برای ارتفاعات مختلف صفحه Using Liquid Layout for varying page heights

• ایجاد طرح های جایگزین Creating alternate layouts

• شیرجه رفتن عمیق تر به طرح جایگزین Diving deeper into the alternate layout

• تکرار مطالب با نوار محتوا و نقشه برداری سبک Repurposing content with the Content Conveyor and style mapping

7. اضافه کردن عناصر تعاملی 7. Adding Interactive Elements

• چاپ در مقابل وب: کاوش در صفحه استاتیک و صفحه فعال (بین) فعال Print vs. web: Exploring the static page and the (inter)active page

• بررسی قابلیت ها و محدودیت های تعاملی InDesign Exploring the interactive capabilities and constraints of InDesign

• افزودن پیوندها Adding hyperlinks

• پیش نمایش عناصر صفحه تعاملی با PDF های تعاملی Previewing interactive page elements with interactive PDFs

• پیش نمایش عناصر صفحه تعاملی با پرونده های SWF Previewing interactive page elements with SWF files

• ایجاد دکمه های ناوبری کار Creating working navigation buttons

• افزودن فیلم Adding video

• اضافه کردن محتوای HTML Adding HTML content

8. دست زدن به آن خاموش: اعمال پرونده های InDesign برای اجرای سریع تر و توسعه 8. Handing It Off: Leveraging InDesign Files for Faster Implementation and Development

• چاپ در مقابل وب: کار مشترک Print vs. web: Working collaboratively

• صادرات کالاهای مسطح PNG و JPEG Exporting flat PNG and JPEG comps

• صادرات مدلهای با وضوح خاص دستگاه Exporting mockups at a device-specific resolution

• ایجاد پرونده PSD لایه بندی شده Generating a layered PSD file

• صادرات تصاویر بهینه شده در وب Exporting web-optimized images

• صادرات HTML و CSS Exporting HTML and CSS

نتیجه Conclusion

• مراحل بعدی Next steps