آموزش طراحی و توسعه وب عملی: 7 دوره در 1

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

طراحی کاربردی وب با استفاده از فتوشاپ Practical Web Design using Photoshop

• مقدمه ای بر طراحی وب با استفاده از فتوشاپ Introduction to web design using Photoshop

• راه اندازی Artboards Setting up Artboards

• تنظیم صحنه Setting the Stage

• وایرفریمینگ Wireframing

• Wireframing UI/UX برای موبایل Wireframing UI/UX for Mobile

• صادرات وایرفریم Exporting Wireframes

• طراحی برای دسکتاپ Designing for Desktops

• طراحی برای موبایل Designing for Mobile

• آماده شدن برای برش Preparing for Slicing

• شروع کار با برش Getting started with slicing

• اصلاح برش ها Modifying Slices

• سخنان پایانی Final words

مبانی عملی HTML5 Practical HTML5 Basics

• مقدمه ای بر HTML Introduction to HTML

• HTML4 در مقابل HTML5 HTML4 vs. HTML5

• اولین صفحه HTML خود را بسازید Making your first HTML page

• ابزارهایی برای ایجاد فایل های HTML Tools to create HTML files

• پایه تگ های HTML Base HTML Tags

• برچسب های پاراگراف Paragraph Tags

• شکستن برچسب ها Break Tags

• برچسب های سربرگ Header Tags

• برچسب های پررنگ و کج Bold and Italic Tags

• لیست های مرتب و نامرتب Ordered and unordered Lists

• برچسب های تصویر Image Tags

عملی HTML5 پیشرفته Practical HTML5 Advanced

• تفاوت بین پیوندهای مطلق و پیوندهای نسبی Difference between Absolute Links and Relative Links

• پیوند دادن به یک صفحه خارجی Hyperlinking to an external page

• پیوند دادن به یک آدرس ایمیل Hyperlinking to an email address

• پیوند دادن به یک فایل در سایت شما Hyperlinking to a file in your site

• پخش و کنترل صدا Playing and controlling audio

• پخش و کنترل ویدئو Playing and controlling video

• جاسازی یک ویدیو Embedding a video

• جدول چیست - مزایا و معایب What is a Table - Pros and Cons

• خواص جدول Table properties

• اضافه کردن iFrame Adding an iFrame

• افزودن iFrame: قسمت 2 Adding an iFrame: Part 2

• آنچه با فرمی با استفاده از دانش HTML امکان پذیر است What is possible with a form using HTML knowledge

• تعریف فرم Defining the form

• فیلدهای متنی و مناطق متنی Text fields and text areas

• دکمه های رادیویی و دکمه های بررسی Radio buttons and check buttons

• ورودی داده ها و دکمه ها Data input and buttons

• ساختار فایل مناسب Proper file structure

• نظر دادن کد Code commenting

• برچسب های متا Meta Tags

مبانی عملی CSS3 Practical CSS3 Basics

• درباره کلاس - آنچه شما نیاز دارید About the class - what you will need

• CSS چیست؟ چرا ما به آن نیاز داریم؟ What is CSS? Why we need it?

• چه چیزی در CSS3 جدید است What's new in CSS3

• انتخابگرها، ویژگی ها و ویژگی های CSS CSS Selectors, properties and attributes

• انتخابگرهای شناسه ID Selectors

• انتخاب کنندگان کلاس Class Selectors

• انتخابگرهای عنصر Element Selectors

• همه انتخابگرها All Selectors

• شیوه نامه های درون خطی Inline style sheets

• استایل شیت های خارجی External style sheets

• سبک های درون خطی Inline styles

عملی CSS3 پیشرفته Practical CSS3 Advanced

• مدل جعبه The Box Model

• افزودن رنگ Adding Color

• کار با فونت Working with fonts

• تصاویر پس زمینه Background images

• تصاویر پس زمینه: قسمت 2 Background Images: Part 2

• پیوندهای استایل Styling links

• تگ های شناسه استایل Styling ID Tags

• شناور و شفاف Float and clear

• عناصر بلوک و درون خطی Block and inline elements

• تثبیت موقعیت Positioning

مبانی طراحی وب سایت Web Design Basics

• 9 قانون طراحی وب سایت بهتر 9 Rules of better web design

• تئوری رنگ برای طراحان وب Color Theory for Web Designers

بوت استرپ عملی Practical Bootstrap

• چرا بوت استرپ؟ Why Bootstrap?

• بوت استرپ را دانلود کنید Download Bootstrap

• اضافه کردن بوت استرپ در سایت شما Adding Bootstrap in your site

• ایجاد ناوبری Creating the navigation

• ایجاد ناوبری: قسمت 2 Creating the navigation: Part 2

• ایجاد ناوبری: قسمت 3 Creating the navigation: Part 3

• ایجاد ظروف Creating containers

• استایل کردن تصاویر Styling images

• ایجاد پاورقی Creating the footer

• اضافه کردن دکمه های مدل دار Adding styled buttons

عملی بوت استرپ پیشرفته Practical Bootstrap Advanced

• افزودن نقشه های گوگل Adding Google Maps