آموزش طراحی قالب سایت با html , css در(۲۰ قسمت)

با سلام به کاربران و علاقمندان به آموزش طراحی سایت. با سری جدید و کامل از آموزش طراحی قالب سایت در ۲۰ ویدئوی آموزشی در خدمت شما خواهیم بود.

در سالهای اخیر با توجه به رویکرد مثبت جامعه به تکنولوژی و استفاده از ابزارهایی مانند گوشی های هوشمند و تبلت و … سایت ها مورد توجه قرار گرفتند و بازار طراحی سایت را گرم و گرم تر کردند.

اگر بخواهیم تعریف ساده ای از طراحی سایت داشته باشیم باید بگیم طراحی سایت به معنای طراحی و ساخت یک وب سایت یا بهینه سازی و ری دیزاین یک سایت قدیمی در بستر اینترنت است.

در حال حاضر میلیون ها سایت در سراسر جهان وجود دارند که البته هیچکدام بیش از ۲۸ سال قدمت ندارند. و روز به روز هم بر تعداد آن ها افزوده می شود. چرا که کاربرد وسیعی دارند.

در این دوره آموزشی قصد داریم به صورت گام به گام به تمام تگها و خصوصیات موجود در Html و css بپردازیم.

آموزش طراحی قالب سایت با html , css در (۲۰ قسمت)

قسمت ۱ آشنایی:

قسمت اول این آموزش را ابتدا با html که زبان نشانه گذاری فوق متن است شروع میکنیم.

برای مشاهده و دانلود قسمت اول اینجا کلیک کنید.

قسمت ۲ متاتگها:

در این جلسه قرار بر این هست که شروع به ایجاد یک سایت جدید کنیم و جزییات Html و head را بررسی کنیم و متاتگهای html را ایجاد کنیم.

برای مشاهده و دانلود قسمت دوم اینجا کلیک کنید.

قسمت ۳ تگهای متنی :

در این قسمت از آموزش طراحی قالب سایت قرار بر این هست که تگهای مهم و کاربردی مربوط به متن ها در html  را با هم بررسی کنیم.

برای مشاهده و دانلود قسمت سوم اینجا کلیک کنید.

قسمت ۴ تگهای کاربردی:

در ادامه ی دوره ی طراحی سایت با html , Css  قرار هست بپردازیم به تگ های کاربردی مثل Footer , Aside و … که در آموزش در موردشون توضیح دادیم و در اخر اموزش هم در مورد اتریبیوت ها توضیح میدیم و در قسمت بعدی این بحث رو هم کامل خواهیم کرد.

برای مشاهده و دانلود قسمت چهارم اینجا کلیک کنید.

قسمت ۵ اتریبیوت ها:

در ادامه ی محبث طراحی قالب وب سایت با Html , Css  قرار هست بپردازیم به خاصیت های تگها که اتریبیوت نامیده میشوند. که هر تگ خاصیت مخصوص خودش را دارد.  البته ممکنه چندتا تگ خاصیت یکسانی داشته باشند.

در این آموزش تگ هایی مثل لینک و عکس ها و برخی دیگر از تگ ها رو مورد بررسی قرار میدیم. که امیدوارم خوووب ببینید و تمرین کنید.

برای مشاهده و دانلود قسمت پنجم اینجا کلیک کنید.

قسمت ۶ Tables:

در قسمت ششم درمود مبحث مهمی قراره صحبت کنیم. جداول نقش مهمی را در ایجاد صفحات وب دارند. که امروز به معرفی تمامی تگ های مربوط به طراحی جدول ها میپردازیم و به برخی از موارد استفاده جدول ها که در کجا استفاده می شوند و کاربرد دارند اشاره خواهیم کرد.

پس این آموزش رو خوب ببینید تا با اصول و منطق کار با جدول ها اشنا بشید.

برای مشاهده و دانلود قسمت ششم اینجا کلیک کنید.

قسمت ۷ لیست ها:

در قسمت ۷  آموزش طراحی سایت با Html , Css  قرار هست بپردازیم به مبحث مهم لیست ها. در طراحی ما برای ساخت منوی های تو در تو و یا ساخت لیست دسته بندی ها در سایدبار های سایت نیاز به استفاده از لیست ها داریم. در این قسمت کاملا با مفهوم لیست آشنا خواهیم شد و با تگ های مربوط با آن مانند Ul , li و سایر تگ هایی که لازم هست آشنا می شویم.

برای مشاهده و دانلود قسمت هفتم اینجا کلیک کنید.

قسمت ۸ فرم ها:

در ادامه ی دوره ی طراحی وب سایت Html , Css قرار هست به فرم ها بپردازیم. در وب سایت ها شاید گونه های مختلفی از فرم ها رو دیده باشید.

مثلا فرم های ثبت نام،  فرم های ورود به پنل کاربری یا شایدم باکس های جستجو. همه ی این ها بخشی از فرم های جستجو هستن که امروز به بررسی نحوه ی ساخت و پارامتر های آن میپردازیم. فرم ها نقش مهمی را در وب سایت دارند. پس خوب یاد بگیرید.

برای مشاهده و دانلود قسمت هشتم اینجا کلیک کنید.

قسمت ۹ طراحی سایت:

در قسمت ۹  آموزش html  به معرفی تگ های نمایش موزیک ، فیلم ، وب سایت های دیگر میپردازیم. در ابتدای کار درمورد مرورگرهای که از این قابلیت پشتبانی میکنند صحبت میکنیم که اگاهی کامل پیدا کنید.

در ادامه میپردازیم به فرمت هایی که در html میتونیم از اون ها استفاده کنیم صحبت میکنیم و در آخر یاد میگیریم که چطوری و با استفاده چه تگهایی این امکان میسر میشود.

برای مشاهده و دانلود قسمت نهم اینجا کلیک کنید.

قسمت ۱۰ شروع css:

در قسمت ۱۰ از دوره ی Html و Css  قرار هست که کار با css ها رو شروع کنیم و ببنیم که چطوری فایل css رو به html لینک کنیم و اولین کد های خودمون رو بنویسیم. بعد از اون یاد خواهیم گرفت که چطوری به تگ های html استایل بدیم و با چند تگ کاربری css آشنا خواهیم شد و رفته رفته از قسمت بعد شروع کنیم به کد نویسی css. امیدوارم که این آموزش هم بدردتون بخوره.

برای مشاهده و دانلود قسمت دهم اینجا کلیک کنید.

قسمت ۱۱ قواعد css برای شروع ساخت پروژه:

در این قسمت با ۴ پارامتر مهم در css آشنا خواهیم شد که در بحث طراحی به نظرم خیلی بنیادی هستن و شما باید تسلط کافی روی اونها داشته باشید. به معرفی انواع المنت های موجود میپردازیم و المنت های مهم را تعریف میکنیم مثل div , span. هر کدام از این ها چه خواصی رو دارن و باید چه کنیم برای تغییرشون. این قسمت از آموزش رو خیلی جدی بگیرید و تمرین کنید. چون از قسمت بعدی میریم برای ساخت پروژه.

برای مشاهده و دانلود قسمت یازدهم اینجا کلیک کنید.

قسمت ۱۱ طراحی قالب موزیک هدر بخش ۱:

امیدوارم که قسمت های قبلی آموزش طراحی سایت رو به خوبی دیده باشید و تمرین کرده باشید. چون از امروز قراره پروژه کاملی رو شروع کنید و آموزش طراحی قالب سایت موزیک رو داشته باشیم.

شاید برای همه سوال باشه چرا سایت موزیک؟ یکی اینکه که قالبی که استفاده کردیم تقریبا تمامی مواردی رو که میخواهیم برای یک پروژه ی کامل رو داره و این میتونه تمامی ابعاد را برای یک آموزشی CSS  و  HTML کامل پر کنه. در قسمت اول این آموزش به نکات اولیه ای برای شروع پروژه میپردازیم و بعد از آن بخش اول هدر سایت را طراحی میکنیم.

برای مشاهده و دانلود قسمت یازدهم بخش ۱ اینجا کلیک کنید.

قسمت ۱۲ طراحی قالب موزیک تکمیل هدر:

امیدوارم که آماده قسمت دوم طراحی قالب موزیک باشید. در بخش دوم قرار هست بخش هدر رو تکمیل کنیم و چند تکنیک رو یاد بگیریم. با کد های Css جدید آشنا خواهیم شد و شما میتونید با استفاده از کدها قطعا روند کدنویسی بهتری رو داشته باشید. انتهای این آموزش به شما تمرین داده خواهد شد و شما باید خودتون ادامه ی بخش جستجو رو تکمیل کنید که این چالش شما خواهد بود.

برای مشاهده و دانلود قسمت دوازدهم اینجا کلیک کنید.

قسمت ۱۳ باکس جستجو:

در قسمت ۱۳ از آموزش طراحی با Html و Css میپردازیم به ادامه ی قالب موزیکمون که بخش جستجوی آن هست و در این بخش تکنیک های جالبی وجود داره که به همه ی آن ها میپردازیم. مخصوصا قسمت آیکون جستجو میتونه برای همتون یک چالش خوب باشه. که البته قرار بود این قسمت رو خودتون بسازید و چون چند نکته ی خوب داشت تصمیم گرفتیم این قست رو هم آموزش بدیم پس برید سراغ آموزش.

برای مشاهده و دانلود قسمت سیزدهم اینجا کلیک کنید.

قسمت ۱۴ طراحی اسلایدر:

در ادامه ی دوره ی طراحی قالب موزیک به بخش اسلایدر میپردازیم و قرار هست تمامی قسمت های این اسلایدر رو باهم کد نویسی کنیم . و چند تکنیک جدید رو در html و css یاد بگیرید که امیدوارم براتون کاربردی بوده باشه.

برای مشاهده و دانلود قسمت چهاردهم اینجا کلیک کنید.

قسمت ۱۵ بخش تبلیغات:

در بخش ۱۵ میپردازیم به قسمت بنر های تبلیغاتی و کامل اون رو کد نویسی میکنیم و شما باید به عنوان تمرین قسمت های بعدی رو نیز کد نویسی کنید تا طراحی اون قسمت کامل بشه. در این قسمت هم از چند تکنیک دیگه برای طراحی استفاده کردیم که امیدوارم بدرتون بخوره.

برای مشاهده و دانلود قسمت پانزدهم اینجا کلیک کنید.

قسمت ۱۶ قالب موزیک آخرین مطالب:

در ادامه ی آموزش طراحی سایت و طراحی قالب موزیک میخوایم بپردازیم به بخش آخرین مطالب و قراره این قسمت را کد نویسی کنیم. در قسمت ۱۶ با مبحث مهم Hover آشنا میشیم که وقتی روی یک المنت رفتیم رفتاری رو از خودش نشون بده که خیلی قابلیت جذابی هست که امیدوارم بدرتون بخوره.

برای مشاهده و دانلود قسمت شانزدهم اینجا کلیک کنید.

قسمت ۱۷ قالب موزیک سایدبار:

در ادامه ی دوره ی آموزش طراحی سایت میپردازیم به مبحث طراحی و کدنویسی سایدبار های راست و چپ و یاد میگیریم که چطوری این کار رو انجام بدیم . در قسمت ۱۷ شما با مبحث های جدید مثل فوکوس اشنا میشید که کاربرد بسیار زیادی رو در بخش فرم های درج اطلاعات دارن.

برای مشاهده و دانلود قسمت هفدهم اینجا کلیک کنید.

قسمت ۱۸ قالب موزیک پست:

در ادامه ی دوره ی آموزش طراحی سایت میپردازیم به قالب موزیک و طراحی بخش پست های سایت که تکنیک های خوبی رو در این قسمت آموزشی یاد خواهید گرفت ، پس این قسمت رو خوب یاد بگیرید و تمرین کنید.

برای مشاهده و دانلود قسمت هجدهم اینجا کلیک کنید.

قسمت ۱۹ قالب موزیک فوتر:

در ادامه ی دوره ی آموزش طراحی سایت میپردازیم به بخش پایانی وب سایت یعنی فوتر که وظیفه ی معرفی کپی رایت سایت و اطلاعاتی که معمولا حاکی از اطلاعات سایت میباشد و داشتن یک فوتر خوب در سایت میتونه موثر باشه.

برای مشاهده و دانلود قسمت نوزدهم اینجا کلیک کنید.

قسمت ۲۰ (آخر) قالب موزیک نکات تکمیلی:

دیگه الان شما نم نم باید بتونید هر قالبی رو که میخواهید رو کد نویسی کنید و اگر هنوز تسلط کافی ندارید هیچ مشکلی نیست و فقط باید آموزش رو ببینید و تمرین بیشتری کنید. در آخرین قسمت از دوره آموزش طراحی سایت با html و css  میپردازیم به نکات تکمیلی که نیاز هست شما بدونید و به مبحث ترنزیشن ها در css میپردازیم که باعث میشه سایت حرفه ای تری رو داشته باشید.

برای مشاهده و دانلود قسمت بیستم اینجا کلیک کنید.

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام مدرسه گرافیک پلاس عضو شوید.

کلمات کلیدی: آموزش رایگان طراحی سایت_آموزش طراحی سایت با css و html_آموزش طراحی وب دیزاین_آموزش طراحی وب سایت_طراحی سایت_طراحی سایت با html_طراحی قالب سایت